/********** CSS IMPORTS BY STRUCTURE **********/
@import url("/resources/bootstrap5/templates/default/css/includes/general.css");
@import url("/resources/bootstrap5/templates/default/css/includes/custom-components.css");
@import url("/resources/bootstrap5/templates/default/css/includes/page-specific.css");


/********** CSS GUIDELINES **********/
/*    # This file only contains variables and wrappers for these and bootstrap.css variables. */
/*    # ONLY use COLORS and FONT SIZES available as css variables (below and in bootstrap.css). If you do not find the color you need, get UX approval for a new color. */
/*    # BEFORE MAKING YOUR OWN CLASS, make sure first that there isn't a standard Bootstrap class that already does that, or a custom class in general styles. */
/*    # Css content was organized by above import structure (also see further import structure). You should keep structure consistent. */
/*    # Use flexible/relative units relative units like rems, don't use px. */
/*    # Use !important only as a last resort. */
/*    # Avoid id selectors. */
/*    # When a rule has multiple selectors, put each selector on a new line. */


/********** CSS VARIABLES **********/
:root {
   /* The main colors to use are in bootstrap.css */
   --ifn-orange-modal: #d75a0b;
   --ifn-yellow-ics: #dd9c28;
   --ifn-yellow-tooltip-border: #ffcc55;
   --ifn-yellow-tooltip-bg: #fffae8;
   --ifn-green-ics-savings: #7FAC5D;
   --ifn-blue-repo: #7ea7ad;
   --ifn-blue-ics-demand: #67ADDC;
   --ifn-cyan: #0AA2C0;
   --ifn-blue-navbar: #428bca;
   --ifn-blue-cdars: #005595;
   --ifn-gray-footer: #405055;
   /* messages background colors */
   --ifn-success-bg: #eff8ef;
   --ifn-info-bg: #ebf2f8;
   --ifn-warning-bg: #fef0e8;
   --ifn-error-bg: #fbebec;
   /* font sizes */
   --ifn-font-size-xs: 0.75rem;
   --ifn-font-size-sm: 0.875rem;
   --ifn-font-size-md: 1rem;
   --ifn-font-size-lg: 1.25rem;
   --ifn-font-size-xl: 1.5rem;
   --ifn-font-size-xxl: 2rem;
   /* font family */
   --ifn-font-monospace: monospace-font;
}


/********** CSS VARIABLES WRAPPERS **********/
.bg-gray-body {
   background-color: var(--bs-gray-100);
}

.bg-gray-100 {
   background-color: var(--bs-gray-100);
}

.bg-gray-200 {
   background-color: var(--bs-gray-200);
}

.bg-gray-300 {
   background-color: var(--bs-gray-300);
}

.bg-gray-600 {
   background-color: var(--bs-gray-600) !important;
}

.bg-gray-400 {
   background-color: var(--bs-gray-400) !important;
}

.bg-success {
   background-color: var(--bs-success);
}

.bg-success-light {
   background-color: var(--ifn-success-bg);
}

.bg-danger {
   background-color: var(--bs-danger) !important;
}

.bg-danger-light {
   background-color: var(--ifn-error-bg);
}

.gray-400 {
   color: var(--bs-gray-400);
   font-size: 1.5rem;
}

.gray-800 {
   color: var(--bs-gray-800);
}

.orange-modal {
   color: var(--ifn-orange-modal);
}

.font-proxima-nova {
   font-family: var(--bs-font-sans-serif);
}

.font-size-xs {
    font-size: var(--ifn-font-size-xs)
}

/* for other font size wrapper classes, see bootstrap.css e.g., .fs-6 */

.font-size-xxl {
   font-size: var(--ifn-font-size-xxl)
}