currency.component.scss

.block {
  width: 700px;
  background: green;
  color: #ffffff;

  .header {
    padding: 15px;

    .difference,
    .average {
      font-size: 28px;
      font-weight: bold;

      .big {
        font-size: 40px;
      }
    }

    .ticks {
      font-size: 19px;
      text-align: center;
      user-select: none;

      .title {
        display: block;
        margin-bottom: 5px;
        font-size: 11px;
      }

      .value {
        text-decoration: underline;
      }

      .toggle {
        margin: 5px;
        cursor: pointer;
      }
    }
  }

  .row {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}

.ngx-charts {
  width: 700px;
  background: green;

  .line-chart.chart {
    fill: #ffffff;
  }
}

.ng-select {
  width: 110px;
  font-size: 20px;

  .ng-select-container {
    &:after {
      border-color: #ffffff;
    }

    .ng-value-container {
      cursor: pointer;
      color: #ffffff;
    }

    .ng-arrow-wrapper {
      bottom: 11px !important;

      .ng-arrow {
        color: #ffffff;
      }
    }

  }

  .ng-dropdown-panel {
    left: 0;
    overflow: hidden;
    border-bottom: 3px solid #ffffff;
    background-color: #fff;
    box-shadow: 0 1px 10px 0 rgba(0, 0, 0, .27);
    text-align: left;
    cursor: pointer;

    .ng-dropdown-panel-items {
      max-height: 200px;
      margin: 0;
      padding: 0;
      line-height: 15px;
      font-size: 16px;


      .ng-option {
        padding: 0 10px;
        color: #333333;

        &:hover {
          background: #f2f2f2;
          color: #000000;
        }
      }

      .ng-optgroup {
        margin: 0 6px 0 15px;
        padding: 14px 0 10px;
        border-bottom: solid 1px #e5e5e5;
        color: #4d4d4e;
        font-weight: 700;
        white-space: normal;
      }

      .ng-optgroup:first-child {
        padding-top: 0;
      }
    }
  }

  &.ng-select-focused {
    .ng-select-container {
      &:after {
        border-color: #ffffff;
      }

      .ng-value-container {
        color: #ffffff;
      }

      .ng-arrow-wrapper .ng-arrow {
        color: #ffffff;
      }
    }
  }
}

.red-5 {
  background: #9E1C00;

  .ngx-charts {
    background: #9E1C00;
  }
}

.red-45 {
  background: #B21F00;

  .ngx-charts {
    background: #B21F00;
  }
}

.red-4 {
  background: #D12400;

  .ngx-charts {
    background: #D12400;
  }
}

.red-35 {
  background: #FA2B00;

  .ngx-charts {
    background: #FA2B00;
  }
}

.red-3 {
  background: #FF3E16;

  .ngx-charts {
    background: #FF3E16;
  }
}

.red-25 {
  background: #FF5936;

  .ngx-charts {
    background: #FF5936;
  }
}

.red-2 {
  background: #FF6949;

  .ngx-charts {
    background: #FF6949;
  }
}

.red-15 {
  background: #FF7D61;

  .ngx-charts {
    background: #FF7D61;
  }
}

.red-1 {
  background: #A22B2B;

  .ngx-charts {
    background: #A22B2B;
  }
}

.red-05 {
  background: #BF3232;

  .ngx-charts {
    background: #BF3232;
  }
}

.red-0 {
  background: #CD0F0F;

  .ngx-charts {
    background: #CD0F0F;
  }
}

.green-5 {
  background: #007D17;

  .ngx-charts {
    background: #007D17;
  }
}

.green-45 {
  background: #00991C;

  .ngx-charts {
    background: #00991C;
  }
}

.green-4 {
  background: #00AD20;

  .ngx-charts {
    background: #00AD20;
  }
}

.green-35 {
  background: #00C625;

  .ngx-charts {
    background: #00C625;
  }
}

.green-3 {
  background: #01DC2A;

  .ngx-charts {
    background: #01DC2A;
  }
}

.green-25 {
  background: #00FC2F;

  .ngx-charts {
    background: #00FC2F;
  }
}

.green-2 {
  background: #1FFF49;

  .ngx-charts {
    background: #1FFF49;
  }
}

.green-15 {
  background: #34FF5A;

  .ngx-charts {
    background: #34FF5A;
  }
}

.green-1 {
  background: #0FD014;

  .ngx-charts {
    background: #0FD014;
  }
}

.green-05 {
  background: #0CAD10;

  .ngx-charts {
    background: #0CAD10;
  }
}

.green-55 {
  background: #01430E;

  .ngx-charts {
    background: #01430E;
  }
}