/*                                 _
 *                       .-.      / \        _
 *           ^^         /   \    /^./\__   _/ \
 *         _        .--'\/\_ \__/.      \ /    \  ^^  ___
 *        / \_    _/ ^      \/  __  :'   /\/\  /\  __/   \
 *       /    \  /    .'   _/  /  \   ^ /    \/  \/ .`'\_/\
 *      /\/\  /\/ :' __  ^/  ^/    `--./.'  ^  `-.\ _    _:\ _
 *     /    \/  \  _/  \-' __/.' ^ _   \_   .'\   _/ \ .  __/ \
 *   /\  .-   `. \/     \ / -.   _/ \ -. `_/   \ /    `._/  ^  \
 *  /  `-.__ ^   / .-'.--'    . /    `--./ .-'  `-.  `-. `.  -  `.
 *@/        `.  / /      `-.   /  .-'   / .   .'   \    \  \  .-  \%
 *@(88%@)@%% @)&@&(88&@.-_=_-=_-=_-=_-=_.8@% &@&&8(8%@%8)(8@%8 8%@)%
 *@88:::&(&8&&8::JGS:&`.~-_~~-~~_~-~_~-~~=.'@(&%::::%@8&8)::&#@8::::
 *`::::::8%@@%:::::@%&8:`.=~~-.~~-.~~=..~'8::::::::&@8:::::&8::::::'
 *`::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::'
 *
 *   Let's go on an adventure
 *
 */
 .vb-blue {
  background-color: #4877A5 !important;
  color: white !important; }

.vb-grey {
  background-color: #777 !important;
  color: white !important; }

.fa-exclamation-triangle.warning {
  color: #E8A712; }

.fa-exclamation-circle {
  color: #D95C5C; }

fieldset {
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  border: solid 1px #a7a7a7; }

.error_msg {
  margin-top: 0.2em;
  margin-bottom: 0.2em; }

#header-text {
  color: white;
  font-size: 14px;
  font-weight: bold;
  position: relative;
  top: -14px;
  opacity: 0.75; }

.confirm.vb-blue {
  color: white;
  background-color: #4877A5;
  font-size: 14px !important; }

* {
  -webkit-tap-highlight-color: transparent; }

html {
  height: 100%;
  font-family: Arial; }

body {
  -webkit-touch-callout: none;
  -webkit-text-size-adjust: none;
  -webkit-user-select: none;
  background-color: #FFFFFF;
  -webkit-font-smoothing: antialiased;
  font-size: 12px;
  min-height: 100%;
  width: 100%;
  margin: 0;
  padding: 0; }

#top {
  width: 100%;
  margin: 0;
  padding: 0;
  height: 48px; }
  #top #ios-status-bar {
    position: fixed;
    z-index: 100;
    background: #4877A5;
    width: 100%;
    height: 15px;
    top: 0;
    left: 0; }
  #top #header {
    position: fixed;
    z-index: 100;
    background: #4877A5;
    text-align: center;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 100%;
    height: 33px;
    top: 15px;
    left: 0; }
    #top #header div.refresh {
      position: fixed;
      right: 6px;
      font-size: 20px; }
    #top #header div#help {
      font-size: 20px;
      position: fixed;
      right: 40px; }
    #top #header div#help,
    #top #header div.refresh,
    #top #header div.show-menu {
      color: white;
      top: 14px;
      z-index: 999; }
    #top #header div.show-menu {
      position: fixed;
      left: 10px;
      font-size: 20px; }
    #top #header div.header-message {
      height: 4em;
      background-color: #E8A712;
      color: #414141;
      font-size: 10px;
      line-height: 33px;
      margin-top: 1.5em; }
      #top #header div.header-message i {
        color: #414141; }
    #top #header h1 {
      color: #FFF;
      font-size: 16px;
      line-height: 33px;
      position: relative;
      top: -6px; }
  #top #loader {
    position: fixed;
    z-index: 101;
    background: #5BBD72;
    text-align: center;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 0%;
    height: 5px;
    top: 43px;
    left: 0; }

.space {
  width: 100%;
  height: 20px; }

#father {
  min-height: 100%; }

.show-header-message {
  margin-top: 3em; }

#view {
  padding: 15px;
  height: 100%; }

h1, h2, h3 {
  margin: 0;
  padding: 0;
  color: #464646; }

p {
  padding: 6px 0px 6px 0px;
  margin: 0px; }

a {
  color: blue; }
  a.header {
    font-size: 16px; }

.description {
  font-size: 14px; }

.logo-name {
  font-size: 12px !important; }

#bottom-menu {
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 100;
  margin-bottom: 0px !important; }

.bg-green {
  background-color: #5BBD72 !important; }

.bg-red {
  background-color: #D95C5C !important; }

.bg-orange {
  background-color: #E8A712 !important; }

.bg-blue {
  background-color: #4877A5 !important; }

.bg-light-blue {
  background-color: #88aacb !important; }
  
.bg-orange-striped {
    background: repeating-linear-gradient(325deg, #FFD099, #FFD099 1px, white 2px, white 2px) !important;
}

.tel-link {
  color: black !important; }

.underline {
  text-decoration: underline; }

.phone-link {
  color: black; }

.float-left {
  float: left; }

.float-right {
  float: right; }

.clear-both {
  clear: both; }

.form label {
  font-size: 1.2em; }
.form input {
  border: 1px solid #989898;
  padding: 4px;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  font-size: 1.2em; }

.mobiscroll-negative-button {
  margin-right: 0.2em !important; }

body.login div.refresh, body.login div.show-menu {
  display: none; }

.ui.login.fluid.submit.button {
  background-color: #6FD186;
  color: white; }

#upgrade-login-container {
  font-size: 14px;
  margin-top: 30px;
  border: 1px solid #BEBEBE;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px; }
  #upgrade-login-container .warning.circle.icon {
    color: orange;
    opacity: 1;
    font-size: 24px; }
  #upgrade-login-container button {
    width: 110px;
    color: white;
    background-color: orange;
    padding: 8px 0px;
    margin-top: 6px; }

.upgrade-info-modal fieldset {
  border: 1px solid #BEBEBE;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  position: relative; }
  .upgrade-info-modal fieldset legend {
    position: relative;
    top: -10px; }
    .upgrade-info-modal fieldset legend .icon {
      margin: 0px; }
.upgrade-info-modal #content {
  padding: 14px; }
  .upgrade-info-modal #content ul, .upgrade-info-modal #content ol {
    clear: both; }
  .upgrade-info-modal #content p {
    padding: 10px 16px; }
  .upgrade-info-modal #content p, .upgrade-info-modal #content ol, .upgrade-info-modal #content ul {
    line-height: 1.6em !important; }
  .upgrade-info-modal #content i {
    position: relative;
    top: 10px; }
  .upgrade-info-modal #content legend {
    position: relative; }
  .upgrade-info-modal #content #how .download.icon, .upgrade-info-modal #content #how h2 {
    display: inline-block; }
  .upgrade-info-modal #content #how h2 {
    position: relative;
    top: 4px; }
  .upgrade-info-modal #content #how .download.icon {
    font-size: 30px;
    color: orange;
    position: relative;
    top: 10px;
    margin: 0px 6px; }
  .upgrade-info-modal #content #what .mobile.icon, .upgrade-info-modal #content #what h2 {
    display: inline-block; }
  .upgrade-info-modal #content #what .mobile.icon {
    font-size: 40px;
    color: orange; }

.ui.vb-orange.button {
  background-color: #E8A712;
  color: #FFFFFF; }

.ui.vb-red.button {
  background-color: #D95C5C;
  color: #FFFFFF; }

.ui.button {
  text-transform: none;
  font-size: 14px !important;
  font-weight: bold !important; }

.vb-color-orange {
  color: #E8A712; }

.vb-color-red {
  color: #D95C5C; }

.vb-color-blue {
  color: #4877A5; }

.vb-confirmed-text {
  color: #005500; }

.vb-unconfirmed-text {
  color: #EA7502; }

.vb-absence-text {
  color: black; }

.vb-available-text {
  color: #4877a5; }

.vb-bookable-text {
  color: #0055FF; }

.vb-unbookable-schedule-text {
  color: #4877a5; }

.ui.modal {
  margin-left: 0;
  width: 94%;
  margin-left: 3%;
  left: 0;
  border-radius: 0;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border: 0; }
  .ui.modal .actions {
    text-align: center;
    background: #f9fafb;
    border-top: 1px solid rgba(34,36,38,.15);
  }

  .ui.modal .content {
    display: table;
    font-size: 1em;
    line-height: 1.4;
    padding: 1.5rem;
    background: #fff;
  }
  
  .ui.modal .header {
    font-size: 1.43rem;
    line-height: 1.28em;
    font-weight: 700;
    padding: 1.25rem 1.5rem;
    color: rgba(0,0,0,.85);
    background: #f9fafb;
    border-bottom: 1px solid rgba(34,36,38,.15);
  }
  
  .ui.modal .tabs {
    min-height: 64px;
    font-size: 1.25em;
    background: #f9fafb;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    border-bottom: 1px solid rgba(34,36,38,.15);
  }
  
  .ui.modal .tab {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 2px solid #f9fafb;
  }
  
  .ui.modal .selected-tab {
    border-bottom: 2px solid rgba(34,36,38,.15);
  }
  
  .ui.modal .tab:active {
    background: #e5e5e5;
    -webkit-box-shadow: inset 0px 0px 5px #c1c1c1;
       -moz-box-shadow: inset 0px 0px 5px #c1c1c1;
            box-shadow: inset 0px 0px 5px #c1c1c1;
    outline: none;
    border-bottom: 2px solid rgba(34,36,38,.15);
  }

  .ui.modal .field {
    float: left;
    width: 100%; }
  .ui.modal .input {
    float: right; }

.ui.item.menu {
  background-color: rgba(209, 209, 209, 0.8);
  box-shadow: none;
  -webkit-box-shadow: none; }
  .ui.item.menu .item.active {
    background-color: #F7F7F7;
    box-shadow: none;
    -webkit-box-shadow: none; }

i.inverted.icon {
  background-color: #29445e; }

i.icon.star:before {
  content: none; }

.ui.list .item {
  position: relative; }

.ui .modal {
  line-height: normal; }

.ui.positive.button, .ui.positive.buttons .button {
  background-color: #4877A5 !important; }

body.activities {
  background-color: #FFF; }
  body.activities #top #header, body.activities #top #ios-status-bar {
    opacity: 1; }
  body.activities #view {
    padding: 0; }
  body.activities .event_information {
    font-size: 16px;
    margin-bottom: 1em; }
  body.activities .event-data .event-date {
    font-weight: bold; }
  body.activities .event-data .event-info {
    margin-bottom: 1em; }

body.home .today-tomorrow {
  color: #464646;
  font-weight: bold; }

.restricted,
.symbol-explanation-restricted {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAP0lEQVQYV43MuQ0AIAwEQVzV9R9eVSAjgXj8bTxaaYVIdsmcIgASwoV05sITufBFJrTQBz10wQhtmKEJK0jhAAusJ2UENB/GAAAAAElFTkSuQmCC); }

.calendar h3 {
  position: relative;
  top: 11px;
  text-transform: uppercase;
  font-size: 16px;
  color: #4877A5;
  text-align: center;
  min-height: 19px; }
.calendar ul, .calendar div {
  margin: 0;
  padding: 0; }
.calendar .container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin: auto;
  height: 54px; }
  /* width: 20px; } */
  .calendar .container .date {
    width: 20px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
.calendar ul.calendar-cell li {
  border: 1px solid rgba(220, 220, 220, 0.5); }
.calendar ul.calendar-cell li.calendar-head {
  border: 0px;
  border-bottom: 1px solid #DCDCDC; }
.calendar ul.calendar-cell li.calendar-head-spacer {
  border: 0px;
}
.calendar li {
  display: flex;
  float: left;
  width: 13%;
  height: 7em;
  overflow: hidden;
  /* padding: 4% 0 4% 0; */
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  text-align: center; }
  @media screen and (min-width: 480px) {
    .calendar li {
      height: 10em; } }
  @media screen and (min-width: 768px) {
    .calendar li {
      height: 12em; } }
  @media screen and (min-width: 992px) {
    .calendar li {
      height: 14em; } }
.calendar ul.calendar-cell li.weekno {
  padding: 1% 2%;
  text-align: right;
  clear: both;
  border: 0px;
}
.calendar li.weekno span {
  font-style: italic;
  padding: 3px;
}
.calendar li.weekno,
.calendar li.calendar-head-spacer {
  width: 9%;
}
.calendar .calendar-main ul.calendar-cell li.friday {
  border-right: 1px solid #DCDCDC; }
.calendar .white {
  background-color: #FFF; }
.calendar .light-gray {
  background-color: #F5F5F5; }
.calendar .disable,
.calendar .weekno {
  color: #C8C8C8 !important; }
.calendar .today {
  background-color: #a4dab1; }
.calendar .vb-icon {
  margin: 0 auto; }
.calendar .selected-day {
  /* padding: 3px; */
  background-color: #88aacb;
  color: #FFF;
  border-radius: 10px; }
.calendar .lockAddButton {
  color: #BEBEBE; }
.calendar .calendar-header {
  position: fixed;
  background-color: #FFF;
  width: 100%;
  margin: 0 auto;
  z-index: 100; }
.calendar .calendar-header-spacer,
.calendar .calendar-header li {
  padding: 2% 0 0 0;
  height: 3%;
}
.calendar .calendar-main {
  position: relative;
  top: 68px; }
.calendar .monthDivider {
  width: 100%;
  color: black;
  z-index: 99;
  margin: 4px 0px 14px 0px;
  text-align: center;
  float: left; }
  .calendar .monthDivider .dividerLine {
    width: 90%;
    display: inline-block;
    height: 1px;
    background-color: #4877A5;
    position: relative;
    top: 11px;
    z-index: 1; }
  .calendar .monthDivider .dividerTextBox {
    display: inline-block;
    width: 100px;
    position: relative;
    text-align: center;
    z-index: 2; }
    .calendar .monthDivider .dividerTextBox span {
      color: #4877A5;
      font-size: 14px;
      padding: 0px 10px;
      background-color: white;
      font-weight: bold; }
.calendar .event-marks {
  height: 25px; }
  .calendar .event-marks div {
    height: 3px;
    width: 100%;
    margin-top: 2px;
    float: left;
    background-color: rgba(255, 255, 255, 0); }
    .calendar .event-marks div:first-child {
      margin-top: 5px; }
  .calendar .event-marks .event-start {
    width: 75%;
    float: right; }
  .calendar .event-marks .all-day {
    width: 101%;
    float: right; }
  .calendar .event-marks .event-end {
    width: 75%;
    float: left; }
  .calendar .event-marks .same-day {
    /* width: 50%;
    margin: inherit auto;
    float: left;
    margin-left: 25%;  */
  }
.calendar #event-box {
  width: 100%;
  background-color: #FFF;
  max-height: 175px;
  overflow-x: hidden;
  overflow-y: auto;
  position: fixed;
  bottom: 0;
  border-top: 1px solid #DCDCDC;
  box-shadow: 0 -2px 10px #DCDCDC;
  z-index: 101;
  display: none; }
  .calendar #event-box .date-container {
    padding: 5px 1em 5px 1em;
    border-bottom: 1px solid #DCDCDC;
    color: #333; }
    .calendar #event-box .date-container .current-date {
      font-weight: bold;
      margin-bottom: 5px;
      font-size: 14px; }
  .calendar #event-box .event {
    height: 100%;
    padding: 10px;
    overflow: hidden;
    border-bottom: 1px solid #DCDCDC; }
    .calendar #event-box .event .vb-icon {
      float: left;
      margin-top: 7px; }
    .calendar #event-box .event .time {
      float: left;
      padding: 0 5px;
      border-right: 1px solid #4877A5;
      width: 13%; }
      .calendar #event-box .event .time p {
        height: 15px; }
    .calendar #event-box .event .trim .button {
      margin: 0.3em 1em 0 1em; }
    .calendar #event-box .event .info {
      float: left;
      padding-left: 5px;
      color: #000;
      text-decoration: none; }
    .calendar #event-box .event .more-info {
      float: left;
      padding-left: 0.2em;
      color: #000;
      padding-top: 0.2em; }
      .calendar #event-box .event .more-info .short-information {
        text-decoration: none;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 15em; }
    .calendar #event-box .event .info-loading {
      position: absolute; }
    .calendar #event-box .event .delete-event, .calendar #event-box .event .undo-event, .calendar #event-box .event .unconfirmed-event {
      float: right;
      line-height: 30px;
      padding: 0 5px; }
      .calendar #event-box .event .delete-event i, .calendar #event-box .event .undo-event i, .calendar #event-box .event .unconfirmed-event i {
        margin: 0; }
.calendar .events span {
  background-color: #4877A5;
  padding: 5px;
  border-radius: 15px;
  color: #FFF; }
.calendar .add {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 512; }
.calendar .home-today {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 512; }
.calendar .comment-icon-container {
  display: flex;
  justify-content: center;
  /* margin-top: 25px; */
}

.comment::-webkit-scrollbar {
    width: 3px;
    background-color: azure;
    border-radius: 8px;
}

.comment::-webkit-scrollbar-track {
    webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    border-radius: 10px;
}

.comment::-webkit-scrollbar-thumb {
    background-color: #bdbebf;
    border-radius: 10px;
}

.comment::-webkit-scrollbar-thumb:hover {
    background: #b8b8b8;
}

.text-center {
  text-align: center; }

.school-info-modal #content {
  padding: 7% 7% 0% 7%;
  float: left;
  width: 100%;
  box-sizing: border-box; }
.school-info-modal #school-info-header {
  margin-bottom: 0.5em;
  margin-left: 3%; }
.school-info-modal .info-icon {
  width: 10%;
  clear: left;
  float: left;
  text-align: right;
  padding: 0.8em 1em 0.5em 0em; }
.school-info-modal .text {
  text-align: left;
  float: left;
  width: 90%;
  word-wrap: break-word;
  padding-top: 2px;
  padding: 1em 1em 1em 0.4em; }
.school-info-modal .info-icon, .school-info-modal .text {
  border-top: 1px solid #BEBEBE;
  box-sizing: border-box; }

.mobi-date-time-cancel {
  margin-right: 0.75em !important; }

.add-event-modal .timePickerContainer {
  float: left;
  width: 100%; }
  .add-event-modal .timePickerContainer .mobiTimePicker {
    width: 50%;
    float: left; }
    .add-event-modal .timePickerContainer .mobiTimePicker input {
      font-size: 14px !important;
      width: 120px; }
    .add-event-modal .timePickerContainer .mobiTimePicker .right-field-input {
      float: left;
      margin-left: 5px; }
    .add-event-modal .timePickerContainer .mobiTimePicker .left-field-input {
      float: right;
      margin-right: 5px; }
.add-event-modal .timePickerContainer:nth-child(2) {
  margin-top: 10px; }

body.home #bottom-menu a {
  background-color: #eee; }
body.home #bottom-menu .active {
  background-color: #F7F7F7 !important; }
body.home #view {
  padding-top: 0px !important; }
body.home p.info-text {
  font-size: 1.2em;
  color: #414141; }
body.home .confirmed {
  font-weight: bold;
  color: #5BBD72; }
body.home .unconfirmed {
  font-weight: bold;
  color: #E8A712; }
body.home div.info_row i {
  float: left; }
body.home div.info_row {
  clear: both;
  padding: 0.4em 0.2em 0.2em 0.2em;
  word-break: break-all; }
  body.home div.info_row div {
    display: table-cell;
    vertical-align: top; }
  body.home div.info_row div:nth-child(2) {
    padding-top: 0.1em; }
    body.home div.info_row div:nth-child(2) div {
      padding-right: 0.5em; }
body.home div.confirm-button {
  background-color: #F7F7F7;
  width: 100% !important;
  box-shadow: 0 -3px 5px -5px black;
  padding-top: 1.1em !important; }
  body.home div.confirm-button div {
    opacity: 0.8;
    filter: alpha(opacity=80);
    color: white !important;
    padding-top: 1em !important;
    padding-bottom: 1em !important;
    margin: 0px 0px !important; }
body.home i.confirm-button {
  float: right !important;
  margin: 0 !important; }
body.home div.show-confirm-button {
  margin-bottom: 140px !important; }
body.home div.hide-confirm-button {
  margin-bottom: 70px !important; }
body.home div.trim_modal > div {
  text-align: center; }
  body.home div.trim_modal > div div.button {
    margin: 1em 2em 2em 2em; }
body.home div.trim_modal {
  padding: 1em !important;
  box-sizing: border-box; }
body.home div.remove_availability_modal > div {
  text-align: center; }
  body.home div.remove_availability_modal > div div.button {
    margin: 1em 2em 2em 2em; }
body.home div.remove_availability_modal {
  padding: 1em !important;
  box-sizing: border-box; }
body.home .trim_question {
  font-size: 16px; }
body.home .event_information {
  font-size: 16px;
  margin-bottom: 1em; }
body.home .booking-vb-icon {
  float: left;
  margin-right: 0.6em !important; }
body.home .booking-header {
  font-size: 14px; }
body.home .booking-item {
  border-bottom: 1px solid #BEBEBE;
  margin-bottom: 1em;
  padding-bottom: 1em;
  position: relative; }
body.home .home-icon-container {
  float: right;
  width: 36px;
  margin-right: 8px; }
  body.home .home-icon-container .vb-icon {
    float: right;
    margin: 0px !important; }
body.home #eventContainer {
  width: 90%; }
body.home .content {
  width: 100%; }
  body.home .content .activities-week-day {
    float: left;
    width: 26px; }
  body.home .content .activities-time {
    float: right; }
  body.home .content .activities-day,
  body.home .content .activities-unit-name,
  body.home .content .activities-expand {
    float: left; }
  body.home .content .activities-day {
    text-align: right;
    position: relative;
    left: -4px; }
  body.home .content .activities-unit-name {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    min-height: 1px;
    margin-left: 6px;
    width: 22%; }
  body.home .content .activities-expand {
    width: 16px;
    position: relative;
    left: -12px;
    font-size: 18px; }
    body.home .content .activities-expand .icon {
      color: #4877A5; }
  body.home .content .all-unit-name,
  body.home .content .unconfirmed-unit-name,
  body.home .content .confirm-unit-name,
  body.home .content .activities-expand {
    min-height: 1px; }
  body.home .content .all-unit-name {
    width: 82px; }
  body.home .content .unconfirmed-unit-name {
    width: 60px; }
  body.home .content .confirmed-unit-name {
    width: 80px; }
body.home .event-data .event-date {
  font-weight: bold; }
body.home .event-data .event-info {
  margin-bottom: 1em; }
body.home .month-headline {
  width: 100%;
  font-size: 1.8em;
  height: 20px;
  color: #4877A5;
  margin-bottom: 0.6em;
  margin-top: 1em;
  margin-left: 12px; }
body.home .unconfirmed-checkbox {
  padding-top: 0px;
  position: absolute;
  top: -0.1em;
  right: -0.2em; }
body.home .unconfirmed-checkbox,
body.home .confirmed-checkbox {
  color: black; }
body.home .arrow {
  width: 12px;
  height: 12px;
  font-size: 0.8em;
  position: relative;
  left: 6px;
  top: 2px; }

.vb-icon {
  width: 16px !important;
  height: 16px !important; }
  .vb-icon.star {
    background: url("../images/vb-icons.png");
    background-position: -64px 0px; }
  .vb-icon.early-warn {
    background: url("../images/vb-icons.png");
    background-position: -48px -16px; }
  .vb-icon.available {
    background: url("../images/vb-icons.png");
    background-position: 0px 0px; }
  .vb-icon.confirmed-booking {
    background: url("../images/vb-icons.png");
    background-position: -32px 0px; }
  .vb-icon.unconfirmed-booking {
    background: url("../images/vb-icons.png");
    background-position: -16px 0px; }
  .vb-icon.absence {
    background: url("../images/vb-icons.png");
    background-position: -32px -16px; }
  .vb-icon.schedule-bookable {
    background: url("../images/vb-icons.png");
    background-position: 0px -16px; }
  .vb-icon.schedule-unbookable {
    background: url("../images/vb-icons.png");
    background-position: -16px -16px; }
  .vb-icon.logo {
    width: 30px !important;
    height: 30px !important;
    background: url("../images/vb-icons.png");
    background-position: -60px -112px; }
  .vb-icon.warning {
    width: 20px;
    height: 20px;
    background: url("../images/vb-icons.png");
    background-position: 0px -32px; }

.alert {
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  opacity: 0.95;
  z-index: 1000;
  padding: 12px;
  color: #fff;
  font-size: 12px; }
  .alert h1 {
    color: #fff !important;
    font-size: 1.4em !important;
    font-weight: normal !important; }
  .alert.error {
    background-color: #A95252; }

.no-messages {
  text-align: center;
  font-size: 14px;
  margin-top: 20px; }

table.message-table {
  width: 100%;
  position: relative;
  top: -15px; }
  table.message-table.show-button {
    margin-bottom: 60px !important; }
  table.message-table tr td {
    border-bottom: solid 1px grey; }
  table.message-table tr .message-col-2,
  table.message-table tr .message-col-3 {
    vertical-align: top;
    padding: 1em 0.2em 1em 0.2em; }
  table.message-table tr .message-col-1 {
    width: 2em;
    vertical-align: top;
    padding: 1em 0em 1em 0.2em; }
  table.message-table tr .message-col-3 {
    color: #ababab;
    text-align: right !important;
    width: 7em; }
  table.message-table tr .shorten-text {
    text-overflow: ellipsis; }
  table.message-table tr .message-unread {
    font-weight: bold; }
    table.message-table tr .message-unread .open {
      font-weight: normal !important; }
  table.message-table tr div.message-date {
    color: #606669; }
  table.message-table tr div.message-text {
    float: left; }
  table.message-table tr div.warning {
    padding-right: 0.5em;
    margin-bottom: 3px; }
  table.message-table tr .expand-icon {
    float: left;
    margin-right: 0.4em; }

#confirm-read-button {
  margin: 14px auto;
  width: 290px;
  display: block;
  color: white; }

#confirm-container {
  width: 100%; }

.ui.vb-blue.fluid.button {
  color: white; }

#important-messages-container .important-message {
  padding: 1em;
  border-bottom: 1px #BEBEBE solid;
  box-sizing: border-box; }
#important-messages-container .message-date {
  color: #BEBEBE;
  margin-bottom: 0.4em; }
#important-messages-container #header {
  background-color: #E8A712;
  text-align: center;
  padding: 0.7em; }
  #important-messages-container #header h3 {
    display: block; }

textarea {
  width: 98%;
  height: 100%;
  resize: none;
}

div.user-setting {
  border-bottom: 1px solid gainsboro;
  padding-bottom: 1em; }
  div.user-setting div.item {
    text-align: center;
    padding-left: 0px !important;
    padding-right: 0px !important;
    margin: 1rem 0rem 0rem;
    font-size: 1rem; }
    div.user-setting div.item div {
      padding-top: 1em !important;
      padding-bottom: 1em !important;
      display: inline-block;
      margin-bottom: 0.5em;
      width: 100%; }
    div.user-setting div.item div.active {
      background-color: rgba(209, 209, 209, 0.8); }
    div.user-setting div.item i.loading {
      position: absolute;
      margin-left: auto !important;
      margin-right: auto !important;
      left: 0;
      right: 0; }
    div.user-setting div.item i.checkmark {
      color: #5BBD72; }

.no-of-new-messages {
  float: right; }

.user-setting .info-title {
  font-weight: bold;
  font-size: 1.2em;
  color: #414141; }
.user-setting .info-description {
  font-size: 1.2em;
  color: #414141; }

#support-container {
  padding: 14px;
  border: 1px solid #BEBEBE;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  position: relative;
  box-sizing: border-box; }
  #support-container legend .icon.comment {
    margin: 0px;
    color: #4877A5;
    font-size: 30px; }

.help-modal .content {
  padding: 14px; }
.help-modal .info-marker {
  margin-top: 5px;
  height: 3px;
  width: 14px; }

#timereports .fa-caret-right,
#timereports .fa-caret-down {
  width: 0.8em; }
#timereports .year {
  font-size: 1.6em;
  font-weight: bold;
  padding: 1.2em 0em 0.2em 0.2em; }
#timereports .month {
  font-size: 1.2em;
  font-weight: bold;
  padding: 1.2em 0em 0.6em 0.2em; }
#timereports .bookings {
  font-size: 1em; }
#timereports .total {
  font-weight: normal;
  float: left;
  text-align: right;
  width: 8em; }
#timereports .year,
#timereports .month,
#timereports .bookings {
  float: left;
  clear: both;
  width: 100%; }
#timereports .month .month-name {
  float: left;
  width: 7em; }
#timereports .month .details {
  float: right;
  position: relative;
  top: -0.6em;
  text-decoration: none; }
  #timereports .month .details .details-button {
    color: white;
    padding: 0.6em 0.8em;
    background-color: #4877A5;
    border-radius: 0.25em; }
#timereports .header {
  background-color: #e0e0e0;
  font-weight: normal !important; }
#timereports .date,
#timereports .time,
#timereports .worktime,
#timereports .break,
#timereports .absence {
  float: left;
  font-size: 1.2em;
  text-align: center;
  border: 1px #e0e0e0 solid;
  padding: 0em 0em;
  border-collapse: collapse;
  display: table-cell;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }
#timereports .absence {
  min-width: 1em;
  border: 0px !important; }
#timereports .worktime {
  width: 5.6em;
  position: relative; }
#timereports .break {
  width: 6em; }
#timereports .time {
  width: 6.5em; }
#timereports .date {
  width: 2em; }
#timereports .absence-mark {
  position: absolute;
  right: 2px;
  top: 2px; }

.fa-exclamation-triangle {
  color: #d22323; }

#iframe-container {
  position: absolute;
  top: 48px;
  left: 0px;
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
  display: none; }
  #iframe-container .close-button {
    position: fixed;
    z-index: 1000;
    bottom: 1em;
    left: 1em;
    padding: 1em 1.6em;
    font-size: 1.2em;
    font-weight: bold;
    color: white;
    background-color: #4877A5;
    border-radius: 0.25em; }

#iframe {
  width: 2600px;
  height: 2600px;
  background-color: grey; }

#main-info {
  padding: 0.2;
  font-size: 1.2em; }
  #main-info .info-header {
    font-weight: bold;
    font-size: 1.2em; }

#report-time .align-right {
  text-align: right; }
#report-time th, #report-time td {
  white-space: nowrap; }
#report-time #button-wrapper {
  margin-top: 1em; }
  #report-time #button-wrapper input {
    display: block;
    margin-bottom: 0.3em;
    width: 150px; }
#report-time #selection-wrapper {
  margin-bottom: 1em; }
#report-time #locked {
  margin-top: 1em;
  margin-bottom: 1em; }
#report-time #report-table table {
  color: #444;
  border-collapse: collapse; }
  #report-time #report-table table td, #report-time #report-table table th {
    border: 1px solid black;
    padding: 2px; }
  #report-time #report-table table .delete {
    text-align: center; }
    #report-time #report-table table .delete i {
      font-size: 1.6em;
      padding: 0.2em; }
#report-time .empty-table {
  border: 1px dashed #868686;
  text-align: center;
  width: 100%;
  padding-top: 2em;
  padding-bottom: 2em; }

.mobi-button {
  color: white;
  padding: 10px 20px;
  background-color: #4877A5; }

#bankid #bank-button-wrapper {
  margin-top: 2em;
  width: 100%;
  float: left; }
  #bankid #bank-button-wrapper #sign-abort {
    float: right; }
  #bankid #bank-button-wrapper #sign-sign {
    float: left; }

#report-time-add label {
  margin-top: 1em;
  display: block; }
#report-time-add .select {
  display: block;
  width: 100%; }
#report-time-add #time-pickers {
  float: left;
  clear: both;
  margin-bottom: 1em; }
#report-time-add .replacement-field {
  width: 100%; }
#report-time-add #fk3059 input {
  display: inline-block; }
#report-time-add .select-large {
  width: 80%; }
#report-time-add .select-medium {
  width: 24%; }
#report-time-add .mbsc-my-theme .dwwr {
  width: 80%; }

.select-remove-reasons {
  margin-top: 1px; }

img.bankid-icon {
  width: 120px;
  height: 120px;
  /*display: block */
  /*margin-left: 458px */ }

div.bankid-logo {
  width: 100%;
  text-align: center;
  display: inline-block;
  vertical-align: middle;
  padding-top: 15px;
  padding-bottom: 15px; }

div.bankid-info {
  width: 380px;
  display: inline-block;
  vertical-align: middle;
  margin-top: 8px; }

div.bankid-form {
  margin-left: 82px;
  width: 213px; }

table.school-info-extended td {
  padding-right: 1em;
}

table.event-extended {
  /* width: min-content; */
}

table.event-extended td {
  width: 50%;
  padding-right: 1em;
}

/*# sourceMappingURL=app.css.map */