/************************************************
*   COLORS
*************************************************/

:root {
    /* Backgrounds */
    --new-main-bg: hsl(154, 78%, 5%);
    --new-header-bg: hsl(154, 78%, 9%);
    --new-menu-bg: hsl(154, 78%, 13%);
    --new-header-active-bg: var(--new-menu-bg);
    --new-card-bg: var(--new-main-bg);
    --new-card-header-bg: transparent /*var(--new-main-bg)*/;
    --new-card-body-bg: var(--new-main-bg);
    --new-footable-header-bg: transparent /*var(--new-main-bg)*/;

    /* Text colors */
    --new-main-text-color: #fff;
    --new-card-header-text-color: var(--new-main-text-color);
    --new-card-body-text-color: #f5deb3;
    /* --new-card-body-text-color: hsl(0, 0%, 80%); */
    --new-header-active-text-color: #f5deb3;
    /* --new-header-active-text-color: #fff; */
    --new-card-header-btn-color: var(--new-card-body-text-color);
    --new-placeholder: #d9d9d9;
    --new-footable-paging-color: var(--new-placeholder);
    --new-footable-main-color: var(--new-main-text-color);

    /* Borders, outlines */
    --new-header-border: hsl(154, 78%, 18%);
    --new-card-border: var(--new-header-border);
    --new-card-header-divider: var(--new-card-border);
    --new-outline: hsl(154, 78%, 22%);
    --new-footable-btn-border: var(--new-outline);
    --new-footable-paging-border: var(--new-outline);

    /* Box shadows */
    --new-card-box-shadow-color: #d9d9d960;
    --new-header-button-shadow: var(--new-placeholder);
    --main-box-shadow: 3px 1px 4px var(--new-card-box-shadow-color);

    /* Inactives */
    --new-inactive: hsl(0, 0%, 50%);
    --new-inactive-btn: var(--new-inactive);
    --disabled-color: #888888;
    --disabled-text-color: #c0c0c0;

    /* Main colors */
    --new-main-color: hsl(154, 100%, 13%); /* British Racing Green */
    --new-error-color: hsl(8, 81%, 22%);
    --ssm-main-color: #95bc0d;

    /* Inputs */
    --new-input-bg: var(--new-header-bg);
    --new-input-border: var(--new-outline);
    --new-input-focus-border: var(--new-main-btn);
    --new-input-border-radius: 5px;
    --new-input-inactive-bg: hsl(0, 0%, 30%);

    --chosen-border-radius: var(--new-input-border-radius);

    /* Buttons */
    --new-main-btn: hsl(154, 100%, 30%);
    --new-footable-btn-bg: var(--new-header-bg);
    --new-footable-active-btn-bg: var(--new-outline);

    --all-btn-border-size: 1px;
    --all-btn-border-type: solid;
    --all-btn-border-color: transparent;
    --all-btn-border-radius: 5px;

    --btn-type-main-bg: var(--new-outline);
    --btn-type-main-hover-bg: var(--new-main-btn);
    --btn-type-main-border: var(--new-outline);
    --btn-type-main-hover-border: var(--new-main-btn);
    --btn-type-main-color: var(--new-main-text-color);
    --btn-type-main-hover-color: var(--new-main-text-color);

    --btn-type1-bg: hsl(154, 43%, 72%);
    --btn-type1-hover-bg: hsl(154, 43%, 50%);
    --btn-type1-border: var(--new-main-bg);
    --btn-type1-hover-border: var(--btn-type1-border);
    --btn-type1-color: var(--new-main-bg);
    --btn-type1-hover-color: var(--new-main-bg);

    --btn-type2-bg: hsl(154, 20%, 50%);
    --btn-type2-hover-bg: hsl(154, 20%, 40%);
    --btn-type2-border: var(--new-main-bg);
    --btn-type2-hover-border: var(--btn-type2-border);
    --btn-type2-color: var(--new-main-bg);
    --btn-type2-hover-color: hsl(154, 0%, 100%);

    --btn-type3-bg: hsl(154, 44%, 54%);
    --btn-type3-hover-bg: hsl(154, 34%, 37%);
    --btn-type3-border: var(--new-main-bg);
    --btn-type3-hover-border: var(--btn-type3-border);
    --btn-type3-color: var(--new-main-bg);
    --btn-type3-hover-color: hsl(154, 0%, 100%);

    --btn-type4-bg: hsl(154, 49%, 41%);
    --btn-type4-hover-bg: hsl(154, 74%, 36%);
    --btn-type4-border: var(--new-main-bg);
    --btn-type4-hover-border: var(--btn-type4-border);
    --btn-type4-color: var(--new-main-bg);
    --btn-type4-hover-color: hsl(154, 0%, 100%);

    --btn-type5-bg: hsl(0, 50%, 50%);
    --btn-type5-hover-bg: hsl(0, 50%, 40%);
    --btn-type5-border: var(--new-main-bg);
    --btn-type5-hover-border: var(--btn-type5-border);
    --btn-type5-color: hsl(154, 0%, 100%);
    --btn-type5-hover-color: hsl(154, 0%, 100%);

    --btn-type6-bg: hsl(0, 100%, 30%);
    --btn-type6-hover-bg: hsl(0, 57%, 40%);
    --btn-type6-border: var(--new-main-bg);
    --btn-type6-hover-border: var(--btn-type6-border);
    --btn-type6-color: hsl(154, 0%, 100%);
    --btn-type6-hover-color: var(--new-main-bg);

    --btn-back-bg: hsl(154, 0%, 100%);
    --btn-back-hover-bg: hsl(154, 4%, 35%);
    --btn-back-border: var(--new-main-bg);
    --btn-back-hover-border: hsl(154, 4%, 35%);
    --btn-back-color: var(--new-main-bg);
    --btn-back-hover-color: hsl(154, 0%, 100%);

    /* ------------------------------------------ */
    /* -- 				ICON COLORS			   -- */
    /* ------------------------------------------ */
    --icon-1: var(--btn-type1-bg);
    --icon-2: var(--btn-type2-bg);
    --icon-3: var(--btn-type3-bg);
    --icon-4: var(--btn-type4-bg);
    --icon-5: var(--btn-type5-bg);
    --icon-6: var(--btn-type6-bg);

    /* ------------------------------------------ */
    /* -- 				HEIGHTS 			   -- */
    /* ------------------------------------------ */

    --header-height: 50px;
    --side-menu-width: 50px;

    --header-font-size: 20px;
    --header-inactive-font-size: 14px;

    /* ------------------------------------------ */
    /* -- 				FONTAWESOME			   -- */
    /* ------------------------------------------ */

    --fa-display: flex;
}