@import url('https://fonts.googleapis.com/css2?family=Arimo:ital,wght@0,400..700;1,400..700&family=Exo:ital,wght@0,100..900;1,100..900&family=Hind:wght@300;400;500;600;700&display=swap');
@import url("header.css");
@import url("switch.css");
@import url("fileInput.css");

/* Global style */

html, body, main {
    background-color: #FEFCFB;
}

main {
    padding-bottom: 3vw;
}

h1 {
    font-size: 25px;
    margin-bottom: 5vw;
}

/* END Global style */

/* Login style */
#logoImg {
    max-width: 200px;
    height: auto;
}

#loginCard h1 {
    margin-top: 10px!important;
    margin-bottom: 0px!important;
    font-family: "Exo"!important;
    font-size: 100%!important;
}

input {
    padding-left: 0!important;
    padding-bottom: 0!important;
    border: 0!important;
    box-shadow: 0 0 0 0!important;
    border-radius: 0!important;
    border-bottom: solid 1px black!important;
}

input::placeholder {
    font-family: "Arimo";
}

.button {
    border-radius: 0!important;
    padding-bottom: calc(0.2em - 1px)!important;
    padding-top: calc(0.2em - 1px)!important;
    max-height: 35px;
}

html body .button.is-info {
    background-color: #0071AA;
}

/* END Login style */

/* Form style */

#askForm .title {
    font-family: Hind;
    font-weight: 400;
}

#askForm .vehicleMessage .column:first-child, #askForm .addresses .column:first-child {
    margin-right: 3vw;
}

#askForm .categ {
    margin-top: 1vw;
}

#askForm .categ .faisceauCateg div {
    padding-left: 10px;
}

#askForm textarea {
    border-radius: 0;
    border: none;
    box-shadow: none;
    border-bottom: solid 1px black;
}

#askForm textarea, #askForm input {
    font-family: "Arimo";
    color: black;
}

#askForm textarea::placeholder, #askForm input::placeholder {
    color: rgba(0, 0, 0, 0.5);
    font-family: "Arimo";
}

#askForm input:required {
    background-color: rgba(255, 255, 0, 0.062);
}

#askForm input:disabled {
    background-color: rgba(0, 0, 0, 0.062);
}

#askForm .select {
    width: 100%;
    max-width: none;
}

#askForm .select select {
    border-radius: 0;
    border: none;
    border-bottom: solid 1px black;
    width: 100%;
    max-width: none;
}

#askForm .select:not(.is-multiple):not(.is-loading)::after {
    border-color: black;
}

#askForm .select select:not([multiple]) {
    padding-left: 0;
}

#askForm .field.image {
    margin-top: 50px;
}

#askForm .file {
    display: block;
    width: 100%;
    max-width: none;
    height: 100%;
}

#askForm .fileLabel {
    display: flex;
    justify-content: center;
    align-items: center;
    color: black;
    font-family: Arimo;
    font-size: 20px;
    font-weight: 400;
    height: 122px;
    width: 100%;
    max-width: none;
}

#askForm .file-label .file-cta {
    border-radius: 0;
    background-color: #FAFAFA;
    border-color: black;
}

#askForm .categ label, #askForm .categ p{
    color: black;
}

#askForm #alertStock {
    position: relative;
}

#askForm .alertStock::before {
    background-image: url("../pictoAlert.png");
    background-size: 20px 20px;
    width: 20px;
    height: 20px;
    position: absolute;
    top: 12px;
    left: -27px;
    content:"";
    z-index: 10;
}

#askForm #vehicle_carrier_select .text-warning {
    color: #FC7D36;
    display: none;
}

/* END Form style */

.box {
    border-radius: 0!important;
    background: #FFF;
    box-shadow: 2px 1px 5px 0px rgba(0, 0, 0, 0.10), 6px 6px 9px 0px rgba(0, 0, 0, 0.09), 14px 13px 12px 0px rgba(0, 0, 0, 0.05), 25px 23px 14px 0px rgba(0, 0, 0, 0.01), 39px 36px 15px 0px rgba(0, 0, 0, 0.00);
}

.box #askForm {
    padding: 2.5vw;
}

.notification {
    border-radius: 0;
}

.pagination-ellipsis, .pagination-link, .pagination-next, .pagination-previous, .select select, .tag:not(body) {
    border-radius: 0 !important;
}

#homeNav {
    margin-bottom: 5vh;
}

#homeNav .cta {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    min-height: 150px;
    max-width: 300px;
    min-width: 300px;
}

#homeNav .column {
    display: flex;
    justify-content: center;
}

#homeNav .cta svg {
    transition: 0.8s;
}

#homeNav .cta:hover svg {
    transform: scale(1.2);
}

#homeNav .cta p {
    margin: 10px 0;
}

#submitField {
    display: flex;
    flex-direction: row;
    justify-content: end;
}

#submitField p {
    margin-left : 1.5rem;
}

@media screen and (max-width: 620px) {
    #submitField {
        display: flex;
        flex-direction: column;
        justify-content: end;
    }

    #submitField p {
        margin-left : 0;
        margin-bottom: 1.5rem;
    }

}

@media screen and (min-width: 768px) {
    
    /* Global style */

    #main {
        margin-left: 80px;
    }

    /* END Global style */

    /* Login style */

    #loginCard input {
        min-width: 350px;
    }
    /* END Login style */
}

@media screen and (max-width: 1024px) {
    
    /* Global style */

    h1 {
        font-size: 36px;
    }

    .container {
        margin-left: 4vw;
        margin-right: 4vw;
    }

    /* END Global style */
}

@media screen and (min-width: 1024px) {
    
    /* Global style */

    h1 {
        font-size: 36px;
    }

    /* END Global style */
}