/* fonts */
/* #region */
@font-face {
    font-family: SagoMiniRounded;
    src: url("/fonts/SagoMiniRounded-Regular_v2.woff2") format("woff");
    -webkit-font-smoothing: antialiased;
}

@font-face {
    font-family: SagoMiniRounded-Bold;
    src: url("/fonts/SagoMiniRounded-Bold_v2.woff2") format("woff");
    font-weight: bold;
    -webkit-font-smoothing: antialiased;
}
/* #endregion */

.font-bold {
    font-family: SagoMiniRounded-Bold;
}

/*  mobile styles */
@media screen and (min-width: 320px) {

    /* general */

    .font-bold {
        font-weight: bold;
    }

    body {
        padding: 35px 35px;
    }

    .info-button {
        text-align: right;
        height: 28px;
    }

    .info-button:hover {
        cursor: pointer;
    }

    .content {
        max-width: 320px;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }

    .main-image {
        height: 110px;
    }

    .logo-image {
        height: 65px;
    }

    .secondary-image {
        padding-top: 30px;
        height: 250px;
    }

    .title {
        margin-top: 30px;
        font: 26px SagoMiniRounded-Bold;
        font-weight: 700;
        text-align: center;
        line-height: 130%;
    }

    .title-secondary {
        margin-top: 40px;
        font: bold 22px SagoMiniRounded-Bold;
        text-align: center;
        line-height: 1.2;
    }

    .steps {
        display: block;
        color: #55504f;
        font-size: 16px;
        font-weight: normal;
        padding: 5px 0px 15px;
    }

    .message {
        margin-top: 10px;
        font: 20px SagoMiniRounded;
        line-height: 130%;
        color: #635F5E;
        text-align: center;
    }

    .message b {
        font-weight: bold;
        font-family: SagoMiniRounded-Bold;
    }

    form {
        margin-top: 20px;
        text-align: center;
    }

    .input-wrapper {
        margin-top: 10px;
        position: relative;
    }

    .form-input, .form-input:focus {
        width: 100%;
        box-sizing: border-box;
        height: 50px;
        padding: 0 10px 0 10px;
        border: 0;
        border-bottom: 1px solid #D8D7D7;
        border-radius: 0;
        outline: 0;
        color: #635F5E;
        font: 20px SagoMiniRounded;
        line-height: 130%;
    }

    .form-input:focus, .input-focus {
        border-color: #B1AFAE;
    }

    .form-input:invalid, .invalid-input {
        color: #FF593E;
        border-color: #FF593E;
    }

    .form-input::placeholder, .form-input:focus::placeholder {
        color: #B1AFAE;
        font: 20px SagoMiniRounded;
        line-height: 130%;
        opacity: 1; /* Firefox */
    }

    .form-input:-ms-input-placeholder { /* Internet explorer */
        color: #B1AFAE;
        font: 20px SagoMiniRounded;
        line-height: 130%;
    }

    .form-input::-ms-input-placeholder { /* MS Edge */
        color: #B1AFAE;
        font: 20px SagoMiniRounded;
        line-height: 130%;
    }

    .form-input:invalid::placeholder, .invalid-input::placeholder{
        color: #FFAC9E;
        font: 20px SagoMiniRounded;
        opacity: 1; /* Firefox */
    }
    
    .form-input:invalid:-ms-input-placeholder, .invalid-input:invalid:-ms-input-placeholder { /* Internet explorer */
        color: #FFAC9E;
        font: 20px SagoMiniRounded;
    }

    .form-input:invalid::-ms-input-placeholder, .invalid-input:invalid::-ms-input-placeholder  { /* MS Edge */
        color: #FFAC9E;
        font: 20px SagoMiniRounded;
    }

    .input-error-message {
        font-family: 'SagoMiniRounded';
        margin: 4px 10px;
        color: #FF593E;
        font-size: 14px;
        position: relative;
        text-align: start;
    }

    .password-toggle {
        position: absolute;
        right: 10px;
        margin-top: auto;
        margin-bottom: auto;
        top: 0;
        bottom: 0;
        height: 20px;
        color: #FFFFFF;
        background-color: #FFFFFF;
        cursor: pointer;
        font: 16px SagoMiniRounded;
        line-height: 130%;
        border: 0;
        outline: none;
        padding: 0;
        outline: 0;
    }

    .form-input:focus + .password-toggle{
        color: #8A8786;
    }

    .form-input + .password-toggle:focus {
        color: #8A8786;
    }

    .form-checkbox {
        margin-top: 30px;
        display: flex;
        justify-content: center;
    }

    .form-checkbox input {
        padding: 0;
        height: initial;
        width: initial;
        margin-bottom: 0;
        display: none;
        cursor: pointer;
    }

    .form-checkbox label {
        cursor: pointer;
        font-size: 14px;
        line-height: 130%;
        font-family: 'SagoMiniRounded';
        color: #8A8786;
        display: flex;
        align-items: center;
    }

    .form-checkbox label:before {
        content:'';
        display: inline-block;
        width: 24px;
        height: 24px;
        margin-right: 10px;
        border: 1px #B1AFAE solid;
        border-radius: 5px;
    }

    .form-checkbox input:checked + label:before {
        background-size: 15px;
        background-repeat: no-repeat;
        background-position: center;
        background-image: url('/images/bundles/icons/icon_checkmark.svg');
    }

    .submit-btn {
        position: relative;
        margin-top: 30px;
        border: 0;
        border-radius: 30px;
        height: 50px;
        color: white;
        font-size: 20px;
        font-family: SagoMiniRounded-Bold;
        padding: 0 25px 0 25px;
        outline: 0;
        cursor: pointer;
    }

    .submit-btn.outline-btn {
        font-family: SagoMiniRounded;
    }

    .submit-btn::after{
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        content: "";
        border-radius: 25px;
        height: 50px;
        background-color: black;
        opacity: 0;
    }

    .submit-btn .primary-subtext {
        font: 20px SagoMiniRounded;
        font-weight: normal;
        color: rgba(255, 255, 255, 0.60);  
        margin-left: 10px;
    }

    .submit-btn:hover:after{
        opacity: .05;
    }

    .submit-btn:active:after{
        opacity: .05;
    }

    .secondary-button {
        display: inline-block;
        margin-top: 25px;
        background: #FFFFFF;
        border: 1px solid #635F5E;
        border-radius: 30px;
        padding: 12px 25px;
        text-align: center;
        color: #635F5E;
        font-family: SagoMiniRounded;
        font-size: 20px;
        line-height: 1.3;
        text-decoration: none;
        outline: 0;
        cursor: pointer;
    }

    .secondary-button:hover, .secondary-button:focus, .secondary-button:active  {
        background: #635F5E;
        color: #FFFFFF;
    }

    footer {
        margin-top: 30px;
    }

    footer p {
        margin-top: 15px;
        font: 16px SagoMiniRounded;
        line-height: 1.3;
        color: #635F5E;
        text-align: center;
    }

    footer b {
        font-family: SagoMiniRounded-Bold;
        font-weight: bold;
    }

    .modal-overlay {
        display: none;
        position: fixed;
        z-index: 1;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,0.4);
    }

    .modal-wrapper {
        height: 100%;
        max-height: 750px;
        display: flex;
        align-items: center;
    }

    .modal-container {
        position: relative;
        width: 280px;
        min-height: 100px;
        margin: 0 auto;
        background-color: #FFFFFF;
        border-radius: 18px;
        padding: 35px 20px;
        text-align: center;
    }

    .modal-image {
        height: 70px;
        margin-bottom: 25px;
    }

    .modal-logo-image {
        height: 40px;
        margin-bottom: 25px;
    }

    .modal-title{
        font: 26px SagoMiniRounded-Bold;
        font-weight: 700;
        text-align: center;
        line-height: 130%;
        margin-bottom: 10px;
        font: 26px SagoMiniRounded-Bold;
        line-height: 130%;
    }

    .modal-container .modal-message{
        color: #635F5E;
        font: 18px SagoMiniRounded;
        line-height: 130%;
    }

    .modal-container b{
        font-family: SagoMiniRounded-Bold;
    }

    .modal-button {
        display: inline-block;
        position: relative;
        text-decoration: none;
        color: #fff;
        padding: 12px 25px;
        margin-top: 25px;
        font:  20px SagoMiniRounded-Bold;
        cursor: pointer;
        border: 0;
        border-radius: 30px;
        outline: 0;
    }

    .modal-button:hover, .modal-button:focus, .modal-button:active  {
        color: #fff!important;
        outline: none;
        outline-width: 0;
        text-decoration: none;
    }

    .modal-button::after{
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        content: "";
        border-radius: 30px;
        background-color: black;
        opacity: 0;
    }

    .modal-button:hover:after{
        opacity: .1;
    }

    .modal-button:active:after{
        opacity: .1;
    }

    .modal-container .modal-footer{
        margin-top: 30px;
        color: #635F5E;
        font: 16px SagoMiniRounded;
        line-height: 130%;
    }

    .close-button{
        position: absolute;
        top: -15px;
        right: -15px;
        height: 40px;
        width: 40px;
        border-color: #ffffff;
        border-radius: 100%;
        border-style: solid;
        border-width: 2px;
        outline: 0;
        cursor: pointer;
        padding: 0;
    }

    .close-button svg{
        height: 16px;
        filter: brightness(0) invert(1);
    }

    .close-button:active{
        background-color: #ffffff;
        border: 0;
    }

    .close-button:active svg{
        filter: unset;
    }

}
/* tablets and desktops - only sizes change 150% */
@media screen and (min-width: 768px) {
    body {
        padding: 50px 50px;
    }

    .content {
        max-width: 420px;
    }

    .info-button {
        position: absolute;
        top: 50px;
        right: 50px;
    }

    .modal-container {
        width: 380px;
    }
}

/* TECH DEBT: Refactor, File separation */
/* screen highlight colors: These are the colors used as base*/
/* #region */

/* PLAYFUL BLUE */
.color-playful-blue {
    color: #05B2E9;
}

.caret-playful-blue {
    caret-color: #05B2E9;
}

.background-playful-blue {
    background-color: #05B2E9;
}

.fill-playful-blue {
    fill: #05B2E9;
}

/* PLAYFUL PINK */
.color-playful-pink {
    color: #FF97BC;
}

.caret-playful-pink {
    caret-color: #FF97BC;
}

.background-playful-pink {
    background-color: #FF97BC;
}

.fill-playful-pink {
    fill: #FF97BC;
}

/* PLAYFUL GREEN */
.color-playful-green {
    color: #6FCB37;
}

.caret-playful-green {
    caret-color: #6FCB37;
}

.background-playful-green {
    background-color: #6FCB37;
}

.fill-playful-green {
    fill: #6FCB37;
}

/* PLAYFUL ORANGE */
.color-playful-orange {
    color: #FF8450;
}

.caret-playful-orange {
    caret-color: #FF8450;
}

.background-playful-orange {
    background-color: #FF8450;
}

.fill-playful-orange {
    fill: #FF8450;
}

/* PLAYFUL TEAL */
.color-playful-teal {
    color: #51BEB5;
}

.caret-playful-teal {
    caret-color: #51BEB5;
}

.background-playful-teal {
    background-color: #51BEB5;
}

.fill-playful-teal {
    fill: #51BEB5;
}

/* PLAYFUL YELLOW */
.color-playful-yellow {
    color: #FFB800;
}

.caret-playful-yellow {
    caret-color: #FFB800;
}

.background-playful-yellow {
    background-color: #FFB800;
}

.fill-playful-yellow {
    fill: #FFB800;
}

/* #endregion */




/* OLD COLORS ALPHABETICALLY ORDERED  */
/* #region */

/* FIRST WORDS BLUE */
.background-first-words-blue {
    background-color: #3aa5b7;
}
.color-first-words-blue {
    color: #3aa5b7;
}
.caret-first-words-blue {
    caret-color: #3aa5b7;
}

.fill-first-words-blue {
    fill: #3aa5b7;
}

/* GREY */
.color-grey {
    color: #635F5E;
}
.color-lightgrey {
    color: #8A8786;
}

.border-grey {
    border: 1px solid #635F5E;
}

/* GREEN */
.background-green {
    background-color: #72BE44;
}
.color-green {
    color: #72BE44;
}
.caret-green {
    caret-color: #72BE44;
}
.fill-green {
    fill: #72BE44;
}

/* ORANGE */
.background-orange {
    background-color: #FC7A38;
}
.color-orange {
    color: #FC7A38;
}
.caret-orange {
    caret-color: #FC7A38;
}
.fill-orange {
    fill: #FC7A38;
}

/* PINK */
.background-pink {
    background-color: #FC69C3;
}
.color-pink {
    color: #FC69C3;
}
.caret-pink {
    caret-color: #FC69C3;
}
.fill-pink {
    fill: #FC69C3;
}

/* TEAL */
.background-teal {
    background-color: #51BEB5;
}
.color-teal {
    color: #51BEB5;
}
.caret-teal {
    caret-color: #51BEB5;
}
.fill-teal {
    fill: #51BEB5;
}


/* YELLOW */
.background-yellow {
    background-color: #F4A01A;
}
.color-yellow {
    color: #F4A01A;
}
.caret-yellow {
    caret-color: #F4A01A;
}
.fill-yellow {
    fill: #F4A01A;
}

/* WHITE */
.background-white {
    background-color: #fff;
}

/* PURPLE */
.background-purple {
    background-color: #BB70BA;
}
.color-purple {
    color: #BB70BA;
}
.fill-purple {
    fill: #BB70BA;
}


/* #endregion */

.loader-overlay {
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display:flex;
    background-color:#FFFFFF;
}

.loader {
    position: relative;
    margin:auto;
}

.absolute,
.position-absolute {
    position: absolute
}
.fill {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 76px;
    height: 76px;
}

.top {
    top: 0
}

.left {
    left: 0
}

.right {
    right: 0
}

.bottom {
    bottom: 0
}

.text-decoration-none {
    text-decoration: none;
}

.bg-color-medium {
    background-color: #dddcdc
}
.bg-color-medium-light {
    background-color: #efefef
}
.border-radius-full,
.radius-full {
    border-radius: 100%
}

.anim-loader-circle {
    animation-duration: 700ms;
    animation-iteration-count: infinite;
    animation-timing-function: step-end
}

.anim-loader-circle.circle-1 {
    animation-name: circle1
}

.anim-loader-circle.circle-2 {
    animation-name: circle2
}

.anim-loader-circle.circle-3 {
    animation-name: circle3
}

.anim-loader-circle.circle-4 {
    animation-name: circle4
}

.anim-loader-circle.circle-5 {
    animation-name: circle5
}

.anim-loader-circle.circle-6 {
    animation-name: circle6
}

.anim-loader-circle.circle-7 {
    animation-name: circle7
}

.anim-loader-circle.circle-8 {
    animation-name: circle8
}

.width-1_4 {
    width: 20px;
}

.padding-top-1_4 {
    padding-top: 20px;
}

.rotate-neg-45deg {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg)
}

.muted-text {
    color: #8A8786;
    line-height: 1.3;
}

@keyframes circle1 {
    0%,
    6.25% {
        background-color: #ee4d85
    }
    12.5% {
        background-color: #dddcdc
    }
}

@keyframes circle2 {
    12.5%,
    18.75% {
        background-color: #be1e2d
    }
    25% {
        background-color: #dddcdc
    }
}

@keyframes circle3 {
    25%,
    31.25% {
        background-color: #e0128d
    }
    37.5% {
        background-color: #dddcdc
    }
}

@keyframes circle4 {
    37.5%,
    43.75% {
        background-color: #fc7a38
    }
    50% {
        background-color: #dddcdc
    }
}

@keyframes circle5 {
    50%,
    56.25% {
        background-color: #faa61a
    }
    62.5% {
        background-color: #dddcdc
    }
}

@keyframes circle6 {
    62.5%,
    68.75% {
        background-color: #72be44
    }
    75% {
        background-color: #dddcdc
    }
}

@keyframes circle7 {
    75%,
    81.25% {
        background-color: #1da0df
    }
    87.5% {
        background-color: #dddcdc
    }
}

@keyframes circle8 {
    87.5%,
    93.75% {
        background-color: #9c158c
    }
    to {
        background-color: #dddcdc
    }
}