/*  ---------------------------------------------------------------------------------------------------------------------------- */
/*  wyvern ui | styles for boxes used in the wyvern UI  */
/*  ---------------------------------------------------------------------------------------------------------------------------- */
    #wyvern-screen .box
    {
        /*width: auto;*/
        min-height: 300px;
        background: rgba(0,0,0,0.8);
        backdrop-filter: blur(5px);
        border-radius: 5px;
        border: solid 3px whitesmoke;
        padding: 10px;
    }

/*  ---------------------------------------------------------------------------------------------------------------------------- */
/*  wyvern ui | custom styles for wyvern input and textarea   */
/*  ---------------------------------------------------------------------------------------------------------------------------- */

/*  wyvern input ( transparent - to be used in a wrapper container with specific dimensions ) */
    #wyvern-screen .wvrn-input
    {
        position:absolute;
        color:whitesmoke;
        font-size: large;
        font-family:Arial, serif;
        width: calc( 100% - 10px);
        height:100%;
        display:block;
        border: none;
        outline: none;
        resize: none;
        background-color: transparent;
        text-align: center;
        line-height: 100%;
        top:0;
        left:0;
        margin:0;
        padding:0 5px 0 5px;
        border-radius: 0;
    }
/*  wyvern textarea ( transparent - to be used in a wrapper container with specific dimensions ) */
    #wyvern-screen .wvrn-textarea
    {
        position:absolute;
        color:whitesmoke;
        font-size: large;
        font-family:Arial, serif;
        width: calc( 100% - 25px);
        height:calc( 100% - 40px);
        display:block;
        padding:8px!important;
        max-height:500px;
        border: none;
        outline: none;
        resize: none;
        background-color: transparent;
        top:10px;
        border-radius: 0;
    }

/*  ---------------------------------------------------------------------------------------------------------------------------- */
/*  wyvern ui | custom styles for wyvern button   */
/*  ---------------------------------------------------------------------------------------------------------------------------- */
    #wyvern-screen .wvrn-button
    {
        padding:0;
        margin: 0;
        position: absolute;
        display: block;
        min-width: 100px;
        user-select: none;
        font-family: Arial, sans-serif;
        font-size: 1em;
        height:40px!important;
        line-height: 40px;
        border: none;
        text-align: center;
        cursor: pointer;
        background:transparent;
        z-index: 1000;
        color: black;
        font-weight: bold;
        width:100%;
    }
    #wyvern-screen .wvrn-button:hover
    {
        background-color: #000;
        color: white;
    }

/*  ---------------------------------------------------------------------------------------------------------------------------- */
/*  system  checkbox  */
/*  ---------------------------------------------------------------------------------------------------------------------------- */

    #wyvern-screen .wvrn-checkbox
    {
        display:inline-block!important;
        top:5px; bottom:0;
        position: relative;
    }
    #wyvern-screen .wvrn-checkbox .wvrn-checkbox-core
    {
        appearance: none;
        background-color: rgba(33, 11, 6, 0.25);
        /* background-color: transparent;*/
        border-radius: 72px;
        border-style: none;
        flex-shrink: 0;
        height: 11px!important;
        margin: 0;
        position: relative;
        width: 30px;
    }
    #wyvern-screen .wvrn-checkbox .wvrn-checkbox-core::before
    {
        bottom: -6px;
        content: "";
        left: -6px;
        position: absolute;
        right: -6px;
        top: -6px;
    }
    #wyvern-screen .wvrn-checkbox .wvrn-checkbox-core
    {

    }
    #wyvern-screen .wvrn-checkbox .wvrn-checkbox-core::after
    {
        transition: all 100ms ease-out;
        background-color: #fff;
        border-radius: 50%;
        content: "";
        height: 14px;
        left: 3px;
        position: absolute;
        top: 3px;
        width: 14px;
    }
    #wyvern-screen .wvrn-checkbox input[type=checkbox]
    {
        cursor: pointer;
    }
    #wyvern-screen .wvrn-checkbox .wvrn-checkbox-core:hover
    {
        background-color: rgba(37, 37, 37, 1.0);
        transition-duration: 0s;
    }
    #wyvern-screen .wvrn-checkbox .wvrn-checkbox-core:checked
    {
        background-color: #026a04;
    }
    #wyvern-screen .wvrn-checkbox .wvrn-checkbox-core:checked::after
    {
        background-color: #fff;
        left: 22px;
    }
    #wyvern-screen .wvrn-checkbox :focus:not(.focus-visible)
    {
        outline: 0;
    }
    #wyvern-screen .wvrn-checkbox .wvrn-checkbox-core:checked:hover
    {
        background-color: forestgreen;
    }

/*  ---------------------------------------------------------------------------------------------------------------------------- */
/*  wyvern ui | custom styles for wyvern selector   */
/*  ---------------------------------------------------------------------------------------------------------------------------- */
    #wyvern-screen .wvrn-select
    {
        position: relative;
        display: block;
        min-width: 230px;
        user-select: none;
        font-family: Arial, sans-serif;
        font-size: 1.0em;
        height:40px;
        line-height: 30px;
        width:100%;
    }
    #wyvern-screen .wvrn-select-main
    {
        box-sizing: border-box;
        border: 2px solid #b7061e;
        border-radius: 1px;
        background-color: #ffffff;
        color: #333;
        cursor: pointer;
        position: relative;
        width:100%;
        height:100%;
        font-size: 1.2em;
        text-align: left;
        text-transform: capitalize;
    }
    #wyvern-screen .wvrn-select-selected
    {
        padding: 5px;
        color: #333;
        cursor: pointer;
        transition: background-color 0.2s;
    }
    #wyvern-screen .wvrn-select-options
    {
        box-sizing: border-box;
        display: none; /* Hidden by default */
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;

        border: 2px solid #4ba64b;
        border-top: none;
        background-color: #ffffff;
        border-radius: 0 0 5px 5px;
        max-height: 300px;
        overflow-y: auto;
        z-index: 1;
    }
    #wyvern-screen .wvrn-select-options.show
    {
        display: block;
    }
    #wyvern-screen .wvrn-select-option
    {
        padding: 5px;
        color: #333;
        cursor: pointer;
        transition: background-color 0.1s;
    }
    #wyvern-screen .wvrn-select-option:hover
    {
        background-color: #e6f0ff;
    }
    #wyvern-screen .wvrn-select-option.selected
    {
        background-color: #007BFF;
        color: white;
    }

/*  ---------------------------------------------------------------------------------------------------------------------------- */
/*  wyvern ui | custom styles for wyvern tables   */
/*  ---------------------------------------------------------------------------------------------------------------------------- */
    #wyvern-screen .table
    {
        /*table-layout: auto;*/
        background: transparent!important;
        color:whitesmoke!important;
        width: 100%;
        /*border-bottom: rgba(255,255,255,0.05) solid 1px!important;*/
    }
    #wyvern-screen .table th
    {
        border-bottom: rgba(255,255,255,0.1) 1px solid;
        color: rgba(255,255,255,0.4);
        text-transform: uppercase;
        font-size: 0.9em;
        text-align: left;
    }
    #wyvern-screen .table tr
    {
        color:whitesmoke!important;
        border-bottom: rgba(255,255,255,0.05) solid 1px!important;
    }
    #wyvern-screen .table td
    {
        font-weight: normal!important;
        line-height: 35px;
        color:whitesmoke!important;
        width:auto;
        border-bottom: rgba(255,255,255,0.05) solid 1px!important;
    }

/*  ---------------------------------------------------------------------------------------------------------------------------- */
/*  wyvern ui | TODO WIP  styles for wyvern tables   */
/*  ---------------------------------------------------------------------------------------------------------------------------- */
    #wyvern-screen .table .td-width-50px
    {
        padding:0;
        margin:0;
        width: 50px!important;
        max-width: 50px!important;
        min-width: 50px!important;
        overflow: hidden!important;
        text-overflow:ellipsis;
        white-space: nowrap!important;
    }
    #wyvern-screen .table .td-width-100px
    {
        padding:0;
        margin:0;
        width: 100px!important;
        max-width: 100px!important;
        min-width: 100px!important;
        overflow: hidden!important;
        text-overflow:ellipsis;
        white-space: nowrap!important;
    }
    #wyvern-screen .table .td-width-200px
    {
        padding:0;
        margin:0;
        width: 200px!important;
        max-width: 200px!important;
        min-width: 200px!important;
        overflow: hidden!important;
        text-overflow:ellipsis;
        white-space: nowrap!important;
    }
    #wyvern-screen .table .td-width-300px
    {
        padding:0;
        margin:0;
        width: 300px!important;
        max-width: 300px!important;
        min-width: 300px!important;
        overflow: hidden!important;
        text-overflow:ellipsis;
        white-space: nowrap!important;
    }
    #wyvern-screen .table .td-width-400px
    {
        padding:0;
        margin:0;
        width: 400px!important;
        max-width: 400px!important;
        min-width: 400px!important;
        overflow: hidden!important;
        text-overflow:ellipsis;
        white-space: nowrap!important;
    }
    #wyvern-screen .table .td-width-500px
    {
        padding:0;
        margin:0;
        width: 500px!important;
        max-width: 500px!important;
        min-width: 500px!important;
        overflow: hidden!important;
        text-overflow:ellipsis;
        white-space: nowrap!important;
    }
    #wyvern-screen .table .td-width-600px
    {
        padding:0;
        margin:0;
        width: 600px!important;
        max-width: 600px!important;
        min-width: 600px!important;
        overflow: hidden!important;
        text-overflow:ellipsis;
        white-space: nowrap!important;
    }
    #wyvern-screen .table .td-text-centered
    {
        text-align: center;
    }

/*  ---------------------------------------------------------------------------------------------------------------------------- */
/*  wyvern ui | text modifiers  */
/*  ---------------------------------------------------------------------------------------------------------------------------- */
    #wyvern-screen .text-white-muted
    {
        color: rgba(255,255,255,0.5);
    }
    #wyvern-screen .text-small
    {
        font-size: small;
    }
    #wyvern-screen .text-uppercase
    {
        text-transform: uppercase;
    }
    #wyvern-screen .text-lowercase
    {
        text-transform: lowercase;
    }
    #wyvern-screen .text-capitalize
    {
        text-transform: capitalize;
    }

/*  ---------------------------------------------------------------------------------------------------------------------------- */
/*  wyvern ui | relative positioned horizontal blocks to use as separators or spacers  */
/*  ---------------------------------------------------------------------------------------------------------------------------- */
    #wyvern-screen .spacer-50px
    {
        width:100%;
        height: 50px;
        display:block;
        position: relative;
        background:transparent;
    }
    #wyvern-screen .spacer-100px
    {
        width:100%;
        height: 100px;
        display:block;
        position: relative;
        background:transparent;
    }

/*  ---------------------------------------------------------------------------------------------------------------------------- */
/*  wyvern ui | helpers for visibility */
/*  ---------------------------------------------------------------------------------------------------------------------------- */
    #wyvern-screen .hidden
    {
        display:none!important;
    }
    #wyvern-screen .visible
    {
        display:block!important;
    }

/*  ---------------------------------------------------------------------------------------------------------------------------- */
/*  wyvern ui | helpers for click events */
/*  ---------------------------------------------------------------------------------------------------------------------------- */
    #wyvern-screen .noClickEvents
    {
        pointer-events: none;
    }

/*  ---------------------------------------------------------------------------------------------------------------------------- */
/*  wyvern ui | style text helpers */
/*  ---------------------------------------------------------------------------------------------------------------------------- */

/*  text alignment */
    #wyvern-screen .is-center-text
    {
        text-align: center!important;
    }
    #wyvern-screen .is-left-text
    {
        text-align: left!important;
    }
    #wyvern-screen .is-right-text
    {
        text-align: right!important;
    }
    #wyvern-screen .is-normal-text
    {
        font-weight: normal;
    }

/*  ---------------------------------------------------------------------------------------------------------------------------- */
/*  wyvern ui | misc helpers */
/*  ---------------------------------------------------------------------------------------------------------------------------- */
    #wyvern-screen .shadow
    {
        box-shadow: rgba(0, 0, 0, 0.6) 0 19px 38px, rgba(0, 0, 0, 0.22) 0 15px 12px;
    }