.loginBG{
  width: 100%;
  height: 100vh;
  background-color: #F6F6F9;
  display: flex;
  justify-content: center;
  align-items: center;
}
.loginBG .login-box{
  margin: 0;
  background-color: #000173;
  padding: 2px;
  border-radius: 5px;
}

.loginBG .login-logo{
  margin: 0;
  padding: 20px 0;
}
.line1{
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  text-overflow: ellipsis;
  overflow: hidden;
  cursor: pointer;
  display: -webkit-box;
}
.line2{
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
  overflow: hidden;
  cursor: pointer;
  display: -webkit-box;
}
.line3{
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  text-overflow: ellipsis;
  overflow: hidden;
  cursor: pointer;
  display: -webkit-box;
}
.error_success{
    position: fixed;
    right: 10px;
    top: 100px;
    z-index: 99999;
    /* left: 50%;
    transform: translateX(-50%); */
    list-style-type: none;
    margin: 0;
    padding: 0;
    max-width: 80%;
    transition: 0.5s;
}

.error_success li{
    padding: 10px;
    border-radius: 5px;
    color: #FFF;
    display: none;
    margin-top: 5px;
}
.success_modal{
    background-color: #00A65A;
}
.warning_modal{
    background-color: #DA8C10;
}
.alert_modal{
  background-color: #2A3041;
}
.error_modal{
    background-color: #dd4b39;
}

/* The switch - the box around the slider */
.switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 20px;
  }
  
  /* Hide default HTML checkbox */
  .switch input {
    opacity: 0;
    width: 0;
    height: 0;
  }
  
  /* The slider */
  .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
  }
  
  .slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 4px;
    bottom: 2px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
  }
  
  input:checked + .slider {
    background-color: #00a65a;
  }
  
  input:focus + .slider {
    box-shadow: 0 0 1px #00a65a;
  }
  
  input:checked + .slider:before {
    -webkit-transform: translateX(16px);
    -ms-transform: translateX(16px);
    transform: translateX(16px);
  }
  
  /* Rounded sliders */
  .slider.round {
    border-radius: 34px;
  }
  
  .slider.round:before {
    border-radius: 50%;
  }

  /* loading */
  .loaderbody{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255,255,255,0.5);
  }
  .loader {
    border: 5px solid #f3f3f3;
    border-radius: 50%;
    border-top: 5px solid #3498db;
    width: 30px;
    height: 30px;
    -webkit-animation: spin 2s linear infinite; /* Safari */
    animation: spin 2s linear infinite;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  
  /* Safari */
  @-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
  }
  
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }

  .react-confirm-alert-overlay{
    z-index: 9999;
  }
  .react-confirm-alert-button-group{
    justify-content: center;
  }
  .react-confirm-alert-body{
    text-align: center;
  }
  /* Loading End */

  .my-btns{
    margin-right: 5px;
    margin-bottom: 5px;
    text-transform: capitalize;
  }
  .dragarrows{
    cursor: pointer;
  }


/* Assets */
.assets-lib{
  display: flex;
  width: calc(100% - 20px);
  margin: 0 auto;
}
.assetsbars{
  padding: 0 10px;
  margin: 0 5px;
  background-color: #FFF;
  box-shadow: none;
  border-radius: 2px;
}

.assetsbars .box{
  background-color: transparent;
  box-shadow: none;
}
.assets_list{
  list-style: none;
  padding-left: 0;
}
.assets_list a{
  color: rgba(00,0,0,0.8);
}
.assets_list img{
  width: 15px;
  height: 15px;
  margin-right: 8px;
}
.assets_list li{
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  padding: 8px 5px;
  margin-bottom: 5px;
  border-radius: 2px;
  transition: 0.5s;
}
.assets_list li:hover{
  background-color: #2a30410d;
}
.active-assets-menu{
  background-color: #2a30410d;
}
.arrow-r svg{
  width: 15px;
  height: 15px;

}
.highlighted{
  background-color: rgba(0,0,0,0.05);
  animation: flick 1s ease-in-out;
  animation-fill-mode: forwards;
}

@keyframes flick{
  0%{
    background-color: #FFF;
  }
  25%{
    background-color: rgba(0,0,0,0.05);
  }
  50%{
    background-color: #FFF;
  }
  75%{
    background-color: rgba(0,0,0,0.05);
  }
  100%{
    background-color: #FFF;
  }
}

.assets_list span{
  display: flex;
  align-items: center;
}
.searchBar{
  width: 150px;
}
.grid_all{
  display: flex;
  flex-wrap: wrap;
  overflow: auto;

}
/* ::-webkit-scrollbar{
  height: 4px;
  width: 4px;
  background: rgb(179, 179, 179);
} */

::-webkit-scrollbar {
  width: 5px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1; 
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #888; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555; 
}


::-webkit-scrollbar-thumb:horizontal{
  background: rgb(109, 109, 109);
  border-radius: 10px;
}
::-webkit-scrollbar:horizontal{
  height: 5px;
  /* width: 5px; */
}
.grid_all .grid-box{
  border: 0.1px solid rgba(0,0,0,0.05);
  width: calc(100% - 0px);
  padding: 10px;
  border-radius: 5px;
  cursor: pointer;
}
.grid_box_parent{
  padding: 5px;
}
.grid-box-header{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.pinnedoff{
  cursor: pointer;
  padding: 5px;
  border-radius: 2px;
  transition: 0.2s;
  line-height: 0;
  position: relative;
}
.dotmark{
  position: absolute;
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  top: 0;
  right: 0;
  z-index: 9;
  background-color: #34c38f;
}
.nodownload span{
  position: absolute;
  height: 1px;
  width: 20px;
  background-color: #000;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
  z-index: 9;
}
.infoTooltip{
  width: 100px;
  height: 100px;
  background-color: red;
  position: absolute;
  top: -110px;
  left: -70px;
  z-index: 9;
  border-radius: 5px;
  box-shadow: 0 0 5px rgba(0,0,0,0.1);
}

.previewPanel{
  width: 100%;
  text-align: center;
}

.actionDiv{
  white-space: "nowrap";
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  gap:5px;
}
.badge{
  font-size: 12px;
  padding: 5px 10px;
  background-color: rgba(0,0,0,0.1);
  line-height: 0;
  border-radius: 40px;
  cursor: pointer;
}
.box-header div.btn{
  margin-left: 5px;
}
.yellow-badge{
  background-color: #F2B958;
  padding: 10px;
}
.red-badge{
  background-color: #F46F6F;
}
.green-badge{
  background-color: #3BC593;
}
.badge svg{
  width: 12px;
  height: 12px;
}

.fileTitleList{
  /* max-width: 200px;
  white-space: nowrap; */
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  text-overflow: ellipsis;
  overflow: hidden;
  cursor: pointer;
  display: -webkit-box;
}

.chenterCircle{
  width: 150px;
  height: 150px;
  border-radius: 50%;
  margin: 10px auto;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
}

.centerPreview{
  width: calc(100% - 20px);
  padding: 10px;
  border-radius: 10px;
  margin: 10px auto;
}

.forStar *{
  width: 100%;
  max-height: 200px;
  height: auto;
  object-fit: contain;
}
.chenterCircle img{
  width: 60px;
  height: 60px;
  object-fit: contain;
}
.previewName{
  font-size: 16px;
  color: #000;
}
.previewContent ul{
  list-style: none;
  margin: 0;
  padding: 10px;
  text-align: left;
  font-size: 12px;
}
.previewContent ul li{
  padding: 5px 0;
  text-align: right;
}
.previewContent ul li strong{
  float: left;
}


.previewContent ul li a{
    white-space: nowrap;
    max-width: 158px;
    overflow: hidden;
    display: inline-block;
    text-overflow: ellipsis;
}

.previewContent{
  width: 96%;
  margin: 10px auto;
  border-radius: 10px;
  position: relative;
}
.previewClose{
  position: absolute;
  top: 10px;
  right: 10px;
}
.previewClose svg{
  width: 15px;
  height: 15px;;
}


.triangle{
	width: 0;
	height: 0;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-top: 20px solid blue;
  position: absolute;
  bottom: 15px;
  right: 4px;
}
.pinnedoff svg{
  width: 14px;
  height: 14px;
}
.pinnedoff:hover{
  background-color: #2a30410d;
}
.grid-box-title{
  font-weight: 600;
  padding-top: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.grid-box-items {
  font-size: 12px;
  color: rgba(0,0,0,0.6);
}
.grid-box-header img{
  width: 32px;
  height: 32px;
}
.storage-box{
  border-radius: 2px;
  border: 0.1px solid rgba(0,0,0,0.05);
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  cursor: pointer;
}
.activeStorage{
  border: 1px solid #3BC593;
}
.storage-box-con{
  padding: 0 8px;
}
.colReverse{
  display: flex;
  flex-direction: column-reverse;
}
.storage-box .storage-icon{
  padding: 5px;
  margin-right: 10px;
}
.storage-box .storage-icon img{
  width: 25px;
  height: 25px;
  object-fit: contain;
}
.storage-title{
  font-size: 14px;
  line-height: 20px;
}
.uploading-title{
  font-size: 14px;
  line-height: 20px;
  width: calc(100% - 45px);
  
}
.upoading-percentage{
  font-weight: normal;
  font-size: 12px;
}
.retryIcon{
  font-weight: normal;
  font-size: 12px;
}
.upoading-percentage{
  display: flex;
  flex-direction: row;
  align-items: center;
}
.storage-icon-con{
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-grow: 1;
}
.storage-size{
  color: rgba(0,0,0,0.6);
}
.warning-color{
  background-color: #fcd4622e;
}
.draggable-area{
  border: 5px dashed rgba(0,0,0,0.05);
  margin: 25px 0;
  padding: 50px 10px;
  text-align: center;
  cursor: pointer;
}
.activedrag{
  border: 5px dashed rgba(0,0,0,1);
}
.orCon{
  width: 200px;
  display: flex;
  flex-direction: row;
  align-items: center;
  margin: 0 auto;
}
.orCon span{
  display: inline-block;
  width: 50px;
}
.orCon .leftbar{
  height: 4px;
  border-radius: 10px;
  width: 75px;
  background: linear-gradient(to right, #FFF, #2A3041);
}
.orCon .rightbar{
  height: 4px;
  border-radius: 10px;
  width: 75px;
  background: linear-gradient(to right, #2A3041, #FFF);
}
.createbtnsCon{
  display: flex;
  justify-content:  center;
}
.no-files-btns button{
  margin-right: 5px;
}
.no-files-btns{
  flex-wrap: wrap;
}
.no-files-btns button{
  margin-bottom: 10px;
}
.backbtn{
  margin-right: 5px;
}
.no-files{
  width: 100%;
  height: 100%;
  text-align: center;
  padding: 50px 0;
}
.no-files img{
  width: 200px;
  height: 200px;
  object-fit: contain;
}
.no-files-heading{
  font-size: 18px;
  color: #000;
}
.no-files-msg{
  font-size: 14px;
  color: rgba(0,0,0,0.6);
}
.nofiles-menu{
  list-style: none;
  display: inline-block;
  display: flex;
  padding: 0;
}
.nofiles-menu li{
  display: flex;
  flex-direction: row;
}
.uploadingBar{
  width: 100%;
  height: 5px;
  border-radius: 10px;
  background-color: #e3e4e5;
  margin-top: 8px;
  border-radius: 10px;
  overflow: hidden;
}
.insideBar{
  height: 100%;
  width: 0px;
  background-color: red;
  transition: 0.5s;
}
.uploadingMessages{
  font-size: 10px;
  margin-top: 2px;
  color: rgba(0,0,0,0.6);
}
.completeBar{
  width: 100%;
  background-color: #3DC594;
}
.clearAll{
  font-size: 12px;
  font-weight: bold;
  cursor: pointer;
}
.breadCrums{
  padding-top: 0;
  padding-bottom: 0;
}
.breadCrums ul{
  list-style-type: none;
  display: flex;
  flex-direction: row;
  padding-left: 0;
  margin-bottom: 0;
  flex-wrap: wrap;
}
.breadCrums li{
  display: flex;
  align-items: center;
  cursor: pointer;
  color: rgba(0,0,0,0.6);
}
.breadCrums li:nth-last-child(1){
  color: #58617a;
  font-weight: bold;
}
.breadCrums li svg{
  width: 15px;
  height: 15px;
}
.changeVideoLink{
  cursor: pointer;
  color: #FF005E;
}
.changeTabBtns button {
  width: calc(50% - 20px);
}
.changeTabBtns {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

/* Context Menu */
.myContextMenu{
  position: absolute;
  top: 400px;
  left: 400px;
  background-color: #FFF;
  box-shadow: 0 0 20px rgba(0,0,0,0.1);
  z-index: 999;
  border-radius: 2px;
  min-width: 200px;
  animation: fadeIn 0.2s ease-in-out;
}
@keyframes fadeIn{
  from{
    opacity:0;
  }
  to{
    opacity: 1;
  }
}
.myContextMenu ul{
  list-style: none;
  margin: 0;
  padding: 10px;
}
.myContextMenu ul li{
  cursor: pointer;
  padding: 8px 0px;
  border-bottom: 0.5px solid rgba(0,0,0,0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  position: relative;
  transition: 0.5s;
}
.myContextMenu ul li .contextNameCon svg{
  margin-right: 5px;
}
.myContextMenu ul li svg{
  width: 15px;
  height: 15px;
  margin-right: 0px;
  transition: 0.5s;
}
.myContextMenu ul li .contextNameCon{
  display: flex;
  align-items: center;
}
.myContextMenu ul li:hover{
  background-color: #F6F6F9;
}
.myContextMenu ul li:hover svg{
  margin-left: 5px;
}

.myContextMenu ul li:hover .contextMenu2{
  display: block;
}
.contextMenu2{
  display: none;
  position: absolute;
  right: -200px;
  background-color: #FFF;
  box-shadow: 0 0 20px rgba(0,0,0,0.1);
  min-width: 200px;
  top: 0;
}
.linkImportArea svg{
  width: 15px;
  height: 15px;
}
.linkImportArea .assets_form_con{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-end;
}
.importFromDriveBtnsCon{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.pickerBtn{
  /* width: 50px;; */
  height: 50px;
  border-radius: 50px;
  box-shadow: 0 0 20px rgba(0,0,0,0.1);
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  border: 1px solid rgba(0,0,0,0.1);
  padding:  0 20px;
  font-size: 16px;
  color: rgba(0,0,0,0.6);
  font-weight: 600;
}
.pickerBtn img{
  width: 30px;
  height: 30px;
  margin-right: 10px;
}
/* Context Menu End */
.dragHandle{
  cursor: move;
}

.courseContentPageTop{
  display: flex;
  gap: 20px;
}
.courseContentPageTop .courseAddOptions{ 
  width: 100%;
  padding: 10px;
  background-color: #FFF;
  border-radius: 5px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.addCol{
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: flex-start;
}
.courseContentPageTop .courseAddOptions img{
  width: 30px;
  height: 30px;
  object-fit: contain;
}
.importBody{
  width: 100%;
  padding: 25px 0;
  /* height: calc(100vh - 0px); */
  background-color: #f1f1f1;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
.iframeCon{
  border: 0;
  width: 100%;
  height: calc(100vh - 160px);
  overflow: auto;
  background-color: #f1f1f1;
}
.importIframe{
  border: 0;
  width: 100%;
  height: calc(100% - 56px);
  background-color: #f1f1f1;
  /* overflow: auto; */
}
.emptyQueue{
  text-align: center;
  padding: 50px 0;
}
.emptyQueue img{
  width: 90px;
  height: 90px;
  object-fit: contain;
}
.filtersBody{
  list-style-type: none;
  padding: 0;
}
.filtersBody svg{
  width: 20px;
  height: 20px;
  stroke-width: 1px;
}
.filtersBody li{
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 0.5px solid rgba(0,0,0,0.1);
  padding: 10px 0;
}
.filtersBody li input[type="date"], .filtersBody li input[type="text"], .filtersBody li input[type="number"]{
  width: 150px;
}
#staff_table_wrapper{
  width: 100%;
}
/* Assets End */


/* dialog */
.renameDialogBG{
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(0,0,0,0.5);
  z-index: 9999;
}
.renameBody{
  width: 90%;
  max-width: 400px;
  background-color: #FFF;
  padding: 10px;
  border-radius: 5px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.renameHeading{
  font-size: 18px;
  font-weight: bold;
  color: rgba(0,0,0,0.8);
}
.renameInput{
  width: 100%;
  padding: 10px;
  border: 0;
  border-bottom: 0.1px solid rgba(0,0,0,0.4);
}
.closePopup{
  cursor: pointer;
  padding: 10px;
  position: absolute;
  right: 0;
  top: 0;
}
/* Dialogue End */


/* plyr */
.Watermark{
  background-color: rgba(255,255,255,0.5);
  padding: 10px;
  position: absolute;
  z-index: 99999;
  pointer-events: none;
  font-size: 10px;
  line-height: 12px;
  border-radius: 10px;
  text-align: left;
  max-width: 200px;
  white-space: nowrap;
  text-overflow: ellipsis;
}
body .Watermark{
  display: block!important;
}
.plyr__video-wrapper .Watermark{
  display: block!important;
}
.plyr__menu__container{
  min-width: 150px;
}
.plyr__progress .plyr__tooltip{
  min-width: 150px;
}
:root {
  --plyr-color-main: #FF005E;
}

/* plyr End*/

  /* Dashboard */
  .sidebar-menu{
    height: calc(100vh - 180px);
    overflow-y: auto;
    overflow-x: hidden!important;
  }
  .list-group-unbordered>.list-group-item{
    overflow: hidden;
  }
  .closeInspect{
    font-size: 30px;
    padding: 10px;
    font-weight: bold;
  }
  .closeInspect{
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }
  .skin-blue .wrapper, .skin-blue .main-sidebar, .skin-blue .left-side {
      background-color: #2A3041;
  }
  .skin-blue .main-header .logo, .skin-blue .main-header .logo:hover{
    background-color: #2A3041;
  }
  .skin-blue .main-header .navbar .sidebar-toggle, .skin-blue .main-header .navbar .nav>li>a{
    color: #2A3041;
  }
  .skin-blue .main-header .navbar{
    background-color: #FFF;
  }
  .skin-blue .main-header .navbar .sidebar-toggle:hover{
    background-color: #2a30410d;
    color: #2A3041;
  }
  .skin-blue .main-header .navbar .nav>li>a:hover, .skin-blue .main-header .navbar .nav>li>a:active, .skin-blue .main-header .navbar .nav>li>a:focus, .skin-blue .main-header .navbar .nav .open>a, .skin-blue .main-header .navbar .nav .open>a:hover, .skin-blue .main-header .navbar .nav .open>a:focus, .skin-blue .main-header .navbar .nav>.active>a{
    color: #2A3041;
  }
  .skin-blue .main-header li.user-header {
      background-color: #2A3041;
  }
  .content-wrapper, .right-side{
    background-color: #F6F6F9;
  }
  .btn{
    background-color: #eff2f7;
  }
  .btn-primary{
    background-color: #58617a!important;
    border-color: #58617a!important;
  }
  .btn-danger, .bg-red{
    background-color: #f46a6a!important;
    border-color: #f46a6a!important;
  }
  .bg-primary{
    background-color: #58617a!important;
  }
  .select2-container--default .select2-selection--multiple .select2-selection__choice{
    
    background-color: #58617a;
    border-color: #58617a;
  }
  *{
    outline: none!important;
  }
  .skin-blue .sidebar-menu>li:hover>a, .skin-blue .sidebar-menu>li.active>a{
    border-left-color: #FFF;
  }
  .iconbtns{
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .iconbtns svg{
    width: 15px;
    height: 15px;
    margin-right: 5px;
  }
  .input-group-addon svg{
    width: 15px;
    height: 15px;
  }
  .file_manager_table img{
    width: 15px;
    height: 15px;
    object-fit: contain;
    margin-right: 10px;
  }
  .questionsPageTable img{
    width: auto;
    height: auto;
  }
  
  .file_manager_table .file_name_cell{
    display: flex;
    align-items: center;
    cursor: pointer;
  }
  .dropdown-menu svg{
    width: 15px;
    height: 15px;
    object-fit: contain;
    margin-right: 10px;
  }
  .dropdown-menu a{
    display: flex!important;
    align-items: center;
  }
  .cursor-pointer{
    cursor: pointer;
  }
  .new-dropdown li{
    padding: 5px 10px;
    cursor: pointer;
  }

  .table>thead>tr>th{
    white-space: nowrap;
  }
  .btn-success, .bg-green{
    background-color: #34c38f!important;
  }
  .btn-warning{
    background-color: #f39c12!important;
  }
  .zipUploading{
    width: 100%;
    height: 100vh;
    background-color: rgba(255,255,255,0.8);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
  }
  .zipUploadingContainer{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
  .zipUploadingHeading{
    font-size: 30px;
    color: #000;
    font-weight: bold;
  }
  .zipUploadingBar{
    width: 90%;
    max-width: 500px;
    height: 5px;
    background-color: rgba(0,0,0,0.1);
    border-radius: 10px;
    overflow: hidden;
  }
  .zipInsideBar{
    width: 50%;
    height: 100%;
    background-color: #58617a;
  }
  .outOf{
    font-size: 18px;
    color: rgba(0,0,0,0.8);
    padding-top: 10px;
  }
  .no-right-padding{
    padding-right: 0;
  }
  .no-left-padding{
    padding-left: 0;
  }
  .containImage{
    width: 100%;
    height: auto;
    object-fit: contain;
  }
  .courseImageCon{
    position: relative;
    overflow: hidden;
  }
  .courseCoverCon{
    position: relative;
    overflow: hidden;
  }
  .courseCoverCon img{
    width: 100%;
    height: auto;
    object-fit: contain;
  }
  .floatingOptions{
    position: absolute;
    bottom: 10px;
    right: 10px;
    font-size: 12px;
    color: #FFF;
    padding: 5px 7px;
    background-color: #2A3041;
    border-radius: 20px;
    opacity: 0;
    transition: 0.5s;
    cursor: pointer;
  }
  .courseCoverCon:hover .floatingOptions{
    opacity: 1;
  }
  .changeImage{
    position: absolute;
    bottom: -100%;
    right: 10px;
    font-size: 12px;
    color: #FFF;
    padding: 5px 20px;
    background-color: #2A3041;
    border-radius: 20px;
    opacity: 0;
    transition: 0.5s;
    cursor: pointer;
  }
  
  .courseImageCon:hover .changeImage{
    opacity: 1;
    bottom: 10px;
  }
  .tab-pane{
    background-color: #F6F6F9;
    border-radius: 5px;
    overflow: hidden;
  }
  /* .dragHandle2{
    padding: 8px 5px;
    border: 1px solid #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
  } */
  .bigRenameBody{
    max-width: 1500px;
    max-height: 90vh;
    overflow: auto;
  }
  .midRenameBody{
    max-width: 800px;
    max-height: 80vh;
    overflow: auto;
  }
  .renameInsideBody{
    /* height: 10px; */
    width: 100%;
  }
  .importBtn{
    position: fixed;
    bottom: 10px;
    left: calc(50% - 75px);
    width: 150px;
    z-index: 9;
  }
  .filtersArea{
    /* max-height: 100vh; */
    overflow: auto;
  }
  .courseCardsContainer{
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  .courseCard{
    width: calc(33.33% - 20px);
    margin: 20px 10px;
    background-color: #FFF;
    border-radius: 10px;
    /* height: 200px; */
    cursor: pointer;
    transition: 0.5s;
  }
  .courseCardImage{
    width: calc(100% - 0px);
    top: -15px;
    /* margin-left: 15px;
    margin-right: 15px; */
    transition: 0.5s;
    transform: scale(0.9);
    transform-origin: top;
    position: relative;
  }
  .courseCardImage img{
    width: 100%;
    height: auto;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 10px 10px rgba(0,0,0,0.05);
  }
  .courseCard:hover .courseCardImage{
    transform: scale(1);
    /* width: calc(100% - 0px);
    margin-left: 0px;
    margin-right: 0px; */
  }
  .cardBottomBody{
    width: calc(100% - 30px);
    margin: 0px auto;
  }
  .CourseCardName{
    font-weight: 600;
    font-size: 16px;
    color: #000;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
    overflow: hidden;
    cursor: pointer;
    display: -webkit-box;
  }
  .courseCardSubtext{
    font-size: 14px;
    color: rgba(0,0,0,0.6);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
    overflow: hidden;
    cursor: pointer;
    display: -webkit-box;
  }
  .cardFooterArea{
    border-top: 0.1px solid rgba(0,0,0,0.1);
    padding: 10px 0;
  }
  .manageBtnSpan{
    display: inline-block;
    width: 0;
    transition: 0.5s;
    overflow: hidden;
    opacity: 0;
  }
  .manageBtn{
    transition: 0.5s;
    display: flex;
    align-items: center;
  }
  .courseCard:hover .manageBtnSpan{
    width: 60px;
    opacity: 1;
  }
  .overlayBox{
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.7);
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 10px;
    opacity: 0;
    transition: 0.5s;
  }
  .courseCard:hover .overlayBox{
    opacity: 1;
  }
  .usersList{
    width: calc(100% - 20px);
    margin: 10px;

  }
  .usersList ul{
    list-style: none;
    margin: 0;
    padding: 0;
    height: 50px;
  }
  .usersList ul li{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 2px solid #FFF;
    background-color: gray;
    float: left;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFF;
    font-weight: 600;
    position: absolute;
    overflow: hidden;
  }
  .usersList ul li img{
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .user1{
    left: 10px;
  }
  .user2{
    left: 45px;
  }
  .user3{
    left: 80px;
  }
  .user4{
    left: 115px;
  }
  .courseContains{
    font-size: 16px;
    color: #FFF;
    font-weight: 600;
    padding: 0 10px;
    margin: 0;
  }
  .published{
    position: absolute;
    top: 10px;
    right: 10px;
    border-radius: 20px;
    border: 0.5px solid #FFF;
    background-color: #00A65A;
    /* width: 13px;
    height: 13px; */
    padding: 5px 10px;
    font-size: 12px;
    color: #FFF;
  }
  .unpublished{
    position: absolute;
    top: 10px;
    right: 10px;
    border-radius: 20px;
    border: 0.5px solid #FFF;
    background-color: #dd4b39;
    padding: 5px 10px;
    font-size: 12px;
    color: #FFF;
  }
  .fullCourseCard{
    width: calc(100% - 20px)!important;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .fullCourseCard .courseCardImage{
    width: 300px;
  }
  .fullCourseCard .cardBottomBody{
    width: calc(100% - 330px);
  }
  .fullCourseCard .CourseCardName{
    margin-top: 15px;
  }
  .courseSearchField{
    border-radius: 5px;
    /* padding-right: 40px; */
  }
  .opacityTable{
    opacity: 0.5;
    transition: 0.5s;
  }
  .opacityTable:hover{
    opacity: 1;
  }
  .importVideo{
    cursor: pointer;
    width: calc(100% - 0px);
    border: 5px dashed rgba(0,0,0,0.1);
    border-radius: 10px;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }
  .importVideo i{
    font-size: 80px;
    color: rgba(0,0,0,0.1);
  }
  .importVideo{
    font-size: 20px;
    padding: 10px 0;
    font-weight: bold;
    color: rgba(0,0,0,0.1);
  }


  .playVideo{
    cursor: pointer;
    width: calc(100% - 0px);
    border: 2px solid #58617a;
    border-radius: 10px;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }
  .playVideo i{
    font-size: 80px;
    color: #58617a;
  }
  .playVideo{
    font-size: 20px;
    padding: 10px 0;
    font-weight: bold;
    color: #58617a;
  }

  .hideChartLogo{
    position: absolute;
    bottom: 10px;
    left: 10px;
    width: 64px;
    height: 24px;
    background-color: #FFF;
    z-index: 9;
  }


  @media (min-width:765px) and (max-width:1500px) {
    .courseCard {
        width: calc(50% - 20px);
    }
  }
  @media only screen and (max-width: 900px) {
    .assets-lib{
      flex-direction: column;
    }
    .assetsbars{
      width: calc(100% - 10px);
    }
    .courseCard {
        width: calc(100% - 20px);
    }
    .fullCourseCard .cardBottomBody {
      width: calc(100% - 100px);
    }
    .fullCourseCard .courseCardImage{
      width: 100px;
    }
    #rightCourse{
      height: auto!important;
    }
  }
  .box-body{
    /* overflow: auto; */
  }
  
  

  
/* Logs Page */
.logsPage{
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  overflow: auto;
  background-color: #F6F6F9;
  width: 100%;
  z-index: 9999;
}
.logsBody{
  max-width: 1500px;
  height: calc(100vh - 100px);
  margin: 50px auto;
  justify-content: center;
}
.logsBody{
  display: flex;
}
.logsLeft{
  width: 300px;
}
.logsHeading{
  font-weight: bold;
  padding: 10px;
  color: #055B41;
  font-size: 25px;
}

.backToPanel{
  font-size: 14px;
}
.backToPanel a{
  display: flex;
  color: rgba(0,0,0,0.6);
  align-items: center;
}
.backToPanel a svg{
  width: 16px;
  height: 16px;
  margin-right: 5px;
}
.logsRight{
  width: calc(100% - 350px);
  margin-left: 25px;
}
.logsSlots ul{
  list-style: none;
  padding: 0;
  margin: 0;
}
.logsSlots ul li{
  background-color: #FFF;
  width: calc(100% - 20px);
  padding: 10px;
  margin-bottom: 5px;
  border-radius: 5px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
}
.activeLog{
  border: 2px solid #1CBA83;
 background-color: #e7fff8!important; 
}
.logsSlots ul li svg{
  width: 14px;
  height: 14px;
}
.logsSlots{
  /* max-height: calc(100vh - 200px); */
  overflow: auto;
  min-height: 200px;
  width: 100%;
  position: relative;
}
.logsRightTop{
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.logsRightTop ul{
  list-style-type: none;
  display: flex;
  margin: 0;
}

.logsRightTop ul li{
  display: inline-block;
  font-size: 12px;
  padding: 5px 10px;
  display: flex;
  color: #FFF;
  align-items: center;
  gap:5px;
  margin:0 5px;
  border-radius: 2px;
  cursor: pointer;
}
.logsRightTop ul li .checkbox{
  background-color: #FFF;
  width: 15px;
  height: 15px;
  border-radius: 1px;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;  
}

.logsRightTop ul li .checkbox svg{
  color: rgba(0,0,0,0.8);
  width: 10px;
  height: 10px;
}
.infoSlots{
  background-color: #0CA5E9;
}
.warningSlots{
  background-color: #F59E0B;
}
.dangerSlots{
  background-color: #F33F5E;
}
.logsRightTop ul li p{
  margin: 0;
}
.searchArea{
  padding: 0;
  width: 300px;
}
.searchArea input{
  border-radius: 5px;
}
.logsRightBody{
  width: 100%;
  /* background-color: red; */
  margin: 20px auto;
  /* height: calc(100vh - 240px); */
}
.logsTable{
  width: 100%;
  margin-bottom: 100px;
}
.logsTable tr{
  border-bottom: 0.1px solid rgba(0,0,0,0.05);
}
.logsTable th, 
.logsTable td{
  padding: 10px;
  text-align: left;
}
.dangerLog{
  color: #F33F5E;
}
.infoLog{
  color: #0CA5E9;
}
.warningLog{
  color: #F59E0B;
}
.dangerLog a{
  color: #F33F5E;
}
.infoLog a{
  color: #0CA5E9;
}
.warningLog a{
  color: #F59E0B;
}
.logsTable td{
  background-color: #FFF;
}
.logdescription{
  font-size: 14px;
  color: rgba(0,0,0,0.6);
}
.logtime{
  font-size: 12px;
  color: rgba(0,0,0,0.6);
}
.hiddenURL{
  display: none;
}
.blankLog{
  opacity: 0.5;
  transition: 0.5s;
}
.logsPage .dataTables_length, .logsPage .dataTables_filter{
  display: none!important;
}
/* 


.blankLog:hover{
  opacity: 1;
}

.logsPage div.dataTables_paginate a, .logsPage .ellipsis{
  padding: 6px 12px;
  color: rgba(0,0,0,0.6);
  border: 0.1px solid rgba(0,0,0,0.1);
  background-color: #FFF;
  cursor: pointer;
}
.logsPage div.dataTables_paginate a.disabled{
  opacity: 0.5;
}


.logsPage div.dataTables_paginate a.current{
  z-index: 3;
  color: #fff;
  cursor: default;
  background-color: #58617a;
  border-color: #58617a;
}
.logsPage .dataTables_info, .logsPage .dataTables_paginate{
  width: 50%;
  float: left;
}
.logsPage .dataTables_paginate{
  margin-top: 10px;
} */

.overflowTxt{
  max-width: 180px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.no-downloads {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.no-downloads svg{
  width: 150px;
  height: 150px;
  margin-bottom: 20px;
  stroke-width: 1px;
  color: #7F7F7F;
}
.no-downloads p{
  font-size: 20px;
  font-weight: 600;
  color: #7F7F7F;
}

.courseListSearch{
  width: calc(100% - 50px);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.mynavstack a{
  display: flex!important;
  align-items: center;
  justify-content: space-between;
}
/* .logsPage .paginate_button.next{
  
} */

/* Logs Page End */
​.pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover, .pagination>.active>span, .pagination>.active>span:focus, .pagination>.active>span:hover{
  
  background-color: #58617a;
  border-color: #58617a;
}
.scheduleTabButtons{
  display: flex;
  gap: 10px;

}


.profilePic{
  width: 40px;
  height: 40px;
  border-radius: 5px;
  margin-right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}
.studentName{
  display: flex;
  flex-direction: row;
  align-items: center;
}
.otherInfo{
  display: inline-block;
  padding-top: 10px;
}
.colorImp{
  width: 10px;
  height: 10px;
  border: 0.5px solid rgba(0,0,0,0.5);
  border-radius: 50%;
  display: inline-block;
}

.content-wrapper{
  min-height: 1800px;
}
.direct-chat-msg.right .direct-chat-text *{
  color: #FFF;
}
  /* Dashboard End */



 

  /* Ck Editor */

  .ck-rounded-corners .ck.ck-balloon-panel, .ck.ck-balloon-panel.ck-rounded-corners{
    z-index: 9999;
  }  

  .ck-content .image-inline.image-style-align-left, .ck-content .image-inline.image-style-align-right{
    margin-top: 0;
    margin-bottom: 0;
  }
  .ck.ck-editor__editable .image, .ck.ck-editor__editable .image-inline{
    bottom: -2px;
  }
  @import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=PT+Serif:ital,wght@0,400;0,700;1,400&display=swap');

    /*
 * CKEditor 5 (v35.1.0) content styles.
 * Generated on Wed, 07 Sep 2022 05:15:42 GMT.
 * For more information, check out https://ckeditor.com/docs/ckeditor5/latest/installation/advanced/content-styles.html
 */

 :root {
  --ck-color-image-caption-background: hsl(0, 0%, 97%);
  --ck-color-image-caption-text: hsl(0, 0%, 20%);
  --ck-color-mention-background: hsla(341, 100%, 30%, 0.1);
  --ck-color-mention-text: hsl(341, 100%, 30%);
  --ck-color-table-caption-background: hsl(0, 0%, 97%);
  --ck-color-table-caption-text: hsl(0, 0%, 20%);
  --ck-highlight-marker-blue: hsl(201, 97%, 72%);
  --ck-highlight-marker-green: hsl(120, 93%, 68%);
  --ck-highlight-marker-pink: hsl(345, 96%, 73%);
  --ck-highlight-marker-yellow: hsl(60, 97%, 73%);
  --ck-highlight-pen-green: hsl(112, 100%, 27%);
  --ck-highlight-pen-red: hsl(0, 85%, 49%);
  --ck-image-style-spacing: 1.5em;
  --ck-inline-image-style-spacing: calc(var(--ck-image-style-spacing) / 2);
  --ck-todo-list-checkmark-size: 16px;
}

/* ckeditor5-block-quote/theme/blockquote.css */
.ck-content blockquote {
  overflow: hidden;
  padding-right: 1.5em;
  padding-left: 1.5em;
  margin-left: 0;
  margin-right: 0;
  font-style: italic;
  border-left: solid 5px hsl(0, 0%, 80%);
}
/* ckeditor5-block-quote/theme/blockquote.css */
.ck-content[dir="rtl"] blockquote {
  border-left: 0;
  border-right: solid 5px hsl(0, 0%, 80%);
}
/* ckeditor5-basic-styles/theme/code.css */
.ck-content code {
  background-color: hsla(0, 0%, 78%, 0.3);
  padding: .15em;
  border-radius: 2px;
}
/* ckeditor5-highlight/theme/highlight.css */
.ck-content .marker-yellow {
  background-color: var(--ck-highlight-marker-yellow);
}
/* ckeditor5-highlight/theme/highlight.css */
.ck-content .marker-green {
  background-color: var(--ck-highlight-marker-green);
}
/* ckeditor5-highlight/theme/highlight.css */
.ck-content .marker-pink {
  background-color: var(--ck-highlight-marker-pink);
}
/* ckeditor5-highlight/theme/highlight.css */
.ck-content .marker-blue {
  background-color: var(--ck-highlight-marker-blue);
}
/* ckeditor5-highlight/theme/highlight.css */
.ck-content .pen-red {
  color: var(--ck-highlight-pen-red);
  background-color: transparent;
}
/* ckeditor5-highlight/theme/highlight.css */
.ck-content .pen-green {
  color: var(--ck-highlight-pen-green);
  background-color: transparent;
}
/* ckeditor5-font/theme/fontsize.css */
.ck-content .text-tiny {
  font-size: .7em;
}
/* ckeditor5-font/theme/fontsize.css */
.ck-content .text-small {
  font-size: .85em;
}
/* ckeditor5-font/theme/fontsize.css */
.ck-content .text-big {
  font-size: 1.4em;
}
/* ckeditor5-font/theme/fontsize.css */
.ck-content .text-huge {
  font-size: 1.8em;
}
/* ckeditor5-image/theme/image.css */
.ck-content .image {
  display: table;
  clear: both;
  text-align: center;
  margin: 0.9em auto;
  min-width: 50px;
}
/* ckeditor5-image/theme/image.css */
.ck-content .image img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  min-width: 100%;
}
/* ckeditor5-image/theme/image.css */
.ck-content .image-inline {
  /*
   * Normally, the .image-inline would have "display: inline-block" and "img { width: 100% }" (to follow the wrapper while resizing).;
   * Unfortunately, together with "srcset", it gets automatically stretched up to the width of the editing root.
   * This strange behavior does not happen with inline-flex.
   */
  display: inline-flex;
  max-width: 100%;
  align-items: flex-start;
}
/* ckeditor5-image/theme/image.css */
.ck-content .image-inline picture {
  display: flex;
}
/* ckeditor5-image/theme/image.css */
.ck-content .image-inline picture,
.ck-content .image-inline img {
  flex-grow: 1;
  flex-shrink: 1;
  max-width: 100%;
}
/* ckeditor5-image/theme/imagecaption.css */
.ck-content .image > figcaption {
  display: table-caption;
  caption-side: bottom;
  word-break: break-word;
  color: var(--ck-color-image-caption-text);
  background-color: var(--ck-color-image-caption-background);
  padding: .6em;
  font-size: .75em;
  outline-offset: -1px;
}
/* ckeditor5-image/theme/imageresize.css */
.ck-content .image.image_resized {
  max-width: 100%;
  display: block;
  box-sizing: border-box;
}
/* ckeditor5-image/theme/imageresize.css */
.ck-content .image.image_resized img {
  width: 100%;
}
/* ckeditor5-image/theme/imageresize.css */
.ck-content .image.image_resized > figcaption {
  display: block;
}
/* ckeditor5-image/theme/imagestyle.css */
.ck-content .image-style-block-align-left,
.ck-content .image-style-block-align-right {
  max-width: calc(100% - var(--ck-image-style-spacing));
}
/* ckeditor5-image/theme/imagestyle.css */
.ck-content .image-style-align-left,
.ck-content .image-style-align-right {
  clear: none;
}
/* ckeditor5-image/theme/imagestyle.css */
.ck-content .image-style-side {
  float: right;
  margin-left: var(--ck-image-style-spacing);
  max-width: 50%;
}
/* ckeditor5-image/theme/imagestyle.css */
.ck-content .image-style-align-left {
  float: left;
  margin-right: var(--ck-image-style-spacing);
}
/* ckeditor5-image/theme/imagestyle.css */
.ck-content .image-style-align-center {
  margin-left: auto;
  margin-right: auto;
}
/* ckeditor5-image/theme/imagestyle.css */
.ck-content .image-style-align-right {
  float: right;
  margin-left: var(--ck-image-style-spacing);
}
/* ckeditor5-image/theme/imagestyle.css */
.ck-content .image-style-block-align-right {
  margin-right: 0;
  margin-left: auto;
}
/* ckeditor5-image/theme/imagestyle.css */
.ck-content .image-style-block-align-left {
  margin-left: 0;
  margin-right: auto;
}
/* ckeditor5-image/theme/imagestyle.css */
.ck-content p + .image-style-align-left,
.ck-content p + .image-style-align-right,
.ck-content p + .image-style-side {
  margin-top: 0;
}
/* ckeditor5-image/theme/imagestyle.css */
.ck-content .image-inline.image-style-align-left,
.ck-content .image-inline.image-style-align-right {
  margin-top: var(--ck-inline-image-style-spacing);
  margin-bottom: var(--ck-inline-image-style-spacing);
}
/* ckeditor5-image/theme/imagestyle.css */
.ck-content .image-inline.image-style-align-left {
  margin-right: var(--ck-inline-image-style-spacing);
}
/* ckeditor5-image/theme/imagestyle.css */
.ck-content .image-inline.image-style-align-right {
  margin-left: var(--ck-inline-image-style-spacing);
}
/* ckeditor5-language/theme/language.css */
.ck-content span[lang] {
  font-style: italic;
}
/* ckeditor5-list/theme/todolist.css */
.ck-content .todo-list {
  list-style: none;
}
/* ckeditor5-list/theme/todolist.css */
.ck-content .todo-list li {
  margin-bottom: 5px;
}
/* ckeditor5-list/theme/todolist.css */
.ck-content .todo-list li .todo-list {
  margin-top: 5px;
}
/* ckeditor5-list/theme/todolist.css */
.ck-content .todo-list .todo-list__label > input {
  -webkit-appearance: none;
  display: inline-block;
  position: relative;
  width: var(--ck-todo-list-checkmark-size);
  height: var(--ck-todo-list-checkmark-size);
  vertical-align: middle;
  border: 0;
  left: -25px;
  margin-right: -15px;
  right: 0;
  margin-left: 0;
}
/* ckeditor5-list/theme/todolist.css */
.ck-content .todo-list .todo-list__label > input::before {
  display: block;
  position: absolute;
  box-sizing: border-box;
  content: '';
  width: 100%;
  height: 100%;
  border: 1px solid hsl(0, 0%, 20%);
  border-radius: 2px;
  transition: 250ms ease-in-out box-shadow, 250ms ease-in-out background, 250ms ease-in-out border;
}
/* ckeditor5-list/theme/todolist.css */
.ck-content .todo-list .todo-list__label > input::after {
  display: block;
  position: absolute;
  box-sizing: content-box;
  pointer-events: none;
  content: '';
  left: calc( var(--ck-todo-list-checkmark-size) / 3 );
  top: calc( var(--ck-todo-list-checkmark-size) / 5.3 );
  width: calc( var(--ck-todo-list-checkmark-size) / 5.3 );
  height: calc( var(--ck-todo-list-checkmark-size) / 2.6 );
  border-style: solid;
  border-color: transparent;
  border-width: 0 calc( var(--ck-todo-list-checkmark-size) / 8 ) calc( var(--ck-todo-list-checkmark-size) / 8 ) 0;
  transform: rotate(45deg);
}
/* ckeditor5-list/theme/todolist.css */
.ck-content .todo-list .todo-list__label > input[checked]::before {
  background: hsl(126, 64%, 41%);
  border-color: hsl(126, 64%, 41%);
}
/* ckeditor5-list/theme/todolist.css */
.ck-content .todo-list .todo-list__label > input[checked]::after {
  border-color: hsl(0, 0%, 100%);
}
/* ckeditor5-list/theme/todolist.css */
.ck-content .todo-list .todo-list__label .todo-list__label__description {
  vertical-align: middle;
}
/* ckeditor5-media-embed/theme/mediaembed.css */
.ck-content .media {
  clear: both;
  margin: 0.9em 0;
  display: block;
  min-width: 15em;
}
/* ckeditor5-page-break/theme/pagebreak.css */
.ck-content .page-break {
  position: relative;
  clear: both;
  padding: 5px 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* ckeditor5-page-break/theme/pagebreak.css */
.ck-content .page-break::after {
  content: '';
  position: absolute;
  border-bottom: 2px dashed hsl(0, 0%, 77%);
  width: 100%;
}
/* ckeditor5-page-break/theme/pagebreak.css */
.ck-content .page-break__label {
  position: relative;
  z-index: 1;
  padding: .3em .6em;
  display: block;
  text-transform: uppercase;
  border: 1px solid hsl(0, 0%, 77%);
  border-radius: 2px;
  font-family: Helvetica, Arial, Tahoma, Verdana, Sans-Serif;
  font-size: 0.75em;
  font-weight: bold;
  color: hsl(0, 0%, 20%);
  background: hsl(0, 0%, 100%);
  box-shadow: 2px 2px 1px hsla(0, 0%, 0%, 0.15);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
/* ckeditor5-table/theme/tablecolumnresize.css */
.ck-content .table .ck-table-resized {
  table-layout: fixed;
}
/* ckeditor5-table/theme/tablecolumnresize.css */
.ck-content .table table {
  overflow: hidden;
}
/* ckeditor5-table/theme/tablecolumnresize.css */
.ck-content .table td,
.ck-content .table th {
  position: relative;
}
/* ckeditor5-table/theme/tablecaption.css */
.ck-content .table > figcaption {
  display: table-caption;
  caption-side: top;
  word-break: break-word;
  text-align: center;
  color: var(--ck-color-table-caption-text);
  background-color: var(--ck-color-table-caption-background);
  padding: .6em;
  font-size: .75em;
  outline-offset: -1px;
}
/* ckeditor5-table/theme/table.css */
.ck-content .table {
  margin: 0.9em auto;
  display: table;
}
/* ckeditor5-table/theme/table.css */
.ck-content .table table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  height: 100%;
  border: 1px double hsl(0, 0%, 70%);
}
/* ckeditor5-table/theme/table.css */
.ck-content .table table td,
.ck-content .table table th {
  min-width: 2em;
  padding: .4em;
  border: 1px solid hsl(0, 0%, 75%);
}
/* ckeditor5-table/theme/table.css */
.ck-content .table table th {
  font-weight: bold;
  background: hsla(0, 0%, 0%, 5%);
}
/* ckeditor5-table/theme/table.css */
.ck-content[dir="rtl"] .table th {
  text-align: right;
}
/* ckeditor5-table/theme/table.css */
.ck-content[dir="ltr"] .table th {
  text-align: left;
}
/* ckeditor5-code-block/theme/codeblock.css */
.ck-content pre {
  padding: 1em;
  color: hsl(0, 0%, 20.8%);
  background: hsla(0, 0%, 78%, 0.3);
  border: 1px solid hsl(0, 0%, 77%);
  border-radius: 2px;
  text-align: left;
  direction: ltr;
  tab-size: 4;
  white-space: pre-wrap;
  font-style: normal;
  min-width: 200px;
}
/* ckeditor5-code-block/theme/codeblock.css */
.ck-content pre code {
  background: unset;
  padding: 0;
  border-radius: 0;
}
/* ckeditor5-horizontal-line/theme/horizontalline.css */
.ck-content hr {
  margin: 15px 0;
  height: 4px;
  background: hsl(0, 0%, 87%);
  border: 0;
}
/* ckeditor5-mention/theme/mention.css */
.ck-content .mention {
  background: var(--ck-color-mention-background);
  color: var(--ck-color-mention-text);
}
@media print {
  /* ckeditor5-page-break/theme/pagebreak.css */
  .ck-content .page-break {
      padding: 0;
  }
  /* ckeditor5-page-break/theme/pagebreak.css */
  .ck-content .page-break::after {
      display: none;
  }
}
.ck-content img{
  max-width:100%;
  object-fit:contain;
}
.ck-content ol, .ck-content ul{
  margin-left:20px;
}
.ck-content p, .ck-content ul,.ck-content ol,.ck-content td{
  font-size:14px;
  color:rgba(0,0,0,0.6);
  line-height:25px;
}
.ck-content h1{
  font-size:30px;
}
.ck-content h2{
  font-size:25px;
}
.ck-content h3{
  font-size:22px;
}
.ck-content h4{
  font-size:20px;
}
.ck-content h5{
  font-size:18px;
}
.ck-content .image_resized{
  bottom:-2px;
  position:relative;
}
.ck-content a{
  text-decoration:none;
  color:env('THEMECOLOR');
}
.ombedEmbed{
      padding: 50px 0;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
  }
  .ombedEmbed.fbembed{
      background-color: #475A96;
  }
  .ombedEmbed.googleEmbed{
      background-color: #fafafa;
  }
  .ombedEmbed.twitterEmbed{
      background: linear-gradient(90deg,#71c6f4,#0d70a5);
  }
  .ombedEmbed.instagramEmbed{
      background: linear-gradient(-135deg,#1400c7,#b800b1,#f50000);
  }
  .ombedEmbed.whatsappEmbed{
      background: #2BD769;
  }
  
  .ombedEmbed.pinterestEmbed{
      background: #B7081B;
  }
  .ombedEmbed.youtubeEmbed{
      background: #e11c1c;
  }
  .ombedEmbed.googleEmbed a{
      color: rgba(0,0,0,0.6);
  }
  .ombedEmbed a{
      font-size: 14px;
      color: rgba(255,255,255,0.6);
      text-decoration: none;
      display: block;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      max-width: 90%;
  }
  .embedIframe{
      object-fit: contain;
      border: 0;
      width: 100%;
      margin: 0 auto;
      height: 500px;
  }
  .ombedEmbed:hover a{
      color: #FFF;
      text-decoration: underline;
  }
  .ombedEmbed.googleEmbed:hover a{
      color: rgba(0,0,0,1);
  }
  figure.table{
      max-width: 100%;
      overflow: auto;
      display: block!important;
  }
  .mention{ font-weight: bold; color: #3498db; }  

  .mentionBox{
    display: flex;
    align-items: center;
    padding: 10px;
    border-bottom: 0.5px solid rgba(0,0,0,0.2);
  }
  .mentionIconImage{
    width: 30px;
    height: 30px;
    background-color: red;
    border-radius: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    color: #FFF;
    margin-right: 10px;
  }
  .mentionIconName{
    display: flex;
    flex-direction: column;
    line-height: 14px;
  }
  .mentionEmail{
    font-size: 12px;
  }
  /* Ck Editor End */


  .invoicePopup{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(0,0,0,0.5);
    z-index: 99999;
  }
  .invoicePopupBody{
    padding: 10px;
    width: 90%;
    max-width: 1100px;
    display: flex;
    justify-self: center;
    align-self: center;
    background-color: #FFFFFF;
    border-radius: 10px;
  }
  .background-red{
    background-color: #f5e8e8;
  }
  .studentList{
    list-style-type: none;
    margin: 0;
    padding: 0;
    padding-top: 20px;
  }
  .studentListMain{
    height: 100px;
    width: 100%;
    padding: 10px 0;
    border-bottom: 0.5px solid rgba(0,0,0,0.2);
    display: flex;
    align-items: center;
    justify-items: flex-start;
    cursor: pointer;
    transition: 0.5s;
    margin-bottom: 10px;
  }
  
  .studentListMain:hover{
    background-color: rgba(0,0,0,0.1);
    width: calc(100% - 0px);
    padding: 10px;
  }
  .userImage{
    width: 80px;
    height: 80px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    margin-right: 10px;
  }
  .studentsName{
    width: calc(100% - 90px);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
  }
  .react-confirm-alert-overlay{
    z-index: 999999!important;
  }
  .react-confirm-alert-body{
    width: 430px!important;
  }
  .percircle.big{
    font-size: 300px!important;
  }
  .box-comments .box-comment .attachment-img-my{
    width: 100%!important;
    height: 100%!important;
    object-fit: cover;
  }
  .attachment-img-my{
    width: 100%!important;
    height: 100%!important;
    object-fit: cover;
  }
  .box-comments .box-comment .vericon{
    width: 20px!important;
    height: 20px!important;
    object-fit: cover;
  }
  .box-comments{
    background-color: #FFF;
    overflow: auto;
  }
  .selectImage{
    width: 100%;
    height: 200px;
    border: 4px dashed rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 50px;
    color: rgba(0, 0, 0, 0.6);
    cursor: pointer;
  }
.myckcon .ck-editor__editable_inline {
    min-height: 120px;
}
.opacityhover{
  opacity: 0.5;
  transition: 0.5s;
}
.opacityhover:hover{
  opacity: 1!important;
}
.bg-my{
  background-color: #58617a!important;
  color: #FFF;
}
  /* .myansss figure img{
    width: 100%;
  } */



  /* Login */

  
  
.newlogin{
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-color: #00017317;
}
.logincon{
    width: 90%;
    margin: 0 auto;
    max-width: 1100px;
    background-color: #FFF;
    border-radius: 10px;
    box-shadow: 0 0 30px rgba(0,0,0,0.1);
    overflow: hidden;
    position: relative;
    display: flex;
}
.circle{
    width: 1000px;
    height: 1000px;
    border-radius: 50%;
    background-color: #000173a8;
    position: absolute;
    left: -50%;
    bottom: -50%;
    pointer-events: none;
}
.leftlogin{
    width: 350px;
    /* height: 350px; */
    position: relative;
    z-index: 1;
    padding: 150px 0;
    right: -90px;
}
.leftlogin svg, .leftlogin img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.leftlogin svg path{
    /*fill:red;*/
}
.flexlogin{
    display: flex;
    align-items: center;
    justify-content: center;
}
.profileicon{
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden;
    background-color: #58617a0f;
    margin: 10px auto;
}
.profileicon svg{
    width: 40px;
    height: 40px;
    object-fit: contain;
    margin: 10px;
    stroke:#58617a;
    
}
.loginheading{
    font-size: 34px;
    color: rgba(0,0,0,0.8);
    font-weight: bold;
}
.formcon{
    width: 90%;
    max-width: 350px;
    margin: 10px auto;
    overflow: hidden;
    border-bottom: 2px solid rgba(0,0,0,0.4);
    margin-bottom: 20px;
}
.formcon svg{
    color: rgba(0,0,0,0.4);
}

.formcon.active{
    border-bottom: 2px solid #58617a;
}
.formcon.active input{
    color: #58617a;
}

.formcon.active svg{
    color: #58617a;
}


.iconbox{
    width: 40px;
    height: 40px;
    float: left;
    display: flex;
    justify-content: center;
    align-items: center;
}
.fieldbox{
    width: calc(100% - 40px);
    float: left;
    position: relative;
}
.fieldbox input{
    padding: 10px;
    width: calc(100% - 20px);
    border: 0;
    
}
.formcon label{
    width: 100%;
    display: block;
    text-align: left;
    font-weight: bold;
    padding: 5px 0;
    font-size: 12px;
}
.strongpass ul{
    list-style-type: none;
}
.strongpass{
    width: 90%;
    max-width: 350px;
    margin: 0 auto;
}
.strongpass ul li{
    width: calc(50% - 10px);
    float: left;
    margin: 5px;
    text-align: left;
    font-size:12px;
    color: #58617a;
}
.passshow{
    cursor: pointer;
    position: absolute;
    top: 10px;
    right: 0;
    font-size: 20px;
}
.passshow .showpass{
    display: block;
}
.passshow .hidepass{
    display: none;
}
.passshowactive .showpass{
    display: none;
}
.passshowactive .hidepass{
    display: block;
}
.terms{
    font-size: 12px;
    color: rgba(0,0,0,0.8);
    display: flex;
    align-items: center;
}
.terms a{
    text-decoration: none;
    color: #58617a;
}
.loginButton{
    padding: 10px 30px;
    border-radius: 30px;
    color: #FFF;
    background-color: #000173;
    border: 0;
    font-size: 14px;
    cursor: pointer;
    border: 2px solid #00017329;
}
.lines .leftline{
    width: 100px;
    height: 3px;
    background: linear-gradient(to right, #FFF,#58617a);
    border-radius: 10px;
}
.lines .rightline{
    width: 100px;
    height: 3px;
    background: linear-gradient(to right, #58617a, #FFF);
    border-radius: 10px;
}
.lines{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px 0;
}
.lines .or{
    font-size: 14px;
    padding: 0 5px;
    color: #58617a;
}
.googlebtn{
    background-color: #FFF;
    border-radius: 5px;
    padding: 10px 30px;
    font-size: 14px;
    border: 0;
    box-shadow: 0 0 10px #58617a29;
    margin-bottom: 10px;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    margin: 10px auto;
}
.googlebtn img{
    width: 40px;
    height: 40px;
    object-fit: contain;
    margin-right: 10px;
}
.copyrights{
    padding: 10px 0;
    font-size: 14px;
    position: relative;
    top: 20px;
}
.copyrights a{
    color: #58617a;
    text-decoration: none;
}
.flexlogin input[type='checkbox'] {
    accent-color: #58617a;
}

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active{
    -webkit-box-shadow: 0 0 0 30px white inset !important;
    color: red!important;
}
.space-between{
    display: flex;
    justify-content: space-between;
}
.loginpara{
    font-size: 14px;
    color: rgba(0,0,0,0.6);
    padding: 10px 0;
}
.newlogin .w50{
  width:50%;
  min-height: 1px;
  overflow: hidden;
}
.containermy{
  width:100%;
  min-height: 1px;
  overflow: hidden;
}
.iconbox svg, .passshow svg{
  color: #58617a;
}

.uploadbanner{
  width:100%;
  border-radius: 10px;
  border:5px dashed rgba(0,0,0,0.4);
  /* padding: 60px 0; */
  width: calc(100% - 0px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: bold;
  cursor: pointer;
}
.contentpreview{
  max-width: 700px;
}
.ck.ck-color-grid{
  grid-template-columns: repeat(5, 1fr)!important;
}
.nav-tabs-custom>.nav-tabs>li.active>a{
  background-color: #58617a3b;
  /* color: #FFF; */
}
.ck ck-reset ck-list{
  grid-template-columns: repeat(5, 1fr)!important;
}
.ck.ck-button__label{
  font-size: 14px!important;
  
}
.ck.ck-list__item button{
  padding: 0 10px!important;
}
.nav-tabs-custom>.nav-tabs>li.active{
  border-top-color: #58617a;
}
.previewBox{
  /* height: 100px; */
  width: 100%;
  /* background-color: red; */
  position: relative;
}
.previewMenu{
  width: 100%;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.previewMenu .menubars{
  width: 40px;
  margin: 0 10px;
  padding: 10px;
  color: #FFF;
}
.previewMenu .menuLogo{
  width: 220px;
}
.previewMenu .menuLogo img{
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.previewBox{
  /* background-color: pink;
  padding-bottom: 10px;; */
  overflow: hidden;
}
.previewBanner{
  position: relative;
}
.previewBannerCon{
  width: calc(100% - 20px);
  overflow: hidden;
  border-radius: 10px;
  margin: 10px auto;
}
.previewBannerCon img{
  width: 100%;
  height: auto;
  object-fit: contain;
}
.previewNavsCol{
  width: 96%;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: space-between;
  top: 50%;
  left: 2%;
  z-index: 9;
  transform: translateY(-50%);
}
.previewNavs{
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #FFF;
  font-size: 14px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
.previewHeadings{
  font-size: 20px;
  font-weight: bold;
  padding: 0px 10px;
}
.previewBoxBody{
  margin: 10px 0;
}
.previewcategories{
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
  list-style: none;
  padding: 10px 0;
}
.previewcategories li{
  width: calc(33% - 5px);
  padding: 5px 10px;
  margin: 5px 0;
  border-radius: 20px;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  overflow: hidden;
}
.previewCourseBg{
  width: calc(100% - 20px);
  padding: 10px;
  margin: 10px auto;
  border-radius: 10px;
}
.previewCourseContainer{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.previewCourseContainer .coursePreview{
  width: calc(50% - 10px);
  background-color: #000;
  border-radius: 10px;
  margin-bottom: 10px;
  border-radius: 10px;
  overflow: hidden;
}
.previewCourseContainer .coursePreview img{
  width: 100%;
  object-fit: contain;
}
.previewCourseNameArea{
  padding: 5px 0;
}
.previewCourseName{
  padding: 0 10px;
  white-space: nowrap;
  overflow: hidden;
  font-size: 12px;
  font-weight: bold;
  text-overflow: ellipsis;
  margin: 0;
  margin-bottom: 5px;
} 
.previewCourseLang{
  font-size: 10px;
  padding: 0 10px;
  margin: 0;
}
.previewCoursePriceArea{
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
}
.previewButtonContainer{
  padding: 10px 0;
  text-align: center;
}
.previewButtonContainer button{
  padding: 5px 10px;
  border-radius: 20px;
  color: #FFF;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  margin: 0 auto;
}
.privacyPolicyArea li{
  font-size: 14px;
  width: calc(100% - 20px);
  text-align: left;
  border-radius: 5px;
}
.privacyPolicyArea li i{
  font-size: 12px;
}
.previewSearch{
  position: absolute;
  bottom: 10px;
  right: 10px;
  width: 40px;
  height: 40px;
  border-radius: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFF;
}
.img-circle, .user-panel>.image>img{
  background-color: #FFF;
}
.info-box-flex  .info-box{
  display: flex;
  align-items: center;
}
.info-box-flex  .info-box-content{
  margin: 0;
}
.fieldSelect{
  list-style-type: none;
  padding: 0;
}
.fieldSelect li label{
  display: flex;
  align-items: center;
  justify-items: flex-start;
}
.forAdmin .profilePic{
  overflow: hidden;
  background-color: #00017317;
  padding: 5px;
}
.forAdmin span{
  display: block;
  width: calc(100% - 60px);
}
.forAdmin .profilePic img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.widget-user .widget-user-image>img{
  width: 90px;
  height: 90px;
  overflow: hidden;
  object-fit: cover;
}
.widget-user .widget-user-image{
  top:15px;
}
.dialog{
  width: 100%;
  height: 100vh;
  background-color: rgba(0,0,0, 0.5);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999999;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media only screen and (max-width: 900px){
    body{
        background: #58617a29;
    }
    .newlogin{
        /* height: auto; */
        padding: 20px 0;
    }
    .logincon{
        flex-direction: column;
    }
    .leftlogin{
        width: 200px;
        /* height: 200px; */
        padding: 100px 0 50px 0;
        right: 0;
    }
    .circle{
        top: -20%;
        width: 500px;
        height: 500px;
        display: none;
    }
    .loginbuttons{
        flex-direction: column;
    }
    .newlogin .w50{
      width:100%;
    }

}