/* +++ FONTS +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
@import url('https://fonts.googleapis.com/css2?family=Quicksand&family=Damion&family=Nunito:wght@300&display=swap');
@import url("https://use.fontawesome.com/releases/v5.5.0/css/all.css");
/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

/* +++ GENERAL +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
* {
    box-sizing: border-box; font-family: 'Quicksand', sans-serif;
}
body {
    margin: 0;
}
a, a:hover {
    text-decoration: none;
}
div.hidden {
    display: none !important;
}
#error {
    display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 30px;
}
/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

/* +++ FRAME +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
#frame {
    z-index: 0; position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center;
}
#frame > div.frame-container {
    position: relative; width: 100%; height: 100%; display: flex; align-items: stretch; margin: auto; padding-top: 80px; border: 1px solid #dddddd; border-right: none; 
    max-width: 1900px; max-height: 1200px; /* WIDTH AND HEIGHT OF THE FRAME */
}
#frame > div.frame-container > div.frame-header {
    z-index: 1000; position: absolute; top: 0; left: 0; width: 100%; height: 80px; display: flex; align-items: center; border-bottom: 1px solid #dddddd; border-right: 1px solid #dddddd;
}
#frame > div.frame-container > div.frame-column {
    position: relative; display: flex; flex-direction: column; flex-grow: 1; border-right: 1px solid #dddddd;
}
#frame > div.frame-container > div.frame-column > div.frame-column-title {
    width: 100%; padding: 20px; border-bottom: 1px solid #dddddd; font-size: 32px; color: #333333; text-align: center;
}
@media screen and (max-width: 800px) {
    #frame > div.frame-container {
        padding-top: 60px;
    }
    #frame > div.frame-container > div.frame-header {
        height: 60px;
    }
    #frame > div.frame-container > div.frame-column {
        overflow: hidden; /* important fix for mobile component list */
    }
    #frame > div.frame-container > div.frame-column > div.frame-column-title {
        padding: 15px; font-size: 22px;
    }
}
/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

/* +++ SCROLLBAR +++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
div.scrollbar {
    overflow-y: auto !important;
}
div.scrollbar::-webkit-scrollbar {
    width: 12px;
}
div.scrollbar::-webkit-scrollbar-track {
    background: #ffffff;
}
div.scrollbar::-webkit-scrollbar-thumb {
    background: #333333; border-radius: 8px; border: 3px solid #ffffff;
}
/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

/* +++ LOGO ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
#logo {
    margin-left: 20px; margin-right: auto;
}
#logo > div {
    font-size: 42px; line-height: 36px; color: #333333;
}
#logo > div:last-child {
    font-family: 'Damion', cursive; font-size: 16px; line-height: 16px; color: #ff2800;
}
@media screen and (max-width: 800px) {
    #logo {
        margin-left: 10px;
    }
    #logo > div {
        font-size: 32px; line-height: 26px;
    }
    #logo > div:last-child {
        font-size: 14px; line-height: 14px;
    }
}
/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

/* +++ DESKTOP MENU ++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
#desktop-menu {
    margin-right: 20px;
}
#desktop-menu > a {
    padding: 15px 25px; font-size: 18px; color: #222222; opacity: 0.6; transition: opacity 0.3s;
}
#desktop-menu > a.active,
#desktop-menu > a:hover {
    opacity: 1.0;
}
@media screen and (max-width: 800px) {
    #desktop-menu {
        display: none;
    }
}
/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

/* +++ MOBILE MENU +++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
#mobile-menu {
    z-index: 999; position: absolute; top: 0; left: 0; display: none; align-items: stretch; width: 100%; height: 100%; padding-top: 60px;
}
#mobile-menu > div.menu {
    flex-grow: 1; background: #ffffff;
}
#mobile-menu > div.menu > div.item {
    border-bottom: 1px solid #eeeeee;
}
#mobile-menu > div.menu > div.item a {
    display: block; padding: 15px; font-size: 18px; color: #222222;
}
#mobile-menu > div.menu > div.item.active a {
    color: #aaaaaa;
}
#mobile-menu > div.menu > div.item > div.submenu {
    padding: 0 20px;
}
@media screen and (max-width: 800px) {
    #mobile-menu {
        display: flex;
    }
}
/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

/* +++ MOBILE MENU BUTTON ++++++++++++++++++++++++++++++++++++++++++++++++ */
#mobile-menu-button {
    display: none; margin-right: 20px; padding: 5px; font-size: 30px; color: #444444; cursor: pointer;
}
#mobile-menu-button:after {
    font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f0c9";
}
#mobile-menu-button.close:after {
    content: "\f00d";
}
@media screen and (max-width: 800px) {
    #mobile-menu-button {
        display: flex;
    }
}
/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */