.base-container {
    width: 100vw;
    height: 100vh;
} 

.mob-container {
    display: none;
}

.desk-container {
    width: 100vw;
    height: 100vh;
    display: flex;
}

.desk-container .left-area,
.desk-container .right-area {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 1rem;
}

.desk-container .left-area {
    width: 320px;
    background-color: #0d5d2f;
    color: white;
}

.left-area .profil {
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: 0.5rem;

    margin-bottom: 1.5rem;
}

.left-area .profil img {
    width: 10rem;
    height: 10rem;
    border-radius: 50%;
    object-fit: cover;
}

.left-area .menu .menu-item {
    display: flex;
    column-gap: 0.5rem;
    align-items: center;
    padding: 0.25rem 0;

    text-decoration: none;
}

.menu-item i {
    font-size: 1.5rem;
}

.base-container .right-area {
    flex: 1;
}

.right-area h3 {
    margin-bottom: 1rem;
}

@media screen and (orientation: portrait) {
        .desk-container 
        {
            display: none;
        }
        
        .base-container {
            background-color: rgba(13, 93, 47, 0.4);
        }
        
        .mob-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            height: 100vh;
        }
    
        .mob-container .header {
            background-color: white;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
    
            width: 100%;
            /*height: 6rem;*/
        }
    
        .mob-container .header h3 {
            margin: 0.75rem 0 0;
        }
    
        .mob-container .header label {
            margin-bottom: 0.75rem;
        }
    
        .mob-container .body {
            padding: 2rem;
            display: flex;
            flex-direction: column;
            align-items: center;
            row-gap: 0.5rem;
    
            width: 100%;
            height: calc(100vh - 55px);
        }
    
        .body .list-item {
            width: 100%;
            height: calc(100% - 30px);
        }
    
        .mob-container table {
            overflow-x: auto;
            display: block;
        }
    
}