@import "components/forms.css";

:root {
	--lava-app-chrome-background: rgba(255, 255, 255, 1.0);
	--lava-app-chrome-background-hover: rgba(63, 158, 242, 0.1);
	--lava-app-chrome-background-warning: rgba(242, 63, 63, 0.3);
	--lava-app-chrome-background-warning-hover: rgba(242, 63, 63, 0.5);
	--lava-app-chrome-background-secondary: rgba(0,0,0, 0.03);
	--lava-app-chrome-background-secondary-zebra: rgba(255,255,255, 0);
	/* --lava-app-chrome-background-secondary-zebra: rgba(76, 172, 246, 0.15); */
	--lava-app-chrome-foreground-main: rgba(0,0,0,0.9);
	--lava-app-chrome-foreground-secondary: rgba(0,0,0,0.4);
	--lava-app-chrome-separator: rgba(0, 0, 0,0.1);
	--lava-app-chrome-albumArtworkBorder: rgba(0,0,0,0.1);

	--lava-app-link-normal: rgba(0,0,0, 0.7);
	--lava-app-link-hover: rgba(76, 172, 246, 1);

	--lava-app-card-link-normal: rgba(0,0,0, 0.8);
	--lava-app-card-link-hover: rgba(76, 172, 246, 1);

	--lava-app-text-notInContainer: rgba(255, 255, 255, 1);
	--lava-app-text-inJBox: rgba(0, 0, 0, 1);
	--lava-app-text-header: rgba(76, 172, 246, 1);

	--lava-app-chrome-options-active: rgba(76, 172, 246, 1);
	--lava-app-chrome-options-active-text: rgba(255, 255, 255, 1);
	--lava-app-chrome-options-hover: rgba(76, 172, 246, 0.8);

	--lava-app-text-normal: rgba(0,0,0,0.9);
	--lava-app-text-empty: rgba(0,0,0,0.3);
	--lava-app-element-background: rgba(0,0,0,0.1);

	--lava-app-form-input-background: rgba(255,255,255,1);
	--lava-app-form-input-background-active: rgba(255,255,255,1);
}
body.dark {
	--lava-app-chrome-background: rgba(38, 40, 49, 1.0);
	--lava-app-chrome-background-hover: rgba(63, 158, 242, 0.1);
	--lava-app-chrome-background-secondary: rgba(255,255,255, 0.1);
	--lava-app-chrome-background-secondary-zebra: rgba(255,255,255, 0.2);
	--lava-app-chrome-foreground-main: rgba(255, 255, 255, 0.9);
	--lava-app-chrome-foreground-secondary: rgba(255, 255, 255, 0.6);
	--lava-app-chrome-separator: rgba(255, 255, 255, 0.1);
	--lava-app-chrome-albumArtworkBorder: rgba(255, 255, 255, 0.05);

	--lava-app-link-normal: rgba(255,255,255, 0.7);
	--lava-app-link-hover: rgba(76, 172, 246, 1);

	--lava-app-card-link-normal: rgba(255,255,255, 0.8);
	--lava-app-card-link-hover: rgba(76, 172, 246, 1);

	--lava-app-text-notInContainer: rgba(255, 255, 255, 1);
	--lava-app-text-inContainer: rgba(255, 255, 255, 0.3);
	--lava-app-text-inJBox: rgba(255, 255, 255 1);
	--lava-app-text-header: rgba(76, 172, 246, 1);

	--lava-app-chrome-options-active: rgba(76, 172, 246, 1);
	--lava-app-chrome-options-active-text: rgba(255, 255, 255, 1);
	--lava-app-chrome-options-hover: rgba(76, 172, 246, 0.8);

	--lava-app-text-normal: rgba(255,255,255,0.9);
	--lava-app-text-empty: rgba(255,255,255,0.3);
	--lava-app-element-background: rgba(255,255,255,0.3);

	--lava-app-form-input-background: rgba(41, 72, 115, 0.55);
	--lava-app-form-input-background-active: rgba(52, 94, 152, 1);
}


html,
body {
  height: 100%;
  width: 100%;
  overflow: auto;
}

body {
	background-size: cover;
	background-attachment: fixed;
	background-color: #008cff;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg fill-opacity='0.16'%3E%3Cpath fill='%2332a3f5' d='M486 705.8c-109.3-21.8-223.4-32.2-335.3-19.4C99.5 692.1 49 703 0 719.8V800h843.8c-115.9-33.2-230.8-68.1-347.6-92.2C492.8 707.1 489.4 706.5 486 705.8z'/%3E%3Cpath fill='%2340b9ea' d='M1600 0H0v719.8c49-16.8 99.5-27.8 150.7-33.5c111.9-12.7 226-2.4 335.3 19.4c3.4 0.7 6.8 1.4 10.2 2c116.8 24 231.7 59 347.6 92.2H1600V0z'/%3E%3Cpath fill='%2343d0de' d='M478.4 581c3.2 0.8 6.4 1.7 9.5 2.5c196.2 52.5 388.7 133.5 593.5 176.6c174.2 36.6 349.5 29.2 518.6-10.2V0H0v574.9c52.3-17.6 106.5-27.7 161.1-30.9C268.4 537.4 375.7 554.2 478.4 581z'/%3E%3Cpath fill='%233ce8d2' d='M0 0v429.4c55.6-18.4 113.5-27.3 171.4-27.7c102.8-0.8 203.2 22.7 299.3 54.5c3 1 5.9 2 8.9 3c183.6 62 365.7 146.1 562.4 192.1c186.7 43.7 376.3 34.4 557.9-12.6V0H0z'/%3E%3Cpath fill='%2326ffc5' d='M181.8 259.4c98.2 6 191.9 35.2 281.3 72.1c2.8 1.1 5.5 2.3 8.3 3.4c171 71.6 342.7 158.5 531.3 207.7c198.8 51.8 403.4 40.8 597.3-14.8V0H0v283.2C59 263.6 120.6 255.7 181.8 259.4z'/%3E%3Cpath fill='%233df0d1' d='M1600 0H0v136.3c62.3-20.9 127.7-27.5 192.2-19.2c93.6 12.1 180.5 47.7 263.3 89.6c2.6 1.3 5.1 2.6 7.7 3.9c158.4 81.1 319.7 170.9 500.3 223.2c210.5 61 430.8 49 636.6-16.6V0z'/%3E%3Cpath fill='%2348e1dd' d='M454.9 86.3C600.7 177 751.6 269.3 924.1 325c208.6 67.4 431.3 60.8 637.9-5.3c12.8-4.1 25.4-8.4 38.1-12.9V0H288.1c56 21.3 108.7 50.6 159.7 82C450.2 83.4 452.5 84.9 454.9 86.3z'/%3E%3Cpath fill='%234dd2e9' d='M1600 0H498c118.1 85.8 243.5 164.5 386.8 216.2c191.8 69.2 400 74.7 595 21.1c40.8-11.2 81.1-25.2 120.3-41.7V0z'/%3E%3Cpath fill='%234ec3f4' d='M1397.5 154.8c47.2-10.6 93.6-25.3 138.6-43.8c21.7-8.9 43-18.8 63.9-29.5V0H643.4c62.9 41.7 129.7 78.2 202.1 107.4C1020.4 178.1 1214.2 196.1 1397.5 154.8z'/%3E%3Cpath fill='%234ab4ff' d='M1315.3 72.4c75.3-12.6 148.9-37.1 216.8-72.4h-723C966.8 71 1144.7 101 1315.3 72.4z'/%3E%3C/g%3E%3C/svg%3E") !important;
}
body.dark {
	background: rgb(0, 62, 101);
	background-image: none;
	/* background: -moz-linear-gradient(-45deg, rgba(0, 62, 101,1) 0%, rgba(1, 56, 91, 1) 84%);
	background: -webkit-linear-gradient(-45deg, rgba(0, 62, 101,1) 0%,rgba(1, 56, 91,1) 84%);
	background: linear-gradient(135deg, rgba(0, 62, 101,1) 0%,rgba(1, 56, 91,1) 84%);
	/* filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#60c2fe', endColorstr='#1570e3',GradientType=1 ); */ */
	background-size: 100% 100%;
	background-attachment: fixed;
}

/****
Global Text
****/
h3 {
	font-size: 18px;
	/* font-family: 'Source Sans Pro', sans-serif; */
	font-family: 'Inter', sans-serif;
	/* font-size: 24px; */
	/* font-family: 'Inter','Source Sans Pro', sans-serif; */
	/* font-weight: 600; */
	color: var(--lava-app-text-header);
	font-weight: 400;
	}
	a h3 {
		color: rgba(0,0,0,0.8);
	}
	h3 span {
		color: rgba(0,0,0,0.5);
		text-transform: uppercase;
		/* font-size: 0.75em; */
	}

	body.dark .content {
		/* background: rgba(28, 49, 77, 1); */
		background: var(--lava-app-chrome-background);
	}
	body.dark .content * {
		/* color: rgba(255,255,255,0.8) !important; */
	}
	.lava_station {
		border-color: var(--lava-app-chrome-separator) !important;
	}
	.lava_stations .lava_station .lava_station_details .station-nowplaying--meta {
		border-top-color: var(--lava-app-chrome-separator) !important;
	}
	:not(.content) .ui_nav_tabs li.active a {
		background: var(--lava-app-chrome-background);
		color: var(--lava-app-chrome-foreground-main);
	}

/****
JBox
****/
.jBox-content .prompt {
	margin-top: 15px;
	text-align: center;
	color: var(--lava-app-chrome-foreground-main);
	padding-bottom: 15px;
	margin-bottom: 15px;
	border-bottom: 1px solid var(--lava-app-chrome-separator);
	}
	.jBox-content .prompt p {
		margin-top: 0px;
		color: var(--lava-app-chrome-foreground-secondary);
		}

#lava_app_header {
	width: 250px;
	height: 100%;
	background: var(--lava-app-chrome-background);
	position: fixed;
	box-shadow: 0px 0px 10px rgba(0,0,0,0.2);
	z-index: 100;
	}
	#lava_app_navigation ul {
		display: block;
		list-style: none;
		margin-left: 15px;
		margin-right: 15px;

	}
	#lava_app_navigation ul li + li {
		margin-top: 5px;
	}
	#lava_app_navigation ul li a {
		display: block;
		padding: 5px;
	}
	#lava_app_navigation ul li a:hover {
		background: rgba(63, 158, 242, 0.6);
		border-radius: 3px;
		color: rgba(255,255,255,1);
	}
	#lava_app_navigation ul li a.active {
		background: rgba(63, 158, 242, 1.0);
		border-radius: 3px;
		color: rgba(255,255,255,1);
	}
#viewer {
	width: calc(100% - 250px);
	height: 100%;
	left: 250px;
	position: absolute;
	padding-top:100px;
	}

	#viewer > div {
		max-width: 80%;
		margin-left: auto;
		margin-right: auto;
	}
	#viewer > div:last-of-type {
		padding-bottom: 100px;
	}
	#viewer h2 {
		color: white;
		font-size: 40px;
		/* margin-top: 50px; */
		margin-bottom: 30px;
		line-height: 40px;
		}
		#viewer .content h2 {
			color: rgba(63, 158, 242, 1.0);
			font-size: 40px;
			/* margin-top: 50px; */
			margin-bottom: 30px;
			line-height: 40px;
			}


	#lava_app_header h1 {
		margin-bottom: 15px;
	}
	#lava_app_header h1 a {
		margin-left: 10px;
		color: rgba(63, 158, 242, 1.0);
	}
	#lava_app_header h1:hover {
		opacity: 0.8;
	}

	#lava_app_searchAndUser {
		position: absolute;
		position: fixed;
		top: 0px;
		width: 100%;
		width: calc(100% - 246px);
		height: 60px;
		margin-left: 246px;
		z-index: 90;
		background: var(--lava-app-chrome-background);
		box-shadow: 0px 0px 10px rgba(0,0,0,0.2);
		}
	#lava_app_searchAndUser form#lava_app_searchAndUser_search {
		margin-left: 15px;
	}
	#lava_app_searchAndUser input {
		width: 100%;
		border: 0px;
		border-bottom: 2px solid rgba(0,0,0,0);
		border-radius: 3px;
		box-shadow: none;
		margin-top:10px;
		margin-bottom:8px;
		}
		body.dark #lava_app_searchAndUser input {
			/* border-bottom: 2px solid rgba(0,0,0,1); */
			background: none !important;
		}
	#lava_app_searchAndUser input::placeholder {
		color: rgba(0,0,0,0.4);
	}
		body.dark #lava_app_searchAndUser input::placeholder {
			color: rgba(255, 255, 255, 0.4);
		}
	#lava_app_searchAndUser input:focus {
		/* background: rgba(0,0,0,0.05); */
		/* border-color: rgba(63, 158, 242, 1.0); */
		border-bottom-left-radius: 0px;
		border-bottom-right-radius: 0px;
	}
	#lava_app_searchAndUser #lavaControl {
		display: flex;
		align-items: center;
		justify-content: flex-end;
}
	#lava_app_searchAndUser #lavaControl > div {
		/* display: inline-block; */
		/* height: 0px; */
		padding: 0px 8px 0px 8px;
		height: 60px;
		position: relative;
		/* background: red; */
		/* top: -10px; */
		/* border-left: 1px solid rgba(0,0,0,0.1); */
		border-left: 1px solid var(--lava-app-chrome-separator);
		color: var(--lava-app-chrome-foreground-main);
	}
	#lava_app_searchAndUser #lavaControl > div:hover {
		background-color: var(--lava-app-chrome-background-hover);
		cursor: pointer;
		}
		#lava_app_searchAndUser #lavaControl > div.warning {
			background-color: var(--lava-app-chrome-background-warning);
			cursor: pointer;
			}
			#lava_app_searchAndUser #lavaControl > div.warning:hover {
				background-color: var(--lava-app-chrome-background-warning-hover);
			}
	#lava_app_searchAndUser #lavaControl .lavaGlobalSelector {
		max-width: 300px;
		min-width: 150px;
		text-overflow: ellipsis;
	}
	#lava_app_searchAndUser #lavaControl > div + div {
		border-left: 1px solid var(--lava-app-chrome-separator);
	}
	#lava_app_searchAndUser #lavaControl {
		height: 60px;

		/* justify-content: flex-end; */
		}
		#lava_app_searchAndUser #lavaControl .title {
			font-size: 13px;
			font-weight: 600;
			text-transform: uppercase;
			display: block;
			color: var(--lava-app-chrome-foreground-secondary);
			margin-top: 5px;
			}
		#lava_app_searchAndUser #lavaControl .filterDescription {
			text-overflow: ellipsis;
			overflow:hidden;
			white-space: nowrap;
			display: inline-block;
			max-width: 100%;
		}
		#lava_app_searchAndUser #lavaControl .sep {
			color: var(--lava-app-chrome-foreground-secondary);
			position: relative;
			top: 1px;
			}
	#lava_app_searchAndUser #lavaControl #userControl {
		display: flex;
		align-items: center;
		}
		#lava_app_searchAndUser #lavaControl #userControl #userAvatar {
			height: 40px;
			width: 40px;
			border-radius: 100%;
			display: inline-block;
			background-size: contain;
			position: relative;
			/* top: 10px; */
			margin-left: 10px;
		}
		#lava_app_searchAndUser #lavaControl #userControl .greeting {
			display: inline-block;
			width: auto;
		}


	#music_artists_sidebar {
		/* display: none; */
	}
	.sidebar.admin, body.dark .sidebar.admin {
		background-color: rgba(255,255, 0, 0.6);
		border: 1px solid rgba(255,255, 0, 0.8);
	}
	.sidebar.admin h3, body.dark .sidebar.admin h3 {
		color: rgba(255,255, 0, 1);
		color: rgba(133, 133, 0, 1);
	}

#lavaStatus {
	margin-left: 250px;
	width: calc(100% - 250px - 0.9375rem - 0.9375rem);
}

#lava_app_player {
	position: fixed;
	bottom: 0px;
	left: 0px;
	width: 250px;
	height: auto;
	margin-bottom: 0px;
	padding: 20px 15px 15px 15px;
	color: rgba(0,0,0,1);
	/* border-top: 1px solid rgba(0,0,0,0.2); */
}
#lava_app_player::before {
 content: '';
 position: absolute;
 /* background-color: rgba(0,0,0,0.15); */
 background-color: var(--lava-app-chrome-separator);
 width: 90%;
 margin-left: 5%;
 height: 1px;
 top: 0px;
 left: 0px;
}
#lava_app_player #artwork {
	height: 130px;
	width: 130px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 15px;
	/* border: 1px solid rgba(0,0,0,0.1); */
	border: 1px solid var(--lava-app-chrome-albumArtworkBorder);
	border-radius: 3px;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
}
#lava_app_player #artwork.defaultArtwork {
	background-image: url('/img/global/musical-note-blue-dashed.svg');
	background-size: 80%;
}
#lava_app_player .plyr__controls__item.plyr__progress__container {
	display: none;
}
#lava_app_footer {
	position: fixed;
	bottom: 0px;
	left: 0px;
	width: 250px;
	margin-bottom: 0px;
	padding: 20px 15px 15px 15px;
	color: rgba(0,0,0,0.5);
	}
	#lava_app_footer div {
		color: rgba(0,0,0,0.5);
	}
	#lava_app_footer a {
		color: rgba(0,0,0,0.5);
		}


.lava_stations .ui_contentToolbar {
	width: calc(100% - 10px);
}
.environmentDebugInfo {
	position: fixed;
	bottom: 0px;
	right: 0px;
	left: 0px;
	width: 100%;
	text-align: center;
	font-size: 12px;
	z-index: 9999;
	background-color: rgba(255,255,255,0.2);
	}
	.environmentDebugInfo a {
		color: rgba(0,0,0,1);
	}

.text-empty {
	font-size: 13px;
	font-style: italic;
	color: var(--lava-app-text-empty);
}
.hidden {
	display: none;
}

.ui_lava_globalFilters_options {
	/* list-style: none;
	margin: 0px;
	padding: 0px; */
	margin: 15px;
	}
	.ui_lava_globalFilters_options .ui_lava_globalFilters_options-option {
		background: var(--lava-app-element-background);
		display: inline-block;
		min-height: 80px;
		text-align: center;
		margin-bottom: 15px;

		display: flex;
		align-items: center;
		justify-content: center;
		flex-wrap: wrap;
		border: 3px solid transparent;
		border-radius: 3px;
		}
		.ui_lava_globalFilters_options .ui_lava_globalFilters_options-option>div {
			flex-basis: 100%;
		}
		.ui_lava_globalFilters_options .ui_lava_globalFilters_options-option.active {
			border-color: var(--lava-app-chrome-options-active);
			background-color: var(--lava-app-chrome-options-hover);
			color: var(--lava-app-chrome-options-active-text);
		}
		.ui_lava_globalFilters_options .ui_lava_globalFilters_options-option:hover {
			border-color: var(--lava-app-chrome-options-hover);
			color: var(--lava-app-chrome-options-active-text);
			cursor: pointer;
		}
		.ui_lava_globalFilters_options .ui_lava_globalFilters_options-option span.name {
			display: block;
			font-size: 13px;
			font-weight: 400;
			color: var(--lava-app-chrome-foreground-secondary);
		}
		.ui_lava_globalFilters_options .ui_lava_globalFilters_options-option span.filterDescription {
			display: block;
			font-size: 16px;
			color: var(--lava-app-chrome-foreground-main);
		}
		.ui_lava_globalFilters_options .ui_lava_globalFilters_options-option.active span.filterDescription {
			display: block;
			font-size: 16px;
			color: var(--lava-app-chrome-options-active-text);
		}


/******
 COMPONENTS
******/

/* ui_nav_side */
.ui_nav_side {
	list-style: none;
	margin: 0px;
	padding: 0px;
	}
	.ui_nav_side li {

		}
		.ui_nav_side li + li {
			border-top: 1px solid var(--lava-app-chrome-separator);
		}
		.ui_nav_side a {
			padding: 5px;
			display: block;
			}
			.ui_nav_side li a:hover {
				color: var(--lava-app-chrome-options-hover);
			}
			body.dark .ui_nav_side li a:hover {
				background: rgba(255,255,255,0.05);
			}
			.ui_nav_side li.active a,
			.ui_nav_side li a.active {
				/* background: rgba(23, 121, 186, 1.0); */
				background: #148399;
				color: white;
				border-radius: 3px;
			}
		.ui_nav_side icon {
			margin-right: 5px;
			position: relative;
			top: 3px;
		}
	.ui_nav_side--icons-on-right li a icon {
		float: right;
	}


/*tables*/
table {
	background: none !important;
}
table tbody tr:nth-child(odd) {
	background: var(--lava-app-chrome-background-secondary);
}
table tbody tr:nth-child(even) {
	background: var(--lava-app-chrome-background-secondary-zebra);
}

.lava_stations .lava_station {
	background: var(--lava-app-chrome-background-secondary);
}
.lava_stations .lava_staion * {
	color: var(--lava-app-chrome-foreground-main);
}

/* ui_socialLinks */
.ui_linkPanelTiles {
	width: 100%;
	}
		.ui_linkPanelTiles a {
			text-align: center;
			background: var(--lava-app-chrome-background-secondary);
			display: inline-block;
			width: calc((100% - 10px) / 4);
			padding-top: 10px;
			padding-bottom: 5px;
			border-radius: 2px;
			margin-bottom: 3px;
		}
		.ui_linkPanelTiles a:hover {
			background: var(--lava-app-chrome-background-hover);
		}

/* artists */
.artistName .phonetic {
	font-style: italic;
	display: block;
	font-size: 15px;
	font-weight: 300;
}


/*modal form*/
form.modalForm {
	position: relative;
	height: 100%;
}
form.modalForm .formcontrol--bottom {
	position: absolute;
	bottom: 0px;
	width: 100%;
	border-top: 1px solid var(--lava-app-chrome-separator);
	padding-top: 8px;
	padding-bottom: 8px;
	background: var(--lava-app-chrome-background-secondary);
}