@import "uikit.min.css";
@import "uikit-rtl.min.css";
@import "owl.carousel.min.css";
@import "owl.theme.default.min.css";
@import "font.css";
@import "owl.css";

:root {
    --space: 16px;
    --nav-color: #000;
    --nav-height: 40px;
    --footer-height: 40px;
    --logo-size: 30px; 
    --icon-size: 16px;
    --icon-page-size: 16px;

    --size-header-title: 14px;
    --size-header-detail: 12px;

    --color-menu: #d10000;

    --color-primary: #7bcc8e;

}
@media only screen and (min-width: 800px) {

    :root {
        /* --nav-height: 80px; */
        /* --footer-height: 72px; */
        /* --logo-size: 50px;  */
        /* --icon-size: 24px; */
        /* --icon-page-size: 24px; */

        /* --size-header-title: 24px; */
        /* --size-header-detail: 18px; */
    }
}

body {
  font-size: 16px;
  font-family: "Kanit", tahoma, sans-serif;
  font-weight: 200;
  background-color: #000;
}
.uk-link, a {
    color: #fff;
}
.uk-navbar-container {
    position: fixed !important;
    width: 100%;
    background: var(--nav-color) !important;
    height: var(--nav-height);
    z-index: 99 !important;
}
.uk-navbar-center:not(:only-child) {
    transform: translate(-50%,-50%) !important;
    color: #fff;
}
.header > .uk-navbar-center:not(:only-child) {
    display: block !important;
}
.uk-navbar-center:not(:only-child) > * { text-align: center; }
.uk-navbar-center:not(:only-child) > #header_name {      font-size: var(--size-header-title); font-weight: 300; line-height: 1.2; }
.uk-navbar-center:not(:only-child) > #header_detail {    font-size: var(--size-header-detail); }
.uk-navbar-center:not(:only-child) > #footer_page {    font-size: var(--size-header-title); }
.uk-navbar-center:not(:only-child) > #footer_prev {    margin-right: 5px; }
.uk-navbar-center:not(:only-child) > #footer_next {    margin-left: 5px; }
.uk-navbar-item, .uk-navbar-nav > li > a, .uk-navbar-toggle {
    min-height: var(--nav-height) !important;
}
.footer {
    height: var(--footer-height);
    bottom: 0;
    z-index: 101 !important;
}
#footer_prev > a,
#footer_next > a {
    color: #fff;
}
#footer_prev .uk-icon,
#footer_next .uk-icon {
    width: calc(var(--icon-page-size) + var(--space));
}
#footer_prev .uk-icon > svg,
#footer_next .uk-icon > svg {
    width: var(--icon-page-size);
}

.icon_logo {
    background-image: url("images/logo.svg");
    background-size: auto var(--logo-size);
    background-repeat: no-repeat;
    height: var(--logo-size);
    width: var(--logo-size);
}
.icon_font {
    background-image: url("images/font.png");
    background-size: var(--icon-size) auto;
    background-repeat: no-repeat;
    height: var(--icon-size);
    width: var(--icon-size);
}
.icon_toc {
    background-image: url("images/toc.png");
    background-size: var(--icon-size) auto;
    background-repeat: no-repeat;
    height: var(--icon-size);
    width: var(--icon-size);
}
.icon_thumb {
    background-image: url("images/thumb.png");
    background-size: var(--icon-size) auto;
    background-repeat: no-repeat;
    height: var(--icon-size);
    width: var(--icon-size);
}
.reader_container > .container {
    padding-top: var(--nav-height);
    padding-bottom: var(--footer-height); 
    /* background-color: grey; */
}

#area {
    position: absolute;
    width: 100%;
    height: calc(100% - var(--nav-height) - var(--footer-height));
    overflow: hidden;
    margin: 0 auto;
}
/* @media only screen and (min-width: 800px) {

    #area {
        box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.16);
        width: 800px;
        margin: 0 auto;
    }
} */
#thumb {
    position: fixed;
    bottom: var(--footer-height);
    left: 0;
    width: 100%;
    height: 133px;
    background-color: rgba(39, 39, 39, 0.5);
    padding: 10px;
    z-index: 10;
    display: none;
}

#reader_menu {
    z-index: 100;
    position: fixed;
    left: 0;
    top: 0; 
    background-color: white;
    max-width: 414px;
    width: 100vw;
    height: calc(100vh - var(--footer-height));
    opacity: 0;
    overflow-y: scroll;
}
#reader_menu > div { width: 100%; }
#reader_menu ul {
    padding: 16px 20px 80px
}
#reader_menu ul > li a { font-size: 1rem; font-weight: 400; color: #333;}
#reader_menu ul > li h1 { color: var(--color-menu); font-size: 2rem; margin-bottom: 0px; }
#reader_menu .uk-nav.sub { margin-left: 62px; list-style: disc; font-size: 0.8rem; color: #333; }
#reader_menu ul > li.sub a { font-size: 1rem; font-weight: 200; }