::-webkit-scrollbar
{
  width: 4px;  /* for vertical scrollbars */
  height: 4px; /* for horizontal scrollbars */
}

::-webkit-scrollbar-track
{
  background-color: transparent;
}

::-webkit-scrollbar-thumb
{
  background: rgba(0, 0, 0, 0.2);
  border-radius: 10px;
}

#sidebar-menu {
	hr {
		padding: 0px;
		margin: 0px;
		background-color: #717171;
	}
}

article { 
	overflow: hidden; 
	height: 0px; 
	width: 0px; 
	display: none;
}
article.show { 
	overflow: visible; 
	height: auto; 
	width: auto; 
	display: flex;
	flex-direction: column;
}

.maskover { 
	position: absolute; 
	top: 0px; 
	bottom: 0px; 
	left: 0px; 
	right: 0px; 
	background-color: #fff; 
	z-index: 90; 
	opacity: 0.5;
	display: none;
}
.maskover.show {
	display: block;
}

table.vuetable {
	th.sortable { cursor: pointer; }
	th.sortable:hover { opacity: 0.8; }
	
	tbody { 
		td { 
			/* vertical-align: middle;  */
			padding-top: 0.25rem;
			padding-bottom: 0.25rem;
		}
	}
}

.tooltip { 
	opacity: 1; 
	font-size: 0.7rem;
	
	.tooltip-inner {
		text-align: left;
		border: 1px solid #ccc;
		background: #fff;
		color: #333;
	}
}

/* bootbox override */
.bootbox.modal {
	.modal-dialog {
		.modal-content {
			.modal-header {
				padding-top: 0.75rem;
				padding-bottom: 0.75rem;
			}
			.modal-footer {
				/* make all button to btn-sm */
				button.btn {
					padding: .25rem .5rem;
					font-size: .875rem;
					line-height: 1.5;
					border-radius: .2rem;
				}
			}
		}
	}
}

div.alert {
	button.btn.btn-sm { min-width: 5rem; }
}

/* text-focus */
.text-focus:focus { background-color: #ffffcc; }

.right-corner{
	position: absolute;
    right: 8px;
    width: 25px;
    height: 25px;
    vertical-align: middle;
    text-justify: center;
    top: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.882);
    background-color: rgba(32, 33, 36, 0.4);
    border-radius: 50%;
}

.square {
    float:left;
    position: relative;
    width: 15%;
    margin:0.25%;
    background-position:center center;
    background-repeat:no-repeat;
    background-size:cover; /* you change this to "contain" if you don't want the images to be cropped */
}

input[type=text].form-control:disabled { 
	background-color: #e9ecef !important;
}


.div-background{
	width:  1070px ;
	height: 593px ;
}

.select-amount{
	opacity: 90%;
	border: white solid 1px;
	cursor: pointer;
}
.select-amount:hover{
	opacity: 100%;
}

.icon-container{
	border-radius: 15px;
	background-color: #fff;
	margin-right: 3px;
	object-fit: cover;
	width: 7.5vh;
	height: 7.5vh;
}

.container-left{
	position: absolute;
	top: 10%; 
	left: 5%; 
	width: 45%;
	height: inherit;
}

.container-right{
	position: absolute;
	top: 10%; 
	left: 55%; 
	bottom: 10%; 
	width: 40%;
	height: inherit;
}

.contaner-single{
	position: absolute;
	top: 10%;
	left: 5%;
	bottom: 10%;
	width: 90%;
}

.loading {
	background-image: url("../images/loading-removebg-spin.png");
	background-repeat: no-repeat;
	border-radius: 50;
	background-size: contain;
	width: 100%;
	height: 83.5%;
	//background-color: white;
	position: absolute;
	animation-name: spin;
	top: 1px;
	animation-duration: 5s;
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
} 

.adminlogin {
	position: fixed;
	top: 0vw;
	left: 0vw;
	width: 2cm;
	height: 2cm;
	display: block;
	z-index: 200;
}

/*
.countdown {
	position: fixed;
	top: 1vw;
	right: 1vw;
	width: 5vw;
	font-size: 3vw;
	background-color: #fff;
	border-radius: 0.5rem;
	text-align: center;
	color: #000;
}
*/

.countdown {
	position: absolute;
	/* top: ~"calc(82vh - 1px)"; */
	bottom: 0px;
	line-height: 1.25rem;
	left: 0px;
	right: 0px;
	font-size: 0.75rem;
	text-align: left;
	color: #000;
	white-space: nowrap;
	opacity: 0.8;
	z-index: 1;

	.countdown-progress {
		transition: width 1s linear;
	}
}

article.full-height .countdown {
	bottom: 14vh;
}

.countdown.top { 
	top: 0px; 
	bottom: unset !important; /* ~"calc(100vh - 2.5rem)" !important;  */
}


.btn-numpad {
	width: 5rem; 
	height: 4.5rem;
	margin: 0.15rem;
	font-size: 3rem;
	line-height: 75%;
}