/* global */

@font-face {  font-family: 'FontAwesome';  src: url('../fonts/fontawesome-webfont.eot?v=4.2.0');  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.2.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff?v=4.2.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.2.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.2.0#fontawesomeregular') format('svg');  font-weight: normal;  font-style: normal;}
* {padding:0;margin:0;box-sizing:border-box;outline:none;}
:root {--headertext:#EFEFEF;--primarycol: #EFEFEF;--bgcol: #017180;--tableaccent: #069;--tabletext: #000;--tableback: rgba(255,255,255,0.5);--menuback:#3B3B3B;--menuhover:#1E1E1E;--menutext:#FFF;--keyword:#990000;}
body{  -webkit-print-color-adjust:exact !important;  print-color-adjust:exact !important;font-family:"arial";background: var(--bgcol);color: #FFF;}
#system {color:#000}
h1,h2,h3,h4 {color:var(--headertext);font-weight:200;}
h1 {padding:20px;width:100%;float:left;text-align:center}

/* home */
.page_content {margin-top:60px}
#nav {width: 100%;padding: 50px;break-inside: avoid;col;column-count: 3;column-gap: 20px;column-span: all;align-content: center;}
.blocklink {background: rgba(255,255,255,0.6); break-inside: avoid; float: left; clear:both; display: inline-block;width: 100%;padding: 50px;cursor: pointer;text-decoration: none;font-size: 25px;color: #000;margin: 0 0 15px 0;border-radius: 4px;border: 3px solid rgba(255,255,255,0.5);}
.blocklink:hover {background: rgba(255,255,255,0.8);}
.header_section {width:100%;float:left;position: fixed;top: 0;left: 0;z-index: 3;height: 40px;background:rgba(0,0,0,0.3);width:100%;border-bottom:2px solid rgba(0,0,0,0.5);}
#container::before {width:100%; height:40px; position:fixed; background:var(--bgcol); z-index:1; top:0; left:0; content:"";}
.header_section .link { padding:10px 20px; color:#CCC; float:left; display:inline-block;text-decoration:none;  }
.header_section .link:hover { color:#FFF; background:rgba(0,0,0,0.2) }
.header_section .link.login {  float:right; }
.header_section .link.home span::after {  content:"\F015"; font-family:fontawesome; font-size:20px }
.header_section .link.settings {  float:right; }
.header_section .link.settings span::after {  content:"\F013"; font-family:fontawesome; font-size:20px }
.title_block {width:500px; max-width: 80%;text-align:center;margin:0 auto;}

.link.unit .unit_name {position:relative;width: calc(100% - 99px);float: left;}
.colblock {width:5px; height:30px; position:absolute; top:2px; left:3px;}

.head {width:100%;float:left;position: fixed;top: 40px;display:inline-block;z-index: 2;box-shadow: 0 0 20px rgba(0,0,0,0.5);background: var(--bgcol);}
.top_left {width: 30%;float:left;display:inline-block; position:relative}
.refresh {position: fixed;top:10px;right:10px;text-decoration: none;z-index: 9;color: var(--headertext);}
.stats {background:var(--bgcol);width:70%}
.stats td,.stats th{padding:5px;background: #CCC;width:16%;border: 1px solid var(--bgcol);text-align:center;font-size: 20px;}
.stats.withname td,.stats.withname th{width:14%;}
.top_left h1 { padding:0; text-align:left}

.weopons {width:100%; float:left; display: block;}
.admin-link, .alink {color:#FFF; padding:20px; background: rgba(255,255,255,0.1);float:left; display: block;}
.weopons table {border:1px solid var(--bgcol);width:49%;float: left;margin-top:10px;}
.ranged {margin-right:2%;}
.ranged th,.melee th{padding:5px;text-align:center;font-size:15px;border: 1px solid var(--bgcol);color:var(--tabletext)}
.ranged td,.melee td{padding:5px;text-align:center;font-size:15px;color:var(--tabletext);background: #CCC;/* margin: 1px; */}
.cheatmode .ranged td,.cheatmode .melee td {background:none;}
.ranged .altcol td,.melee .altcol td{ background: #EFEFEF; }


.weopons td:first-of-type, .weopons th:first-of-type {width:40%; text-align:left}
.stats th,
.weopons th {color: #FFF;background: #003f40;border:1px solid var(--bgcol);font-weight:300;}

#system {background: var(--bgcol);float:left;width:100%;position: relative;z-index: 0;}
.left {background: var(--menuback);float:left;width:20%;position: fixed;overflow: scroll;top: 117px;height: calc(100% - 77px);z-index: 0;/* padding-bottom: 100px; */}
.left ul {    padding-bottom: 100px;    float: left;    width: 100%;}
.homelink a {color:#FFF;text-decoration:none;width: 100%;float: left;/* padding: 29px; */}
.left ul li {border-bottom:1px solid var(--menuhover); cursor: pointer;padding:8px 20px; color:var(--menutext)}
.left ul li:hover {background: var(--menuhover);}
.right {background: var(--bgcol);float: right;width: 80%;position: relative;z-index: 0;padding:30px;margin-top: 117px;min-height: 300px;}
.maincontent.cheatmode { width:100%}
.maincontent {width: 80%;float:left;}
.detailview {width: 20%;float: right;}


.armyrules {width:100%;background:rgba(255,255,255,0.5);margin:15px 0;float: left;}
.armyrules h3 {padding:10px 20px;background:rgba(255,255,255,0.5); border-bottom:1px solid #000; color:#000;}

.armyrules .desc {padding:20px;columns: 3;}
.detachmentrules ul,
.armyrules ul {margin-left:20px;}


.keyword {color:var(--keyword);font-size: 10px;margin: 2px; cursor:pointer;}
.keyword:hover {color:#000;}

.faction_keyword {color:var(--headertext);font-size: 10px;margin: 2px; cursor:pointer; float:left}
.faction_keyword:hover {color:#000;}

.top_area {width:100%; float:left;}
.top_area h1 {width: 100%;float:left;display:inline-block;line-height: 44px;}


.faction_keywords {width:100%;list-style:none;float: left;}
.faction_keywords .statname {float:right; font-size:17px; margin-right:10px}


.inv {border-bottom-left-radius:50%;border-bottom-right-radius:50%;border:2px solid var(--tableback);color: #FFF;background:var(--tabletext);width:50px;height:50px;position:absolute;top: 10px;right:10px;line-height:50px;font-size:21px;text-align:center;}

.rules {width:100%;float:left;background:rgba(255,255,255,0.1);margin:20px 0 0;border-radius:10px;padding: 0 0 10px 10px;}
.rule {float:left;margin: 10px 10px 0 0;background:rgba(0,0,0,0.2);padding:10px;border-radius:10px;color:#CCC;box-shadow:0 0 10px rgba(0,0,0,0.1);cursor:pointer;}
.rule.army {background:rgba(0,0,0,0.6);}
.rule.unit {background:rgba(0,0,0,0.8);}
.rule:hover {background: #000;}


.detail_rule {margin:20px;background:rgba(255,255,255,0.5); color:#000;}
.detail_rule h3 {color:#000;border-bottom:2px solid; padding:15px; background:rgba(255,255,255,0.5)}
.detail_rule p,.detail_rule .infodesc {color:#000;  padding:15px;}
.detail_rule li {list-style:none; margin-bottom:10px}


.damage {background:#000;color: #FC0;padding: 8px 9px;float:left;font-size: 16px;/* margin-top:5px; */border-radius: 5px;line-height: 21px;margin: 10px;}
.cheatsheet .damage {background:0; padding:0; font-size:16px; text-transform:uppercase; color:#900}
.cheatsheet .damage:before {content:"<<"; display:inline-block; padding-right:3px;}
.cheatsheet .damage:after {content:">>"; display:inline-block; padding-left:3px;}

.detachmentrules {width:30%;float:left;background:rgba(255,255,255,0.5);/* margin-top: 10px; */}
.detachmentrules h3 {padding:10px 20px;background:rgba(255,255,255,0.5); color:#000; border-bottom:1px solid #000;}
.detachmentrules .desc {padding:20px; color:#000;}
.detachmentrules .desc p {margin-bottom:15px}

.enhancements {width:69%; float:right;   }
.enhancements h3 { padding: 10px 20px;    background: rgba(255, 255, 255, 0.8);    border-bottom: 1px solid #000;    color: #000;}
.enhancements li { width:100%; float:right; margin:0 0 20px 2%;list-style:none; }
.enhancements li h3 {background:rgba(255,255,255,0.8);color:#000;border-bottom:1px solid #000;padding: 10px 20px;width:30%;border:1px solid #000;display:table-cell;height:100%}
.enhancements li p { width:70%;  border:1px solid #000; display:table-cell; height:100%}
.enhancements p {background:rgba(255,255,255,0.5);color:#000;padding: 20px;margin-bottom:10px}

.strategems {width: 100%;columns: 3;float: left;margin-top:10px;/* margin-right: 0.33%; */}
.strategems li {width: 100%;break-inside: avoid-column;float:left;display: block;margin: 0 0 10px 0;list-style:none;position: relative;}
.strategems h3 {background:rgba(255,255,255,0.8); color:#000; border-bottom:1px solid #000; padding:10px}
.strategems p {background: rgba(255,255,255,0.8);color:#000;padding:10px}

.loadout { float:left; width:100%; margin-top:20px}


.unitcomp .comp,.unitcomp .lead,.armoury {padding:10px; float:left; margin-right:10px; background:rgba(255,255,255,0.5);}
.options {padding:10px; float:left; margin-right:10px; background:rgba(255,255,255,0.8); width:100%; margin-top:10px}

.strategems.yours h3 {background:#09C;}
.strategems.opponent h3,.strategems.opponent span {background:#900; color:#FFF}
.strategems.either h3 {background:#090;}


.cheatsheet {background:#FFF;}

@media print{
   body {background:#FFF}
  .head, .left,.detailview,.refresh {display:none;}
    .right {width:100%;margin-top: 0; padding:0;}
    #container::before,
    .header_section,
    .admin-link,.refresh {display:none}
}
.cheatsheet section {margin-bottom:50px;}
.cheatmode_enabled { background: #FFF}
.cheatmode .stats {width:100%}
.cheatmode .stats td,.cheatmode .stats th{ width:auto;}
.cheatmode .stats td:first-of-type,.cheatmode .stats th:first-of-type{ text-align:left}
.cheatmode .rules  {padding:0;}
.cheatmode .rules p {display:inline-block;margin: 0 10px 10px 0;padding:6px;border:1px solid #EFEFEF;border-radius:5px;}
.cheatmode .keydesc p {display:inline-block;margin: 0 10px 10px 0;padding:6px;border:1px solid #EFEFEF;border-radius:5px;color:#900;font-size: 14px;}
.cheatmode .stats th, .cheatmode .weopons th {color:#FFF;border-color: #EFEFEF;}
.cheatmode .stats td, .cheatmode .weopons td {color:#000;border-color:#FFF;}
.cheatmode .stats .faction_keyword {color:#000;}
.cheatmode .weopons table {border:none; }
.cheatmode .inv {    border-radius: 0;    border: none;    color: var(--tabletext);    background:none;    width: auto;    height: auto;    position: relative;    top: auto;    right: auto;    line-height: inherit;    font-size: inherit;    text-align: inherit;    display: inline;    margin-left: 10px;}
.cheatmode .inv::before {content:"(";}
.cheatmode .inv::after {content:")";}
.unitsize,.unitpoints {display:inline; margin-right:10px}
.unitpoints::after {content:"pts"}
.weoponoption .unitsize,.weoponoption .unitpoints {display: flex;gap: 10px;justify-content: space-between;flex-direction: row;flex-wrap: nowrap; margin-right:0;}
.cheatmode .weopons .melee td {color: #017180;}
.pts {color: #FC0;  position:relative}
.pts i {font-size: 12px;  position:absolute; right:30px; bottom:15px; opacity:0.7}
.pts i.red {color: #fff;}
.pts i.green {color:#0C0}
.unit.link {padding:0; float:left; width:100%}
.unit_name span {padding: 8px 20px;float:left;width: 100%;}
.unit.link.legend .unit_name {padding-left:15px; position:relative}
.unit.link.legend .unit_name::before {font-family:"fontawesome"; content:"\F0A8"; top:50%; left:20px; transform:translate(-50%,-50%); position:absolute;}

.rem_units {display:none}
.rem_units.active {width:33px;height:33px;float: right;color: #C00;line-height: 33px;position: relative;display: inline;}
.num_units {width:33px;height:33px;float: right;color:#FC0;line-height: 33px;text-align: center;}
.add_unit {width:33px;height:33px;float:right;position:relative;color:#CCC;text-align: center;}
.add_unit:hover {background:rgba(0,0,0,0.5);}
.add_unit::after {font-family:"fontawesome";content:"\F067";top:50%;left:50%;transform:translate(-50%,-50%);position:absolute;}
.rem_units::after {font-family:"fontawesome"; content:"\F068"; top:50%; left:50%; transform:translate(-50%,-50%); position:absolute;}

section {position:relative;float: left;width: 100%;}
.btn { width:25px; height:25px; position:absolute;background:rgba(0,0,0,0.4); color:#FFF;left:-25px; cursor:pointer; }
.btn:hover {background:rgba(0,0,0,0.8)}
.fa::after {font-family:"fontawesome"; content:"\F067"; top:50%; left:50%; transform:translate(-50%,-50%); position:absolute;}
.edit { top:0; }
.remove { top:26px;}
.edit::after {content:"\f044";}
.remove::after {content:"\f1f8";}


.editbox {position:fixed;top: 79px;left:0;width:100%;height:100%;background:rgba(255,255,255,0.8);z-index: 1;overflow: scroll;}
.editzone {width: 700px;margin: 80px auto 200px;background:#EFEFEF;border:1px solid #CCC;box-shadow:0 0 10px rgba(0,0,0,0.3);padding:20px;overflow: scroll;}
.editzone h3 {color:#069; margin-bottom:15px;}
.closeedit {background:#900; color:#FFF; padding:8px 10px; display:inline-block; margin-top:10px; cursor:pointer; }
.closeedit:hover {background: #600;}

.applyedit {background:#00AB4E; color:#FFF; padding:8px 10px; display:inline-block; margin-top:10px; cursor:pointer; }
.applyedit:hover {background: #00781B;}


.checkitem {width:100%; float:left; margin:5px 0; cursor: pointer;}

.selectable {width:100%; display:flex; gap:20px;}
.weoponoption {margin-bottom:10px;float:left;display:inline-block;width:100%;border: 1px solid #CCC;padding: 10px;}
.selectable .option {cursor:pointer;flex: inherit;margin-top:10px;width: 100%;/* float:left; *//* margin-right:10px; */border:1px solid #CCC;text-align:center;padding:5px 10px}
.selectable .option.selected {background:#00AB4E; color:#FFF;}

.enhancements .option {width:208px; }
.enhancements .option span {display:inline-block; margin-right:5px}

.enhance {display:inline-block;margin: 0 10px 10px 0;padding:6px;border-radius:5px;background: var(--tableaccent);color: #FFF;}
.radio { width:30px; height:20px; border:1px solid; display:inline-block; float:left; margin-right:10px;}
.radio.selected { background:#00AB4e;}

.unit_name strong {color:#999;font-weight:300;/* margin-left:20px; */text-align:right;font-size: 12px;/* float: left; */}
.points {font-size:30px;position:fixed;top: 112px;background:#000;z-index: 10;color:#FFF;padding:10px;right: 30px;}

.strategems {position:relative}
.strategems .faction:after {content:"";width: 20px;top: 5px;right: 5px;position:absolute;height: 20px;background:#FFF;border: 2px solid #000;}

.weopons .alt td {color:#900}
.cheatsheet .rules {width: 39%;float:right}
.cheatsheet .weopons {width: 59%;}
.cheatsheet .weopons table {width:100%; margin:2px 0 0 0 }

.cheatsheet .rules p {display:inline-block; font-size:15px; width:100%;margin: 0;padding:0 0 5px 0;border:none;border-radius:0;}
.cheatsheet .weopons th {background: #CCC;border: 1px solid #DFDFDF;color:#000;}
.cheatsheet .weopons td {background:none;border: 1px solid #DFDFDF;}
.cheatsheet .weopons tr {background:#FFF;}
.cheatsheet .weopons tr.altcol { background: #EFEFEF;}


.strats_section {border:1px solid #CCC;background: #EFEFEF;padding:20px;width: 100%;float:left;margin-right:2%;margin-bottom: 15px;}
.strats_section h3 {color:#06A;font-size:20px;float: left;margin-bottom:10px;}
.strat_set {width:100%;float:left;columns: 3;}
.strat_item { position:relative;font-size:13px;width:100%; break-inside: avoid-column;display:block;float:left;  margin-bottom:3px;}
.strat_cost {width:30px; position:absolute; font-size:20px; float:left; height:100%;  color:#FFF; text-align:center;}
.strat_details {padding:2px;width:calc(100% - 32px); float:right; display:inline-block;}
.strat_details strong {width:100%; display:block;}
.faction strong {color:#900}
.strat_type {position:absolute; bottom:0; right:0; padding:2px;text-transform:uppercase; font-size:10px; font-weight:bold}
.key {margin-left:20px; float:right;}
.key span {padding:4px; font-size:14px; font-weight:600;}


.yours .strat_cost {background:#06A;color:#FFF;}
.yours.strat_item {border:1px solid #06A;}
.yours .strat_type,
.key span.yours {color:#06A;}


.opponent .strat_cost {background:#900;color:#FFF;}
.opponent.strat_item {border:1px solid #900;}
.opponent .strat_type,
.key span.opponent {color:#900;}


.either .strat_cost {background:#090;color:#FFF;}
.either.strat_item {border:1px solid #090;}
.either .strat_type,
.key span.either {color:#090;}

.army_rules {background:#4B4B4B;float: left;width: 100%;padding:20px;color:#FFF}
.army_rules h3 {margin-bottom:10px;font-size:25px; color:#FC0}
.army_rules p {font-size:20px;opacity:0.8;}

.cheatsheet section {break-inside: avoid;}


.unt_details {    float: right;   opacity: 0.8;}
.extras {float:left; width:100%; margin:10px 0 0; padding:10px; background:rgba(255,255,255,0.4);}
.extra_detail {color:#069;}

.disabled {opacity: 0.5; pointer-events:none; }

.namelink {cursor:pointer; display:inline}
.namelink:hover {text-decoration:underline;}

.weoponrow {width:100%;float:left;padding: 5px 0;border-bottom: 1px solid #CCC;}
.weoponname {width:30%; float:left;}
.weoponoptions {width:70%; float:right;}
.max3 .weoponoption {width:calc((100% - 10px) / 3)}
.max5 .weoponoption {width:calc((100% - 20px) / 5)}
.max6 .weoponoption {width:calc((100% - 25px) / 6)}
.max10 .weoponoption {width:calc((100% - 45px) / 10)}

.weoponoption { margin-left:5px; }
.weoponoption.key {float:left; text-align:center; border:none; line-height:15px; padding:0;}
.weoponoption:first-of-type {margin-left:0}
.weoponoption.active {background:#00AB4E; }
.weoponoption.inactive {cursor:pointer; background:#FFF }
.weoponoption.inactive:hover {border:1px solid #999}
.weoponoption.disabled {background:none;}

.cheatsheet section:nth-of-type(2) .top_area th {background:#090; color:#FFF}
.cheatsheet section:nth-of-type(3) .top_area th {background:#900; color:#FFF}
.cheatsheet section:nth-of-type(4) .top_area th {background:purple; color:#FFF}
.cheatsheet section:nth-of-type(5) .top_area th {background:orange; color:#000}
.cheatsheet section:nth-of-type(6) .top_area th {background:black; color:#FFF}
.cheatsheet section:nth-of-type(7) .top_area th {background:darkcyan; color:#FFF}
.cheatsheet section:nth-of-type(8) .top_area th {background:olivedrab; color:#FFF}
.cheatsheet section:nth-of-type(9) .top_area th {background:orangered; color:#FFF}
.cheatsheet section:nth-of-type(10) .top_area th {background:pink; color:#000}
.cheatsheet section:nth-of-type(11) .top_area th {background:cadetblue; color:#FFF}
.cheatsheet section:nth-of-type(12) .top_area th {background:grey; color:#FFF}

.head .detach_head {width:20%;padding: 20px;float:left;height: 76px;text-align: left;border-right: 1px solid rgba(255,255,255,0.3); position:relative;}
.head h1 {padding: 0;width: 100%;line-height: 15px;font-size: 18px;position:absolute;transform: translate(-30%,-50%); top:50%;}
.head ul {width:80%; float:left;}
.head li {float:left;list-style:none;border-right: 1px solid rgba(255,255,255,0.3);cursor:pointer;color:#FFF;background:none; position:relative}
.head li.active::after {content:""; background:rgba(255,255,255,0.7); bottom:0; left:0; width:100%; height:8px; position:absolute;}
.head li:hover {background:rgba(255,255,255,0.2)}
.head li span {padding: 29px;float: left;display: inline-block;}
.listview p {margin-bottom:10px;}

.ref_section {border:1px solid #CCC;color:#000;display: block;float: left; }
.ref_section ul {display:block; float:left; width:100%; }
.ref_section li {float:left;display:block;width:100%;padding: 0;border-bottom:1px solid #CCC;position:relative;padding-left:20px;}
.ref_section h3 {width: 270px;color:#000;font-size: 14px;text-transform:uppercase;font-weight:bold;float: left;display: inline-block;line-height: 28px;}
.ref_section span {padding: 2px 10px;border: 1px solid #CCC;border-radius: 0;margin-right: 6px;float: left;display: inline-block;margin-top: 3px;background:#FFF;font-size: 14px;}
.ref_section span.fixed { background: #333;                color: #FFF            }
.ref_section .sml {position:absolute;top: 3px;/* left:10px; */font-size:10px;text-transform:uppercase;/* display: none; */}
.ref_section li.fixed { background:#EFEFEF}
.ref_section li .sml {right: 5px;}
.ref_section li::before { content:""; width:7px; height:100%; position:absolute; background:#09C; left:0; top:0;}
.ref_section li.fixed::before {  background:#000; }

/*
#cheat_list {background: #FFF; width:100%; float:left; padding:20px;}
#cheat_list section { border-bottom:1px solid #CCC; float:left; width:100%; break-inside: avoid;}
#cheat_list h2 {color:#09C;margin-top: 10px;}
#cheat_list h3 {color:#09C;font-size: 14px;}
#cheat_list p {
    font-size: 13px;
}
#cheat_list .army {padding: 0  0 10px 0;margin: 5px 0;border-bottom: 1px solid #CCC;}
#cheat_list .cheat_detachment {width:100%;float:left;border-bottom:1px dotted #CCC;padding: 20px 0;break-before: avoid;}

#cheat_list .cheat_enhancement {width:100%; float:left; display:inline-block; border:1px solid #CCC; margin-bottom:3px; padding:5px;}
#cheat_list .half {width:40%;float:left; display:inline-block; padding-right:10px}
#cheat_list .cheat_enhancements {width:100%;float:left;display:inline-block;margin-right:0%;column-count: 2;column-gap: 5px;}
#cheat_list .cheat_strategems {width:60%;float:left;display:flex;flex-direction: row;flex-wrap: wrap;}
#cheat_list .detachment_head { width:100%; float:left; display:inline-block;margin-bottom:10px;}
#cheat_list .strat_item {width:calc(50% - 4px); margin-right:4px;}

*/

p.unt {color:#09C}

#cheat_list {background: #FFF; width:100%; float:left; padding:20px;}
#cheat_list section {border-bottom: 2px solid #09C;float:left;width:100%;break-inside: avoid;padding: 10px 0;}
#cheat_list h2 {color:#09C;width: 40%;float: left;padding: 0 0 10px 0;display: inline-block;}
#cheat_list h3 {color:#09C;font-size: 14px;}
#cheat_list p {
    font-size: 13px;
}
#cheat_list .army {/* background:rgba(0,0,0,0.1); */padding: 0  0 10px 0;width: 60%;float: right;/* margin: 5px 0; *//* border-bottom: 1px solid #CCC; */}
#cheat_list .cheat_detachment {width:100%;float:left;border-top: 1px solid #CCC;padding: 10px 0;break-inside: avoid;}

#cheat_list .cheat_enhancement {width:100%;float:left;display:inline-block;/* border:1px solid #CCC; */margin-bottom:3px;/* padding:5px; */}
#cheat_list .half {width:40%;float:left; display:inline-block; padding-right:10px}
#cheat_list .cheat_enhancements {width:100%;float:left;display:inline-block;/* margin-right:0%; *//* column-count: 2; */column-gap: 5px;}
#cheat_list .cheat_strategems {width:60%;float:left;display:flex;flex-direction: row;flex-wrap: wrap;break-inside: avoid;}
#cheat_list .detachment_head {width:100%;float:left;display:inline-block;margin-bottom:10px;padding: 5px;border: 1px solid #CCC;}
#cheat_list .strat_item {width: 100%;margin-right:4px;}

.checkbox {border:1px solid #CCC;height: 9px;width:30px;float:right;margin: 16px 5px 5px 0px;}

.cb_warlord {padding:5px; padding-left:40px; position:relative; cursor:pointer;}
.cb_warlord.active::before {background:#090}
.cb_warlord::before {position:absolute; width:25px; height:16px; content:""; border:1px solid #CCC; left:5px; }
.wl::after {content:"\F005"; font-family:"fontawesome"; padding:0 10px}

.savesection {width:100%; padding-bottom:20px}
.savesection label { text-transform:uppercase; font-size:10px; position:absolute; top:18px; font-weight:bold;}
.savesection .input { padding:4px; font-size:18px; width:300px; border:2px solid #EFEFEF; color:#4B4B4B; outline:none;}
.save { width:50px; height:25px; float:left; font-size:25px; cursor:pointer;}
.save:hover {color:#09C;}
.save::after {content:"\F0C7"; font-family:"fontawesome"; padding:0 10px}
.error_box {color: #FFF;background: #C00;text-transform:uppercase;font-size:10px;position: fixed;top:10px;right:10px; padding:10px; z-index:10;}


.saved_item {border-bottom:1px solid #CCC; width:100%; float:left;}
.load_save {cursor:pointer;  padding:10px; width:calc(100% - 50px); float:left }
.kill_list {width:50px; height:40px; float:right; font-size:25px; padding:10px;cursor:pointer;}
.kill_list:hover {background:#EFEFEF}
.kill_list::after {content:"\F1F8"; font-family:"fontawesome"; padding:0 10px}
.load_save:hover { background:#EFEFEF}
.load_save .data {display:none}


.teams {width:200px;border:2px solid #999;float:left;margin: 20px;}
.info {width:calc(100% - 300px);border:2px solid #999;float:left; margin-top:20px; padding:20px}
.teams .th {font-weight:bold;}
.teams_row {width:100%; float:left; border-bottom:1px solid #CCC}
.teams_cell {width:33%;margin:0;border: none !important;!I;!;margin: 0 !important;!i;!;text-align: center; padding:2px; float:left;}
.ref_area ul {margin-bottom:20px;/* margin-left:20px; */display: inline-block;float: left;width: 100%;}
.ref_area li {margin-left:30px;margin-bottom: 5px;}

.opt { padding-left:20px !important; position:relative;}
.opt::before { content:"\F04B"; font-family:fontawesome; position:absolute; left:5px; top:50%; transform:translateY(-50%); font-size:10px;}

#details {color:#CCC; padding:50px;}
#details .red {color:#F00;}

#details .form {padding:20px; width:300px; float:left; display:inline-block; background:#333; border:1px solid #444; margin:20px}
#details .form select {width:100%; font-size:20px; padding:10px; background:#CCC}
#details .form label {font-size:20px; margin:20px 0 5px; display:inline-block;}
#details .form #submit {width:100%; padding:10px 20px; font-size:20px; margin-top:10px; cursor:pointer;}

td {position:relative;}
.showsup {color:#080;float:right; font-size:10px;}
.ref_section p {padding:20px; display:inline-block;}



#system.tablet {position:relative; z-index:0;}
.tablet .hamburger {width: 50px;height: 50px;position:absolute;top:0;right:0;cursor:pointer;display:none;z-index: 2;}
.tablet .hamburger span {width: 32px;height: 4px;background:#CCC;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}
.tablet .hamburger span:nth-of-type(1) {top: 33%;}
.tablet .hamburger span:nth-of-type(2) {top: 66%;}
.tablet .hamburger.active span:nth-of-type(1) {transform: rotate(45deg);left: 13px;top: 24px;}
.tablet .hamburger.active span:nth-of-type(2) {transform:rotate(-45deg);left: 13px;top: 24px;}
.tablet .hamburger.active span:nth-of-type(3) {display:none}

.tablet .weopons table {width:100%;}
.tablet .right {width: 100%; overflow: hidden;padding: 0 40px;z-index:0;margin-top: 90px;}
.tablet .left {width: 100%;z-index:1;top: 90px;left: 0;transition: all .4s ease-in;background: rgba(10,10,10,0.85);height: calc(100% - 50px);}
.tablet .detachmentrules,
.tablet .strategems,
.tablet .enhancements {width:100%;columns: 1;margin-bottom:20px}
.tablet .hamburger {display:block;}
.tablet .head h1 {width:100%;text-align: center;position: relative;transform: none;top: 0;}
.tablet .head ul,
.tablet .head li {width:100%; }
.tablet .head li {border-top:1px solid #000;font-size: 19px;}
.tablet .head ul {display:none;}
.tablet .head ul.active {display: table-cell;overflow: scroll;height: 100%;}
.tablet .enhancements li h3,
.tablet .enhancements li p {width:100%; float:left;}
.tablet .strat_set,
.tablet .armyrules .desc {columns:1}
.assets {display:none;}
.tablet .assets {display:block;position:absolute;top: 5px;right: 60px;height: 30px;font-size: 20px;}
.tablet .assets span {position:relative;height: 40px;}
.tablet .assets .pts i {right:0; bottom:-15px; font-size:15px}
.tablet .left ul li:hover {background:rgba(0,0,0,0.8)}
.tablet .maincontent {width:100%}
.tablet .detailview {width:100%; margin:10px 0; padding:0}
.tablet .detailview .detail_rule {margin:10px 0; padding:0}
.tablet .faction_keywords {width:80%;/* margin-bottom:15px; */}
.tablet .top_left {width:100%;}
.tablet .stats {width:100%}
.tablet .cheatmode {margin:30px 0}
.tablet .left ul li {border-bottom:none}
.drawer {display:none;}
.tablet .homebtn span::after {color:#CCC; content:"\F015"; font-family:fontawesome; font-size:35px; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%)}
.tablet .homebtn,
.tablet .drawer {width: 50px;height: 50px;position:relative;float:left;cursor:pointer;display: block;z-index: 1;}
.tablet  .head .detach_head {height:50px;border-right:none;width: calc(100% - 110px);/* background: #FC0; *//* text-align: center; */}
.tablet .drawer span {width: 28px;height: 32px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border: 3px solid #CCC;}
.tablet .drawer span span {width: 12px;height: 25px;left: 7px;border:3px solid #CCC}
.tablet .drawer.active span span { background:#CCC; }

.tablet.drawerclosed .left {/* display:none; */left: -100%;}
.tablet.drawerclosed .right {width:100%;max-width: 100%;}
.tablet .army_rules,
.tablet .strats_section,
.tablet .cheatsheet .rules,
.tablet .cheatsheet .weopons {width:100%;}
.tablet .army_rules {margin-top:20px}
.tablet .editzone {max-width:80%}
.tablet .statname {font-size:15px;}
.tablet .mob_title td {text-align:left}
.tablet .ref_section .checkbox {display:none;}
.tablet .ref_section h3 {width:100%}
.tablet .ref_section li {padding-bottom:10px}
.tablet .top_area .faction_keywords {width:100%;}
.tablet .link.unit .unit_name,
.tablet .unit_name span {/* width: 75%; */}
.tablet .unit_title_area { width:100%; float:left;}
.tablet .unit_title_area ul {width:100%; float:left; list-style:none;}
.tablet .unit_title_area ul .faction_keyword {color:#000}
.tablet .unit_title {width:100%;float:left;padding:5px;font-size: 15px;}
.tablet .unit_title span:first-of-type {width:70%; float:left}
.tablet .cheatmode .stats td:first-of-type, .tablet .cheatmode .stats th:first-of-type {text-align:center}
.tablet .cheatmode .stats.mob_title td:first-of-type, .tablet .cheatmode .stats.mob_title th:first-of-type {text-align:left}
.tablet .mob_title .unitpoints {float:right;}
.tablet .mob_title .unitpoints::after {content:"pts"}
.tablet .points {display:none}
.tablet #cheatsheet .pts {display:none}
.tablet .head li span {padding:20px}
.tablet .head li.active::after {top:0; bottom:auto; left:auto; right:0;  width:8px; height:100%; }
.tablet .stats td,.tablet .stats th{ font-size:15px;}


.home_btn {padding:20px; background: #ccc; font-size:20px; float:left; display:inline;}
@media screen and (max-width:1200px){
    #nav {margin-top: 0;columns: 2;}
  #nav .blocklink {width:100%;padding: 30px;}
}
@media screen and (max-width:768px){
    #nav {columns: 1;}
}


/* login */
.loginform {margin-top:200px;position: relative;display:inline-block;width: 100%;}
.login .loginform { width:100%; float:left; text-align:center;display:inline-block; position:relative}
.login .loginform .login_inner {display: inline-block;width:80%;background: rgba(0,0,0,0.3);max-width:360px;position: absolute;top: 40%;left: 50%;border: 2px solid rgba(0,0,0,0.5);transform: translate(-50%,-50%);padding:20px;}
.login .loginform .login_link { width:50%; margin:0 auto; display:inline-block; background:#FFF; cursor:pointer; margin-top:10px;border:2px solid rgba(0,0,0,0.9); padding:8px 20px; text-transform:uppercase; font-size:15px;}
.login .loginform .login_link:hover { background:#09C; color:#FFF; }
.login .loginform label { font-size:14px; text-transform:uppercase; color:#FFF; width:100%;}
.login .loginform .el-wrapper input:-internal-autofill-selected {font-family: "Helvetica Neue","Helvetica","Arial",sans-serif; }
.login .loginform .login_error {color:#FC0;font-size: 14px;padding-top: 20px;display: block;width: 100%;float: left;}
.login .loginform .login_error span {padding-right:10px;}
.login .loginform .el-wrapper .input {padding:4px 10px;border:1pt solid #CCC; text-align:center;color:#414141;background:#FFF;font-size: 20px; margin-bottom:10px;width:100%;}
.login .loginform .gotowebsite {color:#FFF; margin-top:10px; display:inline-block}


.strat_top {width:100%;float:left;position:relative;cursor: pointer;}
.strat_top span {position:absolute; top:0; right:40px; height:95%;line-height:40px}
.strat_top .toggle {right:0; width:30px; height:95%; }
.strat_top .toggle::after {font-family:"fontawesome"; font-size:20px; content:"\F0D7";}
.active .strat_top .toggle::after {content:"\F0D8";}
.strat_desc {width:100%; float:left; display:none;}
.active .strat_desc { display:block;}
.copy {width:100%; float:left; padding:20px; text-align: center;}

.search_area {width:100%; padding:8px; float:left; display:block; border-bottom:1px solid #000;}
.search_field {width:calc(100% - 40px); padding:8px; font-size:16px; background:rgba(0,0,0,0.5); border:1px solid #000; float:left; display:block; border-radius:4px; color:#FFF}
.search_btn {width:32px; height:34px; color:#CCC; float:right; position:relative; display:none;}
.search_btn.active {display:block}
.search_btn:hover {background:rgba(0,0,0,0.2); cursor:pointer; color:#FFF;}
.search_btn span {display:block}
.search_btn span::before {font-family:"fontawesome"; font-size:20px; content:"\F12D"; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); font-size:20px}
.hidden {display:none}

.search_facets { width:100%; float:left; margin-top:5px;}
.facet {width:calc((100% - 10px) / 3); cursor:pointer; float:left; margin-left:5px; text-transform:uppercase; color:#FFF; font-size:9px; text-align:center; padding:5px 8px; background:rgba(0,0,0,0.2); border:1px solid #222; border-radius:4px }
.search_facets .facet:first-of-type { margin-left:0;}
.facet:hover {background:rgba(0,0,0,0.5);}
.facet.active {background: #017180;}
.unit.facethidden {display:none;}

.maincontent .ranged td,.maincontent .melee td{background: #EFEFEF; }