a { text-decoration: none; } .activity { border: 0; padding: 0%; } .icon-container { margin: auto; width: 40px; height: 40px; overflow: hidden; padding-bottom: 4px; } .round-img { width: 100%; height: 100%; clip-path: circle(50%); } img { border: 1px solid; } .buttonGroup .button { background-color: #5a0066; border: 1px solid white; color: white; text-align: center; text-decoration: none; font-size: 10px; cursor: pointer; float: left; height: 48px; } .buttonGroup .button:disabled { cursor: auto; opacity: 0.7; } .buttonGroup .button:not(:last-child) { border-right: none; } .buttonGroup .button:hover { background-color: #75004e; } div { text-align: center; } .inputDiv { padding-top: 40px; padding-bottom: 10px; } .inputDiv .logo { position: absolute; margin-top: 4px; top: 0px; left: 15px; width: 80px; border: 0px; } .inputDiv .icon { position: absolute; margin-top: 4px; top: 0px; right: 20px; width: 40px; border: 0px; } h1 { font-size:18px; } .nameP { font-size:16px; } .detailsP { font-size:16px; } .roundButton { background-color: #5a0066; border: none; color: white; text-align: center; text-decoration: none; font-size: 11px; cursor: pointer; height: 42px; width: 42px; border-radius: 50%; } .roundButton:disabled { cursor: auto; opacity: 0.7; } .roundButton:hover { background-color: #75004e; } .gameButtons { margin-bottom: -20px; } .gameButton { height: 28px; width: 64px; } .image-wrapper { margin-top: -10px; } progress { width: 100%; height: 7px; visibility: hidden; } .image-container { position: relative; display: inline-block; } .image-container .image { border: 1; display: block; max-width: 600px; margin-left: auto; margin-right: auto; } .optionList { position: relative; display: inline-block; width: 240px; } .optionList input { width: 100%; padding: 8px; box-sizing: border-box; font-size: 14px; } .optionList ul { list-style: none; margin: 0; padding: 0; border: 1px solid #ccc; max-height: 272px; overflow-y: auto; position: absolute; width: 100%; background: white; display: none; z-index: 1000; } .optionList ul li { text-align: left; padding: 8px; cursor: pointer; } .optionList ul li:hover { background-color: lightgray; } .optionList ul li.active { background-color: #007BFF; color: white; } .testButtons { position: fixed; padding-top: 5px; bottom: 0; width: 100%; height: 80px; text-align: center; } .accreditation { margin: auto; width: 98%; display: flex; justify-content: space-between; align-items: center; font-size: 11px; margin-bottom: -12px; } .inline-text { margin: auto; width: 85%; display: flex; justify-content: space-between; align-items: center; font-size: 11px; } .spacer1 { width: 16px; display: inline-block; } .spacer2 { width: 64px; display: inline-block; } .dialog { width: 300px; display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: white; border: 1px solid #ccc; padding: 20px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); z-index: 1000; } .dialog .dialogTitle { text-align: left; font-size: 18px; font-weight: bold; margin-bottom: 10px; } .dialog .dialogText { text-align: left; } .dialog .dialogButtons { width: 100%; display: flex; justify-content: center; } .dialog .dialogButton { margin-top: 16px; width: 60px; } .dialog .dialogSpacer { width: 40px; display: inline-block; } .dialog .extraButton-container { display: 'none'; } .overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.2); z-index: 999; } .spinner { display: none; width: 40px; height: 40px; border: 5px solid #ccc; border-top: 5px solid #007bff; border-radius: 50%; animation: spin 0.8s linear infinite; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1000; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }