@font-face {
  font-family: 'Exo-2';
  src: url('exo-2/Exo2-Regular.otf') format('opentype');
}

@font-face {
    font-family: Roboto;
    src: url('roboto/Roboto-Thin.ttf');
    font-weight: 100;
}
@font-face {
    font-family: Roboto;
    src: url('roboto/Roboto-Light.ttf');
    font-weight: 300;
}
@font-face {
    font-family: Roboto;
    src: url('roboto/Roboto-Regular.ttf');
    font-weight: 400;
}
@font-face {
    font-family: Roboto;
    src: url('roboto/Roboto-Bold.ttf');
    font-weight: 500;
}
@font-face {
    font-family: Roboto;
    src: url('roboto/Roboto-Black.ttf');
    font-weight: 900;
}

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0px 1000px white inset;
  background: white !important;
  outline: none;
}

body#bstok-sso {
	display:flex;
	padding: 0px;
 	margin: 0px;
	height: 100%;
}

#bstok-sso input:focus {
    outline: none;
}

#bstok-sso input::selection {
    background: #00a2dc;
    color: #fff;
    padding: 5px;
}

#bstok-sso .left-container {
	width:45%;
	display:flex;
	justify-content: center;
	min-width: 500px;
}

#bstok-sso .right-container {
	width:55%;
	-webkit-box-shadow: inset 37px 0px 37px -37px rgba(0,0,0,0.24);
	-moz-box-shadow: inset 37px 0px 37px -37px rgba(0,0,0,0.24);
	box-shadow: inset 37px 0px 37px -37px rgba(0,0,0,0.24);
	position: relative;
	background: url("/serviceregistry/images/background2.jpg");
}

#bstok-sso .shadow {
	-webkit-box-shadow: inset 37px 0px 37px -37px rgba(0,0,0,0.24);
	-moz-box-shadow: inset 37px 0px 37px -37px rgba(0,0,0,0.24);
	box-shadow: inset 37px 0px 37px -37px rgba(0,0,0,0.24);
	position: absolute;
	width: 100%;
	height: 100%;
	z-index:1;
}

#bstok-sso .triangle {
	 position: absolute;
	 top: 50%;
	 left: 0px;
	 z-index: 2;
	 width: 0;
	 height: 0;
	 border-top: 40px solid transparent;
	 border-left: 40px solid #fff;
	 border-bottom: 40px solid transparent;
	 margin-top:-40px;
}

#bstok-sso .login-form {
	width:40%;
	font-family: 'Roboto', sans-serif;
}

#bstok-sso .logos {
	margin-top:70px;
	margin-bottom:16vh;
	display: flex;
	align-items:center;
}

#bstok-sso .logos img {
	height: 40px;
	margin-right:73px;
}

#bstok-sso .login-form h2 {
	color: #00a2dc;
	font-weight: 700;
	font-size:40px;
}

#bstok-sso #id_00 {
	display: flex;
	flex-direction: column;
}

#bstok-sso #id_01 {
	margin-top: 45px;
}

#bstok-sso #err_msg {
	border: none;background: transparent;height: 26px;
}

#bstok-sso .login-button {
	 margin-top: 105px;
	 padding: 14px;
	 background: #00a2dc;
	 border-radius: 5px;
	 border: none;
	 color: #fff;
	 font-size:22px;
	 cursor: pointer;
}

#bstok-sso .login-button:hover {
	background:#008fc3;
}

#bstok-sso .login-input, #bstok-sso .password-input {
	 filter: none;
     border: none;
	 border-bottom: 1px solid #bababa;
	 padding: 20px 0px 10px 0px;
}

#bstok-sso .login-input:focus, #bstok-sso .password-input:focus {
	border-bottom: 1px solid #00a2dc;
}