/*@import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap');*/
/*  THIS PART APPLIES TO ALL BROWSERS 

In IE, in order for an element to have height:100%;, all parent elements must have height:100%;. Any break in the "chain" will cause IE to ignore everything.

setting the following with take care IE browsers and won't affect the others:*/
html, body {
	/* whatever the height of the screen is (i.e. cell phone, 37" screen, etc)*/
	height:100%;  
	/* 0 is for top-bottom and auto for left-right. It means that left and right margin will take auto margin according
	to the width of the element and the width of the container. Generally if you want to put any element at center
	position then margin:auto works perfectly
	*/
	margin: 0 auto;
  	padding: 0;
}
/*-------------------------------*/

input[type=range] {
  width: 100%;
  /*margin: 5.5px 0;*/
  background-color: transparent;
  -webkit-appearance: none;
}
input[type=range]:focus {
  outline: none;
}
/* END OF THIS PART . . . .*/
/* -----------------------------------------------------------------
This gives us invisible or unstyled range inputs in all browsers. Now we can apply our custom styles.
*/
input[type=range] {
  -webkit-appearance: none; /* Hides the slider so that custom slider can be made */
  width: 100%;              /* Specific width is required for Firefox. */
  background: transparent;  /* Otherwise white in Chrome */
}
/* ++++++++++++++ Chrome (Webkit / Blink stuff ++++++++++++++++++++++++ */
input[type=range]:focus {
  outline: none; /* Removes the blue border.*/
}
/*-----------------CHROME / EDGE / BLINK BROWSERS Style of the slider track ------------------------------*/
input[type=range]::-webkit-slider-runnable-track {
  width: 105px; 
  height: 3px;
  cursor: pointer;
  /*box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;*/
  background: #993333;
  border-radius: 3px;
  border: 0px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  	background: #993333;
    cursor: pointer;
    /*max-height: 5px;*/
  	height: 3px;
    border-radius: 3px;
}
input[type=range]::-webkit-slider-thumb {
	-webkit-appearance: none;
	border: 0px solid black;
	margin-left: 0px;
	height: 11px;
	width: 10px;
	border: 0;
	border-radius: 3px;
	background: #ccff00;
	/*background: -webkit-linear-gradient(45deg,  rgb(213, 213, 213), rgb(193, 255, 6));*/
	cursor: pointer;
	margin-top: -5px; /* You need to specify a margin in Chrome. In Firefox and IE it is automatic */
	box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; /* Add cool effects to your sliders! */
}
/* +++++++++++++++++++++++++++ Firefox stuff +++++++++++++++++++++++++++++++++++++++++*/
input[type=range]::-moz-range-track {
  width: 85px;
  height: 3px;
  cursor: pointer;
  /*box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;*/
  background: #993333;
  border-radius: 3px;
  border: 0px solid #010101;
}
input[type=range]::-moz-range-thumb {
  height: 11px;
  width: 10px;
  border-radius: 3px;
  background: #ccff00;
  cursor: pointer;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  border: 0px solid #000000;
}
/*-----------------MICROSOFT IE BROWSERS;Style of the slider track ------------------------------*/
input[type=range]::-ms-track {
  background: #993333;
  border-color: transparent;
  /*border-width: 6.5px 0;*/
  color: transparent;
  width: 105px; 
  height: 4px;
  cursor: pointer;

  /*box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;*/
  border-radius: 3px;
  border: 0px;
}
input[type=range]::-ms-thumb {
  /*box-shadow: 1px 1px 2px #A6A6A6;*/
  height: 11px;
  width: 10px;
  border-radius: 4px;
  background: #ccff00;
  border: 1px solid green;
  outline: none;
  cursor: pointer;
  /*Needed to keep the Edge thumb centred*/
}

input[type=range]:focus::-ms-fill-lower {
  background: #993333;
}
input[type=range]:focus::-ms-fill-upper {
  background: #993333;
}
/* IE needs track colors defined for both before and after the thumb passes. Don't want it, so all set to #ff6600 */
input[type="range"]::-ms-fill-upper {background-image: linear-gradient(to right, #993333, #993333);}
input[type="range"]::-ms-fill-lower {background-image: linear-gradient(to right, #993333, #993333);}

/* IE has it's own special default track w/tick marks that need to be hidden */
input[type="range"]::-ms-track {
    border: none;
    color: transparent;
}
/*=====================  USED IN INDEX.PHP - MAIN PAGE   ===================================*/
#audioContainer{
	width: 140px;
	height: 30px;
	display: -ms-flexbox;
    display: -webkit-flex;
	display: flex; /* standard - Good for firfox */
	/*align-items:center;*/
	-webkit-border-radius: 15px;
	-ms-border-radius: 15px;
	-moz-border-radius: 15px; 
	border-radius: 15px;
	border: px solid red;
}
	#VolumeBar {
		width: 85px;
		height: 14px;
		padding: 0;   /* Fucking IE 11 adds extra padding to INPUT TYPE= RANGE, which other browsers don't.  clear it */
		padding-left: 8px;
		/*margin: auto;*/
		margin-top: 10px; /* to position IE correctly - then make adjustments for other browsers */
		flex: 0 0 auto;
		border: px solid white;
    	outline: none;  /* remove blue shade of the bar when clicked on/selected */
	}
	#volIcon {
		flex: 0 0 auto;
		padding-top: 5px;
		padding-left: 1px;
		height: 14px;
		width: 14px;
		/*filter: invert(1);*/
		cursor: pointer;
		font-size: 20px;
		z-index: 4;
		border: 0px solid Blue;
	}
/*=====================  USED IN MUSIC PAGES   ===================================*/
.ctlBox_Parent {
	display: -ms-flexbox;
    display: -webkit-flex;
	display: flex;
	margin-left: 45px;
	width: 300px;
	height: 30px;
	margin-top: 67px;
	transform: translate(0, -.5%);
	padding-left: 2px;
	border-style: solid;
	border-width: 1px;
	border-color: #ff6600;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px; 
	border-radius: 15px;
	-webkit-box-shadow: 0px 5px 20px rgba(0,0,0,0.50);
	-moz-box-shadow: 0px 5px 20px rgba(0,0,0,0.50);
	khtml-box-shadow: 0px 5px 20px rgba(0,0,0,0.50);
	box-shadow: 0px 5px 20px rgba(0,0,0,0.50);	

	/* Because cafe uses translucent background the box-shadow in IE 7-8 is rendered black, and is not implemented */
	behavior: url(../jstools/PIE-CSS3-IE7-IE8/PIE.htc);  /* PIE-CSS3 implements round corners for IE7-8 */	
}
/* container for play, pause, previous track, next track, and progress bar  */
#ctlbuttons {
	height: 30px;
	width: 27%;

	/* flex: 1 1 auto;
	sizes the item based on its width/height properties, but makes it fully flexible  
	so that they absorb any extra space along the main axis. 
	flex: 0 0 auto. It sizes the item according to its width/height properties, but makes it fully inflexible
	*/
	flex: 1 1 auto; 
	border: 0px solid blue;
}
	/* style for next and previous song images */
	#next-song, #previous-song, #play-pause {
		flex: 0 0 auto;
		padding-left: 10px;
		padding-top: 9px;
		height: 14px;
		width: 14px;
		/*filter: invert(1);*/
		cursor: pointer;
		font-size: 20px;
		z-index: 4;
		border: 0px solid Blue;
	}
#parentTimeBar{
	/* A flex box is a container in which the childern will appear in row by default(what we want). 
	   flex-direction: column; 	   will change that direction
	*/
	display: -ms-flexbox;
    display: -webkit-flex;
	display: flex; /* standard */
	width: 69%;
	height: 30px;
	vertical-align: center;
	border: 0px solid green;
}
	.currentTime, .durationTime{
		flex: 1 1 auto; 
		margin: auto;
		text-align: center;  /* this + height & line-hight together cause the text to be centered vertically */
		height: 13px;      
		line-height: 13px;
		padding-left: 5px;
		width: 20px;
		cursor: pointer;
		z-index: 4;
		/*font-family: 'Montserrat', sans-serif;*/
		font-size: 16px;
		font-weight: bolder;
		color: #993333;
		border: 0px solid blue;
	}
	#progress-bar {      
		flex: 1 1 auto;
		padding-left: 5px;
		padding: 0;   /* Fucking IE 11 adds extra padding to INPUT TYPE= RANGE, which other browsers don't.  clear it */
		margin: auto;
		text-align: center;  /* this + height & line-hight together cause the text to be centered vertically */
		height: 13px;
		width: 85px;
		line-height: 13px;
		border: 0px solid red;
	}
#thumbnail {
    width: 150px;
	height: 150px;
    transition: 1s;
    z-index: 3;
	float: right;
}
/* Kill focus so you don't get stupid outlines on things */
::-moz-focus-inner {outline:0;}
:focus {outline:0;}