@import url("/picnic/picnic.min.css");

/* picnic overrides */
/*
.stack.button {
	text-align: center; }
*/
.home .toggle,
.tabs .toggle {
	width: auto; }
.modal > input:checked ~ .overlay ~ * {
	width: 70%; }
.modal .overlay ~ * {
	min-width: auto; }
.modal > input:checked ~ .overlay ~ * {
	width: auto; }
.card .close:hover, .modal .overlay ~ * .close:hover {
	color: white; }
.card .close, .modal .overlay ~ * .close {
	position: static;
	font-size: 1em;
	padding: .3em .9em;; }
.card > *, .modal .overlay ~ * > * {
	display: flex; }

/* add tabs */
.five.tabs > .row {
	width: 500%;
	left: -400%; }
.five.tabs > input:nth-of-type(1):checked ~ .row {
	margin-left: 400%; }
.five.tabs > input:nth-of-type(2):checked ~ .row {
	margin-left: 300%; }
.five.tabs > input:nth-of-type(3):checked ~ .row {
	margin-left: 200%; }
.five.tabs > input:nth-of-type(4):checked ~ .row {
	margin-left: 100%; }

.six.tabs > .row {
	width: 600%;
	left: -500%; }
input:nth-of-type(1):checked ~ .six.tabs > .row {
	margin-left: 500%; }
input:nth-of-type(2):checked ~ .six.tabs > .row {
	margin-left: 400%; }
input:nth-of-type(3):checked ~ .six.tabs > .row {
	margin-left: 300%; }
input:nth-of-type(4):checked ~ .six.tabs > .row {
	margin-left: 200%; }
input:nth-of-type(5):checked ~ .six.tabs > .row {
	margin-left: 100%; }

.seven.tabs > .row {
	width: 700%;
	left: -600%; }
.seven.tabs > input:nth-of-type(1):checked ~ .row {
	margin-left: 600%; }
.seven.tabs > input:nth-of-type(2):checked ~ .row {
	margin-left: 500%; }
.seven.tabs > input:nth-of-type(3):checked ~ .row {
	margin-left: 400%; }
.seven.tabs > input:nth-of-type(4):checked ~ .row {
	margin-left: 300%; }
.seven.tabs > input:nth-of-type(5):checked ~ .row {
	margin-left: 200%; }
.seven.tabs > input:nth-of-type(6):checked ~ .row {
	margin-left: 100%; }

.tabs.nine > .row {
	width: 900%;
	left: -800%; }
.tabs.nine > input:nth-of-type(1):checked ~ .row {
	margin-left: 800%; }
.tabs.nine > input:nth-of-type(2):checked ~ .row {
	margin-left: 700%; }
.tabs.nine > input:nth-of-type(3):checked ~ .row {
	margin-left: 600%; }
.tabs.nine > input:nth-of-type(4):checked ~ .row {
	margin-left: 500%; }
.tabs.nine > input:nth-of-type(5):checked ~ .row {
	margin-left: 400%; }
.tabs.nine > input:nth-of-type(6):checked ~ .row {
	margin-left: 300%; }
.tabs.nine > input:nth-of-type(7):checked ~ .row {
	margin-left: 200%; }
.tabs.nine > input:nth-of-type(8):checked ~ .row {
	margin-left: 100%; }

.tabs.ten > .row {
	width: 1000%;
	left: -900%; }
.tabs.ten > input:nth-of-type(1):checked ~ .row {
	margin-left: 900%; }
.tabs.ten > input:nth-of-type(2):checked ~ .row {
	margin-left: 800%; }
.tabs.ten > input:nth-of-type(3):checked ~ .row {
	margin-left: 700%; }
.tabs.ten > input:nth-of-type(4):checked ~ .row {
	margin-left: 600%; }
.tabs.ten > input:nth-of-type(5):checked ~ .row {
	margin-left: 500%; }
.tabs.ten > input:nth-of-type(6):checked ~ .row {
	margin-left: 400%; }
.tabs.ten > input:nth-of-type(7):checked ~ .row {
	margin-left: 300%; }
.tabs.ten > input:nth-of-type(8):checked ~ .row {
	margin-left: 200%; }
.tabs.ten > input:nth-of-type(9):checked ~ .row {
	margin-left: 100%; }



.tabs.eleven > .row {
	width: 1100%;
	left: -1000%; }
.tabs.eleven > input:nth-of-type(1):checked ~ .row {
	margin-left: 1000%; }
.tabs.eleven > input:nth-of-type(2):checked ~ .row {
	margin-left: 900%; }
.tabs.eleven > input:nth-of-type(3):checked ~ .row {
	margin-left: 800%; }
.tabs.eleven > input:nth-of-type(4):checked ~ .row {
	margin-left: 700%; }
.tabs.eleven > input:nth-of-type(5):checked ~ .row {
	margin-left: 600%; }
.tabs.eleven > input:nth-of-type(6):checked ~ .row {
	margin-left: 500%; }
.tabs.eleven > input:nth-of-type(7):checked ~ .row {
	margin-left: 400%; }
.tabs.eleven > input:nth-of-type(8):checked ~ .row {
	margin-left: 300%; }
.tabs.eleven > input:nth-of-type(9):checked ~ .row {
	margin-left: 200%; }
.tabs.eleven > input:nth-of-type(10):checked ~ .row {
	margin-left: 100%; }

table td, table th {
	padding-right: 0.6em;
}

/* easing classes */
.textleft { text-align: left }
.textcenter { text-align: center }
.textright { text-align: right }
.justify { text-align: justify }
.middle { vertical-align: middle }
.relative { position: relative }
.floatright { float: right }
.clearboth { clear: both }
.flexbox { display: flex }

/* block layout classes */
.container { padding: 1em 1ex }
.separator { padding: 1em 0 0 0; }

html {
	box-sizing: border-box;
	min-height: 100%;
	height: auto;
	scroll-behavior:smooth;
}
body {
	position: relative;
	min-height: 100vh;
	display: grid;
	grid-template-rows: auto 1fr auto;

}
main {
	max-width: 100vw;
}
body > footer {
	text-align: center; }
main > .dark:first-of-type {
	padding-top: 3em; }
main > .light:first-of-type {
	padding-top: 3em; }
h1 {
	padding: 0; }
h1, h2 {
	text-align: center; }
/*
a:not(.button) {
	white-space: nowrap; }
*/
article .container {
	padding: 3ex; }
	/*
.container > h2:first-child {
	padding-top: 0;
	padding-bottom: 1.6em; }
	*/
#references h3 {
	padding: 0; }
#references h3 + small {
	display: block;
	text-align: center; }
#references a .fa {
	margin-right: .5ex; }
.home {
	text-align: center; }
.home .row .info {
	position: absolute;
	right: 1em;
	bottom: 3em;
	font-size: 80%; }
.button i.damas-logo:before {
	background-image: url('/img/damas_logo.svg');
	background-size: 1em 1em;
	display: inline-block;
	width: 1em;
	height: 1em;
	content: "";
	margin-bottom: -.1em; }
i.damas-logo:before {
	background-image: url('/img/damas_colored.svg');
	background-size: 1em 1em;
	display: inline-block;
	width: 1em;
	height: 1em;
	content: "";
	margin-bottom: -.1em; }
footer .flex > * {
	padding-bottom: 0; }
.margin-auto {
	margin-left: auto;
	margin-right: auto; }
.checkout-page table {
	width: 100%; }
.price {
	font-size:2em;
	font-weight:600; }
.vat {
	margin-top: -0.8em;
	margin-bottom: 0.8em; }
.dropdown-content {
	display:none;
	margin-top:-.5em;
	position:absolute;
	right: 0;
	z-index:1; }
.dropdown-content > a {
	display:block; }
.dropdown:hover .dropdown-content {
	display:block; }
.container {
	max-width:1200px; }
.alert, .info {
	padding: 1em !important; }
.plans h2 {
	text-transform: uppercase; }
.plans > div {
	padding: 3em 0; }
.vmiddle {
	vertical-align: middle;
	margin: auto; }
.steps {
	text-align: center;
	line-height: 2.0em;
	letter-spacing: 0;
	font-size: 1.2em; }
.steps hr {
	display: inline-block;
	width: 1em;
	vertical-align: middle; }
.steps > span, .steps > a {
	display: inline-block;
	border-radius: 50%;
	width: 2.3em; }
#empty {
	text-align: center; }
.home-page main > .alert {
	text-align: center; }
blockquote {
	margin: 1em 0;
	padding: 0;
	quotes: "\201C""\201D""\2018""\2019";
	box-shadow: none;
	text-align: center; }
blockquote:before {
	content: open-quote; }
blockquote:after {
	content:close-quote; }

.flexjustify {
	display: flex;
	justify-content: space-between;
}

input.acc + * {
	max-height: 0px;
	overflow: hidden;
	opacity: 0;
	transition-duration: 0.3s;
}

input.acc:checked + * {
	max-height: 500px;
	opacity: 1;
	overflow: none;
}

input.acc + .help {
	margin: 0em;
}

input.acc:checked + .help {
	margin: .5em;
	margin-top: 0;
	padding: 1em;
}

/* selectors level 4 */
label:has(+ input.acc:checked) i.fa-plus {
	rotate: 45deg;
}

.accordion-content {
	max-height: 0;
	overflow: hidden; }
.accordion input + label::after {
	content: " \f054";
	font-family: 'Fontawesome'; }
.accordion input:checked + label::after {
	content: " \f078";
	transform: rotateX(270deg); }
.accordion input:checked ~ .accordion-content {
	max-height: 1000vh; }
pre {
	margin: 0; }
#snackbar {
  visibility: hidden;
  padding: 0 3ex 0 3ex;
  width: 100%;
  text-align: center; /* Centered text */
  position: fixed; /* Sit on top of the screen */
  z-index: 1; /* Add a z-index if needed */
  bottom: 30px; /* 30px from the bottom */
}
#snackbar.show {
  visibility: visible; /* Show the snackbar */
  /* Add animation: Take 0.5 seconds to fade in and out the snackbar.
  However, delay the fade out process for 2.5 seconds */
  -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
  animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

/* Animations to fade the snackbar in and out */
@-webkit-keyframes fadein {
  from {bottom: 0; opacity: 0;}
  to {bottom: 30px; opacity: 1;}
}

@keyframes fadein {
  from {bottom: 0; opacity: 0;}
  to {bottom: 30px; opacity: 1;}
}

@-webkit-keyframes fadeout {
  from {bottom: 30px; opacity: 1;}
  to {bottom: 60px; opacity: 0;}
}

@keyframes fadeout {
  from {bottom: 30px; opacity: 1;}
  to {bottom: 60px; opacity: 0;}
}

.button.expand {
	width: 100%;
	height: 100%;
}

/* speech bubble 02/2022 */

@font-face {
	font-family: "Inconsolata";
	font-style: normal;
	font-weight: normal;
	src: url("/fonts/Inconsolata-VariableFont_wdth,wght.ttf") format("opentype");
}

.speechBubble {
	background-color: #fff;
/*
	font-family: 'Inconsolata', sans-serif;
*/
	position: relative;
	border-radius: 1em;
	margin-right: 80px;
	margin-bottom: 20px;
	padding: 3ex;
	}
.speechBubble a {
	color: #0c9fca; }
.speechBubble .left-point {
	width: 0;
	height: 0;
	border-left: 20px solid transparent;
	border-right: 20px solid transparent;
	border-bottom: 40px solid #fff;
	position: absolute;
	top: -0px;
	right: -28px;
	transform: rotate(63deg); }
.speechBubble .left-point i {
	transform: rotate(-117deg);
	position: absolute;
	right: -0px;
	bottom: -40px; }
.speechBubble .text {
/*
	font-size: 120%;
*/
}

body.hub h1, body.volume h1, body.link h1 {
	word-wrap: anywhere; }

/* CREATE ELEMENT WIDGET */

.fa-plus {
	transition-duration: 0.3s;
	margin-top: 0.5em;
}

.fa-plus:hover {
	transition-duration: 0.3s;
	cursor: pointer;
	filter: brightness(1.2);
}

.addElementWidgetContainer {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.addElementWidget {
	display: flex;
	transition-duration: 0.3s;
	justify-content: center;
	flex-direction: column;
	align-items: center;
	background: white;
	border-radius: 0.5em;
	overflow: hidden;
}

.help {
	transition-duration: 0.3s;
	font-weight: normal;
	text-align: justify;
	background: white;
	border-radius: 1em;
	border-top-right-radius: 0;
	margin: 0;
}

.rsyncPanel {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	background: none;
	gap: 1ex 1ex;
}

.rsyncPanel button {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-evenly;
	border-radius: .3em;
	transition-duration: 0.3s;
	background-color: #fff;
	color:#0c9fca;
	aspect-ratio: 1;
	width: 13ex;
	margin: 0;
	font-weight: bold;
	text-align: center;
	font-size: 75%;
}

.rsyncPanel button:hover {
	opacity: 0.5;
	background-color: #0c9fca;
	color:#fff;
}

.rsyncPanel button.on {
	background-color: #0c9fca;
	color:#fff;
}

.rsyncPanel button.on:hover {
	opacity: 0.5;
	background-color: #fff;
	color:#0c9fca;
}

/* HEADER */

.headerWrapper {
	justify-content: space-between;
	align-items: center;
	height: 3em;
}

.copied{
	opacity: 0;
	font-size: 0%;
}

.copy:hover {
	cursor: pointer;
}

#tab-1:checked~#menuBarWrapper > .menuItemContainer:nth-child(1) label,  #tab-2:checked~#menuBarWrapper > .menuItemContainer:nth-child(2) label, #tab-3:checked~#menuBarWrapper > .menuItemContainer:nth-child(3) label, #tab-4:checked~#menuBarWrapper > .menuItemContainer:nth-child(4) label, #tab-5:checked~#menuBarWrapper > .menuItemContainer:nth-child(5) label {
	color: white;
	box-shadow: inset 0 0 0 99em rgba(38,222,168);
}

.spinner {
	position: absolute;
	top: 50%;
	right: 0;
	padding-right: 1ex;
	transform: translateY(-50%);
	transition-duration: 0.3s;
}

a .fa-question-circle {
	cursor: help;
}

.fa-copy:hover {
	cursor: pointer;
}

.horizontalLine {
	width: 100%;
	height: 2px;
	background: radial-gradient(circle, rgba(216,216,216,1) 0%, rgba(216,216,216,0) 100%);
	margin: 1em 0em 1em 0em;
}

/*POPUP*/

.popupBubble {
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background: white;
	border-radius: 1em;
	padding: 1em;
}

.popupButtons {
	justify-content: space-between;
	align-items: center;
	width: 100%;
}

.deleteValidation {
	width: 100%;
}

.scrollable {
	flex-basis: 0;
	flex-grow: 12;
	font-family: monospace;
	overflow-x: scroll;
	border-radius: 0.5em;
	white-space: nowrap;
	padding: 0.5em;
}

/* MEDIA QUERIES */

@media screen and (max-width:800px){
	.nomobile {
		display: none; }
	body {
		height: 100dvh;
	}
	.container {
		max-width: 800px;
	}
	.features {
		display: table;
		padding-left: .6em;
		border-spacing: 1ex; }
	.feature {
		display: table-row; }
	.feature img,
	.feature i {
		font-size: 200%;
		display: table-cell;
		height: 1em; }
	.feature span {
		display: table-cell;
		vertical-align: middle;
		padding-left: 2ex; }
	.headerWrapper {
		height: 3em;
		width: 100%;
	}

	/* MOBILE MENU */

	#menuBarWrapper {
		justify-content: center;
		width: 100%;
		text-align: center;
		background: white;
		position: fixed;
		bottom: 0;
		z-index: 255;
		left: 0;
	}

	.menuItemContainer {
		flex-direction: row;
		flex-basis: 0;
		flex-grow: 1;
		align-items: center;
		justify-content: center;
		border-top: solid 3px #ededed;
		line-height: normal;
		letter-spacing: normal;
	}

	.menuItemContainer label {
		box-shadow: none;
		color: rgb(38,222,168);
	}

	#tab-1:checked~#menuBarWrapper > .menuItemContainer:nth-child(1),  #tab-2:checked~#menuBarWrapper > .menuItemContainer:nth-child(2), #tab-3:checked~#menuBarWrapper > .menuItemContainer:nth-child(3), #tab-4:checked~#menuBarWrapper > .menuItemContainer:nth-child(4), #tab-5:checked~#menuBarWrapper > .menuItemContainer:nth-child(5) {
		border-top: solid 3px rgb(38,222,168);
	}

	.menuItem {
		padding: 0.3em;
	}

	#tab-1:checked~#menuBarWrapper > .menuItemContainer:nth-child(1) label,  #tab-2:checked~#menuBarWrapper > .menuItemContainer:nth-child(2) label, #tab-3:checked~#menuBarWrapper > .menuItemContainer:nth-child(3) label, #tab-4:checked~#menuBarWrapper > .menuItemContainer:nth-child(4) label, #tab-5:checked~#menuBarWrapper > .menuItemContainer:nth-child(5) label {
		opacity: 1;
		box-shadow: none;
		color: rgb(38,222,168);
	}

	.pseudo.button:hover {
		background: none;
		box-shadow: none;
	}

	.menuIcon {
		font-size: 1.5em;
	}
}

@media screen and (min-width:800px){
	.mobileonly {
		display: none; }
	.features {
		text-align: center; }
	.feature span {
		display: block; }
	.featureimg {
		font-size: 300%;
		margin: 0 auto .2em auto;
		height: 1em; }
	.container {
		padding: 3ex; }
	.separator {
		padding: 2em 0 0 0; }
	.separatorh {
		padding: 0 0 0 3em; }
	#menuBarWrapper {
		gap: .5ex }
}
@media screen and (min-width:1200px){
	.container {
		margin: auto; }
}