@import "normalize-opentype.css";
@import url('/assets/css/themes/fonts/styles/montserrat.css');

h1, h2, h3,
html, body, table {
	-webkit-font-feature-settings: inherit;
	-moz-font-feature-settings: inherit;
	font-feature-settings: inherit;
}

BODY {
	background: #fff;
	padding:0;
	min-width:100%;
	font-size: 1.125rem;
}

MAIN.ui.grid {
	width:100%;
	min-height:100%;
	margin:0 0 !important;
	padding:15px 15px 25px 15px !important;
}

#home {
	 max-width:250px;
}

#poll {
	 max-width: 1520px;
}
#poll.single H3 {
	line-height:1.2em;
}
#poll.multi H3 {
	line-height:1.2em;
	margin-bottom:-.2em;
}
#poll.single .confirm {
	margin-top:1.2em;
}
#poll.multi .confirm {
	margin-top:2.4em;
}
#poll.multi H4 {
	line-height:1.2em;
	margin-bottom:.2em;
}
#poll A.separate_button {
	margin-top:.5em;
}


#results {
	position:absolute;
	top:7%;
	left:5%;
	bottom:7%;
	right:5%;
	width:auto;
	padding:0;
    display: flex;
    flex-direction: row;
}
#container {
	position:relative;
	align-self: center;
	width:100%;
}

#results H1 {
	font-size:3.8em;
	margin:-.3em 0 1.2em 0;
    line-height: 1.1em;
}
#results P {
	text-align:left;
	font-size:3.6em;
	line-height: 1.2em;
	margin: .7em 0 .4em 0;
}
#results .ui.progress {
    margin:0;
}
#results .ui.progress .bar {
	min-width:5em;
}
#results .ui.progress .bar>.progress {
	font-size:2em;
    line-height:.94em;
    color:rgba(255,255,255,.9)
}
#results .ui.progress[data-percent="0"] .bar .progress {
	color:rgba(0,0,0,.4);

}
#results .statistic .value {
    font-size: 18rem;
    font-weight: bold;
}

@media only screen and (max-width: 340px) {
	HTML {
		font-size:4.1vw;
	}
}


#results TABLE.multiresults {
	margin: 0 auto;
	font-size: 3.2em;
}
#results TABLE.multiresults TD {
	padding-left: 1em;
	padding-right: 1em;
	line-height: 1em;
}
#results TABLE.multiresults TD.value {
	text-align: center;	
	font-weight:bold;
}
#results TABLE.multiresults TD.summary {
	font-weight:bold;
	font-size: 1.16em;
}

@media only screen and (max-width: 470px) {
  .ui.button.answer {
    padding: 0.78571429em 1em 0.78571429em;
  }
}

#home #mediator {
	margin: 3em 0 0 0;
}


/* New */

::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}

::-webkit-scrollbar-track {
	background-color: #F6F6F6;
}

::-webkit-scrollbar-thumb {
	background-color: #00CFC3;
	border-radius: 5px;
}

::-webkit-scrollbar-thumb:active {
	background: #a7a7a7;
}

::selection {
	background: #00CFC3;
	color: #006862;
}

html {
	scrollbar-width: thin;
	scrollbar-color: #00CFC3 #F6F6F6;
	scroll-behavior: smooth;
}
html * {
	scrollbar-width: thin;
	scrollbar-color: #00CFC3 #F6F6F6;
}

#poll .ui.divider:not(.vertical):not(.horizontal) {
	border-top: none;
	border-bottom: 1px solid rgba(55, 55, 55, 0.1);
	margin: 40px 0;
}

#poll {
	padding: 1rem 10px 2rem;
}

#poll .ui.green.header {
	color: #00CFC3;
}

#poll p {
	font-size: 1.125rem;
}

#poll .ui.button {
	position: relative;
	max-width: fit-content;
	min-width: 300px;
	font-size: 1.125rem;
	text-transform: none;
	background: #efefef;
	color: #989898;
	border-radius: 5px;
	padding: 12px 20px;
	transition: .3s all ease-in-out;
	overflow: hidden;
	z-index: 1;
	margin: 5px auto 0;
}

#poll .ui.button:first-child {
	margin-top: 0;
}

#poll .ui.button:hover {
	background: #e8e8e8;
}

#poll .ui.button::before,
#poll .ui.button::after {
	background: rgba(255, 255, 255, 0.02);
	background: -webkit-linear-gradient(90deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
	background: -moz-linear-gradient(90deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
	background: -ms-linear-gradient(90deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
	background: -o-linear-gradient(90deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
	background: linear-gradient(90deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
	-webkit-transform: translateX(-120%);
	-moz-transform: translateX(-120%);
	-ms-transform: translateX(-120%);
	-o-transform: translateX(-120%);
	transform: translateX(-120%);
	transition: all 0.6s ease;
	-webkit-box-shadow: 0 0 20px rgba(255, 255, 255, 0.02);
	-moz-box-shadow: 0 0 20px rgba(255, 255, 255, 0.02);
	-ms-box-shadow: 0 0 20px rgba(255, 255, 255, 0.02);
	-o-box-shadow: 0 0 20px rgba(255, 255, 255, 0.02);
	box-shadow: 0 0 20px rgba(255, 255, 255, 0.02);
	position: absolute;
	content: "";
	top: 0;
	left: 0;
	width: 80%;
	height: 100%;
	border-radius: 5px;
	pointer-events: none;
	z-index: -1;
}

#poll .ui.button:hover::before,
#poll .ui.button:hover::after {
	-webkit-transform: translateX(200%);
	-moz-transform: translateX(200%);
	-ms-transform: translateX(200%);
	-o-transform: translateX(200%);
	transform: translateX(200%);
}

#poll .ui.button.big {
	height: 45px;
	min-width: 45px;
	max-width: 45px;
	padding: 15px 10px 12px;
}

#poll .ui.button.positive {
	background: #00CFC3;
	color: #006862;
}

#poll .ui.button.positive:hover {
	background: #00ded1;
}

#poll .ui.button.grey.confirm {
	background-image: linear-gradient(to left, #00A8B2 0%, #0CFFE2 50%, #00A8B2 100%);
	background-size: 200% auto;
	color: #006862;
	text-transform: uppercase;
	padding: 15px 20px 14px;
	margin-top: 10px;
}

#poll .ui.button.grey.confirm:hover {
	background-position: right center;
	color: #006862;
}

#poll .ui.button.grey.confirm:focus,
.ui.button.grey.confirm:active {
	color: #006862;
}

#poll #poll br + .ui.button {
	margin-top: 10px;
}

#poll #poll:has(.ui.button.big) {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	align-content: flex-start;
}

#poll:has(.ui.button.big) p:last-child,
#poll h1,
#poll h2,
#poll h3,
#poll h4,
#poll h5,
#poll h5,
#poll p:last-child {
	width: 100%;
}

#poll p:last-child .ui.button {
	margin: 10px auto 0 !important;
}

#poll .ui.button.grey.confirm {
	margin-top: 20px !important;
}

#poll h1,
#poll h1.ui.header {
	font-size: 2.5rem;
}
@media only screen and (max-width: 767px) {
	#poll h1,
	#poll h1.ui.header {
		font-size: 2rem;
	}
}

#poll h1.ui.header .sub.header {
	font-size: 2.2rem;
}
@media only screen and (max-width: 767px) {
	h1.ui.header .sub.header {
		font-size: 1.8rem;
	}
}

#poll h2,
#poll h2.ui.header {
	font-size: 2.15rem;
}
@media only screen and (max-width: 767px) {
	#poll h2,
	#poll h2.ui.header {
		font-size: 1.85rem;
	}
}

#poll h2.ui.header .sub.header {
	font-size: 1.75rem;
}
@media only screen and (max-width: 767px) {
	#poll h2.ui.header .sub.header {
		font-size: 1.45rem;
	}
}

#poll h3,
#poll h3.ui.header {
	font-size: 1.9rem;
	margin-bottom: 15px;
}
@media only screen and (max-width: 767px) {
	#poll h3,
	#poll h3.ui.header {
		font-size: 1.6rem;
	}
}

#poll h3.ui.header .sub.header {
	font-size: 1.5rem;
}
@media only screen and (max-width: 767px) {
	#poll h3.ui.header .sub.header {
		font-size: 1.2rem;
	}
}

#poll h4,
#poll h4.ui.header {
	font-size: 1.625rem;
}
@media only screen and (max-width: 767px) {
	#poll h4,
	#poll h4.ui.header {
		font-size: 1.325rem;
	}
}

#poll h4.ui.header .sub.header {
	font-size: 1.225rem;
}
@media only screen and (max-width: 767px) {
	#poll h4.ui.header .sub.header {
		font-size: 0.925rem;
	}
}

#poll h5,
#poll h5.ui.header {
	font-size: 1.4rem;
}
@media only screen and (max-width: 767px) {
	#poll h5,
	#poll h5.ui.header {
		font-size: 1.1rem;
	}
}

#poll h5.ui.header .sub.header {
	font-size: 1rem;
}
@media only screen and (max-width: 767px) {
	#poll h5.ui.header .sub.header {
		font-size: 0.7rem;
	}
}


#poll.multi p:last-child .ui.button.big,
#poll.multi p:last-child .ui.button.big {
	height: auto;
	min-width: 300px;
	max-width: none;
}

#poll.multi h4 + .ui.button.big {
	margin-top: 0 !important;
}

#poll:has(.ui.button.big) .ui.button {

}

#poll:has(.ui.button.big) h4 + .ui.button {
	margin-top: 0 !important;
}

#poll h3 + h4 {
	margin-top: 10px;
}

#poll .ui.divider {
	width: 100%;
}


body.poll.grid_row #poll {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	justify-content: center;
	flex-wrap: wrap;
}

body.poll.grid_row #poll h3.ui.header,
body.poll.grid_row #poll p:last-child {
	width: 100%;
}

body.poll.grid_row #poll h4 + .ui.button,
body.poll.grid_row #poll .ui.button {
	margin: 2px 5px !important;
}

body.poll.grid_row #poll p:last-child .ui.button {
	margin: 15px auto 0 !important;
}

body.poll.grid_row #poll:has(.ui.button.big) h3.ui.header,
body.poll.grid_row #poll:has(.ui.button.big) p:last-child,
body.poll.grid_row #poll.multi:has(.ui.button.big) h3.ui.header,
body.poll.grid_row #poll.multi:has(.ui.button.big) p:last-child {
	width: 100%;
}

body.poll.grid_row #poll:has(.ui.button.big) h4 + .ui.button,
body.poll.grid_row #poll:has(.ui.button.big) .ui.button,
body.poll.grid_row #poll.multi:has(.ui.button.big) h4 + .ui.button,
body.poll.grid_row #poll.multi:has(.ui.button.big) .ui.button {
	margin: 2px 5px !important;
}

body.poll.grid_row #poll:has(.ui.button.big) p:last-child .ui.button,
body.poll.grid_row #poll.multi:has(.ui.button.big) p:last-child .ui.button {
	margin: 15px auto 0 !important;
}

body.poll.grid_column #poll {
	display: block !important;
}

body.poll.grid_column #poll h4 + .ui.button,
body.poll.grid_column #poll .ui.button {
	margin: 5px auto 0 !important;
	width: max-content;
}

body.poll.grid_column #poll p:last-child .ui.button:not(.big) {
	margin: 15px auto 0 !important;
}

body.poll.grid_column #poll:has(.ui.button.big) .ui.button {
	margin: 5px auto 0 !important;
}

body.poll.grid_column #poll:has(.ui.button.big) h4 + .ui.button {
	margin: 15px auto 0 !important;
}

body.poll.grid_column #poll:has(.ui.button.big) p:last-child .ui.button {
	margin: 15px auto 0 !important;
}

body.poll.grid_column #poll.grid_column:has(.ui.button.big) p:last-child .ui.button,
body.poll.grid_column #poll.multi:has(.ui.button.big) p:last-child .ui.button {
	margin: 15px auto 0 !important;
}

body.poll.grid_column #poll .ui.button.big {
	position: relative;
	display: block;
}

body.poll.grid_column #poll .ui.button.big::after {
	position: relative;
	content: '';
	clear: both;
}



/* schemes */

html:has(body.black):root {
	--survey-accent: #1e1e1e;
	--survey-accent-txt: #fff;
	--survey-gradient-1: #484848;
	--survey-gradient-2: #181818;
}

html:has(body.blue):root {
	--survey-accent: #768cff;
	--survey-accent-txt: #21449E;
	--survey-gradient-1: #5BBAFF;
	--survey-gradient-2: #4A67FF;
}

html:has(body.cyan):root {
	--survey-accent: #70d3f3;
	--survey-accent-txt: #007D99;
	--survey-gradient-1: #6FEEFF;
	--survey-gradient-2: #39C4FF;
}

html:has(body.teal):root {
	--survey-accent: #37e997;
	--survey-accent-txt: #036558;
	--survey-gradient-1: #37e9c1;
	--survey-gradient-2: #2eeba7;
}

html:has(body.green):root {
	--survey-accent: #a0f742;
	--survey-accent-txt: #5C8800;
	--survey-gradient-1: #a0f742;
	--survey-gradient-2: #8ce100;
}

html:has(body.olive):root {
	--survey-accent: #afcf2b;
	--survey-accent-txt: #406a11;
	--survey-gradient-1: #c5cf2b;
	--survey-gradient-2: #a6c528;
}

html:has(body.orange):root {
	--survey-accent: #EF8F00;
	--survey-accent-txt: #9C4B00;
	--survey-gradient-1: #FFB03A;
	--survey-gradient-2: #F9851A;
}

html:has(body.red):root {
	--survey-accent: #ff4646;
	--survey-accent-txt: #801F00;
	--survey-gradient-1: #ff6039;
	--survey-gradient-2: #ff2c2c;
}

html:has(body.violet):root {
	--survey-accent: #ae77d8;
	--survey-accent-txt: #731AA9;
	--survey-gradient-1: #F972FC;
	--survey-gradient-2: #B24DFF;
}

html:has(body.purple):root {
	--survey-accent: #dd5ffd;
	--survey-accent-txt: #6A0683;
	--survey-gradient-1: #ec5ffd;
	--survey-gradient-2: #c045df;
}

html:has(body.pink):root {
	--survey-accent: #ff6c8f;
	--survey-accent-txt: #7c0925;
	--survey-gradient-1: #ff6ca7;
	--survey-gradient-2: #ff4873;
}

html:has(body.yellow):root {
	--survey-accent: #ffcf3c;
	--survey-accent-txt: #AA7A00;
	--survey-gradient-1: #FFF736;
	--survey-gradient-2: #F9C81A;
}

html:has(body.brown):root {
	--survey-accent: #c28157;
	--survey-accent-txt: #614939;
	--survey-gradient-1: #be7342;
	--survey-gradient-2: #cf803a;
}

html:has(body.grey):root {
	--survey-accent: #d0d0d0;
	--survey-accent-txt: #636363;
	--survey-gradient-1: #d0d0d0;
	--survey-gradient-2: #ababab;
}

::-webkit-scrollbar-track {
	background-color: transparent;
}

::-webkit-scrollbar-thumb {
	background-color: var(--survey-accent);
}

::-webkit-scrollbar-thumb:active {
	background: var(--survey-gradient-2);
}

html {
	scrollbar-color: var(--survey-accent) transparent;
}

html * {
	scrollbar-color: var(--survey-accent) transparent;
}

::selection {
	background: var(--survey-accent);
	color: var(--survey-accent-txt);
}

body.black #poll .ui.green.header,
body.blue #poll .ui.green.header,
body.cyan #poll .ui.green.header,
body.teal #poll .ui.green.header,
body.green #poll .ui.green.header,
body.olive #poll .ui.green.header,
body.orange #poll .ui.green.header,
body.red #poll .ui.green.header,
body.violet #poll .ui.green.header,
body.purple #poll .ui.green.header,
body.pink #poll .ui.green.header,
body.yellow #poll .ui.green.header,
body.brown #poll .ui.green.header,
body.grey #poll .ui.green.header,
body.custom.new_color #poll .ui.green.header {
	color: var(--survey-accent);
}
body.black #poll .ui.button.positive,
body.blue #poll .ui.button.positive,
body.cyan #poll .ui.button.positive,
body.teal #poll .ui.button.positive,
body.green #poll .ui.button.positive,
body.olive #poll .ui.button.positive,
body.orange #poll .ui.button.positive,
body.red #poll .ui.button.positive,
body.violet #poll .ui.button.positive,
body.purple #poll .ui.button.positive,
body.pink #poll .ui.button.positive,
body.yellow #poll .ui.button.positive,
body.brown #poll .ui.button.positive,
body.grey #poll .ui.button.positive,
body.custom.new_color #poll .ui.button.positive {
	background: var(--survey-accent);
	color: var(--survey-accent-txt);
}
body.black #poll .ui.button.positive:hover,
body.blue #poll .ui.button.positive:hover,
body.cyan #poll .ui.button.positive:hover,
body.teal #poll .ui.button.positive:hover,
body.green #poll .ui.button.positive:hover,
body.olive #poll .ui.button.positive:hover,
body.orange #poll .ui.button.positive:hover,
body.red #poll .ui.button.positive:hover,
body.violet #poll .ui.button.positive:hover,
body.purple #poll .ui.button.positive:hover,
body.pink #poll .ui.button.positive:hover,
body.yellow #poll .ui.button.positive:hover,
body.brown #poll .ui.button.positive:hover,
body.grey #poll .ui.button.positive:hover,
body.custom.new_color #poll .ui.button.positive:hover {
	background: var(--survey-gradient-2);
}
body.black #poll .ui.button.grey.confirm,
body.blue #poll .ui.button.grey.confirm,
body.cyan #poll .ui.button.grey.confirm,
body.teal #poll .ui.button.grey.confirm,
body.green #poll .ui.button.grey.confirm,
body.olive #poll .ui.button.grey.confirm,
body.orange #poll .ui.button.grey.confirm,
body.red #poll .ui.button.grey.confirm,
body.violet #poll .ui.button.grey.confirm,
body.purple #poll .ui.button.grey.confirm,
body.pink #poll .ui.button.grey.confirm,
body.yellow #poll .ui.button.grey.confirm,
body.brown #poll .ui.button.grey.confirm,
body.grey #poll .ui.button.grey.confirm,
body.custom.new_color #poll .ui.button.grey.confirm {
	background-image: linear-gradient(to left, var(--survey-gradient-2) 0%, var(--survey-gradient-1) 50%, var(--survey-gradient-2) 100%);
	background-size: 200% auto;
	color: var(--survey-accent-txt);
}
body.black #poll .ui.button.grey.confirm:hover,
body.blue #poll .ui.button.grey.confirm:hover,
body.cyan #poll .ui.button.grey.confirm:hover,
body.teal #poll .ui.button.grey.confirm:hover,
body.green #poll .ui.button.grey.confirm:hover,
body.olive #poll .ui.button.grey.confirm:hover,
body.orange #poll .ui.button.grey.confirm:hover,
body.red #poll .ui.button.grey.confirm:hover,
body.violet #poll .ui.button.grey.confirm:hover,
body.purple #poll .ui.button.grey.confirm:hover,
body.pink #poll .ui.button.grey.confirm:hover,
body.yellow #poll .ui.button.grey.confirm:hover,
body.brown #poll .ui.button.grey.confirm:hover,
body.grey #poll .ui.button.grey.confirm:hover,
body.custom.new_color #poll .ui.button.grey.confirm:hover {
	background-position: right center;
	color: var(--survey-accent-txt);
}
body.black #poll .ui.button.grey.confirm:focus, body.black #poll .ui.button.grey.confirm:active,
body.blue #poll .ui.button.grey.confirm:focus, body.blue #poll .ui.button.grey.confirm:active,
body.cyan #poll .ui.button.grey.confirm:focus, body.cyan #poll .ui.button.grey.confirm:active,
body.teal #poll .ui.button.grey.confirm:focus, body.teal #poll .ui.button.grey.confirm:active,
body.green #poll .ui.button.grey.confirm:focus, body.green #poll .ui.button.grey.confirm:active,
body.olive #poll .ui.button.grey.confirm:focus, body.olive #poll .ui.button.grey.confirm:active,
body.orange #poll .ui.button.grey.confirm:focus, body.orange #poll .ui.button.grey.confirm:active,
body.red #poll .ui.button.grey.confirm:focus, body.red #poll .ui.button.grey.confirm:active,
body.violet #poll .ui.button.grey.confirm:focus, body.violet #poll .ui.button.grey.confirm:active,
body.purple #poll .ui.button.grey.confirm:focus, body.purple #poll .ui.button.grey.confirm:active,
body.pink #poll .ui.button.grey.confirm:focus, body.pink #poll .ui.button.grey.confirm:active,
body.yellow #poll .ui.button.grey.confirm:focus, body.yellow #poll .ui.button.grey.confirm:active,
body.brown #poll .ui.button.grey.confirm:focus, body.brown #poll .ui.button.grey.confirm:active,
body.grey #poll .ui.button.grey.confirm:focus, body.grey #poll .ui.button.grey.confirm:active,
body.custom.new_color #poll .ui.button.grey.confirm:focus,
body.custom.new_color #poll .ui.button.grey.confirm:active {
	color: var(--survey-accent-txt);
}
body.custom #poll .ui.green.header {
	color: var(--main-color);
}
body.custom #poll .ui.button.positive {
	background: var(--main-color);
	color: var(--darkened-main-color);
}
body.custom #poll .ui.button.positive:hover {
	background: var(--gradient-2);
}
body.custom #poll .ui.button.grey.confirm {
	background-image: linear-gradient(to left, var(--gradient-2) 0%, var(--gradient-1) 50%, var(--gradient-2) 100%);
	background-size: 200% auto;
	color: var(--darkened-main-color);
}
body.custom #poll .ui.button.grey.confirm:hover {
	background-position: right center;
	color: var(--darkened-main-color);
}
body.custom #poll .ui.button.grey.confirm:focus, body.custom #poll .ui.button.grey.confirm:active {
	color: var(--darkened-main-color);
}