/* ========================================================
*
* Melon - Flat & Responsive Admin Template
*
* ========================================================
*
* File: responsive.css
* Description: Template styles for responsive design (for phone and tablet devices)
* Version: 1.0
*
* ======================================================== */
.clearfix {
  *zoom: 1;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
  line-height: 0;
}
.clearfix:after {
  clear: both;
}

/* 1200是导航缩小样式 */
.nav_box{display: none}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.nav_box{ float: left;position:relative;  height:45px; line-height:45px; width: 144px;}
.nav_box a{ color:#fff;  }
.nav_box .nLi{ float:left;  position:relative; display:inline;  width: 100%;}
.nav_box .nLi h3{ float:left; }
.nav_box .nLi h3{ display:block; width: 100%; font-size:14px; color: #fff;  text-align: center;line-height: 45px;}
.nav_box .nLi h3:hover{background:#185295; color:#fff;}
.nav_box .nLi h3 a{ display: block;width: 100%;font-size: 16px;text-align: center;line-height: 66px;font-weight: bold;}
.nav_box .sub{ position:absolute;display:none; width:100%;left:0; top:66px;background: rgba(255,255,255,.9);line-height:45px; z-index:200;box-shadow: 0 2px 4px 6px rgba(0, 0, 0, 0.06);-moz-box-shadow: 0 2px 4px 6px rgba(0, 0, 0, 0.06);-webkit-box-shadow: 0 2px 4px 6px rgba(0, 0, 0, 0.06);}
.nav_box .sub li{margin: 0;}
.nav_box .sub a{ display:block; text-align: center; color: #333; font-size: 15px ; overflow: hidden;text-overflow:ellipsis;white-space: nowrap;}
.nav_box .sub a:hover{ background:#a6aeb1; color:#fff;}
.nav_box .on h3 a{ color:#fff;  }
.nav_box .on h3 { color:#fff;  }

.login_in{float: right; line-height: 45px;}
.login_in > a{display: inline-block;padding: 0 5px;font-size: 14px; font-weight: 500;color: #fff;}
.login_in > span{display: inline-block;color: #fff;}
.sub1 > li > a{ font-size: 14px; }

/* 手机端菜单 */
.phone_menu{
	position: fixed;
	background-image: url(../img/menu.png);
	background-repeat: no-repeat;
	top: 11px;
	left: 20px;
	z-index: 9999;
  color: #fff;
  font-size: 15px;
  height: 31px;
  width: 31px;
  text-align: center;
  line-height: 22px;
  background-position: 0 center;
  padding-left: 30px;
  background-size: 100%;
}
/* 手机端菜单 */

.nav_wrap{ position:fixed; left: -100%; top:0; width: 100%; height: 100%; 
	transition: all 0.6s; -webkit-transition: all 0.6s;
  z-index: 9998;
 
 }
 .subNavBox{
   
 }
.menu_ctn_box{
  float: left;
	top: 0;
  left: 0;
  width: 80%;
	height: 100%;
  z-index: 120;
  background-color: #ffffff;
  box-shadow: -4px 4px 10px #e3dede;
	background-size: 100% 100%;
}
.subNavBox_right{
  float: left;
  width: 20%;
  height: 100%;
}
/* 改版的CSS */
.subNav {
  display: block;
  height: 50px;
  cursor: pointer;
  font-size: 17px;
  color: #333333;
  line-height: 50px;
  padding-left: 25px;
  background-position: 95% 50%;
  background-image: url(../img/jiantou1.png);
  background-repeat: no-repeat;
}
.navContent li a {
  font-size: 16px;
  display: block;
  height: 50px;
  text-align: left;
  font-size: 14px;
  line-height: 50px;
  color: #333;
  padding-left: 35px;
}

.navContent{display: none;}
.currentDt{background-image:url(../img/jiantou.png); background-color: #f05d4b; color: #fff;}
.navContent > li:active{
  background-color: #ffc3c3; color:#fff;
  
}

.VerticalMenu_box_big > li{
  border-bottom: 1px solid #dadada;
}
.VerticalMenu_box_big > li:nth-child(3){
  border-bottom: 0px solid #dadada;
}
.fa-lg{color: #9a9a9a;}
.subNavBox_ctn_title{
  position: relative;
  font-size: 16px;
  color: #181818;
  padding: 0 36px;
  font-weight: bold;
  line-height: 50px;
}
.subNavBox_ctn_title::before{
  position: absolute;
  content: ""; 
  height: 14px;
  width: 14px;
  background-image: url(../images/Help/Question.png);
  left: 14px;
  top: 18px;
}
.VerticalMenu > div > div > div:first-child {
  position: relative;
  height: 40px;
  font-size: 17px;
  color: #fff;
  line-height: 40px;
  transition: background-color 0.4s linear;
}
.drop_down_title{
  position: relative;
    display: block;
    font-size: 14px;
    color: #666;
    padding-left: 21px;
}
a:visited{text-decoration: none;}
.VerticalMenu > div > div > div:first-child >  .on{
  background-color: #fafafa;
  color: #f14b4b;
  border-left: 4px solid #f14b4b;
}
/* .VerticalMenu > div > div > div:first-child > .on::before{
  position: absolute;
  content: ""; 
  width: 4px;
  height: 40px;
  background-color: #f14b4b;
  left: 0;
} */
.VerticalMenu > div > div > .active{
  background-color: #f05d4b;
  color: #fff;
}
.VerticalMenu > div > div > .active > a{
  color: #fff;
}
.VerticalMenu > div > div > div:first-child > i:last-child {
  position: absolute;
  line-height: 36px;
  float: right;
  transform: rotate(0deg);
  transition: transform 0.4s linear;
  top: 7px;
  right: 15px;

}
.VerticalMenu > div > div > div:last-child {
  width: 100%;
  display: none;
}
.VerticalMenu > div > div > div:last-child > div {
  font-size: 15px;
  transition: background-color 0.1s linear;
  text-align: center;
  line-height: 40px;

}
.VerticalMenu > div > div > div:last-child > div  > div > a{
  display: block;
  padding-right: 10px;
  font-size: 16px;
  text-align: left;
  font-size: 14px;
  color:#666;
  padding-left: 40px;

}
.VerticalMenu > div > div > div:last-child > div > div > a:hover{
  color: #f14b4b;
}
.VerticalMenu > div > div > div:last-child > div > div > .on{
  color: #f14b4b;
}
/* .VerticalMenu > div > div > div:last-child > div > div > a:hover{
    background-color: #e0e0e0;
} */

.VerticalMenu > div > div:last-child::after {
  display: block;
  clear: both;
}
/* .VerticalMenu > div > div > div > a{
  background-repeat: no-repeat;
  background-position-y: 16px;
} */
.subNav{
  background-repeat: no-repeat;
  background-position-y: 16px;
  background-position-x: 216px;
  background-image: url(../images/Help/jiantou1.jpg);
}
.currentDt{
  background-image: url(../images/Help/jiantou.jpg);
}




/* # Responsive Classes
================================================== */
@-ms-viewport {
  width: device-width;
}
.hidden {
  display: none;
  visibility: hidden;
}
.visible-phone {
  display: none !important;
}
.visible-tablet {
  display: none !important;
}
.hidden-desktop {
  display: none !important;
}
.visible-desktop {
  display: inherit !important;
}
@media (min-width: 768px) and (max-width: 979px) {
  .hidden-desktop {
    display: inherit !important;
  }
  .visible-desktop {
    display: none !important ;
  }
  .visible-tablet {
    display: inherit !important;
  }
  .hidden-tablet {
    display: none !important;
  }
}
@media (max-width: 767px) {
  .hidden-desktop {
    display: inherit !important;
  }
  .visible-desktop {
    display: none !important;
  }
  .visible-phone {
    display: inherit !important;
  }
  .hidden-phone {
    display: none !important;
  }
}
.visible-print {
  display: none !important;
}
@media print {
  .visible-print {
    display: inherit !important;
  }
  .hidden-print {
    display: none !important;
  }
}
/* # Media Queries
================================================== */
/* # Responsive Navbar/Navigation/Sidebar
================================================== */
/* # From 979px and below
-------------------------------------------------- */
@media (max-width: 979px) {
  body {
    padding-top: 0;
  }
  .navbar {
    position: fixed;
    margin-bottom: 0;

  }
  .navbar .navbar-inner {
    padding: 0px;
  }
  .navbar .container {
    width: auto;
  }
  .navbar .navbar-brand {
    width: 159px;
    font-size: 17px;
  }
  /*.navbar .toggle-sidebar {
    display: none;
  }*/
  .navbar-fixed-top {
    margin-right: 0px;
    margin-left: 0px;
  }
  #container.fixed-header {
    margin-top: 0;
    top: -20px;
  }
  .sidebar-fixed,
  #sidebar {
    position: relative !important;
    top: 0;
  }
  #divider {
    left: -8px;
  }
  .navbar-left.navbar-left-responsive {
    position: absolute;
    width: 100%;
    background: #2a4053;
    margin-top: 48px !important;
    margin-left: -20px;
    display: none;
  }
  .navbar-left.navbar-left-responsive > li {
    border-right: none;
  }
}
@media (max-width: 767px) {
  .navbar .navbar-brand {
    padding: 10px 20px 10px;
    margin-left: -10px;
  }
  .navbar-left.navbar-left-responsive {
    margin-left: 0;
  }
  .navbar .nav > li > a {
    color: #ffffff;
    font-size: 15px;
    text-shadow: 0 1px 0 #000000;
    padding-top: 20px;
    padding-bottom: 14px;
    padding-left: 10px;
    padding-right: 10px;
}
}
@media (min-width: 980px) {
  .nav-collapse.collapse {
    height: auto !important;
    overflow: visible !important;
  }
}
/* # Large desktops
-------------------------------------------------- */

@media (min-width: 768px) and (max-width: 1300px) {
  .nav_box{
    display: block;
    margin-left: 20px;
  }
}
/* # Tablets to regular desktops
-------------------------------------------------- */
@media (min-width: 768px) and (max-width: 979px) {
  #sidebar {
    width: 180px;
    overflow: visible;
    float: left;
    border-right: 1px solid #d1d1d1;
  }
  #sidebar ul#nav > li.current > a {
    border-right: 2px solid #0097e5;
  }
  #sidebar ul#nav > li.current > a > .arrow {
    right: 2px !important;
  }
  #sidebar ul#nav li a {
    font-size: 12px;
  }
  #sidebar ul#nav li ul.sub-menu {
    margin-left: 0px;
  }
  #sidebar ul#nav li ul.sub-menu li a {
    font-size: 11px;
  }
  #sidebar ul#nav li ul.sub-menu li ul.sub-menu {
    margin-left: 10px;
    margin-right: 0;
  }
  #divider {
    display: none;
  }
  .slimScrollBar,
  .slimScrollRail {
    display: none !important;
  }
  #content {
    margin-left: 181px;
    margin-top:60px;
  }
  /*[class*="span"], .uneditable-input[class*="span"], .row-fluid [class*="span"] {
  		display: block;
  		float: none;
  		width: 100%;
  		margin-left: 0;
  		-webkit-box-sizing: border-box;
  		-moz-box-sizing: border-box;
  		box-sizing: border-box;
  	}*/
  .crumbs .crumb-buttons > li > a > span {
    display: none;
  }
  .page-stats li:first-child {
    margin-left: 0;
    padding-left: 0;
  }
  .page-stats li .summary {
    margin-right: 5px;
  }
  .input-xxlarge {
    width: 100%;
    min-height: 30px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
}
/* # Phones to portrait tablets and narrow desktops
-------------------------------------------------- */
@media (max-width: 767px) {
  body {
    padding-left: 0px;
    padding-right: 0px;
  }
  html {
    overflow-x: hidden;
  }
  .container {
    padding: 0;
  }
  #content {
    margin-left: 0;
    margin-top: 55px;
  }
  .row {
    margin-left: -15px;
    margin-right: -15px;
  }
  .navbar .container {
    padding: 0;
    /* * * * * * * * * * * *
  			 * Dropdown
  			 * * * * * * * * * * * */
  
  }
  .navbar .container .nav > li.nav-toggle {
    display: none;
  }
  .navbar .container .navbar-brand {
    display: none;
  }
  .navbar .container .username {
    display: none;
  }
  .navbar .container .nav-left {
    margin-left: -2px;
  }
  .navbar .container .navbar-nav {
    float: left;
    margin-top: 0;
    margin-bottom: 0;
  }
  .navbar .container .navbar-nav.pull-right {
    float: right;
    width: auto;
  }
  .navbar .container .navbar-nav > li {
    float: left;
  }
  .navbar .container .nav > li > .dropdown-menu.extended {
    margin-right: -150px;
    width: 260px;
  }
  .navbar .container .nav > li > .dropdown-menu.extended > li > a {
    color: #6f6f6f;
    padding: 8px;
  }
  .navbar .container .nav > li > .dropdown-menu.extended > li > a:hover {
    background-color: #cec6c6;
    color: #fff;
  }
  .navbar .container .nav > li > .dropdown-menu.extended > li.footer > a {
    background-color: #f9f9f9;
  }
  #divider {
    display: none;
  }
  /* * * * * * * * * * * *
  	 * Project Switcher
  	 * * * * * * * * * * * */
  #project-switcher .project-list li {
    padding: 0 10px;
  }
  #container {
    position: relative;
    left: 0px;
   /* padding-left: 20px;
    padding-right: 20px;*/
  }
  #sidebar {
    position: fixed !important;
    overflow: hidden;
    overflow-y: auto;
    top: 0;
    left: -250px;
    width: 249px;
    height: 100%;
    z-index: 1;
    border-right: 1px solid #d1d1d1;
    -webkit-transition: left 0.3s ease;
    -moz-transition: left 0.3s ease;
    -o-transition: left 0.3s ease;
    transition: left 0.3s ease;
  }
  #sidebar ul#nav > li.current > a {
    border-right: 2px solid #668eb0;
  }
  #sidebar ul#nav li a {
    padding: 12px 15px;
  }
  #sidebar ul#nav li ul.sub-menu li a {
    padding: 10px 15px 10px 20px;
  }
  #container,
  .header,
  #sidebar {
    -webkit-transition: left 0.3s ease;
    -moz-transition: left 0.3s ease;
    -o-transition: left 0.3s ease;
    transition: left 0.3s ease;
  }
  .nav-open #container,
  .nav-open .header,
  .nav-open #sidebar {
    left: 250px;
    -webkit-transition: left 0.3s ease;
    -moz-transition: left 0.3s ease;
    -o-transition: left 0.3s ease;
    transition: left 0.3s ease;
  }
  .nav-open #sidebar {
    left: 0;
  }
  .crumbs .crumb-buttons > li > a > span {
    display: none;
  }
  .daterangepicker.dropdown-menu {
    min-width: 0px !important;
  }
  .daterangepicker.opensleft .calendar.right {
    float: none;
  }
  .left-box,
  .right-box {
    width: 100%;
    float: none;
  }
  .dual-control {
    width: auto;
    margin: 20px 0;
    position: static;
    left: 0;
  }
  .btn-group,
  .input-append,
  .input-prepend {
    white-space: normal;
  }
  .form-horizontal .form-actions {
    padding-left: 20px;
    padding-right: 20px;
  }
  .form-horizontal .form-group {
    margin-right: -15px;
    margin-left: -15px;
  }
  .input-width-large,
  .input-width-xlarge,
  .input-width-xxlarge {
    width: 100% !important;
    min-height: 30px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
  .select2-container-multi.full-width-fix .select2-search-field input {
    width: 100% !important;
  }
}
@media (max-width: 480px) {
  .page-header {
    text-align: center;
    margin: 0 auto;
  }
  .page-header .page-title {
    float: none;
  }
  .page-header .page-stats {
    display: none;
  }
  .crumbs {
    text-align: center;
  }
  .crumbs .breadcrumb {
    display: none;
  }
  .crumbs .crumb-buttons {
    float: none;
    margin: 0 auto;
    display: inline-block;
    height: 40px;
  }
  /* * * * * * * * * * * *
  	 * Login
  	 * * * * * * * * * * * */
  .login .logo {
    margin-top: 0 !important;
  }
  .login .box {
    width: 100% !important;
  }
  .login .single-sign-on {
    width: 90% !important;
  }
  .row-bg {
    background-color: #eaedf1;
  /*  border-top: 1px solid #d9d9d9;
    border-bottom: 1px solid #d9d9d9;*/
    margin: 0 -20px !important;
    padding-left: 5px;
    padding-right: 5px;
    padding-top:0px;
  /*  -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.15) inset;
    -moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.15) inset;*/
  /*  box-shadow: 0 0 1px rgba(0, 0, 0, 0.15) inset;*/
  }
}


/* 手机导航 */
.navbar{
  background-color: #f05d4b;
}
.header.navbar-fixed-top {
  position: fixed;
  z-index: 9999 !important;
  margin-top: 0;
}
.nav_wrap{
  top: 66px;
  z-index: 999 !important;
}
#content {
    margin-top: 25px;
}
.menu_left_box{
  padding-top: 15px;
  background:#323444;
}
.menu_left_box > li{
  height: 55px;
  line-height: 55px;
  background-position: 86% 21px;
}
.menu_left_box > li > a{
  height: 55px;
  line-height: 55px;
}
.menu_right_box{
  background:#272c38;
}
.VerticalMenu{
  top: 23px;
}
.VerticalMenu > div > div > div:first-child > i:last-child{
  right: 26px;
}
.VerticalMenu > div > div > div:first-child {
  height: 50px;
  line-height: 50px;
}

@media only screen and (max-width: 768px) { 
  .navbar .navbar-brand{
    display: block !important;
  }
  .navbar .navbar-brand{
    margin-top: 0;
    padding: 0!important;
  }
  .navbar .navbar-brand{
    display: block;
    width: 69px !important;
    margin-left: 25px;
    
  }
}