/*Extra small devices (portrait phones, less than 576px)*/
@media (max-width: 575.98px) { 
	.top-right-menu li{ width: auto; text-align: center !important; }
	.top-right-menu li.pull-right { margin-top: 0px !important; }
	.top-right-menu li .styled-select  { float: none; margin: auto; margin-top: 0px; }
	.search-user .pull-right { text-align: center; float:none !important; margin: auto; margin-top: 15px !important;  }
   .top-right-menu li:first-child {margin-right: 0px;}
   .right_wrapper h1 { font-size: 21px; margin-bottom: 5px;}
   .floating-wrapper { width: 100%; bottom: 0px; right: 0px;}
   .live-streaming { margin-bottom: 5px; }
   .attendance-filters .form-inline .form-group { width: 100%; }
   .attendance-filters .form-inline .form-group .form-control { width: 100%; }
   .attendance-filters .form-inline .form-group .btn-primary { width: 100%; }
   .attendance-filters .form-inline .form-group.export-cvs .btn-primary { width: 50px; }
   ul.indicators { text-align: center; line-height: 25px; } 
   .small-screen .mb-xs { margin-bottom:40px !important; }
   .attendance-filters .form-inline .form-group.export-cvs { width: 20%; }
   .styled-select, .styled-select select { width: 120px;}
   .lap-expand-div .text-right.no-padding-left{margin-top: 10px;}
   .no-mb { margin-bottom: 0px !important; }
   ul.camera-list li a { font-size: 14px; font-weight: 400; }
/*  .top-bar.clearfix.small-screen-topbar-height { height:90px;}*/
.small-devise-res { width: 100%; }


}

@media (max-width: 349px) and (min-width: 320px) { 
	ul.camera-list {  display: grid; grid-template-columns: repeat(3, 1fr) !important;}
  
}
@media (max-width: 699px) and (min-width: 576px) { 
	.form-inline .form-group { margin-bottom: 10px; }
	.form-inline.selection-user .form-group { width: 100%; }
	.form-inline.selection-user .form-group .form-control  { width: 100%; }
	.floating-wrapper {     width: calc(100% - 30px); }
	.form-inline .form-control{ width: 100%; }	

}

/*Small devices (landscape phones, less than 768px)*/
@media (max-width: 767.98px) { 
.toggle-menu { position: fixed; top: 0px; left: 0px; width: 40px; height:32px;background-color: #e21c24; z-index: 500; font-size: 20px; text-align: center; color: #ffffff; display: block; font-weight: 400; }
.toggle-menu.menubar-margin { margin-left:250px;}

.toggle-menu:focus, .toggle-menu:hover { color: #ffffff; }
.side_wrapper { left: 0px; }
.side_wrapper.menu-show{ left:-250px; }
/*.form-inline .form-group .form-control { width: 133px !important; }*/
.outer-wrapper { margin-bottom: 40px; }
.outer-wrapper.over-link { margin-bottom: 30px; padding: 10px 10px; }

.mb-xs { margin-bottom:0px !important; }
.attendance-filters .form-inline { margin-bottom:0px; }
.attendance-filters .selection-user {width: auto; float: none; margin: auto;}
  .camara-preview img{ width:100%; float: left;  }
	ul.camera-list { margin:0px; width: 100%; height:auto; padding: 15px 0px; display: grid;
  grid-template-columns: repeat(4, 5fr);}
	ul.camera-list li { padding:0px 3px; }
	ul.camera-list li a {  width: 100%; height: 66px; margin-right: 3px; }
	.camara-preview { min-height: 150px;  }
	.search-container td .btn-danger { width:auto;}
	 .search-container td .btn { margin: 3px 0px; }
	 .hidden-xs { display: none !important; }
	 .styled-select, .styled-select select { width: 180px;}
	 .margin-bottom-scroll { margin-bottom: 85px;}
	 .side_wrapper { z-index: 501; }
	 .dropdown-submenu { position:relative;} 
/*.dropdown-submenu .dropdown-menu-show { display:none}*/
/*.dropdown-submenu:hover ul.dropdown-menu-show { display:block}*/
/*.side-menu-overflow { overflow-y: auto; height:100%;}*/
.side_wrapper { overflow-y:auto; overflow-x:hidden;}
.side_wrapper li .dropdown-toggle::after { position:absolute; right:10px; top:48%;}
}
@media screen and (min-width: 768px){
.main_wrapper.toggled .right_wrapper {
    padding-left: 250px;
}
/*.dropdown-submenu { position:relative;} 
.dropdown-submenu .dropdown-menu-show { display:none}
.dropdown-submenu:hover ul.dropdown-menu-show { display:block}
ul.dropdown-menu-show { position:absolute; left:250px; background-color:#e9ecef; top:0px; bottom:0px; }*/
.side_wrapper { overflow-y:auto; overflow-x:hidden;}
.side_wrapper li .dropdown-toggle::after { position:absolute; right:10px; top:48%;}

}

@media (max-width: 1198px) and (min-width: 768px) { 
	.outer-wrapper { margin-bottom: 40px; }
.mb-sm { margin-bottom:0px !important; }
.attendance-filters .selection-user {width: auto;  margin: auto; margin-top: 0px;}
.attendance-filters .selection-user .form-group .form-control { font-size: 13px; }
.attendance-filters .selection-user .form-group a img { width: 22px; }
.attendance-filters .selection-user .form-group { margin-bottom: 15px; }
.attendance-filters .form-inline.pull-right .form-group { margin-bottom: 15px; }
.top-right-menu li { margin-left: 5px; }
  .camara-preview img{ width:100%; float: left;  }
	ul.camera-list { margin:0px; width: 100%; height:auto; padding: 15px 0px; display: grid;
  grid-template-columns: repeat(5, 1fr);}
	ul.camera-list li { padding:0px 3px; }
	ul.camera-list li a {  width: 100%; height: 75px; margin-right: 3px; }
	.camara-preview { min-height: 250px;  }
	.search-container td .btn-danger { width: 60px; }
	 .search-container td .btn { margin: 3px 0px; }
	 .attendance-filters .form-inline#search_form .form-group { width: 100%; }
	 .attendance-filters .form-inline#search_form .form-group .form-control { width: 100%; }
	 .form-inline.selection-user .form-group { width:100%; }
	.form-inline.selection-user .form-group .form-control  { width: 100%; }
}

@media (max-width: 1150px) and (min-width: 1020px){ 
ul.camera-list {  display: grid; grid-template-columns: repeat(2, 1fr) !important;}
}



@media (max-width: 1300px) and (min-width: 1140px){ 
	.lap-expand-div .col-xl-4, .lap-expand-div .col-xl-8 {  flex: 0 0 100%; max-width: 100%; } 
	.camara-preview { min-height: 280px;  }
	.form-inline.selection-user .form-group { width: 33%; }
	.form-inline.selection-user .form-group .form-control  { width: 100%; }
	.attendance-filters .form-inline .form-group.sizing, .attendance-filters .form-inline .form-group.export-cvs { margin-top: 5px; }
	.attendance-filters .form-inline .form-group.sizing.no-mt, .attendance-filters .form-inline .form-group.export-cvs.no-mt { margin-top: 0px; }

}

@media (max-width: 1400px) and (min-width: 1301px){ 
.right_wrapper h1 { font-size: 24px; }
.lap-expand-div .col-xl-4 { padding-right: 15px; } 
}

@media (max-width: 1450px) and (min-width: 1350px){ 
.attendance-filters .lap-expand-div .form-inline.pull-right .form-group .form-control { font-size: 12px; text-transform: uppercase; }
.camara-preview { min-height: 300px;  }

.attendance-filters .form-inline .form-group.sizing .form-control { width: 100%; }
.attendance-filters .form-inline .form-group.sizing.no-mt, .attendance-filters .form-inline .form-group.export-cvs.no-mt { margin-top: 5px !important; }
}




/*Medium devices (tablets, less than 992px)*/
@media (max-width: 991.98px)  { 

}

@media (max-width: 991.98px)  { 
.attendance-filters .form-inline#search_form .form-group { width: 100%; }
}

/*Large devices (desktops, less than 1200px)*/
@media (max-width: 1199.98px) { ... }

/*Extra large devices (large desktops)
No media query since the extra-large breakpoint has no upper bound on its width*/


/*Extra small devices (portrait phones, less than 576px)
No media query since this is the default in Bootstrap

Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) { .footer-flooting { width: 100%; }}

@media (min-width: 1200px) {.footer-flooting { width: 85%;}}

@media (max-width: 992px) and (min-width: 768px) { 
  .footer-flooting { width: 69%; }

}

/*Medium devices (tablets, 768px and up)*/
@media (max-width: 1200px) and (min-width: 100px) { 
  

}

/*Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {
	.md-row-fullwidth { width: 100%; }

 }

/*Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) { 
.attendance-filters #search_form .form-group{ width: 25%; }
.attendance-filters #search_form .form-group:last-child{width: 25%;}
.attendance-filters #search_form .form-group .form-control { width: 100%; }
.no-padding-left { padding-left: 0px !important; }
.attendance-filters .form-inline .form-group.sizing-emp-name { width: 165px; }
.attendance-filters .form-inline .form-group.sizing-emp-name .form-control { width: 100%; } 
.attendance-filters .form-inline.pull-right .form-group .form-control.no-right-margin { margin-right: 0px; } 

}