.admin-page{
  background-color: #F1F5FC;
  height: 100vh;
}

.admin-page .min-h-100{
  min-height: calc(100vh - 72px);
}

.admin-page .admin-container{
  min-height: 100vh;
}

.admin-page .admin-content{
  height: calc(100vh - 72px);
  overflow: auto;
}

.admin-page .navbar{
  height: 72px;
}

.admin-page .navbar .btn-group button{
  padding: 8px 12px;
}

.admin-page .navbar .navbar-brand span{
  display: block;
  font-size: 14px;
}

.admin-page .navbar .navbar-nav a{
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px solid #ffffff;
  border-radius: 100%;
  color: #ffffff;
  margin-right: 20px;
}

.admin-page .navbar .navbar-nav a:hover{
  background-color: #ffffff;
  color: #0090FF;
}

.admin-page .sidebar {
  transition: width 0.3s ease;
  /* height: calc(100vh - 72px); */
  height: 100vh;
  top: 0;
  box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.20);
}

.admin-page .sidebar .top-logo{
  height: 72px;
}

.admin-page .sidebar .nav-container{
  /* height: calc(100vh - 122px); */
  height: calc(100vh - 124px);
  /* background-color: red; */
}

.admin-page .sidebar .nav-container .menu-box{
  height: calc(100% - 66px);
  max-height: calc(100% - 52px);
  overflow: auto;
  padding-right: 4px;
}

.admin-page .sidebar .nav-container .menu-box::-webkit-scrollbar {
  width: 2px;
}
.admin-page .sidebar .nav-container .menu-box::-webkit-scrollbar-track {
  background: #f1f1f1; 
}
.admin-page .sidebar .nav-container .menu-box::-webkit-scrollbar-thumb {
  background: #888; 
}
.admin-page .sidebar .nav-container .menu-box::-webkit-scrollbar-thumb:hover {
  background: #555; 
}

.admin-page .sidebar input{
  padding: 8px 12px 8px 0px;
  margin-bottom: 12px;
  background-color: #F1F5FC;
  border: none;
}

.admin-page .sidebar input::placeholder{
  color: #BDBDBD;
}

.admin-page .sidebar .input-group-text{
  padding: 8px 12px 8px 12px;
  margin-bottom: 12px;
  background-color: #F1F5FC;
  border: none;
  color: #BDBDBD;
}

.admin-page .sidebar .toggle-sidebar{
  transition: width 0.3s ease;
  z-index: 99999;
  display: block;
  width: 30px;
  height: 30px;
  position: absolute;
  top: calc(72px / 2 - 15px);
  left: calc(100% - 15px);
  padding: 0;
}

.admin-page .sidebar .img-avatar{
  width: 72px;
  height: 72px;
  border-radius: 100%;
  border: 3px solid #ffffff;
}

.admin-page .sidebar .toggle-btn {
  margin-bottom: 1rem;
  width: 100%;
}

.admin-page .sidebar .nav-link {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  margin-bottom: 12px;
  background: #ffffff;
  color: #526071;
  border: 1px solid #F1F5FC;
  font-weight: 500;
}

.admin-page .sidebar .submenu .nav-link{
  color: #959EA9;
  margin-left: 24px;
  border: none;
  font-weight: normal;
}

.admin-page .sidebar .nav a:hover, 
.admin-page .sidebar .nav a.active{
  background-color: #0090FF;
  color: #ffffff;
  border-color: #0090FF;
} 

.admin-page .sidebar .nav .drop-menu:hover{
  background-color: #ffffff;
  border-color: #0090FF;
  color: #0090FF;
}

.admin-page .sidebar .nav a.active-border{
  border-color: #0090FF;
  color: #0090FF;
}

.admin-page .sidebar.minimized {
  width: 80px;
}

.admin-page .sidebar.minimized .toggle-sidebar{
  rotate: 180deg;
}

.admin-page .sidebar.minimized .img-avatar{
  width: 50px;
  height: 50px;
  margin-bottom: 16px;
}

.admin-page .sidebar.minimized .display-username{
  display: none;
}

.admin-page .sidebar.minimized .nav-link span, 
.admin-page .sidebar.minimized .nav-link i.chrevon, 
.admin-page .sidebar.minimized .submenu, 
.admin-page .sidebar.minimized input{
  display: none;
}

.admin-page .sidebar.minimized .nav-link i{
  margin-right: 0!important;
}

.admin-page .sidebar.minimized .nav-link {
  display: flex;
  justify-content: center;
  align-items: center;
}

.admin-page .sidebar.minimized .nav-link.drop-menu{
  border-color: #F1F5FC!important;
  color: #526071!important;
}

.admin-page .sidebar.minimized .input-group-text{
  cursor: pointer;
  width: 52px;
  border-radius: 0.375rem!important;
  display: flex;
  justify-content: center;
}





.modal-admin .modal-header,
.modal-admin .modal-body{
  padding: 16px 32px;
}

.modal-admin .modal-header .modal-title{
  font-size: 18px;
  color: #526071;
}

.admin-page .page-title{
  font-size: 30px;
  font-weight: 700;
  color: #0090FF; 
}

.admin-page .page-title.strip{
  position: relative;
}

.admin-page .page-title.strip::after{
  content: "";
  position: absolute;
  height: 20px;
  border-bottom: 2px solid #0090FF;
  /* width: 400px; */
  width: 30vw;
  margin-left: 12px;
}

.admin-page .page-desc{
  font-size: 18px;
  color: #526071;
  margin-bottom: 32px;
}

.admin-page .col-tabs-parent{
  background-color: #ffffff;
  border-radius: 12px;
}

.admin-page .col-tabs{
  background-color: #ffffff;
  border-radius: 12px;
  padding: 8px;
}

.admin-page .form-selector{
  padding: 8px 16px;
}

.admin-page .col-tabs .nav-link{
  border-radius: 8px;
  font-size: 14px;
  padding: 8px 16px;
  color: #BDBDBD;
  border: 1px solid transparent;
}

.admin-page .col-tabs .nav-link.active,
.admin-page .col-tabs .dropdown-toggle.show,
.admin-page .col-tabs .nav-item.dropdown.active a.dropdown-toggle{
  background-color: #0090FF;
  color: #ffffff;
}

.admin-page .mini-cards{
  background: #ffffff;
  border-radius: 1rem!important;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}

.admin-page .cards:not(.combine){
  background: #ffffff;
  border-radius: 1rem!important;
  height: 100%;
  border: none!important;
}


.admin-page .cards.combine{
  background: #ffffff;
  height: 100%;
}

.admin-page .combine.combine-top{
  border-top-left-radius: 1rem!important;
  border-top-right-radius: 1rem!important;
}

.admin-page .combine.combine-bottom{
  border-bottom-left-radius: 1rem!important;
  border-bottom-right-radius: 1rem!important;
}

.admin-page .cards .cards-title,
.admin-page .cards .accordion-header.cards-title{
  padding: 16px 24px;
  border-bottom: 1px solid #F1F5FC;
}

.admin-page .cards .cards-title.hr{
  border-bottom: 8px solid #F1F5FC!important;
}

.admin-page .cards .cards-title h4,
.admin-page .accordion.cards .cards-title button,
.admin-page .mini-cards h4{
  font-size: 18px;
  color: #526071;
  font-weight: 600;
  margin-bottom: 0;
}

.admin-page .cards.cards-exercise .cards-title{
  padding: 12px 24px;
}

.admin-page .cards.cards-exercise .cards-title h4,
.admin-page .accordion.cards-exercise .cards-title button{
  font-size: 16px;
}

.admin-page .cards.cards-exercise .cards-title button{
  font-size: 12px;
}

.admin-page .cards .cards-title p{
  font-size: 12px;
  color: #BDBDBD;
  margin-bottom: 0;
  margin-top: 8px;
}

.admin-page .cards .cards-title a{
  text-decoration: none;
  font-size: 14px;
}

.admin-page .accordion.cards .accordion-item{
  border-radius: 1rem;
  border: none;
  overflow: hidden;
}

.admin-page .cards .accordion-header.cards-title{
  padding: 0;
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
  border-bottom-left-radius: 0!important;
  border-bottom-right-radius: 0!important;
}

.admin-page .accordion.cards .cards-title button{
  padding: 16px 24px;
  border-radius: 1rem;
  background-color: #ffffff!important;
  outline: none!important;
  box-shadow: none!important;
}

.admin-page .cards .cards-body{
  padding: 16px 24px;
}

.admin-page .cards .cards-body table{
  margin-bottom: 0;
}

.admin-page .cards .cards-body table th{
  background-color: #0090FF;
  font-size: 14px;
  color: #ffffff;
  border: 0;
}

.admin-page .cards .cards-body table th:first-of-type{
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}

.admin-page .cards .cards-body table th:last-of-type{
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}

.admin-page .cards .cards-body table tr th:first-child,
.admin-page .cards .cards-body table tr td:first-child{
  text-align: center;
}

.admin-page .cards .cards-body table tbody tr:last-of-type td{
  border: 0;
}

.admin-page .cards .cards-body table td{
  font-size: 12px;
  color: #526071;
  border-color: #F1F5FC;
}

.admin-page .cards .cards-body table th,
.admin-page .cards .cards-body table td{
  padding: 10px 8px;
  vertical-align: middle;
}

.admin-page .cards .cards-body table td.action-col .btn{
  border-radius: 100%;
  background-color: #E2F2FF;
  border: none!important;
  margin: 0 4px;
}

.admin-page .cards .cards-body table td.action-col .btn-view{
  color: #526071;
}

.admin-page .cards .cards-body table td.action-col .btn.btn-edit{
  color: #0090FF;
}

.admin-page .cards .cards-body table td.action-col .btn.btn-delete{
  color: #E9342D;
}

.admin-page .cards .cards-body table td.action-col .btn-view:hover{
  background-color: #526071;
  color: #ffffff;
}

.admin-page .cards .cards-body table td.action-col .btn.btn-edit:hover{
  background-color: #0090FF;
  color: #ffffff;
}

.admin-page .cards .cards-body table td.action-col .btn.btn-delete:hover{
  background-color: #E9342D;
  color: #ffffff;
}

.admin-page .cards .cards-body .table-input-search{
  margin-bottom: 16px;
  /* border-color: #BDBDBD; */
}

.admin-page .cards .cards-body form .input-group-icon .input-group-text,
.modal-admin .modal-body form .input-group-icon .input-group-text,
.admin-page .col-tabs-parent .form-selector .input-group-text{
  background-color: #ffffff;
  color: #BDBDBD;
  border-right: 0;
  padding-right: 6px;
}

.admin-page .cards .cards-body form small,
.modal-admin .modal-body form small{
  font-size: 12px;
  color: #526071;
}

.admin-page .cards .cards-body form .input-group-icon input,
.admin-page .cards .cards-body form .input-group-icon select,
.modal-admin .modal-body form .input-group-icon input,
.modal-admin .modal-body form .input-group-icon select,
.admin-page .col-tabs-parent .form-selector select{
  border-left: 0;
  padding-left: 6px;
}

.admin-page .cards .cards-body form .input-group-icon input::placeholder,
.admin-page .cards .cards-body form .input-group-icon input::placeholder,
.admin-page .cards .cards-body form textarea::placeholder,
.admin-page .cards .cards-body form textarea::placeholder{
  color: #BDBDBD;
}

.admin-page .cards .cards-body form .input-group-icon.disabled  .input-group-text,
.admin-page .cards .cards-body form .input-group-icon.disabled input,
.modal-admin .modal-body form .input-group-icon.disabled  .input-group-text,
.modal-admin .modal-body form .input-group-icon.disabled input{
  background-color: #F2F2F2;
  color: #333333;
}

.admin-page .cards .cards-body form .input-group-icon select:required:invalid,
.modal-admin .modal-body form .input-group-icon select:required:invalid,
.admin-page .col-tabs-parent .form-selector select:invalid{
  color: #BDBDBD;
}

.admin-page .cards .cards-body form .input-group-icon select,
.admin-page .cards .cards-body form .input-group-icon select option,
.modal-admin .modal-body form .input-group-icon select,
.modal-admin .modal-body form .input-group-icon select option,
.admin-page .col-tabs-parent .form-selector select,
.admin-page .col-tabs-parent .form-selector select option{
  color: #212529;
}






.admin-dashboard .student-display{
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}

.admin-dashboard .student-display img{
  width: 40px;
  height: 40px;
  object-fit: cover;
  margin-right: 8px;
}

.admin-dashboard .student-display .student-identity{
  height: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.admin-dashboard .student-display .student-identity h5{
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 4px;
}

.admin-dashboard .student-display .student-identity h6{
  font-size: 12px;
  font-weight: 400;
  margin: 0;
  color: #526071;
}

.admin-dashboard .student-display .student-level{
  font-size: 14px;
  font-weight: 400;
  color: #959EA9;
  margin-bottom: 0;
  margin-left: auto;
}

.react-select-group__control{
  border-radius: 0.375rem!important;
  border-left: none!important;
  border-top-left-radius: 0!important;
  border-bottom-left-radius: 0!important;
  border-color: #dee2e6!important;
}

.react-select-group__placeholder{
  color: #BDBDBD!important;
}

.group-react-select{
  position: relative;
  flex: 1 1 auto;
  width: 1%;
  min-width: 0;
}

/* audio.no-control::-webkit-media-controls{
  display:none !important;
} */

.ck-rounded-corners .ck.ck-editor__top .ck-sticky-panel .ck-sticky-panel__content, .ck.ck-menu-bar{
  border-top-left-radius: 0.375rem!important;
  border-top-right-radius: 0.375rem!important;
}

.ck.ck-editor__main > .ck-editor__editable{
  border-bottom-left-radius: 0.375rem!important;
  border-bottom-right-radius: 0.375rem!important;
  min-height: 20vh;
}