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

/* Base colors */
:root {
    --primary: #7129A8;
    --primary-dark: #4B0E8D;
    --primary-light: #B04AFD;
    --primary-lighter: #FFD074; /* Custom sidebar items */
    --primary-custom: #4B0E8D; /* Custom */
    --primary-transparent: #7129A832;

    --secondary: #FCAF17;
    --secondary-dark: #FF971B;
    --secondary-light: #FFD074;

    --tertiary: #4B0E8D;
    --tertiary-dark: #30095A;
    --tertiary-light: #6515BC;
    --tertiary-transparent: #4B0E8D10;

    /* Complementary colors */
    --complementary-01: #6DC76A;
    --complementary-02: #6DC76A;
    --complementary-03: #6DC76A;

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

    /* Semantic Colors */
    --background: #f9f9f9;
    --background-tooltip: #FFD074;
    --border: #eeeeee;
    --placeholder: #5B6770;

    /* 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: #FF971B;
    --yellow-02: #FFD074;
    --yellow-01: #EDE3CE;

    --green-05: #00B388;
    --green-04: #018868;
    --green-03: #00DFAA;
    --green-survey: #00B388;
    --green-02: #68E3C6;
    --green-01: #D7F0EA;

    --blue-05: #003472; /* Not Used */
    --blue-04: #3C5DAA;
    --blue-03: #0d6efd; /* Not Used */
    --blue-02: #D907D1;
    --blue-01: #D907D1;

    --red-05: #E23958;
    --red-04: #AE2B43;
    --red-03: #FF4869;
    --red-02: #F26657;
    --red-01: #FFD0D9;
    --red-06: #FCEBEA;

    /* Base Colors */
    --success: #00B388;
    --danger: #E23958;
    --warning: #FF971B;

    --light-blue: #41C6CC;
    --light-yellow: #FFD074;
    --light-purple: #B04AFD;
}

/* 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-03);
    --alert-warning-background-color: var(--yellow-01);
    --alert-warning-border-color: var(--yellow-03);

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

    /* Badges */
    --badge-primary-text-color: var(--secondary-light);
    --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(--success);

    --badge-warning-text-color: var(--tertiary-dark);
    --badge-warning-background-color: var(--warning);

    --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(--tertiary-dark);
    --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(--tertiary-dark);
    --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-dark);
    --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(--white-01);
    --btn-primary-background-color: var(--primary);
    --btn-primary-text-color-hover: var(--white-01);
    --btn-primary-background-color-hover: var(--primary-dark);
    --btn-primary-text-color-active: var(--white-01);
    --btn-primary-background-color-active: var(--primary-light);

    --btn-secondary-text-color: var(--primary-dark);
    --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-light);

    --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-01);
    --btn-light-text-color-active: var(--primary-dark);
    --btn-light-background-color-active: var(--grey-01);

    --btn-inline-color: var(--primary-dark);
    --btn-inline-color-hover: var(--blue-04);

    --btn-link-color: var(--primary-dark);
    --btn-link-color-hover: var(--blue-04);

    --btn-close-color: var(--tertiary-dark);
    --btn-close-color-hover: var(--blue-04);

    /* 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-dark);
    --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(--text-primary);
    --dropdown-item-background-color:  var(--white-01);

    --dropdown-item-text-color-hover: var(--text-primary);
    --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-dark);
    --dropdown-action-box-btn-background-color-hover: var(--grey-01);
    --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,iVBORw0KGgoAAAANSUhEUgAAADIAAAAmCAMAAACxpjgOAAAAKlBMVEUAAAD/ryD/rxj7rxj8rxj6rxf9rxb9sRb7rRj7rxj8rxf8rxj8rxf8rxcOwASNAAAADXRSTlMAECBAYHB/f4CAv7/vKETgOwAAAJxJREFUOMvt1UsSAyEIBFATGSOMff/rZpNUzUeQzjouKd9CaLWU9Ko2YFKI9QIAoNECqLSA0QKDFgAvdlpAaNH/4hfhhtoVbqhdId9aS5/DMDfByQ/1luzVmJqwu4aJiedRcTerCerNrGd+NZmUnI2lcnU2uSQqLTwTp11pMTPrG6W0uJqeekeVFkfT0/+O0uJjxsZ8iOUpKo94yxtTnCB9Q+ppOAAAAABJRU5ErkJggg==);

    /* 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,iVBORw0KGgoAAAANSUhEUgAAAEsAAABLCAMAAAAPkIrYAAAAaVBMVEUAAAD/rxD/ryD/rxj6rxX6rxv7rxj8rxb8rxr/sRX/sRj8rxj9sRf6rxf9rxb9sRb7rRj7rxj9rxf7rhf7rxf8sBb8sBj6rxj8rxf8sBf7rxf8rxf8rxj9rxf8rxf9rxf9rxj8rxf8rxe5dunhAAAAInRSTlMAEBAgMDBAUFBfX2BvcH9/gICPkJCfn6Cvr7C/v8/f39/vm7x45wAAAZhJREFUWMPNmGtygkAQhEdQSLLxASpBkYzT9z9kfmhiFIFltyuVPsBXs/OCaZEhpa7ct2oATJu6yBcSpsTtDY/S2iWTSVnTBV1V55NCWimGpM4b9W4Ykycta+EjHa9DUsJX5QgqVfhL0yHUq2GKbKCia0zViofqhYWgemBhqKewHKF66zSDBbPssTUU4dL71VEiRncTMEecMtILAaC9oRxitaSFBVhCCwvY0MICNLbju6WsKaxGRGRGQV2y7zgsONoTgYpURQCw+FG8KSV1xCVhBY21paUeqKShsVpaGYFPMRrLBDz9WxYzX8w6tjTWST5orKPsaKyCtlaBF0lprIXQmkJFaMk/kr9DM9IjExEhbcPj5TAjdQT7P4fyKfq+TQnZ159/zCUtLJHoxaO/b+z4UbwpbvNs726YmZJeyL7TIkb8yQEf2rGbZ0dywUOFwTZ9pkLBQ4nkE30T90d+zqQJ2I67fXO/0NrMy01z4zRbert8IzQtJpmZ+aE3pFMW4K8eutFZFeCvXuuQF4fT2QDYua12brgJvgCg1ErmjFyrIQAAAABJRU5ErkJggg==);

    /* 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);
    --modal-drawer-footer-border-color: var(--white-04);

    /* 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(--text-base);

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

    --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-03);

    --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(--primary-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(--tertiary-dark);
    --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(--grey-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(--btn-light-text-color);
    --header-btn-background-color: var(--btn-light-background-color);
    --header-btn-text-color-hover: var(--primary-dark);
    --header-btn-background-color-hover: var(--secondary-light);

    --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: var(--primary-dark);
    --notification-dropdown-item-description-text-color: var(--grey-375);
    --notification-dropdown-item-description-text-color-hover: ;
    --notification-dropdown-item-background-color-hover: var(--secondary-light);

    --notification-dropdown-divisors-color: var(--white-02);

    /* 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: var(--primary-dark);
    --message-dropdown-item-description-text-color: var(--grey-375);
    --message-dropdown-item-description-text-color-hover: ;
    --message-dropdown-item-background-color-hover: var(--secondary-light);

    --message-dropdown-btn-inline-color: var(--btn-inline-color);
    --message-dropdown-btn-inline-color-hover: var(--btn-inline-color-hover);

    --message-dropdown-divisors-color: var(--white-02);

    /* 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(--tertiary);
    --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(--tertiary);
    --profile-dropdown-btn-description-color: var(--grey-375);
    --profile-dropdown-btn-background-color: var(--white-01);

    --profile-dropdown-btn-text-color-hover: var(--tertiary);
    --profile-dropdown-btn-background-color-hover: var(--secondary-light);

    --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(--white-02);
}

/* 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(--white-01);
    --sidebar-btn-scroll-background-color: var(--primary);
    --sidebar-btn-scroll-text-color-hover: var(--white-01);
    --sidebar-btn-scroll-background-color-hover: var(--primary-custom);

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

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

    --sidebar-submenu-btn-scroll-text-color: var(--primary);
    --sidebar-submenu-btn-scroll-background-color: var(--secondary-light);
    --sidebar-submenu-btn-scroll-text-color-hover: var(--tertiary);
    --sidebar-submenu-btn-scroll-background-color-hover: var(--secondary-light);

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

/* 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(--grey-01);
    --feed-new-post-target-card-icon-text-color: var(--primary-dark);
    --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-dark);
    --feed-new-post-settings-btn-background-color-hover: var(--secondary-light);
    --feed-new-post-settings-btn-text-color-focus: var(--primary-dark);
    --feed-new-post-settings-btn-background-color-focus: var(--secondary);
    --feed-new-post-settings-btn-text-color-checked: var(--primary);
    --feed-new-post-settings-btn-background-color-checked: var(--secondary-dark);

    --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(--primary-dark);
    --feed-new-post-post-type-btn-background-color-hover: var(--secondary-light);

    --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(--blue-04);

    --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(113,41,168,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(--complementary-02);
    --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(--tertiary-dark);
    --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(--secondary-light);
    --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(--primary-dark);
    --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(--primary-dark);

    /* 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(--primary-light);

    --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(--btn-inline-color);
    --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(--secondary-light);
    --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(--tertiary);
    --document-find-sidebar-tree-return-icon-color: var(--white-01);

    /* 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(--secondary-dark);
    --document-find-sidebar-tree-repository-icon-background-color: var(--primary);

    --document-find-sidebar-tree-repository-background-color: var(--white-01);
    --document-find-sidebar-tree-repository-background-color-hover: var(--secondary-light);

    /* 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(--blue-04);

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

/* My Learning */
:root {
    --learning-section-background-color: var(--secondary-light);
    --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(--white-01);
    --learning-badge-training-background-color: var(--complementary-01);

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

    --learning-badge-status-text-color: var(--white-01);
    --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(--secondary-light);
}

/* 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(--secondary);
    --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(--secondary);
    --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(--secondary);
    --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(--white-01);
    --training-exec-header-btn-hamburger-background-color: transparent;
    --training-exec-header-btn-hamburger-text-color-hover: var(--white-01);
    --training-exec-header-btn-hamburger-background-color-hover: var(--primary-custom);
    --training-exec-header-btn-hamburger-text-color-active: var(--white-01);
    --training-exec-header-btn-hamburger-background-color-active: var(--primary-dark);

    /* Sidebar */
    --training-exec-sidebar-background-color: var(--white-02);
    --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(--grey-03);
    --training-exec-sidebar-header-user-description: var(--grey-03);

    --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-03);
    --training-exec-sidebar-item-default-icon-color-hover: var(--primary);
    --training-exec-sidebar-item-default-title-color: var(--grey-04);
    --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(--secondary-light);
    --training-exec-sidebar-item-active-border-bottom: 1px solid var(--white-01);
    --training-exec-sidebar-item-active-icon-color: var(--primary);
    --training-exec-sidebar-item-active-icon-color-hover: var(--primary-dark);
    --training-exec-sidebar-item-active-title-color: var(--primary);
    --training-exec-sidebar-item-active-title-color-hover: var(--primary-dark);
    --training-exec-sidebar-item-active-description-color: var(--primary-light);
    --training-exec-sidebar-item-active-description-color-hover: var(--primary-light);

    --training-exec-sidebar-item-finished-background-color: var(--primary);
    --training-exec-sidebar-item-finished-border-bottom: 1px solid var(--white-01);
    --training-exec-sidebar-item-finished-icon-color: var(--white-01);
    --training-exec-sidebar-item-finished-icon-color-hover: var(--white-01);
    --training-exec-sidebar-item-finished-title-color: var(--white-01);
    --training-exec-sidebar-item-finished-title-color-hover: var(--white-01);
    --training-exec-sidebar-item-finished-description-color: var(--white-02);
    --training-exec-sidebar-item-finished-description-color-hover: var(--white-02);

    /* 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(--secondary);
    --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(--secondary);
    --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(--secondary);
    --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(--primary) !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);
}