:root {
	--col-0: 34, 34, 34;			/* gri inchis */
	--col-1: 255, 51, 244;		/* roz aprins */
	--col-2: 9, 255, 243;		/* teal deschis */
	--col-3: 255, 160, 45;		/* orange */
	--col-4: 1, 255, 133;		/* verde */
	--white: 255, 255, 255;
	--black: 0, 0, 0;

	--gap: calc( 1vmin );
	--border-radius: 6px;
	
	--opacity-low: .2;
	--opacity-moderate: .4;
	--opacity-high: .8;
	--opacity-full: 1;
}

select,
select option
	{
		background-color: rgba( var( --col-0 ), 1 );
		color: rgba( var( --white ), 1 );
	}
select[multiple] option:checked {
	background-color: rgba( var( --white ), .5 );
	color: rgba( var( --black ), 1 );
}

.col-0 { filter: invert(0%) sepia(0%) saturate(46%) hue-rotate(165deg) brightness(97%) contrast(73%); }
.col-1 { filter: invert(36%) sepia(45%) saturate(5706%) hue-rotate(285deg) brightness(107%) contrast(106%); }
.col-2 { filter: invert(76%) sepia(83%) saturate(482%) hue-rotate(104deg) brightness(110%) contrast(101%); }
.col-3 { filter: invert(81%) sepia(44%) saturate(4322%) hue-rotate(337deg) brightness(104%) contrast(101%); }
.col-4 { filter: invert(71%) sepia(55%) saturate(710%) hue-rotate(91deg) brightness(98%) contrast(109%); }

.cycle { border-radius: calc( var( --border-radius ) ); padding: calc( var( --gap ) / 4 ); }
.cycle.on:nth-of-type( odd ) { background-color: rgba( var( --white ), .00 ); }
.cycle.on:nth-of-type( even ) { background-color: rgba( var( --white ), .05 ); }

.al-ctr { justify-self: center; }

* {
	margin: 0;
	padding: 0;
	outline: none;
/* 	font-weight: normal !important; */
	letter-spacing: 1px;
/* 	text-transform: uppercase !important; */
/* 	transition: all .25s ease; */
}
html {
	height: 100%;
	box-sizing: border-box;
	font-size: 14px;
	line-height: 24px;
	padding: 0rem;
	margin: 0rem;
}
@media screen and ( max-width: 960px ) {
	html {
		font-size: 16px;
	}
}
body {
	min-height: 100%;
	box-sizing: border-box;
	padding: 0rem;
	margin: 0rem;
	font-family: 'Roboto';
	touch-action: pan-x pan-y;
}

hr {
	margin: calc( var( --gap ) * 2 ) 0;
	height: 1px;
	background-color: rgba( var( --col-3 ), .5 );
	border: none;
}

html * {
	box-sizing: border-box;
}

.cx-modal {
	backdrop-filter: blur( calc( var( --gap ) / 2 ) ) brightness( 30% );
	-webkit-backdrop-filter: blur( calc( var( --gap ) / 2 ) )  brightness( 30% );
	z-index: 100;
	position: fixed;
	top: 0px;
	right: 0px;
	bottom: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	overflow: auto;
	display: grid;
	grid-template-rows: 1fr;
    grid-template-columns: 1fr;
    justify-items: center;
    padding: calc( var( --gap ) * 6 );
}
.cx-modal > div {
	border-radius: var( --border-radius );
	border: 1px solid rgba( var( --black ), 1 );
	background-color: rgba( var( --white ), 1 );
	color: rgba( var( --col-3 ), 1 );
	align-self: center;
	padding: calc( var( --gap ) * 3 ) calc( var( --gap ) * 6 );
	font-variant: all-petite-caps;
	font-weight: bold;
	font-size: 1.6em;
	line-height: 2em;
	margin-bottom: calc( var( --gap ) * 6 );
	text-align: center;
	width: 90%;
	max-width: 800px;
}

.err { box-shadow: 0px 0px 2px 2px rgba( var( --col-1 ), .75 ); }

.menux { text-transform: uppercase; }

.itm {
	margin: calc( var( --gap ) / 2 ) 0;
	border: 1px solid rgba( var( --col-3 ), .25 );
	border-radius: var( --border-radius );
	min-height: 60px;
	font-size: 1em;
	color: rgba( var( --white ), 1 );
}
.itm > div {
	padding: calc( var( --gap ) / 2 ) calc( var( --gap ) / 1 );
}
.head { border: 1px solid rgba( var( --col-3 ), .75 ); border-radius: var( --border-radius ); margin-bottom: calc( var( --gap ) * 2 ); position: sticky; top: 0; background-color: rgba( var( --col-0 ), .75 ); backdrop-filter: blur( 4px ) grayscale( 100% ) opacity( 100% ); z-index: 2; }
.head .itm { border: none; background-color: transparent; }
.itm * { /*font-size: 1em;*/ color: rgba( var( --white ), 1 ); }

.a { display: flex; padding: 1.5vmin; background: rgba( 255, 255, 255, .3 ); margin-top: .5vmin; border: 1px solid rgba( 0, 0, 0, .3 ); border-radius: 6px; align-items: center; }

.grid { display: grid !important; grid-gap: calc( var( --gap ) ); grid-template-columns: repeat( 12, 1fr ) ; grid-template-rows: 1fr; position: relative; }
.grid > * { min-height: 100%; }
.grid input { text-indent: var( --gap ); background-color: rgba( var( --col-3 ), .25 ) !important; border-radius: var( --border-radius ); border: 1px solid rgba( var( --white ), .25 ); padding: 0 calc( 100% / 12 * 3 ); text-align: center; }
.grid input:focus { border: 1px solid rgba( var( --white ), .75 ); }
	.grid .span-1 { grid-column: span 1; display: grid; align-items: center; background-color: transparent; }
	.grid .span-2 { grid-column: span 2; display: grid; align-items: center; background-color: transparent; }
	.grid .span-3 { grid-column: span 3; display: grid; align-items: center; background-color: transparent; }
	.grid .span-4 { grid-column: span 4; display: grid; align-items: center; background-color: transparent; }
	.grid .span-5 { grid-column: span 5; display: grid; align-items: center; background-color: transparent; }
	.grid .span-6 { grid-column: span 6; display: grid; align-items: center; background-color: transparent; }
	.grid .span-7 { grid-column: span 7; display: grid; align-items: center; background-color: transparent; }
	.grid .span-8 { grid-column: span 8; display: grid; align-items: center; background-color: transparent; }
	.grid .span-9 { grid-column: span 9; display: grid; align-items: center; background-color: transparent; }
	.grid .span-10 { grid-column: span 10; display: grid; align-items: center; background-color: transparent; }
	.grid .span-11 { grid-column: span 11; display: grid; align-items: center; background-color: transparent; }
	.grid .span-12 { grid-column: span 12; display: grid; align-items: center; background-color: transparent; }

.stick {
	position: sticky;
	top: 0;
	backdrop-filter: blur( calc( var( --gap ) / 2 ) ) brightness( 30% );
	-webkit-backdrop-filter: blur( calc( var( --gap ) / 2 ) )  brightness( 30% );
	z-index: 1;
	border-bottom: 1px solid rgba( var( --col-3 ), .5 );
	padding: calc( var( --gap ) *2 ) 0;
	border-radius: inherit;
}

.lft, .total, .rgt { background-color: rgba( var( --col-0 ), .5 ); padding: 0 2px; font-variant-numeric: tabular-nums; font-size: calc( min( var( --gap ) * 2, 1em ) ); }
.lft::before, .total::before, .rgt::before { font-variant: small-caps; content: attr( txt ); }
.lft, .rgt { z-index: -1; position: absolute !important; top: 0; bottom: 0; width: calc( 100% / 12 * 3 ) !important; }
.lft { left: 0; color: rgba( var( --col-3 ), .75 ); border-right: 1px solid rgba( var( --white ), .125 ); color: rgba( var( --col-1 ), .75 ); }
.rgt { right: 0; color: rgba( var( --col-3 ), .75 ); border-left: 1px solid rgba( var( --white ), .125 ); color: rgba( var( --col-4 ), .75 ); }
.total { color: rgba( var( --col-4 ), .75 ); font-weight: bold; }
.itm div.focusable .lft, .itm div.focusable .rgt { opacity: .5; text-shadow: none; }
.itm div.focusable.focus .lft, .itm div.focusable.focus .rgt { opacity: 1; text-shadow: 0px 0px 4px rgba( var( --black ), 1 ); }
.vgrid { display: grid; grid-gap: calc( var( --gap ) / 2 ); grid-template-columns: 1fr; grid-template-rows: repeat( 2, 1fr ); justify-items: center; position: relative; width: 100%; }
.vgrid div:nth-of-type( 1 ) { align-self: end; }
.vgrid div:nth-of-type( 2 ) { align-self: start; }

.allow,
.deny {
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
	min-height: calc( var( --gap ) * 2 );
	min-width: calc( var( --gap ) * 2 );
	opacity: var( --opacity-moderate );
	width: calc( var( --gap ) * 6 );
	min-width: 40px;
	max-width: 80px;
	align-self: center;
	justify-self: center;
}
.on .allow, .on .deny { opacity: var( --opacity-full ); cursor: pointer; }
.itm.allow, .itm.deny { background-image: none; opacity: var( --opacity-full ); }
.allow { background-image: url( "//clock.cronosapp.ro/components/-static/icns/allow.svg" ); }
.deny { background-image: url( "//clock.cronosapp.ro/components/-static/icns/deny.svg" ); }

.itm.allowed { border: 1px solid rgba( var( --col-4 ), var( --opacity-moderate ) ); }
.itm.denied { border: 1px solid rgba( var( --col-1 ), var( --opacity-moderate ) ); }

body .ui-widget-content {
	color: rgba( var( --col-4 ), .75 );
	background-color: rgba( var( --col-0 ), .75 );
	backdrop-filter: blur( 4px ) grayscale( 100% ) opacity( 100% );
}

.cx-new {
  --borderWidth: 3px;
  background: #1D1F20;
  position: relative;
  border-radius: var( --borderWidth );
  padding: calc( var( --gap ) / 2 );
}
.cx-new:after {
  content: '';
  position: absolute;
  top: calc(-1 * var( --borderWidth ) );
  left: calc( -1 * var( --borderWidth ) );
  height: calc( 100% + var( --borderWidth ) * 2 );
  width: calc( 100% + var( --borderWidth ) * 2 );
  background: linear-gradient( 60deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82 );
  border-radius: calc( 2 * var( --borderWidth) );
  z-index: -1;
  animation: cx-new 3s ease alternate infinite;
  background-size: 300% 300%;
}


@keyframes cx-new {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}