body { font-family: Arial, sans-serif; margin: 0; display: flex; flex-direction: column; min-height: 100vh; background-size: cover; background-position: center; background-color: #ffffff; overflow: hidden; } #content { flex-grow: 1; display: flex; flex-direction: column; align-items: center; width: 100%; padding: 20px; padding-bottom: 60px; } #background-overlay { position: absolute; top: 0; left: 0; width: 100vw; height: 100vh; background-size: cover; background-position: center; z-index: -1; } #banner-section img { max-width: 100%; height: auto; } #table-section { display: flex; flex-direction: column; align-items: center; } table { border-collapse: collapse; width: auto; } table, td { border: 1px solid black; } td { padding: 0; position: relative; height: 50px; } td input[type="text"] { width: 100%; height: 100%; border: none; padding: 10px; padding-right: 40px; box-sizing: border-box; text-align: left; background-color: transparent; } td input[type="text"]:focus { outline: none; } .counter-display { position: absolute; top: 50%; right: 10px; transform: translateY(-50%); font-size: 14px; color: #333; white-space: nowrap; } .counter-buttons { position: absolute; top: 50%; transform: translateY(-50%); display: flex; gap: 2px; } .counter-buttons button { display: flex; justify-content: center; align-items: center; width: 30px; height: 30px; font-size: 18px; margin: 0 5px; } .counter-buttons button:focus { outline: none; } .counter-buttons button:disabled { background: #d0d0d0; cursor: not-allowed; } .counter-buttons.left { right: 100%; margin-right: 5px; } .counter-buttons.right { left: 100%; margin-left: 5px; } #controls, #cell-content-popup { position: fixed; width: 50%; max-height: 50vh; background: #f1f1f1; padding: 10px; box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1); box-sizing: border-box; text-align: center; display: none; overflow-y: auto; display: flex; flex-direction: column; align-items: center; } .popup { position: fixed; cursor: move; outline: none; top: 50%; left: 20%; width: 300px; max-height: 80%; overflow-y: auto; background-color: white; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); padding: 20px; border-radius: 8px; z-index: 1000; } #controls-container, #cell-content-container { position: relative; } #controls { left: 0; bottom: 0; } #cell-content-popup { right: 0; bottom: 0; } #toggle-controls, #toggle-cell-content { position: fixed; bottom: 10px; background-color: #007bff; color: white; border: none; padding: 10px 15px; border-radius: 5px; cursor: pointer; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); } #toggle-controls { left: 10px; } #toggle-cell-content { right: 10px; } .close { position: absolute; top: 10px; right: 10px; font-size: 24px; cursor: pointer; color: #333; } .close:hover { color: red; } button { background-color: #007bff; color: white; border: none; padding: 10px 15px; margin: 5px; font-size: 14px; border-radius: 5px; cursor: pointer; transition: background-color 0.3s ease; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); } button:hover { background-color: #0056b3; } button:focus { outline: none; } input[type="text"], input[type="number"], input[type="file"] { padding: 8px; margin: 5px 0; box-sizing: border-box; border-radius: 5px; border: 1px solid #ccc; width: 80%; display: inline-block; } input[type="range"] { width: 80%; margin: 5px 0; } .checkbox-container { display: flex; align-items: center; margin: 5px; } .checkbox-container label { margin-left: 10px; } .flash-green { animation: flash-green-animation 3.5s; } @keyframes flash-green-animation { 0% { background-color: green; } 100% { background-color: initial; } } td { padding: 10px; border: 1px solid #000000; } .counter-buttons button:hover { background-color: #0056b3; } @media (max-width: 768px) { #controls, #cell-content-popup { width: 90%; } } .movable { position: absolute; top: 100px; left: 100px; border: 1px solid #ccc; padding: 10px; background: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); cursor: move; } .suggestions { border: 1px solid #ccc; background: #fff; max-height: 150px; overflow-y: auto; position: absolute; width: calc(100% - 20px); top: 100%; left: 0; z-index: 1000; } .suggestion-item { padding: 8px; cursor: pointer; } .suggestion-item:hover { background-color: #f1f1f1; } #movable-text-box { position: absolute; background: #fff; border: 1px solid #ccc; padding: 10px; border-radius: 4px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); } #searchInput { width: calc(100% - 10px); padding: 5px; margin-bottom: 5px; } #rankSelect { width: 100%; padding: 5px; margin-bottom: 5px; } .suggestions { border: 1px solid #ddd; max-height: 150px; overflow-y: auto; position: absolute; background: white; z-index: 1000; width: 100%; } .suggestion-item { padding: 8px; cursor: pointer; } .suggestion-item:hover { background-color: #f0f0f0; } #card-details { margin-top: 20px; } #cards-popup { display: none; position: fixed; bottom: 10%; left: 50%; width: 300px; padding: 20px; background-color: white; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); z-index: 1000; } .card-list img { transition: transform 0.2s, box-shadow 0.2s; } .card-list img:hover { transform: scale(1.1); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); } .card-list { display: flex; flex-direction: column; } .category { margin-bottom: 15px; } img { border-radius: 4px; } #show-cards { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); } #show-cards-popup { position: fixed; top: 50%; left: 20%; width: 20%; max-height: 70%; overflow-y: auto; background-color: white; border: 1px solid #ccc; border-radius: 8px; padding: 20px; z-index: 1000; } .category { margin-bottom: 15px; } .category h4 { margin-bottom: 5px; } #confirmModal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1000; background-color: rgba(0, 0, 0, 0.5); } #content { display: flex; flex-direction: column; align-items: center; } #title { margin: 0; padding: 10px; font-size: 24px; }