@font-face {
    font-family: "Brother1816";
    src: url("/res/fonts/phonocar-login/Brother-1816-Light-949301110fbb172244e677da0328515f.otf") format("opentype");
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: "Brother1816";
    src: url("/res/fonts/phonocar-login/Brother-1816-Book-af243819840c40029cec2f95b66a7f75.otf") format("opentype");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "Brother1816";
    src: url("/res/fonts/phonocar-login/Brother-1816-Bold-17f6e7248c3ad18f2f727d8ec877d18c.otf") format("opentype");
    font-weight: 700;
    font-style: normal;
}

.phonocar-login-page {
    --login-panel-right: 5.5%;
    --login-panel-top: 17.2%;
    --login-panel-width: 31%;
    --login-panel-height: 61.4%;
    --login-panel-font-size: clamp(7px, min(0.625vw, 1.111vh), 24px);
    position: relative;
    min-height: 100vh;
    margin: 0;
    overflow: hidden;
    background: #03060b;
    color: #ffffff;
    font-family: "Brother1816", Arial, Helvetica, sans-serif;
}

.phonocar-login-page .login-shell {
    position: relative;
    z-index: 1;
    width: 100vw;
    min-height: 100vh;
    height: 100vh;
    background: #03060b url("/res/images/phonocar-login/bg-text-fe333f098a9aae14e073ffe5078d0fc2.jpg") center center / cover no-repeat;
    overflow: hidden;
}

.phonocar-login-page .login-shell:before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(0, 0, 0, 0.18) 0%, rgba(2, 4, 8, 0.12) 34%, rgba(4, 6, 12, 0.08) 66%, rgba(2, 4, 10, 0.26) 100%),
        linear-gradient(180deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.2) 100%);
    z-index: 0;
    pointer-events: none;
}

.phonocar-login-page .login-panel {
    position: absolute;
    z-index: 2;
}

.phonocar-login-page .login-panel {
    right: var(--login-panel-right);
    top: var(--login-panel-top);
    width: min(var(--login-panel-width), calc(100vw - 24px));
    height: min(var(--login-panel-height), calc(100vh - var(--login-panel-top) - 16px));
    max-height: calc(100vh - var(--login-panel-top) - 16px);
    font-size: var(--login-panel-font-size);
}

.phonocar-login-page * {
    box-sizing: border-box;
}

.phonocar-login-page .login-card {
    width: 100%;
    height: 100%;
    max-width: none;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.62);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 1.833em;
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.14);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

.phonocar-login-page .login-card-header {
    padding: 4em 4.333em 1.167em 4.333em;
    text-align: left;
}

.phonocar-login-page .login-card-logo {
    display: block;
    width: 17.5em;
    max-width: 100%;
    height: auto;
    margin: 0 0 2em 0;
}

.phonocar-login-page .login-card-header h2 {
    margin: 0 0 0.833em 0;
    font-size: 1.167em;
    line-height: 1.2;
    font-family: "Brother1816", Arial, Helvetica, sans-serif;
    font-weight: 400;
    color: #ffffff;
}

.phonocar-login-page .login-card-body {
    padding: 1.167em 4.333em 4em 4.333em;
    text-align: left;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-gutter: stable;
}

.phonocar-login-page .login_form {
    margin: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1.667em;
}

.phonocar-login-page .form-group {
    margin-bottom: 0;
}

.phonocar-login-page .login-card input.form-control,
.phonocar-login-page .login-card input.text1 {
    width: 100%;
    height: 4.333em;
    padding: 0 1.333em;
    border: 0;
    border-radius: 0.75em;
    background: rgba(244, 246, 248, 0.18);
    color: rgba(255, 255, 255, 0.94);
    font-family: "Brother1816", Arial, Helvetica, sans-serif;
    font-size: 1em;
    font-weight: 400;
    line-height: 4.333em;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.34),
        0 8px 20px rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.phonocar-login-page .login-card input.form-control:focus,
.phonocar-login-page .login-card input.text1:focus {
    border-color: rgba(255, 255, 255, 0.42);
    background: rgba(244, 246, 248, 0.28);
    color: rgba(255, 255, 255, 0.98);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.46),
        0 10px 26px rgba(255, 255, 255, 0.08);
}

.phonocar-login-page .login-card input::-webkit-input-placeholder {
    color: rgba(255, 255, 255, 0.7);
}

.phonocar-login-page .login-card input::-moz-placeholder {
    color: rgba(255, 255, 255, 0.7);
}

.phonocar-login-page .login-card input:-ms-input-placeholder {
    color: rgba(255, 255, 255, 0.7);
}

.phonocar-login-page .verify-group {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 1em;
    height: auto !important;
}

.phonocar-login-page #verify {
    width: auto !important;
    flex: 1 1 auto;
    min-width: 0;
    margin-right: 0;
}

.phonocar-login-page .img_verify {
    display: block;
    flex: 0 0 10.5em;
    width: 10.5em;
    min-width: 10.5em;
    height: 4.333em;
    border-radius: 0.75em;
    border: 1px solid rgba(255, 255, 255, 0.38);
    background: rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 20px rgba(255, 255, 255, 0.08);
    object-fit: fill;
}

.phonocar-login-page #error {
    margin: 0.333em 0 0.833em 0;
    color: #ffb2b2 !important;
    font-size: 0.917em;
    line-height: 1.45;
}

.phonocar-login-page .footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 4.167em 0 0 0;
    gap: 2.167em;
}

.phonocar-login-page .remember-wrap {
    display: inline-flex;
    align-items: center;
    gap: 0.667em;
    margin: 0;
    font-weight: 400;
    cursor: pointer;
    flex: 0 0 auto;
}

.phonocar-login-page .remember {
    width: auto !important;
    height: auto !important;
    margin: 0;
    accent-color: rgba(255, 255, 255, 0.95);
}

.phonocar-login-page .remember-label,
.phonocar-login-page .forget {
    color: rgba(255, 255, 255, 0.84);
    font-family: "Brother1816", Arial, Helvetica, sans-serif;
    font-size: 0.917em;
    line-height: 1.4;
    font-weight: 400;
}

.phonocar-login-page .forget {
    float: none;
    line-height: 1.4;
    display: inline-block !important;
    margin-left: auto;
    text-align: right;
}

.phonocar-login-page #loginButton.btn {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    height: 4.333em;
    border: 0;
    border-radius: 0.75em;
    background: #ffffff;
    color: #101217;
    padding: 0 1.5em;
    font-family: "Brother1816", Arial, Helvetica, sans-serif;
    font-size: 1em;
    font-weight: 400;
    line-height: 4.333em;
    letter-spacing: 0;
    text-align: left;
    text-shadow: none;
    box-shadow: none;
    margin-top: 2.083em;
    flex-shrink: 0;
}

.phonocar-login-page #loginButton.btn:hover,
.phonocar-login-page #loginButton.btn:focus,
.phonocar-login-page #loginButton.btn:active {
    background: #f3f3f3;
    color: #101217;
    box-shadow: none;
}

@media (max-width: 991px) {
    .phonocar-login-page .verify-group {
        flex-wrap: wrap;
    }

    .phonocar-login-page .img_verify {
        flex: 0 0 100%;
        width: 100%;
        min-width: 0;
    }

    .phonocar-login-page .footer {
        flex-wrap: wrap;
        row-gap: 0.833em;
    }

    .phonocar-login-page .forget {
        width: 100%;
        margin-left: 0;
        text-align: right;
    }
}

@media (max-width: 767px) {
    .phonocar-login-page .login-card-header,
    .phonocar-login-page .login-card-body {
        padding-left: 2.167em;
        padding-right: 2.167em;
    }

    .phonocar-login-page .verify-group {
        gap: 0.833em;
    }

    .phonocar-login-page .img_verify {
        width: 7.333em;
        min-width: 7.333em;
    }
}