:root {
	/* --- Variables --- */
	/* Colors - These need to be updated */
	--primaryColor: #fb5d39;
	--primaryColorLight: #ffe3dd;
	--orange: #fe5733;
	--primaryColorDark: #e04c3b;
	--grey: #efefef;
	--secondaryColor: #1e1e1e;
	--secondaryColorLight: #4a4a4a;
	--secondaryColorDark: #141414;
	--backgroundColor: var(--gray); /* Primary background color for all Prog websites. */
	--backgroundColorOff: var(--lightGray);
	--headerColor: var(--primaryColor);
	--white: #fff;
	--black: #333;
	--lightGray: #f1f2f3;
	--lightGrey: #f1f2f3;
	--gray: #e9e5e2;
	--grey: #e9e5e2;
	--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. */
	--progBlue: #4b53aa;

	/* Border Styles */
	--borderRadius: 5px;
	--borderRadiusSm: 2px;
	--borderRadiusLg: 10px;
	--borderDark: 1px solid var(--black);
	--borderLight: 1px solid light-dark(var(--lightGray), var(--white));
	--borderWhite: 1px solid var(--white);
	--primaryBorder: 1px solid var(--primaryColor);

	/* Fonts */
	--fontxSmall: 12px;
	--fontSmall: 14px;
	--fontMedium: 17px;
	--fontLarge: 20px;
	--fontxLarge: 25px;
	--fontHead: 34px;
	--primaryFontFamily: 'Affogato Regular', sans-serif;
	--secondaryFontFamily: 'Poppins', sans-serif;
	--tertiaryFontFamily: 'Poppins', sans-serif;
	--headerFontFamily: 'Affogato Black', sans-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;
	--gap: 10px;
	--smGap: 5px;
	--lgGap: 20px;
	--xlgGap: 40px;
	--biggap: var(--xlgGap);
	--inputPadding: 0.5em 0.75em;

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

	/* Miscellaneous Styles */
	--boxShadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
	--boxShadowHover: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
	--overlay: rgba(0,0,0,0.4);
	/* --- End Variables --- */

	/* Light-Dark() Styles */
	color-scheme: light dark;
	--lightColor: var(--black);
	--lightBackground: #e8e5e2;
	--lightBackground2: var(--lightGray);
	--lightBackground3: var(--gray);
	--lightBackgroundDeep: var(--white);
	--darkColor: var(--white);
	--darkBackground: #444;
	--darkBackground2: #555;
	--darkBackground3: #666;
	--darkBackground4: #777;
	--darkBackgroundDeep: var(--black);
	--defaultBackground: light-dark(#e8e5e2, 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: 100%; height: 100%; background-color: var(--defaultBackground); color: light-dark(var(--lightColor), var(--darkColor)); overflow-x: hidden;}
	h1 {font-size: var(--fontHead); font-weight: var(--fontWeightBold); margin: 10px 0px; font-family: var(--headerFontFamily); letter-spacing: 0px;}
	h2 {font-size: var(--fontxLarge); font-weight: bold; margin: 10px 0px;}
	h3 {font-size: var(--fontLarge); font-weight: bold; margin: 5px 0px;}
	p, a, ul, ol, li {font-size: var(--fontMedium);}
	h2,h3,h4,p,a,ol,ul,li {font-family: var(--primaryFontFamily); color: var(--text);}
	.bold {font-weight: 900;}

	body > .container {min-height: calc(100vh - 140px);}

	.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: var(--primaryColor) !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: 100%; padding: var(--padding); 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: var(--inputPadding); float: left; color: var(--text); background: var(--white); width: 100%; margin: var(--marginNS); border: var(--borderLight); border-radius: var(--borderRadius); line-height: 1.5em; font-size: var(--fontMedium);}
	label {width:100%; float:left; padding: var(--paddingEW); margin: var(--marginNS); font-size: var(--fontMedium); color: var(--text);}
	select {background-color: var(--white); color: var(--black); display: inline-block; line-height: 1.5em; padding: var(--inputPadding); width: 100%; margin: 0; -webkit-box-sizing: border-box; ---moz-box-sizing: border-box; -webkit-appearance: none; --moz-appearance: none; padding-right: 3.5em; 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(--borderLight); 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(--borderLight); border-radius: var(--borderRadius); font-size: var(--fontMedium); background: #fff; color: #333;}

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

/* --- BUTTON STYLING --- */
	/* .standardButton:hover {background-color: var(--primaryColorDark); border: 1px solid var(--primaryColorDark);} */
	.standardButton {width: auto; float: left; text-transform: capitalize; padding: var(--horizontalPad); background: none; border-color: var(--orange); transition: .2s all; color: var(--orange); font-weight: 100; font-size: var(--fontMedium); border-radius: var(--borderRadius); user-select: none; min-width: 100px;}
	.standardButton.outline {background: none; border-color: #888; transition: .2s all; color: #333; font-weight: 100;}
	.standardButton:hover {background: var(--orange); border-color:var(--orange); color: var(--white); font-weight: 600;}
	.loginButton {border: var(--primaryBorder); background: #fff; color: var(--primaryColor);}
	.circleBtn {padding: var(--paddingSm); border-radius: 100px; border: var(--borderLight); background:var(--backgroundColorOff);}
	.circleBtn i {font-size: var(--fontxLarge); float: right; margin: 0 0; padding: 0 0; color: var(--black);}
/* --- 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: var(--gap);}
	.smGap {gap: var(--smGap);}
	.lgGap, .medGap {gap: var(--lgGap);}
	.largeGap, .bigGap, .biggap {gap: var(--xlgGap);}
	.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 --- */
	.bl {color: var(--black);}
	.blbg {background: var(--black);}
	.wh {color: var(--white);}
	.whbg {background: var(--white);}
	.seconds {width: calc((100% / 2) - 5px) !important;} /*splits in half with a margin right or left of 10px*/
	.thirds {width: calc((100% / 3) - 10px) !important;}
	.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;*/
	.width100 {width: 100%;}
	.fleft {float: left;}
	.fright {float: right;}
	.hidden {display: none;} /*Hides elem*/
	.hiddenImp {display: none !important;}
	.half {width:50%;} /*makes elem with 50%*/
	.standardLink {color: #5570f1 !important; text-decoration: none; font-weight: 600;}/*put this on element that is a hyperLink */
	.noMarg {margin: 0px !important;}
	.material-icons {cursor: pointer !important; user-select: none;}
	.material-symbols-outlined {cursor: pointer !important; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 48; user-select: none;}
	.searchCont {border: var(--borderLight); 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;}
	.pointer {cursor: pointer;}
	.noRadius {border-radius: 0px !important;}
	.radius {border-radius: var(--borderRadius);}
	.border {border: var(--borderLight);}
	.noBorder {border: none;}
	.cover {object-fit: cover;}
	.contain {object-fit: contain;}
	.noPad {padding: 0px !important;}
	.noMarg {margin: 0px !important;}
	.noSelect {user-select: none !important;}
	.color {color: var(--headerColor);}
	.fullWidth {width: 100%;}
	.smPad, .smallPad {padding: var(--paddingSm);}
	.pad {padding: var(--padding);}
	.lgPad, .largePad {padding: var(--paddingLg);}
	.smMarg, .smallMarg {margin: var(--marginSm);}
	.marg {margin: var(--margin);}
	.lgMarg, .largeMarg {margin: var(--marginLg);}
	.invert {filter: invert(1);}
	.invert50 {filter: invert(50%);}
	.underline {text-decoration: underline;}
	.overflowY {overflow-y: auto;}
	.clickable{cursor:pointer; text-decoration:underline; color:var(--validColor)};	
/* --- 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 0;}
	.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;}
/* --- END INPUT STYLING --- */

/* --- LIGHT-DARK STYLING --- */
	/* These classes override the light-dark() styling. */
	.darkMode, .darkmode {color-scheme: dark !important;}
	.lightMode, .lightmode {color-scheme: light !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(--borderLight);}
			.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(--borderLight);}
		.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: 10px; width: 100%; overflow-y: overlay; max-height: 85vh; border-spacing: 0; box-sizing: border-box; border: var(--borderLight); 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(--borderLight); 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(--borderLight); cursor: pointer; color: var(--black); background: var(--white);}
			.mainTable>header input {padding: 6px 10px; border-radius: 8px; color: var(--black); border: var(--borderLight); 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: var(--fontSmall); font-weight: 500; color: var(--text);}
		.mainTable tbody>tr:not(:last-child) {border-bottom: var(--borderLight);}
		.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: ""attr(cite)""; 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 --- */


/* --- 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. */
		.mobCol {flex-direction: column;}
		.mobRow {flex-direction: row;}
		.mobMarg {margin-bottom: 100px;}
	}
	@media only screen and (max-width: 1000px) {
		p, a {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);}
	}
	@media only screen and (max-width:950px){
		/* .newHeader {display: none !important;} */
	}
	@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;}
	}
	
    @media only screen and (max-width: 700px) {
        .mobileCol {flex-direction: column !important;}
            .mobileCol > * {width: 100%;}
    }
/* --- END MEDIA QUERIES --- */