/* begin support highcharts in dark mode */
@media (prefers-color-scheme: dark) { 
    :root {
        --background-color: #1F2227;
        --text-color: #c0c0c0;
        --hilight-color: #8db4d6;
    }
    .highcharts-color-0 {
        fill: #0460ba;
        stroke: #0460ba;
    }
    .highcharts-color-1 {
        fill: #9696ab;
        stroke: #9696ab;
    }
}
@media screen {
	.highcharts-background {
	    fill: var(--background-color);
	}
	.highcharts-container text {
	    fill: var(--text-color);
	}
	.highcharts-subtitle,
	.highcharts-credits,
	.highcharts-axis-title {
	    fill-opacity: 0.7;
	}
	.highcharts-grid-line {
	    stroke: var(--text-color);
	    stroke-opacity: 0.2;
	}
	.highcharts-tooltip-box {
	    fill: var(--background-color);
	}
	.highcharts-column-series rect.highcharts-point {
	    stroke: var(--background-color);
	}
}

/* end support highcharts in dark mode */

@media print {
	img {visibility:hidden;}
	button {visibility:hidden;}
	table, th, td { 
		table-layout: fixed;
		border: 0px;width:100%;margin:0 auto; ;text-align:left; font-family: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu",
	    "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji","Segoe UI Symbol", "Noto Color Emoji"
	}
	th {border-bottom:solid 1px;font-size:12pt;}
	td {font-size:10pt}
	h4 {font-size:14pt; font-family: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu",
	    "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji","Segoe UI Symbol", "Noto Color Emoji"; 
	    margin-top:0px; padding-top:0px; margin-bottom:0px;}
	h5 {font-weight:normal; font-size:12pt; font-family: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu",
	    "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji","Segoe UI Symbol", "Noto Color Emoji"; 
	    margin-top:0px; padding-top:0px;; margin-bottom:0px;}
	svg {max-width:60%}
	table th.toolHeader:nth-child(1) { display:none; }
	table td.iconDelete:nth-child(1) { display:none; }
	table td.iconDelete:nth-child(2) { display:none; }
	table th.toolHeader:nth-child(2) { display:none; }
	table td.iconEdit:nth-child(2) { display:none; }
	table td.iconDownload:nth-child(1) { display:none; }
	.navbar > div > h5 {display:none}
	.navbar > div > p {display:none}
	.navbar > div > svg {display:none}
	hgroup > h5 {margin-bottom:10px}
	article > svg {display:none}
	form { display:none; }
}

@media screen {
	
	a[target="_blank"]::after {
		content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='rgb(115, 130, 140)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3E%3C/path%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cline x1='10' y1='14' x2='21' y2='3'%3E%3C/line%3E%3C/svg%3E");
		margin: 0px 3px 0px 5px;
	}
	a.download::after {
		content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='rgb(115, 130, 140)' class='bi bi-download' viewBox='0 0 16 16'%3E%3Cpath d='M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z'/%3E%3Cpath d='M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z'/%3E%3C/svg%3E");
		margin: 0px 3px 0px 5px;
	}

	input[type=date]:focus, input[type=text]:focus, input[type=password]:focus, textarea:focus, select:focus {box-shadow: 0 0 15px rgba(81, 203, 238, 1);}
	table {margin:0px;}
	table th {font-weight: bold;}
	table th:hover { cursor: pointer;}
	hgroup > h5 {font-weight:normal;}
	hgroup {padding-bottom:20px;}
	button {width:35%;margin-right:5px;margin-top:0px;margin-bottom:5px;display:inline;}
	@media only screen and (max-width: 568px) { 
		button {width:100%;} 
	}
	@media only screen and (max-width: 539px) { 
		th.colresp1 {display:none;visibility:hidden;} 
		th.colresp2 {display:none;visibility:hidden;} 
		td.colresp1 {display:none;visibility:hidden;} 
		td.colresp2 {display:none;visibility:hidden;} 
	}
	@media only screen and (max-width: 568px) { 
		th.colresp1 {display:none;visibility:hidden;} 
		td.colresp1 {display:none;visibility:hidden;} 
	}
	@media only screen and (max-width: 1023px) { 
		th.colresp1 {display:none;visibility:hidden;} 
		td.colresp1 {display:none;visibility:hidden;} 
	}
	.iconDelete { cursor: pointer; } .iconDelete > svg {height: 20px; pointer-events: none;}
	.iconEdit { cursor: pointer; } .iconEdit > svg {height: 20px; pointer-events: none; }
	.iconSearch { cursor: pointer; } .iconSearch > svg {height: 20px; pointer-events: none; }
	.iconDownload { cursor: pointer; } .iconDownload > svg {height: 20px; pointer-events: none; }
	.toolHeader {width:3%; pointer-events:none;} 
	.progressHeader {display:inline; float:right; margin-right:5px;}
	.menuButton {text-align:center; cursor:pointer;}
	.menuButton img {width:40px; padding-top:10px;}
	.menuButton p {font-size:12pt;margin-bottom:0px}
	 hgroup {margin-bottom:0px}
	 article > svg {display:inline; float:right; margin-right:5px; cursor:pointer; height: 40px;}
}

@media screen {	

	.flex-container {
	  display: flex;
	  flex-wrap: wrap;
	  width: 80%;
	  margin: auto;
	}
	
	.flex-container > div {
	  width: 100px;
	  margin: auto;
	  text-align: center;
	  cursor: pointer;
	}
	
	.flex-container > div > svg {width: 40px;}
	.flex-container > div > p { font-size: 12pt;}

	.navbar {
	  overflow: hidden;
	  background-color: var(--card-background-color); /* #fafafa; */
	  border-bottom:1px solid #7C7575;
	  position: fixed;
	  top: 0;
	  width: 100%;
	  height: 85px;
	  padding-top:10px;
	  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	}
	.navbar > div { margin: auto }
	.navbar > div > h5 {margin-bottom:0px;}
	.navbar > div > img {display:inline; float:right; cursor:pointer; margin-right:8px;}
	.navbar > div > svg {display:inline; float:right; cursor:pointer; margin-right:8px;}
}

@media (min-width: 320px) {
  .navbar > div { width: 90%; }
  .navbar > div > img { height: 32px; }
  .navbar > div > svg {height: 32px;}
  article { margin-top: 80px; } 
}
@media (min-width: 576px) {
  .navbar > div { width: 510; }
  .navbar > div > img {height: 35px;}
  .navbar > div > svg {height: 35px;}
}
@media (min-width: 768px) {
  .navbar > div { width: 700px; }
  .navbar > div > img {height: 35px;}
  .navbar > div > svg {height: 35px;}
}
@media (min-width: 992px) {
  .navbar > div { width: 920px; }
  .navbar > div > img {height: 40px;}
  .navbar > div > svg {height: 40px;}
}
@media (min-width: 1200px) {
  .navbar > div { width: 1130px; }
  .navbar > div > img {height: 40px;}
  .navbar > div > svg {height: 40px;}
}