.sb-calendar {
  font-family: @font-family-sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5em;
  display: block;
  margin: 0 auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;

  * {
    box-sizing: border-box;
  }
  table {
    width: 100%;
  }
  th {
    text-transform: uppercase;
    letter-spacing: 0.1vw;
    font-weight: 300;
    color: @calendar-heading-color;
    text-align: center;
  }
  th, td button {
    padding: 1vw;
  }
  td {
    height: 100%;
    color: @calendar-cell-color;
    display: flex;
    margin: 2px 2px;
    button {
      width: 100%;
      height: 100%;
      overflow: auto;
      border: none;
      border: 1px solid #DDDDDD;
      border-radius: 10px;
      transition: 0.3s ease-out;
      font-size: 1em;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-direction: column;
      overflow: hidden;
      &[aria-disabled="true"] {
        background: #F6F6F6;
        color: @calendar-disabled-cell-color;
        pointer-events: none;
        color: @gray;
      }
      &[aria-disabled="false"] {
        background: @color-white;
        cursor: pointer;
        &:hover {
          background: @calendar-cell-hover;
          color: @color-white;
          transition: 0.3s ease-out;
          span {
            color: inherit;
          }
        }
      }
      .calendar-event {
        display: flex;
        justify-content: flex-end;
        width: 100%;
        .event-marker-star {
          margin-top: 0;
        }
      }
    }
    @media (max-width: 400px) {
      margin: 2px 1px;
      button {
        font-size: 14px;
        span {
          font-size: 12px;
        }
      }
    }
    @media (max-width: 280px) {
      margin: 2px 0;
    }
  }

  td.day span {
    font-size: 75%;
    display: block;
  }
  td.day button.selected,
  td.day button.selected span {
    background: @calendar-cell-selected;
    color: @calendar-cell-selected-color;
  }
  td.day button.selected span {
    font-weight: 500
  }
  td.cheapest span {
    color: darken(@calendar-cheapest, 20%);
    font-weight: bold;
  }
  .navigation {
    text-align: center;
    h2 {
      display: inline;
      margin: 0;
      color: @calendar-heading-color;
    }
    button {
      border: none;
      background: none;
      font-size: 40px;
      margin-top: -7px;
      padding-right: 1.5vw;
      padding-left: 1.5vw;
      &[aria-disabled="false"]:hover {
        color: @brand-primary;
      }
      &[aria-disabled="true"] {
        color: @gray-light;
      }
    }
  }

  @media (max-width: 480px) {
    .hide-xs {
      display:none;
    }
  }
}
@supports (display:flex) {
  .sb-calendar {
    table {
      display: flex;
      flex-direction: column;
    }
    .row { // remove the row class from template
      display: flex;
      flex: 1 1 0;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: space-between;
      margin-right: 0;
      margin-left: 0;
    }
    .row.navigation {
      justify-content: center;
    }
    th, td {
      flex: 1 1 0;
    }
    td {
      height: auto;
      width: 0;
      button {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-direction: column;
        font-weight: bolder;
        span {
          font-weight: normal;
        }
      }
    }
  }
}
.btn-price-finder {
  display: table;
  .button-variant(@btn-brand-color; @btn-brand-bg; @btn-brand-border);
  font-family: @headings-font-family;
  .mt-2;
}

.btn-price-finder span:first-of-type {
  vertical-align: middle;
  display: table-cell;
}

.btn-price-finder span:nth-child(2) {
  display: table-cell;
  text-align: center;
  width: 100%;
}

.price-finder {
  .modal-title {
    padding-left: 0;
    margin-top: 0;

    .price-finder-subheading {
      display: flex;
      justify-content: center;
      font-size: 12px;
      opacity: .9;
      max-width: 75%;
      margin: auto;

      span {
        margin-left: -15px;
      }

      @media (min-width: @screen-sm) {
        justify-content: flex-start;
        max-width: 90%;
        margin-left: 0;

        span {
          margin-left: 0;
        }
      }
    }
  }
  .modal-header {
    .close {
      border: 2px solid @color-white;
      height: 30px;
      width: 30px;
      margin-top: 6px;
      border-radius: 50%;
      .opacity(.5);
    }
    .close:first-child {
      font-size: 25px;
      color: @color-white;
    }
    .close:hover {
      .opacity(.7);
    }
  }

  .modal-content {
    border-radius: 18px;
    background-color: @color-white;
    .modal-title {
      padding-left: 10px;
      svg {
        width: 23;
        height: 23;
        margin-bottom: 6px;
      }
    }
  }

  .modal-footer {
    border-top: unset;
    border-top: none;
    background-color: @gray-lighter;
    border-radius: 0 0 16px 16px;
    .calendar-events {
      display: flex;
      flex-wrap: wrap;
      text-align: left;
      .calendar-event-names {
        display: flex;
        height: 15px;
        font-size: 12px;
        font-weight: bold;
        margin-right: 10px;
        align-items: center;
        p {
          margin-left: 12px;
        }
        .event-marker-triangle {
          margin-left: -2px;
        }
        .event-marker-square {
          margin-left: -1px;
        }
        .event-marker-diamond {
          margin-top: -11px;
          margin-left: -2px;
        }
        .event-marker-crescent {
          margin-left: -6px;
          margin-top: -1px;
        }
        .event-marker-heart {
          margin-top: -8px;
          margin-left: 7px;
        }
        .event-marker-drop {
          margin-top: 2px;
        }
      }
    }
    p {
      margin: 0;
      font-size: 12px;
    }
    small {
      color: @gray;
    }
  }
} 

.event-marker-circle {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: orange;
}

.event-marker-triangle {
  position: absolute;
  width: 0; 
  height: 0; 
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 6px solid red;
}

.event-marker-star {
  position: absolute;
  display: inline-block;
  margin-right: 2px;
  width: 0;
  height: 0;
  margin-bottom: 0.6em;
  margin-top: -4px;
  border-right:  2px solid transparent;
  border-bottom: 4px  solid #FC0;
  border-left:   .4em solid transparent;
  font-size: 6px;
  &:before, &:after {
    content: '';
    display: block;
    width: 0;
    height: 0;
    position: absolute;
    top: .5em;
    left: -1em;
    border-right:  1em solid transparent;
    border-bottom: .7em  solid #FC0;
    border-left:   1em solid transparent;
    transform: rotate(-35deg);
  }
  &:after {  
    transform: rotate(35deg);
  }
}

.event-marker-square {
  position: absolute;
  width: 8px;
  height: 8px;
  background-color: rgb(10, 233, 22);
}

.event-marker-diamond {
  width: 0;
  height: 0;
  border: 5px solid transparent;
  border-bottom-color: rgb(0, 204, 255);
  position: absolute;
  margin-top: -6px;
  &:after {
    content: '';
    position: absolute;
    left: -5px;
    top: 5px;
    width: 0;
    height: 0;
    border: 5px solid transparent;
    border-top-color: rgb(0, 204, 255);;
  }
}

.event-marker-crescent {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  box-shadow: 3px 0 0 0 red;
  position: absolute;
  margin-right: 2px;
}

.event-marker-heart {
  position: absolute;
  width: 0;
  height: 0;
  &:before, &:after {
    position: absolute;
    content: "";
    width: 5px;
    height: 8px;
    left: -3px;
    background: #f53beb;
    border-radius: 5px 5px 0 0;
    transform: rotate(-45deg);
    transform-origin: 0 100%;
  }
  &:after {
    left: -8px;
    transform: rotate(45deg);
    transform-origin: 100% 100%;
  }
}

.event-marker-drop {
  position: absolute;
  width: 8px;
  height: 8px;
  background-color: #4f4bdd;
  border-radius: 0 50% 50% 50%;
  transform: rotate(45deg);
}

.event-marker-half-circle {
  position: absolute;
  height: 8px;
  width: 8px;
  background-color: #7b00ef;
  border-radius: 50% 50% 0 0;
}

@media (max-width: @screen-sm-min) {
  .price-finder {
    .modal-title {
      text-align: center;
    }
  }
}

.panel.has-extra-night {
  .book-btn {
    padding-left: 0;
    padding-right: 0;
  
    @media (min-width: @screen-xs) {
      .px-3;
    }
  }

  .btn-price-finder {
    .px-1;

    @media (min-width: @screen-xs) {
      .px-3;
    }
  }
}