HR{
  border: 1px dashed #7F9EE6;
}
#LogoTitleID,
#SelectLogoID {
min-width:100%;
min-height:100%;
align-content:center;
}
#NetMapID,
#NetBestID,
#NetNumberID,
#PatientNameGivenID,
/* #VirtNameGivenID, */
#SelectPatientID {
width:72px;
min-height:2px;
font-weight:600;
font: size 13px;
}
#FavIconImageID{
position: fixed;
top: 0;
left: 0;
width:24px;
height:24px;
}
#TerminalID {
  width:104px;
  margin-left:-24px;
}
#WebFormID,
#WebNoID,
#EmailShareID,
#SMSID,
#WeChatID,
#TmeID img,
#ViberID img,
#WhatsappID img,
#XtwitterID img,
#ToolID,
#StatisticsID {
  width:20px;
  height:20px;
  display:table;
  padding:2px;
  cursor:pointer;
}
#SiteSlectID,
#EmailCommnentID,
#PhoneNumbID,
#WACommnentID,
#XCommnentID,
#WeChatCommentID,
#ViewReportID,
#ViewStatisticsID {
  text-align: left;
  width:100%;
}
#QrImgID{
  width: 32px;
  height: 32px;
  background-color: #FFFFFE;
}
#QrImgID:focus {
  width: 160px;
  height: 160px;
  padding:2px;
  margin-left:-64px;
  transition: 200ms linear;
	cursor: none; /* Visual feedback */
}
#RANGEINPUTID{
	-webkit-appearance: none;
	appearance: none;
	width: 300px;
  height: 4px;
	padding: 0;
	background: #005070;
	border: none;
	outline: none;
}
#RANGEINPUTID::-webkit-slider-thumb {
  -webkit-appearance: none;
	appearance: none;
  width: 14px;
  height: 14px;
  background: #CCCCCC;
  border-radius: 50%;
}
#RANGEINPUTID::-webkit-slider-runnable-track {
  height: 8px;
  background: #488096;
}
#RANGEINPUTID::-moz-range-thumb {
  width: 14px;
  height: 14px;
  background: #CCCCCC;
}
#RANGEINPUTID::-moz-range-track {
  height: 8px;
  background: #488096;
}
#RANGEINPUTID::-ms-track {
  height: 8px;
  background: #488096;
  border: none;
  color: transparent; /* Applies to Edge/IE */
}
#RANGEINPUTID:hover,
#RANGEINPUTID:focus {
  opacity: 0;
}
#TextAreaID {
	display: none;
	width: 96%;
	height: 80px;
	text-align: left;
	/* margin-top: 10px; */
}
#StatContainerID {
	text-align: left;
	width: 100%;
}
.anyhover:hover{
background-color: #004060;
}
optgroup {
font-weight:bold;
background-color: #005070;
color: #FFFFFE;
}
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
/* Range Input Styles (Scoped to Avoid Conflicts) */
.inputs[type="range"] {
  background-color: #FFFF0E;
  border: solid 1px #005070;
  border-radius: 8px;
  width: 100%;
  height: 8px;
  max-width: 380px;
}
.inputs[type="range"]:hover {
  opacity: 1; /* Ensure visibility on hover */
}

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus,
input:-webkit-autofill:active {/* Autofill Fix */
  opacity: 1 !important; /* Ensure autofilled input is visible */
  -webkit-text-fill-color: white !important; /* Match text color to your design */
  background-color: #005070 !important; /* Match background color */
  border: 1px solid white !important;
  transition: background-color 5000s ease-in-out 0s; /* Prevent autofill flash */
}
/* Autofill for non-WebKit browsers */
input:autofill,
input:autofill:hover, 
input:autofill:focus,
input:autofill:active {
    box-shadow: none !important;
    -webkit-text-fill-color: white !important;
    background-color: #005070 !important;
}
/* Placeholder Styles */
.force-opaque::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #00B716;
  opacity: 1; /* Firefox */
}
::-ms-input-placeholder { /* Microsoft Edge */
 color: #00B716;
}
.rounded {
  border-radius: 5px 10px 5px 10px; /* top-left, top-right, bottom-right, bottom-left */
  border: 1px solid white; 
  color: white;
  background-color: #004A6A;
  font-size: 12px;
  text-align: center;
  min-width: 56px;
  width: 96px;
  margin-top: 0;
  white-space: normal;
  appearance: none;
  transition: background-color 0.1s linear, color 0.1s linear;
}

input.rounded:hover,
select.rounded:hover {/* Hover Styles for Rounded Inputs */
  background-color:#FFFFFE; /* Light background on hover */
  color:#004060; /* Dark text on hover */
}

.button{
  cursor:pointer;
}
TD{ 
  vertical-align:middle;
  font-family:Bourbon;
  font-size:14px;
  font-weight:500;
  color:white;
}
/* @counter-style space-counter{
	symbols:'\1F680' '\1F6F8' '\1F6F0' '\1F52D';
	suffix:" ";
} */
SELECT option[value="T1"],
SELECT option[value="110"],
SELECT option[value="120"],
SELECT option[value="130"],
SELECT option[value="140"],
SELECT option[value="150"],
SELECT option[value="160"],
SELECT option[value="170"],
SELECT option[value="180"],
SELECT option[value="1100"],
SELECT option[value="1200"],
SELECT option[value="1300"],
SELECT option[value="1400"]{
  font-weight: bold !important;
  color:red !important;
}
.dborder{
	border-radius:5px 10px;
	border: solid 2px #FFFFFE !important;
	min-width: 22px;
  width: 48px;
  vertical-align: middle;
	font-weight:600;
  text-align: center !important;
}
.rborder{
	border-radius:0 0 0 10px;
	border: solid 2px #FFFFFE !important;
	border-right: none !important;
	min-width:22px;
  width:22px;
  height:32px;
	font-size:12px;
	font-weight:700;
}
.lborder{
	border-radius:0 10px 0 0;
	border: solid 2px #FFFFFE !important;
	border-left: none !important;
	min-width:22px;
  width:26px;
  height:32px;
	font-size:13px;
	font-weight:700;
	font-family: Bourbon,
	/* 1 */ -apple-system, BlinkMacSystemFont,
	/* 2 */ "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
	/* 3 */ "Helvetica Neue", sans-serif;
}
.helptop{
  width:368px;
  height:200px;
  margin-left:-88px;
  margin-top:4px;
  font-weight:500;
  font-family: Bourbon,
	/* 1 */ -apple-system, BlinkMacSystemFont,
	/* 2 */ "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
	/* 3 */ "Helvetica Neue", sans-serif;
  text-align:left;
  padding:2px;
  border: solid 1px #FFFFFF;
  overflow-x:hidden;
  overflow-y:auto;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,8);
  z-index: 1;
  display: inline-block; /*consistent across browsers*/
}
.helphide{
  display:none;
}
.marquee {
  max-width: 360px;
  white-space: nowrap;
  overflow: hidden;
  box-sizing: border-box;
}
.marquee span {
  display: inline-block;
  padding-left: 0%;
  transition: transform 0.1s linear; /* Smooth transition when not hovering*/
}
.marquee span:hover {
	animation: marquee 24s linear infinite;
	transition: none; /* Disable transition during animation */
	font-weight:bold;
	padding-left: 80%;
}
.marquee span:not(:hover){
	font-weight: normal;
	font-style: normal;
}
@keyframes marquee {
  0%   {transform:translate(0,0);}
  100% {transform:translate(-100%,0);}
}
.dropbtn {
  background-color:#005070;
  color: white;
  padding: 2px;
  width: 56px;
  height:18px;
  border: none;
  text-align:center;
  cursor: pointer;
}
.dropdown {
  position: relative;
  display: inline-block;
  font-size:16px;
}
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #005070;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,8);
  padding:2px;
  z-index: 1;
}
.dropdown-content DIV:hover {background-color:#005070;}
.dropdown:hover .dropdown-content {display:inline-block;} /*consistent across browsers*/
.dropdown:hover .dropbtn {background-color:#FFFFFE;color:#005070;}

.fixed-top {
  background-color : #005070;
  color : white;
  padding: 4px;
  position : fixed;
  border-radius: 5px 10px;
  top : 8px;
  left : 8px;
  min-width : 56px;
  width: 256px;
  justify-content: left;
  align-content :left;
  text-align: left;
  font-size : 14px;
  height : 24px;
  box-shadow : 0px 8px 16px 0px rgba(0,0,0,8);
  z-index : 1;
}
#ImageContainerID {
  position: relative; /* Ensures FloatVID is positioned relative to this container */
}
#FloatVID {
	background-color: #0080A0;
	width: 64px;
	height: 32px;
	/* top:120px; */
	/* left:300px; */
  position:absolute;
  z-index:10; /* Ensures it appears above other elements */
	opacity:0.25; /* Firefox */
}
.switch {position: relative; display: inline-block; width: 40px; height: 24px;border-radius: 12px;border: 1px solid silver; }  /* size of switch */
.switch input {visibility: hidden;}
.slider {position: absolute;top:0;left:0;right:0;bottom:0;background-color:#000000;color:#000000;border-radius:24px;}  /* switch radius */
.slider:before {
	font-family: "Arial", "Segoe UI Symbol", "Noto Color Emoji", sans-serif;
	position: absolute; content:"✘";text-indent:4px;height:19px;width:19px;left:2px;bottom:2px;background-color:#39B7FF;color:#000000;-webkit-transition: 0.3s; transition: 0.4s; border-radius: 9px;} /* size/position of slider*/
input:checked+.slider:before {background-color:#00FF00;color:#000000;content:"✔";text-indent:4px;-webkit-transform:translateX(32px); -ms-transform:translateX(16px); transform:translateX(16px);}  /* shift left<->right */
