/***************************************
    css for the pcso-reservation system
    id = #    class = .
******************************************/
.pcso-calendar-wrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    column-gap: 5rem;
    justify-content: flex-start;  /*space-between;*/
}

.pcso-left-side, .pcso-right-side {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.calendar-navigation {
    display: flex;
    justify-content: space-between;
    width: 100%;
    max-width: 800px;
    margin-bottom: 20px;
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 120px);
    gap: 5px;
}

.calendar-dayName {
    background-color:  lightgreen;  
    height: 40px;
    position: relative;
    text-align:   center;
    font-weight: bold;
    font-size:  0.90em;     /* 90%; */
}
.calendar-day {
    border: 1px solid #ddd;
    min-height: 120px;
    position: relative;
    
}
.calendar-day.empty {
    background-color:  #fafafa;   /* very light grey */
    
}

/* table for day button and reservations */
.calendar-day-table, .calendar-day-res-td, .calendar-day-button-td {
  /* debug border: 1px solid red; */
  width: 100%;
  margin: 0px;
  padding: 1px;
}

.calendar-day .day-number {
    display:  block;
    width: 100%;
    background-color:  slateblue; 
    font-size: 0.8em;
    margin: 0px;
    padding:  0px;
}

/* reservation in the calendar day   */ 
.pcso-cal-reservation {
    /*background-color:  cornsilk;*/
    /* border: 1px solid yellow; */
    border-style: inset;
    font-size:  0.80em;     /* 80%; */
    margin:  0px;
    display:  block;
} 

.calendar-day-button-td {
    /* background-color:  cornsilk; */
    /* debug border: 1px solid yellow; */
    margin:  0px;
    display:  block;
}


/**********************************************************
        Reservation edit form 
        
    Note: toolkit stuff for flex
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    
    For grid:
    
***********************************************************/
#reservation-area  {
    max-width: 350px;
    /* background-color: lightgreen; */
    /*border: 1px solid blue ; */
}

.reservation-area-title {
    margin: 0 0 0;
    height: auto;
    font-weight: bold;
    text-align: center;
}
#pcso-edit-form {
    background-color: lightgreen;
    display: grid;
    grid-gap: 5px;
	grid-template-columns: repeat(4, [col] 24% ) ; 
    /*grid-template-rows: repeat(12, [row] 1.2em  ); */
	/* border: 2px solid red ;  */
	font-size: 100%;
	align-items: center;  /* center items vertically */
}

.pcso-edit-form-field {
	height: 1.2em !important;
    padding: .1em .1em !important;
}

#reservation-title {
	grid-column: col 1 / span 4;
	grid-row:    row 0 ;
    margin: auto;
    /*height: auto;*/
    font-weight: bold;
    text-align: center;
}

#pcso-car-image {  /* <img> */
	grid-column: col 1 / span 4;
	grid-row:    row 1;
	margin: 0;
	padding: 4px;
}

#pcso-edit-form #lab-reservation_id {
	grid-column: col 1 / span 1;
	grid-row:    row 2;
} 
#pcso-edit-form #reservation_id {
	grid-column: col 2 / span 1;
	grid-row:    row 2;
} 
#pcso-edit-form #lab-region {
	grid-column: col 1 / span 1;
	grid-row:    row 3;
} 
#pcso-edit-form #region {
	grid-column: col 2 / span 1;
	grid-row:    row 3;
} 
#pcso-edit-form #lab-reservation_date {
	grid-column: col 1 / span 1;
	grid-row:    row 4;
} 
#pcso-edit-form #reservation_date {
	grid-column: col 2 / span 2;
	grid-row:    row 4;
} 
#pcso-edit-form #lab-car_name {
	grid-column: col 1 / span 1;
	grid-row:    row 5;
} 
#pcso-edit-form #car_name {
	grid-column: col 2 / span 1;
	grid-row:    row 5;
} 
#pcso-edit-form #lab-driver {
	grid-column: col 1 / span 1;
	grid-row:    row 6;
}
#pcso-edit-form #driver {
	grid-column: col 2 / span 2;
	grid-row:    row 6;
}
#pcso-edit-form #lab-secondary {
	grid-column: col 1 / span 1;
	grid-row:    row 7;
} 
#pcso-edit-form #secondary {
	grid-column: col 2 / span 3;
	grid-row:    row 7;
} 
#pcso-edit-form #lab-start_time {
	grid-column: col 1 / span 1;
	grid-row:    row 8;
} 
#pcso-edit-form #start_time {
	grid-column: col 2 / span 1;
	grid-row:    row 8;
} 
#pcso-edit-form #lab-end_time {
	grid-column: col 3 / span 1;
	grid-row:    row 8;
}
#pcso-edit-form #end_time {
	grid-column: col 4 / span 1;
	grid-row:    row 8;
}
#pcso-edit-form #lab-duration {
	grid-column: col 1 / span 1;
	grid-row:    row 9;
} 
#pcso-edit-form #duration {
	grid-column: col 2 / span 1;
	grid-row:    row 9;
} 

#pcso-edit-form #add-button {
	grid-column: col 2 / span 2;
	grid-row:    row 10 / span 2;
} 
#pcso-edit-form #apply-button {
	grid-column: col 1 / span 2;
	grid-row:    row 10 / span 2;
} 
#pcso-edit-form #delete-button {
	grid-column: col 3 / span 2;
	grid-row:    row 10 / span 2;
} 


/*****************************************************
    Styles for the Reservation Listing
*****************************************************/
#filter_form {
    display: flex;
    /* justify-content: space-between; */
    gap:  10px;
}

#filterresdate {
    width: 10em;
}

#filtercar {
    width: 6em; 
}
.customify-container {
    max-width: 1500px !important;
}

.listing-table td {
    padding:  0.5em 0em;
    margin:  0px;
}