@font-face {
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: normal;
    font-style: normal;
    src: url('../../../fonts/montserrat-v15-latin-regular.eot'); /* IE9 Compat Modes */
    src: local('Montserrat'),
         url('../../../fonts/montserrat-v15-latin-regular.eot') format('embedded-opentype'), /* IE6-IE8 */
         url('../../../fonts/montserrat-v15-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
         url('../../../fonts/montserrat-v15-latin-regular.woff') format('woff'), /* Modern Browsers */
         url('../../../fonts/montserrat-v15-latin-regular.ttf') format('ttf'),
         url('../../../fonts/montserrat-v15-latin-regular.svg') format('svg'),
         url('../../../fonts/fontawesome/webfonts/fa-solid-900.woff2') format('woff2'),
         url('../../../fonts/fontawesome/webfonts/fa-solid-900.ttf') format('ttf'),
}
html, body {
    height: 100%;
    background: rgb(237,237,237);
    background: linear-gradient(121deg, rgba(237,237,237,1) 0%, rgba(227,227,227,1) 99%);
    
    -webkit-touch-callout: none !important;
    -webkit-user-select: none !important;
    -khtml-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
    font-family: 'Montserrat', Arial, sans-serif;
}
.acledapay-box {
    width: 900px;
    background-color: #ffffff;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    z-index: 9;
}
.action-box {
    width: 450px;
    /*width: 410px;*/
}
.custom-w-50 {
    width: 45rem !important;
}
.custom-h-35 {
    height: 34rem !important;
    /*height: 27.7rem !important;*/
}
.summary-box {
    width: 450px !important;
    color: rgb(216, 216, 216) !important;
    background: rgb(38,73,116);
    background: linear-gradient(90deg, rgba(38,73,116,1) 0%, rgba(32,63,99,1) 35%, rgba(26,51,81,1) 100%);
}
.summary-box, .success-box, .custom-color {
    color: #cbcbca;
}
.setra-summary-box {
    height: auto !important;
}
.setra-action-box {
    height: 100% !important;
}
.custom-rounded-3 {
    border-radius: 1.3rem!important;
}
.custom-rounded-end {
    border-top-right-radius: 1.3rem!important;
    border-bottom-right-radius: 1.3rem!important;
}
img {
    image-rendering: -webkit-optimize-contrast;
}

.timer-spinner {
    width: 100%;
}
.spinner {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: radial-gradient(farthest-side,#3471bb 94%,#0000) top/3.8px 3.8px no-repeat,
            conic-gradient(#0000 30%,#3471bb);
    -webkit-mask: radial-gradient(farthest-side,#0000 calc(100% - 3.8px),#000 0);
    animation: spinner-c7wet2 1s infinite linear;
}
.spinner-expiryTime-50 {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: radial-gradient(farthest-side,#ffa500 94%,#0000) top/3.8px 3.8px no-repeat,
            conic-gradient(#0000 30%,#ffa500);
    -webkit-mask: radial-gradient(farthest-side,#0000 calc(100% - 3.8px),#000 0);
    animation: spinner-c7wet2 1s infinite linear;
}
.spinner-expiryTime-100 {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: radial-gradient(farthest-side,#e62100 94%,#0000) top/3.8px 3.8px no-repeat,
            conic-gradient(#0000 30%,#e62100);
    -webkit-mask: radial-gradient(farthest-side,#0000 calc(100% - 3.8px),#000 0);
    animation: spinner-c7wet2 1s infinite linear;
}
@keyframes spinner-c7wet2 {
    100% {
        transform: rotate(1turn);
    }
}
.x-22 {
    color: #a3a3a36b;
    font-size: 1.38rem;
}
.x-22:hover {
    color: #6c757d!important;
    transition: 0.3s;
    cursor: pointer;
}

.input-to-pay-button2, .input-to-pay2{
    opacity: 0;
    animation-name: bounceIn;
    animation-duration: 450ms;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}
.input-to-pay2{animation-delay: 0.2s;}
.input-to-pay-button2{animation-delay: 0.5s;}

@keyframes bounceIn{
    0%{
        opacity: 0;
        transform: scale(0.3) translate3d(0,0,0);
    }
    50%{
        opacity: 0.9;
        transform: scale(1.1);
    }
    80%{
        opacity: 1;
        transform: scale(0.89);
    }
    100%{
        opacity: 1;
        transform: scale(1) translate3d(0,0,0);
    }
}
.btn-acleda-primary{

    background: rgb(38,73,116);
    background: linear-gradient(90deg, rgba(38,73,116,1) 0%, rgba(32,63,99,1) 35%, rgba(26,51,81,1) 100%);

    /* background-color: #1a3351 !important; */
    color: #ffffff !important;
    border: 1px solid #1a3351 !important;
  }
  .btn-acleda-primary:hover, .btn-acleda-primary:focus, .btn-acleda-primary:active,
    .btn-acleda-primary.active, .btn-acleda-primary.focus, .btn-acleda-primary:active,
    .btn-acleda-primary:focus, .btn-acleda-primary:hover, .open>.dropdown-toggle.btn-acleda-primary
    {
    background: rgb(38,73,116);
    background: linear-gradient(90deg, rgba(38,73,116,1) 0%, rgba(32,63,99,1) 35%, rgba(26,51,81,1) 100%);
    color: #cea939 !important;
    border: 1px solid #1a3351 !important;
}

.btn-acleda-success{
    background: rgb(216,187,98);
    background: linear-gradient(90deg, rgba(216,187,98,1) 0%, rgba(206,169,57,1) 35%, rgba(170,138,42,1) 100%);
    /* background-color: #cea939 !important; */
    color: #1a3351 !important;
    border: 1px solid #cea939 !important;
}
.btn-acleda-secondary {
    background-color: #ffffff;
    /* background-color: #1a3351 !important; */
    color: #7a7a7a !important;
    border: 1px solid #b3b3b3;
    padding: 0.625rem !important;
}
.btn-acleda-light{

    background: rgb(255,255,255);
    background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 50%, rgba(245,245,245,1) 100%);

    /* background-color: #1a3351 !important; */
    color: #1a3351 !important;
    border: 1px solid #ffffff !important;
}
.btn:focus, .btn:active, input[type=text]:focus, input[type=text].active, input[type=checkbox]:focus, input[type=checkbox].active {
    outline: none !important;
    box-shadow: none;
}

/* Custom on sweetalert */
body.swal2-height-auto {
    height: 100% !important;
}

/*.swal2-popup {
    width: 26rem !important;
    min-height: 25.5rem !important;
    box-sizing: content-box;
    zoom: 90%;
}
.swal2-close {
    box-shadow: none !important;
}
.swal2-popup-custom-bg {
    background-color: #1a3351;
    font-size: 14px;
}
.success-box {
    color: #c9c9c9;
}
.swal2-popup-expiretime {
    min-height: auto !important;
}
.swal2-container {
    z-index: 999999 !important;
} */


.back-to-validate-link {
    text-decoration: none;
    color: grey;
}
.back-to-validate-link:hover {
    color: #1a3351;
}

input, button, select {
    border-radius: 0.3rem !important;
}
.custom-rounded-3, .swal2-popup, #scanToPayChkbox, #inputToPayChkbox, #saveTokenCheckbox, #emailRadio, #mobilePhoneRadio {
    border-radius: 1.3rem!important;
}
.custom-w-30 {
    width: 30% !important;
}
.custom-w-60 {
    width: 70% !important;
}
.btn:focus, .btn:active, input[type=text]:focus, input[type=text].active, input[type=checkbox]:focus, input[type=checkbox].active {
    outline: none !important;
    box-shadow: none;
}
.optionButton .custom-w-49 {
    width: 49%;
}

/* custom scrollbar */
::-webkit-scrollbar {
  /*width: 20px;*/
}

::-webkit-scrollbar-track {
  background-color: transparent;
}
::-webkit-scrollbar-thumb {
  background-color: #d3d3d3;
  border-radius: 10px;
  border: 9px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
  background-color: #bfbfbf;
}
@keyframes circletimer {
    0% {
      stroke-dashoffset: 500;
      stroke-dasharray: 500;
    }
    100% {
      stroke-dashoffset: 0;
      stroke-dasharray: 500;
    }
}
svg {
    background-color: transparent;
    position: absolute;
    background-color: transparent;
    top: 7%;
    left: 93%;
    transform: translate(-50%, -50%) rotateZ(-90deg);
}
svg .circle {
    stroke: #ffffff;
    stroke-width: 3px;
    fill: transparent;
    stroke-dashoffset: 500;
    stroke-dasharray: 0;
    animation: 30s circletimer linear;
}
.success-timer {
    position: absolute;
    display: block;
    top: 7%;
    left: 93%;
    transform: translate(-50%, -50%);
    color: #ffffff;
    font-size: 18px;
    font-weight: 400;
    margin-top: -1px;
}
.total-details {
    border-top: 1px dashed;
    color: #cbcbca;
}
.total-details-qr {
    border-top: 1px dashed;
}
/*.did-floating-label-content {
  position: relative;
  margin-bottom: 20px;
}
.did-floating-label {
  color: #1e4c82;
  font-size: 12px;
  font-weight: normal;
  position: absolute;
  pointer-events: none;
  left: 15px;
  top: 11px;
  padding: 0 5px;
  background: #fff;
  transition: 0.2s ease all;
  -moz-transition: 0.2s ease all;
  -webkit-transition: 0.2s ease all;
}
.did-floating-input:focus, .did-floating-select:focus {
  border-color: #ced4da;
  outline: none;
}
.did-floating-label {
  top: -8px;
  font-size: 12px;
}

select.did-floating-select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

select.did-floating-select::-ms-expand {
  display: none;
}

.did-floating-input:not(:placeholder-shown) ~ .did-floating-label {
  top: -8px;
  font-size: 12px;
}

.did-floating-select:not([value=""]):valid ~ .did-floating-label {
  top: -8px;
  font-size: 12px;
}

.did-floating-select[value=""]:focus ~ .did-floating-label {
  top: 11px;
  font-size: 12px;
}

.did-error-input .did-floating-input, .did-error-input .did-floating-select {
  border: 2px solid #9d3b3b;
  color: #9d3b3b;
}
.did-error-input .did-floating-label {
  font-weight: 600;
  color: #9d3b3b;
}

.input-group {
  display: flex;
}
.input-group .did-floating-input {
  border-radius: 0 4px 4px 0;
  border-left: 0;
  padding-left: 0;
}*/

.input-group-append {
  display: flex;
  align-items: center;
}

.input-group-text {
  display: flex;
  align-items: center;
  font-weight: 400;
  height: 34px;
  color: #323840;
  padding: 0 5px 0 20px;
  font-size: 12px;
  text-align: center;
  white-space: nowrap;
  border: 1px solid #3D85D8;
  border-radius: 4px 0 0 4px;
  border-right: none;
}
._userid, ._otpe, #inputToPayButton {
    min-height: 52px !important;
}
.merchant-logo, .merchant-logo-warpper{
    height: 70px !important;
    object-fit: fill !important;
}
.custom-w-40 {
    width: 40%;
}
.custom-w-45 {
    width: 45%;
}
.custom-w-49 {
    width: 49%;
}
.custom-w-55 {
    width: 55%;
}
.custom-w-60 {
    width: 60%;
}
.custom-w-65 {
    width: 65%;
}
.text-blue {
    color: #1a3351;
    font-weight: bolder;
}
#alert-danger {
    font-size: 12px;
    padding-left: 10px;
}
.summary-body {
    min-height: 120px;
    max-height: auto;
}
.summary-body, .font-size-14 {
    font-size: 14px;
}

.form-check-input:checked {
    background-color: #1a3351;
    border-color: #1a3351;
}

.sessionExpiredText {
    color: #1a3351 !important;
}
._btnSendOOB-badge {
    width: 120px;
    float: right;
    font-size: 12px;
    padding-right: 0;
}
.txid, .merchantnameVal {
    word-break: break-all;
    text-align: center;
}
.merchantname {
    margin-right: 10px;
}
.refno {
    margin-right: 10px !important;
    /*width: 15rem;*/
    text-align: left !important;
}
.alert-primary {
    font-size: 14px !important;
}
.very-light-gray {
    color: #e8e8e8;
}
.merchantCompanyName p {
    font-size: 13pt;
    /*font-family: 'Khmer OS Siemreap', Montserrat !important;*/
}
.transactionSum {
    font-size: 11pt;
    /*font-family: 'Khmer OS Siemreap', Montserrat !important;*/
}
.fw-summary {
    font-size: 10pt;
}
#xpay-cancel-sm {
     line-height: 12px;
     width: 18px;
     font-size: 8pt;
     font-family: tahoma;
     margin-top: 5px;
     margin-right: 5px;
     position:absolute;
     top:0;
     right:0;
}
#saveTokenCheckbox, .saveTokenCheckbox {
    cursor: pointer;
}
.zeroMinuteTimerDiv {
    text-align: right;
    font-size: 14px;
}
.account-detail-wrapper, .transaction-completed-wrapper {
    min-height: 313px !important;
    box-sizing: border-box !important;
}
#swal2-html-container {
    margin: 1em 1.6em 0.3em;
    overflow: hidden !important;
}
.kh-lang {
    font-family: 'Krasar', Montserrat !important;
}

.merchantCompanyName {
    font-family: 'Krasar', Montserrat !important;
}

.card-acceptance img {
    width: 32px;
}
.card-acceptance-text {
    font-size: 12px !important;
}
.filter-grayscal-100 {
    filter: grayscale(100%);
    transition: 0.2s;
}

.openDeeplinkConfirmBox {
    width: 350px !important;
}
.openDeeplinkConfirmBox .md-content {
    padding: 20px;
    border-radius: 15px;
    background-color: transparent;
}
.openDeeplinkConfirmBox .md-content .btn-close-confirm-box, .openDeeplinkConfirmBox .md-content .btn-open-confirm-box{
    cursor: pointer;
    color: #3991cf;
    font-weight: 600;
}

.w-60 {
    width: 60%!important;
}

.w-40 {
    width: 40%!important;
}

/*Second line company name*/
.merchantCompanyName p{
  color: #cbcbca;
  font-size: 11pt;
}
.merchantCompanyName p::first-line {
  color: #e8e8e8;
  font-size: 13pt;
}
.margin-left-20 {
    margin-left: 20px;
}
.expireInWrapper {
    font-size: 14px;
}
.acl-pay-icon{
    font-size: 21px;
    float: left;
    margin-top: 2px;
}
.acl-khqr-icon{
    background-color: #e1232e;
    padding: 3px;
    border-radius: 6px;
    float: left;
    width: 22px;
}