#instance { border: 1px solid #ccc; background: transparent; } #choices { float: left; } .overlay { position: fixed; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0, 0, 0, 0.7); transition: opacity 500ms; visibility: hidden; opacity: 0; z-index: 2; } #information-bar { border-radius: 8px; padding: 1px; background: #ff8566; visibility: hidden; } #history-container { margin-bottom: 10cm; } .date, .amount { text-align: right; } .summary { text-indent: 4%; } .even { background-color: #ECFCEC } .odd { background-color: #FFF7E6 } .popup { margin: 70px auto; padding: 20px; background: #fff; border-radius: 5px; position: relative; transition: all 5s ease-in-out; left: 50%; top: 20%; transform: translate(-50%, -50%); display: inline-block; width: 45%; } .popup h2 { margin-top: 0; color: #333; font-family: Tahoma, Arial, sans-serif; } .popup .close { position: absolute; top: 10px; right: 30px; transition: all 200ms; font-size: 30px; font-weight: bold; text-decoration: none; color: #333; } .popup .close:hover { color: #06D85F; } .popup .track-content { max-height: 30%; overflow: auto; display: inline-block; width: 100%; } .track-content table { width: 100%; } th { text-align: left; } @media screen and (max-width: 700px){ .box{ width: 70%; } .popup{ width: 70%; } } #marker { text-align: center; padding: 0px; padding-bottom: 4px; border: 0px; border-bottom: 2px; border-style: solid; margin-bottom: 50px; font-size: 70%; } .loader { /* only let the JS to toggle/untoggle it */ margin-left: 30%; border: 7px solid #f3f3f3; /* Light grey */ border-top: 7px solid #696969; /* Blue */ border-radius: 50%; width: 40px; height: 40px; animation: spin 2s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .order-id, .wtid, .amount, .date { font-family: monospace; font-size: 140%; white-space: nowrap; } .summary { font-size: 90%; }