.link-in-new-tab-icon {
  font-size: 20px;
}

.calendar-wrapper :focus{
  box-shadow: 0 0 0px 1px white !important;
  outline: dotted !important;
  position: relative;
  z-index: 1;
}

/* This is specifically for configs showEditIcons and/or editIconAfterInput (if enabled) */
md-icon.md-icon-create {
  right: 2px !important;
  left: auto !important;
}

md-icon.md-icon-create ~ .show-password-icon {
  right: 36px !important;
}

.show-password-input-container.multiple-md-icons {
  padding-right: 36px !important;
}

/*This fix is for labels that doesn't appear after value input */
md-input-container.md-input-has-value label.label {
  font-size: 75%;
  padding-left: 3px;
}

/*  Native Styling */

.native-tabs {
  border-top: 2px solid;
}

.ios-tabs md-tab-item {
  padding-top: 6px;
}

.ios-tabs md-ink-bar {
  display: none;
}

md-tabs.md-primary.ios-tabs > md-tabs-wrapper {
  background: #f0f0f0;
}

md-tabs[md-align-tabs=bottom].ios-tabs md-tabs-wrapper, md-tabs.ios-tabs md-tabs-wrapper.md-stretch-tabs md-pagination-wrapper, md-tabs.ios-tabs md-tabs-canvas {
  height: 64px;
}

md-tabs.ios-tabs {
  padding-bottom: 64px;
}

md-tabs.ios-tabs > md-tabs-wrapper > md-tabs-canvas > md-pagination-wrapper > md-tab-item {
  width: 33%;
}

md-tabs.md-primary.ios-tabs > md-tabs-wrapper > md-tabs-canvas > md-pagination-wrapper > md-tab-item:not([disabled]) md-icon {
  font-size: 28px;
  padding-bottom: 7px;
  padding-right: 4px;
}

md-tabs.ios-tabs {
  border-color: #aeaeae !important;
  border-width: 1px;
  box-shadow: 0 14px 31px 10px #333333;
}

md-tabs.md-primary.ios-tabs > md-tabs-wrapper > md-tabs-canvas > md-pagination-wrapper > md-tab-item {
  text-transform: inherit;
  font-size: 16px;
  font-weight: 100;
}

/* Orange "warning" buttons need black text to pass WCAG AA contrast test */
.md-raised.md-warn {
  color: #000000 !important;
}
/*    End Native Styling */

/*Header*/
.main-toolbar h1 {
  font-weight: 600;
}

.main-toolbar:not(.android) {
  box-shadow: 0 7px 15px -10px #333333;
}

.native-tabs{
  z-index: 1;
}

.native-tabs md-ink-bar{
  height : 3px;
}

.logo {
  height: 32px;
}

.slogan {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .010em;
  line-height: 12px;
}

.menu-logo {
  max-width: 225px;
}
/*Header*/

/*Sidenav*/

/* When accessibility mode is on, must adjust focused element's size and margin to properly display the outline property */
body[accessibility-mode] md-list-item._md-button-wrap>div.md-button:first-child>.md-button:first-child:focus {
  height: 80%;
  width: 97%;
  margin: 5px;
}

md-content.sidenav .menu-section-logo {
  margin-bottom: 20px;
}

md-content.sidenav .menu-section-worker {
  padding: 16px;
}

md-content.sidenav .menu-section-client {
  padding: 16px;
}

md-content.sidenav .menu-section-client .client-name {
  margin: 0px;
}

md-content.sidenav .menu-section-view-terms-and-conditions {
  margin-top: 20px;
  margin-bottom: 20px;
  text-align: center;
}

md-content.sidenav .menu-section-view-terms-and-conditions a {
  color: white;
  text-decoration: underline; 
}

.main-sidenav md-list-item > .md-button {
  font-weight: 600 !important;
}

.main-sidenav md-divider {
  border-top-color: rgba(255, 255, 255, .13);
}

.md-sidenav-logo-button {
  padding: 0;
  max-width: 80%;
  line-height: 0;
}

.sidenav-logo {
  max-width: 100%;
}

.menu-section-other-links .menu-section-other-links-link  .md-list-item-inner {
  margin-left: 56px;
}

.menu-section-other-links .menu-section-other-links-link  .md-list-item-inner md-icon {
  margin-right: 15px !important;
}

.main-sidenav .bottom-logo {
  bottom: 0;
  width: 100%;
  margin-top: 25px;
}
.main-sidenav .bottom-logo img {
  width: calc(100% - 60px);
}
/*Sidenav*/

/* Utility styles*/
.text-capitalized {
  text-transform: capitalize;
}

.hint {
  position: absolute;
  right: 0;
  bottom: 7px;
  font-size: 12px;
  line-height: 14px;
  transition: all .3s cubic-bezier(.55, 0, .55, .2);
  color: grey;
}

.md-logo-button {
  padding: 0;
  margin-left: 0;
  line-height: 0;
}

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

.address-connector {
  margin: 10px 0;
  font-weight: 600;
}

.block-body-row-title {
  font-weight: 600;
}

.value-heading {
  font-size: 1em;
  margin: 0;
}

.input-desc {
  margin: 10px 0;
  font-size: 14px;
}

.screen-title {
  margin: 18px;
}

.screen-title md-icon {
  font-weight: 700;
  color: #333333;
  margin-right: 8px;
}

.font-weight-500 {
  font-weight: 500;
}

._md-visually-hidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  text-transform: none;
  width: 1px;
  white-space: nowrap;
}

.error-text {
  color: red;
  font-size: 12px;
}

.warning-text {
  color: #DD2C00;
}

.booktrip-wrapper .warning-text {
  font-size: 12px;
}

/* Utility styles*/

/*Overriding*/
html, body {
  width: 100%;
  height: 100%;
  word-wrap: break-word;
}

/*Internet Explorer md-menu-item fix*/
/*This fixes the issue where menu items aren't visible until you hover over them*/
body[browser="ie"] .md-active.md-open-menu-container > md-menu-content > * {
  transition: none !important;
}

.md-errors-spacer {
  display: none;
}

.md-input-invalid .md-errors-spacer {
  display: block;
}

.label {
  font-weight: 600;
  font-size: 12px;
  color: rgba(83, 83, 83, .870588);
}

md-card {
  box-shadow: 0 0 3px 0 rgba(0, 0, 0, .2), 0 1px 1px 0 rgba(0, 0, 0, .14), 0 2px 1px -1px rgba(0, 0, 0, .12);
}
/*As the error div is not displayed, the position of the linear progress bar is shifted up, so this will make it align properly*/
md-autocomplete md-autocomplete-wrap md-progress-linear.md-inline {
  bottom: 16px;
}

h1 {
  margin: 0;
}

li {
  margin: 2px 0;
}

md-toast.md-center {  
  left: 50%;
  transform: translateX(-50%);
}

md-toast .md-toast-content {
  padding: 8px;
  height: auto;
}

.toast-template.error md-icon {
  color: #c52a2a;
  margin-right: 8px;
}

.toast-template.success md-icon {
  color: #0EA261;
  margin-right: 8px;
}

.toast-template.warn md-icon {
  margin-right: 8px;
}

.md-dense .md-button {
  line-height: 26px;
}

.ng-submitted md-select.ng-invalid .md-select-value, md-select.ng-invalid.ng-touched .md-select-value {
  color: rgb(221, 44, 0) !important;
  border-bottom-color: rgb(221, 44, 0) !important;
}

md-select:not([disabled]):focus .md-select-value {
  color: inherit;
}

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

md-select-menu md-content {
  min-height: 40px;
}

md-card {
  margin: 8px 0;
}

._md-datepicker-floating-label._md-datepicker-has-calendar-icon .md-input-message-animation {
  margin-left: 40px;
}

/*Overriding*/

/*Week template*/
.week-template {
  margin-top: 8px;
  margin-bottom: 8px;
}

.week-template > div {
  margin: 0 5px;
  padding: 0 7px;
  background: #E1E1E1;
  border-radius: 2px;
  min-height: 20px;
}

.week-template > div:first-child {
  margin-left: 0;
}

.week-template > .selected {
  background: #3e843f !important;
  color: #000;
}
/*Week template*/

/*Material Icons*/
.md-18 md-icon {
  font-size: 18px;
  width: 18px;
  height: 18px;
}

.md-24 md-icon {
  font-size: 24px;
  width: 24px;
  height: 24px;
}

.md-button.md-36 {
  width: 52px;
  height: 52px;
}

.md-36 md-icon, md-icon.md-36 {
  font-size: 36px;
  width: 36px;
  height: 36px;
}

.md-48 md-icon {
  font-size: 48px;
  width: 48px;
  height: 48px;
}

.md-dark md-icon {
  color: rgba(0, 0, 0, .56) !important;
}

.md-dark.md-inactive md-icon {
  color: rgba(0, 0, 0, .26);
}

.md-light md-icon, md-icon.md-light {
  color: rgba(255, 255, 255, .8);
}

.md-light.md-inactive md-icon {
  color: rgba(255, 255, 255, .3);
}

.md-icon-button.md-no-padding {
  padding: 0;
}

.md-fab.md-accent > md-icon {
  color: rgba(255, 255, 255, .8) !important;
}

.md-success md-icon {
  margin-right: 5px;
  color: #158611 !important;
}

.md-error md-icon {
  margin-right: 5px;
  color: #C52A2A !important;
}

.md-button md-progress-circular svg {
  position: relative;
}

md-icon.md-default-theme, md-icon, md-list.md-default-theme md-list-item > md-icon, md-list md-list-item > md-icon {
  color: inherit;
}

.flip-horizontal {
     -moz-transform: scale(-1, -1);
       -o-transform: scale(-1, -1);
  -webkit-transform: scale(-1, -1);
          transform: scale(-1, -1);
}
/*Material Icons*/

/*styling bug in Angular Material*/
input.disable-placeholder::-webkit-input-placeholder {
  opacity: 0;
}

input.disable-placeholder:-moz-placeholder {
  /* Mozilla Firefox 4 to 18 */
  opacity: 0;
}

input.disable-placeholder::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  opacity: 0;
}

input.disable-placeholder:-ms-input-placeholder {
  /* Internet Explorer 10+ */
  opacity: 0;
}

md-select.md-default-theme.md-light-foreground:not([disabled]):focus .md-select-value, md-select.md-light-foreground:not([disabled]):focus .md-select-value {
  border-bottom-color: rgba(255, 255, 255, .87);
  color: rgba(255, 255, 255, .87);
}

md-icon {
  min-height: 24px;
  min-width: 24px;
}

body:not([accessibility-mode]) button.md-button:focus:not([disabled]) {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.8), 0 0 3px 3px rgba(0, 0, 0, 0.5) !important;
}

body:not([accessibility-mode]) md-list button.md-button:focus:not([disabled]) {
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.8), inset 0 0 0 3px rgba(255, 255, 255, 0.8) !important;
}

body[accessibility-mode] button.md-button:focus:not([disabled]), body[accessibility-mode] button.md-button:focus:not([disabled]) {
  box-shadow: 0 0 0 3px #FFFFFF !important;
}

.md-button, .md-button.md-icon-button {
  min-height: 44px;
}

.md-button.md-icon-button {
  min-width: 44px;
}
/*styling bug in Angular Material*/

/* Display fix for input labels (no ellipsis/text cutoff when label is moved and shrunk */
md-input-container.md-input-focused label:not(.md-no-float),
md-input-container.md-default-theme:not(.md-input-invalid).md-input-has-value label, md-input-container:not(.md-input-invalid).md-input-has-value label {
  overflow: visible;
  white-space: normal;
}
/* Display fix for input labels */

/* General Announcements */
.announcement-badge {
  position: absolute;
  width: 18px;
  height: 18px;
  -webkit-border-radius: 100%;
     -moz-border-radius: 100%;
          border-radius: 100%;
  top: 6px;
  left: 21px;
  background: green;
  font-size: 10px;
  color: white;
  line-height: 14px;
  border: 2px solid white;
}

/* General Announcements */

/*Feedback Form*/
#feedbackForm ng-messages, #book_trip_form .ng-messages {
  color: rgb(221, 44, 0);
  font-size: 12px;
}

/*Social Media Icons Starts*/

.social-media-icons {
  font-size: 14px;
  margin-top: 8px;
}

.social-media-icons a {
  padding: 5px 5px 5px 26px;
  color: #FFFFFF !important;
  border-radius: 3px;
  margin-right: 20px;
  display: inline-block;
}

.twitter-icon {
  background: url("../Images/twitter.png") no-repeat 5px 5px #1B95E3;
}

.facebook-icon {
  background: url("../Images/facebook.png") no-repeat 1px 1px #395C98;
}

/*Social Media Icons Ends*/
/*Feedback Form*/

/*General Information Dialog*/

.lead {
  margin: 0px;
}

/*General Information Dialog ends*/

/*Skip Link*/
ul.skip-links {
  margin: 0;
  padding: 0;
}

ul.skip-links li {
  list-style: none;
  margin: 0;
  padding: 0;
}

ul.skip-links li a {
  background-color: #FFFFFF;
  display: block;
  margin: .5em 0 .5em .5em;
  opacity: 0;
  left: 0;
  position: absolute;
  text-decoration: none;
  top: 0;
  width: 92%;
  -webkit-transition: opacity .15s linear;
     -moz-transition: opacity .15s linear;
          transition: opacity .15s linear;
}

ul.skip-links li a:focus {
  background-color: #FFFFFF !important;
  opacity: 1;
  z-index: 2;
}
/*Skip Link*/

/*Alerts*/

/* .alert {
  border-width: 1px;
  border-style: solid;
  border-right: none;
  border-left: none;
}
 */

/*Alerts*/

/*DatePicker*/

md-input-container.datepicker-input-container {
  display: block;
  min-width: 125px !important;
  padding-left: 0px;
  padding-right: 0px;
}

md-input-container.datepicker-input-container._md-datepicker-floating-label._md-datepicker-has-calendar-icon > label:not(.md-no-float):not(.md-container-ignore) {
  width: calc(100% - 40px);
  padding-left: 40px;
}

md-input-container.md-input-has-value.datepicker-input-container._md-datepicker-floating-label._md-datepicker-has-calendar-icon > label:not(.md-no-float):not(.md-container-ignore) {
  padding-left: 52px;
}

md-input-container.datepicker-input-container > md-datepicker .md-datepicker-triangle-button.md-button.md-icon-button {
  margin-right: 10px;
}

md-input-container.datepicker-input-container._md-datepicker-floating-label > md-datepicker .md-datepicker-button {
  margin: 0px;
  top: 0px;
  left: 2px;
  padding: 0px;
  width: auto;
  height: auto;
  position: absolute;
  z-index: 1;
}

md-input-container.datepicker-input-container label, md-input-container.datepicker-input-container:not(.md-input-invalid).md-input-has-value label {
  padding-left: 50px;
  left: 0px !important;
}

md-input-container.datepicker-input-container md-datepicker .md-datepicker-calendar-pane {
  display: none;
}

md-input-container.datepicker-input-container md-datepicker .md-datepicker-input-container {
  width: 100%;
  padding-left: 36px;
  box-sizing: border-box;
  margin-left: 0px;
}

.datepicker-input-container md-datepicker .md-datepicker-input-container input {
  max-width: none;
  min-width: 0px;
}

.md-datepicker-calendar-icon {
  color: rgba(0, 0, 0, .54);
  margin: 0;
}

.md-datepicker-input-mask {
  height: 0;
}
/*DatePicker*/

/*Date Dropdown*/

md-input-container.date-dropdown {
  padding: 2px;
}

md-input-container.date-dropdown label {
  padding: 2px !important;
}

/*Date Dropdown*/

/*AutoComplete Wrapper*/
.autocomplete-wrapper {
  position: relative;
  margin-top: 18px;
  margin-bottom: 18px;
}

.autocomplete-wrapper md-autocomplete md-autocomplete-wrap md-progress-linear.md-inline {
  bottom: -2px;
}

.autocomplete-wrapper md-autocomplete {
  padding-left: 36px;
}

.autocomplete-wrapper md-input-container {
  margin: 0;
}

.autocomplete-wrapper > md-icon {
  position: absolute;
  top: 8px;
  left: 3px;
}
/*AutoComplete Wrapper*/

/*Signin-Register*/
.signin-toolbar {
  min-height: 48px;
  max-height: 48px;
}

.signin-toolbar .md-logo-button {
  display: inline-flex;
  margin-left: 2vw;
}

.signin-toolbar .md-logo-button, .signin-toolbar .md-logo-button img {
  min-height: 32px;
  height: 32px;
  max-height: 32px;
}

.signin-register {
  position: relative;
  width: 90%;
  margin-top: 60px;
  margin-bottom: 16px;
}

.signin-register md-content {
  background: #FFFFFF;
}

.signin-register-welcome {
  box-sizing: border-box;
  text-align: center;
  font-weight: bold;
  padding-right: 10px;
  padding-left: 10px;
  margin-top: 60px;
}

.signin-register-small-margin {
  margin-top: 2px !important;
  margin-bottom: 4px !important;
}

.signin-register-welcome-small-margin {
  margin-top: 2px !important;
}

.signin-register-welcome-heading {
  font-size: 2.5em;
}

.signin-register-welcome-text {
  font-size: 1em;
}

.fab-register-btn {
  position: absolute;
  right: 10px;
  top: 30px;
}

.client-id-input-container input, .password-input-container input {
  border-width: 1px;
  border-style: solid;
}

.signin-ancillary-link {
  margin-top: 10px;
  font-size: 13px;
}
/*Signin-Register*/

/*Mobile View Trips*/

/* used to trigger ng-enter and ng-enter-active classes */
.mobile-month-wrapper.ng-enter {
  -webkit-transition: none .5s ease-in-out;
     -moz-transition: none .5s ease-in-out;
      -ms-transition: none .5s ease-in-out;
       -o-transition: none .5s ease-in-out;
          transition: none .5s ease-in-out;
}

.mobile-month-wrapper.previous-month {
  position: relative;
  height: 8px;
  /* 48px height of original "Load More Data" Button,  New introduced margin of 40px, difference to create no-jump is 8px */
  overflow-y: hidden;
}

.mobile-month-wrapper.previous-month {
     -moz-transition: height 1s ease;
  -webkit-transition: height 1s ease;
       -o-transition: height 1s ease;
          transition: height 1s ease;
}

.mobile-month-wrapper.previous-month .mobile-month-inner-wrapper {
  position: absolute;
  bottom: 0;
  width: 100%;
}

.mobile-month-wrapper { /* Firefox Parallax Fix, primary cause in 3d space collapsing in Firefox */
  transform-style: preserve-3d;
}

.mobile-month-inner-wrapper {
  transform-style: preserve-3d; /* Firefox Parallax Fix, primary cause in 3d space collapsing in Firefox */
}

.mobile-week { /* Firefox Parallax Fix, background-color is applied to layer header images correctly since Firefox does not support "perspective" and "overflow: hidden" correctly on child elements */
  background-color: #FFFFFF;
}

.mobile-week:last-child {
  padding-bottom: 80px;
}

.mobile-month-wrapper.ng-enter img.parallax-wrapper {
  -webkit-transition: opacity .5s ease-in-out;
     -moz-transition: opacity .5s ease-in-out;
      -ms-transition: opacity .5s ease-in-out;
       -o-transition: opacity .5s ease-in-out;
          transition: opacity .5s ease-in-out;
}

.mobile-month-wrapper:last-child .mobile-week {
  -webkit-transition: opacity .5s ease-in-out;
     -moz-transition: opacity .5s ease-in-out;
      -ms-transition: opacity .5s ease-in-out;
       -o-transition: opacity .5s ease-in-out;
          transition: opacity .5s ease-in-out;
}

.mobile-month-wrapper:last-child .mobile-week {
  opacity: 0;
}

.mobile-month-wrapper:last-child .mobile-week.init-week {
  opacity: 1;
}

#trips-list-view {
  perspective: 1px;
  perspective-origin: center top;
  background: #FFFFFF;
}

.mobile-month-header {
  height: 50px;
  margin: 0;
  padding: 20px 0;
  transform-style: preserve-3d; /* Firefox Parallax Fix, see other transform-style comment above */
  overflow: hidden;
  position: relative;
}

body[browser="firefox"] .mobile-month-wrapper, /* Firefox Parallax Fix, this causes the z-index inline style to take effect to address the parallax issue in Firefox */
body[browser="safari"] .mobile-month-wrapper { 
  position: relative;
}

body[browser="firefox"] .mobile-month-header, /* Firefox Parallax Fix, this is the seconndary cause in Firefox collapsing its 3d space applied via "perspective" CSS rule */
body[browser="safari"] .mobile-month-header { 
  overflow: visible;
}

.mobile-month-wrapper .load-more { /* Firefox Parallax Fix, see other parallax comment fix above */
  background-color: #FFFFFF;
}

.mobile-month-header .parallax-wrapper {
  width: 100%;
  transform: translateZ(-1px) scale(2);
}

/* IE Parallax fallback, IE does not support "translateZ" for the parallax effect, so we fallback to not using
   "scale" and "translateZ", then we center the image so that the subject of the image is more likely to be visible */
body[browser="ie"] .mobile-month-header .parallax-wrapper {
  transform: translate(0, -50%);
}

.mobile-month-header .mobile-month-title {
  color: #FFFFFF;
  left: 25px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.mobile-day-wrapper {
  position: relative;
  min-height: 110px;
  padding-top: 16px;
}

.mobile-weekrange {
  padding: 30px 0 0 75px;
}

.mobile-weekrange-header {
  font-weight: inherit;
  margin: auto;
}

.mobile-day-calendar {
  font-weight: normal;
  position: absolute;
  text-align: center;
  width: 60px;
  /*color: #CC003D;*/
}

.mobile-day-calendar-number {
  font-size: 24px;
  line-height: 18px;
}

.mobile-day-trips {
  padding: 4px 16px 4px 60px;
}

.mobile-day-trips md-icon {
  font-size: 18px;
  color: #FFFFFF;
}

.mobile-single-trip {
  position: relative;
  cursor: pointer;
  margin-bottom: 16px;
  transition: box-shadow 0.3s, border-radius 0.3s;
}

.mobile-single-trip:focus {
  box-shadow: 0 0 3px 3px rgba(0, 0, 0, 0.5);
  outline: none;
}

.mobile-single-trip:focus .mobile-single-trip-wrapper {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.8);
}

.mobile-single-trip-none {
  font-size: 20px;
  text-align: right;
}

.mobile-single-trip-wrapper {
  min-height: 120px;
  overflow: auto;
  border-radius: 4px;
  background: #64686D;
  width: 100%;
  background-size: cover;
  background-position: center;
  padding-top: 10px;
  padding-bottom: 10px;
  transition: border-radius 0.3s, box-shadow 0.3s;
}

.mobile-single-trip .ellipsis-text {
  width: 95%;
  /*for the ellipses*/
}

.mobile-single-trip .mobile-single-trip-item{
  color: #FFFFFF;
  font-size: 13px;
  z-index: 2;
  padding-left: 10px;
}

.mobile-single-trip .trip-status {
  position: absolute;
  z-index: 2;
  color: #FFFFFF;
  border-radius: 50%;
  right: 10px;
  bottom: 10px;
  height: 30px;
  width: 30px;
  padding: 0;
  text-align: center;
  line-height: 30px;
}
/* parallax directive is responsible for setting opacity from 0 to 1 */

/*Scheduled, Complete*/
.trip-status.S {
  background-color: green;
}

.trip-status.P {
  background-color: black;
}
/*Unscheduled*/
.trip-status.U {
  background-color: orange;
  color: black !important; /* must set as important, as in some circumstances but not all may be overridden */
}
/*No Show*/
.trip-status.NS, .trip-status.NT {
  background-color: #959494;
  color: black !important; /* must set as important, as in some circumstances but not all may be overridden */
}
/*Missed trip*/
.trip-status.NM {
  background-color: #FFE316;
  color: black !important; /* must set as important, as in some circumstances but not all may be overridden */
}
/*Arrived*/
.trip-status.A {
  background-color: #FF00E4;
  color: black !important; /* must set as important, as in some circumstances but not all may be overridden */
}
/*Cancelled*/
.trip-status.CA, .trip-status.CL, .trip-status.CD, .trip-status.CS, .trip-status.CC, .trip-status.CE {
  background-color: red;
  color: black !important; /* must set as important, as in some circumstances but not all may be overridden */
}
/*Refused*/
.trip-status.REF {
  background-color: maroon;
  color: white !important; /* must set as important, as in some circumstances but not all may be overridden */
}
/*Phantom trips*/
.trip-status.PN {
  background-color: #1B49B6;
  color: #FFFFFF;
}

.mobile-month-selector {
  font-size: 16px;
  font-weight: 700;
  margin-right: 6px;
}

.dropdown-wrapper-text {
  margin-right: 5px;
}

.dropdown-wrapper .dropdown-caret:after {
  display: block;
  content: "\25BC";
  position: relative;
  top: 1px;
  speak: none;
  -webkit-transform: scaleY(.6) scaleX(1);
          transform: scaleY(.6) scaleX(1);
}

.btn-today > span {
  position: absolute;
  text-align: center;
  font-weight: 600;
  font-size: 11px;
  top: 15px;
  left: 13px;
  width: 14px;
  height: 11px;
  line-height: 14px;
}
/*Mobile View Trips*/

/*Desktop View Trips*/
.calendar-days {
  padding: 10px 0;
  font-weight: 600;
}

.desktop-month-selector {
  display: inline-block;
  text-align: center;
  width: 100%;
}

.desktop-month-selector button.md-icon-button {
  text-align: center;
}

.desktop-month-selector #desktop_month {
  display: inline-block;
  margin-top: 6px;
  min-width: 150px;
  overflow: hidden;
  position: relative;
  text-align: center;
  text-overflow: ellipsis;
  top: 6px;
  white-space: nowrap;
}

.calendar-day-wrapper {
  outline: 1px solid #eee;
  cursor: pointer;
  overflow-y: auto;
  background: #FFFFFF;
}

.calendar-date-trip {
  padding: 5px;
}

.todays-date {
  outline-width: 2px !important;
  outline-style: solid !important;
  position: relative;
}

.todays-date .calendar-date {
  color: #FFFFFF !important;
}

.current-week {
  border-top: 2px solid red;
}

.current-week .calendar-day-wrapper {
  border-top: none;
}

.calendar-date-trip-content {
  font-size: 13px;
  position: relative;
}

.calendar-date-trip .trip-status {
  width: 8px;
  height: 8px;
  margin-right: 3px;
  border-radius: 50%;
}

.create-booking-button {
  position: fixed;
  right: 25px;
  bottom: 25px;
  z-index: 50;
}

.not-current-month {
  background-color: #F5F5F5 !important;
  /*color: #CECECE !important;*/
}

.not-current-month .calendar-date {
  color: #5C5C5C !important;
  background: #F5F5F5 !important;
}

.calendar-date-trip:hover, .calendar-date-trip:focus {
  background: rgb(183, 188, 192) !important;
}
/*Desktop View Trips*/

/*Breadcrumb*/
.breadcrumb {
  padding: 8px 16px;
  margin: 0 auto 8px auto;
  background-color: #EDEFF0;
  border-radius: 4px;
  display: block;
}

.breadcrumb:after {
  content: "";
  display: table;
  clear: both;
}

.breadcrumb li {
  display: inline-block;
  margin: 5px 40px 5px 0;
  position: relative;
}

.breadcrumb li::after {
  /* this is the separator between items */
  position: absolute;
  content: "";
  background: url(../images/cd-custom-separator.png) no-repeat center center;
  width: 24px;
  height: 24px;
  top: -1px;
  right: -35px;
}

.breadcrumb em {
  vertical-align: middle;
}

.breadcrumb li:first-of-type {
  /* hide separator after the last item */
  margin-left: 0;
}

.breadcrumb li:last-of-type {
  margin-right: 0;
}

.breadcrumb li:last-of-type::after {
  /* hide separator after the last item */
  display: none;
}

.breadcrumb li a {
  /* single step */
  display: inline-block;
  color: #2C3F4C;
}

.breadcrumb li a:hover {
  text-decoration: underline;
}
/*Breadcrumb*/

/*Table*/
table.custom {
  width: 100%;
  text-align: left;
}

table.custom th {
  padding: 10px;
  border-bottom: 1px solid #F1F1F1;
  white-space: nowrap;
}

table.custom td {
  padding: 10px;
  border-bottom: 1px solid #F1F1F1;
}

table.custom tbody tr:last-of-type td {
  border-bottom: none;
}

.row-header-cell {
  font-weight: normal;
}
/*Table*/

/*Imminent Trips*/
.imminent-arrival-banner-wrapper {
  padding-bottom: 3px;
  min-height: 56px;
  box-shadow: 0 7px 15px -10px #333333;
  z-index: 2;
}

md-icon.trip-details-pickup {
  color: #006600;
}

md-icon.trip-details-dropoff {
  color: #800000;
}

.card-pickup-title {
  margin-left: 12px;
}

.imminent-card {
  cursor: pointer;
  min-height: 60px;
}

.imminent-bus-details-icon {
  margin-left: -9px;
  margin-right: 0;
}

.bus-details-svg {
  margin-left: -13px;
  margin-right: 4px;
}

#imminent-dropoff {
  z-index: 10;
  position: absolute;
  width: 100%;
}

#imminent-dropoff > div {
  padding: 2px 5px;
  background-color: white;
  margin: 2px;
  font-size: 0.8em;
}
/*Imminenant Trips*/

/* Imminent Trip Bar */
.bootstrap-style-progress-bar {
  padding-bottom: 0;
}

@-webkit-keyframes progress-bar-stripes {
  from {
    background-position: 40px 0;
  }
  to {
    background-position: 0 0;
  }
}

@-o-keyframes progress-bar-stripes {
  from {
    background-position: 40px 0;
  }
  to {
    background-position: 0 0;
  }
}

@keyframes progress-bar-stripes {
  from {
    background-position: 40px 0;
  }
  to {
    background-position: 0 0;
  }
}

.progress {
  height: 20px;
  margin-bottom: 20px;
  overflow: hidden;
  background-color: #F5F5F5;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
          box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
}

.progress-bar {
  height: 56px;
  float: left;
  font-size: 12px;
  line-height: 20px;
  color: #FFFFFF;
  text-align: center;
  background-color: green;
  -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
          box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
  -webkit-transition: width .6s ease;
       -o-transition: width .6s ease;
          transition: width .6s ease;
}

.progress-striped .progress-bar, .progress-bar-striped {
  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent) !important;
  background-image:      -o-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent) !important;
  background-image:         linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent) !important;
  -webkit-background-size: 40px 40px !important;
          background-size: 40px 40px !important;
}

.progress.active .progress-bar, .progress-bar.active {
  -webkit-animation: progress-bar-stripes 2s linear infinite;
       -o-animation: progress-bar-stripes 2s linear infinite;
          animation: progress-bar-stripes 2s linear infinite;
}

.progress-bar-success {
  background-color: #5CB85C;
}

.progress-striped .progress-bar-success {
  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
  background-image:      -o-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
  background-image:         linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
}

.progress-bar-info {
  background-color: #5BC0DE;
}

.progress-striped .progress-bar-info {
  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
  background-image:      -o-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
  background-image:         linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
}

.progress-bar-warning {
  background-color: #F0AD4E;
}

.progress-striped .progress-bar-warning {
  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
  background-image:      -o-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
  background-image:         linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
}

.progress-bar-danger {
  background-color: #D9534F;
}

.progress-striped .progress-bar-danger {
  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
  background-image:      -o-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
  background-image:         linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
}
/* Imminent Trip Bar */

/*View Trips Details*/
.trip-details {
  background: rgb(250, 250, 250);
}

.cancel-trip-warning {
  padding-top: 5px;
}

.pastDate .trip-notification-btn {
  display: none;
}
/* iOS background fix */
md-dialog.trip-details md-content section {
  background: white;
}
/* End iOS background fix */
.trip-details-map {
  min-height: 200px;
  position: relative;
  z-index: 5;
  box-shadow: 0 8px 25px -14px #333333;
  overflow: hidden;
}

.booking-map {
  min-height: 300px;
  height: 92%;
  width: 100%;
}

.booking-map-instruction {
  margin: 5px 0 0 0;
}

.fit-to-parent {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
}

.trip-details .trip-status {
  width: 21px;
  min-width: 21px;
  height: 21px;
  border-radius: 50%;
  line-height: 21px;
  padding: 0;
  text-align: center;
  margin: 0 10px 0 -4px;
  color: #FFFFFF;
  font-size: 11px;
  border: 1px solid #FFFFFF;
}

.trip-details-overdraft {
  color: red;
  font-size: 12px;
}

.print-trip-details {
  display: none;
}
/*View Trips Details*/

/*View Subscriptions*/
.view-subscriptions-wrapper {
  padding: 8px;
}
.view-subscriptions-wrapper md-card {
  min-height: 131px;
  cursor: pointer;
}

.view-subscriptions-wrapper md-card.no-info {
  min-height: auto;
  cursor: default;
}

.view-subscriptions-wrapper md-card.no-info md-card-header-text div {
  margin-right: 10px;
}

.recurring-trips-toolbar {
  height: auto;
  max-height: inherit;
}
/*View Subscriptions*/

/* Trip History */
.trip-history-header-logo {
  display: none;
}

/*EWallet*/

#payment-profiles-delete-confirmation {
  padding-left: 50px;
}

#payment-profiles-title {
  padding-left: 30px;
}

#payment-profiles-list {
  max-height: 250px;
  overflow-y: scroll;
}

#payment-profiles-table {
  padding-top: 30px;
}

#payment-profiles-table tr {
  padding-top: 10px;
  padding-bottom: 10px;
}

.payment-profiles-compact {
  margin: 0px;
  padding: 10px !important;
}

.payment-profile-radio-adjust {
  top: 7px;
  left: 15px;
}

.payment-profile-expired {
  color: red;
}

.payment-profile-icon {
	height: 30px !important;
	width: 30px !important;
}

.view-ezwallet-wrapper {
  background: #FFFFFF;
  padding: 8px;
}

.view-ezwallet-wrapper .purchased-pass {
  padding: 3px;
}

.transit-report-totals {
  font-weight: 600;
  font-size: 19px;
  text-align: left;
  border-top: 1px solid #F1F1F1;
}

.transaction-history-payment-detail-wrapper div:not(:first-child) {
  padding-top: 8px;
}

.transaction-history-payment-detail {
  white-space: nowrap;
  text-align: justify;
}

.transaction-history-payment-detail:after {
  content: "";
  display: inline-block;
  width: 100%;
}

.custom.dynamic {
  transition: filter .2s linear;
}

.custom.dynamic.updating {
  filter: blur(2px);
}

.custom-list-radio-group md-radio-button {
  padding: 30px 20px;
  margin-bottom: 0;
}

.custom-list-radio-group md-radio-button .md-label {
  display: block;
}

.custom-list-radio-group md-radio-button .md-container {
  left: 20px;
}

.custom-list-radio-group.md-checked {
  background: rgba(176, 176, 176, .16);
}

.custom-list-radio-group .pass-type-name {
  padding: 0 10px;
}

.custom-list-radio-group .pass-amount {
  font-size: 15px;
  font-weight: 600;
}

.custom-list-radio-group .pass-name {
  font-size: 12px;
  font-weight: 600;
  margin-top: 5px;
}

.terms-conditions-link {
  margin-left: 5px;
}

.transit-report-header th {
  text-align: left;
}

.processing-transaction-dialog p {
  text-align: center;
}

.processing-transaction-dialog md-progress-circular {
  margin: auto;
}

/*EWallet*/

/* Phone Number styling Start */
.phone-input input::-webkit-input-placeholder {
  color: transparent;
}

.phone-input input::-moz-placeholder {
  color: transparent;
}

.phone-input input:-ms-input-placeholder {
  color: transparent;
}

.phone-input input:-moz-placeholder {
  color: transparent;
}
/* Phone Number styling End */

/* Book Form */
h2.section-header {
  font-size: inherit;
  font-weight: inherit;
}

.recent-booking-select md-select-menu md-content md-option {
  height: auto;
}

.recent-booking-select md-select-menu md-content md-option div.md-text {
  white-space: normal;
}

fieldset {
  border: 1px solid #D8D8D8;
  border-radius: 4px;
  min-width: 0;
}

fieldset ~ fieldset {
  margin-top: 18px;
}

.recent-booking-select md-option {
  padding: 10px 16px 10px 16px;
  border-bottom: 1px solid #E4E4E4;
}

.booktrip-wrapper {
  overflow-x: hidden;
}

.booktrip-inner-wrapper {
  padding: 8px;
  background: #FFFFFF;
  box-shadow: 0 8px 25px -10px #333333;
  margin: 0;
}

.pick-a-time-text {
  margin-top: 18px;
  font-size: 18px;
}

#passengers-list {
  padding-top: 20px;
}

#passengers-list md-list {
  padding-top: 0;
}

.block {
  padding-bottom: 15px;
}

.block ~ .block {
  padding-top: 15px;
}

.block ~ .block.last-block-message {
  padding-top: 15px;
  padding-bottom: 15px;
}

.block-header {
  padding: 16px 8px;
}

.block-body {
  padding: 0 8px;
}

.block-header md-checkbox, .block-header md-select {
  margin: 0 0 0 20px;
  color: rgba(0, 0, 0, .87);
}

.block-header md-select-value {
  padding: 0;
  min-height: 20px;
}

.block-header md-icon {
  margin-right: 8px;
}

.booktrip-btn {
  padding: 5px;
  width: 200px;
}

.block-body-row {
  padding: 8px 0;
}

.block-body-row ol, .block-body-row ul {
  margin: 0;
  padding-left: 16px;
}

.block-body-row > span > md-icon {
  margin-right: 6px;
}

#solutionsContainer md-card {
  margin: 0;
}

#solutionsContainer md-card-content {
  padding: 10px;
}

#solutionsContainer md-progress-circular.md-default-theme path, #solutionsContainer md-progress-circular path {
  stroke: #FFFFFF;
}

.fx-itin-info md-icon {
  color: #666;
}

.fx-line {
  color: #FFFFFF;
  padding: 0 5px;
  min-width: 24px;
  text-align: center;
}

.fx-itinerary-details-leg {
  min-height: 60px;
  position: relative;
}

.fx-leg-line {
  border-left-width: 4px;
  position: relative;
}

.fx-leg-line.walking {
  border-left-style: dotted;
  border-left-color: green;
}

.fx-walking-instruction {
  padding: 5px 15px;
}

.fx-walking-summary {
  padding: 5px 0;
}

.fx-leg-line.dummy-same-stop {
  border-color: transparent;
}

.fx-leg-line.bus, .leg-line.stay-in-seat-transfer {
  border-left-style: solid;
}

.fx-leg-title {
  font-weight: 500;
  font-size: 15px !important;
}

.fx-leg-description {
  font-size: 13px;
}

.fx-leg-description > div {
  margin-bottom: 10px;
}

.fx-leg-start-circle {
  width: 8px;
  height: 8px;
  border: 6px solid;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: -12px;
  background: #FFFFFF;
  transform: rotate(-45deg);
}

.return-trip-options-container, .modify-passwords-container, .confirm-cancellation-wrapper, .confirm-contact-driver-wrapper {
  -webkit-transition: opacity .5s ease-in-out;
     -moz-transition: opacity .5s ease-in-out;
      -ms-transition: opacity .5s ease-in-out;
       -o-transition: opacity .5s ease-in-out;
          transition: opacity .5s ease-in-out;
}

.return-trip-options-container.ng-enter, .modify-passwords-container.ng-enter, .confirm-cancellation-wrapper.ng-enter, .confirm-contact-driver-wrapper.ng-enter {
  opacity: 0;
}

.return-trip-options-container.ng-enter.ng-enter-active, .modify-passwords-container.ng-enter.ng-enter-active, .confirm-cancellation-wrapper.ng-enter.ng-enter-active, .confirm-contact-driver-wrapper.ng-enter.ng-enter-active {
  opacity: 1;
}

.return-trip-options-container.ng-leave, .modify-passwords-container.ng-leave, .confirm-cancellation-wrapper.ng-leave, .confirm-contact-driver-wrapper.ng-leave {
  opacity: 1;
}

.return-trip-options-container.ng-leave.ng-leave-active, .modify-passwords-container.ng-leave.ng-leave-active, .confirm-cancellation-wrapper.ng-leave.ng-leave-active, .confirm-contact-driver-wrapper.ng-leave.ng-leave-active {
  opacity: 0;
}

.unsched-trip-title {
  margin-top: 20px;
  margin-bottom: 10px;
}

/* Label for return trip in confirm trip page */
.return-trip-label {
  margin-top: 10px; 
  margin-bottom: 10px;
  text-decoration: underline; 
  font-size: 17px;
}

.paraService-image {
  height: 80px;
  width: 80px;
  padding-right: 20px;
}

.confirm-trip-fare-options > div {
  padding-right: 10px;
}

.confirm-trip-dialog-content {
  padding: 15px 24px 0px 24px !important;
}

.confirm-trip-dialog-button {
  padding: 5px 15px 5px 15px !important;
}

.confirm-trip-warning {
  margin-bottom: 15px;
  font-style: oblique;
}

.multi-modal-solutions {
  width: 100%;
}

.multi-modal-solution-headers th {
  text-align: left;
}

.multi-modal-solutions .modes-of-service {
  white-space: nowrap;
}

.multi-modal-solutions-mobile > md-card > md-card-content > div {
  padding: 5px;
}

.multi-modal-fixed-route {
  border: 2px solid;
  -webkit-border-radius: 400px;
  -moz-border-radius: 400px;
  border-radius: 400px;
  padding: 0.5em;
  min-width: 2.5em;
  font-weight: bold;
  text-align: center;
}

.multi-modal-details-mobile .multi-modal-details-summary {
  padding: 20px;
}

.multi-modal-details-header {
  font-weight: bold;
}

.multi-modal-details-leg > div {
  padding: 10px 0px 10px 20px;
}

.multi-modal-details-leg > .multi-modal-details-leg-service {
  padding-top: 20px;
  text-align: left;
}

.multi-modal-details-mobile .modes-of-service {
  padding-bottom: 15px;
}

md-switch .md-thumb {
  background-color: #666666;
}

/*Hide the asterisk created by angular*/
md-input-container label:not(.md-container-ignore).md-required:after, md-input-container:not(.md-input-has-value) md-select.ng-required:not(.md-no-asterisk) .md-select-value span:first-child:after, md-input-container:not(.md-input-has-value) md-select[required]:not(.md-no-asterisk) .md-select-value span:first-child:after, md-select.ng-required.ng-invalid:not(.md-no-asterisk) .md-select-value span:first-child:after, md-select[required].ng-invalid:not(.md-no-asterisk) .md-select-value span:first-child:after {
  content: "";
}

/* Altering AngularJS css animations of input labels
   With these changes, the label element's width no longer shrinks, which makes line breaks less common.
   Additionally, moved the label down another 2px from standard to avoid certain clipping issues*/
md-input-container .md-placeholder, md-input-container label:not(.md-no-float):not(.md-container-ignore) {
  transition: transform .4s cubic-bezier(.25,.8,.25,1),-webkit-transform .4s cubic-bezier(.25,.8,.25,1), font-size .4s cubic-bezier(.25,.8,.25,1);
}

md-input-container.md-input-focused label:not(.md-no-float), md-input-container.md-input-has-placeholder label:not(.md-no-float), md-input-container.md-input-has-value label:not(.md-no-float) {
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
  transition: transform .4s cubic-bezier(.25,.8,.25,1),-webkit-transform .4s cubic-bezier(.25,.8,.25,1), font-size .4s cubic-bezier(.25,.8,.25,1);
  font-size: 75%;
}
/* Altering AngularJS css animations of input labels */

#solution-footer-text {
  text-align: center;
}

.solution-footer-v2 {
  padding-top: 10px;
}

.notification-switch {
  white-space: pre-wrap;
  line-height: inherit;
  height: max-content;
}

.notification-switch .md-label {
  width: 80%;
}

.same-date-trips {
  font-size: 13px;
}

.same-date-separator {
  padding-top: 5px;
  margin-top: 5px;
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: rgb(180, 180, 180);
}

.same-date-trips .md-list-item-text {
  line-height: 15px;
}

.same-date-trips .same-date-trips-time {
  margin-top: 10px;
}

/* End Book Form */

/* File Drop */
.drop-box {
  background: #F8F8F8;
  border: 5px dashed #DDDDDD;
  width: 200px;
  height: 65px;
  text-align: center;
  padding-top: 25px;
  margin: 10px 10px 10px 0;
}
/* File Drop */

/*Subscription Calendar*/
.subscription-calendar-wrapper {
  background: #FFFFFF;
}

.calendar .calendar-week .date-has-subscription {
  font-weight: 600;
}

.subscription-calendar-inner-wrapper {
  margin: 0 5px 5px 5px;
}

.subscription-calendar-month-selector {
  border-bottom: 1px solid #EEEEEE;
}

.subscription-calendar .calendar-day-wrapper {
  overflow-y: hidden;
  border: none;
}

.subscription-calendar .calendar-week:last-child .calendar-day-wrapper {
  border-bottom: none;
}
/*Subscription Calendar*/

/*My Profile*/
.profile-dialog-content {
  display: flex;
}

.profile-dialog-content .my-details-section {
  order: 0;
  -webkit-order: 0;
}

.profile-dialog-content .contact-info-section {
  order: 1;
  -webkit-order: 1;
}

.profile-dialog-content .profile-change-info-section {
  order: 2;
  -webkit-order: 2;
}

.profile-dialog-content .client-home-section {
  order: 3;
  -webkit-order: 3;
}

.profile-dialog-content .other-address-section {
  order: 4;
  -webkit-order: 4;
}

.profile-dialog-content .tnc-providers-section {
  order: 5;
  -webkit-order: 5;
}

.profile-dialog-content .para-service-types-section {
  order: 6;
  -webkit-order: 6;
}

.profile-dialog-content .modify-password-section {
  order: 7;
  -webkit-order: 7;
}

.tnc-terms-tab {
  margin-bottom: 20px;
}
  
.subscribe-to-all-tnc {
  margin-top: 20px;
  margin-bottom: 20px;
} 

.not-receiving-callbacks {
  padding: 2px;
}

.contact-notif-info-heading {
  padding-bottom: 10px;
}

/* Contact Info */
.contact-info-fields {
  min-height: 70px; /* Helps empty containers imitate the height of the contact-info container when the input field is shown. */
}

.contact-info-container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-self: stretch;
}

.contact-info-container > .contact-info,
.contact-info-container > .notification-setting {
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
  flex: 1;
  margin: 0 5px;
}

.hide-contact-info > .contact-info-container > .contact-info {
  display: none;
}

.hide-notification-settings > .contact-info-container > .notification-setting {
  display: none;
}

.contact-info-checkbox {
  margin-top: 20px;
  margin-left: 4px;
}

.contact-info-checkbox .md-label {
  margin-top: 2px;
}

.info-button {
  min-width: unset;
  min-height: unset;
  margin-top: 0px;
  margin-bottom: 0px;
}
/*My Profile*/

/*OnBoarding*/
.vh100 {
  width: 100%;
  height: 100vh;
  /*background-attachment: fixed;*/
  background-position: top center;
  background-size: cover;
}

.onboarding > div {
  position: relative;
  width: 100%;
  height: 100vh;
  /*background-attachment: fixed;*/
  background-position: top center;
  background-size: cover;
  box-shadow: inset 0 0 0 #111111;
  box-sizing: border-box;
}

.box1 {
  background-image: url(../images/onboarding/image1.jpg);
}

.box2 {
  background-image: url(../images/onboarding/image2.jpg);
}

.box3 {
  background-image: url(../images/onboarding/image3.jpg);
}

.box4 {
  background-image: url(../images/onboarding/image4.jpg);
}

.box5 {
  background-image: url(../images/onboarding/image5.jpg);
}

.box6 {
  padding: 50px;
}

.box7 {
  background-image: url(../images/onboarding/image6.jpg);
}

.text_HL {
  min-height: 100vh;
  height: auto;
  padding: 50px 10px 0 50px;
  background-image: url(../images/onboarding/corner_shade.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-color: rgba(0, 0, 0, .74);
}

.onboarding-box-header {
  text-align: left;
  color: #FFFFFF;
  font-family: "Open Sans Condensed", sans-serif;
  font-size: 34px;
  line-height: 120%;
  text-shadow: 3px 3px 12px rgba(0, 0, 0, 1.00);
}

.onboarding-box-content {
  margin-top: 1em;
  color: #FFFFFF;
  line-height: 150%;
  text-shadow: 0 0 0;
  font-size: 20px;
}

.onboarding.onboarding-right-text .onboarding-box-content {
  margin-top: 0;
}
/*!
 * fullPage 2.7.8
 * https://github.com/alvarotrigo/fullPage.js
 * MIT licensed
 *
 * Copyright (C) 2013 alvarotrigo.com - A project by Alvaro Trigo
 */
html.fp-enabled, .fp-enabled body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  /*Avoid flicker on slides transitions for mobile phones #336 */
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

#superContainer {
  height: 100%;
  position: relative;
  /* Touch detection for Windows 8 */
  -ms-touch-action: none;
  /* IE 11 on Windows Phone 8.1*/
      touch-action: none;
}

.fp-section {
  position: relative;
  -webkit-box-sizing: border-box;
  /* Safari<=5 Android<=3 */
     -moz-box-sizing: border-box;
  /* <=28 */
          box-sizing: border-box;
}

.fp-slide {
  float: left;
}

.fp-slide, .fp-slidesContainer {
  height: 100%;
  display: block;
}

.fp-slides {
  z-index: 1;
  height: 100%;
  overflow: hidden;
  position: relative;
  -webkit-transition: all .3s ease-out;
  /* Safari<=6 Android<=4.3 */
          transition: all .3s ease-out;
}

.fp-section.fp-table, .fp-slide.fp-table {
  display: table;
  table-layout: fixed;
  width: 100%;
}

.fp-tableCell {
  display: table-cell;
  vertical-align: middle;
  width: 100%;
  height: 100%;
}

.fp-slidesContainer {
  float: left;
  position: relative;
}

.fp-controlArrow {
  -webkit-user-select: none;
  /* webkit (safari, chrome) browsers */
     -moz-user-select: none;
  /* mozilla browsers */
   -khtml-user-select: none;
  /* webkit (konqueror) browsers */
      -ms-user-select: none;
  /* IE10+ */
  position: absolute;
  z-index: 4;
  top: 50%;
  cursor: pointer;
  width: 0;
  height: 0;
  border-style: solid;
  margin-top: -38px;
  -webkit-transform: translate3d(0, 0, 0);
      -ms-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}

.fp-controlArrow.fp-prev {
  left: 15px;
  width: 0;
  border-width: 38.5px 34px 38.5px 0;
  border-color: transparent #FFFFFF transparent transparent;
}

.fp-controlArrow.fp-next {
  right: 15px;
  border-width: 38.5px 0 38.5px 34px;
  border-color: transparent transparent transparent #FFFFFF;
}

.fp-scrollable {
  overflow: scroll;
}

.fp-notransition {
  -webkit-transition: none !important;
          transition: none !important;
}

#fp-nav {
  position: fixed;
  z-index: 2;
  margin-top: -32px;
  top: 50%;
  opacity: 1;
  background: rgba(0, 0, 0, .27);
  border-radius: 3px;
  /*-webkit-transform: translate3d(0,0,0);*/
}

#fp-nav.right {
  right: 19px;
}

#fp-nav.left {
  left: 19px;
}

.fp-slidesNav {
  position: absolute;
  z-index: 4;
  left: 50%;
  opacity: 1;
}

.fp-slidesNav.bottom {
  bottom: 17px;
}

.fp-slidesNav.top {
  top: 17px;
}

#fp-nav ul, .fp-slidesNav ul {
  margin: 0;
  padding: 0;
}

#fp-nav ul li, .fp-slidesNav ul li {
  display: block;
  width: 14px;
  height: 13px;
  margin: 7px;
  position: relative;
}

.fp-slidesNav ul li {
  display: inline-block;
}

#fp-nav ul li a, .fp-slidesNav ul li a {
  display: block;
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  cursor: pointer;
  text-decoration: none;
}

#fp-nav ul li a.active span, .fp-slidesNav ul li a.active span, #fp-nav ul li:hover a.active span, .fp-slidesNav ul li:hover a.active span {
  height: 12px;
  width: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 100%;
}

#fp-nav ul li a span, .fp-slidesNav ul li a span {
  border-radius: 50%;
  position: absolute;
  z-index: 1;
  height: 4px;
  width: 4px;
  border: 0;
  background: #FFFFFF;
  left: 50%;
  top: 50%;
  margin: -2px 0 0 -2px;
  -webkit-transition: all .1s ease-in-out;
     -moz-transition: all .1s ease-in-out;
       -o-transition: all .1s ease-in-out;
          transition: all .1s ease-in-out;
}

#fp-nav ul li:hover a span, .fp-slidesNav ul li:hover a span {
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
}

#fp-nav ul li .fp-tooltip {
  position: absolute;
  top: -2px;
  color: #FFFFFF;
  font-size: 14px;
  font-family: arial, helvetica, sans-serif;
  white-space: nowrap;
  max-width: 220px;
  overflow: hidden;
  display: block;
  opacity: 0;
  width: 0;
  cursor: pointer;
}

#fp-nav ul li:hover .fp-tooltip, #fp-nav.fp-show-active a.active + .fp-tooltip {
  -webkit-transition: opacity .2s ease-in;
          transition: opacity .2s ease-in;
  width: auto;
  opacity: 1;
}

#fp-nav ul li .fp-tooltip.right {
  right: 20px;
}

#fp-nav ul li .fp-tooltip.left {
  left: 20px;
}

.fp-auto-height.fp-section, .fp-auto-height .fp-slide, .fp-auto-height .fp-tableCell {
  height: auto !important;
}

.onboarding-down-chevron md-icon {
  font-size: 96px;
  min-width: 96px;
  min-height: 76px;
  color: white;
  text-shadow: 0 0 4px rgba(0, 0, 0, .75);
  font-weight: bold;
  margin-top: -10px;
}

.first-onboarding-page {
  min-height: calc(100vh - 56px);
}

.scroll-section, .scroll-section > div {
  height: auto;
  overflow: auto;
}

/* WCAG fixes */
.sidenav, md-toolbar h2 {
  color: rgba(255, 255, 255, 1) !important;
}
/* WCAG fixes Ends*/

#book_trip_additional_message {
  color: #EE0000;
  font-size: 14px;
}

@media (max-width: 959px) and (min-width: 0) and (orientation: landscape) {
  .first-onboarding-page {
    min-height: calc(100vh - 48px);
  }
}

@media (max-width: 959px) and (min-width: 0) and (orientation: portrait) {
  .first-onboarding-page {
    min-height: calc(100vh - 56px);
  }
}
/*Parallax*/


/* Worker Start */

.view-worker-clients-wrapper {
  background: #FFFFFF;
  padding: 8px;
}

.view-worker-profile-wrapper {
  background: #FFFFFF;
  padding: 8px;
}

.view-worker-clients-wrapper .block {
  border-bottom: 1px solid rgba(0, 0, 0, .13);
}

.toolbar-filter-search md-input-container {
  width: 420px;
  font-size: 16px;
}

.results-total {
  font-style: italic;
  font-size: 13px;
  padding: 5px 10px;
}

.clients-table {
  overflow: auto;
  position: relative;
}

.md-progress-clients {
  position: absolute;
}

.worker-profile-card-header {
  margin: 0;
}
/* Worker End */

.mobile-map-address-select-dialog {
  width: 100% !important;
  height: 100% !important;
}

/*xs*/
@media only screen and (max-width: 599px) {
  .date-options-datepicker-wrapper md-datepicker .md-datepicker-input-container {
    width: 85%;
  }

  md-switch {
    position: relative;
  }

  md-switch .md-container {
    position: absolute;
    right: -10px;
  }

  md-switch:last-of-type {
    margin-right: 16px;
  }

  md-toolbar.tall, md-toolbar.tall .md-toolbar-tools {
    min-height: 74px;
  }
}

/*gt-xs*/
@media only screen and (min-width: 600px) {
  .signin-register {
    max-width: 420px !important;
    min-width: 400px !important;
  }

  fieldset ~ fieldset {
    margin-top: 0;
  }

  table.custom td, table.custom th {
    padding: 20px;
  }

  .transit-report-totals {
    text-align: right;
  }

  .breadcrumb {
    display: inline-block;
  }

  .social-media-icons {
    margin-top: 0px;
  }
}

/*up to sm*/
@media only screen and (max-width: 959px), (max-height: 549px) {
  .date-options-datepicker-wrapper md-datepicker button.md-datepicker-button {
    margin-left: -6px;
  }

  .main-toolbar .desktop-btn-today,
  .main-toolbar .desktop-btn-switch-view,
  .main-toolbar .desktop-month-selector,
  .calendar-wrapper {
    display: none;
  }

  .calendar-wrapper-mobile {
    display: block;
    position: absolute;
    top: 0;
    width: 100%;
    background: rgb(255, 255, 255);
    font-size: 13px;
    text-align: center;
    z-index: 7;
    box-shadow: 0 8px 25px -10px #333333;
  }

  .calendar {
    min-height: 315px !important;
  }

  .calendar-day-wrapper {
    border: none;
  }

  .calendar-date-trip-wrapper {
    position: relative;
    z-index: 1;
  }

  .calendar-date-trip-wrapper::after {
    content: " ";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 2;
  }

  .calendar-date-trip {
    padding: 2px;
    background: transparent !important;
  }

  .calendar .calendar-date {
    padding: 4px 0;
    margin-bottom: 4px;
  }

  .calendar-date-trip .trip-status {
    position: relative;
    top: 0;
    width: 4px;
    height: 4px;
  }

  .calendar-date > span {
    width: 16px;
    height: 16px;
    padding: 1px;
    line-height: 17px;
    display: inline-block;
  }

  .calendar-date-trip:hover, .calendar-date-trip:focus {
    background: inherit;
    color: inherit;
  }
}

@media only screen and (min-width: 0) and (max-width: 959px) and (orientation: landscape) {
}

/*sm*/
@media only screen and (min-width: 600px) and (max-width: 959px) {
  .date-options-datepicker-wrapper md-datepicker .md-datepicker-input-container {
    width: 92%;
  }
}

/*gt-sm*/
@media only screen and (min-width: 960px) and (min-height: 550px) {
  .ellipsis-text-gt-sm {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .address-connector {
    margin: 0 10px;
  }

  .hamburger-icon md-icon, .announcement-icon md-icon, .print-icon md-icon {
    color: rgba(0, 0, 0, .56) !important;
  }

  .date-options-datepicker-wrapper md-datepicker .md-datepicker-input-container {
    width: 89%;
  }

  .main-toolbar .mobile-btn-today,
  .main-toolbar .mobile-month-selector,
  .calendar-wrapper-mobile {
    display: none;
  }

  .calendar-wrapper {
    padding: 8px;
    margin: 15px;
    background: #FFFFFF;
    box-shadow: 0 8px 25px -10px #333333;
  }

  .view-subscriptions-wrapper {
    box-shadow: 0 8px 25px -10px #333333;
    margin: 15px;
  }

  .view-trip-history-wrapper,
  .view-ezwallet-wrapper,
  .view-worker-clients-wrapper,
  .view-worker-profile-wrapper {
    padding: 16px;
    box-shadow: 0 8px 25px -10px #333333;
    margin: 15px;
  }

  .ezwallet-intro-banner {
    height: 220px;
    width: 100%;
    background: url(/public/paratransit/images/ezwallet/intro.jpg) no-repeat top left;
    background-size: cover;
    margin-bottom: 10px;
  }

  .ezwallet-header-text {
    margin: 0px;
  }

  .ezwallet-transport-unit td,
  .ezwallet-transport-unit th {
    padding: 2px 6px;
  }

  .calendar-date {
    padding: 4px;
  }

  .calendar-subscription-icon {
    height: 16px;
    width: 19px;
    margin-top: -6px;
    margin-left: 4px;
  }

  .calendar-date-trip .trip-status {
    border: 1px solid #FFFFFF;
  }

  .calendar-subscription-icon md-icon {
    font-size: 20px;
  }

  .not-current-month .calendar-date-trip {
    background-color: rgb(231, 231, 231) !important;
  }

  .btn-today > span {
    font-size: 17px;
    top: 21px;
    left: 16px;
    width: 20px;
    height: 15px;
    line-height: 15px;
  }

  .booktrip-inner-wrapper {
    margin: 15px;
  }

  .text_HL {
    width: 40%;
    padding-right: 50%;
    background-color: transparent;
  }

  .onboarding-box-header {
    font-size: 64px;
  }

  .onboarding-box-content {
    font-size: 26px;
  }

  .onboarding-container {
    padding: 50px;
  }

  .calendar-date-trip:hover, .calendar-date-trip:focus {
    /* Ensures hover effect is still visible on off-month-trips */
    background: rgb(183, 188, 192) !important;
  }

  .results-total {
    padding: 10px 20px;
  }
}
/*md*/
@media only screen and (min-width: 960px) and (max-width: 1279px) {
  md-sidenav {
    max-width: 250px;
  }
}
/*gt-md*/
@media only screen and (min-width: 1280px) {
}
/*lg*/
@media only screen and (min-width: 1280px) and (max-width: 1279px) {
}
/*gt-lg*/
@media only screen and (min-width: 1920px) {
}

@media print {
  .md-scroll-mask {
    display: none !important;
  }

  .trip-pickup-dropoff-details {
    page-break-inside: avoid;
  }

  html.print-dialog {
    display: block;
    height: auto;
    overflow-y: auto;
  }

  html.print-dialog body {
    display: block;
    height: auto;
  }

  html.print-dialog .md-dialog-container {
    height: auto !important;
    position: inherit;
    display: block;
  }

  html.print-dialog .main-layout.layout-row {
    display: none;
  }

  html.print-dialog .trip-details {
    width: 100% !important;
    max-width: 100%;
    display: block !important;
    color: black;
    top: 0;
    /*position: absolute;*/
    left: 0;
    overflow-y: visible;
    border: none;
    box-shadow: none;
  }

  html.print-dialog .trip-details .toolbar-wrapper .md-icon-button, html.print-dialog .trip-details-map .trip-details-fab-btns, html.print-dialog .trip-status {
    /*display: none;*/
    display: none;
  }

  html.print-dialog .leg-title-wrapper {
    display: block;
  }

  html.print-dialog .leg-title-wrapper > div {
    display: inline-block;
  }

  html.print-dialog #trip-details-details-section {
    display: flex !important;
    flex-direction: row !important;
  }

  html.print-dialog #trip-details-details-section .details-section {
    padding-right: 40px;
  }

  html.print-dialog .trip-details button, html.print-dialog .view-trip-details {
    display: none;
  }

  html.print-dialog .trip-details .block {
    padding-bottom: 0px;
  }

  html.print-dialog .trip-details button .block ~ .block {
    padding-top: 0px;
  }

  html.print-dialog .trip-details .print-trip-details {
    display: flex;
    page-break-inside: avoid;
    padding: 5px;
  }

  html.print-dialog .block-body-row, html.print-dialog .block-body-row .print-trip-details {
    page-break-inside: avoid;
  }

  html.print-dialog .block-body-row > fieldset {
    display: inline-block;
    page-break-inside: avoid;
  }

  .main-toolbar .md-icon-button {
    display: none;
  }

  .breadcrumb {
    display: none;
  }

  table.custom {
    table-layout: fixed;
  }

  table.custom th {
    /*Lower the font size so headers don't get cut off in IE*/
    font-size: 14px;
    white-space: normal;
  }

  #transaction-history-report {
    overflow: visible;
    display: block;
  }

  #page_header {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
  }

  .transaction-history-type {
    display: none !important;
  }

  .transaction-history-headers th {
    white-space: normal !important;
  }

  .transaction-history-payment-detail {
    white-space: normal; /* overwrite the nowrap used normally */
  }

  .transaction-history-page, .transaction-history-page .layout, .transaction-history-page .layout-column, .transaction-history-page .layout-row {
    display: block !important;
  }

  #transaction-history-page-header input, #transaction-history-page-header md-select-value {
    border: none !important;
  }

  #transaction-history-page-header ._md-datepicker-floating-label._md-datepicker-has-calendar-icon>label {
    right: auto !important;
    left: auto !important;
    width: auto !important;
  }

  #transaction-history-page-header .md-icon-button+.md-datepicker-input-container {
    margin-left: 2px !important;
  }

  #transaction-history-page-header md-input-container {
    min-width: 30%;
  }

  /* EZWallet reports */
  .md-datepicker-button, .md-datepicker-triangle-button, .md-select-icon, #loading-bar-spinner, md-toast {
    display: none !important;
  }
  /* EZWallet reports */

  .view-trip-history-wrapper .input-controls {
    display: none;
  }

  .trip-history-header-logo {
    display: block;
  }

  .trip-history-print-only {
    display: block !important;
  }

  .hide-for-print {
    display: none !important;
  }
}

/*Only for IE*/
@media all and (-ms-high-contrast: none),
(-ms-high-contrast: active) {
  .mobile-single-trip-wrapper {
    background: black;
  }
}

.transaction-history-page-footnote {
  text-align: left; 
  margin-bottom: 12px; 
  background-color: #FFFF00;
}

md-input-container.supplementary-data {
  width: 45%;
}

#signinFormValidation md-input-container input:-webkit-autofill ~ label {
  transform: translate(0px, 0px) !important;
}

body[accessibility-mode] *:focus {
  outline: 5px double rgba(0, 0, 0, 0.8);
  box-shadow: 0 0 0 3px #FFFFFF !important;
}

.hide-until-focus {
  background-color: #FFFFFF;
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.75);
  display: inline-block;
  opacity: 0;
  position: absolute;
  transition: opacity 0.3s;
  z-index: -1;
}

.hide-until-focus:focus {
  background-color: #FFFFFF !important;
  opacity: 1;
  z-index: 6;
}

/* Overriding angular-material's styling */
md-dialog[tabindex="-1"]:focus {
  border-radius: 0;
  outline: 4px #08f solid;
}

md-tooltip.md-show {
  height: auto;
}

.signout-redirect {
  padding-left: 15px;
}

.sidenav md-list .md-proxy-focus.md-focused div.md-no-style, md-list .md-proxy-focus.md-focused div.md-no-style {
  background-color: inherit;
}

/* Animation Disabled, start */

body[animation-disabled="true"] .mobile-month-header .parallax-wrapper {
  transform: translate(0, -50%);
}

body[animation-disabled="true"] #trips-list-view {
  perspective: none;
}

body[animation-disabled="true"] .md-ripple-container {
  display: none;
}

body[animation-disabled="true"] button.md-button,
body[animation-disabled="true"] md-backdrop,
body[animation-disabled="true"] md-icon,
body[animation-disabled="true"] md-ink-bar,
body[animation-disabled="true"] md-sidenav.md-closed-add,
body[animation-disabled="true"] md-sidenav.md-closed-remove,
body[animation-disabled="true"] md-tab-content,
body[animation-disabled="true"] md-tab-content.md-left:not(.md-active) *,
body[animation-disabled="true"] md-tabs,
body[animation-disabled="true"] .md-select-menu-container.md-active md-select-menu,
body[animation-disabled="true"] .md-select-menu-container.md-active md-select-menu > *,
body[animation-disabled="true"] .md-select-menu-container.md-leave,
body[animation-disabled="true"] .md-tooltip,
body[animation-disabled="true"] .md-transition-in,
body[animation-disabled="true"] .md-transition-out {
  transition: none !important;
}

/* Animation Disabled, end */

/* ReCaptcha */
.recaptcha-validation {
  color: #DD2C00;
  font-size: 12px;
  padding-top: 5px;
}
/* End ReCaptcha */

/* Adds a padding to the my-profile-dialog md-dialog-actions container. */
.update-client-form md-dialog-actions {
  padding: 10px 8px 10px 16px;
}

.notifications-table {
  width: 100%;
}

.notifications-table md-checkbox {
  margin-bottom: 0;
  width: 20px;
}

.notifications-table tbody th {
  font-weight: normal;
  padding-right: 15px;
  text-align: left;
}

.notifications-table td {
  text-align: center;
}

.notifications-table td,
.notifications-table th {
  padding: 0 6px;
}

.notifications-table tr {
  height: 44px;
}

.notifications-table tbody tr:nth-child(odd) {
  background-color: #F0F0F0;
}