#mainind-chart-container {
    width: 90%;
    padding-top: 1vh;
    display: flex;
    justify-content: center;

    flex-wrap: wrap;
    align-items: center;
}

.mainind-chart-line { border: 1px solid lightgray; border-radius: 5px; width: 30%; margin: 0.2vw 0.3vh; }
.info { font-size: 0.8em; }

.ui-tabs{
    width: 91%;
}

#level1-chart-container {
    width: 90%;
    padding-top: 1vh;
    display: flex;
    justify-content: center;

    flex-wrap: wrap;
    align-items: center;
}

.isic2-pulldown { margin: 0.8vh auto; width: 90%;}

.ic-chart-bar { border: 1px solid lightgray; border-radius: 5px; width: 50%; margin: 0.2vw 0.3vh;}
.ic-chart-detailbar { border: 1px solid lightgray; border-radius: 5px; width: 70%; margin: 0.2vw 0.3vh;}

.ce-chart-bar { border: 1px solid lightgray; border-radius: 5px; width: 50%; margin: 0.2vw 0.3vh;}
.ce-chart-detailbar { border: 1px solid lightgray; border-radius: 5px; width: 50%;  margin: 0.2vw 0.3vh;}

.go-chart-bar { border: 1px solid lightgray; border-radius: 5px; width: 50%; margin: 0.2vw 0.3vh;}
.go-chart-detailbar { border: 1px solid lightgray; border-radius: 5px; width: 50%;  margin: 0.2vw 0.3vh;}

#legend1 {width: 50%;}

.help { padding-top: 2vh; color: #737373; font-variant: small-caps; }

.navigator {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items:center;
}

.goback img {width : 4em; padding-right: 1vw;}

.cb-title { font-weight: bold; margin: 2vh auto;}

.cb-holder {
    margin-top: 2vh;
    height: 21vh;
    overflow-y: auto;
}

/* https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_custom_checkbox */
/* The container */
.cb-container {
  display: block;
  position: relative;

  margin-bottom: 0.1em;
  cursor: pointer;
  font-size: 1em;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.cb-container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;

  height: 1em;
  width: 1em;
  background-color: #eee;
}

/* On mouse-over, add a grey background color */
.cb-container:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.cb-container input:checked ~ .checkmark {
  background-color: #2196F3;
}

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

/* Show the checkmark when checked */
.cb-container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.cb-container .checkmark:after {
  left: 0.4em;
  top: 0.25em;
  width: 0.15em;
  height: 0.35em;
  border: solid white;
  border-width: 0 0.15em 0.15em 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.rb-container {
    padding-bottom: 5px;
    display: flex;
    justify-content:space-between;
    flex-wrap: wrap;
    align-items: center;
}

.rb-label {
    font-size: calc(0.6em + 0.7vw);
    color: #8c8c8c;
}

.legend-container {
    width: 90%;
    padding-top: 1vh;
    display: flex;
    align-items: center;
    justify-content:flex-start;
}

.legend { font-size: 0.8em;}

/* Responsive media query CSS */
@media only screen and (max-width: 400px) {
    .goback img {width : 2em;}
    .help {font-size: 0.8em;}

    .ui-tabs{
        width: 80%;
    }
    .mainind-chart-line { width: 80%; }
    .ic-chart-bar { width: 100%; }
    .ce-chart-bar { width: 100%;}
    .go-chart-bar { width: 100%;}

    .ic-chart-detailbar { width: 100%; overflow-x: scroll;}
    .ce-chart-detailbar { width: 100%;}
    .go-chart-detailbar { width: 100%;}

    #legend1 {width: 100%;}

}

@media only screen and (min-width: 401px) and (max-width: 960px){
    .goback img {width : 2.5em;}

    .mainind-chart-line { width: 70%; }
    .ic-chart-bar { width: 70%; }
    .ce-chart-bar { width: 70%;}
    .go-chart-bar { width: 70%;}

    .ic-chart-detailbar { width: 100%; overflow-x: scroll;}
    .ce-chart-detailbar { width: 100%;}
    .go-chart-detailbar { width: 100%;}

    #legend1 {width: 100%;}
}

@media only screen and (min-width: 961px) {
}