body { 
  overflow: hidden;
  background: #EAF5F7 }

main { height: 100% }

main > section { overflow-y: auto }

.navbar-dark, .navbar[data-bs-theme=dark] { --flex-navbar-color: rgba(255, 255, 255, 1) }

#auth .auth-cover {
  position: fixed;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1);
  mix-blend-mode: multiply }

#menu .nav-item { 
  /* font-size: 87.5%; */
  width:100% }

#menu > *:not(.navbar-nav) { 
  padding: 0 1rem
}

#menu .nav-link { 
  color: rgba(255,255,255,.75);
  font-weight: bold;
  padding: .25rem 1rem }

#menu .nav-divider {
  height: 1px;
  width: calc(100% + 2rem);
  background: rgba(255,255,255,.1);
  margin: .5rem -1rem }

#menu .nav-header {
  color: rgba(0,0,0,.875);
  text-transform: uppercase;
  font-weight: bold;
  font-size: 70%;
  margin: .25rem 0 }
  
#menu .dropdown-toggle { 
  display: flex;
  align-items: center;
  justify-content: space-between }

#menu :not(.dropend) > .dropdown-menu { 
  position: relative;
  top: 0;
  left: 0;
  border: 0;
  border-radius: 0 }

#menu .dropdown-menu .nav-link { 
  line-height: 1.25;
  font-size: 87.5%;
  font-weight: normal }

.dropend .dropdown-toggle::after { display: none }

#menu :not(.dropend) > .dropdown-menu .nav-link { 
  padding-left: 2.75rem;
}

#menu .dropend .dropdown-menu { 
  box-shadow: 0 0 50rem rgba(var(--flex-primary-rgb),.75);
  min-width: 350px }

#menu .dropend .dropdown-menu .scroll-y{ max-height: 70vh }
  
#menu .dropend .dropdown-menu .scroll-y::-webkit-scrollbar {
  width: .125rem;
}


#menu .dropend .dropdown-menu .nav-link { color: var(--flex-body) !important }

#menu .nav-link i { transition: all 300ms }

#menu .nav-link:hover, 
#menu .nav-link:focus {
  color: rgba(255,255,255,1);
} 

#menu .nav-link:hover i, 
#menu .nav-link:focus i {
  opacity: 1 !important;
}

/* 
#menu .dropdown-up .dropdown-menu {
  left: calc(100% + 1rem);
  bottom: 0;
  top: auto;
} */


@media(min-width:768px){
  #menu { 
    height: 100%;
    min-width: 200px }

  .modal-content { padding: 0 }
  .modal-content > * { padding: 1.5rem 2rem }
}

.modal-content { 
  box-shadow: 0 0 3rem 0  rgba(var(--flex-dark-rgb),0.15) !important;
  border: 0 }

.modal-backdrop.show { opacity: .25 }

.modal-body,
.modal-footer { background: var(--flex-light) }

.modal-content > div { border: 0 }

.modal .nav-pills {
  position:relative;
  z-index: 1 }

.nav-underline .nav-link a.opacity-50 { filter:grayscale(1) }

.nav-underline .nav-link a.opacity-50:hover { 
  opacity:1 !important;
  filter:grayscale(0) }

.nav-pills .nav-link.active,
.nav-pills .show>.nav-link { background: var(--flex-dark) }

.nav-pills .nav-link { color: var(--flex-dark) }

.nav-underline .nav-link { 
  opacity: .75;
  color: currentColor }

.nav-underline .nav-link.active {  
  opacity: 1;
  font-weight: normal }

.btn-primary,
.btn-outline-primary:hover,
.btn-outline-secondary:hover { color: #FFF !important }

.btn-xs {
  padding: .125rem .25rem;
  font-size: 80% }

.btn.opacity-50:hover { opacity: 1 !important }
.btn.border-transparent { border-color: transparent !important }

.text-danger-hover:hover { color: var(--flex-danger) }

.table>:not(caption)>*>* { background: transparent !important }

thead th {
  font-size: 75%;
  text-transform: uppercase;
  opacity: .5;
  font-weight: normal }
  

tr > *:first-child { padding-left: 1rem }
tr > *:last-child { padding-right: 1rem }

.table-sm>:not(caption)>*>* { 
  white-space: nowrap; 
  padding: 0.485rem 0.75rem }

tr:last-child > * { border: 0 }

.shadow { box-shadow: 0 0 3rem 0  rgba(var(--flex-dark-rgb),0.15) !important }

.accordion-button:not(.collapsed) { 
  color: currentColor;
  background-color: transparent }

.accordion-button:not(.collapsed) .d-none { display: block !important }

.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 500,
  'GRAD' 0,
  'opsz' 24 }

.form-label { 
  opacity: .5;
  font-size: 87.5% }

@media(min-width:768px){
  .scroll-y   { 
    overflow-x: hidden;
    overflow-y: scroll } 
}

@media(max-width:767.98px){
  .table-responsive {
    overflow-x: visible;
  }
}

.table-responsive {
  padding-top: 1rem;
  margin-bottom: 1.5rem;
  border-radius: .5rem;
  box-shadow: var(--flex-box-shadow-sm) !important;
  background: #FFF;
}


.scroll-y-xs::-webkit-scrollbar { width: 2px } 

.error { color:red }

td.position-relative { z-index: 5 }

table tr:not(:hover) td.position-relative { z-index: 0 }

/* .accordion-button::after { margin-left: 0 } */

@media(max-width:767.98px){
  #btnAdd { 
    border-radius: 100%;
    padding: .25rem }

  .modal-content .nav.nav-underline {
    padding: 0 1rem;
    flex-wrap: nowrap;
    transition: all 500ms;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory } 

  .modal-content .nav.nav-underline .nav-link.active { scroll-snap-align: center }
    
  .modal-content .nav.nav-underline::-webkit-scrollbar { height: 0 } 
  
  .d-flex.flex-column.d-md-table-row { padding: .5rem  }

  .d-flex.flex-column.d-md-table-row:not(:last-child) { border-bottom: 1px solid rgba(0,0,0,.1)  }

  .d-flex.flex-column.d-md-table-row th,
  .d-flex.flex-column.d-md-table-row td {
    border: 0; 
    padding: 0 .25rem
  }

  .d-flex.flex-column.d-md-table-row .stretched-link:hover:after {
    border: .5rem solid rgba(var(--flex-link-hover-color-rgb),.085);
  }
}

.modal-content .nav.nav-underline .nav-item{
  white-space: nowrap;
} 

.btn,
.form-control:not(textarea),
.form-select:not([multiple]) {
  border-radius: var(--flex-border-radius-pill) !important;
}