/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575px) {
	html {
		font-size: 0.6rem;
	}
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) and (max-width: 767px) {
	html {
		font-size: 0.6rem;
	}
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991px) {
	html {
		font-size: 0.8rem;
	}
	
	.source-card {
        max-width: 12rem;
    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) and (max-width: 1199px) {
	.source-card {
        max-width: 14rem;
    }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
	.source-card {
        max-width: 16rem;
    }
}

/* GLOBAL */

html, body {
	counter-reset: header;
	opacity: 0;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
    -moz-user-select: -moz-none;
    -ms-user-select: none;
    user-select: none;
	margin: 0;
	padding: 0;
	height: 100%;
	color: white;
	background-color: rgb(30, 89, 106);
}

p {
    font-size: 1rem;
}

.btn:hover {
	color: black;
	text-decoration: none;
}

.animate-top-to-bottom {
  position: relative;
  -webkit-animation-name: animatebottom;
  -webkit-animation-duration: 1s;
  animation-name: animatebottom;
  animation-duration: 1s;
}
.animate-top-to-bottom-fast {
  position: relative;
  -webkit-animation-name: animatebottom;
  -webkit-animation-duration: 500ms;
  animation-name: animatebottom;
  animation-duration: 500ms;
}
@-webkit-keyframes animatebottom {
  from { top:-100vh; opacity:0 } 
  to { top:0; opacity:1 }
}
@keyframes animatebottom { 
  from{ top:-100vh; opacity:0} 
  to{ top:0; opacity:1 }
}

.animate-bottom-to-top {
  position: relative;
  -webkit-animation-name: animatetop;
  -webkit-animation-duration: 1s;
  animation-name: animatetop;
  animation-duration: 1s;
}
.animate-bottom-to-top-fast {
  position: relative;
  -webkit-animation-name: animatetop;
  -webkit-animation-duration: 500ms;
  animation-name: animatetop;
  animation-duration: 500ms;
}
@-webkit-keyframes animatetop {
  from { bottom:-100vh; opacity:0 } 
  to { bottom:0; opacity:1 }
}
@keyframes animatetop { 
  from{ bottom:-100vh; opacity:0} 
  to{ bottom:0; opacity:1 }
}

.animate-blink {
  animation: animateblink 1s linear infinite;
}

@keyframes animateblink {
  50% {
    background-color: white;
  }
}

.container-fluid {
	margin: 0;
	padding: 0;
}

img {
    width: 100%;
}

.col {
	margin: 0;
}

.row {
	margin: 0;
}

.form-row {
    margin: 0;
}

#loading_vue, #zones_display_vue,  #zones_configuration_vue, #zones_add_vue, #zone_control_vue, #zone_settings_vue, #speakers_selection_vue, #speaker_update_vue, #speaker_eq_vue, #speaker_settings_vue {
	min-height: 100vh;
}

.uiHeader {
	display: flex;
    flex-direction: row;
	align-items: center;
	background-color: rgb(11, 59, 75);
	position: fixed;
	top: 0;
	width: 100%;
	height: 15vh;
	z-index: 1;
}

.uiHeader .col {
	margin: auto;
}

.uiContent {
	display: flex;
	flex-direction: column;
	position: absolute;
	top: 15vh;
	bottom: 8vh;
	width: 100%;
	overflow: auto;
}

.uiFooter {
    display: flex;
	flex-direction: row;
	background-color: rgb(0, 124, 121);
	position: fixed;
	bottom: 0;
	width: 100%;
	height: 8vh;
	z-index: 1;
}

.uiFooter .row {
	margin: auto;
}

/* RECONNECTION SECTION */

#reconnection_vue {
	flex-direction: column;
    position: fixed; /* Stay in place */
    z-index: 2; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

#reconnection_vue .uiModalContent {
    display: flex;
	flex-direction: column;
    /*background-color: #fefefe;*/
    position: fixed; /* Stay in place */
    top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
    width: 30%;
    height: 30%;
    margin: auto;
    border-radius: 10px 10px 10px 10px;
}

/* LOADING SECTION */

#loading_vue {
	flex-direction: column;
    position: fixed; /* Stay in place */
    z-index: 2; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

#loading_vue .uiModalContent {
    display: flex;
	flex-direction: column;
    /*background-color: #fefefe;*/
    position: fixed; /* Stay in place */
    top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
    width: 30%;
    height: 30%;
    margin: auto;
    border-radius: 10px 10px 10px 10px;
}

/* ZONES DISPLAY SECTION */

#zoneDisplayContent .zone-name {
	background-color: rgb(65, 123, 135);
	border-radius: 10px;
	box-shadow: 5px 10px 18px #000000;
}

/* ZONES CONFIGURATION SECTION */

#zoneConfigurationContent .zone-name {
	color: black;
	background-color: rgb(255, 255, 255);
	border-radius: 10px 10px 0 0;
}

#zoneConfigurationContent .zone-draggable {
	min-height: 6rem;
}

#zoneConfigurationContent .card-body {
	color: black;
	font-size: small;
}

#zoneConfigurationContent .card-header-info-btn {
	position: absolute;
	top: 0;
	right: 0;
}

#zoneConfigurationContent .card-header-info {
	display: none;
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
}

#zoneConfigurationContent .icon-stereo-play {
	position: absolute;
	border: 1px solid #ddd;
	top: 0;
	left: 0;
    width: 20%;
}

#zoneConfigurationContent .speakers-card {
	min-width: 5rem;
	max-width: 12rem;
}

#zoneConfigurationContent .speakers-divider {
	border-right: solid;
}

/* ZONES ADD SECTION */
#zones_add_vue {
	flex-direction: column;
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

#zones_add_vue .uiModalContent {
    display: flex;
	flex-direction: column;
    background-color: #fefefe;
    position: fixed; /* Stay in place */
    bottom: 0;
    width: 100%;
    height: 8vh;
    margin: auto;
    border-radius: 10px 10px 0 0;
}

/* ZONE CONTROL SECTION */

#zone_control_vue .card-body {
	color: black;
	font-size: x-small;
}

#zone_control_vue .source-card {
	border: solid;
    box-shadow: 5px 10px 18px #000000;
}

#zone_control_vue .source-img {
	border: solid;
}

#zone_control_vue .source-card-selected {
	border-color: red;
    box-shadow: none;
}

#zone_control_vue .mute-button-img {
    width: 100%;
    max-width: 2rem;
}

#zone_control_vue #volume-minus {
	background-color: white;
	width: 3rem;
}

#zone_control_vue #volume-plus {
	background-color: white;
	width: 3rem;
}

#zone_control_vue #volume-range { 
    pointer-events: none; 
}

#zone_control_vue #volume-range::-webkit-slider-thumb { 
    pointer-events: auto; 
}

#zone_control_vue #volume-range::-moz-range-thumb { 
    pointer-events: auto; 
}

#zone_control_vue .mute-button {
	background-color: white;
}

#zone_control_vue .balance-button-left {
	background-color: white;
	width: 3rem;
}

#zone_control_vue .balance-button-right {
	background-color: white;
	width: 3rem;
}

#zone_control_vue .balance-button-center {
	background-color: white;
}

#zone_control_vue #balance-range { 
    pointer-events: none; 
}

#zone_control_vue #balance-range::-webkit-slider-thumb { 
    pointer-events: auto; 
}

#zone_control_vue #balance-range::-moz-range-thumb { 
    pointer-events: auto; 
}

/* ZONE SETTINGS SECTION */

/* SPEAKERS SELECTION SECTION */

#speakers_selection_vue {
	flex-direction: column;
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

#speakers_selection_vue .uiModalContent {
    display: flex;
	flex-direction: column;
    background-color: #fefefe;
    width: 100%;
    margin: auto;
    border-radius: 0 0 10px 10px;
}

/* SPEAKERS UPDATE SECTION */

#speaker_update_vue .messages
{
		display: none;
		width: 100%;
        padding: 0 10px;
        margin: 1em 0;
        border: 1px solid #999;
		border-radius: 5px;
		background: url("progress.png");
		background-repeat: no-repeat;
		background-size: 0% 100%;
}

/* SPEAKERS EQ SECTION */

#speaker_eq_vue .uiContent {
    background-color: rgba(0, 0, 0, 0.5);
}

#speaker_eq_vue .uiContent svg {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-height: 55vh; /* Full height */
}

#speaker_bands_vue {
	flex-direction: column;
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

#speaker_bands_vue .uiModalContent {
    display: flex;
	flex-direction: column;
    background-color: #fefefe;
    position: fixed; /* Stay in place */
    bottom: 50%;
    left: 10%;
	transform: translate(0%, 50%);
    width: 15%;
    height: auto;
    margin: auto;
    border-radius: 10px 10px 10px 10px;
}

/* SPEAKERS SETTINGS SECTION */

#speaker_settings_vue {
}

/* Boost slider */

div.slider {
    font-size: 16px;
    --mover-w: 7rem;
    --thumb-d: 1rem;
    --track-w: calc(var(--mover-w) + var(--thumb-d));
    --track-h: 6px;
    --ruler-u: calc((1/12)*var(--mover-w));
    --ruler-w: 2px;
    height: var(--track-w);
    margin-top: 1.5rem;
    display: grid;
    justify-content: center;
    align-items: center;
}

#boost {
    width: 100%;
    /* transform: rotate(270deg); */
}

.wrap {
    margin-left: 1rem;
    width: var(--track-w);
    transform: rotate(270deg);
    display: flex;
    flex-direction: row-reverse;
    position: relative;
}

.labels {
    position: absolute;
    top: -1.5rem;
    /* bottom: 0; */
}

span.label_span {
    position: absolute;
    left: calc(var(--i)*var(--ruler-u) + 0.5*var(--thumb-d));
    transform: translate(-50%) scale(.9) rotate(90deg);
    font-weight: 400;
    font-size: 14px;
	color: grey;
}

/* Plot */

.plot_legend {
    text-anchor: middle;
    font-size: 0.7rem;
    fill: rgb(255,255,255);
}

.graphline-disabled {
    fill: none;
    stroke-width: 1px;
    stroke-dasharray: 1, 1;
    shape-rendering: geometricPrecision;
}

.graph-path-sum {
    fill: none;
    stroke-width: 2px;
    stroke: #333333;
    shape-rendering: geometricPrecision;
}

.xgrid line,
.ygrid line {
    stroke: lightsteelblue;
    stroke-width: 1;
}

.grid path {
    stroke-width: 0;
}

.selection-circle {
    fill-opacity: 0.5;
    stroke-width: 0.8px;
    stroke: slategrey;
    transition: fill-opacity 0.2s ease, stroke-width 0.2s ease;
}

.selection-circle:hover {
    fill-opacity: 0.9;
    stroke-width: 1.5px;
}