.flexGrow{
	flex-grow: 1;
}
.profileLoader, .smallPreLoader{
	width:36px;	
}
.status{
	display: none;
	line-height: 20px;
	font-family: var(--primary-font-family);
	font-size: var(--extrasmall-font-size);
	font-weight: bold;
	letter-spacing: 0px;
	color: #fff;	
	padding: 0 20px;
	border-radius: 4px;
	background-color: var(--status-active);
}
.status.On{
	background-color: var(--good-color);
}

.status{
	display: inline-block;
}
.status.A{
	background-color: var(--good-color);
}
.status.I, .status.B{
	background-color: var(--error-color);
}
.status.R{
	background-color: var(--warn-color);
}
.status.C{
	background-color: var(--error-color);
}
.status.F{
	background-color: var(--finish-color);
}
.status.S{
	background-color: var(--warn-color);
}	
.status.A::after{content:"Active";}
.status.B::after{content:"Blocked";}			
.status.I::after{content:"Inactive";}
.status.R::after{content:"Draft";}
.status.C::after{content:"Cancelled";}
.status.F::after{content:"Finished";}
.status.S::after{content:"Scheduled";}			
select, textarea, input{
	outline: none;
}
input[type=number], input[type=text], input[type=password], select{
	width:100%;
	height: 40px;
	line-height: 38px;
	border-radius: var(--input-border-radius);
	border: solid 1px var(--input-border-color);
	background-color: #FFF;
	padding-left: 10px;
}
textarea {
	width:100%;
	min-height: 40px;
	border-radius: var(--input-border-radius);
	border: solid 1px var(--input-border-color);
	background-color: #FFF;
	padding: 10px;	
	resize: none;
}
input[type=number].error, input[type=text].error, input[type=password].error, select.error, input[type=checkbox].error + label::before{
	border-color: var(--error-color);
}
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type=number] {
  -moz-appearance: textfield;
}

label[for].error{
	color: var(--error-color);
}

input[type=checkbox] + label,
label[for]{
	display: inline-block;
	width:100%;
	font-family: var(--primary-font-family);
	color: var(--input-label-color);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.5;
	margin-bottom: 8px;
}

input[type=checkbox]{
	display: none;
}
input[type=checkbox] + label{
	color: var(--primary-text-color);
	font-weight: 600;
	font-size: var(--primary-font-size);
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 15px;
}
input[type=checkbox] + label::before{
	content: "";
	display: inline-block;
	width: 20px;
	height: 20px;
	border-radius: 6px;
	border: solid 1px var(--input-border-color);
	background-color: var(--input-inactive-color);	
}
input[type=checkbox]:checked + label::before{
	background-color: var(--primary-style-color);
}
.timeSelect{
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 7px;
	select{
		width: 60px;
	}
}
.codeInput{
	display:flex;
	flex-direction: row;
	justify-content: space-between;
	width: 100%;
	input{
		width: 40px;
		padding: 0;
		text-align: center;
		font-size: 20px;
		font-weight: bold;
	}
}
button, button.Regular{
	width: 100%;
	height: var(--input-height);
	line-height: var(--input-height);
	background-color: var(--primary-style-color);
	border-radius: var(--input-border-radius);
	font-family: var(--primary-font-family);
	border: 0;
	color: #FFF;
	font-size: var(--semi-font-size);
	font-weight: 600;
	cursor: pointer;
	padding: 0 40px;
}
button.inactive{
	background-color: var(--input-inactive-color);
}
strong{
	width:100%;
	font-size: var(--strong-font-size);
}
@keyframes showError {
  0% {
    opacity: 0;
  }
  10%, 80%{
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
#error {
	font-family: var(--primary-font-family);
	width: 320px;
	height: auto;
	padding: 125px 34px 26px 34px;
	color: var(--error-color);
	position: fixed;
	top: 40px;
	left: 50%;
	transform: translate(-50%,0);
	text-align: center;	
	border-radius: 8px;
	box-shadow: 0 8px 12px 6px rgba(0, 0, 0, 0.04);
	background-color: #fff;	
	background-image: url("./i/errors/error.png");
	background-repeat: no-repeat;
	background-position: center 38px;
	background-size: 124px auto;
	animation-name: showError;
	animation-duration: 3s;
	animation-timing-function: linear;
	animation-play-state: paused;
	opacity: 0;
	z-index: 10000;
}
#error.Show{
	animation-play-state: running;
}
.Icon{
	display: inline-block;
	cursor: pointer;
	mask-repeat: no-repeat;
	-webkit-mask-repeat: no-repeat;	
	mask-position: center;
	-webkit-mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;		
	background-color: #000;
	width: 24px;
	height: 24px;
}
.Icon.Dashboard{-webkit-mask-image: url(./i/Icons/Dashboard.svg); mask-image: url(./i/Icons/Dashboard.svg);}
.Icon.Wallet{-webkit-mask-image: url(./i/Icons/Wallet.svg); mask-image: url(./i/Icons/Wallet.svg);}
.Icon.Transfers{-webkit-mask-image: url(./i/Icons/Transfers.svg); mask-image: url(./i/Icons/Transfers.svg);}
.Icon.Recipients{-webkit-mask-image: url(./i/Icons/Recipients.svg); mask-image: url(./i/Icons/Recipients.svg);}
.Icon.Cards{-webkit-mask-image: url(./i/Icons/Cards.svg); mask-image: url(./i/Icons/Cards.svg);}
.Icon.Profile{-webkit-mask-image: url(./i/Icons/Profile.svg); mask-image: url(./i/Icons/Profile.svg);}
.Icon.Settings{-webkit-mask-image: url(./i/Icons/Settings.svg); mask-image: url(./i/Icons/Settings.svg);}
.Icon.Usernav{-webkit-mask-image: url(./i/Icons/Usernav.svg); mask-image: url(./i/Icons/Usernav.svg);}
.Icon.Add{-webkit-mask-image: url(./i/Icons/addNew.svg); mask-image: url(./i/Icons/addNew.svg);}
.Icon.Close{-webkit-mask-image: url(./i/Icons/Close.svg); mask-image: url(./i/Icons/Close.svg);}
.Icon.Password{-webkit-mask-image: url(./i/Icons/Password.svg); mask-image: url(./i/Icons/Password.svg);}
.Icon.TFA{-webkit-mask-image: url(./i/Icons/TFA.svg); mask-image: url(./i/Icons/TFA.svg);}
.Icon.Language{-webkit-mask-image: url(./i/Icons/Language.svg); mask-image: url(./i/Icons/Language.svg);}
.Icon.Notifications{-webkit-mask-image: url(./i/Icons/Notifications.svg); mask-image: url(./i/Icons/Notifications.svg);}
.Icon.Logout{-webkit-mask-image: url(./i/Icons/logout.svg); mask-image: url(./i/Icons/logout.svg);}
.Icon.World{-webkit-mask-image: url(./i/Icons/World.svg); mask-image: url(./i/Icons/World.svg);}
.Icon.Bin{-webkit-mask-image: url(./i/Icons/Bin.svg); mask-image: url(./i/Icons/Bin.svg);}
.Icon.Sort{-webkit-mask-image: url(./i/Icons/Sort.svg); mask-image: url(./i/Icons/Sort.svg);}
.Icon.Submenu{-webkit-mask-image: url(./i/Icons/Submenu.svg); mask-image: url(./i/Icons/Submenu.svg);}
.Icon.Prev{-webkit-mask-image: url(./i/Icons/Prev.svg); mask-image: url(./i/Icons/Prev.svg);}
.Icon.Next{-webkit-mask-image: url(./i/Icons/Next.svg); mask-image: url(./i/Icons/Next.svg);}
.Icon.Start{-webkit-mask-image: url(./i/Icons/Start.svg); mask-image: url(./i/Icons/Start.svg);}
.Icon.End{-webkit-mask-image: url(./i/Icons/End.svg); mask-image: url(./i/Icons/End.svg);}
.Icon.Pages{-webkit-mask-image: url(./i/Icons/Pages.svg); mask-image: url(./i/Icons/Pages.svg);}
.Icon.Faq{-webkit-mask-image: url(./i/Icons/Faq.svg); mask-image: url(./i/Icons/Faq.svg);}
.Icon.Slides{-webkit-mask-image: url(./i/Icons/Slides.svg); mask-image: url(./i/Icons/Slides.svg);}
.Icon.Challenges{-webkit-mask-image: url(./i/Icons/Challenges.svg); mask-image: url(./i/Icons/Challenges.svg);}
.Icon.Customers{-webkit-mask-image: url(./i/Icons/Customers.svg); mask-image: url(./i/Icons/Customers.svg);}
.Icon.Tickets{-webkit-mask-image: url(./i/Icons/Tickets.svg); mask-image: url(./i/Icons/Tickets.svg);}
.Icon.Target{-webkit-mask-image: url(./i/Icons/Target.svg); mask-image: url(./i/Icons/Target.svg);}
.Icon.Download{-webkit-mask-image: url(./i/Icons/download.svg); mask-image: url(./i/Icons/download.svg);}
.Icon.Reports{-webkit-mask-image: url(./i/Icons/Reports.svg); mask-image: url(./i/Icons/Reports.svg);}
.TargetIcon{
	display: inline-block;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;		
	width: 24px;
	height: 24px;	
	background-image: url(./i/Icons/Target.svg);
}
.contentWrapper {
	display: grid;
	grid-template-columns: 208px auto;
	grid-template-rows: 60px auto;
	width: 100%;
	height: 100%;
}
.contentWrapper:has(.submenuWrap){
	grid-template-columns: 208px 247px auto;
	.usernavWrap{
		grid-column-start: 2;
		grid-column-end: span 2;	  
	}
	.Content{
		grid-column-start: 3;
	}
}
.tabs{
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	a{
		padding: 0 40px;
		line-height: 28px;
		color: var(--primary-text-color);
		border-bottom: 3px #FFF solid;
	}
	a.On{
		border-bottom: 3px var(--menu-item-hover) solid;
	}
}
.Content{
	grid-row-start: 2;	
	width: 100%;
	max-height:100%;
	padding: 0px 33px 26px 33px;
	color: var(--cabinet-font-color);
	overflow: auto;
	background-color: var(--content-back);
	section.flex{
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		gap: 20px;
	}
	>section{
		width: 100%;
		height: auto;
		border-radius: 8px;
		box-shadow: 0 8px 12px 6px rgba(0, 0, 0, 0.04);
		background-color: #fff;	
		padding:0 0 28px 0;
		>section, .tabs, .filters{
			width: calc(100% - 56px);
			height: auto;			
		}
		>section{
			background-color: var(--input-inactive-color);
			border-radius: 6px;
			padding: 24px 24px 32px 24px;
			margin: 0 28px;
			display: inline-flex;
			flex-direction: column;
			gap:22px;
		}
		>section.hidden{
			display: none;
		}
		.filters{
			display: inline-flex;
			flex-direction: row;
			justify-content: flex-start;
			gap: 32px;
			margin: 28px;
			background-color: var(--input-inactive-color);
			border-radius: 6px;
			padding: 24px 24px 32px 24px;
			button{
				background-color: var(--primary-style-color);
				color: #FFF;
			}
		}
		.tabs{
			padding: 0 12px;
			margin: 0 28px;
		}
		.block{
			display: flex;
			flex-direction: column;
			gap:24px;
			padding: 24px;
			border-radius: 6px;			
			background-color: var(--input-inactive-color);
			align-items: flex-start;
		}
		.Line{
			padding: 0 28px;
			height: auto;
			font-family: var(--primary-font-family);
			font-size: var(--primary-font-size);
		}
		>h3,.Line>h3{
			display: flex;
			width:100%;
			flex-direction: row;
			justify-content: flex-start;
			align-items: center;
			font-size: var(--semi-font-size);
			font-family: var(--primary-font-family);
			font-weight: 600;
			color: var(--primary-text-color);
			padding: 22px 28px;
			gap: 37px;
			position: relative;
			margin:0;
			.Search{
				position: absolute; 
				right: 28px;
				width: 300px;
			}
		}
		button:not(.Regular){
			height: 36px;
			padding:0;
			display:flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: center;
			gap: 12px;
			width: initial;
			background-color: var(--content-button);
			color: var(--primary-text-color);
			padding: 0 12px;
			font-weight: 600;
			font-size: var(--primary-font-size);
			font-family: var(--primary-font-family);
			.Icon {
				background-color: var(--primary-text-color);
				display: inline-block;
				width: 24px;
				height: 24px;
			}
		}
		button:has(.Icon){
			padding: 0 36px 0 12px;
		}
		button.active{
			background-color: var(--primary-style-color);
			color: #FFF;
		}
	}
}
.Table{
	display:flex;
	flex-direction: column;
	width: 100%;
	.Headers{
		width: 100%;
		display:flex;
		flex-direction: row;
		justify-content: flex-start;
		color: var(--input-label-color);
		text-transform: uppercase;
		font-family: var(--primary-font-family);
		font-size: var(--small-font-size);
		line-height: 28px;
	}
	.Data{
		width: 100%;
		color: var(--primary-text-color);
		font-family: var(--primary-font-family);
		font-size: var(--primary-font-size);		
		.row{
			width: 100%;
			min-height: 36px;
			border-top: 1px var(--borders-color) solid;
			display:flex;
			flex-direction: row;
			justify-content: flex-start;			
			align-items: center;
			overflow: hidden;
			> div{
				flex-shrink: 0;
			}
		}
		a{
			color: var(--primary-text-color);
			font-weight: 600;
		}
	}
	.Grow {
		flex-grow: 1;
	}
	.Headers>div:nth-child(1),
	.row>div:nth-child(1){
		padding-left: 28px;
	}
}
.Pagination{
	display: inline-flex;
	width: 100%;
	margin: 16px 0;
	justify-content: space-between;
	color: var(--primary-text-color);
    font-family: var(--primary-font-family);
    font-size: var(--primary-font-size);	
	>div{
		width: max-content;
		display: flex;
		justify-content:flex-start;
		gap: 7px;
		align-items: center;
	}
	select{
		width: 80px;
	}
	.nav{
		margin-right: 50px;
		a{
			display: inline-block;
			height:24px;
			width: 24px;
		}
		.Off{
			.Icon{
				background-color: #CBD6DE;
			}
		}
	}
}
@keyframes sideMenu {
  0% {left: 100%;}
  100% {left: 50%;}
}
@keyframes sideMenuBack {
  0% {left: 50%;}
  100% {left: 100%;}
}
.sideDialog{
	position: fixed;
	top: 0;
	left: 100%;
	width: 50%;
	height: 100%;
	background-color: #fff;
	animation-name: sideMenu;
	animation-duration: 500mS;
	animation-timing-function: ease-in-out;
	animation-play-state: paused;
	animation-iteration-count: 1;
	padding: 28px;
	color: var(--primary-text-color);
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	gap:0;
	.actions:empty, .top:empty{
		display: none;
	}
	.content{
		flex-grow: 1;
		overflow: hidden;
		overflow-y: auto;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		gap:15px;
		padding: 24px 0;
	}
	.actions{
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		gap: 10px;
		button{
			width: initial;
			padding: 0 24px;
		}
	}
	.CloseAct{
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		height: 24px;
		gap: 12px;
		color: #000;
	}
	h2{
		font-family: var(--primary-font-family);
		font-size: var(--h2-size);
		font-weight: bold;
		margin:0;
	}
	.flexrow{
		width: 100%;
		height: auto;
		display: inline-flex;
		column-gap: var(--gap);
		align-items: center;	
	}
}
.sideDialog.opened{
	animation-play-state: running;
	left: 50%;
}
.sideDialog.opened.closed{
	animation-name: sideMenuBack;
	animation-play-state: running;
	left: 100%;
}
.modalDialog{
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	min-width: 60px;
	min-height: 60px;
	border-radius: 10px;
	background-color: #fff;	
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap:0;
	.modalIcon{
		display: flex;
		flex-direction: row;
		justify-content: center;
		margin: 0 0 12px 0;
		img{
			width: 92px;
		}
	}
	.CloseAct{
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		height: 24px;
		gap: 12px;
		color: #000;
		position: absolute;
		top: 28px;
		right: 28px;
	}
	h3:empty{
		display: none;
	}
	h3{
		display: block;
		width: 100%;
		font-family: var(--primary-font-family);
		font-size: var(--h2-size);
		font-weight: bold;
		text-align: left;
		height: 36px;
		line-height: 36px;
		margin:0;
	}
	.help {
		font-family: var(--primary-font-family);
		font-size: var(--primary-font-size);
		color: var(--input-label-color);
		font-weight: bold;
		text-align:center;	
		margin: 4px 0;		
	}
	.body{
		flex-grow: 1;
		overflow: hidden;
		padding: 20px;
	}
	.actions{
		display: flex;
		height: auto;
		width:100%;
		flex-direction: row;
		justify-content: flex-end;
		gap: 10px;
		button {
			width: initial;
			padding: 0 15px;
		}
	}
	.actions:empty{
		display: none;
	}
}
.modalDialog.Quiz .CloseAct{display: none;}

input.datePicker{
	padding-left: 38px;
	background-image: url("./i/Ui/calendar.svg");
	background-repeat: no-repeat;
	background-position: 12px center;
}
.Icon.Close[for=datePicker]{
	position: absolute;
	z-index:2;
	right: 10px;
	top: 50%;
	transform: translate(0,-50%);
}
input.datePicker:placeholder-shown + .Icon.Close[for=datePicker]{
	display: none;
}
.uiCalendar {
	display:block;
	background-color: #FFF;
	position: absolute;
	z-index:5;
	font-family: var(--primary-font-family);
	.header{
		width:100%;
		display: inline-flex;
		flex-direction: row;
		justify-content: space-between;
		padding: 12px;
		font-size: var(--primary-font-size);
		font-weight: 600;
	}	
	table{
		border-spacing: 0px;
		border-collapse: separate;
		thead th{
			background-color: var(--input-label-color);
			font-size: var(--primary-font-size);
			font-weight: 600;
			color: var(--input-inactive-color);
			padding: 12px;
		}	
		thead th:first-child{
			border-top-left-radius: 1vh; 
			border-bottom-left-radius: 1vh; 
		}		
	}	
	thead th:last-child{
		border-top-right-radius: 1vh; 
		border-bottom-right-radius: 1vh; 
	}
	tbody td{
		height: aut0;
		padding:0;
		min-width: 4.8vh;
		min-height: 4.8vh;
		a{
			display: block;
			font-size: var(--primary-font-size);
			font-weight: 600;
			width: 4.4vh;
			height: 4.4vh;	
			line-height: calc(4.4vh - 4px);	
			border-radius: 4.4vh;
			border: 2px #FFF solid;
			color: #000;
			margin:0;
			text-align: center;
		}		
		a.today{
			background-color: var(--input-inactive-color);
		}
		a.disabled{
			color: #E3E8F2;
		}		
		a.selected{
			border: 2px #000 solid;
		}
	}
	#prevMonth, #nextMonth{
		display: inline-block;
		background-repeat: no-repeat;
		background-size: contain;
		width: 0.8vh;
		height: 1.3vh;
	}
	#prevMonth{
		background-image: url("./i/Ui/prev.svg");
	}
	#nextMonth {
		background-image: url("./i/Ui/next.svg");
		margin-left: 4vh;
	}	
}