/* sci-events styles */
.sci-events-list {
    padding: 20px;
   
}

.sci-event {
    
    margin-bottom: 25px;
    background-color: #f9f9f9;
    display: flex;
    flex-wrap: wrap; /* Allow the blocks to wrap on smaller screens */
}

.sci-date-col {
    flex: 1;
    padding: 25px;
    border-left-width: 8px; /* Set the border width */
    border-left-style: solid; /* Set the border style */
}

.sci-info-col {
    flex: 3;
    padding: 25px;
}

.sci-date {
    font-size: 2em;
    font-weight: bold;
}

.sci-year {
    font-size: 1.5em;
    color: #888;
}

.sci-calendar-name {
    font-size: 1.2em;
    color: #666;
    font-weight: bold;
}

.sci-title {
    font-size: 1.8em;
    margin-top: 5px;
}

.sci-location {
    font-size: 1em;
    margin-top: 5px;
    color: #333;
}

.sci-website-col {
    padding: 25px;
    text-align: right;
    align-self: flex-start;
}
.sci-website-button {
    padding: 8px 12px;
    background-color: #0073aa;
    color: white;
    text-decoration: none;
    border-radius: 4px;
    border: none;
    cursor: pointer;
}

.sci-ticket-button{
   position: relative;
    top:20px;
    background-color: #5fbd05;
}

.sci-website-button:hover {
    background-color: #005177;
}

/* Media query for small screens (e.g., mobile devices) */
@media (max-width: 768px) {
    
    .sci-events-list {
    padding: 0px;
   
}
    .sci-event {
        flex-direction: column; /* Stack the blocks vertically */
        padding:0px;
        word-wrap: break-word; /* Break long words */
        overflow-wrap: break-word; /* Same as word-wrap, for better compatibility */
    }
    
    .sci-title {
    font-size: 1.3em;
    margin-top: 5px;
}

    .sci-date-col,
    .sci-info-col,
    .sci-website-col {
        flex: none; /* Remove the flex property to let each block take up full width */
        width: 100%; /* Ensure each block takes full width */
        word-wrap: break-word; /* Break long words */
    overflow-wrap: break-word; /* Same as word-wrap, for better compatibility */
       
    }

    .sci-date-col {
        border-left-width: 0; /* Remove the left border on mobile screens */
    }

    .sci-website-col {
        text-align: left; /* Align the button to the left on mobile screens */
       
    }


}
#add_calendar_form,
.edit_calendar_form {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    z-index: 9999;
    max-width: 500px;
    width: 90%;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 6px;
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.3);
}

@media (max-width: 600px) {
    #add_calendar_form,
    .edit_calendar_form {
        top: 20px;
        left: 50%;
        transform: translateX(-50%);
        width: 95%;
        height: auto;
        max-height: 90vh;
        overflow-y: auto;
    }
}