/* <-- new css -->*/
.hometext {
    font-weight: bold !important;
    font-weight: 500;
    color: black;
    font-size: 36px;
}

/* <-- Midden page --> */
.indexbutton {
    margin: 1% !important;
    width: 50% !important;
    background: #337ab7 !important;
    padding: 2% !important;
    font-size: 24px !important;
    font-weight: bold !important;
    color: white !important;
    text-decoration: none !important;
    border: none !important;
    border-radius: 1px !important;
}

.select2-selection__placeholder {
    color: black !important;
}

.indexbutton:hover {
    background-color: #f0f0f0 !important;
    color: #337ab7 !important;
}

.indexlayout {
    margin: 10em 0 0 0 !important;
}

a {
    color: #000 !important;
    text-decoration-thickness: 0.01em !important;
}

.card {
    transition: box-shadow .3s;
}

.card:hover {
    box-shadow: 0 0 11px rgba(33,33,33,.2);
    cursor: pointer;
}

#imagekeuze {
    width: 20%;
    background-color: transparent !important;
    border: none !important;
}

#buttonimage {
    width: 70% !important;
}

.width-40 {
    width: 40% !important;
}

.select2 {
    margin: 0 0 0 3em !important;
}

.select2-selection__rendered {
    line-height: 31px !important;
}

.select2-container .select2-selection--single {
    height: 35px !important;
}

.select2-container--default .select2-selection--single {
    border-color: #ced4da !important;
}

#kleurkeuze {
    padding: 0 !important;
    padding-bottom: 1.2em !important;
}

#kleurkeuze, #ontwerp {
    padding: 1em 2em 1.1em 2em !important;
    border: none !important;
    text-decoration: none !important;
}

.toestemming-label {
    width: 40% !important;
}

.input-numbers {
    width: 43.6% !important;
}

.vak {
    margin-left: 32% !important;
}

#buitenunitafmetingen{
    width: 25% !important;
}

@media only screen and (max-width: 1199px) {
    /*<-- Handmatige pagina --> */
    .input-numbers {
        width: 45% !important;
    }

    #numberinput {
        width: 100% !important;
        margin-top: 0.2em !important;
    }

    .vak {
        margin-left: 30% !important;
    }

    .input-left {
        visibility: hidden !important;
    }
}

@media only screen and (max-width: 1050px) {
    /*<-- Automatisch pagina --> */
    #merk, .select2-container, #uitvoering, #muurbeugel, #buitenunit, #buitenunitafmetingen{
        width: 40% !important;
    }

    .data-test {
        margin: 0 1em 0 1em !important;
    }

    /*<-- Handmatige pagina --> */
    .input-field {
        width: 60% !important;
    }

    #numberinput {
        width: 100% !important;
    }

    .vak {
        margin-left: 45% !important;
    }

    #maatwerk {
        width: 40% !important;
    }

    .input-group{
        width: 100% !important;
        margin-left: 0% !important;
    }

    .input-numbers {
        width: 65% !important;
    }
}

@media only screen and (max-width: 849px) {
    /*<-- Handmatige pagina --> */
    .input-field {
        width: 70% !important;
    }

    .input-field, .input-label, #handmatig {
        margin-left: 1em !important;
    }

    .toestemming-label {
        width: 70% !important;
    }

    .input-group {
        margin-left: -8em !important;
        width: 110% !important;
    }

    #numberinput {
        margin-left: 1em !important;
    }

    .hometext {
        font-size: 23px !important;
    }

    #form_kleur, #form_ontwerp {
        width: 100% !important;
    }

    #kleurkeuze, #ontwerp {
        width: 100% !important;
    }

    .card {
        margin-left: 47% !important;
        margin-top: 0.1em !important;
        width: 35rem !important;
    }

    .lead{
        font-size: 1.1em !important;
    }
}

@media only screen and (max-width: 767px) {
    /*<-- Automatisch pagina --> */
    #merk, .select2-container, #uitvoering, #muurbeugel, #buitenunit, #buitenunitafmetingen {
        width: 80% !important;
    }

    /*<-- Handmatige pagina --> */
    .input-field {
        width: 94% !important;
    }

    .input-numbers{
        width: 100% !important;
    }

    /*.input-group{
        width: 97% !important;
    }*/
}

@media only screen and (max-width: 636px) {
    /*<-- Automatisch pagina --> */
    .select-label, #merk, .select2-container, #uitvoering, #muurbeugel, #buitenunit, #buitenunitafmetingen {
        margin-left: 1em !important;
        width: 94% !important;
    }

    .select2-container--open .select2-dropdown--below {
        margin-left: -1em !important;
    }

    /*<-- Handmatige pagina --> */
    .input-label {
        width: 100% !important;
    }

    .toestemming-label {
        width: 95% !important;
        font-size: 0.9em !important;
    }
    .radio-buttons{
        margin-left: 1em !important;
    }
}