@charset "utf-8";

/* Site colours */
:root {
	--feature: #164374;
	--feature2: #3978d6;
    --feature3: #f79e36;
	
	--text: #222;
	--field-text: #000;
	--links: #164374;
    --links--hover: #222;
	--bright-blue: #0033a5;
	
	--error: #dd0000;	
	--green: #5a9535;
	--red: #dd0000;
	
	--borders-light: #ddd;
    --borders-banner: #f2f2f2;
	
	--borders-input: rgba(0,0,0,0.15);	
	
    --button-bg: #3978d6;
    --button-text: #fff;
    --button-text-size: 14px;
	
	--nav-desktop-bg: #164374;
	--nav-desktop-text: #fff;
	--nav-mobile-bg: #164374;
	--nav-mobile-text: #fff;
	
    --footer-bg: #164374; /*#1a3c6e*/
	--footer-text: #fff;
	--table-footer-bg: #eee;	
	
	--sb-question-bg: #f2f2f2;
	--sb-question-seperators: #ddd;
	--sb-section-seperators: #d7e4f7;
	--sb-question-borders: #eee;
	
	--accent_blue: #3978d6;
	--accent_navy:  #1a3c6e;
	--accent_yellow:  #f4942b;
	--accent_green: #5a9535;
	--accent_orange: #fb370e;
	--accent_purple: #a800d5;
	--accent_purple: #701887;
}

/* Site wide */

html {font-family: 'Poppins', sans-serif; font-size: 14px; color: var(--text); box-sizing: border-box; -webkit-tap-highlight-color: rgba(0,0,0,0); min-height: 100%;}
@media screen and (max-width: 800px) { 
	html {font-size: 15px; }
}
body {background: #eee;}
button, textarea, select, input[type='text'], input[type='number'], input[type='password'], .dummy-input {font-family: inherit; font-size: 1em; font-weight: 400; color: var(--field-text); border-radius: 0;}
textarea, select, input[type='text'], input[type='number'], input[type='password'], .dummy-input {border: 1px solid var(--borders-input); outline: none; box-sizing: border-box; background: #fff; padding: 8px 15px; }
textarea {display: block; margin: 0;  }
.dummy-input {background: #f3f3f3; color: #888;}
select:focus, input[type='text']:focus, input[type='number']:focus, input[type='password']:focus, textarea:focus {outline: 1px solid var(--feature2); border-color: var(--feature2); }
select {-webkit-appearance: none; -moz-appearance: none; color: inherit; }
button {cursor:pointer;}
hr {border: none; margin: 30px 0; padding: 0; height: 1px; background: #ddd;}
#modal hr {margin: 20px 0;}
::-webkit-input-placeholder {font-family: inherit; font-size: 1em; color: inherit; }
:-moz-placeholder {font-family: inherit; font-size: 1em; color: inherit; }
:-ms-input-placeholder {font-family: inherit; font-size: 1em; color: inherit; }
:-moz-placeholder {font-family: inherit; font-size: 1em; color: inherit; }
.admin-only {margin: 20px 0 10px 0; padding: 10px; border: 1px solid #bf0000; background: #fcc9c9; color: rba(0,0,0,0.8); }



/* Headings */
h1, h2, h3, h4, h5 {line-height: 1; }
h1 {display: block; font-size: 1.5em; margin: 2rem 0 1rem 0; font-weight: 600;}
h2 {display: block; font-size: 1.35em; margin: 2rem 0 1rem 0; font-weight: 500;}
h3 {display: block; font-size: 1.2em; margin: 20px 0 1rem 0; font-weight: 500;}
h4, h5, h6 {display: block; font-size: 1.1em; margin: 20px 0 1rem 0; font-weight: 500;}
b, strong {font-weight: 600;}
tablexx {border: 1px solid #ccc; border-collapse: collapse; width: 100%; }
tablexx td {border-top: 1px solid var(--borders-light); padding: 5px}
tablexx tr td:first-child {padding-left: 10px;} 
tablexx tr td:last-child {padding-right: 10px;} 
tablexx thead td {font-weight: 600;}
tablexx .buttons {display: flex; align-items: center; justify-content: flex-end; gap: 3px; }
tablexx .buttons .button {fon-size: 0.75rem; padding: 2px 6px; }
#downloadIframe {position: absolute; bottom: 0; right: 0; border: none; margin: 0; width: 1px; height: 1px; }

.legal_table {border: 1px solid var(--feature); border-collapse: collapse; margin: 30px 0; font-size: 0.9em}
.legal_table thead td {font-weight: 600;}
.legal_table td {border: 1px solid var(--feature); padding: 5px 10px; vertical-align: top}
ol.list_ab { counter-reset: list; margin: 0;}
ol.list_ab > li {list-style: none; counter-increment: list;}
ol.list_ab > li::marker {content: "(" counter(list, lower-alpha) ")\a0";}

.info-button {font-size: 16px; margin: 0 12px; font-weight: 400;}
.button-container-center .info-button {margin: 0;}
.large-blue-title {color: var(--feature); font-size: 1.2em; font-weight: 600; margin: 1em 0;}

.button {position: relative; display: inline-block; box-sizing: border-box; font-weight: 600; font-size: 0.9em; background-color: var(--button-bg); color: var(--button-text); padding: 6px 20px; min-width: 120px; border: none; text-align: center; transition: all ease-in 0.1s; text-decoration: none; cursor: pointer; }
.button.button-large {font-size: 1.2em; padding: 12px 30px;}
.button.inactive, .footertainer a.inactive {color:#eee; background: #ccc; pointer-events: none;}
.button:hover {background: color-mix(in srgb, var(--button-bg) 70%, black); color: #fff;}
.button.dimmed {color:#fff; background: #bbb; }
.button.dimmed:hover {color:#fff; background: #bbb; }

.button-add {display: flex; align-items: center; gap: 8px; color: #f00; font-weight: 600; color: var(--feature2);}
.button-add i {position: relative; display: block; padding: 15px 0; width: 30px; height: 0; line-height: 0; border-radius: 50%; text-align: center; background: var(--button-bg); color: var(--button-text); transition: 0.3s;}
.button-add i:before {content:""; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; margin-top: -1px; margin-left: -7px; background: var(--button-text);}
.button-add i:after {content:""; position: absolute; left: 50%; top: 50%; width: 2px; height: 14px; margin-top: -7px; margin-left: -1px; background: var(--button-text);}

.button-container {display: flex;margin: 20px 0; align-items: center; justify-content: space-between; gap: 20px; }
.button-container-left {display: flex; margin: 30px 0; align-items: center; justify-content: flex-start; gap: 20px;  }
.button-container-center {display: flex; margin: 20px 0; align-items: center; justify-content: center; gap: 20px;  }
.button-container-fullwidth {display: flex; flex-direction: column; margin: 20px 0; align-content: center; justify-content: center; gap: 20px;  }
.button-container-summary {display: flex; margin: 30px 0; align-items: center; justify-content: flex-start; gap: 20px;  }
@media screen and (max-width: 900px) {
	.button-container-summary {flex-direction: column; align-items: flex-start; gap: 10px; }
	
}
table .button-container {margin: 0;}

body {position:relative; display: flex; flex-direction: column; margin: 0; padding: 0; min-height: 100vh; }
body > header {flex-grow: 0; flex-shrink: 0; }
body > .main {flex-grow: 1; flex-shrink: 0; position: relative; }
.main {background: #fff; }
body > footer {flex-grow: 0; flex-shrink: 0;}
body.rtl {text-align: right!important} 

.alignL {text-align: left;}
.alignC {text-align: center;}
.alignR {text-align: right;}
.red {color: var(--red);}
.green {color: var(--green);}
.font-remove {display: none;}

.waiting {position: relative; }
.waiting:before {content: ""; position: absolute; top: 50%; left: 50%; width: 26px; height: 26px; margin-top: -13px; margin-left: -13px; background: #fff; border-radius: 50%;}
.waiting:after {content: ""; position: absolute; box-sizing: border-box; top: 50%; left: 50%; width: 20px; height: 20px; margin-top: -10px; margin-left: -10px; background: #fff; border: 4px solid var(--feature); border-top-color: transparent; border-radius: 50%; animation: spin 1.5s infinite linear}

a {text-decoration: none; color: var(--feature2)}
a:hover {text-decoration: none; color: inherit; }
p {display: block; margin-top: 1em; margin-bottom: 1em;}
small {font-size: 0.8em; line-height: 1.4}
select option:disabled {color: #b8b8b8;}

.hidden {display:none;}
.any--sticky {position: sticky;  top: 0; overflow-y: auto; }
.error-message {color: var(--error);}
.discount {color:var(--discount); }

/* Universal padding // UNIP */
.unip:before {content: ""; position: relative; display:block; margin-bottom: 30px; padding-top: 1px; }
.unip:after {content: ""; position: relative; display:block; margin-top: 30px; padding-bottom: 1px; }
.unip--l:before {margin-bottom: 60px;}
.unip--l:after {margin-top: 60px;}
.unip--s:before {margin-bottom: 20px;}
.unip--s:after {margin-top: 20px;}

/* Body Containers + Columns */
.container {position:relative; margin-left: auto; margin-right: auto; max-width: 1300px; padding-left: 30px; padding-right: 30px; box-sizing: border-box; }
body.account .container {max-width: 1060px;}
.container .container {padding-left: 0; padding-right: 0;}
.content-image {margin: 30px auto; width: 100%; max-width: 1300px; }
.content-image img {width: 100%; }
.content-text {margin: 30px auto; max-width: 1000px; padding: 0 30px; box-sizing: border-box;}
.container .content-text {padding: 0; }
.content-button {margin: 30px auto; max-width: 1300px; padding: 0 30px; box-sizing: border-box;}
.content-button a {display: block; margin: 0 auto; padding: 10px; color: var(--button-text); background: var(--button-bg); font-weight: 600; font-size: 1.1; border-radius: 20px; width: 100%; max-width: 300px; text-align: center; }
.cookies-table {border:1px solid #ccc; border-collapse: collapse; width: 100%; ma-wiidth: 1300px; margin: 20px auto;}
.cookies-table thead td {font-weight: 600;}
.cookies-table td {padding: 5px 10px; border: 1px solid #ccc; text-align: left;}
@media screen and (max-width: 900px) {
	.container {padding-left: 20px; padding-right: 20px; } 
	.content-text {padding-left: 20px; padding-right: 20px; } 
}
@media screen and (max-width: 600px) {
	.container {padding-left: 15px; padding-right: 15px; } 
	.content-text {padding-left: 15px; padding-right: 15px; } 
}

.detail-table {border: none; border-collapse: collapse; width: 100%; margin: 20px 0;}
.detail-table thead tr td {font-size: 0.8em; opacity: 0.6;}
.detail-table tbody tr td {border-top: 1px solid var(--table-borders); border-bottom: 1px solid var(--table-borders); }
.detail-table tfoot tr td {border-top: 1px solid var(--table-borders); border-bottom: 1px solid var(--table-borders); background: var(--table-footer-bg); }
.detail-table tr td {padding: 5px}
.detail-table td:first-child {padding-left: 0;}
.detail-table td:last-child {padding-right: 0;}
.detail-table tfoot td:first-child {padding-left: 10px;}
.detail-table tfoot td:last-child {padding-right: 10px;}
.detail-table .product {position: relative; display:flex; flex-direction: column; padding-left: 110px; min-height: 90px; gap: 5px; }
.detail-table .product .image {position: absolute; top: 0; left: 0; width: 100px; height: 70px; border: 1px solid var(--borders-light); border-radius: 4px; align-content: center; justify-content: center; background: #fff; overflow: hidden;}
.detail-table .product .image img {poistion: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}
.detail-table .product .name {font-weight: 600;}
.detail-table .product .choices {font-size: 0.9em;}
@media only screen and (max-width: 600px) {
	.detail-table .product {padding-left: 0; min-height: 0;}
	.detail-table .product .image {display:none; position: relative; width: auto; height: 60px; }
}

.detail-table tr.unavailable td {background: #f7bfbf;}
.detail-table tr.unavailable td:first-child {padding-left: 10px;}
.detail-table tr.unavailable td:last-child {padding-right: 10px;}
.detail-table tr.unavailable td .discount {display: none;}
.detail-table tr.unavailable td .unavailable-message {margin: 5px 0; color: var(--error); font-weight: 600;}

/* Tax prices */
.prices-extax {display:none}
.extax div.prices-extax {display:block}
.extax span.prices-extax {display:inline-block}
.extax tr.prices-extax {display:table-row}
.extax td.prices-extax {display:table-cell}
.extax .prices-inctax {display:none}


/* Headers */
header {position: relative; width: 100%; background-color: #eee;}
.header .header__inner {position: relative; display: flex; align-items: center; justify-content: space-between; min-height: 75px; padding: 0 30px; }

.header .header__logo {position:relative; display:block; height: 25px; }
.header .header__logo img {width: auto; height: 100%; object-fit: contain; max-width: 90px;}
.header .header__inner > div {display: flex; align-items: center; }
.header .avatar-container {position: relative; display: flex; align-items: center; gap: 8px; }
.header .avatar-container a {color: var(--feature); }

.header .avatar-container .avatar {width: 40px; height: 40px;}
.header .avatar-container .messageCount {position: absolute; top: -4px; right: -4px; background: var(--feature3); color: #fff; width: 18px; height: 0; line-height: 0; padding: 9px 0; border-radius: 50%; font-size: 11px; font-weight: 400; text-align: center; }
.header .avatar-container .messageCount.zero {background: #aaa; }
.header .avatar-container .icon {background: none; color: var(--feature); font-size: 20px; display: block; padding: 0 10px}
.header a.nav-button {display: block; padding: 15px 12px; margin-right: -15px;  }
.header a.nav-button i {display:block; position: relative; width: 22px; height: 10px; border-top: 2px solid var(--feature); border-bottom: 2px solid  var(--feature);}
.header a.nav-button i:after {content: ""; position: absolute;  display:block; top: 4px; left: 0; width: 100%; height: 2px; background: var(--feature); }
.header.header_survey .header__inner{min-height: 35px; }
.header.header_survey .header__logo {position:relative; display:block; height: 16px; }
.header.header_survey .avatar {width: 30px; height: 30px;}
.header.header_survey a.nav-button {padding: 10px 12px; }

@media screen and (min-width: 800px) {
.header a.nav-button {display: none; padding: 15px 12px; margin-right: -15px;  }
}

@media only screen and (max-width: 800px) {	
    .header a.nav-button {display: block; }
}

@media only screen and (max-width: 900px) {	
	.header .header__inner {padding: 0 20px; }
    
}

@media only screen and (max-width: 600px) {	
	.header .header__inner {flex-wrap: wrap; }
	.header .header__logo {height: 20px; }
	.header .branding {pfont-size: 12px; margin-left: 15px; padding-left: 15px; }
	.header .branding:before {width: 2px; }
}




nav {position: fixed; display: block; top: 0; left: 0; width: 100%; height: 100%; z-index: 200; background: none; pointer-events: none; transition: 0.4s; overflow: hidden; }
nav .nav-menu {position: absolute; display: block; width: 400px; max-width: calc(100% - 30px); padding: 0; height: 100%; right: -400px; background: var(--nav-mobile-bg); color: var(--nav-mobile-text); transition: 0.4s; cursor: auto; }
nav .nav-menu .nav-menu__links {display: block; padding: 40px 0 20px 0; height: 100%; overflow: auto; box-sizing: border-box;  }
nav .nav-menu .nav-button {position: absolute; display: block; top: 0; right: 0; padding: 26px 30px 10px 10px; cursor: pointer }
nav .nav-menu .nav-button i {position: relative; display: block; width: 22px; height: 22px;}
nav .nav-menu .nav-button i:before {content: ""; position: absolute; top: 50%; margin-top: -1px; left: 50%; margin-left: -10px; width: 20px; height: 2px; background-color: #fff; transform: rotate(45deg);}
nav .nav-menu .nav-button i:after {content: ""; position: absolute; top: 50%; margin-top: -1px; left: 50%; margin-left: -10px; width: 20px; height: 2px; background-color: #fff; transform: rotate(-45deg);}
nav .nav-menu .nav-menu__links a {display: block; padding: 8px 20px; color: inherit; font-size: 18px;  } 
nav .nav-menu .nav-menu__links a:hover{border-bottom: none;  }
nav .nav-menu .nav-menu__links a:nth-child(1n+12) {display:block;}
nav .nav-menu .nav-menu__links a.nav-item-home {display:block;}
nav.active {display: block; position: fixed; top: 0; left: 0; width: 100%; height: 100%; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); pointer-events: all; background: rgba(0,0,0,0.4); cursor: pointer; }
nav.active .nav-menu{right: 0; box-shadow: 0 0 10px rgba(0,0,0,0.5); }

@media only screen and (max-width: 600px) {
	nav .nav-menu .nav-button {padding: 21px 15px 10px 10px;}
}





.sub-nav {}
.sub-nav .sub-nav__top {display:flex; align-items: center; justify-content: flex-start; gap: 10px; font-weight: 600; font-size: 1rem; margin: 20px 0 10px 0;}
.sub-nav .sub-nav__top .avatar {flex-shrink: 0; display:block; width: 80px; height: 80px;}
.sub-nav .sub-nav__top .name {color: var(--feature); font-size: 1.5em; font-weight: 600; line-height: 1.05; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.sub-nav .sub-nav__title {font-weight: 600; margin: 20px 0 10px 0;}
.sub-nav > a {display: none; }
.sub-nav ul {margin: 0; padding: 0; list-style: none; }
.sub-nav ul li {border-top: 1px solid var(--borders-light); margin: 0; padding: 0; }
.sub-nav ul li:first-child {border-top: none;}
.sub-nav ul li a {position: relative; display: block; padding: 10px 0; }


.sub-nav ul li div {display: block; padding: 10px 0; }
.sub-nav .button-container {display:block;}
.sub-nav .button-container a {display:block;}
@media screen and (max-width: 900px) { 
	.sub-nav > a {display:block; position: relative; padding: 10px 40px 10px 20px; color: var(--button-text); background: var(--button-bg); border-radius: 4px; }
	.sub-nav > a i {position: absolute; top: 50%; right: 20px; line-height: 0; }
	.sub-nav > div {position: relative; height: 0; overflow: hidden; }
	.sub-nav > div > div {position: absolute; left: 0; bottom: 0; width: 100%; }
	.sub-nav.active > a {border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
	.sub-nav.active > a i {transform: rotate(180deg);}
	.sub-nav.active > div {height: auto; }
	.sub-nav.active > div > div {position: relative; }
	.sub-nav ul {border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; background: #eee;}
	.sub-nav ul li a {padding: 10px 15px; }
	.sub-nav ul li div {padding: 10px 15px; }
}
@media screen and (max-width: 600px) { 
	.sub-nav > a {padding: 10px 35px 10px 15px; }
	.sub-nav > a i {right: 15px; }
}
*/

.breadcrumbs {position: relative; display: block; background-color: #fff; color: #333; border-bottom: 1px solid #ddd; padding: 0 30px; font-size: 0.8em; overflow: hidden  }
.breadcrumbs .breadcrumb {display:none; }
.breadcrumbs .breadcrumb.active {display: flex; align-items: center; justify-content: flex-start; position: relative; margin: 0 -10px; white-space: nowrap; oxxverflow: hidden; text-overflow: ellipsis;}
.breadcrumbs .breadcrumb a {display: block; color: inherit; padding: 4px 10px; }
.breadcrumbs .breadcrumb i {display: block; position: relative; padding: 4px 0; width: 10px; pointer-events: none; }
.breadcrumbs .breadcrumb i:after {content: ""; position: absolute; box-sizing: border-box; top: 50%; left: 50%; height: 25px; width: 25px; border-bottom: 1px solid #ccc; border-left: 1px solid #ccc; transform: scale(60%, 100%) translate(-50%, -50%) rotate(45deg); }

.post-group {position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 15px; overflow: hidden; }
.post-group .post-group__image {position: relative; display: block; height: 0; padding-bottom: 70%; margin-bottom: 15px; background: #eee; overflow: hidden; border-radius: 10px;}
.post-group .post-group__image img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: all ease-in-out 0.4s;}
.post-group .post-group__image i {position: absolute; left: 0; top: 50%; width: 100%; line-height: 0; text-align: center; font-size: 50px; color: #ccc; }
.post-group .post-group__tag { position: absolute; display:flex; flex-direction: column; justify-content: flex-end; box-sizing: border-box; top: -40px; right: -40px; width: 80px; height: 80px; text-align: center; transform:rotate(45deg); padding: 2px; background: var(--feature2); color: #fff; }
.post-group:hover .post-group__image img{transform: scale(1.05);}
.post-group .post-group__text {display: block; }
.post-group .post-group__text p {margin: 0;}
.post-group .post-group__text .post-group__title {display: block; font-weight: 600; font-size: 1.15em; margin-bottom: 4px; }

.file-group {position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 15px; color: inherit; text-align: left; border: 1px solid var(--borders-light); border-radius: 10px; overflow: hidden; }
.file-group .file-group__image { position: relative; display: block; height: 0; padding-bottom: 70%; margin-bottom: 15px; background: #eee; }
.file-group .file-group__image img.image {position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; transition: all ease-in-out 0.4s}
.file-group .file-group__image img.icon {position: absolute; left: 30%; top: 30%; width: 40%; height: 40%; object-fit: contain; transition: all ease-in-out 0.4s}
.file-group .file-group__image i {position: absolute; left: 0; top: 50%; width: 100%; line-height: 0; text-align: center; font-size: 50px; color: #ccc; }
.file-group:hover .file-group__image img {transform: scale(1.05);}
.file-group .file-group__text {padding: 0 15px; }
.file-group .file-group__text .product-group__title {font-size: 1.15em; font-weight: 600; }
.file-group .file-group__text p {margin: 0;}
.file-group .file-group__text div {display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;}
.file-group .file-group__price {font-size: 1.4em; font-weight: 600; padding: 0 15px; }
.file-group .cta {padding: 15px; }

.sub-page-nav {display:flex; gap: 60px; text-align: left; }
.sub-page-nav-no-nav {gap: 0px;}
.sub-page-nav-no-nav > .sub-page-nav__right > .content-text {max-width: 2000px;}
.sub-page-nav .sub-page-nav__left {width: 250px; flex-shrink: 0; flex-grow: 0; position: sticky; align-self: flex-start; top: 0;}
.sub-page-nav .sub-page-nav__right {flex-shrink: 1; flex-grow: 1; position: sticky; align-self: flex-start; top: 0; }
@media screen and (max-width: 1300px) {
	.sub-page-nav {gap: 30px;}
}
@media screen and (max-width: 900px) {
	.sub-page-nav {display:block; padding: 0; }
	.sub-page-nav .sub-page-nav__left {width: 100%; z-index: 1; padding: 30px; box-sizing: border-box; background: #fff; border-bottom: 1px solid var(--borders-light); }
	.sub-page-nav .sub-page-nav__left.xunip:before {display:none;}
	.sub-page-nav .sub-page-nav__left.xunip:after {display:none;}
	.sub-page-nav .sub-page-nav__left:before {content: ""; position: absolute; top: 100%; left: 0; height: 10px; width: 100%; background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0) 100%); pointer-events: none; }
	.sub-page-nav .sub-page-nav__right {width: 100%; position: relative; padding: 0 30px; box-sizing: border-box; }	
}
@media screen and (max-width: 600px) {
	.sub-page-nav {padding: 0; }
	.sub-page-nav .sub-page-nav__left {padding: 15px}
	.sub-page-nav .sub-page-nav__right {padding: 0 15px;}	
}

.sub-page-nr {display:flex; gap: 30px; text-align: left;}
.sub-page-nr .sub-page-nr__left {flex: 75%; }
.sub-page-nr .sub-page-nr__right {flex: 25%; position: sticky; align-self: flex-start; top: 0; }
@media screen and (max-width: 900px) {
	.sub-page-nr {display:block; padding: 0; }
	.sub-page-nr .sub-page-nr__left {width: 100%; padding: 0 30px; box-sizing: border-box;}
	.sub-page-nr .sub-page-nr__right {width: 100%; position: relative; padding: 0 30px; box-sizing: border-box;}	
}
@media screen and (max-width: 600px) {
	.sub-page-nr .sub-page-nr__left {padding: 15px}
	.sub-page-nr .sub-page-nr__right {padding: 0 15px;}
}

.sub-page-6535 {display:flex; gap: 30px; text-align: left;}
.sub-page-6535 .sub-page-6535__left {flex: 65%; }
.sub-page-6535 .sub-page-6535__right {flex: 35%; position: sticky; align-self: flex-start; top: 0; }




@media screen and (max-width: 900px) {
	.sub-page-6535 {display:block; padding: 0; }
	.sub-page-6535 .sub-page-6535__left {width: 100%; padding: 0 30px; box-sizing: border-box;}
	.sub-page-6535 .sub-page-6535__right {width: 100%; position: relative; padding: 0 30px; box-sizing: border-box;}	
}
@media screen and (max-width: 600px) {
	.sub-page-6535 .sub-page-6535__left {padding: 15px}
	.sub-page-6535 .sub-page-6535__right {padding: 0 15px;}
}








/* Post page */
.post__images {}
.post__images .image {position: relative;  overflow: hidden; width: 100%; height: 0; padding-bottom: 50%; margin: 30px 0; cursor: pointer; }
.post__images .image img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 10px}
.post__images .image .supersize-icon {position: absolute; top: 10px; left: 10px; width: 50px; height: 50px; font-size: 30px; color: rgba(0,0,0,0.75); z-index: 1; }
.post__images .thumbs {display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr; gap: 5px; }
.post__images .thumbs > div {position: relative; display: block; box-sizing: border-box; border: 1px solid #eee; cursor: pointer; height: 0; padding-bottom: 70%; border-radius: 4px; overflow: hidden; transition: border 0.1s;  }
.post__images .thumbs > div:hover {border: 1px solid #var(--feature);;}
.post__images .thumbs > div img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}
.post__images .thumbs > div.active {border: 1px solid #999;}

/* Search page */
.search {position: relative; min-height: 300px; text-align: left;}
.search-page {position: relative; flex-grow: 1; width:300px;}
.search-page > input[type=text] {width: 100%; border-style: none; padding: 14px; background-color: #f2f2f2}
.search-page > input[type=text]::placeholder{ color:rgba(0,0,0,0.3); }
.search-page > input[type=text]:focus{background-color: transparent; color:#000;}
.search-page > button {position: absolute; top: 50%; right: 0; margin-top: -25px;  width: 50px; height: 50px; border: none; outline: none; font-size: 20px; font-weight: bold; cursor: pointer; color:var(--feature); background-color:transparent; pointer-events: painted;  }
.search-page > button:focus ~ .input-search { border-radius: 10px; background-color: transparent;}	

.post-group-container {position: relative; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 30px;  margin: 30px auto; }
.file-group-container {position: relative; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; gap: 10px; margin: 30px auto;}
.sub-page-nav__right .post-group-container {grid-template-columns: 1fr 1fr; }
.sub-page-nav__right .file-group-container {grid-template-columns: 1fr 1fr 1fr 1fr 1fr; }
.sub-page-nr__left .post-group-container {grid-template-columns: 1fr 1fr; }
.sub-page-nr__left .file-group-container {grid-template-columns: 1fr 1fr 1fr 1fr 1fr; }
.filter-container__right .post-group-container {grid-template-columns: 1fr 1fr; }

@media screen and (max-width: 1000px) { 
	.post-group-container {gap: 15px; }
}
@media screen and (max-width: 800px) { 
	.file-group-container { grid-template-columns: 1fr 1fr 1fr; }
}
@media screen and (max-width: 750px) { 
	.sub-page-nav__right .file-group-container {grid-template-columns: 1fr 1fr 1fr; }
	.sub-page-nr__left .file-group-container {grid-template-columns: 1fr 1fr 1fr; }
}
@media screen and (max-width: 600px) { 
	.post-group-container { grid-template-columns: 1fr 1fr; }
	.file-group-container { grid-template-columns: 1fr 1fr; }
	.sub-page-nav__right .file-group-container {grid-template-columns: 1fr 1fr; }
	.sub-page-nav__right .post-group-container {grid-template-columns: 1fr; }
	.sub-page-nr__left .file-group-container {grid-template-columns: 1fr 1fr; }
	.sub-page-nr__left .post-group-container {grid-template-columns: 1fr; }
	.filter-container__right .post-group-container {grid-template-columns: 1fr; }
}
@media screen and (max-width: 500px) {
	.post-group-container { grid-template-columns: 1fr; }
}

.carousel {position: relative; display:block; margin: 50px 0;}
.main .carousel:first-child {margin-top: 0;}
.carousel .carousel__container {position: relative; height: 700px; height: calc(100vh - 240px); min-height: 600px; background: rgba(0,0,0,0.5); overflow: hidden; color: #fff; }
.carousel .carousel__slider {position: absolute; left: 0; top: 0; height: 100%; width: 2000%; display: flex; justify-content: flex-start; }
.carousel .carousel__slide {position: relative; display: flex; height: 100%; width: 5%;  }
.carousel .carousel__video {position: absolute; display: none;  top: 0; left: 0; width: 100%; height: 100%; overflow: hidden;}
.carousel .carousel__video iframe {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } /* width and height set JS */
.carousel .carousel__slide > picture > img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}
.carousel .carousel__overlay {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.3);}
.carousel .carousel__content {position: relative; display: flex; align-items: center; flex-direction: column; justify-content: center; gap: 1em; width: 100%; max-width: 900px; margin: 0 auto; padding: 0 60px; }
.carousel .carousel__description p:first-child {margin-top: 0;}
.carousel .carousel__description p:last-child {margin-bottom: 0;}
.carousel .carousel__content img {display: block; height: 100px; max-width: 150px; object-fit: contain; }
.carousel .carousel__title {font-size: 2.5em; font-weight: 600;}
.carousel .carousel__content .cta {font-size: 1.1em; font-weight: 600; margin-top: 10px; }
.carousel .carousel__prev {position: absolute; left: 0; top: 50%; height: 80px; width: 60px; margin-top: -40px; }
.carousel .carousel__prev::after {content: ""; position: absolute; left: 50%; top: 50%; height: 24px; width: 24px; margin-top: -12px;  border-style: solid; border-color: #fff; border-width: 0 0 3px 3px; transform: rotate(45deg); opacity: 0.6; transition: all 0.2s; }
.carousel .carousel__prev:hover::after {opacity: 1; left: 45%;}
.carousel .carousel__next {position: absolute; right: 0; top: 50%; height: 80px; width: 60px; margin-top: -40px;}
.carousel .carousel__next::after {content: ""; position: absolute; right: 50%; top: 50%; height: 24px; width: 24px; margin-top: -12px;  border-style: solid; border-color: #fff; border-width: 3px 3px 0 0; transform: rotate(45deg); opacity: 0.6; transition: all 0.2s; }
.carousel .carousel__next:hover::after {opacity: 1; right: 45%; }
.carousel .carousel__buttons {position: absolute; z-index: 10; bottom: 20px; left: 0; width: 100%; display: flex; align-items: center; justify-content: center}
.carousel .carousel__buttons > a {display: block; padding: 10px; }
.carousel .carousel__buttons > a::after {content: ""; display: block; width: 10px; height: 10px; border: 3px solid #fff; border-radius: 50%;transition: all 0.2s; }
.carousel .carousel__buttons > a.active::after {background: #fff; }
.carousel .carousel__buttons > a:hover::after {background: #fff; }
@media screen and (max-width: 600px) {
	.carousel .carousel__container {height: calc(100vh - 68px); min-height: 400px; }
	.carousel .carousel__content {padding: 0 20px;}
	.carousel .carousel__content img {height: 60px; }
	.carousel .carousel__prev {display:none;}
	.carousel .carousel__next {display:none;}
}

.survey-list-container {margin: 1em 0;}
.survey-list-container table {margin-top: 20px;}
.survey-list-container table .buttons {}
.survey-list-container table .buttons a {display: block; padding: 0 5px; font-size: 21px; color: inherit;}
.survey-list-container table {width: 100%; width: 100% }
.survey-list-container table td {border-bottom: 1px solid var(--borders-light); padding: 5px; cursor: pointer; text-align: center; }
.survey-list-container table tr td:first-child {padding-left: 0;  text-align: left; }
.survey-list-container table tr td:last-child {padding-right: 0; text-align: right; }
.survey-list-container table thead td {font-weight: 600; }




.cta-gallery {display: grid; margin: 30px auto; grid-template-columns: 1fr 1fr; gap: 20px;}
.cta-gallery > div {position: relative; display: flex; border-radius: 10px; background: rgba(0,0,0,0.5); overflow: hidden; color: #fff; }
.cta-gallery > div > picture > img {position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; transition: all ease-in-out 0.4s}
.cta-gallery .cta-gallery__video {position: absolute; display: "none"; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden;}
.cta-gallery .cta-gallery__video iframe {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } /* width and height set JS */
.cta-gallery .cta-gallery__overlay {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.3);}
.cta-gallery .cta-gallery__content {position: relative; min-height: 250px; display: flex; align-items: center; flex-direction: column; justify-content: center; gap: 1em; margin: 0 auto; padding: 30px;  }
.cta-gallery .cta-gallery__description p:first-child {margin-top: 0;}
.cta-gallery .cta-gallery__description p:last-child {margin-bottom: 0;}
.cta-gallery .cta-gallery__content img {display: block; height: 50px; max-width: 150px; object-fit: contain; }
.cta-gallery .cta-gallery__title {font-size: 1.5em; font-weight: 600;}
.cta-gallery .cta-gallery__content .cta {font-weight: 600; margin-top: 10px; }

.sub-page-nr__right .cta-gallery {display: grid; margin: 30px auto; grid-template-columns: 1fr; gap: 20px;}

@media screen and (max-width: 1000px) {
	.cta-gallery {grid-template-columns: 1fr;}
}

.pager {display:flex; align-items: center; justify-content: flex-end; gap: 10px; margin: 20px 0; font-size: 0.9em; }
.pager > div {display:flex; align-items: center; gap: 2px;}
.pager > div a {display:inline-block; padding: 5px 0; min-width: 25px; line-height: 1.1; vertical-align: middle; text-align: center; color: var(--button-text); text-decoration:none; background: var(--button-bg); border: 1px solid var(--button-bg);}
.pager > div a:hover {background-color: color-mix(in srgb, var(--button-bg) 70%, black);}
.pager > div i {display:inline-block; padding: 5px 0; min-width: 25px; line-height: 1.1; vertical-align: middle; text-align: center; color: #ccc; text-decoration:none; background: #fff; border: 1px solid #ccc; font-style: normal; pointer-events: none;}
.pager > div b {display:inline-block; padding: 5px 0; min-width: 25px; line-height: 1.1; vertical-align: middle; text-align: center; color: var(--button-bg); text-decoration:none; background: var(--button-text); border: 1px solid var(--button-bg); font-style: normal; pointer-events: none;}

/* Maps */
.map-container {position: relative; margin: 30px auto; max-width: 1300px; padding: 0 0px; box-sizing: border-box;  overflow: hidden }
.map-container .map {height: 40vh; posistion: relative; border-radius: 10px; }	
.main > .map-container {position: relative; margin: 30px auto; max-width: 1300px; padding: 0 30px; box-sizing: border-box;  overflow: hidden }
.mapmarker-group {color: var(--text); font-size: 14px; width: 200px; padding: 5px 0 5px 5px;  }
.mapmarker-group img {display: block; width: 100%; margin-bottom: 8px; }
.mapmarker-group p { margin: 0;  }
.mapmarker-group .title {margin: 8px 0; font-weight: 600; font-size: 1.1em;}
.mapmarker-group .description {display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;} 
.mapmarker-group .price {margin: 8px 0; font-weight: 600; font-size: 1.2em;}
.mapmarker-group a.button {display:block; margin-top: 8px; background: var(--button-bg); color: var(--button-text); padding: 6px; border-radius: 4px; text-align: center;   }
.mapmarker-group a.button .view {display:none;  }

/* FAQ */
.faqs-container {margin: 20px auto;}
.faqs-container > .faq {position: relative; margin: 10px 0;}
.faqs-container > .faq > a {display:block; position: relative; padding: 10px 40px 10px 20px; color: var(--button-text); background: var(--button-bg); border-radius:4px;}
.faqs-container > .faq > a i {position: absolute; top: 50%; right: 20px; line-height: 0; }
.faqs-container > .faq > div {position: relative; height: 0; overflow: hidden;}
.faqs-container > .faq > div > div {position: absolute; left: 0; bottom: 0; width: 100%; padding: 0 20px; box-sizing: border-box; }
.faqs-container > .faq > div > div:before {content: ""; display: block; padding-top: 1px; margin-bottom: 1em;}
.faqs-container > .faq > div > div:after {content: ""; display: block; padding-bottom: 1px; margin-top: 1em;}
.faqs-container > .faq.open > div {height: auto;}
.faqs-container > .faq.open > div > div {position: relative;}
@media screen and (max-width: 900px) { 
	.faqs-container > .faq > a {padding: 10px 35px 10px 15px; }
	.faqs-container > .faq > a i {right: 15px; }
	.faqs-container > .faq > div > div { padding: 0 15px; }
}


.socials {font-size: 18px; font-weight: 600; margin: 30px 0; text-align:center; }
.socials div {display: flex; gap: 10px; align-items: center; justify-content: center; margin-top: 10px; }
.socials a {color: var(--text); font-size: 18px; padding: 19px 0; width: 38px; border: 1px solid var(--text);  border-radius: 50%; line-height: 0; text-align: center; }
.socials a:hover {background: var(--text); color: #fff; border-color: var(--text); tex-decoration: none; }

.cookie-container {position: fixed; z-index:10; top: 0; left: 0; width:100%; height: 100%; overflow: hidden; pointer-events: none; transition: all 300ms linear; }
.cookie-container.active { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); background: rgba(0,0,0,0.4); pointer-events: all;} 
.cookie-container > div {position: absolute; bottom: 0; left: 0; height: 0; width: 100%; overflow: hidden; background: var(--feature); color: #fff;}
.cookie-container a {color: inherit; text-decoration: underline;}	
.cookie-container > div >  div {position: absolute; top: 0; left: 0; width: 100%;}
.cookie-container .cookie-container__inner {display:flex; width: 100%; color: #fff; gap: 60px; align-items: center; }
.cookie-container .cookie-container__inner > div {flex-grow: 1;}
.cookie-container .cookie-container__inner > div.buttons {flex-grow: 0; text-align: right; padding: 20px 0; display: flex; flex-direction: column; gap: 10px; }
.cookie-container .cookie-container__inner > div.buttons a {display: inline-block; width: auto; border: 1px solid #fff; color: #fff; text-decoration: none; padding: 6px 10px; transition: all 0.3s; white-space:nowrap }
.cookie-container .cookie-container__inner > div.buttons a:hover {background: #fff; color: var(--feature);}
.cookie-container > div.open {height: auto; }
.cookie-container > div.open > div {position: relative; }
@media screen and (max-width: 900px) { 
	.cookie-container .cookie-container__inner {display:block; }
	.cookie-container .cookie-container__inner > div.buttons {padding-top: 0; align-items: center; justify-content: flex-start; flex-direction: row; text-align: left; }
}
.cookie-options {max-width: 700px; margin: 20px auto; padding: 0 30px; text-align: left  }
#modal .cookie-options {margin: 0; padding: 0;  }
#modal .content-text { padding: 0;  }
.cookie-options hr {margin: 20px 0;}
.cookie-options p {margin: 0 0 1em 0;}
.cookie-options .checkbox {margin: 3px 0;}
.cookie-options .checkbox label {display: flex; position: relative; align-items: center; justify-content: left; cursor: pointer; }
.cookie-options .checkbox label input[type=checkbox] {position: absolute; opacity: 0; pointer-events: none; }
.cookie-options .checkbox label i {position: relative; display: block; margin-right: 10px; width: 26px; height: 26px; border: 1px solid var(--borders-input); outline: none }
.cookie-options .checkbox.checked label i {border-color: var(--feature); background: var(--feature);}
.cookie-options .checkbox.checked label i:after {content: ""; position: absolute; top: 50%; left: 50%; margin-left: -7px; margin-top: -5px; width: 14px; height: 7px; box-sizing: border-box; border-bottom: 3px solid #fff; border-left: 3px solid #fff; transform: rotate(-45deg);}
.cookie-options .checkbox-always {margin: 3px 0;}
.cookie-options .checkbox-always label {display: flex; position: relative; align-items: center; justify-content: left; }
.cookie-options .checkbox-always label i {position: relative; display: block; margin-right: 10px; width: 26px; height: 26px; border: 1px solid #ccc; background: #ccc;}
.cookie-options .checkbox-always label i:after {content: ""; position: absolute; top: 50%; left: 50%; margin-left: -7px; margin-top: -5px; width: 14px; height: 7px; box-sizing: border-box; border-bottom: 3px solid #fff; border-left: 3px solid #fff; transform: rotate(-45deg);}


/* Forms */
.main > form {margin: 30px auto; max-width: 850px; padding: 0 30px; box-sizing: border-box;}
.form {margin: 1em auto; max-width: 1300px; padding: 0 0px; box-sizing: border-box;}
.form .field {position: relative; margin: 1.5em 0;}
.form .field-top {display: block; margin: 5px 0; }
.form .field-top label {font-weight: 600;}
.form .field-top .field-title {font-weight: 600; }
.form .field-top .field-description {display: block; }
.form .field-top .field-description p {margin: 0; }

.form .field-top .field-image {border: 1px solid rgba(0,0,0,0.1); background: rgba(0,0,0,0.02); margin: 10px 0; }
.form .field-top .field-image img {display: block; width: 100%; height: auto; max-height: 400px; object-fit: contain;  }

.form .floating-label {}
.form .floating-label textarea,.form .floating-label select, .form .floating-label input[type='text'], .form .floating-label input[type='password'] {padding: 17px 10px 5px 10px; font-weight: 600; }
.form .floating-label label {position: absolute; left: 1px; top: 1px; z-index: 1; pointer-events: none; padding: 11px 0 0 10px; transition: all 0.2s; margin: 0; font-weight: 600; }
.form .floating-label.fl-active label {font-size: 10px; padding-top: 3px; opacity: 0.8; font-weight: 400;}
.form .error-message {color: var(--error); display:none; margin-top: 5px; }
.form .error-message.active {display:block; }
.form input[type=text], .form input[type=password], .form input[type=number], textarea, select {width: 100%; }

.form .validation-instructions {font-size: 14px; text-align: left; color: rgba(0,0,0,0.6); font-weight: 400; margin: 5px 0;}

.form .select-container select::-ms-expand { display: none; }
.form .select-container {position: relative; }
.form .select-container:after {content: ""; position: absolute; right: 10px; top: 50%; margin-top: -7px; width: 8px; height: 8px; border-right: 1px solid #555; border-bottom: 1px solid #555; transform: rotate(45deg); box-sizing: border-box; pointer-events: none; z-index: 1; }

.form .checkbox {margin: 5px 0; text-align: left;}
.form .checkbox label {display: flex; position: relative; align-items: center; justify-content: left; cursor: pointer; font-weight: 600; }
.survey .form .checkbox label {padding: 10px; border: 1px solid var(--borders-input); background: #fff; }
.form .checkboxList .checkbox label {font-weight: 400;}
.form .checkbox label .field-description {font-weight: 400;}
.form .checkbox label .field-description :first-child {margin-top: 0;}
.form .checkbox label .field-description :last-child {margin-bottom: 0;}
.form .checkbox label input[type=checkbox] {position: absolute; opacity: 0; pointer-events: none; }
.form .checkbox label i {flex-shrink: 0; flex-grow: 0; position: relative; display: block; margin-right: 10px; width: 22px; height: 22px; border: 1px solid #bbb; background: #fff; }
.form .checkbox label i:after {content: ""; position: absolute; top: 50%; left: 50%; margin-left: -7px; margin-top: -5px; width: 15px; height: 8px; box-sizing: border-box; border-bottom: 3px solid var(--feature2); border-left: 3px solid var(--feature2); transform: rotate(-45deg) scale(0); transition: all 0.1s;}
.form .checkbox.focused label i {outline: none; }
.form .checkbox.checked label i:after {transform: rotate(-45deg) scale(1);}

.form .consent {text-align: left; border: 1px solid var(--borders-input); padding: 0 20px; background: rgba(255,255,255,0.5) }
.form .consent .checkbox label {background: none; padding: 0!important; border: none!important; font-weight: 400; background: none;}
.form .consent:before {content: ""; position: relative; display:block; margin-bottom: 20px; padding-top: 1px; }
.form .consent:after {content: ""; position: relative; display:block; margin-top: 20px; padding-bottom: 1px; }

.form .radios { text-align: left; margin: 5px 0; }
.form .radios .radio {margin: 5px 0; }
.form .radios .radio label {display: block; }
.form .radios .radio label > div {display: flex; gap:10px;  align-items: center; justify-content: left; cursor:pointer; }
.survey .form .radios .radio label > div {display: flex; gap: 10px; align-items: center; justify-content: left; cursor:pointer; border: 1px solid var(--borders-input); padding: 10px; background: #fff;}
.form .radios .radio label > div input[type=radio] {position: absolute; opacity: 0; pointer-events: none;}
.form .radios .radio label > div i {flex-shrink: 0; position: relative; display: block; width: 20px; height: 20px; border: 1px solid #bbb; background: #fff; border-radius: 50%; }
.form .radios .radio label i:after {content: ""; position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform: translate(-50%,-50%); background: var(--feature2); border-radius: 50%; transition: all 0.1s}
.form .radios .radio.checked label i:after {width: 10px; height: 10px;  }
.form .radios.withImages {display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.form .radios.withImages .radio .image {position: relative; height: 0; padding-bottom: 56%; background-color: rgba(0,0,0,0.03); border: 1px solid var(--borders-input); margin: 0 0 5px 0; }
.form .radios.withImages .radio .image img {position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: contain; }
.form .radios.withImages .radio {margin: 0; }
.form .radios.withImages .radio label > div {border: none; padding: 0; background: none;  }
@media screen and (max-width: 750px) { 	
	.form .radios.withImages {grid-template-columns: 1fr; }	
}

.form .date-container {display: flex; align-items: center; width: 100%; gap: 3px;}
.form .date-container .select-container {width: 100%; }

.form .searchList-container {position: relative; text-align: left; }
.form .searchList-container .searchList-display {position: relative; outline: none; }
.form .searchList-container .searchList-display > div {position: relative; box-sizing: border-box; border: 1px solid var(--borders-input); background: #fff; outline: none; padding: 8px 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer}
.form .searchList-container .searchList-display > div:after {content: ""; position: absolute; right: 10px; top: 50%; margin-top: -7px; width: 8px; height: 8px; border-right: 1px solid #555; border-bottom: 1px solid #555; transform: rotate(45deg); box-sizing: border-box; pointer-events: none; z-index: 1; }

.form .searchList-container .searchList-opener {display:none;}
.form .searchList-container.active .searchList-display > div {border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom: 1px solid var(--borders-input);}
.form .searchList-container.active .searchList-cover {position: fixed; width: 100%; height: 100%; top: 0; left: 0; z-index: 6; bxxackground: rgba(0,0,0,0.1); }
.form .searchList-container.active .searchList-opener {} 
.form .searchList-container.active .searchList-opener {display: block; position: absolute; box-sizing: border-box; top: 100%; left: 0; width: 100%; background: #fff; overflow: hidden; z-index: 8; border: 1px solid var(--borders-input); border-top: none; }
.form .searchList-container.active .searchList-opener .searchList-search {padding: 10px; position: relative;  }
.form .searchList-container.active .searchList-opener .searchList-search input[type=text] {  }
.form .searchList-container.active .searchList-opener .searchList-search i {position: absolute; top: 50%; right: 20px; line-height: 0; pointer-events: none;  }
.form .searchList-container.active .searchList-opener .searchList-result {position: relative; max-height: 220px; overflow: auto; }
.form .searchList-container.active .searchList-opener .searchList-result ul { margin: 0; padding: 0; list-style: none; text-align: left; }
.form .searchList-container.active .searchList-opener .searchList-result ul li { border-top: 1px solid #ddd;}
.form .searchList-container.active .searchList-opener .searchList-result ul li a {display: block; position: relative; padding: 8px 15px; text-decoration: none; color: inherit; }

.form .searchList-container.active .searchList-opener .searchList-result ul li a i {position: absolute; top: 50%; right: 10px; line-height: 0; }
.form .searchList-container.active .searchList-opener .searchList-result ul li a:hover {background: var(--feature2); color: #fff;}
.form .searchList-container.active .searchList-opener .searchList-result ul li a::after {content: ""; position: absolute; box-sizing: border-box;  right: 10px; top: 50%; margin-top: -3px; width: 6px; height: 6px; border-top: 1px solid #333; border-right: 1px solid #333; transform: rotate(45deg);}
.form .searchList-container.active .searchList-opener .searchList-result ul li a:hover::after {border-color: #fff;}
.form .searchList-container.active .searchList-opener .searchList-result ul li.active a {background: var(--feature2); color: #fff;}
.form .searchList-container.active .searchList-opener .searchList-result ul li.active a::after {border-color: #fff;}

.form .searchList-container.active .searchList-opener .searchList-result ul li a b {display: block;}

.form .searchList-container.active .searchList-opener .searchList-result.waiting ul {opacity: 0.5;}
.form .searchList-container.active .searchList-opener .searchList-result.waiting:after {content: ""; position: absolute; top: 50%; left: 50%; width: 26px; height: 26px; margin-top: -13px; margin-left: -13px; border: 5px solid #fff; border-right: 5px solid rgba(255,255,255,0.5); border-radius: 50%; box-sizing: border-box; animation: spin 1.5s linear infinite;  }
.form .searchList-container.active .searchList-opener .searchList-result .empty {padding: 20px 0; color: #333; font-size: 0.8em; text-align: center;}

.form .upload-container {display: flex; gap: 10px; position: relative; display: flex; }
.form .upload-container .thumb {position: relative; width: 100px; height: 100px; overflow: hidden; cursor: pointer; background: #fff; box-sizing: border-box; border: 1px solid var(--borders-input); }
.form .upload-container .thumb img {max-height: 100px; max-width: 100px; object-fit: contain; }
.form .upload-container .thumb i {position: absolute; top: 50%; left: 0; width: 100%; line-height: 0; color: #ccc; text-align: center; font-size: 30px;}
.form .upload-container .thumb a {display: none;}
.form .upload-container .thumb .progress {position: absolute; z-index: 1; left: 0; bottom: 0; width: 100%; border-top: 1px solid var(--borders-input); height: 6px; background: #fff; margin: 0!important; box-sizing: border-box;}
.form .upload-container .thumb .progress div {position: absolute; left: 0; top: 0;height: 100%; background: red;}
.form .upload-container .thumb.active a {position: absolute; display: block; top: 0; right: 0; width: 20px; padding: 10px 0; color: #fff; background: rgba(0, 0, 0, 0.4); }
.form .upload-container .thumb.active a:after {content: ""; position: absolute; background: #fff; width: 16px; height: 2px; top: 50%; left: 50%; margin-top: -1px; margin-left: -8px; transform: rotate(-45deg); border-radius: 2px; }
.form .upload-container .thumb.active a:before { content: ""; position: absolute; background: #fff; width: 16px; height: 2px; top: 50%; left: 50%; margin-top: -1px; margin-left: -8px; transform: rotate(45deg); border-radius: 2px; }
.form .upload-container .thumb.active a:hover {background: red;}
.form .upload-container .thumb:before {content: ""; position: absolute; top: 50px; left: -30px; right: -30px; height: 1px; background: #ccc; transform: rotate(45deg); }
.form .upload-container .thumb:after {content: ""; position: absolute; top: 50px; left: -30px; right: -30px; height: 1px; background: #ccc; transform: rotate(-45deg); }
.form .upload-container .thumb.active:before {display:none;}
.form .upload-container .thumb.active:after {display:none;}
.form .upload-container .details {display: flex; flex-direction: column; gap: 5px; } 

.form .score {margin: 1em 0;}
.form .score .inputs {display: grid; gap: 10px; grid-template-columns: repeat(10, 1fr); margin: 5px 0; text-align: center;}
.form .score .inputs label {position: relative; padding: 10px 1px; background: #fff; border: 1px solid var(--borders-input); cursor: pointer; transition: all 0.2s; }
.form .score .inputs label.checked {background: var(--feature2); border-color: var(--feature2); color: #fff;}
.form .score .inputs label input {position: absolute; top: 0; left: 0; opacity: 0;}
.form .score .labels {display: flex; justify-content: space-between; margin: 5px 0; }
@media screen and (max-width: 500px) {
	.form .score .inputs {gap: 2px;}
}

.form .slider-container {margin: 10px 0;}
.form .slider-container > div {margin: 10px 0;}
.form .slider-container .slider-title {font-weight: 500;}
.form .slider-container .slider-labels {display: flex; justify-content: space-between;}
.form .slider-container .slider {position: relative; margin: 0px 10px 15px 10px; height: 20px; cursor:pointer; } 
.form .slider-container .slider:before {content: ""; position: absolute; top: 8px; left: -10px; right: -10px; height: 4px; background: rgba(0,0,0,0.15); border-radius: 2px; }
.form .slider-container .slider .slide {position: absolute; top: 10px; left: 50%; width: 0; height: 0; } 
.form .slider-container .slider .slide > i {content: ""; position: absolute; left: -25px; top: -25px; width: 50px; height: 50px; cursor:pointer; }
.form .slider-container .slider .slide::before {content: ""; position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; background: #999; cursor:pointer; border-radius: 50%; opacity: 0.3; transition: all 0.3s; }
.form .slider-container .slider:hover .slide:before {left: -15px; top: -15px; width: 30px; height: 30px; }
.form .slider-container .slider .slide::after {content: ""; position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; background: #999; cursor:pointer; border-radius: 50%;  }
.form .slider-container .slider .slide.complete::after {background: var(--feature2);}
.form .slider-container .slider .slide.complete::before {background: var(--feature2);}
.form .slider-container .slider .slide > span {display: none;}
.form .slider-container .slider .slide.active > span {position: absolute; display: block; top: -40px; text-align: center; background: #fff; padding: 1px 10px; font-size: 13px; font-weight: 600;  transform: translate(-50%, 0); border-radius: 4px; box-shadow: 0px 4px 13px 2px rgba(0,0,0,0.2);}
.form .slider-container .slider .slide > span:after {content: ""; position: absolute; top: 100%; left: 50%; margin-left: -4px; width: 0; height: 0; border-style: solid; border-width: 6px 4px 0 4px; border-color: #fff transparent transparent transparent; cursor: pointer;}

.form .rankOrder-container {position: relative; text-align: left;}
.form .rankOrder-container > div {padding: 3px 0;}
.form .rankOrder-container > div > div {display: block; position: relative; border: 1px solid var(--borders-input); padding: 12px 20px 12px 40px; cursor:pointer; background: #fff;}
.form .rankOrder-container > div > div i {position: absolute; display: block; font-size: 18px; left: 10px; top: 50%; height: 0; line-height: 0; color: #999; background-size: contain;}
.form .rankOrder-container > div > div:hover i {color: #000;}
.form .rankOrder-container > div:hover > div::after {opacity: 0.70;}
.form .rankOrder-container > div.dragging > div {box-shadow: 0px 3px 3px 0px rgba(0,0,0,0.1); background: rgba(255,255,255,0.75); z-index: 1; }

.form .group-container {display: grid; grid-template-columns: 1fr 1fr; margin: 10px 0; gap: 10px; }
.form .group-container .options {padding: 10px; border: 1px solid var(--borders-input); border-radius: 4px; background: #fff; }
.form .group-container .options .options-title {font-weight: 500;}
.form .group-container .options.over {border-color: var(--feature2); outline: 1px solid var(--feature2); }
.form .group-container .option {display: block; position: relative; border: 1px solid var(--borders-input); background: #fff; margin: 6px 0; padding: 12px 20px 12px 40px; cursor: pointer; text-align: left;  }
.form .group-container .option i {position: absolute; display: block; font-size: 18px; left: 10px; top: 50%; height: 0; line-height: 0; color: #999; background-size: contain;}
.form .group-container .option:hover i {color: #000;}
.form .group-container .option.dragging {z-index: 1; background: rgba(255,255,255,0.8); box-shadow: 0px 3px 3px 0px rgba(0,0,0,0.1); }
.form .group-container .groups { display: flex; flex-direction: column; gap: 10px; }
.form .group-container .groups .group {padding: 10px; border: 1px solid var(--borders-input); border-radius: 4px; min-height: 120px; background: #fff;}
.form .group-container .groups .group .group-title {font-weight: 500;}
.form .group-container .groups .group.over {border-color: var(--feature2); outline: 1px solid var(--feature2); }

.form .matrix-container {display: grid; gap: 10px 4px;}
.form .matrix-container .head {text-align: center;}
.form .matrix-container label {position: relative; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.form .matrix-container label input[type=radio] {opacity: 0.1;}
.form .matrix-container label i {position: absolute; top: 50%; left: 50%; margin-top: -10px; margin-left: -10px; width: 20px; height: 20px; border: 1px solid #bbb; background: #fff; border-radius: 50%; }
.form .matrix-container label i:after {content: ""; position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform: translate(-50%,-50%); background: var(--feature2); border-radius: 50%; transition: all 0.1s}
.form .matrix-container label.checked i:after {width: 10px; height: 10px; }
@media screen and (max-width: 500px) {
	.form .matrix-container {font-size: 0.75em;}
}



.form .matrix-cols_1 {grid-template-columns: repeat(2, auto)}
.form .matrix-cols_2 {grid-template-columns: repeat(3, auto)}
.form .matrix-cols_3 {grid-template-columns: repeat(4, auto)}
.form .matrix-cols_4 {grid-template-columns: repeat(5, auto)}
.form .matrix-cols_5 {grid-template-columns: repeat(6, auto)}
.form .matrix-cols_6 {grid-template-columns: repeat(7, auto)}
.form .matrix-cols_7 {grid-template-columns: repeat(8, auto)}
.form .matrix-cols_8 {grid-template-columns: repeat(9, auto)}
.form .matrix-cols_9 {grid-template-columns: repeat(10, auto)}
.form .matrix-cols_10 {grid-template-columns: repeat(11, auto)}
.form .matrix-cols_11 {grid-template-columns: repeat(12, auto)}
.form .matrix-cols_12 {grid-template-columns: repeat(13, auto)}
.form .matrix-cols_13 {grid-template-columns: repeat(14, auto)}
.form .matrix-cols_14 {grid-template-columns: repeat(15, auto)}
.form .matrix-cols_15 {grid-template-columns: repeat(16, auto)}

.form .success-message {display:none;}

form.loading .form {pointer-events: none;}
form.loading .form  .field {opacity: 0.5; }
form.loading .form .button-container button.button {color: transparent;}
form.loading .form .button-container .button:after {content: ""; position: absolute; border: 3px solid var(--button-text); border-top-color: transparent; width: 16px; height: 16px; left: 50%; top: 50%; margin-left: -8px; margin-top: -8px; border-radius: 50%; box-sizing: border-box; animation: spin 1.5s infinite linear; }

/* Footer */
footer {position: relative; width: 100%; background: var(--footer-bg); font-size: 12px; color: rgba(255,255,255,0.8); font-weight: 400;}
footer b, footer strong {color: #fff;}
footer p {margin: 0; }
footer .content-text {margin: 0; }
footer ul {margin: 0; padding: 0; list-style: none; }
footer ul li {padding: 0; margin: 0;  }
footer a {text-decoration: none; color: inherit;}
footer a:hover {text-decoration: none; color: #fff;}
footer .socials {margin: 10px 0 0 0; text-align: left; font-size: inherit; font-weight: 400; }
footer .socials div {margin: 5px 0 0 0; justify-content: flex-start  }
footer .socials a {color: #fff; font-size: 16px; padding: 15px 0; width: 30px; border: none; background: #fff; color: var(--footer-bg); }
footer .socials a:hover {background: #fff;  color: var(--footer-bg); }

footer.footer-main .container {display: grid; grid-template-columns: 0.9fr 360px 1.1fr; gap: 20px; margin: 50px auto; }
footer.footer-main .container > div {position: relative; }
footer.footer-main .container .logo > div {position: absolute; left: 0; width: 100%; max-width: 180px; top: -18px;  bottom: 0; background: url("../_IMG/logo-footer.svg") left top no-repeat; background-size: contain; }
footer.footer-main .container .footer-text {display:grid; grid-template-columns: 1fr 1fr; gap: 10px; }
footer.footer-main .container .footer-text > div:nth-child(2) {display:flex; flex-direction: column; justify-content : space-between; gap: 10px; }
footer.footer-main .container .watermark > div {position: absolute; right: 0; width: 100%; max-width: 340px; top: -50px; bottom: 0; background: url("../_IMG/logo-watermark.svg") bottom no-repeat; background-size: 100% auto; opacity: 0.1;}

footer.footer-survey .container {display: flex; align-items: center; justify-content: center; max-width: 750px;}
footer.footer-survey .container .logo { height: 35px; width: 124px;  background: url("../_IMG/logo-footer3.svg") left no-repeat; background-size: contain; margin: 20px 0px 30px 0px;}
footer.footer-survey .container .socials {display: flex; align-items: center; gap: 10px; margin: 10px 0; }

@media screen and (max-width: 1000px) { 
	footer.footer-main .container {grid-template-columns: 0.9fr 360px; }
	footer.footer-main .container .watermark > div {display:none;}
}
@media screen and (max-width: 650px) { 
	footer.footer-main .container {display: block;  }
	footer.footer-main .container .logo > div {position: relative; height: 65px; max-width: none; background: url("../_IMG/logo-footer2.svg") left no-repeat }	
}

/* Modals */
body.modalOpen {overflow: hidden; padding-right: 17px;}
@media screen and (max-width: 1000px) { 
	body.modalOpen {padding-right: 0;}
}
#modal { position: fixed; display:flex; align-items: center; justify-content: center; width: 100%; height: 100%; left: 0; top: 0; background: rgba(10, 10, 10, 0.35); z-index: 200; cursor: pointer; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
#modal.hidden {display:none;}
#modal .inner {position: relative; width: 100%; max-width: 500px; max-height: 100%; cursor: default; padding: 20px; box-sizing: border-box; }
#modal .inner #content { position: relative; max-height: 95vh; max-height: calc(100vh - 60px); background: #fff; padding: 0 25px; text-align: left; border-radius: 4px; overflow: auto; -ms-overflow-style: none;  /* IE and Edge */ scrollbar-width: none;  /* Firefox */ }
#modal .inner #content .container {padding: 0; }
#modal .inner #content .container.unip:before {display:none; }
#modal .inner #content .container.unip:after {display:none; }
#modal .inner #content::-webkit-scrollbar {display: none;}
#modal .inner #content:before { content: ""; display: block; margin-bottom: 25px; padding-top: 1px; }
#modal .inner #content:after { content: ""; display: block; margin-top: 25px; padding-bottom: 1px; }
#modal .inner #content h1, #modal .inner #content h2, #modal .inner #content h3 {margin-top: 20px; } 
#modal .inner #content h1, #modal .inner #content .title {font-size: 18px; margin: 10px 0; font-weight: 600; } 
#modal .inner #content h2 {font-size: 16px; margin: 10px 0; } 
#modal .inner #content h3 {font-size: 15px; margin: 10px 0; } 
#modal .inner #content p {margin: 10px 0; } 
#modal .inner #content .form {margin: 20px 0;}
#modal .inner #content .form .field {margin: 20px 0;}
#modal .inner .closeButton { position: absolute; top: 5px; right: 5px; }
#modal.no-padding .inner #content {padding: 0;}
#modal.no-padding .inner #content:before {display: none; }
#modal.no-padding .inner #content:after {display: none; }
#modal.collapse .inner {width: auto}
#modal.imagePreview .inner {max-width: 900px;}
@media screen and (max-width: 600px) { 
	#modal .inner #content { padding: 0 20px; }
	#modal .inner #content:before {margin-bottom: 20px; }
	#modal .inner #content:after {margin-top: 20px; }
}


#survey-preview {position: fixed; display: flex; flex-direction: column; left: 0; top: 0; width: 100%; height: 100%; background: rgba(10, 10, 10, 0.75); z-index: 200; cursor: pointer; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
#survey-preview.hidden {display:none;}
#survey-preview .topBar {flex-grow: 0; flex-shrink: 0; display: flex; position: relative; justify-content: center; align-items: center; width: 100%; height: 40px; background: rgba(0,0,0,0.5); }
#survey-preview .topBar .info { position: absolute; top: 0; right: 80px; width: 40px; height: 0; padding: 20px 0; line-height: 0; text-align: center; color: #fff; font-size: 20px; }	
#survey-preview .topBar .reset { position: absolute; top: 0; right: 40px; width: 40px; height: 0; padding: 20px 0; line-height: 0; text-align: center; color: #fff; font-size: 20px; }	
#survey-preview .topBar .close { position: absolute; top: 0; right: 0; width: 40px; height: 40px; }	
#survey-preview .topBar .close:before { content: ""; position: absolute; background: #fff; width: 20px; height: 2px; top: 50%; left: 50%; margin-top: -1px; margin-left: -10px; transform: rotate(45deg); border-radius: 2px; }
#survey-preview .topBar .close:after { content: ""; position: absolute; background: #fff; width: 20px; height: 2px; top: 50%; left: 50%; margin-top: -1px; margin-left: -10px; transform: rotate(-45deg); border-radius: 2px; }
#survey-preview .topBar a {opacity: 0.7; transition: transform 0.3s; }
#survey-preview .topBar a:hover {opacity: 1; }
#survey-preview .topBar .buttons {display: flex; align-items: center;}
#survey-preview .topBar .buttons a {display: block; padding: 20px 0; line-height: 0; width: 40px; font-size: 18px; text-align:center; color: #fff; }
#survey-preview.desktop .topBar .buttons a.fa-desktop {opacity: 1; }
#survey-preview.laptop .topBar .buttons a.fa-laptop {opacity: 1; }
#survey-preview.tablet .topBar .buttons a.fa-tablet {opacity: 1; }
#survey-preview.tabletR .topBar .buttons a.fa-tablet {opacity: 1; transform: rotate(90deg);}
#survey-preview.mobile .topBar .buttons a.fa-mobile {opacity: 1; }
#survey-preview.mobileR .topBar .buttons a.fa-mobile {opacity: 1; transform: rotate(90deg);}
#survey-preview .inner {flex-grow: 1; flex-shrink: 1; position: relative; width: 100%; display: flex; justify-content: center; align-items: center;  overflow: hidden;  }
#survey-preview .inner iframe {display: block; width: 1366px; max-width: 95%; max-width: calc(100% - 20px); height: 768px; max-height: 95%; max-height: calc(100% - 20px); margin: 0; background: #fff; border: none;}
#survey-preview.desktop .inner iframe {width: 100%; height: 100%;}
#survey-preview.laptop .inner iframe {width: 1366px; height: 768px;}
#survey-preview.tablet .inner iframe {width: 768px; height: 1180px;}
#survey-preview.tabletR .inner iframe {width: 1180px; height: 768px;}
#survey-preview.mobile .inner iframe {width: 375px; height: 667px;}
#survey-preview.mobileR .inner iframe {width: 667px; height: 375px;}

@media screen and (max-width: 1400px) { 
	#survey-preview .topBar .buttons a.fa-desktop {display:none; }
	#survey-preview.desktop .topBar .buttons a.fa-laptop {opacity: 1; }
	#survey-preview.desktop .inner iframe {width: 1366px; height: 768px;}
}
@media screen and (max-width: 1200px) { 
	#survey-preview.desktop .inner iframe {width: 1180px; height: 768px;}
	#survey-preview.laptop .inner iframe {width: 1180px; height: 768px;}
	#survey-preview.tablet .inner iframe {width: 1180px; height: 768px;}
	#survey-preview.tabletR .inner iframe {width: 1180px; height: 768px;}	
	#survey-preview .topBar .buttons a.fa-laptop {display:none; }
	#survey-preview.desktop .topBar .buttons a.fa-tablet {opacity: 1; }
	#survey-preview.laptop .topBar .buttons a.fa-tablet {opacity: 1; }
	#survey-preview .topBar .buttons a.fa-tablet {transform: rotate(90deg)!important;}
}
@media screen and (max-width: 1200px) and (orientation: portrait) { 
	#survey-preview.desktop .inner iframe {width:768px; height: 1180px;}
	#survey-preview.laptop .inner iframe {width:768px; height: 1180px;}
	#survey-preview.tablet .inner iframe {width:768px; height: 1180px;}
	#survey-preview.tabletR .inner iframe {width:768px; height: 1180px;}
	#survey-preview .topBar .buttons a.fa-tablet {opacity: 1; transform: rotate(0)!important;}
}
@media screen and (max-width: 500px) and (orientation: portrait) {  
	#survey-preview .topBar .buttons a {display:none; }
	#survey-preview .inner iframe {width: 375px!important; height: 667px!important;}
}
@media screen and (max-width: 900px) and (orientation: landscape) {  
	#survey-preview .topBar .buttons a {display:none; }
	#survey-preview .inner iframe {width: 667px!important; height: 375px!important; border: 1px solid #f00;}
}








#supersize { position: fixed; width: 100%; height: 100%; left: 0; top: 0; overflow: auto; background: rgba(0, 0, 0, 0.45); z-index: 200; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
#supersize .inner {position: absolute; top: 40px; left: 40px; right: 40px; bottom: 40px; box-sizing: border-box; }
#supersize .inner .content {position: absolute; width: 100%; height: 100%; background: #fff; overflow: hidden;;}
#supersize .inner .closeButton { position: absolute; top: -14px; right: -14px; }
#supersize .inner .ssprev {position: absolute; top: 50%; left: -1px; width: 30px; height: 60px; border-top-right-radius: 30px; border-bottom-right-radius: 30px; margin-top: -30px; background: #fff; border: 1px solid #ccc; box-shadow: 0 3px 10px rgb(0 0 0 / 0.2); z-index: 1; }
#supersize .inner .ssprev::after {content: ""; position: absolute; top: 50%; left: 8px; width: 12px; height: 12px; border: solid #333; border-width: 0 0 2px 2px; box-sizing: border-box; margin-top: -6px; transform: rotate(45deg);}
#supersize .inner .ssprev:hover::after {border-color: var(--button-bg);}
#supersize .inner .ssnext {position: absolute; top: 50%; right: -1px; width: 30px; height: 60px; border-top-left-radius: 30px; border-bottom-left-radius: 30px; margin-top: -30px; background: #fff; border: 1px solid #ccc; box-shadow: 0 3px 10px rgb(0 0 0 / 0.2); z-index: 1; }
#supersize .inner .ssnext::after {content: ""; position: absolute; top: 50%; right: 8px; width: 12px; height: 12px; border: solid #333; border-width: 0 2px 2px 0; box-sizing: border-box; margin-top: -6px; transform: rotate(-45deg);}
#supersize .inner .ssnext:hover::after {border-color: var(--button-bg);}
#supersize .inner .ssbuttons {position: absolute; display: flex; justify-content: center; bottom: 20px; left: 0; width: 100%; z-index: 1; pointer-events: none; }
#supersize .inner .ssbuttons a {display: block; padding: 6px; transition: all 0.3s; pointer-events: all;}
#supersize .inner .ssbuttons a::after {content: ""; display: block; width: 8px; height: 8px; background: #333; border: 1px solid #333; border-radius: 3px; transition: all 0.3s; box-shadow: 0 3px 10px rgb(0 0 0 / 0.2); }
#supersize .inner .ssbuttons a.active {transform: scale(1.3); pointer-events: none;}
#supersize .inner .ssbuttons a:hover {transform: scale(1.3);}
#supersize .inner .ssbuttons a.active::after, #supersize .inner .ssbuttons a:hover::after {background: #fff;}

#supersize .zoom-control {position:absolute; right: 16px; bottom: 16px; border-radius: 8px; box-shadow: 0 3px 10px rgb(0 0 0 / 0.2); z-index: 1; border: 1px solid #ccc;}
#supersize .zoom-control a {position: relative; width: 30px; height: 30px; display: block; background: #fff; }
#supersize .zoom-control a:first-child {border-top-right-radius: 8px; border-top-left-radius: 8px; }
#supersize .zoom-control a:last-child {border-bottom-right-radius: 8px; border-bottom-left-radius: 8px; border-top: 1px solid #ccc;;}
#supersize .zoom-control a::before {content: ""; position: absolute; width: 14px; height: 2px; left: 50%; top: 50%; margin-left: -7px; margin-top: -1px; background-color: #333}
#supersize .zoom-control a:first-child::after {content: ""; position: absolute; width: 2px; height: 14px; left: 50%; top: 50%; margin-left: -1px; margin-top: -7px; background-color: #333}
#supersize .zoom-control a:hover {background: var(--button-text);}
#supersize .zoom-control a:hover::before {background: var(--button-bg);}
#supersize .zoom-control a:hover::after {background: var(--button-bg);}
#supersize .zoom-control a.disabled {pointer-events: none;}
#supersize .zoom-control a.disabled:before {opacity: 0.25;}
#supersize .zoom-control a.disabled:after {opacity: 0.25;}
#supersize .pan-control {position:absolute; right: 70px; bottom: 16px; border-radius: 100%; box-shadow: 0 3px 10px rgb(0 0 0 / 0.2); border: 1px solid #ccc; height: 70px; width: 70px; background-color: #fff; display: none; z-index: 1;}
#supersize .pan-control a {position: absolute; display: block; left: 50%; top: 50%; margin-left: -13px; margin-top: -35px; width: 26px; height: 26px; transform-origin: 13px 35px}
#supersize .pan-control a::after {content: ""; position: absolute; top: 50%; left: 50%; margin-left: -6px; margin-top: -3px; width: 12px; height: 12px; display: block; border-style: solid; border-color: #333; border-width: 2px 2px 0 0; box-sizing: border-box; transform: rotate(-45deg)}
#supersize .pan-control a:nth-child(1) {transform: rotate(0);  }
#supersize .pan-control a:nth-child(2) {transform: rotate(90deg);}
#supersize .pan-control a:nth-child(3) {transform: rotate(180deg);}
#supersize .pan-control a:nth-child(4) {transform: rotate(270deg);}
#supersize .pan-control a.disabled {pointer-events:none; opacity: 0.25;}
@media screen and (max-width: 600px) { 
	#supersize .inner {top: 20px; left: 20px; right: 20px; bottom: 20px; }
}

.closeButton {width: 28px; height: 28px; background: var(--button-bg); border-radius: 50%;  transition: all 0.2s; }
.closeButton:before { content: ""; position: absolute; background: var(--button-text); width: 16px; height: 2px; top: 50%; left: 50%; margin-top: -1px; margin-left: -8px; transform: rotate(45deg); border-radius: 2px; }
.closeButton:after { content: ""; position: absolute; background: var(--button-text); width: 16px; height: 2px; top: 50%; left: 50%; margin-top: -1px; margin-left: -8px; transform: rotate(-45deg); border-radius: 2px; }
.closeButton:hover {background-color: #000;; }


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



.avatar {flex-shrink: 0; position: relative; display: flex; align-items: center; justify-content: center; font-weight: 600; width: 45px; height: 45px; border-radius: 50%; background-color: #ccc; color: rgba(0,0,0,0.8); background-position: center; background-repeat: no-repeat; background-size: contain; overflow: hidden;}
.avatar.avatar-small {width: 30px; height: 30px;  font-size: 12px; font-weight: 400;}


.avatar img {position: absolute; top: 20%; left: 20%; width: 60%; height: 60%; object-fit: contain;}
.avatar.avatar-accipi { background-image: url("../_IMG/accipi_avatar.svg"); background-color: var(--feature) }
.avatar.colour_1 {background-color: #e1e49a;  color: rgba(0,0,0,0.8);}
.avatar.colour_2 {background-color: #c7b9a9;  color: rgba(0,0,0,0.8);}
.avatar.colour_3 {background-color: #d4a3bb;  color: rgba(0,0,0,0.8);}
.avatar.colour_4 {background-color: #bb4a45; color: #fff;}
.avatar.colour_5 {background-color: #66604d; color: #fff;}
.avatar.colour_6 {background-color: #6e9c61;  color: rgba(0,0,0,0.8);}
.avatar.colour_7 {background-color: #55a7b9; color: #fff;}
.avatar.colour_8 {background-color: #8fa2a7; color: #fff;}
.avatar.colour_9 {background-color: #eae7dc; color: rgba(0,0,0,0.8);}
.avatar.colour_10 {background-color: #4b4949; color: #fff;}
.avatar.colour_11 {background-color: #3f4565; color: #fff;}
.avatar.colour_12 {background-color: #427fb6; color: #fff;}
.avatar.colour_13 {background-color: #665d50; color: #fff;}
.avatar.colour_14 {background-color: #a89d8c; color: #fff;}
.avatar.colour_15 {background-color: #6f836a; color: #fff;}
.avatar.colour_16 {background-color: #3e4847; color: #fff;}

.avatar.avatar-file i {position: absolute; left: -3px; bottom: 10px; padding: 3px 8px; background: #fff; font-style: normal; font-size: 9px; font-weight: 700; line-height: 1;  border: 2px solid #ccc; border-radius: 3px;  }
.avatar.avatar-file-pdf {background: #ff5655;}
.avatar.avatar-file-pdf i {border-color: #ff5655}
.avatar.avatar-file-xls {background: #107b40;}
.avatar.avatar-file-xls i {border-color: #107b40}
.avatar.avatar-file-xlsx {background: #107b40;}
.avatar.avatar-file-xlsx i {border-color: #107b40}
.avatar.avatar-file-doc {background: #185abd;}
.avatar.avatar-file-doc i {border-color: #185abd}
.avatar.avatar-file-docx {background: #185abd;}
.avatar.avatar-file-docx i {border-color: #185abd}
.avatar.avatar-file-ppt {background: #f00;}
.avatar.avatar-file-ppt i {border-color: #c33e1c}
.avatar.avatar-file-ppt {background: #c33e1c;}
.avatar.avatar-file-ppt i {border-color: #c33e1c}
.avatar.avatar-file-pptx {background: #c33e1c;}
.avatar.avatar-file-pptx i {border-color: #c33e1c}
.avatar.avatar-file-jpg {background: #2f9dd9;}
.avatar.avatar-file-jpg i {border-color: #2f9dd9}
.avatar.avatar-file-png {background: #6862a8;}
.avatar.avatar-file-png i {border-color: #6862a8}

.title-description-pair {margin: 1em 0;}
.title-description-pair .title {font-weight: 600;}
.title-description-pair .description {}
.title-description-pair .description :first-child{margin-top: 0;}
.title-description-pair .description :last-child{margin-bottom: 0;}

.survey-status {position: relative; display: inline-block; box-sizing: border-box;  flex-shrink: 0; width: 10px; height: 10px; border-radius: 50%; border: 2px solid #ccc;  background: #fff; overflow: hidden; }
.survey-status.status-B {background: #333; border: none;}
.survey-status.status-P {background: #ffa500; border: none;}
.survey-status.status-PL {background: #b50000; border: none;}
.survey-status.status-R {background: #b50000; border: none;}
.survey-status.status-RL {background: #ffa500; border: none;}
.survey-status.status-W {border-color: #70c500; background: #fff;}
.survey-status.status-E {background: #ccc; border: none;}
.survey-status.status-L {background: #70c500; border: none;}
.survey-status-key {margin: 30px 0; display: flex; align-items: center; gap: 8px; font-size: 0.9em; }
@media screen and (max-width: 600px) {
	.survey-status-key {display: block; }
}

.switch {position: relative; display: flex; align-items: center; gap: 8px; cursor:pointer; color: var(--bright-blue); font-weight: 400; }
.switch label {cursor:pointer; font-weight: 600; transition: opacity 0.1s ease;}
.switch div {position: relative; width: 28px; height: 18px; border-radius: 5px; box-sizing: border-box; background: #d1d8e2; transition: all 0.1s ease;}
.switch div:after {content: ""; position: absolute; left: 15px; top: 3px; width: 10px; bottom: 3px; background: #1a3c6e; border-radius: 3px; transition: all 0.1s ease; }
.switch.off label {opacity: 0.7;}
.switch.off div:after {left: 3px; background: #768aa8;}
.switch label .on-label {display: inline;}
.switch label .off-label {display: none;}
.switch.off label .on-label {display: none;}
.switch.off label .off-label {display: inline;}


.share {margin: 50px 0; text-align: center; }
.share > div {display: flex; gap: 10px; align-items: center; justify-content: center; margin-top: 5px; }
.share > div a {color: #fff!important; background: var(--feature); font-size: 14px; padding: 18px 0; width: 36px; border-radius: 50%; line-height: 0; text-align: center; }
.share > div a:hover {background: var(--text); color: #fff; border-color: var(--text); tex-decoration: none; }
.sharer .linkBox {background: #d1d8e2; padding: 10px; border: none; width: 100%; box-sizing: border-box; padding: 10px 20px; outline: none; white-space: nowrap; overflow: hidden;  text-overflow: ellipsis;}

#customerInner .share {display: flex; justify-content: flex-start; align-items: center; gap: 20px; margin: 30px 0; }
#customerInner .share > div a {background: var(--feature2); }



a.send-message {display: inline-block; vertical-align: middle; font-size: 21px; color: inherit; padding: 0 5px;}
a.send-message:hover {color: #000;}


/* Customer page */
.account-page {display:flex; gap: 60px; text-align: left; }
.account-page .account-page__left {width: 250px; flex-shrink: 0; flex-grow: 0; position: sticky; align-self: flex-start; top: 0;}
.account-page .account-page__right {flex-shrink: 1; flex-grow: 1; position: sticky; align-self: flex-start; top: 0; }

.account-page .account-page__top {display:flex; align-items: center; justify-content: flex-start; gap: 10px; font-weight: 600; font-size: 1.1em; margin: 20px 0 10px 0;}
.account-page .account-page__top .avatar {width: 80px; height: 80px;}
.account-page .account-page__top .name {color: var(--feature); font-size: 1.5em; font-weight: 600; line-height: 1.05; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}

.account-page .account-page__left {}
.account-page .account-page__left .account-page__title {font-weight: 600; margin: 20px 0 10px 0;}
.account-page .account-page__left a.messages {position: relative; display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--feature); font-size: 1.1em; font-weight: 600; padding: 15px 0; min-height: 40px;}
.account-page .account-page__left a.messages .messageCount {width: 20px; height: 0; padding: 10px 0; line-height: 0; font-size: 12px; font-weight: 400; text-align: center;  color: #fff; background: var(--feature3); font-style: normal; border-radius: 50%; }
.account-page .account-page__left a.messages .messageCount.zero {background: #aaa; }

.account-page .account-page__left .option-group { border-top: 2px solid var(--sb-section-seperators); padding: 10px 0;}
.account-page .account-page__left .option-group > a {position: relative; display: flex; align-items: center; gap: 8px; color: var(--feature); font-size: 1.1em; font-weight: 600; padding: 5px 25px 5px 0; min-height: 40px;}

.account-page .account-page__left .option-group > a img {width: 30px; height: 30px; object--fit: cover; border: 1px solid rgba(0,0,0,0.1); }
.account-page .account-page__left .option-group > a i {position: absolute; top: 50%; margin-top: -7px; right: 0; width: 14px; height: 14px; }
.account-page .account-page__left .option-group > a i:before {content: ""; position: absolute; top: 50%; margin-top: -1px; left: 0; width: 100%; height: 2px; background: #b3b3b3; }
.account-page .account-page__left .option-group > a i:after {content: ""; position: absolute; left: 50%; margin-left: -1px; top: 0; width: 2px; height: 100%; background: #b3b3b3; }

.account-page .account-page__left .option-group > div {position: relative; height: 0; overflow: hidden}
.account-page .account-page__left .option-group > div > div {position: absolute; bottom: 0; left: 0; width: 100%;}

.account-page .account-page__left .option-group.active {}
.account-page .account-page__left .option-group.active > a i:after {display: none;}
.account-page .account-page__left .option-group.active > div {height: auto;}
.account-page .account-page__left .option-group.active > div > div {position: relative;}
.account-page .account-page__left .logout {border-top: 2px solid var(--sb-section-seperators); padding: 20px 0; }
.account-page .account-page__left .logout .button {display: block;  }

.account-page .account-page__left > a {display: none; }
.account-page .account-page__left ul {margin: 0; padding: 0; list-style: none; }
.account-page .account-page__left ul li {border-top: 2px solid var(--borders-light); margin: 0; padding: 0; }
.account-page .account-page__left ul li a {position: relative; display: block; padding: 10px 0; color: inherit }
.account-page .account-page-mobile-buttons {display:none;}
.account-page .account-page__right .account-page__top {display: none;}

@media screen and (max-width: 900px) {
	.account-page {display:block; min-height: 100vh; min-height: calc(100vh - 75px); padding: 0; border-bottom: 1px solid #fff;}
	.account-page .account-page__left {display: none; }
	.account-page .account-page__right {width: auto; position: relative; padding: 0 20px; min-height: 100vh; min-height: calc(100vh - 75px); }
	.account-page .account-page__right .account-page__top {display: flex;}
	.account-page .desktop {display: none}
	.account-page .account-page-mobile-buttons {position: sticky; align-items: center; justify-content: space-around; display: flex; left: 0; bottom: 0; width: 100%; box-sizing: border-box; z-index: 100; padding: 10px 5px; gap: 2px; background: #fff; }
	.account-page .account-page-mobile-buttons:before {content: ""; position: absolute; top: -20px; height: 20px; left: 0; width: 100%; background: linear-gradient(0deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0) 100%); pointer-events: none;}
	.account-page .account-page-mobile-buttons > a {display: block; position: relative; font-size: 26px; padding: 0; width: 60px; padding: 30px 0; line-height: 0; color: var(--feature); text-align: center;  border: 1px solid var(--feature); border-radius: 50%;}
	.account-page .account-page-mobile-buttons > a .messageCount {position: absolute; top: -2px; right: -2px; background: var(--feature2); color: #fff; width: 18px; height: 0; line-height: 0; padding: 9px 0; border-radius: 50%; font-size: 11px; font-weight: 400; text-align: center;}
	.account-page .account-page-mobile-buttons > a .messageCount.zero {background: #aaa;}
	.account-page .account-page-mobile-buttons > div {position: absolute; left: 0; bottom: 100%; width: 100%;  height: 0; overflow: hidden; }
	.account-page .account-page-mobile-buttons > div > div {position: absolute; left: 0; top: 0; width: 100%; height: auto; background: #fff; border-top-left-radius: 20px; border-top-right-radius: 20px; }
}
@media screen and (max-width: 600px) {
	.account-page .account-page__left {padding: 0 15px; }
	.account-page .account-page__right {padding: 0 15px; }
}

.customer .flex-top {display: flex; gap: 20px; align-items: center;  justify-content: space-between}
.customer .customer-top {position: relative; background: var(--sb-question-bg); padding: 0 15px; border-radius: 4px; margin: 30px 0 20px 0;}
.customer .customer-top:before {content: ""; position: relative; display:block; margin-bottom: 20px; padding-top: 1px; }
.customer .customer-top:after {content: ""; position: relative; display:block; margin-top: 20px; padding-bottom: 1px; }
.customer .customer-top .buttons-top {position: absolute; display: flex; gap: 5px; top: -13px; right: 15px; }
.customer .customer-top .buttons-top a {font-weight: 400; padding: 8px 10px; text-align: center; line-height: 0; background: var(--button-bg); color: var(--button-text); font-size: 12px; transition: 0.3s;}
.customer .customer-top .buttons-top a .fas {line-height: 0; }
.customer .customer-top .buttons-top a:hover {background: color-mix(in srgb, var(--button-bg) 70%, black); }
.customer .customer-top .active-content {display:none;}
.customer .customer-top.active .static-content {display:none;}
.customer .customer-top.active .active-content {display:block;}

.customer .avatar-container {display: flex; align-items: center; gap: 8px; }
.customer .avatar-container .avatar-title {font-weight: 600; font-size: 1.05em; }

.customer .avatar-container.avatar-container-large .avatar {width: 55px; height: 55px; }
.customer .avatar-container.avatar-container-large .avatar-title {font-weight: 400; font-size: 1.35em }


.customer .customer-title {font-size: 1.35em; font-weight: 500; line-height: 1.2;}
.customer .customer-text .titlex {color: var(--feature); font-size: 1.1em; font-weight: 600; margin: 0; line-height: 1.2;}
.customer .customer-text .titlex {color: inherit; font-size: 1.1em; font-weight: 600; margin: 0; line-height: 1.2;}

.customer .deadline-near{color: #f79e36;}
.customer .deadline-close{color: #bf0000;}
.customer .deadline-vclose{color: #bf0000; font-weight: 600; animation: blink 0.8s linear infinite}
.customer .deadline-passed{color: #aaa;}
@keyframes blink {
	0% {opacity: 1; }
	45% {opacity: 1; }
	50% {opacity: 0; }
	95% {opacity: 0; }
	100% {opacity: 0; }
}
.customer .ajax-empty {display: flex; align-items: center; justify-content: center; gap: 8px; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; padding: 30px 0; margin: 20px 0;}
.customer .ajax-loading {display: flex; align-items: center; justify-content: center; gap: 8px; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; padding: 30px 0; margin: 20px 0;}
.customer .ajax-loading i {display: block; width: 16px; height: 16px; box-sizing: border-box; border: 3px solid #333; border-top-color: transparent; border-radius: 50%; animation: spin 1.5s infinite linear}

.customer .customer-search {position: relative; display: flex; align-items: center; gap: 10px; margin-bottom: 20px;}
.customer .customer-search > div {position: relative; flex-grow: 1   }
.customer .customer-search > div:first-child {}
.customer .customer-search > div:last-child {max-width: 200px;  }
.customer .customer-search input[type=text] {background: #d1d8e2; padding: 10px 35px 10px 15px; border: 2px solid #d1d8e2; width: 100%; outline: none; }
.customer .customer-search input:focus {border-color: var(--feature2); background: #fff;}
.customer .customer-search select {background: #d1d8e2; padding: 10px 35px 10px 15px; border: 2px solid #d1d8e2; width: 100%; outline: none; }
.customer .customer-search select:focus {border-color: var(--feature2); background: #fff;}
.customer .customer-search i {position: absolute; top: 50%; right: 15px; line-height: 0; font-size: 18px; color: rgba(0,0,0,0.4);}

.messages-container {margin: 1em 0;}
.messages-container table.messages {margin-top: 20px; width: 100%; max-width: 100%;}
.messages-container table.messages .buttons {display: flex; align-items: center; justify-content: flex-end; }
.messages-container table.messages .buttons a {display: block; padding: 0 5px; font-size: 21px; color: inherit;}
.messages-container table.messages {width: 100%; width: 100% }
.messages-container table.messages td {border-bottom: 1px solid var(--borders-light); padding: 5px; cursor: pointer;}
.messages-container table.messages tr td:first-child > div {display: flex; align-items: center; gap: 8px; min-width: 0; padding-left: 0; }
.messages-container table.messages tr td:first-child > div b {display: block; }
.messages-container table.messages tr td:first-child > div .date {display: none; }
.messages-container table.messages tr td:first-child > div .read {flex-shrink: 0; width: 10px; height: 10px; border-radius: 50%; background: #ccc;}
.messages-container table.messages tr td:first-child > div .unread {flex-shrink: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--feature3);}
.messages-container table.messages tr td:last-child {padding-right: 0; }
.messages-container table.messages thead td {font-weight: 600; }
@media screen and (max-width: 600px) {
	.messages-container table.messages tr td:first-child > div {gap: 5px; }
	.messages-container table.messages tr td:first-child > div .date {display: block; }
	.messages-container table.messages tr td.date {display: none;}
}

.message-container {}
.message-container .from {display: flex; align-items: center; gap: 8px; margin: 1em 0;  } 
.message-container .from b {display: block; }
.message-container .read {display: flex; align-items: center; gap: 8px; margin: 1em 0;}
.message-container .read i {position: relative; display: block; flex-shrink: 0; width: 12px; height: 12px; border-radius: 50%; background: #ccc;}
.message-container .read.unread i {background: var(--feature3);}

.admins-container {margin: 1em 0;}
.admins-container table.admins {margin-top: 20px; width: 100%}
.admins-container table.admins .buttons {display: flex; align-items: center; justify-content: flex-end; }
.admins-container table.admins .buttons a {display: block;  padding: 0 5px; font-size: 21px; color: inherit;}
.admins-container table.admins {width: 100%; }
.admins-container table.admins td {border-bottom: 1px solid var(--borders-light); padding: 10px 5px; cursor:pointer; }
.admins-container table.admins tr td:first-child > div {display: flex; align-items: center; gap: 8px; padding-left: 0; }
.admins-container table.admins tr td:first-child > div b {display: block; }
.admins-container table.admins tr td:first-child > div .subs {display: none; }
.admins-container table.admins tr td:last-child {padding-right: 0; }
.admins-container table.admins thead td {font-weight: 600; }
@media screen and (max-width: 600px) {
	.admins-container table.admins td.subs {display:none;}
	.admins-container table.admins tr td:first-child > div .subs {display: block; }
}

.surveys-container {margin: 1em 0;}
.surveys-container table.surveys {margin-top: 20px; width: 100%}
.surveys-container table.surveys .buttons {display: flex; align-items: center; justify-content: flex-end; }
.surveys-container table.surveys .buttons a {display: block;  padding: 0 5px; font-size: 21px; color: inherit;}
.surveys-container table.surveys {width: 100%; }
.surveys-container table.surveys td {border-bottom: 1px solid var(--borders-light); padding: 10px 5px; cursor:pointer; }
.surveys-container table.surveys tr td:first-child > div {display: flex; align-items: center; gap: 8px; padding-left: 0; }
.surveys-container table.surveys tr td:first-child > div b {display: block; }
.surveys-container table.surveys tr td:first-child > div .subs {display: none; }
.surveys-container table.surveys tr td:last-child {padding-right: 0; }
.surveys-container table.surveys thead td {font-weight: 600; }
.surveys-container .avatar {margin: 0 auto;;}
@media screen and (max-width: 600px) {
	.surveys-container table.surveys td.subs {display:none;}
	.surveys-container table.surveys tr td:first-child > div .subs {display: block; }
}

.tasks-container {margin: 1em 0;}
.tasks-container .tasks {position: relative; gap: 10px; margin: 20px 0; width: 100%;}
.tasks-container .tasks .task {position: relative; border: 1px solid #ccc; padding: 10px 15px; cursor: pointer; margin: 20px 0;}
.tasks-container .tasks .task .task-top {display: flex; align-items: center; justify-content: space-between; gap: 5px; }
.tasks-container .tasks .task .task-top .buttons {flex-shrink: 0; display: flex; align-items: center; justify-content: flex-end; }
.tasks-container .tasks .task .task-top .buttons a {display: block; padding: 0 5px; font-size: 21px; color: inherit;}
.tasks-container .tasks .task hr {margin: 10px 0;}
.tasks-container .tasks .task .task-bottom {display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0 5px;}


.task-container .documents {margin: 20px  0; }
.documents-title {font-weight: 600; margin: 5px 0;}
.documents-container {position: relative; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px ;width: 100%; margin: 1em 0;}
.documents-container .documents {position: relative;}
.documents-container .document {display: flex; align-items: center; gap: 10px; padding: 5px;  background: #fff; color: inherit; overflow: hidden; cursor:pointer; }
.documents-container .document img {flex-shrink: 0; flex-grow: 0; width: 60px; }
.documents-container .document .details {flex-grow: 1; overflow: hidden; }
.documents-container .document .details span {display: block; min-width: 0; }
.documents-container .document .details > span {white-space: nowrap; overflow: hidden; text-overflow: ellipsis;  }
.documents-container .document .details .name {}
.documents-container .document .details .stats {display: none; font-size: 0.9em; }
.documents-container .document .buttons {}
.documents-container .document .buttons a {font-size: 0.9em; color: inherit; text-decoration: underline;}
@media screen and (max-width: 600px) {
	.documents-container {grid-template-columns: 1fr;}	
}

.task-container {margin: 1em 0;}
.task-container .members {display: grid; grid-template-columns: auto auto; margin: 20px 0; border-bottom: 1px solid var(--borders-light); }
.task-container .members .key {font-weight: 600;display: flex; justify-content: space-between; }
.task-container .members .buttons {flex-shrink: 0; flex-grow: 0; display: flex; align-items: center; justify-content: flex-end; }
.task-container .members .buttons a {display: block; padding: 0 5px; font-size: 21px; color: inherit;}
.task-container .members .member {display: flex; align-items: center; gap: 8px; padding: 5px 10px 5px 0; border-top: 1px solid var(--borders-light);}
.task-container .members .member b {display: block; }

.task-container .members .surveys {border-top: 1px solid var(--borders-light);}
.task-container .members .surveys .survey {display: flex; align-items: center; justify-content: space-between; gap: 5px; padding: 5px 0 5px 10px; border-top: 1px solid var(--borders-light); }
.task-container .members .surveys .survey:first-child {border-top-width: 0; }


@media screen and (max-width: 800px) {
	.task-container .members {display: block; }
	.task-container .members .key {display: none;}
	.task-container .members .surveys {padding-left: 61px; border-top: none;}
	.task-container .members .surveys .survey:first-child {border-top-width: 1px; }
}
.groups-container {margin: 1em 0;}
.groups-container .groups {position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 20px; width: 100%;}
.groups-container .groups .group {display: flex; align-items: center; justify-content: space-between; gap: 5px; border: 1px solid #ccc; padding: 8px 10px 8px 15px; cursor: pointer; overflow: hidden;}
.groups-container .groups .group > div {flex-grow: 1; min-width: 0; }
.groups-container .groups .group > div > div {white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.groups-container .groups .group > div .name {font-weight: 600; }
.groups-container .groups .group .buttons {flex-shrink: 0; display: flex; align-items: center; justify-content: flex-end; }
.groups-container .groups .group .buttons a {display: block; padding: 0 5px; font-size: 21px; color: inherit;}
@media screen and (max-width: 600px) {
	.groups-container .groups {grid-template-columns: 1fr; }
}

.group-container .members {position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 20px; width: 100%;}
.group-container .members .member {display: flex; align-items: center; gap: 10px; border: 1px solid #ccc; padding: 8px 10px 8px 10px; }
.group-container .members .member > div:nth-child(2) {flex-grow: 1;}
.group-container .members .member > div .name {font-weight: 600;}
.group-container .members .member a {font-size: 21px; padding: 0 5px; color: inherit;}
@media screen and (max-width: 600px) {
	.group-container .members {grid-template-columns: 1fr; }
}

.group-invite-container {position: relative; background: var(--sb-question-bg); padding: 0 20px; border-radius: 4px;}
.group-invite-container:before {content: ""; position: relative; display:block; margin-bottom: 20px; padding-top: 1px; }
.group-invite-container:after {content: ""; position: relative; display:block; margin-top: 20px; padding-bottom: 1px; }

.survey-container {display:flex; flex-direction:column;  min-height: 100%;}
.survey-container .survey {flex-grow: 1; text-align: left; background: #fff; width: 100%; max-width: 750px; margin: 0 auto;}
.survey-container .survey .container {}
.survey-container .survey-top {position: sticky; top: 0; z-index: 2;}
.survey-container .survey-top .branding {position: relative; }
.survey-container .survey-top .branding .container {display: flex; align-items: center; justify-content: center; gap: 20px;}
.survey-container .survey-top .branding:before {content: ""; position: relative; display:block; margin-bottom: 10px; padding-top: 1px; }
.survey-container .survey-top .branding:after {content: ""; position: relative; display:block; margin-top: 10px; padding-bottom: 1px; }
.survey-container .survey-top .branding .container img {max-width: 70px; max-height: 70px; border: 1px solid rgba(200,200,200,0.2); }
.survey-container .survey-top .branding .container div {font-weight: 600;}
.survey-container .survey-top .survey-progress {position: relative; display:block; height: 6px; background: #eee; overflow: hidden; }
.survey-container .survey-top .survey-progress i {position:absolute; top: 0; left: 0; width: 0; height: 100%; background: var(--feature2); transition: all 0.5s ease; }


.comments {margin: 20px 0; padding-top: 10px; border-top: 1px solid #ccc;}
.comments .comment-title {display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 1.2em;}
.comments .comment {position: relative; margin: 10px 0; padding: 6px 10px 10px 10px; border-radius: 8px; }
.comments .comment .by {font-size: 11px; opacity: 0.6;}
.comments .comment.comment_home {background: #fff; }
.comments .comment.comment_away {background: #d1d8e2; }
.comments .comment.comment_home:after {content: ""; position: absolute; left: 100%; bottom: 7px; width: 0; height: 0; border-style: solid; border-width: 12px 0 0 12px; border-color: transparent transparent transparent #fff}
.comments .comment.comment_away:after {content: ""; position: absolute; right: 100%; bottom: 7px; width: 0; height: 0; border-style: solid; border-width: 0 0 12px 12px; border-color: transparent transparent #d1d8e2 transparent;}
.comments .comment .switch {margin-top: 5px; }
.comments .comment.comment_away .switch > div {background: #fff; }
.comments .comment .switch label {font-weight: 400; opacity: 1; }
.comments a.new {display: flex; align-items: center; justify-content: center; gap: 8px; margin: 10px 0; font-weight: 600; opacity: 0.6; }

.comments .newComment {position: relative; margin: 10px 0; }
.comments .newComment > div {margin: 5px 0;}
.comments .newComment .area-container {position: relative; border: 2px solid #d1d8e2; border-radius: 8px;  }
.comments .newComment .area-container:after {content: ""; position: absolute; left: 100%; bottom: 5px; width: 0; height: 0; border-style: solid; border-width: 12px 0 0 12px; border-color: transparent transparent transparent #d1d8e2}
.comments .newComment .error {display:none; margin: 5px 0 0 0; color: var(--error);}
.comments .newComment .area-container textarea {display: block; margin: 0; width: 100%; border: none; padding: 6px 10px; border-radius: 5px; height: 60px; }
.comments .newComment .area-container textarea:focus {outline: 3px solid var(--feature2);}
.comments .newComment .area-container a {position: absolute; top: 3px; right: 6px; width: 30px; height: 0; padding: 15px 0; line-height: 0; text-align: center; background: var(--feature2); color: #fff; border-radius: 50%; }
.comments .newComment .area-container a.save {display: none;  }
.comments .newComment .area-container a.saving {display: none; animation: spin 1.5s infinite linear; }
.comments .newComment .checkbox {margin: 10px 0;}
.comments .newComment .checkbox label {display: flex; position: relative; align-items: center; justify-content: left; gap: 7px; cursor: pointer;}
.comments .newComment .checkbox label input[type=checkbox] {position: absolute; opacity: 0; pointer-events: none; }
.comments .newComment .checkbox label i {position: relative; display: block; width: 22px; height: 22px; border: 1px solid var(--borders-input); background: #fff; }
.comments .newComment .checkbox.checked label i:after {content: ""; position: absolute; top: 50%; left: 50%; margin-left: -7px; margin-top: -5px; width: 14px; height: 7px; box-sizing: border-box; border-bottom: 3px solid var(--text); border-left: 3px solid var(--text); transform: rotate(-45deg);}
.comments .newComment .button {font-weight: 400; font-size: 12px; padding: 4px 10px;}

.survey-approval {position:relative; margin-left: auto; margin-right: auto; max-width: 1000px; display: grid; gap: 30px; grid-template-columns: 320px 1fr; padding-left: 30px; padding-right: 30px; box-sizing: border-box; }
.survey-approval .question-number {flex-shrink: 0; width: 30px; height: 0; padding: 15px 0; line-height: 0; text-align: center; font-weight: 700; font-style: normal; background: var(--feature);; color: #fff; border-radius: 50%; }
.survey-approval .survey-approval-left > div {position: sticky; top: 0;}
.survey-approval .survey-approval-left .title {position: relative; display: block; padding: 13px 0; font-size: 1.1em; margin-top: 20px; font-weight: 600; color: var(--feature); border-top: 2px solid var(--sb-question-seperators); border-bottom: 1px solid var(--sb-question-seperators);}
.survey-approval .survey-approval-left .presets .preset {display: flex; gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--sb-question-seperators); cursor: pointer;}
.survey-approval .survey-approval-left .presets .preset:last-child {border-bottom: none; margin }
.survey-approval .survey-approval-left .presets .preset .label {flex-grow: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;  }
.survey-approval .survey-approval-left .presets .preset .comment {display: none; }
.survey-approval .survey-approval-left .presets .preset .comment.active {display: block; font-size: 18px; padding: 10px 7px; color: #888; cursor:pointer;  }
.survey-approval .survey-approval-left .presets .preset .comment.attn {color: #f00; }
.survey-approval .survey-approval-left .questions .question {display: flex; gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--sb-question-seperators); cursor: pointer;}
.survey-approval .survey-approval-left .questions .question .label {flex-grow: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;  }
.survey-approval .survey-approval-left .questions .question .comment {display: none; }
.survey-approval .survey-approval-left .questions .question .comment.active {display: block; font-size: 18px; padding: 10px 7px; color: #888; cursor:pointer;  }
.survey-approval .survey-approval-left .questions .question .comment.attn {color: #f00; }
.survey-approval .survey-approval-left .buttons {flex-shrink: 0; display: flex; gap: 10px; padding: 20px 0; background: #fff; bottom: 0; width: 100%; }
.survey-approval .survey-approval-left .buttons a {display: flex; flex-grow: 1; align-items: center; justify-content: center; font-size: 14px; padding: 5px; background: var(--button-bg); color: var(--button-text); font-weight: 400; }
.survey-approval .survey-approval-left .buttons a i {display: none;}
.survey-approval .survey-approval-left .buttons a.mob {display: none;}
.survey-approval .survey-approval-left .buttons a:hover {background: color-mix(in srgb, var(--button-bg) 70%, black); }
.survey-approval .survey-approval-right .intro {position: relative; margin: 30px 0; background: var(--sb-question-bg); padding: 0 15px; border-radius: 4px;}
.survey-approval .survey-approval-right .intro:before {content: ""; position: relative; display:block; margin-bottom: 20px; padding-top: 1px; }
.survey-approval .survey-approval-right .intro:after {content: ""; position: relative; display:block; margin-top: 15px; padding-bottom: 1px; }
.survey-approval .survey-approval-right .question {position: relative; background: var(--sb-question-bg); padding: 0 15px; border-radius: 4px;}
.survey-approval .survey-approval-right .question:before {content: ""; position: relative; display:block; margin-bottom: 20px; padding-top: 1px; }
.survey-approval .survey-approval-right .question:after {content: ""; position: relative; display:block; margin-top: 15px; padding-bottom: 1px; }
.survey-approval .survey-approval-right .question .question-number {position: absolute; top: -15px; left: 10px; }
.survey-approval .survey-approval-right .merge {position: relative; display: block; width: 50px; margin: 0 auto; padding: 20px 0; line-height: 0; font-size: 13px; text-align: center; color: #ccc; }
.survey-approval .survey-approval-right .merge.merged {background:  var(--sb-question-bg); color: inherit;}
.survey-approval .survey-approval-right .button {font-weight: 400;}
.survey-approval .survey-approval-right .error-message {display:block!important;}
.survey-approval .survey-approval-mobile-buttons {display: none;}
@media screen and (max-width: 900px) {
	.survey-approval {display:block; padding: 0; border-bottom: 1px solid #fff; }
	.survey-approval .survey-approval-left {display: none;}
	.survey-approval .survey-approval-right {padding: 0 30px; min-height: 100vh; min-height: calc(100vh - 75px); }	
	.survey-approval .survey-approval-mobile-buttons {position: sticky;align-items: center; justify-content: space-around; gaps: 2px; left: 0;  bottom: 0; display: flex; width: 100%; box-sizing: border-box;z-index: 100;  padding: 10px 5px; background: #fff; }
	.survey-approval .survey-approval-mobile-buttons:before {content: ""; position: absolute; top: -20px; height: 20px; left: 0; width: 100%; background: linear-gradient(0deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0) 100%); pointer-events: none;}
	.survey-approval .survey-approval-mobile-buttons a {display: block; font-size: 26px; padding: 0; width: 60px; padding: 30px 0; line-height: 0; color: var(--feature); text-align: center;  border: 1px solid var(--feature); border-radius: 50%;}
}
@media screen and (max-width: 600px) {
	.survey-approval .survey-approval-right {padding: 0 15px; }
}
.survey-results {position:relative; margin-left: auto; margin-right: auto; max-width: 1000px; display: grid; gap: 30px; grid-template-columns: 320px 1fr; padding-left: 30px; padding-right: 30px; box-sizing: border-box; }
.survey-results .question-number {flex-shrink: 0; width: 30px; height: 0; padding: 15px 0; line-height: 0; text-align: center; font-weight: 700; font-style: normal; background: var(--feature);; color: #fff; border-radius: 50%; cursor: pointer; }
.survey-results .survey-results-left > div {position: sticky; top: 0;}
.survey-results .survey-results-left .title {position: relative; display: block; padding: 13px 0; font-size: 1.1em; font-weight: 600; color: var(--feature); border-top: 2px solid var(--sb-question-seperators); border-bottom: 1px solid var(--sb-question-seperators);}
.survey-results .survey-results-left .question {display: flex; gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--sb-question-seperators); }
.survey-results .survey-results-left .question .question-label {flex-grow: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;  }

.survey-results .survey-results-left .buttons {flex-shrink: 0; display: flex; gap: 10px; padding: 20px 0; background: #fff; bottom: 0; width: 100%; }
.survey-results .survey-results-left .buttons a {display: flex; flex-grow: 1; align-items: center; justify-content: center; font-size: 14px; padding: 5px; background: var(--button-bg); color: var(--button-text); font-weight: 400; }
.survey-results .survey-results-left .buttons a i {display: none;}
.survey-results .survey-results-left .buttons a.mob {display: none;}
.survey-results .survey-results-left .buttons a:hover {background: color-mix(in srgb, var(--button-bg) 70%, black); }

.survey-results .survey-results-right .questions {margin: 20px 0;}
.survey-results .survey-results-right .questions .question {margin: 10px 0; border-top: 1px solid #ccc;}
.survey-results .survey-results-right .questions .question .question-top {display: flex; align-items: center; gap: 8px; margin: 10px 0 }
.survey-results .survey-results-right .questions .question .question-title {font-size: 1.1em; }
.survey-results .survey-results-right .questions .question .chart {margin: 10px 0;}
.survey-results .survey-results-right .questions .question .chart-title {margin: 10px 0 5px 0; font-weight: 600;}
.survey-results .survey-results-right .demographics {display: grid; width: 100%;  grid-template-columns: 1fr 1fr 1fr; margin: 20px 0;}
.survey-results .survey-results-right .demographics .demographic {position: relative; text-align:center;}
.survey-results .survey-results-right .demographics .demographic-title {font-weight: 600;}
.survey-results .survey-results-right .waiting {min-height: 100px; }
.survey-results .survey-results-right .ajax-loading {display: flex; align-items: center; justify-content: center; gap: 8px; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; padding: 30px 0; margin: 20px 0;}
.survey-results .survey-results-right .ajax-loading i {display: block; width: 16px; height: 16px; box-sizing: border-box; border: 3px solid #333; border-top-color: transparent; border-radius: 50%; animation: spin 1.5s infinite linear}
.survey-results .survey-results-right .results-text .results-text-search {position: relative;}
.survey-results .survey-results-right .results-text .results-text-search input {background: #d1d8e2; padding: 10px 35px 10px 15px; border: 2px solid #d1d8e2; width: 100%; outline: none; margin-bottom: 20px 0;}
.survey-results .survey-results-right .results-text .results-text-search input:focus {border-color: var(--feature2); background: #fff;}
.survey-results .survey-results-right .results-text .results-text-search i {position: absolute; top: 50%; right: 15px; line-height: 0; font-size: 18px; color: rgba(0,0,0,0.4);}
.survey-results .survey-results-right .results-text table {width: 100%; margin: 10px 0}
.survey-results .survey-results-right .results-text table thead tr td {font-weight: 600;}
.survey-results .survey-results-right .results-text table tbody tr td {border-top: 1px solid #ccc; padding: 2px 0}
.survey-results .survey-results-right .results-text table tr td:last-child {text-align: right;}
.survey-results .survey-results-right .results-text .empty {margin: 30px 0; text-align: center;}
@media screen and (max-width: 900px) {
	.survey-results {display:block; padding: 0;border-bottom: 1px solid #fff; }
	.survey-results .survey-results-left {display: none;}
	.survey-results .survey-results-right {padding: 0 30px; min-height: 100vh; min-height: calc(100vh - 75px); }	
	.survey-results .survey-results-mobile-buttons {position: sticky;align-items: center; justify-content: space-around; gap: 2px; left: 0; bottom: 0; display: flex; width: 100%; box-sizing: border-box; z-index: 100;  padding: 10px 5px; background: #fff; }
	.survey-results .survey-results-mobile-buttons:before {content: ""; position: absolute; top: -20px; height: 20px; left: 0; width: 100%; background: linear-gradient(0deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0) 100%); pointer-events: none;}
	.survey-results .survey-results-mobile-buttons a {display: block; font-size: 26px; padding: 0; width: 60px; padding: 30px 0; line-height: 0; color: var(--feature); text-align: center;  border: 1px solid var(--feature); border-radius: 50%;}
}
@media screen and (max-width: 600px) {
	.survey-results .survey-results-right {padding: 0 15px; }
}

.area-buttons {position: absolute; display: flex; gap: 5px; top: -13px; right: 15px; }
.area-section_active .buttons {top: 2px; }
.area-buttons a {padding: 5px; background: var(--button-bg); color: var(--button-text); padding: 15px 0; width: 30px; border-radius: 50%; line-height: 0; text-align: center;}
.area-buttons a.close:after {content: ""; position: absolute; top: 50%; left: 50%; margin-top: -1px; margin-left: -8px; width: 16px; height: 2px; background: #fff;}
.area-buttons a:hover {background: color-mix(in srgb, var(--button-bg) 70%, black); }

.survey {}
.survey .consent-form-bottom { text-align: center;}
.survey .consent-form-bottom .buttons {margin: 50px 0;}
.survey .consent-form-bottom .buttons > div {margin: 20px 0;}
.survey .consent-form-bottom .buttons > div a {display: inline-block; font-size: 1.05rem; font-weight: 400!important; padding: 7px 50px; }
.survey .consent-form-bottom .buttons > div button {display: inline-block; font-size: 1.05rem; font-weight: 400!important; padding: 7px 50px;}

.survey .register-cta {position: relative; box-sizing: border-box;  width: 100%; max-width: 750px; background: rgb(243,147,43); background: linear-gradient(90deg, rgba(243,147,43,1) 0%, rgba(247,184,19,1) 100%); color: #fff; font-size: 1.5em; margin: 30px 0; padding: 0 30px; text-align: center; }
.survey .register-cta:before {content: ""; display: block; padding-top: 1px; margin-bottom: 20px; }
.survey .register-cta:after {content: ""; display: block; padding-bottom: 1px; margin-top: 20px; }
.survey .register-cta .cta-button { margin: 20px 0; }
.survey .register-cta .cta-button a {color: #fff; border: 1px solid #fff; color: #fff!important; font-size: 1.05rem; font-weight: 600!important; padding: 7px 50px; }

.survey .incentives-image {position: relative; box-sizing: border-box;  width: 100%; max-width: 750px; background: #ccc; color: #fff; font-size: 1.5em; margin: 30px 0; padding: 0 30px; text-align: center; }
.survey .incentives-image:before {content: ""; display: block; padding-top: 1px; margin-bottom: 40px; }
.survey .incentives-image:after {content: ""; display: block; padding-bottom: 1px; margin-top: 40px; }
.survey .incentives-image .cta-button { margin: 20px 0; }
.survey .incentives-image .cta-button a {color: #fff; border: 1px solid #fff; color: #fff!important; font-size: 1.05rem; font-weight: 600!important; padding: 7px 50px; }

.survey-builder {position:relative; margin-left: auto; margin-right: auto; max-width: 1000px; padding-left: 30px; padding-right: 30px; box-sizing: border-box; }
.survey-builder .survey-cols {position: relative; display: grid; gap: 15px; grid-template-columns: 325px 1fr; }
.survey-builder .survey-cols .cover {display: none;}


.survey-builder.view-presets .tool-group-presets a {font-weight: 600;}
.survey-builder.view-presets .survey-editor .questions {display:none;} 
.survey-builder.view-presets .survey-tools .questions {display:none;}
.survey-builder.view-presets .survey-tools .tool-group-themes {display:none;}
.survey-builder.view-presets .survey-tools .tool-group-completion {display:none;}
.survey-builder.view-presets .survey-buttons {display:none;}
.survey-builder.view-questions .tool-group-questions a {font-weight: 600;}
.survey-builder.view-questions .survey-editor .presets {display:none;} 
@media screen and (max-width: 900px) {
	.survey-builder.view-presets .survey-editor .questions {display:block;} 
	.survey-builder.view-presets .survey-tools .questions {display:block;}
	.survey-builder.view-presets .survey-tools .tool-group-themes {display:block;}
	.survey-builder.view-presets .survey-tools .tool-group-completion {display:block;}
	.survey-builder.view-presets .survey-buttons {display:flex;}
	.survey-builder.view-questions .tool-group-questions a {font-weight: 600;}
	.survey-builder.view-questions .survey-editor .presets {display:block;} 
}
.survey-tools {position: relative; z-index: 5;}
.survey-tools > div {position: relative; padding-right: 15px; }

.survey-tools .tool-group {border-bottom: 2px solid var(--sb-section-seperators); }
.survey-tools .tool-group > a {position: relative; display: block; padding: 13px 0; font-size: 1.1em; font-weight: 400; color: var(--feature);}
.survey-tools .tool-group:first-child > a {border-top: 2px solid var(--sb-section-seperators); }
.survey-tools .tool-group > a.toggle-group {box-sizing: border-box; padding: 13px 0 13px 25px;} 
.survey-tools .tool-group > a.toggle-group i {position: absolute; top: 50%; left: 0; width: 14px; height: 14px; margin-top: -7px;}
.survey-tools .tool-group > a.toggle-group i:before {content: ""; position: absolute; top: 6px; left: 0; width: 100%; height: 2px; background: #b3b3b3; }
.survey-tools .tool-group > a.toggle-group i:after {content: ""; position: absolute; top: 0; left: 6px; width: 2px; height: 100%; background: #b3b3b3; }
.survey-tools .tool-group .draghandle {display: none;}
.survey-tools .tool-group.active > a i:after {display: none; }
.survey-tools .tool-group > div {position: relative; height: 0; overflow: hidden; }
.survey-tools .tool-group > div > div {position: absolute; box-sizing: border-box; left: 0; bottom: 0; width: 100%; }
.survey-tools .tool-group.active > div {height: auto; overflow: visible;}
.survey-tools .tool-group.active > div > div  {position: relative;}


.survey-tools .presets a {display: flex; align-items: center; justify-content: space-between; color: inherit; border-top: 2px solid var(--sb-question-seperators); padding: 6px 0; min-height: 30px; }
.survey-tools .presets a span {flex-shrink: 0; font-size: 18px; padding: 10px 7px; color: #888; cursor:pointer;  }
.survey-tools .presets a span:hover {color: #000; }
.survey-tools .presets a .comment {display:none;}
.survey-tools .presets a .comment.active {display:block;}
.survey-tools .presets a .comment.attn {color: var(--error);}

.survey-tools .questions a.question-add {flex-shrink: 0; flex-grow: 0; position: relative; display: flex; gap: 10px; align-items: center; padding: 13px 0; border-top: 2px solid var(--sb-question-seperators); border-bottom: 2px solid var(--sb-question-seperators); font-weight: 600; color: var(--feature2);}
.survey-tools .questions a.question-add i {position: relative; display: block; padding: 15px 0; width: 30px; height: 0; line-height: 0; border-radius: 50%; text-align: center; background: var(--button-bg); color: var(--button-text); transition: 0.3s;}
.survey-tools .questions a.question-add i:before {content:""; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; margin-top: -1px; margin-left: -7px; background: var(--button-text);}
.survey-tools .questions a.question-add i:after {content:""; position: absolute; left: 50%; top: 50%; width: 2px; height: 14px; margin-top: -7px; margin-left: -1px; background: var(--button-text);}
.survey-tools .questions a.question-add:hover i {background: color-mix(in srgb, var(--button-bg) 70%, black);}
.survey-tools .questions a.question-add:last-child {border-bottom: none; }
.survey-tools .questions {}
.survey-tools .questions .question {position: relative; display: flex; width: 100%; align-items: center; padding: 6px 0; border-bottom: 2px solid var(--sb-question-seperators); }
.survey-tools .questions .question:last-child {border-bottom: none; }
.survey-tools .questions .question.dragging {z-index: 10; border-bottom: none; background: rgba(255,255,255,0.7); border-top: 1px solid var(--sb-question-seperators); border-bottom: 1px solid var(--sb-question-seperators);}
.survey-tools .questions .question .question-number {flex-shrink: 0; width: 30px; height: 0; padding: 15px 0; line-height: 0; text-align: center; font-weight: 700; font-style: normal; background: #ccc; color: var(--feature); border-radius: 50%; cursor: pointer; }
.survey-tools .questions .question .question-number:hover {background: var(--feature); color: #fff; }
.survey-tools .questions .question .question-number.active {background: var(--feature); color: #fff; }
.survey-tools .questions .question span {font-size: 18px; padding: 10px 7px; color: #888; cursor:pointer;  }
.survey-tools .questions .question span:hover {color: #000; }
.survey-tools .questions .question .comment {display:none;}
.survey-tools .questions .question .comment.active {display:block;}
.survey-tools .questions .question .comment.attn {color: var(--error);}

.survey-tools .questions .question .label {flex-shrink: 1; flex-grow: 1; }
.survey-tools .questions .question .label p {display: inline; margin: 0;}
.survey-tools .questions .question.merged {border-color: transparent;}
.survey-tools .questions .question.merged .merge:after {background-color:var(--feature2);}

.survey-tools .themes {}
.survey-tools .themes .themes-top {position: relative; display:grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.survey-tools .themes .themes-top a {padding: 6px 0; font-weight: 600; color: var(--feature); }
.survey-tools .themes .themes-top a.active {color: var(--feature2); border-bottom: 2px solid var(--sb-question-seperators); }
.survey-tools .themes .themes-bottom > div {display: none;} 
.survey-tools .themes .themes-bottom > div.active {display: block; padding: 1px 0;} 

.survey-tools .palette  {margin: 15px 0; }
.survey-tools .palette > div  {display: grid; gap: 5px; grid-template-columns: 1fr 1fr; margin: 10px 0; }
.survey-tools .palette > div a {position: relative; box-sizing: border-box; height: 30px;}
.survey-tools .palette > div a.active {border: 2px solid #000;}
.survey-tools .palette > div a.active:after {content: ""; position: absolute; box-sizing: border-box; top: 0; left: 0; width: 100%; height: 100%; border: 2px solid #fff;}

.survey-tools .fonts {padding: 20px 0; }
.survey-tools .fonts > div {margin: 15px 0; }
.survey-tools .fonts > div a {display: block; position: relative; border: 2px solid transparent; padding: 10px; color: inherit; }
.survey-tools .fonts > div a b {display: block; font-size: 1.1em; white-space: nowrap;  overflow: hidden; text-overflow: ellipsis; }
.survey-tools .fonts > div a span {display: block;  white-space: nowrap;  overflow: hidden; text-overflow: ellipsis; }
.survey-tools .fonts > div a.active {border-color: #000;}

.survey-tools .completion-time {padding: 20px; background: var(--sb-question-bg); margin: 20px 0; border-radius: 4px; }

.survey-tools .survey-buttons {flex-shrink: 0; display: flex; gap: 10px; padding: 20px 0; background: #fff; bottom: 0; width: 100%; }
.survey-tools .survey-buttons a {display: flex; flex-grow: 1; align-items: center; justify-content: center; font-size: 14px; padding: 5px; background: var(--button-bg); color: var(--button-text); font-weight: 400; }
.survey-tools .survey-buttons a i {display: none;}
.survey-tools .survey-buttons a.mob {display: none;}
.survey-tools .survey-buttons a:hover {background: color-mix(in srgb, var(--button-bg) 70%, black); }


@media screen and (max-width: 900px) {
	.survey-builder {padding-left: 0; padding-right: 0; }	
	.survey-builder .survey-cols {gap: 0; grid-template-columns: 1fr; }
	.survey-builder .survey-cols .cover {position: absolute; display: none; z-index: 1; top: -75px; left: 0; width: 100%; bottom: 0; background: rgba(10, 10, 10, 0.35); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); pointer-events: all; }	
	.survey-builder .survey-cols .cover.active {display:block;}
	.survey-tools {position: sticky; order: 2; bottom: 0; left; 0; width: 100%; display: flex;  flex-direction: column; justify-content: flex-end; z-index: 10; pointer-events: none; }
	.survey-tools > div {overflow: visible; padding: 0;}
	.survey-tools > div:before {display:none; }
	.survey-tools > div:after {display:none; }
	.survey-tools .tool-group  {position: absolute; bottom: 100%; width: 100%; height: 0; overflow: hidden; border: none; pointer-events: all; }
	.survey-tools .tool-group.active {overflow: hidden; }	
	.survey-tools .tool-group > a {display: none; }
	.survey-tools .tool-group > div {display: block!important; height: auto; max-height: calc(100vh - 130px); max-height: calc(100dvh - 130px); padding: 5px 0 10px 0;  background: #fff; overflow-y: auto!important;}

	.survey-tools .tool-group .draghandle {display: block; position: relative; height: 60px; pointer-events: all; cursor: pointer; }
	.survey-tools .tool-group .draghandle:after {content: ""; position: absolute; bottom: 18px; left: 50%; width: 120px; margin-left: -65px; height: 4px; background: rgba(0,0,0,0.6); border-radius: 2px; }
	
	.survey-tools .tool-group > div > div {position: relative; box-sizing: border-box; padding: 0 20px; }
	.survey-tools .tool-group .questions a.question-add {border-top: none;}
	.survey-tools .tool-group.activeMobile {height: auto; }
	.survey-tools .tool-group.active > div { overflow: hidden;}
	.survey-tools .themes .themes-top a {padding-top: 20px; }
	
	.survey-tools .questions .question .question-number {background: var(--feature); color: #fff; pointer-events: none;}
	
	.survey-tools .completion-time {background: none;}	
	.survey-tools .completion-time b {display: block; font-size: 1.25em;  }	
	
	.survey-tools .survey-buttons {display: flex; align-items: center; justify-content: space-around; gap: 5px; width: 100%; box-sizing: border-box; border: none; padding: 10px 20px; background: #fff; pointer-events: all;}
	.survey-tools .survey-buttons:before {content: ""; position: absolute; top: -20px; height: 20px; left: 0; width: 100%; background:linear-gradient(0deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0) 100%); pointer-events: none;}
	.survey-tools .survey-buttons a {display: block; background: none; padding: 0; font-weight: 400; }

	.survey-tools .survey-buttons a:hover {background: none; }
	.survey-tools .survey-buttons a.mob {display: block; }
	.survey-tools .survey-buttons a {position: relative; color: var(--feature); text-align: center; font-size: 12px; line-height: 1.1; }
	.survey-tools .survey-buttons a i {display:block; position: relative; width: 80%; max-width: 60px; margin: 0 auto 5px auto; border: 1px solid var(--feature); border-radius: 50%;}
	.survey-tools .survey-buttons a i:before {position: relative; display:block; width: 100%; height: 0; padding: 50% 0; line-height: 0; font-size: 26px;}	
	.survey-tools .survey-buttons a.active i {background: var(--feature2); color: #fff; border-color: var(--feature2);}
	.survey-tools .survey-buttons a span {display: none;}
	.survey-editor {padding-left: 20px; order: 0; padding-right: 20px; }	
}

.survey-editor {flex-grow: 1;}
.survey-editor .wysiwyg .editor {display: flex; flex-direction: column-reverse; }
.survey-editor .wysiwyg .editor .ql-container {color:var(--field-text);}
.survey-editor .wysiwyg label {display:block; margin: 0!important; padding: 3px 10px 0 10px; font-size: 13px; background: #fff; }
.survey-editor .wysiwyg label span {opacity: 0.8;}
.survey-editor .wysiwyg strong {font-weight: 600;}
.survey-editor .wysiwyg a {position: absolute; opacity: 0; top: 3px; right: 6px; width: 30px; height: 0; padding: 15px 0; line-height: 0; text-align: center; background: var(--feature2); color: #fff; border-radius: 50%; pointer-events: none; }
.survey-editor .wysiwyg.active a.save {display: block; opacity: 1; pointer-events: all; }
.survey-editor .wysiwyg.saving a.saving {display: block; opacity: 1; pointer-events: all; animation: spin 1.5s infinite linear; }

.survey-editor .text-container {position: relative;}
.survey-editor .text-container a {position: absolute; opacity: 0; top: 3px; right: 6px; width: 30px; height: 0; padding: 15px 0; line-height: 0; text-align: center; background: var(--feature2); color: #fff; border-radius: 50%; pointer-events: none; }
.survey-editor .text-container.active a.save {display: block; opacity: 1; pointer-events: all; }
.survey-editor .text-container.saving a.saving {display: block; opacity: 1; pointer-events: all; animation: spin 1.5s infinite linear; }
.survey-editor .editField.fl .text-container a {top: 10px;}

.survey-editor .intro-date-container {margin: 20px 0;}
.survey-editor .intro-date-container .intro-date-container_date {display: none;}
.survey-editor .intro-date-container.active .intro-date-container_date {display:grid; gap: 10px; margin: 10px 0; grid-template-columns: 1fr 1fr 1fr 1fr; }
.survey-editor .intro-date-container .intro-date-container_date .editField {margin: 0; }

.survey-editor .editField .select-container {position: relative;}
.survey-editor .editField .select-container:after {content: ""; position: absolute; right: 10px; top: 50%; margin-top: -7px; width: 8px; height: 8px; border-right: 1px solid #555; border-bottom: 1px solid #555; transform: rotate(45deg); box-sizing: border-box; pointer-events: none; z-index: 1; }
.survey-editor .editField .select-container .saving {position: absolute; opacity: 0; top: 50%; margin-top: -15px; right: 6px; width: 30px; height: 0; padding: 15px 0; line-height: 0; text-align: center; background: var(--feature2); color: #fff; border-radius: 50%; pointer-events: none; }
.survey-editor .editField .select-container.saving .saving {display: block; opacity: 1; pointer-events: all; animation: spin 1.5s infinite linear; }


.survey-editor .survey-title {position: relative; margin: 30px 0;  }
.survey-editor .survey-title input {background: #d1d8e2; padding: 10px; border: none; width: 100%; padding: 10px 20px; outline: none}
.survey-editor .survey-title input:focus {outline: 3px solid var(--feature2); background: #fff;}
.survey-editor .survey-title .error {margin-top: 5px; color: var(--error);}
.survey-editor .survey-title .text-container a {top: 50%; margin-top: -15px; z-index: 1; }
.survey-editor .survey-title .icon {position: absolute; top: 20px; right: 15px; line-height: 0; font-size: 18px; color: #fff; pointer-events: none; }

.survey-editor .editField {position: relative; margin: 10px 0;}
.survey-editor .editField.editField-m {margin: 20px 0;}
.survey-editor .labelAndType  {display:grid; gap: 10px; margin: 10px 0; grid-template-columns: 1fr 1fr; }
.survey-editor .labelAndType .info-button{margin: 18px 0 0 0;}
.survey-editor .labelAndType .editField {flex-grow: 1; margin: 0; }
@media screen and (max-width: 600px) {
	.survey-editor .labelAndType  {display:flex;  }	
	.survey-editor .labelAndType .questionType {width: 65px; box-sizing: border-box; flex-shrink: 1; flex-grow: 0;}
}

.survey-editor .question-image {position: relative; display: block; border: 1px solid #ccc; margin: 20px 0; text-align: center; }

.survey-editor .question-image span {display: block; color: #888; font-size: 0.9em; margin: 10px; }
.survey-editor .question-image span i {display: block; font-size: 35px; color: #888;  }
.survey-editor .question-image:hover i {color: #000; }
.survey-editor .question-image.thumb span {display:none;}
.survey-editor .question-image.thumb img {display: block; width: 100%; height: 100%; max-height: 150px; object-fit: contain;}

.survey-editor .editField-x2 {display:grid; gap: 10px; margin: 10px 0; grid-template-columns: 1fr 1fr; }
.survey-editor .editField-x2 .editField {margin: 0; }
.survey-editor .editField-x3 {display:grid; gap: 10px; margin: 10px 0; grid-template-columns: 1fr 1fr 1fr; }
.survey-editor .editField-x3 .editField {margin: 0; }
.survey-editor .editField-x4 {display:grid; gap: 10px; margin: 10px 0; grid-template-columns: 1fr 1fr 1fr 1fr; }
.survey-editor .editField-x4 .editField {margin: 0; }
@media screen and (max-width: 750px) {
	.survey-editor .editField-x3 {grid-template-columns: 1fr 1fr; }	
	.survey-editor .editField-x3 .editField:nth-child(3) {grid-column: 1 / 3; }
}

.survey-editor .editField label {display:block; margin: 3px 0; font-size: 13px;}
.survey-editor .editField .error {display:none; margin: 5px 0 0 0; color: var(--error);}
.survey-editor .editField input[type=text] {width: 100%; border: none;}
.survey-editor .editField input[type=number] {width: 100%; border: none;}
.survey-editor .editField textarea {width: 100%; border: none;}
.survey-editor .editField select {width: 100%; border: none;}
.survey-editor .editField input:focus {outline: 3px solid var(--feature2);}
.survey-editor .editField select:focus {outline: 3px solid var(--feature2);}
.survey-editor .editField.fl textarea,.survey-builder .editField.fl  select, .survey-builder .editField.fl input[type='text'], .survey-builder .editField.fl input[type='number'] {padding: 22px 10px 6px 10px;  }
.survey-editor .editField.fl label {position: absolute; left: 1px; top: 1px; z-index: 1; pointer-events: none; padding: 12px 0 0 10px; transition: all 0.2s; margin: 0; font-size: 1rem; }
.survey-editor .editField.fl.fl-active label {font-size: 13px; padding-top: 2px; opacity: 0.8; font-weight: 400;}

.survey-editor .questionType {position: relative; background: #fff; padding: 8px 10px; padding: 22px 10px 6px 10px;}
.survey-editor .questionType label {position: absolute; left: 1px; top: 1px; z-index: 1; margin: 0;pointer-events: none; font-size: 13px; padding: 2px 0 0 10px; opacity: 0.8; font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.survey-editor .questionType.active {outline: 3px solid var(--feature2); box-shadow: 0px 1px 7px 1px rgba(0,0,0,0.1); z-index: 500;}
.survey-editor .questionType.active:after {content: ""; position: fixed; left: 0; top: 0; width: 100%; height: 100%; }
.survey-editor .questionType > div {display: flex; align-items: center; gap: 5px; font-weight: 500;}
.survey-editor .questionType > div i {font-size: 1.25em; display: block;  }
.survey-editor .questionType > div:after {content: ""; position: absolute; pointer-events: none; right: 6px; top: 50%; width: 5px; height: 5px; margin-top: -7px; border-right: 2px solid #000; border-bottom: 2px solid #000; transform: rotate(45deg); }
.survey-editor .questionType ul {display: none; position: absolute; top: 100%; right: 0; width: 100%; background: #fff; border: 1px solid #ccc; z-index: 500; margin: 0; padding: 0; list-style: none; }
.survey-editor .questionType.active ul {display: block;}
.survey-editor .questionType ul li { margin: 0; padding: 0;}
.survey-editor .questionType ul li b {display: block; padding: 8px 15px 3px 15px; white-space: nowrap; font-weight: 400; opacity: 0.8; font-size: 13px;}
.survey-editor .questionType ul li a {display: flex; align-items: center; padding: 3px 15px; white-space: nowrap; color: inherit; }
.survey-editor .questionType ul li a:hover {background: var(--feature2); color: #fff; }
.survey-editor .questionType ul li a.active {background: var(--feature2); color: #fff; }
.survey-editor .questionType ul li a i {width: 25px; font-size: 1.25em;  }

@media screen and (max-width: 600px) {
	.survey-editor .questionType {padding-top: 14px; padding-botom: 14px;}
	.survey-editor .questionType ul {width: 170px;}
	.survey-editor .questionType label {display:none;}
	.survey-editor .questionType > div:after {width: 8px; height: 8px; right: 10px; }
	.survey-editor .questionType > div i {font-size: 1.4em; }
	.survey-editor .questionType > div span {display: none; }

}



.help {font-size: 1.25em; vertical-align:middle; color: inherit;}

.survey-editor .intro {position: relative; margin: 30px 0; }
.survey-editor .intro-inner {position: relative; background: var(--sb-question-bg); padding: 0 15px; border-radius: 4px;}
.survey-editor .intro-inner .intro-title {font-size: 1.25em; font-weight: 600; margin: 15px 0;}
.survey-editor .intro-inner:before {content: ""; position: relative; display:block; margin-bottom: 20px; padding-top: 1px; }
.survey-editor .intro-inner:after {content: ""; position: relative; display:block; margin-top: 15px; padding-bottom: 1px; }

.survey-editor .intro .personal-information {margin: 1em 0}
.survey-editor .intro .intro_active {display:none;}
.survey-editor .intro.active .intro_static {display:none;}
.survey-editor .intro.active .intro_active {display:block;}


.survey-editor .intro .pig  {margin: 15px 0;}
.survey-editor .intro .pig > .conditional  {display: none; }
.survey-editor .intro .pig.active > .conditional  {display: block; padding-left: 32px; }


.survey-editor .intro .pi .conditional {padding-left: 32px;}
.survey-editor .intro .pi .conditional {display:none;}
.survey-editor .intro .pi.active.required .conditional {display: block;}
.survey-editor .intro .pi .switch {display:none;}
.survey-editor .intro .pi.active .switch {display:flex;}
.survey-editor .intro .checkbox label {font-weight: 400;}

.survey-editor .checkbox {margin: 5px 0;}
.survey-editor .checkbox label {display: flex; position: relative; align-items: center; justify-content: left; gap: 7px; cursor: pointer; font-weight: 600;}
.survey-editor .checkbox label .field-description {font-weight: 400;}
.survey-editor .checkbox label input[type=checkbox] {position: absolute; opacity: 0; pointer-events: none; }
.survey-editor .checkbox label i {position: relative; display: block; width: 22px; height: 22px; border: 1px solid var(--borders-input); background: #fff; }
.survey-editor .checkbox.checked label i:after {content: ""; position: absolute; top: 50%; left: 50%; margin-left: -7px; margin-top: -5px; width: 14px; height: 7px; box-sizing: border-box; border-bottom: 3px solid var(--text); border-left: 3px solid var(--text); transform: rotate(-45deg);}

/*
.survey-editor .consent {position: relative; margin: 30px 0; }
.survey-editor .consent-inner {position: relative; background: var(--sb-question-bg); padding: 0 20px; border-radius: 4px;}
.survey-editor .consent-inner:before {content: ""; position: relative; display:block; margin-bottom: 20px; padding-top: 1px; }
.survey-editor .consent-inner:after {content: ""; position: relative; display:block; margin-top: 20px; padding-bottom: 1px; }
.survey-editor .consent .consent_active {display:none;}
.survey-editor .consent.active .consent_static {display:none;}
.survey-editor .consent.active .consent_active {display:block;}
*/

.survey-editor .questions-none {border: 2px solid var(--sb-question-borders); padding: 30px 0; text-align: center;}
.survey-editor .questions-none a {position: relative; display: flex; gap: 10px; align-items: center; justify-content: center; color: var(--button-bg); font-weight: 600;;}
.survey-editor .questions-none a i {position: relative; display: inline-block; padding: 15px 0; width: 30px; height: 0; line-height: 0; text-align: center; border-radius: 50%; background: var(--button-bg); color: var(--button-text); transition: 0.3s;}
.survey-editor .questions-none a i:before {content:""; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; margin-top: -1px; margin-left: -7px; background: var(--button-text);}
.survey-editor .questions-none a i:after {content:""; position: absolute; left: 50%; top: 50%; width: 2px; height: 14px; margin-top: -7px; margin-left: -1px; background: var(--button-text);}
.survey-editor .questions-none a:hover i {background: color-mix(in srgb, var(--button-bg) 70%, black);}

.survey-editor .question {position: relative; }


.survey-editor .question:last-child .merge-button {display: none;}
.survey-editor .question .merge-button {position: relative; cursor:pointer; font-size: 13px; }
.survey-editor .question .merge-button i {display: block; width: 50px; margin: 0 auto; padding: 20px 0; line-height: 0; text-align: center; color: #ccc }
.survey-editor .question .merge-button b {display: none; width: 50px; margin: 0 auto; padding: 20px 0; line-height: 0; text-align: center; color: var(--feature2); background: var(--sb-question-bg); }

.survey-editor .question.merged .merge-button i {display: none;}
.survey-editor .question.merged .merge-button b {display: block;}

.survey-editor .question-inner {position: relative; background: var(--sb-question-bg); padding: 0 15px; border-radius: 4px;  }
.survey-editor .question-inner:before {content: ""; position: relative; display:block; margin-bottom: 30px; padding-top: 1px; }
.survey-editor .question-inner:after {content: ""; position: relative; display:block; margin-top: 15px; padding-bottom: 1px; }

.survey-editor .question .question_active {display:none;}
.survey-editor .question.active .question_static {display:none;}
.survey-editor .question.active .question_active {display:block;}
.survey-editor .question.active .label {box-sizing: border-box; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.survey-editor .question.active label {box-sizing: border-box; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.survey-editor .question .question-number {position: absolute; top: -15px; left: 15px; width: 30px; height: 0; padding: 15px 0; line-height: 0; text-align: center; font-weight: 700; background: var(--feature); color: #fff; border-radius: 50%;}
.survey-editor .question.active .question-number {background: var(--feature2); }
.survey-editor .question_static .error-message {display:block!important;}

.survey-editor .question .option-group {position: relative; margin: 10px 0 20px 0;}
.survey-editor .question .option-group .label {font-weight: 600;}
.survey-editor .question .option-group .options {position: relative; margin: 5px 0; }
.survey-editor .question .option-group .options .option {position: relative; display:flex; gap: 5px; align-items: center; justify-content: center; margin: 0; padding: 5px 0; }
.survey-editor .question .option-group .options .option > div {flex-grow: 1; background: #fff;}
.survey-editor .question .option-group .options .option select {display:none; }
.survey-editor .question .option-group .options.goto .option select {display:block; flex-grow: 0; flex-shrink: 0; background: #fff; width: 28%; }
.survey-editor .question .option-group .options .option > a { flex-grow: 0; flex-shrink: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #888; font-size: 20px; }
.survey-editor .question .option-group .options .option > a:focus {border: none; outline: none; }
.survey-editor .question .option-group .options .option > a:hover {color: #000; }
.survey-editor .question .option-group .options .option > a:focus {color: var(--feature2); }
.survey-editor .question .option-group .options .option > a.image {font-size: 30px; width: 50px; }
.survey-editor .question .option-group .options .option > a.image.thumb {border: 1px solid #ccc; height: 45px;position: relative; background: url("../_IMG/trans_sm.gif");}
.survey-editor .question .option-group .options .option > a.image.thumb img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain;}
.survey-editor .question .option-group .options .option > a.image:before {}
.survey-editor .question .option-group .options .option > a.image.thumb:before {display: none;}

.survey-editor .question .option-group .options .option.dragging {z-index: 100;}
.survey-editor .question .option-group .options .option.dragging input {box-shadow: 0px 2px 4px 1px rgba(0,0,0,0.25);}
.survey-editor .question .option-group .options .options-none {padding: 30px 0; text-align: center; color: #888; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; font-size: 13px;  }
.survey-editor .question .option-group .addOption {margin: 5px 0; text-align: center;}
.survey-editor .question .option-group .addOption a {display: inline-block; position: relative; padding: 6px; font-size: 20px; width: 30px; height: 0; line-height: 0; padding: 15px 0; text-align: center; border-radius: 50%; background: var(--button-bg); color: var(--button-text); transition: 0.3s;}
.survey-editor .question .option-group .addOption a:before {content:""; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; margin-top: -1px; margin-left: -7px; background: var(--button-text);}
.survey-editor .question .option-group .addOption a:after {content:""; position: absolute; left: 50%; top: 50%; width: 2px; height: 14px; margin-top: -7px; margin-left: -1px; background: var(--button-text);}
.survey-editor .question .option-group .addOption a:hover {background: color-mix(in srgb, var(--button-bg) 70%, black);}

.survey-editor .question .validation {margin: 10px 0;}
.survey-editor .question .validation .validation-top {display:flex; align-items: center; gap: 20px;}
.survey-editor .question .validation .validation-nav {display: inline-block; width: 20px; height: 30px; background: url("../_IMG/icon-dots.svg") center no-repeat; opacity: 0.7; cursor: pointer; transition: all 0.3s;}
.survey-editor .question .validation .validation-nav:hover {opacity: 1;}
.survey-editor .question .validation .validation-nav.active {transform:rotate(90deg);}
.survey-editor .question .validation .validation-advanced {position: relative; height: 0; overflow:hidden;}
.survey-editor .question .validation .validation-advanced > div {position: absolute; left: 0; bottom: 0; width: 100%; padding-bottom: 1px;}
.survey-editor .question .validation .validation-advanced > div :first-child {margin-top: 0;}
.survey-editor .question .validation .validation-advanced > div :last-child {margin-bottom: 0;}
.survey-editor .question .validation .validation-advanced.active {height: auto; overflow: visible;}
.survey-editor .question .validation .validation-advanced.active > div {position: relative;}

.survey-editor .question .switches {display:flex; align-items: center; gap: 15px; margin-top: 20px; }
@media screen and (max-width: 550px) {
	.survey-editor .question .switches {flex-direction: column; align-items: flex-start; gap: 10px; }
	.survey-editor .question .switches .switch:first-child {order: 10;}
	
}
.survey-editor .question .question-bottom {display:flex; align-items: center; justify-content: flex-end; margin: 10px -5px 0 -5px; padding-top: 10px; border-top: 1px solid #ccc;}
.survey-editor .question .question-bottom a {display:block; padding: 2px 8px; font-size: 28px; color: #888; }
.survey-editor .question .question-bottom a:hover {color: #000; }
.survey-editor .question .question-bottom a:focus {color: var(--feature2); }

.tabs {display:flex; align-items: center; gap: 5px; margin: 20px 0; }
.tabs > div  {font-weight: 600; width: 50%; color: var(--feature);}

.uploadForm {display: none;}



.imagePreview {}
.imagePreview .imageContainer {position: relative; width: 100%; height: 0; padding-bottom: 56%; background-image: url("../_IMG/trans.gif"); border: 1px solid #ccc;}
.imagePreview .imageContainer img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain;}
.imagePreview .buttons {display: flex; gap: 10px; margin-top: 20px; }
.imagePreview .buttons a {display: block; width: 50%; padding: 5px; color: var(--button-text); background: var(--button-bg); text-align: center; }
.imagePreview .buttons a:hover {background: color-mix(in srgb, var(--button-bg) 70%, black);}

.upload-progress { position: fixed; display:flex; align-items: center; justify-content: center; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.45); z-index: 300; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);; }
.upload-progress .inner {position: relative; padding: 10px 20px 15px 20px; background: #fff; border-radius: 4px;}
.upload-progress .inner .bar {position: relative; background: #ddd; width: 200px; height: 12px; border: 1px solid #ccc; border-radius: 4px; margin-top: 3px;}
.upload-progress .inner .bar i {position: absolute; left: 0; top: 0; height: 100%; width: 0; background: var(--feature); }
.upload-progress .inner .bar i:after {
	content: "";
	position: absolute;
	top: 0; left: 0; bottom: 0; right: 0;
	background-image:
		linear-gradient(
		  -45deg,
		  rgba(255, 255, 255, .15) 25%,
		  transparent 25%,
		  transparent 50%,
		  rgba(255, 255, 255, .15) 50%,
		  rgba(255, 255, 255, .15) 75%,
		  transparent 75%,
		  transparent
	   );
	z-index: 1;
	background-size: 40px 40px;
	animation: progress 2s linear infinite;
}
.upload-progress .inner .bar.complete i {width: 100%!important;}
.upload-progress .inner .bar.complete i:after{display:none;}
.upload-progress .inner .bar.error i{ width: 100%!important; background: var(--error);}
.upload-progress .inner .bar.error i:after{display:none;}
@keyframes progress {
	0% {background-position: 40px 40px;}
	100% {background-position: 0 0;}
}

.progress {display: block; margin: 1em 0; }
.progress .bar {position: relative; background: #ddd; height: 12px; border: 1px solid #ccc; border-radius: 4px; margin-top: 3px; overflow: hidden;}
.progress .bar i {position: absolute; left: 0; top: 0; height: 100%; width: 0; background: var(--feature); }
.progress .bar i:after {
	content: "";
	position: absolute;
	top: 0; left: 0; bottom: 0; right: 0;
	background-image:
		linear-gradient(
		  -45deg,
		  rgba(255, 255, 255, .15) 25%,
		  transparent 25%,
		  transparent 50%,
		  rgba(255, 255, 255, .15) 50%,
		  rgba(255, 255, 255, .15) 75%,
		  transparent 75%,
		  transparent
	   );
	z-index: 1;
	background-size: 40px 40px;
	animation: progress 2s linear infinite;
}
.progress .bar.complete i {width: 100%!important;}
.progress .bar.complete i:after{display:none;}

.grecaptcha-badge {z-index: 1001;}



/* themes */
.theme-font_poppins {font-family: 'Poppins', sans-serif;}
.theme-font_fira {font-family: 'Fira Sans', sans-serif;}
.theme-font_mali {font-family: 'Mali', cursive; font-size: 1.1rem;}
.theme-font_merriweather {font-family: 'Merriweather', serif;}
.theme-font_playfair {font-family: 'Playfair Display', serif;}
.theme-font_kalam {font-family: 'Kalam', cursive; font-size: 1.12rem; line-height: 1.15;}

.theme-font_poppins .theme-font_poppinsb, .theme-font_poppins h1, .theme-font_poppins h2, .theme-font_poppins h3, .theme-font_poppins h4, .theme-font_poppins strong {font-weight: 600;}
.theme-font_fira b, .theme-font_fira h1, .theme-font_fira h2, .theme-font_fira h3, .theme-font_fira h4, .theme-font_fira strong {font-weight: 700;}
.theme-font_mali b, .theme-font_mali h1, .theme-font_mali h2, .theme-font_mali h3, .theme-font_mali h4, .theme-font_mali strong {font-weight: 700;}
.theme-font_merriweather b, .theme-font_merriweather h1, .theme-font_merriweather h2, .theme-font_merriweather h3, .theme-font_merriweather h4, .theme-font_merriweather strong {font-weight: 700;}
.theme-font_playfair .theme-font_playfairb, .theme-font_playfairh1, .theme-font_playfairh2, .theme-font_playfairh3, .theme-font_playfairh4, .theme-font_playfairstrong {font-weight: 700;}
.theme-font_kalam b, .theme-font_kalam h1, .theme-font_kalam h2, .theme-font_kalam h3, .theme-font_kalam h4, .theme-font_kalam strong {font-weight: 700;}

.theme-bg_1 {background-color: #ffffff;}
.theme-bg_2 {background-color: #e6e6eb;}
.theme-bg_3 {background-color: #edf0ed;}
.theme-bg_4 {background-color: #f0eded;}
.theme-bg_5 {background-color: #f9e4e4;}
.theme-bg_6 {background-color: #e4f7f9;}


.survey-builder .palette a.theme-accent_blue {background-color: var(--feature2);}

.survey-builder .palette a.theme-accent_navy {background-color: var(--accent_navy);}
.survey-container.theme-accent_navy .button {background-color: var(--accent_navy); color: #fff;}
.survey-container.theme-accent_navy .button:hover {background-color: color-mix(in srgb, var(--accent_navy) 70%, black);}
.survey-container.theme-accent_navy .survey-progress i {background-color: var(--accent_navy); }
.survey-container.theme-accent_navy a {color: var(--accent_navy); }
.survey-container.theme-accent_navy .radios .radio.checked i:after {background-color: var(--accent_navy); }
.survey-container.theme-accent_navy .checkbox.checked i:after {border-color: var(--accent_navy); }
.survey-container.theme-accent_navy .score label.checked {background-color: var(--accent_navy); border-color: var(--accent_navy);  }
.survey-container.theme-accent_navy .slider-container .slider .slide.complete:after {background-color: var(--accent_navy); }
.survey-container.theme-accent_navy .slider-container .slider .slide.complete:before {background-color: var(--accent_navy); }
.survey-container.theme-accent_navy .matrix-container label i:after {background: var(--accent_navy);}
.survey-container.theme-accent_navy .group-container .options.over {border-color: var(--accent_navy); outline-color: var(--accent_navy); }
.survey-container.theme-accent_navy .group-container .groups .group.over {border-color: var(--accent_navy); outline-color: var(--accent_navy); }
.survey-container.theme-accent_navy select:focus, .survey-container.theme-accent_navy input[type='text']:focus, .survey-container.theme-accent_navy input[type='number']:focus, .survey-container.theme-accent_navy input[type='password']:focus, .survey-container.theme-accent_navy textarea:focus {outline-color: var(--accent_navy); border-color: var(--accent_navy); }
.survey-container.theme-accent_navy .form .searchList-container.active .searchList-opener .searchList-result ul li.active a {background: var(--accent_navy);}
.survey-container.theme-accent_navy .form .searchList-container.active .searchList-opener .searchList-result ul li a:hover {background: var(--accent_navy);}

.survey-builder .palette a.theme-accent_yellow {background-color: var(--accent_yellow);}
.survey-container.theme-accent_yellow .button {background-color: var(--accent_yellow); color: #fff;}
.survey-container.theme-accent_yellow .button:hover {background-color: color-mix(in srgb, var(--accent_yellow) 70%, black);}
.survey-container.theme-accent_yellow .survey-progress i {background-color: var(--accent_yellow); }
.survey-container.theme-accent_yellow a {color: var(--accent_yellow); }
.survey-container.theme-accent_yellow .radios .radio.checked i:after {background-color: var(--accent_yellow); }
.survey-container.theme-accent_yellow .checkbox.checked i:after {border-color: var(--accent_yellow); }
.survey-container.theme-accent_yellow .score label.checked {background-color: var(--accent_yellow); border-color: var(--accent_yellow);  }
.survey-container.theme-accent_yellow .slider-container .slider .slide.complete:after {background-color: var(--accent_yellow); }
.survey-container.theme-accent_yellow .slider-container .slider .slide.complete:before {background-color: var(--accent_yellow); }
.survey-container.theme-accent_yellow .matrix-container label i:after {background: var(--accent_yellow);}
.survey-container.theme-accent_yellow .group-container .options.over {border-color: var(--accent_yellow); outline-color: var(--accent_yellow); }
.survey-container.theme-accent_yellow .group-container .groups .group.over {border-color: var(--accent_yellow); outline-color: var(--accent_yellow); }
.survey-container.theme-accent_yellow select:focus, .survey-container.theme-accent_yellow input[type='text']:focus, .survey-container.theme-accent_yellow input[type='number']:focus, .survey-container.theme-accent_yellow input[type='password']:focus, .survey-container.theme-accent_yellow textarea:focus {outline-color: var(--accent_yellow); border-color: var(--accent_yellow); }
.survey-container.theme-accent_yellow .form .searchList-container.active .searchList-opener .searchList-result ul li.active a {background: var(--accent_yellow);}
.survey-container.theme-accent_yellow .form .searchList-container.active .searchList-opener .searchList-result ul li a:hover {background: var(--accent_yellow);}

.survey-builder .palette a.theme-accent_green {background-color: var(--accent_green);}
.survey-container.theme-accent_green .button {background-color: var(--accent_green); color: #fff;}
.survey-container.theme-accent_green .button:hover {background-color: color-mix(in srgb, var(--accent_green) 70%, black);}
.survey-container.theme-accent_green .survey-progress i {background-color: var(--accent_green); }
.survey-container.theme-accent_green a {color: var(--accent_green); }
.survey-container.theme-accent_green .radios .radio.checked i:after {background-color: var(--accent_green); }
.survey-container.theme-accent_green .checkbox.checked i:after {border-color: var(--accent_green); }
.survey-container.theme-accent_green .score label.checked {background-color: var(--accent_green); border-color: var(--accent_green);  }
.survey-container.theme-accent_green .slider-container .slider .slide.complete:after {background-color: var(--accent_green); }
.survey-container.theme-accent_green .slider-container .slider .slide.complete:before {background-color: var(--accent_green); }
.survey-container.theme-accent_green .matrix-container label i:after {background: var(--accent_green);}
.survey-container.theme-accent_green .group-container .options.over {border-color: var(--accent_green);  outline-color: var(--accent_green); }
.survey-container.theme-accent_green .group-container .groups .group.over {border-color: var(--accent_green); outline-color: var(--accent_green); }
.survey-container.theme-accent_green select:focus, .survey-container.theme-accent_green input[type='text']:focus, .survey-container.theme-accent_green input[type='number']:focus, .survey-container.theme-accent_green input[type='password']:focus, .survey-container.theme-accent_green textarea:focus {outline-color: var(--accent_green); border-color: var(--accent_green); }
.survey-container.theme-accent_green .form .searchList-container.active .searchList-opener .searchList-result ul li.active a {background: var(--accent_green);}
.survey-container.theme-accent_green .form .searchList-container.active .searchList-opener .searchList-result ul li a:hover {background: var(--accent_green);}

.survey-builder .palette a.theme-accent_orange {background-color: var(--accent_orange);}
.survey-container.theme-accent_orange .button {background-color: var(--accent_orange); color: #fff;}
.survey-container.theme-accent_orange .button:hover {background-color: color-mix(in srgb, var(--accent_orange) 70%, black);}
.survey-container.theme-accent_orange .survey-progress i {background-color: var(--accent_orange); }
.survey-container.theme-accent_orange a {color: var(--accent_orange); }
.survey-container.theme-accent_orange .radios .radio.checked i:after {background-color: var(--accent_orange); }
.survey-container.theme-accent_orange .checkbox.checked i:after {border-color: var(--accent_orange); }
.survey-container.theme-accent_orange .score label.checked {background-color: var(--accent_orange); border-color: var(--accent_orange); }
.survey-container.theme-accent_orange .slider-container .slider .slide.complete:after {background-color: var(--accent_orange); }
.survey-container.theme-accent_orange .slider-container .slider .slide.complete:before {background-color: var(--accent_orange); }
.survey-container.theme-accent_orange .matrix-container label i:after {background: var(--accent_orange);}
.survey-container.theme-accent_orange .group-container .options.over {border-color: var(--accent_orange); outline-color: var(--accent_orange); }
.survey-container.theme-accent_orange .group-container .groups .group.over {border-color: var(--accent_orange); outline-color: var(--accent_orange); }
.survey-container.theme-accent_orange select:focus, .survey-container.theme-accent_orange input[type='text']:focus, .survey-container.theme-accent_orange input[type='number']:focus, .survey-container.theme-accent_orange input[type='password']:focus, .survey-container.theme-accent_orange textarea:focus {outline-color: var(--accent_orange); border-color: var(--accent_orange); }
.survey-container.theme-accent_orange .form .searchList-container.active .searchList-opener .searchList-result ul li.active a {background: var(--accent_orange);}
.survey-container.theme-accent_orange .form .searchList-container.active .searchList-opener .searchList-result ul li a:hover {background: var(--accent_orange);}

.survey-builder .palette a.theme-accent_purple {background-color: var(--accent_purple);}
.survey-container.theme-accent_purple .button {background-color: var(--accent_purple); color: #fff;}
.survey-container.theme-accent_purple .button:hover {background-color: color-mix(in srgb, var(--accent_purple) 70%, black);}
.survey-container.theme-accent_purple .survey-progress i {background-color: var(--accent_purple); }
.survey-container.theme-accent_purple a {color: var(--accent_purple); }
.survey-container.theme-accent_purple .radios .radio.checked i:after {background-color: var(--accent_purple); }
.survey-container.theme-accent_purple .checkbox.checked i:after {border-color: var(--accent_purple); }
.survey-container.theme-accent_purple .score label.checked {background-color: var(--accent_purple); border-color: var(--accent_purple); }
.survey-container.theme-accent_purple .slider-container .slider .slide.complete:after {background-color: var(--accent_purple); }
.survey-container.theme-accent_purple .slider-container .slider .slide.complete:before {background-color: var(--accent_purple); }
.survey-container.theme-accent_purple .matrix-container label i:after {background: var(--accent_purple);}
.survey-container.theme-accent_purple .group-container .options.over {border-color: var(--accent_purple); outline-color: var(--accent_purple); }
.survey-container.theme-accent_purple .group-container .groups .group.over {border-color: var(--accent_purple); outline-color: var(--accent_purple); }
.survey-container.theme-accent_purple select:focus, .survey-container.theme-accent_purple input[type='text']:focus, .survey-container.theme-accent_purple input[type='number']:focus, .survey-container.theme-accent_purple input[type='password']:focus, .survey-container.theme-accent_purple textarea:focus {outline-color: var(--accent_purple); border-color: var(--accent_purple); }
.survey-container.theme-accent_purple .form .searchList-container.active .searchList-opener .searchList-result ul li.active a {background: var(--accent_purple);}
.survey-container.theme-accent_purple .form .searchList-container.active .searchList-opener .searchList-result ul li a:hover {background: var(--accent_purple);}