/**  Events Manager custom calendar styles */

.em-kalendar-strap {
  position: absolute;
  top: 200px;
  width: 100%;
  background-color: #5a8128;
  height: 400px;
}

.em-kalendar {
  width: 100%;
  z-index: 10;
}

.em-kalendar-title-container {
  display: flex;
  align-items: center;
  background-color: #5a8128;
  height: 80px;
  border-top-left-radius: var(--border-radius);
  border-top-right-radius: var(--border-radius);
  h2 {
    text-align: center;
    margin: auto;
    color: white;
  }
}

.em-k-dates-container {
  background-color: #a4ba89;
  width: 100%;
  border-bottom-left-radius: var(--border-radius);
  border-bottom-right-radius: var(--border-radius);
}

.em-k-dates-wrapper {
  padding: 10px 20px 40px 20px;
}

.em-kalender-dates {
  column-count: 1;
  width: 100%;
  padding-top: 15px;

  @media screen and (min-width: 700px) {
    column-count: 2;
  }

  @media screen and (min-width: 1000px) {
    column-count: 3;
  }

  .em-k-dates-column {
    display: flex;
    width: 100%;
    flex-direction: column;
  }
}

.em-k-monthcontainer {
  background-color: white;
  break-inside: avoid;
  box-shadow: 10px 5px 9px rgb(15, 15, 15, 0.3);
  margin-bottom: 25px;
  margin-left: 10px;
  margin-right: 10px;
  border-radius: 3px;

  .em-k-month-wrapper {
    padding-left: 10px;
    padding-top: 10px;
    padding-bottom: 14px;

    .em-k-monthtitle-container {
      display: flex;
      position: relative;
      margin: auto;
      padding: 3px;
      align-items: end;
      background-color: #e6007e;
      h3 {
        color: white;
        margin-left: 5px;
        margin-top: 0;
        margin-bottom: 0;
        text-shadow: 2px 2px 3px rgb(15, 15, 15, 0.7);
      }

      .month-icon {
        position: absolute;
        right: 20px;
        bottom: 5px;
        img {
          width: 55px;
        }
      }
    }
  }
}
.em-k-events-grp {
  min-height: 50px;
  ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    margin-top: 5px;
    padding-right: 3px;

    li {
      margin-top: 0.7em;
      margin-bottom: 0.7em;
      .event-cnt {
        .event-cnt-header {
          display: flex;
          align-items: center;
          .clr-day {
            font-size: 1.4em;
            width: 27px;
            text-align: center;
            font-weight: bold;
            white-space: nowrap;
          }
          .clr-headertext {
            margin-left: 0.5em;
            font-size: 1.3em;
          }
        }
        .event-cnt-subtext {
          color: grey;
          margin-left: 2.7em;
          font-size: 0.9em;
        }
      }
    }
  }

  .empty-text {
    color: grey;
    margin-top: 0.2em;
    margin-bottom: 1.3em;
  }
}
/**  Events Manager custom calendar styles */