:root{
    --blue-niids : #24445C;
    --gold-niids : #C6A47F;
    --white-niids : #FFF;
    --light-gold : #E0CDB9;
    --dark-gold : #96836F;
    --shadow-gold : #887766bb;
    --shadow-gold-light : #88776688;
    --feature : 300 .7rem 'Open Sans', sans-serif;
    --choice-client : 400 .7rem 'Open Sans', sans-serif;
    --confirm : 600 .75rem 'Open Sans', sans-serif;
    --number : 400 .9rem 'Open Sans', sans-serif;
}

*{
    margin: 0;
    padding: 0;
}

body{
    background-color: var(--blue-niids)!important;
}

#searchbar h1 {
    font: var(--feature)!important;
    color: var(--white-niids)!important;
}

#searchbar h3 {
    font : var(--number)!important;
    color : var(--light-gold)!important;
}

p {
    font: var(--choice-client)!important;
    color: var(--white-niids)!important;
}

#searchbar,
#criteria {
    display: none!important;
    background-color: var(--gold-niids)!important;
}

.border-end{
    border-right : 1px solid var(--light-gold)!important;
}

.container-confirm{
    display: flex;
}

.container-confirm .reset,
.container-confirm .confirm{
    width: 50%;
}

.reset p {
    color: var(--dark-gold)!important;
}

.confirm p {
    color: var(--white-niids)!important;
}

#searchbar {
    position: relative;
    position: fixed;
    z-index: 5;
    top: 55px;
    cursor: pointer!important;
}

#criteria,
#section-detail {
    position: relative;
    position: fixed;
    z-index: 3;
    top: 115px;
}

#criteria{
    z-index: 4;
}

.opacity-0{
    z-index: 0!important;
}

/* Flex habitable, parcelle et tri*/
.surface-container {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap : 60px;
    justify-content: space-between;
}

.habitable-container,
.terrain-container,
.tri-container{
    display: flex;
    flex-direction: column;
}

.criteres-container-habitable,
.criteres-container-terrain,
.criteres-container-tri{
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 15px;
}

.habitable-container,
.terrain-container {
    width: 40%;
}

.tri-container{
    width: 20%;
}

.tri-container .dropdown{
    width: 100%!important;
}

.surface-container .habitable-container .input-group,
.surface-container .terrain-container .input-group{
    box-shadow: 0 0 5px var(--shadow-gold)!important;
}

.surface-container .habitable-container .input-group-text,
.surface-container .terrain-container .input-group-text{
    background-color: var(--white-niids)!important;
    border: none;
    border-radius: 0 2px 2px 0;
    font: var(--feature)!important;
    color: var(--dark-gold)!important;
}

/* Style Input/dropdown habitable, parcelle et tri */
#criteria input,
#criteria button,
#property input,
#property button  {
    background-color: var(--white-niids)!important;
    font: var(--feature)!important;
    color: var(--dark-gold)!important;
    border: none!important;
    border-radius: 2px!important;
    text-transform: none!important;
}

.dropdown-menu,
.dropdown-item{
    font: var(--feature)!important;
    color: var(--dark-gold)!important;
}

#criteria .form-control:focus,
#criteria .btn:focus
#criteria .form-check-input:focus,
#budget .form-control:focus,
#budget .btn:focus,
#property .form-check-input:focus{
    box-shadow: none!important;
}

/* Flex pièces, chambres et complement */
.criteres-container {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap : 100px;
    justify-content: space-between;
}

.container-piece,
.container-chambre,
.container-complement {
    display: flex;
    flex-direction: column;
}

.criteres-container-piece,
.criteres-container-chambre,
.criteres-container-complement{
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 30px;
}

.container-pieces{
    width: 30%;
}

.container-chambres{
    width: 30%;
}

.container-complement{
    width: 40%;
}

.criteres-container .box{
    width: 40px;
    height: 40px;
    position: relative;
}

.criteres-container .box input{
    position: absolute;
    width: 100%;
    height: 100%;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    z-index: 20;
}

/* Style Input pièces, chambres et complement */
.criteres-container .box input{
    position: absolute;
    width: 100%;
    height: 100%;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    z-index: 20;
}

.criteres-container .box input{
    position: absolute;
    width: 100%;
    height: 100%;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    z-index: 20;
}

.boxContent {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

.boxContent i{
    font-size: 1.4rem;
    position: relative;
    z-index: 20;
    color: var(--light-gold)!important;
}

.boxContent p{
    color: var(--light-gold)!important;
    font: var(--number)!important;
    z-index: 20;
}

#criteria input[type="checkbox"]:checked,
#property input[type="checkbox"]:checked {
    background-color:  var(--dark-gold)!important;
}

#section-detail{
    display: flex;
    align-items: stretch!important;
}

/* Flex : type de bien / localisation */
#property,
#localisation,
#budget{
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 25%;
    background-color: var(--gold-niids)!important;
}

.container-property,
.container-localisation,
.container-budget{
    padding: 0 50px;
}

.criteres-property-container{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.criteres-property-container .form-check{
    width: 50%;
    display: flex;
    align-items: center;
}

.criteres-property-container label{
    color: var(--white-niids)!important;
    font: var(--feature)!important;
    margin-left: 10px;
}

/* Flex : localisation*/
#localisation .dropdown{
    border: none!important;
    border-radius: 2px!important;
    box-shadow: 0 0 5px var(--shadow-gold)!important;
}

#localisation input {
    font: var(--feature)!important;
    color: var(--dark-gold)!important;
}

#localisation .badge{
    background-color: var(--dark-gold)!important;
    font: var(--feature)!important;
}

#localisation .btn-close{
    margin-top: 0.25em;
}

#localisation .invalid-feedback
    {
        font: var(--feature)!important;
        color: var(--dark-gold)!important;
    }

/* Flex : budget*/
.criteres-budget-container{
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 15px;
}

.container-budget .input-group{
    box-shadow: 0 0 5px var(--shadow-gold)!important;

}

.container-budget .input-group .form-control,
.container-budget .input-group .input-group-text{
    background-color: var(--white-niids)!important;
    border: none;
    border-radius: 0 2px 2px 0;
    font: var(--feature)!important;
    color: var(--dark-gold)!important;
}

/* media queries */
@media(max-width :1400px){
    /* Flex pièces, chambres et complement */
    .criteres-container{
        gap: 60px;
    }

    .criteres-container-piece,
    .criteres-container-chambre,
    .criteres-container-complement{
    gap: 20px;
    }
}

@media (max-width :1200px) {
    /* Flex pièces, chambres et complement */
    .criteres-container{
        gap : 40px
    }

    .criteres-container-piece,
    .criteres-container-chambre,
    .criteres-container-complement{
        gap: 10px;
    }

    /* Flex type de bien */
    #property,
    #localisation,
    #budget{
        width: 50%;
    }
}

@media (max-width :992px){
    /* Flex pièces, chambres et complement */
    .criteres-container{
        gap : 30px
    }

    .criteres-container-piece,
    .criteres-container-chambre,
    .criteres-container-complement{
        gap: 5px;
    }

    .criteres-container .box{
        width: 30px;
        height: 30px;
    }
}

@media (max-width :767px){
    /* Flex pièces, chambres et complement */
    .criteres-container {
        flex-wrap: wrap;
        gap: 3px;
    }

    .container-pieces{
        width: 50%;
    }
    
    .container-chambres{
        width: 50%;
    }
    
    .container-complement{
        width: 100%;
    }

    .criteres-container .box{
        width: 40px;
        height: 40px;
    }

    .complement-text{
        margin-top: 16px;
    }

    /* Flex habitable, parcelle et tri*/
    .surface-container{
        flex-wrap: wrap;
        gap: 3px;
    }

    .habitable-container,
    .terrain-container,
    .container-budget{
        width: 49%;
    }

    .tri-container{
        width: 100%;
    }

    .criteres-container-habitable,
    .criteres-container-terrain,
    .criteres-container-tri,
    .criteres-budget-container{
        gap: 5px;
    }   

    .habitable-text,
    .terrain-text{
        margin-top: 24px;
    }

    /* Mobil - Flex type de bien, localisation, budget */
    #property,
    #localisation,
    #budget{
        width: 100%;
    }

    .container-property, 
    .container-localisation, 
    .container-budget {
        padding: 0;
    }

    .criteres-property-container .form-check {
        width: 33%;
    }

    #criteria{
        position: inherit;
    }
}

@media (max-width :500px){
    /* Flex pièces, chambres et complement */
    .criteres-container-pieces{
        width: 100%;
        justify-content: flex-start;
    }
    
    .criteres-container-chambres{
        width: 100%;
        justify-content: flex-start;
    }
    
    .criteres-container-complement{
        width: 100%;
    }

    .criteres-container .box{
        width: 35px;
        height: 35px;
    }

    /* Flex habitable, parcelle et tri*/
    .habitable-container,
    .terrain-container,
    .container-budget{
        width: 100%;
    }

    /* Mobil - Flex type de bien, localisation, budget */
    .criteres-property-container .form-check {
        width: 50%;
    }
}

@media (max-width :416px) {
    /* Flex pièces, chambres et complement */
    .chambre-text{
        margin-top: 16px;
    }
}