main .container { padding: 0; } .container { max-width: 1300px; } .columnSection { padding: 20px 0 20px 0; max-width: 1300px; } .historyButtonContainer { width: 70%; box-sizing: border-box; } .historySearchContainer { width: 30%; box-sizing: border-box; text-align: right; } .button-outer { margin-right: 15px; background: var(--history-link-color); } .button-outer.active { color: var(--navlink-color); } #currentButton { text-decoration: none; color: var(--white); background: var(--link-color); border-radius: 5px; } .historySearch { vertical-align: -15px; } .searchButton { vertical-align: -15px; } .historyTable { font-family: 'open-sans', sans-serif; margin-bottom: 20px; width: 100%; text-align: center; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); border-radius: 5px; } .dropdown-results { position: absolute; top: 100%; left: 0; width: 100%; max-height: 300px; overflow-y: auto; background-color: white; border: 1px solid #ddd; border-top: none; z-index: 1000; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } .dropdown-item { padding: 8px 12px; cursor: pointer; } .dropdown-item:hover { background-color: #f5f5f5; } .changePageButtons { margin: 0 auto; padding: 10px 0 30px 0; } .historyPageButton { align-items: center; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: .25rem; box-shadow: rgba(0, 0, 0, 0.02) 0 1px 3px 0; box-sizing: border-box; color: rgba(0, 0, 0, 0.85); cursor: pointer; display: inline-flex; font-family: 'opensans', sans-serif; font-size: 16px; font-weight: 600; justify-content: center; line-height: 1.25; margin: 0 5px 0 5px; min-height: 3rem; padding: calc(.875rem - 1px) calc(1.5rem - 1px); position: relative; text-decoration: none; transition: all 250ms; user-select: none; -webkit-user-select: none; touch-action: manipulation; vertical-align: baseline; width: auto; } .historyPageButton.active:hover, .historyPageButton.active:focus { border-color: rgba(0, 0, 0, 0.15); box-shadow: rgba(0, 0, 0, 0.1) 0 4px 12px; color: rgba(0, 0, 0, 0.65); } .historyPageButton.active:hover { transform: translateY(-1px); } .historyPageButton.active:active { background-color: #F0F0F1; border-color: rgba(0, 0, 0, 0.15); box-shadow: rgba(0, 0, 0, 0.06) 0 2px 4px; color: rgba(0, 0, 0, 0.65); transform: translateY(0); } .historyPageButton.disabled { opacity: 0.5; cursor: not-allowed; background-color: #f0f0f0; color: #999; box-shadow: none; pointer-events: none; } /* Prevent hover effects on disabled buttons */ .historyPageButton.disabled:hover, .historyPageButton.disabled:focus { border-color: rgba(0, 0, 0, 0.1); box-shadow: none; transform: none; color: #999; }