.table-btn-new {background-color:#62CE7E !important; border-color:#5BC15A !important}
.table-btn-new:hover {background-color:#61C160 !important; border-color:#4FAD4E !important}
.table-btn-update {background-color:#EFB56E !important; border-color:#D8A96F !important}
.table-btn-update:hover {background-color:#E0A864 !important; border-color:#C1955E !important}
.table-btn-delete {background-color:#F04E4E !important; border-color:#EE3636 !important}
.table-btn-copy {  background-color:#5E87B0 !important; border-color:#5E87B0 !important; font-size: 10px }

.table-btn-delete:hover {background-color:#D64141 !important; border-color:#BD2727 !important}
.react-bs-table-pagination { margin: 0 0 15px 0; } /* bootstrap table pagination */
ul.pagination { margin: 0 0 15px 0; } /* bootstrap table pagination */

.tableSearchBox {
	position:absolute;
	left:0px;
	top:0px;
	background-color:#ffffff;
	border:1px solid black;
	border-radius:5px;
}

#stv-dave-multi-select input{
  margin-top: 13px !important;
}

.dialogButton {
  min-width:80px;
}

.rotate90 {
    -webkit-animation:spin 2s linear;
    -moz-animation:spin 2s linear;
    animation:spin 2s linear;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(90deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(90deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(90deg); transform:rotate(90deg); } }

.rsFormText {
  padding-top:7px;
}

.no-close .ui-dialog-titlebar-close {
  display: none;
}

/* needed to fix jquery ui dialog zindex problem... */
.ui-dialog {
	z-index: 1000 !important;
};

textarea {
  resize:none;
}


.gui-form-date{
  background-image: url('/img/EventCalendar.png') !important;
  background-repeat: no-repeat !important;
  background-size: 20px 20px !important;
  background-position: center right 5px !important;

}
.gui-form-date::selection {
  background: transparent;
}
/* for notes in a datatable that needs wrapping */
.dataTable td span {
	max-width: 400px;
	display: inline-block;
	overflow: hidden;
}

[id^="radioBtn_"] .notActive {
	color: #3276b1;
	background-color: #fff;
}

/* for action buttons in forms */
.btn-action {
  color: #ffffff;
  background-color: #4b739a;
  border-color: #3c5c7b;
}
.btn-action:hover,
.btn-action:focus,
.btn-action:active,
.btn-action.active,
.open .dropdown-toggle.btn-action {
  color: #ffffff;
  background-color: #5e87b0;
  border-color: #507aa4;
}
.btn-action:active,
.btn-action.active,
.open .dropdown-toggle.btn-action {
  background-image: none;
}

/* lit up */
.btn-lit {
  color: #ffffff;
  background-color: #96ae60;
  border-color: #9db36a;
}
.btn-lit:hover,
.btn-lit:focus,
.btn-lit:active,
.btn-lit.active,
.open .dropdown-toggle.btn-lit {
  color: #ffffff;
  background-color: #a8bc7b;
  border-color: #7e954c;
}
.btn-lit:active,
.btn-lit.active,
.open .dropdown-toggle.btn-lit {
  background-image: none;
}

/* something wrong */
.btn-error {
  color: #ffffff;
  background-color: #d2322d;
  border-color: #d43f3a;
}
.btn-error:hover,
.btn-error:focus,
.btn-error:active,
.btn-error.active,
.open .dropdown-toggle.btn-error {
  color: #ffffff;
  background-color: #d9534f;
  border-color: #ac2925;
}
.btn-error:active,
.btn-error.active,
.open .dropdown-toggle.btn-error {
  background-image: none;
}

img.youtube {
	cursor: pointer;
}

table.ledger {
	background-color: #ffffcc;
}

.alignRight {
	text-align:right;
}

textarea {
	resize:none;
}

.no-close .ui-dialog-titlebar-close {
  display: none;
}


.card {
  margin-bottom: 1.5 * $spacer;

  // Cards with color accent
  @each $color, $value in $theme-colors {
    &.bg-#{$color} {
      border-color: darken($value, 12.5%);
      .card-header {
        background-color: darken($value, 3%);
        border-color: darken($value, 12.5%);
      }
    }
  }
}

.text-white .text-muted {
  color: rgba(255,255,255,.6) !important;
}

.card-header {

  .icon-bg {
    display: inline-body;
    padding: $card-spacer-y $card-spacer-x !important;
    margin-top: -$card-spacer-y;
    margin-right: $card-spacer-x;
    margin-bottom: -$card-spacer-y;
    margin-left: -$card-spacer-x;
    line-height: inherit;
    color: $card-icon-color;
    vertical-align: bottom;
    background: $card-icon-bg;
    border-right: $card-border-width solid $card-border-color;
  }

  .nav.nav-tabs {
    margin-top: -$card-spacer-y;
    margin-bottom: -$card-spacer-y;
    border-bottom: 0;

    .nav-item {
      border-top: 0;
    }

    .nav-link {
      padding: $card-spacer-y $card-spacer-x / 2;
      color: $text-muted;
      border-top: 0;

      &.active {
        color: $body-color;
        background: #fff;
      }
    }
  }

  &.card-header-inverse {
    color: #fff;
  }

  .btn {
    margin-top: - $input-btn-padding-y;
  }
  .btn-sm {
    margin-top: - $input-btn-padding-y-sm;
  }
  .btn-lg {
    margin-top: - $input-btn-padding-y-lg;
  }
}
//
.card-footer {

  ul {
    display: table;
    width: 100%;
    padding: 0;
    margin: 0;
    table-layout: fixed;

    li {
      display: table-cell;
      padding: 0 $card-spacer-x;
      text-align: center;
    }
  }
}

[class*="card-outline-"] {
  .card-body {
    background: #fff !important;
  }

  &.card-outline-top {
    border-top-width: 2px;
    border-right-color: $border-color;
    border-bottom-color: $border-color;
    border-left-color: $border-color;
  }
}

// Cards with color accent
@each $color, $value in $theme-colors {
  .card-accent-#{$color} {
    @include card-accent-variant($value);
  }
}

// Card Actions
.card-header {
  > i {
    margin-right: $spacer / 2;
  }
  .card-actions {
    position: absolute;
    top: 0;
    right: 0;
    //height: inherit;

    a, button {
      display: block;
      float: left;
      width: 50px;
      padding: $card-spacer-y 0;
      margin: 0 !important;
      color: $body-color;
      text-align: center;
      background: transparent;
      border: 0;
      border-left: 1px solid $border-color;
      box-shadow: 0;

      &:hover {
        text-decoration: none;
      }

      [class^="icon-"], [class*=" icon-"] {
        display: inline-body;
        vertical-align: middle;
      }

      i {
        display: inline-body;
        transition: .4s;
      }

      .r180 {
        transform: rotate(180deg);
      }
    }

    .input-group {
      width: 230px;
      margin: 6px;

      .input-group-addon {
        background: #fff;
      }

      input {
        border-left: 0;
      }
    }
  }
}

.card-full {
  margin-top: - $spacer;
  margin-right: - $grid-gutter-width / 2;
  margin-left: - $grid-gutter-width / 2;
  border: 0;
  border-bottom: $card-border-width solid $border-color;
}

@include media-breakpoint-up(sm) {
  .card-columns {

    &.cols-2 {
      column-count: 2;
    }
  }
}

.card {
  &.drag, .drag {
    cursor: move;
  }
}

.card-placeholder {
  background: rgba(0,0,0,.025);
  border: 1px dashed $gray-300;
}

// .social-box
.social-box {
  min-height: 160px;
  margin-bottom: 2 * $card-spacer-y;
  text-align: center;
  background: #fff;
  border: $card-border-width solid $card-border-color;
  @include border-radius($card-border-radius);

  i {
    display: block;
    margin: -1px -1px 0;
    font-size: 40px;
    line-height: 90px;
    background: $gray-200;

    @include border-radius($card-border-radius $card-border-radius 0 0);
  }

  .chart-wrapper {
    height: 90px;
    margin: -90px 0 0;

    canvas {
      width: 100% !important;
      height: 90px !important;
    }
  }

  ul {
    padding: 10px 0;
    list-style: none;


    li {
      display: block;
      float: left;
      width: 50%;

      &:first-child {
        border-right: 1px solid $border-color;
      }

      strong {
        display: block;
        font-size: 20px;
      }

      span {
        font-size: 10px;
        font-weight: 500;
        color: $border-color;
        text-transform: uppercase;
      }
    }
  }

  &.facebook {
    i {
      color: #fff;
      background: $facebook;
    }
  }

  &.twitter {
    i {
      color: #fff;
      background: $twitter;
    }
  }

  &.linkedin {
    i {
      color: #fff;
      background: $linkedin;
    }
  }

  &.google-plus {
    i {
      color: #fff;
      background: $google-plus;
    }
  }
}

.horizontal-bars {
  padding: 0;
  margin: 0;
  list-style: none;

  li {
    position: relative;
    height: 40px;
    line-height: 40px;
    vertical-align: middle;

    .title {
      width: 100px;
      font-size: 12px;
      font-weight: 600;
      color: $text-muted;
      vertical-align: middle;
    }

    .bars {
      position: absolute;
      top: 15px;
      width: 100%;
      padding-left: 100px;

      .progress:first-child {
        margin-bottom: 2px;
      }
    }

    &.legend {
      text-align: center;

      .badge {
        display: inline-block;
        width: 8px;
        height: 8px;
        padding: 0;
      }
    }

    &.divider {
      height: 40px;

      i {
        margin: 0 !important;
      }
    }
  }

  &.type-2 {

    li {
      overflow: hidden;

      i {
        display: inline-block;
        margin-right: $spacer;
        margin-left: 5px;
        font-size: 18px;
        line-height: 40px;
      }

      .title {
        display: inline-block;
        width: auto;
        margin-top: -9px;
        font-size: $font-size-base;
        font-weight: normal;
        line-height: 40px;
        color: $body-color;
      }

      .value {
        float: right;
        font-weight: 600;
      }

      .bars {
        position: absolute;
        top: auto;
        bottom: 0;
        padding: 0;
      }
    }
  }
}

.icons-list {
  padding: 0;
  margin: 0;
  list-style: none;

  li {
    position: relative;
    height: 40px;
    vertical-align: middle;

    i {
      display: block;
      float: left;
      width: 35px !important;
      height: 35px !important;
      margin: 2px;
      line-height: 35px !important;
      text-align: center;
    }

    .desc {
      height: 40px;
      margin-left: 50px;
      border-bottom: 1px solid $border-color;

      .title {
        padding: 2px 0 0;
        margin: 0;
      }
      small {
        display: block;
        margin-top: -4px;
        color: $text-muted;
      }
    }

    .value {
      position: absolute;
      top: 2px;
      right: 45px;
      text-align: right;

      strong {
        display: block;
        margin-top: -3px;
      }
    }

    .actions {
      position: absolute;
      top: -4px;
      right: 10px;
      width: 40px;
      height: 40px;
      line-height: 40px;
      text-align: center;

      i {
        float: none;
        width: auto;
        height: auto;
        padding: 0;
        margin: 0;
        line-height: normal;
      }
    }

    &.divider {
      height: 40px;

      i {
        width: auto;
        height: auto;
        margin: 2px 0 0;
        font-size: 18px;
      }
    }
  }
}

.btn-box-tool {
  padding: 5px;
  font-size: 12px;
  background: transparent;
  color: #97a0b3;
}
.open .btn-box-tool,
.btn-box-tool:hover {
  color: #606c84;
}
.btn-box-tool.btn:active {
  box-shadow: none;
}