@import url('https://fonts.googleapis.com/css?family=Roboto:400,500');

body{
    font-family: 'Roboto', sans-serif;
    background-color:#c62828;
}

* { box-sizing:border-box; }
h3{
    color: #007bff;
}
h6{
    color: #919191;
}
.wrapper {
    width: 100%;
    margin: 0 auto;
}

.container-box{
    width: 100%;
    min-height: 100vh;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding: 15px;
}

.box-left-login{
    border-radius: 8px 0px 0px 8px;
    background-color: #fff;
    padding: 85px 45px 25px 45px !important;
    height: 550px !important;
}

.box-right-login{
    padding: 85px 0px 0px 0px !important;
    height: 100% !important;
    background-color: #FFEBEE !important;
    border-radius: 0px 8px 8px 0px;
}

.box {
    width: 900px;
    margin: 4em auto;
    border-radius: 8px;
}

.form-control{
    padding: .7rem .75rem !important;
}



.box .form-group.row{
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.title{
    text-align: center;
    font-weight: bold;
    font-size: 30px;
}

/* active state */
input:focus ~ label, input:valid ~ label 		{
    top:-20px;
    font-size:14px;
    color:#767676 !important;
}

/*SELECT*/
select{
    font-size:18px;
    padding:10px 10px 10px 5px;
    display:block;
    width:100%;
    border:none;
    background: transparent;
    border-bottom:1px solid #767676;
    -webkit-appearance: none;
    color: #767676;
}
select:focus{ outline:none; }

select:focus ~ label, select:valid ~ label{
    top:-20px;
    font-size:14px;
    color:#767676 !important;
}

.select:after {
    border-color: transparent transparent #fff transparent;
    -webkit-appearance: none;
}


/* BOTTOM BARS ================================= */
.bar{ position:relative; display:block; width:100%; }
.bar:before, .bar:after 	{
    content:'';
    height:2px;
    width:0;
    bottom:1px;
    position:absolute;
    background:#767676;
    transition:0.2s ease all;
    -moz-transition:0.2s ease all;
    -webkit-transition:0.2s ease all;
}
.bar:before {
    left:50%;
}
.bar:after {
    right:50%;
}

/* active state */
input:focus ~ .bar:before, input:focus ~ .bar:after {
    width:50%;
}

/* HIGHLIGHTER ================================== */
.highlight {
    position:absolute;
    height:60%;
    width:100px;
    top:25%;
    left:0;
    pointer-events:none;
    opacity:0.5;
}

/* active state */
input:focus ~ .highlight {
    -webkit-animation:inputHighlighter 0.3s ease;
    -moz-animation:inputHighlighter 0.3s ease;
    animation:inputHighlighter 0.3s ease;
}

/* ANIMATIONS ================ */
@-webkit-keyframes inputHighlighter {
    from { background:#767676; }
    to 	{ width:0; background:transparent; }
}
@-moz-keyframes inputHighlighter {
    from { background:#767676; }
    to 	{ width:0; background:transparent; }
}
@keyframes inputHighlighter {
    from { background:#767676; }
    to 	{ width:0; background:transparent; }
}

/*
form{
    padding: 20px;
}
*/

.btn-danger{
    background-color: #c62828 !important;
}

.pd-0{
  padding: 0px !important;  
}

.row .col-lg-{
    padding-right: 15px !important;
    padding-left: 15px !important; 
}