@charset "UTF-8";
/* Variables */
/* Tag level styles */
html,
body {
  font-family: Lato, "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #fff;
  background-color: #061e2e;
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  overflow-x: hidden; }

table {
  border-color: #214660; }

[ng-cloak] {
  display: none !important; }

*:focus {
  outline: none !important; }

td {
  vertical-align: middle !important;
  padding: 0 !important;
  text-align: center; }

th {
  text-align: center;
  font-size: 12px;
  border-bottom: none;
  opacity: 1;
  color: #aec6d5;
  font-weight: 300; }

hr {
  margin-top: 10px;
  margin-bottom: 10px;
  opacity: 0.2; }

p {
  white-space: normal; }

input, select {
  -webkit-border-radius: 18px !important;
  -moz-border-radius: 18px !important;
  -ms-border-radius: 18px !important;
  border-radius: 18px !important;
  border: 2px solid #22a7f0 !important;
  background-color: #0a2c43 !important;
  color: #fff !important;
  font-size: 12px !important;
  padding: 5px 10px !important; }

:-webkit-autofill {
  box-shadow: 0 0 0 30px #0a2c43 inset !important;
  -webkit-box-shadow: 0 0 0 30px #0a2c43 inset !important; }

:-webkit-autofill {
  -webkit-text-fill-color: #fff !important; }

small {
  color: #aec6d5 !important; }

/* Preload bg images */
body::after {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  z-index: -1;
  content: url("/img/fr_icons/png/fr_map_blue.png") url("/img/fr_icons/png/fr_map_white.png") url("/img/fr_icons/png/fr_timeline_blue.png") url("/img/fr_icons/png/fr_voyages_blue.png") url("/img/fr_icons/png/fr_events_blue.png") url("/img/fr_icons/png/fr_help_blue.png") url("/img/fr_icons/png/fr_messages_blue.png") url("/img/fr_icons/png/fr_settings_blue.png") url("/img/fr_icons/png/fr_user_blue.png") url("/img/fr_icons/png/fr_logout_blue.png") url("/img/fr_icons/png/fr_update_blue.png") url("/img/fr_icons/png/fr_menu_blue.png") url("/img/fr_icons/png/fr_cargo_blue.png") url("/img/fr_icons/png/fr_ops_blue.png") url("/img/fr_icons/png/fr_sandbox_blue.png") url("/img/fr_icons/png/fr_html_blue.png") url("/img/fr_icons/png/fr_footprint_blue.png") url("/img/fr_icons/png/fr_breakeven_blue.png") url("/img/fr_icons/png/fr_world_blue.png") url("/img/fr_icons/png/fr_share_blue.png") url("/img/fr_icons/png/fr_distance_blue.png") url("/img/fr_icons/png/fr_log_blue.png") url("/img/fr_icons/png/fr_incidents_blue.png") url("/img/fr_icons/png/fr_fleet_blue.png"); }

/* Import styles */
#chat md-select {
  border: none !important;
  background-color: transparent;
  -webkit-border-radius: 0 !important;
  -moz-border-radius: 0 !important;
  -ms-border-radius: 0 !important;
  border-radius: 0 !important; }

#chat .input-group md-select {
  font-size: 14px; }

#chat .input-group ._md-select-value {
  margin-left: -20px; }

#chat .btn {
  font-size: 14px;
  padding: 6px 20px;
  border-radius: 0px !important; }

.direct-chat-text {
  border-radius: 10px;
  position: relative;
  padding: 5px 10px !important;
  background: #eee;
  margin: 10px 0 0 40px;
  color: #444;
  border-top-left-radius: 0 !important;
  min-height: 25px; }

.margins {
  margin: 10px 5px 7px 60px; }

#chat a, .attachment_link {
  color: #fff !important;
  text-decoration: underline; }

.md-input-has-value label {
  transform: skew(0deg, 0deg) !important;
  -webkit-transform: skew(0eg, 0deg) !important; }

.md-input-focused label {
  transform: skew(0deg, 0deg) !important;
  -webkit-transform: skew(0eg, 0deg) !important; }

.direct-chat-msg, .direct-chat-text {
  display: block;
  word-wrap: break-word; }

.direct-chat-img {
  margin-top: 3px;
  font-size: 30px;
  border-radius: 50%;
  float: left;
  width: 35px;
  height: 35px;
  opacity: 1.0;
  background: #cccccc; }

.direct-chat-info {
  display: block;
  margin-bottom: 2px;
  font-size: 12px; }

.direct-chat-msg {
  margin-bottom: 10px; }

.direct-chat-messages, .direct-chat-contacts {
  -webkit-transition: -webkit-transform .5s ease-in-out;
  -moz-transition: -moz-transform .5s ease-in-out;
  -o-transition: -o-transform .5s ease-in-out;
  transition: transform .5s ease-in-out; }

.direct-chat-messages {
  -webkit-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  -o-transform: translate(0, 0);
  transform: translate(0, 0);
  padding: 15px;
  height: 365px;
  overflow: auto;
  word-wrap: break-word; }

.direct-chat-warning .right > .direct-chat-text {
  border-top-right-radius: 0;
  border-top-left-radius: 10px !important; }

.right .direct-chat-text {
  margin-right: 40px;
  margin-left: 0; }

.direct-chat-warning .right > .direct-chat-text:after,
.direct-chat-warning .right > .direct-chat-text:before {
  border-left-color: #333333; }

.right .direct-chat-text:after, .right .direct-chat-text:before {
  right: auto;
  left: 100%;
  border-right-color: rgba(0, 0, 0, 0);
  border-left-color: #D2D6DE; }

.right .direct-chat-img {
  float: right; }

.box-footer {
  position: absolute;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 3px;
  background-color: #000;
  width: 100%; }

.direct-chat-name {
  font-weight: 600;
  color: #ddd; }

.ml10 {
  margin-left: 10px; }

#recipient {
  height: 20px;
  background-color: #eee; }

.bubble {
  padding: 2px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
  border-color: #333333; }

.bubble2 {
  border-color: #aaa; }

.bubble3 {
  padding: 2px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
  border-color: #333333;
  max-height: 180px;
  overflow-y: auto; }

.left {
  border-top-left-radius: 0; }

select option:checked:after {
  content: attr(title);
  background: #666;
  color: #fff;
  position: absolute;
  width: 100%;
  left: 0;
  border: none; }

.toeveryone {
  color: #fff !important;
  background-color: #214660 !important; }

.high {
  color: #fff !important;
  background-color: #ff0000 !important; }

.increased {
  color: #fff !important;
  background-color: #F89406 !important; }

.normal {
  color: #fff !important;
  background-color: #214660 !important; }

.increased {
  color: #fff !important;
  background-color: #F89406 !important; }

.to-user {
  color: #fff !important;
  background-color: #214660 !important; }

.to-sms {
  color: #fff !important;
  background-color: #7f8c8d !important; }

.to-support {
  color: #fff !important;
  background-color: orange !important; }

.executiveteam {
  color: #fff !important;
  background-color: #2c3e50 !important; }

.safetyteam {
  color: #fff !important;
  background-color: #4DAF7C !important; }

.technicalteam {
  color: #fff !important;
  background-color: #59ABE3 !important; }

.deletemsg {
  float: right;
  height: 10px;
  width: 10px;
  margin-right: -4px;
  margin-top: 2px;
  opacity: 0.3; }

.deletemsg:hover {
  opacity: 0.7; }

.textinput {
  word-break: break-word;
  height: 94px !important;
  border-bottom-width: 0;
  border-radius: 0;
  padding-right: 20px;
  border: none;
  background-color: #0a2c43;
  color: #fff; }

.input-group-addon {
  border-radius: 0;
  border: none;
  background-color: #061e2e;
  position: relative;
  height: 33px; }

.input-group {
  overflow: hidden; }

.input-group-addon {
  border-right: 1px solid #214660 !important;
  overflow: hidden; }

._md-select-value ._md-select-icon {
  margin-left: -2px; }

.send-button {
  margin-left: 0px !important;
  width: 100%;
  border-radius: 0 !important;
  background-color: #22a7f0;
  color: #fff; }

.send-button:hover {
  opacity: 0.9;
  background-color: #22a7f0;
  color: #fff; }

#chat textarea:focus {
  border: none; }

.posfix {
  position: absolute;
  right: 10px;
  top: 15px;
  color: #fff; }

.posfix2 {
  position: absolute;
  right: 2px;
  top: 10px; }

.styled-select select {
  background: transparent;
  width: 128px;
  line-height: 1;
  border: 0;
  border-radius: 0;
  height: 20px;
  -webkit-appearance: none; }

.styled-select {
  position: absolute;
  width: 103px;
  overflow: hidden;
  background: #061e2e;
  left: 5px;
  top: 7px;
  color: #fff; }

.msg-select {
  position: absolute;
  top: 5px;
  left: 15px;
  line-height: 19px;
  color: #fff; }

.styled-select2 {
  overflow: hidden;
  font-size: 12px;
  height: 25px;
  color: #fff;
  background-color: #0a2c43;
  border: 2px solid #22a7f0;
  border-radius: 12px;
  display: inline-block;
  line-height: 19px;
  margin-top: -2px; }

.styled-select2 select {
  background: transparent;
  width: 140px;
  line-height: 1;
  border: 0;
  border-radius: 0;
  height: 20px;
  -webkit-appearance: none; }

.selectinfo {
  position: absolute;
  color: #aaa;
  left: 3px;
  top: 0px;
  font-size: 10px;
  z-index: 10; }

.attach {
  position: absolute;
  right: 22px;
  top: 39px;
  z-index: 10;
  font-size: 18px;
  cursor: pointer;
  opacity: 0.7; }

.attach:hover {
  opacity: 1; }

.thumbnail {
  position: absolute;
  width: 25px;
  height: 25px;
  right: 22px;
  margin-top: -32px;
  z-index: 10;
  opacity: 0.7;
  z-index: 99; }

.thumbnail:hover {
  opacity: 1;
  background-image: url("/img/delete.png") !important;
  z-index: 9999; }

.messagewrap {
  white-space: pre-wrap; }

/* Top navigation bar */
nav a, nav a:hover, nav a:focus {
  color: #fff;
  text-decoration: none; }

nav {
  line-height: 24px;
  height: 50px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background-color: #061e2e; }

.logo {
  font-size: 24px;
  margin-right: 20px;
  display: inline-block;
  margin-top: 7px; }

.logo > img {
  height: 40px;
  padding: 5px 10px 10px 10px;
  vertical-align: 3px; }

.logo span {
  vertical-align: 16px; }

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  display: inline-block;
  height: 100%; }

nav li {
  float: left;
  height: 50px; }

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none; }

.nav-left {
  position: absolute; }

.nav-icon {
  height: 25px;
  vertical-align: -7px;
  margin-right: 3px;
  background-size: 100% 25px;
  min-width: 25px;
  display: inline-block;
  background-repeat: no-repeat; }

.vertical-line {
  border-right: 1px solid #214660;
  position: absolute;
  top: 5px;
  bottom: 5px;
  margin-left: 14px; }

.nav-map .nav-icon {
  background-image: url("/img/fr_icons/png/fr_map_white.png"); }

.nav-map:hover .nav-icon, .nav-map a.active .nav-icon {
  background-image: url("/img/fr_icons/png/fr_map_blue.png");
  color: #22a7f0; }

.nav-timeline .nav-icon {
  background-image: url("/img/fr_icons/png/fr_timeline_white.png"); }

.nav-timeline:hover .nav-icon, .nav-timeline a.active .nav-icon {
  background-image: url("/img/fr_icons/png/fr_timeline_blue.png");
  color: #22a7f0; }

.nav-voyages .nav-icon {
  background-image: url("/img/fr_icons/png/fr_voyages_white.png"); }

.nav-voyages:hover .nav-icon, .nav-voyages a.active .nav-icon {
  background-image: url("/img/fr_icons/png/fr_voyages_blue.png");
  color: #22a7f0; }

.nav-incidents .nav-icon {
  background-image: url("/img/fr_icons/png/fr_incidents_white.png"); }

.nav-incidents:hover .nav-icon, .nav-voyages a.active .nav-icon {
  background-image: url("/img/fr_icons/png/fr_incidents_blue.png");
  color: #22a7f0; }

.nav-fleet .nav-icon {
  background-image: url("/img/fr_icons/png/fr_fleet_white.png"); }

.nav-fleet:hover .nav-icon, .nav-voyages a.active .nav-icon {
  background-image: url("/img/fr_icons/png/fr_fleet_blue.png");
  color: #22a7f0; }

.nav-events .nav-icon {
  background-image: url("/img/fr_icons/png/fr_events_white.png"); }

.nav-events:hover .nav-icon, .nav-events a.active .nav-icon {
  background-image: url("/img/fr_icons/png/fr_events_blue.png");
  color: #22a7f0; }

.nav-support .nav-icon {
  background-image: url("/img/fr_icons/png/fr_help_white.png"); }

.nav-support:hover .nav-icon {
  background-image: url("/img/fr_icons/png/fr_help_blue.png"); }

.nav-messages .nav-icon {
  background-image: url("/img/fr_icons/png/fr_messages_white.png"); }

.nav-messages:hover .nav-icon {
  background-image: url("/img/fr_icons/png/fr_messages_blue.png"); }

.nav-settings .nav-icon {
  background-image: url("/img/fr_icons/png/fr_settings_white.png"); }

.nav-settings:hover .nav-icon, .nav-settings a.active .nav-icon {
  background-image: url("/img/fr_icons/png/fr_settings_blue.png"); }

.nav-user .nav-icon {
  background-image: url("/img/fr_icons/png/fr_user_white.png"); }

.nav-user:hover .nav-icon {
  background-image: url("/img/fr_icons/png/fr_user_blue.png"); }

.nav-logout .nav-icon {
  background-image: url("/img/fr_icons/png/fr_logout_white.png"); }

.nav-logout:hover .nav-icon {
  background-image: url("/img/fr_icons/png/fr_logout_blue.png"); }

.nav-update .nav-icon {
  background-image: url("/img/fr_icons/png/fr_update_white.png"); }

.nav-update:hover .nav-icon {
  background-image: url("/img/fr_icons/png/fr_update_blue.png"); }

.nav-menu .nav-icon {
  background-image: url("/img/fr_icons/png/fr_menu_white.png");
  margin-right: -3px; }

.nav-menu:hover .nav-icon {
  background-image: url("/img/fr_icons/png/fr_menu_blue.png"); }

.nav-log .nav-icon {
  background-image: url("/img/fr_icons/png/fr_log_white.png");
  margin-top: -2px;
  min-width: 25px; }

.nav-log:hover .nav-icon {
  background-image: url("/img/fr_icons/png/fr_log_blue.png"); }

.nav-logo {
  display: none !important; }

nav li > a:hover, nav a.active {
  color: #22a7f0; }

nav li.active {
  border-bottom: 3px solid #22a7f0; }

.nav-right {
  float: right; }

.badge {
  color: #000;
  background-color: #fff;
  font-weight: normal;
  font-size: 12px;
  vertical-align: 1px; }

.msgbubble {
  -webkit-border-radius: 50% !important;
  -moz-border-radius: 50% !important;
  -ms-border-radius: 50% !important;
  border-radius: 50% !important;
  font-size: 12px;
  color: #fff;
  width: 18px;
  display: inline-block;
  height: 18px;
  line-height: 18px;
  margin-left: -6px; }

.priority1 {
  background-color: #bf152f; }

.priority2 {
  background-color: #f45b04; }

.newmsg {
  background-color: #214660 !important; }

.nav-messages div {
  position: absolute;
  top: 5px;
  margin-left: 19px; }

.online-count {
  color: #fff !important; }

.nav-mobile {
  display: none;
  position: absolute;
  right: 10px; }

/* Timeline style */
.vis-rolling-mode-btn {
  top: auto;
  bottom: 7px; }

.vis-timeline {
  border: 0; }

.vis-panel.vis-bottom,
.vis-panel.vis-center,
.vis-panel.vis-top {
  border-left-style: dotted; }

.vis-panel {
  padding: 2px; }

.vis-labelset .vis-label {
  color: #fff;
  font-size: 13px;
  border-bottom: 1px solid #0a2c43; }

.vis-foreground .vis-group {
  border-bottom: 1px solid #0a2c43; }

/*.vis-group:first-child, .vis-label:first-child {
    height: 59px !important;
}*/
.vis-time-axis .vis-grid.vis-vertical {
  border: 1px dotted #0a2c43; }

.vis-time-axis .vis-grid.vis-odd {
  background: #061e2e; }

.vis-time-axis .vis-grid.vis-saturday {
  background: rgba(233, 194, 5, 0.1); }

.vis-time-axis .vis-grid.vis-sunday {
  background: rgba(191, 21, 47, 0.23); }

.vis-time-axis .vis-text {
  color: #fff;
  font-variant: small-caps; }

.vis-text.vis-saturday {
  color: orange; }

.vis-text.vis-sunday {
  color: red; }

/*.vis-time-axis .vis-grid.vis-march.vis-day6, .vis-time-axis .vis-grid.vis-march.vis-day7 {
    background: rgba(255, 0, 0, 0.1);
}
.vis-text.vis-march.vis-day6, .vis-text.vis-march.vis-day7 {
    color: red;
}*/
.vis-nested-group {
  color: #fff;
  background-color: #0a2c43; }

.vis-nested-group:nth-child(2) {
  color: #fff;
  background-color: #214660; }

.vis-nesting-group + .vis-nested-group {
  color: #fff;
  background-color: #2c3e50; }

.vis-item.vis-range .vis-item-content {
  text-align: left;
  font-size: 12px;
  padding: 7px; }

.vis-inner {
  margin-left: 12px;
  height: 59px;
  line-height: 16px; }

.vis-nested-group > .vis-inner {
  height: 30px; }

.vis-item {
  border-top: 0px;
  border-bottom: 0px;
  border-right: 0px;
  border-left: 0px;
  /*border-left: 2px solid #f06d48;*/
  background-color: rgba(39, 51, 168, 0.7);
  color: #212a8a; }

.vis-item.vis-selected {
  border: 2px;
  background: #38586e !important;
  z-index: 2; }

.vis-label.vis-nesting-group.collapsed:before, .vis-label.vis-nesting-group.expanded:before {
  content: "";
  position: absolute;
  margin-top: 24px;
  display: inline-block;
  width: 10px;
  height: 10px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  margin-left: 1px;
  transform: rotate(45deg);
  /*@include animation(turn-right, 0.2s, linear);*/ }

.vis-label.vis-nesting-group.expanded:before {
  transform: rotate(135deg);
  /*@include animation(turn-bottom, 0.2s, linear);*/ }

.vis-tooltip {
  font-size: 11px !important;
  line-height: 14px !important;
  background-color: rgba(50, 50, 50, 0.8) !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
  border-width: .5px;
  color: #fff !important;
  padding: 3px !important; }

/* 2024 SUOMEN PYHÄPÄIVÄT 
1.1.2024 Uudenvuodenpäivä (ma)
29.3.2024 Pitkäperjantai (pe)
1.4.2024 Toinen pääsiäispäivä (ma)
1.5.2024 Vappupäivä (ke)
9.5.2024 Helatorstai (to)
6.12.2024 Suomen itsenäisyyspäivä (pe)
25.12.2024 Joulupäivä (ke)
26.12.2024 Tapaninpäivä eli toinen joulupäivä (to)*/
.vis-time-axis .vis-grid.vis-january.vis-day1 {
  background: rgba(255, 0, 0, 0.1); }

.vis-text.vis-january.vis-day1 {
  color: red; }

.vis-time-axis .vis-grid.vis-january.vis-day6 {
  background: rgba(255, 0, 0, 0.1); }

.vis-text.vis-january.vis-day6 {
  color: red; }

.vis-time-axis .vis-grid.vis-march.vis-day29 {
  background: rgba(255, 0, 0, 0.1); }

.vis-text.vis-march.vis-day29 {
  color: red; }

.vis-time-axis .vis-grid.vis-april.vis-day1 {
  background: rgba(255, 0, 0, 0.1); }

.vis-text.vis-april.vis-day1 {
  color: red; }

.vis-time-axis .vis-grid.vis-may.vis-day1 {
  background: rgba(255, 0, 0, 0.1); }

.vis-text.vis-may.vis-day1 {
  color: red; }

.vis-time-axis .vis-grid.vis-may.vis-day9 {
  background: rgba(255, 0, 0, 0.1); }

.vis-text.vis-may.vis-day9 {
  color: red; }

.vis-time-axis .vis-grid.vis-june.vis-day21 {
  background: rgba(255, 0, 0, 0.1); }

.vis-text.vis-june.vis-day21 {
  color: red; }

.vis-time-axis .vis-grid.vis-june.vis-day22 {
  background: rgba(255, 0, 0, 0.1); }

.vis-text.vis-june.vis-day22 {
  color: red; }

.vis-time-axis .vis-grid.vis-november.vis-day11 {
  background: rgba(255, 0, 0, 0.1); }

.vis-text.vis-november.vis-day11 {
  color: red; }

.vis-time-axis .vis-grid.vis-december.vis-day6 {
  background: rgba(255, 0, 0, 0.1); }

.vis-text.vis-december.vis-day6 {
  color: red; }

.vis-time-axis .vis-grid.vis-december.vis-day24 {
  background: rgba(255, 0, 0, 0.1); }

.vis-text.vis-december.vis-day24 {
  color: red; }

.vis-time-axis .vis-grid.vis-december.vis-day25 {
  background: rgba(255, 0, 0, 0.1); }

.vis-text.vis-december.vis-day25 {
  color: red; }

.vis-time-axis .vis-grid.vis-december.vis-day26 {
  background: rgba(255, 0, 0, 0.1); }

.vis-text.vis-december.vis-day26 {
  color: red; }

/* 2023 SUOMEN PYHÄPÄIVÄT LOPPU */
.item1-ballast, .item1-ballast-ops, .item1-ballast-sandbox, .item1-ballast-ops-sandbox {
  height: 48px;
  line-height: 15px;
  top: 5px !important;
  background-color: rgba(39, 51, 168, 0.7) !important;
  color: #212a8a !important; }

.item1-status0, .item1-status0-ops, .item1-status0-sandbox, .item1-status0-ops-sandbox {
  border: 0px;
  background-color: rgba(244, 67, 54, 0.5);
  color: #FFEBEE;
  height: 48px;
  line-height: 15px;
  top: 5px !important; }

.item1-status1, .item1-status1-ops, .item1-status1-sandbox, .item1-status1-ops-sandbox {
  border: 0px;
  background-color: rgba(255, 152, 0, 0.5);
  color: #FFF8E1;
  height: 48px;
  line-height: 15px;
  top: 5px !important; }

.item1-status2, .item1-status2-ops, .item1-status2-sandbox, .item1-status2-ops-sandbox {
  border: 0px;
  background-color: rgba(27, 94, 32, 0.5);
  color: #E8F5E9;
  height: 48px;
  line-height: 15px;
  top: 5px !important; }

.item1-status3, .item1-status3-ops, .item1-status3-sandbox, .item1-status3-ops-sandbox {
  border: 0px;
  background-color: rgba(24, 155, 33, 0.5);
  color: #E8F5E9;
  height: 48px;
  line-height: 15px;
  top: 5px !important; }

.item1-status4, .item1-status4-ops, .item1-status4-sandbox, .item1-status4-ops-sandbox {
  border: 0px;
  background-color: rgba(142, 68, 173, 0.5);
  color: #E8F5E9;
  height: 48px;
  line-height: 15px;
  top: 5px !important; }

.item1-status5, .item1-status5-ops, .item1-status5-sandbox, .item1-status5-ops-sandbox {
  border: 0px;
  background-color: rgba(149, 165, 166, 0.5);
  color: #E8F5E9;
  height: 48px;
  line-height: 15px;
  top: 5px !important; }

.item1-status6, .item1-status6-ops, .item1-status6-sandbox, .item1-status6-ops-sandbox {
  border: 0px;
  background-color: rgba(54, 244, 240, 0.5);
  color: #E8F5E9;
  height: 48px;
  line-height: 15px;
  top: 5px !important; }

.item1-status7, .item1-status7-ops, .item1-status7-sandbox, .item1-status7-ops-sandbox {
  border: 0px;
  background-color: rgba(235, 127, 200, 0.5);
  color: #E8F5E9;
  height: 48px;
  line-height: 15px;
  top: 5px !important; }

.item1-status8, .item1-status8-ops, .item1-status8-sandbox, .item1-status8-ops-sandbox {
  border: 0px;
  background-color: rgba(97, 189, 104, 0.5);
  color: #E8F5E9;
  height: 48px;
  line-height: 15px;
  top: 5px !important; }

.item1-status9, .item1-status9-ops, .item1-status9-sandbox, .item1-status9-ops-sandbox {
  border: 0px;
  background-color: rgba(180, 180, 0, 0.5);
  color: #E8F5E9;
  height: 48px;
  line-height: 15px;
  top: 5px !important; }

.item1-ballast-ops, .item1-status0-ops, .item1-status1-ops, .item1-status2-ops, .item1-status3-ops, .item1-status4-ops, .item1-status5-ops, .item1-status6-ops, .item1-status7-ops, .item1-status8-ops, .item1-status9-ops, .item1-ballast-ops-sandbox, .item1-status0-ops-sandbox, .item1-status1-ops-sandbox, .item1-status2-ops-sandbox, .item1-status3-ops-sandbox, .item1-status4-ops-sandbox, .item1-status5-ops-sandbox, .item1-status6-ops-sandbox, .item1-status7-ops-sandbox, .item1-status8-ops-sandbox, .item1-status9-ops-sandbox {
  top: 12px !important;
  height: 64px; }

.item1-ballast-sandbox, .item1-ballast-ops-sandbox, .item1-status0-sandbox, .item1-status0-ops-sandbox, .item1-status1-sandbox, .item1-status1-ops-sandbox, .item1-status2-sandbox, .item1-status2-ops-sandbox, .item1-status3-sandbox, .item1-status3-ops-sandbox, .item1-status4-sandbox, .item1-status4-ops-sandbox, .item1-status5-sandbox, .item1-status5-ops-sandbox, .item1-status6-sandbox, .item1-status6-ops-sandbox, .item1-status7-sandbox, .item1-status7-ops-sandbox, .item1-status8-sandbox, .item1-status8-ops-sandbox, .item1-status9-sandbox, .item1-status9-ops-sandbox {
  border-bottom: 3px solid #F06D48; }

.item1 {
  border: 0px;
  top: 5px !important;
  line-height: 15px; }

/*.item1 .vis-item-content, .item1-sandbox .vis-item-content {
    padding:0px !important;
    padding-left:5px !important;
    line-height: 15px;
}*/
.item2 {
  border: 0px;
  background-color: #4183D7; }

.item3 {
  border: 0px;
  background-color: #F7CA18; }

.item8 {
  border: 0px;
  background-color: #CF000F;
  color: #E9E9E9; }

.item2bg, .item2bg-ops {
  border: 0px;
  background-color: #4183D7 !important;
  opacity: 0.7;
  height: 4px !important;
  margin-top: 52px !important;
  -webkit-border-radius: 2px !important;
  -moz-border-radius: 2px !important;
  -ms-border-radius: 2px !important;
  border-radius: 2px !important; }

.item3bg, .item3bg-ops {
  border: 0px;
  background-color: #F7CA18 !important;
  opacity: 0.7;
  height: 4px !important;
  margin-top: 54px !important;
  -webkit-border-radius: 2px !important;
  -moz-border-radius: 2px !important;
  -ms-border-radius: 2px !important;
  border-radius: 2px !important; }

.item8bg, .item8bg-ops {
  border: 0px;
  background-color: #CF000F !important;
  opacity: 0.8;
  height: 6px !important;
  margin-top: 52px !important;
  -webkit-border-radius: 2px !important;
  -moz-border-radius: 2px !important;
  -ms-border-radius: 2px !important;
  border-radius: 2px !important; }

.item2bg-ops, .item3bg-ops, .item8bg-ops {
  margin-top: 76px !important; }

.itemportbg, .itemportbg-ops {
  border: 0px;
  background-color: #999 !important;
  opacity: 0.8;
  height: 5px !important; }

.itemanchorbg, .itemanchorbg-ops {
  border: 0px;
  background-color: #BB8800 !important;
  opacity: 0.8;
  height: 5px !important; }

.itemseabg, .itemseabg-ops {
  border: 0px;
  background-color: #2733a8 !important;
  opacity: 0.7;
  height: 5px !important; }

.itemseabg-ops, .itemportbg-ops, .itemanchorbg-ops {
  height: 12px !important; }

.item4, .item4-sandbox {
  border: 0px;
  background-color: #fff;
  color: #000;
  z-index: 2;
  line-height: 12px;
  height: 48px; }

.item5, .item5-sandbox {
  border: 0px;
  background-color: green;
  color: #000;
  z-index: 2;
  line-height: 12px;
  height: 48px; }

.item6, .item6-sandbox {
  border: 0px;
  background-color: orange;
  color: #000;
  z-index: 2;
  line-height: 12px;
  height: 48px; }

.item7, .item7-sandbox {
  border: 0px;
  background-color: #cb0000;
  color: #fff;
  z-index: 2;
  line-height: 12px;
  height: 48px; }

.item4-sandbox, .item5-sandbox, .item6-sandbox, .item7-sandbox {
  border-bottom: 3px solid #F06D48; }

/* Button groups and styles */
.flexgroup {
  color: #6c899b;
  width: 100%;
  display: -webkit-flex;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap; }

.btn-select {
  font-size: 12px;
  color: #6c899b;
  background-color: Transparent;
  border: 2px solid #214660;
  padding: 3px 12px;
  -webkit-border-radius: 12px !important;
  -moz-border-radius: 12px !important;
  -ms-border-radius: 12px !important;
  border-radius: 12px !important;
  display: -webkit-flex;
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 30px;
  cursor: pointer;
  margin-bottom: 5px; }

.btn-select:hover {
  border: 2px solid #22a7f0;
  color: #fff; }

.btn-close {
  color: #fff;
  font-size: 20px;
  cursor: pointer; }

.btn-close:hover {
  color: #22a7f0; }

/* status indicators, highlights and background colors */
.bggreen {
  background-color: #1fa663 !important; }

.bgbrown {
  background-color: #f45b04 !important; }

.bgred {
  background-color: #bf152f !important; }

.bordergreen {
  border-color: #1fa663; }

.borderbrown {
  border-color: #f45b04; }

.borderred {
  border-color: #bf152f; }

.on-time:hover {
  border-color: #1fa663 !important;
  color: #fff; }

.slight-delay:hover {
  border-color: #f45b04 !important;
  color: #fff; }

.delay:hover {
  border-color: #bf152f !important;
  color: #fff; }

.textwhite {
  color: #fff; }

.textgreen {
  color: #1fa663; }

.textbrown {
  color: #f45b04; }

.textred {
  color: #bf152f; }

.textblue {
  color: #22a7f0; }

.dur_icon {
  vertical-align: middle;
  margin-bottom: 2px; }

/* Positions page */
::-webkit-scrollbar {
  width: 0px; }

::placeholder {
  /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #6c899b;
  opacity: 1;
  /* Firefox */ }

:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: #6c899b; }

::-ms-input-placeholder {
  /* Microsoft Edge */
  color: #6c899b; }

.smallheader {
  line-height: 10px;
  font-size: 10px;
  color: #6c899b;
  padding-bottom: 5px; }

.pos_input {
  font: 12px lato !important;
  width: 100%;
  background-color: #214660 !important;
  color: #fff;
  border-radius: 5px !important;
  border: none !important;
  margin-bottom: 5px;
  padding: 5px 0px 5px 5px !important; }

.pos_inputdatetime {
  font: 12px lato !important;
  width: 40px;
  background-color: #214660 !important;
  color: #fff;
  border-radius: 5px !important;
  border: none !important;
  text-align: center;
  padding: 0px !important; }

.positions_main {
  background-color: #061e2e;
  color: #6c899b;
  top: 55px;
  position: absolute;
  bottom: 0;
  overflow-y: auto;
  width: 100%;
  padding: 0px 5px; }

.positions_main md-autocomplete {
  background: #0a2c43; }

.pboxarea {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(auto-fill, minmax(315px, auto));
  grid-gap: 16px; }

.pbox {
  background-color: #0a2c43;
  position: relative; }

.pboxheader {
  font-size: 16px;
  height: 40px;
  background-color: #214660;
  display: -webkit-flex;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 10; }

.pboxheadertext {
  color: #fff;
  padding: 0px 10px 0px 10px; }

.pboxcontent {
  height: 160px;
  overflow-x: hidden;
  overflow-y: scroll; }

.pboxcontentline {
  color: #6c899b;
  border-top: 1px solid #214660; }

.pboxcontenttable {
  display: table;
  width: 100%; }

.pboxcontenttablebody {
  display: table-row-group; }

.pboxcontenttablerow {
  display: table-row; }

.pboxcontenttablestatus {
  display: table-cell;
  width: 6px; }

.pboxcontenttableleft {
  padding-top: 3px;
  display: table-cell;
  font-size: 14px;
  padding-left: 4px;
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; }

.pboxcontenttableleft:hover {
  overflow: visible; }

.pboxcontenttableeta {
  display: table-cell;
  max-width: 55px;
  font-size: 10px;
  text-align: right;
  padding-right: 5px; }

.pboxcontenttabledate {
  display: table-cell;
  width: 85px;
  font-size: 14px;
  text-align: right;
  padding-right: 5px; }

.pboxcontenttabletime {
  display: table-cell;
  width: 50px;
  font-size: 14px;
  text-align: right;
  padding-right: 5px; }

.pboxcontenttableinfo {
  display: table-cell;
  width: 25px;
  font-size: 10px;
  text-align: right;
  padding-right: 10px; }

.pboxcontenttableedit {
  display: table-cell;
  width: 15px;
  font-size: 14px;
  text-align: center;
  padding-right: 10px; }

.pboxnotes {
  width: 100%;
  display: flex; }

.pboxnotestext {
  font-size: 12px;
  max-width: 350px;
  padding: 5px;
  height: 40px;
  overflow-y: auto; }

.pboxnotesstatus {
  width: 6px; }

.pboxfooter {
  height: 20px;
  background-color: #214660;
  display: -webkit-flex;
  display: flex;
  justify-content: space-between;
  align-items: center; }

.pboxfootertext {
  color: #6c899b;
  padding: 0px 10px 0px 10px;
  font-size: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; }

.rtl {
  direction: rtl; }

/* Position box edit window */
.editWindowbg {
  /*display: none; */
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: black;
  background-color: rgba(0, 0, 0, 0.7); }

.pboxeditwindow {
  height: 100%;
  margin: auto;
  display: flex;
  flex-direction: column;
  min-width: 310px;
  max-width: 400px; }

.pboxeditheader {
  font-size: 16px;
  height: 40px;
  background-color: #214660;
  flex: none;
  display: -webkit-flex;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 50px;
  position: relative; }

.pboxeditcontent {
  background-color: #0a2c43;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  flex: auto; }

.pboxeditcontent .arrow {
  margin-bottom: 2px;
  margin-left: 5px; }

.pboxaddport {
  display: -webkit-flex;
  display: flex;
  border-top: 1px solid #214660; }

.pboxlineedit {
  display: -webkit-flex;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  padding: 5px 10px;
  width: 100%; }

.pboxeditfooter {
  height: 20px;
  background-color: #214660;
  flex: none;
  display: -webkit-flex;
  display: flex;
  justify-content: space-between;
  align-items: center; }

/* CS positions table */
#image-area {
  width: 1057px;
  margin-left: auto;
  top: 0px;
  margin-right: auto;
  position: absolute;
  left: 0;
  right: 0;
  color: #000; }

.tg td {
  font-family: Arial, sans-serif;
  font-size: 14px;
  padding: 10px 5px;
  border-style: solid;
  border-width: 1px;
  overflow: hidden;
  word-break: normal;
  border-color: black; }

.tg th {
  font-family: Arial, sans-serif;
  font-size: 14px;
  font-weight: normal;
  padding: 10px 5px;
  border-style: solid;
  border-width: 1px;
  overflow: hidden;
  word-break: normal;
  border-color: black; }

.tg .tg-lbzb {
  background-color: #fe0000;
  text-align: center;
  vertical-align: top; }

.tg .tg-fm8o {
  font-weight: bold;
  background-color: #fffe65;
  color: #9b9b9b;
  text-align: center;
  vertical-align: top; }

.tg .tg-dx8v {
  font-size: 12px;
  vertical-align: top;
  background-color: #fff; }

.tg th {
  font-weight: bold;
  background-color: #f56b00;
  text-align: center;
  vertical-align: top;
  color: #000; }

.tg .tg-f6z4 {
  font-size: 10px;
  background-color: #fffe65;
  text-align: center;
  vertical-align: top; }

.tg .tg-7ygo {
  background-color: #fffe65;
  text-align: center;
  vertical-align: top; }

.tg .tg-8led {
  background-color: #f56b00;
  text-align: center;
  vertical-align: top; }

.tg .tg-l5iw {
  background-color: #32cb00;
  text-align: center;
  vertical-align: top; }

/* Additional incident styles with _i ending*/
.pboxcontent_i {
  height: calc(100% - 60px);
  overflow-x: hidden;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch; }

.pboxarea_i {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(auto-fill, minmax(315px, auto));
  grid-gap: 16px;
  height: calc(100% - 43px);
  grid-auto-rows: minmax(300px, auto);
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch; }

.pboxfooter_i {
  height: 20px;
  background-color: #214660;
  display: -webkit-flex;
  display: flex;
  justify-content: space-between;
  align-items: center;
  bottom: 0;
  position: absolute;
  width: 100%; }

.pboxcontenttabletype_i, .pboxcontenttabletype_f {
  padding-top: 10px;
  padding-bottom: 5px;
  display: table-cell;
  font-size: 28px;
  height: 35px;
  padding-left: 4px;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; }

.pboxcontenttabletype_i:hover {
  overflow: visible; }

.pboxcontenttabletime_i, .pboxcontenttabletime_f {
  display: table-cell;
  width: 70px;
  font-size: 28px;
  text-align: right;
  padding-right: 15px; }

.pboxcontenttabletype_f, .pboxcontenttabletime_f {
  font-size: 14px;
  white-space: nowrap;
  padding-right: 10px; }

.pboxnotestext_i {
  font-size: 16px;
  line-height: 20px;
  max-width: 350px;
  height: 45px;
  padding-left: 5px;
  overflow-y: auto;
  color: #fff; }

.pboxmap_i, .pboxmap_f {
  top: 140px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0; }

.pboxmap_f {
  top: 110px; }

.map_i {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  position: absolute; }

.pboxcontenttableoldcase_i {
  padding-top: 5px;
  padding-bottom: 0px;
  display: table-cell;
  padding-left: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; }

.pboxcontenttabletypeoldcase_i:hover {
  overflow: visible; }

.nav_i {
  display: inline-block;
  min-width: 90px;
  margin: 0 5px 0 5px;
  cursor: pointer;
  text-align: center;
  border-bottom: 3px solid transparent; }

.nav_i.active {
  border-bottom-color: #22a7f0; }

.activegreen {
  border-bottom-color: #1fa663; }

.activebrown {
  border-bottom-color: #f45b04; }

.activered {
  border-bottom-color: #bf152f; }

.bgreen {
  border-color: #1fa663; }

.bbrown {
  border-color: #f45b04; }

.bred {
  border-color: #bf152f; }

.groupblock_i {
  left: 0;
  right: 0;
  padding: 15px;
  width: 100%;
  padding-bottom: 0px;
  border-radius: 5px;
  margin-bottom: 5px; }

.pboxcontentwrite_i {
  height: auto;
  padding: 10px;
  position: absolute;
  bottom: 150px !important;
  top: 40px !important;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  width: 100%; }

.pboxwritefooter_i {
  height: 150px;
  background-color: #214660;
  display: block;
  position: absolute;
  bottom: 0;
  width: 100%; }

.logwrite_i {
  font: 14px lato !important;
  width: 100%;
  height: 100px;
  border: none !important;
  margin-bottom: 5px;
  padding: 10px 5px 10px 10px !important;
  position: relative;
  background-color: #ecf3f8 !important;
  color: #000 !important;
  border-radius: 0; }

.pboxcontentread_i {
  height: auto;
  padding: 10px;
  position: absolute;
  bottom: 10px !important;
  top: 40px !important;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  width: 100%; }

.logtext_i {
  background: #38586e;
  color: #fff; }

.direct-chat-text a {
  color: #fff !important;
  text-decoration: underline; }

.newcase_i {
  font-size: 28px;
  top: -5px;
  position: absolute;
  right: 3px; }

.dynamic_i td {
  text-align: left;
  width: 85px; }

.newcaseplus_i {
  font-size: 120px;
  padding-top: 30px;
  text-align: center; }

.dynamic_pbox_i {
  min-width: 315px; }

.log_btn_i {
  margin-right: 5px;
  margin-left: 5px;
  font-size: 14px;
  color: #fff;
  opacity: 0.3;
  margin-top: 1px; }

.log_btn_i:hover {
  opacity: 0.7; }

/* Mobile  */
@media only screen and (max-width: 655px) {
  .writelog_i {
    grid-row: 2 / 4; }
  .readlog_mobile_i {
    grid-row: 4 / 6; }
  .readlog_mobile2_i {
    grid-row: 2 / 4; }
  .pboxarea_i {
    grid-auto-rows: minmax(250px, auto); }
  .newcaseplus_i {
    font-size: 100px;
    padding-top: 0; } }

/* Small devices (768px and down) */
@media only screen and (max-width: 768px) {
  .hide768 {
    display: none; }
  .nav_i {
    min-width: 50px; }
  .pboxwritefooter_i {
    height: 100px; }
  .logwrite_i {
    height: 50px; }
  .pboxarea_i {
    grid-template-columns: repeat(auto-fill, minmax(315px, auto)); }
  .pboxmap_i {
    display: none; }
  .pboxcontentwrite_i {
    bottom: 100px !important; } }

@media only screen and (max-width: 1050px) {
  .hide1050 {
    display: none; } }

@media only screen and (min-width: 990px) {
  .writelog_i {
    grid-row: 1 / 3; }
  .readlog_i {
    grid-row: 1 / 3; }
  .alerts_i {
    grid-column: 1;
    grid-row: 2; }
  .readlog_wide_i {
    grid-column: 2 / 5; }
  .readlog_wide2_i {
    grid-column: 2 / 4; }
  .dynamicdata_i {
    grid-column: 4;
    grid-row: 1 / 3; } }

@media only screen and (min-width: 1320px) {
  .voyagedata_i {
    grid-column: 4;
    grid-row: 1; }
  .support_i {
    grid-column: 4;
    grid-row: 2; }
  .writelog_wide_i {
    grid-column: 2 / 4; }
  .writelog_wide2_i {
    grid-column: 2 / 3; } }

@media only screen and (min-width: 1650px) {
  .readlog_i {
    grid-column: 4 / 6; }
  .readlog_i_dynamic {
    grid-column: 4 / 5; }
  .writelog_wide_i {
    grid-column: 2 / 4; }
  .writelog_wide2_i {
    grid-column: 2 / 4; }
  .dynamicdata_i {
    grid-column: 5; }
  .readlog_wide_i {
    grid-column: 2 / 6; }
  .readlog_wide2_i {
    grid-column: 2 / 5; } }

/* iPad mini */
.arrow_down_s {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 10px solid white;
  position: absolute;
  opacity: 0.9;
  margin-top: 4px;
  margin-left: 2px; }

.arrow_up_s {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 10px solid white;
  position: absolute;
  opacity: 0.9;
  margin-top: 4px;
  margin-left: 2px; }

table.contacts td {
  max-width: 150px !important; }

#setup h3 {
  font-size: 16px;
  line-height: 26px; }

::-webkit-input-placeholder {
  color: #4f7085 !important; }

/* Online users */
#online {
  right: 69px;
  top: 50px;
  position: fixed;
  width: 280px;
  max-height: 400px;
  box-sizing: border-box;
  z-index: 98;
  overflow-y: auto;
  background-color: #061e2e;
  line-height: 14px;
  font-size: 12px;
  color: #fff;
  overflow-y: auto;
  min-height: 220px; }

#online.ng-enter, #online.ng-leave {
  transition: all cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.5s; }

#online.ng-enter, #online.ng-leave.ng-leave-active {
  top: -349px; }

#online.ng-leave, #online.ng-enter.ng-enter-active {
  top: 50px; }

#online td, #online th {
  border: none !important; }

/* SW updates */
#updates {
  right: 100px;
  top: 50px;
  position: fixed;
  width: 480px;
  box-sizing: border-box;
  z-index: 98;
  overflow-y: auto;
  background-color: #061e2e;
  line-height: 14px;
  font-size: 12px;
  color: #fff;
  overflow-y: auto;
  height: 522px; }

#updates.ng-enter, #updates.ng-leave {
  transition: all cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.5s; }

#updates.ng-enter, #updates.ng-leave.ng-leave-active {
  top: -472px; }

#updates.ng-leave, #updates.ng-enter.ng-enter-active {
  top: 50px; }

/* Left menu */
@keyframes turn-right {
  0% {
    transform: rotate(135deg); }
  100% {
    transform: rotate(45deg); } }

@keyframes turn-bottom {
  0% {
    transform: rotate(45deg); }
  100% {
    transform: rotate(135deg); } }

@keyframes turn-left-right {
  0% {
    transform: rotate(225deg); }
  100% {
    transform: rotate(45deg); } }

@keyframes turn-right-left {
  0% {
    transform: rotate(45deg); }
  100% {
    transform: rotate(225deg); } }

.ng-hide {
  display: none !important;
  /* don't wait animation to end */ }

.arrow {
  margin: 1px;
  display: inline-block;
  width: 10px;
  height: 10px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  margin-left: 0px;
  margin-right: 5px; }

.arrow-top {
  transform: rotate(-45deg); }

.arrow-right {
  transform: rotate(45deg);
  vertical-align: -2px;
  margin-left: -2px;
  -webkit-animation: turn-right 0.2s linear;
  -moz-animation: turn-right 0.2s linear;
  -ms-animation: turn-right 0.2s linear;
  animation: turn-right 0.2s linear; }

.arrow-right2 {
  transform: rotate(45deg);
  vertical-align: -2px;
  margin-left: -2px;
  -webkit-animation: turn-left-right 0.5s linear;
  -moz-animation: turn-left-right 0.5s linear;
  -ms-animation: turn-left-right 0.5s linear;
  animation: turn-left-right 0.5s linear; }

.arrow-bottom {
  transform: rotate(135deg);
  -webkit-animation: turn-bottom 0.2s linear;
  -moz-animation: turn-bottom 0.2s linear;
  -ms-animation: turn-bottom 0.2s linear;
  animation: turn-bottom 0.2s linear; }

.arrow-left {
  transform: rotate(225deg);
  -webkit-animation: turn-right-left 0.5s linear;
  -moz-animation: turn-right-left 0.5s linear;
  -ms-animation: turn-right-left 0.5s linear;
  animation: turn-right-left 0.5s linear; }

.arrow-left2 {
  transform: rotate(225deg); }

/* Angular material custom styles */
md-checkbox ._md-icon, md-checkbox.md-default-theme:not([disabled]).md-primary.md-checked .md-ink-ripple, md-checkbox:not([disabled]).md-primary.md-checked .md-ink-ripple {
  border-style: none;
  -webkit-border-radius: 5px !important;
  -moz-border-radius: 5px !important;
  -ms-border-radius: 5px !important;
  border-radius: 5px !important;
  background-color: #061e2e; }

md-checkbox.md-default-theme.md-checked ._md-icon, md-checkbox.md-checked ._md-icon, md-checkbox:not([disabled]).md-primary.md-checked ._md-icon {
  border: 2px solid #22a7f0 !important;
  background-color: rgba(0, 0, 0, 0.5); }

md-checkbox.md-checked ._md-icon:after {
  left: 5.2px;
  top: 0.22px; }

md-checkbox.md-default-theme:not([disabled]).md-primary ._md-icon, md-checkbox:not([disabled]).md-primary ._md-icon {
  border: 2px solid #214660; }

md-select {
  margin: 0px;
  -webkit-border-radius: 14px !important;
  -moz-border-radius: 14px !important;
  -ms-border-radius: 14px !important;
  border-radius: 14px !important;
  max-width: 272px;
  border: 2px solid #22a7f0 !important;
  background-color: #0a2c43;
  font-size: 12px;
  padding: 5px 15px;
  margin-bottom: 5px; }

md-radio-button {
  margin-right: 5px; }

md-content.md-docs-dark-theme {
  background-color: #061e2e;
  padding-top: 3px; }

._md-select-value {
  min-height: auto;
  padding: 0px 0px 2px 0px;
  border: none !important;
  text-align: left; }

md-select.md-default-theme:focus:not([disabled]) ._md-select-value, md-select:focus:not([disabled]) ._md-select-value, md-select.md-default-theme ._md-select-value._md-select-placeholder, md-select ._md-select-value._md-select-placeholder {
  color: #fff; }

md-input-container.md-docs-dark-theme:not(.md-input-invalid).md-input-has-value label {
  color: #aec6d5 !important; }

md-select:not([disabled]):focus ._md-select-value {
  padding-bottom: 2px; }

/* button styles */
.close-x {
  position: absolute;
  width: 25px;
  right: 0;
  color: #fff;
  font-size: 20px;
  line-height: 20px;
  cursor: pointer; }

.close-x:hover {
  color: #22a7f0; }

.btn {
  padding: 5px 20px;
  -webkit-border-radius: 20px !important;
  -moz-border-radius: 20px !important;
  -ms-border-radius: 20px !important;
  border-radius: 20px !important;
  font-size: 12px; }

.btn-danger {
  color: #fff;
  background-color: transparent;
  border: 2px solid #bf152f; }

.btn-danger:hover, .btn-danger:active, .btn-danger:focus {
  background-color: #bf152f;
  border: 2px solid #bf152f; }

.btn-primary {
  color: #fff;
  background-color: #22a7f0;
  border: 2px solid #22a7f0; }

.btn-primary:hover, .btn-primary:active, .btn-active:focus {
  background-color: rgba(34, 167, 240, 0.7);
  border: 2px solid #22a7f0; }

.btn-info {
  color: #fff;
  background-color: #666;
  border-color: #666; }

.btn-success {
  color: #fff;
  background-color: transparent;
  border: 2px solid #1fa663; }

.btn-success:hover, .btn-success:active, .btn-success:focus {
  background-color: #1fa663;
  border: 2px solid #1fa663; }

.btn-rating {
  right: 10px;
  margin-top: 5px;
  position: absolute; }

.btn-cancel {
  margin-top: 5px; }

/* Icon styles */
.icon, .icon-text {
  display: inline-block;
  height: 25px;
  color: #fff;
  font-size: 19px;
  background-size: 100% 25px;
  background-repeat: no-repeat;
  vertical-align: middle; }

.icon:hover, .icon-text:hover {
  color: #22a7f0 !important; }

.icon-text {
  font-size: 14px; }

.map-icons {
  position: absolute;
  z-index: 50;
  top: 121px;
  width: 50px; }

.icon-map, .ol-control button {
  display: inline-block;
  color: #fff;
  -webkit-border-radius: 2px !important;
  -moz-border-radius: 2px !important;
  -ms-border-radius: 2px !important;
  border-radius: 2px !important;
  /*border: 2px solid $bg-color-4 !important;*/
  background-color: #061e2e;
  background-size: 70% 70%;
  width: 30px;
  height: 30px;
  background-repeat: no-repeat;
  background-position: 49% 49%;
  text-align: center;
  font-size: 22px;
  line-height: 25px; }

.icon-map:hover, .ol-control button:focus, .ol-control button:hover {
  /*border:2px solid $blue !important;*/
  background-color: #061e2e;
  color: #22a7f0 !important; }

.icon-share-loc {
  background-image: url("/img/fr_icons/png/fr_share_white.png");
  background-size: 45%;
  background-position: 43% 50%; }

.icon-share-loc:hover {
  background-image: url("/img/fr_icons/png/fr_share_blue.png"); }

.icon-labels {
  line-height: 30px; }

.icon-distance {
  background-image: url("/img/fr_icons/png/fr_distance_white.png");
  background-size: 55%;
  background-position: 50%; }

.icon-distance:hover {
  background-image: url("/img/fr_icons/png/fr_distance_blue.png"); }

.collapse:hover + .arrow, .collapse .arrow:hover {
  border-top: 2px solid #22a7f0 !important;
  border-right: 2px solid #22a7f0 !important; }

.icon-share {
  background-image: url("/img/fr_icons/png/fr_share_white.png");
  background-size: 72%;
  min-width: 25px; }

.icon-share:hover {
  background-image: url("/img/fr_icons/png/fr_share_blue.png"); }

.icon-world {
  background-image: url("/img/fr_icons/png/fr_world_white.png");
  background-position: 50% 49%;
  background-size: 55%; }

.icon-world:hover {
  background-image: url("/img/fr_icons/png/fr_world_blue.png"); }

.timeline-icons {
  position: absolute;
  right: 10px;
  height: 25px;
  z-index: 10; }

.timeline-icons .icon {
  margin: 0 3px 0 3px; }

.icon-cargo {
  background-image: url("/img/fr_icons/png/fr_cargo_white.png");
  background-size: 85%;
  min-width: 25px; }

.icon-cargo:hover, .icon-cargo-on {
  background-image: url("/img/fr_icons/png/fr_cargo_blue.png"); }

.icon-ops {
  background-image: url("/img/fr_icons/png/fr_ops_white.png");
  background-size: 75%;
  min-width: 25px; }

.icon-ops:hover, .icon-ops-on {
  background-image: url("/img/fr_icons/png/fr_ops_blue.png"); }

.icon-sandbox {
  background-image: url("/img/fr_icons/png/fr_sandbox_white.png");
  background-size: 92%;
  min-width: 25px; }

.icon-sandbox:hover, .icon-sandbox-on {
  background-image: url("/img/fr_icons/png/fr_sandbox_blue.png"); }

.icon-clipboard {
  background-image: url("/img/fr_icons/png/fr_html_white.png");
  background-size: 86%;
  min-width: 25px;
  position: absolute;
  right: 60px; }

.icon-clipboard:hover {
  background-image: url("/img/fr_icons/png/fr_html_blue.png"); }

.icon-footprint {
  background-image: url("/img/fr_icons/png/fr_footprint_white.png");
  background-size: 75%;
  min-width: 25px; }

.icon-footprint:hover {
  background-image: url("/img/fr_icons/png/fr_footprint_blue.png"); }

.icon-breakeven {
  background-image: url("/img/fr_icons/png/fr_breakeven_white.png");
  background-size: 75%;
  min-width: 25px;
  position: absolute;
  left: 10px;
  top: 6px; }

.icon-breakeven:hover {
  background-image: url("/img/fr_icons/png/fr_breakeven_blue.png"); }

.icon-collapse {
  margin-left: 8px;
  vertical-align: -2px;
  width: 12px;
  height: 12px; }

.icon-collapse:hover + .arrow {
  border-top: 2px solid #fff !important;
  border-right: 2px solid #fff !important; }

.icons-area {
  position: absolute;
  right: 35px;
  top: 10px; }

/* Openlayers specific styles */
.ol-control, .ol-control:hover, .ol-control:active {
  background: none; }

.ol-scale-line {
  left: 145px;
  bottom: 8px;
  /*border: 2px solid $bg-color-4 !important; */
  background-color: #061e2e;
  color: #fff; }

.ol-mouse-position {
  right: 10px;
  position: absolute;
  font-size: 10px;
  font-weight: 700;
  color: rgba(0, 0, 0, 0.7); }

.ol-attribution li {
  display: block !important;
  font-size: 12px;
  text-align: left;
  margin-bottom: 5px; }

.ol-zoom {
  left: 145px;
  top: 4px;
  width: 50px;
  z-index: 50; }

.ol-zoom .ol-zoom-in {
  border-radius: 2px 2px 0 0 !important; }

.ol-zoom .ol-zoom-out {
  border-radius: 0 0 2px 2px !important;
  margin-top: -1px; }

.ol-attribution, .ol-attribution:hover {
  color: #fff;
  bottom: 4px;
  right: 4px; }

.ol-attribution:not(.ol-collapsed) {
  background: #061e2e;
  opacity: 0.8; }

.ol-attribution ul {
  color: #fff;
  text-shadow: none; }

.ol-attribution li a {
  display: inline;
  text-align: left;
  padding: 5px; }

.pl10 {
  padding-left: 10px !important;
  text-align: left; }

.pr10 {
  padding-right: 10px !important;
  line-height: 26px; }

.not-allowed {
  cursor: not-allowed !important; }

li > a > .glyphicon {
  top: 3px; }

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

.clock {
  font-family: Lato, "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #fff;
  font-size: 24px;
  padding-top: 6px;
  margin-right: 10px;
  display: inline-block;
  position: relative; }

.tz {
  color: #fff;
  font-size: 10px;
  position: absolute;
  bottom: -21px;
  right: 4px;
  white-space: nowrap; }

.tz2 {
  color: #fff;
  font-size: 10px;
  position: absolute;
  bottom: -21px;
  right: 11px; }

.timetz {
  font-size: 10px;
  position: absolute;
  margin-top: -7px;
  margin-left: 2px; }

.inforadio {
  background-color: #0a2c43;
  -webkit-border-radius: 5px !important;
  -moz-border-radius: 5px !important;
  -ms-border-radius: 5px !important;
  border-radius: 5px !important;
  padding: 5px;
  padding-left: 13px;
  margin-bottom: 2px; }

.icons, .icons_nh {
  display: inline-block;
  opacity: 0.6;
  width: 25px; }

.drone_icon {
  width: 22px;
  opacity: 0.7;
  margin-top: -2px; }

.icons:hover, .drone_icon:hover {
  opacity: 1; }

.shipicon {
  opacity: 1;
  display: inline-block;
  width: 10px;
  height: 27px;
  transform: rotate(90deg);
  position: absolute;
  left: 84px;
  margin-top: -2px; }

.shipicon:hover {
  opacity: 0.7; }

.shipicon2 {
  opacity: 1;
  display: inline-block;
  width: 10px;
  height: 27px;
  transform: rotate(90deg);
  position: absolute;
  top: -20px; }

.shipicon2:hover {
  opacity: 0.7; }

.line {
  position: absolute;
  left: -10px;
  top: -11px;
  width: 158px; }

.mail {
  opacity: 1;
  display: inline-block;
  width: 16px;
  height: 16px; }

.mail:hover {
  opacity: 0.7; }

img.breakeven {
  width: 27px;
  position: absolute;
  left: 5px;
  top: 3px;
  opacity: 0.7; }

img.breakeven:hover {
  opacity: 1; }

.image {
  -webkit-border-radius: 5px !important;
  -moz-border-radius: 5px !important;
  -ms-border-radius: 5px !important;
  border-radius: 5px !important; }

.capture {
  right: 56px;
  position: absolute;
  top: 6px; }

.motionchart {
  margin-top: 0px;
  margin-left: 0px;
  margin-bottom: 15px;
  position: relative;
  width: 280px; }

.motionheader, .pitchheader {
  margin-top: -33px;
  font-size: 10px;
  color: #aec6d5;
  padding: 0;
  background-color: transparent;
  position: relative;
  height: auto; }

/* Map page ops Etas */
table.ops-etas {
  font-size: 14px;
  /*border-bottom: 1px solid #214660;*/
  border-left: 6px solid;
  background-color: #0a2c43;
  margin-top: 2px;
  width: 100%; }

table.ops-etas td {
  color: #fff;
  text-align: left;
  padding: 4px !important;
  line-height: 20px;
  width: 50px; }

/* TÄHÄN SAAKKA KÄYTY LÄPI */
#messages {
  margin-left: 5px; }

#mappanel {
  position: fixed;
  left: 0;
  margin: 0;
  right: 0;
  top: 50px;
  bottom: 0; }

.mapcontrol {
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  z-index: 50;
  color: #fff;
  width: 140px;
  overflow: hidden; }

.mapcontrol .header {
  position: relative;
  font-size: 12px;
  background-color: #061e2e;
  padding: 5px;
  width: 140px; }

.mapcontrol_bg {
  position: absolute;
  left: 0px;
  bottom: 0px;
  top: 0;
  z-index: 49;
  width: 140px;
  background-color: #214660;
  opacity: 1; }

.eventcontrol_bg {
  position: absolute;
  left: 0px;
  bottom: 0px;
  top: 50px;
  z-index: 49;
  width: 220px;
  background-color: #061e2e;
  opacity: 0.8; }

.maplabel {
  margin-left: 5px;
  padding-top: 3px;
  width: 100% !important;
  line-height: 12px !important;
  font-size: 12px;
  float: left;
  width: 50%;
  line-height: 31px;
  white-space: nowrap;
  font-weight: normal; }

.maplabel:hover {
  color: #bbb; }

.worldview {
  position: absolute;
  left: 150px;
  top: 176px;
  width: 26px;
  height: 26px;
  z-index: 20;
  opacity: 0.7; }

#loginpanel .md-button {
  color: #061e2e; }

#loginpanel .md-warn {
  color: #ff5722; }

/* New login */
.login-main {
  background-position: center center;
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-image: url(../img/earth.jpg);
  margin: 0;
  left: 0;
  right: 0;
  bottom: 0;
  top: 60px;
  position: fixed; }
  .login-main .inner {
    margin: auto;
    width: 700px;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    height: 350px;
    position: fixed;
    text-align: center; }
  .login-main a, .login-main a:hover {
    color: white;
    text-decoration: none;
    font-size: 20px;
    border: solid 2px;
    padding: 7px 20px; }
  .login-main .world {
    position: fixed;
    width: 200px;
    top: calc(50% + 80px);
    margin-left: 40px; }
  .login-main .logo-square {
    display: inline-block;
    width: 65px;
    height: 65px;
    border: solid 10px white;
    vertical-align: middle; }
  .login-main .logo-line {
    font-size: 70px !important;
    position: relative;
    margin-bottom: 15px; }
  .login-main .large-text {
    font-size: 62px;
    font-weight: 700;
    line-height: 64px; }
  .login-main .mid-text {
    font-size: 32px; }

.loginform {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  background-color: #061e2e;
  right: 0;
  height: 60px; }

#login {
  position: absolute;
  left: 252px;
  top: 6px; }

.logininputs {
  position: absolute;
  top: 12px;
  left: 0px; }

.warn {
  position: fixed;
  top: 10px;
  right: 10px;
  color: #6c899b;
  font-size: 10px;
  line-height: 14px;
  text-align: right;
  z-index: 101; }

.loginform .md-button, .forgotpassword .md-button {
  color: #fff;
  background-color: #22a7f0;
  -webkit-border-radius: 18px !important;
  -moz-border-radius: 18px !important;
  -ms-border-radius: 18px !important;
  border-radius: 18px !important;
  text-transform: capitalize; }

.loginform .md-button:hover, .logininput:hover, .forgotpassword .md-button:hover, .loginform .md-button:focus, .logininput:focus, .forgotpassword .md-button:focus {
  background-color: #22a7f0;
  opacity: 0.9; }

.logininput {
  background-color: rgba(158, 158, 158, 0.2);
  color: #fff;
  font-weight: normal;
  border: none;
  -webkit-border-radius: 18px !important;
  -moz-border-radius: 18px !important;
  -ms-border-radius: 18px !important;
  border-radius: 18px !important;
  display: inline-block;
  width: 120px;
  padding: 8px;
  white-space: normal;
  margin-left: 5px;
  height: 36px;
  transition: box-shadow 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), background-color 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  font-size: 14px; }

.logolarge {
  position: absolute;
  left: 20px;
  top: 109px;
  width: 620px; }

.forgotpassword {
  position: fixed;
  top: 60px;
  right: 0;
  z-index: 100;
  background-color: #061e2e;
  width: 300px;
  padding: 10px;
  color: #aec6d5;
  font-size: 12px;
  line-height: 16px; }

/* new login ends */
#planning {
  top: 50px;
  background-color: #061e2e;
  color: #fff;
  position: fixed;
  margin: 0;
  bottom: 0;
  left: 0;
  right: 0; }

#timeline {
  position: absolute;
  width: 60%;
  margin: 0;
  left: 0;
  top: 0;
  bottom: 0;
  padding-top: 1px;
  padding-bottom: 2px; }

#report {
  top: 50px;
  background-color: #061e2e;
  color: white;
  position: absolute;
  margin: 0;
  bottom: 0;
  left: 0;
  right: 0; }

.timelinetime {
  position: absolute;
  z-index: 10;
  left: 5px;
  top: 6px;
  font-size: 12px;
  font-variant-caps: small-caps; }

#planning_map {
  position: absolute;
  width: 40%;
  margin: 0;
  right: 0;
  top: 0;
  bottom: 0; }

#planning .mapstyles {
  position: absolute;
  left: 60%;
  margin-left: 50px;
  top: 13px; }

#planning .ol-zoom {
  top: 4px;
  left: 4px; }

#planning .ol-scale-line {
  left: 8px;
  bottom: 8px; }

#planning .ports {
  left: 60%;
  top: 10px;
  margin-left: 275px;
  position: absolute;
  z-index: 10; }

#planning .map-icons {
  top: 71px;
  left: 60%;
  margin-left: 7px; }

.ports md-checkbox ._md-icon {
  background-color: transparent; }

.portlabel {
  margin-left: 5px;
  padding-top: 3px;
  width: 100% !important;
  line-height: 12px !important;
  font-size: 10px;
  float: left;
  width: 50%;
  line-height: 31px;
  white-space: nowrap;
  font-weight: normal;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.9); }

.newvoyage {
  line-height: 14px;
  font-size: 12px;
  color: #fff;
  background-color: #061e2e;
  padding: 10px; }

.newvoyage2 {
  left: 0;
  top: 50px;
  bottom: 0;
  position: fixed;
  width: 320px;
  overflow-y: scroll;
  z-index: 20;
  box-sizing: border-box;
  border: 1px #222 solid; }

.prevport {
  position: absolute;
  right: 15px;
  margin-top: 22px;
  font-size: 20px; }

.roller {
  height: 100%;
  position: relative;
  white-space: nowrap;
  -webkit-animation: roller 12s linear infinite;
  -moz-animation: roller 12s linear infinite;
  -ms-animation: roller 12s linear infinite;
  animation: roller 12s linear infinite; }

@keyframes roller {
  0% {
    top: -100%; }
  10%, 45% {
    top: 0; }
  55%, 100% {
    top: -100%; } }

.rollmotionlatest {
  -webkit-animation: rollmotionlatest 8s linear infinite;
  -moz-animation: rollmotionlatest 8s linear infinite;
  -ms-animation: rollmotionlatest 8s linear infinite;
  animation: rollmotionlatest 8s linear infinite; }

.rollmotion24h {
  -webkit-animation: rollmotion24h 8s linear infinite;
  -moz-animation: rollmotion24h 8s linear infinite;
  -ms-animation: rollmotion24h 8s linear infinite;
  animation: rollmotion24h 8s linear infinite; }

.pitchmotionlatest {
  -webkit-animation: pitchmotionlatest 8s linear infinite;
  -moz-animation: pitchmotionlatest 8s linear infinite;
  -ms-animation: pitchmotionlatest 8s linear infinite;
  animation: pitchmotionlatest 8s linear infinite; }

.pitchmotion24h {
  -webkit-animation: pitchmotion24h 8s linear infinite;
  -moz-animation: pitchmotion24h 8s linear infinite;
  -ms-animation: pitchmotion24h 8s linear infinite;
  animation: pitchmotion24h 8s linear infinite; }

.newvoyage2.ng-enter, .newvoyage2.ng-leave, .newvoyage2.ng-enter, .newvoyage2.ng-leave {
  transition: all cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.5s; }

.newvoyage2.ng-enter, .newvoyage2.ng-leave.ng-leave-active, .newvoyage2.ng-enter, .newvoyage2.ng-leave.ng-leave-active {
  left: -320px; }

.newvoyage2.ng-leave, .newvoyage2.ng-enter.ng-enter-active, .newvoyage2.ng-leave, .newvoyage2.ng-enter.ng-enter-active {
  left: 0px; }

.newvoyage th {
  text-align: left;
  padding: 3px !important; }

.newvoyage td {
  text-align: left;
  font-size: 12px;
  padding: 3px !important;
  padding-top: 2px !important;
  padding-bottom: 2px !important; }

.starttime, .endtime, .centertime {
  position: absolute;
  margin-top: -5px;
  color: #fff;
  font-size: 10px;
  line-height: 12px; }

.endtime {
  right: 4px; }

.centertime {
  left: 35%; }

.obs, .load, .discharg, .notes, .warning, .prewarn {
  color: red;
  font-size: 9px;
  line-height: 14px;
  display: inline-block;
  background-color: #fff;
  opacity: 0.9;
  width: 16px;
  height: 13px;
  text-align: center;
  -webkit-border-radius: 30% !important;
  -moz-border-radius: 30% !important;
  -ms-border-radius: 30% !important;
  border-radius: 30% !important;
  font-weight: 900;
  margin-left: 2px; }

.load {
  color: green; }

.notes {
  color: #061e2e; }

.warning {
  color: #fff;
  background-color: #bf152f; }

.prewarn {
  color: #000;
  background-color: #e9c205; }

.timelinevoyid {
  height: 48px;
  width: 35px;
  font-size: 24px;
  line-height: 44px;
  text-align: center;
  display: inline-block;
  opacity: 0.8;
  top: 0px;
  position: absolute;
  margin-left: -5px; }

.timelinecontent, .timelinecontent2 {
  top: 0px;
  margin-left: 30px;
  position: absolute;
  display: inline-block; }

.timelinecontent2 {
  margin-left: 40px; }

.newvoyage md-content {
  display: inline;
  padding: 0; }

.newvoyage md-input {
  padding: 0; }

.newvoyage .md-input {
  padding: 0; }

.newvoyage md-input-container {
  margin: 0; }

.newvoyage input.event {
  margin-bottom: 0px; }

md-content.md-default-theme, md-content {
  color: #fff; }

.inline-b2 {
  display: inline-block;
  width: 115px;
  margin-left: 5px; }

.newvoyage td {
  width: 50%; }

.newvoyage mdp-date-picker .md-button.md-icon-button, mdp-time-picker .md-button.md-icon-button {
  margin: 0; }

.newvoyage .layout-align-start-start {
  height: 35px; }

md-autocomplete {
  display: inline-block;
  width: 100%;
  -webkit-border-radius: 5px !important;
  -moz-border-radius: 5px !important;
  -ms-border-radius: 5px !important;
  border-radius: 5px !important;
  color: #fff;
  height: 30px;
  background: #061e2e; }

.newvoyage .customvalue {
  padding: 9px;
  white-space: normal;
  margin-bottom: 0px;
  padding-left: 7px;
  height: 30px; }

.changeportbtn {
  right: 10px;
  margin-top: 45px;
  position: absolute; }

.addportbtn {
  left: 197px;
  margin-top: 10px;
  position: absolute; }

.btnright {
  right: 10px;
  margin-top: 15px;
  position: absolute; }

.right10 {
  right: 10px;
  position: absolute; }

.right5 {
  right: 5px;
  position: absolute; }

.right15 {
  right: 15px;
  position: absolute; }

.right0 {
  right: 0px;
  position: absolute; }

.bwl {
  color: #aaa;
  font-size: 10px; }

.newtimelineevent .eventupdate {
  width: 320px;
  overflow: hidden; }

.width100 {
  width: 100%; }

.newvoyage .inforadio {
  width: 49.5%;
  display: inline-block;
  margin-bottom: 3px; }

md-autocomplete input:not(.md-input) {
  font-size: 12px;
  width: 100%;
  padding: 0 15px;
  line-height: 30px;
  height: 30px; }

md-autocomplete md-autocomplete-wrap {
  height: 30px;
  -webkit-border-radius: 18px !important;
  -moz-border-radius: 18px !important;
  -ms-border-radius: 18px !important;
  border-radius: 18px !important;
  border: 2px solid #22a7f0 !important;
  background-color: #0a2c43 !important;
  color: #fff !important;
  font-size: 12px !important;
  padding: 5px 10px !important; }

md-autocomplete md-autocomplete-wrap input {
  border: none !important;
  padding: 0 !important;
  margin: 0;
  background-color: transparent !important;
  margin-top: -6px; }

md-autocomplete button {
  margin-top: -6px;
  margin-right: -2px; }

.newvoyage p {
  margin: 5px; }

.newvoyage input[type="number"] {
  padding: 8px;
  margin-bottom: 2px;
  padding-left: 15px;
  text-align: right; }

.markall {
  margin-left: 45px;
  margin-top: 10px; }

.legtotal {
  font-size: 10px;
  color: #aaa;
  position: absolute;
  right: 0px;
  margin-top: -13px; }

.rel {
  position: relative; }

.showallships {
  position: absolute;
  left: 5px;
  top: 33px;
  font-size: 12px; }

.openpositions {
  position: absolute;
  left: 5px;
  top: 10px;
  font-size: 12px; }

.openposbox {
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  position: fixed;
  width: 400px;
  height: 500px;
  box-sizing: border-box;
  z-index: 20;
  border: 1px #222 solid;
  line-height: 14px;
  font-size: 12px;
  color: #fff;
  background-color: #061e2e;
  padding: 10px;
  overflow-y: auto; }

.report {
  margin: auto;
  left: 0;
  right: 0;
  width: 400px;
  position: relative; }

.report2 {
  position: relative; }

.report .head {
  font-size: 28px !important;
  padding: 10px !important;
  line-height: 28px; }

.report .subhead {
  font-size: 18px !important;
  color: #aaa !important;
  padding-left: 10px !important;
  padding-bottom: 10px !important; }

.report th {
  padding-left: 10px !important;
  padding-top: 10px !important; }

.report2 .head {
  font-size: 18px !important;
  padding-bottom: 5px !important;
  line-height: 18px; }

.report2 .subhead {
  font-size: 14px !important;
  color: #aaa !important;
  padding-bottom: 5px !important; }

.report2 th {
  padding-top: 0px !important; }

.report2 td, .report2 th {
  width: 140px; }

.report .updated {
  position: absolute;
  right: 10px;
  margin-top: 11px;
  font-size: 13px; }

.report .inline-b {
  width: 60%; }

.report .customvalue {
  cursor: not-allowed; }

.report md-autocomplete, .report md-select {
  width: 100% !important;
  max-width: 394px !important; }

.report md-autocomplete[disabled] input {
  cursor: not-allowed;
  background-color: #061e2e !important;
  color: #fff;
  -webkit-border-radius: 5px !important;
  -moz-border-radius: 5px !important;
  -ms-border-radius: 5px !important;
  border-radius: 5px !important; }

md-tabs.md-default-theme .md-tab, md-tabs .md-tab {
  color: #fff; }

md-tabs.md-default-theme .md-tab.md-active, md-tabs .md-tab.md-active, md-tabs.md-default-theme .md-tab.md-active md-icon, md-tabs .md-tab.md-active md-icon, md-tabs.md-default-theme .md-tab.md-focused, md-tabs .md-tab.md-focused, md-tabs.md-default-theme .md-tab.md-focused md-icon, md-tabs .md-tab.md-focused md-icon {
  color: #fff;
  background-color: rgba(255, 255, 255, 0.1); }

.w40 {
  width: 35% !important; }

.w60 {
  width: 65% !important; }

.w160 {
  width: 160px; }

.report2 .w40 {
  width: 65px !important; }

.report2 .w60 {
  width: 200px !important; }

.report2 .inline-b {
  width: 160px !important; }

.report2 md-autocomplete, report2 .customvalue, report2 md-select {
  width: 276px; }

.report2 h4 {
  background-color: #333;
  padding-top: 10px;
  padding-bottom: 10px;
  margin: 1px;
  padding-left: 10px;
  margin-left: -4px;
  margin-right: -4px; }

.report2 .infoarea {
  padding: 0px;
  margin-left: 0px;
  margin-right: 0px; }

.report2 .infoarea th {
  padding: 3px !important;
  padding-top: 5px !important; }

.report2 .infoarea td {
  padding: 3px !important; }

.sharereport {
  position: relative; }

.sharereport .share_email {
  left: 242px; }

.sharereport .url {
  margin-top: 2px;
  margin-bottom: 6px; }

.sharereport .email_text {
  left: 245px; }

.sharereport2 {
  position: relative; }

.sharereport2 .url {
  margin-top: -13px;
  margin-bottom: 6px;
  font-size: 12px;
  width: 282px; }

.sharereport2 .share_email {
  left: 265px; }

.sharereport2 .email_text {
  left: 267px; }

.selectschedule {
  position: fixed;
  top: 50px;
  left: 0;
  background-color: #061e2e;
  right: 0;
  height: 35px;
  z-index: 10;
  overflow-x: hidden; }

.schedule_block {
  padding-top: 35px; }

.infolabel {
  width: 100% !important;
  line-height: 12px !important; }

.optionslabel {
  margin-bottom: 0;
  font-weight: 400;
  margin-left: 5px; }

.labelinfo {
  display: block;
  font-weight: normal;
  color: #aaa;
  margin-top: 10px;
  margin-bottom: 3px;
  margin-left: 2px;
  font-size: 12px; }

#search {
  padding-right: 30px;
  width: 160px;
  font-size: 12px;
  height: 25px;
  color: #fff;
  background-color: #0a2c43;
  border: 2px solid #22a7f0;
  -webkit-border-radius: 12px !important;
  -moz-border-radius: 12px !important;
  -ms-border-radius: 12px !important;
  border-radius: 12px !important;
  display: inline-block;
  line-height: 25px;
  margin-top: -2px; }

#search_glyph {
  position: absolute;
  font-size: 12px;
  left: 150px;
  margin-top: 10px;
  color: #38586e; }

.clearinput {
  position: absolute;
  left: 293px;
  color: black;
  font-weight: bold;
  font-size: 10px;
  margin-top: 4px;
  opacity: 0.5; }

.clearinput:hover {
  opacity: 1; }

.username {
  position: absolute;
  white-space: nowrap;
  font-size: 10px;
  left: -131px;
  width: 300px;
  text-align: center;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);
  color: white; }

.terminallabel {
  position: absolute;
  white-space: nowrap;
  font-size: 9px;
  left: -41px;
  width: 50px;
  text-align: center;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);
  color: white;
  top: 25px; }

#usernameinput {
  position: absolute;
  height: 23px;
  font-size: 11px;
  top: 4px;
  left: 160px;
  width: 150px;
  -webkit-border-radius: 13px !important;
  -moz-border-radius: 13px !important;
  -ms-border-radius: 13px !important;
  border-radius: 13px !important;
  padding-top: 4px;
  padding-bottom: 4px; }

.share, .share2, .share3 {
  position: absolute;
  width: 25px;
  height: 25px;
  right: 0px;
  opacity: 0.7;
  margin-top: -6px; }

.share2 {
  margin-top: -25px; }

.share3 {
  right: 38px;
  top: 3px;
  margin-top: 0px; }

.sharevoy {
  position: absolute;
  width: 25px;
  height: 25px;
  right: 35px;
  opacity: 0.7;
  margin-top: -25px; }

.url {
  border: 1px solid #666;
  -webkit-border-radius: 5px !important;
  -moz-border-radius: 5px !important;
  -ms-border-radius: 5px !important;
  border-radius: 5px !important;
  padding: 10px;
  margin-top: 13px;
  font-size: 11px;
  padding-left: 5px;
  padding-right: 5px;
  width: 243px; }

.share_email {
  width: 25px;
  left: 214px;
  opacity: 0.7;
  margin-top: -14px;
  position: absolute; }

img.costicon {
  position: absolute;
  width: 25px;
  height: 25px;
  right: 71px;
  opacity: 0.7;
  top: 3px; }

img.removeship {
  position: absolute;
  width: 25px;
  height: 25px;
  opacity: 0.7;
  right: 10px;
  margin-top: -37px; }

.share:hover, .share2:hover, .share3:hover, .share_email:hover, .sharevoy:hover, img.costicon:hover, img.footprinticon:hover, img.removeship:hover {
  opacity: 1; }

span.headertons {
  position: absolute;
  margin-top: -18px;
  font-size: 12px;
  color: #aaa;
  margin-left: 8px; }

.email_text {
  position: absolute;
  font-size: 8px;
  margin-top: 10px;
  left: 217px; }

#inforow {
  background-color: #061e2e;
  border-bottom: solid white 1px;
  line-height: 14px;
  font-size: 12px;
  color: #b9bdc0;
  padding-bottom: 10px; }

.h5, .h4 {
  margin-bottom: 5px;
  margin-top: 0px;
  color: white; }

.btn1 {
  padding-right: 4px;
  padding-left: 4px; }

.btn2 {
  padding-right: 4px;
  padding-left: 4px;
  position: absolute;
  margin-left: 2px; }

#ais, #loading, #emergency, #logbook, #navigation, #misc, #routeupload {
  padding: 10px;
  background-color: #061e2e;
  height: 100%;
  line-height: 12px;
  font-size: 11px;
  position: relative; }

.summary {
  position: relative;
  line-height: 18px;
  font-size: 14px;
  overflow-x: auto;
  width: 2400px; }

.names {
  position: relative;
  left: 0;
  top: 0;
  bottom: 0;
  float: left; }

.summaryvalues {
  margin-left: 20px;
  position: relative;
  top: 0;
  width: 200px;
  bottom: 0;
  float: left;
  color: #7dbde8; }

.values {
  margin-left: 10px;
  position: relative;
  top: 0;
  width: 2200px;
  bottom: 0;
  float: left;
  color: #7dbde8; }

.floatleft40 {
  float: left;
  margin-left: 10px;
  width: 40px; }

.floatleft65 {
  float: left;
  margin-left: 10px;
  width: 65px; }

.floatleft85 {
  float: left;
  margin-left: 10px;
  width: 85px; }

.expand {
  color: #fff;
  position: absolute;
  left: 100px;
  font-size: 20px;
  top: -1px;
  opacity: 0.5; }

.expand:hover {
  opacity: 0.8; }

.text_head {
  font-size: 10px;
  color: #777; }

.ais {
  margin-top: 5px;
  width: 170px; }

.ais th {
  font-weight: normal;
  font-size: 10px;
  opacity: 0.6;
  color: white;
  /*padding-left: 5px;
    padding-right: 5px;*/
  min-width: 50px; }

.ais td {
  font-size: 12px;
  opacity: 1;
  color: white; }

.ct {
  color: yellow !important; }

.automation {
  width: 310px; }

.automation th, .areas th, .schedule th {
  font-weight: normal;
  font-size: 10px;
  opacity: 0.6;
  color: #7dbde8;
  padding-left: 1px;
  padding-right: 0px; }

.automation td, .areas td, .schedule td {
  font-size: 12px;
  opacity: 1;
  color: #7dbde8; }

.areas th, .areas td, .schedule th, .schedule td {
  text-align: left;
  width: 158px; }

.schedule th {
  color: #cc66ff; }

.schedule td {
  color: #cc66ff; }

.schedulemap {
  position: relative;
  width: 128px;
  margin-right: 27px; }

.scheduletable td {
  padding-top: 6px !important;
  padding-bottom: 6px !important; }

.maxwidth td, .maxwidth th {
  max-width: 150px; }

.expandtimeline, .collapsetimeline {
  position: absolute;
  top: 3px;
  left: 60%;
  margin-left: -28px;
  width: 20px;
  z-index: 10;
  opacity: 0.8; }

.collapsetimeline {
  left: 100%;
  margin-left: -28px;
  top: 3px; }

.expandtimeline:hover, .collapsetimeline:hover {
  opacity: 1; }

.title {
  font-weight: bold !important;
  font-size: 10px !important;
  opacity: 0.8 !important; }

.markertitle {
  font-weight: bold;
  font-size: 14px;
  margin: 5px; }

.red2 {
  color: #ff0000 !important; }

.orange {
  color: #F89406 !important; }

.orange2 {
  color: #F89406 !important; }

.text_body {
  line-height: 16px;
  font-size: 14px;
  font-weight: 600;
  position: relative;
  height: 17px; }

.units {
  font-size: 10px; }

#spacing {
  margin-left: 3px;
  margin-right: 35px; }

#course {
  position: absolute;
  left: 0px;
  color: #f50330; }

#speed, .speed {
  position: absolute;
  left: 63px;
  color: #f50330; }

#heading {
  position: absolute;
  left: 145px;
  color: #f50330; }

.heading {
  position: absolute;
  left: 126px;
  color: #f50330; }

.dest {
  position: absolute;
  left: 117px;
  color: #f50330;
  font-size: 12px; }

#emergencyimg {
  width: 100%;
  height: auto; }

#loginpanel, #forgotpassword {
  height: 350px;
  width: 285px;
  margin: auto;
  left: 0px;
  right: 0px;
  top: 63px;
  bottom: 0px;
  position: absolute; }

.wellpadding {
  padding-top: 30px; }

.addressbook {
  max-height: 200px;
  overflow-y: auto; }

.userlist {
  max-height: 200px;
  overflow-y: auto;
  background-color: #214660;
  border-radius: 4px;
  padding: 6px 12px;
  color: #fff;
  border: solid 2px #214660; }

.mapstyles {
  position: absolute;
  left: 185px;
  top: 58px;
  z-index: 10;
  font-size: 12px !important;
  line-height: 12px;
  color: #fff;
  white-space: nowrap; }

._md-off, ._md-on {
  width: 15px !important;
  height: 15px !important;
  margin-top: 3px !important;
  border-color: rgba(0, 0, 0, 0.7) !important; }

._md-label {
  margin-left: 20px !important; }

.label {
  display: inline-flex;
  margin-left: 5px !important;
  color: rgba(0, 0, 0, 0.7); }

/* Map marker labels */
.popup-label {
  position: absolute;
  top: -16px;
  left: 16px;
  display: none;
  color: #000; }

.popup-label img {
  vertical-align: middle; }

.weatherlabel, .marineweatherlabel {
  background-color: #fff;
  border: 1px #444 solid;
  border-radius: 3px;
  -webkit-box-shadow: 3px 3px 8px 1px rgba(80, 80, 80, 0.6);
  -moz-box-shadow: 3px 3px 8px 1px rgba(80, 80, 80, 0.6);
  box-shadow: 3px 3px 8px 1px rgba(80, 80, 80, 0.6);
  color: #111;
  padding: 2px 3px;
  opacity: 0.9;
  font-size: 10px;
  white-space: nowrap; }

.aisotherlabel {
  position: absolute;
  left: -40px;
  top: -10px;
  background-color: #C5EFF7;
  border-radius: 3px;
  opacity: 0.9;
  font-size: 10px;
  color: #000;
  white-space: nowrap;
  display: none;
  z-index: 90; }

.aisotherlabel:hover {
  display: block; }

.aisotherlabelsmall {
  position: absolute;
  left: -40px;
  top: -10px;
  background-color: #C5EFF7;
  border-radius: 3px;
  opacity: 0.7;
  font-size: 10px;
  color: #000;
  white-space: nowrap; }

.aisotherlabelsmall:hover {
  display: none; }

.aisotherlabelsmall:hover + .aisotherlabel {
  display: block; }

.aisotherlabel:hover + .aisotherlabelsmall {
  display: none; }

.portslabel {
  position: absolute;
  left: 0px;
  top: 8px;
  background-color: #C5EFF7;
  border-radius: 3px;
  opacity: 0.9;
  font-size: 10px;
  color: #000;
  white-space: nowrap;
  display: none;
  z-index: 90; }

.portslabel:hover {
  display: block; }

.portslabelsmall {
  position: absolute;
  left: 0px;
  top: 8px;
  background-color: #C5EFF7;
  border-radius: 3px;
  opacity: 0.8;
  font-size: 10px;
  color: #000;
  white-space: nowrap; }

.portslabelsmall:hover {
  display: none; }

.portslabelsmall:hover + .portslabel {
  display: block; }

.portslabel:hover + .portslabelsmall {
  display: none; }

.mainlabel {
  position: absolute;
  left: -38px;
  top: -16px;
  background-color: #337ab7;
  border-radius: 3px;
  opacity: 0.9;
  font-size: 12px;
  color: #fff;
  white-space: nowrap;
  display: none;
  z-index: 45;
  padding: 1px; }

.mainlabel:hover {
  display: block !important; }

.mainlabelsmall {
  position: absolute;
  left: -38px;
  top: -16px;
  background-color: #337ab7;
  border-radius: 3px;
  opacity: 0.8;
  font-size: 12px;
  color: #fff;
  white-space: nowrap;
  padding: 1px; }

.mainlabelsmall:hover {
  display: none; }

.mainlabelsmall:hover + .mainlabel {
  display: block  !important; }

.mainlabel:hover + .mainlabelsmall {
  display: none; }

.mainlabel a, .mainlabel a:hover {
  color: white; }

.iceberglabel {
  background: rgba(0, 0, 0, 0.85);
  color: #fff;
  padding: 2px 4px;
  opacity: 1;
  white-space: nowrap;
  display: none;
  z-index: 45;
  position: absolute;
  left: -5px;
  border-radius: 4px;
  text-align: center;
  font-size: 12px;
  line-height: 16px; }

.iceberglabel:hover {
  display: block; }

.iceberglabelsmall {
  background: rgba(0, 0, 0, 0.85);
  color: #fff;
  padding: 2px 4px;
  white-space: nowrap;
  text-align: center;
  position: absolute;
  left: -5px;
  border-radius: 4px;
  font-size: 12px;
  line-height: 16px;
  z-index: 20; }

.iceberglabelsmall:hover {
  display: none; }

.iceberglabelsmall:hover + .iceberglabel {
  display: block; }

.iceberglabel:hover + .iceberglabelsmall {
  display: none; }

.logmarkerlabel {
  position: relative;
  background-color: rgba(1, 50, 67, 0.9);
  color: white;
  border: 1px solid white;
  border-radius: 4px;
  padding: 2px 4px;
  opacity: 1;
  max-width: 300px;
  text-align: center;
  z-index: 78;
  font-size: 12px;
  white-space: nowrap;
  left: -75px;
  top: -29px;
  width: 119px; }

.high-z {
  z-index: 30; }

.logmarkerlabel:before {
  border-top: 6px solid rgba(1, 50, 67, 0.9);
  border-right: 6px solid transparent;
  border-left: 6px solid transparent;
  content: "";
  position: absolute;
  bottom: -6px;
  margin-left: -7px;
  left: 50%; }

.wmslabel, .routeweatherlabel {
  background: rgba(0, 0, 0, 0.85);
  color: #fff;
  padding: 2px 4px;
  white-space: nowrap;
  text-align: center;
  position: absolute;
  left: -5px;
  border-radius: 4px;
  font-size: 12px;
  line-height: 16px;
  z-index: 20; }

.routeweatherlabel {
  text-align: left; }

.ptlabel {
  background: rgba(0, 0, 0, 0.85);
  color: #fff;
  padding: 2px 4px;
  white-space: nowrap;
  text-align: center;
  position: absolute;
  left: -5px;
  border-radius: 4px;
  font-size: 12px;
  line-height: 16px; }

.next {
  display: inline-block;
  height: 9px;
  margin-top: -13px;
  margin-left: 1px; }

.setuplabel {
  float: left;
  line-height: 30px; }

/*.arrow {
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    content: "";
    border-right: 6px solid black;
    border-right-color: inherit;
    position: absolute;
    left: -6px;
    top: 7px;
    opacity:1;
    color: #000;
}*/
.shortname {
  position: absolute;
  left: -22px;
  top: -16px;
  background-color: #337ab7;
  border-radius: 3px;
  opacity: 0.8;
  font-size: 12px;
  color: #fff;
  padding: 1px; }

.trackshiplabel {
  position: absolute;
  left: -30px;
  top: 37px;
  background-color: #e9c205;
  border-radius: 3px;
  opacity: 0.8;
  color: #000;
  font-size: 10px; }

.profile-img {
  font-size: 30px;
  border-radius: 50%;
  width: 25px;
  height: 25px;
  opacity: 1.0;
  background: #cccccc;
  margin-right: 5px;
  margin-left: -5px;
  margin-top: 2px;
  margin-bottom: 2px; }

.profile-img2 {
  font-size: 30px;
  border-radius: 50%;
  width: 25px;
  height: 25px;
  opacity: 1.0;
  background: #cccccc; }

.userimg {
  border-radius: 50%;
  width: 35px;
  height: 35px; }

.userlocationlabel {
  background-color: white;
  border-radius: 50%;
  padding: 3px;
  width: 41px;
  height: 41px;
  left: -37px;
  position: absolute;
  top: -7px;
  z-index: 10; }

.userloclabel2 {
  background-color: none;
  border-radius: 50%;
  padding: 2px;
  width: 29px;
  height: 29px;
  display: inline-block;
  margin-left: -5px;
  margin-top: 2px;
  margin-bottom: 2px; }

.crosstracklabel, .crosstracklabel2 {
  position: absolute;
  left: -48px;
  top: 0px;
  background-color: #bf152f;
  border-radius: 3px;
  opacity: 0.8;
  color: #fff;
  font-size: 10px;
  white-space: nowrap; }

.crosstracklabel2 {
  left: -70px; }

.cpalabel {
  position: absolute;
  left: -7px;
  top: 6px;
  background-color: #bf152f;
  border-radius: 3px;
  opacity: 0.5;
  color: #fff;
  font-size: 10px;
  white-space: nowrap; }

.navigationlabel {
  position: absolute;
  left: -75px;
  top: 8px;
  background-color: #bf152f;
  border-radius: 3px;
  opacity: 0.8;
  color: #fff;
  font-size: 10px;
  white-space: nowrap; }

.motionlabel {
  position: absolute;
  left: -1px;
  top: 8px;
  border-radius: 3px;
  opacity: 0.8;
  color: #fff;
  font-size: 10px;
  white-space: nowrap; }

.navstatlabel {
  position: absolute;
  left: -55px;
  top: 24px;
  background-color: #bf152f;
  border-radius: 3px;
  opacity: 0.8;
  color: #fff;
  font-size: 10px;
  white-space: nowrap; }

.triagelabel {
  position: absolute;
  left: -12px;
  top: 24px;
  border-radius: 3px;
  opacity: 0.8;
  color: #fff;
  font-size: 10px;
  white-space: nowrap; }

.schedulelabel {
  position: absolute;
  left: -2px;
  top: -9px;
  border-radius: 3px;
  opacity: 0.8;
  color: #fff;
  font-size: 10px;
  white-space: nowrap; }

.weathericon {
  width: 30px;
  height: 30px; }

.weathericon2 {
  width: 20px;
  height: 20px;
  margin-left: -5px; }

.weathericon3 {
  width: 25px;
  height: 25px;
  margin: 1px;
  border-radius: 3px; }

.weathericon4 {
  width: 20px;
  height: 20px; }

.tdleft {
  text-align: left; }

.daynight {
  opacity: 0.7;
  font-size: 10px;
  right: 30px;
  position: absolute;
  top: 1px; }

.moonrise {
  opacity: 0.7;
  font-size: 10px;
  right: 30px;
  position: absolute;
  top: 14px; }

.moon {
  width: 15px;
  height: 15px;
  margin-bottom: 3px; }

.file {
  border-radius: 5px;
  background-color: #34495e;
  padding: 8px;
  display: inline-block;
  margin: 5px;
  line-height: 14px; }

.file a {
  color: white; }

#routeuploadicon {
  bottom: -2px;
  position: absolute;
  top: 5px;
  right: -9px; }

.shipname {
  font-size: 10px;
  line-height: 12px;
  margin-bottom: 0px;
  font-family: "Lucida Console", Monaco, monospace;
  letter-spacing: 0px; }

.shipname:hover {
  color: #bbb; }

.shipname2 {
  font-size: 12px;
  line-height: 12px;
  margin-bottom: 3px; }

.shipname3 {
  font-size: 12px;
  line-height: 12px;
  margin-bottom: 4px;
  position: relative; }

.infotitle {
  position: absolute;
  top: -8px;
  left: 0;
  font-size: 8px; }

.navgreen {
  color: #2ecc71; }

.navbrown {
  color: #d35400; }

.navred {
  color: red; }

.navlightred {
  color: #ff5353;
  text-shadow: 0.5px 0.5px #000;
  font-size: 10px; }

.navyellow {
  color: #f4d03f; }

.navblue {
  /*color:#446cb3;*/
  color: #22a7f0; }

.navgrey {
  color: #abb7b7; }

#setup_main {
  top: 50px;
  margin: 0;
  left: 0;
  right: 0;
  bottom: 0;
  position: fixed;
  overflow-y: auto; }

#schedule_main, .tab_content {
  background-color: #061e2e;
  color: white;
  top: 84px;
  position: absolute;
  bottom: 0;
  overflow-y: auto;
  width: 100%; }

.inputarea {
  height: 40px; }

.setupinput {
  float: left;
  width: 50%; }

.navbar-collapse.in, .navbar-collapse.collapsing {
  overflow-y: visible; }

.cameraimage {
  width: 100%; }

#forecast, #camera, #camera2 {
  left: 135px;
  bottom: 1px;
  height: 325px;
  position: absolute;
  width: 470px;
  box-sizing: border-box;
  z-index: 100;
  resize: horizontal;
  overflow: auto; }

#camera2 {
  right: 1px;
  height: 295px;
  left: auto;
  top: 346px; }

#eventweather, #eventweather2 {
  transform: scale(0.65, 0.65);
  -ms-transform: scale(0.65, 0.65);
  /* IE 9 */
  -webkit-transform: scale(0.65, 0.65);
  margin-left: -95px;
  margin-top: -44px;
  position: relative;
  width: 470px;
  z-index: 80;
  overflow: hidden;
  height: 305px;
  margin-bottom: -40px; }

#eventweather td, #eventweather th {
  width: auto !important; }

.camerashipinfo {
  position: relative;
  margin-top: -20px;
  margin-left: -10px; }

#camera {
  height: 227px;
  right: 0px;
  left: auto;
  width: 349px; }

#shipinfobox header, #eventsinfobox header {
  font-size: 11px;
  line-height: 18px; }

#vesseldata {
  right: 320px;
  top: 50px;
  height: 300px;
  position: fixed;
  width: 380px;
  box-sizing: border-box;
  z-index: 100;
  /*border: 1px #222 solid;*/
  resize: both; }

.infowindowsbox {
  right: 0px;
  top: 50px;
  position: absolute;
  width: 320px;
  bottom: 0px;
  box-sizing: border-box;
  z-index: 80; }

#shipinfobox, #eventsinfobox {
  right: 0px;
  top: 50px;
  position: absolute;
  width: 320px;
  bottom: 0px;
  box-sizing: border-box;
  z-index: 80; }

.infowindowsbox.ng-enter, .infowindowsbox.ng-leave, #eventsinfobox.ng-enter, #eventsinfobox.ng-leave {
  transition: all cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.5s; }

.infowindowsbox.ng-enter, .infowindowsbox.ng-leave.ng-leave-active, #eventsinfobox.ng-enter, #eventsinfobox.ng-leave.ng-leave-active {
  right: -320px; }

.infowindowsbox.ng-leave, .infowindowsbox.ng-enter.ng-enter-active, #eventsinfobox.ng-leave, #eventsinfobox.ng-enter.ng-enter-active {
  right: 0px; }

.expanded {
  background-color: #061e2e; }

#new-events {
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  bottom: 0px;
  position: fixed;
  width: 550px;
  box-sizing: border-box;
  z-index: 50;
  overflow: auto;
  min-height: 35px;
  -webkit-border-radius: 2px !important;
  -moz-border-radius: 2px !important;
  -ms-border-radius: 2px !important;
  border-radius: 2px !important; }

#new-events.ng-enter, #new-events.ng-leave {
  transition: all cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.5s; }

#new-events.ng-enter, #new-events.ng-leave.ng-leave-active {
  bottom: -85px; }

#new-events.ng-leave, #new-events.ng-enter.ng-enter-active {
  bottom: 0px; }

.rating {
  position: relative;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  display: inline-block;
  border: 1px #444 solid;
  top: 2px; }

.hoverevent {
  position: absolute;
  width: 15px;
  height: 15px;
  display: inline-block;
  top: 9px;
  left: -23px; }

.whitetext {
  color: #fff !important; }

.probhead, .probhead2, .crewdiv {
  display: inline-block;
  height: 40px;
  width: 120px;
  border-radius: 5px;
  line-height: 40px;
  background-color: #214660;
  color: #fff;
  font-size: 12px;
  text-align: center;
  white-space: initial;
  margin-left: 0px; }

.probhead2 {
  line-height: 20px; }

.crewdiv {
  height: 100px;
  line-height: 15px;
  color: white;
  padding: 10px;
  width: 170px;
  margin-bottom: 10px; }

.black {
  color: black; }

.yes, .no, .yes1, .no1, .yes2 {
  left: 125px;
  display: inline-block;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  line-height: 40px;
  background-color: #aaa;
  color: #000;
  font-size: 14px;
  text-align: center;
  position: absolute; }

.no {
  left: 170px; }

.yes1, .no1 {
  left: 178px;
  margin-top: 30px; }

.no1 {
  left: 226px; }

.yes2 {
  left: 26px;
  margin-top: 0px;
  width: 30px;
  height: 30px;
  line-height: 30px;
  font-size: 12px; }

.notknown {
  left: 214px;
  display: inline-block;
  width: 53px;
  line-height: 20px;
  height: 40px;
  background-color: #aaa;
  color: #000;
  font-size: 14px;
  text-align: center;
  position: absolute; }

.yes:hover, .no:hover, .notknown:hover {
  color: #fff;
  background-color: #286090; }

.row1 {
  position: relative;
  margin-top: 10px; }

.m7 {
  margin-left: 7px;
  margin-bottom: 7px; }

.t7 {
  margin: 10px 3px 0 40px !important; }

.triage_logos {
  width: 49px;
  position: absolute; }

.nocategory {
  margin-left: 123px;
  width: 49px;
  margin-bottom: 20px; }

.h35 {
  height: 35px; }

.infobutton, .votebutton, .triagebutton {
  position: relative;
  width: 50px;
  height: 50px;
  border-radius: 5px;
  display: inline-block;
  margin: 3px;
  border: 1px #444 solid;
  margin-bottom: 19px; }

.votebutton {
  margin-left: 10px;
  margin-bottom: 28px;
  margin-top: 5px; }

.triagebutton {
  width: 75px;
  height: 75px;
  margin: 9px;
  margin-left: 0px; }

.ml {
  margin-left: 9px; }

.ml90 {
  float: right; }

.mt0 {
  margin-top: 0px; }

.sub {
  margin: 6px;
  margin-left: 0px;
  color: #aaa;
  position: relative;
  white-space: normal; }

.activecount {
  font-size: 50px;
  position: absolute;
  margin-top: 23px;
  margin-left: 10px; }

.countsub {
  font-size: 8px;
  position: absolute;
  margin-top: 50px;
  margin-left: 5px; }

.summarycrew {
  right: 2px;
  position: absolute; }

.summarypax {
  right: 2px;
  margin-top: 15px;
  position: absolute; }

.sub2 {
  margin-bottom: 4px;
  color: #aaa;
  position: relative;
  white-space: normal; }

.showtriage {
  right: 0px;
  position: absolute; }

.border-green {
  border-color: green; }

.border-red {
  border-color: red; }

.border-orange {
  border-color: orange; }

.border-yellow {
  border-color: yellow; }

.border-blue {
  border-color: blue; }

.greeninfo {
  background-color: #333;
  border-left: 10px solid green;
  border-radius: 5px;
  padding: 5px;
  color: #aaa;
  white-space: normal;
  text-align: center;
  margin-top: 10px;
  margin-bottom: 15px; }

.yellowinfo {
  background-color: #333;
  border-left: 10px solid yellow;
  border-radius: 5px;
  padding: 5px;
  color: #aaa;
  white-space: normal;
  text-align: center;
  margin-bottom: 15px; }

.orangeinfo {
  background-color: #333;
  border-left: 10px solid orange;
  border-radius: 5px;
  padding: 5px;
  color: #aaa;
  white-space: normal;
  text-align: center;
  margin-bottom: 15px; }

.redinfo {
  background-color: #333;
  border-left: 10px solid red;
  border-radius: 5px;
  padding: 5px;
  color: #aaa;
  white-space: normal;
  text-align: center;
  margin-bottom: 15px; }

.blackinfo {
  background-color: black;
  border-radius: 5px;
  padding: 5px;
  color: #aaa;
  border-left: 10px solid #00f;
  white-space: normal;
  text-align: center;
  margin-bottom: 15px; }

.remarks {
  resize: none;
  background-color: #0a2c43;
  border: none;
  border-radius: 5px;
  display: block;
  margin-bottom: 10px;
  width: 100%;
  height: 65px;
  margin-top: -10px;
  padding: 10px;
  font-size: 14px; }

textarea {
  background-color: #0a2c43 !important;
  color: #fff !important;
  font-weight: normal;
  border: none;
  border-radius: 5px;
  display: block;
  width: 100%;
  padding: 10px;
  position: relative;
  resize: none;
  font-size: 14px !important; }

.form-control:focus, input:focus {
  border: none;
  box-shadow: inset 5px 20px 3px rgba(0, 0, 0, 0.075), 0px 0px 2px rgba(102, 175, 233, 0.6); }

.form-control {
  border: none; }

input.event, .customvalue {
  -webkit-border-radius: 18px !important;
  -moz-border-radius: 18px !important;
  -ms-border-radius: 18px !important;
  border-radius: 18px !important;
  border: 2px solid #22a7f0 !important;
  background-color: #0a2c43 !important;
  color: #fff !important;
  font-size: 12px !important;
  padding: 5px 10px !important;
  display: block;
  width: 100%;
  white-space: normal;
  margin-bottom: 10px; }

.s_input {
  -webkit-border-radius: 18px !important;
  -moz-border-radius: 18px !important;
  -ms-border-radius: 18px !important;
  border-radius: 18px !important;
  border: 2px solid #22a7f0 !important;
  background-color: #0a2c43 !important;
  color: #fff !important;
  font-size: 12px !important;
  padding: 5px 10px !important;
  display: block;
  width: 272px;
  white-space: normal;
  margin-bottom: 10px; }

.customvalue a {
  color: #fff; }

.bottomtext, .bottomtext2, .bottomtext_nav {
  position: absolute;
  top: 52px;
  text-align: center;
  width: 50px;
  color: #aec6d5; }

.bottomtext2 {
  white-space: initial; }

.bottomtext_nav {
  margin-left: -4px; }

.insidetext, .insidetext2, .insidetext3, .insidetext4, .insidetext5 {
  position: absolute;
  top: 10px;
  width: 50px;
  text-align: center;
  white-space: initial;
  font-size: 11px;
  left: -1px; }

.insidetext2 {
  font-size: 28px;
  top: 17px; }

.insidetext3 {
  font-size: 11px;
  top: 15px;
  width: 65px;
  left: 4px; }

.insidetext4 {
  font-size: 11px;
  top: 10px;
  width: 65px;
  left: 4px; }

.insidetext5 {
  text-shadow: 1px 1px 2px black; }

.insidetext6 {
  position: absolute;
  top: 8px;
  width: 50px;
  text-align: center;
  white-space: initial;
  font-size: 24px;
  left: -1px; }

.insidetext7 {
  position: absolute;
  top: 18px;
  width: 50px;
  text-align: center;
  white-space: initial;
  font-size: 24px;
  left: -1px; }

.redbg {
  background-color: #d40000 !important; }

.greenbg {
  background-color: #1E824C !important; }

.orangebg {
  background-color: #f89406 !important; }

.yellowbg {
  background-color: yellow !important; }

.bluebg {
  background-color: #214478 !important; }

.nobg {
  background-color: none; }

.graybg {
  background-color: #aaa !important; }

.displaynone {
  display: none; }

.yellow {
  color: yellow; }

.red {
  color: red; }

.green {
  color: green; }

.blue {
  color: #3498db; }

.emerald {
  color: #2ecc71; }

.training {
  color: #666;
  position: absolute;
  left: 190px;
  font-size: 10px; }

.graytext {
  color: #aec6d5;
  font-size: 11px; }

.graytextsmall {
  color: #aec6d5;
  font-size: 9px; }

.orangetext {
  color: #f89406;
  font-size: 16px !important; }

.gt {
  font-size: 10px;
  font-weight: 700;
  color: #666;
  margin-bottom: 5px; }

.fs11 {
  font-size: 11px; }

.fs12 {
  font-size: 12px; }

.fs14 {
  font-size: 14px; }

.caseclosed {
  color: #aaa;
  position: absolute;
  left: 197px;
  margin-top: 1px;
  font-size: 11px; }

.badge1 {
  display: inline-block;
  min-width: 10px;
  padding: 3px 7px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  border-radius: 10px; }

.rated-header {
  margin-left: 4px;
  padding-bottom: 5px; }

.textinput2 {
  margin-top: 10px;
  margin-bottom: 5px;
  word-break: break-word;
  height: 54px !important;
  border-bottom-width: 0;
  border-radius: 5px;
  padding-right: 25px;
  border: solid #222 0px;
  background-color: #444;
  color: #eee; }

.right-icons {
  margin-left: 135px;
  font-size: 10px; }

.shiplist_box {
  overflow-y: auto;
  max-height: 100%;
  margin-right: -100px;
  padding-right: 100px; }

.shiplist_box md-checkbox {
  margin-left: 3px;
  margin-top: 3px;
  margin-bottom: 3px; }

.shiplist_box section.ng-hide {
  opacity: 0; }

.shiplist_box section.ng-hide-add,
.shiplist_box section.ng-hide-remove {
  transition: all linear 0.3s; }

.shiplist {
  position: relative;
  white-space: nowrap;
  font-size: 12px;
  width: 130px;
  overflow: hidden; }

.hide-scroll2 {
  overflow: hidden;
  position: absolute;
  left: 0px;
  top: 35px;
  color: #fff;
  bottom: 0px;
  z-index: 99;
  width: 600px;
  height: calc(100vh - 100px);
  height: -o-calc(100vh - 100px);
  /* opera */
  height: -webkit-calc(100vh - 100px);
  /* google, safari */
  height: -moz-calc(100vh - 100px);
  /* firefox */ }

.shipsvg:hover {
  opacity: 0.6; }

.openhistory {
  line-height: 22px;
  font-size: 11px;
  color: #fff !important;
  cursor: pointer;
  float: right;
  margin-right: 35px; }

.leftpanel {
  position: absolute;
  top: 50px;
  bottom: 0;
  width: 135px;
  z-index: 70;
  background-color: #061e2e; }

.leftpanel.ng-enter, .leftpanel.ng-leave {
  transition: all cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.5s; }

.leftpanel.ng-enter,
.leftpanel.ng-leave.ng-leave-active {
  left: -135px; }

.leftpanel.ng-leave,
.leftpanel.ng-enter.ng-enter-active {
  left: 0px; }

.leftpanel2 {
  position: absolute;
  height: 100%;
  width: 220px;
  z-index: 70; }

.leftpanel2 .leftpanel_hide {
  left: 225px; }

.leftpanel_small {
  position: absolute;
  left: 8px;
  top: 57px;
  z-index: 51;
  color: white;
  opacity: 0.7;
  width: 35px; }

.leftpanel_small:hover {
  opacity: 1;
  cursor: pointer; }

/* Events */
#eventsmappanel {
  position: absolute;
  margin: 0;
  right: 0;
  top: 50px;
  bottom: 0;
  left: 600px; }

#events .rating {
  width: 25px;
  height: 25px; }

#events .leftpanel.ng-leave.ng-leave-active {
  left: -135px; }

#events .leftpanel {
  position: absolute;
  left: 0;
  top: 50px;
  width: 600px;
  bottom: 0;
  overflow-y: auto; }

#events .map-icons {
  left: 607px; }

#events .map-icons-right {
  position: absolute;
  right: 5px;
  top: 80px;
  left: auto;
  width: 30px; }

#events .mapstyles {
  left: 645px; }

#events .votebutton {
  margin-left: 14px; }

#events .badge {
  opacity: 0.7; }

#events .ol-scale-line {
  left: 4px;
  bottom: 4px; }

#events .ol-zoom {
  left: 4px; }

.large {
  font-size: 20px !important; }

.large2 {
  font-size: 20px;
  line-height: 20px; }

.editvoyid {
  width: 60px;
  display: inline-block; }

.editvoyid ._md-select-value ._md-select-icon {
  right: 25px;
  position: absolute; }

.wmstime {
  position: absolute;
  bottom: 25px;
  left: 150px;
  right: 50px; }

.wmslegend {
  position: absolute;
  right: 0px;
  top: 50px;
  bottom: 0px;
  width: 50px;
  overflow: hidden;
  opacity: 1; }

.legendimg {
  top: 0px;
  position: absolute; }

.wmslegend2 {
  position: absolute;
  right: 0px;
  top: 75px;
  overflow: hidden;
  max-height: 90%; }

/* Weather slider */
.rzslider .rz-bubble {
  bottom: 20px;
  padding: 1px 3px;
  color: #fff !important;
  cursor: default;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 5px; }

.custom-slider.rzslider .rz-bar {
  background: #22a7f0;
  height: 3px; }

.rzslider .rz-pointer, .rzslider .rz-tick {
  background: #22a7f0; }

.rzslider .rz-pointer.rz-active:after {
  background: #000; }

.static-slider {
  position: absolute;
  left: 20px;
  right: 20px;
  width: 95%;
  bottom: 10px; }

.wmsopacity {
  position: absolute;
  width: 150px !important;
  right: 0px; }

.shipbutton {
  width: 25px;
  height: 20px;
  border-radius: 3px;
  display: inline-block;
  font-size: 11px;
  text-align: center;
  margin: 3px;
  line-height: 20px; }

.infoarea {
  position: relative; }

.infoarea table, .newvoyage table {
  width: 100%; }

.infoarea th {
  font-weight: normal;
  color: #aaa;
  opacity: 1.0;
  text-align: left;
  padding: 3px !important;
  padding-top: 2px !important;
  padding-bottom: 2px !important; }

.infoarea td {
  text-align: left;
  font-size: 12px;
  padding: 3px !important;
  padding-top: 2px !important;
  padding-bottom: 2px !important; }

.infoarea .attach {
  position: absolute;
  right: 5px;
  margin-top: -25px;
  z-index: 10;
  font-size: 20px;
  cursor: pointer;
  opacity: 0.7;
  top: auto; }

.infoarea .thumbnail {
  top: auto;
  margin-top: -63px;
  right: 2px; }

.report2 .thumbnail {
  left: 254px; }

.report2 .attach {
  left: 254px; }

.infoarea md-radio-button ._md-container {
  margin-left: 10px;
  margin-top: -1px; }

.newvoyage md-radio-button ._md-container {
  margin-left: 7px;
  margin-top: -1px; }

md-icon, .infoarea md-input-container .md-input, .newvoyage md-input-container .md-input {
  color: #fff !important;
  max-width: 137px; }

md-icon {
  vertical-align: 2px; }

.tab-content md-icon {
  margin-left: 6px; }

md-input-container label {
  color: #aec6d5;
  font-weight: normal;
  font-size: 12px; }

.infoarea md-input-container label, .newvoyage md-input-container label {
  color: #aec6d5;
  margin-left: 10px; }

.infoarea .layout-align-start-start {
  height: 50px; }

.infoarea md-input-container.md-default-theme:not(.md-input-invalid).md-input-has-value label, .infoarea md-input-container:not(.md-input-invalid).md-input-has-value label {
  color: rgba(255, 255, 255, 0); }

.inline-b {
  display: inline-block; }

.infoarea h1 {
  font-size: 14px; }

.infoarea h2 {
  font-size: 12px;
  margin-bottom: 5px;
  margin-top: 5px; }

.infoarea .h2 {
  font-size: 12px;
  margin: 10px;
  display: inline-block; }

.adjusteta {
  position: absolute;
  background-color: #666666;
  left: 0px;
  width: 100%;
  padding-left: 10px;
  margin-top: -32px;
  height: 35px; }

.picturelist {
  position: absolute;
  margin-top: 198px;
  width: 100%; }

.cameracaret {
  position: absolute;
  right: 10px;
  top: 14px; }

.right15 {
  position: absolute;
  right: 15px; }

.checklistentry {
  margin-left: 40px;
  margin-top: -27px;
  margin-bottom: 10px; }

.complete {
  margin-left: 20px;
  margin-bottom: 20px; }

div.complete {
  margin-bottom: 10px;
  margin-top: -10px; }

.pointer {
  cursor: pointer; }

.link {
  color: #f06d48;
  opacity: 0.7; }

.notfor {
  color: #bbb;
  font-size: 10px; }

.dlecdisroute, .activateroute {
  opacity: 0.7;
  width: 20px;
  margin-left: 5px;
  margin-right: 5px; }

.dlecdisroute:hover, .activateroute:hover {
  opacity: 1; }

.ml150 {
  margin-left: 150px; }

.ml140 {
  margin-left: 140px; }

.ml71 {
  margin-left: 71px; }

.ml10 {
  margin-left: 10px; }

.ml11 {
  margin-left: 11px; }

.ml6 {
  margin-left: 2px; }

.ml77 {
  margin-left: 77px; }

.mt-10 {
  margin-top: -10px;
  margin-bottom: -11px; }

.next_caret {
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 6px dashed;
  margin-left: 6px !important;
  margin-top: -2px;
  margin-right: -6px; }

.back_caret {
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-right: 6px dashed;
  margin-left: -10px !important;
  margin-top: -3px;
  margin-right: 1px; }

.up_caret {
  border-bottom: 6px dashed;
  border-right: 6px solid transparent;
  border-left: 6px solid transparent;
  margin-left: 6px !important;
  margin-top: -3px;
  margin-right: -6px;
  border-top: none; }

.manual {
  width: 100%;
  white-space: normal; }

.manual > a {
  color: #fff; }

.clicked {
  background-color: #214478;
  color: white; }

.notclicked {
  background-color: #aaa;
  color: black; }

.triage_well {
  background-color: #0a2c43;
  border: none;
  margin-bottom: 7px;
  margin-top: 5px;
  margin-right: -5px;
  padding: 10px; }

.triage_well2 {
  background-color: #0a2c43;
  border: none;
  margin-bottom: 10px;
  margin-top: 10px;
  padding: 5px; }

#chat {
  right: 0;
  top: 50px;
  position: fixed;
  box-sizing: border-box;
  z-index: 98;
  width: 400px;
  height: 522px; }

#chat.ng-enter, #chat.ng-leave {
  transition: all cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.5s; }

#chat.ng-enter, #chat.ng-leave.ng-leave-active {
  top: -471px; }

#chat.ng-leave, #chat.ng-enter.ng-enter-active {
  top: 50px; }

#chat .content {
  color: #aec6d5;
  overflow-y: hidden; }

.well {
  background-color: #0a2c43;
  color: #fff;
  border: none; }

.wellexecutiveteam, .wellsafetyteam, .welltechnicalteam {
  width: 150px;
  display: inline-block;
  text-align: center; }

.wellexecutiveteam {
  color: #fff !important;
  background-color: #2c3e50 !important; }

.wellsafetyteam {
  color: #fff !important;
  background-color: #4DAF7C !important; }

.welltechnicalteam {
  color: #fff !important;
  background-color: #59ABE3 !important; }

.wellrouteupload, .alarmsettingswell {
  background-color: #111 !important;
  border-radius: 0px !important;
  top: 268px;
  position: absolute;
  left: -1px;
  width: 380px;
  border: 1px #444 solid;
  padding: 8px;
  padding-top: 4px; }

.wellroutedata {
  max-height: 200px;
  overflow-y: auto;
  font-size: 12px;
  margin-top: 5px;
  margin-right: -5px; }

.triage_logo {
  width: 60px;
  margin-top: 5px;
  position: absolute; }

.triagepdf {
  right: 0px;
  position: absolute;
  height: 25px;
  opacity: 0.6;
  margin-top: -6px; }

.triagepdf:hover {
  opacity: 1; }

.triage_status {
  display: inline-block;
  margin-top: 5px;
  min-height: 60px;
  width: 152px;
  margin-left: 5px;
  margin-bottom: 5px;
  background-color: #0a2c43;
  border: none;
  white-space: initial;
  overflow: hidden;
  margin-left: 70px;
  padding: 7px; }

.triage_nav {
  margin-left: 8px;
  width: 288px;
  color: #aec6d5;
  font-size: 11px; }

.crewbox {
  position: relative;
  height: 49px; }

.crew, .pax {
  position: absolute;
  width: 85px;
  height: 25px;
  line-height: 25px;
  font-size: 16px;
  text-align: center;
  color: #fff;
  background-color: #0a2c43;
  border-radius: 5px;
  display: inline-block;
  margin: 6px;
  margin-bottom: 20px;
  top: 2px;
  margin-left: 0px; }

.pax {
  left: 93px; }

.bottomtext_crew {
  position: absolute;
  top: 20px;
  text-align: center;
  width: 108px;
  color: #aec6d5;
  left: -10px;
  font-size: 11px; }

.crew_btn {
  font-size: 10px;
  height: 33px;
  line-height: 10px;
  position: absolute;
  top: 8px;
  right: 0;
  width: 32%; }

.crew_caret {
  margin-top: -10px;
  margin-left: 2px; }

.basecosts_btn {
  font-size: 10px;
  height: 33px;
  line-height: 10px;
  float: right;
  text-align: left;
  padding-left: 10px;
  padding-right: 9px; }

.infodatacontainer {
  position: relative;
  height: 185px;
  width: 100%;
  margin-top: 15px; }

.infodata {
  position: absolute;
  height: 40px;
  width: 220px;
  left: 0px; }

.current {
  top: -5px; }

.etd {
  top: 35px; }

.eta {
  top: 35px;
  left: 200px; }

.xtegroup {
  top: 100px; }

.xtelimit {
  top: 100px;
  left: 200px; }

.distance {
  top: -5px;
  left: 200px; }

.inputmessage {
  color: #aec6d5;
  font-size: 11px;
  margin-top: -20px;
  padding-bottom: 10px;
  position: absolute; }

.inputmessage2 {
  color: #aec6d5;
  font-size: 11px; }

.inputmessage3 {
  color: #aec6d5;
  font-size: 11px; }

.members {
  overflow-y: auto;
  max-height: 100px; }

.groupmembers td {
  text-align: left; }

header {
  position: absolute;
  right: 0;
  left: 0;
  font-size: 14px;
  height: 30px;
  padding: 5px;
  padding-left: 10px;
  background-color: #0a2c43;
  opacity: 1;
  color: #fff;
  display: inline-flex;
  width: 100%; }

.content {
  top: 30px;
  left: 0;
  right: 0;
  bottom: 0;
  position: absolute;
  background-color: #061e2e;
  line-height: 14px;
  font-size: 12px;
  color: #fff;
  overflow: hidden;
  overflow-y: auto; }

.content2, .content3, .content_info {
  top: 30px;
  left: 0;
  right: 0;
  bottom: 0;
  position: absolute;
  background-color: #000;
  line-height: 14px;
  font-size: 12px;
  color: #666666;
  overflow-y: scroll;
  overflow-x: hidden; }

.cameracontent {
  margin-top: 30px;
  top: auto;
  bottom: auto;
  overflow: hidden; }

#route {
  height: 28px;
  margin-left: -3px;
  margin-top: -1px; }

table.weather th, table.weather td {
  padding-left: 5px !important;
  text-align: left !important; }

table.weather {
  display: inline-block; }

.table > tbody > tr > td, .table > tbody > tr > th, .table > tfoot > tr > td, .table > tfoot > tr > th, .table > thead > tr > td, .table > thead > tr > th {
  border-top: 1px solid #214660; }

/* measure ol3 */
.tooltip-base {
  position: relative;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 4px;
  color: white;
  padding: 2px 4px;
  opacity: 1;
  max-width: 300px;
  text-align: center;
  z-index: 78; }

.tooltip-clickmenu, .tooltip-layermarker {
  position: relative;
  background: rgba(0, 0, 0, 0.85);
  border-radius: 4px;
  color: white;
  padding: 2px 4px;
  opacity: 1;
  max-width: 300px;
  text-align: center;
  z-index: 78;
  font-size: 12px;
  line-height: 16px;
  max-height: 500px;
  overflow-y: auto; }

.tooltip-layermarker {
  text-align: left; }

.tooltip-measure {
  opacity: 1;
  font-weight: bold; }

.tooltip-static {
  background-color: #f06d48;
  color: white;
  border: 1px solid white; }

.tooltip-logarea, .tooltip-point {
  background-color: rgba(1, 50, 67, 0.9);
  color: white;
  border: 1px solid white;
  font-size: 12px; }

.tooltip-measure:before,
.tooltip-static:before, .tooltip-logarea:before, .tooltip-point:before {
  border-top: 6px solid rgba(0, 0, 0, 0.5);
  border-right: 6px solid transparent;
  border-left: 6px solid transparent;
  content: "";
  position: absolute;
  bottom: -6px;
  margin-left: -7px;
  left: 50%; }

.tooltip-static:before {
  border-top-color: #f06d48; }

.tooltip-logarea:before, .tooltip-point:before {
  border-top-color: rgba(1, 50, 67, 0.9); }

/* measure ol3 ends */
.swellarrow {
  width: 12px;
  height: 12px;
  margin-bottom: 2px; }

.windarrow {
  width: 15px;
  height: 15px;
  margin-bottom: 2px; }

.angularjs-datetime-picker, ._md-select-menu-container._md-active {
  z-index: 200; }

.mobilechat {
  position: fixed;
  display: none; }

.routes {
  display: inline-block;
  padding: 5px;
  padding-left: 15px;
  padding-right: 15px;
  font-size: 16px;
  color: #9d9d9d; }

.routes:hover {
  color: #fff; }

.routes:focus {
  background-color: #061e2e;
  color: #fff; }

.routesub {
  font-size: 18px;
  margin-top: 5px;
  text-align: center; }

.flag {
  position: relative;
  height: 20px;
  margin-bottom: 20px;
  margin-top: 0px;
  margin-left: 10px;
  margin-right: 10px;
  width: 40px; }

.flag2 {
  position: relative;
  height: 13px;
  margin-top: -3px;
  margin-left: 0px;
  width: 25px; }

tr.completed > td {
  color: #999; }

.routeclock {
  position: absolute;
  margin-left: -51px;
  font-size: 16px;
  margin-top: 18px; }

.subheader {
  background-color: #F89406;
  padding: 2px !important;
  color: #000 !important;
  opacity: 1 !important; }

.time {
  font-size: 24px; }

.arrow_up {
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid black;
  display: inline-block;
  margin-left: 10px; }

.arrow_down {
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid black;
  display: inline-block;
  margin-left: 10px; }

.arrow_down_w {
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid white;
  display: inline-block;
  margin-right: 5px; }

.arrow_down_w2 {
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid white;
  position: absolute;
  opacity: 0.7;
  margin-left: -6px; }

.arrow_up_w2 {
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid white;
  position: absolute;
  opacity: 0.7;
  margin-left: -6px; }

.arrow_right_w {
  width: 0;
  height: 0;
  border-bottom: 6px solid transparent;
  border-top: 6px solid transparent;
  border-left: 6px solid white;
  display: inline-block;
  margin-right: 5px; }

.arrow_right_camera {
  width: 0;
  height: 0;
  border-bottom: 20px solid transparent;
  border-top: 20px solid transparent;
  border-left: 15px solid white;
  display: inline-block;
  opacity: 0.5;
  position: absolute;
  right: 5px;
  margin-top: 55px; }

.arrow_left_camera {
  width: 0;
  height: 0;
  border-bottom: 20px solid transparent;
  border-top: 20px solid transparent;
  border-right: 15px solid white;
  display: inline-block;
  opacity: 0.5;
  position: absolute;
  left: 5px;
  margin-top: 55px; }

.arrow_left_camera:hover, .arrow_right_camera:hover {
  opacity: 1; }

.arrowpadding_right, .arrowpadding_left {
  height: 150px;
  width: 60px;
  position: absolute;
  right: 0px;
  margin-top: 30px; }

.arrowpadding_left {
  left: 0px; }

.arrow_down2 {
  width: 0;
  height: 0;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  border-top: 20px solid #fff;
  display: inline-block;
  position: absolute;
  bottom: 20px;
  left: 0;
  right: 0;
  margin: auto;
  opacity: 0.7; }

.arrow_down2:hover {
  opacity: 1; }

.scroll_down {
  position: absolute;
  bottom: 40px;
  left: 0;
  right: 0;
  margin: auto;
  opacity: 0.7;
  width: 111px;
  color: #fff;
  font-size: 12px;
  white-space: nowrap; }

table.events td {
  text-align: center;
  white-space: nowrap; }

md-toolbar.md-default-theme.md-menu-toolbar, md-toolbar.md-menu-toolbar {
  background-color: transparent !important;
  width: 200px !important;
  color: #fff; }

md-menu-item {
  color: #fff; }

md-menu-content {
  background-color: #061e2e;
  border: solid 1px white; }

md-menu-item > .md-button {
  color: #fff; }

md-menu-bar.md-default-theme md-menu._md-open > button, md-menu-bar md-menu._md-open > button, md-menu-bar.md-default-theme md-menu > button:focus, md-menu-bar md-menu > button:focus {
  background: #214660; }

md-option {
  height: 36px; }

md-optgroup label {
  padding: 10px;
  font-weight: 500;
  margin-bottom: 0px; }

md-radio-button.md-default-theme ._md-on, md-radio-button ._md-on, md-radio-button.md-default-theme.md-checked ._md-off, md-radio-button.md-checked ._md-off {
  background-color: #22a7f0; }

.filterchat, .selectrecipient {
  margin: 0;
  display: inline-block;
  margin-top: -7px; }

.selectrecipient {
  margin-left: 0; }

#chat ._md-select-value, #chat md-select:focus:not([disabled]) ._md-select-value {
  border-bottom: none;
  color: #fff; }

.rotate_0 {
  -ms-transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg); }

.rotate_5 {
  -ms-transform: rotate(5deg);
  -webkit-transform: rotate(5deg);
  transform: rotate(5deg); }

.rotate_10 {
  -ms-transform: rotate(10deg);
  -webkit-transform: rotate(10deg);
  transform: rotate(10deg); }

.rotate_15 {
  -ms-transform: rotate(15deg);
  -webkit-transform: rotate(15deg);
  transform: rotate(15deg); }

.rotate_20 {
  -ms-transform: rotate(20deg);
  -webkit-transform: rotate(20deg);
  transform: rotate(20deg); }

.rotate_25 {
  -ms-transform: rotate(25deg);
  -webkit-transform: rotate(25deg);
  transform: rotate(25deg); }

.rotate_30 {
  -ms-transform: rotate(30deg);
  -webkit-transform: rotate(30deg);
  transform: rotate(30deg); }

.rotate_35 {
  -ms-transform: rotate(35deg);
  -webkit-transform: rotate(35deg);
  transform: rotate(35deg); }

.rotate_40 {
  -ms-transform: rotate(40deg);
  -webkit-transform: rotate(40deg);
  transform: rotate(40deg); }

.rotate_45 {
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg); }

.rotate_50 {
  -ms-transform: rotate(50deg);
  -webkit-transform: rotate(50deg);
  transform: rotate(50deg); }

.rotate_55 {
  -ms-transform: rotate(55deg);
  -webkit-transform: rotate(55deg);
  transform: rotate(55deg); }

.rotate_60 {
  -ms-transform: rotate(60deg);
  -webkit-transform: rotate(60deg);
  transform: rotate(60deg); }

.rotate_65 {
  -ms-transform: rotate(65deg);
  -webkit-transform: rotate(65deg);
  transform: rotate(65deg); }

.rotate_70 {
  -ms-transform: rotate(70deg);
  -webkit-transform: rotate(70deg);
  transform: rotate(70deg); }

.rotate_75 {
  -ms-transform: rotate(75deg);
  -webkit-transform: rotate(75deg);
  transform: rotate(75deg); }

.rotate_80 {
  -ms-transform: rotate(80deg);
  -webkit-transform: rotate(80deg);
  transform: rotate(80deg); }

.rotate_85 {
  -ms-transform: rotate(85deg);
  -webkit-transform: rotate(85deg);
  transform: rotate(85deg); }

.rotate_90 {
  -ms-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg); }

.rotate_95 {
  -ms-transform: rotate(95deg);
  -webkit-transform: rotate(95deg);
  transform: rotate(95deg); }

.rotate_100 {
  -ms-transform: rotate(100deg);
  -webkit-transform: rotate(100deg);
  transform: rotate(100deg); }

.rotate_105 {
  -ms-transform: rotate(105deg);
  -webkit-transform: rotate(105deg);
  transform: rotate(105deg); }

.rotate_110 {
  -ms-transform: rotate(110deg);
  -webkit-transform: rotate(110deg);
  transform: rotate(110deg); }

.rotate_115 {
  -ms-transform: rotate(115deg);
  -webkit-transform: rotate(115deg);
  transform: rotate(115deg); }

.rotate_120 {
  -ms-transform: rotate(120deg);
  -webkit-transform: rotate(120deg);
  transform: rotate(120deg); }

.rotate_125 {
  -ms-transform: rotate(125deg);
  -webkit-transform: rotate(125deg);
  transform: rotate(125deg); }

.rotate_130 {
  -ms-transform: rotate(130deg);
  -webkit-transform: rotate(130deg);
  transform: rotate(130deg); }

.rotate_135 {
  -ms-transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg); }

.rotate_140 {
  -ms-transform: rotate(140deg);
  -webkit-transform: rotate(140deg);
  transform: rotate(140deg); }

.rotate_145 {
  -ms-transform: rotate(145deg);
  -webkit-transform: rotate(145deg);
  transform: rotate(145deg); }

.rotate_150 {
  -ms-transform: rotate(150deg);
  -webkit-transform: rotate(150deg);
  transform: rotate(150deg); }

.rotate_155 {
  -ms-transform: rotate(155deg);
  -webkit-transform: rotate(155deg);
  transform: rotate(155deg); }

.rotate_160 {
  -ms-transform: rotate(160deg);
  -webkit-transform: rotate(160deg);
  transform: rotate(160deg); }

.rotate_165 {
  -ms-transform: rotate(165deg);
  -webkit-transform: rotate(165deg);
  transform: rotate(165deg); }

.rotate_170 {
  -ms-transform: rotate(170deg);
  -webkit-transform: rotate(170deg);
  transform: rotate(170deg); }

.rotate_175 {
  -ms-transform: rotate(175deg);
  -webkit-transform: rotate(175deg);
  transform: rotate(175deg); }

.rotate_180 {
  -ms-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg); }

.rotate_185 {
  -ms-transform: rotate(185deg);
  -webkit-transform: rotate(185deg);
  transform: rotate(185deg); }

.rotate_190 {
  -ms-transform: rotate(190deg);
  -webkit-transform: rotate(190deg);
  transform: rotate(190deg); }

.rotate_195 {
  -ms-transform: rotate(195deg);
  -webkit-transform: rotate(195deg);
  transform: rotate(195deg); }

.rotate_200 {
  -ms-transform: rotate(200deg);
  -webkit-transform: rotate(200deg);
  transform: rotate(200deg); }

.rotate_205 {
  -ms-transform: rotate(205deg);
  -webkit-transform: rotate(205deg);
  transform: rotate(205deg); }

.rotate_210 {
  -ms-transform: rotate(210deg);
  -webkit-transform: rotate(210deg);
  transform: rotate(210deg); }

.rotate_215 {
  -ms-transform: rotate(215deg);
  -webkit-transform: rotate(215deg);
  transform: rotate(215deg); }

.rotate_220 {
  -ms-transform: rotate(220deg);
  -webkit-transform: rotate(220deg);
  transform: rotate(220deg); }

.rotate_225 {
  -ms-transform: rotate(225deg);
  -webkit-transform: rotate(225deg);
  transform: rotate(225deg); }

.rotate_230 {
  -ms-transform: rotate(230deg);
  -webkit-transform: rotate(230deg);
  transform: rotate(230deg); }

.rotate_235 {
  -ms-transform: rotate(235deg);
  -webkit-transform: rotate(235deg);
  transform: rotate(235deg); }

.rotate_240 {
  -ms-transform: rotate(240deg);
  -webkit-transform: rotate(240deg);
  transform: rotate(240deg); }

.rotate_245 {
  -ms-transform: rotate(245deg);
  -webkit-transform: rotate(245deg);
  transform: rotate(245deg); }

.rotate_250 {
  -ms-transform: rotate(250deg);
  -webkit-transform: rotate(250deg);
  transform: rotate(250deg); }

.rotate_255 {
  -ms-transform: rotate(255deg);
  -webkit-transform: rotate(255deg);
  transform: rotate(255deg); }

.rotate_260 {
  -ms-transform: rotate(260deg);
  -webkit-transform: rotate(260deg);
  transform: rotate(260deg); }

.rotate_265 {
  -ms-transform: rotate(265deg);
  -webkit-transform: rotate(265deg);
  transform: rotate(265deg); }

.rotate_270 {
  -ms-transform: rotate(270deg);
  -webkit-transform: rotate(270deg);
  transform: rotate(270deg); }

.rotate_275 {
  -ms-transform: rotate(275deg);
  -webkit-transform: rotate(275deg);
  transform: rotate(275deg); }

.rotate_280 {
  -ms-transform: rotate(280deg);
  -webkit-transform: rotate(280deg);
  transform: rotate(280deg); }

.rotate_285 {
  -ms-transform: rotate(285deg);
  -webkit-transform: rotate(285deg);
  transform: rotate(285deg); }

.rotate_290 {
  -ms-transform: rotate(290deg);
  -webkit-transform: rotate(290deg);
  transform: rotate(290deg); }

.rotate_295 {
  -ms-transform: rotate(295deg);
  -webkit-transform: rotate(295deg);
  transform: rotate(295deg); }

.rotate_300 {
  -ms-transform: rotate(300deg);
  -webkit-transform: rotate(300deg);
  transform: rotate(300deg); }

.rotate_305 {
  -ms-transform: rotate(305deg);
  -webkit-transform: rotate(305deg);
  transform: rotate(305deg); }

.rotate_310 {
  -ms-transform: rotate(310deg);
  -webkit-transform: rotate(310deg);
  transform: rotate(310deg); }

.rotate_315 {
  -ms-transform: rotate(315deg);
  -webkit-transform: rotate(315deg);
  transform: rotate(315deg); }

.rotate_320 {
  -ms-transform: rotate(320deg);
  -webkit-transform: rotate(320deg);
  transform: rotate(320deg); }

.rotate_325 {
  -ms-transform: rotate(325deg);
  -webkit-transform: rotate(325deg);
  transform: rotate(325deg); }

.rotate_330 {
  -ms-transform: rotate(330deg);
  -webkit-transform: rotate(330deg);
  transform: rotate(330deg); }

.rotate_335 {
  -ms-transform: rotate(335deg);
  -webkit-transform: rotate(335deg);
  transform: rotate(335deg); }

.rotate_340 {
  -ms-transform: rotate(340deg);
  -webkit-transform: rotate(340deg);
  transform: rotate(340deg); }

.rotate_345 {
  -ms-transform: rotate(345deg);
  -webkit-transform: rotate(345deg);
  transform: rotate(345deg); }

.rotate_350 {
  -ms-transform: rotate(350deg);
  -webkit-transform: rotate(350deg);
  transform: rotate(350deg); }

.rotate_355 {
  -ms-transform: rotate(355deg);
  -webkit-transform: rotate(355deg);
  transform: rotate(355deg); }

.rotate_360 {
  -ms-transform: rotate(360deg);
  -webkit-transform: rotate(360deg);
  transform: rotate(360deg); }

.rwicon {
  width: 16px;
  height: 16px;
  margin-right: 5px; }

.wrapmain, .wrapmain2 {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  color: #fff;
  background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(0, 0, 0, 0.3)), color-stop(100%, rgba(0, 0, 0, 0.1)));
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#bf000000', GradientType=0);
  pointer-events: none; }

.wrap, .wrap2 {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  color: #fff;
  background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(0, 0, 0, 0.9)), color-stop(100%, rgba(0, 0, 0, 0.1)));
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#bf000000', GradientType=0);
  pointer-events: none; }

.mobilize .wrap {
  background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(0, 0, 0, 0.6)), color-stop(100%, rgba(0, 0, 0, 0))); }

.keyfeatures .wrap {
  background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(0, 0, 0, 0.7)), color-stop(100%, rgba(0, 0, 0, 0.1))); }

.contact .wrap {
  background: -webkit-gradient(linear, left top, right top, color-stop(0%, black), color-stop(100%, rgba(0, 0, 0, 0.3))); }

.wrap2 {
  background: -webkit-gradient(linear, left top, right top, color-stop(70%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0.9))); }

.wrap_inner {
  margin: auto;
  position: absolute;
  left: 50px;
  top: 50px;
  max-width: 700px;
  color: #fff; }

.pagelogo {
  position: fixed;
  top: 8px;
  left: 8px;
  width: 120px;
  z-index: 10; }

.resizetext, .resizetextmore {
  font-size: 1.6em;
  color: #ddd;
  line-height: 1.3em; }

.pageheader {
  font-size: 2em;
  line-height: 1em;
  text-transform: uppercase;
  position: absolute;
  left: 26px;
  top: 220px;
  color: #fff;
  font-weight: 500; }

.pageheader2 {
  font-size: 5em;
  margin-bottom: 20px;
  line-height: 1em;
  text-transform: uppercase;
  margin-top: 40px;
  line-height: 1.0em;
  font-weight: 700; }

.section {
  background-position: center center;
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover; }

.section:nth-of-type(1) {
  background-image: url("../img/mainpage.jpg"); }

.section:nth-of-type(2) {
  background-image: url("../img/deck1.jpg"); }

.section:nth-of-type(3) {
  background-image: url("../img/solutions.jpg"); }

.section:nth-of-type(4) {
  background-image: url("../img/globe.jpg"); }

.section:nth-of-type(5) {
  background-image: url("../img/ocean.jpg"); }

.section:nth-of-type(6) {
  background-image: url("../img/radar.jpg"); }

.leftnews {
  position: absolute;
  display: inline-block;
  width: 330px;
  white-space: nowrap; }

.rightnews {
  position: absolute;
  display: inline-block;
  width: 295px;
  margin-left: 380px;
  white-space: nowrap; }

.leftcontact {
  position: absolute;
  display: inline-block;
  width: 330px;
  white-space: nowrap; }

.rightcontact {
  position: absolute;
  display: inline-block;
  width: 295px;
  margin-left: 380px;
  white-space: nowrap; }

img.iot_icon {
  width: 18px;
  margin-top: 5px;
  position: absolute;
  left: 112px; }

.dot {
  height: 6px;
  width: 6px;
  border-radius: 50%;
  background-color: #ddd;
  margin-left: 150px;
  margin-top: 0px;
  margin-bottom: 2px; }

.contact_icon {
  width: 1.2em;
  margin-top: -6px;
  border-radius: 50%;
  opacity: 0.8; }

.contact_icon:hover {
  opacity: 1; }

.icon_log {
  height: 30px;
  opacity: 0.7;
  margin-top: 5px;
  margin-left: 10px;
  position: relative;
  left: 40px; }

.icon_log:hover {
  opacity: 1; }

a.contactlink {
  color: #FC6536;
  text-decoration: none; }

a.contactlink:hover {
  color: #fff;
  text-decoration: none; }

#fp-nav ul li a span, .fp-slidesNav ul li a span {
  background: #fff !important; }

#fp-nav {
  margin-top: -55px !important;
  right: 2px !important; }

#fp-nav ul li .fp-tooltip {
  top: -4px; }

.filterbadge {
  display: inline-block; }

.filterselect, .filterselect2 {
  display: none; }

.filterselect md-select {
  margin: 0;
  color: #fff;
  margin-left: -40px;
  position: absolute;
  top: 0px; }

.filterselect md-select.md-default-theme:not([disabled]):focus ._md-select-value, .filterselect md-select:not([disabled]):focus ._md-select-value, .filterselect2 md-select.md-default-theme:not([disabled]):focus ._md-select-value {
  border-bottom: none !important;
  color: #fff; }

.filterselect2 md-select.md-default-theme:not([disabled]):focus ._md-select-value, .filterselect2 md-select:not([disabled]):focus ._md-select-value {
  border-bottom: none !important;
  color: #fff; }

.bordergreen {
  border-left: 5px solid green; }

.borderorange {
  border-left: 5px solid orange; }

.borderred {
  border-left: 5px solid red; }

.autoCalcLabel {
  color: #aec6d5;
  font-size: 12px;
  font-weight: normal;
  position: absolute;
  white-space: nowrap;
  margin-left: -34px;
  margin-top: -29px; }

.autoCalcEtd {
  position: absolute;
  margin-left: 102px !important;
  margin-top: -28px; }

.costcalc {
  left: 320px;
  top: 50px;
  bottom: 0;
  position: fixed;
  width: 900px;
  overflow-y: scroll;
  z-index: 51;
  box-sizing: border-box;
  overflow-x: hidden; }

.costcalcbase > tbody > tr > td {
  text-align: left; }

.costdiff {
  width: 80px !important;
  vertical-align: top !important;
  background: #0a2c43; }

.costcalc .title1 {
  font-size: 16px !important;
  opacity: 1 !important;
  line-height: 36px;
  font-weight: normal; }

.costcalc md-checkbox {
  min-height: auto !important;
  margin: 2px !important; }

.costcalctable td {
  width: 100px;
  white-space: nowrap; }

.costcalctable tr td {
  width: 100px;
  text-align: right; }

.costcalctable td:first-child {
  width: 100px;
  text-align: left; }

.costcalctable td:last-child {
  width: 75px; }

.costcalcfinal td {
  width: 100px;
  white-space: nowrap; }

.costcalcfinal tr td {
  width: 100px;
  text-align: left; }

.costcalcfinal td:first-child {
  width: 65px; }

.costcalcfinal td:nth-child(4) {
  width: 30px; }

.costcalcfinal td:nth-child(3) {
  text-align: right; }

.diff td {
  text-align: center;
  width: 100%; }

/**** TABS*****/
.nav-stacked {
  position: fixed; }

.nav-pills > li > a, .nav-pills > li > a:visited {
  border-radius: 0px;
  height: auto;
  background-color: #0a2c43 !important;
  width: 20px;
  padding: 0px;
  text-align: center;
  color: #6c899b;
  text-transform: uppercase;
  font-size: 12px;
  border: 0 none !important;
  height: 70px;
  border-top-left-radius: 10px;
  position: relative;
  margin-left: 3px;
  margin-bottom: -2px;
  opacity: 0.9; }

.nav-pills > li > a:active {
  color: #fff;
  border: 0 none !important; }

.nav-pills > li > a.active {
  color: #fff;
  background-color: #061e2e !important;
  border: 0 none !important;
  margin-left: 0;
  opacity: 0.95;
  width: 22px; }

.nav-pills > li > a:hover {
  color: #fff;
  border: 0 none !important; }

.nav-pills > li > a > span {
  -webkit-transform: rotate(-90deg);
  -webkit-transform-origin: left top;
  -moz-transform: rotate(-90deg);
  -moz-transform-origin: left top;
  -ms-transform: rotate(-90deg);
  -ms-transform-origin: left top;
  -o-transform: rotate(-90deg);
  -o-transform-origin: left top;
  transform: rotate(-90deg);
  transform-origin: left top;
  display: block;
  position: absolute;
  top: 64px;
  left: 2px;
  white-space: nowrap; }

.tabs {
  top: 0;
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0; }

.tab-content {
  right: 0;
  top: 0;
  position: absolute;
  min-height: 100%;
  left: 22px;
  background-color: #061e2e;
  color: #fff;
  padding: 5px;
  max-height: 100%;
  overflow-x: hidden; }

.tab-content td {
  text-align: left;
  white-space: nowrap; }

.tab-common td {
  min-width: 180px; }

.tc {
  position: relative; }

.tab-triage {
  font-size: 12px;
  white-space: nowrap;
  line-height: 14px; }

.tab-content th {
  text-align: left; }

.tab-content h2 {
  margin: 0; }

.xlarge {
  font-size: 24px; }

.tab-content .tempc {
  font-size: 38px;
  line-height: 30px; }

.tab-content .tempunits {
  font-size: 14px;
  position: absolute;
  margin-top: -2px; }

.tab-content .daynight, .tab-content .moonrise {
  font-size: 10px;
  position: relative;
  margin: auto;
  left: 7px;
  right: 0;
  top: 5px;
  margin-left: 10px; }

table.currentweather {
  margin-left: 5px; }

table.cog th, table.cog td {
  min-width: 90px;
  text-align: center; }

table.wind th, table.wind td, table.swell th, table.swell td {
  min-width: 90px;
  text-align: center; }

table.swell {
  margin-top: 10px; }

table.wind {
  margin-top: 20px; }

table.swellroute {
  position: absolute;
  top: 34px;
  left: 106px; }

table.windroute {
  margin-top: 10px;
  margin-bottom: 10px; }

table.wind td, table.windroute td {
  color: #19B5FE; }

table.swell td, table.swellroute td {
  color: #E26A6A; }

table.ice {
  width: 185px;
  margin-left: 93px;
  margin-top: -15px; }

table.truewind {
  color: #F7CA18;
  margin-top: 10px;
  margin-left: 5px;
  margin-bottom: -5px; }

table.truewind td {
  width: 115px; }

table.iceroute {
  position: absolute;
  top: 34px;
  left: 192px; }

table.pressure {
  left: 145px;
  position: absolute;
  top: 80px; }

table.pressure th, table.pressure td {
  min-width: 69px; }

table.currentweather th, table.currentweather td {
  min-width: 50px;
  padding-top: 5px !important;
  text-align: left;
  position: relative; }

table.forecast {
  margin-top: 10px;
  font-size: 10px; }

table.forecast td, table.forecast th {
  min-width: 40px;
  white-space: nowrap;
  text-align: center; }

table.forecast th, table.forecast td {
  min-width: 30px;
  white-space: nowrap; }

.tab-content .weathericon {
  border-radius: 8px;
  width: 45px;
  height: 45px; }

.arrow_sog {
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  display: inline-block; }

.compass, .compassterminal {
  position: absolute;
  width: 160px;
  height: 160px;
  background-image: url(/img/compass500.png);
  background-size: 100%;
  right: 10px;
  margin-top: 10px; }

.compassterminal {
  background-image: url(/img/compass_clipped.png); }

.compassbg {
  position: absolute;
  width: 125px;
  height: 125px;
  right: 28px;
  margin-top: 27px;
  border-radius: 50%; }

.center {
  left: 0;
  position: absolute;
  opacity: 1;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto; }

.triagecenter {
  left: -8px;
  position: absolute;
  opacity: 1;
  right: 0;
  margin: auto;
  margin-top: 9px; }

.bar_chart {
  width: 52px;
  height: 78px;
  background-image: url(/img/bar_chart.png);
  background-size: 100%;
  position: relative;
  margin-right: 10px; }

.bar_chart div {
  position: absolute;
  bottom: 1px;
  width: 25px;
  left: 24px; }

.min-line {
  height: 1px;
  background-color: red;
  width: 32px !important;
  left: 21px !important; }

.chartarea {
  position: relative;
  display: inline-block;
  margin-left: 2px;
  font-size: 14px;
  text-align: center; }

.max {
  font-size: 9px;
  margin-bottom: 2px; }

.tab-content header {
  font-size: 10px;
  font-weight: normal;
  color: #aec6d5;
  padding: 0;
  background-color: transparent;
  position: relative;
  height: auto; }

table.bunker {
  background-color: transparent; }

table.bunker td {
  min-width: auto;
  max-width: 133px; }

table.etas td {
  font-size: 14px; }

.tab-content md-autocomplete {
  width: 264px; }

.lastbunker span {
  margin-right: 15px; }

.lastbunkertime {
  position: absolute;
  right: 10px;
  margin-top: -34px;
  font-size: 12px; }

.mdp-datepicker md-icon {
  color: #aec6d5;
  width: 28px !important; }

/*.tab-content md-input-container {
    width: 119px;
}*/
mdp-date-picker .md-button.md-icon-button, mdp-time-picker .md-button.md-icon-button {
  margin-left: -10px !important;
  width: 28px !important; }

.mdp-datepicker .mdp-calendar {
  color: #061e2e; }

input[type="time"] {
  width: auto;
  padding: 5px 10px !important; }

table.tab td {
  min-width: 80px;
  font-size: 14px; }

table.ereport .inline-b {
  width: 145px !important; }

table.ereport .inline-b, table.ereport .inline-b2 {
  font-size: 12px; }

table.ereport td {
  min-width: auto;
  font-size: 12px; }

table.ereport input {
  padding-top: 8px;
  padding-bottom: 8px; }

.tab-content .motionchart {
  margin-top: 0px;
  margin-bottom: 15px;
  margin-left: 0px;
  position: relative;
  width: 270px; }

@keyframes motionchart {
  from {
    right: -270px; }
  to {
    right: calc(50%-400px); } }

.motionchartlarge {
  margin: auto !important;
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  background-color: #000 !important;
  z-index: 101 !important;
  width: 800px !important;
  animation-timing-function: ease-in;
  animation-name: motionchart;
  animation-duration: 0.5s; }

.motionchartlarge header {
  margin-top: 0;
  color: #fff;
  padding: 10px;
  font-size: 14px; }

.tab-content .capture {
  right: 50px;
  position: absolute;
  top: 2px; }

.cameraicon {
  right: 2px;
  position: absolute;
  font-size: 20px;
  opacity: 0.7;
  top: -3px;
  color: #fff; }

.tab-content .cameracontent {
  margin-top: 5px;
  position: relative; }

.tab-content .arrowpadding_right, .tab-content .arrowpadding_left {
  height: 150px;
  width: 60px;
  position: absolute;
  right: 0px;
  margin-top: -150px; }

.voyid {
  margin-bottom: 7px; }

.roll_chart {
  width: 130px;
  position: relative;
  height: 130px;
  display: inline-block;
  margin-left: 10px;
  margin-bottom: 10px; }

img.ship_front {
  width: 80px;
  margin: auto;
  left: 18px;
  top: 0;
  bottom: 0;
  position: absolute;
  -webkit-transform-origin: 50% 65%;
  -moz-transform-origin: 50% 65%;
  -ms-transform-origin: 50% 65%;
  -o-transform-origin: 50% 65%;
  transform-origin: 50% 65%; }

img.chart_line {
  height: 105px;
  margin: auto;
  left: -11px;
  right: 0;
  top: 0;
  bottom: 0;
  position: absolute;
  width: 2px;
  -webkit-transform-origin: 50% 100%;
  -moz-transform-origin: 50% 100%;
  -ms-transform-origin: 50% 100%;
  -o-transform-origin: 50% 100%;
  transform-origin: 50% 100%; }

img.roll_bg {
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  position: absolute;
  width: 100%; }

.roll_chart_values {
  position: absolute;
  font-size: 10px;
  top: 101px;
  line-height: 12px; }

.pitch_chart {
  width: 260px;
  position: relative;
  height: 90px;
  margin-left: 5px; }

img.ship_side {
  width: 220px;
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
  -webkit-transform-origin: 50% 70%;
  -moz-transform-origin: 50% 70%;
  -ms-transform-origin: 50% 70%;
  -o-transform-origin: 50% 70%;
  transform-origin: 50% 70%; }

img.pitch_bg {
  width: 100%;
  position: absolute; }

.pitch_chart_values {
  position: absolute;
  font-size: 10px;
  top: 82px;
  line-height: 12px;
  left: 60px; }

.mdp-datepicker md-icon {
  color: #6c899b !important; }

.md-button {
  color: #6c899b; }

.table > tbody + tbody {
  border-top: 0px; }

.table > thead > tr > th {
  border-bottom: 0px;
  white-space: nowrap; }

.details table {
  width: 320px;
  display: inline-block; }

.details {
  width: 100%;
  background-color: #061e2e;
  margin-top: 0px;
  margin-bottom: -5px;
  position: relative; }

.flex-container {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
  width: 100%; }

.scheduleblock {
  width: 300px; }

.filterbar {
  left: 0;
  right: 0;
  top: 50px;
  padding-top: 1px;
  height: 35px;
  background-color: #0a2c43;
  position: fixed;
  z-index: 90; }

.schedulefilter, .contactfilter {
  width: 175px;
  height: 30px;
  border-radius: 16px;
  display: inline-block; }

.nowrap {
  white-space: nowrap; }

.column1, .column2, .column3 {
  display: table-cell; }

.reportok {
  margin-top: 16px;
  position: absolute;
  right: 100px; }

.videoerrortext {
  position: absolute;
  width: 300px;
  color: #fff;
  margin: auto;
  height: 40px;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0; }

img.sandbox-button {
  right: 65px;
  position: absolute;
  height: 21px;
  z-index: 10;
  opacity: 0.8; }

.sandbox {
  position: absolute;
  right: 0px;
  top: 55px;
  z-index: 10;
  background-color: #061e2e;
  padding: 5px;
  border: solid 5px #22a7f0;
  opacity: 0.9;
  font-size: 12px;
  color: #fff; }

img.ops-button {
  right: 99px;
  position: absolute;
  height: 21px;
  z-index: 10; }

.ops-button:hover, .sandbox-button:hover, .cargo-button:hover {
  opacity: 1; }

.prevporttoggle {
  position: absolute;
  z-index: 10;
  bottom: 10px;
  right: 188px; }

.openvoyage {
  position: absolute;
  z-index: 10;
  bottom: 10px;
  right: 110px; }

.duplicatevoyage {
  position: absolute;
  z-index: 10;
  bottom: 10px;
  right: 10px; }

.porthours {
  position: absolute;
  margin-top: -7px;
  margin-left: 5px; }

.routeplanner {
  cursor: pointer; }

.shiplocation {
  margin-bottom: 0px; }

.shiplocation ._md-icon {
  border-color: rgba(255, 255, 255, 0.54) !important; }

.md-button.md-icon-button {
  padding: 0px;
  width: 33px; }

.speedCalcEta {
  width: 65px !important;
  padding: 0px !important;
  margin: 0 !important;
  background-color: #222 !important;
  display: inline-block !important;
  border-radius: 3px !important; }

table.money th {
  font-size: 11px;
  font-weight: normal;
  padding-left: 2px !important;
  padding-right: 2px !important;
  min-width: 35px; }

.moneytotals {
  background-color: #061e2e;
  padding-left: 16px;
  position: absolute;
  margin-left: 5px;
  margin-top: 6px;
  font-size: 13px;
  line-height: 15px; }

.trendarrow {
  margin-top: -3px;
  margin-right: 1px;
  font-size: 9px; }

.recalceta {
  position: absolute;
  right: 15px;
  margin-top: 8px; }

.streamicon {
  position: absolute;
  right: 37px;
  font-size: 22px;
  opacity: 0.7;
  margin-top: 4px; }

.streamicon:hover {
  opacity: 1; }

.streambox {
  position: absolute;
  width: 640px;
  height: 360px;
  bottom: 1px;
  right: 0px;
  left: 0px;
  margin: auto;
  z-index: 100;
  background-color: #000; }

.videoStreamLarge {
  width: 100%;
  position: absolute;
  margin: auto;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 105; }

.playbtn {
  position: absolute;
  left: 114px;
  top: 48px;
  font-size: 60px;
  opacity: 0.7; }

.stopbtn {
  opacity: 0;
  z-index: 50;
  position: absolute;
  left: 117px;
  top: 53px;
  font-size: 50px;
  opacity: 0; }

.video {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 40;
  width: 100%; }

.playbtn:hover {
  opacity: 0.9; }

.stopbtn:hover {
  opacity: 0.6; }

.progressicon, .weatherprogressicon {
  position: absolute;
  margin: auto;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0; }

.weatherprogressicon {
  top: 200px; }

.expandvideo {
  position: absolute;
  right: 0;
  z-index: 50;
  font-size: 16px;
  color: #fff; }

.expandvideo:hover {
  color: #22a7f0; }

.pasttrack md-checkbox {
  display: block;
  margin-bottom: 0px; }

.pasttrack ._md-icon {
  border-color: rgba(255, 255, 255, 0.3) !important; }

.colorpicker.dropdown.ng-scope.colorpicker-position-top.colorpicker-visible {
  margin-top: 33px !important; }

.pasttrackcolor {
  width: 100%;
  height: 3px;
  border-radius: 1px;
  border-color: white;
  background-color: white; }

.colorselect, .cross {
  position: relative;
  width: 20px;
  height: 20px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 3px;
  display: inline-block;
  margin-left: 0px; }

.cross:before, .cross:after {
  position: absolute;
  left: 7.5px;
  content: ' ';
  height: 17px;
  width: 2px;
  background-color: #38586e; }

.cross:before {
  transform: rotate(45deg); }

.cross:after {
  transform: rotate(-45deg); }

.ptctrl {
  position: absolute;
  font-size: 16px;
  left: 113px;
  opacity: 0.7;
  top: 6px; }

.ptctrl:hover {
  opacity: 1; }

.traffic td, .traffic th {
  text-align: center;
  white-space: nowrap; }

.alarmselect {
  width: 125px;
  margin: auto;
  padding-left: 5px;
  padding-right: 5px; }

.shipalarm {
  max-width: 550px; }

.shipalarm > tbody > tr > td, .shipalarm > thead > tr > th {
  border: none !important; }

.wmapicon {
  position: absolute;
  margin-top: 6px;
  left: 123px;
  opacity: 0.7; }

.wmapicon:hover {
  opacity: 1; }

.weathermapbg {
  position: fixed;
  left: 0;
  right: 0;
  top: 50px;
  bottom: 0;
  z-index: 200;
  background-color: rgba(0, 0, 0, 0.8); }

.weathermapbox {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 95;
  height: 710px;
  width: 972px;
  margin: auto;
  border: solid 5px #000;
  background-color: #000; }

.weathermapbox header, .weathermapbox .close {
  z-index: 96; }

.wmaptimesteps {
  max-height: 665px;
  overflow-y: auto;
  overflow-x: hidden;
  width: 125px;
  color: #fff;
  background-color: #000;
  padding: 10px; }

.weathermap {
  margin-top: 35px;
  position: absolute;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0; }

#weatherimg {
  width: 100%;
  position: absolute;
  bottom: 0; }

.livestreambox {
  position: absolute;
  bottom: 0;
  left: 1px;
  max-width: 640px;
  z-index: 90; }

.livestream {
  margin-top: -2px;
  margin-bottom: -3px;
  width: 640px;
  height: 360px; }

.livenow {
  color: #2ecc71 !important;
  animation: blinker 1.4s linear infinite;
  opacity: 1; }

@keyframes blinker {
  50% {
    opacity: 0.2; } }

.liveicon {
  color: #2ecc71 !important;
  opacity: 0.7; }

.liveicon:hover {
  opacity: 1; }

/* sea level graph */
.graphbox {
  margin: auto;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 800px;
  animation-timing-function: ease-in;
  animation-name: motionchart;
  animation-duration: 0.5s;
  background-color: black;
  z-index: 90;
  padding: 5px;
  overflow: hidden; }

.graphbox header {
  background: transparent; }

#stationChart {
  margin-top: 10px; }

/* CPA EVENT */
.aiscpa td, .aiscpa th {
  text-align: left;
  font-size: 14px;
  line-height: 16px; }

.cpa td, .cpa th {
  text-align: left;
  width: 90px;
  font-size: 14px; }

.cpa th, .aiscpa th {
  font-size: 10px; }

.cpa td {
  height: 38px;
  line-height: 16px; }

.weather2 {
  margin-top: 5px;
  margin-bottom: 0px;
  margin-left: -5px; }

.weather2 > thead > tr > th {
  padding: 6px; }

.weather2 > tbody > tr > td, .weather2 > tbody > tr > th, .weather2 > thead > tr > td, .weather2 > thead > tr > th {
  border-top: none !important; }

.wrap {
  white-space: pre-wrap;
  /* CSS3 */
  white-space: -moz-pre-wrap;
  /* Firefox */
  white-space: -pre-wrap;
  /* Opera <7 */
  white-space: -o-pre-wrap;
  /* Opera 7 */
  word-wrap: break-word;
  /* IE */ }

@media (max-width: 1210px) {
  .nav-title {
    display: none; } }

@media (max-width: 1060px) {
  .mobilechat {
    display: block;
    top: 10px;
    right: 80px;
    z-index: 99;
    font-size: 19px;
    white-space: nowrap;
    width: 150px; }
  .mobilechat a:hover {
    text-decoration: none; }
  .ol-mouse-position {
    display: none; }
  .agents {
    display: none; } }

@media (max-width: 972px) {
  .weathermapbox {
    width: 100% !important; } }

@media (min-width: 1020px) {
  .nav-right {
    display: inline-block !important; } }

@media (max-width: 1020px) {
  .nav-right {
    position: absolute;
    top: 50px;
    right: 0;
    z-index: 150;
    background-color: #061e2e;
    height: 320px;
    width: 70px;
    overflow: visible; }
  .nav-right li {
    display: block; }
  .vertical-line {
    border-bottom: 1px solid #214660;
    border-right: none;
    position: absolute;
    left: 5px;
    right: 5px;
    margin-top: 37px;
    top: auto;
    bottom: auto;
    margin-left: auto !important; }
  .nav-update .vertical-line {
    margin-top: 11px; }
  .nav-right .nav-messages div {
    margin-top: -37px;
    margin-left: 10px;
    top: auto; }
  .nav-right .nav-icon {
    margin-left: 6px; }
  .nav-messages .vertical-line {
    margin-top: 8px; }
  .nav-messages .nav-icon {
    margin-top: 4px;
    margin-left: 2px !important; }
  .nav-log .vertical-line {
    margin-top: 16px; }
  .clock {
    padding-top: 17px;
    margin-left: 3px !important;
    margin-left: 9px !important;
    font-size: 20px; }
  .tz {
    right: 0; }
  .tz2 {
    right: 6px; }
  .nav-right li {
    margin-left: 0 !important; }
  .nav-mobile {
    display: inline-block; }
  .nav-mobile .nav-messages div {
    margin-top: -2px;
    margin-left: 10px; } }

@media (max-width: 1020px) and (min-width: 359px) {
  .nav-right .nav-messages, .nav-right .nav-user {
    display: none; }
  .nav-messages .vertical-line {
    display: none; } }

@media (max-width: 900px) {
  .column2 {
    display: none; }
  .hide900 {
    display: none; } }

@media (max-width: 767px) {
  #fp-nav ul li:hover .fp-tooltip, #fp-nav.fp-show-active a.active + .fp-tooltip {
    display: none; }
  #online {
    right: 0; }
  .navbar-brand {
    margin-left: 30px !important; }
  #camera2, #vesseldata {
    right: 0px;
    left: 0px;
    width: 100%; }
  .column1 {
    display: none; }
  .wrap_inner {
    left: 10px;
    top: 10px; }
  .pageheader {
    font-size: 1.5em;
    left: 25px;
    top: 170px; }
  .pageheader2 {
    font-size: 2.7em;
    margin-bottom: 5px;
    margin-top: 55px; }
  .logolarge {
    top: 88px;
    margin: auto;
    width: 450px; }
  .resizetext, .resizetextmore {
    font-size: 1.15em;
    margin-right: 30px; }
  .rightcontact {
    position: absolute;
    display: inline-block;
    width: 250px;
    margin-left: 280px;
    white-space: nowrap; }
  .leftnews {
    display: block; }
  .rightnews {
    display: block;
    margin-left: 0;
    margin-top: 260px; }
  .rightnews iframe {
    width: 320px !important;
    height: 180px !important; }
  #forecast {
    left: 0px;
    width: 100%; }
  .filterbadge2 {
    display: none; }
  .filterselect2 {
    display: inline-block; }
  .costcalc {
    left: 0px; }
  .warn {
    bottom: 0px;
    top: auto;
    left: 0;
    right: 0px;
    background-color: rgba(0, 0, 0, 0.8);
    height: 50px;
    padding-left: 10px;
    padding-right: 10px;
    text-align: right;
    padding-top: 5px;
    font-size: 10px;
    line-height: 12px; }
  .scroll_down {
    bottom: 85px; }
  .arrow_down2 {
    bottom: 60px; }
  .motionchartlarge, .graphbox {
    width: 100% !important; } }

@media (max-width: 640px) {
  .streambox {
    width: 100%; }
  .livestream {
    width: 100%;
    height: auto; }
  .livestreambox {
    width: 100%; }
  .online-count {
    position: absolute;
    margin-top: -25px;
    margin-left: 17px; } }

@media (max-width: 700px) {
  .login-main .inner {
    width: 90%; }
  .large {
    font-size: 18px; }
  .timetext {
    display: none; }
  #planning_map {
    display: none; }
  #timeline {
    width: 100%; }
  #planning .worldview {
    display: none; }
  #planning .mapstyles, #planning .map-icons {
    display: none; }
  .expandtimeline, .collapsetimeline {
    display: none; } }

@media (max-width: 650px) {
  .login-main .logo-square {
    width: 50px;
    height: 50px;
    border: solid 10px white; }
  .login-main .logo-line {
    font-size: 45px !important;
    margin-bottom: 15px; }
  .login-main .large-text {
    font-size: 42px;
    font-weight: 700;
    line-height: 44px; }
  .login-main .mid-text {
    font-size: 22px; }
  .login-main a, .login-main a:hover {
    color: white;
    text-decoration: none;
    font-size: 14px;
    border: solid 2px;
    padding: 7px 20px; }
  nav .logo span {
    display: none; }
  nav .badge {
    display: none; }
  nav .logo {
    margin-right: 0px; }
  .nav-left li {
    width: 50px; }
  .nav-left .nav-icon {
    margin-left: -3px; }
  .nav-mobile li.nav-messages, .nav-mobile li.nav-user {
    width: 50px; } }

@media (max-width: 600px) {
  #events .leftpanel {
    width: 100%; }
  #events .map-icons .icon-world {
    display: none; }
  #events .map-icons {
    left: 7px !important;
    z-index: 80;
    top: 121px; }
  #events .map-icons-right {
    right: 5px;
    top: 80px;
    z-index: auto;
    left: auto !important; }
  /*#eventsmappanel {
        display: none;
    }*/
  .info_small {
    display: none; }
  #eventsinfobox {
    display: none; }
  .filterbadge {
    display: none; }
  .filterselect {
    display: inline-block; }
  #updates {
    right: 0; }
  .hide600 {
    display: none; } }

@media (max-width: 550px) {
  .leftcontact {
    display: block; }
  .rightcontact {
    display: block;
    margin-left: 0;
    margin-top: 190px; }
  .dot {
    margin-left: 120px; }
  .pageheader {
    font-size: 1.1em;
    left: 24px;
    top: 146px; }
  .logolarge {
    width: 320px; }
  #new-events {
    width: 100%; } }

@media (max-width: 480px) {
  .column3 {
    display: none; }
  .nowrap {
    white-space: normal; }
  #chat, .direct-chat-messages {
    width: 100%;
    left: 0;
    right: 0; }
  .shiplabel2, .shiplabel3 {
    margin-left: auto;
    margin-right: auto; }
  .mapstyles {
    font-size: 10px !important; }
  .label {
    margin-left: 0px !important;
    padding: 0; }
  .report {
    width: 100%; }
  .logininputs {
    left: 0;
    right: 0;
    margin: auto;
    width: 100%; }
  .logininput {
    width: 33%; }
  .pwinput {
    width: 120px; }
  #login {
    right: 0px;
    left: auto; }
  .forgotpassword {
    bottom: 50px;
    top: auto; }
  .alarmselect {
    width: auto; }
  .videoerrortext {
    margin: auto;
    height: 40px;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0; }
  #updates {
    width: 100%;
    height: calc(100% - 50px) !important; }
  .hide480 {
    display: none; }
  .setup_nav .nav_i {
    min-width: 28px; }
  .contactfilter {
    width: 115px; } }

@media (min-width: 480px) {
  .show480 {
    display: none; } }

@media (max-width: 410px) {
  nav .logo {
    display: none; }
  .nav-right {
    height: 370px; }
  .nav-logo {
    display: block !important; } }

@media (max-width: 359px) {
  .nav-right {
    height: 470px; } }

@media (max-width: 330px) {
  .nav-mobile li.nav-user {
    display: none; }
  .nav-mobile li.nav-messages {
    margin-right: 10px; }
  .logininput {
    width: 105px;
    margin-left: 4px; }
  #login {
    left: 219px; }
  .warn {
    font-size: 9px; }
  .pageheader {
    font-size: 1em;
    left: 23px;
    top: 130px; }
  .logolarge {
    top: 80px;
    width: 290px; } }

@media (max-height: 700px) {
  .weathermapbox {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 95;
    height: auto;
    width: auto;
    top: 46px; } }

@media (max-height: 570px) {
  .direct-chat-messages {
    height: auto;
    bottom: 126px;
    top: 0px;
    position: absolute;
    width: 100%; }
  .box-footer {
    position: absolute;
    bottom: 0px;
    width: 100%; }
  #chat {
    bottom: 0px;
    height: auto; }
  .logolarge {
    width: 290px; }
  .pageheader {
    font-size: 1em;
    left: 24px;
    top: 138px; }
  .pageheader2 {
    font-size: 2em; }
  .resizetext {
    font-size: 0.85em;
    margin-right: 30px; }
  .resizetextmore {
    display: none; }
  #updates {
    height: calc(100% - 50px) !important; } }

@media (max-height: 360px) {
  .weathermapbox header {
    display: none; }
  md-input-container {
    margin: 0 !important; }
  #loginpanel {
    height: auto; }
  .layout-wrap {
    margin-top: -25px; }
  .wellpadding {
    padding-top: 60px; }
  .pageheader2 {
    margin-bottom: 0px;
    margin-top: 55px; }
  .pageheader {
    display: none; }
  .streambox {
    height: 100%;
    bottom: 0; }
  .videoStreamLarge {
    height: 100%;
    width: auto; }
  .motionchartlarge, .graphbox {
    top: 50px;
    height: calc(100% - 50px) !important;
    width: 70% !important; } }