@import "https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic|Roboto+Mono:400,500|Material+Icons";

* {
  /* width */
  ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }

  /* Track */
  ::-webkit-scrollbar-track {
    background: #adf;
  }

  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: #adf;
    border-radius: 50vmin;
  }

  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background: #3f51b5;
  }
}

.page-container {
  background-color: #adf;
  border-radius: 0.25rem;
}

.page-selected {
  background-color: #adf;
  border-radius: 0.25rem 0.25rem 0 0;
}

.overflow-x {
  overflow-x: auto;
}

::ng-deep button:focus {
  outline: none;
}
::ng-deep button.mat-focus-indicator.mat-icon-button.mat-button-base:focus {
  outline: none;
}
::ng-deep mat-form-field {
  width: 100%;
}

::ng-deep input[type="number"]::-webkit-outer-spin-button,
::ng-deep input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
::ng-deep input[type="number"] {
  -moz-appearance: textfield;
}

::ng-deep .tooltip-cell-description {
  background: #7ad;
  font-size: 12px;
  display: block;
  white-space: pre-line;
}
::ng-deep .tooltip-error {
  background: #a00;
  font-size: 12px;
  display: block;
  white-space: pre-line;
}

::ng-deep .mat-step-icon {
  padding: 1rem !important;
  font-weight: 700 !important;
  font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol" !important;
  // background-color: #6c757d !important;
}

::ng-deep mat-horizontal-stepper.builder {
  .mat-horizontal-stepper-header-container {
    width: max-content;
    margin-left: auto;
    display: flex;
    > mat-step-header {
      margin-left: auto !important;
      &.mat-focus-indicator[ng-reflect-selected="true"] {
        background-color: #adf;
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
      }
    }
    // > .mat-stepper-horizontal-line {
    //     max-width: 10% !important;
    // }
  }
  .mat-horizontal-content-container {
    background-color: #adf;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
  }
}

::ng-deep mat-horizontal-stepper.mat-stepper-hidden .mat-horizontal-stepper-header-container {
  display: none !important;
}

::ng-deep .mat-step-label {
  font-weight: 700 !important;
  // color: #6c757d !important;
  width: 200px !important;
}
.text-overflow {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.drag-drop {
  display: flex;
  padding: 20px;
  > .controls-grid {
    width: 20%;
    margin: 0 25px 25px 0;
    display: inline-block;
    vertical-align: top;
    > .controls-list {
      // width: 500px;
      max-width: 100%;
      border: solid 1px #ccc;
      min-height: 60px;
      display: block;
      background: white;
      border-radius: 4px;
      overflow: hidden;
      &.cdk-drop-list-dragging .controls-box:not(.cdk-drag-placeholder) {
        transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
      }
      > .controls-box {
        padding: 20px 10px;
        border-bottom: solid 1px #ccc;
        color: rgba(0, 0, 0, 0.87);
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        box-sizing: border-box;
        cursor: move;
        background: white;
        font-size: 14px;
        &:last-child {
          border: none;
        }
      }
    }
  }

  .form-list-container {
    width: 100%;
    // margin: 0 25px 25px 0;
    display: inline-block;
    vertical-align: top;

    border-radius: 4px;

    .form-extra-button {
      min-height: 80px;
      height: 80px;
      &:not(.w-100) {
        max-width: calc(100% / 3);
        width: calc(100% / 3);
      }
      &.w-short {
        max-width: 20vmin;
        width: 20vmin;
      }
      border: solid 1px #ccc;
      flex-direction: row;
      background: white;
      border-bottom-left-radius: 4px;
      border-bottom-right-radius: 4px;
      overflow: hidden;
      display: flex !important;
      border-radius: 4px;
      button {
        color: #7ad;
      }
      svg,
      mat-icon {
        margin: auto;
        color: #7ad;
        fill: #7ad;
      }
    }

    .form-list-row {
      width: 100%;
      max-width: 100%;
      border: solid 1px #ccc;
      height: 60px;
      display: flex;
      flex-direction: row;
      background: white;
      // border-radius: 4px;
      overflow: hidden;
      transition: height 0.5s;
      margin-bottom: -1px;
      &.form-list-row-first {
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
      }
      &.form-list-row-last {
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px;
      }
      > .form-list-col {
        padding: 20px 10px;
        border-right: solid 1px #ccc;
        color: rgba(0, 0, 0, 0.87);
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        box-sizing: border-box;
        text-align: left;
        cursor: move;
        background: white;
        font-size: 14px;
        flex-grow: 1;
        flex-basis: 0;
        &:last-child {
          border: none;
        }
        .form-list-cell-colspan {
          height: 24px;
          width: 24px;
          font-size: 18px;
          vertical-align: top;
          text-align: center;
        }
      }
      &.cdk-drop-list-dragging {
        > .form-list-col:not(.cdk-drag-placeholder) {
          transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
        }
      }
      &.min-height-20 {
        transition: height 0.5s;
        height: 20px !important;
        // &:not(.cdk-drop-list-dragging) {
        // transition: height 0.5s;
        // height: 20px !important;
        // }
        // &.cdk-drop-list-dragging {
        // transition: height 0.5s;
        // height: 60px !important;
        // }
      }
    }
  }
}

div.cdk-drag.form-list-col,
div.cdk-drag.controls-box {
  padding: 20px 10px !important;
  // background-color: green;
}

.cdk-drag-preview {
  box-sizing: border-box;
  border-radius: 4px;
  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
}

.cdk-drag-placeholder {
  opacity: 0;
}

.cdk-drag-animating {
  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}

.cdk-drop-list-dragging {
  background: #ccc !important;
  outline-offset: -1px;
  outline: dashed 2px rgb(0, 112, 156) !important;
  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1) !important;
}