/*
 * Style (Mats is just learning CSS)
 */

* {
  box-sizing: border-box;
}

html,
body {
  color: #444;
  font-family: 'Helvetica', 'Verdana', sans-serif;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  height: 100%;
  margin: 0;
  padding: 0;
  width: 100%;
  font-size: 18px;
}

html {
  overflow: hidden;
}

body {
  align-content: stretch;
  align-items: stretch;
  /* background: #ececec; */
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
}

.header {
  align-content: center;
  align-items: stretch;
  background: #3f51b5;
  box-shadow:
    0 4px 5px 0 rgba(0, 0, 0, 0.14),
    0 2px 9px 1px rgba(0, 0, 0, 0.12),
    0 4px 2px -2px rgba(0, 0, 0, 0.2);
  color: #fff;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  font-size: 20px;
  height: 48px;
  justify-content: flex-start;
  padding: 12px 16px 14px 16px;
  /*position: fixed;*/
  transition: transform 0.233s cubic-bezier(0, 0, 0.21, 1) 0.1s;
  width: 100%;
  will-change: transform;
  /* z-index: 1000; */
}

.header h1 {
  flex: 1;
  font-size: 20px;
  font-weight: 400;
  margin: 0;
}

label.iolab {
  color:rgb(255, 242, 182);
}

label.help {
  color:rgb(2, 253, 15);
  justify-content: right;

}

.topcontrol {
  padding: 0px 0px 0px 10px;
}

.control {
  padding: 15px 0px 10px 10px;
}

.charts {
  position:relative; 
  overflow-y:auto;
  padding: 0px 0px 0px 10px;
}

.selection {
  /* font: 1.2em 13px/5 Arial;  */
  font-size: 14px;
  width: 500px;
} 

.doutselect {
  /* font: 1.2em 13px/5 Arial;  */
  font-size: 12px;
  vertical-align: top;
  /* width: 500px; */
} 

.hidden {
  display: none;
}

#notSupported {
  padding: 1em;
  background-color: rgb(189, 5, 5);
  color: white;
  margin-top: 1em;
  margin-bottom: 1em;
}

table.a {
  table-layout: auto;
  width: 500px;
}

p.inst {
  font-size: 20px;
}

p.pairinst {
  font-size: 24px;
  color:blue;
}

p.tiny {
  font-size: 10px;
  color: #888888;
  text-align: right;
  padding: 0px 20px 0px 0px;
}

.smooth {
  font-size: 14px;
  padding: 0px 0px 0px 0px;
  color: rgb(101, 101, 104);
}

/*==================== calibration modal ===================*/
.calmodal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  -webkit-animation-name: fadeIn; /* Fade in the background */
  -webkit-animation-duration: 0.4s;
  animation-name: fadeIn;
  animation-duration: 0.4s
}

/* calmodal Content */
.calmodal-content {
  position: fixed;
  bottom: 0;
  background-color: #fefefe;
  width: 100%;
  -webkit-animation-name: slideIn;
  -webkit-animation-duration: 0.4s;
  animation-name: slideIn;
  animation-duration: 0.4s
}

/* The Close Button */
.closeCal {
  color: white;
  float: right;
  font-size: 28px;
  /* font-weight: bold; */
}

.closeCal:hover,
.closeCal:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.calmodal-header {
  padding: 10px 16px 10px;
  background-color:#3f51b5;
  font-size: 20px;
  color: white;
}

.calmodal-body {padding: 2px 16px;}

/*==================== options modal ===================*/
.optmodal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  -webkit-animation-name: fadeIn; /* Fade in the background */
  -webkit-animation-duration: 0.4s;
  animation-name: fadeIn;
  animation-duration: 0.4s
}

/* optmodal Content */
.optmodal-content {
  position: fixed;
  bottom: 0;
  background-color: #fefefe;
  width: 100%;
  -webkit-animation-name: slideIn;
  -webkit-animation-duration: 0.4s;
  animation-name: slideIn;
  animation-duration: 0.4s
}

/* The Close Button */
.closeOpt {
  color: white;
  float: right;
  font-size: 28px;
  /* font-weight: bold; */
}

.closeOpt:hover,
.closeOpt:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.optmodal-header {
  padding: 10px 16px 10px;
  background-color:#f1730b;
  font-size: 20px;
  color: white;
}

.optmodal-body {padding: 2px 16px;}


/*==================== pairing modal ===================*/
.pairmodal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  -webkit-animation-name: fadeIn; /* Fade in the background */
  -webkit-animation-duration: 0.4s;
  animation-name: fadeIn;
  animation-duration: 0.4s
}

/* pairmodal Content */
.pairmodal-content {
  position: fixed;
  bottom: 0;
  background-color: #fefefe;
  width: 100%;
  -webkit-animation-name: slideIn;
  -webkit-animation-duration: 0.4s;
  animation-name: slideIn;
  animation-duration: 0.4s
}

/* The Close Button */
.closePair {
  color: white;
  float: right;
  font-size: 28px;
  /* font-weight: bold; */
}

.closePair:hover,
.closePair:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.pairmodal-header {
  padding: 10px 16px 10px;
  background-color:#03b830;
  font-size: 20px;
  color: white;
}

.pairmodal-body {padding: 2px 16px;}

/*==================== message modal ===================*/
.messagemodal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  -webkit-animation-name: fadeIn; /* Fade in the background */
  -webkit-animation-duration: 0.4s;
  animation-name: fadeIn;
  animation-duration: 0.4s
}

/* Add Animation */
@-webkit-keyframes slideIn {
  from {bottom: -300px; opacity: 0} 
  to {bottom: 0; opacity: 1}
}

@keyframes slideIn {
  from {bottom: -300px; opacity: 0}
  to {bottom: 0; opacity: 1}
}

@-webkit-keyframes fadeIn {
  from {opacity: 0} 
  to {opacity: 1}
}

@keyframes fadeIn {
  from {opacity: 0} 
  to {opacity: 1}
}