body {
  padding:0;
  margin:0;
  background-color: #f2f2f2;
 }



.container_v1_main { position: fixed; height: 100%; width: 100%; left: -300px; top: 0; overflow: hidden; overflow-y: auto; transition:.3s ease-in-out all; }
.container_v1_main.active { left: 0px; transition:.3s ease-in-out all; }

.left_panel_v1 { position: absolute; top: 0; left: 0; width: 300px; height: 100%; overflow-y: auto; overflow-x: hidden; }
.right_panel_v1 { position: absolute; left: 300px; top: 0; width: 100%; height: 100%; background-color: #ccc;  }
.right_panel_content { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 0; background-color: #fff; }
.right_panel_bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 1; opacity:0; transition:.3s ease-in-out all; display: none;  }
.container_v1_main.active .right_panel_v1 .right_panel_bg { background-color: #000; opacity: 0.7; transition:.3s ease-in-out all; }
.header_v1_container { height: 50px; background-color: #2C9D42; color: #e7ffca; padding: 11px 0 0 60px; font-size: 17px; letter-spacing: 1px; }

.hamburger_container { position: absolute; left: 16px; top: 13px; z-index: 2; }
.hamburger { padding: 0; }
.hamburger-box { width: 25px; height: 24px; }
.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after { width: 25px; height: 2px; background-color: #fff; border-radius: 0px; }
.hamburger-inner::after { bottom: -8px; }
.hamburger-inner::before { top: -8px; }

.profile_box { background-color: #2C9D42; padding: 50px; }
.profile_image_left { text-align: center; color: #fff; font-size: 16px; line-height: 11px; font-weight: bold; }
.profile_image_left img { border-radius: 50%; width: 100px; height: auto; border: #fff 2px solid; margin-bottom: 10px; background-color: #fff; }
.profile_image_left span { font-size: 11px; font-style: italic; font-weight:normal; }
.profile_pencil_left { color: #fff; font-size: 20px; float: right; margin-top: -22px; }

.profile_link_left { display: block; width: 100%; padding: 18px; border-top: #ccc 1px solid; color: #212121; }
.profile_link_left:hover { color: #2C9D42; }
.profile_link_left span { display: inline-block;margin-left: 15px;letter-spacing: 1px; }
.profile_link_left i { font-size: 20px; top:4px; }



.login_v1 { position: absolute; width: 300px; left: 50%; top: 30%; margin-left: -150px; margin-top: -100px; }
.edit_profle_container { position: absolute; width: 100%; height: 100%; top: 0; left: -300px; background-color: #fff; z-index: 2; display: none; }

.monitoring { background-color: #fff; height: 100px; margin: 5px; border-radius: 5px; line-height: 33px; padding: 28px 0 0 0; }
.monitoring_each { font-size: 55px; text-align: center; font-weight: bold; letter-spacing: 2px; }
.monitoring_each_title { text-align: center; text-transform: uppercase; font-size: 11px; letter-spacing: 2px; margin-top: 13px; line-height: 10px; }

.purok_bg { background-color: #fff; padding: 10px 0; border-bottom: #ccc 2px dotted; float: left; width: 100%; }
.purok_bg_title { background-color: #fff; padding: 10px; border-bottom: #ccc 2px dotted; }
.purok_bg_option_title { float: left; font-size: 11px; text-align: center; font-weight: bold; border-left: 1px dotted #ccc; height: 35px; }
.purok_bg_option_val { float: left; font-size: 15px; text-align: center; font-weight: bold; border-left: 1px dotted #ccc; height: 20px; }
.purok_bg_container { padding: 40px 5px 0 5px; }

.select_filter_style { width:100%; display:inline-block; }
.system_filter__each { font-weight: normal; font-size: 12px; padding: 7px 0 0 0; }
/*.sequence_number { display: none; } */

.folder_each, .folder_each_new { list-style: none; }
.folder_each .img { width:10px; height:10px; background-image: url("../images/site_images/minus.png"); display: inline-block; background-size: cover; }
.folder_each .img+.folder_each_a+.folder_each_form+ul { display: block; margin-left: 18px; transition:.3s ease-in-out all;  }

.folder_each .img.active { background-image: url("../images/site_images/plus.png"); }
.folder_each .img.inactive { background-image:none; }

.folder_each .img.active+.folder_each_a+.folder_each_form+ul { display: none; transition:.3s ease-in-out all;  }


.folder_each_new { margin-left:2px; font-size: 12px; color:#449A00; cursor: pointer; opacity: 0; }
.folder_each_delete { margin-left:2px; font-size: 12px; color:#f00; cursor: pointer; opacity: 0; }
.folder_each_edit { margin-left:2px; font-size: 12px; color:#212121; cursor: pointer; opacity: 0; }
.folder_each_a:hover .folder_each_new, .folder_each_a:hover .folder_each_delete, .folder_each_a:hover .folder_each_edit { opacity: 1;  }




.folder_each_form { width: 250px; margin-left: 30px; display: none; }
.folder_new_root { display: none; }
.folder_file_list { display: none; }




/* ext position*/

.ext.png { display: inline-block; width: 58px; height: 66px; background-image: url(images/ext.jpg); background-position-x: -217px; background-position-y: 0px; }

/*********GLOBAL BEGIN*********/
*{ padding:0; margin:0; outline:none; }
.np { padding:0}
.nm { margin:0}
.row {width:100%;}
.container{ max-width: 100%; width: 100%; margin: 0 auto; }
header { position:fixed; z-index:2; top: 0; width:100%; max-width:100%; background-color:#3e7fe5; padding: 20px 0; }
main { width:100%; background-repeat:no-repeat; background-size:100% auto;}

a { text-decoration:none; cursor:pointer; outline: none !important;}
a:hover {  text-decoration:none; outline: none !important; }

/*********GLOBAL end*********/
header ul{border-bottom: 0 !important;}
header ul li a{text-transform: uppercase; background-color:#fff; }
header ul li a img{width: 30px;}
header .nav-tabs > li.active > a, header .nav-tabs > li.active > a:focus, header .nav-tabs > li.active > a:hover { color: #000;  cursor: default; background-color: #ddd; border: 1px solid #ddd;}
header .nav-tabs > li > a{border-radius: 0;}
header .profile { text-align: right; }
header .profile p{display: inline-block; color: #fff; font-size: 15px; text-transform: capitalize; }
header .profile img{width: 50px; border-radius: 100%; margin: 0 0 0 10px;}
header .profile .profile_drop{position: absolute;top: 75px;right: 0;z-index: 1000;display: none;padding: .5rem 0;text-align: left;background-color: #fff;border: 1px solid #e3e6f0;border-radius: .35rem;-webkit-box-shadow: 0 .15rem 1.75rem 0 rgba(58,59,69,.15) !important;box-shadow: 0 .15rem 1.75rem 0 rgba(58,59,69,.15) !important;}
header .profile .profile_drop hr{ margin: 0; }
header .profile .profile_drop a{display: block;width: 100%;padding: 10px 30px 10px 30px; clear: both;font-weight: 400;color: #3a3b45;text-align: inherit;white-space: nowrap;background-color: transparent;border: 0;font-size: 16px;text-transform: capitalize;}
header .profile .profile_drop a i{ margin: 0 7px 0 0; }

.header_nav{ padding:0; background-color: #3d88e5; width: 100%; }
.header_nav .navbar{ background-image: none; background-color: #3d88e5;  border-radius: 0; border: none; padding: 10px 20px; }
.header_nav .navbar a{ color: #fff; }
.navbar-inverse .navbar-toggle{ border-color: #fff !important; }
.navbar-inverse .navbar-toggle:hover{ background-color: #ccc; }

.status_botton .btn{ padding: 5px 6px; }
.headenav{position: relative; margin: 0 0 60px 0;}



.tab_list{ margin: 130px 0 0 0; }
.student_list h3{ margin: 0 0 30px 0; text-transform: uppercase;}
.student_list h3 img {width: 40px;}
.student_list ul{ padding: 0; margin: 0; }
.student_list ul li{ list-style: none; display: inline-block; margin: 0 40px 20px 0; text-align: center; }
.student_list ul li a img{width: 150px; border-radius: 100%; margin: 0 0 10px 0; }
.student_list ul li a p{ color: #000; text-transform: uppercase;font-family: 'Montserrat-Regular'; margin: 0; }
.student_list ul li a small{color: #555; text-transform: capitalize; font-family: 'Montserrat-Regular'; margin: 0; font-size: 13px;}


.header_burger{ padding: 10px 10px;  -webkit-box-shadow: 0 11px 15px -6px #ccc;
     -moz-box-shadow: 0 11px 15px -6px #ccc;
          box-shadow: 0 11px 15px -6px #ccc; position: fixed; z-index: 3; background-color: #fff;}
  
  .navbar-form{ padding: 0 0 0 15px; margin: 0; text-align: right; }

  .slide_nav{ position: fixed; left: 0; top: 58px; max-width: 280px; width: 100%; background-color: #ddd; height: 100%; display: none; z-index: 3;}
  .slide_nav_head{ padding: 5px 10px; width: 100%; background-color: #ccc; }
  .slide_nav_head img{ width: 50px; border-radius: 100%; display: inline-block; margin: 0 8px 0 0; }
  .slide_nav_head p{ display: inline-block; margin: 0; font-size: 16px; color: #fff;  }
  .slide_navigation{ margin: 15px 0 0 0; padding: 0 0 0 15px; }
  .slide_navigation ul{ padding: 0; margin: 0; }
  .slide_navigation ul li{ list-style: none; display: block; margin: 0 0 10px 0;  }
  .slide_navigation ul li a{ font-size: 16px; color: #000; text-transform: capitalize; }
  .slide_navigation img{ height: 40px; margin: 0 10px 0 0; border-radius: 100%; }
  .opacitys{position: fixed;top: 0; left: 0; width: 100%; height: 100%; background-color: #000; z-index: 3; opacity: 0.4; display: none; }

  .student{ margin: 20px 0 0 0; padding: 0 15px; }
  .student_title img{ width: 40px; }
  .student_lists{ position:relative; margin: 50px 0 0 0; text-align: center;  }
  .student_lists ul{ padding: 0; margin: 0;}
  .student_lists ul li{ display: inline-block; margin: 0 15px;  }
  .student_lists ul li  img{ border-radius: 100%; margin: 0 0 5px 0; border:5px solid #ddd; width: 100% !important; }
  .student_lists ul li  p{ margin: 0; font-weight: bold; text-transform: uppercase; }





.global_checkbox.uploadingg input[type=checkbox] + span { border: #f00 1px solid !important; }
.global_checkbox.uploadingg input[type=checkbox] + span span { background-color: #f00 !important; }


.global_checkbox input[type=checkbox] {display: none;}
.global_checkbox input[type=checkbox] + span { display: inline-block; border: #ccc 1px solid; height:20px; width: 20px; text-align: left; margin: 2px 0 0 4px; }
.global_checkbox input[type=checkbox] + span span { display: inline-block; background-color: #ccc; height:14px; width: 14px; border: 0; margin: 2px 0 0 2px; }

.global_checkbox input[type=checkbox]:checked + span { border: #bee1ff 1px solid; }
.global_checkbox input[type=checkbox]:checked + span span { display: inline-block; background-color: #369aff; height:14px; width: 14px; border: 0; margin: 2px 0 0 2px; }

.global_checkbox input[type=checkbox]:disabled + span { cursor: not-allowed; }
.student_status_light { display: inline-block; height: 10px; width: 10px; background-image: url(../images/gray_light.png); background-size: cover; }
.student_status_light.active { background-image: url(../images/green_light.png); }


.global_select { border: 1px solid #ccc; padding: 2px; display: inline-block; line-height: 11px; }
.global_select span { background-color: #ccc; color: #fff; padding: 2px 3px 3px 3px; font-size: 10px; min-width: 17px; display: inline-block; text-align: center; line-height: 10px; margin: 0; }
.global_select span:hover, .global_select.active span:hover { color: #fff; }


.global_select.active { border: 1px solid #bee1ff; }
.global_select.active span { background-color: #369aff; }


/*.table-responsive { overflow-x: visible !important; }*/

.filter1 { display: none; }

.monitr_online { color:#000; font-size: 30px; margin: 0 5px; opacity: 0.2;  transition:.3s ease-in-out all; }
.monitr_online.active { color:#009fff; opacity: 1;  transition:.3s ease-in-out all; }







@media(max-width:1199px){

  .table-responsive { overflow-x: auto; overflow-y: auto; }
  .purok_bg_container { padding: 40px 0 0 0; }
  .purok_bg_option_val { line-height: 10px; }
  .purok_bg_option_val small { font-size: 8px; line-height: 7px; display: inline-block; margin-top: 3px; font-weight: normal; color: #212121; }
  .purok_bg_title { font-weight: bold; color: #0072aa; }

  .select_filter_style { margin: 5px 0; }
}
@media(max-width:991px){
  header{ position:fixed; text-align:center; height:auto; padding: 0 0 0 0; background-color: #ccc;}
  header ul li{ display: block !important; margin: 0 0 0 0 !important; float: none !important; text-align: left; }

  .mobile_img{ position: relative; border-radius: 100%; width: 50px; }
  .navbar-brand{ position: relative !important; } 
  .navbar{ margin: 0; padding: 10px 0;}
  .navbar-default .navbar-brand{ padding: 0 0 0 10px; }
  .navbar-default .navbar-collapse{ border-color: #fff; padding: 0; }
  .nav-tabs{ padding: 10px 0; }

   .profile_drop_mobile{position: absolute;top: 70px;left: 0;z-index: 1000;display: none;padding: .5rem 0;text-align: left;background-color: #fff;border: 1px solid #e3e6f0;border-radius: .35rem;-webkit-box-shadow: 0 .15rem 1.75rem 0 rgba(58,59,69,.15) !important;box-shadow: 0 .15rem 1.75rem 0 rgba(58,59,69,.15) !important;}
   .profile_drop_mobile hr{ margin: 0; }
   .profile_drop_mobile a{display: block;width: 100%;padding: 10px 30px 10px 30px; clear: both;font-weight: 400;color: #3a3b45;text-align: inherit;white-space: nowrap;background-color: transparent;border: 0;font-size: 16px;text-transform: capitalize;}
   .profile_drop_mobile a i{ margin: 0 7px 0 0; }

  /*.navbar-default .navbar-collapse{margin-top: }*/
  /*header .nav-tabs > li.active > a, header .nav-tabs > li.active > a:focus, header .nav-tabs > li.active > a:hover { color: #000;  cursor: default; background-color: #ddd; border: 1px solid #ddd;}
  header .nav-tabs > li > a{border-radius: 5px;}*/
}


@media(max-width:800px){}
@media(max-width:768px){ 

}
@media(max-width:736px){ 
  .onepage_container{ padding:0 25px;}
  .pay_card img{ width:100%;}
  .about{ margin:0 0 40px 0;}
  header ul li a img{width: 20px;}
  header ul li{ display: block !important; float: none !important;  }
  
  .holder_caption_banner{ width:100%; max-width:90%; margin:0 auto; margin-top:50px; left:0; right:0; }
  .banner_caption1{ float:none;}
  .caption1 h1{ font-size:20px;}
  .contact_banner{  margin:0 auto; margin-top:50px; width:100%; max-width:none; text-align:left;}
  .contact_banner a, .contact_banner a:hover{ font-size:17px;}
  .student_list ul{ text-align: center; }
  .student_list ul li{  margin: 0 5px 20px 5px; }
  .student_list ul li a img{width: 90px; }
  .tab_list{ margin: 110px 0 0 0; }

  .nav > li > a { padding: 15px 10px; font-size: 12px;}
  
  .student_list ul li a p{ display: none; }
  .student_list ul li a small{ display: none; }
}
@media(max-width:667px){}
@media(max-width:414px){}
@media(max-width:375px){}

@media(max-width:360px){}