/* color theme */
:root {
     /* light ui theme */
     --bcgColor: #ffffff;
     --alternateBcgColor: #eaeaea;
     --hoverBcgColor: #bbbbbb;
     --textColor: #000000;
     --buttonTop: rgba(255, 255, 255, 1);
     --buttonBottom: rgba(245, 245, 245, 1);
     --button: #eee;
     --selectionBcg: #2b94e5;
     --selectionText: #ffffff;
     --outline: #aaaaaa;
     --transBackground: #ddddddaa;

     /* dark ui theme */
     /*--bcgColor: #181b1f;
   --alternateBcgColor: #303030;
   --hoverBcgColor: #505050;
   --textColor: #eeeeee;
   --selectionBcg: #2b94e5;
   --selectionText: #ffffff;
   --buttonTop: #303030;
   --buttonBottom: #202020;
   --outline: #777777;
   --transBackground: #444444aa;*/
}

body {
     display: flex;
     justify-content: center;
     align-items: center;
     font-family: system-ui;
     height: 90%;
}

@media screen and (max-width: 800px) {
     body {
          flex-direction: column;
     }
}

h3 {
     margin: 0;
}

label {
     margin-right: 20px;
}

td {
     padding-left: 10px;
}

#login-panel {
     min-width: 300px;
}

.panel {
     padding: 10px 20px;
     border-radius: 5px;
     display: flex;
     flex-direction: column;
     gap: 10px;
     justify-content: space-around;
     border: 1px solid #0004;
     box-shadow: 0 5px 30px #0001;
}

.grid-form {
     display: grid;
     grid-template-columns: auto auto;
     align-items: center;
     padding-left: 10px;
     gap: 2px;
}

.form {
     display: flex;
     flex-direction: column;
     gap: 10px;
}

.center {
     display: flex;
     justify-content: center;
}

.header {
     display: flex;
     align-items: center;
     gap: 10px;
}

.black {
     background: #0004;
     position: fixed;
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
     z-index: 2;
     backdrop-filter: blur(10px);
     transition: 0.5s;
     opacity: 0;
}

.message {
     position: fixed;
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%);
     padding: 20px;
     border-radius: 5px;
     background-color: var(--bcgColor);
     box-shadow: 0 5px 30px #0001;
     z-index: 3;
     display: flex;
     flex-direction: column;
     gap: 10px;
     transition: 0.5s;
     opacity: 0;
}

button {
     padding: 5px;
     min-width: 100px;
     margin: 4px;
     background: var(--button);
     border: 0;
     border-radius: 2px;
     color: var(--textColor);
     outline: solid 1px var(--outline);
     transition: .6s;
}

button:hover,
button:focus {
     transition: background-color 200ms, outline 200ms, box-shadow 200ms;
     box-shadow: 0 1px 10px #0003;
     outline: solid 1px var(--selectionBcg);
}

button:active {
     background: var(--outline);
     transition: background-color 50ms, outline 200ms;
     outline: solid 1px var(--selectionBcg);
}

button:disabled {
     opacity: .5;
     background: var(--button) !important;
     color: var(--textColor) !important;
     outline: solid 1px var(--outline) !important;
     box-shadow: none !important;
     transition: .5s;
}

button.selected {
     background: var(--outline);
     transition: background-color 50ms, outline 200ms;
     outline: solid 1px var(--outline);
}


input[type=text]:disabled,
input[type=password]:disabled {
     opacity: .5;
     outline: solid 1px var(--outline) !important;
}

input[type=text],
input[type=password] {
     padding: 5px;
     margin: 4px;
     margin-left: 10px;
     background-color: var(--bcgColor);
     border: 0;
     border-radius: 2px;
     transition: 200ms;
     outline: solid 1px var(--outline);
     color: var(--textColor);
}

input[type=text]:hover,
input[type=password]:hover {
     outline: solid 1px var(--selectionBcg);
     transition: 200ms;
}

input[type=text]:focus,
input[type=password]:focus {
     box-shadow: 0 1px 10px #0003;
     outline: solid 1px var(--selectionBcg);
     transition: 200ms;
}

input[type=text].invalid,
input[type=password].invalid {
     outline: solid 1px #ad0000;
     background: #f1bdbd;
     transition: 200ms;
}

[hidden] {
     display: none;
}