<!doctype html> <html> <head> <title>{{ title }}</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- CSS Reset --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.css"> <!-- Milligram CSS --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/milligram/1.4.1/milligram.css"> <style> th { text-align: left; margin: 0px; padding: 5px 0px 5px 0px; } table { } #data { width: 100%; border-collapse: collapse; } #data th:nth-child(3), #data td:nth-child(3) { max-width: 300px; /* Adjust as needed */ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .center-table { } td { padding: 0px 0px 0px 0px; margin-left: 10px; height: 50px; min-width: 55px; display: table-cell; white-space: nowrap; /* Prevent text wrapping */ overflow: hidden; /* Hide overflow content */ text-overflow: ellipsis; /* Display ellipsis for overflow content */ } .hidden-mobile { display: table-cell; } .table-container { overflow-x: auto; /* Enable horizontal scrolling */ } .table-wrapper { overflow-x: auto; /* Enable horizontal scrolling */ } @media only screen and (min-width: 600px) { .hidden-desktop { display: none; } } @media only screen and (max-width: 600px) { table { width: 100%; /* Expand table to full width on mobile */ table-layout: fixed; } .fixed-width { width: 100%; } td:first-child { position: sticky; left: 0; z-index: 1; background-color: #fff; /* Make the first column background white */ } .hidden-mobile { display: none; } } .centered-cell { text-align: center; /* Center the content horizontally within the cell */ } .inputContainer { display: inline-block; /* Display as an inline block */ vertical-align: middle; /* Center vertically within the cell */ width: 120px; } .inputContainer form { margin: 5% auto 5% auto; } .inputField { display: flex; align-items: center; /* Align items vertically */ width: 100%; /* Ensure inputField fills out inputContainer */ height: 100%; /* Ensure inputField fills out inputContainer */ } .inputField input { flex: 1; width: 70%; padding: 0px; margin: auto 2.5px auto 2.5px; } .inputField button { width: 30%; padding: 0px; margin: 0 2.5px 0 2.5px; } .square-button { background-color: white; border: 1px solid #d1d1d1; } td img{ display: block; margin-left: auto; margin-right: 5px; } /* Modal Styles */ #lightbox-modal { display: none; position: fixed; z-index: 1000; padding-top: 50px; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); } .lightbox-wrapper { position: relative; width: 100%; height: 100%; } .lightbox-content { max-width: 90%; max-height: 90%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } #lightbox-text { position: absolute; bottom: 20px; /* Adjust as needed */ left: 50%; transform: translateX(-50%); padding: 10px; background-color: rgba(0, 0, 0, 0.5); /* Adjust background color and opacity */ color: white; text-align: center; } #lightbox-modal .close { position: absolute; top: 10px; right: 25px; font-size: 50px; color: white; cursor: pointer; } #lightbox-modal img { display: block; margin: 0 auto; max-width: 90%; max-height: 90%; } </style> </head> <body> <button style="background-color: white;color: black;border: 1px dotted black;width: 98%;margin: 1%;" onclick="goToPage('/')">Home</button> <div class="container"> <h2 style="margin: 20px 0px 0px 0px;">{{ title }}</h2> <hr> {% block content %}{% endblock %} </div> {% block scripts %}{% endblock %} </body> </html>