@font-face {
	font-family: "DIN Engschrift LT Pro";
	font-stretch: 100% 100%;
	src: 
		local("DIN Engschrift LT Pro"),
		url("din-2014-engschrift-lt-pro.ttf") format("truetype");
}
@font-face {
	font-family: "DIN Condensed VF";
	font-stretch: 100% 100%;
	src:
		local("DIN Condensed VF"),
		url("din-condensed-vf-regular.ttf") format ("truetype");
}

:root {
  --kt-orange: #f15c23;
  --kt-orange-t: #f15c237f;
  --kt-red: #e32f22;
  --kt-red-t: #e32f227f;
  --kt-blue: #2a3d60;
  --kt-blue-t: #2a3d607f;
  --kt-black: #1b1d22;
  --kt-black-t: #1b1d227f;
  --kt-gray: #6f8077;
  --kt-gray-t: #6f80777f;
  --kt-lightgray: #f2f2f3;
  --kt-lightgray-t: #f2f2f37f;
}

body{
	font-family: Arial;
	font-stretch: 50%;
	font-size: 14pt;
	margin: 0;
}

a.disabled {
  pointer-events: none;
  cursor: default;
}

input,select {
	font-size: 14pt;
	margin: 0.5em;
	padding: 0.2em;
}

.tinybutton input {
	margin: 0 0.5em;
	padding: 0 0.2em;
}

div h1, div h2, div h3 {
	font-family: "DIN Engschrift LT Pro";
        text-transform: uppercase;
}
th {
	font-family: "DIN Condensed VF";
}

div.wrapper {
	position : relative;
	width: 100%;
	background-color: var(--kt-lightgray);
	padding: 1em 0;
}

div.floating-button {
        position: fixed;
        right: 0.5em;
        bottom: 0.5em;
        opacity: 0.5;
        background: dimgray;
        border-radius: 0.5em;
        z-index: 9;
}
.floating-button ul {
        text-align: center;
        vertical-align: center;
        padding: 0;
        margin: 0;
}
.floating-button li {
        list-style: none;
}
.floating-button li a {
        font-size: 0;
        display: inline-block;
        height: 96px;
        width: 96px;
        position: relative;
        vertical-align: middle;
}

.floating-button li#navigation a {
        background: url('float-nav.png') no-repeat;
}

.floating-button li#content a {
        background: url('float-content.png') no-repeat;
}

div.ruleset {
	position: relative;
	margin-left: auto;
	margin-right: auto;
	margin-top: 0;
	margin-bottom: 1em;
	background-color: white;
	min-width: 720px;
	width: 95%;
	text-align: left;
	padding: 1em;
	border-top: 2px solid var(--kt-orange);
}

div.cf {
        padding: 1em 0;
        display: block;
        width: 100%;
}

div.cf span {
        display: inline-block;
}

div.cf span.next {
        text-align: right;
}

.logo {
	display:inline-block;
	margin-right: 2em;
	vertical-align: top;
}

.ruleset h1, .ruleset h2 {
	width: 100%;
	
}

.archetype {
	
}

.archetype a:link, .archetype a:visited {
        color: var(--kt-orange);
        font-family: "DIN Condensed VF";
}

h1 {
	font-size: 2.4em;
	border-bottom: 2px solid var(--kt-orange);
	color: var(--kt-orange);
}

h2 {
	font-size: 2em;
	color: var(--kt-orange);
	border-bottom: 2px solid var(--kt-orange);
}

h3 {
	color: var(--kt-orange);
	font-weight: Bold;
	font-size: 1.6em;
	display: inline-block;
	width: 100%;
	border-bottom: 2px solid var(--kt-orange);
	margin-bottom: 0.2em;
}


.keyword, .faction, .roster li, faction {
	text-transform: uppercase;
	font-weight: bold;
}

.rule {
	font-weight: bold;
	display: inline-block;
	border-bottom: 1px dotted black;
}

.ruledescription  {
	font-weight: normal;
	visibility: hidden;
	min-width: 20em;
	text-align: left;
	border: 1px solid black;
	box-shadow: 0.1em 0.1em 0.5em black;
	background: white;
	padding: 1em;
	position: absolute;
	z-index: 1;
}

.rule:hover .ruledescription {
	visibility: visible;
}

.note {
	font-style: italic;
}

.tacop {
	font-weight: bold;
	font-style: italic;
}

.roster a, .rule a {
	color: black;
}

.faction, .rare, faction {
	color: var(--kt-orange);
}

.faction::after, faction::after {
	content: url('fskull.png');
	display: inline-block;
	width: 19px;
	height: 19px;
}

.range, .icon {
	display: inline-block;
	vertical-align: middle;
}

.range.one {
	height: 19px;
	width: 22px;
	background-image: url('https://wahapedia.ru/kill-team2/img/f1.png');
}

.range.two {
	height: 19px;
	width: 19px;
	background-image: url('https://wahapedia.ru/kill-team2/img/f2.png');
}

.range.three {
	height: 19px;
	width: 19px;
	background-image: url('https://wahapedia.ru/kill-team2/img/f3.png');
}

.range.six {
	height: 19px;
	width: 22px;
	background-image: url('https://wahapedia.ru/kill-team2/img/f6.png');
}

.icon.apl {
	height: 32px;
	width: 32px;
	background-image: url('kt3-apl.png');
}
.icon.move {
	height: 32px;
	width: 32px;
	background-image: url('kt3-move.png');
}
.icon.save {
	height: 32px;
	width: 32px;
	background-image: url('kt3-save.png');
}
.icon.wounds {
	height: 32px;
	width: 32px;
	background-image: url('kt3-wounds.png');
}
.icon.hit {
	height: 32px;
	width: 32px;
	background-image: url('kt3-hit.png');
}
.icon.yes {
	height: 19px;
	width: 19px;
	background-image: url('kt3-greentriangle.png');
}
.icon.no {
	height: 19px;
	width: 19px;
	background-image: url('kt3-redrombus.png');
}
.icon.ranged {
	height: 32px;
	width: 32px;
	background-image: url('kt3-ranged.png');
}
.icon.melee {
	height: 32px;
	width: 32px;
	background-image: url('kt3-melee.png');
}

img.map {
	width: 100%;
	height:auto;
	border: 2px solid var(--kt-orange);
}

.archetype {
	position: relative;
	display: inline-block;
	padding: 0.5em;
	font-weight: bold;
	min-width: 10em;
	text-align: center;
}

.orange {
	background-color: var(--kt-orange);
    color: white;
}

.red {
	background-color: var(--kt-red);
    color: white;
}

.blue {
	background-color: var(--kt-blue);
    color: white;
}

.gray {
	background-color: var(--kt-gray);
	color: white;
}

.black {
	background-color: var(--kt-black);
    color: white;
}

.white {
	background-color: white;
    color: var(--kt-orange);
}

.datacard .whitetext {
	color: white;
}

.datacard .white {
	color: black;
}

.white.redtext {
	color: var(--kt-red);
	border: 2px solid var(--kt-red);
}

.mono {
	font-family: monospace;
	font-stretch: 100%;
}

div.datasheet div {
	position: relative;
	display: inline-block;
}

.datacard td form, .datacard th form {
	display: inline;
}
.datacard input {
	font-size: 10pt;	
}

table {

}

.deceased {
	position: absolute;
	top: 0;
	left: 0;
	background: transparent;
	font-size: 10em;
	font-face: "DIN Condensed VF";
	color: var(--kt-red);
	z-index: 1;
	-webkit-transform: rotate(-30deg); 
    -moz-transform: rotate(-30deg);    
    transform:rotate(-30deg);
	text-shadow: 2px 0 #000, -2px 0 #000, 0 2px #000, 0 -2px #000,
             1px 1px #000, -1px -1px #000, 1px -1px #000, -1px 1px #000;
}

.columns2 {
	column-count: 2;
    column-gap: 1em;
	break-inside: avoid;
}

.columns3 {
	column-count: 3;
	column-gap: 1em;
	break-inside: avoid;
}

.equip-item {
	display: block;
	break-inside: avoid;
}

.rulecard, .ability {
	display: block;
	height: min-content;
	break-inside: avoid;
}

.item {
	margin: 0.5em;
}

.ability form {
	display: inline;
}

.tooltip-container {
	position: relative;
	display: inline-block;
	width: 100%;
}

.tooltip-text {
	visibility: hidden;
	opacity: 0;
	background: white;
	border: 1px solid black;
	padding: 0.5em;
	position: absolute;
	z-index: 1;
	top: 100%; /* Position above the hovered element */
	right: 50%;
	margin-left: -60px; /* Center the tooltip */
	transition: opacity 0.3s;
}

.tooltip-container:hover .tooltip-text {
	visibility: visible;
	opacity: 1;
}


.stratploys h3, .firefightploys h3, .psypowers h3 {
	display: inline-block;
	width: 100%;
	background-color: black;
	border-bottom: none;
	color: white;
	margin: 0.2em 0;
	padding: 0.2em 0 0.2em 0.2em;
}

.stratploys p, .firefightploys p, .psypowers p {
	padding: 0.2em 0.5em;
}

.stratploys h3 {
	background-color: var(--kt-gray);
}

.psypowers h3 {
	background-color: var(--kt-blue);
}

.datacard {
	position: relative;
	margin-top: 2em;
	margin-bottom: 2em;
	top: 1em;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
        background-image: url('dsBackground.png');
}

.ruleset .datacard{
	margin-top: 0;
}

.datacard-wrapper {
}

.killgrade {
	border: none;
	border-collapse: collapse;
	width: 90%;
}

.killgrade td {
	width: 13%;
	background: white;
	color: black;
	text-align: center;
}

.killgrade th {
	background: var(--kt-black);
	color: white;
}

.killgrade .orange {
	background: var(--kt-orange);
}


.killgrade .black {
	background: var(--kt-black);
	color: white;
}

.killgrade .vertical {
	writing-mode: vertical-rl;
	transform: rotate (180deg);
}

.toc a {
	text-transform: uppercase;
	color: var(--kt-orange);
}
.toc a:link, .toc a:local-link, .toc a:visited {
	color: var(--kt-orange);
}

.dataslate-wrapper {
	position: relative;
	padding: 0;
	border: 2px solid black;
	border-top: none;
	background: black;
	border-bottom: 1px solid var(--kt-lightgray);
}

.datacard-wrapper table {
	width: 100%;
}

.dataslate {
	border: none;
	
	border-collapse: collapse;
	position: relative;
	min-width: 600px;
}

.card {
	display: inline-block;
	min-width: 30%;
	max-width: 25em;
	margin: 0 1em;
	padding: 1em 0;
	
}

.cards div {
	vertical-align: top;
}

.card .header {
	width: 100%;
	border: 2px solid black;
	background-color: black;
	border-radius: 1em 1em 0 0;
	color: white;
	font-size: 24pt;
	font-weight: bold;
	padding: 0.5em 0;
	text-align: center;
}
.card .archetype {
	border-left: 2px solid black;
	border-right: 2px solid black;
	display: block;
	padding: 0.5em 0;
	width: 100%;
}

.card .archetype img {
	position: absolute;
	top: -3em;
	left: 1em;
}

.card .description {
	border-left: 2px solid black;
	border-right: 2px solid black;
	padding: 1em 0;
	width: 100%;
	background: whitesmoke;
	height: 30em;
}

.card h2 {
	background: var(--kt-orange);
	color: white;
	padding: 0 1em;
}

.card h2, .card h3, .card p, .card ul {
	margin: 0.1em 1em;
	width: auto;
	display: block;
}

.card .action {
	border: 2px solid var(--kt-orange);
	margin: 0.5em 1em;
	width: auto;
	height: auto;
}

.card .footer {
	border: 2px solid black;
	border-top: none;
	min-height: 3em;
	width: 100%;
	border-radius: 0 0 1em 1em;
	background: whitesmoke;
}

.dataslate th:first-child {
	padding: 0.5em 0.5em 0.5em 0;
}

.dataslate td, .dataslate th {
	padding: 0.5em;
	text-transform: uppercase;
	font-weight: bold;
	font-family: "DIN Engschrift LT Pro";
	font-size: 14pt;
	background-color: black;
	color: white;
	border-left: 6px solid var(--kt-lightgray);
}



.dataslate th {
	width: 50%;
	border-left: none;
	text-align: left;
	font-size: 20pt;
}



.dataslate .title {
	padding-left: 1em;
	padding-right: 0.2em;
	border-bottom: 2px solid var(--kt-orange);
}


.dataslate th, .dataslate tr:nth-child(even) td {
	font-size: 24pt;
}

.dataslate tr:nth-child(even) th.small {
	font-size: 14pt;
	text-decoration: none;
}

.weapons-wrapper {
	/*background-color: var(--kt-lightgray);*/
	padding: 0 1em 0 1em;
}

.weapons {
	border: none;
	border-collapse: collapse;
	position: relative;
	width: 100%;
}

.weapons th {
	border-bottom: var(--kt-orange);
	font-family: "DIN Condensed VF";
	text-transform: uppercase;
}

.weapons td {
	padding: 0.5em;
	background-color: none;
	font-weight: bold;
	font-stretch: 50%;
	font-size: 16pt;
}

.volatile td, div.volatile div.item {
	color: var(--kt-gray);
}

.compact td {
	font-size: 12pt;
	font-weight: normal;
}

.x-compact td {
	font-size: 11pt;
	font-weight: normal;
}

.x-compact tr:first-child td {
	word-break: keep-all;
	text-transform: uppercase;
	font-family: "DIN Condensed VF";
}

.break {
	word-break: break-all;
}

.weapons td.melee {
	background-image: url('kt3-melee.png');
	background-position: center;
	background-repeat: no-repeat;
}
.weapons td.ranged {
	background-image: url('kt3-ranged.png');
	background-position: center;
	background-repeat: no-repeat;
}

.weapons tr:first-child td {
	
	font-size: 16pt;
	border-bottom: 2px solid var(--kt-orange);
}

.weapons tr:nth-child(2n+3) td, .weapons tr:nth-child(2n+3) th {
	background-color: var(--kt-lightgray-t);
}

.weapons tr:last-child td, .weapons tr:last-child th {
	border-bottom: 2px solid var(--kt-orange);
}
.weapons tr.separator td {
	border-top: 2px solid var(--kt-orange);
}

.abilities-wrapper {
	/*background-color: var(--kt-lightgray);*/
	padding: 0.5em 1em 0.5em 1em;
}

.abilities td, .abilities th {
	width: 50%;
	padding: 0.5em;
	vertical-align: top;
}

.abilities .weapons td, .abilities .weapons th {
	width: auto;
}

.abilities td{
	/*background-color: var(--kt-lightgray);*/
}

.ability {
	display: inline-block;
        vertical-align: top;
        width: 100%;
	font-family: arial;
	font-stretch: 50%;
	font-size: 16pt;
	font-weight: normal;
	break-inside: avoid;
}

.ability .unique-action {
        margin: 1em 0 1em 0;
}

.unique-action, .generic-box {
	border: none;
	border-collapse: collapse;
	width: 100%;
	font-size: 14pt;
}

.unique-action {
	border: 2px solid var(--kt-orange);
	border-collapse: collapse;
}

table.unique-action {
	margin-bottom: 1em;
}

.unique-action th {
	background-color: var(--kt-orange);
	color: white;
	text-align: left;
	padding: 0.5em;
	text-transform: uppercase;
}

.unique-action td {
	padding: 0.5em;
}

.generic-box th {
	color: white;
	text-align: left;
	padding: 0.5em;
	text-transform: uppercase;
}

.generic-box th a:link, .generic-box th a:visited {
	color: white;
}

.equipment h3, .equupment th {
	width: 100%;
	border: 2px solid black;
	padding: 0.1em;
}

.unique-action th:last-child, .generic-box th:last-child {
	text-align: right;
}


.abilities .ability:first-child {
	padding-top: 0;
}

.keywords {
	border: 2px solid black;
	padding: 1em;
	background-color: black;
	color: white;
	font-family: arial;
	font-stretch: 50%;
	font-size: 16pt;
	font-weight: bold;
	
}
.dataslate .redcards {
	color: var(--kt-red);
}

.object-editor {
	width: 80%;
	margin: 0 auto;
}

.object-editor label, .object-editor input, .object-editor select {
	display: inline-block;
}

.object-editor label {
	width: 30%;
	text-align: right;
}

.object-editor input, .object-editor select {
	min-width: 50%;
}

.object-editor textarea {
	display: inline-block;
	min-width: 50%;
	min-height: 6em;
	font-size: 14pt;
}

.object-editor .largetext textarea, .object-editor .largetext label {
	display: block;
	text-align: left;
	width: 100%;
}

.object-editor .largetext textarea {
	min-width: 100%;
	min-height: 15em;
	overflow-y: scroll;
	resize: none;
}

.object-editor input.form-control {
	display: inline;
	min-width: auto;
}

.object-editor input, .object-editor textarea, .object-editor select {
	border: 2px solid black;
}

.object-editor input:required, .object-editor textarea:required, .object-editor select:required {
	border: 2px solid var(--kt-red);
}


.map-thumb {
	height: auto;
}

.itd-landscape {
	width: 29em;
}

.itd-portrait {
	width: 25em;
}

.itdx2-landscape {
	width: 58em;
}

.itdx2-portrait {
	width: 50em;
}

.open-landscape {
	width: 30em;
}

.open-portrait {
	width: 22em;
}

.openx2-landscape {
	width: 60em;
}

.openx2-portrait {
	width: 44em;
}

.combo-portrait {
	width: 47em;
}

.combo-landscape {
	width: 57em;
}

.phonescreen-size {
	width: 40em;
}

footer nav {
        display: none;
}

@media screen and (max-width: 960px) {
    div.wrapper {
        padding: 0;
        width: 100%;
    }
    div.ruleset {
        min-width: auto;
        width: 100%;
        padding: 0;
    }
    div.ruleset p {
        padding: 0.3em;
    }
    .columns2, .columns3 {
        column-count: 1;
        column-gap: 0;
    }
    .dataslate {
        min-width: auto;
    }
    div.weapons-wrapper, div.abilities-wrapper {
        padding: 0.3em;
        width: auto;
        min-width: auto;
    }
    .dataslate th, .dataslate td, .dataslate tr:nth-child(even) td, .ability, .keywords {
        font-size: 13pt;
    }
    .weapons th, .weapons tr:first-child td, .weapons tr td {
        font-size: 11pt;
    }
    img {
        max-width: 100%;
    }
    .breadcrumb {
        display: none;
    }
    .floating-button li#navigation a {
        background: url('float-nav-48.png') no-repeat;
        height: 48px;
        width: 48px;
    }
    .floating-button li#content a {
        background: url('float-content-48.png') no-repeat;
        height: 48px;
        width: 48px;
    }
}