:root {
  --color_1: #032EA1;
  /*#C8102E; /*Vietnam red*/ 
  /*#001489; /* dark blue */
  /*#FFFFFF; /* white */
  /*#012169;/*dark blue*/
  /*#009739;/*green*/
  --color_2: #032EA1;
  /*--color_2: #6CACE4; /* sky blue */
  --color_3:  #032EA1;/*Cambodia blue*/
  /*#FFCD00; /*Vietnam yellow*/
  --font_color: #FFFFFF; 
  --bottom_top_color: #032EA1;
  /*#000000; /* black */
  /*#FFB81C; /* yellow */
}

/* Navbar container */
.navbar {
  overflow: hidden;
  /*background-color: #52BE80;*/
  font-family: Arial;
  margin: 0 px;
}

/* Links inside the navbar */
.navbar a {
  float: left;
  font-size: 16px;
  color: var(--font_color);
  text-align: center;
  text-decoration: none;
}

/* The dropdown container */
.dropdown {
  float: left;
  overflow: hidden;
}

/* Dropdown button */
.dropdown .dropbtn {
  font-size: 16px;
  border-style: none none none none ;
  border-color: #7D4016;
  border-width: 4px;
  /*outline: none;*/
  color: var(--font_color);
  padding-top: 13.5px;
  padding-bottom: 13.5px;
  padding-left: 7px;  
  border-radius: 0px; /* Rounded corners */
  background-color: var(--color_1);
  font-family: inherit; /* Important for vertical align on mobile phones */
  /*margin: 0; /* Important for vertical align on mobile phones */  
  margin-right: 20px;
}

/* Smaller Dropdown button (not extensible) */
.dropbtn_small {
  font-size: 16px;
  border-style: none none none none ;
  border-color: #7D4016;
  border-width: 4px;
  color: var(--font_color);
  padding-top: 13.5px;
  padding-bottom: 13.5px;
  padding-left: 7px;
  border-radius: 0px; /* Rounded corners */
  background-color: var(--color_1);
  font-family: inherit; /* Important for vertical align on mobile phones */
  margin-right: 20px; /* Important for vertical align on mobile phones */  
}

/* Add a red background color to navbar links on hover */
.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: grey;
}

/* Dropdown content (hidden by default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
//  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

/* Add a grey background color to dropdown links on hover */
.dropdown-content a:hover {
  background-color: #ddd;
}

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

#main{
	max-width: 900px;
	margin: auto;
}

#image img{
	max-width: 100%;
	margin-top: 16px;
	margin-bottom: 16px;
}

iframe{
	width: 100%;
	height: 500px;
}

body{
  font: 15px/1.5 Arial, Helvetica,sans-serif;
  padding:0;
  margin:0;
  background-color:#f4f4f4;
}

body a{
  color:#000000;
  target:"_blank";
}

/* Header */
.header_title{
  width:90%;
  margin:auto;
  overflow:hidden;
}

header{
  background: var(--color_2);
  color:#ffffff;
  padding-top:30px;
  min-height:70px;
  /*border-bottom:#e8491d 3px solid;*/
  /*border-bottom:#C8102E 3px solid;*/
}

header h1{
  margin:0;
}

header .current, header .highlight{
  /*color: #17202A;*/
  color: #000000;
  /*color: #C8102E;*/
  font-weight:bold;
}

/* Footer */
footer{
  padding:6px;
  margin-top:10px;
  color:#ffffff;
  background-color: var(--color_2);
  text-align: center;
}

/* table styling*/
table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}

/* back to top button */
#myBtnTop {
  /*display: none; /* Hidden by default */
  width: 110px;
  position: fixed; /* Fixed/sticky position */
  bottom: 70px; /* Place the button at the bottom of the page */
  right: 20px; /* Place the button 30px from the right */
  z-index: 99; /* Make sure it does not overlap */
  border: none; /* Remove borders */
  outline: none; /* Remove outline */
  background-color: var(--bottom_top_color); /* Set a background color */
  color: white; /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  padding: 15px; /* Some padding */
  border-radius: 10px; /* Rounded corners */
  font-size: 14px; /* Increase font size */
}

#myBtnTop:hover {
  background-color: #555; /* Add a dark-grey background on hover */
}

/* back to top button */
#myBtnBottom {
  /*display: none; /* Hidden by default */
  width: 110px;
  position: fixed; /* Fixed/sticky position */
  bottom: 15px; /* Place the button at the bottom of the page */
  right: 20px; /* Place the button 30px from the right */
  z-index: 99; /* Make sure it does not overlap */
  border: none; /* Remove borders */
  outline: none; /* Remove outline */
  background-color: var(--bottom_top_color); /* Set a background color */
  color: white; /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  padding: 15px; /* Some padding */
  border-radius: 10px; /* Rounded corners */
  font-size: 14px; /* Increase font size */
}

#myBtnTopBottom:hover {
  background-color: #555; /* Add a dark-grey background on hover */
}

/* button for jump on sides */
.pageButton {
  border: none; /* Remove borders */
  outline: none; /* Remove outline */
  background-color: var(--bottom_top_color); /* Set a background color */
  color: black; /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  padding: 15px; /* Some padding */
  border-radius: 10px; /* Rounded corners */
  font-size: 14px; /* Increase font size */
}

/* nice box*/
.box {
	display: inline-block;
	border: none; /* Remove borders */
	padding: 15px; /* Some padding */
	margin: 15px;
	border-radius: 10px; /* Rounded corners */
	font-size: 14px; /* Increase font size */
}
  
  

body, table, input, select, textarea {

}


.graph {
	margin-bottom:1em;
  font:normal 100%/150% arial,helvetica,sans-serif;
}

.graph caption {
	font:bold 150%/120% arial,helvetica,sans-serif;
	padding-bottom:0.33em;
}

.graph tbody th {
	text-align:right;
}

@supports (display:grid) {

	@media (min-width:32em) {

		.graph {
			display:block;
      		width:90%; 
            height:300px;
            margin-bottom:4cm;
            margin-top:1cm;
            margin-left:1cm;
      
		}

		.graph caption {
			display:block;
		}

		.graph thead {
			display:none;
		}

		.graph tbody {
			position:relative;
			display:grid;
			grid-template-columns:repeat(auto-fit, minmax(2em, 1fr));
			column-gap:5%;
			align-items:end;
			height:100%;
			/*margin:3em 0 1em 2.8em;
			padding:0 1em;*/
			border-bottom:15px solid rgba(0,0,0,0.5);
			background:repeating-linear-gradient(
				180deg,
				rgba(170,170,170,0.7) 0,
				rgba(170,170,170,0.7) 1px,
				transparent 1px,
				transparent 20%
			);
		}

		.graph tbody:before,
		.graph tbody:after {
			position:absolute;
			left:-3.2em;
			width:2em;
			text-align:right;
			font:bold 80%/120% arial,helvetica,sans-serif;
		}

		.graph tbody:before {
			content:"50";
			top:-0.6em;
		}
		
		.graph tbody:after {
			content:"0";
			bottom:-0.6em;			
		}

		.graph tr {
			position:relative;
			display:block;
		}

		.graph tr:hover {
			z-index:999;
		}

		.graph th,
		.graph td {
			display:block;
			text-align:center;
		}

		.graph tbody th {
			position:absolute;
			bottom:-4em;
			left:0;
			width:100%;
			outline: none;
			font-weight:normal;
			text-align:center;
	        white-space:nowrap;
			text-indent:0;
			border: none;
		}

		.graph tbody th:after {
			content:"";
		}

		.graph td {
			width:100%;
			height:100%;
			background:#032EA1;
			border-radius:0.3em 0.3em 0 0;
			transition:background 0.5s;
		}
		
		.graph td span {
			overflow:hidden;
			position:absolute;
			left:50%;
			top:50%;
			width:4em;
			padding:0.5em 0.2em;
			margin:-0.5em 0 0;
			font:normal 85%/120% arial,helvetica,sans-serif;
/* 			background:white; */
/* 			box-shadow:0 0 0.25em rgba(0,0,0,0.6); */
			font-weight:bold;
			opacity:1;
			transition:opacity 0.5s;
 		    color:white;
		}
  


	} /* min-width:32em */

} /* grid only */