/* Fonts */
@font-face {
    font-family: 'Lato';
    font-weight: 300;
    font-display: swap;
    src: url("https://static.codrutsoft.com/fonts/lato/light.ttf") format('truetype');
}
@font-face {
    font-family: 'Lato';
    font-weight: 500;
    font-display: swap;
    src: url("https://static.codrutsoft.com/fonts/lato/regular.ttf") format('truetype');
}
@font-face {
    font-family: 'Lato';
    font-weight: 700;
    font-display: swap;
    src: url("https://static.codrutsoft.com/fonts/lato/bold.ttf") format('truetype');
}
@font-face {
    font-family: 'Lato';
    font-weight: 900;
    font-display: swap;
    src: url("https://static.codrutsoft.com/fonts/lato/black.ttf") format('truetype');
}

@font-face {
    font-family: 'Kanit';
    font-weight: 500;
    font-display: swap;
    src: url("https://static.codrutsoft.com/fonts/kanit/light.ttf") format('truetype');
}
@font-face {
    font-family: 'Kanit';
    font-weight: 700;
    font-display: swap;
    src: url("https://static.codrutsoft.com/fonts/kanit/medium.ttf") format('truetype');
}
@font-face {
    font-family: 'Kanit';
    font-weight: 900;
    font-display: swap;
    src: url("https://static.codrutsoft.com/fonts/kanit/bold.ttf") format('truetype');
}


/* Constants */
:root {
    /* Palette */
    --palette-1: #7B52F1;
    --palette-2: #CA79E1;
    --palette-3: #F1A86A;
    --palette-4: #E4A590;
    --palette-5: #9D72E5;
    --palette-6: #DD98AC;
    --palette-7: #A349F5;
    --palette-8: #F284D4;
    --palette-9: #E2ADAA;
    --palette-10: #C49C7C;
    
    /* Theme */
    --accent-color: rgb(50, 125, 220);
    --accent-color-active: rgb(100, 175, 225);

    --accent-color-secondary: rgb(210, 60, 200);
    --accent-color-secondary-active: rgb(225, 80, 218);

    --primary-color: white;
    --text-color: black;
    --text-color-secondary: rgb(75, 75, 75);
    --container-color: rgb(220, 220, 220);
    --container-color-active: rgb(235, 235, 235);

    --control-background-color: rgb(215, 215, 215);
    --control-background-color-first: rgb(205, 205, 205);
    --control-background-color-second: rgb(205, 205, 205);
    --control-background-color-third: rgb(195, 195, 195);
    --control-background-color-third: rgb(180, 180, 180);
    --control-background-color-fifth: rgb(170, 170, 170);

    --info: #0099ff;
    --success: #00ff55;
    --warning: #ffdd00;
    --error: #ff4455;

    /* Special */
    --container-color-blur: #BBBBBBCC;

    --nav-background: rgb(250, 250, 250);
    --nav-background-scroll: rgba(212, 212, 212, 0.5);

    /* System */
    --content-width: 1600px;
    --content-padding-top: 1em;
    --content-padding-bottom: 1em;
    --content-padding: calc(var(--content-padding-top) + var(--content-padding-bottom));

    /* Nav */
    --nav-img-size: 32px;
    --nav-padding: 12px;
    --nav-height: calc(var(--nav-padding) + var(--nav-padding) /*+ 0px*/ + var(--nav-img-size)); /* Padding, border, image */
    --nav-offset: 4px;
    --nav-height-total: calc(var(--nav-height) + var(--nav-offset) + var(--nav-offset));

    --generic-background: #6e6e6e65;
    --generic-white-border: gainsboro;

    /* Scrollbar */
    --scrollbar-width: 10px;
    --scrollbar-track-color: rgba(175, 175, 175, 0.5); 
    --scrollbar-color: rgb(75, 65, 95); 

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

/* Global */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Lato', Arial, sans-serif;
}

::-webkit-scrollbar {
    width: var(--scrollbar-width);
}
::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-color);
    border-radius: 10px;
}
::-webkit-scrollbar-track {
    background: var(--scrollbar-track-color);
}

body { 
    font-weight: 500;
    color: var(--text-color);
    background-color: var(--primary-color);

    overflow: overlay;

    /* Page show animation */
    opacity: 0;
    transition: opacity .4s;
}

a {
    color: var(--accent-color);
    font-weight: 700;

    border-bottom: 5px;
    text-decoration: none;
    outline: none;
    box-shadow: none;
}
a:active, a:hover {
    color: var(--accent-color-active);

    background-size: 100% 0.1em, 100% 0.1em;
    text-decoration: 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; }

/* Links */
.linkeffecta,
.linkeffect a {    
    background: 
        linear-gradient(to right, rgba(255, 0, 0, 1), rgba(255, 0, 180, 1), rgba(0, 100, 200, 1));
    
    background-size: 0% 0.1em, 0 0.1em;
    background-position: 0% 100%, 0 100%;
    background-repeat: no-repeat;

    transition: all .25s ease;
}

.linkeffecta:hover,
.linkeffect a:hover {
    background-size: 100% 0.1em, 100%;
}

.linkeffecta:focus-visible,
.linkeffect a:focus-visible {
    border-radius: .25em;
    background-size: 100% 100%, 100%;
    color: white;
    box-shadow: 0px 0px 0px 4px var(--text-color);
}

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

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

.noselect { user-select: none; }
.noselect a { 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-container,
#page-contain {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;

    width: inherit;

    display: flex;
    flex-direction: column;
    align-items: center;
}

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

/* Content wrapper */
.content-wrapper-basic,
.content-wrapper {
    overflow-x: hidden;
    box-sizing: border-box;

    padding: 40px;

    width: calc(100vw - var(--scrollbar-width));

    padding-top: var(--content-padding-top);
    padding-bottom: var(--content-padding-bottom);

    /* For smaller screens, reduce padding to just 1em */
    @media screen and (max-width: 468px) {
        padding-left: 15px;
        padding-right: 15px;
        width: calc(100vw - 10px);
    }
}
.content-wrapper {
    max-width: var(--content-width);
}

.page-contain-background {
    background: linear-gradient(
        217deg,
        rgba(255, 0, 255, 0.6),
        rgba(255, 0, 0, 0) 70.71%
      ), linear-gradient(127deg, rgba(255, 145, 0, 0.8), rgb(0 255 0 / 0%) 70.71%),
      linear-gradient(336deg, rgb(0 0 255 / 80%), rgb(0 0 255 / 0%) 70.71%);
    min-height: 100vh !important;

    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
}
/*Legacy*/
/*
.page-contain-background {
background: url("/img/background.jpg") no-repeat center center fixed;
    background-size: cover;
}*/
/* Big transparent repeating background text using repeating linear-gradient and mask */
.page-contain-background::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    user-select: none;

    /* Use fixed px font-size and fixed SVG width/height for constant size */
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1500' height='300'><text x='0' y='110' font-family='Kanit, Lato, Arial, sans-serif' font-size='150px' font-weight='900' fill='rgba(0,0,0,0.07)' textLength='1500' lengthAdjust='spacingAndGlyphs'>CODRUT SOFTWARE</text></svg>"),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1500' height='300'><text x='0' y='150' font-family='Kanit, Lato, Arial, sans-serif' font-size='150px' font-weight='900' fill='rgba(0,0,0,0.07)' textLength='1500' lengthAdjust='spacingAndGlyphs'>CODRUT SOFTWARE</text></svg>");

    background-repeat: repeat;
    background-size: 1500px 300px, 1500px 300px; /* fixed size, not contain */

    /* Stagger the second layer to make it look wrapped */
    background-position: 0% 0%, 50% 100px;

    opacity: 1;
}
.page-contain-background > * {
    position: relative;
    z-index: 1;
}


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

/* Content & Text */
.content-text {
    font-size: 1em;
}
.subcontent-text {
    font-size: 1em;
    font-weight: 300;
}
.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;
}
.accent-color-text {
    color: var(--accent-color)
}
/* Password input styles */
.password-text {
    -webkit-text-security: disc;
   /*  text-security: disc; */
    /* fallback for browsers that don't support text-security */
    font-family: 'text-security-disc', 'Lato', Arial, sans-serif;
}

/* Horizonta scrollable text box */
.scroll-textbox {
    background-color: #a5a5a5ad;
    border-radius: 1em;
    padding: 1em;

    max-width: 70vw;
    max-height: 20em;
    overflow: scroll;
}

/* List */
.formatted-list li {
    padding: .1em;
}

/* Tag list */
#tag-list {
    list-style-type: none;
    padding: 0px;
}

#tag-list li {
    margin-top: 3px;
    background-color: var(--generic-background);
    padding: 5px;
    border-radius: 1em;
    margin: none;
    display: inline-block;
    margin-right: 10px;
}

/* Loader */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.loader {
    border: 16px solid rgba(50, 100, 255, 1);
    
    border-top: 16px solid #f3f3f3;

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

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

/* Navigation bar */
nav {
    background-color: var(--nav-background);
    position: fixed;
    z-index: 10000;
    top: var(--nav-offset);

    backdrop-filter: blur(6px);

    justify-content: space-between;

    display: flex;
    flex-direction: row;
    padding: var(--nav-padding);
    padding-left: calc(24px);
    padding-right: calc(24px);
    border-style: none;

    box-shadow: none;

    width: 100vw;

    /* General */
    transition: border-radius .15s ease;

    /* Scroll hide */
    transition: top 0.5s ease,
                background-color 0.5s ease,
                box-shadow 0.5s ease;
}

.nav-scrolled-down {
    background-color: var(--nav-background-scroll);
    box-shadow: 0 0 2px 0px var(--text-color);
}

/* Nav -> Links */
nav a {
    text-decoration: none;
}

/* Nav -> Title */
nav > div[id="nav-title"] a {
    display: flex;
    align-items: center;
    gap: 10px;
    
    font-size: 1.25em;

    color: inherit;
    max-width: max-content;
    border-radius: 8px;
}
nav > div[id="nav-title"] a[return-root]:hover::after,
nav > div[id="nav-title"] a[return-back]:hover::after {
    display: block;
    opacity: 0.5;
    font-size: 0.6em;

    font-family: 'Kanit';
    font-weight: 700;

    position: absolute;
    left: calc(var(--nav-img-size) + 10px);
    top: calc(100% - 10px);
    pointer-events: none;
    white-space: nowrap;

    /* Hide label for mobile */
    @media screen and (max-width: 468px) {
        display: none;
    }
}
nav > div[id="nav-title"] a[return-root]:hover::after {
    content: "RETURN TO /";
}
nav > div[id="nav-title"] a[return-back]:hover::after {
    content: "RETURN BACK";
}
nav > div[id="nav-title"] a:focus-visible {
    box-shadow: 0 0 0px 4px var(--text-color);
}
nav > div[id="nav-title"] img {
    height: var(--nav-img-size);
    width: var(--nav-img-size);
}
nav > div[id="nav-title"] span {
    position: relative;

    font-family: 'Kanit';
    font-weight: 700;

    /* Hide label for mobile */
    @media screen and (max-width: 468px) {
        display: none;
    }
}

/* Accesability buttons */
.nav-accessiblebutton {
    position: fixed;
    display: none;

    z-index: 1;

    font-size: 20px;
    top: 0px;

    white-space: nowrap;
    min-width: 250px;
    width: min-content;

    height: 100%;

    display: flex;
    align-items: center;

    outline: none;
    background-color: var(--container-color-active);
    
    border-radius: 10px;
    padding: 4px;

    opacity: 0;
    overflow: hidden;

    pointer-events: none;

    transition: all .15s ease-in-out;   

    left: -500px;
}
.nav-accessiblebutton:focus-visible {
    pointer-events: all;
    opacity: 1;
    left: 0px;
}
/* Nav -> Buttons */
#nav-buttons {
    display: flex;
    align-items: center;
    gap: 20px;
    font-size: 20px;
}
#nav-buttons a {
    color: inherit;
}

#nav-buttons > div,
#nav-buttons > a {
    position: relative;
    cursor: pointer;
    box-sizing: border-box;
    color: inherit;
    transition: all .15s ease;
    width: var(--nav-img-size);
    height: var(--nav-img-size);
    text-align: center;

    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
}
#nav-buttons > div[hidden],
#nav-buttons > a[hidden] {
    display: none;
}
#nav-buttons > div:hover,
#nav-buttons > a:hover {
    scale: 1.1;
    color: white;
    filter:
    drop-shadow( 1px  0px 0px rgba(128, 0, 121, 0.2)) 
    drop-shadow(-1px  0px 0px rgba(128, 0, 121, 0.2))
    drop-shadow( 0px  1px 0px rgba(128, 0, 121, 0.2)) 
    drop-shadow( 0px -1px 0px rgba(128, 0, 121, 0.2))
    drop-shadow(0px 0px 15px rgb(204, 5, 211)) !important;
}
#nav-buttons > div:active,
#nav-buttons > a:active {
    scale: 0.9;
}
#nav-buttons > div:focus-visible,
#nav-buttons > a:focus-visible {
    background-color: var(--container-color-active);
    box-shadow: 0 0 0px 4px var(--text-color);
    outline: none;
}
#nav-buttons > div > img, 
#nav-buttons > a > img {
    height: calc(var(--nav-img-size) - 2px);
    border-radius: 100%;
}

.icon-rotate-90:hover {
    rotate: -90deg;
}

#nav-space {
    height: var(--nav-height-total); /* Height + translate y * 2 */
}

/* Scroll hider */
.hiddenby-scroll {
    top: calc(0px - var(--nav-height-total));
}

.hiddenby-scroll-menu {
    top: var(--nav-offset) !important;
    max-height: calc(100vh - 3em - var(--nav-offset)) !important; /* Add offset for mobile */
}

/* Navigation menus */
.navigation-popup {
    position: fixed;
    z-index: 10000;

    background-color: var(--container-color);
    padding: 1.5em;
    border-radius: 1em;
    width: 330px;

    top: calc(var(--nav-height-total));
    right: 1em;

    box-shadow: 0px 0px 6px var(--text-color);
    overflow-y: auto; /* scroll */

    max-height: calc(100vh - var(--nav-height-total)); /* Width - nav */ /* Add offset for mobile */

    /* Show - Scroll hide */
    transition: translate .25s ease, top 1s ease;
    
    background-color: var(--container-color-blur);
    backdrop-filter: blur(20px);

    @media screen and (max-width: 468px) {
        padding: 1em;
        width: calc(100vw - 4em);
        
        right: 0px;
        top: 0px;
        border-top-right-radius: 0px;
        border-bottom-right-radius: 0px;
        border-bottom-left-radius: 0px;
        min-height: 100%;
        max-height: 100%;

        padding-top: var(--nav-height);
    }
}

.navigation-popup-mobile-controls {
    cursor: pointer;
    width: 20px;
    height: 20px;

    top: calc(var(--nav-padding));
    right: 20px;
    padding: 20px;

    position: fixed;

    justify-content: center !important;
    align-items: center !important;

    color: var(--text-color);
    background-color: var(--container-color);

    /* Style */
    border: none;
    border-style: solid;
    border-width: 3px;
    border-color: var(--container-color-active);
    border-radius: 8px;
    font-size: 14px;
    box-sizing: border-box;
    font-size: 1.25em;

    transition: all .2s ease-in-out;

    /* Display */
    display: none;
    @media screen and (max-width: 468px) {
            display: flex;
    }
}
.navigation-popup-mobile-controls:hover,
.navigation-popup-mobile-controls:active {
    color: white;
    border-color: rgb(150, 0, 0);
    background-color: rgb(150, 0, 0);
}

/* Navigation hub */
#navigation-hub > div {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: space-around;
    justify-content: stretch;
    margin-top: 10px;
}
#navigation-hub > div > a {
    width: 85px;
    cursor: pointer;
    border-radius: 12px;

    color: inherit;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    align-items: center;
    text-align: center;

    padding: 10px;
    font-size: 1.15em;
    gap: 4px;
}
#navigation-hub > div > a:hover {
    background-color: var(--container-color-active);
    box-shadow: 0 0 2px var(--text-color);
}
#navigation-hub > div > a:active {
    background-color: var(--container-color-active);
    box-shadow: 0 0 0px 4px var(--text-color);
}
#navigation-hub > div > a:focus-visible {
    background-color: var(--container-color-active);
    box-shadow: 0 0 0px 4px var(--text-color);
}
#navigation-hub > div > a img {
    height: 48px;
}
#navigation-hub > div > a i {
    font-size: 48px;
}

#navigation-hub > h4 {
    font-size: 1.25em;
    margin: 0px;
}

#navigation-hub > div > h5 {
    font-size: 16px;
    width: 100%;
    margin: 0px;
    margin-top: 8px;
}

#navigation-hub > div > separator {
    width: 100%;
    height: 2px;
    border-radius: 10px;
    background-color: var(--generic-background);
}

/* Scroll up button */
#scrollup-button {
    position: fixed;

    cursor: pointer;
    box-shadow: 0px 0px 1px 0px var(--text-color);

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

    font-size: 20px;

    right: 20px;
    bottom: 40px;
    
    background-color: var(--container-color-active);
    border-radius: 100%;

    width: 55px;
    height: 55px;

    transition: all .2s ease-in-out;
}

/* Cookie overlay */
#cookie-overlay {
    position: fixed;
    bottom: 10px;
    margin-left: 10px;
    margin-right: 1em;
    background: #4d2464;
    z-index: 9999; /* On Top of the World! */
    line-height: 20px;
    font-size: 14px;
    border-radius: 6px;
    max-width: 50em;
    padding: 1.5em;
    color: white;
  
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
}
#cookie-overlay img {
    width: 3em;
    float: left;
    margin-right: 1em;
}
#cookie-overlay button {
    width: 200px;
    margin-left: 6px;
    margin-right: 6px;
    margin-top: 6px;

    @media screen and (max-width: 468px) {
        width: calc(100% - 2em);
    }
}

/* Buttons */
.pizza-button {
    font-size: 1.25em;
    font-weight: 700;

    color: white;
    background-color: #5F7FFF;
    border: none;
    border-radius: 15px;

    display: inline-block;

    cursor: pointer;

    padding-left: 30px;
    padding-right: 30px;
    padding-top: 15px;
    padding-bottom: 15px;
}
.pizza-button:hover {
    color: white;
    background-color: #7893ff;
}
.pizza-button:active {
    color: white;
    background-color: #3961ff;
}
.pizza-button:focus-visible {
    box-shadow: 0 0 0px 5px var(--text-color);
}


/* Link buttons */
.linkbutton {
    padding: 4px;
    border: none;
    width:fit-content;
    border-radius: 25px;
    cursor: pointer;
    user-select: none;
}
.linkbutton:hover {
    background-color: rgba(200, 200, 200, 0.5);
    filter: drop-shadow(0px 0px 5px rgb(56, 58, 58));
    transition: all .30s ease-in-out;
}
.linkbutton:active {
    color: white;
    background-color: rgba(20, 20, 20, 0.4);
    filter: drop-shadow(0px 0px 5px rgb(56, 58, 58));
    transition: all .30s ease-in-out;
}
.linkbutton:focus-visible {

    box-shadow:inset 0px 0px 0px 5px var(--text-color);
}

/* YButton */
.ybutton {
    cursor:pointer;

    background: linear-gradient(-45deg,  rgb(216, 0, 205), rgb(255, 123, 0));
    border-radius: 1em;
    box-sizing: border-box;
    padding: 1em;
    border: none;

    user-select: none;

    font-size: 1em;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.753);

    display: inline-block;
    text-align: center;

    transition: all .30s ease-in-out;
}
.ybutton-thin {
    padding: .25em;
    font-size: .8em;
}
.ybutton-singleicon {
    min-width: auto;
    width: 3em;
}
.ybutton:hover {
    color: rgba(255, 255, 255, 0.753);
    filter: drop-shadow(0px 0px 5px rgb(0, 0, 0));
    
    transition: filter .20s ease-in-out;
}
.ybutton:focus-visible {
    filter: drop-shadow(0px 0px 5px rgb(0, 0, 0));
    box-shadow:inset 0px 0px 0px 5px rgb(255, 255, 255);
}
.ybutton:active {
    filter: grayscale(40%);
}
.ybutton:disabled {
    filter: grayscale(100%);
    transform: scale(1) !important;
    box-shadow: 0px 0px 0px 0px;
}

.singleline-ybutton {
    /* A ybutton that will be a element on It's own, no parents */
    max-width: calc(100% - 2em); /* padding */
    width: 200px;
    display: block;
}

/* Select */
.yselect {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap: 4px;
    position: relative;

    background-color: var(--container-color-active);
    border-radius: 24px;
}

.yselect input[type="radio"] {
    display: none;
}

.yselect label {
    user-select: none;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px;
    cursor: pointer;
    z-index: 1;
    border-radius: 24px;
}

.yselect label:hover {
    background-color: #64646411;
}
.yselect label:active {
    background-color: #64646422;
}

/* Dynamically adjust grid and background position */
.yselect {
    --item-count: 3; /* Default value; it will be set dynamically */
    --bg-width: calc(100% / var(--item-count) - 2px);
}

/* Supports maximum 10 elements */
.yselect input[type="radio"]:checked:nth-of-type(1) ~ .background { --bg-position: 0; }
.yselect input[type="radio"]:checked:nth-of-type(2) ~ .background { --bg-position: 1; }
.yselect input[type="radio"]:checked:nth-of-type(3) ~ .background { --bg-position: 2; }
.yselect input[type="radio"]:checked:nth-of-type(4) ~ .background { --bg-position: 3; }
.yselect input[type="radio"]:checked:nth-of-type(5) ~ .background { --bg-position: 4; }
.yselect input[type="radio"]:checked:nth-of-type(6) ~ .background { --bg-position: 5; }
.yselect input[type="radio"]:checked:nth-of-type(7) ~ .background { --bg-position: 6; }
.yselect input[type="radio"]:checked:nth-of-type(8) ~ .background { --bg-position: 7; }
.yselect input[type="radio"]:checked:nth-of-type(9) ~ .background { --bg-position: 8; }
.yselect input[type="radio"]:checked:nth-of-type(10) ~ .background { --bg-position: 9; }

.yselect-icons > label > i {
    text-align: center;
    padding: 8px;
}

/* Position the background dynamically based on the checked item */
.yselect .background {
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(var(--bg-position) * (var(--bg-width) + 4px));
    width: var(--bg-width);
    background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%);
    border-radius: 24px;
    transition: left 0.3s ease;
    z-index: 0;
}

/* Fade animation */
.loading-effect {
    border-radius: 8px;
    box-shadow: 0px 0px 2px 0px rgb(150, 150, 150);
    background: linear-gradient(100deg, rgba(220,220,220,0.5) 0%, rgba(80,80,80,0.75) 50%, rgba(220,220,220,0.5) 100%);
    background-size: 200% 100%;
    animation: loading-square-fade 3s infinite;
}

@keyframes loading-square-fade {
    0% {
        background-position: 100% 0;
        opacity: 100%;
    }
    50% {
        opacity: 75%;
    }
    100% {
        background-position: -100% 0;
        opacity: 100%;
    }
}

/* SIGN COMPONENTS */
/* Sign Button */
.signbutton {
    cursor: pointer;

    min-height: 60px;

    font-weight: 900;
    color: rgb(255, 255, 255);
    border: none;
    border-style: solid;
    border-width: 3px;
    border-color: rgb(190, 114, 209);

    box-sizing: border-box;
    font-size: 14px;
    

    padding: 16px;
    border-radius: 15px;

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

    background-color: rgb(160, 85, 210);
    
    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(167, 95, 185);
    border-color: rgb(167, 95, 185);
}
.signbutton:disabled {
    background-color: rgb(70, 59, 80);
    border-color: rgb(42, 42, 43);
}
.signbutton-small {
    max-width: 75px;
}
.singleline-signbutton {
    /* A signbutton that will be a element on It's own, no parents */
    min-width: min(200px, 100%);
    max-width: 100%;
    width: max-content;
    display: block;
}
.fullline-signbutton {
    width: 100%;
    display: block;
}

/* Row */
.rowgrid-signbutton {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
}
.rowgrid-signbutton button,
.rowgrid-signbutton a {
    flex-grow: 1;
}

/* Danger sign button */
.dangerbutton,
.pad-signbutton {
    padding: 1em;
    min-width: 15em;
}

.dangerbutton {
    background-color: rgb(167, 0, 0);
    border-color: #c43636;
}

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

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

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

/* Sign File input */
.signfileinput {
    font-size: 16px;

    background-color: var(--container-color-blur);
    border-style: solid;
    border-color: var(--container-color);
    border-width: 3px;
    border-radius: 16px;
    box-sizing: border-box;

    position: relative;

    padding: 10px;
}
.signfileinput::file-selector-button {
    min-height: 20px;
    cursor: pointer;
    font-weight: 900;
    color: rgb(255, 255, 255);
    border: none;
    border-style: solid;
    border-width: 3px;
    border-color: rgb(190, 114, 209);
    font-size: 14px;
    box-sizing: border-box;

    padding: 10px;
    border-radius: 15px;

    display: block;

    text-align: left;
    max-width: 100%;
    width: calc(150px + 6px + 20px);

    margin-bottom: 10px;

    background-color: rgb(160, 85, 210);

    transition: all .25s;
}
.signfileinput::file-selector-button:hover {
    background-color: rgb(148, 44, 245);
    border-color: rgb(129, 0, 204);
}
.signfileinput::file-selector-button:active {
    background-color: rgb(167, 95, 185);
    border-color: rgb(167, 95, 185);
}
.signfileinput::file-selector-button:disabled {
    background-color: rgb(70, 59, 80);
    border-color: rgb(42, 42, 43);
}

.singleline-signfileinput {
    width: 400px;
    max-width: 100%;
}

/* Sign Input */
.signinput{
    flex-grow: 1;

    min-height: 60px;

    min-width: none;

    background-color: rgb(222, 200, 230);
    color: black;
    border: solid 3px rgb(180, 134, 200);
    box-sizing: border-box;

    outline: none;

    padding: 16px;
    border-radius: 16px;

    transition: color .25s ease-in-out,
                background-color .25s ease-in-out;
}
.signinput:focus,
.signinput:active {
    background-color: rgb(240, 220, 240);
    color: black;
    border: solid 3px rgb(160, 10, 190);
}
.signinput:disabled {
    background-color: rgb(200, 200, 200);
    border-color: rgb(150, 150, 150);
    color: rgb(100, 100, 100);
}

.slimsigninput {
    height: 30px;
}


.singleline-signinput {
    max-width: 100%;
    width: 400px;
    display: block;
}
.singleline-signinput:is(textarea) {
    resize: vertical;
    display: block;
}

.fullline-signinput {
    width: 100%;
}

/* Sign Switch */
input[type="checkbox"].signswitch{
    font-size: 15px;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    min-width: 45px;
    max-width: 45px;

    width: 100px;
    height: 24px;
    background: #c25454;
    border-radius: 8px;
    position: relative;
    cursor: pointer;
    outline: none;
    transition: all .2s ease-in-out;
}
input[type="checkbox"].signswitch:hover:not(:disabled) {
    box-shadow: 0 0 0 3px #f5b0b0;
}
input[type="checkbox"].signswitch:focus-visible {
    box-shadow: 0px 0px 0px 3px #e47b7b;
}
input[type="checkbox"].signswitch:checked:hover:not(:disabled) {
    box-shadow: 0 0 0 3px #b0f5c0;
}
input[type="checkbox"].signswitch:checked:focus-visible {
    box-shadow: 0px 0px 0px 3px #7be495;
}
input[type="checkbox"].signswitch:checked{
    background: #35925f;
}
input[type="checkbox"].signswitch:after{
    position: absolute;
    content: "";
    width: 24px;
    height: 24px;
    border-radius: 10px;
    background: white;
    text-align: center;

    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% - 24px);
    transform: scale(.75);
}
input[type="checkbox"].signswitch:hover:checked:after{
    left: calc(100% - 24px);
    transform: scale(.8);
}
input[type="checkbox"].signswitch:active:checked:after{
    left: calc(100% - 30px);
}
input[type="checkbox"].signswitch:active:after{
    width: 30px;
}
input[type="checkbox"].signswitch:disabled{
    background: #8b8b8b;
}

@keyframes signswitch-loader-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
input[type="checkbox"].signswitch.signworking[disabled]:after {
    /* Loader */
    display: flex;
    align-items: center;
    justify-content: center;
    content: "⌛";
    background: rgb(255, 255, 255);

    scale: 1.05;

    animation: signswitch-loader-spin 1s linear infinite;
}

/* Sign Checkbox */
input[type="checkbox"].signcheckbox {
    font-size: 15px;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    min-width: 24px;
    max-width: 24px;

    width: 24px;
    height: 24px;
    background: #fff;
    border-radius: 6px;
    position: relative;
    cursor: pointer;
    outline: none;
    transition: all .2s ease-in-out;
    border: 2px solid #b0b0b0;
    vertical-align: middle;
}
input[type="checkbox"].signcheckbox:hover:not(:disabled) {
    box-shadow: 0 0 0 3px #b0f5c0;
}
input[type="checkbox"].signcheckbox:focus-visible {
    box-shadow: 0px 0px 0px 3px #7be495;
}
input[type="checkbox"].signcheckbox:checked {
    background: #2ecc40;
    border-color: #2ecc40;
}
input[type="checkbox"].signcheckbox:after {
    content: "";
    display: block;
    position: absolute;
    left: 7px;
    top: 3px;
    width: 6px;
    height: 12px;
    border-right: 3px solid #fff;
    border-bottom: 3px solid #fff;
    border-radius: 0;
    background: transparent;
    box-sizing: border-box;
    opacity: 0;
    transform: scaleY(0);
    transition:
        opacity 0.1s linear,
        transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
input[type="checkbox"].signcheckbox:checked:after {
    opacity: 1;
    transform: scaleY(1) rotate(405deg);
    transition:
        opacity 0.1s linear,
        transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
input[type="checkbox"].signcheckbox:disabled {
    background: #e0e0e0;
    border-color: #cccccc;
    cursor: not-allowed;
    opacity: 0.7;
}
input[type="checkbox"].signcheckbox:checked:disabled {
    background: #b0b0b0;
    border-color: #b0b0b0;
}

input[type="checkbox"].danger-signcheckbox:hover:not(:disabled) {
    box-shadow: 0 0 0 3px #f5b0b0;
}
input[type="checkbox"].danger-signcheckbox:focus-visible {
    box-shadow: 0px 0px 0px 3px #e47b7b;
}
input[type="checkbox"].danger-signcheckbox:checked {
    background: #cc2e2e;
    border-color: #cc2e2e;
}


@keyframes signcheckbox-loader-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
input[type="checkbox"].signcheckbox.signworking[disabled] {
    background: rgb(255, 255, 255);
}
input[type="checkbox"].signcheckbox.signworking[disabled]:after {
    /* Loader */
    display: flex;
    align-items: center;
    justify-content: center;
    content: "⌛";

    opacity: 1;
    border: none;
    background: none;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;

    animation: signcheckbox-loader-spin 1s linear infinite;
}

/* Sign Dropdown Edit */
.signdropdown-edit {
    flex-grow: 1;
    
    min-height: 60px;
    
    min-width: none;

    background-color: rgb(222, 200, 230);
    color: black;
    border: solid 3px rgb(180, 134, 200);
    box-sizing: border-box;

    outline: none;

    padding: 8px;
    border-radius: 16px;

    transition: all .25s ease-in-out;
}
.signdropdown-edit:focus,
.signdropdown-edit:active {
    background-color: rgb(240, 220, 240);
    color: black;
    border: solid 3px rgb(160, 10, 190);
}

.singleline-signdropdown-edit {
    max-width: 100%;
    width: 400px;
    display: block;
}

/* 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;
    box-sizing: border-box;

    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;
}
.singleline-signdropdown {
    /* A signdropdown that will be a element on It's own, no parents */
    min-width: min(200px, 100%);
    max-width: calc(100%); /* padding */
    width: max-content;
    display: block;
}
.fullline-signdropdown {
    /* A signdropdown that will be width 100*/
    width: 100%;
}

/* Simple table */
.simple-table {
    border-collapse: collapse;
}
.simple-table th {
    background-color: rgba(150, 150, 150, 0.4);
}
.simple-table th, 
.simple-table td {
    border: 1px solid gray;
    padding: 8px;
    text-align: center;
}

/* APP PAGES SPECIFIC */
/* Page - Account(+others) */
.accountbutton {
    min-width: 15em;
}


/* Float items */
.floatright {
    float: right !important;
}
@media screen and (min-width:456px) {
    .floatrightpc {
        float: right !important;   
    }
}

/* Footer */
footer {
    margin: 0px;
    padding: 0px;

    width: 100vw;
    min-height: 80px;
    background-color: var(--container-color);

    display: flex;
    flex-direction: column;
    align-items: center;

    width: inherit;
}

footer > div {
    max-width: var(--content-width);
    padding: 50px;

    width: calc(100vw - 100px - 10px); /* Subtract padding */
}

footer div > b {
    font-size: 0.75em;
}

#foter-logo {
    display: flex;
    align-items: center;
    gap: 10px;

    font-family: 'Kanit';
    font-weight: 900;
    font-size: 1.6em;
}
#foter-logo img {
    max-height: 48px;
    max-width: 100%;
    display: block;
}

#footer-rows {
    margin-top: 40px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 80px;
}
#footer-rows a {
    color: inherit;
    font-weight: 300;

    transition: all .2s ease;
}
#footer-rows a:focus-visible {
    box-shadow: 0px 0px 0px 2px;
}
#footer-rows > div > p {
    font-size: 1.2em;
    font-weight: 900;
    margin-bottom: 16px;
}
#footer-rows div {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 10px;
}

#footer-copyright {
    text-align: right;
    margin-top: 1em;
    font-size: 0.8em;
}

/* Footer link transitions */
.text-transition { transition: color .15s ease-in-out; }
.text-to-blue:hover { color: rgb(0, 134, 252) !important; }
.text-to-green:hover { color: rgb(0, 252, 0) !important; }
.text-to-yellow:hover { color: rgb(252, 214, 0) !important; }
.text-to-red:hover { color: rgb(255, 38, 0) !important; }
.text-to-pink:hover { color: rgb(248, 0, 174) !important; }

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

/* 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;}
}