/* General */
.regisLabel {
  color: var(--Neutral04, #4D4D4D);
  font-size: 1rem !important;
  font-style: normal;
  font-weight: 600 !important;
}

.regisLabelFs20 {
  font-size: 1.25rem !important;
  font-weight: 500 !important;
}

.requireStar {
  color: var(--red-main, #CC3A3D);
  /* font-size: 16px !important; */
  font-style: normal;
  font-weight: 600 !important;
}

.tutor-wrap {
  background-color: #fbfbfb;
}

.tutor-wrap-dashboard {
  background-color: #FBFBFB;
}

.tutor-wrap-dashboard p.username {
  font-size: 13px;
  margin: 0px 8px;
  text-align: left;
  margin-right: 0px;
}

.tutor-wrap-dashboard p.description {
  font-size: 10px;
  margin: 0px 8px;
  margin-right: 0px;
}

.tutor-container {
  padding: 0 0.75rem;
}

.tutor-action {
  padding: 0 44px;
}

.tutor-action-title {
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.form-group label {
  margin-bottom: 0.75rem;
}

.form-input {
  max-width: 20rem;
  padding: 0.75rem;
  border-radius: 2px;
  border: 0.5px solid var(--neutral-09);
}

.btn-submit {
  border-radius: 0.25rem;
  padding: 0.75rem 2.75rem;
  margin: 2rem 0;
}

.select-icon {
  right: 0.75rem;
}

.custom-input-datetime {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  min-width: 96px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="21" viewBox="0 0 20 21" fill="none"><path d="M13.6539 11.1476C13.6572 11.197 13.6601 11.2474 13.6624 11.2987H13.6034C13.6222 11.2495 13.639 11.1991 13.6539 11.1476Z" fill="%23CCCCCC" stroke="%23CCCCCC"/><path d="M4.375 1C4.40815 1 4.43995 1.01317 4.46339 1.03661C4.48683 1.06005 4.5 1.09185 4.5 1.125V1.75V2.25H5H15H15.5V1.75V1.125C15.5 1.09185 15.5132 1.06005 15.5366 1.03661C15.5601 1.01317 15.5918 1 15.625 1C15.6582 1 15.6899 1.01317 15.7134 1.03661C15.7368 1.06005 15.75 1.09185 15.75 1.125V1.75V2.25H16.25H17.5C18.0304 2.25 18.5391 2.46071 18.9142 2.83579C19.2893 3.21086 19.5 3.71957 19.5 4.25V18C19.5 18.5304 19.2893 19.0391 18.9142 19.4142C18.5391 19.7893 18.0304 20 17.5 20H2.5C1.96957 20 1.46086 19.7893 1.08579 19.4142C0.710714 19.0391 0.5 18.5304 0.5 18V4.25C0.5 3.71957 0.710714 3.21086 1.08579 2.83579C1.46086 2.46071 1.96957 2.25 2.5 2.25H3.75H4.25V1.75V1.125C4.25 1.09185 4.26317 1.06005 4.28661 1.03661C4.31005 1.01317 4.34185 1 4.375 1ZM1.25 5H0.75V5.5V18C0.75 18.4641 0.934374 18.9092 1.26256 19.2374C1.59075 19.5656 2.03587 19.75 2.5 19.75H17.5C17.9641 19.75 18.4093 19.5656 18.7374 19.2374C19.0656 18.9093 19.25 18.4641 19.25 18V5.5V5H18.75H1.25Z" fill="%23CCCCCC" stroke="%23CCCCCC"/></svg>');
  display: block;
  background-repeat: no-repeat;
  background-position-x: 98%;
  background-position-y: 50%;
}

.custom-select-button {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  min-width: 96px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="21" viewBox="0 0 20 21" fill="none"><path d="M5 8L10 13L15 8" stroke="%23CCCCCC" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /></svg>');
  background-repeat: no-repeat;
  background-position-x: 98%;
  background-position-y: 50%;
}

/* Register information start */
.register-infor input[type="radio"] {
  accent-color: red;
}

.register-infor form>div {
  margin-bottom: 40px;
}

.register-infor form>div>label {
  margin-bottom: 0.75rem;
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--neutral-04);
  text-transform: capitalize;
}

.register-infor .subject .subject-item-contain {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px 24px;
  width: 100%;
  border: 1px solid var(--neutral-10);
  border-radius: 8px;
}

.register-infor .subject .subject-item-contain:hover {
  border-color: var(--red-main);
  cursor: pointer;
}

.register-infor .subject .subject-item-contain.active {
  background-image: url('../../public/img/chooseSub.png');
  background-repeat: no-repeat;
  background-position: right bottom;
  border-color: var(--red-main);
  cursor: pointer;
}

.register-infor .subject .subject-item-contain.active .subject-item-icon {
  background-color: #ffafa5;
}

.register-infor .subject .subject-group .active span {
  color: var(--New-red, #CC3A3D) !important;
  font-weight: 700 !important;
}

.register-infor .grade .grade-container .active span {
  color: var(--New-red, #CC3A3D) !important;
  font-weight: 600 !important;
}

.register-infor .grade .grade-container .active span svg path {
  fill: #CC3A3D;
}

.register-infor .subject .subject-item-contain:hover .subject-item-icon {
  background-color: #ffafa5;
}

.register-infor .subject .subject-item-contain span:last-child {
  font-size: 1rem;
  font-weight: 600;
  color: var(--neutral-04);
  text-transform: uppercase;
}

.register-infor .subject-item .subject-item-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 12px;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  background-color: #8bbbf4;
}

.register-infor .grade .grade-number>label,
.register-infor .grade .grade-type>label {
  margin-bottom: 12px;
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--neutral-04);
  text-transform: capitalize;
}

.register-infor .grade .grade-type {
  padding-left: 128px;
}

.register-infor .grade .grade-container {
  row-gap: 12px;
}

.register-infor .grade .grade-item>div {
  padding: 16px 12px;
  border: 1px solid var(--neutral-10);
  border-radius: 8px;
}

.register-infor .grade .grade-item>div:hover {
  border-color: var(--red-main);
  cursor: pointer;
}

.register-infor .grade .grade-item>div.active {
  background-image: url('../../public/img/chooseGrade.png');
  background-repeat: no-repeat;
  background-position: right bottom;
  border-color: var(--red-main);
}

.personal-row:not(:last-child) {
  margin-bottom: 20px;
}

.personal-row .personal-item {
  display: flex;
  flex-direction: column;
}

.personal-row .personal-item label {
  margin-bottom: 8px;
  color: var(--blue);
  font-size: 1rem;
  font-weight: 500;
  text-transform: capitalize;
}

.personal-row .personal-item input,
.personal-row .personal-item select {
  padding: 12px;
  border: 0.5px solid var(--neutral-09);
  border-radius: 2px;
  color: var(--secondary);
}

.personal-row .personal-item input:focus,
.personal-row .personal-item select:focus {
  border-color: var(--red-main);
  outline: none;
}

.personal-row .personal-item input:valid {
  background-color: #fff;
}

.personal-row .personal-item input::placeholder {
  color: var(--neutral-09);
}

.personal-row .personal-item select {
  position: relative;
  background-color: #fff;
}

.personal-row .personal-item select::after {
  content: '';
  display: block;
  position: absolute;
  background-image: url('../../public/img/chevron-down.png');
  background-repeat: no-repeat;
  width: 10px;
  height: 10px;
}

.submit-btn-register button {
  padding: 12px 44px;
  border: none;
  border-radius: 4px;
}

input[type='file'] {
  display: none;
}

.custom-file-input {
  max-width: 8.125rem;
  display: inline-block;
  padding: 0.75rem 2rem;
  background-color: #fff;
  color: var(--red-main) !important;
  border: 1px solid var(--red-main);
  border-radius: 5px;
  opacity: 1;
  cursor: pointer;
  height: unset !important;
}

.custom-file-input:hover {
  background-color: var(--red-main);
  cursor: pointer;
  border-color: transparent;
  color: #fff !important;
}

.tutor-content-wrap input[type='text'],
.tutor-content-wrap input[type='number'],
.tutor-content-wrap select {
  height: 50px;
}

/* Register information end */

@media (max-width: 992px) {
  .register-infor .grade .grade-type {
    padding-left: 50px;
  }

  .register-rightside {
    padding: 20px;
  }

  .responsibility-policy {
    margin-top: 6rem;
  }
}

/* Faqs start */
.tutor-content {
  padding: 1.25rem 5rem;
}

/* Faqs end */

/* Request withdraw money start */
.btn-fill-primary:hover {
  background-color: var(--red-main-hover);
}

.text-blue {
  color: var(--blue) !important;
}

.form-withdraw .btn-request {
  margin-top: 44px;
  padding: 12px 44px;
}

.form-withdraw .form-control {
  padding-top: 12px;
  padding-bottom: 12px;
  margin-top: 8px;
}

.form-group label {
  margin-bottom: 0.75rem;
}

.mt-20 {
  margin-top: 20px;
}

/* Request withdraw money end */

/* Profile tutor start */

.course-class-wrap {
  margin-top: 2rem;
}

.course-class-item {
  padding: 0.375rem 0.75rem;
  border-radius: 1.25rem;
  background: var(--neutral-06);
  line-height: 20px;
}

.form-input.form-full-width {
  max-width: unset;
}

.btn-edit-profile {
  border-radius: 10px;
  border: 1px solid #fff;
  background: var(--red-main, #cc3a3d);
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
}

.input-select {
  min-height: 50px;
  appearance: none;
  -webkit-appearance: none;
}

/* Profile tutor end */

/* List student start */

.table-students-wrap {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.table-students-wrap table {
  table-layout: fixed;
}

.table-students-wrap table thead tr {
  border-bottom: 1px;
}

.table-w-1200 {
  min-width: 1200px;
}

.table-w-800 {
  min-width: 800px;
}

.user-avatar {
  max-width: 2.25rem;
  max-height: 2.25rem;
  margin-right: 0.75rem;
}

.label {
  padding: 0.25rem 1.25rem;
  border-radius: 20px;
  background: #d9f4da;
  font-weight: 700;
  line-height: 18px;
}

.label.label-success {
  color: #3c663e;
}

.number-record-select {
  appearance: none;
  -webkit-appearance: none;
  min-width: 96px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="21" viewBox="0 0 20 21" fill="none"><path d="M5 8L10 13L15 8" stroke="%23CCCCCC" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /></svg>');
  background-repeat: no-repeat;
  background-position-x: 82%;
  background-position-y: 50%;
  border: 1px solid #dfdfdf;
  background-color: #FAFAFA;
}

.number-record-select-icon {
  right: 1rem;
}

.pagination .page-item .page-link {
  border-radius: 2px;
}

.page-link.page-button {
  color: #818181;
  font-size: 10px;
  border: 0;
}

.page-button-wrap .page-item:not(:last-child) {
  margin-right: 4px;
}

.page-link.page-button:hover,
.page-link.page-button.active {
  background: var(--blue);
  color: #fff;
}

.page-link.page-navigate {
  border: 0.5px solid #e0e0e0;
  padding: 0.25rem 0.625rem;
}

/* List student end */

/* Request tutor detail start */

.request-tutor-header {
  padding: 2rem 0 2.5rem;
}

.request-tutor-content {
  padding-bottom: 3.75rem;
}

.steps-segment {
  color: var(--neutral-08);
}

.steps-segment.is-done .steps-content-heading,
.steps-segment.is-cancel .steps-content-heading {
  color: var(--blue);
}

.steps-segment .steps-content-time,
.steps-segment.is-done .steps-content-time,
.steps-segment.is-cancel .steps-content-time {
  color: var(--neutral-04);
}

.steps-segment.steps-segment-receive-request.is-done .steps-icon {
  background-color: #f2fbfd;
}

.steps-segment.steps-segment-receive-request.is-done svg path {
  fill: #51bbd4;
}

.steps-segment.steps-segment-confirm-request.is-done .steps-icon {
  background-color: #ecf4fd;
}

/* .steps-segment.steps-segment-confirm-request.is-done svg path {
  fill: #004da9;
} */

.steps-segment.is-cancel .steps-icon {
  background-color: #ffe6e3;
}

.steps-segment.is-cancel svg path {
  fill: #c71b06;
}

.steps-segment.steps-segment-finish.is-done .steps-icon {
  background-color: #f0fced;
}

.steps-segment.steps-segment-finish.is-done svg path {
  fill: #299241;
}

.steps-segment:not(:first-child)::before {
  content: '';
  position: absolute;
  width: calc(100% - 84px);
  height: 1px;
  top: 2rem;
  right: calc(50% + 42px);
  background-color: #b3b3b3;
}

.is-cancel.steps-segment:not(:first-child)::before,
.is-done.steps-segment:not(:first-child)::before {
  background-color: #169934;
}

.steps-icon {
  width: 4rem;
  height: 4rem;
  border-radius: 30px;
  background-color: var(--neutral-11);
}

/* Request tutor detail end */

/* Responsive start*/
@media only screen and (min-width: 576px) {
  .tutor-content-wrap {
    padding: 1.25rem 2rem 2rem;
  }
}

@media only screen and (max-width: 640px) {
  .steps {
    flex-direction: column;
  }

  .steps-segment {
    width: 100%;
  }

  .steps-segment:not(:first-child) {
    padding-top: 10rem;
  }

  .steps-segment:not(:first-child)::before {
    height: 9rem;
    width: 1px;
    left: 50%;
    top: 0;
  }

  section.contact .contact-form {
    padding: 1rem 0.75rem;
  }
}

@media only screen and (min-width: 768px) {
  section.sidebar.tutor-sidebar {
    position: relative;
    left: 0;
    transition: none;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .steps-segment {
    width: 100%;
  }

  .steps-segment:not(:first-child) {
    padding-top: 10rem;
  }

  .steps-segment:not(:first-child)::before {
    height: 9rem;
    width: 1px;
    left: 50%;
    top: 0;
  }
}

/* Responsive end */

/* Contact start */

.contact .contact-form {
  padding: 3.75rem;
}

.contact-form {
  margin-bottom: 100px;
  border-radius: 15px;
  background: #FFF;
  box-shadow: 2px 5px 25px 0px rgba(0, 0, 0, 0.10);
  padding-bottom: 32px !important;
}

.contact-title {
  font-family: 'Sigmar One';
}

section.contact label {
  margin-bottom: 0.75rem;
}

section.contact .form-input {
  max-width: unset;
}

.button-contact {
  padding: 0.75rem 2rem;
  border-radius: 10px;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
  line-height: 18px;
}

.company-information-contact-item:not(:last-child) {
  margin-bottom: 0.75rem;
}

.icon-address,
.icon-phone,
.icon-email {
  padding: 0.375rem;
  border-radius: 50%;
  background-color: var(--red-main);
}

.icon-wrap {
  width: 1rem;
  height: 1rem;
}

.icon-youtube {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background-color: #f00;
}

/* Contact end */

/* Faqs start */

.tutor-faqs {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

@media only screen and (min-width: 768px) {
  .tutor-faqs {
    padding-left: 5rem;
    padding-right: 5rem;
  }
}

/* Faqs end */

/* Change password start */
.tutor-wrap .tutor-action-content input.form-control {
  height: unset;
  padding: 12px;
}

.tutor-wrap .tutor-action-content button.btn {
  padding: 12px 32px;
  border-radius: 10px;
}

/* Change password end */