@import '../../../themes/color';

.substance-conflict-container {
  .content {
    max-height: 36vw;
    overflow-y: scroll;
    overflow-x: hidden;
  }

  .conflict {
    background-color: $background-conflict-info;
    padding: 15px;
    display: flex;
    font-size: 14px;
    max-width: 570px;
    
    .icon {
      margin-right: 15px;
    }
  }

  .red-color {
    color: #952702;
  }

  .mat-card {
    margin-bottom: 0.5rem;
    padding: 5px;
    max-width: 570px;
    width: auto;
    background-color: #f5f5f5;

    .container-flex {
      display: flex;
      flex-direction: row;
      position: relative;
      top: 10px;
      width: 100%;

      .flex-child-element {
        flex-grow: 0;
        flex-shrink: 0;
        flex-basis: 50px;
        flex: 7;

        &:nth-child(2n) {
          flex-basis: 250px;
          flex: 70;
        }

        &.delete-icon {
          cursor: pointer;
          color: #757575;
        }
      }
    }
  }

  .button-view {
    border: 1px solid #e4e4e4;
    border-radius: 5px;
    padding: 10px;
    cursor: pointer !important;

    &.confirm {
      background-color: rgb(0, 25, 131);
      color: white;
    }

    &.cancel {
      background-color: #e4e4e4;
      color: #000000;
    }

    &:hover {
      outline: none;
    }

    min-width: 140px;
  }

}

::ng-deep .substance-conflict-popup {
  mat-card {
    max-width: initial !important;
  }
  .conflict {
    max-width: initial !important;
  }
}
