/* Basic styles for the calendar */
/*.split-container {
    display: flex;
    width: 100%;
    min-height: 100vh; /* Takes full screen height
}*/
#clndr {
    /*display: inline-block;
    top: 50%;
    left: 50%;*/
    transform: translate(0%, 0%);
    width: 380px;
    height: 470px;
    background-color: #f0fff0;

    border: 5px solid #ccc;
    margin: 5px auto;
    display: flex;
    flex-direction: column;
    /*align-items: stretch;*/
    /*justify-content: center;*/
    font-size: 24px;
    color: #333;
    border-radius: 8px;
    overflow: auto;
    /* Hide scrollbars for Chrome, Safari, and Opera */
    /*&::-webkit-scrollbar {
        display: none;
    }
    
    /* Hide scrollbars for IE, Edge, and Firefox */
    /*-ms-overflow-style: none;  
    scrollbar-width: none;*/
    user-select: none;
    -webkit-user-select: none;

}

#cc {
    /* */
    height: 245px;
    width: 300px;
    display: flex;
    flex-direction: column;
    overflow: auto;
}

.dy {
    width: 50px;
    max-height: 25px;
    border: 3px solid #e1d5d5;
    background-color: #bdccbd;
    margin: 0px auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    font-size: 20px;
    color: #333;
}

.wdy {
    width: 50px;
    max-height: 25px;
    margin: 0px auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    font-size: 24px;
    color: #333;
}

#wds {
    width: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
}

#wds-outer {
    display: flex;
    justify-content: center;
    align-items: center;
}

.highlighted-month {
    background-color: #f0fff0;
}

.green-dy {
    border-color: #489830;
    background-color: #78c850;
}

.gray-dy {
    border-color: #d0e0d0;
    background-color: #f0f8f8;
    color: #98a090;
}

.red-dy {
    border-color: #ef4040;
    background-color: #ff5555;
}

.gray-dy.red-dy {
    border-color: #d0e0d0;
    background-color: #f0f8f8;
    color: #98a090;
}

.highlighted-month.green-dy {
    background-color: #90ff40;
}

.highlighted-month.red-dy {
    background-color: #ff8080;
}

.highlighted-month.gray-dy {
    background-color: #ffffff;
}

.held-dy {
    border-color: #000000;
    box-shadow: 0 0 0 2px black;
}

.dy.held-dy {
    border-color: #000000;
    box-shadow: 0 0 0 2px black;
}


/*.hidden-clndr {
    background-color: #8b958b;
}*/

.wide-scroll-content {
    white-space: nowrap;  /* Prevents text lines from breaking into a new line */
    flex-direction: row;
    display: flex;
    /*overflow: auto;*/
    justify-content: center;
    flex-shrink: 0;/* Prevents the content from shrinking to fit the container */
    padding: 5px 5px;
    gap: 5px;
}

.day-input {
    width: 45px;
    height: 30px;
    font-size: 16px;
    text-align: left;
}

.month-input {
    width: 80px;
    height: 30px;
    font-size: 16px;
    text-align: left;
}

.year-input {
    width: 65px;
    height: 30px;
    font-size: 16px;
    text-align: left;
}

/* Styling applied to both columns */
/*.left-side, .right-side {
    flex: 1; /* Gives them equal width (50% each) 
    padding: 40px;
    box-sizing: border-box;
}*/

@layer base{
    h1 {
        @apply text-4xl font-bold text-gray-900 my-4;
    }
    h2 {
        @apply text-2xl font-semibold text-gray-800 my-3;
    }
    h3 {
        @apply text-xl font-medium text-gray-700 my-2;
    }
}