/* 	
	#####
		ICONS 
	#####
*//*
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");
*/
/* 	
	#####
		COLORS 
	#####
*/
:root {
	--ef-color-greyblue: #303540;
	--ef-color-greyblue-rgb: 48, 53, 64;
	--ef-color-greenbrown: #74683D;
	--ef-color-greenbrown-rgb: 116, 104, 61;
	--ef-color-indiablue: #02A2A2;
	--ef-color-indiablue-light: #0fb0b0;
	--ef-color-indiablue-rgb: 2, 162, 162;
	--ef-color-raspberry-red: #990033;
	--ef-color-raspberry-red-rgb: 153, 0, 51;
	--ef-color-yellow: #FFBD00;
	--ef-color-yellow-rgb: 255, 189, 0;
	--ef-color-orange:#D38554;
	--color-orange-rgb: 211, 133, 84;

	--ef-color-signal-black-100: #2A2A2A;
	--ef-color-signal-black-100-rgb: 43, 42, 42;
	--ef-color-signal-black-80: #5F5F5F;
	--ef-color-signal-black-80-rgb: 95, 95, 95;
	--ef-color-signal-black-60: #7F7F7F;
	--ef-color-signal-black-60-rgb: 127, 127, 127;
	--ef-color-signal-black-40: #A9A9A9;
	--ef-color-signal-black-40-rgb: 169, 169, 169;
	--ef-color-signal-black-32: #CCCCCC;
	--ef-color-signal-black-32-rgb: 204, 204, 204;
	--ef-color-signal-black-16: #DDDDDD;
	--ef-color-signal-black-16-rgb: 221, 221, 221;
	--ef-color-signal-black-8: #EFEFEF;
	--ef-color-signal-black-8-rgb: 239, 239, 239;
	--ef-color-signal-black-4: #F5F5F5;
	--ef-color-signal-black-4-rgb: 246, 246, 246;

	--ef-color-white: #FFFFFF;
	--ef-color-white-rgb: 255, 255, 255;

	--ef-color-active-surveys: #dcf4f4;
	--ef-color-active-surveys-rgb: 220, 244, 244;
	--ef-color-ended-surveys: #f4dcdc;
	--ef-color-ended-surveys-rgb: 244, 220, 220;
}

.bg-greyblue { background: var(--ef-color-greyblue); }
.bg-greybrown { background: var(--ef-color-greybrown); }
.bg-indiablue { background: var(--ef-color-indiablue); }
.bg-warning,
.bg-raspberry-red { background: var(--ef-color-raspberry-red); }
.bg-signal-black-100 { background: var(--ef-color-signal-black-100); }
.bg-signal-black-80 { background: var(--ef-color-signal-black-80); }
.bg-grey,
.bg-signal-black-60 { background: var(--ef-color-signal-black-60); }
.bg-muted,
.bg-signal-black-40 { background: var(--ef-color-signal-black-40); }
.bg-signal-black-16 { background: var(--ef-color-signal-black-16); }
.bg-light,
.bg-signal-black-8 { background: var(--ef-color-signal-black-8); }
.bg-signal-black-4 { background: var(--ef-color-signal-black-4); }
.bg-white { background: var(--ef-color-white); }
.bg-yellow { background: var(--ef-color-yellow); }
.bg-orange { background: var(--ef-color-orange); }

/*.border-signal-black-4 {
	--bs-border-color: var(--ef-color-signal-black-4);
}*/

.border-raspberry-red{
    border: 1px solid var(--ef-color-raspberry-red) !important;
}

.text-greyblue { color: var(--ef-color-greyblue); }
.text-greybrown { color: var(--ef-color-greybrown); }
.text-success,
.text-green,
.text-info,
.text-indiablue { color: var(--ef-color-indiablue); }
.text-warning,
.text-red,
.text-raspberry-red { color: var(--ef-color-raspberry-red); }
.text-default,
.text-signal-black-100 { color: var(--ef-color-signal-black-100); }
.text-signal-black-80 { color: var(--ef-color-signal-black-80); }
.grey,
.text-grey,
.text-muted { color: var(--ef-color-signal-black-60) !important; }
.text-signal-black-60 { color: var(--ef-color-signal-black-60); }
.text-signal-black-40 { color: var(--ef-color-signal-black-40); }
.text-signal-black-16 { color: var(--ef-color-signal-black-16); }
.text-light,
.text-signal-black-8 { color: var(--ef-color-signal-black-8); }
.text-signal-black-4 { color: var(--ef-color-signal-black-4); }
.text-white { color: var(--ef-color-white); }
.text-yellow { color: var(--ef-color-yellow); }
.text-orange { color: var(--ef-color-orange); }

/* 	
	#####
		FONTS 
	#####
*/
:root {
	/* Font sizes */
	--fs-26: 26px;
    --fs-20: 20px;
	--fs-16: 16px;
	--fs-14: 14px;
	--fs-12: 12px;

	/* Font weight */
	--fw-700: 700;
	--fw-400: 400;
}


/* lato-regular - latin-ext_latin */
@font-face {
	font-family: 'Lato';
	font-style: normal;
	font-weight: 400;
	src: url('/fonts/Lato/lato-v23-latin-ext_latin-regular.eot'); /* IE9 Compat Modes */
	src: local('Lato Regular'), local('Lato-Regular'),
			url('/fonts/Lato/lato-v23-latin-ext_latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
			url('/fonts/Lato/lato-v23-latin-ext_latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
			url('/fonts/Lato/lato-v23-latin-ext_latin-regular.woff') format('woff'), /* Modern Browsers */
			url('/fonts/Lato/lato-v23-latin-ext_latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
			url('/fonts/Lato/lato-v23-latin-ext_latin-regular.svg#Lato') format('svg'); /* Legacy iOS */
}
/* latin-ext */
/*@font-face {
	font-family: 'Lato Light';
	font-style: normal;
	font-weight: 300;
	font-display: auto;
	src: url('/fonts/Lato/lato-v16-latin-300.eot');
	src: local('Lato Light'), local('Lato-Light'),
		url('/fonts/Lato/lato-v16-latin-300.eot?#iefix') format('embedded-opentype'),
		url('/fonts/Lato/lato-v16-latin-300.woff2') format('woff2'),
		url('/fonts/Lato/lato-v16-latin-300.woff') format('woff'),
		url('/fonts/Lato/lato-v16-latin-300.ttf') format('truetype'),
		url('/fonts/Lato/lato-v16-latin-300.svg#Lato') format('svg');
}*/
/* lato-300 - latin-ext_latin */
/*@font-face {
	font-family: 'Lato Latin';
	font-style: normal;
	font-weight: 300;
	src: local('Lato Light'), local('Lato-Light'),
			url('/fonts/Lato/lato-v23-latin-ext_latin-300.woff2') format('woff2'),
			url('/fonts/Lato/lato-v23-latin-ext_latin-300.woff') format('woff'), 
			url('/fonts/Lato/lato-v23-latin-ext_latin-300.ttf') format('truetype'),
			url('/fonts/Lato/lato-v23-latin-ext_latin-300.svg#Lato') format('svg')
}*/
/* lato-700 - latin-ext_latin */
@font-face {
	font-family: 'Lato Bold';
	font-style: normal;
	font-weight: 700;
	src: url('/fonts/Lato/lato-v23-latin-ext_latin-700.eot'); /* IE9 Compat Modes */
	src: local('Lato Bold'), local('Lato-Bold'),
			url('/fonts/Lato/lato-v23-latin-ext_latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
			url('/fonts/Lato/lato-v23-latin-ext_latin-700.woff2') format('woff2'), /* Super Modern Browsers */
			url('/fonts/Lato/lato-v23-latin-ext_latin-700.woff') format('woff'), /* Modern Browsers */
			url('/fonts/Lato/lato-v23-latin-ext_latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
			url('/fonts/Lato/lato-v23-latin-ext_latin-700.svg#Lato') format('svg'); /* Legacy iOS */
}

.text-bold,
b, strong {
	font-family: "Lato Bold";
}

body {
    font-family: Lato, "Helvetica Neue", Helvetica, Arial, sans-serif; 
}

/* Font sizes */
h1, h2, h3, h4, h5, h6 {
	font-family: Lato;
	letter-spacing: -0.01em;
	font-weight: normal;
	margin: 0;
	padding: 0;
}
h1,
.h1 {
	font-size: var(--fs-26);
}
h2,
.h2  {
	font-size: var(--fs-20);

	&.surveytitle {
		font-size: 40px;
	}
}
h3,
.h3  {	
	font-family: 'Lato Bold';
  	font-size: var(--fs-16);
	margin-bottom: 0;
}
h4,
.h4  {
	font-size: var(--fs-16);
}
h5,
.h5  {
	font-size: var(--fs-14);
}
h6,
.h6  {
	font-size: var(--fs-12);
}

.text-26 { font-size: var(--fs-26); }
.text-24 { font-size: 24px; }
.text-23 { font-size: 23px; }
.text-20 { font-size: var(--fs-20); }
.text-16 { font-size: var(--fs-16); }
.text-14 { font-size: var(--fs-14); }
.text-12 { font-size: var(--fs-12); }

/* Font weight */
.font-bold { font-family: "Lato Bold"; }
.text-normal,
.font-normal { font-family: Lato; }

/* Font style */
.font-italic {
	font-style: italic;
}

/* 	
	#####
		BORDER RADIUS 
	#####
*/
.rounded-4 {
	border-radius: 4px !important;
}
.rounded-8 {
	border-radius: 8px !important;
}
.rounded-16 {
	border-radius: 16px !important;
}
.rounded-full {
	border-radius: 50% !important;
}

/* 	
	#####
		ICONS 
	#####
*/
.ef-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--ef-color-signal-black-80);
    font-size: var(--fs-16);
}
.ef-size-icon-44 {
	font-size: 44px;
}

/* 	
	#####
		BUTTONS 
	#####
*/
.btn-shadow {
	box-shadow: 0px 11px 22px #00000029 !important;
}
.btn {
	all: unset;
	transition: all 0.15s ease-in-out;
	/*font-family: "Lato Bold";*/
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	border-radius: 4px;
	padding-inline: 12px;
	cursor: pointer;
	gap: 5px;
	border: 1px solid transparent;

	&.disabled,
	&:disabled {
		opacity: 0.5;
		pointer-events: none;

		color: inherit;
		background: inherit;
	}

	&:hover {
		text-decoration: none;
	}

	&.btn-dashed {
		border: 1px dashed var(--ef-color-signal-black-100);
	}
}
.btn-block {
	box-sizing: border-box;
	display: flex;
    width: 100%;
    justify-content: center;
	text-align: center;
}
.btn-preview-item {
	padding-inline: 8px 6px;
}
.btn-link {
	color: var(--ef-color-greenbrown);
	text-decoration: underline;
	padding-inline: 0;

	&:hover,
	&:focus,
	&:active,
	&.active {
		text-decoration: none;
		color: var(--ef-color-greenbrown) !important;
	}
}
.btn-na {
	height: auto;
	min-width: 145px;
	min-height: 40px;
	background: rgba(0,0,0,0.1);
	border-radius: 3px;

	& .form-underline {
		border-bottom: 1px solid #FFF;

		/*&:hover,*/
		&:focus {
			border-bottom: 1px solid #000 !important;
		}
	}

	&:active {
		color: inherit !important;
		background-color: rgba(0,0,0,0.1) !important;
		border-color: transparent !important;
	}

	&:hover {
		background: rgba(0,0,0,0.25);
	}

	&.btn-na-image {
		padding: 7px;
		border-radius: 50%;
		min-width: auto;

		& .check-mark {
			display: none;
		}

		&:has(input:checked) {
			background: rgba(0,0,0,0.25);
		}
	}

	&.btn-na-live {
		min-width: auto;
	}
}
.btn-xs {
	font-size: 12px;
	min-height: 20px;
	border-radius: 10px;
    width: max-content;
	padding-inline: 8px;
}
.btn-icon {
	background: transparent;
	color: var(--ef-color-signal-black-80);
	font-size: var(--fs-14);
	padding: 0;
	min-height: 32px;
	min-width: 32px;
	align-items: center;
	justify-content: center;

	&.btn-icon-xs {
		min-height: 24px;
		min-width: 24px;
	}

	&.btn-icon-xxs {
		min-height: 20px;
		min-width: 20px;
	}

	&.btn-icon-special {
		padding: 3px;
		aspect-ratio: 1 / 1;
	}

	&:has(input) {
		&:focus-within {
			padding: 0 5px;
			color: var(--btn-color);
			background: var(--btn-bg);
	
			& input {
				background: transparent;
	
				&:focus {
					outline: none;
				}
			}
		}
	}
}
.btn-transparent {
	&.active,
	&:active,
	&:hover,
	&:focus {		
		background: var(--btn-bg) !important;
		color: var(--btn-color) !important;
	}

	&:active {
		border-color: transparent !important;
	}
}
.btn-create {
	height: 56px;
	border-radius: 8px;
	padding-inline: 20px;
	border: 1px solid var(--ef-color-signal-black-16);
	border-width: 2px;

	&::before {
		font-family: bootstrap-icons !important;
		content: "\f64d";
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 32px;
		height: 32px;
		font-size: 16px;
		background: var(--ef-color-indiablue);
		border-radius: 50%;
		margin-inline-end: 10px;
		color: var(--ef-color-white);
		font-weight: var(--fw-700);
	}

	&.disabled,
	&:disabled {
		background: none !important;
		border-color: var(--ef-color-signal-black-16);
	}

	&.active,
	&:active,
	&:hover,
	&:focus {		
		background: rgba(var(--ef-color-indiablue-rgb), 0.1) !important;
		border-color: var(--ef-color-indiablue) !important;
		color: var(--ef-color-indiablue) !important;	
	}
}
.btn-create-custom {
	height: 56px;
	border-radius: 8px;
	padding-inline: 20px;
	border: 1px solid var(--ef-color-signal-black-16);
	border-width: 2px;
	gap: 10px;

	&.disabled,
	&:disabled {
		/*--bs-btn-disabled-color: red;
		--bs-btn-disabled-bg: red;*/
		--bs-btn-disabled-border-color: var(--ef-color-signal-black-16);
	}

	& i {
		font-size: 32px;
		color: var(--ef-color-indiablue);
	}

	&.active,
	&:active,
	&:hover,
	&:focus {		
		background: rgba(var(--ef-color-indiablue-rgb), 0.1) !important;
		border-color: var(--ef-color-indiablue) !important;
		color: var(--ef-color-indiablue) !important;	
	}
}
.btn-add {
	height: 40px;
	font-size: 40px;
	padding: 0;
	color: var(--ef-color-indiablue) !important;
	box-shadow: 1px 2px 8px 0px #A9A9A9A6;
	border: none;
	border-radius: 50%;
	background: white;

	&.btn-add-xxs {
		min-height: auto;
		height: 24px;
		font-size: 24px;
	}

	&.btn.btn {
   		border-radius: 50px !important;
	}

	&.disabled,
	&:disabled {
		background: none !important;
		border-color: transparent !important;
	}

	&.active,
	&:active,
	&:hover,
	&:focus {		
		/*background: transparent;
		color: rgba(var(--ef-color-indiablue-rgb), 0.3) !important;	*/
	}
}
.btn-upload {
	border: none;
	border-left: 1px solid #FFF;
	border-radius: 0;
	background: rgba(0, 0, 0, 0.1);
	align-self: stretch;
    height: auto;

	&:active,
	&:hover,
	&:focus {
		background: rgba(0, 0, 0, 0.25) !important;
		border-left-color: #FFF;
	}
}
.btn-default,
.btn-signal-black-100 {
	background: var(--ef-color-signal-black-100);
	color: var(--ef-color-white);

	&.active,
	&:active,
	&:hover,
	&:focus {	
		background: rgba(var(--ef-color-signal-black-100-rgb), 0.9) !important;
		border-color: rgba(var(--ef-color-signal-black-100-rgb), 0.9) !important;
		color: var(--ef-color-white) !important;
    }
}
[role="presentation"] {
	& > .btn-default,
	& > .btn-signal-black-100 {
		background: var(--ef-color-signal-black-100);
		color: var(--ef-color-white);

		&:active,
		&:hover,
		&:focus {	
			background: rgba(var(--ef-color-signal-black-100-rgb), 0.9) !important;
			border-color: rgba(var(--ef-color-signal-black-100-rgb), 0.9) !important;
			color: var(--ef-color-white) !important;
		}

		&.active {	
			background: rgba(var(--ef-color-signal-black-100-rgb), 0.9) !important;
			border-color: rgba(var(--ef-color-signal-black-100-rgb), 0.9) !important;
			color: var(--ef-color-white) !important;

			background: rgba(var(--ef-color-raspberry-red-rgb), 0.9) !important;
			border-color: rgba(var(--ef-color-raspberry-red-rgb), 0.9) !important;
			color: var(--ef-color-white) !important;	
		}
	}
}
.btn-signal-black-16 {
	background: var(--ef-color-signal-black-16);
	color: var(--ef-color-signal-black-100);

	&.active,
	&:active,
	&:hover,
	&:focus {	
		background: rgba(var(--ef-color-signal-black-16-rgb), 0.9) !important;
		border-color: rgba(var(--ef-color-signal-black-16-rgb), 0.9) !important;
		color: var(--ef-color-signal-black-100) !important;	
	}
}
.btn-signal-black-8 {
	background: var(--ef-color-signal-black-8);
	color: var(--ef-color-signal-black-100);

	&.active,
	&:active,
	&:hover,
	&:focus {	
		background: rgba(var(--ef-color-signal-black-8-rgb), 0.9) !important;
		border-color: rgba(var(--ef-color-signal-black-8-rgb), 0.9) !important;
		color: var(--ef-color-signal-black-100) !important;	
	}
}
.btn-red,
.btn-primary,
.btn-danger,
.btn-na-active,
.btn-raspberry-red {
	background: var(--ef-color-raspberry-red);
	color: var(--ef-color-white);

	&.active,
	&:active,
	&:hover,
	&:focus {	
		background: rgba(var(--ef-color-raspberry-red-rgb), 0.9) !important;
		border-color: rgba(var(--ef-color-raspberry-red-rgb), 0.9) !important;
		color: var(--ef-color-white) !important;
	}
}
.btn-white {
	background: var(--ef-color-white);
	color: var(--ef-color-signal-black-100);
	border: 1px solid var(--ef-color-signal-black-100);

	&.active,
	&:active,
	&:hover,
	&:focus {	
		background: var(--ef-color-white) !important;
		color: var(--ef-color-signal-black-100) !important;
		border: 1px solid var(--ef-color-signal-black-100) !important;
		text-decoration: underline;
	}
}
.btn-white-v2 {
	background: var(--ef-color-white);
	color: var(--ef-color-signal-black-100);

	&.active,
	&:active,
	&:hover,
	&:focus {	
		background: var(--ef-color-white) !important;
		color: var(--ef-color-signal-black-100) !important;
		border: 1px solid var(--ef-color-signal-black-100) !important;
		text-decoration: underline;
	}
}
.btn-white-v3 {
	background: var(--ef-color-white);
	color: var(--ef-color-signal-black-60);
	border: 1px solid var(--ef-color-signal-black-60);

	&.active,
	&:active,
	&:hover,
	&:focus {	
		background: var(--ef-color-white) !important;
		color: var(--ef-color-signal-black-100) !important;
		border: 1px solid var(--ef-color-signal-black-100) !important;
		text-decoration: underline;
	}
}
.btn-success,
.btn-green,
.btn-indiablue {
	background: var(--ef-color-indiablue);
	color: var(--ef-color-white);

	&.active,
	&:active,
	&:hover,
	&:focus {	
		background: var(--ef-color-indiablue-light) !important;
		border-color: var(--ef-color-indiablue-light) !important;
		color: var(--ef-color-white) !important;
	}
}
.btn-greenbrown {
	background: var(--ef-color-greenbrown) !important;
	color: var(--ef-color-white) !important;

	&.active,
	&:active,
	&:hover,
	&:focus {	
		background: rgba(var(--ef-color-greenbrown-rgb), 0.9) !important;
		border-color: transparent !important;
	}
}
.btn-indiablue-16 {
	background: rgba(var(--ef-color-indiablue-rgb), 0.16) !important;
	color: var(--ef-color-indiablue) !important;

	&.active,
	&:active,
	&:hover,
	&:focus {	
		background: rgba(var(--ef-color-indiablue-rgb), 0.32) !important;
		border-color: transparent !important;
		color: var(--ef-color-indiablue) !important;
	}
}
.btn-info,
.btn-yellow { 
	background: var(--ef-color-yellow) !important;
	color: var(--ef-color-white) !important;

	&.active,
	&:active,
	&:hover,
	&:focus {	
		background: rgba(var(--ef-color-yellow-rgb), 0.8) !important;
		border-color: rgba(var(--ef-color-yellow-rgb), 0.8) !important;
		color: var(--ef-color-white) !important;
	}
}
.btn-rounded {
	border-radius: 16px;
	padding-inline: 16px;
}
.btn-rounded-xl {
	border-radius: 25px;
	height: 40px;
	padding-inline: 20px;
	font-size: 16px;
	font-family: 'Lato Bold';
}
/* Btn hover colors for .btn-transparent */
.btn-hover-success,
.btn-hover-running,
.btn-hover-indiablue {
	--btn-color: var(--ef-color-white);
	--btn-bg: rgba(var(--ef-color-indiablue-rgb), 0.8);
}
.btn-hover-indiablue-16 {
	--btn-color: var(--ef-color-indiablue);
	--btn-bg: rgba(var(--ef-color-indiablue-rgb), 0.16);
}
.btn-hover-signal-black-100 {
	--btn-color: var(--ef-color-white);
	--btn-bg: rgba(var(--ef-color-signal-black-100-rgb), 0.8);
}
.btn-hover-preparing,
.btn-hover-signal-black-40 {
	--btn-color: var(--ef-color-white);
	--btn-bg: rgba(var(--ef-color-signal-black-40-rgb), 0.8);
}
.btn-hover-signal-black-32 {
	--btn-color: var(--ef-color-signal-black-100);
	--btn-bg: rgba(var(--ef-color-signal-black-32-rgb), 1);
}
.btn-hover-signal-black-16 {
	--btn-color: var(--ef-color-signal-black-100);
	--btn-bg: rgba(var(--ef-color-signal-black-16-rgb), 0.8);
}
.btn-hover-signal-black-8 {
	--btn-color: var(--ef-color-signal-black-100);
	--btn-bg: rgba(var(--ef-color-signal-black-8-rgb), 0.8);
}
.btn-hover-primary,
.btn-hover-danger,
.btn-hover-completed,
.btn-hover-raspberry-red {
	--btn-color: var(--ef-color-white);
	--btn-bg: rgba(var(--ef-color-raspberry-red-rgb), 0.8);
}
.btn-hover-white {
	--btn-color: var(--ef-color-signal-black-100);
	--btn-bg: var(--ef-color-white);
}

/* 	
	#####
		LINKS 
	#####
*/

a {
    color: var(--ef-color-greenbrown);

	&:hover,
	&:focus,
	&:active,
	&.active {
		text-decoration: none;
	}
}

.link {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	color: var(--ef-color-signal-black-100);
	font-size: var(--fs-14);
	text-decoration: none;
	line-height: 1em;

	&.active,
	&:active,
	&:focus,
	&:hover {
		text-decoration-line: none;
		/* text-decoration-thickness: 3px; */
		color: var(--ef-color-indiablue);
	}
}
.link-indiablue {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	color: var(--ef-color-indiablue);
	font-family: "Lato Bold";
	text-decoration: none;
	line-height: 1em;

	&.active,
	&:active,
	&:focus,
	&:hover {
		text-decoration-line: underline;
	}
}
.link-raspberry-red {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	color: var(--ef-color-raspberry-red);
	font-family: "Lato Bold";
	text-decoration: none;
	line-height: 1em;

	&.active,
	&:active,
	&:focus,
	&:hover {
		text-decoration-line: underline;
		color: var(--ef-color-raspberry-red);
	}
}
.nav-link {
	/*--bs-navbar-active-color: var(--ef-color-indiablue);*/
	--bs-navbar-active-color: var(--ef-color-signal-black-100);
	color: var(--ef-color-signal-black-100);
	font-size: var(--fs-16);
	text-decoration: none;
	/*font-family: "Lato Bold";*/

	&.active,
	&:active,
	&:focus,
	&:hover {
		text-decoration: none;
		/*color: var(--ef-color-indiablue);*/
		color: #000;
	}
}

/* 	
	#####
		LABELS 
	#####
*/
.label {
	min-height: 18px;
	display: inline-flex;
	align-items: center;
	border-radius: 9px;
	padding-inline: 8px;
    font-size: 11px;

	&.label-success {
		background: var(--ef-color-indiablue);
		color: white;
	}

	&.label-danger {
		background: var(--ef-color-raspberry-red);
		color: white;
	}
}

/* 	
	#####
		INFO 
	#####
*/
.info {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--ef-color-signal-black-80);
	color: var(--ef-color-white);
	min-width: 16px;
	height: 16px;
}

/* 	
	#####
		NAVI - MAIN 
	#####
*/
.navbar {
	min-height: 64px;

	& .dropdown-menu {
		& li {
			&:first-child {
				& .dropdown-item {
					border-top-left-radius: 4px;
					border-top-right-radius: 4px;
				}
			}

			&:last-child {
				& .dropdown-item {
					border-bottom-left-radius: 4px;
					border-bottom-right-radius: 4px;
				}
			}
		}
	}
}

#mobileNav {
	& nav {
		z-index: 10;
	}
}

.nav-mobile ul {
	padding: 0;
	list-style-type: none;

    & li a {
        align-items: center;
    }
}

.nav-divider {
	height: 1px;
	background-color: #e5e5e5;
}

.avatar{
	display: inline-flex;
	/*align-items: center;*/
	line-height: 32px;
	justify-content: center;
	background-color: var(--ef-color-signal-black-32);
	color: var(--ef-color-white);
	height: 32px;
	width: 32px;
	aspect-ratio: 1/1;
	border-radius: 50%;

	&.avatar-xl {
		line-height: 48px;
		height: 48px;
		width: 48px;
	}

	&.avatar-more {
		background-color: var(--ef-color-signal-black-16);
		user-select: none;
	}

    &.transparent{
        background-color: transparent;
    }
}

.nav-toggle-button {
    font-size: 24px;
    min-width: 32px;
}


/* 	
	#####
		NAVI - IN PAGE 
	#####
*/
.page-content {
	& .header {
		display: grid;
		grid-template-areas: "back navi tools";
		grid-template-columns: minmax(250px, 0.5fr) 1fr minmax(250px, 0.5fr);
		background: white;

		& .back-section {
			grid-area: back;
			justify-self: start;

			&:has(#showSurveyTitle) {
				display: grid;
   				grid-template-columns: max-content 1fr max-content;
			}

			& #showSurveyTitle {
				text-overflow: ellipsis;
				overflow: hidden;
			}
		}

		& .subnavi {
			grid-area: navi;
			justify-self: center;
			max-width: 100%;
   			overflow-x: auto;
		}

		& > :nth-child(3) {
			grid-area: tools;
			justify-self: end;
		}

		@media (max-width: 1110px) {
			grid-template-areas: 
				"back tools"
				"navi navi";
			grid-template-rows: 1fr 1fr;
			grid-template-columns: 1fr 1fr;
		}

		&.header-normal {
			@media (max-width: 1110px) {
				grid-template-areas: 
					"back";
				grid-template-rows: 1fr;
				grid-template-columns: 1fr;
			}
		}
	}
}

/* 	
	#####
		NAVI - MOVING NAVI
	#####
*/
#moving-nav {
	min-height: 128px;

	& .moving-nav-content {
		border-top-left-radius: 16px;
        border-top-right-radius: 16px;
		position: fixed;
		margin-right: calc(79px - var(--scrollbar-width, 0px));
        padding-left: 64px;
		top: var(--global-main-header-height);
		left: 0;
		right: 0;
		transform: translateY(0);
		z-index: 5;

		@media (max-width: 992px) {
			margin-right: 0;
			padding: 0 24px;
		}
	}
}

/* 	
	#####
		NAVI - IN PAGE 
	#####
*/
.in-page-subnavi {
	padding: 15px;
    background: var(--ef-color-signal-black-4);
    border-radius: 4px;
	min-height: 64px;
}

/* 	
	#####
		DROPDOWN
	#####
*/

.dropup,
.dropdown {
	& .filter-box[filterslot="3"],
	& .filter-box[filterslot="4"],
	& .filter-box[filterslot="5"] {
		& + .dropdown-menu {
			right: 0;
		}
	}

	& .dropdown-menu {
		margin: 0;
		padding: 5px 0;
		box-shadow: 6px 6px 16px #00000010;
        border-radius: 6px;
		font-size: 14px;
		border: 3px solid #E6E6E6;
		text-align: left;
		min-width: 120px;
		z-index: 1;

		&.dropdown-min-content {
			min-width: max-content;
		}

		&.dropdown-menu-scrollable {
			max-height: 300px;
    		overflow-y: auto;

			& li {
				/*&:first-child {
					position: sticky;
					top: 0;
					left: 0;
					right: 0;
					background: white;
					box-shadow: 0 0 5px 0 var(--ef-color-signal-black-16);
				}*/

				/*&:last-child {
					position: sticky;
					bottom: 0;
					left: 0;
					right: 0;
					background: white;
					box-shadow: 0 0 5px 0 var(--ef-color-signal-black-16);
				}*/
			}
		}

		& .dropdown-input {
			padding: 8px 16px;
		}		

		& .dropdown-item {
			width: 100%;
			display: flex;
			gap: 10px;
			align-items: center;
			height: 36px;
			padding-inline: 20px 40px;

			&.disable-option {
				opacity: 0.3;
    			pointer-events: none;
			}

			&.active,
			&:active,
			&:hover,
			&:focus {
				/*color: var(--ef-color-indiablue);*/
				color: var(--ef-color-signal-black-100);
				background: var(--ef-color-signal-black-8)
			}

			&.upgrade {
				background: var(--ef-color-indiablue);
				color: var(--ef-color-white);
				border-radius: 0px !important;

				&:active,
				&:hover,
				&:focus {
					color: var(--ef-color-white);
					background: rgba(var(--ef-color-indiablue-rgb), 0.8);
				}
			}

			& > img {
				padding: 12px 8px 12px 0px;
			}
		}

		& .dropdown-divider {
			margin: 4px 0;
			border-color: #E6E6E6;
		}

		& .dropdown-scroll-area {
			max-height: 200px;
			overflow-y: auto;

			& table {
				min-height: 40px;

				& tbody {
					& tr {
						height: 40px;
						border-bottom: 1px solid var(--bs-dropdown-divider-bg);

						&:first-child {
							width: 10px;
						}

						& td {
							&:nth-child(2) {
								padding: 0 16px;
							}
						}
					}
				}
			}
		}
	}
}

/* 	
	#####
		FORM - INPUTS
	#####
*/
.search-icon-button {
	& input {
		&:focus {
			border: none;
		}
	}
}

.fake-input {
	&:focus-within {
		& input {
			border: none !important;
			outline: none !important;
		}

		outline: 2px solid var(--ef-color-indiablue);
	}

	& input {
		&:hover {
			border: none !important;
			outline: none !important;
		}
	}

	&:has(input:disabled) {
		background-color: #f5f5f5;
	}
}

input {
    border-radius: 4px;
    font-size: 14px;

	&:not([type="checkbox"]),
	&:not([type="radio"]) {
		border: 1px solid var(--ef-color-signal-black-16);
		padding: 7px 10px;
		background-color: var(--ef-color-signal-black-8);
		width: 100%;

		&.input-xs {
			padding: 4px 10px;
		}

		&.inverted {
			background: var(--ef-color-white);

			&:focus {
				background-color: var(--ef-color-white);
			}
		}

		&.form-control::placeholder,
		&::placeholder {
			color: var(--ef-color-signal-black-40) !important;
		}

		&:hover {
			/*border: 1px solid var(--ef-color-signal-black-8);*/
			outline: 2px solid var(--ef-color-signal-black-16);
		}

		&:focus {
			/*border: 1px solid var(--ef-color-signal-black-8);*/
			border-color: var(--ef-color-signal-black-8);
			box-shadow: none;
			outline: 2px solid var(--ef-color-indiablue);
			background-color: var(--ef-color-signal-black-8);
		}
	}

	&[readonly] {
		&#surveylink {
			border-color: transparent;
			background: transparent !important;

			&:hover {
				outline: none;
			}

			&:focus {
				outline: none;
				background: transparent;
			}
		}
	}

	&.file-input-wrapper {
		width: auto;
	}
}

.ajaxLoad {
	& input {
		&[readonly] {
			background: white !important;
		}
	}
}

textarea {
	border-radius: 4px;
    font-size: 14px;
	border: 1px solid var(--ef-color-signal-black-16);
	padding: 7px 10px;

	&::placeholder {
		color: var(--ef-color-signal-black-40) !important;
	}

	&:hover {
		/*border: 1px solid var(--ef-color-signal-black-8);*/
		outline: 2px solid var(--ef-color-signal-black-16);
	}

	&:focus {
		border-color: var(--ef-color-signal-black-16) !important;
		/*border: 1px solid var(--ef-color-signal-black-8);*/
		box-shadow: none;
		outline: 2px solid var(--ef-color-indiablue) !important;
		background: var(--ef-color-signal-black-8);
	}
}

input,
textarea,
select {
	&[readonly],
	&[disabled] {
   		cursor: not-allowed;
		background-color: #f5f5f5 !important;

		&:hover {
			outline: none;
		}

		&:focus {
			outline: none;
			border: 1px solid var(--ef-color-signal-black-16);
		}
	}
}

#questionhead {
	margin-bottom: 32px;

	& [name="question"] {
		font-size: 24px;
	}
}

#answernatext_options {
	margin-top: 50px;
}

#addtextarea_options {
	margin-top: 30px;
}

input,
textarea {
	&.form-underline {
		border: none;
		border-bottom: 1px solid #DDD;
		border-radius: 0 0 0 0;
		box-shadow: none !important;
		background: transparent;
		padding: 0 5px;
		font-size: 16px;
		min-height: 25px;

		&:placeholder-shown {
			height: auto !important;
		}

		&::placeholder {
			color: #999;
		}

		&:hover {
			border-color: #DDD !important;
			outline: none;
			background: transparent;
		}

		&:focus {
			border-color: #A3A3A3 !important;
			outline: none;
			background: transparent;
		}
	}
}

/* Input groups */
.input-group {
	border-radius: 4px;
	background: var(--ef-color-signal-black-8);

	& .form-control {
		border-radius: 4px !important;

		&:focus {
			border-color: transparent;
		}
	}

	& .input-group-text {
		background: var(--ef-color-signal-black-8);
		border: none;
		border: 1px solid var(--ef-color-signal-black-16);
	}

	&:has(.input-group-text + input) {
		& input {
			&.form-control {
				border-top-left-radius: 0 !important;
				border-bottom-left-radius: 0 !important;
			}
		}
	}

	&:has(input + .input-group-text) {
		& input {
			&.form-control {
				border-top-right-radius: 0 !important;
				border-bottom-right-radius: 0 !important;
			}
		}
	}

	/*&:hover {
		outline: 2px solid var(--ef-color-signal-black-16);

		& input {
			outline: none;
		}
	}*/

	/*&:focus-within {
		outline: 2px solid var(--ef-color-indiablue);

		& input {
			outline: none;
		}
	}*/
}

/* Slider (UI-Slider) */
/*#js-slider-layout {
	&.ui-slider {
		&.ui-slider-horizontal {
			height: 4px !important;
			border: none;

			& .ui-slider-range-min {
				background: var(--ef-color-signal-black-8) !important;
			}

			& .ui-slider-handle {
				width: 14px;
				height: 14px;
				border-radius: 99px;
				background: var(--ef-color-signal-black-100);
				position: relative;
			}
		}
	}
}*/

.ui-slider {
	&.ui-widget-content {
		background: rgba(0,0,0,0.1);
		height: 12px;
		border: none;
		border-radius: 12px;
		margin-top: 13px;
		//margin-bottom: 10px;
	}

	& .ui-slider-range-min {
		background: rgba(0,0,0,0.25);
		border-radius: 12px;
	}

	&.ui-slider-horizontal {
		& .ui-slider-handle {
			background: #afafaf;
			top: -9px;
			height: 32px;
            width: 32px;
			border-radius: 50%;
			border: none;
			box-shadow: inset 0 0 0 7px #FFF, 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 1.06);
			outline: none !important;	

			&:focus {
				outline-color: var(--ef-color-indiablue);
			}

			& .ui-slider-value {
				position: absolute;
				top: -100%;
				left: 50%;
				transform: translateX(-50%);
				font-size: 16px;		
			}
		}
	}

	&.ui-slider-small {
		&.ui-widget-content {
			margin-top: 0;
			height: 6px;
		}

		&.ui-slider-horizontal {
			& .ui-slider-handle {
				top: -6px;
				height: 16px;
				width: 16px;
				box-shadow: inset 0 0 0 3px #FFF, 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 1.06);
			}
		}
	}
}

/* Color input (jQuery) */
.minicolors {
	border-radius: 4px;
    max-width: 112px;

	&.minicolors-theme-bootstrap {
		& .minicolors-input {
			padding-left: 44px;
		}

		& .minicolors-swatch {
			border: 1px solid var(--ef-color-signal-black-8);
			top: 0;
			left: 0;
			width: 37px; /*calculates to s color square sized 35*35 px*/
			height: 100%;
			border-radius: 4px;
			bottom: 0px;
			border-top-left-radius: 4px;
			border-bottom-left-radius: 4px;
			overflow: hidden;
		}
	}
}

/* Select */
.modal {
	& select,
	& select.form-select {
		width: 100%;
	}
}

.form-select,
select {
	&.form-select {
		width: auto;
		border-radius: 4px;
		background-color: var(--ef-color-signal-black-8);
		font-size: 14px;
		border: 1px solid var(--ef-color-signal-black-16);
		padding: 7px 2.25rem 7px 10px;
		max-width: 100%;

		&.inverted {
			background-color: var(--ef-color-white);
		}

		&:hover {
			/*border: 1px solid var(--ef-color-signal-black-8);*/
			outline: 2px solid var(--ef-color-signal-black-16);
		}

		&:focus {
			/*border: 1px solid var(--ef-color-signal-black-8);*/
			box-shadow: none;
			outline: 2px solid var(--ef-color-indiablue);
		}
	}
}

/* Button Groups */
.btn-group {
	display: inline-flex;
	gap: 5px; 
	
	& .btn-check {
		&:checked {
			& + label {
				--bs-btn-active-color: var(--ef-color-white);
				/*--bs-btn-active-bg: var(--ef-color-raspberry-red);*/
				--bs-btn-active-bg: var(--ef-color-signal-black-100);
			}
		}

		& + label {
			/*background: var(--ef-color-signal-black-100);
			color: var(--ef-color-white);*/;
			/*background: var(--ef-color-white);*/
			color: var(--ef-color-signal-black-100);

			&:hover,
			&:focus {
				--bs-btn-color: var(--ef-color-white);
    			--bs-btn-bg: rgba(var(--ef-color-signal-black-100-rgb), 0.8);
			}			
		}
	}

	& .btn {
		border-radius: 4px !important;
	}
}

/* Checkbox / Radio */
/*label[class="todo checkbox"] {
	background: red;
}*/

/*label[class^="checkbox "],
label[class~=" checkbox "],
label[class$=" checkbox"] {
	background: red;
}*/

label,
label_no {
	display: inline-flex;
	align-items: center;
	
	&:has(input[type="checkbox"]) {
		gap: 15px;
	}

	&:has(input[type="radio"]) {
		gap: 10px;
	}

	&:has(input:disabled) {
		& .check-mark,
		& .check-mark-label > strong {
			opacity: 0.3;
		}

		& .check-mark,
		& .check-mark-label {
			cursor: auto !important;
		}
	}

	/* Checkbox style */
	&[class*="as-checkbox"] {
		gap: 8px !important;

		& input {
			&[type="checkbox"] {
				& ~ .check-mark {
					display: inline-flex;
					align-items: center;
					justify-content: center;
					border-radius: 4px;
					min-width: 16px;
					width: 16px;
					height: 16px;
					border: 1px solid var(--ef-color-signal-black-40);
					cursor: pointer;

					/*&::before {
						content: '';
						position: absolute;
						top: 2px;
						left: 2px;
						width: 12px;
						height: 12px;
						background: var(--ef-color-white);
						border-radius: 50%;
						transition: left 50ms linear;
					}*/

					& i {
						display: none;
						font-size: var(--fs-16);
						color: var(--ef-color-white);
					}
				}

				&:checked {
					& ~ .check-mark {
						background: var(--ef-color-indiablue);
						border-color: var(--ef-color-indiablue);
	
						&::before {
							left: 11px;
						}
	
						& i {
							display: block;
						}
					}
				}
			}
		}
	}		

	& .check-mark-label {
		display: flex; 
		align-items: center;
		gap: 10px;
		cursor: pointer;
	}

	&:not([class*="as-checkbox"]) {
		input {
			display: none;

			/* Checkbox as switch style (default) */
			&[type="checkbox"] {
				& ~ .check-mark {
					cursor: pointer;
					display: inline-flex;
					align-items: center;
					background: var(--ef-color-signal-black-40);
					min-width: 25px;
					width: 25px;
					height: 16px;
					border-radius: 8px;
					position: relative;

					&::before {
						content: '';
						position: absolute;
						top: 2px;
						left: 2px;
						width: 12px;
						height: 12px;
						background: var(--ef-color-white);
						border-radius: 50%;
						transition: left 50ms linear;
					}

					& i {
						display: none;
					}
				}

				&:checked {
					& ~ .check-mark {
						background: var(--ef-color-indiablue);

						&::before {
							left: 11px;
						}
					}
				}
			}
		}
	}

	input {
		display: none;

		&[type="radio"] {
			& ~ .check-mark {
				cursor: pointer;
				border: 1px solid var(--ef-color-signal-black-40);
				background: var(--ef-color-white);
				height: 16px;
				min-width: 16px;
				width: 16px;
				border-radius: 50%;
				cursor: pointer;
			}

			/*& ~ .check-mark-label {
				font-family: 'Lato Bold';
				color: var(--ef-color-signal-black-40);
			}*/

			&:checked {
				& ~ .check-mark {
					background: var(--ef-color-indiablue);
					border: 1px solid var(--ef-color-indiablue);
					box-shadow: inset 0 0 0 2px var(--ef-color-white);
				}

				/*& ~ .check-mark-label {
					color: var(--ef-color-signal-black-100);
				}*/
			}
		}
	}
}

.inverted-checkbox-on-active {
	& label {
		/* Checkbox style */
		&[class*="as-checkbox"] {
			& input {
				&[type="checkbox"] {
					&:checked {
						& ~ .check-mark {
							background: var(--ef-color-white);
							border-color: var(--ef-color-white);

							& i {
								color: var(--ef-color-indiablue);
							}
						}
					}
				}
			}
		}
	}
}

/* 	
	#####
		MODALS
	#####
*/
.modal {
	&.modal-1240 {
		& .modal-dialog {
			--bs-modal-width: 1240px;
		}
	}

	&.modal-1120 {
		& .modal-dialog {
			--bs-modal-width: 1120px;
		}
	}

	&.modal-1060 {
		& .modal-dialog {
			--bs-modal-width: 1060px;
		}
	}

	&.modal-900 {
		& .modal-dialog {
			--bs-modal-width: 900px;
		}
	}

	&.modal-750 {
		& .modal-dialog {
			--bs-modal-width: 750px;
		}
	}

	&.modal-680 {
		& .modal-dialog {
			--bs-modal-width: 680px;
		}
	}

	&.modal-600 {
		& .modal-dialog {
			--bs-modal-width: 600px;
		}
	}

	&.modal-create-survey {
		& .modal-dialog {
			& .modal-content {
				display: grid;
				grid-template-areas: 
					"header"
					"body";
				grid-template-rows: max-content 1fr;

				& .modal-header {
					grid-column: 1 / -1;
					z-index: 2;
				}

				& .modal-body {
					padding: 0px 40px 0 40px;
					grid-row: 1 / -1;
					overflow: hidden;
				}
			}
		}
	}

	& .modal-dialog {
		&.modal-fullscreen{
			/* width: 100%;
			height: 100%;
			padding: 64px; */
            
            & .modal-layout {
				display: grid;
				grid-template-areas: 
					"header"
					"title"
					"body"
					"footer";
                grid-template-rows: max-content max-content 1fr max-content;
            }
		}

		& .modal-content {
			display: grid;
			grid-template-areas: 
				"header"
				"title"
				"body"
				"footer";
			grid-template-rows: max-content max-content 1fr max-content;

			&:has(> form),
			&:has(> .modal-layout) {
				display: grid;
				grid-template-areas: none;
				grid-template-rows: 1fr;

				& > .modal-layout,
				& > form {
					display: grid;
					grid-template-areas: 
						"header"
						"title"
						"body"
						"footer";
					grid-template-rows: max-content max-content 1fr max-content;
					/*height: 100%;*/

					/*& .modal-layout {
						grid-template-areas: 
							"title"
							"body"
							"footer";
						grid-template-rows: max-content 1fr max-content;
					}*/

					& > .modal-body {
						min-width: 0px;
					}
				}
			}

			/*&:has(> .modal-layout){
				display: grid;
				grid-template-areas: 
					"header"
					"title"
					"body"
					"footer";
				grid-template-rows: max-content max-content 1fr max-content;
			}*/

			& .modal-title {
				grid-area: title;
				padding: 0 40px;
				/*font-size: var(--fs-26);*/
			}

			& .modal-header {
				grid-area: header;
				padding: 16px 16px 0 16px;
				border: none;
				justify-content: end;
			}

			& .modal-body {
				grid-area: body;
				padding: 32px 40px 40px 40px;
				display: flex;
				flex-direction: column;	
				/*height: 100%;	*/
				/*overflow: hidden;*/	
			}

			& .modal-footer { 
				grid-area: footer;
				display: flex;
				gap: 8px;
				justify-content: center;
				background: var(--ef-color-signal-black-8);
				border: none;
				padding: 16px;
			}
		}
	}
}

/* 	
	#####
		ALERTS
	#####
*/
.alert {
	padding: 16px;
    border-radius: 4px;
	border: none;

	&.alert-preparing,
	&.alert-light {
		/*background: var(--ef-color-signal-black-4);*/
		background: var(--ef-color-white);
		color: var(--ef-color-signal-black-100);

		&.alert-light-v2 {
			border: 1px solid var(--ef-color-signal-black-16);
			border-radius: 8px;
		}
	}

	&.alert-running,
	&.alert-success {
		background: var(--ef-color-active-surveys);
		color: var(--ef-color-indiablue);
	}

	&.alert-completed,
	&.alert-danger {
		background: var(--ef-color-ended-surveys);
		color: var(--ef-color-raspberry-red);
	}
}

/* 	
	#####
		CONTAINER SIZES
	#####
*/
.container-max-1570 {
  	width: 100%;
	max-width: 1570px;
}

.container-max-1200 {
  	width: 100%;
	max-width: 1200px;
}

.container-1200 {
	margin: 0 auto;
  	max-width: 1200px;

	@media (max-width: 1328px) {
		width: 100%;
	}
}

.container-1140 {
	margin: 0 auto;
  	width: 1140px;

	@media (max-width: 1268px) {
		width: 100%;
	}
}

.container-1108 {
	margin: 0 auto;
  	max-width: 1108px;
	width: 100%;
}

.container-1100 {
	margin: 0 auto;
  	max-width: 1100px;
	width: 100%;
}

.container-1060 {
	margin: 0 auto;
  	max-width: 1060px;

	@media (max-width: 1188px) {
		width: 100%;
	}
}

.container-1050 {
	margin: 0 auto;
  	max-width: 1050px;
	width: 100%;
}

.container-max-1060 {
	container: containerMax / inline-size;

	& .sticky-section {
		--sticky-left-correction: 50cqw;
	}

  	width: 100%;
	max-width: 1060px;
}

.container-max-840 {
	container: containerMax / inline-size;

	& .sticky-section {
		--sticky-left-correction: 50cqw;
	}

  	width: 100%;
	max-width: 840px;
}

.container-680 {
	margin: 0 auto;
  	width: 680px;

	@media (max-width: 768px) {
		width: 100%;
	}
}

.container-600 {
	margin: 0 auto;
  	width: 600px;

	@media (max-width: 600px) {
		width: 100%;
	}
}

.container-460 {
	margin: 0 auto;
  	width: 460px;
	padding: 0 32px;

	@media (max-width: 576px) {
		width: 100%;
	}
}

.container-420 {
	margin: 0 auto;
  	width: 400px;

	@media (max-width: 576px) {
		width: 100%;
	}
}

.container-400 {
	margin: 0 auto;
  	width: 400px;
	padding: 0 32px;

	@media (max-width: 576px) {
		width: 100%;
	}
}

.container-320 {
	margin: 0 auto;
	width: 100%;
  	max-width: 320px;
	padding: 0 20px;
}

.container-max-content {
	margin: 0 auto;
	width: 100%;
	max-width: max-content;
}

/* 	
	#####
		GRID
	#####
*/
.justify-self-end {
	justify-self: end;
}

.grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}
.grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}
.grid-cols-7 {
    grid-template-columns: repeat(7, minmax(0, 1fr));
}
.grid-cols-8 {
    grid-template-columns: repeat(8, minmax(0, 1fr));
}
.grid-cols-9 {
    grid-template-columns: repeat(9, minmax(0, 1fr));
}
.grid-cols-10 {
    grid-template-columns: repeat(10, minmax(0, 1fr));
}

@media (min-width: 576px) {
	.sm-grid-cols-1 {
		grid-template-columns: repeat(1, minmax(0, 1fr));
	}
	.sm-grid-cols-2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.sm-grid-cols-3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	.sm-grid-cols-4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
	.sm-grid-cols-5 {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
	.sm-grid-cols-6 {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}
	.sm-grid-cols-7 {
		grid-template-columns: repeat(7, minmax(0, 1fr));
	}
	.sm-grid-cols-8 {
		grid-template-columns: repeat(8, minmax(0, 1fr));
	}
	.sm-grid-cols-9 {
		grid-template-columns: repeat(9, minmax(0, 1fr));
	}
	.sm-grid-cols-10 {
		grid-template-columns: repeat(10, minmax(0, 1fr));
	}
}

@media (min-width: 768px) {
	.md-grid-cols-1 {
		grid-template-columns: repeat(1, minmax(0, 1fr));
	}
	.md-grid-cols-2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.md-grid-cols-3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	.md-grid-cols-4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
	.md-grid-cols-5 {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
	.md-grid-cols-6 {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}
	.md-grid-cols-7 {
		grid-template-columns: repeat(7, minmax(0, 1fr));
	}
	.md-grid-cols-8 {
		grid-template-columns: repeat(8, minmax(0, 1fr));
	}
	.md-grid-cols-9 {
		grid-template-columns: repeat(9, minmax(0, 1fr));
	}
	.md-grid-cols-10 {
		grid-template-columns: repeat(10, minmax(0, 1fr));
	}
}

@media (min-width: 992px) {
	.lg-grid-cols-1 {
		grid-template-columns: repeat(1, minmax(0, 1fr));
	}
	.lg-grid-cols-2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.lg-grid-cols-3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	.lg-grid-cols-4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
	.lg-grid-cols-5 {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
	.lg-grid-cols-6 {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}
	.lg-grid-cols-7 {
		grid-template-columns: repeat(7, minmax(0, 1fr));
	}
	.lg-grid-cols-8 {
		grid-template-columns: repeat(8, minmax(0, 1fr));
	}
	.lg-grid-cols-9 {
		grid-template-columns: repeat(9, minmax(0, 1fr));
	}
	.lg-grid-cols-10 {
		grid-template-columns: repeat(10, minmax(0, 1fr));
	}
}

/* 	
	#####
		FLEXBOX - DIRECTION
	#####
*/
@media (min-width: 768px) {
	.md-flex-column {
		flex-direction: column !important;
	}

	.md-flex-row {
		flex-direction: row !important;
	}
}

@media (min-width: 992px) {
	.lg-flex-column {
		flex-direction: column !important;
	}

	.lg-flex-row {
		flex-direction: row !important;
	}
}

/* 	
	#####
		FLEXBOX - GAPS
	#####
*/
.gap-4 {
	gap: 4px !important;
}
.gap-5 {
	gap: 5px !important;
}
.gap-8 {
	gap: 8px !important;
}
.gap-10 {
	gap: 10px;
}
.gap-12 {
	gap: 12px;
}
.gap-15 {
	gap: 15px;
}
.gap-16 {
	gap: 16px;
}
.gap-20 {
	gap: 20px;
}
.gap-24 {
	gap: 24px;
}
.gap-32 {
	gap: 32px;
}
.gap-40 {
	gap: 40px;
}
.gap-48 {
	gap: 48px;
}
.gap-60 {
	gap: 60px;
}
.gap-64 {
	gap: 64px;
}
.gap-128 {
	gap: 128px;
}
.gap-192 {
	gap: 192px;
}

@media (min-width: 768px) {
	.md-gap-0 {
		gap: 0;
	}

	.md-gap-16 {
		gap: 16px;
	}
}

@media (min-width: 992px) {
	.lg-gap-16 {
		gap: 16px;
	}
}

/* 	
	#####
		WIDTH
	#####
*/
.w-10 {
	width: 10%;
}
.w-15 {
	width: 15%;
}
.w-20 {
	width: 20%;
}
.w-33 {
	width: 33%;
}
.w-full,
.w-100 {
	width: 100%;
}

.w-static-50 {
	width: 50px;
}
.w-static-100 {
	width: 100px;
}

.w-max-content {
	width: max-content;
}

@media (min-width: 768px) {
	.md-w-15 {
		width: 15%;
	}

	.md-w-20 {
		width: 20%;
	}

	.md-w-25 {
		width: 25%;
	}

	.md-mw-30 {
		min-width: 30%;
	}
	.md-w-20 {
		width: 20%;
	}
	.md-w-30 {
		width: 30%;
	}

	.md-w-33 {
		width: 33%;
	}

	.md-w-50 {
		width: 50%;
	}

	.md-w-full,
	.md-w-100 {
		width: 100%;
	}
}

@media (min-width: 992px) {
	.lg-w-50 {
		width: 50%;
	}

	.lg-w-full,
	.lg-w-100 {
		width: 100%;
	}
}

/* 	
	#####
		SPACER
	#####
*/
hr {
	border-top: 1px solid var(--ef-color-signal-black-60);
    display: block;
    width: 100%;
}

/* 	
	#####
		PADDING
	#####
*/
.p-8 {
	padding: 8px;
}
.p-10 {
	padding: 10px;
}
.p-16 {
	padding: 16px;
}
.p-28 {
	padding: 28px;
}
.p-32 {
	padding: 32px;
}
.p-40 {
	padding: 40px;
}

.pb-16 {
	padding-bottom: 16px;
}
.pb-32 {
	padding-bottom: 32px;
}
.pb-50 {
	padding-bottom: 50px;
}
.pb-64 {
	padding-bottom: 64px;
}

.pt-8 {
	padding-top: 8px;
}
.pt-16 {
	padding-top: 16px;
}
.pt-20 {
	padding-top: 20px;
}

.pl-10 {
	padding-left: 10px;
}
.pl-16 {
	padding-left: 16px;
}
.pl-25 {
	padding-left: 25px;
}
.pl-28 {
	padding-left: 28px;
}
.pl-40 {
	padding-left: 40px;
}

.pr-10 {
	padding-right: 10px;
}
.pr-64 {
	padding-right: 64px;
}

@media (min-width: 768px) {
	.md-pr-64 {
		padding-right: 64px;
	}
}

.px-8 {
	padding-inline: 8px;
}
.px-10 {
	padding-inline: 10px;
}
.px-12 {
	padding-inline: 12px;
}
.px-16 {
	padding-inline: 16px;
}
.px-24 {
	padding-inline: 24px;
}
.px-32 {
	padding-inline: 32px;
}
.px-40 {
	padding-inline: 40px;
}


.py-8 {
	padding-block: 8px;
}
.py-10 {
	padding-block: 10px;
}
.py-24 {
	padding-block: 24px;
}
.py-29 {
	padding-block: 29px;
}
.py-32 {
	padding-block: 32px;
}
.py-48 {
	padding-block: 48px;
}
.py-64 {
	padding-block: 64px;
}

/* 	
	#####
		MARGIN
	#####
*/
.m-64{
    margin: 64px;
}

.ml-16 {
    margin-left: 16px;
}
.ml-20 {
    margin-left: 20px;
}
.ml-32 {
    margin-left: 32px;
}

.mr-16 {
    margin-right: 16px;
}

.mt-5 {
    margin-top: 5px !important;
}
.mt-8 {
    margin-top: 8px;
}
.mt-16 {
    margin-top: 16px;
}
.mt-20 {
	margin-top: 20px;
}
.mt-32 {
	margin-top: 32px;
}
.mt-34 {
	margin-top: 34px;
}
.mt-64 {
	margin-top: 64px;
}
.mb-8 {
    margin-bottom: 8px;
}

.mb-16 {
    margin-bottom: 16px;
}
.mb-20{
    margin-bottom: 20px;
}
.mb-24{
    margin-bottom: 24px;
}
.mb-32 {
	margin-bottom: 32px;
}
.mb-34 {
	margin-bottom: 34px;
}
.mb-40 {
	margin-bottom: 40px;
}
.mb-64 {
	margin-bottom: 64px;
}

.mx-auto {
	margin-inline: auto;
}
.mx-32 {
	margin-inline: 32px;
}

.my-8 {
	margin-block: 8px !important;
}
.my-16 {
	margin-block: 16px !important;
}
.my-20 {
	margin-block: 20px !important;
}
.my-64 {
	margin-block: 64px !important;
}
.my-128 {
	margin-block: 128px !important;
}

/* 	
	#####
		OVERFLOW
	#####
*/
.overflow-x-auto {
	width: 100%;
	overflow-x: auto;
}

.overflow-y-auto {
	overflow-y: auto;
}

/* 	
	#####
		TABLES
	#####
*/
table,
.table {
	/*--bs-table-color-type: initial;
    --bs-table-bg-type: initial;
    --bs-table-color-state: initial;
    --bs-table-bg-state: initial;
    --bs-table-color: var(--bs-emphasis-color);*/

    /*--bs-table-bg: transparent;
    --bs-table-border-color: var(--ef-color-signal-black-8);*/

    /*--bs-table-accent-bg: transparent;
    --bs-table-striped-color: var(--bs-emphasis-color);
    --bs-table-striped-bg: rgba(var(--bs-emphasis-color-rgb), 0.05);
    --bs-table-active-color: var(--bs-emphasis-color);
    --bs-table-active-bg: rgba(var(--bs-emphasis-color-rgb), 0.1);
    --bs-table-hover-color: var(--bs-emphasis-color);
    --bs-table-hover-bg: rgba(var(--bs-emphasis-color-rgb), 0.07);*/

	&.table-hover {
		& > tbody {
			& > tr {
				&:hover > * {
					--bs-table-color-state: var(--bs-table-hover-color);
					--bs-table-bg-state: rgba(var(--ef-color-signal-black-4-rgb), 0.75);
				}
			}
		}
	} 
   

	& > :not(caption) {
		& > * {
			& > * {
				padding: 0;
				background-color: transparent;
			}
		}
	}

	/*&.table-striped > tbody > tr:nth-of-type(odd) > * {
		--bs-table-bg-type: rgba(var(--ef-color-signal-black-4-rgb), 1);
	}

	& .table-striped > tbody > tr:nth-child(2n+1) > td,
	& .table-striped tr:nth-child(2n+1) td,
	& .table-striped > tbody > tr:nth-child(2n+1) > th {
		background-color: var(--ef-color-signal-black-8);
	}

	& .table-striped>tbody>tr:nth-of-type(odd) > * {
		--bs-table-bg-type: normal;
	}*/

	&.table-nse {
		& tr {
			border-bottom: 8px solid white !important;

			& th {
				font-family: Lato;
				font-weight: normal;
				font-size: 13px;
				color: #303540;
				text-align: center;
				background-color: white !important;

				& textarea {
					font-size: 13px;
				}
			}

			& td {
				--bs-table-bg-type: rgba(0,0,0,0.1) !important;
				border-radius: 3px;
				border-left: 2px solid white;

				& input {
					&[type="text"] {
						padding: 5px 8px;
						border: 1px solid rgba(0,0,0,1);
					}
				}

				& textarea {
					&.form-underline {
						border-bottom: 1px solid #FFF;

						&:hover {
							border-bottom: 1px solid #FFF !important;
						}

						&:focus {
							border-bottom: 1px solid #000 !important;
						}
					}
				}

				&:first-child {
					height: 42px;
					word-break: break-word;
				}

				/*&:hover {
					--bs-table-bg-type: rgba(0,0,0,0.25) !important;
				}*/

				&:first-child {
					border-left: none;
				}				

				&.table-survey-dark {
					--bs-table-bg-type: rgba(0,0,0,0.204) !important;
				}
			}			
		}

		&:not(:has(+ .table-nse)) {
			& tr {
				&:last-child {
					border-bottom-width: 0px !important;
				}
			}
		}
	}

	&.table-striped {
		& tr {
			border-bottom: 1px solid white !important;
		}

		& th {
			background-color: white !important;
		}

		& > tbody {
			& > tr {
				&:nth-child(2n) {
					& > td {
						background-color: var(--ef-color-white);
					}
				}

				&:nth-child(2n+1) {
					& td,
					& th {
						background-color: var(--ef-color-signal-black-8);

						&.table-survey-dark {
							--bs-table-bg-type: var(--ef-color-signal-black-16) !important;

							&:hover {
								--bs-table-bg-type: var(--ef-color-signal-black-8) !important;
							}
						}
					}
				}

				/*&:nth-of-type(odd) > * {
					--bs-table-bg-type: normal;
				}*/

				&:nth-of-type(odd) > * {
					--bs-table-bg-type: rgba(var(--ef-color-signal-black-4-rgb), 1);
				}
			}
		}

		& > tr {
			&:nth-child(2n) {
				& > td {
					background-color: var(--ef-color-white);
				}
			}

			&:nth-child(2n+1) {
				& > td {
					background-color: var(--ef-color-signal-black-8);
				}
			}
		}
	}

	&.table-chart-datatable {
		& th {
			background: white !important;
		}

		& tfoot {
			& tr {
				&:first-child {
					border-bottom: none;
				}

				& td {
					font-family: "Lato Bold";
				}

				&:first-child {
					& td {
						border-bottom-width: 0;
						border-color: var(--ef-color-signal-black-100);
                        border-style: solid;
                        border-top-width: 2px;
					}
				}
			}
		}
	}

	&.dataTable {
		/*& colgroup {
			& col:first-child {
				width: 30px !important;
				min-width: 30px !important;
			}

		}*/

		/*--bs-table-bg: red;
   	 	--bs-table-border-color: var(--ef-color-signal-black-8);*/

		/*& th {
			font-family: "Lato Bold";
		}*/

		/* Remove shadows */
		&.dtfc-scrolling-left {		 
			& tr {
				& > .dtfc-fixed-left {
					&::after {
						display: none;
					}
				}
			}
		}

		&.dtfc-scrolling-right {		 
			& tr {
				& > .dtfc-fixed-right {
					&::after {
						display: none;
					}
				}
			}
		}

		& tr {
			&:hover {
				& td {
					background: var(--ef-color-signal-black-8);
				}
			}

			&.selected {
				td {
    				box-shadow: inset 0 0 0 9999px rgba(var(--ef-color-indiablue-rgb), 0.3)  !important;
					color: var(--ef-color-signal-black-100) !important;
				}
			}
		}

		& th {
			padding: 7px 14px;
			border-bottom: 1px solid var(--ef-color-signal-black-16);

			& .btn-group {
				& .dropdown-menu {
					top: 0 !important;
					left: 100% !important;
					transform: translate(0, -13px) !important;
				}
			}
		}

		& td {
			padding: 7px 15px;
			vertical-align: middle;

			&.emptyCell {
				padding: 14px 15px;
			}

			& input {
				&.dt-select-checkbox {
					width: auto;

					&:checked {
					}
				}
			}
		}

		& th,
		& td {
			&.dtfc-fixed-start {
				border-right: 1px solid var(--ef-color-signal-black-16);
			}

			&.dtfc-fixed-end {
				border-left: 1px solid var(--ef-color-signal-black-16);
			}
		}

		& th {
			vertical-align: middle;
			
			& .dt-column-title {
				font-family: "Lato Bold";
			}
		}
	}

	&:not(.dataTable) {
		width: 100%;
		/*height: max-content;*/
		margin: 0;

		&.no-borders {
			& tr {
				border: none;
			}
		}

		&.table-sm {
			& tr {
				& td {
					&:first-child {
						padding-left: 0;
					}

					&:last-child {
						padding-right: 0;
					}

					padding: 4px 10px;
				}
			}
		}

		& tr {
			border-bottom: 1px solid var(--ef-color-signal-black-16);
		}

		& th {
			font-family: "Lato Bold";
			padding: 10px;
			background-color: var(--ef-color-signal-black-4);
		}

		& td {
			padding: 10px;

			&:has(> table) {
				padding: 0;
			}
		}

		& .tr-center {
			& td {
				text-align: center;
			}
		}

		& .tr-danger {
			td {
				background-color: var(--ef-color-raspberry-red);
				color: var(--ef-color-white);
			}
		}

		& .tr-warning {
			td {
				background-color: var(--ef-color-yellow);
			}
		}

		& .tr-grey,
		& .tr-grey-light {
			td {
				background-color: var(--ef-color-signal-black-4);
			}
		}

		& .td-grey {
			background-color: var(--ef-color-signal-black-16);
		}

		& .td-red-light {
			background-color: rgba(var(--ef-color-raspberry-red-rgb), 0.2);
		}

		& .td-green-light {
			background-color: rgba(var(--ef-color-indiablue-rgb), 0.2);
		}

		& .td-blue-light {
			background-color: #c7daea;
		}
		
		& .td-light {
			background-color: var(--ef-color-signal-black-8);
			/*color: #ffffff;
			text-align: center;
			border-bottom: 3px solid #FFF;*/
		}

		/*& .td-standard {
			background-color: #0299a2;
			padding: 10px 20px;
			color: #ffffff;
			text-align: center;
			border-bottom: 3px solid #FFF;
		}

		& .td-business {
			background-color: var(--ef-color-raspberry-red);
			padding: 10px 20px;
			color: #ffffff;
			text-align: center;
			border-bottom: 3px solid #FFF;
		}

		& .td-company {
			background-color: #2a2a2a;
			padding: 10px 20px;
			color: #ffffff;
			text-align: center;
			border-bottom: 3px solid #FFF;
		}*/
	}

	&.table-intern {
		& tr {
			& th {
				background: white;
				padding: 4px 16px;
				font-size: 12px;
			}
		}
	}

	&.table-blank {
		& tr {
			border-bottom: none;
		}
	}
}

#static_filter {
	& .table {
		& tr {
			& th {
				background: white;
			}

			& td {
				&:first-child {
					word-break: break-all;
				}
			}
		}
	}
}

table {
&.table-nse {
	& #question-sortable {
		& tr {
			& td {
				padding: 5px 10px;

				& > label {
					transform: translateY(3px);
				}
			}
		}
	}
}
}

/* 	
	#####
		PAGINATION
	#####
*/
.pagination {
	& .page-item {
		&.active {
			& .page-link {
				z-index: auto;
				background: var(--ef-color-signal-black-8);
				color: var(--ef-color-signal-black);
				border: var(--bs-pagination-border-width) solid var(--bs-pagination-border-color);
			}
		}

		& .page-link {
			color: var(--ef-color-greenbrown);
		}
	}
}

.cursor-default {
	cursor: default;
}

.box-shadow {
	box-shadow:  0px 5px 10px 1px rgba(0, 0, 0, 0.16);
}

.table-survey-control-move {
	& button {
		pointer-events: none;
	}

	&:hover {
		cursor: move;

		& button {
			background: var(--ef-color-signal-black-8);
		}
	}
}

.scrollable-inner-page {
	height: calc(100vh - 192px);
	overflow-y: auto;

	& .sticky-section {
		position: sticky;
		top: 0;
		z-index: 1;
	}
}

.img-responsive {
	max-width: 100%;
}

/* 	
	#####
		BOOSTRAP COLLAPSIBLE
	#####
*/
[data-bs-toggle="collapse"] {
	i {
		transition: transform linear 150ms;
	}

	&[aria-expanded="true"] {
		&:has(.bi-chevron-down) {
			i {
				transform: rotate(180deg);
			}
		}
	}
}

.h-stretch {
	height: 100%;
	height: -moz-available;          /* WebKit-based browsers will ignore this. */
    height: -webkit-fill-available;  /* Mozilla-based browsers below 146 will ignore this. */
    height: stretch;
}