/** Global CSS */


/* reset */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p,
    blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn,
    em, img, ins, kbd, q, s, samp, small, strike, strong, tt, var,
    b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas,
    details, embed, figure, figcaption, footer, header, hgroup, menu, nav,
    output, ruby, section, summary, time, mark, audio, video {
    border:0;
    font:inherit;
    margin:0;
    outline:none;
    padding:0;
    vertical-align:baseline;
}

html {
    height: 100%;
    overflow: hidden;
}

/* links & buttons */
a {
    color:#579718;
    text-decoration:none;
    transition:all 0.5s ease;
}
a:hover {
    color:#999;
}

button {
    background: #4b7a8e;
    border-width: 0px;
    color:#FFF;
    cursor:pointer;
    font-family:'Open Sans Regular',
    serif;
    font-weight:bold;
    margin:.1em;
    padding:.5em;
    transition:all 0.5s ease;
}
button:hover:not(.nohovercolor){
    background:#FFF;
    /*color:#579718;*/
    color: #4b7a8e;
    /*border: 1px solid #FFF;*/
}
button:active,
button:focus {
    outline:0;
}

button.white {
    background:#FFF;
    color:#579718;
}
button.white:hover {
    background:#4b7a8e;
    color:#FFF;
}

/* floating text */
.float-right {
    float:right;
}
.float-left {
    float:left;
}

/* text */
h1 {
    font-size:1.8em;
    margin:15px 0 15px 0;
}
h3 {
    color:#579718;
    font-size:1.8em;
    margin:10px 0 10px 0;
}

.largest-text { font-size:1.6em; }
.larger-text { font-size:1.4em; }
.large-text { font-size:1.2em; }
.small-text { font-size:.8em; }
.smaller-text { font-size:.6em; }
.smallest-text { font-size:.4em; }

.black-text { color:#000; }
.green-text { color:#0F0 !important;}
.red-text { color:#FF0000; }
.white-text { color:#FFF; }

.pt-mono-text { font-family:'PT Mono', serif; }
.open-sans-text { font-family:'Open Sans', serif; }

.bold { font-weight:bold; }

.no-wrap { white-space:nowrap; }

input, select {
    font-family:'Open Sans Regular', serif;
    font-size:1.2em;
    margin:5px;
    padding:5px;
}
input.small { width:50px; }
input.medium { width:150px; }
input.large { width:250px; }

.no-user-select {
    -webkit-user-select: none;  /* Chrome all / Safari all */
    -moz-user-select: none;     /* Firefox all */
    -ms-user-select: none;      /* IE 10+ */
    user-select: none;          /* Likely future */
}

/* canvas */
canvas {
    left: 0;
    position: absolute;
    top: 0px;
}

/* errors */
ul.errors {
    list-style:none;
    margin:5px;
}
ul.errors li {
    color:red;
}
input.error {
    border:1px solid red;
}

/** forms and information grouping */
fieldset {
    border:1px solid #CCC;
    /*padding:10px;*/

    width: 100%;
    float: left;
    min-inline-size: unset;
}
fieldset legend {
    background:#FFF;
    font-size:1.3em;
}
fieldset table { width:100%; }
fieldset label {
    padding-right:10px;
    font-size:1.2em;
    font-style:italic;
}

/* header */
#reconnect-message-box {
    background:red;
    color:white;
    font-weight:bold;
    text-align:center;

    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1;
}

/* Local Lato Font Definition*/
/* latin-ext */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 300;
  src: url('fonts/Lato/Lato-Latin-Ext.eot');
  src: local('Lato Light'), local('Lato-Light'), 
          url('fonts/Lato/Lato-Latin-Ext.eot?#iefix') format('embedded-opentype'),
          url('fonts/Lato/Lato-Latin-Ext.woff2') format('woff2'),
          url('fonts/Lato/Lato-Latin-Ext.woff') format('woff'),
          url('fonts/Lato/Lato-Latin-Ext.ttf') format('truetype');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 300;
  src: url('fonts/Lato/Lato-Latin.eot');
  src: local('Lato Light'), local('Lato-Light'), 
        url('fonts/Lato/Lato-Latin.eot?#iefix') format('embedded-opentype'),
        url('fonts/Lato/Lato-Latin.woff2') format('woff2'),
        url('fonts/Lato/Lato-Latin.woff') format('woff'),
        url('fonts/Lato/Lato-Latin.ttf') format('truetype');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* pt-mono-regular - latin-ext_cyrillic_cyrillic-ext_latin */
@font-face {
    font-family: 'PT Mono';
    font-style: normal;
    font-weight: 400;
    src: url('fonts/pt-mono-v5-latin-ext_cyrillic_cyrillic-ext_latin-regular.eot'); /* IE9 Compat Modes */
    src: local('PT Mono'), local('PTMono-Regular'),
         url('fonts/pt-mono-v5-latin-ext_cyrillic_cyrillic-ext_latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('fonts/pt-mono-v5-latin-ext_cyrillic_cyrillic-ext_latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
         url('fonts/pt-mono-v5-latin-ext_cyrillic_cyrillic-ext_latin-regular.woff') format('woff'), /* Modern Browsers */
         url('fonts/pt-mono-v5-latin-ext_cyrillic_cyrillic-ext_latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
         url('fonts/pt-mono-v5-latin-ext_cyrillic_cyrillic-ext_latin-regular.svg#PTMono') format('svg'); /* Legacy iOS */
}

/* open-sans-regular - latin-ext_cyrillic_cyrillic-ext_latin_greek-ext_greek */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    src: url('fonts/open-sans-v15-latin-ext_cyrillic_cyrillic-ext_latin_greek-ext_greek-regular.eot'); /* IE9 Compat Modes */
    src: local('Open Sans Regular'), local('OpenSans-Regular'),
         url('fonts/open-sans-v15-latin-ext_cyrillic_cyrillic-ext_latin_greek-ext_greek-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('fonts/open-sans-v15-latin-ext_cyrillic_cyrillic-ext_latin_greek-ext_greek-regular.woff2') format('woff2'), /* Super Modern Browsers */
         url('fonts/open-sans-v15-latin-ext_cyrillic_cyrillic-ext_latin_greek-ext_greek-regular.woff') format('woff'), /* Modern Browsers */
         url('fonts/open-sans-v15-latin-ext_cyrillic_cyrillic-ext_latin_greek-ext_greek-regular.ttf') format('truetype'), /* Safari, Android, iOS */
         url('fonts/open-sans-v15-latin-ext_cyrillic_cyrillic-ext_latin_greek-ext_greek-regular.svg#OpenSans') format('svg'); /* Legacy iOS */
}

@font-face {
    font-family: 'Open Sans Condensed Bold';
    font-weight: 700;
    src: url('fonts/OpenSansCondensed-Bold.ttf') format('truetype');
}

@font-face {
    font-family: 'Open Sans Regular';
    font-weight: normal;
    src: url('fonts/OpenSans-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Open Sans SemiBold';
    font-weight: 600;
    src: url('fonts/OpenSans-SemiBold.ttf') format('truetype');
}

@font-face {
    font-family: 'Open Sans Bold';
    font-weight: 700;
    src: url('fonts/OpenSans-Bold.ttf') format('truetype');
}

@font-face {
    font-family: 'Open Sans Condensed Light';
    font-weight: 300;
    src: url('fonts/OpenSansCondensed-Light.ttf') format('truetype');
}

@font-face {
    font-family: 'Open Sans Light';
    font-weight: 300;
    src: url('fonts/OpenSans-Light.ttf') format('truetype');
}

/* content */
body {
    height: 100%;
    width: 100%;
    position: fixed;
    font-family: "Open Sans Regular";
    font-size:.9em;
    text-rendering: optimizeLegibility;
    text-shadow: rgba(0,0,0,0.00392157) 1px 1px 1px;
    -webkit-font-smoothing: antialiased;
    background: -o-radial-gradient(at 50% 40%, #164a53, #081e22 80%);
    background: radial-gradient(at 50% 40%, #164a53, #081e22 80%);

    display: -ms-grid;
    display: grid;

    grid-template-columns: 1fr;
    -ms-grid-columns: 1fr;

  /*  grid-template-rows: calc(4em + 1px) 1fr;
    -ms-grid-rows: calc(4em + 1px) 1fr;*/
    grid-template-rows: auto 1fr;
    /* grid-template-rows: 50px 1fr; */
    -ms-grid-rows: 4em 1fr;
    -webkit-touch-callout: none !important;
    -webkit-user-select: none !important;
}

body>*:nth-child(1) {
    -ms-grid-row: 1;
    -ms-grid-column: 1;

}

body>*:nth-child(2) {
    -ms-grid-row: 2;
    -ms-grid-column: 1;
}

.disclaimer {
    font-family: 'Open Sans SemiBold',
    sans-serif;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    color: #F00;
    font-size: min(2.15vw, 15px);
}

#content-area {
    height: 100%; 
    color: #fff;
    overflow: hidden;
}

#content-area > div {
    height: 100%;
    display: flex;
    flex-direction: column;
}


.break {
    border-top:1px solid #579718;
    height:1px;
}

.hidden {
    display:none;
}

/* OVERRIDE SCORLLBAR STYLE */
::-webkit-scrollbar {
    border-radius: 5px;
    width: 5px;
    height: 5px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #333;
}

/* Handle */
::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background: #666;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #4b7a8e;
}

/*  Handle active*/
::-webkit-scrollbar-thumb:active {
    background: #4b7a8e;
}

/* To remove the corner from producing unwanted artifacts */
::-webkit-scrollbar-corner {
    background: #333;
}


.series-viewer-navigation {
    width: 75px;
    height: 75px;
}

/* ipad layouts */
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) {
    /* ipad portrait orientation */
    @media only screen and (orientation:portrait) {
        body .no-ipad-portrait {
            display: none !important;
        }
    }
    /* ipad landscape orientation */
    @media only screen and (orientation:landscape) {
        body .no-ipad-landscape {
            display: none !important;
        }
    }
    /* ipad both orientations */
    body .no-ipad {
        display: none !important;
    }
}


/* ipad and phone */
@media only screen and (max-width: 1024px) {
    body .no-touch-screen {
        display: none !important;
    }
}
/* phone both orientations */
@media only screen and (min-device-width: 320px) and (max-device-width: 420px) {
    
    .no-mobile {
        display: none !important;
    }

    /* body {
        grid-template-rows: auto 1fr;
    } */

}

/* thin desktop window */
@media only screen and (max-width: 786px) {
    body .no-thin-desktop {
        display: none !important;
    }
    body .disclaimer.no-mobile {
        font-size: 10px;
        top: 32px;
    }
}

@media not all and (max-width: 786px) {
    body .thin-screen-only {
        display: none !important;
    }
}

@media not all and (max-width: 786px) {
    body .thin-screen-only {
        display: none !important;
    }
}