.background-secondary {
    background-color: var(--color-neutral-100);
  }
  
  [data-bs-theme="dark"] {
    & .background-secondary {
      background-color: var(--color-neutral-800);
    }
}

/* TABLE */

.table.table-bordered {
  border: 1px solid var(--color-neutral-200);
}
[data-bs-theme="dark"] {
  .table.table-bordered {
    border: 1px solid var(--color-neutral-700);
  }
}

.table>thead>tr>th>button {
  all:unset;
  display: flex !important;
  justify-content: space-between !important;
  width: 100% !important;
  cursor: pointer !important;
}
  
  /* HEADERS */
  h1,
  h2,
  h3,
  h4,
  h5 {
    font-family: 'Oswald', Arial, Helvetica, sans-serif;
  }
  
  h1,
  h2 {
    text-transform: uppercase;
    font-weight: bold;
    font-size: 1.25rem;
    color: var(--color-neutral-700);
  }
  
  [data-bs-theme="dark"] {
    & h1, h2 {
      color: var(--color-neutral-300);
    }
  }
  
  h2 a {
    color: var(--color-neutral-700);
    text-decoration: none;
  }
  
  [data-bs-theme="dark"] {
    & h2 a {
      color: var(--color-neutral-300);
    }
  }
  
  h3 {
    font-size: 1.25rem;
  }
  
  h6 {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    margin-bottom: .5rem;
  }

  
p {
  font-family:  Arial, Helvetica, sans-serif;
  text-transform: none;
}
  
  /* BUTTONS */
  button,
  .button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  input[type="reset"].primary {
    display: inline-block;
    cursor: pointer;
    background-color: var(--color-cw);
    color: var(--color-neutral-50);
    border: none;
    text-align: center;
    font-family: 'Oswald', Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    text-decoration: none;
    font-size: 1rem;
    line-height: 1.5rem;
    padding: .25rem 1.5rem;
    transition: all .25s ease;
  }
  
  input[type=file]::file-selector-button {
    cursor: pointer;
    background-color: var(--color-cw);
    color: var(--color-neutral-50);
    font-family: 'Oswald', Arial, Helvetica, sans-serif;
    line-height: 2rem;
    padding: .25rem 1.5rem;
    text-transform: uppercase;
    transition: all .25s ease;
  }
  
  button.secondary,
  .button.secondary,
  input[type="button"].secondary,
  input[type="submit"].secondary,
  input[type="reset"] {
    background-color: var(--color-neutral-600);
  }
  
  button.extra-padding,
  .button.extra-padding,
  input[type="button"].extra-padding,
  input[type="submit"].extra-padding {
    padding-left: 3rem;
    padding-right: 3rem;
    margin-top: 1rem;
  }
  
  button:hover,
  button:focus,
  .button:hover,
  .button:focus,
  input[type="button"]:hover,
  input[type="button"]:focus,
  input[type="submit"]:hover,
  input[type="submit"]:focus,
  input[type="reset"]:hover,
  input[type="reset"]:focus {
    color: var(--color-neutral-50);
    background-color: var(--color-neutral-500);
  }
  
  input[type=file]:hover::file-selector-button {
    background-color: var(--color-neutral-500) !important; 
  }
  
  button:disabled,
  button:disabled:hover,
  button:disabled:focus,
  button[disabled],
  button[disabled]:hover,
  button[disabled]:focus,
  button.disabled,
  button.disabled:hover,
  button.disabled:focus,
  .button.disabled,
  .button.disabled:hover,
  .button.disabled:focus,
  input[type="button"]:disabled,
  input[type="button"]:disabled:hover,
  input[type="button"]:disabled:focus,
  input[type="button"][disabled],
  input[type="button"][disabled]:hover,
  input[type="button"][disabled]:focus,
  input[type="button"].disabled,
  input[type="button"].disabled:hover,
  input[type="button"].disabled:focus,
  input[type="submit"]:disabled,
  input[type="submit"]:disabled:hover,
  input[type="submit"]:disabled:focus,
  input[type="submit"][disabled],
  input[type="submit"][disabled]:hover,
  input[type="submit"][disabled]:focus,
  input[type="submit"].disabled,
  input[type="submit"].disabled:hover,
  input[type="submit"].disabled:focus,
  input[type="reset"]:disabled,
  input[type="reset"]:disabled:hover,
  input[type="reset"]:disabled:focus,
  input[type="reset"][disabled],
  input[type="reset"][disabled]:hover,
  input[type="reset"][disabled]:focus,
  input[type="reset"].disabled,
  input[type="reset"].disabled:hover,
  input[type="reset"].disabled:focus {
    background-color: var(--color-neutral-700);
    cursor: not-allowed;
  }
  
button.paging {
  padding: 0 .5rem .25rem .5rem;
  margin-left: .5rem;
  font-size: 1.25rem;
  font-weight: bold;
  line-height: 1;
}
  
/* NAVIGATION */

/* LANDING NAVIGATION */
.externalLayout {
  #siteHeader {
    background-color: var(--color-neutral-950);
    color: var(--color-neutral-50);
    padding: 1rem 0;
    z-index: 999;
    padding-inline: 10% !important;
  }

  #siteHeader nav a,
  #siteHeader nav button {
    display: block;
    color: var(--color-neutral-50);
    font-size: 1rem;
    line-height: 1;
    font-family: 'Oswald', Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--color-neutral-50);
    font-weight: bold;
  }

  #siteHeader nav a:active,
  #siteHeader nav a.current-menu-item,
  #siteHeader nav a.current-menu-item-parent {
    color: var(--color-cw);
  }

  #siteHeader nav a:hover:not(.button),
  #siteHeader nav button:hover:not(.dropdown-toggle),
  #siteHeader nav a:active:not(.button),
  #siteHeader nav a:focus:not(.button) {
    color: var(--color-cw);
  }

  #siteHeader nav ul {
    list-style-type: none;
  }

  @media (min-width: 1199px) {
    nav {
      display: -webkit-box;
      display: -moz-box;
      display: -webkit-flexbox;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    }
    
    #siteHeader nav > ul > li {
      position: relative;
      display: inline-block;
      font-size: 1rem;
    }
  }
  /* MOBILE NAVIGATION */
  #mobileMenuToggle {
    float: right;
    clear: both;
    margin-left: auto;
    position: relative;
    min-width: 4rem;
    min-height: 4rem;
    background: transparent;
    border: none;
    outline: none;
    padding: 1rem;
    margin-right: -1rem;
    margin-bottom: 0;
  }

  #mobileMenuToggle span.bars-wrapper {
    display: block;
    float: right;
  }

  #mobileMenuToggle span.hamburger-bar {
    display: block;
    float: right;
    position: absolute;
    right: 0;
    clear: both;
    width: 2.25rem;
    height: .25rem;
    margin-bottom: .65em;
    position: relative;
    background: var(--color-neutral-200);
    border-radius: 3px;
    z-index: 1;
    -webkit-transform-origin: 4px 0px;
    transform-origin: 4px 0px;
    transition: background 0.5s cubic-bezier(0.77,0.2,0.05,1.0), opacity 0.55s ease, -webkit-transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
    transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0), background 0.5s cubic-bezier(0.77,0.2,0.05,1.0), opacity 0.55s ease;
    transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0), background 0.5s cubic-bezier(0.77,0.2,0.05,1.0), opacity 0.55s ease, -webkit-transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
  }

  #mobileMenuToggle:hover span.hamburger-bar,
  #mobileMenuToggle:focus span.hamburger-bar {
    background: var(--color-neutral-50);
  }

  #mobileMenuToggle span.hamburger-bar:nth-child(3) {
    margin-bottom: 0;
  }

  #mobileMenuToggle.open span.hamburger-bar {
    -webkit-transform: rotate(45deg) translate(-.1rem, -.95rem);
    transform: rotate(45deg) translate(-.75rem, -.35rem);
    position: absolute;
    right: 0;
  }

  #mobileMenuToggle.open span.hamburger-bar:nth-child(2) {
    display: none;
  }

  #mobileMenuToggle.open span.hamburger-bar:nth-child(3) {
    -webkit-transform: rotate(-45deg) translate(-.05rem, .65rem);
    transform: rotate(-45deg) translate(-.7rem, -.0em);
    position: absolute;
    right: 0;
  }
}

/* SITE NAVIGATION */
#siteIdentity {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flexbox;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  float: left;
  max-width: 80%;
}

#siteIdentity #logoLink {
  display: flex;
  width: 100%;
  height: 100%;
  padding: .5rem 0;
  color: var(--color-neutral-50);
  text-decoration: none;
  font-size: 1.25rem;
  font-family: 'Oswald', Arial, Helvetica, sans-serif;
}

#siteIdentity #logo,
#siteIdentity #logoText {
  background-color: transparent;
}

#siteIdentity #logo {
  width: 35%;
  height: 100%;
  padding: 4px;
  padding-right: 8px;
  font-weight: bold;
}

#siteIdentity #logoText {
  width: 45%;
  float: right;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flexbox;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding-left: 5%;
  border-left: .05rem solid var(--color-neutral-50);
  font-weight: 300;
}

#minifiedLogo {
  display: none;
    z-index: 905;
}

@media (min-width: 980px) {
  .minified #minifiedLogo {
    display: block;
  }
}

.externalLayout {
  @media (max-width: 1199px) {
    #siteHeader nav {
      -webkit-box-flex: 0 0 100%;
      -moz-box-flex: 0 0 100%;
      width: 100%;
      -webkit-flex: 0 0 100%;
      -ms-flex: 0 0 100%;
      flex: 0 0 100%;
      float: left;
      overflow: hidden;
    }
    
    #siteHeader nav li {
      width: 100%;
    }
  }
}
  

/* LANDING PAGE */
#hero {
  background-image: url("../../assets/img/landing/header.png");
  padding-bottom: 10% !important;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center top;
  > div {
    background-color: rgb(0,0,0, 0.5);
  }

  hr {
    color: var(--color-neutral-50);
    margin:0;
    opacity: 1;
  }
}

#landing a {
  color: var(--color-cw);

  &:hover{
    color: var(--color-info);
  }
}

@media (min-width: 768px) {
  #landing > div > div {
    width: 50%;
  }
}

/* News */

#news {
  background-color: var(--color-neutral-100);

  h2 {
      background-color: var(--color-neutral-600);
  }

  hr {
      border-color: var(--color-neutral-800);
  }
}

/* FAQ */

#FAQ {
  background-color: var(--color-neutral-100);

  h2 {
      background-color: var(--color-neutral-600);
  }

  button {
      border: 0;
      margin: 0;
      padding: 0;
      border-radius: 50%;
      width: calc(50% - 3rem);
  }

  @media (max-width: 768px) {
    button {
      width: calc(100% - 6rem);
    }
  }

  button i {
      transition: transform 0.3s;
  }

  button[aria-expanded="true"] i {
      transform: rotate(180deg);
  }

  hr {
      border-color: var(--color-neutral-800);
      margin: 0px;
  }
}

/* LAYOUT */
.layout {
  #header {
    display: flex;
  }

  .login-info * {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }

  &.minified .login-info a i:first-child {
    display: block !important;
  }

  @media (min-width: 980px) { 
      display: grid;
      grid-template-columns: 220px 1fr;
      grid-template-rows: 1fr auto;
      grid-template-areas:
          'sidebar main'
          'footer footer';
      
      &.minified {
        grid-template-columns: 45px 1fr;
      }

      aside {
          height: 100vh;
      }

      main {
          min-height: 100vh;
      }

      #header {
        display: inline-block;

      }

      &.minified #header {
        display: none;
      }

      #header .mobile {
          float: none;
          display: none;
      }

      .login-info {
        display: block;
      }
  }
  
  aside {
      grid-area: sidebar;
  }

  main {
      grid-area: main;
  }

  footer {
      grid-area: footer;
  }

  /* Use bootstrap icon with SmartAdmin */
  nav ul li.active>a:before {
    content: "\F22D";
    font-family: bootstrap-icons;
    right: -15px;
    color: var(--color-neutral-100);
  }

  &.minified .minifyme i::before {
    transform: rotate(180deg);
  }
}

/* FOOTER */
footer ul {
  list-style-type: square !important;
}

#footer {
  background-color: var(--color-neutral-700);

  .logo {
      width: 180px;
  }

  h4 {
    font-size: 1.25rem;
  }

  .nav-link{
      --bs-nav-link-color: var(--color-neutral-200);
      --bs-nav-link-hover-color: var(--color-neutral-500);
  }
}

/* MODAL */

.modal.fade {
  opacity: 1 !important;
}

/* ACCORDION */

.accordion button {
  margin:0;
}

/* TOASTS */

.toast.fade {
  opacity: 1 !important;
}

/* ALERTS */
.alert button{
  background-color: unset;
}

.alert.alert-secondary{
  color: var(--bs-alert-color);
}

/* PAGES */
hr {
    border-color: var(--color-cw);
}

/* DASHBOARD */
.dashboard {
    .metrics i:before {
        background-color: var(--color-cw);
        border-radius: 50%;
        padding: 20px;
    }

    .details {
        width: 64px;
        a {
        color: var(--color-cw);
        }
    }

    .modal{
        img {
            max-width: 100%;
        }        
    }
}

/* DROPDOWN */
.dropdown-menu {
  max-height: 50vh;
  overflow: auto;
  width: max-content;
}