/*PROMĚNNÉ*/
	:root {
		--blue:#1b90ef;
		--green:#64af0e;
		--orange:#ff8a00;
		--red:#ef3317;
		--lightgray:#b6b6b6;
		--gray:#808080;
		--purple:#d200ff;
	}
	[color-theme="dark"] {
		--bg-color: #121212;
	    --surface: #1e1e1e;
	    --text-color: #eeeeee;
	    
	    /* Adjusted Brand Colors */
	    --blue: #5cb3ff;
	    --green: #8edb31;
	    --orange: #ffb357;
	    --red: #ff6b57;
	    --lightgray: #444444; /* Darker for borders */
	    --gray: #a0a0a0;      /* Lighter for readability */
	    --purple: #e266ff;
	}
/*PROMĚNNÉ*/

/*OBECNÉ CSS*/
	::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); background-color: #F5F5F5;}
	::-webkit-scrollbar {width: 6px; height: 6px; background-color: #F5F5F5;}
	::-webkit-scrollbar-thumb {background-color: darkgray; border-radius: 10px;}

	body{ margin: 0px; overflow: hidden; }
	input, textarea{width: 100%;border: 1px solid #e1e1e1;border-radius: 5px;padding: 5px 10px;font-size: 12px;box-sizing: border-box;resize: none;outline: none;margin-top: 3px;}
	input[type=checkbox],input[type=radio]{width: auto;}
	select{width: 100%;border: 1px solid #e1e1e1;border-radius: 5px;padding: 5px;outline: none;font-size: 12px;margin-top: 3px;}
	label{width: 100%;display: table;float: left;font-size: 11px;font-style: italic;}
	::placeholder{opacity: 0.5;}

	[disabled]{ opacity: 0.6; filter: contrast(60%); pointer-events: none;}

	.w10{width: 10%;}
	.w20{width: 20%;}
	.w30{width: 30%;}
	.w40{width: 40%;}
	.w50{width: 50%;}
	.w60{width: 60%;}
	.w70{width: 70%;}
	.w80{width: 80%;}
	.w90{width: 90%;}
	.w100{width: 100%;}
	.w33{width: 33.333%;}
	.w25{width: 25%;}

	.left{float: left;}
	.right{float: right;}
	.flex {display:flex;}
	.table {display: table;}
	.items-center{align-items: center;}

	.textRight {text-align: right;}
	.textLeft {text-align: left;}

	.grid {display: grid; row-gap: 10px; column-gap: 20px; grid-auto-rows: min-content;}

	.note {font-size: 11px;opacity: 0.7;margin: 0px;margin-bottom: 5px;}

	.content{
		width: calc(100% - 230px);
	    height: calc(100vh - 100px);
	    float: right;
	    /*background-color: #faf9f8;*/
	    background-image: url(images/bgDot.png);
	    background-color: rgb(248 249 250 / var(--tw-bg-opacity, 1));
	    background-repeat: repeat;
	    background-size: 1.2%;
	    background-position: center;
	    overflow: auto;
	    display: grid;
	    column-gap: 20px;
	    grid-auto-rows: min-content;
	    padding: 20px;
	    box-sizing: border-box;
	}
/*OBECNÉ CSS*/

/*SIDEBAR*/
	.sidebar{
		width: 230px;
	    height: 100%;
	    float: left;
	    position: fixed;
	    border-right: 1px solid #edecef;
	    z-index: 10;
	}

	.sidebar .logo{
		width: 60%;
		margin: 20px auto;
		display: table;

	}

	.sidebar ul, .sidebar ul li, .sidebar ul li a {
	    width: 100%;
	    height: auto;
	    display: table;
	    list-style: none;
	    padding: 0px;
	    box-sizing: border-box;
	}

	.sidebar ul li ul li a {
		width: 230px;
	}

	.sidebar ul li:hover ul {
	    display: table;
	    position: absolute;
	}

	.sidebar ul li:hover ul li:hover ul {
	    display: table !important;
	    position: absolute;
	}


	.sidebar ul li:hover, .sidebar ul li[active] {
	    background-color: #f3f3f3;;
	}

	.sidebar ul li:hover, .sidebar ul li[active] {
	    background-color: #f3f3f3;
	}

	.sidebar ul li a:has(+ ul)::after {
	    content: ">";
	    float: right;
	}

	.sidebar ul li ul {
	    background-color: white;
	    margin-left: 100%;
	    margin-top: -40px;
	    display: none;
	    border: 1px solid #edecef;
	}

	.sidebar ul li ul li ul{
	    background-color: white;
	    margin-left: 100%;
	    margin-top: -40px;
	    display: none !important;
	    border: 1px solid #edecef;
	}

	.sidebar ul li a {
	    padding: 10px 20px;
	    text-decoration: none;
	    color: black;
	    font-family: "Poppins";
	    font-weight: 600;
	    font-size: 13px;
	}

	.sidebar a img {
	    width: 15px;
	    margin-right: 10px;
	    margin-bottom: -2.5px;
	}

	.sidebar ul .swap-mode {
	    position: absolute;
	    bottom: 40px;
	}

	.sidebar ul .logout {
	    position: absolute;
	    bottom: 0px;
	}
/*SIDEBAR*/

/*HLAVIČKA OBSAHU*/
	.contentHeader{
		background-color: white;
	    width: calc(100% - 230px);
	    float: right;
	    border-bottom: 1px solid #edecef;
	    font-family: "Poppins";
	    box-sizing: border-box;
	    padding: 15px 20px;
	}

	.contentHeader h1{
		padding: 0px;
	    margin: 0px;
	    font-size: 20px;
	}

	.contentHeader .backTrack{
		font-size: 12px;
	}

	.contentHeader .backTrack a{
		text-decoration: none;
	    color: black;
	    opacity: 0.7;
	    font-weight: 500;
	    cursor: pointer;
	}

	.contentHeader .backTrack a:not(:last-child)::after {
	    content: ">";
	    margin-left: 5px;
	    margin-right: 2px;
	}

	.contentHeader .backTrack a:hover {
	    opacity: 1;
	}
/*HLAVIČKA OBSAHU*/

/*PATIČKA OBSAHU*/
	.contentFooter{
		width: calc(100% - 230px);
		background-color: white;
		height: auto;
		display: table;
		float: right;
		border-top: 1px solid #edecef;
		box-sizing: border-box;
		padding: 7px 10px;
		font-size: 11px;
		font-family: "Poppins";
		position: fixed;
		bottom: 0;
		right: 0;
	}


	.contentFooter p{
		opacity: 0.5;
		padding: 0px;
		margin: 0px;
		font-weight: 500;
	}


	.contentFooter a{
		margin-right: 10px;
		color: black;
		opacity: 0.5;
		text-decoration: none;
		font-weight: 500;
	}

	.contentFooter a:hover{
		opacity: 1;
	}
/*PATIČKA OBSAHU*/

/*WRAP*/
	.wrap{
		width: 100%;
	    height: fit-content;
	    background-color: white;
	    margin-bottom: 20px;
	    border-radius: 5px;
	    border: 1px solid #edecef;
	    font-family: "Poppins";
	    overflow: visible;
	    min-height: 100px;
	}

	.wrap .wrapHeader {
	    width: 100%;
	    border-bottom: 1px solid #edecef;
	    padding: 10px 15px 10px 15px;
	    box-sizing: border-box;
	    display: inline-grid;
	}

	.wrap .wrapHeader h4 {
	    font-size: 15px;
	    font-weight: bold;
	    padding: 0px;
	    margin: 0px;
	}

	.wrap .wrapContent {
	    height: fit-content;
	    display: block;
	    padding: 20px;
	    box-sizing: border-box;
	}
/*WRAP*/

/*TLAČÍTKA*/
	.button{
		padding: 7px 15px;
		border-radius: 5px;
		border: none;
		outline: none;
		color: white;
	 	font-weight: bold;
	 	background-color: #9f9f9f;
	 	font-family: "Poppins";
	 	font-weight: 600;
	 	display: flex;
	 	align-items: center;
	 	text-decoration: none;
	 	font-size: 13px;
	}

	.button:hover{
		cursor: pointer;
		filter: brightness(1.1);
	}

	.button.active{
		filter: brightness(1.1);
	}

	.button[icon]::before{
		content: "";
		width: 15px;
		height: 15px;
		background-size: contain;
		background-position: center center;
		background-repeat: no-repeat;
		display: table;
		float: left;
		margin-right: 10px;
		filter: invert(100%);
	}

	.button[icon='save']::before{background-image: url(icons/save.png);}
	.button[icon='plus']::before{background-image: url(icons/plus.png);}
	.button[icon='trash']::before{background-image: url(icons/trash.png);}
	.button[icon='printing']::before{background-image: url(icons/printing.png);}
	.button[icon='cross']::before{background-image: url(icons/cross.png); background-size: 70%;}
	.button[icon='check']::before{background-image: url(icons/check.png);  background-size: 90%;}

	.button.blue{background-color: #1b90ef}
	.button.green{background-color: #64af0e}
	.button.orange{background-color: #ff8a00}
	.button.red{background-color: #ef3317}
	.button.blank{background-color: transparent; color: black; opacity: 0.7;}
	.button.blank[icon]::before{filter: invert(0%);}
	.button.blank:hover{opacity: 1;}

	span.red{color: #ef3317}
	span.green{color: #64af0e}
/*TLAČÍTKA*/

/*TAGY*/
	.tag{
		padding: 2px 10px 1px 10px;
		background-color: gray;
		border-radius: 50px;
		float: left;
		margin-left: 7px;
		font-size: 9px;
		font-weight: 600;
		color: white;
		display: table;
	}

	.tag.blue{background-color: #1b90ef}
	.tag.green{background-color: #64af0e}
	.tag.orange{background-color: #ff8a00}
	.tag.red{background-color: #ef3317}

	.tag[Datazilla]{background-color: #1b90ef;}
	.tag[Linkedin]{background-color: #145e9a;}
	.tag[Telefonická]{background-color: #4e88b8;}
	.tag[direct]{background-color: #4e88b8;}

	.tag[signed]{background-color: #ff8a00;}
	.tag[started]{background-color: #1b90ef;}
	.tag[finished]{background-color: #64af0e;}
	.tag[voided]{background-color: #ef3317;}

	.tag[red]{background-color: var(--red);}
	.tag[blue]{background-color: var(--blue);}
	.tag[green]{background-color: var(--green);}
	.tag[orange]{background-color: var(--orange);}


	.tag[status="signed"]{background-color: #ff8a00;}
	.tag[status="started"]{background-color: #1b90ef;}
	.tag[status="finished"]{background-color: #64af0e;}
	.tag[status="voided"]{background-color: #ef3317;}

	.tag[progress="finishedProgress"]{background-color: var(--green);}
	.tag[progress="differentProgress"]{background-color: var(--orange);}
	.tag[progress="voidedProgress"]{background-color: var(--red);}

	.tag[state="pending"], .tag[state="sent"] {background-color: var(--blue);}
	.tag[state="warned_1"]{background-color: var(--orange);}
	.tag[state="warned_2"]{background-color: var(--orange);}
	.tag[state="post-warn"], .tag[state="deactivated"] {background-color: var(--red);}
	.tag[state="tax-wait"]{background-color: var(--green);}
	.tag[state="paid"]{background-color: var(--green);}

	.tag[notices][state="post-warn"]{
		background-color: var(--orange);
	}

	.tag[invoices][state="pending"],.tag[tax][state="pending"]{
		background-color: gray;
	}
	.tag[invoices][state="warned_1"],.tag[tax][state="warned_1"]{
		background-color: var(--orange);
	}
	.tag[invoices][state="warned_2"],.tag[tax][state="warned_2"]{
		background-color: var(--orange);
	}
	.tag[invoices][state="post-warn"],.tag[tax][state="post-warn"]{
		background-color: var(--red);
	}

/*TAGY*/

.telemarketingProgressWrap{
	width: 100%;
}

.telemarketingProgressWrap table{
	width: 100%;
}

.telemarketingProgressWrap thead th{
	border-bottom: 1px solid rgba(0,0,0,0.1);
	text-align: left;
	padding: 5px;
	font-size: 14px;

}

.telemarketingProgressWrap td{
	padding: 5px;
}

.telemarketingProgressWrap tr:nth-child(even) {background-color: #e9eff369;}

.telemarketingProgressWrap span{
	margin: 0px;
	padding: 0px;
	line-height: 14px;
}

.telemarketingProgressWrap .progressBar{
	width: calc(100% - 25px);
	height: 11px;
	background-color: lightgray;
	border-radius: 3px;
	display: table;
	text-align: center;
	font-size: 11px;
	color: white;
	display: flex;
	align-items: center;
	justify-content: space-around;
	position: relative;
	z-index: 1;
	overflow: hidden;
	float: left;
	margin-top: 2px;
	border: 1px solid rgba(0, 0, 0, 0.05);
	cursor: pointer;
}

.telemarketingProgressWrap .percentage{
	width: 17px;
	float: right;
	font-size: 11px;
	margin-top: 2px;
	padding-left: 3px;
}


.telemarketingProgressWrap .progressBar::before{
	--percent: calc(var(--called) / var(--calls) * 100%);
  	width: var(--percent);
	content: "";
	height: 100%;
	position: absolute;
	font-size: 9px;
	display: flex;
	align-items: center;
	justify-content: space-around;
	left: 0px;
	z-index: -1;
}

.telemarketingProgressWrap .progressBar.finished::before{
	background-color: var(--blue);
}
.telemarketingProgressWrap .progressBar.started::before{
	background-color: #7db32d;
}
.telemarketingProgressWrap .progressBar.suspended::before{
	background-color: var(--orange);
}

.telemarketingProgressWrap .progressBar:hover{
	transition: 0.5s;
	transform: scale(1.02);
}

.telemarketingProgressWrap .campaignReportList{
	width: calc(100% - 20px);
	height: auto;
	display: table;
	min-height: 10px;
	margin-left: 15px;
}

.telemarketingProgressWrap .reportDay{
	width: 21px;
	height: 21px;
	background-color: white;
	float: left;
	border: 1px solid rgba(0, 0, 0, .15);
	margin: 1px;
	display: flex;
	align-items: center;
	justify-content: space-around;
	border-radius: 3px;
	position: relative;
}

/*.telemarketingProgressWrap .reportDay {
	width: 21px;
	height: 21px;
	background-color: white;
	display: inline-block;
	margin: 1px;
	text-align: center;
	line-height: 21px;
	font-size: 11px;
	border: 1px solid rgba(0, 0, 0, 0.15);
	contain: layout paint;
	border-radius: 3px;
	will-change: transform;
	position: relative;
}*/

.selectProgressDiv,.campaignProgressDiv{
    position: absolute;
    display: none;
    flex-direction: column;
    top: 25px;
    background-color: white;
    padding: 4px 2px;
    margin-top: 2px;
    align-items: center;
    justify-content: space-evenly;
    box-shadow: 0px 0px 3px 0.1px rgba(0,0,0,0.33);
    border-radius: 8px;
    z-index: 10;
  }

.selectProgressDiv span.tag,.campaignProgressDiv span.tag{
	margin: 2px 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    font-size: 9px;
    border-radius: 3px;
    color: white;
    padding: 0px;
}

.campaignProgressDiv span.tag{
	width: calc(100% - 10px);
	font-family: Poppins;
}

.telemarketingProgressWrap .reportDay .status{
	width: 16px;
	height: 16px;
	float: left;
	margin: 1px;
	display: flex;
	align-items: center;
	justify-content: space-around;
	font-size: 9px;
	font-weight: 600;
	border-radius: 3px;
	color: white;
}

.telemarketingProgressWrap .reportDay .status[progress=finishedProgress]{background-color: var(--green);}
.telemarketingProgressWrap .reportDay .status[progress=voidedProgress]{background-color: var(--red);}
.telemarketingProgressWrap .reportDay .status[progress=differentProgress]{background-color: var(--orange);}


.telemarketingProgressWrap .reportDay.outOfCampaignRange{
	background: repeating-linear-gradient(45deg, #b1b1b155, #b1b1b155 5px, #85858555 5px, #85858555 10px);
}

.telemarketingProgressWrap .reportDay[dayName="SO"],.telemarketingProgressWrap .reportDay[dayName="NE"]{
	background: repeating-linear-gradient(45deg, #b1b1b1, #b1b1b1 5px, #858585 5px, #858585 10px);
}

.telemarketingProgressWrap .reportDay:before{
	content: attr("");
}

.telemarketingProgressWrap .campaignReportListHeadlines{
	width: calc(100% - 20px);
	height: auto;
	display: table;
	min-height: 10px;
	margin-left: 15px;
}

.telemarketingProgressWrap .campaignReportListHeadlines span{
	width: 23px;
	margin: 0px 1px;
	display: table;
	float: left;
	text-align: center;
	position: relative;
	font-weight: 500;
	font-size: 12px;
}

.telemarketingProgressWrap .campaignReportListHeadlines span:before{
	content: attr(dayName);
	opacity: 0.5;
	font-size: 9px;
	position: absolute;
	top: -12px;
	left: 0px;
	width: 100%;
	display: table;
	text-align: center;
}

/*
.telemarketingProgressWrap .campaignInfo{
	width: 40%;
	float: left;
	background-color: blue;
	display: table;
}

.telemarketingProgressWrap .campaignProgressList{
	width: 60%;
	float: right;
	background-color: green;
	display: table;
}*/

/*[stepheader]{font-weight: bold;display: table;}
[stepcontent]{margin-left: 5px;}*/



/*



.contractTable .tag{
	margin: 2px 5px;
    text-align: center;
    cursor: pointer;
    white-space: nowrap;
}

.contractTable .statusSelect{
	position: absolute;
    display: none;
    flex-direction: column;
    top: 18px;
    background-color: white;
    padding: 7px 7px;
    margin-top: 2px;
    align-items: center;
    justify-content: space-evenly;
    box-shadow: 0px 0px 3px 0.1px rgba(0,0,0,0.33);
    border-radius: 0px 15px 15px 15px;
    left: 35px;
    z-index: 10;
}

.sendContractInterface{display: table;}
.popUpSpace .sendContractInterface{   
	width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    display: flex !important;
    align-items: center;
    justify-content: center;
    background-color: rgba(0,0,0,0.3);
    z-index: 100;
}
*/

.popup{
	position: absolute;
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    background-color: rgba(0, 0, 0, 0.2);
}

.contractTable .statusSelect span.tag:hover,.selectProgressDiv span.tag:hover,.campaignProgressDiv span.tag:hover{
	outline: 1px solid rgba(0,0,0,0.2);
    filter: brightness(1.08);
    cursor: pointer;
}



.selectProgressDiv.active,.campaignProgressDiv.active{
	display: flex !important;
}

fieldset{
	display: none;
}

fieldset.active{
	display: flex;
	flex-direction: column;
	width: fit-content;
}



.statusSelectWrap{
	position: relative;
}

.statusSelectWrap .tag{
	cursor: pointer;
}

.statusSelect{
	clear: left;
	background-color: white;
	border: 1px solid rgba(0,0,0,0.1);
	box-shadow: 2px 5px 5px rgba(0,0,0,0.05);
	border-radius: 10px;
	padding: 9px;
	display: none;
	grid-row-gap: 3px;
	margin-top: 20px;
	width: fit-content;
	justify-content: start;
	position: absolute;
	left: 0px;
	top: 0px;
	z-index: 100;
}

.statusSelect.active{display: grid !important;}

.statusSelect .tag{
	margin: 0px;
	cursor: pointer;
	white-space: nowrap;
}

.statusSelect .tag:hover, .tag:has(+ .statusSelect):hover{
	filter: brightness(1.1);
}

.tag:has(+ .statusSelect){
	cursor: pointer;
}










.tabButtonsWrap{
	width: calc(100% - 270px);
    display: table;
    float: right;
    padding: 0px 20px 0px 20px;
    margin-bottom: 0px;
    position: relative;
    background-color: #faf9f8;
    background-image: url(images/bgDot.png);
    background-repeat: repeat;
    background-size: 1.2%;
    background-position: center;
}

.tabButtonsWrap span{
	padding: 5px 15px;
    display: table;
    float: left;
    font-family: "Poppins";
    font-size: 12px;
    font-weight: 600;
    background-color: #f5f5f5;
    margin-right: 5px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    border: 1px solid #edecef;
    border-top: none;
    color: rgba(0, 0, 0, 0.8);
    cursor: pointer;
    border-top: none !important;
}

.tabButtonsWrap span:hover, .tabButtonsWrap span.active{
	background-color: white;
    color: black;
}



.tooltip {
    position: relative;
    display: inline-block;
    background-repeat: no-repeat;
    background-size: 100%;
    width: 10px;
    height: 10px;
}

.pairedDocuments{
	position: relative;
	display: inline-block;
}

.pairedDocuments .pairedIcon{
	background-repeat: no-repeat;
    background-size: 100%;
    width: 10px;
    height: 10px;
}




.pairedDocuments .pairedIcon[state="paired"]{
	background-color: green; /* this becomes the cross color */
  
	-webkit-mask: url("icons/check.png") no-repeat center;
	-webkit-mask-size: contain;
	mask: url("icons/check.png") no-repeat center;
	mask-size: contain;
}

.pairedDocuments .pairedIcon[state="unpaired"]{
	background-color: red; /* this becomes the cross color */
  
	-webkit-mask: url("icons/cross.png") no-repeat center;
	-webkit-mask-size: contain;
	mask: url("icons/cross.png") no-repeat center;
	mask-size: contain;
}



.tooltip{
	 background-image: url('icons/eye.png');
	margin-left: 10px;
}



/* Tooltip text */
.tooltip .tooltiptext, .pairedDocuments .pairedDocumentsText {
		visibility: hidden;
    background-color: white;
    padding: 5px 30px 5px 10px;
    border-radius: 6px;
    position: absolute;
    z-index: 1;
    border: 1px solid #c4c3c7;
    font-size: 11px;
    width: max-content;
}

.pairedDocuments .pairedDocumentsText{
	right: 0;
	top: -5px;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext, .pairedDocuments:hover .pairedDocumentsText {
  visibility: visible;
}

input.error,select.error{
	outline: 1px solid var(--red);
}

input.warning,select.warning{
	outline: 1px solid var(--orange);
}

.redBubble{
	background-color: var(--red);
    color: white;
    border-radius: 15px;
    padding: 1px 14px;
    font-weight: 600;
}

@keyframes slideUp {
	from {
		transform: translateY(100%);
		opacity: 0;
	}
	to {
		transform: translateY(0);
		opacity: 1;
	}
}

.notification {
	position: fixed;
	right: 45px;
	padding: 11px 15px;
	color: white;
	font-family: Poppins;
	font-size: 11px;
	width: 150px;
	word-break: auto-phrase;
	border-radius: 5px;
	animation: slideUp 0.3s ease-out;
}

.notification[SUCCESS]{
	background-color: var(--green);
}
.notification[ERROR]{
	background-color: var(--red);
}
.notification[WARNING]{
	background-color: var(--orange);
}



.notification img{
	width: 6px;
    filter: invert(100%);
    position: absolute;
    top: 0;
    right: 0;
    cursor: pointer;
    padding: 6px;
}

.notification label{
	position: absolute;
    bottom: 1px;
    left: 6px;
    cursor: pointer;
    font-size: 7px;
}

.iconButton{
    background-size: 15px;
    background-repeat: no-repeat;
    background-position: center;
    width: 15px;
    cursor: pointer;
}

.chartsHolder{
	position: absolute;
    bottom: 31px;
    left: calc(50% - 350px);
    width: 700px;
    display: flex;
    align-items: center;
    flex-direction: column;
}

.chartsToggler{
	width: 80px;
    background-color: white;
    height: 20px;
    border-radius: 3px 3px 0px 0px;
    border: 1px solid #edecef;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;


}

.chartContent{
    width: 700px;
    height: 480px;
    background-color: white;
    padding: 20px;
    border-left: 1px solid #edecef;
    border-right: 1px solid #edecef;
}

.chartInfo tbody tr:nth-child(odd){
	background-color: #e9eff369;
}

.bottomTabToggler{
	width: 100%;
	height: 15px;
	border-radius: 7px 7px 0px 0px;
	background-color: white;
	border-top: 1px solid #edecef;
	border-left: 1px solid #edecef;
	border-right: 1px solid #edecef;
	cursor: pointer;
	background-image: url('icons/hide-arrow.png');
	background-size: 15px;
	background-repeat: no-repeat;
	background-position: center;
	}

	.bottomTabToggler.active{
		background-image: url('icons/show-arrow.png');
	}
	#pageLoader{
		position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(255,255,255,0.9);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
	}
		.pageLoaderSpinner {
		    border: 8px solid #f3f3f3; /* light gray */
		    border-top: 8px solid #3498db; /* blue */
		    border-radius: 50%;
		    width: 60px;
		    height: 60px;
		    animation: spin 1s linear infinite; /* loop animation */
		}

		@keyframes spin {
		    0% { transform: rotate(0deg); }
		    100% { transform: rotate(360deg); }
		}

	table.normalTable{
		width: 100%;
	    margin: 0 auto;
	    clear: both;
	    border-collapse: separate;
	    border-spacing: 0;
	}


	table.normalTable, table.normalTable th, table.normalTable td{
		box-sizing: content-box;
	}

	table.normalTable tbody th, table.normalTable tbody td{
		font-size: 13px;
    	padding: 10px 20px;
	}

	table.normalTable thead th{
		font-weight: bold;
	}

	table.normalTable thead th, table.normalTable thead td{
		font-size: 13px;
    	padding: 10px 20px;
	}

	table.normalTable tbody tr td{
		font-weight: 500;
	}

	table.normalTable tbody tr:nth-child(odd) td {
	  background-color:#e9eff369;
	}

	table.normalTable tbody tr:nth-child(odd) td:first-child{
		border-bottom-left-radius: 8px;
    	border-top-left-radius: 8px;
	}

	table.normalTable tbody tr:nth-child(odd) td:last-child{
		border-bottom-right-radius: 8px;
    	border-top-right-radius: 8px;
	}