/*=========================================================================================
    File Name: laravel-menu.scss
    Description: laravel Specific menu styles
    ----------------------------------------------------------------------------------------
    Item name: Vuexy  - Vuejs, HTML & Laravel Admin Dashboard Template
    Author: PIXINVENT
    Author URL: http://www.themeforest.net/user/pixinvent
==========================================================================================*/

/*========================================================
        DARK LAYOUT
=========================================================*/

body.vertical-layout.vertical-menu-modern .horizontal-menu-wrapper {
  display: none;
}

.horizontal-menu > .main-menu {
  display: none;
}

.horizontal-menu .fixed-top {
  left: 0;
}

html body.navbar-static .app-content .header-navbar {
  background: transparent;
  box-shadow: none !important;
}

@media (max-width: 575.98px) {
  body.vertical-layout:not(.horizontal-layout).navbar-floating .header-navbar {
    margin-left: 1.2rem;
    margin-right: 1.2rem;
  }
}

/* custom margins-paddings */
.mr-half {
  margin-right: 0.5rem !important;
}
.ml-half {
  margin-left: 0.5rem !important;
}
.mb-half {
  margin-bottom: 0.5rem !important;
}
.mt-half {
  margin-top: 0.5rem !important;
}
.my-half {
  margin: 0.5rem !important;
}
.mx-half {
  margin-left: 0.5rem !important;
  margin-right: 0.5rem !important;
}
.py-half {
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}
.px-half {
  padding-left: 0.5rem !important;
  padding-right: 0.5rem !important;
}
.pb-2r {
  padding-bottom: 2rem;
}

/* vue multiselect */
body.dark-layout .multiselect__tags,
body.dark-layout .multiselect__input,
body.dark-layout .multiselect__single,
body.dark-layout .multiselect__content-wrapper {
  background: #15171c !important;
  color: #9a9cae;
  border-color: #363843;
}

body.dark-layout .multiselect__option--selected {
  background: #363843 !important;
  color: #dbdfe9 !important;
}

/* multiselect */
body.dark-layout .dp__theme_light {
  --dp-background-color: #15171c;
  --dp-text-color: #fff;
  --dp-border-color: #363843;
}

/* custom font sizes */
.fs-10 {
  font-size: 10px !important;
}
.fs-12 {
  font-size: 12px !important;
}
.fs-13 {
  font-size: 13px !important;
}
.fs-14 {
  font-size: 14px !important;
}
.fs-16 {
  font-size: 16px !important;
}
.fs-18 {
  font-size: 18px !important;
}
.fs-20 {
  font-size: 20px !important;
}
.fs-28 {
  font-size: 28px !important;
}

td {
  font-size: 13px !important;
}

/* cursor pointer */
.c-pointer {
  cursor: pointer !important;
}

/* captcha reload button bg */
.recaptcha-reload {
  background: #f9f9f9 !important;
  text-align: right;
  padding-right: 1.5rem;
  border-radius: 0;
  width: 100%;
  border: none !important;
}
body.dark-layout .recaptcha-reload {
  background: #222222 !important;
}

/* table-inside-table */
.table-inside-table {
  background-color: transparent !important;
}
.table-inside-table td,
.table-inside-table th {
  padding: 1px 0 !important;
  border: none !important;
  background-color: transparent !important;
}

/* custom background colors */
.bg-lite {
  background: #eeeeee !important;
}
body.dark-layout .bg-lite {
  background: #222222 !important;
}

.bg-label-primary {
  background-color: color-mix(
    in sRGB,
    var(--white) 84%,
    var(--primary)
  ) !important;
  color: var(--primary) !important;
}
.bg-label-primary.bg-label-hover:hover {
  background-color: var(--primary) !important;
  color: var(--white) !important;
}
.bg-label-secondary {
  background-color: color-mix(
    in sRGB,
    var(--white) 84%,
    var(--secondary)
  ) !important;
  color: var(--secondary) !important;
}
.bg-label-secondary.bg-label-hover:hover {
  background-color: var(--secondary) !important;
  color: var(--white) !important;
}
.bg-label-success {
  background-color: color-mix(
    in sRGB,
    var(--white) 84%,
    var(--success)
  ) !important;
  color: var(--success) !important;
}
.bg-label-success.bg-label-hover:hover {
  background-color: var(--success) !important;
  color: var(--white) !important;
}
.bg-label-info {
  background-color: color-mix(
    in sRGB,
    var(--white) 84%,
    var(--info)
  ) !important;
  color: var(--info) !important;
}
.bg-label-info.bg-label-hover:hover {
  background-color: var(--info) !important;
  color: var(--white) !important;
}
.bg-label-warning {
  background-color: color-mix(
    in sRGB,
    var(--white) 84%,
    var(--warning)
  ) !important;
  color: var(--warning) !important;
}
.bg-label-warning.bg-label-hover:hover {
  background-color: var(--warning) !important;
  color: var(--white) !important;
}
.bg-label-danger {
  background-color: color-mix(
    in sRGB,
    var(--white) 84%,
    var(--danger)
  ) !important;
  color: var(--danger) !important;
}
.bg-label-danger.bg-label-hover:hover {
  background-color: var(--danger) !important;
  color: var(--white) !important;
}
.bg-label-light {
  background-color: color-mix(
    in sRGB,
    var(--white) 84%,
    var(--light)
  ) !important;
  color: RGBA(#000, 84%) !important;
}
.bg-label-light.bg-label-hover:hover {
  background-color: var(--light) !important;
  color: var(--white) !important;
}
.bg-label-dark {
  background-color: color-mix(
    in sRGB,
    var(--white) 84%,
    var(--dark)
  ) !important;
  color: var(--dark) !important;
}
.bg-label-dark.bg-label-hover:hover {
  background-color: var(--dark) !important;
  color: var(--white) !important;
}
.bg-label-gray {
  background-color: color-mix(
    in sRGB,
    var(--white) 84%,
    var(--gray)
  ) !important;
  color: var(--gray) !important;
}
.bg-label-gray.bg-label-hover:hover {
  background-color: var(--gray) !important;
  color: var(--white) !important;
}

/* breadcrumb */
.breadcrumb {
  font-size: 12px;
  padding: 0.2rem 0 0.2rem 1rem !important;
}

/* custom zoom */
@media only screen and (min-width: 720px) and (max-width: 1600px) {
  .content-app {
    zoom: 90%;
  }
}

/* table fixed head */
.table-fix-head {
  overflow: auto;
}
.table-fix-head thead th {
  position: sticky;
  top: 0;
  z-index: 1;
}