:root {
	--ThemeColor: rgb(48, 56, 80);
	--ThemeColor80: rgba(48, 56, 80, 0.8);
	--ThemeColor60: rgba(48, 56, 80, 0.6);
	--ThemeColor40: rgba(48, 56, 80, 0.4);
	--ThemeColor20: rgba(48, 56, 80, 0.2);
	--ThemeTextColor: rgb(226, 223, 213);
	--SecondaryColor: #252525;
	--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);
	--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);
	--Grey80: rgba(135, 135, 135, 0.8);
	--WhiteFontColor: Gainsboro;
	--White95: rgba(250, 250, 250, 0.8);
	--White80: rgba(250, 250, 250, 0.8);
	--WhiteBackground : Aliceblue;
	--WhiteBackground80 : rgba(230, 228, 229, 0.8);
	--WhiteBackground60 : rgba(230, 228, 229, 0.6);
	--WhiteBackground40 : rgba(230, 228, 229, 0.4);
	--WhiteBackground20 : rgba(230, 228, 229, 0.2);
	--FontScale : 1;
	font-size: calc(1.2vmax * var(--FontScale));
	font-family: Roboto Regular;
}
@media only screen and (max-width: 768px) {
	:root {
		--FontScale : 1.6;
	}
}
main {
	position: fixed;
	height: 100vh; width: 100vw;
	display: flex; flex-direction: column;
}

/* ------ 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;

}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
input[type="number"] {
	-moz-appearance: textfield;
}
.SmallBtn {
	font-size: calc(1.2vmax * var(--FontScale));
	padding: calc(.3vh * var(--FontScale)) calc(.3vw * var(--FontScale));
	box-shadow: 0.02vmax 0.02vmax 0.3vmax 0.02vmax rgba(0,0,0,0.50);
    -webkit-box-shadow: 0.02vmax 0.02vmax 0.3vmax 0.02vmax rgba(0,0,0,0.50);
    -moz-box-shadow: 0.02vmax 0.02vmax 0.3vmax 0.02vmax rgba(0,0,0,0.50);
}
.MediumBtn {
	font-size: calc(1.2vmax * var(--FontScale));
	padding: calc(1vh * var(--FontScale)) calc(1vw * var(--FontScale));
	box-shadow: .04vmax .04vmax .5vmax .06vmax rgba(0,0,0,0.50);
    -webkit-box-shadow: .04vmax .04vmax .5vmax .06vmax rgba(0,0,0,0.50);
    -moz-box-shadow: .04vmax .04vmax .5vmax .06vmax rgba(0,0,0,0.50);
}
.LargeBtn {
	font-size: calc(2vmax * var(--FontScale));
	padding: calc(1.5vh * var(--FontScale)) calc(1.5vw * var(--FontScale));
	box-shadow: 0.04vmax 0.04vmax 0.7vmax 0.04vmax rgba(0,0,0,0.50);
    -webkit-box-shadow: 0.04vmax 0.04vmax 0.7vmax 0.04vmax rgba(0,0,0,0.50);
    -moz-box-shadow: 0.04vmax 0.04vmax 0.7vmax 0.04vmax rgba(0,0,0,0.50);
}
.BlueBtn {
	background-color: DodgerBlue;
	color: var(--WhiteFontColor);
}
.GreenBtn {
	background-color: ForestGreen;
	color: var(--WhiteFontColor);
}
.OrangeBtn {
	background-color: OrangeRed;
	color: var(--WhiteFontColor);
}
.RedBtn {
	background-color: IndianRed;
	color: var(--WhiteFontColor);
}
.BlackBtn {
	background-color: var(--Black80);
	color: var(--WhiteFontColor);
}
.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 {
	background-color: white; color: rgba(20, 20, 20, 0.6);
	opacity: 0.8;
	border: none; outline: none;
	box-shadow: 0.02vmax 0.02vmax 0.35vmax 0.02vmax rgba(0,0,0,0.40);
    -webkit-box-shadow: 0.02vmax 0.02vmax 0.35vmax 0.02vmax rgba(0,0,0,0.40);
    -moz-box-shadow: 0.02vmax 0.02vmax 0.35vmax 0.02vmax rgba(0,0,0,0.40);
}
.ClassicInput:hover {
	opacity: 1;
	box-shadow: 0.04vmax 0.04vmax 0.50vmax 0.04vmax var(--ThemeColor40) !important;
    -webkit-box-shadow: 0.04vmax 0.04vmax 0.50vmax 0.04vmax var(--ThemeColor40) !important;
    -moz-box-shadow: 0.04vmax 0.04vmax 0.50vmax 0.04vmax var(--ThemeColor40) !important;
}
.ChosenThemeInput {
	background: linear-gradient(to bottom, #fff 0%, #eee 100%);
	color: #000;
	border: 1px solid #aaa;
	box-shadow: inset 0 1px 1px rgba(0,0,0,.1);
	-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.1);
	-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.1);
	transition: border 0.2s ease, box-shadow 0.2s ease;
}
.ChosenThemeInput:hover {
	box-shadow: 0.04vmax 0.04vmax 0.50vmax 0.04vmax var(--ThemeColor40) !important;
    -webkit-box-shadow: 0.04vmax 0.04vmax 0.50vmax 0.04vmax var(--ThemeColor40) !important;
    -moz-box-shadow: 0.04vmax 0.04vmax 0.50vmax 0.04vmax var(--ThemeColor40) !important;
}
.ChosenThemeInput:hover {
	border-color: #999;
}
.ChosenThemeInput:focus {
	border-color: #5897fb;
	outline: none;
	box-shadow: 0 0 5px rgba(88, 151, 251, 0.6);
}
.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 {
	font-size: calc(1.2vmax * var(--FontScale));
	padding: calc(.9vh * var(--FontScale)) calc(.8vw * var(--FontScale));
	border-radius: calc(.4vmax * var(--FontScale));
}
.MediumInput {
	font-size: calc(1.6vmax * var(--FontScale));
	padding: calc(.8vh * var(--FontScale)) calc(1vw * var(--FontScale));
	border-radius: calc(.6vmax * var(--FontScale));
}
.InputSuffixWrapper {
	display: flex; align-items: center;
	background-color: white; color: rgba(20, 20, 20, 0.6) !important;
	opacity: 0.8;
	box-shadow: 0.02vmax 0.02vmax 0.35vmax 0.02vmax rgba(0,0,0,0.40);
    -webkit-box-shadow: 0.02vmax 0.02vmax 0.35vmax 0.02vmax rgba(0,0,0,0.40);
    -moz-box-shadow: 0.02vmax 0.02vmax 0.35vmax 0.02vmax rgba(0,0,0,0.40);
    font-size: calc(1.2vmax * var(--FontScale));
	padding: calc(.9vh * var(--FontScale)) calc(.8vw * var(--FontScale));
	border-radius: calc(.4vmax * var(--FontScale));
}
.InputSuffixWrapper > input {
	font-size: calc(1.2vmax * var(--FontScale));
	color: rgba(20, 20, 20, 0.6);
	flex: 1;
}
.InputSuffixWrapper:hover {
	opacity: 1;
	box-shadow: 0.04vmax 0.04vmax 0.50vmax 0.04vmax var(--ThemeColor40) !important;
    -webkit-box-shadow: 0.04vmax 0.04vmax 0.50vmax 0.04vmax var(--ThemeColor40) !important;
    -moz-box-shadow: 0.04vmax 0.04vmax 0.50vmax 0.04vmax var(--ThemeColor40) !important;
}
.InputSuffixWrapper .InputSuffix {
	margin-left: .2vw;
}
.NumericDecimalOnly {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ---- File Upload Style  */
.CSVUploadBox {
	display: flex; align-items: center;
	gap: 1vmax;
	border: .2vmax dashed #888;
	border-radius: .5vmax;
	padding: 1.5vh 1.2vw;
	width: fit-content;
	cursor: pointer;
	transition: border-color 0.2s ease;
}
.CSVUploadBox:hover {
	border-color: #007bff;
}
.CSVUploadBox .CSVUploadInput {
	display: none;
}
.CSVUploadBox .CSVUploadBtn {
	background: #007bff;
	color: white;
	padding: 1.2vh 1.5vw;
	border-radius: .5vmax;
	cursor: pointer;
	font-size: 1vmax;
	font-weight: bold;
	transition: background 0.2s ease;
}
.CSVUploadBox .CSVUploadBtn:hover {
	background: #0056b3;
}
.CSVUploadBox .CSVUploadName {
	font-size: 1vmax;
	color: #333;
}

/* ---- Table Copy Paste Text Area Style  */
.PasteTableBox {
	width: 100%;
}
.PasteTableBox .PasteTableArea {
	min-height: 20vh;
	width: 100%;
}

.actionSelect {
	padding: .6vh .5vw;
	letter-spacing: .05vw;
	text-align: center;
}
.actionSelect > option {
	letter-spacing: .05vw;
	text-align: center;
}


/* ---- Chosen ----  */
.custom-chosen + .chosen-container-single .chosen-single {
    background: white !important;
    color: rgba(20, 20, 20, 0.6) !important;
    opacity: 0.8;
    border: none !important; 
    outline: none !important;
    font-size: calc(1.2vmax * var(--FontScale)) !important;
    padding: calc(.8vh * var(--FontScale)) calc(.7vw * var(--FontScale)) !important;
    border-radius: calc(.4vmax * var(--FontScale)) !important;
    box-shadow: 0.02vmax 0.02vmax 0.35vmax 0.02vmax rgba(0,0,0,0.40) !important;
    -webkit-box-shadow: 0.02vmax 0.02vmax 0.35vmax 0.02vmax rgba(0,0,0,0.40) !important;
    -moz-box-shadow: 0.02vmax 0.02vmax 0.35vmax 0.02vmax rgba(0,0,0,0.40) !important;
    height: auto !important;
    line-height: normal !important;
}
.custom-chosen + .chosen-container-single .chosen-single:hover {
    opacity: 1 !important;
    box-shadow: 0.04vmax 0.04vmax 0.50vmax 0.04vmax var(--ThemeColor40) !important;
    -webkit-box-shadow: 0.04vmax 0.04vmax 0.50vmax 0.04vmax var(--ThemeColor40) !important;
    -moz-box-shadow: 0.04vmax 0.04vmax 0.50vmax 0.04vmax var(--ThemeColor40) !important;
}
.custom-chosen + .chosen-container-single .chosen-single span {
    background: transparent !important;
}
.custom-chosen + .chosen-container-single .chosen-single div {
    width: 20px;
}
.custom-chosen + .chosen-container-single .chosen-single div b {
    background-position: 0 6px !important;
}
.custom-chosen + .chosen-container .chosen-drop {
    background-color: white !important;
    border: none !important;
    border-radius: calc(.4vmax * var(--FontScale)) !important;
    margin-top: 2px; /* small gap below the input */
    box-shadow: 0.02vmax 0.02vmax 0.35vmax 0.02vmax rgba(0,0,0,0.40) !important;
    -webkit-box-shadow: 0.02vmax 0.02vmax 0.35vmax 0.02vmax rgba(0,0,0,0.40) !important;
    -moz-box-shadow: 0.02vmax 0.02vmax 0.35vmax 0.02vmax rgba(0,0,0,0.40) !important;
}
.custom-chosen + .chosen-container .chosen-results li {
    font-size: calc(1.2vmax * var(--FontScale)) !important;
    color: rgba(20,20,20,0.7) !important;
    padding: calc(.4vh * var(--FontScale)) calc(.6vw * var(--FontScale));
    border-radius: calc(.3vmax * var(--FontScale));
}
.custom-chosen + .chosen-container .chosen-results li.highlighted {
    background-color: var(--ThemeColor40) !important;
    color: white !important;
}

/* ---- 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: calc(1.2vmax * var(--FontScale)) !important; 
	padding: calc(.8vh * var(--FontScale)) calc(.9vw * var(--FontScale)) !important; 
	border-radius: calc(.4vmax * var(--FontScale)) !important; 
	box-shadow: 0.02vmax 0.02vmax 0.35vmax 0.02vmax rgba(0,0,0,0.40) !important; -
	webkit-box-shadow: 0.02vmax 0.02vmax 0.35vmax 0.02vmax rgba(0,0,0,0.40) !important; 
	-moz-box-shadow: 0.02vmax 0.02vmax 0.35vmax 0.02vmax 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: calc(.4vmax * var(--FontScale)) !important;
    margin-top: .5vh; /* small gap below the input */
    box-shadow: 0.02vmax 0.02vmax 0.35vmax 0.02vmax rgba(0,0,0,0.40) !important;
    -webkit-box-shadow: 0.02vmax 0.02vmax 0.35vmax 0.02vmax rgba(0,0,0,0.40) !important;
    -moz-box-shadow: 0.02vmax 0.02vmax 0.35vmax 0.02vmax rgba(0,0,0,0.40) !important;
}
.select2-container--default .custom-select2-dropdown.select2-dropdown--above {
	background-color: white !important;
    border: none !important;
    border-radius: calc(.4vmax * var(--FontScale)) !important;
    margin-top: -0.5vh; /* small gap below the input */
    box-shadow: 0.02vmax 0.02vmax 0.35vmax 0.02vmax rgba(0,0,0,0.40) !important;
    -webkit-box-shadow: 0.02vmax 0.02vmax 0.35vmax 0.02vmax rgba(0,0,0,0.40) !important;
    -moz-box-shadow: 0.02vmax 0.02vmax 0.35vmax 0.02vmax rgba(0,0,0,0.40) !important;
}
.select2-container--default .select2-dropdown .select2-search--dropdown {
    padding: calc(.8vh * var(--FontScale))calc(.6vw * var(--FontScale)); /* 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)) calc(.6vw * var(--FontScale));
    font-size: calc(1.2vmax * var(--FontScale)) !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;
	display: flex; align-items: center;
	gap: 0vh .4vw;
}
.ContentSearchSec .ContentSearchRow > * {
	flex: 1;
}
.ContentSearchSec .ContentSearchRow > .SearchFieldDivider {
	flex: 0;
}
.ContentSearchSec .ContentSearchButton {
	grid-column: 2;
	grid-row: 1 / span 10;
	height: 100%;
	display: flex; flex-direction: row; align-items: center;
	padding: 0vh 1vw;
}
.ContentSearchSec .ContentSearchAdditional {
	grid-column: 3;
	grid-row: 1 / span 10;
	height: 100%;
	display: flex; flex-direction: row; align-items: center;
}
.ContentSearchSec .ContentAddButton {
	grid-column: 3;
	grid-row: 1 / span 10;
	height: 100%;
	display: flex; flex-direction: column; justify-content: center;
	column-gap: .5vw; row-gap: .5vh;
	padding: 0vh 1vw;
}
.ContentSearchSec .ContentAddButton > button {
	margin: 0.2vh 0vw;
}
.ContentTableSec {
	overflow-x: auto;
}
.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: calc(.8vh * var(--FontScale)) calc(.5vw * var(--FontScale));
	text-align: center;
}
.GeneralTB th {
	background-color: var(--Black80); color: var(--WhiteBackground);
	font-size: calc(1.2vmax * var(--FontScale));
	font-weight: bold;
	white-space: nowrap;
	position: sticky;
}
.GeneralTB th .sortIcon {
	font-size: calc(.7vmax * var(--FontScale));
}
.GeneralTB td {
	font-size: calc(1.2vmax * var(--FontScale));
}
.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 .SmallBtn {
	font-size: calc(1vmax * var(--FontScale)) !important;
	padding: calc(.8vh * var(--FontScale)) calc(.8vw * var(--FontScale)) !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)) calc(1vw * var(--FontScale)) !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: calc(1.2vmax * var(--FontScale));
	padding: calc(.8vh * var(--FontScale)) calc(.5vw * var(--FontScale));
}
.TableFormattedPreview {
	table-layout: fixed;
}
.TableFormattedPreview td {
	overflow-wrap: break-word;
}

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