/***************************
Variables
***************************/
:root {
    --x: 0.5;
	--y: 0.5;

    --qt: 1;
    --qb: 0;
    --ql: 0;
    --qr: 0;
    
    --top: auto;
    --bottom: 100%;
    --left: 50%;
    --right: auto;

    --background-color: rgb(58, 58, 58);
    --background-color-subtle: rgb(62, 62, 62);
    --background-color-subtle-dark: rgb(51, 51, 51);
    --background-color-modal: rgba(0, 0, 0, 0.9);
    --background-color-input: rgb(105, 105, 105);
    --background-color-input-invalid: rgb(141, 87, 95);
    --background-color-input-invalid-subtle: rgba(71, 44, 48);
    --background-color-tooltip: rgba(85, 85, 85, 0.9);

    --foreground-color: rgb(184, 184, 184);
    --foreground-color-active: white;
    --foreground-color-superactive: lightblue;
    --foreground-color-inactive: rgb(117, 117, 117);
    --foreground-color-editable: white;
    --foreground-color-placeholder: rgb(165, 165, 165);
    --foreground-color-button: rgb(121, 117, 102);
    --foreground-color-button-hover: lightblue;
    --foreground-color-button-remove: rgb(252, 140, 156);
    --foreground-color-button-remove-hover: rgb(255, 196, 206);
    --foreground-color-protocol: rgb(137, 131, 156);
    --foreground-color-protocol-hover: rgb(230, 223, 255);
    --foreground-color-header: lightgoldenrodyellow;
    --foreground-color-subheader: rgb(236, 236, 236);
    --foreground-color-alert-1: rgb(212, 199, 149);
    --foreground-color-alert-2: rgb(207, 120, 70);
    --foreground-color-alert-3: rgb(153, 70, 70);

    --scrollbar-width: 10px;

    --padding: 10px !important;
    --padding-1x: 20px !important;
    --padding-2x: 40px !important;
    --padding-minor: 3px !important;

    --height: 20px;
    --height-2x: 40px;
    --height-4x: 120px;
    --height-10x: 400px;
    
    --width: 300px;
    --width-1x: 400px;
    --width-2x: 600px;

    --radius: 3px;
}

/***************************
Themes
***************************/
/* Light Theme TODO: Set the variables */

/***************************
Body
***************************/
body {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: small;
    background-color: var(--background-color);
    color: var(--foreground-color);
    margin: 0px;
    padding: 0px;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: auto;
    width: 100%;
    height: 100%;
}

content {
    display: block;
    position: relative;
}

/* Body Header */
main-header {
    display: block;
    position: relative;
    margin: var(--padding);
    word-wrap: break-word;
    word-break: normal;
    white-space: normal;
    color: var(--foreground-color-header);
    border-bottom-style: dotted;
    border-bottom-width: 1px;
    border-bottom-color: var(--foreground-color);
}

main-header > content:last-child {
    margin-bottom: var(--padding-minor);
}

/* Body Content */
main-body {
    display: block;
    flex-grow: 1;
    overflow-x: hidden;
    overflow-y: auto;
    margin: 0px;
    padding: 0px;
}

main-content {
    display: block;
    overflow: visible;
    margin: var(--padding);
    margin-top: 0px;
    margin-bottom: var(--height);
    padding-top: 0px;
}

/* Body Footer */
main-footer {
    display: block;
    position: relative;
    margin: var(--padding);
    word-wrap: break-word;
    word-break: normal;
    white-space: normal;
    border-top-style: dotted;
    border-top-width: 1px;
    border-top-color: var(--foreground-color);
}

main-footer > content:first-child {
    margin-top: var(--padding-minor);
}

/***************************
Scrollbar
***************************/
::-webkit-scrollbar {
    width: var(--scrollbar-width);
    padding: 0px;
    margin: 0px;
    position: relative;
}
::-webkit-scrollbar-track, ::-webkit-scrollbar-track-piece, ::-webkit-scrollbar-corner {
    background-color: rgba(0, 0, 0, 0);
}
::-webkit-scrollbar-thumb {
    background-color: var(--foreground-color-button);
    border-radius: var(--scrollbar-width);
}
::-webkit-scrollbar-button {
    display: none !important;
}

/***************************
Title
***************************/
title {
    display: inline-block;
    position: relative;
    margin: 0px;
    color: var(--foreground-color-subheader);
    white-space: nowrap;
    font-size: large;
    font-weight: 400;
    margin-right: var(--padding);
}

icon {
    display: inline-block;
    position: relative;
    margin: 0px;
    margin-right: var(--padding);
    margin-bottom: -4px;
    content: url("../icon.png");
    height: 20px;
    width: 20px;
}

/***************************
Header
***************************/
h1, h2, h3, h4, h5, h6 {
    margin: 0;
    margin-top: var(--padding);
    color: var(--foreground-color-subheader);
    white-space: nowrap;
}
h1 {
    margin-bottom: var(--padding);
}
h4 {
    margin-top: var(--padding-1x);
}

/***************************
Lists
***************************/
ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

li {
    list-style-type: none;
    padding: 0;
    margin: 0;
    /*margin-top: var(--padding-minor);
    margin-bottom: var(--padding);*/
}

/* Indent sublists */
/*li > ul {
    margin-left: var(--padding-2x);
}*/

/* When ul empty */
/*ul > h3:only-child, ul > h4:only-child, ul > h5:only-child, ul > h6:only-child {
    display: none !important;
}*/

/***************************
Flexboxes
***************************/
box {
    display: flex;
    flex-wrap: wrap;
    margin: 0px;
    padding: 0px;
}
/*span > box {
    margin-bottom: calc(var(--height) * -1);
}*/

.flex-3 {
    flex: 0 0 calc(33.3333% - var(--padding-minor)*0);
    margin-right: var(--padding-minor);
    margin-bottom: var(--padding-minor);
}

.flex-4 {
    flex: 0 0 calc(25% - var(--padding-minor)*2);
    margin-right: var(--padding-minor);
    margin-bottom: var(--padding-minor);
}

/***************************
Tables
***************************/
table {
    border-collapse: separate;
    border-spacing: 0 var(--padding-minor);
    position: relative;
    width: 100%;
    text-align: left;
}

/* Row */
/* Add dotted line above account table rows */
tr.table-section:not(:nth-child(2)) > * {
    border-top-style: dotted;
    border-top-width: 1px;
    border-top-color: var(--foreground-color);
}
/* Banded rows */
.banded-rows > tr:nth-child(even) > * {
    background-color: var(--background-color-subtle);
}
/* Highlight rows on hover */
.highlight-rows > tr:hover > * {
    background-color: var(--background-color-subtle-dark);
}

/* Header Cell */
th {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    background-color: var(--background-color);
    z-index: 1;
    border-bottom-style: dotted;
    border-bottom-width: 1px;
    border-bottom-color: var(--foreground-color);
    padding-right: var(--padding-minor);
    padding-bottom: var(--padding-minor);
}
th.table-modal {
    background-color: var(--background-color-modal);
}
/*tr:not(:first-child) > th.table-modal {
    padding-top: var(--padding-2x);
}*/

/* Data Cell */
td {
    position: relative;
    padding-right: var(--padding-minor);
    padding-bottom: var(--padding-minor);
    white-space: nowrap;
}
td > * {
    white-space: normal;
    word-wrap: break-word;
    word-break: break-all;
    overflow-wrap: break-word;
}

/* Empty cells */
th:empty, td:empty {
    padding-right: 0px;
    padding-left: 0px;
}

/***************************
Pre
***************************/
pre {
    overflow-x: auto;
    overflow-y: auto;
    white-space: pre-wrap;
    white-space: -moz-pre-wrap;
    white-space: -pre-wrap;
    white-space: -o-pre-wrap;
    word-wrap: break-word;
    word-break: break-word;
    overflow-wrap: break-word;
    padding-top: 0;
    margin-top: 0;
    max-height: var(--height-10x);
}
span > pre {
    margin-bottom: 0;
}
pre:hover {
    max-height: var(--height-10x);
}

/***************************
Label
***************************/
label {
    margin-top: var(--padding-minor);
    margin-bottom: var(--padding-minor);
    margin-right: var(--padding);
    min-height: var(--height);
}

/***************************
Input
***************************/
/* Defaults */
input, textarea {
    color: var(--foreground-color-editable);
    background-color: var(--background-color);
    /*margin-top: var(--padding-minor);
    margin-bottom: var(--padding-minor);*/
    margin: 0px;
    margin-right: var(--padding);
    outline: none !important;
    height: var(--height);
    border: 1px solid var(--background-color-input);
    border-radius: var(--radius);
    vertical-align: middle;
}
input:invalid, textarea:invalid {
    background-color: var(--background-color-input-invalid);
}

input:not([type=checkbox]), textarea {
    min-width: var(--width);
}
.input-extended:not([type=checkbox]), textarea {
    min-width: var(--width-1x);
}

/* Text */
input[type=text] {
    max-height: var(--height);
}

/* Text Area */
textarea {
    min-height: var(--height);
    min-width: var(--width-2x);
}
textarea:focus {
    min-height: var(--height-4x);
    min-width: var(--width-2x);
}

/* Checkbox */
input[type=checkbox] {
    position: relative;
    cursor: pointer;
    margin-right: var(--padding);
}
input[type=checkbox]:before, input[type=checkbox]:checked:before {
    content: "";
    display: block;
    position: absolute;
    width: 15px;
    height: 15px;
    top: 2px;
    left: 0;
    background-color: var(--background-color-input);
}
input[type=checkbox]:checked:after {
    content: "";
    display: block;
    width: 4px;
    height: 8px;
    border: solid var(--foreground-color-editable);
    border-width: 0 2px 2px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    position: absolute;
    top: 3px;
    left: 5px;
}
input[type=checkbox]:disabled {
    cursor: not-allowed;
}

/* Number */
/* Hide number up/down arrows */
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
    display: none;
}

/* Placeholder */
::placeholder {
    color: var(--foreground-color-placeholder);
}

/***************************
Buttons
***************************/
/* Defaults */
.button, a, select, .button-remove, .button-collapse, .button-subtle, .protocol, .button-inactive, .button-active, .button-superactive, .button-alert {
    color: var(--foreground-color-button);
    background-color: rgba(0, 0, 0, 0);
    margin-top: var(--padding-minor);
    margin-bottom: var(--padding-minor);
    margin-right: var(--padding);
    padding-top: var(--padding-minor);
    padding-bottom: var(--padding-minor);
    padding-right: var(--padding-minor);
    border: none !important;
    outline: none !important;
    text-decoration: none;
    cursor: pointer;
}
select {
    min-height: var(--height);
    background-color: rgba(0, 0, 0, 0);
}
.button:hover, a:hover, select:hover, select:active, select > option, select > option:hover, .button-collapse:hover {
    color: var(--foreground-color-button-hover);
}
select > option {
    background-color: var(--background-color);
}

/* Change margin to left if right align */
.ahright > .button, 
.ahright > a, 
.ahright > select, 
.ahright > .button-remove, 
.ahright > .button-collapse, 
.ahright > .button-subtle, 
.ahright > .protocol, 
.ahright > .button-inactive, 
.ahright > .button-active, 
.ahright > .button-superactive, 
.ahright > .button-alert,
.ahright > * > .button, 
.ahright > * > a, 
.ahright > * > select, 
.ahright > * > .button-remove, 
.ahright > * > .button-collapse, 
.ahright > * > .button-subtle, 
.ahright > * > .protocol, 
.ahright > * > .button-inactive, 
.ahright > * > .button-active, 
.ahright > * > .button-superactive, 
.ahright > * > .button-alert {
    margin-right: 0px;
    margin-left: var(--padding);
    padding-right: 0px;
    padding-right: var(--padding-minor);
}

/* Select Multiple */
select[multiple] {
    min-height: var(--height-4x);
}
fieldset {
    border: none !important;
    outline: none !important;
}

/* Subtle */
.button-subtle {
    color: var(--foreground-color);
    margin-top: 0px;
    margin-bottom: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
}
.button-subtle:hover {
    color: var(--foreground-color-editable);
}

/* Remove */
.button-remove {
    color: var(--foreground-color-button-remove);
}
.button-remove:hover {
    color: var(--foreground-color-button-remove-hover);
}

/* Collapse */
.button-collapse {
    margin-right: var(--padding-minor);
}

/* Custom url protocol */
.protocol {
    color: var(--foreground-color-protocol);
    white-space: nowrap;
}
.protocol:hover {
    color: var(--foreground-color-protocol-hover);
}

/* Inactive */
.button-inactive {
    color: var(--foreground-color-inactive);
    cursor: default; /*not-allowed;*/
}
.button-inactive:hover {
    color: var(--foreground-color-inactive);
}

/* Active */
.button-active {
    font-weight: bold;
    color: var(--foreground-color-active);
}
.button-active:hover {
    color: var(--foreground-color-active);
}

/* Super Active */
.button-superactive {
    font-weight: bold;
    color: var(--foreground-color-superactive);
}
.button-superactive:hover {
    color: var(--foreground-color-active);
}

/* Alert */
.button-alert {
    font-weight: bold;
    color: var(--foreground-color-alert-1);
}
.button-alert:hover {
    color: var(--foreground-color-active);
}

/***************************
Tooltip
***************************/
.tooltip {
    position: relative;
    display: inline-block;
    overflow: visible;
}
  
.tooltip .tooltiptext {
    visibility: hidden;
    width: 200px;
    background-color: var(--background-color-tooltip);
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px;
    position: absolute;
    z-index: 3;
    opacity: 0;
    transition: opacity 0.3s;
    overflow-wrap: normal;
    word-wrap: normal;
    word-break: normal;
    font-size: x-small;

    top: var(--top);
    bottom: var(--bottom);
    left: var(--left);
    right: var(--right);

    margin-top: calc(7px * var(--qt) + 7px * var(--ql) + 7px * var(--qr));
    margin-bottom: calc(7px * var(--qb));
    margin-left: calc(-115px * var(--qt) + -115px * var(--qb) + 7px * var(--ql));
    margin-right: calc(7px * var(--qr));
}
  
.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    transform: rotate(45deg);
    background-color: var(--background-color-tooltip);
    padding: 5px;

    top: calc(100% * var(--qb) + 0px * var(--qt) + 0px * var(--ql) + 0px * var(--qr));
    bottom: calc(0px * var(--qb) + 100% * var(--qt) + 100% * var(--ql) + 100% * var(--qr));
    left: calc(50% * var(--qb) + 50% * var(--qt) + 0px * var(--ql) + 100% * var(--qr));
    right: calc(50% * var(--qb) + 50% * var(--qt) + 100% * var(--ql) + 0px * var(--qr));

    margin-top: calc(-5px * var(--qb) + -5px * var(--qt) + 3px * var(--ql) + 3px * var(--qr));
    margin-left: calc(-3px * var(--ql) + -7px * var(--qr));

    border-radius: calc(500px * var(--qb)) calc(500px * var(--ql)) calc(500px * var(--qt)) calc(500px * var(--qr));
}
  
.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
    pointer-events: none;
}

.tooltiptext > * {
    max-height: none !important;
    overflow-x: none !important;
    overflow-y: none !important;
    padding-bottom: 0;
    margin-bottom: 0;
}
.tooltiptext > *::-webkit-scrollbar {
    display: none !important;
}

/***************************
Toast
***************************/
toast {
    width: 80vw;
    height: 30px;
    height: auto;
    max-height: var(--height-4x);
    overflow-y: auto;
    word-wrap: break-word;
    word-break: break-word;
    overflow-wrap: break-word;
    position: fixed;
    z-index: 5;
    left: 10vh;
    bottom: 0px;
    background-color: var(--background-color-modal);
    color: salmon;
    padding: 10px;
    text-align: center;
    font-size: small;
    cursor: pointer;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    animation-name: toast-animatebottom;
    animation-duration: 0.4s;
}
@keyframes toast-animatebottom {
    from {bottom: -300px; opacity: 0}
    to {bottom: 0; opacity: 1}
}
toast:hover {
    color: rgb(255, 171, 162);
    background-color: rgb(78, 90, 102);
}

/***************************
Modal
***************************/
/* Modal */
modal {
    display: flex;
    flex-direction: column;
    position: fixed;
    z-index: 2; 
    left: 0;
    right: 0;
    top: 0;
    bottom: auto;
    width: 100%;
    height: 100%; 
    margin: 0px;
    padding: 0px;
    background-color: var(--background-color-modal);
    font-size: small;
    font-weight: 100;
}

/* Modal content */
modal-header {
    display: block;
    position: relative;
    margin: var(--padding);
    text-align: left;
    font-size: large;
    word-wrap: break-word;
    word-break: normal;
    white-space: normal;
    color: var(--foreground-color-header);
}

modal-body {
    display: block;
    flex-grow: 1;
    margin: 0px;
    overflow-x: hidden;
    overflow-y: auto;
}

modal-content {
    display: block;
    overflow: visible;
    margin: var(--padding);
}

/* Modal buttons */
modal-close {
    display: block;
    position: absolute;
    top: 2px;
    right: 2px;
    left: auto;
    bottom: auto;
    color: var(--foreground-color-button);
    padding: var(--padding);
    cursor: pointer;
    text-align: center;
    font-size: large;
}
modal-close:hover {
    color: var(--foreground-color-button-hover);
}

/***************************
Other
***************************/
/* Single click to select all content */
.select-all {
    user-select: all;
    cursor: pointer;
}
.button > .select-all, .button > * > .select-all, .button-subtle > .select-all, .button-subtle > * > .select-all {
    user-select: none;
}

/* Super active elements */
.superactive:not([type="checkbox"]), .superactive > *:not([type="checkbox"]) {
    color: var(--foreground-color-superactive);
}

/* Unauthorized elements */
.unauthorized:not([type="checkbox"]), .unauthorized > *:not([type="checkbox"]) {
    text-decoration: line-through;
    cursor: not-allowed;
    pointer-events: none;
    user-select: none;
    color: var(--background-color-input-invalid);
}
.pseudounauthorized:not([type="checkbox"]), .pseudounauthorized > *:not([type="checkbox"]) {
    text-decoration: line-through;
    color: var(--background-color-input-invalid);
}

/* Resolved elements */
.resolved:not([type="checkbox"]), .resolved > *:not([type="checkbox"]) {
    text-decoration: line-through;
    cursor: not-allowed;
    pointer-events: none;
    user-select: none;
    color: var(--foreground-color-inactive);
}

/* Uninstalled elements */
.uninstalled:not([type="checkbox"]), .uninstalled > *:not([type="checkbox"]) {
    color: var(--background-color-input-invalid);
}

/* Error elements */
.error:not([type="checkbox"]), .error > *:not([type="checkbox"]) {
    color: var(--background-color-input-invalid);
}

/* Invalid elements (e.g., textarea */
.invalid {
    background-color: var(--background-color-input-invalid-subtle);
}

/* Vertical align */
.avtop {
    vertical-align: top;
}
.avmiddle {
    vertical-align: middle;
}
.avbottom {
    vertical-align: bottom;
}

/* Horizontal align */
.ahleft {
    text-align: left;
}
.ahcenter {
    text-align: center;
}
.ahright {
    text-align: right;
}

/* Updated animation */
.updated-animation {
    transform-origin: center center;
    animation-name: updated-animate;
    animation-duration: 0.25s;
}
.notice-animation {
    transform-origin: center center;
    animation: updated-animate 1s infinite;
}
label.updated-animation, label.notice-animation {
    position: relative;
    display: inline-block;
    min-height: 0px;
    max-height: 15px;
    overflow: hidden;
    margin-top: -5px;
    margin-bottom: -5px;
}
@keyframes updated-animate {
    0% { transform: scaleX(1); }
    50% { transform: scaleX(1.15); }
    100% { transform: scaleX(1); }
}

/* Spin animation */
loading:after {
    display: inline-block;
    position: relative;
    margin: 0px;
    margin-left: 6px;
    margin-right: var(--padding);
    margin-bottom: -4px;
    content: "\205b";
    color: var(--foreground-color-subheader);
    justify-items: center;
    align-items: center;
    transform-origin: center center;
    animation: spin-animate 1s infinite linear;
}
.spin-animation {
    display: inline-block;
    justify-items: center;
    align-items: center;
    transform-origin: center center;
    animation: spin-animate 1s infinite linear;
}
@keyframes spin-animate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Restrict width */
.wminor {
    max-width: 15vw;
}

.wicon {
    width: 15px;
    max-width: 15px;
}

.wlabel {
    width: 100px;
    white-space: nowrap;
}
.wlabel > * {
    white-space: nowrap;
}


/* Overlapping icon */
.oicon {
    margin: 0px;
    margin-left: -30px;
    width: 15px;
    max-width: 15px;
    vertical-align: top;
    opacity: 0.9;
}
.tooltip:has(.oicon) .tooltiptext {
    transform: translateX(-18px);
}

/* Alert levels */
.alert-0 {
    white-space: nowrap;
}
.alert-1 {
    color: var(--foreground-color-alert-1);
    white-space: nowrap;
}
.alert-2 {
    color: var(--foreground-color-alert-2);
    white-space: nowrap;
}
.alert-3 {
    color: var(--foreground-color-alert-3);
    white-space: nowrap;
}

/* Search elements */
.search {
    min-width: var(--width) !important;
    max-width: var(--width) !important;
    border: none !important;
}
.search::placeholder {
    color: var(--foreground-color);
}

/* Margin */
.nomargin {
    margin: 0px;
}

.nomarginleft {
    margin-left: 0px;
}

.nomarginright {
    margin-right: 0px;
}

/* Wrap */
.nowrap {
    white-space: nowrap;
}
.nowrap > * {
    white-space: nowrap;
}


/* Hide elements by class */
.hidden, .filter {
    display: none !important;
}
.hidden-pseudo, .hidden-pseudo > * {
    height: 1px !important;
    line-height: 1px !important;
    min-height: 1px !important;
    max-height: 1px !important;
    width: 1px !important;
    min-width: 1px !important;
    max-width: 1px !important;
    padding: 0px !important;
    margin: 0px !important;
    color: rgba(0, 0, 0, 0) !important;
    background-color: rgba(0, 0, 0, 0) !important;
    border: none !important;
    outline: none !important;
    text-decoration: none !important;
}

/* Hide content */
.hidden-content {
    color: rgba(0, 0, 0, 0);
}