/* GENERAL */
* { box-sizing: border-box; scrollbar-color: #6224 #000; scrollbar-width: thin; }
::-webkit-scrollbar { width: 8px; height: 8px; background:#00000000; }
::-webkit-scrollbar-thumb { background: #300; }
::-webkit-scrollbar-thumb:active { background: #622; }
input::-webkit-outer-spin-button, 
input::-webkit-inner-spin-button { display:none; } 
textarea:focus, input:focus{ outline: none; }
@font-face { font-family: 'benderlight'; src: url('../../_global/fonts/bender.light.otf');  }
html { font-size: 62.5%; background-color: #000; color:#FFF; }
html { background-image: url(../../../_global/img/bg.jpg); background-size: cover; background-attachment: fixed; }
body { font-size: 1.5rem; height:100vh; }
#app { margin: 0 auto; height: 100vh; height: calc(var(--vh, 1vh) * 100); }
a.dashed { color: #F7F0D4; border-bottom: 1px dashed #F7F0D488; }
.bg-striped { background-image: linear-gradient(45deg, #181818 25%, #000 25%, #000 50%, #181818 50%, #181818 75%, #000 75%, #000 100%); background-size: 11.31px 11.31px; }
.centered { text-align: center; }
h1 { font-size: 130%; }
h2 { font-size: 120%; }
h3 { font-size: 110%; }

/* ACCESSIBILITY */
* { -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
.local * { user-select: text;}
*:focus { outline: 0 !important; }
::selection { background-color: red; color: blue; }
.user-select-ok * { -webkit-user-select: text; -khtml-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; }

/*  PAGES  */
.page { position: relative; margin: 0 auto; xwidth: 1020px; text-align: center; height: calc(100% - 1px); }
.page__head { xwidth: 1020px; height: 41px; line-height: 40px; position: absolute; top: 0; border-bottom: 1px solid #FFF; padding: 0 10px; z-index: 1000; }
.page__head-left { float: left; }
.page__head-left h1 { font-family: 'benderlight', sans-serif; color: #F7F0D4; }
.page__head-right { float: right; transition: background-color 0.5s ease; }
.page__content { position: absolute; width: calc(100% - 10px); left: 10px; top: 40px; bottom: 40px; overflow-x: auto; overflow-y: auto; }
.page__foot { xwidth: 1020px;  height: 40px; line-height: 40px; position: fixed; max-width: inherit; bottom: 0; border-top: 1px solid #FFF; padding: 0 10px; z-index: 1000; }
.page__foot-left { float: left; text-transform: uppercase; font-size: 75%; }
.page__foot-left, .page__foot-left a { color: #FFFFFF88; }
.page__foot-left a:hover { color: #FFFFFF; }
.page__foot-left .home-link img { width: 24px; height: 24px; border-radius: 50%; float: left; margin: 8px 5px 0 0; }
.page__foot-left span { margin: 0 3px; }
.page__foot-right { float: right; }

/*  MENUS  */
.menu-title { font-family: 'benderlight', sans-serif ; color: #F7F0D4; font-size: 130%; margin: 30px 0 5px; text-transform: uppercase; }
.menu-title span { opacity: 0.35; }
.menu-links { margin:0 auto; max-width:800px; }
.menu-links a { height:48px; line-height:48px; font-size: 130%; color:#FFF; width: 45%; display: inline-block; margin: 4px 2px; background: rgba(255,255,255,0.05); cursor:pointer; color:#FFF; }
.menu-links a:hover { background: rgba(255,255,255,0.1); color:#F7F0D4; }
.menu-links a span { font-size: 80%; opacity: 0.325; margin-left: 10px; }

/*  HEAD & FOOT  */
form.search { width:300px; height:30px; margin:5px 0 0; border:1px solid #FFFFFF44; text-align:left; float: right; }
form.search.expanded { width: 300px; }
form.search input { background: none; border: 0; height: 30px; line-height: 30px; padding: 0 5px; width: calc(100% - 30px); color:#FFF; float:left; }
form.search button { color:#FFFFFFAA; line-height: 32px; width: 25px; float:right; padding-left:5px; cursor:pointer; float:right; }
form.search label { color:#FFFFFF66; line-height: 32px; width: 25px; float:right; padding-left:5px; cursor:pointer; float:right;}
form.search label span { display:none; }
#q-label { position: relative; }

form.search .mobile-trigger { width: 25px; height: 25px; position: absolute; top: 0; right: 0;}
.page__head-right.expanded .mobile-trigger { display:none;} 

.page__head-right .save { text-transform: uppercase; font-size: 80%; background: #FFF2; padding: 0 10px; cursor: pointer; height: 26px; line-height: 26px; margin: 7px 10px; float: right; }
.page__head-right .save:hover { background: #FFF4; }

.page__head-right .reset { text-transform: uppercase; font-size: 80%; background: #FFF2; padding: 0 10px; cursor: pointer; height: 26px; line-height: 26px; margin: 7px 10px; float: right; }
.page__head-right .reset:hover { background: #FFF4; }

.form-reset { float: right; background: #333; height: 24px; margin: 8px 5px; width: 24px; line-height: 24px; text-align:center; font-size: 80%; border-radius: 2px; color: #AAA; cursor: pointer; opacity: 1; }
.form-reset:not(.inactive):hover { color: #FFF; }
.form-reset.inactive { opacity:0.3 }
.fa-cog { float: right; margin: 0 0 0 15px; cursor: pointer; line-height: 39px !important; color: #FFFFFFAA; font-size: 20px;}
.fa-info-circle { float: right; margin: 0 0 0 15px; cursor: pointer; line-height: 39px !important; color: #FFFFFFAA; font-size: 20px; }
.time { margin-left:15px; color: #F7F0D4; }

/*  COLOUR HELPERS  */
.bg-tbrb { background: #6228; }

/*  MODALS  */
.modal-bg { background: rgba(0,0,0,0.9); position: fixed; z-index: 1001; top: -5000px; left: -5000px; width: 10000px; height: 10000px; }
.modal { background: rgba(0,0,0,0.9); position: fixed; z-index: 1002; transform: translate(-50%, -50%); top: 50%; left: 50%; width:728px; border: 1px solid #888; max-width:100%; max-height:100%; }
.modal-heading { height: 40px; font-size: 65%; background: #FFFFFF19; line-height: 40px; padding: 0 42px 0 10px; width: 100%; overflow: hidden; border-bottom: 2px solid #000; }
.modal-heading h1 { font-family: 'benderlight', sans-serif ; color: #F7F0D4; font-size: 200%; }
.modal-content { width: 100%; max-width: 950px; min-height: 50vh; max-height: calc(100vh - 90px); padding:10px; color: #CCC; overflow-y: scroll; border-left: 8px solid #00000000; }
.modal.modal--has-header .modal-content h1 { margin: -10px -10px 15px -10px; background: #1E1E1E; padding: 8px;}
.modal-close { background:#450D0D; color:#FFF; width:28px; height:24px; line-height:23px; text-align:center; font-size:90%; position:absolute; top:8px; right:8px; border-radius:3px 0 3px 0; cursor:pointer; z-index: 1003; }
.modal.modal--has-header .modal-close { top: 13px; right: 10px;}
.modal-close:hover { background:#250404; }
.modal-content p { margin: 0 5px 10px; }
.modal-content h2 { background: #46606a88; font-size: 90%; margin-bottom: 10px; padding: 5px; color:#FFF; }
.modal-content h3 { font-weight:bold; font-size: 90%; margin: 0 5px 10px; }

.modal-details { width: 600px; }

.modal--error { top: 35%; }
.modal--error .modal-content { min-height: auto; font-size: 110%; }
.modal--error .modal-content ul {list-style-type: disclosure-closed; }
.modal--error .modal-content ul li { margin: 5px 0; }

.modal--idFinder { }
.modal--idFinder span.count { color: #FFF6; font-size: 75%; font-family: monospace; float: right; }
.modal--idFinder .modal-content { height: 389px;}
.modal--idFinder .id-finder-input { margin-bottom: 10px; }
.modal--idFinder .id-finder-input input { padding:5px 10px}
.modal--idFinder .id-finder-results {  }
.modal--idFinder .id-finder-result { background:#FFF2; margin: 5px 0; padding: 6px 10px; font-size: 95%; cursor:pointer; }
.modal--idFinder .id-finder-result:hover { background:#FF02; }

form.modal-content.with-submit-button { padding-bottom: 50px; }
form.modal-content button.form-submit { background: #9F9D90; color:#333; text-transform: uppercase; font-weight: bold; font-size: 0.9em; padding: 0 20px; position: absolute; bottom: 17px; right: 17px; height: 30px; line-height: 30px; }

/*  MODAL - OVERVIEW  */
.modal-details { width:600px; }
.modal-item-hero-holder { text-align:center; min-height:171px; min-width:267px; margin: 0px 8px; }
.modal-item-hero { text-align:center; height:171px; width:49%; margin: 0; display:inline-block; }
.Zmodal-item-hero.half-width { width: 50%; float: left; padding: 10px 0; min-width:auto; }
.Zmodal-item-hero.half-width.center { width:49%; }
.Zmodal-item-hero.half-width.center:nth-child(1) { margin-left: 7px;}
.Zmodal-item-hero.half-width.center:nth-child(2) { margin-left: -3px; }

.modal-item-hero img { max-width: 100%; max-height:100%; }
.modal-item-stats { margin: 10px 8px 10px 12px; }
.modal-item-stat { background: #FFFFFF19; width: calc(50% - 10px); display: inline-block; padding: 0 8px; margin: 2px 3px; font-size: 70%; height:22px; line-height:24px; min-width:259px;}
.modal-item-stat span { float:right; }
.modal-item-stat.positive span { color: #5FAFD8; }
.modal-item-stat.negative span { color: #FF3D3D; }
.modal-item-desc { margin: 0 20px; font-size: 95%; min-width:267px; text-align: justify; }
.modal-item-desc p { margin-bottom: 10px; }
.modal-item-compare { width: calc(50% - 10px); display: inline-block; }
.modal-item-compare select { background: #FFFFFF19; padding: 0 4px; margin: 2px 3px; font-size: 70%; height:22px; line-height:24px; width:100%; min-width:261px; border: 0; color: #CCC;}
.modal-item-compare select option { color: #333;  }

#json { color:#F66; text-wrap: auto; text-align: left; padding: 10px 0; font-size:90%; }
#json-keys { position: absolute; top: 0; right: 0; border-radius: 5px; background: #FFF2; margin: 10px; font-size: 90%; text-align: right; padding: 10px; }
#json-keys a { color: #FFFC; margin: 0px 0; display: inline-block; padding: 2px 0; }

/*  TABS  */
.tabs { margin: 5px 10px 0px 0px; padding: 5px 0 0; text-align: left; border-bottom: 1px solid #266; }
.tabs .tab { background:#2664; padding:5px 20px; margin:0 5px 5px 0; color:#666; display: inline-block; cursor: pointer; text-transform: uppercase; font-size: 80%;}
.tabs .tab.active { background:#266; color:#FFF;  }
.tabs .tab:hover { background:#2669; color:#FFF; }

/*  USER OPTIONS  */
.option-holder { display: inline-block; padding: 10px 15px; border: 2px solid #0000; background: #FFF2; margin: 10px 10px 0 0; color:#FFF8; min-width:100%;}
.option-holder.selected { border: 2px solid #060; background: #0F02; color:#FFF; }
.option-holder label { line-height: 18px; display: block !important; }

/*  SETTINGS  */
.settings-columns-holder {  }
.settings-columns-holder .settings-column { width:100%; float: left; }
.settings-columns-holder.columns-2 .settings-column { width:50%; }
.settings-columns-holder h2 { position: relative; margin:0; }
.settings-row { margin-bottom:5px; }

.settings-row h2 span.all-none { float: right;  position: absolute; top: 3px; right: 4px; height: 18px; }
.settings-row h2 span.all-none span { text-transform: uppercase; font-size: 82.5%; margin-left: 5px; padding: 0 5px; border-radius: 2px; background: rgba(0,0,0,0.5); height: 20px; line-height: 20px; display: inline-block; opacity: 0.5; cursor:pointer; }
.settings-row h2 span.all-none span:hover { opacity:1; }
.settings-row h2 span.all-none span.all {}
.settings-row h2 span.all-none span.none {}

.settings-item { padding:0 5px; margin:10px 0; font-size:85%; float: left; width: 100%; line-height:20px; }

input[type=checkbox] { display:none; }
input[type=checkbox] + label { display:inline-block; background:url("../icons/checkbox.png") no-repeat; height: 19px; padding-left: 30px; cursor:pointer; }
input[type=checkbox]:checked + label { background:url("../icons/checkbox-checked.png") no-repeat; }

input[type=radio] { display:none; }
input[type=radio] + label { display:inline-block; background:url("../icons/checkbox.png") no-repeat; height: 19px; padding-left: 30px; cursor:pointer; }
input[type=radio]:checked + label { background:url("../icons/checkbox-checked.png") no-repeat; }

input[type=text] { border:2px solid #5B5C54; padding:2px 5px; background:none; width:100%; color:#CCC; }
input[type=number] { border:2px solid #5B5C54; padding:2px 5px; background:none; width:60px; color:#CCC; }

select { padding: 5px 10px; margin: 2px 0; background: #00000000; color: #CCC; border: 2px solid #aeafa0; width: 100%; }
select option { background: #CCCCCC; color: #333; }
select + label { display:inline-block; height: 19px; padding-left: 30px; cursor:pointer; }

.double-width.checkbox-with-input input[type=checkbox] + label { float: left; margin-top: 3px; width: 56%;  }
.double-width.checkbox-with-input input[type=text] { width: 44%; }

.full-width.checkbox-with-input input[type=checkbox] + label { float: left; margin-top: 3px; width: 28%;  }
.full-width.checkbox-with-input input[type=text] { width: 72%; }

.modal-item-stat .links-wiki { width: 18px; height: 18px; margin: 2px 0; overflow: hidden; }
.modal-item-stat a.dashed { font-size: 120%; }
svg { max-width: 100%; max-height: 100%; }


.child-cols-1 > * { width:100%; }
.child-cols-2 > * { width:calc(100% / 2); }
.child-cols-3 > * { width:calc(100% / 3); }
.child-cols-4 > * { width:calc(100% / 4); }
.child-cols-5 > * { width:calc(100% / 5); }
.child-cols-6 > * { width:calc(100% / 6); }

@media only screen and (max-width: 700px) { 
.child-cols-1 > * { min-width:100%; }
.child-cols-2 > * { min-width:340px;}
.child-cols-3 > * { min-width:220px; }
.child-cols-4 > * { min-width:165px; }
.child-cols-5 > * { min-width:130px; }
}

@media only screen and (max-width: 350px) { 
.child-cols-2 > * { min-width:100%;}
}

@media only screen and (max-width: 340px) { 
.child-cols-4 > * { min-width:100%;}
.child-cols-3 > * { min-width:100%;}
}

@media only screen and (max-width: 233px) { 
.child-cols-3 > * { min-width:100%;}
}

@media only screen and (max-width: 175px) { 
.child-cols-4 > * { min-width:100%;}
}

@media only screen and (max-width: 140px) { 
.child-cols-5 > * { min-width:100%;}
}

/*  SIZES  */
.size-1x1 { aspect-ratio: 1 / 1; }
.size-2x1 { aspect-ratio: 2 / 1; }
.size-3x1 { aspect-ratio: 3 / 1; }
.size-4x1 { aspect-ratio: 4 / 1; }
.size-5x1 { aspect-ratio: 5 / 1; }
.size-1x2 { aspect-ratio: 1 / 2; }
.size-2x2 { aspect-ratio: 2 / 2; }
.size-3x2 { aspect-ratio: 3 / 2; }
.size-4x2 { aspect-ratio: 4 / 2; }
.size-5x2 { aspect-ratio: 5 / 2; }
.size-1x3 { aspect-ratio: 1 / 3; }
.size-2x3 { aspect-ratio: 2 / 3; }
.size-3x3 { aspect-ratio: 3 / 3; }
.size-4x3 { aspect-ratio: 4 / 3; }
.size-5x3 { aspect-ratio: 5 / 3; }
.size-1x4 { aspect-ratio: 1 / 4; }
.size-2x4 { aspect-ratio: 2 / 4; }
.size-3x4 { aspect-ratio: 3 / 4; }
.size-4x4 { aspect-ratio: 4 / 4; }
.size-5x4 { aspect-ratio: 5 / 4; }
.size-1x5 { aspect-ratio: 1 / 5; }
.size-2x5 { aspect-ratio: 2 / 5; }
.size-3x5 { aspect-ratio: 3 / 5; }
.size-4x5 { aspect-ratio: 4 / 5; }
.size-5x5 { aspect-ratio: 5 / 5; }