<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Round" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Sharp" rel="stylesheet">

.bonus h1 {
    margin-bottom: 30px;
}

.bonus button:focus,
.bonus input:focus,
.bonus select:focus,
.bonus textarea:focus {
    outline: none !important;
}

.bonus .home_container {
    position: relative;
}

.bonus .home_container #loading_frame {
    position: absolute;
    display: none;
    z-index: 9999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    justify-content: center;
    border: 1px solid #61d0c4;
}
.bonus .home_container #loading_frame img {
    width: 70px;
}


.bonus .steps {
    width: 100%;
    height: 40px;
    background: #efefef;
    border-radius: 25px;
    overflow: hidden;
    cursor: default;
}
.bonus .steps .step {
    display: inline-flex;
    float: left;
    align-items: center;
    height: 100%;
    padding: 0 14px;
    font-size: 14px;
    color: #404040;
    text-transform: uppercase;
}
.bonus .steps .step:not(:first-child) {
    border-left: 4px solid #fff;
}
.bonus .steps .step.hidden {
    border: none;
}
.bonus .steps .step.active {
    background: #99d93a;
    color: #fff;
}
.bonus .steps .step span {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    color: #404040;
    font-weight: 600;
    text-align: center;
    line-height: 22px;
    margin-right: 8px;
}

.bonus .step_text {
    width: 100%;
    margin: 10px 0;
    padding: 0 10px;
    text-align: justify;
}


.bonus .home_container .blocks {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 15px;
}
.bonus .home_container .disable {
    z-index: 1;
    opacity: 0.25;
    filter: blur(1px);
    pointer-events: none;
}

@media (max-width: 560px) {
    .bonus .home_container .blocks .block.device { order: 1; }
    .bonus .home_container .blocks .block.appointment { order: 2; }
    .bonus .home_container .blocks .block.infos { order: 3; }
    .bonus .home_container .blocks .block.order { order: 4; }
    .bonus .home_container .blocks .block.advice { order: 5; }
    .bonus .home_container .blocks .block.history { order: 6; }
    .bonus .home_container .blocks .block.photos { order: 7; }
    .bonus .home_container .blocks .block.messages { order: 8; }
    .bonus .home_container .blocks .block.need_help { order: 9; }
}

.bonus .home_container .bonus_modal_container {
    position: fixed;
    z-index: 9999999;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: #404040e3;
}
.bonus .home_container .bonus_modal {
    position: absolute;
    z-index: 2;
    top: 160px;
    left: 20%;
    width: 60%;
    background: #ffffff;
    border-radius: 24px;
    text-align: center;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 12px 28px 0px, rgba(0, 0, 0, 0.1) 0px 2px 4px 0px, rgba(255, 255, 255, 0.05) 0px 0px 0px 1px inset;
    overflow: hidden;
}
.bonus .home_container .bonus_modal .title {
    display: flex;
    height: 50px;
    font-size: 20px;
    color: #61d0c4;
    text-transform: uppercase;
    justify-content: center;
    align-items: center;
    background: #f8f8f8;
}

.bonus .home_container .modal_photo_imei .text {
    font-size: 14px;
    padding: 15px;
}
.bonus .home_container .modal_photo_imei .content {
    padding: 10px 30px 20px 30px;
}
.bonus .home_container .modal_photo_imei .photo {
    display: inline-block;
    width: auto;
    height: 380px;
    margin: 15px;
    border: 1px solid #61d0c4;
    border-radius: 12px;
    overflow: hidden;
}
.bonus .home_container .modal_photo_imei .photo img {
    height: 100%;
}
.bonus .home_container .modal_photo_imei #device_unrepaired {
    font-size: 16px;
    color: #ef9d51;
    text-decoration: underline;
    text-align: center;
    margin: 20px 0 0 0;
    cursor: pointer;
}
.bonus .home_container .modal_validation #back_to_photo_imei {
    position: absolute;
    display: block;
    top: 4px;
    left: 8px;
    font-size: 44px;
    color: #ef9d51;
    cursor: pointer;
}

.bonus .home_container .bonus_modal .choices {
    padding: 40px;
}
.bonus .home_container .bonus_modal .choice {
    margin-bottom: 30px;
    border: 1px solid #ccc;
    border-radius: 10px;
    overflow: hidden;
 }

.bonus .home_container .bonus_modal .choice label {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 15px 20px;
    margin: 0;
    text-align: left;
    font-size: 14px;
    color: #000;
    cursor: pointer;
}
.bonus .home_container .bonus_modal .choice label:hover {
   background: #fbfbfb;
    transition: .5s ease;
}
.bonus .home_container .bonus_modal .choice input {
    position: absolute;
    width: 0;
    height: 0;
}
.bonus .home_container .bonus_modal .choice .radio_container {
    width: 60px;
    padding-left: 10px;
}
.bonus .home_container .bonus_modal .choice_input {
    width: 24px;
    height: 24px;
    border: 1px solid #61d0c4;
    border-radius: 6px;
    background: #fff;
}
.bonus .home_container .bonus_modal input:checked + label .choice_input::before {
    content: '';
    display: block;
    width: 17px;
    height: 17px;
    background: #61d0c4;
    margin: 3px;
    border-radius: 5px;
}
.bonus .home_container .bonus_modal .choice .text_container {
    width: calc(100% - 60px);
}
.bonus .home_container .bonus_modal .visio_rating {
    width: calc(100% - 30px);
    margin: 15px 15px 30px 15px;
    padding: 15px 15px 0 15px;
    border-top: 1px dashed #61d0c4;
}
.bonus .home_container .bonus_modal .visio_duration .vd_title,
.bonus .home_container .bonus_modal .visio_rating .vr_title {
    font-size: 15px;
    text-transform: uppercase;
}
.bonus .home_container .bonus_modal .visio_duration .vd_ranges {
    display: flex;
    padding: 14px 0 0 0;
    justify-content: center;
    gap: 30px;
}
.bonus .home_container .bonus_modal .visio_duration .vd_ranges .vd_range {
    font-size: 16px;
    cursor: pointer;
}
.bonus .home_container .bonus_modal .visio_duration .vd_ranges .vd_range .checkbox {
    position: relative;
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 1px solid #626568;
    border-radius: 4px;
    vertical-align: -5px;
    margin-right: 3px;
}
.bonus .home_container .bonus_modal .visio_duration .vd_ranges .vd_range .checkbox.checked::after {
    content: '';
    position: absolute;
    display: block;
    top: 2px;
    left: 2px;
    width: 15px;
    height: 14.5px;
    background: #61d0c4;
    border-radius: 3px;
}
.bonus .home_container .bonus_modal .visio_rating .vr_rates i {
    display: inline-block;
    padding: 4px 8px;
    font-size: 14px;
    text-align: center;
    font-style: normal;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin: 10px 4px 0 4px;
    cursor: pointer;
    transition: .3s ease;
}
.bonus .home_container .bonus_modal .visio_rating .vr_rates i.selected {
    background: #61d0c4;
    border-color: #61d0c4;
    color: #fff;
}
.bonus .home_container .bonus_modal .visio_rating textarea {
    width: 100%;
    height: 50px;
    margin-top: 4px;
    font-size: 12px;
    border: 1px solid #ccc;
    padding: 3px;
}

.bonus .home_container .modal_certificate {
    display: none;
}
.bonus .home_container .modal_certificate.visible {
    display: block;
}
.bonus .home_container .modal_certificate .content {
    padding: 20px;
}
.bonus .home_container .modal_certificate .signature {
    width: 86%;
    height: 170px;
    border: 2px solid #404040;
    margin: 30px auto;
    background: #f1f1f1;
    border-radius: 6px;
}
.bonus .home_container .modal_certificate .signature #signature_pad {
    width: 100%;
    height: 100%;
    border-radius: 5px;
    cursor: url(http://icons.iconarchive.com/icons/designcontest/vintage/32/Patent-Pen-icon.png) 0 30, progress;
}
.bonus .home_container .modal_certificate #clear {
    background: #404040;
    margin-right: 15px;
}

@media (max-width: 560px) {
    .bonus .home_container .bonus_modal {
        top: 25px;
        left: 5%;
        width: 90%;
        height: 80%;
        overflow: scroll;
    }
    .bonus .home_container .modal_certificate .signature {
        width: 100%;
    }
    .bonus .home_container .modal_photo_imei .content {
        padding: 10px 0 20px 0;
    }
    .bonus .home_container .modal_photo_imei .photo {
        height: auto;
    }
    .bonus .home_container .modal_photo_imei .photo img {
        width: 50%;
    }
    .bonus .home_container .bonus_modal .choices {
        padding: 10px;
    }
    .bonus .home_container .bonus_modal .choice .radio_container {
        width: 44px;
        padding-left: 0;
    }
    .bonus .home_container .bonus_modal .choice .text_container {
        width: calc(100% - 30px);
    }
    .bonus .home_container .bonus_modal .choice label {
        font-size: 12px;
    }
    .bonus .home_container .bonus_modal .choice {
        margin-bottom: 15px;
    }
    .bonus .home_container .bonus_modal .visio_duration .vd_ranges {
        justify-content: space-evenly;
        flex-wrap: wrap;
        gap: 0;
    }
    .bonus .home_container .bonus_modal .visio_duration .vd_ranges .vd_range {
        flex-basis: 40%;
        font-size: 13px;
        padding: 15px 0;
    }
    .bonus .home_container .bonus_modal .visio_rating {
        width: 100%;
        margin: 0;
        padding: 15px 0;
    }
    .bonus .home_container .bonus_modal .visio_rating .vr_rates i {
        padding: 1px 5px;
    }
}

.bonus .home_container .bonus_modal button {
    font-size: 20px;
    background: #61d0c4;
    color: #fff;
    padding: 12px 20px;
    border: none;
    text-transform: uppercase;
    border-radius: 6px;
    margin: 10px;
}
.bonus .home_container .bonus_modal button:disabled {
    background: #ccc;
    cursor: not-allowed;
}

.bonus .home_container .bonus_alert {
    display: flex;
    padding: 10px 30px;
    background: #404040;
    align-items: center;
    gap: 20px;
    margin-top: 15px;
    border-radius: 8px;
}
.bonus .home_container .bonus_alert svg {
    width: 100px;
}
.bonus .home_container .bonus_alert span {
    font-size: 16px;
    color: #61d0c4;
}

.bonus .home_container .block {
    flex: 1 1 30%;
    min-height: 300px;
    border: 1px solid #efefef;
    padding: 15px;
}

.bonus .home_container .block.disable .content {
    opacity: 0.6;
}
.bonus .home_container .block.disable select,
.bonus .home_container .block.disable input,
.bonus .home_container .block.disable textarea {
    pointer-events: none;
}

.bonus .home_container .block .title {
    position: relative;
    display: flex;
    height: 40px;
    font-size: 16px;
    color: #404040;
    text-transform: uppercase;
    border-bottom: 1px solid #61d0c4;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
}
.bonus .home_container .block .title svg {
    height: 30px;
}

.bonus .home_container .block .content {
    height: auto;
}

.bonus .infos ul {
    line-height: 1.8;
}
.bonus .infos .state {
    color: #000;
    padding: 2px 6px;
    border-radius: 6px;
}

.bonus .infos .amounts {
    margin-top: 20px;
    padding: 10px;
    border: 1px solid #61d0c4;
    border-radius: 6px;
}
.bonus .infos .amounts span {
    color: #61d0c4;
    font-weight: 600;
}


.bonus .home_container .blocks .device {
    flex: 100%;
}
.bonus .home_container .blocks .device .content {

}
.bonus .home_container .blocks .device .content .column {
    float: left;
    width: 50%;
}
.bonus .home_container .blocks .device .input {
    display: inline-block;
    width: 100%;
    height: 40px;
    margin-bottom: 6px;
}
.bonus .device .label {
    display: inline-block;
    float: left;
    width: 30%;
    height: 100%;
    text-transform: uppercase;
    font-size: 15px;
    font-weight: 600;
    line-height: 48px;
    color: #61d0c4;
    margin: 0;
    padding-right: 6px;
}
.bonus .device select,
.bonus .device input {
    display: inline-block;
    float: left;
    width: 70%;
    height: 100%;
    font-size: 15px;
    padding: 4px 6px;
    border: 1px solid #626568;
}
.bonus .device .input_imei p {
    position: relative;
    float: right;
    top: -27px;
    right: 10px;
    color: #8e3838;
    font-weight: 600;
}
.bonus .device .radios {
    display: flex;
    width: 70%;
    height: 100%;
    border: 1px solid #626568;
    align-items: center;
    gap: 10px;
    padding: 0 10px;
    text-transform: uppercase;
}
.bonus .device .radios input[type=radio] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}
.bonus .device .radios label {
    height: 100%;
    font-size: 14px;
    line-height: 48px;
    margin-left: -2px;
    cursor: pointer;
}
.bonus .device .alert_warranty {
    display: flex;
    color: #bb2222;
    text-align: justify;
    padding: 6px;
}
.bonus .device select.edit,
.bonus .device input.edit,
.bonus .device textarea.edit {
    background: #82a5a2;
    border: none;
    color: #fff;
}
.bonus .device .description_label {
    height: 40px;
}
.bonus .device textarea[name=description] {
    height: 70px;
}
.bonus .device textarea {
    width: 70%;
    height: 100%;
    padding: 4px;
}
.bonus .device .find_imei {
    font-size: 20px;
    cursor: pointer;
    margin: -7px 6px 0 0;
}

.bonus .device .input.signature {
    position: relative;
    height: 130px !important;
}
.bonus .device #signature_pad {
    display: block;
    width: 70%;
    height: 130px;
    border: 1px solid #626568;
    cursor: url(http://icons.iconarchive.com/icons/designcontest/vintage/32/Patent-Pen-icon.png) 0 30, progress;
}
.bonus .device #signature_clear {
    position: absolute;
    top: 100px;
    left: 94px;
    background: none;
    border: 1px solid #626568;
}
.bonus .device #signature_png {
    display: block;
    width: 70%;
    height: 130px;
    border: 1px solid #626568;
}
@media (max-width: 560px) {
    .bonus .device #signature_pad {
        width: 100%;
    }
    .bonus .device #signature_clear {
        left: 0;
        top: auto;
        bottom: -26px;
    }
    .bonus .device #signature_png {
        width: 100%;
    }
}


.bonus .device .device_btn {
    float: right;
    background: #61d0c4;
    border: none;
    font-size: 16px;
    text-transform: uppercase;
    color: #fff;
    padding: 10px;
    border-radius: 6px;
}
.bonus .device .device_btn:disabled {
    background: #ccc;
    cursor: not-allowed;
}
.bonus .device .device_btn svg {
    width: 24px;
}
.bonus .device .device_saved {
    float: right;
    height: 36px;
    margin: 0 25px;
    line-height: 33px;
    color: #5bcf41;
}
.bonus .device .exists {
    color: #bb2222;
}
.bonus .device .exists i {
    vertical-align: -4px;
}
.bonus .device.disable .device_btn {
    display: none;
}

.bonus .invalid {
    border: 2px solid #bb2222 !important;
    border-radius: 2px !important;
}

@media (max-width: 560px) {
    .bonus .home_container .blocks .device .content .column {
        float: left;
        width: 100%;
    }
    .bonus .device .input {
        position: relative;
        width: 100%;
        margin-top: 20px;
        margin-bottom: 0;
    }
    .bonus .device .input input,
    .bonus .device .input select,
    .bonus .device .input .radios,
    .bonus .device .input textarea {
        width: 100%;
    }
    .bonus .device .input .label {
        position: absolute;
        top: -30px;
        left: 0;
        width: auto;
        font-size: 13px;
    }
}


@media (min-width: 560px) {
    .bonus .history {
        flex: 1 1 calc(50% - 15px) !important;
        min-height: auto !important;
    }
    .bonus .advice {
        flex: 1 1 calc(50% - 15px) !important;
        min-height: auto !important;
    }
}

.bonus .history .history_lines {
    display: flex;
    flex-direction: column-reverse;
}
.bonus .history .history_line {
    height: 16px;
    margin-bottom: 4px;
}
.bonus .history .datetime {
    display: inline-block;
    width: 120px;
    color: #404040;
    margin-right: 12px;
    border-right: 1px solid #61d0c4;
}
.bonus .history .text {
    color: #ef9d51;
    font-weight: 600;
}
.bonus .history .text .updated {
    color: #b1c4a1;
}
.bonus .history .text .canceled {
    color: #bb2222;
}
.bonus .history .text .completed {
    color: #7bd726;
}
.bonus .history .employee {
    display: none;
}


.bonus .advice h4 {
    font-size: 13px;
    text-transform: uppercase;
    color: #ef9d51;
    margin: 0 0 2px 0;
}
.bonus .advice .links {
    display: block;
}
.bonus .advice .links a {
    display: block;
}


.bonus .order ul {
    line-height: 22px;
}
.bonus .order ul a {
    color: #61d0c4;
    text-decoration: underline;
}
.bonus .order ul .label_state {
    color: #fff;
    padding: 2px 6px;
    border-radius: 6px;
}
.bonus .order label {
    font-size: 12px;
    color: #000;
    text-transform: uppercase;
    padding: 4px 8px;
    background: #f1f1f1;
    border-bottom: 3px solid #fff;
}
.bonus .order .order_products {
    position: relative;
    border-collapse: separate;
    top: -9px;
    left: -2px;
}
.bonus .order .order_products .op_line {
    background: #efefef;
    cursor: default;
}

.bonus .order .order_products .op_line:not(.locked):hover {
    background: #f1f1f1;
    cursor: pointer;
}

.bonus .order .order_products .op_line.selected .op_checkbox span::after {
    content: '';
    display: block;
    position: relative;
    width: 14px;
    height: 14px;
    top: 2px;
    left: 2px;
    background: #61d0c4;
    border-radius: 4px;
}
.bonus .order .order_products .op_checkbox {
    width: 30px;
}
.bonus .order .order_products .op_checkbox span {
    display: block;
    width: 18px;
    height: 18px;
    border-radius: 5px;
    margin: 6px;
    background: #fff;
}
.bonus .order .order_products .op_qty {
    width: 30px;
    font-size: 18px;
    text-align: center;
}
.bonus .order .order_products .op_reference {
    display: block;
    font-weight: 600;
    padding: 3px 3px 0 3px
}
.bonus .order .order_products .op_name {
    display: block;
    font-size: 12px;
    padding: 0 3px 3px 3px
}
.bonus .order .order_products .op_amounts {
    display: block;
    padding: 0 3px 3px 3px
}


.bonus .appointment .open_calendar {
    border: none;
    background: #61d0c4;
    color: #fff;
    text-transform: uppercase;
    padding: 10px 20px;
    margin: 0 auto;
}
.bonus .appointment .open_calendar:disabled {
    background: #efefef;
    color: #aeaeae;
    cursor: not-allowed;
}
.bonus .appointment .is_order_delivered {
    font-size: 15px;
    text-align: center;
    padding-top: 15px;
}
.bonus .appointment .is_order_delivered .deliv_btn {
    display: inline-block;
    background: #61d0c4;
    font-size: 16px;
    color: #fff;
    text-transform: uppercase;
    padding: 8px 12px;
    margin: 0 10px;
    border: none;
    border-radius: 3px;
}
.bonus .appointment #visio_dt {
    font-size: 18px;
    color: #ef9d51;
    text-transform: capitalize;
    font-weight: 600;
}
.bonus .appointment .visio_infos a {
    padding: 4px 8px;
    border: 1px solid #61d0c4;
}

.bonus .calendar_container {
    position: relative;
    width: 330px;
    height: 254px;
}
.bonus .appointment #close_calendar {
    position: absolute;
    top: 2px;
    right: -8px;
    border: none;
    background: none;
}
.bonus .appointment #close_calendar svg {
    width: 32px;
}
.bonus .calendar {
    position: relative;
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    overflow-x: hidden;
    scrollbar-width: thin;
}
.bonus .calendar .date {
    display: flex;
    width: 98%;
    height: 30px;
    background: #61d0c4;
    color: #fff;
    margin-bottom: 6px;
    text-transform: capitalize;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    border-radius: 6px;
}
.bonus .calendar .slots_container {
    display: none;
}
.bonus .calendar .slots {
    display: flex;
    gap: 10px;
    padding: 8px 0 28px 20px;
    justify-content: flex-start;
    flex-wrap: wrap;
}
.bonus .calendar .slot {
    flex-basis: 20%;
    font-size: 15px;
    text-align: center;
    padding: 4px 0 3px 0;
    background: #626568;
    color: #fff;
    border-radius: 20px;
    cursor: pointer;
}
.bonus .calendar .slot:hover,
.bonus .calendar .slot.active {
    background: #ef9d51;
    color: #fff;
}
.bonus .calendar .slot.taken {
    background: #efefef;
    color: #c8c8c8;
    cursor: default;
}
.bonus .calendar_container .confirm {
    position: absolute;
    display: flex;
    gap: 15px;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.bonus .calendar_container .confirm button {
    width: 70%;
    height: 40px;
    border: none;
    color: #fff;
    font-size: 14px;
    text-transform: uppercase;
    border-radius: 20px;
    cursor: pointer;
}
.bonus .calendar_container .confirm .selected_date {
    font-size: 18px;
    color: #ef9d51;
    text-transform: capitalize;
    padding-bottom: 10px;
    border-bottom: 1px solid #626568;
}
.bonus .calendar_container .confirm #cancel_date {
    background: #626568;
}
.bonus .calendar_container .confirm #confirm_date {
    background: #61d0c4;
}


.bonus .photos .content {
    overflow: hidden !important;
}
.bonus .photos .photos_container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.bonus .photos.upload_imei_photo {
    border: 2px solid #bb2222;
    border-radius: 12px;
}
.bonus .photos .error_message {
    color: #bb2222;
    font-weight: 600;
    padding: 0 0 6px 0;
}
.bonus .photos .upload_photo_container {
    position: relative;
    width: calc(50% - 5px);
    height: 120px;
    border: 1px solid #efefef;
    overflow: hidden;
}
.bonus .photos .upload_photo_container label {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    cursor: pointer;
}
.bonus .photos .upload_photo_container svg {
    width: 40px;
    height: 40px;
}
.bonus .photos .upload_photo_container .thumb {
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
}
.bonus .photos .upload_photo_container .thumb img {
    width: 100px;
}
.bonus .photos .upload_photo_container .delete_photo_btn {
    position: absolute;
    top: 3px;
    right: -1px;
    font-size: 18px;
    background: none;
    border: none;
    color: #bb2222;
}
.bonus .photos input[type=file] {
     display: none;
 }


.bonus .messages .content {
    height: 256px !important;
}
.bonus .messages .messages_list {
    display: flex;
    flex-direction: column-reverse;
    height: calc(100% - 65px);
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    padding-right: 10px;
    margin-bottom: 10px;
}
.bonus .messages .messages_list .message {
    position: relative;
    width: 80%;
    border-radius: 10px;
    margin-bottom: 24px;
}
.bonus .messages .messages_list .message.client {
    background: #f3f3f3;
    margin-left: 4px;
    box-shadow: rgba(14, 63, 126, 0.04) 0px 0px 0px 1px, rgba(42, 51, 69, 0.04) 0px 1px 1px -0.5px, rgba(42, 51, 70, 0.04) 0px 3px 3px -1.5px, rgba(42, 51, 70, 0.04) 0px 6px 6px -3px, rgba(14, 63, 126, 0.04) 0px 12px 12px -6px, rgba(14, 63, 126, 0.04) 0px 24px 24px -12px;
}
.bonus .messages .messages_list .message.brico {
    background: #fefefe;
    margin-right: 4px;
    box-shadow: rgba(14, 63, 126, 0.04) 0px 0px 0px 1px, rgba(42, 51, 69, 0.04) 0px 1px 1px -0.5px, rgba(42, 51, 70, 0.04) 0px 3px 3px -1.5px, rgba(42, 51, 70, 0.04) 0px 6px 6px -3px, rgba(14, 63, 126, 0.04) 0px 12px 12px -6px, rgba(14, 63, 126, 0.04) 0px 24px 24px -12px;
    margin-left: 20%;
}
.bonus .messages .messages_list .message .text {
    margin: 0;
    padding: 8px 14px;
    font-size: 14px;
    color: #404040;
}
.bonus .messages .messages_list .message .datetime {
    position: absolute;
    height: 16px;
    bottom: -20px;
    right: -10px;
    margin: 0;
    font-size: 10px;
    color: #404040;
    padding: 0 8px;
    border-radius: 0 0 6px 6px;
}

.bonus .messages .messages_input_container {
    height: 40px;
}
.bonus .messages .messages_input_container textarea {
    display: inline-block;
    float: left;
    width: calc(100% - 40px);
    height: 40px;
    border: 1px solid #626568;
    color: #61d0c4;
    padding: 4px;
    overflow: hidden;
}
.bonus .messages .messages_input_container #messages_submit_btn {
    display: inline-flex;
    float: left;
    width: 40px;
    height: 40px;
    border: none;
    background: #626568;
    justify-content: center;
    align-items: center;
}
.bonus .messages .messages_input_container #messages_submit_btn svg {
    width: 100%;
}


.bonus .need_help {
    min-height: auto !important;
}
.bonus .need_help .content {
    color: #ccc;
}


.bonus .hidden {
    display: none !important;
}


@media (max-width: 560px) {

    #module-brico_bonus_rep-home h1 {
        font-size: 15px;
    }
    .bonus .steps {
        position: relative;
        display: flex;
        height: auto;
        border-radius: 12px;
        gap: 10px;
        flex-direction: column;
        padding: 10px 0;
    }
    .bonus .steps::before {
        content: '';
        position: absolute;
        z-index: 3;
        top: 16px;
        left: 18px;
        width: 4px;
        height: calc(100% - 30px);
        background: #fff;
    }
    .bonus .steps .step {
        width: 100%;
        padding-left: 10px;
        font-size: 12px;
        border: none !important;
    }
    .bonus .steps .step span {
        z-index: 4;
    }
    .bonus .home_container .block {
        flex: 100%;
        min-height: auto;
        border-radius: 12px;
    }
    .bonus .home_container .block .title {
        margin-bottom: 0;
    }
    .bonus .home_container .block .content {
        padding-top: 15px;
    }
    .bonus .home_container .block.infos .content,
    .bonus .home_container .block.order .content,
    .bonus .home_container .block.appointment .content,
    .bonus .home_container .block.history .content,
    .bonus .home_container .block.photos .content,
    .bonus .home_container .block.messages .content {
        display: none;
        min-height: auto;
    }
    .bonus .advice .content {
        text-align: justify;
    }
    .bonus .messages .messages_list .message .text {
        overflow: hidden;
    }

}


.bonus_listing {
    display: flex;
    flex-wrap: wrap;
    padding: 15px 0;
    gap: 20px;
}
.bonus_listing .hidden {
    display: none;
 }
.bonus_listing .bl_block {
    width: calc(25% - 15px);
    padding: 15px;
    background: #efefef;
    border-radius: 8px;
}
.bonus_listing .bl_block ul {
    line-height: 20px;
}
.bonus_listing .bl_block ul .state {
    color: #fff;
    padding: 2px 4px;
    border-radius: 6px;
}

.bonus_listing .bl_button {
    display: block;
    width: 100%;
    height: 38px;
    background: #61d0c4;
    border: none;
    font-size: 13px;
    color: #fff;
    text-align: center;
    text-transform: uppercase;
    line-height: 39px;
    border-radius: 4px;
}


#category .custom_flags .custom_flag_bonus {
    position: relative;
    z-index: 10;
    left: -12px;
    width: 90px;
    margin-top: 10px;
}
#product .custom_flag_bonus {
    display: block;
    width: calc(100% - 60px);
    margin: 0 0 15px 0;
    cursor: pointer;
}
#product #bonus_product_page_modal_background, #bonus_modal_background {
    position: fixed;
    display: none;
    z-index: 999998;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #363737d9;
}
#product #bonus_product_page_modal, #bonus_imei_modal {
    position: fixed;
    display: none;
    z-index: 999999;
    top: 60px;
    left: calc((100% - 1200px) / 2);
    width: 1200px;
    border-radius: 12px;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 12px 28px 0px, rgba(0, 0, 0, 0.1) 0px 2px 4px 0px, rgba(255, 255, 255, 0.05) 0px 0px 0px 1px inset;
    background: #fff;
    overflow: hidden;
}
#bonus_imei_modal #identify_model_page {
    min-height: auto;
}
#bonus_imei_modal #identify_model_page .device.games .image {
    float: left;
    width: 200px;
    height: 150px;
    background: url(../../../../tutos/photos_version_pc/reparation_photo_935/et-video-du-demontage-complet-de-la-nintendo-switch-avant-de-commencer.jpg);
    background-repeat: no-repeat;
    background-size: 210%;
    background-position: -86px;
    border-radius: 16px;
}
@media (max-width: 560px) {
    #bonus_imei_modal {
        top: 15px;
        left: 15px;
        width: calc(100% - 30px);
        height: calc(100% - 30px);
    }
    #bonus_imei_modal .bonus_modal_mobile_scroll {
        height: 100%;
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
    }
    #bonus_imei_modal #identify_model_page .howto {
        margin-top: 6px !important;
    }
    #bonus_imei_modal #identify_model_page .image {
        width: 120px;
        background-size: 156%;
    }
    #bonus_imei_modal #identify_model_page .device.games .image {
        width: 120px;
        height: 100px;
        background-size: 200%;
        background-position: -24px;
        margin-top: 15px;
    }
    #bonus_imei_modal #identify_model_page .device .text {
        width: calc(100% - 120px);
        font-size: 12px;
    }
    #bonus_imei_modal #identify_model_page .bonus_modal_close_btn {
        position: absolute;
        top: 6px;
        right: 6px;
        background: none;
        border: none;
        font-size: 30px;
        color: #404040;
    }
}

#product #bonus_product_page_modal .reparation_container .reparation_texte {
    display: inline-block;
    float: left;
    width: 70%;
    padding: 15px;
}
#product #bonus_product_page_modal .reparation_container .reparation_label {
    display: inline-block;
    float: left;
    width: 30%;
    padding: 15px;
    text-align: center;
}
#product #bonus_product_page_modal .reparation_container .reparation_label img {
    display: block;
    width: 120px;
    margin: 15px auto;
}
#product #bonus_product_page_modal h4 {
    position: relative;
    float: left;
    width: 100%;
    font-size: 18px;
    color: #fff;
    background: #61d0c4;
    text-align: center;
    text-transform: uppercase;
    padding: 10px 0;
    margin-block-start: 0;
    margin-block-end: 0;
}
#product #bonus_product_page_modal .fonctionnement_container {
    position: relative;
    display: inline-block;
    float: left;
    width: 50%;
}
#product #bonus_product_page_modal .fonctionnement_container::after {
    content: '';
    position: absolute;
    top: 15%;
    right: 20px;
    height: 75%;
    border-right: 2px dashed #626568;
}
#product #bonus_product_page_modal .fonctionnement_container ul {
    position: relative;
    padding-left: 60px;
}
#product #bonus_product_page_modal .fonctionnement_container ul::before {
    content: '';
    position: absolute;
    display: block;
    top: 0;
    left: 20px;
    width: 4px;
    height: 100%;
    background: #858585;
}
#product #bonus_product_page_modal .fonctionnement_container ul li b {
    position: relative;
}
#product #bonus_product_page_modal .fonctionnement_container ul li b i {
    display: flex;
    position: absolute;
    top: -5px;
    left: -80px;
    width: 28px;
    height: 28px;
    background: #ef9d51;
    border-radius: 50%;
    justify-content: center;
    font-size: 18px;
    font-style: normal;
    color: #fff;
    font-weight: 600;
    padding-top: 7px;
}
#product #bonus_product_page_modal .avantages_container {
    display: inline-block;
    float: left;
    width: 50%;
}


#product #bonus_product_page_modal .fonctionnement_container .line_arrows {
    display: inline-flex;
    position: relative;
    float: left;
    width: 60px;
    height: 300px;
    flex-direction: column;
}
#product #bonus_product_page_modal .fonctionnement_container .line_arrows::after {
    display: block;
    position: absolute;
    top: 8px;
    left: 34px;
    content: '';
    width: 4px;
    height: 300px;
    background: #404040;
}
#product #bonus_product_page_modal .fonctionnement_container .line_arrows span {
    display: block;
    position: absolute;
    z-index: 2;
    left: 22px;
    width: 28px;
    height: 28px;
    background: #ef9d51;
    border-radius: 50%;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    line-height: 31px;
}
#product #bonus_product_page_modal .fonctionnement_container .line_arrows span.one { top: 20px; }
#product #bonus_product_page_modal .fonctionnement_container .line_arrows span.two { top: 132px; }
#product #bonus_product_page_modal .fonctionnement_container .line_arrows span.three { top: 180px; }
#product #bonus_product_page_modal .fonctionnement_container .line_arrows span.four { top: 268px; }

#product #bonus_product_page_modal .fonctionnement_container table b {
    font-size: 16px;
}
 #product #bonus_product_page_modal ul {
     display: inline-block;
     float: left;
     width: calc(100% - 30px);
     margin: 15px;
}
#product #bonus_product_page_modal ul li {
    margin-bottom: 15px;
}
#product #bonus_product_page_modal ul li img {
    margin-right: 8px;
}
#product #bonus_product_page_modal ul li b {
    font-size: 16px;
}
#product #bonus_product_page_modal .bonus_modal_close_btn.top {
    position: absolute;
    top: 12px;
    right: 10px;
    border: none;
    background: none;
    font-size: 28px;
    color: #fff;
    margin: -10px 10px 0 0;
    cursor: pointer;
}
#product #bonus_product_page_modal .bonus_modal_close_btn.bottom {
    border: none;
    background: #ef9d51;
    padding: 10px 20px;
    font-size: 16px;
    color: #fff;
    font-weight: 600;
    text-transform: uppercase;
    border-radius: 8px;
    cursor: pointer;
}

@media (max-width: 560px) {

    #category .custom_flags .custom_flag_bonus {
        width: 68px;
    }
    #product .custom_flag_bonus {
        width: 92%;
        margin: -30px 4% 15px 4%;
    }
    #product #bonus_product_page_modal {
        top: 20px;
        left: 20px;
        width: calc(100% - 40px);
        height: calc(100% - 40px);
    }
    #product #bonus_product_page_modal .bonus_modal_mobile_scroll {
        height: 100%;
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
    }
    #product #bonus_product_page_modal .reparation_container .reparation_texte,
    #product #bonus_product_page_modal .reparation_container .reparation_label,
    #product #bonus_product_page_modal .fonctionnement_container,
    #product #bonus_product_page_modal .avantages_container {
        width: 100%;
        font-size: 14px;
        text-align: justify;
        padding: 15px;
    }
    #product #bonus_product_page_modal .reparation_container .reparation_label b {
        display: block;
        text-align: center;
    }
    #product #bonus_product_page_modal .fonctionnement_container::after {
        display: none;
    }

}

/*
#cart .bonus_rep_cart {
    float: left;
    display: flex;
    justify-content: center;
    width: 100%;
    height: 130px;
    margin-bottom: 20px;
    //border: 1px solid #f1f1f1;
    background: #00b0f0;
}
#cart .bonus_rep_cart img {
    height: 150px;
    margin: -10px;
}
@media (max-width: 768px) {
    #cart .bonus_rep_cart {
        flex-wrap: wrap;
        width: 100%;
        height: auto;
    }
}
*/


#cms:has(#cms_bonus_reparation) #fil_ariane {
    display: none;
}
#cms_bonus_reparation .h1 {
    display: none;
}
#cms #content .container:has(#cms_bonus_reparation) {
    padding: 0;
}
.bonus_reparation_video {
    width: 800px;
    height: 360px;
    border: none;
}
@media (max-width: 560px) {
    .bonus_reparation_video {
        width: 100%;
        height: auto;
    }
}
#cms_bonus_reparation .img_container {
    position: relative;
    width: 100%;
    height: 160px;
    overflow: hidden;
}
#cms_bonus_reparation .img_container img:not(.qualirepar_logo) {
    position: relative;
    top: -30px;
    width: 120%;
}
#cms_bonus_reparation h2 {
    background: #00b0f0;
    text-align: center;
    text-transform: uppercase;
    color: #fff;
    padding: 6px 0;
}
#cms_bonus_reparation h3 {
    text-align: center;
    margin: 15px 0 20px 0;
}
#cms_bonus_reparation p {
    padding: 0 15px;
    color: #000 !important;
}
#cms_bonus_reparation .bonus_icon {
    text-align: center;
    margin: -10px 0 8px 0;
}
#cms_bonus_reparation .here_icon {
    width: 50px;
    margin-top: 4px;
}
#cms_bonus_reparation .qualirepar_logo {
    position: absolute;
    top: 28%;
    left: 30%;
    width: 40%;
}
#cms_bonus_reparation ul {
    padding: 0 15px;
}
#cms_bonus_reparation ul li {
    margin-bottom: 15px;
}
#cms_bonus_reparation ul li span {
    display: inline-block;
    padding: 0 10px;
    background: #00b0f0;
    border-radius: 4px;
    font-size: 10px;
    color: #fff;
    margin-right: 6px;
    vertical-align: 1px;
}
#cms_bonus_reparation .amounts_tab {
    display: flex;
    justify-content: center;
    margin: 20px 0;
}
#cms_bonus_reparation .device {
    text-align: center;
}
#cms_bonus_reparation .device:not(:last-child) {
    border-right: 1px solid #00b0f0;
}
#cms_bonus_reparation .device b {
    display: block;
    height: 46px;
    font-size: 14px;
}
#cms_bonus_reparation .device .calc {
    display: block;
    height: 76px;
}
#cms_bonus_reparation .device .calc i {
    font-size: 11px;
}
#cms_bonus_reparation .device .blue {
    display: block;
    font-weight: 600;
    color: #00b0f0;
}
#cms_bonus_reparation .blog_link {
    color: #df0505;
}

@media (min-width: 560px) {
    #cms:has(#cms_bonus_reparation) #content {
        margin-top: 10px;
    }
    #cms_bonus_reparation .h1 {
        display: none;
    }
    #cms_bonus_reparation {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        margin-top: 20px;
    }
    #cms_bonus_reparation .bonus_block {
        width: calc(50% - 10px);
    }
    #cms_bonus_reparation .img_container {
        position: relative;
        width: 100%;
        height: 220px;
        overflow: hidden;
    }
    #cms_bonus_reparation .img_container img:not(.qualirepar_logo) {
        position: relative;
        top: -48px;
        width: 100%;
    }
    #cms_bonus_reparation .qualirepar_logo {Magnétiseur démagnétiseur
        position: absolute;
        top: 28%;
        left: 33%;
        width: 34%;
    }
}


#cart .shopping_cart_footer {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 15px;
}
#cart .bonus_ask_quotation {
    float: right;
    text-align: right;
}
#cart .bonus_ask_quotation .link {
    font-weight: 700;
    font-size: 12px;
    color: #626568;
    text-transform: uppercase;
}
#cart .bonus_ask_quotation .link:hover {
    cursor: pointer;
    color: #61d0c4;
}
#cart .bonus_ask_quotation .how_to {
    display: none;
    float: right;
    width: 300px;
    padding: 10px 14px;
    text-align: left;
    margin-top: 10px;
    border: 1px solid #626568;
    border-radius: 10px;
}
#cart .bonus_ask_quotation .how_to ul {
    list-style-type: square;
    margin-left: 30px;
}


.homepage2023 .blocks_line .bonus {
    position: relative;
    grid-area: aboutus;
    background-image: url(../../../../img/cms/BONUS/bonus_home_bkg.jpg);
    background-repeat: no-repeat;
    //background-size: 200%;
    background-position: right;
    border-radius: 12px;
    overflow: hidden;
    transition: all .3s cubic-bezier(.47,1.64,.41,.8);
}
.homepage2023 .blocks_line .bonus .text_1 {
    position: absolute;
    z-index: 2;
    top: 28px;
    right: 28px;
    width: 360px;
    font-size: 34px;
    font-weight: 300;
    color: #FFF;
    line-height: 32px;
    font-style: italic;
    text-align: right;
}
.homepage2023 .blocks_line .bonus .text_1 .amount {
    font-size: 46px;
}
.homepage2023 .blocks_line .bonus .text_2 {
    position: absolute;
    z-index: 2;
    top: 110px;
    right: 28px;
    font-size: 22px;
    font-weight: 700;
    color: #FFF;
    text-transform: uppercase;
    font-style: italic;
    text-align: right;
}
.homepage2023 .blocks_line .bonus .read_more {
    position: absolute;
    bottom: 10px;
    left: 28px;
}
.homepage2023 .blocks_line .bonus .read_more svg {
    width: 60px;
    vertical-align: -20px;
}
.homepage2023 .blocks_line .bonus .read_more span {
    font-size: 34px;
    color: #fff;
    font-weight: 700;
    font-style: italic;
    text-decoration: underline;
}
.homepage2023 .blocks_line .bonus .qualirepar {
    position: absolute;
    bottom: 16px;
    right: 28px;
    width: 150px;
    background: #fff;
    border-radius: 12px;
}
.homepage2023 .blocks_line .bonus .qualirepar img {
    width: 96%;
    margin: 2%;
}
@media (max-width: 1366px) {
    .homepage2023 .blocks_line .bonus .text_1 {
        width: 100%;
        font-size: 20px;
    }
    .homepage2023 .blocks_line .bonus .text_1 .amount {
        font-size: 30px;
    }
    .homepage2023 .blocks_line .bonus .text_2 {
        font-size: 18px;
        top: 68px;
    }
    .homepage2023 .blocks_line .bonus .read_more {
        left: 10px;
    }
    .homepage2023 .blocks_line .bonus .read_more span {
        font-size: 24px;
    }
}
@media (max-width: 560px) {
    .homepage2023 .blocks_line .bonus .text_1 {
        width: 60%;
        font-size: 18px;
        top: 14px;
        right: 18px;
        line-height: 20px;
    }
    .homepage2023 .blocks_line .bonus .text_2 {
        font-size: 14px;
        top: auto;
        bottom: 8px;
        right: 18px;
    }
    .homepage2023 .blocks_line .bonus .read_more {
        bottom: 0;
        left: 6px;
    }
    .homepage2023 .blocks_line .bonus .read_more svg {
        width: 40px;
        vertical-align: -14px;
    }
    .homepage2023 .blocks_line .bonus .read_more span {
        font-size: 16px;
    }
    .homepage2023 .blocks_line .bonus .qualirepar {
        top: 10px;
        bottom: auto;
        left: 10px;
        right: auto;
        width: 94px;
    }
    .homepage2023 .blocks_line .bonus .qualirepar img {
        width: 90%;
        margin: 5%;
    }
}


/* CATEGORY BONUS V2 */

#category .qualirepar_flag {
    background: #fff;
    padding: 4px !important;
    border-radius: 0 !important;
    border: 1px solid #ebebeb;
}
#category .qualirepar_flag img {
    width: 60px;
}

#category .pic_pdt_price_add_to_cart {
    display: grid;
    grid-template-columns: 56% 44%;
    grid-template-rows: auto auto 30px 20px 20px;
    gap: 4px 0px;
    grid-template-areas:
    "no_bonus_product no_bonus_product"
    "with_bonus without_bonus"
    "add_to_cart_button add_to_cart_button"
    "stock_delays stock_delays"
    "rating rating";
    height: auto;
    color: #323232;
    border-bottom: none;
}

#category .with_bonus {
    grid-area: with_bonus;
    display: flex;
    height: 80px;
    align-items: flex-start;
    justify-content: flex-end;
    flex-direction: column;
}
#category .with_bonus .price {
    font-size: 28px;
    font-weight: 600;
}
#category .with_bonus .currency {
    font-size: 18px;
}
#category .with_bonus .subtitle {
    font-size: 12px;
}

#category .without_bonus {
    grid-area: without_bonus;
    display: flex;
    height: 80px;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;
}
#category .without_bonus .price {
    font-size: 20px;
    font-weight: 600;
}
#category .without_bonus .tax {
    font-size: 18px;
}
#category .without_bonus .price_original {
    position: relative;
    font-size: 14px;
}
#category .without_bonus .price_original::after {
    content: '';
    position: absolute;
    display: block;
    width: 100%;
    top: 9px;
    opacity: 0.8;
    border-bottom: 2px solid #626568;
    transform: rotate(342deg);
}
#category .without_bonus .tax {
    font-size: 8px;
}
#category .without_bonus .subtitle {
    text-align: right;
    font-size: 11px;
}

#category .pic_pdt_price_add_to_cart .add_to_cart_button {
    grid-area: add_to_cart_button;
}
#category .pic_pdt_price_add_to_cart .add_to_cart_button button {
    width: 100%;
    height: 30px;
    border: none;
    background: #61d0c4;
    font-size: 18px;
    color: #fff;
    border-radius: 8px;
    transition: .3s ease;
}
#category .pic_pdt_price_add_to_cart .add_to_cart_button button .fa-shopping-basket {
    margin-left: 4px;
}
#category .pic_pdt_price_add_to_cart .add_to_cart_button button:not(:disabled):hover {
    font-size: 19px;
}
#category .pic_pdt_price_add_to_cart .add_to_cart_button button:focus {
    outline: none;
}

#category .pic_pdt_price_add_to_cart .stock_delays {
    grid-area: stock_delays;
    padding: 3px;
}
#category .pic_pdt_price_add_to_cart .stock_delays .fa-warehouse {
    margin-right: 2px;
}

#category .pic_pdt_price_add_to_cart .rating {
    grid-area: rating;
}
#category .pic_pdt_price_add_to_cart .rating .skeepers_product__stars {
    margin-top: 0;
}

@media (max-width: 560px) {

    #category .pic_pdt_price_add_to_cart {
        display: grid;
        grid-template-columns: 56% 44%;
        grid-template-rows: 80px 30px 20px 20px;
        gap: 4px 0px;
        grid-template-areas:
            "with_bonus without_bonus"
            "add_to_cart_button add_to_cart_button"
            "stock_delays stock_delays"
            "rating rating";
        height: auto;
        color: #323232;
        border-bottom: none;
    }
    #category .with_bonus .price {
        font-size: 20px;
        font-weight: 600;
    }
    #category .with_bonus .tax {
        font-size: 10px;
    }
    #category .with_bonus .subtitle {
        font-size: 10px;
        line-height: 12px;
    }

    #category .without_bonus {
        grid-area: without_bonus;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: flex-end;
    }
    #category .without_bonus .price {
        font-size: 14px;
        font-weight: 600;
    }
    #category .without_bonus .tax {
        font-size: 10px;
    }
    #category .without_bonus .price_original {
        position: relative;
        font-size: 11px;
    }
    #category .without_bonus .subtitle {
        font-size: 10px;
        line-height: 12px;
    }

    #category .stock_delays {
        font-size: 11px;
    }
    #category .stock_delays .fa-warehouse {
        display: none;
    }

    #category .no_bonus_product  .price {
        font-size: 20px;
    }

}


#category .no_bonus_product  {
    display: flex;
    height: 80px;
    align-items: flex-end;
    justify-content: space-between;
}
#category .no_bonus_product  .price {
    font-size: 28px;
    font-weight: 600;
}
#category .no_bonus_product  .currency {
    font-size: 18px;
}
#category .no_bonus_product  .subtitle {
    font-size: 12px;
}
#category .no_bonus_product .tax {
    font-size: 12px;
}
#category .no_bonus_product .price_original {
    position: relative;
    font-size: 16px;
}
#category .no_bonus_product .price_original::after {
    content: '';
    position: absolute;
    display: block;
    width: 60%;
    top: 7px;
    opacity: 0.8;
    border-bottom: 2px solid #626568;
    transform: rotate(342deg);
}


/* PRODUCT PAGE WITH BONUS V2 */

#product #pdtp_options_and_cart .pdtp_options_1,
#product #pdtp_options_and_cart .pdtp_options_2 {
    border-radius: 12px;
    padding: 3px;
    box-shadow: none;
}
#product #pdtp_options_and_cart .pdtp_bloc_interlayer {
    border: none;
}
#product #pdtp_options_and_cart .pdtp_bloc_interlayer_title {
    width: 100%;
    height: 30px;
    background: #fff;
    font-size: 16px;
    font-weight: 600;
    color: #626568;
    text-align: center;
    text-transform: uppercase;
    line-height: 32px;
    padding: 0;
    border-radius: 8px 8px 0 0;
}
#product #pdtp_options_and_cart .pdtp_bloc_interlayer_title::after {
    display: none;
}


#product .pdt_bonus_amount {
    display: grid;
    //grid-template-columns: calc(100% - 78px) 78px;
    grid-template-columns: 100%;
    grid-template-rows: 40px 70px 26px;
    gap: 0px 0px;
    grid-auto-flow: row;
    grid-template-areas:
    "amount_text logo"
    "process process"
    "learn_more learn_more";
    background: #f1f1f1;
    padding: 3px;
    margin-bottom: 15px;
    border-radius: 12px;
    overflow: hidden;
}

#product .pdt_bonus_amount .amount_text {
    grid-area: amount_text;
    font-size: 15px;
    color: #626568;
    text-align: center;
    font-weight: 600;
    text-transform: uppercase;
    background: #fff;
    padding: 12px 12px;
    border-radius: 10px 0 0 0;
}
#product .pdt_bonus_amount .amount_text b {
    font-size: 20px;
}

#product .pdt_bonus_amount .logo {
    grid-area: logo;
    background: #fff;
    border-radius: 0 10px 0 0;
}
#product .pdt_bonus_amount .logo img {
    height: 30px;
    margin: 4px;
}

#product .pdt_bonus_amount .process {
    grid-area: process;
    display: flex;
    align-items: flex-end;
    padding-bottom: 10px;
    margin: 0 auto;
}
#product .pdt_bonus_amount .process .icon {
    font-size: 12px;
    color: #626568;
}
#product .pdt_bonus_amount .process .icon img {
    display: block;
    margin: 4px auto;
}
#product .pdt_bonus_amount .process .icon_cart {
    height: 28px;
}
#product .pdt_bonus_amount .process .icon_rdv {
    height: 28px;
}
#product .pdt_bonus_amount .process .icon_visio {
    height: 28px;
}
#product .pdt_bonus_amount .process .icon_validate {
    height: 28px;
}
#product .pdt_bonus_amount .process .chevron {
    font-size: 16px;
    color: #626568;
    margin-bottom: -1px;
}

#product .pdt_bonus_amount .learn_more {
    grid-area: learn_more;
    text-align: center;
}
#product .pdt_bonus_amount .learn_more a {
    display: inline-block;
    font-size: 12px;
    color: #fff;
    text-transform: uppercase;
    background: #00b5e2;
    padding: 2px 12px;
    margin-bottom: 4px;
    border-radius: 8px;
    transition: .3s ease;
}
#product .pdt_bonus_amount .learn_more a:hover {
    background: #0cc9f8;
}
#product .pdt_bonus_amount .learn_more a:focus {
    outline: none;
}


#product .pdt_add_to_cart {
    display: grid;
    grid-template-columns: 40% calc(60% - 6px);
    grid-template-rows: 60px 40px;
    gap: 4px 6px;
    grid-auto-flow: row;
    grid-template-areas:
    "with_bonus without_bonus"
    "add_to_cart_button stock_delays";
    margin-bottom: 20px;
}

#product .with_bonus {
    grid-area: with_bonus;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    flex-direction: column;
}
#product .with_bonus .price {
    font-size: 36px;
    font-weight: 600;
}
#product .with_bonus .currency {
    font-size: 18px;
}
#product .with_bonus .subtitle {
    font-size: 12px;
}

#product .without_bonus {
    grid-area: without_bonus;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;
}
#product .without_bonus .price {
    font-size: 22px;
    font-weight: 600;
}
#product .without_bonus .tax {
    font-size: 18px;
}
#product .without_bonus .price_original {
    position: relative;
    font-size: 14px;
}
#product .without_bonus .price_original::after {
    content: '';
    position: absolute;
    display: block;
    width: 100%;
    top: 9px;
    opacity: 0.8;
    border-bottom: 2px solid #626568;
    transform: rotate(342deg);
}
#product .without_bonus .tax {
    font-size: 8px;
}
#product .without_bonus .subtitle {
    font-size: 11px;
}

#product .add_to_cart_button {
    grid-area: add_to_cart_button;
}

#product .add_to_cart_button button {
    width: 100%;
    height: 100%;
    border: none;
    font-size: 20px;
    color: #fff;
    text-transform: uppercase;
    background: #ef9d51;
    border-radius: 10px 0 0 10px;
    transition: .3s ease;
}
#product .add_to_cart_button button .fa-shopping-basket {
    font-size: 18px;
    margin-left: 6px;
    vertical-align: 1px;
}
#product .add_to_cart_button button:hover {
    font-size: 22px;
}
#product .add_to_cart_button button:disabled {
    background: #626568;
}

#product .stock_delays {
    grid-area: stock_delays;
    display: flex;
    background: #ef9d51cc;
    font-size: 13px;
    color: #fff;
    font-weight: 600;
    border-radius: 0 10px 10px 0;
    justify-content: center;
    align-items: center;
}

@media (max-width: 560px) {

    #product #brico_add_to_cart.fixed_mobile {
        position: fixed;
        z-index: 9999;
        bottom: 0;
        right: 0;
        width: 50%;
        height: 46px;
        border-radius: 12px 0 0 0;
    }
    #product .pdt_bonus_amount {
        margin: 0 -16px 20px -8px;
    }
    #product .pdtp_options_1 {
        //margin-top: 180px;
    }

}


/* POPUP WITH BONUS V2 */

.swal2-popup {
    background: none;
}
.swal2-popup .swal2-actions .swal2-confirm {
    display: none !important;
}
.swal2-html-container {
    background: #f1f1f1;
    border-radius: 20px;
    padding: 20px;
}
.swal2-html-container .line_1 {
    display: flex;
    padding: 15px 0;
    background: #fff;
    border-radius: 16px;
}
.swal2-html-container .line_1 .block {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 40px 36px 60px 60px;
    gap: 0px 0px;
    grid-template-areas:
    "price"
    "price_subtitle"
    "pros_cons"
    "add_to_cart";
    width: 50%;
}
.swal2-html-container .line_1 .block li {
    //border: 1px dashed red;
}
.swal2-html-container .line_1 .block .title {
    grid-area: price;
    font-size: 18px;
    font-weight: 700;
}
.swal2-html-container .line_1 .block .subtitle {
    grid-area: price_subtitle;
    font-size: 15px;
}
.swal2-html-container .line_1 .block .price {
    grid-area: price;
    font-size: 34px;
    font-weight: 700;
}
.swal2-html-container .line_1 .block .price_subtitle {
    grid-area: price_subtitle;
    font-size: 16px;
}
.swal2-html-container .line_1 .block .conditions {
    grid-area: pros_cons;
    font-size: 13px;
    padding: 10px;
}
.swal2-html-container .line_1 .block .pros_cons {
    grid-area: pros_cons;
    padding: 10px 46px;
}
.swal2-html-container .line_1 .block .pros_cons ul {
    margin-block-start: 0;
    margin-block-end: 0;
    padding-inline-start: 0;
}
.swal2-html-container .line_1 .block .pros_cons ul li {
    display: flex;
    align-items: center;
    text-align: left;
    font-size: 12px;
    padding: 4px 0;
}
.swal2-html-container .line_1 .block .pros_cons small {
    font-size: 9px;
}
.swal2-html-container .line_1 .block .pros_cons .pros {
    font-size: 18px;
    color: #6dc915;
    margin-right: 14px;
}
.swal2-html-container .line_1 .block .pros_cons .cons {
    font-size: 18px;
    color: #e3460d;
    margin-right: 14px;
}
.swal2-html-container .line_1 .block .add_to_cart {
    grid-area: add_to_cart;
}
.swal2-html-container .line_1 .block #brico_add_to_cart_wb {
    background: #0d675d;
    border: none;
    margin-top: 8px;
    padding: 6px 20px 4px 20px;
    border-radius: 6px;
    color: #fff;
    transition: .3s ease;
}
.swal2-html-container .line_1 .block #brico_add_to_cart_wtb {
    background: none;
    border: 1px solid #0d675d;
    margin-top: 8px;
    padding: 6px 20px 4px 20px;
    border-radius: 6px;
    color: #0d675d;
    transition: .3s ease;
}
.swal2-html-container .line_1 .block #brico_add_to_cart_wb .text_1 {
    display: block;
    font-size: 16px;
    font-weight: normal;
    text-transform: uppercase;
}
.swal2-html-container .line_1 .block #brico_add_to_cart_wb .text_2  {
    display: block;
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
}
.swal2-html-container .line_1 .block #brico_add_to_cart_wtb .text_1 {
    display: block;
    font-size: 14px;
    font-weight: normal;
    text-transform: uppercase;
}
.swal2-html-container .line_1 .block #brico_add_to_cart_wtb .text_2 {
    display: block;
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
}
.swal2-html-container .line_1 .block #brico_add_to_cart_wb:hover {
    background: #167a6f;
}
.swal2-html-container .line_1 .block .add_to_cart button:focus {
    outline: none;
}
.swal2-html-container .line_1 .block .add_to_cart button:disabled {
    background: #ccc;
    cursor: not-allowed;
}
.swal2-html-container .line_1 .block.with_visio {
    border-right: 1px solid #626568;
}

.swal2-html-container .line_warning {
    margin-top: 20px;
    padding: 10px;
    background: #fff;
    border-radius: 16px;
    color: #bb2222;
    font-size: 15px;
    font-weight: 600;
}
.swal2-html-container .line_warning span {
    font-size: 34px;
    vertical-align: -10px;
    margin-right: 6px;
}

.swal2-html-container .line_2 {
    height: 170px;
    margin-top: 20px;
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
}
.swal2-html-container .line_2 .left {
    display: inline-block;
    float: left;
    width: 42%;
    overflow: hidden;
}
.swal2-html-container .line_2 .right {
    display: inline-block;
    width: 58%;
}
.swal2-html-container .line_2 img {
    position: relative;
    width: 100%;
    top: -44px;
}
.swal2-html-container .line_2 p.text_1 {
    font-size: 18px;
    font-weight: 600;
    margin: 10px 0;
}
.swal2-html-container .line_2 p.text_2 {
    font-size: 14px;
    margin: 14px 0;
}
.swal2-html-container .line_2 .learn_more {
    display: inline-block;
    font-size: 14px;
    color: #fff;
    text-transform: uppercase;
    background: #00b5e2;
    padding: 4px 16px;
    margin-bottom: 4px;
    border-radius: 8px;
    transition: .3s ease;
}
.swal2-html-container .line_2 .learn_more:hover {
    background: #0cc9f8;
}
.swal2-html-container .line_2 .learn_more:focus {
    outline: none;
}

.swal2-html-container .line_3 p {
    margin: 6px 0 -8px 0;
    font-size: 12px;
}


@media (max-width: 768px) {

    .swal2-popup {
        width: calc(100% - 20px) !important;
        margin: 60px 10px 10px 10px;
    }

    .swal2-html-container {
        padding: 8px;
    }

    .swal2-html-container .line_1 {
        flex-direction: column;
        padding: 10px 0;
    }

    .swal2-html-container .line_1 .block {
        position: relative;
        grid-template-columns: 100%;
        grid-template-rows: 32px 30px 44px 64px;
        grid-template-areas:
        "price"
        "price_subtitle"
        "pros_cons"
        "add_to_cart";
        width: 100%;
    }
    .swal2-html-container .line_1 .block.without_visio {
        grid-template-rows: 32px 30px 10px 64px;
    }

    .swal2-html-container .line_1 .block.with_visio {
        border-right: none;
        padding-bottom: 6px;
        margin-bottom: 12px;
    }

    .swal2-html-container .line_1 .block.with_visio::after {
        content: '';
        display: block;
        position: absolute;
        bottom: 0;
        left: 15%;
        width: 70%;
        height: 2px;
        border-bottom: 1px solid #b4b5b7;
    }

    .swal2-html-container .line_1 .block .price {
        font-size: 30px;
    }

    .swal2-html-container .line_1 .block .price_subtitle {
        font-size: 18px;
    }

    .swal2-html-container .line_1 .block .conditions {
        font-size: 12px;
        line-height: 14px;
        margin: 4px;
    }

    .swal2-html-container .line_1 .block .pros_cons {
        padding: 0;
    }

    .swal2-html-container .line_1 .block .pros_cons ul {
        width: 70%;
        margin: 0 auto;
    }

    .swal2-html-container .line_1 .block .pros_cons ul li {
        font-size: 12px;
        padding: 0;
        margin-bottom: 4px;
        line-height: 12px;
    }

    .swal2-html-container .line_1 .block #brico_add_to_cart_wb,
    .swal2-html-container .line_1 .block #brico_add_to_cart_wtb {
        padding: 3px 20px 1px 20px;
    }

    .swal2-html-container .line_1 .block .add_to_cart {
        grid-area: add_to_cart;
    }

    .swal2-html-container .line_1 .block #brico_add_to_cart_wb .text_1 {
        font-size: 16px;
    }
    .swal2-html-container .line_1 .block #brico_add_to_cart_wb .text_2  {
        font-size: 16px;
    }
    .swal2-html-container .line_1 .block #brico_add_to_cart_wtb .text_1 {
        font-size: 11px;
    }
    .swal2-html-container .line_1 .block #brico_add_to_cart_wtb .text_2 {
        font-size: 16px;
    }

    .swal2-html-container .line_2 {
        height: 150px;
        margin-top: 8px;
        padding: 0;
    }
    .swal2-html-container .line_2 img {
        width: 128%;
        top: -18px;
    }
    .swal2-html-container .line_2 p.text_1 {
        font-size: 12px;
        font-weight: 600;
        margin: 10px 0;
    }
    .swal2-html-container .line_2 p.text_2 {
        font-size: 10px;
        font-weight: normal;
        margin: 16px 0;
    }
    .swal2-html-container .line_2 .learn_more {
        font-size: 10px;
        margin-bottom: -2px;
    }

    .swal2-html-container .line_3 p {
        margin: 6px 0 -1px 0;
        font-size: 10px;
    }

}


/* CART WITH BONUS V2 */

#cart .cpl_visio {
    padding-left: 10px;
}
#cart .cart_bonus_checkbox {
    display: block;
    width: 20px;
    height: 20px;
    border: 1px solid #626568;
    border-radius: 2px;
}
#cart .cart_bonus_checkbox.checked {
    background: #ef9d51;
    border: 1px solid #ef9d51;
}
#cart .cart_bonus_checkbox.checked .check_icon {
    font-size: 18px;
    color: #fff;
    margin: -2px 0 0 0;
}

#cart .visio_product {
    margin: -12px 0 40px 0;
}
#cart .visio_product .cart_2020_cell {
    height: 80px;
}
#cart .visio_product .cpl_image img {
    width: 80px;
    margin: 10px 12px;
}
#cart .visio_product .cpl_total {
    margin-top: -15px;
    border-top: 15px solid #fff;
}

#cart .cart_infos .bonus_rep_cart {
    display: grid;
    grid-template-columns: calc(100% - 300px) 300px;
    grid-template-rows: 46px 60px 30px;
    gap: 10px 0px;
    grid-template-areas:
    "title toggle_switch"
    "process free_visio"
    "conditions conditions";
    width: 100%;
    background: none;
    margin-bottom: 15px;
}
#cart .cart_infos .bonus_rep_cart .title {
    grid-area: title;
    position: relative;
    display: flex;
    align-items: center;
    padding-left: 20px;
    background: #00b5e2;
    font-size: 16px;
    color: #fff;
    font-weight: bold;
    border-radius: 10px 0 0 10px;
}
#cart .cart_infos .bonus_rep_cart .title .logo_qualirepar {
    position: absolute;
    top: 0;
    left: 26px;
    height: 46px;
    padding: 6px;
    background-color: #fff;
}
#cart .cart_infos .bonus_rep_cart .toggle_switch {
    grid-area: toggle_switch;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #00b5e2;
    border-radius: 0 10px 10px 0;
    font-size: 14px;
    color: #fff;
}

#cart .cart_infos .bonus_rep_cart .toggle_switch .toggle_btn {
    position: relative;
    width: 60px;
    height: 24px;
    margin-left: 10px;
    background: #626568;
    border: 1.5px solid #fff;
    border-radius: 20px;
    transition: background 0.3s ease;
    cursor: pointer;
    overflow: hidden;
}
#cart .cart_infos .bonus_rep_cart .toggle_switch .toggle_btn:hover {
    background: #51d310;
}
#cart .cart_infos .bonus_rep_cart .toggle_switch .toggle_btn::after {
    content: '';
    position: absolute;
    top: 2.5px;
    left: 38px;
    width: 17px;
    height: 17px;
    background: #fff;
    border-radius: 50%;
}
#cart .cart_infos .bonus_rep_cart .toggle_switch .toggle_btn:hover::after {
    animation: bounceLeft 0.5s ease forwards;
}
@keyframes bounceLeft {
    0% { left: 38px; }
    40% { left: 3px; }
    60% { left: 10px; }
    80% { left: 6px; }
    100% { left: 3px; }
}
#cart .cart_infos .bonus_rep_cart .toggle_switch .toggle_btn.active {
    background: #51d310;
}
#cart .cart_infos .bonus_rep_cart .toggle_switch .toggle_btn.active:hover {
    background: #626568;
}


#cart .cart_infos .bonus_rep_cart .process {
    grid-area: process;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-right: 20px;
}
#cart .cart_infos .bonus_rep_cart .process .icon {
    font-size: 20px;
}
#cart .cart_infos .bonus_rep_cart .process .icon .icon_cart {
    height: 38px;
    margin: -6px 10px 0 0;
}
#cart .cart_infos .bonus_rep_cart .process .icon .icon_rdv {
    height: 38px;
    margin: -6px 10px 0 0;
}
#cart .cart_infos .bonus_rep_cart .process .icon .icon_visio {
    height: 38px;
    margin: -6px 10px 0 0;
}
#cart .cart_infos .bonus_rep_cart .process .icon .icon_validate {
    height: 38px;
    margin: -6px 10px 0 0;
}

#cart .cart_infos .bonus_rep_cart .free_visio {
    grid-area: free_visio;
    background: #00b5e2;
    border-radius: 10px;
    font-size: 15px;
    color: #fff;
    text-align: center;
    padding: 13px;
}
#cart .cart_infos .bonus_rep_cart .conditions {
    grid-area: conditions;
}


#cart .cart_infos .left {
    float: left;
    width: 50%;
}
#cart .cart_infos .right {
    float: right;
    width: 50%;
}
#cart .cart_infos .hydro_free_shipping {
    width: calc(100% - 20px);
}
#cart .cart_infos .reassurance_container {
    width: calc(100% - 20px);
}
#cart .cart-detailed-actions a {
    width: 100%;
    padding: 10px 0 !important;
    background: #ef9d51;
    border-radius: 8px;
}


@media (max-width: 560px) {

    #cart .cpl_visio {
        display: flex;
        height: 64px;
        padding: 0;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 6px;
        text-transform: uppercase;
    }
    #cart .cpl_price .cpl_price_crossed {
        position: relative;
        display: block;
        height: 20px;
        line-height: initial;
        margin-top: -13px;
        background: none;
    }
    #cart .cpl_price .cpl_price_crossed::after {
        content: '';
        position: absolute;
        display: block;
        bottom: 13px;
        right: 0;
        width: 50%;
        height: 2px;
        border-bottom: 1px solid #626568;
        transform: rotate(341deg);
    }

    #cart .cart_infos .bonus_rep_cart {
        grid-template-columns: 100%;
        grid-template-rows: 60px 34px 70px 56px 30px;
        gap: 4px 0px;
        grid-template-areas:
            "title"
            "toggle_switch"
            "process"
            "free_visio"
            "conditions";
    }
    #cart .cart_infos .bonus_rep_cart .title {
        padding-left: 94px;
        font-size: 13px;
        border-radius: 10px 10px 0 0;
    }
    #cart .cart_infos .bonus_rep_cart .title .logo_qualirepar {
        top: 8px;
        left: 10px;
        width: auto;
        height: 44px;
        border-radius: 6px;
    }
    #cart .cart_infos .bonus_rep_cart .toggle_switch {
        border-radius: 0 0 10px 10px;
        font-size: 16px;
    }
    #cart .cart_infos .bonus_rep_cart .process {
        grid-area: process;
        display: flex;
        align-items: flex-end;
        padding: 0 0 10px 0;
        margin: 0 auto;
        justify-content: space-between;
    }
    #cart .cart_infos .bonus_rep_cart .process .icon {
        font-size: 12px;
        color: #626568;
    }
    #cart .cart_infos .bonus_rep_cart .process .icon_cart {
        display: block;
        height: 28px !important;
        margin: 0 auto !important;
    }
    #cart .cart_infos .bonus_rep_cart .process .icon_rdv {
        display: block;
        height: 28px !important;
        margin: 0 auto !important;
    }
    #cart .cart_infos .bonus_rep_cart  .process .icon_visio {
        display: block;
        height: 28px !important;
        margin: 0 auto !important;
    }
    #cart .cart_infos .bonus_rep_cart .process .icon_validate {
        display: block;
        height: 28px !important;
        margin: 0 auto !important;
    }
    #cart .cart_infos .bonus_rep_cart .process .chevron {
        font-size: 16px;
        color: #626568;
        margin-bottom: -1px;
    }
    #cart .cart_infos .bonus_rep_cart .free_visio {
        font-size: 15px;
        line-height: 16px;
        padding: 4px 0;
    }
    #cart .cart_infos .bonus_rep_cart .conditions {
        font-size: 8px;
        text-align: center;
    }

    #cart .cart_infos .left,
    #cart .cart_infos .right {
        float: none;
        width: 100%;
    }
    #cart .cart_infos .hydro_free_shipping,
    #cart .reassurance_container {
        width: 100%;
    }

}


/* BONUS v3 */

.bonus_v3 {
    padding-bottom: 300px;
}
.bonus_v3 .hidden {
    display: none !important;
}
.bonus_v3 .disabled,
.bv3_btn:disabled {
    background: #ccc !important;
    color: #626568 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}
.bonus_v3 .bv3_btn:hover {
    background: #08c4f3;
}
.bonus_v3 .bv3_btn:focus {
    outline: none;
}

.bonus_v3 .mobile,
.my_bonus_v3 .mobile {
    display: none;
    text-decoration: inherit;
}
.bonus_v3 .desktop,
.my_bonus_v3 .desktop {
    display: inline-block;
    text-decoration: inherit;
}
@media (max-width: 768px) {
    .bonus_v3 .mobile,
    .my_bonus_v3 .mobile {
        display: inline-block;
        text-decoration: inherit;
    }
    .bonus_v3 .desktop,
    .my_bonus_v3 .desktop {
        display: none;
        text-decoration: inherit;
    }
}


.bv3_maintenance {
    display: flex;
    margin: 20px auto;
    padding: 15px;
    border: 2px solid #ef9d51;
    border-radius: 10px;
    justify-content: center;
    align-items: center;
    gap: 20px;
}
.bv3_maintenance .work_icon {
    font-size: 60px;
    color: #ef9d51;
}
.bv3_maintenance .text {
    font-size: 18px;
    color: #404040;
    line-height: 22px;
}

.bv3_login {
    text-align: center;
    margin: 40px 0;
}
.bv3_login form {
    width: 70%;
    margin: 0 auto;
}

.bonus_v3 .how_to {
    display: flex;
    gap: 10px;
    margin: 30px 0;
    border-radius: 10px;
    justify-content: space-around;
    align-items: center;
    overflow: hidden;
}
.bonus_v3 .how_to .step {
    position: relative;
    display: flex;
    flex: 1;
    height: 80px;
    background: #f1f1f1;
    justify-content: center;
    align-items: center;
    gap: 15px;
}
.bonus_v3 .how_to .logo_qualirepar {
    height: 50px;
    mix-blend-mode: multiply;
}
.bonus_v3 .how_to .step .step_img {
    height: 40px;
}
.bonus_v3 .how_to .step:not(:last-child)::after {
    display: block;
    content: "\2039";
    position: absolute;
    z-index: 2;
    top: 22px;
    right: -22px;
    width: 38px;
    height: 38px;
    background: #fff;
    font-size: 52px;
    color: #00b5e2;
    text-align: center;
    font-weight: 600;
    line-height: 30px;
    transform: rotate(180deg);
    border-radius: 50%;
}


.bonus_v3 h1, .bonus_v3 h3 {
    text-align: center;
}

.bonus_v3 .bv3_block_container {
    margin: 50px 0 20px 0;
    text-align: center;
}
.bonus_v3 .bv3_block {
    position: relative;
    z-index: 1;
    padding: 40px 0 20px 0;
    background: #f1f1f1;
    border-radius: 10px;
    text-align: center;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px;
}
.bonus_v3 .bv3_block_container.block_1 .bv3_block {
    z-index: 3;
}
.bonus_v3 .bv3_block_container.block_1 h2 {
    z-index: 4;
}
.bonus_v3 .bv3_block.locked::after {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    content: '';
    width: 100%;
    height: 100%;
    background-color: #505050eb;
    background-image: url(../../../../img/cms/BONUS/lock_icon.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100px;
    border-radius: 10px;
}
.bonus_v3 h2 {
    position: relative;
    z-index: 2;
    display: inline-block;
    bottom: -22px;
    font-size: 16px;
    color: #fff;
    text-transform: uppercase;
    background: #00b5e2;
    padding: 6px 20px;
    border-radius: 10px;
}
.bonus_v3 .bv3_block_container h2::before {
    display: inline-block;
    position: relative;
    width: 20px;
    height: 20px;
    background: #fff;
    border-radius: 50%;
    color: #00b5e2;
    margin-right: 10px;
    line-height: 20px;
}
.bonus_v3 .bv3_block_container h2.t1::before { content: '1'; }
.bonus_v3 .bv3_block_container h2.t2::before { content: '2'; }
.bonus_v3 .bv3_block_container h2.t3:before { content: '3'; }
.bonus_v3 .bv3_block_container h2.t4::before { content: '4'; }
.bonus_v3 .bv3_block_container h2.t5::before { content: '5'; }
.bonus_v3 .bv3_block_container h2.t6::before { content: '6'; }
.bonus_v3 .bv3_block_container h2.t7::before { content: '7'; }
.bonus_v3 .bv3_block_container h2.t8::before { content: '8'; }

.bonus_v3 .bv3_orders {
    position: relative;
    width: 50%;
    height: 50px;
    background: #fff;
    margin: 0 auto;
}
.bonus_v3 .bv3_orders .select_line.first::after {
    display: block;
    position: absolute;
    top: 16px;
    right: 16px;
    content: "\203A";
    font-size: 60px;
    color: #00b5e2;
    transform: rotate(90deg);
    transition: .3s ease;
}
.bonus_v3 .bv3_orders.opened .select_line.first::after {
    right: 26px;
    transform: rotate(-90deg);
}
.bonus_v3 .bv3_orders .listing {
    position: relative;
    display: none;
    z-index: 3;
}
.bonus_v3 .bv3_orders .select_line {
    display: flex;
    width: 100%;
    height: 50px;
    text-align: left;
    align-items: center;
    font-size: 16px;
    color: #404040;
    padding: 0 20px;
    background: #fff;
    cursor: pointer;
    transition: .3s ease;
}
.bonus_v3 .bv3_orders .select_line:not(.first):hover,
.bonus_v3 .bv3_orders .select_line.selected {
    color: #fff;
    background: #00b5e2;
}
.bonus_v3 .bv3_orders .select_line .no_bonus {
    font-size: 12px;
    color: #bb2222;
    padding: 2px 4px;
    margin-left: 16px;
    border: 1px solid #bb2222;
    border-radius: 12px;
}


.bonus_v3 .bv3_selected_order {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    margin-top: 10px;
    background: #f1f1f1;
    border-radius: 10px;
}
.bonus_v3 .bv3_selected_order p {
    font-size: 16px;
    text-transform: uppercase;
}
.bonus_v3 .bv3_selected_order .selected_order {
    width: 50%;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    padding: 10px;
}
.bonus_v3 .bv3_product {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    background: #f1f1f1;
    border-radius: 10px;
}
.bonus_v3 .bv3_product p {
    font-size: 16px;
    text-transform: uppercase;
}
.bonus_v3 .bv3_product .product {
    display: grid;
    width: 50%;
    grid-template-columns: 130px auto;
    grid-template-rows: 60px 30px 40px;
    gap: 0px 0px;
    grid-auto-flow: row;
    grid-template-areas:
    "cover name"
    "cover reference"
    "cover refund_amount";
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    padding: 0 0 0 10px;
}
.bonus_v3 .bv3_product .product .cover {
    grid-area: cover;
}
.bonus_v3 .bv3_product .product .cover img {
    width: 100%;
    height: 100%;
}
.bonus_v3 .bv3_product .product .name {
    grid-area: name;
    text-align: left;
    padding: 15px 0 0 15px;
}
.bonus_v3 .bv3_product .product .reference {
    grid-area: reference;
    text-align: left;
    padding: 0 0 0 15px;
}
.bonus_v3 .bv3_product .product .refund_amount {
    grid-area: refund_amount;
    text-align: left;
    padding: 0 15px;
}

.bonus_v3 .bv3_product .product .amount {
    display: inline-block;
    font-size: 12px;
    color: #fff;
    text-transform: uppercase;
    padding: 6px 20px 3px 20px;
    background: #83cc29;
    border-radius: 10px;
}
.bonus_v3 .bv3_product .product .amount b {
    font-size: 18px;
}
/*
.bonus_v3 .bv3_product .product:hover,
.bonus_v3 .bv3_product .product.selected {
    border: 4px solid #00b5e2;
}
*/

.bonus_v3 .bv3_infos .device_type {
    display: flex;
    gap: 20px;
    justify-content: center;
}
.bonus_v3 .bv3_infos .device_type .device {
    display: flex;
    width: calc(580px / 3);
    height: 140px;
    padding: 10px;
    background: #fff;
    border-radius: 10px;
    cursor: pointer;
    border: 4px solid transparent;
    transition: .3s ease;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
}
.bonus_v3 .bv3_infos .device_type .device img {
    display: block;
    width: 80px;
}
.bonus_v3 .bv3_infos .device_type .device:hover,
.bonus_v3 .bv3_infos .device_type .device.selected {
    border: 4px solid #00b5e2;
}
.bonus_v3 .bv3_infos .device_line {
    position: relative;
    width: 620px;
    height: 50px;
    margin: 20px auto 0 auto;
    background: #fff;
    border-radius: 10px;
}
.bonus_v3 .bv3_infos .device_line #imei_modal_btn {
    position: absolute;
    top: 0;
    right: 0;
    height: 50px;
    border: none;
    background: none;
    color: #00b5e2;
    text-decoration: underline;
}
.bonus_v3 .bv3_infos .device_line #imei_modal_btn i {
    vertical-align: -7px;
}
.bonus_v3 .bv3_infos .device_line input,
.bonus_v3 .bv3_infos .device_line textarea,
.bonus_v3 .bv3_infos .device_line select {
    width: 100%;
    height: 100%;
    border: none;
    background: none;
    font-size: 16px;
    font-weight: 600;
    color: #00b5e2;
    padding: 0 20px;
}
.bonus_v3 .bv3_infos .device_line textarea {
    padding: 20px;
}
.bonus_v3 .bv3_infos .device_line input:focus,
.bonus_v3 .bv3_infos .device_line textarea:focus,
.bonus_v3 .bv3_infos .device_line select:focus{
    outline: none;
}
.bonus_v3 .bv3_infos .device_line.description {
    height: 100px;
}
.bonus_v3 .bv3_infos .device_line.iw {
    display: flex;
    align-items: center;
    font-size: 16px;
    font-weight: 600;
    color: #626568;
    padding: 0 20px;
}
.bonus_v3 .bv3_infos .device_line.iw .iw_btn {
    display: inline-block;
    margin-left: 15px;
    padding: 4px 8px;
    text-transform: uppercase;
    color: #00b5e2;
    border: 2px solid #00b5e2;
    border-radius: 6px;
    cursor: pointer;
    transition: .3s ease;
}
.bonus_v3 .bv3_infos .device_line.iw .iw_btn.selected {
    color: #fff;
    background: #00b5e2;
}
.bonus_v3 .bv3_infos .warranty_alert {
    height: auto;
    padding: 8px;
    color: #bb2222;
}


.bonus_v3 .next_step_btn {
    font-size: 18px;
    color: #fff;
    text-transform: uppercase;
    background: #00b5e2;
    margin: 30px auto 0 auto;
    padding: 10px 20px 8px 20px;
    border: none;
    border-radius: 20px;
    transition: .3s ease;
}
.bonus_v3 .next_step_btn:focus {
    outline: none;
}

.bonus_v3 .bv3_signature .signature {
    position: relative;
    width: 400px;
    height: 200px;
    background: #fff;
    margin: 20px auto;
    cursor: url(https://icons.iconarchive.com/icons/designcontest/vintage/32/Patent-Pen-icon.png) 0 30, progress;
    border-radius: 8px;
}
.bonus_v3 .bv3_signature #signature_pad {
    width: 100%;
    height: 100%;
}
.bonus_v3 .bv3_signature .signature #clear_signature {
    position: absolute;
    display: flex;
    bottom: 4px;
    right: 4px;
    border: 1px solid #888;
    background: none;
    font-size: 11px;
    color: #888;
    text-transform: uppercase;
    align-items: center;
    border-radius: 4px;
}
.bonus_v3 .bv3_signature .signature #clear_signature:focus {
    outline: none;
}
.bonus_v3 .bv3_signature .signature #clear_signature span {
    font-size: 15px;
}

.bv3_calendar {
    width: 60%;
    margin: 20px auto 30px auto;
}
.bv3_calendar .calendar {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}
.bv3_calendar .date {
    display: flex;
    width: calc((100% - 60px) / 4);
    height: 100px;
    align-items: center;
    text-transform: capitalize;
    justify-content: center;
    text-align: center;
    font-size: 18px;
    color: #fff;
    line-height: 22px;
    background: #00b5e2;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px, rgba(0, 0, 0, 0.07) 0px 4px 8px, rgba(0, 0, 0, 0.07) 0px 8px 16px, rgba(0, 0, 0, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px;
    transition: .3s ease;
}
.bv3_calendar .date:hover {
    background: #08c4f3;
}
.bv3_calendar .top_bar {
    width: 100%;
    height: 40px;
    background: #404040;
    border-radius: 8px;
    font-size: 16px;
    color: #fff;
    text-align: left;
    line-height: 40px;
    padding: 0 20px 0 10px;
    box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px, rgba(0, 0, 0, 0.07) 0px 4px 8px, rgba(0, 0, 0, 0.07) 0px 8px 16px, rgba(0, 0, 0, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px;
}
.bv3_calendar .top_bar .return {
    display: inline-block;
    cursor: pointer;
}
.bv3_calendar .top_bar .selected_date_container {
    display: inline-flex;
    float: right;
}
.bv3_calendar .top_bar .selected_date {
    font-size: 18px;
    text-transform: capitalize;
}
.bv3_calendar .top_bar .return span,
.bv3_calendar .top_bar .change_day {
    font-size: 38px;
    vertical-align: -13px;
    margin-right: 4px;
    cursor: pointer;
}
.bv3_calendar .slots_container .slots {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}
.bv3_calendar .slots_container .slots .slot {
    width: calc((100% - 30px) / 3);
    height: 30px;
    text-align: center;
    font-size: 16px;
    color: #fff;
    line-height: 32px;
    background: #00b5e2;
    border-radius: 20px;
    cursor: pointer;
    box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px, rgba(0, 0, 0, 0.07) 0px 4px 8px, rgba(0, 0, 0, 0.07) 0px 8px 16px, rgba(0, 0, 0, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px;
    transition: .3s ease;
}
.bv3_calendar .slots_container .slots .slot.taken {
    background: #fff;
    color: #aaa;
    cursor: not-allowed;
}
.bv3_calendar .slots_container .slots .slot:not(.taken):hover {
    background: #08c4f3;
}
.bv3_calendar .confirm_window {
    display: flex;
    gap: 15px;
    width: 100%;
    height: 250px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.bv3_calendar .confirm_window button {
    width: 70%;
    height: 40px;
    border: none;
    color: #fff;
    font-size: 14px;
    text-transform: uppercase;
    border-radius: 20px;
    cursor: pointer;
}
.bv3_calendar .confirm_window .confirm_selected_date {
    font-size: 18px;
    color: #00b5e2;
    text-transform: capitalize;
    padding-bottom: 10px;
    border-bottom: 1px solid #626568;
}
.bv3_calendar .confirm_window #cancel_date {
    background: #626568;
}
.bv3_calendar .confirm_window #confirm_date {
    background: #00b5e2;
}

.bonus_v3 .bv3_bonus_created {
    padding: 15px 0 0 0;
}
.bonus_v3 .bv3_bonus_created p {
    font-size: 18px;
    margin-top: 20px;
}
.bonus_v3 .bv3_bonus_created ul {
    width: 40%;
    text-align: left;
    margin: 0 auto;
    padding: 15px;
    background: #fff;
    border-radius: 8px;
}
.bonus_v3 .bv3_bonus_created ul li {
    height: 30px;
    line-height: 30px;
    font-size: 15px;
    list-style-type: none;
}
.bonus_v3 .bv3_bonus_created #reference {
    color: #fff;
    background: #61d0c4;
    padding: 2px 6px 1px 6px;
    border-radius: 4px;
}
.bonus_v3 .bv3_bonus_created #dtv_string {
    font-size: 16px;
    text-transform: capitalize;
    color: #ef9d51;
    font-weight: 600;
}
.bonus_v3 .bv3_bonus_created #visio_url {
    text-decoration: underline;
}
.bonus_v3 .bv3_bonus_created #bonus_url {
    display: block;
    width: 30%;
    margin: 15px auto 0 auto;
    font-size: 20px;
    color: #fff;
    background: #00b5e2;
    padding: 10px 30px;
    border-radius: 30px;
}


.my_bonus_v3 .hidden {
    display: none !important;
}
.my_bonus_v3 .bv3_btn {
    color: #fff;
    text-transform: uppercase;
    border: none;
    background: #00b5e2;
    cursor: pointer;
    transition: .3s ease;
}
.my_bonus_v3 .bv3_btn:hover {
    background: #2acff8;
}
.my_bonus_v3 input:focus,
.my_bonus_v3 button:focus {
    outline: none;
 }
.my_bonus_v3 {
    position: relative;
}
.my_bonus_v3 .top_buttons {
    position: absolute;
    top: -4px;
    right: 0;
}
.my_bonus_v3 .top_buttons .top_button {
    display: inline-block;
    text-transform: uppercase;
    margin-left: 6px;
    padding: 8px 15px;
    background: none;
    border: 1px solid #00b5e2;
    transition: .3s ease;
}
.my_bonus_v3 .top_buttons .top_button .icon {
    font-size: 22px;
    color: #00b5e2;
    vertical-align: -6px;
    margin-right: 4px;
}
.my_bonus_v3 .top_buttons .top_button:hover {
    background: #f1f1f1;
}
.my_bonus_v3 .top_buttons .top_button:focus {
    outline: none;
}
.my_bonus_v3 .top_buttons .history_container {
    position: absolute;
    display: none;
    z-index: 10;
    top: 39px;
    right: 0;
    width: 500px;
    padding: 15px;
    background: #ffffff;
    border: 1px solid #00b5e2;
}
.my_bonus_v3 .top_buttons .history_container.opened {
    display: flex !important;
    flex-direction: column-reverse;
}
.my_bonus_v3 .top_buttons .history_container .datetime {
    display: inline-block;
    width: 120px;
    color: #00b5e2;
    margin-right: 20px;
}
.my_bonus_v3 .top_buttons .history_container .datetime {
    color: #626568;
    margin-right: 10px;
}


.my_bonus_v3 .top_text {
    margin: 30px 0 0 0;
}


.my_bonus_v3 .steps {
    display: flex;
    height: 120px;
    gap: 15px;
    padding: 0;
    margin: 40px 0;
    border: none;
    border-radius: 10px;
    overflow: hidden;
}
.my_bonus_v3 .steps .step {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1;
    background: #f1f1f1;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 6px;
}
.my_bonus_v3 .steps .step:not(:last-child)::after {
    display: block;
    content: "\2039";
    position: absolute;
    z-index: 2;
    top: 47px;
    right: -25px;
    width: 34px;
    height: 34px;
    background: #fff;
    font-size: 52px;
    color: #00b5e2;
    text-align: center;
    font-weight: 600;
    line-height: 30px;
    transform: rotate(180deg);
    border-radius: 50%;
}

.my_bonus_v3 .steps .step .title {
    font-size: 14px;
    font-weight: 600;
}
.my_bonus_v3 .steps .step .step_img {
    height: 60px;
}
.my_bonus_v3 .steps .step .checkbox {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 26px;
    height: 26px;
    background: #fff;
    border-radius: 8px 0 0 0;
}
.my_bonus_v3 .steps .step:last-child .checkbox {
    border-bottom-right-radius: 6px;
}
.my_bonus_v3 .steps .step .checkbox .check_icon {
    width: 22px;
    height: 22px;
    margin: 2px;
}
.my_bonus_v3 .steps .step .checkbox.checked {
    background: #5ad12e;
}
.my_bonus_v3 .steps .step .checkbox.checked .check_icon {
    filter: brightness(100);
}
.my_bonus_v3 .steps .step[data-target] {
    cursor: pointer;
}


.my_bonus_v3 .blocks {
    display: grid;
}
.my_bonus_v3 .block {
    position: relative;
    display: flex;
    margin: 15px 0;
    border: 1px solid #f1f1f1;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
    border-radius: 10px;
    overflow: hidden;
}
.my_bonus_v3 .block.unlocked {
    order: 1;
}
.my_bonus_v3 .block.locked {
    order: 2;
}
.my_bonus_v3 .block.locked::after {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    content: '';
    width: 100%;
    height: 100%;
    background-color: #f9f9f9ba;
    filter: blur(0.2px);
}
.my_bonus_v3 .block .icon {
    display: flex;
    width: 100px;
    background: #f1f1f1;
    align-items: flex-start;
}
.my_bonus_v3 .block .icon img {
    width: 60px;
    margin: 20px;
}
.my_bonus_v3 .block .content {
    flex: 1;
    width: calc(100% - 100px);
    padding: 15px;
    font-size: 15px;
}
.my_bonus_v3 .block .content h2 {
    font-size: 18px;
    color: #00b5e2;
    text-transform: uppercase;
}

.my_bonus_v3 .appointment {
    transition: .6s ease;
}
.my_bonus_v3 .appointment.opened {
    //height: 890px;
}
.my_bonus_v3 .appointment .visio_dt {
    font-size: 18px;
    font-weight: 600;
    color: #ef9d51;
    text-transform: capitalize;
}
.my_bonus_v3 .appointment .tech_firstname {
    font-weight: 600;
    color: #4dc731;
}
.my_bonus_v3 .appointment .appointment_btn {
    display: flex;
    width: 320px;
    height: 32px;
    font-size: 14px;
    color: #fff;
    text-transform: uppercase;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    border: none;
    border-radius: 6px;
}
.my_bonus_v3 .appointment .bv3_calendar {
    margin-top: 40px;
}


.my_bonus_v3 .validation {

}
.my_bonus_v3 .validation .validation_content {
    display: flex;
    gap: 15px;
}
.my_bonus_v3 .validation .validation_content .choices {
    position: relative;
    display: flex;
    background: #f1f1f1;
    padding: 10px;
    border-radius: 10px;
    flex-direction: column;
    gap: 10px;
}
.my_bonus_v3 .validation .validation_content .choice {
    display: flex;
    font-size: 13px;
    padding: 15px;
    background: #fff;
    border-radius: 10px;
    gap: 15px;
    align-items: center;
    cursor: pointer;
    transition: .3s ease;
}

.my_bonus_v3 .validation .validation_content .choice .checkbox {
    width: 18px;
    height: 18px;
    background: #f1f1f1;
    border: 3px solid #f1f1f1;
    border-radius: 50%;
}
.my_bonus_v3 .validation .validation_content .choice:hover .checkbox,
.my_bonus_v3 .validation .validation_content .choice.selected .checkbox {
    background: #00b5e2;
}
.my_bonus_v3 .validation .validation_content .choice .text {
    width: calc(100% - 35px);
}
.my_bonus_v3 .validation .validation_content .time_rate {
    display: flex;
    background: #f1f1f1;
    padding: 15px;
    border-radius: 10px;
    flex-direction: column;
    gap: 10px;
}
.my_bonus_v3 .validation .validation_content .time_rate .time_container {
    position: relative;
    font-size: 13px;
    padding: 15px;
    background: #fff;
    border: 4px solid #fff;
    border-radius: 10px;
}
.my_bonus_v3 .validation .validation_content .time_rate .ranges {
    display: flex;
    justify-content: flex-start;
    gap: 10px;
    height: 24px;
    margin-top: 15px;
}
.my_bonus_v3 .validation .validation_content .time_rate .ranges .range {
    font-size: 16px;
    background: #f1f1f1;
    padding: 4px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: .3s ease;
}
.my_bonus_v3 .validation .validation_content .time_rate .ranges .range:hover,
.my_bonus_v3 .validation .validation_content .time_rate .ranges .range.selected {
    color: #fff;
    background: #00b5e2;
}

.my_bonus_v3 .validation .validation_content .time_rate .rate_container {
    font-size: 13px;
    padding: 15px;
    background: #fff;
    border-radius: 10px;
    border: 4px solid #fff;
}
.my_bonus_v3 .validation .validation_content .time_rate .rates i {
    display: inline-block;
    padding: 4px 8px;
    font-size: 14px;
    text-align: center;
    font-style: normal;
    background: #f1f1f1;
    border-radius: 4px;
    margin: 10px 4px 0 4px;
    cursor: pointer;
    transition: .3s ease;
}
.my_bonus_v3 .validation .validation_content .time_rate .rates i:hover,
.my_bonus_v3 .validation .validation_content .time_rate .rates i.selected {
    color: #fff;
    background: #00b5e2;
}
.my_bonus_v3 .validation .submit_validation_btn {
    float: right;
    height: 32px;
    padding: 4px 15px;
    margin-top: 15px;
    border-radius: 6px;
}
.my_bonus_v3 .validation .submit_validation_btn:disabled {
    background: #ccc;
    cursor: not-allowed;
}
.my_bonus_v3 .validation .submit_validation_btn.no_imei_serial_photo {
    background: #ccc;
    cursor: not-allowed;
    line-height: 27px;
}
.my_bonus_v3 .validation .imei_serial_message {
    float: right;
    font-size: 14px;
    color: #bb2222;
    margin: 22px 10px 0 0;
}

.my_bonus_v3 .validation .orange_1::before {
    position: absolute;
    content: '';
    display: block;
    width: calc(100% - 20px);
    height: calc(100% - 34px);
    border: 4px solid #ef9d51;
    border-radius: 10px;
    pointer-events: none;
    animation: pulse-border 1.2s infinite ease-in-out;
}
.my_bonus_v3 .validation .orange_2 {
    /*border: 4px solid #ef9d51 !important;*/
    border-radius: 10px;
    animation: pulse-border 1.2s infinite ease-in-out;
}


.my_bonus_v3 .infos {
    position: relative;
}

.my_bonus_v3 .infos .columns {
    display: flex;
    width: 70%;
    gap: 20px;
    font-size: 14px;
}
.my_bonus_v3 .infos .columns .subtitle {
    display: block;
    color: #404040;
    text-transform: uppercase;
    background: #f1f1f1;
    padding: 5px 0 4px 10px;
    margin-bottom: 6px;
    border-radius: 4px;
}
.my_bonus_v3 .infos .current_state {
    position: absolute;
    top: 0;
    right: 0;
    width: 30%;
    height: 100%;
    padding: 15px;
    background: #f1f1f1;
}
.my_bonus_v3 .infos .current_state h3 {
    text-transform: uppercase;
}
.my_bonus_v3 .infos .current_state .state_name {
    background: #434343;
    text-transform: uppercase;
    padding: 10px;
    font-size: 16px;
    line-height: 22px;
    font-weight: 600;
}
.my_bonus_v3 .infos .current_state .state_caption {
    position: relative;
    background: #fff;
    padding: 10px;
    font-size: 14px;
    margin: 20px 0 0 0;
}
/*
.my_bonus_v3 .infos .current_state .state_caption::before {
    position: absolute;
    content: 'i';
    top: -8px;
    left: -8px;
    width: 16px;
    height: 16px;
    background: #00b5e2;
    color: #fff;
    font-weight: 600;
    text-align: center;
    line-height: 15px;
    border-radius: 50%;
}
*/

.my_bonus_v3 .imei .content {
    padding: 11px;
    border: 4px solid #fff;
}
.my_bonus_v3 .imei .content.orange_3 {
    /*border: 4px solid #ef9d51 !important;*/
    border-radius: 0 10px 10px 0;
    animation: pulse-border 1.2s infinite ease-in-out;
}
.my_bonus_v3 .imei_form {
    display: inline-flex;
    margin-left: 20px;
    padding: 10px;
    background: #f1f1f1;
    border-radius: 10px;
}
.my_bonus_v3 .imei .imei_input {
    height: 32px;
    font-size: 18px;
    color: #00b5e2;
    border: none;
    padding: 0 6px;
}
.my_bonus_v3 .imei #imei_counter {
    width: 54px;
    height: 32px;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    line-height: 32px;
    margin-left: 4px;
    background: #fff;
    transition: color 0.3s ease;
}
.my_bonus_v3 .imei #imei_counter.valid {
    color: green;
    animation: pulse 0.3s ease;
}
.my_bonus_v3 .imei #check_imei_btn {
    height: 32px;
    color: #fff;
    text-transform: uppercase;
    border: none;
    margin-left: 4px;
    padding: 0 20px;
}
.my_bonus_v3 .imei .response {
    height: 32px;
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    line-height: 32px;
    text-transform: uppercase;
    margin-left: 4px;
    padding: 0 20px;
}
.my_bonus_v3 .imei .response.imei_valid {
    background: #5ad12e;
}
.my_bonus_v3 .imei .response.imei_unvalid {
    background: #bb2222;
}
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}
.my_bonus_v3 .imei #imei_modal_btn {
    display: block;
    background: #ef9d51;
    border: none;
    color: #fff;
    text-decoration: underline;
    margin: 8px 0 0 0;
    border-radius: 4px;
}
.my_bonus_v3 .imei #imei_modal_btn i {
    vertical-align: -8px;
}


.my_bonus_v3 .imei .submit_serial_btn {
    height: 32px;
    color: #fff;
    text-transform: uppercase;
    border: none;
    margin-left: 4px;
    padding: 0 20px;
}


.my_bonus_v3 .photos .content {
    padding: 11px;
    border: 4px solid #fff;
}
.my_bonus_v3 .photos .content.orange_3 {
    /*border: 4px solid #ef9d51 !important;*/
    border-radius: 0 10px 10px 0;
    animation: pulse-border 1.2s infinite ease-in-out;
}
.my_bonus_v3 .photos .photos_upload {
    display: flex;
    float: left;
    width: 260px;
    flex-direction: column;
}
.my_bonus_v3 .photos .photos_form {
    display: inline-block;
    float: left;
    width: 240px;
    background: #f1f1f1;
    padding: 10px;
    margin-right: 15px;
    border-radius: 10px
}
.my_bonus_v3 .photos .photos_form .photos_counter {
    display: block;
}
.my_bonus_v3 .photos .photos_form .upload_photo_btn {
    position: relative;
    height: 32px;
    line-height: 32px;
    margin: 10px 0;
    padding: 0 20px 0 40px;
}
.my_bonus_v3 .photos .photos_form .upload_photo_btn i {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 26px;
    height: 26px;
    background: #fff;
    color: #00b5e2;
}
.my_bonus_v3 .photos .photos_form .photos_message {
    color: #bb2222;
    /*margin-top: 10px;*/
}

.my_bonus_v3 .photos #photos_modal_btn {
    width: 200px;
    border: none;
    color: #fff;
    background: #ef9d51;
    text-decoration: underline;
    margin: 8px 0 0 0;
    border-radius: 4px;
}
.my_bonus_v3 .photos #photos_modal_btn i {
    vertical-align: -8px;
}

.my_bonus_v3 .photos .photos_list {
    display: inline-flex;
    width: calc(100% - 260px);
    gap: 10px;
}
.my_bonus_v3 .photos .photo_container {
    width: 160px;
}
.my_bonus_v3 .photos .photo_container .photo {
    display: flex;
    position: relative;
    width: 160px;
    height: 160px;
    border: 1px solid #626568;
    border-radius: 10px;
    overflow: hidden;
    justify-content: center;
    align-items: center;
}
.my_bonus_v3 .photos .photo_container img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.my_bonus_v3 .photos .photo_container .photo .label {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 24px;
    background: #40404085;
    font-size: 16px;
    color: #fff;
    line-height: 24px;
    text-align: center;
    padding: 0 10px;
}
.my_bonus_v3 .photos .photo_container .delete_btn {
    display: block;
    float: right;
    background: none;
    border: none;
    text-transform: uppercase;
    font-size: 12px;
    margin: 4px -4px 0 0;
}
.my_bonus_v3 .photos .photo_container .delete_btn i {
    font-size: 18px;
    vertical-align: -5px;
}
.my_bonus_v3 .photos .photo_container .delete_btn:hover {
    color: #bb2222;
}

@keyframes pulse-border {
    0% { border-color: #ef9d51; }
    50% { border-color: #f86630; }
    100% { border-color: #ef9d51; }
}


.my_bonus_v3 .messages {

}
.my_bonus_v3 .messages .content {
    height: 100%;
}
.my_bonus_v3 .messages .messages_list {
    display: flex;
    flex-direction: column-reverse;
    height: 240px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    padding-right: 10px;
    margin: 20px 0 10px 0;
}
.my_bonus_v3 .messages .messages_list .message {
    position: relative;
    width: 80%;
    border-radius: 10px;
    margin-bottom: 24px;
}
.my_bonus_v3 .messages .messages_list .message.client {
    background: #f3f3f3;
    margin-left: 4px;
    box-shadow: rgba(14, 63, 126, 0.04) 0px 0px 0px 1px, rgba(42, 51, 69, 0.04) 0px 1px 1px -0.5px, rgba(42, 51, 70, 0.04) 0px 3px 3px -1.5px, rgba(42, 51, 70, 0.04) 0px 6px 6px -3px, rgba(14, 63, 126, 0.04) 0px 12px 12px -6px, rgba(14, 63, 126, 0.04) 0px 24px 24px -12px;
}
.my_bonus_v3 .messages .messages_list .message.brico {
    background: #fefefe;
    margin-right: 4px;
    box-shadow: rgba(14, 63, 126, 0.04) 0px 0px 0px 1px, rgba(42, 51, 69, 0.04) 0px 1px 1px -0.5px, rgba(42, 51, 70, 0.04) 0px 3px 3px -1.5px, rgba(42, 51, 70, 0.04) 0px 6px 6px -3px, rgba(14, 63, 126, 0.04) 0px 12px 12px -6px, rgba(14, 63, 126, 0.04) 0px 24px 24px -12px;
    margin-left: 20%;
}
.my_bonus_v3 .messages .messages_list .message .text {
    margin: 0;
    padding: 8px 14px;
    font-size: 14px;
    color: #404040;
}
.my_bonus_v3 .messages .messages_list .message .datetime {
    position: absolute;
    height: 16px;
    bottom: -20px;
    right: -10px;
    margin: 0;
    font-size: 10px;
    color: #404040;
    padding: 0 8px;
    border-radius: 0 0 6px 6px;
}
.my_bonus_v3 .messages form {
    display: flex;
    gap: 15px;
}
.my_bonus_v3 .messages .message_input {
    width: calc(100% - 215px);
}
.my_bonus_v3 .messages .send_message_btn {
    width: 200px;
}


.my_bonus_v3 .preparation,
.my_bonus_v3 .recycle {
    order: 3;
}
.my_bonus_v3 .preparation .content h4,
.my_bonus_v3 .recycle .content h4 {
    display: block;
    order: 3;
    font-weight: 600;
    text-decoration: underline;
    margin: 20px 0 0 0 !important;
    margin-block-start: 0;
    margin-block-end: 0;
    line-height: 0;
}


/* Bonus v3 mobile */

@media (max-width: 768px) {

    .bonus_v3 .how_to {
        flex-direction: column;
    }
    .bonus_v3 .how_to .step {
        width: 100%;
    }
    .bonus_v3 .how_to .step:not(:last-child)::after {
        top: auto;
        right: auto;
        bottom: -20px;
        left: 20px;
        width: 28px;
        height: 28px;
        font-size: 42px;
        line-height: 23px;
        transform: rotate(270deg);
    }
    .bonus_v3 .how_to .logo_qualirepar {
        height: 38px;
        margin: 6px;
    }
    .bonus_v3 .how_to .step:not(:first-child) {
        justify-content: flex-start;
        padding-left: 76px;
    }
    .bonus_v3 .how_to .step .step_img {
        height: 30px;
        margin: 4px;
    }
    .bonus_v3 .header_text {
        text-align: justify;
    }

    .bonus_v3 .bv3_selected_order .selected_order {
        width: 100%;
    }
    .bonus_v3 .bv3_orders {
        width: 90%;
    }
    .bonus_v3 .bv3_orders .select_line {
        font-size: 13px;
    }
    .bonus_v3 .bv3_orders .commande {
        display: none;
    }
    .bonus_v3 .bv3_product .product {
        width: 100%
    }
    .bonus_v3 .bv3_product .product .name,
    .bonus_v3 .bv3_product .product .reference {
        font-size: 11px;
    }

    .bonus_v3 .bv3_infos .device_line {
        width: 94%;
    }
    .bonus_v3 .bv3_infos .device_line.iw {
        font-size: 12px;
    }

    .bonus_v3 .bv3_signature .signature {
        width: 92%;
    }


    .bv3_calendar {
        width: 94%;
        gap: 14px;
    }
    .bv3_calendar .calendar {
        gap: 10px;
    }
    .bv3_calendar .top_bar {
        font-size: 14px;
        margin-bottom: 10px;
        box-shadow: none;
    }
    .bv3_calendar .top_bar .return,
    .bv3_calendar .top_bar .selected_date_container {
        display: inline-flex;
        align-items: center;
    }
    .bv3_calendar .top_bar .return span {
        font-size: 30px;
    }
    .bv3_calendar .top_bar .selected_date {
        font-size: 14px;
    }
    .bv3_calendar .top_bar .change_day {
        font-size: 30px;
    }
    .bv3_calendar .calendar .date {
        width: 100%;
        height: 30px;
        font-size: 14px;
        color: #626568;
        background: #fff;
        box-shadow: none;
        border: 1px solid #626568;
    }
    .bv3_calendar .slots_container .slots .slot {
        border: 1px solid #ccc;
        box-shadow: none;
    }


    .bonus_v3 .bv3_bonus_created ul {
        width: 94%;
    }
    .bonus_v3 .bv3_bonus_created #bonus_url {
        width: 70%;
    }
    .bonus_v3 .bv3_bonus_created ul li {
        font-size: 13px;
    }


    .my_bonus_v3 .top_buttons {
        position: relative;
        top: 10px;
        right: auto;
    }
    .my_bonus_v3 .top_buttons .top_button {
        margin-left: 0;
        margin-right: 6px;
        padding: 2px 4px;
        font-size: 11px;
        border-radius: 4px;
    }
    .my_bonus_v3 .top_buttons .history_container {
        width: 100%;
    }
    .my_bonus_v3 .steps {
        flex-direction: column;
        height: auto;
        gap: 8px;
    }
    .my_bonus_v3 .steps .step {
        width: 100%;
        padding: 0 0 0 60px;
        flex-direction: row-reverse;
        justify-content: flex-end;
    }
    .my_bonus_v3 .steps .step .step_img {
        height: 34px;
        margin: 4px;
    }
    .my_bonus_v3 .steps .step:not(:last-child)::after {
        top: 32px;
        right: auto;
        left: 15px;
        width: 26px;
        height: 26px;
        font-size: 40px;
        line-height: 21px;
        transform: rotate(270deg);
    }
    .my_bonus_v3 .steps .step .checkbox {
        bottom: 8px;
        right: 10px;
        background: #fff;
        border-radius: 6px;
    }
    .my_bonus_v3 .steps .step[data-target] .title {
        text-decoration: underline;
    }

    .my_bonus_v3 .block {
        padding-top: 70px;
        box-shadow: none;
    }
    .my_bonus_v3 .appointment {

    }

    .my_bonus_v3 .block .icon {
        position: absolute;
        display: block;
        top: 0;
        width: 66px;
    }
    .my_bonus_v3 .block .icon img {
        width: 46px;
        margin: 12px;
    }
    .my_bonus_v3 .block .content {
        position: relative;
        width: calc(100% - 10px);
        font-size: 13px;
    }
    .my_bonus_v3 .block.imei .content,
    .my_bonus_v3 .block.photos .content {
        border: 4px solid #fff;
        border-radius: 0 0 12px 12px;
    }
    .my_bonus_v3 .block .content h2 {
        position: absolute;
        top: -70px;
        left: 66px;
        width: calc(100% - 66px);
        height: 70px;
        font-size: 16px;
        line-height: 68px;
        margin-block-start: 0;
        margin-block-end: 0;
        padding-left: 10px;
        border-bottom: 1px solid #f1f1f1;
    }
    .my_bonus_v3 .appointment .visio_dt {
        display: block;
        font-size: 18px;
        margin: 4px 0;
    }
    .my_bonus_v3 .appointment .appointment_btn {
        width: 100%;
        height: 26px;
    }

    .my_bonus_v3 .infos {

    }
    .my_bonus_v3 .infos .current_state {
        position: relative;
        width: 100%;
        height: auto;
        padding: 6px;
    }
    .my_bonus_v3 .infos .current_state h3 {
        font-size: 14px;
    }
    .my_bonus_v3 .infos .current_state .state_name {
        padding: 2px 10px;
        font-size: 14px;
    }
    .my_bonus_v3 .infos .current_state .state_caption {
        font-size: 12px;
    }
    .my_bonus_v3 .infos .columns {
        width: 100%;
        gap: 10px;
        flex-direction: column;
        margin-top: 12px;
    }

    .my_bonus_v3 .imei .imei_form {
        flex-wrap: wrap;
        margin-left: 0;
        margin-top: 6px;
    }
    .my_bonus_v3 .imei .imei_input {
        width: calc(100% - 58px);
        height: 32px;
    }
    .my_bonus_v3 .imei #check_imei_btn {
        margin-left: 0;
        margin-top: 6px;
    }
    .my_bonus_v3 .imei .response {
        font-size: 12px;
        margin-top: 6px;
    }

    .my_bonus_v3 .photos .photos_form {
        width: 100%;
    }
    .my_bonus_v3 .photos .photos_list {
        width: 100%;
        flex-direction: column;
        margin-top: 10px;
    }

    .my_bonus_v3 .messages .message_input {
        width: 100%;
    }
    .my_bonus_v3 .messages .send_message_btn {
        width: 36px;
    }


    .my_bonus_v3 .validation .validation_content {
        flex-direction: column;
    }
    .my_bonus_v3 .validation .orange_1::before {
        height: calc(100% - 20px);
    }
    .my_bonus_v3 .validation .validation_content .time_rate {
        padding: 10px;
    }
    .my_bonus_v3 .validation .validation_content .time_rate .ranges {
        flex-wrap: wrap;
        height: auto;
    }
    .my_bonus_v3 .validation .validation_content .time_rate .ranges .range {
        font-size: 14px;
        padding: 2px 10px;
    }
    .my_bonus_v3 .validation .imei_serial_message {
        display: block;
        float: none;
        margin: 10px 0 0 0;
    }
    .my_bonus_v3 .validation .submit_validation_btn.no_imei_serial_photo {
        float: none;
        text-align: center;
    }
    .my_bonus_v3 .validation .submit_validation_btn:disabled {
        width: 100%;
    }

}


/* MODALS */

#bonus_imei_modal {
    position: fixed;
    display: none;
    z-index: 999999;
    top: 200px;
    left: calc((100% - 1200px) / 2);
    width: 1200px;
    padding: 30px;
    border-radius: 12px;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 12px 28px 0px, rgba(0, 0, 0, 0.1) 0px 2px 4px 0px, rgba(255, 255, 255, 0.05) 0px 0px 0px 1px inset;
    background: #fff;
    overflow: hidden;
}
#identify_model_page {
    min-height: auto;
}
#identify_model_page b.imei_diese {
    display: inline-block;
    font-size: 24px;
    margin-top: 6px;
}
#identify_model_page b.imei_diese i {
    font-size: 50px;
    font-style: normal;
    vertical-align: -18px;
}
#identify_model_page .device.tablet .image {
    float: left;
    width: 200px;
    height: 150px;
    background: url(./../../../../img/cms/BONUS/imei_modal_tablet.jpg);
    background-repeat: no-repeat;
    background-size: 160%;
    background-position: -70px;
    border-radius: 16px;
}

#bonus_photos_modal {
    position: fixed;
    display: none;
    z-index: 999999;
    top: 200px;
    left: calc((100% - 1200px) / 2);
    width: 1200px;
    padding: 10px;
    border-radius: 12px;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 12px 28px 0px, rgba(0, 0, 0, 0.1) 0px 2px 4px 0px, rgba(255, 255, 255, 0.05) 0px 0px 0px 1px inset;
    background: #fff;
    overflow: hidden;
}

#bonus_photos_modal .photos_modal_grid {
    display: grid;
    grid-template-columns: calc(25% - 6px) calc(25% - 6px) calc(25% - 6px) calc(25% - 6px);
    grid-template-rows: auto;
    gap: 0 6px;
    padding: 6px;
    grid-auto-flow: row;
    grid-template-areas:
    "photo_1 photo_2 photo_3 photo_4";
    background: #f1f1f1;
    border-radius: 6px;
}
#bonus_photos_modal .photos_modal_grid .photo_1 {
    grid-area: photo_1;
    width: 100%;
}
#bonus_photos_modal .photos_modal_grid .photo_2 {
    grid-area: photo_2;
    width: 100%;
}
#bonus_photos_modal .photos_modal_grid .photo_3 {
    grid-area: photo_3;
    width: 100%;
}
#bonus_photos_modal .photos_modal_grid .photo_4 {
    grid-area: photo_4;
    width: 100%;
}
#bonus_photos_modal .text {
    padding: 10px;
}
#bonus_photos_modal .text b {
    font-weight: 600;
    color: #bb2222;
    text-transform: uppercase;
}


.bonus_modal_mobile_scroll {
    position: relative;
    z-index: 2;
}
.close_modal_btn {
    position: absolute;
    z-index: 10;
    top: 0;
    right: 0;
    width: 34px;
    height: 34px;
    text-align: center;
    line-height: 30px;
    background: #404040;
    border-radius: 0 0 0 10px;
    cursor: pointer;
}
.close_modal_btn i {
    font-size: 26px;
    color: #fff;
}


@media (max-width: 768px) {

    #bonus_imei_modal,
    #bonus_photos_modal {
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        padding: 10px;
        border-radius: 0;
    }
    .close_modal_btn {
        width: 40px;
        height: 40px;
        line-height: 34px;
    }
    .bonus_modal_mobile_scroll {
        height: 100%;
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
    }
    #bonus_photos_modal .bonus_modal_mobile_scroll {
        display: grid;
    }
    #bonus_photos_modal .photos_modal_grid {
        order: 2;
        grid-template-columns: 100%;
        grid-auto-flow: column;
        grid-template-areas:
            "photo_1"
            "photo_2"
            "photo_3"
            "photo_4";
    }
    #bonus_photos_modal .text {
        order: 1;
    }

}

.swal2-container {
    z-index: 100000 !important;
}