@import url('https://fonts.googleapis.com/css?family=Roboto');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@600&display=swap');
body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    background-size: cover;
     -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-repeat: no-repeat;
  background-color: #d1d8e0;
}

label {
    font-weight: bold;
    width: 100px;
    font-size: 14px;
}

.box {
    border:#666666 solid 1px;
    font-size: 14px;
    font-family: 'Roboto', sans-serif;

    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    box-sizing: border-box;
}
.loginframe {
    background-color: #ffffff; /*#E5E7E9;*/
    margin: auto;
    width: 30vw;
    height: 450px;
    margin-top: 40px;
}

#user_data{
    width: 80%;
    margin: auto;
}


.fimage{
    /*margin-top: 50px;*/
}
.fimage img{
    width: 100%;
    height: 100%;
}
#submit1{
    background-color: #F9C31B;
    color: white;
    font-family: 'Roboto', sans-serif;
    font-size: 18px;
    font-weight: 700;
    padding: 15px 45px;
    border:  0 none;
    cursor: pointer;
    /*float: right;*/
    
    border-radius: 25px;
    margin-top: 30px;
}

/*.container #submit1{
    left: 50%;
    transform: translate(-50%,-50%);
}*/

#submit1:hover {
    background-color: #FF0000;
}

#app_title {
    color: dodgerblue;
    display: block;
    float: left;
    text-align: left;
}

#app_title p{
    margin: 0 0 20px 0;
    color: #4b4b4b;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
}

#app_title label{
    font-family: 'Open Sans', sans-serif;
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 5px;
}

#user_input{
/*    position: absolute;
    bottom: 0;*/
    display: block;
}

#imgdiv{
    display: block;
    text-align: center;
}

#com_title {
    padding-top: 5px;
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    color: #ffa500;
}

#copy_text {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: bold;
    color: #AAB7B8;
}

.container {
    /*padding: 16px;*/
    text-align: center;
}

.parent{
    display: flex;
    width: 100%;
    margin: auto;
    height: 500px;

    position: relative;
    -webkit-animation-name: animatebottom;
    -webkit-animation-duration: 4s;
    animation-name: animatebottom;
    animation-duration: 2s;
}

.child{
    flex: 1;
    text-align: center;
    width: 50%;
}


.fdiv{
    text-align: center;
    height: 50px;
    border-top: 1px solid #D8D8D8;
    width: 50%;
    margin: auto;
    margin-top: 20px;

    animation: showCright 0s 2s forwards;
    visibility: hidden;
}

.fdiv p{
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    color: #A4A4A4;
}

@-webkit-keyframes animatebottom {
    from { bottom:-50px; opacity:0 } 
    to { bottom:0px; opacity:1 }
}
@keyframes animatebottom { 
    from{ bottom:-50px; opacity:0 } 
    to{ bottom:0; opacity:1 }
}



@-webkit-keyframes showCright{
    to {visibility: visible;}
}

@keyframes showCright{
    to { visibility: visible; }
}

.umessage{
    display: none;
    color: #FF0000;
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
}

/*.loginframe #infonetlogo{
    margin: 0 auto;
    padding: 10px;
    position: relative; 
}*/

    /*.loginframe img{
        float: right;
    }*/

#com-logo{
    padding-top: 4px;
}