@import url(https://fonts.googleapis.com/css?family=Quicksand|Roboto|Roboto+Mono&display=swap);

:root {
    --primary-color-blue: #46a2fd;
    --primary-color-orange: #fcb445;
    --primary-color: var(--primary-color-orange);

    --secondary-color: #4b928c;

    --body-max-with: 880px;
    --body-min-with: 420px;
    --body-bg: #fff;
    --body-bg-light: #eaeaea;

    --text-font: "Quicksand";
    --text-color: #555;
    --text-color-on-dark: #FFF;
    --text-color-on-light: #555;
    --text-color-on-primary: var(--text-color-on-dark);
    --text-color-on-secondary: var(--text-color-on-dark);
    --text-size: 14px;
    --text-size-small: calc(var(--text-size)*0.65);
    --text-size-big: calc(var(--text-size)*1.2);
    --text-line-height: 1.5em;

    --button-text-size: 14px;
    --button-bg-color-on: #0a0;
    --button-bg-color-off: #999;
    --button-round-height: calc(var(--text-size)*3);

    --border-line: 1px solid #777;
    --border-radius: 4px;

    --box-shadow: 0em 0em 0.3em 0em grey;

    --input-bg-color: var(--body-bg);
    --input-height: calc(var(--text-size)*2.2);
    --input-padding-left-right: calc(var(--text-size)*1.2);
    --input-border-radius: 10em;
    /* Full Round */
}

body {
    font-family: var(--text-font);
    color: var(--text-color);
    font-size: var(--text-size);
    line-height: var(--text-line-height);
    margin: 0px;
    padding: 0.5em;
    /* background: #EEE url("/background_sun-pattern.webp") !important; */
}

.body__wrapper {
    max-width: var(--body-max-with);
    min-width: var(--body-min-with);
    margin-left: auto;
    margin-right: auto;
}

button,
textarea,
input[type="submit"],
input[type="text"],
input[type="password"],
select {
    font-family: var(--text-font) !important;
    font-size: var(--button-text-size);
}

.btn_onoff {
    line-height: 2em;
    display: inline-block;
    padding: 0em 1em;
    border-radius: 5em;
    color: var(--text-color);
}

.btn_onoff[status="on"] {
    background: var(--button-bg-color-on);
}

.btn_onoff[status="off"] {
    background: var(--button-bg-color-off);
}

a {
    color: var(--text-color);
    text-decoration: none;
}

.b {
    font-weight: bold;
}

.i {
    font-style: italic;
}

.s,
a.s {
    font-size: var(--text-size-small) !important;
    margin: 0em !important;
}

.l,
a.l {
    font-size: var(--text-size-big) !important;
}

.bo {
    border: var(--border-line) !important;
}

.no_bo {
    border: 0px !important;
}

.sha {
    box-shadow: var(--box-shadow);
}

.btn,
a.btn,
button,
input.btn,
input[type="submit"] {
    display: inline-block;
    text-align: center;
    background: var(--input-bg-color);
    height: var(--input-height);
    line-height: var(--input-height);
    border: 0px;
    padding-left: var(--input-padding-left-right);
    padding-right: var(--input-padding-left-right);
    border-radius: var(--input-border-radius) !important;
    cursor: pointer;
}

.btnr,
a.btnr {
    display: inline-block;
    text-align: center;
    height: var(--button-round-height);
    width: var(--button-round-height);
    line-height: var(--button-round-height);
    border: var(--border-line);
    border-radius: var(--input-border-radius) !important;
    cursor: pointer;
}

.btn_right_container {
    position: relative;
}

.breadcrumb.btn_right_container {
    padding-right: 6.5em;
}

.btn_right {
    position: absolute;
    right: 0px;
    top: 0px;
    bottom: 0px;
    padding: 0.5em 0em;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    /* background: #AAA !important;
    color: #FFF !important; */
    width: 6em;
    text-align: center;
}

/* POSITON DEF - BEGIN*/

.cen {
    text-align: center;
}

.right {
    text-align: right;
}

.left {
    text-align: left;
}

.fr {
    float: right;
    margin-left: 10px;
}

.fr:first-child {
    margin-right: 0px;
}

.fl {
    float: left;
    margin-right: 10px;
}

/* POSITON DEF - END*/

/* ROUND CORNER - BEGIN */

.ra {
    border-radius: 5px;
}

.ra_100 {
    border-radius: 100px;
}

.ra_010 {
    border-radius: 10px;
}

.ra_015 {
    border-radius: 15px;
}

/* ROUND CORNER - END */

.box {
    display: block;
    padding: 0.5em;
    word-wrap: break-word;
}

.row {
    margin: 0.5em 0em;
}

.row:first-of-type {
    margin-top: 0em;
}

.row:last-of-type {
    margin-bottom: 0em;
}

.mono {
    font-family: "Roboto Mono", monospace;
    line-height: 1.4em;
}

/* MISC - BEGIN */

.hide {
    display: none !important;
    z-index: -1 !important;
}

pre,
.pre {
    font-family: "Roboto Mono", monospace;
    line-height: 1.4em;
    white-space: pre-wrap;
    /* Since CSS 2.1 */
    white-space: -moz-pre-wrap;
    /* Mozilla, since 1999 */
    white-space: -pre-wrap;
    /* Opera 4-6 */
    white-space: -o-pre-wrap;
    /* Opera 7 */
    word-wrap: break-word;
    /* Internet Explorer 5.5+ */
}

textarea {
    box-sizing: border-box;
    width: 100%;
}

.clear {
    display: block;
    clear: both;
}

.confirm_box_canvas {
    position: fixed;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    z-index: 99990;
    background-color: #000;
    opacity: 0.8;
}

.confirm_box {
    position: fixed;
    border-radius: 8px;
    font-size: 14px;
    margin: 14px auto;
    width: 240px;
    background: #FFF;
    color: #000;
    z-index: 99991;
    top: 20px;
    right: 0px;
    left: 0px;
    text-align: center;
    height: 150px;
}

.confirm_box_message {
    display: block;
    width: 80%;
    margin: 30px auto 0 auto;
}

.confirm_box__close {
    position: absolute;
    z-index: 99992;
    top: 0px;
    right: 0px;
    background: #F00;
    color: #FFF;
    padding: 2px 14px;
    border-top-right-radius: 8px;
    cursor: pointer;
}

.confirm_box__confirm {
    display: inline-block;
    width: 100px;
    height: 30px;
    line-height: 30px;
    background: #F00;
    color: #FFF;
    padding: 2px 5px;
    border-radius: var(--border-radius);
    margin: 1em auto;
    cursor: pointer;
}

/* COLOR / BACKGROUND -- BEGIN */

.warning {
    color: red !important;
    font-weight: bold;
}

/* LIGHT BACKGROUD */

.bg_w,
a.bg_w,
.bg_g,
a.bg_g {
    color: #333;
}

.bg_w,
a.bg_w {
    background: #fff;
}

.bg_g,
a.bg_g {
    background: #5f5;
}

.bg_w>a,
.bg_g>a {
    color: #333 !important;
    background: none;
}

.bg_w>.btn,
.bg_g>.btn {
    color: #333 !important;
    background: none;
    border: 0.2em solid #333 !important;
}

/* DARK BACKGROUD */

.bg_primary,
a.bg_primary,
.bg_b,
a.bg_b,
.bg_b1,
a.bg_b1,
.bg_p,
a.bg_p,
.bg_o,
a.bg_o {
    color: #fff;
    border: 0px;
}

a.bg_primary,
.bg_primary {
    background-color: var(--primary-color);
}

.bg_b,
a.bg_b {
    background: #333;
}

.bg_b1,
a.bg_b1 {
    background: #777;
}

.bg_p,
a.bg_p {
    background: #f55;
}

.bg_o,
a.bg_o {
    background: #fcb445;
}

.bg_primary>a,
.bg_b>a,
.bg_b1>a,
.bg_p>a,
.bg_o>a {
    color: #fff !important;
    background: none;
}

.bg_primary>.btn,
.bg_b>.btn,
.bg_b1>.btn,
.bg_p>.btn,
.bg_o>.btn {
    color: #fff !important;
    background: none;
    border: 0.2em solid #fff !important;
}

/* COLOR / BACKGROUND -- END */

.active,
[active="on"] {
    font-weight: bold;
}

[active="off"] {
    font-weight: normal;
}




/* USER CONTROL PANEL -- BEGIN */

.user_control_panel--btn-on {
    position: fixed;
    bottom: 1em;
    left: 1em;
    z-index: 99;
    background: #000;
    color: #fff;
    opacity: 0.7;
    border: 0px !important;
}

.user_control_panel {
    /* display: none; */
    display: block;
    position: fixed;
    background: #000;
    width: 500px;
    /* height: 200px; */
    bottom: 5em;
    left: 1em;
    right: unset;
    border-radius: 5px;
    /* opacity: 0.9; */
    padding: 1em;
    z-index: 100;
}

@media screen and (max-width: 600px) {
    .user_control_panel {
        right: 2em;
        max-width: 500px;
        width: unset;
    }
}

.user_control_panel>div.item {
    display: block;
    color: #333;
    background: #fff;
    position: relative;
    line-height: 2.5em;
    height: 2.5em;
    padding-left: 1em;
    border-radius: 5px;
    overflow: hidden;
    margin-top: 1em;
}

.user_control_panel>div.item:first-child {
    margin-top: 0px;
}

.user_control_panel>div.item>span.switch_btn:first-child,
.user_control_panel>div.item>span.switch_btn:last-child {
    display: inline-block;
    text-align: center;
    text-transform: uppercase;
    background: #fff;
    color: #000;
    position: absolute;
    width: 5em;
}

.user_control_panel>div>span.switch_btn:first-child {
    right: 5em;
}

.user_control_panel>div>span.switch_btn:last-child {
    right: 0px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

.toast_message {
    position: fixed;
    display: none;
    bottom: 6em;
    left: 0.5em;
    right: 3em;
    border: 0px;
    border-radius: 0.5em;
    line-height: 1.2em;
    padding: 1em 1em;
    z-index: 9999;
    background: var(--primary-color);
    color: var(--text-color-on-dark);
    opacity: 0.95;
    text-align: center;
    width: 18em;
}

/* USER CONTROL PANEL -- BEGIN */

/* QUICK NAVIGATION BUTTON -- BEGIN */
.quick_navigation_button {
    position: fixed;
    bottom: 1em;
    left: 1em;
    z-index: 99;
    /* background: #000; */
    color: #fff;
    /* opacity: 0.5; */
    border: 0px !important;
}

.quick_navigation_button--canvas {
    display: none;
    position: fixed;
    left: 0.5em;
    bottom: 0.5em;
    width: 20em;
    background: #fff;
    opacity: 0.9;
    z-index: 10;
    line-height: 4em;
    height: 4em;
    border-radius: 0.5em;
}

.quick_navigation_button--show,
.quick_navigation_button--home,
.quick_navigation_button--top,
.quick_navigation_button--bottom,
.quick_navigation_button--bookmark {
    position: fixed;
    z-index: 11;
    bottom: 1em;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    display: block;
    width: 3em;
    height: 3em;
    line-height: 3em;
    padding: 0em;
    /* border: 1px solid #000; */
    /* Hide the text */
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}

.quick_navigation_button--show {
    background-image: url("/img-btn-material-symbols-light/material-symbols-light--apps.svg");
    left: 1em;
}

.quick_navigation_button--home {
    background-image: url("/img-btn-material-symbols-light/material-symbols-light--home-outline-rounded.svg");
    left: 5em;
}

.quick_navigation_button--top {
    background-image: url("/img-btn-material-symbols-light/material-symbols-light--arrow-upward-rounded.svg");
    left: 9em;
}

.quick_navigation_button--bottom {
    background-image: url("/img-btn-material-symbols-light/material-symbols-light--arrow-downward-rounded.svg");
    left: 13em;
}

.quick_navigation_button--bookmark {
    background-image: url("/img-btn-material-symbols-light/material-symbols-light--book-outline-rounded.svg");
    left: 17em;
    /* cursor: not-allowed; */
}

.quick_navigation_button--home,
.quick_navigation_button--top,
.quick_navigation_button--bottom,
.quick_navigation_button--bookmark {
    display: none;
}

/* QUICK NAVIGATION BUTTON -- END */

.label {
    display: inline-block;
}

/* MISC - END */

/* INPUT - BEGIN */
/* Sửa lỗi kích thước input-submit không tương đồng như input-text/password */
input,
textarea {
    -ms-box-sizing: content-box;
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
}

input[type="password"],
input[type="text"] {
    /* border: 0.2em solid #AAA; */
    border: none;
    background: #f0f2f5;
    border-radius: 5px;
    padding: 1%;
    line-height: 1.7em;
    display: block;
    width: 98%;
}

/* PAGE NAV -- BEGIN */
.breadcrumb {
    line-height: 2em;
    background-color: var(--primary-color);
    color: var(--text-color-on-primary);
}

.breadcrumb a {
    color: var(--text-color-on-primary);
}

#page_nav a {
    margin-top: 0.1em;
    margin-bottom: 0.1em;
    text-align: center;
    display: inline-block;
    width: 3em;
    height: 3em;
    line-height: 3em;
    border-radius: 10em;
    background: #fff;
    color: #000;
    /* border: 1px solid #FFF; */
}

#page_nav a.current_page {
    background: var(--primary-color);
    color: var(--text-color-on-primary);
}

#page_nav a:hover {
    background: var(--primary-color);
    color: var(--text-color-on-primary);
}

/* PAGE NAV -- END */

/* HEADER */
div.body__wrapper__header__logo {
    position: relative;
    display: block;
    padding: 10px;
    height: 80px;
    background-color: var(--primary-color);
    border-radius: 0.5em;
    margin-bottom: 1em;
}

.body__wrapper__header__admin_debug_console {
    display: none;
    position: fixed;
    bottom: 0px;
    right: 0px;
    opacity: 0.7;
    z-index: 100;
    background: #000;
    color: #fff;
    padding: 5px 10px 5px 10px;
    border-top-left-radius: 5px;
    text-align: right;
    font-family: "Roboto Mono", monospace;
}

/* Search Box - BEGIN */

div.body__wrapper__header__logo input,
div.body__wrapper__header__lightbox_searching input {
    height: 30px;
    line-height: 30px;
    background-image: url("/img-btn/icon__search_b.png");
    background-position: 10px 7px;
    background-repeat: no-repeat;
    background-size: 30px 30px;
    padding-left: 45px !important;
    font-size: 20px;
}

div.body__wrapper__header__logo input {
    position: absolute;
    width: 250px;
    right: 28px;
    top: 28px;
}

/* div.body__wrapper__header__lightbox_searching input {
    width: 70%;
    min-width: 200px;
    margin-left: auto;
    margin-right: auto;
}

div.body__wrapper__header__lightbox_searching {
    display: none;
} */

.body__wrapper__header__logo__lightbox_search_icon {
    display: none;
    position: absolute;
    right: 15px;
    top: 25px;
    height: 50px;
}

@media screen and (max-width: 640px) {
    div.body__wrapper__header__logo input {
        display: none;
        left: 28px;
        right: 75px;
        width: unset;
    }

    .body__wrapper__header__logo__lightbox_search_icon {
        display: block;
    }
}

/* Search Box - END */

img.body__wrapper__header__logo__logo_icon {
    height: 70px;
    margin: 5px;
}

div.body__wrapper__header {
    display: block;
}

.body__wrapper__header .btn {
    margin: 0.5em 0.5em;
}

.body__wrapper__header .btn:first-of-type {
    margin-left: 0em;
}

.body__wrapper__header .btn:last-of-type {
    margin-right: 0em;
}

.body__wrapper__header .fr:first-of-type {
    margin-right: 0em;
}

.body__wrapper__header .fr:last-of-type {
    margin-left: 0em;
    margin-right: 0.5em;
}

.header__btn--plugin {
    display: block;
    margin-left: 10px;
}

.header__btn--plugin:first-of-type {
    margin-left: 0em;
}

.header__btn--about,
.header__btn--login,
.header__btn--profile,
.header__btn--admin,
.header__btn--forum {
    display: block;
    width: 3.5em;
    height: 3.5em;
    margin-left: 0.5em;
    float: right;
    background-size: contain;
    background-repeat: no-repeat;
    /* Hide the text. */
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}

.header__btn--about {
    background-image: url("/img-btn-material-symbols-light/material-symbols-light--hive-outline-rounded.svg");
}

.header__btn--login,
.header__btn--profile {
    background-image: url("/img-btn-material-symbols-light/material-symbols-light--stars-outline-rounded.svg");
}

.header__btn--admin {
    background-image: url("/img-btn-material-symbols-light/material-symbols-light--build-circle-outline-rounded.svg");
}

.header__btn--forum {
    background-image: url("/img-btn-material-symbols-light/material-symbols-light--supervised-user-circle-outline.svg");
}

/* FOOTER */

.body__wrapper__footer .footer_content {
    padding: 3em 1em 0.5em 0em;
    background: var(--primary-color);
    border-radius: 0.5em;
    text-align: right;
    font-size: 1em;
    color: var(--text-color-on-primary);
}

.body__wrapper__footer .footer_content a {
    color: inherit;
    text-decoration: none;
}

#loading .loading_background,
#lightbox .lightbox_background {
    position: fixed;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    opacity: 0.8;
}

#loading .loading_background {
    background: #fff;
    z-index: 9997;
}

#lightbox .lightbox_background {
    background: #000;
    z-index: 996;
}

#loading .loading_frame,
#lightbox .lightbox_frame {
    position: fixed;
    top: 20px;
    right: 20px;
    bottom: 20px;
    left: 20px;
    text-align: center;
    /* border: #FFF 1px solid; */
}

#loading .loading_frame {
    z-index: 9998;
}

#lightbox .lightbox_frame {
    z-index: 997;
}

#loading .loading_frame img,
#lightbox .lightbox_frame img {
    max-width: 100%;
    max-height: 100%;
    vertical-align: middle;
}

#loading .loading_frame img {
    z-index: 9999;
}

#lightbox .lightbox_frame img {
    z-index: 998;
}

#lightbox .lightbox_frame .lightbox_img_close,
#lightbox .lightbox_frame .lightbox_img_prev,
#lightbox .lightbox_frame .lightbox_img_next {
    z-index: 999;
    position: absolute;
    opacity: 0;
}

#lightbox .lightbox_frame .lightbox_btn_close {
    z-index: 9999;
    position: absolute;
    top: 0px;
    right: 0px;
    background: #f55;
    opacity: 0.5;
    width: 3em;
    height: 3em;
    border-radius: 3em;
}

#lightbox .lightbox_frame .lightbox_img_close {
    top: 0px;
    right: 0px;
    left: 0px;
    bottom: 50%;
    background: #f55;
}

#lightbox .lightbox_frame .lightbox_img_prev {
    top: 50%;
    right: 50%;
    left: 0px;
    bottom: 0px;
    background: #00a;
}

#lightbox .lightbox_frame .lightbox_img_next {
    top: 50%;
    right: 0px;
    left: 50%;
    bottom: 0px;
    background: #0a0;
}

#lightbox .lightbox_frame video {
    /* width: 100%; */
    position: absolute;
    top: 15%;
    bottom: 15%;
    left: 10%;
    right: 10%;
    height: 70%;
    width: 80%;
}

/* ADMIN PANEL -- BEGIN */

#admin_page .user_control__nav_button {
    line-height: 3em;
}

/* ADMIN PANEL -- END */

/* ABOUT -- BEGIN */

#about_page__general article {
    text-align: justify;
}

div.iimol-app-thumbnails {
    text-align: center;
}

/* div.iimol-app-thumbnails h1 {

} */

div.iimol-app-thumbnails h2 {
    font-size: 1.2em;
}

div.iimol-app-thumbnails img {
    width: 30%;
    margin: 1%;
    vertical-align: text-top;
    border: #777 solid 1px;
}

/* div.iimol-app-thumbnails img:first-child {
    
}
div.iimol-app-thumbnails img:last-child {
} */
/* ABOUT -- END */


/* PROFILE -- BEGIN */

/* .profile_page__bookmark__container {} */

.profile_page__bookmark__item {
    position: relative;
    padding: 10px;
    margin: 1em 0em;
    background: #F5F5F5;
    border-radius: 5px;
    border: 0px;
}

.profile_page__bookmark__item a {
    text-decoration: none;
}

.profile_page__bookmark__item a {
    text-decoration: none;
}

.profile_page__bookmark__item .cover {
    width: 150px;
    aspect-ratio: 0.75;
    border-radius: 5px;
    border: 0px;
    background-size: cover !important;
    background-position: center !important;
    float: left;
}

.profile_page__bookmark__item .info {
    overflow: hidden;
    padding-left: 10px;
    line-height: 2em;
}

.profile_page__bookmark__item .info div.item>span {
    background-color: var(--button-bg-color-off);
    color: var(--text-color-on-dark);
    border-radius: var(--border-radius);
    padding: 0.25em 0.5em;
}

.profile_page__bookmark__item .info div.item>a.reading {
    background-color: var(--button-bg-color-on);
    color: var(--text-color-on-dark);
    border-radius: var(--border-radius);
    padding: 0.25em 0.5em;
}

.profile_page__bookmark__item .remove_bookmark {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background-color: var(--primary-color);
    color: var(--text-color-on-primary);
    border-radius: 5px;
    padding: 5px 10px;
    cursor: pointer;
}

/* PROFILE -- END */

/* LOGIN PAGE -- BEGIN */

#login_page #login_form {
    margin: auto;
    max-width: 420px;
    box-shadow: var(--box-shadow);
    border-radius: var(--border-radius);
    padding: 1em;
}

#login_page a.forum {
    display: inline-block;
    background-color: var(--primary-color);
    color: var(--text-color-on-primary);
    border-radius: var(--border-radius);
    padding: calc(var(--border-radius)*0.5) calc(var(--border-radius)*2);
}

/* LOGIN PAGE -- END */