.popover {
  max-width: 350px;
  text-align: center;
  z-index: 1;
}

.popover-btn small {
  font-size: 14px !important;
  line-height: 19px !important;
  text-decoration: none !important;
  color: #ffff00;
  cursor: pointer !important;
}

.event-special {
  color: white;
  background-color: #ff0000;
  font-weight: 700;
  border: solid black 2px;
  border-radius: 4px;
  padding: 2px 6px 2px 6px;
  line-height: 1.4;
}

#ucal {
  position: sticky;
  width: 90%;
  z-index: 2;
  top: 162px;
  height: 46px;
  margin-bottom: 1px;
  background: #343A40;
}

@media (min-width: 576px) {
  #ucal {
    top: 110px;
  }
}

@media (min-width: 576px) {
  #ucal {
    height: 58px;
  }
}

@media (min-width: 768px) {
  #ucal {
    top: 109px;
    width: 100%;
  }
}

@media (min-width: 992px) {
  #ucal {
    top: 128px;
    width: 100%;
  }
}

@media (min-width: 768px) {
  #ucal:before {
    content: "";
    position: absolute;
    top: 0;
    left: -12px;
    height: 58px;
    width: 12px;
    background: #343a40;
  }
}

@media (min-width: 768px) {
  #ucal:after {
    content: "";
    position: absolute;
    top: 0;
    right: -12px;
    height: 58px;
    width: 12px;
    background: #343a40;
  }
}

@media (min-width: 768px) {
  #cal .ext-next:after {
    content: " ";
    display: block;
    position: absolute;
    top: 38px;
    right: -11px;
    background-color: inherit;
    z-index: 2;
    padding: 4px 8px;
    white-space: pre;
  }
}

@media (min-width: 768px) {
  #cal .ext-prev:before {
    content: " ";
    display: block;
    position: absolute;
    top: 38px;
    left: -11px;
    background-color: inherit;
    z-index: 2;
    padding: 4px 8px;
    white-space: pre;
  }
}

#year {
  font-size: 20px;
  font-weight: 700;
  width: 100%;
  text-align: center;
}

@media (min-width: 576px) {
  #year {
    font-size: 28px;
  }
}

@media (max-width: 767px) {
  #cal {
    position: relative;
    left: 1px;
    width: 90%;
  }
}

@media (min-width: 768px) {
  #cal {
    position: relative;
    padding: 0;
    left: 4px;
  }
}

@media (min-width: 768px) {
  #cal .seven-cols .col-md-1, .seven-cols .col-sm-1, .seven-cols .col-lg-1 {
    width: 100%;
    max-width: 14.285714285714285714285714285714% !important;
    flex: none !important;
  }
}

@media (min-width: 992px) {
  #cal .seven-cols .col-md-1, .seven-cols .col-sm-1, .seven-cols .col-lg-1 {
    width: 14.285714285714285714285714285714%;
  }
}

@media (min-width: 1200px) {
  #cal .seven-cols .col-md-1, .seven-cols .col-sm-1, .seven-cols .col-lg-1 {
    width: 14.285714285714285714285714285714%;
  }
}

#cal .weekday {
  position: sticky;
  z-index: 1;
  top: 166px;
}

@media (min-width: 992px) {
  #cal .weekday {
    position: sticky;
    z-index: 1;
    top: 187px;
  }
}

#cal .day-blank {
  border: solid 1px #000;
  background: #ebebeb;
  margin: -1px 0 0 -1px;
  min-height: 100%;
}

#cal .date:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 32px;
  width: 100%;
  z-index: -1;
  background: #d2d2d2;
}

#cal .date {
  font-family: 'Roboto Condensed';
  font-size: 22px;
  margin-bottom: -1px;
  font-weight: 700;
}

@media (min-width: 768px) {
  #cal .date {
    margin-bottom: 2px;
  }
}

#cal .day {
  border: solid 1px #000;
  margin: -1px 0 0 -1px;
  min-height: 100%;
}

#cal .days {
  background: rgb(88,88,88);
}

#cal .days p {
  font-family: 'Roboto Condensed';
  font-size: 17px;
  font-weight: 700;
  color: white;
  margin-bottom: 0;
  padding: 8px 0 7px 0;
}

@media (min-width: 992px) {
  #cal .days p {
    font-size: 19px;
  }
}

#cal .bg-events {
  position: relative;
  z-index: 0;
}

@media (min-width: 768px) {
  #cal .bg-events {
    min-height: 135px;
  }
}

#cal .event {
  font-family: 'Roboto Condensed';
  font-size: 16px;
  margin: 6px 2px;
  padding: 4px;
  word-wrap: break-word;
  border-radius: 4px;
  text-align: center;
}

@media (min-width: 768px) {
  #cal .event {
    font-size: 14px;
  }
}

@media (min-width: 992px) {
  #cal .event {
    letter-spacing: normal;
    font-size: 15px;
    line-height: 1.3;
  }
}

@media (min-width: 1200px) {
  #cal .event {
    font-size: 16px;
  }
}

@media (min-width: 768px) {
  #cal .ext-next:after {
    content: " ";
    display: block;
    position: absolute;
    top: 39px;
    right: -11px;
    background-color: inherit;
    z-index: 2;
    padding: 4px 8px;
    white-space: pre;
  }
}

@media (min-width: 768px) {
  #cal .ext-prev:before {
    content: " ";
    display: block;
    position: absolute;
    top: 39px;
    left: -11px;
    background-color: inherit;
    z-index: 2;
    padding: 4px 8px;
    white-space: pre;
  }
}

#cal .event-spec {
  text-align: center;
  background-color: rgb(255,238,178);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  border: solid #000 2px;
  border-radius: 4px;
  margin: 6px 2px;
  padding: 4px;
}

@media (min-width: 768px) {
  #cal .event-spec {
    font-size: 16px;
  }
}

@media (min-width: 992px) {
  #cal .event-spec {
    font-size: 18px;
  }
}

#cal .event-spec-2 {
  text-align: center;
  color: white;
  background-color: #ff0000;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  border: solid #000 2px;
  border-radius: 4px;
  margin: 6px 2px;
  padding: 4px;
}

@media (min-width: 768px) {
  #cal .event-spec-2 {
    font-size: 16px;
  }
}

@media (min-width: 992px) {
  #cal .event-spec-2 {
    font-size: 18px;
  }
}

#cal .bg-closed {
  background: #ebebeb;
}

#cal .bg-danger {
  background-color: #ff0000!important;
}

/* Special Events Section On Bottom */

#calevent p {
  font-size: 18px;
}

#calevent .border-bot {
  border-bottom: solid 15px rgba(0,0,0,0.1);
}

#calevent .special-date {
  padding: 12px;
  color: white;
  background: #ff0000;
  border-radius: 4px;
  font-size: 40px;
  font-weight: 700;
  line-height: 26px;
  min-width: 60px;
  width: auto;
}

#calevent .cal-month {
  font-size: 20px;
  font-weight: 700;
}

#calevent h4, .h4 {
  font-size: 22px;
  font-weight: 700;
}

@media (min-width: 576px) {
  #calevent h4, .h4 {
    font-size: calc(17px + 1vw);
  }
}

@media screen and (min-width:1200px) {
  #calevent h4, .h4 {
    font-size: 30px;
  }
}

#calevent h5, .h5 {
  font-size: 18px;
  font-weight: 700;
}

@media (min-width: 576px) {
  #calevent h5, .h5 {
    font-size: calc(15px + .6vw);
  }
}

@media screen and (min-width:1200px) {
  #calevent h5, .h5 {
    font-size: 24px;
  }
}

#calevent a {
  text-decoration: none;
  transition: all .3s;
}

#calevent a:hover {
  text-decoration: none;
  transition: all .3s;
}

#calevent .bg-header {
  background: #ebebeb;
}

/* Scroll Margins */

.se {
  scroll-margin: 176px;
}

@media (min-width: 576px) {
  .se {
    scroll-margin: 120px;
  }
}

@media (min-width: 992px) {
  .se {
    scroll-margin: 140px;
  }
}

.sm {
  scroll-margin: 230px;
}

@media (min-width: 576px) {
  .sm {
    scroll-margin: 180px;
  }
}

@media (min-width: 992px) {
  .sm {
    scroll-margin: 200px;
  }
}