@charset "utf-8";

html{
	--primaryRed: rgba(151,43,63,1.00);
	--primaryWhite: white;
	--secondaryWhite: whitesmoke;

	overflow-x: hidden;
}

/*Main page*/

#title {
	font-size: 48pt;
	line-height: 60pt;
	font-weight: bold;
	position: relative;
	color: rgba(151,43,63,1.00);
	font-family: "Roboto Slab";
	padding-bottom: 8pt;
	margin-bottom: 8pt;
	border-bottom: thin solid rgba(180,180,180,1.00);
}
#message {
	padding-bottom: 8pt;
	margin-bottom: 8pt;
	border-bottom: thin solid rgba(180,180,180,1.00);
}
.galvenaisTexts {
	font-size: 10pt;
	text-align: justify;
	line-height: 15pt;
	font-family: "Open Sans", sans-serif;
	color: rgba(69,69,69,1.00);
}
.galvenaisTexts p {
	margin-top: 0px;
	margin-bottom: 0px;
	text-indent: 16pt;
}
.galvenaisTexts sup {
	line-height: 0pt;
}
.galvenaisTexts ul {
	padding-right: 0pt;
	padding-left: 0pt;
	margin-bottom: 8pt;
	margin-top: 8pt;
}
.galvenaisTexts li {
	list-style-position: inside;
	list-style-type: square;
}
.galvenaisTexts .gTPB {
	float: left;
	font-size: 30pt;
	line-height: 30pt;
	font-weight: bolder;
	color: rgba(69,69,69,1.00);
}

.dispKDlBttn  {
	width: 100%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	font-size: 16pt;
	text-align: center;
	font-weight: bolder;
	border: thin solid rgba(180,180,180,1.00);
	height: 100%;
	white-space: nowrap;
	display: block;
	padding-top: 8pt;
	padding-bottom: 8pt;
	overflow-x: hidden;
	overflow-y: hidden;
	font-style: normal;
	cursor: pointer;
	-webkit-user-select: none; /* Safari */
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* IE10+/Edge */
	user-select: none; /* Standard */
	font-family: "Roboto Slab";
	color: rgba(69,69,69,1.00);
	-webkit-transition: background-color 0.5s;
	transition: background-color 0.5s;
	-webkit-transition-timing-function: ease;
	transition-timing-function: ease;
	background-color: rgba(255,255,255,1.00);
}

.dispKDlBttn img {
	height: 12pt;
	margin-right: 8pt;
}

.dispKDlBttn:hover {
	background-color: rgba(223,249,255,1.00);
}

/* Overall */

body {
	margin: 0;
	padding: 0;
	overflow-y: visible;
}

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

.sleptInfo {
	display: none;
}

#wrap {
	background-color: rgba(224,224,224,1.00);
	min-height: 100vh;
	position: relative;
}

.mainContainer{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding-top: 8pt;
	margin-left: auto;
	margin-right: auto;
	font-family: "Open Sans", sans-serif;
	width: 66%;
	padding-right: 8pt;
	padding-left: 8pt;
	margin-bottom: 0px;
	padding-bottom: 8pt;
	justify-items: stretch;
	align-items: stretch;
}

/*Database*/

#searchBar {
	grid-area: search;
	display: grid;
	grid-template-columns: 1fr 28pt 72pt;
	grid-column-gap: 8pt;
	grid-row-gap: 0pt;
	grid-template-rows: 28pt auto;
	grid-template-areas: "input more go""extra extra extra";
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding-top: 8pt;
	padding-right: 8pt;
	padding-bottom: 8pt;
	padding-left: 8pt;
}

.nosaukumaMekletajs {
	grid-area: input;
	font-family: "Roboto Slab";
	font-size: 16pt;
	font-weight: bold;
	color: rgba(69,69,69,1.00);
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding-left: 8pt;
	padding-right: 8pt;
	border: thin solid rgba(180,180,180,1.00);
	-webkit-transition: background-color 0.5s;
	transition: background-color 0.5s;
	-webkit-transition-timing-function: ease;
	transition-timing-function: ease;
}

.moreSearchOpt {
	grid-area: more;
}

.searchGo {
	grid-area: go;
}

.moreSearchOpt, .searchGo {
	background-color: rgba(255,255,255,1.00);
	display: block;
	width: 100%;
	height: 100%;
	overflow-x: hidden;
	overflow-y: hidden;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding-top: 4pt;
	padding-right: 4pt;
	padding-bottom: 4pt;
	padding-left: 4pt;
	border: thin solid rgba(180,180,180,1.00);
	-webkit-transition: background-color 0.5s;
	transition: background-color 0.5s;
	-webkit-transition-timing-function: ease;
	transition-timing-function: ease;
}

#skirotajiDanciem {
	grid-area: extra;
	display: none;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto;
	grid-column-gap: 8pt;
	grid-row-gap: 8pt;
}

.MekDala {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: repeat(8, auto);
	grid-row-gap: 8pt;
}

.skirostajaIedala {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 28pt;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	border-left: thin solid rgba(122,12,33,1.00);
	border-right: thin solid rgba(122,12,33,1.00);
	border-bottom: thin solid rgba(122,12,33,1.00);
	border-top: thin solid rgba(122,12,33,1.00);
	background-color: rgba(151,43,63,1.00);
}
.skirostajaIedalaSpec {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto;
}
.selektoriGeneralaisStils, .selektoriGeneralaisStilsZ {
	border-style: none none none solid;
	border-left-width: thin;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding-left: 4pt;
	font-size: 10pt;
	font-family: "Open Sans", sans-serif;
	padding-right: 8pt;
	-webkit-transition: background-color 0.5s;
	transition: background-color 0.5s;
	-webkit-transition-timing-function: ease;
	transition-timing-function: ease;
}
.selektoriGeneralaisStils {
	border-left-color: rgba(122,12,33,1.00);
}
.selektoriGeneralaisStilsZ {
	border-left-color: rgba(180,180,180,1.00);
}
.iedalasNosaukums {
	align-self: center;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding-left: 8pt;
	font-family: "Roboto Slab";
	font-size: 10pt;
	font-weight: normal;
	color: rgba(255,255,255,1.00);
	padding-right: 8pt;
	white-space: nowrap;
	font-style: oblique;
}
.iedalasNosaukumsZ {
	align-self: center;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	font-family: "Roboto Slab";
	font-size: 10pt;
	font-weight: normal;
	color: rgba(0,0,0,1.00);
	padding-right: 8pt;
	white-space: nowrap;
	font-style: oblique;
}

.poguBloks {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	grid-template-rows: auto;
}
.pogaIeksSatura {
	position: relative;
	width: 100%;
	height: auto;
	align-self: stretch;
	display: grid;
	grid-template-columns: auto 2fr;
	grid-template-rows: 2em;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	padding-right: 8pt;
	padding-left: 8pt;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	border-left: thin solid rgba(180,180,180,1.00);
	-webkit-transition: background-color 0.5s;
	transition: background-color 0.5s;
	-webkit-transition-timing-function: ease;
	transition-timing-function: ease;

	grid-template-areas: "icon label";
}

.pogaIeksSatura:hover, .pogaIeksLoga:hover, .moreSearchOpt:hover, .searchGo:hover, .selektoriGeneralaisStils:hover, .selektoriGeneralaisStilsZ:hover, .nosaukumaMekletajs:hover {
	background-color: rgba(223,249,255,1.00);
}
.pogaIeksSatura.neaktivs:hover {
	background-color: rgba(180,180,180,1.00);
}
.neaktivs {
	background-color: rgba(180,180,180,1.00);
	cursor: default;
}
.pogaIeksSatura img {
	justify-self: end;
	align-self: center;
	max-height: 28pt;
	max-width: 28pt;
	min-width: 14pt;
	width: 100%;
	height: 14pt;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding-right: 4pt;
	float: right;
	grid-area: icon;
}
.bttnText {
	align-self: center;
	font-family: "Roboto Slab";
	font-size: 12pt;
	font-weight: bold;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding-left: 4pt;
	border-left: thin solid rgba(180,180,180,1.00);
	color: grey;
	grid-area: label;
}

.Nosaukums {
	align-self: center;
	overflow-x: hidden;
	overflow-y: hidden;
	font-family: "Open sans", sans-serif;
	font-size: 2vh;
	font-weight: bold;
	color: rgba(180,180,180,1.00);
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding-right: 8pt;
	white-space: nowrap;
}
.nosaukumsDancim {
	color: rgba(69,69,69,1.00);
}
.nosaukumaFlows {
	float: left;
	white-space: nowrap;
	padding-right: 1pt;
}
.skirosanasInfo {
	font-family: "Open Sans", sans-serif;
	font-size: 10pt;
	color: rgba(69,69,69,1.00);
}
.rGStils {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding: 8pt;
	min-height: 8pt;
	border: thin solid rgba(180,180,180,1.00);
	background-color: rgba(255,255,255,1.00);
}
.rHStils {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding: 8pt;
	min-height: 8pt;
	border-left: thin solid rgba(122,12,33,1.00);
	border-right: thin solid rgba(122,12,33,1.00);
	border-bottom: thin solid rgba(122,12,33,1.00);
	border-top: thin solid rgba(122,12,33,1.00);
	background-color: rgba(151,43,63,1.00);
	font-family: "Roboto Slab";
}
.videoWrapper {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	margin-top: 0px;
	padding-top: 25px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	clear: both;
	z-index: 1;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	z-index: 600;
}
.infoModal {
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	background-color: rgba(0,0,0,0.80);
	bottom: 0px;
	right: 0px;
	display: none;

	z-index: 30;

	text-align: center;
}
.loguScroll {
	height: 100%;
	overflow-y: auto;
}
.iframeIzmers {
	width: 66%;
	max-width: 1300px;
	margin-left: auto;
	margin-right: auto;
	padding-top: 8pt;
	padding-bottom: 8pt;
	padding-left: 8pt;
	padding-right: 8pt;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

@media only screen and (max-width: 1200px) {
	.iframeIzmers {
		width: calc(100% - 16pt);
	}
}

.iframeIzmers[wide]{
	width: 90%;
	max-width: none;
}

.pogaIeksLoga {
	width: 28pt;
	height: 28pt;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	background-color: rgba(255,255,255,1.00);
	border: thin solid rgba(180,180,180,1.00);
	padding-right: 4pt;
	padding-top: 4pt;
	padding-bottom: 4pt;
	padding-left: 4pt;
	float: left;
	margin-right: 8pt;
	cursor: pointer;
	-webkit-transition: background-color 0.5s;
	transition: background-color 0.5s;
	-webkit-transition-timing-function: ease;
	transition-timing-function: ease;
}

.splitter {
	width: 100%;
	margin-bottom: 4pt;
	clear: both;
	padding-top: 4pt;
	border-bottom: thin solid rgba(180,180,180,1.00);
}
#svgNotisLogam {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding-top: 8pt;
	padding-right: 8pt;
	padding-bottom: 8pt;
	padding-left: 8pt;
	background-color: rgba(255,255,255,1.00);
	border: thin solid rgba(180,180,180,1.00);
	width: 100%;
}
#soliLoga {
	width: 100%;
	height: calc(100vh - 68pt);
}

#footer {
	color: darkgrey;
	border-top: 1px solid lightgrey;
	font-weight: bold;
 	grid-area: feet;
	display: grid;
	/* grid-template-columns: 2fr 1fr 2fr; */
	margin-left: 5vw;
	margin-right: 5vw;
	width: 80vw;
	height: auto;
	padding-left: 5vw;
	padding-right:5vw;
	padding-top: 0.5em;
	padding-bottom: 0.5em;
	column-gap: 10px;
	font-size: 10pt;
	font-family: "Open Sans", sans-serif;
	font-size: max(1.2vw, 1.75vh);
}

#footer[contactsPage]{
	grid-template-columns: repeat(3, 1fr);
	font-size: 12pt;
	padding-bottom: 0.75em;
}

#footer[contactsPage] > span{
	justify-content: center;
}

#footer > span{
	height: 100%;
	display: flex;
	align-items: center;
	font-size: 1em;
	justify-content: center;
}

#sponsori {
	overflow-x: hidden;
	overflow-y: hidden;
	font-family: "Open Sans", sans-serif;
	font-size: 0.65em;
	margin-top: 0.5vh;
	display: grid;
	/* grid-template-columns: auto 1fr; */
	grid-template-areas: "text";
	grid-template-columns: auto;
	max-width: 35%;
	height: 100%;
	margin-left: auto;
	margin-right: auto;
}

@media only screen and (max-width: 760px) {
	#sponsori{
		max-width: 100% !important;
	}
}

@media only screen and (max-width: 1200px) {
	#footer{
		display: block;
	}

	#footer > span{
		justify-content: center;
		text-align: center;
	}

	#sponsori{
		margin-top: 0;
		max-width: 75%;
		grid-area: sponsors;
	}

	#sponTxt{
		margin-top: 0.5vh;
		font-size: 1.25vh;
		text-align: center;
		display: block;
		margin-bottom: 0;
	}

	#sponTxt span{
		float: none;
	}
}

#sponsori a {
	float: right;
	height: max(8vh, 4vw);
	width: 100%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding-top: 4pt;
	padding-right: 4pt;
	padding-bottom: 4pt;
	padding-left: 4pt;
	display: block;
	opacity: 0.8;
	-webkit-transition: opacity 0.5s;
	transition: opacity 0.5s;
	-webkit-transition-timing-function: ease;
	transition-timing-function: ease;
	text-align: center;
}
#sponsori a img {
	width: auto;
	max-height: 100%;
}

#sponsorLogos{
	display: grid;
	grid-auto-flow: row; 
	/* grid-template-columns: repeat(4, auto); */
}

#sponsorLogos > div {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
}

#sponTxt {
	float: right;
	display: flex;
	align-items: center;
	justify-content: center;
	grid-area: text;
}
#sponsori a:hover {
	opacity: 1;
}

@media only screen and (max-width: 1600px) {
	#ramisSaturam {
		width: 80%;
	}
	.bttnText {
		padding-left: 0pt;
		border-left: thin none rgba(180,180,180,1.00);
	}
}

@media only screen and (max-width: 1280px) {
	#ramisSaturam {
		width: 90vw;
	}

	.adminBtnBlock{
		grid-template-columns: 1fr 1fr 1fr 1fr !important;
		grid-template-rows: 1fr 1fr;
		gap: 5px;
	}

	.pogaIeksSatura {
		grid-template-rows: 1.75em;
	}

	.pogaIeksSatura img {
		display: inline;
	}

	.pogaIeksSatura i{
		display: inline;
		font-size: 60%;
		margin-right: 0.25vw;
	}

	#mainNav .pogaIeksSatura i{
		font-size: 100%;
	}

	.bttnText{
		font-size: 75%;
	}
	.nosaukumsDancim{
		font-size: 70%;
	}
}

@media only screen and (max-width: 1000px) {
#ramisSaturam {
	width: 100%;
}
#skirotajiDanciem {
	grid-template-columns: repeat(1, 1fr);
	grid-template-rows: repeat(2, auto);
}
}

#contentErrorMsg{
	color: red;
	text-align: center;
}

.defaultBtn{
	border: none;
	border-right: 1px solid grey;
	background-color: rgba(0,0,0,0);

	color: var(--primaryRed);
	font-weight: bold;
	width: 100%;

	display: inline-block;

	transition: background-color 0.2s;
}

.defaultBtn:hover{
	background-color: lightgrey;
	cursor: pointer;
}

.defaultBtn[active]{
	background-color: var(--primaryRed);
	color: white;
}

.defaultBtn .fas, .defaultBtn .far{
	border-right: 1px solid grey;
	padding-right: 10px;
}

.defaultBtn[active] .fas, .defaultBtn[active] .far{
	border-color: white;
}

.adminFeature{
	display: none !important;
}

.adminBtnBlock{
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	grid-template-rows: auto;
}

.pogaIeksSatura i{
	text-align: left;
	position: relative;
	top: 0.5em;
}

@media only screen and (max-width: 760px) {
	.pogaIeksSatura i{
		top: -0.25em;
	}
}

#adminHeader{
	font-size: 3vh;
	font-weight: 400;
	color: var(--primaryRed);
	font-family: "Roboto Slab";
}

#adminHeaderContainer{
	width: 100vw;
	margin-bottom: 1vh;
	margin-left: 5vw;
}

#header {
	border: none;
	grid-area: head;
	font-family: Arial, Helvetica, sans-serif;
	color: var(--primaryWhite);
	background-color: var(--primaryRed);
	font-size: 3.2vw;
	font-weight: 800;
	/*height: min(15vh, 10vw);*/
	padding-left: 5vw;
	padding-top: 3vh;
	line-height: 1.15em;
	display: grid;
	grid-template-columns: 1fr 2fr;
	grid-template-rows: auto;

	position: sticky;
}

@media only screen and (max-width: 760px) {
	#header {
		grid-template-columns: 1fr;
		grid-template-rows: 1fr auto;

		padding-bottom: 0;
		row-gap: 0.5vh;
	}

	#header > div{
		justify-content: center;
	}
}

#adminLogoutBtn{
	font-size: inherit;
	font-weight: inherit;
	width: auto;
	border-right: none;
	color: var(--secondaryWhite);
	margin-left: -0.2em;
	border-radius: 5px;

	background-color: var(--primaryRed);

	transition: color 0.15s;
	transition: background-color 0.15s;

	margin-left: 1vw;
}

#adminLogoutBtn:hover{
	color: var(--primaryRed);
	background-color: var(--secondaryWhite);
}

#adminHeader .divider{
	font-weight: 100;
}

.navContainer {
	display: grid;
  grid-template-columns: repeat(5, 1fr);
	grid-template-rows: auto;
}

.navContainer a {
	height: 0.85em;
}

@media only screen and (max-width: 768px) {
	.navContainer a {
		height: 2.5em !important;
	}
}

.navBtn {
	width: 100%;
	color: var(--secondaryWhite);
	background-color: var(--primaryRed);
}

.navBtn[active]{
	color: var(--primaryRed);
	background-color: var(--primaryWhite);
}

.navBtn:hover{
	background: var(--primaryRed);
	filter: brightness(85%);
}

.navBtn[active]:hover{
	background: var(--secondaryWhite);
}

.doubleLineBtn {
	line-height: 0.75em;
	position: relative;
	top: 0.35em;
}

#mainNav{
	width: calc(100% - 5vw);
	margin-bottom: 1vh;
	padding: 1vh;
}

#mainNav a button{
	height: auto;
	padding: 0.5vh;
	font-size: 1.5vw;
	border-right-color: var(--primaryRed);
}

#mainNav a:last-of-type button{
	border-right: none;
}

#mainContainer {
	display: grid;
	grid-template-columns: 1fr 3fr;
	grid-template-rows: 5vh auto;
	grid-column-gap: 0.5vw;
	grid-row-gap: 8pt;
	grid-template-areas: "addNew sort" "filter content";
	margin-left: 5vw;
	margin-right: 5vw;
	margin-bottom: 3vh;
}

@media only screen and (max-width: 760px) {
	#mainContainer {
		grid-template-columns: 1fr;
		grid-template-rows: auto;	
		grid-template-areas: "addNew" "sort" "filter" "content";
	}

	#mainNav{
		padding-bottom: 0;
	}

	#mainNav a button{
		font-size: 5vw;
	}

	.navContainer{
		grid-template-columns: repeat(3, 1fr);
		grid-template-rows: 1fr 1fr;
		row-gap: 0.5vh;
	}

	.doubleLineBtn {
		top: -0.175em;
	}
}

.contentHeader{
	position: relative;
	left: 5vw;
	font-family: Arial, Helvetica, sans-serif;
	color: var(--primaryRed);
	font-size: 2vw;
}

#sortContainer {
	grid-area: sort;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: 100%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding-right: 8pt;
	padding-left: 8pt;
	border: thin solid rgba(180,180,180,1.00);
	background-color: rgba(255,255,255,1.00);
	column-gap: 1em;

	padding-top: 1vh;
	padding-bottom: 1vh;
	height: 85%;
	width: 100%;
}

#sortDirection{
	width: 100%;
}

@media only screen and (max-width: 760px) {
	#sortContainer{
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 1fr 1fr;
		row-gap: 1vh;

		height: fit-content;
		height: -moz-max-content;
	}
}

#mainContentContainer {
	grid-area: content;	
	margin-bottom: 1vh;
}

#mainContent{
	margin: 0;
	padding: 0;
}

#mainContent li {
	display: grid;
	grid-template-columns: 40% 5% 55%;
	grid-template-rows: auto;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;

	margin: 0;
	padding: 0;
	border: thin solid rgba(180,180,180,1.00);

	background-color: rgba(255,255,255,1.00);

	overflow: hidden;
}

#mainContent li .Nosaukums{
	padding-left: 0.5em;
}

@media only screen and (max-width: 760px) {
	#mainContent li{
		grid-template-columns: 1fr auto;
		grid-template-areas: "title info" "btn btn";
		row-gap: 1vh;
		grid-template-rows: auto auto;

		width: 100%;

		margin-top: 1vh;
	}

	#mainContent .infoButton{
		grid-area: info;
		margin-right: 1em;
		height: 100%;
		display: flex;
		justify-content: center;
		align-content: center;
		margin-top: 0.2em;
	}

	#infoPanel[misc-kratuve] #infoTriangle{
		display: none;
	}

	#infoPanel{
		min-width: 90vw;
		z-index: 110;
		padding-left: 2vw !important;
		padding-right: 2vw !important;
	}

	#mainContent li .nosaukumsDancim{
		font-size: 5vw;
		margin-top: 0.5vh;
		grid-area: title;
	}

	#mainContent li .poguBloks{
		max-width: 100%;
		overflow: hidden;
		height: 100%;
		font-size: 5vw;
		border-top: 1px solid grey;
		grid-area: btn;
	}

	#mainContent li .poguBloks div:first-of-type{
		border-left: none;
	}

	#mainContent li .poguBloks div{
		padding: 0;
		text-align: center;
	}

	#mainContent li .poguBloks img{
		display: none;
	}
}

#filterContainer{
	background-color: var(--secondaryWhite);
	height: fit-content;
	height: -moz-max-content;
	max-width: calc(100% - 2vw);
	grid-area: filter;
	text-align: center;

	padding: 1vw;

	border: thin solid rgba(180,180,180,1.00);
	font-family: Arial, Helvetica, sans-serif;
}

#filterSearch{
	height: 2vh;
	width: 100%;
	display: grid;
	grid-template-columns: 7fr 1fr 1fr;
	column-gap: 5px;
}

#filterSearch input{
	width: 95%;
	grid-column: 1 / span 2;
	height: fit-content;
	height: -moz-max-content;
	font-size: 1.5vh;
}

@media only screen and (max-width: 760px){
	#filterSearch input{
		font-size: 3vw;
	}
}

#filterSearch button{
	border: 1px solid lightgrey;
	width: 100%;
	height: 100%;
	font-size: 100%;
	margin-top: 10%;

	height: 2.5vh;
	position: relative;
	top: -0.5vh;
	font-size: 1.5vh;
}

#filterSearch button i{
	border: none;
	text-align: center;
	width: 100%;
	font-weight: bold;
	font-size: auto;
}

#filterContainer [data-filterType]{
	margin-bottom: 0.5vh;
}

#filterContainer select[data-filterType="dropdown"]{
	border: 1px solid grey;
	width: 100%;
}

#filterContainer select[data-filterType="dropdown"] option:first-of-type{
	font-weight: bold;
}

#filterContainer div[data-filterType="input"]{
	display: grid;
	grid-template-columns: 1fr 5fr;
	grid-template-rows: auto;
	column-gap: 0.25vw;
	width: 100%;
	margin-top: 1vh;
	text-align: left;
	white-space: nowrap;
}

#filterContainer div[data-filterType="input"] div{
	width: 100%;
	float: right;
}

#filterContainer div[data-filterType="input"] div input{
	width: 40%;
	margin-left: 0.5vw;
	float: right;
}

#filterContainer div[data-filterType="input"] span{
	text-align: center;
	width: 100%;
	margin-bottom: 0.5vh;
	font-weight: 600;
}

#filterContainer div[data-filterType="checkbox"]{
	margin-top: 0.5vh;
	text-align: left;
}

#filterContainer div[data-filterType="checkbox"] span{
	font-weight: 600;
}

#filterContainer div[data-filterType="checkbox"] label{
	position: relative;
	bottom: 5px;
}

#filterContainer div[data-filterType="checkbox"] input{
	-webkit-appearance: none;
	background-color: #fafafa;
	border: 1px solid #cacece;
	box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05);
	padding: 9px;
	border-radius: 3px;
	display: inline-block;
	position: relative;
	margin-left: 2vw;
}

#filterContainer div[data-filterType="checkbox"] input:active, #filterContainer div[data-filterType="checkbox"] input:checked:active {
	box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);
}

#filterContainer div[data-filterType="checkbox"] input:checked {
	background-color: var(--primaryRed);
	border: 1px solid #adb8c0;
	box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05), inset 15px 10px -12px rgba(255,255,255,0.1);
	color: #99a1a7;
}

#filterContainer button[type="submit"]{
	border: 1px solid grey;
	margin-top: 1vh;
	padding-top: 0.5vh;
	padding-bottom: 0.5vh;
	width: 100%;
}

#addNewDanceContainer{
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto;
	column-gap: 1vw;
	margin-left: 4vw;
	margin-right: 5vw;

	grid-template-areas: "mainData steps" "editor editor";

	font-family: Arial, Helvetica, sans-serif;
}

#addNewDanceContainer > div{
	border-right: 1px dotted grey;
	padding: 1vw;
	padding-right: 2vw;
}

#addNewDanceContainer > div:last-child{
	border-right: none;
}

#addNewDanceContainer h3{
	color: var(--primaryRed);
}

#addNewDanceMainData{
	padding-left: 5vw;
	grid-area: mainData;
}

#addNewDanceMainData label{
	color: var(--primaryRed);
}

#addNewDanceMainData input{
	margin-bottom: 1vh;
}

#stepEditor{
	border: 1px solid grey;
	width: 100%;
}

.stepEditorEntry{
	width: 100%;
	display: grid;
	grid-template-columns: 1fr 3fr;
	column-gap: 1vw;
	border-bottom: 1px solid grey;
}

.stepEditorEntry:last-child{
	border-bottom: none;
}

.stepEditorEntryTitle{
	padding: 0.5vw;
	border-right: 1px solid grey;

	padding: 1vw;
}

.stepEditorEntryTitle input{
	color: var(--primaryRed);
	font-weight: bold;
}

.stepEditorEntryValue{
	width: 100%;
	padding: 1vw;
}

.stepEditorEntryValue textarea{
	width: 80%;
	height: auto;
}

.fieldEntry{
	list-style-type: none;
	margin-left: -2.5vw;
}

.fieldEntry li{
	border: 1px solid grey;
	border-bottom: none;

	padding: 1.5vh;

	display: grid;
	grid-template-columns: 30% 3fr;
	column-gap: 1vw;
	row-gap: 1vh;
}

.fieldEntry li:last-of-type{
	border-bottom: 1px solid grey;
}

.fieldEntry li div{
	border-right: 1px solid grey;
	padding-right: 0.5vw;
}

#otherFields li select{
	height: fit-content;
	height: -moz-max-content;
	position: relative;
	top: calc(50% - 1em);
	width: 100%;
}

#baseDanceSelect{
	margin-top: 0.5vh;
	padding: 0.5vh;

	display: none;
}

.baseModalBG{
	background-color: rgba(0,0,0,0.75);
	z-index: 100;
	width: 100vw;
	height: 100vh;
	position: fixed;
	top: 0;
	left: 0;
	
	display: none;
}

.baseModal{
	position: relative;
	left: 45vw;
	top: 45vh;
	width: 10%;
	height: auto;
	text-align: center;
	background-color: white;
	padding: 1vw;

	border-radius: 5px;
}

#newValueModal input{
	margin-bottom: 1vh;
	width: 90%;
}

.addEntrySubmit{
	width: 7vw;
	font-size: 1vw;
	margin-left: 5vw;
	text-align: center;
	border: 1px solid grey;
	border-radius: 2px;
}

.errorMsg, .error {
	color: red;
	font-family: "Open sans", sans-serif;
}

.loginContainer{
	width: 100vw;
	height: 100vh;
	position: absolute;
	top: 0;
	left: 0;
	background-color: var(--primaryRed);
}

.loginContainer > div{
	position: relative;
	left: 40%;
	top: 10%;
	text-align: center;
	width: 20vw;
	height: auto;
}

.loginContainer > div h2{
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	color: var(--primaryWhite);
	font-size: 5vh;
}

.loginContainer > div form{
	background-color: var(--secondaryWhite);
	height: 80%;
	padding: 1vw;
}

.loginContainer > div form input{
	margin-bottom: 1vh;
	width: 80%;
}

.loginContainer > div form input[type="submit"]{
	border: 1px solid grey;
	width: 40%;
	margin-top: -0.5vh;
}

.loginContainer > div form{
	/*color: var(--primaryRed);*/
	font-family:Arial, Helvetica, sans-serif;
}

#mainVideoContent{
	gap: 1vw;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-auto-rows: auto;
}

@media only screen and (max-width: 760px) {
	#mainVideoContent{
		grid-template-columns: repeat(2, 1fr);
		column-gap: 2.5vw;
	}
}

.vidContainer{
	position: relative;
	padding-bottom: 50%;
	cursor: pointer;
	width: 100%;
}

.vidContainer img{
	position: absolute;
	object-fit: cover;
	width: 100%;
	height: 100%;
	top: 0;
}

#mainVideoContent{
	width: 100%;
}

#mainVideoContent > div{
	font-family: "Open sans", sans-serif;
}

#mainVideoContent > div h2{
	margin-top: 0.25em;

	font-weight: bold;
	font-size: 2.5vh;

	color: var(--primaryRed);
}

#mainVideoContent > div h3{
	color: #777777;
	font-size: 1.75vh;
	margin-top: -1em;
}

#mainContainerVideo{
	display: grid;
	grid-template-columns: 1fr 3fr;
	grid-template-rows: 5vh auto;
	grid-column-gap: 0.5vw;
	grid-row-gap: 8pt;
	grid-template-areas: "addNew sort" "filter content";
	margin-left: 5vw;
	margin-right: 5vw;
	margin-bottom: 3vh;
}

.dropdown{
	/*-webkit-appearance: none;
	font-size: 1.2vh;*/
	font-size: 1.25vh;
}

@media only screen and (max-width: 760px) {
	.dropdown{
		font-size: 3.5vw;
		width: 100%;
	}

	#mainContainerVideo{
		grid-template-columns: auto;
		grid-template-rows: auto auto auto auto;
		grid-template-areas: "addNew" "sort" "filter" "content";
	}

	#videoTopSpacing{
		height: 2vw;
	}
}

#imgUploaderContainer{
	display: none;
}

.textImg{
	margin-top: 0;
	margin-left: 0;
	height: auto;
}

.textImg[data-pos="Full"]{
	width: 100%;
}

.textImg[data-pos="Left (Text Left)"]{
	max-width: 50%;
	margin-right: 10px;
}

.textImg[data-pos="Left (Text Right)"]{
	max-width: 50%;
	float: left;
	margin-right: 10px;
}

.textImg[data-pos="Right"]{
	max-width: 50%;
	float: right;
}

.textImg img{
	width: 100%;
}

.textImg figcaption{
	margin-top: 10px;
	filter:brightness(115%);
	color: grey;
}

#originalIMGUploader img{
	width: 100%;
	height: auto;
}

#originalIMGUploader div:nth-child(even){
	border-right: none;
}

#originalIMGUploader button{
	cursor: pointer;
}

.originalIMGInputContainer{
	display: grid;
	grid-template-columns: 90% 10%;
}

#originalIMGUploader button[data-type="removeEntry"]{
	position: relative;
	top: 0;
	border: none;
	background-color: rgba(0,0,0,0);
	color: red;
	font-size: 1.75vh;
	width: 100%;
	height: auto;
}

.originalIMGOrder{
	text-align: center;
	grid-column: span 2;
}

.originalIMGOrder button[data-sort]{
	border: 1px solid grey;
	background-color: rgba(0, 0, 0, 0);
	font-size: 2vh;
	width: 10%;
}

.originalIMGOrder button[data-sort]:last-of-type{
	margin-left: 5%;
}

#originalIMGUploader [data-orderEl]{
	display: none;
}

#sortContainer #filterSearch{
	margin-top: -1%;
}

select option[title]{
	font-weight: bold;
	font-size: 1.25em;
	color: var(--primaryRed);
}

.addEntryBtn{
	height: 4vh;
	cursor: pointer;
	text-align: left;

	background-color: var(--primaryWhite);
	font-family: Arial, Helvetica, sans-serif;
	transition: filter 0.2s;

	border: thin solid rgba(180,180,180,1.00);
}

.addEntryBtn a{
	display: inline-block;
	width: 100%;
	height: 100%;
	font-size: 2.4vh;
	position: relative;
	top: 0.25em;
	margin-left: 1vw;
}

.addEntryBtn a i{
	padding-right: 0.5vw;
	border-right: 1px solid #454545;
}

.addEntryBtn:hover{
	filter: brightness(85%);
}

#addVideoBtn{
	grid-area: addNew;
	width: 100%;
}

#addDanceBtn{
	grid-area: addNew;
	width: 100%;
}

.videoEditBtnContainer{
	margin-top: 1vh;

	display: grid;
	grid-template-columns: 1fr 1fr;
	height: 3vh;
	column-gap: 0.5vw;
}

.videoEditBtnContainer button{
	width: 100%;
	border: 1px solid grey;
	background-color: white;
	font-size: 2vh;
}

#mainAudioContent{
	margin: 0;
	padding: 0;
	max-height: 100%;
	overflow-y: auto;
	display: none;
}

#mainAudioContent::-webkit-scrollbar {
	width: 5px;
}

#mainAudioContent::-webkit-scrollbar-track {
	background-color: #EEE;
}

#mainAudioContent::-webkit-scrollbar-thumb {
	background-color: var(--primaryRed);
}

#mainAudioContent > li {
	display: grid;
	grid-template-columns: auto 2fr 2fr auto 1fr 0.55fr;
	grid-template-rows: auto;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	align-items: center;

	margin: 0;
	padding: 1px 0 1px 0;
	/* border: thin solid rgba(180,180,180,1.00); */

	background-color: white;
	transition: background-color 0.5s;

	overflow: hidden;

	grid-template-areas: "play title author admin otherinfo add";
	column-gap: 0.5vw;
	margin-bottom: 2px;
}

#mainAudioContent > li[data-isArchivalEntry], #mainAudioContent > li[data-isLiveEntry]{
	grid-template-areas: "play title title admin otherinfo add";
}

#mainAudioContent > li[data-isArchivalEntry] .songTitleSuperContainer, #mainAudioContent > li[data-isLiveEntry] .songTitleSuperContainer {
	grid-area: title;
}

#mainAudioContent > li:hover{
	background-color: #eee;
}

#mainAudioContent > li[forceActive]{
	background-color: #eee;
}

#mainAudioContent .amplitude-active-song-container{
	background-color: #bff3ff;
}

#mainAudioContent:hover .amplitude-active-song-container .entryAudioPlay .fa-play{
	display: none;
}

#mainAudioContent:hover .amplitude-active-song-container .entryAudioPlay .activeIcon{
	display: block;
}

#mainAudioContent .entryAudioPlay .activeIcon{
	display: none;
}

#mainAudioContent .entryAudioPlayContainer{
	grid-area: play;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	top: 1px; /* Account for slight icon offset */
}

#mainAudioContent .entryAudioAddContainer{
	grid-area: add;
	display: grid;
	grid-template-columns: repeat(3, auto);
	column-gap: 0.75rem;
	font-size: 2vh;
	padding-left: 1rem;
}

#mainAudioContent .entryAudioAddContainer button {
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

#mainAudioContent > li:hover .entryAudioButton{
	visibility: visible;
}
#mainAudioContent > li[forceActive] .entryAudioButton{
	visibility: visible;
}

#mainAudioContent .audioBtnBlock{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: auto;

	grid-template-areas: "edit delete";

	padding-top: 5px;
	padding-bottom: 5px;
	width: 100%;
	grid-area: admin;
}

#mainAudioContent .audioBtnBlock i{
	text-align: center;
	right: 10%;
	font-size: 2vh;
}

#mainAudioContent .audioBtnBlock .pogaIeksSatura:last-child{
	border-right: 1px solid grey;
}

@media only screen and (max-width: 760px) {
	#mainAudioContent .audioBtnBlock{
		grid-template-areas: "edit add delete";
		padding-bottom: 0;
	}

	#mainAudioContent li{
		grid-template-columns: auto auto 1fr 0.5fr;
		grid-template-areas: "play title author add";

		margin-bottom: 0.25rem;
		text-align: left;

		padding-top: 8px;
		padding-bottom: 8px;
	}

	#mainAudioContent > li[data-isArchivalEntry], #mainAudioContent > li[data-isLiveEntry] {
		grid-template-areas: "play title author add";
	}

	#mainAudioContent .audioEntryTitle{
		font-size: 0.9em;
	}

	#mainAudioContent li > .audioEntryOtherInfo{
		display: none;
	}

	#mainAudioContent li .entryAudioButton{
		font-size: 0.6em !important;
	}

	#mainAudioContent .entryAudioContainer{
		text-align: center;
		position: relative;
		font-size: 2em;
		margin-top: 0;
		margin-bottom: 0;
		top: 1px; /* Account for slight icon offset */
		display: flex;
		align-items: center;
		justify-content: center;
	}

	#mainAudioContent li .nosaukumaFlows{
		float: none;
		font-size: 100%;
		display: block;
	}

	#musicExtraMobileSpacing {
		height: 17vh;
	}

	#mainAudioContent li .songTitleAuthor{
		font-size: 1.5vh;
	}

	.musicSidebarBtn .bigBtnText{
		font-size: 0.8em;
	}
}

#mainMusicContainer {
	display: grid;
	grid-template-columns: 1fr 3fr;
	grid-template-rows: 5vh 15vh auto;
	grid-column-gap: 0.5vw;
	grid-row-gap: 2vh;
	grid-template-areas: "addNew sort"  "player player" "sidebar content";
	margin-left: 5vw;
	margin-right: 5vw;
	margin-bottom: 3vh;
}

@media only screen and (max-width: 760px) {
	#mainMusicContainer {
		grid-template-columns: 1fr;
		grid-template-rows: auto;	
		grid-template-areas: "addNew" "sidebar" "content" "player";	
	}

	#mainAudioContent li .nosaukumaFlows{
		margin-top: 5px;
	}
}

.videoWrapper{
	margin-bottom: 1vh;
}

.topSpacing{
	height: 5vh;
	width: 100%;
}

.ck-editor__editable_inline {
    min-height: 15em;
}

.ck-editor{
	width: 66vw !important;
}

#videoTopFilterContainer{
	grid-area: sort;
	grid-template-rows: 100%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	border: thin solid rgba(180,180,180,1.00);
	background-color: rgba(255,255,255,1.00);
	column-gap: 1em;

	height: 100%;
	width: 100%;
}

#videoTopFilterContainer #filterSearch{
	padding-top: 1vh;
	padding-bottom: 1vh;
}

#videoTypeSelect{
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
}

#videoTypeSelect button{
	height: 4.9vh;
	font-size: 0.9vw;
	background-color: white;
	font-family: "Open Sans", sans-serif;

	filter: brightness(85%);

	transition: filter 0.2s;
}

#videoTypeSelect button[active]{
	filter: brightness(100%);
	color: var(--primaryRed)
}

#videoTypeSelect button:hover{
	filter: brightness(90%);
}

@media only screen and (max-width: 760px) {
	#videoTypeSelect{
		grid-auto-flow: row;
	}
	#videoTypeSelect button{
		font-size: 5vw;
		height: 6vh;
		border-bottom: 1px solid lightgrey;
		border-right: none;
	}
	#videoTypeSelect button:last-child{
		border-bottom: none;
	}
}

/*Contacts page*/

.Heading {
	font-size: 36pt;
	font-weight: bold;
	text-align: left;
	line-height: 36pt;
	padding-bottom: 12pt;
	border-bottom: thin solid rgba(180,180,180,1.00);
	margin-bottom: 8pt;
	margin-top: 0pt;
	font-family: "Roboto Slab";
	color: rgba(69,69,69,1.00);
}

#contactsContainer {
	box-sizing: border-box;
	padding-top: 2vh;
	padding-bottom: 8pt;
	margin-left: auto;
	margin-right: auto;
	font-family: "Open Sans", sans-serif;
	max-width: 1300px;
	padding-right: 2em;
	padding-left: 2em;
	position: relative;

	width: 2/3;

	margin-top: 3vh;
	margin-bottom: 3vh;

	text-align: justify;
}

@media only screen and (max-width: 1600px) {
	#contactsContainer {
		width: 80%;
	}
}

@media only screen and (max-width: 1280px) {
	#contactsContainer {
		width: 90%;
	}
}
@media only screen and (max-width: 1000px) {
	#contactsContainer {
		width: 100%;
		grid-column-gap: 8pt;
		grid-row-gap: 8pt;
		grid-template-areas: "brandn"  "header"  "descrp"  "sidebr"  "mediac" "feet" "spon";
	}
}

.tab{
	margin-left: 2em;
}

#contactsContent a{
	color: blue;
}

#contactsContent h4{
	font-size: 1.2em;
}

.headerMainLink{
	display: table-cell;
	vertical-align: middle;
}

.headerMainLink img{
	height: min(14vh, 9.5vw);
	vertical-align: middle;
	margin-top: -3.5vh;
	margin-left: -8%;
}

.headerMainLink span{
	float: right;
	font-size: 3vw;
	margin-left: -1.5vw;
	margin-top: 1vh;
}

@media only screen and (max-width: 760px) {
	.headerMainLink span{
		font-size: 10vw;
		margin-top: 0;
	}

	.headerMainLink img{
		height: auto;
		width: 15vw;
		margin-left: -4%;
		margin-top: -3vh;
	}
}

.infoModalContent{
	background-color: white;
	font-family: "Roboto Slab";

	width: 20vw;
	height: 15vh;
	padding: 10px;

	border-radius: 2px;
}

#deleteConfirmation{
	left: 40vw;
	top: 42.5vh;

	position: relative;
	text-align: center;
}

#deleteConfirmation h2 span{
	color:red;
}

#deleteConfirmation button{
	width: 15%;
}

.groupAddSelectContainer{
	margin-bottom: 1vh;
	border-bottom: 1px solid lightgrey;
	padding-bottom: 1vh;
	width: 100%;
}

.groupAddSelectContainer button{
	margin-right: 1vw;
}

.contactsPartnerContainer img{
	height: 5em;
	float: left;
	margin-right: 1vw;
}

.contactsPartners{
	display: grid;
	row-gap: 2vh;
}

@media only screen and (max-width: 760px){
	.contactsPartnerContainer img{
		margin-right: 3vw;
	}

	.tab{
		margin-left: 0;
	}
}

#contactsFinancial{
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: repeat(3, 1fr);
	width: 80%;
	height: fit-content;
	height: -moz-max-content;
	column-gap: 5px;
	row-gap: 10px;
}

#contactsFinancial > div{
	width: 100%;
	display: grid;
	grid-auto-flow: column;
}

#contactsFinancial img{
	display: table-cell;
	vertical-align: bottom;

	height: 12.5vh;
	width: auto;
}

#contactsSupportContainer{
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr;

	margin-top: 3vh;
	column-gap: 10%;
}

#otherSupportImgContainer{
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 100%;
	width: calc(100% - 10vw);
	height: 10vh;
	column-gap: 10%;

	margin-left: 5vw;
}

#otherSupportImgContainer div{
	width: 100%;
	height: 100%;
}

#otherSupportImgContainer > div > img{
	width: auto;
	max-height: 100%;
}

/*@-moz-document url-prefix() {
	#imgEtnografiskais{
		max-width:100% !important; 
		max-height: 100% !important;
	}

	#otherSupportImgContainer{
		grid-template-rows: min-content !important;
	}
}*/

#imgEtnografiskais{
	width: auto;
	height: 100%;
}

@media only screen and (max-width: 760px){
	#contactsSupportContainer{
		grid-template-columns: 1fr;
		grid-template-rows: auto auto;
		row-gap: 5vh;
	}

	#contactsSupportContainer h4{
		text-align: left;
	}

	#contactsFinancial{
		margin-left: 10%;
	}
}

#contactsPeople{
	display: grid;
	grid-template-rows: 1fr;
	grid-template-columns: 1fr 1fr;
	width: 80%;

	column-gap: 10%;
	margin-left: 10%;

	text-align: center;
}

#contactsPeople img{
	width: 80%;
	height: auto;
}

#contactsPeople b{
	font-size: 1.5em;
}

#contactsPeople i{
	font-size: 1.25em;
}

@media only screen and (max-width: 760px){
	#contactsPeople{
		grid-template-columns: auto;
		grid-template-rows: auto auto;
		margin-left: 0;
		width: 100%;
	}

	#contactsPeople div:last-child{
		border-top: 1px solid lightgrey;
		padding-top: 2.5vh;
	}
}

#filterCollapse{
	display: none;
	grid-gap: 50%;
	height: 100%;
	width: 100%;
	grid-template-rows: 1fr;
	border-bottom: 1px solid grey;	
}

#filterCollapse[collapsed]{
	border-bottom: none;
}

#filterCollapse span{
	font-size: 7vw;
	margin-left: 3vw;
}

#filterCollapse button{
	font-size: 7vw;
	border: none;
	width: 11vw;
	height: 11vw;
	text-align: center;
}

#filterCollapse button i{
	border: none;
	text-align: center;
}

#filterContent{
	display: block;
}

@media only screen and (max-width: 760px) {
	#filterContent{
		display: none;
		padding: 2vw;
	}

	#filterCollapse{
		display: block;
	}

	#sponTxt{
		float: left;
	}

	.musicFilterContainer{
		margin-top: 3.5vh;
	}

	.musicFilterContainer #filterSearch{
		margin-bottom: 0;
	}
}

#sponTxt{
	width: 100%;
	margin-bottom: 0.5vh;
}

#sponTxt span{
	float: right;
}

#mapSVGContainer{
	height: 90vh;
}

#mapSVG{
	width: 92vw;
	height: 90vh;
	margin-left: 0;
}

#mapSidebar{
	position: absolute;
	right: 0;
	top: 14.9vh;
	width: 12vw;
	height: 75%;
}

#mapSidebar[data-open]{
	width: auto;
}

#mapNav{
	-webkit-box-shadow: -10px 0px 10px -4px rgba(0,0,0,0.4);
	-moz-box-shadow: -10px 0px 10px -4px rgba(0,0,0,0.4);
	box-shadow: -10px 0px 10px -4px rgba(0,0,0,0.4);

	background-color: white;
	max-width: 10vw;
	height: 100%;

	float: right;

	padding-left: 1vw;
	padding-right: 1vw;
	padding-top: 3vh;

	transition: box-shadow 0.25s;

	z-index: 20;
	position: relative;
}

#mapNav[disableShadow]{
	-webkit-box-shadow: -10px 0px 10px -4px rgba(0,0,0,0);
	-moz-box-shadow: -10px 0px 10px -4px rgba(0,0,0,0);
	box-shadow: -10px 0px 10px -4px rgba(0,0,0,0);
}

#regionPanel{
	background-color: #fafafa;
	border-right: 3px solid rgba(119, 119, 119, 0);
	height: 101%;

	-webkit-box-shadow: -10px 0px 10px -4px rgba(0,0,0,0.4);
	-moz-box-shadow: -10px 0px 10px -4px rgba(0,0,0,0.4);
	box-shadow: -10px 0px 10px -4px rgba(0,0,0,0.4);

	padding: 1vh;

	transition: opacity 0.5s ease-in-out, right 0.5s ease-in-out, border-color 2s ease-in-out;
	width: 25vw;
	position: relative;
	right: -25vw;

	z-index: 10;
	overflow-x: hidden;
	overflow-y: auto;

	visibility: hidden;
	opacity: 0;
}

#regionPanel[data-open]{
	right: 0;
	opacity: 1;
	border-color: rgba(119, 119, 119, 1);
}

#regionPanel h2{
	text-align: center;
	font-family: "Roboto Slab";
	font-size: 3.5vh;
	color: #454545;
	position: relative;
	right: 1vw;
}

#regionPanel div[panelClose]{
	font-size: 2vw;
	cursor: pointer;
	float: left;
}

#regionPanel svg{
	border: 1px solid black;
	width: 100%;
	height: 20vh;
}

 #panelDances{
	width: calc(100% - 2vw);
	padding-left: 1vw;
}

 #panelDances li{
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	grid-template-areas: "title title" "video more";

	padding-right: 2vw;
	margin-bottom: 2vh;
}

#panelDances li .Nosaukums{
	grid-area: title;
	width: 100%;
	border-bottom: 1px solid grey;
	line-height: 2em;
}

#panelDances li .pogaIeksSatura{
	border-bottom: 1px solid grey;
}

 #panelDances li .pogaIeksSatura:last-of-type{
	border-right: 1px solid grey;
}

#mapNav > div{
	cursor: pointer;
	background-color: white;
	padding-top: 1vh;

	transition: filter 0.25s, transform 0.25s;
	border-radius: 5px;

	transform: scale(0.8);
}

#mapNav > div:hover{
	filter: brightness(90%);
	transform: scale(1);
}

#mapNav div img{
	width: 80%;
	margin-left: 10%;

	-webkit-box-shadow: -5px 5px 5px 0px rgba(170,170,170,1);
	-moz-box-shadow: -5px 5px 5px 0px rgba(170,170,170,1);
	box-shadow: -5px 5px 5px 0px rgba(170,170,170,1);
}

#mapNav div .Nosaukums{
	color: #555;
	margin-top: 1vh;
}

#mapNav > div[active]{
	transform: scale(1.2) !important;
}

#panelDances .vidContainer{
	border: 1px solid grey;
}

#dancePanelPrimaryBtnContainer{
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 1vw;
	width: 100%;
	margin-top: 1vh;
}

#dancePanelPrimaryBtnContainer .pogaIeksSatura{
	border: 1px solid grey;
	grid-template-columns: 1fr 3fr;
}

.vidThumbnailOverlay{
	z-index: 100;
	background-color: rgba(0,0,0, 0.5);
	position: absolute;
	color: white;
	text-align: center;
	font-size: 7vh;

	width: 100%;
	height: 100%;

	display: flex;
	align-items: center;
	justify-content: center;

	transition: color 0.25s;
}

.vidThumbnailOverlay i{
	display: inline-block;
	vertical-align: middle;
}

.vidThumbnailOverlay:hover{
	color: lightgrey;
}

#panelDancesFullMore{
	margin-top: 1vh;
	border: 1px solid grey;
	grid-template-columns: 1fr 8fr;
}

#panelDancesFullMore .bttnText{
	font-size: 3vh;
}

#dancePanelInfo{
	font-family: "Roboto slab";
	font-size: 2vh;
}

#dancePanelInfo span{
	line-height: calc(1em + 1.5vh);
}

#dancePanelInfo span[data-type]{
	display: grid;
	grid-template-columns: min-content auto min-content;
	column-gap: 0.5em;
}

#dancePanelInfo span[data-type] b{
	white-space: nowrap;
}

#fullDancePanel{
	display: none;
}

#danceInfoModal .danceInfoContent{
	background-color: lightgrey;
	font-family: "Roboto slab";

	padding-top: 1vh;
	padding-bottom: 1vh;
}

#danceInfoModal .danceInfoContent span[data-type="year"]{
	font-size: 70%;
	color: #333;
}

#overallMap{
	height: 85vh;
	width: 100%;
	z-index: 0;
}

.panelDanceSelector{
	width: 50%;
	display: grid;
	grid-template-columns: 2fr 1fr 2fr;
	text-align: center;
	position: relative;
	left: 25%;
	margin-top: 1vh;
	font-family: "Roboto slab";
}

.panelDanceSelector span{
	font-size: 2vh;
	color: #333;
	font-weight: bold;
	margin-top: 0.5vh;
}

.panelDanceSelector button{
	background-color: rgba(0,0,0,0);
	color: #555;
	border: none;
	font-size: 3vh;
	cursor: pointer;

	transition: color 0.5s;
}

.panelDanceSelector button:hover{
	color: #AAA;
}

.panelDanceSelector button[disabled]{
	cursor: default;
	color: #CCC;
}

.infoButton{
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;

	transition: color 0.5s;
	font-size: 2.25vh;
	font-weight: bold;
}

.infoButton:hover{
	color: rgba(123,149,255,1.00);
}

.infoButton[forceActive]{
	color: rgba(123,149,255,1.00);
}

#infoPanel{
	position: absolute;
	text-align: center;
	top: 0;
	left: -100vw;
	
	opacity: 0;

	width: 20vw;
	background-color: var(--primaryWhite);
	border: 1px solid var(--primaryRed);
	border-radius: 5px;
	padding: 0 0.4vw 10px 0.4vw;
	font-family: sans-serif;

	transition: opacity 0.5s;
	font-size: 2vh;
}

#infoPanel [data-type="title"]{
	color: var(--primaryRed);
	font-weight: normal;
}

#infoPanel > span{
	margin-bottom: 0.4em;
	display: block;
}

.infoPanelYearContainer{
	font-size: 0.6em;
	font-weight: lighter;
	color: grey;
}

#infoTriangle{
	width: 0;
	height: 0;

	border-left: 1.5vh solid transparent;
	border-right: 1.5vh solid transparent;
	border-bottom: 1.5vh solid var(--primaryRed);

	position: relative;
	top: -1.5vh;
	left: 0.5vw;
}

#mapTooltip{
	position: absolute;
	border: 1px solid black;
	background-color: #FFF;
	font-family: sans-serif;
	font-size: 1vw;
	left: 0;
	top: 0;
	padding: 3px;
	border-radius: 5px;
	margin-top: 10vh;
	margin-left: 1vw;
	visibility: hidden;
	transition: opacity 0.3s;
}

#zoomOutButton{
	position: absolute;
	left: 4vw;
	top: 20vh;
	background-color: #FFF;
	border: 1.5px solid black;
	width: 3vw;
	height: 3vw;
	border-radius: 2vw;
	font-size: 2vw;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	transition: filter 0.25s;
	display: none;

	box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.5);
}

#zoomOutButton:hover{
	filter: brightness(85%);
}

/* Interview section */

#mainInterviewContent{
	gap: 1vw;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-auto-rows: auto;
	row-gap: 2em;
}

@media only screen and (max-width: 760px) {
	#mainInterviewContent{
		grid-template-columns: 1fr;
		column-gap: 2.5vw;
	}
}

.interviewVidContainer{
	position: relative;
	padding-bottom: 50%;
	cursor: pointer;
	width: 100%;
	grid-area: vid;
}

.interviewVidContainer img{
	position: absolute;
	object-fit: cover;
	width: 100%;
	max-height: 100%;
	top: 0;
}

#mainInterviewContent{
	width: 100%;
	padding-left: 1vw;
}

#mainInterviewContent > div{
	font-family: Arial, Helvetica, sans-serif;
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 1vw;

	grid-template-areas: "vid info";
	cursor: pointer;
	height: 100%;

	transition: filter 0.3s, background-color 0.3s;
	padding: 10px;
}

#mainInterviewContent > div:hover {
	background-color: rgba(0,0,0,0.1);
}

#mainInterviewContent > div:last-child{
	border-bottom: none;
}

#mainInterviewContent > div h2{
	margin-top: 0.25em;
	margin-bottom: 0.25em;

	font-weight: bold;
	color: var(--primaryRed);
}

#mainInterviewContent > div h3{
	color: #777777;
	font-size: 2vh;
	margin-top: -1em;
}

#mainContainerInterview{
	display: grid;
	grid-template-columns: 1fr 3fr;
	grid-template-rows: 5vh auto;
	grid-column-gap: 0.5vw;
	grid-row-gap: 8pt;
	grid-template-areas: "addNew sort" "content content";
	margin-left: 5vw;
	margin-right: 5vw;
	margin-bottom: 3vh;
}

@media only screen and (max-width: 760px) {
	#mainContainerInterview{
		grid-template-columns: auto;
		grid-auto-rows: auto;
		grid-template-rows: auto;
	}

	#mainInterviewContent > div{
		grid-template-areas: "vid" "info";
		grid-template-columns: auto;
		row-gap: 2vh;

		padding-bottom: 0.75em;
		border-bottom: 1px solid #AAA;
	}

	#interviewTopSpacing{
		height: 2vw;
	}
}

.interviewDescription{
	font-size: 1.5vh;
}

.interviewInfo{
	grid-area: info;
}

.interviewInfo h2{
	font-size: 3.5vh;
}

#musicAudioContainer audio{
	width: 50%;
}

#musicAudioContainer{
	text-align: center;
	display: grid;
	grid-template-columns: auto;
	padding-left: 25%;
	width: 100%;
	row-gap: 1vh;
}

#musicAudioContainer span {
	color: white;
	font-size: 2vh;
	font-family: Arial, Helvetica, sans-serif;
}

@media only screen and (max-width: 760px) {
	#musicAudioContainer audio {
		width: 100%;
		height: 7vh;
	}

	#musicAudioContainer {
		padding-left: 0;
	}

	#musicAudioContainer span {
		font-size: 3vh;
	}
}

#histDescEditorContainer{
	grid-area: editor;
	width: 100%;
	padding-left: calc((100% - 66vw) / 2) !important;
}

#stepEditorContainer{
	grid-area: steps;
}

.histDescAudio{
	height: 1.25em;
}

.tox-tinymce{
	max-width: 1300px;
}

.mapDancePopup{
	text-align: left;
	font-size: 1.5vh;
}

.mapDancePopupTitle{
	color: var(--primaryRed);
	font-size: 2em;
}

.mapDancePopupMisc{
	color: grey;
	display: grid;
	grid-template-columns: 1fr auto;
	column-gap: 1vw;
	width: 100%;
}

.mapDancePopupMisc .infoButton{
	position: relative;
	left: calc(100% - 1em);
	width: fit-content;
}

.mapDancePopupYear{
	line-height: 200%;
}

.mapDancePopupContent{
	width: 100%;
	margin-top: 2vh;
	column-gap: 1vw;
}

.mapDancePopup .vidContainer{
	width: 100%;
	margin-bottom: 1vh;
}

.mapDancePopup .vidContainer img{
	left: 0;
}

.mapDancePopup .vidThumbnailOverlay{
	font-size: 3vw;
}

.mapDancePopup .pogaIeksSatura{
	grid-template-columns: auto 1fr;
	border-left: none;
}

.mapDancePopup .pogaIeksSatura:first{
	margin-top: 1vh;
}

.mapDancePopup .bttnText{
	font-size: 100%;
}

#infoPanelHoldingCell{
	position:absolute;
	top:0;
}

/* Reworked audio */

#musicPlayerContainer{
	margin-top: 1vh;
	grid-area: player;
	font-family: "Roboto slab";
	border: 1px solid rgb(180, 180, 180);
	background-color: var(--secondaryWhite);
	padding: 1vw;
	padding-top: 0;
	color: #333;
}

#musicPlayerTitle{
	text-align: center;
	color: #333;
	font-size: 3vh;
	font-weight: normal;
}

#musicPlayerControls{
	text-align: center;
	font-size: 2vh;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	width: 50%;
	margin-top: -1vh;
	margin-left: 25%;
	position: relative;
	top: 0.5vh;
}

.musicPlayerControlsBtn{
	border: none;
	background: none;
	font-size: 1em;
	cursor: pointer;
	transition: color 0.5s;
	color: inherit;
}

.musicPlayerControlsBtn:hover{
	color: #444;
}

#musicPlayerPlay{
	font-size: 4vh !important;
	color: var(--primaryRed);
}

#musicPlayerProgressContainer{
	width: 100%;
	display: grid;
	grid-template-columns: 1fr 5fr 1fr;
	column-gap: 5px;
	text-align: center;
}

#musicPlayerProgress{
	width: 100%;
	appearance: none;
	-webkit-appearance: none;
	height: 0.75vh;
	position: relative;
	top: 25%;
}

#musicPlayerProgressContainer span{
	/* font-size: 1.75vh; */
	font-size: 0.8em;
}

#musicPlayerProgress::-webkit-progress-bar{
	background-color: #AAA;
	border-radius: 10px;
}

#musicPlayerProgress::-webkit-progress-value{
	border-radius: 10px;
	background-color: var(--primaryRed);
}

#musicPlayerMain{
	border-bottom: 1px solid #777;
	padding-bottom: 1vh;
	margin-bottom: 1vh;
}

#musicPlayerQueue div{
	width: calc(100% - 0.65vw);
	margin-top: 1vh;
	border-bottom: 1px solid #BBB;
	padding: 0.5vh;
	font-size: 2vh;
	user-select: none;
}

#musicPlayerQueue div button{
	float: right;
	color: var(--primaryRed);
	border: none;
	background: none;
	font-size: 2vh;
	cursor: pointer;

	transition: filter 0.5s;
}

#musicPlayerQueue div button:hover{
	filter: brightness(130%);
}

#musicPlayerQueue div span{
	font-weight: normal;
	cursor: default;
}

.queueSongAuthor{
	font-size: 0.75em;
	color: #888;
}

.entryAudioContainer{
	height: 100%;
	font-size: 2.5vh;
	width: 1.5em;
	/* margin-top: 0.8vh;
	margin-right: 0.25em; */
}

.entryAudioPlay{
	visibility: hidden;
}

.entryAudioButton{
	border: none;
	background: none;
	font-size: inherit;
	color: var(--primaryRed);
	cursor: pointer;

	transition: filter 0.5s;
}

.entryAudioButton:hover{
	filter: brightness(140%);
}

.entryAudioButton:focus{
	outline: none;
}

.audioAddToPlaylistBtn{
	grid-area: add;
}

#musicPlayerArtist{
	text-align: center;
	font-weight: normal;
	margin-top: -1em;
	color: #888;
	font-size: 1.75vh;
}

.musicPlayerToggleBtn i[data-active="true"]{
	color: var(--primaryRed);
}

.musicPlayerToggleBtn i[data-active="false"]{
	color: inherit;
}

#musicPlayerQueue .amplitude-active-song-container{
	background-color: #b0e7ff;
}

#musicPlayerProgress{
	cursor: pointer;
}

#mainAudioContentContainer {
	grid-area: content;	
	display: grid;
	grid-template-columns: 100%;
	grid-template-areas: "head" "content-head" "content";
	grid-template-rows: 1fr 0.25fr 8.75fr;
	width: 100%;
	height: 60vh;
	row-gap: 1vh;
}

.audioMenuTitle{
	font-size: 5vh;
	font-family: Arial, Helvetica, sans-serif;
	width: 100%;
	display: block;
}

#musicSidebarContainer{
	grid-area: sidebar;
	/* border: 1px solid black; */
	width: 100%;
	height: auto;
	text-align: center;
	/* background-color: white; */
	display: grid;
	grid-template-rows: 7vh repeat(7, auto);
	/* grid-template-columns: 1fr 1fr; */
	/* justify-content: center; */
	align-content: flex-start;
	/* row-gap: 1vh; column-gap: 1vh*/
	row-gap: 5px;
	grid-auto-flow: column;
	position: relative;
}

#musicSidebarContainer .audioMenuTitle{
	margin-bottom: 2vh;
	margin-top: 1vh;
}

#musicSidebarContainer #filterSearch{
	background-color: white;
	height: 5.5vh;
	width: 90%;
	border-radius: 5px;
	align-items: center;
	padding: 0.5vh 5% 2px 5%;
}

#musicSidebarContainer #filterSearch button{
	top: -0.15vh;
}

.musicBigBtn{
	background-color: white;
    border-radius: 10px;
    height: 17.5vh;
    width: 20vh;
    display: grid;
    padding-top: 2.5vh;
    cursor: pointer;
    transition: background-color 0.5s, border-color 0.5s, filter 0.5s;
    border: 1px solid transparent;
    font-size: 10vh;
	padding-bottom: 0.1em;
	overflow: hidden;
}

.musicBigBtn:hover{
	background-color: #EEE;
	border-color: lightgrey;
}

.musicBigBtn[active]{
	color: var(--secondaryWhite);
	background-color: var(--primaryRed);
	border: none;
}

.musicBigBtn[active]:hover{
	filter: brightness(90%);
}

.musicBigBtn .bigBtnText{
	font-size: 0.25em;
}

.tileTitleSuperContainer{
	width: 100%;
	overflow: hidden;
	height: 0.5em;
}

.tileTitleContainer{
	height: 100%;
	text-align: center;
	position: relative;
	animation: none 5s linear infinite;
	animation-delay: 1s;
	display: flex;
	align-items: center;
	justify-content: center;
	white-space: nowrap;
}

@keyframes marquee{
	0%{left: 100%;}
	75%{left: -100%;}
	100%{left: -100%;}
}

/*.musicBigBtn:hover .tileTitleContainer{
	/* animation-name: marquee; /
}*/

/*.musicSidebarBtn{
	background-color: white;
	border-radius: 10px;
	height:  1em;
	width: 1.5em ;
	display: grid;
	grid-template-columns: 1.5em 1fr;
	cursor: pointer;
	transition: background-color 0.5s, border-color 0.5s, filter 0.5s, width 0.5s;
	border: 1px solid transparent;
	font-size: 10vh;
	padding-bottom: 0.3em;
	padding-top: 0.2em;
	overflow: hidden;
	align-items: center;
}

.musicSidebarBtn:not(:hover){
	animation-name: closeBigBtnLabel;
	animation-duration: 0.5s;
}

.musicSidebarBtn:hover{
	background-color: #EEE;
	border-color: lightgrey;
	width: 180%;
	z-index: 2;
}

.musicSidebarBtn[active]{
	color: var(--secondaryWhite);
	background-color: var(--primaryRed);
	border: none;
}

.musicSidebarBtn[active]:hover{
	filter: brightness(90%);
}

@keyframes closeBigBtnLabel{
	0%{
		z-index: 2;
	}
	100%{
		z-index: 0;
	}
}*/

.musicSidebarBtn{
	background-color: white;
	height:  1em;
	width: calc(100% - 0.5em);
	display: grid;
	grid-template-columns: 1.5em auto;
	cursor: pointer;
	transition: background-color 0.5s, border-color 0.5s, filter 0.5s;
	border: 1px solid transparent;
	font-size: 3vh;
	padding-bottom: 0.3em;
	padding-top: 0.2em;
	overflow: hidden;
	align-items: center;
	border-radius: 5px;
	padding-left: 0.5em;
	text-align: left;
}

.musicSidebarBtn:hover{
	background-color: #EEE;
	border-color: lightgrey;
}

.musicSidebarBtn[active]{
	color: var(--secondaryWhite);
	background-color: var(--primaryRed);
	border: none;
}

.musicSidebarBtn[active]:hover{
	filter: brightness(90%);
}

.bigBtnIconContainer{
	font-size: 1em;
}

.bigBtnIconContainer img{
	max-width: 80%;
	max-height: 100%;
	border-radius: 5px;
	height: auto;
}

.bigBtnText{
	font-family: 'Open Sans', sans-serif;
	font-size: 0.6em;
}

#playlistSelectContainer{
	display: grid;
	grid-template-columns: 1fr 1fr;
	width: 90%;
	padding-left: 5%;
	padding-right: 5%;
	column-gap: 15%;
}

.playlistSelect{
	width: 100%;
	padding: 10px;
	cursor: pointer;
	font-family: 'Open Sans', sans-serif;
	font-size: 2.5vh;
	transition: filter 0.5s;
	color: #333;
}

.playlistSelect[active]{
	color: var(--primaryRed);
	font-weight: bold;
}

.playlistSelect:hover{
	filter: brightness(125%);
}

.playlistSelect:hover:not([active]){
	filter: brightness(250%);
}

#playlistContent{
	display: grid;
	grid-template-columns: 100%;
	row-gap: 1vh;
	margin-top: 1vh;
	width: 90%;
	padding-left: 5%;
	padding-right: 5%;
	padding-top: 1vh;
}

#playlistContent div{
	width: 100%;
	padding: 0.1em;
	font-size: 2vh;
	font-family: arial;
	cursor: pointer;
	transition: color 0.5s;
}

#playlistContent div:hover{
	color: #444;
}

#mainAudioHeader{
	display: grid;
	grid-template-columns: auto 1fr auto;
	column-gap: 2vw;
	height: 100%;
	width: calc(100% - 1vw);
	align-items: center;
	padding-left: 1vw;
	background-color: white;
	border-radius: 5px;
	grid-template-areas: "return main spinner";
}

#mainAudioHeader .fa-arrow-left{
	color: var(--primaryRed);
	font-size: 4vh;
	cursor: pointer;
}


.mainAudioPlayAll{
	display: none;
}

.mainAudioHeaderButton{
	font-size: 2vh;
	color: var(--primaryRed);
	padding-top: 0.25vh;
	cursor: pointer;
	transition: filter 0.5s;
	text-align: center;
	white-space: nowrap;
	font-family: "Open sans", sans-serif;
	color: white;
	background-color: var(--primaryRed);
	border-radius: 1vh;
	padding-left: 1em;
	padding-right: 1em;
	padding-top: 5px;
	height: 3.5vh;
}

.mainAudioHeaderButton:hover{
	filter: brightness(140%);
}

#audioHeaderContent{
	display: grid;
	grid-template-columns: 2fr auto;
	align-items: center;
	grid-area: main;
	padding-right: 1vw;
}

#audioHeaderContentTitle{
	display: grid;
	grid-template-columns: auto auto auto 1fr;
	column-gap: 1em;
	align-items: center;
}

#audioHeaderContentTitle[editInProgress]{
	grid-template-columns: auto auto auto 1fr auto !important;
}

#audioMenuReturn{
	width: 100%;
	text-align: center;
	display: flex;
	align-content: center;
	justify-content: center;
	padding-right: 0.5vw;
	border-right: 1px solid black;
	display: none;
	grid-area: return;
	transition: filter 0.5s;
}

#audioMenuReturn:hover{
	filter: brightness(140%);
}

#mainAudioHeader .audioMenuTitle{
	font-size: 3vh;
}

#audioPlayer{
	display: grid;
	grid-template-columns: 1fr auto 2fr 0.25fr 1.25fr;
	grid-template-rows: 1fr 1fr;
	padding-left: 1vw;
	padding-right: 1vw;
	padding-top: 0.5em;
	font-size: 1vw;
	font-family: Arial, Helvetica, sans-serif;
	height: calc(100% - 0.5em);
	width: calc(100% - 2vw);
	grid-template-areas: "info empty2 title empty3 next" "info volume controls empty next";
	background-color: white;
	border-radius: 10px;
	grid-area: player;
	row-gap: 1vh;
}

#audioPlayer *:focus{
	outline: none;
}

#audioPlayerInfo{
	grid-area: info;
	padding-top: 1.5vh;
	padding-bottom: 1.5vh;
	display: flex;
	align-items: center
}

#audioPlayerInfo > div{
	align-self: flex-end;
}

#audioPlayerInfo img{
	/* height: 3vw;
	width: 3vw; */
	height: 10vh;
	width: 10vh;
	float: left;
	margin-right: 10px;
	display: none;
	border-radius: 2px;
	cursor: pointer;
	transition: filter 0.5s;
}

#audioPlayerInfo img:hover{
	filter: brightness(85%);
}

#audioPlayerInfoTitle{
	font-size: 1em;
	font-weight: lighter;
	font-family: "Open sans", sans-serif;
}

#audioPlayerInfoAuthor{
	color: grey;
	font-size: 0.9em;
}

#audioPlayerMain{
	display: grid;
	grid-area: controls;
	grid-template-rows: 3fr 2fr;
}

#audioPlayerVolume{
	display: grid;
	grid-template-columns: 100%;
	grid-template-rows: 1fr auto;
	grid-area: volume;
	width: 100%;
}

#audioPlayerVolume i{
	min-width: 1.5em;
}

#musicPlayerVolume{
	position: relative;
	right: 0.25em;
	font-size: 1.5em;
}

#audioPlayerVolumeSliderContainer{
	display: flex;
	align-items: center;
	justify-content: center;
	overflow-y: hidden;
	position: fixed;
	transform: scaleY(0);
	margin-top: 2.5em;
	border-top: 3px solid var(--primaryRed);
	border-color: rgba(151,43,63,0);
	transition: transform 0.35s ease-out, border-color 0.35s ease-out;
	width: 1.5em;
	transform-origin: top;
}

#audioPlayerVolume:hover #audioPlayerVolumeSliderContainer{
	transform: scaleY(1);
	border-color: var(--primaryRed);
}

.musicPopularity {
	font-size: 2.5vh;
}

.musicPopularity i{
	background: linear-gradient(to top, var(--primaryRed) 0%, lightgrey 0%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.audioEntryOtherInfo{
	grid-area: otherinfo;
	display: grid;
	grid-template-columns: 1fr;
	width: 100%;
	align-items: center;
	text-align: right;
}

.audioEntryLength{
	font-family: Arial, Helvetica, sans-serif;
	color: #555;
	font-size: 2vh;
}

#mainAudioSelect{
	text-align: center;
	display: grid;
	/* grid-template-columns: repeat(5, 1fr);
	grid-template-rows: max(20vh); */
	grid-auto-flow: column;
	grid-auto-columns: min-content;
	row-gap: 2vh;
	padding-top: 1vh;
	padding-bottom: 1vh;
	column-gap: 10px;
	width: 100%;
	overflow-x: auto;
	overflow-y: hidden;
}

#mainAudioSelect::-webkit-scrollbar {
	height: 7px;
}

#mainAudioSelect::-webkit-scrollbar-track {
	background-color: #EEE;
}

#mainAudioSelect::-webkit-scrollbar-thumb {
	background-color: var(--primaryRed);
}

/*#mainAudioSelectContainer::after{
	content: "";
	width: 1px;
	position: absolute;
	margin-left: 59vw;
	margin-top: -15vh;
	height: 15vh;
	background-color: black;
	
	-webkit-box-shadow: 0px 0px 40px 15px rgba(0,0,0,0.75);
	-moz-box-shadow: 0px 0px 40px 15px rgba(0,0,0,0.75);
	box-shadow: 0px 0px 40px 15px rgba(0,0,0,0.75);
}*/

#mainAudioSelectContainer{
	overflow: hidden;
	filter: brightness(1);
	position: relative;
	grid-area: main;
	width: 100%;
	padding-bottom: 1vh;
}

#audioAltPlayAll{
	width: min-content;
}

#mainAudioSelect .musicBigBtn{
	font-size: 7.5vh;
	height: 10vh;
    width: 12.5vh;
	padding-top: 1.5vh;
	border: 1px solid lightgrey;
}

#mainAudioSelect .bigBtnIconContainer{
	background-image: none;
	background-position: center;
	background-size: cover;
	min-height: 1em;
}

.entryAudioAdd{
	visibility: hidden;
}

.entryAudioAddCur{
	visibility: hidden;
}

.entryAudioDownload {
	visibility: hidden;
	/* opacity: 0; */
	/* pointer-events: none; */
}

#musicPlayerVolumeSlider{
	appearance: none;
	background: transparent;
	width: 100%;
	cursor: pointer;
	-webkit-appearance: slider-vertical;
}

#musicPlayerVolumeSlider::-webkit-slider-thumb{
	-webkit-appearance: none;
	height: 1vh;
	width: 1vh;
	border-radius: 1vh;
	background-color: white;
}

/*#musicPlayerVolumeSlider::-webkit-slider-runnable-track{
	border-radius: 10px;
	background-color: var(--primaryRed);
	border: 1px solid lightgrey;
}*/

.audioInfoText{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 3vh;
	width: 100%;
}

.audioInfoText .fas{
	color: darkgrey;
	font-size: 1.5em;
	vertical-align: middle;
}

#mainAudioSelect .audioInfoText{
	grid-column: 1 / span 4;
}

#songAddContainer{
	position: absolute;
	left: -100vw;
	top: 0;

	border: 1px solid lightgrey;
	border-radius: 10px;
	background-color: whitesmoke;
	font-family: Arial, Helvetica, sans-serif;
	padding-top: 1vh;
	padding-bottom: 0.5vh;
	padding-left: 0.5vw;
	padding-right: 0.5vw;
	font-size: 2vh;
	max-width: 25vh;
	text-align: center;
}

#songAddContainer > span{
	font-size: 1.1em;
	color: var(--primaryRed);
}

#songAddContainer ul{
	list-style-type: none;
	padding-left: 0;
	text-align: center;
}

#songAddContainer ul > li{
	margin-bottom: 0.35em;
	width: 100%;
	color: grey;
	transition: color 0.5s;
	cursor: pointer;
}

#songAddContainer ul > li[officialPlaylist] span{
	color: goldenrod;
}

#songAddContainer ul > li[songExistsInPlaylist]{
	cursor: default;
}

#songAddContainer ul > li[songExistsInPlaylist] span{
	color: #DDD;
}

#songAddContainer ul > li[songExistsInPlaylist][officialPlaylist] span{
	color: #e8d5a3
}

#songAddContainer ul > li:hover{
	color: #333;
}

.playlistAddInput{
	border: 1px solid lightgrey;
    text-align: center;
    font-family: arial;
    background-color: inherit;
    font-size: inherit;
	color: #333;
	width: 9em;
}

.playlistAddInput:focus{
	outline: none;
}

.playlistAddBtn{
	border: none;
	font-size: 1.25em;
	color: var(--primaryRed);
	background-color: transparent;
	cursor: pointer;
	margin-left: 3px;
	vertical-align: middle;
	transition: filter 0.5s;
}

.playlistAddBtn:hover{
	filter: brightness(140%);
}

.playlistAddError{
	color: red;
	font-size: 0.75em;
	display: none;
}

#audioTitleEditInput{
	font-size: 4.5vh;
	width: 8em;
}

#audioTitleEditErrorMsg{
	font-size: 1.25em;
	font-family: Arial, Helvetica, sans-serif;
}

#audioPlaylistDropdownContainer{
	display: none;
}

#audioPlaylistDropdownButton{
	float: right;
}

#audioPlaylistDropdownContent{
	display: none;
	background-color: #f9f9f9;
	min-width: 160px;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	z-index: 1;
	column-gap: 0.5em;
	grid-auto-columns: 1fr;
	grid-auto-flow: column;
	position: absolute;
	right: 12vh;
	padding: 5px;
}
  
#audioPlaylistDropdownButton:hover + #audioPlaylistDropdownContent,  #audioPlaylistDropdownContent:hover{
	display: grid;
}

#audioPlaylistEditConfirm{
	display: none;
}

#audioHeaderContentTitle[editInProgress] #audioPlaylistDropdownContent{
	position: fixed;
	margin-left: -4.7em;
}

.playlistImportExport{
	font-family: arial;
}

.playlistImportExport h2{
	color: var(--primaryRed);
	font-size: 5vh;
}

#playlistExportCodeContainer{
	background-color: white;
	width: 25vw;
	padding: 10px;
	word-break: break-all;
	text-align: left;
	margin-left: calc(50% - 12.5vw);
	cursor: pointer;
	transition: background-color 0.5s, box-shadow 0.25s;
}

#playlistExportCodeContainer:hover{
	background-color: #ccc;
	-webkit-box-shadow: 4px 4px 16px 0px rgba(0,0,0,0.3);
	-moz-box-shadow: 4px 4px 16px 0px rgba(0,0,0,0.3);
	box-shadow: 4px 4px 16px 0px rgba(0,0,0,0.3);
}

#playlistExportCopyInfo{
	color: white;
	opacity: 1;
	visibility: hidden;
	margin-top: 0.5em;
	cursor: default;
	transition: opacity 3s;
	margin-bottom: 1em;
}

#audioPlaylistImport{
	display: none;
	grid-column: span 2;
	width: fit-content;
}

#playlistImportError{
	color: red;
	display: none;
}

#foreignAudioPlayer{
	width: 100%;
	height: 100%;
	grid-area: player;
}

#foreignAudioPlayerContainer{
	width: 100vw;
	position: fixed;
	bottom: 0;
	height: 13vh;

	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr 10fr;
	grid-template-areas: "lower close" "player player";

	transition: bottom 1s;
	display: none;
}

.foreignAudioPlayerControl{
	width: fit-content;
	background-color: white;
	font-size: 2vh;
	padding: 0.2em;
	padding-left: 0.5em;
	padding-right: 0.5em;
	position: relative;
	cursor: pointer;
	border: 2px solid darkgrey;
	border-radius: 2px;
	transition: color 0.5s, background-color 0.5s;
}

.foreignAudioPlayerControl:hover{
	color: var(--primaryRed);
	background-color: #eee;
}

#toggleForeignAudioPlayer{
	left: 5vw;
	grid-area: lower;
	border-bottom: none;
}

#closeForeignAudioPlayer{
	left: calc(100% - 5vw - 1em);
	grid-area: close;
	border-bottom: none;
}

@keyframes lowerForeignPlayer{
	from{
		top: 0;
	}

	to{
		top: 100%;
	}
}

#audioAddImage{
	display: none;
}

#collectionAddImagePreview{
	max-width: 100%;
	max-height: 50vh;
}

#collectionAddImageInputContainer{
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 1vh;
	margin-bottom: 1vh;
}

#collectionAddImageInputContainer > div{
	background-color: white;
	padding: 1vw;
	width: fit-content;
}

#addImageError{
	color: red;
	display: block;
	margin-top: 0.5em;
}

#collectionAddImageModal{
	font-family: Arial, Helvetica, sans-serif;
}

#collectionAddImageModal h2{
	color: white;
}

#audioRemoveImage{
	display: none;
}

#audioRemoveImage .fa-trash-alt{
	position: absolute;
    z-index: 5;
    font-size: 0.75em;
    margin-left: -0.5em;
    color: #333;
    margin-top: 0.5em;
}

#mainAudioContentHeader{
	grid-area: content-head;
	font-family: 'Open Sans', sans-serif;
	font-size: 2vh;
	display: grid;
	padding-left: calc(2vw + 0.35em);
	grid-template-columns: 2fr 2fr auto 1fr 0.55fr;
	grid-template-areas: "title author admin time empty";
	align-items: flex-end;	
	margin-top: 1vh;
}

#mainAudioContentHeader[data-livesection] #audioSortPopularity{
	visibility: hidden;
}

#mainAudioContentHeader[data-artistsection] #audioSortArtist, 
#mainAudioContentHeader[data-archivesection] #audioSortArtist,
#mainAudioContentHeader[data-livesection] #audioSortArtist{
	visibility: hidden;
}

#mainAudioContentHeader span{
	cursor: pointer;
	width: fit-content;
	-webkit-user-select: none; /* Safari */        
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* IE10+/Edge */
	user-select: none; /* Standard */
	transition: filter 0.5s;
	color: #333;
}

#mainAudioContentHeader span:hover{
	filter: brightness(200%);
}

#audioSortTime{
	grid-area: time;
	width: 1.25em !important;
	display: flex;
	justify-self: flex-end;
	position: relative;
	right: 1.7vw;
}

#audioSortPopularity{
	position: relative;
	left: 4.25vw;
	grid-area: popularity;
}

#playerPopoutButton{
	padding-left: 0.5em;
	padding-right: 0.5em;
	padding-top: 0.5em;
	font-size: 2.5vh;
	height:100%;
	cursor: pointer;
	transition: color 0.5s;
	color: grey;
}

#playerPopoutButton:hover{
	color: var(--primaryRed);
}

.recPlaylistIconContainer .fa-star{
	position: absolute;
	font-size: 0.5em;
	margin-top: 1em;
	margin-left: -1em;
	background: white;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	-webkit-text-stroke: 2px black;
}

.audioEntryTitle{
	grid-area: title;
	font-family: 'Open Sans', sans-serif;
	/* align-self: center; */
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
	white-space: nowrap;
	font-size: 2vh;
}

.audioEntryTitle .fa-archive{
	color: darkgrey;
}

.songTitleSuperContainer{
	width: 100%;
	/* align-self: center; */
	overflow: hidden;
}

.songTitleContainer{
	animation: none 8s linear infinite;
	animation-delay: 1s;
	display: flex;
	text-align: left;
	position: relative;
	width: fit-content;
	width: 100%;
	height: 100%;

	white-space: nowrap;
}

@keyframes marquee-author{
	0%{left: 120%;}
	100%{left: -100%;}
}

.songTitleAuthor{
	font-family: 'Open Sans', sans-serif;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	white-space: nowrap;
	font-size: 2vh;
	color: #888;
	/*cursor: pointer;
	transition: color 0.5s;*/
}

/* .songTitleAuthor:hover{
	color: #cacaca;
} */

#audioPlaylistRecommend{
	display: none;
}

#audioHeaderContent{
	display: none;
}

.musicBigBtn[data-active]{
	background-color: var(--primaryRed);
	color: white;
}

#audioPlayerPlaylistContainer{
	grid-area: next;
	position: relative;
}

#audioPlayerPlaylist{
	display: grid;
	filter: brightness(100%);
	z-index: 10;
	transition: height 0.5s ease-in-out, box-shadow 0.5s ease-in-out, border-radius 0.5s ease-in-out;
	position: absolute;
	height: 13vh; /* 6.25vh */
	width: 100%;
	grid-auto-rows: 1.25em;
	overflow: hidden;
	background-color: white;
	max-height: 33vh;
}

#audioPlayerPlaylist::before{
	content: "";
	position: absolute;
	height: 1px;
	margin-top: 13vh;
	width: 23.6vw;
	background-color: rgba(0,0,0,0.5);
	filter: blur(2px);

	-webkit-box-shadow: 0px -8px 15px 3px rgba(0,0,0,0.75);
	-moz-box-shadow: 0px -8px 15px 3px rgba(0,0,0,0.75);
	box-shadow: 0px -8px 15px 3px rgba(0,0,0,0.75);

	transition: box-shadow 0.15s ease-in-out, background-color 0.15s ease-in-out;
}

#audioPlayerPlaylist::after{
	content: "▼";
	text-align: center;
	color: var(--primaryRed);
	position: absolute;
	margin-top: calc(13vh - 1em);
	width: 23.6vw;
	transition: filter 0.5s;

	transition: color 0.5s ease-in-out;
}

#audioPlayerPlaylist:hover{
	-webkit-box-shadow: 10px 10px 25px -10px rgba(0,0,0,0.75);
	-moz-box-shadow: 10px 10px 25px -10px rgba(0,0,0,0.75);
	box-shadow: 10px 10px 25px -10px rgba(0,0,0,0.75);
	border-radius: 3px;
	overflow-y: auto;
}

#audioPlayerPlaylist:hover::after{
	color: transparent;
	z-index: -1;
}

#audioPlayerPlaylist:hover::before{
	background-color: transparent;
	box-shadow: none;
	z-index: -1;
}

.audioPlayerPlaylistEntry{
	display: grid;
	grid-template-columns: auto 1fr 1fr auto;
	width: 90%;
	border-radius: 3px;
	text-align: left;
	padding-left: 10%;
	transition: background-color 0.5s, filter 0.5s;
	column-gap: 10px;
}

.audioPlayerPlaylistEntry.amplitude-active-song-container{
	background-color: var(--primaryRed);
	color: white;
}

.audioPlayerPlaylistEntry:not(.amplitude-active-song-container):hover{
	background-color: #eee;
}

.audioPlayerPlaylistEntry.amplitude-active-song-container:hover{
	filter: brightness(120%);
}

.audioPlayerPlaylistEntry span{
	width: 100%;
	white-space: nowrap;
	overflow-x: hidden;
}

.audioPlayerPlaylistEntry i{
	opacity: 0;
	color: var(--primaryRed);
	font-size: 0.9em;

	transition: opacity 0.25s, color 0.25s, filter 0.25s;
	height: 100%;
	display: flex !important;
	align-items: center;
	cursor: pointer;
}

.audioPlayerPlaylistEntryRemove{
	position: relative;
	right: 0.25em;
}

.audioPlayerPlaylistEntry.amplitude-active-song-container i{
	color: white;
}

.audioPlayerPlaylistEntry:hover i{
	opacity: 1;
}

.audioPlayerPlaylistEntry.amplitude-active-song-container i:hover{
	color: #ccc !important;
}

.audioPlayerPlaylistEntry i:hover{
	filter: brightness(85%);
}

.audioPlayerPlaylistEntryPlay{
	position: relative;
	left: -0.25em;
}

#audioPlayerPlaylistSave{
	width: 90%;
	text-align: center;
	cursor: pointer;
	display: none;
	position: relative;
	top: 0.5em;
	left: 5%;
	border-top: 1px solid lightgrey;
	padding-top: 0.5em;
	color: grey;
	transition: color 0.5s;
}

#audioPlayerPlaylistSave:hover{
	color: darkgrey;
}

#audioPlayerPlaylistSave + .playlistAddError{
	position: relative;
	top: -1.3em;
	left: 25%;
}

#audioPlaylistEmptyAlert{
	color: grey;
	text-align: center;
	position: absolute;
	bottom: 1em;
	left: 15%;
}

#audioPlayerPlaylistSave .playlistAddInput{
	width: 70%;
}

.entryAudioAddCur[disabled]{
	filter: brightness(70%);
	cursor: default;
}

#headerOptionsContainer{
	display: grid;
	margin-top: 5px;
	margin-bottom: 5px;
	height: calc(100% - 10px);
	grid-area: spinner;
	padding-right: 5px;
}

#audioPlayerLogo{
	text-align: center;
	height: 100%;
	width: 100%;
	color: var(--primaryRed);
	grid-area: title;
	display: flex;
	justify-content: center;
	align-items: center;
}

#audioPlayerLogo img{
	max-height: 100%;
	max-width: 100%;
	width: auto;
	height:7vh;
	margin-right: 1em;
}

#audioPlayerLogo span{
	font-size: 1.5em;
	font-weight: bold;
}

@media only screen and (max-width: 760px) {
	#audioPlayerLogo{
		display: none !important;
	}

	#audioPlayer{
		grid-template-areas: "info info next" "volume controls controls";
		grid-template-rows: 1fr 1fr;
		grid-template-columns: auto 2fr 1.75fr;
		font-size: 3vw;
		padding-left: 2vw;
		padding-right: 2vw;
		height: 15vh;
		position: fixed;
		/* top: 83vh; */
		bottom: 0;
		width: 96vw;
		-webkit-box-shadow: 0px -7px 20px -5px rgba(0,0,0,0.5);
		-moz-box-shadow: 0px -7px 20px -5px rgba(0,0,0,0.5);
		box-shadow: 0px -7px 20px -5px rgba(0,0,0,0.5);
		left: 0;
		padding-bottom: 2vh;
		border-radius: 0;
		z-index: 10;
	}

	#audioPlayerVolume {
		display: none;
	}

	#audioPlayerPlaylist{
		height: 8vh;
	}

	#audioPlayerInfoImage{
		height: 2.5em !important;
		width: 2.5em !important;
	}

	#mainAudioContent > li .entryAudioButton{
		visibility: visible;
		text-align: right;
	}

	#mainAudioContent > li .entryAudioAddContainer{
		margin-left: auto;
		margin-right: 6.5vw;
	}

	#footer.audioPlayerSection{
		visibility: hidden;
	}

	#mainAudioContentContainer{
		grid-template-areas: "head" "content";
		grid-template-rows: 1fr 9fr;
	}

	#mainAudioContentHeader{
		display: none !important;
	}

	#mainAudioTitle{
		font-weight: bold;
	}
}

.audioEntryInstrument{
	grid-area: instrument;
	font-family: "Open Sans", sans-serif;
	color: #888;
	box-sizing: border-box;
    white-space: nowrap;
    font-size: 2vh;
}

#myPlaylistInfo{
	float: right;
	font-size: 1.5em;
	margin-right: 1em;
	color: rgb(80, 80, 80);
}

#playlistInfoTooltip{
	position: absolute;
	margin-left: 2em;
	font-family: "OpenSans", sans-serif;
	font-size: 0.75em;
	color: #555;
	background-color: #CCC;
	border-radius: 5px;
	padding: 10px;
	opacity: 0;
	z-index: 1000;
	transition: opacity 0.5s;

	box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.5);
}

#myPlaylistInfo:hover{
	color: rgb(80,80,80);
}

#myPlaylistInfoContainer:hover #playlistInfoTooltip{
	opacity: 1;
}

#audioSelectButtonContainer > div{
	display: grid;
	grid-auto-flow: column;
}

#mainConcDanceContainer {
	grid-area: content;	
	margin-bottom: 1vh;
	display: grid;
	grid-template-rows: auto;
	row-gap: 3vh;
}

#concDanceSelect{
	display: grid;
	grid-template-columns: 1fr 1fr;
	width: 35%;
	margin-left: auto;
	margin-right: auto;
	column-gap: 10px;
}

#concDanceSelect button{
	font-size: 1vw;
	border: none;
	transition: backgroundColor 0.5s;
	border-radius: 2px;
}

#mainArchiveSelect div:hover{
	background-color: #EEE;
}

#mainContainerArchive{
	display: grid;
	grid-template-columns: 1fr 3fr;
	grid-template-rows: 5vh auto;
	grid-column-gap: 0.5vw;
	grid-row-gap: 8pt;
	grid-template-areas: "addNew sort" "select content";
	margin-left: 5vw;
	margin-right: 5vw;
	margin-bottom: 3vh;
}

@media only screen and (max-width: 760px) {
	#mainContainerArchive{
		grid-template-columns: auto;
		grid-auto-rows: auto;
		grid-template-areas: "addNew" "sort" "select" "content";
		grid-template-rows: auto;
	}

	#archiveCategorySelect{
		margin-bottom: 2vh;
	}
}

#mainContainerArchive #musicSidebarContainer{
	grid-area: select;
	grid-template-rows: repeat(3, auto);
}

.archiveContent{
	display: grid;
	grid-template-columns: 1fr;
	row-gap: 5px;
}

.mainArchiveEntry{
	background-color: white;
	border-radius: 5px;
	font-size: 2vh;
	padding: 0.5em 1em 0.5em 1em;
	font-family: "open sans", sans-serif;
	cursor: pointer;
	transition: background-color 0.5s;
}

.mainArchiveEntry:hover{
	background-color: #EEE;
}

.archiveEntryTitle{
	float: left;
}

.archiveEntryExpand{
	float: right;
}

.mainArchiveCategory{
	display: grid;
	grid-template-columns: 1fr;
	row-gap: 5px;
}

.mainArchiveCategory > .archiveContent{
	margin-left: 2em;
	height: 0;
	overflow: hidden;
	width: calc(100% - 2em);
}

.mainArchiveCategory[data-open] > .archiveContent{
	height: auto;
}

#inputCategory{
	display: grid;
	grid-template-columns: 1fr;
	row-gap: 5px;
	max-width: 10vw;
}

#archiveContentContainer{
	max-height: 90vh;
	display: flex;
	justify-content: center;
}

.archiveAdminControls{
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 5px;
	height: 3vh;
	margin-right: 1em;
	float: right;
	grid-area: admin;
}

.archiveAdminControls button{
	font-size: 2vh;
}

#archiveModalContent{
	display: grid;
	grid-template-columns: 1fr auto;
}

#archiveContentDesc{
	display: grid;
	grid-template-columns: 1fr;
	grid-auto-rows: min-content;
	padding-right: 1em;
	font-size: 1vw;
	font-family: "Open sans", sans-serif;
	border-left: 3px solid white;
	padding-left: 3em;
	max-height: 80vh;
	overflow-y: auto;
}

@media only screen and (max-width: 760px) {
	#archiveModalContent{
		grid-template-columns: 1fr;
		grid-template-rows: auto auto;
		row-gap: 3px;
	}
	#archiveContentDesc{
		border-left: none;
		border-top: 3px solid white;
		padding-top: 1em;
		padding-left: 1em;
		font-size: 1.5vh;
	}
}

.archiveContentDescItem{
	color: white;
	height: 100%;
	display: grid;
	grid-template-columns: 4em auto;
	column-gap: 0.5em;
	width: 100%;
	text-align: left;
}

.archiveContentDescItemTitle{
	text-align: left;
	cursor: pointer;
}

.archiveContentDescItemTime{
	float: left;
	margin-right: 3em;
	color: skyblue;
	cursor: pointer;
	height: 100%;
	display: block;
}

#archiveDescItems{
	display: grid;
	grid-template-columns: 1fr;
	grid-auto-columns: min-content;
	row-gap: 1vh;
}

#archiveDescItems > div{
	width: 100%;
	display: grid;
	grid-template-columns: 1fr auto 1fr 12fr;
	column-gap: 0.5em;
	padding-bottom: 1vh;
	border-bottom: 1px solid lightgrey;
}

#archiveDescItems > div:last-of-type{
	border: none;
}

.archiveDescItemTimeDivider{
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: bold;
	font-size: 2vh;
}

#archiveDescItems > div *:last-child{
	margin-left: 0.5em;
}

#archiveDescItems > div input{
	width: 5.5em;
}

#mainPublicationContent{
	gap: 1vw;
	display: grid;
	grid-template-columns: 1fr;
	grid-auto-rows: auto;
	width: 50%;
	margin-left: 25%;
}

@media only screen and (max-width: 760px) {
	#mainPublicationContent{
		grid-template-columns: 1fr;
		column-gap: 2.5vw;
		width: 95%;
		margin-left: 2.5%;
	}
}

#mainPublicationContent > div{
	border-bottom: 1px solid darkgrey;
	padding-bottom: 1em;
}

#mainPublicationContent > div:last-child{
	border: none;
	padding-bottom: 0;
}

.publicationInfo{
	font-family: "Open sans", sans-serif;
	font-size: 1.5vh;
	text-align: justify;
}

.publicationInfo h2{
	font-size: 2em;
	margin-bottom: 0;
	color: var(--primaryRed);
	grid-area: title;
}

.publicationDescription{
	font-size: 1em;
	grid-area: desc;
}

.publicationDescription a{
	color: blue;
}

.publicationMediaContainer{
	position: relative;
	padding-bottom: 56.25%;
	overflow: hidden;
	height:0;
	grid-area: vid;
}

.publicationMediaContainer iframe, .publicationMediaContainer img{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}

.publicationDate{
	color: grey;
	display: block;
	margin-bottom: 0.5em;
	font-weight: bold;
}

.addPublicationContainer{
	/* A hack for the lazy */

	grid-template-columns: repeat(3, 1fr) !important;
}

#archiveCategorySelect{
	grid-area: select;
	/* border: 1px solid black; */
	width: 100%;
	height: auto;
	text-align: center;
	/* background-color: white; */
	display: grid;
	grid-auto-flow: row;
	grid-template-columns: 100%;
	/* justify-content: center; */
	align-content: flex-start;
	/* row-gap: 1vh; column-gap: 1vh*/
	row-gap: 5px;
	position: relative;
}

#archiveCategorySelect > div{
	grid-template-areas: "icon title admin";
	grid-template-columns: 1.5em auto auto !important;
}

#archiveCategorySelect > div .archiveAdminControls{
	font-size: 0.4em;
}

#header > div{
	display: flex;
	align-items: center;
}

@media only screen and (max-width: 760px) {
	#concDanceSelect{
		width: 90%;
	}

	#concDanceSelect button{
		font-size: inherit;
		padding-bottom: 3px;
		padding-top: 3px;
	}
}

#bookViewerContainer{
	display: none;

	grid-template-rows: 5vh 80vh 5vh;
	grid-template-columns: 1fr auto 1fr;
	grid-template-areas: "header header header" "sections viewer raw" "footer footer footer";
	row-gap: 10px;
	column-gap: 10px;

	width: 100%;
	height: 100%;
}

@media only screen and (max-width: 760px) {
	#bookViewerContainer{
		grid-template-columns: 2% 96% 2%;
		grid-template-columns: 1fr;
		grid-template-rows: 5vh auto 5vh auto;
		grid-template-areas: "header" "viewer" "footer" "sections";
		column-gap: 0;
		height: 100%;
	}
	
	#bookRaw{
		display: none;
	}

	#bookSections{
		height: 100%;
	}
}

#bookSections{
	grid-area: sections;
}

#bookViewer{
	grid-area: viewer;
}

#bookRaw{
	grid-area: raw;
}

#book-spinner {
	position: absolute;
	opacity: 0;
	transition: opacity 1s;
	user-select: none;
}

#bookViewerHeader{
	grid-area: header;
	background-color: rgba(220, 220, 220);

	display: grid;
	grid-template-columns: 100% 3vh;
	font-size: 3vh;
	font-family: "Open Sans", sans-serif;
	color: #333;

	border-radius: 3px;
}

#bookViewerDownload{
	position: relative;
	left: -3.5vh;
	width: 3vh;
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
}

#bookViewerDownload i{
	border: none;
	transition: filter 0.5s;
}

#bookViewerDownload:hover{
	background-color: transparent;
}

#bookViewerDownload:hover i{
	filter: brightness(85%);
}

#bookViewerFooter{
	grid-area: footer;
	background-color: rgba(220, 220, 220);
	color: #333;
	border-radius: 3px;

	display: flex;
	align-items: center;
	justify-content: center;
}

#bookViewerControls{
	display: grid;
	grid-template-columns: auto;
	grid-auto-flow: column;
	width: 1/3;
	font-family: "Open sans", sans-serif;
	column-gap: 10px;
}

#bookViewerControls .defaultBtn{
	border: none;
	border-radius: 2px;
	font-size: 2.5vh;
	width: 3vh;
	height: 1.5vh;
	width: fit-content;
	margin-top: 0.35vh;
}

#bookViewerControls .defaultBtn i{
	border: none;
	padding-right: 0;
	position: relative;
	top: -0.35em;
}

#bookViewerControls .defaultBtn[disabled]{
	filter: brightness(50%);
}

#bookViewerControls .defaultBtn[disabled]:hover{
	background-color: transparent !important;
	cursor: initial;
}

#bookViewerCurPage{
	width: 3.5em;
}

#bookRaw{
	background-color: white;
	height: calc(100% - 4px - 2em);
	padding: 1em;
	width: calc(100% - 2em);
	overflow: auto;
}

#bookRawTitle{
	display: block;
	width: 100%;
	text-align: left;
	border-bottom: 1px solid black;
	font-family: "Open sans", sans-serif;
	font-weight: bold;
}

#bookSections{
	background-color: white;
	height: calc(100% - 4px - 2em);
	padding: 1em;
	width: calc(100% - 2em);
	overflow: auto;
}

#bookSectionsTitle{
	display: block;
	width: 100%;
	text-align: left;
	border-bottom: 1px solid black;
	font-family: "Open sans", sans-serif;
	font-weight: bold;
}

#archiveAddBookSections{
	display: none;
}

#archiveBookSections{
	display: grid;
	grid-template-columns: 1fr;
	grid-auto-columns: min-content;
	row-gap: 1vh;
}

#archiveAddNewSection{
	color: white;
	background-color: var(--primaryRed);
	font-size: 2vh;
	width: 2vh;
	height: 2vh;
	padding: 0.5em;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	margin-top: 0.5em;
}

#archiveAddNewSection:hover{
	filter: brightness(85%);
}

.archiveBookSection{
	width: 100%;
	display: grid;
	grid-template-columns: 1fr auto;
	column-gap: 1em;
	row-gap: 0.5em;
	padding-bottom: 1vh;
	border-bottom: 1px solid lightgrey;
	grid-template-areas: "title page" "sub sub" "addsub remove";
	margin-top: 1vh;
}

.archiveBookSection [sectionTitle]{
	width: 100%;
	grid-area: title;
}

.archiveBookSection [sectionPage]{
	width: 15em;
	grid-area: page;
}

.archiveBookSection button{
	width: 100%;
}

.archiveBookSection [sectionAddSub]{
	grid-area: addsub;
}

.archiveBookSection [sectionRemove]{
	grid-area: remove;
}

.archiveBookSectionSubsections{
	margin-left: 2em;
	grid-area: sub;
}

#bookSectionsContent{
	padding: 1em;
}

.bookSectionContainer{
	display: grid;
	grid-template-columns: 1fr;
	grid-template-areas: "main" "sub";
}

.bookSection{
	grid-area: "main";
	display: grid;
	width: calc(100% - 4px);
	grid-template-areas: "opensub page empty title";
	grid-template-columns: auto 5em 0.5em 1fr;
	column-gap: 1em;
	text-align: left;
	transition: 0.25s background-color;
	cursor: pointer;
	padding: 4px;
	font-family: "Open sans", sans-serif;
}

.bookSection[active]{
	background-color:var(--primaryRed);
	color: white;
}

.bookSection[active] .bookSectionOpenSub{
	color: white;
}

.bookSection:hover{
	background-color: lightgrey;
}

.bookSectionOpenSub{
	color: var(--primaryRed);
	grid-area: opensub;
	margin-top: 2px;
}

.bookSectionTitle{
	grid-area: title;
}

.bookSectionPage{
	grid-area: page;
}

.bookSectionSubsections{
	grid-area: sub;
	display: none;
	grid-auto-flow: row;
	margin-left: 1em;
}

/* E-bode */

#mainContainerStore{
	font-family: "Open sans", sans-serif;
	display: grid;
	grid-template-areas: "header" "content" "footer";
	width: calc(90vw - 40px);
	margin-left: 5vw;
	margin-top: 4.5vw;

	padding: 20px;
	border: 1px solid grey;
	background-color: white;
	/* box-shadow: 5px 5px 5px 0px rgba(30,30,30,0.25); */
}

#storeHeader{
	display: grid;
	grid-auto-flow: row;
	row-gap: 1vh;
	width: 100%;
	grid-area: header;
	border-bottom: 1px solid lightgrey;
	padding-bottom: 2vh;
}

#storeTitleContainer{
	width: 100%;
	display: grid;
	grid-template-columns: 1fr auto;
	text-align: center;
	font-size: 3vw;
}

#storeTitle{
	display: flex;
	align-self: center;
	justify-self: center;
	cursor: pointer;
	transition: 0.3s color;
}

#storeTitle:hover{
	color: grey;
}

#storeCart{
	display: flex;
	align-self: center;
	color: grey;
	transition: 0.5s color;
	cursor: pointer;
	font-size: 0.5em;
}

#storeCart:hover{
	color: var(--primaryRed);
}

#storeCartCount{
	font-size: 0.8em;
	position: relative;
	left: -0.5em;
	top: 0.5em;
	z-index: 2;
	background-color: var(--primaryRed);
	border-radius: 50%;
	width: 1em;
	height: 1em;
	color: white;
	text-align: center;
	line-height: 0.9em;
	transition: color 0.5s, background-color 0.5s;
	visibility: hidden;
}

#storeCart:hover #storeCartCount{
	color: var(--primaryRed);
	background-color: white;
}

#storeMajorSelect{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	width: 70%;
	margin-left: 15%;
}

#storeMajorSelect .defaultBtn{
	border: none;
	text-align: center;
	font-size: 2vw;
}

#storeFooter{
	grid-area: footer;
	display: grid;
	width: 50%;
	padding-left: 25%;
	padding-right: 25%;
	margin-bottom: 2vh;
	border-top: 1px solid lightgrey;
	padding-top: 1vh;
}

#storeFooterSelect{
	cursor: pointer;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	text-align: center;
}

#storeFooterSelect span{
	transition: 0.3s color;
}

#storeFooterSelect span:hover{
	color: var(--primaryRed);
}

#storeFooterInfo{
	display: grid;
	text-align: center;
}

#storeFooterInfo h4{
	color: grey;
}

#storeMainContainer{
	grid-area: content;
	margin-top: 2vh;
	margin-bottom: 2vh;
	width: 90%;
	margin-left: 5%;
	margin-right: 5%;
}

#storeMainContainer [data-storeMenu]{
	font-size: 12pt;
}

#storeMainContainer [data-storeMenu] h3{
	font-size: 2em;
}

.storeSelect{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	width: 50%;
	margin-left: 25%;
}

.storeSelect > div{
	height: 10vh;

	display: flex;
	justify-content: center;
	align-content: center;
	transition: 0.5s background-color;
	cursor: pointer;
	font-size: 2vw;
}

.storeSelect > div:hover{
	background-color: lightgrey;
}

.storeSelect > div span{
	display: flex;
	align-self: center;
}

#storeMainContainer [data-storeMenu="news"]{
	display: flex;

	justify-content: center;
}

#storeMainContainer [data-storeMenu="product"]{
	display: grid;

	grid-template-columns: auto 1fr;
	grid-template-areas: "sidebar content";
	column-gap: 2vw;
}

#storeProductSelect{
	display: grid;

	grid-auto-flow: row;
	grid-auto-rows: min-content;
}

#storeProductSelect div{
	height: 4vh;
	font-size: 11pt;
	transition: 0.5s background-color;
	padding-left: 0.5em;
	padding-right: 0.5em;
	cursor: pointer;
	display: flex;
	justify-content: center;
}

#storeProductSelect div:hover{
	background-color: lightgrey;
}

#storeProductSelect div[active]{
	color: white;
	background-color: var(--primaryRed);
}

#storeProductSelect div span{
	display: flex;
	align-self: center;
}

#storeProduct{
	display: grid;
	grid-template-areas: "img title" "img price" "img select" "img number" "img total" "img msg" "img cart" "info info";
	grid-template-columns: auto 1fr;
	column-gap: 2vw;
}

#storeProductTitle{
	grid-area: title;
	font-size: 3vw;
	font-weight: normal;
}

#storeProductImgContainer{
	grid-area: img;
	display: grid;
	grid-template-rows: auto auto 1fr;
}

#storeProductImgSelect{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	width: 20vw;
	column-gap: 5px;
}

.storeProductTinyImage{
	max-width: 100%;
	height: auto;
	cursor: pointer;
	transition: filter 0.3s;
}

.storeProductTinyImage:hover{
	filter: brightness(85%);
}

.storeProductTinyImage img{
	width: 100%;
	height: auto;
	border: 1px solid grey;
}

#storeProductImg{
	max-width: 20vw;
	max-height: auto;
}

#storeProductImg img{
	width: 100%;
	height: auto;
}

#storeProductAttrSelectContainer{
	grid-area: select;
	font-size: 12pt;
	margin-top: 2vh;
}

#storeItemNumberContainer{
	grid-area: number;
	width: 3em;
	margin-top: 1em;
}

#storeItemNumber{
	width: 100%;
}

#storeProductTotal{
	grid-area: total;
	margin-top: 1em;
	font-size: 1.5em;
	color: grey;
}

#storeProductTotalPrice{
	color: black;
}

#storeProductMessage{
	grid-area: msg;
}

.storeProductAttrSelectContainer{
	display: grid;
	width: 75%;
	grid-template-areas: "title" "select";
	margin-top: 1em;
}

.storeProductAttrSelectContainer > span{
	grid-area: title;
	font-size: 1em;
}

.storeProductAttrSelect{
	grid-area: select;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 10%;
	text-align: center;
	column-gap: 1vw;
	font-size: 1em;
}

.storeProductAttrSelect div{
	border: 1px solid grey;
	cursor: pointer;
	transition: filter 0.3s, color 0.3s;
	min-height: 1.5em;
	word-break: break-all;
	padding: 3px;
}

.storeProductAttrSelect div:hover{
	filter: brightness(75%);
	color: grey;
}

.storeProductAttrSelect div[active]{
	color: var(--primaryRed);
	border-color: var(--primaryRed);
}

.storeProductAttrSelect div[inactive]{
	filter: brightness(75%);
	color: lightgrey;
	border-color: lightgrey;
}

#storeProductPrice{
	font-size: 2vw;
	grid-area: price;
}

#storeProductInfoContainer{
	grid-area: info;
	font-size: 12pt;
	border-top: 1px solid lightgrey;
	margin-top: 2vh;
	padding-top: 2vh;
	width: 100%;
}

#storeProductInfoTitle{
	color: grey;
	font-size: 2em;
}

#storeAddToCart{
	grid-area: cart;
	margin-top: 1em;

	background-color: var(--primaryRed);
	color: white;
	padding: 0.5em;
	width: fit-content;
	cursor: pointer;
	transition: 0.5s filter;
}

#storeAddToCart:hover{
	filter: brightness(75%);
}

#storeMainContainer [data-storeMenu="cart"]{
	display: grid;
	grid-template-columns: 4fr 1fr;
	column-gap: 5vw;
}

#shoppingCartEntryContainer{
	display: grid;
	grid-auto-flow: row;
	text-align: center;
}

.shoppingCartEntry{
	display: grid;
	grid-template-columns: auto auto auto 2fr auto auto 1fr auto;
	grid-template-areas: "img title attr spacing1 number spacing2 price remove";
	grid-auto-rows: 100%;
	height: 8vh;
	width: 100%;
	font-size: 12pt;
	column-gap: 1em;
	border-bottom: 1px solid lightgrey;
	padding-bottom: 1vh;
	padding-top: 1vh;
}

.shoppingCartEntry:last-child{
	border-bottom: none;
}

.shoppingCartEntry > span{
	display: flex;
	align-self: center;
}

.shoppingCartImg{
	max-height: 100%;
	max-width: 18vh;
	grid-area: img;
}

.shoppingCartImg img{
	height: 100%;
	width: auto;
}

.shoppingCartEntryTitle{
	grid-area: title;
	font-size: 2em;
	margin-right: 1em;
}

.shoppingCartEntryAttributes{
	grid-area: attr;
	height: 100%;
	display: grid;
	grid-auto-flow: row;
	grid-auto-rows: min-content;
	color: grey;
	margin-top: 2vh;
	text-align: left;
}

.shoppingCartEntryAttributes b{
	color: black;
}

.shoppingCartEntryPrice{
	grid-area: price;
	font-size: 1.75em;
}

.shoppingCartEntryNumber{
	grid-area: number;
	height: 1.5em;
	display: flex;
	align-self: center;
	width: 3em;
	text-align: center;
}

.shoppingCartEntryRemove{
	grid-area: remove;
	cursor: pointer;
	color: var(--primaryRed);
	font-size: 1.5em;
}

@keyframes popupFade{
	from {
		opacity: 1;
	}

	to {
		opacity: 0;
	}
}

#storeInfoPopup{
	position: absolute;
	z-index: 5;
	font-size: 12pt;
	font-family: "Open sans", sans-serif;
	height: 2em;
	width: fit-content;
	background-color: white;
	border-radius: 5px;
	display: flex;
	justify-items: center;
	align-items: center;
	padding-left: 0.5em;
	padding-right: 0.5em;
	-webkit-box-shadow: 1px 1px 5px 2px #777; 
	box-shadow: 1px 1px 5px 2px #777;
	opacity: 0;
	visibility: hidden;

	animation-duration: 1s;
}

#addProductBtn{
	width: fit-content;
	padding-right: 1em;
	margin-left: 5vw;
}

/* Store admin */

#attributeAddContainer{
	border: 1px solid black;
	padding: 1em;
	margin: 1em;
	max-width: 30vw;
}

.attributeCreatorEntry{
	border-bottom: 1px solid lightgrey;
	margin-top: 1em;
	margin-bottom: 1em;
}

.attributeCreatorValues{
	margin: 1em;
	display: grid;
}

.attributeCreatorValues > div{
	width: 100%;	
	display: grid;
	column-gap: 1em;
}

.attributeCreatorValues[data-type="color"] > div{
	grid-template-columns: 1fr 1fr auto;
	grid-template-areas: "color label close" "info image close";
}

.attributeCreatorValues[data-type="text"] > div{
	grid-template-columns: 1fr auto;
}

.attributeCreatorValues > div > i{
	display: flex;
	align-self: center;
	justify-self: center;
	cursor: pointer;
	grid-area: close;
}

.attributeCreatorRemove{
	float: right;
}

#productImagePreviewContainer{
	height: 20vh;
	width: 100%;
}

#productImagePreview{
	max-width: auto;
	max-height: 100%;
}

.storeProductAdminBtnContainer{
	display: grid;
	grid-template-columns: 1fr 1fr;
	font-size: 12pt;
}

#shoppingCartOrderContainer{
	width: 100%;
	height: fit-content;
	max-height: -moz-fit-content;
	padding: 10px;
	-webkit-box-shadow: 5px 5px 10px 0px rgba(0,0,0,0.3);
	-moz-box-shadow: 5px 5px 10px 0px rgba(0,0,0,0.3);
	box-shadow: 5px 5px 10px 0px rgba(0,0,0,0.3);
	font-family: "open sans", sans-serif;
	font-size: 14pt;
}

#cartEmailInput{
	width: calc(100% - 10px);
	font-size: 1.15em;
	margin-top: 0.25em;
}

#cartOrder{
	width: 100%;
	border: none;
	background-color: var(--primaryRed);
	color: white;
	border-radius: 3px;
	transition: filter 0.3s;
	font-size: 2em;
	margin-top: 1em;
}

#cartOrder:hover:not([disabled]){
	cursor: pointer;
	filter: brightness(85%);
}

#cartOrder[disabled]{
	filter: brightness(70%);
}

#cartTotalInfo{
	font-size: 1.15em;
}

#cartTotal{
	font-size: 1.4em;
}

#cartEmailError{
	color: red;
	display: none;
}

.productAttrFileUploadContainer{
	display: grid;
	grid-template-rows: auto auto;
	text-align: left;
	border: none !important;
	padding: 0 !important;
}

.productAttrFileUploadContainer:hover{
	filter: none !important;
	color: black !important;
}

.productAttrFileUploadContainer label{
	font-size: 0.85em;
	color: #555;
	margin-top: -0.3em;
	margin-bottom: 0.25em;
}

.productAttrFileUploadContainer label[data-required]{
	color: red;
	font-size: 0.75em;
}

.spinnerModalContent{
	left: 40vw;
    top: 42.5vh;
    position: relative;
	display: flex;
	justify-content: center;
	height: calc(80px + 2.25em);
}

.spinnerModalContent span{
	position: relative;
	top: 80px;
	right: 40px;
	font-size: 12pt;
}

#orderSpinner{
	left: 40px;
}

#storeListingsMainContainer{
	display: grid;
}

#storeAddListings{
	width: 10vw;
	font-size: 14pt;
	height: 1.5em;
	border: none;
	background-color: var(--primaryRed);
	color: white;
	padding: 5px;
	display: flex;
	justify-self: flex-end;
	justify-content: center;

	transition: filter 0.3s;
	cursor: pointer;
}

#storeAddListings:hover{
	filter: brightness(85%);
}

#storeListingsContainer{
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-auto-flow: row;
	/* row-gap: 1em; */
	margin-top: 10px;
}

.storeListing{
	height: 8vh;
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-areas: "image title" "image author";
	column-gap: 10px;
	font-size: 1.5vh;
	padding: 10px;

	cursor: pointer;
	transition: background-color 0.3s;
}

.storeListing:hover{
	background-color: #CCC;;
}

.storeListing [data-image]{
	height: 8vh;
	width: auto;
	grid-area: image;
}

.storeListing [data-image] img{
	max-height: 100%;
	max-width: auto;
}

.storeListing [data-title]{
	grid-area: title;
	font-size: 2em;
}

.storeListing [data-author]{
	grid-area: author;
}

.storeListingModal{
	position: relative;
	width: min-content;
	min-width: 35vw;
	height: fit-content;
	height: -moz-fit-content;
	max-height: 75vh;
	overflow-y: auto;
	padding: 3vh;
	top: 10vh;
	left: calc(35vw - 3vh);
	border-radius: 3px;
	font-family: "Open sans"
}

.storeListingModal .pogaIeksLoga{
	position: absolute;
	right: 2vh;
}

#storeListingTitle{
	display: block;
	text-align: left;
	font-size: 2em;
	margin-bottom: 0.5em;
	padding-bottom: 0.25em;
	border-bottom: 1px solid lightgrey;
}

#storeListingDescription{
	display: inline-block;
	text-align: justify;
	margin-top: 1em;
}

#storeListingImageContainer{
	max-width: 100%;
	height: auto;
}

#storeListingImageContainer img{
	max-width: 100%;
	max-height: 100%;
}

#storeListingContactInfo{
	display: block;
	text-align: right;
	margin-top: 1em;
	display: grid;
}

#storeMainContainer [data-storeMenu="addListing"] > span{
	font-size: 24pt;
	margin-bottom: 0.5em;
	display: inline-block;
}

#addListingContainer{
	display: grid;
	grid-template-columns: 1fr 1fr;
}

#addListingInputContainer{
	display: grid;
	grid-auto-flow: row;
	width: 50%;
	row-gap: 1em;
}

#addListingImageContainer{

}

.imageManagerEntry{
	/* border: 1px solid black; */
	font-size: 5vw;
	border-radius: 2px;
	font-weight: bold;
	cursor: pointer;

	width: 1.25em;
	height: 1.25em;

	display: flex;
	align-items: center;
	justify-content: center;

	transition: filter 0.3s, background-color 0.3s;
}

.imageManagerEntry:hover{
	filter: brightness(85%);
	background-color: #eee;
}

#cdAdContent{
	text-align: center;
	display: grid;
	grid-template-rows: auto;
	font-family: "Open sans", sans-serif;
	font-size: 1.5em;
	color: white;

	/* Pure jank */
	overflow-y: hidden;
	/* height: 665px; */
	border-radius: 3px;
}

#cdAdContentWrapper{
	display: flex;
	justify-content: center;
	margin-top: calc(28pt + 1vh);
	width: fit-content;
}

#cdAdImageContainer{
	width: 40vw;
}

@media only screen and (max-width: 768px) {
	#cdAdImageContainer{
		width: 75vw !important;
	}
}

#cdAdImageContainer img{
	max-width: 100%;
	max-height: 100%;

	transition: filter 0.5s;
}

#cdAdImageContainer img:hover{
	filter: brightness(70%);
}

#adModalContent{
	margin-top: 5vh;
	display: flex;
	justify-content: center;
	width: calc(40vw + 100px);
}

#lectureCatSelect{
	display: grid;
	grid-template-columns: 1fr 1fr;
	width: 35%;
	margin-left: auto;
	margin-right: auto;
	column-gap: 10px;
}

#lectureCatSelect button{
	font-size: 1.75rem;
	border: none;
	transition: backgroundColor 0.5s;
	border-radius: 2px;
}

/* Metodika */

#mainMetodikaContent{
	gap: 1vw;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-auto-rows: min-content;
	row-gap: 10vh;
	column-gap: 5vw;
	
}

.metodikaEntry {
	display: grid;
	grid-template-columns: auto;
	grid-template-rows: 1fr auto;
	grid-template-areas: "img info" "admin admin";
	row-gap: 1vh;
	column-gap: 2em;
	cursor: pointer;
}

.metodikaEntry:hover img {
	filter: brightness(85%);
	-webkit-box-shadow: 5px 5px 15px 5px rgba(0,0,0,0.15); 
	box-shadow: 5px 5px 15px 5px rgba(0,0,0,0.15);
}

.metodikaInfo {
	grid-area: info;
	width: 100%;
	font-size: 1.25rem;
	font-family: "Open sans", sans-serif;
	display: block;
	text-align: justify;
	margin-top: 1em;
}

.metodikaImageContainer {
	grid-area: img;
	display: flex;
	justify-content: center;
	width: 100%;
	max-height: 50vh;
}

.metodikaImageContainer img {
	max-width: 100%;
	max-height: 100%;
	transition: filter 0.35s, box-shadow 0.35s;
	object-fit: contain;
}

@media only screen and (min-width: 761px) and (max-width: 1200px) {
	#mainMetodikaContent{
		grid-template-columns: 1fr;
		column-gap: 2.5vw;
	}

	.metodikaEntry {
		grid-template-rows: auto 1fr auto;
		grid-template-areas: "img" "info" "admin";
		column-gap: 0;
		max-width: 50vw;
		justify-self: center;
	}
}

@media only screen and (max-width: 760px) {
	#mainMetodikaContent{
		grid-template-columns: 1fr;
		column-gap: 2.5vw;
	}

	.metodikaEntry {
		grid-template-rows: auto 1fr auto;
		grid-template-areas: "img" "info" "admin";
		column-gap: 0;
	}
}

#adPost {
	border: none;
	overflow: hidden;
}

/* Calendar */

#mainContainerCalendar{
	margin-left: 5vw;
	margin-right: 5vw;
	margin-bottom: 3vh;
}

#calendar {
	font-family: "Open sans", sans-serif;
	/* min-height: 20vh; */
}

.calendarContentContainer {
	display: grid;
	grid-template-columns: 2fr 1fr;
	grid-template-areas: "list calendar";
	column-gap: 3%;
	width: 85%;
	margin-left: 7.5%;
}

.calendarContentContainer > div {
	background-color: white;
	padding: 2.5%;
	height: fit-content;
}

.calendarEventListContainer {
	display: grid;
	grid-template-areas: "header" "list";
	grid-area: list;
	row-gap: 2vh;
	grid-template-rows: min-content auto;
}

.calendarEventListHeader {
	border-bottom: 1px solid var(--primaryRed);
	font-family: "Open sans", sans-serif;
	font-size: 2rem;
	padding: 0 0 0.25em 10px;
}

#calendarEventList {
	display: grid;
	row-gap: max(2vh, 2rem);

	font-family: "Open sans", sans-serif;
	font-size: 1.5rem;
	color: gray;
}

.calendarEventEntry {
	width: 100%;
	display: grid;
	grid-template-areas: "image datetime" "image desc";
	grid-template-rows: auto 1fr;
	grid-template-columns: 25% auto;
	column-gap: 5%;
	color: black;
}

.calendarEventEntryImage {
	width: 100%;
	grid-area: image;
}

.calendarEventEntryImage[data-empty] {
	display: flex;
	justify-content: center;
}

.calendarEventEntryImage[data-empty] img {
	width: clamp(75px, 5vw, 125px);
	object-fit: contain;
}

@media only screen and (max-width: 768px) {
	.calendarEventEntryImage[data-empty] {
		display: none;
	}
}

.calendarEventEntryImage img {
	width: 100%;
	max-height: 100%;
}

.calendarEventEntryDatetime {
	grid-area: datetime;
	font-family: "Open sans", sans-serif;
	font-size: 0.85rem;
}

.calendarEventEntryDatetime > span {
	white-space: nowrap;
}

.calPrimRedText {
	color: var(--primaryRed);
	font-size: 1.5em;
}

.calendarEventEntryDesc {
	grid-area: desc;
	text-align: justify;
	display: grid;
	grid-auto-rows: min-content;
	grid-template-areas: "title" "location" "hr" "desc";
	font-size: 1rem;
	overflow-x: auto;
}

.calendarEventEntryDesc hr {
	grid-area: hr;
	width: 95%;
	opacity: 0.5;
	border: none;
	border-bottom: 1px solid var(--primaryRed);
}

.calendarEventEntryTitle {
	grid-area: title;
	font-size: 1.75em;
	font-family: "Open sans", sans-serif;
}

.calendarEventEntryDesc {
	grid-area: desc;
	font-family: 'Times New Roman', Times, serif;
}

.calendarEventEntryDesc a {
	text-decoration: underline;
}

.calendarEventEntryLocation {
	grid-area: "location";
	font-family: "Open sans", sans-serif;
	font-size: 1em;
}

.fc-daygrid-day-events {
	min-height: 0 !important;
}

.fc-day-today {
	color: #adadad !important;
}

.fc-day:not(.fc-col-header-cell):not(.fc-day-today):not([data-hasEvent]) {
	opacity: 0.25;
}

.fc-day-past {
	opacity: 0.35;
}

.fc-day[data-hasEvent] {
	background-color: var(--primaryRed);
	color: white;

	cursor: pointer;
	transition: filter 0.3s;
}

.fc-day[data-hasEvent]:hover {
	filter: brightness(85%);
}

.fc-day[data-active] {
	background-color: white !important;
	color: var(--primaryRed);
	filter: drop-shadow(0px 0px 3px rgba(0, 0, 0, 0.15));
	opacity: 1 !important;
}

.fc-day[data-active]::after {
	content: "";
	width: calc(100% + 2px);
	height: 100%;
	position: absolute;
	top: 0;
	left: -1px;
	border: 1px solid var(--primaryRed);
}

.fc-day[data-active] .fc-daygrid-day-number {
	font-weight: bold;
}

.fc-event {
	transition: filter 0.3s;
	cursor: pointer;
}

.fc-event:hover {
	filter: brightness(85%);
}

.fc .fc-daygrid-day-top {
	flex-direction: row !important;
	font-size: 1.15rem;
	font-weight: 500;
	justify-content: center;
}

.fc-event-title {
	margin-left: 0.15em;
}

.fc-col-header-cell {
	overflow-x: hidden;
}

#calendarPopup {
	display: grid;
	grid-template-columns: 1fr auto;
	column-gap: 1vw;
	min-width: 30vw;
	width: fit-content;
	/* height: fit-content; */
	background-color: white;
	padding: 1vw;
	position: absolute;
	z-index: 100;
	box-shadow: 0 5px 10px rgba(0,0,0,0.1);

	opacity: 0;
	transition: opacity 0.3s;
	pointer-events: none;

	left: -100vw;
	top: -100vh;
}

#calendarPopup[data-active] {
	opacity: 1;
	pointer-events: all;
}

#calendarPopup::after {
	content: "";
	position: absolute;
	grid-column: span 2;
	width: 0;
	height: 0;
	border: 40px solid transparent;
}

#calendarPopup[data-dir-h="0"]::after {
	left: calc(50% - 40px);
}

#calendarPopup[data-dir-h="-1"]::after {
	left: 20px;
}

#calendarPopup[data-dir-h="1"]::after {
	left: calc(100% - 100px);
}

#calendarPopup[data-dir-v="1"]::after {
	top: -80px;
	border-bottom: 40px solid white;
}

#calendarPopup[data-dir-v="-1"]::after {
	top: 100%;
	border-top: 40px solid white;
}

.calPopupImg {
	width: 100%;
	height: 100%;
}

.calPopupImg img {
	width: 100%;
	max-height: 100%;
}

#calendarPopup[data-noimg] > .calPopupImg {
	display: none;
}

.calPopupContent {
	font-family: "Open sans", sans-serif;
	font-size: 1.35rem;
	width: 100%;
	display: flex;
	flex-flow: column;
	row-gap: 0.25em;
	padding-top: 1.5rem;
}

#calendarPopup[data-noimg] .calPopupContent {
	padding-top: 0;
	margin-top: -1rem;
}

.calPopupContent h3 {
	font-size: 1.85rem;
	margin: 0.25em 0;
}

.calPopupContentOther {
	text-align: left;
	font-size: 1.1rem;
	max-width: 20vw;
}

.calPopupContentOther h4 {
	font-size: 1.25rem;
	margin-top: 0.5em;
	margin-bottom: 0.25em;
}

.calPopupClose {
	position: absolute;
	font-size: 4rem;
	left: calc(100% - 3rem);
	top: -0.5rem;
	cursor: pointer;
	transition: color 0.3s;
}

.calPopupClose::after {
	content: "×";
	display: block;
}

.calPopupClose:hover {
	color: var(--primaryRed);
}

#calendarAddEvent {
	color: var(--primaryRed);
	min-width: 15vw;
	padding: 0.25em 1vw;
	height: 1.7em;
	text-align: center;
	font-size: 1.5rem;
	font-weight: bold;
	margin-bottom: 1em;
	position: relative;
	left: calc(100% - 25vw);
}

#addCalendarEntryPopup {
	background-color: rgba(0,0,0,0.85);
	width: 100vw;
	height: 100vh;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1000;

	display: none;
}

#addCalendarEntryPopup > div {
	background-color: white;
	top: 5%;
	left: calc(50% - 20vw);
	font-family: "Open sans", sans-serif;
	padding: 20px;
	min-height: 5vh;	
	max-height: 85vh;
	overflow-y: auto;
	position: relative;
}

.addCalendarEntryContent {
	width: 40vw;
}

.addCalendarEntryContent h3 {
	font-size: 2rem;
}

.addCalendarEntryInputs {
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: 5%;
	row-gap: 0.5em;
}

.addCalendarEntryInputs label {
	display: flex;
	align-content: center;
}

.addCalendarEntryInputs input {
	margin-bottom: 0.5em;
	width: 100%;
	max-width: 15vw;
}

#addCalendarEntrySubmit {
	width: fit-content;
	min-width: 50%;
	max-width: 100%;
	text-align: center;
	background-color: white;
	border: 1px solid black;
	color: var(--primaryRed);
	padding: 0.5em 2em;
	font-weight: bold;
	font-size: 1.25rem;

	transition: filter 0.3s;
	cursor: pointer;
}

#addCalendarEntrySubmit:hover {
	filter:brightness(85%);
}

#calEntryOtherInfo {
	padding: 0.5em;
}

#calEntryImagePreview {
	display: none;
	grid-column: span 2;
}

#calEntryImagePreview img {
	width: 100%;
}

.calEntryError {
	color: red;
	display: none;
}

#calendarSubmitSuccess, #calendarSubmitFail {
	display: none;
}

#calendarSubmitSuccess span, #calendarSubmitFail span {
	margin-top: 1em;
	display: inline-block;
}

#adminCalendarBtn {
	width: 20vw;
}

@media only screen and (max-width: 1400px) {
	.fc-today-button {
		margin-bottom: 10px !important;
		float: right;
	}

	.fc-today-button + .fc-button-group {
		float: right;
	}
}

@media only screen and (max-width: 768px) {
	.calendarContentContainer {
		grid-template-areas: "calendar" "list";
		row-gap: 2vh;
		width: 85%;
		grid-template-columns: auto;
	}

	#calendarAddEvent {
		width: 85%;
		margin-left: 7.5%;
		position: static;
		margin-top: 3vh;
	}

	.calendarEventListHeader {
		font-size: 2rem;
	}

	#calendarEventList {
		font-size: 1.15rem;
	}

	.calendarEventEntry {
		grid-template-areas: "image" "datetime" "desc";
		grid-template-columns: auto;
		padding-left: 5%;
		padding-right: 5%;
		row-gap: 1vh;
		width: 90%;
	}

	.calendarEventEntryImage {
		width: 87.5%;
	}

	.calendarEventEntryDatetime {
		font-size: 1rem;
	}

	.calPrimRedText {
		font-size: 1.25em;
	}

	.calendarEventEntryDesc {
		font-size: 1rem;
	}

	.calendarEventEntryTitle {
		font-size: 1.25em;
	}

	.calendarEventEntryLocation {
		font-size: 1em;
	}

	.fc table {
		font-size: 0.65rem !important;
	}

	.fc table th {
		overflow-x: hidden;
	}

	.fc-toolbar-title {
		font-size: 1.35rem !important;
	}

	#addCalendarEntryPopup > div {
		width: 80vw;
		left: 5vw;
	}
}

.adminDanceArchiveVideoContainer {
	display: grid;
	grid-auto-flow: row;
	row-gap: 10px;
}

.adminDanceArchiveVideoContainer > div {
	display: grid;
	grid-template-columns: 1fr auto;
	column-gap: 10px;
}

.adminDanceArchiveVideoContainer input {
	height: 1.25em;
	width: 20em;
}

.flatpickr-calendar {
	font-family: Arial, Helvetica, sans-serif;
}

#mantojumsBackToSelectBtn {
	border: none;
	background-color: var(--primaryRed);
	color: white;
	transition: filter 0.3s;
	cursor: pointer;
	font-size: 2vh;
	height: 1.65em;
	width: 100%;
	padding: 0.2em 1em 0.2em 1em;
}

#mantojumsBackToSelectBtn:hover {
	filter: brightness(85%);
}

#mantojumsHead {
	display: grid;
	grid-template-columns: 7vw 1fr;
	grid-template-areas: "back title";
	align-items: center;
	justify-items: center;

	display: none;
}

#mantojumsHead span {
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 3.5vh;
	position: relative;
	left: -3.5vw;
	width: fit-content;
}