*, * ::before, * ::after {
    box-sizing: border-box;
    background-repeat: no-repeat;
    text-decoration: inherit;
    vertical-align: inherit;
}

body {
    font-family: "Inter", sans-serif !important;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-feature-settings: "liga", "clig off", "pnum", "lnum", "kern";
    font-variant: no-common-ligatures proportional-nums lining-nums;
    font-kerning: normal;
    text-overflow: ellipsis;
    text-rendering: optimizeLegibility;
    overflow-wrap: break-word;
    overflow-x: hidden;
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 1.5;
    margin: 0;
    padding: 0;
    height: auto;
}


html {
    font-size: 62.5% !important;
}

header {
    border-bottom: 1px solid #d5d7dd;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100% !important;
    height: 62px !important;
    padding: unset !important;
    overflow: unset;
}

header .container {
    padding: unset !important;
}

h2 {
    font-size: 2rem;
    margin: 0;
    text-transform: unset;
    color: #373C47;
}

ul {
    list-style-type: none;
}

li {
    align-items: center;
    display: flex;
    justify-content: start;
}

input[type=text] {
    border-radius: 0.8rem;
}

.logo {
    display: flex;
    position: relative;
    flex-grow: 0;
    flex-shrink: 0;
    align-items: center;
    max-width: 100%;
    padding: .8rem 2.4rem !important;
    color: currentColor;
    font-size: 1.4rem;
    font-weight: 600;
}

.dd-button {
    color: #0b77b7;
    display: none;
    border: 1px solid #fff;
    padding: 10px 30px 10px 20px;
    background-color: #fff;
    cursor: pointer;
    white-space: nowrap;
    font-weight: bold;
}

.dd-button:after {
    content: '';
    color: #0b77b7 !important;
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid white;
}


#estimation-landing-page {
    display: flex;
    flex-direction: column;
    min-width: 100%;
}

.dd-button:hover {
    color: #fff;
    background-color: #0b77b7;
}

.rowheader {
    margin: 10px;
    padding: 4rem 0 13rem 0;
    text-align: center;
    height: 36rem;
    width: 100%;
}

.rowheader h1, .rowheader h2 {
    color: #fff;
}

.rowheader h2 {
    padding-bottom: 1.2rem;
    padding-top: 1.2rem;
}

.column {
    padding-top: 20px;
    display: flex;
    flex-direction: column;
    flex-basis: 100%;
    flex: 1;
}

.row img {
    display: inline;
    margin-top: 10px;
    margin-bottom: 10px;
}

.pac-container:after {
    background-image: none !important;
    height: 0px;
}

.estimation-icon {
    aspect-ratio: 1;
    font-size: 2.4rem;
    display: inline-block;
    flex-shrink: 0;
    width: 1em;
    height: 1em;
    margin-right: 1.6rem;
    fill: currentColor;
    fill-rule: evenodd;
    clip-rule: evenodd;
    vector-effect: non-scaling-stroke;
    shape-rendering: geometricprecision;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

.estimation-icon-blue {
    color: #0074c1;
}

.estimation-slogan {
    font-weight: normal;
}

.estimation-type-options-container {
    align-items: end;
    display: flex;
    justify-content: center;
}

.estimation-type-option-card {
    align-items: center;
    border: 1px solid darkgrey;
    background-color: #fff;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    justify-content: end;
    height: 100%;
    padding: 3.4rem 2rem 3.2rem;
    width: 50%;
    text-align: center !important;
}

.estimation-type-option-card img {
    width: 230px;
    margin-bottom: 1.4rem;
}

.mini-agency-logo {
    border-radius: 5px;
    width: 78px;
    height: 58px;
    border: 1px solid #D5D7DD;
    object-fit: scale-down;
    padding: 4px;
}

#agency-mini-logo-list {
    align-items: center;
    display: flex;
    gap: 10px;
    justify-content: start;
}

.estimation-titles-container {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
    justify-content: center;
    margin-bottom: 1.4rem;;
}

.estimation-type-option-card .estimation-title {
    color: black;
    font-size: 2.4rem !important;
    font-weight: 600 !important;
    line-height: 1.3333333333;
    margin: unset;
    padding: unset;
    text-align: center !important;
    text-transform: unset;
}

.estimation-type-option-card .estimation-sub-title {
    color: black;
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1.5;
}

.estimation-type-option-card .estimation-a-button {
    margin-bottom: 3.2rem;
}

.estimation-without-agency {
    border-right: unset;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    height: 90%;
}

.estimation-without-agency .estimation-titles-container {
    margin-top: 1rem;
}

.estimation-without-agency .estimation-a-button {
    background-color: white;
    color: #1074C1 !important;
    border: 1px solid #d5d7dd;
}

.estimation-without-agency .estimation-badge {
    display: none;
}

.estimation-with-agency {
    border-bottom-left-radius: 0;
    padding: .8rem .8rem 0;
    justify-content: start;
    gap: 0;
    height: fit-content;
}

.estimation-with-agency .estimation-badge {
    margin-bottom: 0.7rem;
}

.estimation-with-agency .estimation-titles-container {
    margin-bottom: 1.4rem;
}

.estimation-with-agency .estimation-sub-container {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 1.8rem .8rem 3.2rem;
}

.estimation-service-info-tab img {
    align-self: center;
    margin-bottom: 1.2rem;
    max-width: 300px;
}

.estimation-characteristics {
    display: block;
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 1.5;
    list-style: none;
    overflow: hidden;
    padding-left: 20px;
}

.estimation-characteristics li {
    position: relative;
    padding-left: 30px;
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 1.5;
    text-align: left;
    margin-bottom: 1.6rem;
}

.estimation-characteristics li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 2.4rem;
    height: 2.4rem;
    background: url('../images/checkmark-blue.svg') no-repeat center center;
    background-size: contain;
}

.estimation-alert {
    font-size: 1.4rem;
    line-height: 1.1428571429;
    align-items: center;
    justify-content: center;
    height: 6.4rem;
    padding: 1.6rem .8rem;
    border: 0;
    border-radius: 8px;
    background-color: #E5F3FF;
    color: #0976C2;
    font-weight: 600;
    text-align: center;
}

.estimation-badge {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 0.4rem;
    background-color: #d82244;
    color: #fff;
    white-space: nowrap;
    vertical-align: middle;
    padding-left: 0.8rem;
    padding-right: 0.8rem;
    min-width: 2.4rem;
    height: 2.4rem;
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.1428571429;
}

body > div > div:nth-child(4) > div > div.estimation-quick-tab > div:nth-child(1) > div > svg {
    margin-right: 5px;
}

.estimation-a-button {
    display: inline-grid;
    position: relative;
    min-width: 90% !important;
    min-height: 4rem;
    padding: 4px 1.6rem;
    border: 1px solid transparent;
    border-radius: 0.8rem;
    background-color: #e50013;
    color: white !important;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    overflow: hidden;
    align-items: center;
    justify-items: center;
    align-content: center;
    justify-content: center;
    grid-auto-flow: column;
    gap: .8rem;
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.1428571429;
    text-transform: uppercase;
}

.estimation-quick-start-container {
    align-items: start;
}

.estimation-quick-tab div:first-of-type {
    align-items: center;
    display: flex;
    justify-content: space-between;
    position: relative;
}

.estimation-quick-tab > div {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-top: 2.4rem;
    margin-bottom: 1.6rem
}

.estimation-type-switch-tab {
    display: flex;
    margin: unset;
    padding: unset;
    z-index: 999 !important;
}

.estimation-type-switch-tab li {
    -moz-user-select: none;
    -webkit-user-select: none;
    align-items: center;
    border: 1px solid #d5d7dd;
    border-bottom: unset;
    color: #373c47;
    cursor: pointer;
    display: flex;
    flex-shrink: 0;
    font-size: 1.6rem;
    height: 4.8rem;
    padding: 0 1.6rem;
    position: relative;
    text-align: center;
    transition: .3s ease;
    user-select: none;
    white-space: nowrap;
}

.estimation-type-switch-tab li.is-active {
    border-color: #8abfe2;
    background-color: #e6f1f9;
    color: #0074c1;
}

.estimation-type-switch-tab .estimation-badge {
    position: absolute;
    top: 0;
    right: .8rem;
    transform: translateY(-50%);
    z-index: 999;
}

.estimation-quick-tab {
    border: 1px solid #d5d7dd;
    margin-bottom: 5.6rem;
    padding: 2.4rem 3.2rem;
    border-radius: .8rem;
    border-top-left-radius: 0;
}

.estimation-quick-tab li {
    align-items: start;
    display: flex;
    margin-bottom: 3.2rem;
}

.estimation-service-info-tab.left {
    border-right: 1px solid #d5d7dd;
}

.estimation-service-info-tab.right li {
    align-items: start;
    display: flex;
    margin-bottom: unset;
    padding-bottom: .8rem;
}

.estimation-type-switch-tab li:first-of-type {
    border-top-left-radius: 0.8rem;
    border-right-style: none;
}

.estimation-type-switch-tab li:last-of-type {
    border-top-right-radius: 0.8rem
}

.estimation-address-search-container {
    align-items: center;
    justify-content: start;
    background-color: #E4E9F6;
    border-radius: .8rem;
    display: flex;
    flex: 0 0 100%;
    flex-direction: column;
    margin-bottom: 4rem !important;
    padding: 1.6rem;
    width: 100%;
}

.estimation-service-info-tab-container {
    align-items: start !important;
    display: flex;
    justify-content: center;
}

.estimation-address-search-container > div {
    align-items: center;
    display: flex;
    justify-content: space-between;
    width: 100%;
    min-height: 100%;
}

.estimation-address-search-container > div > div {
    display: flex;
    align-items: center;
    background-color: white;
    width: 100%;
    height: 4rem;
    border-radius: inherit;
    color: #373c47;
    overflow: hidden;
    padding: 2.8rem !important;
    position: relative;
}

.estimation-address-search-container > div > div input {
    border: unset;
}

.estimation-address-search-container > div .estimation-a-button {
    align-self: center;
    flex-shrink: 0;
    min-width: unset !important;
    position: absolute;
    right: 2.4rem;
}

.estimation-service-info-tab {
    align-items: start;
    display: flex;
    flex-direction: column;
    min-height: 100%;
    justify-content: center;
}

.estimation-quick-tab.is-active {
    align-items: start;
    display: none;
    flex-direction: column;
    min-height: 100%;
    justify-content: center;
}

.estimation-service-info-tab {
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
    width: 50%;
}

.estimation-service-info-tab:first-of-type {
    padding-right: 3.2rem;
}

.estimation-service-info-tab:last-of-type {
    padding-left: 3.2rem;
}


.estimation-service-info-tab-title {
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1.5;
    margin-bottom: 1.6rem;
}

.estimation-service-info-tab span {
    align-self: start;

}

.estimation-service-info-tab ul {
    padding: unset;
}

.estimation-accordion-item {
    background-color: #ffffff;
    border: 1px solid #d5d7dd;
    border-radius: 0.8rem;
    cursor: pointer;
    display: grid;
    grid-template-rows: minmax(4.8rem, max-content) 0fr;
    margin-bottom: 0.4rem;
    transition: .16s ease;
}

.estimation-accordion-item div {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.estimation-accordion-item svg.is-expanded {
    fill: #1A74C1 !important;
}

@keyframes rotate-left {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(-180deg);
    }
}

.estimation-accordion-item div svg {
    transition: transform 0.3s ease-in-out;
}

.estimation-accordion-item.is-open {
    border-color: #8abfe2 !important;
    grid-template-rows: minmax(4.8rem, max-content) 1fr;
    transition: .16s .16s ease;
}

.estimation-accordion-item > div:first-of-type {
    font-size: 1.6rem;
    line-height: 1.5;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    display: flex;
    position: relative;
    align-items: center;
    padding: 0 2.4rem;
    font-weight: 600;
    cursor: pointer;
    overflow: hidden;
    z-index: 1;
}

.questions-and-answers {
    flex-direction: column;
    max-width: 108rem;
    margin-bottom: 8rem;
}

.container.questions-and-answers h2 {
    color: #373c47;
    font-size: 2.4rem;
    line-height: 1.3333333333;
    margin-bottom: 3.2rem;
}

.estimation-questions-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
    padding: 0;
    display: none;
}

.estimation-accordion-item.is-open .estimation-questions-answer {
    max-height: 200px;
    padding: 0 2.4rem 2.4rem 2.4rem;
}

.estimation-questions-answer p {
    opacity: 0;
}

.buttonToStart {
    padding: 5px 10px 6px;
    line-height: 30px;
    display: block;
    font-size: 16px;
    color: white;
    max-width: 250px;
    background-color: #0074c1;
    text-align: center;
    margin: 0 auto;
    border-radius: 3px;
}

.buttonToStart:hover {
    text-decoration: none;
    color: white;
}

#estimation-main {
    width: 100vw;
    min-height: calc(100vh - 62px);
    justify-content: center;
    align-items: center;
    display: flex;
    flex-direction: column;
}

.pre-container {
    align-items: center;
    background-color: white !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: unset !important;
    min-width: 100%;
}

.container {
    display: flex;
    border: none;
    max-width: 108rem;
    height: fit-content;
    justify-content: center;
    flex-direction: column;
}

.pre-container .container {
    background-color: #1074C1;
    border: none;
    padding: 0 !important;
    min-width: 100% !important;
    height: fit-content;
}

.pre-container .sub-container {
    align-items: end;
    display: flex;
    margin-left: auto;
    margin-top: -18rem;
    margin-right: auto;
    max-width: 80rem;
}

#estimation-first-step, #estimation-second-step {
    display: flex;
    justify-content: center;
}


.left-column {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-basis: 60%;
}

.left-column .estimation-a-button {
    background-color: #fff;
    border: 1px solid #d5d7dd !important;
    color: #0074c1 !important;
    min-width: unset !important;
}

.left-column:first-child {
    min-width: 59.2rem;
    padding: 4rem 8.4rem 0;
    position: relative;
}

.right-column {
    flex-basis: 40%;
    background-color: #B7D2EB;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}


#estimation-first-step .right-column {
    border-left: 1px solid #d5d7dd;
}

.estimation-step-track {
    margin-bottom: .8rem;
    color: #60687a;
    font-weight: 600;
    text-transform: uppercase;
}

.estimation-step-title {
    color: #373C47;
    font-size: 3.2rem;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: -1px;
    margin-bottom: 3.2rem;
    text-transform: inherit !important;
}

.main-container label {
    display: block;
    margin-bottom: .8rem;
    color: currentColor;
    font-size: 1.6rem;
    font-weight: 600;
}

#estimation-first-step .input-container {
    width: 100%;
}

#estimation-first-step .input-container input[type=text] {
    width: 100%;
}

#estimation-first-step .step-footer {
    justify-content: end;
}

.property_fields_by_type {
    display: none;
}

.step-footer {
    display: flex;
    justify-content: space-between;
    align-items: end;
    padding-top: 1.6rem;
    padding-bottom: 1.6rem;
    border-top: 1px solid #d5d7dd;
}

.step-footer .previous-step {
    border: unset !important;
    padding-left: unset !important;
}

.step-footer .next-step:hover {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.06));
}

.step-footer .previous-step:hover {
    text-decoration: underline !important;
}


.step-typology-container {
    flex-wrap: wrap;
    margin-right: -0.8rem;
    margin-bottom: 4.8rem;
    overflow-anchor: none;
    display: flex;
    gap: 0.8rem;
}

.typology-switch-control {
    width: 100%;
    height: 6.4rem;
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 1.1428571429;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 4rem;
    max-width: 100%;
    appearance: none;
    user-select: none;
    padding-top: .4rem;
    padding-bottom: .4rem;
    padding-left: 1.6rem;
    padding-right: 1.6rem;
    border: 1px solid #d5d7dd;
    border-radius: 0.8rem;
    background-color: #ffffff;
    color: #373c47;
    cursor: pointer;
}

.radio-typology-switch:checked + label .typology-switch-control {
    background-color: #0b77b7;
    color: white;
    border: 1px solid #0b77b7;
}

.characteristic-container {
    display: flex;
    padding-top: 1rem;
    padding-bottom: 1rem;
    position: relative;
}

.characteristic-container .required-input-message, .min-value-input-message-container {
    position: absolute;
    bottom: -10px;
    left: 50%;
    font-size: 14px;
}

.required-field {
    border-color: #d82244 !important;
}

.characteristic-container div {
    display: flex;
}

.characteristic-container label {
    width: 50%;
}

.characteristic-container input[type=text] {
    border: 1px solid #d5d7dd;
    border-radius: 0.8rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 1.6rem;
    padding-right: calc(1.6rem / 2);
    width: 30.8rem;
}

.characteristic-container label div span {
    font-weight: unset !important;
}

.input-container input[type=text], .input-container input[type=number] {
    border: unset;
    width: unset;
    padding-right: unset;
}

.characteristic-container label .input-container span {
    width: auto !important;
    padding-right: unset;
}


.input-container {
    border: 1px solid #d5d7dd;
    border-radius: 0.8rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 1.6rem;
    padding-right: calc(1.6rem / 2);
    width: 30.8rem;;
}

#estimation-fifth-step .left-column {
    padding: 4rem 8.4rem 0;
}

#estimation-fifth-step > div.left-column > div:nth-child(1) > div > div:nth-child(6) > label > div {
    width: 30.8rem;
}

#estimation-fifth-step .estimation-loading-container {
    position: absolute;
    top: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.2);
    z-index: 999;
    display: flex;
    justify-content: center;
    align-items: center;
}

#estimation-fifth-step .estimation-loading-container > div {
    background: white;
    border-radius: 0.8rem;
    display: flex;
    height: 50%;
    width: 50%;
    padding: 8rem;
}

#estimation-fifth-step .estimation-loading-container > div div {
    width: 50%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
    gap: 12px;
}

#estimation-fifth-step .estimation-loading-container > div div img {
    border: none;
}

.half-border {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
}

.half-border::before,
.half-border::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    pointer-events: none;
    box-sizing: border-box;
}

.half-border::before {
    border: 2px dotted darkgrey;
    clip-path: inset(0 50% 0 0);
}

.half-border::after {
    border: 2px solid darkgrey;
    clip-path: inset(0 0 0 50%);
}

.full-border {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: 2px solid #4FB177;
    border-radius: 50%;
    box-sizing: border-box;
}

.full-border i {
    color: #4FB177 !important;
}

#estimation-fifth-step > div.estimation-loading-container > div i {
    font-size: 10px;
    color: darkgrey;
}

#estimation-fifth-step > div.estimation-loading-container > div > div:nth-child(2) > span {
    display: flex;
    justify-content: start;
    align-items: start;
    gap: 14px;
    font-size: 1.4rem;
    line-height: 1.8rem;
    color: #9E9FA5;
    font-weight: 600;
}

#estimation-fifth-step > div.estimation-loading-container > div > div:nth-child(2) > span:nth-child(2) {
    color: #B6B9C2;
    font-size: 12px;
    font-weight: bold;
    padding-bottom: 1rem;
}

#verification-code-container {
    align-items: start;
    display: flex;
    flex-direction: row;
    gap: 20px;
    justify-content: center;
    padding: 3rem 0;
}

#verification-code-container form {
    display: flex;
    gap: 15px;
}

input[type=text].verification-code-digit {
    border: 1px solid darkgrey;
    border-radius: 0.8rem;
    caret-color: transparent;
    font-size: 30px !important;
    height: 70px;
    text-align: center;
    width: 70px;
}

.verification-code-digit:focus {
    border-color: #0074C1 !important;
    border-width: 2px;
    outline: none;
}


.incremental-control {
    border: 1px solid hsl(225, 10.5263157895%, 88.0980392157%);
    border-radius: 999rem;
}

.incremental-control::before {
    content: "";
    display: block;
    position: relative;
    left: calc(50% - 0.8rem);
    flex-shrink: 0;
    width: 1.6rem;
    height: 2px;
    background-color: #0074c1;
}

.incremental-control:last-child::after {
    content: "";
    display: block;
    position: absolute;
    top: calc(50% - 0.8rem);
    right: calc(50% - 1px);
    width: 2px;
    height: 1.6rem;
    background-color: #0074c1;
}

.switch-native-control {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
    overflow: hidden;
    visibility: visible;
}

.typoligy-switch-logo {
    font-size: 3.2rem;
    margin-right: .8rem;
    display: inline-block;
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    aspect-ratio: 1;
    fill: currentColor;
    fill-rule: evenodd;
    clip-rule: evenodd;
    vector-effect: non-scaling-stroke;
    shape-rendering: geometricprecision;
}

.step__formBlock + .step__formBlock {
    margin-top: 2.4rem;
}

.nd-textField__label {
    display: flex !important;
    flex: 0 0 auto;
    align-items: center;
    height: 4rem;
    margin: 0;
    padding-right: 2.4rem;
    line-height: 1.8rem;
    width: 45%;
}

.step__formBlock--inline .step__formField {
    max-width: 33.2rem;
}

.nd-incremental[type=button] {
    border: 1px solid hsl(225, 10.5263157895%, 88.0980392157%);
    border-radius: 999rem;
}

.nd-incremental {
    position: relative;
    width: 4rem;
    height: 4rem;
    background-color: #fff;
    cursor: pointer;
}

.nd-incremental::before {
    content: "";
    display: block;
    position: relative;
    left: calc(50% - 0.8rem);
    flex-shrink: 0;
    width: 1.6rem;
    height: 2px;
    background-color: #0074c1;

}

.nd-incremental:last-child::after {
    content: "";
    display: block;
    position: absolute;
    top: calc(50% - 0.8rem);
    right: calc(50% - 1px);
    width: 2px;
    height: 1.6rem;
    background-color: #0074c1;
}

.radio-typology-switch {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
    overflow: hidden;
    visibility: visible;
}

.nd-switch--group > *:not(:last-child) {
    margin-right: -1px;
}

.step__formBlock--inline {
    display: flex;
    flex-direction: column;

}

.nd-switch {
    display: flex;
}

.step__formField {
    display: flex;
    flex-grow: 1;
    align-items: center;
}

.characteristic-container label {
    border-radius: 0.8rem;
    display: flex;
    position: relative;
    align-items: center;
    justify-content: start;
    /*width: 100%;
    max-width: 45%; */
    height: 4rem;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 1.6rem;
    padding-right: calc(1.6rem / 2);
}

.characteristic-container label span {
    width: 100% !important;
    /*padding-right: 1rem;*/
}

#estimation-third-step select {
    border: none;
}

.proximity-container {
    padding-left: 1.6rem;
    padding-top: 1.8rem;
}

.select-container {
    border: 1px solid #d5d7dd;
    border-radius: 0.8rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 1.6rem;
    padding-right: calc(1.6rem / 2);
    width: 30.8rem;
    max-width: 30.8rem;
    position: relative;
    background: white;
    cursor: pointer;
}

.select-container.focused {
    border: 1px solid #0b77b7;
}

.select-container select {
    border: unset;
    text-align: left;
    padding-left: unset;
    font-weight: normal !important;
    appearance: none;
    cursor: pointer;
    outline: none;
    background-size: 16px;
    color: #333;
}

.select-container select:hover {
    border-color: #0b77b7;
}

.select-container option {
    font-size: 16px;
    background-color: white;
    color: #333;
    padding: 10px;
}

.custom-select {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    border-radius: 6px;
    cursor: pointer;
    background-color: #fff;
}

.selected-option {
    font-size: 16px;
    color: #333;
}

.options-list {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: none;
    border-radius: 0 0 6px 6px;
    background-color: #fff;
    z-index: 1000;
    margin-top: 2px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.option-item {
    padding: 10px;
    font-size: 16px;
    color: #333;
    cursor: pointer;
    font-weight: normal;
}

.option-item:hover {
    background-color: #e6f0ff;
    color: #2c7be5;
}

.select-container:focus {
    border-color: #2c7be5;
}

#estimation-third-step .step-typology-container {
    padding-top: 2.2rem;
}

.step-progress-container {
    margin: 16rem auto auto auto;
    padding: 0 2.4rem;
}

.progress-step-prev {
    align-items: flex-start;
}

.progress-step {
    display: flex;
    position: relative;
    align-items: center;
    padding-bottom: 3.2rem;
    transition: color 150ms cubic-bezier(0.25, 0.1, 0.25, 1);
    color: #d5d7dd;
}

.progress-step:not(.progress-step-active, .progress-step-prev) {
    opacity: 0.5;
}

.progress-graph {
    display: flex;
    flex-grow: 0;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    border: 2px solid currentColor;
    border-radius: 50%;
    transition: background-position 450ms cubic-bezier(0.25, 0.1, 0.25, 1), border-color calc(450ms / 2) cubic-bezier(0.25, 0.1, 0.25, 1), color 150ms cubic-bezier(0.25, 0.1, 0.25, 1);
    background-image: linear-gradient(to top, #0074c1, #0074c1);
    text-align: center;
}

.progress-step-active {
    opacity: 1 !important;
}

.progress-step-active .progress-graph {
    transition-delay: 150ms;
    border: 1px solid #ffffff;
    background-color: #0074c1;
    background-position: 0 0;
    color: #ffffff;
    background-image: linear-gradient(to top, #0074c1, #0074c1);
}

.progress-step-prev .progress-graph {
    border: 1px solid #8abfe2;
    background-color: #ffffff !important;
    background-position: 0 4rem;
    color: #0074c1;
}

.progress-step-prev:not(:nth-last-of-type(1))::before {
    content: "";
    display: block;
    position: absolute;
    top: 4rem;
    left: calc(4rem / 2.05);
    flex-shrink: 0;
    align-self: stretch;
    width: 3px;
    height: calc(100% - 4rem);
    transition: background-position 900ms cubic-bezier(0.25, 0.1, 0.25, 1);
    background-color: #D2E3F3 !important;
    background-position: 0 104px !important;
}

.progress-container-text {
    padding-left: 1.6rem;
}

.progress-step-prev .progress_container-text {
    color: #373c47;
}

.progress-title {
    font-size: 2rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.5px;
}

.progress-step-active .progress-container-text, .progress-container-text {
    color: #0b77b7;
}

.progress-step-prev .progress-container-text {
    color: #373c47;
!important;
}

.progress-step-prev .progress-text, .progress-step-final .progress-title {
    display: -webkit-box;
    max-height: 4.8rem;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.progress-step-final .progress-title {
    color: #0b77b7;
}


.progress-step-active, .progress-step-prev {
    align-items: flex-start;
}

.progress-step .estimation-icon {
    font-size: 1.8rem;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    width: 1em;
    height: 1em;
    aspect-ratio: 1;
    fill: currentColor;
    fill-rule: evenodd;
    clip-rule: evenodd;
    vector-effect: non-scaling-stroke;
    shape-rendering: geometricprecision;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    margin: unset !important;
}

.progress-step-final {
    font-size: 2rem;
    font-weight: 600;
    color: white;
    line-height: 1.2;
    letter-spacing: -0.5px;
    margin: 0 -1.6rem;
    display: flex;
    align-items: center;
    opacity: 0.5;
    padding-left: 1.6rem;
    gap: 1.6rem;
}

.progress-step-final .estimation-icon {
    width: 4rem;
    height: 4rem;
    margin: 0 3.2rem 0 0;
    margin-right: 1.6rem;
    background-color: #0b77b7;
    border-radius: 50%;
    padding: 0.5rem;
}

#estimation-fifth-step .estimation-step-title {
    margin-bottom: 0.8rem;
}

#estimation-fifth-step .left-column > div:first-of-type {
    padding-bottom: 4rem;
}


#estimation-fifth-step > div.left-column > div:nth-child(2) img {
    margin-bottom: 4rem;
}

#estimation-fifth-step > div.left-column > div:nth-child(2) > div > label {
    margin-bottom: 1.6rem;
}

#estimation-fifth-step .step-enviroment-container {
    padding-top: 1.8rem !important;
}

#estimation-fifth-step ul {
    padding-left: 1.6rem;
    margin-top: 1.6rem;
    font-size: 1.4rem;
    color: #8F9398;
    font-weight: 600;
}

#estimation-fifth-step .left-column > div:first-of-type {
    border-bottom: 1px solid #d5d7dd;
    margin-bottom: 2rem;
}

#estimation-fifth-step ul li i {
    margin-right: .8rem;
    color: #1b9c4e;
    font-size: 1.6rem;
}

.estimation-switch-native-control {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
    overflow: hidden;
    visibility: visible;
}

.estimation-switch-control {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 4rem;
    max-width: 100%;
    height: 4rem;
    padding-top: .4rem;
    padding-bottom: .4rem;
    padding-left: 1.6rem;
    padding-right: 1.6rem;
    border: 1px solid #d5d7dd;
    border-radius: 0.8rem;
    background-color: #ffffff;
    color: #373c47;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 1.5;
}

.estimation-switch-control.active {
    background-color: rgb(0, 116, 193) !important;
    color: rgb(255, 255, 255);
    border-color: rgb(0, 116, 193);
}

label.estimation-switch-item {
    padding: 0 !important;
    width: 100%;
}

.estimation-switch-group > *:not(:first-child) .estimation-switch-control {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-left: none;
}

.step-radio-switch .estimation-switch-control, .step-typology-radio .estimation-switch-control {
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 1.1428571429;
    text-transform: uppercase;
    display: flex;
    justify-content: center;
    align-items: center;
}

.estimation-switch-group > *:not(:last-child) .estimation-switch-control {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

#estimation-fifth-step.estimation-switch-group > *:not(:last-child) {
    margin-right: -1px;
}

#estimation-sixth-step .client-contact-info-container {
    display: flex;
    flex-direction: column;
    width: 60%;
    padding: 2rem;
    padding-top: 3rem;
    border: 2px solid #D1DBF6;
    background-color: #E4E9F9;
    border-radius: 0.8rem;
    gap: 2rem;
}

#estimation-sixth-step .client-contact-info-container label {
    margin-bottom: unset;
}

#estimation-sixth-step .estimation-step-title {
    margin-bottom: 1rem;
}

#estimation-sixth-step > div.left-column > div.left-column-container > p {
    padding-bottom: 1.5rem;
}

.left-column-container {
    display: flex;
    flex-direction: column;
}

#estimation-sixth-step .client-contact-info-container .input-container {
    display: flex;
    border: none;
    justify-content: start;
    padding: unset;
    align-items: center;
    gap: 15px;
    width: 100%;
}

#estimation-sixth-step .client-contact-info-container input[type=checkbox]:checked {
    background-color: #0b77b7;
    border-color: #0b77b7;
    position: relative;
}

#estimation-sixth-step .client-contact-info-container input[type=checkbox]:checked::before {
    content: '\2713';
    color: white;
    font-size: 14px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#estimation-sixth-step .client-contact-info-container input[type=checkbox] {
    min-width: 20px;
    height: 20px;
    width: 20px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    box-sizing: border-box;
    border: 2px solid #4FB177;
    border-radius: 4px;
    background-color: white;
    display: inline-block;
    vertical-align: middle;
    margin: 0;
}

#estimation-sixth-step > div.left-column > div.left-column-container > div > div.client-contact-info-container > span {
    font-weight: 600;
}

#estimation-sixth-step > div.left-column > div.left-column-container > div > div.client-contact-info-container > div > label {
    font-weight: normal;
    line-height: 1.8rem;
    color: #6F7381;
    font-size: 1.4rem;
}

#estimation-sixth-step .country-phone-code {
    min-width: 0;
    border-radius: 0.8rem;
}

#estimation-sixth-step .client-phone-number {
    flex-grow: 1;
    min-width: 0;
    border-radius: 0.8rem;
}

#estimation-sixth-step > div.left-column > div.left-column-container > div {
    padding-bottom: 2.8rem;
}

#estimation-sixth-step .estimation-badge, #estimation-seventh-step .estimation-badge {
    color: white;
    text-transform: uppercase;
    padding: 1.6rem 1.8rem;
}

#estimation-sixth-step .estimation-badge:hover, #estimation-seventh-step .estimation-badge:hover {
    background-color: white !important;
    color: #d82244;
    border: 1px solid #d82244;
    cursor: pointer;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #d5d7dd;
    margin-bottom: 1.8rem;
    padding: 0;
    width: 100%;
}

.agency-container {
    border: 2px solid #d5d7dd;
    border-radius: 0.8rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 3rem 4rem;
    width: 65%;
    margin-bottom: 2rem;
    height: 150px;
}

.input-container:has(input:disabled) {
    background-color: #EEEEEE !important;
}

.agency-container input[type=checkbox] {
    width: 20px;
    height: 20px;
    margin: unset;
    padding: unset;
}

.agency-logo {
    width: 14rem;
}

.agency-container .agency-info {
    display: flex;
    flex-direction: column;
    font-size: 1.4rem;
    color: #3C4451;
}

.agency-container .agency-info .agency-name {
    font-weight: 600;
}

.client-contact-time-container {
    display: flex;
    align-items: center;
    gap: 70px;
    margin-top: 2rem;
    margin-bottom: 6rem;
}

.client-contact-time-container span {
    color: #3C4451;
    font-weight: 600;
}

#estimation-eighth-step .container {
    background-color: #F1F7FD;
    min-width: 100% !important;
}

#estimation-eighth-step .rowheader {
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: start;
    padding: 4rem 25rem 4rem 25rem;
}

#estimation-eighth-step .rowheader h1, #estimation-eighth-step .rowheader h2 {
    color: black !important;
    font-weight: unset;
}

#estimation-eighth-step .rowheader h2 {
    font-size: 1.8rem;
    padding-bottom: unset;
}

#estimation-eighth-step .rowheader h1 {
    font-weight: 500;
    padding: unset;
    text-align: left;
    padding-bottom: 2rem;
}

#estimation-eighth-step .sub-container {
    min-width: 100%;
    padding-right: 25rem;
    padding-left: 25rem;
}

#estimation-eighth-step .sub-container > div {
    border: 1px solid darkgrey;
    min-width: 100%;
    border-radius: 0.8rem;
    background-color: white;
    position: relative;
    height: fit-content;
    margin-bottom: 10rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 5rem;
}

#resultMascote {
    position: absolute;
    width: 40rem;
    top: -24rem;
    right: -5rem;
}

#send-agence-email {
    cursor: pointer;
}

.estimation-final-price-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 3rem 10rem;
    padding-bottom: 2rem;
    position: relative;
}

.estimation-final-price-container div {
    display: flex;
    flex-direction: column;
    justify-content: end;
    align-items: center;
}

.middle-price {
    font-size: 5rem;
    font-weight: 500;
}

.line-container {
    position: relative;
    width: 80%;
    height: 50px;
}

.line {
    width: 100%;
    height: 2px;
    background-color: #ccc;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.icon-circle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #2d7bd6; /* Blue */
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-size: 16px;
    font-weight: bold;
    z-index: 2;
    cursor: pointer;
}

.dot {
    width: 8px;
    height: 8px;
    background-color: #2d7bd6;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.left-dot {
    left: 0;
}

.right-dot {
    right: 0;
}

.estimation-qualification {
    color: #0b77b7 !important;
    background-color: #E4E9F9;
    display: flex;
    padding: 1.5rem 3rem;
    border-radius: 0.8rem;
    margin-bottom: 1.6rem;
}

.click-to-new-estimation {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 3rem 3rem 5rem 3rem;
    font-weight: 500;
}

.click-to-new-estimation a {
    color: #0b77b7 !important;
    text-decoration: underline !important;
    cursor: pointer;
    font-weight: normal;
}

.bold {
    font-weight: 600;
}

.agencies-multi-choice-container {
    display: flex;
    align-items: start;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    width: 100% !important;
    height: 100%;
    padding: 0 3.5rem 1rem 3.5rem;
}

.agencies-multi-choice-container input[type="checkbox"] {
    display: none;
}

.agencies-multi-choice-container label {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    max-width: 360px;
    border: 2px solid #d0d0d0;
    border-radius: 8px;
    text-align: center;
    font-family: Arial, sans-serif;
    cursor: pointer;
    transition: border-color 0.3s, box-shadow 0.3s;
    flex: 30%;
    height: 320px;
    padding: 1rem
}

.agencies-multi-choice-container input[type="checkbox"]:checked + label {
    border-color: #2d7bd6;
    box-shadow: 0 2px 5px rgba(45, 123, 214, 0.5);
}

.agencies-multi-choice-container label img {
    max-width: 120px !important;
    margin-bottom: 10px !important;
    top: unset !important;
    right: unset !important;
    position: relative !important;
}

.agencies-multi-choice-container label h2 {
    font-size: 20px;
    font-weight: bold;
    color: #333;
    margin: 10px 0;
}

.agencies-multi-choice-container label p {
    font-size: 14px;
    color: #555;
    line-height: 1.6;
    margin: 5px 0;
}

.agencies-multi-choice-container label .button {
    background-color: #E4E9F9;
    color: #0b77b7;
    border-radius: 5px;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
    display: inline-block;
    margin-top: 10px;
}

.agencies-multi-choice-container input[type="checkbox"]:checked + label .button {
    background-color: #2d7bd6;
    color: #fff;
}


@media (min-width: 48em) {
    .progress-title {
        font-size: 2.4rem;
        line-height: 1.3333333333;
    }

    .progress-step-final {
        font-size: 2.4rem;
        line-height: 1.3333333333;
    }

    .step-radio-switch .estimation-switch {
        width: auto;
        margin-right: .8rem;
        margin-bottom: 0;
    }

}

H1 {
    vertical-align: middle;
    text-transform: none;
    font-size: 28px;
    padding: 0 20px;
    font-weight: 500;
}


.main-container {
    flex-grow: 1;
    min-width: 100%;
}

.nd-incremental__text {
    border: unset !important;
    width: 5.2rem !important;
    padding-right: unset !important;
    padding-left: unset !important;
    padding: 0 1.6rem;
    font-family: Inter, Sans-Serif;
    text-align: center;
    white-space: nowrap;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

.step__formBlock--inline {
    flex-direction: row;
    align-items: center;
    justify-content: start;
}

.nd-select__control {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 100%;
    height: 4rem;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 1.6rem;
    padding-right: calc(1.6rem / 2);
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    overflow: hidden;
    color: currentColor;
    background-color: #ffffff;
    border: 1px solid #d5d7dd;
    border-radius: .8rem;
}

:not(.is-open) > .nd-select__control:hover {
    border-color: #d5d7dd;
}


.ui-menu-item {
    width: 100%;
    padding: 1rem;
}

.pac-item.ui-menu-item-wrapper {
    width: 100%;
}

.pac-item.ui-menu-item-wrapper.ui-state-active {
    background-color: #0b77b7;
!important;
    color: #fff !important;
}

.pac-item.ui-menu-item-wrapper:hover {
    background-color: #0b77b7;
!important;
    color: #fff !important;
}

.ui-menu.ui-widget.ui-widget-content.ui-autocomplete.ui-front {
    border-radius: 0.8rem;
    background-color: #fff;
    z-index: 1000;
    margin-top: 2px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

footer {
    padding: 1.6rem 1.6rem;
    color: white;
    background-color: #3390cd;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0;
    width: 100%;
}

footer div {
    display: flex;
    align-items: center;
    justify-content: center;
}

.footerDisclaimer {
    display: flex;
    gap: 5px;
    align-items: center;
}

.footerDisclaimer li {
    color: white !important;
}

footer a {
    text-decoration: none;
    color: white !important;
}

footer svg {
    font-size: 2.4rem;
    display: inline-block;
    color: white;
    flex-shrink: 0;
    width: 1em;
    height: 1em;
    aspect-ratio: 1;
    fill: #fff !important;
    fill-rule: evenodd;
    clip-rule: evenodd;
    vector-effect: non-scaling-stroke;
    shape-rendering: geometricprecision;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

#estimation-main > footer > div:nth-child(2) > div {
    display: flex;
    gap: 5px;
    align-items: center;
}

.required-input {
    border: 1px solid #d82244 !important;
}

.required-input-message, .map-error-container, .error {
    color: #d82244;
    padding-right: 1rem;
    display: none;
}

.error-container {
    margin-top: 4rem;
    display: flex;
    gap: 5px;
    color: #d82244;
    align-items: center;
    display: none;
}

input:-webkit-autofill {
    background-color: unset !important; /* Light cyan background */
    color: unset !important; /* Black text color */
    border: unset !important; /* Border color */
}

.select-value-hidden {
    visibility: hidden;
    position: absolute;
    width: 1px;
    height: 1px;
}

.pac-item {
    background-color: #fff;
    border-bottom: 1px solid #ddd;
    cursor: pointer;
}

.pac-item:hover {
    background-color: #0b77b7;
    color: white;
}

.pac-item:hover .pac-item-query {
    color: #fff;
    font-style: italic;
}

.pac-item .pac-icon {
    color: #0b77b7;
}

.pac-item-query {
    color: #0b77b7;
    font-weight: bold;
}

.next-step-mobile {
    display: none;
}

.loader {
    display: none;
    font-size: 4px;
    margin: 50px auto;
    text-indent: -9999em;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #ffffff;
    background: -moz-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
    background: -webkit-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
    background: -o-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
    background: -ms-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
    background: linear-gradient(to right, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
    position: relative;
    -webkit-animation: load3 1.4s infinite linear;
    animation: load3 1.4s infinite linear;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
}

.loader:before {
    width: 10px;
    height: 10px;
    background: #ffffff;
    border-radius: 100% 0 0 0;
    position: absolute;
    top: 0;
    left: 0;
    content: '';
}

.loader:after {
    background: #d82244;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    content: '';
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

@-webkit-keyframes load3 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes load3 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}