.card {
  margin-top: 0;

  flex: 1;
  display: flex;
  flex-direction: column;
}

clr-tree-node button {
  white-space: nowrap;
}

.toggle-switch input[type=checkbox]:checked+label:before {
    border-color: #314351;
    background-color: #314351!important;
    transition: .15s ease-in;
    transition-property: border-color,background-color;
}

.header-row {
  .title-col {
    display: flex;
    align-items: center;
  }
  .options-col {
    display: flex;
    justify-content: flex-end;
  }
}

.sw {
  margin: 1rem 0rem 0.5rem 1rem;
}

.infoBar {
  margin-top:10px;
  background: #495967;
  color: white;
  text-align:center;
  padding: 3px;
  font-size: 16px;
}

.filterSide {
  margin-top: 26px;
  margin-bottom: 19px;
}

.options-dropdown {
  ::ng-deep {
    clr-icon {
      margin-right: 5px;
    }
  }
}

.viewerTitle {
  text-align:center;
  margin-bottom: 15px;
}

.dropdown-menu {
  width: 180px;
  margin-top: -18px;
  padding: 0;
}

.dropdown-menu .btn {
  width: 100%;
  text-transform: none;
}

.cardFlex {
  display:flex;
  justify-content: center
}

.noData {
  display:flex;
  justify-content:center;
  flex-direction:column;
  align-items: center;
  flex: 1;
}


.filterBtn {
  display: flex;
  justify-content: flex-end;
}

.editBtn {
  display: flex;
  justify-content: flex-start;
}

.btnView{
  margin: 0px!important;
}

.content-area {
  padding: 0.5rem !important;

  display: flex;
  flex-direction: column;
}

.download-select {
  ::ng-deep {
    .clr-select-wrapper {
      max-height: unset !important;
    }
  }
}

.refresh-table {
  cursor: pointer;
  margin-left: 5px;
}

.libinfo {
  padding: 10px 20px;
  overflow: auto;
}

hot-table {
  ::ng-deep {
    .primaryKeyHeaderStyle {
      background: #306b006e;
    }
  }
}

.no-table-selected-info {
  background: none;
  display: flex;
  align-items: center;
  flex-direction: column;
}

.web-query {
  max-height: 35vh;

  .web-query-text {
    min-height: 100px;
    max-height: 100px;
  }
}

// FIXME
// Let's leave it here for a reference if there
// is an issue with viewboxes/filter modal overlaying
// we will remove it if no issues found
// .filter-modal {
//   z-index: 1210;
// }

@media screen and (max-width: 768px) {
  .filterBtn {
    display: flex;
    justify-content: center;
  }

  .editBtn {
    display: flex;
    justify-content: center;
  }
}

@media (min-width: 576px) {
  .row {
      margin-right: 0rem;
      margin-left: 0rem;
  }
}