/***********************************************************
 * Basic
 ***********************************************************/
body, html {
    height: 100%;
    margin: 0;
    font-family: Manrope, Arial, sans-serif !important;
    background-color: var(--g6);
    color: var(--g1);
}

body.landing-page {
    height: auto !important;
    background:
            radial-gradient(
                    circle at -25% 70%,
                    rgba(255, 248, 201, 1.00) 0%, /* "%" = radius */
                    rgba(255, 248, 201, 0.80) 8%,
                    rgba(255, 248, 201, 0.60) 16%,
                    rgba(255, 248, 201, 0.40) 24%,
                    rgba(255, 248, 201, 0.20) 32%,
                    rgba(255, 248, 201, 0.00) 40%
            ),
            linear-gradient( 120deg, var(--w1) 40%, var(--a4) 100% );
}
body.landing-page footer {
    padding-top: 0 !important;
    background: linear-gradient( 180deg, transparent, var(--a3) 100% );
}
body.intro-page {
    background: linear-gradient( 107.69deg, #FFFFFF 37.91%, #6ABDB6 99.7% );
}
body.home-page {
    background: linear-gradient( 0deg, var(--g6) 75%, var(--a1) 125% );
}

/*.manrope-<uniquifier> {*/
/*    font-family: "Manrope", sans-serif;*/
/*    font-optical-sizing: auto;*/
/*    font-weight: <weight>;*/
/*    font-style: normal;*/
/*}*/

/* landing page sections */
header#landing-page-header,
section#landing-page-content,
footer#landing-page-footer {
    padding: 2em 4em 3em 4em;               /* top, right, bottom, left */
}

/* sections */
#header {
    padding: 8px 15px 7px 15px;
    position: sticky;
    top: 0;
    z-index: 1000;
}
#content {
    margin: 0 7px 0 82px;               /* top, right, bottom, left */
}
#content.mobile {
    margin: 60px 0;
}
#footer {
    /*padding: 80px 200px;*/
    padding: 5em 12em;
}

/* add 167px to the left */
#section-container.sidebar-active > #project-header {
    padding-left: 167px;
}
#section-container.sidebar-active > #content {
    margin: 0 7px 0 249px;
}
#section-container.sidebar-active > #footer {
    padding-left: 367px;
}

#main {
    /*padding: 0 20px;*/
}
#main.mobile {
    margin-top: 20px;
}

#overlay {
    display: none;
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* was originally 0.7 */
    z-index: 500;
    opacity: 0;
    /* it's a good idea for this to be the same as the sidebar transition */
    transition: all 0.3s ease-in-out;
}
#overlay.active {
    display: block;
    opacity: 1;
}



/***********************************************************
 * General
 ***********************************************************/
/* mobile buttons */
#btn-menu-left-mobile,
#btn-menu-right-mobile {
    display: none;
    position: fixed;     /* Stay in place */
    width: fit-content;
    z-index: 999;
}
#btn-menu-left-mobile {
    left: 28px;
    top: 62px;
}
#btn-menu-right-mobile {
    right: 28px;
    top: 62px;
}

.editable-text,
.editable-text-area {
    cursor: pointer;
    overflow-wrap: anywhere;
}

.search-result {
    margin: 0.5em 0;
    padding: 0.5em;
    border-radius: 5px;
    /*background-color: #efefef;*/
    color: var(--g1);
}
.search-result:hover {
    background: var(--g5);
}

.main-menu-img {
    width: 32px;
}
.main-menu-add-project-img,
.main-menu-org-settings-img {
    width: 16px;
}
.home-segment-header-icon {
    width: 24px;
}
.segment-header-icon {
    width: 20px;
}

.modal-tlick {
    max-width: 650px !important;
}

.tlicker-date-input {
    background: transparent;
    border: 0;
    padding-left: 0;
    width: 110px;
}



/***********************************************************
 * Landing page
 ***********************************************************/
.landing-page-logo {
    height: 64px;
}

.marker-yellow {
    position: relative;
    display: inline-block;
    z-index: 0;
}
.marker-yellow::before{
    content: "";
    position: absolute;
    left: -0.15em;
    right: -0.15em;
    bottom: 0.05em;
    height: 1.4em;              /* thickness */
    background: var(--b1);        /* marker color */
    /*opacity: 0.7;*/
    z-index: -1;
    transform: rotate(-2deg);   /* slight “hand-drawn” feel */
    border-radius: 0.15em;
}

.marker-green {
    position: relative;
    display: inline-block;
    z-index: 0;
}
.marker-green::before{
    content: "";
    position: absolute;
    left: -0.15em;
    right: -0.15em;
    bottom: 0.05em;
    height: 1.4em;              /* thickness */
    background: var(--a1);        /* marker color */
    /*opacity: 0.7;*/
    z-index: -1;
    transform: rotate(-2deg);   /* slight “hand-drawn” feel */
    border-radius: 0.15em;
}

.pricing-card {
    display: inline-block;
    text-align: left;
    margin: 0.25em;
    border-radius: 16px;
    border: 0;
    box-shadow:
            0 4px 4px 0 #0000004D,
            0 8px 12px 6px #00000026;
}
.pricing-card > .card-body {
    padding: 1.5em;
}
.pricing-card-free {
    color: var(--g1);
    background: var(--w1);
}
.pricing-card-paid {
    color: var(--w1);
    background: #162B60;
}
.pricing-card-title {
    font-size: 28px;
    font-weight: 600;
}
.pricing-card-feature {
    padding-top: 0.5em;
}



/***********************************************************
 * Home page
 ***********************************************************/
.welcome-home {
    margin-top: 5em;
    margin-bottom: 2.5em;
}
.welcome-home > span {
    font-size: 32px;
}
.welcome-home > img {
    width: 48px;
}
.welcome-home-text {
    font-size: 48px;
}

/* the 3 things we originally has on the top right */
.home-welcome-box {
    height: 150px;
    border-bottom-left-radius: 30px;
    border-top-right-radius: 30px;
}

#tlick-filter-modal .modal-header {
    background: #C1E6B9;
}

/* recent subproject cards */
.mini-card-deck {
    display: flex;
    flex-wrap: wrap;
    row-gap: 16px;
    column-gap: 16px;
    margin-top: 1em;
}

.mini-card {
    flex: 0 0 calc(50% - 8px);
    border-radius: 16px;
    overflow: hidden;
    border: 0;
}
a.mini-card {
    text-decoration: none;
    color: inherit;
}

.mini-card > .card-header {
    padding: 2em;
    border: 0;
}
.mini-card > .card-body {
    background: #fff;
    padding: 1em;
}

.mini-card > .card-body > .mini-card-title {
    color: var(--g1); /* g1 */

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;

    /* ensure stable line math */
    font-size: 16px;
    line-height: 1.2;
    height: calc(1.2em * 2);
}

/*
 * The "center/cover no-repeat" is equal to:
 * background-position: center;
 * background-size: cover;
 * background-repeat: no-repeat;
 */
.mini-card-deck > .mini-card:nth-child(1) > .card-header {
    background: url("/static/img/backgrounds/home-subproject-15.svg") center/cover no-repeat;
}
.mini-card-deck > .mini-card:nth-child(2) > .card-header {
    background: url("/static/img/backgrounds/home-subproject-20.svg") center/cover no-repeat;
}
.mini-card-deck > .mini-card:nth-child(3) > .card-header {
    background: url("/static/img/backgrounds/home-subproject-21.svg") center/cover no-repeat;
}
.mini-card-deck > .mini-card:nth-child(4) > .card-header {
    background: url("/static/img/backgrounds/home-subproject-16.svg") center/cover no-repeat;
}
.mini-card-deck > .mini-card:nth-child(5) > .card-header {
    background: url("/static/img/backgrounds/home-subproject-17.svg") center/cover no-repeat;
}
.mini-card-deck > .mini-card:nth-child(6) > .card-header {
    background: url("/static/img/backgrounds/home-subproject-25.svg") center/cover no-repeat;
}
.mini-card-deck > .mini-card:nth-child(7) > .card-header {
    background: url("/static/img/backgrounds/home-subproject-27.svg") center/cover no-repeat;
}
.mini-card-deck > .mini-card:nth-child(8) > .card-header {
    background: url("/static/img/backgrounds/home-subproject-24.svg") center/cover no-repeat;
}
.mini-card-deck > .mini-card:nth-child(9) > .card-header {
    background: url("/static/img/backgrounds/home-subproject-14.svg") center/cover no-repeat;
}
.mini-card-deck > .mini-card:nth-child(10) > .card-header {
    background: url("/static/img/backgrounds/home-subproject-18.svg") center/cover no-repeat;
}



/***********************************************************
 * Organization page
 ***********************************************************/
.payment-method-box {
    margin-bottom: 0.5em;
    border-radius: 16px;
    aspect-ratio: 3 / 2;  /*configure the width to height ratio*/
}

.adminland-org-deck {
    display: flex;
    flex-wrap: wrap;
    row-gap: 8px;
    column-gap: 16px;

    margin-top: 0.75em;
}

.adminland-org-container {
    /*width: 50%;*/
    /*float: left;*/
    flex: 0 0 calc(50% - 8px);
    box-sizing: border-box;
}

.adminland-org-container .adminland-org-card {
    margin-bottom: 0.5em;
    background: #F4EEE0;
    border-radius: 16px;
    aspect-ratio: 4 / 1;  /*configure the width to height ratio*/
}



/***********************************************************
 * Settings page - Organization page
 ***********************************************************/
#settings {
    /* stuff */
}

#settings > .settings-icon {
    /* stuff */
}

#settings > .settings-box {
    display: none;
    position: absolute;
    top: 35px;
    right: 85px;
}

.tlicker-nav-pills {
    flex-direction: column !important;
}

.tlicker-nav-pills > .nav-link {
    border-radius: 16px;
    text-decoration: none !important;
    font-size: 16px;
    color: var(--g1);
}

#content:has( #left.mobile ) .tlicker-nav-pills {
    flex-direction: unset !important;
    align-items: center;
    justify-content: center;
}

.tlicker-nav-pills > .nav-link.active,
.tlicker-nav-pills > .nav-link:hover {
    background: var(--g4);
}



/***********************************************************
 * Left Sidebar
 ***********************************************************/
#left {
    border-right: 1px solid #999999;
    position: fixed;    /* Stay in place */
    top: 0;
    left: 0;
    height: 100%;       /* 100% Full-height */
    width: fit-content;
    z-index: 999;       /* Stay on top */
    overflow-x: hidden; /* Disable horizontal scroll */
    padding: 0;
    transition: 0.3s;   /* on smartphone, transition effect to slide in the sidebar */
}

#left > #icon-logo-container {
    padding-top: 8px;
    padding-bottom: 16px;
}
#left.active > #icon-logo-container,
#left:hover  > #icon-logo-container {
    padding-left:  34px;
    padding-right: 34px;
}

/* link wrapping both icon and logo */
#left > #icon-logo-container > a {
    text-align: center;
}

/* icon */
#left > #icon-logo-container > a > img {
    /*width: 32px;*/
    height: 42px;
}

/* logo */
#left > #icon-logo-container > a > span > img {
    /*width: 160px;*/
    height: 42px;
}

#btn-menu-left {
    text-align: center;  /* Centers the text */
    padding: 15px 10px;
}

#btn-menu-left > button > i {
    color: #EBEBEB;
}

/* when menu active, push the menu button to the right */
#left.active > #btn-menu-left,
#left:hover  > #btn-menu-left {
    text-align: right;
}

.sidebar-divider {
    margin: 15px !important;
    border-bottom: 1px solid #4e555b;
}

#left > ul.nav-pills > li.nav-item > a.nav-link {
    border-radius: 0;
    padding: 1em 1.5em;
    cursor: pointer;
}

/* menu item text */
#left > ul.nav-pills > li.nav-item > a.nav-link > span {
    display: none;
    color: #EBEBEB;
    font-weight: bold;
}

/* active org color */
#left > ul.nav-pills > li.nav-item > a.nav-link.active {
    background-color: #FF9082;
}
/*#left > ul.nav-pills > li.nav-item > a.nav-link.active > i,*/
#left > ul.nav-pills > li.nav-item > a.nav-link.active > span {
    color: #FEFEFE;
}

/* root projects */
#left > ul.nav-pills > li.nav-item > div.collapsing > a.list-group-item,
#left > ul.nav-pills > li.nav-item > div.collapse   > a.list-group-item {
    background: transparent;
    line-height: normal;
    box-sizing: content-box;   /* max-width is content-only */
    max-width: 160px;          /* set your limit */
    /*white-space: nowrap;*/
    /*overflow: hidden;*/
    /*text-overflow: ellipsis;*/
}

#left:not(.active):not(:hover) > ul.nav-pills > li.nav-item > div.collapse,
#left:not(.active):not(:hover) > #icon-logo-container > a > span {
    display: none;
}

#left.active > ul.nav-pills > li.nav-item > a.nav-link > span,
#left:hover  > ul.nav-pills > li.nav-item > a.nav-link > span {
    display: inline;
    line-height: normal;
    box-sizing: content-box;   /* max-width is content-only */
    max-width: 146px;          /* set your limit */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#left.active > #icon-logo-container > a > span,
#left:hover  > #icon-logo-container > a > span {
    display: inline;
}

#left.active > #icon-logo-container > a > img,
#left:hover  > #icon-logo-container > a > img {
    display: none;
}

#left.mobile {
    left: -250px;
    width: 250px; /* left and width must be the same - process this with JavaScript */
}

#left.mobile.active {
    left: 0;
}

.notifications-box {
    display: none;             /* change to inline-flex */
    position: absolute;
    z-index: 9999;
    bottom: 100px;
    left: 50px;

    flex-direction: column;
    align-items: flex-start;   /* prevents items from stretching to container width */
    vertical-align: top;
}

.notifications-box .list-group-item {
    display: block;            /* or keep default; align-items above prevents stretching */
    width: auto;
}

.account-box {
    display: none;             /* change to inline-flex */
    position: absolute;
    z-index: 9999;
    bottom: 100px;
    left: 50px;

    flex-direction: column;
    align-items: flex-start;   /* prevents items from stretching to container width */
    vertical-align: top;
}

.account-box .list-group-item {
    display: block;            /* or keep default; align-items above prevents stretching */
    width: auto;
}

.popover-body {
    padding: 0;
}

.org-collapse-button {
    position: relative;
}

.org-collapse-button:not(:hover) > .org-settings-button-container {
    display:none;
}

.org-settings-button-container {
    position: absolute;
    top: 50%;
    transform: translateY(-50%); /* centers vertically */
    right: 0;
    margin-right: 10px;
}

.org-settings-button-container > button {
    background-color: #292929;
}

.org-settings-button-container > button:hover {
    background-color: #292929;
    border: 1px solid #757575 !important; /* the color of the grey cog svg */
}



/***********************************************************
 * Right Sidebar
 ***********************************************************/
#right {
    border-left: 1px solid #999999;
    position: fixed; /* Stay in place */
    top: 0;
    right: 0;
    height: 100%; /* 100% Full-height */
    width: fit-content;
    z-index: 999; /* Stay on top */

    /*background-color: #ddd;*/
    background-color: rgba(225, 225, 225, 0.5); /* Semi-transparent grey */
    backdrop-filter: blur(5px); /* Apply a 5px blur to the background, needs opacity to work */

    overflow-x: hidden; /* Disable horizontal scroll */
    padding: 46px 0 0 0; /* Place content further from the top of the viewport */
    transition: 0.3s; /* 0.5 second transition effect to slide in the sidebar */
}

#right > p:first-child {
    text-align: center;  /* Centers the text */
}

#right.active > p:first-child,
#right:hover  > p:first-child {
    text-align: left;  /* Centers the text */
    padding-left: 10px;
}

#right > .sidebar-title > i {
    color: #054C7C;    /* datagrid blue */
}

#right > .sidebar-title > span {
    color: #666;
}

#right > .sidebar-title > .sidebar-title-text {
    display: none;
    font-weight: bold;
}

#right.active > .sidebar-title > .sidebar-title-text,
#right:hover  > .sidebar-title > .sidebar-title-text {
    display: inline;
}

#right.active > .sidebar-title > i,
#right:hover  > .sidebar-title > i {
    padding-right: 4px !important;
}

#right.mobile {
    right: -250px;
    width: 250px; /* 0 width - change this with JavaScript */
}

#right.mobile.active {
    right: 0;
}



/***********************************************************
 * Notifications
 ***********************************************************/
/* Bootstrap popovers use max-width (default is limited) */
.popover:has( .popover-body > .tlicker-notification-container ) {
    max-width: 360px;   /* or: width: 360px; */
}
.popover-body:has( .tlicker-notification-container ) {
    width: 360px;       /* if you want a fixed body width */
}
.tlicker-notification-container {
    margin: 0.5em;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.tlicker-notification {
    text-align: left;
    font-weight: 600;
    font-size: 12px;
    display: flex;
    align-items: center;
}
.tlicker-notification.read {
    font-weight: normal;
}
.tlicker-notification-text {
    color: var(--g2);
    margin-left: 0.5em;
    flex: 1 1 auto;     /* expand to fill remaining space */
    min-width: 0;       /* allows shrinking/truncation if needed */
}



/***********************************************************
 * Utilities
 ***********************************************************/
.wrap-nowhere {
    white-space: nowrap;
}
.wrap-anywhere {
    overflow-wrap: anywhere;
}
.tlicker-link {
    /*color: var(--g2);*/
    /*font-weight: bold;*/

    color: var(--g1);
    text-decoration: none;
}
.tlicker-link:hover {
    color: var(--g2) !important;
}
.content-sizing {
    box-sizing: content-box;
}
.aspect-square {
    aspect-ratio: 1 / 1
}
.no-underline {
    text-decoration: none;
}
.show-all {
    /*white-space: nowrap;*/
}
.hover:hover {
    background-color: var(--g4) !important;
    /*background-color: #e5e6e7 !important;*/
    /*background-color: rgba(33, 37, 41, 0.075); */
    /*background: rgba(33, 37, 41, 0.03);*/
    /*background-color: #eeeeef;*/
}
.hover-cursor {
    cursor: pointer;
}
.position-smart {
    /* position: fixed; */
}
.shadowerino {
    box-shadow: 0 0 10px #777777;
}
.shadowerino-plus {
    box-shadow: 0 0 10px #777777;
    border-radius: 20px;
}
.borderino {
    border-style: solid;
    border-width: 1px;
    border-color: #dfdfdf;
}
.borderino-plus {
    border-radius: 20px !important;
    border-style: solid;
    border-width: 1px;
    border-color: #dfdfdf;
}
.borderino-max {
    border-radius: 50%;
    border-style: solid;
    border-width: 1px;
    border-color: #dfdfdf;
}
.inverted {
    transform: rotate(180deg);
}
.disablerino {
    color: #999999;
    font-style: italic;
}
.disablerino-bold {
    color: #999999;
    font-style: italic;
    font-weight: bold;
}
.table-align-middle td {
    vertical-align: middle;
}
.table-align-center td {
    text-align: center;
}
.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}
.flex-start {
    display: flex;
    align-items: center;
    justify-content: start;
}
.flex-end {
    display: flex;
    align-items: center;
    justify-content: end;
}
.flex-bottom {
    display: flex;
    align-items: end;
    justify-content: left;
}
.flex-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.tr-transparent {
    background: transparent;
}
.tr-transparent > td {
    background: inherit;
}
.tlicker-border {
    border: 0;
    border-radius: 16px;
}



/***********************************************************
 * Tlicker buttons
 ***********************************************************/
.btn-tlicker {
    border: 0;
    border-radius: 16px;
}
.btn-tlicker-round {
    border: 0;
    aspect-ratio: 1/1;
    border-radius: 50%;
}
.btn-round {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    width: 30px;
    border-radius: 50%;
    /*aspect-ratio: 1/1 !important;*/
}
.btn-round-sm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.375em 0.625em;
    height: 24px;
    width: 24px;
    font-size: 0.875rem;
    line-height: 1.5;
    border-radius: 50%;
    /*aspect-ratio: 1/1 !important;*/
}
.btn-round-lg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 35px;
    width: 35px;
    border-radius: 50%;
    /*aspect-ratio: 1/1 !important;*/
}



/***********************************************************
 * Tlicker font sizes
 ***********************************************************/
.line-height-normal {
    line-height: normal; /* normal is ofter 1.2 */
}
.line-height-small {
    line-height: 1; /* normal is ofter 1.2 */
}
.line-height-smaller {
    line-height: 0.8; /* normal is ofter 1.2 */
}

.fs-sm {
    font-size: small !important;
}
.fs-xs {
    font-size: x-small !important;
}
.fs-2xs {
    font-size: xx-small !important;
}

.font-size-8 {
    font-size: 8px;
}
.font-size-12 {
    font-size: 12px;
}
.font-size-14 {
    font-size: 14px;
}
.font-size-16 {
    font-size: 16px;
}
.font-size-20 {
    font-size: 20px;
}
.font-size-24 {
    font-size: 24px;
}
.font-size-28 {
    font-size: 28px;
}
.font-size-32 {
    font-size: 32px;
}
.font-size-36 {
    font-size: 36px;
}
.font-size-40 {
    font-size: 40px;
}
.font-size-44 {
    font-size: 44px;
}
.font-size-48 {
    font-size: 48px;
}
.font-size-80 {
    font-size: 80px;
}
.font-size-80 {
    font-size: 80px;
}
.font-size-92 {
    font-size: 92px;
}
.font-size-92 {
    font-size: 92px;
}
.font-size-100 {
    font-size: 100px;
}



/***********************************************************
 * Tlicker image sizes
 ***********************************************************/
.svg-img-16 {
    width: 16px;
}
.svg-img-24 {
    width: 24px;
}
.svg-img-32 {
    width: 32px;
}
.svg-img-48 {
    width: 48px;
}
.svg-img-64 {
    width: 64px;
}



/***********************************************************
 * Bootstrap - extra switch sizes
 ***********************************************************/
.form-check-input {
    clear: left;
}
.form-switch.form-switch-sm {
    /*margin-bottom: 0.5rem;  !* JUST FOR STYLING PURPOSE *!*/
}
.form-switch.form-switch-sm .form-check-input {
    height: 1rem;
    width: calc(1rem + 0.75rem);
    border-radius: 2rem;
}
.form-switch.form-switch-md {
    /*margin-bottom: 1rem;    !* JUST FOR STYLING PURPOSE *!*/
}
.form-switch.form-switch-md .form-check-input {
    height: 1.5rem;
    width: calc(2rem + 0.75rem);
    border-radius: 3rem;
}
.form-switch.form-switch-lg {
    /*margin-bottom: 1.5rem;  !* JUST FOR STYLING PURPOSE *!*/
}
.form-switch.form-switch-lg .form-check-input {
    height: 2rem;
    width: calc(3rem + 0.75rem);
    border-radius: 4rem;
}
.form-switch.form-switch-xl {
    /*margin-bottom: 2rem;    !* JUST FOR STYLING PURPOSE *!*/
}
.form-switch.form-switch-xl .form-check-input {
    height: 2.5rem;
    width: calc(4rem + 0.75rem);
    border-radius: 5rem;
}



/***********************************************************
 * Datagrid background colors
 ***********************************************************/
/* datagrid */
.bg-dg-blue {
    background: #054C7C !important;
}
.bg-dg-blue-lightest {
    background: #FFE5E7 !important;
}
.bg-dg-grey {
    background: #c0d2de !important;  /* light blue */
}
.bg-dg-real-grey {
    background: #dfe1e0 !important;  /* grey */
}

/* orange */
.bg-dg-oran {
    background: #F09856 !important;
}
.bg-dg-oran-light {
    background: #FFCCA6 !important;
}
.bg-dg-oran-lighter {
    background: #FFDBC0 !important;
}
.bg-dg-oran-lightest {
    /*background: #FFE9D9 !important;*/
    background: #FFF5ED !important;
}

/* red */
.bg-dg-red {
    background: #EA545F !important;
}
.bg-dg-red-light {
    background: #FBA4AA !important;
}
.bg-dg-red-lighter {
    background: #FEBFC4 !important;
}
.bg-dg-red-lightest {
    background: #FFE5E7 !important;
}

/* green */
.bg-forest-green {
    background: #025142 !important;
}
.bg-light-green {
    background: #B3EED5 !important;
}



/***********************************************************
 * Datagrid text colors
 ***********************************************************/
.cl-dg-satan {
    color: #666666 !important;
}
.cl-dg-grey {
    color: #c0d2de !important;
}
.cl-dg-blue {
    color: #054C7C !important;
}
.cl-dg-blue-light {
    color: #B5D6EB !important;
}
.cl-dg-light {
    color: #648CAC !important;
}
.cl-dg-lighter {
    color: #94B4CE !important;
}
.cl-dg-lightest {
    color: #C8DAEA !important;
}
.cl-dg-oran {
    color: #F09856 !important;
}
.cl-dg-oran-dark {
    color: #6B462B !important;
}
.cl-dg-red-dark {
    color: #68292E !important;
}