:root {
    --scale: 100; /* You can change this value */
    --px-4: calc(4px * var(--scale) / 100); /* 4px scaled */
    --px-8: calc(8px * var(--scale) / 100); /* 8px scaled */
    --px-12: calc(12px * var(--scale) / 100); /* 12px scaled */
    --px-16: calc(16px * var(--scale) / 100); /* 16px scaled */
    --px-20: calc(20px * var(--scale) / 100); /* 20px scaled */
    --px-24: calc(24px * var(--scale) / 100); /* 24px scaled */
    --px-28: calc(28px * var(--scale) / 100); /* 28px scaled */
    --px-32: calc(32px * var(--scale) / 100); /* 32px scaled */
    --px-36: calc(36px * var(--scale) / 100); /* 36px scaled */
    --px-40: calc(40px * var(--scale) / 100); /* 40px scaled */
    --px-44: calc(44px * var(--scale) / 100); /* 44px scaled */
    --px-48: calc(48px * var(--scale) / 100); /* 48px scaled */
    --px-52: calc(52px * var(--scale) / 100); /* 52px scaled */
    --px-56: calc(56px * var(--scale) / 100); /* 56px scaled */
    --px-60: calc(60px * var(--scale) / 100); /* 60px scaled */
    --px-64: calc(64px * var(--scale) / 100); /* 64px scaled */
    --px-68: calc(68px * var(--scale) / 100); /* 68px scaled */
    --px-72: calc(72px * var(--scale) / 100); /* 72px scaled */
    --px-76: calc(76px * var(--scale) / 100); /* 76px scaled */
    --px-80: calc(80px * var(--scale) / 100); /* 80px scaled */
    --px-84: calc(84px * var(--scale) / 100); /* 84px scaled */
    --px-88: calc(88px * var(--scale) / 100); /* 88px scaled */
    --px-92: calc(92px * var(--scale) / 100); /* 92px scaled */
    --px-96: calc(96px * var(--scale) / 100); /* 96px scaled */
    --px-100: calc(100px * var(--scale) / 100); /* 100px scaled */
    --px-200: calc(100px * var(--scale) / 100);
    --px-220: calc(220px * var(--scale) / 100);
    --px-240: calc(240px * var(--scale) / 100);
    --px-280: calc(280px * var(--scale) / 100);
    --px-300: calc(300px * var(--scale) / 100);
    --px-520: calc(520px * var(--scale) / 100);
    --px-584: calc(584px * var(--scale) / 100);
    --px-600: calc(600px * var(--scale) / 100);
    /* Color */
    --color-50: #eef8ff;
    --color-100: #daeeff;
    --color-200: #bce3ff;
    --color-300: #8fd3ff;
    --color-400: #5ab8ff;
    --color-500: #3398fe;
    --color-600: #1877f3;
    --color-700: #1562e0;
    --color-800: #1850b5;
    --color-900: #1a468e;
    --color-950: #142c57;

    --color-white: #ffffff;
    --color-title: #231F20;
    --color-swift-950: #142C57;
    --color-gray-10: #181818;

    /* Border color */
    --border: #ccc;
}


.mbsc-fr-scroll {
  width: 100%;
  height: 100%;
  -ms-touch-action: pan-y;
  touch-action: pan-y;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

#close-popup-icon {
  /*float: right;*/
  /*font-size: 1.5rem;*/
  /*font-weight: 700;*/
  /*line-height: 1;*/
  /*color: #000;*/
  /*text-shadow: 0 1px 0 #fff;*/
  /*position: absolute;*/
  cursor: pointer;
  width: 50px;
  height: 50px;
}

.mbsc-fr-pointer.mbsc-fr .mbsc-fr-popup {
  border: 0;
}

.mbsc-fr-pointer .mbsc-fr-persp .mbsc-fr-popup .mbsc-fr-w,
.mbsc-fr-pointer .mbsc-fr-persp .mbsc-cal-picker {
  background: #f7f7f7;
}

.mbsc-fr-no-overlay .mbsc-fr-w {
  box-shadow: 0 0.125em 1em rgba(0, 0, 0, 0.2);
}

.mbsc-fr-w {
  padding-top: 0;
  padding-bottom: 3.75em;
}

.mbsc-fr-bubble .mbsc-fr-w,
.mbsc-fr-w {
  border-radius: 8px;
}

.mbsc-fr-nobtn .mbsc-fr-w,
.mbsc-fr-w {
  min-width: 22.5em;
}

.mbsc-fr-pointer .mbsc-ltr .mbsc-fr-w,
.mbsc-fr-pointer .mbsc-ltr .mbsc-sc-whl .mbsc-sel-gr {
  text-align: left;
}

.demo-phone .demo-phone-screen-w * {
  cursor: url(img/touch-cursor.png) 8 8, auto !important;
}

.mbsc-fr-w {
  color: #000;
}

.mbsc-fr-w {
  position: relative;
  font-size: 12px;
  font-family: -apple-system, Helvetica Neue, Helvetica, Arial, sans-serif;
}

.mbsc-fr .mbsc-fr-w {
  box-sizing: content-box;
  padding-bottom: var(--px-60);
}

.mbsc-fr-w {
  max-width: 100%;
  overflow: hidden;
}

.mbsc-fr-w,
.mbsc-fr-overlay {
  -webkit-transform: translateZ(0);
}

.mbsc-wdg-c.mbsc-w-p {
  padding: 1em;
}

.mbsc-ltr .mbsc-wdg-c {
  text-align: left;
}

.mbsc-wdg-c {
  position: relative;
  z-index: 0;
  font-size: 14px;
  white-space: normal;
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

.mbsc-align-center {
  text-align: center;
}

.mbsc-padding {
  padding: 1em;
}

.mbsc-padding > p:last-child {
  margin-bottom: 0;
}

.mbsc-fr-btn-cont {
  display: table;
  top: auto;
  bottom: 0;
  border: 0;
  table-layout: fixed;
}

.mbsc-ltr .mbsc-fr-btn-cont {
  text-align: right;
}

.mbsc-fr-btn-cont {
  position: absolute;
  left: 0;
  right: 0;
}

.mbsc-fr-btn-cont {
  width: 100%;
  white-space: normal;
}

.mbsc-fr-btn-w {
  display: table-cell;
  float: none;
}

.mbsc-fr-btn {
  color: #007bff;
}

.mbsc-fr-btn {
  height: 2.75em;
  line-height: 2.75em;
  padding: 0 0.625em;
  text-align: center;
  font-size: 1.333334em;
}

.mbsc-fr-btn-s .mbsc-fr-btn {
  font-weight: bold;
}

.mbsc-ltr .mbsc-fr-btn-w:first-child .mbsc-fr-btn,
.mbsc-rtl .mbsc-fr-btn-w:last-child .mbsc-fr-btn {
  border-radius: 0 0 0 0.5em;
}

.mbsc-fr-btn {
  overflow: hidden;
  display: block;
  text-decoration: none;
  white-space: nowrap;
  text-overflow: ellipsis;
  vertical-align: top;
}

.mbsc-fr-btn-cont {
  position: absolute;
  left: 0;
  right: 0;
}

.mbsc-fr-scroll {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  z-index: 11;
  background: #33333378;
  top: 0;
  left: 0;
}

.mbsc-fr-popup.mbsc-ltr {
  background: #f7f7f7;
  border-radius: 5px;
}

.mbsc-fr-btn:hover {
  background: #eaeaea;
}

.mbsc-input.mbsc-ios {
  top: 0;
  left: 0;
  right: 0;
  width: auto;
  transform: none;
  border-radius: 4px;
  position: relative;
  font: normal normal 600 var(--s-17);
}

span.mbsc-label {
  top: 0.75em;
  right: auto;
  font: normal normal 500 var(--s-14);
  position: absolute;
  padding: 0;
  width: auto;
  max-width: none;
  color: black;
  font-weight: lighter;
}

.mbsc-ios .mbsc-input-wrap {
  position: static;
  display: block;
  height: auto;
  box-sizing: border-box;
}

.mbsc-input input.mbsc-control.mbsc-comp {
  border-radius: var(--px-8);
  color: #000;
  padding: var(--px-12);
  display: block;
  width: 100%;
  position: absolute;
  top: 50%;
  font: normal normal 500 var(--s-15);
  min-height: var(--px-44);
  transition: box-shadow 0.3s ease;
}

.mbsc-input input.mbsc-control.mbsc-comp:focus {
  outline: none;
  box-shadow: 0px 0px 0px 4px #EBF8FF;
}

span.mbsc-input-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -1;
  border-radius: 8px;
  font-size: 1em;
  line-height: normal;
}

label.mbsc-control-w.mbsc-input-box.mbsc-label-stacked.mbsc-input.mbsc-ios.mbsc-ltr {
    width: auto;
    min-height: var(--px-80);
    height: var(--px-80);
    display: flex;
    margin: 0 var(--px-16) var(--px-16);
}

.mbsc-fr-scroll-NumPad {
  background-color: #efeff4;
  padding: 25px 0px 0px;
  
}

.mbsc-fr-scroll-NumPad .mbsc-fr-popup {
  border-top: 0px solid #8e8e8e;
}

.mbsc-fr-scroll-NumPad .mbsc-fr-c {
  font-size: 1.333334em;
}

.mbsc-np-hdr {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
}

.mbsc-np-hdr img {
  color: var(--grey-thin);
  position: absolute;
  right: 15px;
  top: 10px;
}

.mbsc-np-dsp {
  direction: ltr;
  padding-left: var(--px-20);
  padding-right: var(--px-20);
  text-align: left;
  font: normal normal 800 var(--s-24);
  height: 40px;
  color: white;
}

.mbsc-fr-bottom .mbsc-np-tbl-c {
  display: block;
}

.mbsc-np-tbl-c {
  min-width: 15em;
}

.mbsc-np-tbl {
  direction: ltr;
  display: grid;
  width: 100%;
  justify-content: center;
  grid-template-rows: repeat(4, 1fr);
  gap: 12px;
}

.mbsc-np-row {
  display: flex;
  gap: 12px;
}

.mbsc-np-btn {
  min-height: var(--px-60);
  position: relative;
  z-index: 0;
  width: 33.3333333333%;
  display: flex;
  background: var(--bg-blur-50);
  font: normal normal 500 var(--s-28);
  justify-content: center;
  align-items: center;
  color: white;
}

.mbsc-np-btn:first-child {
  border-left: 0;
}

.mbsc-np-btn-empty {
  width: 75px;
  background: unset;
}

.mbsc-fr-scroll-NumPad .mbsc-fr-btn {
  font: normal normal 800 var(--s-16);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  background: var(--bs-blue);
}

.mbsc-fr-scroll-NumPad .mbsc-fr-btn {
  background: unset;
}

#setButton[onclick="newMain.RegisterClient()"] {
  background: var(--bs-blue);
}

div#demo-ctx-451 {
  display: flex;
  border-radius: 8px;
  width: fit-content;
  padding: 12px;
  flex-direction: column;
  background: var(--bg-blur);
  backdrop-filter: var(--blur);
}

.mbsc-fr-scroll-NumPad {
    position: absolute;
    top: 36px;
    left: 0;
    z-index: 11;
    background: #3333333b;
    backdrop-filter: blur(2px);
    width: 100dvw;
    height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 3rem;
}

input {
  outline: unset;
}
.mbsc-np-btn.mbsc-fr-btn-e {
  padding: 0;
  display: flex;
  cursor: pointer;
  color: #000;
  align-items: center;
  justify-content: center;
  background: #fff;
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  font: normal normal 600 var(--s-32);
  border: 1px solid #979797;
  border-radius: 61px;
  width: 75px;
  height: 75px;
}

.mbsc-np-btn.mbsc-fr-btn-e:active {
  background: #d1d5db;
}

.disable-btn {
  opacity: 0.6;
  pointer-events: none;
  background: #d6d6d6;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bs-blue);
  color: white;
}

div#mobiscroll1695713147856 {
  max-height: 80vh;
  overflow: auto;
}

#cus-birth-day-detail {
  position: absolute;
  top: 80px;
  width: 100%;
  background: #fff;
  z-index: 5;
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}

.mbsc-np-dsp {
    color: #1A468E;
}

.mbsc-ltr-custom {
    width: 30%;
    background-color: var(--color-white);
    border-radius: var(--px-16);
    /*padding: var(--px-16);*/
}

.header-custom-modal {
    padding: var(--px-16) var(--px-16) var(--px-12) var(--px-12);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #E5E5E5;
}

    .header-custom-modal span {
        font-weight: 500;
        font-size: var(--px-14);
        color: var(--color-gray-10);
        font-family: Montserrat;
    }