/* Add common styles in this file, yeah */

* {
  outline: none !important;
}

/* Very Very important and needed for layout to not make developers crazy */
#mount {
  position: static;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: hidden;
}

.box {
  border: 1px solid gainsboro;
  width: 4rem;
  aspect-ratio: 2/1;
}
.fully-booked {
  background: repeating-linear-gradient(45deg, #fff, #fff 6px, #ffe0e0 6px, #ffe0e0 12px);
}

.sticky,
tr.sticky th {
  position: sticky !important;
  background: white !important;
  top: 0;
  z-index: 100;
}

.sticky.padded,
tr.sticky.padded th {
  top: 70;
}

.ui.calendar .ui.table tr td.link:not(.disabled),
.can-be-booked {
  background-color: rgba(41, 187, 155, 0.212);
}

.ui.calendar .ui.table tr td.link.active,
.ui.calendar .ui.table tr td.link:not(.disabled):hover {
  background-color: rgb(41, 187, 156) !important;
}

.ui.calendar .ui.table tr .adjacent {
  color: transparent;
}

div.pushable {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
div.pusher,
div.pushable > div.pusher {
  position: fixed !important;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

/** link items **/
.link {
  cursor: pointer;
}

/* Calendar fixes */
.rbc-slot-selection {
  background-color: darkorange !important;
  border-radius: 4px;
  margin-top: 0em !important;
}
.rbc-day-slot .rbc-event {
  border: none;
}
.rbc-current-time-indicator,
.rbc-current-time-indicator::before {
  background: darkorange;
}
.rbc-date-cell.rbc-now {
  color: darkorange;
}

/** This one is very very importent */
.rbc-month-view .rbc-event,
.rbc-event-allday {
  height: 22px !important;
}
.rbc-event-allday {
  overflow: hidden;
}

.rbc-time-view .rbc-event:hover {
  display: block;
  min-height: 120px !important;
}

/* Global style changes */
html,
body {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

body {
  background-color: #fcfcfc;
}

/** NOTE: can be removed when the classic widget is no longer in use */
body.widget {
  background-color: transparent !important;
}

.ui.segment {
  color: #000;
}

a {
  color: rgb(41, 187, 156);
}

a:hover {
  /*color: #5b3370;*/
  color: rgb(41, 187, 156);
  text-decoration: underline;
  font-weight: thin;
}

.ui.inverted.list .item a:not(.ui):hover {
  color: rgb(41, 187, 156) !important;
}

.hidden.menu {
  display: none;
}

.masthead.segment {
  min-height: 300px;
  height: 60vh;
  width: 100%;
  max-height: 800px;
  overflow: hidden;
  z-index: -1000;
  margin-bottom: -57px;
}

@media (min-width: 700px) and (max-width: 1100px) {
  .masthead.segment {
    height: 42vh;
  }
}

.masthead .logo.item img {
  margin-right: 1em;
}
.masthead .ui.menu .ui.button {
  margin-left: 0.5em;
}

.masthead .ui.menu {
  margin: 0 !important;
}
.masthead h1.ui.header {
  margin-top: 3em;
  margin-bottom: 0em;
  font-size: 4em;
  font-weight: normal;
}
.masthead h2 {
  font-size: 1.7em;
  font-weight: normal;
}

.ui.vertical.stripe {
  padding: 8em 0em;
}
.ui.vertical.stripe h3 {
  font-size: 2em;
}
.ui.vertical.stripe .button + h3,
.ui.vertical.stripe p + h3 {
  margin-top: 3em;
}
.ui.vertical.stripe .floated.image {
  clear: both;
}
.ui.vertical.stripe p {
  font-size: 1.33em;
}
.ui.vertical.stripe .horizontal.divider {
  margin: 3em 0em;
}

.quote.stripe.segment {
  padding: 0em;
}
.quote.stripe.segment .grid .column {
  padding-top: 5em;
  padding-bottom: 5em;
}

.footer.segment {
  padding: 5em 0em;
}

.secondary.pointing.menu .toc.item {
  display: none;
}

@media only screen and (max-width: 768px) {
  .ui.vertical.stripe {
    padding: 4em 0 4em 0;
  }

  /*.ui.fixed.menu {
    display: none !important;
    }
    .secondary.pointing.menu .item,
    .secondary.pointing.menu .menu {
    display: none;
    }
    .secondary.pointing.menu .toc.item {
    display: block;
    }
    .masthead.segment {
    min-height: 350px;
    }
    .masthead h1.ui.header {
    font-size: 2em;
    margin-top: 1.5em;
    }
    .masthead h2 {
    margin-top: 0.5em;
    font-size: 1.5em;
    }*/
}

.rbc-event.ui.card {
  margin: 0;
}

a.ui.card.hover {
  -webkit-transform: none;
  -ms-transform: none;
  transform: none;
}

a.ui.card.hover:hover {
  cursor: pointer;
  z-index: 5;
  background: #fff;
  border: none;
  box-shadow: 0 1px 3px 0 #bcbdbd, 0 0 0 1px #d4d4d5;
  -webkit-transform: translateY(-3px);
  -ms-transform: translateY(-3px);
  transform: translateY(-3px);
}

.ui.cards > .green.card:hover,
.ui.green.card:hover,
.ui.green.cards > .card:hover {
  box-shadow: 0 0 0 1px #d4d4d5, 0 2px 0 0 rgb(41, 187, 156), 0 1px 3px 0 #bcbdbd;
}

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
  -khtml-user-select: none; /* Konqueror HTML */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

/* header menu navbar changes */
div.ui.inverted.segment.right.menu .item {
  color: #fff;
}
div.ui.inverted.segment.right.menu .item:hover {
  color: #329680;
}
div.ui.inverted.segment.right.menu .item.active span {
  color: #29bb9c;
}
div.ui.inverted.segment.right.menu .item.active {
  border-bottom-color: #29bb9c !important;
}
div.ui.inverted.segment.right.menu .item.active:hover {
  color: #29bb9c;
}

div.ui.secondary.menu .item:hover {
  background: none;
}

.ui.selection.list .item {
  margin-bottom: 2px;
}
.ui.selection.list .item.active {
  background: rgb(236, 236, 236);
}
.ui.selection.list .item.active:hover {
  background: rgb(236, 236, 236);
}

/* Map card arrow */
.bottom-arrow {
  position: relative;
  background-color: #ffffff;
  width: 100% !important;
}

.bottom-arrow:after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -16px;
  width: 0;
  height: 0;
  border-top: solid 20px #ffffff;
  border-left: solid 15px transparent;
  border-right: solid 15px transparent;
}

/* Override google maps built-in styling */
.gm-style {
  font-size: 14px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.87);
}

.gm-style h3.title {
  font-weight: 700;
}

.gm-style span {
  color: grey;
  font-family: Lato, 'Helvetica Neue', Arial, Helvetica, sans-serif;
  line-height: 1.4285em;
}
.gm-style span.price {
  font-size: 0.9em;
}

.gm-style span.subtext {
  font-size: 0.8em;
}

.gm-style span.property-name {
  font-size: 0.8em;
  color: rgba(0, 0, 0, 0.87);
}

/* Style for map cluster icons */

.gm-style div.cluster {
  z-index: 3;
}

.ui.inverted.orange.menu .active.item {
  color: #29bb9c !important;
  text-decoration: underline;
}

.custom-overlay {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  position: fixed;
  background: #000a;
  z-index: 100;
  overflow-y: auto;
}

/* TODO: style inverted secondary menu as well */

/* Personnel on inventory list */
.personnel-item {
  border-radius: 3px;
  padding: 1px 2px;
  background-color: white;
  margin-right: 0;
}

.personnel-item:hover {
  background-color: salmon;
  text-decoration: line-through;
}

.add-personnel {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  outline: none;
  border: none;
}

/* Added tiny size for semantic modal */
@media only screen and (max-width: 767px) {
  .ui.tiny.modal {
    width: 80%;
    margin: 0em 0em 0em -40%;
  }
}

@media only screen and (min-width: 768px) {
  .ui.tiny.modal {
    width: 400px;
    margin: 0em 0em 0em -200px;
  }
}

@media only screen and (min-width: 992px) {
  .ui.tiny.modal {
    width: 400px;
    margin: 0em 0em 0em -200px;
  }
}

@media only screen and (min-width: 1200px) {
  .ui.tiny.modal {
    width: 400px;
    margin: 0em 0em 0em -200px;
  }
}

@media only screen and (min-width: 1920px) {
  .ui.tiny.modal {
    width: 400px;
    margin: 0em 0em 0em -200px;
  }
}

/** Use this class if element should be hidden on print */
@media print {
  .no-print,
  .no-print * {
    display: none !important;
  }
}