/*
   File Name: simcal.css
   Author: Diana Johns
*/
/*  Don't use import, enqueue the stylesheets in functions */
/*
   MicaGrange child theme styling for Simple Calendar plugin.
   The basic customizr child css is in file style.css.

   The plugin file default-calendar-grid.php was altered to not
   output dots, but the day numeral instead.


/********* Simple Calendar Plugin common calendar styling *****************/

/*  Don't display "Edit Calendar" link on list view  */
a.post-edit-link {
    display: none;
}

 /*  White header text & nav arrows   */
.simcal-calendar-head h3 {
   color: white;
   text-shadow: 0 1px 0 black;
}

i.simcal-icon-left {
   color: white;
   float: right;
}

i.simcal-icon-right {
   color: white;
   float: left;
}

/*   Blue gradient for the header   */
/*   Using background-image: linear-gradient doesn't work.  */
.simcal-nav {
   background: linear-gradient(0deg, rgba(41,41,108,1) 0%, rgba(68,112,183,1) 50%, rgba(42,87,158,1) 100%);
   /*  Top color: #2a579e, middle color: #4470b7, bottom color: #29296c  */
}

/*  End common calendar styling  */

/******* Simple Calendar Plugin widget grid styling ***********/
/*
/*    Original stylesheets for popup:  qtip.min.css
/*
/*  .simcal-no-events is a date without events             */
/*  .simcal-day-has-events is a date with events           */
/*   Still need to style the qtips                         */
/*   The table body background                              */

.simcal-default-calendar-grid {
    max-width: 240px;
}

/*  Decrease header height slightly  */
.simcal-default-calendar-grid .simcal-calendar-head .simcal-nav {
    padding: 6px 0 ! important;
}

/*  Make the current month & year header smaller  */
#gce_widget-2 > div > table > thead > tr > th.simcal-nav > h3  {
    font-size: 20px ! important;
}

/*  Neaten row height of header days abbreviations. */
#gce_widget-2 table thead tr th.simcal-week-day {
   padding-top: 4px !important;
}

/*  Table cell styling for days with events.  */
.simcal-default-calendar-grid .simcal-events-dots {
    height: -webkit-fill-available;
    text-align: center;
    font-size: 1.1em;
    color: navy ! important;       /*  This is clobbering current day color of red.  */
    background-color:  bisque ! important;
    line-height: inherit ! important;
    margin: 0 ! important;
    padding-top: 3px;
}


/*  Number styling for today.  */
#gce_widget-2 > div > table > tbody > tr > .simcal-today.simcal-present.simcal-day > div > span {
  color: #99001C !important;
}

.simcal-default-calendar-grid .simcal-day-number {
    padding: 12px 0 10px ! important;
}

/*  Get rid of extra space below calendar widget  */
#gce_widget-2 table {
   margin-bottom: 0;
   -webkit-box-shadow: 0 1px 5px rgba(0,0,0,0.3);
   -moz-box-shadow: 0 1px 5px rgba(0,0,0,0.3);
   box-shadow: 0 1px 5px rgba(0,0,0,0.3);
}

/*  Make the gray bottom table border narrower   */
table.simcal-calendar-grid {
   border: 1px solid rgba(57,65,67,.4);
   margin-bottom: 30px ! important;
}

/*  Put a nice box shadow around the grid calendar */
#gce_widget-2 {
   color: #666;
   font-size: 12px;
}

/*  Default table cell styling.   */
#gce_widget-2 tbody td {
/*   height: 30px;     */
   color: #666;    /* grey */
   text-shadow: 0 1px 0 rgba(255,255,255,0.5);
   padding: 8px;
   text-align: center;
   font-weight: 600;
   border: 1px solid;
   background: #f9fbff;
   background: linear-gradient(0deg, rgba(221,221,244,1) 0%, rgba(247,250,255,1) 100%);
   /*  Top gradient:  #f9fbff, bottom: #ddddf4  */
}

/*  No cell borders for blank leading & trailing calendar space */
#gce_widget-2 tbody td.simcal-day.simcal-day-void {
   border: 0;
   background-color: #f9fbff);
}

/*  No extra border around "today" cell; we're changing inside color instead.  */
#gce_widget-2 td.simcal-today.simcal-present.simcal-day > div {
    border: none ! important;
}

/* Different style for today, override calendar config settings  */
#gce_widget-2 td.simcal-today.simcal-present.simcal-day > div > span.simcal-day-label.simcal-day-number {
   background-color: #f9fbff ! important;
   margin-top: -1px;
   font-size: 16px;     /* makes cell same size as others  */
}

.simcal-default-calendar-grid .simcal-day>div {
    height: 35px ! important;
}

/* Style the event popup boxes  */
.simcal-default-calendar .simcal-event-title {
   font-size: 1.2em;
   font-weight: 700;
   color: #99001c;
}

.simcal-default-calendar .simcal-tooltip-content {
   font-size: 1.4em !important;
   line-height: 1.4;
   padding-top: 6px;
   padding-left: 10px;
   margin-top: 5px;
   margin-bottom: -20px;
} 

/*  The popup box  */
.qtip-content {
    position: relative;
    padding: 10px 6px;
    overflow: hidden;
    text-align: left;
    word-wrap: break-word;
    border: 2px solid navy;
}
/********** end widget grid calendar styling  ************/

/******  Simple Calendar common list styling  ********/
.simcal-default-calendar-list dt.simcal-day-label {
   margin: 0 !important;
   padding: 0 !important;
   border-top: 1px gray dotted !important;
   background: #d3d3d3 !important;
   border-bottom: 0 !important;
   font-size: 1.2em ! important;
}

.simcal-default-calendar.simcal-default-calendar-list.simcal-default-calendar-light > div > dl > dt > span {
   color: black !important;
   background: #d3d3d3 !important;
}

.simcal-default-calendar .simcal-events {
    margin-right: 0;
}

/*  Tighten up the list item spacing.
.simcal-default-calendar-list ul.simcal-events li.simcal-event {
   margin-bottom: 0;
}
*/

/*  Make heading & listing widths the same.
dl.simcal-events-list-container {
   overflow-y: scroll;
   background: #F6F6F6;
   border: 1px solid #E0DDDD;
   margin-left: 0;
}  */

/********* Simple Calendar ride manager calendar styling ***********/
/*         This is page specific                                   */

/* Set the calendar size & vertical scrollbar  */
#page-56 div.simcal-calendar-list {
   width: 320px;
}

#page-56 dl.simcal-events-list-container {
   width: 320px;
   height: 400px;
   overflow-y: scroll;
   margin-top: 0;
}
/*********** done Ride Manager calendar styling **************/

.simcal-default-calendar-list .simcal-calendar-head {
    padding-bottom: 0 ! important;
}

#page-56 .simcal-default-calendar-list {
    padding: 0 ! important;
}

/*  General list calendar styling  */
.simcal-event-description {
/*   padding-bottom: .5em;   */
}

#page-56 .simcal-default-calendar-list dt.simcal-day-label {
    margin-top: 0 ! important;
}

.simcal-default-calendar-list .simcal-event-details {
   line-height: 1.3 !important;
   overflow: hidden;
}

/*  Style the public ride calendar  */
/*  Display page is #page-77
/*  Define php date format as
   D d

   For the page containing the calendar shortcode -- this will be
   for the feeder page if a compound calendar (I think) -- paste this code:

<div class="block-align-vertically">
<div class="inner">
   <span class="date-icon">
      <span class="dayname">[start-date format="D"]</span>
      <span class="daynum">[start-date format="d"]</span>
   </span>&nbsp;&nbsp;&nbsp;&nbsp;
</div>
<div class="inner">
[if-not-whole-day]      <span class="event-time">[start-time]            <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; to <br>[end-time]&nbsp;&nbsp;&nbsp;&nbsp;</span>
[/if-not-whole-day]
[if-whole-day]&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[/if-whole-day]
</div>
<div class="inner">[title]<br>[description] <strong>[if-start-location]Click for map:[/if-start-location]</strong>
  [start-location-link][location][/start-location-link]
</div>
</div>
*/

.simcal-default-calendar-list dt.simcal-day-label {
   display: none;
}

.simcal-default-calendar .simcal-event-title {
/*    font-size: 1.3em ! important;   */
}

.simcal-default-calendar-list {
    padding: 0;
}

.simcal-nav {
    padding: 6px 0;
}

.simcal-default-calendar-list dt.simcal-day-label {
   margin: 0 !important;
   padding: 0 !important;
/*   display: none;           */
}

/*  Put a border around the list  */
dl.simcal-events-list-container {
   position: relative;
   background: #F6F6F6;
   border: 1px solid #E0DDDD;
   margin-left: 0;
   margin-top: 0;
   height: 400px;
   overflow-y: scroll;
}

.simcal-default-calendar-list ul.simcal-events {
    margin: 10px 0 0 10px ! important;
}

.simcal-default-calendar-list .simcal-event-details {
    font-size: 1em ! important;
}

.simcal-default-calendar-list .simcal-event-details .simcal-event-description {
   margin: 0 !important;
}

/*  Align date icon, times & event title in a single row */
.inner {
   display: inline-block;
   vertical-align: top;
}

/*  Put a subtle border between events  */
.simcal-default-calendar-list dd.simcal-day-has-events {
   padding-top: 12px;
   border-bottom: 1px solid #d3d3d3 !important;
}

/*  Decrease spacing between list items.  */
> div > .simcal-default-calendar-list > div > dl > dd > ul {
   margin-top: 0;
}

/*  Make the time font a little smaller  */
div.block-align-vertically div:nth-child(2) {
   line-height: 1 !important;
   font-size: .9em !important;
   font-weight: bold;
}

/*  If don't restrict width, longer title or longer entries  */
/*  will move down and display under the date icon.          */
div.block-align-vertically div:nth-child(3) {
   width: 70%;
   line-height: 1.2 !important;
}

.simcal-default-calendar-list ul.simcal-events li.simcal-event {
    margin-bottom: 0;
}

/*  Set up the calendar icon with the relavent dates  */
.date-icon {
   line-height: 1 !important;
   font-size: .5em;
/* change icon size here */
   display: block;
   position: relative;
/*  Move to top if display in table  */
   float: left;
   width: 6em;
   height: 6em;
   background-color: #fff;
   margin: 0 auto;
   padding-top: .2em;
   margin-bottom: .4em;
   border-radius: .6em;
   box-shadow: 0 1px 0 #bdbdbd, 0 2px 0 #fff, 0 3px 0 #bdbdbd, 0 4px 0 #fff, 0 5px 0 #bdbdbd, 0 0 0 1px #bdbdbd;
   overflow: hidden;
   -webkit-backface-visibility: hidden;
   -webkit-transform: rotate(0deg) skewY(0deg);
   -webkit-transform-origin: 50% 10%;
   transform-origin: 50% 10%;
}

.date-icon * {
   display: block;
   width: 100%;
   font-size: 1.4em;
   font-weight: bold;
   font-style: normal;
   text-align: center;
}

/*  Styling for day-of-week  */
.date-icon .dayname {
   position: absolute;
   padding-top: .4em;
   top: 0;
   color: #fff;
   background-color: #007300;
   border-bottom: 1px dashed #00CC30;
   box-shadow: 0 2px 0 #FCC428;
}

/* The numberic day-date  */
.date-icon .daynum {
   font-size: 1.4em;
   letter-spacing: .05em;
   padding-top: .3em;
   color: #99001C;
}

/*  Hall use slider (Nimble builder)  */
@media (max-width: 767px)
[data-sek-id="__nimble__2e0944faeea9"] {
    height: fit-content;
}