/*
    ____                      _ _
   | __ ) _ __ __ _ _ __   __| (_)_ __   __ _
   |  _ \| '__/ _` | '_ \ / _` | | '_ \ / _` |
   | |_) | | | (_| | | | | (_| | | | | | (_| |
   |____/|_|  \__,_|_| |_|\__,_|_|_| |_|\__, |
                                        |___/
*/
/*

   __     ___    ____  ____
   \ \   / / \  |  _ \/ ___|
    \ \ / / _ \ | |_) \___ \
     \ V / ___ \|  _ < ___) |
      \_/_/   \_\_| \_\____/

*/
:root {
  --text-blue:  #225C88;
  --text-light: #7D8296;
  --text-white: #FFFFFF;
  --text-black: #000000; }

.yaxis-manager-item {
  position: relative;
  display: block;
  margin-bottom: -1px;
  background: var(--bg-light);
  border: 1px solid var(--text-main); }
  .yaxis-manager-item:first-child {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px; }
  .yaxis-manager-item:last-child {
    margin-bottom: 0;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px; }

.y-axis {
  padding: 0 2px;
  border-radius: 2px; }

.y-axis .col-xs-6:first-child {
  padding-left: 8px;
  padding-right: 2px; }

.y-axis .col-xs-6:last-child {
  padding-left: 2px;
  padding-right: 8px; }

.y-axis .y-axis-drag-container {
  position: relative;
  padding-left: 15px;
  border: 1px solid #f3f3f3;
  background: #fcfcfc;
  margin: 2px;
  border-radius: 2px; }

.y-axis .y-axis-drag-container:hover {
  cursor: move;
  background: #e6eff9; }

.y-axis .y-axis-drag-container > .y-axis-metric-color {
  position: absolute;
  left: 2px;
  top: 50%;
  margin-top: -5px;
  width: 10px;
  height: 9px; }

.y-axis .y-axis-bucket {
  padding: 5px; }

.y-axis-bucket.is-dragging {
  background: #e6eff9; }

.new-y-axis.is-dragging {
  background: #eef4fb; }

.new-y-axis {
  color: #4283d1;
  text-align: center;
  padding: 8px 5px; }