/* Fonts */
@font-face {
    font-family: 'Lato';
    font-weight: 400;
    src: url("https://static.codrutsoft.com/fonts/google-lato.woff2") format('woff2');
}

/* Constants */
:root {
    --generic-gray: rgba(218, 218, 218, 0.4);

    /* While these cannot be used in code, they are here for refrence */
    --medium-screen-value: 688px;
    --small-screen-value: 468px;
}

/* Global */
html, body {
    margin: 0;
    padding: 0;
}
  
  ::-webkit-scrollbar { width: 10px; height: 3px;}
  ::-webkit-scrollbar-track {  background-color: #646464;}
  ::-webkit-scrollbar-track-piece { background-color: rgb(255, 255, 255);}
  ::-webkit-scrollbar-thumb { height: 50px; background-color: #666; border-radius: 2px;}

body { 
    font-family: 'Lato';
    font-weight: 400;
    color: rgb(0, 0, 0);

    opacity: 0;
    transition: opacity .5s;
}
footer {
    background-color: rgb(189, 189, 189);
    color: rgb(0, 0, 0);
}

a {
  color: rgb(10, 133, 170);
  font-weight: 900;

  background: 
    linear-gradient(to right, rgba(255, 0, 0, 1), rgba(255, 0, 180, 1), rgba(0, 100, 200, 1));

  border-bottom: 5px;
  text-decoration: 0;
  background-size: 0% 0.1em, 0 0.1em;
  background-position: 0% 100%, 0 100%;
  background-repeat: no-repeat;
  transition: background-size 400ms;
  outline: none;
}

hr {
    border: 1px solid #b8b8b8; 
    margin: 20px 0; 
}

button {
    outline: none;
}

a, button, select, textarea {
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0.178);
}

/* Utils */
.visible { opacity: 1; }
.invisible { opacity: 0; }

.hide { display: none; }

/* Navigation bar */
nav {
    margin-top: 1em;
    margin-bottom: 1em;
}
#nav {
    display: flex;
    text-align: right;
    padding-left: min(3em, 4%);
    padding-right: min(3em, 4%);

    font-size: 1.1em;
    font-weight: 800;
    list-style-type:none;
    line-height: 40px;
    margin: 0px;
}
#nav a{
    text-decoration: none;
    box-sizing: border-box;
    display: inline-block;
    padding: 16px;
}
#nav a:focus-visible{
    transition: all .20s ease-in-out;
}
#nav-main {
    display: flex;
    flex-direction: row;
    align-items: center;

    flex-grow: 1;
}
#nav-main-img {
    padding: 0px !important;
    margin: 0px;
}
#nav-main-img img {
    height: 50px;
    padding: 0px;
    margin: 0px;
    margin-top: 8px;
    margin-right: 8px;
}
#nav-main span {
    font-size: 1.25em;
    font-weight: bold;
}
#nav a:hover,
#nav a:focus {
    filter: drop-shadow(0px 0px 15px rgb(0, 0, 0));
    transition: all .30s ease-in-out; 
}

#nav a:active {
    transform: scale(0.95);
}

.nav-style {
    background-color: rgb(212, 212, 212);
}
.nav-style a {
    color: rgb(0, 0, 0);
}
.nav-style a:focus-visible{
    box-shadow:inset 0px 0px 0px 3px rgb(0, 0, 0);
    transition: all .20s ease-in-out;
}
.nav-style i {
    font-size:22px; 
    margin-left: 5px; 
    margin-right: 5px;
    text-decoration: none;
}

/* Navigation Bar -> Dark Style */
.navdark {
    background-color: rgb(50, 50, 50);
}

.navdark a {
    color: rgb(255, 255, 255);
}

.navdark a:focus-visible{
    box-shadow:inset 0px 0px 0px 3px rgb(255, 255, 255);
    transition: all .20s ease-in-out;
}

/* Links */
.linkeffect a:hover,
.linkeffect a:focus,
.linkeffect:hover,
.linkeffect:focus {
  background-size: 100% 0.1em, 100%;
}

.linkeffectbig a:hover,
.linkeffectbig a:focus,
.linkeffectbig:hover,
.linkeffectbig:focus {
    border-radius: .25em;
  background-size: 100% 100%, 100%;
  color: white;
}

/* Link items */
.nohighlight {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}
  
.nohighlight a{
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}

.noselect {
    user-select: none;            
}

.noselect {
    user-select: none;            
}
  
.noselect a{
    user-select: none; 
}

.linkbutton {
    padding: .3em;
    width:fit-content;
    border-radius: 25px;
    cursor: pointer;
    user-select: none;
}

/* Effects */
.glow {
    transition: all .30s ease-in-out;
}

.glow:hover,
.glow:focus {
    filter: drop-shadow(0px 0px 20px rgb(4, 203, 253));
    transition: all .30s ease-in-out;
}

.item-shrink {
    transform: scale(1);
    transition: all .15s ease-in-out;
  }
  
.item-shrink:active {
    transform: scale(0.95);
    transition: all .10s ease-in-out;
}

/* Page container */
.content-wrapper {
    max-width: 1500px;
    overflow-x: hidden;
    margin-left: auto;
    margin-right: auto;

    padding-top: 1em;
    padding-bottom: 2em;

    padding-left: 1em;
    padding-right: 1em;
    width: calc(100vw - 2em); /* Subtract padding */

    /* For smaller screens, reduce padding to just 1em */
    transition: padding .2s ease;
    @media screen and (min-width: 468px) {
        padding-left: 2em;
        padding-right: 2em;
        width: calc(100vw - 4em); /* Subtract padding */
    }
}

#page-contain {
    min-height: 80vh; /* generic so there is no blank space */
    display: flex;
    flex-direction: column;
}

.page-contain-background {
    background: url("/img/background.jpg");
    background-size: cover;
}

/* Headings */
.heading {
    font-size: 2em;
    text-align: left;
    font-weight: 1000;
}
.category-heading {
    font-size: 2em;
    text-align: left;
    margin-top: 2em;
}
.centered-header {
    text-align: center; font-weight: 100;
    font-size: 2.5em;
    text-decoration: none;
}

/* Banner style set */
.calm-header {
    font-size: 2.5em;
    font-weight: 800;
    text-decoration: none;
    color: whitesmoke;
}

.calm-text {
    font-size: 1em;
    font-weight: 700;
    text-decoration: none;
    color: whitesmoke;;
}

/* Content & Text */
.content-text {
    font-size: 1.5em;
}
.subcontent-text {
    font-size: 1em;
    font-weight: 600;
}
.highlight-text { /* Make text have a rounded rectange under it */
    background-color: rgb(157, 204, 212, 0.75);
    border-radius: .25em;
    padding-left: .25em;
    padding-right: .25em;
}

/* Loader */
.loader {
    border: 16px solid rgba(50, 100, 255, 1);
    
    border-top: 16px solid #f3f3f3;

    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
}
.loader-mini {
    border: 6px solid rgba(50, 100, 255, 1);
    
    border-top: 6px solid #f3f3f3;

    border-radius: 50%;
    width: 12px;
    height: 12px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Welcome page */
#banner-box {
    height: calc(100vh - 8em); /* subtract content wrapper+self padding */
    display: flex;
    flex-direction: column;
    gap: 10px;
    color: black;

    background: url("/img/cover.png");
    padding: 2em;
    border-radius: 1em;
}
#banner-box-logo {
    width: 8em;
    max-width: 100%;
}
#banner-box-center {
    display: block;
    flex-grow: 1;
    flex-basis: 1;
}
#banner-box-title {
    margin: 0;
    font-size: 3em;
    font-weight: 2000;
}

#banner-box-buttons {
    display: flex;
    flex-direction: row;
    justify-content: end;
    gap: 10px;
}

/* Grady button */
.grady-button {
    display: inline-block;
    padding: 0;
    margin: 0;
    text-align: center;
    font-size: 14px;
    box-sizing: border-box;

    background: linear-gradient(-15deg, rgb(233, 162, 255),rgb(152, 255, 255));
    padding: 1.5em;
    color: black;
    font-weight: bold;
    cursor: pointer;
    width: 15em;

    display: flex;
    align-items: center;
    justify-content: center;

    border: none;
    border-radius: 1em;

    transition: all .15s ease-in-out;
}
.grady-button:hover {
    box-shadow: 0px 0px 8px 0px rgb(0, 0, 0);
}
.grady-button:active {
    transform: scale(0.9);
}
.grady-button:focus-visible {
    box-shadow: inset 0px 0px 5px 3px rgb(58, 6, 88);
}
.grady-button:disabled {
    cursor: default;
    filter: grayscale(100%);
    transform: scale(1);
    opacity: 0.75;
}
.grady-button img {
    height: 2em;
    margin-right: 10px;
}
.grady-button-red {
    background: linear-gradient(-15deg, rgb(253, 114, 184), rgb(187, 182, 255));
}    

/* SIGN COMPONENTS */
/* Sign Button */
.signbutton{
    min-height: 20px;
    cursor:pointer;
    font-weight: 700;
    color: rgb(255, 255, 255);
    border: none;
    border-style: solid;
    border-width: 3px;
    border-color: rgb(151, 0, 238);
    font-size: 14px;
    box-sizing: border-box;

    padding: 1em;
    border-radius: 20px;

    user-select: none;
    display: inline-block;
    text-align: center;

    background-color: rgb(80, 0, 155);
    
    transition: all .25s;
}
.signbutton:hover {
    background-color: rgb(148, 44, 245);
    border-color: rgb(129, 0, 204);
}
.signbutton:focus-visible, .signbutton:active {
    background-color: rgb(219, 0, 226);
    border-color: rgb(238, 0, 206);
}
.signbutton:disabled {
    background-color: rgb(70, 59, 80);
    border-color: rgb(42, 42, 43);
}

.signbutton-small {
    max-width: 75px;
}

/* Sign Input */
.signinput{
    flex-grow: 1;
    height: 50px;
    
    min-width: none;

    background-color: rgb(122, 236, 240);
    color: black;
    border: solid 3px rgb(0, 69, 148);

    padding: .5em;
    border-radius: 1em;
}
.signinput:focus,
.signinput:active {
    background-color: rgb(122, 236, 240);
    color: black;
    border: solid 3px rgb(10, 94, 190);
}

.slimsigninput {
    height: 30px;
}

/* Danger sign button */
.dangerbutton {
    background-color: rgb(167, 0, 0) !important;
    border-color: #c43636 !important;
    padding: 1em !important;
    min-width: 15em !important;
}

.dangerbutton:hover {
    background-color: #c43636 !important;
}

.dangerbutton:focus-visible, .dangerbutton:active {
    background-color: #ffffff !important;
    color: red !important;
    border-color: rgb(255, 0, 0) !important;
}

.dangerbutton:disabled {
    color: white !important;
    background-color: #583c3c !important;
    border-color: rgb(136, 85, 85) !important;
}

.singleline-signbutton {
    max-width: calc(100% - 1em - 6px); /* padding, border */
    width: 400px;
}

.singleline-signinput {
    max-width: calc(100% - 1em - 6px); /* padding, border */
    width: 400px;
}

.fullline-signinput {
    width: calc(100% - 1em - 6px); /* padding, border */
}

/* Sign Checkbox */
input[type="checkbox"].signswitch{
    font-size: 15px;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    width: 3em;
    height: 1.5em;
    background: #c25454;
    border-radius: .5em;
    position: relative;
    cursor: pointer;
    outline: none;
    transition: all .2s ease-in-out;
}
input[type="checkbox"].signswitch:focus-visible{
    box-shadow: 0px 0px 0px 3px rgb(255, 126, 233);
}
input[type="checkbox"].signswitch:checked{
    background: #35925f;
}
input[type="checkbox"].signswitch:after{
    position: absolute;
    content: "";
    width: 1.5em;
    height: 1.5em;
    border-radius: .5em;
    background: white;
    box-shadow: 0 0 .5em rgba(0,0,0,.8);
    transform: scale(.6);
    left: 0;
    transition: all .15s cubic-bezier(0,0.7,0.9,1);
}
input[type="checkbox"].signswitch:hover:after{
    transform: scale(.65);
}
input[type="checkbox"].signswitch:checked:after{
    left: calc(100% - 1.5em);
    transform: scale(.75);
}
input[type="checkbox"].signswitch:hover:checked:after{
    left: calc(100% - 1.5em);
    transform: scale(.8);
}
input[type="checkbox"].signswitch:active:checked:after{
    left: calc(100% - 2em);
}
input[type="checkbox"].signswitch:active:after{
    width: 2em;
}
input[type="checkbox"].signswitch:disabled{
    background: #8b8b8b;
    width: 1me;
}

/* Sign Dropdown */
.signdropdown {
    flex-grow: 1;
    flex-basis: calc(50% - 0.4em); /* 50% with spacing */
    min-height: 20px;
    cursor:pointer;
    font-weight: 700;
    color: rgb(0, 0, 0);
    background-color: rgb(195, 134, 252);
    border: none;
    border-style: solid;
    border-width: 3px;
    border-color: rgb(123, 67, 253);
    font-size: 14px;

    padding-top: .5em;
    padding-bottom: .5em;
    padding-left: 1em;
    padding-right: 1em;
    border-radius: 20px;

    user-select: none;
    display: inline-block;
    text-align: center;
    
    transition: all .25s;
}

/* Footer */
#footer {
    font-size: .6em;
    position: relative;
    bottom: 0;
    width: 100%;
    height: fit-content;
    z-index: 9;
    min-height: 80px;
    margin-top: auto;
}

.footer img {
    max-height: 40px;
    max-width: 500%;
    float: left;
    margin-top: 20px;
    margin-left: 1em;
}
.footer-category {
    font-size: 2em;
    font-weight: 900;
}

.footer-rows:after {
    content: "";
    display: table;
    clear: both;
}

.foot-litem {
    font-size: 1.2em;
    font-weight: 600;
    transition: all .30 ease-in-out
}
.foot-litem:hover,
.foot-litem:focus {
    filter: drop-shadow(0px 0px 15px rgb(0, 0, 0));
    transition: all .30 ease-in-out
}
.foot-litem:focus {
    filter: drop-shadow(0px 0px 15px rgba(255,255,255,1));
    transition: all .30 ease-in-out
}

#footer-items {
    max-width: 800px;
    padding: 2em;
    margin-left: auto;
    margin-right: auto;  
}
#footer-items a{
    text-decoration: none;

    display: block;
}
#footer-items a:focus-visible{
    background-color: rgb(32, 32, 32);
    color: white;
    text-decoration:underline;
}
#footer-copyright {
    float: right;
    margin-top: 1em;
    font-size: 1.3em;
}
#footer-image {
    max-height: 5em;
    max-width: 100%;
    display: block;
}
@media screen and (min-width: 768px) {
    .foter-column {
        float: left; 
        width: 18%;
        padding: 10px;
    }
    .column-logo {
        float: left; 
        width: 30%;
        padding: 10px;
    }
}

.backgroundthemetransition {
    transition: background-color .25s ease-in-out;
    transition: color .25s ease-in-out;
}

/*Server info*/
#titlebar-list {
    width: 100%;
    overflow-x: scroll;
    display: flex;
    padding-bottom: 8px;
    padding-top: 2em;
}
#titlebar-list a {
    padding: 16px;
    min-width: 150px;
    background: none;
    font-size: 1.25em;
    border: none;
    background-color: #00445fd8;
    color: white;
    margin: 3px;
    border-radius: 6px;
    display: inline-block;

    display: flex;
    flex-direction: column;

    /* Gradient border */
    background-origin: padding-box, border-box; /* Important for both layers */
    background-repeat: no-repeat;

    box-shadow: 0 0 3px 2px rgba(24, 123, 253, 0.3);

    transition: all .25s ease-in-out;
}
#titlebar-list a:focus-visible {
    box-shadow: 0 0 3px 3px rgb(138, 138, 138);
    background-color: #d200e6;
}
#titlebar-list a:hover {
    cursor: pointer;
    translate: 0% -15px;
    
    box-shadow: 0 0 3px 3px rgb(57, 255, 245);
    background-color: #0073d1;
}
.titlebar-disabled {
    box-shadow: 3px 3px 3px 3px rgb(255, 209, 57) !important;
    background-color: #7300d1 !important;
    translate: 0% -15px;
}

.info-slip {
    display: flex;
    flex-direction: column;
}
.info-slip h4 {
    background-color: #0073d1;
    width: max-content;
    display: inline-block;
    box-sizing: border-box;
    min-width: 200px;
    margin-bottom: 0px;

    padding: 12px;
    color: white;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}
.info-slip view {
    margin-top: 0px;
    padding: 12px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;

    background-color: #a7a7a7ab;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}
.info-slip button {
    background-color: #194cf5;
    border: none;
    border-style: solid;
    border-width: 2px;
    padding: 8px;
    border-color: #0c78dd;
    border-radius: 5px;
    color: white;
    cursor: pointer;
    transition: all .2s ease-in-out;
    min-width: 150px;
}
.info-slip button:hover {
    background-color: #0c78dd;
}
.info-slip button:active {
    background-color: #fc99ff;
    border-color: #c200c9;
}
.info-slip-button-red {
    border-color: rgb(136, 0, 0) !important;
    background-color: #dd0c0c !important;
}
.info-slip-button-red:active {
    border-color: rgb(136, 0, 0) !important;
    background-color: rgb(136, 0, 0) !important;
}
.info-slip-button-green {
    border-color: rgb(59, 122, 0) !important;
    background-color: #59dd0c !important;
}
.info-slip-button-green:active {
    border-color: rgb(59, 122, 0) !important;
    background-color: rgb(59, 122, 0) !important;
}
.info-slip button:disabled {
    color: rgb(119, 119, 119) !important;
    background-color: lightgray !important;
    border-color: gray !important;
}
.info-slip button:focus-visible {
    border-color: rgb(255, 255, 255) !important;
    box-shadow: 0 0 0px 1px rgb(0, 0, 0);
}

.folder-filler {
    background-color: rgba(50, 50, 50, 0.8);
    padding: 15px;
    color: white;
}

.button-bar {
    display: flex;
    flex-direction: row;
    gap: 10px;
}

.button-bar button {
    background-color: #0c78dd;
    border: none;
    border-radius: 5px;
    padding: 6px;
    cursor: pointer;
    color: white;
    transition: all .25s ease-in-out;
}
.button-bar button:hover {
    background-color: #3e93e2;
    filter: drop-shadow(0px 0px 4px rgb(255, 255, 255));
}
.button-bar button:active {
    transform: scale(0.95);
    background-color: #7329af;
    filter: drop-shadow(0px 0px 4px rgb(0, 0, 0));
}

.link-block {
    display: inline-block;
    font-weight: inherit;
    box-sizing: content-box;
    color: inherit;
}

.icons-list {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.icons-list div > div > i,
.icons-list div > div > a > i {
    font-size: 2.5em;
    margin-bottom: 8px;
}
.icons-list a {
    display: inherit;
    text-align: inherit;
    justify-content: inherit;
    align-items: inherit;
    flex-direction: inherit;
    gap: inherit;
    width: 100%;
}
.icons-list > div {
   width: 150px; 
   background-color: #555;
   padding: 10px;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   overflow: hidden;
}
.icons-list > div > div {
    display: flex;
    flex-direction: column;
    align-items: center;
 }
.icons-list buttonbar {
    margin-top: 12px;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 3px;
}
.icons-list button {
    border: none;
    border-radius: 8px;
    padding: 10px;
    color: white;
    cursor: pointer;
    aspect-ratio: 1 / 1;
    background-color: #0c78dd;
    transition: all .25s ease-in-out;
}
.icons-list button:hover {
    background-color: #3e93e2;
    filter: drop-shadow(0px 0px 4px rgb(255, 255, 255));
}
.icons-list button:active {
    transform: scale(0.95);
    background-color: #7329af;
    filter: drop-shadow(0px 0px 4px rgb(0, 0, 0));
}

.icons-list-vertical {
    flex-direction: column;
    align-items: start;
    justify-content: stretch;
}
.icons-list-vertical > div {
    width: calc(100% - 20px);
    display: flex;
    flex-direction: row;
    gap: 10px;
    justify-content: start;
    justify-content: space-between;
    padding-top: 4px;
    padding-bottom: 4px;
}
.icons-list-vertical > div > div {
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
    justify-content: start;
    flex-grow: 1;
}
.icons-list-vertical buttonbar {
    width: auto;
}

.button-grid {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
}

.console-item {
    background-color: rgb(30, 30, 30);
    padding: 12px;
    border-radius: 6px;
    color: white;
}
#console-box {
    max-height: 100vh;
    min-height: 350px;
    overflow-y: scroll;
}
#console-send {
    display: flex;
    flex-direction: row;
}
#console-send arrowselector {
    font-size: 1.5em;
    display: flex;
    align-items: center;
    margin-right: 6px;
}
#console-send button {
    color: inherit;
    cursor: pointer;
    border-radius: 3px;
    margin-left: 6px;
    background-color: rgb(36, 85, 150);
    border: none;
    padding: 8px;
    transition: all .2s ease-in-out;
}
#console-send button:focus-visible {
    box-shadow: 0px 0px 0px 3px rgb(255, 255, 255);
}
#console-send button:hover {
    background-color: rgb(50, 120, 211);
    box-shadow: 0px 0px 24px rgb(235, 131, 245);
    translate: 0px -6px;
}
#console-send button:active {
    background-color: rgb(0, 41, 95);
}
#console-send input {
    outline-style: none;
    flex-grow: 1;
    border-radius: 3px;
    border: none;
    color: inherit;
    background-color: rgb(60, 60, 60);
}

#text-editor {
    background-color: #2e2e2e;
    color: rgb(248, 255, 180);
    border: none;
    outline: none;
    min-width: 100%;
    max-width: 100%;
    min-height: 300px;
}

.player-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    background-color: var(--generic-gray);
    border-radius: 10px;
    padding: 8px;
}
.player-list div {
    display: flex;
    flex-direction: row;
    gap: 10px;
    padding: 10px;
    background-color: var(--generic-gray);
    align-items: center;
    font-size: 1.25em;
    border-radius: 10px;
}
.player-list div img {
    height: 32px;
}
.player-list div span {
    flex-grow: 1;
}
.player-list buttonbar {
    display: flex;
    gap: 5px;
    height: 30px;
    padding: 0;
    margin: 0;
}
.player-list buttonbar button {
    height: 100%;
    padding: 0;
    margin: 0;
    width: 50px;
    background-color: blue;
    color:white;
    cursor: pointer;
    border: none;
    border-radius: 5px;
    transition: all .2s ease-in-out;
}
.player-list buttonbar button:hover {
    box-shadow: 0px 0px 8px #7b56ff;
}
.player-list buttonbar button:active {
    scale: 0.9;
}
.player-list buttonbar button:focus-visible {
    box-shadow: inset 0px 0px 0px 3px rgb(255, 255, 255);
}
.danger-button-bar {
    background-color: red !important;
}

.add-field {
    background-color: var(--generic-gray);;
    align-items: center;
    font-size: 1.25em;
    border-radius: 10px;
    display: flex;
    flex-direction: row;
    gap: 5px;
    padding: 8px;
}
.add-field input {
    flex-grow: 1;
    padding: 8px;
    outline-style: none;
    border-radius: 10px;
    border: none;
    color: inherit;
    border-color: magenta;
    border-style: solid;
    border-width: 2px;
    background-color: rgb(150, 150, 150);
}
.add-field button {
    color: inherit;
    cursor: pointer;
    border-radius: 10px;
    background-color: rgb(123, 36, 150);
    color: white;
    border: none;
    padding: 8px;
    padding-left: 18px;
    padding-right: 18px;
    height: 35px;
    transition: all .2s ease-in-out;
}
.add-field button:hover {
    background-color: rgb(201, 95, 233);
    color: white;
}
.add-field button:active {
    background-color: rgb(244, 209, 255);
    color: rgb(0, 0, 0);
}
.add-field button:disabled {
    background-color: rgb(77, 77, 77);
    color: white;
}

.editing-value {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;

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

.editing-value setting {
    background-color: rgba(181, 241, 236, 0.75);
    padding: 10px;
    border-radius: 4px;
    min-width: calc(33.3333% - 27px);
    @media screen and (max-width: 688px) {
        flex-direction: column;
    }
    flex-grow: 1;
    color: black;
}
.editing-value h4 {
    margin-top: 8px;
    margin-bottom: 0px;
    padding: 0;
}
.editing-value h5 {
    padding: 0;
    margin-top: 0px;
    margin-bottom: 4px;
    color: rgb(56, 56, 56);
}
.editing-value button {
    width: 200px;
}
.editing-value input[type="text"] {
    flex-grow: 1;
    height: 20px;
    
    min-width: none;

    background-color: rgb(227, 255, 255);
    color: black;
    border: solid 3px rgb(101, 21, 175);

    padding: .5em;
    border-radius: 6px;
}
.editing-value input[type="number"] {
    flex-grow: 1;
    height: 20px;
    
    min-width: none;

    background-color: rgb(244, 227, 255);
    color: black;
    border: solid 3px rgb(21, 113, 175);

    padding: .5em;
    border-radius: 6px;
}
.save-align-right {
    display: flex;
    flex-direction: row;
    gap: 5px;
    width: inherit;
    overflow: hidden;
}
.save-align-right input[type="text"] {
    flex-grow: 1;
    width: 0;
}
.save-align-right input[type="number"] {
    flex-grow: 1;
    width: 0;
}
.save-button {
    cursor: pointer;
    max-width: 45px;
    border: none;
    background-color: rgb(140, 0, 255);
    color: white;
    border-radius: 10px;
    transition: all .2s ease-in-out;
}
.save-button:hover {
    background-color: rgb(171, 68, 255);
}
.save-button:active {
    background-color: rgb(224, 185, 255);
    color: black;
}
.save-button:disabled {
    background-color: rgb(255, 255, 255);
    color: black;
}
.editing-value input[type="checkbox"] {
    font-size: 15px;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    width: 3em;
    height: 1.5em;
    background: #c25454;
    border-radius: 6px;
    position: relative;
    cursor: pointer;
    outline: none;
    transition: all .2s ease-in-out;
}
.editing-value input[type="checkbox"]:focus-visible {
    box-shadow: 0px 0px 0px 3px rgb(107, 0, 194);
}
.editing-value input[type="checkbox"]:checked {
    background: #35925f;
}
.editing-value input[type="checkbox"]:after {
    position: absolute;
    content: "";
    width: 1.5em;
    height: 1.5em;
    border-radius: 6px;
    background: white;
    backdrop-filter:drop-shadow(4px 4px 10px blue);
    box-shadow: 0 0 10px black;
    transform: scale(.6);
    left: 0;
    transition: all .2s cubic-bezier(0,0.7,0.9,1);
}
.editing-value input[type="checkbox"]:checked:after {
    left: calc(100% - 1.5em);
    transform: scale(.7);
}
.editing-value input[type="checkbox"]:active:after {
    transform: scale(.85);
}
.editing-value input[type="checkbox"]:disabled {
    background: #8b8b8b;
    width: 1me;
}

#server-listing {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px;
}

/* Left side */
#server-listing > div {
    background-color: rgba(224, 255, 255, 0.5);
    padding: 16px;
    border-radius: 8px;
    box-shadow: 0px 0px 5px rgb(160, 160, 161);
    display: flex;
    flex-direction: row;
    gap: 10px;
    transition: all .2s ease-in-out;
}
#server-listing > div > a {
    color: inherit;
    cursor: pointer;
    display: flex;
    gap: 10px;
    flex-direction: row;
    flex-grow: 1;
}
#server-listing > div:hover {
    color: black;
    background-color: rgb(192, 255, 255);
}
#server-listing > div:active {
    scale: 0.95;
}
#server-listing img {
    height: 64px;
}
#server-listing > div > div {
    flex-grow: 1;
}
#server-listing h3 {
    margin-top: 4px;
    margin-bottom: 0px;
}

/* Right side */
#server-listing div > i {
    margin: 0;
    float: right;
    font-size: 2.4em;
}
#server-listing div[controls] {
    flex-grow: 0;
    display: flex;
    flex-direction: column;
    align-items: end;
    gap: 4px;
}
#server-listing div[controls] button {
    cursor: pointer;
    background-color: rgba(0, 0, 0, 0);
    border: none;
    color: inherit;
    border-radius: 6px;
    transition: all .2s ease;
    padding: 4px;
}
#server-listing div[controls] button:hover {
    background-color: red;
    box-shadow: 0px 0px 10px red;
    color: white;
}
#server-listing div[controls] button:focus-visible {
    background-color: maroon;
    box-shadow: 0px 0px 0px 3px rgb(202, 202, 202);
    color: white;
}

.grid-server-listing {
    font-size:0.9em;
}
.grid-server-listing container {
    display: flex;
    flex-direction: row !important;
    flex-wrap: wrap !important;
}
.grid-server-listing > div {
    width: 250px;
}

#software-list {
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
#software-list ul {
    display: block;
    list-style: none;
    padding: 0;
    margin-top: 0px;
    display: flex;
    flex-direction: row;
    gap: 4px;
}
#software-list li {
    display: inline;
    margin: 0;
    padding: 2px;
    padding-left: 6px;
    padding-right: 6px;
    background-color: rgb(182, 0, 173);
    color: white;
    border-radius: 18px;
}
#software-list h3 {
    margin: 0px;
    font-size: 1.5em;
}
#software-list p {
    margin-top: 0px;
}
#software-list > div {
    background-color: var(--generic-gray);
    padding: 18px;
    border-radius: 12px;
    display: flex;
    gap: 10px;
    align-items: center;
}
#software-list > div[hidden] {
    display: none;
}
#software-list > div > div {
    flex-grow: 1;
}
#software-list > div > div > p {
    margin-bottom: 4px;
}
#software-list > div > button {
    cursor: pointer;
    font-size: 1.5em;
    border-radius: 12px;
    width: 50px;
    height: 50px;
    background-color: #0073d1;
    color: white;
    border: none;
    text-orientation: 90;
    transition: all .2s ease-in;
}
#software-list > div > button:hover {
    translate: 0px -4px;
    background-color: rgb(78, 164, 230);
    box-shadow: 0px 0px 8px black;
}
#software-list > div > button:active {
    background-color: #b9cfe0;
    color: black;
    transform: rotate(90deg);
    box-shadow: 0px 0px 14px rgb(107, 0, 107);
}
#software-list > div > button:focus-visible {
    background-color: #b9cfe0;
    color: black;
    transform: rotate(90deg);
    box-shadow: inset 0px 0px 8px 1px rgb(172, 0, 134);
}
#software-list > div > i {
    font-size: 2em;
}

#image-editor {
    display: flex;
    flex-direction: row;
    gap: 10px;
}
#image-editor > div {
    display: inline;
}
#image-editor img {
    height: 100px;
}
#image-editor button {
    cursor: pointer;
    width: 150px;
    padding: 8px;
    border: none;
    border-radius: 10px;
    color: rgb(255, 255, 255);
    background: linear-gradient(90deg, rgb(235, 50, 235), rgb(82, 82, 209));
    transition: all .2s ease-in;
}
#image-editor button:hover {
    background: linear-gradient(10deg, rgb(235, 50, 235), rgb(82, 82, 209));
    box-shadow: 0px 0px 10px rgb(110, 10, 141);
    scale: 1.05;
}
#image-editor button:active {
    background: linear-gradient(10deg, rgb(235, 50, 235), rgb(82, 82, 209));
    box-shadow: 0px 0px 10px rgb(110, 10, 141);
    scale: 0.95;
}

#accounts-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
#accounts-list > div {
    background-color: var(--generic-gray);
    padding: 8px;
}
#accounts-list > div > div {
    display: flex;
    flex-direction: row;
    gap: 10px;
}
#accounts-list > div > div > h3 {
    flex-grow: 1;
    margin: 0px;
    padding: 0px;
}
#accounts-list > div > div > button {
    padding: 6px;
    cursor: pointer;
    border: none;
    background-color: rgb(175, 21, 149);
    border-color: rgb(113, 21, 175);
    border-style: solid;
    color: white;
    border-width: 2px;
    border-radius: 8px;
    width: 40px;
    transition: all .2s ease-in-out;
}
#accounts-list > div > div > button:hover {
    background-color: rgb(175, 21, 149);
    border-color: rgb(175, 21, 149);
}
#accounts-list > div > div > button:active {
    background-color: rgb(113, 21, 175);
    border-color: rgb(113, 21, 175);
}
#accounts-list > div > div > button:focus-visible {
    border-color: rgb(104, 104, 104);
    background-color: rgb(255, 255, 255);
    color: rgb(0, 0, 0);
}
.perm-contain[hidden] {
    display: none !important;
}
.perm-contain {
    display: flex;
    flex-direction: column !important;
    gap: 10px;
}
.perm-contain h4 {
    margin-bottom: 2px;
}
.perm-contain {
    display: flex;
    flex-direction: column !important;
    gap: 10px;
}
.perm-contain > div {
    border-left: solid 3px rgb(209, 136, 0);
    padding-left: 18px;
    margin-bottom: 18px;
    padding: 6px;
    border-radius: 8px;
    margin-left: 16px;
}

.progres-text {
    position: relative;
    display: block;
    padding: 6px;
    color: white;
    background-color: rgb(0, 105, 0);
    height: 20px;
}
.progres-text div {
    background-color: rgb(0, 201, 0);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    height: 100%;
}
.progres-text span {
    position: absolute;
}

/* Bigger input box */
.bigger-panel-edit {
    width: 90%;
    max-width: 40em;
}

/* Dark mode element */
.darkmode {
    color: white;
    background-color: black;
}

.darkmodegray {
    color: white;
    background-color: rgb(39, 39, 39);
}

.backgroundthemetransition {
    transition: background-color .25s ease-in-out;
    transition: color .25s ease-in-out;
}

#invites-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    list-style-type: none;
    padding: 0px;
    margin: 0px;
}
#invites-list li {
    background-color: var(--generic-gray);
    border-radius: 8px;
    padding: 6px;
    display: flex;
    flex-direction: row;
}
#invites-list span {
    flex-grow: 1;
}
#invites-list div {
    display: flex;
    flex-direction: row;
    gap: 6px;
}
#invites-list button {
    cursor: pointer;
    border-style: none;
    background-color: rgb(0, 180, 24);
    border: 2px solid green;
    color: white;
    border-radius: 8px;
    padding: 4px;
    padding-left: 8px;
    padding-right: 8px;
    transition: all .2s ease-in-out;
}
#invites-list button:hover {    
    background-color: rgb(0, 230, 31);
}
#invites-list button:active {
    background-color: green;
}
#invites-list button[reject] {    
    background-color: rgb(201, 0, 0);
    border: 2px solid maroon;
}
#invites-list button[reject]:hover {    
    background-color: rgb(255, 0, 0);
}
#invites-list button[reject]:active {    
    background-color: maroon;
    border: 2px solid maroon;
}
#invites-list button:focus-visible {
    background-color: rgb(201, 201, 201) !important;
    color: black !important;
    border-color: black !important;
}
#invites-list button:disabled {
    background-color: rgb(97, 97, 97) !important;
    border-color: rgb(126, 126, 126) !important;
}

#create-backup {
    display: flex;
    flex-direction: row;
    gap: 10px;
}
#create-backup input {
    outline-style: none;
    flex-grow: 1;
    border-radius: 3px;
    border: none;
    color: inherit;
    background-color: rgb(60, 60, 60);
    color: white;
}
#create-backup button {
    color: inherit;
    cursor: pointer;
    border-radius: 3px;
    margin-left: 6px;
    background-color: rgb(36, 85, 150);
    border: none;
    padding: 8px;
    transition: all .2s ease-in-out;
    color: white;
}
#create-backup button:focus-visible {
    box-shadow: 0px 0px 0px 3px rgb(255, 255, 255);
}
#create-backup button:hover {
    background-color: rgb(50, 120, 211);
    box-shadow: 0px 0px 24px rgb(235, 131, 245);
    translate: 0px -6px;
}
#create-backup button:active {
    background-color: rgb(0, 41, 95);
}
#create-backup button:disabled {
    background-color: gray;
    box-shadow: none;
    translate: 0px 0px;
}

#backups-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    list-style-type: none;
    padding: 0px;
    margin: 0px;
}
#backups-list li {
    display: flex;
    flex-direction: row;
    padding: 8px;
    background-color: var(--generic-gray);
    align-items: center;
    gap: 8px;
}
#backups-list li > span {
    flex-grow: 1;
}
#backups-list li > div {
    display: flex;
    gap: 6px;
    align-items: center;
}
#backups-list button {
    cursor: pointer;
    padding: 8px;
    color: white;
    background-color: red;
    border: none;
    border-radius: 6px;
    width: 40px;
    transition: all .2s ease;
}
#backups-list button:hover {
    background-color: rgb(226, 64, 64);
    box-shadow: 0px 0px 6px white;
}
#backups-list button:active {
    background-color: rgb(170, 0, 0);
    scale: 0.95;
}
#backups-list button:focus-visible {
    background-color: rgb(214, 214, 214);
    box-shadow: 0px 0px 0px 4px black;
    color: black;
}
.backup-button-magenta {
    background-color: magenta !important;
}
.backup-button-magenta:hover {
    background-color: rgb(224, 90, 224) !important;
}
.backup-button-magenta:active {
    background-color: rgb(185, 0, 185) !important;
}

/* Device specific content */
@media screen and (min-width: 688px) {
.content-mobile {display: none !important;}
}

@media screen and (max-width: 688px) {
.content-desktop {display: none !important;}
}

@media screen and (min-width: 688px) {
.content-mobile {display: none !important;}
}

@media screen and (max-width: 688px) {
.content-desktop {display: none !important;}
}