/* #####################################################################
   #
   #   Project       : Modal Login with jQuery Effects
   #   Author        : Rodrigo Amarante (rodrigockamarante)
   #   Version       : 1.0
   #   Created       : 07/28/2015
   #   Last Change   : 08/02/2015
   #
   ##################################################################### */

.login-cover {
	background-color:rgba(0,0,0,.6);
	background-image:url(/images/spin.svg);
	background-repeat:no-repeat;
	background-position:center center;
	position:fixed;
	height:100%;
	width:100%;
	z-index:9999;
}
.modal-footer.login-box{
	justify-content:space-between!important;
}
#tenKey{
	position:fixed;
	background-color:white;
	z-index:5000;
	border:1px solid #666;
	top:50%;
	left:50%;
	-webkit-transform:translate(-50%,-50%);
	transform:translate(-50%,-50%);
	width:318px;
	border-radius:6px;
/* 	box-shadow:5px 5px 12px; */
}
#pinInput{
	width:100%;
	height:100px;
	padding:20px;
	text-align:center;
	border:none;
	border-radius:6px;
	font-size:2em;
}
/* 
.background {
	height:140px;
	background-image:url('../images/bizio_logo.svg');
	background-repeat:no-repeat;
	background-position:center center;
	margin-left:auto;
	margin-right:auto;
}
 */
@import url(https://fonts.googleapis.com/css?family=Roboto);

* {
    font-family: 'Roboto', sans-serif;
}
.check-ok{
	background-image:url('/img/si-glyph-checked.svg');
	margin:6px auto;
	width:16px;
	height:16px;
	background-position:center;
	background-repeat:no-repeat;
}
.arrow-right{
	background-image:url('/img/si-glyph-arrow-right.svg');
	margin:6px auto;
	background-position:center;
	background-repeat:no-repeat;
	width:16px;
	height:16px;
}
.error-remove{
	background-image:url('/img/si-glyph-remove.svg');
	margin:6px auto;
	width:16px;
	height:16px;
	background-position:center;
	background-repeat:no-repeat;
}
html,body {
	margin:0;
	padding:0;
	height:100%;
}

.vert-align {
	vertical-align:middle;
	display:table-cell;
}

.vert-wrap{
	width:100%;
	height:100%;
	display:table;
}

#login-modal .modal-dialog {
		vertical-align:middle;
		display:table-cell;
    width: 350px;
}

#login-modal input[type=email], input[type=password] {
	margin-top: 0px;
}

#div-login-msg,
#div-lost-msg,
#div-register-msg {
    border: 1px solid #dadfe1;
    height: 30px;
    line-height: 28px;
    transition: all ease-in-out 500ms;
}

#div-login-msg.success,
#div-lost-msg.success,
#div-register-msg.success {
    border: 1px solid #68c3a3;
    background-color: #c8f7c5;
}

#div-login-msg.info,
#div-lost-msg.info,
#div-register-msg.info {
    border:1px solid #5cd7ff;
    background-color:#c6f1ff;
}
#pinInput.success{
    background-color: #c8f7c5;
}
#pinInput.info{
    background-color:#c6f1ff;
}
#pinInput.error{
    background-color: #ffcad1;
}
#div-login-msg.error,
#div-lost-msg.error,
#div-register-msg.error {
    border: 1px solid #eb575b;
    background-color: #ffcad1;
}

#icon-login-msg,
#icon-lost-msg,
#icon-register-msg {
    width: 30px;
    height:28px;
    float: left;
    line-height: 28px;
    text-align: center;
    background-color: #dadfe1;
    margin-right: 5px;
    transition: all ease-in-out 500ms;
}
#icon-login-msg.success,
#icon-lost-msg.success,
#icon-register-msg.success {
    background-color: #68c3a3 !important;
}

#icon-login-msg.error,
#icon-lost-msg.error,
#icon-register-msg.error {
    background-color: #eb575b !important;
}

#img_logo {
    max-height: 100px;
    max-width: 100px;
}

/* #########################################
   #    override the bootstrap configs     #
   ######################################### */

.modal-backdrop.in {
    filter: alpha(opacity=50);
    opacity: .8;
}

.modal-content {
		margin:0 auto;
		width:350px;
    background-color: #ececec;
    border: 1px solid #bdc3c7;
    border-radius: 0px;
    outline: 0;
}

.modal-header {
    min-height: 16.43px;
    padding: 15px 15px 15px 15px;
    border-bottom: 0px;
}

.modal-body {
    position: relative;
    padding: 5px 15px 5px 15px;
}

.modal-footer {
    padding: 15px 15px 15px 15px;
    text-align: left;
    border-top: 0px;
}

.checkbox {
    margin-bottom: 0px;
}

.btn {
    border-radius: 0px;
}

.btn:focus,
.btn:active:focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn.active.focus {
    outline: none;
}

.btn-lg, .btn-group-lg>.btn {
    border-radius: 0px;
}

.btn-link {
    padding: 5px 10px 0px 0px;
    color: #95a5a6;
}

.btn-link:hover, .btn-link:focus {
    color: #2c3e50;
    text-decoration: none;
}

.glyphicon {
    top: 0px;
}

.form-control {
  border-radius: 0px;
}