/*  ---------------------------------------------------------------------------------------------------------------------------- */
/*  css reset */
/*  ---------------------------------------------------------------------------------------------------------------------------- */

/*  ---------------------------------------------------------------------------------------------------------------------------- */
/*  general                                                                                                                      */
/*  ---------------------------------------------------------------------------------------------------------------------------- */
    body, html
    {
        width:100vw;
        height:100vh;
        margin: 0;
        padding: 0;
        overflow: hidden;
        border: 0;
        vertical-align: baseline;
        font-family: Arial, serif, serif;
        font-size: 15px;
        font-weight: normal!important;
        scroll-behavior: smooth;
    }
    h1
    {
        font-size: 30px;
        font-weight: normal;
    }

/*  ---------------------------------------------------------------------------------------------------------------------------- */
/*  viewport container */
/*  ---------------------------------------------------------------------------------------------------------------------------- */

    #viewport
    {
        width:100vw;
        height:100vh;
        position:absolute;
        inset:0;
        background: rgba(0, 0, 0, 0.19);
        display: block;
        overflow: hidden!important;
        top: 0;
        left: 0;
        z-index: 10;
        padding: 0;
        margin: auto;
        font-family: Arial, serif;
        font-weight: normal;
    }
    #viewport #system-loader
    {
        width:32px;
        height:32px;
        inset:0!important;
        position:absolute;
        margin:auto;
        display:block;
        background-color: transparent;
    }
    #viewport #system-loader-layer
    {
        width:100vw;
        height:100vh;
        padding: 0;
        margin:0;
        /*margin:auto;*/
        z-index: 1000;
        /*background: rgba(0,0,0,0.1);*/
        /*backdrop-filter: blur(8px);
        background: rgba(0,0,0,0.3);*/
        position:absolute;
        display:none;
    }
    #viewport #system-dev
    {
        display:none;
    }

/*  stage - IF YOU WISH TO SCROLL THE ENTIRE PAGE VERTICALLY APPLY overflow-y: hidden!important; HERE !!! */
    #viewport #stage
    {
        width:100vw;
        /*height:100vh;*/
        height:100%;
        /*background: rgba(10, 10, 10, 0.8);*/
        overflow-y: hidden!important;
        overflow-x: hidden!important;
        display:block;
        margin:auto!important;
        position: relative;
        font-weight: bold;
        color: whitesmoke;
        z-index: 100;

    }

/*  ---------------------------------------------------------------------------------------------------------------------------- */
/*  general styles                                                                                                               */
/*  ---------------------------------------------------------------------------------------------------------------------------- */

    #viewport input
    {
        all:unset;
        width:90%;
        height: 30px;
        border-radius: 4px;
        font-weight: normal;
        color: #1f2229;
        margin: 0;
        background: white;
        padding:5px;
        display: inline-block;
        position: relative;
    }
    #viewport label
    {
        all:unset;
        margin:5px!important;
        display: inline-flex;
        color: whitesmoke;
        font-size: medium;
        font-weight: normal;
    }
    #viewport .column
    {
        width:100%;
        height: 100%;
       /* overflow: hidden;*/
        display:block;
        margin: auto;
        background: transparent;
        padding: 0;
        flex: 1;
    }
    #viewport hr
    {
        background-color:rgba(255,255,255,0.05);
        border:none;width:50%;
        height:1px;
        display: block;
        position: relative;
        margin: 20px auto 20px auto;
    }
    #viewport form
    {
    }

/*  ---------------------------------------------------------------------------------------------------------------------------- */
/*  system  button  */
/*  ---------------------------------------------------------------------------------------------------------------------------- */

    #viewport .button
    {
        all:unset;
        font-weight: normal;
        text-align: center;
        cursor: pointer;
        user-select: none;
        border: none;
        border-radius: 20px;
        color:black;
        line-height: 30px!important;
        font-size: medium;
        min-width:100px;
        max-width: 500px;
        display:inline-block;
        height: auto;
        background:whitesmoke;
        position: relative;
        margin: 13px 5px 3px auto;
        padding: 1px 20px 1px 20px;
        box-shadow: rgba(0, 0, 0, 0.6) 0 19px 38px, rgba(0, 0, 0, 0.22) 0 15px 12px;
        text-transform: uppercase;

    }
    #viewport .button:hover
    {
        background: #1f2229;
        color: white;
    }
    #viewport .button-container
    {
        background: transparent;
        width:auto;
        display:block;
        position: relative;
        margin:auto;
        text-align: center;
    }
    #viewport .button-container-bottom
    {
        background: transparent;
        width:100%;
        display:block;
        position: absolute;
        margin:auto;
        text-align: center;
        bottom:50px;
    }

/*  ---------------------------------------------------------------------------------------------------------------------------- */
/*  wyvern helpers */
/*  ---------------------------------------------------------------------------------------------------------------------------- */

    #viewport .hidden
    {
        display:none!important;
    }
    #viewport .visible
    {
        display:block!important;
    }

/*  ---------------------------------------------------------------------------------------------------------------------------- */
/*  wyvern system message */
/*  ---------------------------------------------------------------------------------------------------------------------------- */

    #viewport #system-message
    {
        color:white;
        position: absolute;
        display: none;
        margin:auto;
        background: rgba(10,10,10,0.8);
        backdrop-filter: blur(10px);
        padding: 50% 10px 30px 10px;
        overflow: hidden;
        inset: 0;
        z-index: 1000;
        width:100%;
        height: 100%;
        box-shadow: rgba(0, 0, 0, 0.24) 0 3px 8px;
        text-align: center;
    }

    #viewport #system-error-modal
    {
        width:100vw;
        height:100vh;
        top:0;
        left:0;
        display:none;
        background-color: transparent;
        backdrop-filter: blur(10px);
    }

    #viewport #system-error
    {
        color:white;
        position: absolute;
        display: block;
        background: rgb(50,30,30);
        margin:auto;
        padding: 50px 10px 30px 10px;
        overflow: hidden;
        inset: 0;
        z-index: 1000;
        width:100%;
        height: 300px;
        box-shadow: rgba(0, 0, 0, 0.24) 0 3px 8px;
    }

/*  ---------------------------------------------------------------------------------------------------------------------------- */
/*  system error messages                                                                                                        */
/*  ---------------------------------------------------------------------------------------------------------------------------- */

    #error
    {
        text-align:center;
        font-size: 1.2em;
        color: rgba(255,255,255,0.3);
        font-family: Arial,serif;
        text-shadow: 0 4px 10px rgba(0,0,0,1.0);
        width:100vw;
    }
    #error a
    {
        font-size: 0.8em;
        color: rgba(255,255,255,0.3);
        font-family: Arial,serif;
        text-shadow: 0 4px 10px rgba(0,0,0,1.0);
        padding:10px;
        border-radius: 5px;
        background: #333333;
        text-decoration:none;
        cursor:pointer;
    }
    #error a:hover
    {
        color: rgba(255,255,255,1.0)!important;
        font-family: Arial,serif;
        text-shadow: 0 4px 10px rgba(0,0,0,1.0);
        padding:10px;
        border-radius: 5px;
        background: #111111;
        text-decoration:none;
        cursor:pointer;
    }
    #error hr
    {
        background-color:rgba(255,255,255,0.05);
        border:none;width:50%;
        height:1px;
        display: block;
        position: relative;
        margin: 20px auto 20px auto;

    }
    #error h2
    {
        font-weight:bold;
        margin-bottom: 2px;
        font-size: 1.2em;
    }
    #error h3
    {
        font-weight: bold;
        color:whitesmoke;
        font-size: 1.1em;
    }
    #error .info
    {
        font-weight: normal;
        color:whitesmoke;
        font-size: 0.9em;
    }
    #error .warning
    {
        font-weight: bold;
        color:darkred;
        font-size: 0.9em;
    }

/*  ---------------------------------------------------------------------------------------------------------------------------- */
/*  webkit specific stuff                                                                                                        */
/*  ---------------------------------------------------------------------------------------------------------------------------- */

    input:-webkit-autofill
    {
        font-weight: bold!important;
        font-size: 1em!important;
    }
    ::-webkit-scrollbar
    {
        width:2px;
    }
    ::-webkit-scrollbar-thumb
    {
        border-radius: 6px;
        background: rgba(255,255,255,0.5);
    }
    ::-webkit-scrollbar-track
    {
        border-radius: 5px;
        background-color: transparent;
    }
    ::-webkit-scrollbar-thumb:window-inactive
    {
        background: rgba(0,0,0,0.0);
    }

    /*
        ::-webkit-scrollbar-thumb:window-inactive
        {
            background: rgba(0,0,0,0.1);
        }
        ::-webkit-scrollbar-button
        {
            background: transparent;
        }
    */

/*  ---------------------------------------------------------------------------------------------------------------------------- */
/*  firefox specific stuff                                                                                                       */
/*  ---------------------------------------------------------------------------------------------------------------------------- */

    @supports(scrollbar-width: thin) { .no-support { display: none; }}
    .scrollbar-width-auto { scrollbar-width: auto; }
    .scrollbar-width-thin { scrollbar-width: thin; }
    .scrollbar-width-none { scrollbar-width: none; }
    .no-support {
        text-align: center;
        padding: 10px;
        width: 450px;
        margin-left: auto;
        margin-right: auto;
        background: #ee6620;
        color: #fff;
        font-size: 14px;
        font-family: sans-serif;
    }