.events_header,
#form_events_search {display: flex; align-items: end;}

#form_events_search .form_select_field {margin-right: 10px;}
#form_events_search .form_select_field label {display: block; line-height: 1;}
#form_events_search select {
  color: #072C50;
  background: #FFFFFF;
  border: 1px solid #CCD4DB;
  border-radius: 5px;
  padding: 8px;
  width: 120px;
}

.events_header .calendar-view {
  margin-right: 10px;
  display: inline-block;
  background: #BCBCBC;
  border-radius: 3px;
  padding: 3px 5px;
  width: 30px;
  height: 30px;
}
.calendar-view.active {background: #072C50;}
.calendar-view img {width: 20px;}

.calendar-wrapper {margin-top: 30px;}

.calendar-header {
  margin: 10px 0 20px;
  padding: 10px 0;
  border-top: 1px solid #ccd4db;
  border-bottom: 1px solid #ccd4db;
  align-items: center;
}

.calendar-header,
.calendar-days-titles {display: flex; justify-content: space-between; color: #072C50;}
.calendar-days-titles .calendar-mobile {display: none;}

.calendar-header h2,
.calendar-header a {color: #072C50; font-weight: 600;}

.calendar-body {margin: 0 -5px;}

.calendar-days-titles .calendar-col,
.calendar-day-wrapper {
  width: calc(100% / 7);
  padding: 5px;
}

.calendar-day-description-wrapper {width: 100%; padding: 5px;}

.calendar-days {display: flex; flex-wrap: wrap;}

.calendar-day {
  background: #FFFFFF;
  border: 1px solid #CCD4DB;
  border-top: 3px solid #F04636;
  padding: 10px 15px 20px;
  min-height: 230px; 
  width: 100%;
  height: 100%;
  position: relative;
}

.calendar-day.inactive {opacity: 0.3;}
.calendar-view-month .calendar-day:hover,
.calendar-view-month .calendar-day.expanded {
  background: #F2F2F2;
  border-left-color: #F2F2F2;
  border-right-color: #F2F2F2;
  border-bottom-color: #F2F2F2;
}
.calendar-view-month .calendar-day:not(.inactive):hover {margin-top: -3px; cursor: pointer;}

.calendar-day-header {padding: 5px 0; margin-bottom: 5px; border-bottom: 1px solid #CCD4DB; display: flex; justify-content: space-between; align-items: flex-end; }
.calendar-day-header.no-border {border: none;}
.calendar-day h2,
.calendar-day h4 span {font-weight: 600; line-height: 1;}
.calendar-day h4 {font-weight: 400; font-size: 1.1em; line-height: 1.5;}

.calendar-day-sports {font-weight: 600;}
i.sport-icon {
  display: inline-block;
  width: 15px;
  height: 15px;
}

i.sport-icon::before {color: #F04636;}
i.sport-icon.ssf-xctrack::before {
  content: '';
  width: 15px;
  height: 15px;
  background: url('https://www.llamastaygetaway.com/hubfs/Llama%20Stay/Website/Calendar/events-icon-running.svg') no-repeat 0 4px;
  background-size: 13px;
}

.calendar-day-info {position: absolute; bottom: 10px; right: 10px;}
.calendar-day-info i {display: inline-block; height: 20px; width: 20px; font-style: normal; background: #fff; border-radius: 20px; }
.calendar-day-info i::before {
  color: #F04636;
  content: "\f107";
  font-family: FontAwesome;
  font-size: 15px;
  font-weight: 700;
  position: absolute;
  left: 5px;
  top: -2px;
  transition: all .5s ease;
  display: inline-block;
}

.calendar-day.expanded .calendar-day-info i::before {
  transform: rotate(180deg);
}

.calendar-day-description-filter,
.calendar-day-description-for {display: none;}

.calendar-day-description-filter label {margin-left: 5px; margin-right: 30px;}
.calendar-day-description-filter label.active {font-weight: 600;}

.event-details {display: flex; align-items: center; padding: 10px 0; margin: 5px 0; border-top: 1px solid #ccd4db;}
.calendar-events-empty {display: none; padding: 10px 0; margin: 5px 0;}

.event-details .e-logo {width: 80px; margin-right: 20px; text-align: center;}
.event-details .e-logo img {max-height: 80px;}
.event-details .e-info-media {width: calc(100% - 100px); line-height: 1.5; display: flex; align-items: center;}
.event-details .e-info {width: 60%;}
.event-details .e-media {width: 40%; padding-left: 20px; text-align: right; line-height: 1.5;}
.event-details .e-info i.sport-icon {margin-left: -5px;}
.event-details .e-info .event-time,
.event-details .e-media a {color: #F04636; font-weight: 600;}

.calendar-view-week .calendar-day {min-height: 100px; padding: 5px 10px 5px;}
.calendar-view-week .calendar-day-header {display: block; border: none;}
.calendar-view-week .calendar-day-header h2 {font-size: 1.4em;}
.calendar-view-week .calendar-day-header h2 span {font-weight: 400;}
.calendar-view-week .calendar-day-header h4 {margin-top: 10px; padding-top: 10px; line-height: 1; font-size: 1em;}
.calendar-view-week .calendar-day-header h2 span.for-mobile {display: none;}

.calendar-view-week .calendar-day-description-for {display: block; background: #fff; padding: 10px;}
.calendar-view-week .calendar-day-description-for .event-details:first-child {border: none;}

.calendar-day-description-for-header {display: flex; justify-content: space-between; padding: 30px 0 10px;}
.calendar-day-description-for-header h4 {font-size: 1.4em; font-weight: 600;}
.calendar-day-description-for-header h4 span {font-weight: 400;}

@media (max-width: 991px) {
  .events_header,
  .calendar-wrapper {padding: 0 10px;}
}

@media (max-width: 767px) {
  .calendar-day-wrapper {padding: 2px;}
  .calendar-header h2 {font-size: 1.6em; padding: 0 5px; text-align: center;}
  .calendar-header img {max-height: 12px;}
  .calendar-days-titles .calendar-desktop,
  .calendar-view-week .calendar-day-header h2 span.for-desktop {display: none;}
  .calendar-days-titles .calendar-mobile,
  .calendar-view-week .calendar-day-header h2 span.for-mobile {display: block;}
  .calendar-day {min-height: 130px; padding: 5px 5px 20px;}
  .calendar-day h2 {font-size: 1.6em;}
  .calendar-day-header {display: block; border: none;}
  .calendar-view-week .calendar-day {padding: 5px;}
  .calendar-day-description-for-header h4 {font-size: 1.2em;}
  .calendar-day-header h4 {border-top: 1px solid #ccd4db; margin-top: 10px; padding-top: 10px; line-height: 1; font-size: 1em;}
  .calendar-day-header h4 span {font-size: 1.2em;}
  .calendar-day-sports {display: none;}
  .calendar-day-info {bottom: 0; left: 5px; right: auto;}
  .event-details .e-info-media {display: block;}
  .event-details .e-media,
  .event-details .e-info {width: 100%; text-align: left; padding: 0;}
  .calendar-day-description-filter label {margin-right: 15px;}
  
  .event-details .e-logo img {max-height: 60px;}
  .event-details .e-info-media {width: calc(100% - 80px);}
}

@media(max-width: 500px) {
  .calendar-view-week .calendar-day-header h2 {font-size: 1.2em;}
   .calendar-day-header h4 {font-size: 0.8em;
}