@charset "utf-8";

:root {
  --primary-h:230;
  --grey-fact:80%;
  --highlight-h: calc(var(--primary-h) + 180);
  --dark-color: hsl(var(--primary-h),var(--grey-fact),16%);
  --medium-color: hsl(var(--primary-h),var(--grey-fact),40%);
  --light-color: hsl(var(--primary-h),var(--grey-fact),85%);
  --nocolor-color: hsl(0,0%,100%);
  --select-color: hsl(var(--highlight-h),90%,50%);
  --highlight-color: hsl(0,100%,30%);
  --target-color: hsl(var(--primary-h),var(--grey-fact),40%);
  --lighttext-color: var(--nocolor-color);
  --darktext-color: var(--dark-color);
  --font-family:  montserrat, sans-serif;
  cursor: default;
}

.leftbox {
  background-color: var(--light-color);
  font-family: var(--font-family);
}

.rightbox {
  background-color: var(--dark-color);
  border-left-style: solid;
  border-left-width: 1px;
  border-left-color: var(--dark-color);
  margin-top: 1px;
  color:var(--lighttext-color);
  font-family: var(--font-family);
  padding:5px;
}

.righttopbox {
  background-color: var(--dark-color);
  border-left-style: solid;
  border-left-width: 1px;
  border-left-color: var(--dark-color);
  color:var(--lighttext-color);
  font-family: var(--font-family);
  padding:5px;
}

.rightdatabox {
  background-color:var(--nocolor-color);
  border-left-style: solid;
  border-left-width: 1px;
  border-left-color: var(--dark-color);
  margin-top: 1px;
  color:var(--darktext-color);
  font-family: var(--font-family);
  padding:5px;
}



.bigtext {
  border-style: none;
  font-family: var(--font-family);
  font-size: max(20pt, 3vh);
  color:var(--lighttext-color);
}

.mediumtext {
  border-style: none;
  font-family: var(--font-family);
  font-size: max(15pt, 1.5vh);
  color:var(--lighttext-color);
}

.smallext {
  border-style: none;
  font-family: var(--font-family);;
  font-size: max(10pt, 0.75vh);
  color:var(--lighttext-color);
}

.dark {
  color:var(--darktext-color); ;
}




#mainframe {
  display: flex;
  flex-direction: row;
  position: absolute;
top:0px;
bottom: 5px;
left: 0px;
right: 15px;
overflow-y: hidden;
}

#leftpanel {
  flex: 0 0 auto;
  width: 75%;
  height: 100%;
  max-width: 90%;
  min-width: 20px;
}

#rightpanel {
  position: relative;
  right: 0px;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  height: 100%;
  width: 25%;
  right: 0px;
  overflow: hidden;
}



#titlepanel {
  min-height: 100px;
  width: 100%;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center
}

#mainmenu {
  min-height: auto;
  height: auto;
  width: 100%;
  align-items: left;
  justify-content: center
}



#mappanel, #infopanel, #rainbowpanel{
  display: none;
  flex: 1 1 auto;
  min-height: 10em;
  left:0px;
  right:0px;
  overflow: auto;
}


#infopanel.selected, #mappanel.selected, #rainbowpanel.selected{
  display: flex;
  flex-direction: column;
}

#rainbowbox{

  overflow: auto;
  height :100%;
}


#rainboxsliderbox{
  width: 30%;
  margin: auto;
  text-align: center;
}


#contactpanel {
  min-height: auto;
  height: auto;
  width: 100%;
}


.slider {
  width: 100%;
  -webkit-appearance: none;
  height: max(10pt, 0.75vh);
  border-radius: 5px;
  background: var(--dark-color);
  color:var(--nocolor-color);
  outline: none;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider:disabled{
  opacity: 35%;
}

#slidercontainer{
  width: 20%;
  position: absolute;
  bottom: 20px;
  right: 20px;
  background-color: transparent;
}

/* Special styling for WebKit/Blink */
.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  border:  1px solid var(--dark-color);
  border-radius: 2ch;
  height:2ch;
  width: 2ch;
  background:var(--nocolor-color);
  cursor: pointer;
}

/* All the same stuff for Firefox */
.slider::-moz-range-thumb {
  border:  1px solid var(--dark-color);
  border-radius: 2ch;
  height:2ch;
  width: 2ch;
  background:var(--nocolor-color);
  cursor: pointer;
}

#sliderhue, #slidergrey {
  background: var(--nocolor-color);
}


#topbar{
  display: flex;
  height:30px;
  width: 100%;
  background-color:var(--dark-color);
  border-top-color: var(--darktext-color);
  border-top-style: solid;
  border-top-width: 1px
}

#display{
  height: 100%;
  overflow: auto;
}


.tabtop{
  display: flex;
  color:var(--darktext-color);
  background-color:var(--light-color);
  width: 100px;
  height:auto;
  border-top:var(--dark-color);
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
  border-bottom:var(--dark-color);
  margin-left: 5px;
  margin-top: 5px;
  text-align: center;
  vertical-align: middle;
  align-items: center;
  justify-content: center;
  opacity: 50%;
  cursor: pointer;
}

.tabtop:hover{
  opacity: 100%;
  filter: brightness(2);
  }
  

.tabtop.active{
  color:var(--darktext-color);
  background-color:var(--light-color);
  border-top: var(--darktext-color);
  opacity: 100%;
 cursor: text;
}


.alert{
  background-color:var(--dark-color);
  font-family:var(--font-family);
  font-size: max(15pt, 1.5vh);
  color:var(--highlight-color)
}

.alert .ui-dialog-titlebar{
  background-color:red;
  color:greenyellow;
}

.diaghead{ 
  display: flex; 
  align-items: center;
  justify-content: center;
  background-color:var(--dark-color);
  border-style: none;
  font-family:var(--font-family);
  font-size: max(15pt, 1.5vh);
  color:var(--lighttext-color);
  height:40px;
}

.diagbody{
  background-color:var(--nocolor-color);
  border-style: solid;
  border-width: 1px;
  border-color: var(--dark-color);
  margin-top: 1px;
  color:var(--darktext-color);
  font-family: var(--font-family);
  height:auto;
  font-size: max(15pt, 1.5vh);
  padding:5px;
  box-shadow: 10px 10px 5px grey
}

.diagnoclose{ 
  visibility: hidden;
}

.diagbuttonpane{
  display: flex; 
  align-items: center;
  justify-content: start;
  background-color:var(--dark-color);
  color:var(--lighttext-color);
  height:40px;
} 

.diagbuttonpane button{
  border-style: none;
  font-family: var(--font-family);;
  font-size: max(10pt, 0.75vh);
  text-align: center;
  text-decoration: none;
  color:var(--darktext-color);
  background-color:none;
  margin: 5px;
  cursor: pointer;
  transition-duration: 0.4s; 
}


.diagbuttonpane button:hover{ 
  background-color:var(--light-color);
  color:var(--darktext-color); 
}


.grid-container{
    --square: 60px;
    --interspace: 20px;
    --number-in-row: 5;
    --number-of-rows: 3;
    grid-row-gap: var(--interspace);
    margin-top: var(--interspace);
    display:grid;
    grid-template-columns: var(--interspace) repeat(var(--number-in-row),var(--square) var(--interspace));
    grid-template-rows: repeat(var(--number-of-rows),var(--square) );
    background-color: none;
    width: 100%;
}
.grid-item {
    background-color:var(--nocolor-color);
    object-fit: contain;
    overflow:   hidden;
    width: 100%;
    height: 100%;
}
.grid-img{
  object-fit: contain;
}

.grid-item:hover {
  background-color:var(--dark-color);
  border-color: var(--dark-color);
  border-style: solid;
  border-width: 2px;
}


.grid-item.hover {
  background-color:var(--dark-color);
  border-color: var(--dark-color);
  border-style: solid;
  border-width: 2px;
}

.grid-item.selected {
  outline-style: solid;
  outline-width: 5px;
  outline-color: var(--select-color);
  outline-offset: 0px;
}

.grid-item.selected:hover {
  outline-style: solid;

}

.grid-interspace{
  background-color:none;
}

.grid-interspace:hover{
background-color:var(--dark-color);
border-color: var(--dark-color);
border-width: 2px;
border-top-style: solid;
border-bottom-style: solid;
}

.grid-interspace.hover{
  background-color:var(--dark-color);
  border-color: var(--dark-color);
  border-width: 2px;
  border-top-style: solid;
  border-bottom-style: solid;
  }




.infobox{
  overflow: auto;
  height: 100%;
  background-color:var(--nocolor-color);
}

.infotext{
  background-color:var(--light-color);
  width: 100%;
}

.svgtext{
  font-size: max(10pt, 0.75vh);
  background-color:var(--nocolor-color);
  width: 100%;
}

.translucide{
  opacity: 0.6;
}


.hidden{
  visibility: hidden;
}



.dragdoc {
  background-color:var(--nocolor-color);
  object-fit: contain;
  overflow:   hidden;
}


.dragged{
  opacity: 40%;
  filter: grayscale(80%)
}


.placeholder{
  width: 100%;
  height: 100%;
  position:relative;
  background-color: var(--nocolor-color);
}



.loader {
  position:absolute;
  top: 0; bottom: 0; left: 0; right: 0;
  margin: auto;
  border: 16px solid var(--medium-color); 
  border-radius: 50%;
  background-color: transparent;
  border-top: 16px solid var(--dark-color);
  width: 50px;
  height: 50px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.cardhandle {
  width: max-content;
}

.cardhandle .top{
  width:200px;
  margin: auto;
  text-align: center;
  background-color: var(--nocolor-color);
}

.cardhandle .inner{
  position: relative;
}

.cardhandle .card{
  position: absolute;
  width: 200px;
  height: 200px;
  border: solid var(--dark-color) 1px;
  filter:  drop-shadow(10px 10px 10px var(--dark-color) );
}


.cardhandle .back{
  background-color: var(--light-color);
  filter: brightness(80%);
}

.cardhandle .main{
  left: 0px;;
  top: 0px;;
}

.cardhandle .one{
  left: 5px;
  top: 5px;
}

.cardhandle .two{
  left: 10px;
  top: 10px;
}


.mdtext{
  padding: 4ch;
}

.mdtext h1{
  text-decoration-line: underline;
 
}

.mdtext strong{
  color: var(--highlight-color);
  font-weight: bold;
}
.mdtext p{
font-weight: normal;
}

.mdtext img{
  height: 1.5ch;
}


.mdtext svg{
  height: 1.5ch;
}

button{
  border-style: none;
  font-family: var(--font-family);;
  font-size: max(10pt, 0.75vh);
  text-align: center;
  text-decoration: none;
  color:var(--darktext-color); 
  background-color:var(--nocolor-color);
  margin: 5px;
  width: 12ch;
  cursor: pointer;
  transition-duration: 0.4s; 
  border-width: 1px;
  border-color:  var(--nocolor-color);
  border-style: double;
  border-radius: 3px;
}


button:disabled,
button[disabled]
button.reverse{
  opacity: 0.35;
}

button:hover{ 
  background-color:var(--light-color);
  color:var(--darktext-color); 
}




.menugrid{
  display: grid;
  grid-template-columns: 12ch 4ch 12ch auto;
  grid-template-rows:repeat(6, 1.5em);
  grid-auto-flow: column;

}


.menubox{
  overflow: hidden;
  padding-left: 1ch;
  padding-right: 1ch;
}

.menubox.selected{
  background: var(--light-color);
  color: var(--darktext-color)
}


.menugrid .txt{
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}


.menugrid .bottom{
  border-bottom-right-radius: 5px;;
  border-bottom-left-radius: 5px;
  }

  .menugrid .topright{
    border-top-right-radius: 5px;

    }
    
    .menugrid .topleft{

      border-top-left-radius: 5px;
      }

.c1,
.c2,
.c3{
  cursor: pointer;
}




.c1:hover,
.c2:hover,
.c3:hover{
  filter: brightness(2);
}

.c1:active,
.c2:active,
.c3:active{
  background: var(--dark-color);
  color: var(--lighttext-color)
}




 .switch {
  position: relative;
  display: inline-block;
  width: 4ch;
}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.switch .sliderbar {
  position: absolute;
  cursor: pointer;
  top:1px;
  right:1px;
  left:1px;
  bottom:1px;

  background-color: var(--light-color);
  transition: .4s;
  border-radius: 100px;
}



.switch .sliderball
{
  position: absolute;
  content: "";
  padding-top: calc(2ch - 8px);
  width: calc(2ch - 6px);
  background-color: var(--dark-color);
  transition: .4s;
  border-radius: 50%;
  top:3px;
  left:3px;
}

#showtxt {
  color:var(--light-color);
}

.switch input:checked ~ .sliderbar{
  background-color:var(--nocolor-color);
}

.switch input:checked ~  .sliderball
{ left: unset;
  right: 4px;
}

#showtxt.on{
  color:var(--nocolor-color);
}


.switch input:disabled ~  .sliderball
{   top:4px;
  left:4px;
}

.switch input:disabled ~ .sliderbar{
  opacity: 35%;
}


.boxchooser{
  width: 100%;
  display: flex;
  flex-direction:row;
  padding-top: 5px;
  padding-bottom: 0px;
  height: 1.5em;
}
.boxswap{
  background-color:var(--light-color);
  color:var(--darktext-color);
width:  10ch;
text-align: center;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
margin-left: 1ch;
opacity: 50%;
cursor: pointer;
}

.boxswap:hover{
  opacity: 100%;
filter: brightness(2);
}

.boxswap.selected{
  opacity: 100%;
}
 
.boxswap:active{
background: var(--dark-color);
color: var(--lighttext-color)
}

.icon{
  fill:var(--nocolor-color);
  width:1.5ch
}

#rangerbox{
  display: grid;
  grid-template-columns:  30% 30% ;
  justify-content:space-evenly;
}


#rangerbox * {
  margin: auto;
}

#contactbox  * {
padding-top: 0.5em;
padding-bottom: 0.5em;
color:var(--lighttext-color);
margin: auto;
}


.rainbowgrid{
  display: grid;
  grid-template-columns: 1fr 1fr;
 
}

.rainbox{
  margin: 0px;
}

#vresizehandle{
  height:8%;
  width: 5px;
  background-color:var(--dark-color);
  position: absolute;
  right  : 0px;
  top:46%;
  border-top-left-radius: 50px;;
  border-bottom-left-radius: 50px;;
}


td.highlight svg.anchoricon,
.mdtext span.highlight svg.anchoricon
{
  fill: var(--highlight-color)
}



td.fade svg.anchoricon,
.mdtext span.fade svg.anchoricon{
  fill: var(--dark-color);
  filter: saturate(0.5) opacity(0.5)
}