
#map>div[class="search"]{
    position:absolute;
    max-width: var(--L_search);
    width:calc(100% - 2*var(--P_search));
    top: var(--P_search);
    left:var(--P_search);
    z-index: 2;

    background-color: var(--C_vista_turquoise);
    
    -webkit-border-radius: var(--R_search);
    -moz-border-radius: var(--R_search);
    border-radius: var(--R_search);
    padding: var(--P_search);

    box-sizing: border-box;
}

#map>div[class="search"]>form{float:left;width: 100%;height: 100%;border: none;}
#map>div[class="search"]>form>input{display: none;}
#map>div[class="search"]>form>input[type="text"]{
    display:block;
    float:left;
    width: calc(100% - var(--L_button) - var(--E_form));
    height: var(--H_button);
    border: 1px dashed #ddd;
    -webkit-border-radius: var(--R_button);
    -moz-border-radius: var(--R_button);
    border-radius: var(--R_button); 
    padding: var(--P_button); 
    box-sizing: border-box;
    margin-right: var(--E_form);
    background-color: transparent;
    
    font-family: 'Alexandria-Medium';
    color: white;
    font-style: normal;
    font-size: var(--FONT_input);
    overflow: hidden;
}

#map>div[class="search"]>form>input[type="text"][class="bad"]:focus,
#map>div[class="search"]>form>input[type="text"][class="bad"]{
    border-color:red;
    background-color: rgb(233, 187, 187);
    color: red;
}


#map>div[class="search"]>form>input[type="text"]:focus{
    outline: none;
    box-shadow: none;
    color:white;
    border-color:white;
}


#map>div[class="search"]>form>input[type="text"]:focus::placeholder ,
#map>div[class="search"]>form>input[type="text"]::placeholder {
    outline: none;
    box-shadow: none;
    font-family: 'Alexandria-Medium';
    color: white;
    font-size: 16px;
}


#map>div[class="search"]>form>button[type="submit"]{
    float:left;
    width: var(--L_button);
    height: var(--H_button);
    outline: none;
    box-shadow: none;
    border:none;
    background-color: var(--C_vista_bleu);
    -webkit-border-radius: var(--R_button);
    -moz-border-radius: var(--R_button);
    border-radius: var(--R_button);
    cursor: pointer;
    overflow:hidden;

    transition-property:  background-color;
    transition-duration: 0.6s;
    transition-timing-function:ease-in-out;
    transition-delay: 0s;
}
#map>div[class="search"]>form>button[type="submit"][disabled]{
    background-color: var(--C_vista_turquoise_sombre1);
    cursor: not-allowed;
}


#map>div[class="search"]>form>button[type="submit"]>i{
    float:left;
    width: 100%;
    height: 100%;
    font-size: var(--FONT_icone);
    color:var(--C_vista_jaune);
    text-align: center;
    line-height: var(--H_button);

    transition-property:  color;
    transition-duration: 0.6s;
    transition-timing-function:ease-in-out;
    transition-delay: 0s;
}
#map>div[class="search"]>form>button[type="submit"][disabled]>i{color:white;}

#map>div[class="search"]>form>button[type="submit"]:hover{background-color: var(--C_vista_jaune);}
#map>div[class="search"]>form>button[type="submit"]:hover>i{color:var(--C_vista_bleu);}
#map>div[class="search"]>form>button[type="submit"][disabled]:hover{background-color: var(--C_vista_turquoise_sombre2);}
#map>div[class="search"]>form>button[type="submit"][disabled]:hover>i{color:white;}