:root {
    /* --color1: #F48269;
    --secondaryColor : #2e4f9e; */
    --color1: #62815c;
    --secondaryColor: #CEB888;
    --tertiaryColor: #06BA6C;
    --backgroudColor: #E7EBEA;
    --auGreen: #00694B;
    --lightPrimary: #76928c;
    --maxWidth: 1140px;

    --step--2: clamp(0.69rem, calc(0.65rem + 0.21vw), 0.80rem);
    --step--1: clamp(0.83rem, calc(0.77rem + 0.33vw), 1.00rem);
    --step-0: clamp(1.00rem, calc(0.90rem + 0.49vw), 1.25rem);
    --step-1: clamp(1.20rem, calc(1.06rem + 0.71vw), 1.56rem);
    --step-2: clamp(1.44rem, calc(1.24rem + 1.00vw), 1.95rem);
    --step-3: clamp(1.73rem, calc(1.45rem + 1.39vw), 2.44rem);
    --step-4: clamp(2.07rem, calc(1.69rem + 1.91vw), 3.05rem);
    --step-5: clamp(2.49rem, calc(1.97rem + 2.59vw), 3.82rem);
}


/* fonts */
/*@font-face {
    font-family: BrandonMedium;
    src: url(./Fonts/AU_Sans_less\ width/au_sans_beta_text-medium-webfont.woff);
}*/


/* helper classes */
.hidden {
    display: none !important;
}

.no-border {
    border: none !important;
}


body {
    margin: 0;
    padding: 0;
    background-color: var(--backgroudColor);
    font-family: 'AUSansLight';
}


.cost-info select,
.dropdown-row-results select {
    font-size: 1rem;
    color: var(--color1);
    font-weight: normal;
    max-width: 100%;
    padding: 8px 24px 8px 10px;
    border: 1.5px solid var(--color1);
    border-radius: 3px;
    background-color: transparent;
    flex-wrap: wrap;
    transition: .1s ease all;

}

.cost-info select:active,
.cost-info select:focus,
.dropdown-row-results select:active,
.dropdown-row-results select:focus {
    outline: none;
    box-shadow: none;
}

.cost-info select:hover {
    color: var(--auGreen);
    border-color: var(--auGreen);
    cursor: pointer;
    transition: .1s ease all;
}
#results .dropdown-row-results select:hover {
    color: var(--auGreen);
    cursor: pointer;
    border-color: var(--auGreen);
}



.heading {
    color: black;
    font-size: var(--step-4);
    margin-bottom: 1em;
}



/* TOP COST BAR */
.cost-info {
    color: black;
    display: flex;
    justify-content: space-evenly;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    background-color: white;
    padding: 1.5em 1.5em;
    font-family: AUSansLight;
    font-size: var(--step-0);
    margin-bottom: 4em;

}

.cost-info>* {
    display: flex;
    gap: 1em;
    align-items: center;
}

.nav-btn {
    background-color: var(--color1);
    color: white;
    padding: 0.2em 1em;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    cursor: pointer;
    border-radius: 2px;
    border: 2px solid var(--color1);
    transition: .1s ease all;
}
.cost-info .nav-btn:hover {
    color: var(--color1);
    background-color: white;
    border-color: var(--color1);
    transition: .1s ease all;
}
@media only screen and (max-width: 800px) {
    .cost-info {
        flex-direction: column;
        gap: 1.5em;
        margin: -2em -1em 1.5em -1em;
    }
}

/* TOP COST BAR */


/* QUESTIONS AREA */
.question-wrapper {
    display: grid;
    ;
    grid-template-columns: 1fr 1fr;
    align-items: flex-start;
    grid-column-gap: 4em;
}

@media only screen and (max-width: 800px) {
    .question-wrapper {
        display: block;
    }
}

.question-img-area {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1em;
}

.no-grid {
    display: flex;
    flex-direction: column;
}

.flex-wrapper {
    display: flex;
    align-items: center;
    gap: 1em;
}

.flex-wrap-helper {
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
}

.option-illustration {
    stroke: var(--color1);
}

@media only screen and (max-width: 800px) {
    .option-illustration {
        display: none;
    }
}


.question-img-area img {
    width: 100%;
}

.question {
    font-family: 'AUSansLight';
    font-weight: 600;
    font-size: var(--step-3);
    line-height: 1.4;
    color: var(--color1);
}

.options-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
    margin-bottom: 1em;
}

@media only screen and (max-width: 800px) {
    .options-wrapper {
        gap: 0.5em;
    }
}

.option-heading {
    font-family: 'AUSansLight';
    font-size: var(--step-0);
    color: black;
    margin: 0 0 0.75em 0;
}

.option {
    display: inline;
    /* width: fit-content; */
}

.option>input {
    /* HIDE RADIO */
    visibility: hidden;
    /* Makes input not-clickable */
    position: absolute;
    /* Remove input from document flow */
}

.option>input+div {
    /* DIV STYLES */
    cursor: pointer;
    border: 2px solid var(--color1);
    color: var(--color1);
    stroke: var(--color1);
    background-color: transparent;
    border-radius: 6px;
    padding: 0.5em 1em;
    /* max-width: fit-content; */
    display: table-cell;
    transition: .2s ease all;
}
.option>input+div:hover {
    background-color: var(--color1);
    color: white;
    transition: .2s ease all;
}

.option>input:checked+div {
    /* the first div after radio button is checked */
    background-color: var(--color1);
    color: white;
    border: 2px solid var(--color1);
    stroke: #fff;
    transition: .2s ease all;
}
/*.option>input:checked+div:hover {
    /* the first div after radio button is checked * /
    background-color: white;
    color: var(--color1);
    border: 2px solid var(--color1);
    stroke: #fff;
    transition: .2s ease all;
}*/

.large-box {
    display: flex !important;
    flex-direction: column !important;
    padding-block: 1.5em !important;
    border-radius: 1em !important;
    align-items: center;
    gap: 1em;
    width: auto !important;
    text-align: center;
}

.large-box svg {
    max-width: 100px;
    max-height: 50px;
}

.wrapping-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, 160px);
}
.option>input+div.large-box:hover {
    background-color: var(--color1);
    color: white;
    transition: .2s ease all;
    stroke: white;
}

/* QUESTIONS AREA */

html input[type=range] {
    outline: 0;
    border: 0;
    border-radius: 500px;
    width: 100%;
    /* max-width: 100%; */
    transition: box-shadow 0.2s ease-in-out;
}

@media screen and (-webkit-min-device-pixel-ratio: 0) {
    html input[type=range] {
        overflow: hidden;
        height: 2.5em;
        -webkit-appearance: none;
        background-color: var(--tertiaryColor);
    }

    html input[type=range]::-webkit-slider-runnable-track {
        height: 2.5em;
        -webkit-appearance: none;
        color: var(--color1);
        -webkit-transition: box-shadow 0.2s ease-in-out;
        transition: box-shadow 0.2s ease-in-out;
    }

    html input[type=range]::-webkit-slider-thumb {
        width: 2.5em;
        -webkit-appearance: none;
        height: 2.5em;
        cursor: pointer;
        background: var(--color1);
        box-shadow: -335px 0 0 320px var(--color1), inset 0 0 0 2em var(--color1);
        border-radius: 50%;
        -webkit-transition: box-shadow 0.2s ease-in-out;
        transition: box-shadow 0.2s ease-in-out;
        position: relative;
    }

    html input[type=range]:active::-webkit-slider-thumb {
        background: #fff;
        box-shadow: -330px 0 0 320px var(--color1), inset 0 0 0 3px var(--color1);
    }
}


/* RANGE SLIDER STYLES */
.range-wrapper {
    width: 100%;
    display: flex;
    gap: 2em;

}

@media only screen and (max-width: 800px) {
    .range-wrapper {
        width: 100%;
    }
}



.range-display {
    display: flex;
    justify-content: space-between;
}

.range-data-wrapper {
    font-family: AUSansMedium;
    font-size: var(--step-0);
    color: black;
    margin: 0 0 0.75em 0;
}

/* RANGE SLIDER STYLES */



/* Lead form styles */
#leadForm {
    color: black;
}

.form-input-area label {
    color: black;
    font-size: var(--step-1);
}

.form-input-area input[type=text],
.form-input-area input[type=email],
.form-input-area select {
    width: 100%;
    padding: 0.5em 1em;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 0.25em;
    box-sizing: border-box;
    background-color: var(--backgroudColor);
    font-family: AUSansMedium;
    font-size: var(--step-0);
    margin-bottom: 1em;
}


.form-input-area input[type=submit],
.submitBtn {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    background-color: var(--backgroudColor);
    color: black;
    padding: 0.75em 1.5em;
    margin: 1em 0;
    border: none;
    border-radius: 2em;
    cursor: pointer;
    font-size: var(--step-0);
}

#leadForm input[type=submit]:hover,
.submitBtn:hover {
    background-color: var(--color1);
    color: #fff;
}


/* results page */
#results {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    grid-gap: 2rem;
}

@media only screen and (max-width: 800px) {
    #results {
        display: grid;
        grid-template-columns: 1fr;
        grid-gap: 2rem;
    }
}

.dropdown-row-results {
    display: flex;
    flex-direction: flex-start;
    gap: 1em;
    margin-top: 1em;
    margin-bottom: 1.25em;
    flex-wrap: wrap;
}

.city-costs-table-headings {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

.city-costs-table-headings>* {
    font-family: 'AUSansMedium';
    font-size: var(--step--1);
    color: var(--auGreen);
}

.city-costs-table-entry {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    margin-block: 0.5em;
}

.city-costs-table-entry>* {
    font-size: var(--step--1);
}

.city-costs-table-entry>.label-city {
    font-weight: 400;
}

.breakdown-section {
    background-color: white;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    padding: 2em;
}

.breakdown-title {
    font-family: 'AUSansMedium';
    color: var(--auGreen);
    font-size: var(--step--1);
    font-weight: 400;
    margin-bottom: 1em;
}

.cost-bar-title {
    color: var(--color1);
    font-size: var(--step-0);
    font-weight: 600;
    margin-bottom: 0.35em;
    margin-top: 0.5em;
}

.cost-bar-outer {
    background-color: var(--tertiaryColor);
    height: 2em;
    border-radius: 1em;
    width: 100%;
    overflow: hidden;
}

.cost-bar-inner {
    background-color: var(--color1);
    height: 2em;
    border-radius: inherit;
    width: 25%;
    display: flex;
    align-items: center;
    color: #fff;

}

.cost-bar-inner>* {
    padding-left: 2em;
    z-index: 2;
}


/** Arrow diff results **/
.city-costs-table-entry {
    position: relative;
}

.city-costs-table-entry.arwUp .label-difference::after,
.city-costs-table-entry.arwDown .label-difference::after,
.city-costs-table-entry.equal .label-difference::after {
    font-family: "Font Awesome 6 Free";
    content: '';
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    font-weight: 900;
    position: absolute;
    right: 11%;
    -webkit-font-smoothing: antialiased;
}

.city-costs-table-entry.arwUp .label-difference::after {
    content: '\f077';
    color: red;
}

.city-costs-table-entry.arwDown .label-difference::after {
    content: '\f078';
    color: green;
}

.city-costs-table-entry.equal .label-difference::after {
    content: '\3d';
    color: #444;
}


/** Buttons **/

.resBtns {
    position: relative;
    top: 22px;

}

.resBtns a {
    background-color: var(--color1);
    color: white;
    padding: 10px 22px 8px 22px;
    border: 2px solid var(--color1);
    border-radius: 18px;
    text-decoration: none;
    /* margin-right: 18px; */
    margin: 0.5em 0.25em;
    float: left;
    transition: .2s ease all;
}

.resBtns a:hover {
    color: var(--color1);
    background-color: white;
    transition: .2s ease all;
}
.updated {
    margin: 2em auto;
    opacity: .5;
    font-size: 80%;
}