.main-header-title {
  font-family: Arial, Helvetica, sans-serif;
  color: var(--tab-on-color);
  font-size: 1.0em;
  font-weight: bold;
}
.main-header-info {
  font-family: Arial, Helvetica, sans-serif;
  color: var(--tab-off-bg);
  font-size: 1.0em;
}
.main-header-info b {
  color: var(--tab-on-color);
  font-weight: bold;
}
.cloud-content-header {
  --title-border-color: #333;
  display: block;
  text-align: center;
  margin: 7px 15px;
  padding: 12px 10px 8px 10px;
  border-bottom: 1px dotted var(--title-border-color);
}
.cloud-container {
  display: block;
  padding: 10px 10px 20px 10px;
  background-color: #fff;
}
.occur-content-header {
  --title-border-color: #333;
  display: block;
  text-align: center;
  margin: 7px 15px;
  padding: 12px 10px 8px 10px;
  border-bottom: 1px dotted var(--title-border-color);
}
.occur-textline {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 3px;
}
.occur-textline span {
  padding: 5px 12px 3px 12px;
  border: 1px solid #cfcfe9;
}
.cloud-content-header,
.occur-content-header,
.piechart-content-header,
.bargraphic-content-header,
.treeview-content-header {
  --title-border-color: #333;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-end;
  text-align: left;
  height: 38px;
  margin: 7px 10px;
  padding: 0px 10px 5px 10px;
  border-bottom: 1px dotted var(--title-border-color);
}
#cloudContentHeader,
#occurContentHeader,
#pieChartContentHeader,
#barGraphicContentHeader,
#treeViewContentHeader {
  padding: 0px 0px 7px 0px;
}
.piechart-container,
.bargraphic-container,
.treeview-container {
  display: block;
  padding: 10px 10px 20px 10px;
  background-color: #fff;
}

/* -----------------------
Main Tabs Panels Container 
----------------------- */
.radio-tab {
  display: none;
}
.main-tabs-container {
  --tab-on-bg: #fff;
  --tab-on-color: #000049;
  --tab-on-color-op: rgba(0, 0, 73, 0.4);
  --tab-off-bg: #494949;
  --tab-off-color: #fff;
  --tab-hover-bg: #abd;
  --tab-hover-color: #003;
  display: flex;
  flex-direction: column;
  align-items: start;
  padding: 0 10px;
}
.main-tabs {
  display: flex;
  align-items: flex-end;
  flex-wrap: nowrap;
  font: bold 14px Arial;
  margin-left: 18px;
}
.main-tab {
  display: inline-block;
  cursor: pointer;
  margin: 0px 2px;
  padding: 12px 16px;
  background: var(--tab-off-bg);
  border: 1px solid var(--tab-off-bg);
  color: var(--tab-off-color);
  border-radius: 5px 5px 0px 0px;
  z-index: 2;
}
.main-tab:hover {
  background-color: var(--tab-hover-bg);
  border-color: var(--tab-hover-bg);
  border-bottom: 1px solid var(--tab-on-color);
  color: var(--tab-on-color)
}
.main-panels {
  position: relative;
  overflow: hidden;
  top: -1px;
  z-index: 1;
  width: 100%;
  min-height: 300px;
  background: var(--tab-on-bg);
  border-top: 1px solid var(--tab-on-color);
  border-bottom: 2px solid var(--tab-on-color-op);
  border-radius: 5px 5px 7px 7px;
  margin-bottom: 5px;
}
.main-panel {
  display: none;
  margin-top: 15px;
}
#mainTab-1:checked ~ .main-panels #mainPanel-1,
#mainTab-2:checked ~ .main-panels #mainPanel-2,
#mainTab-3:checked ~ .main-panels #mainPanel-3,
#mainTab-4:checked ~ .main-panels #mainPanel-4,
#mainTab-5:checked ~ .main-panels #mainPanel-5 {
  display: block;
}
#mainTab-1:checked ~ .main-tabs #mainTab-1-tab,
#mainTab-2:checked ~ .main-tabs #mainTab-2-tab,
#mainTab-3:checked ~ .main-tabs #mainTab-3-tab,
#mainTab-4:checked ~ .main-tabs #mainTab-4-tab,
#mainTab-5:checked ~ .main-tabs #mainTab-5-tab  {
  background: var(--tab-on-bg);
  color: var(--tab-on-color);
  border-top: 3px solid var(--tab-on-color);
  border-left: 1px solid var(--tab-on-color);
  border-right: 1px solid var(--tab-on-color);
  border-bottom: 1px solid var(--tab-on-bg);
  padding: 14px 16px;
}
/* -----------------------
Lang Tabs Panels Container 
----------------------- */
.lang-tabs-container {
  --lang-tab-on-bg: #fff;
  --lang-tab-on-color: #000049;
  --lang-tab-on-color-op: rgba(0, 0, 73, 0.4);
  --lang-tab-off-bg: #494949;
  --lang-tab-off-color: #fff;
  --lang-tab-hover-bg: #abd;
  --lang-tab-hover-color: #003;
  display: flex;
  flex-direction: column;
  align-items: start;
  padding: 0 10px;
}
.lang-tabs {
  display: flex;
  align-items: flex-end;
  flex-wrap: nowrap;
  justify-items: flex-end;
  font: bold 14px Arial;
  margin-left: 18px;
}
.lang-tab {
  display: inline-block;
  cursor: pointer;
  margin: 0px 2px;
  padding: 5px 18px;
  background: var(--lang-tab-off-bg);
  border: 1px solid var(--lang-tab-off-bg);
  color: var(--lang-tab-off-color);
  border-radius: 5px 5px 0px 0px;
  z-index: 2;
}
.lang-tab:hover {
  background-color: var(--lang-tab-hover-bg);
  border-color: var(--lang-tab-hover-bg);
  border-bottom: 1px solid var(--lang-tab-on-color);
  color: var(--lang-tab-on-color)
}
.lang-panels {
  position: relative;
  overflow: hidden;
  top: -1px;
  z-index: 1;
  width: 80%;
  min-height: 10px;
  background: var(--lang-tab-on-bg);
  border-top: 1px solid var(--lang-tab-on-color);
  border-radius: 5px 5px 7px 7px;
  margin-bottom: 5px;
}
.lang-panel {
  display: none;
  margin-top: 15px;
}
#langTab-1:checked ~ .lang-panels #langPanel-1,
#langTab-2:checked ~ .lang-panels #langPanel-2,
#langTab-3:checked ~ .lang-panels #langPanel-3,
#langTab-4:checked ~ .lang-panels #langPanel-4,
#langTab-5:checked ~ .lang-panels #langPanel-5 {
  display: block;
}
#langTab-1:checked ~ .lang-tabs #langTab-1-tab,
#langTab-2:checked ~ .lang-tabs #langTab-2-tab,
#langTab-3:checked ~ .lang-tabs #langTab-3-tab,
#langTab-4:checked ~ .lang-tabs #langTab-4-tab,
#langTab-5:checked ~ .lang-tabs #langTab-5-tab  {
  background: var(--lang-tab-on-bg);
  color: var(--lang-tab-on-color);
  border-top: 3px solid var(--lang-tab-on-color);
  border-left: 1px solid var(--lang-tab-on-color);
  border-right: 1px solid var(--lang-tab-on-color);
  border-bottom: 1px solid var(--lang-tab-on-bg);
  padding: 7px 18px;
}