igor-starostenko/report_factory-web

.scenario {
  margin-top: 1.5rem;
  background-color: grey;
  font-size: 1.2em;
  color: rgba(0, 0, 0, 0.6);
  padding: 1rem;
  border-radius: 1.5rem;
  border: 1px solid #dddddd;
  box-shadow: 1px 1px 4px 0px rgba(35, 41, 51, 0.2);
}

.scenario:hover {
  border: 1px solid rgba(0, 0, 0, 0.3);
  color: rgba(0, 0, 0, 0.8);
  cursor: pointer;
}

.scenario > .collapse {
  font-size: 1.0em;
}

.passedScenario {
  background-color: rgba(45, 243, 129, 0.1);
}

.failedScenario {
  background-color: rgba(243, 129, 45, 0.1);
}

.pendingScenario {
  background-color: rgba(227, 239, 59, 0.1);
}

.scenarioExtendedDetails {
  display: grid;
  grid-gap: 0.5em;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 24px 118px;
  margin-bottom: 5px;
}

.scenarioExtendedDetails>.scenarioDetailsRow {
  grid-column: 1 / -1;
}

.projectScenariosExtendedDetails {
  display: grid;
  grid-gap: 0.5em;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 118px;
  margin-bottom: 5px;
}

.scenarioSuccessChart {
  grid-column: 1 / 4;
  position: relative;
}

.scenarioPrimaryDetails {
  grid-column: 4 / 8;
  height: 100%;
  position: relative;
}

.scenarioSecondaryDetails {
  grid-column: 8 / -1;
  height: 100%;
  position: relative;
}

.loadingScenario {
  margin-top: 4%;
  margin-bottom: 4%;
}

@media only screen and (max-width: 767px) {
  .scenario {
    word-break: break-all;
    hyphens: auto;
  }

  .projectScenariosExtendedDetails {
    grid-template-rows: 96px auto;
  }

  .scenarioSuccessChart {
    grid-column: 1 / 6;
  }

  .scenarioPrimaryDetails {
    grid-column: 6 / -1;
  }

  .scenarioSecondaryDetails {
    grid-column: 1 / -1;
  }

  .scenarioSecondaryDetails>div:not(:nth-child(1)) {
    display: none;
  }

  .loadingScenario {
    margin-top: 20%;
    margin-bottom: 20%;
  }
}