/* this file will be extracted to main dist folder and is imported in index.html */
/* This file is for setting global styles  */
nav {
  margin-top: 16px; }

nav a {
  background-color: #00838F;
  color: white;
  padding: 8px 16px;
  margin: 8px;
  vertical-align: middle;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  border-radius: 4px; }
h1 {
  color: #00BCD4;
}.red {
  color: #DB0011 !important; }

.page.menu-long .header .menu {
  width: 80px; }

.page.menu-long .header .header-title {
  padding-left: 30px; }

.page {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  height: 100%; }
  .page [hidden] {
    display: none !important; }
  .page .break-word, .page .main .name, .page .main .value {
    word-wrap: break-word;
    word-break: break-word; }
  .page .header {
    display: -webkit-box;
    box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.1);
    height: 44px;
    background: #ffffff;
    position: relative;
    z-index: 100; }
    .page .header .back {
      position: relative; }
      .page .header .back img {
        width: 18px;
        height: 18px;
        top: 13px;
        left: 15px;
        position: absolute; }
    .page .header .menu img {
      width: 18px;
      height: 18px; }
    .page .header .back, .page .header .menu {
      width: 50px;
      font-size: 13px;
      display: -webkit-box;
      -webkit-box-align: center;
      -webkit-box-pack: center; }
    .page .header .header-title {
      -moz-box-flex: 1;
      -webkit-box-flex: 1;
      font-size: 19px;
      display: block;
      -webkit-box-align: center;
      -webkit-box-pack: center;
      font-weight: 300;
      text-overflow: ellipsis;
      text-transform: none;
      white-space: nowrap;
      overflow: hidden;
      text-align: center;
      line-height: 44px; }
    .page .header .search-input-box {
      padding-left: 10px; }
    .page .header .search-cancel-btn {
      width: initial;
      padding: 0 10px; }
  .page .header.top {
    z-index: 999; }
  .page .main {
    flex: 1;
    -moz-box-flex: 1;
    -webkit-box-flex: 1;
    -webkit-overflow-scrolling: touch;
    background: #f7f7f7;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative; }
    .page .main .success {
      text-align: center;
      padding-top: 25px; }
      .page .main .success img {
        width: 74px;
        height: 74px; }
      .page .main .success .tip {
        padding: 15px 0;
        color: #068883;
        font-size: 16px; }
      .page .main .success .text {
        padding: 0 15px 20px 15px; }
    .page .main .name {
      text-align: left;
      margin-right: 10px;
      width: 50%;
      padding-top: 0px;
      padding-bottom: 0px;
      width: inherit; }
    .page .main .value {
      padding-top: 0px;
      padding-bottom: 0px;
      width: inherit;
      -webkit-box-flex: 1;
      display: -webkit-box;
      -webkit-box-pack: end;
      text-align: right; }
    .page .main .checkbox-radius img {
      width: 21px; }
    .page .main .checkbox-radius .nocheck {
      width: 21px;
      height: 21px;
      border: 1px solid #d2cbcb;
      border-radius: 50%;
      box-sizing: border-box; }
  .page .footer {
    background: #FFFFFF;
    position: relative;
    padding: 15px;
    bottom: 0px;
    box-shadow: 0 -1px 10px 0 rgba(0, 0, 0, 0.1); }
  .page .btn {
    font-size: 16px; }
  .page .submit {
    padding: 25px 15px; }
    .page .submit .btn {
      background: #DB958E;
      border: 1px solid #DB958E; }
    .page .submit .btn-disabled .btn {
      background: #DB958E;
      border: 1px solid #DB958E; }
    .page .submit .btn-enabled .btn {
      background: #db0011;
      border: 1px solid #db0011; }
  .page .inner {
    background: #DB958E;
    border: 1px solid #DB958E; }
  .page .arrow {
    -webkit-box-pack: center; }
    .page .arrow img {
      width: 9px;
      height: 16px; }
  .page .btn-enabled .inner {
    background: #DB0011;
    border: 1px solid #DB0011; }
  .page .panel {
    margin-top: 10px;
    background: #fff;
    width: 100%;
    overflow-x: hidden;
    overflow-y: auto; }
  .page select.block, .page input.block {
    display: block;
    width: 100%;
    border: none;
    font-size: 14px;
    background-color: #fff;
    box-sizing: border-box;
    padding: 0;
    line-height: normal;
    border-radius: 0;
    margin: 0; }
  .page input.block {
    height: 25px; }
  .page input::-webkit-input-placeholder {
    font-size: 15px;
    color: #929292; }

.overlay-page {
  position: fixed;
  height: 100%;
  width: 100%;
  top: 0;
  opacity: 1;
  background: #fff;
  z-index: 997; }

.notes-dot {
  display: -webkit-box;
  -webkit-box-orient: horizontal; }
  .notes-dot .dot-icon {
    width: 5px;
    padding-right: 5px; }
    .notes-dot .dot-icon img {
      width: 4px;
      height: 4px;
      vertical-align: 3px; }
  .notes-dot .notes {
    -webkit-box-flex: 1;
    color: #5C5C5C;
    font-size: 13px; }

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

.box {
  display: -webkit-box; }

.h-box {
  display: -webkit-box;
  -webkit-box-orient: horizontal; }
  .h-box .name {
    width: 128px; }

.v-box {
  display: -webkit-box;
  -webkit-box-orient: vertical; }

.b-f, .h-l {
  flex: 1;
  -moz-box-flex: 1;
  -webkit-box-flex: 1; }

.flex-info-center {
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center; }

.btn {
  outline-width: 0 !important;
  cursor: pointer;
  -moz-transition: background-color 0.2s cubic-bezier(0, 0, 0, 0.74), border-color 0.2s cubic-bezier(0, 0, 0, 0.74), opacity 0.2s cubic-bezier(0, 0, 0, 0.74);
  -o-transition: background-color 0.2s cubic-bezier(0, 0, 0, 0.74), border-color 0.2s cubic-bezier(0, 0, 0, 0.74), opacity 0.2s cubic-bezier(0, 0, 0, 0.74);
  -webkit-transition: background-color 0.2s cubic-bezier(0, 0, 0, 0.74), border-color 0.2s cubic-bezier(0, 0, 0, 0.74), opacity 0.2s cubic-bezier(0, 0, 0, 0.74);
  transition: background-color 0.2s cubic-bezier(0, 0, 0, 0.74), border-color 0.2s cubic-bezier(0, 0, 0, 0.74), opacity 0.2s cubic-bezier(0, 0, 0, 0.74);
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: 13px 15px 11px 15px;
  border-width: 1px;
  border-style: solid;
  border-color: #db0011;
  outline: none;
  background-color: #db0011;
  color: #fff;
  font-family: "UniversNextForHSBC","Helvetica Neue","Helvetica",sans-serif;
  font-size: 1.23077rem;
  font-style: normal;
  font-variant: normal;
  font-weight: 400;
  line-height: 1.1;
  text-align: center;
  text-decoration: none;
  text-indent: 0;
  text-overflow: ellipsis;
  text-transform: none;
  white-space: nowrap;
  overflow: hidden;
  -moz-appearance: none;
  -webkit-appearance: none;
  -moz-user-select: -moz-none;
  -ms-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  border-radius: 0;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

.btn.disabled {
  background: #DB958E;
  border: 1px solid #DB958E; }

.description {
  color: #5C5C5C;
  font-size: 13px; }

.col-2 {
  columns: auto 2;
  -webkit-columns: auto 2;
  column-gap: 15px;
  -webkit-column-gap: 15px; }
  .col-2 .btn + .btn {
    margin: 0px; }

.btn__secondary {
  border-color: #333;
  background-color: transparent;
  color: #333; }

.pd015 {
  padding: 0 15px !important; }

.pd1015 {
  padding: 10px 15px !important; }

.pd10 {
  padding: 10px !important; }

.pd15 {
  padding: 15px !important; }

.pt0 {
  padding-top: 0 !important; }

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

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

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

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

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

.mt15 {
  margin-top: 15 !important; }

.row {
  background: #fff; }
  .row .r-l + .r-l {
    margin-top: 10px; }

.error-msg, .error-msg-inline, .warn-msg {
  padding: 10px 15px;
  font-size: 13px;
  color: #83000A;
  background-color: rgba(131, 0, 10, 0.1); }
  .error-msg .e-l, .error-msg-inline .e-l, .warn-msg .e-l {
    width: 20px;
    height: 20px;
    margin-right: 15px; }
    .error-msg .e-l img, .error-msg-inline .e-l img, .warn-msg .e-l img {
      width: 20px;
      height: 20px; }
  .error-msg .e-r, .error-msg-inline .e-r, .warn-msg .e-r {
    -webkit-box-flex: 1;
    padding-top: 2px; }

.error-msg-inline {
  border-bottom: 1px solid #83000A; }

.warn-msg {
  color: #333;
  background-color: #ededed; }

.remind {
  text-align: center;
  padding-top: 100px; }
  .remind img {
    width: 74px;
    height: 74px; }
  .remind .tip {
    padding-left: 15px;
    padding-right: 15px;
    margin-top: 25px;
    font-size: 13px;
    color: #5c5c5c; }

.comm-font .light, .comm-font .font_light_12, .comm-font .font_light_13, .comm-font .font_light_14 {
  font-weight: 300; }

.comm-font .regular, .comm-font .font_10, .comm-font .font_bold_10, .comm-font .font_12, .comm-font .font_gray_12, .comm-font .font_light_12, .comm-font .font_bold_12, .comm-font .font_13, .comm-font .font_gray_13, .comm-font .font_light_13, .comm-font .font_bold_13, .comm-font .font_14, .comm-font .font_gray_14, .comm-font .font_light_14, .comm-font .font_bold_14, .comm-font .font_16, .comm-font .font_bold_16 {
  font-weight: 400; }

.comm-font .medium, .comm-font .font_bold_10, .comm-font .font_bold_12, .comm-font .font_bold_13, .comm-font .font_bold_14, .comm-font .font_bold_16 {
  font-weight: 500; }

.comm-font .white_color {
  color: #FFFFFF; }

.comm-font .baseFont, .comm-font .font_10, .comm-font .font_bold_10, .comm-font .font_12, .comm-font .font_gray_12, .comm-font .font_light_12, .comm-font .font_bold_12, .comm-font .font_13, .comm-font .font_gray_13, .comm-font .font_light_13, .comm-font .font_bold_13, .comm-font .font_14, .comm-font .font_gray_14, .comm-font .font_light_14, .comm-font .font_bold_14, .comm-font .font_16, .comm-font .font_bold_16, .comm-font .font_bold_19 {
  color: #333333;
  letter-spacing: 0px; }

.comm-font .font_10, .comm-font .font_bold_10 {
  font-size: 10px;
  line-height: 20px; }

.comm-font .font_12, .comm-font .font_gray_12, .comm-font .font_light_12, .comm-font .font_bold_12 {
  font-size: 12px;
  line-height: 20px; }

.comm-font .font_gray_12 {
  color: #5C5C5C; }

.comm-font .font_light_12 {
  color: #5C5C5C; }

.comm-font .font_13, .comm-font .font_gray_13, .comm-font .font_light_13, .comm-font .font_bold_13 {
  font-size: 13px;
  line-height: 20px; }

.comm-font .font_gray_13 {
  color: #5C5C5C; }

.comm-font .font_light_13 {
  color: #5C5C5C; }

.comm-font .font_14, .comm-font .font_gray_14, .comm-font .font_light_14, .comm-font .font_bold_14 {
  font-size: 14px;
  line-height: 20px; }

.comm-font .font_gray_14 {
  color: #5C5C5C; }

.comm-font .font_light_14 {
  color: #5C5C5C; }

.comm-font .font_16, .comm-font .font_bold_16 {
  font-size: 16px;
  line-height: 22px; }

.comm-font .font_bold_19 {
  font-size: 19px;
  font-weight: 500;
  line-height: 22px; }

.comm-font .placeholder {
  font-size: 15px;
  color: #929292; }

.comm-font .placeholder_color {
  color: #929292 !important; }

.comm-font .placeholder_color option {
  color: #000; }

.comm-font .option_disabled {
  color: #929292 !important; }

.comm-font input {
  color: #333333; }

.comm-font input.block {
  height: 25px; }

.comm-font input::-webkit-input-placeholder {
  font-size: 14px;
  color: #929292; }

.overlay-panel {
  position: fixed;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 200;
  -webkit-box-align: center;
  display: -webkit-box;
  -webkit-box-pack: center; }
  .overlay-panel .overlay-content-panel {
    width: 72%;
    background: #fff; }
    .overlay-panel .overlay-content-panel .overlay-content-title {
      text-align: center; }
      .overlay-panel .overlay-content-panel .overlay-content-title h3 {
        padding: 25px 15px 0 15px; }
      .overlay-panel .overlay-content-panel .overlay-content-title p {
        padding: 15px;
        color: #5C5C5C;
        word-break: break-word; }
    .overlay-panel .overlay-content-panel .fotCol {
      border-top: 1px solid #EDEDED; }
    .overlay-panel .overlay-content-panel .btn {
      background: #fff;
      border: none;
      color: #DB0011; }
    .overlay-panel .overlay-content-panel .no {
      color: #333;
      border-right: 1px solid #EDEDED; }

.mui-ios .mui-dtpicker .mui-dtpicker-body {
  -webkit-perspective: none;
  perspective: none; }

.mui-popup, .mui-popup-inner {
  border-radius: 0;
  color: #333333 !important; }
  .mui-popup .mui-popup-title, .mui-popup-inner .mui-popup-title {
    font-size: 19px !important; }

.mui-popup-buttons .mui-popup-button:first-child {
  border-radius: 0;
  color: #333333;
  font-weight: 500;
  font-size: 16px; }

.mui-popup-buttons .mui-popup-button:first-child:last-child {
  border-radius: 0;
  color: #333333;
  font-weight: 500; }

.mui-popup-buttons .mui-popup-button:last-child {
  border-radius: 0;
  color: #DB0011;
  font-weight: 500;
  font-size: 16px; }

@-webkit-keyframes rond {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg); } }

@keyframes rond {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg); } }

.mui-pull-caption {
  font-size: 13px;
  line-height: 20px;
  font-weight: 400;
  letter-spacing: 0px;
  color: #333333; }

.datepicker-wrapper {
  display: block;
  z-index: 0;
  width: 50%; }

.datepicker-calendar {
  min-width: 90%;
  max-width: 90%;
  color: #404040; }
  .datepicker-calendar td {
    font-size: 13px;
    padding: 0; }
  .datepicker-calendar td.disabled.today .datepicker-day {
    background: #fff;
    color: #CCCCCC; }
  .datepicker-calendar td.selected .datepicker-day {
    background: #DB0011;
    border-radius: 50%;
    color: #fff; }
  .datepicker-calendar th, .datepicker-calendar td {
    width: 14.2857%; }

.datepicker-table::after {
  border: none; }

.datepicker-calendar__inner {
  border-bottom: 1px solid #ededed;
  background-color: #ffffff; }

.datepicker-months {
  padding: 15px;
  border-top: 1px solid #d7d8d6;
  border-bottom: 1px solid #d7d8d6; }
  .datepicker-months:before {
    background: #fff; }
  .datepicker-months .datepicker-current-month {
    font-size: 16px;
    color: #333333; }
    .datepicker-months .datepicker-current-month span {
      display: inline-block;
      color: #333333;
      font-size: 16px; }
  .datepicker-months .datepicker-prev-month, .datepicker-months .datepicker-next-month {
    color: #DB0011; }

.datepicker-calendar .disabled, .datepicker-calendar .disabled .datepicker-day {
  color: #CCCCCC; }

.datepicker-calendar td.today .datepicker-day {
  opacity: 1; }

.warning {
  display: table;
  width: 100%;
  background-color: #ededed;
  font-size: 13px;
  color: #5C5C5C;
  line-height: 20px; }
  .warning .warn_icon {
    display: table-cell;
    width: 10%;
    text-align: center;
    vertical-align: top;
    padding: 10px 0; }
    .warning .warn_icon img {
      width: 20px;
      height: 20px;
      vertical-align: bottom; }
  .warning .warn_text {
    display: table-cell;
    width: 90%;
    padding: 10px 15px 10px 0;
    vertical-align: top; }

.popUpTitle {
  font-size: 19px;
  color: #83000A;
  letter-spacing: 0; }

.icon-edit.red {
  background-color: #DB0011; }

.icon-edit {
  width: 19px;
  -webkit-mask-image: url(42397b3627211c34b4a5d58f78ae6f59.png);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 19px;
  background-color: #333333; }

.mui-radio input[type=radio] {
  position: inherit;
  font-size: 16px;
  width: 16px;
  height: 16px; }

.mui-radio input[type=radio]:before {
  font-size: 16px; }

.mui-radio input[type=radio]:checked:before {
  font-size: 16px;
  color: #DB0011; }

.mui-poppicker .mui-picker, .mui-poppicker .mui-poppicker-header {
  background-color: #ffffff; }

.mui-poppicker .mui-btn {
  border: none;
  background-color: #ffffff;
  font-weight: 500;
  font-size: 14px; }

.mui-poppicker .mui-poppicker-body {
  border: none; }

.mui-poppicker .mui-poppicker-btn-ok {
  color: #DB0011; }

.mui-poppicker .mui-pciker-list li {
  font-size: 14px; }

.mui-poppicker .mui-pciker-list li.highlight {
  font-weight: 500; }

.mui-popup-title + .mui-popup-text {
  margin: 10px 0 0;
  font-size: 13px; }

.dialogAlertBtn {
  padding: 10px;
  text-align: center;
  color: #DB0011;
  font-size: 16px; }

.hsbc-font {
  font-family: "UniversNextForHSBC"; }

.pyee-acct {
  padding: 10px 15px; }

.pyee-acct:not(:last-child) {
  padding: 10px 15px 0; }

.new_picker {
  position: fixed;
  z-index: 998;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.3); }
  .new_picker .new_picker_content {
    background-color: #fff;
    height: auto;
    max-height: 88%;
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    border-radius: 8px 8px 0 0;
    display: flex;
    flex-direction: column; }
  .new_picker .title {
    font-family: "HSBC Univers Next Regular","PingFang SC","Microsoft YaHei","Lantinghei SC","Heiti SC","simhei","sans-serif";
    font-size: 19px;
    color: #333333;
    letter-spacing: 0.33px;
    line-height: 27px;
    margin: 17px 16px; }
  .new_picker .close {
    float: right;
    width: 16px;
    height: 16px;
    margin-top: 5px; }
  .new_picker .radio_list {
    flex: 1;
    overflow-y: auto; }
    .new_picker .radio_list .container {
      display: flex;
      position: relative;
      margin: 0 16px;
      line-height: 51px;
      border-bottom: 1px solid #ededed;
      cursor: pointer;
      font-size: 16px;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none; }
      .new_picker .radio_list .container .checkmark {
        position: absolute;
        top: 35%;
        right: 0;
        height: 20px;
        width: 20px;
        background-color: #fff;
        border: 1px solid #767676; }
      .new_picker .radio_list .container label {
        display: inline-block;
        width: calc(100% - 20px); }
      .new_picker .radio_list .container input:focus + .checkmark {
        outline-style: dotted;
        outline-width: 1px; }
    .new_picker .radio_list .container input {
      position: absolute;
      opacity: 0.01;
      cursor: pointer;
      top: 35%;
      right: 0;
      z-index: 99;
      width: 20px;
      height: 20px; }
    .new_picker .radio_list .container input:checked ~ .checkmark {
      background-color: #fff; }
    .new_picker .radio_list .checkmark:after {
      content: "";
      position: absolute;
      display: none; }
    .new_picker .radio_list .container input:checked ~ .checkmark:after {
      display: block; }
    .new_picker .radio_list .container .checkmark:after {
      top: 2px;
      left: 2px;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: #068883; }