/* Variables definitions */
:root {
    --accent-green            : #8bff63;
    --accent-light-blue       : #5ca7ff;
    --background-grey         : #3d4651;
    --background-offwhite     : #f2f2f3;
    --background-steel        : #202831;
    --primary-blue            : #247be2;
    --primary-grey            : #CFD9E8;
    --primary-red             : #ff5858;
    --secondary-blue-outline  : #082e44;
    --secondary-dark-steel    : #181e25;
    --secondary-gunmetal-grey : #2f2f2f;
    --secondary-light-grey    : #797e83;
    --secondary-red-outline   : #262222;
    --secondary-yellow        : #ffd46893;

    
    --border-radius-xs : 2px;
    --border-radius-sm : 5px;
    --border-radius-md : 10px;
    --border-radius-lg : 15px;
    
    --font-weight-bolder : 600;

}

:rootOLD {
	--active-coalition-color: var(--blue-coalition-color);
	--background-color-dark: #202831;
	--background-color-light: #AAA;
    --border-radius-sm:5px;
    --border-radius-md:10px;
    --border-radius-lg:15px;
	--blue-coalition-color: #247be2;
    --font-weight-bolder:600;
	--highlight-color: #FFF5;
	--neutral-coalition-color: whitesmoke;
	--neutral-coalition-text: #202831;
	--red-coalition-color: #f32121;
	--text-color: white;
	--title-color: #d3e9ff;
}


* { 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
}


html {
    font-family: 'Open Sans', sans-serif;
}


button {
    background-color:var(--background-steel);
    border:1px solid var( --background-steel );
    border-radius: var( --border-radius-sm );
    color:whitesmoke;
    cursor:pointer;
    font-weight: var( --font-weight-bolder );
    padding:8px;
}

button[disabled="disabled"] {
    color: var( --highlight-color );
    cursor:not-allowed;
}


.pill {
    border-radius: var( --border-radius-sm );
    display:inline-block;
    padding:6px;
}



.ol-panel {
    background-color: var(--background-steel);
    border-radius: 15px;
    box-shadow: 0px 2px 5px #000A;
    color:white;
    font-size: 12px;
    height:fit-content;
    padding:10px;
    width:fit-content;
}


.ol-panel-list {
    border-radius: var( --border-radius-sm );
    display: flex;
    flex-direction: column;
	height: fit-content;
    row-gap: 5px;
	text-align: center;
	width: fit-content;
}

.ol-panel-list .list-item {
    border-radius: var( --border-radius-md );
    display:flex;
    justify-content: space-between;
	padding: 6px 10px;
}

.ol-panel-list.sortable > .sortable-item {
    align-items: center;
    column-gap: 5px;
    display:flex;
    flex-direction: row;
}

.ol-panel-list.sortable > .sortable-item > .handle {
    cursor:grab;
    filter:invert(100);
}

.ol-panel-list.sortable > .sortable-item > .handle img {
    max-width: 16px;
}


.ol-panel-board {
    display:flex;
    flex-direction: row;
    justify-content: space-evenly;
}

.ol-panel-board > .panel-section {
    border-right: 1px solid #555;
    padding:10px;
}

.ol-panel-board > .panel-section:last-of-type {
    border-right-width: 0;
}

.ol-panel-board h1, .ol-panel-board h2 {
    font-size:18px;
    font-weight: var( --font-weight-bolder );
    margin: 0;
    padding:0 0 5px 0;
}

.ol-panel-board h2 {
    font-size:14px;
}



.highlight-primary {
	background-color: var(--secondary-light-grey);
}

.highlight-bluefor {
	background-color: var(--primary-blue);
    color: var(--background-steel )
}

.highlight-redfor {
	background-color: var(--primary-red);
}

.highlight-neutral {
	background-color: var(--primary-grey);
    color: var(--secondary-gunmetal-grey)
}


.unit {
    border-radius: var( --border-radius-xs );
    display:grid;
    height: fit-content;
    position:relative;
    width:fit-content;
}

.unit .unit-id {
    align-items: center;
    background: var( --primary-grey );
    border:3px solid var(--background-steel );
    border-radius: var( --border-radius-xs );
    color: var(--background-steel);
    display: flex;
    font-weight: bold;
    height: 32px;
    justify-content: center;
    padding:4px;
    position: relative;
    text-align: center;
    width:32px;
    z-index:100;
}


.unit .unit-spotlight {
    border-radius: 50%;
    align-items: center;
    display:flex;
    height: fit-content;
    justify-items: center;
    padding:9px;
    width:fit-content;
}

.unit .unit-hotgroup {
    align-self: flex-start;
    background: black;
    color:white;
    display:none;
    height:fit-content;
    justify-content: center;
    justify-self: center;
    line-height: 14px;
    position: absolute;
    text-align: center;
    top:-8px;
    transform:rotate(45deg);
    width:14px;
}

.unit .unit-hotgroup-id {
    font-size:11px;
    transform: rotate(-45deg);
}

.unit .unit-vvi {
    display:flex;
    position:absolute;
    left:50%;
    transform:rotate(-90deg);
    transform-origin:0 50%;
    top:50%;
    z-index: 0;
}

.unit .unit-vvi-heading {
    border:1px solid var( --secondary-dark-steel );
    padding-left:14px;
    transform: rotate(90deg);
    transform-origin:0 50%;
    width:30px;
}


.unit .unit-selected-border {
    border: 2px solid transparent;
    border-radius: var( --border-radius-xs );
    position: relative;
    z-index:1;
}


.unit .unit-fuel {
    background:white;
    border:2px solid var( --secondary-dark-steel );
    border-radius: var( --border-radius-xs );
    display:none;
    margin:0 auto;
    position: relative;
    top:-6px;
    width: calc( 100% - 16px );
}

.unit .unit-fuel-empty {
    align-self: center;
    background: white;
    border-radius: 50%;
    color:red;
    display:none;
    font-weight: bold;
    justify-self: center;
    padding:1px;
    position:absolute;
}

.unit[data-fuel-level="0"] .unit-fuel-empty {
    display:flex;
}

@keyframes blinker {
    50% {
      opacity: 0;
    }
  }

.unit[data-fuel-level="10"] .unit-fuel,
.unit[data-fuel-level="20"] .unit-fuel,
.unit[data-fuel-level="30"] .unit-fuel {
    animation: blinker 1.5s linear infinite;
}

.unit .unit-fuel-level {
    background-color: var( --secondary-light-grey );
    display:flex;
    height: 4px;
    visibility: hidden;
    width:100%;
}

.unit[data-fuel-level="10"] .unit-fuel-level,
.unit[data-fuel-level="20"] .unit-fuel-level,
.unit[data-fuel-level="30"] .unit-fuel-level,
.unit[data-fuel-level="40"] .unit-fuel-level,
.unit[data-fuel-level="50"] .unit-fuel-level,
.unit[data-fuel-level="60"] .unit-fuel-level,
.unit[data-fuel-level="70"] .unit-fuel-level,
.unit[data-fuel-level="80"] .unit-fuel-level,
.unit[data-fuel-level="90"] .unit-fuel-level,
.unit[data-fuel-level="100"] .unit-fuel-level {
    visibility: visible;
}



.unit[data-fuel-level="10"] .unit-fuel-level {
    width:10%;
}

.unit[data-fuel-level="20"] .unit-fuel-level {
    width:20%;
}

.unit[data-fuel-level="30"] .unit-fuel-level {
    width:30%;
}

.unit[data-fuel-level="40"] .unit-fuel-level {
    width:40%;
}

.unit[data-fuel-level="50"] .unit-fuel-level {
    width:50%;
}

.unit[data-fuel-level="60"] .unit-fuel-level {
    width:60%;
}

.unit[data-fuel-level="70"] .unit-fuel-level {
    width:70%;
}

.unit[data-fuel-level="80"] .unit-fuel-level {
    width:80%;
}

.unit[data-fuel-level="90"] .unit-fuel-level {
    width:90%;
}

.unit[data-fuel-level="100"] .unit-fuel-level {
    width:100%;
}


.unit-ammo {
    column-gap: 2px;
    display:none;
    flex-direction: row;
    flex-wrap:nowrap;
    height:fit-content;
    justify-content: center;
    position: relative;
    top:-2px;
    width: 100%;
}

.unit-ammo > [data-ammo-type] {
    background:white;
    border:2px solid var( --secondary-dark-steel );
    border-radius: 50%;
    padding:3px;
}

.unit[data-has-fox-1="true"] .unit-ammo > [data-ammo-type="fox-1"],
.unit[data-has-fox-2="true"] .unit-ammo > [data-ammo-type="fox-2"],
.unit[data-has-fox-3="true"] .unit-ammo > [data-ammo-type="fox-3"],
.unit[data-has-other-ammo="true"] .unit-ammo > [data-ammo-type="other"] {
    background-color: var( --secondary-light-grey );
}



/*** BLUEFOR ***/

.unit[data-coalition="blue"] .unit-hotgroup {
    background-color: var( --secondary-blue-outline );
}

.unit[data-coalition="blue"] .unit-id,
    .unit[data-coalition="blue"][data-has-fox-1="true"] .unit-ammo > [data-ammo-type="fox-1"],
    .unit[data-coalition="blue"][data-has-fox-2="true"] .unit-ammo > [data-ammo-type="fox-2"],
    .unit[data-coalition="blue"][data-has-fox-3="true"] .unit-ammo > [data-ammo-type="fox-3"],
    .unit[data-coalition="blue"][data-has-other-ammo="true"] .unit-ammo > [data-ammo-type="other"],
    .unit[data-coalition="blue"] .unit-fuel-level,
    .unit[data-coalition="blue"] .unit-vvi-heading {
        background: var( --primary-blue );
        border-color: var( --secondary-blue-outline );
        color: var( --secondary-blue-outline );
}

.unit[data-coalition="blue"][data-is-selected="true"] .unit-id {
    border-color: var( --secondary-blue-outline );
    color: var( --primary-blue );
}

.unit[data-coalition="blue"] .unit-ammo {
    border-color: var( --secondary-blue-outline );
}

/*** REDFOR ***/

.unit[data-coalition="red"] .unit-hotgroup {
    background-color: var( --secondary-red-outline );
}

.unit[data-coalition="red"] .unit-id,
    .unit[data-coalition="red"][data-has-fox-1="true"] .unit-ammo > [data-ammo-type="fox-1"],
    .unit[data-coalition="red"][data-has-fox-2="true"] .unit-ammo > [data-ammo-type="fox-2"],
    .unit[data-coalition="red"][data-has-fox-3="true"] .unit-ammo > [data-ammo-type="fox-3"],
    .unit[data-coalition="red"][data-has-other-ammo="true"] .unit-ammo > [data-ammo-type="other"],
    .unit[data-coalition="red"] .unit-fuel-level,
    .unit[data-coalition="red"] .unit-vvi-heading {
        background: var( --primary-red );
        border-color: var( --secondary-red-outline );
        color: var( --secondary-red-outline );
}


.unit[data-coalition="red"][data-is-selected="true"] .unit-id {
    color: var( --primary-red );
}

.unit[data-coalition="red"] .unit-ammo {
    border-color: var( --secondary-red-outline );
}

/**************/


.unit[data-is-selected="true"] .unit-spotlight {
    background: var(--secondary-yellow);
}

.unit[data-is-in-hotgroup="true"] .unit-hotgroup {
    display:flex
}

.unit[data-is-selected="true"] .unit-id {
    background:white;
}

.unit[data-is-selected="true"] .unit-selected-border {
    border-color:white;
}

.unit[data-is-selected="true"] .unit-fuel {
    display:grid;
}

.unit[data-is-selected="true"] .unit-ammo {
    display:flex;
}


.unit[data-pilot="human"] .unit-hotgroup,
.unit[data-pilot="human"] .unit-fuel,
.unit[data-pilot="human"] .unit-ammo {
    display:none;
}


.unit .unit-summary {
    align-self: center;
    column-gap: 8px;
    color:white;
    display: flex;
    flex-flow: wrap;
    font-size: 12px;
    justify-content: flex-end;
    justify-self: flex-end;
    left: -62px;
    position: absolute;
    row-gap:2px;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
    white-space: nowrap;
    width: min-content;
}