.mb-dark-mode {
    --bs-border-color: #5B5B5B !important;
    --bs-body-bg: #0c0d0b;
}

.mb-dark-mode header {
    background-color: #1A221B;
}

.mb-dark-mode #myVideo {
    border-radius: 20px;
    border: 2px solid #444945
}

.mb-dark-mode .modal-content {
    background-color: #131E14;
}

.mb-dark-mode .btn-close {
    filter: var(--bs-btn-close-white-filter);
}

.mb-dark-mode .qr-modal-url {
    color: #C0C0C0;
}

.mb-dark-mode .mobile-header {
    background-color: transparent;
}

.mb-dark-mode .mobile-header .header-shrink {
    background-color: #1A221B;
}

.mb-dark-mode header .header-icon {
    background-color: transparent;
    border: 0.4px solid #787878;
}

.mb-dark-mode header .header-icon svg rect {
    fill: transparent;
}

.mb-dark-mode header .header-text {
    color: #ffffff;
}

.mb-dark-mode header .mobile-menu-list .header-text {
    color: #323c26;
}

.mb-dark-mode .mb-shortlink {
    background-color: #131E14;
}

.mb-dark-mode .mb-shortlink .header-container .text-description {
    color: white !important;
}

.mb-dark-mode .input-border {
    background-color: #191F1B;
}

.mb-dark-mode .input-border input {
    background-color: #191F1B;
    color: #C0C0C0;
}

.mb-dark-mode .btn-primary {
    border-radius: 12px;
    background-color: #21331E;
    border: none !important;
}

.mb-dark-mode .btn-primary:active {
    background-color: #2a3e27 !important;
}

.mb-dark-mode .btn-primary:hover {
    background-color: #2a3e27 !important;;
}

.mb-dark-mode .btn-primary:focus {
    background-color: #2a3e27 !important;;
}

.mb-dark-mode .btn-primary:visited {
    background-color: #2a3e27 !important;;
}

.mb-dark-mode .btn-primary:disabled {
    background-color: #272C29 !important;;
}

.mb-dark-mode .btn-outline-primary {
    border: 1px solid #5BB946 !important;
    background-color: transparent !important;
}

.mb-dark-mode .btn-outline-primary:active {
    background-color: transparent !important;
}

.mb-dark-mode .btn-outline-primary:hover {
    background-color: transparent !important;;
}

.mb-dark-mode .btn-outline-primary:focus {
    background-color: transparent !important;;
}

.mb-dark-mode .btn-outline-primary:visited {
    background-color: transparent !important;;
}

.mb-dark-mode .btn-outline-primary:disabled {
    border: 1px solid #F8F8F8 !important;
    background-color: transparent !important;;
}

.mb-dark-mode .btn-send:disabled svg path {
    fill: #B9B9B9;
}

.mb-dark-mode .btn-copy:disabled svg path {
    stroke: #B9B9B9;
}

.mb-dark-mode footer .footer {
    background-color: #1A221B;
}

.mb-dark-mode footer .footer-text {
    color: white;
}

.mb-dark-mode footer .header-icon {
    background-color: transparent;
    border: 0.4px solid #787878;
}

.mb-dark-mode footer .header-icon svg rect {
    fill: transparent;
}

.mb-dark-mode footer .copy-right {
    background-color: #2F362F;
}

.mb-dark-mode footer .copy-right span {
    color: white;
}

.mb-dark-mode .toggle-mobile-menu-btn img {
    filter: invert(1);
}

.mb-dark-mode .copy-success-message {
    color: #444444;
    background-color: white;
}

.mb-dark-mode .tooltip-inner {
    background-color: white !important;
    color: #444444;
}

.mb-dark-mode .bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before {
    border-top-color: white !important;
}

.mb-dark-mode .user-avatar__dropdown #userDropdownMenuLink {
    background-color: unset;
}

.mb-dark-mode .user-avatar__dropdown #userDropdownMenuLink .marquee-container span {
    color: white;
}

.mb-dark-mode #accountMenuOffcanvas {
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    --bs-offcanvas-height: unset;
    background-image: url("/assets/img/home/mobile-account-offcanvas-footer.svg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top left;
}

.mb-dark-mode #accountMenuOffcanvas .offcanvas-body {
    padding: 16px 0;
}

.mb-dark-mode .user-avatar__dropdown--mobile .dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 500;
    text-align: left;
    color: rgba(255, 255, 255, 1);
}

.mb-dark-mode .user-avatar__dropdown--mobile ul {
    padding-left: 0;
}

.mb-dark-mode .user-avatar__dropdown--mobile ul svg path {
    fill: rgba(255, 255, 255, 1);
}

.mb-dark-mode .user-avatar__dropdown--mobile hr {
    height: 1px;
    color: rgba(224, 224, 224, 1);
    background-color: rgba(224, 224, 224, 1);
    border: none;
}

.mb-dark-mode #mobileMenuOffcanvas {
    width: 251px;
    padding: 16px 0;
    background-size: contain;
    background-position: top, bottom left;
    background-image: url("/assets/img/home/mobile-offcanvas-bg.svg"), url("/assets/img/home/mobile-offcanvas-footer.svg");
    background-repeat: no-repeat, no-repeat;
}

.mb-dark-mode #mobileMenuOffcanvas .offcanvas-header {
    height: 36px;
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
    text-align: left;
    display: flex;
    align-items: center;
    padding: 0 16px;
    color: rgba(255, 255, 255, 1);
    margin-bottom: 7px;
}

.mb-dark-mode #mobileMenuOffcanvas .offcanvas-body {
    padding: 0;
}

.mb-dark-mode #mobileMenuOffcanvas .offcanvas-body li {
    height: 40px;
    padding: 0 16px;
    margin-bottom: 8px;
}

.mb-dark-mode #mobileMenuOffcanvas .offcanvas-body li a {
    font-size: 14px;
    font-weight: 500;
    text-align: left;
    color: rgba(255, 255, 255, 1);
    height: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
}

.mb-dark-mode #mobileMenuOffcanvas .offcanvas-body li.active {
    background-color: rgba(127, 202, 39, 0.4);
}


.mb-dark-mode footer .header-icon {
    background-color: transparent;
    border: 0.4px solid #787878;
}

.mb-dark-mode footer .header-icon svg rect {
    fill: transparent;
}

.mb-dark-mode .mobile-menu-footer {
    padding: 16px 16px 0;
    gap: 16px;
}

.mb-dark-mode .mobile-menu-footer .outline-btn {
    gap: 8px;
    border-color: rgba(255, 255, 255, 1);
    height: 40px
}

.mb-dark-mode .mobile-menu-footer span {
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    color: rgba(255, 255, 255, 1);
    text-align: left;
}

.mb-dark-mode .mobile-menu-footer .auth-action a {
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    text-align: center;
    color: rgba(255, 255, 255, 1);
}

.mb-dark-mode .mobile-menu-footer .auth-action {
    height: 44px;
}

.mb-dark-mode .mobile-menu-footer .auth-action a:first-child {
    padding-right: 27px;
    border-right: 1px dashed rgba(112, 112, 112, 1)
}

.mb-dark-mode .mobile-menu-footer .auth-action a:last-child {
    padding-left: 26px;
}

.mb-dark-mode #mobileMenuOffcanvas svg path {
    fill: rgba(255, 255, 255, 1);
}

.mb-dark-mode #mobileMenuOffcanvas .line {
    background-color: rgba(255, 255, 255, 1);
    height: 1px;
    width: 100%
}

.mb-dark-mode .mobile-header.header-shrink {
    background-color: #1A221B;
}

.mb-dark-mode #mobileMenuOffcanvas .guide-icon path {
    stroke: white;
}

.mb-dark-mode .desktop-header .header-btn {
    color: white;
}