/* ==================== sm ==================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Figtree", sans-serif;
  font-optical-sizing: auto;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 22px; 

  display: flex;
  flex-direction: column;
  min-height: 100vh;
  align-items: center; /* Zentriert den Inhalt */
  width: 100%;
}



/* ==================== Sonstiges (Global) ==================== */

.content {
  margin: auto;
}

.row {
  padding-left:  16px;
  padding-right: 16px;
}
.sm-mb0   { margin-bottom: 0px !important; }
.sm-mb8   { margin-bottom: 8px !important; }
.sm-mb16  { margin-bottom: 16px !important; }
.sm-mb24  { margin-bottom: 24px !important; }
.sm-mb32  { margin-bottom: 32px !important; }
.sm-mb48  { margin-bottom: 48px !important; }

.sm-mt0   { margin-top: 0px !important; }
.sm-mt8   { margin-top: 8px !important; }
.sm-mt16  { margin-top: 16px !important; }
.sm-mt24  { margin-top: 24px !important; }
.sm-mt32  { margin-top: 32px !important; }
.sm-mt48  { margin-top: 48px !important; }

.sm-ml-15  { margin-left: -15px !important; }

.sm-pb0   { padding-bottom: 0px !important; }
.sm-pb8   { padding-bottom: 8px !important; }
.sm-pb16  { padding-bottom: 16px !important; }
.sm-pb24  { padding-bottom: 24px !important; }
.sm-pb32  { padding-bottom: 32px !important; }
.sm-pb48  { padding-bottom: 48px !important; }

.sm-pt0   { padding-top: 0px !important; }
.sm-pt8   { padding-top: 8px !important; }
.sm-pt16  { padding-top: 16px !important; }
.sm-pt24  { padding-top: 24px !important; }
.sm-pt32  { padding-top: 32px !important; }
.sm-pt48  { padding-top: 48px !important; }

.sm-flex  { display: flex !important; }
.sm-block { display: block !important; }

.sm-flex-direction-row    { flex-direction: row !important; }
.sm-flex-direction-column { flex-direction: column !important; }
.sm-flex-align-center     { align-items: center !important; }

.sm-flex-order-1 { order: 1 !important; }
.sm-flex-order-2 { order: 2 !important; }
.sm-flex-order-3 { order: 3 !important; }
.sm-flex-order-4 { order: 4 !important; }
.sm-flex-order-5 { order: 5 !important; }

.justify-content-center {
  justify-content: center;
}

.alert {
  padding: 16px 24px;
  margin-bottom: 16px;
  border: 1px solid transparent;
  border-radius: 12px;
  font-size: 16px;
  line-height: 1.5;
  background-color: #f8f9fa;
  color: #212529;
}

.alert-info {
  background-color: #D6D5E5;
  color: #0A0557;
  border-color: #b9b6dd;
}

.alert-success {
  background-color: #e6f4ea;
  color: #155724;
  border-color: #b7e4c7;
}

.alert-warning {
  background-color: #fff4e5;
  color: #856404;
  border-color: #ffe5b4;
}

.alert-danger {
  background-color: #ebd8d7;
  color: #BE1B13;
  border-color: #ebc9c7;
}

.badge {
  display: inline-block;
  padding: 4px 12px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  border-radius: 8px;
  background-color: #f8f9fa;
  color: #212529;
  border: 1px solid transparent;
}

.badge-info {
  background-color: #D6D5E5;
  color: #0A0557;
  border-color: #b9b6dd;
}

.badge-success {
  background-color: #e6f4ea;
  color: #155724;
  border-color: #b7e4c7;
}

.badge-warning {
  background-color: #fff4e5;
  color: #856404;
  border-color: #ffe5b4;
}

.badge-danger {
  background-color: #ebd8d7;
  color: #BE1B13;
  border-color: #ebc9c7;
}

.badge-muted {
  background-color: #f0f0f0;
  color: #6c757d;
  border-color: #e0e0e0;
}

/* Form controls */

.form-label {
  display: inline-block;
  margin-bottom: 8px;
  font-weight: 500;
  color: #212529;
  font-size: 15px;
}

.form-control {

  display: flex;
  padding: 8px 16px;
  align-items: center;
  gap: 8px;
  align-self: stretch;

  width: 100%;


  border-radius: 12px;
  border: 1px solid var(--border-border-s, #CDCDCD);
  background: var(--background-bg-surface, #FFF);

  /* box */
  box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.15);
  transition: border-color 0.15s, box-shadow 0.15s;

  color: var(--text-text-secondary, #676767);

  /* m/regular */
  font-family: Figtree;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 22px; /* 137.5% */
}

.form-control:focus,
.form-control:focus-visible  {
  border-color: var(--border-border-l, #322D7F);
  outline: none;
  box-shadow: 0 0 0 2px rgba(108, 99, 255, 0.15);
}

.form-select {
  display: block;
  width: 100%;
  padding: 8px 12px;
  font-size: 16px;
  line-height: 1.5;
  color: #212529;
  background-color: #fff;
  border: 1px solid #ced4da;
  border-radius: 8px;
  transition: border-color 0.15s, box-shadow 0.15s;
  box-sizing: border-box;
  appearance: none;
}

.form-select:focus {
  border-color: #6c63ff;
  outline: none;
  box-shadow: 0 0 0 2px rgba(108, 99, 255, 0.15);
}

.form-check {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.form-check-input {
  width: 32px!important;
  height: 32px!important;
  margin-right: 6px!important;
  margin-top: -2px!important;
  vertical-align: middle!important;
  background-color: #fff;
  border: 1px solid #CDCDCD;
  border-radius: 8px;
  transition: border-color 0.15s, box-shadow 0.15s;
  cursor: pointer;
  position: relative;
  appearance: none;
  flex-shrink: 0;
}

.form-check-input:checked {
  border-color: #322D7F;
}

.form-check-input:checked::after {
  content: "";
  display: block;
  width: 14px;
  height: 8px;
  border-left: 1px solid #322D7F;
  border-bottom: 1px solid #322D7F;
  position: absolute;
  top: 9px;
  left: 8px;
  transform: rotate(-45deg);
}

.form-check-input:focus {
  border-color: #6c63ff;
  outline: none;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.15);
}

/* buttons */
.btn {
  display: inline-block;
  font-weight: 600;
  color: #fff;
  background-color: #322D7F;
  border: none;
  padding: 10px 36px;
  font-size: 16px;
  line-height: 22px;
  border-radius: 12px;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
  text-align: center;
  text-decoration: none;
  box-sizing: border-box;
}

.btn:hover,
.btn:focus {
  background-color: #827DCF;
  color: #fff;
  text-decoration: none;
}

.btn-sm {
  padding: 4px 16px;
  font-size: 12px;
  font-weight: 400;
  border-radius: 8px;
}

.btn-info {
  background-color: #D6D5E5;
  color: #0A0557;
}

.btn-info:hover,
.btn-info:focus {
  background-color: #b9b6dd;
  color: #0A0557;
}

.btn-success {
  background-color: #e6f4ea;
  color: #155724;
}

.btn-success:hover,
.btn-success:focus {
  background-color: #b7e4c7;
  color: #155724;
}

.btn-warning {
  background-color: #fff4e5;
  color: #856404;
}

.btn-warning:hover,
.btn-warning:focus {
  background-color: #ffe5b4;
  color: #856404;
}

.btn-danger {
  background-color: #ebd8d7;
  color: #BE1B13;
}

.btn-danger:hover,
.btn-danger:focus {
  background-color: #ebc9c7;
  color: #BE1B13;
}

.btn-muted {
  background-color: #f0f0f0;
  color: #6c757d;
}

.btn-muted:hover,
.btn-muted:focus {
  background-color: #e0e0e0;
  color: #6c757d;
}


.sm-w100 {
  width: 100% !important;
  height: auto !important;
}


.sm-w50 {
  width: 50% !important;
  height: auto !important;
}

.sm-w33 {
  width: 33.333% !important;
  height: auto !important;
}

.sm-pr60 {
  margin-right: 60px;
}
 





/* ##################################################################################################################### 


$$$$$$$$\  $$$$$$\   $$$$$$\                            
\____$$  |$$  __$$\ $$  __$$\                           
    $$  / $$ /  \__|$$ /  $$ |       $$$$$$\  $$\   $$\ 
   $$  /  $$$$$$$\   $$$$$$  |      $$  __$$\ \$$\ $$  |
  $$  /   $$  __$$\ $$  __$$<       $$ /  $$ | \$$$$  / 
 $$  /    $$ /  $$ |$$ /  $$ |      $$ |  $$ | $$  $$<  
$$  /      $$$$$$  |\$$$$$$  |      $$$$$$$  |$$  /\$$\ 
\__/       \______/  \______/       $$  ____/ \__/  \__|
                                    $$ |                
                                    $$ |                
                                    \__|                

##################################################################################################################### */
@media (min-width: 768px) {

    /* ==================== md ==================== */

    .md-mb0   { margin-bottom: 0px !important; }
    .md-mb8   { margin-bottom: 8px !important; }
    .md-mb16  { margin-bottom: 16px !important; }
    .md-mb24  { margin-bottom: 24px !important; }
    .md-mb32  { margin-bottom: 32px !important; }
    .md-mb48  { margin-bottom: 48px !important; }
    
    .md-mt0   { margin-top: 0px !important; }
    .md-mt8   { margin-top: 8px !important; }
    .md-mt16  { margin-top: 16px !important; }
    .md-mt24  { margin-top: 24px !important; }
    .md-mt32  { margin-top: 32px !important; }
    .md-mt48  { margin-top: 48px !important; }
    
    .md-pb0   { padding-bottom: 0px !important; }
    .md-pb8   { padding-bottom: 8px !important; }
    .md-pb16  { padding-bottom: 16px !important; }
    .md-pb24  { padding-bottom: 24px !important; }
    .md-pb32  { padding-bottom: 32px !important; }
    .md-pb48  { padding-bottom: 48px !important; }
    
    .md-pt0   { padding-top: 0px !important; }
    .md-pt8   { padding-top: 8px !important; }
    .md-pt16  { padding-top: 16px !important; }
    .md-pt24  { padding-top: 24px !important; }
    .md-pt32  { padding-top: 32px !important; }
    .md-pt48  { padding-top: 48px !important; }
    
    .md-flex-order-1 { order: 1 !important; }
    .md-flex-order-2 { order: 2 !important; }
    .md-flex-order-3 { order: 3 !important; }
    .md-flex-order-4 { order: 4 !important; }
    .md-flex-order-5 { order: 5 !important; }

    .md-flex {
      display: flex;
    }
    
    .md-block {
      display: block;
    }
    
    .md-flex-direction-row {
      flex-direction: row;
    }
    
    .md-flex-direction-column {
      flex-direction: column;
    }

    .md-pr210 {
      margin-right: 210px;
    }



  }





/* ##################################################################################################################### 


  $$\   $$$$$$\   $$$$$$\  $$\   $$\                     
$$$$ | $$$ __$$\ $$  __$$\ $$ |  $$ |                    
\_$$ | $$$$\ $$ |\__/  $$ |$$ |  $$ | $$$$$$\  $$\   $$\ 
  $$ | $$\$$\$$ | $$$$$$  |$$$$$$$$ |$$  __$$\ \$$\ $$  |
  $$ | $$ \$$$$ |$$  ____/ \_____$$ |$$ /  $$ | \$$$$  / 
  $$ | $$ |\$$$ |$$ |            $$ |$$ |  $$ | $$  $$<  
$$$$$$\\$$$$$$  /$$$$$$$$\       $$ |$$$$$$$  |$$  /\$$\ 
\______|\______/ \________|      \__|$$  ____/ \__/  \__|
                                     $$ |                
                                     $$ |                
                                     \__|                 

##################################################################################################################### */

  @media (min-width: 1024px) {
    /* ==================== lg ==================== */

    .lg-mb0   { margin-bottom: 0px !important; }
    .lg-mb8   { margin-bottom: 8px !important; }
    .lg-mb16  { margin-bottom: 16px !important; }
    .lg-mb24  { margin-bottom: 24px !important; }
    .lg-mb32  { margin-bottom: 32px !important; }
    .lg-mb48  { margin-bottom: 48px !important; }
    
    .lg-mt0   { margin-top: 0px !important; }
    .lg-mt8   { margin-top: 8px !important; }
    .lg-mt16  { margin-top: 16px !important; }
    .lg-mt24  { margin-top: 24px !important; }
    .lg-mt32  { margin-top: 32px !important; }
    .lg-mt48  { margin-top: 48px !important; }
    
    .lg-pb0   { padding-bottom: 0px !important; }
    .lg-pb8   { padding-bottom: 8px !important; }
    .lg-pb16  { padding-bottom: 16px !important; }
    .lg-pb24  { padding-bottom: 24px !important; }
    .lg-pb32  { padding-bottom: 32px !important; }
    .lg-pb48  { padding-bottom: 48px !important; }
    
    .lg-pt0   { padding-top: 0px !important; }
    .lg-pt8   { padding-top: 8px !important; }
    .lg-pt16  { padding-top: 16px !important; }
    .lg-pt24  { padding-top: 24px !important; }
    .lg-pt32  { padding-top: 32px !important; }
    .lg-pt48  { padding-top: 48px !important; }
    
    .lg-flex-order-1 { order: 1 !important; }
    .lg-flex-order-2 { order: 2 !important; }
    .lg-flex-order-3 { order: 3 !important; }
    .lg-flex-order-4 { order: 4 !important; }
    .lg-flex-order-5 { order: 5 !important; }
    

    .lg-flex {
      display: flex;
    }
    
    .lg-block {
      display: block;
    }
    
    .lg-flex-direction-row {
      flex-direction: row;
    }
    
    .lg-flex-direction-column {
      flex-direction: column;
    }

    .lg-pr300 {
      margin-right: 300px;
    }

  }





  /* ##################################################################################################################### 


  $$\    $$$$$$\   $$$$$$\   $$$$$$\                      
$$$$ |  $$  __$$\ $$  __$$\ $$$ __$$\                     
\_$$ |  \__/  $$ |$$ /  $$ |$$$$\ $$ | $$$$$$\  $$\   $$\ 
  $$ |   $$$$$$  | $$$$$$  |$$\$$\$$ |$$  __$$\ \$$\ $$  |
  $$ |  $$  ____/ $$  __$$< $$ \$$$$ |$$ /  $$ | \$$$$  / 
  $$ |  $$ |      $$ /  $$ |$$ |\$$$ |$$ |  $$ | $$  $$<  
$$$$$$\ $$$$$$$$\ \$$$$$$  |\$$$$$$  /$$$$$$$  |$$  /\$$\ 
\______|\________| \______/  \______/ $$  ____/ \__/  \__|
                                      $$ |                
                                      $$ |                
                                      \__|                

 ##################################################################################################################### */
  @media (min-width: 1280px) {
    /* ==================== xl ==================== */

    .xl-mb0   { margin-bottom: 0px !important; }
    .xl-mb8   { margin-bottom: 8px !important; }
    .xl-mb16  { margin-bottom: 16px !important; }
    .xl-mb24  { margin-bottom: 24px !important; }
    .xl-mb32  { margin-bottom: 32px !important; }
    .xl-mb48  { margin-bottom: 48px !important; }

    .xl-mt0   { margin-top: 0px !important; }
    .xl-mt8   { margin-top: 8px !important; }
    .xl-mt16  { margin-top: 16px !important; }
    .xl-mt24  { margin-top: 24px !important; }
    .xl-mt32  { margin-top: 32px !important; }
    .xl-mt48  { margin-top: 48px !important; }

    .xl-pb0   { padding-bottom: 0px !important; }
    .xl-pb8   { padding-bottom: 8px !important; }
    .xl-pb16  { padding-bottom: 16px !important; }
    .xl-pb24  { padding-bottom: 24px !important; }
    .xl-pb32  { padding-bottom: 32px !important; }
    .xl-pb48  { padding-bottom: 48px !important; }

    .xl-pt0   { padding-top: 0px !important; }
    .xl-pt8   { padding-top: 8px !important; }
    .xl-pt16  { padding-top: 16px !important; }
    .xl-pt24  { padding-top: 24px !important; }
    .xl-pt32  { padding-top: 32px !important; }
    .xl-pt48  { padding-top: 48px !important; }

    .xl-flex-order-1 { order: 1 !important; }
    .xl-flex-order-2 { order: 2 !important; }
    .xl-flex-order-3 { order: 3 !important; }
    .xl-flex-order-4 { order: 4 !important; }
    .xl-flex-order-5 { order: 5 !important; }

  
    .xl-flex {
      display: flex;
    }
    
    .xl-block {
      display: block;
    }
    
    .xl-flex-direction-row {
      flex-direction: row;
    }
    
    .xl-flex-direction-column {
      flex-direction: column;
    }  

  }




  /* #####################################################################################################################
  
  
  $$\   $$$$$$\   $$$$$$\   $$$$$$\                      
$$$$ | $$  __$$\ $$  __$$\ $$$ __$$\                     
\_$$ | $$ /  $$ |\__/  $$ |$$$$\ $$ | $$$$$$\  $$\   $$\ 
  $$ | \$$$$$$$ | $$$$$$  |$$\$$\$$ |$$  __$$\ \$$\ $$  |
  $$ |  \____$$ |$$  ____/ $$ \$$$$ |$$ /  $$ | \$$$$  / 
  $$ | $$\   $$ |$$ |      $$ |\$$$ |$$ |  $$ | $$  $$<  
$$$$$$\\$$$$$$  |$$$$$$$$\ \$$$$$$  /$$$$$$$  |$$  /\$$\ 
\______|\______/ \________| \______/ $$  ____/ \__/  \__|
                                     $$ |                
                                     $$ |                
                                     \__|                


  ##################################################################################################################### */
  @media (min-width: 1920px) {
    .xxl-flex {
      display: flex;
    }
    
    .xxl-block {
      display: block;
    }
    
    .xxl-flex-direction-row {
      flex-direction: row;
    }
    
    .xxl-flex-direction-column {
      flex-direction: column;
    }
  }
  
  

/* #####################################################################################################################

                        $$\       $$\ $$\                                     $$\           
                        $$ |      \__|$$ |                                    $$ |          
$$$$$$\$$$$\   $$$$$$\  $$$$$$$\  $$\ $$ | $$$$$$\         $$$$$$\  $$$$$$$\  $$ |$$\   $$\ 
$$  _$$  _$$\ $$  __$$\ $$  __$$\ $$ |$$ |$$  __$$\       $$  __$$\ $$  __$$\ $$ |$$ |  $$ |
$$ / $$ / $$ |$$ /  $$ |$$ |  $$ |$$ |$$ |$$$$$$$$ |      $$ /  $$ |$$ |  $$ |$$ |$$ |  $$ |
$$ | $$ | $$ |$$ |  $$ |$$ |  $$ |$$ |$$ |$$   ____|      $$ |  $$ |$$ |  $$ |$$ |$$ |  $$ |
$$ | $$ | $$ |\$$$$$$  |$$$$$$$  |$$ |$$ |\$$$$$$$\       \$$$$$$  |$$ |  $$ |$$ |\$$$$$$$ |
\__| \__| \__| \______/ \_______/ \__|\__| \_______|       \______/ \__|  \__|\__| \____$$ |
                                                                                  $$\   $$ |
                                                                                  \$$$$$$  |
                                                                                    \______/   
##################################################################################################################### */                                             
                                              
 @media (max-width: 1024px) {
  



}


/* ##################################################################################################################### */
/* #### Helper ######################################################################################################### */


.gap32 {
  gap: 32px;
}

.gap48 {
  gap: 48px;
}

.lh0 {
  line-height: 0;
}

.talr {
  text-align: right;
}

.talc {
  text-align: center;
}


/* ##################################################################################################################### */
/* #### Bootstrap column layout ########################################################################################## */
/* ==== GRID SYSTEM ==== */
.container {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-left: 15px;
  padding-right: 15px;
}

.gridrow {
  display: flex;
  flex-wrap: wrap;
  margin-left: -15px;
  margin-right: -15px;
}

[class*="col-"] {
  padding-left: 15px;
  padding-right: 15px;
  box-sizing: border-box;
}

/* Basis-Spalten (12er Grid) */
.col-1  { flex: 0 0 8.333%;  max-width: 8.333%; }
.col-2  { flex: 0 0 16.666%; max-width: 16.666%; }
.col-3  { flex: 0 0 25%;     max-width: 25%; }
.col-4  { flex: 0 0 33.333%; max-width: 33.333%; }
.col-5  { flex: 0 0 41.666%; max-width: 41.666%; }
.col-6  { flex: 0 0 50%;     max-width: 50%; }
.col-7  { flex: 0 0 58.333%; max-width: 58.333%; }
.col-8  { flex: 0 0 66.666%; max-width: 66.666%; }
.col-9  { flex: 0 0 75%;     max-width: 75%; }
.col-10 { flex: 0 0 83.333%; max-width: 83.333%; }
.col-11 { flex: 0 0 91.666%; max-width: 91.666%; }
.col-12 { flex: 0 0 100%;    max-width: 100%; }

/* ==== RESPONSIVE BREAKPOINTS ==== */
@media (min-width: 576px) {
  .col-sm-1  { flex: 0 0 8.333%;  max-width: 8.333%; }
  .col-sm-2  { flex: 0 0 16.666%; max-width: 16.666%; }
  .col-sm-3  { flex: 0 0 25%;     max-width: 25%; }
  .col-sm-4  { flex: 0 0 33.333%; max-width: 33.333%; }
  .col-sm-5  { flex: 0 0 41.666%; max-width: 41.666%; }
  .col-sm-6  { flex: 0 0 50%;     max-width: 50%; }
  .col-sm-7  { flex: 0 0 58.333%; max-width: 58.333%; }
  .col-sm-8  { flex: 0 0 66.666%; max-width: 66.666%; }
  .col-sm-9  { flex: 0 0 75%;     max-width: 75%; }
  .col-sm-10 { flex: 0 0 83.333%; max-width: 83.333%; }
  .col-sm-11 { flex: 0 0 91.666%; max-width: 91.666%; }
  .col-sm-12 { flex: 0 0 100%;    max-width: 100%; }
}

@media (min-width: 768px) {
  .col-md-1  { flex: 0 0 8.333%;  max-width: 8.333%; }
  .col-md-2  { flex: 0 0 16.666%; max-width: 16.666%; }
  .col-md-3  { flex: 0 0 25%;     max-width: 25%; }
  .col-md-4  { flex: 0 0 33.333%; max-width: 33.333%; }
  .col-md-5  { flex: 0 0 41.666%; max-width: 41.666%; }
  .col-md-6  { flex: 0 0 50%;     max-width: 50%; }
  .col-md-7  { flex: 0 0 58.333%; max-width: 58.333%; }
  .col-md-8  { flex: 0 0 66.666%; max-width: 66.666%; }
  .col-md-9  { flex: 0 0 75%;     max-width: 75%; }
  .col-md-10 { flex: 0 0 83.333%; max-width: 83.333%; }
  .col-md-11 { flex: 0 0 91.666%; max-width: 91.666%; }
  .col-md-12 { flex: 0 0 100%;    max-width: 100%; }
}

@media (min-width: 992px) {
  .col-lg-1  { flex: 0 0 8.333%;  max-width: 8.333%; }
  .col-lg-2  { flex: 0 0 16.666%; max-width: 16.666%; }
  .col-lg-3  { flex: 0 0 25%;     max-width: 25%; }
  .col-lg-4  { flex: 0 0 33.333%; max-width: 33.333%; }
  .col-lg-5  { flex: 0 0 41.666%; max-width: 41.666%; }
  .col-lg-6  { flex: 0 0 50%;     max-width: 50%; }
  .col-lg-7  { flex: 0 0 58.333%; max-width: 58.333%; }
  .col-lg-8  { flex: 0 0 66.666%; max-width: 66.666%; }
  .col-lg-9  { flex: 0 0 75%;     max-width: 75%; }
  .col-lg-10 { flex: 0 0 83.333%; max-width: 83.333%; }
  .col-lg-11 { flex: 0 0 91.666%; max-width: 91.666%; }
  .col-lg-12 { flex: 0 0 100%;    max-width: 100%; }
}

@media (min-width: 1200px) {
  .col-xl-1  { flex: 0 0 8.333%;  max-width: 8.333%; }
  .col-xl-2  { flex: 0 0 16.666%; max-width: 16.666%; }
  .col-xl-3  { flex: 0 0 25%;     max-width: 25%; }
  .col-xl-4  { flex: 0 0 33.333%; max-width: 33.333%; }
  .col-xl-5  { flex: 0 0 41.666%; max-width: 41.666%; }
  .col-xl-6  { flex: 0 0 50%;     max-width: 50%; }
  .col-xl-7  { flex: 0 0 58.333%; max-width: 58.333%; }
  .col-xl-8  { flex: 0 0 66.666%; max-width: 66.666%; }
  .col-xl-9  { flex: 0 0 75%;     max-width: 75%; }
  .col-xl-10 { flex: 0 0 83.333%; max-width: 83.333%; }
  .col-xl-11 { flex: 0 0 91.666%; max-width: 91.666%; }
  .col-xl-12 { flex: 0 0 100%;    max-width: 100%; }
}

/* ==== DISPLAY UTILITIES ==== */
.d-none   { display: none !important; }
.d-inline { display: inline !important; }
.d-block  { display: block !important; }
.d-flex   { display: flex !important; }
.d-inline-block { display: inline-block !important; }
.d-grid   { display: grid !important; }

/* Responsive Display */
@media (min-width: 576px) {
  .d-sm-none   { display: none !important; }
  .d-sm-inline { display: inline !important; }
  .d-sm-block  { display: block !important; }
  .d-sm-flex   { display: flex !important; }
}

@media (min-width: 768px) {
  .d-md-none   { display: none !important; }
  .d-md-inline { display: inline !important; }
  .d-md-block  { display: block !important; }
  .d-md-flex   { display: flex !important; }
}

@media (min-width: 992px) {
  .d-lg-none   { display: none !important; }
  .d-lg-inline { display: inline !important; }
  .d-lg-block  { display: block !important; }
  .d-lg-flex   { display: flex !important; }
}

@media (min-width: 1200px) {
  .d-xl-none   { display: none !important; }
  .d-xl-inline { display: inline !important; }
  .d-xl-block  { display: block !important; }
  .d-xl-flex   { display: flex !important; }
}