.teacher-page .popup-error, .teacher-page .popup-success {
  text-align: center; }
  .teacher-page .popup-error .button-action, .teacher-page .popup-success .button-action {
    justify-content: center; }

.teacher-page .list-license {
  width: 390px; }
  .teacher-page .list-license label {
    color: #FFFFFF;
    font-weight: 600; }
  .teacher-page .list-license .list-item {
    margin-top: 16px; }
    .teacher-page .list-license .list-item .button-action span {
      font-size: 36px;
      font-family: -webkit-pictograph; }
    .teacher-page .list-license .list-item .item-license {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      padding: 15px 10px;
      background-color: #FEFEFE;
      border-radius: 10px;
      margin-bottom: 20px; }
      .teacher-page .list-license .list-item .item-license .lazy {
        width: 66px;
        height: 50px;
        object-fit: none; }
      .teacher-page .list-license .list-item .item-license .title-license {
        margin-left: 10px;
        width: calc(100% - 85px); }
        .teacher-page .list-license .list-item .item-license .title-license h4 {
          margin-top: 0;
          margin-bottom: 5px;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          overflow: hidden;
          -webkit-box-orient: vertical; }
        .teacher-page .list-license .list-item .item-license .title-license label {
          font-size: 16px;
          color: #000000;
          font-weight: normal; }
        .teacher-page .list-license .list-item .item-license .title-license span {
          font-size: 16px; }

.teacher-page .popup-add-license .header {
  margin-bottom: 30px;
  text-align: center; }
  .teacher-page .popup-add-license .header h3 {
    margin: 0;
    color: #01283A;
    font-weight: bold;
    font-size: 32px; }

.teacher-page .popup-add-license .input-license input {
  background-color: #EEEEEE;
  border: none;
  border-radius: 25px;
  height: 50px;
  width: 100%;
  color: #000000;
  padding-left: 20px; }
  .teacher-page .popup-add-license .input-license input::placeholder {
    color: #000000; }

.teacher-page .popup-add-license .button-action {
  margin-top: 20px; }
  .teacher-page .popup-add-license .button-action .btn {
    width: 50%; }
  .teacher-page .popup-add-license .button-action .btn-dark {
    margin-left: 0; }

.teacher-page .add-license {
  margin-top: 20%;
  text-align: center; }
  .teacher-page .add-license label {
    color: #FFFFFF;
    font-style: italic;
    width: 100%; }
  .teacher-page .add-license .button-action {
    justify-content: center;
    margin-top: 6px; }
    .teacher-page .add-license .button-action span {
      font-size: 36px;
      font-family: -webkit-pictograph; }

.teacher-page .list-people.add-class .list-item {
  max-height: 576px; }

.teacher-page .title-class {
  color: #ffffff;
  font-size: 18px;
  font-weight: bold;
  margin-top: 35px; }

.teacher-page .filter-class {
  font-size: 18px;
  color: #ffffff;
  width: 450px; }
  .teacher-page .filter-class label {
    font-weight: 600; }
  .teacher-page .filter-class .input-add-class {
    margin-top: 15px;
    box-sizing: border-box;
    position: relative; }
    .teacher-page .filter-class .input-add-class .lazy {
      display: inline-block;
      position: absolute;
      left: 15px;
      top: 15px; }
    .teacher-page .filter-class .input-add-class input {
      color: #ffffff;
      width: 100%;
      height: 50px;
      border-radius: 10px;
      border: none;
      background-color: rgba(255, 255, 255, 0.25);
      padding-left: 40px; }

.teacher-page .top-content {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between; }
  .teacher-page .top-content .title {
    font-size: 18px; }
  .teacher-page .top-content .top-left {
    display: flex;
    align-items: center; }
    .teacher-page .top-content .top-left .add-new-attendance {
      padding: 0 30px;
      margin: 0 0 0 10px;
      width: auto;
      background-color: #F08B01;
      height: 38px;
      color: #fff; }
      .teacher-page .top-content .top-left .add-new-attendance:hover {
        background-color: #F08B70; }
  .teacher-page .top-content .attendance {
    background-color: #F08B01;
    border-radius: 19px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding: 5px 25px 0;
    cursor: pointer; }
    .teacher-page .top-content .attendance:hover {
      background-color: #F08B70; }
    .teacher-page .top-content .attendance label {
      margin-left: 10px;
      color: #ffffff;
      font-size: 18px;
      cursor: pointer; }

.teacher-page .date-attendance {
  margin: 20px 0; }
  .teacher-page .date-attendance .owl-carousel .owl-item * {
    cursor: pointer; }
  .teacher-page .date-attendance .owl-stage-outer {
    overflow: hidden; }
    .teacher-page .date-attendance .owl-stage-outer .owl-stage {
      display: flex; }
  .teacher-page .date-attendance .owl-item.active.target .date {
    opacity: 1; }
  .teacher-page .date-attendance .date {
    text-align: center;
    padding: 40px;
    color: #ffffff;
    background-color: #235C84;
    opacity: 0.5;
    border-radius: 20px;
    display: block; }
    .teacher-page .date-attendance .date .newdate {
      font-size: 18px; }
    .teacher-page .date-attendance .date .house {
      font-size: 80px; }
  .teacher-page .date-attendance .owl-nav.disabled {
    display: none; }
  .teacher-page .date-attendance .owl-dots {
    display: none; }

.teacher-page #popup-attendance {
  overflow: hidden; }
  .teacher-page #popup-attendance .iziModal-content {
    max-height: 530px;
    overflow: hidden; }
    .teacher-page #popup-attendance .iziModal-content .title {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 35px; }
      .teacher-page #popup-attendance .iziModal-content .title label {
        color: #01283A;
        font-size: 32px; }
    .teacher-page #popup-attendance .iziModal-content .list-date {
      max-height: 440px;
      overflow: auto;
      padding-top: 5px; }
      .teacher-page #popup-attendance .iziModal-content .list-date::-webkit-scrollbar {
        width: 7px; }
      .teacher-page #popup-attendance .iziModal-content .list-date::-webkit-scrollbar-track {
        border-radius: 10px;
        background-color: #BCC4C7; }
      .teacher-page #popup-attendance .iziModal-content .list-date::-webkit-scrollbar-thumb {
        background: #F08B01;
        border-radius: 10px; }
    .teacher-page #popup-attendance .iziModal-content .date {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      margin-bottom: 20px; }
      .teacher-page #popup-attendance .iziModal-content .date .s-info-student .custom-checkbox {
        margin-right: 20px;
        margin-bottom: 0px; }
        .teacher-page #popup-attendance .iziModal-content .date .s-info-student .custom-checkbox .checkbox-checkmark {
          border: none; }
      .teacher-page #popup-attendance .iziModal-content .date .house {
        color: #1E1E1E;
        font-size: 24px;
        font-weight: bold; }
      .teacher-page #popup-attendance .iziModal-content .date .full-date {
        font-size: 24px;
        color: #1E1E1E; }

.iziModal {
  	width: 68%;
	max-width: 760px;
	padding: 30px;
	background-color: #FFFFFF;
	border-radius: 30px !important;
	box-sizing: unset;
	border: none !important;
	overflow-x: auto;
}
  .iziModal .iziModal-header {
    display: none; }
  .iziModal .iziModal-content .name {
    text-align: center;
    margin-bottom: 30px;
    color: #01283A;
    font-size: 32px;
    font-weight: bold; }
  .iziModal .iziModal-content .mess textarea {
    background-color: #EEEEEE;
    border-radius: 25px;
    border: none;
    width: 440px;
    min-height: 198px;
    padding: 20px;
    font-size: 18px;
    font-family: 'Myriad Regular'; }
    .iziModal .iziModal-content .mess textarea::placeholder {
      padding: 0;
      font-style: italic; }
    .iziModal .iziModal-content .mess textarea:focus {
      outline: unset; }
  .iziModal .iziModal-content .button {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 10px; }
    .iziModal .iziModal-content .button .turn-back {
      width: calc(50% - 5px);
      text-align: center;
      padding: 16px 0;
      border-radius: 25px;
      background-color: #01283A;
      color: #FFFFFF;
      font-size: 18px; }
    .iziModal .iziModal-content .button .submit {
      width: calc(50% - 5px);
      padding: 16px 0;
      text-align: center;
      color: #FFFFFF;
      background-color: #F08B01;
      border-radius: 25px; }

.list-people.active {
  display: block !important; }

.list-people {
  display: none; }

.list-type-2 {
  width: 450px;
  margin-top: 15px;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 10px;
  padding: 21px;
  box-sizing: border-box; }
  .list-type-2 .list-item {
    max-height: 343px;
    overflow-y: auto; }
    .list-type-2 .list-item::-webkit-scrollbar {
      width: 7px; }
    .list-type-2 .list-item::-webkit-scrollbar-track {
      border-radius: 10px;
      background-color: #BCC4C7; }
    .list-type-2 .list-item::-webkit-scrollbar-thumb {
      background: #F08B01;
      border-radius: 10px; }
  .list-type-2 .item-class {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    position: relative; }
    .list-type-2 .item-class .avatar .lazy {
      display: inline-block;
      border-radius: 50%;
      border: 2px solid #F08B01;
      height: 59px;
      max-width: 59px;
      box-sizing: border-box; }
    .list-type-2 .item-class label {
      margin-left: 15px;
      width: calc(100% - 100px);
      overflow: hidden;
      text-overflow: ellipsis; }
    .list-type-2 .item-class .delete {
      position: absolute;
      right: 18px;
      cursor: pointer; }
  .list-type-2 .add {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    background-color: #FFFFFF;
    justify-content: center;
    align-items: center;
    opacity: 1;
    padding: 7px 0;
    border-radius: 10px;
    cursor: pointer; }

.teacher-attendance-page .col-main .main-head {
  margin-bottom: 10px; }

.teacher-attendance-box .c-title {
  font-family: 'Myriad Regular'; }

.teacher-attendance-box .s-info {
  max-width: 350px;
  width: 100%; }
  .teacher-attendance-box .s-info .s-info-content {
    border-radius: 10px;
    background: #fff; }
    .teacher-attendance-box .s-info .s-info-content .info-content {
      padding: 20px; }
      .teacher-attendance-box .s-info .s-info-content .info-content .text {
        margin: 0;
        font-size: 24px; }
      .teacher-attendance-box .s-info .s-info-content .info-content .date-time img {
        margin-right: 10px; }
    .teacher-attendance-box .s-info .s-info-content .image {
      background: url("../img/teacher/teacher-attendance/background.png") no-repeat center;
      height: 150px;
      background-size: 100%; }
    .teacher-attendance-box .s-info .s-info-content .btn-attendance-edit {
      cursor: pointer; }
      .teacher-attendance-box .s-info .s-info-content .btn-attendance-edit.active svg {
        fill: #007BA4; }

.teacher-attendance-box .s-list-student {
  width: calc(100% - 380px); }
  .teacher-attendance-box .s-list-student .c-title {
    float: left; }
  .teacher-attendance-box .s-list-student .select .styledSelect {
    position: relative;
    z-index: 1;
    cursor: pointer;
    border: solid 3px;
    padding: 0 15px;
    border-radius: 30px;
    font-size: 13px;
    min-height: 28px;
    display: flex;
    align-items: center; }
    .teacher-attendance-box .s-list-student .select .styledSelect:after {
      width: 15px;
      height: 15px;
      border: solid 2px #6E6161;
      display: block;
      border-radius: 50%;
      content: "\f078";
      font: normal normal normal 14px/1 FontAwesome;
      color: #6E6161;
      position: absolute;
      right: -27px;
      top: 0;
      text-align: center; }
    .teacher-attendance-box .s-list-student .select .styledSelect.active:after {
      transform: rotate(180deg); }
  .teacher-attendance-box .s-list-student .select ul.options {
    padding: 0;
    display: none;
    margin: 0;
    list-style: none;
    position: absolute;
    background: #fff;
    top: 10px;
    z-index: 2;
    border: solid 3px #727070;
    border-radius: 30px;
    font-size: 25px;
    min-width: 238px;
    right: 26px;
    cursor: pointer;
    text-align: center;
    color: #727070; }
    .teacher-attendance-box .s-list-student .select ul.options li {
      border-bottom: solid 1px #727070; }
      .teacher-attendance-box .s-list-student .select ul.options li:last-child {
        border: none; }
  .teacher-attendance-box .s-list-student .select.intime {
    color: #84C241; }
  .teacher-attendance-box .s-list-student .select.late {
    color: #FBB040; }
  .teacher-attendance-box .s-list-student .select.absence_allowed, .teacher-attendance-box .s-list-student .select.absence_not_allowed {
    color: #BE1E2D; }
  .teacher-attendance-box .s-list-student .check-option {
    float: right;
    margin-top: 1rem;
    width: 195px;
    padding: 0 25px 0 0;
    text-align: right; }
    .teacher-attendance-box .s-list-student .check-option span {
      color: #FFFFFF;
      font-size: 18px;
      font-family: 'Myriad Semibold';
      margin-right: 10px; }
    .teacher-attendance-box .s-list-student .check-option .checkbox-send-parents {
      position: relative;
      max-width: 30px;
      height: 30px;
      width: 100%;
      margin-right: 10px; }
      .teacher-attendance-box .s-list-student .check-option .checkbox-send-parents input[type="checkbox"] {
        width: 100%;
        height: 100%;
        margin: 0;
        opacity: 0;
        position: relative;
        z-index: 1;
        cursor: pointer; }
        .teacher-attendance-box .s-list-student .check-option .checkbox-send-parents input[type="checkbox"]:checked ~ span:after {
          content: "";
          width: 100%;
          height: 100%;
          display: block;
          position: absolute;
          top: -4px;
          left: 2px;
          background: url("../img/check-icon.png") no-repeat; }
      .teacher-attendance-box .s-list-student .check-option .checkbox-send-parents span {
        border: solid 3px #ED8A22;
        display: block;
        position: absolute;
        top: 0;
        border-radius: 50%;
        width: 100%;
        height: 100%; }
  .teacher-attendance-box .s-list-student .s-list-content {
    clear: both;
    height: 620px;
    padding-right: 20px; }
    .teacher-attendance-box .s-list-student .s-list-content .list-items {
      border-radius: 10px;
      background: #fff;
      margin-bottom: 20px;
      padding: 18px;
      position: relative; }
      .teacher-attendance-box .s-list-student .s-list-content .list-items .avatar {
        margin-right: 15px; }
        .teacher-attendance-box .s-list-student .s-list-content .list-items .avatar img {
          width: 70px;
          height: 70px;
          border: solid 5px #E9AF38;
          border-radius: 50%; }
      .teacher-attendance-box .s-list-student .s-list-content .list-items .name {
        font-size: 24px;
        margin: 0;
        max-width: 175px; }
      .teacher-attendance-box .s-list-student .s-list-content .list-items .s-info-student {
        width: calc(100% - 95px); }
        .teacher-attendance-box .s-list-student .s-list-content .list-items .s-info-student .btn-comment {
          min-width: 100px;
          justify-content: center;
          margin-right: 70px;
          margin-top: 15px; }
        .teacher-attendance-box .s-list-student .s-list-content .list-items .s-info-student .comment {
          font-style: italic;
          font-size: 18px;
          overflow: hidden;
          display: none; }
          .teacher-attendance-box .s-list-student .s-list-content .list-items .s-info-student .comment.active {
            display: block; }
          .teacher-attendance-box .s-list-student .s-list-content .list-items .s-info-student .comment b {
            font-family: 'Myriad Bold'; }
          .teacher-attendance-box .s-list-student .s-list-content .list-items .s-info-student .comment .text {
            display: inline; }
        .teacher-attendance-box .s-list-student .s-list-content .list-items .s-info-student .btn-comment .active-text, .teacher-attendance-box .s-list-student .s-list-content .list-items .s-info-student .btn-parents .active-text {
          display: none; }
        .teacher-attendance-box .s-list-student .s-list-content .list-items .s-info-student .btn-comment.active .text, .teacher-attendance-box .s-list-student .s-list-content .list-items .s-info-student .btn-parents.active .text {
          display: none; }
        .teacher-attendance-box .s-list-student .s-list-content .list-items .s-info-student .btn-comment.active .active-text, .teacher-attendance-box .s-list-student .s-list-content .list-items .s-info-student .btn-parents.active .active-text {
          display: block; }
  .teacher-attendance-box .s-list-student .form-action {
    margin-top: 40px; }
    .teacher-attendance-box .s-list-student .form-action .btn {
      max-width: 255px;
      margin: auto; }

.page-2-column .content.library {
  width: calc(60% - 30px);
  overflow-y: unset; }
  .page-2-column .content.library .list-content-unit {
    display: none;
    width: 100%; }
    .page-2-column .content.library .list-content-unit .item-unit {
      margin-bottom: 10px; }
  .page-2-column .content.library .list-content-unit.active {
    display: block; }
    .page-2-column .content.library .list-content-unit.active .item-unit-parent {
      list-style: none;
      padding: 0;
      margin: 0;
      background-color: rgba(0, 0, 0, 0.3);
      border-radius: 20px;
      overflow: hidden; }
      .page-2-column .content.library .list-content-unit.active .item-unit-parent .li-item-unit-parent {
        display: flex;
        flex-wrap: wrap; }
        .page-2-column .content.library .list-content-unit.active .item-unit-parent .li-item-unit-parent .a-item-unit-parent {
          color: #FFFFFF;
          padding: 23px 20px;
          background-color: #01283A;
          width: 100%;
          cursor: pointer;
          border-radius: 15px;
          position: relative; }
          .page-2-column .content.library .list-content-unit.active .item-unit-parent .li-item-unit-parent .a-item-unit-parent label {
            font-weight: bold;
            text-transform: uppercase; }
          .page-2-column .content.library .list-content-unit.active .item-unit-parent .li-item-unit-parent .a-item-unit-parent .button-parent.active span:before {
            transform: rotate(90deg); }
          .page-2-column .content.library .list-content-unit.active .item-unit-parent .li-item-unit-parent .a-item-unit-parent .button-parent.active span:after {
            transform: rotate(180deg); }
          .page-2-column .content.library .list-content-unit.active .item-unit-parent .li-item-unit-parent .a-item-unit-parent .button-parent {
            position: absolute;
            right: 15px;
            width: 37px;
            height: 37px;
            background-color: #FFFFFF;
            color: #01283A;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: center;
            font-weight: 600;
            font-size: 27px;
            top: 14px;
            border-radius: 50%; }
            .page-2-column .content.library .list-content-unit.active .item-unit-parent .li-item-unit-parent .a-item-unit-parent .button-parent span:before {
              top: 10px;
              left: 50%;
              width: 2px;
              height: 16px;
              margin-left: -1px;
              content: "";
              position: absolute;
              background-color: #01283A;
              transition: transform 0.25s ease-out; }
            .page-2-column .content.library .list-content-unit.active .item-unit-parent .li-item-unit-parent .a-item-unit-parent .button-parent span:after {
              top: 50%;
              left: 11px;
              width: 16px;
              height: 2px;
              margin-top: -2px;
              content: "";
              position: absolute;
              background-color: #01283A;
              transition: transform 0.25s ease-out; }
        .page-2-column .content.library .list-content-unit.active .item-unit-parent .li-item-unit-parent .item-unit-child {
          display: none; }
        .page-2-column .content.library .list-content-unit.active .item-unit-parent .li-item-unit-parent .item-unit-child.active {
          width: 100%;
          list-style: none;
          padding: 0;
          margin-top: -8px; }
          .page-2-column .content.library .list-content-unit.active .item-unit-parent .li-item-unit-parent .item-unit-child.active .li-item-unit-child {
            display: flex;
            flex-wrap: wrap; }
            .page-2-column .content.library .list-content-unit.active .item-unit-parent .li-item-unit-parent .item-unit-child.active .li-item-unit-child .a-item-unit-child {
              width: 100%;
              background-color: rgba(0, 0, 0, 0.2);
              padding-top: 20px;
              padding-bottom: 14px;
              cursor: pointer;
              display: flex;
              flex-wrap: wrap;
              align-items: center;
              justify-content: space-between; }
              .page-2-column .content.library .list-content-unit.active .item-unit-parent .li-item-unit-parent .item-unit-child.active .li-item-unit-child .a-item-unit-child:last-child {
                border-radius: 0 0 20px 20px; }
            .page-2-column .content.library .list-content-unit.active .item-unit-parent .li-item-unit-parent .item-unit-child.active .li-item-unit-child label {
              margin-left: 76px;
              font-size: 20px;
              color: #FFFFFF;
              width: calc(100% - 135px); }
            .page-2-column .content.library .list-content-unit.active .item-unit-parent .li-item-unit-parent .item-unit-child.active .li-item-unit-child .button-child.active span {
              transform: rotate(-135deg);
              -webkit-transform: rotate(-135deg); }
            .page-2-column .content.library .list-content-unit.active .item-unit-parent .li-item-unit-parent .item-unit-child.active .li-item-unit-child .button-child {
              width: 35px;
              height: 35px;
              border: solid 3px #fff;
              color: #ffffff;
              margin-right: 20px;
              border-radius: 50%;
              display: flex;
              flex-wrap: wrap;
              justify-content: center;
              align-items: center;
              font-size: 27px;
              font-weight: 600; }
              .page-2-column .content.library .list-content-unit.active .item-unit-parent .li-item-unit-parent .item-unit-child.active .li-item-unit-child .button-child span {
                display: flex;
                align-items: center;
                font-size: 18px; }
              .page-2-column .content.library .list-content-unit.active .item-unit-parent .li-item-unit-parent .item-unit-child.active .li-item-unit-child .button-child.active span {
                transform: rotate(180deg); }
          .page-2-column .content.library .list-content-unit.active .item-unit-parent .li-item-unit-parent .item-unit-child.active .item-unit-child-2 {
            display: none; }
          .page-2-column .content.library .list-content-unit.active .item-unit-parent .li-item-unit-parent .item-unit-child.active .item-unit-child-2.active {
            width: 100%;
            list-style: none;
            padding: 0; }
            .page-2-column .content.library .list-content-unit.active .item-unit-parent .li-item-unit-parent .item-unit-child.active .item-unit-child-2.active .li-item-unit-child-2 {
              display: flex;
              flex-wrap: wrap; }
              .page-2-column .content.library .list-content-unit.active .item-unit-parent .li-item-unit-parent .item-unit-child.active .item-unit-child-2.active .li-item-unit-child-2 .a-item-unit-child-2 {
                width: 100%;
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
                min-height: 60px;
                align-items: center; }
                .page-2-column .content.library .list-content-unit.active .item-unit-parent .li-item-unit-parent .item-unit-child.active .item-unit-child-2.active .li-item-unit-child-2 .a-item-unit-child-2 .list-library-title {
                  width: calc(100% - 50px);
                  float: left;
                  text-align: center;
                  padding: 10px 14px;
                  color: #fff; }
                .page-2-column .content.library .list-content-unit.active .item-unit-parent .li-item-unit-parent .item-unit-child.active .item-unit-child-2.active .li-item-unit-child-2 .a-item-unit-child-2 .checked_box-div {
                  float: left;
                  width: 50px; }
                .page-2-column .content.library .list-content-unit.active .item-unit-parent .li-item-unit-parent .item-unit-child.active .item-unit-child-2.active .li-item-unit-child-2 .a-item-unit-child-2 .container {
                  margin-left: 0;
                  text-align: center;
                  font-size: 20px;
                  color: #ffffff;
                  position: relative;
                  cursor: pointer;
                  -webkit-user-select: none;
                  -moz-user-select: none;
                  -ms-user-select: none;
                  user-select: none;
                  width: 50px;
                  text-transform: capitalize; }
                  .page-2-column .content.library .list-content-unit.active .item-unit-parent .li-item-unit-parent .item-unit-child.active .item-unit-child-2.active .li-item-unit-child-2 .a-item-unit-child-2 .container input {
                    opacity: 0; }
                  .page-2-column .content.library .list-content-unit.active .item-unit-parent .li-item-unit-parent .item-unit-child.active .item-unit-child-2.active .li-item-unit-child-2 .a-item-unit-child-2 .container input:checked ~ .checkmark:after {
                    display: block; }
                  .page-2-column .content.library .list-content-unit.active .item-unit-parent .li-item-unit-parent .item-unit-child.active .item-unit-child-2.active .li-item-unit-child-2 .a-item-unit-child-2 .container .checkmark {
                    top: 0;
                    bottom: 0;
                    margin: auto;
                    right: 30px;
                    height: 22px;
                    width: 22px;
                    border: 2px solid #fff;
                    left: unset; }
                    .page-2-column .content.library .list-content-unit.active .item-unit-parent .li-item-unit-parent .item-unit-child.active .item-unit-child-2.active .li-item-unit-child-2 .a-item-unit-child-2 .container .checkmark:after {
                      content: "";
                      position: absolute;
                      display: none;
                      top: 4px;
                      left: 4px;
                      width: 10px;
                      height: 10px;
                      border-radius: 50%;
                      background: #E8E803; }

.page-2-column .list-unit-library.active {
  width: 40%; }
  .page-2-column .list-unit-library.active .unit .unit-title {
    padding: 20px 0; }

.page-2-column .list-unit-library {
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 25px;
  padding: 20px;
  width: 100%; }
  .page-2-column .list-unit-library .unit {
    border-bottom: 1px solid #FFFFFF;
    display: flex;
    flex-wrap: wrap; }
    .page-2-column .list-unit-library .unit .unit-title {
      color: rgba(255, 255, 255, 0.4);
      text-transform: uppercase;
      width: calc(100% / 3);
      text-align: center;
      padding: 20px;
      font-family: 'Myriad Semibold'; }
    .page-2-column .list-unit-library .unit .unit-title.active {
      color: #FFFFFF;
      font-weight: 600;
      position: relative; }
      .page-2-column .list-unit-library .unit .unit-title.active:after {
        content: "";
        height: 5px;
        width: 100%;
        position: absolute;
        background-color: #F08B01;
        bottom: -3px;
        left: 0;
        border-radius: 37px; }
  .page-2-column .list-unit-library .list-unit .list-unit-content {
    display: none; }
  .page-2-column .list-unit-library .list-unit .list-unit-content.active {
    display: block;
    margin: 20px 0;
    max-height: calc(100vh - 390px);
    overflow-y: auto; }
    .page-2-column .list-unit-library .list-unit .list-unit-content.active::-webkit-scrollbar {
      display: none; }
    .page-2-column .list-unit-library .list-unit .list-unit-content.active .title-unit.active {
      background-color: #F08B01;
      border-radius: 30px 0 0 30px;
      padding: 6px 20px; }
    .page-2-column .list-unit-library .list-unit .list-unit-content.active .title-unit {
      padding: 20px;
      font-size: 18px;
      color: #FFFFFF;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 60px;
      cursor: pointer; }
      .page-2-column .list-unit-library .list-unit .list-unit-content.active .title-unit span {
        font-size: 40px;
        margin-left: 15px;
        font-weight: bold; }

.page-2-column .list_class_achievement {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%; }
  .page-2-column .list_class_achievement .class_achievement.saint-plow-hoe .avatar label {
    background-color: #1B75BB; }
  .page-2-column .list_class_achievement .class_achievement.saint-plow-hoe .text-armorial {
    color: #1B75BB; }
  .page-2-column .list_class_achievement .class_achievement.top-rank .avatar label {
    background-color: #4B7805; }
  .page-2-column .list_class_achievement .class_achievement.top-rank .text-armorial {
    color: #4B7805; }
  .page-2-column .list_class_achievement .class_achievement.sylph .avatar label {
    background-color: #095B4F; }
  .page-2-column .list_class_achievement .class_achievement.sylph .text-armorial {
    color: #095B4F; }
  .page-2-column .list_class_achievement .class_achievement.lazy-king .avatar label {
    background-color: #000000; }
  .page-2-column .list_class_achievement .class_achievement.lazy-king .text-armorial {
    color: #000000; }
  .page-2-column .list_class_achievement .class_achievement {
    width: calc(50% - 10px);
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 10px;
    display: flex;
    flex-wrap: wrap;
    max-height: 217px;
    position: relative;
    margin-bottom: 20px; }
    .page-2-column .list_class_achievement .class_achievement .class_achievement-content {
      max-width: 415px;
      width: 100%;
      display: flex;
      margin: auto; }
    .page-2-column .list_class_achievement .class_achievement .avatar {
      width: calc(50% - 17px);
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      position: relative;
      margin-top: 20px;
      margin-left: 17px; }
      .page-2-column .list_class_achievement .class_achievement .avatar .lazy {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        border: 5px solid #E9AF38; }
      .page-2-column .list_class_achievement .class_achievement .avatar label {
        position: absolute;
        top: 82px;
        background-color: #DC4630;
        text-align: center;
        color: #ffffff;
        padding: 5px 0;
        font-size: 24px;
        font-weight: 600;
        min-width: 192px;
        border-radius: 44px; }
    .page-2-column .list_class_achievement .class_achievement .armorial {
      width: 50%; }
    .page-2-column .list_class_achievement .class_achievement .text-armorial {
      color: #DC4630;
      background-color: #FFFFFF;
      border-radius: 0px 0px 10px 10px;
      padding: 10px 0px;
      text-align: center;
      font-weight: bold;
      position: absolute;
      bottom: 10px;
      left: 7px;
      width: calc(100% - 14px); }

.page-2-column .list-favourite.list-attendance .check-box {
  position: absolute;
  right: 6px; }

.page-2-column .list-favourite.list-attendance .item-favourite {
  display: flex;
  flex-wrap: wrap;
  padding: 15px 30px;
  position: relative; }
  .page-2-column .list-favourite.list-attendance .item-favourite .show-delete-option {
    position: absolute;
    right: 10px; }
  .page-2-column .list-favourite.list-attendance .item-favourite .avatar {
    width: 47px; }
  .page-2-column .list-favourite.list-attendance .item-favourite .favourite {
    margin-left: 25px;
    width: calc(100% - 75px); }
    .page-2-column .list-favourite.list-attendance .item-favourite .favourite h2 {
      font-size: 18px;
      cursor: pointer; }
    .page-2-column .list-favourite.list-attendance .item-favourite .favourite p {
      margin: 5px 0px 0px 0px; }
    .page-2-column .list-favourite.list-attendance .item-favourite .favourite .date {
      margin-top: 20px;
      margin-bottom: 0;
      font-size: 14px;
      font-weight: bold;
      color: #113254; }
      .page-2-column .list-favourite.list-attendance .item-favourite .favourite .date label {
        margin-left: 0; }

.page-2-column .confirm-link {
  width: 500px; }
  .page-2-column .confirm-link .confirm {
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 40px;
    padding: 40px 30px;
    margin-bottom: 20px; }
    .page-2-column .confirm-link .confirm label {
      color: rgba(255, 255, 255, 0.7);
      font-style: italic; }
    .page-2-column .confirm-link .confirm .input-confirm {
      margin-top: 20px;
      border-bottom: solid 1px #fff;
      position: relative; }
      .page-2-column .confirm-link .confirm .input-confirm input {
        background: transparent;
        outline: none;
        border: none;
        height: 30px;
        font-size: 18px;
        width: 100%;
        color: #fff;
        font-family: 'Myriad Regular';
        padding-left: 37px; }
      .page-2-column .confirm-link .confirm .input-confirm .look_icon {
        position: absolute;
        left: 0;
        bottom: 10px; }
  .page-2-column .confirm-link .button-action .btn {
    margin: 0;
    width: 225px; }

.page-2-column .checkbox-full-text .button-action .btn-orange {
  margin: 0;
  min-width: 225px; }

.page-2-column .checkbox-full-text .container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 20px;
  cursor: pointer;
  color: #ffffff;
  z-index: 1000; }
  .page-2-column .checkbox-full-text .container input {
    height: 80px; }
  .page-2-column .checkbox-full-text .container .checkmark {
    border: none;
    position: absolute;
    top: 0;
    left: 0;
    height: 50px;
    width: 360px;
    border-radius: 43px;
    padding: 20px 70px 13px;
    text-align: center;
    box-sizing: unset;
    background-color: rgba(0, 0, 0, 0.3); }
  .page-2-column .checkbox-full-text .container input {
    opacity: 0; }
  .page-2-column .checkbox-full-text .container input:checked ~ .checkmark {
    background-color: #FFFFFF;
    color: #01283A; }
  .page-2-column .checkbox-full-text .container input:checked ~ .checkmark:after {
    display: block; }

.page-2-column .reset-password {
  width: 390px; }
  .page-2-column .reset-password .form-action .btn-confirm {
    width: auto;
    display: block;
    margin: inherit;
    min-width: 225px; }
  .page-2-column .reset-password .password {
    position: relative;
    margin-bottom: 20px; }
    .page-2-column .reset-password .password .img {
      width: 40px;
      height: 40px;
      position: absolute;
      background-color: #FFFFFF;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      margin-top: 5px;
      margin-left: 5px; }
    .page-2-column .reset-password .password .input-form-password {
      width: 100%;
      height: 50px;
      background-color: #EEEEEE;
      border-radius: 25px;
      border: none;
      padding-left: 55px;
      color: #2D2D2D; }
      .page-2-column .reset-password .password .input-form-password::placeholder {
        color: #2D2D2D; }

.page-2-column .colums-left {
  margin-right: 30px; }

.page-2-column .list-notification {
  width: 410px;
  background-color: white;
  border-radius: 25px;
  padding: 20px 30px;
  height: min-content; }
  .page-2-column .list-notification .title {
    color: black;
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 22px;
    width: 100% !important; }
  .page-2-column .list-notification .item-notification {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    position: relative;
    margin-bottom: 20px; }
    .page-2-column .list-notification .item-notification .notification {
      margin-left: 10px;
      width: 65%; }
    .page-2-column .list-notification .item-notification .custom_switch_input {
      position: absolute;
      right: 0; }

.page-2-column .list-attendance {
  width: 454px;
  max-height: calc(100vh - 275px);
  overflow-y: auto;
  margin-top: 50px; }
  .page-2-column .list-attendance::-webkit-scrollbar {
    width: 7px; }
  .page-2-column .list-attendance::-webkit-scrollbar-track {
    border-radius: 10px;
    background-color: #BCC4C7; }
  .page-2-column .list-attendance::-webkit-scrollbar-thumb {
    background: #E8E803;
    border-radius: 10px; }
  .page-2-column .list-attendance .item-attendance {
    background-color: rgba(255, 255, 255, 0.95);
    border-radius: 10px;
    padding: 20px;
    margin-right: 20px;
    margin-bottom: 10px;
    color: #000000; }
    .page-2-column .list-attendance .item-attendance h2 {
      margin: 0;
      font-size: 24px;
      color: #000000;
      font-weight: 600; }
    .page-2-column .list-attendance .item-attendance .date {
      margin-top: 15px;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      margin-bottom: 10px; }
      .page-2-column .list-attendance .item-attendance .date label {
        margin-left: 10px; }
    .page-2-column .list-attendance .item-attendance .number-people {
      display: flex;
      flex-wrap: wrap;
      align-items: center; }
      .page-2-column .list-attendance .item-attendance .number-people label {
        margin-left: 10px; }

.page-2-column .list-not-graded {
  width: 400px;
  max-height: calc(100vh - 220px);
  overflow-y: auto; }
  .page-2-column .list-not-graded::-webkit-scrollbar {
    width: 7px; }
  .page-2-column .list-not-graded::-webkit-scrollbar-track {
    border-radius: 10px;
    background-color: #BCC4C7; }
  .page-2-column .list-not-graded::-webkit-scrollbar-thumb {
    background: #E8E803;
    border-radius: 10px; }
  .page-2-column .list-not-graded .title {
    font-size: 18px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px; }
    .page-2-column .list-not-graded .title .all {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      margin-right: 25px; }
      .page-2-column .list-not-graded .title .all .custom-checkbox {
        margin-bottom: 0;
        margin-left: 10px; }
  .page-2-column .list-not-graded .list-ex {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 15px;
    position: relative; }
    .page-2-column .list-not-graded .list-ex .stt {
      font-size: 20px;
      color: #FFFFFF;
      font-weight: bold;
      position: absolute; }
    .page-2-column .list-not-graded .list-ex .student {
      width: calc(100% - 70px);
      margin-left: 55px;
      display: flex;
      flex-wrap: wrap;
      background-color: rgba(255, 255, 255, 0.9);
      border-radius: 10px 10px 10px 10px;
      height: 75px;
      position: relative;
      align-items: center; }
      .page-2-column .list-not-graded .list-ex .student .image {
        margin-left: -30px;
        margin-top: 5px; }
        .page-2-column .list-not-graded .list-ex .student .image .lazy {
          display: inline-block;
          width: 62px;
          height: 62px;
          border-radius: 50%;
          border: 4px solid #E9AF38;
          box-shadow: 3px 3px 1px rgba(0, 0, 0, 0.3);
          -webkit-box-shadow: 3px 3px 1px rgba(0, 0, 0, 0.3);
          -moz-box-shadow: 3px 3px 1px rgba(0, 0, 0, 0.3); }
      .page-2-column .list-not-graded .list-ex .student .name {
        margin-left: 10px;
        width: calc(100% - 50px); }
        .page-2-column .list-not-graded .list-ex .student .name label {
          width: calc(100% - 50px);
          display: block;
          color: #000;
          cursor: pointer; }
        .page-2-column .list-not-graded .list-ex .student .name .wait-amica {
          position: absolute;
          top: 13px;
          right: 10px;
          font-size: 14px;
          padding: 2px 10px;
          background-color: #000000;
          color: #ffffff;
          border-radius: 5px;
          font-family: 'Myriad Bold'; }
        .page-2-column .list-not-graded .list-ex .student .name .date {
          display: flex;
          flex-wrap: wrap;
          align-items: center; }
          .page-2-column .list-not-graded .list-ex .student .name .date .lazy {
            width: 25px;
            margin-right: 10px; }
          .page-2-column .list-not-graded .list-ex .student .name .date span {
            font-size: 16px; }
        .page-2-column .list-not-graded .list-ex .student .name .check {
          position: absolute;
          top: 10px;
          right: 5px; }

.page-2-column .list-not-graded.teacher-grading-pending .student .name .check {
  bottom: -10px;
  top: auto; }

.page-2-column .list-not-graded.teacher-grading-pending .student .name .point {
  position: absolute;
  border-radius: 8px;
  background-color: #F08B01;
  padding: 4px 33px;
  top: -5px;
  right: 5px;
  font-size: 18px;
  color: #ffffff; }
  .page-2-column .list-not-graded.teacher-grading-pending .student .name .point span {
    font-size: 12px; }

.page-2-column .content.teacher_not_graded {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  max-width: 420px;
  width: 100%; }
  .page-2-column .content.teacher_not_graded .amica .button-action {
    margin-top: 20px; }
  .page-2-column .content.teacher_not_graded .amica.active {
    opacity: 0.5; }
    .page-2-column .content.teacher_not_graded .amica.active .button-action .btn {
      cursor: not-allowed;
      pointer-events: none; }

.page-2-column .content.all-score {
  margin-left: 80px;
  margin-top: 40px;
  padding-top: 0;
  width: 50%; }
  .page-2-column .content.all-score .total-score {
    background-color: rgba(0, 0, 0, 0.3);
    height: 100px;
    border-radius: 10px;
    margin-bottom: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    padding: 20px; }
    .page-2-column .content.all-score .total-score label {
      margin-bottom: 20px;
      color: #C5F4FF;
      font-size: 24px; }
    .page-2-column .content.all-score .total-score p {
      color: #C5F4FF;
      font-size: 72px;
      font-weight: bold;
      margin-top: 0;
      margin-bottom: 0; }

.teacher-add-page .col-main .main-head {
  margin-bottom: 40px; }

.teacher-add-page .slide-class-box {
  margin-bottom: 50px; }

.teacher-add-page .label-title {
  font-size: 18px;
  color: #fff;
  font-family: 'Myriad Semibold';
  margin-bottom: 15px; }

.teacher-add-page .owl-carousel .owl-item {
  opacity: 0.5;
  margin: 15px 0 0 0; }
  .teacher-add-page .owl-carousel .owl-item .slide-class .class-items .avatar {
    width: 128px;
    height: 128px; }
  @media (max-width: 1280px) {
    .teacher-add-page .owl-carousel .owl-item .slide-class .class-items .class-content .class-date {
      font-size: 14px; } }
  .teacher-add-page .owl-carousel .owl-item.target {
    margin: 8px 0 0 0;
    opacity: 1; }
    .teacher-add-page .owl-carousel .owl-item.target .slide-class .class-items .avatar {
      width: 145px;
      height: 145px; }

.teacher-add-page .button-action .img-icon svg {
  overflow: visible;
  width: 20px;
  margin-right: 10px; }

@media (max-width: 1280px) {
  .slide-class .class-items .class-content .class-date {
    font-size: 14px; } }

.page-2-column .content .content-right .reading-list-done {
  padding: 10px 20px;
  justify-content: space-between;
  margin-bottom: 15px;
  position: relative; }
  .page-2-column .content .content-right .reading-list-done .remind {
    position: absolute;
    right: -8px;
    top: -10px; }
  .page-2-column .content .content-right .reading-list-done .remind.not-remind {
    right: 7px;
    top: 5px;
    padding: 5px 15px;
    background-color: red;
    border-radius: 10px;
    font-weight: bold;
    color: #ffffff;
    cursor: pointer; }
    .page-2-column .content .content-right .reading-list-done .remind.not-remind label {
      font-size: 18px;
      cursor: pointer; }
  .page-2-column .content .content-right .reading-list-done .data-info {
    width: calc(100% - 95px);
    display: flex;
    flex-wrap: wrap;
    align-items: center; }
  .page-2-column .content .content-right .reading-list-done .avatar {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    border: solid 5px #E9AF38;
    overflow: hidden; }
  .page-2-column .content .content-right .reading-list-done p {
    margin: 0; }
  .page-2-column .content .content-right .reading-list-done .data-title {
    font-size: 24px;
    width: 100%;
    display: block; }
  .page-2-column .content .content-right .reading-list-done .data-time {
    color: #5E5E5E;
    display: flex;
    align-items: center; }
    .page-2-column .content .content-right .reading-list-done .data-time img {
      margin-right: 10px;
      width: 20px; }

.give-homework-page .list-type-3 .child-list {
  color: #000; }

.file-attach {
  color: #F08B01;
  font-size: 16px;
  line-height: 26px;
  font-style: italic;
  margin-bottom: 5px; }
  .file-attach .file-attach-img {
    width: 30px;
    height: 30px;
    position: absolute;
    top: 10px;
    right: 0;
    cursor: pointer;
    background: #4B4D4F;
    -webkit-mask: url("../img/student/file/attach.svg") no-repeat center;
    mask: url("../img/student/file/attach.svg") no-repeat center; }
  .file-attach.active {
    color: #5EBEAA;
    display: none; }
    .file-attach.active .file-attach-img {
      background-color: red;
      -webkit-mask: url("../img/student/file/attach.svg") no-repeat center;
      mask: url("../img/student/file/attach.svg") no-repeat center; }

.list-of-selected-items .child-list.active .file-attach {
  display: none; }
  .list-of-selected-items .child-list.active .file-attach.active {
    display: block; }

.list-of-selected-items.select_list .title, .list-of-selected-items.select_list .btn-complete {
  display: none; }

.add-student-page .message-errors {
  margin-bottom: 0;
  font-size: 18px;
  padding: 19.5px 25px 0; }

.add-student-page .student-add-group {
  margin-top: -170px;
  height: 300px;
  border-radius: 0;
  display: block;
  padding: 70px 0 0;
  text-align: center;
  background: transparent linear-gradient(0deg, #FFFFFF 0%, #FFFFFF 49%, #FFFFFFD6 76%, #FFFFFF00 100%) 0% 0% no-repeat padding-box; }
  .add-student-page .student-add-group .student, .add-student-page .student-add-group .parent {
    display: flex; }
  .add-student-page .student-add-group student {
    position: relative;
    margin-right: 10px; }
    .add-student-page .student-add-group student.student:after {
      content: '';
      width: 1px;
      height: 33px;
      background: #DEDEDE;
      margin: auto; }
  .add-student-page .student-add-group .student-people-img, .add-student-page .student-add-group .student-mail-img {
    max-width: 50px;
    height: 50px;
    margin-right: 15px; }
    .add-student-page .student-add-group .student-people-img img, .add-student-page .student-add-group .student-mail-img img {
      width: 30px; }
  .add-student-page .student-add-group .input-group {
    position: relative;
    max-width: 400px;
    margin: 25px auto 0; }
    .add-student-page .student-add-group .input-group img {
      position: absolute;
      top: 0;
      bottom: 0;
      margin: auto;
      left: 30px; }
    .add-student-page .student-add-group .input-group .fa-exclamation-triangle {
      display: none;
      position: absolute;
      top: 0;
      bottom: 0;
      align-items: center;
      right: 20px;
      color: #DA001B; }
    .add-student-page .student-add-group .input-group.active .fa-exclamation-triangle {
      display: flex; }
  .add-student-page .student-add-group input {
    font-size: 18px;
    height: 50px;
    border-radius: 50px;
    margin: auto;
    border: solid 2px #389199;
    padding: 0 40px 0 85px;
    font-family: "Myriad SemiBold"; }
    .add-student-page .student-add-group input::-webkit-input-placeholder {
      padding: 0;
      color: #7A7A7A;
      font-family: "Myriad SemiBold"; }
    .add-student-page .student-add-group input::placeholder {
      font-size: 18px;
      padding: 0;
      color: #7A7A7A;
      font-family: "Myriad SemiBold"; }
  .add-student-page .student-add-group .btn {
    padding: 10px 30px;
    height: 50px;
    font-size: 18px;
    max-width: 300px;
    width: 100%;
    position: relative;
    margin: 25px auto 0; }

.button-add-wish_list {
  display: none; }

.teacher-my-library .button-add-wish_list {
  display: block; }

.teacher-my-library .filter-js {
  max-width: 340px; }
  .teacher-my-library .filter-js .filter-container {
    max-width: 340px; }

.button-action .btn.get_step_2.disabled {
  opacity: 0.5; }

.popup-date .header h3 {
  text-align: center;
  font-size: 32px;
  font-family: 'Myriad Bold';
  color: #01283A;
  margin: 0; }

.popup-date .header p {
  text-align: center;
  font-size: 18px;
  color: #000000;
  margin: 10px 0; }

.popup-date .button-action .btn {
  width: calc(50% - 15px); }

.popup-date .date-box {
  position: relative;
  height: 424px;
  margin-bottom: 20px; }
  .popup-date .date-box input#date-time_popup {
    width: 100%;
    height: 100%;
    position: absolute;
    max-width: 370px;
    left: 0;
    right: 0;
    margin: auto;
    border-radius: 15px;
    z-index: 1;
    text-align: center; }

.popup-date .custom-date-box-2 {
  max-width: 370px;
  margin: auto; }
  .popup-date .custom-date-box-2 .daterangepicker {
    margin: 0; }
    .popup-date .custom-date-box-2 .daterangepicker .drp-calendar {
      max-width: 370px; }
      .popup-date .custom-date-box-2 .daterangepicker .drp-calendar th, .popup-date .custom-date-box-2 .daterangepicker .drp-calendar td {
        height: 53px; }

.teacher-attendance-box .s-list-student .s-list-content {
  height: calc(100vh - 280px); }

button:disabled {
  opacity: 0.6; }

.add-class-box .add-class-action {
  max-width: 450px; }
  .add-class-box .add-class-action button {
    max-width: 335px;
    margin: 20px auto 0; }

.teacher_class_attendance-box {
  margin-left: 85px;
  margin-top: 68px; }
  .teacher_class_attendance-box .list-type-2 {
    max-width: 520px;
    width: 100%;
    padding: 20px 20px 20px 45px; }
    .teacher_class_attendance-box .list-type-2 .list-item {
      max-height: 415px; }
    .teacher_class_attendance-box .list-type-2 .item-class {
      margin-bottom: 10px; }
      .teacher_class_attendance-box .list-type-2 .item-class label {
        margin-left: 25px; }
      .teacher_class_attendance-box .list-type-2 .item-class .delete {
        margin-right: 15px; }
  .teacher_class_attendance-box .attendance-box-action {
    display: flex;
    margin-top: 75px;
    margin-bottom: 50px; }
    .teacher_class_attendance-box .attendance-box-action .btn {
      max-width: 225px;
      margin-left: 40px; }
  .teacher_class_attendance-box .list-attendance .list-items {
    border-radius: 30px;
    background: #fffffff2;
    display: flex;
    align-items: center;
    min-height: 90px;
    justify-content: space-between;
    padding: 15px 40px 15px 30px;
    margin: 15px 0; }
    .teacher_class_attendance-box .list-attendance .list-items .date-box {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      max-width: 60%;
      width: 100%;
      color: #000;
      font-size: 20px;
      font-family: 'Myriad Semibold'; }
      .teacher_class_attendance-box .list-attendance .list-items .date-box img {
        width: 25px;
        margin-right: 20px; }
      .teacher_class_attendance-box .list-attendance .list-items .date-box > div {
        width: 100%;
        display: flex;
        align-items: center; }
      .teacher_class_attendance-box .list-attendance .list-items .date-box .day {
        margin-bottom: 5px; }
    .teacher_class_attendance-box .list-attendance .list-items .student {
      font-size: 45px;
      color: #06539C;
      font-family: 'MyriadPro-Black'; }
    .teacher_class_attendance-box .list-attendance .list-items .image {
      width: 60px;
      border: solid 5px #E9AF38;
      border-radius: 50%;
      overflow: hidden;
      height: 60px; }
  .teacher_class_attendance-box .btn-attendance {
    max-width: 255px;
    margin: 50px auto 0; }

.manage-example-box .teacher_class_attendance-box {
  margin: 0; }
  .manage-example-box .teacher_class_attendance-box .title label {
    font-size: 25px;
    letter-spacing: 0.3px; }
  .manage-example-box .teacher_class_attendance-box .list-attendance {
    margin: 35px 0 0 120px; }
    .manage-example-box .teacher_class_attendance-box .list-attendance .list-items {
      max-width: 540px;
      padding: 0;
      overflow: hidden;
      min-height: unset; }
      .manage-example-box .teacher_class_attendance-box .list-attendance .list-items .date-box {
        padding: 20px 0 20px 30px;
        background: #fffffff2; }
      .manage-example-box .teacher_class_attendance-box .list-attendance .list-items .text-box {
        font-size: 21px;
        color: #000;
        text-align: center;
        font-family: 'Myriad Bold';
        width: calc(100% - 47%); }

.teacher-guide .list-guide-box {
  height: calc(100vh - 170px);
  padding-right: 20px; }
  .teacher-guide .list-guide-box .list-items {
    position: relative;
    width: calc(50% - 14px);
    border-radius: 10px;
    background: #fffffff2;
    padding: 12px 20px 12px 20px;
    margin-bottom: 10px;
    float: left; }
    .teacher-guide .list-guide-box .list-items:nth-child(odd) {
      margin-right: 28px; }
    .teacher-guide .list-guide-box .list-items .name {
      font-size: 20px;
      font-family: 'Myriad SemiBold';
      margin: 0;
      overflow: hidden;
      width: calc(100% - 40px); }
    .teacher-guide .list-guide-box .list-items .date-box {
      font-size: 18px;
      display: flex;
      align-items: center;
      margin-top: 5px; }
      .teacher-guide .list-guide-box .list-items .date-box img {
        margin-right: 10px; }
    .teacher-guide .list-guide-box .list-items .file-img {
      position: absolute;
      top: 15px;
      right: 22px; }

.teacher-guide .popup-file {
  padding-top: 0; }
  .teacher-guide .popup-file .title {
    font-size: 32px;
    color: #01283A;
    text-align: center;
    font-family: 'Myriad Bold'; }
  .teacher-guide .popup-file .file-title {
    background: #EEEEEE;
    border: none;
    outline: none;
    border-radius: 25px;
    min-height: 75px;
    width: 100%;
    padding: 20px;
    font-size: 20px;
    color: #000000; }
    .teacher-guide .popup-file .file-title::-webkit-input-placeholder {
      color: #000000;
      padding: 0; }
  .teacher-guide .popup-file .file-action {
    display: flex;
    justify-content: space-between; }
  .teacher-guide .popup-file .custom-file-box {
    position: relative; }
    .teacher-guide .popup-file .custom-file-box input[type="file"] {
      position: absolute;
      cursor: pointer;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      z-index: 1;
      width: 100%;
      opacity: 0; }
      .teacher-guide .popup-file .custom-file-box input[type="file"]:valid ~ .file-content {
        display: flex;
        justify-content: space-between;
        background: #EEEEEE;
        border-radius: 25px;
        min-height: 53px;
        padding: 0 15px;
        margin: 44px 0 100px;
        align-items: center; }
        .teacher-guide .popup-file .custom-file-box input[type="file"]:valid ~ .file-content .file-name {
          width: calc(100% - 35px); }
        .teacher-guide .popup-file .custom-file-box input[type="file"]:valid ~ .file-content img {
          width: 30px; }
  .teacher-guide .popup-file .file-content .file-name:empty ~ .img-box {
    width: 110px;
    height: 90px;
    margin: auto;
    border: dashed 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 80px auto 100px; }

.marking-pages.example-page .col-main {
  width: 100%;
  float: unset;
  max-width: 1068px;
  margin: auto; }

.marking-pages.example-page .border-left {
  max-width: calc(100% - 200px);
  margin-right: 20px; }

.marking-pages.example-page .btn {
  margin: auto; }

.marking-pages.example-page .amica-marking {
  font-size: 20px;
  color: #fff;
  font-family: 'Myriad Bold';
  border-radius: 7px;
  border: solid 2px;
  line-height: 36px;
  padding: 0 20px;
  height: 40px; }

.marking-pages.example-page .title-head-box {
  width: calc(100% - 160px);
  display: flex;
  align-items: center; }

.marking-pages.example-page .writing-box {
  max-width: 725px;
  margin: 0 auto 45px;
  background: #ffffffe6;
  border-radius: 30px;
  min-height: 230px;
  padding: 40px; }

.marking-pages.example-page .listen-box {
  margin-bottom: 80px; }
  .marking-pages.example-page .listen-box div#video-controls {
    background: transparent;
    display: block; }
    .marking-pages.example-page .listen-box div#video-controls button#playpause {
      margin-bottom: 20px;
      width: 75px;
      height: 75px;
      border-radius: 50%;
      border: solid 1px #fff;
      display: flex;
      align-items: center;
      justify-content: center; }

.marking-pages.example-page .main-content {
  margin-bottom: 80px; }

.marking-pages.example-page .comment_and_point {
  max-width: 700px;
  margin: auto;
  display: flex;
  justify-content: space-around; }
  .marking-pages.example-page .comment_and_point .point-box {
    width: 162px;
    margin-right: 18px;
    min-height: 115px;
    border: solid 2px;
    color: #fff;
    border-radius: 20px;
    text-align: center;
    padding: 20px 0; }
    .marking-pages.example-page .comment_and_point .point-box .text {
      font-size: 24px;
      font-family: 'Myriad Bold'; }
    .marking-pages.example-page .comment_and_point .point-box input {
      width: 50px;
      border: none;
      background: transparent;
      border-bottom: solid 2px #fff;
      color: #FFF713;
      max-width: 100%;
      display: block;
      margin: auto;
      font-size: 32px;
      text-align: center;
      font-family: 'Myriad Bold'; }
      .marking-pages.example-page .comment_and_point .point-box input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0; }
  .marking-pages.example-page .comment_and_point .comment {
    width: calc(100% - 180px);
    background: #ffffffb3;
    border-radius: 20px; }
    .marking-pages.example-page .comment_and_point .comment textarea {
      width: 100%;
      background: transparent;
      border: none;
      outline: none;
      resize: none;
      font-size: 18px;
      min-height: 115px;
      color: #000;
      font-style: italic;
      padding: 20px;
      font-family: 'Myriad Regular'; }

.marking-pages.example-page .btn-action {
  max-width: 700px;
  display: flex;
  margin: 80px auto 0; }

.list-request-page .list-table th {
  padding: 25px 0 20px 5px; }

.list-request-page .list-class-box {
  max-width: 640px; }
  .list-request-page .list-class-box .table-container {
    position: relative; }
    .list-request-page .list-class-box .table-container .check_all_request {
      position: absolute;
      right: 40px;
      display: flex;
      align-items: center;
      top: 22px; }
      .list-request-page .list-class-box .table-container .check_all_request .custom-checkbox {
        margin: auto; }
      .list-request-page .list-class-box .table-container .check_all_request label {
        font-size: 16px;
        font-family: 'Myriad Bold';
        text-transform: uppercase;
        margin-left: 15px; }

.btn-access, .btn-reject {
  opacity: 0.5;
  cursor: not-allowed; }
  .btn-access.active, .btn-reject.active {
    opacity: 1;
    cursor: pointer; }

.popup-add-class {
  max-width: 325px !important;
  text-align: center; }
  .popup-add-class .avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    overflow: hidden;
    position: absolute;
    margin: auto;
    top: -90px;
    left: 0;
    right: 0; }
    .popup-add-class .avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover; }
  .popup-add-class h1.title-name {
    font-size: 24px;
    color: #231F20;
    margin: 45px 0 0 0;
    font-family: "Myriad Bold"; }
  .popup-add-class .btn-action {
    margin-top: 20px; }
    .popup-add-class .btn-action .btn-haft {
      max-width: 150px; }
  .popup-add-class .phone, .popup-add-class .email {
    margin-top: 10px; }
  .popup-add-class .phone {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Myriad Light"; }

.popup-add-student {
  max-width: 500px !important;
  color: #3E3E3E;
  text-align: center; }
  .popup-add-student .success-name {
    line-height: 25px;
    font-family: "Myriad SemiBold"; }
  .popup-add-student .btn-action {
    margin-top: 40px; }
    .popup-add-student .btn-action .bnt-cancel {
      max-width: 150px;
      margin: auto; }

.writing_mark-page .main-container {
  margin-bottom: 20px; }

.writing_mark-page .writing_box {
  border-radius: 25px;
  background: #fff;
  padding: 0 25px 25px;
  margin-bottom: 24px; }
  .writing_mark-page .writing_box .heading-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 0 10px;
    border-bottom: solid 1px;
    margin-bottom: 20px; }
    .writing_mark-page .writing_box .heading-box .label {
      font-size: 24px;
      font-family: "Myriad Bold", sans-serif; }
    .writing_mark-page .writing_box .heading-box .auto-marking {
      font-size: 18px;
      border-radius: 50px;
      color: #fff;
      background: #ED8A22;
      max-width: 160px;
      display: flex;
      padding: 4px 10px; }
      .writing_mark-page .writing_box .heading-box .auto-marking:before {
        content: '';
        display: block;
        background: url("../img/teacher/automark.svg") no-repeat;
        width: 25px;
        height: 25px;
        margin-right: 7px; }

.writing_mark-page .box-action {
  display: flex;
  margin-bottom: 50px;
  justify-content: space-between; }
  .writing_mark-page .box-action .box-review {
    background: #fff;
    max-width: 444px;
    padding: 10px;
    border-radius: 25px; }
    .writing_mark-page .box-action .box-review .label {
      font-size: 24px;
      padding-bottom: 14px;
      text-indent: 20px;
      border-bottom: solid 1px;
      font-family: "Myriad Bold",sans-serif; }

.writing_mark-page .btn.btn-orange.btn-action {
  max-width: 327px;
  margin: auto; }

.writing_mark-page .box-action-items {
  width: 100%; }

.writing_mark-page .box-score {
  background: #ffffff80;
  border-radius: 25px;
  padding: 8px;
  max-width: 377px; }
  .writing_mark-page .box-score .score-head {
    display: flex;
    justify-content: space-between; }
  .writing_mark-page .box-score .score-head {
    margin-bottom: 10px; }
    .writing_mark-page .box-score .score-head .items {
      background: #017CA4;
      color: #fff;
      line-height: 45px;
      border-radius: 20px;
      padding: 0 15px;
      width: 100%;
      max-width: 97px;
      font-family: "Myriad Bold", sans-serif; }
      .writing_mark-page .box-score .score-head .items:first-child {
        max-width: 158px; }
  .writing_mark-page .box-score .score-content {
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between; }
    .writing_mark-page .box-score .score-content .criteria, .writing_mark-page .box-score .score-content .ratio, .writing_mark-page .box-score .score-content .score-data {
      border-radius: 20px;
      background: #fff;
      color: #000;
      padding: 15px 15px 0;
      width: 100%;
      max-width: 97px;
      text-align: center; }
      .writing_mark-page .box-score .score-content .criteria .items, .writing_mark-page .box-score .score-content .ratio .items, .writing_mark-page .box-score .score-content .score-data .items {
        margin-bottom: 10px; }
    .writing_mark-page .box-score .score-content .criteria {
      max-width: 158px;
      text-align: left; }
  .writing_mark-page .box-score .score-bottom {
    display: flex;
    justify-content: space-between; }
    .writing_mark-page .box-score .score-bottom .label {
      max-width: 260px;
      padding: 0 15px;
      width: 100%;
      border-radius: 20px;
      line-height: 42px;
      background: #fff;
      font-family: "Myriad Bold", sans-serif; }
    .writing_mark-page .box-score .score-bottom .score {
      padding: 0 15px;
      width: 100%;
      line-height: 42px;
      border-radius: 20px;
      background: #fff;
      max-width: 97px;
      text-align: center; }

.writing_mark-page .popup-setting {
  max-width: 378px !important;
  padding: 0; }
  .writing_mark-page .popup-setting .box-score .score-content .criteria, .writing_mark-page .popup-setting .box-score .score-content .ratio, .writing_mark-page .popup-setting .box-score .score-content .score-data {
    background: #E6E7E8; }
  .writing_mark-page .popup-setting .box-score .score-bottom {
    display: block; }
    .writing_mark-page .popup-setting .box-score .score-bottom .btn-add-settings {
      width: 100%;
      height: 50px;
      display: flex;
      margin-bottom: 10px;
      align-items: center;
      background: #E6E7E8;
      border-radius: 20px;
      justify-content: center; }
    .writing_mark-page .popup-setting .box-score .score-bottom .check-items {
      display: flex;
      justify-content: space-between; }
    .writing_mark-page .popup-setting .box-score .score-bottom .custom-checkbox .checkbox-checkmark {
      border-color: #070707; }
      .writing_mark-page .popup-setting .box-score .score-bottom .custom-checkbox .checkbox-checkmark:after {
        content: '';
        border: none;
        background: url("../img/teacher/checked.png") no-repeat;
        width: 19px;
        height: 19px;
        transform: none;
        left: 2px;
        top: -4px; }

.writing_mark-page .popup-review {
  max-width: 378px !important;
  padding: 0 0 10px; }
  .writing_mark-page .popup-review .label {
    font-size: 24px;
    text-align: center;
    padding: 25px 0 10px;
    border-radius: 20px;
    font-family: "Myriad Bold", sans-serif; }
  .writing_mark-page .popup-review .review-content {
    padding: 0 12px; }
    .writing_mark-page .popup-review .review-content textarea {
      width: 100%;
      height: 282px;
      border-color: #7F7F7F;
      outline: none;
      padding: 14px 0;
      font-size: 18px;
      margin-bottom: 10px;
      font-family: "Myriad Light",sans-serif; }
  .writing_mark-page .popup-review .btn {
    max-width: 125px;
    float: right; }
	.___btn_upload-disabled{
		border-radius: 15px;
		font-size: 18px;
		margin-top: 40px;
		line-height: 50px;
		display: inline-block;
		padding: 0 50px;
		cursor: pointer;
		background: white;
		color: black ;
	}