:root {
  --stky2: 46px; 
}

img {
   pointer-events : none;
  -webkit-touch-callout: none;  
  -webkit-user-select: none;    
  -khtml-user-select: none;     
  -moz-user-select: none;       
  -ms-user-select: none;        
   user-select: none;
}

.inv {
	-webkit-filter: invert(1);
	filter: invert(1);
	position: relative; 
	z-index: 1;
}
.ptr{
cursor: pointer;
}
.brdr {
	-webkit-box-shadow: 0 0 3px 1px #55b;
	-moz-box-shadow: 0 0 3px 1px #55b;
	box-shadow: 0 0 3px 1px #55b;
}
.brdr2 {
	-webkit-box-shadow: 0 0 3px 1px #b55;
	-moz-box-shadow: 0 0 3px 1px #b55;
	box-shadow: 0 0 3px 1px #b55;
}
.sticky {
	position: -webkit-sticky;
	position: sticky;
	z-index: 1;
	top:0;
	width:100%;
	background: rgb(45,45,45,0.5);
		-webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
	-moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
	-o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
	transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
}
.sticky2 {
	position: -webkit-sticky;
	position: sticky;
	top: var(--stky2);
  
		-webkit-box-shadow: 0 0 2px 1px #488;
        -moz-box-shadow: 0 0 2px 1px #488;
        box-shadow: 0 0 2px 1px #488;
}


.switch{
    color:#fff;
    border-radius: 0.5em;
    cursor: pointer;
	border: 1px solid #024;
	background: #024;

	-webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
	-moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
	-o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
	transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
	-webkit-user-select: none;    
	-khtml-user-select: none;     
	-moz-user-select: none;       
	-ms-user-select: none;        
	 user-select: none;
}
.switch:hover{
	color:#003; background: #ddf;
	border: 1px solid #00f;
	-webkit-box-shadow: 0 0 12px 4px #00f;
        -moz-box-shadow: 0 0 12px 4px #00f;
		box-shadow: 0 0 12px 4px #00f;
}
.hide {
	color:#000;
	background: rgb(200,200,200,0.9);
}
.swt{
	border: 1px solid #068;
	-webkit-box-shadow: 0 0 6px 2px #068;
        -moz-box-shadow: 0 0 6px 2px #068;
        box-shadow: 0 0 6px 2px #068;
}

.updt {
color:#fa4;
font-size:26px;
background: #222;
border-radius: 0.5em;
font-family: 'Lexend Deca', sans-serif;
}

.glow{
border: 4px dotted;
animation: glower 3s linear infinite;
}
@keyframes glower {
   0%  {border-color: Indigo;}
  12%  {border-color: Purple;}
  25%  {border-color: MediumVioletRed;}
  37%  {border-color: Red;}
  50%  {border-color: Gold;}
  62%  {border-color: Yellow;}
  75%  {border-color: DeepSkyBlue;}
  87%  {border-color: Blue;}
  100% {border-color: Indigo;}
}
.bord{
border: 4px dotted #bbb;
color:#bbb;
}
.bord2{
color:#bbb;
}
.bord3{
color:#4f4;
}

.pgbox{
	width:96px;
	color:#000;
	border: 2px solid #488;
}
.pglb{
	font-size:14px; 
	color:#488;
}

.go1, .go2{
font-family: 'Poppins', sans-serif;
cursor:pointer; 
background:#114;
color: #fff;
border-radius: 0.5em;
border: 2px solid #488;
}
.go1, .pgbox{
	height:44px;
}
.go1{
	font-size:22px;
}

.count{ 
	font-size: 20px; 
	color:#fff; padding:2px 4px 2px 4px;
	background-color: #36b;
	border-radius: 0.25em;
}

/* SELECT */
select { 
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  /* Some browsers will not display the caret when using calc, so we put the fallback first */ 
  background-position: calc(100% - 0.75rem) center !important;
  /* Better placement regardless of input width */
}
select:hover{
-webkit-box-shadow: 0 0 12px 5px #a8d;
-moz-box-shadow: 0 0 12px 5px #a8d;
box-shadow: 0 0 12px 5px #a8d;
}

.cs1{
	background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" class="bi bi-caret-down-fill" viewBox="0 0 16 16"><path fill="RoyalBlue" d="M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"/></svg>') no-repeat;
	background-color: #eef;
	box-shadow:0px 0px 8px 0px RoyalBlue inset;
}
.cs2{
	background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" class="bi bi-caret-down-fill" viewBox="0 0 16 16"><path fill="Crimson" d="M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"/></svg>') no-repeat;
	background-color: #fee;
	box-shadow:0px 0px 8px 0px Crimson inset;
}
.cs3{
	background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" class="bi bi-caret-down-fill" viewBox="0 0 16 16"><path fill="Green" d="M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"/></svg>') no-repeat;
	background-color: #eef6ee;
	box-shadow:0px 0px 8px 0px Green inset;
}
.cs4{
	background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" class="bi bi-caret-down-fill" viewBox="0 0 16 16"><path fill="DimGray" d="M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"/></svg>') no-repeat;
	background-color: #f8f8f8;
	box-shadow:0px 0px 8px 0px DimGray inset;
}