:root {
  --vs-border-color: #e2e5ec !important;
  --color-app-background: #f8f8f8;
  --color-app-background-secondary: white;
  --color-background-primary: white;
  --color-background-secondary: #eef1f1;
  --color-background-faded: #f1f0f5;
  --color-border-primary: #dfdde6;
  --color-border-secondary: #a6b0bb;
  --color-border-faded: #c5cbd7;
  --color-text-primary: #2c3e50;
  --color-text-secondary: rgba(44, 62, 80, 0.65);
  --color-text-faded: rgba(44, 62, 80, 0.4);

  --color-brand-border: rgb(236 0 140);
  --color-brand-light: #ff2aa8;
  --color-brand-dark: #c80077;
  --color-brand-rgb: 236, 0, 140;
  --color-primary: rgb(48 81 255);
  --color-primary-border: rgb(48 81 255);
  --color-primary-light: #546fff;
  --color-primary-dark: #0c33ff;
  --color-primary-rgb: 48, 81, 255;
  --color-success: rgb(40 175 96);
  --color-success-border: rgb(40 175 96);
  --color-success-light: #2fcc70;
  --color-success-dark: #219250;
  --color-success-rgb: 40, 175, 96;
  --color-warning: rgb(242 152 74);
  --color-warning-border: rgb(242 152 74);
  --color-warning-light: #f4ab6b;
  --color-warning-dark: #f08529;
  --color-warning-rgb: 242, 152, 74;
  --color-danger: rgb(236 95 95);
  --color-danger-border: rgb(236 95 95);
  --color-danger-light: #f07f7f;
  --color-danger-dark: #e83f3f;
  --color-danger-rgb: 236, 95, 95;
  --color-black: rgb(19 19 19);
  --color-black-border: rgb(19 19 19);
  --color-black-light: #252525;
  --color-black-dark: #010101;
  --color-black-rgb: 19, 19, 19;
  --color-white: rgb(255 255 255);
  --color-white-border: rgb(255 255 255);
  --color-white-light: white;
  --color-white-dark: #ededed;
  --color-white-rgb: 255, 255, 255;
}

#app .app-preloader {
  width: 100vw;
  height: 100vh;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#app .app-preloader img.q-logo {
  /* width: 200px; */
  height: 50px;
  margin-bottom: 2rem;
}

/* fa override */
.fal,
.far {
  font-family: 'Font Awesome 5 Pro' !important;
}

.the-loader {
  display: inline-block;
  width: 50px;
  height: 50px;
  border: 3px solid rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  border-top-color: #ec008c;
  animation: spin 0.85s ease-in-out infinite;
  -webkit-animation: spin 0.85s ease-in-out infinite;
}

@keyframes spin {
  to {
    -webkit-transform: rotate(360deg);
  }
}

/* color overrides */

body {
  background-color: var(--color-app-background);
  color: var(--color-text-primary);
}
small {
  color: var(--color-text-secondary);
  font-style: italic;
}

.pre-wrap {
  white-space: pre-wrap;
}

.kt-portlet .kt-portlet__head .kt-portlet__head-label .kt-portlet__head-title {
  color: var(--color-text-primary);
}

/* slide-fade */
.slide-fade-enter-active {
  transition: all 0.15s ease-out;
}

.slide-fade-leave-active {
  transition: all 0.15s cubic-bezier(1, 0.5, 0.8, 1);
}

.slide-fade-enter-from,
.slide-fade-leave-to {
  transform: translateX(20px);
  opacity: 0;
}

/* fade */

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

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

/* list transition */
.list-enter-active,
.list-leave-active,
.list-move {
  transition: 500ms cubic-bezier(0.59, 0.12, 0.34, 0.95);
  transition-property: opacity, transform;
}

.list-enter {
  opacity: 0 !important;
  transform: translateX(50px) scaleY(0.5);
}

.list-enter-to {
  opacity: 1 !important;
  transform: translateX(0) scaleY(1);
}

.list-leave-active {
  position: absolute;
}

.list-leave-to {
  opacity: 0;
  transform: scaleY(0);
  transform-origin: center top;
}

/* btn */
.btn:disabled,
button.btn.btn-label-primary:disabled,
button.btn.btn-label-warning:disabled,
button.btn.btn-label-danger:disabled,
button.btn.btn-label-success:disabled,
button.btn.btn-label-info:disabled {
  cursor: not-allowed !important;
}
.btn {
  min-width: fit-content;
}

.btn-text {
  padding-top: 0;
  padding-bottom: 0;
}

.btn-reload {
  color: var(--color-text-secondary);
}

.header-sides .btn-reload {
  color: #999;
}

.btn.btn-xs [class^='fa-'],
.btn.btn-xs [class*=' fa-'] {
  font-size: inherit;
}

/* form inputs */
/* input.form-control {
  height: 2.5rem !important;
} */

/* v-select */
.vs__dropdown-toggle {
  /* the same as inputs */
  height: calc(1.5em + 1.3rem + 2px);
}
.vs__search::placeholder,
.vs__search:focus::placeholder {
  color: var(--color-text-secondary) !important;
}

/* checkbox */
.kt-checkbox.kt-checkbox--solid > span:after {
  border-color: var(--color-primary);
}

/* swal */
.swal-button {
  min-width: 100px;
}