/* 
  ##Device = All
  ##Screen = Styles will be apply for all resolutions
*/

/* CSS */
h1 {
    text-align: center;
}

.row {
    margin: 0;
}

.form-label {
    font-family: poppins-small;
    font-weight: 800;
}

.form-control {
    border: 1px solid black;
    border-radius: 2px;
}

    .form-control:focus {
        color: #212529;
        background-color: #fff;
        border-color: #6A9C08;
        outline: 0;
        box-shadow: 0 0 0 0.10rem rgba(106, 156, 8, 1);
    }

    .form-control[disabled] {
        background: white;
    }

.form-select {
    border: 1px solid black;
    border-radius: 2px;
}

    .form-select:focus {
        color: #212529;
        background-color: #fff;
        border-color: #6A9C08;
        outline: 0;
        box-shadow: 0 0 0 0.10rem rgba(106, 156, 8, 1);
    }

.form-group {
    padding: 0rem 0.5rem 1.5rem 0.5rem;
}

.form-group-title {
    padding-top: 0rem;
}

.first-calculator-section {
    background: #F0F1F2;
}

.buttons-group {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 0rem 0.5rem 1rem 0.5rem;
}

.btn-calculator {
    width: 100%;
    border: 1px solid black;
    padding: 0.5rem 0rem;
}

    .btn-calculator:hover {
        background: #6A9C08;
        color: white;
    }

    .btn-calculator.active {
        background: #6A9C08;
        color: white;
    }

.form-check-input:checked {
    background-color: #6A9C08;
    border-color: #6A9C08;
}

.form-check-input:focus {
    border-color: #6A9C08;
    outline: 0;
    box-shadow: 0 0 0 0.10rem rgba(106, 156, 8, 1);
}

.monthly-payment {
    border-bottom: 1px solid gray;
    padding: 0rem 0.5rem 0rem 0.5rem;
}

.monthly-payment-result {
    padding: 1rem 0.5rem;
}

#monthly-payment-result {
    border: 3px solid #6A9C08;
    padding: 0.5rem;
}

.form-group-results {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    border-bottom: 1px solid gray;
    padding: 2rem 0.5rem 0rem 0.5rem;
}

.form-group-note {
    padding: 3rem 0.5rem 0rem 0.5rem;
}

.calculator-note {
    font-family: 'poppins-small';
}

.note-1 {
    color: #6A9C08;
}

.form-button {
    background: #6A9C08;
    width: 100%;
    padding: 0.5rem;
    color: white;
    border: 0px;
    border-radius: 5px;
}

.btn_close {
    border: none;
    background: transparent;
}

.form-check-label {
    display: inline;
}

.modal-body::-webkit-scrollbar {
    width: 0.3em !important;
}

.modal-body::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3) !important;
}

.modal-body::-webkit-scrollbar-thumb {
    background-color: #1F3750 !important;
    outline: 1px solid #1F3750 !important;
    max-height: 5px !important;
    overflow-y: scroll;
}

.form-check-input.is-invalid ~ .form-check-label, .was-validated .form-check-input:invalid ~ .form-check-label {
    color: black;
}

/* 
  ##Device = Desktops large
  ##Screen = 1920px to higher resolution desktops
*/
@media (min-width: 1920px) {
    /* CSS */
    .calculator-column {
        padding: 8rem;
    }

    .title-financing {
        font-size: 27px !important;
    }

    .subtitle-financing {
        font-size: 20px !important;
    }
}


/* 
  ##Device = Desktops
  ##Screen = 1281px to 1919px
*/

@media (min-width: 1281px) and (max-width: 1919px) {

    /* CSS */
    .calculator-column {
        padding: 5rem;
    }

    .title-financing {
        font-size: 27px !important;
    }

    .subtitle-financing {
        font-size: 20px !important;
    }
}

/* 
    ##Device = Laptops, Desktops
    ##Screen = B/w 1025px to 1280px
  */

@media (min-width: 1025px) and (max-width: 1280px) {

    /* CSS */
    .calculator-column {
        padding: 5rem;
    }

    .title-financing {
        font-size: 27px !important;
    }

    .subtitle-financing {
        font-size: 22px !important;
    }

    .title-financing {
        font-size: 27px !important;
    }

    .subtitle-financing {
        font-size: 20px !important;
    }
}

/* 
    ##Device = Tablets, Ipads (portrait)
    ##Screen = B/w 768px to 1024px
  */

@media (min-width: 768px) and (max-width: 1024px) {

    /* CSS */
    .calculator-column {
        padding: 4rem;
    }

    .title-financing {
        font-size: 27px !important;
    }

    .subtitle-financing {
        font-size: 20px !important;
    }
}

/* 
    ##Device = Tablets, Ipads (landscape)
    ##Screen = B/w 768px to 1024px
  */

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {

    /* CSS */
    .calculator-column {
        padding: 5rem;
    }

    .title-financing {
        font-size: 27px !important;
    }

    .subtitle-financing {
        font-size: 20px !important;
    }
}

/* 
    ##Device = Low Resolution Tablets, Mobiles (Landscape)
    ##Screen = B/w 481px to 767px
  */

@media (min-width: 481px) and (max-width: 767px) {

    /* CSS */
    .calculator-column {
        padding: 4rem;
    }

    .title-financing {
        font-size: 27px !important;
    }

    .subtitle-financing {
        font-size: 20px !important;
    }
}

/* 
    ##Device = Most of the Smartphones Mobiles (Portrait)
    ##Screen = B/w 320px to 479px
  */

@media (min-width: 320px) and (max-width: 480px) {

    /* CSS */
    .calculator-column {
        padding: 1rem;
    }

    .title-financing {
        font-size: 22px !important;
    }

    .subtitle-financing {
        font-size: 18px !important;
    }

    .blackShadow {
        padding: 4rem 0.5rem 0rem 0.5rem !important;
    }
}