/* Body Layout */
body {
    font-family: Arial, sans-serif; /* Set the entire website's font to Arial */
}

.parent-container {
    position: relative; /* Position the grid container relative to its parent */
    width: 100%; /* Full width */
    max-width: 800px; /* Set maximum width as needed */
    height: 100vh; /* Full viewport height */
}

.grid-container {
    display: grid;
    grid-template-rows: 80px auto; /* First row 80px high, second row auto height */
    grid-template-columns: 28% 72%; /* First column 28%, second column 72% */
    margin: 0 auto; /* Center horizontally */
    width: 100%; /* Full width */
    max-width: 800px; /* Set maximum width as needed */
    border-bottom: 1px solid black; /* Thin and black bottom line */
}

.cell {
    border: 1px solid black; /* Thin black border */
    padding: 8pt;
    overflow: auto; /* Allow overflow content to be scrolled */
    word-wrap: break-word; /* Break text if it exceeds cell width */
}

.cell img {
    width: 100%; /* Make the image fill the entire cell */
    height: auto; /* Maintain aspect ratio */
    object-fit: cover; /* Scale the image to cover the entire area of the cell */
}

.cell video {
    width: 100%; /* Make the video fill the entire width of the cell */
    height: auto; /* Automatically adjust the height to maintain aspect ratio */
}

.cell:nth-child(3) {
    background-color: rgba(255, 213, 0, 0.217); /* Set the background color of the third cell */
}

/* Line Styling */
hr {
    border: none; /* Remove default border */
    border-top: 1px solid black; /* Adjust thickness and color as needed */
    margin: 10px 0; /* Adjust spacing above and below the line */
}

/* Tooltip Styles */
.tooltip {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -60px;
    opacity: 0;
    transition: opacity 0.3s;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}

.tooltip2 {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

.tooltip2 .tooltiptext2 {
    visibility: hidden;
    width: 70px;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 9999; /* Ensure tooltips are above all other elements */
    top: 50%;
    left: calc(100% + 5px); /* Position to the right of the element */
    transform: translateY(-50%);
    opacity: 0;
    transition: opacity 0.3s;
}

.tooltip2:hover .tooltiptext2 {
    visibility: visible;
    opacity: 1;
}

/* Popup Message (not in use) */
.popup-message {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    z-index: 9999;
}

.popup-message button {
    display: inline-block;
    padding: 10px 20px; /* Adjust as needed */
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin-right: 10px;
    transition: background-color 0.3s;
}

.popup-message button:hover {
    background-color: #0056b3;
}

.error-message {
    color: rgba(254, 73, 2, 0.902);
}

.ok-message {
    color: rgb(6, 254, 2);
}