existing-simulations.component.scss

@import "../../../@theme/styles/themes.scss";
@include nb-install-component() {
  .rounded-border {
    padding: 4px;
    border: 1px solid #ddd;
    box-shadow: 0 0 1px #e1e1e1;
    border-radius: 6px;
  }
  #button-add-simulation {
    min-width: unset;
  }
  section.buttons {
    margin-top: 1rem;
    .fragment-1 {
      display: flex;
      justify-content: space-between;
      & > div {
        margin: 8px;
      }
    }

    .button-envelope {
      margin-top: 8px;
      margin-bottom: 8px;
    }

    .datepicker .inner {
      display: flex;
      align-items: flex-end;
      & > *:not(:last-child) {
        margin-right: 20px;
        nb-icon {
          margin-right: 5px;
        }
      }
    }

    .div-dss .inner {
      display: flex;
      align-items: flex-end;
      & > *:not(:last-child) {
        margin-right: 8px;
        nb-icon {
          margin-right: 5px;
        }
      }
      .half-width {
        margin: 0 4px 0 2px;
        flex: 1;
        span {
          width: 100%;
          display: inline-block;
          cursor: not-allowed;
        }
        nb-select {
          max-width: unset;
          width: 100%;
        }
      }
      .button-envelope {
        margin-bottom: 5px;
      }
    }

    @media screen and (max-width: 900px) {
      .fragment-1 {
        display: block;
        & .instructions-btn {
          display: block;
          button {
            width: 100%;
          }
        }
      }
      .button-envelope {
        display: flex;
        flex-direction: row;
        button {
          width: 100%;
        }
        .icon {
          margin-top: 0.5em;
        }
      }
      .datepicker .inner,
      .div-dss .inner {
        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch;
        & > *:not(:last-child) {
          margin-bottom: 8px;
        }
      }
    }
  }
  ::ng-deep .nb-card {
    margin-bottom: 0.5rem;
    .single-sim {
      display: flex;
      align-items: center;
      padding-top: 0.25rem;
      padding-bottom: 0.25rem;
      span.text-name {
        min-width: 280px;
        margin-right: 15px;
      }
      span.text-description {
        min-width: 220px;
        margin-right: 15px;
      }
      button {
        margin-right: 15px;
        min-width: 112px;
      }
      span.text-duration {
        min-width: 220px;
        flex-grow: 1;
      }
    }
    span.text-hint,
    span.text-description {
      font-weight: normal;
    }
    &.selected {
      font-weight: bold;
      box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.4),
        0 1px 1px 0 rgba(0, 0, 0, 0.28), 0 1px 3px 0 rgba(0, 0, 0, 0.24);
      border-color: #000;
      color: #fff;
      background: nb-theme(color-primary-500);
      button {
        background: #fff !important;
      }
      span.text-hint,
      span.text-description {
        font-weight: bold;
        color: #fff;
      }
    }
    .toggle-envelope {
      display: inline-block;
      width: 53px;
      height: 30px;
      position: relative;
      .toggle {
        display: block;
        position: absolute;
        top: -20px;
      }
    }
  }
  button,
  nb-select {
    min-width: 240px;
  }
}

@media screen and (max-width: 1000px) {
  .nb-card {
    margin-top: 0.75rem !important;
    .single-sim {
      display: flex;
      flex-wrap: wrap;
      > * {
        margin-bottom: 0.25rem;
      }
      span {
        width: 100%;
      }
      span.text-name {
        margin-right: 0px;
      }
      span.text-description {
        margin-right: 0px;
      }
      button {
        margin-right: 0px;
      }
      button {
        order: 4;
      }
    }
  }
}

.icon {
  margin-left: 0.25em;
  margin-right: 0.3em;
  position: relative;
  top: 0.2rem;
}

.icon-spin {
  animation-name: spin;
  animation-duration: 2000ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.selectImitation {
  appearance: button;
  background-color: #edf1f7;
  border-bottom-color: rgb(247, 249, 252);
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-left-color: rgb(247, 249, 252);
  border-left-style: solid;
  border-left-width: 1px;
  border-right-color: rgb(247, 249, 252);
  border-right-style: solid;
  border-right-width: 1px;
  border-top-color: rgb(247, 249, 252);
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  border-top-style: solid;
  border-top-width: 1px;
  box-sizing: border-box;
  color: #929bb3;
  cursor: normal;
  font-family: Roboto;
  font-size: 15px;
  font-weight: 400;
  line-height: 24px;
  margin-bottom: 0px;
  margin-left: 0px;
  margin-right: 0px;
  margin-top: 0px;
  min-width: 96px;
  overflow-x: hidden;
  overflow-y: hidden;
  padding-bottom: 7px;
  padding-left: 18px;
  padding-right: 35.2px;
  padding-top: 7px;
  position: relative;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 240px;
  &.active {
    color: rgb(34, 43, 69);
  }
}