/* Login page */
        .login-page {
            background: #fff;
        }

        .login-page .container {
            max-width: 1180px;
        }

        .login-page .survey-breadcrumb {
            margin-top: 22px;
            margin-bottom: 16px;
        }

        .login-page .header-actions .outline-btn.is-current {
            border-color: #12b98a;
            color: #12b98a;
        }

        .login:has(.login-panel) main {
            max-width: 1180px;
            margin: 36px auto 0;
            padding: 0 20px;
            box-sizing: border-box;
            justify-content: center;
        }

        .login:has(.login-panel) .content {
            width: 100%;
            max-width: 1180px;
            margin: 0;
        }

        .login:has(.login-panel) .right-column {
            display: none;
        }

        @media (min-width: 1025px) {
            .login:has(.login-panel) .left-column {
                display: none;
            }
        }

        .login-page .login-hero {
            min-height: 278px;
            padding: 52px 0 40px;
            border-radius: 0;
            background:
                    linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,.96) 36%, rgba(255,255,255,.5) 56%, rgba(255,255,255,0) 77%),
                    url("../img/loginimg.jpg") center right / 760px auto no-repeat;
            box-shadow: none;
        }

        .login-page .login-hero h1 {
            margin-bottom: 24px;
            color: #12304a;
            font-size: 42px;
            letter-spacing: 0;
        }

        .login-page .login-hero p {
            max-width: 620px;
            color: #12304a;
            font-size: 17px;
            font-weight: 500;
            line-height: 2.05;
        }

        .login-panel {
            display: grid;
            grid-template-columns: minmax(420px, 1fr) minmax(360px, 440px);
            width: 100%;
            border: 1px solid #dfe7ee;
            border-radius: 8px;
            background: #fff;
            box-shadow: 0 12px 30px rgba(38, 52, 86, .06);
            overflow: hidden;
        }

        .login-form-area {
            padding: 44px 54px 46px;
        }

        .login-benefits {
            padding: 44px 42px 46px;
            border-left: 1px solid #dfe7ee;
            background: #fbfdfc;
        }

        .login-form-area h2,
        .login-benefits > h2 {
            position: relative;
            margin: 0 0 36px;
            color: #12304a;
            font-size: 21px;
            text-align: center;
        }

        .login-form-area h2::after,
        .login-benefits > h2::after {
            content: "";
            position: absolute;
            left: 50%;
            bottom: -14px;
            width: 34px;
            height: 3px;
            border-radius: 999px;
            background: #2fad63;
            transform: translateX(-50%);
        }

        .login-page-form {
            display: grid;
        }

        .login-page-form > label,
        .login-other-title {
            margin: 0 0 12px;
            color: #12304a;
            font-size: 15px;
            font-weight: 800;
        }

        .login-input {
            position: relative;
            display: flex;
            align-items: center;
            margin-bottom: 28px;
        }

        .login-input > img {
            position: absolute;
            left: 16px;
            width: 18px;
            height: 18px;
            object-fit: contain;
            opacity: .66;
        }

        .login-input input {
            width: 100%;
            min-height: 58px;
            padding: 0 48px;
            border: 1px solid #d9e3ec;
            border-radius: 4px;
            color: #12304a;
            font: inherit;
        }

        .login-input button {
            position: absolute;
            right: 14px;
            width: 22px;
            height: 22px;
            padding: 0;
            border: 0;
            background: transparent;
            cursor: pointer;
        }

        .login-input button::before {
            content: "";
            position: absolute;
            inset: 4px 2px;
            border: 2px solid #617184;
            border-radius: 50% / 60%;
        }

        .login-input button::after {
            content: "";
            position: absolute;
            left: 8px;
            top: 8px;
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: #617184;
        }

        .login-options {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 16px;
            margin: -8px 0 30px;
        }

        .login-options:has(label) {
            justify-content: space-between;
        }

        .login-options label {
            display: flex;
            align-items: center;
            gap: 10px;
            color: #12304a;
            font-size: 15px;
            font-weight: 700;
        }

        .login-options input {
            width: 20px;
            height: 20px;
            accent-color: #2fad63;
        }

        .login-options a {
            max-width: 100%;
            color: #2fad63;
            font-size: 15px;
            font-weight: 700;
            line-height: 1.6;
            text-align: right;
            text-decoration: none;
        }

        .login-submit {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            min-height: 58px;
            border: 0;
            border-radius: 999px;
            background:
                    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M10 6H7.5C6.67 6 6 6.67 6 7.5V16.5C6 17.33 6.67 18 7.5 18H10' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M13 8L17 12L13 16' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M17 12H10' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") calc(50% - 56px) center / 18px 18px no-repeat,
                    linear-gradient(90deg, #21a95e 0%, #30b755 100%);
            color: #fff;
            font: inherit;
            font-size: 18px;
            font-weight: 900;
            cursor: pointer;
        }

        .login-submit img {
            width: 18px;
            height: 18px;
            margin-right: 16px;
            filter: brightness(0) invert(1);
        }

        .login-divider {
            display: grid;
            grid-template-columns: 1fr auto 1fr;
            gap: 22px;
            align-items: center;
            margin: 28px 0;
            color: #12304a;
            font-weight: 800;
        }

        .login-divider::before,
        .login-divider::after {
            content: "";
            height: 1px;
            background: #dfe7ee;
        }

        .login-line-button {
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 56px;
            border: 1px solid #06c755;
            border-radius: 4px;
            background: #06c755;
            color: #fff;
            font-size: 18px;
            font-weight: 900;
            text-decoration: none;
        }

        .login-line-button img {
            width: 26px;
            height: 26px;
            margin-right: 14px;
        }

        .login-register-box,
        .login-help-card {
            margin-top: 42px;
            padding: 28px 26px;
            border: 1px solid #dfe7ee;
            border-radius: 8px;
            background: #fff;
        }

        .login-register-box h3,
        .login-help-card h3 {
            margin: 0 0 16px;
            color: #12304a;
            font-size: 18px;
        }

        .login-register-box p,
        .login-help-card p {
            margin: 0 0 20px;
            color: #405466;
            font-size: 15px;
            line-height: 1.9;
        }

        .login-register-box a,
        .login-help-card a {
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 52px;
            border: 1px solid #2fad63;
            border-radius: 999px;
            color: #2fad63;
            font-weight: 900;
            text-decoration: none;
            margin-top: 10px;
        }

        .login-register-box img {
            width: 20px;
            height: 20px;
            margin-right: 16px;
        }

        .login-help-card a::after {
            content: "";
            width: 8px;
            height: 8px;
            margin-left: 18px;
            border-top: 2px solid currentColor;
            border-right: 2px solid currentColor;
            transform: rotate(45deg);
        }

        .login-benefits ul {
            display: grid;
            gap: 28px;
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .login-benefits li {
            display: grid;
            grid-template-columns: 74px 1fr;
            gap: 22px;
            align-items: start;
        }

        .login-benefits li > span {
            display: grid;
            place-items: center;
            width: 64px;
            height: 64px;
            border-radius: 50%;
            background: #eff8f2;
        }

        .login-benefits li img {
            width: 34px;
            height: 34px;
            object-fit: contain;
        }

        .login-benefits h3 {
            margin: 0 0 8px;
            color: #12304a;
            font-size: 17px;
        }

        .login-benefits p {
            margin: 0;
            color: #405466;
            font-size: 15px;
            line-height: 1.8;
        }

        .login-security {
            display: grid;
            grid-template-columns: 1fr auto;
            gap: 40px;
            align-items: center;
            margin: 32px 0 42px;
            padding: 28px 42px;
            border-radius: 8px;
            background: linear-gradient(105deg, #f2fbf5 0%, #fff 52%, #f1f9f4 100%);
        }

        .login-security-main,
        .login-pmark {
            display: flex;
            align-items: center;
            gap: 24px;
        }

        .login-security-main > span {
            display: grid;
            place-items: center;
            width: 76px;
            height: 76px;
            border: 1px solid #2fad63;
            border-radius: 50%;
            background: #fff;
        }

        .login-security-main img {
            width: 42px;
            height: 42px;
        }

        .login-security h2 {
            margin: 0 0 10px;
            color: #2fad63;
            font-size: 18px;
        }

        .login-security p,
        .login-pmark p {
            margin: 0;
            color: #405466;
            font-size: 14px;
            line-height: 1.8;
        }

        .login-pmark img {
            width: 82px;
            height: auto;
        }

        .login-page .information-footer {
            margin-top: 0;
        }

        @media (max-width: 980px) {
            .login:has(.login-panel) main {
                margin-top: 28px;
            }

            .login-panel {
                grid-template-columns: 1fr;
            }

            .login-benefits {
                border-top: 1px solid #dfe7ee;
                border-left: 0;
            }

            .login-benefits ul {
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 24px;
            }

            .login-benefits li {
                grid-template-columns: 58px 1fr;
                gap: 16px;
            }

            .login-benefits li > span {
                width: 52px;
                height: 52px;
            }

            .login-help-card {
                margin-top: 30px;
            }

            .login-security {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 560px) {
            .login:has(.login-panel) main {
                margin-top: 22px;
                padding: 0 12px;
            }

            .login-page .login-hero {
                min-height: 300px;
                padding: 34px 0;

                background: linear-gradient(0deg, rgba(255, 255, 255, .98) 0%, rgba(255, 255, 255, .95) 34%, rgba(255, 255, 255, .34) 68%, rgba(255, 255, 255, .05) 100%), url(../img/mainvisual.png) center 38% / cover no-repeat;  }

            .login-page .login-hero h1 {
                font-size: 32px;
            }

            .login-page .login-hero p {
                font-size: 15px;
                line-height: 1.9;
            }

            .login-panel {
                border-radius: 6px;
            }

            .login-form-area,
            .login-benefits {
                padding: 30px 18px;
            }

            .login-options {
                align-items: stretch;
                flex-direction: column;
            }

            .login-options a {
                text-align: center;
            }

            .login-benefits ul {
                grid-template-columns: 1fr;
            }

            .login-benefits li {
                grid-template-columns: 58px 1fr;
                gap: 14px;
            }

            .login-benefits li > span {
                width: 52px;
                height: 52px;
            }

            .login-security,
            .login-security-main,
            .login-pmark {
                align-items: flex-start;
                flex-direction: column;
            }

            .login-security {
                padding: 26px 18px;
            }
        }
        @media screen and (max-width: 1024px) {
            .login:has(.login-panel) main {
                padding-top: 64px;
            }
        }

        @media screen and (max-width: 560px) {
            .login:has(.login-panel) main {
                padding-top: 58px;
            }
        }