body {
  user-select: none
}

.button {
  background-color: white;
  border: 0.5px solid gray;
  border-radius: 4px;
  
}

.button:active {
  background-color: lightgray;
}

.myContainer {
  /* font-family: arial;
  font-size: 24px;
  margin: 25px; */
  width: 340px;
  height: 340px;
  /* outline: dashed 1px black; */
  /* Center child horizontally*/
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: red;
}

.myChartContainer {
  /* font-family: arial;
  font-size: 24px;
  margin: 25px; 
  margin-left: 20px;*/
  /* width: 100%; */
  /* height: 180px; */
  /* outline: dashed 1px black; */
  /* Center child horizontally*/
  display: flex;
  justify-content: flex-start;
}

.myContent {
  /* width: 500px; */
  height: 500px;
  display: flex;
  justify-content: left; /* was center*/
  align-items: center;
  /* background-color: red; */
}

#myChart {
  /*width: 300px; */
  /*height: 300px;*/
  /* background-color: red; */
}

/*************************************/
/* Tabset for Analysis */
/*************************************/

/* Style the tab */
.tab {
  overflow: visible;
  height: 27px;
  /*padding-bottom: 14px;*/
  border-top: 1px solid white;
  border-left: none;
  border-right: none;
  border-bottom: 1px solid #ccc;
  background-color: none; /*#F8F8F8;*/
}

/* Style the buttons that are used to open the tab content */
.tab button {
  overflow: hidden;
  background: white; /*#F8F8F8;*/
  float: left;
  border-bottom: none; /*1px solid #ccc;*/
  border-top: none;
  border-left: none;
  border-right: none;
  outline: none;
  cursor: pointer;
  padding: 2px 6px;
  transition: 0.0s;
}

/* Change background color of buttons on hover */
.tab button:hover {
  color: #aaa;
}

/* Create an active/current tablink class */
.tab button.active {
  overflow: hidden;
  padding-bottom: 0px;
  background: white;
  /*background-color: none; /*#ddd;*/
  /* border: 1px solid #ccc; */
  border-top: 3px solid #67A6EB; /* #51A8F1;*/
  border-bottom: none; /*2px solid #FFFFFF;*/
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 6px;
  /* border: 1px solid #ccc;*/
  background-color: none; /*#F0F0F0; */
  border-top: none; /*1px solid #ccc;*/
  border-left: none;
  border-right: none;
  border-bottom: none;
}

/* Style panel-tabset */
.panel-tabset {
  border: 1px solid none;
}

/* Style panel-tabset */
.tab-content {
  background-color: none;
}

/* Style panel-tabset */
.tab-pane {
  padding: 0.5em;
  /* border-left: 1px solid #e3e3e3; */
  /* border-right: 1px solid #e3e3e3; */
  /* border-bottom: 1px solid #e3e3e3; */
}

/***********************/
/* Click Dropdowns     */
/***********************/

/* Dropdown Button */
.dropbtn {
  /* background-color: #ffff00; */
  /* color: black;*/
  padding: 6px;
  font-size: 16px;
  /*border: 1px solid black;*/
  cursor: pointer;
}

/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
  background-color: #2980B9;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
}

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

/* Links inside the dropdown */
.dropdown-content a {
  color: black;
  padding: 6px 6px;
  text-decoration: none;
  display: block;
}

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

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}

/***********************/
/* Radio Button Images */
/***********************/

/* Thanks to David Bradbury https://codepen.io/DavidBradbury/pen/DoWQLW */

.input-hidden {
  position: absolute;
  left: -9999px;
}

input[type=radio]:checked + label>img {
  border: 1px solid #fff;
  box-shadow: 0 0 3px 3px #000;
}

/* Stuff after this is only to make things more pretty */
input[type=radio] + label>img {
  border: 1px dashed #444;
  width: 48px;
  height: 48px;
  transition: 500ms all;
}

input[type=radio]:checked + label>img {
  transform: 
    rotateZ(5deg); 
    rotateX(5deg);
}