// default
.app-container .layout-container.layout-screen .view-container,
.app-container .layout-container.layout-default .view-container {
  .title-container {
    //background: $light;
    margin-bottom: 1rem;
  }
  .form-container {
    //background: $light;
    margin-bottom: 1rem;
  }
  .condition-container {
    //background: $light;
    margin-bottom: 1rem;
    .card-body {
      padding: 1.25rem 1.25rem 0 1.25rem;
    }
  }
  .grid-container {
    //background: $light;
    margin-bottom: 1rem;
    .actions-fold {
      cursor: pointer;
      button {
        margin: 0.2rem;
        overflow: hidden;
        max-width: 100%;
        text-overflow: ellipsis;
      }
      .actions-bar {
        font-size: 1rem;
      }
      .actions-btn-group {
        display: none;
        background: $light;
        border: 1px solid $gray-200;
        padding: 0.3rem;
        margin: 0 1rem;
      }
      &:hover {
        color: $primary;
        .actions-btn-group {
          display: flex;
          flex-direction: column;
          -webkit-box-pack: center !important;
          -ms-flex-pack: center !important;
          justify-content: center !important;
        }
      }
    }
  }
}

// modal
.component-container {
  &.loading-component {
    .modal-content {
      background: transparent !important;
      border: 1px solid transparent !important;
      .modal-header {
        display: none;
      }
      .modal-body {
        text-align: center;
        vertical-align: middle;
      }
      .modal-footer {
        display: none;
      }
    }
  }
}

// utils
.cursor-pointer {
  cursor: pointer;
}

.w-10 {
  width: 10% !important;
}

.w-15 {
  width: 15% !important;
}

.w-20 {
  width: 20% !important;
}

.w-30 {
  width: 30% !important;
}

.w-33 {
  width: 33% !important;
}

.w-40 {
  width: 40% !important;
}

.w-60 {
  width: 60% !important;
}

.w-70 {
  width: 70% !important;
}

.w-80 {
  width: 80% !important;
}

.w-90 {
  width: 90% !important;
}