body {
    background: #fffbea;
}

canvas {
    max-width: 120px;
    margin: auto;
}

#id-main-content {
    background-color: #FEF1C7;
    border-radius: 15px;
    font-family: 'Roboto', sans-serif;
    max-width: 85% !important;
    width: 83% !important;
}

.cai-boost-score {
    border-radius: 15px;
    margin-bottom: 20px;
}

.cai-user-name {
    font-size: 40px;
    margin-left: 10px;
}

.cai-badge {
    color: black;
    font-size: 14px;
    margin-left: 10px;
    background-color: #a3b8fe !important;
    text-align: center;
    border: 2px solid black !important;
    border-radius: 10px;
    transform: rotate(-3deg);
    /* ou 10deg, selon le sens voulu */
    display: inline-block;
    position: relative;
    top: -40px;
    width: 7rem;
    left: 135px;
}

.cai-progress {
    /* width: 50%; */
    border: 2px solid black !important;
}

.cai-boost-percent {
    font-size: 20px;
    font-weight: 700;
    width: 35%;
}

.cai-boost-btn {
    background-color: white !important;
    width: fit-content;
    padding: 1rem 2rem 1rem 2rem !important;
    border-radius: 30px !important;
    border: 2px solid black !important;
    box-shadow: 0px 5px black !important;
    font-weight: 600 !important;
    margin-left: 50px;
}

.cai-btn-animation:hover {
    transform: scale(1.02);
    /* box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); */
}

.cai-btn-animation:active {
    transform: scale(0.98);
}

.cai-menu-item {
    display: flex;
    gap: 1rem;
    align-items: center;
    border-radius: 10px;
    padding: 5px;
    font-weight: 500;
    margin-top: 1rem !important;
}

.cai-menu-item:hover {
    background-color: #fde8a6;
    cursor: pointer;
}

#id-menu-boost {
    background-color: #f4940c;
    width: fit-content;
    color: white;
    padding: 0.7rem 1rem 0.8rem 1rem;
}

#id-menu .cai-menu-active span:nth-child(1) {
    background-color: #fde8a6;
    padding: 5px 10px 9px 10px;
    border-radius: 80%;
    /* width: 40px; */
}

#id-menu .cai-menu-active {
    padding: 0 !important;
}

.cai-bg-fde8a6 {
    background-color: #fde8a6 !important;
}

.cai-bg-ff000052 {
    background-color: #ff000052 !important;
}

.cai-bg-ff0000 {
    background-color: #ff0000 !important;
}

.cai-bg-ff666652 {
    background-color: #ff666652 !important;
    ;
}

.cai-bg-ff6666 {
    background-color: #ff6666 !important;
    ;
}

.cai-bg-ff990052 {
    background-color: #ff990052 !important;
    ;
}

.cai-bg-ff9900 {
    background-color: #ff9900 !important;
    ;
}

.cai-bg-a2d20052 {
    background-color: #a2d20052 !important;
    ;
}

.cai-bg-a2d200 {
    background-color: #a2d200 !important;
    ;
}

.cai-bg-4cd13752 {
    background-color: #4cd13752 !important;
    ;
}

.cai-bg-4cd137 {
    background-color: #4cd137 !important;
    ;
}

.cai-bg-d3deff {
    background-color: #d3deff !important;
    ;
}

.cai-bg-ff9ebd {
    background-color: #ff9ebd !important;
    ;
}

.cai-bg-fbcc4e {
    background-color: #fbcc4e !important;
    ;
}

.cai-boost-btn-text {
    margin: 0px 5px;
}

.cai-boost-score-row {
    display: flex !important;
    align-items: center;
}

.cai-title {
    font-size: 40px;
}

.cai-border-15 {
    border-radius: 15px;
}

.cai-ml-auto {
    margin-left: auto !important;
}

.cai-btn {
    background-color: white !important;
    padding: 13px 30px !important;
    border-radius: 30px !important;
    border: 2px solid black !important;
    box-shadow: 0px 5px black !important;
    ;
    font-weight: 600 !important;
    color: black;
}

.cai-align-right {
    text-align: right !important;
}

.cai-btn-filter {
    background-color: white !important;
    padding: 13px 30px !important;
    border-radius: 30px !important;
    border: 2px solid black !important;
    font-weight: 600 !important;
    font-size: 12px;
    cursor: pointer;
}

.cai-btn-filter:hover {
    transform: scale(1.02);
    /* box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); */
}

.cai-border-radius-30 {
    border-radius: 30px !important;
}

.cai-border {
    border: 1px solid black !important;
}

#id-spinner {
    width: 45px;
    height: 45px;
}

.cai-d-none {
    display: none !important;
}

.paginate_button {
    border-radius: 30px !important;
}

.paginate_button:is(.previous) {
    border: 2px solid black !important;
}

.paginate_button:is(.next) {
    border: 2px solid black !important;
}

.main-container {
    padding: 1rem 1rem 0rem 1rem !important;
}

#id-menu {
    padding-left: 0 !important;
    font-size: 14px !important;
}

.cai-layout-container {
    width: 17% !important;
}

.progress,
.progress-stacked {
    --bs-progress-height: 0.6rem !important;
}

.cai-score-logo {
    width: 75%;
}

.sidebar {
    position: sticky;
    top: 4rem;
    z-index: 1000;
    margin-right: 0.4rem;
}

.cai-p-2rem {
    padding: 2rem !important;
}

.cai-pl-2rem {
    padding-left: 2rem !important;
}

.cai-w-70 {
    width: 70% !important;
}

/* swal2 */

.swal2-show {
    background-color: #fef1c7c4 !important;
}

.swal2-x-mark-line-right {
    background-color: #ff3f3f;
}

.swal2-x-mark-line-left {
    background-color: #ff3f3f;
}

.swal2-popup {
    width: max-content !important;
    min-height: fit-content !important;
    ;
    border-radius: 12% !important;
    ;
    font-size: 0.8rem !important;
    ;
}

.swal2-title {
    color: black !important;
}

.swal2-success-line-tip {
    background-color: #4cd137 !important;
}

.swal2-success-line-long {
    background-color: #4cd137 !important;
}

.swal2-success-circular-line-left {
    background-color: unset !important;
}

.swal2-success-circular-line-right {
    background-color: unset !important;
}

.swal2-success-fix {
    background-color: unset !important;
}

/* swal2 */

@media screen and (max-width: 1440px) {
    #nav-tab {
        gap: 11px !important;
    }

    canvas {
        max-width: 100px !important;
        margin: auto;
    }

    .cai-score-card-detail {
        font-size: 11px !important;
    }

    .cai-filter-container {
        gap: 0.5rem !important;
    }

    table {
        font-size: 0.8vw !important;
    }

    .cai-boost-btn {
        padding: 1rem 1.2rem !important;
        margin-left: 10% !important;
    }

    .cai-boost-btn-text {
        font-size: 15px !important;
    }

    .cai-title {
        font-size: 25px;
    }
}

#id-boost-progress-step {
    background-color: #ed2323 !important;
}

.cai-mid-opacity {
    opacity: 0.55;
    pointer-events: none;
}