#topNav [class*='icon-']:before { padding-top: 9px; padding-bottom: 9px; } .wrapped { position: relative; clear: both; } .wrap { width: 100%; height: 100%; } ::selection { background-color: #000; color: #fff; } .overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); pointer-events: none; } .no-outline:focus { outline: none; } ::-webkit-input-placeholder { color: lightgray; } :-ms-input-placeholder { color: lightgray; } ::placeholder { color: lightgray; } select:focus { outline: none !important; } a { text-decoration: inherit; } object[type*="svg"]{ pointer-events: none } .notification { position: fixed; z-index: 9999; } .notification.top { top: 0; } .notification.middle { top: 50%; -webkit-transform: translate(0, -50%); -ms-transform: translate(0,-50%); transform: translate(0, -50%); } .notification.bottom { bottom: 0; } .notification.left, .notification.en { left: 0; } .notification.center { left:50%; -webkit-transform: translate(-50%, 0); -ms-transform: translate(-50%,0); transform: translate(-50%, 0); } .notification.right, .notification.ar { right: 0; } .notification .message { background-color: #202124 !important; color: #F2FFFF !important; } .notification .message span { padding: 8px 12px; } .notification .message span:nth-child(2) { color: #5F87CF !important; cursor: pointer; } .notification .message span:nth-child(2):hover { background-color: #323E50 !important; } .notification .message span:last-child { color: #CAC9CE !important; cursor: pointer; } .notification span:last-child:hover { background-color: #4D4C51 !important; border-radius: 50%; } .label { padding-bottom: 8px !important; } #signuppasswordvalidationmessage { display:none; } #signuppasswordvalidationmessage .valid { color: green; } #signuppasswordvalidationmessage .valid:before { position: relative; left: -10px; content: "✔"; } #signuppasswordvalidationmessage .invalid { color: red; } #signuppasswordvalidationmessage .invalid:before { position: relative; left: -10px; content: "✖"; } .error p { padding: 5px 15px !important; color: red; background-color: rgba(200,0,0,0.05); margin: 4px 10px; border-radius: 4px; font-size: 85%; font-weight: 600; } th > .sort-icon { padding-right: 20px; } .sort-icon { position: relative; display: inline-block; } .sort-icon i { position: absolute; right: 0; top: 50%; transform: translateY(-50%); cursor: pointer; margin-left: 10px; display: block; } .sort-icon i:first-child { margin-top: -1em; } .sort-icon i:last-child { margin-bottom: -1em; } .w3-opacity-med, .w3-hover-opacity-med { opacity: 0.50; } .w3-padding-0 { padding: 0 !important; } .w3-padding-16-top { padding-top:16px!important; } .w3-padding-16-bottom { padding-bottom:16px!important } .w3-offwhite,.w3-hover-offwhite:hover{color:#000!important;background-color:#F8F9FD!important} .w3-input-container { position: relative; } .w3-input-button { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; padding: 0; margin: 0; } .w3-input-button i { font-size: 1.2em; } .tooltip { position: relative; display: inline-block; cursor: pointer; } .tooltip .tooltiptext { visibility: hidden; width: max-content; max-width: 200px; background-color: #555; color: #fff; text-align: center; border-radius: 5px; padding: 5px 10px; position: absolute; z-index: 1; bottom: 125%; left: 50%; transform: translateX(-50%); opacity: 0; transition: opacity 0.3s, top 0.3s, bottom 0.3s, left 0.3s, right 0.3s; } .tooltip .tooltiptext::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border-width: 5px; border-style: solid; border-color: #555 transparent transparent transparent; } .tooltip.tooltip-bottom .tooltiptext::after { top: auto; bottom: 100%; border-color: transparent transparent #555 transparent; } .tooltip:hover .tooltiptext { visibility: visible; opacity: 1; } .tooltip.tooltip-bottom .tooltiptext { top: 125%; bottom: auto; } .tooltip.tooltip-left .tooltiptext { left: auto; right: 100%; transform: translateX(0); } .tooltip.tooltip-right .tooltiptext { right: auto; left: 100%; transform: translateX(0); } .action-icon-custom-size { width: 24px; height: 36px; } .action-icon-custom-font { font-size: 24px; line-height: 36px; } #quizIndexMobile { -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; display: flex !important; align-items: center; background: linear-gradient(to bottom, #f8f9fa, #e9ecef); } #quizIndexMobile::-webkit-scrollbar { display: none; } .quiz-index-active { transform: scale(1.1); z-index: 1; } @media only screen and (max-width: 600px) { #quizIndex { display: none !important; } #quizContent { padding-top: 20px !important; padding-right: 0 !important; padding-left: 0 !important; } #questionDiv { padding-top: 40px !important; } } @media only screen and (min-width: 601px) { #quizIndexMobile, #quizIndexMobileSpacer { display: none !important; } } @media only screen and (min-width: 601px) { #quiz { position: relative; } #quizIndex { position: fixed; right: 8px; width: 105px; z-index: 100; } #quizContent { transition: padding-right 0.3s ease; box-sizing: border-box; } } @media only screen and (max-width: 600px) { #quizContent { width: 100% !important; max-width: 100% !important; padding-left: 10px !important; padding-right: 10px !important; box-sizing: border-box; } #quizContent > .w3-display-container { margin-top: 10px; } #questionDiv { padding-top: 60px !important; } } .w3-animate-right { animation-duration: 0.4s; } @media only screen and (min-width: 993px) { #quizContent { width: calc(100% - 120px) !important; } } @media only screen and (min-width: 601px) and (max-width: 992px) { #quizContent { width: calc(100% - 120px) !important; } }