/*Top Start*/
		.top{
			background: #08415c;
			color: white;
      border-left-width: 0px;
      border-right-width: 0px;
      border-radius: 0px;
      margin-bottom: 0px;
      border-bottom-width: 0px;
      padding-left: 10px;
	  	padding-top:4px;
	    padding-bottom:3px;
		}
    @media screen and (max-width: 500px) {
      .top{
        padding-left: 0px;
        padding-right: 6px;
  		}
      .logo-img{
        width: 56px;
      }
      .title-heading{ 
        font-size:19px;
      }
      .title-sub-heading{
        font-size:14px;
      }
    }

    @media only screen and (max-width: 400px){
      .title-sub-heading{
        font-size: 12px;
      }
    }

    .inline{
      display: inline;
    }
    .inline-table{
      display:inline-table;
    }
    .margin-zero{
      margin: 0px;
    }
    .vertically-middle{
      vertical-align: middle;
    }
    .vertically-bottom{
      vertical-align: bottom;
    }
    /*Top End*/

    /*Left Navigation Start*/
    a, a:hover, a:focus {
        color: inherit;
        text-decoration: none;
        transition: all 0.3s;
    }

    #sidebar ul li a {
        padding: 20px;
        font-size: 1.2em;
        display: block;
    }

    #sidebar ul li.active > a {
        color: #fff;
        background: #87C38F;
    }

    #sidebar {
        background: #fafafa;
        color: black;
        transition: all 0.3s;
        float: left;
        width: 15%
    }

	.nav-padding{
	  margin-left: 0px
	}

	@media screen and (max-width: 900px) {
      #sidebar {
          display: none;
      }
    }
    @media screen and (min-width: 901px) {
      #top-nav-bar {
          display: none;
      }
    }

	#sidebar>ul{
		height:80vh;
	}

    /*Left Navigation End*/

    /*Top Navbar Start*/


    .nav-tabs>li{
      width:50%;
      color: black;
      background: #e6e6e6;
    }

    .nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover {
      color: #fff;
      background: #87C38F;
    }
		  .top-nav-audio-tab{
		margin-right: 0px;
	  }
    /*Top Navbar End*/

    /*content area*/
      .content-area-div{
        position:relative;
        margin-left: 15%;
        width: 84.5%;
				margin-top: 7px;
      }

      @media screen and (max-width: 900px) {
        .content-area-div {
          margin-left: 0%;
          width: 100%;
        }
      }

	  .content-area-header-width{
		width:40%;
	  }

	  .content-area-table-header{
		margin-bottom: 0px;
	  }

    /*content area end*/

/*Play list start*/
  .unordered-playlist{
    list-style-type: none;
     margin-right: 0px;
		 margin-left:0px;
  }
  .checkbox-size{
    height:20px;
  }
   @media screen and (max-width: 1199px) {
       .checkbox-size{
		height:20px;
		width:20px;
		}
    }
	.autoplay-videoCbx-width{
		width:20px;
	}

  .checkboxlist-div{
    overflow-x: auto;
    overflow-y: scroll;
    background: #efeeee;
    height:65vh;
  }

  /* .checkboxlist-div::-webkit-scrollbar
  {
  	width: 14px;
  	background-color: white;
  }
  .checkboxlist-div::-webkit-scrollbar-track
  {
  	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
  	background-color: #F5F5F5;
  }
  .checkboxlist-div::-webkit-scrollbar-thumb
  {
  	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
  	background-color: #555;
  } */
  
  
  #scrollDiv::-webkit-scrollbar
  {
  	width: 14px;
  	background-color: white;
  }
  #scrollDiv::-webkit-scrollbar-track
  {
  	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
  	/* border-radius: 10px; */
  	background-color: #F5F5F5;
  }
  #scrollDiv::-webkit-scrollbar-thumb
  {
  	/* border-radius: 10px; */
  	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
  	background-color: #555;
  }

	#scrollDiv {
		background:#ecebeb;
	}

	#scrollDiv>.react-bootstrap-table>.table>thead{
		background: white;
	}
  .padding-left-zero{
    padding-left:0px;
  }
  .float-left{
    float: left;
  }
  .float-right{
    float: right;
  }
  .top-labels-heading{
    color: #F94141;
    font-size:12pt;
  }
  .top-labels-content{
    color: black;
  }
  .top-right-section{
    background: #f9f7f7;
    padding-left: 7px;
  }

  @media screen and (max-width: 1199px) {
	  
	  #autoplay-chkbox-div{
		  text-align: center;
	  }
	  
    .unordered-playlist>.recorded-media {
      padding-left:0px;
    }
		.unordered-playlist>.recorded-media>label{
			padding-left: 5px;
		}
		.recorded-media-cbx{
			float: left;
		}
		.recorded-media-lbl{
			float: left;
			margin-top: 4px;
			margin-left: 5px;
		}
		.top-right-section{
      padding-left: 5px;
      margin-right: 5px;
      padding-right: 5px;
      margin-bottom: 55px;
		}
		.unordered-playlist {
    	margin-right: 0px;
		}
		.ul-block{
			/*display: inline-flex;*/
			float: left;
			width:100%;
		}
    .checkboxlist-div{
      height: auto;
    }
    .unordered-playlist>li{
      padding-right: 10px;
      text-align:  center;
    }
  }

  #autoplay-chkbox{
    vertical-align: bottom;
  }

  #autoplay-chkbox-div{
    margin-top: 10px;
    margin-bottom: 5px;
  }

  .download-button-div{
    background-: grey;
    height: 45px;
    margin-top:  10px;
  }

  .download-button-div>button{
    /* border-radius:20px; */
    border:0px;
  }
  .download-button-div>button:focus {
    outline:0;
  }
  .download-btn{
    background: #38D687;
    color: white;
  }
  .delete-btn{
    background: #E83D3D;
    color: white;
  }

  @media screen and (max-width: 500px) {
    .top-labels-content {
      margin-bottom: 0px;
    }
    .top-labels-heading {
      margin-bottom: 0px;
      font-size: 12pt;
    }
    .time-captured-lbl{
      margin-bottom: 5px;
    }
  }
  @media screen and (max-width: 1200px) {
    .location-lbl .time-captured-lbl{
      padding-left: 0px;
    }
  }
  @media screen and (max-width: 1199px) {
    .col-md-12{
            float: none;
      }
  }

	@media screen and (min-width: 1200px) and (max-width: 1340px) {
		.top-labels-heading {
			font-size: 9pt;
		}
  }

	@media screen and (min-width: 1341px) and (max-width: 1550px) {
		.top-labels-heading {
			font-size: 11pt;
		}
  }

  #top-lbl-div>label{
    padding-left:0px;
  }

.img-thumb{
    display: block;
    max-width: 100%;
    height: auto;
		border-style: solid;
		margin-bottom: 5px;
		/* border-color: black;
		border-top-width: 3px;
		border-right-width: 3px;
		border-bottom-width: 3px;
		border-left-width: 3px;
		padding-left: 0px;
		padding-right: 0px;
		padding-bottom: 0px; */
}

.media-details{
  font-size: smaller;
  padding-top: 5px;
}

.video-playing{
	border-style: solid;
	/*border-top-width: 3px;*/
	border-color: #FF3939;
	border-top-width: 3px;
	border-right-width: 3px;
	border-bottom-width: 3px;
	border-left-width: 3px;
	/* padding-left: 0px;
	padding-right: 0px;
  padding-bottom: 0px; */
}

.ul-block{
	padding-left:0px;
 }

  @media screen and (max-width: 1199px) {
	.img-thumb{
		max-width: none;
		width:180px;
		padding-top: 10px;
  }
  
  .media-details{
    position: absolute;
    display: inline;
    padding-left: 5px;
    font-size: x-small;
  }

	.video-playing{
		padding-top:0px;
	}
	.ul-block>li{
		padding-right:0px;
	 }
  }
  @media screen and (min-width: 1200px) {
	 .ul-block{
		margin-left:0px;
		margin-right:0px;
	 }
  }

   @media screen and (min-width: 1200px) {
	 .download-button-div{
		font-size:9pt;
	 }
  }
    @media screen and (min-width: 1270px) {
	 .download-button-div{
		font-size:9pt;
	 }
  }

  @media screen and (min-width: 1370px) {
	 .download-button-div{
		font-size:11pt;
	 }
  }

    @media screen and (min-width: 1470px) {
	 .download-button-div{
			font-size:12pt;
	 }
  }




  /*play list end*/

  /*audio playlist start */

		.table-body-background{
			background:#ecebeb;
		}
		.audio-checkbox-size{
    width:16px;
    height:20px;
  }

  @media only screen and (max-width: 700px){
    .audio-checkbox-size{
      margin-left: 10px !important;
      margin-top: -10px !important;
    }
    .audio-checkbox-title{
      margin-top: -12px !important;
      display: inline-block !important;
    }
  }

  .audio-play-next-checkbox{
	position:absolute;
	padding-top:10px;
	padding-left:6px;
  }

	@media screen and (max-width: 700px) {
		 .audio-playlist{
				padding-left:0px;
        padding-right:0px;
        margin-bottom: 55px;
			}
	  }

	 .fixed-audio-table-height{
    min-height: 10vh;
    max-height: 50vh;
		overflow-y: auto;
	 }

	 .bootstrap-audio-table-margin{
		margin-bottom:0px;
	 }
	 #scrollDiv>table{
		 margin-bottom:0px;
	 }
	 #scrollDiv>table>thead{
		background:white;
	}
	/*audio playlist end */
.audio-player-width{
	width:100%;
}

.hide{
	visibility: hidden;
}

/*Video player sandesh start*/
.prev,
.next {
	cursor: pointer;
	position: absolute;
	top: 50%;
	width: auto;
	padding: 10px;
	margin-top: -25px;
	color: white;
	background-color: rgba(0, 0, 0, 0.4);
	font-weight: bold;
	font-size: 20px;
	/*transition: 0.6s ease;*/
	border-radius: 0 3px 3px 0;
	z-index: 111111;
	user-select: none;
	-webkit-user-select: none;
}

/* Position the "next button" to the right */
.next {
	right: 0px;
	border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
	background-color: rgba(0, 0, 0, 0.8);
}
/*Video player sandesh end*/

.lbl-time-captured-videotab{
	float: right;
}

@media screen and (max-width: 1199px) {
	.lbl-time-captured-videotab{
		float: left;
	}
}

.text-align-center{
	text-align:center;
}

.audio-row-select{
	background-color: #f5f5f5;
}

/*No Media Present start*/
.position-center-mediaStatus{
   width:100%;
   position: relative;
   top: 110px;
   display: -webkit-box;
   display: -moz-box;
   display: -ms-flexbox;
   display: -webkit-flex;
   display: flex;
   align-items: center;
   justify-content: center;
}

.position-center-mediaStatusMessage{
   text-align: center;
   position: relative;
   top: 100px;
   padding-top: 20px;
}

@media (max-width: 770px) and (orientation: portrait) {
 .max-dim-mediaStatus-img{
    max-width: 40%;
    max-height: 600px;
  }
}

@media (max-width: 770px) and (orientation: landscape) {
    .position-center-mediaStatus{
       width:100%;
       position: relative;
       top: 50px;
       display: -webkit-box;
       display: -moz-box;
       display: -ms-flexbox;
       display: -webkit-flex;
       display: flex;
       align-items: center;
       justify-content: center;
    }
    .position-center-mediaStatusMessage{
       text-align: center;
       position: relative;
       top: 50px;
       padding-top: 20px;
    }
   .max-dim-mediaStatus-img{
      max-width: 20%;
      max-height: 600px;
    }

}

/*Dpi task script end here*/
/*-----------Media status task start-------------*/

.max-dim-mediaStatus-img{
    max-width: 20%;
    max-height: 600px;
}
.position-center-mediaStatus{
    width:100%;
    position: relative;
    top: 110px;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: center;
}

.position-center-mediaStatusMessage{
    text-align: center;
    position: relative;
    top: 100px;
    padding-top: 20px;
}

.position-center-tryAgainButton{
    border-top-width: 0px;
    border-bottom-width: 0px;
    border-right-width: 0px;
    border-left-width: 0px;
    background-color: #0F4BD3;
    color: white;
    padding-right: 15px;
    padding-left: 15px;
}

@media (max-width: 770px) and (orientation: portrait) {
    .max-dim-mediaStatus-img{
        max-width: 40%;
        max-height: 600px;
    }
}

@media (max-width: 770px) and (orientation: landscape) {
    .position-center-mediaStatus{
        width:100%;
        position: relative;
        top: 50px;
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .position-center-mediaStatusMessage{
        text-align: center;
        position: relative;
        top: 50px;
        padding-top: 20px;
    }
    .max-dim-mediaStatus-img{
        max-width: 20%;
        max-height: 600px;
    }

}

/*No Media Present end*/

.stream{
	margin-left:112px;
}

.info-box {
    position: absolute;
	}
	.video-react .video-react-video {
	    height: 100%;
		}

/* rootAppbar */
.top-root{
  background: #08415c;
  color: white;
  border-left-width: 0px;
  border-right-width: 0px;
  border-radius: 0px;
  margin-bottom: 0px;
  border-bottom-width: 0px;
  padding-left: 10px;
  padding-top:4px;
  padding-bottom:3px;
}

.logo-img-root{
  width: 50px;
  margin-bottom: 5px;
  margin-top: 4px;
}

.title-heading-root{
  margin-bottom: 18px;
  font-size: 1.5em;
}

.root-links{
  font-size: 1.2em;
  float: right;
  margin-top: 15px;
  display: inline-flex;
}
  .root-links a{
    margin-right: 50px;
    font-weight: 500;
  }
  .root-links a:hover{
    color: rgb(205, 241, 249);
  }

/* Content Wrapper */
.content-wrapper{
  padding-left: 40px;
  padding-right: 40px;
  width:100%;
  position: relative;
  top: 100px;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: center;
}

.help-info-list ul{
  margin-top: 5px;
}
.help-info-list ul li{
  list-style-position: outside;
  margin-left: 1.5em !important;
}

.illusion-image{
  width: 100%;
}

.playstore-image{
  margin-bottom: 20px;
}

@media screen and (max-width: 990px){
  /* Content Wrapper */
  .content-wrapper{
    padding-left: 50px;
    padding-right: 50px;
    top: 5px !important;
    display: block;
  }
}

/* Responsive Design */
@media screen and (max-width: 640px){
  .top-root{
    padding-left: 3px;
    padding-right: 3px;
    height: 50px;
  }
  .logo-img-root{
    width: 35px;
    margin-bottom: 5px;
    margin-top: 4px;
    margin-right: 5px;
  }

  .title-heading-root{
    margin-bottom: 15px;
    font-size: 1em;
  } 

  .root-links{
    font-size: .8em;
    float: right;
    margin-top: 12px;
  }
  .root-links a{
    margin-right: 10px;
  }
  .root-links a:hover{
    color: rgb(205, 241, 249);
  }

  /* Content Wrapper */
  .content-wrapper{
    padding-left: 10px;
    padding-right: 10px;
    display: block;
  }

  .call-label{
    font-size: 1.9em !important;
  }
  .info-label{
    font-size: 1.4em !important;
    margin-bottom: 10px;
  }
  .desc-label{
    font-size: 1em !important;
    margin-bottom: 10px;
  }
  .help-info-list ul{
    margin-left: 0 !important;
    margin-top: 5px;
    font-size: .9em;
  }
  .playstore-image{
    width: 50% !important;
    margin-bottom: 20px;
  } 
  .illusion-image{
    width: 100% !important;
  }
}

@media screen and (max-width: 400px){
  .root-links{
    font-size: .7em;
    float: right;
    margin-top: 14px;
  }
  .root-links a{
    margin-right: 5px;
  }  
}

/* 15 Days media warning message */
.warning-content-holder{
  background: antiquewhite;
  margin-left: 5px;
  padding: 5px;
  position: fixed !important;
  bottom: 0;
  z-index: 1004;
}

.fifteen-days-warning{
  font-size: 14px;
  font-weight: 500;
}

.remove-left-margin{
  margin-left: 0px !important;
  margin-right: 0px !important;
}

@media only screen and (max-width: 1199px){
  .fifteen-days-warning{
    white-space: initial;
  }

  .push-right{
    float: initial;
  }
  
  .warning-content-holder{
    padding: 0;
    margin: 0;
  }
}

@media only screen and (max-width: 1280px){
  .fifteen-days-warning{
    font-size: 13px;
  }
}

/* UI Updates */
@media screen and (min-width: 1280px) and (max-width: 1340px){
  .top-labels-heading {
      font-size: 9pt;
  }
}

.title-sub-heading{
  margin: .4rem 0 !important;
}

@media screen and (min-width: 1400px){
  .shrink-to-fit-video{
    width: 88%;
  }
  
  .title-heading{
    font-size: 1.50rem;
  }

  .title-sub-heading{
    font-size: 1.25rem;
    margin: .2rem 0 !important;
  }

  .logo-img{
    width: 56px;
  }

  .location-lbl, .time-captured-lbl{
    margin-bottom: 0;
    font-size: 10pt;
  }
}

.download-btn, .delete-btn{
  width: 20% !important;
  margin: .5% !important;
  background: white;
  float: right;
}

.audio-download-btn, .audio-delete-btn{
  margin: .5% !important;
  background: silver;
}

.download-btn-success, .audio-download-btn-success{
  background: #449d44;
  color: white !important;
}

.delete-btn-danger, .audio-delete-btn-danger{  
  background: #c9302c;
  color: white !important;
}

@media only screen and (max-width: 992px){
  .audio-download-btn, .audio-delete-btn{
    width: 49% !important;
  }
  
  .volume{
    display: block !important;
    width: 70px !important;
  }
}

.stream{
  margin-left: 0 !important;
}


.volume{
  padding-left: 0 !important;
}

.language-select-dropdown{
  -webkit-appearance: menulist !important;
  height: auto !important;
  position: absolute;
  top: 10px;
  right: 5px;
  min-width: 120px;
  font-size: 14px;
  color: black;
}

@media only screen and (max-width: 500px){
  .language-select-dropdown{
    font-size: 12px;
    min-width: 105px;
    top: 5px;
  }
}

.language-label{
  position: absolute;
  right: 140px;
  top: 8px;
  white-space: nowrap;
}

@media only screen and (max-width: 600px){
  .language-label{
    display: none;
  }
}

/* for Root Component */
.language-label-root{
  /* position: absolute;
  right: 180px;
  top: 8px;
  color: #000; */
  white-space: nowrap;
  margin-right: 5px;
}


.language-select-dropdown-root{
  -webkit-appearance: menulist !important;
  height: auto !important;
  /* position: absolute;
  top: 10px;
  right: 48px; */
  max-width: 120px;
  font-size: 14px;
  margin-top: auto;
  outline: none;
  color: black;
}

.language-select-dropdown-root:focus{
  box-shadow: none;
}

.localization-dropdown-wrapper{
  display: inline-flex;
}
/* 
@media only screen and (max-width: 640px){
  .language-select-dropdown-root{
    font-size: .8em;
    max-width: 100px;
    top: 5px;
    right: 7px;
  }
  
  .language-label-root{
    font-size: .8em;
    right: 115px;
    top: 5px;
  }
}

@media only screen and (max-width: 400px){
  .language-select-dropdown-root{
    font-size: .7em;
    right: 3px;
  }
  
  .language-label-root{
    font-size: .7em;
    right: 108px;
    top: 6px;
  }
} */

.table-hover>tbody>tr:hover{
  cursor: pointer;
}

@media only screen and (max-width: 992px){
  .root-links{
    margin-top: 0px;
  }
  .localization-dropdown-wrapper{
    position: absolute;
    top: 30px;
    right: 50px;
  }
}

@media only screen and (max-width: 640px){
  .localization-dropdown-wrapper{
    right: 10px;
    top: 22px;
  }

  .language-select-dropdown-root{
    min-width: 90px;
    font-size: 12px;
  }
}

@media only screen and (max-width: 400px){
  .localization-dropdown-wrapper{
    right: 5px;
  }

  .language-select-dropdown-root{
    min-width: 90px;
    font-size: 11px;
  }
}

@media only screen and (max-width: 600px) and (min-width: 500px){
  .title-sub-heading{
    font-size: 1.2rem;
  }
}
.show-on-hover{
  display: none;
}

input.col-lg-2.checkbox-size.inside-img-checkbox {
  position: relative;
  top: 30px;
  z-index: 999;
  left: 5px;
  margin-top: -20px;
}

.img-thumb-li{
  /* margin-bottom: 10px !important; */
}

.img-thumb {
  background: #000;
  margin-bottom: 0;
  margin-top: 5px;
}

.img-thumb-wrapper{
  cursor: pointer;
}

span.li-span:hover .show-on-hover {
  display: table;
  width: 100%;
}
span.li-span-active .show-on-hover{
  display: table;
  width: 100%;
}

.width-50-per{
  width: 50%;
}

button.width-50-per{
  line-height: initial !important;
  color: #000;
}

.download-button-div{
  /* max-width: 400px; */
  width: 40%;
}

@media only screen and (max-width: 1199px){
  .img-thumb{
    padding-top: 0px !important;
    display: inline;
  }
  li.img-thumb-li{
    text-align: left;
  }
  input.col-lg-2.checkbox-size.inside-img-checkbox{
    top: 30px;
    left: 4px;
  }
  #scrollDiv{
    /* margin-top: -35px; */
  }
  input.col-lg-2.checkbox-size.inside-img-checkbox{
    top: 35px;
  }
  .checkboxlist-div{
    overflow: auto;
  }
}

@media only screen and (max-width: 500px){
  #scrollDiv{
    /* margin-top: -30px; */
  }
}

@media only screen and (min-width: 1300px){
  input.col-lg-2.checkbox-size.inside-img-checkbox{
    left: 2px;
  }
}

@media only screen and (min-width: 1500px){
  input.col-lg-2.checkbox-size.inside-img-checkbox{
    left: 0;
  }
}

.show-on-1199px{
  display: none;
}

@media only screen and (max-width: 1199px){
  .hide-on-1199px{
    display: none !important;
  }
  
  .show-on-1199px{
    display: block;
  }
}

.fixed-header{
  margin-bottom: 0 !important;
}