:root{
	--inp-width: 50px;
	--inp-pad: 15px;
	--colr-frm-ctrl: rgba(255,255,255,0.7);
	--bg-inp-grp-txt: rgba(80,80,80,0.5);
	--cl-inp-grp-txt: darkblue;
	--sh-clr: rgba(0,0,0,0.8);
	--place-clr: rgba(90,90,90,1);
}
.del_item{color: red; font-weight: bold; font-size: 14pt; cursor: pointer;}
.add_item{color: darkblue; font-weight: bold; font-size: 14pt; cursor: pointer;}
.hk_invalid{ border:1px solid red; }
.hk-sw input, .hk-sw select{ height: 30px; }

#hk_popup{position: fixed; top: 1px; left:1px; bottom: 1px; right: 1px;}
#data_content{width: 100%; height: 100%; background-image: url(/assets/images/bg1.png);}
#box_reward{ padding: 20px 3px 20px 3px; background-color: white;border: 2px solid gold; border-radius: 20px;}

.item_info{ border: 0px solid white; }
.item_head{ position: absolute; z-index: 999}

.img_t { transform: scale(1); }
.img_t:hover { transform: scale(1.25); }

.swal-w850{ width:850px !important; }

.hk_input, .hk_date {
	border-radius: 5px; border: 1px solid #ababab; height: 24px; width: 95%; color: darkblue; font-size: 8pt;
}
.hk_input:hover, .hk_date:hover,.hk_input:focus, .hk_date:focus {
	border: 2px solid #8787ff; background-color: #aaa; font-weight: bold; }
.hk_inline{float: left; padding-right: 3px;}

.hk_fix_td {table-layout: fixed; border-collapse: collapse; border: 1px solid white;}
.hk_fix_td thead th, .sw_fix_td thead th{
	background-color: #112255; color: #fff; height: 30px; padding: 0 5px 0 5px;
	vertical-align: middle; text-align: center; font-size: 9pt;
}

.hk_graph_rate{width: 90%;}
.hk_border {padding: 6px; border-radius: 5px;}
.hk_banner {padding: 7px 5px; font-size: 18pt; border-radius: 5px; border: none; }
.hk_label {padding-top: 6px; border-radius: 5px; }
.hk_label10 {padding: 5px 0 0 0; }
.hk_invalid, .hk_input:invalid, .hk_date:invalid, .inp_date:invalid { border:1px solid red; }
.hk_slc_cap{ padding: 0 0 0 5px;}
.hk_input, .hk_date {
	border-radius: 5px; border: 1px solid #989898; height: 30px; width: 95%; color: darkblue; font-size: 8pt;
}
.hk_input:hover, .hk_date:hover,.hk_input:focus, .hk_date:focus {
	border: 2px solid #8787ff; background-color: #aaa; font-weight: bold; }
.hk_inline{float: left; padding-right: 3px;}

.hk_bg_1{ background: rgba(0, 0, 0, 0.5);}
.hk_bg_2{ background: rgba(0, 0, 0, 0.7);}
.hk_bg_3{ background: rgba(0, 0, 0, 0.9);}
.hk_bg_space{ background: url('/assets/images/spacer.gif'); background-size: 100% 100%;}

.hk_bt{color: skyblue; cursor: pointer; border-radius: 5px; border: 1px solid #989898;}
.f14pt{font-size: 14pt}
.f12pt{font-size: 12pt}
.f10pt{font-size: 10pt}
.f8pt{font-size: 8pt}
.f7pt{font-size: 7pt}
.hk_bt:hover{ color: darkblue; }
.hk_btn{ background-color: #00A8FF; color: white; cursor: pointer; height: 25px; vertical-align: middle; padding: 5px 10px; }
.hk_btn:hover{ background-color: #8787ff;}

.fa{cursor: pointer;}
.inp_date, .inp_text, .inp_slc,.inp_textarea{
	padding: 0 0 0 5px; height: 23px; border-radius: 5px; border: 1px solid #989898; color: darkblue; width: 100%; font-size: 8pt;
}
.inp_date:hover,.inp_text:hover,.inp_slc:hover,.inp_textarea:hover,
.inp_date:focus,.inp_text:focus,.inp_slc:focus,.inp_textarea:focus
{ border: 2px solid #ffff98; background-color: #aaa; font-weight: bold;}
.inp.trnp{ background-color: transparent; color: white; text-align: right; border: none; }
.inp_label {padding: 0 0 0 5px; border: none; width: 100%; background-color: transparent; color: #fff;}

.xpage{cursor: pointer;}

.hk_fix_td {table-layout: fixed; border-collapse: collapse; border: 1px solid white; width: 100%; }
.hk_fix_td thead th, .sw_fix_td thead th{
	background-color: #112255; color: #fff; height: 30px; padding: 0 5px 0 5px;
	vertical-align: middle; text-align: center; font-size: 9pt;
}
.hk_fix_td thead td{height: 1px; font-size:1pt;}
.hk_fix_td td {overflow: hidden; white-space: nowrap; height: 20px; padding: 0 5px 0 5px; font-size:8pt; }
.hk_fix_td tbody tr:nth-child(even) >td{ background-color: #ddd; vertical-align: middle; color: darkblue; }
.hk_fix_td tbody tr:nth-child(odd) >td{ background-color: #ccc; vertical-align: middle; color: darkblue;}
.hk_fix_td tbody tr.live:nth-child(even) >td{ background-color: #88a; vertical-align: middle; color: darkblue; }
.hk_fix_td tbody tr.live:nth-child(odd) >td{ background-color: #565677; vertical-align: middle; color: #eeeeff;}
.hk_fix_td tbody tr.old:nth-child(even) >td{ background-color: #a88; vertical-align: middle; color: darkblue; }
.hk_fix_td tbody tr.old:nth-child(odd) >td{ background-color: #775656; vertical-align: middle; color: #eeeeff;}
.hk_fix_td tbody tr.active>td,.hk_fix_td tbody tr:hover >td{ background-color: #BBBCCC;}
.blue{color: blue!important;}
.dk_blue{color: darkblue!important;}
.skyblue{color: skyblue!important;}
.dk_green{color: #007070!important;}
.green{color: #abffab!important;}
.yellow{color: yellow!important;}
.orange{color: orange!important;}
.red{color: red!important;}
.brown{ color: brown!important;}
.bold{ font-weight: bold;}
.gray{ color: gray;}
.white{ color: white;}
.pink{color:rgb(255, 50, 255);}
.purple{color:rgb(150, 100, 255);}
button.fa-edit,button.fa-eye, button.clone{
	background: inherit; padding: 0 2px; border:none; color: #000080; width: 18px; font-size: 8pt;
}
button.fa-edit:hover,button.fa-eye:hover,button.clone:hover,
button.fa-edit:focus,button.fa-eye:focus,button.clone:focus{ -webkit-filter: invert(100%); filter: invert(100%);}
button.fa-trash{ background: inherit; padding: 0 2px; border:none; color: orange; width: 18px; font-size: 8pt;}
button.fa-trash:hover, button.fa-trash:focus{ -webkit-filter: invert(100%); filter: invert(100%); color: #00ffff;}
button.fa-recycle{ background: inherit; padding: 0 2px; border:none; color: yellow; width: 18px; font-size: 8pt;}
button.fa-recycle:hover, button.fa-recycle:focus{ -webkit-filter: invert(100%); filter: invert(100%);}
.chk_r:focus{border: 1px solid blue;}
footer{ position: fixed; bottom: 0; left:0; right: 0; background-color: #003030; color:#8787ff;}
::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */ color: var(--place-clr); opacity: 1; /* Firefox */ }
:-ms-input-placeholder { /* Internet Explorer 10-11 */ color: var(--place-clr); }
::-ms-input-placeholder { /* Microsoft Edge */ color: var(--place-clr);}
.tdList{width: 30px;}

.pd-0{padding: 0;}
.pd-l-0{padding-left: 0;}
.pd-r-0{padding-right: 0;}
.pd-t-0{padding-top: 0;}
.pd-b-0{padding-bottom: 0;}
.pd-x-0{padding-left: 0; padding-right: 0;}
.pd-y-0{padding-top: 0; padding-bottom: 0;}

.pd-1{padding: 1px;}
.pd-l-1{padding-left: 1px;}
.pd-r-1{padding-right: 1px;}
.pd-t-1{padding-top: 1px;}
.pd-b-1{padding-bottom: 1px;}
.pd-x-1{padding-left: 1px; padding-right: 2px;}
.pd-y-1{padding-top: 1px; padding-bottom: 2px;}

.pd-2{padding: 2px;}
.pd-l-2{padding-left: 2px;}
.pd-r-2{padding-right: 2px;}
.pd-t-2{padding-top: 2px;}
.pd-b-2{padding-bottom: 2px;}
.pd-x-2{padding-left: 2px; padding-right: 2px;}
.pd-y-2{padding-top: 2px; padding-bottom: 2px;}

.pd-3{padding: 3px;}
.pd-l-3{padding-left: 3px;}
.pd-r-3{padding-right: 3px;}
.pd-t-3{padding-top: 3px;}
.pd-b-3{padding-bottom: 3px;}
.pd-x-3{padding-left: 3px; padding-right: 3px;}
.pd-y-3{padding-top: 3px; padding-bottom: 3px;}

.pd-5{padding: 5px;}
.pd-l-5{padding-left: 5px;}
.pd-r-5{padding-right: 5px;}
.pd-t-5{padding-top: 5px;}
.pd-b-5{padding-bottom: 5px;}
.pd-x-5{padding-left: 5px; padding-right: 5px;}
.pd-y-5{padding-top: 5px; padding-bottom: 5px;}

.pd-10{padding: 10px;}
.pd-l-10{padding-left: 10px;}
.pd-r-10{padding-right: 10px;}
.pd-t-10{padding-top: 10px;}
.pd-b-10{padding-bottom: 10px;}
.pd-x-10{padding-left: 10px; padding-right: 10px;}
.pd-y-10{padding-top: 10px; padding-bottom: 10px;}

.pd-15{padding: 15px;}
.pd-l-15{padding-left: 15px;}
.pd-r-15{padding-right: 15px;}
.pd-t-15{padding-top: 15px;}
.pd-b-15{padding-bottom: 15px;}
.pd-x-15{padding-left: 15px; padding-right: 15px;}
.pd-y-15{padding-top: 15px; padding-bottom: 15px;}

.pd-20{padding: 20px;}
.pd-l-20{padding-left: 20px;}
.pd-r-20{padding-right: 20px;}
.pd-t-20{padding-top: 20px;}
.pd-b-20{padding-bottom: 20px;}
.pd-x-20{padding-left: 20px; padding-right: 20px;}
.pd-y-20{padding-top: 20px; padding-bottom: 20px;}

.pd-25{padding: 25px;}
.pd-l-25{padding-left: 25px;}
.pd-r-25{padding-right: 25px;}
.pd-t-25{padding-top: 25px;}
.pd-b-25{padding-bottom: 25px;}
.pd-x-25{padding-left: 25px; padding-right: 25px;}
.pd-y-25{padding-top: 25px; padding-bottom: 25px;}

.pd-30{padding: 30px;}
.pd-l-30{padding-left: 30px;}
.pd-r-30{padding-right: 30px;}
.pd-t-30{padding-top: 30px;}
.pd-b-30{padding-bottom: 30px;}
.pd-x-30{padding-left: 30px; padding-right: 30px;}
.pd-y-30{padding-top: 30px; padding-bottom: 30px;}

.pd-60{padding: 60px;}
.pd-l-60{padding-left: 60px;}
.pd-r-60{padding-right: 60px;}
.pd-t-60{padding-top: 60px;}
.pd-b-60{padding-bottom: 60px;}
.pd-x-60{padding-left: 60px; padding-right: 60px;}
.pd-y-60{padding-top: 60px; padding-bottom: 60px;}
/*
@for $i from 1 through 60 {
	.pd-yy-#{$i} {
		padding-top: calc($i); padding-bottom: calc($i);
	}
}
*/
.swal2-modal{
		width:80vw; font-family: tahoma; border-radius: 8px 8px 8px 8px;
		background: linear-gradient(to bottom, #dcdcdc 0%,#cacaca 44%,#ededed 100%);
}
@media screen and (max-width: 550px){
	.swal2-modal{ width: 98vw; }
}
.tooltip-arrow,
.red-tooltip + .tooltip > .tooltip-inner {background-color: #f00;}
body{
	background-color: black;
	-webkit-background-size: 100% 100%;
	-moz-background-size:  100% 100%;
	-o-background-size:  100% 100%;
	background-size:  100% 100%;
	opacity: 1;
}
.transparent{ background-color: transparent;}
.form-control{
	background-color: var(--colr-frm-ctrl); color: darkblue; text-align: center; display: table;
	margin-left: auto;  margin-right: auto;
}

.blink_me,.blink { animation: blinker 1s linear infinite; }
@keyframes blinker {
  50% { opacity: 0; }
}
.dataTables_wrapper label, .dataTables_info{ color: yellow; background-color: transparent;}			
.input-group-text{
	display: table; margin-left: auto;  margin-right: auto;
	font-weight: bold;
	background-color: var(--bg-inp-grp-txt);	
	text-align: center;
	color: var(--cl-inp-grp-txt); 
	padding-left: var(--inp-pad);
	padding-right: var(--inp-pad);
	width: var(--inp-width); 
}
.shadow{text-shadow: -1px 0 var(--sh-clr), 0 1px var(--sh-clr),1px 0 var(--sh-clr), 0 -1px var(--sh-clr)}
/*.paginate_button{cursor: pointer; color: orange;}*/
.bg1{ background-color: rgba(10,10,10,0.75); }
.bg2{ background-color: rgba(10,10,10,0.85); }