/* Base */
    :root {
        --color-cyberpunk: #F66;
        --font-cyberpunk: 'Cyberway Riders';
        --shadow-default: 0.25vmax 0.25vmax 0.5vmax #000;
        --shadow-text-default: 0.05vmax 0.05vmax 0.25vmax #000;
        --radius-default: 1vmax;
        --background-black-default:rgba(10,10,10,0.75);
        --background-white-default:rgba(240,240,240,.75);
        --scale-active: scale(1.1);
        --white-default: #EEE;
        --white-transparent: rgba(255,255,255,0.7);
        --black-default:#111;
        --modal-bg: rgba(129,59,59,0.85);
        --modal-content-padding: 2vmax 2vmax 5vmax 2vmax;
        --input-margin-bottom: 0.5vmax;
        --padding-box-default: 1vmax;
        --border-default: 1px solid var(--color-cyberpunk);
        --boarder-thicc-width: 0.5vmax;
        --background-black-active: rgba(50,50,50,0.75);
        --font-size-default: 2vmax;
        --color-bright-green: #AFA;
        --color-dark-green: #363;
        --color-bright-red: #FAA;
        --color-bright-orange: #FDA;
        --color-dark-red: #611;
        --color-noticebox-green: rgba(200,255,200,0.75);
        --bg-gradient-green: linear-gradient(to bottom, rgba(229,252,188,1) 0%,rgba(153,248,0,1) 98%);
        --bg-gradient-red: linear-gradient(to bottom, rgba(252,187,187,1) 0%,rgba(248,100,100,1) 98%);
        
    }

    @font-face {
        font-family: 'Cyberway Riders';
        src: url('media/CyberwayRiders.woff2') format('woff2'),
            url('media/CyberwayRiders.woff') format('woff');
        font-weight: normal;
        font-style: normal;
        font-display: swap;
    }

    h1{
        color:var(--color-cyberpunk);
        font-size:6vmax;
        text-shadow: var(--shadow-text-default);
    }
    h2{
        font-size:4vmax;
        color:var(--color-cyberpunk);
        text-shadow: var(--shadow-text-default);
        border-bottom: 1px solid var(--color-cyberpunk);
    }
    h3{
        font-size:3vmax;
        color:var(--color-cyberpunk);
        text-shadow: var(--shadow-text-default);
        
    }

    body{
        color:#CCC;
        font-family: Arial, Helvetica, sans-serif; 
    }
    *{
        position: relative;
    }
    *.bold{
        font-weight: bold;
    }
    *.hidden{
    display:none !important; 
    }
    *.right{
        text-align: right;
    }
    *.noMargin{
        margin:0;
        padding:0;
    }
    *.cyberpunk{
        font-family: var(--font-cyberpunk);
    }
    a, a:visited{
        color:var(--white-default); 
        text-decoration: none;
        font-weight: bold;  
    }
    a:active{
        transform:var(--scale-active);
    }
    p.subtitle{
        margin-top: 0;
        font-style: italic;
    }
    *.floatRight{
        float:right;
    }
    *.center{
        text-align: center;
    }

    /* Forms */
    input, select, textarea{
        padding:var(--padding-box-default);
        display:block;
        width:auto;
        margin-bottom: var(--input-margin-bottom);
        border: var(--border-default);
        background:var(--background-black-default);
        box-shadow: var(--shadow-default);
        border-top-right-radius: var(--radius-default);
        color:var(--white-default);
        font-size:var(--font-size-default);
    }
    input[type=submit]:not(.defaultFont),input[type=button]:not(.defaultFont){
        font-family: var(--font-cyberpunk);
    }
    input[type=submit],input[type=button]{
        color: var(--color-cyberpunk);
    }
    input[type=submit]:active,input[type=button]:active{
        background:var(--background-black-active);
    }
    textarea{
        display:block;
        width:auto;
    }
    input[type=checkbox], input[type=radio]{
        display:inline-block;
    }
    label{
        padding:var(--padding-box-default);
        display:inline-block;
        border: var(--border-default);
        background:var(--background-black-default);
        box-shadow: var(--shadow-default);
        border-top-right-radius: var(--radius-default);
        color:var(--white-default);
        margin-bottom: var(--input-margin-bottom);
        font-size:var(--font-size-default);
    }
    input.inline, select.inline{
        display:inline-block;
        margin: 0 0.5vmax 0.5vmax 0;
    }

    .cost{
        color: var(--color-bright-green);
    }


    #back{
        position: fixed;
        bottom:0; left:0;
        color:var(--color-cyberpunk);
        box-shadow: var(--shadow-default);
        border-top-right-radius: var(--radius-default);
        background: var(--background-black-default);
        font-size:5vmax;
        padding:1vmax 3vmax;
        font-weight: bold;
        border: var(--border-default);
        border-bottom: none;
        border-left: none;
        user-select: none;
    }
    #back:active{
        background:var(--background-black-active);
    }


    #bg{
        
        font-size:1vmax;
        position: fixed;
        left:0; right:0;
        top:0; bottom:0;

        background-color: var(--black-default);
        background: linear-gradient(to bottom, #45484d 0%,#000000 100%);
        background-size:cover;
        
    }
    #logo{
        
        position: fixed;
        pointer-events: none;
        background-image: url(media/splogo.svg);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: bottom center;
        bottom:0; top:0; left:0; right:0;
        opacity:0.1;
    }
    #content,
    body > div.content > div.page{
        position: fixed;
        left:0; right:0;
        top:0; bottom:0;
        padding:2vmax 2vmax 10vmax 2vmax;
        overflow: auto;
    }
/**/

/* Error / Notice */
    #errors{
        position: fixed;
        left:0; top:0; right:0;
    }

    @keyframes err{
        from{box-shadow: 0 0 1vmax #FAA;}
        to{box-shadow: 0 0 2vmax #FAA;}
    }
    @keyframes notice{
        from{box-shadow: 0 0 1vmax #AFF;}
        to{box-shadow: 0 0 2vmax #AFF;}
    }

    #errors > div.error{
        padding:1vmax;
        background:#A33;
        border:2px solid #FAA;
        color: #FAA;
        margin:0.5vmax;
        border-top-right-radius: var(--radius-default);
        animation: err 1s ease-in-out alternate infinite;
        font-weight: bold;
        font-size: 3vmax;
        text-align: center;
        opacity:1;
        transition:opacity 1s;
    }
    #errors > div.error.notice{
        background:#3AA;
        border:2px solid #AFF;
        color: #AFF;
        animation: notice 1s ease-in-out alternate infinite;
    }
    #errors > div.error.fade{
        opacity:0;
    }
    
/**/

/* Login / Register / Loading */
    #page-login,
    #page-signup,
    #page-loading
    {
        position: absolute;
        top:50%;
        left:0; right:0;
        bottom:auto;
        padding:0 3vw;
        transform:translateY(-50%);
    }
    #page-login form,
    #page-signup form{
        display:flex;
        flex-wrap: wrap;
    }
    #page-login form input,
    #page-signup form input{
        font-size: 3vmax;
        width:100%;
    }
/**/

/* Modal */
    #modal{
        position: fixed;
        left:0; right:0; top:0; bottom:0;
        background:rgba(0,0,0,.25);
        backdrop-filter: blur(3px);
    }
    #modal > div.wrap{
        position: fixed;
        left:5vw; right:5vw;
        max-height:90vh;
        top:50%;
        transform:translateY(-50%);
        background:var(--modal-bg);
        border: var(--color-cyberpunk) 1px solid;
        box-shadow: var(--shadow-default);
        border-top-right-radius: var(--radius-default);
        overflow:visible;
    }
    #modal{
        left:0; right:0;
    }
    #modal > div.wrap > div.content{
        padding:var(--modal-content-padding);
        overflow:auto;
        top:0; bottom:0; left:0; right:0;
        font-size:2.5vmax;
    }
    #modal > div.wrap > div.content.noPadding{
        padding:0;
    }
    #modal > div.wrap > div.content.hiddenOverflow{
        overflow: hidden;
    }

    #modal > div.wrap > input{
        position: absolute;
        bottom:0;
        font-size:3vmax;
        left:50%;
        transform: translate(-50%,50%);
    }

    #modal div.viewport{
        display:inline-block;
        vertical-align: top;
    }

    #modal canvas.scanner{
        position: relative;
        display:inline-block;
        box-sizing: border-box;
        width:100%;
        max-height:80vh;
        object-fit:cover;
        vertical-align: top;
        border-top-right-radius: var(--radius-default);
    }


    /* Shop item modal */
    div.shopBg{
        background-size: cover;
        position: absolute;
        left:0; top:0; bottom:0;
        width:20vw;
        
    }
    div.shopItemData{
        overflow:auto;
        background:rgba(255,255,255,.75);
        border-top-right-radius: var(--radius-default);
        padding: var(--modal-content-padding);
        backdrop-filter: blur(5px);
        margin-left: 20vw;
    }

    div.shopItemData div.buyButton > input{
        background: var(--bg-gradient-green);
        display:block;
        color: var(--color-dark-green);
        font-size:3vmax;
        width:100%;
        padding:2vmax;
    }
    div.shopItemData div.buyButton{
        margin:2vmax;
    }

    
    div.shopItemData > h2, div.shopItemData > p{
        margin: 0 0 1vmax 0;
    }
    div.shopItemData > p.cost,
    div.shopItemData > p.restricted
    {
        background: #161;
        padding:1vmax;
        margin-right:1vmax;
        display: inline-block;
        border-radius: var(--radius-default);
        border: var(--border-default);
        border-color: var(--color-bright-green);
    }
    div.shopItemData > p.restricted{
        background: var(--color-dark-red);
        border-color: var(--color-bright-red);
    }
    div.shopItemData > p.desc,
    div.productBought{
        color:var(--color-dark-red);
        display: block;
        background: var(--white-default);
        padding:2vmax;
        box-shadow: var(--shadow-default);
        border-radius: var(--radius-default);
    }
    div.shopItemData > p.footnote{
        font-size:1.5vmax;
        color:var(--color-dark-red);
        font-style: italic;
        opacity: 0.75;
        display: block;
        padding: 1vmax;
    }

    div.productBought{
        
    }

    /* User picker modal */
    form.userPicker > input{
        display: inline-block;
    }
    div.userPicker > div.searchResult{
        
    }

/**/


/* Sections (big buttons) */
    div.section{
        padding:1vmax;
        border-top-right-radius: var(--radius-default);
        border:2px solid var(--white-default);
        margin-bottom:0.5vmax;
        box-shadow: var(--shadow-default);
        font-size:3vmax;
        background: linear-gradient(to bottom, rgba(252,234,187,1) 0%,rgba(248,181,0,1) 98%);
        color:#330;
        font-weight: bold;
        user-select: none;
    }
    div.section:active{
        transform: scale(0.95);
    }
    div.section > *{
        vertical-align: middle;
    }
    div.section > img{
        width:6vmax;
        height:6vmax;
        filter: sepia(93%) brightness(50%) saturate(1000%) hue-rotate(-20deg);
    }
    div.section.barcode{
        color:#030;
        background: linear-gradient(to bottom, rgba(253,211,213,1) 0%,rgba(255,85,91,1) 98%);
    }
    div.section.barcode > img{
        filter: sepia(93%) brightness(50%) saturate(1000%) hue-rotate(300deg);
    }
    div.section.assets{
        color:#303;
        background: linear-gradient(to bottom, rgba(243,228,254,1) 0%,rgba(212,151,255,1) 98%);
    }
    div.section.assets > img{
        filter: sepia(93%) brightness(50%) saturate(1000%) hue-rotate(-150deg);
    }
    div.section.store,
    div.section.wallet{
        color:#030;
        background: var(--bg-gradient-green);
    }
    div.section.store > img,
    div.section.wallet > img{
        filter: sepia(93%) brightness(50%) saturate(1000%) hue-rotate(50deg);
    }

    div.section.admin{
        color:#033;
        background: linear-gradient(to bottom, rgba(188,251,252,1) 0%,rgba(0,240,248,1) 98%);
    }
    div.section.admin > img{
        filter: sepia(93%) brightness(50%) saturate(1000%) hue-rotate(120deg); 
    }
/**/

/* Page:User */
     /* Change pass form */
     form.changePassForm > p{
        margin-bottom:0;
    }
/**/

/* Page: Store */
    #page-store div.products{
        margin-bottom:2vmax;
        display:flex;
        justify-content: space-between;
        gap:1vmax;
        flex-wrap: wrap;
    }
    #page-store div.products > div.category{
        flex:100%;
    }
    #page-store div.products > div.category h3{
        margin:0;
    }
    #page-store div.products > div.product{
        border: var(--color-bright-green) 0.25vmax solid;
        background:var(--background-black-default);
        box-shadow: var(--shadow-default);
        border-top-right-radius: var(--radius-default);
        color:#EEE;
        flex:48%;
        overflow:hidden;
        box-sizing: border-box;
        max-width:49%;
    }
    #page-store div.products > div.product.outOfStock{
        border-color: var(--color-bright-red);
    }
    #page-store div.products > div.product.inactive{
        opacity:0.5;
        border-color: var(--color-bright-red);
    }
    #page-store div.products > div.product:active{
        transform:var(--scale-active);
        background:var(--background-black-active);
    }
    #page-store div.products > div.product p.costRow > span.stock.out{
        color: var(--color-bright-red);
        font-weight: normal;
    }
    #page-store div.products > div.product p.title,
    #page-store div.products > div.product p.costRow{
        font-size:2.25vmax;
        margin:0;
    }
    #page-store div.products > div.product p.costRow{
        font-size:2vmax;
        font-style: italic;
    }
    #page-store div.products > div.product p.costRow > span.stock{
        color: var(--color-bright-green);
    }
    #page-store div.products > div.product p.costRow > span.stock{
        color: var(--color-bright-green);
    }
    
    #page-store div.products > div.product > div.ruler{
        background:rgba(0,0,0,.75);
        padding:1vmax;
        backdrop-filter: blur(3px); 
        left:0;
        bottom:0;
        width:70%;
        overflow:hidden;
        border-top-right-radius: var(--radius-default);
        margin-top:6vmax;
    }
    #page-store div.products > div.product > div.bg{
        position: absolute;
        top:0; left:0; bottom:0; right:0;
        background-size: cover;
        background-position: center;
    }

    
/**/


/* Page: Store edit / Asset editor */

    #page-assetEdit input,
    #page-storeEdit input,
    #page-assetEdit select,
    #page-storeEdit select,
    #page-assetEdit textarea,
    #page-storeEdit textarea{
        font-size:2.5vmax;
    }
    
    #page-storeEdit textarea,
    #page-assetEdit textarea{
        width:100%;
        display:inline-block;
        box-sizing: border-box;
    }

    #page-storeEdit div.formFlex,
    #page-assetEdit div.formFlex{
        display:flex;
    }



/**/


/* Page: Credits */

    #purchaseCredit,
    div.refreshPayment{
        text-align: center;
    }
    #purchaseCredit > input,
    div.refreshPayment input{
        font-size:3vmax;
        display: inline-block;
    }

    #purchaseCredit input.defaultFont{
        margin:1.5vmax;
    }
    #purchaseCredit input{
        display:inline-block;
        box-sizing: border-box;
        font-size:3vmax;
    }
    #purchaseCredit > p.formTitle{
        font-style: italic;
        margin:0;
    }
    #purchaseCredit > hr{
        background:none;
        border-top: 1px solid var(--white-default);
    }
    
    #page-credits > div.history > div.transaction{
        background:var(--white-transparent);
        padding: 1vmax;
        margin-bottom: 0.5vmax;
        color:var(--black-default);
        border-top-right-radius: var(--radius-default);
    }
    
    #page-credits > div.history.purchase > div.transaction{
        padding-left: 10vmax;
    }
    #page-credits > div.history.purchase > div.transaction p.title{
        font-weight: bold;
    }
    #page-credits > div.history.purchase > div.transaction p{
        margin:0;
    }
    #page-credits > div.history.purchase > div.transaction div.img{
        display: block;
        position: absolute;
        left:0;
        top:0;
        height:100%;
        width:8vmax;
        background-size: cover;
    }


/**/

/* User editor / Assets */
    /* Search form */
    #userSearch,
    #assetSearch{
        display: flex;
        width:100%;
        justify-content: space-between;
    }
    #userSearch > input.searchText,
    #assetSearch > input.searchText{
        width: 100%;
        margin-right:1vmax;
    }
    #assetSearch > input{
        margin-right:1vmax;
    }


    /* User table */
    #page-userManager > table.users{
        width:100%;
    }
    
    #page-userManager > table.users td{
        border:1px dotted var(--white-default);
        padding:1vmax;
    }

    /* Edit form */
    form.userEdit > p{
        margin-bottom:0;
    }


/**/

/* Page: Devices */

    #page-deviceManager div.device{
        padding: 2vmax 1vmax;
        display:flex;
        justify-content: space-between;
        font-weight: bold;
        font-size: 2.5vmax;
        border: var(--color-bright-green) 0.25vmax solid;
        background:var(--background-black-default);
        box-shadow: var(--shadow-default);
        border-top-right-radius: var(--radius-default);
        color: var(--color-bright-green);
        box-sizing: border-box;
        margin-bottom: 0.25vmax;
    }
    #page-deviceManager div.device.red{
        border-color: var(--color-bright-red);
        color: var(--color-bright-red);
    }

/* Assets */

    #page-assets div.assets > div.asset{
        border: var(--color-bright-green) 0.25vmax solid;
        background:var(--background-black-default);
        box-shadow: var(--shadow-default);
        border-top-right-radius: var(--radius-default);
        color: var(--color-bright-green);
        overflow:hidden;
        box-sizing: border-box;
        padding: 4vmax 0 4vmax 14vmax;
        margin-bottom: 0.25vmax;
    }
    #page-assets div.assets > div.asset.loaned{
        border-color: var(--color-bright-red);
        color: var(--color-bright-red);
    }
    #page-assets div.assets > div.asset.loanedByMe h3{
        color: var(--color-bright-orange);
    }
    #page-assets div.assets > div.asset.loanedByMe{
        border-color: var(--color-bright-orange);
        border-width: var(--boarder-thicc-width);
        color: var(--color-bright-orange);
    }
    #page-assets div.assets > div.asset.inactive{
        opacity:0.5;
    }
    #page-assets div.assets > div.asset div.bg{
        position: absolute;
        left:0; top:0;
        height:100%;
        width:12vmax;
        background-size: cover;
    }
    #page-assets div.assets > h2{
        margin-bottom:0.5vmax;
        text-transform: capitalize;
    }
    #page-assets div.assets > div.asset > h3{
        margin:0;
    }
    #page-assets div.assets > div.asset > p.subtitle{
        margin:0;
        position: absolute;
        bottom: 0; right:0;
        padding: 0.5vmax 1vmax;
        font-size: 1.8vmax;
        max-width: 70%;
    }
    
    
    #page-assets div.assets > div.asset:active{
        transform:var(--scale-active);
        background:var(--background-black-active);
    }


    /* Modal */
    div.inventoryAsset > h2{
        margin:0;
    }
    div.inventoryAsset{
        padding: 14vmax 2vmax 6vmax 2vmax;
    }
    div.inventoryAsset > div.bg{
        position: absolute;
        height:12vmax;
        top:0; left:0; right:0;
        background-size:cover;
    }
    div.inventoryAsset p.subtitle{
        text-transform: capitalize;
        font-size: 2vmax;
    }

/**/