.parking-calendar {
  margin-bottom: 30px; }
  .parking-calendar__lead {
    margin-bottom: 20px;
    text-align: center; }
  .parking-calendar__nav {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    margin-bottom: 20px; }
  .parking-calendar__nav-prev,
  .parking-calendar__nav-next {
    border: 1px solid #d1d1d1;
    border-radius: 50%;
    background-color: #fff;
    width: 36px;
    height: 36px;
    font-size: 1.6rem;
    color: #004582;
    cursor: pointer; }
    .parking-calendar__nav-prev:disabled,
    .parking-calendar__nav-next:disabled {
      opacity: 0.3;
      cursor: default; }
  .parking-calendar__nav-prev {
    margin-right: 20px; }
  .parking-calendar__nav-next {
    margin-left: 20px; }
  .parking-calendar__months {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center; }
  .parking-calendar__month-block {
    margin: 0 0 20px;
    width: 100%;
    max-width: 420px; }
  .parking-calendar__month-label {
    margin-bottom: 10px;
    font-size: 2.0rem;
    font-weight: bold;
    text-align: center; }
  .parking-calendar .price-calendar-table td {
    height: 56px;
    text-align: center;
    vertical-align: middle;
    cursor: pointer; }
  .parking-calendar .price-calendar-table td .day-text {
    font-size: 1.8rem; }
  .parking-calendar .price-calendar-table td.is-selected {
    outline: 3px solid #004582;
    outline-offset: -3px; }
  .parking-calendar__detail {
    margin: 0 auto;
    padding: 15px 20px;
    max-width: 400px;
    border: 1px solid #d1d1d1;
    background-color: #f6f6f6;
    text-align: center; }
    .parking-calendar__detail-placeholder {
      margin: 0;
      color: #777; }
    .parking-calendar__detail-date {
      margin: 0;
      font-weight: bold; }
    .parking-calendar__detail-price {
      margin: 5px 0 0;
      font-size: 2.4rem;
      font-weight: bold;
      color: #004582; }
  @media screen and (max-width: 640px) {
    .parking-calendar__month-label {
      font-size: 1.7rem; }
    .parking-calendar .price-calendar-table td.is-selected {
      outline-offset: -2px; } }