:root {
	--primaryColor: #ED4A8E;
	--primaryColorLight: #5aaaff;
	--primaryColorDark: #002873;
	--secondaryColor: #006bd6;
	--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 10px 20px rgba(0,0,0,0.1);
	
	--color-primary: #ED4A8E; 
	--color-primary-light: #ff7fbe;
	
	--engaygeBlue: #1B74E3;   

	--trans-primary: rgba(255,127,190, .25); 
	--trans-secondary: rgba(127,191,255, .25);
	--tableHeadColor: #E8ECF2;
	--tableCellPadding: 5px 0px;
}

@view-transition {navigation: auto;}

.hidden[style*="display: inline-block;"] { display: inline-block !important; }
.hidden[style*="display: block;"] { display: block !important; }
.hidden[style*="display: unset;"] { display: unset !important; }
.hidden[style*="display: table;"] { display: table !important; }
.hidden[style*="display: grid;"] { display: grid !important; }
.hidden[style*="display: flex;"] { display: flex !important; }
.hidden[style*="display: inline-flex;"] { display: inline-flex !important; }

#cometchat__widget {height:0px !important;}

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


html {
	overflow-y: overlay;
	overflow-x:hidden;
}
.header {z-index: 3 !important;}
.notificationsDrop {box-sizing:border-box;}

.swal-text {float:left; width:100%; text-align:center; margin-left:0px !important; margin-right:0px !important; padding-left:20px !important; padding-right:20px !important; box-sizing:border-box; max-width:100% !important; margin: 0 0 !important;}
.swal-button-container button {float:unset; display:inline-block; margin:0px 5px;}

.third {width: calc((100% / 3) - (40px / 3)); margin-right: 20px; display: inline-block;}
.third:nth-child(3) {margin-right: 0;}
.mobileNav.active {top: 0;}
.shadow { box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); }
html {height: -webkit-fill-available;}
body { margin:0; padding:0;  background:#fff; font-family:Open Sans; width: 100%; color:#333; min-height: 100vh; min-height: -webkit-fill-available; overflow: overlay;}
.container { position: relative; width: 1200px; left: 50%; margin-left: -600px; }
.borderbox {box-sizing: border-box;}

.engaygeBlueButton, .engaygeWhiteButton { padding:10px 15px; border-radius:5px;  background:var(--engaygeBlue); color:#fff; font-weight:600; }  
.engaygeWhiteButton { background:#fafafa; color:#333; }


.standardBorder {border: 1px solid #ddd; border-radius: 8px;} 

.dashboardCont {width: 100vw; height: calc(100vh - 67px); top: 67px; position: fixed; overflow: hidden; box-sizing: border-box; z-index: 0; padding: 30px 50px; background:#E7EBEE !important;}   

.dashboardContainer {width: 95%; height: calc(100vh - 121px); top: 61px; left: 0px; position: fixed; overflow: auto; padding: 30px 2.5%; z-index: 0;} 

.underline {text-decoration: underline;}

.center {text-align: center;}

.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: var(--engaygeBlue) !important; text-decoration: underline; 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; }

.autoW {width:auto; float:left;} 

select:focus, input:focus {border-color: var(--secondaryColor) !important;}

.film {width: 100vw; height: 100vh; position: fixed; background: rgba(0,0,0,0.35); cursor: pointer; z-indeX: 4 !important; top: 0; left:0; display:none;}
.film.expanded {display:block;}

.hidden {display: none;}

.half {width:50%;}

.margTop {margin-top: 10px;}

.topMarg {margin-top: 20px;}

.userMain {height: calc(100vh - 86px); overflow-y: auto; padding-bottom: 75px !important; padding-top: 50px !important; box-sizing: border-box;}

select {width: auto; float: left; border: 1px solid #ddd; padding: 9px 12px; box-sizing: border-box; border-radius: 5px; margin-left: 10px; background: #fff;}

.whiteCont {background:#fff; padding:20px; box-sizing:border-box; border:1px solid #ddd; border-radius:3px;}
.whitePanel {background: #fff; border-radius: 15px; box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;}
.standardPopup {position: fixed; display:none; top: 10vh; width: 600px; max-width: 100vw; left: 50%; margin-left: -300px; z-index: 202; 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: 1px solid #ddd;}
.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: 1px solid #ddd;}
.standardPopup textarea, .standardPopup select {resize:none; outline: none; border-bottom: 1px solid #ddd;}
.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;}

.pageHeader {background: #fff; 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;}
a { cursor:pointer; }  

input {padding:10px 12px; box-sizing:border-box; float:left; width:100%; border:1px solid #ddd; 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;}
textarea {resize: none; padding: 10px; box-sizing: border-box; border-color: #ddd; font-family: 'Open Sans'; border-radius: 5px;}
textarea:focus-visible {outline:1px auto var(--secondaryColor)}

.hidden {display:none;}
.italy { 
font-style: italic; } 
.merriweather {  font-family: 'Abril Fatface', cursive; }
.roboto { font-family:Roboto; }
.opensans { font-family:Open Sans; }
button { border:none; cursor:pointer; } 

.circleBtn {padding:8px; border-radius:100px; border:1px solid #e0e0e0; background: var(--primaryColor);} 
.circleBtn i {font-size:22px; float:right; margin:0 0; padding:0 0; color:#333;}

.marginUp {margin-top: -15px;}

div:focus-visible, button:focus-visible, a:focus-visible, img:focus-visible {outline: 1px auto var(--secondaryColor)}

.gradient {background:#fafafa; }

.whiteBG {background: #fff;}

.borderBottom {border-bottom: 1px solid #ddd;}

.width1 {width: 100%;}

.boxsizing {box-sizing: border-box;}

.xPads {padding: 20px;}

.NSpads {padding: 10px 0;}

.topPads {padding-top: 20px;}

.bottomPads {padding-bottom: 20px;}

.padsBottom {padding-bottom: 10px;}

.pads {padding: 10px;}

.br {border-radius:8px; }

.fleft {float:left;}
.fright {float:right;}
.fw, div {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; }

.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; }
.fontSmall {font-size: 14px;}

.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; }

.bottomMargin {margin-bottom: 10px;}

.topBorder {border-top: 1px solid #ddd;}

.header {float: left; width: 100%; padding: 10px 0; position: sticky !important; top: 0; left: 0;}
.header .logo {float: left; width: 200px; height: 55px; margin: 0 0; }

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

/*________Sweet Alert 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;}

.mainBar {height: calc(100vh - 119px); overflow-y: auto; width: 100% !important; padding: 30px 10px; box-sizing: border-box; margin: 0 !important;}

/*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); 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%);}


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



@media only screen and (min-width: 1000px) {
	.mainBar {width: calc(100vw - 100px) !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: 800px) {
	.container {padding:0px 5px;}
	.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;}
	.closeIcon {position: relative; top: -50px;}
	.mainBar {margin-bottom: 100px;}
	.userMain {padding-bottom:50px !important;}
	.app__messenger {width: 100vw !important; position: fixed !important; left: 0; top: 100px !important;}
	#cometChatContainer div:nth-child(1) {top: 100px; float: unset; width: 100vw; position: fixed; left: 0;}
	#chatFilm { top: 0px !important; height: 100vh !important; }
	.grecaptcha-badge {display:none !important;}
}

@media only screen and (max-width: 500px) {
	body {background: #fff;}
}

@media only screen and (min-width: 800px) {
	.BREAD {display: none !important;}
}