@font-face {
    font-family: 'Shentox';
    src: url('fonts/Shentox-Regular.woff2') format('woff2'),
        url('Shentox-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'EVE Alpha';
    src: url('fonts/EVEAlpha-Bold.woff2') format('woff2'),
        url('fonts/EVEAlpha-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}
        

        .w20 { width: 20%; }
        .selection { display: block; width: 93% !important; text-align: left; }
        .table, .selecttable { display: table; width: 100%; }
        .cell { display: table-cell; padding: 10px; }
        .selectcell { display: table-cell !important; }
        .selectspace { display: table-cell; width: 5%; }

        .nicebox { background: rgba(0,128,0, 0.5); color: white; padding: 10px; border-radius: 5px; border: 2px solid lightgreen; font-style: normal !important; }
        .warnbox { background: rgba(255,255,0, 0.5); color: white; padding: 10px; border-radius: 5px; border: 2px solid yellow; }
        .strongbox { background: rgba(255,128,0, 0.5); color: white; padding: 10px; border-radius: 5px; border: 2px solid orange; }
        .denybox { background: rgba(255,0,0, 0.5); color: white; padding: 10px; border-radius: 5px; border: 2px solid red; }
        .okbox { background: rgba(0,255,0, 0.25); color: white; padding: 10px; border-radius: 5px; border: 2px solid green; }
        .infobox { background: rgba(255,255,255, 0.25); color: white; padding: 10px; border-radius: 5px; border: 2px solid white; }
        
        .labeltable, .checkmarks { display: table; width: 100%;}        
        .labeltable { font-weight: 700; color: #fff !important; }
        .l10, .l15, .l20, .l25 { display: table-cell; text-align: center; font-size: 0.9em; color: #fff; vertical-align: bottom; }
        .m10, .m15, .m20, .m25 { display: table-cell; height: 10px; }
        .l10, .m10 { width: 10%; }
        .l15, .m15 { width: 15%; }
        .l20, .m20 { width: 20%; }
        .l25, .m25 { width: 25%; }
        .left { text-align: left; }
        .right { text-align: right; }
        .leftmark { border-left: 2px solid #ccc; }
        .rightmark { border-right: 2px solid #ccc; }
        .leftmarkg { border-left: 2px solid #0f0; }
        .rightmarkg { border-right: 2px solid #0f0; }
        .leftmarkr { border-left: 2px solid #f00; }
        .rightmarkr { border-right: 2px solid #f00; }
        .leftmarko { border-left: 2px solid #f90; }
        .rightmarko { border-right: 2px solid #f90; }

        .leftmarky { border-left: 2px solid #ff0; }
        .rightmarky { border-right: 2px solid #ff0; }
        .leftheavyy { border-left: 4px solid #ff0 !important; }
        .leftheavyo { border-left: 4px solid #f90 !important; }
        .leftheavyr { border-left: 4px solid #f00!important; }

        .smallspace { height: 5px; width: 100%; }

        body {
            font-family: 'Shentox';
            font-weight: normal;
            font-style: normal;
            margin: 20px;
            background: #222;
            color: #fff;
            font-size: 1.25em;
        }

        h2 {
            font-family: 'Shentox';
            font-weight: bold;
            font-style: normal;
            display: block;
            border: 2px solid #fff;
            text-align: left;
            background: #000;
            padding: 20px;
            font-size: 2em;
            border-radius: 10px;
            text-transform: capitalize   !important;
        }
        fieldset {
            box-sizing: border-box;
            display: block;
            width: 100%;
            padding: 25px;
            border-radius: 10px;
            background: #006;
            border: 2px solid #00f;
            box-shadow: 2px 2px 10px #000;
        }
        legend { padding: 10px; background: #444; border-radius: 5px; font-size: 1.2em; }
        .answer {
            margin-top: 10px;
            font-style: italic;
            color: #ccc;
            }
        .ui-slider-handle {
            background: #00f !important;
    
        }
        .ui-slider-horizontal {
            border: none;
            background: #dff;
            box-shadow: inset (0 0 5px rgba(0,0,0,0.5));

        }
        .r5 { width: 12vw; }
        .ui-checkboxradio-label { margin: 0; font-weight:700; color: #fff !important;    border-radius: 5px; padding: 10px; }
        .ui-checkboxradio-label:hover { font-weight:700; }
        .ui-checkboxradio-label-checked { font-weight:700; }

        .ui-checkboxradio-label, .ui-checkboxradio-label:hover, .ui-checkboxradio-label-checked {
            font-family: 'Shentox';
            font-weight: 700;
            font-style: normal;
        }
        .intro {
            padding: 20px;
            padding-bottom: 40px;
            font-size: 1.25em;
        }


        .by { border: 4px solid #ff0 !important; }
        .bn { border: 4px solid lightblue !important; }
        .bo { border: 4px solid #f90 !important; }
        .br { border: 4px solid #f00 !important; }
        .by, .bn, .bo, .br { border-radius: 10px !important; padding: 10px; margin-bottom: 5px; }

        .ui-checkbox-radio {
               margin-left: 0;
                margin-right: -1px;
        }

        .by:hover, .bn:hover, .bo:hover, .br:hover { border: 4px solid #0F0 !important; }

        @media (orientation: landscape) {
            body { padding: 20px !important; margin: 50px !important;}
            #contentarea { display: block; max-width: 75% !important; margin-left: 0; }
            .column1 { min-width: 80%; display: table-cell !important; }
            .column2 { min-width: 20%; display: table-cell !important; }    
            .feedback { display: block; background: #333; padding: 15px; border-radius: 10px; border: 2px solid #555; box-shadow: inset (0 0 5px rgba(0,0,0,0.5)); position: fixed; top: 50px; right: 45px; width: 20%; }   
        }

        @media (orientation: portrait) {
            #contentarea { display: block; }
            
            .column1 { width: 100%; display: block; }
            .column2 { width: 100%; display: block; }
            .feedback { box-sizing: border-box; block; background: #333; padding: 15px; border-radius: 10px; border: 2px solid #555; box-shadow: inset (0 0 5px rgba(0,0,0,0.5)); position: fixed; bottom: 1.25%; left: 1.25%; width: 97.5%; z-index: 9999; }   
            body { padding: 0px !important; margin: 20px !important;}
            fieldset { padding: 10px !important; width: 100% !important; border: 0; background: transparent; box-shadow: none; }
        }
        
        .all, .int, .mid, .late, .end { padding: 10px; border-radius: 5px; color: #fff; margin-bottom: 10px; display: inline-block } 
        .all, .all:hover    { border: 2px solid #0f0; }
        .int, .int:hover    { border: 2px solid #ff0; }
        .mid, .mid:hover    { border: 2px solid #f90; }
        .late, .late:hover { border: 2px solid #f00; }
        .end, .end:hover { border: 2px solid #00f; }
        .all:hover, .int:hover, .mid:hover, .late:hover, .end:hover { box-shadow: 0px 0px 5px #fff, 0px 0px 10px #fff !important; } 
        .bigm   { margin-right: 20px !important; margin-bottom: 0px !important; }