:root {
    --top-calc-masthead-gradient-start: var(--teal);
    --top-calc-masthead-gradient-end: var(--darkteal);

    --calculator-module-bg: var(--verylightgreen);

    --svg-fill: var(--midpurple);
    --svg-stroke: white;
    --svg-stroke-primary: white;

    --link-color: var(--teal);
    --progress-bar-color: var(--debianred);
    --progress-bar-bg: var(--lighterpink);

    --question-bg: white;
    --question-border-color: var(--midpurple);
    --question-text-color: var(--midpurple);
    --svg-tick-fill: var(--midpurple);
    --question-hover-state: var(--lightpink);
    --question-selected-state: var(--midpurple);
    --question-selected-state-text: white;
    --svg-tick-fill-selected: var(--midpurple);
    --question-selected-tick-border: var(--midpurple);
    --question-selected-tick-bg: white;

    --question-text-border-color: var(--lightgrey);
    --question-help-border-color: var(--teal);
    --question-help-bg: var(--teal);
    --question-help-color: white;

    --grand-total-bg: var(--debianred);

    --calc-btn-primary-color: white;
    --calc-btn-primary-bg: var(--debianred);
    --calc-btn-primary-bg-hover: var(--darkpink);

    --calc-btn-secondary-color: var(--midpurple);
    --calc-btn-secondary-bg: white;

    --error-color: var(--debianred);
    --spinner-highlight-color: var(--teal);
    --slider-color: var(--debianred);

    --collapsible-bg: var(--verylightgreen);
    --collapsible-color: #262626;

    --focus-color: var(--midpurple);

    --restart-hover-state: var(--purple);

    --success-color: var(--teal);
}

#calculatorQuestions {
    margin: 0 auto;
    padding: 20px !important;
}

#calculatorQuestions table.general-damages tr:not(.subtotal):not(.grand-total),
#calculatorQuestions table.special-damages tr:not(.subtotal):not(.grand-total) {
    background: var(--verylightgrey);
}

#calculatorQuestions table tr:not(:first-child),
#calculatorQuestions table tr.gd-row:not(:first-child) {
    border-top: 1px solid rgba(0, 0, 0, .1);
}

#claimscalculator .icon-results-tldr svg.icon {
    fill: var(--teal);
}

#claimscalculator .icon-results-tldr {
    border-color: var(--teal);
}

#claimscalculator details {
    background-color: var(--verylightgreen);
}

#claimscalculator details summary {
    color: black;
}

#claimscalculator .grand-total {
    background-color: var(--midpurple);
}


#claimscalculator.active .calc-brand img {
    width: 200px;
}

#claimscalculator .question .options label {
    font-size: 17px;
    border-width: 2px;
    position: relative;
    overflow: hidden;
    transition: color .25s ease;
}

#claimscalculator .question .options label > *:not(input){
  position: relative;
  z-index: 1;
}


#claimscalculator .question .options label:after{
  content: "";
  position: absolute;
  inset: 0;
  background: var(--midpurple);
  transform: translateX(100%);
  transition: transform .35s ease;
}

#claimscalculator .question .options label:has(input:checked) {
    background-color: unset;
}

#claimscalculator .question .options label:has(input:checked):after{
  transform: translateX(0);
}

#claimscalculator .question .options label .icon-wrapper {
    border-width: 2px;
}

#claimscalculator .question .options label svg.icon {
    width: 1rem;
    height: 1rem;
}

#claimscalculator .calc-btn {
    display: inline-flex !important;
	justify-content: space-between;
	align-items: center;
	padding: 19px 16px;
	border-radius: 0;
	border: none;
	box-shadow: none;
	text-shadow: none;
	font-size: 17px;
	font-weight: bold;
	z-index:2;
	gap: 40px;
	position: relative;
	overflow: hidden;
	text-decoration: none;
	text-align: left;
}

#claimscalculator .calc-btn::after {
    content: url(/themes/workaccident/assets/new-assets/arrow-btn-white.svg);
    display: block;
    height: auto;
    width: 16px;
}

#claimscalculator .calc-btn::before {
    content: "";
    display: block;
    height: 100%;
    width: 60px;
    background-color: var(--darkpink);
    z-index: -1;
    position: absolute;
    bottom: 0;
    right: 0;
    transition: width 0.3s ease;
    transform: skew(-15deg);
    transform-origin: bottom right;
}

#claimscalculator .calc-btn:hover::before {
	width:100%;
}

#claimscalculator .calc-btn-secondary {
    background-color: var(--verylightgrey);
}

#claimscalculator .calc-btn-secondary::after {
	content: url(/themes/workaccident/assets/new-assets/arrow-btn-blue.svg);
}

#claimscalculator .calc-btn-secondary::before {
	background-color: var(--lightgrey);
}

#claimscalculator #claimsBack.calc-btn {
	text-align: right;
}

#claimscalculator #claimsBack.calc-btn::before {
    right: auto;
    left: 0;
    transform: skew(-15deg);
    transform-origin: top left;
}

#claimscalculator #claimsBack.calc-btn::after {
    transform: rotate(180deg);
    order:-1;
}

#claimscalculator .section-content .section-aside {
    background: var(--midpurple);
    color: white;
}
#claimscalculator .section-content .section-aside h3,
#claimscalculator .section-content .section-aside a {
    color: white;
}

#claimscalculator .close {
    text-shadow: none;
    background-color: var(--darkteal);
    opacity: 1;
}

#claimscalculator .littlebtn {
    background-color: var(--teal);
}

#claimscalculator .littlebtn:hover {
    background-color: var(--purple);
}

#claimscalculator .close, 
#claimscalculator .startagain {
    padding: 1rem 2rem;
    font-weight: bold;
    line-height: unset;
}

#claimscalculator .close span {
    color: white;
    font-size: 17px;
}

#claimscalculator .close span:after {
    content: "X";
    display: inline-block;
    padding-left: .5rem;
}

#claimscalculator .close svg.icon {
    display: none;
}

.calculator-wrapper,
#claimscalculator.active {
    background: var(--teal) no-repeat top left;
    background-image: url(/themes/workaccident/assets/new-assets/blob-gradient-left-darkblue-lg.svg);
    background-size: 85%;  
}

#claimscalculator fieldset p,
#claimscalculator .question h3,
#claimscalculator .question p,
#claimscalculator .injury-list-wrapper h3,
#claimscalculator .injury-list-wrapper ul {
    color: var(--midpurple);
}

#claimscalculator .injury-list li {
    padding: .5rem 0;
}


.top-calc-wrapper {
    padding: 0;
    background: none;
}

.top-calc-wrapper h1 {
    margin-top: 3rem;
}

.top-calc-wrapper .calc-header {
    margin: 0;
    font-size: 36pt;
    font-family: 'Mukta', sans-serif, Arial, Verdana, "Trebuchet MS";
}

.top-calc-wrapper ul {
    padding-left: 30px;
}

.top-calc-wrapper li {
    list-style: none;
}

.top-calc-wrapper li:before {
    content: "";
    display: inline-block;
    width: 12px;
    height: 14px;
    margin-right: 10px;
    margin-left: -30px;
    margin-bottom: 0;
    background: url(/themes/workaccident/assets/new-assets/chevron-green.svg) no-repeat;
    background-size: contain;
    margin-top: -2px;
    vertical-align: middle;
}

#claimscalculator {
    background: none;
    padding-bottom: 100px;
    text-align:left;
}

#claimscalculator .calc-btn-wrapper {
    gap: 10px;
}

#claimscalculator .startagain {
    bottom: 0;
    left: 0;
    color: white;
    background: var(--teal);
}

#claimscalculator .startagain svg.icon {
    display: none;
}

#calculatorQuestions table {
    background: var(--verylightgreen);
}

#calculatorQuestions table td,
#calculatorQuestions table tr.gd-row td,
#claimscalculator .grand-total {
    padding: 2rem;
}

#claimscalculator details.question.text.subquestion summary div:first-child {
    font-size: unset;
}
#claimscalculator details.question.text.subquestion summary div:last-child {
    flex: 1;
}
#claimscalculator details>*:not(summary) {
    margin: 0 20px 20px 20px !important;
}

#claimscalculator .results details summary {
    margin-bottom: 0;
    padding: 20px 60px 20px 20px;
    font-size: 18px;
    font-family: 'Montserrat', sans-serif, Arial, Verdana, "Trebuchet MS";
    position: relative;
    cursor: pointer;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}

#claimscalculator .results details[open] summary {
    padding-bottom: 35px;
}

#claimscalculator .results details summary::after {
    content: "";
    display: none;
}

#claimscalculator .results details[open] summary:after {
    content: "";
    display: block;
    height: 1px;
    width: calc(100% - 80px);
    background-color: #b5ddd1;
    position: absolute;
    bottom: 0;
    left: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
}

#claimscalculator .results details summary:before {
    display: block;
    content: "";
    background-image: url(/themes/workaccident/assets/new-assets/icon-circle-arrow-green.svg);
    background-position: center;
    background-repeat: no-repeat;
    height: 32px;
    width: 32px;
    position: absolute;
    right: 14px;
    top: 14px;
}

#claimscalculator .results details[open] summary:before {
    transform: rotate(180deg);
}

#claimscalculator .section-content form:has(.results-wrapper) {
    padding: 0;
}

#claimscalculator .section-content form:has(.results-wrapper) .calc-btn-wrapper {
    display: none;
}

#claimscalculator .results {
    width: 100%;
    max-width: unset;
}

#claimscalculator .results-wrapper {
    border-top: 17px solid var( --debianred);
}

#claimscalculator .calc-results-tldr {
    align-items: center;
}

#claimscalculator .results h2 {
    text-align: left;
    padding: inherit;
    margin-bottom: 30px;
    gap:10px;
    align-items: flex-start;
}

#claimscalculator .results h2:not(:first-child) {
    margin-top: 60px;
}

#claimscalculator .results h2 + h3 {
    /* margin-top: 20px; */
}

#claimscalculator .results h3 {
    font-size: 28px;
}

#calculatorQuestions:not(.results-wrapper) .h2 {
    /* margin: 2.5rem 0; */
}

#calculatorQuestions table tr.subtotal {
    background: var(--verylightgrey);
    border-top: 1px solid var(--midpurple);
    color: black;
}

#claimscalculator.active span.calc-header {
    margin: 50px 0;
    color: white;
    font-family: 'Mukta', sans-serif, Arial, Verdana, "Trebuchet MS";
    font-size: 36pt;
}

#claimscalculator .moving-forward {
    margin-top: 30px;
}

#claimscalculator .hp-advice-inner {
    margin:0 !important;
    padding: 0 !important;
}

#claimscalculator .hp-advice-inner-text.small-print {
    padding-bottom:20px;
    padding-left:20px;
}

#claimscalculator .hp-advice-inner h2 {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

#claimscalculator h3 {
    margin-top: 40px;
}

#claimscalculator .calculator-disclaimer {
    color: white;
}
#claimscalculator .calculator-disclaimer a {
    color: white;
    border-bottom-color: white;
}

/* #claimscalculator .gd-row td:first-child span,
#claimscalculator datalist:not(:has(option.active)) option:first-child,
#claimscalculator datalist option.active:not(:has(~ option.active)) {
    font-weight: bold;
    color: #d2046f;
} */

.request-hidden {
    font-size: 16px;
    font-weight: normal !important
}

.hide-until-requested {
    display: none !important;
}

.hide-until-requested.show {
    display: table-row !important;
}

.hide-until-requested td {
    background-color:var(--lightgrey);
}

#claimscalculator .input-range-track {
    background: rgba(0,0,0,0.15);
}

#claimscalculator .calc-download-link {
    position: relative;
    margin-top: 20px;
    margin-right: 20px;
}

#claimscalculator .calc-download-link:after {
    content: "";
    display: block;
    background: url(/themes/workaccident/assets/new-assets/icon-arrow-down-green.svg) no-repeat;
    background-size: contain;
    background-position: center;
    width: 16px;
    height: 16px;
    margin-left: 10px;
    position: absolute;
    right: -20px;
    top: 3px;
}

#calculatorQuestions table tr.gd-range td {
    padding: 2rem;
}

#claimscalculator .input-range-wrapper {
    position: relative;
    display: block;
    margin: 16px 0 48px;
    width: 100%;
    height: 58px;
}

#claimscalculator input[type=range] {
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    cursor: pointer;
    width: calc(100% - 48px);
    padding: 0 27px;
    border: 0;
    position: relative;
    z-index: 100
}

#claimscalculator input[type="range"]::-webkit-slider-runnable-track {
    /* background: transparent */
}

#claimscalculator input[type="range"]::-moz-range-track {
    /* background: transparent */
}

#claimscalculator .input-range-track {
    position: absolute;
    height: 5px;
    border-radius: 8px;
    width: calc(100% - 48px - 70px);
    background-color: #a7aaaf;
    top: 10px;
    left: 35px;
    margin-top: 0;
}

#claimscalculator datalist {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: calc(100% - 48px);
    height: 4px;
    position: absolute;
    top: 10px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    pointer-events: none
}

#claimscalculator datalist option {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    font-size: 13px;
    line-height: 1.3;
    max-width: 70px;
    flex: 1;
    white-space: normal;
    text-align: center;
    text-overflow: ellipsis;
    margin-top: 42px;
}

#claimscalculator datalist option:before {
    display: block;
    content: '';
    background-color: #a7aaaf;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    position: absolute;
    margin-top: -93px;
}

#claimscalculator input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    margin-top: 0;
    background-color: var(--debianred);
    background-image: url(/ui/images/slider-chevrons.png);
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 24px;
    height: 24px;
    width: 24px;
    box-shadow: 0 0 10px rgba(0, 0, 0, .5)
}

#claimscalculator input[type="range"]::-moz-range-thumb {
    border: none;
    background-color: var(--debianred);
    margin-top: 0;
    background-image: url(/ui/images/slider-chevrons.png);
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 24px;
    height: 24px;
    width: 24px;
    box-shadow: 0 0 10px rgba(0, 0, 0, .5)
}

#claimscalculator .calc-download-link:hover:after {
    background-image: url(/themes/workaccident/assets/new-assets/icon-arrow-down-purple.svg);
}

#claimscalculator .icon-results-tldr {
    background-color: var(--midpurple);
}

@media (max-width: 767px) {

    .top-calc-wrapper {
        padding: 30px 0;
    }

    .top-calc-wrapper li:before {
            background: url(/themes/workaccident/assets/new-assets/chevron-white.svg) no-repeat;
    }

    #claimscalculator.active span.calc-header {
        font-size: 24pt;
        line-height: 1.2em;
        margin: 30px 0;        
    }

    #claimscalculator .startagain {
        background-color: var(--darkteal);
    }

    #claimscalculator .results details[open] summary {
        padding-bottom: 20px;
    }

    #claimscalculator .results details[open] summary:after {
        margin-top: 35px;
    }

}

@media (min-width: 768px) {

    #claimscalculator .hp-advice-inner-text.small-print {
        padding-bottom: 30px;
        padding-left: 30px;
    }

    .top-calc-wrapper > .container {
        padding: 80px 0 30px 0;
        background: no-repeat center right 83.75px;
        background-size: 100px;
        background-image: url(/themes/workaccident/assets/new-assets/icon-calc-white-lg.svg);
    }

    .top-calc-wrapper p {
        width: 50%;
    }

    #claimscalculator .section-content .section-aside {
        text-align: left;
    }

    #claimscalculator .hp-advice-inner-text {
        padding-right: 250px;
    }

    #claimscalculator .results-wrapper {
        padding: 60px;
    }

    #claimscalculator .section-content {
        /* flex-direction: row; */
    }

    #claimscalculator .results h2 {
        align-items: center;
    }

    #claimscalculator .grand-total {
        align-items: center;
        font-size: 1.5em;
        flex-direction: row;
    }

    #calculatorQuestions {
        margin: 0 auto 4rem;
        padding: 30px !important;
    }

    #claimscalculator .moving-forward {
        padding: 1rem;
    }

    #claimscalculator .results h2:first-child {
        padding-top: 0;
    }

}

/* Video */

#claimscalculator #video-player-wrapper {
    background: var(--verylightgreen);
}

#claimscalculator #video-cta {
    background-color: var(--cloudburst);
    border: 12px solid var(--teal);
}