/**********************************************
custom classes
**********************************************/

// fix full-screen bug
#app {
  height: 100%;
}
.content-wrapper {
  min-height: 90%;
}

// center vertically and horizontally
.content-centered {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
}

// vue-forms
.form-control-feedback + .has-error {
  color: #a94442;
}

.vf-field-touched {
  .form-control-feedback {
    top: 25px;
  }
}

.vf-field-touched {
  .input-group {
    .form-control-feedback {
      top: 15%;
    }
  }
}

.VuePassword + div {
  .glyphicon {
    right: 25px;
  }
}

.fade-enter-active, .fade-leave-active {
  transition: opacity 0.25s ease-out;
}

.fade-enter, .fade-leave-to {
  opacity: 0;
}

// custom buttons
.btn.outline {
  background: none;
  padding: 12px 22px;
}
.btn-primary.outline {
  border: 2px solid #0099cc;
  color: #0099cc;
}
.btn-primary.outline:hover, .btn-primary.outline:focus, .btn-primary.outline:active, .btn-primary.outline.active, .open > .dropdown-toggle.btn-primary {
  color: #33a6cc;
  border-color: #33a6cc;
}
.btn-primary.outline:active, .btn-primary.outline.active {
  border-color: #007299;
  color: #007299;
  box-shadow: none;
}


// flash/bootstrap alerts
// Basic Colors
$base-primary:          #3498db;    // Base primary color
$color-primary:         #2196f3;    // Primary color
$color-secondary:       #eeeeee;    // secondary color
$color-default:         #eeeeee;    // Default color
$color-success:         #5cb85c;    // Success color
$color-info:            #5bc0de;    // Info color
$color-yellow:          #f0ad4e;    // Warning color
$color-red:             #d9534f;    // Danger color

.flash-message .alert {
  padding: 12px;
  border:0;
  border-radius: 0px;
}

.flash-message .alert-warning {
  background-color: $color-yellow;
  border:0;
  color: white;
}

.flash-message .alert-success {
  background-color: $color-success;
  border:0;
  color: white;
}

.flash-message .alert-danger {
  background-color: $color-red;
  border:0;
  color: white;
}

.flash-message .alert-info {
  background-color: $color-info;
  border:0;
  color: white;
}

/**********************************************
vue-tables-2
**********************************************/
.VueTables__child-row-toggler {
  width:16px;
  height:16px;
  line-height: 16px;
  display: block;
  margin: auto;
  text-align: center;
}

.VueTables__child-row-toggler--closed::before {
  content: "+";
}

.VueTables__child-row-toggler--open::before  {
  content: "-";
}

.VueTables__search {
  input {
    margin-left: 10px;
  }
}

.VueTables__limit {
  label {
    margin-right: 10px;
  }
}

// table add button
.shift-add-left {
  position: absolute;
  right: 135px;
  z-index: 1000;
}
.add-item {
  position: absolute;
  right: 10px;
}

// profile images
.profile-user-img {
  padding: 0px;
  background-color: lightblue;
}
.user-panel .image img {
  border-radius: 50%;
  background-color: lightblue;
}
.user-image {
  background-color: lightblue;
}
.users-list>li img {
  background-color: lightblue;
}

// box customizations
.box-clear {
  -webkit-box-shadow: 0 0;
  -moz-box-shadow: 0 0;
  box-shadow: 0 0;
  margin: 0px;
}

/*
 * Component: Icon Button
 * -----------------
 */
.icon-btn {
  border-radius: 50%;
  height: 50%;
  padding-left: 3px;
  padding-right: 3px;
}
.icon-btn:active {
  -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  -moz-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}
.icon-btn:focus {
  outline: none;
}
.icon-btn:hover {
  cursor: pointer;
}
.icon-btn-default {
  color: #f4f4f4;
  color: #444;
  border-color: #ddd;
}
.icon-btn-default:hover,
.icon-btn-default:active,
.icon-btn-default.hover {
  color: #e7e7e7;
}
.icon-btn-primary {
  color: #3c8dbc;
  border-color: #367fa9;
}
.icon-btn-primary:hover,
.icon-btn-primary:active,
.icon-btn-primary.hover {
  color: #367fa9;
}
.icon-btn-success {
  color: #00a65a;
  border-color: #008d4c;
}
.icon-btn-success:hover,
.icon-btn-success:active,
.icon-btn-success.hover {
  color: #008d4c;
}
.icon-btn-info {
  color: #00c0ef;
  border-color: #00acd6;
}
.icon-btn-info:hover,
.icon-btn-info:active,
.icon-btn-info.hover {
  color: #00acd6;
}
.icon-btn-danger {
  color: #dd4b39;
  border-color: #d73925;
}
.icon-btn-danger:hover,
.icon-btn-danger:active,
.icon-btn-danger.hover {
  color: #d73925;
}
.icon-btn-warning {
  color: #f39c12;
  border-color: #e08e0b;
}
.icon-btn-warning:hover,
.icon-btn-warning:active,
.icon-btn-warning.hover {
  color: #e08e0b;
}
.icon-btn-outline {
  border: 1px solid #fff;
  background: transparent;
  color: #fff;
}
.icon-btn-outline:hover,
.icon-btn-outline:focus,
.icon-btn-outline:active {
  color: rgba(255, 255, 255, 0.7);
  border-color: rgba(255, 255, 255, 0.7);
}
.icon-btn-link {
  -webkit-box-shadow: none;
  box-shadow: none;
}
.icon-btn[class*='bg-']:hover {
  -webkit-box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.2);
}


/**********************************************
v-tooltips
**********************************************/
.tooltip {
  display: block !important;
  z-index: 10000;

  .tooltip-inner {
    background: black;
    color: white;
    border-radius: 16px;
    padding: 5px 10px 4px;
  }

  .tooltip-arrow {
    width: 0;
    height: 0;
    border-style: solid;
    position: absolute;
    margin: 5px;
    border-color: black;
    z-index: 1;
  }

  &[x-placement^="top"] {
    margin-bottom: 5px;

    .tooltip-arrow {
      border-width: 5px 5px 0 5px;
      border-left-color: transparent !important;
      border-right-color: transparent !important;
      border-bottom-color: transparent !important;
      bottom: -5px;
      left: calc(50% - 5px);
      margin-top: 0;
      margin-bottom: 0;
    }
  }

  &[x-placement^="bottom"] {
    margin-top: 5px;

    .tooltip-arrow {
      border-width: 0 5px 5px 5px;
      border-left-color: transparent !important;
      border-right-color: transparent !important;
      border-top-color: transparent !important;
      top: -5px;
      left: calc(50% - 5px);
      margin-top: 0;
      margin-bottom: 0;
    }
  }

  &[x-placement^="right"] {
    margin-left: 5px;

    .tooltip-arrow {
      border-width: 5px 5px 5px 0;
      border-left-color: transparent !important;
      border-top-color: transparent !important;
      border-bottom-color: transparent !important;
      left: -5px;
      top: calc(50% - 5px);
      margin-left: 0;
      margin-right: 0;
    }
  }

  &[x-placement^="left"] {
    margin-right: 5px;

    .tooltip-arrow {
      border-width: 5px 0 5px 5px;
      border-top-color: transparent !important;
      border-right-color: transparent !important;
      border-bottom-color: transparent !important;
      right: -5px;
      top: calc(50% - 5px);
      margin-left: 0;
      margin-right: 0;
    }
  }

  &[aria-hidden='true'] {
    visibility: hidden;
    opacity: 0;
    transition: opacity .15s, visibility .15s;
  }

  &[aria-hidden='false'] {
    visibility: visible;
    opacity: 1;
    transition: opacity .15s;
  }
}
