a, a:hover {
        color: var(--highlight_background_color);
    }

    .alert-success {
        background-color: var(--success_background_color);
        border-color: var(--success_background_color);
    }

    body, .text-muted, .breadcrumb-item, .breadcrumb-item::before {
        color: var(--main_area_foreground_color) ;
    }

    .bootstrap-duallistbox-container select, .bootstrap-duallistbox-container.moveonselect .moveall, .bootstrap-duallistbox-container.moveonselect .removeall {
        background-color: var(--main_area_background_color);
        border-color: var(--border_color);
    }

   .btn-block {
          color: var(--regular_button_foreground_color) !important;
    }

    .btn-check:checked + .btn {
        background-color: var(--regular_button_background_color);
        border-color: var(--regular_button_background_color);
    }

    .btn-default {
        background-color: var(--regular_button_background_color) !important;
        border-color: var(--regular_button_background_color) ;
        color: var(--regular_button_foreground_color) !important;
    }

    .btn:disabled, .btn:disabled:hover{
      color: #fff;
      background-color: var(--disabled_button_background_color) !important;
      border-color: var(--disabled_button_background_color) !important;
    }

    .btn-outline-primary {
        border-color: var(--regular_button_background_color);
        color: var(--regular_button_foreground_color);
    }

    .btn-outline-secondary {
        color: var(--main_area_foreground_color);
        border-color: var(--main_area_foreground_color);
    }

    .btn-outline-secondary:hover {
        color: var(--regular_button_foreground_color);
        background-color: var(--main_area_background_color);
        border-color: var(--main_area_background_color);
    }

    .btn-primary {
        color: var(--regular_button_foreground_color);
        background-color: var(--regular_button_background_color);
        border-color: var(--regular_button_background_color);
    }

    .btn-primary:hover {
        color: var(--regular_button_foreground_color);
        background-color: var(--regular_button_background_color);
        /*border-color: var(--regular_button_background_color) !important;*/
        border-color: var(--regular_button_background_color) ;
    }

    .btn-revise{
        background-color: var(--regular_button_background_color);
        color: var(--regular_button_foreground_color);
    }

    .btn-revise:hover, .btn-revise:focus {
        background-color: var(--regular_button_background_color);
        border-color: var(--regular_button_background_color);
    }

    .btn-secondary, .btn-secondary:hover {
        color: var(--regular_button_foreground_color);
        background-color: var(--regular_button_background_color) !important;
        border-color: var(--regular_button_background_color);
    }

    .btn-info {
        background-color: var(--regular_button_background_color);
        border-color: var(--regular_button_background_color);
        color: var(--regular_button_foreground_color)
    }
    .btn-info:hover, .btn-info:focus {
        background-color: var(--regular_button_background_color) !important;
        /*background-color: color-mix(in srgb, var(--regular_button_background_color) 80%, white 20%); !important;*/
        border-color: var(--regular_button_background_color) !important;
        /*border-color: color-mix(in srgb, var(--regular_button_background_color) 80%, white 20%); !important;*/
        color: var(--regular_button_foreground_color)
    }

    .btn-info.disabled {
        background-color: var(--disabled_button_background_color);
        border-color: var(--disabled_button_background_color);
        color: var(--disabled_button_foreground_color)
    }

    .btn-danger {
        background-color: var(--danger_button_background_color);
        border-color: var(--danger_button_background_color);
    }

    .btn-danger:hover, button-danger:focus {
        background-color: var(--danger_button_background_color);
        border-color: var(--danger_button_background_color);
    }

    .btn-success {
        background-color: var(--regular_button_background_color);
        border-color: var(--regular_button_background_color);
    }

    .btn-success:hover, .btn-success:focus {
        background-color: var(--regular_button_background_color);
        border-color: var(--regular_button_background_color);
    }

    .card.card-outline-tabs .card-header a:hover {
        border-top: 3px solid var(--highlight_background_color);
        border-left: 1px solid var(--border_color);
        border-right: 1px solid var(--border_color);
    }

    .card.card-outline-tabs .card-header a {
        border-top: 3px solid transparent;
        border-left: 1px solid transparent;
        border-right: 1px solid transparent;
    }

    .card-footer{
        background-color: var(--main_area_background_color);
    }

     .card-header {
        border-bottom-color: var(--border_color) !important;
        background-color: var(--main_area_background_color);
    }

    .card-body {
        background-color: var(--main_area_background_color);
    }

    .card, .content-wrapper, .wrapper, .modal-footer {
        background-color: var(--main_area_background_color);
    }

    .card-primary.card-outline-tabs>.card-header a.active, .card-primary.card-outline-tabs>.card-header a.active:hover {
        border-left: 1px solid var(--border_color);
        border-right: 1px solid var(--border_color);
        border-top: 3px solid var(--highlight_background_color);
    }

    .chat-disclaimer, .content-footer {
        color: color-mix(in srgb, var(--main_area_foreground_color), white 40%) !important;
    }

    .footer-message::placeholder {
        color: color-mix(in srgb, var(--text_input_foreground_color), white 30%) !important;
    }

    .close-tab:hover {
        color: var(--highlight_background_color) !important;
    }

    .content-footer {
            color: var(--main_area_foreground_color);
    }

    .custom-control-input:checked~.custom-control-label::before {
        border-color: var(--border_color);
        background-color: var(--regular_button_background_color);
    }

    .direct-chat-primary .right>.direct-chat-text::after, .direct-chat-primary .right>.direct-chat-text::before {
        border-left-color: var(--user_message_background_color);
    }

    .direct-chat-text {
        background-color: var(--ai_message_background_color);
        border-color: var(--ai_message_background_color);
        color: var(--ai_message_foreground_color);
    }

    .direct-chat-text::after, .direct-chat-text::before {
        border-right-color: var(--ai_message_background_color);
    }

    .dropdown-item {
        color: var(--menu_foreground_color);
        background-color: var(--menu_background_color);
    }

    .dropdown-item:hover {
        color: var(--menu_hover_foreground_color) !important;
        background-color: var(--menu_hover_background_color) !important;
    }

    .dropdown-menu {
        background-color: var(--menu_background_color);
    }

    .dropdown-menu show {
        background-color: var(--main_area_foreground_color) !important;
    }

    .dropdown-menu .dropdown-item:focus {
        background-color: var(--menu_hover_foreground_color) !important;
    }

    .card-title, .dt-length, .dt-search, .dataTable, .dt-info, .dt-paging, .dt-paging-button {
        color: var(--main_area_foreground_color) !important;
    }

    .dropdown-toggle {
         color: var(--main_area_foreground_color);
    }

    .dropdown-toggle:hover {
        color: var(--menu_hover_background_color) !important;
    }

    .dropdown-divider {
        border-top-color: var(--border_color);
    }

    .dt-column-order, div.dt-container .dt-paging .dt-paging-button.disabled, div.dt-container .dt-paging .dt-paging-button.disabled:hover, div.dt-container .dt-paging .dt-paging-button.disabled:active {
        color: var(--border_color) !important;
    }

    .dt-input {
        border-color: var(--border_color) !important;
    }

    .fa-plus {
        color: var(--main_area_foreground_color) !important;
    }

    .fa-plus:hover{
        color: var(--highlight_background_color) !important;
    }

    .fa-robot {
        color: var(--main_area_foreground_color) ! important;
    }

    .fa-sync-alt {
        color: var(--regular_button_background_color);
    }

    .fa-sync-alt:hover {
        color: var(--regular_button_background_color);
    }

    .fa-bars {
        color: var(--main_area_foreground_color);
    }

    .fa-bars:hover {
        color: var(--main_area_foreground_color);
    }

    .form-control {
        background-color: var(--main_area_background_color) !important;
        border-color: var(--border_color);
        color: var(--main_area_foreground_color) !important;
    }

    .form-control:focus {
        border-color: var(--highlight_background_color);
        color: var(--main_area_foreground_color);
        background-color: var(--main_area_background_color);
    }

    .form-control::placeholder {
        color: color-mix(in srgb, {{ color_scheme.main_area_foreground_color }}, white 40%) !important;
    }
s
    .icon-picker-input {
        background-color: var(--main_area_background_color);
        border: 1px solid var(--border_color);
        color: var(--main_area_foreground_color);
    }

    .iconpicker-popover.popover .popover-title,.iconpicker .iconpicker-items {
        border-bottom: 1px solid var(--border_color) !important;
        background-color: var(--main_area_background_color) !important;
        box-shadow: 0 0 0 1px var(--border_color) !important;
    }

    .info-chat-text {
        color: var(--ai_message_foreground_color);
        background-color: var(--ai_message_background_color);
        border-color: var(--ai_message_background_color) !important;
    }

    .info-icon-i {
        color: var(--main_area_foreground_color) !important;
    }

    .input-group{
        background-color: var(--text_input_background_color);
    }

    .input-group-text {
         background-color: var(--border_color);
         border: 1px solid var(--border_color);
         color: var(--text_input_foreground_color) ;
    }

    .irs--flat .irs-handle>i:first-child, .irs--flat .irs-bar, .irs--flat .irs-from, .irs--flat .irs-to, .irs--flat .irs-single {
        background-color: var(--regular_button_background_color) !important;
    }

    .irs--flat .irs-from:before, .irs--flat .irs-to:before, .irs--flat .irs-single:before {
        border-top-color: var(--regular_button_background_color) !important;
    }

    label, .modal-title, .form-check-label {
        color: var(--main_area_foreground_color);
    }

    .modal-header, modal-footer, .modal-body {
        background-color: var(--main_area_background_color);
        border-bottom: 1px solid var(--border_color);
        border-top: 0px solid var(--border_color);
    }

    .main-header {
        background-color: var(--main_area_background_color);
    }

    .main-sidebar{
        background-color: var(--sidebar_background_color);
    }

    .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
        color: var(--main_area_foreground_color) !important;
        background-color: var(--main_area_background_color);
    }

    .nav-item.position-relative .nav-link.active {
      border-bottom: 2px solid var(--main_area_background_color);
    }

    .nav-tabs .nav-link{
        border-bottom: 1px solid var(--main_area_background_color);
        color: var(--main_area_foreground_color);
    }
    .nav-tabs {
        border-bottom: 1px solid var(--border_color);
    }

    .nav-tabs .nav-link:hover {
        border-top: 1px solid var(--border_color);
        border-left: 1px solid var(--border_color);
        border-right: 1px solid var(--border_color);
        border-bottom: 1px solid var(--main_area_background_color);
    }

    .nav-tabs .nav-link.active {
        border-top: 2px solid var(--highlight_background_color);
        border-left: 1px solid var(--border_color) !important;
        border-right: 1px solid var(--border_color) !important;
        border-bottom: 0px var(--main_area_background_color);
    }

    .navbar-light:hover .navbar-nav:hover .nav-link:hover, .navbar-nav .show > .nav-link {
        color: var(--main_area_foreground_color) !important;
    }

    .navbar-light .navbar-nav .nav-link {
        color: var(--main_area_foreground_color);
    }

    .nav-item .inactive-toggle {
      color: var(--main_area_foreground_color) !important;
    }

    .nav-item .active-toggle {
      color: var(--main_area_foreground_color) !important;
    }

    .nav-link .tab-name, .nav-link .close-tab {
        color: var(--main_area_foreground_color) !important;
    }

    .page-item {
        background-color: var(--main_area_background_color) !important;
        border-color: var(--highlight_background_color);
    }

    .page-item.active {
        background-color: var(--highlight_background_color);
        border-color: var(--highlight_background_color);
    }

    .page-link {
        color:  var(--regular_button_background_color);
    }

    .page-item.active .page-link{
        background-color: var(--highlight_background_color);
        border-color: var(--highlight_background_color);
    }

    .page-item.disabled .page-link{
        background-color: var(--disabled_button_background_color);
        border-color: var(--disabled_button_background_color);
        color: var(--disabled_button_foreground_color);
    }

    .right>.direct-chat-text {
        background-color: var(--user_message_background_color) !important;
        border-color: var(--user_message_background_color) !important;
        color: var(--user_message_foreground_color) !important;
    }

    .round-button, .footer-message {
        background-color: var(--text_input_background_color) !important;
    }

    .round-button:hover {
        background-color: var(--highlight_background_color) !important;
    }

    .select2-container--default .select2-selection--multiple .select2-selection__rendered {
        background-color: var(--main_area_background_color);
    }

    .select2-container--default.select2-container--focus .select2-selection--single, .select2-container--default .select2-selection--single, .select2-search__field, .select2-search {
      border-color: var(--border_color);
      background-color: var(--main_area_background_color);
    }

    .select2-container--default .select2-results__option--highlighted[aria-selected], .select2-container--default .select2-results__option--highlighted[aria-selected]:hover {
        background-color: var(--menu_hover_background_color) !important;
        color: var(--menu_hover_foreground_color) !important;
    }

    .select2-container--default .select2-results__option[aria-selected=true], .select2-container--default .select2-results__option[aria-selected=true]:hover {
        color: var(--main_area_foreground_color);
        background-color: var(--border_color);
    }

    .select2-container--default .select2-selection--multiple .select2-selection__choice {
        background-color: var(--highlight_background_color);
        border-color: var(--highlight_background_color);
        color: var(--highlight_foreground_color);
    }

    .select2-container--default .select2-results__option {
        background-color: var(--main_area_background_color);
        color: var(--main_area_foreground_color);
    }

    .system-actions button.button-like i.far {
        color: color-mix(in srgb, var(--text_input_foreground_color), white 40%);
    }

    .system-actions button.button-dislike i.far {
        color: color-mix(in srgb, var(--text_input_foreground_color), white 40%);
    }

    .system-actions button.button-copy i.fa-regular{
         color: color-mix(in srgb, var(--text_input_foreground_color), white 40%) !important;
    }

    .system-actions button.button-regenerate i.fas{
         color: color-mix(in srgb, var(--text_input_foreground_color), white 40%) !important;
    }

    /* Highlight color for the like button */
    .system-actions button.button-like i.fas {
        color: var(--highlight_background_color);
    }

    /* Highlight color for the dislike button */
    .system-actions button.button-dislike i.fas {
        color: var(--highlight_background_color);
    }

    .table-bordered td, .table-bordered th, .dt-paging-button.current {
        border-color: var(--border_color) !important;
    }

    .table-striped tbody tr:nth-of-type(odd) {
        background-color: var(--main_area_background_color);
    }

    .tab-name, .close-tab{
        color: var(--main_area_foreground_color) !important;
    }

    .toast.bg-success {
        background-color: var(--success_background_color) !important;
    }

    .toast.bg-success .toast-header {
        background-color: var(--success_background_color) !important;
    }

    .welcome-box {
        background-color: var(--sidebar_background_color) !important;
        max-width: 600px;
        padding: 30px;
        border-radius: 15px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    }

    .welcome-title {
        color: var(--sidebar_foreground_color);
    }

    .welcome-message {
        color: var(--sidebar_foreground_color);
    }

    .welcome-section {
        background-color: var(--main_area_background_color);
    }

    .sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link:hover{
        background-color: var(--sidebar_hover_background_color);
    }

    /* Deals with tooltip width and the text allignment  */
    .tooltip .tooltip-inner { 
    max-width: 360px;
    white-space: normal;
    text-align: left;

/*!* */
/*    button standarisation  *!*/
/*    :root {*/
/*    --btn-bg: var(--regular_button_background_color);        */
/*    --btn-fg: var(--regular_button_foreground_color);         */

/* */
/*    --btn-hover-bg: color-mix(in srgb, var(--btn-bg) 80%, white 20%);*/
/*    --btn-hover-fg: var(--btn-fg);*/

/*    --btn-danger-bg: var(--danger_button_background_color, #dc3545);*/
/*    }*/


/*    .btn {*/
/*    background-color: var(--btn-bg);*/
/*    color: var(--btn-fg);*/
/*    border-color: var(--btn-bg);*/
/*    transition: background-color .15s ease, border-color .15s ease, color .15s ease;*/
/*    }*/

/*    .btn:hover,*/
/*    .btn:focus-visible {*/
/*    background-color: var(--btn-hover-bg) !important;*/
/*    border-color: var(--btn-hover-bg) !important;*/
/*    color: var(--btn-hover-fg) !important;*/
/*    }*/

/*    .btn-primary,*/
/*    .btn-info,*/
/*    .btn-success,*/
/*    .btn-default,*/
/*    .btn-revise {*/
/*    background-color: var(--btn-bg) !important;*/
/*    border-color: var(--btn-bg) !important;*/
/*    color: var(--btn-fg) !important;*/
/*    }*/

/*    .btn-outline-primary,*/
/*    .btn-outline-secondary {*/
/*    background: transparent;*/
/*    border-color: var(--btn-bg);*/
/*    color: var(--btn-bg);*/
/*    }*/
/*    .btn-outline-primary:hover,*/
/*    .btn-outline-primary:focus-visible,*/
/*    .btn-outline-secondary:hover,*/
/*    .btn-outline-secondary:focus-visible {*/
/*    background-color: var(--btn-hover-bg) !important;*/
/*    border-color: var(--btn-hover-bg) !important;*/
/*    color: var(--btn-hover-fg) !important;*/
/*    }*/


/*    .btn-danger {*/
/*    background-color: var(--btn-danger-bg) !important;*/
/*    border-color: var(--btn-danger-bg) !important;*/
/*    color: var(--btn-fg) !important;*/
/*    }*/
/*    .btn-danger:hover,*/
/*    .btn-danger:focus-visible {*/
/*    background-color: color-mix(in srgb, var(--btn-danger-bg) 80%, white 20%) !important;*/
/*    border-color: color-mix(in srgb, var(--btn-danger-bg) 80%, white 20%) !important;*/
/*    color: var(--btn-fg) !important;*/
/*    }*/


/*    .btn.dropdown-toggle:hover,*/
/*    .btn.dropdown-toggle:focus-visible {*/
/*    background-color: var(--btn-hover-bg) !important;*/
/*    border-color: var(--btn-hover-bg) !important;*/
/*    color: var(--btn-hover-fg) !important;*/
/*    }*/




    [class*="sidebar-dark-"] .nav-treeview > .nav-item > .nav-link:hover {
      background-color: var(--sidebar_hover_background_color);
    }