/* DEFAULT CSS BEGINS */
@font-face {
    font-family: 'SegoeUI-Light';
    src:  url('../fonts/SegoeUI-Light.eot?#iefix') format('embedded-opentype'),
          url('../fonts/SegoeUI-Light.woff') format('woff'),
          url('../fonts/SegoeUI-Light.ttf') format('truetype'),
          url('../fonts/SegoeUI-Light.svg#SegoeUI-Light') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'SegoeUI';
    src:  url('../fonts/SegoeUI.eot?#iefix') format('embedded-opentype'),
          url('../fonts/SegoeUI.woff') format('woff'),
          url('../fonts/SegoeUI.ttf') format('truetype'),
          url('../fonts/SegoeUI.svg#SegoeUI') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'SegoeUI-Semibold';
    src:  url('../fonts/SegoeUI-SemiBold.eot?#iefix') format('embedded-opentype'),
          url('../fonts/SegoeUI-SemiBold.woff') format('woff'),
          url('../fonts/SegoeUI-SemiBold.ttf') format('truetype'),
          url('../fonts/SegoeUI-SemiBold.svg#SegoeUI-Semibold') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'SegoeUI-Bold';
    src:  url('../fonts/SegoeUI-Bold.eot?#iefix') format('embedded-opentype'),
          url('../fonts/SegoeUI-Bold.woff') format('woff'),
          url('../fonts/SegoeUI-Bold.ttf') format('truetype'),
          url('../fonts/SegoeUI-Bold.svg#SegoeUI-Bold') format('svg');
    font-weight: normal;
    font-style: normal;
}

html,body{height:100%;margin:0;padding:0;width:100%;}
body{background:#f4f7fc;color:#555;font-family:Arial, Helvetica, sans-serif;font-family:'SegoeUI';font-size:14px;font-weight:normal;line-height:1.5;overflow:hidden;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;}
h1,h2,h3,h4,h5,h6{font-family:'SegoeUI-Semibold';font-weight:normal;}
h1>a,h2>a,h3>a,h4>a,h5>a,h6>a{color:inherit;font-weight:inherit}
b,strong{font-family:'SegoeUI-Semibold';font-weight:normal;}
img,audio,video,iframe{display:inline-block;max-width:100%}
figure > img{display:block}
a{color:inherit;text-decoration:none}
body.theme-dark{background-color:#191927;color:#f4f7fc}
body.theme-light{background-color:#f4f7fc;color:#363642}
.alignleft{text-align:left}
.alignright{text-align:right}
.aligncenter{text-align:center}
.alignjustify{text-align:justify}
.display-none{display:none}
.display-block{display:block}
.display-inline{display:inline}
.display-inline-block{display:inline-block}
.overflow{overflow:hidden}
.floatleft{float:left}
.floatright{float:right}
.floatnone{float:none}
.clear{clear:both}
.clearleft{clear:left}
.clearright{clear:right}
.nowrap{white-space:nowrap}
.nowrap.ellipsis{overflow:hidden;text-overflow:ellipsis}
.text-uppercase{text-transform:uppercase}
.text-lowercase{text-transform:lowercase}
.text-capitalize{text-transform:capitalize}
.text-defaultcase{text-transform:none}
.border-solid{border-style:solid}
.border-dotted{border-style:dotted}
.border-dashed{border-style:dashed}
.toast-container{z-index:99999;}
/*
.toast{background-color: #34495e;color:#fff;}
.toast-success{background-color: #28a728;color:#fff;}
.toast-error{background-color:#dc3545;color:#fff;}
.toast-info{background-color:#17a2b8;color:#fff;}
.toast-warning{background-color:#ffc107;color:#fff;}
.toast-dark{background-color:#343a40;color:#fff;}
*/
table.table-sm > thead > tr > th{font-size:12px}
table.table-sm > tbody > tr > th,table.table-sm > tbody > tr > td{font-size:12px}
.section h1{font-size:25px;line-height:1.35;margin-bottom:20px}
.section h2{font-size:24px;line-height:1.35;margin-bottom:20px}
.section ection h3{font-size:22px;line-height:1.35;margin-bottom:20px}
.section h4{font-size:20px;line-height:1.35;margin-bottom:20px}
.section h5{font-size:18px;line-height:1.35;margin-bottom:20px}
.section h6{font-size:16px;line-height:1.35;margin-bottom:20px}
.section p,.section ul,.section ol,.section table{font-size:inherit;line-height:1.5;margin:0 0 20px 0}
.section ul,.section ol,.section ul>li,.section ol>li{list-style:inherit}
.section ul,.section ol{margin-left:25px}
.section ul ul,.section ol ul,.section ul ol,.section ol ol{margin-bottom:5px;margin-top:5px}
.section ul,.section ol ul{list-style:disc}
.section ul ul,.section ol ul ul{list-style:circle}
.section ul ul ul,.section ol ol ul{list-style:square}
.section ol,.section ul ol{list-style:decimal}
.section ol ol,.section ul ol ol{list-style:lower-alpha}
.section table thead tr th{
    background: none;
    border-radius: 0;
    color: #444;
    font-family: 'SegoeUI-Semibold';
    font-size: 12px;
    font-weight: normal;
    letter-spacing: 2px;
    line-height: 32px;
    padding: 8px 10px;
    text-transform: uppercase;
}
.section table tbody tr th, .section table tbody tr td{
    background: rgba(0,0,0,0.05);
    border-radius: 0;
    font-family: 'SegoeUI';
    font-size: 14px;
    font-weight: normal;
    line-height: 30px;
    padding: 5px 10px;
}
.section table tbody tr:nth-child(2n) > th, .section table tbody tr:nth-child(2n) > td{
    background: rgba(0,0,0,0.01);
}
.section table tbody tr > th{
    background: rgba(0,0,0,0.12);
    font-family: 'SegoeUI-Semibold';
}
.section table tbody tr td:last-child a{
    display: inline-block;
    margin: 0 5px;
}
.section table tbody tr td .link{
    color: #3cb9c2;
    text-decoration: underline;
}
.section table tfoot tr th, .section table tfoot tr td{
    background: rgba(0,0,0,0.02);
    border-radius: 0;
    color: #444;
    font-family: 'SegoeUI';
    font-size: 13px;
    font-weight: normal;
    letter-spacing: 1px;
    line-height: 20px;
    padding: 8px 10px;
    text-transform: uppercase;
}
.btn-primary{background-color:#ff0000;border-color:#ff0000;color:#fff;outline:none;}
.btn-red{background-color:#ea3d2f;border-color:#ea3d2f;color:#fff;outline:none;}
.btn-green{background-color:#2fa84f;border-color:#2fa84f;color:#fff;outline:none;}
.btn-yellow{background-color:#f3aa18;border-color:#f3aa18;color:#fff;outline:none;}
.btn-blue{background-color:#367bf5;border-color:#367bf5;color:#fff;outline:none;}
.btn-cyan{background-color:#65d3e3;border-color:#65d3e3;color:#fff;outline:none;}
.btn-purple{background-color:#9675cc;border-color:#9675cc;color:#fff;outline:none;}
.btn-outline-red{border-color:#ea3d2f;color:#ea3d2f;}
.btn-outline-green{border-color:#2fa84f;color:#2fa84f;}
.btn-outline-yellow{border-color:#f3aa18;color:#f3aa18;}
.btn-outline-blue{border-color:#367bf5;color:#367bf5;}
.btn-outline-cyan{border-color:#65d3e3;color:#65d3e3;}
.btn-outline-purple{border-color:#9675cc;color:#9675cc;}
.col{flex:0 0 auto;}
/* DEFAULT CSS ENDS */

/* LAYOUT CSS BEGINS */
/*
body:before{
    background: #0d0c11;
    content: '';
    display: block;
    height: 220px;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: -1;
}
*/
header{
    background: #0d0c11;
    box-shadow: 0 0 1px 0 #999;
    color: #999;
    display: flex;
    height: 60px;
    font-size: 14px;
    left: 0;
    line-height: 60px;
    padding: 0 50px;
    position: fixed;
    right: 0;
    top: 0;
    width: 100%;
    z-index: 15;
}
header > aside{
    position: relative;
    width: 15%;
}
header > aside .dropdown{
    background: #fff;
    box-shadow: 0 0 1px 0 #999;
    display: none;
    left: 0;
    max-height: 250px;
    overflow: auto;
    position: absolute;
    text-align: left;
    top: 61px;
    width: 240px;
}
header > aside:last-child .dropdown{
    left: auto;
    right: 0;
}
header > aside .dropdown > a{
    border-bottom: solid 1px #ddd;
    display: block;
    font-size: 14px;
    line-height: 35px;
    overflow: hidden;
    padding: 0 15px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
header > aside .dropdown > a:last-child{
    border-bottom: 0;
}
header > aside .dropdown > a:hover{
    background: #FAFAFA;
    color: #777;
}
header > aside .hasdropdown{
    color: #004080;
    display: block;
    font-size: 18px;
    text-align: center;
}
header .branding{
    font-family: 'SegoeUI-Semibold';
    font-size: 16px;
    text-transform: uppercase;
    width: 16%;
}
header .search{
    border-left: solid 1px #ddd;
    border-right: solid 1px #ddd;
    padding: 15px 0;
    width: 72%;
}
header .search form,
header .search form > div{
    border: 0 !important;
    float: left;
    margin: 0 !important;
    padding: 0 !important;
    width: 100%;
}
header .search form > div.text{
    padding: 0 15px !important;
    width: 65%;
}
header .search form > div.select{
    border-bottom: solid 1px #ddd !important;
    width: 25%;
}
header .search form > div.button{
    width: 10%;
}
header .search input,
header .search select,
header .search button{
    background: none;
    border: 0 !important;
    box-shadow: none !important;
    color: #FAFAFA;
    float: left;
    height: 30px !important;
    line-height: 30px !important;
    margin: 0 !important;
    outline: none;
    padding: 0 !important;
}
header .search select option{
    color: #222;
}
header .search button{
    text-align: center;
    width: 100%;
}
header .updates{
    padding: 0 10px;
    text-align: center;
    width: 5%;
}
header .tasks{
    text-align: center;
    width: 5%;
}
header .notifications{
    text-align: center;
    width: 5%;
}
header .userinfo{
    padding: 0 0 0 55px;
    text-align: left;
    width: 12%;
}
header .userinfo a{
    color: #004080;
    display: block;
    font-size: 18px;
    text-align: left;
}
header .userinfo img{
    border-radius: 50%;
    height: 30px;
    left: 15px;
    position: absolute;
    top: 15px;
    width: 30px;
}
header .userinfo span{
    color: #777;
    display: block;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
footer{
    background: #fff;
    border-top: solid 1px #efefef;
    height: 40px;
    font-size: 14px;
    line-height: 40px;
    padding: 0 50px;
    width: 100%;
    z-index: 10;
}
footer .floatleft a{
    display: inline-block;
    margin: 0 12px;
}
.page-nav{
    box-shadow: 0px 0px 2px 0 rgba(136, 140, 155, 0.5);
    color: #888c9b;
    font-size: 14px;
    height: calc(100vh - 60px);
    left: 0;
    line-height: 45px;
    padding: 0;
    position: fixed;
    top: 60px;
    width: 250px;
    z-index: 20;
}
body.theme-dark .page-nav{background-color:#191927}
body.theme-light .page-nav{background-color:#f6f7f9}
body.not-loggedin .page-nav{
    display: none;
}
.page-nav > .menu-button{
    display: none;
}
.page-nav > .menu{
    height: 100%;
    overflow: auto;
    width: 100%;
}
.page-nav > .menu::-webkit-scrollbar{width:8px;height:8px}
.page-nav > .menu::-webkit-scrollbar-thumb{background:#555;border-radius:8px;box-shadow:inset 1px 1px 1px hsla(0,0%,100%,.25),inset -1px -1px 1px rgba(0,0,0,.25)}
.page-nav > .menu::-webkit-scrollbar-track{background:linear-gradient(90deg,#a2a2a2,#a2a2a2 1px,#c2c2c2 0,#c2c2c2)}
.page-nav ul, .page-nav ul li, .page-nav ul li a, .page-nav ul li span{
    display: block;
    list-style: none;
    margin: 0;
    padding: 0;
    transition: all ease-in-out 200ms;
    width: 100%;
}
.page-nav > ul > li{
    position: relative;
}
.page-nav > ul > li > a{
    padding: 0 15px;
}
.page-nav > ul > li > span{
    border-top: solid 1px rgba(136, 140, 155, 0.2);
    line-height: 35px;
    padding: 0 0 0 15px;
    position: relative;
}
.page-nav > ul > li > span > i{
    background-color: rgba(0, 0, 0, 0.1);
    color: rgba(136, 140, 155, 0.5);
    cursor: pointer;
    display: block;
    font-size: 22px;
    height: 35px;
    line-height: 35px;
    position: absolute;
    right: 0;
    text-align: center;
    top: 0;
    width: 35px;
}
/*
.page-nav > ul.menu > li:hover > a:after,
.page-nav > ul.menu > li.active > a:after,
.page-nav > ul.menu > li:hover > span:after,
.page-nav > ul.menu > li.active > span:after{
    background: #B22222;
    bottom: -1px;
    content: '';
    display: block;
    height: 3px;
    left: 0;
    position: absolute;
    right: 0;
    width: 100%;
}
*/
.page-nav > ul > li:hover > span,
.page-nav > ul > li.active > span{
    color: #c7c9d0;
}
.page-nav > ul > li:hover > a,
.page-nav > ul > li.active > a{
    color: #346cb0;
}
.page-nav > ul.menu > li > ul{
    border-bottom: solid 2px rgba(136, 140, 155, 0.2);
    display: none;
    font-size: 0.9em;
    text-align: left;
}
.page-nav > ul.menu > li:hover > ul{
}
.page-nav > ul.menu > li > ul > li > a{
    border-top: solid 1px rgba(136, 140, 155, 0.2);
    font-weight: 500;
    line-height: 35px;
    padding: 0 12px 0 30px;
}
.page-nav > ul.menu > li > ul > li:last-child > a{
    border-bottom: 0;
}
.page-nav > ul.menu > li > ul > li > a:hover{
    color: #346cb0;
}
.page-nav > ul.pager > li{
    margin: 10px 0 10px 15px;
}
.page-nav > ul.pager > li > a{
    background: #EDEDED;
    color: #777;
    font-size: 13px;
    line-height: 25px;
    padding: 0 10px;
}
.page-nav > ul.pager > li > a i{
    font-size: 18px;
    line-height: 25px;
    margin: 0;
    padding: 0;
}
.page-nav > ul.pager > li.disabled > a{
    cursor: default;
    background: #EDEDED;
    color: #aaa;
}
main{
    display: flex;
    flex-direction: column;
    /* justify-content: center; */
    overflow: auto;
    padding: 20px;
    position: relative;
    z-index: 12;
}
body > main{
    height: calc(100vh - 120px);
    margin: 60px 0px 60px 250px;
    width: calc(100vw - 250px);
}
body.not-loggedin > main{
    height: calc(100vh - 60px);
    margin: 60px 0px 0px 0px;
    width: 100%;
}
main::-webkit-scrollbar{width:16px;height:16px}
main::-webkit-scrollbar-thumb{background:#434343;border-radius:16px;box-shadow:inset 2px 2px 2px hsla(0,0%,100%,.25),inset -2px -2px 2px rgba(0,0,0,.25)}
main::-webkit-scrollbar-track{background:linear-gradient(90deg,#434343,#434343 1px,#111 0,#111)}
main > section{
    position: relative;
}
.actionpane{
    background: #181818;
    bottom: 0;
    box-shadow: 2px 0 2px 0 #555;
    display: flex;
    justify-content: space-between;
    min-height: 60px;
    padding: 10px 30px;
    position: fixed;
    right: 0;
    z-index: 25;
}
body .actionpane{
    width: calc(100vw - 250px);
}
body.not-loggedin .actionpane{
    width: 100%;
}
.half-width{
    margin: 0 auto;
    width: 600px;
}
.heading{
    border-bottom: solid 1px #eee;
    display: flex;
    justify-content: space-between;
    line-height: 30px;
    margin-bottom: 20px;
    padding-bottom: 10px;
}
.heading h4,
.heading h4 i{
    color: #f6ba01;
    float: left;
    font-size: 18px;
    line-height: 30px;
    margin: 0 10px 0 0;
}
.heading h4 > i{
    font-size: 24px;
}
.heading .btn > i{
    font-size: 17px;
    margin-right: 5px;
}
.table-card{
    background: #fff;
}
/* LAYOUT CSS ENDS */

/* MISC TEMPORARY CSS */
.thumbnail_listing_popup{
    display: none;
    height: 540px;
    max-height: 100%;
    max-width: 100%;
    overflow: auto;
    width: 98%;
}
.thumbnail_listing_popup .thumb-listing{
    width: 100%;
}
.thumbnail_listing_popup .thumb-listing figure{
    float: left;
    margin: 7px;
}
.thumbnail_listing_popup .thumb-listing figure img{
    display: block;
    height: 50px;
    width: 110px;
}
.thumbnail_listing_popup .thumb-listing figure.active img{border:solid 2px #fff;box-shadow:0 0 4px 0 #333}
.thumbnail_listing_popup .thumb-listing figure label{
    display: block;
}
.thumbnail_listing_popup .thumb-listing figure input[type="checkbox"]{
    display: block;
    opacity: 0;
}
.thumbnail-listing{
    margin: 0 -10px;
    padding: 20px 0;
}
.thumbnail-listing h6{
    font-size: 21px;
    line-height: 1.32;
    margin: 30px 10px 15px 10px;
}
.thumbnail-listing .box{
    float: left;
    padding: 0px 10px 20px 10px;
    width: 20%;
}
.thumbnail-listing figure{
    display: block;
    margin: 0;
    position: relative;
}
.thumbnail-listing figure img{
    border-bottom: solid 4px #fff;
    display: block;
    height: 94px;
    width: 100%;
}
.thumbnail-listing .delete-icon{
    background: #fff;
    border-radius: 50%;
    height: 20px;
    position: absolute;
    right: -9px;
    text-align: center;
    top: -9px;
    width: 20px;
}
.thumbnail-listing .delete-icon i{
    display: block;
    font-size: 14px;
    line-height: 20px;
}
.thumbnail-listing .btn{
    background-color: #003366;
    height: 30px;
    line-height: 30px;
    padding: 0 20px;
    width: 100%;
}
.content_img_thumbnail img{
    float: left;
    margin: 1%;
    width: 18%;
}
.input-field{
    position: relative;
}
.input-field .form-label{
    color: #055160;
    font-size: 13px;
    font-weight: 600;
}
.input-field .form-note{
    color: #664d03;
    font-size: 11px;
    font-style: italic;
    font-weight: 400;
    margin-top: 4px;
}
.input-field .form-control,
.input-field .form-select{
    font-size: 13px;
}
.input-group .input-group-text.w-120px{
    width: 120px;
}
.input-field[data-validation]:after{
    color: #2e7d32;
    content: attr(data-validation);
    display: block;
    font-size: 11px;
    line-height: 1;
    margin-top: 5px;
    text-align: right;
}
.input-field.invalid[data-validation]:after{
    color: #c62828;
}
.input-field.invalid > .form-control{
    border-color: #c62828;
}

/* MEDIA CSS BEGINS */
@media (max-width: 799px) {
    body:before{
        height: 25vh;
    }
    header{
        display: flex;
        height: 40px;
        line-height: 40px;
        padding: 0 0 0 15px;
    }
    header .branding{
        font-size: 14px;
        width: calc(100vw - 40px);
    }
    header .search{
        display: none;
    }
    header .userinfo{
        padding: 0 0 0 40px;
        width: 40px;
    }
    header .userinfo img{
        left: 5px;
        padding: 4px;
        top: 5px;
    }
    header .userinfo span{
        display: none;
    }
    footer{
        height: 40px;
        padding: 0 15px;
    }
    .page-nav{
        background: rgba(0, 0, 0, 0.4);
        box-shadow: none;
        height: calc(100vh - 40px);
        padding: 0;
        top: 40px;
        transition: all ease-in-out 200ms;
        width: 100vw;
    }
    .page-nav:not(.show){
        transform: translateX(-100%);
    }
    .page-nav > .menu-button{
        display: block;
    }
    .page-nav > .menu{
        background: #000;
        display: block;
        height: 100%;
        overflow: auto;
        position: relative;
        width: 90%;
        z-index: 1;
    }
    body > main{
        height: calc(100vh - 40px);
        margin: 40px 0px 0px 0px;
        padding: 15px 15px 15px 15px;
        width: 100vw;
    }
    body > main.has-actionpane{
        height: calc(100vh - 100px);
        margin: 40px 0px 60px 0px;
    }
    main::-webkit-scrollbar{width:8px;height:8px}
    main::-webkit-scrollbar-thumb{background:#555;border-radius:8px;box-shadow:inset 1px 1px 1px hsla(0,0%,100%,.25),inset -1px -1px 1px rgba(0,0,0,.25)}
    main::-webkit-scrollbar-track{background:linear-gradient(90deg,#a2a2a2,#a2a2a2 1px,#c2c2c2 0,#c2c2c2)}
    /*
    main::-webkit-scrollbar{width:8px;height:8px}
    main::-webkit-scrollbar-thumb{background:#434343;border-radius:8px;box-shadow:inset 2px 2px 2px hsla(0,0%,100%,.25),inset -2px -2px 2px rgba(0,0,0,.25)}
    main::-webkit-scrollbar-track{background:linear-gradient(90deg,#434343,#434343 1px,#111 0,#111)}
    */
    body .actionpane{
        padding: 10px 15px;
        width: 100%;
    }
}
/* MEDIA CSS ENDS */

/* TOAST CSS */
/*
.toast{
    align-items: center;
    background: #455a64;
    border: solid 1px #3a4e57;
    border-radius: 8px;
    color: #fff;
    display: flex;
    justify-content: space-between;
    left: 50%;
    max-width: 80%;
    min-width: 220px;
    padding: 8px;
    position: fixed;
    text-align: left;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
}
.toast.toast-success{
    background-color: #3a854c;
    border-color: #2e6e3d;
    color: #fff;
}
.toast.toast-info{
    background-color: #0277bd;
    border-color: #0469a3;
    color: #fff;
}
.toast.toast-warning{
    background-color: #f7b65c;
    border-color: #d1994a;
    color: #fff;
}
.toast.toast-error{
    background-color: #c23934;
    border-color: #a72d29;
    color: #fff;
}
.toast .toast-icon{
    display: block;
    font-size: 25px;
    line-height: 50px;
    text-align: center;
    width: 50px;
}
.toast .toast-body{
    color: #fff;
    font-size: 15px;
    line-height: 1.5;
    width: calc(100% - 130px);
}
.toast .toast-action{
    width: 50px;
}
.toast .toast-action .btn-close{
    background: none;
    border: 0;
    border-radius: 0;
    color: #e0e0e0;
    cursor: pointer;
    display: block;
    font-size: 18px;
    height: 50px;
    line-height: 50px;
    text-align: right;
    width: 50px;
}
*/
.course-assesments-file-uploader{
    align-items: center;
    background: rgba(0, 0, 0, 0.05);
    border: dashed 1px #546e7a;
    border-radius: 5px;
    color: #c2c2c2;
    cursor: none;
    display: flex;
    flex-wrap: nowrap;
    font-size: 13px;
    line-height: 34px;
    margin: 0 0 0 12px;
    padding: 0px 0px 0px 10px;
    position: relative;
    outline: none;
    text-align: center;
    width: 200px;
}
.course-assesments-file-uploader > .placeholder{
    align-items: center;
    color: #999;
    display: flex;
    font-size: 13px;
    height: 40px;
    justify-content: center;
    left: 0;
    line-height: 1.2;
    padding: 8px;
    position: absolute;
    right: 40px;
    text-align: center;
    top: 0;
}
.course-assesments-file-uploader > input{
    background: none;
    border: 0;
    color: #999;
    display: inline-block;
    font-size: 13px;
    height: 40px;
    line-height: 40px;
    margin: 0;
    opacity: 0;
    outline: none;
    padding: 0;
    text-align: left;
    width: calc(100% - 40px);
}
.course-assesments-file-uploader > button{
    background: #546e7a;
    border: 0;
    border-radius: 5px;
    color: #c2c2c2;
    cursor: pointer;
    font-size: 11px;
    height: 40px;
    line-height: 14px;
    margin: 0;
    padding: 0;
    outline: none;
    text-align: center;
    text-decoration: none;
    width: 40px;
}
.course-assesments-file-uploader > button i{
    color: #90caf9;
    display: block;
    font-size: 15px;
    line-height: 40px;
    margin: 0;
    padding: 0;
    text-decoration: none;
}

.chatbox-container{
    background: rgba(0, 0, 0, 0.5);
    border: solid 1px rgba(255, 255, 255, 0.1);
    display: flex;
    flex-wrap: nowrap;
    height: 100%;
    position: relative;
    width: 100%;
}
.chatbox-container > .chat-list{
    background: rgba(0, 0, 0, 0.8);
    border-right: solid 1px rgba(255, 255, 255, 0.1);
    height: 100%;
    overflow-x: hidden;
    position: relative;
    width: 30%;
}
.chatbox-container > .chat-list::-webkit-scrollbar{width:8px;height:8px}
.chatbox-container > .chat-list::-webkit-scrollbar-thumb{background:#2a2a2a;border-radius:8px;box-shadow:inset 1px 1px 1px hsla(0,0%,100%,.25),inset -1px -1px 1px rgba(0,0,0,.25)}
.chatbox-container > .chat-list::-webkit-scrollbar-track{background:linear-gradient(90deg,#2a2a2a,#2a2a2a 1px,#111 0,#111)}
.chatbox-container > .chat-list .chat-card{
    align-items: center;
    border-bottom: solid 1px rgba(255, 255, 255, 0.2);
    display: flex;
    margin: 0;
    padding: 8px 10px;
    position: relative;
    width: 100%;
}
.chatbox-container > .chat-list .chat-card:hover{
    background-color: rgba(255, 255, 255, 0.05);
}
.chatbox-container > .chat-list .chat-card > .chat-name{
    align-items: center;
    color: #ccc;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    line-height: 1.7;
    margin: 0;
    padding: 0 0 0 12px;
    position: relative;
    width: calc(100% - 60px);
}
.chatbox-container > .chat-list .chat-card > .chat-name .timestamp{
    color: #777;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    font-style: italic;
    line-height: 1;
    display: block;
    margin: 0;
    padding: 0;
    text-align: right;
}
.chatbox-container > .chat-list .chat-card > .chat-pic{
    background: #111;
    border: solid 2px #c2c2c2;
    border-radius: 50%;
    display: block;
    height: 40px;
    margin: 0;
    outline: none;
    padding: 0;
    position: relative;
    width: 40px;
}
.chatbox-container > .chat-content{
    background: rgba(0, 0, 0, 0.75);
    height: 100%;
    width: 70%;
}
.course-chatbox{
    display: flex;
    flex-direction: column;
    max-height: 320px;
    overflow-x: hidden;
    padding: 10px;
    position: relative;
}
.course-chatbox::-webkit-scrollbar{width:8px;height:8px}
.course-chatbox::-webkit-scrollbar-thumb{background:#2a2a2a;border-radius:8px;box-shadow:inset 1px 1px 1px hsla(0,0%,100%,.25),inset -1px -1px 1px rgba(0,0,0,.25)}
.course-chatbox::-webkit-scrollbar-track{background:linear-gradient(90deg,#2a2a2a,#2a2a2a 1px,#111 0,#111)}
.course-chatbox-action{
    background: rgba(255, 255, 255, 0.05);
    border: solid 1px rgba(255, 255, 255, 0.1);
    padding: 10px;
    position: relative;
}
.course-chatbox > .chat-card,
.course-chatbox-action > .chat-card{
    align-items: center;
    display: flex;
    margin: 10px;
    padding: 0;
    position: relative;
    width: 70%;
}
.course-chatbox-action > .chat-card{
    width: calc(100% - 20px);
}
.course-chatbox > .chat-card > .chat-msg,
.course-chatbox-action > .chat-card > .chat-msg{
    align-items: center;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    color: #ccc;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    line-height: 1.7;
    margin: 0;
    padding: 10px 16px;
    position: relative;
    width: calc(100% - 60px);
}
.course-chatbox > .chat-card > .chat-msg .timestamp,
.course-chatbox-action > .chat-card > .chat-msg .timestamp{
    color: #777;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    font-style: italic;
    line-height: 1;
    display: block;
    margin: 0;
    padding: 0;
    text-align: right;
}
.course-chatbox > .chat-card > .chat-pic,
.course-chatbox-action > .chat-card > .chat-pic{
    background: #111;
    border: solid 2px #c2c2c2;
    border-radius: 50%;
    display: block;
    height: 40px;
    margin: 0;
    outline: none;
    padding: 0;
    position: relative;
    width: 40px;
}
.course-chatbox-action > .chat-card > .chat-pic{
    border-color: #ffc000;
}
.course-chatbox > .chat-card.left,
.course-chatbox-action > .chat-card.left{
    align-self: flex-start;
}
.course-chatbox > .chat-card.right,
.course-chatbox-action > .chat-card.right{
    align-self: flex-end;
}
.course-chatbox > .chat-card.left > .chat-msg,
.course-chatbox-action > .chat-card.left > .chat-msg{
    background: #42475d;
    order: 2;
}
.course-chatbox > .chat-card.right > .chat-msg,
.course-chatbox-action > .chat-card.right > .chat-msg{
    background: #272b36;
    order: 1;
}
.course-chatbox > .chat-card.left > .chat-pic,
.course-chatbox-action > .chat-card.left > .chat-pic{
    margin-right: 15px;
    order: 1;
}
.course-chatbox > .chat-card.right > .chat-pic,
.course-chatbox-action > .chat-card.right > .chat-pic{
    margin-left: 15px;
    order: 2;
}
.course-chatbox-action > .chat-card > .chat-form{
    background: #313547;
    border: solid 1px #272b36;
    border-radius: 8px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    line-height: 1.7;
    margin: 0;
    order: 2;
    padding: 0;
    width: calc(100% - 50px);
}
.course-chatbox-action > .chat-card > .chat-form > .input-field{
    background: none;
    border: 0;
    border-radius: 0;
    color: #e2e2e2;
    display: block;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    height: 48px;
    line-height: 48px;
    margin: 0;
    outline: none;
    padding: 10px 16px;
    text-align: left;
    width: calc(100% - 48px);
}
.course-chatbox-action > .chat-card > .chat-form > .btn-submit{
    background: none;
    border: 0;
    border-radius: 0;
    color: #ffc000;
    cursor: pointer;
    display: block;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    height: 48px;
    line-height: 48px;
    margin: 0;
    outline: none;
    padding: 0;
    text-align: center;
    width: 48px;
}
.course-chatbox-action > .chat-card > .chat-form > .btn-submit > i{
    color: #ffc000;
    display: block;
}
/*
.list-variations > aside{
    background: #fdfdfd;
    border: solid 1px #d2d2d2;
    padding: 20px;
}
.list-variation-details > aside{
    background: #f9f9f9;
    border: solid 1px #d9d9d9;
    padding: 20px 20px 0px 20px;
}
*/
.card-file-dragdrop{
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1;
    padding: 30px;
    position: relative;
    text-align: center;
    width: 100%;
}
.card-file-dragdrop > .text1{
    color: #055160;
    font-size: 15px;
    font-weight: 600;
}
.card-file-dragdrop > .text2{
    color: #000;
    font-size: 14px;
    font-weight: 300;
    margin: 20px 0;
    opacity: 0.6;
}
.card-file-dragdrop > .icon{
    color: #055160;
    font-size: 32px;
    margin-bottom: 20px;
}
.card-file-dragdrop > .btn{
    font-size: 13px;
    padding-left: 15px;
    padding-right: 15px;
}
.card-file-dragdrop > input{
    bottom: 0;
    left: 0;
    opacity: 0;
    position: absolute;
    right: 0;
    top: 0;
}

.card-element-type > div,
.card-element-quiz > div{
    background: #f4f7fc;
    border: dashed 1px #a2a2a2;
    display: flex;
    justify-content: flex-start;
    padding: 8px 12px;
    width: 100%;
}
.card-element-type > div > button,
.card-element-quiz > div > button{
    color: #055160;
    margin: 0 12px;
    padding: 0;
}
.list-curriculum-elements{
    border: solid 1px #dfdfdf;
}
.list-curriculum-sections > li,
.list-curriculum-elements > li{
    margin-bottom: 20px;
}
.list-curriculum-sections > li:last-child,
.list-curriculum-elements > li:last-child{
    margin-bottom: 0px;
}
.list-curriculum-quiz-content > aside{
    background: #fefefe;
    border: solid 1px #f1f1f1;
}
.list-curriculum-quiz-content > aside textarea.ques-field{
    height: 70px;
    overflow-y: auto;
    resize: none;
}

.nav-tabs{
    border: 0;
    border-bottom: solid 1px rgba(255, 255, 255, 0.2);
}
.nav-tabs .nav-link{
    border: 0;
    border-bottom: solid 3px transparent;
    color: rgba(255, 255, 255, 0.5);
}
.nav-tabs .nav-link:focus, .nav-tabs .nav-link:hover{
    border-color: rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.85);
}
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active{
    background-color: transparent;
    border-color: #055160;
    color: rgba(255, 255, 255, 0.85);
    font-weight: 600;
    letter-spacing: 0.5px;
}

.profile-pic-box{
    background: rgba(255, 255, 255, 0.2);
    background-size: cover;
    border: 0;
    border-radius: 50%;
    display: block;
    height: 120px;
    position: relative;
    width: 120px;
}
.profile-pic-box > input[type="file"]{
    background: none;
    border: 0;
    bottom: 0;
    cursor: pointer;
    left: 0;
    margin: 0;
    opacity: 0;
    border: 0;
    position: absolute;
    right: 0;
    top: 0;
}

.grid-layout-templates{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}
.grid-layout-templates > div{
    padding: 10px;
    width: 25%;
}
.grid-layout-templates.col1 > div{
    width: 100%;
}
.grid-layout-templates.col2 > div{
    width: 50%;
}
.grid-layout-templates.col3 > div{
    width: 33.33%;
}
.grid-layout-templates.col4 > div{
    width: 25%;
}
.grid-layout-templates.col5 > div{
    width: 20%;
}
.grid-layout-templates > div > label{
    align-items: center;
    background: rgba(255, 255, 255, 0.1);
    background-size: cover;
    border: solid 1px rgba(255, 255, 255, 0.1);
    display: flex;
    height: 100%;
    padding: 10px;
    position: relative;
    width: 100%;
}
.grid-layout-templates > div > label > input[type="radio"]{
    display: inline-block;
    margin-right: 8px;
}
.grid-layout-templates > div > label > span{
    color: #3cb9c2;
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
}

.select2.select2-container{
    width: 100% !important;
}
.select2-container > .select2-dropdown{
    background-color: rgba(255, 255, 255, 0.2) !important;
}
.select2-container > .select2-dropdown .select2-results__option--highlighted{
    background: #f1f1f1 !important;
    border-top: solid 1px #dfdfdf !important;
    color: #2a2a2a !important;
}
.select2-container > .select2-dropdown .select2-results__option--selectable{
    background: #f1f1f1 !important;
    border-top: solid 1px #dfdfdf !important;
    color: #2a2a2a !important;
}
.select2-container > .select2-dropdown .select2-results__option--selected{
    background: #f1f1f1 !important;
    border-top: solid 1px #dfdfdf !important;
    color: #055160 !important;
}

ul.sortableElements,
ul.sortableElements > li,
ul.sortableNavMenus,
ul.sortableNavMenus > li,
ul.sortableMenuLinks,
ul.sortableMenuLinks > li{
    list-style: none;
    margin: 0;
    padding: 0;
}
.accordion-header{
    align-items: center;
    display: flex;
    font-size: 15px;
    line-height: 1;
    justify-content: space-between;
    width: 100%;
}
.accordion-header .ui-handle-drag-drop{
    cursor: grab;
}
.accordion-header > .input-field{
    align-self: flex-start;
    margin-right: auto;
    max-width: 80%;
    width: 320px;
}
.accordion-header > .accordion-button{
    width: auto;
}

.input-switch-field{
    background: rgba(8, 121, 144, 0.2);
    border: solid 1px rgba(8, 121, 144, 0.7);
    display: flex;
    flex-direction: row;
}
.input-switch-field > label{
    color: #6edff6;
    cursor: pointer;
    padding: 4px;
    position: relative;
}
.input-switch-field > label > div{
    background: transparent;
    display: block;
    font-size: 14px;
    height: 30px;
    line-height: 30px;
    min-width: 120px;
    padding: 0 10px;
    position: relative;
    transition: background-color ease-in-out 200ms;
    width: auto;
}
.input-switch-field > label > input{
    position: absolute;
    opacity: 0;
}
.input-switch-field > label > input:checked + div{
    background: #6edff6;
    color: #032830;
}