/* ////////// */
/* Dark Theme */
/* ////////// */

/* Themes are WIP and being integrated from v3.4 on. */
/* Once the migration is complete for the whole UI, this update will be added to the changelog. */

:root{
	color-scheme: dark;
  
	--color-text: rgb(255 255 255);
	--color-text-inverted: rgb(0 0 0);
	--color-text-dimmed: rgb(140, 140, 140);
	--color-dimmed: rgba(0, 0, 0, 0.3);
	--color-dimmed-more: rgba(0, 0, 0, 0.6);
	--color-dimmed-less: rgba(0, 0, 0, 0.15);
	
	--color-elevated: rgba(255, 255, 255, 0.1);
	--color-elevated-more: rgba(255, 255, 255, 0.15);
	--color-elevated-less: rgba(255, 255, 255, 0.05);
	--color-sunken: rgba(0, 0, 0, 0.15);
	--color-sunken-more: rgba(0, 0, 0, 0.3);
	--color-sunken-less: rgba(0, 0, 0, 0.05);
	
	--color-fg-primary: rgb(190 190 190);
	--color-fg-secondary: rgb(255 255 255);
	
	--color-bg-0: rgb(20 20 20);
	--color-bg-1: rgb(40 40 43);
	--color-bg-1-alt: rgb(35 35 37);
	--color-bg-2: rgb(55 55 58);
	--color-bg-2-alt: rgb(50 50 53);
	--color-bg-2-alt-1: rgb(65 65 68);
	--color-bg-3: rgb(45 45 48);
	
	--color-border-1: rgb(46 46 48);
	--color-border-2: rgb(65 65 68);
}


/* /////////// */
/* Backgrounds */
/* /////////// */

/* *-tp (transparent) backgrounds equal their respective sibling when being put on top of a ONE less level background */
/* In development it can be chosen between one of both, depending on the elements behavior (maybe transparent is preferred for draggable elements) */
/* If not necessary, solid should be chosen over transparent */

/* Main BG */
.color-bg-lvl-0{
	background-color: var(--color-bg-0);
}

/* Wrapper BG */
.color-bg-lvl-1{
	background-color: var(--color-bg-1);
}


/* Container BG */
.color-bg-lvl-2{
	background-color: var(--color-bg-2);
}

/* Container BG transparent */
.color-bg-lvl-2-tp,
.color-bg-lvl-2-tp-hover:hover,
.color-bg-lvl-2-tp-hover:active,
.color-bg-lvl-2-tp-hover:focus{
	background-color: rgba(255, 255, 255, 0.07);
}

/* Container BG transparent on active*/
.color-bg-lvl-2-tp-active.active{
	background-color: rgba(255, 255, 255, 0.07);
}

/* Container BG alternative 1 (slightly brighter) */
.color-bg-lvl-2-alt-1{
	background-color: rgb(62, 62, 62);
}

/* Container BG alternative 1 (slightly brighter) transparent */
.color-bg-lvl-2-alt-1-tp{
	background-color: rgba(255, 255, 255, 0.1);
}

/* Container BG alternative 2 (slightly darker) */
.color-bg-lvl-2-alt-2{
	background-color: rgb(48, 48, 48);
}

/* Container BG alternative 2 (slightly darker) transparent */
.color-bg-lvl-2-alt-2-tp,
.color-bg-lvl-2-alt-2-tp-hover:hover,
.color-bg-lvl-2-alt-2-tp-hover:active,
.color-bg-lvl-2-alt-2-tp-hover:focus{
	background-color: rgba(255, 255, 255, 0.05);
}

/* Sub-Container BG */
.color-bg-lvl-3,
.color-bg-lvl-3-hover:hover,
.color-bg-lvl-3-hover:active,
.color-bg-lvl-3-hover:focus{
	background-color: var(--color-bg-3);
}

/* Sub-Container BG transparent */
.color-bg-lvl-3-tp{
	background-color: rgba(0, 0, 0, 0.1);
}

/* Sub-Container BG alternative 1 (not as dark) */
.color-bg-lvl-3-alt-1{
	background-color: rgb(50, 50, 50);
}

/* Sub-Container BG alternative 1 (not as dark) transparent */
.color-bg-lvl-3-alt-1-tp{
	background-color: rgba(0, 0, 0, 0.1);
}

/* Sub-Container BG 2 */
.color-bg-lvl-4{
	background-color: rgb(50, 50, 50);
}

/* Sub-Container BG 2 transparent */
.color-bg-lvl-4-tp{
	background-color: rgba(0, 0, 0, 0.1);
}


/* /////// */
/* Borders */
/* /////// */

/* Sub-Container */
.color-border-lvl-2{
	border-width: 1px;
	border-style: solid;
	border-color: var(--color-bg-2-alt-1);
}

/* Sub-Container */
.color-border-lvl-3{
	border-width: 1px;
	border-style: solid;
	border-color: rgb(50, 50, 50);
}

/* Sub-Container transparent */
.color-border-lvl-3-tp{
	border-width: 1px;
	border-style: solid;
	border-color: rgba(0, 0, 0, 0.2);
}


/* ///////// */
/* jQuery UI */
/* ///////// */

.ui-tooltip{
	background-color: var(--color-bg-0);
	border-color: var(--color-bg-1);
}

.ui-menu-item{
	border-color: rgb(30, 30, 30);
}

.ui-selectmenu-optgroup{
	background-color: rgb(70, 70, 70);
}

.ui-selectmenu-menu{
	background-color: rgb(50, 50, 50);
	border-color: rgb(30, 30, 30);
}

.ui-selectmenu-button{
	background-color: rgba(0, 0, 0, 0.15);
	border-color: rgba(0,0,0,0.2);
}


/* /////////////// */
/* Custom elements */
/* /////////////// */

td.calendar-day,
td.calendar-hour,
td.calendar-quarter{
	background-color: rgba(0,0,0,0.15);
	border-color: transparent;
}

td.calendar-day-head{
	border-color: transparent;
}

td.calendar-hour{
	background-color: rgba(255,255,255,0.05);
}


/* ///////// */
/* SVG Icons */
/* ///////// */

button.svg{
	color: var(--color-text);
}