/*
  CSS template for "squad.xml", used in "Armed Assault" (Ref: "http://www.armedassault.com")
  and "{{arma2}}" (Ref: "http://www.arma2.com")
  See also the Arma-Wiki page: "http://community.bistudio.com/wiki/squad.xml"
  Created by TomNedry, 26.Jan07
  Reviewed by TomNedry, 15.Jul09
  License: Creative Common (http://creativecommons.org/licenses/by-nc-sa/2.5/deed.de)
*/

:root {
    --bg-color: rgba(16, 16, 16);
    --border-color: rgba(254, 254, 254, 0.5);
  --border-width: 1.5px;
    --font-color: rgb(255, 255, 255);
    --highlight-color: #e8b40a;
}

* {
  box-sizing: border-box;
}

body {
  background-color: var(--bg-color);
  display: flex;
  flex-direction: row;
  align-items: center;
  margin: 0rem;
}

a, p {
  font-family: Arial, sans-serif;
  color: var(--font-color);
  text-align: left;

}

a {
  text-decoration: none;
  transition: transform .2s;
  display:inline-block;
  width:100%;
    height:100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
}

a:hover {
  background-color: rgba(32, 32, 32);
}

p {
  margin-block-start: 0;
  margin-block-end: 0;
}

img {
  max-width: 100%;
}

.sidebar-left, .sidebar-right {
  width: 1.25rem;
  height: calc(100% - 2rem);
  margin-left: 1rem;
  border-top: var(--border-width) solid var(--border-color);
  border-bottom: var(--border-width) solid var(--border-color);
}

.sidebar-left {
  border-left: var(--border-width) solid var(--border-color);
}

.sidebar-right {
  border-right: var(--border-width) solid var(--border-color);
  margin-right: 1rem;
}

.hazard-bg {
  width: calc(100% - 0.25rem);
  height: calc(100% - 0.5rem);
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
  background: repeating-linear-gradient(
    45deg,
    var(--bg-color) 0,
    var(--bg-color) 6px,
    var(--highlight-color) 6px,
    var(--highlight-color) 12px
    );
}

.hz-left {
  margin-left: 0.25rem;
}

.hz-right {
  margin-right: 0.25rem;
}

.header, .members {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 50%;
  margin-left: 1rem;
  padding: 1rem;
  height: calc(100% - 2rem);
  border: var(--border-width) solid var(--border-color);
}

.vl {
  background-color: var(--highlight-color);
  width: 0.4rem;
  height: 100%;
}

#sqd-name {
  display: flex;
  width: 100%;
  align-items: center;
  font-size: 3rem;
  font-weight: 900;
  margin-top: 1rem;
}

#sqd-picture, #sqd-name {
  flex-basis: calc(100% / 4);
}

#sqd-name > p {
  text-align: center;
  flex-grow: 1;
  margin: 0;
}

#sqd-web, #sqd-email {
  flex-basis: calc(100% / 8);
  width: 100%;
  margin-top: 1rem;
  border: var(--border-width) solid var(--border-color);
  font-family: Arial, sans-serif;
  color: var(--font-color);
}

legend {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  font-weight: 900;
}

table {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-height: 100%;
  overflow-y: auto;
}

tr {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  color: var(--font-color);
  font-family: Arial, sans-serif;
  font-weight: 400;
  margin-bottom: 0.5rem;
  background-color: rgba(255, 255, 255, 0.05);
}

th, td {
  padding: 0.25rem;
  padding-left: 0.5rem;

}

.table-header {
  border-left: calc(2 * var(--border-width)) solid var(--highlight-color);
}

.table-rows {
  border-left: calc(2 * var(--border-width)) solid var(--border-color);
}

.table-rows:hover {
  border-color: var(--highlight-color);
  background-color: rgba(232, 180, 10, 0.25);
}

#table-members, .member_name,
#table-icq, .member_icq {
  /* flex-basis: calc(100% / 4); */
  flex: 0 0 25%;
}

#table-remarks, .member_remark {
  /* flex-basis: calc(100% / 2); */
  flex: 0 0 50%;
}

/* width */
::-webkit-scrollbar {
  width: 0.5rem;
}

/* Track */
::-webkit-scrollbar-track {
  background: var(--bg-color)
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: var(--font-color);
  border-top: calc(2 * var(--border-width)) solid var(--border-color);
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: var(--highlight-color); ; 
}