/*===   GENERAL   ===*/
@property --sunsetColor1 {
	syntax: '<color>';
	initial-value: #D40078;
	inherits: false;
}

@property --sunsetColor2 {
	syntax: '<color>';
	initial-value: #ff6c11;
	inherits: false;
}
@property --playColor1 {
	syntax: '<color>';
	initial-value: #00000060;
	inherits: false;
}

@property --playColor2 {
	syntax: '<color>';
	initial-value: #00000060;
	inherits: false;
}
@property --sunsetGradPoint {
	syntax: '<percentage>';
	inherits: false;
	initial-value: 100%;
}
html{
	font-size: var(--base-font-size);
}
*{
	box-sizing: border-box;
}
body{
	background: var(--background);
	color: var(--text);
	margin: 0;
	padding: 0;
	height: 100vh;
	font-family: var(--font-family);
	font-weight: var(--font-regular);
	font-size: var(--font-size);
}
a, a:visited, a:hover, a:active{
	text-decoration: none;
	color: inherit;
}
h1{
	font-size: 10rem;
	font-family: var(--font-title-family);
	font-weight: var(--font-title-bold);
	margin: 0;
}
h2{
	font-size: 6rem;
	font-family: var(--font-title-family);
	font-weight: var(--font-title-regular);
	margin: 0;
}
h3{
	font-size: 4rem;
	font-family: var(--font-title-family);
	font-weight: var(--font-title-regular);
	margin: 0;
}
h4{
	font-size: 3rem;
	font-family: var(--font-family);
	font-weight: var(--font-bold);
	margin: 0;
}
h5{
	font-size: 2rem;
	font-family: var(--font-title-family);
	font-weight: var(--font-regular);
	margin: 0;
}
h6{
	font-size: 1.5rem;
	font-family: var(--font-family);
	font-weight: var(--font-regular);
	margin: 0;
}
.logo{
	text-align: center;
}
.logo-garnish{
	height: 2px;
	width: 100%;
	background: linear-gradient(90deg, var(--color-main) 0%, var(--color-second) 100%);
	margin-bottom: var(--padding-medium);
}
.bg-sunset{
	background: linear-gradient(45deg, var(--sunsetColor1) 0%, var(--sunsetColor2) var(--sunsetGradPoint)) !important;
	transition: --sunsetColor1 .5s, --sunsetColor2 1.5s, --sunsetGradPoint 2s;
}
.bg-sunset:hover{
	--sunsetColor2: var(--color-second-light);
	--sunsetGradPoint: 60%;
}
.bg-sunset:active{
	--sunsetColor1: var(--color-second);
}
/*===   FORM   ===*/
label{
	display: block;
	width: 100%;
	margin: var(--margin) 0 var(--margin-large);
	color: var(--text-medium);
}
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="button"]):not([type="submit"]){
	display: block;
	width: 100%;
	background: var(--text-secondary-disabled);
	border-radius: var(--border-radius-large);
	border: none;
	height: calc(var(--margin-large)* 2);
	color: var(--text);
	font-family: var(--font-family);
	font-weight: var(--font-regular);
	font-size: var(--font-size);
	padding: 0 var(--padding);
}
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="button"]):not([type="submit"]):focus{
	outline: var(--border-width-medium) solid color-mix(in srgb, var(--color-second-dark) 60%, transparent);
}
input[type="range"]{
	-webkit-appearance: none;
	width: 100%;
	height: 6px;
	border-radius: 10px;
	outline: none;
	transition: 0.3s;
	background: var(--text-secondary-disabled);
}
input[type="range"]::-webkit-slider-thumb{
	-webkit-appearance: none;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	cursor: pointer;
	background: linear-gradient(90deg, var(--color-main) 0%, var(--color-second) 100%);
}
input[type="range"]:active::-webkit-slider-thumb{
	transform: scale(1.2);
	transition: 0.3s;
}

/*===   LOGIN   ===*/
.login-viewport{
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}
.login-popup{
	background: var(--background-lvl1);
	border-radius: var(--border-radius-large);
	padding: var(--padding-large);
	box-shadow: var(--box-shadow-lvl1);
	width: calc(100% - var(--margin-large));
	max-width: 350px;
}
/*===   ADMIN   ===*/
.admin-viewport{
	position: absolute;
	inset: 0;
	display: flex;
	--navWidth: 200px;
}
.admin-viewport nav{
	height: 100%;
	width: var(--navWidth);
	background: var(--background-lvl1);
	box-shadow: var(--box-shadow-lvl1);
}
.admin-viewport main{
	height:  100%;
	width: calc(100% - var(--navWidth));
	--playerHeight: 100px;
}

.navElement{
	width: 100%;
	padding: var(--padding);
	margin: var(--margin-medium) 0;
}
.mini-logo{
	width: 100%;
	height: 100%;
	font-size: 6rem;
	font-family: var(--font-title-family);
	font-weight: var(--font-title-regular);
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--border-radius-medium);
	cursor: pointer;
	user-select: none;
}
.menu-button{
	height: 100%;
	width: 100%;
	display: flex;
	align-items: center;
	text-align: center;
	font-size: 1.5rem;
	border-radius: var(--border-radius-medium);
	transition: .5s;
	padding: var(--padding-medium);
}
.menu-button:hover{
	background: var(--text-invisible);
}
.menu-button i{
	font-size: 2.5rem;
	margin: 0 var(--margin-medium) 0 0
}
.dashboard .menu-button-dashboard{
	color: var(--color-second);
}
.atmosphere .menu-button-atmosphere{
	color: var(--color-second);
}
.sound .menu-button-sound{
	color: var(--color-second);
}
nav .logo{
	text-align: left;
}
.studio-section{
	height: calc(100% - var(--playerHeight));
	padding: var(--padding-large);
	--header-height: 80px;
}
.studio-player{
	height: var(--playerHeight);
	width: 100%;
	padding: 0 var(--padding-large) var(--padding-large);
}
.studio-player .player-controls{
	height: 100%;
	background: var(--background-lvl1);
	box-shadow: var(--box-shadow-lvl1);
	border-radius: var(--border-radius-large);
	display: flex;
}
.studio-section .header{
	height: var(--header-height);
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.studio-section .content{
	height: calc(100% - var(--header-height));
	background: var(--background-lvl1);
	box-shadow: var(--box-shadow-lvl1);
	border-radius: var(--border-radius-large);
	overflow: hidden;
}
label.upload-label{
	margin: 0;
	padding: 0;
}
.atmos-editor{
	height: 100%;
	display: flex;
	--soundscapeWidth: 250px;
}
.soundscape-list{
	height: 100%;
	width: var(--soundscapeWidth);
	background: var(--background-lvl2);
	--headerHeight: 40px;
	--footerHeight: 40px;
	overflow: hidden;
	border-right: 1px solid var(--text-secondary-disabled);
}
.soundscape-list-header{
	height: var(--headerHeight);
	background: var(--background-lvl3);
	box-shadow: var(--box-shadow-lvl1);
	display: flex;
	align-items: center;
	justify-content: center;
}
.soundscape-list-content{
	height: calc(100% - calc(var(--headerHeight) + var(--footerHeight)));
	overflow: auto;
}
.soundscape-list-footer{
	height: var(--footerHeight);
	background: var(--background-lvl3);
	box-shadow: var(--box-shadow-lvl1-reverse);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 var(--padding);
}
.soundscape-content{
	height: 100%;
	width: calc(100% - var(--soundscapeWidth));
	display: flex;
	--presetListWidth: 250px;
	--effectListWidth: 350px;
	--separatorWidth: 2px;
}
.dz-button.icon-button{
	padding: 0;
	height: 32px;
	width: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2.2rem;
}
.dz-button.soundscape-list-add{
	font-size: 1.3rem;
}
.no-results{
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.2rem;
	text-align: center;
}
.textlink{
	text-decoration: underline;
	font-weight: var(--font-bold);
	color: var(--color-second);
	cursor: pointer;
}
.soundscape-item{
	margin: var(--margin);
	padding: var(--padding-medium);
	display: flex;
	align-items: center;
	justify-content: space-between;
	cursor: pointer;
	border-radius: var(--border-radius-medium);
	transition: .5s;
}
.soundscape-item:hover{
	background: var(--text-invisible);
}
.soundscape-selected{
	color: var(--color-second);
}
.preset-list{
	height: 100%;
	width: calc(var(--presetListWidth) - var(--separatorWidth));
}
.track-list{
	height: 100%;
	width: calc(100% - var(--effectListWidth) - var(--presetListWidth));
	padding: var(--padding-large) 0 0 0;
}
.effect-list{
	height: 100%;
	width: calc(var(--effectListWidth) - var(--separatorWidth));
}
.soundscape-content-separator{
	height: 90%;
	align-self: center;
	width: var(--separatorWidth);
	background: var(--text-invisible);
	border-radius: var(--border-radius-medium);
}
.track-tile{
	margin: var(--margin-medium);
	padding: var(--padding);
	display: flex;
	align-items: center;
	border-radius: var(--border-radius-medium);
	background: var(--background-lvl2);
}
.track-tile.inmix{
	border: 1px solid var(--color-main);
}
.track-control{
	padding: var(--padding) var(--padding-medium);
}
.track-play-button{
	width: 32px;
	height: 32px;
	background: linear-gradient(45deg, var(--playColor1) 0%, var(--playColor2) 100%);
	border-radius: var(--border-circle);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: --playColor1 .5s, --playColor2 .5s;
}
.track-play-button:hover{
	--playColor1: var(--color-main);
	--playColor2: var(--color-second);
}
.track-info{
	flex-grow: 1;
	padding: 0 var(--padding);
}
.track-name{
	font-size: 1.5rem;
}
.track-data{
	font-size: 1.2rem;
	color: var(--color-main);
}
.track-configs{
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.track-configs > div{
	margin: 0 0 0 var(--margin-medium);
}
.track-volume{
	width: 100px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.track-config-icon{
	padding: var(--padding);
	font-size: 1.7rem;
	cursor: pointer;
}
.quick-add-track{
	padding: var(--padding-large) 0;
	text-align: center;
	font-size: 1.2rem;
}
.sound-list{
	background: var(--background);
	border-radius: var(--border-radius-large);
	overflow: hidden;
	--trackSoundListHeader: 30px;
}
.sound-list-header{
	height: var(--trackSoundListHeader);
	background: var(--text-secondary-disabled);
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 var(--padding);
}