body {
    background: #020024;
    background: linear-gradient(158deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 37%, rgba(7,65,158,1) 56%, rgba(0,212,255,1) 100%);
    display: flex;
    height: calc(100vh - 40px);
    flex-direction: column;
    /* justify-content: center; */
    align-items: center;
    gap: 20px;
    font-family: Helvetica, Arial, sans-serif;
    margin: 20px;
}

.indent {
    background-color: #303030;
    padding: 4px 10px;
    border-radius: 5px;
    font-size: 24px;
    display: flex;
    flex-direction: row;
    justify-content:space-between;
    align-items:center;
    gap: 10px;
    /* position: relative;
    overflow: hidden; */
}
.indent i {
    font-size: 24px;
    /* width: 20px; */
    /* padding-right: 6px; */
    /* position: relative;  Needed for the absolute positioning of the pseudo-element */
    /* border-right: 4px solid #1e1e1e; */
}

.btn {
    border: none;
    color: white;
    font: Helvetica, Arial, sans-serif;
    font-size: 24px;
    cursor: pointer;
    border: #303030 1px solid;
    width: 100%;
}

.active-btn {
    border: #01ccfa 1px solid;
}

.btn:hover, .app-item:hover {
    border: #01ccfa 1px solid;
}

/* .indent i::after {
    content: '';
    position: absolute;
    right: -5px;
    top: -10px;
    bottom: -10px;
    width: 5px;
    background: #1e1e1e;
} */


.calender-window {
    font-size: 18px;
    height: 28px;
}

.box { 
    background-color: #1e1e1e;
    border-radius: 10px;
    border: #01ccfa 1px solid;
    color: white;
    overflow: hidden;
}

.header-outline {
    width: 85%;
    height: 15%;
    background-color: #01ccfa;
    border-radius: 10px;
    position: relative;
    overflow: hidden;
}

.header {
    position: absolute;
    left: 1px;
    top: 1px;
    height: calc(100% - 2px);
    width: calc(100% - 2px);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: space-evenly;
    background-color: #1e1e1e;
    border-radius: 10px;
    color: white;
    overflow: hidden;
}

.spinner {
    position: absolute;
    background-color: white;
    animation: spin 3s linear infinite;
    --spinner-width-horz: 200px;
    --spinner-height-vert: 50px;
    display: none;
}

@keyframes spin {
    0% { top: 0; left: 0; transform: translate(0, 0); width: var(--spinner-width-horz); height: 3px;}
    30% { top: 0; left: 100%; transform: translate(-100%, 0); width: var(--spinner-width-horz); height: 3px;} 
    35% { top: 0; left: 100%; transform: translate(-100%, 0); width: 3px; height: var(--spinner-height-vert);}
    45% { top: 100%; left: 100%; transform: translate(-100%, -100%); width: 3px; height: var(--spinner-height-vert);}
    50% { top: 100%; left: 100%; transform: translate(-100%, -100%); width: var(--spinner-width-horz); height: 3px;}
    80% { top: 100%; left: 0; transform: translate(0, -100%); width: var(--spinner-width-horz); height: 3px;}
    85% { top: 100%; left: 0; transform: translate(0, -100%); width: 3px; height: var(--spinner-height-vert);}
    95% { top: 0; left: 0; transform: translate(0, 0); width: 3px; height: var(--spinner-height-vert);}
    100% { top: 0; left: 0; transform: translate(0, 0); width: var(--spinner-width-horz); height: 3px;}
} 


.header {
    .title {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-evenly;
        gap: 15px;
        margin: 10px;
    }
    .title 
        .logo-container {
            height: 100%;
            aspect-ratio: 1/1;
            position: relative;
        }
        img {
            width: 100%;
        }
        h1 {
            margin: 0;
            font-size: 50px;
            height: 50px;
            width: 100%; 
        }
    .info-window {
        display: flex;
        flex-direction: row;
        align-items: space-evenly;
        gap: 15px;
        margin: 10px;
    }
    
    .left-column {
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        gap: 10px;
    }
    .right-column {
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        gap: 10px;
    }

    #loadingCircle {
        width: 80%;
        height: 80%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        border-radius: 75%;
        border: 4px solid #f3f3f3;
        border-top: 4px solid #01ccfa;
        animation: spin 0.75s linear infinite;
        display: none;
    }
    
}

#moduleBox {
    overflow-y: auto;
}

.module {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.modules {
    width: 85%;
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

.modules {
    .left {
        height: 100%;
        width: 22%;
        display: flex;
        flex-direction: column;

        gap: 20px;
    }
    .right {
        height: 100%;
        width: 78%;
        display: block;
    }
}

.menu {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.menu {
    h1 {
        margin: 10px;
    }

    h2 {
        margin: 0;
    }

    .main {
        margin: 10px;
        width: calc(100% - 20px);
    }
    .vert-menu {
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: space-evenly;
        gap: 10px;
    }
    .horz-menu {
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        align-items: space-evenly;
        gap: 10px;
    }

    .apps {
        max-width: 100%;
        flex-wrap: wrap;
    }
    .app-item{
        width: 65px;
        height: 65px;
        background-color: #303030;
        border-radius: 5px;
        display: flex; 
        justify-content: center;
        align-items: center;
        color: white;
        font-size: 50px;
        text-decoration: none;
        border: #303030 1px solid;
    }
}



.password-box {
    width: 100%;
    height: 100%;
}

.login-box {
    width: 35%;
    height: 35%;
    margin-top: 10%;
}


.password-box, .login-box {
    #lock {
        font-size: 150px;
    }


    #lockContainer {
        position: relative;
        height: 150px;
    }
    
    #loadingCircle {
        width: 100px;
        height: 100px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        border-radius: 75%;
        border: 4px solid #f3f3f3;
        border-top: 4px solid #01ccfa;
        animation: spin 1s linear infinite;
        display: none;
    }
    
    div {
        display: block;
    }

    .info {
        margin: 0 0;
        background-color: #303030;
        border-radius: 5px;
        padding: 5px 20px;
        color: rgb(143, 143, 143);
        display: none;
    }

    .show {
        display: block;
    }

    .error {
        color: rgb(154, 0, 0);
        display: block;
    }

    input {
        width: 60%;
        height: 30px;
        border-radius: 5px;
        border: #01ccfa 1px solid ;
        background-color: #1e1e1e;
        text-align: center;
        color: white;
        padding: 0 0;
    }

    input:focus {
        border: #01ccfa 1px solid;
        outline: none;
    }

    .btn {
        width: 20%;
        height: 30px;
        border-radius: 5px;
        background-color: #01ccfa;
        color: #1e1e1e;
        text-align: center;
        color: white;
        border: #01ccfa 1px solid ;
        padding: 0 0;
        cursor: pointer;
    }

    .btn:hover {
        background-color: #65e3ff;
    }

    .row {
        width: 100%;
        text-align: center;
    }
}

/* Tablet Styles */
@media screen and (max-width: 1023px) {
    .main-box {
        width: 60%;
    }
}
    
/* Mobile styles */
@media screen and (max-width: 767px) {
    .main-box {
        width: 90%;
    }
}