.login-container {
  height: 100vh;
  background-color: #fff;
  display: flex;
  width: 100%;
  z-index: 1;
  position: relative;
  overflow: hidden; }
  .login-container .back-img-fixed {
    max-height: 100vh;
    overflow: hidden;
    position: fixed; }
    .login-container .back-img-fixed img {
      width: 50vw;
      height: 100vh;
      object-fit: cover; }
  .login-container .back-img {
    max-height: 100vh;
    overflow: hidden;
    position: relative;
    background-color: #f9fafc; }
    .login-container .back-img img {
      width: 100%;
      height: 100vh;
      object-fit: cover; }
    .login-container .back-img .color-overlay {
      position: absolute;
      top: 0px;
      left: 0px;
      bottom: 0px;
      right: 0px;
      width: 100%;
      padding: 25px; }
      .login-container .back-img .color-overlay .logo-container {
        display: flex;
        align-items: center; }
        .login-container .back-img .color-overlay .logo-container img {
          height: 50px;
          width: 202px; }
      .login-container .back-img .color-overlay .brand-logo {
        min-width: 70px;
        height: 30px;
        align-items: center;
        justify-content: center;
        cursor: pointer; }
        .login-container .back-img .color-overlay .brand-logo img {
          min-width: 70px;
          height: 30px; }
      .login-container .back-img .color-overlay .prap h1 {
        padding: 0 40px;
        font-size: 24px;
        font-weight: bold;
        line-height: 1.33;
        text-align: center;
        color: white; }
      .login-container .back-img .color-overlay .prap h2 {
        margin: 18px 0;
        font-size: 16px;
        font-weight: bold;
        text-align: center;
        color: white; }
      .login-container .back-img .color-overlay .prap .quoteMark {
        width: 100%;
        padding: 0 0 20px 0; }
        .login-container .back-img .color-overlay .prap .quoteMark img {
          display: block;
          width: 20px;
          height: 14px;
          margin: 0 auto;
          color: white;
          rotate: 90; }
  .login-container .form-container {
    background-color: white;
    height: 100vh;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    flex-direction: column; }
    .login-container .form-container .header-container {
      display: none;
      width: 100%; }
      .login-container .form-container .header-container .header {
        padding: 15px 20px;
        display: flex;
        align-items: center;
        justify-content: space-between; }
        .login-container .form-container .header-container .header .logo-container {
          display: flex;
          align-items: center; }
          .login-container .form-container .header-container .header .logo-container .logo {
            background-color: #0057ff;
            padding: 10px;
            border-radius: 30px;
            box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.3); }
            .login-container .form-container .header-container .header .logo-container .logo img {
              height: 32px;
              width: 30px; }
          .login-container .form-container .header-container .header .logo-container .logo-name {
            color: #0057ff;
            margin-left: 12px; }
    .login-container .form-container .containers {
      display: flex;
      align-items: center;
      flex-direction: column;
      justify-content: center;
      height: 100%;
      overflow-y: auto;
      padding: 25px; }
      .login-container .form-container .containers .field-container {
        max-width: 400px;
        width: 100%; }
    .login-container .form-container .release-information-container {
      max-width: 550px;
      margin-top: 50px; }

.m-header-p-10 .ant-modal-content .ant-modal-header {
  padding: 10px !important; }

.wm-35 {
  width: 700px !important; }

.wp-15 {
  width: 15% !important; }

.wp-20 {
  width: 20% !important; }

.wp-25 {
  width: 25% !important; }

.wp-30 {
  width: 30% !important; }

.wp-35 {
  width: 35% !important; }

.wp-40 {
  width: 40% !important; }

.wp-45 {
  width: 45% !important; }

.wp-50 {
  width: 50% !important; }

.wp-55 {
  width: 55% !important; }

.wp-60 {
  width: 60% !important; }

.wp-70 {
  width: 70% !important; }

.wp-80 {
  width: 80% !important; }

.wp-85 {
  width: 85% !important; }

.wp-90 {
  width: 90% !important; }

.wp-95 {
  width: 95% !important; }

.wp-100 {
  width: 100% !important; }

.minh-20 {
  min-height: 20px !important; }

.minh-25 {
  min-height: 25px !important; }

.minh-50 {
  min-height: 50px !important; }

.minh-70 {
  min-height: 70px !important; }

.minh-320 {
  min-height: 320px !important; }

.minw-20 {
  min-width: 20px !important; }

.minw-25 {
  min-width: 25px !important; }

.minw-30 {
  min-width: 39px !important; }

.minw-40 {
  min-width: 40px !important; }

.minw-50 {
  min-width: 50px !important; }

.minw-60 {
  min-width: 60px !important; }

.minw-70 {
  min-width: 70px !important; }

.minw-75 {
  min-width: 75px !important; }

.minw-80 {
  min-width: 80px !important; }

.minw-85 {
  min-width: 85px !important; }

.minw-90 {
  min-width: 90px !important; }

.minw-95 {
  min-width: 95px !important; }

.minw-100 {
  min-width: 100px !important; }

.minw-105 {
  min-width: 105px !important; }

.minw-110 {
  min-width: 110px !important; }

.minw-115 {
  min-width: 115px !important; }

.minw-120 {
  min-width: 120 !important; }

.minw-125 {
  min-width: 125px !important; }

.minw-130 {
  min-width: 130px !important; }

.minw-135 {
  min-width: 135px !important; }

.minw-140 {
  min-width: 140px !important; }

.minw-145 {
  min-width: 145px !important; }

.minw-150 {
  min-width: 150px !important; }

.minw-160 {
  min-width: 160px !important; }

.minw-200 {
  min-width: 200px !important; }

.minw-210 {
  min-width: 210px !important; }

.minw-230 {
  min-width: 230px !important; }

.minw-250 {
  min-width: 250px !important; }

.minw-300 {
  min-width: 300px !important; }

.minw-350 {
  min-width: 350px !important; }

.minw-400 {
  min-width: 400px !important; }

.minw-450 {
  min-width: 450px !important; }

.minw-500 {
  min-width: 500px !important; }

.maxnw-20 {
  max-width: 20px !important; }

.maxnw-30 {
  max-width: 30px !important; }

.maxnw-40 {
  max-width: 40px !important; }

.maxnw-50 {
  max-width: 50px !important; }

.maxnw-70 {
  max-width: 70px !important; }

.maxnw-80 {
  max-width: 80px !important; }

.maxnw-90 {
  max-width: 90px !important; }

.maxnw-100 {
  max-width: 100px !important; }

.maxnw-125 {
  max-width: 125px !important; }

.maxnw-130 {
  max-width: 130px !important; }

.maxnw-150 {
  max-width: 150px !important; }

.maxnw-200 {
  max-width: 200px !important; }

.maxnw-250 {
  max-width: 250px !important; }

.maxnw-230 {
  max-width: 230px !important; }

.maxnw-300 {
  max-width: 300px !important; }

.maxnw-320 {
  max-width: 320px !important; }

.maxnw-350 {
  max-width: 350px !important; }

.maxnw-400 {
  max-width: 400px !important; }

.maxnw-450 {
  max-width: 450px !important; }

.maxnw-500 {
  max-width: 500px !important; }

.maxnw-550 {
  max-width: 550px !important; }

.maxnw-650 {
  max-width: 650px !important; }

.maxnh-20 {
  max-height: 20px !important; }

.maxnh-25 {
  max-height: 25px !important; }

.maxnh-50 {
  max-height: 50px !important; }

.maxnh-70 {
  max-height: 70px !important; }

.maxnh-100 {
  max-height: 100px !important; }

.maxnh-125 {
  max-height: 125px !important; }

.maxnh-150 {
  max-height: 150px !important; }

.maxnh-200 {
  max-height: 200px !important; }

.maxnh-250 {
  max-height: 250px !important; }

.maxnh-230 {
  max-height: 230px !important; }

.maxnh-300 {
  max-height: 300px !important; }

.maxnh-350 {
  max-height: 350px !important; }

.maxnh-400 {
  max-height: 400px !important; }

.maxnh-450 {
  max-height: 450px !important; }

.maxnh-500 {
  max-height: 500px !important; }

.h-20 {
  height: 20px !important; }

.h-50 {
  height: 50px !important; }

.h-55 {
  height: 55px !important; }

.h-60 {
  height: 60px !important; }

.h-70 {
  height: 70px !important; }

.h-100 {
  height: 100px !important; }

.h-110 {
  height: 110px !important; }

.h-125 {
  height: 125px !important; }

.h-150 {
  height: 150px !important; }

.h-200 {
  height: 200px !important; }

.h-250 {
  height: 250px !important; }

.h-230 {
  height: 230px !important; }

.h-270 {
  height: 270px !important; }

.h-300 {
  height: 300px !important; }

.h-350 {
  height: 350px !important; }

.h-400 {
  height: 400px !important; }

.h-450 {
  height: 450px !important; }

.h-500 {
  height: 500px !important; }

.h-auto {
  height: auto !important; }

.l-space {
  letter-spacing: 1px !important; }

.fs-10 {
  font-size: 10px !important; }

.fs-11 {
  font-size: 11px !important; }

.fs-12 {
  font-size: 12px !important; }

.fs-13 {
  font-size: 13px !important;
  line-height: 21px !important; }

.fs-14 {
  font-size: 14px !important; }

.fs-15 {
  font-size: 15px !important; }

.fs-16 {
  font-size: 16px !important; }

.fs-18 {
  font-size: 18px !important; }

.fs-20 {
  font-size: 20px !important; }

.fs-22 {
  font-size: 22px !important; }

.fs-24 {
  font-size: 24px !important; }

.fs-25 {
  font-size: 25px !important; }

.fs-30 {
  font-size: 30px !important; }

.fs-35 {
  font-size: 35px !important; }

.fs-40 {
  font-size: 40px !important; }

.fs-45 {
  font-size: 45px !important; }

.fs-50 {
  font-size: 50px !important; }

.f-upper {
  text-transform: uppercase !important; }

.text-under {
  text-decoration: underline !important; }

.fw-50 {
  font-weight: 50 !important; }

.fw-400 {
  font-weight: 400 !important; }

.fw-450 {
  font-weight: 500 !important; }

.fw-480 {
  font-weight: 500 !important; }

.fw-500 {
  font-weight: 500 !important; }

.fw-600 {
  font-weight: 600 !important; }

.fw-bolder {
  font-weight: bolder !important; }

.fw-bold {
  font-weight: bold !important; }

.border-right {
  border-right: 1px solid #f0f0f0 !important; }

.border-left {
  border-left: 1px solid #f0f0f0 !important; }

.border-bottom {
  border-bottom: 1px solid #f0f0f0 !important; }

.border-top {
  border-top: 1px solid #f0f0f0 !important; }

.border {
  border: 1px solid #e0dcdc !important; }

.border-light {
  border: 1px solid #f0f0f0 !important; }

.border-dark {
  border: 1px solid #d0d0d0 !important; }

.border-blue {
  border: 1px solid #0057ff !important; }

.border-radius {
  border-radius: 5px !important; }

.border-radius-3 {
  border-radius: 3px !important; }

.border-radius-10 {
  border-radius: 10px !important; }

.border-radius-top {
  border-radius: 10px 10px 0px 0px !important; }

.border-radius-bottom {
  border-radius: 0px 0px 5px 5px !important; }

.border-radius-30 {
  border-radius: 30px !important; }

.m-0 {
  margin: 0px !important; }

.m-3 {
  margin: 3px !important; }

.m-5 {
  margin: 5px !important; }

.m-10 {
  margin: 10px !important; }

.m-15 {
  margin: 15px !important; }

.m-20 {
  margin: 20px !important; }

.m-25 {
  margin: 25px !important; }

.m-30 {
  margin: 30px !important; }

.ml-auto {
  margin-left: auto !important; }

.mr-auto {
  margin-right: auto !important; }

.mt-auto {
  margin-top: auto !important; }

.mb-auto {
  margin-bottom: auto !important; }

.m-auto {
  margin: auto; }

.mb-0 {
  margin-bottom: 0px !important; }

.mb-1 {
  margin-bottom: 1px !important; }

.mb-2 {
  margin-bottom: 2px !important; }

.mb-3 {
  margin-bottom: 3px !important; }

.mb-4 {
  margin-bottom: 4px !important; }

.mb-5 {
  margin-bottom: 5px !important; }

.mb-10 {
  margin-bottom: 10px !important; }

.mb-11 {
  margin-bottom: 11px !important; }

.mb-12 {
  margin-bottom: 12px !important; }

.mb-13 {
  margin-bottom: 13px !important; }

.mb-14 {
  margin-bottom: 14px !important; }

.mb-15 {
  margin-bottom: 15px !important; }

.mb-20 {
  margin-bottom: 20px !important; }

.mb-25 {
  margin-bottom: 25px !important; }

.mb-30 {
  margin-bottom: 30px !important; }

.mb-35 {
  margin-bottom: 35px !important; }

.mb-40 {
  margin-bottom: 40px !important; }

.mb-45 {
  margin-bottom: 45px !important; }

.mb-50 {
  margin-bottom: 50px !important; }

.mb-55 {
  margin-bottom: 55px !important; }

.mb-60 {
  margin-bottom: 60px !important; }

.mb-65 {
  margin-bottom: 65px !important; }

.mb-70 {
  margin-bottom: 70px !important; }

.mb-75 {
  margin-bottom: 75px !important; }

.mb-125 {
  margin-bottom: 125px !important; }

.mb-150 {
  margin-bottom: 150px !important; }

.mt-0 {
  margin-top: 0px !important; }

.mt-2 {
  margin-top: 2px !important; }

.mt-3 {
  margin-top: 3px !important; }

.mt-4 {
  margin-top: 4px !important; }

.mt-5 {
  margin-top: 5px !important; }

.mt-7 {
  margin-top: 7px !important; }

.mt-10 {
  margin-top: 10px !important; }

.mt-15 {
  margin-top: 15px !important; }

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

.mt-25 {
  margin-top: 25px !important; }

.mt-30 {
  margin-top: 30px !important; }

.mt-32 {
  margin-top: 32px !important; }

.mt-35 {
  margin-top: 35px !important; }

.mt-40 {
  margin-top: 40px !important; }

.mt-50 {
  margin-top: 50px !important; }

.mt-60 {
  margin-top: 60px !important; }

.mt-70 {
  margin-top: 70px !important; }

.mt-105 {
  margin-top: 105px !important; }

.ml-0 {
  margin-left: 0px !important; }

.ml-3 {
  margin-left: 3px !important; }

.ml-5 {
  margin-left: 5px !important; }

.ml-8 {
  margin-left: 8px !important; }

.ml-10 {
  margin-left: 10px !important; }

.ml-15 {
  margin-left: 15px !important; }

.ml-19 {
  margin-left: 19px !important; }

.ml-20 {
  margin-left: 20px !important; }

.ml-25 {
  margin-left: 25px !important; }

.ml-30 {
  margin-left: 30px !important; }

.ml-35 {
  margin-left: 35px !important; }

.ml-50 {
  margin-left: 50px !important; }

.ml-60 {
  margin-left: 60px !important; }

.ml-75 {
  margin-left: 75px !important; }

.ml-80 {
  margin-left: 80px !important; }

.ml-140 {
  margin-left: 140px !important; }

.ml-170 {
  margin-left: 170px !important; }

.ml-250 {
  margin-left: 250px !important; }

.mr-0 {
  margin-right: 0px !important; }

.mr-3 {
  margin-right: 3px !important; }

.mr-5 {
  margin-right: 5px !important; }

.mr-8 {
  margin-right: 8px !important; }

.mr-9 {
  margin-right: 9px !important; }

.mr-10 {
  margin-right: 10px !important; }

.mr-12 {
  margin-right: 12px !important; }

.mr-13 {
  margin-right: 13px !important; }

.mr-15 {
  margin-right: 15px !important; }

.mr-20 {
  margin-right: 20px !important; }

.mr-25 {
  margin-right: 25px !important; }

.mr-30 {
  margin-right: 30px !important; }

.mr-50 {
  margin-right: 50px !important; }

.mr-60 {
  margin-right: 60px !important; }

.mr-70 {
  margin-right: 70px !important; }

.mr-80 {
  margin-right: 80px !important; }

.mr-90 {
  margin-right: 90px !important; }

.mr-100 {
  margin-right: 100px !important; }

.p-0 {
  padding: 0px !important; }

.p-1 {
  padding: 1px !important; }

.p-2 {
  padding: 2px !important; }

.p-3 {
  padding: 3px !important; }

.p-4 {
  padding: 4px !important; }

.p-5 {
  padding: 5px !important; }

.p-7 {
  padding: 7px !important; }

.p-8 {
  padding: 8px !important; }

.p-10 {
  padding: 10px !important; }

.p-15 {
  padding: 15px !important; }

.p-20 {
  padding: 20px !important; }

.p-25 {
  padding: 25px !important; }

.p-30 {
  padding: 30px !important; }

.p-50 {
  padding: 50px !important; }

.pb-0 {
  padding-bottom: 0px !important; }

.pb-1 {
  padding-bottom: 1px !important; }

.pb-2 {
  padding-bottom: 2px !important; }

.pb-3 {
  padding-bottom: 3px !important; }

.pb-4 {
  padding-bottom: 4px !important; }

.pb-5 {
  padding-bottom: 5px !important; }

.pb-10 {
  padding-bottom: 10px !important; }

.pb-11 {
  padding-bottom: 11px !important; }

.pb-13 {
  padding-bottom: 13px !important; }

.pb-14 {
  padding-bottom: 14px !important; }

.pb-15 {
  padding-bottom: 15px !important; }

.pb-20 {
  padding-bottom: 20px !important; }

.pb-25 {
  padding-bottom: 25px !important; }

.pb-30 {
  padding-bottom: 30px !important; }

.pb-40 {
  padding-bottom: 50px !important; }

.pb-50 {
  padding-bottom: 50px !important; }

.pb-150 {
  padding-bottom: 150px !important; }

.pt-0 {
  padding-top: 0px !important; }

.pt-1 {
  padding-top: 1px !important; }

.pt-2 {
  padding-top: 2px !important; }

.pt-3 {
  padding-top: 3px !important; }

.pt-4 {
  padding-top: 4px !important; }

.pt-5 {
  padding-top: 5px !important; }

.pt-6 {
  padding-top: 6px !important; }

.pt-7 {
  padding-top: 7px !important; }

.pt-8 {
  padding-top: 8px !important; }

.pt-9 {
  padding-top: 9px !important; }

.pt-10 {
  padding-top: 10px !important; }

.pt-15 {
  padding-top: 15px !important; }

.pt-20 {
  padding-top: 20px !important; }

.pt-25 {
  padding-top: 25px !important; }

.pt-30 {
  padding-top: 30px !important; }

.pt-45 {
  padding-top: 45px !important; }

.pt-50 {
  padding-top: 50px !important; }

.pt-55 {
  padding-top: 55px !important; }

.pt-70 {
  padding-top: 70px !important; }

.pl-0 {
  padding-left: 0px !important; }

.pl-5 {
  padding-left: 5px !important; }

.pl-10 {
  padding-left: 10px !important; }

.pl-15 {
  padding-left: 15px !important; }

.pl-20 {
  padding-left: 20px !important; }

.pl-25 {
  padding-left: 25px !important; }

.pl-30 {
  padding-left: 30px !important; }

.pl-35 {
  padding-left: 35px !important; }

.pl-40 {
  padding-left: 40px !important; }

.pr-0 {
  padding-right: 0px !important; }

.pr-5 {
  padding-right: 5px !important; }

.pr-10 {
  padding-right: 10px !important; }

.pr-15 {
  padding-right: 15px !important; }

.pr-20 {
  padding-right: 20px !important; }

.pr-25 {
  padding-right: 25px !important; }

.pr-30 {
  padding-right: 30px !important; }

.pr-35 {
  padding-right: 35px !important; }

.pr-40 {
  padding-right: 40px !important; }

.text-center {
  text-align: center !important; }

.text-left {
  text-align: left !important; }

.text-right {
  text-align: right !important; }

.text-justify {
  text-align: justify !important; }

.row-content {
  display: flex !important; }
  .row-content.center {
    align-items: center !important; }
  .row-content .space {
    justify-content: space-between !important; }
  .row-content.space {
    justify-content: space-between !important; }
  .row-content.wrap {
    flex-wrap: wrap !important; }
  .row-content.end {
    align-items: flex-end !important; }
  .row-content.right-end {
    justify-content: flex-end !important; }
  .row-content.center-center {
    align-items: center !important;
    justify-content: center !important; }
  .row-content.j-center {
    justify-content: center !important; }
  .row-content.a-center {
    align-items: center !important; }
  .row-content.flex-col {
    flex-direction: column !important; }
  .row-content.column {
    -webkit-box-orient: vertical !important;
    -webkit-box-direction: normal !important;
    flex-direction: column !important; }

.centerY {
  display: flex !important;
  align-items: center !important; }

.centerXY {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important; }

.centerX {
  display: flex !important;
  justify-content: center !important; }

.primary-color {
  background-color: #0057ff !important; }

.primarylight-color {
  background-color: #ecf2fe !important; }

.white-color {
  background-color: #fff !important; }

.pageback-color {
  background-color: #f9fafc !important; }

.pagelight-color {
  background-color: #fafafa !important; }

.pagedark-color {
  background-color: #dbdbdb !important; }

.line-color {
  background-color: #e8e8e8 !important; }

.primaryligth-color {
  background-color: #ecf2fe !important; }

.trans-color {
  background-color: transparent !important; }

.smarthr-logo-color-icon {
  background-color: #00c4cc !important;
  border-color: transparent !important; }

.primary-gradient-color {
  border-color: transparent !important;
  background: linear-gradient(340deg, #27b3db, #276ef1) !important; }

.gray-gradient-color {
  background: linear-gradient(to top, white, #f7f7f7, #f7f7f7) !important; }

.gold-back {
  background-image: url("/assets/images/goldBack.jpg");
  background-size: cover !important;
  background-repeat: no-repeat, repeat;
  background-size: 100% 100%;
  background-position: center !important; }

.op-black-color {
  background-color: #0000001e; }

.object-cover {
  object-fit: cover; }

.dark-shadow {
  box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.3) !important; }

.fn-primary-color {
  color: #0057ff !important; }

.fn-success-color {
  color: #2eca73 !important; }

.fn-cyan-color {
  color: #13c2c2 !important; }

.fn-danger-color {
  color: #f23d6a !important; }

.fn-grey-color {
  color: grey !important; }

.fn-white-color {
  color: white !important; }

.fn-blue-color {
  color: #7ab7dd !important; }

.vh-100 {
  height: 100vh !important; }

.vw-100 {
  height: 100vw !important; }

.h-100 {
  height: 100% !important; }

.h-50 {
  height: 50% !important; }

.hh-85 {
  height: 85% !important; }

.hh-90 {
  height: 90% !important; }

.w-100 {
  width: 100% !important; }

.w-90 {
  width: 90% !important; }

.w-80 {
  width: 80% !important; }

.w-70 {
  width: 70% !important; }

.w-60 {
  width: 60% !important; }

.w-50 {
  width: 50% !important; }

.w-40 {
  width: 40% !important; }

.w-30 {
  width: 30% !important; }

.w-20 {
  width: 20% !important; }

.w-10 {
  width: 10% !important; }

.mi-w-100 {
  min-width: 100% !important; }

.ma-w-100 {
  max-width: 100% !important; }

.vh-100 {
  height: 100vh; }

.w-fit-content {
  width: fit-content !important; }

.vw-95 {
  height: 95vw; }

.h-95 {
  height: 95% !important; }

.w-95 {
  width: 95% !important; }

.h-auto {
  height: auto; }

.over-hidden {
  overflow: hidden !important; }

.fl-right {
  float: right; }

.fl-left {
  float: left; }

.relative-content {
  position: relative; }

.center-div {
  position: relative;
  margin-left: 50% !important;
  transform: translateX(-44px); }

.flex-1 {
  flex: 1 !important; }

.color-black {
  color: black !important; }

.color-gray {
  color: gray; }

.color-white {
  color: white !important; }

.color-red {
  color: #de4040; }

.card-shadow {
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1); }

.card-shadow-md {
  box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.3); }

.over-flowx {
  overflow-x: auto; }

.success-status {
  color: #2eca73; }

.error-status {
  color: #ff5733; }

.msngr-status {
  color: #0084ff; }

.sms-status {
  color: #2eca73; }

.eml-status {
  color: #3b5998; }

.warning-status {
  color: #f37a21; }

.d-flex {
  display: flex !important; }

.display-flex {
  display: flex !important; }

.display-none {
  display: none !important; }

.display-inline {
  display: inline !important; }

.display-inline-block {
  display: inline-block !important; }

.display-block {
  display: block !important; }

.oneline-text {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap; }

.table {
  width: 100% !important;
  table-layout: fixed; }

.nine {
  width: 9% !important; }

.thirteen {
  width: 13% !important; }

.weekend {
  color: rgba(230, 3, 3, 0.534);
  background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23f9f9fa' fill-opacity='1' fill-rule='evenodd'%3E%3Cpath d='M0 40L40 0H20L0 20M40 40V20L20 40'/%3E%3C/g%3E%3C/svg%3E"); }

.pointless {
  list-style-type: none; }

.filter-grey {
  filter: grayscale(100%); }

.aaaa .btn-grey:hover img {
  filter: grayscale(0%); }

.text-container-overflow {
  overflow-y: hidden;
  overflow-x: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; }

.vertical-scroll {
  overflow-y: auto;
  overflow-x: hidden; }

@media (max-width: 480px) {
  .sm-indent-1 {
    text-indent: -1em;
    padding-left: 1em; } }

.t-5 {
  top: 5px !important; }

.t-10 {
  top: 10px !important; }

.t-20 {
  top: 20px !important; }

.t-30 {
  top: 30px !important; }

.t-40 {
  top: 40px !important; }

.t-50 {
  top: 50px !important; }

.t-100 {
  top: 100px !important; }

.t-155 {
  top: 150px !important; }

.t-200 {
  top: 200px !important; }

.t-250 {
  top: 250px !important; }

.t-300 {
  top: 300px !important; }

.t-m-5 {
  top: -5px !important; }

.t-m-10 {
  top: -10px !important; }

.t-m-20 {
  top: -20px !important; }

.t-m-30 {
  top: -30px !important; }

.t-m-40 {
  top: -40px !important; }

.t-m-50 {
  top: -50px !important; }

.t-m-100 {
  top: -100px !important; }

.t-m-155 {
  top: -150px !important; }

.t-m-200 {
  top: -200px !important; }

.t-m-250 {
  top: -250px !important; }

.t-m-300 {
  top: -300px !important; }

.l-0 {
  left: 0px !important; }

.l-5 {
  left: 5px !important; }

.l-10 {
  left: 10px !important; }

.l-20 {
  left: 20px !important; }

.l-30 {
  left: 30px !important; }

.l-40 {
  left: 40px !important; }

.l-50 {
  left: 50px !important; }

.l-100 {
  left: 100px !important; }

.l-155 {
  left: 150px !important; }

.l-200 {
  left: 200px !important; }

.l-250 {
  left: 250px !important; }

.l-300 {
  left: 300px !important; }

.l-m-5 {
  left: -5px !important; }

.l-m-10 {
  left: -10px !important; }

.l-m-20 {
  left: -20px !important; }

.l-m-30 {
  left: -30px !important; }

.l-m-40 {
  left: -40px !important; }

.l-m-50 {
  left: -50px !important; }

.l-m-100 {
  left: -100px !important; }

.l-m-155 {
  left: -150px !important; }

.l-m-200 {
  left: -200px !important; }

.l-m-250 {
  left: -250px !important; }

.l-m-300 {
  left: -300px !important; }

.l-p-0 {
  left: 0% !important; }

.l-p-5 {
  left: 5% !important; }

.l-p-10 {
  left: 10% !important; }

.l-p-20 {
  left: 20% !important; }

.l-p-25 {
  left: 25% !important; }

.l-p-30 {
  left: 30% !important; }

.l-p-40 {
  left: 40% !important; }

.l-p-50 {
  left: 50% !important; }

.l-p-100 {
  left: 100% !important; }

.l-p-155 {
  left: 150% !important; }

.l-p-200 {
  left: 200% !important; }

.l-p-250 {
  left: 250% !important; }

.l-p-300 {
  left: 300% !important; }

.cursor-pointer {
  cursor: pointer !important; }

.pos-absolute {
  position: absolute !important; }

.pos-absolute-all {
  position: absolute !important;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0; }

.zindex-0 {
  z-index: 0 !important; }

.zindex-1 {
  z-index: 1 !important; }

.zindex-2 {
  z-index: 2 !important; }

.zindex-1041 {
  z-index: 1041 !important; }

.map-js-height .map-block {
  position: relative;
  overflow: hidden; }

.blue-badge .ant-badge-count {
  background-color: #0057ff;
  color: #fff; }

.w-fill {
  width: -webkit-fill-available; }

.inset-top {
  box-shadow: 0 7px 9px -7px #d9d9d9 inset; }

.maxWidth-container {
  max-width: 1180px;
  width: 100%;
  display: flex;
  flex-direction: column;
  margin-right: auto;
  margin-left: auto;
  padding: 5em 20px 5em 20px;
  position: relative; }

.lh-27 {
  line-height: 27px; }

.lh-35 {
  line-height: 35px; }

@media (max-width: 576px) {
  .hidden-xs {
    display: none !important; }
  .xs-p-10 {
    padding: 10px !important; } }

.shown-sm {
  display: none !important; }

@media (max-width: 480px) {
  .shown-sm {
    display: block !important; }
  .hidden-sm {
    display: none !important; }
  .sm-p-10 {
    padding: 10px !important; } }

.shown-md {
  display: none !important; }
  @media (max-width: 960px) {
    .shown-md {
      display: block !important; } }

@media (max-width: 960px) {
  .hidden-md {
    display: none !important; }
  .md-pr-10 {
    padding-right: 10px !important; }
  .md-p-10 {
    padding: 10px !important; }
  .md-p-20 {
    padding: 20px !important; } }

@media (max-width: 1200px) {
  .hidden-lg {
    display: none !important; }
  .lg-pr-10 {
    padding-right: 10px !important; }
  .lg-p-25 {
    padding-right: 25px !important; } }

@media (min-width: 1201px) {
  .xl-pr-10 {
    padding-right: 10px !important; } }

.antd-alert-medium .ant-alert-message {
  font-size: 16px !important; }

/* IE10+ CSS */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .ant-alert {
    min-width: 100% !important;
    margin: auto 0 !important; } }

.gap-16 {
  gap: 16px; }

.gap-20 {
  grid-gap: 20px; }

.gap-24 {
  gap: 24px; }

.header-container .mobile-logo {
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer; }
  .header-container .mobile-logo span {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    margin: 0px !important; }
    .header-container .mobile-logo span svg {
      font-size: 20px;
      color: white !important;
      padding: 8px;
      background-color: #ffffff33;
      height: 34px;
      width: 34px;
      border-radius: 50%; }

.header-container .name-container {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  cursor: pointer; }
  .header-container .name-container .ant-avatar {
    border: 1px solid white;
    box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.3); }
  .header-container .name-container:hover .ant-avatar {
    border: 1.5px solid #0057ff;
    box-shadow: 0px 2px 15px 0px rgba(0, 0, 0, 0.3); }

.ant-layout-header {
  position: fixed;
  width: calc(100vw - 80px);
  padding-left: 15px !important;
  flex-direction: row;
  flex-wrap: nowrap;
  display: flex;
  align-items: center;
  min-height: 4.286rem;
  padding: 0 0.8rem 0 1rem !important;
  background-color: #0057ff !important;
  z-index: 2;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); }

ant-menu-item:hover,
.ant-menu-item-active,
.ant-menu:not(.ant-menu-inline) .ant-menu-submenu-open,
.ant-menu-submenu-active,
.ant-menu-submenu-title:hover {
  color: #0057ff; }

.ant-menu-horizontal > .ant-menu-submenu-open,
.ant-menu-horizontal > .ant-menu-item-selected,
.ant-menu-horizontal > .ant-menu-submenu-selected {
  color: #0057ff;
  border-bottom: 2px solid #0057ff; }
  .ant-menu-horizontal > .ant-menu-submenu-open:hover,
  .ant-menu-horizontal > .ant-menu-item-selected:hover,
  .ant-menu-horizontal > .ant-menu-submenu-selected:hover {
    color: #0057ff;
    border-bottom: 2px solid #0057ff; }

.ant-menu-item:hover,
.ant-menu-item-active,
.ant-menu:not(.ant-menu-inline) .ant-menu-submenu-open,
.ant-menu-submenu-active,
.ant-menu-submenu-title:hover {
  color: #0057ff; }

.ant-menu-submenu-title {
  padding: 0 1rem; }

.ant-menu-submenu {
  top: 3px; }

.nav-link {
  display: initial;
  color: inherit; }

.ant-list-footer {
  padding-left: 1rem;
  padding-right: 1rem; }

.ant-avatar {
  color: #0057ff;
  background-color: #ecf2fe; }

.caret-icon {
  font-size: 11px;
  margin-left: 5px;
  margin-right: 0px; }

.icon-menu {
  height: 100px; }

.ant-menu-submenu-title .anticon {
  margin-right: 0px; }

.ant-menu-submenu-popup::before {
  position: absolute;
  background-color: red;
  top: -7px;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0.0001;
  content: ' '; }

.ant-menu-submenu-popup > .ant-menu {
  background-color: #fff;
  border-radius: 5px;
  width: 240px;
  box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.2); }

.ant-menu-item .anticon,
.ant-menu-submenu-title .anticon {
  min-width: 14px;
  margin-right: 0px;
  transition: font-size 0.15s cubic-bezier(0.215, 0.61, 0.355, 1) 0s, margin 0.3s cubic-bezier(0.645, 0.045, 0.355, 1) 0s; }

.anticon-menu-unfold {
  font-size: 18px;
  margin-left: 10px; }

.anticon-menu-fold {
  font-size: 18px;
  margin-left: 10px; }

.ant-badge-count,
.ant-badge-dot,
.ant-badge .ant-scroll-number-custom-component {
  position: absolute;
  bottom: 0px;
  right: -5px; }

.adminname-container {
  display: inline-block; }

.ant-menu-vertical.ant-menu-sub,
.ant-menu-vertical-left.ant-menu-sub,
.ant-menu-vertical-right.ant-menu-sub {
  min-width: 200px;
  padding: 0;
  border-right: 0;
  transform-origin: 0 0;
  margin-right: 10px; }

.mobile-header {
  display: none; }

.release-information-container {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  background-color: #fff;
  box-shadow: 2px 2px 19px -2px rgba(0, 0, 0, 0.15); }
  .release-information-container .release-information-title {
    flex: 1;
    height: 18px;
    font-size: 14px;
    font-weight: 800;
    line-height: 18px;
    margin-left: 5px; }
  .release-information-container .release-date {
    padding: 5px;
    background-color: #ecf2fe;
    border-radius: 5%; }
  .release-information-container .release-platform-item {
    padding: 10px;
    border-radius: 50%;
    background-color: #ecf2fe;
    display: flex;
    align-items: 'center';
    justify-content: center; }

.ant-menu-dark .ant-menu-inline.ant-menu-sub {
  background: transparent !important; }

.logo-container-mobile {
  background-color: #0057ff;
  padding: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px; }
  .logo-container-mobile img {
    height: 40px; }

.body-mobile {
  margin: 10px; }

.ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {
  background-color: #ecf2fe; }

.ant-menu-item-selected {
  color: #0057ff; }

.ant-menu-inline .ant-menu-item::after {
  border-right: 3px solid #0057ff; }

.ant-menu-item .anticon.draw-icon-mobile {
  margin-right: 10px; }
  .ant-menu-item .anticon.draw-icon-mobile svg {
    font-size: 18px; }

.ant-menu-submenu-title .anticon.draw-icon-mobile {
  margin-right: 10px; }
  .ant-menu-submenu-title .anticon.draw-icon-mobile svg {
    font-size: 18px; }

.ant-menu-submenu-inline
> .ant-menu-submenu-title:hover
.ant-menu-submenu-arrow::after {
  background: linear-gradient(to right, #0057ff, #0057ff); }

.ant-menu-submenu-inline
> .ant-menu-submenu-title:hover
.ant-menu-submenu-arrow::before {
  background: linear-gradient(to right, #0057ff, #0057ff); }

.ant-menu-inline .ant-menu-item {
  width: 100%; }

.ant-menu-inline .ant-menu-submenu-title {
  width: 100%; }

.ant-popover-inner-content {
  padding: 0px; }

.menus-container .head-container {
  background-color: #0057ff;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  display: flex;
  align-items: center;
  padding: 15px; }
  .menus-container .head-container .avt-container .ant-avatar {
    border: 1px solid white; }

.ant-menu-submenu-vertical > .ant-menu-submenu-title .ant-menu-submenu-arrow,
.ant-menu-submenu-vertical-left
> .ant-menu-submenu-title
.ant-menu-submenu-arrow,
.ant-menu-submenu-vertical-right
> .ant-menu-submenu-title
.ant-menu-submenu-arrow,
.ant-menu-submenu-inline > .ant-menu-submenu-title .ant-menu-submenu-arrow {
  right: 22px !important;
  z-index: 1 !important; }

.menu-avatar-container {
  position: absolute;
  background: linear-gradient(340deg, #245cc3 0%, #276ef1 50%, #276ef1 100%);
  background: #0057ff;
  z-index: 999;
  left: 0;
  right: 0;
  bottom: 0;
  min-width: 230px; }

.sider {
  display: flex; }
  .sider-container {
    background-color: #0057ff !important;
    z-index: 4;
    min-width: 80px !important;
    max-width: 80px !important;
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    flex: 1;
    transition: all 0.2s;
    position: relative; }
    .sider-container .sub-display {
      display: block;
      overflow: hidden;
      padding-top: 10px; }
    .sider-container .header-container {
      z-index: 1;
      padding: 15px;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 75px; }
      .sider-container .header-container img {
        z-index: 1; }
      .sider-container .header-container .close-button {
        background: #0057ff !important;
        border: 1px solid rgba(255, 255, 255, 0.3) !important;
        border-radius: 14px;
        height: 42px !important;
        width: 42px !important;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center; }
        .sider-container .header-container .close-button svg {
          font-size: 20px; }
        .sider-container .header-container .close-button:hover {
          box-shadow: 0px 1px 10px rgba(173, 175, 187, 0.5);
          background-color: #0044c7 !important; }
    .sider-container .menus-container {
      padding: 15px;
      overflow-x: hidden;
      overflow-y: auto; }
      .sider-container .menus-container::-webkit-scrollbar-track {
        background-color: transparent; }
      .sider-container .menus-container::-webkit-scrollbar {
        width: 2px; }
      .sider-container .menus-container::-webkit-scrollbar-thumb {
        background-color: rgba(0, 0, 0, 0.15);
        margin-right: 10px; }
      .sider-container .menus-container.controlPanel-disabled {
        background: #717171 !important; }
      .sider-container .menus-container .menu-item {
        display: flex;
        align-items: center;
        margin-bottom: 15px;
        border-radius: 14px;
        border: 1px solid rgba(255, 255, 255, 0.08);
        background: rgba(255, 255, 255, 0.08);
        cursor: pointer;
        position: relative;
        font-style: normal;
        z-index: 1;
        color: #fff;
        min-height: 50px;
        padding-right: 10px; }
        .sider-container .menus-container .menu-item .over-container {
          display: flex;
          align-items: center;
          overflow: hidden;
          flex: 1; }
          .sider-container .menus-container .menu-item .over-container .menu-icon {
            height: 48px;
            min-width: 48px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 22px; }
          .sider-container .menus-container .menu-item .over-container .menu-text {
            min-width: 120px;
            flex: 1; }
        .sider-container .menus-container .menu-item:hover {
          background: rgba(255, 255, 255, 0.3); }
        .sider-container .menus-container .menu-item.active {
          background: rgba(255, 255, 255, 0.3);
          color: #fff !important;
          border: 1px solid rgba(255, 255, 255, 0.5); }
          .sider-container .menus-container .menu-item.active::before {
            content: '';
            width: 4px;
            background: #ecf2fe;
            position: absolute;
            display: block;
            left: -15px;
            top: 12px;
            bottom: 12px;
            border-top-right-radius: 4px;
            border-bottom-right-radius: 4px; }
          .sider-container .menus-container .menu-item.active:hover {
            background: rgba(255, 255, 255, 0.4); }
        .sider-container .menus-container .menu-item.subopen {
          background: rgba(255, 255, 255, 0.3);
          margin-bottom: 0; }
        .sider-container .menus-container .menu-item.sub {
          margin-left: 30px;
          padding-left: 30px;
          z-index: 0;
          min-height: 42px;
          padding: 10px;
          margin-bottom: 10px; }
          .sider-container .menus-container .menu-item.sub::before {
            content: '';
            position: absolute;
            left: -20px;
            height: 60px;
            width: 20px;
            top: -35px;
            border-left: 2px solid rgba(255, 255, 255, 0.3);
            border-bottom-left-radius: 7px;
            border-bottom-width: 2px;
            border-bottom-color: rgba(255, 255, 255, 0.3);
            border-bottom-style: solid;
            background: transparent !important; }
    .sider-container.toggled {
      max-width: 240px !important;
      min-width: 240px !important; }
      .sider-container.toggled .header-container {
        align-items: center;
        justify-content: space-between; }
        .sider-container.toggled .header-container .close-button {
          border-radius: 12px;
          background: rgba(255, 255, 255, 0.3) !important;
          height: 32px !important;
          width: 32px !important; }
          .sider-container.toggled .header-container .close-button svg {
            font-size: 18px; }
          .sider-container.toggled .header-container .close-button:hover {
            background: rgba(255, 255, 255, 0.4) !important;
            background-color: #0044c7; }
    .sider-container::before {
      content: '';
      background-image: url("/assets/images/back.jpg");
      background-repeat: no-repeat, repeat;
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      top: 0;
      z-index: 0; }
    @media (max-width: 767px) {
      .sider-container {
        max-width: 240px;
        min-width: 240px;
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        transform: translate3d(-245px, 0, 0);
        transition: transform 0.3s cubic-bezier(0, 0.52, 0, 1); }
        .sider-container.visible {
          transform: translate3d(0px, 0, 0); } }
  .sider-overlay {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 3; }
  @media (max-width: 767px) {
    .sider {
      width: 0 !important; } }

.pop-menu {
  padding: 10px;
  margin-bottom: -10px; }
  .pop-menu-item {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    border-radius: 14px;
    border: 1px solid #e8e8e8;
    background: #f9fafc;
    cursor: pointer;
    position: relative;
    font-style: normal;
    z-index: 1;
    color: #182747;
    min-height: 40px;
    padding: 0 10px; }
    .pop-menu-item .over-container {
      display: flex;
      align-items: center;
      overflow: hidden;
      flex: 1; }
      .pop-menu-item .over-container .menu-text {
        min-width: 120px;
        flex: 1; }
    .pop-menu-item:hover {
      background: rgba(0, 0, 0, 0.1); }
    .pop-menu-item.active {
      background: rgba(0, 87, 255, 0.1);
      border: 1px solid rgba(0, 87, 255, 0.3); }
      .pop-menu-item.active::before {
        content: '';
        width: 4px;
        background: #0057ff;
        position: absolute;
        display: block;
        left: -10px;
        top: 12px;
        bottom: 12px;
        border-top-right-radius: 4px;
        border-bottom-right-radius: 4px; }
      .pop-menu-item.active:hover {
        background: rgba(0, 0, 0, 0.15); }

.content-layout .white-back {
  background-color: white;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); }

.content-layout .round-select .ant-select .ant-select-selector {
  border-radius: 20px !important; }

.content-layout .ant-input-affix-wrapper.custom-search {
  border-radius: 20px; }

.content-layout .ant-page-header-heading {
  flex-wrap: wrap !important; }

.content-layout .ant-page-header-heading-left {
  align-items: flex-start !important;
  overflow: visible !important; }

.content-layout .ant-page-header-heading-title {
  overflow: visible !important; }

.content-layout .custom-filter-body {
  width: 250px;
  max-width: 250px; }

.content-layout .ant-page-header-heading-extra {
  overflow: hidden; }

.content-layout .right-side {
  display: flex;
  padding: 7px 15px;
  min-height: 58px;
  gap: 15px; }
  .content-layout .right-side .result-container {
    height: 32px;
    margin: 5px;
    color: black;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid #d0d0d0;
    padding: 0px 10px; }
  .content-layout .right-side .notification-button {
    background-color: #ecf2fe;
    border-width: 0; }
    .content-layout .right-side .notification-button svg {
      color: #0057ff; }
    .content-layout .right-side .notification-button:hover {
      opacity: 0.8; }
  .content-layout .right-side .name-container {
    cursor: pointer; }
    .content-layout .right-side .name-container .ant-avatar {
      height: 40px;
      width: 40px;
      border: 2px solid white;
      box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.3); }
    .content-layout .right-side .name-container:hover .ant-avatar {
      border: 2px solid #0057ff;
      box-shadow: 0px 2px 15px 0px rgba(0, 0, 0, 0.3); }
  .content-layout .right-side .release-information-container {
    max-width: 550px; }

.content-layout .bottom-filter-container {
  display: flex;
  padding: 0 15px;
  overflow-x: auto;
  overflow-y: hidden;
  -ms-overflow-style: none;
  /* IE and Edge */
  scrollbar-width: none;
  /* Firefox */
  min-height: 48px; }
  .content-layout .bottom-filter-container::-webkit-scrollbar {
    display: none; }
  .content-layout .bottom-filter-container .ant-tabs {
    overflow: visible; }
  .content-layout .bottom-filter-container .ant-tabs-tab {
    margin: 0; }
  .content-layout .bottom-filter-container .ant-tabs-nav {
    min-height: 48px; }

.content-layout .left-side {
  height: 35px;
  align-items: center;
  display: flex;
  margin-left: 15px;
  margin-top: 10px; }

.content-layout .custom-tab {
  overflow: hidden;
  display: flex;
  flex-wrap: wrap; }
  .content-layout .custom-tab .small-button {
    border: none;
    outline: none;
    cursor: pointer;
    transition: 0.3s;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    width: auto;
    flex: 1;
    padding: 5px; }
    .content-layout .custom-tab .small-button .title {
      font-weight: 500;
      font-size: 15px; }
    .content-layout .custom-tab .small-button.active {
      border-bottom: 2px solid #0057ff; }
    .content-layout .custom-tab .small-button:hover {
      background-color: #f9fafc; }
  .content-layout .custom-tab .button {
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    transition: 0.3s;
    font-size: 15px;
    height: 56px;
    padding: 15px 20px;
    padding-top: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 2px solid transparent; }
    .content-layout .custom-tab .button .title {
      font-weight: 500;
      font-size: 15px; }
    .content-layout .custom-tab .button.active {
      border-bottom: 2px solid #0057ff; }
      .content-layout .custom-tab .button.active:hover {
        border-bottom: 2px solid #0057ff; }
        .content-layout .custom-tab .button.active:hover .title {
          font-weight: 600; }
    .content-layout .custom-tab .button:hover {
      background-color: #f9fafc;
      border-bottom: 2px solid #e8e8e8; }

.content-layout .container {
  padding: 15px;
  display: flex;
  flex-direction: column; }
  .content-layout .container .radius10 {
    display: flex;
    flex-direction: column; }
    .content-layout .container .radius10 .ant-card-body {
      padding: 0px;
      border-radius: 5px; }

.ant-collapse.site-collapse-custom-collapse {
  background: white;
  border-radius: 2px;
  border: 0px;
  overflow: hidden !important; }

.ant-collapse > .ant-collapse-item:last-child,
.ant-collapse > .ant-collapse-item:last-child > .ant-collapse-header {
  border-radius: 0 0 0 0 !important; }

.ant-popover {
  z-index: 1000 !important; }

div .ant-popover-inner-content {
  padding: 0px; }
  div .ant-popover-inner-content .custom-filter-body {
    min-width: 200px; }
  div .ant-popover-inner-content .custom-filter-body1 {
    min-width: 200px; }
    div .ant-popover-inner-content .custom-filter-body1 .custom-menu-item {
      display: flex;
      align-items: center;
      border-bottom: 1px solid #f0f0f0;
      padding: 10px !important;
      color: black; }
      div .ant-popover-inner-content .custom-filter-body1 .custom-menu-item:hover {
        color: #0057ff; }
      div .ant-popover-inner-content .custom-filter-body1 .custom-menu-item .icon {
        margin-right: 10px !important;
        font-size: 15px !important; }
      div .ant-popover-inner-content .custom-filter-body1 .custom-menu-item.noline {
        border-bottom: 0px solid #f0f0f0 !important; }

.ant-picker.custom-filter-picker {
  width: 100%; }

.ant-page-header {
  box-sizing: border-box;
  color: rgba(0, 0, 0, 0.65);
  font-size: 14px;
  line-height: 1.5715;
  font-feature-settings: 'tnum';
  position: relative;
  background-color: white;
  margin: 0px;
  font-variant: tabular-nums;
  list-style: none;
  padding: 10px 15px; }

.back-light {
  background-color: #fafafa; }

.active-badge .ant-badge-count {
  background-color: #2eca73;
  margin-left: 5px; }

.disabled-badge .ant-badge-count {
  background-color: #fff !important;
  color: #999 !important;
  box-shadow: 0 0 0 1px #d9d9d9 inset !important;
  margin-left: 5px; }

.chat-layout {
  right: 0px;
  bottom: 0px;
  position: fixed;
  z-index: auto;
  display: flex; }
  .chat-layout .chat-end {
    display: flex;
    align-items: flex-end; }

.land-container {
  display: flex;
  justify-content: center;
  width: 100%;
  background-color: white; }
  .land-container .cover {
    width: 100%; }
  .land-container .container {
    max-width: 1200px;
    width: 100%; }

.admin-layout-container {
  background-color: #f9fafc !important;
  min-height: 100vh !important; }
  .admin-layout-container .mobile-toggle {
    display: none;
    position: absolute;
    left: 15px;
    top: 0;
    height: 64px;
    align-items: center;
    justify-content: center;
    z-index: 2;
    cursor: pointer; }
    .admin-layout-container .mobile-toggle span {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
      margin: 0px !important; }
      .admin-layout-container .mobile-toggle span svg {
        font-size: 20px;
        color: #0057ff !important;
        padding: 8px;
        background-color: #ecf2fe;
        height: 34px;
        width: 34px;
        border-radius: 50%; }

.ant-tabs-bar {
  margin: 0px;
  border-bottom: 1px solid #f0f0f0;
  outline: none;
  transition: padding 0.3s cubic-bezier(0.645, 0.045, 0.355, 1) 0s; }

.filter-container {
  max-height: 450px;
  overflow-x: auto; }

body {
  background-color: #f9f9f9 !important; }

.ant-layout {
  background-color: #f9f9f9 !important; }

.ant-input[disabled] {
  color: #bfbfbf !important; }

input::-webkit-input-placeholder {
  color: #bfbfbf !important; }

input::-moz-placeholder {
  color: #bfbfbf !important; }

input:-ms-input-placeholder {
  color: #bfbfbf !important; }

input::-ms-input-placeholder {
  color: #bfbfbf !important; }

input::placeholder {
  color: #bfbfbf !important; }

.ant-picker-input > input[disabled] {
  color: #bfbfbf !important; }

.ant-select-disabled.ant-select-single:not(.ant-select-customize-input)
.ant-select-selector {
  color: rgba(0, 0, 0, 0.9) !important; }

.ant-modal-header {
  color: #fff !important;
  background: linear-gradient(90deg, #245cc3 0%, #276ef1 50%, #276ef1 100%) !important; }

.ant-modal-title {
  color: rgba(255, 255, 255, 0.85) !important; }

.submenu-custom {
  width: 200px !important; }

.ant-page-header-footer {
  margin-top: 0px !important; }

.phone-preview4 {
  background-color: rgba(255, 255, 255, 0.7);
  width: 200px;
  position: absolute;
  top: 270px;
  right: 60px;
  border-radius: 5px;
  padding: 5px;
  padding-left: 10px;
  padding-right: 10px;
  overflow-wrap: break-word;
  word-wrap: break-word; }
  .phone-preview4 .notititle-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: pre;
    font-size: 13px;
    color: black; }
  .phone-preview4 .notititle2-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: pre;
    font-size: 12px;
    opacity: 0.7;
    min-height: 0px;
    min-width: 0px;
    max-height: 75px;
    color: black; }

.ant-message {
  z-index: 999999; }

.custom-scroll {
  position: relative; }
  .custom-scroll::-webkit-scrollbar-track {
    background-color: transparent; }
  .custom-scroll::-webkit-scrollbar {
    height: 2px; }
  .custom-scroll::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.15);
    margin-right: 10px; }
  .custom-scroll.controlPanel-disabled {
    background: #717171 !important; }

.adminq-tag {
  font-size: 20px;
  font-weight: 600;
  margin-right: 10px;
  color: #0057ff;
  margin-bottom: 0px; }

.admina-tag {
  font-size: 20px;
  font-weight: 600;
  margin-right: 10px;
  color: #2eca73;
  margin-bottom: 0px; }

.notification {
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 106px);
  box-shadow: 0 1px 7px 0 rgba(0, 0, 0, 0.2);
  background-color: #fff;
  max-width: 400px;
  width: 100%;
  border-radius: 10px;
  overflow: hidden; }
  .notification-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 15px;
    border-bottom: 1px solid #f0f0f0; }
    .notification-header h1 {
      font-size: 16px;
      color: #182747;
      font-weight: bold;
      margin-bottom: 0; }
    .notification-header .close-button {
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #f9fafc; }
      .notification-header .close-button svg {
        font-size: 18px; }
    .notification-header .read-button span {
      text-decoration: underline; }
  .notification-filter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 15px;
    border-bottom: 1px solid #f0f0f0; }
    .notification-filter .read-button span {
      text-decoration: underline; }
  .notification-body {
    flex: 1;
    padding: 15px;
    overflow-x: hidden;
    overflow-y: scroll; }
    .notification-body .notification-item {
      cursor: pointer;
      overflow: hidden;
      position: relative;
      display: flex;
      flex: 1;
      background-color: #fff;
      gap: 12px;
      border: 1px solid #f0f0f0;
      border-radius: 10px;
      padding: 10px; }
      .notification-body .notification-item-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex: 1; }
        .notification-body .notification-item-title h1 {
          flex: 1;
          font-size: 14px;
          color: #182747;
          margin-bottom: 0px;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          /* number of lines to show */
          line-clamp: 1;
          -webkit-box-orient: vertical; }
        .notification-body .notification-item-title span {
          font-size: 14px;
          color: #aaaaaa; }
      .notification-body .notification-item p {
        margin-bottom: 0;
        font-size: 14px;
        color: #aaaaaa;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        /* number of lines to show */
        line-clamp: 1;
        -webkit-box-orient: vertical; }
      .notification-body .notification-item:hover {
        background-color: #f9fafc; }
      .notification-body .notification-item.new {
        background-color: #f9fafc;
        box-shadow: 0 1px 7px 0 rgba(0, 0, 0, 0.2);
        border: 1px solid #f9fafc; }
        .notification-body .notification-item.new h1 {
          font-weight: bold; }
        .notification-body .notification-item.new p {
          color: #182747;
          font-weight: bold; }
        .notification-body .notification-item.new::before {
          content: '';
          position: absolute;
          background-color: #0057ff;
          left: 0;
          top: 0;
          bottom: 0;
          width: 6px; }
        .notification-body .notification-item.new:hover {
          background-color: #fff; }
    .notification-body .ant-list-items {
      display: flex;
      flex-direction: column;
      gap: 15px; }
  @media (max-width: 767px) {
    .notification {
      max-height: calc(100vh - 166px); } }

.notification-detail {
  word-break: break-all; }
  .notification-detail-title {
    font-size: 18px;
    color: #182747;
    font-weight: bold;
    margin-bottom: 10px; }
  .notification-detail-date {
    font-size: 14px;
    color: #aaaaaa;
    margin-top: 10px;
    margin-bottom: 0; }
  .notification-detail-content {
    font-size: 16px;
    color: #182747; }

.ant-dropdown {
  z-index: 1000 !important; }

.settings-tab .ant-tabs-nav {
  padding-left: 15px !important;
  background-color: white;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); }

.settings-tab .ant-tabs-content-holder {
  margin-left: 15px;
  margin-right: 15px; }

.language-tab .ant-tabs-nav {
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0) !important; }

.settings-master .ant-layout-has-sider {
  background: #f7f7f7 !important; }
  .settings-master .ant-layout-has-sider .ant-layout-sider {
    background: #f7f7f7 !important; }
  .settings-master .ant-layout-has-sider .ant-layout {
    background: #f7f7f7 !important; }

.grid-container {
  margin: -7px;
  margin-top: -8px;
  padding-bottom: 15px; }

.step2-list-item {
  padding: 5px 10px;
  cursor: grab; }
  .step2-list-item:hover {
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1); }

.label-left .ant-form-item .ant-form-item-label {
  text-align: left !important; }

.price-card-container {
  border-radius: 5px !important;
  display: flex;
  flex-direction: column;
  border: 1px solid #f0f0f0 !important; }
  .price-card-container:hover {
    box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.2);
    background: linear-gradient(340deg, #27b3db, #276ef1) !important; }
    .price-card-container:hover .title-text {
      color: #fff !important; }
    .price-card-container:hover .price-text {
      color: #fff !important; }
    .price-card-container:hover .list-text {
      color: #fff !important; }
  .price-card-container.select {
    cursor: initial;
    background: linear-gradient(340deg, #27b3db, #276ef1) !important; }
    .price-card-container.select .title-text {
      color: #fff !important; }
    .price-card-container.select .price-text {
      color: #fff !important; }
    .price-card-container.select .list-text {
      color: #fff !important; }
    .price-card-container.select .checked-icon {
      position: absolute;
      top: -10px;
      right: -10px;
      color: #2eca73;
      background-color: #fff;
      border-radius: 50%;
      border: 2px solid #fff; }
  .price-card-container.disabled {
    cursor: initial;
    background: linear-gradient(340deg, white, #f3f3f3) !important; }
    .price-card-container.disabled .title-text {
      color: black !important; }
    .price-card-container.disabled .price-text {
      color: black !important; }
    .price-card-container.disabled .list-text {
      color: black !important; }

.mail-menu-item {
  height: 45px !important;
  padding: 3px 15px !important; }
  .mail-menu-item.sub-item {
    padding: 3px 25px !important; }

.mail-menu-subitem {
  margin-left: -10px !important; }

.wysiwyg-editor-toolbar-input {
  border: 1px solid #f1f1f1 !important;
  right: 0px !important;
  position: absolute;
  padding: 3px !important; }

.wysiwyg-editor-toolbar-array {
  border: 0px solid #f1f1f1 !important;
  right: 0px !important;
  position: absolute;
  margin-top: -30px !important;
  padding: 4px !important; }

.wysiwyg-editor-main-input {
  border: 1px solid #f1f1f1 !important;
  padding: 4px 10px 4px 10px;
  width: 95% !important;
  margin-right: 40px !important; }
  .wysiwyg-editor-main-input .public-DraftStyleDefault-block {
    margin-top: 0px !important;
    margin-bottom: 0px !important; }

.wysiwyg-editor-content-input {
  border: 1px solid #f1f1f1 !important;
  padding: 4px 10px 4px 10px;
  width: 100% !important;
  margin-right: 40px !important; }
  .wysiwyg-editor-content-input .public-DraftStyleDefault-block {
    margin-top: 0px !important;
    margin-bottom: 0px !important; }

.wysiwyg-editor-content-array {
  border: 1px solid #f1f1f1 !important;
  padding: 4px 10px 4px 10px;
  min-height: 600px !important;
  word-break: break-all; }
  .wysiwyg-editor-content-array .public-DraftStyleDefault-block {
    margin-top: 0px !important;
    margin-bottom: 0px !important; }

.wysiwyg-editor-main-email {
  border: 1px solid #f1f1f1 !important;
  padding: 4px 10px 4px 10px; }
  .wysiwyg-editor-main-email .public-DraftStyleDefault-block {
    margin-top: 0px !important;
    margin-bottom: 0px !important; }

.wysiwyg-editor-main-array {
  border: 1px solid #f1f1f1 !important;
  padding: 4px 10px 4px 10px;
  min-height: 80px !important; }
  .wysiwyg-editor-main-array .public-DraftStyleDefault-block {
    margin-top: 0px !important;
    margin-bottom: 0px !important; }

.ant-popover-message {
  padding: 10px;
  padding-bottom: 0px; }

.ant-popover-buttons {
  padding: 10px;
  padding-top: 10px; }

.phone-preview3 {
  background-color: rgba(255, 255, 255, 0.7);
  width: 160px;
  position: absolute;
  top: 243px;
  right: 52px;
  border-radius: 5px;
  padding: 5px;
  padding-left: 10px;
  padding-right: 10px;
  overflow-wrap: break-word;
  word-wrap: break-word; }
  .phone-preview3 .notititle-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: pre;
    font-size: 13px;
    color: black; }
  .phone-preview3 .notititle2-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: pre;
    font-size: 12px;
    opacity: 0.7;
    min-height: 0px;
    min-width: 0px;
    max-height: 75px;
    color: black; }

.form-title-fit .ant-form-item-label label {
  white-space: break-spaces; }

.multi-template-add-default-modal .ant-form .ant-checkbox-group .ant-checkbox-group-item {
  min-width: 50px !important; }

.multi-template-add-default-modal .ant-form label {
  font-size: 12px !important; }
  .multi-template-add-default-modal .ant-form label .ant-checkbox + span {
    padding-right: 5px !important;
    padding-left: 3px !important; }

.multi-template-add-default-modal .ant-form .ant-table.ant-table-middle .ant-table-tbody > tr > td {
  padding: 5px 5px !important; }

.masterdata-container {
  padding: 0 15px 15px 15px; }

.master-container {
  margin-bottom: 0;
  position: relative; }
  .master-container .master-table {
    overflow: auto;
    height: calc(100vh - 240px);
    padding: 0 15px 15px 0;
    margin-left: 15px;
    position: relative; }
    .master-container .master-table tr:nth-child(2n) td {
      background-color: transparent !important;
      padding: 0 !important; }
    .master-container .master-table .ant-table thead > tr > th,
    .master-container .master-table .ant-table tbody > tr > td,
    .master-container .master-table .ant-table tfoot > tr > th,
    .master-container .master-table .ant-table tfoot > tr > td {
      padding: 0 !important;
      background-color: transparent !important;
      border: 0 solid transparent !important;
      background-color: #fff !important; }
    .master-container .master-table .ant-table tbody > tr:not(:last-child) > td.row-line {
      border-bottom: 1px solid #e8e8e8 !important; }
    .master-container .master-table .multi-template-add-default-modal
.ant-form
.ant-table.ant-table-middle
.ant-table-tbody
> tr
> td {
      padding: 0 !important; }
    .master-container .master-table .ant-table-cell {
      padding: 0 !important; }
    .master-container .master-table .ant-table thead {
      position: sticky;
      top: 0;
      z-index: 1;
      background-color: #fff; }
    .master-container .master-table .header {
      padding: 5px;
      text-align: center;
      font-size: 14px;
      background-color: #0057ff;
      border-radius: 12px 12px 0px 0px;
      color: #fff;
      margin: 0 5px;
      margin-top: 20px; }
    .master-container .master-table .row-title {
      margin-right: 20px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      padding-top: 20px;
      max-width: 173px;
      padding-bottom: 20px;
      min-height: 235px; }
      .master-container .master-table .row-title h1 {
        color: #182747;
        font-weight: bold;
        font-size: 14px;
        margin-bottom: 0; }
      .master-container .master-table .row-title p {
        color: #aaaaaa;
        margin-bottom: 0;
        font-size: 12px; }
      .master-container .master-table .row-title button {
        background-color: #ecf2fe !important; }
    .master-container .master-table .table-col {
      display: grid;
      padding: 0;
      justify-content: end; }
    .master-container .master-table .row-sub-title {
      min-width: 112px;
      max-width: 112px;
      margin: 5px 0;
      border: 1px solid #e8e8e8;
      border-radius: 12px 0px 0px 12px;
      flex: 1;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background-color: #f9fafc;
      height: 70px;
      font-weight: bold;
      color: #182747;
      margin-right: -5px; }
      .master-container .master-table .row-sub-title p {
        margin-bottom: 0; }
    .master-container .master-table .row-patterns {
      background-color: #ecf2fe;
      border-left: 2px solid #0057ff;
      border-right: 2px solid #0057ff;
      padding: 5px 10px;
      margin: 0 5px;
      min-height: 80px;
      display: flex;
      min-width: 283px; }
      .master-container .master-table .row-patterns-item-container {
        background-color: #fff;
        border: 1px solid #e8e8e8;
        border-radius: 4px;
        flex: 1;
        display: flex;
        overflow: hidden; }
        .master-container .master-table .row-patterns-item-container-content {
          display: flex;
          flex: 1;
          align-items: center;
          justify-content: center;
          color: #182747;
          font-size: 12px;
          text-align: center;
          border-bottom: 1px solid #e8e8e8;
          border-right: 1px solid #e8e8e8; }
        .master-container .master-table .row-patterns-item-container .ant-form-item-control-input {
          align-items: flex-start !important;
          height: 100% !important; }
        .master-container .master-table .row-patterns-item-container .ant-checkbox-group {
          flex: 1 !important;
          height: 100% !important;
          display: flex !important; }
        .master-container .master-table .row-patterns-item-container .ant-form-item-control-input-content {
          height: 100% !important; }
        .master-container .master-table .row-patterns-item-container .ant-form-item {
          width: 100% !important; }
        .master-container .master-table .row-patterns-item-container .multi-template-add-default-modal .ant-form label .ant-checkbox + span {
          padding-right: 0 !important;
          padding-left: 3px !important; }
        .master-container .master-table .row-patterns-item-container .ant-checkbox-wrapper {
          color: #182747 !important;
          font-size: 11px !important; }
    .master-container .master-table tbody > tr:last-child .row-patterns-last {
      border-bottom: 2px solid #0057ff;
      border-bottom-left-radius: 12px;
      border-bottom-right-radius: 12px;
      padding: 5px 10px 10px 10px !important; }
  .master-container .master-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px;
    border-top: 1px solid #e8e8e8;
    gap: 15px;
    flex-wrap: wrap; }
    .master-container .master-footer .ant-form-item-control-input {
      border: 1px solid #e8e8e8;
      border-radius: 4px;
      overflow: hidden !important; }
    .master-container .master-footer .ant-radio-group {
      display: flex; }
    .master-container .master-footer .ant-radio-wrapper {
      min-height: 32px !important;
      display: flex !important;
      align-items: center !important;
      margin-left: 10px !important;
      border-right: 1px solid #e8e8e8 !important;
      margin-right: 0 !important;
      color: #182747 !important; }
    .master-container .master-footer .container-row {
      display: flex;
      align-items: center;
      gap: 15px;
      flex-wrap: wrap; }
    .master-container .master-footer .ant-alert {
      padding: 5px 10px !important;
      font-size: 13px !important; }

.upload-100 .avatar-uploader .ant-upload {
  width: 100% !important; }

.containerPlan .ant-radio-wrapper {
  background-color: #fff;
  padding: 5px;
  border-radius: 5px;
  border: 1px solid #276ef1 !important; }
  .containerPlan .ant-radio-wrapper:hover {
    box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.2);
    background: linear-gradient(340deg, #27b3db, #276ef1) !important; }
    .containerPlan .ant-radio-wrapper:hover .title-text {
      color: #fff !important; }
    .containerPlan .ant-radio-wrapper:hover .price-text {
      color: #fff !important; }
    .containerPlan .ant-radio-wrapper:hover .list-text {
      color: #fff !important; }

.containerPlan .ant-radio-wrapper-checked {
  padding: 5px !important;
  cursor: initial;
  box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.2);
  background: linear-gradient(340deg, #27b3db, #276ef1) !important; }
  .containerPlan .ant-radio-wrapper-checked .title-text {
    color: #fff !important; }
  .containerPlan .ant-radio-wrapper-checked .price-text {
    color: #fff !important; }
  .containerPlan .ant-radio-wrapper-checked .list-text {
    color: #fff !important; }

.checkbox-border .ant-checkbox-inner {
  border-color: #000; }

.custom-scrollbar {
  max-height: 200px;
  overflow-y: auto;
  border-radius: 10px;
  scrollbar-width: thin;
  scrollbar-color: #888 #f1f1f1; }

.custom-scrollbar::-webkit-scrollbar {
  width: 8px; }

.custom-scrollbar::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px; }

.custom-scrollbar::-webkit-scrollbar-thumb {
  background-color: #888;
  border-radius: 10px; }

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #555; }

.source-csv-upload-validate-modal .source-csv-upload-validate-table .ant-table-container .ant-table-header .ant-table-thead .ant-table-column-has-sorters .ant-table-filter-column-title {
  padding-right: 25px !important; }

.source-csv-upload-validate-modal .source-csv-upload-validate-table .ant-table-container .ant-table-header .ant-table-thead .ant-table-column-sorters {
  padding: 0 !important; }

.source-csv-upload-validate-modal .source-csv-upload-validate-table .ant-table-container .ant-table-header .ant-table-thead > tr > th {
  padding: 5px !important; }

.source-csv-upload-validate-modal .source-csv-upload-validate-table .ant-table-container .ant-table-body::-webkit-scrollbar {
  width: 3px !important;
  transition: 0.3s !important;
  border-radius: 2px !important; }

.source-csv-upload-validate-modal .source-csv-upload-validate-table .ant-table-container .ant-table-body::-webkit-scrollbar-thumb {
  background-color: #d0d0d0 !important;
  position: absolute !important;
  right: 0px !important; }

.source-csv-upload-validate-modal .source-csv-upload-validate-table .ant-table-container .ant-table-body .ant-table-tbody > tr > td {
  padding: 5px !important; }

.source-csv-upload-history-modal .source-csv-upload-history-table .ant-table-container .ant-table-thead .ant-table-column-has-sorters {
  padding: 0 !important; }
  .source-csv-upload-history-modal .source-csv-upload-history-table .ant-table-container .ant-table-thead .ant-table-column-has-sorters .ant-table-filter-column-title {
    padding: 0 !important; }

.source-csv-upload-history-modal .source-csv-upload-history-table .ant-table-body {
  height: 360px !important;
  overflow-y: scroll;
  overflow-x: hidden;
  width: 100%; }
  .source-csv-upload-history-modal .source-csv-upload-history-table .ant-table-body::-webkit-scrollbar {
    width: 3px !important;
    transition: 0.3s !important;
    border-radius: 2px !important; }
  .source-csv-upload-history-modal .source-csv-upload-history-table .ant-table-body::-webkit-scrollbar-thumb {
    background-color: #d0d0d0 !important;
    position: absolute !important;
    right: 0px !important; }
  .source-csv-upload-history-modal .source-csv-upload-history-table .ant-table-body .ant-table-tbody > tr:first-child > td {
    padding: 0px !important; }
  .source-csv-upload-history-modal .source-csv-upload-history-table .ant-table-body .ant-table-tbody > tr > td {
    padding: 5px !important; }

.source-csv-upload-check-modal .source-csv-upload-check-table .ant-table-container .ant-table-header .ant-table-thead .ant-table-column-has-sorters .ant-table-filter-column-title {
  padding-right: 25px !important; }

.source-csv-upload-check-modal .source-csv-upload-check-table .ant-table-container .ant-table-header .ant-table-thead .ant-table-column-sorters {
  padding: 0 !important; }

.source-csv-upload-check-modal .source-csv-upload-check-table .ant-table-container .ant-table-header .ant-table-thead > tr > th {
  padding: 5px !important; }

.source-csv-upload-check-modal .source-csv-upload-check-table .ant-table-container .ant-table-body {
  height: 360px !important;
  overflow-y: scroll;
  overflow-x: hidden;
  width: 100%; }
  .source-csv-upload-check-modal .source-csv-upload-check-table .ant-table-container .ant-table-body::-webkit-scrollbar {
    width: 3px !important;
    transition: 0.3s !important;
    border-radius: 2px !important; }
  .source-csv-upload-check-modal .source-csv-upload-check-table .ant-table-container .ant-table-body::-webkit-scrollbar-thumb {
    background-color: #d0d0d0 !important;
    position: absolute !important;
    right: 0px !important; }
  .source-csv-upload-check-modal .source-csv-upload-check-table .ant-table-container .ant-table-body .ant-table-tbody > tr:first-child > td {
    padding: 0px !important; }
  .source-csv-upload-check-modal .source-csv-upload-check-table .ant-table-container .ant-table-body .ant-table-tbody > tr > td {
    padding: 5px !important; }

@media (max-width: 1280px) {
  .banner-container .image-container .mock-image {
    width: 650px !important;
    object-position: left 50% !important; } }

@media (max-width: 767px) {
  .header-container .adminname-container .name-container div p {
    display: none; }
  .header-container .mobile-logo {
    display: inline-block; }
  .header-container .toggle-container {
    display: none; }
  .header-container .ant-layout-header {
    width: 100vw; }
  .admin-layout-container {
    margin-left: 0px; }
    .admin-layout-container .mobile-toggle {
      display: flex; }
  .steps-action {
    left: 25px; }
  .mobile-header {
    display: inline-block; }
  .login-container .form-container {
    width: 100%; }
    .login-container .form-container .header-container {
      display: inline-block; }
    .login-container .form-container .containers {
      height: calc(100% - 66px) !important; }
  .home-container .company-header {
    height: 750px !important; }
    .home-container .company-header .color-overlay {
      background: linear-gradient(340deg, #27b3db, #276ef1) !important;
      text-align: center !important;
      width: 100%; }
      .home-container .company-header .color-overlay .dark-logo {
        display: none !important; }
      .home-container .company-header .color-overlay .white-logo {
        display: inline-block !important; }
      .home-container .company-header .color-overlay .response-100 {
        width: 100%; }
      .home-container .company-header .color-overlay h1 {
        color: #fff !important; }
      .home-container .company-header .color-overlay h2 {
        color: #fff !important;
        width: 100% !important;
        margin-bottom: 30px !important; }
      .home-container .company-header .color-overlay .icon-container {
        flex-wrap: wrap;
        align-items: center !important;
        justify-content: center !important; }
        .home-container .company-header .color-overlay .icon-container span {
          margin: 10px;
          margin-right: 5px !important; }
  .home-container .layout-container .webImgMd {
    display: none !important; }
  .home-container .layout-container .webImgSm {
    display: inline-block !important;
    width: 90%; }
  .home-container .layout-container .border-left-line {
    position: relative;
    margin-left: 0px !important; }
    .home-container .layout-container .border-left-line::before {
      content: '';
      height: 0px !important; }
  .home-container .layout-container .green-left {
    border-left: 0px solid #2eca73 !important; }
  .content-layout .left-side {
    padding-left: 45px; } }

@media (max-width: 1200px) {
  .login-container .form-container {
    width: 100%; } }

@media (max-width: 1190px) {
  .home-container .company-header .banner-container .slogan-container .slogan-text {
    font-size: 22px !important;
    line-height: 42px;
    color: #182747;
    font-weight: 600; } }

@media (max-width: 1170px) {
  .login-container .form-container {
    width: 100%; }
  .home-container .layout-container .romu-web-img {
    position: absolute;
    left: 625px !important;
    top: 80px !important; } }

@media (max-width: 1150px) {
  .home-container .layout-container .romu-web-img {
    position: absolute;
    left: 600px !important;
    top: 80px !important; }
  .home-container .about-title-container .about-info-container .about-info {
    padding: 20px 10px !important; }
    .home-container .about-title-container .about-info-container .about-info .about-title {
      font-size: 16px !important; } }

@media (max-width: 1100px) {
  .home-container .layout-container .romu-web-img {
    position: absolute;
    left: 575px !important;
    top: 80px !important; }
  .icon-container {
    display: flex;
    justify-content: center; }
    .icon-container span {
      font-size: 20px !important;
      color: '#000000' !important;
      padding: 12px 20px;
      background-color: #fff;
      border-radius: 40px;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
      margin-right: 20px !important;
      height: 65px !important; }
  .home-max-container h2 {
    font-size: 20px !important; } }

@media (max-width: 1080px) {
  .home-container .layout-container .romu-web-img {
    position: absolute;
    left: 500px !important;
    top: 80px !important; } }

@media (max-width: 1000px) {
  .about-image-container img {
    width: 110% !important; }
  .banner-container .image-container .mock-image {
    width: 100% !important;
    object-position: unset !important; } }

@media (max-width: 990px) {
  .home-container .layout-container .romu-web-img {
    display: none !important; } }

@media (max-width: 991px) {
  .home-container .layout-container .company-img {
    height: 350px !important; }
  .home-container .about-title-container .about-info-container {
    display: flex !important;
    flex-direction: row !important;
    padding-top: 30px !important; }
    .home-container .about-title-container .about-info-container .about-info {
      padding: 20px 30px !important;
      border-right: 1px solid #d0d0d0 !important;
      border-bottom: 0px solid #d0d0d0 !important;
      flex: 1 !important; }
      .home-container .about-title-container .about-info-container .about-info .about-title {
        font-size: 16px !important; }
      .home-container .about-title-container .about-info-container .about-info.end {
        border-right: 0px solid transparent !important; }
  .login-container .form-container {
    width: 100%; }
    .login-container .form-container .header-container {
      display: inline-block; }
    .login-container .form-container .containers {
      height: calc(100% - 66px) !important; }
  .home-container .company-header {
    height: auto !important; }
    .home-container .company-header .banner-container {
      padding-top: 66px !important; }
      .home-container .company-header .banner-container .slogan-container {
        justify-content: center !important;
        align-items: center !important;
        height: auto !important;
        padding: 40px 15px !important; }
        .home-container .company-header .banner-container .slogan-container .logo-image {
          width: 250px !important;
          margin-bottom: 25px !important; }
        .home-container .company-header .banner-container .slogan-container .slogan-text {
          font-size: 18px !important;
          line-height: 30px !important;
          padding-bottom: 10px !important; }
      .home-container .company-header .banner-container .image-container {
        flex: 1;
        display: flex;
        align-items: center;
        position: relative;
        height: auto !important; }
        .home-container .company-header .banner-container .image-container .mock-image {
          margin: 0 auto;
          max-width: 580px !important;
          width: 100% !important;
          height: auto !important;
          object-fit: contain !important;
          border-radius: 14px !important; } }

@media (max-width: 1050px) {
  .home-container .home-header-container .home-mobile-menu {
    display: inline-block !important; } }

@media (max-width: 955px) {
  .home-container .home-header-container .home-mobile-menu {
    display: inline-block !important; }
  .home-container .company-header {
    height: 750px !important; }
    .home-container .company-header .color-overlay {
      background: linear-gradient(340deg, #27b3db, #276ef1) !important;
      text-align: center !important;
      width: 100%; }
      .home-container .company-header .color-overlay .primary-text {
        color: #fff !important;
        background: linear-gradient(transparent 65%, #ffd700 65%) !important; }
      .home-container .company-header .color-overlay .dark-logo {
        display: none !important; }
      .home-container .company-header .color-overlay .white-logo {
        display: inline-block !important; }
      .home-container .company-header .color-overlay .response-100 {
        width: 100%; }
      .home-container .company-header .color-overlay h1 {
        color: #fff !important; }
      .home-container .company-header .color-overlay h2 {
        color: #fff !important;
        width: 100% !important;
        margin-bottom: 30px !important; }
      .home-container .company-header .color-overlay .icon-container {
        flex-wrap: wrap;
        align-items: center !important;
        justify-content: center !important; }
        .home-container .company-header .color-overlay .icon-container span {
          margin: 10px;
          margin-right: 5px !important; }
  .plan-container .plan-text-container .plan-text {
    font-size: 16px !important; }
  .plan-container .plan-text-container.title .plan-text {
    font-size: 18px !important; }
  .plans-container .text-container .text {
    font-size: 16px !important; }
  .plans-container .text-container.title .text {
    font-size: 18px !important; } }

@media (max-width: 960px) {
  .home-container .home-header-container .home-menu {
    display: none !important; }
  .home-container .home-header-container .home-mobile-menu {
    display: inline-block !important; }
  .home-container .home-header-container .menu-toggle {
    display: inline-block !important; } }

@media (max-width: 900px) {
  .home-container .home-header-container .home-menu {
    display: none !important; }
  .home-container .home-header-container .home-mobile-menu {
    display: inline-block !important; }
  .home-container .home-header-container .menu-toggle {
    display: inline-block !important; }
  .home-container .company-header .color-overlay .response-100 {
    width: 100%; }
  .home-container .layout-container .function-container .text-container {
    width: 100%;
    margin: 5px !important; }
    .home-container .layout-container .function-container .text-container .text {
      font-size: 15px !important; }
    .home-container .layout-container .function-container .text-container .title {
      font-size: 15px !important; }
    .home-container .layout-container .function-container .text-container.title .text {
      font-size: 14px !important; }
  .home-container .company-header .banner-container .slogan-container .logo-image {
    width: 250px !important; }
  .home-container .company-header .banner-container .slogan-container .slogan-text {
    font-size: 18px !important;
    line-height: 36px !important; }
  .plan-container .plan-text-container {
    margin: 5px !important; }
    .plan-container .plan-text-container .title {
      font-size: 16px !important; }
    .plan-container .plan-text-container .plan-text {
      font-size: 14px !important;
      padding: 5px 10px !important; }
    .plan-container .plan-text-container.title {
      width: 450px !important; }
      .plan-container .plan-text-container.title .plan-text {
        font-size: 15px !important;
        display: flex;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        flex: 1; }
        .plan-container .plan-text-container.title .plan-text .flex-title {
          flex: 0 !important; }
        .plan-container .plan-text-container.title .plan-text .flex-img {
          height: 40px !important;
          margin-left: 0px !important; }
  .plans-container .text-container {
    margin: 5px !important; }
    .plans-container .text-container .title {
      font-size: 16px !important; }
    .plans-container .text-container .text {
      font-size: 14px !important;
      padding: 5px 10px !important; }
    .plans-container .text-container.title {
      width: 600px !important; }
      .plans-container .text-container.title .text {
        font-size: 14px !important;
        display: flex;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: flex-start !important;
        flex: 1;
        text-align: left !important; }
        .plans-container .text-container.title .text .flex-title {
          flex: 0 !important; }
        .plans-container .text-container.title .text .flex-img {
          height: 40px !important;
          margin-left: 0px !important; }
  .about-image-container img {
    width: 120% !important; } }

@media (max-width: 880px) {
  .ho-none-2 {
    display: none !important; } }

@media (max-width: 865px) {
  .ho-none-1 {
    display: none !important; } }

@media (max-width: 850px) {
  .about-image-container img {
    width: 140% !important; } }

@media (max-width: 800px) {
  .recommend-card .recommend-icon {
    background-color: #fff;
    font-size: 20px !important;
    margin-right: 20px !important;
    min-width: 56px !important;
    padding: 15px !important; }
  .recommend-card .recommend-text {
    font-size: 16px !important; } }

@media (max-width: 768px) {
  .home-container .company-header .banner-container {
    padding-top: 66px !important; }
    .home-container .company-header .banner-container .slogan-container {
      justify-content: center !important;
      align-items: center !important;
      height: auto !important;
      padding: 40px 15px !important; }
      .home-container .company-header .banner-container .slogan-container .logo-image {
        width: 250px !important;
        margin-bottom: 25px !important; }
      .home-container .company-header .banner-container .slogan-container .slogan-text {
        font-size: 18px !important;
        line-height: 30px !important;
        padding-bottom: 10px !important; }
    .home-container .company-header .banner-container .image-container {
      flex: 1;
      display: flex;
      align-items: center;
      position: relative; }
      .home-container .company-header .banner-container .image-container .mock-image {
        width: 100% !important; } }

@media (max-width: 750px) {
  .ad-none-1 {
    display: none !important; } }

@media (max-width: 720px) {
  .plans-container .text-container .text {
    font-size: 12px !important;
    line-height: 18px !important; }
  .plans-container .text-container.title {
    width: 600px !important; }
    .plans-container .text-container.title .text {
      font-size: 12px !important;
      line-height: 18px !important; } }

@media (max-width: 650px) {
  .home-container .about-title-container {
    padding: 20px !important; }
    .home-container .about-title-container .about-info-container {
      display: flex !important;
      flex-direction: row !important;
      padding-top: 20px !important; }
      .home-container .about-title-container .about-info-container .about-info {
        padding: 20px !important;
        border-right: 1px solid #d0d0d0 !important;
        border-bottom: 0px solid #d0d0d0 !important;
        flex: 1 !important; }
        .home-container .about-title-container .about-info-container .about-info .about-title {
          font-size: 16px !important; }
        .home-container .about-title-container .about-info-container .about-info.end {
          border-right: 0px solid transparent !important; } }

@media (max-width: 600px) {
  .home-container .company-header .banner-container .image-container .mock-image {
    object-fit: cover !important; }
  .small-padding {
    padding: 20px !important; }
  .small-padding-5 {
    padding: 5px !important; }
  .small-padding-0 {
    padding: 0px !important; }
  .small-pr {
    padding-right: 10px !important; }
  .stop-mr {
    margin-right: 0px !important; }
  .home-container .home-max-container {
    padding-right: 20px !important;
    padding-left: 20px !important; }
  .home-container .title-arrow-container {
    padding: 5px 0px !important; }
    .home-container .title-arrow-container .title {
      font-size: 20px !important; }
    .home-container .title-arrow-container .desc {
      font-size: 15px !important; }
  .home-container .layout-container {
    padding: 3em 20px 3em 20px !important; }
    .home-container .layout-container .warning-text {
      font-size: 18px !important; }
    .home-container .layout-container .title-text h1 {
      font-size: 18px !important;
      padding: 5px 15px 5px 15px !important; }
      .home-container .layout-container .title-text h1::before {
        bottom: -20px !important;
        z-index: 0 !important; }
    .home-container .layout-container .company-img {
      height: 200px !important;
      min-height: 200px !important; }
    .home-container .layout-container .about-list-container {
      padding: 15px !important; }
    .home-container .layout-container .icon-container {
      width: 64px !important;
      height: 64px !important;
      font-size: 30px !important; }
      .home-container .layout-container .icon-container img {
        height: 75px !important; }
      .home-container .layout-container .icon-container.margin-top {
        margin-top: -33px !important; }
  .home-container .company-header {
    height: auto !important; }
    .home-container .company-header .color-overlay {
      padding: 5px !important; }
      .home-container .company-header .color-overlay .dark-logo {
        display: none !important; }
      .home-container .company-header .color-overlay .white-logo {
        display: inline-block !important;
        width: 250px;
        height: 62px; }
      .home-container .company-header .color-overlay h2 {
        font-size: 17px !important;
        line-height: 30px !important;
        margin-bottom: 20px !important; }
      .home-container .company-header .color-overlay .primary-text {
        font-size: 19px !important;
        color: #fff !important;
        text-shadow: 2px 2px #0057ff;
        background: linear-gradient(transparent 65%, #ffd700 65%) !important; }
      .home-container .company-header .color-overlay .icon-container span {
        height: 45px !important;
        padding: 10px 15px !important;
        margin-right: 0px !important;
        font-size: 17px !important; }
        .home-container .company-header .color-overlay .icon-container span img {
          height: 25px !important; }
    .home-container .company-header .banner-container .slogan-container {
      text-align: center !important; }
      .home-container .company-header .banner-container .slogan-container .slogan-text {
        font-size: 16px !important; }
      .home-container .company-header .banner-container .slogan-container .logo-image {
        width: 220px !important; }
      .home-container .company-header .banner-container .slogan-container .download-button {
        max-width: 220px; }
  .home-container .intro-container .intro-right-container {
    padding-top: 4em !important; }
    .home-container .intro-container .intro-right-container .info-icon-container {
      margin-bottom: 20px !important; }
      .home-container .intro-container .intro-right-container .info-icon-container span {
        font-size: 18px !important; }
    .home-container .intro-container .intro-right-container .info-title-container {
      padding: 20px !important;
      font-size: 18px !important;
      margin-bottom: 20px !important; }
      .home-container .intro-container .intro-right-container .info-title-container .info-card-container {
        margin-top: 20px !important; }
        .home-container .intro-container .intro-right-container .info-title-container .info-card-container span {
          font-size: 24px !important;
          padding: 20px 12px !important;
          margin-right: 20px !important; }
          .home-container .intro-container .intro-right-container .info-title-container .info-card-container span .info-desc {
            font-size: 13px !important; }
    .home-container .intro-container .intro-right-container .remind-text {
      font-size: 16px !important; }
  .home-container .know-text {
    font-size: 14px !important;
    padding: 0px !important;
    padding-bottom: 20px !important; }
  .home-container .check-text {
    font-size: 14px !important; }
  .home-container .diagram {
    width: 100% !important;
    padding: 5px !important; }
  .home-container .know-container .know-text {
    font-size: 14px !important;
    padding: 0px !important;
    padding-bottom: 20px !important; }
  .home-container .know-container .know-list-text {
    font-size: 14px !important; }
  .home-container .feature-container .feature-title-text {
    font-size: 17px !important; }
  .home-container .feature-container .feature-desc-text {
    font-size: 14px !important; }
  .home-container .about-container .about-text {
    font-size: 14px !important; }
  .home-container .about-container .about-list-text {
    font-size: 14px !important; }
  .home-container .about-container .about-soon-text {
    font-size: 14px !important; }
  .home-container .residence-container .residence-list-text {
    font-size: 17px !important; }
  .home-container .residence-container .residence-text {
    font-size: 14px !important; }
  .home-container .residence-container .residence-footer-text {
    font-size: 13px !important; }
  .home-container .performance-container .performance-list-text {
    font-size: 14px !important; }
  .home-container .performance-text {
    font-size: 14px !important; }
  .home-container .voice-container {
    max-width: 100% !important; }
    .home-container .voice-container .voice-text {
      font-size: 17px !important; }
    .home-container .voice-container .voice-list-text {
      max-width: 100%;
      white-space: pre-wrap;
      word-break: break-all;
      overflow-wrap: break-word;
      font-size: 14px !important; }
  .home-container .price-container .price-text {
    font-size: 14px !important; }
  .home-container .price-container .price-list-container .price-title-text {
    font-size: 17px !important; }
  .home-container .price-container .price-list-container .price-desc-text {
    font-size: 14px !important; }
  .home-container .faq-container {
    max-width: 100%; }
    .home-container .faq-container .faq-list-text {
      font-size: 14px !important; }
    .home-container .faq-container .ant-card-body {
      padding: 15px !important; }
    .home-container .faq-container .q-tag {
      margin-right: 10px !important;
      font-size: 18px !important; }
    .home-container .faq-container .a-tag {
      margin-right: 10px !important;
      font-size: 18px !important; }
  .home-container .form-container .form-text {
    font-size: 14px !important; }
  .home-container .footer-container {
    font-size: 14px !important; }
  .home-container .video {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
    padding-right: 40px; }
    .home-container .video iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border-radius: 10px;
      box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.15); }
  .home-container .romu-stepby-web {
    display: none !important; }
  .home-container .romu-stepby-mobile {
    display: block !important; }
  .q-tag {
    font-size: 24px !important; }
  .a-tag {
    font-size: 24px !important; }
  .faq-list-text {
    margin-top: 6px !important; }
  .footer-section .footer-container .footer-body {
    padding: 3em 20px 3em 20px !important; }
  .toTop-button {
    bottom: 15px !important;
    right: 15px !important; }
  .maintenance-container .maintenance-body {
    margin-top: 90px !important; }
    .maintenance-container .maintenance-body .text-container .under-br {
      display: none !important; }
    .maintenance-container .maintenance-body .text-container .construction-image {
      height: 250px !important;
      margin-top: -180px !important; }
    .maintenance-container .maintenance-body .text-container h3 {
      font-size: 28px !important; }
    .maintenance-container .maintenance-body .text-container p {
      font-size: 18px !important; } }

@media (max-width: 500px) {
  .chat-layout {
    left: 0px;
    right: 0px;
    bottom: 0px; }
  .profile-container {
    max-width: 100% !important;
    margin-left: 0px !important; }
  .login-container .form-container .containers {
    padding: 30px; }
  .home-container .about-title-container {
    padding: 5px !important; }
    .home-container .about-title-container .about-info-container {
      display: flex !important;
      flex-direction: column !important;
      padding-top: 0px !important; }
      .home-container .about-title-container .about-info-container .about-info {
        padding: 20px !important;
        border-right: 0px solid #d0d0d0 !important;
        border-bottom: 1px solid #d0d0d0 !important;
        flex: 0 !important; }
        .home-container .about-title-container .about-info-container .about-info .about-title {
          font-size: 15px !important; }
        .home-container .about-title-container .about-info-container .about-info.end {
          border-right: 0px solid transparent !important;
          border-bottom: 0px solid #d0d0d0 !important; }
  .maintenance-container {
    padding: 15px !important; }
    .maintenance-container .maintenance-body {
      margin-top: 60px !important; }
      .maintenance-container .maintenance-body .text-container {
        padding: 20px !important; }
        .maintenance-container .maintenance-body .text-container .construction-image {
          height: 200px !important;
          margin-top: -120px !important; }
        .maintenance-container .maintenance-body .text-container h3 {
          font-size: 20px !important;
          margin-bottom: 10px !important; }
        .maintenance-container .maintenance-body .text-container p {
          font-size: 14px !important; }
        .maintenance-container .maintenance-body .text-container .contact {
          margin-top: 10px !important; }
      .maintenance-container .maintenance-body .logo-container {
        padding: 15px !important; }
        .maintenance-container .maintenance-body .logo-container .romu-logo {
          height: 25px !important; } }

@media (max-width: 460px) {
  .home-container .intro-container .intro-right-container {
    padding-top: 4em !important; }
    .home-container .intro-container .intro-right-container .info-icon-container {
      margin-bottom: 20px !important; }
      .home-container .intro-container .intro-right-container .info-icon-container span {
        font-size: 18px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center;
        justify-content: center;
        padding: 0 !important; }
        .home-container .intro-container .intro-right-container .info-icon-container span .info-icon {
          margin-right: 0 !important;
          height: 35px !important; }
    .home-container .intro-container .intro-right-container .info-title-container {
      padding: 20px !important;
      font-size: 16px !important;
      margin-bottom: 15px !important; }
      .home-container .intro-container .intro-right-container .info-title-container .info-card-container {
        margin-top: 15px !important; }
        .home-container .intro-container .intro-right-container .info-title-container .info-card-container span {
          font-size: 20px !important;
          padding: 20px 12px !important;
          margin-right: 20px !important; }
          .home-container .intro-container .intro-right-container .info-title-container .info-card-container span .info-desc {
            font-size: 12px !important; }
    .home-container .intro-container .intro-right-container .remind-text {
      font-size: 15px !important; }
  .home-container .recommend-card .recommend-text {
    font-size: 15px !important; }
  .home-container .success-status {
    font-size: 18px !important; }
  .home-container .icon-image {
    height: 80px !important; } }

@media (max-width: 375px) {
  .home-container .intro-container .intro-right-container .info-title-container {
    padding: 15px !important; }
    .home-container .intro-container .intro-right-container .info-title-container .info-card-container span {
      padding: 15px 10px !important;
      margin-right: 10px !important; } }

@media only screen and (max-width: 1366px) {
  .map-js-height {
    height: 350px; } }

@media only screen and (max-width: 360px) {
  .map-js-height {
    height: 250px; } }

.landing-container {
  font-family: 'M PLUS 1', sans-serif;
  padding: 0 10vw; }
  @media (max-width: 960px) {
    .landing-container {
      padding: 0 5vw; } }
  @media (max-width: 480px) {
    .landing-container {
      padding: 0 24px; } }
  @media (max-width: 480px) {
    .landing-container .hero-button {
      width: 100%; } }
  .landing-container.full-width-container {
    padding: 0; }
  .landing-container .contact-container {
    padding: 60px 64px 80px 64px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    border-radius: 16px;
    box-shadow: 0px 4px 20px 0px rgba(0, 87, 255, 0.1); }
    @media (max-width: 960px) {
      .landing-container .contact-container {
        padding: 40px 32px 60px 32px; } }
    @media (max-width: 480px) {
      .landing-container .contact-container {
        flex-direction: column;
        padding: 24px 16px 40px 16px; } }
    .landing-container .contact-container .contact-image {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center; }
      .landing-container .contact-container .contact-image img {
        width: 100%;
        height: 100%;
        object-fit: contain; }
    .landing-container .contact-container .contact-content {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center; }
      .landing-container .contact-container .contact-content .contact-button {
        display: flex;
        padding: 16px 80px;
        justify-content: center;
        align-items: center;
        gap: 10px;
        margin-top: 20px;
        font-weight: 700;
        color: #0057ff;
        border-radius: 60px;
        box-shadow: 0px 4px 30px 0px rgba(26, 42, 97, 0.2); }
        @media (max-width: 960px) {
          .landing-container .contact-container .contact-content .contact-button {
            padding: 16px 40px; } }
        @media (max-width: 480px) {
          .landing-container .contact-container .contact-content .contact-button {
            width: 100%;
            padding: 16px 20px; } }
  .landing-container .tabs-title-container {
    padding: 0 5vw; }
  .landing-container .tabs-container {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    margin-top: 40px;
    width: 100%; }
    .landing-container .tabs-container .tabs-header {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
      border-top: 1px solid #e8e8e8;
      border-bottom: 1px solid #e8e8e8;
      text-transform: uppercase; }
      .landing-container .tabs-container .tabs-header .tab-item {
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 10px 0;
        gap: 10px;
        transition: all 0.3s ease; }
        .landing-container .tabs-container .tabs-header .tab-item.active {
          border-bottom: 2px solid #0057ff; }
  .landing-container .overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    top: 0;
    left: 0;
    z-index: 1; }
  .landing-container .border-white {
    border-color: #fff !important; }
  .landing-container .focus-wrapper {
    padding: 0 10vw; }
    @media (max-width: 900px) {
      .landing-container .focus-wrapper {
        padding: 0 5vw; } }
    @media (max-width: 768px) {
      .landing-container .focus-wrapper {
        padding: 0 3vw; } }
    @media (max-width: 480px) {
      .landing-container .focus-wrapper {
        padding: 0; } }
  .landing-container .divider {
    height: 4px;
    width: 52px;
    background-color: #0057ff;
    margin: 16px auto; }
    @media (min-width: 960px) {
      .landing-container .divider .lg-mt-0 {
        margin-top: 0; } }
  .landing-container .card {
    display: flex;
    padding: 24px;
    border-radius: 32px;
    box-shadow: 0px 4px 30px 0px rgba(0, 87, 255, 0.2); }
    .landing-container .card .card-row {
      width: 100%; }
      .landing-container .card .card-row .card-image {
        width: 100%;
        padding-right: 24px; }
        @media (max-width: 480px) {
          .landing-container .card .card-row .card-image {
            padding-right: 0;
            padding-bottom: 32px; } }
        .landing-container .card .card-row .card-image img {
          width: 100%;
          object-fit: contain; }
      .landing-container .card .card-row .card-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%; }
        .landing-container .card .card-row .card-content .content-box {
          width: max-content; }
          .landing-container .card .card-row .card-content .content-box h1 {
            margin: 0;
            text-align: center; }
          .landing-container .card .card-row .card-content .content-box h3 {
            margin: 0;
            text-align: left; }
  .landing-container .flow-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 48px;
    padding: 48px 0;
    border-radius: 32px;
    background: #fff;
    box-shadow: 0px 4px 20px 0px rgba(0, 87, 255, 0.1); }
    @media (max-width: 960px) {
      .landing-container .flow-card {
        padding: 24px 0;
        gap: 18px; } }
    @media (max-width: 480px) {
      .landing-container .flow-card {
        padding: 24px 0;
        gap: 12px; } }
  .landing-container .flow-card-content {
    display: flex;
    align-items: flex-start;
    width: 100%;
    justify-content: space-between;
    padding: 0 30px;
    gap: 20px; }
    @media (max-width: 960px) {
      .landing-container .flow-card-content {
        padding: 0 15px;
        gap: 0; } }
    @media (max-width: 480px) {
      .landing-container .flow-card-content {
        padding: 0 4px;
        gap: 0; } }
  .landing-container .flow-card-content-item:last-child .arrow {
    display: none; }
  .landing-container .flow-card-content-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px 30px;
    max-width: 184px;
    flex: 1;
    flex-shrink: 1;
    border-radius: 16px;
    gap: 12px;
    box-shadow: 0px 4px 30px 0px rgba(0, 87, 255, 0.2);
    position: relative; }
    @media (max-width: 960px) {
      .landing-container .flow-card-content-item {
        width: 100%;
        box-shadow: none;
        padding: 16px 15px; } }
    @media (max-width: 480px) {
      .landing-container .flow-card-content-item {
        width: 100%;
        box-shadow: none;
        padding: 8px 10px; } }
    .landing-container .flow-card-content-item .flow-icon {
      height: 7vw;
      aspect-ratio: 1/1;
      object-fit: contain; }
      @media (max-width: 960px) {
        .landing-container .flow-card-content-item .flow-icon {
          height: 8vw; } }
      @media (max-width: 480px) {
        .landing-container .flow-card-content-item .flow-icon {
          height: 10vw; } }
    .landing-container .flow-card-content-item .arrow {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(70%, -50%);
      max-width: 100px;
      aspect-ratio: 1/1;
      object-fit: contain; }
      @media (max-width: 960px) {
        .landing-container .flow-card-content-item .arrow {
          max-width: 50px;
          transform: translate(90%, -70%); } }
      @media (max-width: 480px) {
        .landing-container .flow-card-content-item .arrow {
          display: none; } }
    .landing-container .flow-card-content-item .flow-card-content-item-number {
      position: absolute;
      top: -20px;
      right: -20px;
      background-color: #0057ff;
      color: #fff;
      border-radius: 50%;
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      font-weight: 700; }
      @media (max-width: 960px) {
        .landing-container .flow-card-content-item .flow-card-content-item-number {
          top: -10px;
          right: 0px;
          width: 2rem;
          height: 2rem;
          font-size: 1rem; } }
      @media (max-width: 480px) {
        .landing-container .flow-card-content-item .flow-card-content-item-number {
          top: -10px;
          right: 1px;
          width: 1.5rem;
          height: 1.5rem;
          font-size: 0.7rem; } }
  .landing-container .family-bg {
    background-image: url("/assets/images/landing/family-overlay.png");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    border: 1px #fff solid; }
    @media (max-width: 480px) {
      .landing-container .family-bg {
        background-size: 180%; } }
  .landing-container .family-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
    padding: 32px;
    border-radius: 16px;
    border: 4px solid #f3f7ff;
    background: radial-gradient(circle at center, white 0%, rgba(255, 255, 255, 0.6) 40%, rgba(255, 255, 255, 0.2) 100%);
    box-shadow: 0px -4px 30px 0px rgba(26, 42, 97, 0.2);
    width: 50vw;
    margin: 50px auto 3.9rem auto; }
    @media (max-width: 960px) {
      .landing-container .family-card {
        margin: 30px auto 1.95rem auto;
        width: calc(100% - 48px); } }
    @media (max-width: 480px) {
      .landing-container .family-card {
        padding: 24px;
        width: calc(100% - 48px);
        margin: 12px auto 0.975rem auto; } }
  .landing-container p {
    font-weight: 700; }
    @media (max-width: 480px) {
      .landing-container p {
        font-weight: 500; } }
  .landing-container .family-header {
    width: max-content;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0px; }
    .landing-container .family-header img {
      max-width: 192px;
      margin-bottom: 12px; }
    .landing-container .family-header h3 {
      font-weight: 400;
      line-height: 32px;
      font-size: 22px;
      margin: 0; }
    .landing-container .family-header h5 {
      font-size: 16px;
      font-weight: 700;
      line-height: 24px;
      margin: 0;
      letter-spacing: 1.28px; }
  .landing-container .video-container {
    width: 100%;
    aspect-ratio: 16/9; }
  .landing-container .challenges-item {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    height: 100%;
    gap: 46px;
    flex-shrink: 0;
    background-color: #fff;
    border-radius: 24px;
    padding: 24px 20px 48px 20px;
    box-shadow: 0px 4px 30px 0px rgba(0, 87, 255, 0.2);
    transition: all 0.3s ease;
    user-select: none;
    -webkit-user-select: none;
    /* Safari */
    -moz-user-select: none;
    /* Firefox */
    -ms-user-select: none;
    /* IE10+/Edge */ }
    .landing-container .challenges-item:hover {
      transform: translateY(-5px);
      box-shadow: 0px 8px 40px 0px rgba(0, 87, 255, 0.25); }
    @media (max-width: 960px) {
      .landing-container .challenges-item {
        gap: 32px; } }
    @media (max-width: 480px) {
      .landing-container .challenges-item {
        gap: 11.93px; } }
    .landing-container .challenges-item .status-tag {
      background-color: #feecf0;
      color: #f23d6a;
      padding: 4px 0;
      font-weight: 500;
      align-self: stretch;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      border-radius: 5px; }
      @media (max-width: 900px) {
        .landing-container .challenges-item .status-tag {
          font-size: 12px; } }
      @media (max-width: 480px) {
        .landing-container .challenges-item .status-tag {
          font-size: 14px; } }
    .landing-container .challenges-item .challenges-item-image {
      width: 100%;
      height: 200px;
      display: flex;
      align-items: center;
      justify-content: center; }
    .landing-container .challenges-item img {
      width: 100%;
      height: 100%;
      object-fit: contain; }
  .landing-container h1 {
    font-family: 'M Plus 1', 'SF Display', sans-serif;
    font-size: 32px;
    font-weight: 700;
    color: #182747;
    line-height: 38px; }
    @media (max-width: 960px) {
      .landing-container h1 {
        margin: 0;
        font-size: 22px;
        line-height: 22px; } }
    @media (max-width: 480px) {
      .landing-container h1 {
        font-size: 18px;
        line-height: 32px; } }
  .landing-container h3 {
    font-family: 'M Plus 1', 'SF Display', sans-serif;
    font-size: 22px;
    font-weight: 500;
    color: #182747;
    line-height: 32px;
    text-align: center; }
    @media (max-width: 960px) {
      .landing-container h3 {
        font-size: 14px;
        line-height: 22px; } }
    @media (max-width: 480px) {
      .landing-container h3 {
        font-weight: 500;
        font-size: 13.745px;
        line-height: 21.86px; } }
  .landing-container h4 {
    font-family: 'M PLUS 1';
    font-size: 18px;
    font-weight: 500;
    line-height: 32px; }
    @media (max-width: 960px) {
      .landing-container h4 {
        font-size: 14px;
        line-height: 22px; } }
    @media (max-width: 480px) {
      .landing-container h4 {
        font-size: 13.745px;
        line-height: 21.59px; } }
  .landing-container h5 {
    font-family: 'M Plus 1', 'SF Display', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #182747;
    line-height: 24px; }
    @media (max-width: 960px) {
      .landing-container h5 {
        font-size: 12px;
        line-height: 20px; } }
    @media (max-width: 480px) {
      .landing-container h5 {
        font-size: 10px;
        line-height: 18px; } }
  .landing-container p,
  .landing-container span,
  .landing-container label {
    font-family: 'M PLUS 1', sans-serif; }

@media (max-width: 480px) {
  .mobile-safe-area {
    height: 70px;
    width: 100vw;
    background-color: #fff; } }

.hero-section {
  position: relative;
  background-color: linear-gradient(to bottom right, rgba(243, 247, 255, 0.2), #f3f7ff);
  background-image: url("/assets/images/landing/landing-bg.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
  height: 82vh; }
  @media (max-width: 960px) {
    .hero-section {
      height: 50vh; } }
  @media (max-width: 480px) {
    .hero-section {
      height: 80vh; } }
  @media (max-width: 320px) {
    .hero-section {
      height: 85vh; } }
  .hero-section .titleStyle {
    font-family: 'M PLUS 1', sans-serif;
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: 38px; }
    @media (max-width: 960px) {
      .hero-section .titleStyle {
        font-size: 22px; } }

.home-container {
  font-family: 'M PLUS 1', sans-serif;
  font-family: 'M PLUS 1', sans-serif;
  position: relative;
  background-color: #fff; }
  .home-container .ant-alert {
    align-items: flex-start !important; }
  .home-container .ant-alert-info .ant-alert-icon {
    font-size: 16px !important;
    margin-top: 4px !important; }
  .home-container .ant-card-head-title {
    white-space: normal !important; }
  .home-container .title-arrow-container {
    padding: 5px 20px;
    position: relative;
    margin-bottom: 40px; }
    .home-container .title-arrow-container .title {
      font-size: 30px;
      color: #182747;
      text-align: center;
      font-weight: bold;
      margin-bottom: 0px !important;
      position: relative; }
      .home-container .title-arrow-container .title::before {
        content: '';
        height: 4px;
        width: 50px;
        background-color: #0057ff;
        position: absolute;
        left: 50%;
        transform: translate(-50%, 0px);
        bottom: -10px;
        z-index: 1; }
    .home-container .title-arrow-container .desc {
      font-size: 19px;
      color: #182747;
      font-weight: 300 !important;
      text-align: center;
      margin-top: 50px;
      margin-bottom: 0; }
      .home-container .title-arrow-container .desc .number {
        font-size: 22px;
        font-weight: 600;
        height: 42px;
        width: 42px;
        border-radius: 50%;
        background-color: #0057ff;
        color: #fff;
        text-align: center;
        margin-right: auto;
        margin-left: auto;
        display: flex;
        align-items: center;
        justify-content: center; }
    .home-container .title-arrow-container .line-text {
      position: absolute;
      left: 50%;
      top: -35px;
      transform: translateX(-50%); }
  .home-container .primary-gradiant {
    background: linear-gradient(103deg, #05a6ef 0%, #0b89b7) 100% center; }
  .home-container .header-spacer {
    display: none; }
    @media (max-width: 480px) {
      .home-container .header-spacer {
        display: block;
        height: 70px;
        width: 100vw;
        background-color: #fff; } }
  .home-container .header-spacer {
    display: none; }
    @media (max-width: 480px) {
      .home-container .header-spacer {
        display: block;
        height: 70px;
        width: 100vw;
        background-color: #fff; } }
  .home-container .home-header-container {
    z-index: 2;
    position: fixed;
    top: 32px;
    left: 10vw;
    right: 10vw;
    top: 32px;
    left: 10vw;
    right: 10vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 40px;
    width: 80vw;
    justify-content: space-between;
    align-items: center;
    padding: 0 40px;
    width: 80vw;
    min-height: 70px;
    border-radius: 9999px;
    box-shadow: 0px 4px 30px 0px rgba(0, 87, 255, 0.2);
    border-radius: 9999px;
    box-shadow: 0px 4px 30px 0px rgba(0, 87, 255, 0.2);
    transition: 0.6s;
    background-color: #fff; }
    @media (max-width: 960px) {
      .home-container .home-header-container {
        width: 100vw;
        top: 0;
        left: 0;
        right: 0;
        padding: 0 20px;
        border-radius: 0; } }
    @media (max-width: 960px) {
      .home-container .home-header-container {
        width: 100vw;
        top: 0;
        left: 0;
        right: 0;
        padding: 0 20px;
        border-radius: 0; } }
    .home-container .home-header-container .menu-toggle {
      min-width: 40px;
      position: relative;
      display: none; }
      .home-container .home-header-container .menu-toggle .burger-container {
        min-width: 40px;
        min-height: 40px;
        background-color: #0057ff;
        border-radius: 13px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer; }
        .home-container .home-header-container .menu-toggle .burger-container .burger-icon {
          display: inline-block; }
          .home-container .home-header-container .menu-toggle .burger-container .burger-icon .bar1,
          .home-container .home-header-container .menu-toggle .burger-container .burger-icon .bar2,
          .home-container .home-header-container .menu-toggle .burger-container .burger-icon .bar3 {
            width: 22px;
            height: 2px;
            background-color: #fff;
            margin: 5px 0;
            transition: 0.4s; }
          .home-container .home-header-container .menu-toggle .burger-container .burger-icon.toggle .bar1 {
            -webkit-transform: rotate(-45deg) translate(-5px, 3px);
            transform: rotate(-45deg) translate(-5px, 3px); }
          .home-container .home-header-container .menu-toggle .burger-container .burger-icon.toggle .bar2 {
            opacity: 0; }
          .home-container .home-header-container .menu-toggle .burger-container .burger-icon.toggle .bar3 {
            -webkit-transform: rotate(45deg) translate(-6px, -5px);
            transform: rotate(45deg) translate(-6px, -5px); }
      .home-container .home-header-container .menu-toggle .mobile-menu-container {
        width: 250px;
        background-color: #fff;
        border-radius: 10px;
        position: absolute;
        top: 50px;
        right: 0px;
        box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15);
        overflow: hidden;
        color: #182747; }
        .home-container .home-header-container .menu-toggle .mobile-menu-container .ant-menu-item {
          color: #182747 !important; }
        .home-container .home-header-container .menu-toggle .mobile-menu-container .ant-menu-submenu-title {
          color: #182747 !important; }
    .home-container .home-header-container .brand-logo {
      min-width: 145px;
      height: 70px;
      align-items: center;
      justify-content: center;
      cursor: pointer; }
      .home-container .home-header-container .brand-logo svg {
        font-size: 20px;
        color: black;
        padding-top: 4px;
        margin-left: 10px; }
    .home-container .home-header-container .name-container {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 64px; }
      .home-container .home-header-container .name-container div {
        display: flex;
        padding: 5px;
        height: 40px;
        border-radius: 32px;
        background-color: #f9fafc;
        align-items: center; }
        .home-container .home-header-container .name-container div p {
          font-size: 14px;
          color: black;
          margin-bottom: 0px;
          font-weight: 400;
          margin-left: 10px; }
        .home-container .home-header-container .name-container div svg {
          font-size: 12px;
          color: gray; }
    .home-container .home-header-container .custom-icon svg {
      font-size: 18px; }
    .home-container .home-header-container .menu-icon {
      height: 64px !important;
      display: flex;
      align-items: center;
      justify-content: center; }
      .home-container .home-header-container .menu-icon svg {
        font-size: 20px; }
    .home-container .home-header-container .toggle-container {
      display: inline-block; }
    .home-container .home-header-container .mr-auto {
      margin-right: auto; }
    .home-container .home-header-container .ant-layout-header {
      width: 100%;
      padding-left: 15px;
      flex-direction: row;
      flex-wrap: nowrap;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 0.8rem 0 1rem;
      background-color: transparent;
      z-index: 1; }
    .home-container .home-header-container .home-menu {
      display: flex; }
    .home-container .home-header-container .menus {
      position: relative;
      display: flex;
      align-items: center;
      height: 70px; }
      .home-container .home-header-container .menus:hover .hover-menu {
        max-height: auto;
        overflow: visible;
        opacity: 1; }
      .home-container .home-header-container .menus:hover .menu-button {
        opacity: 1;
        font-weight: bold;
        color: #0057ff; }
        .home-container .home-header-container .menus:hover .menu-button span {
          transform: rotate(180deg); }
        .home-container .home-header-container .menus:hover .menu-button::before {
          right: 15px;
          left: 15px;
          background-color: #0057ff; }
      .home-container .home-header-container .menus.active .menu-button {
        font-weight: bold;
        opacity: 1; }
        .home-container .home-header-container .menus.active .menu-button::before {
          right: 15px;
          left: 15px;
          background-color: #0057ff; }
      .home-container .home-header-container .menus .menu-button {
        font-size: 16px;
        color: #182747;
        padding: 0 15px;
        font-weight: 500;
        font-weight: 500;
        background-color: transparent !important;
        border-color: transparent !important;
        position: relative;
        opacity: 0.9;
        cursor: pointer;
        transition: 0.6s; }
        .home-container .home-header-container .menus .menu-button span {
          transition: 0.6s; }
        .home-container .home-header-container .menus .menu-button::before {
          transition: 0.6s;
          content: '';
          display: block;
          position: absolute;
          left: 100%;
          right: 100%;
          bottom: -23px;
          height: 3px;
          background-color: transparent; }
      .home-container .home-header-container .menus .hover-menu {
        position: absolute;
        top: 65px;
        left: 50%;
        transform: translateX(-50%);
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        transition: 0.6s; }
        .home-container .home-header-container .menus .hover-menu .hover-menu-body {
          position: relative;
          background-color: #fff;
          box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.3);
          padding: 15px;
          padding-bottom: 0px;
          border-radius: 5px;
          min-width: 200px; }
          .home-container .home-header-container .menus .hover-menu .hover-menu-body ul {
            list-style: none;
            margin: 0;
            padding: 0; }
            .home-container .home-header-container .menus .hover-menu .hover-menu-body ul li {
              position: relative;
              padding-left: 16px;
              padding-bottom: 15px;
              word-break: keep-all; }
              .home-container .home-header-container .menus .hover-menu .hover-menu-body ul li a {
                font-size: 16px;
                color: #182747;
                transition: 0.6s; }
              .home-container .home-header-container .menus .hover-menu .hover-menu-body ul li:hover a {
                color: #0057ff;
                text-decoration: underline; }
              .home-container .home-header-container .menus .hover-menu .hover-menu-body ul li::before {
                content: '';
                position: absolute;
                width: 8px;
                height: 2px;
                background-color: #0057ff;
                top: 30%;
                left: 0; }
          .home-container .home-header-container .menus .hover-menu .hover-menu-body::after {
            content: '';
            position: absolute;
            display: block;
            width: 0;
            z-index: 1;
            border-style: solid;
            border-color: #fff transparent;
            border-width: 0 8px 8px;
            top: -8px;
            left: 50%;
            margin-left: -8px; }
    .home-container .home-header-container .home-mobile-menu {
      display: none; }
    .home-container .home-header-container.scrolled {
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
      background-color: #fff;
      border-bottom: 0px solid transparent !important; }
  .home-container .company-header {
    height: 410px;
    position: relative;
    overflow: hidden;
    -webkit-background-size: cover;
    background-size: cover; }
    .home-container .company-header .banner-container {
      position: relative;
      max-width: 1200px;
      margin-right: auto;
      margin-left: auto;
      width: 100%;
      height: 100%;
      padding: 0 15px; }
      .home-container .company-header .banner-container .back-img {
        height: 100%;
        width: 100%;
        object-fit: cover; }
      .home-container .company-header .banner-container .color-overlay {
        position: absolute;
        top: 0px;
        left: 0px;
        bottom: 0px;
        right: 0px;
        padding: 40px 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center; }
        .home-container .company-header .banner-container .color-overlay .logo-dark {
          display: inline-block; }
        .home-container .company-header .banner-container .color-overlay .logo-white {
          display: none; }
        .home-container .company-header .banner-container .color-overlay .dark-logo {
          display: inline-block; }
        .home-container .company-header .banner-container .color-overlay .white-logo {
          display: none; }
        .home-container .company-header .banner-container .color-overlay h1 {
          color: #0057ff;
          line-height: 60px;
          font-size: 55px;
          font-weight: 600; }
        .home-container .company-header .banner-container .color-overlay h2 {
          color: black;
          line-height: 40px;
          font-size: 24px;
          font-weight: 400 !important;
          margin-bottom: 0px !important; }
        .home-container .company-header .banner-container .color-overlay .primary-text {
          color: #0057ff;
          font-size: 26px;
          font-weight: 600; }
        .home-container .company-header .banner-container .color-overlay .icon-container {
          display: flex;
          justify-content: center; }
          .home-container .company-header .banner-container .color-overlay .icon-container span {
            font-size: 25px;
            color: '#000000' !important;
            padding: 12px 20px;
            background-color: #fff;
            border-radius: 40px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
            margin-right: 25px;
            height: 70px; }
        .home-container .company-header .banner-container .color-overlay .brand-logo {
          min-width: 70px;
          height: 30px;
          align-items: center;
          justify-content: center;
          cursor: pointer; }
          .home-container .company-header .banner-container .color-overlay .brand-logo img {
            min-width: 70px;
            height: 30px; }
      .home-container .company-header .banner-container .slogan-container {
        flex: 1;
        display: flex;
        justify-content: center;
        flex-direction: column;
        height: 100%;
        position: relative;
        padding: 20px; }
        .home-container .company-header .banner-container .slogan-container .slogan-text {
          font-size: 26px;
          line-height: 42px;
          color: #182747;
          font-weight: 600; }

@-webkit-keyframes bounce {
  0% {
    transform: translateX(-5px); }
  50% {
    transform: translateX(10px); }
  100% {
    transform: translateX(-5px); } }

@keyframes bounce {
  0% {
    transform: translateX(-5px); }
  50% {
    transform: translateX(10px); }
  100% {
    transform: translateX(-5px); } }
        .home-container .company-header .banner-container .slogan-container .down-icon {
          font-size: 18px;
          margin-bottom: 5px;
          background-color: #ffd700;
          padding: 10px;
          border-radius: 50%;
          width: 36px;
          height: 36px;
          display: flex;
          align-items: center;
          justify-content: center;
          border: 2px solid #fff;
          -webkit-animation: bounce 1.5s infinite ease-in-out;
          -o-animation: bounce 1.5s infinite ease-in-out;
          -ms-animation: bounce 1.5s infinite ease-in-out;
          -moz-animation: bounce 1.5s infinite ease-in-out;
          animation: bounce 1.5s infinite ease-in-out;
          z-index: 1; }
        .home-container .company-header .banner-container .slogan-container .download-button {
          height: 55px !important;
          max-width: 250px;
          background-color: #0057ff !important;
          border: 1px solid transparent !important;
          border-radius: 10px !important;
          color: #fff !important;
          font-size: 18px !important;
          font-weight: bold !important;
          padding-right: 50px;
          padding-left: 50px; }
      .home-container .company-header .banner-container .image-container {
        flex: 1;
        display: flex;
        height: 100%;
        position: relative; }
        .home-container .company-header .banner-container .image-container .mock-image {
          width: 580px;
          height: 100%;
          max-height: 410px;
          object-fit: cover;
          border-bottom-left-radius: 14px;
          border-bottom-right-radius: 14px; }
      .home-container .company-header .banner-container::before {
        content: '';
        background-size: cover;
        background-repeat: no-repeat, repeat;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0; }
  .home-container .tech-slideshow {
    height: 200px;
    max-width: 100%;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    transform: translate3d(0, 0, 0); }
    .home-container .tech-slideshow div {
      height: 200px;
      width: 2526px;
      background-color: red;
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      transform: translate3d(0, 0, 0); }
    .home-container .tech-slideshow .mover-1 {
      animation: moveSlideshow 12s linear infinite; }
    .home-container .tech-slideshow .mover-2 {
      opacity: 0;
      transition: opacity 0.5s ease-out;
      background-position: 0 -200px;
      animation: moveSlideshow 15s linear infinite; }
      .home-container .tech-slideshow .mover-2:hover {
        opacity: 1; }

@keyframes moveSlideshow {
  100% {
    transform: translateX(-66.6666%); } }
  .home-container .about-container .recommend-card {
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    width: 100%;
    background: #fff;
    overflow: hidden;
    padding-right: 25px; }
    .home-container .about-container .recommend-card.red {
      background: #fbe2e2; }
    .home-container .about-container .recommend-card .recommend-icon {
      background-color: #fff;
      font-size: 24px;
      margin-right: 25px;
      min-width: 66px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      padding: 15px; }
      .home-container .about-container .recommend-card .recommend-icon.first-color {
        background-color: #f5af19; }
      .home-container .about-container .recommend-card .recommend-icon.second-color {
        background-color: #96c93d; }
      .home-container .about-container .recommend-card .recommend-icon.third-color {
        background-color: #ff6767; }
      .home-container .about-container .recommend-card .recommend-icon.fourth-color {
        background-color: #56ccf2; }
      .home-container .about-container .recommend-card .recommend-icon.fifth-color {
        background-color: #c05bd2; }
      .home-container .about-container .recommend-card .recommend-icon.sixth-color {
        background-color: #5b5dd2; }
      .home-container .about-container .recommend-card .recommend-icon.seven-color {
        background-color: #cad25b; }
    .home-container .about-container .recommend-card .recommend-text {
      font-size: 18px;
      color: #000;
      font-weight: bold;
      margin-bottom: 0px !important; }
  .home-container .casestudy {
    position: relative;
    padding-top: 40px; }
    .home-container .casestudy-body {
      position: relative;
      background-color: #f9fafc; }
      .home-container .casestudy-body .casestudy-container {
        max-width: 729px;
        width: 100%;
        display: flex;
        margin-right: auto;
        margin-left: auto;
        padding: 5em 40px 5em 40px; }
        .home-container .casestudy-body .casestudy-container .casestudy-card {
          position: relative;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          gap: 12px; }
          .home-container .casestudy-body .casestudy-container .casestudy-card img {
            height: auto;
            width: 200px;
            object-fit: contain; }
          .home-container .casestudy-body .casestudy-container .casestudy-card .title {
            font-size: 22px;
            font-weight: bold;
            color: #182747;
            margin-bottom: 10px; }
            .home-container .casestudy-body .casestudy-container .casestudy-card .title span {
              letter-spacing: -4px; }
          .home-container .casestudy-body .casestudy-container .casestudy-card .desc {
            font-size: 16px;
            color: #494a60;
            margin-bottom: 0; }
        .home-container .casestudy-body .casestudy-container::before {
          content: '';
          background: url("/assets/images/caseStudyBack.png") no-repeat center center;
          -webkit-background-size: cover;
          -moz-background-size: cover;
          -o-background-size: cover;
          background-size: 120%;
          position: absolute;
          left: 0;
          right: 0;
          bottom: 0;
          top: 0; }
          @media (max-width: 960px) {
            .home-container .casestudy-body .casestudy-container::before {
              background-size: 200%; } }
    .home-container .casestudy.detail {
      padding-top: 71px; }
      .home-container .casestudy.detail .casestudy-body {
        background-color: #f9fafc; }
        .home-container .casestudy.detail .casestudy-body .casestudy-container {
          padding-bottom: 150px !important; }
    @media (max-width: 600px) {
      .home-container .casestudy {
        padding-top: 20px; }
        .home-container .casestudy-body .casestudy-container {
          padding: 3em 20px !important; }
          .home-container .casestudy-body .casestudy-container .casestudy-card .title {
            font-size: 18px;
            margin-bottom: 5px; }
          .home-container .casestudy-body .casestudy-container .casestudy-card .desc {
            font-size: 14px;
            color: #70757a; }
          .home-container .casestudy-body .casestudy-container::before {
            content: '';
            background: url("/assets/images/caseStudyBack.png") no-repeat center center;
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            top: 0; } }
  .home-container .cover-container {
    position: absolute;
    height: 750px;
    top: 0;
    left: 0;
    right: 0; }
    .home-container .cover-container .container {
      position: relative;
      max-width: 1200px;
      margin-right: auto;
      margin-left: auto;
      width: 100%;
      height: 100%; }
      .home-container .cover-container .container::before {
        content: '';
        background-image: url("/assets/images/header-backV2.png");
        background-size: cover;
        background-repeat: no-repeat, repeat;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0; }
  .home-container .know-main-container {
    margin-top: 70px;
    position: relative;
    overflow: hidden; }
    @media (max-width: 480px) {
      .home-container .know-main-container {
        margin-top: 0px; } }
    .home-container .know-main-container .cover-container {
      position: absolute;
      height: 750px;
      top: 0;
      left: 0;
      right: 0; }
      .home-container .know-main-container .cover-container .container {
        position: relative;
        max-width: 1200px;
        margin-right: auto;
        margin-left: auto;
        width: 100%;
        height: 100%; }
        .home-container .know-main-container .cover-container .container::before {
          content: '';
          background-image: url("/assets/images/header-backV2.png");
          background-size: cover;
          background-repeat: no-repeat, repeat;
          position: absolute;
          left: 0;
          right: 0;
          bottom: 0;
          top: 0; }
  .home-container .intro-container .intro-right-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%; }
    .home-container .intro-container .intro-right-container .info-icon-container {
      display: flex;
      margin-bottom: 30px;
      justify-content: center; }
      .home-container .intro-container .intro-right-container .info-icon-container span {
        font-size: 26px;
        color: #000000 !important;
        padding: 12px 20px;
        background-color: #fff;
        border-right: 1px solid #d0d0d0;
        height: 70px;
        flex: 1;
        text-align: center;
        font-weight: 600; }
        .home-container .intro-container .intro-right-container .info-icon-container span.end {
          margin-right: 0;
          border-right: 0px solid transparent; }
        .home-container .intro-container .intro-right-container .info-icon-container span .info-icon {
          margin-right: 10px; }
    .home-container .intro-container .intro-right-container .info-title-container {
      background-color: #ecf2fe;
      padding: 30px;
      font-size: 24px;
      color: #182747;
      border-radius: 10px;
      font-weight: 600; }
      .home-container .intro-container .intro-right-container .info-title-container .info-card-container {
        display: flex;
        margin-top: 30px; }
        .home-container .intro-container .intro-right-container .info-title-container .info-card-container span {
          font-size: 32px;
          color: '#000000' !important;
          padding: 25px 12px;
          background-color: #fff;
          border-radius: 10px;
          box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.15);
          margin-right: 25px;
          flex: 1;
          text-align: center; }
          .home-container .intro-container .intro-right-container .info-title-container .info-card-container span .info-desc {
            font-size: 15px;
            margin-top: 5px;
            margin-bottom: 0px;
            color: #182747; }
          .home-container .intro-container .intro-right-container .info-title-container .info-card-container span.first-color {
            color: #f5af19; }
          .home-container .intro-container .intro-right-container .info-title-container .info-card-container span.second-color {
            color: #96c93d; }
          .home-container .intro-container .intro-right-container .info-title-container .info-card-container span.third-color {
            color: #ff6767; }
          .home-container .intro-container .intro-right-container .info-title-container .info-card-container span.end {
            margin-right: 0 !important; }
    .home-container .intro-container .intro-right-container .remind-text {
      font-size: 24px;
      color: #f5af19;
      font-weight: 600;
      text-align: center; }
  .home-container .home-max-container {
    max-width: 1200px;
    width: 100%;
    padding-right: 40px;
    padding-left: 40px;
    display: flex; }
  .home-container .header-container {
    height: 100%;
    min-height: calc(100vh - 68px);
    max-width: 1200px;
    margin-right: auto;
    margin-left: auto;
    display: flex;
    width: 100%;
    position: relative; }
    .home-container .header-container .section-1 {
      background-color: white;
      height: 100%;
      padding: 0% 5%; }
      .home-container .header-container .section-1 .section-sub {
        height: 100%;
        padding: 13% 5%;
        position: relative; }
        .home-container .header-container .section-1 .section-sub .panel-container {
          position: absolute;
          left: -25px;
          top: 25px;
          bottom: -25px;
          right: 25px;
          z-index: 0;
          padding: 13% 5%; }
          .home-container .header-container .section-1 .section-sub .panel-container .panel {
            width: 100%;
            height: 100%;
            border-top-left-radius: 25px;
            border-bottom-right-radius: 25px;
            background: linear-gradient(103deg, #05a6ef 0%, #0b89b7) 100% center; }
        .home-container .header-container .section-1 .section-sub img {
          width: 100%;
          height: 100%;
          flex: 1;
          min-height: 200px;
          object-fit: cover;
          border-top-left-radius: 25px;
          border-bottom-right-radius: 25px;
          position: relative;
          background-color: #f9fafc;
          box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); }
    .home-container .header-container .down-scroll {
      position: absolute;
      background-color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 44px;
      width: 44px;
      border-radius: 22px;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
      bottom: 15px;
      left: 50%;
      transform: translate(-50%, -50%); }
  .home-container .footer-top {
    height: 20px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background-color: white;
    border-radius: 0 0 5rem 5rem;
    box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.2); }
  .home-container .layout-container {
    max-width: 1200px;
    width: 100%;
    display: flex;
    margin-right: auto;
    margin-left: auto;
    padding: 5em 40px 5em 40px;
    position: relative; }
    .home-container .layout-container.voice {
      max-width: 1600px; }
    .home-container .layout-container.primary-back {
      margin-top: 40px;
      padding: 3em 0 0 0;
      border-top-left-radius: 35px;
      border-bottom-right-radius: 35px;
      background: linear-gradient(103deg, #05a6ef 0%, #0b89b7) 100% center; }
    .home-container .layout-container.md {
      max-width: 900px; }
    .home-container .layout-container.no-top {
      padding-top: 0 !important; }
    .home-container .layout-container .intro-footer {
      background-color: #ffd700;
      padding: 15px 20px;
      font-size: 24px;
      color: #182747; }
    .home-container .layout-container .intro-header {
      background-color: #ecf2fe;
      padding: 15px 20px;
      font-size: 24px;
      color: #182747; }
    .home-container .layout-container .under-line {
      background: linear-gradient(transparent 70%, #ffd700 70%) !important; }
    .home-container .layout-container .gold-back {
      background: linear-gradient(transparent 65%, #ffd700 65%) !important; }
    .home-container .layout-container .gold-color {
      background: #ffd700 !important; }
    .home-container .layout-container.gray-back {
      background-color: #f9fafc; }
    .home-container .layout-container .main-shadow {
      box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.15) !important; }
    .home-container .layout-container .webImgSm {
      display: none; }
    .home-container .layout-container .border-left-line {
      position: relative; }
      .home-container .layout-container .border-left-line::before {
        content: '';
        height: 3px;
        width: 33px;
        background-color: #2eca73;
        position: absolute;
        left: -33px;
        bottom: 22px; }
    .home-container .layout-container .green-left {
      border-left: 3px solid #2eca73; }
    .home-container .layout-container .q-tag {
      font-size: 28px;
      font-weight: 600;
      margin-right: 20px;
      color: #0057ff;
      margin-bottom: 0px; }
    .home-container .layout-container .a-tag {
      font-size: 28px;
      font-weight: 600;
      margin-right: 20px;
      color: #2eca73;
      margin-bottom: 0px; }
    .home-container .layout-container .map-container {
      height: 320px;
      position: relative; }
      .home-container .layout-container .map-container .info {
        background-color: #ffffff;
        padding: 10px 15px;
        position: absolute;
        left: 15px;
        top: 15px; }
    .home-container .layout-container .company-img {
      height: 100%;
      min-height: 300px; }
      .home-container .layout-container .company-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border: 0px solid transparent !important; }
    .home-container .layout-container .like-container {
      position: absolute;
      left: 0px;
      right: 0px;
      top: 70px;
      display: flex;
      align-items: center;
      justify-content: space-between; }
    .home-container .layout-container.center-container {
      align-items: center;
      justify-content: center;
      width: 100%; }
    .home-container .layout-container .title-text {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 25px !important; }
      .home-container .layout-container .title-text h1 {
        font-size: 25px;
        font-weight: 600;
        color: white;
        text-transform: uppercase;
        text-align: center;
        background: #0057ff !important;
        padding: 5px 30px 5px 30px !important;
        position: relative;
        border-radius: 7px; }
        .home-container .layout-container .title-text h1::before {
          content: url("/assets/images/arrowDown.svg");
          height: 30px;
          position: absolute;
          left: 50%;
          transform: translate(-50%, 0);
          bottom: -16px; }
      .home-container .layout-container .title-text p {
        font-size: 25px; }
    .home-container .layout-container .icon-romu-container {
      font-size: 18px;
      color: '#000000' !important;
      padding: 12px 15px;
      background-color: #fff;
      border-radius: 10px;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
      margin-bottom: 15px;
      display: flex; }
    .home-container .layout-container .romu-web-img {
      position: absolute;
      left: 650px;
      top: 80px;
      display: flex; }
    .home-container .layout-container .video-container {
      width: 100%;
      margin-bottom: 20px; }
      .home-container .layout-container .video-container .video {
        position: relative;
        width: 100%;
        height: 0;
        min-height: 485px;
        padding-bottom: 56.25%;
        padding-right: 40px; }
        @media (max-width: 767px) {
          .home-container .layout-container .video-container .video {
            min-height: auto; } }
        .home-container .layout-container .video-container .video iframe {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          border-radius: 10px;
          box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.15); }
    .home-container .layout-container.footer {
      padding: 4em 0 4em 0; }
    .home-container .layout-container .function-container {
      max-width: 1200px;
      display: flex;
      min-width: 600px;
      width: auto; }
      .home-container .layout-container .function-container .text-container {
        width: 100%;
        margin: 10px;
        overflow: hidden;
        border: 2px solid #dbdbdb; }
        .home-container .layout-container .function-container .text-container .text {
          display: flex;
          align-items: center;
          justify-content: center;
          height: 60px;
          font-size: 18px;
          color: #182747;
          font-weight: 600;
          padding: 5px; }
          .home-container .layout-container .function-container .text-container .text .close {
            color: #f23d6a !important; }
          .home-container .layout-container .function-container .text-container .text .check {
            color: #2eca73 !important; }
            .home-container .layout-container .function-container .text-container .text .check.text {
              text-align: center; }
          .home-container .layout-container .function-container .text-container .text.light {
            background-color: #f0f0f0; }
        .home-container .layout-container .function-container .text-container .title {
          display: flex;
          align-items: center;
          justify-content: center;
          height: 60px;
          font-size: 18px;
          color: #182747;
          font-weight: 600;
          padding: 5px;
          text-align: center; }
          .home-container .layout-container .function-container .text-container .title.romu {
            color: #fff;
            background: #0057ff !important; }
        .home-container .layout-container .function-container .text-container p {
          margin-bottom: 0; }
        .home-container .layout-container .function-container .text-container.romu {
          border: 3px solid #0057ff;
          background-color: rgba(39, 110, 241, 0.1); }
          .home-container .layout-container .function-container .text-container.romu .text.light {
            background-color: rgba(255, 255, 255, 0.6); }
        .home-container .layout-container .function-container .text-container.title {
          border: 0px solid transparent !important; }
          .home-container .layout-container .function-container .text-container.title .text {
            justify-content: flex-start;
            font-size: 16px;
            border-bottom: 1px solid #d0d0d0; }
    .home-container .layout-container .plans-container {
      max-width: 1200px;
      display: flex;
      min-width: 600px;
      width: auto; }
      .home-container .layout-container .plans-container .text-container {
        width: 100%;
        margin: 10px;
        overflow: hidden; }
        .home-container .layout-container .plans-container .text-container .text {
          display: flex;
          align-items: center;
          justify-content: center;
          height: 80px;
          font-size: 16px;
          color: #182747;
          font-weight: 600;
          padding: 5px;
          line-height: 22px;
          text-align: center; }
          .home-container .layout-container .plans-container .text-container .text .close {
            color: #bbbbbb !important; }
          .home-container .layout-container .plans-container .text-container .text .check {
            color: #2eca73 !important; }
            .home-container .layout-container .plans-container .text-container .text .check.text {
              text-align: center; }
          .home-container .layout-container .plans-container .text-container .text.light {
            background-color: #f0f0f0; }
          .home-container .layout-container .plans-container .text-container .text.sm {
            height: 55px; }
        .home-container .layout-container .plans-container .text-container .title {
          display: flex;
          align-items: center;
          justify-content: center;
          height: 80px;
          font-size: 18px;
          color: #182747;
          font-weight: 600;
          padding: 5px;
          text-align: center; }
          .home-container .layout-container .plans-container .text-container .title.romu {
            color: #fff;
            background: #0057ff !important; }
        .home-container .layout-container .plans-container .text-container p {
          margin-bottom: 0; }
        .home-container .layout-container .plans-container .text-container.romu {
          border: 3px solid #0057ff; }
        .home-container .layout-container .plans-container .text-container.title .text {
          justify-content: flex-start;
          font-size: 16px;
          border-bottom: 1px solid #d0d0d0; }
    .home-container .layout-container .plan-container {
      max-width: 1200px;
      display: flex;
      min-width: 600px;
      width: auto; }
      .home-container .layout-container .plan-container .plan-text-container {
        width: 100%;
        margin: 10px;
        background-color: #fff; }
        .home-container .layout-container .plan-container .plan-text-container .plan-text {
          display: flex;
          align-items: center;
          height: 140px;
          font-size: 18px;
          color: #182747;
          font-weight: 600;
          padding: 5px 20px; }
          .home-container .layout-container .plan-container .plan-text-container .plan-text .close {
            color: #f23d6a !important; }
          .home-container .layout-container .plan-container .plan-text-container .plan-text .check {
            color: #2eca73 !important; }
            .home-container .layout-container .plan-container .plan-text-container .plan-text .check.text {
              text-align: center; }
          .home-container .layout-container .plan-container .plan-text-container .plan-text.title {
            height: 60px; }
          .home-container .layout-container .plan-container .plan-text-container .plan-text ul {
            display: block;
            list-style-type: disc;
            margin-block-start: 0px !important;
            margin-block-end: 0px !important;
            margin-inline-start: 0px;
            margin-inline-end: 0px;
            padding-inline-start: 15px !important; }
        .home-container .layout-container .plan-container .plan-text-container .bottom {
          border-bottom: 1px solid #d0d0d0; }
        .home-container .layout-container .plan-container .plan-text-container .title {
          display: flex;
          align-items: center;
          justify-content: center;
          height: 60px;
          font-size: 18px;
          color: #182747;
          font-weight: 600;
          padding: 5px;
          text-align: center; }
          .home-container .layout-container .plan-container .plan-text-container .title.romu {
            color: #fff;
            background: linear-gradient(340deg, #27b3db, #276ef1) !important; }
        .home-container .layout-container .plan-container .plan-text-container p {
          margin-bottom: 0; }
        .home-container .layout-container .plan-container .plan-text-container.romu {
          border: 3px solid #0057ff; }
        .home-container .layout-container .plan-container .plan-text-container.title .plan-text {
          justify-content: flex-start;
          color: #fff; }
        .home-container .layout-container .plan-container .plan-text-container .gradient {
          color: #fff;
          background: linear-gradient(340deg, #27b3db, #276ef1) !important; }
    .home-container .layout-container .image-width-container {
      max-width: 800px;
      margin-right: auto;
      margin-left: auto;
      width: 100%; }
  .home-container .about-title-container {
    background-color: #f0f0f0;
    border-radius: 10px;
    padding: 40px; }
    .home-container .about-title-container .about-info-container {
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center; }
      .home-container .about-title-container .about-info-container .about-info {
        padding: 25px 15px;
        border-bottom: 1px solid #d0d0d0;
        text-align: center; }
        .home-container .about-title-container .about-info-container .about-info .about-title {
          font-size: 18px;
          margin-bottom: 0;
          color: #182747;
          font-weight: 600;
          padding-top: 10px; }
        .home-container .about-title-container .about-info-container .about-info.end {
          border-bottom: 0px solid transparent; }
  .home-container .footer-privacy-mark {
    height: 100px; }
  @media (max-width: 769px) {
    .home-container .footer-privacy-mark-web {
      display: none !important; } }
  @media (min-width: 768px) {
    .home-container .footer-privacy-mark-mobile {
      display: none !important; } }
  .home-container .footer-section {
    background: linear-gradient(340deg, #276ef1, #276ef1) !important;
    padding: 20px 20px 0px 20px;
    margin-top: 40px; }
    @media (max-width: 960px) {
      .home-container .footer-section {
        padding: 20px 20px 0px 20px; } }
    .home-container .footer-section .footer-container .footer-body {
      padding: 2em 4px 2em 4px;
      position: relative;
      overflow: hidden;
      width: 100%;
      max-width: 1200px;
      margin-right: auto;
      margin-left: auto; }
      @media (max-width: 960px) {
        .home-container .footer-section .footer-container .footer-body {
          padding: 2em 4px 1em 4px; } }
      .home-container .footer-section .footer-container .footer-body .line-container {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        padding-bottom: 30px; }
        .home-container .footer-section .footer-container .footer-body .line-container .title {
          font-size: 16px;
          margin-bottom: 25px;
          font-weight: bold;
          color: #fff; }
        .home-container .footer-section .footer-container .footer-body .line-container .button {
          text-align: left !important;
          width: auto !important;
          padding: 0 !important;
          color: white !important;
          margin-bottom: 5px;
          font-weight: 500 !important;
          min-height: 32px;
          display: flex !important;
          align-items: center !important; }
          .home-container .footer-section .footer-container .footer-body .line-container .button:hover {
            color: white !important;
            background-color: transparent !important; }
      .home-container .footer-section .footer-container .footer-body .logo-section {
        display: flex;
        align-items: center;
        gap: 15px;
        margin-bottom: 30px; }
        .home-container .footer-section .footer-container .footer-body .logo-section .footer-logo {
          height: 30px; }
      .home-container .footer-section .footer-container .footer-body .footer-brand .contact-info .company-name {
        font-size: 16px;
        font-weight: 600;
        margin-bottom: 25px;
        color: #fff; }
      .home-container .footer-section .footer-container .footer-body .footer-brand .contact-info .info-item {
        margin-top: 25px;
        display: flex;
        gap: 10px;
        align-items: center;
        font-weight: 500; }
        .home-container .footer-section .footer-container .footer-body .footer-brand .contact-info .info-item svg {
          width: 16px;
          height: 16px; }
        .home-container .footer-section .footer-container .footer-body .footer-brand .contact-info .info-item a {
          color: white;
          text-decoration: none; }
          .home-container .footer-section .footer-container .footer-body .footer-brand .contact-info .info-item a:hover {
            text-decoration: underline; }
      .home-container .footer-section .footer-container .footer-body .footer-brand p {
        font-size: 16px;
        margin-bottom: 0;
        margin-top: 20px;
        font-weight: bold;
        color: #fff;
        line-height: 28px; }
      .home-container .footer-section .footer-container .footer-body .footer-brand a {
        color: #fff;
        text-decoration: underline; }
      .home-container .footer-section .footer-container .footer-body .app-downloads .app-download-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 10px; }
        .home-container .footer-section .footer-container .footer-body .app-downloads .app-download-container .app-download-title {
          font-size: 14px;
          color: rgba(255, 255, 255, 0.9);
          font-weight: 700; }
        .home-container .footer-section .footer-container .footer-body .app-downloads .app-download-container .app-downloads-row {
          display: flex;
          gap: 10px; }
        .home-container .footer-section .footer-container .footer-body .app-downloads .app-download-container h4 {
          font-size: 14px;
          font-weight: 600;
          color: #fff; }
        .home-container .footer-section .footer-container .footer-body .app-downloads .app-download-container img {
          width: 100%;
          height: auto;
          max-width: 150px; }
      .home-container .footer-section .footer-container .footer-body .app-downloads .store-button {
        display: flex;
        padding: 5px 10px;
        align-items: center;
        justify-content: center;
        gap: 10px;
        border-radius: 7px;
        border: 1px solid #e8e8e8;
        color: #fff; }
        .home-container .footer-section .footer-container .footer-body .app-downloads .store-button img {
          width: 25px;
          height: 25px;
          object-fit: contain;
          object-position: center;
          border-radius: 6px; }
        .home-container .footer-section .footer-container .footer-body .app-downloads .store-button .store-button-text {
          display: flex;
          flex-direction: column;
          font-size: 8px;
          font-weight: 400;
          line-height: 14px; }
          .home-container .footer-section .footer-container .footer-body .app-downloads .store-button .store-button-text .store-button-title {
            text-transform: uppercase;
            font-size: 8px; }
          .home-container .footer-section .footer-container .footer-body .app-downloads .store-button .store-button-text .store-button-subtitle {
            text-transform: capitalize;
            font-size: 10px;
            font-weight: 700;
            line-height: 18px; }
    .home-container .footer-section .footer-container .store-container {
      border-top: 1px solid rgba(255, 255, 255, 0.2);
      padding-top: 20px;
      display: flex;
      align-items: center;
      flex-wrap: wrap; }
    .home-container .footer-section .footer-container .footer-copyright {
      background-color: #222426;
      padding: 15px;
      color: #fff;
      font-size: 14px;
      text-align: center; }
  .home-container .romu-stepby-web {
    display: block; }
  .home-container .romu-stepby-mobile {
    display: none; }

html {
  scroll-behavior: smooth; }

.toTop-button {
  position: fixed !important;
  bottom: 35px;
  right: 35px;
  z-index: 2 !important;
  box-shadow: 0 3px 15px 0 rgba(0, 0, 0, 0.3) !important;
  font-size: 16px !important;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.5s linear !important; }
  .toTop-button.show {
    visibility: visible !important;
    opacity: 1 !important; }

.contact-buttons {
  display: flex;
  align-items: center;
  margin: 0 auto;
  width: 100%;
  max-width: 800px;
  gap: 20px;
  padding: 40px 0;
  flex-wrap: wrap; }
  .contact-buttons button {
    flex: 1; }

.table-border table,
.table-border th,
.table-border td {
  border-color: #182747 !important; }

.table-border .ant-table.ant-table-bordered > .ant-table-container {
  border-color: #182747 !important; }

.scores-card {
  border-radius: 10px;
  background-color: #fff;
  box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.1); }
  .scores-card img {
    width: 100%; }

.awards-slider {
  position: relative;
  width: 100%;
  aspect-ratio: 16/8;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0px 4px 30px 0px rgba(0, 87, 255, 0.2); }
  .awards-slider .slider-container {
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform 0.5s ease-in-out;
    touch-action: pan-y pinch-zoom; }
  .awards-slider .slide {
    flex: 0 0 100%;
    width: 100%;
    height: 100%; }
    .awards-slider .slide img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center; }

.slider-dots {
  margin-top: 20px;
  margin-right: auto;
  margin-left: auto;
  display: flex;
  justify-content: center;
  gap: 8px;
  z-index: 2; }
  .slider-dots .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #0057ff;
    opacity: 0.6;
    cursor: pointer;
    transition: opacity 0.3s ease; }
    .slider-dots .dot.active {
      opacity: 1; }

.landing-footer {
  font-family: 'M PLUS 1', sans-serif; }
  .landing-footer .support-section {
    padding: 0px 20px;
    transform: translateY(40%); }
    @media (max-width: 960px) {
      .landing-footer .support-section {
        padding: 0px 10px; } }
    .landing-footer .support-section .support-card {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-between;
      max-width: calc(100% - 10vw);
      margin: 0 auto;
      background: #ecf2fe;
      padding: 30px;
      border-radius: 12px;
      text-align: left;
      box-shadow: 0px 4px 30px rgba(0, 87, 255, 0.1); }
      .landing-footer .support-section .support-card .pattern {
        position: absolute;
        top: 0;
        right: 0;
        width: 60%;
        object-fit: cover;
        z-index: 0;
        object-position: center; }
      .landing-footer .support-section .support-card .icon-container {
        position: relative;
        width: 100%;
        z-index: 1;
        height: auto;
        border-radius: 12px;
        object-fit: contain;
        object-position: center;
        box-shadow: 0px 4px 35px 0px rgba(26, 42, 97, 0.25); }
        @media (max-width: 480px) {
          .landing-footer .support-section .support-card .icon-container {
            display: none; } }
      .landing-footer .support-section .support-card h2 {
        font-family: 'M PLUS 1', sans-serif;
        font-size: 24px;
        font-weight: 600;
        margin-bottom: 10px;
        color: #182747; }
        @media (max-width: 960px) {
          .landing-footer .support-section .support-card h2 {
            font-size: 18px; } }
      .landing-footer .support-section .support-card .support-hours {
        font-family: 'M PLUS 1', sans-serif;
        color: #666;
        margin-bottom: 20px; }
      .landing-footer .support-section .support-card .contact-button {
        height: 48px;
        padding: 0 40px;
        font-size: 16px;
        border-radius: 24px;
        background: #0057ff;
        border: none;
        font-family: 'M PLUS 1';
        font-size: 18px;
        font-weight: 500;
        line-height: 26px; }
        .landing-footer .support-section .support-card .contact-button:hover {
          background: #004ee6; }
  .landing-footer .main-footer {
    background-color: #0057ff;
    padding: 40px 20px 60px 20px;
    color: #fff; }
    .landing-footer .main-footer .footer-content {
      max-width: 1200px;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      gap: 40px; }
      @media (max-width: 960px) {
        .landing-footer .main-footer .footer-content {
          flex-direction: column; } }
      .landing-footer .main-footer .footer-content .footer-links {
        display: flex;
        gap: 60px; }
        @media (max-width: 480px) {
          .landing-footer .main-footer .footer-content .footer-links {
            flex-direction: column;
            gap: 30px; } }
        .landing-footer .main-footer .footer-content .footer-links .links-column {
          display: flex;
          flex-direction: column;
          gap: 15px; }
          .landing-footer .main-footer .footer-content .footer-links .links-column a {
            color: #fff;
            text-decoration: none;
            font-size: 14px; }
            .landing-footer .main-footer .footer-content .footer-links .links-column a:hover {
              text-decoration: underline; }
  .landing-footer .copyright {
    background-color: #00091a;
    padding: 15px;
    text-align: center; }
    .landing-footer .copyright p {
      color: #fff;
      margin: 0;
      font-size: 14px; }

.tabs-content {
  position: relative;
  padding: 0 40px;
  margin-top: 40px; }
  @media (max-width: 960px) {
    .tabs-content {
      padding: 0; } }
  .tabs-content .tabs-content-title {
    padding: 0 24px; }
  .tabs-content .tabs-content-slider {
    position: relative;
    width: 100%;
    margin: 40px 0;
    display: flex;
    align-items: center;
    gap: 20px; }
    @media (max-width: 960px) {
      .tabs-content .tabs-content-slider {
        margin: 20px 0;
        gap: 0; } }
    .tabs-content .tabs-content-slider .slider-arrow {
      flex: 0 0 48px;
      width: 48px;
      height: 48px;
      border: none;
      background: none;
      padding: 0;
      cursor: pointer;
      z-index: 2;
      color: #0057ff;
      transition: color 0.3s ease; }
      @media (max-width: 960px) {
        .tabs-content .tabs-content-slider .slider-arrow {
          display: none; } }
      .tabs-content .tabs-content-slider .slider-arrow.disabled {
        color: #d9d9d9;
        cursor: not-allowed; }
      .tabs-content .tabs-content-slider .slider-arrow:focus {
        outline: none; }
    .tabs-content .tabs-content-slider .slider-container {
      flex: 1;
      overflow: hidden;
      border-radius: 12px; }
      @media (max-width: 960px) {
        .tabs-content .tabs-content-slider .slider-container {
          border-radius: 0; } }
    .tabs-content .tabs-content-slider .slider-track {
      display: flex;
      transition: transform 0.5s ease-in-out;
      width: 100%;
      touch-action: pan-y pinch-zoom; }
    .tabs-content .tabs-content-slider .slider-slide {
      flex: 0 0 100%;
      width: 100%;
      max-height: 370px; }
      @media (max-width: 960px) {
        .tabs-content .tabs-content-slider .slider-slide {
          max-height: 300px; } }
      @media (max-width: 480px) {
        .tabs-content .tabs-content-slider .slider-slide {
          max-height: 500px; } }
      .tabs-content .tabs-content-slider .slider-slide img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: center; }
        @media (max-width: 960px) {
          .tabs-content .tabs-content-slider .slider-slide img {
            object-fit: contain; } }
  .tabs-content .tabs-content-slider-indicator {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 20px; }
    .tabs-content .tabs-content-slider-indicator .indicator-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background-color: #0057ff;
      opacity: 0.6;
      cursor: pointer;
      transition: opacity 0.3s ease; }
      .tabs-content .tabs-content-slider-indicator .indicator-dot.active {
        opacity: 1; }

.maintenance-container {
  background: linear-gradient(340deg, #27b3db, #276ef1) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  flex: 1;
  height: 100vh;
  padding: 20px;
  position: relative;
  overflow-x: hidden;
  overflow-y: auto; }
  .maintenance-container .maintenance-body {
    background-color: #fff;
    border-radius: 15px;
    max-width: 700px;
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    margin-top: 100px; }
    .maintenance-container .maintenance-body .text-container {
      text-align: center;
      padding: 50px 10px; }
      .maintenance-container .maintenance-body .text-container .construction-image {
        height: 300px;
        margin-top: -200px; }
      .maintenance-container .maintenance-body .text-container .under-br {
        display: flex;
        line-height: 0; }
      .maintenance-container .maintenance-body .text-container h3 {
        font-size: 38px;
        color: #182747;
        font-weight: bold;
        margin-bottom: 20px; }
      .maintenance-container .maintenance-body .text-container p {
        font-size: 20px;
        color: rgba(0, 0, 0, 0.6);
        margin-bottom: 0;
        line-height: 1.8; }
      .maintenance-container .maintenance-body .text-container .contact {
        color: #182747;
        margin-top: 15px; }
        .maintenance-container .maintenance-body .text-container .contact a {
          color: #0057ff;
          text-decoration: underline; }
    .maintenance-container .maintenance-body .logo-container {
      padding: 20px;
      border-top: 1px solid #f0f0f0;
      background-color: #f9f9f9;
      display: flex;
      justify-content: center;
      align-items: center;
      border-bottom-left-radius: 15px;
      border-bottom-right-radius: 15px; }
      .maintenance-container .maintenance-body .logo-container .romu-logo {
        height: 40px; }

.column {
  padding-top: 70px; }
  .column-header {
    background-color: #ecf2fe; }
    .column-header .head-container {
      display: flex;
      padding: 60px 40px 60px 40px;
      padding-bottom: 130px;
      max-width: 1140px;
      width: 100%;
      margin: 0 auto; }
  .column-body {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 0 40px 60px 40px;
    position: relative;
    margin-top: -90px; }
    .column-body .mostViewed-list-container {
      position: sticky;
      top: 90px;
      display: flex;
      flex-direction: column;
      gap: 20px; }
      .column-body .mostViewed-list-container .ant-input-group-wrapper {
        box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.1);
        height: 50px;
        border-radius: 15px;
        overflow: hidden; }
      .column-body .mostViewed-list-container .ant-input {
        height: 50px;
        border-width: 0; }
      .column-body .mostViewed-list-container .ant-input-search-button {
        border-width: 0;
        height: 50px;
        box-shadow: 0 0 0 0 transparent;
        width: 42px; }
        .column-body .mostViewed-list-container .ant-input-search-button span {
          color: #0057ff;
          font-size: 20px;
          height: 20px;
          width: 20px; }
      .column-body .mostViewed-list-container .mostViewed-list {
        box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.1);
        background-color: #fff;
        border-radius: 15px; }
    .column-body .ant-list-pagination {
      margin-top: 0; }
  .column-card {
    flex: 1;
    box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.1);
    background-color: #fff;
    border-radius: 15px;
    width: 100%;
    overflow: hidden;
    margin-bottom: 40px;
    display: flex;
    flex-direction: column; }
    .column-card .ant-image {
      width: 100%;
      height: 190px;
      background-color: #f9fafc; }
      .column-card .ant-image img {
        width: 100%;
        height: 190px;
        object-fit: cover; }
    .column-card .info-container {
      flex: 1;
      padding: 20px;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 12px; }
      .column-card .info-container .title {
        word-break: break-all;
        margin-top: 0;
        font-size: 18px;
        font-weight: bold;
        color: #182747;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        /* number of lines to show */
        line-clamp: 2;
        -webkit-box-orient: vertical; }
        .column-card .info-container .title:hover {
          opacity: 70%; }
      .column-card .info-container .date {
        font-size: 14px;
        color: #70757a; }
      .column-card .info-container .desc {
        word-break: break-all;
        font-size: 16px;
        color: #70757a;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        /* number of lines to show */
        line-clamp: 2;
        -webkit-box-orient: vertical; }
      .column-card .info-container p {
        margin-bottom: 0; }
      .column-card .info-container button {
        padding: 0;
        height: auto; }
      .column-card .info-container a {
        margin-top: auto;
        padding: 0;
        height: auto;
        color: #0057ff;
        font-weight: bold; }
        .column-card .info-container a:hover span {
          text-decoration: underline; }
    .column-card.top {
      background-color: transparent;
      box-shadow: 0 0 0 0 transparent;
      margin-bottom: 0; }
      .column-card.top .ant-image {
        height: 318px;
        border-radius: 15px; }
        .column-card.top .ant-image img {
          height: 318px;
          border-radius: 15px; }
      .column-card.top .info-container {
        gap: 15px;
        padding: 0; }
        .column-card.top .info-container .title {
          font-size: 28px; }
        .column-card.top .info-container .desc {
          word-break: break-all;
          font-size: 16px;
          -webkit-line-clamp: 3;
          /* number of lines to show */
          line-clamp: 3; }
        .column-card.top .info-container .more {
          display: flex;
          align-items: center;
          padding: 0 15px;
          height: 38px;
          color: #fff; }
          .column-card.top .info-container .more:hover span {
            text-decoration: underline; }
    .column-card.most {
      flex-direction: row;
      background-color: transparent;
      box-shadow: 0 0 0 0 transparent;
      margin-bottom: 0;
      display: flex;
      align-items: center;
      gap: 15px;
      padding: 0 15px; }
      .column-card.most .ant-image {
        height: 55px;
        width: 60px;
        border-radius: 8px; }
        .column-card.most .ant-image img {
          height: 55px;
          width: 60px;
          border-radius: 8px; }
      .column-card.most .info-container {
        gap: 15px;
        padding: 0; }
        .column-card.most .info-container .title {
          -webkit-line-clamp: 2;
          /* number of lines to show */
          word-break: break-all;
          font-size: 14px; }
  .column.detail::before {
    content: '';
    position: absolute;
    top: 70px;
    right: 0;
    left: 0;
    height: 270px;
    background-color: #ecf2fe;
    transition: 0.6s; }
  .column.detail .column-body {
    max-width: 1000px;
    margin-top: 0;
    padding: 60px 40px 60px 40px;
    display: flex;
    flex-direction: column;
    gap: 25px; }
    .column.detail .column-body .ant-image {
      height: 400px;
      width: 100%;
      border-radius: 15px;
      background-color: #f9fafc;
      box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.1);
      margin-bottom: 15px; }
      .column.detail .column-body .ant-image img {
        height: 400px;
        width: 100%;
        border-radius: 15px;
        object-fit: cover; }
    .column.detail .column-body .title {
      color: #182747;
      font-weight: bold;
      font-size: 28px;
      margin-bottom: 0;
      word-break: break-all; }
    .column.detail .column-body .date {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 18px;
      color: #70757a; }
      .column.detail .column-body .date svg {
        color: #0057ff; }
    .column.detail .column-body .post {
      font-size: 18px;
      color: #182747;
      word-break: break-all; }
  .column .ant-list {
    width: 100%; }
  .column .ant-list-grid .ant-col > .ant-list-item {
    display: flex;
    flex: 1;
    flex-direction: column;
    margin-bottom: 0; }
  .column .ant-list-grid .ant-col {
    display: flex; }
  .column .ant-row > div {
    display: flex; }
  @media (max-width: 768px) {
    .column .column-card {
      margin-bottom: 20px; }
      .column .column-card.top {
        margin-bottom: 0; }
      .column .column-card.most {
        margin-bottom: 0; } }
  @media (max-width: 600px) {
    .column .column-header .head-container {
      padding: 40px 20px 40px 20px;
      padding-bottom: 30px; }
    .column .column-body {
      padding: 40px 20px 40px 20px;
      margin-top: 0; }
    .column .column-card .ant-image {
      width: 100%;
      height: 190px;
      background-color: #f9fafc; }
      .column .column-card .ant-image img {
        width: 100%;
        height: 190px;
        object-fit: cover; }
    .column .column-card .info-container {
      padding: 15px; }
      .column .column-card .info-container .title {
        font-size: 16px; }
      .column .column-card .info-container .date {
        font-size: 13px; }
      .column .column-card .info-container .desc {
        font-size: 13px; }
    .column .column-card.top {
      margin-bottom: 0; }
      .column .column-card.top .ant-image {
        height: 218px; }
        .column .column-card.top .ant-image img {
          height: 218px; }
      .column .column-card.top .info-container .title {
        font-size: 18px; }
      .column .column-card.top .info-container .desc {
        font-size: 14px; }
      .column .column-card.top .info-container button {
        padding: 0 15px;
        height: 34px; }
    .column .column-card.most {
      background-color: transparent;
      box-shadow: 0 0 0 0 transparent;
      margin-bottom: 0;
      display: flex;
      align-items: center;
      gap: 15px;
      padding: 0 15px; }
      .column .column-card.most .ant-image {
        height: 55px;
        width: 60px;
        border-radius: 8px; }
        .column .column-card.most .ant-image img {
          height: 55px;
          width: 60px;
          border-radius: 8px; }
      .column .column-card.most .info-container {
        gap: 15px;
        padding: 0; }
        .column .column-card.most .info-container .title {
          font-size: 14px; }
    .column.detail::before {
      height: 150px; }
    .column.detail .column-body {
      padding: 40px 20px 40px 20px;
      gap: 20px; }
      .column.detail .column-body .ant-image {
        height: 220px;
        margin-bottom: 5px; }
        .column.detail .column-body .ant-image img {
          height: 220px; }
      .column.detail .column-body .title {
        font-size: 18px; }
      .column.detail .column-body .date {
        font-size: 14px; }
      .column.detail .column-body .post {
        font-size: 14px;
        color: #182747;
        word-break: break-all; } }

.column-cover-uploader .ant-upload {
  width: 100%;
  height: 200px;
  overflow: hidden;
  background-color: #f9fafc; }

.column-list .ant-list-pagination {
  text-align: left; }

.admin-csv-upload-modal .company-branch-check-table .ant-table-container .ant-table-thead .ant-table-column-has-sorters {
  padding: 0 !important; }
  .admin-csv-upload-modal .company-branch-check-table .ant-table-container .ant-table-thead .ant-table-column-has-sorters .ant-table-filter-column-title {
    padding: 0 !important; }

.admin-csv-upload-modal .company-branch-check-table .ant-table-content {
  height: 360px !important;
  overflow-y: scroll;
  overflow-x: hidden;
  width: 100%; }
  .admin-csv-upload-modal .company-branch-check-table .ant-table-content::-webkit-scrollbar {
    width: 3px;
    transition: 0.3s;
    border-radius: 2px; }
  .admin-csv-upload-modal .company-branch-check-table .ant-table-content::-webkit-scrollbar-thumb {
    background-color: #d0d0d0;
    position: absolute;
    right: 0px; }
  .admin-csv-upload-modal .company-branch-check-table .ant-table-content .ant-table-thead
tr
th.ant-table-column-has-sorters
.ant-table-filter-column-title {
    padding: 0 !important; }

.admin-csv-upload-modal .company-branch-history-table .ant-table-container .ant-table-thead .ant-table-column-has-sorters {
  padding: 0 !important; }
  .admin-csv-upload-modal .company-branch-history-table .ant-table-container .ant-table-thead .ant-table-column-has-sorters .ant-table-filter-column-title {
    padding: 0 !important; }

.admin-csv-upload-modal .company-branch-history-table .ant-table-content {
  height: 360px !important;
  overflow-y: scroll;
  overflow-x: hidden;
  width: 100%; }
  .admin-csv-upload-modal .company-branch-history-table .ant-table-content::-webkit-scrollbar {
    width: 3px;
    transition: 0.3s;
    border-radius: 2px; }
  .admin-csv-upload-modal .company-branch-history-table .ant-table-content::-webkit-scrollbar-thumb {
    background-color: #d0d0d0;
    position: absolute;
    right: 0px; }
  .admin-csv-upload-modal .company-branch-history-table .ant-table-content .ant-table-thead
tr
th.ant-table-column-has-sorters
.ant-table-filter-column-title {
    padding: 0 !important; }

.staff-profile-list-table .ant-table-container .ant-table-content .ant-table-thead .ant-table-cell-fix-left,
.staff-profile-list-table .ant-table-container .ant-table-content .ant-table-thead .ant-table-cell-fix-right {
  z-index: auto !important; }

.staff-profile-list-table .ant-table-container .ant-table-content .ant-table-thead .ant-table-column-has-sorters .ant-table-filter-column-title {
  padding-right: 25px !important; }

.staff-profile-list-table .ant-table-container .ant-table-content .ant-table-thead .ant-table-column-sorters {
  padding: 0 !important; }

.staff-profile-list-table .ant-table-container .ant-table-content .ant-table-thead > tr > th {
  padding: 10px 10px !important; }

.staff-profile-list-table .ant-table-container .ant-table-content .ant-table-tbody .ant-table-cell-fix-left,
.staff-profile-list-table .ant-table-container .ant-table-content .ant-table-tbody .ant-table-cell-fix-right {
  z-index: auto !important; }

.staff-profile-list-table .ant-table-container .ant-table-content .ant-table-tbody > tr:first-child > td {
  padding: 0px !important; }

.staff-profile-list-table .dynamic-link-create {
  background-color: #245cc3 !important;
  border-color: transparent !important; }

.staff-profile-list-table .dynamic-link-upload {
  background-color: #ff8000 !important;
  border-color: transparent !important; }

.staff-profile-list-table .ant-table-pagination.ant-pagination {
  margin: 15px !important; }

.staff-profile-list-table .shift-add {
  background-color: #2eca73 !important;
  border-color: transparent !important; }

.shift-add {
  position: relative; }
  .shift-add-header {
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
    position: sticky;
    top: 0;
    z-index: 1;
    background-color: #fff;
    border-bottom: 1px solid #e8e8e8; }
    .shift-add-header .staff-info {
      align-self: flex-start;
      display: flex;
      align-items: center;
      gap: 15px;
      position: relative; }
      .shift-add-header .staff-info .user-img {
        height: 56px;
        width: 56px;
        border-radius: 30px;
        background-color: #ecf2fe;
        color: #0057ff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px; }
      .shift-add-header .staff-info-item {
        padding-right: 20px;
        border-right: 1px solid #e8e8e8; }
        .shift-add-header .staff-info-item p {
          margin-bottom: 0;
          font-size: 12px;
          color: #747688; }
        .shift-add-header .staff-info-item h1 {
          font-size: 16px;
          font-weight: bold;
          color: #182747;
          margin-bottom: 0;
          line-height: 32px; }
        .shift-add-header .staff-info-item .change-input {
          padding: 0 5px;
          min-height: 32px;
          display: flex;
          align-items: center;
          border-radius: 14px;
          border: 1px solid #0057ff;
          align-self: flex-start;
          gap: 7px;
          max-width: 120px !important; }
          .shift-add-header .staff-info-item .change-input input {
            width: auto !important;
            padding: 0 !important;
            height: auto !important;
            text-align: center;
            font-weight: bold; }
          .shift-add-header .staff-info-item .change-input .ant-input-suffix {
            color: #747688; }
          .shift-add-header .staff-info-item .change-input .ant-input-affix-wrapper {
            width: auto !important;
            padding: 0 !important;
            height: auto !important; }
          .shift-add-header .staff-info-item .change-input button {
            background-color: #2eca73 !important;
            border-width: 0 !important;
            min-width: 24px !important;
            height: 24px !important; }
        .shift-add-header .staff-info-item.end {
          padding-right: 0;
          border-right-width: 0; }
    .shift-add-header .add-button {
      height: 56px !important;
      font-size: 18px !important;
      min-width: 120px !important; }
  .shift-add-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    border-top: 10px solid #e8e8e8; }
    .shift-add-body .ant-picker {
      border-radius: 14px !important; }
    .shift-add-body .row-gap {
      display: flex;
      align-items: center;
      gap: 12px;
      flex-wrap: wrap; }
    .shift-add-body .staff-info-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 15px;
      flex-wrap: wrap; }
      .shift-add-body .staff-info-header h2 {
        height: 46px;
        width: 46px;
        border-radius: 12px;
        background-color: #0057ff;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        font-weight: bold;
        margin-bottom: 0; }
      .shift-add-body .staff-info-header .staff-info {
        max-height: 48px;
        min-height: 48px;
        align-self: flex-start;
        border: 1px solid #e8e8e8;
        border-radius: 14px;
        padding: 5px 12px;
        display: flex;
        gap: 12px;
        position: relative;
        align-items: center; }
        .shift-add-body .staff-info-header .staff-info .anticon {
          height: 42px;
          width: 42px;
          border-radius: 21px;
          background-color: #ecf2fe;
          color: #0057ff;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 22px; }
        .shift-add-body .staff-info-header .staff-info-item {
          padding-right: 10px;
          border-right: 1px solid #e8e8e8;
          display: flex;
          flex-direction: column;
          justify-content: center; }
          .shift-add-body .staff-info-header .staff-info-item p {
            margin-bottom: 2px;
            font-size: 12px;
            color: #747688;
            line-height: 1.1; }
          .shift-add-body .staff-info-header .staff-info-item h1 {
            font-size: 14px;
            font-weight: bold;
            color: #182747;
            margin-bottom: 0;
            line-height: 1.1; }
          .shift-add-body .staff-info-header .staff-info-item.end {
            padding-right: 0;
            border-right-width: 0; }
      .shift-add-body .staff-info-header button {
        height: 46px !important;
        font-size: 16px !important;
        min-width: 100px !important; }
    .shift-add-body .shift-start-date {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 20px;
      border: 1px solid #e8e8e8;
      border-radius: 14px;
      padding: 10px; }
      .shift-add-body .shift-start-date .ant-picker {
        background-color: #f9fafc !important; }
      .shift-add-body .shift-start-date span {
        font-size: 14px;
        font-weight: bold;
        word-break: keep-all; }
    .shift-add-body .shift-confirm-card {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 15px;
      border: 1px solid #e8e8e8;
      border-radius: 14px;
      padding: 15px; }
      .shift-add-body .shift-confirm-card .ant-picker {
        background-color: #f9fafc !important; }
      .shift-add-body .shift-confirm-card-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 15px;
        flex-wrap: wrap; }
      .shift-add-body .shift-confirm-card h1 {
        font-size: 16px;
        font-weight: bold;
        color: #182747;
        margin-bottom: 0;
        padding-left: 15px;
        position: relative;
        line-height: 22px;
        border-left: 4px;
        border-left: 4px solid #0057ff; }
      .shift-add-body .shift-confirm-card .item-container {
        display: flex;
        flex-direction: column;
        gap: 10px; }
        .shift-add-body .shift-confirm-card .item-container .time-item {
          display: flex;
          gap: 10px;
          align-items: center;
          justify-content: space-between; }
          .shift-add-body .shift-confirm-card .item-container .time-item .title {
            font-size: 14px;
            font-weight: bold;
            color: #182747;
            min-width: 70px;
            max-width: 70px;
            word-break: keep-all; }
          .shift-add-body .shift-confirm-card .item-container .time-item .ant-picker {
            min-width: 150px; }
        .shift-add-body .shift-confirm-card .item-container .ant-checkbox-wrapper {
          border-radius: 14px;
          border: 1px solid #e8e8e8;
          padding: 9px 15px;
          flex: 1;
          margin-right: 0 !important;
          color: #182747 !important;
          background-color: #f9fafc !important;
          margin-left: 0 !important;
          position: relative; }
        .shift-add-body .shift-confirm-card .item-container .ant-checkbox-wrapper-checked {
          border: 1px solid #0057ff;
          box-shadow: 0px 1px 5px rgba(0, 87, 255, 0.4);
          background-color: #fff !important; }
        .shift-add-body .shift-confirm-card .item-container .warning {
          margin-left: 'auto';
          flex: 1;
          align-self: flex-end;
          position: absolute;
          right: 0;
          top: 0;
          height: 42px !important;
          width: 42px !important;
          color: #f23d6a; }
    .shift-add-body .grid {
      margin: -20px;
      padding: 20px;
      overflow-y: hidden;
      overflow-x: auto; }
      .shift-add-body .grid .grid-body {
        display: grid;
        grid-template-columns: 85px auto auto auto auto auto auto auto; }
        .shift-add-body .grid .grid-body-item-title {
          display: flex;
          flex-direction: column;
          gap: 10px; }
          .shift-add-body .grid .grid-body-item-title .value {
            background-color: #f9fafc;
            width: 85px;
            height: 36px;
            border-radius: 14px 0px 0px 14px;
            border: 1px solid #e8e8e8;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            color: #182747; }
            .shift-add-body .grid .grid-body-item-title .value.title {
              height: 34px;
              background-color: transparent;
              border-width: 0; }
            .shift-add-body .grid .grid-body-item-title .value.total {
              border-color: #0057ff;
              background-color: #ecf2fe;
              color: #0057ff;
              height: 40px; }
        .shift-add-body .grid .grid-body-item-week {
          display: flex;
          flex-direction: column;
          min-width: 108px;
          margin-right: 10px; }
          .shift-add-body .grid .grid-body-item-week .title {
            background-color: #0057ff;
            height: 34px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 14px 14px 0px 0px;
            color: #fff;
            font-weight: bold;
            text-align: center; }
          .shift-add-body .grid .grid-body-item-week .value-container {
            flex: 1;
            border: 1px solid #0057ff;
            background-color: #f9fafc;
            display: flex;
            flex-direction: column;
            gap: 10px;
            padding: 10px;
            border-bottom-left-radius: 14px;
            border-bottom-right-radius: 14px; }
            .shift-add-body .grid .grid-body-item-week .value-container .total {
              border-radius: 14px;
              border: 1px solid #0057ff;
              background-color: #ecf2fe;
              padding: 8px;
              max-height: 42px;
              text-align: center;
              color: #0057ff; }
            .shift-add-body .grid .grid-body-item-week .value-container .input-container {
              position: relative; }
              .shift-add-body .grid .grid-body-item-week .value-container .input-container .warning {
                display: flex;
                align-items: center;
                justify-content: center;
                position: absolute;
                right: 0;
                top: 0;
                height: 36px !important;
                width: 34px !important;
                color: #f23d6a; }
                .shift-add-body .grid .grid-body-item-week .value-container .input-container .warning svg {
                  background-color: #fff !important; }
            .shift-add-body .grid .grid-body-item-week .value-container .value {
              border-radius: 14px !important;
              border: 1px solid #e8e8e8 !important;
              background-color: #fff !important;
              padding: 5px !important;
              max-height: 36px !important;
              min-height: 36px !important;
              font-size: 14px;
              text-align: center;
              line-height: 26px;
              position: relative; }
            .shift-add-body .grid .grid-body-item-week .value-container .ant-picker {
              border: 1px solid #0057ff !important; }
              .shift-add-body .grid .grid-body-item-week .value-container .ant-picker input {
                font-size: 13px !important; }
            .shift-add-body .grid .grid-body-item-week .value-container .ant-picker-suffix {
              font-size: 12px !important;
              position: absolute !important;
              right: -1px; }
            .shift-add-body .grid .grid-body-item-week .value-container .ant-picker.ant-picker-disabled {
              background: #fff !important;
              border: 1px solid #e8e8e8 !important;
              text-align: center !important;
              color: #182747 !important;
              box-shadow: 0px 1px 5px rgba(0, 87, 255, 0) !important; }
              .shift-add-body .grid .grid-body-item-week .value-container .ant-picker.ant-picker-disabled .ant-picker-suffix {
                display: none !important; }
            .shift-add-body .grid .grid-body-item-week .value-container .ant-picker-input > input[disabled] {
              color: #182747 !important;
              text-align: center !important;
              font-size: 14px !important; }
            .shift-add-body .grid .grid-body-item-week .value-container.edit {
              background-color: #f9fafc;
              border: 1px solid #e8e8e8; }
              .shift-add-body .grid .grid-body-item-week .value-container.edit .total {
                border: 1px solid #e8e8e8;
                background-color: #fff; }
    .shift-add-body.confirm {
      max-width: 680px;
      margin: 0 auto;
      width: 100%; }
    .shift-add-body .confirm {
      max-width: 680px;
      margin: 0 auto;
      width: 100%; }
    @media (max-width: 940px) {
      .shift-add-body {
        padding: 15px;
        gap: 15px; }
        .shift-add-body .grid {
          margin: -15px;
          padding: 15px;
          padding-right: 30px; }
          .shift-add-body .grid .grid-body {
            grid-template-columns: 80px auto auto auto auto auto auto auto; }
            .shift-add-body .grid .grid-body-item-title .value {
              width: 80px;
              font-size: 13px; }
            .shift-add-body .grid .grid-body-item-week {
              min-width: 92px;
              margin-right: 6px; }
              .shift-add-body .grid .grid-body-item-week .value-container {
                gap: 10px;
                padding: 10px 5px; }
                .shift-add-body .grid .grid-body-item-week .value-container .ant-picker input {
                  font-size: 13px !important; }
                .shift-add-body .grid .grid-body-item-week .value-container .ant-picker-suffix {
                  font-size: 11px !important; } }
  .shift-add-footer {
    padding: 15px;
    border-top: 1px solid #e8e8e8;
    display: flex;
    gap: 15px;
    justify-content: flex-end; }

.warning-msg {
  padding: 12px; }
  .warning-msg h1 {
    font-size: 16px;
    font-weight: bold;
    color: #f23d6a;
    margin-bottom: 3px; }
  .warning-msg p {
    font-size: 14px;
    color: #182747;
    margin-bottom: 0; }

.staff-avatar {
  border: 2px solid #fff !important; }
  .staff-avatar.account-on {
    outline: 2px solid #2eca73 !important;
    box-shadow: 0px 4px 14px 0px rgba(34, 197, 94, 0.3); }

.upload-hover {
  border: 1px solid #e9e9e9 !important;
  border-style: dashed !important; }

.upload-hover:hover {
  border: 1px solid #0057ff !important;
  border-style: dashed !important; }

.user-list-table .ant-table-container .ant-table-content .ant-table-thead .ant-table-cell-fix-left,
.user-list-table .ant-table-container .ant-table-content .ant-table-thead .ant-table-cell-fix-right {
  z-index: auto !important; }

.user-list-table .ant-table-container .ant-table-content .ant-table-thead .ant-table-column-has-sorters .ant-table-filter-column-title {
  padding-right: 25px !important; }

.user-list-table .ant-table-container .ant-table-content .ant-table-thead .ant-table-column-sorters {
  padding: 0 !important; }

.user-list-table .ant-table-container .ant-table-content .ant-table-thead > tr > th {
  padding: 10px 10px !important; }

.user-list-table .ant-table-container .ant-table-content .ant-table-tbody .ant-table-cell-fix-left,
.user-list-table .ant-table-container .ant-table-content .ant-table-tbody .ant-table-cell-fix-right {
  z-index: auto !important; }

.user-list-table .ant-table-container .ant-table-content .ant-table-tbody > tr:first-child > td {
  padding: 0px !important; }

.user-list-table .ant-table-pagination.ant-pagination {
  margin: 15px !important; }

.company-list-table .ant-table-container {
  overflow-x: auto !important; }
  .company-list-table .ant-table-container .ant-table-content .ant-table-thead .ant-table-cell-fix-left,
  .company-list-table .ant-table-container .ant-table-content .ant-table-thead .ant-table-cell-fix-right {
    z-index: auto !important; }
  .company-list-table .ant-table-container .ant-table-content .ant-table-thead .ant-table-column-has-sorters .ant-table-filter-column-title {
    padding-right: 25px !important; }
  .company-list-table .ant-table-container .ant-table-content .ant-table-thead .ant-table-column-sorters {
    padding: 0 !important; }
  .company-list-table .ant-table-container .ant-table-content .ant-table-thead > tr > th {
    padding: 10px 10px !important; }
  .company-list-table .ant-table-container .ant-table-content .ant-table-tbody .ant-table-cell-fix-left,
  .company-list-table .ant-table-container .ant-table-content .ant-table-tbody .ant-table-cell-fix-right {
    z-index: auto !important; }

.company-list-table .ant-table-pagination.ant-pagination {
  margin: 15px !important; }

.ant-btn.primary-button {
  color: #0057ff !important;
  border-color: #0057ff !important; }

.ant-btn.success-button {
  color: #2eca73 !important;
  border-color: #2eca73 !important; }

.board-card {
  padding: 1px; }
  .board-card .ant-card-head {
    height: 0px !important;
    min-height: 0px !important;
    padding: 0 24px;
    background: transparent; }
    .board-card .ant-card-head .ant-card-head-wrapper .ant-card-extra {
      float: left;
      margin-right: auto;
      margin-left: 0px;
      padding: 16px 0;
      font-weight: normal; }
  .board-card .ant-card-body {
    padding: 15px !important; }
  .board-card .ant-card-cover {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 20px !important; }
  .board-card .ant-card-actions li {
    margin: 5px 0 !important; }

.ant-picker.custom-filter-picker {
  width: 100%; }

.avatar-uploader > .ant-upload {
  width: 100% !important;
  height: 100% !important;
  padding: 10px; }
  .avatar-uploader > .ant-upload img {
    height: 90px;
    width: 250px; }
  .avatar-uploader > .ant-upload .anticon > svg {
    height: 20px;
    width: 20px; }

.article-cover-uploader > .ant-upload {
  width: 100% !important;
  height: 260px !important;
  overflow: hidden; }
  .article-cover-uploader > .ant-upload .ant-image {
    width: 100%;
    height: auto; }
    .article-cover-uploader > .ant-upload .ant-image img {
      width: 100%;
      height: auto;
      object-fit: cover; }

.relative-content {
  position: relative; }
  .relative-content .ant-tabs .ant-tabs-nav {
    margin-bottom: 0px !important; }
    .relative-content .ant-tabs .ant-tabs-nav .ant-tabs-nav-wrap .ant-tabs-nav-list {
      margin-left: auto !important;
      margin-right: auto !important; }

.ant-modal-title {
  font-weight: bolder; }

.web-camera > svg {
  width: 20px;
  height: 20px; }

.worker-doc-uploader {
  width: 100% !important;
  height: 260px !important;
  overflow: hidden; }
  .worker-doc-uploader .ant-image {
    width: 100%;
    height: auto; }
    .worker-doc-uploader .ant-image img {
      width: auto;
      height: 100%;
      object-fit: cover; }

.branch-menu-list-item-clientusers-table .ant-table-container .ant-table-tbody > tr > td {
  padding: 5px !important; }

.branch-list-table .ant-table-container {
  overflow-x: auto !important; }
  .branch-list-table .ant-table-container .ant-table-content .ant-table-thead .ant-table-cell-fix-left,
  .branch-list-table .ant-table-container .ant-table-content .ant-table-thead .ant-table-cell-fix-right {
    z-index: auto !important; }
  .branch-list-table .ant-table-container .ant-table-content .ant-table-thead .ant-table-column-has-sorters .ant-table-filter-column-title {
    padding-right: 25px !important; }
  .branch-list-table .ant-table-container .ant-table-content .ant-table-thead .ant-table-column-sorters {
    padding: 0 !important; }
  .branch-list-table .ant-table-container .ant-table-content .ant-table-thead > tr > th {
    padding: 10px 10px !important; }
  .branch-list-table .ant-table-container .ant-table-content .ant-table-tbody .ant-table-cell-fix-left,
  .branch-list-table .ant-table-container .ant-table-content .ant-table-tbody .ant-table-cell-fix-right {
    z-index: auto !important; }

.branch-list-table .ant-table-pagination.ant-pagination {
  margin: 15px !important; }

.staff-profile-detail-drawer .ant-drawer-body {
  overflow: hidden; }
  .staff-profile-detail-drawer .ant-drawer-body .profile-container {
    position: relative;
    background-color: white;
    max-width: 420px;
    width: 100%;
    width: 1;
    box-shadow: rgba(81, 99, 120, 0.3) 0px 6px 60px 0px !important;
    border: 1px solid #f0f0f0; }
    .staff-profile-detail-drawer .ant-drawer-body .profile-container .profile-content-body {
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
      -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
      width: 100%;
      height: 100%;
      background-color: #f7f7f7;
      border-top-left-radius: 20px; }
      .staff-profile-detail-drawer .ant-drawer-body .profile-container .profile-content-body .header {
        display: flex;
        padding: 15px;
        max-width: 100%;
        background-color: white;
        border-top-left-radius: 20px;
        word-wrap: break-word;
        -webkit-box-flex: 1;
        -ms-flex-positive: 1; }
        .staff-profile-detail-drawer .ant-drawer-body .profile-container .profile-content-body .header .header-avatar {
          height: 105px !important;
          width: 95px !important;
          margin-right: 15px; }
          .staff-profile-detail-drawer .ant-drawer-body .profile-container .profile-content-body .header .header-avatar .image {
            height: 105px !important;
            width: 100px !important;
            border: 2px solid white;
            border-radius: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 30px;
            box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px 0px;
            cursor: pointer; }
        .staff-profile-detail-drawer .ant-drawer-body .profile-container .profile-content-body .header .header-content {
          margin-top: 5px; }
      .staff-profile-detail-drawer .ant-drawer-body .profile-container .profile-content-body .toggle-button-container {
        display: flex;
        align-items: center;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        z-index: 1;
        height: 46px;
        pointer-events: none; }
        .staff-profile-detail-drawer .ant-drawer-body .profile-container .profile-content-body .toggle-button-container button {
          background-color: #fff !important;
          pointer-events: visible !important; }
      .staff-profile-detail-drawer .ant-drawer-body .profile-container .profile-content-body [data-theme='compact']
.site-collapse-custom-collapse
.site-collapse-custom-panel,
      .staff-profile-detail-drawer .ant-drawer-body .profile-container .profile-content-body .site-collapse-custom-collapse {
        background-color: transparent; }
        .staff-profile-detail-drawer .ant-drawer-body .profile-container .profile-content-body [data-theme='compact']
.site-collapse-custom-collapse
.site-collapse-custom-panel .site-collapse-custom-panel,
        .staff-profile-detail-drawer .ant-drawer-body .profile-container .profile-content-body .site-collapse-custom-collapse .site-collapse-custom-panel {
          background: #fff !important;
          color: black !important;
          font-weight: 500 !important;
          font-size: 15px !important;
          box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1) !important;
          border-radius: 5px !important;
          margin-bottom: 15px !important;
          border: 1px solid #f0f0f0 !important;
          padding: 0px !important; }
          .staff-profile-detail-drawer .ant-drawer-body .profile-container .profile-content-body [data-theme='compact']
.site-collapse-custom-collapse
.site-collapse-custom-panel .site-collapse-custom-panel .ant-collapse-content > .ant-collapse-content-box,
          .staff-profile-detail-drawer .ant-drawer-body .profile-container .profile-content-body .site-collapse-custom-collapse .site-collapse-custom-panel .ant-collapse-content > .ant-collapse-content-box {
            padding: 0px !important; }
          .staff-profile-detail-drawer .ant-drawer-body .profile-container .profile-content-body [data-theme='compact']
.site-collapse-custom-collapse
.site-collapse-custom-panel .site-collapse-custom-panel .container-scroll,
          .staff-profile-detail-drawer .ant-drawer-body .profile-container .profile-content-body .site-collapse-custom-collapse .site-collapse-custom-panel .container-scroll {
            max-height: 389px;
            overflow-x: auto;
            padding: 15px;
            font-weight: 400 !important; }
            .staff-profile-detail-drawer .ant-drawer-body .profile-container .profile-content-body [data-theme='compact']
.site-collapse-custom-collapse
.site-collapse-custom-panel .site-collapse-custom-panel .container-scroll::-webkit-scrollbar-track,
            .staff-profile-detail-drawer .ant-drawer-body .profile-container .profile-content-body .site-collapse-custom-collapse .site-collapse-custom-panel .container-scroll::-webkit-scrollbar-track {
              background-color: transparent; }
            .staff-profile-detail-drawer .ant-drawer-body .profile-container .profile-content-body [data-theme='compact']
.site-collapse-custom-collapse
.site-collapse-custom-panel .site-collapse-custom-panel .container-scroll::-webkit-scrollbar,
            .staff-profile-detail-drawer .ant-drawer-body .profile-container .profile-content-body .site-collapse-custom-collapse .site-collapse-custom-panel .container-scroll::-webkit-scrollbar {
              width: 5px; }
            .staff-profile-detail-drawer .ant-drawer-body .profile-container .profile-content-body [data-theme='compact']
.site-collapse-custom-collapse
.site-collapse-custom-panel .site-collapse-custom-panel .container-scroll::-webkit-scrollbar-thumb,
            .staff-profile-detail-drawer .ant-drawer-body .profile-container .profile-content-body .site-collapse-custom-collapse .site-collapse-custom-panel .container-scroll::-webkit-scrollbar-thumb {
              background-color: #d0d0d0; }
      .staff-profile-detail-drawer .ant-drawer-body .profile-container .profile-content-body .staff-profile-tabs .tab-profile-container {
        -webkit-box-flex: 1;
        -ms-flex-positive: 1;
        flex-grow: 1;
        padding: 15px;
        padding-bottom: 40px;
        font-size: 14px;
        line-height: 1.5715;
        word-wrap: break-word;
        overflow: auto;
        height: calc(100vh - 201px); }
        .staff-profile-detail-drawer .ant-drawer-body .profile-container .profile-content-body .staff-profile-tabs .tab-profile-container::-webkit-scrollbar-track {
          background-color: transparent; }
        .staff-profile-detail-drawer .ant-drawer-body .profile-container .profile-content-body .staff-profile-tabs .tab-profile-container::-webkit-scrollbar {
          width: 5px; }
        .staff-profile-detail-drawer .ant-drawer-body .profile-container .profile-content-body .staff-profile-tabs .tab-profile-container::-webkit-scrollbar-thumb {
          background-color: #d0d0d0; }
        .staff-profile-detail-drawer .ant-drawer-body .profile-container .profile-content-body .staff-profile-tabs .tab-profile-container .avatar-style {
          height: 100px !important;
          width: 100% !important; }
          .staff-profile-detail-drawer .ant-drawer-body .profile-container .profile-content-body .staff-profile-tabs .tab-profile-container .avatar-style .image {
            height: 100px !important;
            width: 100% !important;
            border: 2px solid white;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 30px;
            box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px 0px;
            cursor: pointer; }
        .staff-profile-detail-drawer .ant-drawer-body .profile-container .profile-content-body .staff-profile-tabs .tab-profile-container .avatar-style-last {
          height: 100px !important;
          width: 100% !important; }
          .staff-profile-detail-drawer .ant-drawer-body .profile-container .profile-content-body .staff-profile-tabs .tab-profile-container .avatar-style-last .image {
            height: 100px !important;
            width: 100% !important;
            border: 2px solid white;
            border-radius: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 30px;
            box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px 0px;
            cursor: pointer; }
      .staff-profile-detail-drawer .ant-drawer-body .profile-container .profile-content-body .staff-profile-tabs .tab-note-container .note-writer .ant-card-body {
        padding: 5px !important; }
      .staff-profile-detail-drawer .ant-drawer-body .profile-container .profile-content-body .staff-profile-tabs .tab-note-container .note-body {
        height: calc(100vh - 320px);
        overflow: auto; }
        .staff-profile-detail-drawer .ant-drawer-body .profile-container .profile-content-body .staff-profile-tabs .tab-note-container .note-body::-webkit-scrollbar-track {
          background-color: transparent; }
        .staff-profile-detail-drawer .ant-drawer-body .profile-container .profile-content-body .staff-profile-tabs .tab-note-container .note-body::-webkit-scrollbar {
          width: 5px; }
        .staff-profile-detail-drawer .ant-drawer-body .profile-container .profile-content-body .staff-profile-tabs .tab-note-container .note-body::-webkit-scrollbar-thumb {
          background-color: #d0d0d0; }
        .staff-profile-detail-drawer .ant-drawer-body .profile-container .profile-content-body .staff-profile-tabs .tab-note-container .note-body .note-item {
          cursor: pointer;
          box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); }
          .staff-profile-detail-drawer .ant-drawer-body .profile-container .profile-content-body .staff-profile-tabs .tab-note-container .note-body .note-item .content-text {
            padding: 10px; }
          .staff-profile-detail-drawer .ant-drawer-body .profile-container .profile-content-body .staff-profile-tabs .tab-note-container .note-body .note-item .margin {
            margin-right: 5px; }
          .staff-profile-detail-drawer .ant-drawer-body .profile-container .profile-content-body .staff-profile-tabs .tab-note-container .note-body .note-item .row-note {
            display: flex;
            align-items: center;
            padding-left: 15px;
            padding-right: 15px;
            margin-bottom: 5px; }
        .staff-profile-detail-drawer .ant-drawer-body .profile-container .profile-content-body .staff-profile-tabs .tab-note-container .note-body .primary-text15 {
          font-size: 15px;
          color: #0057ff; }
        .staff-profile-detail-drawer .ant-drawer-body .profile-container .profile-content-body .staff-profile-tabs .tab-note-container .note-body .clock-text {
          color: gray;
          align-items: center; }
        .staff-profile-detail-drawer .ant-drawer-body .profile-container .profile-content-body .staff-profile-tabs .tab-note-container .note-body .send-btn {
          color: #f37a21;
          cursor: pointer;
          font-size: 25px;
          border-radius: 15px; }
      .staff-profile-detail-drawer .ant-drawer-body .profile-container .profile-content-body .staff-profile-tabs .card-contract {
        border: 1px solid #e8e8e8;
        border-radius: 5px;
        padding: 5px;
        margin-bottom: 10px;
        font-size: 13px; }
        .staff-profile-detail-drawer .ant-drawer-body .profile-container .profile-content-body .staff-profile-tabs .card-contract .file-name {
          clear: both;
          display: inline-block;
          overflow: hidden;
          white-space: nowrap; }
    .staff-profile-detail-drawer .ant-drawer-body .profile-container .ant-tabs-tab {
      margin-right: 0px !important; }
    .staff-profile-detail-drawer .ant-drawer-body .profile-container .tab-toggle-true .ant-tabs > .ant-tabs-nav .ant-tabs-nav-wrap,
    .staff-profile-detail-drawer .ant-drawer-body .profile-container .tab-toggle-true .ant-tabs > div > .ant-tabs-nav .ant-tabs-nav-wrap {
      justify-content: flex-end !important; }
    .staff-profile-detail-drawer .ant-drawer-body .profile-container .tab-toggle-false .ant-tabs > .ant-tabs-nav .ant-tabs-nav-wrap,
    .staff-profile-detail-drawer .ant-drawer-body .profile-container .tab-toggle-false .ant-tabs > div > .ant-tabs-nav .ant-tabs-nav-wrap {
      justify-content: flex-start !important; }
    .staff-profile-detail-drawer .ant-drawer-body .profile-container .profile-content-dynamic-link-body {
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
      -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
      background-color: #fff;
      padding: 10px; }
      .staff-profile-detail-drawer .ant-drawer-body .profile-container .profile-content-dynamic-link-body .dynamic-link-list-header {
        padding-left: 10px;
        padding-right: 10px; }
      .staff-profile-detail-drawer .ant-drawer-body .profile-container .profile-content-dynamic-link-body .dynamic-link-list-container-scroll {
        padding: 0px;
        height: calc(100vh - 375px);
        overflow: auto; }
        .staff-profile-detail-drawer .ant-drawer-body .profile-container .profile-content-dynamic-link-body .dynamic-link-list-container-scroll::-webkit-scrollbar-track {
          background-color: transparent; }
        .staff-profile-detail-drawer .ant-drawer-body .profile-container .profile-content-dynamic-link-body .dynamic-link-list-container-scroll::-webkit-scrollbar {
          width: 5px; }
        .staff-profile-detail-drawer .ant-drawer-body .profile-container .profile-content-dynamic-link-body .dynamic-link-list-container-scroll::-webkit-scrollbar-thumb {
          background-color: #d0d0d0; }
      .staff-profile-detail-drawer .ant-drawer-body .profile-container .profile-content-dynamic-link-body .dynamic-link-list-footer-link {
        padding: 10px;
        align-items: center !important; }
        .staff-profile-detail-drawer .ant-drawer-body .profile-container .profile-content-dynamic-link-body .dynamic-link-list-footer-link .copy-link {
          display: inline-flex;
          margin-top: 3px; }
        .staff-profile-detail-drawer .ant-drawer-body .profile-container .profile-content-dynamic-link-body .dynamic-link-list-footer-link .copy-button {
          float: right;
          display: inline-flex; }
      .staff-profile-detail-drawer .ant-drawer-body .profile-container .profile-content-dynamic-link-body .dynamic-link-list-footer-action {
        padding: 10px !important;
        padding-bottom: 20px !important;
        font-size: 12px !important;
        align-items: center !important;
        text-align: center !important; }
        .staff-profile-detail-drawer .ant-drawer-body .profile-container .profile-content-dynamic-link-body .dynamic-link-list-footer-action .action-button {
          display: inline-flex; }
          .staff-profile-detail-drawer .ant-drawer-body .profile-container .profile-content-dynamic-link-body .dynamic-link-list-footer-action .action-button button:first-child {
            margin-right: 8px; }
          .staff-profile-detail-drawer .ant-drawer-body .profile-container .profile-content-dynamic-link-body .dynamic-link-list-footer-action .action-button button:last-child {
            margin-left: 8px; }

.staff-profile-history-list-drawer .second-level .avatar-style .image {
  width: 40px !important; }

.compare-staff-profile-container .content .companre-step1-container .avatar-style {
  min-height: 240px !important;
  width: 100% !important; }
  .compare-staff-profile-container .content .companre-step1-container .avatar-style .image {
    height: 100% !important;
    width: 100% !important;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px 0px;
    cursor: pointer; }

.compare-staff-profile-container .content .companre-step2-container .avatar-style {
  min-height: 400px !important;
  width: 100% !important; }
  .compare-staff-profile-container .content .companre-step2-container .avatar-style .image {
    height: 100% !important;
    width: 100% !important;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px 0px;
    cursor: pointer; }

.compare-staff-profile-container .content .companre-step2-container .ant-upload-picture-card-wrapper {
  display: inline-block;
  width: 100%;
  height: 100%; }

.compare-staff-profile-container .content .companre-step3-container .avatar-style {
  min-height: 240px !important;
  width: 100% !important; }
  .compare-staff-profile-container .content .companre-step3-container .avatar-style .image {
    height: 100% !important;
    width: 100% !important;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px 0px;
    cursor: pointer; }

.avatar-admin {
  height: 100px !important;
  width: 100px !important;
  border: 2px solid white;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px 0px;
  cursor: pointer; }

.avatar-change {
  position: absolute;
  top: -10px;
  right: -10px; }

.avatar-save {
  position: absolute;
  bottom: -10px;
  right: -10px; }

.ant-tabs > .ant-tabs-nav .ant-tabs-nav-operations,
.ant-tabs > div > .ant-tabs-nav .ant-tabs-nav-operations {
  display: none !important; }

@media (max-width: 768px) {
  .staff-profile-detail-drawer .profile-content-body .tab-profile-container {
    padding: 5px !important; }
  .staff-profile-detail-drawer .ant-drawer-content-wrapper {
    width: 390px !important; }
  .staff-profile-history-list-drawer .ant-drawer-content-wrapper {
    width: 390px !important; } }

@media (max-width: 375px) {
  .staff-profile-detail-drawer .profile-content-body .tab-profile-container {
    padding: 5px !important; }
  .staff-profile-detail-drawer .ant-drawer-content-wrapper {
    width: 375px !important; }
  .staff-profile-history-list-drawer .ant-drawer-content-wrapper {
    width: 375px !important; } }

.job-title-container span {
  color: black;
  font-size: 16;
  font-weight: 600; }

.job-title-container a {
  color: black;
  font-size: 16;
  font-weight: 600; }

.csv-upload-list-title span {
  color: black;
  font-size: 13;
  font-weight: 600; }

.csv-upload-list-title a {
  color: black;
  font-size: 13;
  font-weight: 600; }

.ant-table thead > tr > th,
.ant-table tbody > tr > td,
.ant-table tfoot > tr > th,
.ant-table tfoot > tr > td {
  position: relative;
  padding: 13px 20px;
  overflow-wrap: break-word; }

.select-container .ant-select {
  color: #0057ff;
  width: 100%; }
  .select-container .ant-select .ant-select-selector {
    position: relative;
    background: #ecf2fe !important;
    border: 1px solid transparent !important;
    border-radius: 22px !important;
    transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    width: 100%;
    height: 30px;
    padding: 0 11px; }
    .select-container .ant-select .ant-select-selector .ant-select-selection-search-input {
      height: 30px; }
  .select-container .ant-select .ant-select-arrow {
    color: #0057ff; }

.select-container .ant-select-red {
  color: rgba(189, 6, 6, 0.61);
  width: 90%; }
  .select-container .ant-select-red .ant-select-selector {
    position: relative;
    background: rgba(230, 3, 3, 0.534) !important;
    border: 1px solid transparent !important;
    border-radius: 22px !important;
    transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    width: 100%;
    height: 30px;
    padding: 0 11px; }
    .select-container .ant-select-red .ant-select-selector .ant-select-selection-search-input {
      height: 30px; }
  .select-container .ant-select-red .ant-select-arrow {
    color: rgba(189, 6, 6, 0.61); }

.select-container .ant-select-green {
  color: green;
  width: 90%; }
  .select-container .ant-select-green .ant-select-selector {
    position: relative;
    background: rgba(0, 128, 0, 0.2) !important;
    border: 1px solid transparent !important;
    border-radius: 22px !important;
    transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    width: 100%;
    height: 30px;
    padding: 0 11px; }
    .select-container .ant-select-green .ant-select-selector .ant-select-selection-search-input {
      height: 30px; }
  .select-container .ant-select-green .ant-select-arrow {
    color: green; }

.select-container .ant-select-orange {
  color: orangered;
  width: 90%; }
  .select-container .ant-select-orange .ant-select-selector {
    position: relative;
    background: #fcc037 !important;
    border: 1px solid transparent !important;
    border-radius: 22px !important;
    transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    width: 100%;
    height: 30px;
    padding: 0 11px; }
    .select-container .ant-select-orange .ant-select-selector .ant-select-selection-search-input {
      height: 30px; }
  .select-container .ant-select-orange .ant-select-arrow {
    color: orangered; }

.select-container .ant-select-yellow {
  color: #996b00;
  width: 90%; }
  .select-container .ant-select-yellow .ant-select-selector {
    position: relative;
    background: rgba(255, 255, 0, 0.1) !important;
    border: 1px solid transparent !important;
    border-radius: 22px !important;
    transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    width: 100%;
    height: 30px;
    padding: 0 11px; }
    .select-container .ant-select-yellow .ant-select-selector .ant-select-selection-search-input {
      height: 30px; }
  .select-container .ant-select-yellow .ant-select-arrow {
    color: #996b00; }

.ant-select-item-option-active-orange {
  background: #fcc037 !important; }

.ant-select-item-option-active-green {
  background: rgba(0, 128, 0, 0.2) !important; }

.ant-select-item-option-active-blue {
  background: #ecf2fe !important; }

.ant-select-item-option-active-red {
  background: rgba(230, 3, 3, 0.534) !important; }

.ant-select-item-option-active-yellow {
  background: rgba(255, 255, 0, 0.1) !important; }

.ant-select-item-option-content-orange {
  color: orangered !important; }

.ant-select-item-option-content-green {
  color: green !important; }

.ant-select-item-option-content-blue {
  color: #0057ff !important; }

.ant-select-item-option-content-red {
  color: rgba(189, 6, 6, 0.61) !important; }

.candidate-listbutton {
  background-color: #f37a21;
  border-color: #ca631a; }
  .candidate-listbutton:hover {
    background-color: #ca631a;
    border-color: #f37a21; }
  .candidate-listbutton:focus {
    background-color: #f37a21;
    border-color: #ca631a; }

.note-listbutton {
  background-color: #f37a21;
  border-color: #ca631a; }
  .note-listbutton:hover {
    background-color: #ca631a;
    border-color: #f37a21; }
  .note-listbutton:focus {
    background-color: #f37a21;
    border-color: #ca631a; }

.worker-delete-btn {
  background-color: #a0a0a0;
  border-color: #bbbbbb; }
  .worker-delete-btn:hover {
    background-color: #bbbbbb;
    border-color: #a0a0a0; }
  .worker-delete-btn:focus {
    background-color: #a0a0a0;
    border-color: #bbbbbb; }

.edit-listbutton {
  background-color: #629e13;
  border-color: #2eca73; }
  .edit-listbutton:hover {
    background-color: #2eca73;
    border-color: #629e13; }
  .edit-listbutton:focus {
    background-color: #2eca73;
    border-color: #629e13; }

.copy-listbutton {
  background-color: #36cfc9;
  border-color: #08979c; }
  .copy-listbutton:hover {
    background-color: #08979c;
    border-color: #08979c; }
  .copy-listbutton:focus {
    background-color: #36cfc9;
    border-color: #08979c; }

.blue-border-button {
  border-color: #91d5ff;
  background-color: #e6f7ff; }
  .blue-border-button:hover {
    background-color: #e6f7ff;
    border-color: #91d5ff; }
  .blue-border-button:focus {
    background-color: #e6f7ff;
    border-color: #91d5ff; }

.dashboard-container {
  padding: 10px; }
  .dashboard-container .notification-columnchart-container {
    height: 335px !important; }
  .dashboard-container .notification-list-container {
    height: 335px !important;
    border: 1px solid #f0f0f0;
    border-radius: 4px;
    height: 100% !important;
    position: relative; }
    .dashboard-container .notification-list-container .ant-tabs-nav {
      margin-bottom: 0 !important;
      position: relative; }
      .dashboard-container .notification-list-container .ant-tabs-nav .ant-tabs-nav-list {
        position: relative; }
        .dashboard-container .notification-list-container .ant-tabs-nav .ant-tabs-nav-list .ant-tabs-tab {
          position: relative;
          padding: 10px 20px 10px 20px;
          font-size: 16px; }
    .dashboard-container .notification-list-container .table-container {
      position: relative; }
      .dashboard-container .notification-list-container .table-container .ant-empty-normal {
        min-height: 100px !important; }
      .dashboard-container .notification-list-container .table-container .ant-table-container {
        height: 100% !important;
        max-height: 220px !important;
        overflow-y: auto !important;
        position: relative !important; }
        .dashboard-container .notification-list-container .table-container .ant-table-container .ant-table-thead {
          position: sticky;
          top: 0;
          left: 0;
          right: 0;
          z-index: 1; }
          .dashboard-container .notification-list-container .table-container .ant-table-container .ant-table-thead .ant-table-cell {
            padding: 8px 10px 8px 10px; }
            .dashboard-container .notification-list-container .table-container .ant-table-container .ant-table-thead .ant-table-cell .ant-table-column-sorters {
              padding: 0; }
        .dashboard-container .notification-list-container .table-container .ant-table-container .ant-table-tbody .ant-table-cell {
          font-size: 13px;
          padding: 8px 10px 8px 10px; }
    .dashboard-container .notification-list-container .ant-table-pagination {
      margin-right: 15px; }
  .dashboard-container .numberHiredContainer {
    height: 272px !important;
    overflow-y: hidden;
    overflow-x: auto;
    position: relative;
    z-index: 1; }
    .dashboard-container .numberHiredContainer .chart {
      max-width: 100% !important;
      min-width: 550px !important;
      padding-bottom: 15px; }
    .dashboard-container .numberHiredContainer::-webkit-scrollbar {
      width: 5px;
      height: 5px; }
    .dashboard-container .numberHiredContainer::-webkit-scrollbar-track {
      background: transparent !important;
      margin-right: 30px !important; }
    .dashboard-container .numberHiredContainer::-webkit-scrollbar-thumb {
      background: #0057ff !important; }
    .dashboard-container .numberHiredContainer::-webkit-scrollbar-thumb:hover {
      background: #0044c7 !important; }
  .dashboard-container .staffVisatypeContainer {
    height: 391px !important;
    overflow-y: hidden;
    overflow-x: auto;
    position: relative;
    z-index: 1; }
    .dashboard-container .staffVisatypeContainer .chart {
      max-width: 100% !important;
      min-width: 400px !important;
      padding-bottom: 15px; }
    .dashboard-container .staffVisatypeContainer::-webkit-scrollbar {
      width: 5px;
      height: 5px; }
    .dashboard-container .staffVisatypeContainer::-webkit-scrollbar-track {
      background: transparent !important;
      margin-right: 30px !important; }
    .dashboard-container .staffVisatypeContainer::-webkit-scrollbar-thumb {
      background: #0057ff !important; }
    .dashboard-container .staffVisatypeContainer::-webkit-scrollbar-thumb:hover {
      background: #0044c7 !important; }
  .dashboard-container .genderAgeContainer {
    height: 391px !important;
    overflow-y: hidden;
    overflow-x: auto;
    position: relative;
    z-index: 1; }
    .dashboard-container .genderAgeContainer .chart {
      max-width: 100% !important;
      min-width: 400px !important;
      padding-bottom: 15px; }
    .dashboard-container .genderAgeContainer::-webkit-scrollbar {
      width: 5px;
      height: 5px; }
    .dashboard-container .genderAgeContainer::-webkit-scrollbar-track {
      background: transparent !important;
      margin-right: 30px !important; }
    .dashboard-container .genderAgeContainer::-webkit-scrollbar-thumb {
      background: #0057ff !important; }
    .dashboard-container .genderAgeContainer::-webkit-scrollbar-thumb:hover {
      background: #0044c7 !important; }
  .dashboard-container .prefectureListCounts {
    height: 391px;
    overflow-y: auto;
    overflow-x: hidden; }
  .dashboard-container .scroll-tut {
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    margin-top: -5px;
    height: 5px;
    width: 100%;
    background-color: #ecf2fe;
    position: relative;
    z-index: 0;
    border-radius: 3px;
    display: none; }
    .dashboard-container .scroll-tut.chart-2 {
      display: none; }
    .dashboard-container .scroll-tut.chart-3 {
      display: none; }

@-webkit-keyframes bounce {
  0% {
    transform: translateX(-5px); }
  50% {
    transform: translateX(10px); }
  100% {
    transform: translateX(-5px); } }

@keyframes bounce {
  0% {
    transform: translateX(-5px); }
  50% {
    transform: translateX(10px); }
  100% {
    transform: translateX(-5px); } }
  .dashboard-container .right-icon {
    position: absolute;
    bottom: -8px;
    right: -3px;
    font-size: 14px;
    background-color: #0057ff;
    color: #fff;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff;
    -webkit-animation: bounce 1.5s infinite ease-in-out;
    -o-animation: bounce 1.5s infinite ease-in-out;
    -ms-animation: bounce 1.5s infinite ease-in-out;
    -moz-animation: bounce 1.5s infinite ease-in-out;
    animation: bounce 1.5s infinite ease-in-out;
    z-index: 3; }
  @media only screen and (max-width: 1111px) {
    .dashboard-container .scroll-tut {
      display: flex; } }
  @media only screen and (max-width: 1174px) {
    .dashboard-container .scroll-tut.chart-2 {
      display: flex; } }
  @media only screen and (max-width: 865px) {
    .dashboard-container .scroll-tut.chart-3 {
      display: flex; } }

.auditlog-list-table .ant-table-container {
  overflow-x: auto !important; }
  .auditlog-list-table .ant-table-container .ant-table-content .ant-table-thead .ant-table-cell-fix-left,
  .auditlog-list-table .ant-table-container .ant-table-content .ant-table-thead .ant-table-cell-fix-right {
    z-index: auto !important; }
  .auditlog-list-table .ant-table-container .ant-table-content .ant-table-thead .ant-table-column-has-sorters .ant-table-filter-column-title {
    padding-right: 25px !important; }
  .auditlog-list-table .ant-table-container .ant-table-content .ant-table-thead .ant-table-column-sorters {
    padding: 0 !important; }
  .auditlog-list-table .ant-table-container .ant-table-content .ant-table-thead > tr > th {
    padding: 10px 10px !important; }
  .auditlog-list-table .ant-table-container .ant-table-content .ant-table-tbody .ant-table-cell-fix-left,
  .auditlog-list-table .ant-table-container .ant-table-content .ant-table-tbody .ant-table-cell-fix-right {
    z-index: auto !important; }

.auditlog-list-table .ant-table-pagination.ant-pagination {
  margin: 15px !important; }

.billing-list-table .ant-table-container {
  overflow-x: auto !important; }
  .billing-list-table .ant-table-container .ant-table-content .ant-table-thead .ant-table-cell-fix-left,
  .billing-list-table .ant-table-container .ant-table-content .ant-table-thead .ant-table-cell-fix-right {
    z-index: auto !important; }
  .billing-list-table .ant-table-container .ant-table-content .ant-table-thead .ant-table-column-has-sorters .ant-table-filter-column-title {
    padding-right: 25px !important; }
  .billing-list-table .ant-table-container .ant-table-content .ant-table-thead .ant-table-column-sorters {
    padding: 0 !important; }
  .billing-list-table .ant-table-container .ant-table-content .ant-table-thead > tr > th {
    padding: 10px 10px !important; }
  .billing-list-table .ant-table-container .ant-table-content .ant-table-tbody .ant-table-cell-fix-left,
  .billing-list-table .ant-table-container .ant-table-content .ant-table-tbody .ant-table-cell-fix-right {
    z-index: auto !important; }

.billing-list-table .ant-table-pagination.ant-pagination {
  margin: 15px !important; }

.time-management {
  background-color: #f9fafc !important;
  min-height: 100vh; }
  .time-management-sider {
    background-color: #0057ff;
    width: 100%;
    flex: 1;
    padding: 30px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative; }
    .time-management-sider button {
      background-color: rgba(255, 255, 255, 0.3);
      border: 1px solid rgba(255, 255, 255, 0.3);
      color: #fff;
      display: flex;
      align-items: center; }
      .time-management-sider button:hover {
        background-color: rgba(255, 255, 255, 0.5);
        color: #fff; }
      .time-management-sider button .right {
        font-size: 10dpx; }
    .time-management-sider .time-container {
      margin-top: 90px;
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      z-index: 1; }
      .time-management-sider .time-container h1 {
        font-size: 77px;
        line-height: 77px;
        font-weight: bold;
        color: #fff;
        margin-bottom: 0; }
      .time-management-sider .time-container p {
        font-size: 32px;
        margin-bottom: 0; }
      .time-management-sider .time-container span {
        font-size: 57px;
        margin-bottom: 0; }
      .time-management-sider .time-container h2 {
        color: #fff;
        font-weight: bold;
        margin-top: 90px;
        font-size: 32px; }
    .time-management-sider::before {
      content: '';
      background-image: url("/assets/images/back.jpg");
      background-size: cover;
      background-repeat: no-repeat, repeat;
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      top: 0; }
  .time-management-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 30px; }
    .time-management-content .menu {
      width: 100%;
      max-width: 590px;
      margin: 0 auto;
      z-index: 1; }
      .time-management-content .menu h1 {
        font-size: 32px;
        font-weight: bold;
        text-align: center;
        color: #182747;
        margin-bottom: 50px; }
      .time-management-content .menu-button {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-start;
        padding: 30px;
        gap: 30px;
        background: #fff;
        border-bottom: 5px solid #0057ff;
        box-shadow: 0px 1px 5px rgba(173, 175, 187, 0.4);
        border-radius: 24px 24px 0px 0px;
        cursor: pointer;
        transition: 0.6s; }
        .time-management-content .menu-button img {
          border-radius: 50%;
          height: 120px;
          width: 120px;
          background-color: #0057ff;
          padding: 20px;
          overflow: visible; }
        .time-management-content .menu-button .title {
          display: flex;
          align-items: center;
          justify-content: space-between;
          flex: 1;
          width: 100%;
          flex-wrap: wrap;
          gap: 15px; }
          .time-management-content .menu-button .title span {
            font-size: 26px;
            color: #182747;
            font-weight: bold; }
          .time-management-content .menu-button .title svg {
            height: 40px;
            width: 40px;
            border-radius: 14px;
            border: 1px solid #e8e8e8;
            background-color: #f9fafc;
            padding: 10px; }
        .time-management-content .menu-button.menu2 {
          border-bottom-color: #f23d6a; }
          .time-management-content .menu-button.menu2 img {
            background-color: #f23d6a; }
        .time-management-content .menu-button.menu3 {
          border-bottom-color: #2eca73; }
          .time-management-content .menu-button.menu3 img {
            background-color: #2eca73; }
        .time-management-content .menu-button.menu4 {
          border-bottom-color: #fcc037; }
          .time-management-content .menu-button.menu4 img {
            background-color: #fcc037; }
        .time-management-content .menu-button:hover {
          box-shadow: 0px 15px 35px rgba(173, 175, 187, 0.5);
          transform: translateY(-10px); }
          .time-management-content .menu-button:hover .title svg {
            border: 1px solid #0057ff;
            background-color: #0057ff;
            color: #fff; }
          .time-management-content .menu-button:hover.menu2 .title svg {
            border: 1px solid #f23d6a;
            background-color: #f23d6a; }
          .time-management-content .menu-button:hover.menu3 .title svg {
            border: 1px solid #2eca73;
            background-color: #2eca73; }
          .time-management-content .menu-button:hover.menu4 .title svg {
            border: 1px solid #fcc037;
            background-color: #fcc037; }
        .time-management-content .menu-button.select .title span {
          font-size: 20px; }
    .time-management-content .scan {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      z-index: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center; }
      .time-management-content .scan-title {
        text-align: center; }
        .time-management-content .scan-title img {
          border-radius: 50%;
          height: 100px;
          width: 100px;
          background-color: #0057ff;
          padding: 20px;
          overflow: visible;
          margin-bottom: 15px; }
        .time-management-content .scan-title h1 {
          font-size: 32px;
          font-weight: bold;
          text-align: center;
          color: #182747;
          margin-bottom: 30px; }
        .time-management-content .scan-title.END_WORK img {
          background-color: #f23d6a; }
        .time-management-content .scan-title.START_BREAK img {
          background-color: #2eca73; }
        .time-management-content .scan-title.END_BREAK img {
          background-color: #fcc037; }
      .time-management-content .scan .ant-select {
        margin-bottom: 30px;
        min-width: 200px; }
      .time-management-content .scan .ant-select-selector {
        border-width: 0 !important;
        box-shadow: 0px 1px 5px rgba(173, 175, 187, 0.4);
        background-color: #fff;
        color: #182747; }
        .time-management-content .scan .ant-select-selector::placeholder {
          color: #182747 !important; }
        .time-management-content .scan .ant-select-selector:-ms-input-placeholder {
          color: #182747 !important; }
        .time-management-content .scan .ant-select-selector::-ms-input-placeholder {
          color: #182747 !important; }
      .time-management-content .scan video {
        height: 400px !important;
        width: 400px !important;
        background-color: #fff;
        overflow: hidden;
        position: relative;
        border-radius: 24px !important; }
      .time-management-content .scan #reader {
        border-radius: 24px !important;
        overflow: hidden !important;
        position: relative !important; }
        .time-management-content .scan #reader video {
          border-radius: 24px !important; }
      .time-management-content .scan-camera {
        height: 400px !important;
        width: 400px !important;
        background-color: #fff;
        border-radius: 24px !important;
        box-shadow: 0px 4px 30px rgba(26, 42, 97, 0.2);
        overflow: hidden !important;
        position: relative; }
        .time-management-content .scan-camera::after {
          content: '';
          position: absolute;
          left: 25px;
          right: 25px;
          top: 25px;
          bottom: 25px;
          box-shadow: 0 0 0 40px #fff;
          border-radius: 24px; }
        .time-management-content .scan-camera .corner-top-left {
          position: absolute;
          left: 19px;
          top: 19px;
          z-index: 1;
          height: 90px;
          width: 90px;
          border-top-left-radius: 30px;
          border-left: 6px solid #0057ff;
          border-top: 6px solid #0057ff; }
        .time-management-content .scan-camera .corner-top-right {
          position: absolute;
          right: 19px;
          top: 19px;
          z-index: 1;
          height: 90px;
          width: 90px;
          border-top-right-radius: 30px;
          border-right: 6px solid #0057ff;
          border-top: 6px solid #0057ff; }
        .time-management-content .scan-camera .corner-bottom-left {
          position: absolute;
          left: 19px;
          bottom: 19px;
          z-index: 1;
          height: 90px;
          width: 90px;
          border-bottom-left-radius: 30px;
          border-left: 6px solid #0057ff;
          border-bottom: 6px solid #0057ff; }
        .time-management-content .scan-camera .corner-bottom-right {
          position: absolute;
          right: 19px;
          bottom: 19px;
          z-index: 1;
          height: 90px;
          width: 90px;
          border-bottom-right-radius: 30px;
          border-right: 6px solid #0057ff;
          border-bottom: 6px solid #0057ff; }
      .time-management-content .scan .arrow {
        margin-top: 15px;
        -webkit-animation: bounce 1.5s infinite ease-in-out;
        -o-animation: bounce 1.5s infinite ease-in-out;
        -ms-animation: bounce 1.5s infinite ease-in-out;
        -moz-animation: bounce 1.5s infinite ease-in-out;
        animation: bounce 1.5s infinite ease-in-out; }

@-webkit-keyframes bounce {
  0% {
    transform: translateY(-4px); }
  50% {
    transform: translateY(8px); }
  100% {
    transform: translateY(-4px); } }

@keyframes bounce {
  0% {
    transform: translateY(-4px); }
  50% {
    transform: translateY(8px); }
  100% {
    transform: translateY(-4px); } }
      .time-management-content .scan p {
        font-size: 16px;
        font-weight: bold;
        color: #182747;
        text-align: center;
        margin-bottom: 0;
        margin-top: 15px; }
    .time-management-content .scan-barcode {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center; }
      .time-management-content .scan-barcode-title {
        text-align: center; }
        .time-management-content .scan-barcode-title img {
          border-radius: 50%;
          height: 100px;
          width: 100px;
          background-color: #0057ff;
          padding: 20px;
          overflow: visible;
          margin-bottom: 15px; }
        .time-management-content .scan-barcode-title h1 {
          font-size: 32px;
          font-weight: bold;
          text-align: center;
          color: #182747;
          margin-bottom: 30px; }
        .time-management-content .scan-barcode-title.END_WORK img {
          background-color: #f23d6a; }
        .time-management-content .scan-barcode-title.START_BREAK img {
          background-color: #2eca73; }
        .time-management-content .scan-barcode-title.END_BREAK img {
          background-color: #fcc037; }
      .time-management-content .scan-barcode-card {
        height: 400px;
        width: 400px;
        background-color: #fff;
        border-radius: 24px !important;
        box-shadow: 0px 4px 30px rgba(26, 42, 97, 0.2);
        overflow: hidden !important;
        position: relative; }
        .time-management-content .scan-barcode-card img {
          width: 100%;
          height: 100%;
          object-fit: cover; }
      .time-management-content .scan-barcode .arrow {
        margin-top: 15px;
        -webkit-animation: bounce 1.5s infinite ease-in-out;
        -o-animation: bounce 1.5s infinite ease-in-out;
        -ms-animation: bounce 1.5s infinite ease-in-out;
        -moz-animation: bounce 1.5s infinite ease-in-out;
        animation: bounce 1.5s infinite ease-in-out; }

@-webkit-keyframes bounce {
  0% {
    transform: translateY(-4px); }
  50% {
    transform: translateY(8px); }
  100% {
    transform: translateY(-4px); } }

@keyframes bounce {
  0% {
    transform: translateY(-4px); }
  50% {
    transform: translateY(8px); }
  100% {
    transform: translateY(-4px); } }
      .time-management-content .scan-barcode p {
        font-size: 16px;
        font-weight: bold;
        color: #182747;
        text-align: center;
        margin-bottom: 0;
        margin-top: 15px; }
    .time-management-content .result {
      width: 100%;
      margin: 0 auto;
      max-width: 500px; }
      .time-management-content .result-title {
        text-align: center; }
        .time-management-content .result-title img {
          border-radius: 50%;
          height: 100px;
          width: 100px;
          background-color: #0057ff;
          padding: 20px;
          overflow: visible;
          margin-bottom: 15px; }
        .time-management-content .result-title h1 {
          font-size: 32px;
          font-weight: bold;
          text-align: center;
          color: #182747;
          margin-bottom: 30px; }
        .time-management-content .result-title.END_WORK img {
          background-color: #f23d6a; }
        .time-management-content .result-title.START_BREAK img {
          background-color: #2eca73; }
        .time-management-content .result-title.END_BREAK img {
          background-color: #fcc037; }
      .time-management-content .result-card {
        box-shadow: 0px 1px 5px rgba(173, 175, 187, 0.4);
        border-radius: 24px;
        background-color: #fff;
        display: flex;
        flex-direction: column;
        padding: 50px 40px;
        gap: 20px;
        width: 100%; }
        .time-management-content .result-card h1 {
          font-size: 47px;
          font-weight: bold;
          text-align: center;
          align-items: center;
          justify-content: center;
          margin-bottom: -20px;
          display: flex;
          flex-wrap: wrap;
          gap: 10px; }
          .time-management-content .result-card h1 svg {
            color: #2eca73; }
        .time-management-content .result-card p {
          font-size: 22px;
          color: #747688;
          text-align: center;
          margin-bottom: 10px;
          font-weight: bold; }
        .time-management-content .result-card .result-item {
          display: flex;
          gap: 20px;
          align-items: center;
          justify-content: space-between; }
          .time-management-content .result-card .result-item span {
            font-size: 18px;
            color: #747688; }
          .time-management-content .result-card .result-item .result-text {
            font-weight: bold;
            color: #182747;
            text-align: right; }
    .time-management-content .back-button {
      position: absolute;
      left: 30px;
      top: 30px;
      font-size: 18px;
      font-weight: bold;
      color: #182747;
      display: flex;
      align-items: center;
      padding: 0;
      padding-right: 15px;
      gap: 5px; }
      .time-management-content .back-button svg {
        height: 40px;
        width: 40px;
        background-color: #fff;
        padding: 10px;
        border-radius: 14px;
        box-shadow: 0px 1px 5px rgba(173, 175, 187, 0.4);
        color: #0057ff; }
    .time-management-content .select-type {
      position: absolute;
      right: 30px;
      top: 30px;
      display: flex;
      align-items: center;
      box-shadow: 0px 1px 5px rgba(173, 175, 187, 0.4);
      height: 40px;
      border-radius: 14px;
      background-color: #f9fafc;
      padding: 3px 5px;
      z-index: 2; }
      .time-management-content .select-type .ant-btn[disabled],
      .time-management-content .select-type .ant-btn[disabled]:hover,
      .time-management-content .select-type .ant-btn[disabled]:focus,
      .time-management-content .select-type .ant-btn[disabled]:active {
        color: #fff !important;
        background: #0057ff !important;
        border-color: #0057ff !important;
        text-shadow: none;
        box-shadow: none; }
      .time-management-content .select-type .ant-btn {
        border-width: 0 !important;
        background-color: transparent !important; }
  @media (max-width: 1048px) {
    .time-management-sider .time-container h1 {
      font-size: 62px;
      line-height: 62px; }
    .time-management-sider .time-container span {
      font-size: 50px; }
    .time-management-sider .time-container h2 {
      font-size: 28px; } }
  @media (max-width: 767px) {
    .time-management {
      min-height: auto; }
      .time-management-sider {
        padding: 20px; }
        .time-management-sider .time-container {
          align-items: center;
          justify-content: center;
          text-align: center;
          width: 100%;
          padding-top: 30px;
          margin-top: 0; }
          .time-management-sider .time-container h1 {
            font-size: 37px;
            line-height: 37px; }
          .time-management-sider .time-container p {
            font-size: 18px; }
          .time-management-sider .time-container span {
            font-size: 27px;
            margin-bottom: 0; }
          .time-management-sider .time-container h2 {
            margin-top: 15px;
            font-size: 22px; }
      .time-management-content {
        padding: 20px;
        min-height: 580px; }
        .time-management-content .menu h1 {
          font-size: 22px;
          margin-bottom: 25px; }
        .time-management-content .menu-button {
          padding: 20px;
          gap: 20px; }
          .time-management-content .menu-button img {
            border-radius: 50%;
            height: 80px;
            width: 80px;
            background-color: #0057ff;
            padding: 10px; }
          .time-management-content .menu-button .title {
            gap: 10px; }
            .time-management-content .menu-button .title span {
              font-size: 18px; }
            .time-management-content .menu-button .title svg {
              height: 28px;
              width: 28px;
              padding: 7px; }
        .time-management-content .scan {
          min-height: 670px; }
          .time-management-content .scan-title {
            display: flex;
            align-items: center;
            margin-bottom: 25px;
            gap: 20px; }
            .time-management-content .scan-title img {
              height: 80px;
              width: 80px;
              background-color: #0057ff;
              padding: 10px;
              margin-bottom: 0; }
            .time-management-content .scan-title h1 {
              font-size: 22px;
              margin-bottom: 0; }
          .time-management-content .scan video {
            height: 300px !important;
            width: 300px !important; }
          .time-management-content .scan-camera {
            height: 300px !important;
            width: 300px !important; }
            .time-management-content .scan-camera::after {
              left: 18px;
              right: 18px;
              top: 18px;
              bottom: 18px; }
            .time-management-content .scan-camera .corner-top-left {
              left: 12px;
              top: 12px;
              height: 60px;
              width: 60px; }
            .time-management-content .scan-camera .corner-top-right {
              right: 12px;
              top: 12px;
              height: 60px;
              width: 60px; }
            .time-management-content .scan-camera .corner-bottom-left {
              left: 12px;
              bottom: 12px;
              height: 60px;
              width: 60px; }
            .time-management-content .scan-camera .corner-bottom-right {
              right: 12px;
              bottom: 12px;
              height: 60px;
              width: 60px; }
        .time-management-content .scan-barcode {
          min-height: 670px; }
          .time-management-content .scan-barcode-title {
            display: flex;
            align-items: center;
            margin-bottom: 25px;
            gap: 20px; }
            .time-management-content .scan-barcode-title img {
              height: 80px;
              width: 80px;
              background-color: #0057ff;
              padding: 10px;
              margin-bottom: 0; }
            .time-management-content .scan-barcode-title h1 {
              font-size: 22px;
              margin-bottom: 0; }
          .time-management-content .scan-barcode-card {
            width: 300px;
            height: 300px; }
        .time-management-content .result-title {
          display: flex;
          align-items: center;
          justify-content: center;
          margin-bottom: 25px;
          gap: 20px; }
          .time-management-content .result-title img {
            height: 80px;
            width: 80px;
            background-color: #0057ff;
            padding: 10px;
            margin-bottom: 0; }
          .time-management-content .result-title h1 {
            font-size: 22px;
            margin-bottom: 0;
            text-align: left; }
        .time-management-content .result-card {
          padding: 30px 20px; }
          .time-management-content .result-card h1 {
            font-size: 24px; }
          .time-management-content .result-card .result-item span {
            font-size: 16px; }
        .time-management-content .back-button {
          position: absolute;
          left: 20px;
          top: 20px; }
        .time-management-content .select-type {
          position: absolute;
          right: 20px;
          top: 20px; } }
  @media (max-height: 687px) {
    .time-management-content .scan {
      overflow-y: auto; }
    .time-management-content .scan-barcode {
      overflow-y: auto; } }
  @media (max-width: 400px) {
    .time-management-content .select-type {
      position: fixed;
      left: 50%;
      right: unset;
      top: unset;
      bottom: 25px;
      transform: translateX(-50%); }
    .time-management-content .scan-barcode-card {
      width: 100%;
      height: 300px; } }

.switch-modal .ant-modal-close-x {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 65px;
  height: 65px;
  align-self: center;
  align-content: center; }

.switch-modal .anticon-close {
  color: #0057ff;
  width: 40px;
  height: 40px;
  border: 1px solid #e8e8e8;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background-color: #f9fafc; }

.switch-modal-body {
  padding: 30px 0px;
  margin: 0 auto;
  width: 100%;
  max-width: 380px; }
  .switch-modal-body img {
    height: 150px;
    width: 150px;
    margin: auto auto 30px auto;
    display: block; }
  .switch-modal-body h1 {
    font-size: 22px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 30px; }

.time-management-alert {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 10px;
  gap: 10px;
  border: 1px solid #e8e8e8;
  height: 34px;
  border-radius: 12px;
  margin: 5px;
  color: #f23d6a;
  font-size: 16px;
  word-break: keep-all; }

.download-menu {
  display: flex;
  flex-direction: column; }
  .download-menu button {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px !important;
    height: auto !important;
    border-bottom: 1px solid #e8e8e8;
    border-radius: 0 !important;
    text-align: left;
    font-size: 14px !important; }
    .download-menu button span {
      margin-left: 0 !important; }
    .download-menu button svg {
      color: #0057ff;
      height: 32px;
      width: 32px;
      border-radius: 20px;
      background-color: #ecf2fe;
      padding: 7px;
      overflow: visible; }
    .download-menu button p {
      font-size: 10px;
      color: #fcc037;
      margin-bottom: 0; }

.time-management-list {
  padding: 0 !important;
  background-color: #fff;
  min-height: calc(100vh - 114px); }
  .time-management-list .last-week .ant-table.ant-table-middle .ant-table-tbody > tr td:nth-child(7) {
    background-color: #f1f2f6 !important; }
  .time-management-list .last-week .ant-table.ant-table-middle .ant-table-tbody > tr td:nth-child(8) {
    background-color: #f1f2f6 !important; }
  .time-management-list .last-week .ant-table.ant-table-middle .ant-table-tbody > tr td:nth-child(9) {
    background-color: #f1f2f6 !important; }
  .time-management-list .last-week .ant-table.ant-table-middle .ant-table-tbody > tr td:nth-child(10) {
    background-color: #f1f2f6 !important; }
  .time-management-list .last-week .ant-table.ant-table-middle .ant-table-tbody > tr td:nth-child(11) {
    background-color: #f1f2f6 !important; }
  .time-management-list .last-week .ant-table.ant-table-middle .ant-table-tbody > tr td:nth-child(12) {
    background-color: #f1f2f6 !important;
    border-right: 1px solid #747688; }
  .time-management-list .ant-table-body table {
    table-layout: unset !important; }
  .time-management-list .ant-tabs-nav {
    background-color: #ecf2fe;
    padding: 20px 20px 0px !important;
    border-bottom: 1px solid #0057ff;
    margin-bottom: 0 !important; }
  .time-management-list .ant-tabs-tab-active {
    background-color: #0057ff !important; }
    .time-management-list .ant-tabs-tab-active .ant-tabs-tab-btn {
      color: #fff !important;
      text-align: center !important; }
  .time-management-list .ant-tabs-tab {
    margin-right: 0 !important;
    border-bottom-width: 0 !important;
    min-width: 90px !important;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center; }
  .time-management-list .ant-tabs-content {
    padding: 20px; }
  .time-management-list .ant-table th {
    text-align: center;
    background-color: #d6e4ff !important; }
  .time-management-list .ant-table td {
    text-align: center !important;
    border-bottom: 1px solid #bbbbbb !important; }
  .time-management-list .ant-pagination.mini {
    margin: 15px !important; }
  .time-management-list .daily .ant-table td:nth-child(5) {
    border-right: 2px solid #0057ff !important; }
  .time-management-list .daily .ant-table th:nth-child(5) {
    border-right: 2px solid #0057ff !important; }
  .time-management-list .daily .ant-table th:nth-last-child(2) {
    border-left: 2px solid #0057ff !important; }
  .time-management-list .daily .ant-table td:nth-last-child(2) {
    border-left: 2px solid #0057ff !important; }
  .time-management-list .daily .ant-table .ant-table-summary {
    display: table-header-group; }
    .time-management-list .daily .ant-table .ant-table-summary tr {
      max-height: 28px;
      background-color: #ebf2ff !important; }
    .time-management-list .daily .ant-table .ant-table-summary th {
      background-color: #ebf2ff !important;
      border-left-width: 0 !important;
      padding: 4px 10px; }
    .time-management-list .daily .ant-table .ant-table-summary th:nth-child(1) {
      position: sticky;
      left: 0;
      z-index: 2; }
    .time-management-list .daily .ant-table .ant-table-summary th:nth-child(4) {
      position: sticky;
      left: 320px;
      z-index: 2; }
    .time-management-list .daily .ant-table .ant-table-summary th:nth-child(5) {
      position: sticky;
      left: 400px;
      z-index: 2; }
    .time-management-list .daily .ant-table .ant-table-summary td {
      border-right: 1px solid transparent !important;
      border-left: 1px solid transparent !important;
      text-align: center;
      padding: 4px 10px;
      border-bottom: 0px solid transparent !important; }
    .time-management-list .daily .ant-table .ant-table-summary .stick-start {
      position: sticky;
      left: 40px;
      z-index: 2;
      background-color: #fff; }
    .time-management-list .daily .ant-table .ant-table-summary .stick-second {
      position: sticky;
      left: 240px;
      z-index: 2;
      background-color: #fff; }
  .time-management-list .weekly .ant-table td:nth-child(6) {
    border-right: 2px solid #0057ff !important; }
  .time-management-list .weekly .ant-table th:nth-child(6) {
    border-right: 2px solid #0057ff !important; }
  .time-management-list .weekly .ant-table th:last-child {
    border-left: 2px solid #0057ff !important; }
  .time-management-list .weekly .ant-table td:last-child {
    border-left: 2px solid #0057ff; }
  .time-management-list .other .ant-table td:nth-child(2) {
    border-right: 2px solid #0057ff !important; }
  .time-management-list .other .ant-table th:nth-child(2) {
    border-right: 2px solid #0057ff !important; }
  .time-management-list .other .ant-table th:last-child {
    border-left: 2px solid #0057ff !important; }
  .time-management-list .other .ant-table td:last-child {
    border-left: 2px solid #0057ff; }
  .time-management-list .monthly .ant-table td:nth-child(3) {
    border-right: 2px solid #0057ff !important; }
  .time-management-list .monthly .ant-table th:nth-child(3) {
    border-right: 2px solid #0057ff !important; }
  .time-management-list .monthly .ant-table th:last-child {
    border-left: 2px solid #0057ff !important; }
  .time-management-list .monthly .ant-table td:last-child {
    border-left: 2px solid #0057ff; }
  .time-management-list .monthly .ant-table .ant-table-summary {
    display: table-header-group; }
    .time-management-list .monthly .ant-table .ant-table-summary tr {
      max-height: 28px;
      background-color: #ebf2ff !important; }
    .time-management-list .monthly .ant-table .ant-table-summary th {
      background-color: #ebf2ff !important;
      padding: 4px 10px; }
    .time-management-list .monthly .ant-table .ant-table-summary th:nth-child(1) {
      position: sticky;
      left: 0;
      z-index: 2; }
    .time-management-list .monthly .ant-table .ant-table-summary td:nth-child(2) {
      border-right: 2px solid #0057ff !important; }
    .time-management-list .monthly .ant-table .ant-table-summary td:nth-child(3) {
      border-right: 1px solid #e8e8e8 !important; }
    .time-management-list .monthly .ant-table .ant-table-summary td {
      text-align: center;
      padding: 4px 10px;
      min-width: 66px !important; }
    .time-management-list .monthly .ant-table .ant-table-summary .stick-start {
      position: sticky;
      left: 40px;
      z-index: 2;
      background-color: #fff; }
    .time-management-list .monthly .ant-table .ant-table-summary .stick-second {
      position: sticky;
      left: 175px;
      z-index: 2;
      background-color: #ebf2ff !important; }
      .time-management-list .monthly .ant-table .ant-table-summary .stick-second.v2 {
        left: 240px; }
    .time-management-list .monthly .ant-table .ant-table-summary .stick-end {
      position: sticky;
      right: 0;
      z-index: 2;
      background-color: #ebf2ff; }
  .time-management-list .tb-first-item {
    flex: 1;
    padding: 5px;
    border-bottom: 1px dashed #e8e8e8; }
  .time-management-list .tb-second-item {
    flex: 1;
    padding: 5px; }
  .time-management-list .tb-values-second {
    margin: -12px -8px;
    display: flex;
    flex-direction: column;
    text-align: center; }
    .time-management-list .tb-values-second.today {
      color: #0057ff !important;
      font-weight: bold !important; }
  .time-management-list .tb-text-center {
    text-align: center; }
  .time-management-list .tb-buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap; }
  .time-management-list .tb-text-alert {
    color: #f23d6a;
    text-align: left; }
  .time-management-list .ant-table-placeholder td {
    border-left-width: 0 !important;
    border-bottom-width: 0 !important; }
  .time-management-list .date-changer {
    display: flex;
    gap: 10px;
    margin-bottom: 20px; }
    .time-management-list .date-changer-controller {
      display: flex;
      gap: 10px;
      border-radius: 14px;
      background-color: #f9fafc;
      border: 1px solid #e8e8e8;
      padding: 5px; }
      .time-management-list .date-changer-controller button {
        height: 30px !important;
        width: 30px !important; }
      .time-management-list .date-changer-controller .ant-picker-suffix {
        display: none !important; }
      .time-management-list .date-changer-controller .ant-picker {
        padding: 0 !important; }
        .time-management-list .date-changer-controller .ant-picker input {
          text-align: center !important;
          font-size: 16px !important;
          font-weight: bold !important;
          padding: 0 !important; }
      .time-management-list .date-changer-controller.week .ant-picker input {
        max-width: 175px !important;
        min-width: 175px !important; }
      .time-management-list .date-changer-controller.month .ant-picker input {
        max-width: 110px !important; }
      .time-management-list .date-changer-controller.year .ant-picker input {
        max-width: 60px !important; }
  @media (max-width: 670px) {
    .time-management-list th {
      position: relative !important;
      left: inherit !important; }
    .time-management-list td {
      position: relative !important;
      left: inherit !important; } }

.hours-edit {
  width: 100%;
  max-width: 450px;
  min-width: 320px; }
  .hours-edit-title {
    word-break: keep-all;
    padding: 15px;
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #e8e8e8; }
    .hours-edit-title h1 {
      font-size: 14px;
      font-weight: bold;
      color: #182747;
      font-weight: bold;
      margin-bottom: 0; }
    .hours-edit-title span {
      display: flex;
      align-items: center;
      font-size: 14px;
      color: #747688;
      padding: 0px 6px;
      background-color: #f9fafc;
      border-radius: 14px; }
      .hours-edit-title span svg {
        color: #0057ff; }
  .hours-edit-body {
    padding: 15px;
    border-bottom: 1px solid #e8e8e8; }
    .hours-edit-body .hours-add {
      padding-top: 15px;
      border-top: 1px solid #e8e8e8; }
    .hours-edit-body .add-button svg {
      color: #0057ff; }
  .hours-edit-footer {
    padding: 15px;
    display: flex;
    align-items: center;
    gap: 15px; }

.change-history {
  width: 100%;
  max-width: 375px;
  min-width: 375px;
  padding: 15px;
  display: flex;
  flex-direction: column;
  gap: 15px; }
  .change-history-rows {
    display: flex;
    gap: 15px;
    flex: 1; }
    .change-history-rows .history-item {
      border-right: 1px solid #e8e8e8;
      padding-right: 15px;
      flex: 1;
      max-width: 50%;
      word-break: break-all; }
      .change-history-rows .history-item-title {
        font-size: 12px;
        color: #747688;
        margin-bottom: 2px; }
      .change-history-rows .history-item-value {
        font-size: 14px;
        color: #182747;
        margin-bottom: 0;
        font-weight: bold; }
      .change-history-rows .history-item.end {
        border-right-width: 0;
        padding-right: 0; }

.ant-tag {
  border-radius: 4px !important; }

.ant-popover-title {
  padding: 8px 15px !important; }

.video-player-container {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: black;
  border-radius: 12px;
  overflow: hidden; }
  .video-player-container .youtube-player {
    width: 100%;
    height: 100%; }
    .video-player-container .youtube-player iframe {
      width: 100%;
      height: 100%; }
  .video-player-container .play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #0057ff;
    border: none;
    border-radius: 50%;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease; }
    .video-player-container .play-button:hover {
      background: #0057ff;
      opacity: 0.9;
      transform: translate(-50%, -50%) scale(1.1); }
    .video-player-container .play-button.playing {
      width: 60px;
      height: 60px;
      background: rgba(0, 0, 0, 0.4);
      opacity: 0;
      transition: opacity 0.3s ease; }
      .video-player-container .play-button.playing:hover {
        opacity: 1; }
    .video-player-container .play-button svg {
      width: 60px;
      height: 60px;
      fill: white; }
  .video-player-container .mute-button {
    position: absolute;
    bottom: 20px;
    right: 20px;
    background: rgba(0, 0, 0, 0.6);
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    opacity: 0; }
    .video-player-container .mute-button:hover {
      background: rgba(0, 0, 0, 0.8);
      transform: scale(1.1); }
    .video-player-container .mute-button svg {
      width: 20px;
      height: 20px;
      fill: white; }
  .video-player-container:hover .mute-button {
    opacity: 1; }

.input-align-right input {
  text-align: right; }

.input-align-right input[type='number']::-webkit-inner-spin-button,
.input-align-right input[type='number']::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0; }

.pre-wrap label {
  width: 80%;
  white-space: pre-line !important;
  overflow-wrap: anywhere !important; }

.error-offset-2 .ant-form-item-explain {
  margin-left: 20px !important; }

.staffMonthlyGraph canvas {
  margin-left: 20px !important; }

.notificationList {
  padding-top: 2px !important;
  padding-bottom: 2px !important;
  justify-content: flex-start !important; }
  .notificationList div {
    justify-content: flex-start !important;
    padding: 0 !important;
    margin: 0 !important; }
  .notificationList p {
    padding: 0 !important;
    margin: 0 !important; }
  .notificationList span {
    margin-left: 5px !important; }

.staffProfileId {
  max-width: 80px !important;
  word-wrap: break-word;
  margin-bottom: 0px !important; }

.notificationListTabs .ant-tabs-nav {
  margin-bottom: 0 !important; }

.coming-soon {
  z-index: 2;
  position: absolute;
  top: 0px;
  left: 0px;
  bottom: 0px;
  right: 0px;
  background-color: rgba(0, 0, 0, 0.4); }

.show-input-0 {
  margin-bottom: 0px !important; }
  .show-input-0 .ant-form-item-control-input {
    min-height: 0px !important; }

.profileFormItem {
  margin-bottom: 0 !important;
  width: 100% !important; }

.react-pdf-document .react-pdf__Page {
  display: flex !important;
  justify-content: center !important; }

.company-info-ok-button {
  margin-left: 20px !important; }

_:-ms-lang(x)::-ms-backdrop,
.company-info-ok-button {
  margin-left: 120px !important; }

body {
  -ms-overflow-style: none;
  /** IE11 */
  overflow-y: scroll;
  overflow-x: hidden;
  margin-right: -20px; }

_:-ms-lang(x)::-ms-backdrop,
.ant-select-selector {
  max-width: 920px !important; }

.table-helper {
  padding: 0 15px 15px 15px; }
  .table-helper p {
    margin-bottom: 0px !important; }

.ant-modal-root {
  z-index: 9999 !important; }

.dot {
  height: 10px;
  width: 10px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block; }

.notification-dot {
  height: 10px;
  width: 10px;
  border-radius: 50%;
  background-color: #0057ff;
  display: inline-block; }

.notification-span {
  font-size: 13px;
  color: #4a4a4a; }
  .notification-span span {
    color: #4a4a4a;
    margin-left: 0px !important; }

.ant-modal-close-x {
  color: #fff !important; }