:root {
    /* PAGE TITLE */
    /* Text color */
    --color-pg-title-1: #343434;
    /* PAGE TITLE END */

    /* SECTION TITLE */
    /* Text color */
    --color-sctn-title-1: #000000;
    /* SECTION TITLE END */

    /* BREADCRUMBS */
    /* Text color */
    --color-breadcrumbs-item: #003D6E;
    --color-breadcrumbs-item-hover: #b8be36;
    /* BREADCRUMBS END */

    /* BUTTONS */
    /* Background */
    --bg-btn-1: #003D6E;
    --bg-btn-2: #7C0202;
    --bg-btn-3: #2B7805;
    --bg-btn-4: #FFFFFF;
    --bg-btn-5: #b8be36;

    /* Text color */
    --color-btn-1: #003D6E;
    --color-btn-2: #7C0202;
    --color-btn-3: #2B7805;
    --color-btn-4: #FFFFFF;

    /* Border color */
    --border-btn-1: #003D6E;
    --border-btn-2: #7C0202;

    /* Button tooltip background */
    --bg-btn-tooltip: #B8BE36;

    /* Button tooltip color */
    --color-btn-tooltip-1: #003D6E;
    --color-btn-tooltip-2: #7C0202;
    --color-btn-tooltip-3: #2B7805;
    --color-btn-tooltip-4: #FFFFFF;

    --tooltip-z-index: 11000;

    /* BUTTONS END */

    /* SWITCHES */
    /* Background */
    --bg-switch-1: #003D6E;
    --bg-switch-2: #7C0202;
    --bg-switch-3: #2B7805;
    --bg-switch-4: #FFFFFF;

    /* Text color */
    --color-switch-1: #003D6E;
    --color-switch-2: #7C0202;
    --color-switch-3: #2B7805;
    --color-switch-4: #FFFFFF;
    /* SWITCHES END */

    /* INPUTS */
    /* Background color */
    --bg-input-1: #003D6E;
    --bg-input-2: #7C0202;
    --bg-input-3: #2B7805;
    --bg-input-4: #FFFFFF;
    --bg-input-5: #b8be36;

    /* Border */
    --border-input-1: #003D6E;
    --border-input-2: #7C0202;
    --border-input-3: #2B7805;
    --border-input-4: #FFFFFF;
    --border-input-5: #b8be36;

    /* Border active */
    --border-input-active-1: #1199DF;

    /* Color */
    --color-input-1: #003D6E;
    --color-input-2: #7C0202;
    --color-input-3: #2B7805;
    --color-input-4: #FFFFFF;

    /* Color placeholder */
    --color-input-placeholder-1: #003d6e;
    --color-input-placeholder-2: #cccccc;
    --color-input-placeholder-3: #0B0B0B;

    /* Search button background color */
    --bg-input-search-button-1: #003D6E;
    --bg-input-search-button-2: #7C0202;
    --bg-input-search-button-3: #2B7805;
    --bg-input-search-button-4: #FFFFFF;
    --bg-input-search-button-5: #b8be36;

    /* Error box */
    --color-input-error-box: #C21313;
    --color-input-error-text: #FFFFFF;

    /* Error border */
    --color-input-error: #C21313;

    /* Number input arrows */
    --color-number-input-arrow: #FFFFFF;
    /* INPUTS END */

    /* SELECT BOXES */
    /* Text color */
    --color-select-placeholder: #CCCCCC;
    --color-select-label: #000000;
    --color-select-clear-button: #23BCE5;
    --color-select-1: #262626;
    --color-select-2: #7C0202;
    --color-select-3: #2B7805;
    --color-select-4: #FFFFFF;

    /* Background */
    --bg-select-1: #FFFFFF;
    --bg-select-2: #003D6E;
    --bg-select-3: transparent;

    /* Border */
    --border-select-1: #BAC0C8;
    --border-select-2: #7C0202;
    --border-select-3: #2B7805;
    --border-select-4: #FFFFFF;
    --border-select-5: #bebebe;

    /* Select option hover bg */
    --bg-select-option-bg-hover-1: #F5F5F5 !important;

    /* Select option hover text */
    --bg-select-option-text-hover-1: var(--color-black-2) !important;

    /* Select option bg active */
    --bg-select-option-bg-active-1: #F5F5F5 !important;

    /* Select option text active */
    --bg-select-option-text-active-1: var(--color-black-2) !important;

    /* Select checkbox */
    --border-select-checkbox-1: #003D6E;
    --border-select-checkbox-2: #7C0202;
    --border-select-checkbox-3: #2B7805;
    --border-select-checkbox-4: #FFFFFF;

    /* Disabled colors */
    --disabled-select-color: #BEBEBE;

    /* Dynamic option */
    --btn-select-bg-1: #003D6E;
    --btn-select-bg-2: #7C0202;
    --btn-select-bg-3: #2B7805;
    --btn-select-bg-4: #FFFFFF;
    --btn-select-bg-5: #b8be36;
    /* SELECT BOXES END */

    /* DATEPICKER */
    /* Background color */
    --bg-datepicker-1: #003D6E;
    --bg-datepicker-2: #7C0202;
    --bg-datepicker-3: #2B7805;
    --bg-datepicker-4: #FFFFFF;

    /* Border */
    --border-datepicker-1: #003D6E;
    --border-datepicker-2: #7C0202;
    --border-datepicker-3: #2B7805;
    --border-datepicker-4: #FFFFFF;

    /* Text color */
    --color-datepicker-1: #0B0B0B;
    --color-datepicker-2: #003D6E;
    --color-datepicker-3: #7C0202;
    --color-datepicker-4: #2B7805;
    --color-datepicker-5: #FFFFFF;

    /* Label text color */
    --color-datepicker-label-1: #003D6E;
    --color-datepicker-label-2: #7C0202;
    --color-datepicker-label-3: #2B7805;
    --color-datepicker-label-4: #FFFFFF;

    --datepicker-popup-z-index: 10050;
    /* DATEPICKER END */

    /* MODAL */
    /* Background color */
    --bg-modal-1: #FFFFFF;

    /* Header background color */
    --bg-modal-header-1: #FFFFFF;
    --bg-modal-header-2: #f0f0f0;

    /* Footer background color */
    --bg-modal-footer-1: #FFFFFF;
    --bg-modal-footer-2: #f0f0f0;

    /* Title text color */
    --color-modal-title-1: #003d6e;

    /* Modal close button background color */
    --bg-modal-close-button-1: #003d6e;

    /* Modal close button background color hover */
    --bg-modal-close-button-hover-1: #b8be36;

    /* Modal close button x color */
    --bg-modal-close-button-x-1: #FFFFFF;

    /* MODAL END */

    /* TABLE */
    /* Table headers background */
    --bg-table-headers-1: #FAFAFA;

    /* Table headers color */
    --color-table-headers-1: #000000;

    /* Table text colors */
    --color-table-text: #000000;
    --color-table-inactive: #7C0208;

    /* Table custom text colors */
    --color-table-text-green: #2b7805;
    --color-table-text-red: #7c0202;

    /* Table content background */
    --bg-table-content-1: #FFFFFF;

    /* Table content row hover */
    --bg-table-row-hover-1: #cecece;

    /* Sort handle */
    /*!* Sort handle *!*/
    --sort-handle-icon-url: url('/public/images/icons/icon-sort-disabled.svg');
    --sort-handle-active-icon-url: url('/public/images/icons/icon-sort.svg');

    /* Table pagination */
    /* Table pagination bg */
    --bt-table-pagination: #f0f0f0;

    /* Table pagination item bg */
    --bg-table-pagination-item: #FFFFFF;

    /* Table pagination item active bg */
    --bg-table-pagination-item-active: #003d6e;

    /* Table pagination item hover bg */
    --bg-table-pagination-item-hover: #b8be36;

    /* Table pagination item text color */
    --color-table-pagination-item: #000000;

    /* Table pagination item active text color */
    --color-table-pagination-item-active: #FFFFFF;
    /* TABLE END */

    /* BADGE */
    /* Badge background colors */
    --bg-badge-1: #003d6e;
    --bg-badge-2: #7c0202;
    --bg-badge-3: #b8be36;

    /* Badge text colors */
    --color-badge-1: #FFFFFF;
    --color-badge-2: #000000;
    /* BADGE END */

    /* TEXT COMPONENT */
    /* Text component colors */
    --color-text-component-1: #003d6e;
    --color-text-component-2: #7c0202;
    --color-text-component-3: #2B7805;
    /* TEXT COMPONENT END */

    /* WYSIWYG */
    /* Border */
    --border-wysiwyg-1: #003D6E;
    --border-wysiwyg-2: #7C0202;
    --border-wysiwyg-3: #2B7805;
    --border-wysiwyg-4: #FFFFFF;

    --border-wysiwyg-active-1: #1199DF;
    /* WYSIWYG END */

    /* NOTIFICATIONS */
    /* Notifications bg */
    --color-good-notification: #2b7805;
    --color-bad-notification: #7c0202;

    /* Notifications text color */
    --color-notification-text: #FFFFFF;
    /* NOTIFICATIONS END */

    /* LABEL COMPONENT */
    /* Text color */
    --color-label-text: #003d6e;
    --color-label-text-2: #7C0208;
    /* ** */

    /* PHOTOS COMPONENT */
    /* Placeholder background */
    --bg-photos-placeholder-1: #EEEEEE;

    /* Border color */
    --border-photos-1: #003d6e;

    /* Add button bg */
    --bg-photos-add-btn: #FFFFFF;
    --bg-photos-add-btn-hover: #003d6e;

    /* Add button x */
    --bg-photos-add-btn-x: #EEEEEE;

    /* Remove button bg */
    --bg-photos-remove-btn: gray;
    --bg-photos-remove-btn-hover: #7C0202;

    /* Remove button x */
    --bg-photos-remove-btn-x: #FFFFFF;
    /* ** */

    /* PRODUCT GRID COMPONENT */
    --bg-product-grid-item: #FFFFFF;

    --bg-product-grid-item-top: #FAFAFA;

    --color-product-grid-item: #000000;
    /* ** */

    /* PRODUCT DETAILS */
    --color-product-quantity: #343434;
    /* ** */
}