textarea:focus, 
textarea.form-control:focus, 
input.form-control:focus, 
input[type=text]:focus, 
input[type=password]:focus, 
input[type=email]:focus, 
input[type=number]:focus, 
[type=text].form-control:focus, 
[type=password].form-control:focus, 
[type=email].form-control:focus, 
[type=tel].form-control:focus, 
[contenteditable].form-control:focus {
  box-shadow: inset 0 -1px 0 #ddd;
}
header{
    background-color: #e8f2ea
}
header.border-bottom{
    border-bottom: solid 2px #005647!important
}
header p{
    font-size: 36px!important;
    text-transform: capitalize;
    color: #005547;
    margin-bottom: 0
}
.page-section .user-image .bd-image{
    width: 326px;
    height: 400px;
    margin: auto;
    display: block;
    background-image: url(../../static/user-avatar.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 3px;
}
.page-section .user-image .bd-image img{
    margin: auto;
    display: block;
    width: 326px;
    height: 400px;
    border: solid 2px #ccc;
}
.page-section .user-image{
    padding-right: 20px;
    padding-left: 20px;
}
.page-section .user-image label{
    font-size: 20px;
    color: #94003f
}
.user-image input.file-upload{
    height: 40px;
    font-size: 1.05rem;
    border-radius: 5px;
    width: 250px
}
/* .compare-info{
  display: none;
} */
.compare-info p{
    font-size: 32px;
}
.compare-info p.red-text{
    color: #b10043;
    margin-top: 30px
}
.compare-info p span{
    color: #b10043;
    font-weight: bold
}

.compare-score p{
    font-size: 26px;
}
/* .compare-score p span{
    font-weight: bold
} */
.compare-score button.btn{
    font-size: 18px;
    text-transform: uppercase;
    box-shadow: 0px 5px 10px #eee;
    margin-right: 30px;
    padding: 5px 25px;
    height: 40px;
    margin-top: 25px
}
.compare-score button.btn.btn-compare{
    background-color: #005547;
    color: #fff;
}
.compare-score button.btn.btn-cancel{
    background-color: #fff;
    color: #005547;
    box-shadow: 0px 3px 10px #bbb;
    margin-right: 0px;
}
.compare-score button.btn:hover{
    background-color: #417994;
    color: #fff
}
.compare-score button.btn.btn-cancel:hover{
    background-color: #b10043;
}
footer.border-top{
    border-top: solid 3px #005647!important
}
footer p.text-right{
    text-align: right;
    font-size: 20px!important;
}

@media (min-width: 768px) and (max-width: 1199px) {
    .user-image{
        text-align: center
    }
    header p{
        font-size: 26px!important;
        margin-bottom: 20px
    }
    header img{
        margin: auto;
        display: block;
    }
    .page-section .user-image .bd-image,
    .page-section .user-image .bd-image img{
        width: 250px;
        height: 306px
    }
    .user-image input.file-upload{
        width: 200px
    }
    .user-image .mt-4.mb-4{
        margin: 0 0 20px 0!important
    }
    .compare-info img{
        width: 30px
    }
    .compare-info p,
    .compare-score p{
        font-size: 20px
    }
    .compare-info p.red-text{
        margin-top: 10px;
    }
    footer p.text-right{
        text-align: center
    }
}
@media (max-width: 767px)  {
    .user-image{
        text-align: center
    }
    header p{
        font-size: 20px!important;
        margin-bottom: 20px;
        text-align: center
    }
    header img{
        margin: auto;
        display: block;
        width: 170px
    }
    .page-section .user-image .bd-image,
    .page-section .user-image .bd-image img{
        width: 250px;
        height: 306px
    }
    .user-image input.file-upload{
        width: 100%
    }
    .user-image .mt-4.mb-4{
        margin: 0 0 50px 0!important
    }
    .compare-info img{
        width: 40px
    }
    .compare-info p,
    .compare-score p{
        font-size: 26px
    }
    .compare-info p.red-text{
        margin-top: 15px;
    }
    footer p.text-right{
        text-align: center
    }
}
@media (max-width: 462px)  {
    .page-section .user-image label{
        display: none
    }
}