:root {
    --lightBG: #f4f7fe;
    --tableRowBG: #eee;
    --primaryBorder: #ddd solid 1px;
    --primaryColor: #104D7D;
    --primaryColorLight: #727cd4;
    --primaryColorDark: #002873;
    --secondaryColor: #3dc5e9;
    --secondaryColorLight: #7df8ff;
    --secondaryColorDark: #0094b7;
    --borderRadius: 5px;
    --boxShadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
    --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;
    --h1Font: Open Sans;
    --h2Font: Open Sans;
    --h3Font: Open Sans;
    --h4Font: Open Sans;
    --h5Font: Open Sans;
    --spanFont: Open Sans;
    --pFont: Open Sans;
    --labelFont: Open Sans;
    --tableHeadColor: #E8ECF2;
    --tableCellPadding: 5px 0px;
}


::-webkit-scrollbar {width: 3px; background: #f0f0f0;}
::-webkit-scrollbar-track {}
::-webkit-scrollbar-thumb {border-radius: 10px; background: #888;}

/* input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,textarea:-webkit-autofill,textarea:-webkit-autofill:hover,textarea:-webkit-autofill:focus,select:-webkit-autofill,select:-webkit-autofill:hover,select:-webkit-autofill:focus {-webkit-box-shadow: 0 0 0px 1000px #ffffff inset !important;} */

.shadow { box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); }

body { margin:0; padding:0;  background:var(--lightBG); font-family:Open Sans; width: 100%; height: 100%;}
.container { position: relative; width: 1200px; left: 50%; margin-left: -600px; }
.borderbox {box-sizing: border-box;}
  
.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;}
.standardLink {color: #094C61 !important; text-decoration: none; font-weight:400; }
 
.stdPageHeader {float: left; width: 100%; text-shadow:1px 1px 1px #f7f7f7;text-align:center; margin-top: 10px;  font-size:30px !important; font-weight:100; letter-spacing:1px;  }
.stdPageContent {background: #fff;} 
.windowcontrol { margin-top:170px; margin-bottom:80px; }


.pageHeader {color: #000; background: var(--lightBG); font-size: 24px; position: relative; z-index: 2; padding: 0 15px; margin-left: 30px;width: auto; font-weight: 600;}
.pageHeaderLine {border-top: 2px solid var(--primaryColor); position: relative; margin-bottom: 30px; margin-top: -15px; z-index: 1;}

.autoW {width:auto; float:left;} 
 
 
.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;}

.hidden {display: none;}

.half {width:50%;}
.pointer {cursor: pointer !important;}
.whiteCont {background:#fff; padding:20px; box-sizing:border-box; border: var(--primaryBorder); border-radius:3px;}
 
.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: 18px;}
.standardPopup ul p {margin-top: 10px; margin-bottom: 5px;}
.standardPopup ul {margin-top: 0px;}



.fancyInput, .tableFilters div:not(.fancySearch) {width: auto; margin-left: 10px; padding: 4px 12px; box-sizing: border-box; border: 1px solid #ddd; border-radius: 5px; margin-top: 10px; padding-bottom: 5px; background: #fff;}
.fancyInput label, .tableFilters label {margin-top: 0px !important; margin-bottom: 0px !important; font-size: var(--fontSmall) !important;}
.fancyInput select, .filtersBar select {padding: 0 0 !important; background: none !important; border: none !important; margin-top: 0px !important; margin-bottom: 0px !important;}
.fancyInput input {background:none !important; padding-left:2px !important; padding-right:0px !important; border:none !important; margin: 0 0 !important; padding-bottom:5px;}

.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;}
.autoW {width:auto; float:left;}  /*Gives elem auto: with and float: left;*/
.medFont {font-size: var(--fontMedium);}
.xlFont {font-size: var(--fontxLarge)}
.largeFont {font-size: var(--fontLarge);}
.smallFont {font-size: var(--fontSmall);}
.center {text-align: center;}

 
a { cursor:pointer; }  

/*
input, select {padding:10px 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 !important;}
select {border-radius:5px; outline:none;}
*/

#pwdInput {margin: 10px 0 0 0;}
#confirmPwdInput {margin: 10px 0 0 0;}

.hidden {display:none;}
.italy { 
  font-style: italic; } 
.merriweather {  font-family: 'Abril Fatface', cursive; }
.roboto { font-family:Roboto; margin: 0;}
.opensans { font-family:Open Sans; }
h1, h2, h3 { font-family: 'Open Sans'; }
button { border:none; cursor:pointer; } 
 
.circleBtn {padding:8px; border-radius:100px; border:1px solid #e0e0e0; background:#fafafa;} 
.circleBtn i {font-size:22px; float:right; margin:0 0; padding:0 0; color:#333;}


.gradient {background:#fafafa; }
  

.br {border-radius:5px; }

.fleft {float:left;}
.fright {float:right;}
.fw, div, header, footer, form {float:left; width:100%;}
.dwauto {width:auto;}

.primaryColorBG { background:#CAE4DB; }
.secondaryColorBG { background:#DCAE1D; }
.tertiaryColorBG { background:#00303F; }
.mistbg { background:#7A9D96; }
.lightbg { background:#fafafa; }
.whitebg {background:#fff;}  
.darkbg { background:#333; }
 
.primaryColor { color: red; }
.secondaryColor { color:#fafafa; }  
.tertiaryColor { color:#fafafa; }
.mist { color:#555; }
.light { color:#f0f0f0; } 
.lightdark { color:grey; } 
.dark {color:#555; } 
.colorW {color: #fff;}

.ceruleanborder { border:1px solid #00303F; }

.allpad5 { padding:5px; } 
.allpad10 { padding:10px; } 
.buttonpad { padding:10px 25px; } 
.nosopad10 { padding:10px 0; }

.Fxbig { font-size:40px; }
.Fbig { font-size:26px; }
.Fmed { font-size:18px; }
.Fsml { font-size:15px; }
.Fxsml { font-size:13px; }

.bold { font-weight:600; }

.martop { margin-top:50px; }

.fatbottomborder { padding-bottom:25px; border-bottom:4px solid #f0f0f0; }
.bottomborder { padding-bottom:10px; margin-bottom:10px; border-bottom:2px solid #f0f0f0; }


.header {float: left; width: 100%; padding: 10px 0;}
.header .logo {float: left; width: 100px; height: auto; margin: 0 0;}

.headerOpt {float: right; margin: 10px; text-decoration: none; color: #333;}



/*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);}
	.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: light-dark(var(--tableHeadColor), var(--darkBackground));  top: 0; z-index: 1;}
	.mainTable th { font-weight:600; text-transform:uppercase; border-bottom: 1px solid #ddd; padding-top: 10px;}
	.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;}



@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;}
	
	.header a {margin-top: 13px !important;}
	.third {float: left; margin: 5px 0 !important; width: 100% !important;}
}

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