frontend_adaptive_learning/src/assets/styles/teacher.css

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

.teacher-page .dashboard-container{
  height: calc(100vh - 58px);
  padding-top: 58px;
}

.teacher-page .navbar{
  height: 58px;
}

.teacher-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: 16px;
}

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

.teacher-page .sidebar {
  transition: width 0.3s ease;
  height: calc(100vh - 58px);
  top: 58px;
}

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

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

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

.teacher-page .sidebar .nav-link {
  display: flex;
  align-items: center;
  padding: 12px 16px;
}

.teacher-page .sidebar .nav a:hover, .teacher-page .sidebar .nav a.active{
  background-color: #ffffff47;
}

.teacher-page .sidebar.minimized {
  width: 72px;
}

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

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

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

.teacher-page .sidebar.minimized .nav-link span {
  display: none;
}

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

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

.teacher-page .home-page .filled-journey .card img{
  aspect-ratio: 1/1;
  width: 10vw;
  height: auto;
  max-width: 205px;
  max-height: 205px;
  object-fit: cover;
}



.teacher-main-layout{
  height: calc(100vh - 58px);
  overflow-y: auto;
}




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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.teacher-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;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.teacher-page .cards .cards-body form .input-group-icon input,
.teacher-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,
.teacher-page .col-tabs-parent .form-selector select{
  border-left: 0;
  padding-left: 6px;
}

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

.teacher-page .cards .cards-body form .input-group-icon.disabled  .input-group-text,
.teacher-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;
}

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

.teacher-page .cards .cards-body form .input-group-icon select,
.teacher-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,
.teacher-page .col-tabs-parent .form-selector select,
.teacher-page .col-tabs-parent .form-selector select option{
  color: #212529;
}

.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;
}