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

html {
    overflow-x: hidden;
    overflow-y: auto;
}

body {
    min-height: 100vh;
    height: auto;
    overflow-x: hidden;
    overflow-y: auto;
    background: #0b1220;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

img {
    max-width: 100%;
}

button,
input,
select,
textarea {
    font-family: inherit;
}


/* =========================================================
   2. COMMON PAGE BACKGROUND
========================================================= */

.login-page {
    width: 100%;
    min-height: 100vh;

    position: relative;

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

    padding: 45px 20px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 5% 10%,
            rgba(255, 193, 7, 0.16),
            transparent 25%
        ),
        radial-gradient(
            circle at 95% 90%,
            #0b1220,
            transparent 32%
        ),
        linear-gradient(
            135deg,
            #0b1220 0%,
            #0b1220 50%,
            #0b1220 100%
        );
}


/* Decorative circles */

.login-page::before {
    content: "";

    position: absolute;

    width: 360px;
    height: 360px;

    top: -190px;
    left: -160px;

    border: 45px solid rgba(255, 193, 7, 0.08);
    border-radius: 50%;

    pointer-events: none;
}

.login-page::after {
    content: "";

    position: absolute;

    width: 300px;
    height: 300px;

    right: -145px;
    bottom: -145px;

    border: 38px solid rgba(255, 193, 7, 0.07);
    border-radius: 50%;

    pointer-events: none;
}


/* =========================================================
   3. CONTAINER
========================================================= */

.login-container {
    width: 100%;
    max-width: 560px;

    margin: 0 auto;

    position: relative;
    z-index: 2;
}


/* =========================================================
   4. MAIN BLACK CARD
========================================================= */

.login-box {
    width: 100%;
    max-width: 560px;

    margin: 0 auto;

    background: #000;

    border: 2px solid rgba(255, 193, 7, 0.50);
    border-radius: 25px;

    overflow: hidden;

    box-shadow:
        0 25px 70px rgba(0, 0, 0, 0.40),
        0 0 0 1px rgba(255, 193, 7, 0.05);
}


/* =========================================================
   5. FORM AREA
========================================================= */

.login-right {
    width: 100%;

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

    padding: 45px 50px;
box-shadow: inset 0 0 10px #ffcc28;
   background-size: cover;
    background-image: url(https://img.magnific.com/free-photo/abstract-luxury-gradient-blue-background-smooth-dark-blue-with-black-vignette-studio-banner_1258-52393.jpg?semt=ais_hybrid&w=740&q=80);
}


/* =========================================================
   6. FORM CARD
========================================================= */

.login-card {
    width: 100%;
    max-width: 430px;

    margin: 0 auto;
    padding: 0;

    background: transparent;
}


/* =========================================================
   7. LOGO
========================================================= */

.login-logo {
    width: 100%;

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

    margin: 0 0 18px;
}

.login-logo a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.login-logo img {
    display: block;

    width: 145px;
    max-width: 70%;
    height: auto;

    margin: 0 auto;

    object-fit: contain;
}


/* =========================================================
   8. TITLE
========================================================= */

.login-title {
    margin: 0;

    color: #ffcb26;

    text-align: center;

    font-size: 31px;
    font-weight: 800;
    line-height: 1.2;
}


/* =========================================================
   9. YELLOW TITLE LINE
========================================================= */

.login-line {
    width: 65px;
    height: 5px;

    margin: 12px auto;

    border-radius: 50px;

    background: linear-gradient(
        90deg,
        #ffc107,
        #ffda55
    );

    box-shadow:
        0 0 12px rgba(255, 193, 7, 0.25);
}


/* =========================================================
   10. SUBTITLE
========================================================= */

.login-subtitle {
    margin: 0 0 28px;

    color: #8e99aa;

    text-align: center;

    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
}


/* =========================================================
   11. FORM
========================================================= */

.login-card form {
    width: 100%;
    margin: 0;
}


/* =========================================================
   12. FIELD
========================================================= */

.login-field {
    width: 100%;

    position: relative;

    margin: 0 0 18px;
}


/* =========================================================
   13. FIELD ICON
========================================================= */

.login-field-icon {
    position: absolute;

    left: 18px;
    top: 50%;

    z-index: 3;

    color: #0876c7;

    font-size: 16px;

    transform: translateY(-50%);

    pointer-events: none;
}


/* =========================================================
   14. INPUT / SELECT / TEXTAREA
========================================================= */

.login-card input,
.login-card select,
.login-card textarea {
    width: 100%;

    margin: 0;

    border: 2px solid #dce5ef;
    border-radius: 11px;

    outline: none;

    background: #f7faff;

    color: #063b78;

    font-size: 14px;

    box-shadow: none;

    transition:
        border-color .20s ease,
        box-shadow .20s ease,
        background .20s ease,
        transform .20s ease;
}

.login-card input,
.login-card select {
    height: 56px;
    min-height: 56px;

    padding: 0 18px 0 48px;
}

.login-card textarea {
    min-height: 110px;

    padding: 14px 18px 14px 48px;

    resize: vertical;
}


/* =========================================================
   15. SELECT
========================================================= */

.login-card select {
    cursor: pointer;
}


/* =========================================================
   16. PLACEHOLDER
========================================================= */

.login-card input::placeholder,
.login-card textarea::placeholder {
    color: #8a98a8;
    opacity: 1;
}


/* =========================================================
   17. FOCUS
========================================================= */

.login-card input:focus,
.login-card select:focus,
.login-card textarea:focus {
    background: #fff;

    border-color: #0876c7;

    box-shadow:
        0 0 0 4px rgba(8, 118, 199, 0.11);
}


/* =========================================================
   18. INVALID INPUT
========================================================= */

.login-card input.input-validation-error,
.login-card select.input-validation-error,
.login-card textarea.input-validation-error {
    border-color: #dc3545 !important;
}

.login-card input.input-validation-error:focus,
.login-card select.input-validation-error:focus,
.login-card textarea.input-validation-error:focus {
    box-shadow:
        0 0 0 4px rgba(220, 53, 69, 0.10);
}


/* =========================================================
   19. VALIDATION MESSAGE
========================================================= */

.login-field .field-validation-error,
.login-field span.field-validation-error {
    display: block;

    margin-top: 5px;
    padding-left: 3px;

    color: #ff5b67 !important;

    font-size: 12px;
    line-height: 1.35;
}

.login-field .field-validation-valid {
    display: none;
}


/* =========================================================
   20. REGISTER 2 COLUMN
========================================================= */

.form-row-2 {
    width: 100%;

    display: flex;
    flex-wrap: wrap;

    column-gap: 15px;
}

.form-row-2 .login-field {
    width: calc(50% - 7.5px);
    flex: 0 0 calc(50% - 7.5px);
}


/* =========================================================
   21. CHECKBOX / REMEMBER ME
========================================================= */

.login-checkbox {
    display: flex;
    align-items: center;

    gap: 8px;

    margin: 2px 0 18px;

    color: #9aa4b2;

    font-size: 12px;
}

.login-checkbox input {
    width: 16px !important;
    height: 16px !important;
    min-height: 16px !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;

    accent-color: #ffc107;

    box-shadow: none !important;
}


/* =========================================================
   22. ALERT / TEMPDATA
========================================================= */

.error-box {
    width: 100%;
    margin: 0 0 20px;
}

.error-box .alert {
    margin: 0;

    padding: 10px 14px;

    border-radius: 8px;

    text-align: center;

    font-size: 13px;
    line-height: 1.4;
}

.error-box .alert-success {
    color: #0f5132;
    background: #d1e7dd;
    border: 1px solid #badbcc;
}

.error-box .alert-danger {
    color: #842029;
    background: #f8d7da;
    border: 1px solid #f5c2c7;
}

.error-box .alert-warning {
    color: #664d03;
    background: #fff3cd;
    border: 1px solid #ffecb5;
}

.error-box .alert-info {
    color: #055160;
    background: #cff4fc;
    border: 1px solid #b6effb;
}


/* =========================================================
   23. BUTTON WRAPPER
========================================================= */

.login-button-wrapper {
    width: 100%;

    margin: 8px 0 0;
}


/* =========================================================
   24. PRIMARY BUTTON
========================================================= */

.login-button {
    width: 100%;

    height: 57px;
    min-height: 57px;

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

    gap: 10px;

    padding: 7px 10px;

    border: 0;
    border-radius: 12px;
    background: linear-gradient(135deg, #ffcb26, #ffc81d);
 

    color: #000;

    font-size: 15px;
    font-weight: 800;

    line-height: 1;

    cursor: pointer;

    opacity: 1;
    visibility: visible;

    box-shadow:
        0 0 20px rgba(255, 193, 7, 0.24);

    transition:
        transform .20s ease,
        background .25s ease,
        box-shadow .25s ease,
        color .25s ease;
}

.login-button:hover {
    background: linear-gradient(
        135deg,
        #ffc107,
        #ffcf3c
    );

    color: #063b78;

    transform: translateY(-1px);

    box-shadow:
        0 8px 24px rgba(255, 193, 7, 0.28);
}

.login-button:focus {
    outline: none;

    box-shadow:
        0 0 0 4px rgba(255, 193, 7, 0.15),
        0 0 22px rgba(255, 193, 7, 0.25);
}

.login-button:active {
    transform: translateY(0);
}


/* =========================================================
   25. BUTTON TITLE
========================================================= */

.login-button .btn-title {
    flex: 1;

    text-align: center;

    line-height: 1;
}


/* =========================================================
   26. BUTTON ARROW
========================================================= */

.login-arrow {
    width: 36px;
    height: 36px;
    min-width: 36px;

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

    border-radius: 50%;

    background: #f7faff;
    color: #063b78;

    font-size: 14px;

    transition:
        background .25s ease,
        color .25s ease;
}

.login-button:hover .login-arrow {
    background: #063b78;
    color: #ffc107;
}


/* =========================================================
   27. BOTTOM LINKS
========================================================= */

.login-bottom {
    width: 100%;

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

    flex-wrap: wrap;

    gap: 5px;

    margin: 20px 0 0;
    padding: 0 0 5px;

    color: #8996a5;

    text-align: center;

    font-size: 12px;
    line-height: 1.5;
}

.login-bottom a {
    color: #ffc107;

    font-weight: 600;

    text-decoration: none;

    transition: color .20s ease;
}

.login-bottom a:hover {
    color: #fff;

    text-decoration: none;
}

.login-bottom span {
    margin: 0 4px;

    color: #ffc107;

    font-size: 16px;
}


/* =========================================================
   28. EXTRA LINKS / TEXT
========================================================= */

.login-extra {
    width: 100%;

    margin-top: 15px;

    color: #8996a5;

    text-align: center;

    font-size: 13px;
    line-height: 1.5;
}

.login-extra a {
    color: #ffc107;
    text-decoration: none;
}

.login-extra a:hover {
    color: #fff;
}


/* =========================================================
   29. SUCCESS CONTENT
========================================================= */

.success-content {
    width: 100%;

    padding: 10px 0 5px;

    text-align: center;
}


/* =========================================================
   30. SUCCESS ICON
========================================================= */

.success-icon {
    width: 90px;
    height: 90px;

    margin: 0 auto 22px;

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

    border: 5px solid #ffc107;
    border-radius: 50%;

    background: #198754;

    box-shadow:
        0 0 25px rgba(255, 193, 7, 0.35);
}

.success-icon i {
    color: #fff;

    font-size: 42px;
}


/* =========================================================
   31. SUCCESS TITLE
========================================================= */

.success-title {
    margin: 0 0 12px;

    color: #ffc107;

    font-size: 28px;
    font-weight: 700;

    line-height: 1.3;
}


/* =========================================================
   32. SUCCESS MESSAGE
========================================================= */

.success-message {
    max-width: 390px;

    margin: 0 auto 25px;

    color: #b7c0ca;

    font-size: 15px;
    line-height: 1.7;
}

.success-message strong {
    color: #198754;
}


/* =========================================================
   33. SUCCESS BUTTON
========================================================= */

.success-button-wrapper {
    width: 100%;

    margin-top: 20px;
}

.success-button {
    width: 100%;

    height: 57px;
    min-height: 57px;

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

    padding: 7px 8px 7px 22px;

    border: 0;
    border-radius: 12px;

    background: linear-gradient(
        135deg,
        #04366e,
        #0879ca
    );

    color: #fff;

    font-size: 15px;
    font-weight: 800;

    text-decoration: none;

    box-shadow:
        0 0 20px rgba(255, 193, 7, 0.20);

    transition:
        transform .20s ease,
        background .25s ease,
        color .25s ease;
}

.success-button:hover {
    color: #063b78;

    text-decoration: none;

    background: linear-gradient(
        135deg,
        #ffc107,
        #ffcf3c
    );

    transform: translateY(-1px);
}

.success-button .btn-title {
    flex: 1;
    text-align: center;
}

.success-arrow {
    width: 42px;
    height: 42px;
    min-width: 42px;

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

    border-radius: 50%;

    background: #ffc107;
    color: #111;
}

.success-arrow i {
    font-size: 16px;
}


/* =========================================================
   34. TABLET
========================================================= */

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

    .login-page {
        min-height: 100vh;

        padding: 35px 20px 45px;
    }

    .login-container {
        max-width: 600px;
    }

    .login-box {
        max-width: 600px;
    }

    .login-right {
        padding: 40px;
    }

    .login-card {
        max-width: 500px;
    }
}


/* =========================================================
   35. MOBILE
========================================================= */

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

    html {
        overflow-x: hidden;
        overflow-y: auto;
    }

    body {
        min-height: 100vh;

        overflow-x: hidden;
        overflow-y: auto;

        background: #02152f;
    }

    .login-page {
        width: 100%;

        min-height: 100vh;

        display: flex;
        align-items: flex-start;
        justify-content: center;

        padding: 18px 10px 45px;

        overflow: hidden;
    }

    .login-page::before {
        width: 220px;
        height: 220px;

        top: -115px;
        left: -100px;

        border-width: 28px;
    }

    .login-page::after {
        width: 220px;
        height: 220px;

        right: -105px;
        bottom: -105px;

        border-width: 28px;
    }

    .login-container {
        width: 100%;
        max-width: 500px;

        margin: 0 auto;
    }

    .login-box {
        width: 100%;
        max-width: 500px;

        border-radius: 18px;
    }

    .login-right {
        width: 100%;

        padding: 28px 18px 32px;
    }

    .login-card {
        width: 100%;
        max-width: none;
    }

    .login-logo {
        margin-bottom: 12px;
    }

    .login-logo img {
        width: 105px;
        max-width: 60%;
    }

    .login-title {
        font-size: 25px;
        line-height: 1.2;
    }

    .login-line {
        width: 55px;
        height: 4px;

        margin: 9px auto;
    }

    .login-subtitle {
        margin-bottom: 21px;

        font-size: 12px;
        line-height: 1.45;
    }

    .login-field {
        margin-bottom: 14px;
    }

    .login-field-icon {
        left: 16px;
        font-size: 14px;
    }

    .login-card input,
    .login-card select {
        height: 51px;
        min-height: 51px;

        padding: 0 15px 0 46px;

        font-size: 14px;

        border-radius: 10px;
    }

    .login-card textarea {
        min-height: 100px;

        padding: 14px 15px 14px 46px;
    }

    /* Register becomes single column */

    .form-row-2 {
        display: block;
    }

    .form-row-2 .login-field {
        width: 100%;
        flex: 0 0 100%;
    }

    .login-field .field-validation-error,
    .login-field span.field-validation-error {
        font-size: 11px;
    }

    .error-box {
        margin-bottom: 16px;
    }

    .error-box .alert {
        padding: 9px 10px;

        font-size: 12px;
    }

    .login-button-wrapper {
        margin-top: 7px;
    }

    .login-button {
        width: 100%;

        height: 53px;
        min-height: 53px;

        border-radius: 11px;

        font-size: 14px;
    }

    .login-arrow {
        width: 33px;
        height: 33px;
        min-width: 33px;
    }

    .login-bottom {
        margin-top: 15px;

        padding-bottom: 3px;

        font-size: 11px;
    }

    .login-bottom span {
        font-size: 15px;
        margin: 0 3px;
    }

    /* Success */

    .success-content {
        padding: 5px 0 0;
    }

    .success-icon {
        width: 76px;
        height: 76px;

        margin-bottom: 18px;
    }

    .success-icon i {
        font-size: 35px;
    }

    .success-title {
        margin-bottom: 10px;

        font-size: 23px;
    }

    .success-message {
        margin-bottom: 20px;

        font-size: 13px;
        line-height: 1.6;
    }

    .success-button {
        height: 53px;
        min-height: 53px;

        padding-left: 17px;

        font-size: 14px;
    }

    .success-arrow {
        width: 38px;
        height: 38px;
        min-width: 38px;
    }
}


/* =========================================================
   36. SMALL MOBILE
========================================================= */

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

    .login-page {
        padding: 12px 8px 40px;
    }

  
      .login-box {
        border-radius: 16px;
                margin-top: 90px;
    
    }

    .login-right {
        padding: 24px 15px 30px;
    }

    .login-logo {
        margin-bottom: 9px;
    }

    .login-logo img {
        width: 94px;
    }

    .login-title {
        font-size: 22px;
    }

    .login-line {
        width: 50px;
        height: 4px;

        margin: 7px auto;
    }

    .login-subtitle {
        margin-bottom: 18px;

        font-size: 11px;
    }

    .login-field {
        margin-bottom: 11px;
    }

    .login-field-icon {
        left: 15px;
        font-size: 13px;
    }

    .login-card input,
    .login-card select {
        height: 48px;
        min-height: 48px;

        padding-left: 43px;

        font-size: 13px;
    }

    .login-card textarea {
        min-height: 92px;

        padding-left: 43px;
    }

    .login-button {
        height: 50px;
        min-height: 50px;

        font-size: 13px;
    }

    .login-arrow {
        width: 31px;
        height: 31px;
        min-width: 31px;
    }

    .login-bottom {
        margin-top: 12px;

        font-size: 10px;
    }

    .success-icon {
        width: 68px;
        height: 68px;
    }

    .success-icon i {
        font-size: 30px;
    }

    .success-title {
        font-size: 21px;
    }

    .success-message {
        font-size: 12px;
    }

    .success-button {
        height: 50px;
        min-height: 50px;

        font-size: 13px;
    }
}


/* =========================================================
   37. VERY SMALL MOBILE
========================================================= */

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

    .login-right {
        padding: 21px 12px 27px;
    }

      .login-box {
        border-radius: 16px;
                margin-top: 90px;
    
    }
    .login-logo img {
        width: 88px;
    }

    .login-title {
        font-size: 20px;
    }

    .login-subtitle {
        font-size: 10px;
    }

    .login-card input,
    .login-card select {
        padding-left: 40px;

        font-size: 12px;
    }

    .login-field-icon {
        left: 13px;
    }

    .login-bottom {
        font-size: 9px;
    }

    .login-bottom span {
        display: none;
    }
}


/* =========================================================
   38. LANDSCAPE MOBILE
========================================================= */

@media screen and (max-width: 767px) and (orientation: landscape) {

    .login-page {
        align-items: flex-start;

        padding: 12px 15px 30px;
    }

    .login-right {
        padding: 22px 25px 28px;
    }

    .login-logo img {
        width: 82px;
    }

    .login-title {
        font-size: 21px;
    }

    .login-subtitle {
        margin-bottom: 15px;
    }

    .login-card input,
    .login-card select {
        height: 46px;
        min-height: 46px;
    }

    .login-button {
        height: 48px;
        min-height: 48px;
    }
}