:root {
	/* --- Variables --- */
	/* Colors - These need to be updated */
	--primaryColor: #d64119;
	--primaryColorLight: #f8775a;
	--primaryColorDark: rgb(114, 18, 23);
	--secondaryColor: #c33e2f;
	--secondaryColorLight: #babb40;
	--secondaryColorDark: #0094b7;
	--backgroundColor: #fdf8f3;
	--backgroundColorOff: #fafafa;
	--headingColor: var(--primaryColor);
	--gold: #D4AF37;
	--buttonCTA: #F4C2C2;
	--white: #fff;
	--black: #333;
	--siteText: #606060; /* Specific requested text color from client */
	--lightGray: #eee;
	--lightGrey: #eee;
	--gray: #ccc;
	--grey: #ccc;
	--transparent: rgba(0 ,0, 0, 0);
	--text: light-dark(var(--black), var(--white)); /* If light mode, text will be black. If dark mode, text will be white. */
	--bodyText: #2C3E50, #FAF9F6; /* If light mode, text will be black. If dark mode, text will be white. */
	--progBlue: #4b53aa;

	/* Color Gradients */
	--buttonGradient: linear-gradient(to bottom, var(--primaryColor), var(--primaryColorDark));
	--buttonBackground:#ef490a; 

	/* Border Styles */
	--borderRadius: 4px;
	--borderRadiusSm: 2px;
	--borderRadiusLg: 10px;
	--primaryBorder: 1px solid var(--gray);
	--borderDark: 1px solid var(--black);
	--borderLight: 1px solid var(--lightGray);
	--borderWhite: 1px solid var(--white);
	--boxShadow:-5px 10px 8px rgba(0, 0, 0, 0.1);

	/* Fonts */
	--fontxSmall: 12px;
	--fontSmall: 15px;
	--fontMedium: 17px;
	--fontLarge: 23px;
	--fontxLarge: 28px;
	--fontxxLarge: 48px;
	--fontHead: 35px;
	--primaryFontFamily: Lora;
	--secondaryFontFamily: Great Vibes;
	--tertiaryFontFamily: Playfair Display Bold;
	--headingFontFamily:  var(--tertiaryFontFamily);
	--smHeadingFontFamily: var(--tertiaryFontFamily);
	--storyFont: Libre Baskerville, serif;
	--fontWeight: 500;
	--fontWeightLight: 300;
	--fontWeightBold: 800;

	/* Padding and Margin */
	--padding: 20px;
	--paddingSm: 5px;
	--paddingLg: 30px;
	--paddingNS: 10px 0px;
	--paddingEW: 0px 10px;
	--verticalPad: 20px 10px;
	--horizontalPad: 10px 20px;
	--panelPad: 15px 10px;
	--margin: 20px;
	--marginSm: 5px;
	--marginLg: 30px;
	--marginNS: 10px 0px;
	--marginEW: 0px 10px;
	--verticalMarg: 20px 10px;
	--horizontalMarg: 10px 20px;
	--panelMarg: 15px 10px;
	--table-padding: 8px;

	/* Table Styles */
	--tableRowBG: var(--lightGray);
	--tableRowBGDark: var(--black);
	--tableHeadColor: var(--lightGray);
	--tableCellPadding: 10px 0px;

	/* Miscellaneous Styles */
	--boxShadowBigger: rgba(0, 0, 0, 0.5) 0px 10px 40px;
	--buttonBoxShadow: 0px 5px 48px 0px #000000;
	--boxShadowHover: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
	/* --- End Variables --- */

	/* Light-Dark() Styles */
	color-scheme: light dark;
	--lightColor: var(--black);
	--lightBackground: var(--backgroundColorOff);
	--lightBackground2: var(--lightGray);
	--lightBackground3: var(--gray);
	--lightBackgroundDeep: var(--white);
	--darkColor: var(--white);
	--darkBackground: #444;
	--darkBackground2: #555;
	--darkBackground3: #666;
	--darkBackground4: #777;
	--darkBackgroundDeep: var(--black);
	--backgroundLayer1: light-dark(#fff, var(--darkBackground2));
}

* {
	/* Default values for frequent styles */
	color-scheme: light !important; /* color-scheme: light dark - re-enables dark mode */
	box-sizing: border-box;
	font-family: var(--primaryFontFamily);
	outline: none;
	outline-offset: 0px;
	transition: 0.2s;
}

/* --- GLOBAL HTML AND DASHBOARD STYLING --- */
body {width: 100vw; height: 100vh; background-color: light-dark(var(--backgroundColor), var(--darkBackgroundDeep)); color: #2C3E50, #FAF9F6; overflow-y: overlay;}
h1 {font-size: var(--fontHead); font-family: var(--headingFontFamily); color: var(--headingColor); text-transform: uppercase;}
h2 {font-size: var(--fontxLarge); font-family: var(--headingFontFamily); color: var(--headingColor); text-transform: uppercase;}
h3 {font-size: var(--fontLarge); font-family: var(--smHeadingFontFamily); color: var(--headingColor); text-transform: uppercase;}
p {font-size: var(--fontMedium); font-family: var(--primaryFontFamily); line-height: 22px; color: var(--bodyText);}

.material-symbols-rounded {font-variation-settings: 'FILL' 0, 'wght' 100, 'GRAD' -25, 'opsz' 24}

.container { position: relative; width: 1200px; left: 50%; margin-left: -600px; }
.dashboardCont {width: calc(100vw - 250px); height: 100vh; left: 250px; position: fixed; overflow: hidden; z-index: 0; padding: 30px 50px; overflow-y: auto; background-color: light-dark(var(--backgroundColor), var(--darkBackgroundDeep)); color: light-dark(var(--lightColor), var(--darkColor));}
	.dashboardCont[data-more-to-get="1"] .loading {padding: 20px 0; text-align: center;}
	.dashboardCont[data-more-to-get="0"] .loading {display: none;}
	.dashboardCont[data-more-to-get="1"] .loading  div {background: none; height: 20px; width: 20px; float: unset; display: inline-block; animation: rotation 2s infinite linear; border: double 5px var(--primaryColor); border-image: linear-gradient(to right, var(--primaryColor) 100%, transparent 100%) 100% -1; border-radius: 100px; background-origin: border-box; background-clip: content-box, border-box; background: linear-gradient(to right, var(--white) 0%, var(--white) 40%, var(--primaryColor) 40%, var(--primaryColor) 60%, var(--white) 60%, var(--white) 100%);}
	@keyframes rotation {
		from {transform: rotate(0deg);}
		to {transform: rotate(359deg);}
	}
.adminHeader {background: light-dark(var(--lightBackgroundDeep), var(--darkBackground)) !important; color: var(--text) !important; padding: 0 0px; z-index: 100; width: 260px; height: 100vh; position: fixed; left: 0; top: 0; box-sizing: border-box;}
.adminHeader * {float: unset;}
.adminHeaderItem.active {color: light-dark(var(--darkBlue1), var(--medBlue2)) !important;}
/* img.logo {height: 43px; cursor: pointer; aspect-ratio: auto; margin: 0;} */
nav#temp {display: flex; flex-direction: column; align-items: flex-start; gap: 20px; height: 87vh;  font-size: var(--fontSmall);}
.bottomIcons {margin-top: auto !important; display: flex; flex-direction: row; width: 100%; justify-content: space-between; align-items: center;}
nav#temp > *:not(img) {padding: 0px; margin: 0; border-radius: var(--borderRadiusSm); transition: 100ms;}
nav#temp p {margin: 0; font: var(--fontSmall); font-size: var(--fontSmall);}
nav#temp .material-icons {margin: 0; font-size: 20px;}
nav#temp a {text-decoration: none; color: var(--text); display: flex; align-items: flex-end; gap: 8px; transition: 200ms ease-in-out;}

input {padding: 2px 12px; float: left;  background: var(--white); width: 100%; margin: var(--marginNS); border: var(--primaryBorder); border-radius: var(--borderRadius); line-height: 1.5em; font-size: var(--fontMedium); color: var(--bodyText) !important;}
label {width:100%; float:left; padding: var(--paddingEW); margin: var(--marginNS); font-size: var(--fontMedium); color: var(--bodyText);}
select {background-color: var(--white); color: var(--bodyText); display: inline-block; line-height: 1.5em; padding: 0.5em 3.5em 0.5em 0em; width: 100%; margin: 0; -webkit-box-sizing: border-box; ---moz-box-sizing: border-box; -webkit-appearance: none; --moz-appearance: none; padding-left: 10px; background-image: linear-gradient(45deg, transparent 50%, var(--black) 50%), linear-gradient(135deg, var(--black) 50%, transparent 50%), linear-gradient(to right, #ccc, #ccc); background-position: calc(100% - 20px) calc(1em + 2px), calc(100% - 15px) calc(1em + 2px), calc(100% - 2.75em) 0.5em; background-size: 5px 5px,5px 5px, 1px 1.5em; background-repeat: no-repeat; border: var(--primaryBorder); border-radius: var(--borderRadius); user-select: none; font-size: var(--fontMedium);}
	select:focus {background-size:5px 5px, 5px 5px, 1px 1.5em; background-repeat: no-repeat;}
	select option {padding-block-start: 10px; padding: var(--paddingEW);}
textarea {width: 100%; float: left; resize: none; border: var(--primaryBorder); border-radius: var(--borderRadius); font-size: var(--fontMedium); background: #fff; color: #333;}
.noMargin {margin: 0 0;}
.marginLeftAuto {margin-left: auto;}
.marginRightAuto {margin-right: auto;}

/* HTML Conditional Styling */
:focus-visible, 
:focus, 
:focus-within 
{outline: none !important; outline-offset: 0 !important;}
/* --- END GLOBAL HTML STYLING --- */

/* --- BUTTON STYLING --- */
.standardButton, .primaryButton {width: 150px; height: 50px; padding: var(--horizontalPad); background: var(--primaryColor); color: var(--white); font-size: var(--fontSmall); border-radius: var(--borderRadius); user-select: none; font-weight: 600; border: 1px solid var(--primaryColor);}
	.standardButton:hover, .primaryButton:hover {background-color: var(--primaryColorDark); border: 1px solid var(--primaryColorDark);}
.loginButton, .secondaryButton {width: 150px; height: 50px; padding: var(--horizontalPad); border: 1px solid var(--primaryColor); background: var(--white); color: var(--primaryColor); font-weight: 600; user-select: none; border-radius: var(--borderRadius); font-size: var(--fontSmall);}
	.loginButton:hover, .secondaryButton:hover {background: var(--primaryColorDark); color: var(--white); border: 1px solid var(--primaryColorDark);}
.disabledButton {width: 150px; height: 50px; padding: var(--horizontalPad); font-size: var(--fontSmall); border-radius: var(--borderRadius); cursor: not-allowed; font-weight: 600; }
/* --- END BUTTON STYLING --- */

/* --- CHECKBOX-ALTERNATIVE STYLING --- */
.switch {position: relative; display: inline-block; width: 52px; height: 25px;}
.switch input {opacity: 0; width: 0; height: 0;} /* Hide default HTML checkbox */
.slider {position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; -webkit-transition: .4s; transition: .4s; border-radius: 25px;}
.slider:before {position: absolute; content: ""; height: 17px; width: 17px; left: 4px; bottom: 4px; background-color: white; -webkit-transition: .4s; transition: .4s; border-radius: 50%;}
input:checked + .slider {background-color: var(--primaryColor);}
input:focus + .slider {box-shadow: 0 0 1px var(--primaryColor);}
input:checked + .slider:before {-webkit-transform: translateX(26px); -ms-transform: translateX(26px); transform: translateX(26px);}
/* --- END CHECKBOX-ALTERNATIVE STYLING --- */

/* --- FLEX CLASS STYLING --- */
.flex {display: flex;}
.col {flex-direction: column;}
.row {flex-direction: row;}
.gap {gap: 20px;}
.smGap {gap: 10px;}
.lgGap, .medGap {gap: 25px;}
.largeGap, .bigGap, .biggap {gap: 30px;}
.flexCenter {justify-content: center; align-items: center;}
.justify {justify-content: flex-start;}
.justifyC {justify-content: center;}
.justifyB {justify-content: space-between;}
.justifyE {justify-content: space-evenly;}
.justifyEnd {justify-content: flex-end;}
.align {align-items: flex-start;}
.alignC {align-items: center;}
.wrap {flex-wrap: wrap;}
.centered {display: flex; justify-content: center; align-items: center;}
.noWrap, .nowrap {flex-wrap: nowrap; text-wrap: nowrap;}
/* --- END FLEX CLASS STYLING --- */

/* --- FRONT END HELPERS --- */
.bold {font-weight: 700;}
.seconds {width: calc((100% / 2) - 5px);} /*splits in half with a margin right or left of 10px*/
.thirds {width: calc((100% / 3) - 10px);}
.seconds:nth-child(odd) {margin-right:10px;}
.thirds:nth-child(3n+2) {margin-right:10px; margin-left:10px;}
.autoW {width:auto;}  /*Gives elem auto: with and float: left;*/
.fleft {float: left;}
.fullWidth {width: 100%;}
.width100 {width: 100%;}
.fright {float: right;}
.hidden {display: none;} /*Hides elem*/
.hiddenImp {display: none !important;}
.gold {border: 1px solid var(--gold); background: var(--gold); color: var(--text);}
.half {width:50%;} /*makes elem with 50%*/
.standardLink {color: #5570f1; text-decoration: none; font-weight: 600;}/*put this on element that is a hyperLink */
.noMarg {margin: 0px !important;}
.noBoxShadow {box-shadow: none !important;}
.material-icons {cursor: pointer; user-select: none;}
.material-symbols-outlined {cursor: pointer; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 48; user-select: none;}
.searchCont {border: var(--primaryBorder); border-radius: var(--borderRadius); padding: var(--paddingEW); display: flex; align-items: center; background: var(--white); width: auto; float: left;}
.searchCont .material-icons, .searchCont .material-symbols-outlined {color: #333;}
.noRadius {border-radius: 0px;}
.noPad {padding: 0px !important;}
.noSelect {user-select: none;}
.clickable{cursor:pointer; text-decoration:underline;}
.width100 {width: 100%;}
.noselect {user-select: none;}
.pointer {cursor: pointer;}
/* --- END FRONT END HELPERS --- */

/* --- HEADER STYLING --- */
.adminHeader {box-shadow: 1px 0 0 1px rgba(0, 0, 0, 0.08), 0 3px 6px rgba(0, 0, 0, 0.23);	}
.headerOpt {float: right; margin: 10px; text-decoration: none; color: var(--black);}
.header {float: left; width: 100%; padding: 10px 50px;}
.header .logo {float: left; width: 130px; height: auto; margin: 0 0;}
/* --- END HEADER STYLING --- */

/* --- INPUT STYLING --- */
.fancyBox {width:200px; background: none; float: left; margin: 0 0;}
.fancyCheck {width: auto;float: left; margin-top: 3px;}
	.fancyCheck label {float: right; margin: 0 0; width: auto; margin-top: 8px; font-size: var(--fontMedium);} 
.fancyInput { background-color: var(--white); color: var(--black); width: auto; padding: 6px 10px; margin-top: 5px;}
	.fancyInput label {padding-left: 6px; font-size: var(--fontMedium);}
	.fancyInput input, .fancyInput textarea {border: none; margin: 0 0; background: var(--white); border: none; margin: 0 0; border-top-left-radius: 0px; margin-top: 0px; border-top-right-radius: 0px; font-size: var(--fontMedium); resize: none; padding-left: var(--paddingSm);}
	.fancyInput i {float: left; font-size: var(--fontLarge); margin-top: 9px; margin-right: 5px;}
.selector {width: 200px; background:  transparent; }
.standardInput {width: auto;}
	.standardInput label {font-weight: 600; font-size: var(--fontMedium);}
	.standardInput input, .standardInput textarea {margin-top: 2px; resize: none;}
	  .newInputs input, .newInputs select { box-shadow: -5px 10px 8px rgba(0, 0, 0, 0.1); padding: 10px; border-radius: var(--borderRadius); box-sizing: border-box; border: none !important; margin: 0 0;}
/* --- END INPUT STYLING --- */

/* --- LIGHT-DARK STYLING --- */
/* These classes override the light-dark() styling. */
.darkMode {color-scheme: dark !important;}
.lightMode {color-scheme: light !important;}
/* .wh {color: #fff !important;} */
/* .bl {color: #333 !important;} */
/* --- END LIGHT-DARK STYLING --- */

 /* --- POP-UP STYLING --- */
.standardPopup {height:100vh !important; width:800px !important; top:0 !important; border-radius:0px !important; display:block !important; left:unset !important; right:-800px !important; position: fixed; display:none; top: 10vh; width: 600px; max-width: 100vw; left: 50%; margin-left: -300px; z-index: 103; border-radius: 3px; transition: .2s all; background: var(--white);}
	.standardPopup .fancySelect label {margin-bottom:0px !important;}
	.standardPopup.expanded {right:0 !important; display:block;}
	.standardPopup h1 { margin: 0 0; padding: 0 0;}
	.standardPopup .section {padding: 15px 2.5%; width: 95%; float: left; border-bottom: var(--primaryBorder);}
		.standardPopup .section:nth-last-child(1) {border: none;}
	.standardPopup .standardButton {float: right;}
	.standardPopup label, .standardPopup ul, .standardPopup li, .standardPopup textarea, .standardPopup input, .standardPopup select {width: 100%; float: left;}
	.standardPopup label {margin: 2px 0; margin-top: 10px;}
		.standardPopup input {-webkit-appearance: none;}
		.standardPopup textarea, .standardPopup select {resize:none; border-bottom: var(--primaryBorder);}
	.standardPopup p, .standardPopup h1 {float: left; width: 100%; margin: 0 0; padding: 0 0; font-size: var(--fontLarge);}
	.standardPopup ul {margin-top: 0px;}
		.standardPopup ul p {margin-top: 10px; margin-bottom: 5px;}
.film {width: 100vw; height: 100vh; position: fixed; background: rgba(0,0,0,0.35); z-indeX: 101 !important; top: 0; left:0; display:none;}
	.film.expanded {display:block;}
.bottomSection {padding:15px 20px; border-top:1px solid var(--gray);} 
.mainSection {padding:0px; height:calc(100vh - 131px); overflow-y:auto; position:relative;}
/* --- END POP-UP STYLING --- */

/* --- SCROLLBAR STYLING --- */
/* Add both classes to the scrollbar to apply custom effects. Adjust as needed. */
.scrollbar {margin-left: 30px; float: left; height: 300px; width: 65px; background: #f1f1f1; overflow-y: auto; padding-right: 10px; margin-bottom: 25px;}
	.scrollStyle::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); background-color: #f1f1f1;}
	.scrollStyle::-webkit-scrollbar {width: 15px; background-color: var(--lightGray); color: var(--black);}
	.scrollStyle::-webkit-scrollbar-thumb {-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); background-color: var(--gray);}
/* Regular scrollbar base style. */
::-webkit-scrollbar {width: 5px;}
::-webkit-scrollbar-thumb {background: #555; border-radius: var(--borderRadiusSm);}
::-webkit-scrollbar-track {background: light-dark(var(--lightbackground2), var(--darkBackground2)); border-radius: var(--borderRadiusSm);}
/* --- END SCROLLBAR STYLING --- */

/* --- TABLE STYLING --- */
/* .standard-table and all subsidiary styling found in tableStyles.css is deprecated. Utilize .mainTable when a table is needed. */
table {border-radius: var(--borderRadius);}
td,
tr,
th,
thead
{border-radius: 0px; border: none;}
tr:last-of-type td:first-of-type {border-bottom-left-radius: var(--borderRadius);}
tr:last-of-type td:last-of-type {border-bottom-right-radius: var(--borderRadius);}

.mainTable {margin-top: 0px; width: 100%; overflow-y: overlay; max-height: 85vh; border-spacing: 0; box-sizing: border-box; border: var(--primaryBorder); border-radius: var(--borderRadius); text-align: left; display: flex; flex-direction: column; color: var(--text);}
	.mainTable>header {display: flex; justify-content: flex-end; padding: var(--table-padding); box-sizing: border-box; gap: var(--table-padding); align-items: stretch; border-bottom: var(--primaryBorder); color: var(--text); background: light-dark(var(--lightGray), var(--darkBackground)); align-items: center;}
		.mainTable>header>* {width: fit-content;}
		.mainTable>header>h2 {margin-left: 10px; margin-right: auto; font-size: 16px; font-weight: 600; align-self: center; line-height: 27px;}
		.mainTable>header .material-icons {font-size: 17px;}
		.mainTable>header>.search-bar, .mainTable>header .input-group {display: flex; align-items: center; gap: 4px;}
		.mainTable>header>.search-bar {padding: 6px 10px; border-radius: 10px; font-weight: 100; border: var(--primaryBorder); cursor: pointer; color: var(--black); background: var(--white);}
		.mainTable>header input {padding: 6px 10px; border-radius: 8px; color: var(--black); border: var(--primaryBorder); cursor: pointer;}
	.mainTable table {width: 100%; border-collapse: collapse; background: light-dark(var(--lightBackground), var(--darkBackground3)); border-color: light-dark(var(--lightBackground), var(--darkBackground2)); border-spacing: 1px;}
	.mainTable thead {background: light-dark(var(--tableHeadColor), var(--darkBackground)); top: 0; z-index: 1; position: sticky;}
		.mainTable thead th {text-align: left; font-weight: 600; text-transform: uppercase; padding: var(--tableCellPadding); font-size: var(--fontMedium);}
		.mainTable thead th:nth-child(1) {border-top-left-radius: var(--borderRadius);}
		.mainTable thead th:nth-last-child(1) {border-top-right-radius: var(--borderRadius);}
	.mainTable th, .mainTable td {padding: var(--tableCellPadding); font-size: var(--fontMedium);}
	.mainTable tbody>tr>td {font-size: 14px; font-weight: 500; color: var(--text);}
	.mainTable tbody>tr:not(:last-child) {border-bottom: var(--primaryBorder);}
	.mainTable tr {background-color: light-dark(var(--white), var(--darkBackground2)); color: var(--text);}
/* Empty Table */
.mainTable[data-fetching-data="0"]:has(tbody:empty)::after, 
.mainTable:has(tbody[data-fetching-data="0"]:empty)::after {content: 'No Rows'; float: left; width: 100%; margin: 0 auto; padding: 15px 0px; background: var(--white); text-align: center;}
/* Table Loading */
.mainTable[data-fetching-data="1"]::after,
.mainTable:has(tbody[data-fetching-data="1"])::after {content: ''; background: none; height: 20px; width: 20px; display: block; margin: 20px auto; animation: rotation 2s infinite linear; border: double 5px var(--primaryColor); border-radius: 100px;background-origin: border-box; background-clip: content-box, border-box; background: linear-gradient(to right, var(--white) 0%, var(--primaryColor) 100%);}

.tableFilters {display: flex; flex-direction: row; align-items: flex-start; margin-bottom: 10px;}
.tableFilterRight {margin-left: auto;}

.tableTab {width: auto; border-radius: 10px 10px 0px 0px; background: var(--white); padding-top: 9px;}
	.tableTab.active {background: var(--primaryColor); color: var(--white);}
		.tableTab.active div {border-color: var(--primaryColor);}
	.tableTab div, .tableTab i.add {width: auto; padding: 10px 30px; padding-top: 1px; padding-right: 40px; font-size: var(--fontMedium); border-right: 1px solid var(--lightGray);}
	.tableTab i.add {font-size: var(--fontExtraLarge); padding: 2px 0 !important;}
	.tableTab i.close {position: absolute; font-size: var(--fontMedium); margin-left: 15px; border-radius: 20px; display: inline-block; margin-top: -8px; padding: 4px;}
	.tableTab i.close:hover {background: var(--gray);}
	.tableTab.showColumnsList {padding: 9px 10px; padding-bottom: 8px;}
		.tableTab.showColumnsList i {float: left; width: 100%;padding: 0 0; border: none;}

.columnsGroup {width: auto;}
.columnsPopulate {width: 220px; position: fixed; margin-top: 25px; padding: 15px; background: var(--white); z-index: 2; box-shadow: var(--boxShadow); border-radius:10px;}
	.columnsPopulate .inp {padding: 2px 0;}
		.columnsPopulate .inp:nth-child(1) label {font-weight: 600; text-decoration: underline;}
		.columnsPopulate .inp input[type="checkbox"] {width: auto; margin: 0; float: right; margin: 2px 0; accent-color: var(--primaryColor); color: var(--white);}
		.columnsPopulate .inp label {width: auto; margin: 0; padding: 0; font-size: var(--fontMedium) !important;}
		.columnsPopulate input[type="checkbox"] {line-height: 2.1ex; position: absolute; left: -999em;}
			.columnsPopulate input[type="checkbox"] + label {position: relative; overflow: hidden;}
			.columnsPopulate input[type="checkbox"] + label::before {content: "";display: inline-block; vertical-align: -15%; height: 2ex; width: 2ex; background-color: 	white; border: 1px solid rgb(166, 166, 166); border-radius: var(--borderRadiusSm); margin-right: 0.5em;}
			.columnsPopulate input[type="checkbox"]:checked + label::before {content: "";display: inline-block; vertical-align: -15%; height: 2ex; width: 2ex; background-color: var(--primaryColor); border: var(--borderLight); border-radius: var(--borderRadiusSm); margin-right: 0.5em;}
			.columnsPopulate input[type="checkbox"]:checked + label::after {content: ''; position: absolute; width: 1.2ex; height: 0.4ex; background: rgba(0, 0, 0, 0); top: 0.8ex; left: 0.6ex; border: 2px solid var(--white); border-top: none; border-right: none; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg);}
/* --- END TABLE STYLING --- */

/* --- END TOOLTIP STYLING --- */
.tooltip {position: relative; display: inline-block;}
.tooltip .tooltiptext { visibility: hidden; width: auto; background-color: var(--black); color: var(--white); text-align: center; border-radius: 5px; padding: 5px; position: absolute; z-index: 99999; top: 125%; left: 50%; margin-left: -75px; opacity: 0; transition: opacity 0.3s;}
.tooltip .tooltiptext::after {content: "";position: absolute;bottom: 100%;left: 50%;margin-left: -5px;border-width: 5px;border-style: solid;border-color: transparent transparent var(--black) transparent;}
.tooltip:hover .tooltiptext { visibility: visible; opacity: 1;}
/* tooltip.css overrides */
.tooltip:after, .tooltip-top:after {margin: 0px; z-index: 1000; bottom: 0%; left: 0%; padding: 0px; background: transparent; color: var(--white); content: attr(data-tooltip);}
.tooltip:before, .tooltip-top:before {margin: 0px; border: none;}
/* last row table tooltips */
.mainTable tr:last-of-type .tooltip .tooltiptext {top: -200% !important; }
.mainTable tr:last-of-type .tooltip .tooltiptext::after {border-color: var(--black) transparent transparent transparent !important; bottom: -20% !important;}
/* --- END TOOLTIP STYLING --- */


/* --- FOOTER+PWA STYLES --- */

.footerDiv p {margin: 0 0; color: #fff; font-size: 20px;}
.footer {padding: 45px 0px;}
.footer {width:100%; float:left; background:#fff; border-top:1px solid #eee;background: #C33E2F;  color: #fff;}
.footer .container {text-align:center;}
.footerLink {float:unset; display:inline-block; padding:20px;}
.pwaNav {display:none; position:fixed; bottom:0; left:0; background:#fff; border-top:1px solid #ddd; width:100%; float:left; box-sizing:border-box;  padding-left:10px; padding-right:10px; box-sizing:border-box;}
.pwaOpt { text-align:center; padding: 15px 0; box-sizing:border-box;}
.pwaOpt i {width:100%; float:left; text-align:center; font-size:35px !important; color: #333;}
.pwaOpt p {width:100%; float:left; text-align:center; font-size:10px; margin:0 0; margin-top:2px; text-transform:uppercase;}
.pwaOpt.active {}
.pwaOpt.active i, .pwaOpt.active p {color:var(--primaryColor) !important; font-weight: 900;}




/* --- RESPONSIVE HELPERS --- */
.mobShow {display: none;} /* Give this to an element that should only show on mobile devices. */
.mobileShow {display: none;} /* Give this to an element that should only show on mobile devices. */

/* --- MEDIA QUERIES --- */
@media only screen and (max-width: 1400px) {
	.container {width:100% !important; padding:0px 40px; float: left; left: unset; position: unset; margin-left:0px !important;}	
}
@media only screen and (max-width: 1200px) {
	.ql-toolbar.ql-snow .ql-formats:nth-child(1){display:none !important;}
	.ql-toolbar.ql-snow .ql-formats:nth-child(3){display:none !important;}
	.ql-toolbar.ql-snow .ql-formats:nth-child(5){display:none !important;}
	.ql-toolbar.ql-snow .ql-formats:nth-child(8){display:none !important;}
	.ql-toolbar.ql-snow .ql-formats:nth-child(9){display:none !important;}
	.ql-toolbar.ql-snow .ql-formats:nth-child(11){display:none !important;}

	/* --- RESPONSIVE HELPERS --- */
	.mobShow {display: block;}
	.mobileShow {display: block;}
	.mobHide {display: none;} /* Give this to an element that should hide on mobile devices. */
	.mobileHide {display: none;} /* Give this to an element that should hide on mobile devices. */
}
@media only screen and (max-width: 1000px) {
	p {font-size: var(--fontSmall);}
	.adminHeader {background: var(--white); }
	.adminHeaderItem i {margin-left: 0px;}
	.editorContent {width: 100% !important; margin: 0 0 !important;}
	.dashboardCont { float: left; margin: 0 0; left: 80px; width: calc(100% - 80px);}
	
	.footer {display:none;}
	.pwaNav {display:flex !important;}
	header {display: none;}
}
@media only screen and (max-width: 900px) {
	.selector {width: 100px;}
} 
@media only screen and (max-width: 800px) {
	.container {padding:0px 20px;}
	.footer {padding: 0 0 !important;}
	.footer div {width: 100% !important; padding: 20px 2.5%; margin: 0 0 !important;}
	.third {float: left; margin: 5px 0 !important; width: 100% !important;}
	.header a {margin-top: 13px !important;}
	.third {float: left; margin: 5px 0 !important; width: 100% !important;}
}
/* --- END MEDIA QUERIES --- */