ice-frontend-react-mobx/src/components/Groups/GroupCard/GroupCard.css

ICE Frontend REACT+MobX

.groupCard {
  .cardTitle {
    position: relative;
    .deviceToggle {
      position: absolute;
      right: 1.5rem;
      top: 3rem;
      input {
        .on {
          background: #fff !important;
        }
      }
    }
  }
  .groupData {
    padding: 0;
  }
  .cardData {
    padding-top: 0;
    .limits {
      border-top: 1px solid var(--border-light);
      padding: 1rem 0.5rem;
      display: flex;
      justify-content: space-between;
      .inputOutput {
        width: calc((90%/6) * 2);
        display: flex;
        justify-content: space-between;
        > * {
          width: 50%;
          align-items: center;
        }
      }
      .limitHolder {
        width: calc((90%/6) * 1);
        display: flex;
        justify-content: center;
        border-left: 1px solid var(--border-light);
        border-right: 1px solid var(--border-light);
      }
      .chargeDischarge {
        width: calc((90%/6) * 2);
        display: flex;
        justify-content: space-around;
      }
      .socHolder {
        width: 10%;
        justify-content: flex-end;
        border-left: 1px solid var(--border-light);
      }
    }
  }
}

.invertedToggle {
  .input {
    height: 0;
    opacity: 0;
    overflow: hidden;
    width: 0;
  }
}