:root {
    --orange       : #FE6A00;
    --paler-gray   : #F1F1F1;
    --pale-gray    : #E4E4E4;
    --mid-gray     : #A4A4A4;
    --gray         : #313131;
    --dark-gray    : #222222;
    --darkest-gray : #1B1B1B;
    --blue         : #043F9D;
    --dark-blue    : #02255C;
}


#page-header img {
    max-width : 65%;
}

.shadowbox {
    border     : 2px solid var(--pale-gray);
    box-shadow : 0 0 10px var(--mid-gray);
    background : white;
    padding    : 20px;
}

.graybox {
    background-color : var(--paler-gray);
    border           : 1px solid var(--pale-gray);
    padding          : 15px;
}

.graybox h4 {
    padding-top : 0;
    font-size   : 16pt;
}

.graybox.d-flex > div {
    flex : 1;
}

.graybox .gray-label {
    color          : var(--mid-gray);
    text-transform : uppercase;
    font-size      : 9pt;
}

.darkbox {
    background-color : var(--gray);
    border           : 1px solid var(--dark-gray);
    padding          : 0;
    color            : white;
}

.darkbox .header {
    background : black;
    padding    : 20px 0 20px 0;

}

.darkbox .header h3 {
    color          : white;
    text-transform : uppercase;
    font-weight    : bold;
    padding        : 15px 0 15px 15px;
}

.darkbox .row > .text-left,
.darkbox .form-group label {
    color          : var(--pale-gray);
    text-transform : uppercase;
    font-size      : 9pt;
    font-weight    : bold;
}

.darkbox hr {
    background : var(--pale-gray);
}

.darkbox .input-group-prepend {
    background                : white;
    color                     : var(--blue);
    /*border-left                    : 1px solid rgba(255, 255, 255, 0);*/
    border-top-left-radius    : 3px;
    border-bottom-left-radius : 3px;
    padding                   : 10px;

}

.darkbox input.form-control,
.darkbox input.form-control:focus {
    border  : none;
    outline : none;
}

.orange-box {
    border        : 2px solid var(--orange);
    border-radius : 3px;
}

.orange-box h4 {
    font-size : 12pt;
    padding   : 0;
    margin    : 0;
}

.orange-box .footer {
    background-color : var(--orange);
    color            : white;
    text-align       : center;
    text-transform   : uppercase;
}


/* Page Header links */

#page-header-links {
    display        : flex;
    flex-direction : column-reverse;
}

#page-header-links > a {
    font-size      : 11pt;
    text-transform : uppercase;
    color          : var(--dark-gray);
    display        : block;
    font-weight    : bold;
}

#page-header-links > a.active {
    color         : var(--orange);
    border-bottom : 1px solid var(--orange);
}

#page-header-links > a.btn.btn-sm.btn-plain:hover {
    color : #FE6A00 !important;
}

.btn.rounded {
    border-radius : 20px !important;
}

#back-to-top {
    position         : fixed;
    bottom           : 20px;
    right            : 20px;
    display          : none;
    background-color : var(--orange);
    color            : white;
}


.btn-wide {
    padding-right : 50px;
    padding-left  : 50px;
}

.btn-orange {
    background : var(--orange) !important;;
    color      : #FFFFFF !important;
    border     : 1px solid transparent;
}

.btn-orange:hover, .btn-orange.active {
    color      : var(--orange) !important;
    background : #FFFFFF !important;
    border     : 1px solid #D97D26;
}

.modal.window-sticker .modal-lg {
    /*width     : 75vw;*/
    width     : 70vw;
    max-width : 1920px;
}

/* Build Deal modal */

.deal-modal .modal-lg {
    max-width : 1100px;
}

.deal-modal .modal-header img {
    max-width : 800px;
    margin    : 0 auto 0 auto;
}

.deal-modal .modal-header .close {
    position : absolute;
    right    : 10px;
    top      : 10px;
}


.deal-modal .modal-header {
    position : relative;
}

.overview {
    position   : absolute;
    bottom     : 0;
    background : rgba(0, 0, 0, .5);
    color      : white;
    left       : 0;
    right      : 0;
    padding    : 20px;
}

.deal-modal .overview h1 {
    font-size      : 23pt;
    padding-bottom : 4px;
}

.deal-modal .overview h2 {
    font-size : 18pt;
    padding   : 0 0 4px 0;
    margin    : 0;
}

.deal-modal .overview h3 {
    color     : #CCCCCC;
    font-size : 10pt;
    margin    : 0;
    padding   : 0;
}


.deal-modal h3 {
    font-size      : 20pt;
    text-transform : capitalize;
    margin         : 0;
    padding        : 10px 0 30px 0;
}

.deal-modal .btn-group-toggle .btn-secondary:not(.active) {
    background : white;
    color      : #6C757D;
}

#deal-form label {
    font-weight : bold;
}

.term-option {
    display       : block;
    float         : left;
    text-align    : center;
    width         : calc(50% - 30px);
    margin        : 0 10px 10px 10px;
    border        : 1px solid var(--mid-gray);
    padding       : 10px 20px 10px 20px;
    border-radius : 3px;
    background    : var(--pale-gray);
    color         : var(--dark-gray) !important;
}

.term-option:hover {
    color : var(--orange) !important;
}

.term-option.selected {
    border-color : var(--orange);
    background   : var(--orange);
    color        : white !important;
}

#printed-apr {
    text-align       : center;
    padding          : .375rem .75rem;
    border           : 1px solid var(--gray);
    border-radius    : 3px;
    color            : var(--gray);
    background-color : var(--paler-gray);
}


.deal-modal .modal-content {
    background-color : var(--paler-gray);
}

.deal-container {
    border        : 1px solid var(--mid-gray);
    border-radius : 3px;
    padding       : 10px;
    box-shadow    : 0 0 10px var(--mid-gray);


}

.est-payment > .change,
.deal-metric > .change {
    vertical-align : super;
    position       : relative;
    font-size      : 50%;
}


.deal-container h1 {
    font-size : 13pt;
}

.deal-container h2 {
    font-size : 11pt;
}

.deal-container .deal-header {
    border-bottom : 2px solid var(--pale-gray);
    margin-bottom : 20px;
}

.deal-modal .modal-header .est-payment {
    color : white;
}

.deal-modal .modal-header .est-payment > span {
    font-weight : lighter;
}


.deal-container .deal-metric {
    font-weight : bold;
    font-size   : 110%;
    text-align  : center;
}

.deal-container .deal-metric.payment {
    font-size : 130%;
}

.deal-container .metric-label {
    font-size      : 90%;
    text-transform : uppercase;
    text-align     : center;
    color          : var(--mid-gray);
}


/* Footer */

footer {
    background : var(--dark-gray);
    padding    : 50px 0 0 0;
    margin-top : 50px;
}

footer > .info {
    background : var(--darkest-gray);
    color      : var(--pale-gray);
    padding    : 50px;
    margin-top : 50px;
}

footer h5 {
    font-family    : "Poppins", Arial, sans-serif;
    font-size      : 30pt;
    font-weight    : 500;
    text-transform : uppercase;
    letter-spacing : -0.03rem;
    color          : #FFFFFF;
}

footer ul.links {
    list-style-type : none;
    padding         : 0;
    margin          : 0;
}

footer ul.links li {
    display : inline-block;
    padding : 10px;
}

footer ul.links li a,
footer ul.links li a:hover,
footer ul.links li a:visited {
    color : var(--pale-gray) !important;
}

.no-wrap {
    white-space : nowrap;
}

/* small */
@media (min-width : 576px) {
}

@media (min-width : 576px) and (max-width : 767.98px) {
}

/* md */
@media (min-width : 768px) {
}

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

/* lg */
@media (min-width : 992px) {

    .bottom-section {
        position : relative;
        /*top      : -100px;*/
    }

    #page-header > .row:first-child {
        padding : 15px 0 15px 0 !important;
    }

    #page-header img {
        max-width  : 100%;
        max-height : 80px;
    }

    #page-header-links {
        flex-direction : row-reverse;
    }

    #page-header-links > a {
        /*flex      : 1;*/
        display     : inline-block;
        margin-left : 10px;
        padding     : 6px 10px 6px 10px;
    }

    .term-option {
        display : inline-block;
        float   : none;
        width   : auto;
        margin  : 0 0 0 0 !important;
    }

    /*
    #page-header-links > a.btn-orange {
        flex : 1.5;
    }
    */
}

@media (min-width : 992px) and (max-width : 1199.98px) {

}

/* xl */
@media (min-width : 1200px) {

    #page-header.container {
        max-width : 1600px;
    }

    .container.page-content {
        max-width : 1300px;
    }

    .bottom-section {
        position : relative;
        /*top      : -80px;*/
    }

}