:root {
/* Browser Overrides */

	--scrollbar-radius:10px;
	--scrollbar-bg-color:#F1F1F1;
	--scrollbar-thumb-color:#888888;
	--scrollbar-thumb-radius:10px;
	--scrollbar-thumb-hover:#555555;

	--scrollbar-dark-bg-color:#2e2e2e;
	--scrollbar-dark-thumb-color:#555;
	--scrollbar-dark-thumb-radius:10px;
	--scrollbar-dark-thumb-hover:#888;


	--text-input-bg-color:#FFFFFF;
	--text-input-border:#CCCCCC;
	--text-input-color:var(--main-text-color);

	--text-input-dark-bg-color:#000000;
	--text-input-dark-border:#333333;


	--record-row-bg-color:rgba(255,255,255,0.6);
	--record-row-hover-bg-color:#f2f2f2;

	--record-row-dark-bg-color:rgba(40,40,40,0.6);
	--record-row-dark-hover-bg-color:rgba(20,20,20,1);

	--paginator-inactive-bg-color:#EEEEEE;
	--paginator-inactive-color:#CCCCCC;
	--paginator-inactive-border:#CCCCCC;


	--footer-icon-bg-color:transparent;
	--footer-icon-color:var(--footer-color);
	--footer-icon-border:var(--footer-color);

	--footer-icon-hover-bg-color:transparent;
	--footer-icon-hover-color:var(--footer-color);
	--footer-icon-hover-border:var(--footer-color);




/* Widget Stuff */

	--light-dark-toggle-bg-color:transparent;
	--light-dark-toggle-hightlight-day:var(--primary-color);
	--light-dark-toggle-hightlight-auto:var(--highlight-color);
	--light-dark-toggle-hightlight-dusk:var(--dark-primary-color);
	--light-dark-toggle-border:var(--primary-color);
	--light-dark-toggle-label:var(--dark-primary-color);
	--light-dark-selected:#FFFFFF;
	--light-dark-toggle-color-day:var(--light-dark-selected);
	--light-dark-toggle-color-dusk:var(--light-dark-selected);
	--light-dark-toggle-color-auto:var(--light-dark-selected);
	--light-dark-toggle-bottom: calc(var(--footer-height) * 0.5 - 16px);

	--light-dark-toggle-bottom: 0px;

	--light-dark-toggle-scale:1.0;
}




:root.el-dark{

	--text-input-bg-color:var(--text-input-dark-bg-color);
	--text-input-border:var(--text-input-dark-border);

	--record-row-bg-color:var(--record-row-dark-bg-color);
	--record-row-hover-bg-color:var(--record-row-dark-hover-bg-color);

	--scrollbar-bg-color:var(--scrollbar-dark-bg-color);
	--scrollbar-thumb-color:var(--scrollbar-dark-thumb-color);
	--scrollbar-thumb-radius:var(--scrollbar-dark-thumb-radius);
	--scrollbar-thumb-hover:var(--scrollbar-dark-thumb-hover);

	--paginator-inactive-bg-color:#111111;
	--paginator-inactive-color:#444444;
	--paginator-inactive-border:#444444;

}

html{height:100%;}
body{height:100%;}


.text, textarea{
	background-color: var(--text-input-bg-color);
	border: 1px solid var(--text-input-border);
	color: var(--text-input-color);
}

.footer-icon{
	width: 20px;
	height: 20px;
	line-height: 20px;
	display: flex;
	font-size: 0.875rem;
	align-items: center;
	justify-content: center;
	border-radius: 3px;
	transform-origin: center;
	transition: all 100ms ease-in-out;
	background-color: var(--footer-icon-bg-color);
	color:var(--footer-icon-color);
	border: 1px solid var(--footer-icon-border);
	transform-origin: center;
}

.footer-icon:hover{
	transform: scale(1.2);
	background-color: var(--footer-icon-hover-bg-color);
	color:var(--footer-icon-hover-color);
	border: 1px solid var(--footer-icon-hover-border);
}


/*----------------------------------------- SYSTEM WIDGETS */


/* Light/Dark Toggle */
.light-dark-toggle {
	background: var(--light-dark-toggle-bg-color);

	border-radius:16px;
/*
	border-top-left-radius: 16px;
	border-top-right-radius: 16px;
	border-bottom: 0px;
*/
	border: 2px solid var(--light-dark-toggle-border);

	width: 80px;
	min-width: 80px;
	margin: 0 auto;
	height: 33px;
	position: absolute;
	bottom: var(--light-dark-toggle-bottom);
	left: 50%;
	transform: translate(-50%, 0) scale(var(--light-dark-toggle-scale));
	padding:0px 2px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	line-height: normal;

}


.light-dark-toggle label {
	padding:0;
	z-index:2;

	flex:1;
	transition:all 0.3s ease-in-out;
	color:var(--light-dark-toggle-label);
	height: 22px;
	width: 22px;
	display: flex;
	align-items: center;
	justify-content: center;

}
.light-dark-toggle label i{
	font-size:16px!important;

}

.light-dark-toggle label.xlight-dark-selected i{
	Xcolor: var(--light-dark-selected);
}

.light-dark-toggle input {
	position: absolute!important;
	z-index: 3;
	opacity: 0;
	cursor: pointer;
	height: 22px;
	width: 22px;
	padding:0!important;
	margin:0!important;
	transform: none!important;
	bottom:initial!important;
}

.light-dark-toggle span {
	height: 23px;
	width: 23px;
	border-radius: 50%;
	background:#fff;
	display:block;
	position:absolute;
	transition:all 0.3s ease-in-out;

}

.light-dark-toggle input[value="day"]:checked ~ span{
	background:var(--light-dark-toggle-hightlight-day);
	left: 3px;
}

.light-dark-toggle input[value="auto"]:checked ~ span{
	background:var(--light-dark-toggle-hightlight-auto);
	left: calc(50% - (23px / 2));
	top: calc(50% - (23px / 2));
}

.light-dark-toggle input[value="dusk"]:checked ~ span{
	background:var(--light-dark-toggle-hightlight-dusk);
	left: 50px;
}


.light-dark-toggle input[value="day"]:checked + label{
	color:var(--light-dark-toggle-color-day);
}
.light-dark-toggle input[value="dusk"]:checked + label{
	color:var(--light-dark-toggle-color-dusk);
}
.light-dark-toggle input[value="auto"]:checked + label{
	color:var(--light-dark-toggle-color-auto);
}

.light-dark-toggle .fa{

}


#light-dark-day-input{
	left:5px;
}

#light-dark-auto-input{
	left:28px;
}

#light-dark-dusk-input{
	left:52px;
}

#light-dark-dusk{
	transform: translateX(-1px);
}

.boing-animation {
	animation: boing 0.4s ease-in-out forwards;
}


@keyframes boing {
	0%   {transform: scale(1);}
	30%  {transform: scale(2);}
	50%  {transform: scale(2);}
	70%  {transform: scale(1.8);}
	100% {transform: scale(1);}
}


.small-content .light-dark-toggle{
	border:none;
	right:-5px;
	bottom:0px;
	transform: translate(0%, 0) scale(var(--light-dark-toggle-scale));
	left:auto;
}

.small-content .light-dark-toggle input[value="day"]:checked ~ span{
	left: 3px;
}

.small-content .light-dark-toggle input[value="dusk"]:checked ~ span{
	left: 53px;
}

/* Light/Dark Toggle End */


/* Date Picker */

.el-datepicker{
	padding:5px;
	background-color:#f1f1f1;
	display:flex;
	flex-direction: column;  
}

.el-dp-prev{
	height:24px;
	width:24px;
	cursor: pointer;
}

/* Date Picker End */

/*----------------------------------------- SYSTEM WIDGETS END */


/* Customize the scrollbar */
::-webkit-scrollbar {
	width: 10px;
	height:10px;
}

/* Track (background of the scrollbar) */
::-webkit-scrollbar-track {
	background: var(--scrollbar-bg-color);
	border-radius: var(--scrollbar-radius);
}

/* Thumb (scroll handle) */
::-webkit-scrollbar-thumb {
	background-color: var(--scrollbar-thumb-color); 
	border-radius: var(--scrollbar-thumb-radius);
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
	background-color: var(--scrollbar-thumb-hover); 
}
/* Moz */
scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-bg-color);  /* thumb color, track color */
scrollbar-width: thin;