/* Scoped styles for the Hospital OP Availability plugin */

/* Container styling */  
.hospital-op-container {  
    position: relative; /* Required for positioning the pseudo-element */  
    font-family: Noto Serif Malayalam, Arial, sans-serif;  
    text-align: center; /* Centering text */  
    font-weight: bold; /* Make text bold */  
    margin: 20px auto;  
    max-width: 800px; /* Adjust as needed */  
    padding: 20px; /* Add padding for better spacing */  
    border-radius: 8px; /* Rounded corners */  
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); /* Soft shadow */  
    overflow: hidden; /* Hide anything that overflows the container */  
}  

/* Pseudo-element for background image */  
.hospital-op-container::before {  
    content: ""; /* Necessary for the pseudo-element */  
    position: absolute; /* Position it absolutely within the container */  
    top: 0;  
    left: 0;  
    right: 0;  
    bottom: 0;  
    background-image: url('https://www.keezhariyourvarthakal.com/wp-content/uploads/2024/07/cropped-Logo-361x201-1-300x105-1.png');  
    background-position: center; /* Center the image */  
    background-repeat: repeat; /* Repeat the image */  
    background-size: 8% 2%; /* Set to a small size to repeat many times */  
    opacity: 0.04; /* Set background opacity to 4% */  
    z-index: 1; /* Set below the text */  
}  

.hospital-op-container > * {  
    position: relative; /* Position children elements above the pseudo-element */  
    z-index: 2; /* Move the content above the background */  
    color: #000; /* Ensures text is visible, adjust as needed */  
}    

/* Table styling */
.hospital-op-container table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

.hospital-op-container th,
.hospital-op-container td {
    padding: 5px;
    border: 1px solid #ddd;
    text-align: center;
}

.hospital-op-container th {
    background-color: #200ee8;
    color: white;
}

/* Status styling */
.hospital-op-container .status {
    display: inline-block;
    padding: 5px 20px;
    border-radius: 4px;
    font-size: 16px;
    font-weight: bold;
    color: #FFFFFF; /* Set default font color for status */
}

.hospital-op-container .status.on {
    background-color: #4CAF50; /* Green */
}

.hospital-op-container .status.off {
    background-color: #f44336; /* Red */
}

/* Hover animation */
.hospital-op-container table tbody tr:hover {
    background-color: #f2f2f2; /* Light gray background on hover */
    transition: background-color 0.3s ease;
}

/* Bold date */
.hospital-op-container #hospital-op-date {
     font-size: 16px;
	font-weight: bolder;
}