.body-flex{
    display: flex;place-items: center;
    height: 100vh !important;place-content: center;position: relative;
}
.content-container{
    width: auto;padding: 0 1em;align-self: center;
}
.click-button{
    padding: .4em 1em;border: none;
    background: rgb(46, 73, 224);
    margin: 1em 0;font-size: 16px;font-weight: 700;
    color: white;border-radius: 5px;
}
.button-below{
    position: absolute;right: 30px;bottom: 10px;background: none;
    color: rgb(46, 73, 224);border: 2px solid rgb(46, 73, 224);
}
.input-container{
    width: 100%;margin: 2em 0;text-align: center;
}
.form-field{
    width: 90%;padding: 0 0.7em;text-align:center;
}

.input-container>input{
    width: 80%; font-size: 17px;font-weight: 600;
    padding: 0.3em 0.4em;border: 2px solid rgba(50,50,50,1);
    border-radius: 5px;
}
.otp-container>input{
   width: 50px;padding: 0;text-align: center;
   height: 40px;margin: 10px;font-size: 17px;
}
.otp-container>input::-webkit-outer-spin-button,.otp-container>input::-webkit-inner-spin-button{
    -webkit-appearance: none;margin: 0;
}
.caption{
   width: block !important;text-align: center;font-size: 15px;font-weight: 500;
}
input::placeholder{
    color:rgba(50,50,50,0.7)
}
input::-ms-input-placeholder{
    color: rgba(50,50,50,0.7);
}
.success-check{
    font-size: 5em !important;font-weight: 900;
    display: inline-flex;width: 150px;height: 150px;
    background: rgb(74, 224, 139);place-items: center;
    place-content: center;border-radius: 50%;
}
.flex{

    display: flex;flex-wrap: wrap;
}
.side-icon{
    font-size: 2.5em !important;
}
.side-icon-outline{
    border:2px solid gray;width: 48px;height: 48px;
    display: inline-flex !important;place-items: center;place-content: center;
    border-radius: 50%;
}
.header{
    background: rgba(50,50,50,0.7);border: 1px solid white;
    color: white;font-size: 14px;font-weight: 700;
}
.content-head{
    background: rgba(100,100,100,0.2);border: 1px solid white;
    color: white;font-size: 14px; color:black;font-weight: 600;
}
.dashboard--header{
    width: 100%;
}
.middle-col{
    width: 190%;
}
.justify-center{
    justify-content: center;
}
align-center{
    align-items: center;
}


@media all and (min-width:756px){
    .form-field{
        width: 550px;
    }
    .middle-col{
        width: 700px !important;
    }

}
.bottom-afrex{
    position: absolute;bottom: 30px;right: 40px;
    font-weight: 700;
}