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

   - Critical Rendering Path: Recommended
   ################################## */

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

/*@import url('/AcoraCMS/Icons/fontawesome-free-6.4.2/css/all.css');*/ /* Free version of Font Awesome. */
@import url('/AcoraCMS/Icons/fontawesome-pro-6.4.2/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. */

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

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

.icon {
}

    .icon::before {
        position: relative;
        -moz-osx-font-smoothing: greyscale;
        -webkit-font-smoothing: antialiased;
        display: inline-block;
        vertical-align: baseline;
        height: 1.25em; /* Must use dynamic units to help the text sizer. */
        width: 1.25em; /* Must use dynamic units to help the text sizer. */
        /*margin-top: -0.25em;*/ /* To do: Use this or not? Does the need depend on the site font? */
        margin-right: 0.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: 1em;
        font-style: normal;
        font-variant: normal;
        text-rendering: auto;
        line-height: 1.25em;
    }

    .icon::after {
        display: none;
    }

i.icon, 
span.icon {
    /* An inline tag with only an icon in it. */
}

/* Icons in buttons often need a slightly different treatment. */

.button.icon::before {
    color: inherit;
    margin-right: 0.25em;
    margin-top: -0.125em;
}

.button-large.icon::before {
    margin-top: -0.25em;
}

.button.icon:empty::before {
    margin-right: 0;
    margin-top: 0;
}

/* 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 {
    /* Fix for icon fonts that apply the font to the connected element. */
    position: relative;
    font-family: inherit;
    font-weight: inherit;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
}

    .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);
    }

    .icon-duotone::after {
        display: inline-block;
        position: absolute;
        top: 0;
        left: 0;
        -moz-osx-font-smoothing: greyscale;
        -webkit-font-smoothing: antialiased;
        height: 1.25em; /* Must match the ::before setting. */
        width: 1.25em; /* Must match the ::before setting. */
        text-align: center;
        color: var(--site-icon-duotone-color-secondary);
        font-family: var(--site-icon-duotone-font-family);
        font-weight: var(--site-icon-font-weight);
        font-size: 1em;
        font-style: normal;
        font-variant: normal;
        text-rendering: auto;
        opacity: 1;
    }

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

.icon-duotone.fad,
.icon-duotone.fa-duotone {
    /* Fix for icon fonts that apply the font to the connected element. 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 {
    font-size: 0.5em;
    margin-top: -0.25em;
}

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

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

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

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

.icon-mega::before,
.icon-mega::after {
    font-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. Relieas 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) !important;
        background: var(--bg, #f8f9fa) !important;
    }

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

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

    .icon.icon-duotone[class*=color-]::after {
        color: var(--color) !important;
        border-color: var(--color);
        opacity: 0.35;
    }

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

    a.icon[class*=color-]:hover,
    a.icon[class*=color-]:focus {
        color: inherit !important;
    }

        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-bg);
        }

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

/* 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 {
    /* Duotone icons are not currently supported in combination with icon layouts. */
    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;
        }

/*
    16x16 - Standard
*/

.iconPdf {
    display: inline-block;
    min-height: 16px;
    padding: 1px 0 0 20px;
    background: url('../../images/icons/16x16_pdf.gif') top left no-repeat;
}

.iconPrint {
    display: inline-block;
    min-height: 16px;
    padding: 0 0 0 20px;
    background: url('../../images/icons/16x16_printer.gif') no-repeat;
}

.iconEmail {
    display: inline-block;
    min-height: 16px;
    padding: 0 0 0 20px;
    background: url('../../images/icons/16x16_email.gif') no-repeat;
}

.iconRss {
    display: inline-block;
    min-height: 16px;
    padding: 0 0 0 20px;
    background: url('../../images/icons/16x16_rss.gif') no-repeat;
}

.iconShare {
    display: inline-block;
    min-height: 16px;
    padding: 0 0 0 20px;
    background: url('../../images/icons/16x16_share.gif') no-repeat;
}

.iconHelp {
    display: inline-block;
    min-height: 16px;
    padding: 0 0 0 20px;
    background: url('../../images/icons/16x16_help.gif') no-repeat;
}

.iconDownload {
    display: inline-block;
    min-height: 16px;
    padding: 0 0 0 20px;
    background: url('../../images/icons/16x16_page_download.gif') no-repeat;
}

.iconCsv, .iconXls, .iconSpreadsheet {
    display: inline-block;
    min-height: 16px;
    padding: 0 0 0 20px;
    background: url('../../images/icons/16x16_xls.gif') no-repeat;
}

.iconLock {
    display: inline-block;
    min-height: 16px;
    padding: 0 0 0 20px;
    background: url('../../images/icons/16x16_lock.gif') no-repeat;
}

.iconLink {
    display: inline-block;
    min-height: 16px;
    padding: 0 0 0 20px;
    background: url('../../images/icons/16x16_link_2.gif') no-repeat;
}

.iconComment {
    display: inline-block;
    min-height: 16px;
    padding: 0 0 0 20px;
    background: url('../../images/icons/16x16_user_comment.gif') no-repeat;
}

.iconImage {
    display: inline-block;
    min-height: 16px;
    padding: 0 0 0 20px;
    background: url('../../images/icons/16x16_image.gif') no-repeat;
}

.iconSound {
    display: inline-block;
    min-height: 16px;
    padding: 0 0 0 20px;
    background: url('../../images/icons/16x16_sound.png') no-repeat;
}

.iconVideo {
    display: inline-block;
    min-height: 16px;
    padding: 0 0 0 20px;
    background: url('../../images/icons/16x16_mpg.gif') no-repeat;
}

.iconFeedback, .iconContact {
    display: inline-block;
    min-height: 16px;
    padding: 0 0 0 20px;
    background: url('../../images/icons/16x16_user_comment.gif') no-repeat;
}

.iconLinkedIn {
    display: inline-block;
    min-height: 16px;
    padding: 0 0 0 20px;
    background: url('/images/cms/icons/socialmedia/linkedin_16.png') no-repeat;
}

.iconTwitter {
    display: inline-block;
    min-height: 16px;
    padding: 0 0 0 20px;
    background: url('/images/cms/icons/socialmedia/twitter_16.png') no-repeat;
}

.iconFacebook {
    display: inline-block;
    min-height: 16px;
    padding: 0 0 0 20px;
    background: url('/images/cms/icons/socialmedia/facebook_16.png') no-repeat;
}

.iconYoutube {
    display: inline-block;
    min-height: 16px;
    padding: 0 0 0 20px;
    background: url('/images/cms/icons/socialmedia/youtube_16.png') no-repeat;
}

/* 
    32x32 
*/

.iconFacebook.icon32 {
    display: inline-block;
    min-height: 32px;
    padding: 0 0 0 36px;
    background: url('/images/cms/icons/socialmedia/facebook_ok.png') no-repeat;
}

.iconLinkedIn.icon32 {
    display: inline-block;
    min-height: 32px;
    padding: 0 0 0 36px;
    background: url('/images/cms/icons/socialmedia/linkedin_ok.png') 0 0 no-repeat;
}

.iconGoogle.icon32 {
    display: inline-block;
    min-height: 32px;
    padding: 0 0 0 36px;
    background: url('../../../images/icons/32x32_google.png') 0 0 no-repeat;
}

.iconTwitter.icon32 {
    display: inline-block;
    min-height: 32px;
    padding: 0 0 0 36px;
    background: url('/images/cms/icons/socialmedia/twitter_ok.png') no-repeat;
}

.iconRss.icon32 {
    display: inline-block;
    min-height: 32px;
    padding: 0 0 0 36px;
    background: url('../../../images/icons/32x32_rss.png') 0 0 no-repeat;
}

.iconYoutube.icon32 {
    display: inline-block;
    min-height: 32px;
    padding: 0 0 0 36px;
    background: url('/images/cms/icons/socialmedia/youtube_ok.png') no-repeat;
}

.iconInstagram.icon32 {
    display: inline-block;
    min-height: 32px;
    padding: 0 0 0 36px;
    background: url('/images/cms/icons/socialmedia/instagram_ok.png') no-repeat;
}

/*
    "Only" an icon: hide everything in the tag except the icon.
    - Be mindful of accessibility when using this, extra content markup might be required
*/

.icon.icon-only {
    --icon-size: 1.25em;
    display: inline-block;
    vertical-align: middle;
    width: var(--icon-size);
    height: var(--icon-size);
    overflow: hidden;
}

    .icon.icon-only.icon-small {
        --icon-size: 0.625em;
    }

    .icon.icon-only.icon-medium {
        --icon-size: 1.25em;
    }

    .icon.icon-only.icon-large {
        --icon-size: 2.25em;
    }

    .icon.icon-only.icon-larger {
        --icon-size: 3.75em;
    }

    .icon.icon-only.icon-huge {
        --icon-size: 5.625em;
    }

    .icon.icon-only.icon-mega {
        --icon-size: 7.5em;
    }

    .icon.icon-only::before,
    .icon.icon-only::after {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 0;
        margin-right: 0;
        padding: 0;
        box-sizing: border-box;
        width: 100%;
        height: 100%;
    }

    .icon.icon-only[class*=icon-circle],
    .icon.icon-only[class*=icon-box] {
        width: calc(var(--icon-size) + 2em);
        height: calc(var(--icon-size) + 2em);
    }

    .icon.icon-only.icon-larger[class*=icon-circle],
    .icon.icon-only.icon-larger[class*=icon-box] {
        --icon-size: 3.75em;
    }

    .icon.icon-only.icon-border {
        width: calc(var(--icon-size) + 2px);
        height: calc(var(--icon-size) + 2px);
    }

    a.icon.icon-only:link {
    }

        a.icon.icon-only:link:hover,
        a.icon.icon-only:link:focus {
            background-color: inherit;
        }

            a.icon.icon-only[class*=icon-circle]:link:hover::before,
            a.icon.icon-only[class*=icon-circle]:link:focus::before,
            a.icon.icon-only[class*=icon-circle]:link:hover::after,
            a.icon.icon-only[class*=icon-circle]:link:focus::after,
            a.icon.icon-only[class*=icon-box]:link:hover::before,
            a.icon.icon-only[class*=icon-box]:link:focus::before,
            a.icon.icon-only[class*=icon-box]:link:hover::after,
            a.icon.icon-only[class*=icon-box]:link:focus::after,
            a.icon.icon-only[class*=icon-circle]:visited:hover::before,
            a.icon.icon-only[class*=icon-circle]:visited:focus::before,
            a.icon.icon-only[class*=icon-circle]:visited:hover::after,
            a.icon.icon-only[class*=icon-circle]:visited:focus::after,
            a.icon.icon-only[class*=icon-box]:visited:hover::before,
            a.icon.icon-only[class*=icon-box]:visited:focus::before,
            a.icon.icon-only[class*=icon-box]:visited:hover::after,
            a.icon.icon-only[class*=icon-box]:visited:focus::after {
                background-color: #c23000;
            }

    .iconOnly {
        width: 16px;
        height: 16px;
        line-height: 16px;
        text-indent: 16px;
        padding: 0 !important;
        text-indent: -10000em;
        overflow: hidden;
    }
    
    .iconOnly.icon32 {
        width: 32px;
        height: 32px;
        line-height: 32px;
        text-indent: 32px;
    }
    
    .iconOnly.icon48 {
        width: 48px;
        height: 48px;
        line-height: 48px;
        text-indent: 48px;
    }
    
    .iconOnly.icon64 {
        width: 64px;
        height: 64px;
        line-height: 64px;
        text-indent: 64px;
    }

/*
    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%) 0 0 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-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-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;
    display: block; /* To do: Doesn't work for inline icons but for now we're not using it that way. Without it and the line-height adjustment we have margin problems. */
    line-height: 0;
}

    .icon > img {
        position: absolute;
        top: 0;
        height: auto !important;
        margin: 0 auto;
        filter: invert(98%) sepia(5%) saturate(2909%) hue-rotate(206deg) brightness(117%) contrast(100%); /* White */
    }

    .icon.icon-imagefile::before {
        content: "";
    }

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

.icon.icon-imagefile.icon-small {
    width: 0.5em;
}

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

.icon.icon-imagefile.icon-medium {
    width: 1em;
}

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

.icon.icon-imagefile.icon-large {
    width: 2em;
}

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

.icon.icon-imagefile.icon-larger {
    width: 3em;
}

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

.icon.icon-imagefile.icon-huge {
    width: 4.5em;
}

    .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 {
    width: 6em; 
}

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

em[class^="fa"] {
    vertical-align: middle;
}