/* ((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((((( */
/* Desktop Styles */
/* ))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))) */

@import url('./mobile.css');

@media screen and (min-width:382px) {
    /*  */
}

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

    /* Login Page */
    /* ==================================================================== */

    /* End of 435px */
}

/* Tablet Computers */
@media screen and (min-width:786px) {

    /* Body Settings */
    /* ============================================================= */
    body::-webkit-scrollbar {
        width: .4rem;
        height: .1rem;
        /* height: 1rem; */
    }

    body::-webkit-scrollbar-track {
        box-shadow: outset .5px .5px .5px rgba(0, 0, 0, 0.3);
        border: .5px solid darkgrey;
        border-radius: 1rem;
        /* background-color: var(--p-2); */
        background-color: lightgrey;
    }

    body::-webkit-scrollbar-thumb {
        background-color: var(--scroll);
        outline: .5px solid var var(--scroll);
        border-radius: 1rem;
        /* box-shadow: outset .5px .5px .5px rgba(0, 0, 0, 0.3); */
        /* background-color: var(--p-4); */
        background-color: grey;
    }

    /* Login Page */
    /* ====================================================================== */
    /* Top Mobile Header */
    .login-page-new {
        flex-direction: row;
        width: 100%;
    }

    /* Hide for desktop */
    /* ------------- */
    .mobile-logo-top {
        display: none;
    }

    /* ------------- */

    /* Login Banner */
    .login-banner {
        position: fixed;
        width: 30%;
        background: var(--b-8);
        height: 100%;

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

    .login-container {
        display: flex;
        flex-direction: column;
        justify-content: center;
        /* border: 1px solid red; */
        align-items: center;
    }

    /* Mobile Logo Container */
    .desktop-logo-top {
        display: block;
        /* width: 10rem; */
        /* height: 5rem; */
        /* width: 60%; */
        width: 70%;
        margin: auto;
    }

    .mobile-logo {
        width: 100%;
        height: 100%;
    }

    .logo-and-heading {
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    /* Platform description: Online Banking Platform */
    .login-heading-text {
        color: var(--g-1);
        font-size: 1.6rem;
        margin: 1rem 0rem;
        text-align: center;
        font-family: var(--fam-3);
        font-weight: 500;
    }

    /* Platform name: Citrus */
    .login-heading-system {
        color: var(--g-1);
        font-size: 2.3rem;
        font-weight: 600;
        font-family: var(--fam-3);
    }

    .intersection {
        position: absolute;
        bottom: 0rem;
        left: 0rem;
        width: 45%;
        width: 45%;
        /* border: 1px solid red; */
    }

    .intersection-image {
        width: 100%;
        height: 100%;
    }

    /* Login Form */
    /* ----------------------------------------- */
    .login-form-new {
        /* background-color: var(--t-5); */
        /* width: 400px; */
        width: 350px;
        z-index: 1000;

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

        /* border: 1px solid #f1f1f1; */
        /* border: 1px solid #f0f0f0; */
        border: 1px solid #e9e9e9;

        padding: 2rem;
    }

    .login-wrapper {
        width: 27rem;
        border-radius: 2rem;
        background-color: var(--g-1);
        padding: 2.5rem 0rem;
        border: 1px solid rgb(210, 211, 210);
    }

    .login-heading {
        font-size: 1.8rem;
        font-family: var(--fam-3);
        font-weight: 700;
    }

    .login-text {
        font-size: .9rem;
        font-family: var(--fam-1);
        font-weight: 500;
        margin-bottom: .5rem;
    }

    .input-container {
        /* padding: 0rem 5rem; */
        margin-top: .3rem;
    }

    .login-input {
        /* border-radius: 5px; */
        border-radius: 0px;
        /* width: 100%; */
        padding: .5rem 1rem;
    }


    /* Sidebar */
    /* ======================================================================= */
    .sidebar {
        position: fixed;
        z-index: 100;
        background-color: var(--b-7);
        top: 0rem;
        /* height: 100%; */
        height: 100vh;
        width: 17rem;
        /* border: 1px solid red; */
        transition: ease-in-out;
        display: block;
    }

    .sidebar-header {
        padding-top: .6rem;
    }

    /* Sidebar buttons */
    .open-menu-mobile,
    .close-menu-mobile, .maximize-button {
        display: none;
    }

    .open-menu-desktop,
    .minimize-menu-desktop {
        display: flex;
    }

    .minimize-button {
        padding-right: .3rem;
    }

    /* Dashboard */
    /* ==========================================================================*/
    .dashboard {
        margin-left: 17rem;
    }

    .dashboard-header {
        width: 100%;
        border: 1px solid green;
    }

    /* End of 786px */
}

/* Small Laptop Computers */
@media screen and (min-width: 992px) {}