.form-control::placeholder {
    font-size: 20px;
    color: #adaeb9;
}
.form-control{
    height: 32px;
    padding: 2px !important;
    font-size: 20px;    
    border-radius: 0px !important;
    background-color: white !important;
    border-top: 0px;
    border-left: 0px;
    border-right: 0px;
    border-bottom: 3px solid #00aeef ;
    text-align: center;
}
#input {
    display: flex;
    flex-direction: column;
    margin: 20px auto;
    width: 280px;
}
#input input {
    width: 90%;
    margin: 0px  auto!important;
}
.form-control:active{
    border-bottom: 3px solid #00aeef !important;
}
.form-control:visited{
    border-bottom: 3px solid #00aeef !important;
}
.form-control:hover{
    border-bottom: 3px solid #00aeef !important;
}
.text-muted{
    font-size: 14px;
    color: #647b99 ;
}
button {
    width: 240px;
    margin: 40px auto 150px;
    font-size: 20px !important;
    background-color: #00aeef !important;
    border: 0px !important;
}
#forFn {
    min-width: 300px !important;
    min-height: 200px !important;
}
#main-con {
    min-width: 300px !important;
    min-height: 200px !important;
}   
@media only screen and (min-width : 320px) and (max-width : 11221939px) {
    body {
        padding: 0px;  
    }
    .navbar {
        margin: 0px 0px 0px !important;
        padding-left: 0px !important;
    }
    .navbar {
        padding: 0px !important;
    }
    button {
        margin: 5px auto 5px;
    }
}
@media only screen and (min-width : 320px) and (max-width : 480px) {
    #main-con {
        height: 50% !important;
    }
    #input {
        margin: 20px auto !important;
    }
}
@media only screen and (max-height : 515px) {
    #input {
        margin-bottom: 0px !important;
    }
    button {
        margin: 0px auto 20px;
    }
}