@font-face {
	font-family: "Muli-Regular";
	src: url("../fonts/Muli-Regular.eot"); /* IE9 Compat Modes */
	src: url("../fonts/Muli-Regular.ttf"),
		url("../fonts/Muli-Regular.eot?#iefix") format("embedded-opentype"),
		/* IE6-IE8 */
         url("../fonts/Muli-Regular.otf") format("opentype"),
		/* Open Type Font */
         url("../fonts/Muli-Regular.woff") format("woff");
	/* Modern Browsers */
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: "Muli-SemiBold";
	src: url("../fonts/Muli-SemiBold.eot"); /* IE9 Compat Modes */
	src: url("../fonts/Muli-SemiBold.ttf"),
		url("../fonts/Muli-SemiBold.eot?#iefix") format("embedded-opentype"),
		/* IE6-IE8 */
         url("../fonts/Muli-SemiBold.otf") format("opentype"),
		/* Open Type Font */
         url("../fonts/Muli-SemiBold.woff") format("woff");
	/* Modern Browsers */
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: "Muli-ExtraBold";
	src: url("../fonts/Muli-ExtraBold.eot"); /* IE9 Compat Modes */
	src: url("../fonts/Muli-ExtraBold.ttf"),
		url("../fonts/Muli-ExtraBold.eot?#iefix") format("embedded-opentype"),
		/* IE6-IE8 */
         url("../fonts/Muli-ExtraBold.otf") format("opentype"),
		/* Open Type Font */
         url("../fonts/Muli-ExtraBold.woff") format("woff");
	/* Modern Browsers */
	font-weight: normal;
	font-style: normal;
}

body {
	font-family: 'Muli-Regular', sans-serif;
	font-size: 12px;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
	font-family: "Muli-ExtraBold";
}

label {
	font-family: "Muli-SemiBold";
	font-weight: normal;
}

.btn, .file, .input, .select, .spinner, .tag-input, .textarea, input[type=datetime-local],
	input[type=email], input[type=file], input[type=month], input[type=number],
	input[type=password], input[type=search], input[type=tel], input[type=text],
	input[type=time], input[type=url], input[type=week], select, textarea {
	font-size: 12px !important;
}

.skin-red .main-header .logo {
	background-color: #ffffff;
	color: #c9181e;
	border-bottom: 1px solid #eccdcd;
}

.skin-red .main-header .logo:hover {
	background-color: #ffffff;
}

.skin-red .main-header .navbar {
	background: #c52929;
	background: -moz-linear-gradient(left, #c52929 0%, #ee4141 100%);
	background: -webkit-linear-gradient(left, #c52929 0%, #ee4141 100%);
	background: linear-gradient(to right, #c52929 0%, #ee4141 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c52929',
		endColorstr='#ee4141', GradientType=1);
	/* box-shadow: 12px 2px 16px 1px #484545; */
}

.skin-red .main-header li.user-header {
	background-color: #d33939;
}

.main-header .navbar .nav>li>a>.label {
	border-radius: 10px;
	line-height: 1.3;
	min-width: 18px;
	min-height: 18px;
}

.skin-red .wrapper, .skin-red .main-sidebar, .skin-red .left-side {
	background-color: #ffffff;
}

.skin-red .sidebar a {
	color: #333;
	/* font-weight: 600; */
}

.skin-red .sidebar-menu>li:hover>a, .skin-red .sidebar-menu>li.active>a,
	.skin-red .sidebar-menu>li.menu-open>a {
	color: #c9181e;
	background: #ffffff;
}

.skin-red .sidebar-menu>li>.treeview-menu {
	background: #eee;
}

.skin-red .sidebar-menu .treeview-menu>li.active>a, .skin-red .sidebar-menu .treeview-menu>li>a:hover
	{
	color: #c9181e;
}

.skin-red .main-header .navbar .sidebar-toggle:hover {
	background-color: #ee4141;
}

.treeview-menu>li>a {
	padding: 5px 5px 5px 35px;
}

.sidebar-collapse .treeview-menu>li>a {
	padding: 5px 5px 5px 15px;
}

.main-content {
	background-image: url("../img/map.jpg");
	height: calc(100vh - 125px);
	background-size: cover;
	background-position: center;
}

.dropdown-toggle .fa.fa-angle-down {
	font-size: 20px;
	position: relative;
	top: 2px;
}

.tag-line {
	font-size: 10px;
	display: inline-block;
	position: relative;
	color: #525252;
	top: -41px;
	/* width: 90px; */
	left: 64px;
	line-height: 12px;
	text-align: left;
	letter-spacing: 0px;
}

/* .logo-lg img {
    width: 42px;
} */
.logo-text {
	font-size: 28px;
	top: -4px;
	position: relative;
}

.dropdown.notifications-menu .fa.fa-bell {
	font-size: 20px;
}

.tab-pane a {
	color: #777;
}

.tab-pane span:first-child {
	padding-left: 0;
}

.tab-pane span {
	padding: 0 15px;
}

.main-header .tab-pane a:before {
	content: "\25CF";
	margin-right: 10px;
}

.sidebar-collapse .treeview-menu li a:before {
	display: none;
}

.sidebar-menu img {
	vertical-align: text-bottom;
	margin-right: 10px;
}

.treeview .fa.fa-angle-left {
	font-size: 20px;
}

.navbar-menu .nav.nav-tabs li a img:nth-child(2) {
	display: none;
}

.navbar-menu .nav.nav-tabs li.active a img:first-child, .navbar-menu .nav.nav-tabs li a:hover img:first-child
	{
	display: none;
}

.navbar-menu .nav.nav-tabs li.active a img:nth-child(2), .navbar-menu .nav.nav-tabs li a:hover img:nth-child(2)
	{
	display: initial;
}

.skin-red .sidebar-menu .treeview-menu>li>a {
	color: #797979;
}

.sidebar-collapse .fa.fa-angle-left {
	display: none;
}

.mCSB_outside+.mCSB_scrollTools {
	right: 0px;
}

.sidebar-footer {
	position: absolute;
	bottom: 20px;
	left: 20px;
}

.sidebar-footer .footer-text {
	font-size: 10px;
}

.sidebar-collapse .sidebar-footer {
	display: none;
}

.sidebar {
	max-height: calc(100vh - 150px);
}

.sidebar-collapse .ps {
	overflow: unset !important;
}

.sidebar-collapse .ps__rail-y {
	display: none;
}

.selectParent select,
.selectParent .selectize-input {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	/* border: none; */
	background: transparent
		url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAeFBMVEUAAACBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYGBgYF41q5EAAAAJ3RSTlMAAgUJCw8QEhMWFxgZHB4jJSosLTI0PkmSq7zP3ubr7/Hz9ff5+/3pkgTuAAAAUUlEQVQYGa3Bhw2AIBQFwGfv2HsX5e+/oRBidADv8AsjxMM1IfWigBbvIyTGqYbCOFVQoo0aANklcmj+Qi1KcaZ4ODN1dCR42ROtAb6swcN/bmarBHTSSSXNAAAAAElFTkSuQmCC)
		no-repeat 272px center;
	padding-right: 29px !important;
}

.selectize-control.single .selectize-input:after {
	display: none;
}

.select2-selection__arrow {
	display: none;
}

.icheckbox_flat-red, .iradio_flat-red {
	margin-right: 10px;
	vertical-align: bottom;
}

.sidebar-footer img {
	width: 50px;
}

/* Modal Generic Css */
.modal-title {
	color: #0885fb;
}

.modal-header {
	border-bottom: 2px solid #0885fb;
	padding: 10px 15px;
	cursor: move;
}

/* .modal-header, */
.modal-body {
	padding: 15px;
}

.modal {
	overflow: visible !important;
}

.modal-dialog {
	margin: 0;
	border: 1px solid #ccc;
}

.modeless {
	top: 10%;
	left: 50%;
	bottom: auto;
	right: auto;
	z-index: 1050;
	height: auto !important;
	box-shadow: 0 0 9px 0 #b7b7b7;
}

.modeless.min {
	left: auto;
}

.navbar-menu {
	float: left;
}

.navbar-menu .nav>li>a {
	padding: 17px 10px;
}

.navbar-menu .nav-tabs>li.active>a, .navbar-menu .nav-tabs>li.active>a:focus,
	.navbar-menu .nav-tabs>li.active>a:hover {
	border: 1px solid #eee;
	border-top-color: transparent;
	border-bottom-color: transparent;
}

.navbar-menu .nav-tabs>li:first-child.active>a, .navbar-menu .nav-tabs>li:first-child.active>a:focus,
	.navbar-menu .nav-tabs>li:first-child.active>a:hover {
	border-left-color: transparent;
}

.navbar-menu .nav-tabs>li>a:hover {
	border-color: transparent;
	border-bottom-color: #eee;
}

.navbar-menu .nav-tabs {
	border-bottom: none;
}

.custom-navbar {
	padding: 10px;
	box-shadow: 12px 2px 16px 1px #484545;
	border-top: 1px solid #eee;
}

.skin-black .wrapper, .skin-black .main-sidebar, .skin-black .left-side
	{
	background-color: #ffffff;
}

.skin-black .main-header .logo {
	border-bottom: 1px solid #eee;
	border-right: 1px solid #eee;
}

.hidden {
	display: none;
}

.separator {
	background-color: #efefef;
	margin: 15px 0px;
}

.addfeeder_modal .tab-pane {
	max-height: 145px;
}

.areaplanning_modal .tab-pane {
	max-height: 145px;
}

.scroller {
	position: relative;
	width: 100%;
	max-height: 340px;
	overflow: auto;
}

.table-jstree tbody {
	display: block;
}

.table-jstree thead, .table-jstree tr {
	display: table;
	width: 100%;
	table-layout: fixed;
}

.ribbon-button .icon * {
	height: auto;
	max-width: 22px;
}

/* top navbar */
.main-header .navbar.top-navbar {
	min-height: 30px;
	background: #0885fb;
}

.top-navbar .navbar-nav>li>a {
	padding: 0 15px;
}

.top-navbar .dropdown-toggle::before {
	display: none;
}

.topbar-text {
	margin-top: 7px;
	color: #fff;
	font-family: "Muli-ExtraBold";
}

.skin-black .main-header .navbar .nav>li>a {
	color: #fff;
}

.skin-black .main-header .navbar .nav>li>a:hover, .skin-black .main-header .navbar .nav>li>a:active,
	.skin-black .main-header .navbar .nav>li>a:focus, .skin-black .main-header .navbar .nav .open>a,
	.skin-black .main-header .navbar .nav .open>a:hover, .skin-black .main-header .navbar .nav .open>a:focus,
	.skin-black .main-header .navbar .nav>.active>a {
	background: transparent;
	color: #fff;
}

.skin-black .main-header .navbar .navbar-custom-menu .navbar-nav>li>a,
	.skin-black .main-header .navbar .navbar-right>li>a {
	border-left: none;
}

/* JS Tree */
.jstree-default .jstree-wholerow-hovered {
	background: #ee0d1b17;
}

.jstree-default .jstree-wholerow-clicked {
	background: transparent;
}

/* Data-tables */
.table>thead>tr>th {
	vertical-align: middle;
	text-align: center;
	white-space: nowrap;
}

table.table-bordered.dataTable th {
	border-bottom-width: 0;
}

.table>thead>tr:first-child>th {
	border-bottom-width: 0px;
	background-color: #0885fb;
	color: #fff;
}

.table>thead>tr:last-child>th {
	background-color: #3fa1fd;
	color: #fff;
}

.table>thead>tr>th:first-child, .table>tbody>tr>td:first-child {
	text-align: left !important;
}

table.dataTable thead .sorting:after, table.dataTable thead .sorting_asc:after,
	table.dataTable thead .sorting_desc:after, table.dataTable thead .sorting_asc_disabled:after,
	table.dataTable thead .sorting_desc_disabled:after {
	top: calc(50% - 7px);
	opacity: 1;
}

table.treetable.table-hover>tbody>tr:hover {
	background-color: #d3eaff;
}

table.treetable tr.selected {
	background-color: #bcdefd;
	color: inherit;
}

.pagination>li>a, .pagination>li>span {
	border: none;
}

/* .pagination>.active>a,  */
/* .pagination>.active>a:focus,  */
/* .pagination>.active>a:hover,  */
/* .pagination>.active>span,  */
/* .pagination>.active>span:focus,  */
/* .pagination>.active>span:hover { */
/*     color: #ea2633; */
/*     background-color: transparent; */
/* } */

/* .pagination>li>a:focus,  */
/* .pagination>li>a:hover,  */
/* .pagination>li>span:focus,  */
/* .pagination>li>span:hover { */
/*     color: #ea2633; */
/* } */
.ribbon-menu .content-holder .group {
	display: block;
	width: 100%;
}

.ribbon-menu #div_3 {
    width: 140px;
    margin: 0 auto;
}

.ribbon-menu #div_6 {
    width: 95px;
    margin: 0 auto;
}

.ribbon-menu #div_17 {
    width: 105px;
    margin: 0 auto;
}

.ribbon-menu #div_19 {
    width: 125px;
    margin: 0 auto;
}

.ribbon-menu #div_24 {
    width: 146px;
}

.ribbon-menu #div_8 {
    width: 130px;
}

#div_21, #div_29 {
    width: 100px;
}

.ribbon-menu #div_27 {
    width: 135px;
}

.ribbon-menu #div_28 {
    width: 112px;
    margin: 0 auto;
}

.ribbon-menu #div_31 {
    width: 84px;
    margin: 0 auto;
}

.ribbon-menu .content-holder .group>:not(.group-divider), .ribbon-menu .content-holder .group>:not(.title) {
    margin: 2px 0px;
}

.btn-widget-wrapper {
    position: relative;
    top: calc(50% - 24px);
}

.ribbon-button {
	width: 100%;
}

.ribbon-icon-button .icon * {
	width: 12px;
	height: 12px;
	vertical-align: baseline;
}

.ribbon-menu .content-holder .group>:not (.group-divider ), .ribbon-menu .content-holder .group>:not
	(.title ) {
	margin: 2px 0;
}

.ribbon-menu .content-holder .group .title {
	bottom: -2px;
	height: 26px;
	background-color: #ececec;
	font-size: 12px;
	color: #656565;
	line-height: 28px;
	border-top: none;
}

.ribbon-menu .content-holder .group+.group {
	border-left: 1px solid #d2d2d2a8;
}

.ribbon-icon-button .caption {
	font-size: 11px;
}

.ribbon-menu .content-holder .section {
    padding: 0px;
    height: auto;
}

.ribbon-menu .content-holder {
	background-color: #fff;
	box-shadow: 0px 2px 19px 2px rgba(0,0,0,0.27);
}

.ribbon-button, 
.ribbon-button-dropdown, 
.ribbon-icon-button,
.ribbon-tool-button {
    background-color: #fff;
    padding: 1px !important;
}
.ribbon-icon-button .caption {
	color: #656565;
}

.dropdown-toggle span {
	font-size: 11px;
}

.icon-delete {
	cursor: pointer;
	font-size: 14px;
}

.icon-delete:hover {
	color: #0885fb;
}

.btn-file {
	position: relative;
	overflow: hidden;
}

.btn-file input[type=file] {
	position: absolute;
	top: 0;
	right: 0;
	min-width: 100%;
	min-height: 100%;
	font-size: 100px;
	text-align: right;
	filter: alpha(opacity = 0);
	opacity: 0;
	outline: none;
	background: white;
	cursor: inherit;
	display: block;
}

input.form-control.input-file {
	height: 31px;
}

.text-mandatory {
	color: #f00;
}

.icheckbox_flat_icheck-generic {
	margin-right: 10px;
}

#tab_addFeeder_list label {
	font-family: inherit;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}

#tab_addFeeder_list label:hover {
	text-overflow: unset;
	white-space: initial;
}

/* Loader */
.loader {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1052;
}

.loader .a {
    position: absolute;
    top: calc(50% - 14px);
    left: calc(50% - 66px);
    z-index: 1053;
}

.dot {
    background: #0058fb;
    color: #888888;
}

.dot, .dot:after {
    display: inline-block;
    width: 2em;
    height: 2em;
    border-radius: 50%;
    animation: a 2s calc(((var(--i) + var(--o, 0))/var(--n) - 1)*2s) infinite;
}
  .dot:after {
    --o: 1;
    background: currentcolor;
    content: "";
  }
  
  @keyframes a {
    0%, 50% {
      transform: scale(0);
    }
  }

/* Login Screen */
.login-footer {
	position: absolute;
	bottom: 20px;
	left: 20px;
	right: 20px;
}

.login-footer-text {
	color: #fff;
	font-size: 9px;
	margin-top: 10px;
}

.login-box-msg+p {
	font-size: 12px;
	font-weight: normal;
	color: #ee0d1b;
	text-align: center;
}

.bg-color {
	height: 100%;
	padding: 0;
	margin: 0;
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	align-items: center;
	justify-content: center;
}

.login-section {
	min-width: 360px;
}

.login-logo img {
	width: 176px;
}

.mid-section .col-xs-6 {
	padding: 0 8px;
}

.mid-section-tile {
	display: block;
	text-align: center;
	float: left;
	width: 154px;
	height: 133px;
	margin: 0 8px;
	background-color: #fff;
	border-radius: 6px;
	-webkit-box-shadow: 0px 0px 9px 0px rgba(0, 0, 0, 0.25);
	-moz-box-shadow: 0px 0px 9px 0px rgba(0, 0, 0, 0.25);
	box-shadow: 0px 0px 9px 0px rgba(0, 0, 0, 0.25);
	padding: 40px 5px;
}

.tile-text {
	font-size: 13px;
	color: #333;
	margin-top: 5px;
}

.mid-section {
	margin: 0 -15px;
}

.mid-section-tile img {
	width: 30px;
	height: 30px;
}

.mid-section-tile:hover {
	background-color: #efefef;
}

.has-feedback label ~.form-control-feedback {
	top: 22px;
}

.login-logo h2 {
font-size: 30px;
    color: #109aff;
    letter-spacing: -1px;
    width: 256px;
    margin: 16px auto;
}

.btn-sign-in {
	margin-top: 5px;
}

.modal-user-management label {
	margin-top: 10px;
}

.modal-user-management .selectParent select {
	background-position: 252px;
}

.modal-feeder-assets .selectParent select {
	background-position: 148px;
}

.modal-feeder-assets .table>tbody>tr>td, .modal-feeder-assets .table>tbody>tr>th,
	.modal-feeder-assets .table>tfoot>tr>td, .modal-feeder-assets .table>tfoot>tr>th,
	.modal-feeder-assets .table>thead>tr>td, .modal-feeder-assets .table>thead>tr>th
	{
	font-size: 10px;
}

/* Animations */

.error-animate {
    -webkit-animation:alert 1s linear 0s 1 normal;
    -moz-animation:alert 1s linear 0s 1 normal;
    -ms-animation:alert 1s linear 0s 1 normal;
    animation: alert 1s linear 0s 1 normal;
}

@-webkit-keyframes alert {
    0%{ -webkit-transform: translateX(0); transform: translateX(0); }
    5%{ -webkit-transform: translateX(-10px); transform: translateX(-10px); }
    10%{ -webkit-transform: translateX(10px); transform: translateX(10px); }
    15%{ -webkit-transform: translateX(-10px); transform: translateX(-10px); }
    20%{ -webkit-transform: translateX(10px); transform: translateX(10px); }
    25%{ -webkit-transform: translateX(-10px); transform: translateX(-10px); }
    30%{ -webkit-transform: translateX(10px); transform: translateX(10px); }
    35%{ -webkit-transform: translateX(-10px); transform: translateX(-10px); }
    40%{ -webkit-transform: translateX(10px); transform: translateX(10px); }
    45%{ -webkit-transform: translateX(-10px); transform: translateX(-10px); }
    50%{ -webkit-transform: translateX(0); transform: translateX(0); }
    }
    
    @keyframes alert {
    0%{ -ms-transform: translateX(0); transform: translateX(0); }
    5%{ -ms-transform: translateX(-10px); transform: translateX(-10px); }
    10%{ -ms-transform: translateX(10px); transform: translateX(10px); }
    15%{ -ms-transform: translateX(-10px); transform: translateX(-10px); }
    20%{ -ms-transform: translateX(10px); transform: translateX(10px); }
    25%{ -ms-transform: translateX(-10px); transform: translateX(-10px); }
    30%{ -ms-transform: translateX(10px); transform: translateX(10px); }
    35%{ -ms-transform: translateX(-10px); transform: translateX(-10px); }
    40%{ -ms-transform: translateX(10px); transform: translateX(10px); }
    45%{ -ms-transform: translateX(-10px); transform: translateX(-10px); }
    50%{ -ms-transform: translateX(0); transform: translateX(0); }
    }


.start-animate {
    -webkit-animation:bounce-in 1s ease 0s 1 normal;
    -moz-animation:bounce-in 1s ease 0s 1 normal;
    -ms-animation:bounce-in 1s ease 0s 1 normal;
    animation:bounce-in 1s ease 0s 1 normal;
    }
    
    @-webkit-keyframes bounce-in {
    0%{ opacity: 0; -webkit-transform: scale(.3); transform: scale(.3); }
    50%{ opacity: 1; -webkit-transform: scale(1.0); transform: scale(1.0); }
    70%{ -webkit-transform: scale(0.9); transform: scale(0.9); }
    100%{ -webkit-transform: scale(1); transform: scale(1); }
    }
    
    @keyframes bounce-in {
    0%{ opacity: 0; transform: scale(.3); }
    50%{ opacity: 1; transform: scale(1.0); }
    70%{ transform: scale(0.9); }
    100%{ transform: scale(1); }
    }

.success-animate {
    -webkit-animation:flipiny 2s ease 0s 1 normal;
    -moz-animation:flipiny 2s ease 0s 1 normal;
    -ms-animation:flipiny 2s ease 0s 1 normal;
    animation:flipiny 2s ease 0s 1 normal;
    }
    
    @-webkit-keyframes flipiny {
    0%{ opacity: 0; -webkit-transform: perspective(400px) rotateY(0deg); transform: perspective(400px) rotateY(90deg); }
    40%{ -webkit-transform: perspective(400px) rotateY(0deg); transform: perspective(400px) rotateY(-10deg); }
    70%{ -webkit-transform: perspective(400px) rotateY(0deg); transform: perspective(400px) rotateY(10deg); }
    100%{ opacity: 1; -webkit-transform: perspective(400px) rotateY(0deg); transform: perspective(400px) rotateY(0deg); }
    }
    
    @keyframes flipiny {
    0%{ opacity: 0; transform: perspective(400px) rotateY(90deg); }
    40%{ transform: perspective(400px) rotateY(-10deg); }
    70%{ transform: perspective(400px) rotateY(10deg); }
    100%{ opacity: 1; transform: perspective(400px) rotateY(0deg); }
    }

.back-animate {
    -webkit-animation:flipinx 1s ease 0s 1 normal;
    -moz-animation:flipinx 1s ease 0s 1 normal;
    -ms-animation:flipinx 1s ease 0s 1 normal;
    animation:flipinx 1s ease 0s 1 normal;
    }
    
    @-webkit-keyframes flipinx {
    0%{ opacity: 0; -webkit-transform: perspective(400px) rotateX(0deg); transform: perspective(400px) rotateX(90deg); }
    40%{ -webkit-transform: perspective(400px) rotateX(0deg); transform: perspective(400px) rotateX(-10deg); }
    70%{ -webkit-transform: perspective(400px) rotateX(0deg); transform: perspective(400px) rotateX(10deg); }
    100%{ opacity: 1; -webkit-transform: perspective(400px) rotateX(0deg); transform: perspective(400px) rotateX(0deg); }
    }
    
    @keyframes flipinx {
    0%{ opacity: 0; transform: perspective(400px) rotateX(90deg); }
    40%{ transform: perspective(400px) rotateX(-10deg); }
    70%{ transform: perspective(400px) rotateX(10deg); }
    100%{ opacity: 1; transform: perspective(400px) rotateX(0deg); }
    }

@keyframes FadeIn { 
    0% {
        opacity: 0;
        transform: scale(.1);
    }
    
    85% {
        opacity: 1;
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
    }
    
    .mid-section .mid-section-tile {
    animation: FadeIn 1s linear;
    animation-fill-mode: both;
    }
    
    .mid-section .row:nth-child(1) .col-xs-6:nth-child(1) .mid-section-tile { animation-delay: 0s }
    .mid-section .row:nth-child(1) .col-xs-6:nth-child(2) .mid-section-tile { animation-delay: 0.3s }
    .mid-section .row:nth-child(2) .col-xs-6:nth-child(1) .mid-section-tile { animation-delay: 0.6s }
    .mid-section .row:nth-child(2) .col-xs-6:nth-child(2) .mid-section-tile { animation-delay: 0.9s }

.mid-section .mid-section-tile {
	animation: FadeIn 1s linear;
	animation-fill-mode: both;
}

.leaflet-control-better-scale
{
	margin-right:25px !important;
}

.mid-section .row:nth-child(1) .col-xs-6:nth-child(1) .mid-section-tile
	{
	animation-delay: 0s
}

.mid-section .row:nth-child(1) .col-xs-6:nth-child(2) .mid-section-tile
	{
	animation-delay: 0.3s
}

.mid-section .row:nth-child(2) .col-xs-6:nth-child(1) .mid-section-tile
	{
	animation-delay: 0.6s
}

.mid-section .row:nth-child(2) .col-xs-6:nth-child(2) .mid-section-tile
	{
	animation-delay: 0.9s
}

/* Media Queries */
@media ( min-width : 768px) {
	.navbar-nav>li>a {
		padding-top: 25px;
		padding-bottom: 25px;
	}
}

@media ( max-width : 410px) {
	/* .login-box,
    .register-box {
    } */
	.login-section {
		width: 90%;
	}
}

ul.feederLegend {
	list-style-type: none;
	height: 400px;
	overflow: auto;
	margin: 0px;
}

ul.feederLegend li img {
	margin-right: 7px;
}

ul.feederLegend li {
	margin-bottom: 5px;
}

.customlegend {
	line-height: 18px;
	color: #555;
}

.custominfo {
    padding: 2px 2px;
    font: 14px/20px Arial, Helvetica, sans-serif;
    background: #fff;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
}

.legend {
	line-height: 18px;
	color: #555;
}

.info {
	padding: 2px 2px;
	background: #ffffffb3;
	box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
}

.printDiv {
	display: none;
}

.leaflet-control-browser-print {
	display: none !important;
}

.leaflet-popup-content-wrapper {
	border-radius: 0px !important;
}

.printDiv label {
	min-width: 145px;
}

.easy-button-button img {
	width: 8px;
	margin-top: -3px;
}

.leaflet-touch .leaflet-bar button.easyActive, .icon-active {
	background-color: #c1fbff !important;
}
.custom-legend-padding {
	
    padding: 1px !important;
}

#mapLegend {
    right: 1px;
    margin: 0 !important;    
    max-width: 200px;
    border: 1px solid #ccc;
    background: #fff;
    position: fixed !important;
    font-size:smaller;
    
}

.legend-section {
    display: flex;    
    justify-content: space-evenly;
}
.custom-legend-h5 {
    height: 3px !important;         
}

.legend-section h5{
	        
  font-size:small;
    
}

.legend-subsection {
    flex: 1;
    min-width: auto;
    max-width: 50%;
    margin-right: 1px;
    padding:5px;
}

.legend-item {
    display: block;
    min-width: 50px;
    max-width: 80px;
    word-wrap: break-word;
    padding-bottom: 1px;
    padding-right: 1px;
}


.mapLegendPosition {
	position: fixed !important;
	
}


.maploader {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: rgba(0, 0, 0, 0.5);
	z-index: 1052;
}

.maploader .a {
	position: absolute;
	top: calc(50% - 14px);
	left: calc(50% - 66px);
	z-index: 1053;
}

.workorderreport_modal .nav-tabs-custom, .synergeeresults_modal .nav-tabs-custom
	{
	margin-bottom: 0px;
}

.bootstrap-duallistbox-container .box1>label,
	.bootstrap-duallistbox-container .box2>label {
	display: inline-block;
	margin-top: 3px;
	font-family: "Muli-ExtraBold";
	font-size: 14px;
}

.bootstrap-duallistbox-container .info-container {
	float: right;
}

.btn-default.disabled.focus, .btn-default.disabled:focus, .btn-default.disabled:hover,
	.btn-default[disabled].focus, .btn-default[disabled]:focus,
	.btn-default[disabled]:hover, fieldset[disabled] .btn-default.focus,
	fieldset[disabled] .btn-default:focus, fieldset[disabled] .btn-default:hover
	{
	background-color: #0768c3;
	border-color: #adadad;
}

.bootstrap-duallistbox-container .moveall,
.bootstrap-duallistbox-container .removeall {
	background-color: #d84315 !important;
	color: #fff !important;
	width: 50% !important;
}

.bootstrap-duallistbox-container .moveall:hover,
.bootstrap-duallistbox-container .moveall.active.focus, 
.bootstrap-duallistbox-container .moveall.active:focus, 
.bootstrap-duallistbox-container .moveall.active:hover,
.bootstrap-duallistbox-container .moveall:active.focus, 
.bootstrap-duallistbox-container .moveall:active:focus, 
.bootstrap-duallistbox-container .moveall:active:hover,
.bootstrap-duallistbox-container .removeall:hover,
.bootstrap-duallistbox-container .removeall.active.focus, 
.bootstrap-duallistbox-container .removeall.active:focus, 
.bootstrap-duallistbox-container .removeall.active:hover,
.bootstrap-duallistbox-container .removeall:active.focus, 
.bootstrap-duallistbox-container .removeall:active:focus, 
.bootstrap-duallistbox-container .removeall:active:hover {
	background-color: #bf360c !important;
	color: #fff !important;
}

.bootstrap-duallistbox-container .move,
.bootstrap-duallistbox-container .remove {
	background-color: #ff5722 !important;
	color: #fff !important;
	width: 50% !important;
}

.bootstrap-duallistbox-container .move:hover,
.bootstrap-duallistbox-container .move.active.focus, 
.bootstrap-duallistbox-container .move.active:focus, 
.bootstrap-duallistbox-container .move.active:hover,
.bootstrap-duallistbox-container .move:active.focus, 
.bootstrap-duallistbox-container .move:active:focus, 
.bootstrap-duallistbox-container .move:active:hover,
.bootstrap-duallistbox-container .remove:hover,
.bootstrap-duallistbox-container .remove.active.focus, 
.bootstrap-duallistbox-container .remove.active:focus, 
.bootstrap-duallistbox-container .remove.active:hover,
.bootstrap-duallistbox-container .remove:active.focus, 
.bootstrap-duallistbox-container .remove:active:focus, 
.bootstrap-duallistbox-container .remove:active:hover {
	background-color: #f4511e !important;
	color: #fff !important;
}

.form-control {
	height: 36px;
	padding: 6px 12px !important;
	font-family: inherit !important;
	font-size: 12px !important;
}

/* ::placeholder { Chrome, Firefox, Opera, Safari 10.1+ */
/* 	color: #a9a9a9 !important; */
/* 	opacity: 1 !important; Firefox */
/* } */

/* :-ms-input-placeholder { Internet Explorer 10-11 */
/* 	color: #a9a9a9 !important; */
/* } */

/* ::-ms-input-placeholder { Microsoft Edge */
/* 	color: #a9a9a9 !important; */
/* } */

.user-header p:last-child {
	font-size: 14px !important;
}

.skin-black .main-header li.user-header {
	background-color: #5ba5ea;
}

.leaflet-popup .modal-header {
	padding: 0 15px;
	padding-bottom: 15px;
	margin: 0 -20px;
	margin-bottom: 15px;
}

#workOrderReport tr {
	cursor: pointer;
}

.total-popup-content {
	font-size: 14px;
}

.total-popup-label span {
	font-size: 12px;
}

body, .modal {
	padding-right: 0 !important;
}

.content-wrapper {
	min-height: 100% !important;
}

.leaflet-container {
	font: 12px 'Muli-Regular', sans-serif !important;
}

.custominfo.customlegend {
	
    width: 30%;
}

.popover {
   	min-width: 170px;
}

.alert {
	top: 140px !important;
	z-index: 1054 !important;
}

#btnDiv {
    position: absolute;
    margin-top: 6px;
    z-index: 1;
}

.select2-container {
	width:100% !important;
}

.selectize-control.single .selectize-input, 
.selectize-dropdown.single {
    border-color: #d9d9d9;
    border-radius: 0;
    background-color: #fff;
}

.selectize-dropdown [data-selectable].option {
	cursor: pointer;
}

.selectize-input > input {
    height: auto;
    width: auto !important;
    padding-left: 5px !important;
}

@
supports (-ms-ime-align:auto ) { 
	.ribbon-menu .content-holder .section {
		height:auto;
	}
}
@media screen and (-ms-high-contrast: active) , ( -ms-high-contrast :
	none) {
	.mid-section-tile {
		border: 1px solid #ccc;
	}
}

.widgetSelected {
    background-color: rgba(164,206,249,.2);
    border-color: #a4cef9;
}

dataTables_wrapper > div.dt-buttons.btn-group {
	display: block !important;
}

.customDTButton {
	margin-left: 3px !important;
}

.buttons-html5{
	border-radius: 3px !important;
}

.dt-buttons span
{
	padding:0px;
}

table.dataTable  > tbody > tr > td {
	text-align: center !important;
}
popup {
 
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  
}

.popup-content {
  background-color: white;
  width: 300px;
  border-radius: 5px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin-left: 400px;
    
}

.close {
  float: right;
  cursor: pointer;
}

.close:hover {
  color: red;
}
.popup-header
{
	position:relative;
	border-bottom: 2px solid #0885fb;
    padding: 10px 15px;
}
.popup-close
{
	float:none;
	position:absolute;
	top:8px;
	right:8px;
}
.popup-body
{
	
  padding: 20px;
}
.blurred {
  filter: blur(2px); /* Adjust the blur strength as needed */
}
.table-wrapper
{
	width:100%;
	overflow:auto;
	max-height:300px;
}
.table-wrapper table
{
	margin-top:15px;
}


/* ---- Fix invisible legend background when printing ---- */
.mapLegend,
#printLegend,
.map-legend-print,
.printDiv,
.customlegend {
  background-color: #ffffff !important;
  color: #000000 !important;
  border: 1px solid #ccc !important;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3) !important;
  -webkit-print-color-adjust: exact !important;
  print-color-adjust: exact !important;
}

/* Ensure visibility inside print preview and PDF */
@media print {
  .mapLegend,
  #mapLegend,
  .printDiv,
  #printLegend,
  .map-legend-print {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    background-color: #ffffff !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
}