html {
	scroll-padding-top: 128px;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	font-family: 'Source Sans 3', sans-serif;
}

#top-menu {
	overflow-x: auto; overflow-y: hidden; display: flex; flex-grow: 1; gap: 40px; padding: 0 40px; align-items: center; justify-content: start; height: 64px
}
#top-menu::-webkit-scrollbar {
	display: none;
}

nav {
	max-width: 100vw;
}

body > div {
	max-width: 100vw;
}

pre {
	margin: 0;
}

.row {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	width: 100%;
}

.subtitle {
	padding: 0 16pt;
}
.title {
	padding: 0 16pt;
}

.smooth {
	scroll-behavior: smooth;
}

.row .col {
	position: relative;
	box-sizing: border-box;
}

a {
	color: white;
	text-decoration: none;
}

nav {
	height: 64px;
	position: fixed;
	width: 100%;
	z-index: 100;
}
nav ul li.link {
	padding: 0 16pt;
}

.center {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.right {
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

/* Media Query Classes */

@media only screen and (max-width: 600px) {
	.hide-on-small-only,
	.hide-on-small-and-down {
		display: none !important;
	}
	.center-on-small-only {
		width: 100%;
		text-align: center;
	}
}

@media only screen and (max-width: 992px) {
	.hide-on-med-and-down {
		display: none !important;
	}
	.center-on-med-and-down {
		text-align: center;
	}
}

@media only screen and (min-width: 601px) {
	.hide-on-med-and-up {
		display: none !important;
	}
}

@media only screen and (min-width: 600px) and (max-width: 992px) {
	.hide-on-med-only {
		display: none !important;
	}
}

@media only screen and (min-width: 993px) {
	.hide-on-large-only {
		display: none !important;
	}
	.right-on-large {
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}
}

@media only screen and (min-width: 1201px) {
	.hide-on-extra-large-only {
		display: none !important;
	}
}

@media only screen and (min-width: 1201px) {
	.show-on-extra-large {
		display: block !important;
	}
}

@media only screen and (min-width: 993px) {
	.show-on-large {
		display: block !important;
	}
}

@media only screen and (min-width: 600px) and (max-width: 992px) {
	.show-on-medium {
		display: block !important;
	}
}

@media only screen and (max-width: 600px) {
	.show-on-small {
		display: block !important;
	}
}

@media only screen and (min-width: 601px) {
	.show-on-medium-and-up {
		display: block !important;
	}
}

@media only screen and (max-width: 992px) {
	.show-on-medium-and-down {
		display: block !important;
	}
}

@media only screen and (max-width: 600px) {
	.center-on-small-only {
		text-align: center;
	}
}

/* Column system */

.row .col.s1 {
    width: 8.3333333333%;
    margin-left: auto;
    left: auto;
    right: auto
}

.row .col.s2 {
    width: 16.6666666667%;
    margin-left: auto;
    left: auto;
    right: auto
}

.row .col.s3 {
    width: 25%;
    margin-left: auto;
    left: auto;
    right: auto
}

.row .col.s4 {
    width: 33.3333333333%;
    margin-left: auto;
    left: auto;
    right: auto
}

.row .col.s5 {
    width: 41.6666666667%;
    margin-left: auto;
    left: auto;
    right: auto
}

.row .col.s6 {
    width: 50%;
    margin-left: auto;
    left: auto;
    right: auto
}

.row .col.s7 {
    width: 58.3333333333%;
    margin-left: auto;
    left: auto;
    right: auto
}

.row .col.s8 {
    width: 66.6666666667%;
    margin-left: auto;
    left: auto;
    right: auto
}

.row .col.s9 {
    width: 75%;
    margin-left: auto;
    left: auto;
    right: auto
}

.row .col.s10 {
    width: 83.3333333333%;
    margin-left: auto;
    left: auto;
    right: auto
}

.row .col.s11 {
    width: 91.6666666667%;
    margin-left: auto;
    left: auto;
    right: auto
}

.row .col.s12 {
    width: 100%;
    margin-left: auto;
    left: auto;
    right: auto
}

@media only screen and (min-width: 601px) {
    .row .col.m1 {
        width:8.3333333333%;
        margin-left: auto;
        left: auto;
        right: auto
    }

    .row .col.m2 {
        width: 16.6666666667%;
        margin-left: auto;
        left: auto;
        right: auto
    }

    .row .col.m3 {
        width: 25%;
        margin-left: auto;
        left: auto;
        right: auto
    }

    .row .col.m4 {
        width: 33.3333333333%;
        margin-left: auto;
        left: auto;
        right: auto
    }

    .row .col.m5 {
        width: 41.6666666667%;
        margin-left: auto;
        left: auto;
        right: auto
    }

    .row .col.m6 {
        width: 50%;
        margin-left: auto;
        left: auto;
        right: auto
    }

    .row .col.m7 {
        width: 58.3333333333%;
        margin-left: auto;
        left: auto;
        right: auto
    }

    .row .col.m8 {
        width: 66.6666666667%;
        margin-left: auto;
        left: auto;
        right: auto
    }

    .row .col.m9 {
        width: 75%;
        margin-left: auto;
        left: auto;
        right: auto
    }

    .row .col.m10 {
        width: 83.3333333333%;
        margin-left: auto;
        left: auto;
        right: auto
    }

    .row .col.m11 {
        width: 91.6666666667%;
        margin-left: auto;
        left: auto;
        right: auto
    }

    .row .col.m12 {
        width: 100%;
        margin-left: auto;
        left: auto;
        right: auto
    }
}

@media only screen and (min-width: 993px) {
    .row .col.l1 {
        width:8.3333333333%;
        margin-left: auto;
        left: auto;
        right: auto
    }

    .row .col.l2 {
        width: 16.6666666667%;
        margin-left: auto;
        left: auto;
        right: auto
    }

    .row .col.l3 {
        width: 25%;
        margin-left: auto;
        left: auto;
        right: auto
    }

    .row .col.l4 {
        width: 33.3333333333%;
        margin-left: auto;
        left: auto;
        right: auto
    }

    .row .col.l5 {
        width: 41.6666666667%;
        margin-left: auto;
        left: auto;
        right: auto
    }

    .row .col.l6 {
        width: 50%;
        margin-left: auto;
        left: auto;
        right: auto
    }

    .row .col.l7 {
        width: 58.3333333333%;
        margin-left: auto;
        left: auto;
        right: auto
    }

    .row .col.l8 {
        width: 66.6666666667%;
        margin-left: auto;
        left: auto;
        right: auto
    }

    .row .col.l9 {
        width: 75%;
        margin-left: auto;
        left: auto;
        right: auto
    }

    .row .col.l10 {
        width: 83.3333333333%;
        margin-left: auto;
        left: auto;
        right: auto
    }

    .row .col.l11 {
        width: 91.6666666667%;
        margin-left: auto;
        left: auto;
        right: auto
    }

    .row .col.l12 {
        width: 100%;
        margin-left: auto;
        left: auto;
        right: auto
    }
}


/* Specific classes */

a, .button, .text {
	font-family: 'Source Sans 3', sans-serif;
}

.button:hover {
	filter: brightness(0.8)
}

nav {
	background: #36213E;
	display: flex;
}

nav * {
	display: flex;
	align-items: center;
	justify-content: center;
}

nav li {
	font-family: 'Source Sans 3';
	font-size: 14px;
	height: 64px;
	white-space: nowrap;
}

.button {
	border: 2px solid #EDF2F4;
	border-radius: 24px;
	height: 38px;
	margin: 0 6pt;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	font-size: 14px;
	padding: 0 16px;
}
.button.disabled {
	background: #EDF2F4 !important;
	border: 2px solid #EDF2F4 !important;
	color: #554971 !important;
	pointer-events: none;
}
.button.red {
	background: #EF233C;
	border: 2px solid #EF233C;
	border-radius: 24px;
	color: #EDF2F4;
}
.button.get-started {
	width: 161px;
	height: 38px;
	
	background: #EF233C;
	border: 2px solid #EF233C;
	border-radius: 24px;
}

nav {
	overflow: hidden;
}

nav ul {
	flex-grow: 1;
}

#lang-selector {
	width: 80px;
	background: #554971;
	cursor: pointer;
	gap: 8px;
	color: #8D99AE;
	
}

nav .nav-wrapper i {
	height: unset !important;
	color: white;
}

.home .header {
	display: flex;
	width: 100%;
	color: white;
	background: linear-gradient(180deg, #36213E 0%, #554971 100%);
	align-items: center;
	justify-content: center;
}

.header-content {
	display: flex;
	height: 100%;
	flex-direction: column;
	align-items: start;
	justify-content: center;
}

.header .title {
	font-family: 'Quattrocento Sans';
	font-style: normal;
	font-weight: 700;
	font-size: 64px;
	line-height: 71px;
	max-width: 800px;
} 

.header .subtitle {
	font-family: 'Quattrocento Sans';
	font-style: normal;
	font-weight: 400;
	font-size: 24px;
	line-height: 28px;
	/* identical to box height, or 117% */
}

.tablist {
	background: #554971;
	display: flex;
	flex-direction: column;
	color: white;
	align-items: center;
	gap: 16px;
	justify-content: center;
	padding-top: 0px;
	padding-bottom: 64px;
	padding-top: 32px;
}

.tablist .tabs {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	row-gap: 20px;
	column-gap: 12px;
	flex-wrap: wrap;
	max-width: 1000px;
}

.tablist .tabs .tab {
	height: 50px;
	padding: 0 40px;
	border: 2px solid #EDF2F4;
	border-radius: 32px;

	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;

	font-family: 'Source Sans 3';
	font-style: normal;
	font-weight: 400;
	font-size: 14px;

	cursor: pointer;
}

.tablist .tabs .tab:hover {
	background: #EDF2F4;
	border: 2px solid #EDF2F4;
	filter: brightness(0.8);
	color: #554971;
}

.tablist .tabs .tab:hover img {
	filter: grayscale;
	filter: brightness(0.4);
}

.tablist .title {
	font-family: 'Quattrocento Sans';
	font-style: normal;
	font-weight: 700;
	font-size: 36px;
}

.tablist .selected-title {
	font-family: 'Quattrocento Sans';
	font-style: normal;
	font-weight: 700;
	font-size: 28px;
	padding: 32px 0;
}

.tablist .subtitle {
	font-family: 'Source Sans 3';
	font-style: normal;
	font-weight: 400;
	font-size: 16px;
}

.promptlist {
	margin-left: 70px;
	margin-right: 70px;
	height: 278px;
	overflow-x: scroll;
	overflow-y: hidden;
	display: flex;
	flex-direction: row;
	gap: 10px;
	align-items: start;
	justify-content: start;
}

.promptlist.moveup {
	margin-top: -48px;
	margin-bottom: 48px;
}

.promptlist .prompt {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 0;
	gap: 24px;

	min-width: 309px;
	height: 275.6px;

	background: #FFFFFF;
	border: 1px solid #EDF2F4;
	border-radius: 16px;

	position: relative;
}

.promptlist::-webkit-scrollbar {
	display: none;
}

.promptlist .prompt img {
	position: absolute;
	left: 40px;
	top: 40px;
}

.promptlist .prompt .price {
	position: absolute;
	right: 40px;
	top: 40px;
	background: #EF233C;
	border-radius: 40px;
	color: white;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 10px;
}

.promptlist .prompt .label {
	position: absolute;
	right: 40px;
	top: 70px;
	background: #EF233C;
	border-radius: 40px;
	color: white;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 10px;
}

.promptlist .prompt .text {
	position: absolute;
	left: 40px;
	width: 229px;
	top: 124px;
	height: 112px;
	overflow-y: auto;
	overflow-x: hidden;
}

.promptlist .prompt .text .tabname {
	font-family: 'Source Sans 3';
	font-style: normal;
	font-weight: 400;
	font-size: 14px;
	color: #8D99AE;
}

.promptlist .prompt .text .name {
	font-family: 'Quattrocento Sans';
	font-style: normal;
	font-weight: 400;
	font-size: 20px;
	color: #3A3A3A;
}

.promptlist .prompt .text .description {
	font-family: 'Source Sans 3';
	font-style: normal;
	font-weight: 400;
	font-size: 16px;
	color: #3A3A3A;
}

.promptlist-container {
	position: relative;
}

.promptarrow-right, .promptarrow-left {
	position: absolute;
	top: 122px;

	/* Auto layout */
	
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 10px 10px;
	
	width: 29.98px;
	
	background: #EDF2F4;
	border-radius: 60px;
}

.promptarrow-left {
	transform: scaleX(-1);
	left: 10px;
}
.promptarrow-right {
	right: 10px;
}	

.promo {
	max-width: 95vw;
	position: relative;
	margin-left: auto;
	margin-right: auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 0;
	gap: 16px;
	color: #EDF2F4;
	font-family: 'Source Sans 3';
	font-style: normal;
	font-size: 20px;
	padding: 32px 0;

	width: 900px;

	background: linear-gradient(180deg, #EF233C 0%, #36213E 100%);
	border-radius: 16px;
}

.promo img {
	position: absolute;
	left: 40px;
	top: 40px;
}

.promo .title {
	font-weight: 700;
	font-size: 36px;
}

.promo .subtitle {
	font-size: 16px;
	padding-left: 20px;
	padding-right: 20px;
}

.promo .info {
	text-align: center;
	font-family: 'Quattrocento Sans';
	font-style: normal;
	font-size: 24px;
}

.promo .info b {
	font-size: 28px;
}

.promo ul {
	list-style-image: url('images/li.svg');
}

.promo li {
	padding: 8px 16px;
}

.solutions {
	margin-top: 64px;
	margin-bottom: 64px;
	max-width: 900px;
	margin-left: auto;
	margin-right: auto;
	background: rgba(237, 242, 244, 0.4);
	border-radius: 16px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 16px;
	padding: 64px;
}

.solutions .title {
	font-family: 'Quattrocento Sans';
	font-style: normal;
	font-weight: 700;
	font-size: 36px;
}

.solutions .subtitle {
	text-align: center;
	max-width: 600px;
	font-family: 'Source Sans 3';
	font-style: normal;
	font-weight: 400;
	font-size: 16px;
	margin-bottom: 32px;
}

.solutions .list {
	position: relative;
	display: flex;
	flex-direction: row;
	gap: 48px;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
}

.solutions .item {
	position: relative;
	background: #FFFFFF;
	border: 1px solid #EDF2F4;
	box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
	border-radius: 16px;
	width: 354.26px;
	padding-top: 64px;
	padding-left: 32px;
	/* Text/H6 */
	
	font-family: 'Quattrocento Sans';
	font-style: normal;
	font-weight: 400;
	font-size: 20px;
}

.solutions .item img {
	position: absolute;
	left: 20px;
	top: 20px;
}

.solutions ul {
	list-style-image: url('images/liblack.svg');
}

.solutions li {
	padding: 8px 16px;
}

.footer-promo {
	display: flex;
	width: 100%;
	flex-direction: column;
	gap: 32px;
	text-align: center;
	font-family: 'Source Sans 3';
	font-style: normal;
	font-weight: 400;
	font-size: 16px;
	align-items: center;
	justify-content: center;
	margin-bottom: 64px;
}

.footer-promo .button {
	color: white;
}

.footer-promo .title {
	font-family: 'Quattrocento Sans';
	font-style: normal;
	font-weight: 700;
	font-size: 36px;
}

.footer-promo .subtitle {
	max-width: 800px;
}

.footer {
	width: 100%;
	background: linear-gradient(180deg, #36213E 0%, #36213E 100%);
	padding: 64px 0px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 32px;
	font-family: 'Source Sans 3';
	font-style: normal;
	font-weight: 400;
	font-size: 16px;
	color: #EDF2F4;
}

.footer .title {
	font-family: 'Quattrocento Sans';
	font-style: normal;
	font-weight: 700;
	font-size: 36px;
}

.footer .links {
	display: flex;
	flex-direction: row;
	justify-content: space-evenly;
	min-width: min(100vw, 800px);
	max-width: 100%;
	flex-wrap: wrap;
}

.footer ul {
	padding-inline-start: 0;
	list-style: none;
}

.about-title {
	margin-top: 64px;
	font-family: 'Quattrocento Sans';
	font-style: normal;
	font-weight: 700;
	font-size: 48px;
	line-height: 53px;
	text-align: center;
	padding: 80px;
}

.about-box {
	margin-top: 64px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 64px;

	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 40px 40px;
	
	max-width: 820px;
	
	background: rgba(237, 242, 244, 0.4);
	border-radius: 16px;

	font-size: 16px;
	color: black;
}

.about-box .title {
	font-family: 'Quattrocento Sans';
	font-style: normal;
	font-weight: 700;
	font-size: 36px;
	line-height: 40px;
}

.about-box .list {
	margin-top: 48px;
	position: relative;
	display: flex;
	flex-direction: row;
	gap: 48px;
	flex-wrap: wrap;
}

.about-box .item {
	position: relative;
	background: #FFFFFF;
	border: 1px solid #EDF2F4;
	box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
	border-radius: 16px;
	width: 350px;
	padding-top: 64px;
	padding-left: 32px;
	/* Text/H6 */
	
	font-family: 'Quattrocento Sans';
	font-style: normal;
	font-weight: 400;
	font-size: 20px;
}

.about-box .item img {
	position: absolute;
	left: 40px;
	top: 40px;
}

.about-box .subtitle {

	width: 100%;
	text-align: center;
	margin-top: 32px;
	
	font-family: 'Quattrocento Sans';
	font-style: normal;
	font-weight: 700;
	font-size: 28px;
	line-height: 34px;

}

.about-box .item .title {
	font-family: 'Quattrocento Sans';
	font-style: normal;
	font-weight: 400;
	font-size: 24px;
	
	position: absolute;
	left: 132px;
	top: 40px;
	height: 60px;
	width: 200px;
	line-height: 26px;
	display: flex;
	align-items: center;
	justify-content: center;

	color: #3A3A3A;
}

.about-box .item .text {
	margin-top: 83px;
	padding-right: 32px;
	padding-bottom: 32px;
	font-family: 'Source Sans 3';
	font-style: normal;
	font-weight: 400;
	font-size: 16px;
	color: #3A3A3A;
}

/* Modal pop-ups */

.modal-container {
	z-index: 200;
	background:rgba(0, 0, 0, 0.65);
	opacity: 1;
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: opacity 0.5s ease-in-out;
}

.pop-up {
	position: relative;
	padding: 40px;
	border: 2px solid #EDF2F4;
	background: #EDF2F4;
	border-radius: 24px;
	box-shadow: 4px 4px 16px rgba(0, 0, 0, 1);
	display: flex;
	flex-direction: column;
	gap: 16px;
	animation: elastic 0.5s cubic-bezier(0, 1.4, 1, 1);
}

@keyframes elastic {
  0% { transform: scale(50%); opacity: 0; }
  100.00% { transform: scale(100.00%); opacity: 1; }
}

.pop-up .title {
	width: 100%;
	text-align: center;
	font-family: 'Quattrocento Sans';
	font-style: normal;
	font-weight: 700;
	font-size: 28px;
	margin-bottom: 16px;
}

.pop-up .buttons {
	display: flex;
	flex-direction: row;
	margin-top: 32px;
	gap: 8px;
}

.pop-up .button {
	flex-grow: 1;
	margin: 0;
	background: white;
}

.pop-up .button.red {
	background: #EF233C;
}

.pop-up .input {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	min-width: 250px;
}

input {
	border-radius: 8px;
	background: white;
	border: solid 1px #EDF2F4;
	font-size: 16px;
	padding: 8px;
}
input[type=radio] {
	padding: 0;
	margin: 4px;
}
input[type="radio"]:checked+label{ font-weight: bold; } 
input[type="radio"]:checked+img+label{ font-weight: bold; } 

.pop-up .message {
	text-align: center;
}
.pop-up a {
	color:rgba(0, 0, 0, 0.25)
}

/* Textmaster */

.parameter {
	display: flex;
	gap: 4px;
	align-items: center;
	justify-content: start;
}
.parameters-box {
	padding: 32px;
	font-family: 'Source Sans 3';
	font-style: normal;
	font-weight: 400;
	font-size: 16px;
	line-height: 22px;

	display: flex;
	flex-direction: column;
	gap: 8px;
}
.parameters-box .title {
	font-family: 'Quattrocento Sans';
	font-style: normal;
	font-weight: 700;
	font-size: 28px;
}
.parameters-box .subtitle {
	margin-top: 16px;
	margin-bottom: 8px;
	font-family: 'Quattrocento Sans';
	font-style: normal;
	font-weight: 400;
	font-size: 24px;
}
.parameters-box .size {
	float: right;
	font-weight: 700;
	font-size: 16px;
}
.parameters-box .placeholders {
	float: right;
	font-weight: 700;
	font-size: 16px;
	position: relative;
	margin-left: 8px;
}
.parameters-box .placeholders ul {
	position: absolute;
	top: 0;
	left: 0;
	display: none;
	width: 150px;
	background: white;
	border: solid black 2px;
	border-radius: 8px;
	padding: 8px;
	filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
}
.parameters-box .placeholders ul li {
	list-style: none;
	margin: 4px 0;
	cursor: pointer;
}
.parameters-box .placeholders:hover ul {
	display: flex;
	flex-direction: column;
}
.parameters-box .placeholders ul:hover {
	display: flex;
	flex-direction: column;
}
.parameters-box textarea {
	width: 100%;
	height: 100px;
	margin: 8px 0;
}
.parameters-box .valuelist {
	margin-top: 16px;
	display: grid;
	grid-template-columns: repeat(auto-fill, 186px);
}
.parameters-box .valuelist img {
	width: 15px;
	height: 12px;
}

.results-box {
	padding: 32px;
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.results-box .results .origin {
	border: solid black 1px;
	border-radius: 8px;
	background: white;
	color: black;
	font-size: 12px;
	padding: 4px;
	margin-right: 16px;
}

.results-box .results .prompt {
	white-space: pre-wrap; 
	font-style: italic; 
	font-size: 16px; 
	margin-bottom: 16px; 
	line-height: unset
}

.results-box .results {
	padding: 32px 48px;
	min-height: 128px;

	background: rgba(237, 242, 244, 0.4);
	border-radius: 16px;

	font-family: 'Quattrocento Sans';
	font-style: normal;
	font-weight: 400;
	font-size: 20px;
	line-height: 28px;

	display: flex;
	flex-direction: column;
	gap: 16px;

	white-space: pre-wrap;
}

.results-box .disclaimer {
	background: #554971;
	border-radius: 16px;
	padding: 24px 32px;
	color: #EDF2F4;
}

.tooltip {
	position: fixed;
	max-width: 300px;

	background: #FFFFFF;
	border: 1px solid #EDF2F4;
	box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
	border-radius: 16px;

	padding: 16px;

	font-family: 'Source Sans 3';
	font-style: normal;
	font-size: 14px;
}

.tooltip .title {
	font-weight: 700;
}

.option-box {
	border-top: 1px solid #EDF2F4;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	padding: 32px;
	margin-top: 16px;
}

.option-box .option {
	width: 30%;
	position: relative;
	display: flex;
	flex-grow: 1;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
}

.option-box .option .title {
	font-family: 'Source Sans 3';
	font-style: normal;
	font-weight: 400;
	font-size: 16px;
	color: #000000;
}

.option-box .option .value {
	position: relative;
	font-family: 'Source Sans 3';
	font-style: normal;
	font-weight: 400;
	font-size: 16px;
	color: #554971;
}
.option-box .option + .option {
    border-left: solid 1px #EDF2F4;
}

.option-box .option .arrowleft {
	position: absolute;
	left: -24px;
	transform: scaleX(-2) scaleY(2);
	cursor: pointer;
}

.option-box .option .arrowright {
	position: absolute;
	right: -24px;
	cursor: pointer;
	transform: scaleX(2) scaleY(2);
}

/* Activity indicator */

.results-container {
	position: relative;
}
.lds-dual-ring {
	display: inline-block;
	width: 80px;
	height: 80px;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

.lds-dual-ring:after {
	content: " ";
	display: block;
	width: 64px;
	height: 64px;
	margin: 8px;
	border-radius: 50%;
	border: 6px solid #000;
	border-color: #000 transparent #000 transparent;
	animation: lds-dual-ring 1.2s linear infinite;
}

@keyframes lds-dual-ring {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

OL { counter-reset: item }
OL > LI { display: block; }
OL > LI:before { content: counters(item, ".") " "; counter-increment: item; width: 40px; display: inline-block; margin-left: -40px; }
OL a { color: black; font-weight: bold }

.copy-button {
	float: right;
    border: solid black 1px;
    padding: 4px 16px;
    border-radius: 8px;
    background: white;
    font-family: 'Quattrocento Sans';
    font-weight: bold;
    font-size: 14px;
	cursor: pointer;
}

.copy-button:hover {
	background: #EDF2F4;
}

.google-sign-in-button {
    cursor: pointer;
    transition: background-color .3s, box-shadow .3s;
        
    padding: 12px 16px 12px 42px;
    border: none;
    border-radius: 3px;
    box-shadow: 0 -1px 0 rgba(0, 0, 0, .04), 0 1px 1px rgba(0, 0, 0, .25);
    
    color: #757575;
    font-size: 14px;
    font-weight: 500;
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
    
    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBkPSJNMTcuNiA5LjJsLS4xLTEuOEg5djMuNGg0LjhDMTMuNiAxMiAxMyAxMyAxMiAxMy42djIuMmgzYTguOCA4LjggMCAwIDAgMi42LTYuNnoiIGZpbGw9IiM0Mjg1RjQiIGZpbGwtcnVsZT0ibm9uemVybyIvPjxwYXRoIGQ9Ik05IDE4YzIuNCAwIDQuNS0uOCA2LTIuMmwtMy0yLjJhNS40IDUuNCAwIDAgMS04LTIuOUgxVjEzYTkgOSAwIDAgMCA4IDV6IiBmaWxsPSIjMzRBODUzIiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48cGF0aCBkPSJNNCAxMC43YTUuNCA1LjQgMCAwIDEgMC0zLjRWNUgxYTkgOSAwIDAgMCAwIDhsMy0yLjN6IiBmaWxsPSIjRkJCQzA1IiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48cGF0aCBkPSJNOSAzLjZjMS4zIDAgMi41LjQgMy40IDEuM0wxNSAyLjNBOSA5IDAgMCAwIDEgNWwzIDIuNGE1LjQgNS40IDAgMCAxIDUtMy43eiIgZmlsbD0iI0VBNDMzNSIgZmlsbC1ydWxlPSJub256ZXJvIi8+PHBhdGggZD0iTTAgMGgxOHYxOEgweiIvPjwvZz48L3N2Zz4=);
    background-color: white;
    background-repeat: no-repeat;
    background-position: 12px 11px;
}

.google-sign-in-button:hover {
    box-shadow: 0 -1px 0 rgba(0, 0, 0, .04), 0 2px 4px rgba(0, 0, 0, .25);
}

.google-sign-in-button:active {
    background-color: #eeeeee;
}

.google-sign-in-button:active {
    outline: none;
        box-shadow: 
        0 -1px 0 rgba(0, 0, 0, .04),
        0 2px 4px rgba(0, 0, 0, .25),
        0 0 0 3px #c8dafc;
}

.google-sign-in-button:disabled {
    filter: grayscale(100%);
    background-color: #ebebeb;
    box-shadow: 0 -1px 0 rgba(0, 0, 0, .04), 0 1px 1px rgba(0, 0, 0, .25);
    cursor: not-allowed;
}