#SiteNotConfigured { padding: 15px; border-radius: 5px; margin: 15px; } #SiteNotConfigured img { width: 100%; } #container { margin: 0 auto; width: 100%; padding: 1em; position: relative; } #passLabel.caps::after { content:"Caps ON"; color: var(--color-error); margin-left: .5em; } /* #region account creation */ .divider { text-align: center; height: 2em; padding-top: 0.33em; margin: 0.25em 0; } .divider span { background: var(--color-container); padding: 0 0.5em; } .divider::after { content: ""; display: block; width: 100%; border-top: 1px solid var(--color-header-border); margin-top: -.75em; } #btnCreateAccount { background-color: var(--color-text); color: var(--color-text-text); border: 1px solid var(--color-text); width: 100%; } #btnCreateAccount:hover { background-color: transparent; cursor: pointer; color: var(--color-text) !important; } /* #endregion account creation */ /* #region links / copyright */ #links { width: 100%; display: flex; padding: .25em .5em 0 .5em; } #links a { font-size: 1em; text-decoration: none; color: var(--color-accent); width: 25%; } #links a:not(:first-child):not(:last-child) { width: 50%; } #links a:hover { cursor: pointer; color: var(--color-accent); } #copyright { font-size: 1.1em; margin-top: .5em; color: var(--color-accent-text); box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.35); padding: 0 0.25em; background: rgba(0,0,0,0.15); border-radius: 5em; z-index: -1; /* this prevents box-shadow from appearing above login box */ } /* #endregion links / copyright */ #btnForgotPass { left: auto; right: .2em; font-weight: normal; color: var(--color-accent); text-decoration: none; } .arrow_box { position: relative; background: var(--color-container); border: .1em solid var(--color-accent); padding: 0 .5em; margin-top: 1em; border-radius: .25em; color: var(--color-accent); } .arrow_box:after, .arrow_box:before { bottom: 100%; left: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; } .arrow_box:after { border-color: rgba(136, 183, 213, 0); border-bottom-color: var(--color-container); border-width: .55em; margin-left: -.55em; bottom: 98%; /* moving it down to prevent small line from appearing */ } .arrow_box:before { border-color: transparent; border-bottom-color: var(--color-accent); border-width: .65em; margin-left: -.65em; } .arrow_box i { font-size: 1.75em; margin-right: .1em; color: var(--color-error); } h1 { margin-top: 1rem; margin-bottom: 1rem; } #linkReset { /*float: left;*/ text-decoration: underline; margin-top: .75em; } #buttonRow { position: relative; margin-top: .25em; z-index: 1; /* they were showing up above loaderBG for some reason */ } #logoTitle { float: left; } #pageTitle { float: right; } noscript { position: absolute; top: 20%; left: 0; right: 0; margin: auto; text-align: center; z-index: 9999999999999999999; } #noscript { background-color: white; border-radius: 15px; padding: .938em; display: inline-block; } #loginBox { padding: 0 15px 5px 15px; /*.75em; */ flex-basis: auto; height: auto; border-radius: 0.25em; box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.5); flex-grow: 0; max-width: 25em; } #loginBox .ctrl_button { text-decoration: none; } @media screen and (max-width: 500px) { #loginBox { max-width: unset; } } #error { color: red; width:100%; padding:2px; } @media only screen and (max-device-width: 500px) { #container { font-size: 1.25em; } #container h1 { font-size: 3em; } } /* #region reset password */ .reset-password-popup .body ul { padding: 0 2em; } .reset-password-popup .body ul:not(.med-margin-top) { margin-top: 0; } /* #endregion */ .popup .body .logo { background-image: var(--mobile-logo-img); min-height: 5em; background-repeat: no-repeat; background-position: center; background-size: contain; margin-bottom: 0.75em; font-size: 1.25em; } .popup .body .input-wrapper.required > label::after { content: " *"; color: var(--color-error); } /** padding to escape page header (because login page does not contain #menuContentPadder */ .popup-modal.modal { padding-top: 4.5em; } .req { font-weight: bold; color: red; } /* @media only screen and (max-width: 992px) { #submitContainer { flex-direction: column; } #linkReset { width:100%; margin-top: 0; } h1{ font-size:3em; } #btnSubmit { font-size:1.5em; width:100%; } .input-wrapper i { font-size: 2em !important; } .col-center { padding: 0; } } */ /* #region oauth */ .oauth > a { padding: 0.75em 0.5em; border-radius: 0.25em; text-decoration: none; color: white !important; } .oauth > a:hover { font-weight: bold; } .oauth > a[data-type='Google'] { background-color: #de4a39; border-color: #de4a39; } .oauth > a[data-type='Microsoft'] { background-color: #2c75e9; border-color: #2c75e9; } .oauth img { height: 30px; padding: 6px 12px 6px 8px; position: absolute; } /* #endregion */