@keyframes swoosh-up {
    0% {
        opacity: 1;
        transform: translateY(0);
    }

    100% {
        opacity: 0.1;
        transform: translateY(0.8em);
    }
    
}

@keyframes swoosh-down {
    0% {
        opacity: 1;
        transform: translateY(0);
    }

    100% {
        opacity: 0.1;
        transform: translateY(-0.8em);
    }
    
}

.swoosh-up {
    animation: swoosh-up 100ms ;
}

.swoosh-up-reverse {
    animation: swoosh-up 100ms  reverse;
}

.swoosh-down {
    animation: swoosh-down 100ms ;
}

.swoosh-down-reverse {
    animation: swoosh-down 100ms  reverse;
}


    #iCalendarWrapper {
    width: 100%;
    position: relative;
    font-size: 1rem;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;

    gap: 1em;
    align-items: stretch;
    justify-content: start;
    padding-bottom: 1em;
    box-sizing: border-box;

        }
 



#calendar-wrapper {

   /* width: 50%; */
    display: grid;
    /*
    grid-template-rows: 2.5em 1fr;
*/
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    box-sizing: border-box;
    font-size: inherit;

    border: 1px solid #ccc;
    box-sizing: border-box;
        flex: auto;
            padding: 1em;    
}

#calendar-wrapper header {
    grid-row: 1/2; 
    box-sizing: inherit;
}

#calendar-wrapper header h4 {
    padding: 0;
    margin: 0;
    float: left;
}

#calendar {
    /*       
    display: grid;

    grid-template-columns: 1fr 4em;

    grid-template-rows: 3em 1fr;
   */     
    box-sizing: inherit;
    padding: 0;
    margin: 0;
}

#calendar #calendar-days,
#calendar #calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    align-items: center;
    box-sizing: inherit;
    margin: 0;
}

#calendar #calendar-days {
    justify-items: center;
    height: 4em;
    grid-row: 1/2;
    grid-column: 1/2;
}

#calendar #calendar-grid {
    grid-template-rows: repeat(6, 1fr);
    justify-items: flex-start;
    grid-row: 2/-1;
    grid-column: 1/2;
    width: 100%;
       gap: 0.3em;
}

#calendar #calendar-grid > time {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0.25em;
    width: 100%;
    /*

        margin: 0.2em;
    */



    background-color: var(--wp--preset--color--secondary);
    border-radius: 0.4em;
    border: 2px solid transparent;
    transition: box-shadow 200ms, border 100ms;
    box-shadow: 1px 1px rgba(0, 0, 0, 0);
    box-sizing: inherit;
}

#calendar #calendar-grid time.selected,
#calendar #calendar-grid time.selected:focus {
    outline: none;
    border: 2px solid var(--wp--preset--color--tertiary);
    box-sizing: inherit;
}

#calendar #calendar-grid time.disabled,
#calendar #calendar-grid time.disabled:focus {
    outline: none;
    border: 2px solid transparent;
    box-sizing: inherit;
    cursor: not-allowed;
    background-color: var(--wp--preset--color--secondary);
    box-shadow: 1px 1px rgba(0, 0, 0, 0);
        opacity: 0.4;

}

#calendar #calendar-grid > *:hover {
    border: 2px solid rgba(72, 72, 72, 0.5);
    box-shadow: 3px 3px rgba(0, 0, 0, 0.2);
    box-sizing: inherit;
}

#navigation-wrapper {
    box-sizing: inherit;
    margin: 0;
        float: right;
}

#navigation-wrapper div {
    cursor: pointer;
    background: transparent;
    border: 1px solid #ccc;
    border-radius: 0.4em;
   /* font-size: 0.5em; */
    width: 2em;
    height: 2em;
    box-sizing: inherit;
        margin: 0.2em;
    float: left;    
    transition: box-shadow 200ms, border 100ms;
    padding: 0.5em;

}

#navigation-wrapper div:hover {
    border: 2px solid rgba(72, 72, 72, 0.5);
    box-shadow: 3px 3px rgba(0, 0, 0, 0.2);
}


#navigation-wrapper div svg {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 1em;
    display: block;
    box-sizing: inherit;
}

#navigation-wrapper div:first-of-type>svg {
    transform: rotate(180deg);
}








#timepicker-wrapper {

   /* width: 50%; */
    display: grid;
    
    grid-template-rows: 6.5em 1fr;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    box-sizing: border-box;
    font-size: inherit;

    border: 1px solid #ccc;
    box-sizing: border-box;
        flex: auto;
        padding: 1em;
}

#timepicker-wrapper header {
    grid-row: 1/2; 
    box-sizing: inherit;
}

#timepicker-wrapper header h4 {
    padding: 0;
    margin: 0;
    float: left;
}

#timepicker {
    /*       
    display: grid;

    grid-template-columns: 1fr 4em;

    grid-template-rows: 3em 1fr;
   */     
    box-sizing: inherit;
    padding: 0;
    margin: 0;
}

/*
#calendar #calendar-days,
#calendar #calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    align-items: center;
    padding: 0 1em;
    box-sizing: inherit;
    margin: 0;
}
*/

#timepicker #timepicker-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: center;
    box-sizing: inherit;
    margin: 0;

   /* grid-template-rows: repeat(6, 1fr); */
    justify-items: flex-start;
    grid-row: 2/-1;
    grid-column: 1/2;
    width: 100%;
       gap: 0.3em;
}

#timepicker #timepicker-grid > *:hover {
    border: 2px solid rgba(72, 72, 72, 0.5);
    box-shadow: 3px 3px rgba(0, 0, 0, 0.2);
    box-sizing: inherit;
}


#timepicker #timepicker-grid > time {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
        width: 100%;
    padding: 0.25em;
    /*
    width: 85%;
        margin: 0.2em;
    */
    background-color: var(--wp--preset--color--secondary);
    border-radius: 0.4em;
    border: 2px solid transparent;
    transition: box-shadow 200ms, border 100ms;
    box-shadow: 1px 1px rgba(0, 0, 0, 0);
    box-sizing: inherit;
    text-align: center;
}

#timepicker #timepicker-grid time.selected,
#timepicker #timepicker-grid time.selected:focus {
    outline: none;
    border: 2px solid var(--wp--preset--color--tertiary);
    box-sizing: inherit;
}

#timepicker #timepicker-grid time.disabled,
#timepicker #timepicker-grid time.disabled:focus {
    outline: none;
    border: 2px solid transparent;
    box-sizing: inherit;
    cursor: not-allowed;
    background-color: var(--wp--preset--color--secondary);
    box-shadow: 1px 1px rgba(0, 0, 0, 0);
        opacity: 0.4;

}