.hd{display:none;}
		.rfsbtn{cursor: pointer;}
		.rfsbtn:hover {color: blue;}
		.rfsbtn:active {color: red;}	
		.rdone {}
		
		.opac {
			color:grey;
			opacity: 0.3;
		}
		.bl{font-weight:bold !important;}
		
		.cw{color:white !important;}
		.cg{color:#aaa !important;}
		.gld { color: #ff6600 !important; }
		.red { color: #B80F0A !important; }
		.blue { color: #00284d !important; }
		.yel { color: #FBC433 !important; } 
		.ppl { color: #F2D3C1 !important; } 	
		
		.byel{background-color:#FBC433 !important;}
		.bppl{background-color:#F2D3C1 !important;}
		.blg{background-color:#eee !important;}
		.bg{background-color:#444 !important;}
		.bb{background-color:black !important;}

		.inv { 
			filter: invert(50%); 
		}

		.compact{ padding:0; margin:0; }
		.toright{float:right;}
		.toleft{float: left;}
		.clear{clear:both;}
		
		.space{margin:5px;}
		.spacel{margin-left:5px;}
		.tocenter{text-align: center; margin-left:auto; margin-right:auto;}
		.txDash{ color: rgba(128, 128, 128, 0.5); } 
		
		/*1 rem = 16px*/
		.tRtl1 { font-size: 1.5rem !important;}
		.tRtl2 { font-size: 1.1rem !important;}
		.tRtl3 { font-size: 0.9rem !important;}
		
		.tR1 td { font-size: 2.0rem; font-weight: bold;}
		.tR2 td { font-size: 1.75rem; }
		.tR3 td { font-size: 1rem; }

		.txright {text-align: right !important;}
		.txleft {text-align: left !important;}
		.jst{ text-align: justify; text-justify: inter-word; }	
		
		.pcn5 { width: 5%; }
		.pcn24 { width: 24%; }
		.pcn33 { width: 33%; }
		.pcn45 { width: 45%; }
		.pcn50 { width: 50%; }
		.full { width: 100%; }

		.by3 td { width: 33.33%; text-align: center; }
		.by5 td { width: 20%; text-align: center; }
		.by6 td { width: 16.66%; text-align: center;}
		.by7 td { width: 14.28%; text-align: center;}
		.by8 td { width: 12.5%; text-align: center;}
		.by11 td { width: 9%; text-align: center;}
		.res { border-collapse: collapse; }
		.res tr td { border: 1px solid #ddd; }
		
		.sz30{ width: 30px; height: 30px; }
		.sz25{ width: 25px; height: 25px; }
		
		
		.pd1{padding:0px 15px;}
		.pd0{padding:2px 15px;}
		.pP1 { background: #ffff00 url('//h-io.com/_views/_shared/img/bar1.png') no-repeat right top;}
		.pP2 { background: #ff0000 url('//h-io.com/_views/_shared/img/bar2.png') no-repeat right top; color: white;}
		.pP3 { background: #2a1f55 url('//h-io.com/_views/_shared/img/bar3.png') no-repeat right top; color: white;}
		.pP4 { background: #0098e6 url('//h-io.com/_views/_shared/img/bar4.png') no-repeat right top; color: white;}
		.pP4j { background: #5f0000 url('//h-io.com/_views/_shared/img/bar4.png') no-repeat right top; color: white;}
		.pP5 { background: #99cc00 url('//h-io.com/_views/_shared/img/bar5.png') no-repeat right top; }
		.pP6 { background: #99ddff url('//h-io.com/_views/_shared/img/bar6.png') no-repeat right top; }	
		.pP7 { background: #004d00 url('//h-io.com/_views/_shared/img/bar7.png') no-repeat right top; color: white;}	
		.pP15{ background: #5F282A url('//h-io.com/_views/_shared/img/bar15.png') no-repeat right top; color: #f7e788;}
		.pP16{ background: #425566 url('//h-io.com/_views/_shared/img/bar16.png') no-repeat right top; color: white;}	
		.pP17{ background: #234E67 url('//h-io.com/_views/_shared/img/bar17.png') no-repeat right top; color: white;}			
		
		
		/* mobile */	
		@media (max-width: 767px) {
			
			.container-fluid {
				--bs-gutter-x: 0.0rem; /* container-fluid spacing */
			}

			.row {
				--bs-gutter-x: 0.0rem;
				--bs-gutter-y: 0.0rem;
			}			
			
			.rs{
				position: relative; 
				border-radius: 1px;
				border: 1px solid #ddd;
				box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
				overflow: hidden;
				margin-bottom: 2px;
			}
		}

		/* desktop */
		@media (min-width: 768px) {
			
			.container-fluid {
				--bs-gutter-x: 0.5rem; /* container-fluid spacing */
			}

			.row {
				--bs-gutter-x: 0.2rem;
				--bs-gutter-y: 0.2rem;
			}		
			
			.rs{
				position: relative; 
				border-radius: 4px;
				border: 1px solid #ddd;
				box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
				overflow: hidden;
				margin-bottom: 5px;
			}
			
		
		}
		
		/* wide desktop */
		@media (min-width: 1200px) {
			
			.cont{
			  max-width: 1200px;
			  margin: auto;
			  padding: 5px;
			  border: 1px solid white;
			  border-radius: 4px;
			  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
			  background-color:white;
			}
			
			body {
				background-color:#eee;
			}			
			
		}
		
		
		.rs::before {
			xbackground-color: white;
		}	
		
		/*custom bootstrap param*/
		.input-group, .btn {
			--bs-btn-color: white;
			--bs-btn-border-color: white;
			--bs-btn-hover-color: black;
			--bs-btn-hover-bg: white;
			--bs-btn-hover-border-color: white;

			--bs-border-radius: 0;
			--bs-border-radius-sm: 0rem;
			--bs-border-radius-lg: 0rem;
			--bs-border-radius-xl: 0rem;
			--bs-border-radius-xxl: 0rem;
		}
		
		.loader {
			border-radius: 4px;
			border: 1px solid #ddd;
			box-shadow: 0 5px 10px rgba(128, 128, 128, 0.5);
			overflow: hidden;
			position: fixed;
			top: 10%;
			left: 50%;
			transform: translateX(-50%);
			width: 200px;
			color:white;
			visibility:hidden;
			background-color: rgba(128, 128, 128, 0.8);
		}
		
		.title-bar {
			margin-top: 60px;
			padding-top: 12px;
			padding-left: 10px;
			padding-right: 10px;
			margin-bottom: 20px;
			border-bottom: 2px solid #888;
			box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
			background-color: #A0153E;
			color: white;
		}
		
        .rspin {
            display: inline-block;
            animation: spin 2s linear infinite;
			margin-left: 10px;
        }

        @keyframes spin {
            from { transform: rotate(360deg); }
            to { transform: rotate(0deg); }
        }