:root {
  --color-blue1: #ECF3FF;
  --color-blue2: #D6E7FF;
  --color-blue3: #ADCBFF;
  --color-blue4: #85ADFF;
  --color-blue5: #5C8DFF;
  --color-blue6: #3369FF;
  --color-blue7: #214CD9;
  --color-blue8: #1232B3;
  --color-blue9: #071D8C;
  --color-blue10: #041166;
  --color-grey1: #F4F7FC;
  --color-grey2: #E9EDF5;
  --color-grey3: #E7E9ED;
  --color-grey4: #DBDEEA;
  --color-grey5: #D6D8DF;
  --color-grey6: #B4BDCC;
  --color-grey7: #A3A9B7;
  --color-grey8: #6D7383;
  --color-grey9: #212A40;
  --color-grey10: #20243D;

  --color-primary: #3369FF;
  --color-success: #39C676;
  --color-warning: #FF891B;
  --color-danger: #F54040;
  --color-info: #A3A9B7;
  --color-title: #212A40;
  --color-subtitle: #6D7383;
  --color-disable: #B4BDCC;
  --color-border: #DBDEEA;
  --color-body: #F5F7FC;
}

body {
  background-color: var(--color-body);
  min-width: 900px;
  /* min-height: 600px; */
}

.color-white {
  color: #fff;
}

.color-title {
  color: var(--color-title) !important;
}

.color-subtitle {
  color: var(--color-subtitle) !important;
}

.color-primary {
  color: var(--color-primary) !important;
}

.hover-primary {
  cursor: pointer;
  &:hover {
    color: var(--color-title);
    transition: color 0.2s;
    &:hover {
      color: var(--color-primary);
    }
  }
}

.color-success {
  color: var(--color-success);
}

.color-warning {
  color: var(--color-warning);
}

.color-danger {
  color: var(--color-danger);
}

.color-info {
  color: var(--color-info);
}

.bg-white {
  background-color: #fff !important;
}

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

.card-shadow {
  filter: drop-shadow(0px 2px 4px rgba(33, 76, 217, 0.15));
}

.bottom-shadow {
  filter: drop-shadow(0px 2px 4px rgba(33, 76, 217, 0.1));
}

.hr {
  display: block;
  box-sizing: border-box;
  height: 0;
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--color-grey3);
  margin: 0;
}

.border-box {
  box-sizing: border-box;
}