* {
  box-sizing: border-box;
}
body{ background-color: rgb(80,130,190);
      color: black;
      font-weight: plain;
      font-family: helvetica, sans-serif;
      font-size: 100%; }
.row::after {
  content: "";
  clear: both;
  display: block;
}
[class*="col-"] {
  float: left;
}


/* for small phones */
@media only screen and (max-width: 659px) {
  .col-ss-1 {width: 5%;}
  .col-ss-2 {width: 10%;}
  .col-ss-3 {width: 15%;}
  .col-ss-4 {width: 20%;}
  .col-ss-5 {width: 25%;}
  .col-ss-6 {width: 30%;}
  .col-ss-7 {width: 35%;}
  .col-ss-8 {width: 40%;}
  .col-ss-9 {width: 45%;}
  .col-ss-10 {width: 50%;}
  .col-ss-11 {width: 55%;}
  .col-ss-12 {width: 60%;} 
  .col-ss-13 {width: 65%;}
  .col-ss-14 {width: 70%;}
  .col-ss-15 {width: 75%;}
  .col-ss-16 {width: 80%;}
  .col-ss-17 {width: 85%;}
  .col-ss-18 {width: 90%;}
  .col-ss-19 {width: 95%;}
  .col-ss-20 {width: 100%;}
}

/* for large phones or small tablets */
@media only screen and (min-width: 660px) {
  .col-s-1 {width: 5%;}
  .col-s-2 {width: 10%;}
  .col-s-3 {width: 15%;}
  .col-s-4 {width: 20%;}
  .col-s-5 {width: 25%;}
  .col-s-6 {width: 30%;}
  .col-s-7 {width: 35%;}
  .col-s-8 {width: 40%;}
  .col-s-9 {width: 45%;}
  .col-s-10 {width: 50%;}
  .col-s-11 {width: 55%;}
  .col-s-12 {width: 60%;} 
  .col-s-13 {width: 65%;}
  .col-s-14 {width: 70%;}
  .col-s-15 {width: 75%;}
  .col-s-16 {width: 80%;}
  .col-s-17 {width: 85%;}
  .col-s-18 {width: 90%;}
  .col-s-19 {width: 95%;}
  .col-s-20 {width: 100%;}
}

/* for tablet */
@media only screen and (min-width: 900px) {
  .col-t-1 {width: 5%;}
  .col-t-2 {width: 10%;}
  .col-t-3 {width: 15%;}
  .col-t-4 {width: 20%;}
  .col-t-5 {width: 25%;}
  .col-t-6 {width: 30%;}
  .col-t-7 {width: 35%;}
  .col-t-8 {width: 40%;}
  .col-t-9 {width: 45%;}
  .col-t-10 {width: 50%;}
  .col-t-11 {width: 55%;}
  .col-t-12 {width: 60%;} 
  .col-t-13 {width: 65%;}
  .col-t-14 {width: 70%;}
  .col-t-15 {width: 75%;}
  .col-t-16 {width: 80%;}
  .col-t-17 {width: 85%;}
  .col-t-18 {width: 90%;}
  .col-t-19 {width: 95%;}
  .col-t-20 {width: 100%;}
}

/* for desktop */
@media only screen and (min-width: 1200px) {
  .col-1 {width: 5%;}
  .col-2 {width: 10%;}
  .col-3 {width: 15%;}
  .col-4 {width: 20%;}
  .col-5 {width: 25%;}
  .col-6 {width: 30%;}
  .col-7 {width: 35%;}
  .col-8 {width: 40%;}
  .col-9 {width: 45%;}
  .col-10 {width: 50%;}
  .col-11 {width: 55%;}
  .col-12 {width: 60%;} 
  .col-13 {width: 65%;}
  .col-14 {width: 70%;}
  .col-15 {width: 75%;}
  .col-16 {width: 80%;}
  .col-17 {width: 85%;}
  .col-18 {width: 90%;}
  .col-19 {width: 95%;}
  .col-20 {width: 100%;}
}

/* for desktop with wide screen */
@media only screen and (min-width: 1450px) {
  .col-l-1 {width: 5%;}
  .col-l-2 {width: 10%;}
  .col-l-3 {width: 15%;}
  .col-l-4 {width: 20%;}
  .col-l-5 {width: 25%;}
  .col-l-6 {width: 30%;}
  .col-l-7 {width: 35%;}
  .col-l-8 {width: 40%;}
  .col-l-9 {width: 45%;}
  .col-l-10 {width: 50%;}
  .col-l-11 {width: 55%;}
  .col-l-12 {width: 60%;} 
  .col-l-13 {width: 65%;}
  .col-l-14 {width: 70%;}
  .col-l-15 {width: 75%;}
  .col-l-16 {width: 80%;}
  .col-l-17 {width: 85%;}
  .col-l-18 {width: 90%;}
  .col-l-19 {width: 95%;}
  .col-l-20 {width: 100%;}
}

/* for desktop with quite wide screen */
@media only screen and (min-width: 1750px) {
  .col-L-1 {width: 5%;}
  .col-L-2 {width: 10%;}
  .col-L-3 {width: 15%;}
  .col-L-4 {width: 20%;}
  .col-L-5 {width: 25%;}
  .col-L-6 {width: 30%;}
  .col-L-7 {width: 35%;}
  .col-L-8 {width: 40%;}
  .col-L-9 {width: 45%;}
  .col-L-10 {width: 50%;}
  .col-L-11 {width: 55%;}
  .col-L-12 {width: 60%;} 
  .col-L-13 {width: 65%;}
  .col-L-14 {width: 70%;}
  .col-L-15 {width: 75%;}
  .col-L-16 {width: 80%;}
  .col-L-17 {width: 85%;}
  .col-L-18 {width: 90%;}
  .col-L-19 {width: 95%;}
  .col-L-20 {width: 100%;}
}


h1 {  text-align: center;
      color: black;
      font-family: "Comic Sans MS", cursive, sans-serif;
      font-size: 2.5em;
      font-weight: bold;
      text-shadow: 3px 3px white;
      margin: 0px 0px 5px 0px; }
h2#appTitle {  text-align: center;
      color: rgb(250,250,250);
      font-size: 160%;
      font-weight: bold;
      text-shadow: 2px 2px black;
      }    
#hintSpace{
      color: rgb(255,255,255);
      }
#hint-content{
      height: 150px;
      overflow-x: auto;}
#expl-content{
      height: 450px;
      background-color: rgb(200,240,255);
      border-style: groove;
      border-width: 3px;
      border-color: rgb(50,0,100);
      border-radius: 3px;
      margin: 5px;
      padding: 5px 5px 5px 15px;
      text-align: justify;
      color: rgb(50,50,120);
      text-indent: 20px;
      overflow-x: auto;
}
.nav-lr{
      background-color: rgb(200,240,255);      
      color: rgb(200,50,120);
      border-style: groove;
      border-width: 4px;
      border-color: rgb(50,0,100);
      border-radius: 10px;
      margin: 10px 3px 10px 3px;
      padding: 0px 3px 0px 3px;
      text-align: center;
      font-size: 1.5em;
      font-weight: bold;
      text-shadow: 2px 2px rgb(240,150,200);
      opacity: 0.6;
      cursor: not-allowed;
      }
.explan-title{
      text-align: center;
      color: rgb(200,255,255);
      font-style: italic;
      }
h3#hintsTitle{
      padding-bottom: 0px;  
      margin-bottom: 0px;
      }
.navbut{  
      background-color: rgb(200,240,255);
      color: rgb(30,60,100);
      opacity: 0.6;
      cursor: not-allowed; 
      padding: 3px 3px 3px 3px;
      }
#help{
      color: rgb(200,240,255);
      text-align: center;
      font-size: 1.5em;
      font-weight: bold;
      text-shadow: 2px 0px black;}
#explan-head{
      display:grid;
      grid-template: auto / auto min-content min-content;
      grid-column: 1 / span 1; 
      grid-row: 1 / span 1;
      }
#app-container{
      position: relative;
      float: right;
      text-align: center;      
      }
/* Dropdown Button */
#compl-but {
  background-color: rgb(255,240,255);
  color: rgb(30,60,100);
  width: 100%;
  height: auto;
  padding: 3px 3px 3px 3px;
}

/* Dropdown Content (Hidden by Default) */
#compl-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */
#compl-content a {
  color: rgb(50,50,150);
  padding: 6px 10px;
  text-decoration: none;
  font-style: italic;
  display: block;
}

/* Change color of dropdown links on hover */
#compl-content a:hover {background-color: #ddd;}

/* Show the dropdown menu on hover */
#compl-drop:hover #compl-content {display: block;}

/* Change the background color of the dropdown button when the dropdown content is shown */
#compl-drop:hover #compl-but {background-color: rgb(200,180,200);}
/*

/* Dropdown Button */
#lang-but {
  width: 100%;
  height: 30px;
  background-color: rgb(255,240,255);
  color: rgb(30,60,100);
}

/* The container <div> - needed to position the dropdown content */
#lang-drop {
  text-align: center;
  display: block;
}

/* Dropdown Content (Hidden by Default) */
#lang-content {
  display: none;
  position: absolute;
  right: 5px;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */
#lang-content a {
  color: rgb(50,50,150);
  padding: 6px 10px;
  text-decoration: none;
  font-style: italic;
  display: block;
}

/* Change color of dropdown links on hover */
#lang-content a:hover {background-color: #ddd;}

/* Show the dropdown menu on hover */
#lang-drop:hover #lang-content {display: block;}

/* Change the background color of the dropdown button when the dropdown content is shown */
#lang-drop:hover #lang-but {background-color: rgb(200,180,200);}

/* Dropdown Button */
#help-but { 
  border-style: groove;
  border-width: 2px;
  border-color: rgb(50,0,100);
  background-color: rgb(255,240,255);
  color: rgb(30,60,100);
  padding: 3px 3px 3px 3px;
  cursor: pointer;
}

/* Dropdown Content (Hidden by Default) */
#help-title{
  text-align: center;
  font-weight: bold;
  font-style: italic;
  padding: 2px 2px 2px 2px;
}
#help-close {      
      display: grid;
      grid-template: '. .';
      grid: auto / auto min-content;
}
#help-X {
  text-align: center; 
  padding: 2px 2px 2px 2px;
  border-style: groove;
  border-width: 1px;
  border-color: rgb(100,1000,100); 
  cursor: pointer;
}
#help-window {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  top: 100px;
  left: 400px;  
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1; 
  border-style: groove;
  border-width: 2px;
  border-color: rgb(50,0,100);
  border-radius: 5px;
} 
#help-content {
  width: 400px;
  height: 400px;
  margin: 10px;  
  overflow-x: auto;
  padding: 3px 3px 3px 3px;
  text-align: justify;
  text-indent: 20px;
}

/* Show the dropdown menu on hover */
#help-drop:hover #help-content {display: block;}

/* Change the background color of the dropdown button when the dropdown content is shown */
#help-drop:hover #help-but {background-color: rgb(100,20,50);}

#home-but {
  height: 40px;
  background-color: rgb(255,245,255);
  color: rgb(30,60,100); 
  border-style: groove;
  border-width: 2px;
  border-color: rgb(50,0,100);
  cursor: pointer;
}
#home-but:hover {background-color: rgb(200,180,200);}

#app-control {
  position: absolute;
  top: 240px;
  left: 50px;
  width: 160px;
  height: 160px;
  padding: 10px;
  background-color: rgb(20,120,180);
  border: 5px solid rgb(180,180,180);
  border-radius: 8px;
  border-style: outset;
  box-shadow: 5px 5px 15px rgb(255,255,255);
}

.ctrbt{ width: 120px;
  height: 28px;
  background-color: rgb(20,50,100);
  color: rgb(255,255,255);
  margin: 3px;
  font-weight: plain;
  font-family: helvetica, sans-serif;
  font-size: 11pt;
  border: 3px solid grey;
  border-radius: 5px;
  border-style: outset;
  box-shadow: 5px 5px 5px rgb(60,180,220);
  cursor: pointer; }

.ctrbt:disabled{ opacity: 0.5;}

.myCheck-lbl{
  background-color: rgb(20,50,100); 
  color: rgb(255,255,255);
  height: 28px;
  opacity: 0.5;
  margin: 3px;
  padding-left: 30px;
  padding-top: 4px;
  font-weight: plain;
  font-family: helvetica, sans-serif;
  font-size: 10pt;
  display: block;
  position: relative;
  border: 3px solid grey;
  border-radius: 5px;
  border-style: outset;
  box-shadow: 5px 5px 5px rgb(60,180,220);  
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.myCheck-lbl input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.myCheck-mark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: rgb(255,255,255);
}

/* When the checkbox is checked, add a blue background */
.myCheck-lbl input:checked ~ .myCheck-mark {
  background-color: rgb(20,50,100);
}

/* Create the checkmark/indicator (hidden when not checked) */
.myCheck-mark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.myCheck-lbl input:checked ~ .myCheck-mark:after {
  display: block;
}

/* Style the checkmark/indicator */
.myCheck-lbl .myCheck-mark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
 
#shoot-lbl{
  width: 120px;
  cursor: not-allowed;
  font-size: 10pt;
}



#blade-control{
  position: absolute;
  top: 240px;
  left: 610px;
  width: 240px;
  height: 180px;
  background-color: rgb(100,200,150);
  padding: 0px;
  border: 5px solid rgb(180,180,180);
  border-radius: 8px;
  border-style: outset;
  box-shadow: 5px 5px 15px rgb(255,255,255);}
  
.blade-item{
  height: 30%;}

.blade-line{
  text-align: center;}
  
.val-in{
  width: 35px;
  background-color: rgb(100,200,150);}

.blade-label{
  color: rgb(20,40,30);
  text-align: center;
  font-size: 10pt;}
  
/* Chrome, Safari, Edge, Opera */
.val-in::-webkit-outer-spin-button,
.val-in::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
.val-in {
  -moz-appearance: textfield;
}

.val-arrow{
  margin-left: 3px;
  margin-right: 0px;
  font-weight: bold;
  font-family: helvetica, sans-serif;
  font-size: 14pt;
  color: rgb(255,50,20);
  cursor: pointer;
}

#blade-table{
  margin-left: 2%; 
  margin-right: 2%;
  margin-top: 0%; 
  margin-bottom: 0%;
  text-align: center;
  border: 1px solid rgb(180,180,180);}
  
table{
  width: 96%;
  margin-left: 2%; 
  margin-right: 2%;
  text-align: center;
  border: 1px solid rgb(180,180,180);}

tr{text-align: center;}

th{text-align: center;}

td{text-align: center;}

#obs-control{
  position: absolute;
  top: 100px;
  left: 610px;
  width: 220px;
  height: 42px;
  background-color: rgb(60,180,150);
  padding: 0px;
  border: 3px solid rgb(180,180,180);
  border-radius: 8px;
  border-style: outset;
  box-shadow: 3px 3px 10px rgb(255,255,255);}
 
#obs-lbl{
  width: 200px;
  cursor: pointer;
}