html, body {
	position: relative;
	width: 100%;
	height: 100%;
}

body {
  overflow-anchor: none;
	color: var(--color-text);
	margin: 0;
	box-sizing: border-box;
	font-family: Helvetica;
  letter-spacing: 0px;
  background-color: var(--color-background-main);
}

:focus-visible {
  outline: none
}

#svelte {
  /* height: 100vh; */
}

.stroke {
  stroke: var(--color-text);
  fill: none;
  stroke-width: 2px;
  stroke-linecap: round;
  stroke-linejoin: round;
}



text.stroke {
  stroke: none;
  fill: var(--color-text);
}

.fill {
  fill: var(--color-text);
}

body {
  overflow-x: hidden;
}
:root {
  /* --color-background-main: #05121A; --original*/


  --font-s: normal normal normal 12px/16px Helvetica;
  --font-m: normal normal normal 14px/20px Helvetica;
  --font-l: normal normal normal 16px/24px Helvetica;
  --layout-margin: 24px;
  --layout-margin-tight: 6px;
  --layout-sidebar-width: 168px;
  --layout-sidebar-width-short: 72px; 

}
.area-gradient-background {
  background: transparent linear-gradient(180deg, var(--color-background-main) 80px, var(--color-background-tertiary) 80%) 0% 0% no-repeat padding-box;
}


.grid-center {
  display: grid;
  place-items: center;
}
.grid-stretch {
  display: grid;
  place-items: stretch;
}
/* .overflow-hidden {
  overflow: hidden;
} */

.hidden {
  display: none !important;
}

.hiddenTransition {
  display: none;
  transition: display 2s;
}

.sidebar.short {
  width: var(--layout-sidebar-width-short) !important;
}

/* .sidebar.short ~ .app-container {
  margin-left: calc(var(--layout-margin) + var(--layout-sidebar-width-short)) !important;
  width: calc(100vw - var(--layout-margin) - var(--layout-sidebar-width-short) - var(--layout-margin) - (100vw - 100%));
}

.sidebar.short ~ .nav-container {
  padding-left: calc(var(--layout-margin) + var(--layout-sidebar-width-short));

} */

/* .sidebar.short.float {
  width: 0px !important;
}

.sidebar.short.float ~ .app-container {
  margin-left: var(--layout-margin) !important;
  width: calc(100vw - var(--layout-margin) - var(--layout-margin) - (100vw - 100%));
}

.sidebar.short.float ~ .nav-container {
  padding-left: var(--layout-margin);
} */




h1 {
  font: normal normal bold 112px/136px Helvetica;
  letter-spacing: 0px;
}

h2 {
  font: normal normal bold 48px/72px Helvetica;
  letter-spacing: 0px;
}

h3 {
  font: normal normal bold 32px/48px Helvetica;
  letter-spacing: 0px;
}

h4 {
  font: normal normal bold 24px/32px Helvetica;
  letter-spacing: 0px;
}

h5 {
  font: normal normal 600 20px/24px Helvetica;
  letter-spacing: 0px;
}

h6 {
  font: normal normal 600 16px/24px Helvetica;
  letter-spacing: 0px;
}

p {
  font: normal normal normal 14px/20px Helvetica;
  letter-spacing: 0px;
  margin-bottom: 0px;
}

/* span {
  font: normal normal normal 14px/20px Helvetica;
  letter-spacing: 0px;
  margin-bottom: 0px;
} */

p.large {
  font: normal normal normal 16px/24px Helvetica;
  letter-spacing: 0px;
  margin-bottom: 0px;
}

p.small {
  font: normal normal normal 12px/16px Helvetica;
  letter-spacing: 0px;
  margin-bottom: 0px;
}

cta {
  font: normal normal bold 14px/20px Helvetica;
  letter-spacing: 0px;
}

cta.large {
  font: normal normal medium 16px/24px Helvetica;
  letter-spacing: 0px;
}

cta.small {
  font: normal normal medium 14px/20px Helvetica;
  letter-spacing: 0px;
}

a {
	color: rgb(99, 133, 168);
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

a:visited {
	color: rgb(0,80,160);
}


a.contrast {
  color: var(--color-text-contrast);
  cursor: pointer;
}
.text-contrast {
  color: var(--color-text-contrast) !important
}

.form-group {
  /* margin: 8px  0; */
}

.form-group.error > label > input {
  border: 1px solid var(--color-error)
}


label {
	display: block;
  font-size: 14px;
  line-height: 20px;
  color: var(--color-text-secondary);
}

label > p {
  color: var(--color-text);
}

label > .text {
  font-weight: 800;
  padding-bottom: var(--text-padding, 8px);
}

label > span, p {
  font-weight: 300 !important;
}

input, select, textarea {	
  color: var(--color-text);
  font-size: 14px;
  line-height:20px;
  padding: 16px;
	/* padding: 4px; */
	background-color: var(--color-secondary-hover);
  border-radius: 4px;
  border: none;
}

.form-group > .dialog {
  opacity: 0;
  padding-top: 8px;
  font-size: 14px;
  line-height: 18px;
  margin-bottom: 8px;
}

.form-group.error > .dialog {
  opacity: 1;
  color: var(--color-error);
}

.form-group > .dialog.tight {
  padding-top: 0px;
  font-size: 14px;
  line-height: 18px;
  margin-bottom: 0px;
}

button {
	color: #333;
	background-color: #f4f4f4;
	outline: none;
}

button:disabled {
	color: #999;
}

/* button:not(:disabled):active { */
	/* background-color: #ddd; */
/* } */

button:focus {
	border-color: #666;
}

video#videoPlayer, video#playbackVideo {
  /* position: absolute;
  top: 0;
  left: 0; */
  width: 100%;
  max-height: calc(100vh - 6px + 80px);
  
  border-radius: 8px;
  /* transform: rotateY(180deg);
  /* Safari and Chrome */
  /* -webkit-transform:rotateY(180deg); */
  /* Firefox */
  /* -moz-transform:rotateY(180deg); */
}

.mirror {
  transform: rotateY(180deg);
  /* Safari and Chrome */
  -webkit-transform:rotateY(180deg);
  /* Firefox */
  -moz-transform:rotateY(180deg);
}

.cropper-container {
  width: 100% !important;

}

.tippy-box {
  background-color: var(--color-secondary) !important;
}
.tippy-box[data-placement^=top]>.tippy-arrow:before {
  border-top-color: var(--color-secondary) !important;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.no-scroll-bars::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.no-scroll-bars {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

.apexcharts-tooltip, .apexcharts-yaxistooltip, .apexcharts-tooltip-title, .apexcharts-tooltip-series-group {
  background-color: black !important;
}


.columns-buttons-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
}

.columns-buttons-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}