.container{
    display: flex;
    flex-direction: column;
}
#div-password{
    display: flex;
    flex-direction: column;
    
}
#div-confirm-password{
    display: flex;
    flex-direction: column;
    
}
.material-symbols-outlined {
    direction: rtl;
    user-select: none;
    margin-left: 92%;
    font-variation-settings:
    'FILL' 0,
    'wght' 400,
    'GRAD' 0,
    'opsz' 48;
    cursor: pointer;
    margin-top: -29px;
    margin-right: 3px;
}

.navbar-inverse .container{
    display: block;
}
.magic-img{
    position: absolute;
    top: 30%;
    right: 0;
    margin-top: 0%;
    /* left: 0; */
    height: 45%;
}
.alert{
    margin-bottom: 35px;
    margin-top: -13px;
    padding: 12px;
}

.title{

    margin-top: -2%;
    color: white;
}
.button{
    width: 15%;
    height: 5%;
    border: 1px solid transparent;
    border-radius: 4px;
    margin: 1% 2%;
}
.magic-img{
    margin-top: 0%;
    height: 45%;
}
.recap-verify{
    position: absolute;
}

@media(max-width: 768px) and (min-width: 427px){
    .navbar{
        margin-bottom: 0px;
    }
    .page-header{
        position: relative;
    }
    .col-md-4{
        margin-top: 0;
        width: 55%;
    }
    .img-magic{
        width: 26em;
        position: absolute;
        right: 45px;
        top: 160px;
    }
    .magic-img{
        width: 70% !important;
    }
}
@media(max-width: 1024px) and (min-width: 769px){
    .col-md-4 {
        margin-top: 6.5%;
        margin-left: -1%;
        width: 60%;
        font-size: 2vw;
    }
    .img-magic{
        width: 26em;
        position: absolute;
        right: 45px;
        top: 160px;
    }
    .magic-img{
        width: 70% !important;
    }
}
@media(max-width: 426px){
    .magic-img{
        display: none;
    }
    .col-md-4 {
        margin-top: 6.5%;
    }
}