@font-face {
  font-family: Eurostile;
  src: url("font/eurostile.eot");
}
@font-face {
  font-family: Eurostile;
  src: url("font/eurostile.ttf");
}
.login-logo {
  padding-top: 50%;
  width: 100%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("/img/sign-in-logo.svg");
}

.login-text {
  font-family: Eurostile;
  font-size: 25px;
  width: 100%;
  text-align: center;
  letter-spacing: 5px;
  font-weight: bold;
  text-transform: uppercase;
}

.header-text {
  margin-left: 10px !important;
  font-family: Eurostile;
  font-size: 20px;
  letter-spacing: 3px;
  font-weight: bold !important;
}

@font-face {
  font-family: "Material Icons";
  font-style: normal;
  font-weight: 400;
  src: url("font/MaterialIcons-Regular-v53.woff2") format("woff2");
}
.material-icons {
  font-family: "Material Icons";
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
}

@font-face {
  font-family: MyriadPro-Regular;
  src: url("font/myriadpro-regular.otf");
}
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background-color: #ECECEC;
}

.thin-bottom-border {
  border-bottom-style: solid;
  border-bottom-color: #ECECEC;
  border-bottom-width: 1px;
}

.thin-top-border {
  border-top-style: solid;
  border-top-color: #ECECEC;
  border-top-width: 1px;
}

.header-text-grey {
  color: #D6D6D6;
}

.header-text-orange {
  color: #f26522;
}

.header-text-flavour {
  color: #fff;
  font-size: 0.7rem;
}

.orange {
  color: #f26522 !important;
}

.grey {
  color: #6d6e71 !important;
}

.red {
  color: red !important;
}

.small-top-margin {
  margin-top: 20px;
}

.small-bottom-margin {
  margin-bottom: 20px;
}

.wrapper {
  min-height: 100%;
  background-color: #ECECEC;
  background-image: url("../img/bg.png");
  overflow: auto;
}

.wrapper-content {
  width: 100%;
  max-width: 450px;
  margin: auto;
  padding-left: 10px;
  padding-right: 10px;
}

.prompt {
  text-align: center;
  padding: 15px;
  font-size: 14px;
}

.table-prompt {
  text-align: center;
  color: #9C9C9C;
}

.grey-progress {
  position: absolute;
}

.avatar-frame, .avatar-frame img {
  width: 48px;
  height: 48px;
  -webkit-border-radius: 30px;
  border-radius: 30px;
  -moz-border-radius: 30px;
  cursor: pointer;
  outline: none;
}

.avatar-frame-medium, .avatar-frame-medium img {
  width: 96px;
  height: 96px;
  -webkit-border-radius: 30px;
  border-radius: 30px;
  -moz-border-radius: 30px;
  cursor: pointer;
}

.avatar-frame-large, .avatar-frame-large img {
  max-width: 150px;
  max-height: 150px;
  -webkit-border-radius: 30px;
  border-radius: 30px;
  -moz-border-radius: 30px;
  cursor: pointer;
}

.side-menu-icon {
  margin-right: 16px !important;
}

.unselected-nav {
  color: #9f9f9f !important;
}

.page-content {
  background-color: #ECECEC;
  background-image: url("../img/bg.png");
}

.dashboard-panel section {
  background-color: white;
}

.dashboard-panel h3, i {
  color: #7A7A7A;
  font-size: 16px;
}

.dashboard-panel-footer {
  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: 10px;
  padding-right: 10px;
  width: auto;
  text-align: center;
  font-size: 12px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.dashboard-prompt {
  height: 250px;
  line-height: 300px;
  text-align: center;
  color: #9C9C9C;
}

.small-font {
  font-size: 12px;
}

.card-toolbar {
  min-height: 35px;
  background-color: #EFEFEF !important;
  color: #9C9C9C;
}

.day-summary-footer {
  padding: 0 16px;
  height: 35px;
  background-color: #EFEFEF !important;
  color: #9C9C9C;
  font-size: 12px !important;
  font-weight: 500;
  text-transform: uppercase;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
}

.day-summary-wrapper {
  height: 200px;
  padding: 0;
  overflow-y: scroll;
}

.day-summary-content {
  color: #9C9C9C;
  font-size: 14px !important;
  font-weight: 500;
}

.card-toolbar md-button {
  color: #9C9C9C !important;
}

.card-toolbar md-button span {
  color: #9C9C9C !important;
}

.card-toolbar md-icon {
  color: #9C9C9C !important;
}

.card-toolbar-tools {
  height: 35px;
  background-color: #EFEFEF !important;
  color: #9C9C9C;
  font-size: 14px !important;
  font-weight: 500;
  text-transform: uppercase;
}

.notifications-label {
  width: 16px;
  height: 16px;
  line-height: 16px;
  text-align: center;
  border-radius: 50%;
  position: absolute;
  font-size: 12px;
  top: 7px;
  right: 7px;
  background-color: red;
  color: white;
}

.notification-event {
  background-color: #323232;
  color: white;
  margin-top: 0 !important;
  margin-bottom: 1px !important;
  min-height: 0 !important;
}

.notification-event h3 {
  color: white !important;
}

.notification-event p {
  color: #B3B3B3 !important;
}

.content-toolbar-header {
  font-size: 14px;
  line-height: 24px;
  text-transform: uppercase;
  font-weight: 500;
  margin-left: 15px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.content-toolbar {
  min-height: 40px;
}

.content-toolbar-tools {
  height: 40px;
}

.content-view {
  background-color: white;
  flex: 1;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}
.content-view > md-toolbar.content-toolbar {
  flex-shrink: 0;
}
.content-view > .content-scroll-area {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

.content-toolbar-button {
  min-width: 0;
}

.content-toolbar-button-icon {
  margin-right: 5px;
}

.content-form {
  max-width: 1024px;
}

.table-button {
  color: #f26522;
}

.table-button md-icon {
  color: #f26522;
}

.work-rule-prompt {
  text-align: center;
  color: #9C9C9C;
}

.table-prompt {
  text-align: center;
  color: #9C9C9C;
}

.sub-title {
  background-color: #F5F5F5;
  color: #929292;
  padding: 10px;
  margin-top: 10px;
  margin-bottom: 10px;
  text-transform: uppercase;
  font-size: 13px;
  font-weight: 500;
  max-width: 1024px;
}

.sub-title md-icon {
  color: #929292;
  margin-right: 5px;
}

.sk-cube-grid {
  width: 60px;
  height: 60px;
}

.sk-cube-grid .sk-cube {
  width: 33%;
  height: 33%;
  background-color: #444444;
  float: left;
  -webkit-animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
  animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
}

.sk-cube-grid .sk-cube1 {
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
}

.sk-cube-grid .sk-cube2 {
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
}

.sk-cube-grid .sk-cube3 {
  -webkit-animation-delay: 0.4s;
  animation-delay: 0.4s;
}

.sk-cube-grid .sk-cube4 {
  -webkit-animation-delay: 0.1s;
  animation-delay: 0.1s;
}

.sk-cube-grid .sk-cube5 {
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
}

.sk-cube-grid .sk-cube6 {
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
}

.sk-cube-grid .sk-cube7 {
  -webkit-animation-delay: 0;
  animation-delay: 0;
}

.sk-cube-grid .sk-cube8 {
  -webkit-animation-delay: 0.1s;
  animation-delay: 0.1s;
}

.sk-cube-grid .sk-cube9 {
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
}

@-webkit-keyframes sk-cubeGridScaleDelay {
  0%, 70%, 100% {
    -webkit-transform: scale3D(1, 1, 1);
    transform: scale3D(1, 1, 1);
  }
  35% {
    -webkit-transform: scale3D(0, 0, 1);
    transform: scale3D(0, 0, 1);
  }
}
@keyframes sk-cubeGridScaleDelay {
  0%, 70%, 100% {
    -webkit-transform: scale3D(1, 1, 1);
    transform: scale3D(1, 1, 1);
  }
  35% {
    -webkit-transform: scale3D(0, 0, 1);
    transform: scale3D(0, 0, 1);
  }
}
.error-event-icon {
  color: #FF2C2C;
  margin-right: 10px !important;
  width: 32px !important;
  height: 32px !important;
}

.info-event-icon {
  color: #2f96b4;
  margin-right: 10px !important;
  width: 32px !important;
  height: 32px !important;
}

.date-validation-messages {
  color: rgb(231, 87, 83);
  font-size: 12px;
  overflow: hidden;
  padding-left: 65px;
}

/* Material Design Overrides */
md-content {
  background-color: white;
}

.md-subheader {
  background-color: #d34400 !important;
  color: #fff !important;
  margin: 0;
}

.md-subheader:not(.md-sticky-no-effect):after {
  right: 0;
}

._md-select-value :first-child {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

.align-datepicker {
  margin-top: 16px !important;
}

.progress {
  min-width: 0 !important;
  box-shadow: none !important;
  background-color: transparent !important;
}

#toast-container > div, #toast-container > :hover {
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
}

.event-side-nav {
  background-color: rgb(236, 236, 236) !important;
}

.bot-container {
  background-color: #FDFDFD;
  left: 0;
  right: 0;
  top: 0;
  position: absolute;
  display: block;
  z-index: 5;
  padding-right: 15px;
}

.bot-queries-and-answers {
  padding-left: 20px;
  margin-bottom: 20px;
}

.bot-query {
  color: #565656;
}

.bot-answer {
  color: #B5B5B5;
}

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

/* when hiding the picture */
.animate-bot .ng-hide-add {
  animation: 0.5s lightSpeedOut ease;
}

/* when showing the picture */
.animate-bot .ng-hide-remove {
  animation: 0.5s flipInX ease;
}

/* ANIMATIONS (FROM ANIMATE.CSS) ======================== */
/* flip in */
@keyframes flipInX {
  0% {
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transition-timing-function: ease-in;
    opacity: 0;
  }
  40% {
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transition-timing-function: ease-in;
    transition-timing-function: ease-in;
  }
  60% {
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }
  80% {
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }
  100% {
    transform: perspective(400px);
    transform: perspective(400px);
    transform: perspective(400px);
  }
}
/* light speed out */
@keyframes lightSpeedOut {
  0% {
    opacity: 1;
  }
  100% {
    transform: translate3d(100%, 0, 0) skewX(30deg);
    transform: translate3d(100%, 0, 0) skewX(30deg);
    opacity: 0;
  }
}
@keyframes lightSpeedOut {
  0% {
    opacity: 1;
  }
  100% {
    transform: translate3d(100%, 0, 0) skewX(30deg);
    transform: translate3d(100%, 0, 0) skewX(30deg);
    transform: translate3d(100%, 0, 0) skewX(30deg);
    opacity: 0;
  }
}
.small-column {
  max-width: 100px;
  width: 100px;
  word-wrap: break-word;
}

.system-summary-value {
  color: #8A8A8A;
  font-size: 25px;
}

.system-summary-label {
  margin-top: 5px;
  color: #808080;
}

.system-summary-okay {
  margin-top: 2px;
  margin-bottom: 2px;
  background-color: #DBFFDB;
  cursor: pointer;
}

.system-summary-okay:hover {
  background-color: #C3FFC3;
}

.system-summary-okay:focus {
  outline: 0;
}

.system-summary-warning {
  margin-top: 2px;
  margin-bottom: 2px;
  background-color: #FFDDDD;
  cursor: pointer;
}

.system-summary-warning:hover {
  background-color: #FFCACA;
}

.system-summary-warning:focus {
  outline: 0;
}

.system-summary-info {
  margin-top: 2px;
  margin-bottom: 2px;
  background-color: #ececec;
  cursor: pointer;
  max-height: 62px;
}

.system-summary-info:hover {
  background-color: #dfdfdf;
}

.system-summary-info:focus {
  outline: 0;
}

.person-card {
  width: 100%;
  max-width: 375px;
}

.person-card-content {
  padding-left: 16px;
  padding-right: 16px;
  padding-top: 5px;
  padding-bottom: 5px;
}

.person-card-text-container {
  margin-bottom: 10px;
}

.person-card-text-container label {
  font-size: 12px;
  color: #a5a5a5;
}

.person-card-text-container span {
  font-size: 14px;
  color: #212121;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.person-card-text-container a {
  font-size: 14px;
  color: #212121;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.person-card-actions {
  margin: 0;
  background-color: #F9F9F9;
}

.person-card-actions-disabled {
  margin-left: 15px;
  cursor: default;
}

.person-card-header-text span:first-of-type {
  font-size: 16px;
}

.person-card-header-text span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 180px;
}

.person-card-header {
  padding-left: 16px;
  padding-right: 16px;
  padding-top: 5px;
  padding-bottom: 5px;
  border-bottom: 1px;
  border-bottom-color: #EFEFEF;
  border-bottom-style: solid;
}

.person-card-header-image {
  max-height: 40px;
  max-width: 40px;
}

.person-card-template-count {
  margin-left: 10px;
  font-size: 12px;
  color: #757575;
}

.search-box {
  background-color: #F9F9F9;
  padding-left: 16px;
  padding-right: 16px;
}

.compact-side-nav {
  width: 90px !important;
  overflow-x: hidden;
}

.side-nav {
  width: 250px;
  overflow-x: hidden;
  background-color: #18232e !important;
  color: #898989;
  background-attachment: fixed;
  background-image: url("../img/bg-side-nav.png");
  background-position: left 0 bottom 0;
  background-repeat: no-repeat;
  background-size: 250px 500px;
}

.time-log-pivot-tile {
  position: relative;
  width: 175px;
  margin: 5px;
  padding: 5px;
  border: 1px solid lightgray;
  font-size: 0.9em;
  outline: 0;
}

.time-log-header-row {
  background-color: #fafafa;
}

.time-log-pivot-header {
  background-color: whitesmoke;
  height: 60px;
  background: linear-gradient(to bottom, #fafafa, #f0f0f0);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.time-log-pivot-header span {
  margin-left: 5px;
  font-size: 14px;
}

.time-log-pivot-header label {
  margin-left: 5px;
  font-size: 12px;
  color: #a5a5a5;
}

.time-log-pivot-blank {
  border: 1px solid lightgray;
  background-color: whitesmoke;
  display: flex;
  align-items: center;
  background: linear-gradient(to bottom, #fafafa, #f0f0f0);
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}

.time-log-pivot-sticky-top {
  position: sticky;
  top: 0;
}

.time-log-pivot-sticky-left {
  position: sticky;
  left: 0;
}

.time-log-pivot-sticky-bottom {
  position: sticky;
  bottom: 0;
}

.time-log-pivot-sticky-right {
  position: sticky;
  right: 0;
}

.time-log-pivot-roster {
  background-color: whitesmoke;
  background: linear-gradient(to bottom, #fafafa, #f0f0f0);
  box-shadow: 2px 0 4px rgba(0, 0, 0, 0.1);
}

.time-log-pivot-roster-error {
  background: linear-gradient(to bottom, #ffeaea, #ffd4d4) !important;
  border: red solid 1px !important;
}

.time-log-pivot-person {
  background-color: whitesmoke;
  background: linear-gradient(to bottom, #fafafa, #f0f0f0);
  box-shadow: 2px 0 4px rgba(0, 0, 0, 0.1);
}

.time-log-pivot-text {
  margin-bottom: 10px;
  width: 100%;
}

.time-log-pivot-text label {
  font-size: 12px;
  color: #838383;
}

.time-log-pivot-text span {
  font-size: 14px;
  color: #212121;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.time-log-pivot-tile md-checkbox {
  margin-bottom: 5px;
}

.time-log-pivot-tile md-checkbox .md-container {
  background-color: transparent;
}

.time-log-pivot-tile md-select {
  margin-top: 0;
  margin-bottom: 0;
}

.time-log-pivot-day {
  border-left-width: 5px;
  border-left-color: #009ccc;
  background-color: #fff;
  opacity: 0.5;
}

.time-log-pivot-day-error {
  border-left-width: 5px;
  border-left-color: #cc293d !important;
}

.time-log-pivot-day-warning {
  border-left-width: 5px;
  border-left-color: #f2cb1d !important;
}

.time-log-pivot-day-leave {
  border-left-width: 5px;
  border-left-color: #c700ff !important;
}

.time-log-pivot-day-white {
  opacity: 1;
}

.time-log-pivot-tile-more {
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
}

.time-log-pivot-tile-more md-icon {
  color: lightgray;
}

md-table-pagination .label {
  white-space: nowrap;
  overflow: hidden;
}

.page-progress {
  margin-top: 1px;
}

.thin-scrollbar::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.thin-scrollbar::-webkit-scrollbar-button {
  width: 0px;
  height: 0px;
}

.thin-scrollbar::-webkit-scrollbar-thumb {
  background: #b7b7b7;
  border: 0px none #ffffff;
  border-radius: 50px;
}

.thin-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #b7b7b7;
}

.thin-scrollbar::-webkit-scrollbar-thumb:active {
  background: #9a9a9a;
}

.thin-scrollbar::-webkit-scrollbar-track {
  background: transparent;
  border: 0px none transparent;
  border-radius: 50px;
}

.thin-scrollbar::-webkit-scrollbar-track:hover {
  background: transparent;
}

.thin-scrollbar::-webkit-scrollbar-track:active {
  background: transparent;
}

.thin-scrollbar::-webkit-scrollbar-corner {
  background: transparent;
}

.payment-total {
  font-size: 2em;
  color: #b1b1b1;
}

.stacked-container {
  margin-left: 2px;
  margin-bottom: 10px;
  margin-top: 10px;
}

.stacked-label {
  font-size: 13px;
  margin-bottom: 7px;
}

.stacked-value {
  margin-left: 2px;
}

.pagination {
  background-color: #F9F9F9;
  padding-left: 16px;
  padding-right: 16px;
}

.pagination-text {
  text-align: center;
  color: #9e9e9e;
  font-size: 15px;
  white-space: nowrap;
}

.registration-copy {
  width: 100%;
  text-align: center;
  color: #6d6e71;
}

.copyright-anonymous {
  margin-top: 15px;
  margin-bottom: 15px;
  font-size: 12px;
  color: #6d6e71;
  text-align: center;
}

.copyright-secure {
  margin-top: 15px;
  margin-bottom: 0;
  font-size: 12px;
  color: #6d6e71;
  text-align: center;
}

.report-description {
  margin-bottom: 16px;
  margin-left: 8px;
  font-size: 0.9em;
  color: #8a8a8a;
}

.file-upload-drop-box {
  background: #F8F8F8;
  border: 5px dotted #DDD;
  width: 100%;
  height: 65px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  justify-content: center;
  cursor: pointer;
  text-align: center;
}

.file-upload-drop-box:hover {
  background: #f1f1f1;
}

.file-upload-dragover {
  border: 5px dotted #f26522;
}

.documents-label {
  width: 16px;
  height: 16px;
  line-height: 16px;
  text-align: center;
  border-radius: 50%;
  position: absolute;
  font-size: 12px;
  top: 3px;
  right: 3px;
  background-color: #9b9b9b;
  color: white;
}

.file-upload-label {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  justify-content: center;
}

.documents-label-active {
  background-color: #f26522;
}

.file-list-item:hover {
  background-color: #f8f8f8;
}

.tab-radio-inactive {
  font-size: 20px;
  line-height: unset !important;
}

.tab-radio-active {
  font-size: 20px;
  color: #f26522 !important;
  line-height: unset !important;
}

.md-checkbox-cell {
  padding-right: 15px !important;
}

.help-bottom-sheet-button {
  padding-top: 10px;
  padding-bottom: 10px;
}

.help-bottom-sheet-button md-icon {
  height: 32px;
  width: 32px;
  font-size: 32px;
}

.help-bottom-sheet-text {
  text-transform: none;
}

.hide-validation-error .md-errors-spacer {
  display: none;
}

.primary-colour-button {
  background-color: #f26522 !important;
}

.hint {
  width: 100%;
  text-align: center;
}

.hint img {
  width: 100%;
  margin: 25px;
  max-width: 150px;
}

.hint p {
  max-width: 550px;
  margin: 0 auto;
  padding-bottom: 12px;
}

.person-summary-card {
  width: 100%;
}

.person-summary-card-content {
  padding: 0;
}

.person-summary-card-actions {
  margin: 0;
  background-color: #F9F9F9;
  padding-right: 8px;
  padding-left: 8px;
}

.person-summary-card-header-text span:first-of-type {
  font-size: 16px;
}

.person-summary-card-header-text span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 180px;
}

.person-summary-card-header {
  padding-left: 16px;
  padding-right: 16px;
  padding-top: 5px;
  padding-bottom: 5px;
  border-bottom: 1px;
  border-bottom-color: #EFEFEF;
  border-bottom-style: solid;
}

.person-summary-card-header-image {
  max-height: 40px;
  max-width: 40px;
}

.person-summary-day {
  font-size: 11px;
  text-transform: none;
  color: #a5a5a5;
}

.person-summary-content-toolbar {
  min-height: 40px;
  background-color: #F5F5F5 !important;
  color: #929292 !important;
}

.person-summary-content-toolbar-button {
  text-transform: none !important;
}

.person-summary-content-toolbar-button-icon {
  color: #757575 !important;
  margin-right: 6px;
}

.person-summary-day-name {
  font-size: 11px;
  text-transform: none;
  color: #929292;
}

.person-summary-tab-title {
  text-transform: none;
}

md-tabs [role=tabpanel] {
  transition: none;
}

.summary-group-row {
  width: 100%;
  overflow-x: scroll;
  background-color: #f9f9f9;
}

.summary-group {
  margin: 12px auto;
  padding: 0 8px;
}

.summary-group-title {
  margin-left: 8px;
  color: #717171;
  font-size: 0.8em;
  white-space: nowrap;
}

.summary-group-value {
  margin-left: 8px;
  font-size: 0.7em;
  white-space: nowrap;
}

.person-summary-no-prompt {
  text-align: center;
  font-size: 0.8em;
}

.bold {
  font-weight: 500;
}

.summary-value {
  margin: 12px;
  padding: 12px;
  width: 100%;
}

.summary-value h4 {
  margin: 0;
  color: #a9a9a9;
  font-weight: normal;
  margin-bottom: 8px;
  font-size: 0.9em;
}

.summary-value p {
  margin: 0;
  font-size: 0.8em;
}

div.hidden-scrollbar-thumb::-webkit-scrollbar-thumb {
  background: transparent !important;
  border-color: transparent !important;
}

.md-cell {
  padding: 0 16px 0 0 !important;
}

.md-column {
  padding: 0 16px 0 0 !important;
}


.help-text {
  margin-top: 5px;
  font-size: 12px;
  color: #7d7d7d;
  position: absolute;
}

.roster-tile {
  position: relative;
  width: 170px;
  margin: 5px;
  padding: 5px;
  border: 1px solid lightgray;
  font-size: 0.9em;
  outline: 0;
}

.roster-header {
  background-color: whitesmoke;
  height: 60px;
  background: linear-gradient(to bottom, #fafafa, #f0f0f0);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.roster-header span {
  margin-left: 5px;
  font-size: 14px;
}

.roster-header label {
  margin-left: 5px;
  font-size: 12px;
  color: #a5a5a5;
}

.roster-blank {
  border: 1px solid lightgray;
  background-color: whitesmoke;
  display: flex;
  align-items: center;
  background: linear-gradient(to bottom, #fafafa, #f0f0f0);
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}

.roster-person {
  background-color: whitesmoke;
  background: linear-gradient(to bottom, #fafafa, #f0f0f0);
  box-shadow: 2px 0 4px rgba(0, 0, 0, 0.1);
}

.roster-person-text {
  margin-bottom: 10px;
}

.roster-person-text label {
  font-size: 12px;
  color: #a5a5a5;
}

.roster-person-text span {
  font-size: 14px;
  color: #212121;
}

.roster-tile md-checkbox {
  margin-bottom: 5px;
}

.roster-tile md-checkbox .md-container {
  background-color: transparent;
}

.roster-tile md-select {
  margin-top: 0;
  margin-bottom: 0;
}

.roster-day {
  border-left-width: 5px;
  border-left-color: #009ccc;
  background-color: white;
}

.roster-day-error {
  border-left-width: 5px;
  border-left-color: #cc293d !important;
}

.roster-day-warning {
  border-left-width: 5px;
  border-left-color: #f2cb1d !important;
}

.roster-day-white {
  background-color: #fff;
}

.roster-tile-more {
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
}

.roster-tile-more md-icon {
  color: lightgray;
}

.compact-input {
  margin: 18px 0 0 0;
}

.compact-input > .md-errors-spacer {
  min-height: 0;
  height: 0;
}

.dot {
  height: 8px;
  width: 8px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
}

.wda-button-icon {
  font-size: 20px;
}

.enroll-face-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

@media only screen and (max-width: 767px) {
  .enroll-face-container {
    flex-direction: column;
  }
}
.enroll-video-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  max-width: 400px;
  max-height: 400px;
}

.enroll-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 16px;
  transform: scaleX(-1);
}

.enroll-video-mask {
  border-radius: 16px;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background-color: rgba(0, 0, 0, 0.3);
  -webkit-mask-image: radial-gradient(ellipse 25% 35% at center, transparent 100%, black 100%);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-composite: destination-out;
  mask-image: radial-gradient(ellipse 25% 35% at center, transparent 100%, black 100%);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-composite: exclude;
}

md-select-menu {
  max-height: 500px !important;
}
md-select-menu md-content {
  max-height: 500px !important;
}