:root {
    /* Main Color Ocean */
    --ocean-lightest : #D3F2FD;
    --ocean-lighter : #AAE8FF;
    --ocean-light : #61c6f2;
    --ocean : #42b7e9;
    --ocean-dark : #09a9e3;
    --ocean-darker : #047198;
    --ocean-darkest : #032937;
    /* Main Color Sunset */
    --sunset-lightest : #fde7d2;
    --sunset-lighter : #ffd3aa;
    --sunset-light : #ffb570;
    --sunset : #f5851f;
    --sunset-dark : #e36609;
    --sunset-darker : #984604;
    --sunset-darkest : #371e0e;
    /* UI Usability Color */
    --warning-lighter : #FFF8e9;
    --warning-light : #ffe3aa;
    --warning-dark : #fcc043;
    --warning-darker : #9c6800;
    --success-lighter : #ebf7e6;
    --success-light : #cdefc4;
    --success-dark : #2e844a;
    --success-darker : #194e31;
    --error-lighter : #feeeee;
    --error-light : #fcc5c5;
    --error-dark : #f44343;
    --error-darker : #de0d0d;
    /* UI Text Color */
    --text-decor : #FFFFFF;
    --text-placeholder : #B8C2D3;
    --text-disabled : #737f8c;
    --text-subdued : #474D58;
    --text-default : #192227;
    --text-action : #f5851f;
    --icon-decor :  #FFFFFF;
    --icon-default :  #192227;
    --icon-action :  #f5851f;
    /* Glass Color */
    --glass-lighter : #ffffff;
    --glass-light : #f9fafb;
    --glass : #f1f2f5;
    --glass-dark : #e8eaef;
    --glass-darker : #dde0e7;
    /* Ashpalt Color */
    --ashpalt-lighter : #737f8c;
    --ashpalt-light : #5c6570;
    --ashpalt : #454c54;
    --ashpalt-dark : #2e3338;
    --ashpalt-darker : #192227;
    /* Secondary Color */
    --teal-lightest : #E9FFFD;
    --teal-lighter : #ACF3E4;
    --teal-light : #04E1CB;
    --teal : #01C3B3;
    --teal-dark : #03AB9E;
    --teal-darker : #0B827C;
    --teal-darkest : #024D4C;
    --purple-lightest : #F6F2FB;
    --purple-lighter : #E5D5F6;
    --purple-light : #BB91F3;
    --purple : #9050E9;
    --purple-dark : #7B2FE5;
    --purple-darker : #5A1BA9;
    --purple-darkest : #300B60;
    --fuchia-lightest : #FFEBF3;
    --fuchia-lighter : #FFADD0;
    --fuchia-light : #FF66A6;
    --fuchia : #FF358A;
    --fuchia-dark : #FF006B;
    --fuchia-darker : #CC0056;
    --fuchia-darkest : #990040;
    --green-lightest : #E7F8EA;
    --green-lighter : #B1E7B9;
    --green-light : #72D482;
    --green : #45C65A;
    --green-dark : #32A445;
    --green-darker : #267D35;
    --green-darkest : #1A5624;
    --red-lightest : #FDE3E3;
    --red-lighter : #F9B4B4;
    --red-light : #F47C7C;
    --red : #EF4848;
    --red-dark : #EB1919;
    --red-darker : #C01111;
    --red-darkest : #910D0D;
    --yellow-lightest : #FEF0C3;
    --yellow-lighter : #FEE186;
    --yellow-light : #FDCF3F;
    --yellow : #FCC003;
    --yellow-dark : #CA9A02;
    --yellow-darker : #977302;
    --yellow-darkest : #654D01;
    --grey-light: #F1F2F5;
}

.bg-color-ocean-lightest {
    background-color: var(--ocean-lightest) !important;
}

.bg-color-ocean-lighter {
    background-color: var(--ocean-lighter);
}

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

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

.bg-color-ocean-dark {
    background-color: var(--ocean-dark);
}

.bg-color-ocean-darker {
    background-color: var(--ocean-darker);
}

.bg-color-ocean-darkest {
    background-color: var(--ocean-darkest);
}

.bg-color-sunset-lightest {
    background-color: var(--sunset-lightest) !important;
}

.bg-color-sunset-lighter {
    background-color: var(--sunset-lighter);
}

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

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

.bg-color-sunset-dark {
    background-color: var(--sunset-dark);
}

.bg-color-sunset-darker {
    background-color: var(--sunset-darker);
}

.bg-color-sunset-darkest {
    background-color: var(--sunset-darkest);
}

/* UI Usability Color */
.bg-color-warning-lighter {
    background-color: var(--warning-lighter);
}

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

.bg-color-warning-dark {
    background-color: var(--warning-dark) !important;
}

.bg-color-warning-darker {
    background-color: var(--warning-darker);
}

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

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

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

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

.bg-color-error-lighter {
    background-color: var(--error-lighter);
}

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

.bg-color-error-dark {
    background-color: var(--error-dark);
}

.bg-color-error-darker {
    background-color: var(--error-darker);
}

.bg-color-icon-disabled {
    background-color: var(--text-placeholder);
}

/* UI Text Color */
.utopia-text-decor {
    color : var(--text-decor) !important;
}

.utopia-text-placeholder {
    color : var(--text-placeholder) !important;
}

.utopia-text-disabled {
    color : var(--text-disabled) !important;
}

.utopia-text-disable {
      color : #B8C2D3 !important;
 
  }
.utopia-text-subdued {
    color : var(--text-subdued) !important;
}

.utopia-text-default {
    color : var(--text-default) !important;
}

.utopia-text-action {
    color : var(--text-action);
}

.utopia-text-ocean-light {
    color : var(--ocean-light);
}

.utopia-text-ocean {
    color : var(--ocean) !important;
}
.utopia-text-warning {
    color : var(--warning-dark);
}

.utopia-text-warning-darker {
      color : var(--warning-darker);
 
  }
.utopia-text-success {
    color : var(--success-dark);
}

.utopia-text-sunset {
    color: var(--sunset);
}

.utopia-text-ashpalt-lighter {
    color: var(--ashpalt-lighter);
}

.utopia-text-green-light {
    color: var(--green-light) !important;
}

.utopia-text-purple {
    color: var(--purple) !important;
}

.utopia-text-yellow {
    color: var(--yellow) !important;
}

.utopia-text-error-dark {
    color: var(--error-dark) !important;
}

.utopia-text-sunset-darker {
      color: var(--sunset-darker);
}

.utopia-text-green {
      color: var(--green) !important;
}

/* UI Icon Color */
.utopia-icon-decor {
    color : var(--icon-decor);
}

.utopia-icon-default {
    color : var(--icon-default);
}

.utopia-icon-action {
    color : var(--icon-action);
}

.utopia-icon-color-ocean-dark {
    color : var(--ocean-dark);
}

.utopia-icon-warning {
    color: var(--warning-dark);
}

/* Glass Color */
.bg-color-glass-lighter {
    background-color: var(--glass-lighter);
}

.bg-color-glass-light {
    background-color: var(--glass-light) !important;
}

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

.bg-color-glass-dark {
    background-color: var(--glass-dark);
}

.bg-color-glass-darker {
    background-color: var(--glass-darker) !important;
}

/* Ashpalt Color */
.bg-color-ashpalt-lighter {
    background-color: var(--ashpalt-lighter) !important;
}

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

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

.bg-color-ashpalt-dark {
    background-color: var(--ashpalt-dark);
}

.bg-color-ashpalt-darker {
    background-color: var(--ashpalt-darker) !important;
}

.border-card-default{
    border: 1px solid var(--glass-dark) !important;
}

.border-card-active{
    border: 1px solid var(--sunset);
}

.border-color-warning-dark {
    border-color: var(--warning-dark) !important;
}

.border-color-card-default {
    border-color: var(--glass-dark) !important;
}

.border-color-ocean-light {
    border-color: var(--ocean-light) !important;
}

.border-color-sunset-lightest {
    border-color: var(--sunset-lightest) !important;
}

.border-color-warning-light {
    border-color: var(--warning-light) !important;
}

.bg-color-white-to-grey{
    background: linear-gradient(180deg, #FFFFFF 0%, #F1F2F5 100%);
}

.bg-color-white-to-grey-summary{
    background: linear-gradient(180deg, #FFFFFF 0%, #E8EAEF 100%);
}

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

.bg-color-yellow-dark{
    background-color: var(--yellow-dark);
}

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

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

.bg-color-purple-lightest{
    background-color: var(--purple-lightest);
}

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