/* @override 
  http://localhost:8888/PSV-Website/www01/wp-content/plugins/wp.psv_booking/assets/css/style.css
  https://wordpress-744594-2503014.cloudwaysapps.com/wp-content/plugins/wp.psv_booking/assets/css/style.css?* */




/***
 *                                                                                     
 *    ,------.  ,---.,--.   ,--.    ,-----.                ,--.    ,--.                
 *    |  .--. ''   .-'\  `.'  /     |  |) /_  ,---.  ,---. |  |,-. `--',--,--,  ,---.  
 *    |  '--' |`.  `-. \     /      |  .-.  \| .-. || .-. ||     / ,--.|      \| .-. | 
 *    |  | --' .-'    | \   /       |  '--' /' '-' '' '-' '|  \  \ |  ||  ||  |' '-' ' 
 *    `--'     `-----'   `-'        `------'  `---'  `---' `--'`--'`--'`--''--'.`-  /  
 *                                                                             `---'   
 *    V2.0 2022-03-15
 *
 */
 
 
* {
    box-sizing: border-box;
}


/* override bootstrap colors */
#buskalender .maincontainer .btn-primary, 
#buskalender .btn-primary,
#buskalender .btn-primary:not(:disabled):not(.disabled).active, 
#buskalender .btn-primary:not(:disabled):not(.disabled):active, 
#buskalender .show>.btn-primary.dropdown-toggle {
  color: #fff;
  background-color: #086236;
  border: color(srgb 0.74 0.875 0.792)
  
}




nav.week {
    margin-top: 2rem;
}

nav.week li {
    margin-left: 1rem;
    margin-right: 1rem;
}

ul {
    padding-left: 0;
}

ul li {
    list-style-type: none;
}


.days-hours-row {
    margin-top: 2rem;
  
  
}


.day {
    margin-bottom: 1rem;
}

.hour {
    margin-top: 1rem;
  
}

.days-hours-col {
    background-color: #fff;
    border-right: 1px solid #d3d3d3;
  border-left: 1px solid #d3d3d3;
    min-width: 14%;
    flex: 0 0 100%;
}


.days-hours-col {
  padding: 0;
  margin-bottom: 10px;
    background-color: #fff;
}




.days-hours-col:first-child {
    border-left: 1px solid #d3d3d3;
}

.days-hours-col .day {
    width: auto;
    width: 100%;
    margin: 0;
    padding: 7px 10px;
    background-color: #e3e3e3;
    margin-bottom: 0px;
  
}

.days-hours-col .day a {
    color: #222;
    font-size: 16px;
    line-height: 18px;
    text-decoration: none;
}

.days-hours-col .day a:hover {
    text-decoration: underline;
}

.days-hours-col .hours {
    padding-bottom: 0;
    margin-bottom: 0;
}
.days-hours-col .hours ul {
    margin-bottom: 0;
}
.days-hours-col .hours .hour {
    border-bottom: 1px solid #e3e3e3;
    width: auto;
    width: 100%;
    padding: 7px 10px;
    margin-bottom: 0;
    color: #444;
  font-weight: bold;
}

.days-hours-col a,
.days-hours-col a:visited {
    color: #01733a;
    text-decoration: underline;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.bus-header {
  background: #000 url(../images/background-bus.jpg) top center repeat;
  color: #fff;
}


.sauna-header {
    background: #000 url(../images/background-sauna.png) top center repeat;
}

.sauna-header h1 {
    color: #fff;
}


.volleyball-header {
    background: #000 url(../images/background-volleyball.png) top center repeat;
}

.volleyball-header h1 {
    color: #1b438c;
}
.volleyball-header p {
    color: #1b438c;
}

.tennis-header {
    background: #000 url(../images/background-tennis.png) top center repeat;
}

.gym-header {
    background: #000 url(../images/background-gym.png) top center repeat;
}

.gym-header h1 {
    color: #fff;
}



h1 img {
    height: 54px;
    width: auto;
}

.alert.hide {
    display: none;
}

.alert.show {
    display: block;
}

nav.week {
    margin: 1.5rem;
    text-align: center;
}

nav.week li  {
    margin-top: 1rem;
}

.days-hours-row {
    margin: 0 0 1rem 0;
}


.psv-section-img {
    position: relative;
    width: 100%;
    top: 0;
    left: 0;
    max-width: 80px;
}


img.psv-btn-delete-text {
    width: 20%;
    vertical-align: middle;
    float: right;
    transition: 0.2s ease-out;
}

.psv-btn-delete-text-link{
   text-decoration: none !important;
}

.psv-btn-delete-text:hover {
    transform: translate(0%, -20%);
}


.psv-btn-delete-img {
    width: 50%;
    min-width: 15px;
    margin-top: 0.25em;
    margin-bottom: 0.25em;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: 0.2s ease-out;
}

.psv-btn-delete-img:hover {
    transform: translate(-50%, -60%);
}


.booking-section {
    display: inline-block;
    position: relative;
    margin: 0em;
    width: 100%;

}

.booking-section-img {
    display: inline-block;
    position: relative;
    min-width: 20px;
    margin: 0.10em !important;
}

.booking-section-text {
    width: 100%;
    height: 2em;
    display: inline-block;
    position: relative;
    margin: 0.25em 0.25em 0.75em 0em;
    padding-left: 0em;
    padding-right: 0em;
}


.booking-section3 {
    width: 25%;
}

.booking-section4 {
    width: 49%;
    padding: 0.25em;
  
}

.occupied {
    color: red;
    text-decoration: none;
}



nav.week a,
nav.week a:visited {
    display: block;
    padding: 0.5em 1em;
    border: 1px solid #ddd;

    color: #01733a;
}

nav.week a.current,
nav.week a.current:visited {
  
  color: #fff;
  background-color: #01733a;
}

nav.week a:hover {
    border-color: #01733a;
    background-color: #01733a;
    color: #fff;
    text-decoration: none;
}

.modal {
    z-index: 9999 !important;
    margin: 1.75rem auto;
}

.wrapper {
    background-image: none; 
    position: static; 
    padding-bottom: 10px;
}

.modal form label {
    color: black;
}


@media screen and (min-width: 768px) {
    .days-hours-col {
        flex: 0 0 14.2%;
    }
    .days-hours-col a {
        cursor: default;
    }
    .days-hours-col .day a:hover {
        text-decoration: none;
    }
    /*
    h1 {
        padding: 1em 2em;
    }
    */
    .arrow-open {
        display: none;
    }
  }

  @media screen and (max-width: 768px) {
    .arrow-open {
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 10px 10px 0 10px;
        border-color: #000000 transparent transparent transparent;
        margin-left: auto;
    }
    
    .collapsed .arrow-open {
        border-width: 10px 0 10px 10px;
        border-color:  transparent transparent transparent #000000;
    }
  }



        .tennis-header {
            background-size: auto 100%;
        }

        .tennis-header h1 {
            color: #fff;
        }

        .tennis-header p {
            color: #fff;
            font-weight: bold;
        }

    .tennis-icon-delete,
    .booking-icon-delete {
      max-width: 100%;
      min-width: 1.5em;
    }

    .btn-booking-delete {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
      padding: 0.4em;
      padding: 0.2em;
      text-align: center;
      max-width: 100%;
      transition: all 0.2s ease-in-out;
      cursor: pointer;
    }

    .btn-booking-delete:hover .tennis-icon-delete {
      transform: scale(1.2);
    }

    p.psv-date,
    p.psv-unit,
    p.psv-court,
    p.psv-nickname,
    p.psv-guest_name,
    p.psv-email,
    p.psv-phonennumber {
      color: #111;
    }


.tooltip {
    font-size: 1em;
}


.adm_show_names {
    font-size: 1em;
}

.name-field {
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: center;
    border: 1px solid #ddd;
    margin-top: 5px;
    font-size: 0.85em;
    min-height: 2.75em;
    margin-bottom: 5px;
}

/* BUSKALENDER */
/***
 *                                                                                          
 *    ,-----.  ,--. ,--. ,---.                    ,--.                  ,--.                
 *    |  |) /_ |  | |  |'   .-'      ,---. ,--,--.|  | ,---. ,--,--,  ,-|  | ,--,--.,--.--. 
 *    |  .-.  \|  | |  |`.  `-.     | .--'' ,-.  ||  || .-. :|      \' .-. |' ,-.  ||  .--' 
 *    |  '--' /'  '-'  '.-'    |    \ `--.\ '-'  ||  |\   --.|  ||  |\ `-' |\ '-'  ||  |    
 *    `------'  `-----' `-----'      `---' `--`--'`--' `----'`--''--' `---'  `--`--'`--'    
 *         
 * https://patorjk.com/software/taag/#p=display&c=c&f=Soft&t=BUS%20calendar                                                                   
 *
 */
 
 #buskalender { 
    }
.month_container {}



.calendar_grid {
  display: grid;
  gap: 3px;
  grid-template-columns: repeat(3, 1fr);
  /* grid-template-columns: repeat(auto-fill, 18em); */
  grid-template-columns: repeat( auto-fit, minmax(250px, 1fr) );
  justify-items: center;
  text-align: center;
  
}
.calendar_grid_item {
  
  }

.calendar_body_title {font-size:120%; color:#aaa; font-weight: 700}
    
.weekdaylabels td {font-weight: 800; color: #666666;}
.weekdaylabels .saturday, .weekdaylabels .sunday { color: #000; }
 
 /* Days Layout */
 .calendar_body_days {
   display: flex;
   justify-content: space-between;
   align-items: center;
  
   width: 100%;
 }
 .calendar_body_days li {
   flex: 1;
   font-weight: bold;
   text-transform: uppercase;
   text-align: center;
   color: #7D8994;
   margin: 0 1px;
 }
.calendar_body_dates {
  display: grid;
  gap: 3px;
  grid-template-columns: repeat(7, 1fr);
  justify-items: center;
  text-align: center;

}
.calendar_body_dates li {
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  font-weight: bold;
  position: relative;
  margin: 0;
}
 
 /* Days colors and Style */
#buskalender .day {
   font-size: 80%;
   text-align: center;
   border: 1px solid rgba(255,255,255,0.0);
   border-radius: 50%;
   
 }
 #buskalender .day.saturday {
  color: rgba(0,0,0,0.4); 
}
#buskalender .day.sunday {
  color: rgba(0,0,0,0.4); 
  
}
 
 
#buskalender .day.today {
   border: 2px solid rgba(0,0,0,0.7);
   color: #000;
   border-radius: 50%;
   z-index: 2;
   
   
 }
#buskalender .day:hover {
  background: #DE6E46;
   color: #ffffff;
   border-radius: 50%;
  
}
#buskalender .day.reserviert {
   background: #ff1a00;
   color: #ffffff;
   border-radius: 50%;
 }
#buskalender .day.reserviert.doppelbuchung {

   
   background: linear-gradient(135deg, #ff1a00 49%,#821a00 51%);
   border-color: #DE6E46;
   
 }
 #buskalender .legende span.day.reserviert {
   width: 1.5em;
   height: 1.5em;
   display: inline-block;
 }
 #buskalender .legende {
   color: #999;
   }
  /* ADMIN dropdown for calendar dates / enhanced for other booking types */
   
#buskalender .day.reserviert ul,
.visual-field.occupied .dropdown {
    isibility: hidden;
     opacity: 0;
     display: none;
     
     position: absolute;
     transition: all 0.5s ease;
     margin-top: 1rem;
     left: 0;
     
     background-color: rgba(255, 255, 255, 1);
     z-index: 1111;
     border-radius: 8px;
     position: absolute;
     top: 0.5em;
     min-width: 10em;
   box-shadow: 0 3px 5px rgba(68, 68, 68, 0.35);
    color: rgba(0, 0, 0, 0.65);
    padding: 5px 5px 10px;
   }
    
#buskalender .day.reserviert:hover > ul,
#buskalender .day.reserviert ul:hover,
.visual-field.occupied:hover .dropdown,
.visual-field.occupied .dropdownhover 
{
     visibility: visible;
     opacity: 1;
     display: block;
     
   }
#buskalender .day.reserviert ul li {
      display: block;
      width: 100%;
      clear: both;
      text-align: left;
    margin: 0;
    padding: 2px;
    }
    
#buskalender .day.reserviert ul>label,
#buskalender .day.reserviert ul li a,
.visual-field.occupied .dropdownhover label{
  padding: 1em;
  margin: 0;
  display: block;

  text-align: left;
  clear: both;
  float: left;
  width: 100%;
}
   
#buskalender .day.reserviert ul li a {
     
     color:  #000;
      line-height: 110%;
      display: block;
      font-weight: 500;
      background-color: rgba(56, 56, 56, 0.13);
     border-radius: 8px;
   }
#buskalender .day.reserviert ul > label {
    font-size: 0.9em;
    font-weight: 400;
    font-style: italic;
      
      
    }
#buskalender .day.reserviert ul li a:hover {
          text-decoration: none;
      background-color: rgba(6, 98, 54, 0.13);
 
 
    }
#buskalender .buskalender label {
    font-weight: bold;
    
  }