@import url("https://p.typekit.net/p.css?s=1&k=rrt7rvl&ht=tk&f=9727.9729.9732.9733.9734&a=120128573&app=typekit&e=css");

@font-face {
    font-family:"co-headline";
    src:url("https://use.typekit.net/af/fc5dbb/00000000000000007735fd1f/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff2"),url("https://use.typekit.net/af/fc5dbb/00000000000000007735fd1f/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff"),url("https://use.typekit.net/af/fc5dbb/00000000000000007735fd1f/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("opentype");
    font-display:auto;font-style:normal;font-weight:400;font-stretch:normal;
}
@font-face {
    font-family: 'Helvetica';
    src: url('https://fonts.cdnfonts.com/css/helvetica-neue-55') format('truetype');
}
@font-face {
    font-family:"co-text";
    src:url("https://use.typekit.net/af/e0a244/00000000000000007735fd23/30/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n3&v=3") format("woff2"),url("https://use.typekit.net/af/e0a244/00000000000000007735fd23/30/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n3&v=3") format("woff"),url("https://use.typekit.net/af/e0a244/00000000000000007735fd23/30/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n3&v=3") format("opentype");
    font-display:auto;font-style:normal;font-weight:300;font-stretch:normal;
}

body{
    font-family: 'Helvetica', sans-serif;
}

@media (min-width:350px) and (max-width:3000px) {
    .max-w-75 {
        /* width: 1200px; */
        width: 75% !important;
    }
}
@media (max-width: 767px) {
    .d-sm-none{
        display: none !important;
    }
    .res-margin-top{
        margin-top: 20px !important;
    }
}
.bg-red-700 {
    background-color: #8B4513;
}

.text-brown-600 {
    color: #8B4513;
}

.bg-beige-400 {
    background-color: #D2B48C;
}

.text-white {
    color: #D2B48C;
}

/* CALENDAR CSS */

:root {
    --container-bg-color: #ffffff;
    --text-color: #3b3a3a;
    --button-bg-color: #B91C1B;
    --button-hover-bg-color: #B91C1B;
    --grid-gap-color: #ccc;
    --day-header-bg-color: #B91C1B;
    --day-header-text-color: white;
    --not-available-bg-color: #e0e0e0;
    --not-available-text-color: #999;
    --available-bg-color: #ffffff;
    --available-text-color: #333;
    --selected-bg-color: #007bff;
    --selected-text-color: #fff;
    --available-hover-bg-color: #B91C1B;
    --available-hover-text-color: #fff;
    --active-bg-color: #B91C1B;
    --active-text-color: white;
}
.calendar-container {
    width: 90%;
    max-width: 800px;
    background-color: var(--container-bg-color);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--text-color);
    padding: 10px;
    font-size: 18px;
    font-weight: bolder;
}
.calendar-header a {
    background-color: var(--button-bg-color);
    border: none;
    padding: 8px 12px;
    color: var(--day-header-text-color);
    border-radius: 4px;
    cursor: pointer;
}
.calendar-header a:hover {
    background-color: var(--button-hover-bg-color);
}
.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    background-color: var(--grid-gap-color);
}
.calendar-grid div {
    padding: 10px 0px;
    text-align: center;
    color: var(--available-text-color);
    transition: background-color 0.3s, transform 0.3s;
}
.calendar-grid .day-header {
    background-color: var(--day-header-bg-color);
    color: var(--day-header-text-color);
    font-weight: bold;
}
.calendar-grid .not-available {
    background-color: var(--not-available-bg-color);
    color: var(--not-available-text-color);
    cursor: not-allowed;
}
.calendar-grid .available {
    background-color: var(--available-bg-color);
    color: var(--available-text-color);
}
.calendar-grid .available.selected {
    position: relative;
}

.calendar-grid .available.selected::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--selected-bg-color, rgba(0, 123, 255, 0.5));
    opacity: 0.5;
    z-index: 1;
    pointer-events: none;
    border-radius: inherit;
}
.calendar-grid .available:hover {
    background-color: var(--available-hover-bg-color);
    color: var(--available-hover-text-color);
    transform: scale(1.1);
    cursor: pointer;
}
.calendar-grid .active {
    background-color: var(--active-bg-color);
    color: var(--active-text-color);
}
.calendar-grid .active:hover {
    cursor: pointer;
}

.swal2-confirm, .swal2-cancel {
    background-color: #3085d6 !important;
    color: white !important;
    border: none;
    padding: 0.625em 1.5em;
    border-radius: 0.25em;
}

.swal2-cancel {
    background-color: #d33 !important;
}