.mainTableContainer {
  color: #383838;
  width: 100%;
  margin: auto;
  overflow-y: auto;
  /*    .tableHeader {
      &--right {
          float: right;
          margin-bottom: 8px;
      }
  }*/
  /*    .tableFooter {
      &--left {
          float: left;
      }

      &--right {
          float: right;
      }
  }*/
}
.mainTableContainer table {
  background-color: white;
  font-size: 18px;
  width: 100%;
}
.mainTableContainer table.dataTable.no-footer {
  border-bottom: none;
}
.mainTableContainer table thead {
  font-size: 16px;
}
.mainTableContainer table thead th {
  font-weight: normal !important;
  text-align: center;
}
.mainTableContainer table thead th.twidth1 {
  width: 1%;
}
.mainTableContainer table thead th.twidth2 {
  width: 2%;
}
.mainTableContainer table thead th.twidth3 {
  width: 3%;
}
.mainTableContainer table thead th.twidth4 {
  width: 4%;
}
.mainTableContainer table thead th.twidth5 {
  width: 5%;
}
.mainTableContainer table thead th.twidth6 {
  width: 6%;
}
.mainTableContainer table thead th.twidth7 {
  width: 7%;
}
.mainTableContainer table thead th.twidth8 {
  width: 8%;
}
.mainTableContainer table thead th.twidth9 {
  width: 9%;
}
.mainTableContainer table thead th.twidth10 {
  width: 10%;
}
.mainTableContainer table thead th.twidth11 {
  width: 11%;
}
.mainTableContainer table thead th.twidth12 {
  width: 12%;
}
.mainTableContainer table thead th.twidth13 {
  width: 13%;
}
.mainTableContainer table thead th.twidth14 {
  width: 14%;
}
.mainTableContainer table thead th.twidth15 {
  width: 15%;
}
.mainTableContainer table thead th.twidth16 {
  width: 16%;
}
.mainTableContainer table thead th.twidth17 {
  width: 17%;
}
.mainTableContainer table thead th.twidth18 {
  width: 18%;
}
.mainTableContainer table thead th.twidth19 {
  width: 19%;
}
.mainTableContainer table thead th.twidth20 {
  width: 20%;
}
.mainTableContainer table thead th.twidth21 {
  width: 21%;
}
.mainTableContainer table thead th.twidth22 {
  width: 22%;
}
.mainTableContainer table thead th.twidth23 {
  width: 23%;
}
.mainTableContainer table thead th.twidth24 {
  width: 24%;
}
.mainTableContainer table thead th.twidth25 {
  width: 25%;
}
.mainTableContainer table thead th.twidth26 {
  width: 26%;
}
.mainTableContainer table thead th.twidth27 {
  width: 27%;
}
.mainTableContainer table thead th.twidth28 {
  width: 28%;
}
.mainTableContainer table thead th.twidth29 {
  width: 29%;
}
.mainTableContainer table thead th.twidth30 {
  width: 30%;
}
.mainTableContainer table thead th.twidth31 {
  width: 31%;
}
.mainTableContainer table thead th.twidth32 {
  width: 32%;
}
.mainTableContainer table thead th.twidth33 {
  width: 33%;
}
.mainTableContainer table thead th.twidth34 {
  width: 34%;
}
.mainTableContainer table thead th.twidth35 {
  width: 35%;
}
.mainTableContainer table thead th.twidth36 {
  width: 36%;
}
.mainTableContainer table thead th.twidth37 {
  width: 37%;
}
.mainTableContainer table thead th.twidth38 {
  width: 38%;
}
.mainTableContainer table thead th.twidth39 {
  width: 39%;
}
.mainTableContainer table thead th.twidth40 {
  width: 40%;
}
.mainTableContainer table thead th.twidth41 {
  width: 41%;
}
.mainTableContainer table thead th.twidth42 {
  width: 42%;
}
.mainTableContainer table thead th.twidth43 {
  width: 43%;
}
.mainTableContainer table thead th.twidth44 {
  width: 44%;
}
.mainTableContainer table thead th.twidth45 {
  width: 45%;
}
.mainTableContainer table thead th.twidth46 {
  width: 46%;
}
.mainTableContainer table thead th.twidth47 {
  width: 47%;
}
.mainTableContainer table thead th.twidth48 {
  width: 48%;
}
.mainTableContainer table thead th.twidth49 {
  width: 49%;
}
.mainTableContainer table thead th.twidth50 {
  width: 50%;
}
.mainTableContainer table tbody tr:nth-child(even) {
  background-color: #F5F9FF;
}
.mainTableContainer table tbody tr:hover {
  background-color: #C8DEFF;
}
.mainTableContainer table tbody tr td {
  text-align: center;
}
.mainTableContainer table tbody tr td .tButton {
  border-radius: 13px;
  border: 1px solid #005FAF;
  background-color: #005FAF;
  color: white;
  cursor: pointer;
  padding: 3px 11px;
  margin: 0px 2px;
}
.mainTableContainer table tbody tr td .tButton:hover {
  background-color: #00559D;
}
.mainTableContainer table tbody tr td .tButton--white {
  background-color: white;
  border-color: #2E85FC;
  color: #2E85FC;
}
.mainTableContainer table tbody tr td .tButton--white:hover {
  background-color: #F5F9FF;
}
.mainTableContainer table tbody tr td .tButton--red {
  background-color: #EA3D2F;
  border-color: #EA3D2F;
}
.mainTableContainer table tbody tr td .tButton--red:hover {
  background-color: #D91606;
  border-color: #D91606;
}
.mainTableContainer table tbody tr td .tButton--green {
  background-color: #07B882;
  border-color: #07B882;
}
.mainTableContainer table tbody tr td .tButton--green:hover {
  background-color: #00A472;
  border-color: #00A472;
}
.mainTableContainer table tbody tr td .tButton--grey {
  background-color: #A1A1A1;
  border-color: #A1A1A1;
}
.mainTableContainer table tbody tr td .tButton--grey:hover {
  background-color: #A1A1A1;
  color: #0F6EF1;
  border-color: #A1A1A1;
}
.mainTableContainer table tbody tr td .tButton--disabled {
  background-color: #A1A1A1;
  border-color: #A1A1A1;
  color: white;
  cursor: not-allowed;
}
.mainTableContainer table tbody tr td .tButton--disabled:hover {
  background-color: #A1A1A1;
  color: white;
  border-color: #A1A1A1;
}
.mainTableContainer .dataTables_length {
  font-size: 14px;
  margin-left: 30px;
  padding-top: 10px;
}
.mainTableContainer .dataTables_length select {
  width: 60px;
  height: 24px;
  text-align-last: center;
  background-color: white;
  border-radius: 2px;
  padding: 0px;
  border: #D4D4D4 1px solid;
}
.mainTableContainer .dataTables_info {
  font-size: 14px;
  padding-top: 10px;
}
.mainTableContainer .dataTables_wrapper {
  /*        .dataTables_paginate {
      font-size: 14px;
      padding-top: 8px;

      .paginate_button {
          background-color: white;
          margin: 0px 3px;
          width: 20px;
          height: 20px;
          line-height: 20px;
          color: #383838 !important;
          border: 0px;
          padding: 0px;

          &:hover {
              background: white;
              color: #383838 !important;
          }

          &.current, &.current:hover {
              background: #1D7FE1;
              color: white !important;
              border: none;
          }

          &.previous, &.next {
              color: #757575 !important;
          }
      }
  }*/
}
.mainTableContainer .dataTables_paginate .paginate_button:not(.disabled, .current):hover {
  background: #d0d0d0;
  color: white !important;
  border: 0px;
}
.mainTableContainer .dataTables_wrapper.no-footer .dataTables_scrollBody {
  border-bottom: none;
}

.personalContainer {
  /*    width: 100%;
  height: calc(100% - 52px);*/
  width: 1088px;
  height: calc(100% - 114px);
  margin: 34px auto 28px auto;
  font-size: 16px;
  color: #383838;
}
.personalContainer__login {
  height: 100%;
  background-image: url(../Image/watermarkLogo--banner.svg);
  background-size: 599px 255px;
  background-repeat: no-repeat;
  background-position: bottom;
  background-position-x: 0;
}
.personalContainer .login {
  display: flex;
  width: 828px;
  max-width: 828px;
  justify-content: space-between;
  margin: auto;
  position: relative;
  height: 100%;
}
.personalContainer .login--left {
  width: 230px;
  margin: auto 0;
}
.personalContainer .login--left .login__title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 9px;
}
.personalContainer .login--left .login__subtitle {
  font-size: 20px;
  line-height: 36px;
}
.personalContainer .login--right {
  width: 460px;
  height: 407px;
  margin: auto 0;
  background-color: white;
  padding: 42px 52px 49px 52px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.15);
}
.personalContainer .login--right .loginItem {
  height: 50px;
  width: 100%;
  border: 1px solid #EEEEEE;
  border-radius: 2px;
  padding: 13px 20px;
}
.personalContainer .login--right .login__captcha {
  display: flex;
  align-items: center;
}
.personalContainer .login--right .login__captcha .loginItem {
  width: 178px;
}
.personalContainer .login--right .login__button {
  color: white;
  width: 100%;
  height: 52px;
  border: none;
  background-color: #0276A4;
  font-size: 20px;
  font-weight: bold;
  cursor: pointer;
}
.personalContainer .login--right .login__button:hover {
  background-color: #006891;
}
.personalContainer__applicationRecord {
  width: 100%;
  height: 100%;
}
.personalContainer__applicationRecord .applicationRecord__header {
  height: 72px;
  margin-bottom: 21px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.personalContainer__applicationRecord .applicationRecord__title {
  font-size: 20px;
  font-weight: bold;
  line-height: 27px;
}
.personalContainer__applicationRecord .applicationRecord__info {
  display: flex;
}
.personalContainer__applicationRecord .applicationRecord__info .infoItem {
  margin-right: 86px;
  display: flex;
  align-items: center;
}
.personalContainer__applicationRecord .applicationRecord__info .infoItem span {
  margin-left: 15px;
  font-weight: bold;
}
.personalContainer__applicationRecord .applicationRecord__table {
  overflow-y: auto;
}
.personalContainer__applicationRecord .applicationRecord__table.recordDetailTableContainer {
  height: calc(100% - 96px - 76px);
}
.personalContainer__applicationRecord .applicationRecord__table #selectedThemeMapTable {
  border-collapse: collapse;
}
.personalContainer__applicationRecord .applicationRecord__table::-webkit-scrollbar {
  width: 6px;
}
.personalContainer__applicationRecord .applicationRecord__table::-webkit-scrollbar-track {
  margin-top: 40px;
}
.personalContainer__applicationRecord .applicationRecord__table::-webkit-scrollbar-thumb {
  background: #D9D9D9;
  border-radius: 6px;
}
.personalContainer__applicationRecord .applicationRecord__table::-webkit-scrollbar-thumb:hover {
  background: #7C7C7C;
}
.personalContainer__applicationRecord .applicationRecord__table.recordTableContainer {
  height: calc(100% - 93px);
}
.personalContainer__applicationRecord .applicationRecord__table table {
  background-color: white;
  width: 100%;
}
.personalContainer__applicationRecord .applicationRecord__table table thead {
  color: white;
  background-color: #83B8CC;
  height: 40px;
  position: sticky;
  top: 0;
  font-weight: normal;
}
.personalContainer__applicationRecord .applicationRecord__table table thead .recordTableHead--caseNo {
  width: 130px;
}
.personalContainer__applicationRecord .applicationRecord__table table thead .recordTableHead--applicationDate, .personalContainer__applicationRecord .applicationRecord__table table thead .recordTableHead--censorDate {
  width: 145px;
}
.personalContainer__applicationRecord .applicationRecord__table table thead .recordTableHead--censorStatus {
  width: 140px;
}
.personalContainer__applicationRecord .applicationRecord__table table thead .recordTableHead--systemName {
  width: 414px;
}
.personalContainer__applicationRecord .applicationRecord__table table thead .recordTableHead--applicantName {
  width: 114px;
}
.personalContainer__applicationRecord .applicationRecord__table table thead .recordDetailTableHead--themeMapName {
  width: 195px;
}
.personalContainer__applicationRecord .applicationRecord__table table thead .recordDetailTableHead--isPass {
  width: 125px;
}
.personalContainer__applicationRecord .applicationRecord__table table thead .recordDetailTableHead--token {
  width: 382px;
  max-width: 382px;
}
.personalContainer__applicationRecord .applicationRecord__table table thead .recordDetailTableHead--note {
  width: 216px;
}
.personalContainer__applicationRecord .applicationRecord__table table thead .recordDetailTableHead--expirationDate {
  width: 170px;
}
.personalContainer__applicationRecord .applicationRecord__table table thead .sortableColumn {
  display: flex;
  justify-content: center;
  align-items: center;
}
.personalContainer__applicationRecord .applicationRecord__table table thead .sortableColumn .table__sortIcon {
  width: 16px;
  height: 16px;
  display: inline-block;
  background-image: url(../Image/sort.svg);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}
.personalContainer__applicationRecord .applicationRecord__table tbody {
  font-size: 18px;
}
.personalContainer__applicationRecord .applicationRecord__table tbody tr.tr--record {
  height: 46px;
}
.personalContainer__applicationRecord .applicationRecord__table tbody tr.tr--recordDetail {
  height: 120px;
  min-height: 120px;
}
.personalContainer__applicationRecord .applicationRecord__table tbody tr td {
  line-height: 25px;
  /*& .tokenColumn {
      display: flex;
      flex-direction: column;
      align-items: center;
  }

  & .copyButton {
      height: 30px;
      width: 100px;
      font-size: 18px;
      border-radius: 3px;
      background-color: $dimBlue;
      border: none;
      color: white;
      margin-top: 10px; //
      cursor: pointer;

      &:hover {
          background-color: $dimBlue-hover;
      }
  }*/
}
.personalContainer__applicationRecord .applicationRecord__table tbody tr td.td--record {
  padding: 11px 23px;
}
.personalContainer__applicationRecord .applicationRecord__table tbody tr td.td--censorStatus {
  cursor: pointer;
}
.personalContainer__applicationRecord .applicationRecord__table tbody tr td.td--recordDetail {
  padding: 25px 33px;
}
.personalContainer__applicationRecord .applicationRecord__table tbody tr td.td--recordDetail .tokenColumn {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.personalContainer__applicationRecord .applicationRecord__table tbody tr td.td--recordDetail .tokenColumn .tokenUrl {
  width: 316px;
  height: 90px;
  resize: none;
  border: none;
  background-color: transparent;
}
.personalContainer__applicationRecord .applicationRecord__table tbody tr td.td--recordDetail .tokenColumn .tokenUrl:focus, .personalContainer__applicationRecord .applicationRecord__table tbody tr td.td--recordDetail .tokenColumn .tokenUrl:focus-visible {
  outline: none !important;
}
.personalContainer__applicationRecord .applicationRecord__table tbody tr td.td--recordDetail .tokenColumn .tokenUrl::selection {
  outline: none !important;
}
.personalContainer__applicationRecord .applicationRecord__table tbody tr td.td--recordDetail .tokenColumn .copyButton {
  height: 30px;
  width: 100px;
  font-size: 18px;
  border-radius: 3px;
  background-color: #0276A4;
  border: none;
  color: white;
  margin-top: 10px;
  cursor: pointer;
}
.personalContainer__applicationRecord .applicationRecord__table tbody tr td.td--recordDetail .tokenColumn .copyButton:hover {
  background-color: #006891;
}
.personalContainer__applicationRecord .applicationRecord__table tbody tr td.td--recordDetail .keyDate {
  text-align: center;
}
.personalContainer__applicationRecord .applicationRecord__table tbody tr td.censorStatus--complete {
  text-decoration: underline;
}
.personalContainer__applicationRecord .applicationRecord__table tbody tr td.censorStatus--censoring {
  text-decoration: underline;
  color: #0F6EF1;
}
.personalContainer__applicationRecord .applicationRecord__footer {
  position: fixed;
  bottom: 80px;
  border-top: 1px solid #EEEEEE;
  width: 1088px;
  position: fixed;
  height: 79px;
  bottom: 80px;
  font-size: 20px;
  padding-top: 28px;
}
.personalContainer__applicationRecord .applicationRecord__footer .applicationRecord__button--forward {
  color: #0276A4;
  font-weight: bold;
  float: left;
  line-height: 26px;
  height: 52px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}
.personalContainer__applicationRecord .applicationRecord__footer .applicationRecord__button--forward span {
  width: 26px;
  height: 26px;
  display: inline-block;
  margin-right: 5px;
  background-image: url(../Image/previousStep.svg);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}
.personalContainer__applicationRecord .applicationRecord__footer .applicationRecord__button--applyExtend {
  width: 238px;
  height: 50px;
  background-color: #0276A4;
  border: none;
  color: white;
  float: right;
  font-weight: bold;
  cursor: pointer;
}
.personalContainer__applicationRecord .applicationRecord__footer .applicationRecord__button--applyExtend.disabledButton {
  cursor: not-allowed;
  background-color: #AAAAAA;
}

.footerContainer {
  position: fixed;
}