/**
 *
 *  MVC
 *  Model View Controller (MVC) design pattern for simple web applications.
 *
 *  @see     https://github.com/fabiodoppio/mvc
 *
 *  @author  Fabio Doppio (Developer) <hallo@fabiodoppio.de>
 *  @license https://opensource.org/license/mit/ MIT License
 *
 */

.dropdown ul,ol,ul{list-style:none;padding:0}.account.login .main-content,.account.recovery .main-content,.account.signup .main-content,.modalbox>div{max-width:var(--page-min-width);font-size:16px}.btn,.tooltip span{white-space:nowrap}.btn,a{outline:0;text-decoration:none!important}.account .main-sidebar li a,header .mobile i,header ul.cta>li>a,header ul.menu li a{text-transform:uppercase;text-decoration:none}.account main .avatar::before,header ul.cta .avatar::before{font-family:"Font Awesome 6 Free";content:"\f007";font-weight:700;z-index:1;position:absolute;text-align:center}footer,header{background:var(--color-secondary-200)}.account form[data-request="account/personal/avatar/upload"],.account main .avatar,.btn.is--loading::after,.title,footer,header ul.cta .avatar::before{text-align:center}html{scroll-behavior:smooth}body{width:100%;height:auto;min-width:var(--page-min-width);min-height:100vh;display:flex;flex-flow:column;background:var(--color-secondary-800);color:var(--color-secondary-100);font-size:var(--font-size);font-family:var(--font-family);line-height:1.5}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background-color:var(--color-primary-100)}::-webkit-scrollbar-track{background-color:var(--color-secondary-100)}ol,ul{margin:0}a{color:var(--color-primary-100);transition:0.5s}a:hover{color:var(--color-primary-200)}h1{font-size:4rem}h2{font-size:2rem}h3{font-size:1.5rem}h4{font-size:1.125rem}.title{margin-bottom:50px;line-height:120%}.alert,.dropdown,.modalbox>div{text-align:left}p{margin-bottom:20px;text-align:justify}.container{width:100%;max-width:var(--page-max-width);padding:0 20px;margin:0 auto;position:relative}main{flex:auto}main .container{margin:50px auto}.alert{margin-bottom:20px;padding:20px;border-left:5px solid}#response{width:100%;position:fixed;left:0;bottom:0;z-index:1000}#response .alert{width:100%;position:absolute;bottom:0;left:0;margin:0;-webkit-animation:fadeslidein 0.5s,fadeslideout 0.5s 5s;animation:fadeslidein 0.5s,fadeslideout 0.5s 5s;animation-fill-mode:forwards}.is--warning{color:var(--color-warning-100);border-color:var(--color-warning-200);background:var(--color-warning-300)}.is--success{color:var(--color-success-100);border-color:var(--color-success-200);background:var(--color-success-300)}.is--error{color:var(--color-error-100);border-color:var(--color-error-200);background:var(--color-error-300)}.is--info{color:var(--color-info-100);border-color:var(--color-info-200);background:var(--color-info-300)}.is--required{color:var(--color-error-100)}.is--fading{animation:1s fadein;-moz-animation:1s fadein;-webkit-animation:1s fadein}.is--active{display:block!important}.is--hidden{display:none!important}.dropdown{display:none;position:absolute;z-index:300;background:var(--color-secondary-800);box-shadow:var(--box-shadow);border:1px solid var(--color-secondary-700);border-radius:5px;text-wrap:nowrap;overflow:hidden}.dropdown .dropdown-header{display:block;padding:6px 15px;margin-bottom:6px;font-size:.9rem;color:var(--color-secondary-600);background:var(--color-secondary-700);white-space:nowrap;font-weight:700}.btn.is--primary,.tooltip span{color:#fff}.dropdown ul{margin:0 0 10px}.dropdown li a{display:block;text-decoration:none;padding:5px 15px;font-size:1rem}.dropdown li i{margin-right:10px;width:16px}.dropdown .dropdown-divider{border-top:1px solid var(--color-secondary-700);margin:10px 0}header .dropdown{top:50%;right:30px}table .dropdown{right:100px}footer .dropdown{bottom:50%;left:0}.tooltip{position:relative;cursor:pointer;float:right}.tooltip span{visibility:hidden;background-color:#000;border-radius:5px;padding:5px 10px;position:absolute;z-index:600;top:100%;font-size:14px;right:-9px}.tooltip span::after{content:" ";position:absolute;bottom:100%;right:10px;margin-left:-5px;border-width:5px;border-style:solid;border-color:#fff0 #fff0 #000 #fff0}.tooltip:hover span{visibility:visible}.modalbox>div{background:var(--color-secondary-800);padding:20px;outline:0;pointer-events:all;overflow-y:auto;position:relative;user-select:text;max-height:calc(100vh - 100px);margin:auto;text-wrap:auto}.modalbox{z-index:900;display:none;align-items:center;justify-content:center;position:fixed;top:0;left:0;width:100%;height:100vh;background:rgb(0 0 0 / .5)}.account,header ul.cta .avatar img{background-color:var(--color-secondary-700)}.modalbox.is--active{display:flex!important;animation:0.4s forwards fadein}.modalbox.is--vanishing{animation:0.4s forwards fadeout}.modalbox.is--active>div{animation:0.4s forwards slidein}.modalbox.is--vanishing>div{animation:0.4s forwards slideout}.account main,.account main .container,.page.oops main,header nav.container,header ul.menu{display:flex;align-items:center;justify-content:center}span.attachment-info{display:block;color:var(--color-secondary-100)}span.attachment-info [data-trigger="remove"]{cursor:pointer}.account .main-sidebar{background-color:var(--color-secondary-800);border:1px solid var(--color-border);width:25%;margin-right:20px;align-self:flex-start}.account .main-content{background-color:var(--color-secondary-800);border:1px solid var(--color-border);width:75%;padding:30px 50px}.account:not(.login,.signup,.recovery) .title{font-size:3rem;text-align:left;margin-bottom:20px}.account.login .title,.account.recovery .title,.account.signup .title{font-size:3rem}.account h2{margin-top:50px;margin-bottom:20px;line-height:100%}.account .main-sidebar li a{padding:20px;font-size:14px;transition:0.2s;color:var(--color-secondary-300);display:block;line-height:24px}.btn,header ul.cta .avatar,header ul.menu li a{transition:0.5s;cursor:pointer}header .mobile i:hover,header ul.cta>li>a:hover,header ul.menu li a:hover,header ul.menu.is--mobile a:hover{color:var(--color-secondary-700)!important}.account .main-sidebar li a:hover,.email .main-sidebar li:nth-child(3) a,.personal .main-sidebar li:first-child a,.security .main-sidebar li:nth-child(2) a,.accounts .main-sidebar li:first-child a,.pages .main-sidebar li:nth-child(2) a,.filters .main-sidebar li:nth-child(3) a,.newsletter .main-sidebar li:nth-child(4) a{border-left:5px solid var(--color-primary-100);color:var(--color-secondary-100)!important}.account main .avatar::before,header,label{color:var(--color-secondary-600)}.account .main-sidebar i{margin-right:5px;font-size:20px;vertical-align:middle;height:24px;width:24px}.account .main-sidebar li:not(:last-child){border-bottom:1px solid var(--color-border)}.account main .avatar{margin:0 auto 20px;background:var(--color-secondary-700);height:150px;width:150px;border-radius:50%;display:block;position:relative;overflow:hidden}.account main .avatar img{height:150px;width:150px;z-index:2;position:absolute;left:0;top:0;display:block}.account main .avatar::before{line-height:150px;display:block;font-size:60px;width:100%;background:var(--color-secondary-700)}input[type="email"],input[type="number"],input[type="password"],input[type="text"],input[type="date"],select,textarea{border:1px solid var(--color-secondary-600);border-radius:5px;display:inline-block;width:100%;margin:0;font-size:16px;padding:10px 20px;outline:0;background:var(--color-secondary-800);color:var(--color-secondary-100)}.btn,label{margin-bottom:10px}input[type="checkbox"]{margin-right:5px;height:15px;width:15px;vertical-align:middle;cursor:pointer}input[disabled]{cursor:not-allowed}label{font-size:14px;display:inline-block;margin-right:20px;width:100%}label[for="confirm"],label[for="remember"],label[for="stay"],label[for="ignore"],label[for*="maintenance"],label[for="emergency"]{cursor:pointer;font-size:14px}[data-request="account/help"] label[for="firstname"],[data-request="account/signup"] label[for="firstname"],header .mobile,header ul.menu li:first-child{display:none}label[for="firstname"]{width:calc(50% - 10px);margin-right:10px}label[for="lastname"]{width:calc(50% - 4px);margin-right:0}label[for="postal"]{width:calc(30% - 10px);margin-right:10px}label[for="city"]{width:calc(70% - 4px);margin-right:0}footer .brand,header .brand{width:60px;background:var(--color-primary-100)}.btn{-webkit-apperance:none;-moz-apperance:none;padding:12px 24px;border-radius:5px;font-size:18px!important;font-weight:100;line-height:1;overflow:hidden;user-select:none;margin-right:10px;display:inline-block;vertical-align:top;border:2px solid;border-color:var(--color-primary-100)}.btn.is--primary{background-color:var(--color-primary-100)}.btn.is--secondary{color:var(--color-primary-100);background-color:#fff0}.btn.is--warning{border-color:var(--color-error-100);background-color:var(--color-error-100);color:#fff}.btn:not(.is--loading):hover{border-color:var(--color-primary-200);background-color:var(--color-primary-200);color:#fff}.btn.is--warning:hover{color:#fff;border-color:var(--color-error-100);background-color:var(--color-error-100)}.btn.is--loading::after{content:"\f110";font-family:FontAwesome;animation:1.5s linear infinite spin;font-size:20px;color:var(--color-primary-400)!important;position:absolute;left:calc(50% - 10px);width:20px;height:20px;display:block;top:calc(50% - 10px);line-height:20px}.btn.is--warning.is--loading::after{color:#FFF!important}.btn.is--loading{position:relative;overflow:visible;color:transparent!important}.account form label:last-of-type{margin-bottom:30px}.admin form.filter input,.admin form.filter select{width:200px;display:inline-block;height:46px;vertical-align:middle}.admin form.filter{text-align:right;margin-top:30px}.admin form.filter button{margin:0}table{width:100%;margin-top:10px}table td{padding:.5em;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border:1px solid var(--color-border);font-size:14px}table th{background:var(--color-secondary-700);text-transform:uppercase;color:var(--color-secondary-300);font-size:14px;text-align:center;padding:.7em 1em;border:1px solid var(--color-border)}.admin main .avatar{width:30px;height:30px;padding:0;margin:0 auto}.admin main .avatar img{width:30px;height:30px}.admin main .avatar::before{line-height:30px;font-size:16px}.accounts table td:nth-child(1),.accounts table td:nth-child(4),.accounts table td:nth-child(5),.accounts table td:nth-child(6),.pages table td:nth-child(3),.pages table td:nth-child(4){text-align:center}.accounts table td:last-child,.pages table td:last-child{width:50px}.pages table td:nth-child(3),.accounts table td:first-child{width:50px}label[for*="metaname"]{width:calc(50% - 10px);margin-right:10px}label[for*="metavalue"]{width:calc(50% - 4px);margin-right:0}table h4{margin-top:20px}label[for*="firstname"]{width:calc(50% - 10px);margin-right:10px}label[for*="lastname"]{width:calc(50% - 4px);margin-right:0}label[for*="postal"]{width:calc(30% - 10px);margin-right:10px}label[for*="city"]{width:calc(70% - 4px);margin-right:0}.admin .element label{margin-bottom:10px!important}[data-trigger="addElement"]{margin-top:10px!important}ul.pagination{text-align:center;margin-top:10px}ul.pagination li{display:inline-block;padding:5px 10px}header{width:100%}header .brand{height:60px;margin-right:20px}header .brand a{color:inherit;width:100%;height:100%;display:flex;align-items:center;justify-content:center}footer .copyright a,footer .locale>a,header ul.cta .avatar::before,header ul.menu li a{color:var(--color-secondary-600)}footer .brand a i,header .brand a i{font-size:40px;color:#FFF}header ul.menu li a{font-size:.9rem;padding:5px 20px 0;line-height:50px;display:block;border-bottom:5px solid #fff0}header ul.menu li a:hover{border-bottom:5px solid var(--color-primary-100)}header ul.menu.is--mobile{display:block;position:absolute;background:var(--color-secondary-300);left:0;top:60px;width:100%}footer,footer .locale,header ul.cta{position:relative}header ul.menu.is--mobile a:hover{border-bottom:5px solid transparent!important}header .mobile i,header ul.cta>li>a{padding:10px;color:var(--color-secondary-600);display:block;cursor:pointer;transition:0.5s;font-size:1.2rem}header .mobile i{padding:20px}header ul.cta{display:flex;align-items:center;justify-content:center;margin-left:auto}header ul.cta .avatar{border-radius:50%;width:40px;height:40px;background:var(--color-secondary-700);display:block;overflow:hidden;opacity:.8;position:relative;margin:10px}header ul.cta .avatar:hover{opacity:1}header ul.cta .avatar::before{line-height:40px;display:block;font-size:20px;width:100%}header ul.cta .avatar img{width:40px;height:40px;position:absolute;left:0;top:0;z-index:2}footer{color:var(--color-secondary-500);width:100%}footer .locale{margin-top:10px;display:inline-block}footer .locale>a{font-size:1rem;display:block}footer .copyright a:hover,footer .locale>a:hover{color:var(--color-primary-200)}footer ul.legal{display:flex;align-items:center;justify-content:center;margin-top:50px}footer ul.legal li{margin:0 10px;font-size:.9rem}footer .copyright{font-size:.9rem;margin-top:10px}footer .brand{height:100px;display:block;margin:20px auto 0}footer .brand a{color:inherit;width:100%;height:60px;display:flex;align-items:center;justify-content:center}@media screen and (max-width:1280px){.container{padding:0 20px}main .container{margin:0}.account main,header nav.container{padding:0}header .brand,header .menu:not(.is--mobile) li{display:none!important}header .menu.is--mobile li:first-child,header .mobile{display:block}.account main .container{flex-direction:column-reverse;padding:0}.account .main-sidebar{width:100%;margin-top:20px}.account .main-content{width:100%;padding:30px 20px;}.accounts table td:nth-child(3),.accounts table td:nth-child(4),.accounts table td:nth-child(5),.accounts table th:nth-child(3),.accounts table th:nth-child(4),.accounts table th:nth-child(5){display:none!important}}










/* ================================================== GENERAL ================================================== */

@font-face { font-family:'Oswald'; src:url('../fonts/Oswald.ttf'); }

body {
    background:linear-gradient(to bottom, #a13d0012, #004f8017), url('../../media/bg.jpg'), #000;
    background-attachment: fixed;
    background-size: cover;
}

body.home {
    overflow:hidden;
}

body.home .loading {
    position: absolute;
    left: 50px;
    bottom: 50px;
    font-family:"Oswald", sans-serif;
    text-transform:uppercase;
    font-size:24px;
}

body.home .loading .fa-spinner {
    margin-right:5px;
    animation: spin 1.5s infinite linear;
}

hexagon-stories {
    display:flex;
    overflow:hidden;
    position:relative;
    width:100%;
    height:100vh;
    max-width:1920px; max-height:1080px;
    min-width:1280px; min-height:720px;
    margin:0 auto;
    user-select:none;
    flex-flow: row;
    animation:fadein .5s ease-in; animation-fill-mode: forwards;
}










/* ================================================== COMMUNITY ================================================== */

hex-community {
    position:relative;
    width: 380px;
    min-width:380px;
    max-width:380px;
    height: 100vh;
    min-height:720px;
    max-height:1080px;
    box-shadow: inset -8px 0 10px -8px #000;
    z-index: 100;
    background:var(--color-secondary-200);
    display:flex;
    flex-direction:column;
}

hex-community .headline {
    background: var(--color-primary-100);
    line-height: 60px;
    width: 100%;
    font-weight: bold;
    text-align: center;
    font-size: 20px;
    color: #FFF;
    text-transform: uppercase;
    margin: 0;
    box-shadow: inset -8px 0 10px -8px #000;
    display: block;
    font-family:"Oswald", sans-serif;
}

hex-community hex-messages {
    height: 100vh;
    overflow-y: scroll;
}

hex-community hex-messages::-webkit-scrollbar {
    display: none;
}

hex-community .message {
    display:flex;
    margin:20px 20px 10px 10px;
    position:relative;
}

hex-community .message.me {
    flex-direction:row-reverse;
}

hex-community .messagey.you {
    flex-direction:row;
}

hex-community .message > div:first-child {
    background: var(--color-secondary-700);
    width:50px;
    height:50px;
    border-radius:50px;
    position:relative;
}

hex-community .message > div:first-child::before {
    font-family: "Font Awesome 6 Free";
    content: "\f007";
    font-weight: 700;
    z-index: 1;
    position:absolute;
    text-align: center;
    line-height: 50px;
    display: block;
    font-size: 18px;
    width: 100%;
    color: var(--color-secondary-600);
}

hex-community .message.me > div:first-child {
    margin-left:20px;
}

hex-community .message.you > div:first-child {
    margin-right:20px;
}

hex-community .message > div:last-child {
    background: var(--color-secondary-700);
    display: block;
    padding: 10px;
    width:calc(100% - 70px);
    border-radius:5px;
}

hex-community .message.me > div:last-child::after {
    content: " ";
    position: absolute;
    top:15px;
    right: 50px;
    border-width: 10px;
    border-style: solid;
    border-color: transparent transparent transparent var(--color-secondary-700);
}

hex-community .message.you > div:last-child::after {
    content: " ";
    position: absolute;
    top:15px;
    left: 50px;
    border-width: 10px;
    border-style: solid;
    border-color: transparent var(--color-secondary-700) transparent transparent;
}

hex-community .message img {
    width:50px;
    height:50px;
    position:absolute;
    z-index:2;
    border-radius:50px;
}

hex-community .message .name {
    font-weight:bold;
    font-size:14px;
    float:left;
    margin-right:10px;
}

hex-community .message .is--administrator {
    color:red;
}

hex-community .message .is--moderator {
    color:green;
}
hex-community .message .is--supporter {
    color:dodgerblue;
}

hex-community .message .time {
    color: var(--color-secondary-600);
    font-size: 12px;
    float:right;
}

hex-community .message .moderation {
    color: var(--color-secondary-600);
    font-size: 12px;
    float:right;
    cursor:pointer;
    margin-left:10px;
}

hex-community .message .moderation .dropdown {
    padding: 5px;
}

hex-community .message .moderation .dropdown i {
    margin: 3px;
    font-size:16px;
    color:var(--color-primary-100);
}

hex-community .message .moderation .dropdown i:hover {
    color:var(--color-primary-200);
}

hex-community .message .text {
    display: block;
    margin-top:30px;
    width:100%;
}

hex-community .scrollbar {
    position:absolute;
    bottom:20%;
    right:-10px;
    z-index:9999 !important;
}

hex-community .scrollbar ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

hex-community .scrollbar li {
    margin-bottom:20px;
    background: var(--color-primary-100);
    min-width: 20px;
    display: block;
    height: 20px;
    color: #FFF;
    font-size: 14px;
    font-weight: bold;
    line-height: 20px;
    border-radius: 3px;
    text-align: center;
    padding: 0 3px;
    cursor:pointer;
    transition:all .1s linear;
}

hex-community .scrollbar li:hover {
    transform:scale(1.2);
}

hex-community form {
    display:flex;
}

hex-community form button {
    box-shadow: inset -8px 0 10px -8px #000;
    border: none !important;
    border-radius: 0 !important;
    margin:0 !important;
}

hex-community form input {
    border-radius:0 !important;
    border:0 !important;
    background:rgba(0,0,0,.25) !important;
}




















/* ================================================== SIDEBAR ================================================== */

hex-sidebar { 
    height:100vh; 
    display:block; 
    min-width:60px; 
    width:60px; 
    min-height:720px; 
    background-color:var(--color-secondary-200);
    box-shadow: inset 8px 0 10px -8px #000;
}

hex-menu .headline {
    background: var(--color-primary-100);
    line-height: 60px;
    width: 100%;
    font-weight: bold;
    text-align: center;
    font-size: 20px;
    color: #FFF;
    text-transform: uppercase;
    margin: 0;
    display: block;
    font-family:"Oswald", sans-serif;
}


hex-sidebar > ul          { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; height:100%; }
hex-sidebar > ul > li          { display:block; width:100%; height:60px;
    pointer-events:all;cursor:pointer; position:relative;  transition: all .1s linear; }
hex-sidebar > ul > li > i        { width:100%; line-height:60px !important; font-size:20px; text-align:center; color:#FFF !important; display:block;transition: all .1s linear; }
hex-sidebar > ul > li:hover > i, hex-sidebar > ul > li.is--active > i{ transform:scale(1.2); opacity:1;}
hex-sidebar > ul > li:hover, hex-sidebar > ul > li.is--active{ background-color:var(--color-primary-100);box-shadow: inset 8px 0 10px -8px #000; }
hex-sidebar > ul > li:nth-child(8) {margin-top: auto;}




hex-menu .subtitle {
    line-height:30px; 
    width:100%; 
    background-color:var(--color-secondary-700);
    color:var(--color-secondary-300);
    text-transform:uppercase; 
    font-size:14px; 
    padding-left:10px;
    font-weight:normal;
    text-align:left;
}

hex-menu .content {
    padding:10px;
}



hex-sidebar li span {
    background: #1E90FF;
    min-width: 15px;
    display: block;
    height: 15px;
    color: #FFF;
    font-size: 10px;
    font-weight: bold;
    line-height: 15px;
    border-radius: 3px;
    position: absolute;
    bottom: 5px;
    right: 5px;
    text-align: center;
    padding: 0 3px;
}


hex-sidebar .avatar img {
    background-color: var(--color-secondary-700)
}
 hex-sidebar .dropdown {
    right: 30px;
 top: 30px;
 }

hex-sidebar .avatar {
    border-radius: 50%;
    width: 40px;
    height: 40px;
    background: var(--color-secondary-700);
    display: block;
    overflow: hidden;
    opacity: .8;
    position: relative;
    margin: 10px
}

hex-sidebar .avatar:hover {
    opacity: 1
}

hex-sidebar .avatar::before {
    line-height: 40px;
    display: block;
    font-size: 20px;
    width: 100%
}

hex-sidebar .avatar img {
    width: 40px;
    height: 40px;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2
}



hex-menu {
    position:absolute;
    top:0;
    left:0;
    width:100%;
}

hex-menu > * {
    display:none !important;
}

hex-menu > .is--active {
    background:var(--color-secondary-200);
    height:100vh;
    width:380px;
    display:block;
    float:right;
    position:absolute;
    animation:0.4s forwards sliderightin;
    border-left:1px solid var(--color-border);
}


hex-menu > .is--vanishing {
    animation:0.4s forwards sliderightout;
}





hex-map.is--active {
    width:800px;
}



hex-map.is--active .map {
    width: calc(100% - 20px);
    background: url(https://localhost/hexagonstories/public/media/minimap.png) bottom center;
    height: calc(100% - 80px);
    margin: 10px;
}





hex-main { background-color:#000; position:relative; display:block; width:100%; height:100vh; z-index:10;
    justify-content: center;
    align-items: center;
    text-align: center;
  min-height:720px; overflow:hidden;}






 







hex-ambience, hex-interface, hex-loading, hex-abort, hex-modalbox {
    position:absolute;
    top:0; left:0;
    width:100%; height:100%;
    pointer-events:none;
}



hex-ambience {
    z-index:200;
}

hex-interface {
    z-index:300;
    border-right:1px solid var(--color-border);
    border-left:1px solid var(--color-border);
}

hex-interface-right {
    position: absolute;
    right: 0;
    top: 0;
    width: 250px;
    height: 100%;
    padding: 20px;
}

hex-interface-center {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 20px;
}

hex-interface-left {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    padding: 20px;
}



hex-modules {
    z-index: 1;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


.wiggle { animation: wiggle 2.5s infinite; }



hexagon-stories .response.error {
    display: block !important;
    background-color: #E01E14;
    width: 100%;
    padding: 10px;
    color: #FFF;
    font-size: 12px;
    margin-top:10px;
}

hexagon-stories  .response.success {
    display: block !important;
    background-color: #14e01e;
    width: 100%;
    padding: 10px;
    color: #FFF;
    font-size: 12px;
    margin-top:10px;
}




hex-modalbox p { text-align:justify; font-size:12px; }

::-webkit-scrollbar-track, ::-webkit-scrollbar-corner 
{
    background:var(--color-secondary-200);
  }
  
::-webkit-scrollbar-thumb {
    background: var(--color-secondary-700);
  }
  
::-webkit-scrollbar-thumb:hover {
    background: var(--color-primary-100);
  }


/*
hex-profile, hex-badges, hex-inventory, hex-settings, hex-map, hex-quests, hex-skills, hex-crafting {
    position: absolute;
    z-index: 9999999;
    pointer-events: none;
    display:none;
    top:50px;
    left:50px;
}*/

hex-windows .is--active {
    display: block !important;
}


hex-windows div {
    background: var(--hex-color-bg);
    width:350px;
    height:400px;
    text-align:left;
    z-index:9999;
    pointer-events:all;
  }
  
hex-windows .headline {
  background: #1e8ffe;
    line-height: 25px;
    width: 100%;
    font-weight: bold;
    text-align: center;
    font-size: 20px;
    color: #FFF;
    text-transform: uppercase;
    margin: 0;
    font-family: Oswald;
    display:block;
    text-shadow:none;
  }

  span.btn.btn-close-menu {
    position: absolute;
    top: 0;
    right: 0;
    width: 25px;
    line-height: 25px;
    padding: 0;
    margin: 0;
}


interface-right {
    position: absolute;
    right: 0;
    top: 0;
    width: 290px;
    height: 100%;
    padding: 20px;
}

hex-player-quests .headline {
    background: var(--hex-color-bg);
    width: 100%;
    display: flex;
    font-size: 12px;
    margin-top: 30px;
    padding: 2px 10px;
    line-height: 24px;
    font-weight: bold;
    color: #FFF;
}

hex-player-quests .headline i:first-child {
    margin-right: 6px;
    line-height: 24px;
}

hex-player-quests .headline i:last-child {
    margin-left: auto;
    line-height: 24px;
}



player-location ul {
    display: flex;
    margin: 0;
    list-style: none;
}



span[data-id="location"] {
    padding: 2px 10px;
    width: 100%;
    display: block;
    border-bottom: 1px solid #2c2e30;
    text-align: center;
    text-transform: uppercase;
    font-weight: bold;
    }


player-location li:nth-child(2) {
 
    margin-left: auto;
}

player-location li {
    padding: 2px 10px;
}

player-location {
    background: #18181b;
    width: 100%;
    display: block;
    font-size: 12px;
    border: 1px solid #2c2e30;
}

hex-fatal-error { 
    display:flex; width:100%; height:calc(100vh);  position:absolute;  top:0; left:0; text-align:center; z-index:99999;
    background: linear-gradient(to bottom, #a13d0012, #004f8017), url('../../media/bg.jpg'), #000; justify-content: center;flex-flow: column;
    align-items: center; pointer-events: none;
    color: var(--hex-color-6);
}

hex-fatal-error > .fa-power-off, hex-fatal-error > .fa-times-circle, hex-fatal-error > .fa-exclamation-triangle { 
    display: block;
    width: 60px;
    height: 60px;
    font-size:60px;
}

hex-fatal-error > p {
    color:var(--hex-color-8);
}

hex-fatal-error > .headline {
    margin: 20px auto 50px;
    text-shadow: 0 0 5px rgba(0,0,0,.5);
}


header a.btn.is--primary {
    margin: 0;
    font-weight:bold;
    font-family:"Oswald", sans-serif;
    margin-right:5px;

}

header a.btn.is--primary:hover {
    color:#FFF !important;
}


header a i {
    margin: 0 3px 3px 0;
    font-size: 14px;
    vertical-align: middle;
}




.maintenance main, .home main {
    display: flex;
}

.maintenance main .container {
    align-self:center;
    width:620px;
}


.home main .container  {
    text-align:center;
    align-self:center;
}


footer {
    border-top: 1px solid #45372c5c;
    box-shadow:rgba(0, 0, 0, 0.15) 0px -5px 5px 0;
}

header {
    border-bottom: 1px solid #45372c5c;
    box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 5px 0;
}
.main-sidebar, .main-content {
    border: 1px solid #45372c5c;
    box-shadow:rgba(0, 0, 0, 0.15) 0px 0px 5px 5px;
}

h1.title, h2, h3 {
    font-family: 'Oswald', sans-serif;
    text-transform:uppercase;
    color:#FFF;
}



.ko-fi-widget {
    position: absolute;
    right: 30px;
    bottom: 20px;
} 


.imprint .address p  {
    font-size: 2rem;
    font-family: 'Oswald', sans-serif;
    text-transform:uppercase;
    color:#FFF;
    text-align: center;
    margin-bottom:50px;
}

.codex h2, .codex h3 {
    text-align:justify;
}




hex-tabletop { 
    display: flex;  
    justify-content: center; 
    /*padding-left: 430px; */
    align-items: center; }


    hex-tabletop svg {
        width:100%;
        height: 100vh;
        max-width: 1920px;
        max-height: 1080px;
      }
      
      
      hex-tabletop::after { 
      -webkit-mask: radial-gradient(80% 60%, transparent 0%, rgba(0,0,0,.8) 75%, black);
      backdrop-filter: blur(5px);
      animation:zyklus 3600s linear infinite;
      position: absolute;
      content: '';
      width: 100%;
      height: 100%;
      pointer-events: none;
      display: block;
      top: 0;
      left: 0;
      }
hex-tabletop svg use:not([class]) {
    pointer-events:none !important;
}

      .dir-1 ,.dir-2,.dir-3,.dir-4,.dir-5,.dir-6 {
        animation-name: example;
        animation-duration: 1s;
        animation-fill-mode: forwards;
        animation-delay:0s;
        }

        .dir-1 {
            transform: translate(127px,-192px); 
            }
            .dir-2 {
            transform: translate(254px,0);
            }
            .dir-3 {
            transform: translate(127px,192px);
            }
            .dir-4 {
            transform: translate(-127px,192px);
            }
            .dir-5 {
            transform: translate(-254px,0);
            }
            .dir-6 {
            transform: translate(-127px,-192px);
            }
 
            
            @keyframes example {
                to {transform: translate(0,0);}
                }


                    



              

                        hex-tabletop svg .base {
                            cursor:pointer !Important;
                            opacity: 0;
                            animation-name:fadein; animation-duration:.5s; animation-fill-mode: forwards; animation-delay:2s;
                          }

                          hex-tabletop svg .base {
                            animation-duration:0s;
                            animation-delay:0s;
                          }
                          hex-tabletop svg .location {
                            cursor:pointer !Important;
                          }



                          hex-tabletop svg .go:not(.location) {
                            cursor:pointer !Important;
                            opacity:0;
                            transition:opacity .1s linear;
                          }

                          hex-tabletop svg .go:hover {
                            opacity:1;
                          }


    @keyframes zyklus {
        0% { background:radial-gradient(transparent 30%, rgba(0,0,0,0.6)), #070032b5; }
        10% { background:radial-gradient(transparent 30%, rgba(0,0,0,0.6)),#070032b5; }
        20%  {background:radial-gradient(transparent 30%, rgba(0,0,0,0.6)),#070032b5; }
        30% { background:radial-gradient(transparent 30%, rgba(0,0,0,0.6)),#ad68002c; } 
        40% { background:radial-gradient(transparent 30%, rgba(0,0,0,0.6)); }
        50% { background:radial-gradient(transparent 30%, rgba(0,0,0,0.6)); }
        60% { background:radial-gradient(transparent 30%, rgba(0,0,0,0.6)); }
        70% { background:radial-gradient(transparent 30%, rgba(0,0,0,0.6)),#4249012c;}
        80% { background:radial-gradient(transparent 30%, rgba(0,0,0,0.6)),#070032b5; }
        90% { background:radial-gradient(transparent 30%, rgba(0,0,0,0.6)),#070032b5; }
        100% { background:radial-gradient(transparent 30%, rgba(0,0,0,0.6)),#070032b5; }
    }


[data-state="c00"] hex-tabletop::after { animation-delay: -0s !important; }
[data-state="c01"] hex-tabletop::after { animation-delay: -150s !important; }
[data-state="c02"] hex-tabletop::after { animation-delay: -300s !important; }
[data-state="c03"] hex-tabletop::after { animation-delay: -450s !important; }
[data-state="c04"] hex-tabletop::after { animation-delay: -600s !important; }
[data-state="c05"] hex-tabletop::after { animation-delay: -750s !important; }
[data-state="c06"] hex-tabletop::after { animation-delay: -900s !important; }
[data-state="c07"] hex-tabletop::after { animation-delay: -1050s !important; }
[data-state="c08"] hex-tabletop::after { animation-delay: -1200s !important; }
[data-state="c09"] hex-tabletop::after { animation-delay: -1350s !important; }
[data-state="c10"] hex-tabletop::after { animation-delay: -1500s !important; }
[data-state="c11"] hex-tabletop::after { animation-delay: -1650s !important; }
[data-state="c12"] hex-tabletop::after { animation-delay: -1800s !important; }
[data-state="c13"] hex-tabletop::after { animation-delay: -1950s !important; }
[data-state="c14"] hex-tabletop::after { animation-delay: -2100s !important; }
[data-state="c15"] hex-tabletop::after { animation-delay: -2250s !important; }
[data-state="c16"] hex-tabletop::after { animation-delay: -2400s !important; }
[data-state="c17"] hex-tabletop::after { animation-delay: -2550s !important; }
[data-state="c18"] hex-tabletop::after { animation-delay: -2700s !important; }
[data-state="c19"] hex-tabletop::after { animation-delay: -2850s !important; }
[data-state="c20"] hex-tabletop::after { animation-delay: -3000s !important; }
[data-state="c21"] hex-tabletop::after { animation-delay: -3150s !important; }
[data-state="c22"] hex-tabletop::after { animation-delay: -3300s !important; }
[data-state="c23"] hex-tabletop::after { animation-delay: -3450s !important; }