#contentWrapper .eventplan-line {
   background: #EFEFEF;
   padding: 8px 6px;
   margin: 4px 2px;
   position: relative;
   min-height: 44px;
   border: 1px solid #133d55;
}

#contentWrapper .eventplan-line.is-last {
   margin-bottom: 0px;
}

#contentWrapper .eventplan-line.is-bookable {
   background: #EDF3F3;
}

#contentWrapper .eventplan-line.is-booked {
   background: #DFF3D9;
}

#contentWrapper .eventplan-line.is-not-booked {
   background: #F3E0D9;
}

#contentWrapper .eventplan-line.is-booked li.book-in {
   display: none;
}
#contentWrapper .eventplan-line.is-not-booked li.book-out {
   display: none;
}

#contentWrapper .eventplan-line h3 {
   font-size: 0.8em;
   font-weight: bold;
   font-family: Arial,Helvetica,sans-serif;
   padding: 0;
   margin: -4px 0 0 40px;
   color: #000;
   line-height: 1.4em;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}

#contentWrapper .eventplan-line.is-bookable h3 {
   margin: -4px 78px 0 40px;
}

#contentWrapper .eventplan-line.is-bookable.is-booked h3 ,
#contentWrapper .eventplan-line.is-bookable.is-not-booked h3 {
   margin: -4px 40px 0 40px;
}

#contentWrapper .eventplan-line h3 span {
   font-size: 1em;
}

#contentWrapper .eventplan-line .date {
   font-size: 0.8em;
   font-family: Arial,Helvetica,sans-serif;
}

@media screen and (max-width : 800px) {

   #contentWrapper .eventplan-line h3 {
       font-size: 0.9em;
   }
}

@media screen and (max-width : 640px) {

   #contentWrapper .eventplan-line h3 {
       font-size: 0.8em;
   }

   #contentWrapper .eventplan-line .date {
       font-size: 0.75em;
   }
}

@media screen and (max-width : 480px) {

   #contentWrapper .eventplan-line h3 {
       font-size: 0.7em;
   }

   #contentWrapper .eventplan-line .date {
       font-size: 0.7em;
   }
}

#contentWrapper .eventplan-line .date {
   margin-left: 40px;
   display: inline-block;
}

#contentWrapper #pageContent .eventplan-line ul {
   height: 32px;
   list-style-type: none;
   padding: 0;
   margin: 0;
   position: absolute;
   right: 6px;
   top: 6px;
}

#contentWrapper #pageContent .eventplan-line ul li {
   height: 30px;
   width: 30px;
   padding: 0;
   margin: 0 0 0 6px;
   float: left;
   cursor: pointer;
}

#contentWrapper #pageContent .eventplan-line ul li.book-in {
   background: rgba(81, 146, 16, 0.5);
   border: 1px solid rgba(81, 146, 16, 0.8);
}

#contentWrapper #pageContent .eventplan-line ul li.book-out {
   background: rgba(230, 84, 1, 0.5);
   border: 1px solid rgba(230, 84, 1, 0.8);
}

#contentWrapper #pageContent .eventplan-line ul li.book-in:hover,
#contentWrapper #pageContent .eventplan-line ul li.book-in.active,
#contentWrapper #pageContent .eventplan-line ul li.book-in.inactive:hover {
   background: rgba(81, 146, 16, 0.8);
   border: 1px solid rgba(81, 146, 16, 1);
}

#contentWrapper #pageContent .eventplan-line ul li.book-out:hover,
#contentWrapper #pageContent .eventplan-line ul li.book-out.active,
#contentWrapper #pageContent .eventplan-line ul li.book-out.inactive:hover {
   background: rgba(230, 84, 1, 0.8);
   border: 1px solid rgba(230, 84, 1, 1);
}

#contentWrapper #pageContent .eventplan-line ul li.book-in.inactive {
   background: rgba(81, 146, 16, 0.2);
   border: 1px solid rgba(81, 146, 16, 0.4);
}

#contentWrapper #pageContent .eventplan-line ul li.book-out.inactive {
   background: rgba(230, 84, 1, 0.2);
   border: 1px solid rgba(230, 84, 1, 0.4);
}
/*
#contentWrapper #pageContent .eventplan-line ul li.book-in.active,
#contentWrapper #pageContent .eventplan-line ul li.book-out.active {
   border: 1px solid #FFF;
}*/

#contentWrapper #pageContent .eventplan-line ul li i {
   display: block;
   height: 30px;
   width: 30px;
   line-height: 30px;
   text-align: center;
   color: #FFF;
   font-size: 2em;
}

.bookingrespond-yes {
    -webkit-animation: bookingrespondYes 1.5s; /* Chrome, Safari, Opera */
    animation: bookingrespondYes 1.5s;
}
.bookingrespond-no {
    -webkit-animation: bookingrespondNo 1.5s; /* Chrome, Safari, Opera */
    animation: bookingrespondNo 1.5s;
}

.sort-link.current-sorted {
   font-weight: bold;
}

.sorted-asc::after,
.sorted-desc::after {
   display: inline-block;
   line-height: 12px;
   font-family: dashicons;
   text-decoration: inherit;
   font-weight: 400;
   font-size: 1.2em;
}

.sorted-asc::after {
   content: "\f142";
}
.sorted-desc::after {
   content: "\f140";
}

/* Chrome, Safari, Opera */
@-webkit-keyframes bookingrespondYes {
    from {background: rgba(81, 146, 16, 0.5);}
    to {background: #C4CFD4;}
}

/* Standard syntax */
@keyframes bookingrespondYes {
    from {background: rgba(81, 146, 16, 0.5);}
    to {background: #C4CFD4;}
}
/* Chrome, Safari, Opera */
@-webkit-keyframes bookingrespondNo {
    from {background: rgba(230, 84, 1, 0.5);}
    to {background: #C4CFD4;}
}

/* Standard syntax */
@keyframes bookingrespondNo {
    from {background: rgba(230, 84, 1, 0.5);}
    to {background: #C4CFD4;}
}

#eventplan td {
   overflow: hidden;
}

/* new list */
#contentWrapper .eventplan {
   margin: 0 2px;
   padding: 0;
   border: 2px solid #133d55;
}

#contentWrapper .eventplan .month  {
   color: #FFF;
   font-size: 1.0em;
   font-family: Arial,Helvetica,sans-serif;
   padding: 4px 8px;
   background: #133d55;
}

#contentWrapper .eventplan-list {
   padding: 0 0 6px 0;
   margin: 0;
   box-sizing: border-box;
   float: left;
   width: 25%;
}

@media screen and (max-width: 1023px) {

   #contentWrapper .eventplan-list {
   width: 50%;
   }
}

@media screen and (max-width: 520px) {

   #contentWrapper .eventplan-list {
   width: 100%;
   }
}

.category {
    position: absolute;
    text-align: center;
    top: 4px;
    left: 4px;
    width: 32px;
    height: 32px;
    line-height: 32px;
    border-radius: 50%;
}

.category .fa {
    font-size: 18px;
}

.category.clock-o {
    background: rgba(255, 255, 255, 0.6);
    border: 2px solid rgba(255, 255, 255, 1);
}

.category.comments-o {
    background: rgba(175, 190, 255, 0.6);
    border: 2px solid rgba(175, 190, 255, 1);
}

.category.plane {
    background: rgba(255, 196, 1, 0.6);
    border: 2px solid rgba(255, 196, 1, 1);
}

.category.graduation-cap {
    background: rgba(144, 245, 86, 0.6);
    border: 2px solid rgba(144, 245, 86, 1);
}

.category.money {
    background: rgba(241, 125, 16, 0.6);
    border: 2px solid rgba(241, 125, 16, 1);
}

.category.rocket {
    background: rgba(231, 43, 43, 0.6);
    border: 2px solid rgba(231, 43, 43, 1);
}