#root {
  max-width: 1280px;
  margin: 0 auto;
  padding: 10px;
  text-align: center;
  font-family: "Rubik", Sans-serif;
}

#root * {
    box-sizing: border-box;
  }

.OfferCalculator h1,
.OfferCalculator h2,
.OfferCalculator h2 span,
.OfferCalculator h3,
.OfferCalculator h4,
.OfferCalculator h5,
.OfferCalculator h6 {
  font-family: "Rubik", Sans-serif;
  letter-spacing: 1px;
  font-weight: 600 !important;
  color: var(--text) !important;
}

.OfferCalculator h1,
.OfferCalculator h1 span,
.OfferCalculator h2,
.OfferCalculator h2 span {
  font-weight: 800 !important;
  font-size: 1.5em;
}

.OfferCalculator h3,
.OfferCalculator h3 span {
  font-weight: 800 !important;
  font-size: 1.3em;
}

.OfferCalculator p,
.OfferCalculator span,
.OfferCalculator li,
.OfferCalculator small {
  font-family: "Rubik", Sans-serif;
  font-weight: 300;
  font-size: 20px;
  color: var(--text);
}

.Logo {
  background: var(--blue);
  padding: 10px;
  border-radius: 20px;
}
.Select {
    margin: 2.4em auto 1.8em auto;
    max-width: 300px;
}
.Select select {
        width: 100%;
        height: 60px;
        background: transparent;
        border-radius: 5px;
        font-size: 14px;
        padding: 1em;
        background: var(--orange);
        border: none;
        color: white;
        font-size: 16px;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23131313%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
        background-repeat: no-repeat;
        background-position: right 0.7rem top 50%;
        background-size: 0.65rem auto;
    }

    .IntroStep p:last-of-type {
        font-size: 1em;
    }
.IntroStep .Buttons button {
        margin-top: 0;
        margin-bottom: 20px;
    }
.OfferStep {
    width: 100%;
}

.OfferStep .pulse {
        animation-name: numberAnimation;
        animation-duration: 4.2s;
        animation-delay: 0.8s;
    }

.OfferStep h2 span {
        font-size: 2em;
    }

.OfferStep p:not(:first-of-type) {
        text-align: left;
    }

.OfferStep ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

.OfferStep li {
        text-align: left;
        color: var(--blue);
        font-weight: 800;
        margin: 0 1em 1em 1em;
        animation-duration: 1.2s;
        animation-direction: normal;
        animation-fill-mode: backwards;
        animation-name: fadeLi;
        list-style-type: none;
    }

:is(.OfferStep li) svg {
            color: var(--blue);
        }

:is(.OfferStep li) svg:first-child {
            margin-right: 2em;
        }

:is(.OfferStep li) svg:nth-child(2) {
            color: var(--blue);
            font-size: 1em;
            position: relative;
            top: 6px;
            left: 6px;
        }

:is(.OfferStep li):nth-child(1) {
            animation-delay: 1s;
        }

:is(.OfferStep li):nth-child(2) {
            animation-delay: 1.4s;
        }

:is(.OfferStep li):nth-child(3) {
            animation-delay: 1.8s;
        }

:is(.OfferStep li):nth-child(4) {
            animation-delay: 2.2s;
        }

:is(.OfferStep li):nth-child(5) {
            animation-delay: 2.6s;
        }

:is(.OfferStep li):nth-child(6) {
            animation-delay: 3s;
        }

:is(.OfferStep li):nth-child(7) {
            animation-delay: 3.4s;
        }

:is(.OfferStep li):nth-child(8) {
            animation-delay: 3.8s;
        }

.OfferStep .bottom-text {
        padding-top: 30px;
        text-align: justify;
    }

@media (max-width: 767px) {
        .OfferStep h2 span {
            font-size: 1.5em;
        }

        .OfferStep ul {
            margin-top: 40px;
        }

            :is(.OfferStep ul) li {
                text-align: center;
            }

                :is(:is(.OfferStep ul) li) svg {
                    display: none;
                }
    }

@keyframes fadeLi {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes numberAnimation {
    0% {
        transform: scale(1);
    }
    15% {
        transform: scale(1.2);
    }
    30% {
        transform: scale(1);
    }
    45% {
        transform: scale(1.2);
    }
    60% {
        transform: scale(1);
    }
    85% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}

    .FailLeaseholdStep button {
        cursor: pointer;
    }
.FailLeaseholdStep button:first-of-type {
        margin-bottom: 1em;
    }

    .FailLeaseholdStep button {
        cursor: pointer;
    }
.FailLeaseholdStep button:first-of-type {
        margin-bottom: 1em;
    }

    .AuctionAppraisalStep .pulse {
        animation-name: numberAnimation;
        animation-duration: 4.2s;
        animation-delay: 0.8s;
    }

.AuctionAppraisalStep h2 span {
        font-size: 1.5em;
    }

.AuctionAppraisalStep p:not(:first-of-type) {
        text-align: left;
    }

.AuctionAppraisalStep .bottom-text {
        padding-top: 30px;
        text-align: justify;
    }

@media (max-width: 767px) {
        .AuctionAppraisalStep h2 span {
            font-size: 1em;
        }
    }

@keyframes fadeLi {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes numberAnimation {
    0% {
        transform: scale(1);
    }
    15% {
        transform: scale(1.2);
    }
    30% {
        transform: scale(1);
    }
    45% {
        transform: scale(1.2);
    }
    60% {
        transform: scale(1);
    }
    85% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}
.RadioList {
    display: grid;
}

@media (max-width: 767px) {

.RadioList {
        grid-template-columns: repeat(1, 1fr) !important;
}
    }

.RadioList.Rows2 {
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 30px;
}

@media (max-width: 767px) {

.RadioList.Rows2:not(.RadioList_property_location) {
            grid-template-columns: repeat(2, 1fr) !important;
    }
        }

.RadioList.Rows3 {
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 30px;
}

@media (max-width: 767px) {

.RadioList.Rows3 {
        grid-template-columns: repeat(2, 1fr) !important;
}
    }

.RadioList.Rows4 {
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 30px;
}

.RadioList.Rows5 {
    grid-template-columns: repeat(5, 1fr);
    grid-gap: 30px;
}

@media (max-width: 767px) {

.RadioList.Rows5 {
        grid-template-columns: repeat(2, 1fr) !important;
}
    }

.RadioList.Rows6 {
    grid-template-columns: repeat(6, 1fr);
    grid-gap: 30px;
}

.RadioListItem {
    display: flex;
    height: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.RadioListItem input {
    display: none;
}

.RadioListItem label {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: white;
    border: 3px solid #ccc;
    border-radius: 10px;
    padding: 30px;
    box-sizing: border-box;
}

.RadioListItem p {
        font-size: 1em;
        font-weight: 600;
        color: var(--orange);
    }

.RadioListItem p,.RadioListItem svg {
        margin: 10px;
    }

.RadioListItem input:checked + label {
    border-color: var(--blue);
    background-color: var(--orange);
}

:is(.RadioListItem input:checked + label) p,:is(.RadioListItem input:checked + label) svg {
        fill: white !important;
        color: white !important;
    }

.RadioListItem label svg {
    fill: var(--orange) !important;
    color: var(--orange) !important;
    height: 100px;
    max-width: 100%;
}

.RadioList_property_location .RadioListItem svg {
    height: 350px;
}
.AddressStep {
    position: relative;
}

.AddressStep input {
        background: #eff;
    }

.AddressStep .spinner {
        position: absolute;
        left: calc(50% - 30px);
        bottom: -50px;
        height: 60px;
        width: 60px;
        animation-name: spin;
        animation-duration: 2000ms;
        animation-iteration-count: infinite;
        animation-timing-function: linear;

        color: var(--blue) !important;
    }

.AddressStep .Suggestions {
        z-index: 1;
        position: absolute;
        top: 185px;
        left: 0;
        background-color: var(--orange);
        max-height: 300px;
        overflow-y: scroll;
        margin: 0;
        border-radius: 0 0 20px 20px;
        width: 100%;
        border: 2px solid white;
        box-sizing: border-box;
        list-style: none;
        margin: 0;
        padding: 0;
    }

:is(.AddressStep .Suggestions) li {
            background-color: var(--orange);
            color: white;
            padding: 1em;
            border-bottom: 1px solid black;
            cursor: pointer;
            text-align: left;
        }

@media (max-width: 767px) {
        .AddressStep .Suggestions {
            top: 230px;
            max-height: 350px;
        }

            :is(.AddressStep .Suggestions) li {
                font-size: 1em;
            }
    }

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
.TextInput {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    border-radius: 5px;
    width: 100%;
    margin: 0 auto;
    color: black;
    margin-bottom: 1em;
}
.TextInput input {
        flex-grow: 2;
        border: 0;
        height: 50px;
        width: 100%;
        font-size: 1em;
        border-radius: 5px;
        text-indent: 1.2em;
        background: var(--orange);
        border: none;
        color: white;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
    }
:is(.TextInput input)::-moz-placeholder {
            color: white;
        }
:is(.TextInput input)::placeholder {
            color: white;
        }
:is(.TextInput input):-webkit-autofill,:is(.TextInput input):-webkit-autofill:hover,:is(.TextInput input):-webkit-autofill:focus,:is(.TextInput input):-webkit-autofill:active {
            -webkit-transition: background-color 5000s;
            transition: background-color 5000s;
            -webkit-text-fill-color: white !important;
        }
.TextInput p {
        padding-left: 1.2em;
    }
.TextInput .error {
        color: red;
        padding: 10px;
    }

    .SuccessStep .company-logos {
        box-sizing: border-box;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 30px;
    }
:is(.SuccessStep .company-logos) img {
            box-sizing: border-box;
            padding: 20px;
            width: 100%;
            max-width: 200px;
        }
.SuccessStep img.referral {
        max-width: 400px;
        width: 100%;
        margin-bottom: 1em;
    }
.hbb:is(.SuccessStep img.referral) {
            max-width: 200px;
        }
.SuccessStep .icon-row {
        display: flex;
        flex-direction: row;
        text-align: left;
        align-items: center;
    }
:is(.SuccessStep .icon-row) svg {
            padding: 20px;
            max-width: 100px;
            fill: var(--blue);
        }
@media screen and (max-width: 768px) {
        .SuccessStep .icon-row {
            flex-direction: column;
            text-align: center;
            align-items: center;
        }
    }
.SuccessStep .text-left {
        text-align: left;
    }
.SuccessStep p {
        text-align: left;
        margin-bottom: 1em;
    }
.SuccessStep ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }
.SuccessStep li {
        text-align: left;
        color: var(--blue);
        font-weight: 600;
        margin: 0 1em 1em 1em;
    }
:is(.SuccessStep li) svg {
            color: var(--blue);
        }
:is(.SuccessStep li) svg:first-child {
            margin-right: 2em;
        }
:is(.SuccessStep li) svg:nth-child(2) {
            color: var(--blue);
            font-size: 1em;
            position: relative;
            top: 6px;
            left: 6px;
        }
:is(.SuccessStep li):nth-of-type(1),:is(.SuccessStep li):nth-of-type(2) {
            color: var(--orange);
        }
:is(:is(.SuccessStep li):nth-of-type(1),:is(.SuccessStep li):nth-of-type(2)) svg {
                color: var(--orange);
            }

    .MatchingStep svg {
        color: var(--blue);
        font-size: 8em;
        animation-name: spin;
        animation-duration: 2000ms;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
    }

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

    .FailLeaseholdStep button {
        cursor: pointer;
    }
.FailLeaseholdStep button:first-of-type {
        margin-bottom: 1em;
    }
.OfferCalculator {
    margin: auto;
    padding: 40px;
    max-width: 800px;
    min-height: 400px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

.OfferCalculator img {
        width: 100%;
        max-width: 400px;
    }

.OfferCalculator .loader {
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
    }

:is(.OfferCalculator .loader) svg {
            font-size: 3em;
            animation-name: spin;
            animation-duration: 2000ms;
            animation-iteration-count: infinite;
            animation-timing-function: linear;

            color: var(--blue) !important;
        }

@media (max-width: 767px) {

.OfferCalculator {
        padding: 10px;
}
    }

.OfferCalculator .Buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

:is(.OfferCalculator .Buttons) button {
        line-height: calc(1em - 5px);
        display: block;
        margin: 0.6em auto 0 auto;
        clear: both;
        min-height: 60px;
        font-size: 20px;
        color: #ffffff;
        border-style: none;
        transition: all 0.4s ease-in-out;
        border-radius: 5px;
        padding: 15px 30px;
        appearance: none;
        -moz-appearance: none;
        -webkit-appearance: none;
    }

:is(.OfferCalculator .Buttons) .Primary {
        background-color: var(--green);
        border-color: var(--green);
    }

:is(.OfferCalculator .Buttons) .Secondary {
        background-color: var(--green);
        border-color: var(--green);
    }

:is(.OfferCalculator .Buttons) .BackButton {
        cursor: pointer;
        color: var(--text);
        text-decoration: underline;
    }

:is(.OfferCalculator .Buttons) .pulse {
        animation-name: numberAnimation;
        animation-duration: 4.2s;
        animation-delay: 0.8s;
    }

:is(.OfferCalculator .Buttons) * {
        margin-top: 1em;
    }

@media (max-width: 767px) {

.OfferCalculator .Buttons {
        width: 100%;
}

        :is(.OfferCalculator .Buttons) button {
            display: block;
            width: 100%;
        }
    }

.debug {
    display: block;
    padding: 10px;
    max-width: 300px;
    text-align: left;
}

.debug ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.debug ul li {
    display: block;
    font-size: 0.8em;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
:root {
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  --green: #82bd00;
  --orange: #089cc4;
  --blue: #052c4e;
  --orange: #e6890b;
  --text: #052c4e;
}