.toolbar-option {
  margin-left: 10px;
  margin-right: 10px;
}

$fontcolor: #676a6c;
.content {
  width: 100%;
  display: flex;
  padding-right: 0px !important;
  .grid-container,
  .filter-panel {
    .crud-table {
      margin-bottom: 0px;
      width: 100%;
    }
    .form {
      padding: 10px 20px 10px 20px;
    }
  }

  .filter-panel {
    margin-bottom: 10px;
  }
}

.grid-ibox-content {
  width: 100%;
}

.btn-group {
  .btn {
    font-size: 10px;
  }
}

.td-view {
  cursor: auto !important;
}

.mat-row-auth:hover {
  background-color: #f8f9fa;
  cursor: pointer !important;
}

.spinner-container {
  height: 100%;
  width: 100%;
  padding-top: 50px;
  position: fixed;
}
.spinner-container {
  height: 100%;
  width: 100%;
  padding-top: 50px;
  position: fixed;
}

.spinner-container mat-spinner {
  margin: -10px auto 0 auto;
}

td {
  vertical-align: middle !important;
  color: $fontcolor;
  font-size: 12px;
}
th {
  vertical-align: middle !important;
}
tr.mat-header-row {
  height: 50px !important;
}

tr.mat-footer-row,
tr.mat-row {
  height: 40px !important;
}

.table-toolbar {
  right: 10px;
  top: 10px;
  button {
    font-size: 12px;
  }
}

.status-button-bar {
  button {
    font-size: 16px;
  }
  padding-top: 8px;
  padding-left: 15px;
}

.mat-raised-button {
  padding: 0px 10px;
}

.icon-centered-button span.mat-button-wrapper {
  display: flex;
}

.icon-centered-button mat-icon {
  font-size: 15px;
  padding-top: 2px;
}

::ng-deep .mat-sort-header-arrow {
  visibility: hidden;
}

::ng-deep .mat-sort-header-button {
  .mat-icon {
    padding-left: 10px;
    font-size: 12px;
    padding-top: 5px;
  }
}

th {
  background: rgb(242, 242, 242);
}

tr.example-detail-row {
  height: 0 !important;
}

tr.example-element-row:not(.example-expanded-row):hover {
  background: #dedede;
  cursor: pointer;
}

tr.example-element-row:not(.example-expanded-row):active {
  background: #efefef;
}

.example-element-row td {
  border-bottom-width: 0;
}

.example-element-detail {
  overflow: hidden;
  display: flex;
}

.example-detail-row td {
  padding-top: 0px;
  padding-bottom: 0px;
  border: none !important;
  background-color: #f2f2f2;
}

i.state {
  font-size: 1.3em;
}

i.fa-key.pull-left {
  color: rgba(128, 128, 128, 0.33);
  margin-right: 6px;
}

//////

table {
  width: 100%;
}

tr.mat-header-row {
  height: 25px;
}

tr.mat-footer-row,
tr.mat-row {
  height: 40px;
}

.button-grid {
  margin: 2px 5px;
  mat-icon {
    padding-top: 2px;
  }
}

.btn-header-new {
  margin-top: -4px;
}

.btn-grid-filter {
  height: 36px;
  width: 85px;
  padding-left: 0px;
  padding-top: 2px;
}

.mat-row:hover {
  cursor: pointer;
  background-color: #f8f9fa;
}

.spinner-container {
  height: 100%;
  width: 100%;
  padding-top: 50px;
  position: fixed;
}

.spinner-container mat-spinner {
  margin: -10px auto 0 auto;
}

.mat-raised-button {
  padding: 0px 10px;
}

.icon-centered-button span.mat-button-wrapper {
  display: flex;
}

.icon-centered-button mat-icon {
  font-size: 15px;
  padding-top: 2px;
}

.ibox-content {
  padding-right: 0px;
}

.content {
  width: 100%;
  display: flex;
  padding-right: 0px !important;
}

.grid-ibox-content {
  width: 100%;
}

.avatar {
  vertical-align: middle;
  width: 35px;
  height: 35px;
  border-radius: 50%;
}

::ng-deep .mat-menu-panel {
  overflow: hidden !important;
}

.th-avatar {
  width: 130px;
}

::ng-deep .text-right > .mat-sort-header-container {
  justify-content: flex-end !important;
}
