body {
    background-color: rgb(255, 255, 255);
    font-family: 'Roboto', sans-serif;
}

#loading {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.4);
    background-repeat: no-repeat;
    background-position: center;
}

.loader {
    border: 16px solid #f3f3f3;
    border-radius: 50%;
    border-top: 16px solid #3498db;
    width: 120px;
    height: 120px;
    -webkit-animation: spin 2s linear infinite; /* Safari */
    animation: spin 2s linear infinite;
}

.field-loader {
    display: block;
    /* position: fixed; */
    /* top: 0; */
    /* left: 0; */
    z-index: 100;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    background-repeat: no-repeat;
    background-position: center;
  }

  .mini-loader {
    border: 10px solid #f3f3f3;
    border-radius: 50%;
    border-top: 10px solid #3498db;
    width: 48px;
    height: 48px;
    animation: spin 2s linear infinite;
    margin: auto;
  }

/* Safari */
@-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}


.grid {
    display: grid;
}
.grid-cols-7 {
    grid-template-columns: repeat(7, minmax(0, 1fr));
    /* grid-template-rows: auto; */
}
.grid-flow-col {
    grid-auto-flow: column;
}

.col-span-1 {
    grid-column: span 1 / span 1;
}
.col-span-2 {
    grid-column: span 2 / span 2;
}
.col-span-3 {
    grid-column: span 3 / span 3;
}
.col-span-4 {
    grid-column: span 4 / span 4;
}
.col-span-5 {
    grid-column: span 5 / span 5;
}
.col-span-6 {
    grid-column: span 6 / span 6;
}
.col-span-7 {
    grid-column: span 7 / span 7;
}
.col-start-1 {
    grid-column-start: 1;
}
.col-start-2 {
    grid-column-start: 2;
}
.col-start-3 {
    grid-column-start: 3;
}
.col-start-4 {
    grid-column-start: 4;
}
.col-start-5 {
    grid-column-start: 5;
}
.col-start-6 {
    grid-column-start: 6;
}
.col-start-7 {
    grid-column-start: 7;
}

#room button {
    height: 30vh;
    /* text-size-adjust: 100%; */
    font-size: larger;
}
    /* Create a custom checkbox */
    /* .btn-check + label {
        padding: 10px;
        display: block;
        background: #f2f2f2;
        border: 2px solid #f2f2f2;
        color: #000;
        text-align: center;
        border-radius: 4px;
        transition: all 0.3s ease;
        cursor: pointer;
    } */

    /* Change the appearance of the checkbox when it's checked */
    /* .btn-check:checked + label {
        background: #007bff;
        border-color: #007bff;
        color: #fff;
    } */
    #id_calendar {
        background-color: #f2f2f2;
        color: #696969;
        font-size: small;
    }
    
    #id_calendar_body div div::after {
        /* background-color: #f2f2f2; */
        /* border-right: 1px solid #8b8b8b; */
        /* border-collapse: collapse; */
    }
    .date_header {
        /* display: grid;
        grid-template-columns: repeat(7, minmax(0, 1fr)); */
        text-align: center;
        padding: 2px 10px;
        margin-top: 2px;
        background: #fff;
        /* color: #fff; */
        /* border-bottom: 1px solid #8b8b8b; */
        border-top: 1px solid #8b8b8b;
        /* border-right: 1px solid #8b8b8b; */
        /* border: 1px solid #8b8b8b; */
        border-collapse: collapse;
    }
    .current_date {
        font-size: large;
        font-weight: bold;
        /* text-shadow: #54a6ff 0px 0px 5px; */
        text-decoration: wavy underline #007bff;
        /* border: 2px solid #007bff; */

        /* color: #f2f2f2; */
        /* border: 1px solid #8b8b8b; */
        /* background-color: #92c6ff; */
        /* border-radius: 4px; */
    }

    .date_calendar input[type="checkbox"] {
        display: none;
    }
    .date_calendar label {
        border-left: #8b8b8b solid 1px;
        border-bottom: #8b8b8b solid 1px;
        /* margin: 1px 1px; */
        padding: 1px 4px;
        display: block;
        background: #f2f2f2;
        text-align: left;
        transition: all 0.3s ease;
        cursor: pointer;
        font-size: small;
        /* color: white; */
        /* text-shadow:
         -1px -1px 0 #fff,  
          1px -1px 0 #fff,
          -1px 1px 0 #fff,
           1px 1px 0 #fff; */
        /* text-rendering: auto; */
        /* color: black; */
        /* mix-blend-mode: difference; */
        /* mix-blend-mode: difference; */
        /* background-clip: text; */
        /* color: transparent; */
        /* filter: invert(1); */
    }
    .date_calendar label:hover {
        background: #54a6ff;
        color: #fff;
    }
    .date_calendar input[type="checkbox"]:checked + label {
        background: #007bff;
        border-color: #007bff;
        color: #fff;
    }
    .date_calendar input[type="checkbox"]:disabled + label {
        background: #d1d1d1;
        color: #ffffff;
    }