/* Bootstrap fixes  */
.row {
	--bs-gutter-x: 0;
    --bs-gutter-y: 0;

	& > [class*='col-'] {
		padding: 0;
	}
}

/* Layouts */
.layout-content-static {
	& .page-content {
		/*height: calc(100vh - 64px);*/
	}
}

.page-content {
	position: relative; 

	&:not(.dashboard) {
		padding: 64px calc(64px - var(--scrollbar-width, 0px)) 128px 64px;

		@media (max-width: 992px) {
			padding: 64px 24px 128px 24px;
		}
	}

	& .page-content-inner {
		padding: 64px 0 64px;
	}

	&.dashboard {
		height: calc(100vh - var(--global-main-header-height, 0px));
        
		&.layout-design {
			& .sidebar-container {
				width: 100%;

				@media (min-width: 576px) {
					max-width: 480px;
				}

                & .sidebar__content{
                    padding: 64px;

					@media (max-width: 576px) {
						padding: 20px;
					}
                }
			}

			& .container-page {
				left: 480px;

                @media (max-width: 992px) {
					left: 0;
	                padding: 64px;
                }
			}

            & #save-design{
				z-index: 10;
                position: sticky;
                top: 0px;
                width: 100%;
            }
		}

		& .sidebar-container {
			z-index: 2;
			width: 320px;
			background-color: var(--ef-color-white);
			border-right: 1px solid var(--ef-color-signal-black-16);
			display: grid;
			grid-template-areas:
				"mobileClose"
				"content"
				"info";
			grid-template-rows: max-content 1fr max-content;
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			transform: translate(0);
			transition: transform linear 250ms, width linear 250ms;

			@media (max-width: 992px) {
				transform: translateX(-100%)
			}

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

			.sidebar__flap {
				z-index: 9999;
				position: absolute;
				top: 14px;
                left: 100%;
                background: var(--ef-color-signal-black-8);
                width: 38px;
                height: 38px;
				cursor: pointer;
				border-top-right-radius: 4px;
				border-bottom-right-radius: 4px;

				&:hover,
				&:focus {
					background: var(--ef-color-signal-black-16);
					color: var(--ef-color-black-100);
				}

				@media (max-width: 768px) {
					.flap-close {		
						transform: rotate(180deg);
					}
				}
			}

			& .sidebar-close {
				grid-area: mobileClose;

				@media (max-width: 768px) {
					padding: 10px 35px;
				}

				@media (min-width: 769px) {
					display: none !important;
				}
			}

			&.open {
				transform: translateX(0);

				& .sidebar__flap {
					display: none;

					@media (max-width: 576px) {
						display: none !important;
					}
				}

				& .sidebar__mobile-background {
					opacity: 1;
					width: 100vw;
					transition-delay: 250ms;
				}
			}

			& .sidebar__content {
				grid-area: content;
				overflow-y: auto;
				padding-block: 28px;
				background: var(--ef-color-white);
                height: 100%;

				@media (max-width: 768px) {
					padding-top: 0;
				}

				& .dropdown {
					a {
						padding-inline: 20px 30px;
						font-size: 14px;
						min-height: auto;
					}
				}
	
				& ul {
					margin: 0px;
					padding: 0px;
	
					& li {
						&:has( > a),
						& > div {
							padding-inline-end: 20px;
						}

						&:has( > a),
						& > div {
							display: flex;
							align-items: center;
							gap: 10px;

							& a {
								padding-right: 0;
								flex: 1 1 auto !important;
							}

							& i {
								transition: transform linear 250ms;
							}

							&:hover {
								background-color: var(--ef-color-signal-black-4);

								& .number {
									background: #DDD;
								}

								& ul {
									background: white;
								}

								/*& > .createFolder,
                                & > .deleteFolder {
									visibility: visible;
								}*/
								& .createFolder,
								& .dropdown {
									visibility: visible;
								}
							}
						}

						& .createFolder,
						& .dropdown {
							visibility: hidden;
						}

						&.active:has( > a),
						&.active > div:has( .bi.bi-plus-lg) {
							background-color: #efefef;

							& .number {
								background: #DDD;
							}
						}

						& > input {
							display: none;

							& ~ ul {
								max-height: 0;
								overflow: hidden;
								transition: max-height linear 500ms;
							}

							&:checked {
								& + div {
									& label {
										i {
											transform: rotate(180deg);
										}
									}
								}

								& ~ ul {
									max-height: 1000px;
								}
							}
						}
						
						& a,
						& > span {
							/*font-family: "Lato Bold";*/
							font-size: var(--fs-16);
							display: flex;
							align-items: center;
							gap: 10px;
							padding-inline: 40px;
							padding-block: 18px;
							min-height: 40px;
							max-height: 64px;
							text-decoration: none;
							color: var(--ef-color-greyblue);
	
							& .number {
								display: inline-flex;
								align-items: center;
								justify-content: center;
								border-radius: 50%;
								min-width: 24px;
								height: 24px;
								color: var(--ef-color-greyblue);
								background-color: var(--ef-color-signal-black-8);
								font-size: var(--fs-12);
							}

                            &:hover{
                                text-decoration: none;
                               /* color: var(--ef-color-indiablue);*/
                                
                                & .number{
                                    text-decoration: none;
                                    /*color: var(--ef-color-indiablue);*/
                                }
                            }
						}

						& ul {
							li {
								&.active {
									/*.number {
										background: var(--ef-color-signal-black-100);
										color: var(--ef-color-white);
									}

									.description {
										text-decoration: underline;
										text-decoration-thickness: 3px;
									}*/
									/*background: var(--ef-color-signal-black-4);*/
									background-color: #efefef;

									& .number {
										background: #DDD;
									}

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

								&:hover {
									background-color: var(--ef-color-signal-black-4);

									& .number {
										background: #DDD;
									}
								}

								a {
									font-family: Lato;
									padding-left: 75px;
									
									/* Trim text after to lines with "..." */
									.lineClamp {
										overflow: hidden;
										display: -webkit-box;
										-webkit-box-orient: vertical;
										-webkit-line-clamp: 2;
									}

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

										/*& .number {
                                            color: var(--ef-color-white);
											background: var(--ef-color-indiablue);
										}*/
									}
								}
							}
						}
					} 
				}

                & form {
                    position: relative;
                }
			}

			.sidebar__mobile-background {
				transition: opacity linear 200ms;
				background: rgba(var(--ef-color-signal-black-100-rgb), 0.4);
				z-index: -1;
				position: absolute;
				top: 0;
				left: 0;
				width: 0;
				height: 100%;
				opacity: 0;
			}
	
			& .sidebar__info {
				grid-area: info;
				display: flex;
				flex-direction: column;
				gap: 10px;
				position: relative;
				border-top: 1px solid var(--ef-color-signal-black-16);
				padding-inline: 40px;
				padding-block: 28px;
				overflow-y: hidden;
				max-height: 180px;
                min-height: 180px;
				background: white;
				
				& .infobox-msg {
					overflow: hidden;
					min-height: 60px;
    				max-height: 60px;

					& > div {
						overflow: hidden;
						position: relative;
						max-height: 110px;
						/* Trim text content after 8 lines */
						display: -webkit-box;
						-webkit-line-clamp: 8;
						-webkit-box-orient: vertical;
	
						& .gradient {
							position: absolute;
							width: 100%;
							height: 60px;
							/*margin-top: -60px;*/
							top: 20px;
							background: -moz-linear-gradient(bottom, rgba(var(--ef-color-white-rgb),0.95) 0%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
							background: -webkit-linear-gradient(bottom, rgba(var(--ef-color-white-rgb),0.95) 0%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
							background: linear-gradient(to top, rgba(var(--ef-color-white-rgb),0.95) 0%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
							filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6dddddd',GradientType=0 ); /* IE6-9 */
						}
					}
				}
			}
		}

		& .container-page {
			position: absolute;
			top: 0;
			bottom: 0;
			left: 320px;
			right: 0;
			overflow-y: auto;
			padding: 40px 64px 128px 64px;
			transition: left linear 250ms;

			@media (max-width: 992px) {
				left: 0;
				padding: 60px 24px 128px 24px;
			}
		}
	}
}

/*paddings & margins*/
    .m-0 {margin: 0px;}
    .mt-10{margin-top: 10px;}
    .mt-auto{margin-top: auto;}
    .mb-20{margin-bottom: 20px;}
    .mr-6{margin-right: 6px;}
    .ml-4{margin-left: 4px;}
    .ml-8{margin-left: 8px;}

    .pt-5{padding-top: 5px;}
    .pt-10{padding-top: 10px;}

/* Overview */
    .survey-details {
		border-radius: 8px;
		container: surveyCard / inline-size;

		&.archive {
			& .survey__card {
				grid-template-columns: max-content 1fr max-content 32px;
				grid-template-areas: 
					"checkbox title inviteResult reactivate options"
					"checkbox updatedDateStatus inviteResult reactivate options";

				@media (max-width: 768px) {
					grid-template-areas: 
						"checkbox title title options"
						". updatedDateStatus updatedDateStatus ."
						". inviteResult inviteResult reactivate";
				}
			}
		}

		& .survey__card {
			position: relative;
			padding: 14px 16px 14px 8px;
			display: grid;
			/*grid-template-areas: 
				"checkbox title invite results avatar options"
				"checkbox updatedDateStatus invite results avatar options";*/
			grid-template-areas: 
				"checkbox title inviteResult avatar options"
				"checkbox updatedDateStatus inviteResult avatar options";
			grid-template-rows: 1fr max-content;
			grid-template-columns: max-content 1fr max-content max-content 32px;
			align-items: center;
			/*gap: 8px 16px;*/
			gap: 0 8px;

			&.no-user-rights {
				grid-template-areas: 
					"checkbox title title avatar"
					"checkbox updatedDateStatus updatedDateStatus avatar";
				grid-template-columns: max-content 1fr 32px;

				@container (max-width: 715px) {
					grid-template-areas: 
						"checkbox title title title"
						". updatedDateStatus updatedDateStatus ."
						". . . avatar";
					grid-template-columns: max-content repeat(2, 1fr) 32px;
					gap: 4px 8px;
				}

				& .survey__avatar {
					margin-right: 0;
				}
			}

			&:hover {
				cursor: pointer;

				& .survey__select {
					& label {
						opacity: 1;
					}
				}
			}

			&:has(input[type="checkbox"]:checked) {
				& label {
					opacity: 1;
				}
			}

			@container (max-width: 715px) {
				/*grid-template-areas: 
					"checkbox title title options"
					"checkbox invite results options"
					"checkbox updatedDateStatus updatedDateStatus avatar";*/
				grid-template-areas: 
					"checkbox title title options"
					". updatedDateStatus updatedDateStatus ."
					". inviteResult inviteResult avatar";
				grid-template-columns: max-content repeat(2, 1fr) 32px;
				gap: 4px 8px;
			}

			& .icons-top-right {
				display: flex;
				position: absolute;
				right: 0;
				top: 0;
				overflow: hidden;
				border-top-right-radius: 8px;
				border-bottom-left-radius: 8px;
				background: var(--ef-color-signal-black-80);

				& > span,
				& > a {
					display: inline-flex;
					align-items: center;
					justify-content: center;
					width: 32px;
					height: 16px;
					/*border-bottom-left-radius: 8px;*/
				}
			}

			& .survey__select {
				grid-area: checkbox;
				align-self: center;

				& label {
					position: relative;
					z-index: 1;
					opacity: 0;

					/* Make the clickable area of the checkbox bigger to prevent accidentally clicking the survey link */
					&::before {
						content: "";
						height: 40px;
						width: 30px;
						position: absolute;
						left: -7px;
						z-index: -1;
					}
				}
			}

			& .survey__title {
				grid-area: title;
				display: flex;
				flex-direction: column;
				/*gap: 12px;*/
				justify-content: center;

				& .survey__labels {
					display: flex;
					gap: 5px;
					flex-wrap: wrap;
				}


				a {
					color: var(--ef-color-signal-black-100);
					text-decoration: none;

					&:hover,
					&:active,
					&:focus {
						color: var(--ef-color-greenbrown);
					}
				}
			}

			& .survey_update-status {
				grid-area: updatedDateStatus;
				display: flex;
				flex-wrap: wrap;
				gap: 16px;
				align-items: center;

				@container (max-width: 715px) {
					gap: 5px;
				}
			}

			& .survey__updated {
				/*grid-area: updatedDate;*/
				cursor: default;
			}

			& .survey__status {
				/*grid-area: status;*/
				cursor: default;
			}

			/*& .survey__invite,
			& .survey__result,*/
			& .survey__invite-result,
			& .survey__avatar {
				margin-right: 8px;
			}

			& .survey__invite-result {
				grid-area: inviteResult;
				display: flex;
				gap: 4px;
				align-items: center;
			}

			& .survey__invite {
				/*grid-area: invite;*/

				/*@container (min-width: 715px) {
					transform: translateX(8px);
				}*/
			}

			& .survey__result {
				/*grid-area: results;*/
			}

			& .survey__avatar {
				grid-area: avatar;
				cursor: default;
			}

			& .survey__reactive {
				grid-area: reactivate;
				align-self: center;
			}
			
			& .survey__options {
				grid-area: options;
				align-self: center;
			}
		}
    }
    
    #preparing .survey-details {
        background-color: var(--ef-color-signal-black-4);

		&:hover,
		&:focus {
			background-color: rgba(var(--ef-color-signal-black-8-rgb), 0.97);
		}
    }
	#running .survey-details {
		background-color: rgba(var(--ef-color-indiablue-rgb), 0.1);

		&:hover,
		&:focus {
			background-color: rgba(var(--ef-color-indiablue-rgb), 0.25);
		}
    }
    #completed .survey-details {
        background-color: rgba(var(--ef-color-raspberry-red-rgb), 0.1);

		&:hover,
		&:focus {
			background-color: rgba(var(--ef-color-raspberry-red-rgb), 0.25);
		}
    }

/* modals */	
.add-audio-modal,
.image-upload-modal {
	& .file-input-wrapper {
		width: max-content;
	}
}

.question-modal {
	& .nav {
		.btn-signal-black-16 {
			&.active {
				background: var(--ef-color-signal-black-100) !important;
				color: var(--ef-color-white) !important;
			}
		}
	}
}

.logic-modal {
	& .conditions {
		& .condition-initial {
			display: grid;

			@media (min-width: 768px) {
				grid-template-columns: max-content max-content 1fr 32px;
			}

			& .deleteAnswer {
				position: absolute;
				top: 50%;
				right: -16px;
				transform: translate(100%, -50%);
			}

			& div {
				&:empty {
					display: none;
				}
			}
		}

		& .condition {
			display: grid;
			grid-template-areas: 
				"select1"
				"text"
				"select2"
				"delete";
			grid-template-rows: max-content max-content 1fr max-content;

			@media (min-width: 768px) {
				grid-template-areas: "select1 text select2 delete";
				grid-template-columns: max-content max-content 1fr max-content;
				grid-template-rows: 1fr;
			}

			& > :nth-child(1) {
				grid-area: select1;
			}

			& > :nth-child(2) {
				grid-area: text;
			}

			& > :nth-child(3) {
				grid-area: select2;
			}

			& > :nth-child(4) {
				grid-area: delete;
				margin-top: 2px;
				display: flex;
				justify-content: center;
				align-items: start;
			}

			& div {
				&:empty {
					display: none;
				}
			}

			& .deleteAnswer {
				position: absolute;
				top: 50%;
				right: -21px;
				transform: translate(100%, -50%);
			}
		}
	}
}

/* hr */
.hr-text {
	position: relative;
	padding: 10px 0;

	& span {
		display: flex;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		background: var(--ef-color-white);
		padding: 0 10px;
		color: var(--ef-color-signal-black-60);
		font-size: var(--fs-12);
	}
}

/* logos */
.ef-logo-short {
	width: 50px;
	height: 65px;
	position: absolute;
	top: 0;
	left: -90px;

	@media (max-width: 768px) {
		position: static;
	}
}

/* lists */
.list-items {
	display: flex;
	flex-direction: column;
	gap: 4px;

	/*@media (max-width: 992px) {
		min-width: max-content;
	}*/

	& .list-row {
		display: grid;
		align-items: center;
		gap: 40px;
		padding: 14px 16px;
		background: var(--ef-color-signal-black-4);
		border-radius: 4px;

		&:not(.title-row, .empty-row):hover {
			background: var(--ef-color-signal-black-8);
		}

		& .title-column {
			grid-area: title;
		}

		& .update-column {
			grid-area: updated;
		}

		& .tools-column {
			grid-area: tools;
		}

		&.empty-row {
			grid-template-columns: 1fr !important;
		}
	}

	&.layout-list-items {
		& .list-row {	
			grid-template-areas: "title updated tools";
			grid-template-columns: 1fr max-content max-content;
	
			@media (max-width: 768px) {
				grid-template-areas: 
					"title tools" 
					"updated tools";
				grid-template-columns: 1fr max-content;
				gap: 10px;
			}
			
			& .title-column {
				grid-area: title;
			}
	
			& .update-column {
				grid-area: updated;
			}
	
			& .tools-column {
				grid-area: tools;
			}
		}
	}

	&.participants-list-items {
		& .list-row {
			grid-template-areas: "title group participants updated tools";
			grid-template-columns: 1fr max-content max-content max-content max-content;

			@media (max-width: 768px) {
				grid-template-areas: 
					"title title title tools" 
					"updated group participants tools";
				grid-template-columns: 1fr 1fr 1fr max-content;
				gap: 10px;
			}

			@media (max-width: 576px) {
				grid-template-areas: 
					"title title tools" 
					"updated updated tools"
					"group participants tools";
				grid-template-columns: 1fr 1fr max-content;
				gap: 10px;
			}

			& .title-column {
				grid-area: title;
			}

			& .group-column {
				grid-area: group;
			}

			& .participants-column {
				grid-area: participants;
			}
	
			& .update-column {
				grid-area: updated;
			}
	
			& .tools-column {
				grid-area: tools;
			}
		}
	}

	&.template-list-items {
		& .list-row {
			grid-template-areas: "title updated tools";
			grid-template-columns: 1fr max-content max-content;
			gap: 16px;

			/*@media (max-width: 768px) {
				grid-template-areas: 
					"title title title tools" 
					"updated group participants tools";
				grid-template-columns: 1fr 1fr 1fr max-content;
				gap: 10px;
			}*/

			& .title-column {
				grid-area: title;
			}
	
			& .update-column {
				grid-area: updated;
			}
	
			& .tools-column {
				grid-area: tools;
			}
		}
	}

	&.delete-list-items {
		& .list-row {
			grid-template-areas: "title description updated tools";
			grid-template-columns: 200px 1fr max-content max-content;
			gap: 16px;

			@media (max-width: 768px) {
				grid-template-areas: 
					"title title tools" 
					"description updated tools";
				grid-template-columns: 1fr 1fr max-content;
			}

			& .title-column {
				grid-area: title;
			}

			& .description-column {
				grid-area: description;
			}
	
			& .update-column {
				grid-area: updated;
			}
	
			& .tools-column {
				grid-area: tools;
			}
		}
	}

	&.invoice-order-list-items {
		& .list-row {
			grid-template-columns: 50px 130px 80px 60px 80px 110px 120px;
		}
	}

	&.account-list-items {
		& .list-row {
			grid-template-areas: "name email custom1 custom2 login buttons";
			grid-template-columns: max-content 1fr max-content max-content 1fr max-content;

			/*@media (max-width: 768px) {
				grid-template-areas: 
					"name name"
					"email login"
					"custom1 custom2"
					"buttons buttons";
				grid-template-columns: 1fr 1fr;
				gap: 10px;
			}

			@media (max-width: 992px) {
				grid-template-areas: 
					"name name login" 
					"custom1 custom2 buttons";
				grid-template-columns: 1fr 1fr 1fr max-content;
				gap: 10px;
			}*/

			& .name-column {
				grid-area: name;
			}

			& .custom1-column {
				grid-area: custom1;
			}

			& .custom2-column {
				grid-area: custom2;
			}
	
			& .email-column {
				grid-area: email;
			}
	
			& .login-column {
				grid-area: login;
			}

			& .buttons-column {
				grid-area: buttons;
			}
		}
	}

	&.email-invite-list-items {
		& .list-row {	
			grid-template-areas: "title updated tools";
			grid-template-columns: 1fr max-content max-content;
	
			@media (max-width: 768px) {
				grid-template-areas: 
					"title title" 
					"updated tools";
				grid-template-columns: 1fr max-content;
				gap: 10px;
			}

			&.has-status-data {
				grid-template-areas: "title status";
				grid-template-columns: 1fr max-content;
		
				@media (max-width: 768px) {
					grid-template-areas: 
						"title" 
						"status";
					grid-template-columns: 1fr;
					gap: 10px;
				}

				& .status-column {
					grid-area: status;
				}
			}
			
			& .title-column {
				grid-area: title;
			}
	
			& .update-column {
				grid-area: updated;
			}
	
			& .tools-column {
				grid-area: tools;
			}
		}
	}

	&.participant-group-list-items {
		& .list-row {	
			grid-template-areas: "title tools";
			grid-template-columns: 1fr max-content;
	
			@media (max-width: 768px) {
				grid-template-areas: 
					"title" 
					"tools";
				grid-template-columns: 1fr;
				gap: 10px;
			}			
			
			& .title-column {
				grid-area: title;
			}
	
			& .tools-column {
				grid-area: tools;
			}
		}
	}

	&.label-list-items {
		& .list-row {	
			grid-template-areas: "colorCol labelName labelDesc saveDelete";
			grid-template-columns: max-content 200px 1fr max-content;
			gap: 16px;
	
			@media (max-width: 768px) {
				grid-template-areas: 
					"colorCol labelName saveDelete" 
					"labelDesc labelDesc .";
				grid-template-columns: max-content 1fr max-content;
				gap: 10px;
			}			
			
			& .color-column {
				grid-area: colorCol;
			}
	
			& .label-name-column {
				grid-area: labelName;
			}

			& .label-description-column {
				grid-area: labelDesc;
			}

			& .save-delete-column {
				grid-area: saveDelete;
			}
		}
	}

	&.label-list-items-modal {
		& .list-row {	
			grid-template-areas: "lableCheckbox colorCol labelCheckboxModal labelName labelDesc saveDelete";
			grid-template-columns: max-content max-content 15px 200px 1fr max-content;
			gap: 16px;
	
			@media (max-width: 768px) {
				grid-template-areas: 
					"lableCheckbox colorCol labelName labelCheckboxModal" 
					"lableCheckbox labelDesc labelDesc saveDelete";
				grid-template-columns: max-content max-content 1fr max-content;
				gap: 10px;
			}	
			
			& .label-checkbox {
				grid-area: lableCheckbox;
			}
			
			& .color-column {
				grid-area: colorCol;
			}

			& .label-checkbox-modal {
				text-align: center;
				grid-area: labelCheckboxModal;
			}
	
			& .label-name-column {
				grid-area: labelName;
			}

			& .label-description-column {
				grid-area: labelDesc;
			}

			& .save-delete-column {
				grid-area: saveDelete;
			}
		}
	}
}

/* register page */
.register-page {
	container: surveyCard / inline-size;

	& .register-page-content {
		height: 100vh;
		display: grid;
		grid-template-areas: "leftSide rightSide";
		grid-template-columns: 2fr 1fr;

		@container (max-width: 900px) {
			grid-template-areas: 
				"leftSide"
				"rightSide";
			grid-template-columns: 1fr;
			grid-template-rows: 1fr 1fr;
		}

		& .left-column {
			grid-area: leftSide;
		}

		& .right-column {
			font-size: 16px;
			grid-area: rightSide;
		}
	}
}

/* Share icons */
.icon-fb {
	color: #3B5998;
}
.icon-twitter-x {
	color: #000000;
}
.icon-linkedin {
	color: #0E76A8;
}

/* TNL M */
#data_teilnehmer_emailliste {
	& .row {
		margin: 0;
	}
}

/* Media list */
.media-list {
	display: flex;
	flex-direction: column;	
	gap: 16px;

	& .media {
		display: flex;
		align-items: center;
		justify-content: space-around;
		padding: 8px 16px;
		border-radius: 8px;

		&:hover {
			background: var(--ef-color-signal-black-4);
		}

		&.user-item {
			border-radius: 8px;
			padding: 16px 24px;
			display: grid;
			grid-template-areas: 
				"profile user-item--body settings"
				"profile user-item--body settings";
			grid-template-columns: 48px 1fr 32px;
			gap: 16px;

			& .user-item--left {
				grid-area: profile;
				align-self: start;
			}

			/*& .user-item--header {
				grid-area: user-item--header;
			}*/

			& .user-item--body {
				grid-area: user-item--body;
			}

			& .user-item--right {
				grid-area: settings;
				align-self: start;
			}

			/*& .buttons-column {
				justify-self: end;
			}

			&:has(+ .group-item) {
				margin-top: 5px;				
			}*/
		}

		&.group-item {
			margin-top: 5px;
		}

		&.media-group {
			justify-content: space-between;
			background: var(--ef-color-signal-black-8);

			&:hover {
				background: var(--ef-color-signal-black-16);
			}
		}

		&.role-item {
			display: flex;
			gap: 16px;
			border-radius: 8px;
			padding: 16px 24px;
		}

		&.media-lvl0 {
			margin-top: 48px;
		}

		&.media-lvl1 {
			margin-left: 40px;
		}

		&.media-lvl2 {
			margin-left: 80px;
		}

		&.media-lvl3 {
			margin-left: 120px;
		}

		&.media-lvl4 {
			margin-left: 160px;
		}
	}
}

/* E-Mail Invitation */
/*#mailinvite-section {
	@media (max-width: 768px) {
		box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.29);
	}
}*/

.tab-full {
	& .email-tab-header,
	& .email-tab-layout,
	& .email-tab-footer {
		display: grid;
		grid-template-columns: 1fr;
	}

	& .email-tab-layout {
		& .left-part {
			clip-path: inset(0px -20px 0px -20px);
		}
	}
}

.email-tab-header,
.email-tab-footer {
	display: grid;
	grid-template-columns: 1fr 360px;
	background: var(--ef-color-white);

	@media (max-width: 768px) {
		grid-template-columns: 1fr;
	}
}

.email-tab-header {
	& .left-part {
		padding: 16px;
		border-top-left-radius: 8px;
		border-top-right-radius: 8px;
		box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.29);
		border-bottom: 1px solid var(--ef-color-signal-black-8);

		@media (max-width: 768px) {
			order: 1;
		}
	}

	& .right-part {
		padding: 16px;

		@media (max-width: 768px) {
			order: 0;
		}
	}
}

.email-tab-footer {
	& .left-part {
		border-bottom-left-radius: 8px;
		border-bottom-right-radius: 8px;
		box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.29);
		padding: 16px;
		clip-path: inset(0px -20px -20px -20px);
		border-top: 1px solid var(--ef-color-signal-black-8);
	}

	& .right-part {
	}
}

.email-tab-layout {
	display: grid;
	grid-template-columns: 1fr 360px;

	@media (max-width: 768px) {
		grid-template-columns: 1fr;
	}

	& .left-part {
		display: flex;
		flex-direction: column;
		box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.29);
		clip-path: inset(0px 0px 0px -20px);

		@media (max-width: 768px) {
			clip-path: inset(0px -20px 0 -20px);
			order: 1;
		}

		& .cke_editor_mailtext {
			flex-grow: 1;

			& .cke_top {
				padding: 16px; 
				border-bottom: 1px solid var(--ef-color-signal-black-8);
			}

			& .cke_contents {
				padding: 16px;
			}
		}
	}

	& .right-part {
		padding: 32px;
		background: var(--ef-color-signal-black-8);
		border-top-right-radius: 8px;
		border-bottom-right-radius: 8px;
		box-shadow: inset 20px 0px 25px -25px rgba(0,0,0,0.29);

		@media (max-width: 768px) {
			box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.29);
			clip-path: inset(0px -20px 0 -20px);
			border-radius: 0;
			order: 0;
		}

		/*input {
			background: var(--ef-color-signal-black-16);
		}*/
	}
}

.layoutEditorPreview {
    display: block;
    /* border-top: 1px solid #b9b9b9 */
}

.list-group-item {
	display: grid;
	grid-template-columns: max-content 1fr max-content;
	gap: 16px;
}

.statsMenu {
	position: absolute;
    top: 10px;
    left: 50%;
    right: 0;
    z-index: 2;
    max-width: 1200px;
    width: 100%;
    transform: translateX(-50%);
	box-shadow: 0px 5px 10px 1px rgba(0, 0, 0, 0.16);

	@media (max-width: 1200px) {
		max-width: 100%;
		left: 0;
		transform: translateX(0);
	}
}

.single-result-layout-top {
	display: grid;
	grid-template-areas:
		"top-left top-right";
	grid-template-columns: 1fr 3fr;

	& .top-left-col {
		grid-area: top-left;
	}

	& .top-right-col {
		grid-area: top-right;
	}
}

.single-result-layout-bottom {
	display: grid;
	grid-template-areas:
		"center-left center-right";
	grid-template-columns: 1fr 3fr; 

	&.no-content {
		grid-template-columns: 1fr 3fr;
		grid-template-areas:
			"no-content no-content";
	}

	& .center-left-col {
		grid-area: center-left;
	}

	& .center-right-col {
		grid-area: center-right;

		display: grid;
		grid-template-columns: 1fr;
    	grid-template-rows: max-content 1fr;
		min-height: 1000px;
	}

	& .no-content-col {
		grid-area: no-content;
	}
}

.questionFilterContainer {
	& .questionAnswerContainer {
		position: relative;

		& .deleteAnswer {
			position: absolute;
			top: 50%;
			right: -16px;
			transform: translate(100%, -50%);
		}
	}

	& .questionFilterAnswer > .questionAnswerContainer + .logicConnection + .questionAnswerContainer {
		justify-content: end;
	}
}

.dashboard-content {
	container: dashboardContent / inline-size;

	& .group-content {
		display: grid;
		gap: 24px;
		grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));

		&:has(> :only-child) {
			& .group-card {
				max-width: min(400px, 100%);
			}
		}

		& .group-card {
			max-width: 100%;
			min-height: 420px;
			border-radius: 8px;
			padding: 24px 32px;
			display: grid;
			grid-template-columns: 1fr;
			grid-template-rows: max-content 1fr max-content;
			gap: 32px;	

			&:hover {
				background: var(--ef-color-signal-black-4);
			}

			/*& .group-card--header {
				grid-area: card-header;
			}*/

			& .group-card--body {
				/*grid-area: card-body;*/
				align-self: start;
			}

			/*& .group-card--footer {
				grid-area: card-footer;
			}*/
		}
	}
}

.main_wizard {
	--sidebar-width: 500px;
	--sidebar-desktop-flap-top: 276px;
	--sidebar-mobile-flap-top: 230px;

	& .sidebar-close {
		& i {
			color: var(--ef-color-white);
		}
	}

	& .main_wizard--left {
		background: var(--ef-color-signal-black-100);
		color: var(--ef-color-white);

		& .sidebar__flap {
			background: var(--ef-color-signal-black-100);

			&:hover,
			&:focus {
				background: hsl(from var(--ef-color-signal-black-100) h s calc(l + 10));
				color: var(--ef-color-white);
			}
		}

		& .wizard-content--left {
			padding: 50px 80px;

			@media (max-width: 768px) {
				padding: 40px;
			}
		}
	}

	& .main_wizard--right {
	}

	& .template-category {
		& .template-items {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
			gap: 16px;

			& :only-child {
				max-width: 255px;
			}
		}
	}
}

.comp-sidebar-content {
	--sidebar-comp-width: var(--sidebar-width, 320px);
	--sidebar-comp-desktop-flap-top: var(--sidebar-desktop-flap-top, 80px);
	--sidebar-comp-mobile-flap-top: var(--sidebar-mobile-flap-top, 40px);
	--sidebar-comp-height-correction: var(--sidebar-height-correction, 0px);
	--sidebar-comp-x-translate-correction: var(--sidebar-x-translate-correction, 0px);
	position: relative;

	& .sidebar-container {
		z-index: 2;
		width: var(--sidebar-comp-width);
		display: grid;
		grid-template-areas:
			"mobileClose"
			"content";
		grid-template-rows: max-content 1fr;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		transform: translate(0);
		transition: transform linear 250ms, width linear 250ms;
		height: calc(100vh - var(--sidebar-comp-height-correction));

		@media (max-width: 992px) {
			transform: translateX(calc(-100% - var(--sidebar-comp-x-translate-correction)));
		}

		@media (max-width: 768px) {
			width: calc(100vw - var(--sidebar-comp-x-translate-correction) - var(--sidebar-comp-x-translate-correction));
			/*background: white;*/
		}

		& .sidebar__flap {
			z-index: 9999;
			position: absolute;
			top: var(--sidebar-comp-desktop-flap-top);
			left: 100%;
			width: 40px;
			height: 40px;
			cursor: pointer;
			border-top-right-radius: 4px;
			border-bottom-right-radius: 4px;
			font-size: 18px;

			@media (max-width: 768px) {
				top: var(--sidebar-comp-mobile-flap-top);				
			}

			@media (max-width: 768px) {
				.flap-close {		
					transform: rotate(180deg);
				}
			}
		}

		& .sidebar-close {
			grid-area: mobileClose;

			@media (max-width: 768px) {
				padding: 10px 35px;
			}

			@media (min-width: 769px) {
				display: none !important;
			}
		}

		&.open {
			transform: translateX(0);

			& .sidebar__flap {
				display: none;

				@media (max-width: 768px) {
					display: none !important;		
				}
			}

			& .sidebar__mobile-background {
				opacity: 1;
				width: calc(100vw - var(--sidebar-comp-x-translate-correction) - var(--sidebar-comp-x-translate-correction));
				transition-delay: 250ms;
			}
		}

		& .sidebar__content {
			grid-area: content;
			overflow-y: auto;
			height: 100%;

			@media (max-width: 768px) {
				padding-top: 0;
			}
		}

		& .sidebar__mobile-background {
			transition: opacity linear 200ms;
			background: rgba(var(--ef-color-signal-black-100-rgb), 0.4);
			z-index: -1;
			position: absolute;
			top: 0;
			left: 0;
			width: 0;
			height: 100%;
			opacity: 0;
		}
	}

	& .content-container {
		position: absolute;
		top: 0;
		bottom: 0;
		left: var(--sidebar-comp-width);
		right: 0;
		overflow-y: auto;
		transition: left linear 250ms;
		height: calc(100vh - var(--sidebar-comp-height-correction));
		display: grid;
    	grid-template-rows: max-content 1fr;
		scroll-behavior: smooth;

		@media (max-width: 992px) {
			left: 0;
		}

		& .survey-question-preview {
			align-self: center;
		}
	}
}

.comp-sidebar-content-v2 {
	--sidebar-comp-width: var(--sidebar-width, 320px);
	--sidebar-comp-desktop-flap-top: var(--sidebar-desktop-flap-top, 80px);
	--sidebar-comp-mobile-flap-top: var(--sidebar-mobile-flap-top, 40px);
	--sidebar-comp-height-correction: var(--sidebar-height-correction, 0px);
	--sidebar-comp-x-translate-correction: var(--sidebar-x-translate-correction, 0px);
	--sidebar-comp-sticky-top-position: calc(var(--global-header-height, 0px) - var(--global-main-header-height, 0px) + var(--sidebar-sticky-top-position, 0px));
	
	display: grid;
    grid-template-columns: 0 1fr;

	transition: grid-template-columns linear 250ms;

	&.open {		
		@media (min-width: 1295px) {		
			grid-template-columns: var(--sidebar-comp-width) 1fr;

			& .sidebar-container {
				width: var(--sidebar-comp-width);
			}

			& .content-container {
				margin-left: 32px;
				width: calc(100vw - var(--sidebar-comp-width) - var(--sidebar-comp-x-translate-correction) - var(--sidebar-comp-x-translate-correction) - 32px);
			}
		}

		& .sidebar-container {
			width: var(--sidebar-comp-width);			

			@media (max-width: 1294px) {
				& .sidebar__mobile-background {
					display: block;
				}
			}

			@media (min-width: 769px) {
				& .sidebar__content {
					padding-right: 10px;
				}
			}

			@media (max-width: 768px) {
				height: auto;
				width: calc(100vw - 48px);
				background: white;

				& .sidebar-close {
					display: inline-flex;
				}

				&.open {
					& .sidebar__flap {
						display: none;
					}
				}

				& .sidebar__content {
					padding-right: 0;
					padding-top: 0;
				}
			}
		}

		@media (max-width: 768px) {
			& .content-container {
				display: none;
			}
		}
	}

	& .sidebar-container {
		z-index: 2;
		display: grid;
		grid-template-areas:
			"mobileClose"
			"content";
		grid-template-rows: max-content 1fr;
		position: sticky;
		top: var(--sidebar-comp-sticky-top-position);
		bottom: 0;
		left: 0;
		transform: none;
		transition: width linear 250ms;
		height: calc(100vh - var(--sidebar-comp-height-correction));
		width: 0px;

		/*@media (max-width: 1110px) {
			top: calc(var(--sidebar-comp-sticky-top-position) + 64px);
		}*/

		& .sidebar__flap {
			z-index: 9999;
			position: absolute;
			top: var(--sidebar-comp-desktop-flap-top);
			left: 100%;
			width: 40px;
			height: 40px;
			cursor: pointer;
			border-radius: 50%;
			font-size: 18px;
			margin-left: 10px;
			margin-top: -32px;
		}

		& .sidebar-close {
			grid-area: mobileClose;
			display: none;
			padding: 10px 16px;
			background: white;
			position: sticky;
			top: var(--sidebar-comp-sticky-top-position);
			z-index: 1;
		}

		& .sidebar__flap {
			display: flex;
		}

		&.open {
			& .sidebar__flap {}

			& .sidebar__mobile-background {
				opacity: 1;
				width: calc(100vw - var(--sidebar-comp-x-translate-correction) - var(--sidebar-comp-x-translate-correction));
				transition-delay: 250ms;

				@media (max-width: 992px) {
					width: calc(100vw - 48px);				
				}
			}
		}

		& .sidebar__content {
			grid-area: content;
			overflow-y: auto;
			height: 100%;
			padding-right: 0;
			padding: 64px 0;
		}

		& .sidebar__mobile-background {
			transition: opacity linear 200ms;
			background: rgba(var(--ef-color-signal-black-100-rgb), 0.4);
			z-index: -1;
			position: absolute;
			top: 0;
			left: 0;
			width: 0;
			height: 100%;
			opacity: 0;
			display: none;
		}
	}

	& .content-container {
		transition: width linear 250ms;
		padding: 64px 0 0;
		width: calc(100vw - var(--sidebar-comp-x-translate-correction) - var(--sidebar-comp-x-translate-correction));

		@media (max-width: 1294px) {
			margin-left: 0;
			width: calc(100vw - var(--sidebar-comp-x-translate-correction) - var(--sidebar-comp-x-translate-correction));
		}

		@media (max-width: 992px) {
			width: calc(100vw - 48px);				
		}
	}
}

.nested-sidebar-content {
	--sidebar-width: 440px;
	--sidebar-desktop-flap-top: 40px;
	--sidebar-mobile-flap-top: 40px;
	--sidebar-height-correction: 192px;
	--sidebar-x-translate-correction: 24px;
	position: relative;
	height: calc(100vh - var(--sidebar-height-correction));

	& .sidebar-container {
		& .sidebar__flap {
			background: var(--ef-color-signal-black-4);
		}

		& .sidebar__content {
			border-radius: 8px;
			padding: 40px;
			background: var(--ef-color-signal-black-4);
		}
	}

	& .content-container {
		@media (min-width: 992px) {
			padding-left: 64px;
		}

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

		& .survey-question-preview {
			transform: translateY(-42px);

			&.has-info-box {
				transform: translateY(-120px);
			}

			& .fake-div {
				height: 80px;
			}
		}
	}
}

.nested-sidebar-content-v2 {
	--sidebar-width: 320px;
	--sidebar-desktop-flap-top: 40px;
	--sidebar-mobile-flap-top: 40px;
	--sidebar-height-correction: 320px;
	--sidebar-x-translate-correction: 24px;
	position: relative;
	height: calc(100vh - var(--sidebar-height-correction));

	& .sidebar-container {
		& .sidebar__flap {
			background: var(--ef-color-signal-black-4);
		}

		& .sidebar__content {
			background: white;
			padding-right: 10px;
		}
	}

	& .content-container {
		@media (min-width: 992px) {
			padding-left: 32px;
		}
	}
}

.nested-sidebar-content-v3 {
	--sidebar-width: 320px;
	--sidebar-desktop-flap-top: 64px;
	--sidebar-mobile-flap-top: 64px;
	--sidebar-height-correction: 128px;
	--sidebar-x-translate-correction: 64px;

	& .sidebar-container {
		& .sidebar__flap {
			background: var(--ef-color-signal-black-8);
			
			& .flap-close {
				@media (max-width: 768px) {				
					transform: rotate(180deg);
				}
			}
		}

		& .sidebar__content {
			background: white;
		}
	}
}

.preview-demo {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: var(--ef-color-white);
	height: 100vh;
	z-index: 10;
	overflow: hidden;
	border-top-left-radius: 16px;
	border-top-right-radius: 16px;

	& .header {
		display: grid;
		grid-template-areas: "back navi tools";
		grid-template-columns: 100px 1fr 100px;
		grid-template-rows: 1fr;
		background: white;

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

		& .subnavi {
			grid-area: navi;
			justify-self: center;
		}

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

	.preview-content {
		display: grid;
		grid-template-rows: 64px 1fr;

		.preview-header {
			padding-inline: 40px;

			@media (max-width: 992px) {
				padding-inline: 24px;
			}
		}

		.preview-body {
			display: flex;
			justify-content: center;
			height: calc(100vh - 64px);
			overflow: auto;

			@media (min-height: 905px) {
				align-items: center;
			}			

			@media (min-width: 768px) {
				padding: 40px;
				padding-top: 0px;
			}
			
			iframe {				
				border: 1px solid #ccc;
				border-radius: 10px;

				&.sim-device-width-desktop {
					width: 100%;

					@media (min-width: 769px) {
						height: calc(100vh - 104px);
					}

					@media (max-width: 768px) {
						height: calc(100vh - 64px);
					}
				}

				&.sim-device-width-tablet {
					width: 992px;
				}

				&.sim-device-width-mobile {
					width: 400px;
					@media (min-height: 905px) {
						min-height: 800px;						
					}
					
					@media (max-height: 904px) {
						min-height: calc(100vh - 64px);
					}
				}
			}
		}
	}
}

/** Umfrage - Fragetypen **/
/*.survey-welcome-page {
	& .survey-question-container {
		margin-bottom: 40px;
	}
}*/

.survey-question-container {
	/*--test-color: #000000;*/
	font-size: 16px;
	margin-bottom: 200px;

	&.survey-page-title {
		margin-bottom: 40px;
	}

	&.question-disabled {
		opacity: 0.75;
	}

	& .question-item {
		display: flex;
		flex-direction: column;

		/*background: red;*/

		& .question-header {
			display: flex;
			flex-direction: column;
			margin-bottom: 9px;

			/*background: lime;*/

			& .questiontitle {
				font-size: 24px;
				margin: 0;
				margin-bottom: 15px;
			}

			& .note {
				margin: 0;
				margin-bottom: 15px;
				color: #6e727a;
			}	
		}

		& .question-body {
			display: flex;
			flex-direction: column;
			overflow-y: hidden;
            overflow-x: auto;
			
			& .additionalTextareaWrapper {
				margin-top: 30px;
				display: flex;
				flex-direction: column;
				gap: 8px;
			}

			& .btn-na {
				margin-top: 50px;
			}

			& table {
				&.table-blank {
					& td {
						padding-block: 4px;
					}
				}
			}

			& input {
				&[type="text"] {
					background: white;
					border-color: #000;
					border-radius: 3px;

					&:hover {
						outline: none !important;
					}

					&:focus {
						border-color: transparent;
						outline: 2px solid var(--ef-color-indiablue) !important;
					}
				}
			}

			& .form-select {
				background-color: rgba(0, 0, 0, 0.1);
				border: 1px solid rgba(0, 0, 0, 0.1);
				border-radius: 3px;
				min-width: 250px;
			}

			/*background: blue;*/
		}
	}

	/*&.questiontype-1,
	&.questiontype-2,
	&.questiontype-3,
	&.questiontype-4,
	&.questiontype-5,
	&.questiontype-6,
	&.questiontype-7,
	&.questiontype-8,
	&.questiontype-9,
	&.questiontype-10,
	&.questiontype-11,
	&.questiontype-12 {
		& .question-body {
			gap: 16px; 
		}
	}*/

	&.questiontype-1 {
		& .question-body {			
			& > div {
				&:has( .radio-inline) {
					display: flex;
					align-items: center;
					gap: 16px;
				}
			}

			& .btn-na {
				&:not(.btn-na-image) {
					min-width: 140px;
				}
			}
		}
	}

	&.questiontype-3 {
		& .question-body {
			& .table-nse {
				& input[type="text"] {
					background: var(--ef-color-signal-black-8) !important;
				}
			}
		}
	}

	/*&.questiontype-2 {
		background: hsl(from var(--test-color) h s calc(l + 15));
	}

	&.questiontype-3 {
		background: hsl(from var(--test-color) h s calc(l + 20));
	}

	&.questiontype-4 {
		background: hsl(from var(--test-color) h s calc(l + 25));
	}

	&.questiontype-5 {
		background: hsl(from var(--test-color) h s calc(l + 30));
	}

	&.questiontype-6 {
		background: hsl(from var(--test-color) h s calc(l + 35));
	}

	&.questiontype-7 {
		background: hsl(from var(--test-color) h s calc(l + 40));
	}

	&.questiontype-8 {
		background: hsl(from var(--test-color) h s calc(l + 45));
	}

	&.questiontype-9 {
		background: hsl(from var(--test-color) h s calc(l + 50));
	}
	
	&.questiontype-10 {
		background: hsl(from var(--test-color) h s calc(l + 50));
	}

	&.questiontype-11 {
		background: hsl(from var(--test-color) h s calc(l + 50));
	}

	&.questiontype-12 {
		background: hsl(from var(--test-color) h s calc(l + 50));
	}
	*/
}

.survey-question-container,
.question-preview-body {
	& label {
		&[class*="as-checkbox"] {
			& input {
				&[type="checkbox"] {
					& ~ .check-mark {
						border-color: rgb(48, 53, 64);
					}
				}
			}
		}

		& input {		
			&[type="radio"] {
				& ~ .check-mark {
					border-color: rgb(48, 53, 64);
					background: transparent;
				}
			}
		}
	}
}

.question-preview-body {
	& table {
		&:not(.table-nse) {
			& input {
				&:not(.form-underline) {
					&[type="text"] {
						background: white;
						border-color: #000;
						border-radius: 3px;

						&:hover {
							outline: none !important;
						}

						&:focus {
							border-color: transparent;
							outline: 2px solid var(--ef-color-indiablue) !important;
						}
					}
				}
			}
		}
	}
}

.survey-question-container,
.survey-container-preview {
	& textarea {
		&:not(.form-underline) {
			border: 1px solid rgba(0,0,0,1);
			border-radius: 3px;

			&:hover {
				outline: none !important;
			}

			&:focus {
				border-color: transparent;
				outline: 2px solid var(--ef-color-indiablue) !important;
				/*border: 1px solid rgba(0,0,0,1) !important;	*/
			}
		}

		&.form-underline {
			&:hover,
			&:focus {
				outline: none !important;
			}
		}
	}
}

.survey-welcome-page,
.survey-content-footer {
	& .survey-question-container {
		margin-bottom: 60px;
	}
}

.survey-question-preview {
	& .table-answer1,
	& .table-answer2 {
		& td {
			padding-block: 4px;
		}
	}
}

.ranking-wrapper {
	& .ranking-drop-zone,
	& .ranking-drag-zone {
		background: rgba(0, 0, 0, 0.1);
		border-radius: 4px;
	}

	& .ranking-drop-zone {
	}

	& .ranking-drag-zone {
		padding: 20px;		
		display: flex;
		flex-direction: column;
		gap: 4px;

		& .question-ranking {
			background: rgba(0, 0, 0, 0.1);
			border-radius: 4px;
			padding: 10px 15px;
			color: rgb(48, 53, 64);

			& .question-ranking-move {
				& .bi {
					font-size: 25px;
				}
			}

			& .question-ranking-answer {
				flex: 1 1 auto;
			}
		}
	}
}

.matrix-white-boxes-block {
	display: grid;
	grid-template-columns: 1fr 1.5fr 1fr;
	gap: 4px;
}

.validation_fields {
	display: flex;
	flex-direction: column;
	/*gap: 16px;*/

	& .validation_field {
		display: flex;
		flex-direction: column;
		gap: 16px;
		padding: 16px 0;

		& + .validation_field {
			border-top: 1px solid rgba(var(--ef-color-signal-black-60-rgb), 0.25);
		}
	}

	& .validation_field_title {
		font-family: 'Lato Bold';

		&:empty {
			display: none;
		}
	}

	& .validation_field_type,
	& .validation_field_settings {
		display: flex;
		align-items: center;
		gap: 16px;

		&:empty {
			display: none;
		}
	}
}

.checkbox-content,
.radio-content {
	grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));

	& .btn-na {
		min-width: auto;
	}
}

.question-preview-body {
	margin-top: 23px;
}

.survey-question-container-anchor {
	transform: translateY(-200px);
	display: block;
}

body .cke_chrome {
	border: 1px solid #999;
}

.add-question-nav {
	& li {
		& a {
			&.active {
				--btn-bg: var(--ef-color-signal-black-8);
				border-color: var(--ef-color-signal-black-8);
			}
		}
	}
}

.survey-editor-preview-nav-item-placeholder {
  min-height: 34px;
  border: 2px dashed var(--ef-color-signal-black-16);
  //background: rgba(var(--ef-color-indiablue-rgb), 0.16);
  background: rgba(var(--ef-color-yellow-rgb), 0.16);
  border-radius: 4px;
}

.sticky-section {
	--_sticky-default-pos: var(--custom-sticky-default-pos, 0px);
	
	z-index: 4;
	position: sticky;
	top: calc(var(--global-header-height, 0px) + var(--_sticky-default-pos));
	width: max-content;
    left: var(--sticky-left-correction, 50%);
	transform: translateX(-50%);
}

.ace-editor {
    position: relative;
    width: 100%;
    min-height: 340px;
	font-size: 12px;
}

.floating-banner {
	border: 3px solid #E6E6E6;
	position: fixed;
	right: 16px;
	left: 16px;
	bottom: 16px;
	padding: 32px;
	border-radius: 8px;
	z-index: 6;
	max-width: 100%;

	& .close-btn {
		position: absolute;
		top: 8px;
		right: 8px;
	}

	@media (min-width: 992px) {
		max-width: 490px;
		left: auto;		
		right: 32px;
		bottom: 32px;
	}
}

.demo-banner {
	background: red;

	@media (max-width: 576px) {
		& img {
			width: 35%;
		}
	}
}

#chat-agent {
	display: grid;
	grid-template-rows: max-content 1fr max-content;
}

.agent-chat-message {
	width: max-content;
	max-width: 75%;
	border-radius: 8px;
	background: var(--ef-color-signal-black-8);
	padding: 8px;

	& .typing-indicator {
		height: 19px; 
		
		& .typing-dot {
			width: 8px;
			height: 8px;
			background-color: #6c757d;
			border-radius: 50%;
			animation: typing-bounce 1.4s infinite ease-in-out both;

			&:nth-child(1) { animation-delay: -0.32s; }
			&:nth-child(2) { animation-delay: -0.16s; }
			&:nth-child(3) { animation-delay: 0s; }
		}
	}	
}

@keyframes typing-bounce {
	0%, 80%, 100% { transform: scale(0.6); opacity: 0.5; }
	40% { transform: scale(1); opacity: 1; }
}

/* 	
	#####
		Slideout Component 
	#####
*/
.slide-out {
	width: 100%;
	max-width: 500px;
	z-index: 15;
	position: fixed;
	top: 0;
	bottom: 0;
	height: 100%;
	background: white;
	transition: transform ease-in-out 250ms;

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

	&.slide-in-from-right {
		right: 0;
		transform: translateX(100%);

		&.open {
			transform: translateX(0);
		}
	}

	&.slide-in-from-left {
		left: 0;
		transform: translateX(-100%);

		&.open {
			transform: translateX(0);
		}
	}

	& .slide-out-content {
		padding: 32px;

		@media (max-width: 768px) {
			padding: 20px;
		}
	}
}

/* 	
	#####
		Mailserver Settings
	#####
*/
.ranking-btn-on{ background-color:#0299a2; }
#oauth_fields .form-group { margin-top: 10px; }
.auth-method-toggle { margin-bottom: 15px; }
.provider-specific { display: none; }
.oauth-option { margin-bottom: 10px; padding: 10px; border-left: 4px solid #ddd; }
.oauth-option.google { border-left-color: #4285f4; }
.oauth-option.azure { border-left-color: #0078d4; }
.oauth-option.azuregraph { border-left-color: #00a4ef; }
.oauth-option.active { background-color: #f8f9fa; }

.page-layout-type {
	min-height: 600px;

	@media (min-width: 993px) {
		max-height: 900px;
	}

	& .left-col {
		border-top-left-radius: 4px;
		border-bottom-left-radius: 4px;
		display: flex;
		align-items: center;
		justify-content: center;
		overflow: hidden;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 30px;

		@media (min-width: 993px) {
			max-height: 900px;
		}

		&:has(img:not(.img-cover)) {
			padding: 30px;

			& img {
				height: 100%;
			}
		}

		&:has(img.img-cover) {
			min-height: 350px;

			@media (max-width: 992px) {
				max-height: 350px;
			}
		}

		& img {
			object-fit: contain;
			object-position: center;
			max-width: 100%;

			&.img-cover {
				position: absolute;
				inset: 0;
				object-fit: cover;
				height: 100%;
				width: 100%;
			}
		}
	}

	& .right-col {
		@media (min-width: 993px) {
			max-height: 900px;
			padding: 40px;
		}

		border-top-right-radius: 4px;
		border-bottom-right-radius: 4px;
		overflow-y: auto;
	}

	&.page-layout-inverted {
		& .left-col {
			order: 1;
			border-top-left-radius: 0;
			border-bottom-left-radius: 0;
			border-top-right-radius: 4px;
			border-bottom-right-radius: 4px;
		}

		& .right-col {
			order: 0;
			border-top-left-radius: 4px;
			border-bottom-left-radius: 4px;
			border-top-right-radius: 0;
			border-bottom-right-radius: 0;
		}

		& .left-col,
		& .right-col {
			@media (max-width: 992px) {
				order: unset;
			}
		}
	}
}

.survey-end-of-page {
	position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
}

.survey-welcome-page,
.survey-end-page {
	& .survey-end-of-page {
		bottom: 60px;
	}
}

.integration-item,
.webhook-item {
	display: grid;
	grid-template-columns: max-content 1fr max-content;
	grid-template-areas: "toggle content tools";
	align-items: start;
	gap: 16px;

	& .integration-toggle,
	& .webhook-toggle {
		grid-area: toggle;
		align-self: center;
	} 

	& .integration-content,
	& .webhook-content {
		grid-area: content;

		& > div {
			& > div {
				min-width: 25%;
			}
		}
	} 

	& .integration-tools,
	& .webhook-tools {
		grid-area: tools;
	} 

	@media (max-width: 768px) {
		grid-template-columns: 1fr max-content;
		grid-template-areas: 
			"toggle tools"
			"content content";
	}
}

.translation-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 8px;
	align-items: center;

	@media (min-width: 768px) {
		gap: 32px;
		grid-template-columns: 40% 1fr;
	}
}

@media (max-width: 768px) {
	.mobile-absolute {
		position: absolute;
		right: 16px;
	}
}