footer {
    z-index: 60;
}

.main-content {
    overflow-y: scroll; /* Enable scrolling */
    -ms-overflow-style: none; /* Hide scrollbar for IE and Edge */
    scrollbar-width: none; /* Hide scrollbar for Firefox */
}

.main-content::-webkit-scrollbar {
    display: none; /* Hide scrollbar for Chrome, Safari, and Opera */
}

.gradient-box {
    position: relative;
    box-sizing: border-box;

    background: #1f2c64;
    background-clip: padding-box; /* !importanté */
    border: solid 5px transparent; /* !importanté */
    border-radius: 0.8rem;
}

.gradient-box::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    margin: -1px; /* !importanté */
    border-radius: 8px; /* !importanté */
    background: conic-gradient(from 180deg at 50% 50%, #4e5aea69 37%, #37f4f4 49%, #3342ffdb 70%, #2d3cb8ad 86%, #3e61ec87 99%);
}

.gradient-member {
    position: relative;
    box-sizing: border-box;

    background: linear-gradient(170deg, #e605e2 0%, #1f2c64 99%, #fbc2eb 100%);
    background-clip: padding-box; /* !important */
    border: solid 5px transparent; /* !important */
    border-radius: 0.8rem;
}

.gradient-member::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    margin: -1px; /* !important */
    border-radius: 8px; /* !important */
    background: conic-gradient(
        from 180deg at 50% 50%,
        #be058d 25%,
        #4d023e 50%,
        #3342ff 75%,
        #2d3cb8 90%,
        #3e61ec 100%
    );
}


.gradient-box1 {
    position: relative;
    box-sizing: border-box;

    background: linear-gradient(170deg, #221650 35%, #9B6195 162%);
    background-clip: padding-box; /* !importanté */
    border: solid 0 transparent; /* !importanté */
    border-radius: 0.4rem;
}

.gradient-box1::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    margin: -1px;
    border-radius: 8px;
    background: conic-gradient(from 180deg at 50% 50%, #2d45c700 25%, #366ff6e8 34%, #366ff6b8 44%, #366ff6e8 67%, #366ff600 75%);
}

.grid-cols-4 .gradient-box::before {
    border-radius: 19px !important;
}

.gradient-box2 {
    position: relative;
    box-sizing: border-box;

    background: #1f2c64;
    background-clip: padding-box; /* !importanté */
    border: solid 5px transparent; /* !importanté */
    border-radius: 24px;
}

.gradient-box2::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    margin: -1px; /* !importanté */
    border-radius: 18px; /* !importanté */
    background: conic-gradient(from 180deg at 50% 50%, #4e5aea69 37%, #37f4f4 49%, #3342ffdb 70%, #2d3cb8ad 86%, #3e61ec87 99%);
}

.gradient-box3 {
    position: relative;
    box-sizing: border-box;
    background: radial-gradient(farthest-corner at 50% 51%, #300d7e 46%, #C977D6 220%);
    background-clip: padding-box;
    border: solid 5px transparent;
    border-radius: 0.8rem;
}

.gradient-box3::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    margin: -1px; /* !importanté */
    border-radius: 8px; /* !importanté */
    background: conic-gradient(from 217deg at 50% 50%, #E053FD 21%, #365DF1 49%, #365DF1 57%, #F26AFE 78%, #EE7AFF 99%);
}

.gradient-service {
    background: linear-gradient(to bottom, #00000000 48%, #0000004f 49%);
    position: relative;
}

.gradient-service:hover {
    background: linear-gradient(to bottom, #9A38C7 0%, #0000004f 70%);
}

.gradient-service::before {
    content: '';
    position: absolute;
    /*top: 0;*/
    /*right: 0;*/
    /*bottom: 0;*/
    left: 0;
    /*z-index: -1;*/
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, #313a5b12 0%, #313a5ba1 79%, #313a5b00 100%);
}

.gradient-service:hover::before {
    /*background: conic-gradient(from 345deg at 50% 50%, #4e5aea00 37%, #37f4f4 49%, #3342ff00 70%, #2d3cb800 86%, #3e61ec00 99%);*/
}

.gradient-service-checked {
    background: linear-gradient(to bottom, #9A38C7 0%, #0000004f 70%);
}

.swal2-title {
    font-size: 24px !important;
    font-weight: bold !important;
    color: #ffffff !important;
}

.swal2-icon{
    width: 10rem !important;
    height: 4rem !important;
    border-color: #0000 !important;
}

.swal2-icon.swal2-error{
    width: 5rem !important;
    height: 5rem !important;
    border-color: #f27474 !important;
}

.swal2-icon-error .swal2-html-container{
    display: flex !important;
    font-size: 20px !important;
    font-weight: 600 !important;
}

.swal2-container {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.swal2-html-container {
    font-size: 15px !important;
    color: #d1d5db !important;
    text-align: left !important;
}

.swal2-popup {
    background: rgba(45, 45, 83, 0.75) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 16px !important;
    padding: 20px !important;
}

.swal2-actions button {
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    padding: 10px 20px;
}

.swal2-confirm {
    background: radial-gradient(farthest-corner at 60% 55%, #F69EA3 0%, #E970C4 100%) !important;
    color: white !important;
    border: none !important;
    padding: 5px 20px !important;
}

.swal2-cancel {
    background: radial-gradient(farthest-corner at 73% 78%, #22165000 8%, #E70011 156%) !important;
    color: white !important;
    border: none !important;
    padding: 5px 35px !important;
}

.swal2-confirm:hover {
    background-color: #f3a8c3 !important;
}

.swal2-cancel:hover {
    background: radial-gradient(farthest-corner at 53% 52%, #22165000 -38%, #E70011 200%) !important;
}

.button-active {
    background: linear-gradient(to bottom, #6D49B8 0%, #6F5DFF 100%) !important;
    background-clip: padding-box !important;
    border: solid 5px transparent !important;
}

.button-active::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    z-index: -1 !important;
    margin: -1px !important;
    border-radius: 8px !important;
    background: linear-gradient(to bottom, #7A75FF 0%, #AEA1E6 100%) !important;
}

.button-gradient {
    position: relative;
    box-sizing: border-box;
    background: linear-gradient(to right, #221650 0%, #150d33 100%);
    background-clip: padding-box;
    border: solid 5px transparent;
    border-radius: 0.8rem;
}

.button-gradient:hover {
    /*background: linear-gradient(40deg ,#C977D6 -19%, #221650 33%, #221650 66%, #C977D6 125%);*/
    background: radial-gradient(closest-corner at 62% 64%, #221650 64%, #C977D6 298%);
    background-clip: padding-box;
    border: solid 5px transparent;
    border-radius: 0.8rem;
}

.button-gradient::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    margin: -1px; /* !importanté */
    border-radius: 8px; /* !importanté */
    background: conic-gradient(from 180deg at 50% 50%, #4e5aea00 37%, #37f4f4 49%, #3342ff00 77%, #2d3cb800 86%, #3e61ec00 99%);
    transition: background 1s ease-in-out;
}

.button-gradient:hover::before {
    /*background: conic-gradient(from 345deg at 50% 50%, #4e5aea00 37%, #37f4f4 49%, #3342ff00 70%, #2d3cb800 86%, #3e61ec00 99%);*/
    /*transform: rotate(180deg);*/
    animation: rotateGradient 0.3s forwards;
}

.button-gradient:not(:hover)::before {
    animation: rotateReturn 0.3s forwards;
}

@keyframes rotateGradient {
    0% {
        background: conic-gradient(from 180deg at 50% 50%, #4e5aea00 37%, #37f4f4 49%, #3342ff00 70%, #2d3cb800 86%, #3e61ec00 99%);
    }
    20% {
        background: conic-gradient(from 215deg at 50% 50%, #4e5aea00 37%, #37f4f4 49%, #3342ff00 70%, #2d3cb800 86%, #3e61ec00 99%);
    }
    40% {
        background: conic-gradient(from 250deg at 50% 50%, #4e5aea00 37%, #37f4f4 49%, #3342ff00 70%, #2d3cb800 86%, #3e61ec00 99%);
    }
    60% {
        background: conic-gradient(from 285deg at 50% 50%, #4e5aea00 37%, #37f4f4 49%, #3342ff00 70%, #2d3cb800 86%, #3e61ec00 99%);
    }
    80% {
        background: conic-gradient(from 320deg at 50% 50%, #4e5aea00 37%, #37f4f4 49%, #3342ff00 70%, #2d3cb800 86%, #3e61ec00 99%);
    }
    100% {
        background: conic-gradient(from 350deg at 50% 50%, #4e5aea00 37%, #37f4f4 49%, #3342ff00 70%, #2d3cb800 86%, #3e61ec00 99%);
    }
}

@keyframes rotateReturn {
    0% {
        background: conic-gradient(from 350deg at 50% 50%, #4e5aea00 37%, #37f4f4 49%, #3342ff00 70%, #2d3cb800 86%, #3e61ec00 99%);
    }
    20% {
        background: conic-gradient(from 320deg at 50% 50%, #4e5aea00 37%, #37f4f4 49%, #3342ff00 70%, #2d3cb800 86%, #3e61ec00 99%);
    }
    40% {
        background: conic-gradient(from 285deg at 50% 50%, #4e5aea00 37%, #37f4f4 49%, #3342ff00 70%, #2d3cb800 86%, #3e61ec00 99%);
    }
    60% {
        background: conic-gradient(from 250deg at 50% 50%, #4e5aea00 37%, #37f4f4 49%, #3342ff00 70%, #2d3cb800 86%, #3e61ec00 99%);
    }
    80% {
        background: conic-gradient(from 215deg at 50% 50%, #4e5aea00 37%, #37f4f4 49%, #3342ff00 70%, #2d3cb800 86%, #3e61ec00 99%);
    }
    100% {
        background: conic-gradient(from 180deg at 50% 50%, #4e5aea00 37%, #37f4f4 49%, #3342ff00 70%, #2d3cb800 86%, #3e61ec00 99%);
    }
}


.linear-text-gradient {
    background: linear-gradient(90deg, #E1B1FF -24%, #5A68E899 18%, #E1B1FF 100%);
    /*background: linear-gradient(90deg, #5A68E899 0%, #E1B1FF 100%);*/
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.border-form:focus{
    position: relative;
    box-sizing: border-box;

    background: #1f2c64;
    background-clip: padding-box; /* !importanté */
    border: solid 1px transparent; /* !importanté */
    border-radius: 0.5rem;
}


.border-form:focus::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    margin: -1px;
    border-radius: 8px;
    background: linear-gradient(70deg, #6B1DA5, #BA49DF);
}

.shadow-form:hover {
    box-shadow: 0 0 10px #C977D6D4;
}

.shadow-form1:hover {
    box-shadow: 0 0 10px #C977D6D4;
    background: linear-gradient(to bottom, #9B6195 -30%, #22165099 64%);
}

.btn-theme {
    position: relative;
    box-sizing: border-box;
    background: radial-gradient(farthest-corner at 79% 57%, #221650 35%, #C977D6 170%);
    background-clip: padding-box;
    border: solid 5px transparent;
    border-radius: 0.8rem;
}

.btn-theme:hover {
    /*background: linear-gradient(40deg ,#C977D6 0%, #221650 100%,);*/
    background: radial-gradient(farthest-corner at 76% 79%, #221650 -24%, #C977D6 100%);
    background-clip: padding-box;
    border: solid 5px transparent;
    border-radius: 0.8rem;
}

.btn-theme::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    margin: -1px; /* !importanté */
    border-radius: 8px; /* !importanté */
    background: conic-gradient(from 217deg at 50% 50%, #E053FD 21%, #365DF1 49%, #365DF1 57%, #F26AFE 78%, #EE7AFF 99%);
}

.btn-theme:hover::before {
    /*background: conic-gradient(from 345deg at 50% 50%, #4e5aea00 37%, #37f4f4 49%, #3342ff00 70%, #2d3cb800 86%, #3e61ec00 99%);*/
    /*transform: rotate(180deg);*/
    animation: rotateGradient 0.3s forwards;
}

.btn-theme-2 {
    position: relative;
    box-sizing: border-box;
    background: radial-gradient(farthest-corner at 60% 55%, #F69EA3 0%, #E970C4 100%) !important;
    background-clip: padding-box;
    /*border: solid 5px transparent;*/
    border-radius: 0.8rem;
    box-shadow: 0 0 15px #E970C4 !important;
    transition: box-shadow 1s ease-in-out;
}

.btn-theme-2:hover {
    /*background: linear-gradient(40deg ,#C977D6 0%, #221650 100%,);*/
    background: radial-gradient(farthest-corner at 120% 75%, #e87568 13%, #dd4cea 100%) !important;
    background-clip: padding-box;
    /*border: solid 5px transparent;*/
    border-radius: 0.8rem;
    box-shadow: 0 0 15px #b95296;
}

.btn-theme-2::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    margin: -1px !important;
    border-radius: 8px !important;
    background: conic-gradient(from 217deg at 50% 50%, #E053FD 21%, #365DF1 49%, #365DF1 57%, #F26AFE 78%, #EE7AFF 99%);
    transition: background 1s ease-in-out;
}

.btn-theme-2:hover::before {
    background: conic-gradient(from 350deg at 50% 50%, #E053FD 21%, #365DF1 49%, #365DF1 57%, #F26AFE 78%, #EE7AFF 99%);
}

.btn-card {
    position: relative;
    box-sizing: border-box;
    background: radial-gradient(farthest-corner at 70% 69%, #362689 28%, #C977D6 160%);
    background-clip: padding-box;
    border: solid 5px transparent;
    border-radius: 0.8rem;
    /*transition: background 1s ease-in-out;*/
    /*transition: background 2s;*/
}

.btn-card:hover {
    /*background: linear-gradient(40deg ,#C977D6 0%, #221650 100%,);*/
    /*background: radial-gradient(farthest-corner at 76% 79%, #362689 -24%, #C977D6 100%);*/
    background-clip: padding-box !important;
    border: solid 5px transparent;
    border-radius: 0.8rem;
    animation: gradient-shift 0.2s ease-in-out forwards;
}

.btn-card:not(:hover) {
    background-clip: padding-box !important;
    animation: gradient-return 0.2s ease-in-out forwards;
}

@keyframes gradient-shift {
    0% {
        background: radial-gradient(farthest-corner at 70% 69%, #362689 28%, #C977D6 160%);
    }
    20% {
        background: radial-gradient(farthest-corner at 71% 71%, #362689 18%, #C977D6 148%);
    }
    40% {
        background: radial-gradient(farthest-corner at 72% 73%, #362689 8%, #C977D6 136%);
    }
    60% {
        background: radial-gradient(farthest-corner at 73% 75%, #362689 -2%, #C977D6 124%);
    }
    80% {
        background: radial-gradient(farthest-corner at 75% 77%, #362689 -16%, #C977D6 112%);
    }
    100% {
        background: radial-gradient(farthest-corner at 76% 79%, #362689 -24%, #C977D6 100%);
    }
}

@keyframes gradient-return {
    0% {
        background: radial-gradient(farthest-corner at 76% 79%, #362689 -24%, #C977D6 100%);
    }
    20% {
        background: radial-gradient(farthest-corner at 75% 77%, #362689 -16%, #C977D6 112%);
    }
    40% {
        background: radial-gradient(farthest-corner at 73% 75%, #362689 -2%, #C977D6 124%);
    }
    60% {
        background: radial-gradient(farthest-corner at 72% 73%, #362689 8%, #C977D6 136%);
    }
    80% {
        background: radial-gradient(farthest-corner at 71% 71%, #362689 18%, #C977D6 148%);
    }
    100% {
        background: radial-gradient(farthest-corner at 70% 69%, #362689 28%, #C977D6 160%);
    }
}

.btn-card::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    margin: -1px; /* !importanté */
    border-radius: 9px; /* !importanté */
    background: conic-gradient(from 303deg at 50% 50%, #EA5EFF 18%, #A536F1 49%, #A536F1 57%, #F26AFE 78%, #EE7AFE 100%);
    transition: background 1s ease-in-out;
}

.btn-card:hover::before {
    /*background: conic-gradient(from 345deg at 50% 50%, #4e5aea00 37%, #37f4f4 49%, #3342ff00 70%, #2d3cb800 86%, #3e61ec00 99%);*/
    /*transform: rotate(180deg);*/
    /*animation: rotateGradient 0.3s forwards;*/
}

.bg-tabs {
    background: radial-gradient(farthest-corner at 50% 108%, #258B8B -14%, #021F90 90%);
}
.caveat-regular {
  font-family: "Caveat", cursive;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.status-success {
    background: linear-gradient(142deg, rgba(49, 196, 141, 0.30) 19.63%, rgba(222, 247, 236, 0.30) 83.01%);
    box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(30px);
    border-radius: 0.5rem;
    color: #30cc93;
}

.status-refund {
    border-radius: 0.5rem;
    color: #b3b8c1;
    background: linear-gradient(142deg, rgba(156, 163, 175, 0.30) 19.63%, rgba(243, 244, 246, 0.30) 83.01%);
    box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(30px);
}

.status-failed {
    border-radius: 0.5rem;
    color: #e91616;
    background: linear-gradient(142deg, rgba(249, 128, 128, 0.30) 19.63%, rgba(253, 232, 232, 0.30) 83.01%);
    box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(30px);
}

.status-expired {
    border-radius: 0.5rem;
    color: #eaa505;
    background: linear-gradient(142deg, rgba(227, 160, 8, 0.30) 19.63%, rgba(253, 246, 178, 0.30) 83.01%);
    box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(30px);
}

.status-unpaid {
    border-radius: 0.5rem;
    color: #048bf8;
    background: linear-gradient(142deg, rgba(9, 84, 147, 0.3) 19.63%, rgba(104, 151, 189, 0.3) 83.01%);
    box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(30px);
}

.gradient-info {
    position: relative;
    box-sizing: border-box;
    background: #1b3351;
    background-clip: padding-box; /* !importanté */
    border: solid 5px transparent; /* !importanté */
    border-radius: 0.8rem;
    backdrop-filter: blur(30px);
}

.gradient-info::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -4;
    margin: -1px; /* !importanté */
    border-radius: 8px; /* !importanté */
    background: linear-gradient(
      180deg,
      rgba(27, 51, 81, 0.3) 15.8%,
      rgba(154.99, 97.22, 149.21, 0.3) 92.73%
    );
}

.table-gradient {
    position: relative;
    box-sizing: border-box;
    background: #1f2c64;
    background-clip: padding-box; /* !importanté */
    border: solid 5px transparent; /* !importanté */
    border-radius: 0.8rem;
}

.table-gradient::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    margin: -1px; /* !importanté */
    border-radius: 8px; /* !importanté */
    background: conic-gradient(from 180deg at 50% 50%, #4e5aea69 37%, #37f4f4 49%, #3342ffdb 70%, #2d3cb8ad 86%, #3e61ec87 99%);
}