body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    margin: 0px;

}

.message-content {
    display: flex;
    flex-direction: column;
    gap: 10px; /* Espacement entre les champs */
}

.message-content input[type="email"],
.message-content input[type="text"] {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
}
.head {
    width: 100%;
    background-color: #CFE3E2;
    ;
}

.all-logo {
    margin-left: 50px;
    margin-right: 50px;
    padding: 10px 0;
    display: flex;
}

.logo {
    display: flex;
}

.logo-img {
    width: 10%;
}

.logo-text {
    margin-left: 10px;
    width: 30px;
    font-size: 13px;
    font-weight: 600;
    line-height: 15px;
    color: #264e96;
}

.logout {
    margin-left: auto;
    margin-top: 8px;
}

.off {
    width: 30px;
}

.menu {
    background-color: #264e96;
    margin-top: 15px;
    margin-left: 50px;
    margin-right: 50px;
    border-radius: 10px;
    color: #202020;
}

.img-home {
    text-align: center;
}

.all-btn {
    margin-left: 20px;
    margin-right: 20px;
    padding-top: 15px;
    display: flex;
}

.text-btn {
    font-size: 15px;
    font-weight: 500;
}

.home {
    width: 30px;
}

.btn-cartes-1,
.btn-transfert-1,
.btn-messages-1,
.btn-parametre-1 {
    margin-left: auto;
}

.btn-home-1 {
    opacity: 60%;
}

.btn-cartes,
.btn-transfert,
.btn-messages,
.btn-parametre {
    margin-left: auto;
    opacity: 60%;
}

.btn-cartes:hover,
.btn-transfert:hover,
.btn-messages:hover,
.btn-parametre:hover,
.btn-home-1:hover,
.btn-transfert-1:hover,
.btn-messages-1:hover,
.btn-parametre-1:hover {
    opacity: 100%;
}

.all-btn a {
    text-decoration: none;
    color: white;
}

.solde-action {
    margin-left: 50px;
    margin-right: 50px;
    margin-top: 20px;
    display: flex;
}

.solde {
    background-color: #264e96;
    width: 100%;
    height: 200px;
    border-radius: 10px;
}

.all-solde {
    margin-left: 30px;
    margin-right: 30px;
}

.solde-titre {
    text-align: center;
    color: white;
    padding-top: 15px;
}

.solde-act {
    padding-top: 10px;
    color: white;
    text-align: center;
    font-size: 50px;
    font-weight: 600;
}

.caisse {
    margin-top: 10px;
    background-color: #FBFF50;
    text-align: center;
    color: #202020;
    font-size: 15px;
}

.action {
    background-color: #FFE6E6;
    margin-left: 20px;
    width: 100%;
    height: 200px;
    border-radius: 10px;
}

.user {
    width: 30px;
}

.profil-notif {
    margin-left: 25px;
    margin-right: 25px;
    margin-top: 15px;
    display: flex;
}

.profil-notif a {
    text-decoration: none;
}

.pro-link,
.notif-link {
    display: flex;
}

.notif {
    margin-left: auto;
}

.name-profil {
    color: black;
    margin-top: 5px;
    margin-left: 4px;
}

.bloquer-images {
    width: 100px;
}

.bloquer-image {
    margin-top: 40px;
}

.bloquer-compte {
    text-align: center;
    margin-top: 50px;
    padding-left: 15px;
    padding-right: 15px;
}

.titre-bloquer {
    font-size: 25px;
    font-weight: 600;
}

.titre-bloquer-1 {
    font-size: 15px;
    font-weight: 500;
    margin-top: 30px;
}

.titre-bloquer-3 {
    font-size: 15px;
    font-weight: 500;
    margin-top: 50px;
    margin-bottom: 30px;
}

.btn-aide {
    background-color: #264e96;
    margin-left: 540px;
    padding: 10px;
    margin-right: 540px;
    text-align: center;
    margin-top: 30px;
    border-radius: 10px;
}

.btn-aide a {
    text-decoration: none;
    color: white;
    font-size: 16px;
    font-weight: 500;
}

.titre-bloquer-2 {
    font-size: 15px;
    font-weight: 400;
    margin-top: 10px;
}

.actions {
    margin-left: 25px;
    margin-right: 25px;
    margin-top: 50px;
    display: flex;
}

.actions a {
    text-decoration: none;
    color: #202020;
}

.alimenter-img {
    text-align: center;
}

.text-alimenter {
    text-align: center;
}

.img-alimenter {
    width: 50px;
}

.epargne {
    margin-left: auto;
}

.transaction-offres {
    margin-left: 50px;
    margin-right: 50px;
    margin-top: 30px;
    display: flex;
}

.transaction {
    background-color: #5d7c99;
    width: 100%;
    border-radius: 10px;
}

.offres {
    background-color: #264e96;
    width: 100%;
    height: 100%;
    margin-left: 30px;
    border-radius: 10px;
}

.titre-transaction {
    font-size: 20px;
    font-weight: 500;
    color: #ffffff;
    text-align: center;
    padding-top: 20px;
}

.transaction-box {
    background-color: white;
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 20px;
    border-radius: 5px;
}

.all-transac {
    margin-left: 15px;
    margin-right: 15px;
    padding-top: 10px;
    padding-bottom: 10px;
    display: flex;
}

.img-transac {
    width: 40px;
}

.nom-motif-transaction {
    margin-left: 15px;
}

.nom-transaction {
    font-size: 15px;
    font-weight: 600;
    color: #1D5871;
}

.motif-transaction {
    font-size: 12px;
    font-weight: 400;
    color: #939393;
    margin-top: 0px;
}

.montant-transaction {
    font-size: 15px;
    font-weight: 600;
    color: #1D5871;
    margin-left: auto;
}

.vide {
    height: 30px;
}

.all-offre {
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 15px;
}

.offre-percent {
    display: flex;
}

.titre-offre {
    color: white;
    font-size: 20px;
    font-weight: 600;
}

.text-offre {
    margin-top: 10px;
    font-size: 25px;
    color: white;
}

.percent-offre {
    font-size: 70px;
    font-weight: 600;
    margin-left: 40px;
    color: #E70C0C;
}

.btn-demande {
    background-color: #082641;
    height: 35px;
    margin-top: 15px;
    margin-left: 20px;
    width: 200px;
    text-align: center;
    border-radius: 10px;
}

.btn-demande:hover {
    background-color: #007aff;
}

.btn-demande a {
    text-decoration: none;
    color: white;
    font-size: 16px;
    font-weight: 600;
    position: relative;
    top: 5px;
}

.footer {
    background-color: #264e96;
    height: 70px;
    margin-top: 40px;
}

.icones-footer {
    margin-left: 500px;
    margin-right: 500px;
    padding-top: 20px;
    display: flex;
}

.img-safe,
.img-connect {
    margin-left: auto;
}

.img-foot {
    width: 30px;
}

.red-part {
    background-color: #C93838;
    margin-left: 50px;
    margin-right: 50px;
    margin-top: 20px;
    border-radius: 10px;
}

.vide-2 {
    height: 5px;
}

.all-back {
    display: flex;
    margin-right: 50px;
    margin-left: 50px;
}

.red-titre {
    text-align: center;
    font-size: 25px;
    font-weight: 600;
    color: white;
    padding-top: 8px;
    margin-left: auto;
}

.back {
    margin-top: 10px;
}

.back-img {
    width: 35px;
}

.all-cartes {
    margin-left: 300px;
    margin-right: 300px;
}

.ajout-cartes {
    background-color: #264e96;
    margin-top: 20px;
    height: 60px;
    margin-left: 250px;
    margin-right: 250px;
    border-radius: 10px;
}

.ajout-transfert {
    background-color: #264e96;
    margin-top: 20px;
    height: 60px;
    margin-left: 250px;
    margin-right: 250px;
    border-radius: 10px;
}

.ajout-cartes a,
.ajout-transfert a {
    text-decoration: none;
}

.ajouter {
    width: 20px;
}

.new-carte {
    text-align: center;
    padding-top: 5px;
}

.aj-carte {
    text-align: center;
    margin-top: -3px;
    font-size: 15px;
    font-weight: 600;
    color: white;
}

.liste-carte {
    background-color: #264e96;
    margin-top: 30px;
    border-radius: 10px;
}

.titre-liste {
    text-align: center;
    padding-top: 15px;
    color: white;
    font-size: 18px;
    font-weight: 400;
}

.carte-exp {
    margin-left: 20px;
    margin-right: 20px;
    display: flex;
    color: white;
}

.exp {
    margin-left: auto;
}

.carte-detail {
    background-color: white;
    height: 40px;
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 20px;
    color: #202020;
}

.num-exp {
    margin-left: 10px;
    margin-right: 10px;
    display: flex;
}

.num,
.date-exp {
    padding-top: 7px;
}

.date-exp {
    margin-left: auto;
}

.ajout-form {
    background-color: #264e96;
    margin-left: 400px;
    margin-right: 400px;
    margin-top: 30px;
    border-radius: 10px;
}

.transfert-form {
    background-color: #264e96;
    margin-left: 400px;
    margin-right: 400px;
    margin-top: 30px;
    border-radius: 10px;
}

.ajout-form-titre {
    text-align: center;
    padding-top: 20px;
    font-size: 20px;
    font-weight: 600;
    color: white;
}

.form-ajout {
    margin-left: 40px;
    margin-right: 40px;
    margin-top: 20px;
    color: white;
}

.numero-carte {
    font-size: 18px;
    font-weight: 500;
}

.nom-carte {
    font-size: 18px;
    font-weight: 500;
    margin-top: 15px;
}

#nom,
#num-compte,
#iban,
#bic,
#domicile,
#montant,
#motif {
    height: 40px;
    border-radius: 5px;
    padding-left: 10px;
    font-family: 'Helvetica';
    margin-top: 10px;
    border: 0px;
    width: -moz-available;
    width: -webkit-fill-available;
}

.error-message {
    color: red;
    font-size: 14px;
    display: block;
    margin-top: 5px;
}

.btn-ajouter {
    margin-left: 100px;
    margin-right: 100px;
}

#ajout {
    height: 40px;
    font-family: 'Poppins';
    border-radius: 5px;
    margin-top: 40px;
    border: 0px;
    width: -moz-available;
    width: -webkit-fill-available;
    background-color: #082641;
    font-size: 18px;
    font-weight: 600;
    color: white;
    cursor: pointer;
}

#ajout:hover {
    background-color: #1b2835;
}

#transferer {
    height: 40px;
    border-radius: 5px;
    font-family: 'Poppins';
    margin-top: 40px;
    border: 0px;
    width: -moz-available;
    width: -webkit-fill-available;
    background-color: #082641;
    font-size: 18px;
    font-weight: 600;
    color: white;
    cursor: pointer;
}

.no-transfert-message {
    color: white;
    text-align: center;
}

.no-transfert-mes {
    text-align: center;
}

#transferer:hover {
    background-color: #4e5e6d;
}

.liste-transfert {
    background-color: #264e96;
    margin-top: 30px;
    border-radius: 10px;
}

.trans-marge {
    margin-left: 40px;
    margin-right: 40px;
}

.titre-liste-transfert {
    text-align: center;
    font-size: 18px;
    font-weight: 600;
    padding-top: 15px;
    color: white;
}

.container {
    margin-top: 30px;
    margin-left: 100px;
    margin-right: 100px;
    text-align: center;
}

.progress {
    padding: 6px;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 6px;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08);
}

:root {
    --green: #4cd964;
    --turquoise: #5ac8fa;
    --blue: #007aff;
    --light-blue: #7DC8E8;
    --purple: #5856d6;
    --red: #ff2d55;
}

.progress-bar3 {
    height: 18px;
    border-radius: 4px;
    background-image:
        linear-gradient(to right,
            var(--green), var(--turquoise), var(--blue),
            var(--light-blue), var(--purple), var(--red));
    transition: 0.4s linear;
    transition-property: width, background-color;
}

.progress-infinite .progress-bar3 {
    width: 100%;
    background-image: linear-gradient(to right, var(--green), var(--turquoise), var(--blue), var(--light-blue), var(--purple), var(--red));
    animation: colorAnimation 1s infinite;
}

@keyframes colorAnimation {
    0% {
        background-image:
            linear-gradient(to right, var(--green), var(--turquoise), var(--blue), var(--light-blue), var(--purple), var(--red));
    }

    20% {
        background-image:
            linear-gradient(to right, var(--turquoise), var(--blue), var(--light-blue), var(--purple), var(--red), var(--green));
    }

    40% {
        background-image:
            linear-gradient(to right, var(--blue), var(--light-blue), var(--purple), var(--red), var(--green), var(--turquoise));
    }

    60% {
        background-image:
            linear-gradient(to right, var(--light-blue), var(--purple), var(--red), var(--green), var(--turquoise), var(--blue));
    }

    100% {
        background-image:
            linear-gradient(to right, var(--purple), var(--red), var(--green), var(--turquoise), var(--blue), var(--light-blue));
    }
}

.text-detail {
    text-align: center;
    margin-top: 20px;
    margin-left: 100px;
    margin-right: 100px;
    color: white;
}

.montant-detail {
    margin-left: 100px;
    font-size: 15px;
    font-weight: 500;
    color: white;
    margin-top: 30px;
}

.dest-detail {
    margin-left: 100px;
    font-size: 15px;
    font-weight: 500;
    color: white;
    margin-top: 10px;
}

.service-client {
    background-color: #30479A;
    margin-top: 30px;
    height: 40px;
    width: 300px;
}

.service-client-1 {
    background-color: #30479A;
    margin-top: 30px;
    margin-left: 400px;
    height: 40px;
    width: 300px;
}

.all-client {
    margin-left: 15px;
    margin-right: 15px;
    padding-top: 5px;
    display: flex;
}

.client {
    width: 30px;
}

.contact-service {
    color: white;
    font-weight: 500;
    margin-left: 20px;
}

.service-client a {
    text-decoration: none;
}

.all-message {
    margin-left: 400px;
    margin-right: 400px;
    margin-top: 30px;
}

.message-content {
    margin-top: 20px;
}

#message {
    height: 100px;
    width: -moz-available;
    width: -webkit-fill-available;
    font-family: 'Poppins';
    padding-left: 10px;
    background-color: #EEEEEE;
    border: solid 1px #333333;
    border-radius: 5px;
}

#send-message {
    margin-top: 15px;
    width: 100px;
    background-color: #264e96;
    height: 35px;
    border: 0px;
    font-family: 'Poppins';
    font-size: 15px;
    font-weight: 600;
    color: white;
    border-radius: 5px;
    cursor: pointer;
}

#send-message:hover {
    background-color: #082641;
}

.text-1 {
    margin-top: 20px;
}

.all-profil {
    margin-left: 500px;
    margin-right: 500px;
    margin-top: 30px;
}

.vu-profil {
    background-color: #264e96;
    text-align: center;
    border-radius: 10px;
}

.profil-icon {
    padding-top: 20px;
}

.vu-img {
    width: 50px;
}

.nom-vu {
    margin-top: 15px;
    font-size: 25px;
    font-weight: 600;
    color: white;
}

.alias-vu {
    margin-top: 5px;
    font-size: 15px;
    font-weight: 400;
    color: white;
}

.mon-profil {
    margin-top: 20px;
    font-size: 25px;
    color: #202020;
    font-weight: 600;
}

.profil-box {
    background-color: #264e96;
    margin-top: 20px;
    border-radius: 10px;
}

.profil-box a {
    text-decoration: none;
}

.edit-alias {
    padding-top: 25px;
    margin-left: 15px;
    margin-right: 15px;
    display: flex;
}

.user-1 {
    width: 40px;
}

.edit-text {
    margin-left: 20px;
    font-size: 20px;
    font-weight: 500;
    margin-top: 5px;
    color: white;
}

.ligne {
    margin-left: 15px;
    margin-right: 15px;
    margin-top: 5px;
    height: 2px;
    background-color: white;
}

.titre-pseudo {
    padding-top: 15px;
    font-size: 20px;
    font-weight: 500;
    color: #ffffff;
}

.form-pseudo {
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 15px;
}

#pseudo {
    height: 35px;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 13px;
    font-weight: 300;
    width: -moz-available;
    width: -webkit-fill-available;
    padding-left: 10px;
    border-radius: 5px;
}

#civil {
    margin-top: 10px;
    height: 35px;
    font-family: 'Poppins';
    font-size: 13px;
    font-weight: 300;
    width: -moz-available;
    width: -webkit-fill-available;
    padding-left: 10px;
    background-color: white;
    border: 0px;
    color: black;
}

.desc-pseudo {
    margin-top: 15px;
    text-align: left;
    font-size: 15px;
    color: white;
}

#modif-pseudo {
    height: 35px;
    font-family: 'Poppins';
    font-size: 15px;
    font-weight: 600;
    width: 170px;
    background-color: #082641;
    color: white;
    border: 0px;
    margin-top: 15px;
    border-radius: 5px;
}

#modif-pseudo:hover {
    background-color: #548cc0;
}

.stamp {
    width: 50px;
}

.pseudo-fin {
    margin-top: 15px;
    color: #ffffff;
}

.civil {
    margin-bottom: 10px;
    font-size: 20px;
    font-weight: 600;
    color: #202020;
}

.avertissement {
    background-color: #16627A;
    margin-top: 15px;
}

.vide-1 {
    height: 15px;
}

.avertissement-text {
    padding: 10px;
    color: white;
    font-size: 15px;
}

.civilite {
    text-align: left;
    margin-top: 25px;
    color: white;
}

.civilite-1 {
    text-align: left;
    margin-top: 10px;
    color: white;
}

.donnees {
    margin-top: 20px;
    font-size: 20px;
    font-weight: 600;
    color: #202020;
}

.input-pass {
    margin-top: 15px;
}

.text-message-1 {
    font-size: 25px;
    font-weight: 600;
}

.all-login {
    margin-left: 400px;
    margin-right: 400px;
    margin-top: 50px;
}

.login-box {
    background-color: #082641;
    text-align: center;
    border-radius: 25px;
}

.sy-logo {
    padding-top: 20px;
    color: white;
}

.Syras {
    width: 30px;
}

.form-login {
    margin-left: 20px;
    margin-right: 20px;
}

#id {
    width: -moz-available;
    width: -webkit-fill-available;
    height: 40px;
    background-color: white;
    border: 0px;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 15px;
    color: black;
    padding-left: 10px;
    border-radius: 5px;
}

#password {
    width: -moz-available;
    width: -webkit-fill-available;
    height: 40px;
    background-color: white;
    border: 0px;
    font-family: 'Poppins';
    font-size: 15px;
    color: black;
    padding-left: 10px;
    margin-top: 30px;
    border-radius: 5px;
}

.forgot {
    margin-top: 15px;
    text-align: left;
}

.register {
    margin-top: 15px;
}

.register a {
    color: white;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
}

.register a:hover {
    color: #105978;
}

.forgot a {
    color: white;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
}

.forgot a:hover {
    color: #105978;
}

.send-login {
    margin-top: 30px;
    margin-left: 100px;
    margin-right: 100px;
}

#connecter {
    width: -moz-available;
    width: -webkit-fill-available;
    height: 40px;
    font-family: 'Poppins';
    font-size: 16px;
    font-weight: 600;
    background-color: #105978;
    border: 0px;
    color: white;
    border-radius: 5px;
    cursor: pointer;
}

#connecter:hover {
    background-color: #22556b;
}

.text-forgot {
    margin-top: 20px;
    font-size: 18px;
    font-weight: 600;
}

.text-forgot-2 {
    margin-top: 20px;
    margin-left: 20px;
    margin-right: 20px;
    font-size: 18px;
    font-weight: 400;
}

.text-forgot-1 {
    margin-top: 20px;
    font-size: 15px;
    font-weight: 400;
    margin-left: 20px;
    margin-right: 20px;
    color: white;
}

.text-forgot-3 {
    margin-top: 20px;
    font-size: 25px;
    font-weight: 600;
    margin-left: 20px;
    margin-right: 20px;
}

.restore {
    background-color: #264e96;
    margin-top: 30px;
    margin-left: 15px;
    margin-right: 15px;
    height: 35px;
    text-align: center;
    border-radius: 10px;
    cursor: pointer;
}

.restore:hover {
    background-color: #264e96;
}

.restore a {
    text-decoration: none;
    color: white;
    font-weight: 500;
    position: relative;
    top: 4px;
}

.text-appro {
    text-align: center;
    margin-top: 10px;
    color: white;
    margin-left: 20px;
    margin-right: 20px;
}

.cadre-code {
    text-align: center;
    background-color: #EDFFDF;
    margin-top: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    margin-left: 50px;
    margin-right: 50px;
}

.cadre-code-1 {
    text-align: center;
    background-color: #FAB6B6;
    margin-top: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    margin-left: 50px;
    margin-right: 50px;
    color: #DE1D1D;
}

.text-a {
    margin-left: 20px;
    margin-right: 20px;
    text-align: center;
    margin-top: 20px;
    color: white;
}

@media only screen and (max-width: 1364px) {
    .all-profil {
        margin-left: 300px;
        margin-right: 300px;
        margin-top: 30px;
    }

    .btn-aide {
        margin-left: 300px;
        margin-right: 300px;
    }
}

@media only screen and (max-width: 1250px) {

    .ajout-cartes,
    .ajout-form,
    .ajout-transfert,
    .all-login,
    .transfert-form,
    .all-message,
    .service-client-1 {
        margin-left: 150px;
        margin-right: 150px;
    }
}

@media only screen and (max-width: 1170px) {
    .text-offre {
        font-size: 20px;
    }

    .icones-footer {
        margin-left: 300px;
        margin-right: 300px;
    }

    .ajout-cartes,
    .ajout-transfert {
        margin-left: 50px;
        margin-right: 50px;
    }


}

@media only screen and (max-width: 990px) {
    .solde-action {
        display: block;
    }

    .action {
        margin-left: 0px;
        margin-top: 30px;
    }

    .profil-notif {
        padding-top: 15px;
    }

    .transaction-offres {
        display: block;
    }

    .offres {
        margin-left: 0px;
        margin-top: 30px;
    }

    .all-offre {
        padding-top: 15px;
    }

    .icones-footer {
        margin-left: 200px;
        margin-right: 200px;
    }

    .all-cartes {
        margin-left: 100px;
        margin-right: 100px;
    }

    .btn-ajouter {
        margin-left: 100px;
        margin-right: 100px;
    }

    .all-profil {
        margin-left: 100px;
        margin-right: 100px;
        margin-top: 30px;
    }

    .send-login {
        margin-left: 40px;
        margin-right: 40px;
    }

    .btn-aide {
        margin-left: 200px;
        margin-right: 200px;
    }
}

@media only screen and (max-width: 721px) {
    .home {
        width: 20px;
    }

    .text-btn {
        font-size: 12px;
    }

    .back-img {
        width: 25px;
    }

    .red-titre {
        font-size: 22px;
        padding-top: 5px;
    }

    .ajout-form,
    .transfert-form,
    .service-client-1,
    .all-login {
        margin-left: 50px;
        margin-right: 50px;
    }

    .trans-marge {
        margin-left: 10px;
        margin-right: 10px;
    }

    .container,
    .text-detail,
    .montant-detail,
    .dest-detail {
        margin-left: 50px;
        margin-right: 50px;
    }

    .montant-detail,
    .dest-detail {
        text-align: center;
    }

    .btn-aide {
        margin-left: 100px;
        margin-right: 100px;
    }

    .logo-img {
        width: 30%;
    }

    .all-login {
        margin-top: 50px;
    }
}

@media only screen and (max-width: 601px) {

    .solde-action,
    .transaction-offres,
    .menu,
    .all-logo,
    .all-cartes,
    .red-part,
    .all-back,
    .all-message,
    .all-login {
        margin-left: 20px;
        margin-right: 20px;
    }



    .logo-img {
        width: 30%;
    }

    .all-login {
        margin-top: 50px;
    }

    .icones-footer {
        margin-left: 80px;
        margin-right: 80px;
    }

    .all-btn {
        margin-left: 10px;
        margin-right: 10px;
    }

    .ajout-form {
        margin-left: 20px;
        margin-right: 20px;
    }

    .form-ajout {
        margin-left: 20px;
        margin-right: 20px;
    }

    .btn-ajouter {
        margin-left: 40px;
        margin-right: 40px;
    }
    
    .transaction-box {
        margin-left: 10px;
        margin-right: 10px;
        padding: 0 10px;
    }
}

@media only screen and (max-width: 431px) {

    .user,
    .logo-img,
    .off {
        width: 25px;
    }

    .logo-text {
        line-height: 12px;
    }

    .home {
        width: 15px;
    }

    .text-btn {
        font-size: 10px;
    }

    .solde-action,
    .transaction-offres,
    .menu,
    .all-logo {
        margin-left: 10px;
        margin-right: 10px;
    }

    .img-alimenter {
        width: 40px;
    }

    .text-alimenter {
        font-size: 12px;
    }

    .btn-ajouter {
        margin-left: 50px;
        margin-right: 50px;
    }

    .transaction-box {
        margin-left: 0px;
        margin-right: 0px;
        padding: 0 10px;
    }

    .all-transac {
        margin-left: 5px;
        margin-right: 5px;
    }

    .nom-motif-transaction {
        margin-left: 5px;
    }

    .container,
    .text-detail,
    .montant-detail,
    .dest-detail,
    .send-login {
        margin-left: 20px;
        margin-right: 20px;
    }

    .all-profil {
        margin-left: 20px;
        margin-right: 20px;
        margin-top: 30px;
    }

    .edit-text {
        margin-left: 20px;
        font-size: 15px;
    }

    .user-1 {
        width: 30px;
    }

    .btn-aide {
        margin-left: 10px;
        margin-right: 10px;
    }

    .logo-img {
        width: 30%;
    }

    .all-login {
        margin-top: 50px;
    }
    
    .transaction-box {
        margin-left: 10px;
        margin-right: 10px;
        padding: 0 10px;
    }
}

@media only screen and (max-width: 391px) {
    .home {
        width: 15px;
    }

    .text-btn {
        font-size: 10px;
    }

    .solde-action,
    .transaction-offres,
    .menu,
    .all-logo,
    .all-cartes,
    .red-part,
    .all-back {
        margin-left: 10px;
        margin-right: 10px;
    }


    .img-alimenter {
        width: 40px;
    }

    .text-alimenter {
        font-size: 12px;
    }

    .all-transac {
        margin-left: 10px;
        margin-right: 10px;
    }

    .nom-motif-transaction {
        margin-left: 5px;
    }

    .transaction-box {
        margin-left: 10px;
        margin-right: 10px;
        padding: 0 10px;
    }

    .text-offre {
        font-size: 17px;
    }

    .trans-marge {
        margin-left: 0px;
        margin-right: 0px;
    }

    .transfert-form,
    .service-client-1 {
        margin-left: 10px;
        margin-right: 10px;
    }
}