@font-face {
    font-family: "Avenir";
    src: url('https://midlandsb.lkcsproof.com/ResourcePackages/Custom/assets/fonts/avenir.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "Avenir";
    src:  url('https://midlandsb.lkcsproof.com/ResourcePackages/Custom/assets/fonts/avenir-bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: "Avenir";
    src:  url('https://midlandsb.lkcsproof.com/ResourcePackages/Custom/assets/fonts/avenir-black.woff2') format('woff2');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: "Avenir";
    src: url('https://midlandsb.lkcsproof.com/ResourcePackages/Custom/assets/fonts/avenir-italic.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: "Avenir";
    src: url('https://midlandsb.lkcsproof.com/ResourcePackages/Custom/assets/fonts/avenir-bolditalic.woff2') format('woff2');
    font-weight: 700;
    font-style: italic;
}

:root {

    --primary-font: "Avenir", Arial, sans-serif;
    --headline-text: #1a468d;
    --disabled-btn: #ca8c8c;
    --form-border: #949494;
    --table-font-size: 0.875rem;
    --primary-color: #F95602;
    --secondary-color: #000000;

    /* Accordions */

    --arrow-fill: var(--primary-color);

    --accordion-box-shadow-container: 0 0 0.5rem rgba(0,0,0,0.3);
    --accordion-border-container: 0.12rem solid transparent;
    --accordion-border-radius-container: 0.5rem;

    --accordion-text: #000;
    --accordion-background: none;
    --accordion-border: 0;
    --accordion-padding: 1.4rem 1.5rem;
    --accordion-border-radius: 0.5rem;
    --accordion-box-shadow: none;

    --accordion-text-hover: var(--accordion-text);
    --accordion-background-hover: var(--accordion-background);
    --accordion-border-hover: var(--accordion-text);
    --accordion-border-radius-hover: var(--accordion-border-radius);
    --accordion-box-shadow-hover: var(--accordion-box-shadow);

    --accordion-text-focus: var(--accordion-text);
    --accordion-background-focus: var(--accordion-background);
    --accordion-border-focus: var(--accordion-text);
    --accordion-border-radius-focus: var(--accordion-border-radius);
    --accordion-box-shadow-focus: var(--accordion-box-shadow);

    --accordion-padding-panel: 20px 0;
    --accordion-margin-panel: 0 20px;
    --accordion-border-panel: 0;
    --accordion-border-top-panel: 1px solid #000000;
    --accordion-border-radius-panel: 0;

    /* Primary Button */

    --button-color: var(--secondary-color);
    --button-border: 1px solid var(--primary-color);
    --button-background: none;
    --button-text: var(--secondary-color);
    --button-radius: 0.5rem;
    --button-padding: 0.55em 1.5em;
    --button-box-shadow: none;

    --button-color-hover: var(--button-color);
    --button-border-hover: 1px solid var(--secondary-color);
    --button-background-hover: var(--button-background);
    --button-text-hover: var(--button-text);
    --button-radius-hover: var(--button-radius);
    --button-padding-hover: var(--button-padding);
    --button-box-shadow-hover: var(--button-box-shadow);

    --button-color-focus: var(--button-color);
    --button-border-focus: var(--button-border);
    --button-background-focus: var(--button-background);
    --button-text-focus: var(--button-text);
    --button-radius-focus: var(--button-radius);
    --button-padding-focus: var(--button-padding);
    --button-box-shadow-focus: var(--button-box-shadow);

    /* CTA Buttons */

    --button-color-cta: var(--button-color);
    --button-border-cta: var(--button-border);
    --button-background-cta: var(--button-background);
    --button-text-cta: var(--button-text);
    --button-radius-cta: var(--button-radius);
    --button-padding-cta: var(--button-padding);

    --button-color-cta-hover: var(--button-color-cta);
    --button-border-cta-hover: var(--button-border-hover);
    --button-background-cta-hover: var(--button-background-cta);
    --button-text-cta-hover: var(--button-text-cta);
    --button-radius-cta-hover: var(--button-radius);
    --button-padding-cta-hover: var(--button-padding-cta);

    --button-color-cta-focus: var(--button-color-cta);
    --button-border-cta-focus: var(--button-border-hover);
    --button-background-cta-focus: var(--button-background-cta);
    --button-text-cta-focus: var(--button-text-cta);
    --button-radius-hover-cta: var(--button-radius);
    --button-padding-cta-focus: var(--button-padding-cta);

}

#calculator-wrapper {
    font-family: var(--primary-font);
}

#calculator-wrapper .calculator-chart-group,
#calculator-wrapper .calculator-table-group {
    border-radius: var(--accordion-border-radius-container) !important;
    border: var(--accordion-border-container);
    box-shadow: var(--accordion-box-shadow-container);
}

#calculator-wrapper .calculator-chart-group .fas,
#calculator-wrapper .calculator-table-group .fas {
    color: var(--arrow-fill);
    position: relative;
    margin-left: auto;
    min-width: 1.5em;
    top: 0.5em;
}

#calculator-wrapper .calculator-chart-group .fas::before,
#calculator-wrapper .calculator-table-group .fas::before {
    content: "";
    position: absolute;
    left: 0.25em;
    width: 1em;
    top: 50%;
    height: 3px;
    border-radius: 3px;
    background-color: currentColor;
    -webkit-transition: all 0.4s;
    transition: all 0.4s;
}

#calculator-wrapper .calculator-chart-group .fas::after,
#calculator-wrapper .calculator-table-group .fas::after {
    content: "";
    position: absolute;
    left: 0.25em;
    width: 1em;
    top: 50%;
    height: 3px;
    border-radius: 3px;
    background-color: currentColor;
    -webkit-transition: all 0.4s;
    transition: all 0.4s;
    transform: rotate(90deg);
}

#calculator-wrapper .calculator-chart-group:has(.show) .fas::after,
#calculator-wrapper .calculator-table-group:has(.show) .fas::after {
    transform: rotate(0deg)
}

#calculator-wrapper .card-body,
#calculator-wrapper .calculator-chart-collapse,
#calculator-wrapper .calculator-chart-group {
    background-color: transparent;
}

#calculator-wrapper .card-body table th,
#calculator-wrapper .card-body table td {
    font-size: var(--table-font-size);
}

#calculator-wrapper .calculator-chart-group:has(.calculator-chart-collapse.show) {
    border: 1px solid #F95602;
}

/*--- Accordions ---*/

.container .row > .col-md-8 .btn-primary {
    background: var(--accordion-background);
    border: var(--accordion-border);
    border-radius: var(--accordion-border-radius) !important;
    box-shadow: var(--accordion-box-shadow);
    padding: var(--accordion-padding);
    color: var(--accordion-text);
    font-size: 1.3rem;
    transition: all 400ms;
}

.container .row > .col-md-8 .btn-primary:hover {
    background: var(--accordion-background-hover);
    border: var(--accordion-border-hover);
    border-radius: var(--accordion-border-radius-hover) !important;
    box-shadow: var(--accordion-box-shadow-hover);
    color: var(--accordion-text-hover);
    cursor: pointer;
}

.container .row > .col-md-8 .btn-primary.focus,
.container .row > .col-md-8 .btn-primary:focus {
    background: var(--accordion-background-focus);
    border: var(--accordion-border-focus);
    border-radius: var(--accordion-border-radius-focus) !important;
    box-shadow: var(--accordion-box-shadow-focus);
    color: var(--accordion-text-focus);
}

#calculator-wrapper .card-body {
    padding: var(--accordion-padding-panel);
    margin: var(--accordion-margin-panel);
    border: var(--accordion-border-panel);
    border-top: var(--accordion-border-top-panel);
    border-radius: var(--accordion-border-radius-panel);
}

/*--- Calculator Primary Button ---*/

.container .row > .col-md-4 .btn-primary {
    background: var(--button-background);
    border: var(--button-border);
    border-radius: var(--button-radius) !important;
    box-shadow: var(--button-box-shadow);
    padding: var(--button-padding);
    color: var(--button-text);
}

.container .row > .col-md-4 .btn-primary:hover {
    background: var(--button-background-hover);
    border: var(--button-border-hover);
    border-radius: var(--button-radius-hover) !important;
    box-shadow: var(--button-box-shadow-hover);
    padding: var(--button-padding-hover);
    color: var(--button-text-hover);
    cursor: pointer;
}

.container .row > .col-md-4 .btn-primary.focus,
.container .row > .col-md-4 .btn-primary:focus {
    background: var(--button-background-focus);
    border: var(--button-border-focus);
    border-radius: var(--button-radius-focus) !important;
    box-shadow: var(--button-box-shadow-focus);
    padding: var(--button-padding-focus);
    color: var(--button-text-focus);
}

/*--- Calculator Call to Action Buttons ---*/

#control_calculate_results_wrapper .btn-primary {
    background: var(--button-background-cta);
    border: var(--button-border-cta);
    border-radius: var(--button-radius-cta) !important;
    box-shadow: var(--button-box-shadow-cta);
    padding: var(--button-padding-cta);
    color: var(--button-color-cta);
}

#control_calculate_results_wrapper .btn-primary:hover {
    background: var(--button-background-cta-hover);
    border: var(--button-border-cta-hover);
    border-radius: var(--button-radius-cta-hover) !important;
    box-shadow: var(--button-box-shadow-cta-hover);
    padding: var(--button-padding-cta-hover);
    color: var(--button-color-cta-hover);
    cursor: pointer;
}

#control_calculate_results_wrapper .btn-primary.focus,
#control_calculate_results_wrapper .btn-primary:focus {
    background: var(--accordion-background-focus);
    border: var(--accordion-border-focus);
    border-radius: var(--accordion-border-radius-focus) !important;
    box-shadow: var(--accordion-box-shadow-focus);
    color: var(--accordion-text-focus);
}