.vocabulary-box {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -10px; }
  .vocabulary-box .vocabulary-items {
    max-width: calc(100%/3 - 20px);
    width: 100%;
    margin: 0 10px 20px 10px;
    border-radius: 10px;
    background: #00000066;
    padding: 20px 15px 20px 20px; }
    .vocabulary-box .vocabulary-items .title {
      font-size: 18px;
      color: #ffffff99; }
  .vocabulary-box .vocabulary-scroll {
    height: 155px;
    margin-top: 10px; }
  .vocabulary-box .vocabulary-scroll-items {
    background: #ffffff99;
    color: #FFFFFF;
    border-radius: 5px;
    display: flex;
    justify-content: space-between;
    padding: 0 10px;
    margin-bottom: 10px;
    align-items: center;
    min-height: 30px;
    width: calc(100% - 20px); }
    .vocabulary-box .vocabulary-scroll-items .text {
      margin: 0;
      font-size: 16px;
      width: calc(100% - 30px);
      font-family: 'Myriad Semibold'; }
    .vocabulary-box .vocabulary-scroll-items .custom-checkbox {
      margin: 0;
      height: 16px;
      width: 16px; }
      .vocabulary-box .vocabulary-scroll-items .custom-checkbox .checkbox-checkmark {
        border: 2px solid #FFF;
        border-radius: 3px;
        height: 16px;
        width: 16px;
        background: transparent; }
        .vocabulary-box .vocabulary-scroll-items .custom-checkbox .checkbox-checkmark:after {
          left: 5px;
          top: -6px;
          width: 4px;
          height: 12px;
          border-width: 0 3px 3px 0; }
      .vocabulary-box .vocabulary-scroll-items .custom-checkbox input:checked ~ .checkbox-checkmark {
        background-color: #fff;
        border: 2px solid #F08B01; }
    .vocabulary-box .vocabulary-scroll-items.active {
      background: #fff;
      color: #000; }

.unit-box {
  padding: 0 0 30px 0; }
  .unit-box .u-info {
    max-width: 270px;
    width: 100%;
    margin-right: 40px;
    display: inline-block;
    vertical-align: top; }
  .unit-box .u-lesson-items {
    max-width: 300px;
    width: 100%;
    margin-right: 40px;
    display: inline-block;
    vertical-align: top; }
  .unit-box .u-list-items {
    min-height: 50px;
    background: #fff;
    border-radius: 10px;
    margin-bottom: 10px;
    padding: 0 10px 0 20px;
    max-width: 270px;
    position: relative;
    display: flex;
    align-items: center; }
  .unit-box .lesson-scroll {
    padding: 0 20px 0 0;
    max-height: 590px; }
    .unit-box .lesson-scroll p.text {
      margin: 0;
      white-space: normal;
      padding: 5px 30px 5px 0;
      font-family: 'Myriad Semibold'; }
    .unit-box .lesson-scroll .delete-lesson {
      position: absolute;
      right: 6px;
      top: 0;
      bottom: 0;
      display: flex;
      align-items: center;
      z-index: 1; }
  .unit-box .btn-add-more {
    margin: 20px 30px 0 0;
    background: rgba(255, 255, 255, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    border-radius: 10px;
    cursor: pointer; }
    .unit-box .btn-add-more:hover {
      background: #fff; }
  .unit-box .delete-lesson {
    cursor: pointer; }
  .unit-box .custom-date-box-2 .daterangepicker {
    display: block !important; }

.attach-box.additional .sub-title {
  font-size: 18px;
  color: white; }
  .attach-box.additional .sub-title span {
    color: #E8E803;
    font-family: 'Myriad Light', serif; }

.attach-box.additional .list-type-3 {
  width: 100%;
  max-width: 450px; }
  .attach-box.additional .list-type-3 .child-list {
    border: 6px solid transparent; }
    .attach-box.additional .list-type-3 .child-list.attached {
      border: 6px solid #CB2127; }
  .attach-box.additional .list-type-3 .list-content {
    padding-right: 75px;
    width: 100%; }
  .attach-box.additional .list-type-3 .child-list {
    padding: 5px 15px; }

.attach-box.additional h4.title {
  color: #000000;
  font-family: 'Myriad Semibold', serif;
  font-size: 24px;
  margin-bottom: 10px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden; }

.attach-box.additional .create-at {
  margin-bottom: 10px; }
  .attach-box.additional .create-at img {
    vertical-align: text-bottom;
    width: 28px;
    margin-right: 5px; }

.attach-box.additional .how-long {
  margin-bottom: 10px; }
  .attach-box.additional .how-long img {
    vertical-align: text-top;
    width: 28px;
    margin-right: 5px; }

.attach-box.additional img.file-type {
  position: absolute;
  top: 0;
  right: 0;
  margin: 10px 0px; }

.attach-box.additional .rm-attach {
  display: none;
  position: absolute;
  right: 0;
  bottom: 0;
  border: none;
  background-color: #F08B01;
  padding: 10px 20px;
  font-size: 18px;
  color: white;
  border-radius: 5px;
  margin-right: -10px; }

.attach-box.additional .attached .rm-attach {
  display: inline-block; }

.edit-course-page .col-main .main-head {
  margin-bottom: 24px; }

.edit-course-page .col-main .title {
  width: calc(100% - 265px); }

.edit-course-page .custom-date-box-2 .daterangepicker {
  width: 370px !important; }
  .edit-course-page .custom-date-box-2 .daterangepicker .drp-calendar td {
    min-width: 53px;
    width: 53px;
    height: 53px; }

.edit-course-page .edit-course-box {
  display: flex;
  justify-content: space-between; }
  .edit-course-page .edit-course-box p.c-title {
    font-family: 'Myriad Semibold';
    margin: 0 0 15px 0; }
  .edit-course-page .edit-course-box .info {
    width: 50%;
    max-width: 430px; }
    .edit-course-page .edit-course-box .info .info-box {
      border-radius: 10px;
      background: rgba(255, 255, 255, 0.95);
      padding: 15px 20px 5px 20px; }
      .edit-course-page .edit-course-box .info .info-box .box-items {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 15px; }
        .edit-course-page .edit-course-box .info .info-box .box-items .left {
          display: flex;
          align-items: center; }
          .edit-course-page .edit-course-box .info .info-box .box-items .left img {
            margin: 0 10px 0 0; }
          .edit-course-page .edit-course-box .info .info-box .box-items .left.title-input span {
            font-family: 'Myriad Semibold';
            max-width: 300px; }
        .edit-course-page .edit-course-box .info .info-box .box-items .btn-edit-time.active svg {
          fill: #007BA4; }
  .edit-course-page .edit-course-box .list-lesson {
    width: calc(100% - 460px); }
    .edit-course-page .edit-course-box .list-lesson .list-lesson-content {
      border-radius: 20px;
      background: rgba(0, 0, 0, 0.3);
      padding: 20px 20px 20px 0;
      color: #fff;
      height: calc(100vh - 270px);
      margin-bottom: 45px; }
      .edit-course-page .edit-course-box .list-lesson .list-lesson-content .lesson-items {
        position: relative;
        border-bottom: solid 1px #fff;
        padding-bottom: 5px;
        padding-left: 20px;
        margin-bottom: 20px; }
        .edit-course-page .edit-course-box .list-lesson .list-lesson-content .lesson-items:last-child {
          margin-bottom: 0; }
        .edit-course-page .edit-course-box .list-lesson .list-lesson-content .lesson-items .title {
          font-size: 18px;
          margin: 0 0 5px 0;
          width: calc(100% - 50px); }
      .edit-course-page .edit-course-box .list-lesson .list-lesson-content .scroll-list {
        height: calc(100vh - 300px);
        padding: 0 20px 0 0; }
  .edit-course-page .edit-course-box .btn-delete-lesson {
    position: absolute;
    right: 10px;
    top: -10px;
    bottom: 0;
    margin: auto;
    display: flex;
    cursor: pointer; }
    .edit-course-page .edit-course-box .btn-delete-lesson input {
      opacity: 0; }

.add-unit-page .col-main .main-head {
  margin-bottom: 20px; }

.add-unit-page .unit-box {
  height: calc(100vh - 125px); }

.add-unit-page .page-2-column .list-unit-library.list-library-parents .list-unit {
  max-height: calc(100vh - 330px); }

.add-unit-page .page-2-column .list-unit-library.list-library-parents .bottom .btn {
  width: 100%; }

.add-unit-page .page-2-column .list-unit-library.list-library-parents {
  width: 100%; }

.add-unit-page .unit-box .lesson-scroll {
  max-height: calc(100vh - 295px); }

.upgrade-page .upgrade_account {
  padding-bottom: 50px; }
  .upgrade-page .upgrade_account .col-left {
    display: flex;
    justify-content: space-around; }
    .upgrade-page .upgrade_account .col-left .item-list {
      text-align: center;
      cursor: pointer; }
      .upgrade-page .upgrade_account .col-left .item-list .load-js-data {
        max-width: 120px;
        margin: auto; }
        .upgrade-page .upgrade_account .col-left .item-list .load-js-data .icon-active {
          display: none; }
        .upgrade-page .upgrade_account .col-left .item-list .load-js-data.active .icon-active {
          display: block; }
        .upgrade-page .upgrade_account .col-left .item-list .load-js-data.active .icon {
          display: none; }
      .upgrade-page .upgrade_account .col-left .item-list .btn-choice {
        width: 120px;
        height: 120px;
        border-radius: 50%;
        background: #fffc;
        margin: auto;
        display: flex;
        margin-bottom: 15px;
        align-items: center;
        justify-content: center; }
      .upgrade-page .upgrade_account .col-left .item-list span {
        text-align: center;
        font-size: 29px;
        color: #FFFFFF; }
      .upgrade-page .upgrade_account .col-left .item-list.active .btn-choice {
        background: #FFFFFF; }
  .upgrade-page .upgrade_account.have_data {
    display: flex; }
    .upgrade-page .upgrade_account.have_data .col-left {
      width: calc(100% - 480px);
      flex-wrap: wrap; }
      .upgrade-page .upgrade_account.have_data .col-left .item-list {
        width: 100%;
        margin-bottom: 20px; }
        .upgrade-page .upgrade_account.have_data .col-left .item-list .btn-choice {
          background: #144E6E; }
        .upgrade-page .upgrade_account.have_data .col-left .item-list.active .btn-choice {
          background: #FFFFFF; }
    .upgrade-page .upgrade_account.have_data .col-right {
      width: 480px; }

.upgrade-page .add-licence-box {
  background: #fff;
  max-width: 470px;
  padding: 45px 25px 20px;
  border-radius: 10px; }
  .upgrade-page .add-licence-box input.input-text {
    height: 50px;
    outline: none;
    width: 100%;
    border-radius: 25px;
    border: none;
    background: #EEEEEE;
    font-size: 18px;
    color: #000;
    margin-bottom: 20px; }
    .upgrade-page .add-licence-box input.input-text::-webkit-input-placeholder {
      color: #000;
      padding: 10px;
      font-size: 18px;
      font-family: 'Myriad Regular'; }
    .upgrade-page .add-licence-box input.input-text:-ms-input-placeholder {
      color: #000;
      padding: 10px;
      font-size: 18px;
      font-family: 'Myriad Regular'; }
    .upgrade-page .add-licence-box input.input-text::placeholder {
      color: #000;
      padding: 10px;
      font-size: 18px;
      font-family: 'Myriad Regular'; }
  .upgrade-page .add-licence-box .info {
    color: #3E3E3D;
    font-size: 18px;
    text-align: center;
    margin-top: 20px; }
    .upgrade-page .add-licence-box .info a {
      text-decoration: underline;
      color: #3E3E3D;
      font-family: 'Myriad Bold'; }

.upgrade-page .list-history-order {
  height: calc(100vh - 60px); }
  .upgrade-page .list-history-order .order-items {
    border-radius: 10px;
    background: #fff;
    margin-bottom: 20px;
    overflow: hidden;
    max-width: 460px; }
    .upgrade-page .list-history-order .order-items .title-order {
      padding: 6px 10px;
      text-align: center;
      background: #ED8A22;
      font-size: 25px;
      color: #fff;
      font-family: "Myriad Bold"; }
    .upgrade-page .list-history-order .order-items .order-content {
      display: flex;
      padding: 5px;
      min-height: 86px;
      align-items: center;
      justify-content: space-between; }
      .upgrade-page .list-history-order .order-items .order-content .order-price {
        width: calc(55% - 10px); }
        .upgrade-page .list-history-order .order-items .order-content .order-price span {
          display: block;
          text-align: center;
          position: relative;
          padding: 10.5px 0;
          color: #1B75BB;
          font-size: 39px;
          border-radius: 20px;
          background: #E6E7E8;
          font-family: "MyriadPro-Black"; }
          .upgrade-page .list-history-order .order-items .order-content .order-price span sub {
            position: absolute;
            bottom: 10px;
            font-size: 24px; }
      .upgrade-page .list-history-order .order-items .order-content .order-time {
        padding: 6px 0 0 0;
        width: calc(45% - 10px); }
        .upgrade-page .list-history-order .order-items .order-content .order-time p {
          color: #404041;
          margin: 0;
          font-size: 18px;
          font-family: "Myriad Light"; }

.upgrade-page .buy_licence-box .message_notify {
  color: #fff;
  min-height: 300px;
  display: flex;
  align-items: center;
  justify-content: center; }

.upgrade-page .buy_licence-box .select-content {
  max-width: 406px;
  width: 100%;
  height: 50px;
  text-align: center;
  color: #231F20;
  margin: auto;
  position: relative;
  z-index: 11; }
  .upgrade-page .buy_licence-box .select-content .select {
    background: #fff;
    border-radius: 40px;
    position: relative;
    cursor: pointer; }
    .upgrade-page .buy_licence-box .select-content .select:after {
      content: url(../img/upgrade/chevron-down-gray.png);
      right: 30px;
      position: absolute;
      top: 17px;
      border: 0;
      margin: auto; }
    .upgrade-page .buy_licence-box .select-content .select:before {
      content: '';
      position: absolute;
      height: 38px;
      width: 3px;
      display: block;
      background: #58595B;
      top: 6px;
      margin: auto;
      right: 80px; }
    .upgrade-page .buy_licence-box .select-content .select.active {
      border-radius: 10px; }
      .upgrade-page .buy_licence-box .select-content .select.active:after {
        top: 12px;
        transform: rotate(180deg); }
  .upgrade-page .buy_licence-box .select-content .styledSelect {
    height: 50px;
    cursor: pointer;
    line-height: 50px;
    position: relative;
    font-family: "Myriad Bold";
    max-width: calc(100% - 85px); }
  .upgrade-page .buy_licence-box .select-content .options {
    display: none;
    background: #fff;
    margin: 0;
    border-radius: 0 0 10px 10px;
    list-style: none;
    z-index: 1;
    cursor: pointer;
    padding: 0 20px;
    position: relative; }
    .upgrade-page .buy_licence-box .select-content .options li {
      border-top: solid 1px;
      padding: 10px 0; }

.upgrade-page .buy_licence-box .list-slide {
  margin-top: 20px; }
  .upgrade-page .buy_licence-box .list-slide .owl-item:nth-child(odd) .title-slide {
    background: #E4E774; }
  .upgrade-page .buy_licence-box .list-slide .owl-item:nth-child(odd) .slide-show-info {
    background: #E4E774; }
  .upgrade-page .buy_licence-box .list-slide .owl-item:nth-child(even) .title-slide {
    background: #B4DAE5; }
  .upgrade-page .buy_licence-box .list-slide .owl-item:nth-child(even) .slide-show-info {
    background: #B4DAE5; }
  .upgrade-page .buy_licence-box .list-slide .slide-items {
    background: #fff;
    max-width: 380px;
    margin: auto;
    padding: 5px 0 0;
    min-height: 540px;
    border-radius: 10px; }
  .upgrade-page .buy_licence-box .list-slide .title-slide {
    background: #E4E774;
    color: #262261;
    font-size: 24px;
    text-align: center;
    min-height: 50px;
    line-height: 50px;
    border-radius: 6px;
    margin: 0 8px 10px;
    font-family: "MyriadPro-Black"; }
  .upgrade-page .buy_licence-box .list-slide .image-slide {
    max-width: 304px;
    height: 255px;
    margin: 0 auto 20px; }
  .upgrade-page .buy_licence-box .list-slide .price-slide {
    background: #F5F5F5;
    color: #D34E42;
    font-size: 36px;
    text-align: center;
    line-height: 58px;
    font-family: "MyriadPro-Black"; }
  .upgrade-page .buy_licence-box .list-slide .info-time {
    color: #404041;
    padding: 35px 35px 50px 35px; }
  .upgrade-page .buy_licence-box .list-slide .time-items {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 5px; }
    .upgrade-page .buy_licence-box .list-slide .time-items span {
      display: block; }
      .upgrade-page .buy_licence-box .list-slide .time-items span strong {
        color: #D34E42;
        font-weight: 500; }
  .upgrade-page .buy_licence-box .list-slide .slide-info {
    display: none;
    padding: 0 28px; }
    .upgrade-page .buy_licence-box .list-slide .slide-info p {
      color: #404041;
      font-family: "Myriad Bold"; }
    .upgrade-page .buy_licence-box .list-slide .slide-info ul {
      list-style: none;
      color: #404041; }
      .upgrade-page .buy_licence-box .list-slide .slide-info ul li {
        margin-bottom: 20px;
        position: relative; }
        .upgrade-page .buy_licence-box .list-slide .slide-info ul li:after {
          content: '';
          background: url("../img/upgrade/list_items.png");
          width: 32px;
          height: 35px;
          position: absolute;
          display: block;
          left: -40px;
          top: 0;
          bottom: 0;
          margin: auto; }
  .upgrade-page .buy_licence-box .list-slide .slide-show-info {
    position: absolute;
    width: 65px;
    height: 65px;
    background: #B4DAE5;
    bottom: -32px;
    left: 0;
    right: 0;
    margin: auto;
    cursor: pointer;
    border-radius: 50%; }
    .upgrade-page .buy_licence-box .list-slide .slide-show-info:after {
      content: '';
      background: url("../img/upgrade/chevron-down-blue.png");
      width: 27px;
      height: 16px;
      display: block;
      margin: 10px auto 0; }
    .upgrade-page .buy_licence-box .list-slide .slide-show-info.active:after {
      transform: rotate(180deg); }
  .upgrade-page .buy_licence-box .list-slide .owl-dots {
    margin: 20px 0; }

.upgrade-page .buy_licence-box .owl-carousel button.owl-dot {
  width: 20px;
  height: 20px;
  position: relative;
  border: solid 1px #fff;
  background: transparent; }
  .upgrade-page .buy_licence-box .owl-carousel button.owl-dot.active:after {
    content: '';
    width: 16px;
    height: 16px;
    background: #fff;
    border-radius: 50%;
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto; }

.upgrade-page .buy_licence-box .owl-carousel .owl-nav button {
  display: flex;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  align-items: center;
  justify-content: center;
  outline: none;
  width: 31px;
  height: 310px;
  background: #ffffff80 !important;
  border-radius: 10px; }
  .upgrade-page .buy_licence-box .owl-carousel .owl-nav button:after {
    content: '';
    background: url("../img/upgrade/chevron-left-white.png");
    display: block;
    width: 20px;
    height: 34px; }
  .upgrade-page .buy_licence-box .owl-carousel .owl-nav button.owl-prev:after {
    transform: rotate(180deg); }
  .upgrade-page .buy_licence-box .owl-carousel .owl-nav button.disabled {
    opacity: 0.4; }
  .upgrade-page .buy_licence-box .owl-carousel .owl-nav button span {
    display: none; }
  .upgrade-page .buy_licence-box .owl-carousel .owl-nav button.owl-next {
    right: 0; }

.upgrade-page .buy_licence-box .btn-buy-now {
  max-width: 200px;
  margin: auto; }

.upgrade-page .popup-buy-now {
  display: none;
  width: 500px;
  padding: 0;
  text-align: center;
  border-radius: 30px !important;
  border: none !important;
  overflow: hidden; }
  .upgrade-page .popup-buy-now .popup-title {
    color: #FFFFFF;
    font-size: 24px;
    line-height: 50px;
    background: #F08B01;
    font-family: 'MyriadPro-Black'; }
  .upgrade-page .popup-buy-now .popup-content {
    min-height: 106px;
    display: flex;
    align-items: center;
    justify-content: center; }
  .upgrade-page .popup-buy-now .btn-action {
    padding: 0 20px 20px 20px; }