.header {
  overflow: hidden;
  /* background-color: #0A8BF1; */
  padding: 20px 0px;
  color: #333;
  width: 100%;
  margin: 0px;
  font-size: 20px;
}
/*.header span:not(#headerDate){
	float: right;
	padding-right: 5%;
}*/
body{
	background-color: #F9F9F9;
}
html, body {
  padding: 0;
  margin: 0;
  overflow: hidden;
 }

.container{
	width: 100%;
/*	padding: 0px;*/
}
audio{
	display: none;
}
.audioControl{
	width: 35px;
	/*padding: 8px 15px;*/
	padding: 15px 0px;
	cursor: pointer;
}
.closeTab{
	cursor: pointer;
}
.progressBar{
	border: 1px solid #000;
	padding: 10px 15px;
	vertical-align: middle;
	width: 100%;
}
.list-group-item.active, .list-group-item.active:focus, .list-group-item.active:hover{
	background-color :#E2E2E2;
	border-color :#E2E2E2;
	color:#333;
	z-index:2;
}
.red{
	color: #8E5258;
}
.blue{
	color: #1999FF;
}

li span{
	font-weight: 600;
}


/*5898c6*/


.audio-progress {
  height: .5rem;
  width: 100%;
  background-color: #E2E2E2;
}
.audio-progress .bar {
  height: 100%;
  background-color: #5898c6;
}

#audio-progress-handle {
  display: block;
  position:absolute;
  z-index: 1;
  margin-top: -15px;
  /*margin-left: -15px;*/
  width: 10px;
  height: 34px;
  /*border: 4px solid #D3D5DF;
  border-top-color: #D3D5DF;
  border-right-color: #D3D5DF;*/
  /*transform: rotate(45deg);*/
  /*border-radius: 100%;*/
  background-color: #0071EB;
  /*box-shadow: 0 1px 6px rgba(0, 0, 0, .2);*/
  cursor:pointer;
  background-repeat: no-repeat;
  background-image: url("../images/slider.png");
}

.draggable {
  float: left; margin: 0 10px 10px 30px;
}

#progressMainDiv > div{
	padding: 20px 0px;
}

/*.customRow{
	width: 100%;
	display: flex;
	align-items: center;
}*/

.playerStatus,.totalDuration,.remainingDuration{
	width: 10%;
}

#remainingDuration{
	text-align: right;
}

#progressMainDiv{
	width: 70%;
}


/***************************************************************Default Styling Start*********************************************************************/
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 */
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
}

input[type=range]:focus {
  outline: none; /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */
}

input[type=range]::-ms-track {
  width: 100%;
  cursor: pointer;

  /* Hides the slider so custom styles can be added */
  background: transparent; 
  border-color: transparent;
  color: transparent;
}

/***************************************************************Default Styling Start*********************************************************************/


/***************************************************************Thumb Css Start*********************************************************************/
/* Special styling for WebKit/Blink */
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  /*border: 1px solid #000000;*/
  height: 30px;
  width: 10px;
  border-radius: 3px;
  background: #1999FF;
  cursor: pointer;
  margin-top: -14px; /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
  /*box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d; /* Add cool effects to your sliders! */
}

/* All the same stuff for Firefox */
input[type=range]::-moz-range-thumb {
  /*box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;*/
  /*border: 1px solid #000000;*/
  height: 30px;
  width: 10px;
  border-radius: 3px;
  background: #0071EB;
  cursor: pointer;
}

/* All the same stuff for IE */
input[type=range]::-ms-thumb {
  /*box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;*/
  /*border: 1px solid #000000;*/
  height: 30px;
  width: 10px;
  border-radius: 3px;
  background: #0071EB;
  cursor: pointer;
}


/*****************************************************************Thumb Css End****************************************************************************/


input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 5px;
  cursor: pointer;
  /*box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;*/
  background: #E2E2E2;
  /*border-radius: 1.3px;
  border: 0.2px solid #010101;*/
}

input[type=range]:focus::-webkit-slider-runnable-track {
  background: #E2E2E2;
}

input[type=range]::-moz-range-track {
 /* width: 100%;
  height: 8.4px;
  cursor: pointer;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;*/
  background: #E2E2E2;
  /*border-radius: 1.3px;
  border: 0.2px solid #010101;*/
}
input[type="range"]::-moz-range-progress {
  background-color: #0071EB; 
}
input[type=range]::-ms-track {
  /*width: 100%;
  height: 8.4px;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  border-width: 16px 0;
  color: transparent;*/
}
input[type=range]::-ms-fill-lower {
  background: #000;
  border: 0.2px solid #000;
  border-radius: 2.6px;
  box-shadow: 1px 1px 1px #000, 0px 0px 1px #000;
}
input[type=range]:focus::-ms-fill-lower {
  background: #000;
}
input[type=range]::-ms-fill-upper {
  background: #000;
  border: 0.2px solid #000;
  border-radius: 2.6px;
  box-shadow: 1px 1px 1px #000, 0px 0px 1px #000;
}
input[type=range]:focus::-ms-fill-upper {
  background: #367ebd;
}
@media (min-width: 800px) {
	.playerStatus,.totalDuration,.remainingDuration{
		width: 5%;
	}  
	#progressMainDiv{
		width: 85%;
	}
}


/***********************************Custom Css Start***************************************************/

.rowAd{
	width: 100%;
	padding: 15px 6%;
}
.header.rowAd{
	padding-top: 15px;
	padding-bottom: 15px;
}

.leftHeaderSide{
	width: 91.6667%;
	float:left;
}
.leftHeaderSideAd{
  width: 13.969%;
  float:left;
  cursor: pointer;
  line-height: 50px;
  min-width: 120px;
}
.middleSide{
  width: 86.031%;
  float: left;
  line-height: 50px;
  text-align: center;
  display: none;
}
.rightHeaderSide{
	width: 8.33333%;
	float: right;
  line-height: 50px;
}
.header .rightHeaderSide{
  display: none;
}

.customRow{
	width: 100%;
	display: flex;
	align-items: center;
	padding: 0px 6%;
  /*margin: 0 -15px;*/
}

.audioControlDiv,.totalDurationDiv,.remainingDurationDiv{
	width: 5%;
}
.myRangeDiv{
	width: 85%;
}
.list-group-item{
	background-color:#f9f9f9;
	border: none;
	cursor: pointer;
}
.list-group-item.customRow{
	border-top: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
	padding: 10px 6%;
  /*margin-left: 11px;*/
}
.list-group{
	width: 100%;
	overflow-y: auto;
	margin-bottom: 0;
}

.rightBtnDiv{
  float: none;
  line-height: 50px;
}

@media  (min-width: 1210px) {
  .rightBtnDiv{
    float: right;
  }
}

@media (max-width: 1280px) and (min-width: 800px) {
	.audioControlDiv,.totalDurationDiv,.remainingDurationDiv{
		width: 10%;
	}
	.myRangeDiv{
		width: 70%;
	}
  .middleSide{
    font-size: 15px;
  }
}

@media (max-width: 800px) and (min-width: 768px) {
	.audioControlDiv,.totalDurationDiv,.remainingDurationDiv{
		width: 10%;
	}
	.myRangeDiv{
		width: 70%;
	}
  .middleSide{
    font-size: 13px;
  }

  /*.rightBtnDiv{
    float: none !important;
  }*/
  /*.middleSide{
    width: 69%;
  }*/
}

@media (max-width: 768px) and (min-width: 360px) {
	.audioControlDiv,.totalDurationDiv,.remainingDurationDiv{
		width: 22%;
	}
	.myRangeDiv{
		width: 34%;
	}
	.smallSizeListRight{
		width: 9%;
	}
	.smallSizeListLeft{
		width: 91%;
	}
  .leftHeaderSideAd > img{
    width: 120px;
  }
  .leftHeaderSideAd{
    width: 120px;
  }
  /*.middleSide{
    width: 44%;
  }
  .middleSide > .text-center{
    display: none;
  }*/
  /*.rightBtnDiv{
    float: none !important;
  }*/
  .rightBtnDiv > .btn{
    font-size:13px;
  }
}

@media (max-width: 360px) and (min-width: 320px) {
	.audioControlDiv,.totalDurationDiv,.remainingDurationDiv{
		width: 22%;
	}
	.myRangeDiv{
		width: 34%;
	}
	.smallSizeListRight{
		width: 14%;
	}
	.smallSizeListLeft{
		width: 86%;
	}
  .leftHeaderSideAd > img{
    width: 100px;
  }
  .leftHeaderSideAd{
    width: 100px;
  }
  /*.middleSide{
    width: 39%;
  }
  .middleSide > .text-center{
    display: none;
  }*/
  /*.rightBtnDiv{
    float: none !important;
  }*/
  .rightBtnDiv > .btn{
    font-size:13px;
  }
}


#load{
    width:100%;
    height:100%;
    position:absolute;
    z-index:9999;
    background-color: rgba(0,0,0,0.25);
    display: flex;
    align-items: center;
    justify-content: center; 
    /*text-align: center;*/
    /*text-align: center;
    vertical-align: middle;*/
    /*background:url("../images/Spinner-1s-100px.svg") no-repeat center center rgba(0,0,0,0.25);
    background-size: auto;*/
}

#load img{
  border-radius: 5px;
}


/***********************************Custom Css End***************************************************/


/*#mainData {-moz-appearance: menuimage;}*/

#mainData::-webkit-scrollbar {
  display: none;
  background:transparent;
  /*
  -ms-overflow-style: none;
  overflow:-moz-scrollbars-none;
  width: 0 !important;
  -moz-appearance: menuimage;*/
}
/*#mainData{
  
  overflow-y: scroll;
}*/

.error{
  color:#d9534f;
}
.form-group{
  margin:0px !important;
}
.rowAdHeader{
  padding:15px 5.5%;
  width: 100%;
  box-shadow: 0px 0px 23px -3px rgba(0,0,0,0.5);
}
.rowAdHeader > .leftHeaderSide{
  text-align: center;
}
.rowAdHeader > .leftHeaderSide img{
  float: left;
}
.btn-round-lg,.btn-round-lg:hover,.btn-round-lg:active,.btn-round-lg:focus{
  border-radius: 17px;
  color: #FFFFFF;
  font-weight: bold;
  /*float: right;*/
  background-color: #1999FF;
}