.new_s_sign_in_2025 {

    @media only screen and (max-width: 600px) {

        .log-in-page-desktop {
            display: none;
        }

        .log-in-page-mobile {
            background-color: #edeffa;
            display: flex;
            flex-direction: row;
            justify-content: center;
            width: 100%;
        }

        .log-in-page-mobile .div {
            background-color: #edeffa;
            width: 100%;
            height: 100vh;
            position: relative;
        }

        .log-in-page-mobile .sign-in {
            display: flex;
            flex-direction: column;
            width: 335px;
            align-items: center;
            gap: 32px;
            padding: 24px 20px;
            position: absolute;
            top: 206px;
            left: 20px;
            background-color: var(--foundationwhite);
            border-radius: 8px;
        }

        .log-in-page-mobile .sign-in-content {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 20px;
            position: relative;
            align-self: stretch;
            width: 100%;
            flex: 0 0 auto;
        }

        .log-in-page-mobile .text {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
            position: relative;
            align-self: stretch;
            width: 100%;
            flex: 0 0 auto;
        }

        .log-in-page-mobile .text-wrapper {
            position: relative;
            align-self: stretch;
            margin-top: -1.00px;
            font-family: "DM Sans-Bold", Helvetica;
            font-weight: 700;
            color: var(--foundation-bluedarker);
            font-size: 24px;
            text-align: center;
            letter-spacing: 0;
            line-height: 31.7px;
        }

        .log-in-page-mobile .p {
            position: relative;
            align-self: stretch;
            font-family: "Inter-Regular", Helvetica;
            font-weight: 400;
            color: var(--foundation-blue-greynormal);
            font-size: 14px;
            text-align: center;
            letter-spacing: 0;
            line-height: 16.8px;
        }

        .log-in-page-mobile .info {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 24px;
            position: relative;
            align-self: stretch;
            width: 100%;
            flex: 0 0 auto;
        }

        .log-in-page-mobile .inputs {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 12px;
            position: relative;
            align-self: stretch;
            width: 100%;
            flex: 0 0 auto;
        }

        .log-in-page-mobile .input {
            display: flex;
            height: 56px;
            align-items: center;
            gap: 12px;
            padding: 8px 16px;
            position: relative;
            align-self: stretch;
            width: 100%;
            background-color: var(--text-color100);
            border-radius: 4px;
            border: 1px solid;
            border-color: #cbd5e0;
        }

        .log-in-page-mobile .label {
            display: inline-flex;
            align-items: flex-start;
            gap: 12px;
            position: relative;
            flex: 0 0 auto;
        }

        .log-in-page-mobile .label-2 {
            position: relative;
            width: fit-content;
            margin-top: -1.00px;
            opacity: 0.5;
            font-family: "Inter-Regular", Helvetica;
            font-weight: 400;
            color: var(--foundation-blue-greynormal);
            font-size: 16px;
            text-align: center;
            letter-spacing: 0;
            line-height: 19.2px;
            white-space: nowrap;
        }

        .log-in-page-mobile .text-wrapper-2 {
            position: relative;
            width: fit-content;
            opacity: 0.5;
            font-family: "Inter-Regular", Helvetica;
            font-weight: 400;
            color: var(--foundation-blue-greynormal);
            font-size: 16px;
            text-align: center;
            letter-spacing: 0;
            line-height: 19.2px;
            white-space: nowrap;
            width: 100%;
        }

        .log-in-page-mobile .footer {
            display: flex;
            align-items: center;
            gap: 51px;
            position: relative;
            align-self: stretch;
            width: 100%;
            flex: 0 0 auto;
            background-color: transparent;
        }

        .log-in-page-mobile .remember-me {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            position: relative;
            flex: 0 0 auto;
        }

        .log-in-page-mobile .checkbox {
            position: relative;
            width: 20px;
            height: 20px;
            background-color: var(--foundation-bluenormal);
            border-radius: 4px;
        }

        .log-in-page-mobile .check {
            position: absolute;
            width: 13px;
            height: 13px;
            top: 3px;
            left: 3px;
        }

        .log-in-page-mobile .text-wrapper-3 {
            position: relative;
            width: fit-content;
            margin-top: -0.50px;
            font-family: "Inter-Regular", Helvetica;
            font-weight: 400;
            color: var(--foundation-blue-greynormal);
            font-size: 16px;
            text-align: center;
            letter-spacing: 0;
            line-height: 19.2px;
            white-space: nowrap;
            width: 90%;
        }

        .log-in-page-mobile .log-in {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 24px;
            position: relative;
            align-self: stretch;
            width: 100%;
            flex: 0 0 auto;
        }

        .log-in-page-mobile .button-text {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 12px 20px;
            position: relative;
            align-self: stretch;
            width: 100%;
            flex: 0 0 auto;
            background-color: var(--foundation-bluenormal);
            border-radius: 200px;
            cursor: pointer;
        }

        .log-in-page-mobile .div-wrapper {
            display: inline-flex;
            height: 24px;
            align-items: center;
            justify-content: center;
            padding: 0px 8px;
            position: relative;
            flex: 0 0 auto;
        }

        .log-in-page-mobile .text-2 {
            position: relative;
            width: fit-content;
            font-family: var(--button-base-bold-font-family);
            font-weight: var(--button-base-bold-font-weight);
            color: var(--foundationwhite);
            font-size: var(--button-base-bold-font-size);
            letter-spacing: var(--button-base-bold-letter-spacing);
            line-height: var(--button-base-bold-line-height);
            white-space: nowrap;
            font-style: var(--button-base-bold-font-style);
            
        }

        .log-in-page-mobile .create-account {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 8px;
            position: relative;
            align-self: stretch;
            width: 100%;
            flex: 0 0 auto;
        }

        .log-in-page-mobile .text-wrapper-4 {
            position: relative;
            align-self: stretch;
            margin-top: -1.00px;
            font-family: "Inter-Regular", Helvetica;
            font-weight: 400;
            color: var(--foundation-blue-greynormal);
            font-size: 16px;
            text-align: center;
            letter-spacing: 0;
            line-height: 19.2px;
        }

        .log-in-page-mobile .text-wrapper-5 {
            position: relative;
            align-self: stretch;
            font-family: "Inter-Bold", Helvetica;
            font-weight: 700;
            color: var(--foundation-bluenormal);
            font-size: 16px;
            text-align: center;
            letter-spacing: 0;
            line-height: 21.1px;
            text-decoration: underline;
            cursor: pointer;
        }

        .log-in-page-desktop .text-wrapper-5_v2 {
            position: relative;
            align-self: stretch;
            font-family: "Inter-Bold", Helvetica;
            font-weight: 700;
            color: var(--foundation-bluenormal);
            font-size: 16px;
            text-align: center;
            letter-spacing: 0;
            line-height: 21.1px;
            text-decoration: underline;
            cursor: pointer;
          }


        .log-in-page-mobile .logo-mysy {
            display: inline-flex;
            flex-direction: column;
            height: 56px;
            align-items: flex-start;
            gap: 4.3px;
            position: absolute;
            top: 126px;
            left: 129px;
        }

        .log-in-page-mobile .logo-mysy-2 {
            position: relative;
            width: 116.08px;
            height: 38.69px;
        }

        .log-in-page-mobile .overlap {
            position: absolute;
            width: 4px;
            height: 9px;
            top: -1195px;
            left: -1669px;
        }

        .log-in-page-mobile .vector {
            position: absolute;
            width: 4px;
            height: 4px;
            top: 0;
            left: 0;
        }

        .log-in-page-mobile .img {
            height: 6px;
            position: absolute;
            width: 3px;
            top: 0;
            left: 0;
        }

        .log-in-page-mobile .vector-2 {
            height: 9px;
            position: absolute;
            width: 3px;
            top: 0;
            left: 0;
        }

        .log-in-page-mobile .overlap-group {
            position: absolute;
            width: 116px;
            height: 39px;
            top: 0;
            left: 0;
        }

        .log-in-page-mobile .union {
            position: absolute;
            width: 107px;
            height: 33px;
            top: 0;
            left: 0;
        }

        .log-in-page-mobile .union-2 {
            width: 107px;
            height: 21px;
            top: 12px;
            position: absolute;
            left: 0;
        }

        .log-in-page-mobile .union-3 {
            width: 116px;
            height: 23px;
            top: 16px;
            position: absolute;
            left: 0;
        }

        .log-in-page-mobile .text-wrapper-6 {
            position: relative;
            width: fit-content;
            margin-bottom: -0.92px;
            font-family: "DM Sans-Black", Helvetica;
            font-weight: 900;
            color: var(--foundation-greendarker);
            font-size: 11.2px;
            letter-spacing: 8.96px;
            line-height: normal;
        }

        .log-in-page-mobile .back {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            position: absolute;
            top: 70px;
            left: 20px;
        }

        .log-in-page-mobile .line-arrow-left {
            position: relative;
            width: 24px;
            height: 24px;
        }

        .log-in-page-mobile .text-wrapper-7 {
            position: relative;
            width: fit-content;
            margin-top: -1.00px;
            font-family: "Inter-Medium", Helvetica;
            font-weight: 500;
            color: var(--foundation-bluedarker);
            font-size: 16px;
            letter-spacing: 0;
            line-height: 24px;
            white-space: nowrap;
            cursor: pointer;
        }

        .log-in-page-mobile .status-bar-mini {
            position: fixed;
            width: 375px;
            height: 50px;
            top: 0;
            left: 0;
        }

        .log-in-page-mobile .status-mini {
            position: absolute;
            width: 68px;
            height: 13px;
            top: 21px;
            left: 296px;
        }

        .log-in-page-mobile .battery-mini {
            position: absolute;
            width: 23px;
            height: 11px;
            top: 1px;
            left: 45px;
        }

        .log-in-page-mobile .capacity-wrapper {
            position: absolute;
            width: 21px;
            height: 11px;
            top: 0;
            left: 0;
            background-image: url(./../../../public/img/border.svg);
            background-size: 100% 100%;
        }

        .log-in-page-mobile .capacity {
            position: relative;
            width: 17px;
            height: 7px;
            top: 2px;
            left: 2px;
            background-color: #000000;
            border-radius: 1.33px;
        }

        .log-in-page-mobile .cap {
            position: absolute;
            width: 1px;
            height: 4px;
            top: 4px;
            left: 22px;
        }

        .log-in-page-mobile .wifi {
            position: absolute;
            width: 15px;
            height: 11px;
            top: 1px;
            left: 24px;
        }

        .log-in-page-mobile .cellular {
            position: absolute;
            width: 17px;
            height: 11px;
            top: 1px;
            left: 2px;
        }

        .log-in-page-mobile .time {
            position: absolute;
            height: 18px;
            top: 18px;
            left: 27px;
            font-family: "SF Pro Text-Semibold", Helvetica;
            font-weight: 400;
            color: #000000;
            font-size: 15px;
            text-align: center;
            letter-spacing: -0.28px;
            line-height: normal;
            white-space: nowrap;
        }

        .log-in-page-mobile .URL-bar-scroll-mini {
            position: fixed;
            width: 100%;
            height: 52px;
            top: 848px;
            left: 0;
            background-color: var(--browser-uidark-bg);
            box-shadow: var(--bottom-bar-dark);
            backdrop-filter: blur(20px) brightness(100%);
            -webkit-backdrop-filter: blur(20px) brightness(100%);
        }

        .log-in-page-mobile .home {
            position: absolute;
            width: 133px;
            height: 5px;
            top: 40px;
            left: 121px;
            background-color: #ffffff33;
            border-radius: 4px;
        }

        .log-in-page-mobile .domain {
            display: inline-flex;
            align-items: center;
            gap: 3px;
            position: absolute;
            top: 12px;
            left: 136px;
        }

        .log-in-page-mobile .trust {
            position: relative;
            width: 6.23px;
            height: 9.06px;
        }

        .log-in-page-mobile .domain-2 {
            position: relative;
            width: fit-content;
            margin-top: -1.00px;
            font-family: "SF Pro Display-Regular", Helvetica;
            font-weight: 400;
            color: #ffffff;
            font-size: 12.7px;
            letter-spacing: 0.13px;
            line-height: normal;
            white-space: nowrap;
        }
    }


    @media only screen and (min-width: 601px) and (max-width: 991px) {
        

        * {
            -webkit-font-smoothing: antialiased;
            box-sizing: border-box;
        }

        /* a blue color as a generic focus style */
        button:focus-visible {
            outline: 2px solid #4a90e2 !important;
            outline: -webkit-focus-ring-color auto 5px !important;
        }

        a {
            text-decoration: none;
        }

        .log-in-page-mobile {
            display: none;
        }

        .log-in-page-desktop {
            background-color: #edeffa;
            display: flex;
            flex-direction: row;
            justify-content: center;
            width: 100%;
        }

        .log-in-page-desktop .div {
            background-color: #edeffa;
            width: 1440px;
            height: 100vh;
            position: relative;
        }

        .log-in-page-desktop .back {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            position: absolute;
            top: 40px;
            left: 40px;
        }

        .log-in-page-desktop .line-arrow-left {
            position: relative;
            width: 24px;
            height: 24px;
        }

        .log-in-page-desktop .text-wrapper {
            position: relative;
            width: fit-content;
            margin-top: -1.00px;
            font-family: "Inter-Medium", Helvetica;
            font-weight: 500;
            color: var(--foundation-bluedarker);
            font-size: 16px;
            letter-spacing: 0;
            line-height: 24px;
            white-space: nowrap;
        }

        .log-in-page-desktop .sign-in {
            display: flex;
            flex-direction: column;
            width: 60%;
            align-items: center;
            gap: 32px;
            padding: 24px;
            position: absolute;
            top: 233px;
            left: 20%;
            background-color: var(--foundationwhite);
            border-radius: 8px;
        }

        .log-in-page-desktop .sign-in-content {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 20px;
            position: relative;
            align-self: stretch;
            width: 100%;
            flex: 0 0 auto;
        }

        .log-in-page-desktop .text {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
            position: relative;
            align-self: stretch;
            width: 100%;
            flex: 0 0 auto;
        }

        .log-in-page-desktop .text-wrapper-2 {
            position: relative;
            align-self: stretch;
            margin-top: -1.00px;
            font-family: "DM Sans-Bold", Helvetica;
            font-weight: 700;
            color: var(--foundation-bluedarker);
            font-size: 24px;
            text-align: center;
            letter-spacing: 0;
            line-height: 31.7px;
        }

        .log-in-page-desktop .p {
            position: relative;
            align-self: stretch;
            font-family: "Inter-Regular", Helvetica;
            font-weight: 400;
            color: var(--foundation-blue-greynormal);
            font-size: 14px;
            text-align: center;
            letter-spacing: 0;
            line-height: 16.8px;
        }

        .log-in-page-desktop .info {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 24px;
            position: relative;
            align-self: stretch;
            width: 100%;
            flex: 0 0 auto;
        }

        .log-in-page-desktop .inputs {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 12px;
            position: relative;
            align-self: stretch;
            width: 100%;
            flex: 0 0 auto;
        }

        .log-in-page-desktop .input {
            display: flex;
            height: 56px;
            align-items: center;
            gap: 12px;
            padding: 8px 16px;
            position: relative;
            align-self: stretch;
            width: 100%;
            background-color: var(--text-color100);
            border-radius: 4px;
            border: 1px solid;
            border-color: #cbd5e0;
        }

        .log-in-page-desktop .text-wrapper-3 {
            position: relative;
            width: fit-content;
            opacity: 0.5;
            font-family: "Inter-Regular", Helvetica;
            font-weight: 400;
            color: var(--foundation-blue-greynormal);
            font-size: 16px;
            text-align: center;
            letter-spacing: 0;
            line-height: 19.2px;
            white-space: nowrap;
            width: 90%;
        }

        .log-in-page-desktop .footer {
            display: flex;
            align-items: center;
            gap: 51px;
            position: relative;
            align-self: stretch;
            width: 100%;
            flex: 0 0 auto;
            background-color: transparent;
            padding: 0px;
        }

        .log-in-page-desktop .remember-me {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            position: relative;
            flex: 0 0 auto;
        }

        .log-in-page-desktop .checkbox {
            position: relative;
            width: 20px;
            height: 20px;
            background-color: var(--foundation-bluenormal);
            border-radius: 4px;
        }

        .log-in-page-desktop .check {
            position: absolute;
            width: 13px;
            height: 13px;
            top: 3px;
            left: 3px;
        }

        .log-in-page-desktop .text-wrapper-4 {
            position: relative;
            width: fit-content;
            margin-top: -0.50px;
            font-family: "Inter-Regular", Helvetica;
            font-weight: 400;
            color: var(--foundation-blue-greynormal);
            font-size: 16px;
            text-align: center;
            letter-spacing: 0;
            line-height: 19.2px;
            white-space: nowrap;
        }

        .log-in-page-desktop .text-wrapper-5 {
            position: absolute;
            height: 19px;
            top: 0;
            left: 20px;
            font-family: "Inter-Regular", Helvetica;
            font-weight: 400;
            color: var(--foundation-bluenormal);
            font-size: 16px;
            text-align: center;
            letter-spacing: 0;
            line-height: 19.2px;
            white-space: nowrap;
            cursor: pointer;
        }

        .log-in-page-desktop .text-wrapper-5_v2 {
            //  position: absolute;
              height: 19px;
              top: 0;
            //  left: 339px;
              font-family: "Inter-Regular", Helvetica;
              font-weight: 400;
              color: var(--foundation-bluenormal);
              font-size: 16px;
              text-align: center;
              letter-spacing: 0;
              line-height: 19.2px;
              white-space: nowrap;
              cursor: pointer;
          }

        .log-in-page-desktop .log-in {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 24px;
            position: relative;
            align-self: stretch;
            width: 100%;
            flex: 0 0 auto;
        }

        .log-in-page-desktop .button-text {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 12px 20px;
            position: relative;
            align-self: stretch;
            width: 100%;
            flex: 0 0 auto;
            background-color: var(--foundation-bluenormal);
            border-radius: 200px;
            cursor: pointer;
        }

        .log-in-page-desktop .div-wrapper {
            display: inline-flex;
            height: 24px;
            align-items: center;
            justify-content: center;
            padding: 0px 8px;
            position: relative;
            flex: 0 0 auto;
        }

        .log-in-page-desktop .text-2 {
            position: relative;
            width: fit-content;
            font-family: var(--button-base-bold-font-family);
            font-weight: var(--button-base-bold-font-weight);
            color: var(--foundationwhite);
            font-size: var(--button-base-bold-font-size);
            letter-spacing: var(--button-base-bold-letter-spacing);
            line-height: var(--button-base-bold-line-height);
            white-space: nowrap;
            font-style: var(--button-base-bold-font-style);
        }

        .log-in-page-desktop .create-account {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 8px;
            position: relative;
            align-self: stretch;
            width: 100%;
            flex: 0 0 auto;
        }

        .log-in-page-desktop .text-wrapper-6 {
            position: relative;
            align-self: stretch;
            margin-top: -1.00px;
            font-family: "Inter-Regular", Helvetica;
            font-weight: 400;
            color: var(--foundation-blue-greynormal);
            font-size: 16px;
            text-align: center;
            letter-spacing: 0;
            line-height: 19.2px;
        }

        .log-in-page-desktop .text-wrapper-7 {
            position: relative;
            align-self: stretch;
            font-family: "Inter-Bold", Helvetica;
            font-weight: 700;
            color: var(--foundation-bluenormal);
            font-size: 16px;
            text-align: center;
            letter-spacing: 0;
            line-height: 21.1px;
            text-decoration: underline;
            cursor: pointer;
        }

        .log-in-page-desktop .logo-mysy {
            display: inline-flex;
            flex-direction: column;
            height: 56px;
            align-items: flex-start;
            gap: 4.3px;
            position: absolute;
            top: 153px;
            left: 42%;
        }

        .log-in-page-desktop .logo-mysy-2 {
            position: relative;
            width: 116.08px;
            height: 38.69px;
        }

        .log-in-page-desktop .overlap-group {
            position: absolute;
            width: 4px;
            height: 9px;
            top: -153px;
            left: -2202px;
        }

        .log-in-page-desktop .vector {
            position: absolute;
            width: 4px;
            height: 4px;
            top: 0;
            left: 0;
        }

        .log-in-page-desktop .img {
            height: 6px;
            position: absolute;
            width: 3px;
            top: 0;
            left: 0;
        }

        .log-in-page-desktop .vector-2 {
            height: 9px;
            position: absolute;
            width: 3px;
            top: 0;
            left: 0;
        }

        .log-in-page-desktop .overlap {
            position: absolute;
            width: 116px;
            height: 39px;
            top: 0;
            left: 0;
        }

        .log-in-page-desktop .union {
            position: absolute;
            width: 107px;
            height: 33px;
            top: 0;
            left: 0;
        }

        .log-in-page-desktop .union-2 {
            width: 107px;
            height: 21px;
            top: 12px;
            position: absolute;
            left: 0;
        }

        .log-in-page-desktop .union-3 {
            width: 116px;
            height: 23px;
            top: 16px;
            position: absolute;
            left: 0;
        }

        .log-in-page-desktop .text-wrapper-8 {
            position: relative;
            width: fit-content;
            margin-bottom: -0.92px;
            font-family: "DM Sans-Black", Helvetica;
            font-weight: 900;
            color: var(--foundation-greendarker);
            font-size: 11.2px;
            letter-spacing: 8.96px;
            line-height: normal;
        }
    }

    @media only screen and (min-width: 992px) and (max-width: 1199px) {
        

        * {
            -webkit-font-smoothing: antialiased;
            box-sizing: border-box;
        }


        /* a blue color as a generic focus style */
        button:focus-visible {
            outline: 2px solid #4a90e2 !important;
            outline: -webkit-focus-ring-color auto 5px !important;
        }

        a {
            text-decoration: none;
        }

        .log-in-page-mobile {
            display: none;
        }

        .log-in-page-desktop {
            background-color: #edeffa;
            display: flex;
            flex-direction: row;
            justify-content: center;
            width: 100%;
        }

        .log-in-page-desktop .div {
            background-color: #edeffa;
            width: 1440px;
            height: 100vh;
            position: relative;
        }

        .log-in-page-desktop .back {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            position: absolute;
            top: 40px;
            left: 40px;
        }

        .log-in-page-desktop .line-arrow-left {
            position: relative;
            width: 24px;
            height: 24px;
        }

        .log-in-page-desktop .text-wrapper {
            position: relative;
            width: fit-content;
            margin-top: -1.00px;
            font-family: "Inter-Medium", Helvetica;
            font-weight: 500;
            color: var(--foundation-bluedarker);
            font-size: 16px;
            letter-spacing: 0;
            line-height: 24px;
            white-space: nowrap;
        }

        .log-in-page-desktop .sign-in {
            display: flex;
            flex-direction: column;
            width: 40%;
            align-items: center;
            gap: 32px;
            padding: 24px;
            position: absolute;
            top: 233px;
            left: 30%;
            background-color: var(--foundationwhite);
            border-radius: 8px;
        }

        .log-in-page-desktop .sign-in-content {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 20px;
            position: relative;
            align-self: stretch;
            width: 100%;
            flex: 0 0 auto;
        }

        .log-in-page-desktop .text {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
            position: relative;
            align-self: stretch;
            width: 100%;
            flex: 0 0 auto;
        }

        .log-in-page-desktop .text-wrapper-2 {
            position: relative;
            align-self: stretch;
            margin-top: -1.00px;
            font-family: "DM Sans-Bold", Helvetica;
            font-weight: 700;
            color: var(--foundation-bluedarker);
            font-size: 24px;
            text-align: center;
            letter-spacing: 0;
            line-height: 31.7px;
        }

        .log-in-page-desktop .p {
            position: relative;
            align-self: stretch;
            font-family: "Inter-Regular", Helvetica;
            font-weight: 400;
            color: var(--foundation-blue-greynormal);
            font-size: 14px;
            text-align: center;
            letter-spacing: 0;
            line-height: 16.8px;
        }

        .log-in-page-desktop .info {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 24px;
            position: relative;
            align-self: stretch;
            width: 100%;
            flex: 0 0 auto;
        }

        .log-in-page-desktop .inputs {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 12px;
            position: relative;
            align-self: stretch;
            width: 100%;
            flex: 0 0 auto;
        }

        .log-in-page-desktop .input {
            display: flex;
            height: 56px;
            align-items: center;
            gap: 12px;
            padding: 8px 16px;
            position: relative;
            align-self: stretch;
            width: 100%;
            background-color: var(--text-color100);
            border-radius: 4px;
            border: 1px solid;
            border-color: #cbd5e0;
        }

        .log-in-page-desktop .text-wrapper-3 {
            position: relative;
            width: fit-content;
            opacity: 0.5;
            font-family: "Inter-Regular", Helvetica;
            font-weight: 400;
            color: var(--foundation-blue-greynormal);
            font-size: 16px;
            text-align: center;
            letter-spacing: 0;
            line-height: 19.2px;
            white-space: nowrap;
            width: 90%;
        }

        .log-in-page-desktop .footer {
            display: flex;
            align-items: center;
            gap: 51px;
            position: relative;
            align-self: stretch;
            width: 100%;
            flex: 0 0 auto;
            background-color: transparent;
            padding: 0px;
        }

        .log-in-page-desktop .remember-me {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            position: relative;
            flex: 0 0 auto;
        }

        .log-in-page-desktop .checkbox {
            position: relative;
            width: 20px;
            height: 20px;
            background-color: var(--foundation-bluenormal);
            border-radius: 4px;
        }

        .log-in-page-desktop .check {
            position: absolute;
            width: 13px;
            height: 13px;
            top: 3px;
            left: 3px;
        }

        .log-in-page-desktop .text-wrapper-4 {
            position: relative;
            width: fit-content;
            margin-top: -0.50px;
            font-family: "Inter-Regular", Helvetica;
            font-weight: 400;
            color: var(--foundation-blue-greynormal);
            font-size: 16px;
            text-align: center;
            letter-spacing: 0;
            line-height: 19.2px;
            white-space: nowrap;
        }

        .log-in-page-desktop .text-wrapper-5 {
            position: absolute;
            height: 19px;
            top: 0;
            left: 200px;
            font-family: "Inter-Regular", Helvetica;
            font-weight: 400;
            color: var(--foundation-bluenormal);
            font-size: 16px;
            text-align: center;
            letter-spacing: 0;
            line-height: 19.2px;
            white-space: nowrap;
            cursor: pointer;
        }

        .log-in-page-desktop .text-wrapper-5_v2 {
            //  position: absolute;
              height: 19px;
              top: 0;
            //  left: 339px;
              font-family: "Inter-Regular", Helvetica;
              font-weight: 400;
              color: var(--foundation-bluenormal);
              font-size: 16px;
              text-align: center;
              letter-spacing: 0;
              line-height: 19.2px;
              white-space: nowrap;
              cursor: pointer;
          }

        .log-in-page-desktop .log-in {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 24px;
            position: relative;
            align-self: stretch;
            width: 100%;
            flex: 0 0 auto;
        }

        .log-in-page-desktop .button-text {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 12px 20px;
            position: relative;
            align-self: stretch;
            width: 100%;
            flex: 0 0 auto;
            background-color: var(--foundation-bluenormal);
            border-radius: 200px;
            cursor: pointer;
        }

        .log-in-page-desktop .div-wrapper {
            display: inline-flex;
            height: 24px;
            align-items: center;
            justify-content: center;
            padding: 0px 8px;
            position: relative;
            flex: 0 0 auto;
        }

        .log-in-page-desktop .text-2 {
            position: relative;
            width: fit-content;
            font-family: var(--button-base-bold-font-family);
            font-weight: var(--button-base-bold-font-weight);
            color: var(--foundationwhite);
            font-size: var(--button-base-bold-font-size);
            letter-spacing: var(--button-base-bold-letter-spacing);
            line-height: var(--button-base-bold-line-height);
            white-space: nowrap;
            font-style: var(--button-base-bold-font-style);
        }

        .log-in-page-desktop .create-account {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 8px;
            position: relative;
            align-self: stretch;
            width: 100%;
            flex: 0 0 auto;
        }

        .log-in-page-desktop .text-wrapper-6 {
            position: relative;
            align-self: stretch;
            margin-top: -1.00px;
            font-family: "Inter-Regular", Helvetica;
            font-weight: 400;
            color: var(--foundation-blue-greynormal);
            font-size: 16px;
            text-align: center;
            letter-spacing: 0;
            line-height: 19.2px;
        }

        .log-in-page-desktop .text-wrapper-7 {
            position: relative;
            align-self: stretch;
            font-family: "Inter-Bold", Helvetica;
            font-weight: 700;
            color: var(--foundation-bluenormal);
            font-size: 16px;
            text-align: center;
            letter-spacing: 0;
            line-height: 21.1px;
            text-decoration: underline;
            cursor: pointer;
        }

        .log-in-page-desktop .logo-mysy {
            display: inline-flex;
            flex-direction: column;
            height: 56px;
            align-items: flex-start;
            gap: 4.3px;
            position: absolute;
            top: 153px;
            left: 45%;
        }

        .log-in-page-desktop .logo-mysy-2 {
            position: relative;
            width: 116.08px;
            height: 38.69px;
        }

        .log-in-page-desktop .overlap-group {
            position: absolute;
            width: 4px;
            height: 9px;
            top: -153px;
            left: -2202px;
        }

        .log-in-page-desktop .vector {
            position: absolute;
            width: 4px;
            height: 4px;
            top: 0;
            left: 0;
        }

        .log-in-page-desktop .img {
            height: 6px;
            position: absolute;
            width: 3px;
            top: 0;
            left: 0;
        }

        .log-in-page-desktop .vector-2 {
            height: 9px;
            position: absolute;
            width: 3px;
            top: 0;
            left: 0;
        }

        .log-in-page-desktop .overlap {
            position: absolute;
            width: 116px;
            height: 39px;
            top: 0;
            left: 0;
        }

        .log-in-page-desktop .union {
            position: absolute;
            width: 107px;
            height: 33px;
            top: 0;
            left: 0;
        }

        .log-in-page-desktop .union-2 {
            width: 107px;
            height: 21px;
            top: 12px;
            position: absolute;
            left: 0;
        }

        .log-in-page-desktop .union-3 {
            width: 116px;
            height: 23px;
            top: 16px;
            position: absolute;
            left: 0;
        }

        .log-in-page-desktop .text-wrapper-8 {
            position: relative;
            width: fit-content;
            margin-bottom: -0.92px;
            font-family: "DM Sans-Black", Helvetica;
            font-weight: 900;
            color: var(--foundation-greendarker);
            font-size: 11.2px;
            letter-spacing: 8.96px;
            line-height: normal;
        }
    }

    @media only screen and (min-width: 1200px) {


        * {
            -webkit-font-smoothing: antialiased;
            box-sizing: border-box;
        }

      
        /* a blue color as a generic focus style */
        button:focus-visible {
            outline: 2px solid #4a90e2 !important;
            outline: -webkit-focus-ring-color auto 5px !important;
        }

        a {
            text-decoration: none;
        }

        .log-in-page-mobile {
            display: none;
        }

        .log-in-page-desktop {
            background-color: #edeffa;
            display: flex;
            flex-direction: row;
            justify-content: center;
            width: 100%;
        }

        .log-in-page-desktop .div {
            background-color: #edeffa;
            width: 1440px;
            height: 100vh;
            position: relative;
        }

        .log-in-page-desktop .back {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            position: absolute;
            top: 40px;
            left: 40px;
        }

        .log-in-page-desktop .line-arrow-left {
            position: relative;
            width: 24px;
            height: 24px;
        }

        .log-in-page-desktop .text-wrapper {
            position: relative;
            width: fit-content;
            margin-top: -1.00px;
            font-family: "Inter-Medium", Helvetica;
            font-weight: 500;
            color: var(--foundation-bluedarker);
            font-size: 16px;
            letter-spacing: 0;
            line-height: 24px;
            white-space: nowrap;
        }

        .log-in-page-desktop .sign-in {
            display: flex;
            flex-direction: column;
            width: 40%;
            align-items: center;
            gap: 32px;
            padding: 24px;
            position: absolute;
            top: 233px;
            left: 30%;
            background-color: var(--foundationwhite);
            border-radius: 8px;
        }

        .log-in-page-desktop .sign-in-content {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 20px;
            position: relative;
            align-self: stretch;
            width: 100%;
            flex: 0 0 auto;
        }

        .log-in-page-desktop .text {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
            position: relative;
            align-self: stretch;
            width: 100%;
            flex: 0 0 auto;
        }

        .log-in-page-desktop .text-wrapper-2 {
            position: relative;
            align-self: stretch;
            margin-top: -1.00px;
            font-family: "DM Sans-Bold", Helvetica;
            font-weight: 700;
            color: var(--foundation-bluedarker);
            font-size: 24px;
            text-align: center;
            letter-spacing: 0;
            line-height: 31.7px;
        }

        .log-in-page-desktop .p {
            position: relative;
            align-self: stretch;
            font-family: "Inter-Regular", Helvetica;
            font-weight: 400;
            color: var(--foundation-blue-greynormal);
            font-size: 14px;
            text-align: center;
            letter-spacing: 0;
            line-height: 16.8px;
        }

        .log-in-page-desktop .info {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 24px;
            position: relative;
            align-self: stretch;
            width: 100%;
            flex: 0 0 auto;
        }

        .log-in-page-desktop .inputs {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 12px;
            position: relative;
            align-self: stretch;
            width: 100%;
            flex: 0 0 auto;
        }

        .log-in-page-desktop .input {
            display: flex;
            height: 56px;
            align-items: center;
            gap: 12px;
            padding: 8px 16px;
            position: relative;
            align-self: stretch;
            width: 100%;
            background-color: var(--text-color100);
            border-radius: 4px;
            border: 1px solid;
            border-color: #cbd5e0;
        }

        .log-in-page-desktop .text-wrapper-3 {
            position: relative;
            width: fit-content;
            opacity: 0.5;
            font-family: "Inter-Regular", Helvetica;
            font-weight: 400;
            color: var(--foundation-blue-greynormal);
            font-size: 16px;
            text-align: center;
            letter-spacing: 0;
            line-height: 19.2px;
            white-space: nowrap;
            width: 90%;
        }

        .log-in-page-desktop .footer {
            display: flex;
            align-items: center;
            gap: 51px;
            position: relative;
            align-self: stretch;
            width: 100%;
            flex: 0 0 auto;
            background-color: transparent;
            padding: 0px;
        }

        .log-in-page-desktop .remember-me {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            position: relative;
            flex: 0 0 auto;
        }

        .log-in-page-desktop .checkbox {
            position: relative;
            width: 20px;
            height: 20px;
            background-color: var(--foundation-bluenormal);
            border-radius: 4px;
        }

        .log-in-page-desktop .check {
            position: absolute;
            width: 13px;
            height: 13px;
            top: 3px;
            left: 3px;
        }

        .log-in-page-desktop .text-wrapper-4 {
            position: relative;
            width: fit-content;
            margin-top: -0.50px;
            font-family: "Inter-Regular", Helvetica;
            font-weight: 400;
            color: var(--foundation-blue-greynormal);
            font-size: 16px;
            text-align: center;
            letter-spacing: 0;
            line-height: 19.2px;
            white-space: nowrap;
        }

        .log-in-page-desktop .text-wrapper-5 {
            position: absolute;
            height: 19px;
            top: 0;
            left: 339px;
            font-family: "Inter-Regular", Helvetica;
            font-weight: 400;
            color: var(--foundation-bluenormal);
            font-size: 16px;
            text-align: center;
            letter-spacing: 0;
            line-height: 19.2px;
            white-space: nowrap;
            cursor: pointer;
        }

        .log-in-page-desktop .text-wrapper-5_v2 {
          //  position: absolute;
            height: 19px;
            top: 0;
          //  left: 339px;
            font-family: "Inter-Regular", Helvetica;
            font-weight: 400;
            color: var(--foundation-bluenormal);
            font-size: 16px;
            text-align: center;
            letter-spacing: 0;
            line-height: 19.2px;
            white-space: nowrap;
            cursor: pointer;
        }


        .log-in-page-desktop .log-in {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 24px;
            position: relative;
            align-self: stretch;
            width: 100%;
            flex: 0 0 auto;
        }

        .log-in-page-desktop .button-text {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 12px 20px;
            position: relative;
            align-self: stretch;
            width: 100%;
            flex: 0 0 auto;
            background-color: var(--foundation-bluenormal);
            border-radius: 200px;
            cursor: pointer;
        }

        .log-in-page-desktop .div-wrapper {
            display: inline-flex;
            height: 24px;
            align-items: center;
            justify-content: center;
            padding: 0px 8px;
            position: relative;
            flex: 0 0 auto;
        }

        .log-in-page-desktop .text-2 {
            position: relative;
            width: fit-content;
            font-family: var(--button-base-bold-font-family);
            font-weight: var(--button-base-bold-font-weight);
            color: var(--foundationwhite);
            font-size: var(--button-base-bold-font-size);
            letter-spacing: var(--button-base-bold-letter-spacing);
            line-height: var(--button-base-bold-line-height);
            white-space: nowrap;
            font-style: var(--button-base-bold-font-style);
        }

        .log-in-page-desktop .create-account {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 8px;
            position: relative;
            align-self: stretch;
            width: 100%;
            flex: 0 0 auto;
        }

        .log-in-page-desktop .text-wrapper-6 {
            position: relative;
            align-self: stretch;
            margin-top: -1.00px;
            font-family: "Inter-Regular", Helvetica;
            font-weight: 400;
            color: var(--foundation-blue-greynormal);
            font-size: 16px;
            text-align: center;
            letter-spacing: 0;
            line-height: 19.2px;
        }

        .log-in-page-desktop .text-wrapper-7 {
            position: relative;
            align-self: stretch;
            font-family: "Inter-Bold", Helvetica;
            font-weight: 700;
            color: var(--foundation-bluenormal);
            font-size: 16px;
            text-align: center;
            letter-spacing: 0;
            line-height: 21.1px;
            text-decoration: underline;
            cursor: pointer;
        }

        .log-in-page-desktop .logo-mysy {
            display: inline-flex;
            flex-direction: column;
            height: 56px;
            align-items: flex-start;
            gap: 4.3px;
            position: absolute;
            top: 153px;
            left: 45%;
        }

        .log-in-page-desktop .logo-mysy-2 {
            position: relative;
            width: 116.08px;
            height: 38.69px;
        }

        .log-in-page-desktop .overlap-group {
            position: absolute;
            width: 4px;
            height: 9px;
            top: -153px;
            left: -2202px;
        }

        .log-in-page-desktop .vector {
            position: absolute;
            width: 4px;
            height: 4px;
            top: 0;
            left: 0;
        }

        .log-in-page-desktop .img {
            height: 6px;
            position: absolute;
            width: 3px;
            top: 0;
            left: 0;
        }

        .log-in-page-desktop .vector-2 {
            height: 9px;
            position: absolute;
            width: 3px;
            top: 0;
            left: 0;
        }

        .log-in-page-desktop .overlap {
            position: absolute;
            width: 116px;
            height: 39px;
            top: 0;
            left: 0;
        }

        .log-in-page-desktop .union {
            position: absolute;
            width: 107px;
            height: 33px;
            top: 0;
            left: 0;
        }

        .log-in-page-desktop .union-2 {
            width: 107px;
            height: 21px;
            top: 12px;
            position: absolute;
            left: 0;
        }

        .log-in-page-desktop .union-3 {
            width: 116px;
            height: 23px;
            top: 16px;
            position: absolute;
            left: 0;
        }

        .log-in-page-desktop .text-wrapper-8 {
            position: relative;
            width: fit-content;
            margin-bottom: -0.92px;
            font-family: "DM Sans-Black", Helvetica;
            font-weight: 900;
            color: var(--foundation-greendarker);
            font-size: 11.2px;
            letter-spacing: 8.96px;
            line-height: normal;
        }
    }

    // end media


}