/*
 * Skin: Blue
 * ----------
 */
 .callout.callout-default {
	border-color:#e0e0e0 !important; 
	background-color: #f8fafc !important; 
	color: #444;
}

.callout.callout-code {
  border-color:#000000 !important; 
	background-color: #202022 !important; 
	color: #fefeff;
}
.dropdown-menu {
    -webkit-box-shadow: rgba(0, 0, 0, 0.04) 0px 8px 7px -3px, rgba(0, 0, 0, 0.02) 0px 8px 14px 2px, rgba(0, 0, 0, 0.03) 0px 5px 12px 5px;
    box-shadow: rgba(0, 0, 0, 0.04) 0px 8px 7px -3px, rgba(0, 0, 0, 0.02) 0px 8px 14px 2px, rgba(0, 0, 0, 0.03) 0px 5px 12px 5px;
    border-color: #dddddd;
}

.dropdown-menu li.header {
  display: block;
  padding: 3px 12px;
  font-weight:bold;
  font-size: 12px;
  line-height: 1.42857143;
  color: #777;
  white-space: nowrap;
  background-color: #f7f7f7;
}

 .skin-blue-light .main-header .navbar {
	background-color: #3c8dbc;
  }
  .skin-blue-light .main-header .navbar .nav > li > a {
	  font-size:15px;
	color: #ffffff;
  }
  .skin-blue-light .main-header .navbar .nav > li > a > span {
	font-size:14px;
	color: #ffffff;
}  
  .skin-blue-light .main-header .navbar .nav > li > a:hover,
  .skin-blue-light .main-header .navbar .nav > li > a:active,
  .skin-blue-light .main-header .navbar .nav > li > a:focus,
  .skin-blue-light .main-header .navbar .nav .open > a,
  .skin-blue-light .main-header .navbar .nav .open > a:hover,
  .skin-blue-light .main-header .navbar .nav .open > a:focus,
  .skin-blue-light .main-header .navbar .nav > .active > a {
	background: rgba(0, 0, 0, 0.1);
	color: #f6f6f6;
  }
  .skin-blue-light .main-header .navbar .sidebar-toggle {
	color: #ffffff;
  }
  .skin-blue-light .main-header .navbar .sidebar-toggle:hover {
	color: #f6f6f6;
	background: rgba(0, 0, 0, 0.1);
  }
  .skin-blue-light .main-header .navbar .sidebar-toggle {
	color: #fff;
  }
  .skin-blue-light .main-header .navbar .sidebar-toggle:hover {
	background-color: #367fa9;
  }
  @media (max-width: 767px) {
	.skin-blue-light .main-header .navbar .dropdown-menu li.divider {
	  background-color: rgba(255, 255, 255, 0.1);
	}
	.skin-blue-light .main-header .navbar .dropdown-menu li a {
	  color: #fff;
	}
	.skin-blue-light .main-header .navbar .dropdown-menu li a:hover {
	  background: #367fa9;
	}
  }
  .skin-blue-light .main-header .logo {
	color: #000000;
	border-bottom: 0 solid transparent;
	margin:0px; 
	padding:0px;
	text-align:center;
  height: 50px;
	}
	
	.skin-blue-light .main-header .logo-text {
		background: #367fa9;
		color:#fff;
		font-size:15px;
    font-weight:bold;
	}
  .skin-blue-light .main-header .logo-lg, .skin-blue-light .main-header .logo-mini {
    font-size:20px;
    background-color: #367fa9;
  } 


  
  .skin-blue-light .main-header .logo:hover {
  }
  .skin-blue-light .main-header li.user-header {
	background-color: #3c8dbc;
  }
  .skin-blue-light .content-header {
	background: transparent;
  }
  .skin-blue-light .wrapper,
  .skin-blue-light .main-sidebar,
  .skin-blue-light .left-side {
	background-color: #f9fafc;
  }
  .skin-blue-light .main-sidebar {
	/*border-right: 1px solid #d2d6de;*/
  padding-top:0px;
	}
	@media (max-width: 767px) {
		.main-sidebar {
			padding-top: 50px;
		}
	}
  .skin-blue-light .user-panel > .info,
  .skin-blue-light .user-panel > .info > a {
	color: #444444;
  }
  .skin-blue-light .sidebar-menu > li {
	-webkit-transition: border-left-color 0.3s ease;
	-o-transition: border-left-color 0.3s ease;
	transition: border-left-color 0.3s ease;
	}
  .skin-blue-light .sidebar-menu > li.header {
    color: #4b646f;
    background: #1a2226;
  }
  .skin-blue-light .sidebar-menu > li > a {
	border-left: 3px solid transparent;
	font-weight: 400;

  }
  .skin-blue-light .sidebar-menu > li:hover > a,
  .skin-blue-light .sidebar-menu > li.active > a {
	color: #fff;
  background: #1e282c;
  border-left-color:#3c8dbc;
  }
  .skin-blue-light .sidebar-menu > li.active {
	border-left-color: #3c8dbc;
  }
  .skin-blue-light .sidebar-menu > li.active > a {
	font-weight: 400;
  
  }
  .skin-blue-light .sidebar-menu > li > .treeview-menu {
    margin: 0 1px;
    background: #2c3b41;
    border:0px !important;
  }
  .skin-blue-light .sidebar a {
    color:#b8c7ce;
  }
  .skin-blue-light .sidebar a:hover {
	text-decoration: none;
  }

  .skin-blue-light .sidebar-menu .treeview-menu > li > a {
	color: #8aa4af;
	font-size:13px;
  }
  .skin-blue-light .sidebar-menu .treeview-menu > li.active > a,
  .skin-blue-light .sidebar-menu .treeview-menu > li > a:hover {
	color: #fff;
  }
  .skin-blue-light .sidebar-menu .treeview-menu > li.active > a {
	font-weight: 400;
  }
  .skin-blue-light .sidebar-menu .treeview-menu > li.caption {
	color: #000000;
	height:30px;
	line-height:30px;
	padding-left:18px;	
	font-size:13px;
  }

  .skin-blue-light .sidebar-form {
    border-radius: 3px;
    border: 1px solid #374850;
    margin: 10px 10px;
    }
  .skin-blue-light .sidebar-form input[type="text"],
  .skin-blue-light .sidebar-form .btn {
    box-shadow: none;
    background-color: #374850;
    border: 1px solid transparent;
    height: 35px;
  }
  .skin-blue-light .sidebar-form input[type="text"] {
	color: #666;
	border-top-left-radius: 2px;
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
	border-bottom-left-radius: 2px;
  }
  .skin-blue-light .sidebar-form input[type="text"]:focus,
  .skin-blue-light .sidebar-form input[type="text"]:focus + .input-group-btn .btn {
	background-color: #fff;
	color: #666;
  }
  .skin-blue-light .sidebar-form input[type="text"]:focus + .input-group-btn .btn {
	border-left-color: #fff;
  }
  .skin-blue-light .sidebar-form .btn {
	color: #999;
	border-top-left-radius: 0;
	border-top-right-radius: 2px;
	border-bottom-right-radius: 2px;
	border-bottom-left-radius: 0;
  }
  @media (min-width: 768px) {
	.skin-blue-light.sidebar-mini.sidebar-collapse .sidebar-menu > li > .treeview-menu {
	  border-left: 1px solid #d2d6de;
	}
  }
  .skin-blue-light .main-footer {
	border-top-color: #d2d6de;
  }
  .skin-blue.layout-top-nav .main-header > .logo {
	background-color: #3c8dbc;
	color: #ffffff;
	border-bottom: 0 solid transparent;
  }
  .skin-blue.layout-top-nav .main-header > .logo:hover {
	background-color: #3b8ab8;
  }

	/* customize*/
	.skin-blue-light .sidebar-menu > li > a {
		padding-top:8px;
		padding-bottom:8px;
	}

	.skin-blue-light .sidebar-menu li a span {
		font-size:14px;
	}

	.skin-blue-light .nav-tabs > li > a{
		padding:6px;
	}

  .skin-blue-light .main-sidebar, .skin-blue-light .left-side {
    background-color:#222d32
}

.skin-blue-light .sidebar-menu li>a>.pull-right-container {
  position: absolute;
  right: 10px;
  top: 50%;
  margin-top: -3px;
  }

  .nav-tabs-custom > .nav-tabs > li.header {
    line-height: 35px;
    padding: 0 10px;
    font-size: 16px;
    color:#444
  }

table .btn-flat {
  font-size:14px;
  padding:0px;
  color:#444;
}

.table-hover tr {
  cursor: pointer;
}

.mediaBox img {
  box-shadow: 0 0 6px #666;
  max-width:96%;
  min-width:80px;
}

div.dataTables_wrapper div.dataTables_info {
  padding-top: 12px !important;
  color:#777;
}

  table.dataTable.dtr-inline.collapsed>tbody>tr[role="row"]>td:first-child:before, table.dataTable.dtr-inline.collapsed>tbody>tr[role="row"]>th:first-child:before {
    background-color: #f9f9fe !important;
    color: #000 !important;
    box-shadow: 0 0 1px #444;
    border: 1px solid white;
  }

  table.dataTable.dtr-inline.collapsed>tbody>tr[role="row"]>td:first-child:before, table.dataTable.dtr-inline.collapsed>tbody>tr[role="row"]>th:first-child:before {
    font-size: 16px !important;
    line-height: 16px !important;
  }

.form-group{
	margin:7px;
}

.btn-primary {
	color: #fff;
	background-color: #337ab7;
	border-color: #2e6da4;
  }
  .btn-primary:focus,
  .btn-primary.focus {
	color: #fff;
	background-color: #286090;
	border-color: #122b40;
  }
  .btn-primary:hover {
	color: #fff;
	background-color: #286090;
	border-color: #204d74;
  }
  .btn-primary:active,
  .btn-primary.active,
  .open > .dropdown-toggle.btn-primary {
	color: #fff;
	background-color: #286090;
	border-color: #204d74;
  }
  .btn-primary:active:hover,
  .btn-primary.active:hover,
  .open > .dropdown-toggle.btn-primary:hover,
  .btn-primary:active:focus,
  .btn-primary.active:focus,
  .open > .dropdown-toggle.btn-primary:focus,
  .btn-primary:active.focus,
  .btn-primary.active.focus,
  .open > .dropdown-toggle.btn-primary.focus {
	color: #fff;
	background-color: #204d74;
	border-color: #122b40;
  }
  .btn-primary:active,
  .btn-primary.active,
  .open > .dropdown-toggle.btn-primary {
	background-image: none;
  }
  .btn-primary.disabled:hover,
  .btn-primary[disabled]:hover,
  fieldset[disabled] .btn-primary:hover,
  .btn-primary.disabled:focus,
  .btn-primary[disabled]:focus,
  fieldset[disabled] .btn-primary:focus,
  .btn-primary.disabled.focus,
  .btn-primary[disabled].focus,
  fieldset[disabled] .btn-primary.focus {
	background-color: #337ab7;
	border-color: #2e6da4;
  }
  .btn-primary .badge {
	color: #337ab7;
	background-color: #fff;
  }

  .box.box-primary {
	border-top-color: #3c8dbc;
  }

  .text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .text-primary {
	color: #337ab7;
  }
  a.text-primary:hover,
  a.text-primary:focus {
	color: #286090;
  }
   
/* for realtime box */
.box-small{
	margin-bottom:10px;
	border: 0px solid #d2d6de !important; 
}

.box-small .box-header{
	padding:2px;
	padding-bottom:5px;
	font-size:12px;
}

.box-small .box-header .box-tools{
	top:0px; 
}

.box-small .box-body{
	padding:4px;
}

.label-gray{
	background-color:#f3f3f3;
	color:#999999;
	font-size:9px;
	padding:4px;
	font-weight:normal;
}

.table>thead>tr>th, .table>tbody>tr>th, .table>tfoot>tr>th, .table>thead>tr>td, .table>tbody>tr>td, .table>tfoot>tr>td{
	padding: 6px;
}

.highlight {
	background-color:#e8eaec !important;
	color:#000000;
}

.tabs-xs li a{
	margin:0px !important;
	padding:3px !important;
	padding-left:4px !important;
	padding-right:4px !important;
}

/* keep the main panel tabs (live / history / dispatch / alerts) on one single
   line, no matter how long the translated text is. flex layout + the font size
   is reduced by fitPanelTabs() (panels.tpl.php) until every tab fits in the
   panel (no wrapping, no cut text).
   only #panel_tab_head is styled here on purpose: #expanels is the side panel of
   the realtime page and keeps its original bootstrap behaviour. */
#panel_tab_head{
	display:flex;
	flex-wrap:nowrap;
	white-space:nowrap;
}

#panel_tab_head>li{
	flex:1 1 auto;
	min-width:0;
	float:none !important;
	display:block;
	vertical-align:bottom;
	max-width:100% !important;
	overflow:hidden;
	white-space:nowrap;
	margin-right:0 !important;
}

/* the "more tabs" dropdown must not be squeezed/clipped, otherwise the arrow
   gets too small to click and its menu is cut off */
#panel_tab_head>li.dropdown{
	flex:0 0 auto;
	overflow:visible;
}

#panel_tab_head>li>a{
	display:block;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
	/* icon + text centered inside the tab, the flex items all have a different
	   width so a left aligned label looks uneven. */
	text-align:center;
	/* the tab font never grows above 12px, see fitPanelTabs() in panels.tpl.php.
	   set here as well, so the tabs do not flash at the bootstrap default (14px)
	   before the script runs. */
	font-size:12px;
}

/* the dropdown toggle only holds the arrow, keep its full width/height */
#panel_tab_head>li.dropdown>a{
	overflow:visible;
}

.tabs-sm li a{
	margin:0px !important;
	padding:4px !important;
	padding-left:6px !important;
	padding-right:6px !important;
	padding-bottom:8px !important;
}

.table-xs>thead>tr>th, .table-small>tbody>tr>th, .table-small>tfoot>tr>th{
	background-color:#f9f9f9;
}
.table-xs>thead>tr>th, .table-small>tbody>tr>th, .table-small>tfoot>tr>th, .table-small>thead>tr>td, .table-small>tbody>tr>td, .table-small>tfoot>tr>td{
	padding: 3px;
	font-weight:normal;
}

.input-xs, .input-xs input, .input-xs select{
	padding:2px;
	padding-left:4px;
	height:24px;
	font-weight: normal;
	font-size:11px;
}

.box-header h4{
	font-size:14px;
	margin:3px;
}

.modal-header{
	margin:0px;
	padding:6px;
	background-color: #307095;
  border-radius: 7px 7px 0 0;
  color:white;
}

.modal-header h4{
	font-size:12px;
	color:white;
}

.modal-page{
	background: #ecf0f5
}

.modal-content {
  border-radius: 7px;
}

.navbar-nav > .notifications-menu > .dropdown-menu,
.navbar-nav > .messages-menu > .dropdown-menu,
.navbar-nav > .tasks-menu > .dropdown-menu {
  width: 280px;
  padding: 0 0 0 0;
  margin: 0;
  top: 100%;
}
.navbar-nav > .notifications-menu > .dropdown-menu > li,
.navbar-nav > .messages-menu > .dropdown-menu > li,
.navbar-nav > .tasks-menu > .dropdown-menu > li {
  position: relative;
}
.navbar-nav > .notifications-menu > .dropdown-menu > li.header,
.navbar-nav > .messages-menu > .dropdown-menu > li.header,
.navbar-nav > .tasks-menu > .dropdown-menu > li.header {
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  background-color:#edf0f4;
  padding: 6px 8px;
  border-bottom: 1px solid #f4f4f4;
  color: #000000;
  font-size: 14px;
}
.navbar-nav > .notifications-menu > .dropdown-menu > li.footer > a,
.navbar-nav > .messages-menu > .dropdown-menu > li.footer > a,
.navbar-nav > .tasks-menu > .dropdown-menu > li.footer > a {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
  font-size: 12px;
  background-color: #fff;
  padding: 7px 10px;
  border-bottom: 1px solid #eeeeee;
  color: #444 !important;
  text-align: center;
}

.login-page{
	background: url('') no-repeat center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	background-size: cover;
	-o-background-size: cover;
	background-color:#e2e6ee;
}

.login-text-shadow{
	color:#000000 !important;
	text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2);
}

.login-logo {
  font-size:24px;
}

.login-shadow {
  border-radius:4px;
	box-shadow: rgba(0, 0, 0, 0.08) 0px 8px 7px -3px, rgba(0, 0, 0, 0.04) 0px 8px 14px 2px, rgba(0, 0, 0, 0.06) 0px 5px 12px 5px;
  opacity: 0.9;
}

.main-sidebar {
  box-shadow:0 5px 6px rgba(0,0,0,.4),0 3px 3px rgba(0,0,0,.3)!important;
}

.login-caption {
  background-color: #f7f7f9;
  border-bottom:1px solid #eee;padding:10px;
}

.padding-0{
    padding-right:0;
    padding-left:0;
}

.padding-2{
    padding:2px !important;
}

.padding-r2{
    padding-right:2 !important;
}

.padding-r8{
    padding-right:8px !important;
}

.margin-0{
	margin:0px !important;
}

.margin-2{
	margin:2px;
}

.margin-r2{
	margin-right:2px;
}

.margin-b2{
	margin-bottom:2px;
}

.margin-b8{
	margin-bottom:8px !important;
}

.margin-4{
	margin:4px;
}

.margin-r4{
	margin-right:4px;
}

.margin-r8{
	margin-right:8px;
}

.padding-4{
	padding:4px !important;;
}

.margin-8{
	margin:8px;
}

.row-xs-padding{
  margin-right:-4px;
  margin-left:-4px;
}

.row-xs-padding div[class^="col-"], .row-xs div[class*=" col-"]{
  padding:0px !important;
  padding-right:4px !important;
  padding-left:4px !important;
  margin:0px !important;
  margin-bottom:0px !important;
}

.row-xs-padding .row{
  padding:0px;
  margin:0px;
  margin-left:-4px;
  margin-right:-4px;
}


.row-xs{
	padding:4px;
}

.row-xs div[class^="col-"], .row-xs div[class*=" col-"]{
	padding:0px !important;
	padding-right:2px !important;
	padding-left:2px !important;
	margin:0px !important;
	margin-bottom:0px !important;
}

.row-xs .row{
	padding:0px;
	margin:0px;
	margin-left:-2px;
	margin-right:-2px;
}

.row-sm{
	padding:8px;
}

.row-sm div[class^="col-"], .row-sm div[class*=" col-"]{
	padding:0px !important;
	padding-right:3px !important;
	padding-left:3px !important;
	margin:0px !important;
	margin-bottom:4px !important;
}

.row-sm .row{
	padding:0px;
	margin:0px;
	margin-left:-3px;
	margin-right:-3px;
}

.row-md{
	padding:16px;
}

.row-md div[class^="col-"], .row-md div[class*=" col-"]{
	padding:0px !important;
	padding-right:8px !important;
	padding-left:8px !important;
	margin:0px !important;
	margin-bottom:10px !important;
}

.row-md .row{
	padding:0px;
	margin:0px;
	margin-left:-8px;
	margin-right:-8px;
}

.col-xs{
	padding:0px !important;
	padding-left:1px !important;
	padding-right:1px !important;
	margin:0px !important;
	margin-bottom:2px !important;
}

.content-wrapper{
	/*padding-top:50px !important;*/
}

.label-inline{
	font-weight:normal;padding:2px;padding-left:4px;padding-right:4px;margin-left:2px;	
	font-size:9px;
}

.label {
  font-weight:normal;
}

#_popupModal .modeless{
    top:0;
    left:0;
    bottom:auto;
    right:auto;
    margin-left:-300px;
}

#_popupModal .modal {
  background: none !important;
}

.select2-container--default .select2-selection--single,
.select2-selection .select2-selection--single {
	padding: 3px 8px;
	padding-right:12px;
  height: 30px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 24px;
}

.select2-container .select2-selection--multiple {
	min-height:30px;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background-color: transparent !important;
  border: 0px solid transparent  !important;
  padding: 1px 10px  !important;
	color: #337ab7 !important;
	max-width:170px !important;
	overflow:hidden !important;
	white-space:nowrap !important;
	text-overflow:ellipsis !important;
  border-radius: 1 !important;	
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  margin-right: 5px !important;
  color: rgba(0, 0, 0, 0.7) !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
  color: #f39c12 !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__clear {
  margin-top: 5px;
  margin-right: 3px;
}

.group-bg{
	background-color:#f6f8fa !important;
	font-weight:600;
}

/**********************************/

html body,table,form,tr,td,th,span,p,div,input,a,select,textarea,bgsound,b,caption,optgroup,ul,li
{
	direction: [rtl];
	font-size:12px;
	/*font-family: Helvetica Neue, Helvetica, Arial, sans-serif !important;*/
}

* { outline:none};

iframe {border:none;}



.style-btn{
	margin:4px;width:20px;height:20px;
}
.control_area{
	background-color:#FFFFFF; color:#999999; border:1px solid #cccccc; width:100%;padding:1px;opacity: 1;	
	filter : progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=100,finishOpacity=100);
}

.control_area i{
	color:#555555;
}

.control_area a{
	padding:4px ;
	display:inline-block ;
	font-size:14px ;
	color:#333333 !important;
}
.control_area a:hover{
	background-color:#eeeeee;
}
.control_area img{
	width:14px;
}
.control_area input{
	vertical-align:middle;
}
.control_btn{color:#555555; margin:1px; padding:1px; border:1px solid #f0f0f0; background-color:#f8f8f8;line-height:24px; }
.ad_panel_btn{padding-left:3px;padding-right:3px;background:white;height:15px;position:absolute;opacity:0.8; filter:alpha(opacity=80);border-color:#888888; color:#1692cc;border-width:1px; border-style:solid;cursor:hand;}
.buttonSkinA_bak{color:#ffffff;background:#1692cc;border-top:1px solid #efefef;border-left:1px solid #efefef;border-right:1px solid #888888;border-bottom:1px solid #888888;margin:0px;padding:0px;height:22px;padding-left:4px; padding-right:4px; text-decoration:none;}
.buttonSkinA{color:#000000;background:#f0f0f0;border:1px solid #dddddd;margin:0px;padding:2px;height:21px;padding-left:6px; padding-right:6px; text-decoration:none;}
.buttonSkinB{color:#212121;background:#f0f0f0;border:1px solid #dddddd;margin:0px;padding:2px;height:21px;padding-left:6px; padding-right:6px; text-decoration:none;}

.buttonSkinB_bak{color:#212121;background:#E1E8E1;border-top:1px solid #efefef;border-left:1px solid #efefef;border-right:1px solid #888888;border-bottom:1px solid #888888;margin:0px;padding:0px;height:22px;padding-left:4px; padding-right:4px; text-decoration:none;}

.row_item{background-color:#ffffff; font-weight:bold}
.row_item_light{background-color:#fafafa; }
.row_item_deep{background-color:#ffffff; font-weight:bold; color:#000000;border-bottom:2px solid #1692cc; margin-top:5px; margin-bottom:0px; padding-bottom:1px;}

.html_div
{
border-color:#86B9EA;border-width:1px;border-style:solid;padding:2px;height:150px;font-size:10px;
}

.split_bar{
margin:1px;margin-top:200px;width:4px;height:200px;cursor:hand;border:1px solid #dddddd;
background:#f0f0f0;
}

.split_bar_hover{
margin:1px;margin-top:200px;width:4px;height:200px;cursor:hand;border:1px solid #dddddd;
background-color:#1692cc;
}

.split_barH{
margin:1px;height:4px;width:100%;cursor:hand;border:1px solid #eeeeee;
background:#f0f0f0;
}

.split_barH_hover{
margin:1px;height:4px;width:100%;cursor:hand;border:1px solid #eeeeee;
background-color:#1692cc;
}

.scroll_div{
	border-color:#dddddd; border-width:0px; border-style:solid;overflow-x:hidden;overflow-y:auto;
}

.scroll_div input{
	margin:2px;margin-left:10px;
}

.scroll_div .sub_title{
	font-weight:bold; background-color:#f6f8f9; border: 1px solid #eeeeee; border-bottom:1px solid #8cba51; padding:2px;margin-top:4px;
}

.tracker_list{
	border-color:#dddddd; border-width:1px; border-style:solid;width:100%;height:100%; overflow-x:hidden;overflow-y:auto;
	outline:0px;
	
}

.tracker_list div{
	cursor:default;
	padding:1px;
	padding-left:2px;
	padding-right:2px;
}

.tracker_list li{
	line-height:26px;
	color:#000000;
	list-style-type:none;
}

.tracker_list_row{
	border-bottom: 1px solid #f7f7f7;
}

.tracker_list .sel{
	border-bottom: 1px solid #f7f7f7;
	background-color:#f5f5f5;
}

.tracker_list .title{
	background-color:#eeeeee;
	color:#000000;
	padding:2px;
	font-weight:bold;
	margin-top:1px;
	line-height:20px;
}

.tracker_list .name{
	width:190px;
	float:left;
	 overflow:hidden;
	 white-space:nowrap;
	 text-overflow:ellipsis
}

.tracker_list .name .main{
	margin:0px;
	padding:0px;
	line-height:18px;
	font-weight:500;
	overflow:hidden;
	white-space:nowrap;
	text-overflow:ellipsis
}

.tracker_list .name .sub{
	padding:0px;
	margin:0px;
	color:#505254;
	line-height:12px;
	font-size:8px;
	font-weight:normal;
	-webkit-transform : scale(0.9,0.9);
	-webkit-margin-start: -8px;
}

.tracker_list .check{
	float:left;
	/*background-color:red;*/
	margin-left:2px;
	margin-right:4px;
	margin-top:3px;
}

.tracker_list .ico{
	float:left;
	margin-right:4px;
	padding-top:2px;
}

.tracker_list .ico img{
	width:24px;
	height:24px;
	overflow:hidden;	
}

.tracker_list .ico_list{
	float:right;
	margin-left:2px;
	color:#777777;
}

.tracker_list .ico_list img{
}

.io {
	font-weight:normal;
	padding:0px;
	padding-left:1px;
	padding-right:1px;
	margin:1px;
	font-size:8px;
	-webkit-transform:scale(0.5,0.5);
}

.percent {
	padding:1px;margin-right:4px;margin-top:5px;float:left;border:1px solid #bfbfbf;
	height:8px;font-size:0px;
}

.info_head{
	float:left;
	background-color:#f5f5f5;
	border-bottom:1px solid #f0f0f0;
	margin-bottom:2px;
	width:100%;
	padding:4px;
}

.posinfo_area li .info_sub_title{
	float:left;
	background-color:#f5f5f5;
	padding:2px;
	border-bottom:1px solid #f0f0f0;
	margin-bottom:3px;
	margin-top:5px;
	width:98%;
	color:#000000;
	font-size:12px;
	font-weight:bold;
}

.info_sub_title_ico
{
	float:right;
	margin-right:8px;
	line-height:100%;
	vertical-align:middle;
}

.info_sub_title_ico img{
	width:16px;
	vertical-align:middle;
}

.info_sub_title_ico input{
	vertical-align:middle;
}


.info_head #info_img{
	float:left; font-size:14px;font-weight:bold;height:32px;width:32px;
	margin-right:4px;
	border:1px solid #eeeeee;
	overflow:hidden;
}

.info_head #info_img img{
	max-height:32px;
	max-width:32px;
}

.info_head #info_title{
	font-size:13px;
	margin:1px;
	padding:0px;
	 overflow:hidden;
	 white-space:nowrap;
	 text-overflow:ellipsis;
	 color:#000000;
	 line-height:18px;
	 max-width: 130px;
}

.info_head #info_body{
	float:left;
}

.info_head #info_uin{
	font-size:10px;
	color:#444444;
	margin:0px;
	line-height:10px;
}

.info_head #photo_id{
	width:43px; 
	height:32px;
	float:right;
	border:#eeeeee 1px solid ;
	margin-right:32px;
  text-align:center;
}

#photo_id img {
  max-width:100%;
  max-height:100%;
}

.ad{
	float:left;
	border: 1px solid #efefef;
	margin:2px;
	margin-top:4px;
	cursor:default;
	width:30%;
  max-width:80px;
}

.ad_md{
  max-width:164px;
  width:164px;
}

.ad_lg{
  max-width:248px;
  width:248px;
}

.ad_title{
	background:#f9fafc;
	font-weight:500;
	 overflow:hidden;
	 white-space:nowrap;
	 text-overflow:ellipsis;
	 border-top: 2px solid transparent;
	 padding-left:4px;
	 padding-right:4px;
}

.ad_value{
	 overflow:hidden;
	 white-space:nowrap;
	 text-overflow:ellipsis;
	 font-weight:300;
	 padding-left:4px;
	 padding-right:4px;
   min-height:17px;
}

.shadow {
	border-radius:3px;
	box-shadow: rgba(0, 0, 0, 0.04) 0px 8px 7px -3px, rgba(0, 0, 0, 0.02) 0px 8px 14px 2px, rgba(0, 0, 0, 0.03) 0px 5px 12px 5px;
}

.shadow-text {
  text-shadow: rgb(0, 0, 0, 0.2) 1px 1px 4px;
}

#search_display{
	border-color:#dddddd; border-width:1px; border-style:solid;width:99%;_height:400px;min-height:100px;height:100%;overflow-x:hidden; overflow-y:scroll;cursor:default;
}

.alert_dialog {
  opacity: 0.9;
  filter: Alpha(Opacity=90);
	background-color:#fff9f9;
	position:absolute;
}

.alert_dialog .ui-dialog-titlebar {
	color:#ffffff;
	font-weight:normal;
	background:#d9534f/*nohue*/;
	padding:4px;
	text-align: left;
}

.alert_dialog .ui-dialog-title{
	color:#ffffff;
	font-weight:normal;
}

.alert_dialog .ui-dialog-titlebar-close { 
	width: 14px !important; 
	height: 14px !important; 
	top: 60% !important;
	float:right;
}

.alert_dialog .ui-dialog-content{
	padding:4px;
}

.ui-effects-transfer { border: 2px solid rgb(255,115,115); }

.info_dialog{
  opacity: 0.8;
  filter: Alpha(Opacity=80);
  border: 1px solid #999999;
  background-color:#fffec6;
  margin:0px;
  padding:1px;
}
.info_dialog .ui-dialog-titlebar {
     background : transparent;
	 border : 0 none;
	 height:0px;
	line-height:0px;
	display:none;
}
.info_dialog .ui-dialog-titlebar-close { 
	display:none;
}

.info_dialog .ui-dialog-content{
	font-size:12px;
	text-align:left;
	padding:4px;
}




.default_dialog {
	opacity: 0.95;
	filter: Alpha(Opacity=95);
	background-color:#ffffff;
	position:absolute;
}

.default_dialog .ui-dialog-titlebar {
	color:#ffffff;
	font-weight:normal;
	background:#3c4045;
	padding:4px;
	text-align: left;
  cursor:move;
}

.default_dialog .ui-dialog-title{
	color:#ffffff;
	font-weight:normal;
}

.default_dialog .ui-dialog-titlebar-close { 
	width: 14px !important; 
	height: 14px !important; 
	top: 60% !important;
	float:right;
}

.default_dialog .ui-dialog-titlebar-close:before {
  float: right;
  position: relative;
  right: -4px;
  top: 1px;
  content: ' ';
  height: 1px;
  width: 8px;
  background-color: #333;
}


.default_dialog .ui-dialog-content{
	padding:4px;
}


#location div{
	margin:5px;
}

#alert_anchor{
	display:none;
	-webkit-transform:scale(0.8);
	-webkit-border-radius:30%;
	float:right;background-color:rgb(255,115,115); color:white;line-height:10px;padding:1px;padding-left:4px;padding-right:4px;text-align:center;font-size:8px;
	display:inline;position:absolute;margin-left:-8px;margin-top:-4px;
	opacity: 0.9;filter: alpha(opacity=90);
}

.number_anchor{
	-webkit-transform:scale(0.8);
	-webkit-border-radius:30%;
	float:right;background-color:#777; color:white;line-height:10px;padding:1px;padding-left:4px;padding-right:4px;text-align:center;font-size:11px;
	display:inline;position:absolute;margin-left:-8px;margin-top:-2px;
	opacity: 0.9;filter: alpha(opacity=90);
}

.uins_selection div{
	padding:2px;
}

#select_uin_info{
	overflow:hidden;
	text-overflow:ellipsis;
	height:38px;
}

.status_bar
{
	float:left;
	height:18px;
	font-size:0px;
	margin:0px;
	padding:0px;
}

.status_tip
{
	background-color:#f5f5f5;display:none;text-align:left;
}

.status_content div{
	color:#555555 !important; 
	/*font-size:9px !important;	*/
	font-size:9px;
}

.text-alert {
	color:#dd4b39/*nohue*/!important;
	font-weight:bold;
}

.single-line{
	overflow:hidden;
	white-space:nowrap;
	text-overflow:ellipsis;
	width:100%;
}

/* checkbox */
/*
 * author:evanliu2968
 * github:https://github.com/EvanLiu2968/el-checkbox
 * sample:https://www.cssscript.com/demo/csscss3-custom-checkboxes-radios-switches-el-checkbox/
 * lincense:MIT
 */
/*checkbox radio component*/
.el-radio,
.el-checkbox {
  position: relative;
  font-size: 100%;
}
label.el-radio,
label.el-checkbox {
  display: block;
  cursor: pointer;
}
.el-radio > input[type="radio"],
.el-checkbox > input[type="checkbox"] {
  display: none;
}
.el-radio > input[type="radio"][disabled],
.el-checkbox > input[type="checkbox"][disabled] {
  cursor: not-allowed;
}
.el-radio > input[type="radio"] + .el-radio-style,
.el-checkbox > input[type="checkbox"] + .el-checkbox-style {
  position: relative;
  display: inline-block;
  width: 1.4em;
  height: 1.4em;
  vertical-align: middle;
  cursor: pointer;
}
.el-radio > input[type="radio"] + .el-radio-style:hover:before,
.el-checkbox > input[type="checkbox"] + .el-checkbox-style:hover:before {
  border-color: #20a0ff;
}
.el-radio > input[type="radio"] + .el-radio-style:before,
.el-checkbox > input[type="checkbox"] + .el-checkbox-style:before {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-block;
  width: 1.4em;
  height: 1.4em;
  content: '';
  border: 1px solid #C0CCDA;
}
.el-radio > input[type="radio"] + .el-radio-style:after,
.el-checkbox > input[type="checkbox"] + .el-checkbox-style:after {
  position: absolute;
  display: none;
  content: '';
}
.el-radio > input[type="radio"][disabled] + .el-radio-style,
.el-checkbox > input[type="checkbox"][disabled] + .el-checkbox-style {
  cursor: not-allowed;
  color: #D3DCE6;
}
.el-radio > input[type="radio"][disabled] + .el-radio-style:hover,
.el-radio > input[type="radio"][disabled] + .el-radio-style:before,
.el-radio > input[type="radio"][disabled] + .el-radio-style:after,
.el-checkbox > input[type="checkbox"][disabled] + .el-checkbox-style:hover,
.el-checkbox > input[type="checkbox"][disabled] + .el-checkbox-style:before,
.el-checkbox > input[type="checkbox"][disabled] + .el-checkbox-style:after {
  cursor: not-allowed;
}
.el-radio > input[type="radio"][disabled] + .el-radio-style:hover:before,
.el-checkbox > input[type="checkbox"][disabled] + .el-checkbox-style:hover:before {
  border: 1px solid #D3DCE6;
  animation-name: none;
}
.el-radio > input[type="radio"][disabled] + .el-radio-style:before,
.el-checkbox > input[type="checkbox"][disabled] + .el-checkbox-style:before {
  border-color: #D3DCE6;
}
.el-radio > input[type="radio"]:checked + .el-radio-style:before,
.el-checkbox > input[type="checkbox"]:checked + .el-checkbox-style:before {
  animation-name: none;
}
.el-radio > input[type="radio"]:checked + .el-radio-style:after,
.el-checkbox > input[type="checkbox"]:checked + .el-checkbox-style:after {
  display: block;
}
.el-radio > input[type="radio"] + .el-radio-style:before {
  border-radius: 50%;
}
.el-radio > input[type="radio"] + .el-radio-style:after {
  top: 0.4em;
  left: 0.4em;
  width: 0.6em;
  height: 0.6em;
  border-radius: 50%;
  background: #20a0ff;
}
.el-radio > input[type="radio"]:checked + .el-radio-style:before {
  border: 1px solid #20a0ff;
}
.el-radio > input[type="radio"]:checked[disabled] + .el-radio-style:before {
  border: 1px solid #b0d7f5;
}
.el-radio > input[type="radio"]:checked[disabled] + .el-radio-style:after {
  background: #b0d7f5;
}
.el-checkbox > input[type="checkbox"] + .el-checkbox-style:before {
  border-radius: 3px;
}
.el-checkbox > input[type="checkbox"] + .el-checkbox-style:after {
  top: 0.15em;
  left: 0.5em;
  box-sizing: border-box;
  width: 0.4em;
  height: 0.85em;
  transform: rotate(45deg);
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
}
.el-checkbox > input[type="checkbox"]:checked + .el-checkbox-style:before {
  border: #20a0ff;
  background: #20a0ff;
}
.el-checkbox > input[type="checkbox"]:checked[disabled] + .el-checkbox-style:before {
  border: #b0d7f5;
  background: #b0d7f5;
}
/*blue theme*/
.el-radio.el-radio-blue > input[type="radio"] + label:hover:before,
.el-checkbox.el-checkbox-blue > input[type="checkbox"] + label:hover:before,
.el-radio.el-radio-blue > input[type="radio"]:checked + label:before,
.el-checkbox.el-checkbox-blue > input[type="checkbox"]:checked + label:before {
  border-color: #20a0ff;
}
.el-checkbox.el-checkbox-blue > input[type="checkbox"]:checked + label:before,
.el-radio.el-radio-blue > input[type="radio"] + label:after {
  background: #20a0ff;
}
.el-radio.el-radio-blue > input[type="radio"][disabled] + label:hover:before,
.el-checkbox.el-checkbox-blue > input[type="checkbox"][disabled] + label:hover:before {
  border-color: #D3DCE6;
}
.el-checkbox.el-checkbox-blue > input[type="checkbox"]:checked[disabled] + label:before,
.el-radio.el-radio-blue > input[type="radio"]:checked[disabled] + label:before {
  border-color: #b0d7f5;
}
.el-checkbox.el-checkbox-blue > input[type="checkbox"][disabled]:checked + label:before,
.el-radio.el-radio-blue > input[type="radio"]:checked[disabled] + label:after {
  background: #b0d7f5;
}
/*green theme*/
.el-radio.el-radio-green > input[type="radio"] + label:hover:before,
.el-checkbox.el-checkbox-green > input[type="checkbox"] + label:hover:before,
.el-radio.el-radio-green > input[type="radio"]:checked + label:before,
.el-checkbox.el-checkbox-green > input[type="checkbox"]:checked + label:before {
  border-color: #13ce66;
}
.el-checkbox.el-checkbox-green > input[type="checkbox"]:checked + label:before,
.el-radio.el-radio-green > input[type="radio"] + label:after {
  background: #13ce66;
}
.el-radio.el-radio-green > input[type="radio"][disabled] + label:hover:before,
.el-checkbox.el-checkbox-green > input[type="checkbox"][disabled] + label:hover:before {
  border-color: #D3DCE6;
}
.el-checkbox.el-checkbox-green > input[type="checkbox"]:checked[disabled] + label:before,
.el-radio.el-radio-green > input[type="radio"]:checked[disabled] + label:before {
  border-color: #a1efc4;
}
.el-checkbox.el-checkbox-green > input[type="checkbox"][disabled]:checked + label:before,
.el-radio.el-radio-green > input[type="radio"]:checked[disabled] + label:after {
  background: #a1efc4;
}
/*red theme*/
.el-radio.el-radio-red > input[type="radio"] + label:hover:before,
.el-checkbox.el-checkbox-red > input[type="checkbox"] + label:hover:before,
.el-radio.el-radio-red > input[type="radio"]:checked + label:before,
.el-checkbox.el-checkbox-red > input[type="checkbox"]:checked + label:before {
  border-color: #ff4949;
}
.el-checkbox.el-checkbox-red > input[type="checkbox"]:checked + label:before,
.el-radio.el-radio-red > input[type="radio"] + label:after {
  background: #ff4949;
}
.el-radio.el-radio-red > input[type="radio"][disabled] + label:hover:before,
.el-checkbox.el-checkbox-red > input[type="checkbox"][disabled] + label:hover:before {
  border-color: #D3DCE6;
}
.el-checkbox.el-checkbox-red > input[type="checkbox"]:checked[disabled] + label:before,
.el-radio.el-radio-red > input[type="radio"]:checked[disabled] + label:before {
  border-color: #f9b3b3;
}
.el-checkbox.el-checkbox-red > input[type="checkbox"][disabled]:checked + label:before,
.el-radio.el-radio-red > input[type="radio"]:checked[disabled] + label:after {
  background: #f9b3b3;
}
/*yellow theme*/
.el-radio.el-radio-yellow > input[type="radio"] + label:hover:before,
.el-checkbox.el-checkbox-yellow > input[type="checkbox"] + label:hover:before,
.el-radio.el-radio-yellow > input[type="radio"]:checked + label:before,
.el-checkbox.el-checkbox-yellow > input[type="checkbox"]:checked + label:before {
  border-color: #f7ba2a;
}
.el-checkbox.el-checkbox-yellow > input[type="checkbox"]:checked + label:before,
.el-radio.el-radio-yellow > input[type="radio"] + label:after {
  background: #f7ba2a;
}
.el-radio.el-radio-yellow > input[type="radio"][disabled] + label:hover:before,
.el-checkbox.el-checkbox-yellow > input[type="checkbox"][disabled] + label:hover:before {
  border-color: #D3DCE6;
}
.el-checkbox.el-checkbox-yellow > input[type="checkbox"]:checked[disabled] + label:before,
.el-radio.el-radio-yellow > input[type="radio"]:checked[disabled] + label:before {
  border-color: #fbeac1;
}
.el-checkbox.el-checkbox-yellow > input[type="checkbox"][disabled]:checked + label:before,
.el-radio.el-radio-yellow > input[type="radio"]:checked[disabled] + label:after {
  background: #fbeac1;
}
/*switch component*/
.el-switch,
.el-switch-style,
.el-switch-style:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.el-switch {
  display: inline-block;
  font-size: 100%;
  height: 1.6em;
  position: relative;
}
.el-switch .el-switch-style {
  height: 1.6em;
  left: 0;
  background: #C0CCDA;
  -webkit-border-radius: 0.8em;
  border-radius: 0.8em;
  display: inline-block;
  position: relative;
  top: 0;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  width: 3em;
  cursor: pointer;
}
.el-switch .el-switch-style:before {
  display: block;
  content: '';
  height: 1.4em;
  position: absolute;
  width: 1.4em;
  background-color: #fff;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  left: 0.1em;
  top: 0.1em;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.el-switch > input[type="checkbox"] {
  display: none;
}
.el-switch > input[type="checkbox"][disabled] + .el-switch-style {
  cursor: not-allowed;
  background-color: #D3DCE6;
}
.el-switch > input[type="checkbox"]:checked + .el-switch-style {
  background-color: #20a0ff;
}
.el-switch > input[type="checkbox"]:checked + .el-switch-style:before {
  left: 50%;
}
.el-switch > input[type="checkbox"]:checked[disabled] + .el-switch-style {
  background-color: #b0d7f5;
}
.el-switch.el-switch-blue > input[type="checkbox"]:checked + .el-switch-style {
  background-color: #20a0ff;
}
.el-switch.el-switch-blue > input[type="checkbox"]:checked[disabled] + .el-switch-style {
  background-color: #b0d7f5;
}
.el-switch.el-switch-green > input[type="checkbox"]:checked + .el-switch-style {
  background-color: #00a65a;
}
.el-switch.el-switch-green > input[type="checkbox"]:checked[disabled] + .el-switch-style {
  background-color: #a1efc4;
}
.el-switch.el-switch-red > input[type="checkbox"]:checked + .el-switch-style {
  background-color: #ff4949;
}
.el-switch.el-switch-red > input[type="checkbox"]:checked[disabled] + .el-switch-style {
  background-color: #f9b3b3;
}
.el-switch.el-switch-yellow > input[type="checkbox"]:checked + .el-switch-style {
  background-color: #f7ba2a;
}
.el-switch.el-switch-yellow > input[type="checkbox"]:checked[disabled] + .el-switch-style {
  background-color: #fbeac1;
}
/*define size*/
.el-radio.el-radio-sm,
.el-checkbox.el-checkbox-sm,
.el-switch.el-switch-sm {
  font-size: 85%;
}
.el-radio.el-radio-lg,
.el-checkbox.el-checkbox-lg,
.el-switch.el-switch-lg {
  font-size: 125%;
}

.section {
	border-top: 1px solid #eeeeee;
	border-bottom: 1px solid #eeeeee;
	font-weight:bold;
	font-size:13px;
	margin:6px;
	margin-top:16px;
	margin-bottom:0px;
	padding:6px;
	padding-left:0px;
	background-color: #f9f9f9;
	text-align:center;
}

.section2{
  border-bottom: 1px solid #eeeeee;
  padding:4px;
  padding-top:8px;
  font-weight: bold;
}

.tooltip-inner {
	min-width: 200px !important;
	text-align: left !important;
}


#sidebar-panels {
	position: static;
	left: 0;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
  }
  
  #panels-toggle{
	  display:none;
  }
  #wrapper{
	  position:static;
  }
  #panels{
	  width:100%;
  }
  
  @media(max-width:769px) {
	#map_zone {
	  margin-left: 0;
	}
	#panels-toggle{
		display:block;
	}
	#sidebar-panels{
		position:relative;
		width:0;
	}
  }

.pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover, .pagination>.active>span, .pagination>.active>span:focus, .pagination>.active>span:hover {
    z-index: 3;
    color: #000;
    cursor: default;
    background-color: #eaebec !important;
    border-color: #ddd !important;
}
.nav-tabs-custom>.nav-tabs>li.active {
    border-top-color: #3c8dbc;
}

.nav-default>li.active {
  border-top-color: #d2d6de !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    margin-top: 3px !important;
}

/*
*   CSS file with Bootstrap grid classes for screens bigger than 1600px. Just add this file after the Bootstrap CSS file and you will be able to juse col-xl, col-xl-push, hidden-xl, etc.
*
*   Author: Marc van Nieuwenhuijzen
*   Company: WebVakman
*   Site: WebVakman.nl
*
*/

@media (min-width: 1200px) and (max-width: 1599px) {
    .hidden-lg {
        display: none !important;
    }
}


.visible-xl-block,
.visible-xl-inline,
.visible-xl-inline-block,
.visible-xl{
    display: none !important;
}



@media (min-width: 1600px) {
    .container {
        width: 1570px;
    }

    .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12 {
        float: left;
    }

    .col-xl-12 {
        width: 100%;
    }

    .col-xl-11 {
        width: 91.66666667%;
    }

    .col-xl-10 {
        width: 83.33333333%;
    }

    .col-xl-9 {
        width: 75%;
    }

    .col-xl-8 {
        width: 66.66666667%;
    }

    .col-xl-7 {
        width: 58.33333333%;
    }

    .col-xl-6 {
        width: 50%;
    }

    .col-xl-5 {
        width: 41.66666667%;
    }

    .col-xl-4 {
        width: 33.33333333%;
    }

    .col-xl-3 {
        width: 25%;
    }

    .col-xl-2 {
        width: 16.66666667%;
    }

    .col-xl-1 {
        width: 8.33333333%;
    }

    .col-xl-pull-12 {
        right: 100%;
    }

    .col-xl-pull-11 {
        right: 91.66666667%;
    }

    .col-xl-pull-10 {
        right: 83.33333333%;
    }

    .col-xl-pull-9 {
        right: 75%;
    }

    .col-xl-pull-8 {
        right: 66.66666667%;
    }

    .col-xl-pull-7 {
        right: 58.33333333%;
    }

    .col-xl-pull-6 {
        right: 50%;
    }

    .col-xl-pull-5 {
        right: 41.66666667%;
    }

    .col-xl-pull-4 {
        right: 33.33333333%;
    }

    .col-xl-pull-3 {
        right: 25%;
    }

    .col-xl-pull-2 {
        right: 16.66666667%;
    }

    .col-xl-pull-1 {
        right: 8.33333333%;
    }

    .col-xl-pull-0 {
        right: auto;
    }

    .col-xl-push-12 {
        left: 100%;
    }

    .col-xl-push-11 {
        left: 91.66666667%;
    }

    .col-xl-push-10 {
        left: 83.33333333%;
    }

    .col-xl-push-9 {
        left: 75%;
    }

    .col-xl-push-8 {
        left: 66.66666667%;
    }

    .col-xl-push-7 {
        left: 58.33333333%;
    }

    .col-xl-push-6 {
        left: 50%;
    }

    .col-xl-push-5 {
        left: 41.66666667%;
    }

    .col-xl-push-4 {
        left: 33.33333333%;
    }

    .col-xl-push-3 {
        left: 25%;
    }

    .col-xl-push-2 {
        left: 16.66666667%;
    }

    .col-xl-push-1 {
        left: 8.33333333%;
    }

    .col-xl-push-0 {
        left: auto;
    }

    .col-xl-offset-12 {
        margin-left: 100%;
    }

    .col-xl-offset-11 {
        margin-left: 91.66666667%;
    }

    .col-xl-offset-10 {
        margin-left: 83.33333333%;
    }

    .col-xl-offset-9 {
        margin-left: 75%;
    }

    .col-xl-offset-8 {
        margin-left: 66.66666667%;
    }

    .col-xl-offset-7 {
        margin-left: 58.33333333%;
    }

    .col-xl-offset-6 {
        margin-left: 50%;
    }

    .col-xl-offset-5 {
        margin-left: 41.66666667%;
    }

    .col-xl-offset-4 {
        margin-left: 33.33333333%;
    }

    .col-xl-offset-3 {
        margin-left: 25%;
    }

    .col-xl-offset-2 {
        margin-left: 16.66666667%;
    }

    .col-xl-offset-1 {
        margin-left: 8.33333333%;
    }

    .col-xl-offset-0 {
        margin-left: 0;
    }

    .visible-xl {
        display: block !important;
    }

    table.visible-xl {
        display: table;
    }

    tr.visible-xl {
        display: table-row !important;
    }

    th.visible-xl, td.visible-xl {
        display: table-cell !important;
    }

    .visible-xl-block {
        display: block !important;
    }

    .visible-xl-inline {
        display: inline !important;
    }

    .visible-xl-inline-block {
        display: inline-block !important;
    }

    .hidden-xl {
        display: none !important;
    }
}

/* xl end */

.content-header>h1 {
  font-size: 20px !important; 
  }

  .profile-user-img {
    margin: 0 auto;
    width: 100px;
    padding: 8px;
    border: 2px solid #e2e6ee;
    }

.bg-gray-light {
  background-color: #f8fafc;
}

#main-nav{
	background-color: #222d32;
	border-top:1px solid #222d32;
  opacity: 0.9;

	position:fixed;
	bottom:0px;
	width:100%;
	height:60px;

	text-align:center;
	z-index:900;
	overflow:hidden;

  box-shadow: -5px 2px 8px rgba(0,0,0,0.1), -3px 2px 8px rgba(0,0,0,0.2)!important;
}

#main-nav .btn {
  background-color: transparent;
  border: 0px;
  height:60px;
  min-width: 60px;
  min-height:60px;
  width:20%;
  margin:0px;
  padding: 12px 5px;
  color:#f0f0f0;

	overflow:hidden;
	white-space:nowrap;
	text-overflow:ellipsis;  
}

#main-nav .btn .fa {
  font-size:18px;
  padding-bottom:4px;
}

#main-nav .sel{
  color: #3c8dbc;
}

@media (max-width: 767px) {
  .nav-bar {
    padding-bottom:60px !important;
  }
}

@media (min-width: 767px) {
  .main-footer {
    display:none;
  }
}


.big-caption {
  width:64px;height:64px;padding:10px;font-size:40px;
  color: #fff;
  background-color: #337ab7;  
}

.panel-tab-content {
  height: calc(100% - 25px);
  height: -o-calc(100% - 25px); /* opera */
  height: -webkit-calc(100% - 25px); /* google, safari */
  height: -moz-calc(100% - 25px); /* firefox */
}

.status-prompt {
  padding-left:4px;
  overflow: hidden;
  max-width:300px;
}

.status-prompt div, .status-prompt i{
  font-size:13px;
  padding:2px;
}

.status-prompt .caption{
  font-size:16px;
  font-weight:bold;
  margin-bottom:4px;
}

.replay{
	border-color:#dddddd; border-width:0px; border-style:solid;overflow-x:hidden;overflow-y:auto;
}

.replay div {
  padding:2px;
  color:#4a4a4a;
}

.replay .container {
  padding:4px;
  border-bottom: 1px solid #f7f7f7;
  width:100%;
}

.replay .highlight {
	background-color:#e8eaec !important;
	color:#000000;
}

.jGrowl {
  font-family: inherit;
}

.jGrowl-notification, .jGrowl-closer {
  width:200px;
  box-shadow: rgba(0, 0, 0, 0.04) 0px 8px 7px -3px, rgba(0, 0, 0, 0.02) 0px 8px 14px 2px, rgba(0, 0, 0, 0.03) 0px 5px 12px 5px;
}

.jGrowl.top-right {
  right: 0px;
  top: 48px;
}

.jGrowl .dark {
  background-color: #242d31;
  color: 	#fff;
}

.jGrowl .light {
  background-color: #edf0f4;
  color: 	#000;
  border-top:2px solid #3c8dbc;
}

.jGrowl .danger {
  background-color: #dd4b39;
  color: 	#fff;
}

.jGrowl .warning {
  background-color: #f39c12;
  color: 	#fff;
}

.jGrowl .success {
  background-color: #00a65a;
  color: 	#fff;
}

.jGrowl .alert-box {
  background-color:#fff9f9;
  color:#000;
  padding:0px;
 }

 .jGrowl .alert-box a {
   color:#3c8dbc;
 }

.jGrowl .alert-box .jGrowl-message {
  padding: 				6px;
  color: 					#000;
}

.jGrowl .alert-box .jGrowl-header {
  background:#d9534f/*nohue*/;
  padding: 				5px;
  color:#fff;
  font-weight:normal;
}

.jGrowl .alert-box .jGrowl-close {
  color:#fff;
}

/*Select2 ReadOnly Start*/
select[readonly].select2-hidden-accessible + .select2-container {
  pointer-events: none;
  touch-action: none;
}

select[readonly].select2-hidden-accessible + .select2-container .select2-selection {
  background: #eee;
  box-shadow: none;
}

select[readonly].select2-hidden-accessible + .select2-container .select2-selection__arrow, select[readonly].select2-hidden-accessible + .select2-container .select2-selection__clear {
  display: none;
}

/*Select2 ReadOnly End*/

.timeline-10px:before { 
  left: 21px; 
}

.timeline-10px>li {
  margin-bottom: 10px;
}

.timeline-10px>li>.timeline-item { 
  margin-left: 50px; 
  margin-right:4px;
}

.vert-center {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

.ui-dialog {
	position: absolute;
	top: 0;
	left: 0;
	padding: 0.0em;
	outline: 0;
  border-radius: 3px;
}

#photo_id_big .carousel-inner {
  background-color: #222d36;
}

.videoContainer {
  background-color:#222224;
}

/* ==========================================================================
   Refinement pass, kept close to the existing skin
   --------------------------------------------------------------------------
   The palette below follows what this file already uses, it does not replace
   it: the dark sidebar (#222d32 / #1e282c / #2c3b41 with #b8c7ce text), the
   blue header (#3c8dbc) and the light content (#f9fafc / #ecf0f5) all stay.
   Only the things that did not agree with each other are aligned:
   - one blue for links, focus rings and selection instead of four
   - hairline borders in a neutral grey instead of the blue-grey #d2d6de
   - text greys on a single scale
   - one radius and one shadow scale for cards and inputs
   - hover states derived from the base colour, so nothing jumps out
   Appearance only: no width, height, padding, margin, font-size, line-height,
   position, display or translate is set below.
   ========================================================================== */
:root {
  --rf-blue: #3c8dbc;
  --rf-blue-dark: #367fa9;
  --rf-blue-deep: #286090;
  --rf-blue-wash: rgba(60, 141, 188, 0.08);
  --rf-blue-wash-strong: rgba(60, 141, 188, 0.16);
  --rf-side: #222d32;
  --rf-side-raised: #1e282c;
  --rf-side-sunken: #1a2226;
  --rf-side-child: #263238;
  --rf-side-line: rgba(255, 255, 255, 0.06);
  --rf-side-text: #b8c7ce;
  --rf-side-text-dim: #8aa4af;
  /* the icon of a menu row sits one step behind its label */
  --rf-side-icon: #7f9aa8;
  /* a near white canvas: a grey page next to white cards reads as haze */
  --rf-canvas: #f7f8fa;
  --rf-surface: #ffffff;
  --rf-surface-muted: #f9fafb;
  /* one visible hairline, a second even lighter one for inner dividers */
  --rf-line: #dfe3e8;
  --rf-line-soft: #edf0f3;
  /* text dark enough to stay crisp on white, still softer than #000 */
  --rf-text: #2f3b45;
  --rf-text-secondary: #56646f;
  --rf-text-muted: #7d8a95;
  --rf-radius: 4px;
  --rf-radius-lg: 6px;
  /* a single, close shadow: a wide soft one greys the whole page */
  --rf-shadow: 0 1px 2px rgba(34, 45, 50, 0.06);
  --rf-shadow-hover: 0 2px 8px rgba(34, 45, 50, 0.1);
  --rf-ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---- top bar: the blue stays, the shade is levelled ---- */
.skin-blue-light .main-header .navbar {
  background-color: var(--rf-blue);
}
.skin-blue-light .main-header li.user-header {
  background-color: var(--rf-blue-dark);
}
/* hover on the blue bar: the darker blue of the skin, not a black veil that
   turned grey on the light blue */
.skin-blue-light .main-header .navbar .nav > li > a:hover,
.skin-blue-light .main-header .navbar .nav > li > a:active,
.skin-blue-light .main-header .navbar .nav > li > a:focus,
.skin-blue-light .main-header .navbar .nav .open > a,
.skin-blue-light .main-header .navbar .nav .open > a:hover,
.skin-blue-light .main-header .navbar .nav .open > a:focus,
.skin-blue-light .main-header .navbar .nav > .active > a,
.skin-blue-light .main-header .navbar .sidebar-toggle:hover {
  background-color: var(--rf-blue-deep);
  color: #ffffff;
}
/* ---- sidebar: keep the dark column, calm the surfaces and the text ---- */
.skin-blue-light .main-sidebar,
.skin-blue-light .left-side {
  background-color: var(--rf-side);
}
.skin-blue-light .sidebar-menu > li.header {
  background: var(--rf-side-sunken);
  color: var(--rf-side-text-dim);
  border-bottom: 1px solid var(--rf-side-line);
}
.skin-blue-light .sidebar-menu > li > a {
  border-left-color: transparent;
  transition: background-color 0.2s var(--rf-ease), color 0.2s var(--rf-ease), border-left-color 0.2s var(--rf-ease);
}
.skin-blue-light .sidebar a {
  color: var(--rf-side-text);
}
/* the icon stays one step behind the label: same row, but the label leads */
.skin-blue-light .sidebar-menu > li > a > .fa,
.skin-blue-light .sidebar-menu > li > a > .glyphicon,
.skin-blue-light .sidebar-menu > li > a > .ion {
  color: var(--rf-side-icon);
  transition: color 0.2s var(--rf-ease);
}
.skin-blue-light .sidebar-menu > li:hover > a > .fa,
.skin-blue-light .sidebar-menu > li.active > a > .fa {
  color: var(--rf-side-text);
}
.skin-blue-light .sidebar-menu > li:hover > a {
  background: rgba(255, 255, 255, 0.05);
  color: #ffffff;
  border-left-color: rgba(60, 141, 188, 0.55);
}
/* the selected row: a blue wash on the dark surface plus the blue edge, so the
   current place is readable at a glance and not only by a 3px line */
.skin-blue-light .sidebar-menu > li.active > a {
  background: rgba(60, 141, 188, 0.16);
  color: #ffffff;
  border-left-color: var(--rf-blue);
}
.skin-blue-light .sidebar-menu > li.active,
.skin-blue-light .sidebar-menu > li:hover {
  border-left-color: var(--rf-blue);
}
.skin-blue-light .sidebar-menu > li > .treeview-menu {
  background: var(--rf-side-child);
  border-radius: 0;
}
.skin-blue-light .sidebar-menu .treeview-menu > li > a {
  color: var(--rf-side-text-dim);
  transition: background-color 0.2s var(--rf-ease), color 0.2s var(--rf-ease);
}
.skin-blue-light .sidebar-menu .treeview-menu > li > a:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #ffffff;
}
.skin-blue-light .sidebar-menu .treeview-menu > li.active > a {
  color: #ffffff;
  background: rgba(60, 141, 188, 0.22);
}
.skin-blue-light .sidebar-menu .treeview-menu > li.caption {
  color: var(--rf-side-text-dim);
}
.skin-blue-light.sidebar-mini.sidebar-collapse .sidebar-menu > li > .treeview-menu {
  background: var(--rf-side-child);
  border-left-color: rgba(255, 255, 255, 0.08);
}
/* the collapsed rail shows the icon only, so it takes the brighter tone */
.skin-blue-light.sidebar-mini.sidebar-collapse .sidebar-menu > li > a > .fa {
  color: var(--rf-side-text);
}
.skin-blue-light.sidebar-mini.sidebar-collapse .sidebar-menu > li.active > a > .fa {
  color: #ffffff;
}
.skin-blue-light .sidebar-form {
  border-color: var(--rf-side-child);
  border-radius: var(--rf-radius);
}
.skin-blue-light .sidebar-form input[type="text"],
.skin-blue-light .sidebar-form .btn {
  background-color: var(--rf-side-child);
  border-color: transparent;
}
.skin-blue-light .sidebar-form input[type="text"] {
  color: var(--rf-side-text);
}
.skin-blue-light .sidebar-form input[type="text"]:focus,
.skin-blue-light .sidebar-form input[type="text"]:focus + .input-group-btn .btn {
  background-color: var(--rf-side-raised);
  color: #ffffff;
}
.skin-blue-light .sidebar-form input[type="text"]:focus + .input-group-btn .btn {
  border-left-color: var(--rf-side-raised);
}
.skin-blue-light .sidebar-form .btn {
  color: var(--rf-side-text-dim);
}

/* ---- content canvas ---- */
.content-wrapper,
.right-side {
  background-color: var(--rf-canvas) !important;
}
.skin-blue-light .main-footer {
  background: transparent;
  border-top-color: var(--rf-line);
  color: var(--rf-text-muted);
}
.content-header > h1 {
  color: var(--rf-text);
  font-weight: 600;
}
.content-header > h1 > small {
  color: var(--rf-text-muted);
}
/* ---- cards: a hairline does the separating, the shadow only lifts them ---- */
.box {
  background-color: var(--rf-surface);
  border-color: var(--rf-line);
  border-radius: var(--rf-radius-lg);
  box-shadow: var(--rf-shadow);
  transition: box-shadow 0.2s var(--rf-ease), border-color 0.2s var(--rf-ease);
}
.box:hover {
  box-shadow: var(--rf-shadow-hover);
  border-color: #d3d9e0;
}
.box.box-small {
  box-shadow: none;
}
.box.box-small:hover {
  box-shadow: none;
}
.box-header {
  border-bottom-color: var(--rf-line-soft);
}
.box-header .box-title,
.box-header h4 {
  color: var(--rf-text);
  font-weight: 600;
}
.box-header.with-border {
  border-bottom-color: var(--rf-line-soft);
}
.box-footer {
  background-color: var(--rf-surface-muted);
  border-top-color: var(--rf-line-soft);
  color: var(--rf-text-secondary);
  border-radius: 0 0 var(--rf-radius-lg) var(--rf-radius-lg);
}
.box.box-primary,
.box.box-info,
.box.box-success,
.box.box-warning,
.box.box-danger {
  border-top-color: var(--rf-blue);
}
.box-tools .btn-box-tool {
  color: var(--rf-text-muted);
  border-radius: var(--rf-radius);
  transition: background-color 0.18s var(--rf-ease), color 0.18s var(--rf-ease);
}
.box-tools .btn-box-tool:hover {
  background-color: var(--rf-blue-wash);
  color: var(--rf-blue);
}
.info-box {
  background: var(--rf-surface);
  border: 1px solid var(--rf-line);
  border-radius: var(--rf-radius);
  box-shadow: none;
  transition: border-color 0.18s var(--rf-ease), box-shadow 0.18s var(--rf-ease);
}
.info-box:hover {
  border-color: var(--rf-blue);
  box-shadow: var(--rf-shadow);
}
.info-box-number {
  color: var(--rf-text);
}
.info-box-text {
  color: var(--rf-text-secondary);
}
/* ---- buttons: the existing blue, one radius, calm hover ---- */
.btn {
  border-radius: var(--rf-radius);
  transition: background-color 0.18s var(--rf-ease), border-color 0.18s var(--rf-ease), box-shadow 0.18s var(--rf-ease);
}
.btn-primary {
  background-color: var(--rf-blue);
  border-color: var(--rf-blue-dark);
  color: #ffffff;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary.focus,
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
  background-color: var(--rf-blue-deep);
  border-color: var(--rf-blue-deep);
  color: #ffffff;
}
.btn-primary.disabled,
.btn-primary[disabled],
fieldset[disabled] .btn-primary {
  background-color: var(--rf-blue);
  border-color: var(--rf-blue-dark);
}
.btn-default {
  background-color: var(--rf-surface);
  border-color: var(--rf-line);
  color: var(--rf-text-secondary);
}
.btn-default:hover,
.btn-default:focus,
.btn-default:active,
.btn-default.active {
  background-color: var(--rf-surface-muted);
  border-color: var(--rf-blue);
  color: var(--rf-blue);
}
.btn-link,
a {
  color: var(--rf-blue);
}
.btn-link:hover,
a:hover,
a:focus {
  color: var(--rf-blue-deep);
}

/* ---- form controls: white field, hairline, blue focus ring ---- */
.form-control {
  border-color: var(--rf-line);
  border-radius: var(--rf-radius);
  background-color: var(--rf-surface);
  color: var(--rf-text);
  transition: border-color 0.18s var(--rf-ease), box-shadow 0.18s var(--rf-ease);
}
.form-control:focus {
  border-color: var(--rf-blue);
  box-shadow: 0 0 0 3px var(--rf-blue-wash-strong);
}
.input-group-addon {
  background-color: var(--rf-surface-muted);
  border-color: var(--rf-line);
  color: var(--rf-text-muted);
  border-radius: var(--rf-radius);
}
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  border-color: var(--rf-line);
  border-radius: var(--rf-radius);
  background-color: var(--rf-surface);
}
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple {
  border-color: var(--rf-blue);
  box-shadow: 0 0 0 3px var(--rf-blue-wash-strong);
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: var(--rf-blue);
  color: #ffffff;
}
.select2-dropdown {
  border-color: var(--rf-line);
  border-radius: var(--rf-radius);
  box-shadow: var(--rf-shadow-hover);
}
/* ---- menus, tabs, tables: the same blue for every selection ---- */
.dropdown-menu {
  border-color: var(--rf-line);
  border-radius: var(--rf-radius);
}
.dropdown-menu > li > a {
  color: var(--rf-text);
  border-radius: var(--rf-radius);
  transition: background-color 0.16s var(--rf-ease), color 0.16s var(--rf-ease);
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
  background-color: var(--rf-blue-wash);
  color: var(--rf-blue);
}
.dropdown-menu li.header {
  background-color: var(--rf-surface-muted);
  color: var(--rf-text-muted);
}
.dropdown-menu .divider {
  background-color: var(--rf-line-soft);
}
.nav-tabs-custom {
  background: var(--rf-surface);
  border-radius: var(--rf-radius-lg);
  box-shadow: var(--rf-shadow);
  border: 1px solid var(--rf-line);
}
/* the line under the tabs is drawn per tab, not as the strip's own border: a
   border on the list sits on the boundary with the panel and gets repainted
   every time a tab fades in, which reads as a flicker. a bottom border on the
   tabs that are not selected is the same line for the eye, and the selected tab
   simply has none, so nothing has to cover anything */
.nav-tabs-custom > .nav-tabs {
  border-bottom-color: transparent;
}
.nav-tabs-custom > .nav-tabs > li:not(.active) > a {
  border-bottom-color: var(--rf-line-soft);
}
.nav-tabs > li > a {
  color: var(--rf-text-secondary);
  border-radius: var(--rf-radius) var(--rf-radius) 0 0;
  transition: background-color 0.18s var(--rf-ease), color 0.18s var(--rf-ease);
}
.nav-tabs > li > a:hover {
  color: var(--rf-blue);
  border-color: transparent;
  border-bottom-color: var(--rf-line-soft);
}
/* the active tab: no line under it, an opaque white background so it reads as
   part of the panel below, and a light hairline on both sides to show where it
   starts and ends (bootstrap pulls the tab over the line with a negative
   margin, the white background does the same job here) */
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus,
.nav-tabs-custom > .nav-tabs > li.active > a,
.nav-tabs-custom > .nav-tabs.pull-right > li:first-of-type.active > a {
  color: var(--rf-blue);
  background-color: var(--rf-surface);
  border-color: transparent;
  border-bottom-color: transparent;
  border-left-color: var(--rf-line-soft);
  border-right-color: var(--rf-line-soft);
}
/* the content below starts on the same white, so the opened tab reads as one
   piece with its panel instead of a line being drawn under it twice */
.nav-tabs-custom > .tab-content {
  background-color: var(--rf-surface);
}
/* the first and the last tab have nothing to divide from on that side */
.nav-tabs-custom > .nav-tabs > li:first-of-type.active > a {
  border-left-color: transparent;
}
.nav-tabs-custom > .nav-tabs > li:last-of-type.active > a {
  border-right-color: transparent;
}
.nav-pills > li > a {
  border-radius: var(--rf-radius);
  color: var(--rf-text-secondary);
}
.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus {
  background-color: var(--rf-blue);
  color: #ffffff;
}
.table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th {
  background-color: var(--rf-surface-muted);
  color: var(--rf-text-secondary);
  border-bottom-color: var(--rf-line);
}
.table > thead > tr > td,
.table > tbody > tr > td,
.table > tfoot > tr > td {
  border-top-color: var(--rf-line-soft);
  color: var(--rf-text);
}
.table-striped > tbody > tr:nth-of-type(odd) {
  background-color: var(--rf-surface-muted);
}
.table-hover > tbody > tr:hover {
  background-color: var(--rf-blue-wash);
}
.table-bordered,
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > th,
.table-bordered > tfoot > tr > th,
.table-bordered > thead > tr > td,
.table-bordered > tbody > tr > td,
.table-bordered > tfoot > tr > td {
  border-color: var(--rf-line-soft);
}
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  border-color: var(--rf-line);
  border-radius: var(--rf-radius);
  transition: border-color 0.18s var(--rf-ease), box-shadow 0.18s var(--rf-ease);
}
.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus {
  border-color: var(--rf-blue);
  box-shadow: 0 0 0 3px var(--rf-blue-wash-strong);
  outline: none;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
  border-radius: var(--rf-radius) !important;
  color: var(--rf-text-secondary) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: var(--rf-blue-wash) !important;
  border-color: transparent !important;
  color: var(--rf-blue) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--rf-blue) !important;
  border-color: var(--rf-blue) !important;
  color: #ffffff !important;
}
.dataTables_wrapper .dataTables_info {
  color: var(--rf-text-muted);
}
.pagination > li > a,
.pagination > li > span {
  border-color: var(--rf-line);
  border-radius: var(--rf-radius);
  color: var(--rf-text-secondary);
  transition: background-color 0.16s var(--rf-ease), color 0.16s var(--rf-ease);
}
.pagination > li > a:hover,
.pagination > li > span:hover {
  background-color: var(--rf-blue-wash);
  border-color: var(--rf-line);
  color: var(--rf-blue);
}
.pagination > .active > a,
.pagination > .active > a:hover,
.pagination > .active > span {
  background-color: var(--rf-blue);
  border-color: var(--rf-blue);
  color: #ffffff;
}

/* ---- status colours: keep the existing meaning, level the saturation ---- */
.label {
  border-radius: var(--rf-radius);
}
.label-primary,
.label-info {
  background-color: var(--rf-blue);
}
.label-success {
  background-color: #3fa45b;
}
.label-warning {
  background-color: #e8a33d;
}
.label-danger {
  background-color: #d9534f;
}
.label-gray {
  background-color: var(--rf-surface-muted);
  color: var(--rf-text-muted);
}
.callout,
.alert {
  border-radius: var(--rf-radius);
}
.alert {
  border-color: var(--rf-line);
  color: var(--rf-text);
}
.alert-success {
  background-color: #f0f9f2;
  border-color: #cfe9d6;
}
.alert-info {
  background-color: #f0f6fa;
  border-color: #cfe0ec;
}
.alert-warning {
  background-color: #fdf7ec;
  border-color: #f2e2c4;
}
.alert-danger {
  background-color: #fdf2f2;
  border-color: #f0d4d3;
}
.progress {
  border-radius: var(--rf-radius);
  box-shadow: none;
}
.modal-content {
  border-radius: var(--rf-radius-lg);
  box-shadow: 0 8px 30px rgba(34, 45, 50, 0.14);
}
.modal-header,
.modal-footer {
  border-color: var(--rf-line-soft);
}
.highlight {
  background-color: #fff8e1 !important;
  color: #6b5b2e;
}

/* ==========================================================================
   Global search in the top bar
   --------------------------------------------------------------------------
   The search form lives in the sidebar since the skin was written, so finding a
   vehicle meant opening the sidebar first. It is moved into the empty middle of
   the bar and posts to the same /search?q=, the sidebar form is left in place
   for the collapsed rail.
   These are new elements, no existing box is moved or resized.
   ========================================================================== */
.main-header .navbar .navbar-search {
  position: relative;
  display: block;
  float: left;
  /* the field and the icons next to it share one bar: the icons give back their
     side padding below, the field takes that width back so it reads as a search
     box instead of a narrow stub */
  width: 240px;
  max-width: 30vw;
  margin: 9px 0 0 12px;
  line-height: 1;
}
/* the bar entries were 15px apart on each side for a text label; these carry an
   icon only, so the same padding leaves a lot of dead space between them */
.main-header .navbar-custom-menu .navbar-nav > li > a {
  padding-left: 10px;
  padding-right: 10px;
}
.main-header .navbar .navbar-search-input {
  width: 100%;
  height: 32px;
  padding: 0 34px 0 32px;
  border: 0;
  border-radius: 980px;
  background-color: rgba(255, 255, 255, 0.16);
  color: #ffffff;
  font-size: 13px;
  font-family: inherit;
  outline: none;
  transition: background-color 0.2s var(--rf-ease), box-shadow 0.2s var(--rf-ease);
}
.main-header .navbar .navbar-search-input::placeholder {
  color: rgba(255, 255, 255, 0.72);
}
.main-header .navbar .navbar-search-input:hover {
  background-color: rgba(255, 255, 255, 0.22);
}
.main-header .navbar .navbar-search-input:focus {
  background-color: #ffffff;
  color: var(--rf-text);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.28);
}
.main-header .navbar .navbar-search-input:focus::placeholder {
  color: var(--rf-text-muted);
}
.main-header .navbar .navbar-search-icon {
  position: absolute;
  top: 9px;
  left: 12px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.8);
  pointer-events: none;
  transition: color 0.2s var(--rf-ease);
}
.main-header .navbar .navbar-search-input:focus ~ .navbar-search-icon {
  color: var(--rf-text-muted);
}
.main-header .navbar .navbar-search-btn {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 980px;
  background: transparent;
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  font-size: 12px;
  transition: background-color 0.18s var(--rf-ease), color 0.18s var(--rf-ease);
}
.main-header .navbar .navbar-search-btn:hover {
  background-color: rgba(0, 0, 0, 0.12);
  color: #ffffff;
}
.main-header .navbar .navbar-search-input:focus ~ .navbar-search-btn {
  color: var(--rf-blue);
}
.main-header .navbar .navbar-search-input:focus ~ .navbar-search-btn:hover {
  background-color: var(--rf-blue-wash);
}
/* the "more" menu is a list of small groups: a title followed by its choices.
   a bare grey line of text did not read as a group, so each title gets its own
   band (tinted background, hairlines above and below) and the groups no longer
   run into each other. same idea as the header row of the old single menus */
.main-header .navbar-custom-menu .dropdown-menu .menu .dropdown-header {
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  color: var(--rf-text-secondary);
  background-color: var(--rf-surface-muted);
  border-top: 1px solid var(--rf-line-soft);
  border-bottom: 1px solid var(--rf-line-soft);
}
.main-header .navbar-custom-menu .dropdown-menu .menu .dropdown-header .fa {
  margin-right: 7px;
  color: var(--rf-text-muted);
}
/* the first group starts right under the menu header, no double line */
.main-header .navbar-custom-menu .dropdown-menu > li:first-child .menu .dropdown-header {
  border-top-color: transparent;
}
/* the menu has to be wide enough for four flag columns, 280px only fits one
   short name per row */
.main-header .navbar-custom-menu > .navbar-nav > .notifications-menu > .dropdown-menu {
  min-width: 420px;
}
/* a group whose list can grow (the language list) is laid out as a grid, four
   names to a row, the way the colours above it are laid out. a grid reads at a
   glance and fits without a scroll box; the skin caps every .menu at 200px and
   scrolls it, that cap is lifted here so nothing is cut off */
.main-header .navbar-custom-menu > .navbar-nav > .notifications-menu > .dropdown-menu > li > .menu.lang-grid {
  max-height: none;
  overflow: visible;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2px;
  padding: 4px 8px 8px;
}
.main-header .navbar-custom-menu > .navbar-nav > .notifications-menu > .dropdown-menu > li > .menu.lang-grid > li > a {
  display: flex;
  align-items: center;
  padding: 5px 6px;
  border-radius: 4px;
  color: var(--rf-text);
  font-size: 12px;
}
.main-header .navbar-custom-menu > .navbar-nav > .notifications-menu > .dropdown-menu > li > .menu.lang-grid > li > a:hover {
  background-color: var(--rf-blue-wash);
  color: var(--rf-blue);
}
.main-header .navbar-custom-menu > .navbar-nav > .notifications-menu > .dropdown-menu > li > .menu.lang-grid .lang-name {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
/* on a phone the menu can not be 420 wide, three columns fit there */
@media (max-width: 767px) {
  .main-header .navbar-custom-menu > .navbar-nav > .notifications-menu > .dropdown-menu {
    min-width: 0;
    width: calc(100vw - 24px);
  }
  .main-header .navbar-custom-menu > .navbar-nav > .notifications-menu > .dropdown-menu > li > .menu.lang-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.main-header .navbar-custom-menu .dropdown-menu .menu > li > a {
  padding: 6px 14px 6px 32px;
  border-radius: 0;
  color: var(--rf-text);
}
/* the links a phone only finds here carry their icon inline, not as a header */
.main-header .navbar-custom-menu .dropdown-menu .menu > li > a .fa {
  margin-right: 7px;
  color: var(--rf-text-muted);
}
/* the country flag of a language row: a fixed slot so the names line up even
   when a language has no flag and falls back to the globe icon */
.main-header .navbar-custom-menu .dropdown-menu .menu > li > a .lang-flag {
  display: inline-block;
  width: 16px;
  margin-right: 7px;
  font-size: 13px;
  line-height: 1;
  text-align: center;
  vertical-align: -1px;
}
.main-header .navbar-custom-menu .dropdown-menu .menu > li > a:hover .fa {
  color: var(--rf-blue);
}
.main-header .navbar-custom-menu .dropdown-menu .menu > li > a:hover {
  background-color: var(--rf-blue-wash);
  color: var(--rf-blue);
}
@media (max-width: 767px) {
  .main-header .navbar .navbar-search {
    display: none;
  }
}
@media (min-width: 768px) and (max-width: 1199px) {
  /* a laptop keeps every control, the field gives a little width back */
  .main-header .navbar .navbar-search {
    width: 180px;
    margin-left: 8px;
  }
}

/* ==========================================================================
   The site name on the phone bar
   --------------------------------------------------------------------------
   The desktop bar keeps the name exactly as the skin paints it: a blue chip on
   the white plate. On a phone the same chip covered the small plate and was the
   only thing visible, so there it is dropped to plain light text that sits on
   the blue bar instead.
   ========================================================================== */
@media (max-width: 767px) {
  .skin-blue-light .main-header .navbar .logo-mini.visible-xs-inline,
  .skin-blue-light .main-header .navbar .logo-mini.visible-xs-inline .logo-text {
    background: transparent !important;
    box-shadow: none;
    text-shadow: none;
    color: rgba(255, 255, 255, 0.92) !important;
    font-weight: 600;
  }
  /* the toggle next to it is a 50px icon button; the name has to sit on the
     same centre line. the 50px line-height of the link only reaches the text
     node, an inline block inside it needs its own */
  .skin-blue-light .main-header .navbar .logo-mini.visible-xs-inline {
    display: inline-block;
    vertical-align: top;
    line-height: 50px;
    height: 50px;
  }
  .skin-blue-light .main-header .navbar .logo-mini.visible-xs-inline .logo-text {
    display: inline;
    line-height: 50px;
    vertical-align: top;
    font-size: 15px;
    /* the glyph sits a shade low against the icon of the toggle next to it,
       nudge it up by eye. relative offset, so the line box is untouched */
    position: relative;
    top: -1px;
  }
  .skin-blue-light .main-header .navbar .logo-mini.visible-xs-inline img {
    vertical-align: middle;
    margin-top: 0 !important;
  }
}

/* ==========================================================================
   The sidebar toggle in the bar
   --------------------------------------------------------------------------
   The button is a 50px cell of a 50px bar, but the skin only gives it the 15px
   padding and no line box, so the hover background painted the glyph only and
   left a gap under it. The cell is declared as a 50px box here and the hover
   takes the tone the other bar entries use.
   ========================================================================== */
.main-header .sidebar-toggle {
  height: 50px;
  line-height: 20px;
  padding-top: 15px;
  padding-bottom: 15px;
  box-sizing: border-box;
}
.main-header .sidebar-toggle:before {
  line-height: 20px;
}
.main-header .navbar .sidebar-toggle:hover {
  background-color: var(--rf-blue-deep);
}