body, html{ padding: 0; margin: 0; } .button{ display: inline-block; background: green; color: white; padding: 8px 16px; border-radius: 5px; cursor: pointer; } .button:hover{ background: #00c500; } main{ /* background-image: url('../img/sign-in-bg.jpg');*/ /*height: 100vh;*/ /*height: calc(100vh - 121px);*/ height: 100vh; width: 100%; position: relative; display: flex; justify-content: center; align-items: center; } main section{ width: 80%; max-width: 366px; background: #000000b0; padding: 32px; box-sizing: border-box; } .row{ display: flex; position: relative; flex-wrap: wrap; } #g-recaptcha-error{ background: white; width: 100%; } .row a{ color: white; } .row input{ width: 100%; height: 34px; box-sizing: border-box; padding: 0 8px; } .row input:not(.plain){ padding: 0 8px 0 32px; } .row:nth-of-type(n+2){ margin-top: 12px; } .row i{ font-size: 22px; position: absolute; cursor: pointer; user-select: none; -moz-user-select: -moz-none; -khtml-user-select: none; -webkit-user-select: none; -ms-user-select: none; } .row i.ileft{ top: 6px; left: 7px; } .row i.iright{ top: 6px; right: 7px; } #form-sign-in{ /*display: none;*/ width: 100%; } form h1{ font-size: 18px; margin-bottom: 8px; color: white; } #bg{ position: absolute; width: 100%; top: 0; left: 0; z-index: -1; object-fit: cover; object-view-box: inherit; height: 100%; object-position: left; } #sign-in{ border-radius: 0; } .fright{ justify-content: flex-end; } #signin-loader{ text-align: center; } /*.loader-1 { width: 48px; height: 48px; border: 3px solid #FFF; border-radius: 50%; display: inline-block; position: relative; box-sizing: border-box; animation: rotation 1s linear infinite; } .loader-1::after { content: ''; box-sizing: border-box; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 56px; height: 56px; border-radius: 50%; border: 3px solid; border-color: #FF3D00 transparent; } @-webkit-keyframes rotation { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes rotation { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @media only screen and (max-width: 800px) { body main{ height: calc(100vh - 50px); } }*/ .g-recaptcha { transform-origin: left top; -webkit-transform-origin: left top; } .row a{ font-size: 14px; } @media only screen and (max-width: 800px) { main{ /*height: calc(100vh - 109px);*/ } }