*,::before,::after{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
   
}
a, li, p{
    outline: none;
    list-style-type: none;
    text-decoration: none;
}
small{
    font-size: 12px;
}

i{
    color: rgb(87, 52, 25);
}
textarea{
    resize: none;
    font-size: 20rem;
}
.card {
    border: none;
}
/*************************************css login************************************/
.loginpage .card .img-content{
    width: 250px;
    margin: 1em auto 0 auto;
}


.loginpage .card .img-content .logo{
    width: 100%;
}

.loginpage .card{
    margin: 0 auto;
    height: auto;
    border: none;
}


.loginpage .card .card-header {
    margin-top: 1em;
    background-color: transparent;
    border: none;

}


.loginpage .card .card-body {
margin-top: 2.5em;
}

.loginpage .card .card-body .inpu{
    list-style: none;
    display: flex;
    flex-direction: row;

}
.loginpage .card .card-body .inpu input{
    margin-right: 0.1rem;
    margin-left: 0.1rem;
    text-align: center;
    height: 5rem;
    /* border: transparent; */
        

    /* padding: 0em 0em 3em 0em; */
}


.loginpage .card .card-body .inpu input:focus{
    box-shadow: 0px 0px 8px #573419;
    border: transparent;

}

/*********************************end css login***********************************/


/**************************************css compte & produit bancaire******************************************************/
.accountpage{
    background-color:rgba(0,0,0,.03);
    min-height: 100vh;
}

.accountpage .card{
    border: none;
    min-width: 100%;
}



.accountpage .card0 .card-header{
    background-color:#fff;
    border: transparent;
    width: 100%;
    z-index: 99;
}

.accountpage .card0 .card-header .d-flex{
    background-color: #573419;
    padding: 1em;
    color: #fff;
    border-radius: 10px;

}

.accountpage .card .card-header .img-content{
    width: 100px;
    margin: 0.5em auto 1em auto;
}

.accountpage .card .img-content .logo{
    width: 100%;
}


.accountpage .card-content {
   
    margin-top: 7em;
    /* padding: 0.5em; */
}


.accountpage .card-content .card1 {
   
    margin: 2em auto 0 auto ;
    background-color:transparent;
}


.accountpage .card-content .card1 .nav .nav-item a {
  color:#573419;
  justify-content: center;
  display: flex;
}


.accountpage .card-content  small  {
    color: rgba(var(--bs-secondary-rgb));
    font-size: 12px;
   
}


.accountpage .card-content .card3 .nav-link .logoicone{
    max-width: 60px;
}

/**********************************css end compte********************************/

/***********************************css depot***********************************/




.depot .card{
    margin: 0 auto;
    height: auto;
    /* border: none;     */
}


.depot .card .card-header .img-content{
    width: 100px;
    margin: 0.5em auto 2.5em auto;
}

.depot .card .img-content .logo{
    width: 100%;
}


.depot .card .card-header {
    margin-top: 1em;
    background-color: transparent;
    border: none;

}

.depot .card .card-body {
margin-top: 7em;
}

.depot .card .card-body .inpu{
    list-style: none;
    display: flex;
    flex-direction: row;

}

.depot .card .card-body .input-group{
    /* background-color:rgb(87, 52, 25) ; */
    /* border: 1px solid  transparent; */
    border-bottom: 1px solid rgb(87, 52, 25);
}

.depot .card .card-body .input-group span{
    color: rgb(87, 52, 25);
}


.depot .card .card-body  .btnsend{
    text-align: center;
    color: #fff;
    background-color: rgb(87, 52, 25);
    width: 100%;
    padding: 1em;
}



.depot .card .card-body .inpu input{
    margin-right: 0.1rem;
    margin-left: 0.1rem;
    /* height: 5rem; */
    padding: 1em;

    /* padding: 0em 0em 3em 0em; */
}


.demanderecharge .card  .btnsend{
    text-align: center;
    color: #fff;
    background-color: rgb(87, 52, 25);
    width: 100%;
    padding: 1em;
    margin-bottom: 1em;
}



.demanderecharge .card  .btnsendA{
    text-align: center;
    color: #fff;
    background-color: rgb(204, 133, 2);
    width: 100%;
    padding: 1em;
}


/*************************************css end depot**********************************************/

/**********************************************css wallet addwallet retrait****************************************************/


.wallet .card{
    margin: 0 auto;
    height: auto;
    border: none;
}


.wallet .card .card-header {
    margin-top: 1em;
    background-color: transparent;
    border: none;

}

.wallet .card .card-body {
/* margin-top: 7em; */
}

.wallet .card .card-body .inpu{
    list-style: none;
    display: flex;
    flex-direction: row;

}


.wallet .card .card-body .inpu img{
    max-width: 40px;
}

.wallet .card .card-body .input-group{
    /* background-color:rgb(87, 52, 25) ; */
    /* border: 1px solid  transparent; */
    border-bottom: 1px solid rgb(87, 52, 25);
}

.wallet .card .card-body .input-group span{
    color: rgb(87, 52, 25);
}


.wallet .card .card-body  .btnsend{
    text-align: center;
    color: #fff;
    background-color: rgb(87, 52, 25);
    width: 100%;
    padding: 1em;
}



.wallet .card .card-body .inpu input{
    margin-right: 0.1rem;
    margin-left: 0.1rem;
    /* height: 5rem; */
    padding: 1em;

    /* padding: 0em 0em 3em 0em; */
}

/**********************************************end css wallet****************************************************/

/*********************************************addcredit & reclamation*******************************************************/


.addcredit .card{
    margin: 0 auto;
    height: auto;
    border: none;
}


.addcredit .card .card-header {
    /* margin-top: 1em; */
    background-color: transparent;
    border: none;

}

.addcredit .card .card-body {
/* margin-top: 7em; */
}

.addcredit .card .card-body .inpu{
    list-style: none;
    display: flex;
    flex-direction: row;

}


.addcredit .card .card-body .input-form{
    /* background-color:rgb(87, 52, 25) ; */
    /* border: 1px solid  transparent; */
    border-bottom: 1px solid rgb(87, 52, 25);
}

.addcredit .card .card-body .input-group span,
.addcredit .card .card-body .input-form label{
    color: rgb(87, 52, 25);
}


.addcredit .card .card-body  .btnsend{
    text-align: center;
    color: #fff;
    background-color: rgb(87, 52, 25);
    width: 100%;
    padding: 1em;
}



.addcredit .card .card-body .input-form input{
    margin-right: 0.1rem;
    margin-left: 0.1rem;
    /* height: 5rem; */ 

    /* padding: 0em 0em 3em 0em; */
}
/*********************************************end addcredit*******************************************************/

/************************************************css user**************************************************/

.user{
    background-color:rgba(0,0,0,.03);
    min-height: 100vh;
}

.user .card{
    border: none;
    min-width: 100%;
}



.user .card0 .card-header{
    background-color:#fff;
    border: transparent;
    width: 100%;
    z-index: 99;
}
.user .card .card-header .img-content{
    width: 100px;
    margin: 0.5em auto 2.5em auto;
}

.user .card .img-content .logo{
    width: 100%;
}


.user .card-content {
   
    margin-top: 3em;
    /* padding: 0.5em; */
}


.user .card-content .card1 {
    margin: 0em auto 2em 0em ;
    background-color:#573419;
    color: #fff;
    text-align: center;
}


.user .card-content .card1 .nav .nav-item a {
  color:rgb(87, 52, 25);
  justify-content: center;
  display: flex;
}


.user .card-content  small  {
    color: rgba(var(--bs-secondary-rgb));
    font-size: 12px;
   
}


.user .card-content .card3 .nav-link .logoicone{
    max-width: 60px;
}


/************************************************end css user**************************************************/

/*******************************************loader***************************************************/

.load{
    position: absolute;
    background-color: rgba(0, 0, 0, .4);
    width: 100%;
    height: 100vh;
    z-index: 100;
    display: flex;
    justify-items: center;
    align-items: center;
    margin: auto;
    
}
.contload{
    background-color: #fff;
    width: 200px;
    /* padding: 0.5em; */
    height: 70px;
    display: flex;
    /* justify-items: center; */
    align-items: center;
    justify-content: center;
    margin:0 auto ;
    /* margin:0 auto 7em auto; */
}

.load .loading{
    position: relative;
}

.load .loading::after{
    content: "";
    left: -7%;
    top: -50%;
    position: absolute;
    width: 60px;
    /* padding: 1em; */
    height: 60px;
    border-radius: 50%;
    border: 1px solid transparent;
    border-top: 2px solid #573419;
    border-bottom: 2px solid #573419;
    line-height: 3em;
    text-align: center;
    animation: load 1s infinite  linear  ;
}


.load .loading img{
    max-width: 50px;
}

.demo{
    position: absolute;
    background-color: #573419;
    width: 100%;
    height: 100%;
    z-index: 100;
    display: flex;
    justify-items: center;
    align-items: center;
    margin: auto;
    opacity: 1;
    transition: all 1s ease-out;
}

.demo .demo-content{
    background-color:#fff ;
    border-radius: 50%;
    padding: 1.5em;
    box-shadow: 10px 5px 5px rgb(204, 133, 2),-10px -5px 5px rgb(204, 133, 2);
    display: flex;
    /* justify-items: center; */
    align-items: center;
    justify-content: center;
    margin:0 auto ;
}


.demo .demo-content img{
    max-width: 200px;

}

@keyframes load {
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(360deg);

    }
}


@keyframes rideau {
    
    0%{
        height: 100vh;

    }
    100%{
        height: 30vh;

    }
}