:root {
		--primaryColor: #3591f2;
		--primaryColorLight: #5aaaff;
		--primaryColorDark: #002873;
		--secondaryColor: #3dc5e9;
		--secondaryColorLight: #7df8ff;
		--secondaryColorDark: #0094b7;
		--tableRowBG: #eee;
		--primaryBorder: #ddd solid 1px;
		--boxShadowHover: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
		--panelPad: 30px 20px;
		--padding: 20px;
		--fontxSmall: 12px;
		--fontSmall: 14px;
		--fontMedium: 16px;
		--fontLarge: 18px;
		--fontxLarge: 22px;
		--borderRadius: 5px;
		--h1Font: Open Sans;
		--h2Font: Open Sans;
		--h3Font: Open Sans;
		--h4Font: Open Sans;
		--h5Font: Open Sans;
		--spanFont: Open Sans;
		--pFont: Open Sans;
		--labelFont: Open Sans;
		--boxShadow: 0 3px 6px rgba(0, 0, 0, 0.08), 0 3px 6px rgba(0, 0, 0, 0.23);;
		--tableHeadColor: #F2F6FC;
		--tableCellPadding: 10px 0px;
		--primaryFontFamily: Open Sans;
		--secondaryFontFamily: Open Sans;
		--tertiaryFontFamily: Open sans;
	}
/* Change the white to any color  gets rid of auto fill Blue background*/input:-webkit-autofill,input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active{ -webkit-box-shadow: 0 0 0 30px white inset !important;}
::-webkit-scrollbar {width: 3px; background: #f0f0f0;}
::-webkit-scrollbar-track {}
::-webkit-scrollbar-thumb {border-radius: 10px; background: #888;}
/*global*/
	input, select {padding:3px 12px; box-sizing:border-box; float:left; width:100%; border: var(--primaryBorder); border-radius:5px; outline:none; margin:10px 0; outline:none;}
	label {width:100%; float:left; padding:0px 2px; box-sizing:border-box; margin:2px 0; margin-top:10px; font-size: 14px;}
	select {border-radius:5px; outline:none;}
	textarea:focus-within {border-color: var(--primaryColor) !important;}
	textarea {width: 100%; float: left; border: 1px solid #ddd; border-radius: 5px; outline: none; resize: none;}
	h1, h2, h3,h4,h5 { font-family: 'Open Sans'; }
	button { border:none; cursor:pointer; }	
	a { cursor:pointer; } 
	body { margin:0; padding:0;  background:#f4f7fe; font-family: var(--primaryFontFamily); width: 100%; height: 100%;}
	.container { position: relative; width: 1200px; left: 50%; margin-left: -600px; }
	resize: none; box-sizing: border-box; padding: 10px 12px; margin-bottom: 10px; font-family: Roboto;}
	.dashboardCont {width: calc(100vw - 250px); height: 100vh; left: 250px; position: fixed; overflow: hidden; box-sizing: border-box; z-index: 0; padding: 30px 50px; background: #fff !important; overflow-y: auto !important;}
	.material-icons {cursor: pointer;}
	body {color: #333;}
	input:focus, select:focus, textarea:focus-within {border-color: var(--primaryColor) !important;}	
/*end global*/

/*Front end helpers*/
	.allpad5 { padding:5px; } 
	.allpad10 { padding:10px; } 
	.pads {padding: 20px;} /*Gives element padding of 20px*/
	.noBottomPads {padding-bottom: 0 !important;} /*no Bottom padding*/
	.noTopPad {padding-top: 0 !important;}
	.margRight {margin-right: 10px;}
	.margLeft {margin-left: 10px;}
	.margBottom {margin-bottom: 10px;}
	.margTop {margin-top: 10px;}
	.xMargTop {margin-top: 20px;}
	.xMargBottom {margin-bottom: 20px;}
	.xMargRight {margin-right: 20px;}
	.xMargLeft {margin-left: 20px;}
	.medMargBottom {margin-bottom: 15px;}
	.medMargTop {margin-top: 15px;}
	.noTopMarg {margin-top: 0;}
	.noBottomMarg {margin-bottom: 0;}
	.noPads {padding: 0 0 !important;}
	.noMarg {margin: 0 0 !important;}
	.fw, div, header, footer, form {float:left; width:100%;}
	.boxsizing {box-sizing: border-box;} /*gives box-sizing: border-box to elem*/
	.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; float:left;}  /*Gives elem auto: with and float: left;*/
	.hidden {display: none;} /*Hides elem*/
	.half {width:50%;} /*makes elem with 50%*/
	.bold { font-weight:600; } 
	.pointer {cursor: pointer;}
	.largeRadius {border-radius: 100px !important;}
	.dark {color:#333; }
	.border {border: 1px solid #ddd;}
	.width1 {width: 100% !important;}
	.medFont {font-size: var(--fontMedium);}
	.xlFont {font-size: var(--fontxLarge)}
	.largeFont {font-size: var(--fontLarge);}
	.fontSmall {font-size: var(--fontSmall);}
	.center {text-align: center;}
	.noBorder {border: none;}
	.borderBottom {border-bottom: 1px solid #ddd;}
	.roboto { font-family:Roboto;}
	.opensans { font-family:Open Sans; }
	.italy { font-style: italic; } 
	.noRadius {border-radius: 0 !important;}
	.colorW {color: #fff;}
	.fBlack {color: #333;}
	.darkbg { background:#333; }
	.radius {border-radius: 8px !important;}
	.lightbg { background:#fafafa; }
	.noBG {background: none !important;}
	.standardLink {color: #5570f1 !important; text-decoration: none;  font-weight: 600; }/*put this on element that is a hyperLink */
	.whiteCont {background:#fff; padding:20px; box-sizing:border-box; border: var(--primaryBorder); border-radius:3px;} /*container with white background and border*/
	.whiteBG {background:#fff !important;}  
	.whiteBorderBox {padding: var(--padding); border: var(--border); box-sizing: border-box; background: #fff; border-radius: var(--borderRadius);} /*white container using the variables to control its padding and radius */
	.primaryColorBG { background: var(--primaryColor); }
	.secondaryColorBG { background: var(--secondaryColor); }
	.tertiaryColorBG { background: var(--tertiaryColor); }
	.fright, .right {float: right;}
	.fleft {float: left;}
	.underline {text-decoration: underline;}
	.secondary {color: var(--secondaryColor);}
	.primary {color: var(--primaryColor);}
/*End front end helpers*/


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



/*Header Styles*/
	.headerOpt {float: right; margin: 10px; text-decoration: none; color: #2C3E50; margin: 0 0;}
	.header {float: left; width: 100%; padding: 10px 0;}
	.header .logo {float: left; width: 130px; height: auto; margin: 0 0;}		
/*end header Styles*/

/*Global buttons and input styles*/
	.standardButton {width: auto; float: left; border: none; outline: none; border-radius: 5px; text-transform: capitalize; padding: 10px; box-sizing: border-box; background:#fafafa; border:1px solid #e0e0e0; color:#555; font-size: var(--fontSmall);}
	.globalButton {width: auto; padding: 10px 12px; box-sizing: border-box; background: var(--primaryColor); color: #fff; border-radius: 5px;  cursor: pointer; font-size: var(--fontSmall);}
	.globalButton.white {border: 1px solid var(--primaryColor); background: #fff; color: var(--primaryColor);}
	.whiteButton {color: #333 !important; background-color: #fff !important; border: 1px solid #ddd; }
	.circleBtn {padding:8px; border-radius:100px; border:1px solid #e0e0e0; background:#fafafa;}
	.circleBtn i {font-size: var(--fontxLarge); float:right; margin:0 0; padding:0 0; color:#333;}
	.fancyBox {width:200px; border: none; background: none; float: left; margin: 0 0;}
	.standardInput {width: auto;}
	.standardInput label {font-weight: 600; font-size: var(--fontSmall);}
	.standardInput input, .standardInput select, .standardInput textarea {margin-top: 2px !important; resize: none;}
	.fancyInput label {padding-left: 6px; font-size: var(--fontSmall);}
	.fancyInput { background-color: #fff; color: #333; border-radius: 8px; width: auto; padding: 6px 10px; box-sizing: border-box; border-radius: 8px; border: 1px solid #ddd; margin-top: 5px;}
	.fancyInput input, .fancyInput textarea, .fancySelect select {border: none; margin: 0 0; border-radius: 8px; background: #fff !important;    border: none !important;    margin: 0 0 !important;   border-top-left-radius: 0px; margin-top: 0px;   border-top-right-radius: 0px;   font-size: var(--fontSmall) !important;  resize: none; box-sizing: border-box;  padding-left: 6px;}
	.tableFilters .fancyInput input, .tableFilters .fancySelect select {}
	.tableFilters .fancyInput i {margin-top: 3px;}
	.fancyInput textarea {padding-top: 0 !important; font-family: open sans;}
	.fancyInput i {float: left; font-size: var(--fontLarge); margin-top: 9px; margin-right: 5px;}
	.selector {width: 200px; background:  transparent; }
	.fancyCheck {width: auto;float: left; margin-top: 3px;}
	.fancyCheck label {float: right; margin: 0 0; width: auto; margin-top: 8px; font-size: var(--fontSmall);} 
	.fancySelect {background: #fff; border-radius: var(--borderRadius); padding: 5px 5px; box-sizing: border-box; width: 200px; border: 1px solid #ddd;} 
	.fancySelect select {border: none; border-radius: 25px; margin-top: 0px;  background: #fff;} /*put this on div containing select*/
	.fancySelect span {font-size: var(--fontSmall);}
/*end Global button and input styles*/

/*Global Table styles*/
	.mainTable {margin-top: 10px; width: 100%; overflow-y: overlay; max-height: 85vh; border-spacing: 0;}
	.mainTable table {width: 100%; border-spacing: 0;}
	.mainTable th {text-align: left;}
	.mainTable th, .mainTable td {padding: var(--tableCellPadding); border-bottom: 1px solid #ddd;}
	.mainTable td:not(.hidden), .mainTable th:not(.hidden) {padding-left: 15px;}
	.mainTable td:not(.hidden) ~ .mainTable td:not(.hidden) {padding-left: 0px;}
	.mainTable th:not(.hidden) ~ .mainTable th:not(.hidden) {padding-left: 0px;}
	.mainTable thead { background: var(--tableHeadColor);  top: 0; z-index: 1;}
	.mainTable th { font-weight:600; text-transform:uppercase; background: var(--tableHeadColor);}
	.mainTable th[onclick] {text-decoration: underline;}
	.mainTable tr:nth-child(2n + 1):not(.mainTable thead tr) {}
	.mainTable tr:nth-child(2n) {}
	.mainTable tr {background: #fff;}
	.mainTable th, .mainTable td {font-size: var(--fontSmall);}
	.mainTable thead th:nth-child(1) {border-top-left-radius: 5px;}
	.mainTable thead th:nth-last-child(1) {border-top-right-radius: 5px;}
	.mainTable td i.fright {padding-right: 15px;}
	.tableFilters {display: flex; flex-direction: row; align-items: flex-start; margin-bottom: 10px;}
	.tableFilterRight {margin-left: auto;}
	/* 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: #fff; text-align: center;}
	 {content: 'No Rows'; float: left; width: 100%; margin: 0 auto; padding: 15px 0px; background: #fff; 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-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, #fff 0%, #fff 40%, var(--primaryColor) 40%, var(--primaryColor) 60%, #fff 60%, #fff 100%); }
	

.tableTab { box-sizing: border-box; width: auto; cursor: pointer; border-radius: 10px 10px 0px 0px; background: #fff; padding-top: 9px;}
.tableTab.active {background: var(--primaryColor); color: #fff;}
.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(--fontSmall); border-right: 1px solid #eee;}
.tableTab i.add {font-size: var(--fontExtraLarge); padding: 2px 0 !important;}
.tableTab i.close {position: absolute; font-size: var(--fontSmall); margin-left: 15px; border-radius: 20px; display: inline-block; margin-top: -8px; padding: 4px;}
.tableTab i.close:hover {background: #ddd;}

.mainTable[data-more-to-get="1"] .loading {padding: 20px 0; text-align: center;}
.mainTable[data-more-to-get="0"] .loading {display: none;}
.mainTable[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, #fff 0%, #fff 40%, var(--primaryColor) 40%, var(--primaryColor) 60%, #fff 60%, #fff 100%);}

.tableTab.showColumnsList {padding: 9px 10px; padding-bottom: 8px;}
.tableTab.showColumnsList i {float: left; width: 100%; box-sizing: border-box; padding: 0 0; border: none !Important;}


.customTableTabs {padding: 10px 0; padding-bottom: 0px; border-bottom: 1px solid #eee; margin-bottom: 20px;}

.columnsGroup {width: auto;}
.columnsPopulate {width: 220px; position: fixed; margin-top: 25px; box-sizing: border-box; padding: 15px; background: #fff; z-index: 2; box-shadow: var(--boxShadow); border-radius:10px;}
.columnsPopulate .inp:nth-child(1) label {font-weight: 600; text-decoration: underline; cursor: pointer;}
.columnsPopulate .inp {padding: 2px 0;}

.columnsPopulate .inp input[type="checkbox"] {width: auto; margin: 0; float: right; margin: 2px 0; accent-color: var(--primaryColor); color: #fff;}
.columnsPopulate .inp label {width: auto; margin: 0; padding: 0; font-size: var(--fontSmall) !important;}
.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 #fff; 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);}
.columnsPopulate input[type="checkbox"] {line-height: 2.1ex;}
.columnsPopulate input[type="checkbox"] {position: absolute; left: -999em;}
.columnsPopulate input[type="checkbox"] + label {position: relative; overflow: hidden; cursor: pointer;}
.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: 4px; 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: 1px solid var(--primaryColor); border-radius: 4px; margin-right: 0.5em;}
	
 
/*global Table Styles*/

/*Swal styles*/
	.swal-modal {float: none;}
	.swal-button-container {width: 100%; text-align:center;}
	.swal-title {width: 100%;}
	.swal-icon {float: none;}
	.swal-title, .swal-footer {box-sizing: border-box;}
/*end swal styles*/

 /*Standard Pop up styles*/
	.standardPopup .fancySelect label {margin-bottom:0px !important;}
	.bottomSection {padding:15px 20px; box-sizing:border-box; border-top:1px solid #ddd;} 
	.mainSection {padding:0px; box-sizing:border-box; height:calc(100vh - 131px); overflow-y:auto; position:relative;}
	.standardPopup {height:100vh !important; width:800px !important; top:0 !important; border-radius:0px !important; display:block !important; left:unset !important; right:-800px !important;}
	.standardPopup.expanded {right:0 !important;}
	.standardPopup {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: #fff;}
	.standardPopup.expanded {display:block;}
	.standardPopup h1 { margin: 0 0; padding: 0 0;}
	.standardPopup i {cursor: pointer;}
	.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; box-sizing: border-box;}
	.standardPopup label {margin: 2px 0; margin-top: 10px;}
	.standardPopup input {-webkit-appearance:none; outline: none; border:  var(--primaryBorder);}
	.standardPopup textarea, .standardPopup select {resize:none; outline: 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 p {margin-top: 10px; margin-bottom: 5px;}
	.standardPopup ul {margin-top: 0px;}
	.film {width: 100vw; height: 100vh; position: fixed; background: rgba(0,0,0,0.35); cursor: pointer; z-indeX: 101 !important; top: 0; left:0; display:none;}
	.film.expanded {display:block;}
 /*Standard pop up styles*/

/*MEDIA QUERIES*/
@media only screen and (max-width: 1400px) {
	.container {width:100% !important; padding:0px 40px; box-sizing: border-box; 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;}
} 
@media only screen and (max-width: 800px) {
	:root {
		--borderRadius: 3px;
		--panelPad: 15px 10px;		
	}
	.container {padding:0px 20px;}
	.footer {padding: 0 0 !important;}
	.footer div {width: 100% !Important; box-sizing: border-box; padding: 20px 2.5%; margin: 0 0 !important;}
	.third {float: left; margin: 5px 0 !important; width: 100% !important;}
}
/*END MEDIA QUERIES*/