/* ####################################
   Icons

   - Critical Rendering Path: Recommended
   - Note: The icon layout system is developed and tested for us with Font Awesome icons. In theory it should work for other font libraries, but it may depend on how each library is developed - especially for duotone icons.
   - To do: The icon layout system is designed to work both on standalone HTML icon tags, and as extensions to tags with other content in them. This is good in many ways, particularly since we feel an extra tag for a purely decorative element works against the spirit of semantics and accessibility. Also it supports simple content authoring by just adding class names to existing elements. But it causes a few problems for advanced layouts. Will we keep it or switch back to always using a dedicated icon tag like many of the icon systems suggest for technical simplicity?
   - To do: Our size calculation system works on ems because that's how the tried-and-true Font Awesome does it, and it makes sense for responsiveness reasons, i.e. icons will adopt a natural size that's related to the content around them. But it complicates a few things. Would it be better to have a fixed sizing system, or ther option to implement both approaches?
   ################################## */

/* ####################################
   Icon Fonts
   ################################## */

/*@import url('/AcoraCMS/Icons/fontawesome-free-6/css/all.css');*/ /* Free version of Font Awesome. */
@import url('/AcoraCMS/Icons/fontawesome-pro-6/css/all.css'); /* Font Awesome Pro is much nicer than the free version but must be licensed if you want to use it in a website. */

/* For a more efficient website, only load the font variants that the website uses... Note Font Awesome Free only offers brands, regular, solid. */
/*
@import url('/AcoraCMS/Icons/fontawesome-pro-6/css/brands.css');
@import url('/AcoraCMS/Icons/fontawesome-pro-6/css/duotone.css');
@import url('/AcoraCMS/Icons/fontawesome-pro-6/css/thin.css');
@import url('/AcoraCMS/Icons/fontawesome-pro-6/css/light.css');
@import url('/AcoraCMS/Icons/fontawesome-pro-6/css/regular.css');
@import url('/AcoraCMS/Icons/fontawesome-pro-6/css/solid.css');
@import url('/AcoraCMS/Icons/fontawesome-pro-6/css/sharp-light.css');
@import url('/AcoraCMS/Icons/fontawesome-pro-6/css/sharp-regular.css');
@import url('/AcoraCMS/Icons/fontawesome-pro-6/css/sharp-solid.css');
*/

/* ####################################
   Icon Configuration & Design

   - Note: Ems are used for dynamic sizing. Change this at your own risk.
   ################################## */

.icon {
    /* Note: We don't define styles on the icon container, because it can have real already-styled content inside it. */
    --icon-size: 1em;
    --icon-padding: 0px;
}

    .icon::before {
        position: relative;
        -moz-osx-font-smoothing: grayscale;
        -webkit-font-smoothing: antialiased;
        display: inline-block;
        vertical-align: middle; /* Some body text fonts might work better with "baseline" alignment for icons. */
        /*margin-top: -0.25em;*/ /* To do: Use this or not? Does the need depend on the site font? */
        margin-right: 0.25em;
        height: 1.25em; /* Must use dynamic units to help the text sizer. */
        width: 1.25em; /* Must use dynamic units to help the text sizer. */
        line-height: 1.25em;
        text-align: center;
        font-family: var(--site-icon-font-family); /* The default font collection for the site. The collection can be changed manually using secondary classes - e.g. .fa, .fas, .far, .fal, .fad, .fab for Font Awesome. */
        font-weight: var(--site-icon-font-weight); /* The default icon weight for the site. It can be changed manually on each icon if your icon font supports it. Note: Font Awesome free version only supports 700 for the full icon set. */
        font-size: var(--icon-size);
        font-style: normal;
        font-variant: normal;
        text-rendering: auto;
    }

    .icon::after {
        display: none;
    }

    .icon:hover {
        transition: var(--site-icon-hover-transition);
    }

    i.icon,
    em.icon,
    span.icon,
    a.icon {
        /* Inline tags with icons on them need  block dimension. */
    }

/* Some icon fonts support different styles at different font weights. */

.icon-thin::before,
.icon-thin::after {
    font-weight: 100 !important;
}

.icon-light::before,
.icon-light::after {
    font-weight: 300 !important;
}

.icon-regular::before,
.icon-regular::after {
    font-weight: 500 !important;
}

.icon-solid::before,
.icon-solid::after {
    font-weight: 700 !important;
}

:root {
    /* Inherit from the site wide settings so we can redefine them without overriding the site wide configuration. */
    --icon-duotone-color-primary-opacity: var(--site-icon-duotone-color-primary-opacity);
    --icon-duotone-color-secondary-opacity: var(--site-icon-duotone-color-secondary-opacity);
}

.icon-duotone {
    position: relative;
    display: inline-block; /* This isn't perfect if the icon is within a text block and/or has a pre-set display property already. But arguably the element should always be a block if an icon is associated with it, and without it some icon fonts behave strangely. */
}

    .icon-duotone::before {
        font-family: var(--site-icon-duotone-font-family);
        font-weight: var(--site-icon-font-weight);
        /*color: var(--site-icon-duotone-color-primary);*/ /* Color is handled separately. */
        opacity: var(--icon-duotone-color-primary-opacity);
    }

    .icon-duotone::after {
        content: "";
        display: inline-block;
        position: absolute;
        z-index: 1;
        top: 0px; /* To do: Should this be applied? Do Acora and FA icons behave differently? */
        left: 0px;
        -moz-osx-font-smoothing: grayscale;
        -webkit-font-smoothing: antialiased;
        height: 1.25em; /* Must match the ::before setting. */
        width: 1.25em; /* Must match the ::before setting. */
        line-height: 1.25em;
        text-align: center;
        /*color: var(--site-icon-duotone-color-secondary);*/ /* Color is handled separately. */
        font-family: var(--site-icon-duotone-font-family);
        font-weight: var(--site-icon-font-weight);
        font-size: var(--icon-size);
        font-style: normal;
        font-variant: normal;
        text-rendering: auto;
        opacity: var(--icon-duotone-color-secondary-opacity);
    }

    .icon.icon-duotone.icon-circle::after,
    .icon.icon-duotone.icon-square::after {
        top: var(--icon-padding);
        left: var(--icon-padding);
    }

    .icon.icon-duotone.icon-circle.icon-border::after,
    .icon.icon-duotone.icon-square.icon-border::after {
        top: calc(var(--icon-padding) + var(--icon-border-width));
        left: calc(var(--icon-padding) + var(--icon-border-width));
    }

.icon-duotone.fad,
.icon-duotone.fa-duotone {
    /* Fix for icon fonts that apply the font to the connected element. To do: We know Font Awesome does this, do others? */
    position: relative;
    /*display: var(--fa-display, inline-block);*/
    font-family: inherit;
    font-weight: inherit;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
}

/* 
    Icon sizes are relative to the element's font size.
    - Note: Vertical alignment gets a bit hairy at larger sizes especially... The top/bottom margins are designed to try to avoid affecting line heights if used inline within text in standard layouts, and also to "fix" the strange visual effect of vertical-align:middle aligning to the middle of the lower case letters in the text of the element. Margins need adjusting depending on the site's base font and size or in individual contexts.
*/

.icon-small::before,
.icon-small::after {
    --icon-size: 0.5em;
    margin-top: -0.25em;
}

.icon-medium::before,
.icon-medium::after {
    --icon-size: 1em;
    margin-top: -0.25em;
}

.icon-large::before,
.icon-large::after {
    --icon-size: 2em;
    margin-top: -0.075em;
    margin-right: 0.125em;
}

.icon-larger::before,
.icon-larger::after {
    --icon-size: 3em;
    margin-top: -0.075em;
    margin-right: 0.125em;
}

.icon-huge::before,
.icon-huge::after {
    --icon-size: 4.5em;
    margin-right: 0.075em;
}

.icon-mega::before,
.icon-mega::after {
    --icon-size: 6em;
    margin-right: 0.025em;
}

/* 
    Icon colors and background
    - Reset color on the text in the block the icon is on (color can be handled with a parent element if needed, and it's more common to need to color just the icon)
    - Move the color to the icon element. Relies on vars set in Colors.css.
    - If setting colours declaratively, remember they will take effect within other elemtns including buttons, boxes, etc.
*/

:root {
    /* Inherit from the site wide settings so we can redefine them without overriding the site wide configuration. */
    --icon-color: var(--site-icon-color);
}

    .icon::before {
        color: var(--icon-color);
    }

:root {
    /* Inherit from the site wide settings so we can redefine them without overriding the site wide configuration. */
    --icon-duotone-color-primary: var(--site-icon-duotone-color-primary);
    --icon-duotone-color-secondary: var(--site-icon-duotone-color-secondary);
}

    .icon-duotone::before {
        color: var(--icon-duotone-color-primary);
    }

    .icon-duotone::after {
        color: var(--icon-duotone-color-secondary);
    }

.icon[class*=bg-] {
    color: inherit;
    background: transparent;
}

    .icon[class*=bg-]::before {
        color: var(--color, #000) !important;
        background: var(--bg, #f8f9fa) !important;
    }

.icon[class*=" color-"],
.icon[class^="color-"] {
    color: inherit !important;
}

    .icon[class*=" color-"]::before,
    .icon[class^="color-"]::before {
        color: var(--color, var(--site-icon-color)) !important;
        border-color: var(--color, var(--site-icon-color));
    }

    .icon-duotone[class*=" color-"]::after,
    .icon-duotone[class^="color-"]::after {
        color: var(--color, var(--site-icon-color)) !important;
        border-color: var(--color, var(--site-icon-color));
        opacity: var(--icon-duotone-color-secondary-opacity);
    }

/* Icon layouts */

.icon-circle,
.icon-square {
    --icon-padding: 0.5em;
}

    .icon-circle::before {
        padding: var(--icon-padding);
        background: var(--bg, #f8f9fa) !important;
        border-radius: 100%;
    }

    .icon-square::before {
        padding: var(--icon-padding);
        background: var(--bg, #f8f9fa) !important;
    }

.icon-circle:not(.icon-duotone)::after,
.icon-square:not(.icon-duotone)::after {
    display: none !important;
}

/* Icon styles */

.icon-outline::before {
    /* Set up in the section handling outlines. */
}

.icon-nowrap {
    white-space: nowrap;
}

.icon-stacked {
}

    .icon-stacked::before,
    .icon-stacked::after {
        display: block;
        margin-bottom: var(--site-margin-thinnest);
    }

        .text-center .icon-stacked::before,
        .text-center .icon-stacked::after,
        [style*="text-align:center"] .icon-stacked::before,
        [style*="text-align:center"] .icon-stacked::after,
        [style*="text-align: center"] .icon-stacked::before,
        [style*="text-align: center"] .icon-stacked::after,
        [style*="text-align:center"].icon-stacked::before,
        [style*="text-align:center"].icon-stacked::after,
        [style*="text-align: center"].icon-stacked::before,
        [style*="text-align: center"].icon-stacked::after {
            margin-left: auto;
            margin-right: auto;
        }

        .text-left .icon-stacked::before,
        .text-left .icon-stacked::after,
        [style*="text-align:left"] .icon-stacked::before,
        [style*="text-align:left"] .icon-stacked::after,
        [style*="text-align: left"] .icon-stacked::before,
        [style*="text-align: left"] .icon-stacked::after,
        [style*="text-align:left"].icon-stacked::before,
        [style*="text-align:left"].icon-stacked::after,
        [style*="text-align: left"].icon-stacked::before,
        [style*="text-align: left"].icon-stacked::after {
            margin-left: inherit;
        }

        .text-right .icon-stacked::before,
        .text-right .icon-stacked::after,
        [style*="text-align:right"] .icon-stacked::before,
        [style*="text-align:right"] .icon-stacked::after,
        [style*="text-align: right"] .icon-stacked::before,
        [style*="text-align: right"] .icon-stacked::after,
        [style*="text-align:right"].icon-stacked::before,
        [style*="text-align:right"].icon-stacked::after,
        [style*="text-align: right"].icon-stacked::before,
        [style*="text-align: lerightft"].icon-stacked::after {
            margin-right: inherit;
        }

/*
	Icon Borders
    - A cut down collection of the general border rules defined in Blocks.css
*/

.icon-border,
.hover-icon-border {
    --icon-border-width: var(--site-border-width);
    --icon-border-color: var(--border-color, var(--site-border-color));
}

.icon-border-thinnest, .hover-icon-border-thinnest:hover { --icon-border-width: var(--site-border-width-thinnest); }
.icon-border-thinner, .hover-icon-border-thinner:hover { --icon-border-width: var(--site-border-width-thinner); }
.icon-border-thin, .hover-icon-border-thin:hover { --icon-border-width: var(--site-border-width-thin); }
.icon-border-thick, .hover-icon-border-thick:hover { --icon-border-width: var(--site-border-width-thick); }
.icon-border-thicker, .hover-icon-border-thicker:hover { --icon-border-width: var(--site-border-width-thicker); }
.icon-border-thickest, .hover-icon-border-thickest:hover { --icon-border-width: var(--site-border-width-thickest); }

.icon-border-transparent, .hover-icon-border-transparent:hover { --icon-border-color: transparent; }
.icon-border-bright, .hover-icon-border-bright:hover { --icon-border-color: var(--border-color-bright, var(--site-border-color-bright)); }
.icon-border-dark, .hover-icon-border-dark:hover { --icon-border-color: var(--border-color-dark, var(--site-border-color-dark)); }

.icon-border::before, 
.hover-icon-border:hover::before {
    border-color: var(--icon-border-color, var(--site-border-color));
    border-width: var(--icon-border-width);
    border-style: solid;
}

/*
    "Only" an icon: hide everything in the tag except the icon.
    - Be mindful of accessibility when using this, extra content markup might be required.
    - Generally we avoid markup for a specific icon library, but Font Awesome is so common that people sometimes drop FA code into an editor, and supporting it won't hurt.
*/

.icon-only {
    display: inline-block;
    vertical-align: middle;
    line-height: 100%;
    letter-spacing: -10000em; /* A strange kind of approach, but it's widely supported and all other width/height calculations seem to be impossible with our ems based sizing. */
    overflow: hidden;
}

    .icon-only::before,
    .icon-only::after {
        margin-top: 0px;
        margin-right: 0px;
        letter-spacing: normal;
    }

/* 
    Linked icons
    - Define linked icons after everything else in case we need to handle different behaviors for different icon layout/style variations.
    - Keep it simple by applying the same effect to all kinds of linked icons, avoiding lots of complex color treatment.
    - To do: This probably still needs site by site customisation. Try to create configurable variables so it can be set up in the customisation layer instead of here.
*/

a.icon {
    text-decoration: none !important;
}

    a.icon:hover::before,
    a.icon:focus::before,
    a.icon:hover::after,
    a.icon:focus::after {
        /* When there's no background. */
        color: var(--site-link-hover-color) !important;
        background: var(--site-link-hover-bg) !important;
        border-color: var(--site-link-hover-border-color) !important
    }

    a.icon[class*=" color-"]:hover,
    a.icon[class*=" color-"]:focus,
    a.icon[class^="color-"]:hover,
    a.icon[class^="color-"]:focus {
        /* When a hard coded color is defined. */
        color: inherit !important;
    }

        a.icon[class*=" color-"]:hover::before,
        a.icon[class*=" color-"]:focus::before,
        a.icon[class^="color-"]:hover::before,
        a.icon[class^="color-"]:focus::before {
            color: var(--site-link-hover-color) !important;
            background: var(--site-link-hover-bg) !important;
            border-color: var(--site-link-hover-border-color) !important
        }

a.icon-duotone[class*=" color-"]:hover::after,
a.icon-duotone[class*=" color-"]:focus::after,
a.icon-duotone[class^="color-"]:hover::after,
a.icon-duotone[class^="color-"]:focus::after {
    color: var(--site-link-hover-color) !important;
    background: var(--site-link-hover-bg) !important;
}

a.icon[class*=bg-]:hover,
a.icon[class*=bg-]:focus {
    /* When there's a background. */
}

    a.icon[class*=bg-]:hover::before,
    a.icon[class*=bg-]:focus::before {
        color: var(--site-link-hover-bg-dark) !important;
        background: var(--site-link-hover-color-dark) !important;
        border-color: var(--site-link-hover-color-dark) !important
    }

    a.icon.icon-duotone[class*=bg-]:hover::after,
    a.icon.icon-duotone[class*=bg-]:focus::after {
        color: var(--site-link-hover-bg-dark) !important;
        background: transparent !important;
    }

a.icon.icon-only {
    /* "Icon only" icons are general standalone elements, so if they're links we like them to behave a little differently on hover. */
    cursor: pointer;
}

    a.icon.icon-only:hover {
        text-decoration: none;
        background: none;
    }

        a.icon.icon-only:hover::before,
        a.icon.icon-only:focus::before,
        a.icon.icon-only:hover::after,
        a.icon.icon-only:focus::after {
            color: var(--site-link-hover-bg-dark) !important;
            background: var(--site-link-hover-color-dark) !important;
            border-color: var(--site-link-hover-color-dark) !important
        }

/*
    Custom icons or specialised styles
*/

.icon-style-1 {
    position: relative;
    z-index: 2;
    display: inline-block;
    vertical-align: middle;
    width: 6.5em;
    height: 1em;
    margin-top: 4.75em;
    margin-bottom: 1.25em;
    transform: rotate( -7.5deg);
    font-size: 1.75em;
    font-weight: bold;
    font-family: Cambria, Arial, Arial, Helvetica, sans-serif;
    font-style: italic;
    color: #4B0082;
    text-shadow: 1px 1px #fff;
    background: rgb(224,220,219);
    border: #fff 5px solid;
    border-radius: 100%;
    box-shadow: rgb(0 153 253 / 25%) 0px 0px 25px;
    background: rgba(0,153,253,0.25);
    cursor: pointer;
    transition: all 150ms ease-in-out;
}

    .icon-style-1::before {
        position: relative;
        z-index: -1;
        margin-top: -2.25em;
        margin-bottom: -0.7em;
        padding: 0.4em 0.5em 0.6em;
        transform: rotate(7.5deg);
        font-size: 2em;
        color: #800080;
        text-shadow: -3px -3px #d8bfd8;
        background: linear-gradient(40deg, rgba(34,193,195,1) 0%, rgba(253,187,45,1) 100%) !important;
        border: #fff 0.1875em solid;
        box-shadow: 0px 0px 15px rgba(53,42,31,0.25);
        transition: all 150ms ease-in-out;
    }

    .icon-style-1:nth-of-type(3n-1) {
        transform: rotate(0);
    }

        .icon-style-1:nth-of-type(3n-1)::before {
            transform: rotate(0);
        }

    .icon-style-1:nth-of-type(3n) {
        transform: rotate(7.5deg);
    }

        .icon-style-1:nth-of-type(3n)::before {
            transform: rotate(-7.5deg);
        }

    .icon-style-1:hover,
    .icon-style-1:focus {
        transform: scale(1.25) translateX(-0.125em) translateY(0.25em);
    }

        .icon-style-1:hover::before,
        .icon-style-1:focus::before {
            transform: rotate(0deg);
            filter: blur(3px);
            opacity: 0.75;
        }

/* ####################################
   Icons
   ################################## */

/*
    Common CMS Icons
    - Always populate these elements, no matter what icon collection is used. That way the core CMS remains fully supported.
    - Note: You can also use names from the icon's font specification, but these might not be supported across different CMS versions or font sets so you will need to manage them yourself.

    To consider:
        Arrows
        Chevrons
        Carets
        Plus Minus
        Tick Cross
        Desktop f108
        Laptop f109
        Mobile f3cd
        Tablet f3fa
        Star
        Quotes
        Spinners?
        Thumbs up/down?

*/

.icon-alert::before { content: "\f06a"; }
.icon-alert::after { content: "\f06a\f06a"; }

.icon-attachment::before { content: "\f0c6"; }
.icon-attachment::after { content: "\f0c6\f0c6"; }

.icon-audio::before { content: "\f028"; }
.icon-audio::after { content: "\f028\f028"; }

.icon-audio-description::before { content: "\f29e"; }
.icon-audio-description::after { content: "\f29e\f29e"; }

.icon-bell::before { content: "\f0f3"; }
.icon-bell::after { content: "\f0f3\f0f3"; }

.icon-blog::before { content: "\f781"; }
.icon-blog::after { content: "\f781\f781"; }

.icon-book::before { content: "\f02d"; }
.icon-book::after { content: "\f02d\f02d"; }

.icon-book-reader::before { content: "\f5da"; }
.icon-book-reader::after { content: "\f5da\f5da"; }

.icon-bookmark::before { content: "\f02e"; }
.icon-bookmark::after { content: "\f02e\f02e"; }

.icon-box::before { content: "\f466"; }
.icon-box::after { content: "\f466\f466"; }

.icon-boxes::before { content: "\f468"; }
.icon-boxes::after { content: "\f468\f468"; }

.icon-calendar::before { content: "\f073"; }
.icon-calendar::after { content: "\f073\f073"; }

.icon-calendar-add::before { content: "\f271"; }
.icon-calendar-add::after { content: "\f271\f271"; }

.icon-camera::before { content: "\f083"; }
.icon-camera::after { content: "\f083\f083"; }

.icon-cart::before { content: "\f07a"; }
.icon-cart::after { content: "\f07a\f07a"; }

.icon-cart-add::before { content: "\f217"; }
.icon-cart-add::after { content: "\f217\f217"; }

.icon-clock::before { content: "\f017"; }
.icon-clock::after { content: "\f017\f017"; }

.icon-closed-captioning::before { content: "\f20a"; }
.icon-closed-captioning::after { content: "\f20a\f20a"; }

.icon-comment::before { content: "\f4ad"; }
.icon-comment::after { content: "\f4ad\f4ad"; }

.icon-contact::before { content: "\f095"; }
.icon-contact::after { content: "\f095\f095"; }

.icon-phone-rotary::before { content: "\f8d3"; }
.icon-phone-rotary::after { content: "\f8d3\f8d3"; }

.icon-donate::before { content: "\f4be"; }
.icon-donate::after { content: "\f4be\f4be"; }

.icon-copyright::before { content: "\f1f9"; }
.icon-copyright::after { content: "\f1f9\f1f9"; }

.icon-credit-card::before { content: "\f09d"; }
.icon-credit-card::after { content: "\f09d\f09d"; }

.icon-download::before { content: "\f019"; }
.icon-download::after { content: "\f019\f019"; }

.icon-edit::before { content: "\f044"; }
.icon-edit::after { content: "\f044\f044"; }

.icon-email::before { content: "\f0e0"; }
.icon-email::after { content: "\f0e0\f0e0"; }

.icon-eye::before { content: "\f06e"; }
.icon-eye::after { content: "\f06e\f06e"; }

.icon-external-link::before { content: "\f360"; }
.icon-external-link::after { content: "\f360\f360"; }

.icon-feedback::before { content: "\f086"; }
.icon-feedback::after { content: "\f086\f086"; }

.icon-gear::before { content: "\f013"; }
.icon-gear::after { content: "\f013\f013"; }

.icon-globe::before { content: "\f0ac"; }
.icon-globe::after { content: "\f0ac\f0ac"; }

.icon-help::before { content: "\f059"; }
.icon-help::after { content: "\f059\f059"; }

.icon-home::before { content: "\f015"; }
.icon-home::after { content: "\f015\f015"; }

.icon-image::before { content: "\f03e"; }
.icon-image::after { content: "\f03e\f03e"; }

.icon-images::before { content: "\f302"; }
.icon-images::after { content: "\f302\f302"; }

.icon-info::before { content: "\f05a"; }
.icon-info::after { content: "\f05a\f05a"; }
.icon-information::before { content: "\f05a"; }
.icon-information::after { content: "\f05a\f05a"; }

.icon-key::before { content: "\f084"; }
.icon-key::after { content: "\f084\f084"; }

.icon-link::before { content: "\f0c1"; }
.icon-link::after { content: "\f0c1\f0c1"; }

.icon-lock::before { content: "\f023"; }
.icon-lock::after { content: "\f023\f023"; }

.icon-map::before { content: "\f279"; }
.icon-map::after { content: "\f279\f279"; }

.icon-map-marked::before { content: "\f5a0"; }
.icon-map-marked::after { content: "\f5a0\f5a0"; }

.icon-map-marker::before { content: "\f3c5"; }
.icon-map-marker::after { content: "\f3c5\f3c5"; }

.icon-microphone::before { content: "\f3c9"; }
.icon-microphone::after { content: "\f3c9\f3c9"; }

.icon-paperclip::before { content: "\f0c6"; }
.icon-paperclip::after { content: "\f0c6\f0c6"; }

.icon-pencil::before { content: "\f303"; }
.icon-pencil::after { content: "\f303\f303"; }

.icon-play::before { content: "\f04b"; }
.icon-play::after { content: "\f04b\f04b"; }

.icon-podcast::before { content: "\f2ce"; }
.icon-podcast::after { content: "\f2ce\f2ce"; }

.icon-presentation::before { content: "\f26c"; }
.icon-presentation::after { content: "\f26c\f26c"; }

.icon-print::before { content: "\f02f"; }
.icon-print::after { content: "\f02f\f02f"; }

.icon-rss::before { content: "\f09e"; }
.icon-rss::after { content: "\f09e\f09e"; }

.icon-search::before { content: "\f002"; }
.icon-search::after { content: "\f002\f002"; }

.icon-share::before { content: "\f14d"; }
.icon-share::after { content: "\f14d\f14d"; }

.icon-shipping::before { content: "\f48b"; }
.icon-shipping::after { content: "\f48b\f48b"; }

.icon-sign-in::before { content: "\f2f6"; }
.icon-sign-in::after { content: "\f2f6\f2f6"; }

.icon-sign-out::before { content: "\f2f5"; }
.icon-sign-out::after { content: "\f2f5\f2f5"; }

.icon-sitemap::before { content: "\f0e8"; }
.icon-sitemap::after { content: "\f0e8\f0e8"; }

.icon-spreadsheet::before { content: "\f0ce"; }
.icon-spreadsheet::after { content: "\f0ce\f0ce"; }

.icon-tools::before { content: "\f7d9"; }
.icon-tools::after { content: "\f7d9\f7d9"; }

.icon-trademark::before { content: "\f25c"; }
.icon-trademark::after { content: "\f25c\f25c"; }

.icon-trash::before { content: "\f2ed"; }
.icon-trash::after { content: "\f2ed\f2ed"; }

.icon-user::before { content: "\f007"; }
.icon-user::after { content: "\f007\f007"; }

.icon-user-check::before { content: "\f4fc"; }
.icon-user-check::after { content: "\f4fc\f4fc"; }

.icon-user-circle::before { content: "\f2bd"; }
.icon-user-circle::after { content: "\f2bd\f2bd"; }

.icon-user-lock::before { content: "\f502"; }
.icon-user-lock::after { content: "\f502\f502"; }

.icon-user-profile::before { content: "\f2bb"; }
.icon-user-profile::after { content: "\f2bb\f2bb"; }

.icon-user-shield::before { content: "\f505"; }
.icon-user-shield::after { content: "\f505\f505"; }

.icon-users::before { content: "\f500"; }
.icon-users::after { content: "\f500\f500"; }

.icon-users2::before { content: "\f0c0"; }
.icon-users2::after { content: "\f0c0\f0c0"; }

.icon-universal-access::before { content: "\f29a"; }
.icon-universal-access::after { content: "\f29a\f29a"; }

.icon-video::before { content: "\f03d"; }
.icon-video::after { content: "\f03d\f03d"; }

.icon-warning::before { content: "\f071"; }
.icon-warning::after { content: "\f071\f071"; }

/*
    Font Awesome 6

.icon-00::before { content: "\e467"; }
.icon-00::::after { content: "\e467\e467"; }

.icon-0::before { content: "\f030"; }
.icon-0::::after { content: "\f030\f030"; }

.icon-1::before { content: "\f031"; }
.icon-1::::after { content: "\f031\f031"; }

.icon-2::before { content: "\f032"; }
.icon-2::::after { content: "\f032\f032"; }

.icon-3::before { content: "\f033"; }
.icon-3::::after { content: "\f033\f033"; }

.icon-4::before { content: "\f034"; }
.icon-4::::after { content: "\f034\f034"; }

.icon-5::before { content: "\f035"; }
.icon-5::::after { content: "\f035\f035"; }

.icon-6::before { content: "\f036"; }
.icon-6::::after { content: "\f036\f036"; }

.icon-7::before { content: "\f037"; }
.icon-7::::after { content: "\f037\f037"; }

.icon-8::before { content: "\f038"; }
.icon-8::::after { content: "\f038\f038"; }

.icon-9::before { content: "\f039"; }
.icon-9::::after { content: "\f039\f039"; }

*/

.icon-00::before { content: "00"; font-family: Arial, Helvetica, sans-serif; }
.icon-0::before { content: "0"; font-family: Arial, Helvetica, sans-serif; }
.icon-1::before { content: "1"; font-family: Arial, Helvetica, sans-serif; }
.icon-2::before { content: "2"; font-family: Arial, Helvetica, sans-serif; }
.icon-3::before { content: "3"; font-family: Arial, Helvetica, sans-serif; }
.icon-4::before { content: "4"; font-family: Arial, Helvetica, sans-serif; }
.icon-5::before { content: "5"; font-family: Arial, Helvetica, sans-serif; }
.icon-6::before { content: "6"; font-family: Arial, Helvetica, sans-serif; }
.icon-7::before { content: "7"; font-family: Arial, Helvetica, sans-serif; }
.icon-8::before { content: "8"; font-family: Arial, Helvetica, sans-serif; }
.icon-9::before { content: "9"; font-family: Arial, Helvetica, sans-serif; }

/*
    Documents
*/

.icon-csv::before { content: "\f6dd"; }
.icon-csv::after { content: "\f6dd\f6dd"; }

.icon-file::before { content: "\f15c"; }
.icon-file::after { content: "\f15c\f15c"; }

.icon-folder::before { content: "\f07b"; }
.icon-folder::after { content: "\f07b\f07b"; }

.icon-folder-open::before { content: "\f07c"; }
.icon-folder-open::after { content: "\f07c\f07c"; }

.icon-pdf::before { content: "\f1c1"; }
.icon-pdf::after { content: "\f1c1\f1c1"; }

.icon-powerpoint::before { content: "\f1c4"; }
.icon-powerpoint::after { content: "\f1c4\f1c4"; }

.icon-word::before { content: "\f1c2"; }
.icon-word::after { content: "\f1c2\f1c2"; }

.icon-xls::before { content: "\f1c3"; }
.icon-xls::after { content: "\f1c3\f1c3"; }

.icon-zip::before { content: "\f1c6"; }
.icon-zip::after { content: "\f1c6\f1c6"; }

/*
    Social Icons
*/

.icon-brand::before { font-family: 'Font Awesome 6 Brands';}

.icon-facebook::before { font-family: 'Font Awesome 6 Brands'; content: "\f39e"; } 
.icon-facebook-circle::before { font-family: 'Font Awesome 6 Brands'; content: "\f09a"; } 
.icon-facebook-square::before { font-family: 'Font Awesome 6 Brands'; content: "\f082"; } 

.icon-facebook-messenger::before { font-family: 'Font Awesome 6 Brands'; content: "\f39f"; } 

.icon-instagram::before { font-family: 'Font Awesome 6 Brands'; content: "\f16d"; } 
.icon-instagram-square::before { font-family: 'Font Awesome 6 Brands'; content: "\e055"; } 

.icon-linkedin::before { font-family: 'Font Awesome 6 Brands'; content: "\f0e1"; }
.icon-linkedin-square::before { font-family: 'Font Awesome 6 Brands'; content: "\f08c"; }

.icon-threads::before { font-family: 'Font Awesome 6 Brands'; content: "\e618"; }
.icon-threads-square::before { font-family: 'Font Awesome 6 Brands'; content: "\e619"; } 

.icon-pinterest::before { font-family: 'Font Awesome 6 Brands'; content: "\f231"; } 
.icon-pinterest-square::before { font-family: 'Font Awesome 6 Brands'; content: "\f0d3"; }
.icon-pinterest-square::before { font-family: 'Font Awesome 6 Brands'; content: "\f0d2"; }

.icon-twitter::before { font-family: 'Font Awesome 6 Brands'; content: "\f099"; }
.icon-twitter-square::before { font-family: 'Font Awesome 6 Brands'; content: "\f081"; }
.icon-x-twitter::before { font-family: 'Font Awesome 6 Brands'; content: "\e61b"; }

.icon-vimeo::before { font-family: 'Font Awesome 6 Brands'; content: "\f27d"; }
.icon-vimeo-square::before { font-family: 'Font Awesome 6 Brands'; content: "\f194"; }

.icon-youtube::before { font-family: 'Font Awesome 6 Brands'; content: "\f167"; }
.icon-youtube-square::before { font-family: 'Font Awesome 6 Brands'; content: "\f432"; }

/*
    Image Files
*/

.icon.icon-imagefile {
    position: relative;
}

    .icon.icon-imagefile::before {
        content: "";
        margin-right: 0px;
    }

    .icon.icon-imagefile > img {
        position: absolute;
        top: calc(50% - calc(var(--icon-size) * 0.5));
        left: calc(50% - calc(var(--icon-size) * 0.5));
        line-height: 0px;
        margin: 0px;
        width: var(--icon-size) !important;
        height: var(--icon-size) !important;
        object-fit: contain;
    }

.icon.icon-imagefile.icon-circle > img {
    /*margin: 0.325em var(--icon-padding) 0.4375em;*/
    /*margin: var(--icon-padding);*/
}

.icon.icon-imagefile.icon-small {
}

    .icon.icon-imagefile.icon-small > img {
        font-size: 0.5em; /* To do: Why is this 25% bigger than the equivalent icon? */
    }

.icon.icon-imagefile.icon-medium {
}

    .icon.icon-imagefile.icon-medium > img {
        font-size: 1em; /* To do: Why is this 25% bigger than the equivalent icon? */
    }

.icon.icon-imagefile.icon-large {
}

    .icon.icon-imagefile.icon-large > img {
        width: 2em;
        font-size: 2em; /* To do: Why is this 25% bigger than the equivalent icon? */
    }

.icon.icon-imagefile.icon-larger {
}

    .icon.icon-imagefile.icon-larger > img {
        font-size: 3em; /* To do: Why is this 25% bigger than the equivalent icon? */
    }

.icon.icon-imagefile.icon-huge {
}

    .icon.icon-imagefile.icon-huge > img {
        font-size: 5.625em; /* To do: Why is this 25% bigger than the equivalent icon? */
    }

.icon.icon-imagefile.icon-mega {
}

    .icon.icon-imagefile.icon-mega > img {
        font-size: 7.5em; /* To do: Why is this 25% bigger than the equivalent icon? */
    }