.wpfc-calendar-wrapper {
    aspect-ratio: 1/1.35 !important;
}
.wpfc-calendar{
    border-radius: 5px;
    text-align: left !important;
    transition: backdrop-filter 0.3s ease, transform 0.2s ease !important;
    display: grid !important;
    grid-template:
            [row1-start] "toolbar" 0.05fr [row1-end]
            [row2-start] "search" 0.0fr [row2-end]
            [row3-start] "calendar" 0.95fr [row3-end]
            / 1fr;
}
.fc-month-view .fc-body *,
.fc-month-view .fc-head *,
.fc-basicDay-view .fc-widget-content,
.fc-basicDay-view .fc-head *{
    border: unset;
}
.fc-toolbar {
   grid-area: toolbar !important;
}
.wpfc-calendar-search {
    grid-area: search !important;
    z-index: 1000 !important;
}
.fc-view-container {
    grid-area: calendar !important;
    z-index: 5 !important;
}

.day-view-tooltip{display: none !important;}

.event-button{
    display: grid;
    position: relative;
    left: -10px;
    grid-template:
        [row1-start] "btn-txt" auto [row1-end]
        / auto !important;
}
.event-button > .event-button-text{
    grid-area: btn-txt;
    margin: auto;
    font-weight: 600;
}

.fc-basicDay-view > table{
    height: 100% !important;
    width: 100% !important;
    padding: 0px !important;
}

.fc-basicDay-view table .fc-event-container a {
    margin: 5px !important;
    padding: 5px !important;
    border-radius: 4px;
    cursor: default;
}
.fc-basicDay-view .fc-day-header .dayname {
    font-weight: bold !important;
    text-transform: capitalize !important;
}
.fc-basicDay-view .event-button {
    border-radius: 5px !important;
    transition: 
        transform 0.15s ease,
        box-shadow 0.15s ease,
        background-color 0.15s ease;
    cursor: pointer;
}

.fc-basicDay-view .event-button:hover {
    transform: scale(1.06);
}
.fc-basicDay-view table > .fc-body {
    backdrop-filter: brightness(40%);
}

.fc-basicDay-view table > .fc-body tr .fc-widget-content .fc-scroller {
    height: fit-content !important;
    max-height: fit-content !important;
}


@media (orientation: landscape) {
     #ast-mobile-header {
        width: 100vw !important;
        background: linear-gradient(
            180deg,
            rgba(0, 0, 0, 1) 0%,
            rgba(60, 0, 0, 0.98) 25%,
            rgba(61, 0, 0, 0.7) 56%, 
            rgba(171, 0, 0, 0.25) 87%,
            rgba(255, 0, 0, 0) 98%) !important;
        height: 10svh !important;
        text-shadow: 0px 0px 5px #000000;
        backdrop-filter: blur(clamp(3px, 1vw + 1px, 12px)) !important;
    }
    .wpfc-calendar-wrapper {
        width: 55vw !important;
        max-height: 115lvh;
    }

    .wpfc-calendar {
        height: 100% !important;
        width: 100% !important;
        position: absolute !important;
    }
    .fc-toolbar {
        margin: 0px !important;
        align-self: stretch !important;
        padding-top: 2svh !important;
        padding-left: 1.5svh !important;
        padding-right: 1.5svh !important;
    }
    .fc-toolbar .fc-left *,
    .fc-toolbar .fc-right * {
        z-index: 1000 !important;
    }
    .fc-toolbar .fc-center * {
        z-index: 0 !important;
    }
    .fc-view-container {
        position: static
    }
    .fc-basicDay-view {
        position: absolute !important;
        top: 0% !important;
        height: 100% !important;    
        border-radius: 5px !important;
        z-index: 10 !important;
        border-width: 5svh !important;
        border-top-width: 0px !important;
    }
    .fc-basicDay-view table > .fc-head {
        position: absolute !important;
        top: 0 !important;
        bottom: 90%;
        left: 0 !important;
    }
    .fc-basicDay-view table > .fc-head .fc-day-header{
        padding: 1svh;
    }

    .fc-basicDay-view table > .fc-body {
        position: absolute !important;
        bottom: 0 !important;
        top: 10%;
        overflow-y: scroll;
    }

    .fc-basicDay-view .fc-content-skeleton > table > tbody > tr > td{
        padding: 0.5svh !important;
        padding-left: 0.75svh !important;
        padding-right: 0.75svh !important;
    }
}

@media (orientation: portrait) {
    #ast-mobile-header {
        position: fixed !important;
        width: 100vw !important;
        background: linear-gradient(
            180deg,
            rgba(0, 0, 0, 1) 0%,
            rgba(60, 0, 0, 0.98) 25%,
            rgba(125, 0, 0, 0.7) 56%, 
            rgba(171, 0, 0, 0.25) 87%,
            rgba(255, 0, 0, 0) 98%) !important;
        height: 10svh !important;
        text-shadow: 0px 0px 5px #000000;
        backdrop-filter: blur(clamp(3px, 1vw + 1px, 12px)) !important;
    }
    .wpfc-calendar-wrapper {
        height: calc(100svh - 130px) !important;
        width: 95vw !important;
        height: 100svh !important;
    }
    .wpfc-calendar {
        height: 100% !important;
        width: 100% !important;
        position: absolute !important;
    }
    .fc-toolbar {
        margin: 0px !important;
        align-self: stretch !important;
        padding-top: 2svh !important;
        padding-left: 1.5svh !important;
        padding-right: 1.5svh !important;
    }
    .fc-toolbar .fc-left *,
    .fc-toolbar .fc-right * {
        z-index: 1000 !important;
    }
    .fc-toolbar .fc-center * {
        z-index: 0 !important;
    }

    .fc-view-container {
        position: static
    }
    .fc-basicDay-view {
        position: absolute !important;
        top: 0% !important;
        height: 100% !important;    
        border-radius: 5px !important;
        z-index: 10 !important;
        border-width: 5svh !important;
        border-top-width: 0px !important;
    }

    .fc-basicDay-view table > .fc-head {
        position: absolute !important;
        top: 0 !important;
        bottom: 90% !important;
    }
    .fc-basicDay-view table > .fc-head .fc-day-header{
        padding: 1svh !important;
    }

    .fc-basicDay-view table > .fc-body {
        position: absolute !important;
        bottom: 0 !important;
        top: 10% !important;
        overflow-y: scroll;
    }

    .fc-basicDay-view .fc-content-skeleton > table > tbody > tr > td{
        padding: 0.5svh !important;
        padding-left: 0.75svh !important;
        padding-right: 0.75svh !important;
    }

}

/* Landscape phone? */

@media (max-width: 767px) and (orientation: landscape){
    .fc-basicDay-view table > .fc-head {
        bottom: 85% ;
    }
    .fc-basicDay-view table > .fc-body {
        top: 15%;
    }
}

@media (max-width: 767px){
    .fc-basicDay-view .fc-day-header .dayname {
        font-size: 14px !important;
    }
    .fc-basicDay-view .fc-day-header .date {
        font-size: 10px !important;
    }
    .fc-basicDay-view .fc-event-container .fc-content > div {
        gap: 2px !important;
        grid-template:
            [row1-start] "time time book" 10px [row1-end]
            [row2-start] "img name book" 16px [row2-end]
            [row3-start] "img spaces book" 14px [row3-end]
            / 30px auto 30% !important;
    }

    .fc-basicDay-view .fc-event-container .fc-content > div .event-time{ 
        font-size: 10px !important;
        line-height: 10px !important;
        margin-left: 0px !important;
        margin: 0px !important;
        overflow: hidden;
    }

    .fc-basicDay-view .fc-event-container .fc-content > div .event-name{ 
        font-size: 16px !important;
        line-height: 16px !important;
        padding: 0% !important;
        margin: 0% !important;
    }
    .fc-basicDay-view .fc-event-container .fc-content > div .event-availability{ 
        font-size: 12px !important;
        line-height: 12px !important;
        overflow: hidden
    }

    .fc-basicDay-view .fc-event-container .fc-content > div .event-image { 
        overflow: hidden;
    }

    .fc-basicDay-view .fc-event-container .fc-content > div .event-button { 
        overflow: hidden;
    }
    .event-button > .event-button-text{
        font-size: 20px !important;
    }
}
@media (max-width: 1024px) and (min-width: 768px){
    .fc-basicDay-view .fc-day-header .dayname {
        font-size: 18px !important;
    }
    .fc-basicDay-view .fc-day-header .date {
        font-size: 12px !important;
    }
    .fc-basicDay-view .fc-event-container .fc-content > div {
        gap: 4px !important;
        grid-template:
            [row1-start] "time time book" 0.10fr [row1-end]
            [row2-start] "img name book" 0.55fr [row2-end]
            [row3-start] "img spaces book" 0.35fr [row3-end]
            / 0.10fr 0.60fr auto !important;
    }

    .fc-basicDay-view .fc-event-container .fc-content > div .event-time{ 
        font-size: 18px !important;
    }
    .fc-basicDay-view .fc-event-container .fc-content > div .event-name{ 
        font-size: 28px !important;
    }
    .fc-basicDay-view .fc-event-container .fc-content > div .event-availability{ 
        font-size: 18px !important;
    }
    .event-button > .event-button-text{
        font-size: 26px !important;
    }
}
@media (min-width: 1025px){
    .fc-basicDay-view .fc-day-header .dayname {
        font-size: 20px !important;
    }
    .fc-basicDay-view .fc-day-header .date {
        font-size: 14px !important;
    }
    .fc-basicDay-view .fc-event-container .fc-content > div {
        gap: 8px !important;
        grid-template:
            [row1-start] "time time book" 0.10fr [row1-end]
            [row2-start] "img name book" 0.55fr [row2-end]
            [row3-start] "img spaces book" 0.35fr [row3-end]
            / 0.10fr 0.55fr 0.35fr !important;
    }

    .fc-basicDay-view .fc-event-container .fc-content > div .event-time{ 
        font-size: 18px !important;
    }

    .fc-basicDay-view .fc-event-container .fc-content > div .event-name{ 
        font-size: 28px !important;
        justify-self: start !important;
    }
    .fc-basicDay-view .fc-event-container .fc-content > div .event-image,
    .fc-basicDay-view .fc-event-container .fc-content > div .event-availability{ 
        font-size: 18px !important;
        justify-self: start !important;
    }

    .fc-basicDay-view .fc-event-container .fc-content > div .event-button { 
        justify-self: stretch !important;
    }
    .event-button > .event-button-text{
        font-size: 34px !important;
    }
}

.fc-basicDay-view .fc-event-container {
    z-index: 999999 !important;
}
.fc-basicDay-view .fc-event-container .fc-content > div {
    z-index: 999999 !important;
    display: grid;
    padding: 0px !important;
}

.fc-basicDay-view .fc-event-container .fc-content > div .event-time{ 
    grid-area: time !important;
    font-style: italic !important;
    z-index: 2 !important;
}

.fc-basicDay-view .fc-event-container .fc-content > div .event-name{ 
    grid-area: name !important;
    font-weight: bold !important;
    justify-self: start;
    z-index: 2 !important;
}
.fc-basicDay-view .fc-event-container .fc-content > div .event-availability{ 
    grid-area: spaces !important;
    justify-self: start;
    z-index: 2 !important;
}

.fc-basicDay-view .fc-event-container .fc-content > div .event-image { 
    grid-area: img !important;
    height: 100% !important;
    aspect-ratio: 1/1 !important;
    justify-self: start;
    z-index: 1 !important;
}

.fc-basicDay-view .fc-event-container .fc-content > div .event-button { 
    grid-area: book !important;
    align-self: center !important;
    width: 100% !important;
    aspect-ratio: 1/0.33 !important;
    z-index: 3 !important;
}

.fc-month-view {
    margin-bottom: 20px !important;
}

.fc-month-view > table > .fc-head {
    grid-area: head !important;
    padding-left: 10px;
    padding-right: 10px;

}
.fc-month-view > table > .fc-body {
    grid-area: body !important;
    position:  relative !important;
}
.fc-month-view > table > .fc-body > tr,
.fc-month-view > table > .fc-body > tr > .fc-widget-content {
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
}

.fc-month-view > table .fc-scroller {
    height: 100% !important;
}


.fc-month-view > table .fc-scroller > .fc-day-grid {
    display: grid !important;
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    gap: 0.5svh !important;
     grid-template:
        [row1-start] "." 1fr [row1-end]
        [row2-start] "." 1fr [row2-end]
        [row3-start] "." 1fr [row3-end]
        [row4-start] "." 1fr [row4-end]
        [row5-start] "." 1fr [row5-end]
        [row6-start] "." 1fr [row6-end]
        / 1fr !important;
}
.fc-month-view > table .fc-scroller > .fc-day-grid > * {
    padding-left: 0px !important;
    padding-right: 0px !important;
}
.fc-bg{
    left: 10px !important;
    right: 10px !important;
}
.fc-month-view > table .fc-scroller > .fc-day-grid > .fc-row.fc-week {
    overflow: hidden !important;  
}

.fc-mon{grid-area: mon !important;}
.fc-tue{grid-area: tue !important;}
.fc-wed{grid-area: wed !important;}
.fc-thu{grid-area: thu !important;}
.fc-fri{grid-area: fri !important;}
.fc-sat{grid-area: sat !important;}
.fc-sun{grid-area: sun !important;}


.fc-month-view > table > .fc-head > tr > .fc-head-container > .fc-row > table > thead > tr,
.fc-month-view > table .fc-scroller > .fc-day-grid > .fc-row > .fc-bg > table > tbody > tr,
.fc-month-view > table .fc-scroller > .fc-day-grid > .fc-row.fc-week > .fc-content-skeleton > table > thead > tr,
.fc-month-view > table .fc-scroller > .fc-day-grid > .fc-row.fc-week > .fc-content-skeleton > table > tbody > tr {
    display: grid !important;
    width: 100% !important;
    grid-template:
        "mon tue wed thu fri sat sun" 1fr
        / 1fr 1fr 1fr 1fr 1fr 1fr 1fr !important;
    margin-top: 0px !important;
    margin-bottom: 0px !important;
}
.fc-month-view > table .fc-scroller > .fc-day-grid > .fc-row > .fc-bg > table > tbody > tr {
    position: absolute !important;
    top: 0;
    bottom: 0;
}
.fc-month-view > table .fc-scroller > .fc-day-grid > .fc-row > .fc-bg > table > tbody > tr > td{
    position: relative !important;
    top: 0;
    bottom: 0;
}
.fc-month-view > table .fc-scroller > .fc-day-grid > .fc-row.fc-week > .fc-content-skeleton > table > tbody > tr > td {
    overflow: hidden !important;
}
.fc-month-view > table .fc-scroller > .fc-day-grid > .fc-row.fc-week > .fc-content-skeleton{
    height: 100% !important;
}


@media (orientation: portrait){} 
@media (orientation: landscape) and (max-width: 767px){
    .wpfc-calendar-wrapper {
        max-height: 150lvh;
    }
} 
@media (max-width: 767px){

    .fc-month-view {
        height: 100% !important;
        padding-left: 0.5svw;
        padding-right: 0.5svw;
        padding-bottom: 4svh;
    }
    .fc-month-view > table {
        height: 100% !important;
        width: 100%;
        display: grid !important;
        grid-template:
            [row1-start] "head" 0.05fr [row1-end]
            [row2-start] "body" 0.95fr [row2-end]
            / 1fr !important;
    }

    .fc-month-view > table > .fc-head > tr > .fc-head-container > .fc-row > table > thead > tr,
    .fc-month-view > table .fc-scroller > .fc-day-grid > .fc-row > .fc-bg > table > tbody > tr,
    .fc-month-view > table .fc-scroller > .fc-day-grid > .fc-row.fc-week > .fc-content-skeleton > table > thead > tr,
    .fc-month-view > table .fc-scroller > .fc-day-grid > .fc-row.fc-week > .fc-content-skeleton > table > tbody > tr {
        gap: 0.5% !important;
    }

    .fc-month-view .fc-event-container *{
        font-size: 8px !important;
        word-wrap: break-word;
    }
    .fc-month-view .fc-event-container.event-moved{
        display: block !important;
        font-size: 8px !important;
        position: relative !important;
    }

    .day-view-button.fc-event-container {
        display: block !important;
        padding-left: 0.5px !important;
        font-size: 8px !important;
        padding-top: 1px !important;
        padding-bottom: 1px !important;
    }
    .fc-month-view > table {
        padding-top: 0.5svw !important;
        padding: 0.5svw !important;
        backdrop-filter: sepia(5%) brightness(80%) !important;
        border-radius: 2px;
    }
    .button-overlay {
        font-size: 8px !important;
    }
}
@media (max-width: 1024px) and (min-width: 768px){
    .fc-month-view {
        padding-left: 1svw !important;
        padding-right: 1svw !important;
        padding-bottom: 1svh !important;
        padding-top: 1svh !important;
        height: 100% !important;
        width: 100% !important;
    }
    .fc-month-view > table {
        display: grid !important;
        height: 100% !important;
        gap: 1px !important;
        grid-template:
            [row1-start] "head" 5% [row1-end]
            [row2-start] "body" 95% [row2-end]
            / 100% !important;
    }
    .fc-month-view > table > *,
    .fc-month-view > table > * > *,
    .fc-month-view > table > * > * > * {
        position:  relative !important;
    }
    .fc-month-view > table > .fc-head > tr > .fc-head-container > .fc-row > table > thead > tr,
    .fc-month-view > table .fc-scroller > .fc-day-grid > .fc-row > .fc-bg > table > tbody > tr,
    .fc-month-view > table .fc-scroller > .fc-day-grid > .fc-row.fc-week > .fc-content-skeleton > table > thead > tr,
    .fc-month-view > table .fc-scroller > .fc-day-grid > .fc-row.fc-week > .fc-content-skeleton > table > tbody > tr {
        gap: 1% !important;
    }
    .day-view-button.fc-event-container {
        padding-left: 2px !important;
        font-size: 14px !important;
        padding-top: 4px !important;
        padding-bottom: 4px !important;
    }
    .fc-month-view .fc-event {
        overflow: hidden !important;
    }
}
@media (min-width: 1025px){
    .fc-month-view {
        height: 100% !important;
        padding-left: 4svw;
        padding-right: 4svw;
        padding-bottom: 6svh;
    }
    .fc-month-view > table {
        height: 100% !important;
        display: grid !important;
        grid-template:
            [row1-start] "head" 0.025fr [row1-end]
            [row2-start] "body" 0.975fr [row2-end]
            / 1fr !important;
    }
    .fc-month-view > table > .fc-head > tr > .fc-head-container > .fc-row > table > thead > tr,
    .fc-month-view > table .fc-scroller > .fc-day-grid > .fc-row > .fc-bg > table > tbody > tr,
    .fc-month-view > table .fc-scroller > .fc-day-grid > .fc-row.fc-week > .fc-content-skeleton > table > thead > tr,
    .fc-month-view > table .fc-scroller > .fc-day-grid > .fc-row.fc-week > .fc-content-skeleton > table > tbody > tr {
        gap: 1% !important;
    }
    .day-view-button.fc-event-container {
        padding-left: 2px !important;
        font-size: 14px !important;
        padding-top: 4px !important;
        padding-bottom: 4px !important;
    }
    .fc-month-view > table {
        padding-top: 1svw !important;
        padding: 1svw !important;
        backdrop-filter: sepia(5%) brightness(80%) !important;
        border-radius: 2px;
    }
}
.fc-content-skeleton > table > thead > tr > td > .day-view-button{
    display: none !important;
}

.fc-day-top > td {
    display: none !important;
}

.fc-month-view .fc-day {
    border-radius: 5px !important;
    max-height: 100% !important;
    overflow: hidden;
    overflow-x: hidden;
}

.day-view-button.fc-event-container.no-display,
.no-events {
    display: none !important;
}

.day-view-button.fc-event-container {
    font-weight: bold !important;
}

.fc-month-view .fc-event-container {
    border-radius: 3px !important;
    margin: 2% !important;
}

.fc-month-view .fc-event-container:hover {
    transform: scale(1.2);
    transform-origin: 50% 50%;
}

.fc-month-view .fc-row .fc-day.fc-today {
    border-radius: 5px !important;
    z-index: 999998;
}
.fc-month-view > table {
    border-radius: 2px;
    overflow: hidden;
}


.fc-content-skeleton > table > thead > tr,
.fc-content-skeleton > table > tbody > tr{
    position: relative !important;
    top: 0px;
    bottom: 0px;
    padding-left: 10px;
    padding-right: 10px;
    max-height: 100% !important;
}

.fc-day-number{
    font-size: 150% !important;
    margin-right: 5%;
}
/* button */
.button-overlay {
  display: flex;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: 
    opacity 200ms ease,
    visibility 200ms ease;
}

.button-overlay.visible {
    opacity: 1;
    visibility: visible;
    pointer-events: none;
    transform: scale(1.2);
    transform-origin: 50% 50%;
    line-height: 95%;
}
.wpfc-calendar{
    backdrop-filter: blur(5.5px) saturate(1.05);
    -webkit-backdrop-filter: blur(5.5px);
}
/* TOOLTIP STYLING */
.tippy-arrow,
.tippy-box[data-theme~="light-border"] {
    background: none;
    background-color: none;
    border-color: none;
}
.tippy-arrow{
    display: none;
}


.tippy-box{
    padding: 0px;
    margin: 0px;
}
.tippy-content > div {
  width: var(--tt-width);
  height: var(--tt-height);
  margin: 0;
  padding: 0;
}
/*
.tippy-box,
.tippy-content > div
.tippy-content{
    aspect-ratio: 2/1 !important;
}
*/
.tippy-content > div{
    height: 125px;
    width: 100%;
}
.event-custom-tooltip{
    height: 125px;
    width: 250px;
    aspect-ratio: 2/1 !important;
    display: grid;
    gap: 5px;
    column-gap: 0px;
    border-radius: 3px;
    grid-template:
        [row1-start] "a a" 45px [row1-end]
        [row2-start] ". ." 35px [row2-end]
        [row3-start] ". ." 35px [row3-end]
        /fit-content(70px) auto !important;
}

.tooltip-a,
.title-sect{
    grid-column: 0 / 3 !important;
    grid-row: 1 !important;
    overflow: hidden !important;
}

.tooltip-b,
.time-sect{
    grid-column: 2 / 3 !important;
    grid-row: 2 !important;

}
.tooltip-c,
.spaces-sect{
    grid-column: 2 / 3 !important;
    grid-row: 3 !important;

}
.tooltip-img{
    grid-column: 1 !important;
    grid-row: 2 / 4 !important;
    justify-self: start;
}
.tooltip-img{
    height: 100% !important;
    max-width: 70px;
    aspect-ratio: 1 / 1;
}
.tooltip-img:empty{
    aspect-ratio: 1 / 1;
    
}
.tooltip-img > img {
    height: 100% !important;
    max-width: 70px;
    aspect-ratio: 1 / 1;
    object-fit: contain;
}