:root {
	--ThemeColor: rgb(8, 91, 132);
	--ThemeColor80: rgba(8, 91, 132, 0.8);
	--ThemeColor60: rgba(8, 91, 132, 0.6);
	--ThemeColor40: rgba(8, 91, 132, 0.4);
	--ThemeColor20: rgba(8, 91, 132, 0.2);
	--Disabled80: rgba(80, 80, 80, 0.8);
	--Disabled60: rgba(80, 80, 80, 0.6);
	--Disabled40: rgba(80, 80, 80, 0.4);
	--Disabled20: rgba(80, 80, 80, 0.2);
	--Black80: rgba(20, 20, 20, 0.8);
	--Black60: rgba(20, 20, 20, 0.6);
	--Black40: rgba(20, 20, 20, 0.4);
	--Black20: rgba(20, 20, 20, 0.2);
	--Red80:  rgba(220, 0, 0, 0.8);
	--Red60:  rgba(220, 0, 0, 0.6);
	--Red40:  rgba(220, 0, 0, 0.4);
	--Red20:  rgba(220, 0, 0, 0.2);
	--Grey80: rgba(135, 135, 135, 0.8);
	--White95: rgba(250, 250, 250, 0.8);
	--White80: rgba(250, 250, 250, 0.8);
	--BasicFontColor: Black;
	--WhiteFontColor: Gainsboro;
	--BlackFontColor: rgba(20, 20, 20, 0.9);
	--WhiteBackground : rgba(255, 255, 255, 1);
	--WhiteBackground80 : rgba(245, 245, 245, 0.8);
	--WhiteBackground60 : rgba(245, 245, 245, 0.6);
	--WhiteBackground40 : rgba(245, 245, 245, 0.4);
	--WhiteBackground20 : rgba(245, 245, 245, 0.2);
	--FontScale : 1;
	font-size: 2vmax;
	font-family: Roboto Regular;
}
body.DarkMode {
	--WhiteBackground : rgb(50, 50, 50);
	--BasicFontColor : AliceBlue;
	--InputOpacity: 0.9;
	--Black80: rgba(50, 50, 50, 0.8);
	--Black60: rgba(50, 50, 50, 0.6);
	--Black40: rgba(50, 50, 50, 0.4);
	--Black20: rgba(50, 50, 50, 0.2);
	--Disabled80: rgba(250, 250, 250, 0.8);
	--Disabled60: rgba(250, 250, 250, 0.6);
	--Disabled40: rgba(250, 250, 250, 0.4);
	--Disabled20: rgba(250, 250, 250, 0.2);
}
@media only screen and (max-width: 768px) {
	:root {
		--FontScale : 1.6;
	}
}

body {
	margin: 0; padding: 0;
	background-color: var(--WhiteBackground);
	color: var(--BasicFontColor);
}

/* ------ Button ----- */
button {
	border: none;
	filter: opacity(95%);
	border-radius: .4vmax;
}
button:hover,
button:focus {
	filter: contrast(150%) opacity(100%) drop-shadow(.01vmax .01vmax .1vmax var(--ThemeColor));
	cursor: pointer;
}
label {
	color: var(--BlackFontColor`);
}
.SmallBtn {
	font-size: 1em;
	padding: .5em .5em;
	box-shadow: .01em .01em .3em .01em rgba(0,0,0,0.15);
    -webkit-box-shadow: .01em .01em .3em .01em rgba(0,0,0,0.15);
    -moz-box-shadow: .01em .01em .3em .01em rgba(0,0,0,0.15);
}
.MediumBtn {
	font-size: 1em;
	padding: .5em 1em;
	box-shadow: .01em .01em .3em .01em rgba(0,0,0,0.15);
    -webkit-box-shadow: .01em .01em .3em .01em rgba(0,0,0,0.15);
    -moz-box-shadow: .01em .01em .3em .01em rgba(0,0,0,0.15);
}
.LargeBtn {
	font-size: 1.4em;
	padding: .5em .8em;
	box-shadow: .01em .01em .3em .01em rgba(0,0,0,0.15);
    -webkit-box-shadow: .01em .01em .3em .01em rgba(0,0,0,0.15);
    -moz-box-shadow: .01em .01em .3em .01em rgba(0,0,0,0.15);
}
.BlueBtn {
	background-color: DodgerBlue;
	color: var(--WhiteFontColor);
}
.GreenBtn {
	background-color: ForestGreen;
	color: var(--WhiteFontColor);
}
.OrangeBtn {
	background-color: OrangeRed;
	color: var(--WhiteFontColor);
}
.YellowBtn {
	background-color: Yellow;
	color: var(--BlackFontColor);
}
.RedBtn {
	background-color: IndianRed;
	color: var(--WhiteFontColor);
}
.BlackBtn {
	background-color: var(--Black80);
	color: var(--WhiteFontColor);
}
.MobileAddDataBtn {
	position: absolute;
	background-color: inherit;
	bottom: 9vh; right: 5vw;
	font-size: 5vmax;
	background-color: Green; color: var(--WhiteBackground);
	border-radius: 50%;
}
.ViewBtn:before {
	font-family: "Font Awesome 6 Free"; font-weight: 900;
	content: "\f06e";
}
.DeleteBtn:before {
	font-family: "Font Awesome 6 Free"; font-weight: 900;
	content: "\f1f8";
}
.PrintBtn:before {
	font-family: "Font Awesome 6 Free"; font-weight: 900;
	content: "\f02f";
}
.SearchBtn:before {
	font-family: "Font Awesome 6 Free"; font-weight: 900;
	content: "\f002";
}
.EditBtn:before {
	font-family: "Font Awesome 6 Free"; font-weight: 900;
	content: "\f044";
}
.ActionBtn:before {
	font-family: "Font Awesome 6 Free"; font-weight: 900;
	content: "\f085";
}
.EnableBtn:before {
	font-family: "Font Awesome 6 Free"; font-weight: 900;
	content: "\f058";
}
.DisableBtn:before {
	font-family: "Font Awesome 6 Free"; font-weight: 900;
	content: "\f057";
}
.ExclamationBtn:before {
	font-family: "Font Awesome 6 Free"; font-weight: 900;
	content: "\f06a";
}
.CheckBtn:before {
	font-family: "Font Awesome 6 Free"; font-weight: 900;
	content: "\f00c";
}
.CrossBtn:before {
	font-family: "Font Awesome 6 Free"; font-weight: 900;
	content: "\f00d";
}

.fa-triangle-exclamation {
	color: yellow !important;
	filter: drop-shadow(0.05vmax 0.05vmax var(--Black40));
}

/* ------ Input ----- */
.ClassicInput,
.ClassicSelect {
	background-color: white; color: var(--BlackFontColor);
	opacity: 0.8;
	border: none; outline: none;
	box-shadow: .01em .01em .3em .01em rgba(0,0,0,0.15);
    -webkit-box-shadow: .01em .01em .3em .01em rgba(0,0,0,0.15);
    -moz-box-shadow: .01em .01em .3em .01em rgba(0,0,0,0.15);
}
.ClassicInput:hover,
.ClassicSelect:hover  {
	opacity: 1;
	box-shadow: .04em .04em .3em .04em var(--ThemeColor40) !important;
    -webkit-box-shadow: .04em .04em .3em .04em var(--ThemeColor40) !important;
    -moz-box-shadow: .04em .04em .3em .04em var(--ThemeColor40) !important;
}
.WhiteInput {
	background-color: var(--WhiteBackground);
}
.TransparentInput,
.TransparentInput:active,
.TransparentInput:focus,
.TransparentInput:hover {
	border: none !important; outline: none !important;
	background: none !important;
	box-shadow: none !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
}
.SmallInput,
.SmallSelect {
	font-size: 1em;
	padding: .5em .8em;
	border-radius: .3em;
}
.MediumInput,
.MediumSelect {
	font-size: 1em;
	padding: 1.2em 1em;
	border-radius: calc(.6vmax * var(--FontScale));
}

/* ---- Select2 ----  */
.ClassicSelect2 + .select2-container--default .select2-selection--single { 
	background: white !important; 
	color: rgba(20, 20, 20, 0.6) !important; 
	opacity: 0.8; 
	border: none !important; 
	outline: none !important; 
	font-size: 1em !important; 
	padding: .5em calc(.7vw * var(--FontScale)) !important; 
	border-radius: .3em !important; 
	box-shadow: .03em .03em .2em .03em rgba(0,0,0,0.40) !important; -
	webkit-box-shadow: .03em .03em .2em .03em rgba(0,0,0,0.40) !important; 
	-moz-box-shadow: .03em .03em .2em .03em rgba(0,0,0,0.40) !important; 
	height: auto !important; 
	line-height: normal !important; 
} 
.ClassicSelect2 + .select2-container--default .select2-selection--single .select2-selection__rendered { 
	color: rgba(20, 20, 20, 0.6); 
	line-height: normal; /* align text */ 
	padding-left: 0; /* remove extra left padding */ 
}
.select2-container--default .custom-select2-dropdown.select2-dropdown--below {
	background-color: white !important;
    border: none !important;
    border-radius: .3em !important;
    margin-top: .5vh; /* small gap below the input */
    box-shadow: .03em .03em .2em .03em rgba(0,0,0,0.40) !important;
    -webkit-box-shadow: .03em .03em .2em .03em rgba(0,0,0,0.40) !important;
    -moz-box-shadow: .03em .03em .2em .03em rgba(0,0,0,0.40) !important;
}
.select2-container--default .select2-dropdown .select2-search--dropdown {
    padding: 1.2em.8em; /* controls margin inside the box */
}

.select2-container--default .select2-dropdown .select2-search--dropdown input {
    margin: calc(.4vh * var(--FontScale)) 0;
    border-radius: calc(.1vmax * var(--FontScale));
    padding: calc(.4vh * var(--FontScale)) .8em;
    font-size: 1em !important;
}

.Disabled20 {
	background-color: var(--Disabled20) !important; color: var(--Black80) !important;
	cursor: none; pointer-events: none;
	opacity: 0.7;
}
.Disabled40 {
	background-color: var(--Disabled40) !important; color: var(--Black80) !important;
	cursor: none; pointer-events: none;
	opacity: 0.7;
}
.Disabled60 {
	background-color: var(--Disabled60) !important; color: var(--Black80) !important; 
	cursor: none; pointer-events: none;
	opacity: 0.7;
}
.DisableSelect {
  -webkit-touch-callout: none;
    -webkit-user-select: none;
     -khtml-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}
.NoMargin {
	margin: 0 !important;
}
.NoPadding {
	padding: 0 !important;
}
.ContentBreadcrumbsSec {
	display: flex; flex-direction: row; align-items: center;
	padding: 2vh 0vw; padding-bottom: 2.5vh;
	border-bottom: solid .2vmax var(--ThemeColor40);
	opacity: .8;
}
.ContentBreadcrumbsSec .fa-house {
	color: RoyalBlue;
	cursor: pointer;
}
.ContentSearchSec {
	display: grid;
  grid-template-columns: max-content auto auto;
  align-items: start;
  padding: 1.5vh 0vw;
}
.ContentSearchSec .ContentSearchRow {
	grid-column: 1;
	padding: .5vh 0vw;
}
.ContentSearchSec .ContentSearchButton {
	grid-column: 2;
  grid-row: 1 / span 10;
  height: 100%;
  display: flex; flex-direction: row; align-items: center;
  padding: 0vh 1vw;
}
.ContentSearchSec .ContentAddButton {
	grid-column: 3;
  grid-row: 1 / span 10;
  height: 100%;
  display: flex; flex-direction: column; justify-content: center;
  padding: 0vh 1vw;
}
.FlexFloatLeft {
	margin-right: auto;
}
.FlexFloatRight {
	margin-left: auto;
}

/* ------ Table ------  */
.GeneralTB {
	border: solid calc(.1vmax * var(--FontScale)) var(--Black80);
	border-collapse: collapse;
	width: 100%;
	font-family: Roboto Regular;
}
.GeneralTB th,
.GeneralTB td {
	border: solid calc(.1vmax * var(--FontScale)) var(--Black80);
	padding: .4em .3em;
	text-align: center;
	font-size: 1em;
}
.GeneralTB th {
	background-color: var(--Black80); color: var(--WhiteBackground);
	font-weight: bold;
}
.GeneralTB tr:nth-child(even) {
	background-color: rgba(220, 225, 230, 0.6);
}
.GeneralTB tr:hover {
	background-color: rgba(180, 180, 180, .5);
}
.GeneralTB .inactive-row {
	background-color: rgba(200, 50, 50, .5) !important;
}
.GeneralTB tfoot {
	text-align: center;
  vertical-align: middle;
}
.GeneralTB tfoot span {
	font-size: calc(1.5vmax * var(--FontScale)) !important;
}
.GeneralTB tfoot button {
	margin: 0vh calc(.1vw * var(--FontScale)) !important;;
	padding: calc(.4vh * var(--FontScale)) 1em !important;
}
.GeneralTBNullData {
	text-align: center;
	font-size: calc(1.5vmax * var(--FontScale)) !important; font-weight: bold;
	padding: calc(2vh * var(--FontScale)) calc(5vw * var(--FontScale)); margin: 0;
	color: var(--Black60);
}
.GeneralDetailTB {
	border-collapse: collapse;
	width: 100%;
	font-family: Roboto Regular;
}
.GeneralDetailTB tr:nth-child(even) {
	background-color: rgba(220, 225, 230, 0.6);
}
.GeneralDetailTB td {
	font-size: 1em;
	padding: 1.2em calc(.5vw * var(--FontScale));
} 

/* ------ Input Form ------  */
.UserInputForm > div {
	display: flex; flex-direction: column;
	padding: calc(.01em * var(--FontScale)) calc(0vw * var(--FontScale));
}
.UserInputForm > div > label {
	padding-top: calc(.3em * var(--FontScale));
	padding-bottom: calc(.1em * var(--FontScale));
}
.UserInputForm .FormBtnSection {
	display: flex; flex-direction: row; justify-content: center;
	padding: calc(.1em * var(--FontScale)) calc(0vw * var(--FontScale));
	margin-top: calc(1em * var(--FontScale));
}
.UserInputForm .FormBtnSection button {
	padding: calc(.3em * var(--FontScale)) calc(1em * var(--FontScale));
	margin: calc(0vh * var(--FontScale)) calc(.2em * var(--FontScale));;
}

/* ------ Mobile Layout ------  */
.MobileContentTitleSec {
	background-image: url('../media/Header1.webp');
	background-position: center;
	color: var(--WhiteFontColor);
	display: flex; flex-direction: column;
	padding: 1em .5em;
	margin-bottom: 1em;
	font-size: 1em;
}
.MobileContentTitleSec b {
	font-size: 1.2em;
}
.MobileSearchBox {
	display: flex; flex-direction: row;
	justify-content: center; align-items: center;
	background-color: White;
	border-radius: 1em;
	padding: .5em 1em; margin-bottom: .5em;
	box-shadow: .01em .01em .3em .01em rgba(0,0,0,0.15);
    -webkit-box-shadow: .01em .01em .3em .01em rgba(0,0,0,0.15);
    -moz-box-shadow: .01em .01em .3em .01em rgba(0,0,0,0.15);
}
.MobileSearchBox input {
	flex: 1;
}
.MobileFilterSec {
	display: flex; flex-direction: column;
	width: 100%;
	margin: 0;
}
.MobileFilterList {
	list-style: none;
	display: flex; flex-direction: row; 
	overflow: auto;
	padding: 0; margin: 0;
	/* Hides scrollbar for Firefox */
	scrollbar-width: none; 
	/* Hides scrollbar for IE and legacy Edge */
	-ms-overflow-style: none; 
}
.MobileFilterList::-webkit-scrollbar {
	display: none;
}
.MobileFilterList label {
	white-space: nowrap;
	padding: .5em .4em;
	margin: .2em .15em;
	border: solid .05em var(--Black20);
	border-radius: .5em;
}
.MobileFilterList input[type="radio"] {
    display: none;
}
.MobileFilterList input[type="radio"]:checked + label {
    background: var(--ThemeColor80);
    color: white;
    border-color: #007bff;
}
.MobileDataSec {
	padding: 0 .8em;
	margin-top: .6em;
	overflow-y: auto;
}
.MobileRecordList,
.MobileRecordListCombined {
	display: flex; flex-direction: column;
	width: 100%;
	margin: 0; padding: 0;
	border-radius: 1em;
}
.MobileRecordList li {
	display: flex; flex-direction: column;
	list-style: none;
	background-color: White;
	color: var(--Black80);
	padding: .8em .8em;
	margin: .2em 0em;
	border-radius: .8em;
	box-shadow: .01em .01em .3em .01em rgba(0,0,0,0.15);
    -webkit-box-shadow: .01em .01em .3em .01em rgba(0,0,0,0.15);
    -moz-box-shadow: .01em .01em .3em .01em rgba(0,0,0,0.15);
}
.MobileRecordListCombined li {
	display: flex; flex-direction: row;
	align-items: center;
	list-style: none;
	background-color: white;
	color: var(--Black80);
	padding: .8em .8em;
	margin: 0;
	border-bottom: solid .06em var(--Black40);
}
.MobileRecordListCombined li .RecordColorDiv {
	width: 1.2em;
	aspect-ratio: 1/1;
	margin-right: .5em;
	border-radius: .2em;
}
.MobileRecordDisabled {
	filter: grayscale(80%); 
	text-decoration: line-through; 
	color: Red; 
	opacity: .6;
}
.NoData {
	width: 100%;
	opacity: .8;
}

.BackIcon {
	position: absolute;
	top: 1em;
	font-size: 1.6em;
	cursor: pointer;
}