/*! Place your custom styles here */

.cal-button {
    display:inline-block;
    width: 25px;
    font-weight:400;
    text-align:center;
    border: 0.5px solid #EBEDF2;
    padding:.25em;
    font-size:0.6em;
    line-height:1;
    background-color:#F4F5F8;
    text-decoration:none;
    }
    
.cal-button:hover, .cal-button:focus{
        text-decoration:none;
        color:#fff;
        background-color:#CCC;
        }
   
.cal-button   .cal-button-link   {     
        text-decoration:none;
        color:#666;
        }

/*! BOOKING OVERVIEW*/

.bg--confirmed {
  background: #4a90e2;
}

.bg--confirmed p,
.bg--confirmed span,
.bg--confirmed ul,
.bg--confirmed a:not(.btn){
  color: #fff;
}

.cta-2.bg--confirmed:hover {
  background: #5798e4;
}

.bg--confirmed h4
{
  color: #fff;
  font-size: 2.35714286em;
  line-height: 1.36363636em;
  margin-bottom: 0;
  font-weight: 400;
}

.bg--available {
  background: #F1F1F1;
}

.bg--available p,
.bg--available span,
.bg--available ul,
.bg--available a:not(.btn){
  color: #333;
  font-size: 1em;
  line-height: 1.2em;
  margin-bottom: 0;
  font-weight: 200;
}

.cta-2.bg--available:hover {
  background: #F3F3F3;
}

.bg--available h4
{
  color: #333;
 font-size: 1.8em;
  line-height: 1.86363636em;
  margin-bottom: 0;
  font-weight: 200;
}

/*! CALENDAR */

.calender_header {
position:relative;
width: 100%;
background-color: #FBFBFB;
height: 30px;
border: solid 1px #D6D6D6;
border-top: dashed 1px #D6D6D6;
border-bottom: dashed 1px #D6D6D6;
}

.calender_container {
position:relative;
width: 100%;
background-color: #FBFBFB;
}

.calender_time_label {
position:relative;
display: block;
height: 30px;
border: solid 1px #D6D6D6;
border-top: dashed 1px #D6D6D6;
border-bottom: dashed 1px #D6D6D6;
margin: 0;
padding-left: 10px;
}

.time_container {
position:relative;
display: block;
width: 100%;
height: 30px;
border: solid 1px #D6D6D6;
border-top: dashed 1px #D6D6D6;
border-bottom: dashed 1px #D6D6D6;
}

.time_container:hover {
background-color: #e1e1e1;
}

.time_container_onclick {
position: relative;
display: block;
overflow: hidden;
}

.booked_container {
position: relative;
display: block;
border: solid 1px #D6D6D6;
width: 90%;
overflow: hidden;
z-index: 10;
font-family: 'Open Sans', 'Helvetica', 'Arial', sans-serif;
font-weight: 300;
text-decoration:none;
}

.col-2 {
margin: 0;
    padding: 0;
}

.col {
margin: 0;
padding: 0;
}

#new_task_container {
background: #F5EBDF;
position: absolute;
display: none;
right: 0;
top: 0;
width: 50vw;
height: 100vh;
z-index: 100;
padding: 20px;
}

.new_task_close {
position: absolute;
display: block;
right: 10px;
top: 10px;
height: 20px;
width: 20px;
cursor: pointer;
}

@media (max-width: 991.98px) {
#new_task_container {
background: #F5EBDF;
position: absolute;
display: none;
right: 0;
top: 0;
width: 90vw;
height: 100vh;
z-index: 100;
padding: 20px;
}

.new_task_close {
position: absolute;
display: block;
right: 10px;
top: 10px;
height: 20px;
width: 20px;
cursor: pointer;
}
}




.calcon_time_label {
  position: absolute;
  top: 4px;
  left: 4px;
  background: #333;
  color: #fff;
  font-size: 0.7em;
  line-height: 1.5em;
  text-transform: uppercase;
  padding: 2px 10px 0 10px;
  border-radius: 4px;

}

.calcon_name {
    position: absolute;
    top: 18px;
    left: 4px;
    color: #fff;
    font-size: 0.7em;
    text-transform: uppercase;
    overflow: hidden;
}
.calcon_type {
    position: absolute;
    top: 35px;
    left: 4px;
    color: #fff;
    font-size: 0.8em;
}
.calcon_seats {
    position: absolute;
    top: 0;
    right: 4px;
    color: #fff;
}


.form-group {
 margin-bottom: 5px;   
}


/*! Calendar Dropdown*/
.month-indicator {
  color: #FFF;
  background-color:#007D98;
  font-weight:400;
  font-size:1.5em;
  padding: 4px;
  border-radius: 4px 4px 0 0;
  font-variant: small-caps;
}

.day-of-week,
.date-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}


.day-of-week {
  background-color:#80CFD5;
  text-align: center;
}

.day-of-week > * {
  font-size: 1.2em;
  color: #FFF;
  font-weight: 200;
  letter-spacing: 0.1em;
  font-variant: small-caps;
  text-align: center;
}

/* Dates */
.date-grid {
 text-align: center;
}

/* Positioning the first day */
.date-grid .cal-date:first-child {
  grid-column: 1;
}


.date-grid .cal-date {
  position: relative;
  border: 0;
  font-size: 1.2em;
  text-align: center;
  background-color: transparent;
  color: #333;
}

.date-grid .cal-date:hover,
.date-grid .cal-date:focus {
  outline: none;
  background-color: #f8f8f8;
  color: #333;
}

.date-grid .cal-date:active,
.date-grid .cal-date.is-selected {
  background-color: #f8f8f8;
  color: #333;
}

.date-grid .cal-date.is-past {
  color: #CCC;
}

/* Checklist */
.chcklist_nav {
  overflow: hidden;
  position: fixed;
  bottom:5px;
  width:100%;
  height:60px;
  z-index:10;
  background-color: transparent;
}

.chcklist_nav_tp {
    position: absolute;
    display:block;
    border: 1px solid #FFF;
    background-color: #80cfd5;
    opacity:0.8;
    bottom: 0px;
    left: 0px;
    width:50%;
    height:100%;
    color: #333;
}

.chcklist_nav_btm {
    position: absolute;
    display:block;
    border: 1px solid #FFF;
    background-color: #80cfd5;
    opacity:0.8;
    bottom: 0px;
    right: 0px;
    width:50%;
    height:100%;
    color: #FFF;
}


.chcklist_label {
    border-radius: 6px;
    padding:6px;
    font-size: 1.3em;
    height:100%;
}



/*! Calendar */
.cal-wrapper{
  width: 100%;
  background: #fff;
  color: #333;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.12);
}
.cal-wrapper header{
  display: flex;
  align-items: center;
  padding: 25px 30px 10px;
  justify-content: space-between;
}
header .c-icons{
  display: flex;
}
header .c-icons span{
  height: 38px;
  width: 38px;
  margin: 0 1px;
  cursor: pointer;
  color: #878787;
  text-align: center;
  line-height: 38px;
  font-size: 1.9rem;
  user-select: none;
  border-radius: 50%;
}
.c-icons span:last-child{
  margin-right: -10px;
}
header .c-icons span:hover{
  background: #f2f2f2;
}
header .current-date{
  font-size: 1.45rem;
  font-weight: 500;
}
.calendar{
  padding: 20px;
}
.calendar ul{
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  text-align: center;
}
.calendar .days{
  margin-bottom: 20px;
}
.calendar li{
  color: #333;
  width: calc(100% / 7);
  font-size: 1.07rem;
}
.calendar .weeks li{
  font-weight: 500;
  cursor: default;
}
.calendar .days li{
  z-index: 1;
  position: relative;
  margin-top: 15px;
   border: 1px solid #f3f3f3;
   padding: 5px;
   min-height: 50px;
}
.days li.inactive{
  color: #aaa;
}