body,
.leaflet-container {
	font-family: "daxregular", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.tooltip, .popover {
	font-family: "daxregular", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.btn {
	-webkit-transition: all 100ms ease-out 0s;
	-moz-transition: all 100ms ease-out 0s;
	-ms-transition: all 100ms ease-out 0s;
	-o-transition: all 100ms ease-out 0s;
	transition: all 100ms ease-out 0s;
	-webkit-transition-property: background-color, border-color, color;
	-moz-transition-property: background-color, border-color, color;
	-ms-transition-property: background-color, border-color, color;
	-o-transition-property: background-color, border-color, color;
	transition-property: background-color, border-color, color;
}

.btn.btn-xl {
	font-size: 24px;
	padding: 10px 20px;
}

.btn-link {
	color: #439210;
}

.btn-link:hover {
	color: #439210;
}

#switch_remove_port_warning {
	margin-bottom: 10px;
	color: #d9534f;
	display: block;
}

.btn-block {
	padding-left: 10px;
	padding-right: 10px;
	white-space: normal;
}

.btn-fm, .btn-fm:hover {
	background: none repeat scroll 0 0 #FFFFFF;
	border: 1px solid #5AF52C;
	color: #2C2D2C;
}

.btn-fm:hover, .btn-fm:hover:hover {
	border: 1px solid #2C2D2C;
}

.btn-fm.green, .btn-fm:hover.green {
	background: none repeat scroll 0 0 #66CC00;
	border: 1px solid #66CC00;
	color: #FFFFFF;
	text-shadow: 0 0 2px #2C2D2C;
}

.btn-fm.green:hover, .btn-fm:hover.green:hover {
	background: none repeat scroll 0 0 #FFFFFF;
	border: 1px solid #2C2D2C;
	color: #2C2D2C;
	text-shadow: 0 0 0 transparent;
}

.btn-fm.green:hover i, .btn-fm:hover.green:hover i {
	color: #2c2d2c;
}

.btn-fm.orange, .btn-fm:hover.orange {
	background: none repeat scroll 0 0 #ff6633;
	border: 1px solid #ff6633;
	color: #FFFFFF;
	text-shadow: 0 0 0 transparent;
}

.btn-fm.orange:hover, .btn-fm:hover.orange:hover {
	background: none repeat scroll 0 0 #FFFFFF;
	border: 1px solid #2C2D2C;
	color: #2C2D2C;
	text-shadow: 0 0 0 transparent;
}

.btn-fm.grey, .btn-fm:hover.grey {
	background: none repeat scroll 0 0 #E3E6E3;
	border: 1px solid #D2D6D2;
}

.btn-fm.grey:hover, .btn-fm:hover.grey:hover {
	background: none repeat scroll 0 0 #FFFFFF;
	border: 1px solid #5AF52C;
}

.btn-fm.black, .btn-fm:hover.black {
	background: none repeat scroll 0 0 #2C2D2C;
	border: 1px solid #2C2D2C;
	color: #FFFFFF;
	text-shadow: 0 0 2px #2C2D2C;
}

.btn-fm.black:hover, .btn-fm:hover.black:hover {
	background: none repeat scroll 0 0 #FFFFFF;
	border: 1px solid #2C2D2C;
	color: #2C2D2C;
	text-shadow: 0 0 0 transparent;
}

.btn-fm.black:hover i, .btn-fm:hover.black:hover i {
	color: #2c2d2c;
}

.btn-fm.white-border, .btn-fm:hover.white-border {
	background: none repeat scroll 0 0 transparent;
	border: 1px solid #FFFFFF;
	color: #FFFFFF;
}

.btn-fm.white-border:hover, .btn-fm:hover.white-border:hover {
	background: none repeat scroll 0 0 #FFFFFF;
	color: #2C2C2C;
}

.btn-fm.white-border:hover i, .btn-fm:hover.white-border:hover i {
	color: #2c2d2c;
}

.btn-fm.black-border, .btn-fm:hover.black-border {
	background: none repeat scroll 0 0 transparent;
	border: 1px solid #2C2C2C;
	color: #2C2C2C;
}

.btn-fm.black-border:hover, .btn-fm:hover.black-border:hover {
	background: none repeat scroll 0 0 #2C2C2C;
	color: #FFFFFF;
}

.modal-fm-nice .modal-title {
	color: #2C2D2C;
	font-size: 18px;
	text-transform: none;
}

.modal-fm-nice .modal-title .vessel-flag, .modal-fm-nice .modal-title .vessel-type {
	height: 15px;
	position: relative;
	top: -2px;
}

.modal-fm-nice .modal-body {
	padding: 0;
}

.modal-fm-nice .modal-body h1 {
	margin: 0 0 6px 0;
	position: relative;
}

.modal-fm-nice .modal-body h2 {
	line-height: 22px;
	padding-top: 0;
	text-transform: none;
}

.modal-fm-nice .modal-body h4 {
	color: #888;
	font-size: 14px;
	margin: 12px 0 6px;
	text-transform: none;
}

.modal-fm-nice .modal-body .modal-background {
	background: none repeat scroll 0 0 #e1ece1;
	margin: 0;
	padding: 20px;
}

.modal-fm-nice .modal-body .modal-background.white {
	background: none repeat scroll 0 0 #FFFFFF;
}

.modal-fm-nice .modal-body .modal-background.light {
	background: none repeat scroll 0 0 #f6fcf6;
}

.modal-fm-nice .modal-body .modal-background.dark {
	background: none repeat scroll 0 0 #2C2D2C;
}

.modal-fm-nice .modal-body .modal-background.dark * {
	color: #FAFAFA;
	text-transform: none;
}

.modal-fm-nice .modal-body .modal-background.dark a {
	color: #66CC00;
}

.modal-fm-nice .modal-footer {
	margin-top: 0;
}

code, pre {
	font-family: "InputMono", monospace;
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
	font-family: "daxregular", sans-serif;
}

.none {
	color: lightgray !important;
}

nav.navbar.navbar-default {
	background-color: #2C2D2C;
	border-radius: 0;
	padding-top: 6px;
	padding-bottom: 6px;
	border: 0 none;
	margin: 0;
}

nav.navbar > .container-fluid a.navbar-brand {
	background: transparent url("//static.fleetmon.com/static/images/svg/fm-logo/fleetmon-logo-sprite.svg") no-repeat scroll 0 0 / 164px auto;
	margin: 4px 28px 0 0;
	height: 44px;
	width: 165px;
	display: inline-block;
}

nav.navbar > .container-fluid a.navbar-brand:hover, nav.navbar > .container-fluid a.navbar-brand:focus {
	background-position: 0 -88px;
}

nav.navbar ul.navbar-nav > li > a {
	color: #F8F8F8;
}

nav.navbar ul.navbar-nav > li > a:hover {
	background-color: #555;
	color: #66FF00;
}

nav.navbar ul.navbar-nav > li.active > a {
	background-color: #66FF00;
	color: #2C2D2C;
}

body a {
	color: #3D9900;
	outline: none;
}

body a:hover,
body a:focus,
body a:active {
	color: #2D7200;
	outline: none;
}

.heading-doc {
	margin-top: 20px;
	margin-bottom: 10px;
}

table ul, table ol {
	margin-bottom: 0;
	list-style-type: none;
	padding: 0;
}

#parent_link {
	float: left;
	font-size: 65%;
	font-weight: 400;
}

a.btn[data-toggle=collapse][aria-expanded=false] > i.fa.fa-expand {
	display: auto;
}

a.btn[data-toggle=collapse][aria-expanded=true] > i.fa.fa-expand {
	display: none;
}

a.btn[data-toggle=collapse][aria-expanded=false] > i.fa.fa-compress {
	display: none;
}

a.btn[data-toggle=collapse][aria-expanded=true] > i.fa.fa-compress {
	display: auto;
}

div.row-client {
	border-top: 1px solid #E7E7E7;
}

div.row-client table.table {
	margin-bottom: 0;
}

div.row pre {
	margin-top: 10px;
	padding: 0;
	display: inline-block;
	vertical-align: middle;
}

.h-padding {
	padding-top: 8px;
	padding-bottom: 8px;
	display: inline-block;
}

.notification {
	font-weight: 700;
	padding: 6px 16px;
	border: 1px solid #2E2E2E;
	border-radius: 6px;
	margin-top: 8px !important;
	margin-bottom: 6px !important;
}

.tcol-apikey {
	width: 260px;
}

.tcol-expires {
	width: 160px;
}

.tcol-revoke {
	width: 140px;
	text-align: right;
}

.apikey {
	font-family: "InputMono", monospace;
	letter-spacing: 0.02em;
	font-weight: 700;
}

.apikey.revoked {
	font-weight: 400;
	text-decoration: line-through;
	color: #D3D3D3;
}

.apikey.expired {
	font-weight: 400;
	color: #D3D3D3;
}

h4 > span, h4 > small {
	vertical-align: bottom;
}

textarea {
	overflow-x: hidden;
}

span.spacer {
	display: inline-block;
	vertical-align: middle;
	min-width: 1em;
}

pre.js-client-config > code {
	cursor: pointer;
}

pre.js-client-config > code:hover {
	background-color: #E7E7E7;
}

#modal-client-add ul, #modal-apikey-add ul {
	padding-left: 0;
}

#modal-client-add li, #modal-apikey-add li {
	list-style: none;
	padding-left: 15px;
}

#modal-client-add li:hover, #modal-apikey-add li:hover {
	background-color: #E7E7E7;
	cursor: pointer;
}

figure {
	display: inline-block;
	float: none;
	clear: both;
}

figcaption span.graph-label {
	margin-left: 16px;
}

figcaption span.graph-label:first-child {
	margin-left: 0;
}

figcaption span.graph-mark {
	display: inline-block;
	width: 10px;
	height: 10px;
	vertical-align: baseline;
	margin: 0 5px 0 0;
}

button#apikey-add-create.pull-right {
	margin-right: 5px;
}

table > thead > tr > th {
	text-align: center;
}

i.fa-user {
	cursor: help;
}

#main-container {
	position: relative;
}

#edit_mode_navbar {
	border-radius: 0;
}

#sidebar {
	bottom: 0;
	display: none;
	position: absolute;
	top: 0;
	width: 0;
	right: 0;
	background-color: #FFFFFF;
	overflow: auto;
	z-index: 10;
}

#sidebar.show-me {
	display: block;
	width: 450px;
}

.editor-content {
	padding: 20px 30px;
}

.editor-content .btn-group .btn {
	padding: 6px 10px;
}

.leaflet-top .leaflet-control {
	margin-top: 20px;
}

.leaflet-popup-close-button {
	display: none;
}

.leaflet-popup-content {
	margin: 7px 12px 7px 12px;
	font-size: 16px;
}

.leaflet-popup-tip-container {
	height: 12px;
}

.locked-port .leaflet-popup-content-wrapper {
	background-color: #000000;
}

.locked-port .leaflet-popup-content {
	color: #ffffff;
}

.locked-port .leaflet-popup-tip {
	background-color: #000000;
}

.leaflet-popup-pane.disabled .leaflet-popup-content-wrapper,
.leaflet-popup-pane.disabled .leaflet-popup-tip-container .leaflet-popup-tip {
	background-color: #000000;
}

.leaflet-popup-pane.disabled .leaflet-popup-content-wrapper .leaflet-popup-content {
	color: #FFFFFF;
}

.leaflet-marker-icon.disabled {
	cursor: not-allowed;
}

.leaflet-top.leaflet-right {
	right: 10px !important;
}

.form-control {
	padding: 8px 12px 6px 12px;
}

.navbar-form .form-control.typeahead {
	background-color: #f1f1f1;
	border: 1px solid #f1f1f1;
	border-radius: 30px;
	color: #cfd2cf;
	font-size: 14px;
	height: auto;
	line-height: 27px;
	padding: 4px 15px 2px 36px;
	z-index: 1;
}

.navbar-form .form-control.typeahead:focus,
.form-control:focus {
	border: 1px solid #65fb06;
	color: #2c2d2c;
}

.typeahead-icon {
	position: absolute;
	left: 15px;
	top: 11px;
	color: #2c2d2c;
	z-index: 2;
}

#msgSubmitSuccess,
#msgSubmitFail {
	border-radius: 200px;
	margin: 0;
	padding: 6px 14px;
}

#add_port,
#cancel_add_port,
#filter_locode,
#filter_port_size_class,
#filter_hidden,
#stop_edit_port_zone,
#stop_edit_port_area {
	margin-left: -243px;
	left: 50%;
	position: fixed;
	top: 80px;
	z-index: 10;
}

#cancel_add_port {
	margin-left: -39px;
}

#filter_locode {
	 margin-left: -122px;
 }

#filter_port_size_class {
	 margin-left: 41px;
 }

#filter_hidden {
	margin-left: 243px;
}

.legend {
	padding: 0px 10px 15px 10px;
	color: #333;
	background: #fff;
}

.legend i {
    width: 18px;
    height: 18px;
    float: left;
    margin-right: 8px;
    opacity: 0.6;
}

.legend img {
	width: 18px;
    height: 18px;
    float: left;
    margin-right: 8px;
}

@media screen and (max-width: 600px) {
	/*.leaflet-top.leaflet-right,
	.leaflet-control-attribution {
		display: none !important;
	}*/

	/*#sidebar {
		width: 100%;
		left: 0;
	}*/
}