/*
  Name: main.css 2021
  Description: Simple layout for Fomantic UI Ampache web player - foam
*/

		body {
		 background-color: var(--colrbgd1);
		 color: var(--colrfnt1) !important;
		}

		p {
			font-family: 'Noto Sans SC', sans-serif;
			font-size: 1rem !important;
			color: var(--colrfnt1) !important;
		}

/** link styling **/
		a:link { color: var(--colrfnt1); text-decoration: none; }
		a:visited { color: var(--colrfnt1); text-decoration: none; }
		a:active { color: var(--colrfnt1); text-decoration: none; }
		a:hover { color: var(--colrfnt1); text-decoration: underline; }

		a.icn:hover { color: var(--colrfnt2); text-decoration: none; }

		.ui.vertical.menu .item > i.icon.left {
		    float: none;
		    margin: 0em 0.35714286em 0em 0em;
				font-size: 1rem !important;
		}

/** form elements styling **/
		.ui.input input {
			background-color: var(--colrbgd1) !important;
			color: var(--colrfnt2) !important;
		}

		.ui.input input:focus {
			color: var(--colrfnt2) !important;
			border: 2px  solid var(--colrhilt) !important;
			font-weight: bold !important;
		}

		.ui.button {
			background-color: var(--colrbgd1) !important;
			color: var(--colrfnt1) !important;
		}

		.ui.button:hover {
			background-color: var(--colrbgd1) !important;
			color: var(--colrfnt2) !important;
		}

		.ui.button:hover .icon {
			color: var(--colrfnt2) !important;
		}

		.ui.form .field>label {
			color: var(--colrfnt1) !important;
		}

		.ui.checkbox label, .ui.checkbox+label {
			color: var(--colrfnt1) !important;
		}

/** icons & labels styling **/
		.ui.label.filter {
			background-color: var(--colrbgd1) !important;
			color: var(--colrfnt2) !important;
		}

		.icon {
			color: var(--colrfnt1);
		}

		.icon:hover {
		  	color: var(--colrfnt2) !important;
		}

  	.icon.blue.star {
			  color: var(--colrhilt) !important;
			}

		.feature.icon:hover {
		  	color: var(--colrfnt1) !important;
		}

		.bordered.icon {
		  	-webkit-box-shadow: 0 0 0 0.1em rgba(165, 165, 165, 0.1) inset !important;
          box-shadow: 0 0 0 0.1em rgba(165, 165, 165, 0.1) inset !important;
		}

		.ui.slider .inner .track {
	  	background-color: DimGrey !important;
		}

		.ui.slider .inner .track-fill {
	  	background-color: var(--colrhilt) !important;
		}

		.toggle-down {
			transform: rotate(0deg);
	    transition: all 0.25s linear;
		}

		.toggle-up {
	    transform: rotate(180deg);
	    transition: all 0.25s linear;
		}

		.icon.hidden {
			opacity:0 !important;
		}

		.queue-row .hidden {
			opacity: 0 !important;
		}

		.queue-row:hover .hidden {
			opacity: 1 !important;
		}

		.albm-row .hidden {
			opacity: 0 !important;
		}

		.albm-row:hover .hidden {
			opacity: 1 !important;
		}

		.draggable {
			cursor: move;
			user-select: none;
		}

		.placeholder {
			border: 2px dashed var(--colrfnt1);
		}

/******************************************
  Add Custom Colours to Semantic Components
*******************************************/
		 .ui.header.smoke { color: var(--colrfnt2); }
		 .ui.header.space { color: var(--colrhilt); }
		 .ui.icon.space { color: var(--colrfgd1); }
		 .ui.icon.header { color: var(--colrfnt1); }

		 .ui.header.smoke .icon {
			 color: var(--colrfnt2);
		 }

		 .ui.header.dim {
			 color: var(--colrfnt1) !important;
			 margin: 1em 2em 0em 3em !important;
		 }


/** Main top menu styling **/
     .ui.inverted.top.menu {
       background-color: var(--colrfgd1) !important;
       color: var(--colrfnt1);
     }

		 .slider.item {
			 display: inline-block;
			 width: 10%;
			 padding-top: 1.4em;
		 }

/** Main side menu styling **/
		.sidemenu.column {
		 background-color: var(--colrfgd1);
		 margin: 0em 0em 0em 0em;
		}

     .ui.inverted.side.menu {
       background-color: var(--colrfgd1) !important;
			 color: var(--colrfnt1) !important;
			 margin: 8em 0em 0em 2em;
     }

		 .ui.menu .active.item {
			 background-color: var(--colrbgd1) !important;
		 }

		 .ui.menu .item {
			 color: var(--colrfnt1) !important;
		 }

		 .ui.menu .item:hover {
			 color: var(--colrfnt2) !important;
		 }

		 .ui.menu .item:hover .icon {
			 color: var(--colrfnt2) !important;
		 }

		 .ui.menu .ui.dropdown .menu>.item {
			 color: var(--colrfnt1) !important;
		 }

		 .ui.menu .ui.dropdown .menu>.item.active {
			 color: var(--colrhilt) !important;
		 }

		 .ui.menu .ui.dropdown .menu>.item:hover {
			 color: var(--colrfnt2) !important;
		 }

		 .ui.menu .ui.dropdown .menu>.item .icon {
			 color: var(--colrfnt1) !important;
		 }

		 .ui.menu .ui.dropdown .menu>.item:hover .icon {
			 color: var(--colrfnt2) !important;
		 }

/** Drop Down menu styling **/
		 .ui.dropdown .menu {
			 background-color: var(--colrbgd1) !important;
			 color: var(--colrfnt1) !important;
		 }

		 .ui.dropdown .menu>.item {
			 color: var(--colrfnt1) !important;
		 }

		 .ui.dropdown .menu>.item:hover {
			 color: var(--colrfnt2) !important;
		 }

/** Main table styling **/
		 .ui.compact.table {
			 color: var(--colrfnt1) !important;
			 margin: 1em 2em 0em 3em !important;
		 }

		 .ui.inverted.table {
			 color: var(--colrfnt1) !important;
			 background-color: var(--colrfgd1) !important;
		 }

		 tr.albm-row:hover {
			 color: var(--colrfnt2) !important;
		 }

/** Page segments styling **/
     .ui.inverted.spacecadet.segment {
       background-color: var(--colrfgd1) !important;
       color: var(--colrfnt1) !important;
			 padding: 3em 1em 3em 1em !important;
			 margin: 25em 2em 2em 2em !important;
			 font-size: 1.15rem !important;
     }

     .ui.inverted.manatee.segment {
       background-color: var(--colrbgd1) !important;
       color: var(--colrfnt2) !important;
			 margin-top: 6em !important;
     }

     .ui.inverted.space.segment {
       background-color: var(--colrfgd1) !important;
       color: var(--colrfnt1) !important;
			 padding: 3em 4em 3em 4em !important;
			 margin: 1em !important;
			 font-size: 1rem !important;
     }

     .ui.inverted.playlist.segment {
       background-color: var(--colrfgd1) !important;
       color: var(--colrfnt1) !important;
			 padding: 3em 4em 3em 4em !important;
			 margin: 0em !important;
			 font-size: 1rem !important;
     }