/* cspell:disable */
/* General styling for the page */
body {
    font-family: 'Roboto Mono', monospace;
    /* A font that displays time nicely */
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    height: 100vh;
    background-color: #ffffff;
    /* Default light mode background */
    color: #000000;
    /* Default light mode text color */
}

/* Hijri date and Gregorian date at the top */
.hijridate,
#gsHijriDatex {
    font-size: 24px;
    /* Larger text for better readability */
    padding: 20px;
    text-align: center;
    background-color: #f1f1f1;
    /* Light background for the top */
    border-bottom: 2px solid #ddd;
}

/* Container for the table */
.table-container {
    /* Allow the table container to fill the available space */
    display: flex;
    justify-content: center;
    align-items: start;
}

/* General styling for the table */
.tablehead {
    width: 100%;
    /* Stretch the table to fill 85% of the screen */
    max-width: 100%;
    margin: 0 auto;
    font-size: 20px;
    /* Larger font size for better readability */
    border-collapse: collapse;
    background-color: #ffffff;
    /* Light mode background */
    color: #000000;
    /* Light mode text color */
}

/* Prayer times table */
.prayerTimes {
    width: 100%;
    border: 1px solid #111111;
    border-collapse: collapse;
    font-size: 18px;
    /* Slightly larger font for better readability */
}

.prayerTimes td,
.prayerTimes th {
    padding: 15px;
    /* Increased top/bottom padding */
    text-align: center;
    /* Center text in all cells */
}

.prayerTimes tr:first-child th,
/* First row in prayerTimes */
.prayerTimes td:first-child {
    /* First column in prayerTimes */
    text-align: left;
    /* Left-align text for the first row and column */
}

.prayerTime_hdr {
    background-color: #e6e6e6;
    /* Header background */
    font-weight: bold;
}

.prayerTimeOdd {
    background-color: #ffffff;
    /* Alternating row colors */
}

.prayerTimeEven {
    background-color: #f9f9f9;
    /* Alternating row colors */
}

/* Time update at the bottom */
.timeUpdate {
    text-align: center;
    padding: 10px;
    font-size: 16px;
    background-color: #f1f1f1;
    border-top: 2px solid #ddd;
    margin-top: auto;
}

/* Dark mode styling */
@media (prefers-color-scheme: dark) {
    body {
        background-color: #121212;
        /* Dark mode background */
        color: #ffffff;
        /* Dark mode text color */
    }

    .hijridate,
    #gsHijriDatex {
        background-color: #1e1e1e;
        /* Dark mode header background */
        border-bottom: 2px solid #333;
    }

    .tablehead {
        background-color: #1f1f1f;
        /* Dark mode table background */
        color: #e0e0e0;
        /* Dark mode text color */
    }

    .prayerTimes {
        background-color: #2a2a2a;
        /* Dark mode table background */
        border-color: #444444;
        /* Dark mode border color */
    }

    .prayerTime_hdr {
        background-color: #333333;
        /* Dark mode header background */
    }

    .prayerTimeOdd {
        background-color: #2b2b2b;
        /* Dark mode odd row background */
    }

    .prayerTimeEven {
        background-color: #242424;
        /* Dark mode even row background */
    }

    .timeUpdate {
        background-color: #1e1e1e;
        /* Dark mode footer background */
        border-top: 2px solid #333;
    }
}

/* Responsive styles */
@media (max-width: 768px) {
    .tablehead {
        font-size: 18px;
    }

    .prayerTimes td {
        font-size: 16px;
        padding: 12px;
    }

    .hijridate,
    #gsHijriDatex {
        font-size: 20px;
    }

    .timeUpdate {
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .tablehead {
        font-size: 16px;
    }

    .prayerTimes td {
        font-size: 14px;
        padding: 10px;
    }

    .hijridate,
    #gsHijriDatex {
        font-size: 18px;
    }
}

#gsHijriDatex {
    pointer-events: none;
}

a {
    text-decoration: none;
    color: inherit;
}