@font-face {
font-family: 'Graphik-Medium';
src: url('https://cdn.lvlex.link/fonts/Graphik-Medium-Trial.otf') format('opentype'), url('/fonts/Graphik-Medium-Trial.otf') format('opentype');
}
@font-face {
font-family: 'Graphik-Regular';
src: url('https://cdn.lvlex.link/fonts/Graphik-Regular-Trial.otf') format('opentype'), url('/fonts/Graphik-Regular-Trial.otf') format('opentype');
}
@font-face {
font-family: 'Rogan Bold';
src: url('https://cdn.snke.link/fonts/rogan-bold.woff2') format('woff2'), url('/fonts/rogan-bold.woff2') format('woff2');
}
@font-face {
font-family: 'Apis-Regular';
font-weight: 600;
font-style: normal;
src: url('https://cdn.lvlex.link/fonts/Apis-Regular.ttf') format('truetype'), url('/fonts/Apis-Regular.ttf') format('truetype');
}
@font-face {
font-family: 'Apis-Medium';
src: url('https://cdn.lvlex.link/fonts/Apis-Medium.ttf') format('truetype'), url('/fonts/Apis-Medium.ttf') format('truetype');
}
@font-face {
font-family: 'Apis-Bold';
src: url('https://cdn.lvlex.link/fonts/Apis-Bold.ttf') format('truetype'), url('/fonts/Apis-Bold.ttf') format('truetype');
}
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: url('https://cdn.snke.link/fonts/open-sans-v29-latin-regular.woff2') format('woff2'), url('/fonts/open-sans-v29-latin-regular.woff2') format('woff2');
}
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 600;
src: url('https://cdn.snke.link/fonts/open-sans-v29-latin-600.woff2') format('woff2'), url('/fonts/open-sans-v29-latin-600.woff2') format('woff2');
}
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
src: url('https://cdn.snke.link/fonts/open-sans-v29-latin-700.woff2') format('woff2'), url('/fonts/open-sans-v29-latin-700.woff2') format('woff2');
}
:root {
--eerie-black: rgba(27,27,27,1.0);
--river-bed: rgba(66,75,90,1.0);
--sonic-silver: rgba(118,118,118,1.0);
--white: rgba(255,255,255,1.0);
/* Dark theme defaults for all public links external pages */
--theme-bg-color: #2c2c2c;
--theme-text-color: white;
--theme-border-color: #666;
--theme-timer-color: #91b6f7;
--theme-link-color: deepskyblue;
--theme-table-title-background: #cc0;
--theme-table-title-text: black;
--theme-loading-text: #B8F86D;
--theme-loading-bg: #242B35;
--theme-loading-info-text: rgb(220, 229, 224);
--theme-table-alternate-rows: #08080808;
--theme-primary-title-color: #A6FF41;
--theme-secondary-title-color: #8BF5ED;
--isi-background: #D8DFE4;
/* NPI ISI colors */
--npi-label-borders: #C7A1F9;
--npi-gradient-light: #AB72F8;
--npi-primary: #812CF4;
--npi-filter: #7C49C6;
--npi-dropshadow: #E0CBFC;
--npi-component-select-gradient1: #352350;
--npi-component-select-gradient2: #654889;
--npi-component-select-hover: rgba(141, 52, 244, 0.3);
}
body {
background-image: url('data:image/svg+xml;utf8,');
background-size: cover;
background-position: center;
background-attachment: fixed;
width: 100%;
height: 100%;
}
html {
height: 100%;
}
.border-class-1 {
border-color: rgba(255,255,255,0);
border-style: solid;
border-width: 1px;
}
.font-class-4 {
color: var(--black);
font-family: 'Rift', Helvetica, Arial, serif;
font-size: 32.0px;
font-style: normal;
font-weight: 700;
letter-spacing: -0.64px;
line-height: 40.0px;
}
.no-select {
user-select: none;
}
.center-text {
text-align: center;
}
.left-td, .left-th {
border: 1px solid var(--theme-border-color);
text-align: left;
padding: 1px 4px 1px 4px;
}
tr:nth-child(even) {
background-color: var(--theme-table-alternate-rows);
}
.cent-td {
border: 1px solid var(--theme-border-color);
text-align: center;
padding: 1px 4px 1px 4px;
}
.cent-th {
border: 1px solid var(--theme-border-color);
text-align: center;
padding: 4px 12px 4px 12px;
}
a {
color: var(--theme-link-color);
}
a:hover {
text-decoration: underline;
}
.in-app {
display: none;
}
.session_startButton {
width: 300px;
height: 80px;
margin: 20px 0px 20px 0;
font-size: 30px;
font-weight: 700;
text-transform: uppercase;
left: 50%;
transform: translate(-50%);
position: relative;
}
.infoPage {
text-align: center;
font-size: 16px;
}
.passcodeLogo {
position: absolute;
left: 50%;
transform: translate(-50%, 15px);
}
.passcodeField {
font-size: 60px;
margin: 41px 10px 40px 0;
resize: none;
border-width: 3px;
padding: 10px 10px 0 40px;
}
#infopageHeading {
color: var(--theme-text-color);
font-family: 'Open Sans';
font-size: 30px;
font-style: italic;
font-weight: 200;
margin: 15px;
}
.infoNoPageHeading {
margin: 7px;
}
.infoStartText {
margin: 20px;
font-weight: 600;
}
.leaderboardLayoutLandscape .leaderboardPage {
font-size: 20px;
}
.leaderboardLayoutPortrait .leaderboardPage {
font-size: 20px;
}
.leaderboardLayoutLandscape .infoleaderboardStartText {
margin: 50px 8px 20px 8px;
font-weight: 600;
}
.leaderboardLayoutPortrait .infoleaderboardStartText {
margin: 8px 8px 20px 8px;
font-weight: 600;
}
.leaderboardLayoutLandscape .infoUrl {
font-size: 30px;
margin-block-start: 0;
margin-block-end: 0;
margin: 6px 10px 20px 10px;
font-weight: 600;
}
.leaderboardLayoutPortrait .infoUrl {
font-size: 19px;
margin-block-start: 0;
margin-block-end: 0;
margin: 10px 10px 0 10px;
font-weight: 600;
}
.infoQrCode {
width: 240px;
display: block;
margin: auto;
padding: 12px;
background-color: white;
}
.infoAltText {
margin: 20px 20px 10px 20px;
font-weight: 600;
}
.infoButton {
width: 260px;
height: 30px;
}
.stopLink {
font-size: 14px;
margin: 5px 0 24px 0;
}
.startLink {
font-size: 14px;
margin: 5px 0 24px 0;
}
.regenerateLink {
font-size: 14px;
margin: 5px 0 24px 0;
}
.linkInfo {
font-size: 12px;
font-family: Open Sans;
border-collapse: collapse;
background-color: #0f0f0f0f;
table-layout: fixed;
width: 550px;
margin: 0 auto 34px auto;
box-shadow: 2px 2px 8px 2px rgb(0 0 0 / 20%);
}
.linkInfo .li-header {
background-color: var(--theme-table-title-background);
color: var(--theme-table-title-text);
}
.linkInfo .li-th {
border: 1px solid var(--theme-border-color);
text-align: center;
padding: 4px 12px 4px 12px;
}
.linkInfo .li-td {
border: 1px solid var(--theme-border-color);
text-align: center;
padding: 1px 4px 1px 4px;
}
.linkInfo .li-tr {
display: none;
}
.pageHeading {
color: var(--theme-text-color);
font-family: 'Rift', Helvetica, Arial, serif;
font-size: 48.0px;
font-style: normal;
font-weight: 700;
letter-spacing: -0.96px;
line-height: 56.0px;
margin: 0;
text-align: center;
}
.alert-dialog-component {
padding: 40px 0;
user-select: none;
}
.alert-dialog-component .alert-dialog-component-title {
color: var(--theme-primary-title-color);
font-family: 'Rogan', Helvetica, Arial, serif;
font-size: 48.0px;
font-style: normal;
font-weight: 700;
letter-spacing: -0.96px;
line-height: 56.0px;
margin: 20px 0;
text-align: center;
text-transform: uppercase;
}
.alert-dialog-component .alert-dialog-component-message-line {
font-size: 18px;
font-family: 'Open Sans', Helvetica, Arial, serif;
margin: 0;
padding: 6px 0;
text-align: center;
}
.alert-dialog-component .alert-dialog-component-button {
font-size: 20px;
font-family: 'Rogan', Helvetica, Arial, serif;
background: var(--theme-secondary-title-color);
margin: 30px 0 20px 0;
border: none;
padding: 4px 8px;
min-width: 150px;
text-transform: uppercase;
font-weight: 700;
}
.alert-dialog-component .alert-dialog-component-more-info {
font-size: 14px;
font-family: 'Open Sans', Helvetica, Arial, serif;
}
.alert-dialog-component .alert-dialog-component-extra-table {
margin: 30px auto;
border-collapse: collapse;
}
.alert-dialog-component .alert-dialog-component-extra-table th {
background: var(--theme-secondary-title-color);
color: black;
}
.alert-dialog-component .alert-dialog-component-extra-table tr:nth-child(even) {
background: rgba(255,255,255,0.1);
}
.alert-dialog-component .alert-dialog-component-extra-table tr td {
text-align: left;
padding: 2px 5px;
border: 1px solid var(--theme-border-color);
min-width: 180px;
}
.alert-dialog-component .alert-dialog-component-extra-table tr td:nth-child(1) {
font-weight: bold;
}
.countDown {
text-align: center;
min-height: 1em;
font-family: 'Open Sans';
font-size: 16px;
font-weight: 500;
color: var(--theme-loading-info-text);
}
#maxCapacity {
text-align: center;
font-weight: 600;
opacity: 1;
transition: opacity 1s;
}
.iframe-loading {
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
border: none;
}
.iframe-overlay {
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: transparent;
display: flex;
justify-content: center;
align-items: flex-end;
pointer-events: none;
}
.iframe-loadingText {
position: absolute;
width: 65%;
text-align: center;
font-size: 20px;
color: white;
font-family: 'Open Sans';
background: rgba(0, 0, 0, 0.3);
padding: 5px 0;
}
.loading-animation {
display: block;
position: relative;
left: 50%;
transform: translate(-50%);
margin: 19px 0;
animation: loader-fadein 1s;
height: 276px;
}
.loading-header {
color: var(--white);
text-align: center;
font-family: 'Open Sans';
font-size: 24px;
font-weight: 500;
}
.loading-title {
color: var(--theme-loading-text);
text-align: center;
font-family: 'Rogan';
font-size: 48px;
font-weight: 700;
}
.leaderboard-page-table {
width: 90vw !important;
font-size: 12px;
margin: auto;
font-size: 20px;
font-family: Open Sans;
border-collapse: collapse;
background-color: #0f0f0f0f;
table-layout: fixed;
}
.rankColumn {
width: 10vw !important;
}
.nameColumn {
width: 54vw !important;
}
.scoreColumn {
width: 26vw !important;
}
.leaderboard-page-heading {
background-color: var(--theme-table-title-background);
color: var(--theme-table-title-text);
}
.rank {
border: 1px solid #ddd;
text-align: center;
padding: 4px 12px 4px 12px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.lbInfo {
padding-left: 4px;
}
.qrInfo {
padding: 10px;
}
.leaderboardGrid .anima-screen {
background: var(--theme-loading-bg);
}
.page_grid.anima-screen {
background: var(--theme-loading-bg);
}
@keyframes loader-fadein {
0% {
opacity: 0;
}
80% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#requiredVideoContainer {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
justify-content: center;
background-color: #171717;
}
#requiredVideoContainer #requiredVideo {
max-width: 98%;
max-height: 98%;
object-fit: contain;
top: 1%;
position: relative;
}
.elementWiggle:hover {
transform: translate(-1px, -1px);
}
.elementWiggle:active {
transform: translate(1px, 1px);
transition: transform 34ms;
}
/******************** VTG Marketing registration ********************/
.registration-vtg-marketing {
background-image: url('/images/registration/VTG%20Marketing/Background%20Overlay.png');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: cover;
height: 100%;
width: 100%;
position: absolute;
color: white;
}
.registration-vtg-marketing .heading {
font-family: 'Rift', Helvetica, Arial, serif;
font-size: 48.0px;
font-style: normal;
font-weight: 700;
letter-spacing: -0.96px;
line-height: 56.0px;
margin: 0;
text-align: center;
}
.registration-vtg-marketing .registration-container {
position: relative;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.registration-vtg-marketing .info-text {
text-align: center;
padding: 20px 0 30px 0;
}
.registration-vtg-marketing .button-control {
text-align: center;
padding-top: 10px;
}
.registration-vtg-marketing .button-container {
display: inline-block;
position: relative;
}
.registration-vtg-marketing .button-image {
background-image: url(/images/registration/VTG%20Marketing/Primary%20Button.png);
width: 130px;
height: 36px;
}
.registration-vtg-marketing #reg-submit {
color: #666;
border-color: transparent;
background-color: transparent;
position: relative;
top: 5px;
font-size: 18px;
font-weight: 600;
}
.registration-vtg-marketing label {
padding: 0 6px 6px 0;
min-width: 100px;
display: inline-block;
text-align: right;
}
.registration-vtg-marketing .text-control {
padding-bottom: 30px;
margin: auto;
width: fit-content;
}
.registration-vtg-marketing .text-container {
display: inline-block;
position: relative;
margin-right: 32px;
}
.registration-vtg-marketing .text-image {
background-image: url(/images/registration/VTG%20Marketing/Text%20Entry%20Box.png);
width: 349px;
height: 37px;
position: absolute;
top: -8px;
left: -3px;
}
.registration-vtg-marketing .reg-input {
position: relative;
top: -2px;
left: 6px;
width: 306px;
height: 23px;
border-color: transparent;
background-color: transparent;
border-radius: 52px;
padding: 0 12px 0 8px;
}
.registration-vtg-marketing input:focus {
outline: none !important;
border-color: transparent;
box-shadow: 0 0 10px #777;
}
.registration-vtg-marketing #invalidEmail {
position: relative;
top: -28px;
left: -30px;
color: yellow;
opacity: 0;
transition: opacity 0.2s ease-in-out 0.2s;
margin: auto;
width: fit-content;
}
.registration-vtg-marketing input:-webkit-autofill,
.registration-vtg-marketing input:-webkit-autofill:hover,
.registration-vtg-marketing input:-webkit-autofill:focus,
.registration-vtg-marketing textarea:-webkit-autofill,
.registration-vtg-marketing textarea:-webkit-autofill:hover,
.registration-vtg-marketing textarea:-webkit-autofill:focus,
.registration-vtg-marketing select:-webkit-autofill,
.registration-vtg-marketing select:-webkit-autofill:hover,
.registration-vtg-marketing select:-webkit-autofill:focus {
-webkit-text-fill-color: white;
transition: background-color 50000s ease-in-out 0s;
}
@media screen and (max-width: 500px) {
.registration-vtg-marketing label {
padding: 0 6px 8px 0;
display: block;
text-align: center;
}
.registration-vtg-marketing #invalidEmail {
top: -25px;
left: 0px;
}
}
@media screen and (max-height: 432px) {
.registration-vtg-marketing .info-text {
padding: 0 0 8px 0;
}
.registration-vtg-marketing .text-control {
padding-bottom: 18px;
}
.registration-vtg-marketing .button-control {
padding-top: 0px;
}
.registration-vtg-marketing #invalidEmail {
top: -13px;
left: -30px;
}
}
.thickLine {
margin: 0 auto;
width: 400px;
height: 10px;
background: #0D1632;
padding-top: 12px;
}
/******************** Gladskin leaderboard ********************/
.leaderboardGladskin {
display: flex;
justify-content: start; /* Use center to float in middle */
align-items: normal; /* Use center to float in middle */
height: 100%;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
margin: 0;
padding: 0;
background-color: #272727;
overflow: hidden;
}
.leaderboardGladskin .aspect-ratio-box {
max-width: 100%;
position: relative;
width: calc(100vh * 16 / 9);
}
.leaderboardGladskin .aspect-ratio-box:before {
content: "";
display: block;
padding-top: 56.25%; /* 9 / 16 * 100% */
width: 100%;
}
.leaderboardGladskin .aspect-ratio-box > * {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.leaderboardGladskin .innerContainer {
display: flex;
height: 100%;
}
.leaderboardGladskin .left-container {
position: relative;
}
.leaderboardGladskin .gladskinVideo {
height: 100%;
position: relative;
transition: opacity 1s ease-in-out;
opacity: 100%;
box-sizing: border-box;
}
.leaderboardGladskin .gladskiniFrame {
border-color: #ccc;
transition: opacity 1s ease-in-out;
opacity: 0;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
box-sizing: border-box;
}
.leaderboardGladskin .gladskinOverlay {
position: absolute;
top: 10px;
text-align: center;
width: 100%;
font-size: 26px;
margin-top: 2px;
color: red;
font-weight: 700;
text-shadow: 1px 1px 14px #fff, 1px 1px 10px #ccc;
transition: opacity ease-out 1s 5s;
opacity: 100%;
}
.leaderboardGladskin .right-container {
display: flex;
flex: 1;
flex-direction: column;
}
.leaderboardGladskin .bottom-panel {
flex-grow: 3;
display: flex;
flex-direction: row;
}
.leaderboardGladskin .logo {
flex: 0 0 60%;
display: flex;
justify-content: center;
align-items: center;
background-color: #232B35;
}
.leaderboardGladskin .logo img {
width: 60%;
}
.leaderboardGladskin .leaderboard {
background-color: #455568;
flex-grow: 7;
text-align: left;
}
.leaderboardGladskin .qr-code {
flex: 0 0 40%;
flex-direction: column;
background-color: #232B35;
display: flex;
justify-content: center;
align-items: center;
color: white;
font-family: 'Open Sans';
text-align: center;
margin-block-end: 0;
}
.leaderboardGladskin .qr-code img {
height: 20vh;
width: 20vh;
margin-top: 3vh;
border: white 0.9vh solid;
}
.leaderboardGladskin .qr-code p {
font-size: 2.5vh;
margin-block-start: 0.5em;
margin-block-end: 0.5em;
}
.leaderboardGladskin .leaderboard h2 {
font-family: 'Rogan Bold';
font-size: 4vh;
color: #B8F86D;
margin-left: 2%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
max-width: 50vw;
}
.leaderboardGladskin .leaderboard table {
font-family: 'Open Sans';
font-weight: 400;
font-size: 3vh;
border-collapse: collapse;
width: 90%;
overflow: hidden;
white-space: nowrap;
margin: 0 5%;
table-layout: fixed;
}
.leaderboardGladskin .leaderboard .layer0 tr:nth-child(even) {
background-color: #fff1;
}
.leaderboardGladskin .layer0 {
position: absolute;
}
.leaderboardGladskin .leaderboard th {
color: #ABEFE4;
padding: 0 6px;
font-weight: 400;
}
.leaderboardGladskin .leaderboard td {
color: #E1E3E0;
font-weight: 400;
}
.leaderboardGladskin .leaderboard .name {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.leaderboardGladskin .leaderboard .td-cent {
text-align: center;
font-weight: 400;
}
/******************** Shockwave leaderboard ********************/
.leaderboardShockwave {
display: flex;
justify-content: start; /* Use center to float in middle */
align-items: normal; /* Use center to float in middle */
height: 100%;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
margin: 0;
padding: 0;
background-color: #272727;
overflow: hidden;
}
.leaderboardShockwave .aspect-ratio-box {
max-width: 100%;
position: relative;
width: calc(100vh * 16 / 9);
}
.leaderboardShockwave .aspect-ratio-box:before {
content: "";
display: block;
padding-top: 56.25%; /* 9 / 16 * 100% */
width: 100%;
}
.leaderboardShockwave .aspect-ratio-box > * {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.leaderboardShockwave .innerContainer {
display: flex;
height: 100%;
}
.leaderboardShockwave .left-container {
position: relative;
}
.leaderboardShockwave .gladskinVideo {
height: 100%;
position: relative;
transition: opacity 1s ease-in-out;
opacity: 100%;
box-sizing: border-box;
}
.leaderboardShockwave .gladskiniFrame {
border-color: #ccc;
transition: opacity 1s ease-in-out;
opacity: 0;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
box-sizing: border-box;
}
.leaderboardShockwave .gladskinOverlay {
position: absolute;
top: 10px;
text-align: center;
width: 100%;
font-size: 26px;
margin-top: 2px;
color: red;
font-weight: 700;
text-shadow: 1px 1px 14px #fff, 1px 1px 10px #ccc;
transition: opacity ease-out 1s 5s;
opacity: 100%;
}
.leaderboardShockwave .right-container {
display: flex;
flex: 1;
flex-direction: column;
background-image: url('/images/leaderboards/Shockwave/Shockwave_Background.png');
background-size: cover;
}
.leaderboardShockwave .bottom-panel {
flex-grow: 3;
display: flex;
flex-direction: row;
}
.leaderboardShockwave .logo {
flex: 0 0 60%;
display: flex;
justify-content: center;
align-items: center;
}
.leaderboardShockwave .logo img {
width: 60%;
}
.leaderboardShockwave .leaderboard {
flex-grow: 7;
text-align: left;
}
.leaderboardShockwave .qr-code {
flex: 0 0 40%;
flex-direction: column;
display: flex;
justify-content: center;
align-items: center;
color: white;
font-family: 'Open Sans';
text-align: center;
margin-block-end: 0;
}
.leaderboardShockwave .qr-code img {
height: 20vh;
width: 20vh;
margin-top: 3vh;
border: white 0.9vh solid;
}
.leaderboardShockwave .qr-code p {
font-size: 2.5vh;
margin-block-start: 0.5em;
margin-block-end: 0.5em;
}
.leaderboardShockwave .leaderboard h2 {
font-family: 'Rogan Bold';
font-size: 4vh;
color: white;
margin-left: 2%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
max-width: 50vw;
}
.leaderboardShockwave .leaderboard table {
font-family: 'Open Sans';
font-weight: 400;
font-size: 3vh;
border-collapse: collapse;
width: 90%;
overflow: hidden;
white-space: nowrap;
margin: 0 5%;
table-layout: fixed;
}
.leaderboardShockwave .leaderboard .layer0 tr:nth-child(even) {
background-color: #fff1;
}
.leaderboardShockwave .layer0 {
position: absolute;
}
.leaderboardShockwave .leaderboard th {
color: #ABEFE4;
padding: 0 6px;
font-weight: 400;
}
.leaderboardShockwave .leaderboard td {
color: #E1E3E0;
font-weight: 400;
}
.leaderboardShockwave .leaderboard .name {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.leaderboardShockwave .leaderboard .td-cent {
text-align: center;
font-weight: 400;
}
/******************** Gladskin 2 registration ********************/
/* Example 3 from https://www.htmllion.com/css3-toggle-switch-button.html */
.switch-yes-no {
position: relative;
display: block;
vertical-align: top;
width: 100px;
height: 30px;
box-shadow: inset 0 -1px white, inset 0 1px 1px rgba(0, 0, 0, 0.05);
cursor: pointer;
box-sizing: content-box;
padding: 0;
background: #FFF;
border-radius: 0;
background-image: none;
margin: auto;
}
.switch-yes-no .switch-input {
position: absolute;
top: 0;
left: 0;
opacity: 0;
box-sizing: content-box;
}
.switch-yes-no .switch-input:checked ~ .switch-label {
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 3px rgba(0, 0, 0, 0.2);
}
.switch-yes-no .switch-input:checked ~ .switch-label:before {
opacity: 0;
}
.switch-yes-no .switch-input:checked ~ .switch-label:after {
opacity: 1;
}
.switch-yes-no .switch-label {
position: relative;
display: block;
height: inherit;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
border-radius: inherit;
box-sizing: content-box;
}
.switch-yes-no .switch-label:before {
content: attr(data-off);
right: 11px;
color: #666;
text-shadow: 0 1px rgba(255, 255, 255, 0.5);
background: #eceeef;
backface-visibility: hidden;
}
.switch-yes-no .switch-label:after {
content: attr(data-on);
left: 11px;
text-shadow: 0 1px rgba(0, 0, 0, 0.2);
opacity: 0;
color: #FFFFFF;
background: #32CD32;
backface-visibility: hidden;
transform: rotateY(180deg);
}
.switch-yes-no .switch-label:after, .switch-yes-no .switch-label:before {
position: absolute;
margin-top: -6px;
line-height: 1;
transition: inherit;
box-sizing: content-box;
width: 100%;
height: 70%;
top: 5px;
left: 0;
text-align: center;
padding-top: 10%;
box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.2), inset 0 0 3px rgba(0, 0, 0, 0.1);
}
.switch-yes-no .switch-handle {
position: absolute;
top: 4px;
width: 28px;
height: 28px;
background: linear-gradient(to bottom, #FFFFFF 40%, #f0f0f0);
background-image: -webkit-linear-gradient(top, #FFFFFF 40%, #f0f0f0);
border-radius: 100%;
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
display: none;
}
.switch-yes-no .switch-handle:before {
content: "";
position: absolute;
left: 50%;
margin: -6px 0 0 -6px;
width: 12px;
height: 12px;
background: linear-gradient(to bottom, #eeeeee, #FFFFFF);
background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF);
border-radius: 6px;
box-shadow: inset 0 1px rgba(0, 0, 0, 0.02);
}
.switch-yes-no .switch-input:checked ~ .switch-handle {
left: 74px;
box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2);
}
.switch-yes-no .switch-input:checked ~ .switch-label {
background: #FFF;
border-color: #0088cc;
}
.switch-yes-no .switch-input:checked ~ .switch-label:before {
transform: rotateY(180deg)
}
.switch-yes-no .switch-input:checked ~ .switch-label:after {
transform: rotateY(0)
}
.switch-label, .switch-handle {
transition: All 0.3s ease;
}
.registration-gladskin2 {
background-image: url('/images/registration/VTG%20Marketing/Background%20Overlay.png');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: cover;
height: 100%;
width: 100%;
position: absolute;
color: white;
}
.registration-gladskin2 .heading1 {
font-family: 'Graphik-Medium', Helvetica, Arial, serif;
font-size: 29px;
font-style: normal;
font-weight: 700;
line-height: 29px;
margin: 0;
text-align: center;
padding-top: 17px;
transform: scale(1.2, 0.9);
}
.registration-gladskin2 .heading2 {
font-family: 'Graphik-Medium', Helvetica, Arial, serif;
font-size: 18px;
font-style: italic;
font-weight: 700;
margin: 0;
text-align: center;
color: #DBB6B6;
}
.registration-gladskin2 .heading3 {
font-family: 'Graphik-Medium', Helvetica, Arial, serif;
font-size: 49px;
font-style: normal;
font-weight: 700;
line-height: 49px;
margin: 0;
text-align: center;
transform: scale(1.1, 0.8);
}
.registration-gladskin2 .thickLine {
margin: 0 auto;
width: 292px;
height: 10px;
background: #0D1632;
padding-top: 12px;
}
.registration-gladskin2 form {
padding-top: 18px;
}
.registration-gladskin2 .registration-container {
position: relative;
left: 50%;
top: 20px;
transform: translate(-50%, 0%);
background: repeating-linear-gradient(to bottom, #0D1632 0px, #0D1632 162px, #474D5A 162px, #474D5A 1086px);
width: 360px;
height: 690px;
}
.registration-gladskin2 #optIn {
position: relative;
width: 30px;
height: 30px;
clip-path: circle(60%);
top: -3px;
margin-right: 8px;
cursor: pointer;
}
.registration-gladskin2 label {
min-width: 100px;
user-select: none;
}
.registration-gladskin2 .checkbox-label {
min-width: 100px;
user-select: none;
width: 284px;
display: inline-block;
}
.registration-gladskin2 .text-control {
font-family: 'Graphik-Regular', Helvetica, Arial, serif;
font-size: 18px;
font-style: normal;
font-weight: 600;
padding-bottom: 24px;
margin: auto;
width: fit-content;
}
.registration-gladskin2 .text-container {
position: relative;
top: 8px;
}
.registration-gladskin2 .reg-input {
border-color: transparent;
background-color: white;
height: 38px;
width: 300px;
border-radius: 8px;
color: #222;
font-size: 18px;
padding: 0 6px 0 6px;
font-weight: 600;
}
.registration-gladskin2 .back-arrow {
position: absolute;
top: 172px;
left: 10px;
cursor: pointer;
z-index: 1;
}
.registration-gladskin2 .wiggle-ul {
transform: translate(-1px, -1px);
}
.registration-gladskin2 .wiggle-dr {
transform: translate(1px, 1px);
}
.registration-gladskin2 .form-container {
overflow: hidden;
width: 360px;
height: 541px;
position: relative;
}
.registration-gladskin2 .form-page {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
transition: transform 0.5s ease-in-out;
display: flex;
flex-direction: column;
align-items: center;
}
.registration-gladskin2 .page1 {
transform: translateX(0);
}
.registration-gladskin2 .page2 {
transform: translateX(100%);
}
.registration-gladskin2 .hidden {
opacity: 0;
pointer-events: none;
transition: opacity 0.1s ease-in-out;
}
.registration-gladskin2 .visible {
opacity: 1;
pointer-events: auto;
transition: opacity 0.3s ease-in-out;
}
.registration-gladskin2 input:focus {
outline: none !important;
border-color: transparent;
box-shadow: 0 0 10px #777;
border-radius: 6px;
}
.registration-gladskin2 #invalidEmail {
position: relative;
top: -12px;
left: -80px;
color: yellow;
margin-bottom: 38px;
opacity: 0;
transition: opacity 0.2s ease-in-out 0.2s;
}
.registration-gladskin2 #invalidEmail.textVisible {
opacity: 1;
}
.registration-gladskin2 input:-webkit-autofill,
.registration-gladskin2 input:-webkit-autofill:hover,
.registration-gladskin2 input:-webkit-autofill:focus,
.registration-gladskin2 textarea:-webkit-autofill,
.registration-gladskin2 textarea:-webkit-autofill:hover,
.registration-gladskin2 textarea:-webkit-autofill:focus,
.registration-gladskin2 select:-webkit-autofill,
.registration-gladskin2 select:-webkit-autofill:hover,
.registration-gladskin2 select:-webkit-autofill:focus {
-webkit-text-fill-color: #555;
transition: background-color 50000s ease-in-out 0s;
font-weight: 600;
}
@media screen and (min-height: 736px) {
.registration-gladskin2 .registration-container {
top: 50%;
transform: translate(-50%, -50%);
}
}
.registration-gladskin2 .info-text {
text-align: center;
padding: 20px 0 30px 0;
}
.registration-gladskin2 #reg-submit {
border-color: transparent;
background-color: transparent;
font-size: 28px;
font-weight: 600;
text-shadow: 2px 2px #4444;
cursor: pointer;
width: 100%;
height: 100%;
}
.registration-gladskin2 #reg-submit:focus {
outline: none;
box-shadow: none;
}
.registration-gladskin2 #reg-submit:active {
transform: translate(2px, 2px);
transition: transform 34ms;
}
.registration-gladskin2 .top-gap-page1 {
height: 48px;
}
.registration-gladskin2 .top-gap-page2 {
margin-bottom: 58px;
}
.registration-gladskin2 .text-control {
font-family: 'Graphik-Regular', Helvetica, Arial, serif;
font-size: 18px;
font-style: normal;
font-weight: 400;
padding-bottom: 6px;
margin: 22px auto 15px auto;
width: fit-content;
}
.registration-gladskin2 .switch-text {
font-size: 15px;
margin-block-end: 8px;
margin-block-start: -30px;
user-select: none;
}
.registration-gladskin2 .button-control {
text-align: center;
margin-top: 15px;
}
.registration-gladskin2 .button-container {
display: inline-block;
position: relative;
}
.registration-gladskin2 .button-image {
width: 294px;
height: 51px;
background-color: #498C68;
color: #A0C9B4;
border-radius: 26px;
border-bottom-style: none;
font-size: 28px;
font-weight: 700;
display: flex;
justify-content: center;
align-items: center;
user-select: none;
cursor: pointer;
filter: drop-shadow(0px 4px 2px #0008);
border-width: 1px 1px 0 1px;
}
.registration-gladskin2 .button-image:hover {
width: 296px;
height: 53px;
background-color: #3c9b61;
border-bottom-style: none;
}
.registration-gladskin2 .continue1 {
margin-top: 16px;
}
.registration-gladskin2 .continue2 {
margin-top: 35px;
}
/******************** Rybelsus registration ********************/
.registration-rybelsus {
display: grid;
height: 100%;
}
.registration-rybelsus .registration-container {
/* This is the resolution of the Unity app when running in a 360px wide window */
width: 360px;
height: 642px;
overflow-y: auto;
overflow-x: hidden;
background: linear-gradient(193.07deg, #43434D 2.31%, #1D1F26 97.31%);
user-select: none;
margin: 0 auto;
position: relative;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.9);
border-radius: 6px;
}
.registration-rybelsus .form-container {
display: flex;
transition: transform;
transition-duration: 0.3s;
transition-timing-function: ease-in-out;
}
.registration-rybelsus .header {
margin: auto;
width: 100%;
text-align: center;
margin-bottom: 12px;
}
.registration-rybelsus .help-icon {
position: relative;
left: 45px;
top: -35px;
cursor: pointer;
transition: transform 0.1s ease-in-out;
display: inline-block;
}
.registration-rybelsus .wiggle-ul {
transform: translate(-1px, -1px);
}
.registration-rybelsus .wiggle-dr {
transform: translate(1px, 1px);
}
.registration-rybelsus .ellipse {
position: absolute;
}
.registration-rybelsus .question-mark {
position: absolute;
top: 4px;
left: 7px;
}
.registration-rybelsus .help-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}
.registration-rybelsus .open {
opacity: 1;
visibility: visible;
}
.registration-rybelsus .help-modal .content {
background-color: #D1D7DB;
color: #2C2F38;
border-radius: 38px;
width: 325px;
padding: 14px;
}
.registration-rybelsus .help-modal .title {
font-size: 25px;
font-weight: 700;
margin-block-start: 10px;
margin-block-end: 0px;
}
.registration-rybelsus .help-modal .text {
font-size: 15px;
font-weight: 600;
padding-bottom: 20px
}
.registration-rybelsus .help-modal .text a {
color: blue;
}
.registration-rybelsus .center-text {
text-align: center;
display: inline-block;
margin: auto;
position: relative;
left: -16px;
}
.registration-rybelsus .info-text1 {
font-size: 20px;
color: #C5E2FD;
margin-block-start: 12px;
margin-block-end: -10px;
font-weight: 600;
}
.registration-rybelsus .info-text2 {
font-size: 16px;
color: #D8ECFE;
}
.registration-rybelsus .info-text3 {
font-size: 20px;
text-align: center;
color: white;
position: relative;
left: -79px;
margin-block-end: 12px;
margin-block-start: 0px;
}
.registration-rybelsus #invalidEmail {
font-size: 14px;
text-align: center;
color: white;
position: relative;
left: -93px;
margin-block-end: 0px;
margin-block-start: 0px;
color: yellow;
top: 3px;
opacity: 0;
transition: opacity 0.3s ease-in 0.2s;
}
.registration-rybelsus .opt-in-container {
display: flex;
justify-content: space-between;
align-items: center;
padding: 2px 6px 6px 6px;
color: white;
width: 339px;
}
.registration-rybelsus .opt-in-control {
position: relative;
left: 36px;
}
.registration-rybelsus .opt-in-control input {
width: 24px;
height: 24px;
clip-path: circle(60%);
cursor: pointer;
}
.registration-rybelsus .checkbox-label {
position: relative;
top: -7px;
}
.registration-rybelsus .info-text4 {
font-size: 14px;
text-align: left;
color: white;
width: 252px;
padding: 0 30px 0 3px;
}
.registration-rybelsus .info-text5 {
font-size: 14px;
text-align: center;
color: white;
width: 345px;
}
.registration-rybelsus .info-text6 {
font-size: 20px;
text-align: center;
color: white;
position: relative;
left: -75px;
margin-block-end: 12px;
margin-block-start: 0px;
margin-top: 32px;
}
.registration-rybelsus .info-text7 {
font-size: 16px;
text-align: center;
color: white;
margin-top: 150px;
width: 330px;
}
.registration-rybelsus .back-arrow {
position: relative;
top: -6px;
left: -78px;
cursor: pointer;
display: inline-block;
}
.registration-rybelsus .hidden {
opacity: 0;
pointer-events: none;
transition: opacity 0.1s ease-in-out;
}
.registration-rybelsus .visible {
opacity: 1;
pointer-events: auto;
transition: opacity 0.3s ease-in-out;
}
.registration-rybelsus .input-field {
user-select: none;
width: 338px;
height: 48px;
margin: 0 auto 0 auto;
position: relative;
background: #2C2F38;
box-shadow: inset 0px 4px 16px #1D1F26;
border-radius: 8px;
}
.registration-rybelsus .input-field label {
color: var(--npi-label-borders);
position: relative;
left: 14px;
top: -47px;
font-size: 16px;
transition: 0.2s ease all;
}
.registration-rybelsus .input-field input {
border-color: transparent;
cursor: text;
width: 338px;
font-family: 'Open Sans', Helvetica, Arial, serif;
font-size: 18px;
font-weight: 600;
position: relative;
left: -5px;
top: -3px;
}
.registration-rybelsus .input-field input:focus {
outline: solid var(--npi-label-borders);
border-radius: 2px;
}
.registration-rybelsus .input-field input:focus ~ label,
.registration-rybelsus .input-field input:valid ~ label {
position: relative;
left: 5px;
top: -62px;
font-size: 11px;
}
.registration-rybelsus .gap {
margin-bottom: 30px;
}
.registration-rybelsus .button-control {
text-align: center;
margin-top: 6px;
cursor: pointer;
user-select: none;
}
.registration-rybelsus .button-control input:focus,
.registration-rybelsus .button-control input:valid {
outline: none !important;
}
.registration-rybelsus .continue2 {
margin-top: 65px;
}
.registration-rybelsus .button-container {
display: inline-block;
position: relative;
}
.registration-rybelsus .grey {
background: linear-gradient(180deg, #43434D 0%, #4C4C52 0.01%, #2C2F38 100%);
box-shadow: 0px 6px 16px rgba(0, 0, 0, 0.4), inset 0px 1px 0px #D1D7DB, inset 0px 4px 8px rgba(255, 255, 255, 0.05), inset 0px -6px 15px #2A2A2E;
}
.registration-rybelsus .purple {
background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, var(--npi-gradient-light) 0.01%, var(--npi-primary) 100%);
box-shadow: inset 0px 1px 0px var(--npi-dropshadow), inset 0px 4px 8px rgba(255, 255, 255, 0.05), inset 0px -6px 15px var(--npi-primary);
filter: drop-shadow(0px 6px 16px rgba(0, 0, 0, 0.4)) drop-shadow(0px -10px 16px rgba(var(--npi-gradient-light), 0.5));
}
.registration-rybelsus .purple-nf {
background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, var(--npi-gradient-light) 0.01%, var(--npi-primary) 100%);
box-shadow: inset 0px 1px 0px var(--npi-dropshadow), inset 0px 4px 8px rgba(255, 255, 255, 0.05), inset 0px -6px 15px var(--npi-primary);
}
.registration-rybelsus .button-image {
width: 328px;
height: 60px;
border-radius: 26px;
margin-bottom: 6px;
display: flex;
justify-content: center;
align-items: center;
color: white;
font-size: 24px;
font-weight: 500;
transition: background, box-shadow, 0.2s ease;
}
.registration-rybelsus #reg-submit {
border-color: transparent;
background-color: transparent;
position: relative;
top: 2px;
font-size: 24px;
font-weight: 500;
width: 100%;
height: 100%;
}
.registration-rybelsus .form-page {
width: 100vw;
display: flex;
flex-direction: column;
align-items: center;
margin-right: 19px;
}
.registration-rybelsus .form-page input[type='text'] {
margin: 2px 10px 8px 5px;
height: 28px;
padding: 12px 8px 6px 8px;
font-size: 16px;
color: white;
border-radius: 8px;
width: 318px;
}
.registration-rybelsus .form-page input[type='checkbox'] {
margin: 10px;
padding: 8px;
font-size: 16px;
color: white;
border-radius: 8px;
}
.registration-rybelsus .form-page button {
margin: 10px;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}
.registration-rybelsus .continue2 input:disabled {
color: #999;
}
.registration-rybelsus .grey-text {
color: #999;
}
.registration-rybelsus .white-text {
color: white;
}
.registration-rybelsus input:-webkit-autofill,
.registration-rybelsus input:-webkit-autofill:hover,
.registration-rybelsus input:-webkit-autofill:focus,
.registration-rybelsus textarea:-webkit-autofill,
.registration-rybelsus textarea:-webkit-autofill:hover,
.registration-rybelsus textarea:-webkit-autofill:focus,
.registration-rybelsus select:-webkit-autofill,
.registration-rybelsus select:-webkit-autofill:hover,
.registration-rybelsus select:-webkit-autofill:focus {
-webkit-text-fill-color: white;
transition: background-color 50000s ease-in-out 0s;
}
/* Fix rotated help on short screens, and name entry */
@media screen and (max-height: 500px) {
.registration-rybelsus .button-image {
margin-bottom: 0px;
}
.registration-rybelsus .help-modal .content {
width: 680px;
}
.registration-rybelsus .help-modal .text {
font-size: 12px;
padding-bottom: 0px;
}
.registration-rybelsus .info-text6 {
margin-top: 0px;
}
.registration-rybelsus .gps {
margin-bottom: 15px;
}
.registration-rybelsus .continue2 {
margin-top: 27px;
}
.registration-rybelsus .help-modal .title {
font-size: 20px;
}
.registration-rybelsus .button-image {
height: 38px;
font-size: 18px;
}
}
@media screen and (max-height: 688px) {
.registration-rybelsus .info-text7 {
margin-top: 20px;
}
}
/******************** Rybelsus ISI ********************/
.isi-rybelsus {
display: grid;
height: 100%;
}
.isi-rybelsus .container {
/* This is the resolution of the Unity app when running in a 360px wide window */
width: 360px;
height: 642px;
overflow-y: auto;
overflow-x: hidden;
background: linear-gradient(193.07deg, #43434D 2.31%, #1D1F26 97.31%);
user-select: none;
margin: 0 auto;
position: relative;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.9);
border-radius: 6px;
}
.isi-rybelsus .content {
width: 100%;
height: 100%;
background-color: lightgray;
margin: 0 auto;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
font-weight: 600;
display: flex;
flex-direction: column;
overflow: hidden;
}
.isi-rybelsus ul {
padding-inline-start: 16px;
}
.isi-rybelsus li {
margin-bottom: 12px;
}
.isi-rybelsus .title1 {
font-family: 'Apis-Bold';
color: #FF8200;
}
.isi-rybelsus .title2 {
font-family: 'Apis-Medium';
font-size: 120%;
font-weight: 500;
color: #FF8200;
}
.isi-rybelsus .bold {
font-family: 'Apis-Bold';
}
.isi-rybelsus .registered::after {
content: '\00AE';
vertical-align: super;
font-size: 9px;
}
.isi-rybelsus .box {
border: 3px solid #001965;
padding: 10px 10px 0px 10px;
color: #001965;
font-family: 'Apis-Bold';
}
.isi-rybelsus .heading {
background-color: #E3E5E9;
color: black;
padding-top: 2px;
text-align: center;
font-family: 'Apis-Bold';
line-height: 1.1;
height: 38px;
position: absolute;
width: 100%;
}
.isi-rybelsus .isi {
background-color: var(--isi-background);
color: #001965;
font-family: 'Apis-Regular';
font-weight: 600;
padding: 10px;
overflow-y: scroll;
flex-grow: 1;
margin-top: 40px;
margin-bottom: 76px;
-webkit-overflow-scrolling: touch;
}
.isi-rybelsus .continue {
background-color: #CAD4DB;
padding: 10px 0;
position: absolute;
bottom: 0;
width: 100%;
height: 56px;
user-select: none;
}
.isi-rybelsus .scroll-shadows {
max-height: calc(100vh - 116px);
background: linear-gradient( var(--isi-background) 30%, var(--isi-background) 0% ) center top, linear-gradient( var(--isi-background) 0%, var(--isi-background) 70% ) center bottom, radial-gradient( farthest-side at 50% 0, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0) ) center top, radial-gradient( farthest-side at 50% 100%, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0) ) center bottom;
background-repeat: no-repeat;
background-size: 100% 30px, 100% 30px, 100% 30px, 100% 30px;
background-attachment: local, local, scroll, scroll;
background-color: var(--isi-background);
}
.isi-rybelsus .no-shadows {
background: var(--isi-background);
}
.isi-rybelsus .button-container {
text-align: center;
cursor: pointer;
user-select: none;
display: flex;
justify-content: center;
align-items: center;
}
.isi-rybelsus .button-container span {
position: relative;
top: 9px;
font-size: 24px;
font-weight: 500;
}
.isi-rybelsus .button-inner {
position: relative;
width: 328px;
height: 60px;
border-radius: 26px;
color: grey;
font-size: 24px;
font-weight: 500;
font-family: 'Apis-Medium';
background: linear-gradient(180deg, #43434D 0%, #4C4C52 0.01%, #2C2F38 100%);
box-shadow: 0px 6px 16px rgba(0, 0, 0, 0.4), inset 0px 1px 0px #D1D7DB, inset 0px 4px 8px rgba(255, 255, 255, 0.05), inset 0px -6px 15px #2A2A2E;
line-height: 38px;
}
.isi-rybelsus .button-inner:hover {
transform: translate(-1px, -1px);
}
.isi-rybelsus .button-inner:active {
transform: translate(1px, 1px);
transition: transform 34ms;
}
.isi-rybelsus .button-inner::before {
width: 328px;
height: 60px;
border-radius: 26px;
content: 'CONTINUE';
position: absolute;
color: white;
top: 0;
left: 0;
background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, var(--npi-gradient-light) 0.01%, var(--npi-primary) 100%);
box-shadow: inset 0px 1px 0px var(--npi-dropshadow), inset 0px 4px 8px rgba(255, 255, 255, 0.05), inset 0px -6px 15px var(--npi-primary);
opacity: var(--before-opacity, 0);
transition: opacity 0.25s ease;
line-height: 54px;
z-index: 1;
}
.isi-rybelsus .disabled-div {
pointer-events: none;
}
.isi-rybelsus #scroll-message {
position: fixed;
bottom: 81px;
left: 0;
width: 100%;
padding: 10px;
text-align: center;
display: none;
animation: flash 1.5s infinite;
font-family: 'Apis-Medium';
font-size: 16px;
color: white;
text-shadow: 0 0 8px black;
}
@keyframes flash {
0%, 60% {
opacity: 1;
}
80%, 100% {
opacity: 0;
}
}
/* Fill the screen when width or height <750 */
@media screen and (max-width: 750px), (max-height: 750px) {
.isi-rybelsus .container {
left: 0;
top: 0;
transform: translate(0%, 0%);
width: 100%;
height: 100%;
background-color: var(--isi-background);
}
.isi-rybelsus .scroll-shadows {
max-height: calc(100vh - 72px);
}
.isi-rybelsus .scroll-shadows {
max-height: calc(100vh - 125px);
}
}
/******************** Test NPI registration ********************/
.registration-test-npi {
background-image: url('/images/registration/VTG%20Marketing/Background%20Overlay.png');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: cover;
height: 100%;
width: 100%;
position: absolute;
color: white;
}
.registration-test-npi .heading {
font-family: 'Rift', Helvetica, Arial, serif;
font-size: 48.0px;
font-style: normal;
font-weight: 700;
letter-spacing: -0.96px;
line-height: 56.0px;
text-align: center;
}
.registration-test-npi .registration-container {
position: relative;
left: 50%;
transform: translate(-50%);
}
.registration-test-npi .info-text {
text-align: center;
padding: 20px 0 30px 0;
}
.registration-test-npi .button-control {
text-align: center;
padding-top: 10px;
}
.registration-test-npi .button-container {
display: inline-block;
position: relative;
}
.registration-test-npi .button-image {
background-image: url(/images/registration/VTG%20Marketing/Primary%20Button.png);
width: 130px;
height: 36px;
}
.registration-test-npi #reg-submit {
color: white;
border-color: transparent;
background-color: transparent;
position: relative;
top: 5px;
font-size: 18px;
font-weight: 600;
}
.registration-test-npi label {
padding: 0 6px 6px 0;
min-width: 100px;
display: inline-block;
text-align: right;
}
.registration-test-npi .text-control {
padding-bottom: 30px;
margin: auto;
width: fit-content;
}
.registration-test-npi .text-container {
display: inline-block;
position: relative;
margin-right: 32px;
}
.registration-test-npi .text-image {
background-image: url(/images/registration/VTG%20Marketing/Text%20Entry%20Box.png);
width: 349px;
height: 37px;
position: absolute;
top: -8px;
left: -3px;
}
.registration-test-npi .reg-input {
position: relative;
top: 1px;
left: 16px;
width: 303px;
border-color: transparent;
background-color: transparent;
}
.registration-test-npi input:focus {
outline: none !important;
border-color: transparent;
box-shadow: 0 0 10px #777;
border-radius: 6px;
}
.registration-test-npi #invalidEmail {
position: relative;
top: -28px;
left: -30px;
color: yellow;
opacity: 0;
transition: opacity 0.2s ease-in-out 0.2s;
margin: auto;
width: fit-content;
}
.registration-test-npi #result {
margin: 35px 40px 35px 10px;
}
.registration-test-npi input:-webkit-autofill,
.registration-test-npi input:-webkit-autofill:hover,
.registration-test-npi input:-webkit-autofill:focus,
.registration-test-npi textarea:-webkit-autofill,
.registration-test-npi textarea:-webkit-autofill:hover,
.registration-test-npi textarea:-webkit-autofill:focus,
.registration-test-npi select:-webkit-autofill,
.registration-test-npi select:-webkit-autofill:hover,
.registration-test-npi select:-webkit-autofill:focus {
-webkit-text-fill-color: white;
transition: background-color 50000s ease-in-out 0s;
}
@media screen and (max-width: 500px) {
.registration-test-npi label {
padding: 0 6px 8px 0;
display: block;
text-align: center;
}
.registration-test-npi #invalidEmail {
top: -25px;
left: 0px;
}
}
@media screen and (max-height: 432px) {
.registration-test-npi .info-text {
padding: 0 0 8px 0;
}
.registration-test-npi .text-control {
padding-bottom: 18px;
}
.registration-test-npi .button-control {
padding-top: 0px;
}
.registration-test-npi #invalidEmail {
top: -13px;
left: -30px;
}
}
/******************** NPI registration ********************/
.registration-npi {
display: grid;
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow-x: hidden;
font-size: 16px;
font-family: 'Open Sans', Helvetica, Arial, serif;
color: white;
background-image: url('data:image/svg+xml;utf8,');
background-size: cover;
background-position: center;
background-attachment: fixed;
scroll-padding-top: 0 !important; /* helps fix iOS Safari auto scroll */
user-select: none;
}
/* all buttons get a wiggle */
.registration-npi input[type=button]:hover {
transform: translate(-1px, -1px);
}
.registration-npi input[type=button]:active {
transform: translate(1px, 1px);
}
.registration-npi .header {
position: relative;
z-index: 1;
margin: auto;
width: 100%;
text-align: center;
margin-bottom: 12px;
}
.registration-npi .header .center-text {
text-align: center;
display: inline-block;
margin: auto;
position: relative;
left: -16px;
top: 23px;
z-index: 1;
}
.registration-npi .header .header-text {
font-size: 19px;
color: #C5E2FD;
margin-block-start: 5px;
margin-block-end: -10px;
font-weight: 600;
}
.registration-npi .header .header-subtext {
font-size: 14px;
color: #D8ECFE;
margin-block-start: 6px;
}
.registration-npi .registration-container {
/* This is the resolution of the Unity app when running in a 360px wide window */
width: 360px;
height: 642px;
overflow: hidden;
user-select: none;
background: linear-gradient(193.07deg, #43434D 2.31%, #1D1F26 97.31%);
margin: 0 auto;
position: relative;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.9);
border-radius: 6px;
}
.registration-npi .form-container {
overflow: hidden;
transition: transform;
transition-duration: 0.3s;
transition-timing-function: ease-in-out;
}
.registration-npi #name-entry {
display: grid;
grid-template-rows: repeat(4, auto) 1fr;
}
.registration-npi .input-field {
user-select: none;
width: 312px;
height: 44px;
margin: 0 auto 32px auto;
position: relative;
background: #2C2F38;
box-shadow: inset 0px 4px 16px #1D1F26;
border-radius: 8px;
}
.registration-npi .input-field label {
color: var(--npi-label-borders);
position: absolute;
top: 12px;
left: 12px;
text-transform: uppercase;
font-weight: 400;
line-height: 21px;
font-size: 17px;
transition: 0.2s ease all;
}
.registration-npi gap {
margin-bottom: 34px;
}
.registration-npi .input-field input:focus {
outline: solid var(--npi-label-borders);
border-radius: 2px;
}
.registration-npi .input-field input:focus ~ label,
.registration-npi .input-field input:valid ~ label {
left: 8px;
top: 0px;
font-size: 11px;
}
.registration-npi .input-field input[type=text] {
height: 34px;
width: 303px;
border-radius: 8px;
color: white;
font-size: 19px !important;
border: none !important;
position: relative;
padding: 11px 0 0 9px;
background-color: transparent;
}
.registration-npi .length-error {
color: #F4E52C;
left: 9px;
font-size: 12px;
position: relative;
}
.registration-npi #page-1 .info-text {
text-align: center;
margin: 178px auto 0 auto;
font-size: 13px;
width: 272px;
height: fit-content;
}
.registration-npi #page-3 .info-text {
margin: 22px auto 0;
font-size: 18px;
width: 320px;
}
.registration-npi #page-4 .button-control-continue {
padding-top: 0;
}
.registration-npi .button-control-continue.select {
margin: 19px auto 30px auto;
}
.registration-npi .button-control-continue {
position: relative;
margin: 4px auto 0 auto;
width: 314px;
}
.registration-npi #page-3 .button-control-continue {
margin: 11px auto 0 auto;
}
.registration-npi .button-control-continue:hover {
transform: translate(-1px, -1px);
}
.registration-npi #name-entry .button-control-continue .npi-former-submit-button {
margin: 0 auto;
}
.registration-npi .npi-former-submit-button {
height: 58px;
width: 314px;
border-radius: 24px;
border-style: none;
font-style: normal;
font-weight: 500;
font-size: 16px;
text-align: center;
color: #FFFFFF;
background-color: inherit;
cursor: pointer;
}
.registration-npi input.tryagain {
font-size: 21px;
text-transform: uppercase;
}
.registration-npi .zip-auth-container {
display: flex;
flex-direction: column;
align-items: center;
margin: 15px auto;
}
.registration-npi .input-zip-code {
display: flex;
flex-direction: row;
width: 260px;
margin: 15px 0 auto;
padding-bottom: 15px;
}
.registration-npi .input-zip-code .container,
.registration-npi .input-npi-code .container {
/* designing the boxes */
flex: 1;
aspect-ratio: 1/1;
border-width: 4px;
border-color: #43434D;
background: #2C2F38;
box-shadow: inset 0px -1px 0px #43434D, inset 0px 4px 16px #1D1F26;
border-radius: 8px;
margin: 0 3px;
}
.registration-npi .zip-input-container {
position: absolute;
}
.registration-npi #zipInput {
background: transparent;
color: rgba(255, 255, 255, 0.8);
font-size: 40px;
letter-spacing: 30px;
border-width: 0;
margin: 0;
padding: 0;
box-sizing: border-box;
line-height: 44px;
height: 44px;
width: 290px;
font-family: 'Courier New', Courier, monospace;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
position: relative;
left: 10px;
top: 3px;
}
.registration-npi .zip-length-error,
.registration-npi #zip-mismatch {
font-size: 12px;
padding-left: 15px;
color: #FF383C;
top: 3px;
position: relative;
}
.registration-npi .question-text {
font-family: 'Open Sans';
font-size: 21px;
font-style: normal;
font-weight: 500;
position: relative;
text-align: center;
}
.registration-npi .question-text.name {
left: -77px;
margin-block-end: 16px;
margin-block-start: 31px;
}
.registration-npi .question-text.matching {
left: -77px;
margin-block-end: -26px;
margin-block-start: 19px;
z-index: 1;
}
.registration-npi .question-text.sorry {
left: -80px;
margin-block-end: 16px;
margin-block-start: 75px;
font-size: 28px
}
.registration-npi .question-text.tooMany {
left: 0px;
margin-block-end: 16px;
margin-block-start: 75px;
font-size: 28px;
}
.registration-npi .info-text-find-you,
.registration-npi .info-text-full-name {
font-size: 18px;
text-align: left;
width: 311px;
position: relative;
margin: 0 auto 0 auto;
top: -7px;
left: -5px;
}
.registration-npi .button-control.continue.sorry {
margin-top: 168px;
}
.registration-npi .button-control.continue.tooMany {
margin-top: 192px;
}
.registration-npi .question-text-auth {
font-size: 1.5rem;
text-align: center;
margin: auto 0;
}
.registration-npi .invalid-text {
position: relative;
padding-top: .5em;
padding-left: 1em;
font-size: 1.25rem;
}
.registration-npi .help-icon {
position: relative;
left: 40px;
top: -16px;
cursor: pointer;
transition: transform 0.1s ease-in-out;
display: inline-block;
}
.registration-npi .help-button-image {
width: 270px;
height: 48px;
}
.registration-npi .ellipse {
position: absolute;
}
.registration-npi .question-mark {
top: 4px;
left: 7px;
position: absolute;
}
.registration-npi .help-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}
.registration-npi .help-modal.open {
opacity: 1;
visibility: visible;
z-index: 5;
}
.registration-npi .help-modal .content {
width: 278px;
height: auto;
position: fixed;
top: 50%;
left: 50%;
transform: translate(100%, -50%);
transition: transform 0.5s ease;
background-color: #D1D7DB;
color: #2C2F38;
border-radius: 14px;
padding: 15px;
}
.registration-npi .help-modal .content.open {
transform: translate(-50%, -50%);
}
.registration-npi .help-modal .title {
font-size: 22px;
font-weight: 700;
margin-block-start: 0px;
margin-block-end: -7px;
}
.registration-npi .help-modal .text {
font-size: 14px;
font-weight: 600;
}
.registration-npi .help-modal .close {
font-size: 20px;
color: white;
padding-top: 8px;
font-weight: 600;
}
.registration-npi .help-modal .text a {
color: blue;
}
.registration-npi .help-modal .button-control {
text-align: center;
cursor: pointer;
user-select: none;
}
.registration-npi .purple-nf {
background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, var(--npi-gradient-light) 0.01%, var(--npi-primary) 100%);
box-shadow: inset 0px 1px 0px var(--npi-dropshadow), inset 0px 4px 8px rgba(255, 255, 255, 0.05), inset 0px -.6px 16px var(--npi-primary);
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.registration-npi .slideIn,
.registration-npi.slideIn {
transform: translateX(100%);
animation-name: slideIn;
animation-duration: 0.3s;
animation-fill-mode: forwards;
}
.registration-npi .slideOut,
.registration-npi-scemblix.slideOut {
transform: translateX(0%);
animation-name: slideOut;
animation-duration: 0.3s;
animation-fill-mode: forwards;
}
.registration-npi .reverseSlideIn {
transform: translateX(-100%);
animation-name: reverseSlideIn;
animation-duration: 0.3s;
animation-fill-mode: forwards;
}
.registration-npi .reverseSlideOut {
transform: translateX(0%);
animation-name: reverseSlideOut;
animation-duration: 0.3s;
animation-fill-mode: forwards;
}
.fadeIn {
opacity: 0;
animation-name: fadeIn;
animation-duration: .3s;
animation-fill-mode: forwards;
}
.fadeOut {
opacity: 1;
animation-name: fadeOut;
animation-duration: .3s;
animation-fill-mode: forwards;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
/* ease in from right, to center */
@keyframes slideIn {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(0%);
}
}
/* ease out from center, to left */
@keyframes slideOut {
0% {
transform: translateX(0%);
}
100% {
transform: translateX(-100%);
}
}
/* ease in from left, to center */
@keyframes reverseSlideIn {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(0%);
}
}
/* ease out from center, to right */
@keyframes reverseSlideOut {
0% {
transform: translateX(0%);
}
100% {
transform: translateX(100%);
}
}
.registration-npi .results-filter-border {
background: #43434D;
box-shadow: 0px 0px 13px 3px #131417;
border-radius: 0 0 18px 18px;
height: 243px;
width: 360px;
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%, 0);
}
.registration-npi select {
background: linear-gradient(180deg, #FFFFFF 0%, #C5C5CF 0.01%, #A5A5B1 100%);
box-shadow: 0px 6px 16px rgba(0, 0, 0, 0.4), inset 0px 1px 0px #D1D7DB, inset 0px 4px 8px rgba(255, 255, 255, 0.05), inset 0px -6px 16px #868690;
border-radius: 10px;
font-weight: 600;
}
.registration-npi select:focus,
.registration-npi input:focus {
outline: none;
}
.registration-npi .work-state {
color: var(--npi-filter);
font-size: 17px;
font-weight: 600;
position: relative;
bottom: -30px;
margin-left: 14px;
z-index: 2;
pointer-events: none;
}
.registration-npi .results-filter-by-state,
.registration-npi .results-filter-by-city {
position: absolute;
left: 50%;
transform: translate(-50%, 0);
z-index: 1;
}
.registration-npi .results-filter-by-city {
top: 180px;
}
.registration-npi label {
pointer-events: none;
}
.registration-npi .results-filter-by-state-menu {
border-radius: 8px;
cursor: pointer;
background: #BFBEC7;
height: 43px;
width: 309px;
font-size: 19px;
display: flex;
flex-direction: row;
padding: 27px 0 0 12px;
position: relative;
bottom: 17px;
color: #2B2F37;
margin: 0 auto;
z-index: 1;
font-weight: 700;
}
.registration-npi .results-filter-by-state-menu:active {
background: #9B9AA1;
}
.registration-npi .state-select-wrapper select {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background: white;
padding-right: 2em;
}
.registration-npi .state-select-wrapper::after {
content: '';
position: absolute;
right: 10px;
top: 13px;
width: 0;
height: 0;
border-left: 12px solid transparent;
border-right: 12px solid transparent;
border-top: 20px solid #2B2F37;
z-index: 1;
pointer-events: none;
}
.registration-npi .state-select-wrapper {
position: relative;
display: inline-block;
}
.registration-npi .results-filter-menu {
height: 71px;
width: 327px;
font-size: 21px;
display: flex;
flex-direction: row;
padding: 9px 0 0 12px;
position: relative;
bottom: 16px;
color: black;
margin: 0 auto;
z-index: 1;
}
.registration-npi .results-filter-params {
color: black;
font-size: 1.25rem;
font-weight: 500;
line-height: 1.5em;
}
.registration-npi .expand-arrow {
width: 0;
height: 0;
border-left: 1.25em solid transparent;
border-right: 1.25em solid transparent;
border-top: 1.25em solid #530AB6;
margin-left: auto;
margin-right: 5vw;
margin-top: .25em;
}
.registration-npi .results-wrapper {
display: flex;
flex-direction: column;
overflow-y: auto;
height: 300px;
width: 340px;
margin: 0 auto;
}
.registration-npi .top-results-spacer {
padding-top: 115px;
}
.registration-npi .end-results-spacer {
margin: 70px auto 0 auto;
}
.registration-npi .result {
display: flex;
flex-direction: row;
box-sizing: border-box !important;
background: linear-gradient(180deg, #FFFFFF 0%, #D1D7DB 0.01%, #A7B6C5 100%);
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.4);
border-radius: 8px;
width: 304px;
margin: 19px auto 0 auto;
}
.registration-npi .result.auth-select {
margin: 10px auto 0 auto;
}
.registration-npi .select-wrapper {
display: flex;
flex-direction: column;
align-items: center;
background: #0E0D16;
border-radius: 16px 16px 0em 0em;
height: 157px;
width: 360px;
position: absolute;
top: 484px;
left: 50%;
transform: translate(-50%, 0);
}
.registration-npi .result-not-listed {
background: #0E0D16;
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
font-size: 14px;
text-align: center;
color: #89BCED;
}
.registration-npi .bypass-npi {
font-family: 'Open Sans';
font-style: normal;
font-weight: 600;
color: #89BCED;
margin-top: 24px;
text-align: center;
font-size: 14px;
cursor: pointer;
}
.registration-npi .selected {
border: 3px solid var(--npi-primary);
}
.registration-npi .selected .result-state-container {
border-radius: 0em;
}
.registration-npi .selected .result-details-container {
color: var(--npi-primary);
}
.registration-npi .result-state-container {
width: 50px;
background: var(--npi-primary);
border-radius: 8px 0 0 8px;
font-size: 1.5rem;
font-weight: 600;
}
.registration-npi .result-details-container {
display: flex;
flex-direction: column;
text-align: left;
justify-content: center;
padding-left: 10px;
color: black;
position: relative;
transition: color linear 0.3s;
}
.registration-npi .state-text {
width: 50px;
position: relative;
text-align: center;
font-size: 21px;
margin: 50% auto;
}
.registration-npi .result-name {
position: relative;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
}
.registration-npi .result-address {
position: relative;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
}
.registration-npi .result-title {
position: relative;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
}
.registration-npi .no-results-error,
.registration-npi .too-many-results-error {
margin-bottom: 5em;
}
.registration-npi .too-many-please-filter,
.registration-npi .no-results-filter {
font-size: 18px;
text-align: left;
width: 311px;
position: relative;
margin: 0 auto 0 auto;
top: 30px;
left: -5px;
}
.registration-npi #zip-submit:disabled {
background: #43434D;
}
.registration-npi .back-arrow {
position: relative;
top: 15px;
left: -76px;
cursor: pointer;
display: inline-block;
z-index: 1;
}
/* Utility Classes */
/* removes element from dom */
.registration-npi .hidden, .registration-npi.hidden,
.registration-npi-scemblix.hidden {
display: none !important
}
/* makes visibility zero, but still exists in dom */
.registration-npi .hidden-invisible {
opacity: 0;
pointer-events: none;
}
.registration-npi .button-image {
display: grid;
height: 60px;
width: 330px;
margin: 0px auto 0 auto;
justify-items: center;
box-sizing: border-box;
border-radius: 26px;
}
.registration-npi .white-border {
background: linear-gradient(180deg, #43434D 0%, #4C4C52 0.01%, #2C2F38 100%);
box-shadow: 0px 6px 16px rgba(0, 0, 0, 0.4), inset 0px 1px 0px #D1D7DB, inset 0px 4px 8px rgba(255, 255, 255, 0.05), inset 0px -6px 15px #2A2A2E;
}
.registration-npi .empty-button {
content: "";
position: absolute;
opacity: 0;
}
.registration-npi .button-no-shadow {
box-shadow: none !important;
filter: none !important;
}
/* .registration-npi .purple::before {
opacity: var(--before-opacity, 0);
transition: opacity 0.25s ease;
z-index: 1;
} */
.registration-npi .purple {
background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, var(--npi-gradient-light) 0.01%, var(--npi-primary) 100%);
box-shadow: inset 0px 1px 0px var(--npi-dropshadow), inset 0px .25em .5em rgba(255, 255, 255, 0.05), inset 0px -6px 16px var(--npi-primary);
filter: drop-shadow(0px 6px 16px rgba(0, 0, 0, 0.4)) drop-shadow(0px -5px 12px rgba(var(--npi-gradient-light), 0.5));
}
.registration-npi .grey {
border-radius: 1.625em;
background: linear-gradient(180deg, #43434D 0%, #4C4C52 0.01%, #2C2F38 100%);
box-shadow: 0px 6px 16px rgba(0, 0, 0, 0.4), inset 0px 1px 0px #D1D7DB, inset 0px 4px 8px rgba(255, 255, 255, 0.05), inset 0px -6px 16px #2A2A2E;
}
.registration-npi .purple-nf {
background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, var(--npi-gradient-light) 0.01%, var(--npi-primary) 100%);
box-shadow: inset 0px 1px 0px var(--npi-dropshadow), inset 0px 4px 8px rgba(255, 255, 255, 0.05), inset 0px -6px 15px var(--npi-primary);
}
.registration-npi .npi-former-submit-button:disabled {
background: #43434D;
box-shadow: none;
color: #66676F;
pointer-events: none;
}
.registration-npi .filter-wrapper {
width: 87.5%;
height: 36vh;
position: relative;
bottom: 0;
margin: -1.5em;
overflow: hidden;
border-radius: 1.675em 1.675em 0em .0em;
}
.registration-npi .filter-wrapper::after {
width: 87.5%;
height: 36vh;
content: "";
position: relative;
border: solid 1px white;
}
.registration-npi .box {
width: 100%;
position: relative;
color: black;
}
.registration-npi #page-3,
.registration-npi #page-4 {
padding-left: 1.5em;
padding-right: 1.5em;
}
.registration-npi #npi,
.registration-npi #zip {
position: relative;
top: 30%;
}
/* Webkit to style scroll more consistently with app */
/* width */
.registration-npi #page-2 ::-webkit-scrollbar {
width: 1em;
background: none;
}
/* Track */
.registration-npi #page-2 ::-webkit-scrollbar-track {
background: #2C2F38;
border-radius: .5em;
}
/* Handle */
.registration-npi #page-2 ::-webkit-scrollbar-thumb {
background: #43434D;
border-radius: .5em;
}
/* Handle on hover */
.registration-npi #page-2 ::-webkit-scrollbar-thumb:hover {
background: #43434D;
}
.registration-npi .zip-auth-container input:-webkit-autofill,
.registration-npi .zip-auth-container input:-webkit-autofill:hover,
.registration-npi .zip-auth-container input:-webkit-autofill:focus,
.registration-npi .zip-auth-container input:-webkit-autofill:first-line,
.registration-npi .zip-auth-container input:-webkit-autofill:active {
-webkit-text-fill-color: white;
transition: background-color 50000s ease-in-out 0s;
}
.registration-npi #page-1 input:-webkit-autofill,
.registration-npi #page-1 input:-webkit-autofill:hover,
.registration-npi #page-1 input:-webkit-autofill:focus,
.registration-npi #page-1 input:-webkit-autofill:first-line,
.registration-npi #page-1 input:-webkit-autofill:active {
-webkit-text-fill-color: white;
transition: background-color 50000s ease-in-out 0s;
font-size: 19px !important;
}
.registration-npi .results-wrapper {
margin-top: 5px;
}
.registration-npi .input-zip-code .container input[type="number"],
.registration-npi .input-npi-code .container input[type="number"] {
text-align: center;
}
.registration-npi .loading-spinner-wrapper {
height: 350px;
display: flex;
justify-content: center;
align-items: center;
}
.registration-npi .results-wrapper .loading-spinner-wrapper {
transform: translateY(-40px);
}
.registration-npi .loading-spinner {
width: 70px;
height: 70px;
border: 5px solid #FFF;
border-bottom-color: transparent;
border-radius: 50%;
display: inline-block;
box-sizing: border-box;
animation: rotation 1s linear infinite;
}
/* Now NPI ISI css */
.registration-npi-isi,
.registration-npi-scemblix {
display: none;
width: 100%;
height: 100%;
overflow-y: auto;
overflow-x: hidden;
font-size: 16px;
background-image: url('data:image/svg+xml;utf8,');
background-size: cover;
background-position: center;
background-attachment: fixed;
}
/* ISI scrollbar */
.registration-npi-isi ::-webkit-scrollbar {
width: 16px;
background: none;
}
/* Track */
.registration-npi-isi ::-webkit-scrollbar-track {
background: var(--isi-background) !important;
border-radius: 8px;
}
/* Handle */
.registration-npi-isi ::-webkit-scrollbar-thumb {
background: gray !important;
border-radius: 8px;
}
/* Handle on hover */
.registration-npi-isi ::-webkit-scrollbar-thumb:hover {
background: gray !important;
border-radius: 8px;
}
.registration-npi-isi .title1 {
font-family: 'Apis-Bold';
color: #FF8200;
}
.registration-npi-isi .title2 {
font-family: 'Apis-Medium';
font-size: 120%;
font-weight: 500;
color: #FF8200;
}
.registration-npi-isi b {
font-family: 'Apis-Bold';
font-size: 16px;
color: #000;
font-weight: bold;
}
/* ease in from right, to center, with offset for ISI */
@keyframes isiSlideIn {
0% {
transform: translate(100%, -50%);
}
100% {
transform: translate(-50%, -50%);
}
}
/* ease out from center, to left, with offset for ISI */
@keyframes isiSlideOut {
0% {
transform: translate(-50%, -50%);
}
100% {
transform: translate(-100%, -50%);
}
}
.registration-npi-isi .slideIn {
animation-name: isiSlideIn;
animation-duration: 0.3s;
animation-fill-mode: forwards;
}
.registration-npi-isi .slideOut {
animation-name: isiSlideOut;
animation-duration: 0.3s;
animation-fill-mode: forwards;
}
.registration-npi-isi .container,
.registration-npi-scemblix .container {
width: 360px;
height: 642px;
background-color: lightgray;
margin: 0 auto;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
font-weight: 600;
display: flex;
flex-direction: column;
overflow: hidden;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.9);
border-radius: 6px;
}
.registration-npi-isi .content,
.registration-npi-scemblix .content {
width: 360px;
height: 642px;
margin: 0 auto;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
font-weight: 600;
display: flex;
flex-direction: column;
overflow: hidden;
}
.registration-npi-isi .heading {
background-color: #E3E5E9;
color: black;
text-align: center;
font-family: 'Rift';
line-height: 1.0;
height: 66px;
position: absolute;
width: 100%;
font-size: 30px;
padding-top: 9px;
}
.registration-npi-isi .isi {
background-color: var(--isi-background);
color: #444;
font-family: 'Apis-Regular';
font-weight: 600;
padding: 17px 10px 10px 10px;
overflow-y: scroll;
flex-grow: 1;
margin: 73px 0 76px 10px;
-webkit-overflow-scrolling: touch;
font-size: 15px;
}
.registration-npi-isi .continue {
background-color: #CAD4DB;
padding: 10px 0;
position: absolute;
bottom: 0;
width: 100%;
height: 63px;
user-select: none;
}
.registration-npi-isi .scroll-shadows {
background: linear-gradient( var(--isi-background) 30%, var(--isi-background) 0% ) center top, linear-gradient( var(--isi-background) 0%, var(--isi-background) 70% ) center bottom, radial-gradient( farthest-side at 50% 0, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0) ) center top, radial-gradient( farthest-side at 50% 100%, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0) ) center bottom;
background-repeat: no-repeat;
background-size: 100% 30px, 100% 30px, 100% 30px, 100% 30px;
background-attachment: local, local, scroll, scroll;
background-color: var(--isi-background);
}
.registration-npi-isi .no-shadows {
background: var(--isi-background);
}
.registration-npi-isi .button-container,
.registration-npi-scemblix .button-container {
text-align: center;
cursor: pointer;
user-select: none;
display: flex;
justify-content: center;
align-items: center;
}
.registration-npi-isi .button-inner span,
#scemblix-continue {
position: relative;
top: 8px;
}
.registration-npi-isi .button-inner {
position: relative;
width: 328px;
height: 60px;
border-radius: 26px;
color: white;
font-size: 20px;
font-weight: 500;
font-family: 'Apis-Medium';
background: linear-gradient(180deg, #43434D 0%, #4C4C52 0.01%, #2C2F38 100%);
box-shadow: 0px 6px 16px rgba(0, 0, 0, 0.4), inset 0px 1px 0px #D1D7DB, inset 0px 4px 8px rgba(255, 255, 255, 0.05), inset 0px -6px 15px #2A2A2E;
line-height: 38px;
}
.registration-npi-isi .button-inner:hover {
transform: translate(-1px, -1px);
}
.registration-npi-isi .button-inner:active {
transform: translate(1px, 1px);
transition: transform 34ms;
}
.registration-npi-isi .button-inner::before {
width: 328px;
height: 60px;
border-radius: 26px;
content: 'CONTINUE';
position: absolute;
color: white;
top: 0;
left: 0;
background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, var(--npi-gradient-light) 0.01%, var(--npi-primary) 100%);
box-shadow: inset 0px 1px 0px var(--npi-dropshadow), inset 0px 4px 8px rgba(255, 255, 255, 0.05), inset 0px -6px 15px var(--npi-primary);
opacity: var(--before-opacity, 0);
transition: opacity 0.25s ease;
line-height: 54px;
z-index: 1;
}
.registration-npi-isi .disabled-div {
pointer-events: none;
}
.registration-npi-isi #scroll-message {
position: fixed;
bottom: 81px;
left: 0;
width: 100%;
padding: 10px;
text-align: center;
display: none;
animation: flash 1.5s infinite;
font-family: 'Apis-Medium';
font-size: 16px;
color: white;
text-shadow: 0 0 8px black;
}
.registration-npi-isi .registered::after {
content: '\00AE';
vertical-align: super;
font-size: 9px;
}
.registration-npi-isi a {
color: blue;
}
@media screen and (min-height: 642px) {
.registration-npi .registration-container,
.registration-rybelsus .registration-container,
.registration-npi-scemblix .container,
.isi-rybelsus .container {
margin: auto;
}
}
/* Increase size if resolution is large */
@media screen and (min-height: 1440px) {
.registration-npi .registration-container,
.registration-rybelsus .registration-container,
.registration-npi-scemblix .container,
.isi-rybelsus .container,
.registration-npi-isi .container {
transform: scale(1.5);
}
.registration-npi-isi .container {
transform: scale(1.5) translate(-37.5%, -37.5%);
}
}
@media screen and (min-height: 2160px) {
.registration-npi .registration-container,
.registration-rybelsus .registration-container,
.registration-npi-scemblix .container,
.isi-rybelsus .container {
transform: scale(2);
}
.registration-npi-isi .container {
transform: scale(2) translate(-25%, -25%);
}
}
/* Scemblix Splash and NPI */
.registration-npi-scemblix {
display: block;
}
.registration-npi-scemblix #background-img {
z-index: -2; /* make sure its behind everything else */
width: 400px;
position: absolute;
}
.registration-npi-scemblix .spacer {
z-index: -1;
height: 300px;
width: 100%;
position: relative;
top: 50px;
}
.registration-npi-scemblix .heading {
padding: 16px;
}
.registration-npi-scemblix .heading img {
width: 200px;
top: 15px;
position: relative;
}
.registration-npi-scemblix .content {
align-items: center;
user-select: none;
background: #000;
}
.registration-npi-scemblix .title-container {
background-image: linear-gradient(45deg, #b4a269, #ede7c9);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-color: #b4a269; /* Fallback for if the gradient is not supported by the browser */
position: relative;
top: 225px;
text-align: center;
}
.registration-npi-scemblix h1 {
font-family: 'Arial';
font-weight: 700;
font-size: 55px;
letter-spacing: 4px;
margin-top: 22px;
margin-bottom: 0px;
}
.registration-npi-scemblix .title-container .header-underline {
background: linear-gradient(90deg, #b4a269, #ede7c9);
height: 2px;
width: inherit;
}
.registration-npi-scemblix h2 {
font-family: 'Arial';
font-weight: 400;
letter-spacing: 4px;
margin: 0px auto;
}
.registration-npi-scemblix .title-container p {
font-size: 18px;
font-weight: 500;
-webkit-text-fill-color: #EBE6D7;
color: #EBE6D7; /* fallback, just in case */
}
/* its a black box now */
.registration-npi-scemblix .blue-box {
height: 100px;
width: 100%;
position: relative;
}
.registration-npi-scemblix .button-container {
text-align: center;
cursor: pointer;
user-select: none;
display: flex;
justify-content: center;
align-items: center;
position: relative;
height: 100px;
}
.registration-npi-scemblix .button-inner {
position: relative;
width: 300px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
border-bottom: 3px solid #3B3B45;
color: #fff;
font-size: 20px;
font-family: 'Arial';
font-weight: 700;
background: #7A97AB;
box-shadow: inset 0 -3px 1px 0px #5E7181;
}
.registration-npi-scemblix .button-inner:hover {
transform: translate(-1px, -1px);
}
.registration-npi-scemblix .button-container span {
text-align: center;
}
.registration-npi-scemblix .white-box {
position: relative;
height: 50px;
width: 100%;
display: flex;
align-items: center;
top: -10px;
}
.registration-npi-scemblix #logo-img {
width: 115px;
position: relative;
left: 20px;
}
.registration-npi-scemblix .footer {
position: relative;
padding: 8px 20px;
font-family: 'Arial';
font-weight: 400;
color: #fff;
text-align: left;
font-size: 14px;
width: 90%;
}
/* Scemblix Web Registration Overrides */
.registration-npi .scemblix-button {
border-radius: 0px !important;
background: #7a97ab !important;
box-shadow: inset -1px 0px 1px 0px #6d8799, inset 1px 1px 1px 0px #6d8799, 0px 1px 1px 0px #6d8799, 0 4px 2px 0px #1D1F26 !important;
}
.registration-npi .npi-former-submit-button:disabled.scemblix-button {
background: #43434D !important;
box-shadow: none !important;
color: #66676F !important;
pointer-events: none !important;
}
.registration-npi .scemblix-remove-styling {
background: none !important;
box-shadow: none !important;
}
/* Scemblix ISI */
.registration-npi-isi .scemblix-heading {
font-family: 'Arial';
color: #c40d3c;
text-align: center;
justify-content: center;
align-items: center;
display: flex;
height: 66px;
width: 100%;
position: absolute;
}
.scemblix b, .scemblix ul.scemblix-indications li::marker {
color: #C40D3C;
}
.scemblix li, b.default-color {
color: rgb(68,68,68);
}
.scemblix ul {
list-style-position: outside;
padding-left: 1em; /* this magic number makes the indents work... i don't get it either*/
margin-top: 0px;
}
.scemblix {
font-family: Arial;
font-weight: 500;
}
.registration-npi-isi .continue.scemblix {
background-color: #f5f5f5;
}
.registration-npi-isi .button-inner.scemblix::before {
border-radius: 0px;
background: #7a97ab;
box-shadow: inset -1px 0px 1px 0px #6d8799, inset 1px 1px 1px 0px #6d8799, 0px 1px 1px 0px #6d8799, 0 4px 2px 0px #a3a3a3;
}
.registration-npi-isi .button-inner.scemblix {
position: relative;
width: 328px;
height: 60px;
border-radius: 0px;
color: #fff;
font-size: 20px;
font-weight: 500;
font-family: 'Arial';
background: #BFBFBF;
box-shadow: none;
line-height: 38px;
}
/******************** ********************/
/* Google Pixel viewports are super tall, 923px. This seems smaller than any common tablet. */
@media screen and (max-height: 925px) and (max-width: 500px) {
.registration-npi,
.registration-npi-isi,
.registration-npi-scemblix,
.registration-rybelsus,
.isi-rybelsus {
background: linear-gradient(193.07deg, #43434D 2.31%, #1D1F26 97.31%);
background-size: cover;
background-position: center;
background-attachment: fixed;
}
}
/* Between 650 and 925px, show registration centered */
@media screen and (max-height: 925px) and (max-width: 500px) {
.registration-npi .registration-container,
.registration-npi-isi .registration-container,
.registration-npi-scemblix .container,
.registration-rybelsus .registration-container,
.isi-rybelsus .container {
background: initial;
box-shadow: initial;
border-radius: initial;
}
}
/* Below 650px, show registration pined to the top */
@media screen and (max-height: 650px) and (max-width: 500px) {
.registration-npi .registration-container,
.registration-npi-isi .registration-container,
.registration-npi-scemblix .container,
.isi-rybelsus .container {
width: 100%;
height: 100%;
background: initial;
box-shadow: initial;
border-radius: initial;
}
}
/******************** ********************/
/* Flash a div red then white twice */
.flash-red-white {
animation: flashRedWhite 0.5s ease-in-out 0s;
}
@keyframes flashRedWhite {
0% {
background-color: white;
}
25% {
background-color: #ff81a7;
}
50% {
background-color: white;
}
75% {
background-color: #ff81a7;
}
100% {
background-color: white;
}
}
/* Flash a div red then dark twice */
.flash-red-dark {
animation: flashRedDark 0.5s ease-in-out 0s;
}
@keyframes flashRedDark {
0% {
background-color: #0e2531;
}
25% {
background-color: #ff81a7;
}
50% {
background-color: #0e2531;
}
75% {
background-color: #ff81a7;
}
100% {
background-color: #0e2531;
}
}
/* Flash a div red then darkblue twice */
.flash-red-darkBlue {
animation: flashRedDark 0.5s ease-in-out 0s;
}
@keyframes flashRedDark {
0% {
background-color: #2c2f38;
}
25% {
background-color: #ff81a7;
}
50% {
background-color: #2c2f38;
}
75% {
background-color: #ff81a7;
}
100% {
background-color: #2c2f38;
}
}
/******************** ********************/
@media screen and (max-height: 340px) {
.loading-animation {
height: 90px;
margin: 0;
}
.countDown {
margin-block-start: 7px;
margin-block-end: 7px;
}
#maxCapacity {
margin-block-start: 7px;
margin-block-end: 0px;
}
}
@media screen and (min-height: 340px) and (max-height: 548px) {
.loading-animation {
height: 128px;
margin: 0;
}
}
.la-timer {
display: block;
font-size: 0;
color: var(--theme-timer-color);
width: 96px;
height: 96px;
position: relative;
left: 50%;
transform: translate(-50%);
}
.la-timer > div {
display: inline-block;
float: none;
background-color: currentColor;
border: 0 solid currentColor;
position: relative;
box-sizing: border-box;
width: 96px;
height: 96px;
border-width: 6px;
background: transparent;
border-radius: 100%
}
.la-timer > div:before, .la-timer > div:after {
top: 48px;
left: 48px;
width: 6px;
margin-top: -9px;
margin-left: -9px;
border-radius: 6px;
transform-origin: 3px 3px 0;
position: absolute;
display: block;
content: "";
background: currentColor;
animation: timer-loader 1s infinite linear;
}
.la-timer > div:before {
height: 36px;
}
.la-timer > div:after {
height: 24px;
animation-duration: 10s;
animation-delay: -5s
}
@keyframes timer-loader {
0% {
transform: rotate(0deg)
}
100% {
transform: rotate(360deg)
}
}
.session-passcode {
font-size: 60px;
margin: 0px 10px 40px 0;
resize: none;
border-width: 3px;
padding: 10px 0px 8px 40px;
width: 200px;
position: relative;
left: 50%;
transform: translate(-50%);
}
.page_grid {
background-color: var(--theme-bg-color);
color: var(--theme-text-color);
border: 1px solid var(--theme-border-color);
padding: 6px;
border-radius: 6px;
overflow: auto;
position: absolute;
top: 50%;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.9);
left: 50%;
transform: translate(-50%, -50%);
}
.levelex-logo-2-4ZDNpx {
background-color: rgba(255,255,255,0);
position: absolute;
top: 30px;
width: 124px;
height: 40px;
user-select: none;
left: 50%;
transform: translate(-50%);
}
.leaderboardGrid {
background-color: var(--theme-bg-color);
color: var(--theme-text-color);
border: 1px solid var(--theme-border-color);
padding: 6px;
border-radius: 6px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.9);
margin: 20px auto 20px auto;
}
.leaderboardLayoutLandscape .qrInfo {
padding: 20px;
}
.leaderboardLayoutLandscape .lbInfo {
padding: 20px;
}
#vidContainer {
position: relative;
}
.defaultVideo {
position: relative;
border-radius: 6px;
transition: opacity 1s ease-in-out;
opacity: 100%;
}
.defaultiFrame {
border-radius: 6px;
border-color: #ccc;
transition: opacity 1s ease-in-out;
opacity: 0;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.defaultOverlay {
position: absolute;
top: 10px;
text-align: center;
width: 100%;
font-size: 26px;
margin-top: 2px;
color: red;
font-weight: 700;
text-shadow: 1px 1px 14px #fff, 1px 1px 10px #ccc;
transition: opacity ease-out 1s 5s;
opacity: 100%;
}
.leaderboardLayoutPortrait .defaultVideo {
margin-left: 10px;
}
.leaderboardLayoutPortrait .defaultiFrame {
margin-left: 10px;
}
.qr-container img {
border: white 8px solid;
}
.lbtd {
border: 1px solid #ddd;
text-align: center;
padding: 4px 12px 4px 12px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
/* S Page CSS */
@media screen and (max-width: 767px) {
.onlyM {
display: none;
}
.onlyL {
display: none;
}
.onlyXL {
display: none
}
.notS {
display: none;
}
.loading-header {
font-size: 16px;
}
.loading-title {
font-size: 20px;
}
.linkInfo {
font-size: 12px;
font-family: Open Sans;
border-collapse: collapse;
background-color: #0f0f0f0f;
width: 300px;
margin: 0 auto 34px auto;
box-shadow: 2px 2px 8px 2px rgb(0 0 0 / 20%);
}
.linkInfo .li-header {
display: none;
}
.linkInfo .li-th {
border: 1px solid var(--theme-border-color);
text-align: center;
padding: 4px 12px 4px 12px;
}
.linkInfo .li-td {
border: 1px solid var(--theme-border-color);
text-align: center;
padding: 1px 4px 1px 4px;
width: 50%;
display: inline-block;
}
.linkInfo .li-tr {
background-color: var(--theme-table-title-background);
color: var(--theme-table-title-text);
width: 50%;
display: inline-block;
}
#infopageHeading {
font-size: 18px;
}
.infoUrl {
font-size: 13px;
margin-block-start: 0;
margin-block-end: 0;
margin: 6px 10px 20px 10px;
font-weight: 600;
}
.page_grid {
width: 95vw;
}
.leaderboardPage {
text-align: center;
font-size: 15px;
}
.leaderboardGrid {
width: 95vw !important;
}
.leaderboardLayoutLandscape .leaderboard-page-table {
width: 45vw !important;
font-size: 12px;
margin: auto;
}
.leaderboardLayoutLandscape .rankColumn {
width: 11vw !important;
}
.leaderboardLayoutLandscape .nameColumn {
width: 17vw !important;
}
.leaderboardLayoutLandscape .scoreColumn {
width: 17vw !important;
}
.leaderboardLayoutLandscape .infoleaderboardStartText {
font-size: 13px;
}
.leaderboardLayoutLandscape .infoUrl {
font-size: 12px;
}
.leaderboardLayoutLandscape .defaultVideo {
width: 94vw !important;
height: 31vh;
}
.leaderboardLayoutLandscape .defaultiFrame {
width: 94vw !important;
height: 31vh;
}
@media screen and (max-width: 630px) {
.leaderboardLayoutPortrait .leaderboard-page-table {
width: 45vw !important;
font-size: 12px;
margin: auto;
}
.leaderboardLayoutPortrait .rankColumn {
width: 10vw !important;
}
.leaderboardLayoutPortrait .nameColumn {
width: 18vw !important;
}
.leaderboardLayoutPortrait .scoreColumn {
width: 12vw !important;
}
.leaderboardLayoutPortrait .leaderboardPage {
font-size: 12px;
}
.leaderboardLayoutPortrait .infoleaderboardStartText {
font-size: 10px;
}
.leaderboardLayoutPortrait .infoUrl {
font-size: 10px;
}
.leaderboardLayoutPortrait .defaultVideo {
width: 46vw !important;
height: 41vh;
}
.leaderboardLayoutPortrait .defaultiFrame {
width: 46vw !important;
height: 41vh;
}
}
@media screen and (max-width: 408px) {
.leaderboardLayoutPortrait .defaultVideo {
display: none;
}
.leaderboardLayoutPortrait .defaultiFrame {
display: none;
}
.leaderboardLayoutPortrait .defaultOverlay {
display: none;
}
.leaderboardLayoutPortrait .leaderboard-page-table {
width: 85vw !important;
}
}
@media screen and (max-width: 500px) {
.leaderboardLayoutLandscape .qrInfo {
display: none;
}
.leaderboardLayoutLandscape .leaderboard-page-table {
width: 80vw !important;
}
}
@media screen and (max-width: 767px) and (min-width: 630px) {
.leaderboardGrid {
width: 95vw !important;
}
.leaderboardLayoutPortrait .leaderboard-page-table {
width: 90vw !important;
font-size: 12px;
margin: auto;
}
.leaderboardLayoutPortrait .rankColumn {
width: 10vw !important;
}
.leaderboardLayoutPortrait .nameColumn {
width: 54vw !important;
}
.leaderboardLayoutPortrait .scoreColumn {
width: 26vw !important;
}
.leaderboardLayoutPortrait .leaderboardPage {
font-size: 14px;
}
.leaderboardLayoutPortrait .leaderboard-page-table {
width: 300px !important;
font-size: 14px;
margin: auto;
}
.leaderboardLayoutPortrait .rankColumn {
width: 68px !important;
}
.leaderboardLayoutPortrait .nameColumn {
width: 120px !important;
}
.leaderboardLayoutPortrait .scoreColumn {
width: 110px !important;
}
.leaderboardLayoutPortrait .infoUrl {
font-size: 13px;
}
.leaderboardLayoutPortrait .defaultVideo {
width: 46vw !important;
height: 37vh;
}
.leaderboardLayoutPortrait .defaultiFrame {
width: 46vw !important;
height: 37vh;
}
}
.empty-grid {
height: 524px;
overflow: hidden;
position: relative;
width: 320px;
}
.organisms--logged-out-C61RwL {
height: 72px;
left: 0px;
overflow: hidden;
position: absolute;
top: 0px;
width: 320px;
}
.organisms-form-C61RwL {
background-color: rgba(255,255,255,0);
height: 440px;
overflow: hidden;
position: absolute;
top: 104px;
width: 320px;
}
.bg-G8OCI1 {
background-color: var(--white);
border-radius: 6px;
height: 444px;
left: 0px;
position: absolute;
top: 0px;
width: 320px;
}
.lineL {
background-color: rgba(255,255,255,0);
height: 2px;
left: 29px;
position: absolute;
top: 292px;
width: 107px;
}
.lineR {
background-color: rgba(255,255,255,0);
height: 2px;
left: 182px;
position: absolute;
top: 292px;
width: 106px;
}
.or-G8OCI1 {
background-color: rgba(0,0,0,0);
height: auto;
left: 152px;
position: absolute;
text-align: center;
top: 280px;
white-space: nowrap;
width: auto;
}
.log-in-G8OCI1 {
background-color: rgba(0,0,0,0);
height: auto;
position: absolute;
text-align: center;
top: 8px;
white-space: nowrap;
width: auto;
user-select: none;
left: 50%;
transform: translate(-50%);
}
.log-in-G8OCI1B {
background-color: rgba(0,0,0,0);
color: red;
font-weight: 800;
height: auto;
position: absolute;
text-align: center;
top: 54px;
white-space: nowrap;
width: auto;
user-select: none;
left: 50%;
transform: translate(-50%);
}
.field-normal-pb2yxH {
background-color: rgba(255,255,255,0);
height: 40px;
left: 25px;
position: absolute;
top: 88px;
width: 266px;
}
.field-normal-G8OCI1 {
background-color: rgba(255,255,255,0);
height: 40px;
left: 25px;
position: absolute;
top: 152px;
width: 266px;
}
.input-bg-olTJHQ {
background-color: var(--white);
border-radius: 6px;
height: 44px;
left: 0px;
position: absolute;
top: 0px;
width: 266px;
}
.input-bg-iqrAbE {
background-color: var(--white);
border-radius: 6px;
height: 44px;
left: 0px;
position: absolute;
top: 0px;
width: 266px;
}
.text-olTJHQ {
background-color: rgba(118,118,118,0);
height: 24px;
left: 16px;
position: absolute;
text-align: left;
top: 12px;
white-space: nowrap;
width: 212px;
}
.text-iqrAbE {
background-color: rgba(118,118,118,0);
height: 24px;
left: 16px;
position: absolute;
text-align: left;
top: 12px;
white-space: nowrap;
width: 188px;
}
.atoms-butt--iconright-G8OCI1 {
background-color: rgba(255,255,255,0);
height: 42px;
left: 48px;
cursor: pointer;
position: absolute;
top: 216px;
width: 222px;
}
.login-button-okta {
background-color: rgba(255,255,255,0);
left: 43px;
position: absolute;
cursor: pointer;
box-shadow: 0 1px 3px 0 rgb(0 0 0 / 25%);
height: 36px;
}
.login-button-ping {
background-color: rgba(255,255,255,0);
left: 43px;
position: absolute;
cursor: pointer;
box-shadow: 0 1px 3px 0 rgb(0 0 0 / 25%);
height: 36px;
}
.login-button-ms {
background-color: rgba(255,255,255,0);
left: 43px;
position: absolute;
cursor: pointer;
box-shadow: 0 1px 3px 0 rgb(0 0 0 / 25%);
height: 36px;
}
.login-button-google {
background-color: rgba(255,255,255,0);
left: 170px;
position: absolute;
top: 320px;
margin-top: 3px;
}
.login-issues-G8OCI1 {
background-color: rgba(66,75,90,0);
color: var(--river-bed);
cursor: pointer;
height: 24px;
left: 50px;
position: absolute;
text-align: center;
text-decoration: underline;
top: 392px;
white-space: nowrap;
width: 223px;
}
}
/* 320 command below */
@media screen and (max-width: 320px) {
.leaderboardPage {
font-size: 12px;
}
#infopageHeading {
font-size: 12px;
}
.leaderboard-page-table {
width: 90vw !important;
font-size: 12px;
margin: auto;
}
.rankColumn {
width: 10vw !important;
}
.nameColumn {
width: 54vw !important;
}
.scoreColumn {
width: 26vw !important;
}
.infoleaderboardStartText {
font-size: 13px;
}
}
/* M Page CSS */
@media screen and (min-width: 768px) and (max-width: 1023px) {
.onlyS {
display: none;
}
.onlyL {
display: none;
}
.onlyXL {
display: none;
}
.notM {
display: none;
}
.loading-header {
font-size: 20px;
}
.loading-title {
font-size: 35px;
}
#infopageHeading {
font-size: 20px;
}
.infoUrl {
font-size: 25px;
margin-block-start: 0;
margin-block-end: 0;
margin: 6px 10px 20px 10px;
font-weight: 600;
}
.page_grid {
width: 720px;
}
.leaderboardGrid {
width: 720px !important;
}
.leaderboardLayoutPortrait .leaderboardPage {
font-size: 14px;
}
.leaderboardLayoutLandscape .leaderboard-page-table {
width: 320px !important;
font-size: 14px;
margin: auto;
}
.leaderboardLayoutPortrait .leaderboard-page-table {
width: 332px !important;
font-size: 14px;
margin: auto;
}
.leaderboardLayoutLandscape .rankColumn {
width: 68px !important;
}
.leaderboardLayoutLandscape .nameColumn {
width: 122px !important;
}
.leaderboardLayoutLandscape .scoreColumn {
width: 110px !important;
}
.leaderboardLayoutPortrait .rankColumn {
width: 68px !important;
}
.leaderboardLayoutPortrait .nameColumn {
width: 122px !important;
}
.leaderboardLayoutPortrait .scoreColumn {
width: 110px !important;
}
.leaderboardLayoutLandscape .infoUrl {
font-size: 13px;
}
.leaderboardLayoutPortrait .infoUrl {
font-size: 13px;
}
.leaderboardLayoutLandscape .defaultVideo {
width: 640px !important;
height: initial;
}
.leaderboardLayoutPortrait .defaultVideo {
width: 367px !important;
height: initial;
}
.leaderboardLayoutLandscape .defaultiFrame {
width: 640px !important;
height: 360px;
}
.leaderboardLayoutPortrait .defaultiFrame {
width: 367px !important;
height: 646px;
}
.empty-grid {
height: 524px;
overflow: hidden;
position: relative;
width: 768px;
}
.organisms--logged-out-C61RwL {
height: 72px;
left: 0px;
overflow: hidden;
position: absolute;
top: 0px;
width: 768px;
}
.organisms-form-C61RwL {
background-color: rgba(255,255,255,0);
height: 416px;
left: 210px;
overflow: hidden;
position: absolute;
top: 104px;
width: 350px;
}
.bg-G8OCI1 {
background-color: var(--white);
border-radius: 6px;
height: 416px;
left: 0px;
position: absolute;
top: 0px;
width: 350px;
}
.lineL {
background-color: rgba(255,255,255,0);
height: 2px;
left: 32px;
position: absolute;
top: 275px;
width: 112px;
}
.lineR {
background-color: rgba(255,255,255,0);
height: 2px;
left: 203px;
position: absolute;
top: 275px;
width: 114px;
}
.or-G8OCI1 {
background-color: rgba(0,0,0,0);
height: auto;
left: 167px;
position: absolute;
text-align: center;
top: 265px;
white-space: nowrap;
width: auto;
}
.log-in-G8OCI1 {
background-color: rgba(0,0,0,0);
height: auto;
position: absolute;
text-align: center;
top: 8px;
white-space: nowrap;
width: auto;
user-select: none;
left: 50%;
transform: translate(-50%);
}
.log-in-G8OCI1B {
background-color: rgba(0,0,0,0);
color: red;
font-weight: 800;
height: auto;
position: absolute;
text-align: center;
top: 52px;
white-space: nowrap;
width: auto;
user-select: none;
left: 50%;
transform: translate(-50%);
}
.field-normal-pb2yxH {
background-color: rgba(255,255,255,0);
height: 38px;
left: 32px;
position: absolute;
top: 83px;
width: 286px;
}
.field-normal-G8OCI1 {
background-color: rgba(255,255,255,0);
height: 38px;
left: 32px;
position: absolute;
top: 144px;
width: 286px;
}
.input-bg-olTJHQ {
background-color: var(--white);
border-radius: 6px;
height: 44px;
left: 0px;
position: absolute;
top: 0px;
width: 286px;
}
.input-bg-iqrAbE {
background-color: var(--white);
border-radius: 6px;
height: 44px;
left: 0px;
position: absolute;
top: 0px;
width: 286px;
}
.text-olTJHQ {
background-color: rgba(118,118,118,0);
height: 24px;
left: 16px;
position: absolute;
text-align: left;
top: 12px;
white-space: nowrap;
width: 248px;
}
.text-iqrAbE {
background-color: rgba(118,118,118,0);
height: 24px;
left: 16px;
position: absolute;
text-align: left;
top: 12px;
white-space: nowrap;
width: 248px;
}
.atoms-butt--iconright-G8OCI1 {
background-color: rgba(255,255,255,0);
height: 40px;
left: 31px;
cursor: pointer;
position: absolute;
top: 204px;
width: 286px;
}
.login-button-ms {
background-color: rgba(255,255,255,0);
left: 63px;
position: absolute;
cursor: pointer;
box-shadow: 0 1px 3px 0 rgb(0 0 0 / 25%);
height: 36px;
}
.login-button-google {
background-color: rgba(255,255,255,0);
left: 188px;
position: absolute;
top: 310px;
margin-top: 3px;
}
.login-issues-G8OCI1 {
background-color: rgba(66,75,90,0);
color: var(--river-bed);
cursor: pointer;
height: 24px;
left: 26px;
position: absolute;
text-align: center;
text-decoration: underline;
top: 370px;
white-space: nowrap;
width: 301px;
}
}
/* L Page CSS */
@media screen and (min-width: 1024px) and (max-width: 1439px) {
.onlyS {
display: none;
}
.onlyM {
display: none;
}
.onlyXL {
display: none;
}
.notL {
display: none;
}
.page_grid {
width: 976px;
}
#infopageHeading {
font-size: 26px;
}
.leaderboardLayoutLandscape .leaderboard-page-table {
width: 520px !important;
font-size: 18px;
margin: auto;
}
.leaderboardLayoutPortrait .leaderboard-page-table {
width: 460px !important;
font-size: 16px;
margin: auto;
}
.leaderboardLayoutLandscape .infoUrl {
font-size: 16px;
}
.leaderboardLayoutLandscape .rankColumn {
width: 68px !important;
}
.leaderboardLayoutLandscape .nameColumn {
width: 282px !important;
}
.leaderboardLayoutLandscape .scoreColumn {
width: 110px !important;
}
.leaderboardLayoutPortrait .rankColumn {
width: 68px !important;
}
.leaderboardLayoutPortrait .nameColumn {
width: 238px !important;
}
.leaderboardLayoutPortrait .scoreColumn {
width: 110px !important;
}
.leaderboardGrid {
width: 976px !important;
}
.leaderboardLayoutLandscape .defaultVideo {
width: 894px !important;
height: initial;
}
.leaderboardLayoutPortrait .defaultVideo {
width: 495px !important;
height: initial;
}
.leaderboardLayoutLandscape .defaultiFrame {
width: 890px !important;
height: 502px;
}
.leaderboardLayoutPortrait .defaultiFrame {
width: 495px !important;
height: 877px;
}
.empty-grid {
height: 524px;
overflow: hidden;
position: relative;
width: 1024px;
}
.organisms--logged-out-C61RwL {
height: 72px;
left: 0px;
overflow: hidden;
position: absolute;
top: 0px;
width: 1024px;
}
.organisms-form-C61RwL {
background-color: rgba(255,255,255,0);
height: 416px;
left: 357px;
overflow: hidden;
position: absolute;
top: 104px;
width: 310px;
}
.bg-G8OCI1 {
background-color: var(--white);
border-radius: 6px;
height: 416px;
left: 0px;
position: absolute;
top: 0px;
width: 310px;
}
.lineL {
background-color: rgba(255,255,255,0);
height: 2px;
left: 28px;
position: absolute;
top: 275px;
width: 100px;
}
.lineR {
background-color: rgba(255,255,255,0);
height: 2px;
left: 180px;
position: absolute;
top: 275px;
width: 100px;
}
.or-G8OCI1 {
background-color: rgba(0,0,0,0);
height: auto;
left: 147px;
position: absolute;
text-align: center;
top: 265px;
white-space: nowrap;
width: auto;
}
.log-in-G8OCI1 {
background-color: rgba(0,0,0,0);
height: auto;
position: absolute;
text-align: center;
top: 8px;
white-space: nowrap;
width: auto;
user-select: none;
left: 50%;
transform: translate(-50%);
}
.log-in-G8OCI1B {
background-color: rgba(0,0,0,0);
color: red;
font-weight: 800;
height: auto;
position: absolute;
text-align: center;
top: 52px;
white-space: nowrap;
width: auto;
user-select: none;
left: 50%;
transform: translate(-50%);
}
.field-normal-pb2yxH {
background-color: rgba(255,255,255,0);
height: 38px;
left: 28px;
position: absolute;
top: 83px;
width: 253px;
}
.field-normal-G8OCI1 {
background-color: rgba(255,255,255,0);
height: 38px;
left: 28px;
position: absolute;
top: 144px;
width: 253px;
}
.input-bg-olTJHQ {
background-color: var(--white);
border-radius: 6px;
height: 44px;
left: 0px;
position: absolute;
top: 0px;
width: 253px;
}
.input-bg-iqrAbE {
background-color: var(--white);
border-radius: 6px;
height: 44px;
left: 0px;
position: absolute;
top: 0px;
width: 253px;
}
.text-olTJHQ {
background-color: rgba(118,118,118,0);
height: 24px;
left: 16px;
position: absolute;
text-align: left;
top: 12px;
white-space: nowrap;
width: 222px;
}
.text-iqrAbE {
background-color: rgba(118,118,118,0);
height: 24px;
left: 16px;
position: absolute;
text-align: left;
top: 12px;
white-space: nowrap;
width: 222px;
}
.atoms-butt--iconright-G8OCI1 {
background-color: rgba(255,255,255,0);
height: 40px;
left: 27px;
cursor: pointer;
position: absolute;
top: 204px;
width: 256px;
}
.login-button-ms {
background-color: rgba(255,255,255,0);
left: 46px;
position: absolute;
cursor: pointer;
box-shadow: 0 1px 3px 0 rgb(0 0 0 / 25%);
height: 36px;
}
.login-button-google {
background-color: rgba(255,255,255,0);
left: 166px;
position: absolute;
top: 310px;
margin-top: 3px;
}
.login-issues-G8OCI1 {
background-color: rgba(66,75,90,0);
color: var(--river-bed);
cursor: pointer;
height: 24px;
left: 26px;
position: absolute;
text-align: center;
text-decoration: underline;
top: 370px;
white-space: nowrap;
width: 261px;
}
}
/* XL Page CSS */
@media screen and (min-width: 1440px) {
.onlyS {
display: none;
}
.onlyM {
display: none;
}
.onlyL {
display: none;
}
.notXL {
display: none;
}
.page_grid {
width: 1248px;
}
.leaderboardLayoutLandscape {
margin-left: 36px;
}
.leaderboardLayoutLandscape .leaderboard-page-table {
width: 520px !important;
font-size: 18px;
margin: auto;
}
.leaderboardLayoutPortrait .leaderboard-page-table {
width: 650px !important;
font-size: 22px;
margin: auto;
}
.rankColumn {
width: 68px !important;
}
.nameColumn {
width: 282px !important;
}
.scoreColumn {
width: 110px !important;
}
.leaderboardLayoutLandscape .lbInfo {
font-size: 20px;
}
.leaderboardLayoutLandscape .infoUrl {
font-size: 24px;
}
.leaderboardLayoutLandscape .infoleaderboardStartText {
font-size: 16px;
}
.leaderboardLayoutPortrait .lbInfo {
padding: 10px 10px 10px 30px;
font-size: 20px;
}
.leaderboardLayoutPortrait .qrInfo {
padding: 10px 40px 10px 69px;
}
.empty-grid {
height: 524px;
overflow: hidden;
position: relative;
width: 1440px;
}
.organisms--logged-out-C61RwL {
height: 72px;
left: 0px;
overflow: hidden;
position: absolute;
top: 0px;
width: 1440px;
}
.organisms-form-C61RwL {
background-color: rgba(255,255,255,0);
height: 416px;
left: 520px;
overflow: hidden;
position: absolute;
top: 104px;
width: 400px;
}
.bg-G8OCI1 {
background-color: var(--white);
border-radius: 6px;
height: 416px;
left: 0px;
position: absolute;
top: 0px;
width: 400px;
}
.lineL {
background-color: rgba(255,255,255,0);
height: 2px;
left: 36px;
position: absolute;
top: 275px;
width: 128px;
}
.lineR {
background-color: rgba(255,255,255,0);
height: 2px;
left: 233px;
position: absolute;
top: 275px;
width: 129px;
}
.or-G8OCI1 {
background-color: rgba(0,0,0,0);
height: auto;
left: 192px;
position: absolute;
text-align: center;
top: 265px;
white-space: nowrap;
width: auto;
}
.log-in-G8OCI1 {
background-color: rgba(0,0,0,0);
height: auto;
position: absolute;
text-align: center;
top: 8px;
white-space: nowrap;
width: auto;
user-select: none;
left: 50%;
transform: translate(-50%);
}
.log-in-G8OCI1B {
background-color: rgba(0,0,0,0);
color: red;
font-weight: 800;
height: auto;
position: absolute;
text-align: center;
top: 52px;
white-space: nowrap;
width: auto;
user-select: none;
left: 50%;
transform: translate(-50%);
}
.field-normal-pb2yxH {
background-color: rgba(255,255,255,0);
height: 38px;
left: 37px;
position: absolute;
top: 83px;
width: 326px;
}
.field-normal-G8OCI1 {
background-color: rgba(255,255,255,0);
height: 38px;
left: 37px;
position: absolute;
top: 144px;
width: 326px;
}
.input-bg-olTJHQ {
background-color: var(--white);
border-radius: 6px;
height: 44px;
left: 0px;
position: absolute;
top: 0px;
width: 326px;
}
.input-bg-iqrAbE {
background-color: var(--white);
border-radius: 6px;
height: 44px;
left: 0px;
position: absolute;
top: 0px;
width: 326px;
}
.text-olTJHQ {
background-color: rgba(118,118,118,0);
height: 24px;
left: 16px;
position: absolute;
text-align: left;
top: 12px;
white-space: nowrap;
width: 290px;
}
.text-iqrAbE {
background-color: rgba(118,118,118,0);
height: 24px;
left: 16px;
position: absolute;
text-align: left;
top: 12px;
white-space: nowrap;
width: 290px;
}
.atoms-butt--iconright-G8OCI1 {
background-color: rgba(255,255,255,0);
height: 40px;
left: 35px;
cursor: pointer;
position: absolute;
top: 204px;
width: 326px;
}
.login-button-ms {
background-color: rgba(255,255,255,0);
left: 84px;
position: absolute;
cursor: pointer;
box-shadow: 0 1px 3px 0 rgb(0 0 0 / 25%);
height: 36px;
}
.login-button-google {
background-color: rgba(255,255,255,0);
left: 215px;
position: absolute;
top: 310px;
margin-top: 3px;
}
.login-issues-G8OCI1 {
background-color: rgba(66,75,90,0);
color: var(--river-bed);
cursor: pointer;
height: 24px;
left: 26px;
position: absolute;
text-align: center;
text-decoration: underline;
top: 370px;
white-space: nowrap;
width: 351px;
}
}
/* At the end, so it overrides any positioning before it */
.login-button-centered {
left: 50%;
transform: translate(-50%);
}
.bg-disable-passcode {
height: 184px;
}
.login-disable-passcode {
top: 68px;
}
.issues-disable-passcode {
top: 138px;
}
.lx-component-select-sheet {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: hidden;
z-index: 99;
}
.lx-component-select-sheet-content {
position: absolute;
bottom: 0;
left: 50%;
width: 360px;
height: 35%;
background: #0E0D16;
padding: 9px;
border-top-left-radius: 30px;
border-top-right-radius: 30px;
transform: translate(-50%, 100%);
transition: transform 0.5s ease-in-out;
color: white;
overflow-x: hidden;
overflow-y: scroll;
scrollbar-width: none;
}
.lx-component-select-sheet-content::-webkit-scrollbar {
width: 0;
height: 0;
}
.lx-component-select-sheet-content.lx-component-select-sheet-content-showing {
transform: translate(-50%, 0);
}
.lx-component-select-sheet-item {
text-align: center;
font-size: 19px;
font-weight: 500;
font-family: Arial, Helvetica, sans-serif;
padding: 5px 0;
margin: 1px 0;
border-radius: 20px;
cursor: pointer;
}
.lx-component-select-sheet-item:hover {
background: var(--npi-component-select-hover);
}
.lx-component-select-sheet-item.lx-component-select-sheet-item-selected {
background: linear-gradient(180deg, var(--npi-component-select-gradient1) 0%, var(--npi-component-select-gradient2) 100%, rgba(0,212,255,1) 100%);
color: #888;
}
/******************** Shockwave 3 registration ********************/
.registration-shockwave3 {
background-image: url('data:image/svg+xml;utf8,');
height: 100%;
width: 100%;
position: absolute;
color: white;
overflow-y: auto;
overflow-x: hidden;
background-size: cover;
background-attachment: fixed;
padding: 0;
background-size: cover;
background-position: center;
background-attachment: fixed;
scroll-padding-top: 0 !important;
user-select: none;
}
.registration-shockwave3 .registration-container {
position: relative;
top: 50%;
transform: translateY(-50%);
width: 360px;
height: 660px;
position: relative;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.9);
border-radius: 10px;
background: linear-gradient(180deg, #709EC2 0%, #303474 100%);
margin: 0 auto;
}
@media screen and (max-height: 705px) {
.registration-shockwave3 .registration-container {
top: 0;
transform: translateY(0%);
}
}
.registration-shockwave3 .logo {
filter: drop-shadow(2px 2px 3px rgb(0 0 0 / 0.5));
width: 360px;
height: auto;
margin: -40px auto -18px auto;
}
.registration-shockwave3 form {
position: relative;
top: -40px;
}
.registration-shockwave3 .button-control {
text-align: center;
margin-top: 22px;
}
.registration-shockwave3 .button-container {
display: inline-block;
position: relative;
}
.registration-shockwave3 .button-image {
width: 325px;
height: 40px;
color: white;
background: #081E37;
border: 3px solid #FFFFFF;
box-shadow: inset 0px 0px 4px rgba(0, 0, 0, 0.25), inset 0px -2px 10px 9px rgba(0, 0, 0, 0.28);
border-radius: 42px;
margin-bottom: 6px;
}
.registration-shockwave3 #reg-submit {
color: #666;
border-color: transparent;
background-color: transparent;
position: relative;
top: 1px;
font-size: 20px;
font-weight: 600;
width: 100%;
height: 100%;
}
.registration-shockwave3 .text-control {
width: 325px;
height: 38px;
color: white;
background: rgba(32, 57, 81, 0.85);
box-shadow: inset 0px 0px 4px rgba(0, 0, 0, 0.25), inset 0px -2px 10px 9px rgba(0, 0, 0, 0.28);
border-radius: 16px;
margin: 20px auto;
}
.registration-shockwave3 .text-container {
position: relative;
}
.registration-shockwave3 .reg-input {
width: 311px;
left: 0px;
padding-left: 8px;
height: 32px;
border-color: transparent;
border-radius: 16px;
color: white;
font-size: 18px;
font-weight: 600;
position: relative;
}
.registration-shockwave3 .reg-input::placeholder {
color: #777;
}
.registration-shockwave3 .gdpr-container {
font-size: 11px;
width: 329px;
margin: auto;
}
.registration-shockwave3 select {
--chevron: url("data:image/svg+xml,");
border-radius: 16px;
width: 325px;
appearance: none;
background: var(--chevron) right center no-repeat white;
color: #777;
background-color: rgba(32, 57, 81, 0.85);
outline: transparent;
border: transparent;
height: 38px;
top: 0px;
position: relative;
left: 0px;
font-size: 18px;
font-weight: 600;
padding-left: 10px;
}
.registration-shockwave3 select:focus {
color: white;
}
.registration-shockwave3 input:focus {
outline: none !important;
border-color: transparent;
}
.registration-shockwave3 #invalidEmail {
position: relative;
top: -21px;
left: -73px;
color: yellow;
opacity: 0;
transition: opacity 0.2s ease-in-out 0.2s;
margin: auto;
width: fit-content;
margin-bottom: -37px;
}
.registration-shockwave3 input:-webkit-autofill,
.registration-shockwave3 input:-webkit-autofill:hover,
.registration-shockwave3 input:-webkit-autofill:focus,
.registration-shockwave3 textarea:-webkit-autofill,
.registration-shockwave3 textarea:-webkit-autofill:hover,
.registration-shockwave3 textarea:-webkit-autofill:focus,
.registration-shockwave3 select:-webkit-autofill,
.registration-shockwave3 select:-webkit-autofill:hover,
.registration-shockwave3 select:-webkit-autofill:focus {
-webkit-text-fill-color: white;
transition: background-color 50000s ease-in-out 0s;
font-weight: 600;
font-size: 18px;
}
@media screen and (max-height: 925px) and (max-width: 500px) {
.registration-shockwave3 {
background: linear-gradient(180deg, #709EC2 0%, #303474 100%);
}
.registration-shockwave3 .registration-container {
box-shadow: initial;
background: initial;
}
}
/* Now Shockwave3 ISI css */
.registration-shockwave3-isi {
display: none;
width: 100%;
height: 100%;
overflow-y: auto;
overflow-x: hidden;
font-size: 16px;
background-image: url('data:image/svg+xml;utf8,');
background-size: cover;
background-position: center;
background-attachment: fixed;
}
.registration-shockwave3-isi .title1 {
font-family: 'Apis-Bold';
color: #FF8200;
}
.registration-shockwave3-isi .title2 {
font-family: 'Apis-Medium';
font-size: 120%;
font-weight: 500;
color: #FF8200;
}
.registration-shockwave3-isi b {
font-family: 'Apis-Bold';
font-size: 16px;
color: #000;
font-weight: bold;
}
.registration-shockwave3-isi .slideIn {
animation-name: isiSlideIn;
animation-duration: 0.3s;
animation-fill-mode: forwards;
}
.registration-shockwave3-isi .slideOut {
animation-name: isiSlideOut;
animation-duration: 0.3s;
animation-fill-mode: forwards;
}
.registration-shockwave3-isi .container {
width: 360px;
height: 642px;
background-color: lightgray;
margin: 0 auto;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
font-weight: 600;
display: flex;
flex-direction: column;
overflow: hidden;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.9);
border-radius: 10px;
}
.registration-shockwave3-isi .content {
width: 360px;
height: 642px;
margin: 0 auto;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
font-weight: 600;
display: flex;
flex-direction: column;
overflow: hidden;
}
.registration-shockwave3-isi .heading {
background-color: #E3E5E9;
color: black;
text-align: center;
font-family: 'Rift';
line-height: 1.0;
height: 66px;
position: absolute;
width: 100%;
font-size: 30px;
padding-top: 9px;
}
.registration-shockwave3-isi .isi {
background-color: var(--isi-background);
color: #444;
font-family: 'Apis-Regular';
font-weight: 600;
padding: 17px 10px 10px 10px;
overflow-y: scroll;
flex-grow: 1;
margin: 73px 0 76px 10px;
-webkit-overflow-scrolling: touch;
font-size: 15px;
}
.registration-shockwave3-isi .continue {
background-color: #CAD4DB;
padding: 10px 0;
position: absolute;
bottom: 0;
width: 100%;
height: 63px;
user-select: none;
}
.registration-shockwave3-isi .scroll-shadows {
max-height: calc(100vh - 136px);
background: linear-gradient( var(--isi-background) 30%, var(--isi-background) 0% ) center top, linear-gradient( var(--isi-background) 0%, var(--isi-background) 70% ) center bottom, radial-gradient( farthest-side at 50% 0, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0) ) center top, radial-gradient( farthest-side at 50% 100%, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0) ) center bottom;
background-repeat: no-repeat;
background-size: 100% 30px, 100% 30px, 100% 30px, 100% 30px;
background-attachment: local, local, scroll, scroll;
background-color: var(--isi-background);
}
.registration-shockwave3-isi .no-shadows {
background: var(--isi-background);
}
.registration-shockwave3-isi .button-container {
text-align: center;
cursor: pointer;
user-select: none;
display: flex;
justify-content: center;
align-items: center;
}
.registration-shockwave3-isi .button-container span {
position: relative;
top: 8px;
}
.registration-shockwave3-isi .button-inner {
position: relative;
width: 328px;
height: 60px;
border-radius: 26px;
color: white;
font-size: 20px;
font-weight: 500;
font-family: 'Apis-Medium';
background: linear-gradient(180deg, #43434D 0%, #4C4C52 0.01%, #2C2F38 100%);
box-shadow: 0px 6px 16px rgba(0, 0, 0, 0.4), inset 0px 1px 0px #D1D7DB, inset 0px 4px 8px rgba(255, 255, 255, 0.05), inset 0px -6px 15px #2A2A2E;
line-height: 38px;
}
.registration-shockwave3-isi .button-inner:hover {
transform: translate(-1px, -1px);
}
.registration-shockwave3-isi .button-inner:active {
transform: translate(1px, 1px);
transition: transform 34ms;
}
.registration-shockwave3-isi .button-inner::before {
width: 328px;
height: 60px;
border-radius: 26px;
content: 'CONTINUE';
position: absolute;
color: white;
top: 0;
left: 0;
background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, var(--npi-gradient-light) 0.01%, var(--npi-primary) 100%);
box-shadow: inset 0px 1px 0px var(--npi-dropshadow), inset 0px 4px 8px rgba(255, 255, 255, 0.05), inset 0px -6px 15px var(--npi-primary);
opacity: var(--before-opacity, 0);
transition: opacity 0.25s ease;
line-height: 54px;
z-index: 1;
}
.registration-shockwave3-isi .disabled-div {
pointer-events: none;
}
.registration-shockwave3-isi #scroll-message {
position: fixed;
bottom: 81px;
left: 0;
width: 100%;
padding: 10px;
text-align: center;
display: none;
animation: flash 1.5s infinite;
font-family: 'Apis-Medium';
font-size: 16px;
color: white;
text-shadow: 0 0 8px black;
}
.registration-shockwave3-isi .c2::after {
content: '2+';
vertical-align: super;
font-size: 9px;
}
.registration-shockwave3-isi a {
color: blue;
}