::-webkit-scrollbar {
	width: 5px;
	height: 7px; /* Высота скроллбара */
}

/* Стилизация ползунка скроллбара (бегунок) */
::-webkit-scrollbar-thumb {
	background-color: #4747478f; /* Цвет ползунка */
	border-radius: 5px; /* Закругление углов ползунка */
}

::-webkit-scrollbar-corner {
    display: none;
}


input {
    width: 100%;
    max-width: 240px;
}

.dark-layout body {
    color: #dbd8d8;
    background-color: #000000; 
}

.dark-layout h1,
.dark-layout h2,
.dark-layout h3,
.dark-layout h4,
.dark-layout h5,
.dark-layout h6 {
  color: #ffffff; 
}


.dark-layout .card {
    background-color: #191c24;
    border: 1px solid rgb(64 74 92 / 12%);
    box-shadow: 0 4px 24px 0 rgba(34, 41, 47, 0.24); }
  
  .dark-layout input:-webkit-autofill,
  .dark-layout textarea:-webkit-autofill,
  .dark-layout select:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #191c24 inset !important;
    -webkit-text-fill-color: #b4b7bd !important; }
  
  .dark-layout input.form-control,
  .dark-layout select.form-select,
  .dark-layout textarea.form-control {
    background-color: #1c1c1ccf;
    color: #b4b7bd; }
  
  .dark-layout input.form-control:not(:focus),
  .dark-layout select.form-select:not(:focus),
  .dark-layout textarea.form-control:not(:focus) {
    border-color: #404656; }
  
  .dark-layout input.form-control::placeholder,
  .dark-layout select.form-select::placeholder,
  .dark-layout textarea.form-control::placeholder {
    color: #676d7d; }
  
  .dark-layout input.form-control:disabled, .dark-layout input.form-control[readonly='readonly'],
  .dark-layout select.form-select:disabled,
  .dark-layout select.form-select[readonly='readonly'],
  .dark-layout textarea.form-control:disabled,
  .dark-layout textarea.form-control[readonly='readonly'] {
    opacity: 0.5; }
  

  
  .dark-layout .input-group:focus-within .form-control,
  .dark-layout .input-group:focus-within .input-group-text {
    border-color: #28c76f;
    box-shadow: none; }
  
  .dark-layout .form-label-group > input:not(:focus):not(:placeholder-shown) ~ label,
  .dark-layout .form-label-group > textarea:not(:focus):not(:placeholder-shown) ~ label {
    color: #b4b7bd !important; }
  




/* DESIGN STYLE */

.login-title {
    margin-bottom: 0px;
    font-size: 20px;
}

.transition-fade {
    opacity: 1;
    transition: 300ms;
}

html.is-animating .transition-fade {
    opacity: 1;
    transform: translateY(50%);
}

html.is-leaving .transition-fade {
    opacity: 0;
}

.input-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    margin-top: 15px;
}
.flex-center {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.content-body {
    text-align: center;
    padding: 20px;
}

.btn {
    width: 100%;
    /* max-width: 240px; */
}

.btn-blue {
    background-color: #109cb3 !important;
    color: #fff !important;
}

.btn-green {
    background-color: #28c76f !important;
    color: #fff !important;
}

#preloader {
	display: flex;
  flex-direction: column;
	justify-content: center;
	align-items: center;

}

.preloader-hide {
    opacity: 0;
    pointer-events: none;
    transition: all 150ms ease !important;
}

.lds-roller {
	display: inline-block;
	position: relative;
	width: 80px;
	height: 80px;
	z-index: 110;
  }
  .lds-roller div {
	animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
	transform-origin: 40px 40px;
  }
  .lds-roller div:after {
	content: " ";
	display: block;
	position: absolute;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #ffffff7a!important;
	margin: -4px 0 0 -4px;
  }
  .lds-roller div:nth-child(1) {
	animation-delay: -0.036s;
  }
  .lds-roller div:nth-child(1):after {
	top: 63px;
	left: 63px;
  }
  .lds-roller div:nth-child(2) {
	animation-delay: -0.072s;
  }
  .lds-roller div:nth-child(2):after {
	top: 68px;
	left: 56px;
  }
  .lds-roller div:nth-child(3) {
	animation-delay: -0.108s;
  }
  .lds-roller div:nth-child(3):after {
	top: 71px;
	left: 48px;
  }
  .lds-roller div:nth-child(4) {
	animation-delay: -0.144s;
  }
  .lds-roller div:nth-child(4):after {
	top: 72px;
	left: 40px;
  }
  .lds-roller div:nth-child(5) {
	animation-delay: -0.18s;
  }
  .lds-roller div:nth-child(5):after {
	top: 71px;
	left: 32px;
  }
  .lds-roller div:nth-child(6) {
	animation-delay: -0.216s;
  }
  .lds-roller div:nth-child(6):after {
	top: 68px;
	left: 24px;
  }
  .lds-roller div:nth-child(7) {
	animation-delay: -0.252s;
  }
  .lds-roller div:nth-child(7):after {
	top: 63px;
	left: 17px;
  }
  .lds-roller div:nth-child(8) {
	animation-delay: -0.288s;
  }
  .lds-roller div:nth-child(8):after {
	top: 56px;
	left: 12px;
  }
  @keyframes lds-roller {
	0% {
	  transform: rotate(0deg);
	}
	100% {
	  transform: rotate(360deg);
	}
  }
  
  .mbtn:disabled {
    pointer-events: none;
    opacity: 0.65;
}

  /* LOGS TABLE STYLES */
tbody.table-logs tr {
	display: flex;
	padding: 0px 10px;
}
.log_items {
	width: 100%;
	display: flex;
	flex-direction: column;
}

.log_items h4 {
	font-family: Arial, Helvetica, sans-serif!important;
}

#pin {
	font-size: 16px;
	font-weight: 600;
	color: #06e649;
}

/* CLIENTS TABLE STYLES */

.banking-card {
	margin: 15px 0px;
}

.bank-logo {
	border-radius: 10px;
}

.bank-info {
  width: 100%;
  padding: 0.4rem 1rem!important;
}

.bank-info span {
  width: 100%;
  height: 20px;
}

.device-card {
	width: 100%;
	padding: 8px;
	margin-top: 15px;
  margin-bottom: 0px;
  display: flex;
  flex-direction: row;
}

.clients-empty-card {
  width: 100%;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.clients-empty-card h3 {
  color: #828285;
}

.device-info {
  width: 50%;
}

.device-status {
  width: 50%;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
}

.device-detalies {
  width: 50%;
}



.device-status-detalies .session {
  margin-left: 5px;
}

.device-status div {
  margin: 3px;
}

.device-status .partner-status,
.device-status .connection {
  width: 100%;
  text-align: end;
}

.ip-address {
  display: flex;
  align-items: center;
}
.ip-address span {
  margin-left: 7px;
}

.device-name {
  margin-top: 7px;
}
.device-name i {
  font-size: 15px;
  margin-left: 3px;
}

.device-icons {
  display: flex;
  padding-top: 10px;
}

.device-icons span {
  font-size: 13px;
  padding: 2px 5px;
  border-radius: 5px;
  margin-right: 7px;
}

.device-icons i {
  font-size: 25px;
}

.card-btn {
  width: 100%;
  padding-top: 1.5rem;
}

.card-pin {
  width: 100%;
  text-align: end;
  padding-top: 1.5rem;
  padding-right: 6px;
}

.card-btn a,
.card-pin span {
  padding: 0.6rem 1rem;
  border-radius: 5px;
}

.badge-status {
  font-size: 13px;
  padding: 4px 5px;
  border-radius: 5px;
}

.primary-color {
  border: 1px solid #7367f0 !important;
  background-color: transparent;
  color: #7367f0;
}

.awaiting-color {
  border: 1px solid #ff9f43 !important;
  background-color: transparent;
  color: #ff9f43;
}

.off-color {
  border: 1px solid #82868b6b !important;
  background-color: transparent;
  color: #82868b7d;
}

.on-color {
  border: 1px solid #28c76f9c !important;
  background-color: transparent;
  color: #28c76fe8!important;
}

.error-color {
  border: 1px solid #c728289c !important;
  background-color: transparent;
  color: #ea5455 !important;
}

.btn-custom-primary {
  background-color: rgba(115, 103, 240, 0.12);
  color: #7367f0 !important;
}

.btn-custom-success {
  background-color: rgba(40, 199, 111, 0.12);
  color: #28c76f !important;
}

.btn-custom-danger {
  background-color: rgba(234, 84, 85, 0.12);
  color: #ea5455 !important;
}

.btn-custom-warning {
  background-color: rgba(255, 159, 67, 0.12);
  color: #ff9f43 !important;
}

.btn-custom-info {
  background-color: rgba(0, 207, 232, 0.12);
  color: #00cfe8 !important;
}

.connect-manager {
  display: flex!important;
  justify-content: center;
}

.connect-manager button,
.test-manager button {
  margin: 0px 5px;
  border-radius: 7px;
}

.fa-google-pay {
  font-size: 30px!important;
}


.contactless-card-icon {
  background-color: #fff;
  border-radius: 50%;
}

.contactless-card-icon img {
  margin: -7px;
}

.gpay-debit-card img {
  width: 100%;
}
.gpay-debit-card {
  padding: 20px 0px;
}

.gpay-debit-card img {
  border-radius: 10px;
}