@charset "UTF-8";
/*
 * TopUp Plus By IMEDIATIS
 * Coded in 2023
 * Codes are guaranteed for target actions
 * @copyright IMEDIATIS (https://imediatis.net)
 * @author Cyrille WOUPO (cyrille@imediatis.net)
 * @package WEBADMIN 2.0
 * @client https://imediatis.net
 * @version 4.0
 * Copyright (c) IMEDIATIS Ltd 2023
 */


h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 {
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-family: "Newsreader", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-weight: 600;
    line-height: 1.2;
}

.text-black--hover:hover {
    color: var(--bs-black) !important;
}
.text-neutral {color: var(--palette-neutral-3) !important;}
.gender-woman {color: var(--palette-promoting-2) !important}
.gender-man {color: var(--palette-activating-2) !important}

.font-primary {
    font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important;
}

.font-secondary {
    font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important;
}

.font-alt {
    font-family: "Patrick Hand", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important;
}

.link-underline--hover:hover {
    text-decoration: underline !important;
    text-decoration-color: var(--palette-black) !important;
}

.link-primary--hover:hover {
    color: var(--bs-primary) !important;
}
.link-warning--hover:hover {
    color: var(--bs-warning) !important;
}

.link-dark--hover:hover {
    color: var(--bs-dark) !important;
}

.hr-divider-transparent {
    height: 1px;
    border: none;
    background-image: linear-gradient(to right, transparent, transparent, transparent);
}

.hr-divider-linear-gradient {
    height: 1px;
    border: none;
    background-image: linear-gradient(to right, transparent, var(--bs-primary), transparent);
}

.hr-divider-linear-gradient-dark {
    height: 1px;
    border: none;
    background-image: linear-gradient(to right, transparent, var(--bs-black), transparent);
}

.ime-field--error {
    border-color: var(--bs-primary) !important;
    background-color: rgba(var(--bs-primary-rgb), .125) !important;
}

.btn-disabled {
    color: #D5D7D3 !important
}

.badge {
    padding-bottom: 0.355rem !important;
}
.badge-pb-0 {padding-bottom: 0.255rem !important;}

.bg-none {background-color: transparent !important}

.bg-momo {
    background-color: var(--bs-warning) !important
}

.service-momo, .badge-pay-momo  {
    color: #000 !important;
    background-color: var(--bs-warning) !important
}

.service-om, .badge-pay-om {
    color: #ff7900 !important;
    background-color: var(--bs-black) !important
}

.service-comp {
    color: var(--bs-yellow) !important;
    background-color: var(--palette-activating-5) !important
}

.badge-soft-outstanding {
    color: var(--palette-activating-5) !important;
    background: rgba(0, 126, 156, 0.125) !important;
}

.badge-soft-wa {
    color: #f7f7f7 !important;
    background: #128C7E !important;
}
.corporate-panel {
    background-color: var(--palette-navy-7) !important;
    color: var(--palette-navy-1) !important;
}


.bg-panel-nav {
    background-color: var(--palette-neutral-1) !important
}

.stick-hover {
    display: none;
}

.btn-check:checked + label {
    background-color: var(--bs-primary) !important;
}

.btn-check:checked + label > .stick {
    display: none;
}

.btn-check:checked + label > .stick-hover {
    display: inline;
}

.btn-check.ime-field--error + label {
    background-color: var(--bs-dark);
    color: var(--bs-white);
}

.hr-divider {
    height: 1px !important;
    border: none !important;
    background: var(--palette-neutral-3) !important;
}

.hr-divider.hr-divider-dark {
    background: var(--bs-dark) !important;
}

.hr-divider.hr-divider-primary {
    background: var(--bs-primary) !important;
}

.bg-topup-light {
    background-color: var(--default-background-color) !important
}

.bg-topup-dark {
    background-color: var(--tertiary-background-color-inverted) !important
}

.bg-primary-light-30 {
    background-color: var(--palette-topup-6) !important
}

.bg-primary-light-50 {
    background-color: var(--palette-topup-5) !important
}

.bg-primary-light-70 {
    background-color: var(--palette-topup-3) !important
}

.bg-primary-light-90 {
    background-color: var(--palette-topup-1) !important
}

.bg-primary-dark-30 {
    background-color: var(--palette-topup-12) !important
}

.bg-primary-dark-50 {
    background-color: var(--palette-topup-14) !important
}

.bg-primary-dark-70 {
    background-color: var(--palette-topup-16) !important
}

.link-primary-dark-30, .link-primary-dark-30--hover:hover {
    color: var(--palette-topup-12) !important
}

.tp-tile:hover {
    box-shadow: 0 0 0.5rem rgba(var(--bs-primary-rgb), .175) !important
}

.tp-tile-light {
    background: var(--bs-white) !important;
}

.tp-tile-light:hover {
    background: var(--palette-topup-6) !important;
}

.tp-tile-light:hover .stretched-link {
    color: var(--bs-white) !important
}

.tp-tile-light:hover img {
    filter: brightness(0) invert(1) !important
}

.tp-tile-dark {
    background-color: var(--bs-dark) !important;
}

.tp-tile-dark-primary {
    background-color: var(--bs-primary) !important;
}

.tp-tile-dark .stretched-link {
    color: var(--bs-white) !important
}

.tp-tile-dark:hover {
    background-color: var(--palette-topup-12) !important;
}

.tp-tile-dark:hover .stretched-link {
    color: var(--bs-white) !important
}

.tp-tile-dark:hover img {
    filter: grayscale(100) !important
}

.tp-tile-light .tile-sub-title {
    color: var(--palette-topup-13);
}

.tp-tile-dark .tile-sub-title {
    color: var(--bs-primary);
}

.tp-tile-dark.tp-tile-dark-primary .tile-sub-title {
    color: var(--bs-black);
}

.tp-tile-light:hover .tile-sub-title, .tp-tile-dark:hover .tile-sub-title {
    color: var(--bs-dark) !important;
}

.tp-tile-dark-primary:hover .tile-sub-title {
    color: rgba(var(--bs-white-rgb), 60%) !important;
}

.tp-tile-dark-primary:hover img {
    filter: brightness(0) invert(1) !important
}
/**
* GREEN
*/
.tp-tile-green {background-color: var(--bs-green) !important;}
.tp-tile-green .stretched-link {color: var(--bs-white) !important}
.tp-tile-green:hover {background-color: var(--palette-topup-6) !important;}
.tp-tile-green:hover .stretched-link {color: var(--bs-white) !important}
.tp-tile-green:hover img {filter: grayscale(100) !important}
.tp-tile-green .tile-sub-title {color: var(--bs-warning);}
.tp-tile-green:hover .tile-sub-title {color: var(--bs-dark) !important;}

/**
 * ICONS
 */
.ti-icon-2x {
    font-size: 1.4rem !important;
}

.ti-icon-3x {
    font-size: 3.5rem !important;
}

.ti-icon-passed {
    color: var(--palette-success-2) !important
}

.ti-icon-success {
    color: #0aa143 !important;
}
.ti-icon-warning {color: #ff9100 !important;}

.ti-icon-critical {
    color: var(--palette-critical-4) !important
}

.dropdown-item, .dropdown-icon {
    color: var(--palette-neutral-4) !important;
    font-size: 1.025rem !important;
}

.dropdown-item:hover {
    background-color: var(--palette-neutral-1) !important;
    color: var(--bs-primary) !important;
    font-weight: 600;
}

.dropdown-item:hover > .dropdown-icon {
    color: var(--palette-topup-6) !important;
}


/** ACCORDION **/
.accordion-support {
    padding: var(--bs-accordion-btn-padding-y) var(--bs-accordion-btn-padding-x);
    font-size: 1.2rem;
    color: var(--bs-white);
    text-align: left;
    background-color: var(--bs-dark);
    border: 0;
    border-radius: 0;
    overflow-anchor: none;
    transition: var(--bs-accordion-transition);
}

.accordion-support:not(.collapsed) {
    color: var(--bs-white);
    background-color: var(--bs-primary);
    box-shadow: inset 0 0 0 0 !important
}

.accordion-support:not(.collapsed)::after {
    background-image: none !important;
    transform: var(--bs-accordion-btn-icon-transform);
}

.accordion-body {
    text-align: justify-all !important;
}

.accordion-body strong {
    font-weight: normal !important;
    color: var(--bs-primary) !important;
    font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.accordion-body p {
    margin: 0 0 1rem !important;
    padding: 0 !important;
    line-height: 1.5rem !important;
}

.accordion-body li {
    margin: 0 0 1rem !important;
    padding: 0 !important;
}

.t-comment-area {
    resize: none;
    height: 10rem !important;
}

.t-area-1 {
    height: 1rem !important;
}

.t-area-2 {
    height: 2rem !important;
}

.t-area-3 {
    height: 3rem !important;
}

.t-area-4 {
    height: 4rem !important;
}

.t-area-5 {
    height: 5rem !important;
}

.t-area-6 {
    height: 6rem !important;
}

.t-area-7 {
    height: 7rem !important;
}

.t-area-8 {
    height: 8rem !important;
}

.t-area-9 {
    height: 9rem !important;
}

.t-area-10 {
    height: 10rem !important;
}

.copy-link-light {
    cursor: pointer;
    color: var(--bs-white);
    font-size: 1rem !important;
    text-decoration: none !important;
}
.copy-link-light:hover {color: var(--bs-warning);}

.ai-input-group {
    background:var(--bs-white) !important;
    border-radius: 50px !important;
    padding: 0.55rem;
    border: 1px solid var(--bs-gray-300);
    overflow: hidden !important;
}
.ai-form-control {
    border: none;
    background: transparent;
}
.ai-btn-control {
    border: none;
    background-color: var(--tertiary-background-color-inverted);
    color: #fff;
    border-radius: 50px !important;
}
.ai-btn-control:hover {background-color: var(--bs-primary) !important;}
.ai-btn-control .bi-question-lg {font-size: 1.5rem;}
.ai-btn-control:hover .bi-question-lg {color: #fff !important;}
.no-horizontal-scroll {
    white-space: pre-wrap;
    overflow-x: hidden;
    word-wrap: break-word;
}

.ai-accordion-button {
    width: 100%;
    padding: var(--bs-accordion-btn-padding-y) var(--bs-accordion-btn-padding-x);
    font-size: 1rem;
    color: var(--bs-white);
    text-align: left;
    background-color: var(--palette-neutral-5);
    border: 0;
    border-radius: 0;
    overflow-anchor: none;
    transition: var(--bs-accordion-transition);
}
.ai-accordion-button::after {
    flex-shrink: 0;
    width: var(--bs-accordion-btn-icon-width);
    height: var(--bs-accordion-btn-icon-width);
    margin-left: auto;
    content: "";
    background-image: var(--bs-ai-accordion-btn-icon);
    background-repeat: no-repeat;
    background-size: var(--bs-accordion-btn-icon-width);
    transition: var(--bs-accordion-btn-icon-transition);
    filter: invert(100%) brightness(2); /* This will make the image white */
}
.ai-accordion-button:not(.collapsed) {
    color: var(--bs-white) !important;
    background-color: var(--palette-topup-17);
    box-shadow: inset 0 calc(-1* var(--bs-accordion-border-width)) 0 var(--bs-accordion-border-color);
}
.ai-accordion-button:not(.collapsed)::after {
    color: var(--bs-white) !important;
    background-image: none;
}


.text-promoting-2 {color: var(--palette-promoting-2) !important}
.text-promoting-3 {color: var(--palette-promoting-3) !important}
.text-promoting-4 {color: var(--palette-promoting-4) !important}
.text-promoting-5 {color: var(--palette-promoting-5) !important}


.text-corporate-2 {color: var(--palette-corporate-2) !important}
.text-corporate-3 {color: var(--palette-corporate-3) !important}
.text-corporate-4 {color: var(--palette-corporate-4) !important}
.text-corporate-5 {color: var(--palette-corporate-5) !important}

.text-royal-blue {color: #448aff !important;}