:root {
    --dp-navy: #071f52;
    --dp-blue: #2563eb;
    --dp-text: #0f1f3d;
    --dp-muted: #667085;
    --dp-line: #dce5f2;
    --dp-card: rgba(255,255,255,.96);
}

* {
    box-sizing: border-box;
}

html,
body {
    min-height: 100%;
    margin: 0;
}

body.dp-login-page {
    min-height: 100vh;
    background: #eef5ff;
    color: var(--dp-text);
    font-family:
        Inter,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;
}

.dp-login-shell {
    display: grid;
    grid-template-columns:
        minmax(0,58.5fr)
        minmax(520px,41.5fr);
    min-height: 100vh;
}

.dp-login-visual {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    background:
        linear-gradient(
            180deg,
            rgba(18,66,118,.18),
            rgba(5,29,56,.34)
        ),
        var(--dp-login-bg)
        center / cover
        no-repeat;
}

.dp-login-visual__overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            90deg,
            rgba(18,62,111,.36),
            rgba(18,62,111,.06) 55%,
            rgba(3,22,44,.08)
        ),
        linear-gradient(
            0deg,
            rgba(3,25,42,.48),
            rgba(21,83,138,.02) 44%
        );
}

.dp-login-visual__content {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    padding:
        34px
        54px
        42px
        58px;

    display: flex;
    flex-direction: column;
}

.dp-login-brand {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    width: fit-content;
    text-decoration: none;
}

.dp-login-brand--light {
    color: #fff;
}

.dp-login-brand__text {
    display: flex;
    flex-direction: column;
    line-height: 1.08;
}

.dp-login-brand__text strong {
    font-size: 34px;
    font-weight: 800;
}

.dp-login-brand__text small {
    margin-top: 5px;
    font-size: 15px;
    font-weight: 600;
}

.dp-login-brandmark {
    position: relative;
    width: 54px;
    height: 54px;
    flex: 0 0 54px;
}

.dp-petal {
    position: absolute;
    width: 26px;
    height: 26px;
    border-radius:
        18px
        18px
        7px
        18px;

    transform-origin:
        100%
        100%;
}

.dp-petal--1 {
    left: 1px;
    top: 1px;
    background: #2386f5;
}

.dp-petal--2 {
    right: 1px;
    top: 1px;
    background: #22c55e;
    transform: rotate(90deg);
}

.dp-petal--3 {
    right: 1px;
    bottom: 1px;
    background: #f59e0b;
    transform: rotate(180deg);
}

.dp-petal--4 {
    left: 1px;
    bottom: 1px;
    background: #ef4444;
    transform: rotate(270deg);
}

.dp-login-hero {
    max-width: 720px;
    margin-top: 92px;
    color: #fff;
}

.dp-login-hero h1 {
    margin: 0 0 24px;
    font-size:
        clamp(
            46px,
            4.7vw,
            76px
        );

    line-height: 1.05;
    font-weight: 800;
}

.dp-login-hero > p {
    max-width: 690px;
    margin: 0;
    font-size: 20px;
    line-height: 1.55;
    color:
        rgba(
            255,
            255,
            255,
            .95
        );
}

.dp-login-benefits {
    display: grid;
    grid-template-columns:
        repeat(
            4,
            minmax(
                110px,
                1fr
            )
        );

    gap: 28px;
    max-width: 680px;
    margin-top: 56px;
}

.dp-login-benefit {
    text-align: center;
    color: #fff;
    font-size: 16px;
}

.dp-login-benefit__icon {
    width: 66px;
    height: 66px;
    margin:
        0
        auto
        13px;

    border-radius: 50%;
    display: grid;
    place-items: center;

    border:
        2px
        solid
        rgba(
            255,
            255,
            255,
            .7
        );

    font-size: 27px;
}

.dp-login-benefit:nth-child(1)
.dp-login-benefit__icon {
    background: #377dff;
}

.dp-login-benefit:nth-child(2)
.dp-login-benefit__icon {
    background: #11ae5c;
}

.dp-login-benefit:nth-child(3)
.dp-login-benefit__icon {
    background: #ff8b18;
}

.dp-login-benefit:nth-child(4)
.dp-login-benefit__icon {
    background: #8248e6;
}

.dp-login-visual__footer {
    margin-top: auto;

    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 26px;

    color: #fff;
}

.dp-login-quote {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dp-login-location {
    min-width: 270px;
    display: flex;
    gap: 16px;
    padding: 18px 22px;
    border-radius: 12px;

    background:
        rgba(
            12,
            24,
            28,
            .72
        );
}

.dp-login-auth {
    position: relative;
    min-height: 100vh;

    padding:
        80px
        52px
        66px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    background:
        radial-gradient(
            circle
            at 20% 0%,
            rgba(
                97,
                165,
                255,
                .18
            ),
            transparent 35%
        ),
        linear-gradient(
            180deg,
            #f9fbff,
            #eef5ff
        );
}

.dp-login-language {
    position: absolute;
    top: 32px;
    right: 42px;

    display: flex;
    align-items: center;
    gap: 10px;

    font-size: 14px;
    font-weight: 700;
}

.dp-login-card {
    width:
        min(
            100%,
            650px
        );

    padding:
        36px
        54px
        30px;

    border:
        1px
        solid
        rgba(
            214,
            223,
            236,
            .9
        );

    border-radius: 22px;
    background: var(--dp-card);

    box-shadow:
        0
        24px
        70px
        rgba(
            38,
            78,
            128,
            .13
        );
}

.dp-login-card__heading {
    text-align: center;
}

.dp-login-welcome {
    display: block;
    margin-bottom: 14px;
    color: #3f5578;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 4px;
}

.dp-login-brand--card {
    margin: 0 auto;
    color: var(--dp-navy);
}

.dp-login-brand--card
.dp-login-brand__text strong {
    font-size: 46px;
}

.dp-login-brand--card
.dp-login-brand__text small {
    font-size: 18px;
}

.dp-login-card__heading > p {
    margin:
        22px
        0
        18px;

    color: #475467;
    font-size: 16px;
}

.dp-login-village {
    display: inline-flex;
    align-items: center;
    gap: 11px;

    margin:
        0
        auto
        2px;

    padding: 9px 13px;

    border:
        1px
        solid
        #e2e9f3;

    border-radius: 12px;
    background: #f8fbff;
    text-align: left;
}

.dp-login-village img {
    width: 42px;
    height: 42px;
    object-fit: contain;
}

.dp-login-village > div {
    display: flex;
    flex-direction: column;
}

.dp-login-village strong {
    font-size: 13px;
}

.dp-login-village span {
    margin-top: 2px;
    color: var(--dp-muted);
    font-size: 11px;
}

.dp-login-bsre img {
    max-width: 140px;
    max-height: 44px;
    object-fit: contain;
}

.dp-login-alert {
    margin:
        18px
        0
        -2px;

    padding: 12px 14px;
    border:
        1px
        solid
        #fecaca;

    border-radius: 10px;
    background: #fff1f2;
    color: #b42318;
}

.dp-login-form-area {
    margin-top: 20px;
}

.dp-field {
    margin-bottom: 18px;
}

.dp-field > label,
.dp-verification__title > label {
    display: block;
    margin: 0 0 8px;
    font-size: 14px;
    font-weight: 800;
}

.dp-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.dp-input-wrap > i {
    position: absolute;
    left: 16px;
    z-index: 2;
    color: #61708a;
}

.dp-input-wrap .form-control {
    width: 100%;
    height: 48px;

    padding:
        10px
        44px
        10px
        46px;

    border:
        1px
        solid
        #cbd6e6;

    border-radius: 8px;
    box-shadow: none;
}

.dp-input-wrap
.form-control:focus {
    border-color: #4f83ff;
    outline: none;

    box-shadow:
        0
        0
        0
        3px
        rgba(
            79,
            131,
            255,
            .12
        );
}

.dp-password-toggle {
    position: absolute;
    right: 10px;

    width: 36px;
    height: 36px;

    border: 0;
    background: transparent;
    color: #61708a;

    cursor: pointer;
}

.dp-password-row {
    margin-top: 8px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;
}

.dp-show-password {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0;

    color: #667085;
    font-size: 12px;
}

.dp-forgot-link,
.dp-captcha-reload {
    color: #095bff;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

.dp-verification__title {
    margin-bottom: 9px;

    display: flex;
    align-items: center;
    justify-content: space-between;
}

.dp-captcha-grid {
    display: grid;

    grid-template-columns:
        1fr
        1.05fr;

    gap: 14px;
}

.dp-captcha-image {
    min-height: 64px;
    border-radius: 9px;
    overflow: hidden;
    background: #edf4ff;
}

.dp-captcha-image img {
    width: 100%;
    height: 64px;
    object-fit: cover;
}

.dp-captcha-input
.form-control {
    height: 64px;
}

.dp-login-submit-wrap {
    margin-top: 6px;
}

.dp-login-submit {
    width: 100%;
    min-height: 54px;

    border: 0;
    border-radius: 8px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    background:
        linear-gradient(
            90deg,
            #3679ff,
            #2563eb
        );

    color: #fff;
    font-size: 16px;
    font-weight: 800;
    cursor: pointer;
}

.dp-login-divider {
    position: relative;
    margin: 17px 0;
    text-align: center;
    color: #6b7280;
    font-size: 12px;
}

.dp-login-divider::before,
.dp-login-divider::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 43%;
    height: 1px;
    background: #dce4ef;
}

.dp-login-divider::before {
    left: 0;
}

.dp-login-divider::after {
    right: 0;
}

.dp-login-divider span {
    position: relative;
    z-index: 1;
    padding: 0 11px;
    background: #fff;
}

.dp-qr-login {
    min-height: 62px;
    padding: 11px 18px;
    border-radius: 9px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;

    background: #edf5ff;
    color: #172b52;
    text-decoration: none;
}

.dp-qr-login--disabled {
    cursor: not-allowed;
    opacity: .84;
}

.dp-otp-login {
    margin-top: 10px;
    cursor: pointer;
    opacity: 1;
}

.dp-login-security {
    margin-top: 20px;
    padding: 14px 18px;

    border-radius: 10px;

    display: flex;
    align-items: center;
    gap: 14px;

    background:
        linear-gradient(
            90deg,
            #e9fff2,
            #daf8e8
        );

    color: #126637;
}

.dp-login-page-footer {
    position: absolute;

    left: 28px;
    right: 28px;
    bottom: 17px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    color: #5f6b7d;
    font-size: 11px;
}

.dp-login-page-footer > div {
    display: flex;
    align-items: center;
    gap: 8px;
}

body.dp-login-page label.error {
    margin-top: 5px;
    display: block;
    color: #d92d20;
    font-size: 11px;
}

body.dp-login-page input.error {
    border-color:
        #f04438
        !important;
}

@media (max-width: 1280px) {
    .dp-login-shell {
        grid-template-columns:
            minmax(0,54fr)
            minmax(500px,46fr);
    }

    .dp-login-visual__content {
        padding-left: 42px;
        padding-right: 38px;
    }

    .dp-login-auth {
        padding-left: 36px;
        padding-right: 36px;
    }
}

@media (max-width: 1024px) {
    .dp-login-shell {
        display: block;
    }

    .dp-login-visual {
        display: none;
    }

    .dp-login-auth {
        min-height: 100vh;
        padding:
            86px
            28px
            84px;
    }

    .dp-login-card {
        width:
            min(
                100%,
                620px
            );
    }
}

@media (max-width: 640px) {
    .dp-login-auth {
        padding:
            76px
            14px
            92px;

        justify-content:
            flex-start;
    }

    .dp-login-language {
        top: 22px;
        right: 18px;
    }

    .dp-login-card {
        padding:
            28px
            20px
            24px;

        border-radius: 16px;
    }

    .dp-login-brand--card
    .dp-login-brand__text strong {
        font-size: 34px;
    }

    .dp-login-village {
        width: 100%;
    }

    .dp-captcha-grid {
        grid-template-columns:
            1fr;
    }

    .dp-password-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .dp-login-page-footer {
        left: 14px;
        right: 14px;
        bottom: 13px;

        flex-direction: column;
        gap: 4px;
        text-align: center;
    }
}