@import (reference) "../../css/variables";

.section-duration {
  display: flex;
  flex-direction: column;
  margin: auto;
  width: 100%;
  height: 100%;
  overflow-x: hidden;

  .section-title {
    font-size: 18px;
    margin-bottom: 10px;
  }
  .duration-widget-container {
    display: flex;
    flex-direction: column;
    flex:1;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;

    .duration-widget {
      display: flex;
      flex-direction: row;
      font-weight: 500;
      font-size: @font-size-header + 4;
      margin: 0;

      .icon-container {
        padding: 0;

        &.column {
          align-self: flex-start !important;
        }

        svg {
          fill: @brand-color-dark;
        }
      }

      .wrapper-table {
        width: 100%;
        text-align: center;
        line-height: 0.5;

        .time-unit {
          color: @font-color-base;
          font-weight: bold;
          font-size: @font-size-h5;
          display: inline-block;
        }
        .part-header, .time-unit {
          padding: 0 4px !important;
        }

        .colon {
          margin-top: -2px !important;
        }
      }
    }
  }
}