﻿@import url(../lib/semantic/semantic.css);
.ui.inverted.dimmer .header {
  color: rgba(0, 0, 0, 0.87); }

html {
  height: 100%; }

body {
  font-family: 'Open Sans', Arial, sans-serif;
  height: 100%;
  display: flex; }

.root {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column; }

#top-menu {
  flex-shrink: 0;
  border-radius: 0;
  margin: 0;
  border: none; }

.page-layout {
  flex-grow: 1;
  display: flex;
  overflow: hidden; }

#bigLogo, #bigBLogo {
  width: 185px;
  height: 68px;
  margin-left: 14px;
  display: block; }

#smallLogo {
  width: 61px;
  height: 51px;
  margin-left: auto;
  margin-right: -8px;
  margin-top: 10px;
  margin-bottom: 17px; }

#smallBLogo {
  height: 100%;
  width: auto;
  max-height: 51px;
  margin-left: auto;
  margin-right: -4px;
  margin-top: 10px;
  margin-bottom: 17px; }

.ui.large.form {
  top: 35vh;
  margin-left: auto;
  margin-right: auto;
  width: 40vw; }

.item.logo-button {
  display: flex;
  width: 220px;
  justify-content: space-around;
  background: white !important; }

#nav-menu::-webkit-scrollbar {
  display: none; }

#nav-menu {
  width: 220px;
  flex-shrink: 0;
  margin: 0;
  padding-top: 0px;
  border-right-width: 1px;
  background: #00C45F;
  height: 100%;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none; }
  #nav-menu .menu > .item {
    padding-right: 18px; }
  #nav-menu .item {
    margin-bottom: -2px;
    border-right: 0px hidden !important; }
    #nav-menu .item:hover {
      font-weight: bold; }
    #nav-menu .item.active {
      color: white;
      font-weight: bold; }
  #nav-menu .header {
    margin-left: 1em;
    cursor: default;
    font-weight: bold; }
  #nav-menu.transitions-active {
    transition: margin-left ease-in-out 0.2s; }
    #nav-menu.transitions-active #current-user-dropdown {
      transition-property: color;
      transition-timing-function: ease-in-out;
      transition-duration: 0.05s;
      position: static; }
      #nav-menu.transitions-active #current-user-dropdown .menu {
        position: static; }
      #nav-menu.transitions-active #current-user-dropdown .caret.icon {
        transition: opacity ease-in-out 0.2s; }
      #nav-menu.transitions-active #current-user-dropdown .avatar.image {
        transition: transform ease-in-out 0.2s; }
    #nav-menu.transitions-active #nav-menu-toggle > .icon {
      transition: transform ease-in-out 0.4s; }
  #nav-menu.narrow {
    margin-left: -174px !important; }
    #nav-menu.narrow #current-user-dropdown {
      color: rgba(1, 1, 1, 0); }
      #nav-menu.narrow #current-user-dropdown .caret.icon {
        display: none; }
      #nav-menu.narrow #current-user-dropdown .avatar.image {
        transform: translateX(160px); }
    #nav-menu.narrow #nav-menu-toggle > .icon {
      transform: rotate(180deg); }

#nav-menu-toggle {
  text-align: right;
  display: block;
  padding: 4px 10px;
  border: none;
  outline: none;
  cursor: pointer;
  color: #333;
  font-size: 18px; }
  #nav-menu-toggle:hover {
    background: rgba(0, 0, 0, 0.05); }

#nav-menu-toggle-container {
  text-align: right; }

.body {
  flex-grow: 1;
  overflow: auto;
  padding: 1em; }

.master-detail-body {
  margin: 1em;
  flex-grow: 1;
  overflow: hidden;
  height: calc(100vh - 30px);
  display: flex;
  border: 1px solid #EBEBEB !important;
  border-radius: 4px !important;
  background-color: #fefefe !important; }
  .master-detail-body .master, .master-detail-body .detail {
    padding: 1em;
    overflow: auto; }
  .master-detail-body .master {
    width: 20em;
    flex-shrink: 0; }
    .master-detail-body .master.wide {
      width: 30em; }
  .master-detail-body .detail {
    flex-grow: 1; }
  .master-detail-body .divider {
    border-left: 1px solid #EBEBEB; }

.master-detail {
  margin: 0 !important;
  padding: 0 !important;
  flex-grow: 1;
  overflow: hidden;
  display: flex; }
  .master-detail.ui.tab.active {
    display: flex; }
  .master-detail .master, .master-detail .detail {
    padding: 1em;
    overflow: auto; }
  .master-detail .master {
    width: 20em;
    flex-shrink: 0; }
    .master-detail .master.wide {
      width: 30em; }
  .master-detail .detail {
    flex-grow: 1; }
  .master-detail .divider {
    border-left: 1px solid #EBEBEB; }

.flex-column {
  display: flex;
  flex-direction: column; }

.flex-row {
  display: flex;
  flex-direction: row; }

.flex-fill {
  flex-grow: 1; }

.flex-fixed {
  flex-shrink: 0; }

.section {
  margin: 1em 0;
  padding-top: 1em;
  border-top: 1px solid #EBEBEB; }
  .section > .header {
    margin-bottom: 1rem !important; }
  .section:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: none; }

.notification-icon {
  position: relative; }
  .notification-icon > div.label {
    display: inline-block;
    position: relative;
    top: -6px;
    margin-left: -16px; }

.ui.table tbody > tr.selectable:hover {
  background: rgba(0, 0, 0, 0.05) !important;
  color: rgba(0, 0, 0, 0.95) !important; }

.ui.table tbody > tr.selectable.active:hover {
  background: #EFEFEF !important;
  color: rgba(0, 0, 0, 0.95) !important; }

.ui.table tbody > tr.odd {
  background-color: rgba(0, 0, 50, 0.02); }

.ui.action.input > .ui.dropdown.input.selection {
  border-right: none;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0; }

.bold-text {
  font-weight: bold !important; }

.green-text {
  color: #19E177; }

.red-text {
  color: #FF0000; }

.blue.text {
  color: #143D64; }

.ui.basic.link.button {
  box-shadow: none !important; }

.muted-text {
  color: rgba(0, 0, 0, 0.5); }

.italic-text {
  font-style: italic !important; }

div [class*="left floated"] {
  float: left;
  margin-left: 0.25em; }

div [class*="right floated"] {
  float: right;
  margin-right: 0.25em; }

#user-notifications-popup {
  max-width: none;
  height: auto;
  width: 400px;
  max-height: 70%;
  padding: 0; }
  #user-notifications-popup .section-container {
    overflow-y: auto;
    width: 400px; }
    #user-notifications-popup .section-container > .section {
      position: relative;
      padding: 1em 1em 0; }
      #user-notifications-popup .section-container > .section > .ui.header {
        margin-top: 0; }
      #user-notifications-popup .section-container > .section .new-badge {
        position: absolute;
        top: 1em;
        right: 1em; }
  #user-notifications-popup > .section {
    flex-grow: 0;
    flex-shrink: 0;
    margin-top: 0;
    padding: 1em 1em 0; }

.gray.background {
  background: #fdfdfd; }

.validation-summary-errors {
  padding-left: 14px; }
  .validation-summary-errors ul {
    padding: 0;
    list-style: none;
    list-style-position: inside; }

div.panel, .sectioned-panel {
  margin: 0;
  padding: 20px;
  border: 1px solid #EBEBEB !important;
  border-radius: 4px !important;
  background-color: white !important; }

.sectioned-panel {
  padding: 0; }
  .sectioned-panel > .header {
    padding: 1rem;
    margin: 0;
    border-bottom: 2px solid #EBEBEB !important; }
  .sectioned-panel .section {
    padding: 1rem 1rem 0 1rem; }

.login-header {
  display: inline-block;
  position: absolute;
  text-align: left !important;
  top: 0.2em;
  width: auto; }

.login-view {
  height: 300px !important;
  position: relative;
  overflow: hidden;
  padding: 0 !important; }
  .login-view .ui.form {
    position: absolute;
    width: 100%;
    height: 100%;
    padding: 1em 1.2em; }
    .login-view .ui.form div.footer {
      position: absolute;
      bottom: 1em;
      padding-right: 2.4em;
      width: 100%; }
      .login-view .ui.form div.footer p {
        margin-top: 0.5em; }

.login-progress {
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 6px;
  background: linear-gradient(to right, #19E177 0%, #19E177 45%, #cdf9e2 50%, #19E177 55%, #19E177 100%);
  background-size: 300%;
  background-position-x: 50%;
  animation: indeterminate-progress 2s linear infinite; }
  .login-progress.active {
    display: block; }

@keyframes indeterminate-progress {
  0% {
    background-position-x: 100%; }
  100% {
    background-position-x: 0%; } }

.full-page-message .title {
  color: rgba(0, 0, 0, 0.87);
  margin-top: 60px;
  font-size: 108px;
  font-weight: 200;
  line-height: 1; }
  .full-page-message .title .sub.header {
    font-size: 36px;
    display: block;
    line-height: 1;
    color: rgba(0, 0, 0, 0.5); }

.full-page-message p {
  font-size: 18px;
  margin: 24px 0 36px; }

.trend.widget {
  margin: 0;
  padding: 20px; }
  .trend.widget .row, .trend.widget .row > .column {
    padding: 0; }
  .trend.widget .change .positive {
    color: #19E177; }
  .trend.widget .change .negative {
    color: #FF0000; }
  .trend.widget .value {
    margin-top: 35px;
    color: #555;
    font-size: 38px;
    line-height: 1; }

.primary .trend.widget {
  border-color: #19E177 !important;
  background-color: #19E177 !important; }
  .primary .trend.widget .header {
    color: white; }
    .primary .trend.widget .header .sub.header {
      color: #E8E8E8; }
  .primary .trend.widget .change .positive, .primary .trend.widget .change .negative {
    color: white; }
  .primary .trend.widget .value {
    color: white; }

.float-right {
  float: right; }

tr[class*="clickable table row"] {
  cursor: pointer; }

table .meta {
  font-size: 80%;
  color: rgba(0, 0, 0, 0.6); }

.find-vehicle span.license-plate-country-code {
  display: inline-block;
  width: 28px; }

.table-scroll-container {
  height: 400px;
  overflow-y: auto;
  overflow-x: hidden; }

.scrollable.list.segment {
  padding: 0;
  overflow-y: auto;
  overflow-x: hidden; }
  .scrollable.list.segment .item {
    padding: 0.5em; }
  .scrollable.list.segment.selection .item {
    padding: 0; }

.ui.scrollable.segments {
  overflow-y: auto; }

.pl[class*="max 500px wide"] {
  max-width: 500px; }

.pl[class*="master list"] {
  max-height: 600px;
  overflow-y: auto;
  padding: 0 !important; }
  .pl[class*="master list"] .item {
    padding: 0 !important; }
    .pl[class*="master list"] .item > .content {
      padding: 0.5em !important; }

.master-detail-view {
  display: flex; }
  .master-detail-view .master {
    flex-grow: 0;
    margin: 0;
    width: 400px;
    max-height: 600px; }
  .master-detail-view .detail {
    margin-left: 1em;
    flex-grow: 1; }

.column > .card.transparent {
  background-color: rgba(255, 255, 255, 0.5); }

canvas.dashboard-graph {
  width: 400px; }

.margin10 {
  margin-top: 10px !important; }

#period-selector, #location-selector {
  background-color: rgba(255, 255, 255, 0.5); }

.location-info-section {
  margin-bottom: 2em; }
  .location-info-section h3 {
    font-size: 16px; }
  .location-info-section h3.ui.header {
    border-bottom: 1px solid #EBEBEB; }

.ui.form .field > .label {
  display: block;
  margin: 0em 0em 0.28571429rem 0em;
  color: rgba(0, 0, 0, 0.87);
  font-size: 0.92857143em;
  font-weight: bold;
  text-transform: none; }
  .ui.form .field > .label .checkbox {
    float: right;
    font-weight: 100; }

textarea.parking-lot-info-text-editor {
  resize: none;
  padding: 0.5em 0.7em;
  width: 100%;
  height: 100%;
  border: 0px hidden;
  display: block;
  transition-property: box-shadow, background;
  transition-duration: 0.05s;
  transition-timing-function: ease; }
  textarea.parking-lot-info-text-editor.has-edited {
    background: #FFFDE7; }
  textarea.parking-lot-info-text-editor.is-lot-specific {
    box-shadow: inset -3px 0px 0px #2185D0; }

td.parking-lot-info-text-table-actions-cell {
  border-left: 1px solid #eee;
  background: #fbfbfb; }
  td.parking-lot-info-text-table-actions-cell:not(:last-child) {
    border-right: 1px solid #eee; }

.parking-lot-info-text-table-actions {
  /*font-size: 1.1em;*/
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-content: space-around; }
  .parking-lot-info-text-table-actions > :not(:last-of-type) .parking-lot-info-text-table-action,
  .parking-lot-info-text-table-actions > .parking-lot-info-text-table-action:not(:last-of-type) {
    border-bottom: 1px solid #ddd; }
  .parking-lot-info-text-table-actions .parking-lot-info-text-table-action {
    display: block;
    padding-top: 4px;
    padding-bottom: 4px; }
    .parking-lot-info-text-table-actions .parking-lot-info-text-table-action .icon {
      margin-right: 0; }

.ui.welled.styled.accordion > .title,
.ui.welled.styled.accordion > .title + .content {
  transition-property: background-color;
  transition-duration: 0.15s;
  transition-timing-function: ease-in-out; }

.ui.welled.styled.accordion > .active.title,
.ui.welled.styled.accordion > .content {
  background-color: #f9fafa; }

.ui.welled.styled.accordion > .content:last-child {
  border-bottom-left-radius: 0.28571rem;
  border-bottom-right-radius: 0.28571rem; }

.ui.welled.styled.accordion > .title:first-child {
  border-top-left-radius: 0.28571rem;
  border-top-right-radius: 0.28571rem; }

.ui.raised.styled.accordion > .title {
  padding: 0.7em 10px;
  transition-property: padding-top, padding-bottom, font-size;
  transition-timing-function: ease;
  transition-duration: .15s; }
  .ui.raised.styled.accordion > .title.active {
    font-size: 1.3em; }

.ui.styled.accordion > .title .circular.dropdown.icon {
  padding-left: 10px !important; }

.ui.custom-trigger.accordion > .title {
  cursor: unset; }

.ui.accordion > .title > .padded.dropdown.icon {
  width: 2em !important;
  height: 2em !important;
  padding: 0.5em !important;
  line-height: 1 !important; }

.ui.compact.accordion > .title {
  padding: 0.25em !important; }

.ui.accordion[class*="very compact"] > .title {
  padding: 0em !important; }

.ui.scrollable.accordion {
  overflow-y: auto; }

.ui.accordion[class*="equal padded"] .title ~ .content {
  padding: 1em; }

.ui.forced-basic.accordion {
  background-color: transparent !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important; }
  .ui.forced-basic.accordion .title {
    border-top: 0px hidden !important;
    padding: 0.5em 0em !important; }

.permit-holder-permits-container {
  min-height: calc(100vh - 180px); }

.ui.horizontal.header .sub.header {
  display: inline-block;
  margin-left: 0.5em; }

.display-none {
  display: none; }

.visibility-hidden {
  visibility: hidden; }

.ui.transparent.label {
  background-color: transparent !important;
  pointer-events: all; }

.ui.inline.label {
  position: relative;
  z-index: 1;
  padding: 0.5833em  0.833em;
  margin: -0.5833em -0.833em; }

.ui.breadcrumb .section {
  border-top: 0px hidden !important; }

.clearfix::after {
  display: block;
  content: "";
  clear: both; }

.ui.selectable.table tbody tr:hover,
.ui.table tbody tr td.selectable:hover {
  background-color: #FCFDFE !important; }

.ui.selectable.table tbody tr:hover:last-child,
.ui.table tbody tr:last-child td.selectable:hover {
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px; }

.ui.fitted.segment {
  padding: 0px !important; }

.horizontal.bember.menu {
  list-style-type: none;
  margin: 0;
  width: 100%; }

.horizontal.bember.menu .item {
  font-size: 14px;
  font-family: sans-serif;
  display: table-cell;
  padding: 0px 20px;
  text-align: center;
  vertical-align: middle;
  font-weight: bold;
  color: #808080; }

.horizontal.bember.menu .item:last-child {
  border-right: none; }

.horizontal.bember.menu .active.item span {
  color: #2185D0;
  font-weight: bold; }

.horizontal.bember.menu .item:hover {
  cursor: pointer;
  color: black;
  font-size: 14px; }

.bember.blue {
  color: #143D64; }

.tab.segment > .active.tab.segment {
  visibility: hidden; }

/*Bember control*/
.bcb.primary {
  margin-top: 20px !important;
  margin-bottom: 20px !important;
  font-size: 16px !important;
  color: white !important;
  padding: 11px 21px !important;
  background: linear-gradient(135deg, #83CEF8 0%, #4E91B7 100%) !important; }

.bcb.primary:hover {
  box-shadow: 3px 8px 8px 6px rgba(114, 114, 114, 0.25) !important; }

.bcb.secondary {
  margin-top: 20px !important;
  margin-bottom: 20px !important;
  font-size: 16px !important;
  font-weight: normal;
  color: white !important;
  padding: 11px 21px !important;
  background: linear-gradient(135deg, #83CEF8 0%, #4E91B7 100%) !important; }

.bcb.secondary:hover {
  font-weight: bold; }

.bc.nav-menu {
  background: #353B53 !important;
  color: white; }

.bc.nav-menu .item {
  color: white !important; }

.bc.nav-menu .item.active {
  border-left: solid #83CEF8 !important;
  background: rgba(251, 253, 255, 0.1) !important; }

.bc.nav-menu .item:hover {
  background: rgba(251, 253, 255, 0.1) !important; }

.bc.nav-menu #nav-menu-toggle {
  color: white; }

.bc.accordion .title {
  margin: 5px;
  height: 60px !important;
  padding: 11px 15px; }

.bc.accordion .title .icon {
  float: right !important;
  padding-top: 10px !important; }

.bc.primary {
  color: #65747A; }

.bc.dark {
  color: #353B53; }

.bc.secondary {
  color: #CAD6D8; }

.bc.soft-grey {
  color: #ECF1F6; }

.bc.alert {
  color: #B46E6B; }

.bc.success {
  color: #94D389; }

.bc.yellow {
  color: #FFCD83; }

.bc.header1 {
  font-weight: bold;
  font-size: 32px; }

.bc.header2 {
  font-weight: bold;
  font-size: 24px; }

.bc.standard-font {
  font-weight: normal;
  font-size: 16px; }

.bc.medium-font {
  font-weight: normal;
  font-size: 14px; }

.bc.small-font {
  font-weight: normal;
  font-size: 12px; }

.bc.tiny-font {
  font-weight: normal;
  font-size: 10px; }

#staging {
  background: #6ab7aa;
  padding: 10px;
  color: white;
  font-weight: bolder; }

.bember-theme #nav-menu {
  background: #618DFF !important; }

#nav-menu #bigBLogo, #nav-menu #smallBLogo {
  display: none; }

.bember-theme #nav-menu #bigBLogo, .bember-theme #nav-menu #smallBLogo {
  display: block; }

.bember-theme #nav-menu #bigLogo, .bember-theme #nav-menu #smallLogo {
  display: none; }

.hide {
  display: none !important; }
