@lmlc-color: #e2e2e2;
@lmhc-color: #ddf8ab;
@hmlc-color: #f3e098;
@hmhc-color: #ffbbbb;

.provis-container {
  height: 320px;
  color: #303133;

  .lower-level {
    .lower-level {
      background-color: @lmlc-color;

      .ganta {
        top: 4px;
        left: 4px;
      }
    }

    .higher-level {
      background-color: @lmhc-color;

      .ganta {
        top: 4px;
        right: 4px;
      }
    }
  }

  .higher-level {
    .lower-level {
      background-color: @hmlc-color;

      .ganta {
        left: 4px;
        bottom: 4px;
      }
    }

    .higher-level {
      background-color: @hmhc-color;

      .ganta {
        right: 4px;
        bottom: 4px;
      }
    }
  }

  .critshot {
    float: left;
    height: 100%;
    margin: 2px;
    border-radius: 4px;
    border: 2px solid #c0c4cc;
    box-sizing: border-box;
    transition: all 0.4s;
    position: relative;

    &:hover,
    &.big {
      border-color: #fff;
      box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.15);

      .ganta {
        opacity: 1;
      }
    }
  }

  .ganta {
    z-index: 1;
    position: absolute;
    opacity: 0;
    padding: 4px 8px;
    background: #fafafa;
    border-radius: 4px;
    border: 1px solid #909399;

    .title {
      height: 17px;
      color: #606c80;
      font-size: 0.85rem;
      white-space: nowrap;
    }

    .value {
      font-size: 1.8rem;
    }
  }
}
