html {
    height: 100%;
    /*scroll-margin-top: 60px;  //height of sticky header */
}

body {
    height: 100%;
    padding-top: 52px;
}

h4 {
    font-size: 1.4rem;
}

a {
    text-decoration: none;
}

ol li {
    padding-left: 5px;
}

/* th{
    padding-left: 10px;
    padding-right: 10px;
} */

.bootstrap-font {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.center{
    text-align: center;
}

.bold{
    font-weight: bold;
}

.background-gray{
    background-color: whitesmoke;
}

.background-white{
    background-color: white;
}

.background-teal{
    background-color: #069a9a;
}

.background-blue{
    background-color: aliceblue;
}

.text-teal{
    color: teal;
}

.va-baseline{
    vertical-align: baseline;
}

.mtable{
    padding-left:10px;
    padding-right:10px;
}

.navbar{
    z-index: 20000;
    padding-top:2px; 
    padding-bottom: 2px; 
    /* background-color: black !important; */
}

.navbar-pic{
    width: 40px;
    padding-top: 3px;
    padding-bottom: 3px;
}

.navbar-pic-link{
    margin-left: 15px;
}

@media (max-width: 991px) {
    .navbar-pic-link{
        margin-left: 5px;
    }
}

.nav-item{
    padding-top: 10px;
    padding-bottom: 10px;
}

.navbar-brand-course{
    /* color: #e25650 !important; */
    color: #58cac9 !important;
    font-weight: 500;
    letter-spacing: 0.05em;
    padding-left: 1.75rem;
    font-size: 17px;
}

.navbar-menu-item{
    padding-top: 0.15rem !important;
    padding-bottom: 0.15rem !important;
    font-size: 15px;
}

.modal-dialog{
    margin-top: 50px;
}

/* The following makes navbar dropdown menus appear on hover */
/*@media all and (min-width: 992px) {
    .navbar .nav-item .dropdown-menu{ display: none; }
    .navbar .nav-item:hover .nav-link{   }
    .navbar .nav-item:hover .dropdown-menu{ display: block; }
    .navbar .nav-item .dropdown-menu{ margin-top:0; }
}*/

.dropdown-menu{
    -webkit-box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    -moz-box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    max-height: 90vh;
    overflow-y: auto;
}

li p{
    margin-bottom: 7px;
}

.alert p{
    margin-bottom: 0px;
}

.float-right{
    float: right;
}

.float-left{
    float: left;
}

.video-embed {
    position: relative;
    padding-bottom: 54%; /* 16:9 */
    padding-top: 25px;
    height: 0;
    border: 1px solid gray;
}

.video-embed iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.bold{
    font-weight: bold;
}

.hover-highlight:hover{
    background-color: #d7ecff !important;
}

.no-decoration:hover{
    text-decoration: none !important;
    color:inherit;
}

.no-decoration{
    color:inherit;
    text-decoration: none !important;
}

.no-decoration-hover:hover{
    text-decoration: none !important;
}

.maroon{
    color: rgb(165, 0, 0, 1);
}

.white{
    color: white !important;
}

.gray{
    color: gray !important;
}

.black{
    color: #212529 !important;
}

.dimgray{
    color: dimgray !important;
}

.blue{
    color: #0d6efd !important;
}

.teal{
    color: teal !important;
}

.darkcyan{
    color: darkcyan !important;
}

.semi-strong{
    font-weight: 500;
}

.fs-5-5{
    font-size: 1.1rem;
}

.fs-10{
    font-size: 10px;
}

.fs-11{
    font-size: 11px;
}

.fs-12{
    font-size: 12px;
}

.fs-13{
    font-size: 13px;
}

.fs-14{
    font-size: 14px;
}

.fs-15{
    font-size: 15px;
}

.fs-16{
    font-size: 16px;
}

.fs-20{
    font-size: 20px;
}

.fw-600{
    font-weight: 600;
}

.fw-500{
    font-weight: 500;
}

.hide, .initially-collapsed-region {
    top: 0;
    left:0;
    width:0;
    height:0;
    position: absolute;
    overflow: hidden;
    visibility: hidden;
}

.no-border{
    border: 0px !important;
}

.border-light{
    border: 1px solid lightgray !important;
}

.no-padding-right{
    padding-right: 0px;
}

.no-padding-top{
    padding-top: 0px;
}

.no-padding-bottom{
    padding-bottom: 0px;
}

.no-padding-left{
    padding-left: 0px;
}

.no-padding{
    padding: 0px;
}

.no-margin{
    margin: 0px !important;
}

.no-caret::after {
    display: none !important;
}

.my-1-5{
    margin-top: 0.375rem !important;
    margin-bottom: 0.375rem !important;
}

.my-0-5{
    margin-top: 0.125rem !important;
    margin-bottom: 0.125rem !important;
}

.mb-0-5{
    margin-bottom: 0.125rem !important;
}

.py-0-5{
    padding-top: 0.125rem !important;
    padding-bottom: 0.125rem !important;
}

.py-1-5{
    padding-top: 0.375rem !important;
    padding-bottom: 0.375rem !important;
}

.ps-3-5{
    padding-left: 1.2rem !important;
}

.px-1-5{
    padding-left: 0.375rem !important;
    padding-right: 0.375rem !important;
}

.pb-2-5{
    padding-bottom: 0.625rem !important;
}

.pb-4-5{
    padding-bottom: 2rem !important;
}

.px-2px{
    padding-left: 2px !important;
    padding-right: 2px !important;
}

.px-1px{
    padding-left: 1px !important;
    padding-right: 1px !important;
}

.py-4-5{
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
}

.mb-4-5{
    margin-bottom: 2rem !important;
}

.ms-4-5{
    margin-left: 2rem !important;
}

.mt-4-5{
    margin-top: 2rem !important;
}

.me-2-5{
    margin-right: 0.625rem !important;
}

.mx-2px{
    margin-left: 2px !important;
    margin-right: 2px !important;
}

.me-2px{
    margin-right: 2px !important;
}

.mx-1px{
    margin-left: 1px !important;
    margin-right: 1px !important;
}

.ms-1px{
    margin-left: 1px !important;
}

.mt-1-5{
    margin-top: 0.375rem !important;
}

.p-1-5{
    padding: 0.375rem !important;
}

.pt-1px{
    padding-top: 1px !important;
}

.ps-2-5{
    padding-left: 0.625rem !important;
}

.mb-0-5{
    margin-bottom: 0.125rem !important;
}

.mt-2-5{
    margin-top: 0.625rem !important;
}

.ms-0-5{
    margin-left: 0.125rem !important;
}

.ms-1-5{
    margin-left: 0.375rem !important;
}

.nav-link-icon-text{
    font-size: 17px;
    padding-right: 1.1rem !important;
    padding-top: 0px;
    padding-bottom: 0px;
    color: lightgray !important;
}

.nav-icon{
    font-size: 25px;
    vertical-align: middle;
    padding-top: 5px;
    padding-bottom: 5px;
}

.nav-icon-messages{
    font-size: 21px !important;
    padding-top: 7px !important; 
}

.nav-icon-notifications{
    font-size: 22px !important;
    padding-top: 7px !important; 
}

.nav-icon-sliders{
    font-size: 21px !important;
    padding-top: 6px !important; 
}

.nav-item-icon{
    padding-top:2px;
}

.selected-background{
    background-color: #d7ecff !important;
}

.selected-background-blue{
    background-color: aliceblue;
}

.selected-background-yellow{
    background-color: #fdf5da !important;
}

.selected-background-yellow-light{
    background-color: #fffff6 !important;
}

.selected-background-teal, .background-teal-light{
    background-color: #e2f1f1 !important;
}

.selected-background-red{
    background-color: #fbeeee !important;
}

.selected-background-gray{
    background-color: #ebebeb !important;
}

.selected-1{
    border-bottom: 1px solid rgb(190, 0, 0) !important;
}

.selected-2{
    border-bottom: 2px solid rgb(190, 0, 0) !important;
}

.selected-3{
    border-bottom: 3px solid rgb(190, 0, 0) !important;
}

.selected-left{
    box-shadow: -2px 0px 0px 0px rgb(190, 0, 0) !important;
}

.selected-nav-text{
    border-bottom: 1px solid white !important;
    color: white;
}

.nav-link:hover .nav-text{
    color: white;
}

.nav-link:hover .nav-icon{
    color: white;
}


.title-gray-xs{
    font-weight: bold; 
    color: gray; 
    font-size: 14px;
}

.title-gray-sm{
    font-weight: bold; 
    color: gray; 
    font-size: 15px;
}

.title-gray-md{
    font-weight: bold; 
    color: gray; 
    font-size: 16px;
}

.title-gray-lg{
    font-weight: bold; 
    color: gray; 
    font-size: 17px;
}

.title-gray-xl{
    font-weight: bold; 
    color: gray; 
    font-size: 18px;
}

.blue-link{
    color: #0d6efd !important;
}

.blue-link:hover{
    color: #0d6efd !important;
    text-decoration: underline !important;
}

.dotted-link{
    color: inherit;
    border-bottom: 1px dotted #000;
    padding: 0px;
}

.dotted-link:hover{
    text-decoration: none !important;
}

.text-blue{
    color: #0d6efd;
}

.img-index{
    width: 100%;
}

.img-user{
    border-radius: 50%;
    border: 1px solid #D3D3D3;
    height:55px; 
    width:55px; 
    margin-right:10px;
}

.form-switch-label{
    vertical-align: sub;
}

.form-switch .form-check-input{
    height: 1.5em;
    width: 3em;
    margin-right: 10px;
}

.modal-close-icon{
    margin-right: 5px;
    font-size: 20px;
    vertical-align: text-top;
}

.shadow-depth-1{
    -webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.10);
    -moz-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.10);
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.10);
}

.shadow-depth-2{
    -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}

.hover-shadow-depth-2:hover{
    -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}

.hover-shadow-depth-3:hover{
    -webkit-box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    -moz-box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.text-align-justify{
    text-align: justify;
}

.modal-header{
    background-color: lightslategrey;
}

.modal-title{
    color: white;
}

.alert-date{
    font-size: 11px;
    color: gray;
    float: right;
}

.notification-date{
    font-size: 11px;
    color: gray;
}

.width-100{
    width: 100% !important;
}

.width-95{
    width: 95% !important;
}

.width-90{
    width: 90% !important;
}

.width-85{
    width: 85% !important;
}

.width-80{
    width: 80% !important;
}

.width-75{
    width: 75% !important;
}

.width-70{
    width: 70% !important;
}

.width-65{
    width: 65% !important;
}

.width-60{
    width: 60% !important;
}

.width-55{
    width: 55% !important;
}

.width-50{
    width: 50% !important;
}

.width-45{
    width: 45% !important;
}

.width-40{
    width: 40% !important;
}

.width-35{
    width: 35% !important;
}

.width-30{
    width: 30% !important;
}

.width-25{
    width: 25% !important;
}

.width-20{
    width: 20% !important;
}

.width-15{
    width: 15% !important;
}

.width-10{
    width: 10% !important;
}

.rounded-4{
    border-radius: 4px !important;
}

.top-0{
    top: 0 !important;
}

.px-30{
    padding-left: 30px !important;
    padding-right: 30px !important;
}

@media (min-width: 1500px) {
    .col-hg-1 { flex: 0 0 auto; width: 8.33%; }
    .col-hg-2 { flex: 0 0 auto; width: 16.66%; }
    .col-hg-3 { flex: 0 0 auto; width: 25%; }
    .col-hg-4 { flex: 0 0 auto; width: 33.33%; }
    .col-hg-5 { flex: 0 0 auto; width: 41.66%; }
    .col-hg-6 { flex: 0 0 auto; width: 50%; }
    .col-hg-7 { flex: 0 0 auto; width: 58.33%; }
    .col-hg-8 { flex: 0 0 auto; width: 66.66%; }
    .col-hg-9 { flex: 0 0 auto; width: 75%; }
    .col-hg-10 { flex: 0 0 auto; width: 83.33%; }
    .col-hg-11 { flex: 0 0 auto; width: 91.66%; }
    .col-hg-12 { flex: 0 0 auto; width: 100%; }
}

@media (min-width: 1500px) {
    .offset-hg-1 { margin-left: 8.33%; }
    .offset-hg-2 { margin-left: 16.66%; }
    .offset-hg-3 { margin-left: 25%; }
    .offset-hg-4 { margin-left: 33.33%; }
    .offset-hg-5 { margin-left: 41.66%; }
    .offset-hg-6 { margin-left: 50%; }
    .offset-hg-7 { margin-left: 58.33%; }
    .offset-hg-8 { margin-left: 66.66%; }
    .offset-hg-9 { margin-left: 75%; }
    .offset-hg-10 { margin-left: 83.33%; }
    .offset-hg-11 { margin-left: 91.66%; }
    /* No .offset-hg-12, since it would push the column entirely out of its container. */
}

@media (min-width: 1600px) {
    .col-xhg-1 { flex: 0 0 auto; width: 8.33%; }
    .col-xhg-2 { flex: 0 0 auto; width: 16.66%; }
    .col-xhg-3 { flex: 0 0 auto; width: 25%; }
    .col-xhg-4 { flex: 0 0 auto; width: 33.33%; }
    .col-xhg-5 { flex: 0 0 auto; width: 41.66%; }
    .col-xhg-6 { flex: 0 0 auto; width: 50%; }
    .col-xhg-7 { flex: 0 0 auto; width: 58.33%; }
    .col-xhg-8 { flex: 0 0 auto; width: 66.66%; }
    .col-xhg-9 { flex: 0 0 auto; width: 75%; }
    .col-xhg-10 { flex: 0 0 auto; width: 83.33%; }
    .col-xhg-11 { flex: 0 0 auto; width: 91.66%; }
    .col-xhg-12 { flex: 0 0 auto; width: 100%; }
}

@media (min-width: 1600px) {
    .offset-xhg-1 { margin-left: 8.33%; }
    .offset-xhg-2 { margin-left: 16.66%; }
    .offset-xhg-3 { margin-left: 25%; }
    .offset-xhg-4 { margin-left: 33.33%; }
    .offset-xhg-5 { margin-left: 41.66%; }
    .offset-xhg-6 { margin-left: 50%; }
    .offset-xhg-7 { margin-left: 58.33%; }
    .offset-xhg-8 { margin-left: 66.66%; }
    .offset-xhg-9 { margin-left: 75%; }
    .offset-xhg-10 { margin-left: 83.33%; }
    .offset-xhg-11 { margin-left: 91.66%; }
    /* No .offset-xhg-12, since it would push the column entirely out of its container. */
}


@media (min-width: 1170px) {
    .d-xl-alt-block {
        display: block !important;
    }
}

.like-btn{
    position: absolute;
    right: 10px;
    bottom: -10px;
    font-size: 11.5px;
    padding-top: 1px;
    padding-left: 5px;
    padding-right: 6px;
}

.like-btn-selected{
    background-color: #d7ecff !important;
    border: 1.5px solid teal !important;
}

.icon-like{
    color: teal;
    font-size: 13px;
}

.icon-like-unselected{
    color: gray;
    font-size: 13px;
}

.comment:hover .like-btn {
    display: block !important;
}

.comment-likes-indicator{
    font-size: 13px;
    color: gray;
}


.btn-teal {
    color: #fff; /* White text color */
    background-color: darkcyan; /* Teal background color */
}

.btn-teal:hover {
    color: #fff; /* Keep text color white on hover */
    background-color: #006666; /* Darker background on hover */
}

.btn-teal:focus, .btn-teal.focus {
    box-shadow: 0 0 0 0.25rem rgba(0, 128, 128, 0.5); /* Teal shadow for focus */
}

.btn-teal:disabled, .btn-teal.disabled {
    color: #fff;
    background-color: darkcyan; /* Same background for disabled state */
    opacity: 0.65; /* Transparency for disabled state */
}

.btn-teal:not(:disabled):not(.disabled):active, .btn-teal:not(:disabled):not(.disabled).active,
.show > .btn-teal.dropdown-toggle {
    background-color: #005656; /* Even darker for active state */
}

.channel-icon-and-name{
    font-weight: 500;
    font-size: 15px;
    color: teal;
    padding-top: 0.375rem !important;
    padding-bottom: 0.375rem !important;
    padding-left: 0.7rem !important;
    padding-right: 0.5rem !important;
}

.comment-compact-col .channel-icon-and-name{
    font-size: 14px;
    padding-bottom: 0.35rem !important;
}

.channel-detail-header .channel-icon-and-name{
    font-size: 17px;
}

.icon-channel-hashtag{
    font-size: 17px;
    margin-right: 7px;
    margin-left: -2px;
}

.icon-channel-hashtag-lock{
    font-size: 17px;
    margin-right: 3px;
    margin-left: -2px;
}

.icon-channel-inbox{
    font-size: 16px;
    margin-right: 6px;
    margin-left: -2px;
}


.comment-compact-col .icon-channel-lock{
    font-size: 9px; 
    left: 22px; 
    top: 7px; 
    outline: 1px solid whitesmoke;
    background-color: whitesmoke;
}

.icon-channel-lock{
    font-size: 9px; 
    left: 22px; 
    top: 7px; 
    outline: 1px solid white;
    background-color: white;
}

.icon-channel-user{
    font-size: 10px; 
    left: 20px; 
    bottom: 9px; 
    background-color: white;
    color: rgb(1 79 71);
}

.icon-channel-lock-personal{
    color: rgb(1 60 54);
}

.comment-compact-col .icon-channel-file{
    font-size: 10px; 
    left: 22px; 
    bottom: 7px; 
    outline: 1px solid whitesmoke;
    background-color: whitesmoke;
}

.icon-channel-file{
    font-size: 10px; 
    left: 22px; 
    bottom: 7px; 
    outline: 1px solid white;
    background-color: white;
}

.selected-background-teal .icon-channel-file{
    background-color: #e2f1f1 !important;
    outline: 1px solid #e2f1f1 !important;
}

.selected-background-teal .icon-channel-lock{
    background-color: #e2f1f1 !important;
    outline: 1px solid #e2f1f1 !important;
}

.hover-highlight:hover .icon-channel-file{
    background-color: #d7ecff !important;
    outline: 1px solid #d7ecff !important;
}

.hover-highlight:hover .icon-channel-lock{
    background-color: #d7ecff !important;
    outline: 1px solid #d7ecff !important;
}

.tooltip{
    z-index: 20001;
}

.markdown-m{
    font-size: 16px;
    font-weight: 900;
    margin-right: -2px;
}