/* OCEAN */
    .theme-ocean {

        --ep-base: hsl(212, 48%, 94%); --ep-base-hover: hsl(212, 57%, 90%) ; --ep-base-active: hsl(213, 18%, 76%) ; --ep-base-emphasis: hsla(212, 30%, 15%, 0.4) ; --ep-base-on-subtle: hsl(212, 29%, 19%);
        --ep-base-subtle: hsl(212, 48%, 96%) ; --ep-base-subtle-hover: hsl(212, 48%, 93%); --ep-base-subtle-active: hsl(212, 48%, 90%) ; --ep-on-base: hsl(212, 29%, 19%); --ep-base-on-surface: hsl(212, 29%, 19%);

        --ep-primary:        hsl(213, 100%, 66%); --ep-primary-hover:        hsl(213, 80%, 51%); --ep-primary-active:        hsl(213, 80%, 40%); --ep-primary-emphasis: hsla(213, 80%, 57%, 0.4); --ep-primary-on-subtle: hsl(213, 80%, 21%);
        --ep-primary-subtle: hsl(213, 74%, 92%); --ep-primary-subtle-hover: hsl(213, 74%, 85%); --ep-primary-subtle-active: hsl(213, 74%, 80%); --ep-on-primary: #fff;

        --ep-secondary:        hsl(193, 50%, 46%); --ep-secondary-hover:      hsl(193, 50%, 40%); --ep-secondary-active:      hsl(193, 50%, 33%); --ep-secondary-emphasis: hsla(193, 50%, 46%, 0.4); --ep-secondary-on-subtle: hsl(193, 50%, 21%);
        --ep-secondary-subtle: hsl(193, 50%, 92%); --ep-secondary-subtle-hover: hsl(193, 50%, 85%); --ep-secondary-subtle-active: hsl(193, 50%, 80%); --ep-on-secondary: #fff;

        --ep-tertiary:        hsl(197, 12%, 34%); --ep-tertiary-hover:      hsl(197, 12%, 29%); --ep-tertiary-active:      hsl(197, 12%, 24%); --ep-tertiary-emphasis: hsla(197, 12%, 34%, 0.4); --ep-tertiary-on-subtle: hsl(197, 12%, 17%);
        --ep-tertiary-subtle: hsl(197, 12%, 92%); --ep-tertiary-subtle-hover: hsl(197, 12%, 85%); --ep-tertiary-subtle-active: hsl(197, 12%, 80%); --ep-on-tertiary: #fff;


        --ep-primaryH: 213deg;   --ep-primaryS: 100%;  --ep-primaryL: 66%;
        --ep-secondaryH: 193deg; --ep-secondaryS: 50%; --ep-secondaryL: 46%;

        --ep-warning:        hsl(24, 85%, 56%); --ep-warning-hover:        hsl(24, 85%, 46%); --ep-warning-active: hsl(24, 85%, 36%); --ep-warning-emphasis: hsla(24, 85%, 56%, 0.4); --ep-warning-on-subtle: hsl(24, 85%, 15%);
        --ep-warning-subtle: hsl(24, 85%, 92%); --ep-warning-subtle-hover: hsl(27, 85%, 85%); --ep-warning-subtle-active: hsl(24, 85%, 80%); --ep-on-warning: #fff;

        --ep-info: hsl(210, 89%, 38%); --ep-info-hover: hsl(210, 89%, 28%); --ep-info-active: hsl(210, 89%, 20%); --ep-info-emphasis: hsla(210, 89%, 28%, 0.4); --ep-info-on-subtle: hsl(210, 89%, 20%);
        --ep-info-subtle: hsl(210, 89%, 92%); --ep-info-subtle-hover: hsl(210, 89%, 85%); --ep-info-subtle-active: hsl(210, 89%, 80%); --ep-on-info: #fff;

        --ep-success: hsl(126, 72%, 39%); --ep-success-hover: hsl(126, 72%, 29%); --ep-success-active: hsl(126, 72%, 19%); --ep-success-emphasis: hsla(126, 72%, 39%, 0.4); --ep-success-on-subtle: hsl(126, 72%, 15%);
        --ep-info-subtle: hsl(126, 72%, 92%); --ep-info-subtle-hover: hsl(126, 72%, 85%); --ep-info-subtle-active: hsl(126, 72%, 80%); --ep-on-info: #fff;

        --ep-danger: hsl(343, 100%, 53%);  --ep-danger-hover: hsl(343, 90%, 43%); --ep-danger-active: hsl(343, 90%, 37%); --ep-danger-emphasis: hsla(343, 90%, 53%, 0.4); --ep-danger-on-subtle: hsl(343, 90%, 19%);
        --ep-danger-subtle: hsl(343, 90%, 92%); --ep-danger-subtle-hover: hsl(343, 90%, 82%); --ep-danger-subtle-active: hsl(343, 90%, 77%); 

        --ep-primary-rgb:   81, 159, 255 ;
        --ep-secondary-rgb: 92, 193, 181 ;
        --ep-success-rgb:    27, 171, 42 ;
        --ep-info-rgb:       10, 96, 183 ;
        --ep-danger-rgb:    255, 15, 83 ;
        --ep-warging-rgb:   243, 122, 41 ;


        --ep-link-color: var(--ep-secondary);
        --ep-link-color-hover: var(--ep-secondary-hover);
         
        --ep-blue: hsl(210, 89%, 55%);   --ep-blue-bold: hsl(210, 89%, 45%);   --ep-blue-bolder: hsl(210, 89%, 30%);   --ep-blue-subtle: hsl(210, 89%, 75%);   --ep-blue-subtler: hsl(210, 89%, 90%);
      --ep-purple: hsl(319, 33%, 55%); --ep-purple-bold: hsl(319, 33%, 45%); --ep-purple-bolder: hsl(319, 33%, 30%); --ep-purple-subtle: hsl(319, 33%, 75%); --ep-purple-subtler: hsl(319, 33%, 90%);
        --ep-cyan: hsl(173, 45%, 56%);   --ep-cyan-bold: hsl(173, 45%, 40%);   --ep-cyan-bolder: hsl(173, 45%, 25%);   --ep-cyan-subtle: hsl(173, 45%, 75%);   --ep-cyan-subtler: hsl(173, 45%, 90%);
       --ep-green: hsl(126, 72%, 45%);  --ep-green-bold: hsl(126, 72%, 35%);  --ep-green-bolder: hsl(126, 72%, 25%);  --ep-green-subtle: hsl(126, 72%, 73%);  --ep-green-subtler: hsl(126, 72%, 90%);
         --ep-red: hsl(343, 90%, 53%);    --ep-red-bold: hsl(343, 90%, 37%);    --ep-red-bolder: hsl(343, 90%, 22%);     --ep-red-subtle: hsl(343, 90%, 73%);     --ep-red-subtler: hsl(343, 90%, 90%);
       --ep-yellow: hsl(49, 64%, 55%);  --ep-yellow-bold: hsl(49, 64%, 40%);  --ep-yellow-bolder: hsl(49, 64%, 25%);  --ep-yellow-subtle: hsl(49, 64%, 75%);  --ep-yellow-subtler: hsl(49, 64%, 90%) ;
       --ep-orange: hsl(24, 90%, 56%);  --ep-orange-bold: hsl(24, 90%, 44%);   --ep-orange-bolder: hsl(24, 90%, 27%); --ep-orange-subtle: hsl(24, 90%, 75%); --ep-orange-subtler: hsl(24, 90%, 90%);


        --sidebarMenuText: #929aac;
        --topRowGradRight:  #0e7ad1; --topRowGradLeft: #0f2f40;
        --horizontalMenuBG: #2e2e40;
        --sidebarBG: hsl(249deg, 32%, 22%);

         /* GRIDS*/  --gridHeaderBG: hsl(var(--ep-primaryH), 50%, 96%); --gridCellHoverBG: hsla(var(--ep-primaryH), var(--ep-primaryS), var(--ep-primaryL), .20); --gridCellActiverBG: #cfe7ff; --sidebarBG: #1e1e2d;
        /*BUTTONS*/   --buttonH: 212deg;  --buttonS: 48%;
        /*DROPDOWNS*/ --dropdownItemHoverBG: #e8eff7;
        /* TABS */ --tabsBodyBG: #f1f5f6; --tabsBodyBG_alt: #fff; --tabsHeaderBG: transparent; --tabsBorder: var(--ep-secondary); --tabBG: transparent; --tabActiveBG: var(--ep-secondary);

        --borderColor: #b6c0cc;
        --borderH: 213;

        --ep-primaryH: 213deg;  --ep-primaryS: 100%;  --ep-primaryL: 66%;
        --warningH : 24;
        --infoH : 210;
        --successH : 126;
        --dangerH: 343;

        --textH: 234;
        --textDefault:        hsl(var(--textH), 16%, 38%);
        --textStrong:         hsl(var(--textH), 16%, 15%);
        --textLight:          hsl(var(--textH), 16%, 50%);
        --textGray:           hsl(var(--textH), 16%, 68%);
        --ep-disabled-text:   hsl(var(--textH), 08%, 50%);
    }

    .theme-ocean.dark-mode {
        --buttonHoverBG: #2f65a7; --buttonBG: #214776; --buttonBorder: #2f65a7;
        --borderColor: #4b5781;

        --ep-link-color: var(--ep-secondary);
        --ep-link-color-hover: var(--ep-secondary-hover);
    }

        .theme-ocean.themestyle-modern { --topRowGradRight: #0e908c; --topRowGradLeft: #0e7ad1; }
            .theme-ocean.themestyle-modern.dark-mode { --topRowGradRight: #125452; --topRowGradLeft: #093456; }

.ep-fieldset__title:after { background: var(--ep-secondary); }