@font-face {
  font-family: 'Product Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans'), local('OpenSans'), url(https://fonts.gstatic.com/s/productsans/v5/HYvgU2fE2nRJvZ5JFAumwegdm0LZdjqr5-oayXSOefg.woff2) format('woff2');
}

body
{
	/*background: rgb(41,208,226);
	background: linear-gradient(180deg, rgba(41,208,226,1) 0%, rgba(0,114,187,1) 100%);*/
	background: #f5f5f5;
	font-family: Product Sans;
}

.loginbox {
    margin: auto;
    width: 30%;
    text-align: center;
    background: #FFF;
    padding: 120px 20px;
    border-radius: 10px;
    /*box-shadow: 0px 2px 10px rgb(0 0 0 / 50%);*/
	box-shadow: 0px 5px 5px rgb(0 0 0 / 7%);
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.loginbox .text1 {
    padding: 15px 10px;
    border: 0;
    background: #fff;
    margin: 5px;
    outline: none;
    border-radius: 4px;
    border: 1px solid #CCC;
    width: 60%;
    color: #6b6b6b;
}

.loginbox .login {
    background: #0986c3;
    padding: 10px;
    width: 60%;
    border: 0;
    border-radius: 4px;
    color: FFF;
    font-weight: bold;
    border-bottom: 3px solid #004f80;
	margin: 20px auto 0;
}

.loginbox .title {
    width: 60%;
    text-align: left;
    margin: auto;
    font-size: 25px;
}

.loginbox .stitle {
    width: 60%;
    font-size: 10px;
    text-align: left;
    margin: 0px auto 20px;
    color: #9c9c9c;
}

.separator {
    display: flex;
    align-items: center;
    text-align: center;
	color: #CCC;
}
.separator::before, .separator::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid #CCC;
	position: relative;
    top: 2px;
}
.separator::before {
    margin-right: .25em;
}
.separator::after {
    margin-left: .25em;
}