@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600&display=swap');
@import url('../../FontAwesome/css/font-awesome.min.css');
/*#region General*/
body {
  font-size: 0.85em !important;
  font-family: 'Montserrat', Verdana, Helvetica, Sans-Serif !important;
  color: #333;
  background-color: #FFF;
  margin: 0;
  min-width: 600px;
  overflow: hidden;
}

*, ::after, ::before {
  box-sizing: content-box !important;
}

.container, .container-lg, .container-md, .container-sm, .container-xl {
  max-width: 100% !important;
}

.field-validation-error {
  display: none;
  width: 0;
  height: 0;
  visibility: hidden;
}

.location-world-1 {
  background: url("https://images.geo-track.com/www/fleetco/layout.png?v=2.0.1.71") 0 -48px no-repeat;
  width: 236px;
  height: 38px;
  float: right;
}

.header {
  width: 1108px;
  margin: 0 auto;
  height: 75px;
  min-height: 75px;
  overflow: hidden;
  z-index: 2000;
  background: #FFF url("https://images.geo-track.com/www/fleetco/header-bg.png?v=2.0.1.71");
}

  .header .logo {
    background: url("https://images.geo-track.com/www/fleetco/layout.png?v=2.0.1.71") 0 0 no-repeat;
    width: 171px;
    height: 47px;
    margin: 15px;
    float: left;
  }

  .header .business-top-logo {
    width: 210px;
    height: 55px;
    margin: 10px;
    background: url("https://images.geo-track.com/www/fleetco/business-top-logo.png?v=2.0.1.71");
    float: right;
  }

.footer-container .business-bottom-logo {
  background: url("https://images.geo-track.com/www/fleetco/business-bottom-logo.png?v=2.0.1.71");
  width: 355px;
  height: 38px;
  float: right;
}

.flow-header {
  width: 100%;
  height: 75px;
  min-height: 75px;
  overflow: hidden;
}

  .flow-header .logo {
    background: url("https://images.geo-track.com/www/fleetco/layout.png?v=2.0.1.71") 0 0 no-repeat;
    width: 171px;
    height: 47px;
    margin: 15px;
    float: left;
  }

.loading {
  display: none;
  position: relative;
  top: 15px;
  left: 50px;
  width: 0px;
  height: 0px;
}

.identity {
  position: fixed;
  right: 230px;
  top: 25px;
  font-size: 13px;
  z-index: 3100;
  background-color: #FFF;
  padding: 5px 10px;
  border-radius: 5px;
  color: #666;
}

  .identity .today {
    color: #333;
  }

  .identity .user {
    cursor: pointer;
    color: #333;
    text-align: center;
    padding: 6px;
    border-radius: 5px;
  }

    .identity .user:hover {
      background-color: #e1e1e1;
    }

    .identity .user:before {
      content: "\f007";
      font-family: FontAwesome;
      margin-right: 5px;
    }

    .identity .user:after {
      content: "\f0d7";
      font-family: FontAwesome;
      margin-left: 5px;
    }

.user-menu-container {
  z-index: 5000;
  position: absolute;
  top: 0;
  left: 0;
  width: 300px;
  display: none;
}

  .user-menu-container .arrow {
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 7px solid #FFF;
    margin-left: 225px;
  }

.user-menu {
  background: #FFF;
  padding: 0 2px;
}

  .user-menu .app-name {
    font-size: 0.9em;
    display: block;
    padding: 5px 10px;
    background-color: #e1e1e1;
  }

  .user-menu .support-contact {
    font-size: 0.9em;
    display: block;
    padding: 5px 10px;
    background-color: #FFF;
    border-bottom: 1px solid #FFF;
  }

    .user-menu .support-contact a {
      text-decoration: none;
      color: #333;
      font-weight: bold;
    }

      .user-menu .support-contact a:hover {
        color: #333;
      }

  .user-menu .map-feedback {
    font-size: 0.9em;
    display: block;
    padding: 5px 10px;
    background-color: #FFF;
    border-bottom: 1px solid #FFF;
  }

    .user-menu .map-feedback a {
      text-decoration: none;
      color: #0074CC;
    }

      .user-menu .map-feedback a:hover {
        color: #333;
      }

  .user-menu .user {
    font-weight: bold;
    display: block;
    padding: 10px 10px 0 10px;
    background-color: #FFF;
  }

  .user-menu .email {
    font-size: 0.9em;
    border-bottom: 1px solid #FFF;
    padding: 0 10px 10px 10px;
    display: block;
    background-color: #FFF;
  }

  .user-menu .language {
    font-size: 0.85em;
    padding: 5px 10px;
    border-bottom: 1px solid #FFF;
  }

    .user-menu .language a {
      text-decoration: none;
      color: #0074CC;
    }

      .user-menu .language a:hover {
        color: #333;
      }

  .user-menu .actions {
    font-size: 0.85em;
    padding: 5px 10px;
    border-bottom: 1px solid #FFF;
  }

    .user-menu .actions a {
      text-decoration: none;
      color: #0074CC;
    }

      .user-menu .actions a:hover {
        color: #333;
      }

  .user-menu .singout {
    font-size: 0.85em;
    padding: 10px 10px;
  }

    .user-menu .singout a {
      text-decoration: none;
      color: #0074CC;
    }

      .user-menu .singout a:hover {
        color: #333;
      }

.info-container {
  z-index: 5000;
  position: absolute;
  top: 0;
  left: 0;
  width: 300px;
  display: none;
}

  .info-container .arrow {
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 7px solid #FFF;
    margin-left: 280px;
  }

  .info-container .info {
    background: #FFF;
    padding: 0 2px;
  }

    .info-container .info .name {
      font-size: 0.9em;
      display: block;
      padding: 10px 10px 10px 10px;
      background-color: #FFF;
    }

    .info-container .info .contact {
      font-size: 0.9em;
      display: block;
      padding: 5px 10px;
      background-color: #FFF;
      border-bottom: 1px solid #FFF;
    }

      .info-container .info .contact a {
        text-decoration: none;
        color: #333;
        font-weight: bold;
      }

        .info-container .info .contact a:hover {
          color: #333;
        }

    .info-container .info .actions {
      font-size: 0.85em;
      padding: 5px 10px;
      border-bottom: 1px solid #FFF;
    }

      .info-container .info .actions a {
        text-decoration: none;
        color: #0074CC;
      }

        .info-container .info .actions a:hover {
          color: #333;
        }

    .info-container .info .close {
      font-size: 0.85em;
      padding: 10px 10px;
    }

      .info-container .info .close a {
        text-decoration: none;
        color: #0074CC;
      }

        .info-container .info .close a:hover {
          color: #333;
        }

.primary-button {
  background-color: #ff8200;
  border: 0;
  color: #FFF;
  border-radius: 4px;
}

  .primary-button:hover {
    box-shadow: 0 0px 9px rgba(0, 0, 0, 0.1);
  }

.orange-button {
  background-color: #ff8200;
  border: 0;
  color: #FFF;
  border-radius: 4px;
}

  .orange-button:hover {
    box-shadow: 0 0px 9px rgba(0, 0, 0, 0.1);
  }

.secondary-button {
  background-color: #FFF;
  border: 0;
  box-shadow: 0 0px 9px rgba(0, 0, 0, 0.1);
  color: #333;
  border-radius: 4px;
}

  .secondary-button:hover {
    background: #e1e1e1;
  }

  .secondary-button.disabled {
    opacity: 0.5;
    filter: alpha(opacity=50);
    background: #e1e1e1;
  }

.grey-button {
  background-color: #FFF;
  border: 0;
  box-shadow: 0 0px 9px rgba(0, 0, 0, 0.1);
  color: #333;
  border-radius: 4px;
}

  .grey-button:hover {
    background: #e1e1e1;
  }

  .grey-button.disabled {
    opacity: 0.5;
    filter: alpha(opacity=50);
    background: #e1e1e1;
  }

.grey-button-idp {
  background-color: #0074CC;
  border: 0;
  box-shadow: 0 0px 9px rgba(0, 0, 0, 0.1);
  color: #FFF;
  border-radius: 4px;
}

  .grey-button-idp:hover {
    background: #0074CC;
  }

  .grey-button-idp.disabled {
    opacity: 0.5;
    filter: alpha(opacity=50);
    background: #0074CC;
  }

.blue-button {
  background-color: #0074CC;
  border: 0;
  color: #FFF;
  border-radius: 4px;
}

  .blue-button:hover {
    background: #0074CC;
  }

a.blue-button {
  text-decoration: none;
  font-size: 1.2em;
  padding: 7px 15px;
  display: inline-block;
}

.blue-option,
.gray-option {
  font-size: 1.1em;
  padding: 7px 15px;
  margin-right: 4px;
  cursor: pointer;
  border-radius: 5px 5px 5px 5px;
  font-family: 'Montserrat';
}

.blue-option {
  float: left;
  background-color: #0074CC;
  background-image: linear-gradient(top, #0074CC 0, #0074cc 50%, #0074cc 50%, #003580 100%);
  border: 1px solid #BD2C00;
  border-color: #0074CC #0074CC #003580;
  color: #FFF;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.3), inset 1px 0 0 rgba(255, 255, 255, 0.22), inset -1px 0 0 rgba(255, 255, 255, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 0 rgba(100, 100, 100, 0.1), 0 2px 0 rgba(150, 150, 150, 0.1);
}

div.blue-option:hover {
  background: #0074CC;
  background: linear-gradient(top, #0074CC 0, #0074cc 50%, #0074cc 50%, #003580 100%);
}

.gray-option {
  background-color: whiteSmoke;
  background-image: -ms-linear-gradient(top, #FFF, #e1e1e1);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#FFF), to(#e1e1e1));
  background-image: -webkit-linear-gradient(top, #FFF, #e1e1e1);
  background-image: -o-linear-gradient(top, #FFF, #e1e1e1);
  background-image: -moz-linear-gradient(top, #FFF, #e1e1e1);
  background-image: linear-gradient(top, #FFF, #e1e1e1);
  border: 1px solid #CCC;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  box-shadow: inset 0 -1px 0 #FFF, inset 1px 0 0 rgba(255, 255, 255, 0.3), inset -1px 0 0 rgba(255, 255, 255, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 1px 0 rgba(100, 100, 100, 0.1), 0 2px 0 rgba(150, 150, 150, 0.1);
  color: #333;
  float: left;
}

  .gray-option:hover {
    background: #e1e1e1;
  }

input[type="submit"],
input[type="button"],
button {
  font-size: 1.1em;
  padding: 7px 15px;
  cursor: pointer;
  font-family: 'Montserrat';
}

.flow-menu-bar {
  height: 30px;
  background: #FFF;
  overflow: auto;
  width: 100%;
  border-top: 1px solid #CCC;
  border-bottom: 1px solid #CCC;
}

  .flow-menu-bar > div {
    color: #666 !important;
    font-family: 'Montserrat' !important;
  }

.menu-bar {
  height: 30px;
  position: fixed;
  top: 75px;
  background: #333;
  overflow: auto;
  z-index: 52;
  width: 100%;
  -webkit-box-shadow: 0 3px 4px rgba(0, 0, 0, 0.15);
  -o-box-shadow: 0 3px 4px rgba(0, 0, 0, 0.25);
  box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.25);
}

ul.main-menu {
  list-style: none;
  list-style-image: none;
  list-style-type: none;
  padding: 0;
  margin: 0;
  float: right;
}

  ul.main-menu li {
    cursor: pointer;
    float: left;
    padding: 0 0;
    height: 30px;
    line-height: 30px;
    /*font-family: @default-font;*/
    font-size: 12px;
  }

    ul.main-menu li a {
      padding: 0 10px;
      display: block;
      text-decoration: none;
      color: #666;
    }

      ul.main-menu li a.selected {
        background: #e1e1e1;
      }

      ul.main-menu li a:hover {
        background: #e1e1e1;
        color: #666 !important;
      }

      ul.main-menu li a:hover {
        color: #FFF;
      }

  ul.main-menu .info {
    width: 30px;
    height: 30px;
    background: #333 url("https://images.geo-track.com/www/fleetco/layout.png?v=2.0.1.71") -68px -119px;
  }

.common-search-button {
  /*font-family: Verdana;*/
  font-size: 0.9em !important;
  margin: 0;
  background: whiteSmoke url("https://images.geo-track.com/www/fleetco/layout.png?v=2.0.1.71") 0 -86px;
  border: none;
}

#popup-lock {
  position: fixed;
  top: 0;
  bottom: 0;
  z-index: 700;
  background: #FFF;
  width: 100%;
  opacity: 0.25;
  filter: alpha(opacity=25);
  display: none;
}
/*#endregion*/
/*#region Login*/
.login {
  height: 100%;
  background: #FFF;
  min-width: 600px;
}

  .login .body {
    position: fixed;
    top: 75px;
    left: 0;
    width: 100%;
  }

  .login .server-messages {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    display: none;
  }

  .login .title {
    color: #666;
    font-size: 1.4em;
    text-align: center;
    margin: 30px 0 15px 0;
  }

  .login .title-ul {
    color: #666;
    font-size: 1.4em;
    text-align: center;
    margin: 30px 0 15px 0;
    visibility: hidden;
  }

  .login .body .splash {
    max-width: 1108px;
    min-width: 800px;
    height: 406px;
    margin-left: auto;
    margin-right: auto;
    background: url("https://images.geo-track.com/www/fleetco/login-splash.png?v=2.0.1.71");
  }

    .login .body .splash.forgot-password {
      background: url("https://images.geo-track.com/www/fleetco/login-splash.png?v=2.0.1.71");
    }

  .login .splash-text {
    float: left;
    margin-top: 50px;
    margin-left: 20px;
    width: 400px;
    /*    font-family: @default-font;*/
    font-size: 1.8em;
    text-align: center;
    color: #333;
  }

.steps-legend {
  font-size: 0.9em;
  text-align: center;
  margin-bottom: 21px;
  color: #333;
}

.final-step {
  display: none;
  color: #333;
}

.login-legend {
  color: #333;
}

.login .signin-container {
  background: #FFF;
  width: 336px;
  height: 306px;
  float: right;
  margin-right: 70px;
  margin-top: 36px;
  border-radius: 15px;
}

.login .signin-container-ul {
  background: #FFF transparent;
  width: 336px;
  height: 306px;
  float: right;
  margin-right: 70px;
  margin-top: 36px;
  border-radius: 15px;
}

.login .footer-container {
  width: 900px;
  height: 406px;
  margin-left: auto;
  margin-right: auto;
  overflow: auto;
  margin-top: 30px;
}

.login .footer {
  font-family: 'Montserrat';
}

  .login .footer a {
    text-decoration: none;
    font-family: 'Montserrat';
    color: #333;
    margin: 0 5px;
  }

    .login .footer a:hover {
      color: #333;
    }

.login .signin {
  padding: 20px;
}

  .login .signin .label {
    /*font-family: @default-font;*/
    font-size: 1em;
    color: #666;
    margin-bottom: 3px;
  }

  .login .signin .input {
    background: #F2F2F2;
    border: 1px solid #FFF;
    height: 20px;
    padding: 3px;
    width: 100%;
    font-size: 1em;
    margin-bottom: 10px;
    box-sizing: border-box;
  }

  .login .signin .forgot {
    font-family: 'Montserrat';
    float: left;
    line-height: 35px;
    display: block;
    text-decoration: none;
    color: #ff8200;
  }

  .login .signin .signin-button {
    float: right;
    background-color: #ff8200;
    color: #FFF;
  }

.login .lang-selector {
  color: #FFF;
  padding: 5px 30px;
  text-align: right;
}

  .login .lang-selector a {
    color: #666;
    text-decoration: none;
    font-size: 0.9em;
  }

    .login .lang-selector a:hover {
      color: #333;
    }

.login .lang-selector-ul {
  color: #FFF;
  padding: 5px 30px;
  text-align: center;
}

  .login .lang-selector-ul a {
    color: #666;
    text-decoration: solid;
    font-size: 0.9em;
  }

    .login .lang-selector-ul a:hover {
      color: #000000;
      text-decoration: solid;
    }
/*#endregion*/
/*#region Utilities*/
.loaded {
  background: url("https://images.geo-track.com/www/fleetco/layout.png?v=2.0.1.71") -171px -15px no-repeat;
  width: 0px;
  height: 0px;
  position: relative;
  top: 16px;
  left: 50px;
}
/*#endregion*/
/*#region Online Tracking Tabs*/
.ot-tabs-container {
  position: absolute;
  top: 107px;
  left: 0;
  width: 320px;
  /*height: 30px;*/
  /*color: @white-color;*/
  z-index: 80;
  font-size: 12px;
}

.ot-tabs {
  list-style: none;
  margin: 0;
  padding: 0;
  background: #FFF;
  border-bottom: 1px solid #CCC;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
}

  .ot-tabs li {
    display: inline-block;
    color: #333;
    padding: 5px;
    cursor: pointer;
    margin: 5px 5px 0 5px;
  }

    .ot-tabs li:hover {
      text-decoration: underline;
    }

    .ot-tabs li.selected {
      color: #333;
      background-color: #FFF;
      margin: 5px 5px 0 5px;
      border-top-left-radius: 5px;
      border-top-right-radius: 5px;
      border-top: 1px solid #CCC;
      border-left: 1px solid #CCC;
      border-right: 1px solid #CCC;
      border-bottom: 1px solid #FFF;
      margin-bottom: -2px;
    }

      .ot-tabs li.selected:hover {
        text-decoration: none;
      }

#online-tab .see-all-my-devices {
  background: url("https://images.geo-track.com/www/common/icons-16px.png?v=2.0.1.72") 0 -64px no-repeat;
  width: 16px;
  height: 16px;
  display: inline-block;
  vertical-align: bottom;
  margin-left: 5px;
  filter: invert(50%);
}

  #online-tab .see-all-my-devices:hover {
    opacity: 0.85;
    filter: alpha(opacity=85);
  }

  #online-tab .see-all-my-devices.selected {
    filter: invert(100%);
  }

#online-tab .refresh {
  background: url("https://images.geo-track.com/www/common/icons-16px.png?v=2.0.1.71") 0 -32px no-repeat;
  width: 16px;
  height: 16px;
  display: inline-block;
  vertical-align: bottom;
  filter: invert(50%);
}

  #online-tab .refresh:hover {
    opacity: 0.85;
    filter: alpha(opacity=85);
  }

#online-tab .export-online {
  width: 16px;
  height: 16px;
  display: inline-block;
  vertical-align: bottom;
  margin-left: 5px;
  filter: invert(50%);
}

  #online-tab .export-online:hover {
    opacity: 0.85;
    filter: alpha(opacity=85);
  }

  #online-tab .export-online.all {
    background: url("https://images.geo-track.com/www/common/icons-16px.png?v=2.0.1.71") 0 -112px no-repeat;
  }

  #online-tab .export-online.exporting {
    background: url("https://images.geo-track.com/www/fleetco/ajax-loader.gif?v=2.0.1.71") no-repeat;
  }

#online-tab .download-online-file {
  background: url("https://images.geo-track.com/www/common/icons-16px.png?v=2.0.1.71") 0 -130px no-repeat;
  width: 16px;
  height: 16px;
  margin-left: 4px;
  display: none;
  vertical-align: bottom;
  filter: invert(50%);
}

#not-reviewed-alerts-counter {
  display: inline-block;
  font-size: 0.75em;
  background: #666;
  color: #FFF;
  padding: 2px 5px;
  border-radius: 10px;
  margin: 0 2px;
  cursor: default;
}

#alerts-tab .refresh {
  background: url("https://images.geo-track.com/www/common/icons-16px.png?v=2.0.1.71") 0 -32px no-repeat;
  width: 16px;
  height: 16px;
  display: inline-block;
  vertical-align: bottom;
  filter: invert(50%);
}

  #alerts-tab .refresh:hover {
    opacity: 0.85;
    filter: alpha(opacity=85);
  }

#alerts-panel .sound-alerts {
  background: url("https://images.geo-track.com/www/common/icons-16px.png?v=2.0.1.71") 0 -96px no-repeat;
  width: 16px;
  height: 16px;
  display: inline-block;
  vertical-align: bottom;
  margin-left: 5px;
  filter: invert(50%);
}

  #alerts-panel .sound-alerts:hover {
    opacity: 0.85;
    filter: alpha(opacity=85);
  }

  #alerts-panel .sound-alerts.selected {
    background: url("https://images.geo-track.com/www/common/icons-16px.png?v=2.0.1.71") 0 -80px no-repeat;
    filter: invert(50%);
  }
/*#endregion*/
/*#region Online Panel*/
#map {
  z-index: 50;
  position: fixed;
  top: 107px;
  bottom: 29px;
  left: 320px;
  width: 100%;
  background-color: #FFF;
  margin: 0 0;
  min-width: 500px;
  min-height: 500px;
  overflow: hidden;
}

#mtb-container .free-search .input {
  background-color: #FFF;
}

#mtb-container .map-list .maps a {
  padding: 3px 10px;
  background-color: #e1e1e1;
  color: #666;
  font-family: Montserrat;
}

  #mtb-container .map-list .maps a:after {
    content: "\f0d7";
    font-family: FontAwesome;
    margin-left: 5px;
  }

.adding-object {
  cursor: crosshair !important;
}

#op-online-dummies {
  display: none;
}

#lw-logo-a {
  position: fixed;
  bottom: 0;
  width: 320px;
  height: 37px;
  background: #FFF url("https://images.geo-track.com/www/fleetco/layout.png?v=2.0.1.71") -735px -47px no-repeat;
  z-index: 71;
}

#lw-logo-b {
  width: 131px;
  height: 21px;
  background: url("https://images.geo-track.com/www/fleetco/layout.png?v=2.0.1.71") -742px -99px no-repeat;
  display: inline-block;
  margin-top: 3px;
  float: left;
  margin-left: 5px;
}

#op-devices {
  position: fixed;
  top: 140px;
  bottom: 29px;
  width: 320px;
  overflow: hidden;
  background-color: #FFF;
  overflow-x: hidden;
  overflow-y: hidden;
  z-index: 70;
  -webkit-box-shadow: 0 3px 20px rgba(0, 0, 0, 0.15);
  -o-box-shadow: 0 3px 20px rgba(0, 0, 0, 0.25);
  box-shadow: 0 3px 20px 0 rgba(0, 0, 0, 0.25);
}

  #op-devices .filter {
    margin: 5px 7px;
    display: block;
    /*width: 310px;*/
    box-sizing: border-box;
  }

    #op-devices .filter input {
      width: 100%;
      box-sizing: border-box !important;
      border: 0;
      background-color: #e1e1e1;
      padding: 8px;
      border-radius: 5px;
      font-family: Montserrat;
      font-size: 12px;
    }
#user-total-devices {
  position: fixed;
  top: 180px;
  bottom: 29px;
  overflow-x: hidden;
  overflow-y: auto;
  background: #FFF;
  width: 320px;
  height: 50px;
  list-style: none;
  margin: 0;
  padding: 0;
}

  #user-total-devices div.user-devices {
    background: #F2F2F2;
    color: #333;
    display: block;
    padding: 3px 10px;
    border-bottom: 5px solid #C2C2C2;
    font-size: 14px;
    box-sizing: border-box;
    border-radius: 10px;
    margin: 5px;
  }

    #user-total-devices div.user-devices span {
      display: inline-block;
      vertical-align: middle;
      line-height: 18px;
      width: 210px;
    }

    #user-total-devices div.user-devices span-total-count {
      display: inline-block;
      vertical-align: middle;
      line-height: 18px;
      width: 30px;
      font-size: 20px;
    }

    #user-total-devices div.user-devices .show-all-devices {
      background: url("https://images.geo-track.com/www/common/icon-load-all-devices.png?v=2.0.1.72");
      width: 24px;
      height: 24px;
      display: inline-block;
      vertical-align: middle;
      margin-left: 15px;
      cursor: pointer;
    }

#op-device-groups {
  position: fixed;
  top: 200px;
  bottom: 29px;
  overflow-x: hidden;
  overflow-y: auto;
  background: #FFF;
  width: 320px;
  list-style: none;
  margin: 0;
  padding: 0;
}

  #op-device-groups div.group-header {
    background: #F2F2F2;
    color: #333;
    display: block;
    padding: 3px 10px;
    border-bottom: 1px solid #C2C2C2;
    font-size: 12px;
    box-sizing: border-box;
    border-radius: 10px;
    margin: 5px;
  }

  #op-device-groups div.group-header span {
    display: inline-block;
    vertical-align: middle;
    line-height: 18px;
    width: 170px;
  }

  #op-device-groups div.group-header span-item-count {
    display: inline-block;
    vertical-align: middle;
    line-height: 18px;
    background: #808080;
    color: #FFF;
    width: 30px;
    text-align: center;
    box-sizing: border-box;
    border-radius: 10px;
    margin: 10px;
  }

  #op-device-groups div.group-header .hide-group {
    background: url("https://images.geo-track.com/www/common/hide-tool-bar-show.png?v=2.0.1.75");
    width: 16px;
    height: 16px;
    display: inline-block;
    vertical-align: middle;
    margin-left: 5px;
    cursor: pointer;
  }

    #op-device-groups div.group-header .hide-group.disabled {
      background: url("https://images.geo-track.com/www/common/hide-tool-bar-hide.png?v=2.0.1.75");
    }

    #op-device-groups div.group-header .hide-group.selected {
      background: url("https://images.geo-track.com/www/common/hide-tool-bar-show-selected.png?v=2.0.1.75");
    }

    #op-device-groups div.group-header .hide-group.disabledSelected {
      background: url("https://images.geo-track.com/www/common/hide-tool-bar-hide-selected.png?v=2.0.1.75");
    }

    #op-device-groups div.group-header .expanded {
      background: url("https://images.geo-track.com/www/common/icons-16px.png?v=2.0.1.72") 0 -16px no-repeat;
      width: 16px;
      height: 16px;
      display: inline-block;
      vertical-align: middle;
      cursor: pointer;
    }

    #op-device-groups div.group-header .collapsed {
      background: url("https://images.geo-track.com/www/common/icons-selected-16px.png?v=2.0.1.72") 0 0 no-repeat;
      width: 16px;
      height: 16px;
      display: inline-block;
      vertical-align: middle;
      cursor: pointer;
    }

    #op-device-groups div.group-header .toggle-group-visible {
      background: url("https://images.geo-track.com/www/common/device-tool-bar.png?v=2.0.1.71") 0 -80px;
      width: 16px;
      height: 16px;
      display: inline-block;
      vertical-align: middle;
      cursor: pointer;
      margin-left: 5px;
      margin-right: 5px;
    }

      #op-device-groups div.group-header .toggle-group-visible.disabled {
        background: url("https://images.geo-track.com/www/common/device-tool-bar.png?v=2.0.1.71") 0 -64px;
      }

  #op-device-groups .options-container {
    border-top: 1px solid #F2F2F2;
    border-bottom: 1px solid #F2F2F2;
  }

    #op-device-groups .options-container .pager {
      display: none;
      padding: 5px;
      font-size: 0.9em;
      overflow: auto;
    }

  #op-device-groups li {
    list-style-type: none;
    list-style: none;
    margin: 0;
    padding: 0;
    background: #FFF;
    overflow: auto;
  }

    #op-device-groups li ul {
      list-style-type: none;
      list-style: none;
      margin: 0;
      padding: 0;
      background: #FFF;
    }

      #op-device-groups li ul li {
        background: #FFF;
        padding: 20px;
        cursor: pointer;
        -webkit-box-shadow: 0 0px 9px rgba(0, 0, 0, 0.1);
        -o-box-shadow: 0 0px 9px rgba(0, 0, 0, 0.1);
        box-shadow: 0 0px 9px rgba(0, 0, 0, 0.1);
        box-sizing: border-box;
        border-radius: 10px;
        margin: 10px;
        font-size: 12px;
      }

#alerts-popup-container .alerts .popup-alert {
  background: #FFF;
  padding: 20px;
  cursor: pointer;
  -webkit-box-shadow: 0 0px 9px rgba(0, 0, 0, 0.1) !important;
  -o-box-shadow: 0 0px 9px rgba(0, 0, 0, 0.1) !important;
  box-shadow: 0 0px 9px rgba(0, 0, 0, 0.1) !important;
  box-sizing: border-box;
  border-radius: 10px;
  margin: 10px !important;
  font-size: 12px;
}

#alerts-popup-container .alerts {
  margin: 0;
  width: 100%;
  box-sizing: border-box;
}

#alerts-popup-container .title {
  background-color: #e1e1e1 !important;
  color: #666 !important;
}

#alerts-popup-container {
  background-color: #FFF !important;
  color: #666 !important;
}

#op-device-groups li ul li:hover {
  -webkit-box-shadow: 0 0px 9px rgba(0, 0, 0, 0.2);
  -o-box-shadow: 0 0px 9px rgba(0, 0, 0, 0.2);
  box-shadow: 0 0px 9px rgba(0, 0, 0, 0.2);
}

#op-device-groups li ul li.selected {
  background: #e1e1e1;
}

.device-item {
}

  .device-item .model-name {
    font-weight: bold;
    color: #666;
  }

  .device-item .alias {
    font-weight: bold;
    color: #333;
  }

  .device-item .last-address {
    font-weight: normal;
    font-size: 0.95em;
    color: #666;
  }

  .device-item .on-demand-address {
    color: #ff8200;
    font-size: 0.95em;
    text-decoration: none;
  }

  .device-item.hidden {
    opacity: 0.3;
    filter: alpha(opacity=30);
  }

  .device-item.mine {
  }

.device-over {
  -webkit-box-shadow: 1px 3px 7px rgba(0, 0, 0, 0.75);
  -o-box-shadow: 1px 3px 7px rgba(0, 0, 0, 0.75);
  box-shadow: 1px 3px 7px rgba(0, 0, 0, 0.75);
}

.device-marker {
  width: 38px;
  height: 38px;
  display: block;
}

  .device-marker div:first-child {
    width: 37px;
    height: 33px;
    border-radius: 5px;
    display: block;
  }

  .device-marker .arrow {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    margin: 0 auto;
    display: block;
  }

.landmark-tip .name {
  font-weight: bold;
  color: #333;
}

.landmark-tip .owner {
  font-weight: bold;
  color: #CCC;
}

.landmark-tip .address {
  font-weight: normal;
  font-size: 0.95em;
  color: #666;
}

.landmark-tip a.center {
  text-decoration: none;
  color: #0074CC;
  font-size: 0.9em;
}

  .landmark-tip a.center:hover {
    color: #333;
  }

.landmark-tip a.mark {
  margin-left: 5px;
  text-decoration: none;
  color: #0074CC;
  font-size: 0.9em;
}

  .landmark-tip a.mark:hover {
    color: #333;
  }

.landmark-tip a.zone {
  margin-left: 5px;
  text-decoration: none;
  color: #0074CC;
  font-size: 0.9em;
}

  .landmark-tip a.zone:hover {
    color: #333;
  }

.traffic-tip {
}

  .traffic-tip .level {
    font-weight: bold;
    color: #333;
  }

  .traffic-tip .owner {
    font-weight: bold;
    color: #CCC;
  }

  .traffic-tip .street {
    font-weight: normal;
    font-size: 0.95em;
    color: #666;
  }

.traffic-alert-tip .type {
  font-weight: bold;
  color: #333;
}

.traffic-alert-tip .owner {
  font-weight: bold;
  color: #CCC;
}

.traffic-alert-tip .time {
  font-weight: normal;
  font-size: 0.95em;
  color: #666;
}

.waze-type-POLICEMAN {
  background: url("https://images.geo-track.com/www/fleetco/layout.png?v=2.0.1.71") -287px -163px;
}

.waze-type-JAM {
  background: url("https://images.geo-track.com/www/fleetco/layout.png?v=2.0.1.71") -312px -163px;
}

.waze-type-WEATHERHAZARD {
  background: url("https://images.geo-track.com/www/fleetco/layout.png?v=2.0.1.71") -337px -163px;
}

.waze-type-ACCIDENT {
  background: url("https://images.geo-track.com/www/fleetco/layout.png?v=2.0.1.71") -362px -163px;
}

.waze-type-OTHER {
  background: url("https://images.geo-track.com/www/fleetco/layout.png?v=2.0.1.71") -387px -163px;
}

.waze-type-MISC {
  background: url("https://images.geo-track.com/www/fleetco/layout.png?v=2.0.1.71") -387px -163px;
}

.waze-type-CONSTRUCTION {
  background: url("https://images.geo-track.com/www/fleetco/layout.png?v=2.0.1.71") -387px -163px;
}

.map-tip .content {
  padding: 10px 15px;
  font-family: Montserrat;
}

.map-tip .tool-bar {
  padding: 10px 15px;
  font-family: Montserrat;
}

.map-tip a {
  text-decoration: none;
  color: #0074CC;
  font-size: 0.9em;
  margin: 0 5px 0 0;
}

  .map-tip a:hover {
    color: #333;
  }

.map-tip .see-address {
  text-decoration: none;
  color: #0074CC;
  font-size: 0.9em;
  margin: 0 5px 0 0;
  padding: 10px 15px;
  font-family: 'Montserrat';
  text-decoration: underline;
}

  .map-tip .see-address:hover {
    color: #333;
  }

  .map-tip .see-address .description {
    cursor: pointer;
  }

.map-tip .expand {
  font-size: 0.96em;
  font-weight: bold;
  text-align: right;
  margin-right: 10px;
}

  .map-tip .expand .show-more {
    background: url("https://images.geo-track.com/www/common/map-tip-show-more.png");
    width: 16px;
    height: 16px;
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
  }

.map-tip .collapse {
  font-size: 0.96em;
  font-weight: bold;
  text-align: right;
  margin-right: 10px;
}

  .map-tip .collapse .show-less {
    background: url("https://images.geo-track.com/www/common/map-tip-show-less.png");
    width: 16px;
    height: 16px;
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
  }

.map-tip .separate {
  border-bottom: 1px solid #CCC;
}

.contract-info-container {
  margin: 5px -7px -7px -7px;
  padding: 5px;
  font-size: 0.9em;
  background: #CCC;
  color: #333;
  overflow: auto;
}

  .contract-info-container .is-reaction.no {
    display: none;
  }

  .contract-info-container .is-reaction.yes {
    width: 18px;
    height: 15px;
    background: url("https://images.geo-track.com/www/fleetco/layout.png?v=2.0.1.71") -126px -125px;
    display: block;
    float: right;
    margin-top: 2px;
    margin-right: 4px;
  }

  .contract-info-container span:hover {
    text-decoration: underline;
  }

#op-zone-dummies {
  display: none;
}

.zone-tip {
}

  .zone-tip .name {
    color: #333;
    font-weight: bold;
    font-size: 1em;
  }

  .zone-tip .last-update-label {
    font-size: 0.9em;
    color: #666;
  }

  .zone-tip .last-update {
    font-size: 1.1em;
    display: block;
  }

  .zone-tip .owner-label {
    font-size: 0.9em;
  }

  .zone-tip .tip-tool-bar {
    margin-top: 5px;
  }

  .zone-tip a.edit {
    text-decoration: none;
    color: #0074CC;
    font-size: 0.9em;
    margin-right: 5px;
  }

    .zone-tip a.edit:hover {
      color: #333;
    }

  .zone-tip a.center-here {
    text-decoration: none;
    color: #0074CC;
    font-size: 0.9em;
  }

    .zone-tip a.center-here:hover {
      color: #333;
    }

.zone-label {
  font-size: 9px;
  background: #0074CC;
  text-align: center;
  line-height: 18px;
  color: #FFF;
  border-radius: 3px;
  display: inline-block;
}

.device-label {
  font-size: 9px;
  background: #0074CC;
  text-align: center;
  line-height: 18px;
  color: #FFF;
  border-radius: 3px;
  display: inline-block;
  margin-top: 5px !important;
}

.device-label-online-plate {
  font-size: 9px;
  background: #0074CC;
  text-align: center;
  line-height: 18px;
  color: #FFF;
  border-radius: 3px;
  display: inline-block;
  margin-top: 5px !important;
  width: 70px !important;
}
/*#endregion*/
/*#region Online History Panel*/
#op-history-dummies {
  display: none;
}

#op-history {
  position: fixed;
  top: 137px;
  bottom: 29px;
  width: 320px;
  background-color: #FFF;
  overflow-x: hidden;
  overflow-y: hidden;
  z-index: 70;
  -webkit-box-shadow: 0 3px 20px rgba(0, 0, 0, 0.15);
  -o-box-shadow: 0 3px 20px rgba(0, 0, 0, 0.25);
  box-shadow: 0 3px 20px 0 rgba(0, 0, 0, 0.25);
  display: none;
}

  #op-history .type-selector {
    display: block;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    background-color: #FFF;
    padding: 5px;
    box-sizing: border-box;
  }

    #op-history .type-selector .rotator {
      position: relative;
      width: 100%;
      display: block;
      overflow: hidden;
    }

  #op-history .devices-container {
    width: 100%;
    display: block;
    text-align: center;
  }

  #op-history .toggler {
    width: 25px;
    height: 28px;
    display: block;
    cursor: pointer;
    float: left;
  }

    #op-history .toggler.d {
      background: #FEDFA7 url("https://images.geo-track.com/www/fleetco/layout.png?v=2.0.1.71") -37 #56BAEC 3px -120px;
    }

    #op-history .toggler.c {
      background: #FDC255 url("https://images.geo-track.com/www/fleetco/layout.png?v=2.0.1.71") -396px -120px;
    }

  #op-history .contracts-container {
    width: 294px;
    height: 28px;
    display: block;
    float: left;
    background: #FEDFA7;
    padding: 2px 0 2px 2px;
  }

  #op-history .contracts {
    width: 288px;
    margin: 1px auto 0 auto;
  }

  #op-history .devices {
    width: 100%;
    margin: 1px auto 0 auto;
    box-sizing: border-box;
  }

  #op-history .selector-container {
    background: #FFF;
    border-top: 1px solid #e1e1e1;
    border-bottom: 1px solid #e1e1e1;
  }

    #op-history .selector-container .time-selector {
      display: block;
      overflow: hidden;
      min-height: 28px;
    }

  #op-history .selector {
    min-height: 28px;
  }

  #op-history ul.selector {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow: auto;
    float: left;
  }

    #op-history ul.selector li {
      list-style: none;
      display: block;
      float: left;
      padding: 0 5px;
      line-height: 28px;
      cursor: pointer;
      color: #666;
      min-height: 28px;
      font-size: 12px;
    }

      #op-history ul.selector li:hover {
        text-decoration: underline;
      }

      #op-history ul.selector li.selected {
        background-color: #e1e1e1;
        color: #666;
      }

        #op-history ul.selector li.selected:hover {
          opacity: 1;
        }

  #op-history .query-button {
    float: right;
  }

    #op-history .query-button::after {
      content: "\f002";
      font-family: FontAwesome;
      position: relative;
      font-size: 18px;
      top: 4px;
      right: 10px;
      color: #666;
      cursor: pointer;
    }

    #op-history .query-button:hover {
      opacity: 0.6;
      filter: alpha(opacity=60);
    }

  #op-history .camera-button {
    float: right;
    background: url("https://images.geo-track.com/www/common/device-tool-bar.png?v=2.0.1.75") 0 -598px;
    width: 16px;
    height: 16px;
    padding: 0;
    display: inline-block;
    margin-right: 5px;
    margin-top: 9px;
    cursor: pointer;
  }

    #op-history .camera-button.selected {
      float: right;
      background: url("https://images.geo-track.com/www/common/device-tool-bar.png?v=2.0.1.75") 0 -480px;
    }

    #op-history .camera-button:hover {
      opacity: 0.6;
      filter: alpha(opacity=60);
    }
  #op-history .dates-label {
    font-size: 0.9em;
    display: inline-block;
    width: 70px;
    text-align: right;
  }

  #op-history .dates-input {
    width: 80px;
    text-align: center;
    font-size: 0.8em;
    cursor: pointer;
  }

  #op-history .dates {
    background: #e1e1e1;
    padding: 7px;
    display: none;
  }

    #op-history .dates .d1 {
      display: block;
    }

    #op-history .dates .d2 {
      margin-top: 5px;
      display: block;
    }

  #op-history .time-parts {
    font-size: 0.8em;
    width: 45px;
  }

  #op-history .playblack-control {
    display: none;
    background: #e1e1e1;
  }

    #op-history .playblack-control ul {
      list-style: none;
      list-style-type: none;
      padding: 0;
      margin: 0;
      display: block;
      overflow: auto;
    }

      #op-history .playblack-control ul li {
        float: left;
        width: 16px;
        height: 16px;
        line-height: 16px;
        cursor: pointer;
        margin: 4px;
      }

        #op-history .playblack-control ul li.play {
          background: url("https://images.geo-track.com/www/fleetco/layout.png?v=2.0.1.71") -227px -15px;
        }

        #op-history .playblack-control ul li.pause {
          display: none;
          background: url("https://images.geo-track.com/www/fleetco/layout.png?v=2.0.1.71") -211px -15px;
        }

        #op-history .playblack-control ul li.stop {
          display: none;
          background: url("https://images.geo-track.com/www/fleetco/layout.png?v=2.0.1.71") -211px -31px;
        }

        #op-history .playblack-control ul li.x1 {
          color: #333;
        }

          #op-history .playblack-control ul li.x1.selected {
            color: #000;
            font-weight: bold;
          }

        #op-history .playblack-control ul li.x2 {
          color: #333;
        }

          #op-history .playblack-control ul li.x2.selected {
            color: #000;
            font-weight: bold;
          }

        #op-history .playblack-control ul li.x4 {
          color: #333;
        }

          #op-history .playblack-control ul li.x4.selected {
            color: #000;
            font-weight: bold;
          }

  #op-history ul.detail {
    position: fixed;
    bottom: 29px;
    overflow-x: hidden;
    overflow-y: auto;
    width: 320px;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  #op-history .item {
    margin: 10px;
    padding: 20px;
    cursor: pointer;
    -webkit-box-shadow: 0 0px 9px rgba(0, 0, 0, 0.1);
    -o-box-shadow: 0 0px 9px rgba(0, 0, 0, 0.1);
    box-shadow: 0 0px 9px 0 rgba(0, 0, 0, 0.1);
    background: #FFF;
    border-radius: 10px;
  }

    #op-history .item:hover {
      -webkit-box-shadow: 0 0px 9px rgba(0, 0, 0, 0.2);
      -o-box-shadow: 0 0px 9px rgba(0, 0, 0, 0.2);
      box-shadow: 0 0px 9px 0 rgba(0, 0, 0, 0.2);
    }

    #op-history .item.selected {
      background: #e1e1e1;
    }

      #op-history .item.selected > .sequence-label {
        /*color: @gray-color;*/
        font-weight: normal;
      }

      #op-history .item.selected > .address {
        /*color: #e1e1e1;*/
        font-weight: normal;
      }

      #op-history .item.selected > .message-time {
        /*color: #e1e1e1*/
        font-weight: normal;
      }

    #op-history .item .sequence-label {
      font-size: 1em;
      color: #ff8200;
    }

    #op-history .item .address {
      font-size: 0.9em;
      color: #333;
    }

    #op-history .item .message-time {
      font-size: 0.9em;
      font-weight: bold;
    }

    #op-history .item.exception {
      border-right: 7px solid #BD2C00;
    }

    #op-history .item.selected .alert {
      color: #666;
    }

    #op-history .item .alert {
      overflow: auto;
      margin: 5px 0;
    }

      #op-history .item .alert .message {
        float: left;
        padding-left: 5px;
        font-size: 0.85em;
        width: 200px;
      }

      #op-history .item .alert .icon {
        float: left;
        width: 24px;
        height: 24px;
        margin: 2px;
      }

.history-tip .sequence-label {
  font-size: 1em;
  color: #ff8200;
}

.history-tip .address {
  font-size: 0.9em;
  color: #333;
}

.history-tip .speed {
  font-size: 0.9em;
}

.history-tip .message-time {
  font-size: 0.9em;
  font-weight: bold;
}

.history-tip a.mark {
  text-decoration: none;
  color: #0074CC;
  font-size: 0.9em;
}

  .history-tip a.mark:hover {
    color: #333;
  }

.history-tip a.zone {
  margin-left: 5px;
  text-decoration: none;
  color: #0074CC;
  font-size: 0.9em;
}

  .history-tip a.zone:hover {
    color: #333;
  }

.history-tip .alert {
  overflow: auto;
  margin: 5px 0;
}

  .history-tip .alert .icon {
    float: left;
    width: 24px;
    height: 24px;
  }

  .history-tip .alert .message {
    float: left;
    padding-left: 5px;
    width: 170px;
    min-width: 170px;
    font-size: 0.95em;
  }
/*#endregion*/
/*#region Alerts*/
#op-alerts-dummies {
  display: none;
}

#op-alerts {
  position: fixed;
  top: 139px;
  bottom: 29px;
  width: 320px;
  overflow-x: hidden;
  overflow-y: hidden;
  z-index: 70;
  -webkit-box-shadow: 0 3px 20px rgba(0, 0, 0, 0.15);
  -o-box-shadow: 0 3px 20px rgba(0, 0, 0, 0.25);
  box-shadow: 0 3px 20px 0 rgba(0, 0, 0, 0.25);
  display: none;
  background-color: #FFF;
}

  #op-alerts .type-selector {
    display: block;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    box-sizing: border-box;
    padding: 5px;
  }

    #op-alerts .type-selector .rotator {
      position: relative;
      width: 100%;
      display: block;
      overflow: hidden;
    }

  #op-alerts .devices-container {
    width: 100%;
    display: block;
  }

  #op-alerts .toggler {
    width: 25px;
    height: 28px;
    display: block;
    cursor: pointer;
    float: left;
  }

    #op-alerts .toggler.d {
      background: #FEDFA7 url("https://images.geo-track.com/www/fleetco/layout.png?v=2.0.1.71") -373px -120px;
    }

    #op-alerts .toggler.c {
      background: #FDC255 url("https://images.geo-track.com/www/fleetco/layout.png?v=2.0.1.71") -396px -120px;
    }

  #op-alerts .contracts-container {
    width: 294px;
    height: 28px;
    display: block;
    float: left;
    background: #FEDFA7;
    padding: 2px 0 2px 2px;
  }

  #op-alerts .contracts {
    width: 288px;
    margin: 1px auto 0 auto;
  }

  #op-alerts .selector-container {
    background: #FEDFA7;
  }

  #op-alerts .selector {
    min-height: 28px;
  }

  #op-alerts .devices {
    width: 100%;
    margin: 1px auto 0 auto;
    border-box: 100%;
  }

  #op-alerts .options-container {
    border-top: 1px solid #e1e1e1;
    border-bottom: 1px solid #e1e1e1;
  }

    #op-alerts .options-container .count-message {
      color: #FFF;
    }

  #op-alerts .pager {
    display: none;
    padding: 5px;
    font-size: 0.9em;
    overflow: auto;
  }

    #op-alerts .pager a.previous-page {
      text-decoration: none;
      display: inline-block;
      margin-right: 5px;
      color: #0074CC;
    }

      #op-alerts .pager a.previous-page:hover {
        color: #333;
      }

    #op-alerts .pager a.next-page {
      text-decoration: none;
      display: inline-block;
      color: #0074CC;
    }

      #op-alerts .pager a.next-page:hover {
        color: #333;
      }

  #op-alerts ul.detail {
    position: fixed;
    bottom: 29px;
    overflow-x: hidden;
    overflow-y: auto;
    width: 320px;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  #op-alerts .item {
    background: #FFF;
    padding: 20px;
    cursor: pointer;
    -webkit-box-shadow: 0 0px 9px rgba(0, 0, 0, 0.1);
    -o-box-shadow: 0 0px 9px rgba(0, 0, 0, 0.1);
    box-shadow: 0 0px 9px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    border-radius: 10px;
    margin: 10px;
    font-size: 12px;
  }

    #op-alerts .item.reviewed > .message {
      opacity: 0.75;
      filter: alpha(opacity=75);
    }

    #op-alerts .item:hover {
      -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
      -o-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
      box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.35);
    }

    #op-alerts .item.selected {
      background: #333;
      color: #FFF;
    }

    #op-alerts .item .message {
      font-size: 1em;
      padding: 5px;
    }

    #op-alerts .item .priority {
      font-size: 0.8em;
      margin-right: 5px;
      padding: 1px 5px;
      background: #000;
      color: #FFF;
      border-radius: 5px;
    }

    #op-alerts .item .speed {
      font-size: 0.9em;
      padding: 0 5px;
    }

    #op-alerts .item .imei {
      font-size: 1em;
      padding: 5px 5px 0;
    }

    #op-alerts .item .message-time {
      font-size: 0.9em;
      padding: 0 5px;
    }

    #op-alerts .item .address {
      font-size: 0.9em;
      padding: 5px 5px 0;
    }

    #op-alerts .item .review-container {
      overflow: auto;
    }

      #op-alerts .item .review-container .do-review {
        margin: 0 5px 5px 0;
        display: block;
        float: right;
        background: url("https://images.geo-track.com/www/fleetco/layout.png?v=2.0.1.71") -24px -157px;
        width: 16px;
        height: 15px;
        cursor: pointer;
      }

        #op-alerts .item .review-container .do-review:hover {
          opacity: 0.75;
          filter: alpha(opacity=75);
        }

      #op-alerts .item .review-container .update-review {
        margin: 0 5px 5px 0;
        display: block;
        float: right;
        background: url("https://images.geo-track.com/www/fleetco/layout.png?v=2.0.1.71") -24px -157px;
        width: 16px;
        height: 15px;
        cursor: pointer;
        opacity: 0.25;
        filter: alpha(opacity=25);
      }

        #op-alerts .item .review-container .update-review:hover {
          opacity: 0.5;
          filter: alpha(opacity=50);
        }

    #op-alerts .item .automotor {
      font-size: 1em;
      padding: 0 5px 0 5px;
    }

.alert-tip .message {
  font-size: 1em;
  color: #ff8200;
}

.alert-tip .address {
  font-size: 0.9em;
  color: #333;
}

.alert-tip .message-time {
  font-size: 0.9em;
  font-weight: bold;
}

.alert-tip a.mark {
  text-decoration: none;
  color: #0074CC;
  font-size: 0.9em;
}

  .alert-tip a.mark:hover {
    color: #333;
  }

.alert-tip a.zone {
  margin-left: 5px;
  text-decoration: none;
  color: #0074CC;
  font-size: 0.9em;
}

  .alert-tip a.zone:hover {
    color: #333;
  }
/*#endregion*/
/*#region New Terms of Use*/
.new-terms-of-use {
}

  .new-terms-of-use .container {
    overflow-x: hidden;
    overflow-y: auto;
    position: fixed;
    left: 0;
    top: 105px;
    width: 430px;
    bottom: 28px;
    background: #FFF;
  }

  .new-terms-of-use .terms-of-use {
    overflow-x: hidden;
    overflow-y: scroll;
    position: fixed;
    left: 430px;
    top: 105px;
    bottom: 28px;
    background: #FFF;
  }

    .new-terms-of-use .terms-of-use p {
      text-align: justify;
      margin: 10px 29px;
    }

    .new-terms-of-use .terms-of-use h4 {
      margin: 30px 10px;
      text-align: center;
    }

  .new-terms-of-use form {
    margin: 0;
  }

    .new-terms-of-use form a.cancel {
      color: #0074CC;
      text-decoration: none;
      margin-left: 10px;
      font-family: 'Montserrat';
      font-size: 1.1em;
    }

      .new-terms-of-use form a.cancel:hover {
        text-decoration: underline;
        color: #333;
      }

    .new-terms-of-use form .welcome {
      padding: 20px;
      font-size: 0.85em;
      background: #666;
      color: #FFF;
    }

  .new-terms-of-use .warning {
    color: #333;
    font-size: 0.9em;
    padding: 15px;
    line-height: 11px;
    background: #FEDFA7;
    border-bottom: 1px solid #e1e1e1;
  }

  .new-terms-of-use form .sub {
    font-family: 'Montserrat';
    font-size: 1.25em;
    border-bottom: 1px solid #e1e1e1;
    font-weight: bold;
    max-width: 800px;
    padding: 0 0 5px 5px;
    margin-top: 20px;
  }

  .new-terms-of-use .time_zone_offset {
    margin: 10px 20px;
  }
/*#endregion*/
/*#region First Time Login*/
.first-time-login {
}

  .first-time-login .container {
    overflow-x: hidden;
    overflow-y: auto;
    position: fixed;
    left: 0;
    top: 105px;
    width: 430px;
    bottom: 28px;
    background: #FFF;
  }

  .first-time-login .terms-of-use {
    overflow-x: hidden;
    overflow-y: scroll;
    position: fixed;
    left: 430px;
    top: 105px;
    bottom: 28px;
    background: #FFF;
  }

    .first-time-login .terms-of-use p {
      text-align: justify;
      margin: 10px 29px;
    }

    .first-time-login .terms-of-use h4 {
      margin: 30px 10px;
      text-align: center;
    }

  .first-time-login form {
    margin: 0;
  }

    .first-time-login form a.cancel {
      color: #0074CC;
      text-decoration: none;
      margin-left: 10px;
      font-family: 'Montserrat';
      font-size: 1.1em;
    }

      .first-time-login form a.cancel:hover {
        text-decoration: underline;
        color: #333;
      }

    .first-time-login form .welcome {
      padding: 20px;
      font-size: 0.85em;
      background: #666;
      color: #FFF;
    }

  .first-time-login .warning {
    color: #333;
    font-size: 0.9em;
    padding: 15px;
    line-height: 11px;
    background: #FEDFA7;
    border-bottom: 1px solid #e1e1e1;
  }

  .first-time-login form .sub {
    font-family: 'Montserrat';
    font-size: 1.25em;
    border-bottom: 1px solid #e1e1e1;
    font-weight: bold;
    max-width: 800px;
    padding: 0 0 5px 5px;
    margin-top: 20px;
  }

  .first-time-login form .section {
    list-style: none;
    list-style-type: none;
    margin: 10px 0 20px 0;
    padding: 0;
  }

    .first-time-login form .section li {
      margin: 0 20px;
      list-style: none;
    }

    .first-time-login form .section ul {
      margin: 0;
      padding: 0;
    }

      .first-time-login form .section ul li {
        margin: 0;
      }

        .first-time-login form .section ul li.label {
          color: #666;
          line-height: 22px;
          font-size: 0.92em;
        }

        .first-time-login form .section ul li.input-container {
          display: inline-block;
        }

        .first-time-login form .section ul li .input {
          border: 1px solid #CCC;
          height: 21px;
          max-width: 350px;
          padding: 0 2px;
        }

          .first-time-login form .section ul li .input.required {
            border: 2px solid #56BAEC;
          }
/*#endregion*/
/*#region My Account*/
.my-account {
}

  .my-account.container {
    background: #FFF;
    overflow-x: hidden;
    overflow-y: auto;
    position: fixed;
    top: 160px;
    bottom: 27px;
    width: 100%;
  }

  .my-account form {
    margin: 20px 30px;
  }

    .my-account form a.cancel {
      color: #0074CC;
      text-decoration: none;
      margin-left: 10px;
      font-family: 'Montserrat';
      font-size: 1.1em;
    }

      .my-account form a.cancel:hover {
        text-decoration: underline;
        color: #333;
      }

    .my-account form .sub {
      font-family: 'Montserrat';
      font-size: 1.25em;
      border-bottom: 1px solid #e1e1e1;
      font-weight: bold;
      max-width: 800px;
      padding: 0 0 5px 5px;
      margin-top: 20px;
    }

    .my-account form .section {
      list-style: none;
      list-style-type: none;
      margin: 10px 0;
      padding: 0;
    }

      .my-account form .section li {
        margin: 0 0 5px 0;
      }

      .my-account form .section ul li {
        margin: 0;
      }

        .my-account form .section ul li.label {
          color: #666;
          width: 250px;
          margin-right: 10px;
          text-align: right;
          line-height: 22px;
          display: inline-block;
          vertical-align: top;
          font-size: 0.92em;
        }

        .my-account form .section ul li.input-container {
          display: inline-block;
        }

        .my-account form .section ul li .input {
          border: 1px solid #CCC;
          height: 21px;
          padding: 0 2px;
        }

          .my-account form .section ul li .input.required {
            border: 2px solid #56BAEC;
          }

  .my-account .phone-input .model-property-name {
    display: none;
  }

  .my-account .phone-input .codes {
  }

  .my-account .phone-input .phone {
  }


  .my-account .date-picker {
    cursor: pointer;
  }

  .my-account .warning {
    color: #333;
    font-size: 0.9em;
    padding: 5px;
    line-height: 11px;
    background: #FEDFA7;
  }
/*#endregion*/
/*#region Settings Common*/
#header-tip {
  display: none;
}

.settings-grid {
  min-width: 700px !important;
  min-height: 350px !important;
  font-size: 0.9em !important;
}

  .settings-grid .action {
    text-decoration: none;
    color: #0074CC;
  }

    .settings-grid .action:hover {
      text-decoration: underline;
    }

  .settings-grid .search-selector {
    display: inline;
    margin: 0;
    padding: 0;
    list-style: none;
  }

    .settings-grid .search-selector li {
      cursor: pointer;
      float: left;
      list-style: none;
      margin: 0;
      border: 1px solid #CCC;
      background: #CCC;
      color: #FFF;
      padding: 6px 10px;
    }

      .settings-grid .search-selector li.selected {
        border: 1px solid #666;
        background: #666;
        cursor: default;
      }

      .settings-grid .search-selector li:first-child {
        border-radius: 5px 0 0 5px;
      }

      .settings-grid .search-selector li:last-child {
        border-radius: 0 5px 5px 0;
      }
/*#endregion*/
/*#region Settings Menu*/
.settings-menu {
}

  .settings-menu.tabs {
    padding: 20px 0 0 0;
    border-bottom: 1px solid #CCC;
    font-size: 12px;
  }

    .settings-menu.tabs ul {
      list-style-type: none;
      list-style: none;
      padding: 0;
      margin: 0 0 0 20px;
    }

      .settings-menu.tabs ul li {
        display: inline-block;
        padding: 7px 15px;
        font-size: 1.1em;
      }

        .settings-menu.tabs ul li.selected {
          margin-bottom: -2px;
          display: inline-block;
          border-bottom: 1px solid #FFF;
          font-family: 'Montserrat';
          cursor: default;
          background: #FFF;
          border-left: 1px solid #CCC;
          border-top: 1px solid #CCC;
          border-right: 1px solid #CCC;
          border-radius: 5px 5px 0 0;
        }

          .settings-menu.tabs ul li.selected a {
            color: #000;
            cursor: default;
          }

            .settings-menu.tabs ul li.selected a:hover {
              text-decoration: none;
              color: #000;
            }

        .settings-menu.tabs ul li a {
          text-decoration: none;
          color: #666;
        }

          .settings-menu.tabs ul li a:hover {
            color: #333;
            text-decoration: underline;
          }
/*#endregion*/
/*#region Landmarks*/
.landmarks {
}

  .landmarks.container {
    background: #FFF;
    overflow-x: hidden;
    overflow-y: auto;
    position: fixed;
    top: 160px;
    bottom: 27px;
    width: 100%;
  }

  .landmarks form {
    margin: 20px;
  }

    .landmarks form .toolbar {
      margin: 5px 0;
    }

    .landmarks form .filter-container {
      background: #FFF;
      border: 1px solid #CCC;
      display: inline-block;
      margin-left: 5px;
    }

    .landmarks form .filter-input {
      padding: 5px;
      margin: 0 0 0 3px;
      width: 153px;
      border: 1px solid #FFF;
    }

    .landmarks form .filter-date-input {
      padding: 5px;
      margin: 0 0 0 1px;
      width: 69px;
      border: 1px solid #FFF;
      cursor: pointer;
      text-align: center;
      background: #e1e1e1;
      border-radius: 5px;
    }

    .landmarks form .assign-group {
      width: 100px;
      height: 30px;
      background: #CCC;
      display: inline-block;
    }

    .landmarks form .group {
      background: #e1e1e1;
      color: #333;
      border-radius: 10px;
      padding: 0 10px;
      display: inline-block;
      font-size: 0.9em;
    }

    .landmarks form .name {
      padding-left: 10px;
    }

  .landmarks .group-selector {
    padding: 0;
    background: #FFF;
    display: none;
    width: 260px;
    overflow: hidden;
    position: absolute;
    top: 45px;
    left: 4px;
    z-index: 500;
    border: 1px solid #CCC;
    border-radius: 3px;
  }

    .landmarks .group-selector ul {
      list-style: none;
      list-style-type: none;
      margin: 0;
      padding: 0;
      max-height: 220px;
      overflow-x: hidden;
      overflow-y: auto;
    }

      .landmarks .group-selector ul li {
        padding: 7px;
        cursor: pointer;
      }

        .landmarks .group-selector ul li:hover {
          background: #e1e1e1;
        }

        .landmarks .group-selector ul li a {
          float: right;
          margin-left: 5px;
        }

          .landmarks .group-selector ul li a.edit {
            background: url("https://images.geo-track.com/www/fleetco/layout.png?v=2.0.1.71") -293px -95px no-repeat;
            width: 16px;
            height: 16px;
            display: inline-block;
          }

            .landmarks .group-selector ul li a.edit:hover {
              opacity: 0.85;
            }

          .landmarks .group-selector ul li a.delete {
            background: url("https://images.geo-track.com/www/fleetco/layout.png?v=2.0.1.71") -312px -95px no-repeat;
            width: 16px;
            height: 16px;
            display: inline-block;
          }

            .landmarks .group-selector ul li a.delete:hover {
              opacity: 0.85;
            }

    .landmarks .group-selector .filter {
      width: 241px;
      margin: 5px;
      border: 1px solid #CCC;
      padding: 4px;
    }

    .landmarks .group-selector .new-group {
      background: #FFF;
      padding: 4px 10px;
      border-top: 1px solid #e1e1e1;
    }

      .landmarks .group-selector .new-group a {
        text-decoration: none;
        color: #0074CC;
      }

        .landmarks .group-selector .new-group a:hover {
          color: #666;
        }

    .landmarks .group-selector .remove-from-group {
      background: #FFF;
      padding: 4px 10px;
      border-bottom: 1px solid #e1e1e1;
    }

      .landmarks .group-selector .remove-from-group a {
        text-decoration: none;
        color: #333;
      }

        .landmarks .group-selector .remove-from-group a:hover {
          color: #666;
        }

    .landmarks .group-selector .cancel {
      background: #FFF;
      padding: 5px 10px;
    }

      .landmarks .group-selector .cancel a {
        text-decoration: none;
        color: #666;
      }

        .landmarks .group-selector .cancel a:hover {
          color: #333;
        }

.landmark.container {
  background: #FFF;
  overflow-x: hidden;
  overflow-y: auto;
  position: fixed;
  top: 158px;
  bottom: 27px;
  width: 470px;
  -webkit-box-shadow: 0 3px 5px rgba(0, 0, 0, 0.15);
  -o-box-shadow: 0 3px 5px rgba(0, 0, 0, 0.25);
  box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.25);
  z-index: 41;
}

.landmark.map {
  width: 800px;
  position: fixed;
  top: 158px;
  bottom: 27px;
  left: 470px;
  background: #FFF;
  z-index: 40;
}

.landmark form {
  margin: 10px;
}

  .landmark form a.cancel {
    color: #0074CC;
    text-decoration: none;
    margin-left: 10px;
    font-family: 'Montserrat';
    font-size: 1.1em;
  }

    .landmark form a.cancel:hover {
      text-decoration: underline;
      color: #333;
    }

  .landmark form .sub {
    font-family: 'Montserrat';
    font-size: 1.25em;
    border-bottom: 1px solid #e1e1e1;
    font-weight: bold;
    max-width: 800px;
    padding: 0 0 5px 5px;
    margin-top: 20px;
  }

.landmark ul.horizontal-list > li {
  display: inline;
}

.landmark .timer {
  border: none !important;
  cursor: pointer;
  color: #FFF;
  background: #0074CC;
  border-radius: 5px;
  text-align: center;
  padding: 2px 0;
  font-size: 0.9em;
}

.landmark ul.horizontal-list {
  font-size: 0.95em;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.landmark form .section {
  list-style: none;
  list-style-type: none;
  margin: 10px 0 0 10px;
  padding: 0;
}

  .landmark form .section li {
    margin: 0 0 5px 0;
  }

  .landmark form .section ul {
    margin: 0;
    padding: 0;
  }

    .landmark form .section ul li {
      margin: 0;
    }

      .landmark form .section ul li.label {
        color: #666;
        width: 80px;
        margin-right: 10px;
        text-align: right;
        line-height: 22px;
        display: inline-block;
        vertical-align: top;
        font-size: 0.92em;
      }

      .landmark form .section ul li.input-container {
        display: inline-block;
      }

      .landmark form .section ul li .input {
        border: 1px solid #CCC;
        height: 21px;
        max-width: 350px;
        padding: 0 2px;
      }

        .landmark form .section ul li .input.required {
          border: 2px solid #56BAEC;
        }

      .landmark form .section ul li.option {
        color: #666;
        width: 20px;
        margin-right: 10px;
        text-align: right;
        line-height: 22px;
        display: inline-block;
        vertical-align: top;
        font-size: 0.92em;
      }

      .landmark form .section ul li.hint {
        display: inline-block;
        font-size: 0.85em;
        width: 350px;
      }

.landmark form .draw-landmark {
  background: url("https://images.geo-track.com/www/common/map-tool-bar.png?v=2.0.1.71") -135px 0;
  width: 27px;
  height: 25px;
}

.landmark form .colors {
  list-style: none;
  list-style-type: none;
  padding: 0;
  margin: 0;
  overflow: auto;
}

  .landmark form .colors li {
    list-style: none;
    list-style-type: none;
    padding: 0;
    margin: 0;
    float: left;
  }

.landmark form .group {
  background: #e1e1e1;
  color: #333;
  border-radius: 10px;
  padding: 3px 10px;
  display: inline-block;
  font-size: 0.95em;
}

.landmark .warning {
  color: #333;
  font-size: 0.9em;
  padding: 5px;
  line-height: 11px;
  background: #FEDFA7;
}

.c-1 {
  background: url("https://images.geo-track.com/www/fleetco/layout.png?v=2.0.1.71") -290px -60px;
  width: 22px;
  height: 31px;
}

.c-2 {
  background: url("https://images.geo-track.com/www/fleetco/layout.png?v=2.0.1.71") -312px -60px;
  width: 22px;
  height: 31px;
}

.c-3 {
  background: url("https://images.geo-track.com/www/fleetco/layout.png?v=2.0.1.71") -334px -60px;
  width: 22px;
  height: 31px;
}

.c-4 {
  background: url("https://images.geo-track.com/www/fleetco/layout.png?v=2.0.1.71") -357px -60px;
  width: 22px;
  height: 31px;
}

.c-5 {
  background: url("https://images.geo-track.com/www/fleetco/layout.png?v=2.0.1.71") -379px -60px;
  width: 22px;
  height: 31px;
}

.c-6 {
  background: url("https://images.geo-track.com/www/fleetco/layout.png?v=2.0.1.71") -401px -60px;
  width: 22px;
  height: 31px;
}

.c-7 {
  background: url("https://images.geo-track.com/www/fleetco/layout.png?v=2.0.1.71") -423px -60px;
  width: 22px;
  height: 31px;
}

.c-8 {
  background: url("https://images.geo-track.com/www/fleetco/layout.png?v=2.0.1.71") -445px -60px;
  width: 22px;
  height: 31px;
}

.c-9 {
  background: url("https://images.geo-track.com/www/fleetco/layout.png?v=2.0.1.71") -467px -60px;
  width: 22px;
  height: 31px;
}

.c-10 {
  background: url("https://images.geo-track.com/www/fleetco/layout.png?v=2.0.1.71") -489px -60px;
  width: 22px;
  height: 31px;
}
/*#endregion*/
/*#region Zones*/
.polygon-vertex {
  width: 4px;
  height: 4px;
  border: 1px solid #CCC;
  background: #FFF;
  border-radius: 5px;
}

.zones {
}

  .zones.container {
    background: #FFF;
    overflow-x: hidden;
    overflow-y: auto;
    position: fixed;
    top: 160px;
    bottom: 27px;
    width: 100%;
  }

  .zones form {
    margin: 20px;
  }

    .zones form .toolbar {
      margin: 5px 0;
    }

    .zones form .filter-container {
      background: #FFF;
      border: 1px solid #CCC;
      display: inline-block;
      margin-left: 5px;
    }

    .zones form .filter-input {
      padding: 5px;
      margin: 0 0 0 3px;
      width: 153px;
      border: 1px solid #FFF;
    }

    .zones form .filter-date-input {
      padding: 5px;
      margin: 0 0 0 1px;
      width: 69px;
      border: 1px solid #FFF;
      cursor: pointer;
      text-align: center;
      background: #e1e1e1;
      border-radius: 5px;
    }

    .zones form .assign-group {
      width: 100px;
      height: 30px;
      background: #CCC;
      display: inline-block;
    }

    .zones form .group {
      background: #e1e1e1;
      color: #333;
      border-radius: 10px;
      padding: 0 10px;
      display: inline-block;
      font-size: 0.9em;
    }

  .zones .group-selector {
    padding: 0;
    background: #FFF;
    display: none;
    width: 260px;
    overflow: hidden;
    position: absolute;
    top: 45px;
    left: 4px;
    z-index: 500;
    border: 1px solid #CCC;
    border-radius: 3px;
  }

    .zones .group-selector ul {
      list-style: none;
      list-style-type: none;
      margin: 0;
      padding: 0;
      max-height: 220px;
      overflow-x: hidden;
      overflow-y: auto;
    }

      .zones .group-selector ul li {
        padding: 7px;
        cursor: pointer;
      }

        .zones .group-selector ul li:hover {
          background: #e1e1e1;
        }

        .zones .group-selector ul li a {
          float: right;
          margin-left: 5px;
        }

          .zones .group-selector ul li a.edit {
            background: url("https://images.geo-track.com/www/fleetco/layout.png?v=2.0.1.71") -293px -95px no-repeat;
            width: 16px;
            height: 16px;
            display: inline-block;
          }

            .zones .group-selector ul li a.edit:hover {
              opacity: 0.85;
            }

          .zones .group-selector ul li a.delete {
            background: url("https://images.geo-track.com/www/fleetco/layout.png?v=2.0.1.71") -312px -95px no-repeat;
            width: 16px;
            height: 16px;
            display: inline-block;
          }

            .zones .group-selector ul li a.delete:hover {
              opacity: 0.85;
            }

    .zones .group-selector .filter {
      width: 241px;
      margin: 5px;
      border: 1px solid #CCC;
      padding: 4px;
    }

    .zones .group-selector .new-group {
      background: #FFF;
      padding: 4px 10px;
      border-top: 1px solid #e1e1e1;
    }

      .zones .group-selector .new-group a {
        text-decoration: none;
        color: #0074CC;
      }

        .zones .group-selector .new-group a:hover {
          color: #666;
        }

    .zones .group-selector .remove-from-group {
      background: #FFF;
      padding: 4px 10px;
      border-bottom: 1px solid #e1e1e1;
    }

      .zones .group-selector .remove-from-group a {
        text-decoration: none;
        color: #333;
      }

        .zones .group-selector .remove-from-group a:hover {
          color: #666;
        }

    .zones .group-selector .cancel {
      background: #FFF;
      padding: 5px 10px;
    }

      .zones .group-selector .cancel a {
        text-decoration: none;
        color: #666;
      }

        .zones .group-selector .cancel a:hover {
          color: #333;
        }

.zone.container {
  background: #FFF;
  overflow-x: hidden;
  overflow-y: auto;
  position: fixed;
  top: 158px;
  bottom: 27px;
  width: 470px;
  -webkit-box-shadow: 0 3px 5px rgba(0, 0, 0, 0.15);
  -o-box-shadow: 0 3px 5px rgba(0, 0, 0, 0.25);
  box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.25);
  z-index: 41;
}

.zone.map {
  width: 800px;
  position: fixed;
  top: 158px;
  bottom: 27px;
  left: 470px;
  background: #FFF;
  z-index: 40;
}

.zone form {
  margin: 10px;
}

  .zone form a.cancel {
    color: #0074CC;
    text-decoration: none;
    margin-left: 10px;
    font-family: 'Montserrat';
    font-size: 1.1em;
  }

    .zone form a.cancel:hover {
      text-decoration: underline;
      color: #333;
    }

  .zone form .sub {
    font-family: 'Montserrat';
    font-size: 1.25em;
    border-bottom: 1px solid #e1e1e1;
    font-weight: bold;
    max-width: 800px;
    padding: 0 0 5px 5px;
    margin-top: 20px;
  }

  .zone form .section {
    list-style: none;
    list-style-type: none;
    margin: 10px 0 0 10px;
    padding: 0;
  }

    .zone form .section li {
      margin: 0 0 5px 0;
    }

    .zone form .section ul {
      margin: 0;
      padding: 0;
    }

      .zone form .section ul li {
        margin: 0;
      }

        .zone form .section ul li.label {
          color: #666;
          width: 80px;
          margin-right: 10px;
          text-align: right;
          line-height: 22px;
          display: inline-block;
          vertical-align: top;
          font-size: 0.92em;
        }

        .zone form .section ul li.input-container {
          display: inline-block;
        }

        .zone form .section ul li .input {
          border: 1px solid #CCC;
          height: 21px;
          max-width: 350px;
          padding: 0 2px;
        }

          .zone form .section ul li .input.required {
            border: 2px solid #56BAEC;
          }

        .zone form .section ul li.option {
          color: #666;
          width: 20px;
          margin-right: 10px;
          text-align: right;
          line-height: 22px;
          display: inline-block;
          vertical-align: top;
          font-size: 0.92em;
        }

        .zone form .section ul li.hint {
          display: inline-block;
          font-size: 0.85em;
          width: 350px;
        }

  .zone form .draw-zone-on-landmark {
    background: url("https://images.geo-track.com/www/common/map-tool-bar.png?v=2.0.1.71") -162px 0;
    width: 27px;
    height: 25px;
  }

  .zone form .draw-zone {
    background: url("https://images.geo-track.com/www/common/map-tool-bar.png?v=2.0.1.71") -216px 0;
    width: 27px;
    height: 25px;
  }

  .zone form .edit-zone {
    background: url("https://images.geo-track.com/www/common/map-tool-bar.png?v=2.0.1.71") -243px 0;
    width: 27px;
    height: 25px;
  }

  .zone form .move-zone {
    background: url("https://images.geo-track.com/www/common/map-tool-bar.png?v=2.0.1.71") -270px 0;
    width: 27px;
    height: 25px;
  }

  .zone form .route-again {
    background: url("https://images.geo-track.com/www/common/map-tool-bar.png?v=2.0.1.71") -405px 0;
    width: 27px;
    height: 25px;
  }

.zone .warning {
  color: #333;
  font-size: 0.9em;
  padding: 5px;
  line-height: 11px;
  background: #FEDFA7;
}

#zone-collision-tip {
  padding: 10px;
  font-size: 0.9em;
}
/*#endregion*/
/*#region Devices */
.devices {
}

  .devices.container {
    background: #FFF;
    overflow-x: hidden;
    overflow-y: auto;
    position: fixed;
    top: 160px;
    bottom: 27px;
    width: 100%;
    margin-top: 0.2em !important;
  }

  .devices form {
    margin: 20px;
  }

    .devices form .toolbar {
      margin: 5px 0;
    }

    .devices form .filter-container {
      background: #FFF;
      border: 1px solid #CCC;
      display: inline-block;
      margin-left: 5px;
    }

    .devices form .filter-input {
      padding: 5px;
      margin: 0 0 0 3px;
      width: 153px;
      border: 1px solid #FFF;
    }

    .devices form .alias {
      font-size: 1.2em;
      padding-left: 10px;
      margin-bottom: 5px;
    }

    .devices form .overview {
      line-height: 13px;
      padding: 0 10px 5px 10px;
    }

    .devices form .assigned-drivers .label {
      color: #0074CC;
    }

    .devices form .group {
      background: #e1e1e1;
      color: #333;
      border-radius: 10px;
      padding: 0 10px;
      display: inline-block;
      font-size: 0.9em;
      margin-bottom: 2px;
      float: right;
    }

  .devices .group-selector {
    padding: 0;
    background: #FFF;
    display: none;
    width: 260px;
    overflow: hidden;
    position: absolute;
    top: 45px;
    left: 4px;
    z-index: 500;
    border: 1px solid #CCC;
    border-radius: 3px;
  }

    .devices .group-selector ul {
      list-style: none;
      list-style-type: none;
      margin: 0;
      padding: 0;
      max-height: 220px;
      overflow-x: hidden;
      overflow-y: auto;
    }

      .devices .group-selector ul li {
        padding: 7px;
        cursor: pointer;
      }

        .devices .group-selector ul li:hover {
          background: #e1e1e1;
        }

        .devices .group-selector ul li a {
          float: right;
          margin-left: 5px;
        }

          .devices .group-selector ul li a.edit {
            background: url("https://images.geo-track.com/www/fleetco/layout.png?v=2.0.1.71") -293px -95px no-repeat;
            width: 16px;
            height: 16px;
            display: inline-block;
          }

            .devices .group-selector ul li a.edit:hover {
              opacity: 0.85;
            }

          .devices .group-selector ul li a.delete {
            background: url("https://images.geo-track.com/www/fleetco/layout.png?v=2.0.1.71") -312px -95px no-repeat;
            width: 16px;
            height: 16px;
            display: inline-block;
          }

            .devices .group-selector ul li a.delete:hover {
              opacity: 0.85;
            }

    .devices .group-selector .filter {
      width: 241px;
      margin: 5px;
      border: 1px solid #CCC;
      padding: 4px;
    }

    .devices .group-selector .new-group {
      background: #FFF;
      padding: 4px 10px;
      border-top: 1px solid #e1e1e1;
    }

      .devices .group-selector .new-group a {
        text-decoration: none;
        color: #0074CC;
      }

        .devices .group-selector .new-group a:hover {
          color: #666;
        }

    .devices .group-selector .remove-from-group {
      background: #FFF;
      padding: 4px 10px;
      border-bottom: 1px solid #e1e1e1;
    }

      .devices .group-selector .remove-from-group a {
        text-decoration: none;
        color: #333;
      }

        .devices .group-selector .remove-from-group a:hover {
          color: #666;
        }

    .devices .group-selector .cancel {
      background: #FFF;
      padding: 5px 10px;
    }

      .devices .group-selector .cancel a {
        text-decoration: none;
        color: #666;
      }

        .devices .group-selector .cancel a:hover {
          color: #333;
        }

.device.container {
  background: #FFF;
  overflow-x: hidden;
  overflow-y: auto;
  position: fixed;
  top: 160px;
  bottom: 27px;
  width: 100%;
}

.device form {
  margin: 20px 30px;
}

  .device form a.cancel {
    color: #0074CC;
    text-decoration: none;
    margin-left: 10px;
    font-family: 'Montserrat';
    font-size: 1.1em;
  }

    .device form a.cancel:hover {
      text-decoration: underline;
      color: #333;
    }

  .device form .sub {
    font-family: 'Montserrat';
    font-size: 1.25em;
    border-bottom: 1px solid #e1e1e1;
    font-weight: bold;
    max-width: 800px;
    padding: 0 0 5px 5px;
    margin-top: 20px;
  }

  .device form .section {
    list-style: none;
    list-style-type: none;
    margin: 10px 0;
    padding: 0;
  }

    .device form .section li {
      margin: 0 0 5px 0;
      background-image: none;
    }

    .device form .section ul li {
      margin: 0;
    }

      .device form .section ul li.label {
        color: #666;
        width: 250px;
        margin-right: 10px;
        text-align: right;
        line-height: 22px;
        display: inline-block;
        vertical-align: top;
        font-size: 0.92em;
      }

      .device form .section ul li.input-container {
        display: inline-block;
      }

      .device form .section ul li .input {
        border: 1px solid #CCC;
        height: 21px;
        max-width: 350px;
        padding: 0 2px;
        float: left;
      }

        .device form .section ul li .input.required {
          border: 2px solid #56BAEC;
        }

    .device form .section ul.security-section {
      padding-left: 300px;
    }

    .device form .section .new-odometer-save {
      display: inline-block;
      border-radius: 10px;
      cursor: pointer;
      width: 120px;
      height: 23px;
      line-height: 23px;
      text-align: center;
      background: #0074CC;
      color: #FFF;
      font-size: 0.9em;
    }

.device .device-types {
  list-style-type: none;
  list-style: none;
  margin: 20px 0 0 0;
  padding: 0;
  width: 500px;
  overflow: hidden;
}

  .device .device-types li {
    float: left;
    width: 125px;
    height: 80px;
    text-align: center;
    display: block;
    font-size: 0.9em;
  }

    .device .device-types li div {
      width: 37px;
      height: 33px;
      margin: 0 auto;
    }

.device .imei {
  font-size: 1.4em;
}

.device .group {
  font-size: 0.7em;
}

.device .model {
  color: #666;
  margin-bottom: 5px;
}

.device .date-picker {
  cursor: pointer;
  border: none;
  background: #CCC;
  border-radius: 5px;
  text-align: center;
  padding: 2px 0;
  font-size: 0.9em;
}

.device .command {
  color: #FFF;
  line-height: 22px;
  display: inline-block;
  vertical-align: top;
  font-size: 0.85em;
  text-decoration: none;
  background: #0074CC;
  padding: 0 10px;
  border-radius: 10px;
}

  .device .command:hover {
    background: #CCC;
    color: #333;
  }

.device .sending-command {
  color: #333;
  line-height: 22px;
  display: inline-block;
  vertical-align: top;
  font-size: 0.85em;
  text-decoration: none;
  background: #CCC;
  padding: 0 10px;
  border-radius: 10px;
}

.device .command-sent {
  color: #FFF;
  line-height: 22px;
  display: inline-block;
  vertical-align: top;
  font-size: 0.85em;
  text-decoration: none;
  background: #333;
  padding: 0 10px;
  border-radius: 10px;
}

.device .command-time-out {
  color: #FFF;
  line-height: 13px;
  display: inline-block;
  vertical-align: top;
  font-size: 0.85em;
  text-decoration: none;
  background: #FF4D4D;
  padding: 3px 10px;
  border-radius: 10px;
  width: 390px;
}

.device .warning {
  color: #333;
  font-size: 0.9em;
  padding: 5px;
  line-height: 11px;
  background: #FEDFA7;
}

.device .k-slider-horizontal {
  float: left;
  width: 350px;
  height: 26px;
  margin-right: 10px;
}

.device #cylinder_capacity_value_msg {
  float: left;
  font-size: 0.85em;
  color: #ED1C24;
  width: auto;
}

.device #fuel_average_consumption_value_msg {
  float: left;
  font-size: 0.85em;
  color: #ED1C24;
  width: auto;
}

.device .block-command {
  background-color: #1C9F22;
}
/*#endregion*/
/*#region Receiving Users*/
.receiving-users {
}

  .receiving-users.container {
    background: #FFF;
    overflow-x: hidden;
    overflow-y: auto;
    position: fixed;
    top: 160px;
    bottom: 27px;
    width: 100%;
  }

  .receiving-users form {
    margin: 20px;
  }

    .receiving-users form .toolbar {
      margin: 5px 0;
    }

    .receiving-users form .filter-container {
      background: #FFF;
      border: 1px solid #CCC;
      display: inline-block;
      margin-left: 5px;
    }

    .receiving-users form .filter-input {
      padding: 5px;
      margin: 0 0 0 3px;
      width: 153px;
      border: 1px solid #FFF;
    }

.receiving-user.container {
  background: #FFF;
  overflow-x: hidden;
  overflow-y: auto;
  position: fixed;
  top: 160px;
  bottom: 27px;
  width: 100%;
}

.receiving-user form {
  margin: 20px 30px;
}

  .receiving-user form .edit-my-account a {
    text-decoration: none;
    color: #333;
    font-size: 0.9em;
  }

    .receiving-user form .edit-my-account a:hover {
      color: #333;
      text-decoration: underline;
    }

  .receiving-user form .full-name {
    font-size: 1.2em;
    line-height: 17px;
  }

  .receiving-user form .email a {
    text-decoration: none;
    color: #0074CC;
    font-size: 0.9em;
  }

  .receiving-user form .mobile-number {
    color: #666;
    font-size: 0.9em;
  }

  .receiving-user form a.cancel {
    color: #0074CC;
    text-decoration: none;
    margin-left: 10px;
    font-family: 'Montserrat';
    font-size: 1.1em;
  }

    .receiving-user form a.cancel:hover {
      text-decoration: underline;
      color: #333;
    }

  .receiving-user form .sub {
    font-family: 'Montserrat';
    font-size: 1.25em;
    border-bottom: 1px solid #e1e1e1;
    font-weight: bold;
    max-width: 800px;
    padding: 0 0 5px 5px;
    margin-top: 20px;
  }

  .receiving-user form .devices {
    margin: 15px 15px;
    border: 1px solid #CCC;
    width: 590px;
    padding: 5px;
  }

    .receiving-user form .devices ul {
      list-style: none;
      list-style-type: none;
      margin: 0;
      padding: 0;
      overflow: auto;
      width: 580px;
    }

    .receiving-user form .devices .h {
      background: #333;
      padding: 5px;
    }

      .receiving-user form .devices .h li {
        float: left;
        width: 100px;
        text-align: center;
        color: #FFF;
      }

        .receiving-user form .devices .h li:first-child {
          width: 20px;
        }

          .receiving-user form .devices .h li:first-child input[type='checkbox'] {
            margin: 0;
          }

        .receiving-user form .devices .h li.a {
          text-align: left;
          width: 250px;
          line-height: 17px;
        }

    .receiving-user form .devices .g {
      background: #CCC;
      padding: 5px;
    }

      .receiving-user form .devices .g li {
        float: left;
        width: 100px;
        text-align: center;
        color: #FFF;
      }

        .receiving-user form .devices .g li:first-child {
          width: 20px;
        }

          .receiving-user form .devices .g li:first-child input[type='checkbox'] {
            margin: 0;
          }

      .receiving-user form .devices .g input[type='checkbox'] {
        margin: 0;
      }

      .receiving-user form .devices .g li.a {
        text-align: left;
        width: 250px;
        line-height: 17px;
      }

    .receiving-user form .devices .i {
      background: #FFF;
      padding: 2px 5px;
      border-bottom: 1px solid #FFF;
    }

      .receiving-user form .devices .i li {
        float: left;
        width: 100px;
        text-align: center;
      }

        .receiving-user form .devices .i li:first-child {
          width: 20px;
          height: 1px;
        }

        .receiving-user form .devices .i li.a {
          text-align: left;
          width: 250px;
        }

  .receiving-user form .section {
    list-style: none;
    list-style-type: none;
    margin: 10px 0;
    padding: 0;
  }

    .receiving-user form .section li {
      margin: 0 0 5px 0;
    }

    .receiving-user form .section ul li {
      margin: 0;
    }

      .receiving-user form .section ul li.label {
        color: #666;
        width: 250px;
        margin-right: 10px;
        text-align: right;
        line-height: 22px;
        display: inline-block;
        vertical-align: top;
        font-size: 0.92em;
      }

      .receiving-user form .section ul li.input-container {
        display: inline-block;
      }

      .receiving-user form .section ul li .input {
        border: 1px solid #CCC;
        height: 21px;
        max-width: 350px;
        padding: 0 2px;
      }

        .receiving-user form .section ul li .input.required {
          border: 2px solid #56BAEC;
        }

.receiving-user .phone-input .model-property-name {
  display: none;
}

.receiving-user .phone-input .codes {
}

.receiving-user .phone-input .phone {
}

.receiving-user .warning {
  color: #333;
  font-size: 0.9em;
  padding: 5px;
  line-height: 11px;
  background: #FEDFA7;
}

.receiving-user .features {
  margin: 10px 20px 20px 20px;
  font-size: 0.9em;
}

  .receiving-user .features ul.h {
    display: block;
    overflow: auto;
    font-weight: bold;
    margin-bottom: 5px;
  }

    .receiving-user .features ul.h li {
      float: left;
    }

      .receiving-user .features ul.h li:first-child {
        width: 250px;
      }

      .receiving-user .features ul.h li.r {
        float: left;
        width: 60px;
        display: inline-block;
      }

      .receiving-user .features ul.h li.w {
        float: left;
        width: 60px;
        display: inline-block;
      }

  .receiving-user .features ul {
    list-style: none;
    list-style-type: none;
    margin: 0;
    padding: 0;
  }

    .receiving-user .features ul li span {
      width: 250px;
      display: inline-block;
    }

    .receiving-user .features ul.i .r {
      width: 60px;
      display: inline-block;
    }

    .receiving-user .features ul.i .w {
      width: 60px;
      display: inline-block;
    }

.receiving-user .security {
  margin-right: 10px;
  font-size: 0.92em;
  color: #666;
}

  .receiving-user .security .security-option {
    padding-left: 0;
    display: inline-block;
  }

  .receiving-user .security ul {
    list-style: none;
  }

  .receiving-user .security .section li .label {
    display: inline-block;
    margin: 3px 3px 3px 4px;
    font-size: 1em;
  }

  .receiving-user .security ul .label {
    display: inline-block;
    margin: 3px 3px 3px 4px;
  }

  .receiving-user .security ul .container {
    display: inline-block;
  }

.input-disabled {
  border: 1px solid #CCC;
  background-color: #e1e1e1;
}

.receiving-user .gates {
  margin: 10px 20px 20px 20px;
  font-size: 0.9em;
}

  .receiving-user .gates ul.h {
    display: block;
    overflow: auto;
    font-weight: bold;
    margin-bottom: 5px;
  }

    .receiving-user .gates ul.h li {
      float: left;
    }

      .receiving-user .gates ul.h li:first-child {
        width: 250px;
      }

      .receiving-user .gates ul.h li.r {
        float: left;
        width: 60px;
        display: inline-block;
      }

      .receiving-user .gates ul.h li.w {
        float: left;
        width: 60px;
        display: inline-block;
      }

      .receiving-user .gates ul.h li.layout {
        float: left;
        width: 60px;
        display: inline-block;
        text-align: right;
      }

  .receiving-user .gates ul {
    list-style: none;
    list-style-type: none;
    margin: 0;
    padding: 0;
  }

    .receiving-user .gates ul li span {
      width: 250px;
      display: inline-block;
    }

    .receiving-user .gates ul.i .r {
      width: 60px;
      display: inline-block;
    }

    .receiving-user .gates ul.i .w {
      width: 60px;
      display: inline-block;
    }

    .receiving-user .gates ul.i .layout {
      width: 60px;
      display: inline-block;
      text-align: right;
    }

.user-devices-container {
  padding: 5px;
  height: 400px;
  min-height: 220px;
  display: block;
}

#device-list-container {
  padding: 5px;
  height: 190px;
  width: 100%;
}

#device-list {
  padding: 5px;
  height: 190px;
  width: 580px;
  float: left;
}

.receiving-user form .active-devices {
  margin: 5px 15px 5px 10px;
  border: 1px solid #CCC;
  width: 550px;
  height: 150px;
  overflow: auto;
  padding: 5px;
}

.receiving-user form .user-devices-container.devices {
  margin: 15px 15px;
  border: 1px solid #CCC;
  width: 590px;
  height: 150px;
  padding: 5px;
  overflow: auto;
}

.receiving-user form .input-list-container {
  margin: 10px 15px;
  border: 1px solid #CCC;
  width: 430px;
  height: 150px;
  padding: 5px;
  float: left;
}

.receiving-user .input-list {
  border: 2px solid #56BAEC;
  border-radius: 0;
  margin: 5px;
}

.receiving-user .user-devices-container .head {
  background-color: #333;
  padding: 5px;
  color: #FFF;
  margin: 0 0 2px 0;
  text-align: center;
}

.selected-devices-container {
  height: 150px;
  width: 280px;
  float: left;
  padding: 5px;
  margin: 10px 15px;
  border: 1px solid #CCC;
}

.user-devices-container .configuration {
  display: none;
  width: 100%;
}

.unit-alert-configuration {
  height: 150px;
  width: 550px;
  padding: 5px;
  margin: 30px 20px;
  overflow: auto;
  font-size: 0.85em;
  border: 1px solid #CCC;
}

  .unit-alert-configuration table {
    width: 100%;
  }

    .unit-alert-configuration table thead {
      background-color: #CCC;
      color: #FFF;
    }

      .unit-alert-configuration table thead tr th:first-child {
        width: 70%;
      }

    .unit-alert-configuration table tbody tr {
      background-color: #e1e1e1;
      color: #333;
      padding-left: 5px;
    }

      .unit-alert-configuration table tbody tr td {
        padding-left: 5px;
        border-radius: 3px;
      }

        .unit-alert-configuration table tbody tr td.send-mail {
          text-align: center;
        }

.user-devices-container .token-input-list {
  border: 2px solid #e1e1e1;
  border-radius: 5px;
  padding: 0;
  margin: 5px 2px;
  width: 425px;
  overflow-y: auto;
  max-height: 70px;
}

.user-devices-container li.token-input-token {
  font-size: 0.9em;
}

.user-devices-container .token-input-dropdown {
  width: 420px;
}

.active-devices ul {
  list-style: none;
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: auto;
}

  .active-devices ul li {
    display: block;
    float: left;
    margin-right: 5px;
    margin-bottom: 3px;
    padding-left: 5px;
    background: #e1e1e1;
    color: #333;
    width: 98%;
    min-width: 350px;
    border-radius: 3px;
    font-size: 0.85em;
    text-align: left;
  }

    .active-devices ul li:hover {
      cursor: pointer;
      background: #CCC;
      color: #FFF;
    }

.user-devices-container .active-devices .selected {
  background: #333;
  color: #FFF;
}

.active-devices .active-device {
  background: #CCC;
  color: #FFF;
}

.active-devices .active-group {
  background: #e1e1e1;
  color: #333;
}

.active-devices .inactivate-button {
  cursor: pointer;
  padding: 0 4px 1px 4px;
  background: #666;
  color: #FFF;
  display: inline-block;
  font-size: 0.8em;
  border-radius: 4px;
  font-weight: bold;
  float: right;
  height: 13px;
  margin: 1px 1px 1px 0;
  border: 1px solid #666;
  line-height: 13px;
}

  .active-devices .inactivate-button:hover {
    background: #e1e1e1;
    color: #333;
  }

.unit-alert-configuration .all-alerts-settings {
  margin-left: 5px;
  vertical-align: middle;
}

#add-devices {
  float: right;
  margin: 0 8px;
}
/*#endregion*/
/*#region Drivers*/
.drivers {
}

  .drivers.container {
    background: #FFF;
    overflow-x: hidden;
    overflow-y: auto;
    position: fixed;
    top: 160px;
    bottom: 27px;
    width: 100%;
  }

  .drivers form {
    margin: 20px;
  }

    .drivers form .toolbar {
      margin: 5px 0;
    }

    .drivers form .filter-container {
      background: #FFF;
      border: 1px solid #CCC;
      display: inline-block;
      margin-left: 5px;
    }

    .drivers form .filter-input {
      padding: 5px;
      margin: 0 0 0 3px;
      width: 153px;
      border: 1px solid #FFF;
    }

    .drivers form .filter-date-input {
      padding: 5px;
      margin: 0 0 0 1px;
      width: 69px;
      border: 1px solid #FFF;
      cursor: pointer;
      text-align: center;
      background: #e1e1e1;
      border-radius: 5px;
    }

    .drivers form .assign-group {
      width: 100px;
      height: 30px;
      background: #CCC;
      display: inline-block;
    }

    .drivers form .group {
      background: #e1e1e1;
      color: #333;
      border-radius: 10px;
      padding: 0 10px;
      display: inline-block;
      font-size: 0.9em;
    }

  .drivers .group-selector {
    padding: 0;
    background: #FFF;
    display: none;
    width: 260px;
    overflow: hidden;
    position: absolute;
    top: 45px;
    left: 4px;
    z-index: 500;
    border: 1px solid #CCC;
    border-radius: 3px;
  }

    .drivers .group-selector ul {
      list-style: none;
      list-style-type: none;
      margin: 0;
      padding: 0;
      max-height: 220px;
      overflow-x: hidden;
      overflow-y: auto;
    }

      .drivers .group-selector ul li {
        padding: 7px;
        cursor: pointer;
      }

        .drivers .group-selector ul li:hover {
          background: #e1e1e1;
        }

        .drivers .group-selector ul li a {
          float: right;
          margin-left: 5px;
        }

          .drivers .group-selector ul li a.edit {
            background: url("https://images.geo-track.com/www/fleetco/layout.png?v=2.0.1.71") -293px -95px no-repeat;
            width: 16px;
            height: 16px;
            display: inline-block;
          }

            .drivers .group-selector ul li a.edit:hover {
              opacity: 0.85;
            }

          .drivers .group-selector ul li a.delete {
            background: url("https://images.geo-track.com/www/fleetco/layout.png?v=2.0.1.71") -312px -95px no-repeat;
            width: 16px;
            height: 16px;
            display: inline-block;
          }

            .drivers .group-selector ul li a.delete:hover {
              opacity: 0.85;
            }

    .drivers .group-selector .filter {
      width: 241px;
      margin: 5px;
      border: 1px solid #CCC;
      padding: 4px;
    }

    .drivers .group-selector .new-group {
      background: #FFF;
      padding: 4px 10px;
      border-top: 1px solid #e1e1e1;
    }

      .drivers .group-selector .new-group a {
        text-decoration: none;
        color: #0074CC;
      }

        .drivers .group-selector .new-group a:hover {
          color: #666;
        }

    .drivers .group-selector .remove-from-group {
      background: #FFF;
      padding: 4px 10px;
      border-bottom: 1px solid #e1e1e1;
    }

      .drivers .group-selector .remove-from-group a {
        text-decoration: none;
        color: #333;
      }

        .drivers .group-selector .remove-from-group a:hover {
          color: #666;
        }

    .drivers .group-selector .cancel {
      background: #FFF;
      padding: 5px 10px;
    }

      .drivers .group-selector .cancel a {
        text-decoration: none;
        color: #666;
      }

        .drivers .group-selector .cancel a:hover {
          color: #333;
        }

.driver.container {
  background: #FFF;
  overflow-x: hidden;
  overflow-y: auto;
  position: fixed;
  top: 160px;
  bottom: 27px;
  width: 100%;
}

.driver form {
  margin: 20px 30px;
}

  .driver form a.cancel {
    color: #0074CC;
    text-decoration: none;
    margin-left: 10px;
    font-family: 'Montserrat';
    font-size: 1.1em;
  }

    .driver form a.cancel:hover {
      text-decoration: underline;
      color: #333;
    }

  .driver form .group {
    background: #e1e1e1;
    color: #333;
    border-radius: 10px;
    padding: 3px 10px;
    display: inline-block;
    font-size: 0.95em;
  }

  .driver form .sub {
    font-family: 'Montserrat';
    font-size: 1.25em;
    border-bottom: 1px solid #e1e1e1;
    font-weight: bold;
    max-width: 800px;
    padding: 0 0 5px 5px;
    margin-top: 20px;
  }

  .driver form .section {
    list-style: none;
    list-style-type: none;
    margin: 10px 0;
    padding: 0;
  }

    .driver form .section li {
      margin: 0 0 5px 0;
    }

    .driver form .section ul li {
      margin: 0;
    }

      .driver form .section ul li.label {
        color: #666;
        width: 250px;
        margin-right: 10px;
        text-align: right;
        line-height: 22px;
        display: inline-block;
        vertical-align: top;
        font-size: 0.92em;
      }

      .driver form .section ul li.input-container {
        display: inline-block;
      }

      .driver form .section ul li .input {
        border: 1px solid #CCC;
        height: 21px;
        max-width: 350px;
        padding: 0 2px;
      }

        .driver form .section ul li .input.required {
          border: 2px solid #56BAEC;
        }

  .driver form .mobile-number {
    color: #666;
    font-size: 0.9em;
  }

  .driver form .phone-input .model-property-name {
    display: none;
  }

  .driver form .date-picker {
    cursor: pointer;
    border: none;
    background: #CCC;
    border-radius: 5px;
    text-align: center;
    padding: 2px 0;
    font-size: 0.9em;
  }

  .driver form .timer {
    border: none !important;
    cursor: pointer;
    color: #FFF;
    background: #0074CC;
    border-radius: 5px;
    text-align: center;
    padding: 2px 0;
    font-size: 0.9em;
  }

#assign-key-window .key-container .title {
  font-size: 1.1em;
  color: #0074CC;
  line-height: 23px;
  border-bottom: 1px solid #e1e1e1;
}

#assign-key-window .id-bluetooth-container .title {
  font-size: 1.1em;
  color: #0074CC;
  line-height: 23px;
  border-bottom: 1px solid #F2F2F2;
}

#assign-key-window .keypad-container .title {
  font-size: 1.1em;
  color: #0074CC;
  line-height: 23px;
  border-bottom: 1px solid #F2F2F2;
}

#assign-key-window .btcoin-container .title {
  font-size: 1.1em;
  color: #0074CC;
  line-height: 23px;
  border-bottom: 1px solid #F2F2F2;
}

#assign-key-window .id-external-container .title {
  font-size: 1.1em;
  color: #0074CC;
  line-height: 23px;
  border-bottom: 1px solid #F2F2F2;
}

#assign-key-window .token-input-list {
  border: 2px solid #e1e1e1;
  padding: 0;
  margin: 5px 2px;
  width: 420px;
  border-radius: 5px;
}

#upload-rule-window .upload-container .title {
  font-size: 1.1em;
  color: #0074CC;
  line-height: 23px;
  border-bottom: 1px solid #e1e1e1;
}

#upload-rule-window .token-input-list {
  border: 2px solid #56BAEC;
  padding: 0;
  margin: 5px 2px;
  width: 420px;
}
/*#endregion*/
/*#region Share Device*/
#share-device-window .share-device-container .title {
  font-size: 1.1em;
  color: #0074CC;
  line-height: 23px;
  border-bottom: 1px solid #e1e1e1;
}

#share-device-window .token-input-list {
  border: 2px solid #56BAEC;
  padding: 0;
  margin: 5px 2px;
  width: 420px;
}
/*#endregion*/
/*#region Sequence*/
#view-sequence-window .view-sequence-container .title {
  font-size: 1.1em;
  color: #0074CC;
  line-height: 23px;
  border-bottom: 1px solid #e1e1e1;
}
/*#endregion*/
/*#region Rules*/
.rules {
}

  .rules.container {
    background: #FFF;
    overflow-x: hidden;
    overflow-y: auto;
    position: fixed;
    top: 160px;
    bottom: 27px;
    width: 100%;
  }

  .rules form {
    margin: 20px;
  }

    .rules form .toolbar {
      margin: 5px 0;
    }

    .rules form .filter-container {
      background: #FFF;
      border: 1px solid #CCC;
      display: inline-block;
      margin-left: 5px;
    }

    .rules form .filter-input {
      padding: 5px;
      margin: 0 0 0 3px;
      width: 153px;
      border: 1px solid #FFF;
    }

    .rules form .filter-date-input {
      padding: 5px;
      margin: 0 0 0 1px;
      width: 69px;
      border: 1px solid #FFF;
      cursor: pointer;
      text-align: center;
      background: #e1e1e1;
      border-radius: 5px;
    }

    .rules form .action.not-editable {
      cursor: default;
      text-decoration: none;
    }

.rule.container {
  background: #FFF;
  overflow-x: hidden;
  overflow-y: auto;
  position: fixed;
  top: 160px;
  bottom: 27px;
  width: 100%;
}

.rule form {
  margin: 20px 30px;
}

  .rule form .full-name {
    font-size: 1.2em;
    line-height: 17px;
  }

  .rule form .email a {
    text-decoration: none;
    color: #0074CC;
    font-size: 0.9em;
  }

  .rule form .mobile-number {
    color: #666;
    font-size: 0.9em;
  }

  .rule form .token-input-list {
    border: 2px solid #e1e1e1;
    padding: 0;
    margin: 5px 2px;
    border-radius: 5px;
  }

    .rule form .token-input-list .activity-zone {
      margin: 2px !important;
      cursor: pointer !important;
      background: #CCC;
      color: #FFF;
      border: 1px solid #CCC;
    }

      .rule form .token-input-list .activity-zone:hover {
        opacity: 0.8;
        color: #000 !important;
      }

      .rule form .token-input-list .activity-zone.selected {
        border: 1px solid #000 !important;
        color: #000;
      }

        .rule form .token-input-list .activity-zone.selected:hover {
          opacity: 1;
          cursor: default !important;
        }

  .rule form a.cancel {
    color: #0074CC;
    text-decoration: none;
    margin-left: 10px;
    font-family: 'Montserrat';
    font-size: 1.1em;
  }

    .rule form a.cancel:hover {
      text-decoration: underline;
      color: #333;
    }

  .rule form #zone-settings {
    min-width: 800px;
    width: 800px;
    display: none;
  }

  .rule form #zone-settings-viewer {
    list-style: none;
    list-style-type: none;
    padding: 0;
    margin: 0;
  }

  .rule form #event-trigger-container {
    display: none;
    width: 800px;
    padding: 7px 0;
  }

  .rule form .token-input-list .activity-zone.is-start-event-trigger {
    background: #1C9F22;
    color: #FFF;
    border: 1px solid #1C9F22;
  }

  .rule form .token-input-list .activity-zone.is-end-event-trigger {
    background: #ED1C24;
    color: #FFF;
    border: 1px solid #ED1C24;
  }

  .rule form .token-input-list .activity-zone.is-unauthorized-point {
    background: #FEDFA7;
    color: #FFF;
    border: 1px solid #FEDFA7;
  }

  .rule form .sub {
    font-family: 'Montserrat';
    font-size: 1.25em;
    border-bottom: 1px solid #e1e1e1;
    font-weight: bold;
    max-width: 800px;
    padding: 0 0 5px 5px;
    margin-top: 20px;
  }

  .rule form .dates {
    font-size: 0.9em;
  }

    .rule form .dates > div {
      display: inline-block;
    }

  .rule form .devices {
    margin: 20px 20px;
    border: 1px solid #CCC;
    width: 590px;
    padding: 5px;
  }

    .rule form .devices ul {
      list-style: none;
      list-style-type: none;
      margin: 0;
      padding: 0;
      overflow: auto;
      width: 580px;
    }

    .rule form .devices .h {
      background: #333;
      padding: 5px;
    }

      .rule form .devices .h li {
        float: left;
        width: 30px;
        text-align: center;
        color: #FFF;
      }

        .rule form .devices .h li:first-child {
          width: 20px;
        }

          .rule form .devices .h li:first-child input[type='checkbox'] {
            margin: 0;
          }

        .rule form .devices .h li.a {
          text-align: left;
          width: 550px;
          line-height: 17px;
        }

    .rule form .devices .g {
      background: #CCC;
      padding: 5px;
    }

      .rule form .devices .g li {
        float: left;
        width: 30px;
        text-align: center;
        color: #FFF;
      }

        .rule form .devices .g li:first-child {
          width: 20px;
        }

          .rule form .devices .g li:first-child input[type='checkbox'] {
            margin: 0;
          }

      .rule form .devices .g input[type='checkbox'] {
        margin: 0;
      }

      .rule form .devices .g li.a {
        text-align: left;
        width: 550px;
        line-height: 17px;
      }

    .rule form .devices .i {
      background: #FFF;
      border-bottom: 1px solid #FFF;
    }

    .rule form .devices .i li {
      float: right;
      width: 40px;
      text-align: right;
      margin: 0 1px 0 0;
    }

        .rule form .devices .i li:first-child {
          width: 20px;
          height: 1px;
        }

        .rule form .devices .i li.a {
          text-align: left;
          width: 550px;
        }

  .rule form .section {
    list-style: none;
    list-style-type: none;
    margin: 10px 0;
    padding: 0;
  }

    .rule form .section li {
      margin: 0 0 5px 0;
    }

    .rule form .section ul li {
      margin: 0;
    }

      .rule form .section ul li.label {
        color: #666;
        width: 190px;
        margin-right: 10px;
        text-align: right;
        line-height: 22px;
        display: inline-block;
        vertical-align: top;
        font-size: 0.92em;
      }

      .rule form .section ul li.input-container {
        display: inline-block;
      }

      .rule form .section ul li .input {
        border: 1px solid #CCC;
        height: 21px;
        max-width: 350px;
        padding: 0 2px;
      }

        .rule form .section ul li .input.required {
          border: 2px solid #56BAEC;
        }

.rule .phone-input .model-property-name {
  display: none;
}

.rule .phone-input .codes {
}

.rule .phone-input .phone {
}

.rule .warning {
  color: #333;
  font-size: 0.9em;
  padding: 5px;
  line-height: 11px;
  background: #FEDFA7;
}

.rule .date-picker {
  cursor: pointer;
  border: none;
  background: #CCC;
  border-radius: 5px;
  text-align: center;
  padding: 2px 0;
  font-size: 0.9em;
}

.rule .timer {
  border: none !important;
  cursor: pointer;
  color: #FFF;
  background: #0074CC;
  border-radius: 5px;
  text-align: center;
  padding: 2px 0;
  font-size: 0.9em;
}

.rule .field-validation-error {
  display: none;
}

.rule ul.horizontal-list {
  list-style-type: none;
  padding: 0;
  margin: 0;
  font-size: 0.95em;
}

  .rule ul.horizontal-list > li {
    display: inline;
  }

  .rule ul.horizontal-list > label {
    margin-left: 0.5em;
  }

.rule form #settings {
  display: block;
  margin-bottom: 10px;
  max-width: 800px;
  height: auto;
}

  .rule form #settings .sub-block {
    font-size: 0.95em;
    color: #CCC;
    border-bottom: 1px solid #e1e1e1;
    font-weight: bold;
    max-width: 800px;
    padding: 0 0 5px 5px;
  }

  .rule form #settings .sub-settings {
    font-size: 0.95em;
    color: #0074CC;
    width: 670px;
    max-width: 670px;
    border-bottom: 1px solid #e1e1e1;
    font-weight: bold;
    padding: 0 0 5px 5px;
    margin: 10px 0 10px 30px;
  }

  .rule form #settings .input-label {
    float: left;
    width: 190px;
    margin-right: 10px;
    text-align: right;
  }

  .rule form #settings .input-content {
    float: left;
  }

  .rule form #settings .content-section {
    width: 92%;
    margin-left: 5%;
    display: inline-block;
  }

.rule form .activity-list {
  border: 2px solid #e1e1e1;
  border-radius: 0;
  padding: 0;
  margin: 5px 2px;
  width: 435px;
  font-size: 0.9em;
  /*font-family: Verdana;*/
  height: auto !important;
  list-style-type: none;
}

.rule form .input-container .not-editable-rule-name {
  background-color: #FFF;
  border: 2px solid #e1e1e1 !important;
}

.rule form .activity-list .activity-zone {
  font-weight: bold;
  display: inline-block;
  overflow: hidden;
  height: auto !important;
  padding: 3px 5px;
  border-radius: 3px;
  margin: 2px !important;
  background: #CCC;
  color: #FFF;
  border: 1px solid #CCC;
}

  .rule form .activity-list .activity-zone.is-start-event-trigger {
    background: #1C9F22;
    color: #FFF;
    border: 1px solid #1C9F22;
  }

  .rule form .activity-list .activity-zone.is-end-event-trigger {
    background: #ED1C24;
    color: #FFF;
    border: 1px solid #ED1C24;
  }

  .rule form .activity-list .activity-zone.is-unauthorized-point {
    background: #FEDFA7;
    color: #FFF;
    border: 1px solid #FEDFA7;
  }

.rules form .settings-grid .copy-rule-configuration {
  text-decoration: none;
  color: #0074CC;
}

  .rules form .settings-grid .copy-rule-configuration:hover {
    text-decoration: underline;
    color: #666;
  }
/*#endregion*/
/*#region Client Alerts Custom Settings*/
.client-alert-custom-settings {
}

  .client-alert-custom-settings.container {
    background: #FFF;
    overflow-x: hidden;
    overflow-y: auto;
    position: fixed;
    top: 160px;
    bottom: 27px;
    width: 100%;
  }

  .client-alert-custom-settings form {
    margin: 20px;
  }

    .client-alert-custom-settings form .toolbar {
      margin: 5px 0;
    }

    .client-alert-custom-settings form .filter-container {
      background: #FFF;
      border: 1px solid #CCC;
      display: inline-block;
      margin-left: 5px;
    }

    .client-alert-custom-settings form .filter-input {
      padding: 5px;
      margin: 0 0 0 3px;
      width: 153px;
      border: 1px solid #FFF;
    }

    .client-alert-custom-settings form .assign-group {
      width: 100px;
      height: 30px;
      background: #CCC;
      display: inline-block;
    }

    .client-alert-custom-settings form .group {
      background: #e1e1e1;
      color: #333;
      border-radius: 10px;
      padding: 0 10px;
      display: inline-block;
      font-size: 0.9em;
    }

    .client-alert-custom-settings form .name {
      padding-left: 10px;
    }

  .client-alert-custom-settings .group-selector {
    padding: 0;
    background: #FFF;
    display: none;
    width: 260px;
    overflow: hidden;
    position: absolute;
    top: 45px;
    left: 4px;
    z-index: 500;
    border: 1px solid #CCC;
    border-radius: 3px;
  }

    .client-alert-custom-settings .group-selector ul {
      list-style: none;
      list-style-type: none;
      margin: 0;
      padding: 0;
      max-height: 220px;
      overflow-x: hidden;
      overflow-y: auto;
    }

      .client-alert-custom-settings .group-selector ul li {
        padding: 7px;
        cursor: pointer;
      }

        .client-alert-custom-settings .group-selector ul li:hover {
          background: #e1e1e1;
        }

        .client-alert-custom-settings .group-selector ul li a {
          float: right;
          margin-left: 5px;
        }

          .client-alert-custom-settings .group-selector ul li a.edit {
            background: url("https://images.geo-track.com/www/fleetco/layout.png?v=2.0.1.71") -293px -95px no-repeat;
            width: 16px;
            height: 16px;
            display: inline-block;
          }

            .client-alert-custom-settings .group-selector ul li a.edit:hover {
              opacity: 0.85;
            }

          .client-alert-custom-settings .group-selector ul li a.delete {
            background: url("https://images.geo-track.com/www/fleetco/layout.png?v=2.0.1.71") -312px -95px no-repeat;
            width: 16px;
            height: 16px;
            display: inline-block;
          }

            .client-alert-custom-settings .group-selector ul li a.delete:hover {
              opacity: 0.85;
            }

    .client-alert-custom-settings .group-selector .filter {
      width: 241px;
      margin: 5px;
      border: 1px solid #CCC;
      padding: 4px;
    }

    .client-alert-custom-settings .group-selector .new-group {
      background: #FFF;
      padding: 4px 10px;
      border-top: 1px solid #e1e1e1;
    }

      .client-alert-custom-settings .group-selector .new-group a {
        text-decoration: none;
        color: #0074CC;
      }

        .client-alert-custom-settings .group-selector .new-group a:hover {
          color: #666;
        }

    .client-alert-custom-settings .group-selector .remove-from-group {
      background: #FFF;
      padding: 4px 10px;
      border-bottom: 1px solid #e1e1e1;
    }

      .client-alert-custom-settings .group-selector .remove-from-group a {
        text-decoration: none;
        color: #333;
      }

        .client-alert-custom-settings .group-selector .remove-from-group a:hover {
          color: #666;
        }

    .client-alert-custom-settings .group-selector .cancel {
      background: #FFF;
      padding: 5px 10px;
    }

      .client-alert-custom-settings .group-selector .cancel a {
        text-decoration: none;
        color: #666;
      }

        .client-alert-custom-settings .group-selector .cancel a:hover {
          color: #333;
        }

.client-alert-custom-setting.container {
  background: #FFF;
  overflow-x: hidden;
  overflow-y: auto;
  position: fixed;
  top: 160px;
  bottom: 27px;
  width: 100%;
}

.client-alert-custom-setting form {
  margin: 20px 30px;
}

  .client-alert-custom-setting form .edit-my-account a {
    text-decoration: none;
    color: #333;
    font-size: 0.9em;
  }

    .client-alert-custom-setting form .edit-my-account a:hover {
      color: #333;
      text-decoration: underline;
    }

  .client-alert-custom-setting form .full-name {
    font-size: 1.2em;
    line-height: 17px;
  }

  .client-alert-custom-setting form .email a {
    text-decoration: none;
    color: #0074CC;
    font-size: 0.9em;
  }

  .client-alert-custom-setting form .mobile-number {
    color: #666;
    font-size: 0.9em;
  }

  .client-alert-custom-setting form a.cancel {
    color: #0074CC;
    text-decoration: none;
    margin-left: 10px;
    font-family: 'Montserrat';
    font-size: 1.1em;
  }

    .client-alert-custom-setting form a.cancel:hover {
      text-decoration: underline;
      color: #333;
    }

  .client-alert-custom-setting form .sub {
    font-family: 'Montserrat';
    font-size: 1.25em;
    border-bottom: 1px solid #e1e1e1;
    font-weight: bold;
    max-width: 800px;
    padding: 0 0 5px 5px;
    margin-top: 20px;
  }

  .client-alert-custom-setting form .section {
    list-style: none;
    list-style-type: none;
    margin: 10px 0;
    padding: 0;
  }

    .client-alert-custom-setting form .section li {
      margin: 0 0 5px 0;
    }

    .client-alert-custom-setting form .section ul li {
      background-image: none;
      margin: 0;
    }

      .client-alert-custom-setting form .section ul li.label {
        color: #666;
        width: 250px;
        margin-right: 10px;
        text-align: right;
        line-height: 22px;
        display: inline-block;
        vertical-align: top;
        font-size: 0.92em;
      }

      .client-alert-custom-setting form .section ul li.input-container {
        display: inline-block;
      }

      .client-alert-custom-setting form .section ul li .input {
        border: 1px solid #CCC;
        height: 21px;
        max-width: 350px;
        padding: 0 2px;
      }

        .client-alert-custom-setting form .section ul li .input.required {
          border: 2px solid #56BAEC;
        }

.settings-grid .send-email-alerts {
  display: inline;
  margin: 0;
  padding: 0;
  list-style: none;
}

  .settings-grid .send-email-alerts li {
    float: left;
    list-style: none;
    margin: 0;
  }

    .settings-grid .send-email-alerts li div.legend {
      margin-left: 1px;
      padding: 2px 5px 2px 5px;
      min-width: 200px;
      width: auto;
      text-align: left;
      border: 1px solid #CCC;
      border-radius: 5px 0 0 5px;
      background-color: whiteSmoke;
      border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
      box-shadow: inset 0 -1px 0 #ffffff, inset 1px 0 0 rgba(255, 255, 255, 0.3), inset -1px 0 0 rgba(255, 255, 255, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 1px 0 rgba(100, 100, 100, 0.1), 0 2px 0 rgba(150, 150, 150, 0.1);
    }

    .settings-grid .send-email-alerts li div {
      width: 30px;
      height: 25px;
      line-height: 25px;
      padding: 2px 0;
      margin: 2px 0 7px 0;
    }

      .settings-grid .send-email-alerts li div.grey-option {
        cursor: pointer;
      }

  .settings-grid .send-email-alerts #send-mail-ok {
    margin-left: 0;
    text-align: center;
  }

  .settings-grid .send-email-alerts #send-mail-cancel {
    border-radius: 0 5px 5px 0;
    margin-right: 5px;
    text-align: center;
  }

.settings-grid .grey-option {
  background-color: whiteSmoke;
  background-image: -ms-linear-gradient(top, #FAFAFA, #e1e1e1);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#FAFAFA), to(#e1e1e1));
  background-image: -webkit-linear-gradient(top, #FAFAFA, #e1e1e1);
  background-image: -o-linear-gradient(top, #FAFAFA, #e1e1e1);
  background-image: -moz-linear-gradient(top, #FAFAFA, #e1e1e1);
  background-image: linear-gradient(top, #FAFAFA, #e1e1e1);
  border: 1px solid #CCC;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  box-shadow: inset 0 -1px 0 #ffffff, inset 1px 0 0 rgba(255, 255, 255, 0.3), inset -1px 0 0 rgba(255, 255, 255, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 1px 0 rgba(100, 100, 100, 0.1), 0 2px 0 rgba(150, 150, 150, 0.1);
  color: #333;
}

.grey-option:hover {
  background: #e1e1e1;
}

.settings-grid .send-email-alerts .selected {
  background-color: #666;
  background-image: -ms-linear-gradient(top, #CCC, #666);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#CCC), to(#666));
  background-image: -webkit-linear-gradient(top, #CCC, #666);
  background-image: -o-linear-gradient(top, #CCC, #666);
  background-image: -moz-linear-gradient(top, #CCC, #666);
  background-image: linear-gradient(top, #CCC, #666);
  border: 1px solid #CCC;
  color: #FFF;
}
/*#endregion*/
/*#region Contracts*/
.contracts-grid {
  min-width: 700px !important;
  min-height: 350px !important;
  font-size: 0.9em !important;
}

  .contracts-grid .action {
    text-decoration: none;
    color: #0074CC;
  }

    .contracts-grid .action:hover {
      text-decoration: underline;
    }

  .contracts-grid .search-selector {
    display: inline;
    margin: 0;
    padding: 0;
    list-style: none;
  }

    .contracts-grid .search-selector li {
      cursor: pointer;
      float: left;
      list-style: none;
      margin: 0;
      border: 1px solid #CCC;
      background: #CCC;
      color: #FFF;
      padding: 6px 10px;
    }

      .contracts-grid .search-selector li.selected {
        border: 1px solid #666;
        background: #666;
        cursor: default;
      }

      .contracts-grid .search-selector li:first-child {
        border-radius: 5px 0 0 5px;
      }

      .contracts-grid .search-selector li:last-child {
        border-radius: 0 5px 5px 0;
      }

.routes-grid {
  min-width: 700px !important;
  height: 300px !important;
  min-height: 300px !important;
  max-height: 300px !important;
  font-size: 0.9em !important;
}

  .routes-grid .action {
    text-decoration: none;
    color: #0074CC;
  }

    .routes-grid .action:hover {
      text-decoration: underline;
    }

  .routes-grid .option-selector {
    display: inline;
    margin: 0;
    padding: 0;
    list-style: none;
  }

    .routes-grid .option-selector div {
      cursor: pointer;
      float: left;
      list-style: none;
      margin: 0;
      background-color: #0074CC;
      background-image: linear-gradient(top, #08C0, #0074cc 50%, #0074cc 50%, #003580 100%);
      border: 1px solid #BD2C00;
      border-color: #0074CC #0074CC #003580;
      color: #FFF;
      padding: 6px 10px;
      border-radius: 5px 5px 5px 5px;
      margin-right: 4px;
    }

      .routes-grid .option-selector div:hover {
        background: #0074CC;
        background: linear-gradient(top, #008f d 70%, #0074cc 50%, #0074cc 50%, #003580 100%);
      }

      .routes-grid .option-selector div.disabled {
        border: 1px solid #CCC;
        background: #CCC;
        color: #FFF;
      }

#section-1 #edit-section #open-client {
  cursor: pointer;
  list-style: none;
  color: #FFF;
  padding: 4px 8px;
}

  #section-1 #edit-section #open-client a {
    text-decoration: none;
    color: #FFF;
  }

.display-data {
  border-radius: 5px;
  line-height: 22px;
}

.display-date,
.display-time {
  line-height: 22px;
}

.contracts-menu {
}

  .contracts-menu.tabs {
    padding: 20px 0 0 0;
    border-bottom: 1px solid #CCC;
    background: #e1e1e1;
    font-family: 'Montserrat';
  }

    .contracts-menu.tabs ul {
      list-style-type: none;
      list-style: none;
      padding: 0;
      margin: 0 0 0 20px;
    }

      .contracts-menu.tabs ul li {
        display: inline-block;
        padding: 7px 15px;
        font-size: 1.1em;
        border-left: 1px solid #e1e1e1;
        border-right: 1px solid #e1e1e1;
      }

        .contracts-menu.tabs ul li.selected {
          margin-bottom: -2px;
          display: inline-block;
          border-bottom: 1px solid #FFF;
          font-family: 'Montserrat';
          cursor: default;
          background: #FFF;
          border-left: 1px solid #CCC;
          border-top: 1px solid #CCC;
          border-right: 1px solid #CCC;
          border-radius: 5px 5px 0 0;
        }

          .contracts-menu.tabs ul li.selected a {
            color: #000;
            cursor: default;
          }

            .contracts-menu.tabs ul li.selected a:hover {
              text-decoration: none;
              color: #000;
            }

        .contracts-menu.tabs ul li a {
          text-decoration: none;
          color: #0074CC;
        }

          .contracts-menu.tabs ul li a:hover {
            color: #333;
            text-decoration: underline;
          }

.automotors.container {
  background: #FFF;
  overflow-x: hidden;
  overflow-y: auto;
  position: fixed;
  top: 160px;
  bottom: 27px;
  width: 100%;
}

.automotors form {
  margin: 20px;
}

  .automotors form .toolbar {
    margin: 5px 0;
  }

  .automotors form .filter-container {
    background: #FFF;
    border: 1px solid #CCC;
    display: inline-block;
    margin-left: 5px;
  }

  .automotors form .filter-input {
    padding: 5px;
    margin: 0 0 0 3px;
    width: 153px;
    border: 1px solid #FFF;
  }

  .automotors form .filter-date-input {
    padding: 5px;
    margin: 0 0 0 1px;
    width: 69px;
    border: 1px solid #FFF;
    cursor: pointer;
    text-align: center;
    background: #e1e1e1;
    border-radius: 5px;
  }

.automotor {
}

  .automotor.container {
    background: #FFF;
    overflow-x: hidden;
    overflow-y: auto;
    position: fixed;
    top: 165px;
    bottom: 27px;
    width: 100%;
    -webkit-box-shadow: 0 3px 5px rgba(0, 0, 0, 0.15);
    -o-box-shadow: 0 3px 5px rgba(0, 0, 0, 0.25);
    box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.25);
    z-index: 41;
  }

  .automotor form {
    margin: 10px;
  }

    .automotor form a.cancel {
      color: #0074CC;
      text-decoration: none;
      margin-left: 10px;
      font-family: 'Montserrat';
      font-size: 1.1em;
    }

      .automotor form a.cancel:hover {
        text-decoration: underline;
        color: #333;
      }

    .automotor form .sub {
      font-family: 'Montserrat';
      font-size: 1.25em;
      border-bottom: 1px solid #e1e1e1;
      font-weight: bold;
      max-width: 800px;
      padding: 0 0 5px 5px;
      margin-top: 20px;
    }

    .automotor form .section {
      list-style: none;
      list-style-type: none;
      margin: 10px 0 0 10px;
      padding: 0;
    }

      .automotor form .section li {
        margin: 0 0 5px 0;
      }

      .automotor form .section ul {
        margin: 0;
        padding: 0;
      }

        .automotor form .section ul li {
          margin: 0;
        }

          .automotor form .section ul li.label {
            color: #666;
            width: 190px;
            margin-right: 10px;
            text-align: right;
            line-height: 22px;
            display: inline-block;
            vertical-align: top;
            font-size: 0.92em;
          }

          .automotor form .section ul li.input-container {
            display: inline-block;
          }

          .automotor form .section ul li .input {
            border: 1px solid #CCC;
            height: 21px;
            max-width: 350px;
            padding: 0 2px;
          }

            .automotor form .section ul li .input.required {
              border: 2px solid #56BAEC;
            }

          .automotor form .section ul li.option {
            color: #666;
            width: 20px;
            margin-right: 10px;
            text-align: right;
            line-height: 22px;
            display: inline-block;
            vertical-align: top;
            font-size: 0.92em;
          }

          .automotor form .section ul li.hint {
            display: inline-block;
            font-size: 0.85em;
            width: 350px;
          }

  .automotor .warning {
    color: #333;
    font-size: 0.9em;
    padding: 5px;
    line-height: 11px;
    background: #FEDFA7;
  }

.contract-clients {
}

  .contract-clients.container {
    background: #FFF;
    overflow-x: hidden;
    overflow-y: auto;
    position: fixed;
    top: 160px;
    bottom: 27px;
    width: 100%;
  }

  .contract-clients form {
    margin: 20px;
  }

    .contract-clients form .toolbar {
      margin: 5px 0;
    }

    .contract-clients form .filter-container {
      background: #FFF;
      border: 1px solid #CCC;
      display: inline-block;
      margin-left: 5px;
    }

    .contract-clients form .filter-input {
      padding: 5px;
      margin: 0 0 0 3px;
      width: 153px;
      border: 1px solid #FFF;
    }

    .contract-clients form .filter-date-input {
      padding: 5px;
      margin: 0 0 0 1px;
      width: 69px;
      border: 1px solid #FFF;
      cursor: pointer;
      text-align: center;
      background: #e1e1e1;
      border-radius: 5px;
    }

.contract-client {
}

  .contract-client.container {
    background: #FFF;
    overflow-x: hidden;
    overflow-y: auto;
    position: fixed;
    top: 165px;
    bottom: 27px;
    width: 100%;
    -webkit-box-shadow: 0 3px 5px rgba(0, 0, 0, 0.15);
    -o-box-shadow: 0 3px 5px rgba(0, 0, 0, 0.25);
    box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.25);
    z-index: 41;
  }

  .contract-client form {
    margin: 10px;
  }

    .contract-client form a.cancel {
      color: #0074CC;
      text-decoration: none;
      margin-left: 10px;
      font-family: 'Montserrat';
      font-size: 1.1em;
    }

      .contract-client form a.cancel:hover {
        text-decoration: underline;
        color: #333;
      }

    .contract-client form .sub {
      font-family: 'Montserrat';
      font-size: 1.25em;
      border-bottom: 1px solid #e1e1e1;
      font-weight: bold;
      max-width: 800px;
      padding: 0 0 5px 5px;
      margin-top: 20px;
    }

    .contract-client form .section {
      list-style: none;
      list-style-type: none;
      margin: 10px 0 0 10px;
      padding: 0;
    }

      .contract-client form .section li {
        margin: 0 0 5px 0;
      }

      .contract-client form .section ul {
        margin: 0;
        padding: 0;
      }

        .contract-client form .section ul li {
          margin: 0;
        }

          .contract-client form .section ul li.label {
            color: #666;
            width: 190px;
            margin-right: 10px;
            text-align: right;
            line-height: 22px;
            display: inline-block;
            vertical-align: top;
            font-size: 0.92em;
          }

          .contract-client form .section ul li.input-container {
            display: inline-block;
          }

          .contract-client form .section ul li .input {
            border: 1px solid #CCC;
            height: 21px;
            max-width: 350px;
            padding: 0 2px;
          }

            .contract-client form .section ul li .input.required {
              border: 2px solid #56BAEC;
            }

          .contract-client form .section ul li.option {
            color: #666;
            width: 20px;
            margin-right: 10px;
            text-align: right;
            line-height: 22px;
            display: inline-block;
            vertical-align: top;
            font-size: 0.92em;
          }

          .contract-client form .section ul li.hint {
            display: inline-block;
            font-size: 0.85em;
            width: 350px;
          }

  .contract-client .warning {
    color: #333;
    font-size: 0.9em;
    padding: 5px;
    line-height: 11px;
    background: #FEDFA7;
  }

.contracts {
}

  .contracts.container {
    background: #FFF;
    overflow-x: hidden;
    overflow-y: auto;
    position: fixed;
    top: 160px;
    bottom: 27px;
    width: 100%;
  }

  .contracts form {
    margin: 20px;
  }

    .contracts form .toolbar {
      margin: 5px 0;
    }

    .contracts form .filter-container {
      background: #FFF;
      border: 1px solid #CCC;
      display: inline-block;
      margin-left: 5px;
    }

    .contracts form .filter-input {
      padding: 5px;
      margin: 0 0 0 3px;
      width: 153px;
      border: 1px solid #FFF;
    }

    .contracts form .filter-date-input {
      padding: 5px;
      margin: 0 0 0 1px;
      width: 69px;
      border: 1px solid #FFF;
      cursor: pointer;
      text-align: center;
      background: #e1e1e1;
      border-radius: 5px;
    }

.contract {
}

  .contract.container {
    background: #FFF;
    overflow-x: hidden;
    overflow-y: auto;
    position: fixed;
    top: 165px;
    bottom: 27px;
    width: 100%;
    -webkit-box-shadow: 0 3px 5px rgba(0, 0, 0, 0.15);
    -o-box-shadow: 0 3px 5px rgba(0, 0, 0, 0.25);
    box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.25);
    z-index: 41;
  }

  .contract form {
    margin: 10px;
  }

    .contract form a.cancel {
      color: #0074CC;
      text-decoration: none;
      margin-left: 10px;
      font-family: 'Montserrat';
      font-size: 1.1em;
    }

      .contract form a.cancel:hover {
        text-decoration: underline;
        color: #333;
      }

    .contract form .sub {
      font-family: 'Montserrat';
      font-size: 1.25em;
      border-bottom: 1px solid #e1e1e1;
      font-weight: bold;
      max-width: 800px;
      padding: 0 0 5px 5px;
      margin-top: 20px;
    }

    .contract form .section {
      list-style: none;
      list-style-type: none;
      margin: 10px 0 0 10px;
      padding: 0;
    }

      .contract form .section li {
        margin: 0 0 5px 0;
      }

      .contract form .section ul {
        margin: 0;
        padding: 0;
      }

        .contract form .section ul li {
          margin: 0;
        }

          .contract form .section ul li.label {
            color: #666;
            width: 190px;
            margin-right: 10px;
            text-align: right;
            line-height: 22px;
            display: inline-block;
            vertical-align: top;
            font-size: 0.92em;
          }

          .contract form .section ul li.input-container {
            display: inline-block;
          }

          .contract form .section ul li .input {
            border: 1px solid #CCC;
            height: 21px;
            max-width: 350px;
            padding: 0 2px;
          }

            .contract form .section ul li .input.required {
              border: 2px solid #56BAEC;
            }

          .contract form .section ul li.option {
            color: #666;
            width: 20px;
            margin-right: 10px;
            text-align: right;
            line-height: 22px;
            display: inline-block;
            vertical-align: top;
            font-size: 0.92em;
          }

          .contract form .section ul li.hint {
            display: inline-block;
            font-size: 0.85em;
            width: 350px;
          }

  .contract .warning {
    color: #333;
    font-size: 0.9em;
    padding: 5px;
    line-height: 11px;
    background: #FEDFA7;
  }

.route {
}

  .route.container {
    background: #FFF;
    overflow-x: hidden;
    overflow-y: auto;
    position: fixed;
    top: 165px;
    bottom: 27px;
    width: 100%;
    -webkit-box-shadow: 0 3px 5px rgba(0, 0, 0, 0.15);
    -o-box-shadow: 0 3px 5px rgba(0, 0, 0, 0.25);
    box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.25);
    z-index: 41;
  }

  .route form {
    margin: 10px;
  }

    .route form a.cancel {
      color: #0074CC;
      text-decoration: none;
      margin-left: 10px;
      font-family: 'Montserrat';
      font-size: 1.1em;
    }

      .route form a.cancel:hover {
        text-decoration: underline;
        color: #333;
      }

    .route form .sub {
      font-family: 'Montserrat';
      font-size: 1.25em;
      border-bottom: 1px solid #e1e1e1;
      font-weight: bold;
      max-width: 800px;
      padding: 0 0 5px 5px;
      margin-top: 20px;
    }

    .route form .section {
      list-style: none;
      list-style-type: none;
      margin: 10px 0 0 10px;
      padding: 0;
    }

      .route form .section li {
        margin: 0 0 5px 0;
      }

      .route form .section ul {
        margin: 0;
        padding: 0;
      }

        .route form .section ul li {
          margin: 0;
        }

          .route form .section ul li.label {
            color: #666;
            width: 190px;
            margin-right: 10px;
            text-align: right;
            line-height: 22px;
            display: inline-block;
            vertical-align: top;
            font-size: 0.92em;
          }

          .route form .section ul li.input-container {
            display: inline-block;
          }

          .route form .section ul li .input {
            border: 1px solid #CCC;
            height: 21px;
            max-width: 350px;
            padding: 0 2px;
          }

            .route form .section ul li .input.required {
              border: 2px solid #56BAEC;
            }

          .route form .section ul li.option {
            color: #666;
            width: 20px;
            margin-right: 10px;
            text-align: right;
            line-height: 22px;
            display: inline-block;
            vertical-align: top;
            font-size: 0.92em;
          }

          .route form .section ul li.hint {
            display: inline-block;
            font-size: 0.85em;
            width: 350px;
          }

  .route .warning {
    color: #333;
    font-size: 0.9em;
    padding: 5px;
    line-height: 11px;
    background: #FEDFA7;
  }

  .route .date-picker {
    cursor: pointer;
    border: none;
    background: #CCC;
    border-radius: 5px;
    text-align: center;
    padding: 2px 0;
    font-size: 0.9em;
  }

  .route .timer {
    border: none !important;
    cursor: pointer;
    color: #FFF;
    background: #0074CC;
    border-radius: 5px;
    text-align: center;
    padding: 2px 0;
    font-size: 0.9em;
  }

.automotor-info {
  margin-bottom: 15px;
  margin-top: 15px;
}
/*#endregion*/
/*#region Events*/
#assign-savepoint-window {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3000;
  border-radius: 3px;
  background: #FFF;
  max-width: 290px;
  min-width: 290px;
  height: 170px;
  display: none;
  -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
  -o-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.35);
}

  #assign-savepoint-window .title {
    font-size: 1.1em;
    color: #0074CC;
    line-height: 23px;
    border-bottom: 1px solid #e1e1e1;
  }

  #assign-savepoint-window .savepoint-container {
    padding: 10px 12px;
  }

  #assign-savepoint-window #input-section {
    height: 70px;
    padding-top: 5px;
    margin: 5px 0 10px 0;
    border: 1px solid #e1e1e1;
  }

    #assign-savepoint-window #input-section .label {
      margin-bottom: 3px;
      margin-left: 15px;
      font-size: 0.95em;
    }

    #assign-savepoint-window #input-section .input-container {
      margin-left: 13px;
      font-size: 0.95em;
    }

  #assign-savepoint-window .token-input-list {
    border: 2px solid #e1e1e1;
    border-radius: 5px;
    padding: 0;
    margin: 5px 2px;
    width: 235px;
  }

    #assign-savepoint-window .token-input-list .activity-point {
      background: #CCC;
      color: #FFF;
      border: 1px solid #CCC;
    }

      #assign-savepoint-window .token-input-list .activity-point.is-end-event-trigger {
        background: #ED1C24;
        color: #FFF;
        border: 1px solid #ED1C24;
      }

    #assign-savepoint-window .token-input-list .token-input-dropdown {
      width: 325px;
    }

  #assign-savepoint-window .save {
    display: inline-block;
    padding: 7px 15px;
    font-family: 'Montserrat';
    cursor: pointer;
  }

  #assign-savepoint-window .cancel {
    display: inline-block;
    padding: 7px 15px;
    font-family: 'Montserrat';
    cursor: pointer;
    margin-left: 5px;
  }

#assign-driver-window .driver-container .title {
  font-size: 1.1em;
  color: #0074CC;
  line-height: 23px;
  border-bottom: 1px solid #e1e1e1;
}

#comment-window .box .section ul li .input.required {
  border: 2px solid #56BAEC;
}

#comment-window .box .title {
  font-size: 1.1em;
  color: #0074CC;
  line-height: 23px;
  border-bottom: 1px solid #e1e1e1;
}

#init-event-actions-window .token-input-list {
  border: 2px solid #e1e1e1;
  border-radius: 5px;
  margin: 2px;
  width: 230px;
  overflow-y: auto;
  height: 170px;
}

#stop-event-window {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3000;
  border-radius: 3px;
  background: #FFF;
  max-width: 290px;
  min-width: 290px;
  height: 140px;
  display: none;
  -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
  -o-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.35);
}

  #stop-event-window .title {
    font-size: 1.1em;
    color: #0074CC;
    line-height: 23px;
    border-bottom: 1px solid #e1e1e1;
  }

  #stop-event-window .stopEvent-container {
    padding: 10px 12px;
  }

  #stop-event-window #input-section {
    height: 30px;
    padding-top: 15px;
    margin: 5px 0 10px 0;
    border: 1px solid #e1e1e1;
  }

    #stop-event-window #input-section .label {
      margin-bottom: 3px;
      margin-left: 15px;
      font-size: 0.95em;
    }

  #stop-event-window .save {
    display: inline-block;
    padding: 7px 15px;
    font-family: 'Montserrat';
    cursor: pointer;
  }

  #stop-event-window .cancel {
    display: inline-block;
    padding: 7px 15px;
    font-family: 'Montserrat';
    cursor: pointer;
    margin-left: 5px;
  }

#tow-plate-window .tow-container .title {
  font-size: 1.1em;
  color: #0074CC;
  line-height: 23px;
  border-bottom: 1px solid #e1e1e1;
}

#tow-plate-window .tow-container .input.required {
  border: 2px solid #56BAEC;
}
/*#endregion*/
/*#region LinkedVehicles*/
.linkedvehicles.container {
  background: #FFF;
  overflow-x: hidden;
  overflow-y: auto;
  position: fixed;
  top: 160px;
  bottom: 27px;
  width: 100%;
}

.linkedvehicles form {
  margin: 20px;
}

  .linkedvehicles form .toolbar {
    margin: 5px 0;
  }

.linkedvehicle.container {
  background: #FFF;
  overflow-x: hidden;
  overflow-y: auto;
  position: fixed;
  top: 160px;
  bottom: 27px;
  width: 100%;
}

.linkedvehicle form {
  margin: 20px 30px;
}

  .linkedvehicle form a.cancel {
    color: #0074CC;
    text-decoration: none;
    margin-left: 10px;
    font-family: 'Montserrat';
    font-size: 1.1em;
  }

    .linkedvehicle form a.cancel:hover {
      text-decoration: underline;
      color: #333;
    }

  .linkedvehicle form .sub {
    font-family: 'Montserrat';
    font-size: 1.25em;
    border-bottom: 1px solid #e1e1e1;
    font-weight: bold;
    max-width: 800px;
    padding: 0 0 5px 5px;
    margin-top: 20px;
  }

  .linkedvehicle form .section {
    list-style: none;
    list-style-type: none;
    margin: 10px 0;
    padding: 0;
  }

    .linkedvehicle form .section li {
      margin: 0 0 5px 0;
    }

    .linkedvehicle form .section ul li {
      margin: 0;
    }

      .linkedvehicle form .section ul li.label {
        color: #666;
        width: 250px;
        margin-right: 10px;
        text-align: right;
        line-height: 22px;
        display: inline-block;
        vertical-align: top;
        font-size: 0.92em;
      }

      .linkedvehicle form .section ul li.input-container {
        display: inline-block;
      }

      .linkedvehicle form .section ul li .input {
        border: 1px solid #CCC;
        height: 21px;
        max-width: 350px;
        padding: 0 2px;
      }

        .linkedvehicle form .section ul li .input.required {
          border: 2px solid #56BAEC;
        }
/*#endregion*/
/*#region DynamicForms*/
.dynamicforms.container {
  background: #fff;
  overflow-x: hidden;
  overflow-y: auto;
  position: fixed;
  top: 160px;
  bottom: 27px;
  width: 100%;
}

.dynamicforms form {
  margin: 20px;
}

  .dynamicforms form .toolbar {
    margin: 5px 0;
  }

.dynamicform.container {
  background: #fff;
  overflow-x: hidden;
  overflow-y: auto;
  position: fixed;
  top: 160px;
  bottom: 27px;
  width: 100%;
}

.dynamicform form {
  margin: 20px 30px;
}

  .dynamicform form a.cancel {
    color: #0078A8;
    text-decoration: none;
    margin-left: 10px;
    font-family: 'Montserrat';
    font-size: 1.1em;
  }

    .dynamicform form a.cancel:hover {
      text-decoration: underline;
      color: #333;
    }

  .dynamicform form .sub {
    font-family: 'Montserrat';
    font-size: 1.25em;
    border-bottom: 1px solid #e1e1e1;
    font-weight: bold;
    max-width: 800px;
    padding: 0 0 5px 5px;
    margin-top: 20px;
  }

  .dynamicform form .section {
    list-style: none;
    list-style-type: none;
    margin: 10px 0;
    padding: 0;
  }

    .dynamicform form .section li {
      margin: 0 0 5px 0;
    }

    .dynamicform form .section ul li {
      margin: 0;
    }

      .dynamicform form .section ul li.label {
        color: #666;
        width: 250px;
        margin-right: 10px;
        text-align: right;
        line-height: 22px;
        display: inline-block;
        vertical-align: top;
        font-size: 0.92em;
      }

      .dynamicform form .section ul li.input-container {
        display: inline-block;
      }

.dynamicforms form .section ul li .input {
  border: 1px solid #aaa;
  height: 21px;
  max-width: 350px;
  padding: 0 2px;
}

.dynamicform form .section ul li .input.required {
  border: 2px solid #56BAEC;
}

.dynamicform-delete-button {
  font-size: 1.1em;
  padding: 7px 15px;
  margin-right: 4px;
  cursor: pointer;
  border-radius: 5px 5px 5px 5px;
  font-family: 'Montserrat';
  background-color: #0074CC;
  background-image: linear-gradient(top, #0088cc 0, #085fd8 50%, #075dd5 50%, #0047aa 100%);
  border: 1px solid #b55126;
  border-color: #05C #05C #003580;
  color: #fff;
  float: left;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.3), inset 1px 0 0 rgba(255, 255, 255, 0.22), inset -1px 0 0 rgba(255, 255, 255, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 0 rgba(100, 100, 100, 0.1), 0 2px 0 rgba(150, 150, 150, 0.1);
}
/*#endregion*/
/*#region Latest Trips*/
#latest-trips {
  position: absolute;
  bottom: 0;
  left: 0;
  background: #FFF;
  z-index: 7000;
  width: 100%;
  font-size: 0.7em;
  overflow: hidden;
  display: none;
  opacity: 0.9;
  filter: alpha(opacity=90);
}

  #latest-trips .imei {
    display: inline-block;
    font-size: 1.2em;
    color: #333;
    cursor: default;
    width: 100%;
    padding: 5px;
    background-color: #CCC;
    font-weight: bold;
  }

  #latest-trips .close {
    background-color: rgba(0, 0, 0, 0.1) !important;
    border-radius: 5px;
    margin-right: 3px !important;
    font-size: 1rem !important;
    opacity: 1 !important;
  }

    #latest-trips .close:hover {
      background: #666;
    }

  #latest-trips .restore,
  #latest-trips .minimize {
    background: #333;
    border-radius: 5px;
    margin-right: 3px !important;
  }

    .restore:hover,
    #latest-trips .minimize:hover {
      background: #666;
    }

  #latest-trips .h {
    background: #e1e1e1;
    margin: 0 3px;
    color: #333;
  }

    #latest-trips .h ul {
      margin: 0;
      list-style: none;
      list-style-type: none;
      padding: 0;
      display: block;
      min-width: 750px;
      overflow: auto;
      cursor: default;
    }

      #latest-trips .h ul li {
        float: left;
        padding: 5px;
        text-align: center;
        color: #333;
        font-weight: bold;
      }

        #latest-trips .h ul li.f {
          width: 60px;
        }

        #latest-trips .h ul li.d {
          width: 150px;
        }

        #latest-trips .h ul li.k {
          width: 100px;
        }

  #latest-trips .i {
    background: #FFF;
    margin: 0 3px 3px 3px;
  }

    #latest-trips .i ul {
      margin: 0;
      list-style: none;
      list-style-type: none;
      padding: 0;
      cursor: pointer;
      display: block;
      min-width: 750px;
      overflow: auto;
    }

      #latest-trips .i ul:hover {
        background: #CCC;
      }

      #latest-trips .i ul.selected {
        background: #ff8200;
        color: #FFF;
      }

      #latest-trips .i ul li {
        float: left;
        padding: 5px;
        text-align: center;
      }

        #latest-trips .i ul li.f {
          width: 60px;
        }

        #latest-trips .i ul li.d {
          width: 150px;
        }

        #latest-trips .i ul li.k {
          width: 100px;
        }
/*#endregion*/
/*#region Notification Window*/
#notification-window-container {
  position: absolute;
  top: -100px;
  left: -100px;
  z-index: 2500;
  width: 300px;
  height: 46px;
}

  #notification-window-container .envelope {
    position: relative;
    top: -46px;
    left: 0;
    background: #E1E1E1;
    border-radius: 0 0 5px 5px;
  }

  #notification-window-container .actions {
    padding: 5px;
    text-align: center;
  }

  #notification-window-container .message {
    padding: 5px;
    text-align: center;
  }

  #notification-window-container a {
    text-decoration: none;
    font-size: 0.75em;
    color: #0074CC;
    display: inline-block;
    margin-right: 7px;
  }

    #notification-window-container a:hover {
      text-decoration: underline;
      color: #333;
    }
/*#endregion*/
/*#region Mini Languages List */
.mini-languages {
}

  .mini-languages a {
    color: #0074CC;
    text-decoration: none;
  }

    .mini-languages a:hover {
      color: #56BAEC;
    }
/*#endregion*/
/*#region Tips and Help*/
.tip-container {
  position: absolute;
  z-index: 1500;
  top: 220px;
  right: 0;
}

  .tip-container .toggle {
    float: left;
    cursor: pointer;
    background: #ff8200 url("https://images.geo-track.com/www/fleetco/layout.png?v=2.0.1.71") 0 -116px;
    width: 35px;
    height: 33px;
    border-radius: 3px 0 0 3px;
  }

    .tip-container .toggle:hover {
      background-color: #FEDFA7;
    }

  .tip-container .content {
    float: right;
    background: #666;
    max-width: 300px;
    width: 0;
    color: #FFF;
    line-height: 12px;
  }

  .tip-container .tool-bar {
    margin: 10px;
    text-align: right;
    min-width: 280px;
  }

  .tip-container .hide-button {
    cursor: pointer;
    padding: 0 4px 1px 4px;
    background: #333;
    color: #FFF;
    display: inline-block;
    font-size: 0.8em;
    border-radius: 3px;
    margin-left: 30px;
  }

    .tip-container .hide-button:hover {
      background: #666;
    }

  .tip-container .check-box {
    display: inline-block;
    font-size: 0.8em;
  }

    .tip-container .check-box input {
      cursor: pointer;
    }

  .tip-container .title {
    margin: 10px;
    min-width: 280px;
  }

  .tip-container .body {
    font-size: 0.87em;
    margin: 5px 10px;
    color: #CCC;
    min-width: 280px;
  }
/*#endregion*/
/*#region General Custom Notification Style*/
#notification-sub {
  display: inline-block;
  width: 100%;
}

.notification-title {
  float: left;
}

#notification-lock {
  position: fixed;
  top: 0;
  bottom: 0;
  z-index: 10;
  background: #000;
  width: 100%;
  opacity: 0.25;
  filter: alpha(opacity=25);
  display: none;
}

.notification-window {
  width: 375px;
  height: 165px;
  border-radius: 5px;
  background-color: #FFF;
  border: 1px solid #CCC;
  z-index: 11;
  position: relative;
  display: none;
}

  .notification-window .subtitle {
    color: #0074CC;
    font-family: 'Montserrat';
    font-size: 1.05em;
    font-weight: bold;
    padding: 3px 15px 1px 11px;
    margin-top: 10px;
    border-bottom: 1px solid #ff8200;
  }

  .notification-window .section {
    list-style: none;
    list-style-type: none;
    margin: 8px 2px 7px 12px;
    padding: 0;
  }

  .notification-window ul {
    padding-left: 12px;
  }

    .notification-window ul li {
      margin: 0;
    }

      .notification-window ul li.label {
        color: #666;
        width: 45px;
        margin-right: 10px;
        text-align: left;
        line-height: 18px;
        display: inline-block;
        vertical-align: top;
        font-size: 0.92em;
      }

      .notification-window ul li.input-container {
        display: inline-block;
      }

  .notification-window .notification-toolbar {
    width: 152px;
    margin-left: 10px;
  }

  .notification-window .notification-section #notification_settings_date {
    cursor: pointer;
    border: none;
    background: #0074CC;
    border-radius: 5px;
    text-align: center;
    padding: 2px 0;
    font-size: 0.9em;
    color: #FFF;
  }
/*#endregion*/
/*#region Custom Device Notification Style*/
.device form .add-notification {
  cursor: pointer;
  border: none;
  float: left;
  background: #666;
  color: #FFF;
  width: 130px;
  min-width: 130px;
  max-width: 150px;
  border-radius: 5px;
  text-align: center;
  padding: 2px 0;
  font-size: 0.75em;
  font-weight: 200;
  margin-left: 15px;
}

  .device form .add-notification:hover {
    background: #e1e1e1;
    color: #333;
  }

.device .notification-block {
  max-width: 560px;
  margin: 20px 5px 5px 60px;
  height: auto;
  border-radius: 3px;
  max-height: 157px;
  border: 1px solid #CCC;
  overflow-x: hidden;
  overflow-y: scroll;
}

.device form ul.notification-list-header {
  list-style: none;
  list-style-type: none;
  margin: 0 2px 3px 4px;
  padding: 0;
  font-size: 12px;
}

.device form .notification-list-header li {
  list-style: none;
  display: inline-block;
  background-color: #666;
  color: #FFF;
  border-radius: 3px;
  text-align: center;
}

.device form .notification-list-header #name-header {
  width: 288px;
}

.device form .notification-list-header #date-header {
  width: 100px;
}

.device form .notification-list-header #status-header {
  width: 80px;
}

.device form .notification-list-header #actions-header {
  width: 55px;
}

.device form .heading {
  width: 535px;
  background-color: #666;
  color: #FFF;
  border-radius: 3px;
  text-align: center;
  margin: 3px 2px 2px 4px;
}

.device form ul.notification-list-section {
  list-style: none;
  list-style-type: none;
  margin: 2px 2px 7px 0;
  padding: 0;
  width: 960px;
  min-width: 530px;
  font-size: 12px;
}

.device form .notification-list-section li {
  list-style: none;
  display: block;
  margin: 0 5px 3px 5px;
  background: #e1e1e1;
  height: 25px;
  line-height: 25px;
  border-radius: 3px;
  font-size: 0.85em;
  text-align: left;
}

  .device form .notification-list-section li:hover {
    cursor: pointer;
    background: #CCC;
    color: #333;
  }

  .device form .notification-list-section li div {
    float: left;
  }

.device form .name {
  width: 288px;
  text-align: left;
  padding-left: 4px;
}

.device form .date {
  width: 100px;
  text-align: center;
}

.device form .status {
  width: 80px;
  text-align: center;
  line-height: 28px;
}

.device form .actions {
  width: 55px;
  text-align: center;
}

.device form .notification-list-section li a.delete {
  background: url("https://images.geo-track.com/www/fleetco/layout.png?v=1.0.2.99") -312px -95px no-repeat;
  width: 16px;
  height: 16px;
  display: inline-block;
  float: right;
  margin: 4px 5px 0 0;
}

.device form .notification-list-section li a.edit {
  background: url("https://images.geo-track.com/www/fleetco/layout.png?v=1.0.2.99") -293px -95px no-repeat;
  width: 16px;
  height: 16px;
  display: inline-block;
  float: right;
  margin: 4px 5px 0 0;
}

.device form .notification-list-section a.edit:hover {
  opacity: 0.65;
}

.device form .notification-list-section a.delete:hover {
  opacity: 0.65;
}

.device form .phone-input .model-property-name {
  display: none;
}
/*#endregion*/
/*#region Custom Driver Notification Style*/
.driver form .add-notification {
  cursor: pointer;
  border: none;
  float: left;
  background: #666;
  color: #FFF;
  width: 130px;
  min-width: 130px;
  max-width: 150px;
  border-radius: 5px;
  text-align: center;
  padding: 2px 0;
  font-size: 0.75em;
  font-weight: 200;
  margin-left: 15px;
}

  .driver form .add-notification:hover {
    background: #e1e1e1;
    color: #333;
  }

.driver .notification-block {
  max-width: 560px;
  margin: 20px 5px 5px 60px;
  height: auto;
  border-radius: 3px;
  max-height: 157px;
  border: 1px solid #CCC;
  overflow-x: hidden;
  overflow-y: scroll;
}

.driver form ul.notification-list-header {
  list-style: none;
  list-style-type: none;
  margin: 0 2px 3px 4px;
  padding: 0;
}

.driver form .notification-list-header li {
  list-style: none;
  display: inline-block;
  background-color: #666;
  color: #FFF;
  border-radius: 3px;
  text-align: center;
}

.driver form .notification-list-header #name-header {
  width: 288px;
}

.driver form .notification-list-header #date-header {
  width: 100px;
}

.driver form .notification-list-header #status-header {
  width: 80px;
}

.driver form .notification-list-header #actions-header {
  width: 55px;
}

.driver form .heading {
  width: 535px;
  background-color: #666;
  color: #FFF;
  border-radius: 3px;
  text-align: center;
  margin: 3px 2px 2px 4px;
}

.driver form ul.notification-list-section {
  list-style: none;
  list-style-type: none;
  margin: 2px 2px 7px 0;
  padding: 0;
  width: 545px;
  min-width: 530px;
}

.driver form .notification-list-section li {
  list-style: none;
  display: block;
  margin: 0 5px 3px 5px;
  background: #e1e1e1;
  height: 25px;
  line-height: 25px;
  border-radius: 3px;
  font-size: 0.85em;
  text-align: left;
}

  .driver form .notification-list-section li:hover {
    cursor: pointer;
    background: #CCC;
    color: #333;
  }

  .driver form .notification-list-section li div {
    float: left;
  }

.driver form .name {
  width: 288px;
  text-align: left;
  padding-left: 4px;
}

.driver form .date {
  width: 100px;
  text-align: center;
}

.driver form .status {
  width: 80px;
  text-align: center;
  line-height: 28px;
}

.driver form .actions {
  width: 55px;
  text-align: center;
}

.driver form .notification-list-section li a.delete {
  background: url("https://images.geo-track.com/www/fleetco/layout.png?v=1.0.2.99") -312px -95px no-repeat;
  width: 16px;
  height: 16px;
  display: inline-block;
  float: right;
  margin: 4px 5px 0 0;
}

.driver form .notification-list-section li a.edit {
  background: url("https://images.geo-track.com/www/fleetco/layout.png?v=1.0.2.99") -293px -95px no-repeat;
  width: 16px;
  height: 16px;
  display: inline-block;
  float: right;
  margin: 4px 5px 0 0;
}

.driver form .notification-list-section a.edit:hover {
  opacity: 0.65;
}

.driver form .notification-list-section a.delete:hover {
  opacity: 0.65;
}
/*#endregion*/
/*#region Commands*/
.confirmation-window .sub {
  color: #ff8200;
  font-family: 'Montserrat';
  font-size: 1.15em;
  font-weight: bold;
  padding: 10px 15px 5px 5px;
  margin-top: 15px;
  border-bottom: 1px solid #ff8200;
  text-align: center;
}
/*#endregion*/
.k-state-selected,
.k-state-selected:link,
.k-state-selected:visited,
.k-list > .k-state-selected,
.k-list > .k-state-highlight,
.k-panel > .k-state-selected,
.k-ghost-splitbar-vertical,
.k-ghost-splitbar-horizontal,
.k-draghandle.k-state-selected:hover,
.k-scheduler .k-scheduler-toolbar .k-state-selected,
.k-scheduler .k-today.k-state-selected,
.k-marquee-color {
  background-color: #666 !important;
  border-color: #666 !important;
  color: #FFF !important;
}

.input {
  background-color: #e1e1e1;
  font-family: Montserrat;
  border: 0 !important;
  padding: 8px !important;
  border-radius: 5px;
  box-sizing: border-box !important;
  font-size: 12px;
  height: auto !important;
}

  .input.required {
    border-left: 5px solid #ED1C24 !important;
  }

  .input:focus {
    outline: none;
  }

.codes {
  background-color: #e1e1e1;
  font-family: Montserrat;
  border: 0 !important;
  padding: 8px !important;
  border-radius: 5px;
  box-sizing: border-box;
  font-size: 12px;
  height: auto !important;
}

.c-codes {
  background-color: #e1e1e1;
  font-family: Montserrat;
  border: 0 !important;
  padding: 8px !important;
  border-radius: 5px;
  box-sizing: border-box;
  font-size: 12px;
  height: auto !important;
}

.phone {
  background-color: #e1e1e1;
  font-family: Montserrat;
  border: 0 !important;
  padding: 8px !important;
  border-radius: 5px;
  box-sizing: border-box;
  font-size: 12px;
  height: auto !important;
}

.leaflet-bar {
  box-shadow: 0 0px 9px rgba(0, 0, 0, 0.35);
}

.widget-header {
  background-color: #CCC !important;
  color: #333 !important;
}

.widget-header-device {
  background-color: #FFFFFF !important;
  color: #333 !important;
  display: block !important;
  border: 1px solid #CCC !important;
}

  .widget-header-device .title {
    background-color: #CCC !important;
    color: #333 !important;
    display: inline-block !important;
    width: 320px !important;
  }

  /*.widget-header-device .last-update {
    background-color: #FFF !important;
    color: #333 !important;
    display: inline-block !important;
    width: 135px !important;
    font-size: 0.85em !important;
    text-align: center !important;
  }*/

  .widget-header-device .refresh {
    background: url("https://images.geo-track.com/www/common/icons-16px.png?v=2.0.1.72") 0 -32px no-repeat;
    width: 16px;
    height: 16px;
    display: inline-block;
    vertical-align: middle;
    margin-left: 10px;
    filter: invert(50%);
  }

    .widget-header-device .refresh:hover {
      opacity: 0.85;
      filter: alpha(opacity=85);
    }

  .widget-header-device .refresh-label {
    background-color: #FFF !important;
    color: #333 !important;
    display: inline-block !important;
    width: 50px !important;
    font-size: 0.85em !important;
  }

  .widget-header-device .sound-alerts {
    background: url("https://images.geo-track.com/www/common/icons-16px.png?v=2.0.1.72") 0 -96px no-repeat;
    width: 16px;
    height: 16px;
    display: inline-block;
    vertical-align: middle;
    margin-left: 20px;
    filter: invert(50%);
  }

    .widget-header-device .sound-alerts:hover {
      opacity: 0.85;
      filter: alpha(opacity=85);
    }

    .widget-header-device .sound-alerts.selected {
      background: url("https://images.geo-track.com/www/common/icons-16px.png?v=2.0.1.72") 0 -80px no-repeat;
      filter: invert(50%);
    }

[id$='main-filter'] {
  background-color: #E1E1E1 !important;
  color: #333 !important;
}

  [id$='main-filter'] .selected {
    background-color: #CCC !important;
    color: #333 !important;
  }

[id$='grid-header'] {
  background-color: #CCC !important;
  color: #333 !important;
  font-size: 10px !important;
}

  [id$='grid-header'] ul li {
    color: #333 !important;
  }

.dark-theme .current {
  background: #ff8200 !important;
  color: #fff !important;
  border: 0 !important;
  cursor: default;
}

.dark-theme a,
.dark-theme span {
  background: none !important;
  border: 0 !important;
  background-color: #666 !important;
}

#alerts-1-grid ul li {
  font-size: 10px !important;
}

#on-event-devices-1-devices .device {
  background: #FFF;
  padding: 20px;
  cursor: pointer;
  -webkit-box-shadow: 0 0px 9px rgba(0, 0, 0, 0.1);
  -o-box-shadow: 0 0px 9px rgba(0, 0, 0, 0.1);
  box-shadow: 0 0px 9px rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
  border-radius: 10px;
  margin: 10px;
  font-size: 12px;
}

#alerts-1-settings,
#gate-settings-button,
[id^='lite-plot'] [id$='-settings'] {
  filter: invert(1) !important;
}

#online-1-devices .device-item .device-details {
  background: #FFF;
  padding: 20px;
  cursor: pointer;
  -webkit-box-shadow: 0 0px 9px rgba(0, 0, 0, 0.1);
  -o-box-shadow: 0 0px 9px rgba(0, 0, 0, 0.1);
  box-shadow: 0 0px 9px rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
  border-radius: 10px;
  margin: 10px;
  font-size: 12px;
}

  #online-1-devices .device-item .device-details .imei {
    color: #0074CC !important;
  }

[id$='settings-popup'] {
  border: 1px solid #333 !important;
}

.embeddedServiceHelpButton {
  font-family: 'Montserrat' !important;
}

  .embeddedServiceHelpButton .helpButton {
    bottom: 70px !important;
    right: 10px !important;
  }

    .embeddedServiceHelpButton .helpButton .uiButton {
      border-radius: 50% !important;
      color: #FFF !important;
      background: #0062FE !important;
      width: 20px !important;
      min-width: 20px !important;
      height: 45px !important;
    }

      .embeddedServiceHelpButton .helpButton .uiButton:hover::before, .embeddedServiceHelpButton .helpButton .uiButton:focus::before {
        border-radius: 8px 8px 8px 8px !important;
      }

    .embeddedServiceHelpButton .helpButton .helpButtonEnabled.no-hover:hover::before, .embeddedServiceHelpButton .helpButton .helpButtonEnabled.no-hover:focus::before {
      display: flex !important;
    }

[embeddedservice-chatheader_chatheader-host] {
  background-color: #005290 !important;
  font-family: 'Montserrat' !important;
}

.embeddedServiceLiveAgentStateChatPlaintextMessageDefaultUI.chasitor.plaintextContent {
  background: #005290 !important;
  color: #FFF !important;
  margin-right: 25px !important;
  font-family: 'Montserrat' !important;
}

.embeddedServiceLiveAgentStateChatInputFooter .chasitorControls {
  height: 10px !important;
}

.embeddedServiceSidebar.modalContainer {
  font-family: 'Montserrat' !important;
  bottom: 70px !important;
}

.embeddedServiceSidebar.layout-docked .dockableContainer {
  border-radius: 8px 8px 8px 8px !important;
  bottom: 70px !important;
  right: 10px !important;
}

.embeddedServiceLiveAgentStateChatInputFooter .chasitorText {
  font-family: 'Montserrat' !important;
  color: #333 !important;
}

.embeddedServiceLiveAgentStateChatItem .isLightningOutContext .avatar.iconAvatar {
  box-sizing: border-box !important;
}

.embeddedServiceSidebarMinimizedDefaultUI.minimizedContainer:hover {
  background-color: #005290 !important;
  color: #FFF !important;
}

.embeddedServiceSidebarMinimizedDefaultUI {
  background-color: #005290 !important;
  border-color: #005290 !important;
  border-radius: 8px 8px 8px 8px !important;
  bottom: 70px !important;
}

.embeddedServiceSidebarButton {
  background: #005290 !important;
  color: #FFF !important;
  font-family: 'Montserrat' !important;
  margin-right: 25px !important;
  height: 30px !important;
}

  .embeddedServiceSidebarButton.uiButton {
    text-decoration-color: #005290 !important;
    width: 80% !important;
  }

.embeddedServiceSidebarDialogState .dialogButton {
  width: 80% !important;
}

.embeddedServiceSidebarButton.uiButton--inverse .label {
  color: #FFF !important;
}

.embeddedServiceSidebarDialogState .dialogButtonContainer {
  width: 100% !important;
  padding: 0 0 0 12px !important;
}

.embeddedServiceHelpButton .uiButton .helpButtonLabel {
  display: none !important;
}

.embeddedServiceHelpButton .embeddedServiceIcon {
  position: relative !important;
  z-index: 1 !important;
  display: inline-block !important;
  margin-right: 10px !important;
  line-height: 1 !important;
  vertical-align: top !important;
}

  .embeddedServiceHelpButton .embeddedServiceIcon::before {
    content: url("https://images.geo-track.com/www/fleetco/chat_button.png") !important;
  }

.embeddedServiceHelpButton .helpButton .helpButtonEnabled:hover::before, .embeddedServiceHelpButton .helpButton .helpButtonEnabled:focus::before {
  top: 13.5px !important;
  left: 12px !important;
  position: absolute !important;
  opacity: 1.0 !important;
  border-radius: 50% !important;
  color: #FFF !important;
  background: #0062FE !important;
  width: 0px !important;
  min-width: 0px !important;
}

.embeddedServiceHelpButton .helpButton .helpButtonEnabled:hover::after, .embeddedServiceHelpButton .helpButton .helpButtonEnabled:focus::after {
  top: 13.5px !important;
  left: 12px !important;
  position: absolute !important;
  opacity: 1.0 !important;
  border-radius: 50% !important;
  color: #FFF !important;
  background: #0062FE !important;
  width: 0px !important;
  min-width: 0px !important;
}

.embeddedServiceLiveAgentStateChatInputFooter .chasitorControls .uiInput {
  height: 15px !important;
}

.embeddedServiceLiveAgentStateChatInputFooter.dynamicResizeTextOneRow {
  height: 60px !important;
  min-height: 60px !important;
}

.embeddedServiceLiveAgentStateChatInputFooter.dynamicResizeTextTwoRows {
  height: auto !important;
  min-height: auto !important;
}

.embeddedServiceLiveAgentStateChatInputFooter.dynamicResizeTextThreeRows, .embeddedServiceLiveAgentStateChatInputFooter.dynamicResizeTextMoreThanThreeRows {
  height: auto !important;
  min-height: auto !important;
}

.embeddedServiceLiveAgentStateChatInputFooter.dynamicResizeTextMoreThanThreeRows .chasitorText {
  overflow-y: scroll;
  height: 23px !important;
  min-height: 23px !important;
}

.embeddedServiceSidebar.layout-docked .dockableContainer {
}

  .embeddedServiceSidebar.layout-docked .dockableContainer .sidebarHeader {
    padding: 0 !important;
    width: 95% !important;
    margin-left: 10px !important;
  }

    .embeddedServiceSidebar.layout-docked .dockableContainer .sidebarHeader .minimizeButton {
      height: 16px !important;
      min-height: 16px !important;
      width: 16px !important;
      min-width: 16px !important;
      padding-bottom: 25px !important;
    }

      .embeddedServiceSidebar.layout-docked .dockableContainer .sidebarHeader .minimizeButton::before {
        background-color: rgb(34, 34, 34) !important;
      }

    .embeddedServiceSidebar.layout-docked .dockableContainer .sidebarHeader .closeButton {
      height: 16px !important;
      min-height: 16px !important;
      width: 16px !important;
      min-width: 16px !important;
      padding-top: 1px !important;
    }

      .embeddedServiceSidebar.layout-docked .dockableContainer .sidebarHeader .closeButton::before {
        background-color: rgb(34, 34, 34) !important;
      }

  .embeddedServiceSidebar.layout-docked .dockableContainer .headerAnnouncement {
    width: 95% !important;
    left: 0 !important;
  }

.embeddedServiceLiveAgentStateChatItem.chatMessage button {
  width: 95% !important;
}

.embeddedServiceLiveAgentStateChat .endChatContainer {
  padding: 0 0 24px 5px !important;
}

.device-label-online-plate {
  display: none;
}

.gate-name-label {
  color: #666 !important;
  font-family: 'Montserrat' !important;
  font-size: 1.0em !important;
  float: left !important;
}

.last-update-panel {
  visibility: hidden;
  height: 30px;
  width: 460px;
  margin-left: 130px;
  display: flex;
  flex-wrap: wrap;
}

.container-last-update {
  display: flex;
  width: 30px !important;
  padding: 2px 0;
  border-radius: 8px;
  background: #fff;
  row-gap: 30px;
  flex-direction: column;
  align-items: center;
  margin-left: 1px !important;
  margin-right: 1px !important;
  padding-right: 1px !important;
}

.circular-progress {
  position: relative;
  height: 25px;
  width: 25px;
  border-radius: 50%;
  background: conic-gradient(#333 3.6deg, #ededed 0deg);
  display: flex;
  align-items: center;
  justify-content: center;
}

  .circular-progress::before {
    content: "";
    position: absolute;
    height: 21px;
    width: 21px;
    border-radius: 50%;
    background-color: #FFF;
  }

.progress-value {
  position: relative;
  font-family: 'Montserrat';
  font-size: 0.75em;
  color: #333;
  /*background-color: #008000;
  height: 21px;
  width: 21px;
  border-radius: 50%;*/
}

  .progress-value .change-background-color {
    background-color: #008000;
    color: #FFF;
  }

.last-update-hour-date {
  height: 25px;
  width: 300px;
  margin-left: 5px;
}

.container-hour-date {
  background-color: #FFF;
  color: #333;
  display: inline-block;
  width: 300px;
  height: 25px;
}

  .container-hour-date .hour-date {
    font-family: 'Montserrat';
    font-size: 0.75em;
    background-color: #FFF;
    color: #333;
    border: 0;
    width: 300px;
    height: 25px;
  }