/* == DIV ============================================ */
div.zDialogHeader {
	display: flex;
	flex-direction: row;
	align-items: center;
	width: 100%;
	height: var(--dialog-titlebar-height);
	padding-left: var(--spacing-default-size);
	background-color: var(--background-dialogHeader-color);
	color: var(--font-dialogHeader-color);
	font-family: var(--dialog-titlebar-font-family);
	font-size: var(--dialog-titlebar-font-size);
}
div.zDialogContainer {
	display: flex;
	height: min-content;
	padding: 10px;
	background-color: var(--background-block-color);
	color: var(--font-default-color);
	overflow: auto;
}
div.zDialogContainer:not(.alert) {
	flex-direction: column;
}
div.zDialogContainer.zDialogAlert {
	flex-direction: row;
	padding: var(--spacing-xlarge-size);
}
div.zDialogAlertMsg {
	display: flex;
	align-items: center;
}
div.zDialogInfoMsg {
	display: flex;
	align-items: center;
}
div.zDialogButtonZone {
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	margin-top: var(--spacing-default-size);
}

/* == BUTTON ========================================= */
button.zButton {
   display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
   height: var(--field-height);
	border: 1px solid var(--border-default-color);
   padding: 0 var(--spacing-default-size);
	border-radius: var(--button-std-border-radius);
	box-shadow: var(--button-shadow-offset-x) var(--button-shadow-offset-y) var(--button-shadow-blur-radius) var(--shadow-default-color);
}
/*
button.zButton1, button.zButton2, button.zButton3 {
   display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	border: 1px solid var(--border-default-color);
   padding: 0 3px;
	border-radius: var(--button-std-border-radius);
	box-shadow: var(--button-shadow-offset-x) var(--button-shadow-offset-y) var(--button-shadow-blur-radius) var(--shadow-default-color);
}
*/
button.zButton1 {
	height: var(--field-height);
}
button.zButton2 {
	height: calc(2*var(--field-height) + var(--spacing-default-size))
}
button.zButton3 {
	height: calc(3*var(--field-height) + 2*var(--spacing-default-size))
}

button.zButtonTextStd:active {
	font-family: var(--font-button-family);
	font-size: var(--button-std-font-size);
	background-color: var(--background-button-color);
	color: var(--font-button-color);
}

button.zButtonImageStd {
	font-family: var(--font-button-family);
	font-size: var(--button-std-font-size);
	background-color: var(--background-button-color);
	color: var(--font-button-color);
}
button.zButton:hover, button.zButton1:hover, button.zButton2:hover, button.zButton3:hover {
	filter: brightness(90%) saturate(90%);
	cursor: pointer;
	-webkit-transition: filter .2ms ease-in-out;
	-ms-transition: filter .2ms ease-in-out;
	transition: filter .2s ease-in-out;
}
button.zButton:active {
	transform: translate(1px, 1px);
	box-shadow: none;
}

.h2 {
	height: calc(2*var(--field-height) + var(--spacing-default-size));
}
.h3 {
	height: calc(3*var(--field-height) + 2*var(--spacing-default-size));
}

/* == IMAGE ========================================== */
img.zIconzButtonImageLeft {
   height: calc(var(--button-std-height) - 6px);
   margin-right: var(--spacing-small-size);
}
img.zIconzButtonImageRight {
   height: calc(var(--button-std-height) - 6px);
   margin-left: var(--spacing-small-size);
}
img.zIconzButtonImage {
   height: calc(var(--button-std-height) - 6px);
}

img.zButtonImage {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
   height: calc(var(--button-std-height) - 6px);
	background-color: var(--background-button-color);
	border: 1px solid var(--border-default-color);
   padding: 2px;
	border-radius: var(--button-std-border-radius);
	box-shadow: var(--button-shadow-offset-x) var(--button-shadow-offset-y) var(--button-shadow-blur-radius) var(--shadow-default-color);
}
img.zButtonImage:hover {
	filter: brightness(90%) saturate(90%);
	cursor: pointer;
}
img.zButtonImage:active {
	transform: translate(1px, 1px);
	box-shadow: none;
}

img.zImgDialogClose {
	height: calc(var(--dialog-titlebar-height) - 2px);
	margin-right: 2px;
}
img.zImgDialogClose:hover {
	filter: brightness(115%) saturate(110%);
	cursor: pointer;
}

/* == INPUT ========================================== */
input.zInputField {
	font-family: var(--font-default-family);
	font-size: var(--font-default-size);
	height: var(--field-height);
	border: 1px solid var(--border-default-color);
}
input.zInputField:read-only {
	font-style: italic;
	color: var(--font-readonly-color);
}
/* == SELECT ========================================= */
select.zSelectorField {
	font-family: var(--font-default-family);
	font-size: var(--font-default-size);
	height: var(--field-height);
	border: 1px solid var(--border-default-color);
}

/* == DIALOG ========================================= */
dialog.zDialog{
	/*display: flex;*/
	flex-direction: column;
	margin: 0;
	padding: 0;
	border: 3px solid var(--border-default-color);
	border-radius: 6px;
}
dialog.zDialog.info {
	box-shadow: 0 0 10px 1px cyan;
}
dialog.zDialog.query {
	box-shadow: 0 0 10px 1px yellow;
}
dialog.zDialog.alert {
	box-shadow: 0 0 10px 1px red;
}
dialog.zDialog:modal {
	overflow: unset;
}
dialog.zDialog::backdrop {
	background-color: Black;
	filter: opacity(50%)
}

/* == MISCELLANOUS =================================== */
.z_color-inblock {
	background-color: var(--background-field-color);
	color: var(--font-field-color);
}

/* == SPEC =========================================== */
/* PALETTE SWITCHER */
#paletteSwitcher
{
    display: none;
}
label.z_paletteSwitcher
{
	display: block;
	width: 58px;
	height: 26px;
	margin: 0 auto;
	background-color: #77b5fe;
	border-radius: 26px;
	/*transform: translateY(-50%);*/
	cursor: pointer;
	transition: 0.3s ease background-color;
	overflow: hidden;
}

#star
{
    position: relative;
    top: 7px;
    left: 7px;
    width: 10px;
    height: 10px;
    /*background-color: #fafd0f;*/
    transform: scale(1);
    border-radius: 50%;
    transition: 0.3s ease top, 0.3s ease left, 0.3s ease transform, 0.3s ease background-color;
    z-index: 1;
}

#star-1
{
    position: relative;
}

.star
{
    top: 6px;
    left: -4px;
    font-size: 26px;
    line-height: 0px;
    color: #fafd0f;
    transition: 0.3s ease color;
}

#moon
{
    position: relative;
    bottom: -26px;
    right: -35px;
    width: 20px;
    height: 20px;
    background-color: #fff;
    border-radius: 50%;
    transition: 0.3s ease bottom;
}

#moon:before
{
    content: "";
    position: absolute;
    top: -5px;
    right: 6px;
    width: 20px;
    height: 20px;
    background-color:#03a9f4;
    border-radius: 50%;
    transition: 0.3s ease background-color;
}

#paletteSwitcher:checked + label
{
    background-color: #000;
}

#paletteSwitcher:checked + label #star
{
    top: 1px;
    left: 32px;
    transform: scale(0.3);
    background-color: yellow;
}

#paletteSwitcher:checked + label .star
{
    color: yellow;
}

#paletteSwitcher:checked + label #moon
{
    bottom: 7px;
}

#paletteSwitcher:checked + label #moon:before
{
    background-color: #000;
}

/* DROPDOWN */
/* Dropdown Button */
.zButtonDrop {
   display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	height: var(--field-height);
	border: 1px solid var(--border-default-color);
	padding: 0 var(--spacing-default-size);
	border-radius: var(--button-std-border-radius);
	box-shadow: var(--button-shadow-offset-x) var(--button-shadow-offset-y) var(--button-shadow-blur-radius) var(--shadow-default-color);

	background-color: #3498DB;
	color: white;
	cursor: pointer;
}
 
/* Dropdown button on hover & focus */
.zButtonDrop:hover {
	filter: brightness(90%) saturate(90%);
	cursor: pointer;
	-webkit-transition: filter .275ms ease-in-out;
	-ms-transition: filter .275ms ease-in-out;
	transition: filter .3s ease-in-out;
}
 
 /* The container <div> - needed to position the dropdown content */
 .dropdown {
	position: relative;
	display: inline-block;
 }
 
 /* Dropdown Content (Hidden by Default) */
 .dropdown-content {
	display: none;
	position: absolute;
	transform: translate(6px);
	font-size: var(--font-small-size);
	background-color: #f1f1f1;
	min-width: 160px;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	z-index: 1;
 }
 
/* Show the dropdown menu */
.dropdown:hover .dropdown-content {
	display: block;
}

 /* Links inside the dropdown */
 .dropdown-content a {
	color: black;
	padding: 4px 10px;
	text-decoration: none;
	display: block;
 }
 
 /* Change color of dropdown links on hover */
 .dropdown-content a:hover {background-color: #ddd;}
 