html{
    width: 100%;
    min-height: 100%;
    display: flex;
    align-items: stretch;
}

*{
    box-sizing: border-box;
}

body{
    background-color:#091621;
    width: 100%;
    min-height: 100%;
    font-family: "Space Grotesk", serif;
    display: flex;
    align-items: stretch;
    margin: 0;
    line-height: 1.5;
    position:absolute;
}

input, select{
    font-size: inherit;
    font-family: inherit;
    line-height: inherit;
}

img{
    vertical-align: middle;
}

label{
    margin-bottom: 0.5em;
    display: inline-block;
}

h1, h2, h3, h4, h5, h6{
    font-weight: 500;
    margin: 0;
    margin-bottom: 0.5rem;

}

h1{
    font-size: 2.5em;
    line-height: 1.2;
}

.background-image{
    position: fixed;
    opacity: 0.4;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -999;
}

.mainContainer{
    width: 100%;
    flex-grow: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: center;
}

.sidebar{
    color: white;
    background-color: #04243E;
    width: 20%;
    padding-left: 18px;
    padding-top: 27px;
    box-sizing: border-box;
}

.sidebar .menu{
    margin-top: 40px;
    font-style: "inter"
}

.sidebar .menu div.menuOption.B, .sidebar .submenu div.menuOption.B{
    background-color: #041E33
}
.sidebar .menu div.menuOption.A, .sidebar .submenu div.menuOption.A{
    background-color: #04243E
}

.menuOption{
    display: flex;
    align-items: center;
    min-height: 73px;
    color: inherit;
    text-decoration: none;
}

.menuOption:hover{
    color: inherit;
    text-decoration: none;
    background-color: #FFFFFF22;
}

.menuOption.active{
  background-color: #FFFFFF44;
}

.menuOption img{
    margin-right: 6px;
}

p{
    margin: 0;
}

.dropdown .title{
    position: relative;
    justify-content:left;
    width: 100%;
}

.dropdown .title>img{
    position: absolute;
    right: 20px;
}

.dropdown .content{
    max-height: 0px;
    overflow: hidden;
    transition: max-height .5s;
}
.dropdown .content.show{
    max-height: var(--dropdownHeight);
}

.hide{
    display: none !important;
}

.content{
    color: white;
}

.site{
    color: white;
    flex-direction: column;
    width: 100%;
    display:flex;
    padding: 1em;
}

.navbar{
    display: flex;
    justify-content: left;
    align-items: center;
    color: white;
    max-width: 100%;
    padding: 0.5em 1em;

}

.navbar .dropdown{
  position: relative;
}

.navbar .dropdown .title{
    padding-left: 0.5em;
    padding-top: 0.5em;
    padding-right: 3em;
    transition: border 0s 0.5s allow-discrete;
    border: 1px #00000000 solid;
}

.navbar .dropdown .content{
  position: absolute;
  text-align:right;
  left: 0;
  right: 0;
  padding-right: 1em;
  padding-left: 1em;
  top: 100%;
  background-color: #091621;
  border: 1px white solid;
  border-top: 0;
  border-bottom: 0;
  transition: max-height 0.5s, border 0s 0.5s allow-discrete;
}

.navbar .dropdown .content.show{
  border-bottom: 1px solid white;
  transition: max-height 0.5s, padding-bottom 0.5s;
  padding-bottom: 0.5em;
}

.navbar .dropdown .content input[type=submit]{
  border: 0;
  border-radius: 50px;
  padding: 0.25em;
  background-color: #00000000;
  color: white;
  cursor: pointer;
}

.navbar .dropdown:has(.content.show) img.chevron{
  transform:rotate(-180deg)
}

.navbar .dropdown:has(.content.show) .title{
  border: 1px white solid;
  border-bottom: 1px #00000000 solid;
  transition: border 0s;
}


.search{
    background-color: rgba(255, 255, 255, 0.24);
    padding: 1em;
    border-radius: 50px;
    margin-right: auto !important;
}

.search input[type=text]{
    color: white;
    background-color: rgba(0,0,0,0);
    border: 0;
}

.navbar >:nth-child(n){
    margin-left: 1em;
    margin-right: 1em;
}
.navbar >:nth-child(1){
    margin-left: 0;
}
.navbar >:nth-last-child(1){
    margin-right: 0;
}

.navLink{
    display: flex;
    align-items: center;
    padding: 5px;
    transition: transform 0.2s;
}

.navbar .navLink:hover, .navbar>.navIcon:hover{
    transform:scale(1.1);
}

.navLink img{
    padding: 5px;
}

.navbar a{
    color: white;
    text-decoration: none;
}

.navIcon{
    background-color: #40586C;
    border-radius: 1000px;
    position: relative;
    transition: transform 0.2s;
}
.navIcon img{
    padding: 10px
}
.navIcon .notification{
    background-color: #01CB80;
    position: absolute;
    padding: 5px;
    border-radius: 10px;
    top: 0;
    right: 0;
}

.navLink p{
    padding-left: 1em;
    padding-right: 1em;
}

.box{
    color:white;
    background-color: #04243E;
    padding: 50px;
    padding-top: 25px;
    border-radius: 26px;
    font-family: "Inter", serif;
    display: flex;
    flex-direction: column;
    margin-bottom: 1em;
}

.box.light{
    background-color: #224360;
    border-color: #A3ED3D;
    border-width: 1px;
    border-style: solid;
}

.box.clear{
    background-color: rgba(0,0,0,0);
}

.box.login{
    margin:auto;
    width: 33%;
}

.box.page{
    align-self: stretch;
    margin: 1.25%;
}


.box a{
    color: #79c93c;
    float: right;
    text-decoration: underline;
}

.box label{
    font-size: 0.75em;
}

.box input[type=text], .box input[type=password], .box select, .box input[type=email]{
    width: 100%;
    padding: 10px;
    border: 1px solid white;
    border-radius: calc(5px + 1em);
    background-color:rgba(0,0,0,0);
    color:white;
}

.box select{
    background-color: #008b92;
    border: 0;
    font-size: 1.25em;
    padding-left: 20px;
}

.box.login input[type=submit]{
    padding: 10px;
    padding-left: 25px;
    padding-right: 25px;
    border: none;
    border-radius: calc(5px + 1em);
    background-image: linear-gradient(to right, #01CB80, #008B92);
    color: white;
    font-size: 1.25em;
}

.box.page input[type=submit], .box.popupBox input[type=submit]{
    padding: 10px;
    padding-left: 25px;
    padding-right: 25px;
    border: none;
    border-radius: calc(5px + 1em);
    background-color: #008b92;
    color: white;
    font-size: 1.25em;
    width: 100%;
}

.title{
    display:flex;
    align-items: center;
    text-align: center;
    justify-content: center;
}

.title > *{
    padding: 0.5em;
}
.title img{
    padding: 1em;
}
.title h2{
    padding: 0;
    margin: 0;
    font-size: 2em;
    font-weight: 500;
    line-height: 1.2;
}

.leftEnd{
    margin-right: auto !important;
}
.rightEnd{
    margin-left: auto !important;
}

.title a.green{
    color:#A3ED3D;
    text-decoration: underline;
}

.pagetitle{
    margin: 0;
    margin-bottom: 0.5em;
    margin-left: 0.5em;
    font-size: 2.5em;
    font-weight: 500;
    line-height: 1.2;
}

.title .pagetitle{
    margin-left: auto;
    margin-right: auto;
}

.userTable{
    color: #FFFFFF;
    width: 100%;
    border-collapse: collapse;
}

.userTable tr{
    border-bottom: 1px solid rgba(255, 255, 255, 0.28);
}
.userTable tr td{
    padding-top: 1em;
    padding-bottom: 1em;
}

.userTable tr td a{
    float: none;
}
.userTable tr td a img{
    padding-right: 0.5em;
    padding-left: 0.5em;
}

tr td.darkBack{
    background-color:#081527;
}

.userTable input[type=checkbox]{
    background-color: rgba(0,0,0,0);
}

.darkGreen, a.darkGreen{
    color:#01CB80;
    text-decoration: none;
}

.check{
    display: block;
    cursor: pointer;
    position: relative;
    padding-left: 1.3em;
    margin-bottom: 1.5em;
}

.check input{
    position: absolute;
    opacity: 0;
}

.check .checkmark{
    position: absolute;
    top: 0;
    left: 0;
    height: 1.5em;
    width: 1.5em;
    border: 1px solid #FFFFFF;
}

.check input:checked ~ .checkmark{
    background-color: #008B92;
}

.check .checkmark:after{
    content: "";
    position: absolute;
    display: none;
}

.check input:checked ~ .checkmark:after {
    display: block;
}

.check .checkmark:after{
    left: 0.3em;
    top: -0.1em;
    width: 0.6em;
    height: 1.4em;
    border: solid white;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
}

.userTableNav{
    display: flex;
    margin-top: auto;
    width: 100%;
}

.buttonGreen, a.buttonGreen{
    background-color: #01CB80;
    color: white;
}

.buttonWhite{
    background-color: white;
    color: #01CB80 !important;
}

.buttonRed{
  background-color: red;
  color: white !important;
}

.buttonGreen, .buttonWhite, .buttonRed{
    padding: 0.5em;
    border-radius: 2em;
    margin-left: 0.5em;
    margin-right: 0.5em;
    border: 0;
    cursor: pointer;
    gap: 0.25em;
}

.buttonGreen img, .buttonWhite img, .buttonRed img{
  padding: 0;
}

.chart{
    display: flex;
}
.box .chart select{
    background-color: rgba(0,0,0,0);
    padding: 0;
    border-radius: 0;
}
.box .chart option{
    background-color: #04243E;
}

select.light{
    background-color: #224360;
    padding: 0;
    border-radius: 0;
    width: auto;
}

select.light option{
    background-color: #224360;
}

.chart .legend{
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-left: 1em;
}

.row{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.legend .row{
    justify-content: flex-start;
    max-width: 100%;
}

.legend .row p{
    display: inline-block;
}

.dot{
    border-radius: 10px;
    padding: 5px;
    max-height: 10px;
    max-width: 10px;
}

.dataTable{
    text-align: center;
    color: #FFFFFF;
    border-collapse: collapse;
    border: none;
    margin-top: 1em;
}

.dataTable td{
    font-size: 3em;
}

.dataTable tr.lightGreen{
    color:#A3ED3D;
}
.dataTable tr.aquamarine{
    color:#01CB80;
}
.dataTable tr.teal{
    color:#008B92;
}

.dataTable td + td, .dataTable th + th{
    border-left: 1px solid #FFFFFF;
}

.error{
    color:red;
}


.pagination a {
    text-decoration: none;
    margin: 0 5px;
    padding: 5px 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    color: #01CB80;
}

.pagination a.active {
    background-color: #008B92;
    color: white;
}

.pagination a:hover {
    background-color: #f0f0f0;
    color: #007BFF;
}

#piChart{
    width: 300px;
    max-width: 300px;
    height: 300px;
    max-height: 300px;
}

.box .content{
    display:flex;
    flex-wrap: wrap;
}

.objective .charts{
    display:flex;
    justify-content:space-around;
    flex-wrap:wrap;
}

.objective .title{
    justify-content:start;
    padding-right:0.5em;
}

.objective .title h6{
    width:100%;
    overflow: hidden;
    text-align:left;
}

.objective .title h6:after{
    content: "";
    display:inline-block;
    height:0.5em;
    vertical-align:bottom;
    width:100%;
    margin-right:-100%;
    margin-left:1em;
    border-top:1px solid white;
}

.objective .charts .chart{
    display:flex;
    flex-direction:column;
    margin:0.5em;
    background-color:#02182A;
    padding: 0.5em;
    border-radius:1em;
    width: calc(300px + 1em);
}

.objective .charts .chart p{
    font-size:0.75em;
    color:#C4C4C4;
}
.objective .charts .chart canvas{
    width: 300px;
    height: 150px;
}

.objective>p{
    text-align:center;
}

.chart-container{
    position:relative;
}

.chart-container canvas{
    position:absolute;
    width: 100%;
    height: 100%;
}

a.bigButton{
    display:flex;
    width:100%;
    padding:0.5em;
    border:1px white solid;
    border-radius:50px;
    color:white;
    text-decoration:none;
    margin-top:0.5em;
}

a.bigButton img.icon{
    width:39px;
    height:15px;
    align-self:center;
    padding-right:1em;
    padding-left:0.5em
}

a.inheritStyle{
    color: inherit !important;
    text-decoration: inherit !important;
}

#objectiveBox{
    transition: max-height var(--transitionTime); 
    overflow: hidden;
    max-height: var(--objBoxHeight);
    width: 100%;
    justify-content:space-around;
}

#objectiveBox.hidingObjectives{
    transition: max-height var(--transitionTime); 
    max-height:var(--objBoxHideHeight);
}

#individualStatsOverview{
    max-height: var(--statsOverviewHeight);
    transition: max-height 1s; 
    overflow: clip;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: center;
}

#individualStatsOverview.hiding{
    max-height: 0;
    transition: max-height 1s; 
}

#individualStatsOverview.hidden{
    display:none;
}

.green{
    color: #A3ED3D;
}

.red{
    color: #FF3A7D;    
}

.content .dropdown{
    background-color: #04243E;
    width: 100%;
    align-content: center;
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
    padding: 0.5em;
    margin-bottom: 1em;
}

.content .dropdown .title h5{
    margin: 0;
}

.row:has(table.playthrough){
  background-color: #04243E;
  border-top-left-radius: 1em;
  border-top-right-radius: 1em;
  padding-left: 1em;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  margin-left: 0.5em;
  margin-right: 0;
}

table.playthrough, table.playthroughsHeader{
    table-layout: fixed;
    width: 100%;
    text-align:left;
}

table.playthrough td{
  padding-top: 0.25em;
  padding-bottom: 0.25em;
}

table.playthrough .darkBack{
  background-color: #081527
}

table.playthrough tr>:nth-child(1), table.playthroughsHeader tr>:nth-child(1){
    width:30%;
}

table.playthrough tr>:nth-child(2), table.playthroughsHeader tr>:nth-child(2){
    width:20%;
}

table.playthrough tr>:nth-child(3), table.playthroughsHeader tr>:nth-child(3){
    width:10%
}

table.playthrough a{
  float: none;
}

.box.clear .header{
    border-radius: 50px;
    padding:0.25em;
    margin-bottom:1em;
}

.translucent{
    background-color: #FFFFFF40;
}

.customSelect.translucent .selectItems{
    background-color:#46515A;
}

.customSelect{
    position:relative;
    padding:0.5em;
    border-radius:1.25em;
    margin-right:1em;
    min-height: 2.5em;
    min-width: 216px;
}

.customSelect:not(:has(.selectItems.hide)):has(.selectSelected){
    border-bottom-left-radius: 0em;
    border-bottom-right-radius: 0em;
}

.customSelect:has(.selectItems.hide) .selectSelected:after{
    transform:rotate(0);
}

.customSelect select{
    display: none;
}

.customSelect .selectSelected{
    padding-right:1.5em;
    padding-left:0.5em;
    min-width: 200px;
    width:100%;
}

.customSelect .selectSelected:after{
    position: absolute;
    background-image: url("/images/chevron.svg");
    background-repeat: no-repeat;
    content: "";
    top: 1em;
    right:0.8em;
    width: 20px;
    height: 10px;
    transform:rotate(180deg);
}

.customSelect .selectItems{
    position:absolute;
    background-color:inherit;
    top:100%;
    left: 0;
    right: 0;
    z-index: 99;
    border-bottom-left-radius:1.25em;
    border-bottom-right-radius:1.25em;
}

.customSelect .selectItems div{
    cursor: pointer;
    padding: 8px 16px;
}

.cyan{
  background-color: #008b92
}

.customSelect:not(:has(.selectItems:not(.hide))){
  cursor: pointer;
}

.no-wrap{
  flex-wrap: nowrap !important;
}

.confirmation{
  cursor: pointer;
}

.popupBoxLink[popupid]{
  cursor:pointer;
}

.popupBox{
  color: white;
  position: fixed;
  left: 33%;
  right: 33%;
  top: 50%;
  transform: translateY(-50%);
  background-color: #04243E;
  text-align: center;
  border-radius: 50px;
  z-index: 10;
  display: flex;
  flex-direction: column;
  justify-content:center;
  align-items: center;
  border: 1px white solid;
  gap: 1em;
  padding: 1em;
}

body:has(.popupBox:not(.hide))::after{
  content: ' ';
  position: fixed;
  background-color: #00000088;
  width: 150vw;
  height:150vh;
}

.popupBox .closeButton{
  position: absolute;
  right: 2em;
  top: 2em;
  cursor:pointer;
}

input[type=date].translucent{
  border: 0;
  border-radius: 100px;
  padding: 0.5em;
  color: white;
  margin-left: 0.5em;
  margin-right: 0.5em;
}

table.alternate tr:nth-child(2n+1){
  background-color:#FFFFFF40;
}