.staticrypt-hr { margin-top: 20px; margin-bottom: 20px; border: 0; border-top: 1px solid #eee; } .staticrypt-page { width: 360px; padding: 8% 0 0; margin: auto; box-sizing: border-box; } .staticrypt-form { position: relative; z-index: 1; background: #ffffff; max-width: 360px; margin: 0 auto 100px; padding: 45px; text-align: center; box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24); } .staticrypt-form input[type="password"], input[type="text"] { background: inherit; border: 0; box-sizing: border-box; /* This ensures padding is included in the total width */ font-size: 14px; outline: 0; padding: 15px 30px 15px 15px; /* Adjust the padding to ensure there is space for the icon */ width: 100%; } .staticrypt-password-container { position: relative; outline: 0; background: #f2f2f2; width: 100%; border: 0; margin: 0 0 15px; box-sizing: border-box; } .staticrypt-toggle-password-visibility { cursor: pointer; height: 20px; opacity: 60%; padding: 13px; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 20px; } .staticrypt-form .staticrypt-decrypt-button { text-transform: uppercase; outline: 0; background: #4CAF50; width: 100%; border: 0; padding: 15px; color: #ffffff; font-size: 14px; cursor: pointer; } .staticrypt-form .staticrypt-decrypt-button:hover, .staticrypt-form .staticrypt-decrypt-button:active, .staticrypt-form .staticrypt-decrypt-button:focus { background: #4CAF50; filter: brightness(92%); } .staticrypt-html { height: 100%; } .staticrypt-body { height: 100%; margin: 0; } .staticrypt-content { height: 100%; margin-bottom: 1em; background: #76B852; font-family: "Arial", sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .staticrypt-instructions { margin-top: -1em; margin-bottom: 1em; } .staticrypt-title { font-size: 1.5em; } label.staticrypt-remember { display: flex; align-items: center; margin-bottom: 1em; } .staticrypt-remember input[type="checkbox"] { transform: scale(1.5); margin-right: 1em; } .hidden { display: none !important; } .staticrypt-spinner-container { height: 100%; display: flex; align-items: center; justify-content: center; } .staticrypt-spinner { display: inline-block; width: 2rem; height: 2rem; vertical-align: text-bottom; border: 0.25em solid gray; border-right-color: transparent; border-radius: 50%; -webkit-animation: spinner-border 0.75s linear infinite; animation: spinner-border 0.75s linear infinite; animation-duration: 0.75s; animation-timing-function: linear; animation-delay: 0s; animation-iteration-count: infinite; animation-direction: normal; animation-fill-mode: none; animation-play-state: running; animation-name: spinner-border; } @keyframes spinner-border { 100% { transform: rotate(360deg); } } @media screen and (-webkit-min-device-pixel-ratio: 0) { .staticrypt-form input[type="password"], input[type="text"] { font-size: 16px; } }