: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);
	--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);
	--WhiteFontColor: Gainsboro;
	--WhiteBackground : rgba(230, 228, 229, 1);
	--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;
}
body.DarkMode {
	--WhiteBackground : rgb(50, 50, 50);
	--BasicFontColor : AliceBlue;
	--InputOpacity: 0.9;
	--Black80: rgba(150, 150, 150, 0.8);
	--Black60: rgba(150, 150, 150, 0.6);
	--Black40: rgba(150, 150, 150, 0.4);
	--Black20: rgba(150, 150, 150, 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;

}
.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(.5vh * var(--FontScale)) calc(.6vw * 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));
}

/* ---- 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(.5vh * 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(.5vh * 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; 
} 
.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 .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;
}
.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: 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;
}
.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 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));
} 

/* ------ Input Form ------  */
.UserInputForm > div {
	display: flex; flex-direction: column;
	padding: calc(.5vh * var(--FontScale)) calc(0vw * 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));
}