/* @import"../fonts/iconset/cPay-iconpack.css"; */

@keyframes show-overlay {
  0% {
      opacity: 0
  }

  100% {
      opacity: .195
  }
}

.user {
  --primary-color: #61A0CE
}

.merchant,#MerchantLayout {
  --primary-color: #002169;
  --main-menu-bg: #002169
}

.bank,#BankLayout {
  --primary-color: #D87172;
  --main-menu-bg: #e5ebf1;
  --main-menu-color: #002169
}

:root {
  --primary-color: #61A0CE;
  --main-menu-bg: var(--primary-color);
  --main-menu-color: #fff
}

.i {
  position: relative;
  display: inline-block;
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale
}

.i:before {
  display: inline-block;
  font-family: "cPay-iconpack";
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale
}

.icon-lg .i {
  font-size: 1.25rem
}

.icon-xl .i {
  font-size: 1.5rem
}

.flag {
  background-image: url("/Content/images/flagSprite42.png");
  background-repeat: no-repeat;
  background-size: 100% 49494%;
  display: inline-block;
  overflow: hidden;
  position: relative;
  vertical-align: middle;
  box-sizing: content-box;
  background-clip: content-box;
  border-radius: 21%;
  box-shadow: 0 0 0 1px #7a828c
}

.flag-AL {
  background-position: center .2287%
}

.flag-BG {
  background-position: center .4524%
}

.flag-MK {
  background-position: center .6721%
}

.flag-GB {
  background-position: center .8958%
}

.flag.f-sm {
  width: 18px;
  height: 11px
}

.flag.f-md {
  width: 27px;
  height: 17px
}

.flag.f-lg {
  width: 42px;
  height: 27px
}

.flag.f-xl {
  width: 60px;
  height: 37px
}

.payment-type-logo {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  box-shadow: 1px 1px 4px rgba(12,88,109,.15);
  background-size: 80%;
  background-repeat: no-repeat;
  background-position: center center;
  border: 1px solid #e5ebf1
}

.payment-type-logo.Maestro,.payment-type-logo.MasterCard {
  background-image: url("/Content/svg/avatar-mc.svg")
}

.payment-type-logo.VISA_VISAElectron {
  background-image: url("/Content/svg/avatar-visa.svg")
}

.payment-type-logo.MKDomesticCard {
  background-image: url("/Content/images/flagSprite42.png");
  background-size: 2.25rem auto;
  background-position-y: .6721%
}

.payment-type-logo.Diners {
  background-image: url("/Content/svg/avatar-diners.svg")
}

.payment-type-logo.Black,.payment-type-logo.White {
  width: 1.125rem;
  height: 1.125rem;
  border-width: 2px
}

.payment-type-logo.Black {
  background-color: #11253c !important
}

.payment-type-logo.White {
  background-color: #fff !important
}

#SimpleLayout {
  font-family: Arial,Helvetica,sans-serif;
  color: #505d68;
  line-height: 1.5
}

#SimpleLayout .vpos-challange {
  height: 100vh
}

#SimpleLayout .form-header {
  display: flex;
  justify-content: space-between;
  align-items: center
}

#SimpleLayout .form-secure {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2.5px
}

#SimpleLayout .form-secure .i {
  vertical-align: middle;
  margin-top: -4px
}

#SimpleLayout .main-content,#SimpleLayout footer {
  max-width: 500px;
  margin: 0 auto;
  display: block
}

#SimpleLayout .merchant-logo {
  max-height: 120px;
  height: auto
}

#SimpleLayout fieldset {
  border: none;
  padding: 0
}

#SimpleLayout input,#SimpleLayout div,#SimpleLayout fieldset {
  box-sizing: border-box
}

#SimpleLayout .form-group {
  display: flex;
  margin: 10px 0;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end
}

#SimpleLayout .form-group>* {
  flex: 0 0 50%
}

#SimpleLayout .form-group .validation-msg {
  color: #d87172;
  font-size: .8125rem
}

#SimpleLayout .form-group .form-control {
  border-radius: .3125rem;
  border: 1px solid #c9c9c9;
  padding: 5px;
  background: #fff;
  font-size: 1rem
}

#SimpleLayout .form-group .form-control:focus,#SimpleLayout .form-group .form-control:focus-visible,#SimpleLayout .form-group .form-control:focus-within {
  border-color: #add8e6;
  box-shadow: none
}

#SimpleLayout .form-group .form-control:disabled,#SimpleLayout .form-group .form-control .disabled {
  background: #c9c9c9
}

#SimpleLayout .form-group-inline {
  display: flex;
  align-items: center
}

#SimpleLayout .form-group-inline .form-group {
  margin: 0
}

#SimpleLayout .form-group-inline *>* {
  flex-grow: 1
}

#SimpleLayout .form-group-inline *>*.stack,#SimpleLayout .form-group-inline *>* label {
  flex: 0 0 0
}

#SimpleLayout .combined {
  display: flex;
  align-items: center
}

#SimpleLayout .combined>* {
  flex: 0 0 50%
}

#SimpleLayout .btn {
  background: #0a4694;
  padding: 8px 10px;
  border: none;
  color: #fff;
  border-radius: 8px;
  font-weight: bold;
  cursor: pointer
}

#SimpleLayout .btn:disabled {
  cursor: default
}

#SimpleLayout .form-buttons {
  display: flex;
  padding-top: 10px;
  justify-content: end;
  align-items: center;
  gap: 10px
}

#SimpleLayout .text-bold {
  font-weight: bold
}

#SimpleLayout .text-sm {
  font-size: .875em
}

#SimpleLayout .text-center {
  text-align: center
}

#SimpleLayout .text-success {
  color: #05733c
}

#SimpleLayout .text-danger {
  color: #d87172
}

#SimpleLayout .d-none {
  display: none
}

#SimpleLayout .mb-5 {
  margin-bottom: 60px
}

#SimpleLayout .mt-5 {
  margin-top: 60px
}

#SimpleLayout .w-50 {
  width: 50%
}

#SimpleLayout .px-2 {
  padding-left: 10px;
  padding-right: 10px
}

#SimpleLayout .vpos-payment-methods .list-group {
  display: flex;
  padding: 0;
  gap: 30px;
  justify-content: center;
  align-items: center;
}

#SimpleLayout .vpos-payment-methods .list-group-item {
  display: inline-block
}

#SimpleLayout .vpos-payment-methods img {
  max-height: 50px
}

#SimpleLayout .vpos-payment-methods+.text {
  text-align: center;
  font-size: 12px;
  display: block
}

#SimpleLayout .vpos-challange-simple {
  min-height: calc(100vh - 220px)
}

#SimpleLayout h1 {
  font-size: 16px
}

#SimpleLayout .form-secure .text-lg {
  font-size: 14px
}

#SimpleLayout .form-secure .text-sm {
  font-size: 12px
}

#SimpleLayout .form-secure .i-lock:before {
  content: "🔒"
}

#SimpleLayout .modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1;
  top: 30%;
  transform: translateY(-50%);
  width: 80vw;
  margin: 0 auto
}

#SimpleLayout .modal-dialog {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 2px 2px 10px rgba(0,0,0,.2)
}

#SimpleLayout .modal-content {
  background: #fff
}

#SimpleLayout .modal-header {
  padding: 3px 20px;
  background: #093f85;
  display: flex;
  justify-content: flex-end;
  color: #fff
}

#SimpleLayout .modal-header .close {
  background: rgba(0,0,0,0);
  border: none;
  color: #fff;
  font-size: 1.25em;
  cursor: pointer
}

#SimpleLayout .modal-body {
  padding: 20px
}

#SimpleLayout .modal-backdrop {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0,0,0,.1)
}
#SimpleLayout .justify-content-between {
    justify-content: space-between;
}