/* Styles for Large Screens (Desktops and Large Laptops) */
@media screen and (min-width: 1024px) {
    /* Add your styles for large screens here */
}

/* Styles for Medium Screens (Laptops and Tablets) */
@media screen and (min-width: 600px) and (max-width: 1023px) {
    /* Add your styles for medium screens here */
}

/* Styles for Small Screens (Small Tablets and Smartphones) */
@media screen and (max-width: 599px) {
    /* Add your styles for small screens here */
}

/* Styles for Small Smartphones */
@media screen and (max-width: 319px) {
    /* Add your styles for small smartphones here */
} 


@media (max-width: 768px) {
    .profile-block {
        width: 100%;
        margin-right: 0;
        margin-bottom: 15px;
    }

    .profile-picture-circle {
        width: 150px;
        height: 150px;
        position: absolute;
        background-color: var(--bg-color);
        border-radius: 50%;
        border: 2px solid var(--primary-color);
    }
    
    .user-info-main {
        flex-direction: column;
        width: 100%;
        padding: 0;
    }

    .prof-table {
        flex-direction: column;
        margin-top: 100px;
    }

    .user-details-table {
        width: 100%;
        margin-top: inherit;
    }

    .user-details-main {
        margin-left: 0;
        padding: 0;
    }

    .user-details-table td {
        display: flex;
        padding: 6px 15px;
        margin: 5px;
    }

    .user-info-title {
        font-size: 24px;
        text-align: start;
    }

    .sidebar{
        z-index: 10;
    }
    .burger-icon{
        z-index: 11;
    }

    /* Sidebar overlay */
    .overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 9;
        display: none; 
    }

    .modal-footer.grade {
        margin-left: 0px;
        border-top: none;
    }

    .modal-content {
        position: relative;
        display: flex;
        flex-direction: column;
        width: 100%; 
        color: var(--bs-modal-color);
        pointer-events: auto;
        background-color: var(--bs-modal-bg);
        background-clip: padding-box;
        border: var(--bs-modal-border-width) solid var(--bs-modal-border-color);
        border-radius: var(--bs-modal-border-radius);
        outline: 0;
    }
    #popupForm .modal-dialog {
        max-width: 95%;
        margin: 10px;
    }
    
    #popupForm .modal-dialog {
        max-width: 500px;
    }
    
    .message-row {
        display: flex;
        align-items: start;
        gap: 10px;
    }
    
    .form-control {
        flex-grow: 1;
        max-width: none;
    }

    .btn.btn-primary.right {
        width: 100%;
        background-color: var(--primary-color);
        border: none;
        color: var(--secondary-color);
        margin: 0;
    }
    
    .btn.btn-primary {
        width: fit-content; 
        margin: 16px;
        margin-left: 0px;
        background-color: var(--primary-color);
        border: 1px solid #fff !important;
        color: var(--bg-color) !important;
    }


    .btn.btn-primary.send{
        width: 60px;
        margin: 0px;
        margin-left: 0px;
        background-color: var(--primary-color);
        border: 1px solid #fff !important;
        color: var(--bg-color) !important;
    }

    .btn.btn-secondary.w-30 {
        margin-left: 1px !important;
      }



}