: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) !important;
}
.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) !important;
}
.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) !important;
}
.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-yellow-dark {
  color: var(--yellow-dark) !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;
}
.utopia-text-teal {
    color: var(--teal) !important;
}
.utopia-text-yellow-light {
    color: var(--yellow-light) !important;
}
.utopia-text-error-darker {
    color: var(--error-darker) !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) !important;
}
.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);
}
.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) !important;
}
.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) !important;
}
.border-color-warning-dark {
  border-color: var(--warning-dark) !important;
}
.border-color-card-default {
  border-color: var(--glass-dark) !important;
}
.border-glass{
  border: 1px solid var(--glass) !important;
}
.border-color-glass{
  border-color: var(--glass) !important;
}
.border-color-error-dark {
  border-color: var(--error-dark) !important;
}
.border-color-glass-lighter{
  border-color: var(--glass-lighter) !important;
}
.border-glass-darker{
  border: 1px solid var(--glass-darker) !important;
}
.border-color-glass-darker{
  border-color: var(--glass-darker) !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);
}
.bg-color-teal-lightest {
  background-color: var(--teal-lightest) !important;
}
.bg-color-green-lightest {
  background-color: var(--green-lightest) !important;
}