/* boutton */
    .flexBtn{
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 16px;
    }

    .btn{
        padding: 8px 16px;
        color: var(--white);
        text-wrap: nowrap;
        text-decoration: none;
        display: flex;
        justify-content: center;
        align-items: center;
        text-transform: capitalize;
        border: none;
        border-radius: 8px;
        position: relative;
        i{
            color: var(--white);
        }
    }
    
    .btn_back i{
        color: var(--red);
    }

    .btn:hover{
        cursor: pointer;
        scale: 1.02;
    }
    
    .btn:disabled {
        opacity: .5;
        cursor: not-allowed;
    }

    .btn1{
        background: var(--red)
    }

    .btn2, .btn_back{
        background: var(--yellow);
    }

    .btn3{
        background: var(--white);
        border: 1px solid var(--red);
        color: var(--red);
    }
    
    .btn_cancel{
        background: var(--white);
        color: var(--gray);
        border: 1px solid var(--light-gray);
    }
    
    .btn_warning{
        background: var(--yellow);
    }
    
    .btn_success{
        background: var(--green);
    }
    
    .btn_info{
        background: var(--blue);
    }

    /* animation load */
        /* loader img */
            .btn-loader {
                width: 15px !important;
                height: 15px !important;
                border: 2px solid #ffffff90;
                border-top: 2px solid var(--gray);
                border-radius: 50%;
                animation: spin 0.6s linear infinite;
            }
    
            @keyframes spin {
                0% { transform: rotate(0deg); }
                100% { transform: rotate(360deg); }
            }
            
            .img-loading {
                display: flex;
                justify-content: center;
                align-items: center;
                padding: 5px;
            }
        /* loader img */
        
        /* loader btn form ajax */
            .loader-ajax {
              position: relative;
              width: 25px;
              height: 25px;
              border-radius: 10px;
            }
            
            .loader-ajax div {
              width: 8%;
              height: 24%;
              background: var(--white);
              position: absolute;
              left: 48%;
              top: 37%;
              opacity: 0;
              border-radius: 50px;
              box-shadow: 0 0 3px rgba(0,0,0,0.2);
              animation: fade458 1s linear infinite;
            }
            
            @keyframes fade458 {
              from {
                opacity: 1;
              }
            
              to {
                opacity: 0.25;
              }
            }
            
            .loader-ajax .bar1 {
              transform: rotate(0deg) translate(0, -130%);
              animation-delay: 0s;
            }
            
            .loader-ajax .bar2 {
              transform: rotate(30deg) translate(0, -130%);
              animation-delay: -1.1s;
            }
            
            .loader-ajax .bar3 {
              transform: rotate(60deg) translate(0, -130%);
              animation-delay: -1s;
            }
            
            .loader-ajax .bar4 {
              transform: rotate(90deg) translate(0, -130%);
              animation-delay: -0.9s;
            }
            
            .loader-ajax .bar5 {
              transform: rotate(120deg) translate(0, -130%);
              animation-delay: -0.8s;
            }
            
            .loader-ajax .bar6 {
              transform: rotate(150deg) translate(0, -130%);
              animation-delay: -0.7s;
            }
            
            .loader-ajax .bar7 {
              transform: rotate(180deg) translate(0, -130%);
              animation-delay: -0.6s;
            }
            
            .loader-ajax .bar8 {
              transform: rotate(210deg) translate(0, -130%);
              animation-delay: -0.5s;
            }
            
            .loader-ajax .bar9 {
              transform: rotate(240deg) translate(0, -130%);
              animation-delay: -0.4s;
            }
            
            .loader-ajax .bar10 {
              transform: rotate(270deg) translate(0, -130%);
              animation-delay: -0.3s;
            }
            
            .loader-ajax .bar11 {
              transform: rotate(300deg) translate(0, -130%);
              animation-delay: -0.2s;
            }
            
            .loader-ajax .bar12 {
              transform: rotate(330deg) translate(0, -130%);
              animation-delay: -0.1s;
            }
        /* loader btn form ajax */
    /* animation load
/* boutton */

/* responsive */
    /* bouton */
        @media screen and (max-width: 650px) {
            .flexBtn .btn{
                padding: 6px 14px;
                font-size: 15px;
            }
        }
    /* bouton */
/* responsive */