body {
background-color: #ededed
}
.ux, .px {
width: 40%;
}
/* The Label Styling */
/*.input-group label */
.ux label {
position: relative;
top: -54px;
left: 6px;
color: #999;
font-size: 16px;
pointer-events: none;
transition: 0.3s ease all;
}
/* The Animation Trigger */
.ux:focus ~ label, .ux input:not(:placeholder-shown) ~ label {
top: -72px;
left: 10px;
font-size: 12px;
background-color: white;
padding: 0 5px;
color: #0066cc;
font-weight: bold;
}
.px label {
position: relative;
top: -54px;
left: 6px;
color: #999;
font-size: 16px;
pointer-events: none;
transition: 0.3s ease all;
}
/* The Animation Trigger */
.px:focus ~ label, .px input:not(:placeholder-shown) ~ label {
top: -72px;
left: 10px;
font-size: 12px;
background-color: white;
padding: 0 5px;
color: #0066cc;
font-weight: bold;
}
.brandbox
{
float: left;
width: 50%;
background-image: url(/design/logos/rwc-background.png);
height: 100%;
background-size: 165%;
border-radius: 25px 0px 0px 25px;
}
.logo {
height: 11%;
margin: 2%;
}
.uxpxinner
{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100%;
}
.product-name {
color: white;
font-family: Urwdin, sans-serif;
font-weight: 600;
font-size: 300%;
text-align: center;
/* vertical-align: middle; */
padding-top: 30%;
}
.uxpx {
display: inline-block;
width: 50%;
color: #2672ed;
}
.cont {
font-size: 16px;
margin-left: 16px;
margin-top: 16px;
color: #2c62ba;
}
.formboxes
{
background-color: #fff !important;
border-color: #0066cc;
border-style: solid;
border-width: 3px;
border-radius: 6px;
height: 2.5rem;
margin-bottom: 1.625rem;
font-size: 1.1875rem;
width: 100%;
font-family: Urwdin, sans-serif;
}
.centerdiv {
position: absolute;
display: flex;
margin: auto;
font-family: Urwdin, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 60%;
height: 70%;
border-style: solid;
border-width: 2px;
border-color: dbdbdb;
border-radius: 25px;
background-color: white;
/* text-align: center; */
}
.button-section {
text-align: center;
width: 60%;
}
input[type="submit"] {
background-color: #2672ed;
color: white;
text-transform: uppercase;
border-width: 0;
border-radius: 100px;
padding: 1rem 0rem .8rem;
font-family: Urwdin, sans-serif;
font-weight: 700;
line-height: 1.3;
transition: background-color .35s ease-in-out;
width: 110px;
}
input[type="back"] {
background-color: #999999;
color: white;
text-transform: uppercase;
border-width: 0;
border-radius: 100px;
padding: 1rem 2rem .8rem;
font-family: Urwdin, sans-serif;
font-weight: 700;
line-height: 1.3;
transition: background-color .35s ease-in-out;
width: 110px;
}
.formboxes:focus {
border-color: #0066cc;
}
p.auth-text
{
color: #000000;
margin-left: 10%;
margin-right: 10%;
margin-top: -1%;
text-align: center;
}
p.passrules
{
color: #000000;
margin-left: 10%;
margin-right: 10%;
margin-top: -1%;
text-align: left;
}
h1.auth-head {
color: #00000094;
font-size: 175%;
}
img.qr {
height: 40%;
}
.button-box {
text-align: right;
margin: 0 10%;
width: 80%;
}
.mfa-container {
display: flex;
position: relative;
gap: 10px;
justify-content: center;
left: 150px;
}
.mfa-input
{
width: 270px;
height: 55px;
text-align: left;
font-size: 41px;
font-weight: bold;
border: none;
outline: none;
font-family: "Lilex", monospace;
letter-spacing: 22px;
}
.mask
{
display: block;
position: relative;
background-color: #8c8c8c70;
border-color: black;
border-style: solid;
width: 31px;
left: -288px;
border-radius: 7px;
pointer-events: none;
}
.mask.one {
left: -287px;
}
.mask.two {
left: -287px;
}
.mask.three {
left: -287px;
}
.mask.four {
left: -287px;
}
.mask.five {
left: -287px;
}
.mask.six {
left: -287px;
}