@charset "UTF-8";
@font-face {
  font-family: "SVNVolteRounded";
  src: url("/font/SVN-VolteRoundedRegular.ttf"); }

@font-face {
  font-family: "SVNVolteRounded";
  src: url("/font/SVN-VolteRoundedBold.ttf");
  font-weight: 700; }

@font-face {
  font-family: "SVNVolteRounded";
  src: url("/font/SVN-VolteRoundedMedium.ttf");
  font-weight: 500; }

@font-face {
  font-family: "SVNVolteRounded";
  src: url("/font/SVN-VolteRoundedSemiBold.ttf");
  font-weight: 600; }

@font-face {
  font-family: inter;
  src: url("/font/Inter-Regular.ttf"); }

@font-face {
  font-family: inter;
  src: url("/font/Inter-Medium.ttf");
  font-weight: 500; }

@font-face {
  font-family: inter;
  src: url("/font/Inter-SemiBold.ttf");
  font-weight: 600; }

@font-face {
  font-family: inter;
  src: url("/font/Inter-Bold.ttf");
  font-weight: 700; }

body {
  overflow: hidden;
  font-family: inter, sans-serif; }
  body *:not(.default-scrollbar) {
    /* Track */
    /* Handle */
    /* Handle on hover */ }
    body *:not(.default-scrollbar)::-webkit-scrollbar {
      width: 6px;
      height: 6px; }
    body *:not(.default-scrollbar)::-webkit-scrollbar-track {
      box-shadow: inset 0 0 5px #ffffff;
      border-radius: 10px; }
    body *:not(.default-scrollbar)::-webkit-scrollbar-thumb {
      background: #dddddd;
      border-radius: 10px; }
    body *:not(.default-scrollbar)::-webkit-scrollbar-thumb:hover {
      background: #888888; }
  body .font-SVN {
    font-family: "SVNVolteRounded"; }

a.btn-shadow.shadow-blue,
button.btn-shadow.shadow-blue {
  box-shadow: 0px 4px 2px 1px #0fabdc; }
  a.btn-shadow.shadow-blue:hover,
  button.btn-shadow.shadow-blue:hover {
    box-shadow: 0px 4px 2px 1px #0f68dc; }

a.btn-shadow.shadow-gray,
button.btn-shadow.shadow-gray {
  box-shadow: 0px 4px 2px 1px #dcdcdc; }
  a.btn-shadow.shadow-gray:hover,
  button.btn-shadow.shadow-gray:hover {
    box-shadow: 0px 4px 2px 1px #b8b8b8; }

a.btn-shadow.shadow-orange,
button.btn-shadow.shadow-orange {
  box-shadow: 0px 4px 2px 1px #f38434; }
  a.btn-shadow.shadow-orange:hover,
  button.btn-shadow.shadow-orange:hover {
    box-shadow: 0px 4px 2px 1px #c96925; }

a.btn,
button.btn {
  background-color: #00c2ff;
  color: white;
  border-radius: 12px; }
  a.btn:hover,
  button.btn:hover {
    background-color: #008cff; }
  a.btn.shadow-df,
  button.btn.shadow-df {
    box-shadow: 0px 4px 2px 1px #0fabdc; }
    a.btn.shadow-df:hover,
    button.btn.shadow-df:hover {
      box-shadow: 0px 4px 2px 1px #0f68dc; }
  a.btn.rounded-2xl,
  button.btn.rounded-2xl {
    border-radius: 16px; }

a.btn-secondary,
button.btn-secondary {
  background-color: #fff;
  border: 1px solid #b8b8b8; }
  a.btn-secondary:hover,
  button.btn-secondary:hover {
    background-color: #e2e2e2; }
  a.btn-secondary.shadow-df,
  button.btn-secondary.shadow-df {
    box-shadow: 0px 4px 2px 1px #dcdcdc; }
    a.btn-secondary.shadow-df:hover,
    button.btn-secondary.shadow-df:hover {
      box-shadow: 0px 4px 2px 1px #b8b8b8; }

a.btn-close,
button.btn-close {
  padding: 8px;
  border-radius: 8px; }
  a.btn-close:hover,
  button.btn-close:hover {
    background-color: #e9e9e9; }

a.btn-back,
button.btn-back {
  padding: 8px;
  border-radius: 8px; }
  a.btn-back:hover,
  button.btn-back:hover {
    background-color: #e9e9e9; }
  a.btn-back.circle,
  button.btn-back.circle {
    border-radius: 100%; }

a.btn-light,
button.btn-light {
  background-color: #fff;
  border-radius: 16px; }

a.btn-green,
button.btn-green {
  background-color: #00d971; }
  a.btn-green:hover,
  button.btn-green:hover {
    background-color: #04b660; }

a.btn-orange,
button.btn-orange {
  background-color: #fe9800; }
  a.btn-orange:hover,
  button.btn-orange:hover {
    background-color: #dd8c11; }

.toast {
  transition: all 0.3s ease-in-out;
  opacity: 1; }
  .toast.hide {
    opacity: 0; }

ul.menu-df {
  display: flex;
  align-items: center; }
  ul.menu-df li a {
    display: block;
    font-size: 18px;
    border-bottom: 3px solid #fff; }

#btn-submit-login {
  background-color: #1cb0f6;
  box-shadow: 0px 2px 2px #1899d6; }
  #btn-submit-login:hover {
    background-color: #0e9adb;
    box-shadow: 0px 2px 2px #1899d6; }

.form-group .icon-input-inline {
  position: absolute; }

.text-size-22 {
  font-size: 22px; }

.form-group input.form-control,
.form-group select.form-control {
  border: 1px solid #cacaca;
  color: #1f3443;
  box-shadow: 0px 2px 1px 0px #cacaca;
  border-radius: 16px; }
  .form-group input.form-control:focus,
  .form-group select.form-control:focus {
    border: 1px solid #73ddff;
    box-shadow: 0px 2px 1px 0px #cbf3ff; }
  .form-group input.form-control.text-blue,
  .form-group select.form-control.text-blue {
    color: #1e55bb; }
  .form-group input.form-control.rounded-lg,
  .form-group select.form-control.rounded-lg {
    border-radius: 8px; }

.form-group input.form-control-no-shadow,
.form-group select.form-control-no-shadow {
  border: 1px solid #d8d8d8;
  color: #656565;
  border-radius: 8px; }
  .form-group input.form-control-no-shadow.rounded-2xl,
  .form-group select.form-control-no-shadow.rounded-2xl {
    border-radius: 16px; }

.form-group label {
  display: block; }

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button,
input[type="number"] {
  -webkit-appearance: none;
  margin: 0;
  -moz-appearance: textfield !important; }

.paginate ul li a {
  display: flex;
  width: 50px;
  height: 50px;
  margin-left: 5px;
  margin-right: 5px;
  justify-content: center;
  align-items: center;
  border-radius: 100%; }

.paginate ul li:hover a {
  background-color: #d1e4ff; }

.paginate ul li.active a {
  color: #0a49eb;
  background-color: #d1e4ff;
  border-radius: 100%; }

.paginate .cursor-paginate {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 100%; }
  .paginate .cursor-paginate:hover {
    background-color: #d1e4ff; }

.badge-capsule {
  padding: 4px 12px;
  border-radius: 16px; }
  .badge-capsule.blue {
    color: #025590;
    background-color: #ddf1ff; }
    .badge-capsule.blue .dot {
      display: inline-block;
      border-radius: 50%;
      width: 8px;
      height: 8px;
      background-color: #00aa63; }
  .badge-capsule.red {
    color: #fff;
    background-color: #f9ad95; }
    .badge-capsule.red .dot {
      display: inline-block;
      border-radius: 50%;
      width: 8px;
      height: 8px;
      background-color: #e9441a; }
  .badge-capsule.gray {
    color: #fff;
    background-color: #dfdfdf; }
  .badge-capsule.green {
    color: #00aa63;
    background-color: #d9ffef; }
    .badge-capsule.green .dot {
      display: inline-block;
      border-radius: 50%;
      width: 8px;
      height: 8px;
      background-color: #00aa63; }

.dot {
  display: inline-block;
  border-radius: 50%;
  width: 8px;
  height: 8px; }
  .dot.green {
    background-color: #00aa63; }

button#backToTopBtn,
button#backToTopWindowBtn {
  transition: background-color 0.2s, opacity 0.3s, visibility 0.3s;
  opacity: 0;
  visibility: hidden; }
  button#backToTopBtn.show,
  button#backToTopWindowBtn.show {
    opacity: 1;
    visibility: visible; }
  button#backToTopBtn:hover,
  button#backToTopWindowBtn:hover {
    background-color: #008cff; }

#content {
  scrollbar-gutter: stable; }

.scrollbar-stable {
  scrollbar-gutter: stable; }

.scrollbar-stable-both {
  scrollbar-gutter: stable both-edges; }

.scrollbar-none {
  scrollbar-gutter: none; }

#bg-login {
  background: white;
  width: 100vw;
  height: 100vh;
  background-size: cover;
  background-repeat: no-repeat; }

.container-xl {
  width: 1280px;
  margin: 0 auto; }

.bg-header {
  background-color: #38c3ff;
  position: fixed !important;
  width: 100%;
  z-index: 40; }

.text-blue-main {
  color: #1e55bb; }

.rounded-4xl {
  border-radius: 1.875rem; }

#menu {
  background-color: #38c3ff; }
  #menu .menu-item {
    padding: 1.15rem 1.5rem; }
    #menu .menu-item img {
      display: inline-block;
      width: 2rem;
      margin-left: 0.125rem;
      margin-right: 1rem; }
    #menu .menu-item span {
      display: inline-block;
      line-height: 2rem;
      color: #fff; }

.logo {
  height: 57px;
  width: auto; }

img.icon-bell {
  width: 30px;
  height: 30px; }

.group-setting a,
.group-setting button {
  font-weight: 500;
  text-align: center; }
  .group-setting a.setting-options,
  .group-setting button.setting-options {
    padding: 16px 32px; }
  .group-setting a.setting-options:hover,
  .group-setting button.setting-options:hover {
    background-color: #e7e7e7; }

.notify {
  width: 400px;
  padding: 15px 8px 15px 15px; }
  .notify .empty-notify {
    font-style: italic; }
  .notify .notify-content {
    max-height: 385px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 8px; }
  .notify .btn-all,
  .notify .btn-unread {
    background-color: #fff;
    border: 1px solid #377dff;
    color: #377dff;
    border-radius: 1.25rem;
    padding-top: 0.4rem;
    padding-bottom: 0.4rem; }
    .notify .btn-all.active,
    .notify .btn-unread.active {
      color: #fff;
      background-color: #377dff; }
    .notify .btn-all:hover,
    .notify .btn-unread:hover {
      color: #fff;
      background-color: #377dff; }
  .notify .group-notify .heading {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1.25rem; }
    .notify .group-notify .heading__title {
      color: #adb5bd;
      font-size: 1.125rem;
      line-height: 1.75rem;
      font-weight: 700; }
  .notify .group-notify .list-alert__item {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 0.25rem;
    padding: 7px 7px; }
    .notify .group-notify .list-alert__item:hover {
      cursor: pointer;
      background-color: #efefef;
      border-radius: 15px; }
    .notify .group-notify .list-alert__item .avatar {
      position: relative;
      display: block;
      width: 65px;
      min-width: 65px; }
      .notify .group-notify .list-alert__item .avatar img.main {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        border: 0.15px solid #f7f7f7;
        object-fit: cover; }
      .notify .group-notify .list-alert__item .avatar img.sub-avatar {
        position: absolute;
        border-radius: 100%;
        right: 0px;
        width: 25px;
        height: 25px;
        margin-top: -23px; }
    .notify .group-notify .list-alert__item .description {
      font-size: 0.875rem;
      line-height: 1.25rem;
      position: relative; }
    .notify .group-notify .list-alert__item .dot-alert {
      align-self: center; }
      .notify .group-notify .list-alert__item .dot-alert .dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: #377dff; }

button:hover .home-icon {
  box-shadow: 0px 5px 0px 0px #d3d3d3; }

#wp-body .title {
  height: 54px;
  line-height: 54px;
  font-weight: 500;
  font-size: 16px;
  color: #879aa9; }

#wp-body .border-right {
  border-right: 1px solid #e6e6e6; }

#wp-body .avatar {
  position: relative;
  display: block; }
  #wp-body .avatar img.main {
    border-radius: 100%;
    width: 115px;
    height: 115px;
    border: 1px solid #c2c2c2;
    object-fit: cover; }
  #wp-body .avatar img.upload {
    position: absolute;
    border-radius: 100%;
    width: 40px;
    height: 40px;
    margin-top: -40px;
    right: 2px;
    box-shadow: inset -1px -3px 3px 0px rgba(0, 0, 0, 0.25);
    cursor: pointer; }

#wp-body .name {
  font-weight: 600;
  font-size: 22px;
  line-height: 26px;
  color: #051d5c; }

#wp-body .class {
  font-weight: 600;
  line-height: 26px;
  color: #9ba1ae; }

#wp-body #sidebar-teacher .tab-title {
  position: relative;
  display: flex;
  align-items: center;
  background: #ffffff;
  line-height: 45px;
  cursor: pointer; }
  #wp-body #sidebar-teacher .tab-title img {
    height: 28px; }
  #wp-body #sidebar-teacher .tab-title div {
    margin-left: 10px; }
  #wp-body #sidebar-teacher .tab-title:hover {
    background: #d7f3ff; }
  #wp-body #sidebar-teacher .tab-title:not(:last-child) {
    margin-bottom: 15px; }
  #wp-body #sidebar-teacher .tab-title.active {
    background: #d7f3ff; }
  #wp-body #sidebar-teacher .tab-title.empty {
    background-color: #f1f1f1; }
    #wp-body #sidebar-teacher .tab-title.empty img {
      filter: grayscale(100); }

#wp-body #sidebar-school .tab-title {
  position: relative;
  display: flex;
  align-items: center;
  background: #ffffff;
  line-height: 45px;
  cursor: pointer; }
  #wp-body #sidebar-school .tab-title img {
    height: 28px; }
  #wp-body #sidebar-school .tab-title div {
    margin-left: 10px; }
  #wp-body #sidebar-school .tab-title:hover {
    background: #f5f5f5; }
  #wp-body #sidebar-school .tab-title:not(:last-child) {
    margin-bottom: 15px; }
  #wp-body #sidebar-school .tab-title.active {
    background: #eeeeee; }

#main-menu ul li a.active {
  border-color: #38c1fc; }

#main-menu ul#add-student-menu li a {
  font-size: 18px;
  font-weight: bold;
  color: #9b9b9b; }
  #main-menu ul#add-student-menu li a.active, #main-menu ul#add-student-menu li a:hover {
    color: #1cb0f6;
    border-color: #38c1fc; }

#btn-chart.active {
  background-color: #e2e2e2; }

#btn-switch.btn-switch-chart {
  background-color: #fff;
  border: 1px solid #cacaca;
  box-shadow: 0 3px 2px 1px #d6d7dc; }
  #btn-switch.btn-switch-chart .btn-switch-chart-icon .path-1 {
    fill: #ff5a5a; }
  #btn-switch.btn-switch-chart .btn-switch-chart-icon .path-2 {
    fill: #5ad92f; }
  #btn-switch.btn-switch-chart .btn-switch-chart-icon .path-3 {
    fill: #ffc046; }
  #btn-switch.btn-switch-chart.chart {
    background-color: #38c3ff;
    border: 1px solid #32ace0;
    box-shadow: 0 3px 2px 1px #34a7e9;
    color: white; }
    #btn-switch.btn-switch-chart.chart .btn-switch-chart-icon path {
      fill: #fff; }

table#pcnl-table {
  border-collapse: collapse; }
  table#pcnl-table td {
    border: 1px solid #333; }
    table#pcnl-table td.green {
      background-color: #c2ffad; }
    table#pcnl-table td.red {
      background-color: #ffc2c2; }
    table#pcnl-table td.yellow {
      background-color: #ffcf83; }
    table#pcnl-table td.gray {
      background-color: #efefef; }

ul#choose-student-list li svg path {
  fill: #b6b6b6; }

ul#choose-student-list li.active svg path {
  fill: #2bc81d; }

#result-search .result-search-node:hover {
  cursor: pointer;
  background-color: #eeeeee; }

#result-search .result-search-node.uncheck .result-search-check {
  border: 1px solid #c0c0c0;
  border-radius: 100%; }
  #result-search .result-search-node.uncheck .result-search-check svg {
    display: none; }

#result-search .result-search-node.check .result-search-check {
  border: none; }
  #result-search .result-search-node.check .result-search-check svg {
    display: inline-block; }

#result-search .result-search-node.has {
  cursor: default;
  background-color: white; }
  #result-search .result-search-node.has .result-search-check {
    border: none; }
    #result-search .result-search-node.has .result-search-check svg {
      display: inline-block; }
      #result-search .result-search-node.has .result-search-check svg path {
        fill: #a3d1e6; }

#achievements-box {
  scrollbar-gutter: stable; }

#questions-wrapper .item-question {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #18acff;
  box-shadow: 0px 2px 0px 3px #aae0ff;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer; }
  #questions-wrapper .item-question:hover {
    color: #fff;
    background-color: #74c5ff;
    box-shadow: 0px 2px 0px 3px #18acff; }

#questions-wrapper .item-question-active {
  color: #fff;
  background-color: #74c5ff;
  box-shadow: 0px 2px 0px 3px #18acff; }

.list-img-question {
  height: 700px;
  overflow: hidden;
  overflow-y: scroll; }

#questions-wrapper-wk-results::-webkit-scrollbar {
  display: none; }

#questions-wrapper-wk-results .item-question-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #18acff;
  box-shadow: 0px 2px 0px 3px #aae0ff;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer; }
  #questions-wrapper-wk-results .item-question-btn:hover {
    color: #fff;
    background-color: #74c5ff;
    box-shadow: 0px 2px 0px 3px #18acff; }

#questions-wrapper-wk-results .item-question-active .item-question-btn {
  color: #fff;
  background-color: #74c5ff;
  box-shadow: 0px 2px 0px 3px #18acff; }

ul.list-question li {
  font-weight: 500;
  font-size: 26px;
  color: white;
  background-color: #56d6ff;
  border-radius: 100%;
  box-shadow: 0px 2px 0px 3px #1ec0f4;
  margin-bottom: 20px; }
  ul.list-question li div {
    width: 52px;
    height: 52px; }
  ul.list-question li.active, ul.list-question li:hover {
    background-color: #377dff;
    box-shadow: 0px 2px 0px 3px #125ae1; }

/* danh sách câu hỏi - chi tiết học sinh */
ul.list-question-student li {
  font-weight: 500;
  font-size: 26px;
  border-radius: 100%;
  margin-bottom: 26px;
  margin-right: 20px;
  margin-left: 20px; }
  ul.list-question-student li div {
    width: 62px;
    height: 62px; }
  ul.list-question-student li.do-not {
    color: #9e9e9e;
    background-color: #f1f1f1;
    box-shadow: 0px 2px 0px 3px #cecece; }
  ul.list-question-student li.wrong {
    color: #ff958e;
    background-color: #ffede8;
    box-shadow: 0px 2px 0px 3px #ff958e; }
  ul.list-question-student li.active, ul.list-question-student li:hover {
    background-color: #00c542;
    box-shadow: 0px 2px 0px 3px #00a537;
    color: white; }

ul.list-question-teacher li {
  border-radius: 100%;
  font-weight: 500;
  font-size: 30px;
  color: #18acff;
  background-color: #fff;
  box-shadow: 0px 2px 0px 3px #aae0ff; }
  ul.list-question-teacher li.active {
    color: #fff;
    background-color: #74c5ff;
    box-shadow: 0px 2px 0px 3px #18acff; }
  ul.list-question-teacher li div {
    width: 62px;
    height: 62px; }

#group-type ul li.check.active {
  border-bottom: 2px solid #4bae4f; }

#group-type ul li.check:hover {
  border-bottom: 2px solid #4bae4f; }

#group-type ul li.cancel.active {
  border-bottom: 2px solid #e24c4b; }

#group-type ul li.cancel:hover {
  border-bottom: 2px solid #e24c4b; }

#group-type ul li.not-enter.active {
  border-bottom: 2px solid #808080; }

#group-type ul li.not-enter:hover {
  border-bottom: 2px solid #808080; }

#body-content.fix-height {
  height: calc(100vh - 80px - 96px);
  overflow-y: auto; }

#body-content.bg-body {
  height: calc(100vh - 80px - 96px);
  background-image: url("/img/images/bg-content.png");
  background-repeat: no-repeat;
  background-size: 100vw;
  background-position-y: bottom; }

#body-content .bg-fixed {
  position: fixed;
  z-index: -1;
  top: 176px;
  left: 0;
  height: calc(100vh - 80px - 96px);
  width: 100vw;
  background-image: url("/img/images/bg-content.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 10%; }

.title-synthetic {
  font-family: "SVNVolteRounded";
  font-size: 32px;
  color: white;
  font-weight: bold; }

.title-synthetic-outline {
  font-family: "SVNVolteRounded";
  font-size: 32px;
  color: white;
  -webkit-text-stroke: 5px #007cc1;
  font-weight: bold; }

div#wp-proof-tbl {
  background: none; }
  div#wp-proof-tbl.no-dropdown {
    height: 630px;
    overflow: auto; }
  div#wp-proof-tbl #proof-tbl thead td:first-child,
  div#wp-proof-tbl #proof-tbl thead th:first-child {
    border-left-width: 0px; }
  div#wp-proof-tbl #proof-tbl thead td:last-child,
  div#wp-proof-tbl #proof-tbl thead th:last-child {
    border-right-width: 0px; }
  div#wp-proof-tbl #proof-tbl tbody td,
  div#wp-proof-tbl #proof-tbl tbody th {
    border: 1px solid black; }
  div#wp-proof-tbl #proof-tbl tbody td.square {
    background-color: #d2d2d2; }
    div#wp-proof-tbl #proof-tbl tbody td.square.active a {
      cursor: pointer; }
  div#wp-proof-tbl #proof-tbl tbody td.active {
    background-color: #77ff00; }
  div#wp-proof-tbl #proof-tbl tbody td.pass.active {
    background-color: #ffc900; }
  div#wp-proof-tbl #proof-tbl tbody td.need-trying.active {
    background-color: #ff7a7a; }
  div#wp-proof-tbl #proof-tbl tbody td:first-child {
    border-left-width: 0px; }
  div#wp-proof-tbl #proof-tbl tbody td:last-child {
    border-right-width: 0px; }

#ulStudentList li a div.student-name {
  color: black; }

#ulStudentList li a:hover {
  background-color: #ebf9ff; }
  #ulStudentList li a:hover div.student-name {
    color: #009adc; }

#chooseClassList .node-class.active {
  background-color: #c6f5fc; }

#chooseClassList .node-class:hover {
  cursor: pointer;
  background-color: #c6f5fc;
  color: white; }

.rotate-300 {
  transform: rotate(315deg); }

#listStudentsTable table {
  border-collapse: separate;
  border-spacing: 0.5px; }
  #listStudentsTable table tbody tr.select {
    background-color: #ddf5ff; }
  #listStudentsTable table tbody tr td {
    border-top: 1px solid #d1d1d1;
    border-bottom: 1px solid #d1d1d1; }
  #listStudentsTable table tbody tr td:first-child {
    border-left: 1px solid #d1d1d1; }
  #listStudentsTable table tbody tr td:last-child {
    border-right: 1px solid #d1d1d1; }
  #listStudentsTable table tbody tr:hover {
    background-color: #ddf5ff; }
    #listStudentsTable table tbody tr:hover td {
      border-top: 1px solid #38c3ff;
      border-bottom: 1px solid #38c3ff; }
    #listStudentsTable table tbody tr:hover td:first-child {
      border-left: 1px solid #38c3ff; }
    #listStudentsTable table tbody tr:hover td:last-child {
      border-right: 1px solid #38c3ff; }

.bg-select-school {
  background-color: #dbeafe; }

.screen_shot img {
  width: 260px; }

.td_name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 250px; }

.sidebar-student-list .node {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  column-gap: 12px;
  border: 1px solid #c5c8ce;
  border-radius: 8px; }
  .sidebar-student-list .node:hover {
    border: 1px solid #37d8ff;
    background-color: #f0fcff; }
  .sidebar-student-list .node.active {
    border: 1px solid #37d8ff;
    background-color: #d1f6ff; }

@media screen and (max-width: 768px) {
  #wp-body {
    width: 100% !important; }
  #wp-body .tab-title {
    position: relative;
    width: 200px; }
  .form-teacher {
    width: 315px; } }

#left-tbl-wp::-webkit-scrollbar {
  display: none; }

.select-week.active {
  background-color: #e9f8ff; }

.list-inside {
  list-style: inside; }

#choose-question-bar .change-question-arrow {
  background: #ffa944;
  border-radius: 14px;
  cursor: pointer; }
  #choose-question-bar .change-question-arrow.not-allow {
    cursor: not-allowed;
    background: #cbcbcb; }
    #choose-question-bar .change-question-arrow.not-allow:hover {
      background: #cbcbcb; }
  #choose-question-bar .change-question-arrow:hover {
    background: #e0943c; }

#pcnl-list::-webkit-scrollbar {
  display: none; }

#dropdownSelectWeek {
  scrollbar-gutter: stable both-edges; }

.stepper-group .step .step-circle {
  background-color: white;
  border: 2.5px solid #d9d9d9;
  color: #d9d9d9; }
  .stepper-group .step .step-circle .check-step-icon {
    display: none; }

.stepper-group .step.pending .step-circle {
  background-color: #38c3ff;
  border: 2.5px solid #38c3ff;
  color: white; }

.stepper-group .step.done .step-circle {
  background-color: #41f2b2;
  border: 2.5px solid #41f2b2;
  color: white; }
  .stepper-group .step.done .step-circle .step-number {
    display: none; }
  .stepper-group .step.done .step-circle .check-step-icon {
    display: block; }

@media screen and (max-width: 1280px) {
  .title-synthetic {
    font-size: 28px; }
  .title-synthetic-outline {
    font-size: 28px; } }