/* -------------------------------------------------------------------------- */
/*                                Falcon Button                               */
/* -------------------------------------------------------------------------- */

/* Disable navbar resize animations */
.navbar-vertical,
.navbar-vertical .navbar-collapse,
.navbar-vertical .navbar-vertical-content,
.content {
  transition: none !important;
  animation: none !important;
}
.navbar-vertical.navbar-expand-xl .navbar-collapse
{
  margin-top: -3px !important;
}

@media (min-width: 1200px) {
    :root .navbar-vertical.navbar-expand-xl.navbar-card, .navbar-vertical.navbar-expand-xl.navbar-vibrant, .navbar-vertical.navbar-expand-xl.navbar-inverted {
        padding: 0;
        max-width: 20rem !important;
      }
     :root .navbar-vertical.navbar-expand-xl.navbar-card .navbar-vertical-content
      {
        width: 19rem !important;
      }
    
     .navbar-vertical.navbar-expand-xl.navbar-card + .content, .navbar-vertical.navbar-expand-xl.navbar-vibrant + .content, .navbar-vertical.navbar-expand-xl.navbar-inverted + .content {
        margin-left: 20rem;
      }

      .navbar-vertical.navbar-expand-xl.navbar-card .navbar-collapse,     .navbar-vertical-collapsed-hover .navbar-vertical.navbar-expand-xl.navbar-card .navbar-collapse
      {
        width: 19rem !important;
      }
      .navbar-vertical-collapsed:not(.navbar-vertical-collapsed-hover) .navbar-vertical.navbar-expand-xl .navbar-collapse
      {
        width: 3.125rem !important;
      }
}

@media (min-width: 1400px) {
    :root .navbar-vertical.navbar-expand-xl.navbar-card, .navbar-vertical.navbar-expand-xl.navbar-vibrant, .navbar-vertical.navbar-expand-xl.navbar-inverted {
        padding: 0;
        max-width: 24rem !important;
      }
     :root .navbar-vertical.navbar-expand-xl.navbar-card .navbar-vertical-content
      {
        width: 23rem !important;
      }
    
     .navbar-vertical.navbar-expand-xl.navbar-card + .content, .navbar-vertical.navbar-expand-xl.navbar-vibrant + .content, .navbar-vertical.navbar-expand-xl.navbar-inverted + .content {
        margin-left: 24rem;
      }

      .navbar-vertical.navbar-expand-xl.navbar-card .navbar-collapse,     .navbar-vertical-collapsed-hover .navbar-vertical.navbar-expand-xl.navbar-card .navbar-collapse
      {
        width: 23rem !important;
      }
}

@media (min-width: 1600px) {
    :root .navbar-vertical.navbar-expand-xl.navbar-card, .navbar-vertical.navbar-expand-xl.navbar-vibrant, .navbar-vertical.navbar-expand-xl.navbar-inverted {
        padding: 0;
        max-width: 28rem !important;
      }
     :root .navbar-vertical.navbar-expand-xl.navbar-card .navbar-vertical-content
      {
        width: 27rem !important;
      }
    
     .navbar-vertical.navbar-expand-xl.navbar-card + .content, .navbar-vertical.navbar-expand-xl.navbar-vibrant + .content, .navbar-vertical.navbar-expand-xl.navbar-inverted + .content {
        margin-left: 28rem;
      }

      .navbar-vertical.navbar-expand-xl.navbar-card .navbar-collapse,     .navbar-vertical-collapsed-hover .navbar-vertical.navbar-expand-xl.navbar-card .navbar-collapse
      {
        width: 27rem !important;
      }
}

@media (min-width: 2048px) {
  .col-xxxl {
    flex: 1 0 0%;
  }  
  .col-xxxl-auto {
    flex: 0 0 auto;
    width: auto;
  }
  .col-xxxl-1 {
    flex: 0 0 auto;
    width: 4%;
  }
  .col-xxxl-2 {
    flex: 0 0 auto;
    width: 18%;
  }
  .col-xxxl-3 {
    flex: 0 0 auto;
    width: 12.25%;
  }
  .col-xxxl-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
  .col-xxxl-5 {
    flex: 0 0 auto;
    width: 41.66666667%;
  }
  .col-xxxl-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-xxxl-7 {
    flex: 0 0 auto;
    width: 58.33333333%;
  }
  .col-xxxl-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
  }
  .col-xxxl-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-xxxl-10 {
    flex: 0 0 auto;
    width: 83.33333333%;
  }
  .col-xxxl-11 {
    flex: 0 0 auto;
    width: 91.66666667%;
  }
  .col-xxxl-12 {
    flex: 0 0 auto;
    width: 100%;
  }
}

@media (min-width: 2800px) {
  .col-xxxxl {
    flex: 1 0 0%;
  }  
  .col-xxxxl-auto {
    flex: 0 0 auto;
    width: auto;
  }
  .col-xxxxl-1 {
    flex: 0 0 auto;
    width: 12%;
  }
  .col-xxxxl-2 {
    flex: 0 0 auto;
    width: 18%;
  }
  .col-xxxxl-3 {
    flex: 0 0 auto;
    width: 12.25%;
  }
  .col-xxxxl-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
  .col-xxxxl-5 {
    flex: 0 0 auto;
    width: 41.66666667%;
  }
  .col-xxxxl-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-xxxxl-7 {
    flex: 0 0 auto;
    width: 58.33333333%;
  }
  .col-xxxxl-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
  }
  .col-xxxxl-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-xxxxl-10 {
    flex: 0 0 auto;
    width: 83.33333333%;
  }
  .col-xxxxl-11 {
    flex: 0 0 auto;
    width: 91.66666667%;
  }
  .col-xxxxl-12 {
    flex: 0 0 auto;
    width: 100%;
  }
}