/********************************************************************************************************* 
     Author: Shawn N. Moore		
    Created: 7/11/2019 revised 2/18/2020
Description: CSS Styles specifically for the SampleApp Application.   Mostly colors and some specific sticky sizings.

**********************************************************************************************************/

/* Main Application Color Definitions */
/* Using the pseudo-class selector for the HTML root to contain these.
   Numeric value at the end of the color class generally represents the approximate luminence [V]alue in HSV. 
   
   Customizing the color scheme for an app?   Just change these items under the root pseudo-class
*/
:root {
    --app-color-98: #E5F6FF;
    --app-color-95: #DDEAFF;
    --app-color-90: #CFDBEF;
    --app-color-80: #A7BEDA;
    --app-color-70: #7699BF;
    --app-color-60: #4A749F;
    --app-color-50: #275b8A; /* Our seed color - approximately 50% V channel on HSV */
    --app-color-40: #1C4875;
    --app-color-30: #0A315B;
    --app-color-20: #001E55;
    --app-color-10: #000E24;
    --app-color-alt-30: #0A5B31; /* alternates that should provide variation against our main color */
    --app-color-alt-40: #1C7548;
    --app-color-alt-50: #278A5b;
    --app-color-alt-80: #A7DABE;
    --app-color-alt-90: #CFEFDB;
    --app-color-alt-bv-40: #4a54af; /* blue-voilet variation */
    --app-color-alt-rv-40: #53194c; /* red-voilet variation */
    --app-color-tint-grey-99: #f7f7fe;
    --app-color-tint-grey-98: #f0f0fe; /* need a bit more granularity on the light greys here - these have a hint of the main color, but are still grey */
    --app-color-tint-grey-95: #eaf0fe;
    --app-color-tint-grey-90: #dce2ef;
    --app-color-tint-grey-85: #cfd5e2;
    --app-color-tint-grey-80: #c3c8d4;
    --app-color-tint-grey-70: #a5a9b5;
    --app-color-tint-grey-60: #8d919c;
    --app-color-tint-grey-50: #6d717c;
    --app-color-pure-grey-99: #fefefe;
}

/* Master Page Classes */

/* Override nav-pills on the nav to get a subtler green */
.nav-pills .show > .nav-link {
    background-color: var(--app-color-70); 
}

/* Add specific bg color for nav bar */
.navbar.app-nav-bg {
    background-color: var(--app-color-90); 
}

/* must have body padding to make main content visible and not chopped off by the top-fixed nav */
body { 
    padding-top: 50px; 
}


/* Toolbar stuff */

/* this indicator is shown on the save icon - it is referenced by srdt and srforms when a cell is edited */
.indicator-save-changes {
    color: #ffc300;
    margin-top: 14px;
    margin-left: 10px;
    text-shadow: 1px 1px #000000;
}

.sidebar-width {
    flex: 0 0 90px;
}

.sticky-offset-toolbar {
    top: 54px;
}

.sticky-breadcrumb {
    top: 5px;
}

.sticky-offset-main-content {
    /*top:76px;*/
}

.toolbar {
    border: 1px solid;
    background-color: var(--app-color-98);
    margin-left: 4px;
}

.toolbar-return {
    margin-left: -20px;
    margin-top: 4px;
}

.toolbar-stack-center {
    margin-top: -35px;
}

.app-toolbar-hover:hover { 
    background-color: var(--app-color-90); 
    color: var(--app-color-10);
}

.toolbar-icon-color {
    color: var(--app-color-20);
}


/* Application's Main Theme Color Classes */
/* Referencing main color theme CSS variables */

/* main color palette */

/* main foreground colors */
.app-color-main-90 { color: var(--app-color-90); } 
.app-color-main-80 { color: var(--app-color-80); } 
.app-color-main-70 { color: var(--app-color-70); } 
.app-color-main-60 { color: var(--app-color-60); } 
.app-color-main-50 { color: var(--app-color-50); } 
.app-color-main-40 { color: var(--app-color-40); } 
.app-color-main-30 { color: var(--app-color-30); } 
.app-color-main-20 { color: var(--app-color-20); } 
.app-color-main-10 { color: var(--app-color-10); } 

/* main background colors */
.app-bg-color-main-90 { background-color: var(--app-color-90); } 
.app-bg-color-main-80 { background-color: var(--app-color-80); } 
.app-bg-color-main-70 { background-color: var(--app-color-70); } 
.app-bg-color-main-60 { background-color: var(--app-color-60); } 
.app-bg-color-main-50 { background-color: var(--app-color-50); } 
.app-bg-color-main-40 { background-color: var(--app-color-40); } 
.app-bg-color-main-30 { background-color: var(--app-color-30); } 
.app-bg-color-main-20 { background-color: var(--app-color-20); } 
.app-bg-color-main-10 { background-color: var(--app-color-10); } 

/* Alternate background colors - these are just alternates to the above for some variation */
.app-bg-alt-80 { background-color: var(--app-color-alt-80); } 
.app-bg-alt-90 { background-color: var(--app-color-alt-90); }

/* App Color Tinted Greys - they are greys with a hint of the app color - most apps will have tinted greys for main app content and reduced distraction. */
.app-bg-tint-grey-90 { background-color: var(--app-color-tint-grey-90); }
.app-bg-tint-grey-80 { background-color: var(--app-color-tint-grey-80); }

/* background triadic colors - place holder*/
/*.app-bg-main-triadic-90 { background-color: #nnnnnn; }*/

.text-success-darker{
    color:#18804f;
}