/********************************************************************************************************* 
     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-tint-grey-99: #f7f7ff;
    --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;
    /* approximate color names for color categories */
    --app-color-cat-1: #2f8dfa; /* light blue */
    --app-color-cat-2: #1fd0b7; /* light blue-green */
    --app-color-cat-3: #ef688f; /* rose */
    --app-color-cat-4: #f8c753; /* yellow-orange */
    --app-color-cat-5: #eb7e30; /* dark orange */
    --app-color-cat-6: #a93790; /* lighter magenta */
    --app-color-cat-7: #499587; /* blue-ish green */
    --app-color-cat-8: #1553b6; /* blue */
    --app-color-cat-9: #55008c; /* purple */
    --app-color-cat-10: #8b572a; /* medium brown  */
    /* New preliminary city colors - 1/3/2024 */
    --app-color-city-logo-rose: #8e1537;
    --app-color-city-logo-green: #7b8949;
    /* New preliminary color variants */
    --app-color-category-blue-1: #c0d1e2;
    --app-color-category-blue-1-40pct: #c0d1e240; /* 30 percent on alpha channel to make more subtle */
    --app-color-category-blue-2: #81a2c6;
    --app-color-category-blue-3: #87a4bf;
    --app-color-category-blue-4: #4c6e8e;
    --app-color-category-grey-1: #b8b9bb;
    --app-color-category-grey-2: #939598;
}

/* 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;  */
    padding-top: 0px;
}


/* 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);b
}


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

/* main color palette */

/* main foreground colors */
.app-color-main-98 {color: var(--app-color-98);}
.app-color-main-95 {color: var(--app-color-95);} 
.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); } 

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

/* main background colors */
.app-bg-color-main-98 {background-color: var(--app-color-98);}
.app-bg-color-main-95 {background-color: var(--app-color-95);} 
.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-30 { background-color: var(--app-color-alt-30); } 
.app-bg-alt-40 { background-color: var(--app-color-alt-40); } 
.app-bg-alt-50 { background-color: var(--app-color-alt-50); } 
.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-95 { background-color: var(--app-color-tint-grey-98); }
.app-bg-tint-grey-95 { background-color: var(--app-color-tint-grey-95); }
.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); }
.app-bg-tint-grey-70 { background-color: var(--app-color-tint-grey-70); }
.app-bg-tint-grey-60 { background-color: var(--app-color-tint-grey-60); }

/* category foreground colors */
.app-color-cat-1 {color: var(--app-color-cat-1);}
.app-color-cat-2 {color: var(--app-color-cat-2);} 
.app-color-cat-3 { color: var(--app-color-cat-3); } 
.app-color-cat-4 { color: var(--app-color-cat-4); } 
.app-color-cat-5 { color: var(--app-color-cat-5); } 
.app-color-cat-6 { color: var(--app-color-cat-6); } 
.app-color-cat-7 { color: var(--app-color-cat-7); } 
.app-color-cat-8 { color: var(--app-color-cat-8); } 
.app-color-cat-9 { color: var(--app-color-cat-9); } 
.app-color-cat-10 { color: var(--app-color-cat-10); } 

/* category background colors */
.app-bg-color-cat-1 {background-color: var(--app-color-cat-1);}
.app-bg-color-cat-2 {background-color: var(--app-color-cat-2);} 
.app-bg-color-cat-3 { background-color: var(--app-color-cat-3); } 
.app-bg-color-cat-4 { background-color: var(--app-color-cat-4); } 
.app-bg-color-cat-5 { background-color: var(--app-color-cat-5); } 
.app-bg-color-cat-6 { background-color: var(--app-color-cat-6); } 
.app-bg-color-cat-7 { background-color: var(--app-color-cat-7); } 
.app-bg-color-cat-8 { background-color: var(--app-color-cat-8); } 
.app-bg-color-cat-9 { background-color: var(--app-color-cat-9); } 
.app-bg-color-cat-10 { background-color: var(--app-color-cat-10); } 



/* Accessibility workaround for a darker info color. */
.text-info-darker {
    color: #00a3c8;
}

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

.tab-mods.nav-link.active {
    font-weight: bolder;
}

/* for chrome hiding scrollbar  */
body::-webkit-scrollbar {
    width: 0px !important;
}

body {
    overflow: -moz-scrollbars-none;
}


/* Vertical Progress Classes */

.progress-bar-vertical {
    width: 5px;
    min-height: 55px;
    display: flex;
    align-items: flex-end;
}

.progress-bar-vertical .progress-bar {
    width: 100%;
    height: 0;
/*    -webkit-transition: height 0.6s ease;
    -o-transition: height 0.6s ease;
    transition: height 0.6s ease;*/
}


.app-bg-match-lowest {
    background-color: #fe0000;
}

.app-bg-match-low {
    background-color: #e47600;
}

.app-bg-match-possible {
    background-color: #e8d400;
}

.app-bg-match-good {
    background-color: #70ce56;
}

.app-bg-match-best {
    background-color: #0c8e1f;
}



/* Class to make changing the expand/collapse icon easier. */
[data-bs-toggle="collapse"] .fas:before {
    content: "\f151"; /* caret-square-up */
}

[data-bs-toggle="collapse"].collapsed .fas:before {
    content: "\f150"; /* caret-square-down */
}


.fa-0-pt-5x {
    font-size: 0.5em;
}


/* perspective text drop shadow */
.text-drop-shadow-persp-1 {
    color: white;
    text-shadow: 2px 2px 4px #000000bb;
}

/* more subdued tex perspective shadow */
.text-drop-shadow-persp-2 {
    color: white;
    text-shadow: 2px 2px 4px #00000077;
}

.block-drop-shadow-persp-1 {
    -webkit-filter: drop-shadow(2px 2px 4px #0000007aa);
    filter: drop-shadow(2px 2px 4px #000000aa);
}

/* utility class for use with hr's and other horizontal oriented items */
/*.height-3 {
    height: 3px !important;
}*/
               
/* a bolder semi-bold than bootstrap's fw-semibold, which doesn't have a huge different from the default */
.fw-500 {
    font-weight:500;
}



/* additional width classes, since bootstrap only provides increments of 25 */
.w-90 {
    width:90%;
}

.w-80 {
    width: 80%;
}

/* city logo colors */

.app-bg-color-city-logo-rose {
    background-color: var(--app-color-city-logo-rose);
}

.app-bg-color-city-logo-green {
    background-color: var(--app-color-city-logo-green);
}

.app-color-city-logo-green {
    color: var(--app-color-city-logo-green);
}

.app-color-city-logo-rose {
    color: var(--app-color-city-logo-rose);
}


/* category colors */

.app-bg-color-city-cat-blue-1 {
    background-color: var(--app-color-category-blue-1);
}

.app-bg-color-city-cat-blue-2 {
    background-color: var(--app-color-category-blue-2);
}

.app-bg-color-city-cat-blue-3 {
    background-color: var(--app-color-category-blue-3);
}

.app-bg-color-city-cat-blue-4 {
    background-color: var(--app-color-category-blue-4);
}

.app-bg-color-city-cat-grey-1 {
    background-color: var(--app-color-category-grey-1);
}

.app-bg-color-city-cat-grey-2 {
    background-color: var(--app-color-category-grey-2);
}



/* Button effects */

.quickLinkButton {
    height: 110px;
    vertical-align: middle;
    background-color: #8a1538;
    border-color: #8a1538;
}

.quickLinkButton:hover {
    background-color: #414141;
    border-color: #414141;
}

.filterButton {
    color: #252525;
}

.filterButton:hover {
    color: #000000;
}