/* Use the website https://b64.io/ to convert a .png to base64 image */

/* Base colors */
:root {
    --primary: #1a3d4d;
    --primary-dark: #0d2733;
    --primary-light: #4d8199;
    --primary-lighter: #698a99; /* Custom sidebar items */
    --primary-custom: #486471; /* Custom */
    --primary-transparent: #1a3d4d32;

    --secondary: #d1f97b;
    --secondary-dark: #a2cc47;
    --secondary-light: #e7ffb2;

    --tertiary: #564ae2;
    --tertiary-dark: #2a1dbf;
    --tertiary-light: #6155eb;
    --tertiary-transparent: #564ae210;

    /* Complementary colors */
    --complementary-01: #9becf4;
    --complementary-02: #e5f6ff;
    --complementary-03: #f9ffd2;

    /* Base Colors */
    --black: #000000;
    --white: #ffffff;
    --white-100: #f5e9da;
    --white-200: #f5f0eb;
    --white-01: #ffffff;
    --white-02: #fafafa;
    --white-03: #f6f6f6;
    --white-transparent: #ffffff82;

    /* Semantic Colors */
    --background: #f9f9f9;
    --background-tooltip: #FFF9D2;
    --border: #eeeeee;
    --placeholder: #6c757d;

    /* Grey Colors */
    --grey-04: #212125;
    --grey-03: #465461;
    --grey-375: #4e4e4e;
    --grey-350: #9292a5;
    --grey-300: #a2a2c3;
    --grey-250: #c5d2da;
    --grey-02: #dcdde2;
    --grey-01: #edf1f7;
    --grey-05: #F7F7F7;
	--grey-06: #848484;
	--grey-07: #504F4F;
    --grey-11: #3f3e3e;

    /* Alert colors */
    --yellow-05: #614900; /* Not Used */
    --yellow-04: #a57c00; /* Not Used */
    --yellow-03: #e9b61a;
    --yellow-02: #ffd860;
    --yellow-01: #fff9e8;

    --green-05: #186137;
    --green-04: #35945d;
    --green-03: #5dc78a;
    --green-survey: #c3de8e;
    --green-02: #90fabd;
    --green-01: #e3fcee;

    --blue-05: #003472; /* Not Used */
    --blue-04: #0255b6;
    --blue-03: #0d6efd; /* Not Used */
    --blue-02: #aad1ff;
    --blue-01: #eaf3ff;

    --red-05: #690404;
    --red-04: #ad1d1d;
    --red-03: #f14848;
    --red-02: #ff8282;
    --red-01: #ffeded;
    --red-06: #FCEBEA;

    /* Base Colors */
    --success: #186137;
    --danger: #ad1d1d;
    --warning: #e9b61a;

    --light-blue: #e5f6ff;
    --light-yellow: #fdf7e5;
    --light-purple: #d8d2ff;
}

/* Theme components */
:root {
    /* Advanced Filter on reports */
    --wdk-advanced-filter-background-color: var(--white-01);
    --wdk-advanced-filter-border-color: var(--primary-transparent);

    /* Alerts */
    --alert-primary-text-color: var(--blue-04);
    --alert-primary-background-color: var(--grey-01);
    --alert-primary-border-color: var(--blue-04);

    --alert-success-text-color: var(--green-05);
    --alert-success-background-color: var(--green-01);
    --alert-success-border-color: var(--green-05);

    --alert-danger-text-color: var(--red-04);
    --alert-danger-background-color: var(--red-01);
    --alert-danger-border-color: var(--red-04);

    --alert-warning-text-color: var(--yellow-04);
    --alert-warning-background-color: var(--yellow-01);
    --alert-warning-border-color: var(--yellow-04);

    --alert-questionnaire-text-color: var(--blue-04);
    --alert-questionnaire-background-color: var(--tertiary-transparent);
    --alert-questionnaire-border-color: var(--tertiary);

    /* Badges */
    --badge-primary-text-color: var(--grey-01);
    --badge-primary-background-color: var(--primary);

    --badge-primary-dark-text-color: var(--white-01);
    --badge-primary-dark-background-color: var(--primary-dark);

    --badge-secondary-text-color: var(--primary);
    --badge-secondary-background-color: var(--secondary);

    --badge-secondary-dark-text-color: var(--white-01);
    --badge-secondary-dark-background-color: var(--secondary-dark);

    --badge-tertiary-text-color: var(--white-01);
    --badge-tertiary-background-color: var(--tertiary);

    --badge-success-text-color: var(--white-01);
    --badge-success-background-color: var(--green-04);

    --badge-warning-text-color: var(--white-01);
    --badge-warning-background-color: var(--yellow-04);

    --badge-danger-text-color: var(--white-01);
    --badge-danger-background-color: var(--danger);

    --badge-red-text-color: var(--white-01);
    --badge-red-background-color: var(--danger);

    --badge-red-dark-text-color: var(--white-01);
    --badge-red-dark-background-color: var(--red-05);

    --badge-light-text-color: var(--primary);
    --badge-light-background-color: var(--white-01);

    --badge-light-blue-text-color: var(--primary);
    --badge-light-blue-background-color: var(--light-blue);

    --badge-info-text-color: var(--primary);
    --badge-info-background-color: var(--secondary);

    /* Badge Weduka (Define differences with the regular badge) */
    --wdk-badge-primary-text-color: var(--grey-03);
    --wdk-badge-primary-background-color: var(--secondary);
    /* There is an unmapped color inside a .wdk-badge-wrap */

    /* Banner Game */
    --banner-game-text-color: var(--white-01);
    --banner-game-background-color: var(--primary);
    --banner-game-text-color-hover: var(--white-01);
    --banner-game-background-color-hover: var(--primary-dark);

    --banner-game-points-text-color: var(--primary);
    --banner-game-points-background-color: var(--white-01);
    --banner-game-points-text-color-hover: var(--primary);
    --banner-game-points-background-color-hover: var(--white-01);

    /* Basic styles */
    --system-base-background-color: var(--background);
    --system-main-background-color: var(--background);

    --page-title-text-color: var(--grey-04);
    --page-description-and-breadcrumb-text-color: var(--grey-03);

    /* Buttons */
    --btn-primary-text-color: var(--secondary);
    --btn-primary-background-color: var(--primary);
    --btn-primary-text-color-hover: var(--secondary);
    --btn-primary-background-color-hover: var(--primary-dark);
    --btn-primary-text-color-active: var(--secondary);
    --btn-primary-background-color-active: var(--primary-dark);

    --btn-secondary-text-color: var(--primary);
    --btn-secondary-background-color: var(--secondary);
    --btn-secondary-text-color-hover: var(--primary);
    --btn-secondary-background-color-hover: var(--secondary-dark);
    --btn-secondary-text-color-active: var(--primary);
    --btn-secondary-background-color-active: var(--secondary-light);

    --btn-tertiary-text-color: var(--white-01);
    --btn-tertiary-background-color: var(--tertiary);
    --btn-tertiary-text-color-hover: var(--white-01);
    --btn-tertiary-background-color-hover: var(--tertiary-dark);
    --btn-tertiary-text-color-active: var(--white-01);
    --btn-tertiary-background-color-active: var(--tertiary-dark);

    --btn-light-text-color: var(--primary);
    --btn-light-background-color: var(--white-01);
    --btn-light-text-color-hover: var(--primary);
    --btn-light-background-color-hover: var(--grey-02);
    --btn-light-text-color-active: var(--primary-dark);
    --btn-light-background-color-active: var(--grey-02);

    --btn-inline-color: var(--primary);
    --btn-inline-color-hover: var(--tertiary);

    --btn-inline-color-tertiary: var(--tertiary);
    --btn-inline-color-tertiary-hover: var(--tertiary-dark);

    --btn-link-color: var(--primary);
    --btn-link-color-hover: var(--tertiary);

    --btn-close-color: var(--black);
    --btn-close-color-hover: var(--tertiary);

    /* Blank state */
    --blank-state-light-background-color-full: #ffffff00; /* We have a problem here because this is not efficient*/
    --blank-state-light-background-color-none:  #ffffffff ; /* We have a problem here because this is not efficient*/

    --blank-state-text-color: var(--grey-03);

    /* Box */
    --box-background-color: var(--white-01);
    --box-shadow: transparent;
    --box-border: transparent;

    --box-header-text-color: var(--primary);

    /* Circle (Used in document find & journey) */
    --circle-border-color: var(--primary-dark);

    --circle-fill-background-color: var(--primary);
    --circle-fill-color: var(--secondary);

    /* Divisor */
    --divisor-base-color: var(--primary);
    --divisor-light-color: var(--grey-300);

    /* Duallistbox */
    --btn-move-remove-all-duallistbox-text-color: var(--primary);
    --btn-move-remove-all-duallistbox-background-color: var(--secondary);
    --btn-move-remove-all-duallistbox-text-color-hover: var(--primary);
    --btn-move-remove-all-duallistbox-background-color-hover: var(--secondary-dark);

    /* Date picker & range */
    --date-picker-title-days-text-color: inherit;

    --date-picker-box-background-color: var(--white-01);
    --date-picker-box-border: 1px solid transparent;
    --date-picker-box-divisors: var(--grey-02);

    --date-picker-dropdown-text-color: inherit;
    --date-picker-dropdown-background-color: transparent;

        /* Regular button*/
        --date-picker-btn-date-period-text-color: inherit;
        --date-picker-btn-date-period-background-color: transparent;
        --date-picker-btn-date-period-text-color-hover: var(--primary);
        --date-picker-btn-date-period-background-color-hover: var(--grey-02);

        /* Selected button */
        --date-picker-btn-date-period-text-color-active: var(--secondary);
        --date-picker-btn-date-period-background-color-active: var(--primary);
        --date-picker-btn-date-period-text-color-active-hover: var(--secondary);
        --date-picker-btn-date-period-background-color-active-hover: var(--primary);

        /* Day out of the month */
        --date-picker-btn-date-period-text-color-disabled: var(--grey-02);
        --date-picker-btn-date-period-background-color-disabled: transparent;
        --date-picker-btn-date-period-text-color-disabled-hover: var(--grey-02);
        --date-picker-btn-date-period-background-color-disabled-hover: var(--white-03);

        /* Day in range */
        --date-picker-btn-date-period-text-color-in-range: inherit;
        --date-picker-btn-date-period-background-color-in-range: #ebf4f8;
        --date-picker-btn-date-period-text-color-in-range-hover: var(--primary);
        --date-picker-btn-date-period-background-color-in-range-hover: var(--grey-02);

        /* Nav button */
        --date-picker-btn-arrow-nav-text-color: var(--tertiary);
        --date-picker-btn-arrow-nav-background-color: transparent;
        --date-picker-btn-arrow-nav-text-color-hover: var(--tertiary);
        --date-picker-btn-arrow-nav-background-color-hover: var(--background);

    /* Form */
        /* Input */
        --input-text-border-color: var(--grey-02);
        --input-text-border-focus-color: var(--primary);

        --input-text-background-color: var(--white-01);

        --form-label-color: var(--grey-03);
        --form-text-color-focus: var(--primary);

        /* Dropdown */
        --dropdown-focus-border-color: var(--primary);

        --dropdown-item-text-color: var(--grey-03);
        --dropdown-item-background-color:  var(--white-01);

        --dropdown-item-text-color-hover: var(--grey-03);
        --dropdown-item-background-color-hover: #e9ecef;

        --dropdown-base64-icon-arrow: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABsAAAARBAMAAADeYcoAAAAALVBMVEUAAABFVGBFUmBFVWBAUGBFVGFFU2FGU2FGVGFGU2FFU2BGVGBEVGBEVGBGVGEQleW4AAAADnRSTlMAv2AwEPDg0LCgkIBwQNyDfrkAAAA6SURBVAjXY6AiWCgIBMJwbtw7IHgD594DcUvgXCYg75kDQvO+d++CkczifPfOANlsuUcoVnkoUMfJAFq3FWF7n9qpAAAAAElFTkSuQmCC);

            /* Select & Multiselect - ACTIVE */
            --dropdown-item-select-text-color-active: var(--primary);
            --dropdown-item-select-background-color-active: #e9ecef;

            --dropdown-item-multiselect-text-color-active: var(--white-01);
            --dropdown-item-multiselect-background-color-active: var(--primary);
            --dropdown-item-multiselect-icon-color-active: var(--secondary); /* Check icon inside the list */

            /* Dropdown Action Box - Select all & Clear selection */
            --dropdown-action-box-btn-text-color: var(--primary);
            --dropdown-action-box-btn-background-color: transparent;
            --dropdown-action-box-btn-text-color-hover: var(--primary);
            --dropdown-action-box-btn-background-color-hover: var(--grey-02);
            --dropdown-action-box-btn-text-color-active: var(--primary-dark);
            --dropdown-action-box-btn-background-color-active: var(--grey-01);

            /* Dropdown Card */
            --dropdown-card-title-icon-color: var(--grey-04);
            --dropdown-card-description-color: var(--grey-04);
            --dropdown-card-background-color: var(--white-01);
            --dropdown-card-title-icon-color-hover: var(--primary-dark);
            --dropdown-card-description-color-hover: var(--primary-dark);
            --dropdown-card-background-color-hover: var(--secondary);

        /* Check inputs */
        --form-check-background-color: var(--primary); /* Same color to checkbox, radio & switch */

            /* Checkbox */
            --form-checkbox-base64-image-active: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAMAAAC6V+0/AAAAGFBMVEUAAAD//wD//4DQ+XrQ+nvS+XvR+Xv///+nMdXNAAAABnRSTlMAAQJcXZ0dwv2eAAAAO0lEQVR42sTLhwkAMAwDwbjuP3IwwpTPABFVB3/+zCKM5tWdry1uJStfzDmwwS6YQphURqXdQR1AdwAADvQBT4U9nJAAAAAASUVORK5CYII=);

            /* Switch */
            --form-switch-base64-image-inactive: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAMAAAC7IEhfAAAATlBMVEUAAAD//+///+////f///P///L///H///P///H///P///H///P///P///L///L///L///L///L///L///H///P///L///L///H///L///LPTHbEAAAAGXRSTlMAECAgQGBwf4CAj4+Qn6CvsL/Az8/Q3+DvYu3s3gAAAMhJREFUeNqN0VUCwkAQA9Cs4g7D5P4HxZ22m/e7MhJ8y3VlTvpuNc7oFUbOD7aI6BJm/NN1tTo7WMGPGXtM8Sls2GsX8LbjgI1Q96d6YUPFTTQ2eMDVkhdC8UhB0D4kxwCMAgcyJRljSirWlKyxp8TglDgoAkV66SMle309lZKxHiGcAgO0sBcAAgUJF3PtQyA4GyzhprKh4EIoPsfLZji9t7Bnr23Ap7lQ964YO3jFn7Ts+C6gS1oaP/gkoFcerw9O+nFdM76cAcm2egsb4XlkAAAAAElFTkSuQmCC);
            --form-switch-base64-image-active: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAKlBMVEUAAADP/3jV+nrR+HrR+HvR+XrR+XrQ+XrR+XvQ+HvR+HrQ+XvQ+XrR+Xuhmct8AAAADXRSTlMAIDBvcH+Ar7C/wO/wuFJj1gAAAFFJREFUeNplz8UBACEMBMDFIdJ/uac484M4XjYU5hIsKq8/dvhk7VKNDx6wOmOLqIsI0gVBdMH7h5wlR1MrS4U5F1tWz/W4WiUelY0kQtHgcQM5vQnaabfi3wAAAABJRU5ErkJggg==);

            /* Radio */
            --form-radio-token-color-active: var(--secondary); /* This input doesn't use image */

    /* Loading .gif */
    --loading-git-file: url("../../img/loading-secondary.gif");

    /* Modal & Drawer */
    --modal-drawer-header-title-color: var(--primary);
    --modal-drawer-header-footer-background-color: var(--background);

    --modal-drawer-body-background-color: var(--white-01);

    /* Progress bar */
    --progress-bar-rounded-color: var(--tertiary);
    --progress-bar-rounded-text-color: var(--tertiary);

    /* Table */
    --table-head-text-color: var(--primary);
    --table-body-text-color: var(--primary);

    --table-head-sort-icon-color: var(--grey-02);
    --table-head-sort-icon-color-hover: var(--primary);
    --table-head-expand-icon-color: var(--primary-light);
    --table-head-expand-icon-color-hover: var(--primary-dark);

    --table-line-odd-background-color: var(--grey-01);
    --table-line-even-background-color: transparent;

    /* Tabs - Btn component need a hover */
    --tabs-primary-text-color: var(--primary);
    --tabs-primary-active-color: var(--tertiary);
    --tabs-primary-borders-color: var(--primary-light);

    /* Tags */
    --wdk-tag-primary-text-color: var(--secondary);
    --wdk-tag-primary-background-color: var(--primary);

    --wdk-tag-secondary-text-color: var(--primary);
    --wdk-tag-secondary-background-color: var(--secondary);

    --wdk-tag-featured-text-color: var(--primary);
    --wdk-tag-featured-background-color: var(--complementary-01);

    --wdk-tag-danger-text-color: var(--white-01);
    --wdk-tag-danger-background-color: var(--red-04);

    --wdk-tag-success-text-color: var(--white-01);
    --wdk-tag-success-background-color: var(--green-03);

    --wdk-tag-warning-text-color: var(--white-01);
    --wdk-tag-warning-background-color: var(--yellow-04);

    --wdk-tag-complementary-text-color: var(--dark);
    --wdk-tag-complementary-background-color:  var(--complementary-01);

    /* Texts */
    --text-base: var(--grey-04);
    --text-primary: var(--primary);

    /* Tooltip */
    --wdk-tooltip-text-color: var(--grey-04);
    --wdk-tooltip-background-color: var(--background-tooltip);

    /* Scroll mini */
    --scroll-thumb-base-custom-color: var(--tertiary-dark);
    --scroll-thumb-light-custom-color: #cccccc;

    /* Sticky Wisa */
    --sticky-wisa-text-color: var(--text-base);
    --sticky-wisa-background-color: var(--white-01);
    --sticky-wisa-footer-background-color: var(--background);

    /* Wizard */
    --wizard-label-text-color: var(--grey-03) ;
    --wizard-counter-text-color:  var(--grey-03);
    --wizard-counter-background-color: var(--white-01);
    --wizard-border-color: var(--primary); /* Same color regular and active, what changes is the weight */
    --wizard-line-color: var(--primary-light);
    --wizard-tab-content-background: var(--white-01);
    --wizard-tab-content-border: transparent;

    /* Weduka Search */
    --wdk-search-text-color: var(--primary);

        --wdk-search-dropmenu-background-color: var(--white-01);
        --wdk-search-dropmenu-border-color: var(--primary);

        --wdk-search-dropmenu-tab-text-color: var(--text-base);
        --wdk-search-dropmenu-tab-background-color: var(--grey-01);
        --wdk-search-dropmenu-tab-active-text-color: var(--white-01);
        --wdk-search-dropmenu-tab-active-background-color: var(--tertiary);

        --wdk-search-dropmenu-tag-text-color: var(--secondary);
        --wdk-search-dropmenu-tag-key-text-color: var(--white-01);
        --wdk-search-dropmenu-tag-background-color: var(--primary);

        --wdk-search-dropmenu-tag-text-color-hover: var(--secondary);
        --wdk-search-dropmenu-tag-background-color-hover: var(--primary-dark);

        --wdk-search-dropmenu-tag-delete-text-color: var(--secondary);
        --wdk-search-dropmenu-tag-delete-text-color-hover: var(--red-04);

    /* Weduka Footer */
    --wdk-footer-background-color: var(--grey-01);
    --wdk-footer-border-color: transparent;
}

/* Theme pages & partials */
:root {
    /* Login */
    --wdk-login-background: var(--white-01);
    --wdk-login-texts: var(--primary);

    --wdk-login-input-text-color: var(--primary);
    --wdk-login-input-background-color: var(--grey-01);
    --wdk-login-input-background-autofill-color: var(--blue-01);
    --wdk-login-input-border-color: var(--background);

    --wdk-login-input-text-color-focus: var(--primary);
    --wdk-login-input-background-color-focus: var(--white-01);
    --wdk-login-input-border-color-focus: var(--input-text-border-focus-color);

    --wdk-login-btn-inline-color: var(--btn-inline-color);
    --wdk-login-btn-inline-color-hover: var(--btn-inline-color-hover);

    --wdk-login-btn-rounded-text-color: var(--primary);
    --wdk-login-btn-rounded-background-color: var(--white-01);
    --wdk-login-btn-rounded-text-color-hover: var(--primary);
    --wdk-login-btn-rounded-background-color-hover: var(--grey-02);
    --wdk-login-btn-rounded-shadow-color: rgb(0 0 0 / 10%);

    --wdk-login-btn-main-text-color: var(--btn-primary-text-color);
    --wdk-login-btn-main-background-color: var(--btn-primary-background-color);
    --wdk-login-btn-main-text-color-hover: var(--btn-primary-text-color-hover);
    --wdk-login-btn-main-background-color-hover: var(--btn-primary-background-color-hover);
}

/* App Header */
:root {
    --header-background-color: var(--white-01);

    --header-btn-text-color: var(--grey-03);
    --header-btn-background-color: var(--white-01);
    --header-btn-text-color-hover: var(--primary);
    --header-btn-background-color-hover: var(--grey-02);

    --header-btn-wdk-badge-color: var(--wdk-badge-primary-text-color);
    --header-btn-wdk-badge-background: var(--wdk-badge-primary-background-color);

        /* Notification dropdown */
        --notification-dropdown-title-text-color: var(--text-base);
        --notification-dropdown-background-color: var(--white-01);

        --notification-dropdown-item-title-text-color: var(--text-primary);
        --notification-dropdown-item-title-text-color-hover: ;
        --notification-dropdown-item-description-text-color: var(--grey-375);
        --notification-dropdown-item-description-text-color-hover: ;
        --notification-dropdown-item-background-color-hover: var(--secondary);

        --notification-dropdown-divisors-color: var(--border);

        /* Messages dropdown */
        --message-dropdown-title-text-color: var(--text-base);
        --message-dropdown-background-color: var(--white-01);

        --message-dropdown-item-title-text-color: var(--text-primary);
        --message-dropdown-item-title-text-color-hover: ;
        --message-dropdown-item-description-text-color: var(--grey-375);
        --message-dropdown-item-description-text-color-hover: ;
        --message-dropdown-item-background-color-hover: var(--grey-01);

        --message-dropdown-btn-inline-color: var(--text-base);
        --message-dropdown-btn-inline-color-hover: var(--primary-dark);

        --message-dropdown-divisors-color: var(--grey-01);

        /* Mention drawer */
        --mention-drawer-item-text-color: var(--text-base);
        --mention-drawer-item-text-color-hover: var(--text-base);
        --mention-drawer-item-background-color: var(--background);
        --mention-drawer-item-background-color-hover: var(--light-blue);

        /* Profile dropdown */
        --profile-dropdown-title-text-color: var(--text-base);
        --profile-dropdown-subtitle-text-color: var(--grey-03); /* Situação de cor aplicada no elemento*/
        --profile-dropdown-background-color: var(--white-01);

        --profile-dropdown-btn-text-color: var(--grey-04);
        --profile-dropdown-btn-description-color: var(--grey-03);
        --profile-dropdown-btn-background-color: var(--white-01);

        --profile-dropdown-btn-text-color-hover: var(--grey-04);
        --profile-dropdown-btn-background-color-hover: var(--secondary);

        --profile-dropdown-profile-language-box-background: var(--grey-01);
        --profile-dropdown-profile-language-box-btn-color: var(--btn-inline-color);
        --profile-dropdown-profile-language-box-btn-color-hover: var(--btn-inline-color-hover);

        --profile-dropdown-profile-divisors: var(--grey-01);
}

/* App Sidebar */
:root {
    --sidebar-background-color: var(--primary);
    --sidebar-border-right-color: transparent;

    --sidebar-btn-hamburger-text-color: var(--primary-lighter);
    --sidebar-btn-hamburger-background-color: transparent;
    --sidebar-btn-hamburger-text-color-hover: var(--primary-lighter);
    --sidebar-btn-hamburger-background-color-hover: var(--primary-dark);
    --sidebar-btn-hamburger-text-color-active: var(--white-01);
    --sidebar-btn-hamburger-background-color-active: var(--primary-dark);

    --sidebar-btn-scroll-text-color: var(--primary-lighter);
    --sidebar-btn-scroll-background-color: var(--primary);
    --sidebar-btn-scroll-text-color-hover: var(--secondary);
    --sidebar-btn-scroll-background-color-hover: var(--primary);

        /* Item */
        --sidebar-item-text-color: var(--primary-lighter);
        --sidebar-item-background-color: transparent;
        --sidebar-item-text-color-hover: var(--secondary);
        --sidebar-item-background-color-hover: transparent;
        --sidebar-item-text-color-active: var(--secondary);
        --sidebar-item-background-color-active: var(--primary-custom);

        /* Submenu */
        --sidebar-submenu-title-color: var(--tertiary);
        --sidebar-submenu-background-color: var(--white-01);
        --sidebar-subitem-text-color: var(--primary-lighter);
        --sidebar-subitem-text-color-hover: var(--tertiary);
        --sidebar-subitem-shadow-color: rgb(0 0 0 / 15%);

        --sidebar-submenu-btn-scroll-text-color: var(--primary-lighter);
        --sidebar-submenu-btn-scroll-background-color: var(--white-01);
        --sidebar-submenu-btn-scroll-text-color-hover: var(--primary);
        --sidebar-submenu-btn-scroll-background-color-hover: var(--white-02);

        /* Footer */
        --sidebar-footer-text-color: var(--white-01);
        --sidebar-footer-divisor-color: var(--grey-03);
}

/* Home */
:root {
    --home-title-color: var(--primary);

        /* Feed */
        --feed-refresh-btn-text-color: var(--btn-secondary-text-color);
        --feed-refresh-btn-background-color: var(--btn-secondary-background-color);
        --feed-refresh-btn-text-color-hover: var(--btn-secondary-text-color-hover);
        --feed-refresh-btn-background-color-hover: var(--btn-secondary-background-color-hover);
        --feed-refresh-btn-text-color-focus: var(--btn-secondary-text-color-active);
        --feed-refresh-btn-background-color-focus: var(--btn-secondary-background-color-active);

        --feed-box-header-background-color: var(--white-01);
        --feed-box-header-border-color: transparent;
        --feed-box-header-shadow-color: rgba(26, 61, 77, 10%);

        /* tab regular */
        --feed-tab-btn-text-color: var(--btn-light-text-color);
        --feed-tab-btn-background-color: var(--btn-light-background-color);
        --feed-tab-btn-text-color-hover: var(--btn-light-text-color-hover);
        --feed-tab-btn-background-color-hover: var(--btn-light-background-color-hover);
        --feed-tab-btn-text-color-focus: var(--btn-light-text-color-hover);
        --feed-tab-btn-background-color-focus: var(--btn-light-background-color-hover);
        /* tab active */
        --feed-tab-btn-text-color-active: var(--white-01);
        --feed-tab-btn-background-color-active: var(--tertiary);
        --feed-tab-btn-text-color-active-hover: var(--white-01);
        --feed-tab-btn-background-color-active-hover: var(--tertiary-dark);
        --feed-tab-btn-text-color-active-focus: var(--btn-primary-text-color-hover);
        --feed-tab-btn-background-color-active-focus: var(--btn-primary-background-color-hover);

        --feed-input-btn-new-post-background-color: var(--white-03);
        --feed-input-btn-new-post-placeholder-color: #c0c8cc;

        --feed-post-shortcut-btn-text-color: var(--btn-inline-color);
        --feed-post-shortcut-btn-icon-color: var(--tertiary);
        --feed-post-shortcut-btn-background-color: transparent;

        --feed-post-shortcut-btn-text-color-hover: var(--btn-light-text-color-hover);
        --feed-post-shortcut-btn-icon-color-hover: var(--tertiary);
        --feed-post-shortcut-btn-background-color-hover: var(--btn-light-background-color-hover);

        --feed-post-shortcut-btn-text-color-focus: var(--btn-light-text-color-active);
        --feed-post-shortcut-btn-icon-color-focus: var(--tertiary);
        --feed-post-shortcut-btn-background-color-focus: var(--btn-light-background-color-active);

            /* New post modal */
            --feed-new-post-target-card-text-color: var(--text-base);
            --feed-new-post-target-card-background-color: var(--light-blue);
            --feed-new-post-target-card-icon-text-color: var(--text-base);
            --feed-new-post-target-card-icon-background-color: var(--secondary);

            --feed-new-post-settings-btn-text-color: var(--primary);
            --feed-new-post-settings-btn-background-color: var(--white-01);
            --feed-new-post-settings-btn-text-color-hover: var(--primary);
            --feed-new-post-settings-btn-background-color-hover: var(--grey-02);
            --feed-new-post-settings-btn-text-color-focus: var(--primary-dark);
            --feed-new-post-settings-btn-background-color-focus: var(--grey-02);
            --feed-new-post-settings-btn-text-color-checked: var(--primary);
            --feed-new-post-settings-btn-background-color-checked: var(--grey-01);

            --feed-new-post-post-type-btn-text-color: var(--btn-light-text-color);
            --feed-new-post-post-type-btn-background-color: var(--btn-light-background-color);
            --feed-new-post-post-type-btn-shadow-color: rgb(0 0 0 / 10%);
            --feed-new-post-post-type-btn-text-color-hover: var(--btn-light-text-color-hover);
            --feed-new-post-post-type-btn-background-color-hover: var(--btn-light-background-color-hover);

            --feed-new-post-divisors: var(--grey-300);

            /* POST */
            --feed-post-counters-icon-color: var(--tertiary);
            --feed-post-counters-text-color: var(--primary);
            --feed-post-counters-text-color-hover: var(--tertiary-dark);

            --feed-reaction-btn-text-color: var(--btn-secondary-text-color);
            --feed-reaction-btn-background-color: var(--btn-secondary-background-color);
            --feed-reaction-btn-text-color-hover: var(--btn-secondary-text-color-hover);
            --feed-reaction-btn-background-color-hover: var(--btn-secondary-background-color-hover);
            --feed-reaction-btn-shadow-color: rgb(0 0 0 / 10%);

                /* Achievement */
                --feed-post-achievement-msg-text-color: var(--text-primary);
                --feed-post-achievement-msg-background-color: var(--grey-01);

                /* Pool */
                --feed-post-pool-title-color: var(--text-base);
                --feed-post-pool-box-background-color: var(--white-01);
                --feed-post-pool-box-border-color: transparent;
                --feed-post-pool-box-shadow-color: rgba(26, 61, 77, 10%);

                --feed-post-pool-item-text-color: var(--grey-03);
                --feed-post-pool-item-value-color: var(--tertiary);
                --feed-post-pool-item-graph-color: rgba(26,61,77,1);
                --feed-post-pool-item-background-color: var(--grey-01);
                --feed-post-pool-item-border-color: transparent;

        /* Next events widget */
        --event-item-background-color: var(--white-01);
        --event-item-border: 1px solid transparent;
        --event-item-background-color-hover: var(--tertiary);
        --event-item-border-hover: 1px solid transparent;

        --event-item-date-text-color: var(--primary);
        --event-item-date-background-color: var(--complementary-02);
        --event-item-date-text-color-hover: var(--tertiary);
        --event-item-date-background-color-hover: var(--white-01);

        --event-item-detail-category-text-color: var(--primary-light);
        --event-item-detail-info-text-color: var(--primary);
        --event-item-detail-category-text-color-hover: var(--white-01);
        --event-item-detail-info-text-color-hover: var(--white-01);

        --event-item-time-text-color: var(--primary);
        --event-item-time-background-color: var(--complementary-02);
        --event-item-time-text-color-hover: var(--tertiary);
        --event-item-time-background-color-hover: var(--white-01);
}

/* My documents */
:root {
    --document-find-section-background-color: var(--complementary-03);
    --document-find-section-expand-btn-text-color: var(--btn-inline-color);
    --document-find-section-expand-btn-text-color-hover: var(--btn-inline-color-hover);

    --document-find-btn-folder-text-color: var(--btn-primary-text-color);
    --document-find-btn-folder-background-color: var(--btn-primary-background-color);
    --document-find-btn-folder-text-color-hover: var(--btn-primary-text-color-hover);
    --document-find-btn-folder-background-color-hover: var(--btn-primary-background-color-hover);
    --document-find-btn-folder-text-color-active: var(--btn-primary-text-color-active);
    --document-find-btn-folder-background-color-active: var(--btn-primary-background-color-active);

    --document-find-search-advanced-border-color: var(--background-tooltip);
    --document-find-search-advanced-background-color: var(--white-02);

    --document-find-tabs-btn-text-color: var(--white-01);
    --document-find-tabs-btn-background-color: var(--tertiary);

        /* Cards */
        --document-find-wdk-featured-card-background-color: var(--white-01);

        --document-find-wdk-featured-card-linked-hover: var(--tertiary);
        --document-find-wdk-featured-card-linked-title-hover: var(--tertiary);

        --document-find-wdk-card-fav-btn-color: var(--tertiary);

        --document-find-open_new_tab-btn-color: var(--btn-inline-color);
        --document-find-open_new_tab-btn-color-hover: var(--btn-inline-color-hover);

        --document-find-card-document-find-body-icon-color: var(--secondary-dark);

        --document-find-btn-inline-color: var(--tertiary);
        --document-find-btn-inline-color-hover: var(--btn-inline-color-hover);

        /* Sidebar */
        --document-find-sidebar-header-text-color: var(--text-base);
        --document-find-sidebar-header-background-color: var(--complementary-02);
        --document-find-sidebar-body-background-color: var(--white-01);

        /* Sidebar tree */
        --document-find-sidebar-tree-title-color: var(--white-01);
        --document-find-sidebar-tree-background-color: var(--grey-03);
        --document-find-sidebar-tree-return-icon-color: var(--secondary);

            /* Repository */
            --document-find-sidebar-tree-repository-title-color: var(--text-base);
            --document-find-sidebar-tree-repository-description-color: var(--text-base);

            --document-find-sidebar-tree-repository-icon-color: var(--primary);
            --document-find-sidebar-tree-repository-icon-background-color: var(--secondary);

            --document-find-sidebar-tree-repository-background-color: var(--complementary-02);
            --document-find-sidebar-tree-repository-background-color-hover: var(--grey-250);

            /* Tree content */
            --document-find-sidebar-tree-content-backgroound-color: var(--background);

            --document-find-sidebar-tree-content-item-text-color: var(--btn-link-color);
            --document-find-sidebar-tree-content-item-backgroound-color: var(--grey-01);
            --document-find-sidebar-tree-content-item-text-color-hover-active: var(--tertiary);

    --document-find-inner-btn-inline-text-color: var(--btn-inline-color-tertiary);
    --document-find-inner-btn-inline-text-color-hover: var(--btn-inline-color-tertiary-hover);
}

/* My Learning */
:root {
    --learning-section-background-color: var(--light-blue);
    --learning-section-expand-btn-text-color: var(--btn-inline-color);
    --learning-section-expand-btn-text-color-hover: var(--btn-inline-color-hover);

    --learning-tabs-btn-text-color: var(--grey-03);
    --learning-tabs-btn-background-color: var(--grey-01);
    --learning-tabs-btn-text-color-hover: var(--grey-03);
    --learning-tabs-btn-background-color-hover: var(--grey-01);

    --learning-tabs-btn-text-color-active: var(--white-01);
    --learning-tabs-btn-background-color-active: var(--tertiary);
    --learning-tabs-btn-text-color-active-hover: var(--white-01);
    --learning-tabs-btn-background-color-active-hover: var(--tertiary-dark);

    --learning-badge-training-text-color: var(--grey-03);
    --learning-badge-training-background-color: var(--complementary-01);

    --learning-badge-journey-text-color: var(--blue-01);
    --learning-badge-journey-background-color: var(--tertiary);

    --learning-badge-status-text-color: var(--grey-250);
    --learning-badge-status-background-color: var(--primary-light);

        /* Certificate */
        --certificate-section-background-color: var(--secondary-light);
        --certificate-section-expand-btn-text-color: var(--btn-inline-color);
        --certificate-section-expand-btn-text-color-hover: var(--btn-inline-color-hover);

    /* Journey */
    --journey-inner-tabs-btn-text-color: var(--primary); /* text & border bottom */
    --journey-inner-tabs-btn-text-color-active: var(--tertiary);
}

/* Learning Marketplace */
:root {
    --learning-marketplace-gallery-section-background-color: var(--background-tooltip);
}

/* Manage classes - TrainingAssoc */
:root {
    --training-assoc-first-card-text-color: var(--primary);
    --training-assoc-first-card-background-color: var(--white-01) ;
    --training-assoc-first-card-icon-color: var(--primary);
    --training-assoc-first-card-icon-background-color: var(--secondary);
    --training-assoc-first-card-border-color: var(--primary);
    --training-assoc-first-card-divisor-color: var(--grey-02);

    --training-assoc-second-card-text-color: var(--primary);
    --training-assoc-second-card-background-color: var(--white-01) ;
    --training-assoc-second-card-icon-color: var(--primary);
    --training-assoc-second-card-icon-background-color: var(--complementary-03);
    --training-assoc-second-card-border-color: var(--primary);
    --training-assoc-second-card-divisor-color: var(--grey-02);

    --training-assoc-third-card-text-color: var(--primary);
    --training-assoc-third-card-background-color: var(--white-01) ;
    --training-assoc-third-card-icon-color: var(--primary);
    --training-assoc-third-card-icon-background-color: var(--complementary-01);
    --training-assoc-third-card-border-color: var(--primary);
    --training-assoc-third-card-divisor-color: var(--grey-02);

    --training-assoc-fourth-card-text-color: var(--primary);
    --training-assoc-fourth-card-background-color: var(--white-01) ;
    --training-assoc-fourth-card-icon-color: var(--primary);
    --training-assoc-fourth-card-icon-background-color: var(--light-blue);
    --training-assoc-fourth-card-border-color: var(--primary);
    --training-assoc-fourth-card-divisor-color: var(--grey-02);
}

/* Training execution - TrainingAssoc/Default */
:root {
    /* Header */
    --training-exec-header-background-color: var(--primary);
    --training-exec-header-border-bottom: 1px solid transparent;

    --training-exec-header-wdk-logo: ;

    --training-exec-header-btn-secondary-text-color: var(--btn-secondary-text-color);
    --training-exec-header-btn-secondary-background-color: var(--btn-secondary-background-color);
    --training-exec-header-btn-secondary-text-color-hover: var(--btn-secondary-text-color-hover);
    --training-exec-header-btn-secondary-background-color-hover: var(--btn-secondary-background-color-hover);
    --training-exec-header-btn-secondary-text-color-active: var(--btn-secondary-text-color-active);
    --training-exec-header-btn-secondary-background-color-active: var(--btn-secondary-background-color-active);

    --training-exec-header-btn-light-text-color: var(--btn-light-text-color);
    --training-exec-header-btn-light-background-color: var(--btn-light-background-color);
    --training-exec-header-btn-light-text-color-hover: var(--btn-light-text-color-hover);
    --training-exec-header-btn-light-background-color-hover: var(--btn-light-background-color-hover);
    --training-exec-header-btn-light-text-color-active: var(--btn-light-text-color-active) !important;
    --training-exec-header-btn-light-background-color-active: var(--btn-light-background-color-active) !important;

    --training-exec-header-btn-hamburger-text-color: var(--primary-lighter);
    --training-exec-header-btn-hamburger-background-color: transparent;
    --training-exec-header-btn-hamburger-text-color-hover: var(--secondary);
    --training-exec-header-btn-hamburger-background-color-hover: var(--primary-dark);
    --training-exec-header-btn-hamburger-text-color-active: var(--secondary);
    --training-exec-header-btn-hamburger-background-color-active: var(--primary-dark);

    /* Sidebar */
    --training-exec-sidebar-background-color: var(--grey-01);
    --training-exec-sidebar-border-right: 1px solid var(--grey-01);

    --training-exec-sidebar-header-title: var(--text-base);
    --training-exec-sidebar-header-user-name: var(--text-base);
    --training-exec-sidebar-header-user-description: var(--text-base);

    --training-exec-sidebar-item-default-background-color: transparent;
    --training-exec-sidebar-item-default-border-bottom: 1px solid var(--grey-250);
    --training-exec-sidebar-item-default-icon-color: var(--grey-350);
    --training-exec-sidebar-item-default-icon-color-hover: var(--primary);
    --training-exec-sidebar-item-default-title-color: var(--grey-350);
    --training-exec-sidebar-item-default-title-color-hover: var(--primary);
    --training-exec-sidebar-item-default-description-color: #6c757d;
    --training-exec-sidebar-item-default-description-color-hover: #6c757d;

    --training-exec-sidebar-item-active-background-color: var(--grey-250);
    --training-exec-sidebar-item-active-border-bottom: 1px solid var(--white-01);
    --training-exec-sidebar-item-active-icon-color: var(--grey-375);
    --training-exec-sidebar-item-active-icon-color-hover: var(--primary);
    --training-exec-sidebar-item-active-title-color: var(--grey-375);
    --training-exec-sidebar-item-active-title-color-hover: var(--primary);
    --training-exec-sidebar-item-active-description-color: #6c757d;
    --training-exec-sidebar-item-active-description-color-hover: #6c757d;

    --training-exec-sidebar-item-finished-background-color: var(--border);
    --training-exec-sidebar-item-finished-border-bottom: 1px solid var(--white-01);
    --training-exec-sidebar-item-finished-icon-color: var(--grey-350);
    --training-exec-sidebar-item-finished-icon-color-hover: var(--grey-350);
    --training-exec-sidebar-item-finished-title-color: var(--grey-350);
    --training-exec-sidebar-item-finished-title-color-hover: var(--grey-350);
    --training-exec-sidebar-item-finished-description-color: #6c757d;
    --training-exec-sidebar-item-finished-description-color-hover: #6c757d;

    /* Footer */
    --training-exec-footer-background-color: var(--wdk-footer-background-color);
    --training-exec-footer-border-top: 1px solid var(--wdk-footer-border-color);

    --training-exec-footer-btn-primary-text-color: var(--btn-primary-text-color);
    --training-exec-footer-btn-primary-background-color: var(--btn-primary-background-color);
    --training-exec-footer-btn-primary-text-color-hover: var(--btn-primary-text-color-hover);
    --training-exec-footer-btn-primary-background-color-hover: var(--btn-primary-background-color-hover);
    --training-exec-footer-btn-primary-text-color-active: var(--btn-primary-text-color-active);
    --training-exec-footer-btn-primary-background-color-active: var(--btn-primary-background-color-active);

    --training-exec-footer-btn-light-text-color: var(--btn-light-text-color);
    --training-exec-footer-btn-light-background-color: var(--btn-light-background-color);
    --training-exec-footer-btn-light-text-color-hover: var(--btn-light-text-color-hover);
    --training-exec-footer-btn-light-background-color-hover: var(--btn-light-background-color-hover);
    --training-exec-footer-btn-light-text-color-active: var(--btn-light-text-color-active);
    --training-exec-footer-btn-light-background-color-active: var(--btn-light-background-color-active);
}

/* Repository Survey */
:root {
    --repository-survey-first-card-text-color: var(--primary);
    --repository-survey-first-card-background-color: var(--white-01) ;
    --repository-survey-first-card-icon-color: var(--primary);
    --repository-survey-first-card-icon-background-color: var(--secondary);
    --repository-survey-first-card-border-color: var(--primary);

    --repository-survey-second-card-text-color: var(--primary);
    --repository-survey-second-card-background-color: var(--white-01) ;
    --repository-survey-second-card-icon-color: var(--primary);
    --repository-survey-second-card-icon-background-color: var(--complementary-03);
    --repository-survey-second-card-border-color: var(--primary);

    --repository-survey-third-card-text-color: var(--primary);
    --repository-survey-third-card-background-color: var(--white-01) ;
    --repository-survey-third-card-icon-color: var(--primary);
    --repository-survey-third-card-icon-background-color: var(--complementary-01);
    --repository-survey-third-card-border-color: var(--primary);

    --repository-survey-fourth-card-text-color: var(--primary);
    --repository-survey-fourth-card-background-color: var(--white-01) ;
    --repository-survey-fourth-card-icon-color: var(--primary);
    --repository-survey-fourth-card-icon-background-color: var(--light-blue);
    --repository-survey-fourth-card-border-color: var(--primary);
}

/* Document Catalog */
:root {
    --document-catalog-first-card-text-color: var(--primary);
    --document-catalog-first-card-background-color: var(--white-01) ;
    --document-catalog-first-card-icon-color: var(--primary);
    --document-catalog-first-card-icon-background-color: var(--secondary);
    --document-catalog-first-card-border-color: var(--primary);

    --document-catalog-second-card-text-color: var(--primary);
    --document-catalog-second-card-background-color: var(--white-01) ;
    --document-catalog-second-card-icon-color: var(--primary);
    --document-catalog-second-card-icon-background-color: var(--secondary);
    --document-catalog-second-card-border-color: var(--primary);

    --document-catalog-third-card-text-color: var(--primary);
    --document-catalog-third-card-background-color: var(--white-01) ;
    --document-catalog-third-card-icon-color: var(--primary);
    --document-catalog-third-card-icon-background-color: var(--secondary);
    --document-catalog-third-card-border-color: var(--primary);

    --document-catalog-fourth-card-text-color: var(--primary);
    --document-catalog-fourth-card-background-color: var(--white-01) ;
    --document-catalog-fourth-card-icon-color: var(--primary);
    --document-catalog-fourth-card-icon-background-color: var(--secondary);
    --document-catalog-fourth-card-border-color: var(--primary);
}

/* Tagify */
.tagify {
    /* Original variables */
    --tags-disabled-bg: var(--white-03);
    --tags-border-color: none;
    --tags-hover-border-color: none;
    --tags-focus-border-color: var(--input-text-border-focus-color);
    --tag-bg: var(--grey-01);
    --tag-hover: var(--grey-02);
    --tag-text-color: var(--primary);
    --tag-text-color--edit: var(--primary);
    --tag-invalid-color: var(--black) !important;
    --tag-invalid-bg: var(--red-02) !important;
    --tag-remove-bg: var(--grey-02);
    --tag-remove-btn-color: var(--grey-04);
    --tag-remove-btn-bg: none;
    --tag-remove-btn-bg--hover: var(--primary-lighter);
    --placeholder-color: rgba(0, 0, 0, 0.4);
    --placeholder-color-focus: rgba(0, 0, 0, 0.25);

    /* Weduka variables */
    --tagify-dropdown-input-search-text-color: var(--primary);
    --tagify-dropdown-input-search-background-color: var(--grey-01);

    --tagify-dropdown-item-text-color: var(--primary);
    --tagify-dropdown-item-text-color-hover-active: var(--primary);
    --tagify-dropdown-item-background-color-hover-active: var(--grey-01);
}