/*#region main*/
body {
    overflow: hidden;
    height: 100vh;
    display: flex;
    flex-direction: column;
}

body[data-layout="topnav"] .footer {
    left: 0px !important;
}

.wrapper{
    overflow : auto;
}

.footer {
    padding: 20px !important;
    background-color: var(--body-background-color);
    position: sticky;
    z-index: 0;
}

.page-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

#topSearch {
    color: var(--secondary) !important;
}

#navbar-toggle {
    display: block !important;
}

h1 {
    font-size: 32px
}

.disabled {
    pointer-events: none;
    opacity:0.6;
}

.page-header-detail {
    font-size: 1rem;
}

#mainContainer {
    display: flex;
    height: 100%;
}

.mainContent {
    display: flex;
    box-sizing: border-box;
}

.clasContent {
    flex: 1;
    scrollbar-width: thin;
    padding-top: 10px;
    max-width: 100vw;
}

.content-page {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.breadcrumbs-horizontalrule {
    width: 100%;
    border-color: #e7e7e7;
    border-width: 2px;
    margin-left: 24px;
}

.btn-primary.btn-fill:hover, 
.btn-primary.btn-fill:focus, 
.btn-primary.btn-fill:active, 
.btn-primary.btn-fill.active, 
.open > .btn-primary.btn-fill.dropdown-toggle {
    background-color: var(--primary-dark) !important;
    border-color: var(--primary-dark);
    color: #FFFFFF;
}

.modal-dialog {
    max-width: 50% !important;
    min-width: 550px !important;
}

.status-badge-container {
    display: inline-grid;
    gap: 5px;
    pointer-events: none;
}

.ctrl-held {
    text-decoration: underline;
    color: blue;
    cursor: pointer;
    background-color: #eef5ff;
}

/*#endregion*/

/*#region nav*/
#leftNav {
    transition: width 0.4s ease-in-out;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.1), 0 6px 10px 0 rgba(0, 0, 0, 0.1);
    z-index: 1;
}

.leftnav-collapsed {
    width: 0;
    
}
.leftnav-expanded {
    width: 250px;
}
.lines{
    width: auto !important;
}

.collapsed {
    /*width: 0px !important;*/
}

.topnav-navbar {
    left: 250px !important;
    position: static;
}

.topnav-logo {
    text-align: center;
    width: 250px;
    padding: 0px !important;
    transition: width 0.4s ease-in-out !important;
}

.topnav-logo img{
    width: 90%;
}

.nav {
    position: relative;
    z-index: 999;
}

#side-menu li {
    height: 50px;
    color: var(--navbar-left-a-color);
    text-wrap-mode: nowrap;
}

#side-menu li.active {
    border-left: 4px solid var(--primary);
    background-color: rgba(103, 106, 108, 0.03);
}

#side-menu > li > a {
    color: var(--navbar-left-a-color) !important;
}

.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link {
     background-color:transparent; 
}

.nav-tabs {
     border-bottom: 0px; 
}

.nav-tabs.nav-bordered {
     border-bottom: 0px; 
}

.navbar-static-side {
    background-color: var(--navbar-left-background-color);
}

.nav > li:hover {
    cursor: pointer;
    background-color: rgba(103, 106, 108, 0.05);
}
.nav > li > a {
    font-weight: var(--font-weight-medium);
    padding: 14px 18px 14px 18px;
    text-decoration: none;
    font-size: 1rem;
    display: block;
    width: 100%;
}

.nav > li > a i {
    margin-right: 6px;
    font-size: 0.95rem;
}

.nav > li {
    align-content: center;
}

.nav-header {
    display: flex;
    text-align: center;
    align-items: center;
    background-color: var(--primary);
    height: 70px;
}

.top-side-nav {
    width: 100%;
    flex: 1;
}

.bottom-side-nav {
    overflow: hidden;
    width: 100%;
    border-top: 1px solid #e7eaec !important;
}

.bottom-side-nav > a {
    text-decoration: none;
    padding: 0px !important;
    font-size: 0.95rem !important;
}

.bottom-side-nav li {
    width: 100%;
    height: 100%;
    padding: 5px;
    display: block;
    text-wrap-mode: nowrap;
}

/*#endregion*/

/*#region discussions*/

.discussion-head {
border: 2px solid #e7e7e7;
border-radius: 5px;
display: flex;
flex-direction: column;
margin: 20px 0px;
padding: 20px;
}

.head-tools {
    display: flex;
    align-items: center;
    margin-left: auto;
    margin-right: 0px;
    gap: 0.5rem;
}

.head-tools > i:hover {
    cursor: pointer;
}

/*#endregion*/

/*#region modules*/



/*#endregion*/

/*#region assignments*/

.assignment-summernote {
    padding: 10px;
    overflow: auto;
    border-radius: 5px;
    background-color: #fff;
    width: 100%;
    max-height: 800px;
    min-height: 500px
}

.resizable-both {
    resize: both;
}

.gradeTextbox {
    width: 50px;
    text-align: center;
}

.subCommentContainer {
    display:flex;
    flex-direction:row;
    align-items:flex-end;
    margin-top:20px;
}

.subCommentTextArea {
    min-height: 100px;
    resize: none;
}

.submission-detail-modal-content{
    width: max-content;
}

/*#endregion*/

/*#region announcements*/
.announcementsListItem {
    display: flex;
    align-items: center;
    flex-direction: row;
}
.announcementsListItem > p {
    margin-bottom: 0px !important;
}

.announcement-dates {
    padding-left: 20px;
    display: flex;
    flex-direction: column;
    margin-left: auto;
    white-space: nowrap;
    float: right;
}
.announcement-header {
    display: flex;
    align-items: center;
    color: var(--secondary);
}

/*#endregion*/

/*#region media queries*/

@media (max-width: 768px) {
    .topnav-logo {
        width: 220px;
        transition: width 0.4s ease-in-out !important;
    }

    .leftnav-expanded {
        width: 220px;
    }

    #leftNav .nav > li > a {
        font-size: 13px;
        padding: 10px;
    }

    #leftNav .fa {
        font-size: 14px;
        margin-right: 5px;
    }

    #leftNav .bottom-side-nav {
        font-size: 13px;
    }

    .footer {
        padding: 4px !important;
        height: 52px !important;
    }

    #topnavSearch {
        left: -130% !important;
    }

    .navbar-toggle {
        margin: 27px 10px !important;
    }
}

@media (max-width: 540px) {
    .topnav-logo {
        width: 30% !important;
        margin-right: 0px;
    }

    #navbar-toggle {
        display: block !important;
    }

    .modal-dialog {
        max-width: 100% !important;
        min-width: 100% !important;
        margin-right: auto;
        margin-left: auto;
        padding: 10px;
    }

    .table-sm tr {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .footer {
        padding: 5px !important;
        height: 52px;
    }

    .dropdown-menu-animated.show {
        top: 70px !important;
    }

    .container-fluid {
        display: contents;
    }

    #topnavSearch {
        left: 0% !important;
    }

    .page-header {
        flex-direction: column !important;
    }

    .announcementsListItem {
        flex-direction: column;
    }

    .announcement-dates {
        margin: auto;
    }

    .course-content-buttons {
        display: flex;
        flex-direction: column;
        gap: 5px;
    }
}

@media (max-width: 430px) {
    #topnavSearch {
        left: 0% !important;
    }
    .card-body {
        overflow: auto !important;
    }
    .announcement-header {
        flex-direction:column;
    }
    .navbar-toggle {
        margin: 27px 5px;
    }
}

@media (max-width: 375px){
}

/*#endregion*/