:root {
    /*colors*/
    --wx-primary-color: #C63527;
    --wx-secondary-color: #171C8F;
    --wx-white-color: #FFFFFF;
    --wx-black-color: #000000;
    --wx-sky-blue-color: #6D98C6;
    --wx-ghost-white-color: #F5F7FB;
    --wx-silver-sand-color: #C6C6C6;
    --wx-light-gray-color: #000000A6;
    --wx-lavender-gray-color: #C2C2D1;
    --wx-charcoal-gray-color: #31353A;
    --wx-colombia-blue-color: #D1DBEA;
    --wx-lavender-web-color: #E0DAF2;
    --wx-vivid-crimson-color: #D80032;
    --wx-salem-color: #198754;
    --wx-davys-gray-color: #565A60;
    --wx-deleted-group-highlighted-color: #d7deec;
    --wx-heart-color:#e74c3c;
    --wx-warning-color: #ffc107;
    --wx-info-color: #055160;
    /*fonts*/
    --wx-text-xxs: 0.5rem; /*8px*/
    --wx-text-xs: 0.75rem; /*12px*/
    --wx-text-sm: 0.875rem; /*14px*/
    --wx-text-basic: 1rem; /*16px*/
    --wx-text-lg: 1.125rem; /*18px*/
    --wx-text-xl: 1.25rem; /*20px*/
    --wx-text-2xl: 1.5rem; /*24px*/
    --wx-text-3xl: 1.875rem; /*30px*/
    --wx-text-4xl: 2.25rem; /*36px*/
    --wx-text-6xl: 2.5rem; /*40px*/
    --wx-text-8xl: 3rem; /*48px*/
}

/*----------------------------------------------------General------------------------------------------------------*/

code[class*=language-],
pre[class*=language-] {
    /*TODO*/
    font-size: 0.875rem !important;
}

#YafContent {
    padding-right: 1rem;
    padding-left: 1rem;
}

#YafBody {
    padding-right: 0px;
    padding-left: 0px;
    background-color: var(--wx-ghost-white-color);
}

.page-layout {
    display: flex;
    flex-direction: column;
}

.breadcrumb-wrapper {
    padding-top: 1rem;
    padding-left: 1.5rem;
}

.breadcrumb-wrapper a {
    color: var(--wx-black-color);
    text-decoration: none;
}

.breadcrumb-wrapper .breadcrumb-item.active {
    /*TODO*/
    color: var(--wx-secondary-color) !important;
    font-weight: 700;
}

.btn-scroll {
    bottom: 65px;
    color: var(--bs-btn-hover-color);
    background-color: var(--bs-btn-hover-bg);
    border-color: var(--bs-btn-hover-border-color);
}

    .btn-scroll i {
        margin-right: 0 !important;
    }

a {
    color: var(--wx-secondary-color);
}

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-thumb {
    background-color: #888;
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #555;
}

::-webkit-scrollbar-track {
    background-color: transparent;
    border-radius: 5px;
}

/*========== Dark Theme ==========*/
.darkTheme h2{
    color: white;
}

.darkTheme .fas::before, .darkTheme .far::before, .darkTheme .fa::before {
    color: var(--wx-white-color);
}

.darkTheme .badge .fas::before, .darkTheme .badge .far::before , .darkTheme .badge .fa::before{
    color: var(--wx-black-color);
}

.darkTheme #YafBody {
    background-color: var(--wx-charcoal-gray-color);
}

.darkTheme a {
    color: var(--wx-white-color);
}

/*================ inputs in dark mode ================*/
.darkTheme input.form-control {
    background-color: var(--wx-davys-gray-color);
    border-color: var(--wx-davys-gray-color);
    color: var(--wx-white-color);
}
.darkTheme input.form-control::placeholder {
    color: var(--wx-white-color);
}
.darkTheme .input-group-text {
    background-color: var(--wx-black-color);
    border-color: var(--wx-black-color);
    color: var(--wx-white-color);
}

.darkTheme select.form-select {
    background-color: var(--wx-davys-gray-color);
    border-color: var(--wx-black-color);
    color: var(--wx-white-color);
}

.darkTheme textarea.form-control {
    background-color: var(--wx-davys-gray-color);
    border-color: var(--wx-davys-gray-color);
    color: var(--wx-white-color);
}

/*================ Card in dark mode ================*/
.darkTheme .card {
    background-color: var(--wx-black-color);
    color: var(--wx-white-color);
    border-color: var(--wx-davys-gray-color);
}
.darkTheme .card .card-body{
    background-color: var(--wx-black-color);
}
.darkTheme .card-header, .darkTheme .card-footer {
    background-color: var(--wx-davys-gray-color);
    color: var(--wx-white-color);
}

/*================ Tabs in dark mode ================*/
.darkTheme .nav.nav-tabs .nav-item .nav-link{
    color: var(--wx-white-color);
}
.darkTheme .nav.nav-tabs .nav-item .nav-link:hover{
    border-color: var(--wx-davys-gray-color);
}
.darkTheme .nav.nav-tabs .nav-item .nav-link.active{
    background-color: var(--wx-davys-gray-color);
    border-color: var(--wx-davys-gray-color);
}
/*================ list-group in dark mode ================*/
.darkTheme .list-group-item{
    background-color: var(--wx-black-color);
    color: var(--wx-white-color);
}

.darkTheme .list-group-item.list-group-item-action{
    border-color: var(--wx-davys-gray-color);
}

.darkTheme .list-group-item.list-group-item-action.active {
    background-color: var(--wx-davys-gray-color);
}

.darkTheme .list-group-item.list-group-item-action:hover {
    background-color: var(--wx-charcoal-gray-color);
}
/*================ pagination in dark mode ================*/
.darkTheme .pagination a {
    background-color: var(--wx-black-color);
    color: var(--wx-white-color);
    border-color: var(--wx-davys-gray-color);
}

.darkTheme .pagination .active a {
    background-color: var(--wx-davys-gray-color);
    color: var(--wx-black-color) !important;
}
.darkTheme .pagination .page-item{
    background-color: transparent;
}
.darkTheme .pagination .page-item span.page-link{
    background-color: var(--wx-davys-gray-color);
    border-color: var(--wx-davys-gray-color);
    color: var(--wx-black-color);
}

/*================ text muted in dark mode ================*/
.darkTheme .text-muted {
    color: var(--wx-white-color) !important;
}

/*================ table in dark mode ================*/
.darkTheme .table{
    border-color: var(--wx-davys-gray-color);
}
.darkTheme .table th{
    background-color: var(--wx-davys-gray-color);
    color: var(--wx-white-color);
}
.darkTheme .table tbody td{
    background-color: var(--wx-black-color);
    color: var(--wx-white-color);
}
/*================ dropdown list in dark mode ================*/
.darkTheme span.select2-selection {
    background-color: var(--wx-davys-gray-color);
    border-color: var(--wx-davys-gray-color) !important;
}

.darkTheme .dropdown-menu {
    color: var(--wx-white-color);
}

.darkTheme span.select2-selection .select2-selection__rendered {
    color: var(--wx-white-color);
}

.darkTheme .select2-selection--single .select2-selection__rendered .select2-selection__placeholder{
    color: var(--wx-white-color) ;
}

.darkTheme span.select2-selection.select2-selection--multiple {
    background-color: var(--wx-davys-gray-color);
    border-color: var(--wx-davys-gray-color);
    color: var(--wx-white-color);
}

.darkTheme .select2-dropdown.select2-dropdown--below{
    background-color: var(--wx-davys-gray-color);
    color: var(--wx-white-color);
    border-color: var(--wx-davys-gray-color);
}
.darkTheme .select2-search.select2-search--dropdown{
    background-color: var(--wx-davys-gray-color);
}
.darkTheme .select2-search.select2-search--dropdown input.select2-search__field{
    background-color: var(--wx-davys-gray-color);
    border-color: var(--wx-black-color);
    color: var(--wx-white-color);
}
.darkTheme .select2-search.select2-search--dropdown input.select2-search__field::placeholder{
    color: var(--wx-white-color);
}

.darkTheme .select2-dropdown .select2-results{
    background-color:var(--wx-davys-gray-color);
    color: var(--wx-white-color) ;
}
.darkTheme .select2-dropdown .select2-results__options .select2-results__option{
    color: var(--wx-white-color) ;
}

.darkTheme .select2-dropdown .select2-results__options .select2-results__option.select2-results__message{
    color: var(--wx-white-color) ;
}

.darkTheme .select2-dropdown .select2-results__options .select2-results__option[role=group] .select2-results__group{
    color: var(--wx-black-color);
}

.darkTheme .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--highlighted{
    background-color: var(--wx-black-color);
    color: var(--wx-white-color) ;
}

/*================ tooltip in dark mode ================*/
.darkTheme .bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before, .bs-tooltip-end .tooltip-arrow::before {
    border-right-color: var(--wx-davys-gray-color);
}

.darkTheme .bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before, .bs-tooltip-bottom .tooltip-arrow::before {
    border-bottom-color: var(--wx-davys-gray-color);
}

.darkTheme .bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before, .bs-tooltip-start .tooltip-arrow::before {
    border-left-color: var(--wx-davys-gray-color);
}

.darkTheme .bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before, .bs-tooltip-top .tooltip-arrow::before {
    border-top-color: var(--wx-davys-gray-color);
}

.darkTheme .tooltip-inner {
    background-color: var(--wx-davys-gray-color);
}

/*----------------------------------------------------Header------------------------------------------------------*/
.custom-nav #navbarSupportedContent ul li > a {
    color: var(--wx-light-gray-color);
}

.app-header {
    position: fixed;
    z-index: 1020;
    width: 100%;
    text-align: center;
    background-color: var(--wx-white-color);
    box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,.075);
}

.app-header-2 {
    position: sticky;
    top: 0;
    z-index: 1020;
    width: 100%;
    text-align: center;
    background-color: var(--wx-white-color);
    box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,.075);
    margin: 0;
}

.beta-version-customized {
    color: var(--wx-white-color);
    background-color: var(--wx-primary-color);
    font-size: 0.6rem;
    padding-top: 0.15rem;
    padding-bottom: 0.2rem;
    padding-right: 0.235rem;
    padding-left: 0.2rem;
    border-radius: 0.25rem;
}

.navbar-brand img {
    width: 7.9rem;
    height: 2.75rem;
}
.navbar-brand {
    text-wrap: wrap;
}

.header-speech-bubble {
    position: relative;
    background-color: var(--wx-primary-color);
    color: var(--wx-white-color);
    padding: 0.3rem;
    border-radius: 0.625rem;
    font-size: var(--wx-text-xxs);
    margin-left: 0.75rem;
    border: none;
    display: flex;
    align-items: center;
}

    .header-speech-bubble.left::before {
        content: "";
        position: absolute;
        top: 50%;
        right: 98%;
        margin-top: -0.375rem; /* Adjust this value to position the arrow */
        border-width: 0.375rem;
        border-style: solid;
        border-color: transparent var(--wx-primary-color) transparent transparent;
        border-left-width: 0;
    }

.darkThemeCheckbox {
    opacity: 0;
    position: absolute;
}

.darkThemeCheckbox-label {
    background-color: #565A60;
    width: 50px;
    height: 26px;
    border-radius: 50px;
    position: relative;
    padding: 6px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.fa-moon {
    color: var(--wx-black-color);
}

.fa-sun {
    color: var(--wx-white-color);
}

.darkThemeCheckbox-label .darkThemeBall {
    background-color: #fff;
    width: 22px;
    height: 22px;
    position: absolute;
    left: 2px;
    top: 2px;
    border-radius: 50%;
    transition: transform 0.2s linear;
}

.darkThemeCheckbox:checked + .darkThemeCheckbox-label .darkThemeBall {
    transform: translateX(24px);
}

.user-menu #notificationAlert #NotifyListPlaceholder li {
    margin-left: 0;
}

.user-menu #notificationAlert #notificationDrop .dropdown-item {
    padding-top: 0;
    padding-bottom: 0;
}

/*========== Dark Theme ==========*/

.darkTheme .custom-nav a {
    /*TODO*/
    color: var(--wx-white-color) !important;
}

.darkTheme .app-header, .darkTheme .app-header-2 {
    background-color: var(--wx-black-color);
}

#YafBody.darkTheme {
    background-color: var(--wx-charcoal-gray-color);
}

.darkTheme .breadcrumb-wrapper a, .darkTheme .breadcrumb-wrapper .breadcrumb-item.active, .darkTheme .breadcrumb-item + .breadcrumb-item::before {
    color: var(--wx-white-color) !important;
}

.darkTheme .modal-dialog .modal-header .btn-close {
    --bs-btn-close-bg: url(/images/logout-x-icon-dt.svg);
}

/*========== Media Query ==========*/

/*For Mobile Devices*/
@media (max-width: 480px) {
}

/*iPads and Tablets*/
@media (481px < width < 768px) {
}

/*Laptops and small screen*/
@media (768px <= width <= 1023px) {
}


/*Large screens and Desktops*/
@media (1024px <= width <= 1920px) {
}

/*TV and Extra Large Screens*/
@media (min-width: 1921px) {
    .navbar-brand img {
        width: 12.9rem;
        height: 2.75rem;
    }

    .navbar-brand img {
        width: 18.9rem;
        height: 6.75rem;
    }

    .beta-version-customized {
        font-size: 1.6rem;
        padding-right: 0.4rem;
        padding-left: 0.4rem;
    }

    .custom-nav {
        font-size: 2rem;
        margin-left: 2rem;
    }

    .header-speech-bubble {
        font-size: var(--wx-text-lg);
        margin-left: 1.25rem;
    }

        .header-speech-bubble.left::before {
            margin-top: -1rem;
            border-width: 1rem;
        }

    .page-Landing header {
        padding-bottom: 3.5rem !important;
        margin-bottom: 6rem !important;
    }
}

/*----------------------------------------------------Footer------------------------------------------------------*/
.app-footer {
    margin-top: auto;
    display: flex;
    flex: 0 0 3.125rem;
    flex-wrap: wrap;
    width: 100%;
    align-items: center;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    color: var(--wx-white-color);
    background: var(--wx-charcoal-gray-color);
}

.footer-helper {
    font-size: 0.9rem;
}

    .footer-helper a {
        color: var(--wx-white-color);
    }

.footer-logo-wrapper img {
    width: 9rem;
}

/*========== Dark Theme ==========*/

.darkTheme .app-footer {
    color: var(--wx-white-color);
    background: var(--wx-black-color);
}

/*========== Media Query ==========*/

/*For Mobile Devices*/
@media (max-width: 480px) {
    .footer-helper {
        margin-top: 1rem;
    }

    .footer-logo-wrapper img {
        width: 130px;
        margin-top: 1.5rem;
    }
}

/*TV and Extra Large Screens*/
@media (min-width: 1921px) {
    .app-footer {
        font-size: 1.875rem;
    }

    .footer-helper {
        font-size: 1.875rem;
    }

    .footer-logo-wrapper img {
        width: 300px;
    }
}

/*----------------------------------------------------Bootstrap classes------------------------------------------------------*/

.disabled .page-link {
    background-color: var(--wx-secondary-color);
    color: var(--wx-white-color);
    border-color: var(--wx-secondary-color);
}

.page-link {
    border: 1px solid var(--wx-secondary-color);
}

.page-item.active .page-link {
    background-color: var(--wx-sky-blue-color);
}

.page-link:hover {
    border: 1px solid var(--wx-secondary-color);
}

.progress {
    background-color: var(--wx-silver-sand-color);
    height: 1.25rem;
}

    .progress .progress-bar {
        padding-left: 0.5rem;
    }

.carousel-indicators [data-bs-target] {
    background-color: var(--wx-colombia-blue-color);
    width: 2.5rem;
    height: 0.5rem;
    border-radius: 0.68rem;
}

.carousel-indicators .active {
    background-color: var(--wx-secondary-color);
}

.modal-dialog .modal-header {
    background-color: var(--wx-lavender-web-color);
}

/*========== Dark Theme ==========*/
.darkTheme .dropdown-menu {
    color: var(--wx-white-color);
    background-color: var(--wx-black-color);
}

    .darkTheme .dropdown-menu button {
        color: var(--wx-white-color);
    }

    .darkTheme .dropdown-menu .dropdown-item:hover, .darkTheme .dropdown-menu .dropdown-item:focus {
        color: var(--wx-white-color);
        background-color: var(--wx-davys-gray-color);
    }

    .darkTheme .dropdown-menu .dropdown-item:visited {
        background-color: var(--wx-charcoal-gray-color);
    }

.darkTheme .modal-dialog {
    color: var(--wx-white-color);
}

    .darkTheme .modal-dialog .modal-header {
        background-color: var(--wx-black-color);
        border-color: var(--wx-black-color);
    }

    .darkTheme .modal-dialog .modal-footer button {
        color: var(--wx-white-color);
        background-color: var(--wx-black-color);
        border-color: var(--wx-black-color);
    }

    .darkTheme .modal-dialog .modal-body, .darkTheme .modal-dialog .modal-footer {
        background-color: var(--wx-charcoal-gray-color);
        border-color: var(--wx-charcoal-gray-color);
    }

    .darkTheme .modal-dialog .modal-footer {
        border-color: var(--wx-black-color);
    }

/*----------------------------------------------------User Menu------------------------------------------------------*/
.user-menu {
    display: flex;
}

    .user-menu li {
        list-style-type: none;
        margin-left: 0.625rem;
    }

    .user-menu .dropdown-menu {
        right: 0;
        left: auto;
    }

        .user-menu .dropdown-menu .show {
            right: 100%;
            /*TODO*/
            left: auto !important;
        }

    .user-menu .dropstart .dropdown-toggle::before {
        margin-left: -0.375rem;
    }

@media (max-width: 992px) {
    .user-menu {
        margin-left: auto;
    }
}

/*----------------------------------------------------Landing Page------------------------------------------------------*/

.cards-wrapper {
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 0;
    padding: 2em 1em;
}

.card-svg-img {
    width: 100%;
    height: 21.28rem;
    padding: 2em 1em;
}

.card-custom-line {
    border: none;
    height: 0.35rem;
    width: 50%;
    background-color: var(--wx-primary-color);
    opacity: revert;
    border-radius: 0.25rem;
    margin: auto;
    transition: opacity 0.3s ease;
}

.card-custom-text {
    font-size: var(--wx-text-xl);
    color: var(--wx-secondary-color);
    font-weight: bold;
}

.speech-bubble {
    position: relative;
    background-color: var(--wx-primary-color);
    color: var(--wx-white-color);
    padding: 0.3rem;
    border-radius: 0.625rem;
    font-size: var(--wx-text-xxs);
    margin-left: 0.75rem;
    border: none;
}

    .speech-bubble.left::before {
        content: "";
        position: absolute;
        top: 50%;
        right: 98%;
        margin-top: -0.375rem; /* Adjust this value to position the arrow */
        border-width: 0.375rem;
        border-style: solid;
        border-color: transparent var(--wx-primary-color) transparent transparent;
        border-left-width: 0;
    }

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--wx-white-color);
    border-radius: 1.25rem;
    opacity: 0;
    transition: opacity 0.3s ease
}

.card:hover .overlay {
    opacity: 1;
    border-radius: 1.25rem;
}

.overlay-text {
    color: var(--wx-black-color);
    text-align: left;
    font-size: var(--wx-text-basic);
    transition: opacity 0.3s ease;
    margin: 1.5rem;
}

.card:hover .overlay-text {
    opacity: 1;
}

.overlay-line {
    border: none;
    height: 0.35rem;
    background-color: var(--wx-primary-color);
    opacity: revert;
    border-radius: 4px;
    margin: auto;
}

.middle-card {
    margin-top: 2em;
    margin-bottom: 2em;
}

.loeaderContainer {
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 12.5rem;
    width: 33.33%;
    height: 22.5rem;
    padding: 0.625rem;
    transform: translate(-50%, -50%);
    /*TODO*/
    background-color: #263038;
    display: flex;
    align-items: center;
    justify-content: center;
    /*TODO*/
    color: #ccc;
    cursor: pointer;
    transition: .2s linear;
    z-index: 9999;
    border-radius: 0.625rem;
    display: none
}

    .loeaderContainer .loadertext {
        position: absolute;
        top: 45%;
        margin: 1.75rem;
        font-size: 1.5rem;
        font-weight: bold;
        text-align: center
    }

.loader {
    width: calc(100px - 24px);
    height: 50px;
    position: absolute;
    top: 30%;
    animation: flippx 2s infinite linear;
}

    .loader:before {
        content: "";
        position: absolute;
        inset: 0;
        margin: auto;
        width: 1.25rem;
        height: 1.25rem;
        border-radius: 50%;
        background: var(--wx-white-color);
        transform-origin: -1.5rem 50%;
        animation: spin 1s infinite linear;
    }

    .loader:after {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        background: var(--wx-white-color);
        width: 3rem;
        height: 3rem;
        border-radius: 50%;
    }

.hc-name {
    /*TODO*/
    z-index: 0 !important;
}

@keyframes flippx {
    0%, 49% {
        transform: scaleX(1);
    }

    50%, 100% {
        transform: scaleX(-1);
    }
}

@keyframes spin {
    100% {
        transform: rotate(360deg);
    }
}

/*========== Dark Theme ==========*/


.darkTheme .card-custom-line {
    background-color: var(--wx-white-color);
}

.darkTheme .card-custom-text {
    color: var(--wx-white-color);
}

.darkTheme .overlay {
    background-color: var(--wx-black-color);
}

.darkTheme .overlay-text {
    color: var(--wx-white-color);
}

.darkTheme .overlay-line {
    background-color: var(--wx-white-color);
}

/*========== Media Query ==========*/

/*Large screens and Desktops*/
@media (1024px <= width <= 1920px) {
    .card-custom-text {
        font-size: var(--wx-text-2xl);
    }

    .cards-wrapper .card .card-body img {
        width: 2.5vw;
    }

    .middle-card {
        margin-top: revert;
        margin-bottom: revert;
    }

    .speech-bubble {
        font-size: var(--wx-text-xs);
    }
}

/*TV and Extra Large Screens*/
@media (min-width: 1921px) {
    .card-svg-img {
        height: 30rem;
        padding: 3em 1em;
    }

    .card-custom-text {
        font-size: var(--wx-text-8xl);
    }

    .cards-wrapper .card .card-body img {
        width: 2.5vw;
    }

    .middle-card {
        margin-top: revert;
        margin-bottom: revert;
    }

    .speech-bubble {
        font-size: var(--wx-text-2xl);
        margin-left: 1.75rem;
        padding-bottom: 0.5rem;
        padding-right: 0.5rem;
    }

        .speech-bubble.left::before {
            top: 50%;
            right: 99%;
            margin-top: -1rem; /* Adjust this value to position the arrow */
            border-width: 1rem;
        }

    .overlay-text {
        font-size: var(--wx-text-2xl);
    }
}

/*----------------------------------------------------Coming Soon Page------------------------------------------------------*/

.coming-soon-page {
    color: var(--wx-charcoal-gray-color);
}

.coming-soon-button {
    width: 8.75rem;
    height: 2.5rem;
    border-radius: 3px;
    background-color: var(--wx-primary-color);
    border: none;
    color: var(--wx-white-color);
    text-decoration: none;
    font-size: 1.3rem;
    padding-top: 0.15em;
}

/*========== Dark Theme ==========*/

.darkTheme .coming-soon-page {
    color: var(--wx-white-color);
}

/*----------------------------------------------------Login Page------------------------------------------------------*/

.custom-login-card {
    width: 61%;
    border: none;
    border-radius: 1.25rem;
    box-shadow: 0 0 10px rgba(23, 28, 143, 0.08);
    font-weight: 400;
    overflow: hidden;
    margin: 1.25em auto;
}

.login-section-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.welcome-message {
    font-size: var(--wx-text-basic);
    font-weight: 700;
    margin-bottom: 2rem;
}

.login-section-wrapper button {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.625rem;
    background-color: var(--wx-ghost-white-color);
    border: none;
    color: var(--wx-black-color);
    text-decoration: none;
    font-size: 1.3rem;
}

.login-section-wrapper img {
    width: 2.6rem;
    height: 2.6rem;
    padding-right: 0.25rem;
}

.login-section-wrapper span {
    padding-left: 0.25rem;
    font-weight: 400;
}

.terms-and-conditions-wrapper {
    display: flex;
    margin-right: 2rem;
    margin-left: 2rem;
    margin-top: 3rem;
}

.terms-and-conditions {
    font-size: var(--wx-text-xs);
}

.carousel-section-wrapper {
    background-color: var(--wx-ghost-white-color);
}

.carousel .carousel-item img {
    max-width: 100%;
    height: 12.5rem;
}

.carousel-caption-wrapper h5 {
    font-size: var(--wx-text-basic);
    font-weight: 700;
}

.carousel-caption-wrapper p {
    font-size: var(--wx-text-sm);
}

/*========== Dark Theme ==========*/

.darkTheme .login-section-wrapper {
    background-color: var(--wx-davys-gray-color);
}

.darkTheme .welcome-message, .darkTheme .terms-and-conditions, .darkTheme .terms-and-conditions a, .darkTheme .carousel-caption-wrapper {
    color: var(--wx-white-color);
}

.darkTheme .carousel-section-wrapper {
    background-color: var(--wx-black-color);
}

/*========== Media Query ==========*/

/*For Mobile Devices*/
@media (max-width: 480px) {
    .carousel .carousel-item img {
        padding-top: 2rem;
        height: 8rem;
    }

    .carousel-caption-wrapper {
        padding-top: 5rem;
        padding-bottom: 2rem;
    }

    .carousel-indicators {
        top: 10rem;
    }

    .login-section-wrapper {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }

        .login-section-wrapper button {
            width: 50vw;
            padding-top: 0.2rem;
            padding-bottom: 0.2rem;
            padding-right: 0;
            padding-left: 0;
        }

        .login-section-wrapper img {
            width: 1.6rem;
            height: 1.6rem;
        }

        .login-section-wrapper span {
            font-size: var(--wx-text-xs);
        }

    .terms-and-conditions {
        font-size: var(--wx-text-xs);
    }

    .welcome-message {
        text-align: center;
    }

    .terms-and-conditions-wrapper {
        padding-right: 0.5rem;
        padding-left: 0.5rem;
    }
}
/*iPads and Tablets*/
@media (481px < width < 768px) {
    .carousel .carousel-item img {
        padding-top: 2rem;
    }

    .carousel-caption-wrapper {
        padding-top: 5rem;
        padding-bottom: 2rem;
    }

    .carousel-indicators {
        top: 14rem;
    }

    .login-section-wrapper span {
        font-size: var(--wx-text-l);
    }

    .login-section-wrapper button {
        width: 50vw;
        padding-top: 0.2rem;
        padding-bottom: 0.2rem;
        padding-right: 0;
        padding-left: 0;
    }

    .login-section-wrapper {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }
}
/*Laptops and small screen*/
@media (768px <= width <= 1023px) {
    .carousel .carousel-item img {
        padding-top: 2rem;
        height: 19rem;
    }

    .carousel-caption-wrapper {
        padding-top: 5rem;
        padding-bottom: 3rem;
    }

    .carousel-indicators {
        top: 21rem;
    }

    .login-section-wrapper {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }

        .login-section-wrapper button {
            width: 30vw;
        }

        .login-section-wrapper span {
            font-size: var(--wx-text-basic);
        }
}

/*Large screens and Desktops*/
@media (1024px <= width <= 1920px) {
    .carousel .carousel-item img {
        padding-top: 5rem;
        height: 19rem;
    }

    .carousel-caption-wrapper {
        padding-top: 5rem;
        padding-bottom: 4rem;
    }

    .carousel-indicators {
        top: 20rem;
    }

    .login-section-wrapper button {
        width: 25vw;
    }

    .login-section-wrapper span {
        font-size: var(--wx-text-lg);
    }

    .terms-and-conditions-wrapper {
        padding-right: 1.2rem;
        padding-left: 1.45rem;
    }
}
/*TV and Extra Large Screens*/
@media (min-width: 1921px) {
    .carousel .carousel-item img {
        padding-top: 5rem;
        height: 25rem;
    }

    .carousel-caption-wrapper {
        padding-top: 5rem;
        padding-bottom: 4rem;
    }

    .carousel-indicators {
        top: 27rem;
    }

    .login-section-wrapper img {
        width: 5rem;
        height: 5rem;
        padding-right: 1.5rem;
    }

    .login-section-wrapper span {
        font-size: var(--wx-text-3xl);
    }

    .login-section-wrapper button {
        width: 20vw;
    }

    .welcome-message {
        font-size: var(--wx-text-3xl);
    }

    .terms-and-conditions {
        font-size: var(--wx-text-s);
    }

    .carousel-caption-wrapper h5 {
        font-size: var(--wx-text-3xl);
    }

    .carousel-caption-wrapper p {
        font-size: var(--wx-text-2xl);
    }
}

/*----------------------------------------------------Features Roadmap Page------------------------------------------------------*/

.features-roadmap-page {
    width: 96%;
    margin: auto;
}

.roadmap-title {
    color: var(--wx-secondary-color);
    font-weight: 700;
    font-size: 2.5rem;
    line-height: 2em;
    text-align: center;
}

.roadmap-card {
    background-color: var(--wx-white-color);
    border-radius: 2em;
    margin-bottom: 1.5em;
    padding: 2em;
}

    .roadmap-card .features ul {
        opacity: 0.7;
        font-size: 0.8rem;
    }

    .roadmap-card .img {
        width: 100%;
        height: 100%;
        border-radius: 0.7em;
    }

    .roadmap-card .card-title {
        color: var(--wx-secondary-color);
        font-size: 1.5rem;
        font-weight: 700;
        margin-bottom: 1em;
    }

    .roadmap-card .card-text {
        font-size: 1em;
        font-weight: 700;
    }

    .roadmap-card .card-body ul > li {
        font-size: 1em;
        font-weight: 500;
    }

        .roadmap-card .card-body ul > li .New {
            color: var(--wx-vivid-crimson-color);
        }

/*========== Dark Theme ==========*/

.darkTheme .roadmap-title, .darkTheme .roadmap-card .card-title, .darkTheme .roadmap-card .card-body ul > li .New {
    color: var(--wx-white-color);
}

.darkTheme .roadmap-card {
    background-color: var(--wx-black-color);
    color: var(--wx-white-color)
}

.darkTheme .custom-separator {
    border-left: 0.15rem solid var(--wx-white-color);
    border-top: 0.15rem solid var(--wx-white-color);
}

.darkTheme .features-roadmap-page a {
    color: var(--wx-white-color);
}

/*========== Media Query ==========*/

/*For Mobile Devices*/
@media (max-width: 480px) {
    .roadmap-title {
        font-size: 2rem;
        font-weight: 700;
    }

    .roadmap-card .middle {
        margin-top: 1.5rem;
        margin-bottom: 2.5rem;
    }

    .custom-separator {
        border-top: 0.15rem solid var(--wx-primary-color);
        margin: 2.5rem 2rem; /* Adjust the margin as needed */
    }
}

/*Laptops and small screen*/
@media (768px <= width <= 1023px) {
    .roadmap-title {
        font-size: 2rem;
        font-weight: 700;
    }

    .roadmap-card .middle {
        margin-top: 1.5rem;
        margin-bottom: 2.5rem;
    }

    .custom-separator {
        border-top: 0.15rem solid var(--wx-primary-color);
        margin: 2.5rem 2rem; /* Adjust the margin as needed */
    }

    .roadmap-card .upper-part {
        display: flex;
        align-items: center;
        justify-content: space-around;
    }
}

/*Large screens and Desktops*/
@media (1024px <= width <= 1920px) {
    .roadmap-card {
        display: flex;
        align-items: center;
        position: relative;
    }

        .roadmap-card .middle {
            padding-left: 1.5rem;
            padding-right: 1rem;
        }

        .roadmap-card .features {
            padding-left: 4rem;
        }

    .custom-separator {
        border-left: 0.15rem solid var(--wx-primary-color);
        height: 75%;
        position: absolute;
        left: 50%;
        margin-left: 1.5rem;
    }
}

/*TV and Extra Large Screens*/
@media (min-width: 1921px) {
}
/*----------------------------------------------------Active user card------------------------------------------------*/

.hc-details .s-close {
    top: 5px;
    width: revert;
}

/*----------------------------------------------------Index Page------------------------------------------------------*/

.index-page a {
    color: var(--wx-secondary-color);
}

.index-page h6 {
    opacity: 75%;
}

/*========== Dark Theme ==========*/




.darkTheme .index-page .card-body {
    color: var(--wx-white-color);
    background-color: var(--wx-black-color);
}

.darkTheme .index-page li {
    color: var(--wx-white-color);
    background-color: var(--wx-black-color);
    border-color: var(--wx-davys-gray-color);
}

.darkTheme .index-page a {
    color: var(--wx-white-color);
}

.darkTheme .index-page .card .card-body .row .card-body {
    border-radius: 0.25rem;
}

.darkTheme .user-menu #notificationAlert #NotifyListPlaceholder li {
    background-color: var(--wx-black-color);
    color: var(--wx-white-color);
}

    .darkTheme .user-menu #notificationAlert #NotifyListPlaceholder li:hover {
        background-color: var(--wx-davys-gray-color);
    }

.darkTheme .popover {
    color: var(--wx-white-color);
    border-color: var(--wx-black-color);
}

    .darkTheme .popover .popover-header {
        background-color: var(--wx-black-color);
    }

    .darkTheme .popover .popover-body {
        color: var(--wx-white-color);
        background-color: var(--wx-davys-gray-color);
    }

.darkTheme .bs-popover-auto[data-popper-placement^=top] > .popover-arrow::after, .bs-popover-top > .popover-arrow::after {
    border-top-color: var(--wx-davys-gray-color);
}

.darkTheme .bs-popover-auto[data-popper-placement^=right] > .popover-arrow::after, .bs-popover-end > .popover-arrow::after {
    border-right-color: var(--wx-davys-gray-color);
}

/*----------------------------------------------------Topics Page------------------------------------------------------*/

.topics-page .card-header {
    background-color: var(--wx-ghost-white-color);
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    padding-right: 0.5rem;
    padding-left: 0.5rem;
}

.topics-page .card-body a {
    color: var(--wx-secondary-color);
}

.topics-page .new-topic-button {
    background-color: var(--wx-secondary-color);
    border-color: var(--wx-secondary-color);
    margin-bottom: 1rem;
    padding-top: 0.15rem;
    padding-bottom: 0.15rem;
    padding-right: 1.5rem;
}

.topics-page .pagination .active a {
    color: var(--wx-secondary-color);
}

/*========== Dark Theme ==========*/

.darkTheme .topics-page .card {
    color: var(--wx-white-color);
    border-color: var(--wx-davys-gray-color);
}

.darkTheme .topics-page .card-header {
    color: var(--wx-white-color);
    background-color: var(--wx-davys-gray-color);
}

.darkTheme .topics-page .card-body {
    color: var(--wx-white-color);
    background-color: var(--wx-black-color);
}

.darkTheme .topics-page a {
    color: var(--wx-white-color);
}


/*----------------------------------------------------Members Page------------------------------------------------------*/

/*========== Dark Theme ==========*/

.darkTheme .members-page .card {
    border-color: var(--wx-davys-gray-color);
}

.darkTheme .members-page .card-header {
    color: var(--wx-white-color);
    background-color: var(--wx-davys-gray-color);
}




/*----------------------------------------------------Team Page------------------------------------------------------*/

/*========== Dark Theme ==========*/

.darkTheme .team-page {
    color: var(--wx-white-color);
}




/*----------------------------------------------------Post Topic Page------------------------------------------------------*/
.loeaderContainer {
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 12.5rem;
    width: 33.33%;
    height: 22.5rem;
    padding: 0.625rem;
    transform: translate(-50%, -50%);
    /*TODO*/
    background-color: #263038;
    display: flex;
    align-items: center;
    justify-content: center;
    /*TODO*/
    color: #ccc;
    cursor: pointer;
    transition: .2s linear;
    z-index: 9999;
    border-radius: 0.625rem;
    display: none
}

    .loeaderContainer .loadertext {
        position: absolute;
        top: 45%;
        margin: 1.75rem;
        font-size: 1.5rem;
        font-weight: bold;
        text-align: center
    }

.loader {
    width: calc(100px - 24px);
    height: 50px;
    position: absolute;
    top: 30%;
    animation: flippx 2s infinite linear;
}

    .loader:before {
        content: "";
        position: absolute;
        inset: 0;
        margin: auto;
        width: 1.25rem;
        height: 1.25rem;
        border-radius: 50%;
        background: #FFF;
        transform-origin: -1.5rem 50%;
        animation: spin 1s infinite linear;
    }

    .loader:after {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        background: #fff;
        width: 3rem;
        height: 3rem;
        border-radius: 50%;
    }

.post-topic-page .card-header, .post-topic-page .card-footer {
    background-color: var(--wx-ghost-white-color);
}

    .post-topic-page .card-footer button {
        display: flex;
        align-items: center;
        margin-right: 0.25rem;
        margin-left: 0.25rem;
        margin-top: 1rem;
        margin-bottom: 1rem;
        padding-top: 0.15rem;
        padding-bottom: 0.15rem;
    }

        .post-topic-page .card-footer button:nth-child(2) {
            background-color: var(--wx-secondary-color);
            border-color: var(--wx-secondary-color);
        }

    .post-topic-page .card-header i {
        padding-right: 2rem;
    }

/*========== Dark Theme ==========*/
.darkTheme .alert.alert-secondary{
    background-color: var(--wx-davys-gray-color);
    color: var(--wx-white-color);
}
.darkTheme .post-topic-page .card {
    border-color: var(--wx-davys-gray-color);
}

.darkTheme .post-topic-page .card-header {
    color: var(--wx-white-color);
    background-color: var(--wx-davys-gray-color);
}

.darkTheme .post-topic-page .card-body, .darkTheme .post-topic-page .card-footer {
    color: var(--wx-white-color);
    background-color: var(--wx-black-color);
}

.darkTheme .post-topic-page .text-break {
    background-color: var(--wx-davys-gray-color);
    border-color: var(--wx-davys-gray-color);
    color: var(--wx-white-color);
}
.darkTheme .toast-header {
    background-color: var(--wx-davys-gray-color);
    border-color: var(--wx-davys-gray-color);
    color: var(--wx-white-color);
}

.darkTheme .toast-body {
    background-color: var(--wx-black-color);
    color: var(--wx-white-color);
}

/*----------------------------------------------------Posts Page------------------------------------------------------*/

.navbar-wrapper ul:nth-child(2) {
    margin-right: 2rem;
}

.navbar-wrapper .col:nth-of-type(1) {
    margin-left: 0.75rem;
}

.navbar-wrapper button {
    text-decoration: none;
}

.posts-page .navbar button {
    color: var(--wx-secondary-color);
    text-wrap: nowrap;
}
.posts-page .navbar-collapse{
    flex-flow: nowrap;
}

.posts-page .card-header, .posts-page .card-footer {
    color: var(--wx-secondary-color);
    background-color: var(--wx-ghost-white-color);
}

    .posts-page .card-footer span {
        color: var(--wx-secondary-color);
    }

.markAsAnswer .card-header, .markAsAnswer .card-footer {
    background-color: var(--wx-lavender-web-color);
    border-color: var(--wx-lavender-web-color);
}

    .markAsAnswer .card-header .marked-answer-label {
        background-color: var(--wx-white-color);
        color: var(--wx-salem-color);
        display: flex;
        align-items: center;
    }

.card-header-left-container {
    display: flex;
    align-items: center;
}

/*========== Dark Theme ==========*/

.darkTheme .posts-page a, .darkTheme .posts-page .navbar button, .darkTheme .posts-page .card-footer span {
    color: var(--wx-white-color);
}


.darkTheme .posts-page .card-header, .darkTheme .posts-page .card-footer {
    background-color: var(--wx-davys-gray-color);
}

.darkTheme .posts-page .card-body {
    background-color: var(--wx-black-color);
}

.darkTheme .markAsAnswer .card {
    border-color: var(--wx-black-color);
}

.darkTheme .markAsAnswer .card-header, .darkTheme .markAsAnswer .card-footer {
    background-color: var(--wx-black-color);
    border-color: var(--wx-black-color);
}

.darkTheme .markAsAnswer .card-body {
    background-color: var(--wx-davys-gray-color);
}

    .darkTheme .markAsAnswer .card-body div {
        /*TODO*/
        border-color: var(--wx-black-color) !important;
    }

/*----------------------------------------------------Post Message Page------------------------------------------------------*/

/*========== Dark Theme ==========*/

.darkTheme .post-message-page .card {
    border-color: var(--wx-davys-gray-color);
}

.darkTheme .post-message-page a {
    color: var(--wx-white-color);
}

.darkTheme .post-message-page .card-header {
    color: var(--wx-white-color);
    background-color: var(--wx-davys-gray-color);
}

.darkTheme .post-message-page .card-body, .darkTheme .post-message-page .card-footer {
    color: var(--wx-white-color);
    background-color: var(--wx-black-color);
}

    .darkTheme .post-message-page .card-body .card-body {
        border-radius: 0.25rem;
    }

    .darkTheme .post-message-page .card-body .text-break {
        background-color: var(--wx-davys-gray-color);
        border-color: var(--wx-davys-gray-color);
        color: var(--wx-white-color);
    }

        .darkTheme .post-message-page .card-body .text-break a {
            background-color: black;
            border-color: black;
            padding: 0.25rem;
        }


.darkTheme .post-message-page abbr {
    color: var(--wx-white-color);
    opacity: 50%;
}

/*----------------------------------------------------GPTGroups Page------------------------------------------------------*/
.worxGPT-groups-page .card-header {
    height: 4rem;
}

    .worxGPT-groups-page .card-header span.custom-card-title {
        font-size: var(--wx-text-xl);
    }

.GPTUserGroupSearch::placeholder {
    color: var(--wx-lavender-gray-color);
}

.GPTGroup:hover {
    background-color: var(--wx-lavender-web-color);
}

.GPTUserGroupSearch:focus {
    box-shadow: none;
    border-color: var(--wx-colombia-blue-color);
}

.search-icon {
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    border-color: var(--wx-colombia-blue-color);
    background-color: var(--wx-ghost-white-color);
}

    .search-icon i {
        color: var(--wx-lavender-gray-color);
    }

    .search-icon:hover {
        background-color: var(--wx-white-color);
        border-color: var(--wx-colombia-blue-color);
    }

.card-body-GPTUsers {
    padding: 0px;
}

.input-group-GPTUsers_search {
    padding-top: .5rem;
    padding-right: .5rem;
    padding-left: .5rem;
    padding-bottom: 0px;
}

.UsersSearchList {
    top: 0px;
    left: 1.5%;
    width: 97%;
    z-index: 10;
    height: 40vh;
    overflow-y: scroll;
    display: none;
}

.User_Group_card_body {
    height: 55vh;
    overflow-y: scroll;
}

.worxGPT-groups-page .card .card-header a {
    background-color: var(--wx-secondary-color);
}

.worxGPT-groups-page .card .card-body a, .worxGPT-groups-page .card .card-body button {
    color: var(--wx-secondary-color);
}

.User_Group_card_body .IsDeleted {
    background-color: var(--wx-deleted-group-highlighted-color);
    color: var(--wx-pink-color);
}

    .User_Group_card_body .IsDeleted:hover {
        background-color: var(--wx-different-gray-color);
    }

.wx-secondary-color {
    background-color: var(--wx-secondary-color);
    color: #fff;
}

.IsSystemGroup .GPTGroupName {
    font-weight: bold;
}

@media (max-width: 576px) {
    .worxGPT-groups-page .card .card-header a span {
        display: none;
    }
}

.bootbox .modal-header {
    background-color: var(--wx-light-blue-color);
}

.bootbox-btn-success {
    background-color: var(--wx-secondary-color);
    color: var(--wx-white-color);
    opacity: .8;
    transition: opacity 0.3s ease;
}

    .bootbox-btn-success:hover {
        background-color: var(--wx-secondary-color);
        color: var(--wx-white-color);
        opacity: 1;
    }

.delete-confirmation-secondary-btn, .delete-confirmation-secondary-btn:hover {
    color: var(--wx-secondary-color);
    border: 1px solid var(--wx-secondary-color);
    border-radius: 5px;
    background-color: transparent;
    opacity: .8;
    transition: opacity 0.3s ease;
}

    .delete-confirmation-secondary-btn:hover {
        opacity: 1;
    }


/*========== Dark Theme ==========*/

.darkTheme .worxGPT-groups-page .card-body, .darkTheme .worxGPT-groups-page .card-body li, .darkTheme .worxGPT-groups-page .card-body a, .darkTheme .worxGPT-groups-page .card-body button {
    color: var(--wx-white-color);
    background-color: var(--wx-black-color);
}


.darkTheme .worxGPT-groups-page li {
    border-color: var(--wx-davys-gray-color);
}



/*----------------------------------------------------User Profile Page------------------------------------------------------*/


/*========== Dark Theme ==========*/



.darkTheme .user-profile-page a {
    color: var(--wx-white-color);
}

.darkTheme .user-profile-page h1 span {
    color: var(--wx-white-color);
}

.darkTheme .user-profile-page profilemenu a, .darkTheme .user-profile-page li {
    border-color: var(--wx-davys-gray-color);
    color: var(--wx-white-color);
    background-color: var(--wx-black-color);
}

.darkTheme .user-profile-page .list-group > li:first-child {
    background-color: var(--wx-davys-gray-color) !important;
}

.darkTheme .user-profile-page profilemenu a.active {
    border-color: var(--wx-davys-gray-color);
    background-color: var(--wx-davys-gray-color);
}


/*----------------------------------------------------My Messages Page------------------------------------------------------*/


/*========== Dark Theme ==========*/

.darkTheme .my-messages-page .card {
    border-color: var(--wx-davys-gray-color);
    background-color: var(--wx-black-color);
    color: var(--wx-white-color);
}


.darkTheme .my-messages-page a {
    color: var(--wx-white-color);
}

.darkTheme .my-messages-page profilemenu a, .darkTheme .my-messages-page li {
    border-color: var(--wx-davys-gray-color);
    color: var(--wx-white-color);
    background-color: var(--wx-black-color);
}


.darkTheme .my-messages-page .fa-info-circle::before {
    color: unset;
}

/*----------------------------------------------------Post Private Message Page------------------------------------------------------*/

/*========== Dark Theme ==========*/

.darkTheme .post-private-message .card, .darkTheme .post-private-message .card-footer {
    background-color: var(--wx-black-color);
    color: var(--wx-white-color);
}

.darkTheme .post-private-message .card-header {
    background-color: var(--wx-davys-gray-color);
}


/*----------------------------------------------------My Topics Page------------------------------------------------------*/

.my-topics-page .card-header i {
    padding-right: 2rem;
}

/*========== Dark Theme ==========*/

.darkTheme .my-topics-page .card {
    border-color: var(--wx-davys-gray-color);
    background-color: var(--wx-black-color);
}

.darkTheme .my-topics-page .card-header, .darkTheme .my-topics-page .card-footer {
    background-color: var(--wx-davys-gray-color);
    color: var(--wx-white-color);
}


/*----------------------------------------------------Subscriptions Page------------------------------------------------------*/


/*========== Dark Theme ==========*/

.darkTheme .subscriptions-page .card {
    border-color: var(--wx-davys-gray-color);
    background-color: var(--wx-black-color);
    color: var(--wx-white-color);
}

.darkTheme .subscriptions-page .card-header, .darkTheme .subscriptions-page .card-footer {
    background-color: var(--wx-davys-gray-color);
    color: var(--wx-white-color);
}

.darkTheme .my-messages-page a {
    color: var(--wx-white-color);
}

.darkTheme .subscriptions-page profilemenu a, .darkTheme .subscriptions-page li {
    border-color: var(--wx-davys-gray-color);
    color: var(--wx-white-color);
    background-color: var(--wx-black-color);
}

    .darkTheme .subscriptions-page profilemenu a.active {
        border-color: var(--wx-davys-gray-color);
        background-color: var(--wx-davys-gray-color);
    }


/*---------------------------------------------------- Icons ------------------------------------------------------*/

.fa-chart-line::before {
    content: url(../images/most-active-users-icon.svg);
}

.popover .fa-comment::before {
    content: url(../images/post-icon.svg);
}

.topics-page .fa-fw.fa-comments {
    width: 3.5rem;
}

.fa-reply::before, .fa-quote-left::before, .fa-ellipsis-h::before {
    color: var(--wx-secondary-color);
}

.fa-badge-bg {
    right: 8%;
    bottom: 28%;
    width: 30%;
    font-size: 75%;
}

.fa-badge {
    right: 20%;
    bottom: 62%;
    width: 15%;
}
/*========== hc preview dark Theme ==========*/
.darkTheme .hc-preview .hc-details{
    background-color: var(--wx-black-color) !important;
}
.darkTheme .hc-preview .hc-details .card-header{
    color: var(--wx-black-color);
}
/*========== Icon Dark Theme ==========*/
.darkTheme .fa.fa-heart::before{
    color: var(--wx-heart-color);
}
.darkTheme .fa.fa-clock.fa-badge::before{
    color: unset;
}
.darkTheme .fa.fa-heart.fa-stack-1x.fa-inverse::before{
    color: var(--wx-white-color);
}
.darkTheme .fas.fa-circle.fa-stack-2x::before{
    color: var(--wx-davys-gray-color);
}
.darkTheme .fa.fa-check::before{
    color: var(--wx-salem-color);
}
.darkTheme .fa.fa-exclamation-triangle::before{
    color: var(--wx-warning-color);
}
.darkTheme .alert .fa.fa-info-circle::before{
    color: var(--wx-info-color);
}

.delete-confirmation-secondary-btn:hover {
    opacity: 1;
}

.darkTheme .user-profile-page .fa-info-circle::before,
.darkTheme .my-topics-page .fa-info-circle::before {
    color: unset;
}

.darkTheme .popover .fa-comment::before {
    content: url(../images/post-icon-dt.svg);
}

.darkTheme .popover .fa-fire::before,
.darkTheme .popover .fa-lock::before,
.darkTheme .popover .fa-arrows-alt::before {
    color: var(--wx-charcoal-gray-color);
    opacity: 1;
}

.Statistics-bg-color {
    background-color: rgb(240, 241, 247);
}

.Statistics-card {
    margin-block-end: 1.5rem;
}

.Statistics-custom-card {
    border-radius: 0.5rem;
    border: 0;
    background-color: #fff;
    box-shadow: 0 0.125rem 0 rgba(10, 10, 10, .04);
    position: relative;
    margin-block-end: 1.5rem;
    width: 100%;
}

.Statistics-custom-card .card-body {
    padding: 1.25rem;
    color: rgba(255,255,255,0.7);
    color: #000000;
}

.Statistics-avatar {
    position: relative;
    height: 2.625rem;
    width: 2.625rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    color: #fff;
    font-weight: 500;
}

.Statistics-avatar-md {
    width: 2.5rem;
    height: 2.5rem;
    line-height: 2.5rem;
    font-size: 0.8rem;
}

.Statistics-card .bgSecondary {
    background-color: rgb(35, 183, 229);
}

.Statistics-card .bgWarning {
    background-color: rgb(245, 184, 73);
}

.Statistics-card .bgPink {
    background-color: rgb(231,145,188);
}

.Statistics-card .bgSuccess {
    background-color: rgb(38,191,148);
}

.Statistics-card .textSuccess {
    color: rgb(38,191,148);
}

.Statistics-card .textDanger {
    color: rgb(230,83,60);
}
.ranges .active, .daterangepicker td.in-range {
    background-color: var(--wx-light-secondary-color);
}
.daterangepicker td.active, .daterangepicker .drp-buttons .btn, .daterangepicker .ranges li.active {
    background-color: var(--wx-secondary-color);
    color: #fff
}
.stat-custom-card .card-header {
    border-block-end: 1px solid #f3f3f3;
    padding: 1rem 1.25rem;
    background-color: #fff;
    color: #333335;
}
.gridjs-pagination {
    color: #000 !important;
}
.gridjs-pagination .gridjs-pages button:disabled,
.gridjs-pagination .gridjs-pages button:hover:disabled,
.gridjs-pagination .gridjs-pages button[disabled] {
    background-color: #fff !important;
    color: #000 !important;
}
.gridjs-pagination .gridjs-pages button {
    background-color: #fff !important;
    border: 1px solid #f3f3f3 !important;
    padding: .375 .75rem!important;
    color: #333335 !important;
    padding: 5px 14px;
}
.gridjs-pagination .gridjs-pages button.gridjs-currentPage {
    font-weight: 600 !important;
    background-color:  var(--wx-secondary-color) !important;
    color: #fff !important;
}
.gridjs-pagination .gridjs-pages {
    float: end !important;
}
.gridjs-pagination .gridjs-pages button:first-child {
    border-bottom-left-radius: 0.5rem!important;
    border-top-left-radius: 0.5rem!important;
    border-bottom-right-radius: 0!important;
    border-top-right-radius: 0!important;
  }
.gridjs-pagination .gridjs-pages button:last-child {
    border-top-right-radius: 0.5rem!important;
    border-bottom-right-radius: 0.5rem!important;
    border-top-left-radius: 0!important;
    border-bottom-left-radius: 0!important;
  }
  .gridjs-pagination .gridjs-summary {
    float: left;
    margin-top: 5px;
}
.gridjs-pagination .gridjs-pages {
    float: right;
}
.Statistics .nav-tabs .nav-link {
    color: #000;
    border: none;
    cursor: pointer;
}
.Statistics .nav-tabs .nav-link.active {
    background-color: var(--wx-secondary-color) !important;
    color: #fff;
    border-radius: 0.375rem;
}
.doughnut-chart {
    text-align: center;
}
.data-notfound{
    color: #6b7280;
}
.doughnut-chart .data-notfound .icon-notfound{
    font-size: 100px;
}
.copilot_widgets{
    justify-content: space-around
}
th.gridjs-th .gridjs-th-content{
    text-overflow: clip !important;
}
.selected-dropdown-item {
    background-color: var(--wx-secondary-color) !important;
    color: #fff !important;
}
.Copilot-Statistics-card{
    background-color: rgb(240, 241, 247);
}
.Statistics .flex-fill{
    margin-top: 8px;

}
#navbarSupportedContent .nav-link{
    color: rgba(0,0,0,1);
}
@media (width < 768px) {
    .bar-charts{
        flex-direction: column;
        justify-content: center !important;
        align-items: center;
        gap: 4rem;
    }
}