/*
.navigation-bar {
    background-color: #76b900 !important;
}

.navigation-bar a {
    color: #fff !important;
}

.sub-menu li a {
    color: #76b900 !important;
}

a {
    color: #76b900 !important;
}
*/

/******************************/

h4, h5 {
    text-align:center;
}


/* Main styles */
.islamic-date-full,
.gregorian-date-info,
.islamic-date-tomorrow {
    margin: 20px 0;
    padding: 15px;
    /* background-color: #f9f9f9; */
    background-color: #fff;
    /* border-left: 4px solid #2b5876; */
    border-left: 5px solid #76b900;
}

.islamic-time-dates table,
.gregorian-date-info table {
    width: 100%;
    border-collapse: collapse;
    margin: 15px 0;
    background-color: #fff;
}

.islamic-time-dates th,
.islamic-time-dates td,
.gregorian-date-info th,
.gregorian-date-info td {
    padding: 8px 12px;
    border: 1px solid #ddd;
    text-align: left;
}

.islamic-time-dates th,
.gregorian-date-info th {
    /* background-color: #f2f2f2; */
    background-color: #76b900;
    border: 1px solid #4e954e;
    color: #fff;
}

.islamic-calendar {
    margin: 20px 0;
    overflow-x: auto;
}

.islamic-calendar table {
    width: 100%;
    border-collapse: collapse;
}

.islamic-calendar th,
.islamic-calendar td {
    padding: 8px 12px;
    border: 1px solid #ddd;
    text-align: left;
}

.islamic-calendar th {
    background-color: #2b5876;
    color: white;
}

.islamic-calendar tr:nth-child(even) {
    background-color: #f2f2f2;
}

/* Widget styles */
.islamic-date-widget {
    text-align: center;
    padding: 10px;
}

.islamic-date-widget p {
    margin: 5px 0;
    font-size: 1.1em;
}

.islamic-date-widget p:first-child {
    font-weight: bold;
    font-size: 1.2em;
}


/* ///////////////////////////////////////// */

/* Islamic Calendar Table */
.islamic-calendar {
    width: 100%;
    max-width: 600px;
    max-width: 850px;
    border-collapse: collapse;
    margin: 20px auto;
    font-family: Arial, sans-serif;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    background-color: #fff;
}

.islamic-calendar th {
    /* background-color: #007b5e; */
    background-color: #76b900;
    color: #fff;
    padding: 10px;
    font-weight: bold;
    text-align: center;
}

.islamic-calendar td {
    border: 1px solid #ddd;
    width: 14.28%;
    min-height: 80px;
    padding: 20px;
    vertical-align: top;
    text-align: center;
    font-size: 14px;
    background-color: #fdfdfd;
    position: relative;
}

.islamic-calendar td strong {
    display: block;
    font-size: 15px;
    color: #333;
}

.islamic-calendar td small {
    font-size: 12px;
    color: #888;
}

/* Empty cells for alignment */
.islamic-calendar td:empty {
    background-color: #f9f9f9;
}

/* Highlight current day (optional) */
.islamic-calendar td.today {
    background-color: #dff0d8;
    border: 2px solid #4cae4c;
}

/* ///////////////////////////// */

.card-islamic-section {
    /* padding:20px; */
    padding: 0px 30px;
}
.card-islamic-section h3 {
    margin-top: 0;
    /* color: #2b5876; */
    color: #76b900;
}


/* *********************************************** */

/* Prayer Times Styles */
.prayer-times {
    margin: 20px 0;
    padding: 15px;
    /*background-color: #f9f9f9;*/
    background-color: #fff;
    /* border-left: 6px solid #2b5876; */
    border-left: 5px solid #76b900;
}

.prayer-times h3 {
    margin-top: 0;
    /* color: #2b5876; */
    color: #76b900;
}

.prayer-times-location {
    font-style: italic;
    margin-bottom: 15px;
}

.btn-sehr {
  color: #fff;
  background-color: #a72875;
  border-color: #931561;
}

.prayer-times table {
    width: 100%;
    border-collapse: collapse;
}

.prayer-times th,
.prayer-times td {
    padding: 8px 12px;
    border: 1px solid #ddd;
}

.prayer-times th {
    background-color: #2b5876;
    color: white;
}

.prayer-times-list ul {
    list-style-type: none;
    padding: 0;
}

.prayer-times-list li {
    padding: 8px 0;
    border-bottom: 1px solid #eee;
}

.prayer-times-list li:last-child {
    border-bottom: none;
}

.prayer-times-simple .prayer-times-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.prayer-times-simple .prayer-times-grid div {
    display: flex;
    justify-content: space-between;
    padding: 8px;
    background-color: #f2f2f2;
    font-weight: bold;
}

.prayer-times-widget {
    text-align: center;
}

.prayer-times-widget table {
    width: 100%;
    border-collapse: collapse;
}

.prayer-times-widget td {
    padding: 5px;
    border-bottom: 1px solid #eee;
}

.prayer-times-widget tr:last-child td {
    border-bottom: none;
}

/* Location Selector */
.prayer-location-selector {
    max-width: 500px;
    margin: 20px auto;
    padding: 20px;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
}

.prayer-location-selector .form-group {
    margin-bottom: 15px;
}

.prayer-location-selector label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

/*************************/


/* Upcoming Prayer Styles */
.upcoming-prayer {
    padding: 15px;
    background-color: #f5f5f5;
    border-radius: 5px;
    margin: 20px 0;
}

.upcoming-prayer .current-prayer,
.upcoming-prayer .next-prayer {
    margin: 10px 0;
    padding: 10px;
    background-color: white;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.upcoming-prayer .prayer-label {
    font-weight: bold;
    color: #2b5876;
}

.upcoming-prayer .prayer-name {
    color: #333;
}

.upcoming-prayer .prayer-time {
    color: #666;
    font-style: italic;
}

/* Monthly Prayer Times */
.monthly-prayer-times {
    margin: 20px 0;
    overflow-x: auto;
}

.monthly-prayer-times table {
    width: 100%;
    border-collapse: collapse;
}

.monthly-prayer-times th {
    background-color: #2b5876;
    color: white;
    padding: 10px;
    text-align: center;
}

.monthly-prayer-times td {
    padding: 8px 10px;
    border: 1px solid #ddd;
    text-align: center;
    width: 12.5%;
}
.monthly-prayer-times td:first-child {
    font-weight: bold;
}

.monthly-prayer-times tr:nth-child(even) {
    background-color: #f9f9f9;
}

.monthly-prayer-times tr.today {
    background-color: #e6f7ff;
    font-weight: bold;
}


/****************************************************************************************/
/* Prayers */
/****************************************************************************************/


 .ua-prayer-times-container {
    margin: 20px 0;
    background-color: #fff;
    /* border: 1px solid #e5e5e5; */
    /* box-shadow: 0 1px 1px rgba(0,0,0,.04); */

    font-family: 'Roboto', sans-serif; /* Using a common font similar to the site */
    /* border: 1px solid #e0e0e0; */
    border-radius: 8px;
    /* padding: 20px; */
    padding: 0px 45px;
    /* max-width: 650px; */  /* Adjust max-width as needed */
    margin: 20px auto; /* Center the block */
    /* box-shadow: 0 4px 8px rgba(0,0,0,0.05); */
    background-color: #ffffff;
    color: #333333;
    line-height: 1.6;
}

.ua-prayer-times-container h2 {
    margin-top: 0;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
}


.ua-prayer-times-container h3 {
    text-align: center;
    margin-top: 0;
    margin-bottom: 25px;
    color: #0056b3; /* A shade of blue */
    font-size: 24px;
    font-weight: 700;
    position: relative;
    padding-bottom: 10px;
}

.ua-prayer-times-container h3::after {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background: #0056b3;
    margin: 10px auto 0;
    border-radius: 2px;
}

.ua-prayer-times-container h4 {
    margin-top: 30px;
    margin-bottom: 15px;
    color: #555555;
    font-size: 18px;
    font-weight: 600;
    border-bottom: 1px solid #eeeeee;
    padding-bottom: 8px;
}

.ua-prayer-times-container p {
    font-size: 1em;
    margin-bottom: 15px;
}

.ua-prayer-times-container p strong {
    color: #0056b3; /* Highlight prayer names in paragraphs */
    font-weight: 600;
}

/* Styles for the "Azan Time Today" section with boxes */
.ua-prayer-times-today {
    margin-bottom: 25px; /* Space below this section */
    text-align: center; /* Center the boxes container */
}

.ua-prayer-times-today h4 {
    margin-top: 0; /* Remove top margin */
    margin-bottom: 20px; /* More space below heading */
    border-bottom: none; /* Remove border from this h4 */
    padding-bottom: 0;
    color: #0056b3; /* Match main heading color */
}

.ua-prayer-times-boxes {
    display: flex; /* Use flexbox for horizontal layout */
    justify-content: space-around; /* Distribute space evenly */
    flex-wrap: wrap; /* Allow boxes to wrap on smaller screens */
    gap: 10px; /* Space between boxes */

}

.ua-prayer-time-box {
    background-color: #d0eef7; /* Light background */
    border: 1px solid #8bdef7;
    border-radius: 5px;
    /* padding: 15px 10px;*/ /* Adjust padding */
    padding: 25px 0px 0px 0px;
    font-size: 20px;
    flex: 1 1 100px; /* Flex properties: grow, shrink, base width */
    /* max-width: 120px; */ /* Max width for each box */
    text-align: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    }

.ua-prayer-time-box:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.ua-prayer-time-box strong {
    display: block; /* Make prayer name a block element */
    font-size: 0.9em;
    color: #555555;
    margin-bottom: 5px;
}

.ua-prayer-time-box .time {
    font-size: 1.1em;
    font-weight: bold;
    color: #0056b3; /* Blue color for times */
}

.ua-prayer-time-box .countdown {
    display: block; /* Make countdown a block element */
    /* font-size: 0.8em; */
    font-size: 12px;
    color: #e57300; /* Orange color for countdown */
    margin-top: 5px;
    min-height: 1.2em; /* Reserve space to prevent layout shift */
}

/* Style for the highlighted upcoming prayer box */
.ua-prayer-time-box.upcoming {
    background-color: #d0eef7; /* Lighter blue background */
    border-color: #0056b3; /* Blue border */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.14);
}

.ua-prayer-time-box.upcoming strong,
.ua-prayer-time-box.upcoming .time,
.ua-prayer-time-box.upcoming .countdown {
    color: #004085; /* Darker blue text for contrast */
}
.calculation-method, .calculation-method p {
    font-size: 12px !important; 
    font-style: italic; 
    padding-top: 10px; 
    text-align: right !important;
}

/****************************************************************************************/
/* Nawafil Prayers */
/****************************************************************************************/

 .ua-prayer-times-container {
    margin: 20px 0;
    background-color: #fff;
    /* border: 1px solid #e5e5e5; */
    /* box-shadow: 0 1px 1px rgba(0,0,0,.04); */

    font-family: 'Roboto', sans-serif; /* Using a common font similar to the site */
    /* border: 1px solid #e0e0e0; */
    border-radius: 8px;
    /* padding: 20px; */
    padding: 0px 45px;
    /* max-width: 650px; */  /* Adjust max-width as needed */
    margin: 20px auto; /* Center the block */
    /* box-shadow: 0 4px 8px rgba(0,0,0,0.05); */
    background-color: #ffffff;
    color: #333333;
    line-height: 1.6;
}

.ua-prayer-times-container h2 {
    margin-top: 0;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
}


.ua-prayer-times-container h3 {
    text-align: center;
    margin-top: 0;
    margin-bottom: 25px;
    color: #0056b3; /* A shade of blue */
    font-size: 24px;
    font-weight: 700;
    position: relative;
    padding-bottom: 10px;
}

.ua-prayer-times-container h3::after {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background: #0056b3;
    margin: 10px auto 0;
    border-radius: 2px;
}

.ua-prayer-times-container h4 {
    margin-top: 30px;
    margin-bottom: 15px;
    color: #555555;
    font-size: 18px;
    font-weight: 600;
    border-bottom: 1px solid #eeeeee;
    padding-bottom: 8px;
}

.ua-prayer-times-container p {
    font-size: 1em;
    margin-bottom: 15px;
}

.ua-prayer-times-container p strong {
    color: #0056b3; /* Highlight prayer names in paragraphs */
    font-weight: 600;
}

.ua-prayer-times-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 25px;
    border-radius: 8px;
    overflow: hidden; /* Ensures rounded corners apply to border */
}


.ua-prayer-times-table thead {
    background-color: #f8f8f8; /* Light grey header background */
}


/* Style for the highlighted current day row */
.ua-prayer-times-table tr.current-day td {
    color: #333333; /* Ensure text color is readable */
}

.ua-prayer-times-table tbody tr:nth-child(even) {
    background-color: #fcfcfc; /* Slight stripe effect */
}

.ua-prayer-times-table tbody tr.current-day:nth-child(even) {
    background-color: #fff0cc; /* Adjust stripe for highlighted row */
    background-color: #78e693;
    font-weight: bold; /* Make text bold */
}

.ua-prayer-times-faq {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #eeeeee;
}

.ua-prayer-times-faq h4 {
    margin-top: 0;
    margin-bottom: 15px;
    color: #555555;
    font-size: 18px;
    font-weight: 600;
    border-bottom: none; /* Remove border from FAQ heading */
    padding-bottom: 0;
}

.ua-prayer-times-faq ul {
    list-style: none; /* Remove default list style */
    margin-left: 0;
    padding: 0;
}

.ua-prayer-times-faq li {
    margin-bottom: 15px;
    padding-left: 20px; /* Space for custom bullet */
    position: relative;
    line-height: 1.6;
}

.ua-prayer-times-faq li::before {
    /* content: '\2022'; */ /* Unicode character for a bullet point */
    /* color: #0056b3; */ /* Blue bullet */
    font-weight: bold;
    display: inline-block;
    width: 1em;
    margin-left: -1em;
    position: absolute;
    left: 0;
}

.ua-prayer-times-faq li strong {
    color: #333333; /* FAQ question color */
    font-weight: 600;
}



/* Style for the current day in the Islamic Calendar */
.islamic-calendar .current-day {
    /* background-color: #e0f2f7; */ /* Light blue background */
    /* border: 1px solid #007bff; */ /* Blue border */
    border: 2px solid #76b900;
    font-weight: bold;
    /* box-shadow: 0 0 5px rgba(0, 123, 255, 0.3); */ /* Subtle glow */
    position: relative; /* Needed for pseudo-elements if you want to add an indicator */
}

/* Optional: Add a small indicator for the current day */
.islamic-calendar .current-day::after {
    content: '★'; /* Star, or any other character */
    position: absolute;
    top: 5px;
    right: 5px;
    font-size: 20px;
    color: #76b900;
}

/* ///////////////////////////// */

/* --- Islamic Calendar Shortcode Styles --- */
.islamic-calendar-short {
    width: 225px; /* Adjust width as needed */
    width: 320px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    text-align: center;
    margin: 20px auto; /* Centers the calendar on the page */
}

.islamic-calendar-short-date-header {
    /* background-color: #007bff;    
    border-bottom: 1px solid #0056b3; */
    background-color: #76b900;
    border: 1px solid #4e954e;
    color: white;
    padding: 10px 0;
    font-size: 1.2em;
    font-weight: bold;
}

.islamic-calendar-short-date-body {
    padding: 15px; /* Slightly less padding for a tighter look */
}

.islamic-calendar-short-day {
    font-size: 1.2em; /* Smaller font for Gregorian day */
    color: #777;
    text-transform: uppercase;
    margin-bottom: 5px;
}

.islamic-calendar-short-date {
    font-size: 3em;
    font-weight: bold;
    text-transform: uppercase;
    color: #333;
    margin-bottom: 5px; /* Space between Islamic date and Gregorian full date */
    line-height: 1; /* Adjust line height for better spacing */
}

.islamic-calendar-short-date-gregorian-date {
    font-size: 0.9em; /* Font for Gregorian full date */
    color: #555;
    font-weight: bold;
}

/* Responsive Styles */
/* @media (max-width: 600px) { */
@media screen and (max-width: 782px) {

    .card-islamic-section {
        /* padding: 0px 25%; */
        padding: 5px;
    }
    .calender-date-table {
        display:block !important;
    }

    .islamic-calendar {
        max-width: 400px !important;
        margin: 0px !important;
    }
    .islamic-calendar td {
        padding: 5px !important;
    }
    .islamic-calendar td strong {
        font-size: 12px;
    }
    .islamic-calendar-short {
        width: 392px !important;
    }
}
/* @media (max-width: 600px) { */
@media screen and (max-width: 450px) {

    .ua-prayer-times-table th, .ua-prayer-times-table td {
        padding: 6px 4px !important;
        font-size: 12px !important;
    }
    .entry-content {
        padding: 0px !important;
    }
    .btn-primary, .btn-sehr, .btn-info {
        font-size: 12px !important;
    }
}