@charset "utf-8";

/* 
*  CSS TABLE OF CONTENTS
*   
*  1.0 - Import base classes
*  2.0 - Common Module Styles (V2023.05.10)
*  3.0 - Modules
*    3.1 - Events (V2019.02.04)
*    3.2 - News
*    3.3 - Menu
*    3.4 - Text/Html
*    3.5 - SiteMap (V2026.05.05)
*    3.6 - Login
*    3.7 - Register
*    3.8 - Breadcrumbs (V2023.02.01)
*    3.9 - Search (V2026.07.06)
*    3.10 - Top Search
*    3.11 - Activity Plan
*    3.12 - eCommerce
*    3.13 - Contacts Form
*    3.14 - FileShare
*    3.15 - Media Gallery
*    3.16 - Language Selector (V2025.09.25)
*    3.17 - Repository
*    3.18 - Photo Gallery
*    3.19 - Quick Links
*    3.20 - RSS Feeder
*    3.21 - Quick Links (new version)
*    3.22 - HtmlParser
*/


/* ---------------------------------------------------------------------------------
1.0 IMPORT BASE CLASSES
------------------------------------------------------------------------------------*/



/* ---------------------------------------------------------------------------------
   2.0 Common Module Styles V2023.05.10
   --------------------------------------------------------------------------------- */

:root {
    /* Font to be used across all the modules suite when in admin/edit mode */
    --module-admin-font: var(--ecm-font-family);
}

/* Pagination */
.pager-container .btn-default-active { background-color: transparent; }

/* File Attachments (frontoffice UI)
   for asset attachments listings in any module that supports attachments */
.ecm-web-file-attachments {

    /* Total assets label */
    & .total-assets-label {
        background-color: var(--text-color);
    }

    /* Type badges */
    & .badge-type {
        font-size: .6rem;
        font-weight: 600;
        letter-spacing: .06em;
        min-width: 42px;
        text-align: center;
        background-color: #f0f0f0 !important;
        color: #555 !important;
    }

    & .badge-pdf  { background-color: #fde8e8 !important; color: #c0392b !important; }
    & .badge-jpg,
    & .badge-png  { background-color: #e3eefb !important; color: #1a6db5 !important; }
    & .badge-xlsx,
    & .badge-xls  { background-color: #e2f5eb !important; color: #1a7a3c !important; }
    & .badge-docx,
    & .badge-doc  { background-color: #e8edfc !important; color: #2c54b0 !important; }
    & .badge-zip  { background-color: #ede8f8 !important; color: #6236b5 !important; }
    & .badge-mp4  { background-color: #fef3e2 !important; color: #b55e00 !important; }

    /* Accordion overrides (only what BS5 doesn't provide) */
    & .accordion-button {
        font-family: 'Poppins', sans-serif;
        font-size: .78rem;
        font-weight: 600;
        letter-spacing: .07em;
        text-transform: uppercase;
        color: #1a1d23;
        background-color: #fff;
        border-left: 3px solid #dee2e6;
        padding: .85rem 1.1rem;
    }
    & .accordion-button:not(.collapsed) {
        color: #1a1d23;
        background-color: #fff;
        border-left-color: var(--link-hover-color);
        box-shadow: none;
    }
    & .accordion-button:focus { box-shadow: none; }

    & .accordion-flush > .accordion-item:has(.accordion-collapse) {
        transition: border-bottom-color ease .2s;
        --bs-accordion-bg: transparent;
    }
    & .accordion-flush > .accordion-item:has(.accordion-collapse.show) {
        border-bottom-color: transparent;
    }
    & .accordion-flush > .accordion-item .col:last-child .attach-item {
        --bs-border-color: transparent !important;
    }

    /* File rows */
    & .attach-item {
        border-left: 3px solid transparent;
        transition: border-color .15s, background-color .15s;
        text-decoration: none;
        color: inherit;
        display: block;
        --bs-bg-opacity: .5;
    }
    & .attach-item:hover {
        background-color: color-mix(in srgb, var(--link-hover-color), #fff 95%) !important;
        border-left-color: var(--link-hover-color);
        border-left-width: 2px !important;
        color: inherit;

        & .btn-dl {
            background-color: var(--link-hover-color) !important;
            color: #fff;
        }
    }

    & .attach-name {
        font-size: .82rem;
        font-weight: 500;
        word-break: break-all;
        line-height: 1.4;
        color: var(--text-color);
    }
    & .attach-desc {
        font-size: .75rem;
        line-height: 1.5;
    }
    & .attach-meta {
        font-size: .68rem !important;
        font-weight: 500;
    }
    & .attach-meta i { font-size: .75rem; }

    /* Download button */
    & .btn-dl {
        width: 34px;
        height: 34px;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;

        &:hover {
            --bs-btn-hover-bg: var(--link-hover-color);
            color: #fff;
        }
    }
}

/* Custom BS Card */
.ecm-web-card {

    &.card {
        box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
        border-radius: 6px;
    }

    & .card-header {
        font-family: var(--module-admin-font);
        font-size: 14px;
        color: #fff;
        border-top-left-radius: 6px;
        border-top-right-radius: 6px;

        & select {
            border: 2px solid #fff;
            border-radius: 15px;
            margin-left: 10px;
            background-color: transparent;
            outline: none;
            color: #fff;
            opacity: .6;
            transition: cubic-bezier(0.7, 0, 0.3, 1), color 0.5s linear, opacity 0.6s linear;
            width: auto;

            &:hover,
            &:focus { opacity: 1; }
            & option { color: var(--brand-primary); }
        }
    }

    & .card-body { color: var(--gray); }
}


/* ---------------------------------------------------------------------------------
3.0 MODULES
------------------------------------------------------------------------------------*/

/* ---------------------------------------------------------------------------------
3.1 EVENT MODULE V2026.07.20
    REQUIRES: eCM FONT
------------------------------------------------------------------------------------*/

/*
   MEvents Module - Common Styles
   -------------------------------------------------- */

/* Removes top space from h3 titles */
.MEvents-container .view1-container .eCM-content-box.style-7 h3 { margin-top: 0; }

/* Common Featured News grid + Archive Calendar modes with Responsive behavior - DO NOT CHANGE */
.MEvents-container .archive-grid ul,
.MEvents-container .featured-events-grid ul {
    font-size: 0px;
    margin-left: -1.25%;
    padding-left: 0;
    list-style: none;
}
.MEvents-container .archive-grid li,
.MEvents-container .featured-events-grid li {
    padding: 0 1.25% 30px;
    font-size: 16px;
    font-size: 1.5rem;
    vertical-align: top;
}

/* Default column settings */
.MEvents-container .archive-grid.columns-1 li,
.MEvents-container .featured-events-grid.columns-1 li { display: block; width: 100%; }
.MEvents-container .archive-grid.columns-2 li,
.MEvents-container .featured-events-grid.columns-2 li { display: inline-block; width: 50%; }
.MEvents-container .archive-grid.columns-3 li,
.MEvents-container .featured-events-grid.columns-3 li { display: inline-block; width: 33.33%; }
.MEvents-container .archive-grid.columns-4 li,
.MEvents-container .featured-events-grid.columns-4 li { display: inline-block; width: 25%; }

/* Reduce titles to h4 equivalent size */
.MEvents-container .featured-events-grid .title h3,
.MEvents-container .archive-grid .title h3 {
    font-size: var(--font-size-h4);
}

/* Archive calendar view mode */
.MEvents-container .archive-calendar {
    background-color: transparent;
    border-collapse: separate;
    border-spacing: 3px;
    margin-bottom: 40px;
}

/* Next/Prev controls */
.MEvents-container .calendar-next-prev {
    padding-bottom: 10px;
    text-decoration: none;
    text-align: center;
}
.MEvents-container .calendar-next-prev a,
.MEvents-container .calendar-next-prev a:visited {
    color: var(--link-color);
    text-decoration: none;
}
.MEvents-container .calendar-next-prev a:hover {
    color: var(--link-hover-color);
    text-decoration: none;
}

/* Title */
.MEvents-container .calendar-title,
.MEvents-container .calendar-title td {
    color: var(--link-color);
    font-family: var(--headings-font-family);
    font-size: 2.0rem;
    font-weight: bold;
    height: 100px;
    vertical-align: middle;
}

/* Day header */
.MEvents-container .calendar-day-header {
    font-family: var(--headings-font-family);
    font-size: 2.0rem;
    font-weight: bold;
    color: var(--reverse-color);
    background-color: var(--link-color);
    text-transform: uppercase;
    border-radius: 5px;
}

/* Day */
.MEvents-container .calendar-day {
    font-family: var(--headings-font-family);
    font-size: 1.5rem;
    color: var(--text-color);
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    height: 35px;
    vertical-align: middle;
    background-color: color-mix(in srgb, var(--gray-light) 95%, white);
    border-radius: 5px;
}
.MEvents-container .calendar-day a,
.MEvents-container .calendar-day a:visited {
    width: 100%;
    line-height: 35px;
    display: block;
    color: var(--link-color);
    text-decoration: none;
}
.MEvents-container .calendar-day a:hover { background-color: var(--link-hover-color); border-radius: 5px; }
.MEvents-container .calendar-day a:hover,
.MEvents-container .calendar-day:hover a { color: var(--reverse-color); text-decoration: none; }

/* Days from previous/next month */
.MEvents-container .calendar-other-month-day a { display: none; }

/* Weekend day */
.MEvents-container .calendar-weekend-day { background-color: var(--gray-light); }

/* Selected day */
.MEvents-container .calendar-selected-day { background-color: var(--link-color); }
.MEvents-container .calendar-selected-day a { color: var(--reverse-color); }


/* ---------------------------------------------------------------------------------
3.2 NEWS MODULE V2024.05.10
    REQUIRES: FONTAWESOME FONT
------------------------------------------------------------------------------------*/

/*
   MNoticias Module
   -------------------------------------------------- */

/* Featured News grid & Archive grid modes with Responsive behavior - DO NOT CHANGE */
.MNoticias-container .RSSLinkContainer { text-align: right; }

.MNoticias-container .featured-news-grid ul {
    margin-left: -2.5%;
    padding-left: 0;
    list-style: none;
}
.MNoticias-container .archive-grid ul { padding-left: 0; }

.MNoticias-container .featured-news-grid li,
.MNoticias-container .archive-grid li {
    display: flex;
    vertical-align: top;
    z-index: 1;
}

/* Ultra Large devices, 4K wide screens - inherits from default */
/* Large Devices, Wide Screens - inherits from default */
@media only screen and (max-width: 4000px) {
    .columns-3 .eCM-content-box.style-5.horizontal,
    .columns-4 .eCM-content-box.style-5.horizontal { padding: 0; }

    .columns-3 .eCM-content-box.style-5.horizontal figure,
    .columns-4 .eCM-content-box.style-5.horizontal figure { float: right; width: 100% !important; }

    .columns-3 .eCM-content-box.style-5.horizontal .content,
    .columns-4 .eCM-content-box.style-5.horizontal .content { clear: both !important; }

    .columns-3 .eCM-content-box.style-5.horizontal .content .title h3,
    .columns-4 .eCM-content-box.style-5.horizontal .content .title h3 { margin-top: var(--line-height-computed); }
}

/* Medium Devices, Desktops - inherits from above */
/* Small Devices, Tablets - inherits from above */
@media only screen and (max-width: 1024px) {
    .columns-2 .eCM-content-box.style-5.horizontal { padding: 0; }
    .columns-2 .eCM-content-box.style-5.horizontal figure { float: right; width: 100% !important; }
    .columns-2 .eCM-content-box.style-5.horizontal .content { clear: both !important; }
    /* Restore h3 top padding when figure is 100% width */
    .columns-2 .eCM-content-box.style-5.horizontal .content .title h3 { margin-top: var(--line-height-computed); }
}

/* Extra small devices, phones - inherits from above */
@media only screen and (max-width: 480px) {
    .columns-1 .eCM-content-box.style-5.horizontal { padding: inherit; }
    .columns-1 .eCM-content-box.style-5.horizontal figure { float: inherit; width: inherit; }
    .columns-1 .eCM-content-box.style-5.horizontal .content { clear: inherit; }
    /* Restore h3 top margin when figure is 100% width */
    .columns-1 .eCM-content-box.style-5.horizontal .content .title h3 { margin-top: var(--line-height-computed); }
}

.MNoticias-container .archive-grid .eCM-content-box.style-5 .date { display: inline-table; }

.MNoticias-container .featured-news-grid .view-01 .categories > span,
.MNoticias-container .featured-news-grid .view-02 .categories > span,
.MNoticias-container .featured-news-slider .view-01 .categories > span,
.MNoticias-container .featured-news-slider .view-02 .categories > span,
.MNoticias-container .archive-grid .eCM-content-box.style-5 .categories > span {
    color: var(--link-hover-color);
    text-transform: uppercase;
    line-height: 20px;
    border-radius: 100px;
    padding: 1px 15px 2px;
    letter-spacing: 1px;
    background-color: transparent;
    border: 1px solid var(--link-hover-color);
    opacity: .6;
}

.MNoticias-container .archive-grid .pager-container { display: block; text-align: center; }

/* Article detail views */
.MNoticias-container .full-article {

    & .news-view-01 .article-header,
    & .news-view-01b .article-header {
        right: 12px;
        left: 12px;
        background: rgb(0, 0, 0); /* Fallback color */
        background: color-mix(in srgb, var(--link-hover-color), transparent 10%);
        color: #f1f1f1;
    }

    & .news-view-02 .article-header,
    & .news-view-02b .article-header {
        background: rgb(0, 0, 0); /* Fallback color */
        background: var(--link-hover-color);
        color: #f1f1f1;
    }

    & .news-view-01 .categories > span,
    & .news-view-01b .categories > span,
    & .news-view-02 .categories > span,
    & .news-view-02b .categories > span {
        color: color-mix(in srgb, var(--link-hover-color) 5%, white);
        text-transform: uppercase;
        line-height: 20px;
        border-radius: 100px;
        padding: 1px 15px 2px;
        letter-spacing: 1px;
        background-color: transparent;
        border: 1px solid var(--reverse-color);
        opacity: .6;
    }

    & .news-view-01 .images-grid,
    & .news-view-01b .images-grid,
    & .news-view-02 .images-grid,
    & .news-view-02b .images-grid {
        position: relative;
        --minimum-width: 180px;
        list-style: none;
        padding: 0;
        display: grid;
        gap: 0px;
        grid-template-columns: repeat(auto-fill, minmax(var(--minimum-width), 1fr));
    }

    & .news-view-01 .images-grid li,
    & .news-view-01b .images-grid li,
    & .news-view-02 .images-grid li,
    & .news-view-02b .images-grid li {
        position: relative;
        cursor: pointer;
    }

    & .news-view-01 .images-grid img,
    & .news-view-01b .images-grid img,
    & .news-view-02 .images-grid img,
    & .news-view-02b .images-grid img {
        background-color: gainsboro; /* To visualize empty space */
        aspect-ratio: var(--aspect-ratio);
        object-fit: cover;
        width: 100%;
    }

    & .news-view-01 .images-grid .grid-item-overlay,
    & .news-view-01b .images-grid .grid-item-overlay,
    & .news-view-02 .images-grid .grid-item-overlay,
    & .news-view-02b .images-grid .grid-item-overlay {
        position: absolute;
        width: 100%;
        height: 100%;
        background: var(--overlay-bg-color);
        top: 0;
        left: 0;
        transform: scale(0);
        transition: all 0.1s 0.1s ease-in-out;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    & .news-view-01 .images-grid li:hover .grid-item-overlay,
    & .news-view-01b .images-grid li:hover .grid-item-overlay,
    & .news-view-02 .images-grid li:hover .grid-item-overlay,
    & .news-view-02b .images-grid li:hover .grid-item-overlay {
        transform: scale(1);
    }
}

/* Extra small devices, phones */
@media only screen and (max-width: 480px) {
    .MNoticias-container .full-article {
        & .news-view-01 .article-header,
        & .news-view-01b .article-header {
            position: relative !important; /* Show info below the image */
            right: 0;
            left: 0;
            background: var(--link-hover-color);
        }
    }
}


/* ---------------------------------------------------------------------------------
3.3 MENU MODULE V2021.03.11
    REQUIRES: FONTAWESOME FONT
------------------------------------------------------------------------------------*/

.MMenusContainer {margin: 0px;}

/* RESET DEFAULT STYLES */
/*.RadMenu .rmLink {padding:0px !important;}*/
.RadMenu .rmGroup .rmText {margin:0px !important;}
.RadMenu:focus { box-shadow: none !important;}

/* ------------------------ */
/* COMMON TO ALL MENU FLOWS */
/* ------------------------ */

/* Arrow position when child menu exists. Depends on line height of the menu item. */
.RadMenu_Bootstrap .rmVertical>.rmItem .rmExpandDown:after, 
.RadMenu_Bootstrap .rmVertical>.rmItem .rmExpandTop:after, 
.RadMenu_Bootstrap .rmVertical>.rmItem .rmExpandLeft:after, 
.RadMenu_Bootstrap .rmVertical>.rmItem .rmExpandRight:after {
    content: "";
    margin: -4px 4px 0 0;
    border: 4px solid transparent;
    top: 50%;
    right: 5px !important;
    border-left-color: transparent !important;
    border-right-color: inherit !important;
    border-bottom-color: inherit !important;
}
.RadMenu_Bootstrap .rmRootGroup {
    border: none !important;
    background-color: transparent !important;
}
/* Removes default top/bottom padding */
.RadMenu_Bootstrap .rmRootLink {
    padding: 0px 15px 0px 15px !important;
}
/* Reduces left padding from default 28px */
.RadMenu .rmGroup .rmText {
    padding: 0 54px 0 15px !important;
}

/* Style disabled menus */
.ModuloMenus .rmItem a.rmLink.menu-item-disabled {
    padding-right: 15px !important; /* add some space for the disabled page icon */
}
.ModuloMenus .rmItem a.rmLink.menu-item-disabled:before {
  font: normal normal normal 14px FontAwesome;
  content: '\f070'; /* fa-eye-slash */
  display: inline-block;
  position: absolute;
  right: 0;
  color: inherit;
  line-height: inherit;
  margin-right: 5px;
  opacity: .8;
}

/* --------------------- */
/* HORIZONTAL FLOW MENUS */
/* --------------------- */

/* ROOT ITEMS */

/* Container of root menu */
.ModuloMenus .rmHorizontal.rmRootGroup { border-style: none; }

/* Each root menu item */
.ModuloMenus .rmHorizontal.rmRootGroup .rmItem { line-height: 30px; border-style: none !important; }
.ModuloMenus .rmHorizontal.rmRootGroup .rmItem.rmFirst {} /* only first item */
.ModuloMenus .rmHorizontal.rmRootGroup .rmItem.rmLast {} /* only last item */

.ModuloMenus .rmHorizontal.rmRootGroup .rmItem a.rmLink {
    cursor: pointer;
    text-decoration: none;
    color: #4e5961;
    border-radius: 15px;
}
.ModuloMenus .rmHorizontal.rmRootGroup > .rmItem a.rmLink:hover,
.ModuloMenus .rmHorizontal.rmRootGroup > .rmItem a.rmFocused,
.ModuloMenus .rmHorizontal.rmRootGroup > .rmItem a.rmSelected,
.ModuloMenus .rmHorizontal.rmRootGroup > .rmItem a.rmExpanded {
    color: #fff !important;
    background-color: var(--link-hover-color);
}
.ModuloMenus .rmHorizontal.rmRootGroup .rmItem a.rmDisabled,
.ModuloMenus .rmHorizontal.rmRootGroup .rmItem a.rmDisabled:hover {}

/* Each root menu item text */
.ModuloMenus .rmHorizontal.rmRootGroup .rmText {
    font-family: var(--mainmenus-font-family);
    font-weight: var(--mainmenus-font-weight);
    font-size: var(--mainmenus-font-size);
    text-transform: uppercase;
}

/* CHILD ITEMS - Inherits root settings! */

/* Container of each child menu group */
.ModuloMenus .rmHorizontal.rmRootGroup .rmVertical.rmGroup {
    border-radius: 15px;
    border-color: rgba(229, 229, 229, 1);
    background-color: rgba(245, 245, 245, .90);
    padding: 10px !important;
}

/* Each child menu item text */
.ModuloMenus .rmHorizontal.rmRootGroup .rmVertical.rmGroup .rmText {
    font-family: var(--submenus-font-family);
    font-size: var(--submenus-font-size);
    text-transform: none;
}

/* Each child menu item */
.ModuloMenus .rmHorizontal.rmRootGroup .rmVertical.rmGroup .rmItem {}
.ModuloMenus .rmHorizontal.rmRootGroup .rmVertical.rmGroup .rmItem.rmFirst {} /* only first item */
.ModuloMenus .rmHorizontal.rmRootGroup .rmVertical.rmGroup .rmItem.rmLast {} /* only last item */

/* min-width is for submenu items very small to allow text and expanding arrow indicator */
.ModuloMenus .rmHorizontal.rmRootGroup .rmVertical.rmGroup .rmItem a.rmLink {
    cursor: pointer;
    min-width: 100px;
    border-radius: 15px;
}
.ModuloMenus .rmHorizontal.rmRootGroup .rmVertical.rmGroup .rmItem a.rmLink:hover,
.ModuloMenus .rmHorizontal.rmRootGroup .rmVertical.rmGroup .rmItem a.rmFocused,
.ModuloMenus .rmHorizontal.rmRootGroup .rmVertical.rmGroup .rmItem a.rmSelected {
    background: var(--brand-primary);
}
.ModuloMenus .rmHorizontal.rmRootGroup .rmVertical.rmGroup .rmItem a.rmExpanded,
.ModuloMenus .rmHorizontal.rmRootGroup .rmVertical.rmGroup .rmItem a.rmExpanded:hover {}
.ModuloMenus .rmHorizontal.rmRootGroup .rmVertical.rmGroup .rmItem a.rmDisabled,
.ModuloMenus .rmHorizontal.rmRootGroup .rmVertical.rmGroup .rmItem a.rmDisabled:hover {}

/* ------------------- */
/* VERTICAL FLOW MENUS */
/* ------------------- */

/* ROOT ITEMS */

/* Container of root menu */
.ModuloMenus .rmVertical.rmRootGroup {
    margin-left: 0px;
    border-style: none;
    background-color: transparent;
}

/* Each root menu item text */
.ModuloMenus .rmVertical.rmRootGroup .rmText {
    font-family: var(--mainmenus-font-family);
    font-weight: var(--mainmenus-font-weight);
    font-size: var(--mainmenus-font-size);
    text-transform: uppercase;
}

/* Each root menu item */
.ModuloMenus .rmVertical.rmRootGroup .rmItem {
    line-height: 30px;
    border-bottom: solid 1px #eeeeee; /* line between items */
}
.ModuloMenus .rmVertical.rmRootGroup .rmItem.rmFirst {} /* only first item */
.ModuloMenus .rmVertical.rmRootGroup .rmItem.rmLast {} /* only last item */

/* link */
.ModuloMenus .rmVertical.rmRootGroup .rmItem a.rmLink {
    cursor: pointer;
    text-decoration: none;
    color: #4e5961;
    border-radius: 15px;
}
.ModuloMenus .rmVertical.rmRootGroup .rmItem a.rmLink:hover,
.ModuloMenus .rmVertical.rmRootGroup .rmItem a.rmFocused,
.ModuloMenus .rmVertical.rmRootGroup .rmItem a.rmSelected,
.ModuloMenus .rmVertical.rmRootGroup .rmItem a.rmExpanded,
.ModuloMenus .rmVertical.rmRootGroup .rmItem a.rmExpanded:hover {
    color: #fff !important;
    background-color: var(--link-hover-color);
}
.ModuloMenus .rmVertical.rmRootGroup .rmItem a.rmDisabled,
.ModuloMenus .rmVertical.rmRootGroup .rmItem a.rmDisabled:hover {}

/* CHILD ITEMS - Inherits root settings! */

/* Container of each child menu group */
.ModuloMenus .rmVertical.rmRootGroup .rmVertical.rmGroup {
    border-radius: 15px;
    border-color: rgba(229, 229, 229, 1);
    background-color: rgba(245, 245, 245, .90);
    padding: 10px !important;
}

/* Each child menu item text */
.ModuloMenus .rmVertical.rmRootGroup .rmVertical.rmGroup .rmText {
    font-family: var(--submenus-font-family);
    font-size: var(--submenus-font-size);
    text-transform: none;
}
/* Each child menu item */
.ModuloMenus .rmVertical.rmRootGroup .rmVertical.rmGroup .rmItem {}
.ModuloMenus .rmVertical.rmRootGroup .rmVertical.rmGroup .rmItem.rmFirst {} /* only first item */
.ModuloMenus .rmVertical.rmRootGroup .rmVertical.rmGroup .rmItem.rmLast {} /* only last item */
/* link */
.ModuloMenus .rmVertical.rmRootGroup .rmVertical.rmGroup .rmItem a.rmLink {
    cursor: pointer;
}
.ModuloMenus .rmVertical.rmRootGroup .rmVertical.rmGroup .rmItem a.rmLink:hover,
.ModuloMenus .rmVertical.rmRootGroup .rmVertical.rmGroup .rmItem a.rmFocused,
.ModuloMenus .rmVertical.rmRootGroup .rmVertical.rmGroup .rmItem a.rmSelected {
    background: var(--brand-primary);
}
.ModuloMenus .rmVertical.rmRootGroup .rmVertical.rmGroup .rmItem a.rmExpanded,
.ModuloMenus .rmVertical.rmRootGroup .rmVertical.rmGroup .rmItem a.rmExpanded:hover {}
.ModuloMenus .rmVertical.rmRootGroup .rmVertical.rmGroup .rmItem a.rmDisabled,
.ModuloMenus .rmVertical.rmRootGroup .rmVertical.rmGroup .rmItem a.rmDisabled:hover {}

/* Mobile style - inherits from BlackMetroTouch skin */
.RadMenuPopup.ModuloMenus {
    width: 80% !important;
    z-index: 120;
}
.RadMenu_BlackMetroTouch.ModuloMenus {
    background: black !important;
    border: 1px solid #333333 !important;
}
.RadMenu_BlackMetroTouch .rmRootToggle {
    background-color: var(--link-color) !important;
    border-color: var(--link-color) !important;
}
.RadMenu_BlackMetroTouch .rmRootToggle:active,
.RadMenu_BlackMetroTouch .rmRootToggle.rmExpanded {
    background-color: var(--link-hover-color) !important;
    border-color: var(--link-hover-color) !important;
}
.RadMenuPopup_Material.ModuloMenus .rmItem {
    border-top: 1px solid #ddd;
}

/* Accordion Menu */
.AccordionMenu { background-color: transparent; }

/* ROOT ITEM */
.AccordionMenu .rpRootGroup {
    background-color: transparent !important;
    border: 0 none !important;
}
.AccordionMenu .rpRootGroup .rpItem.rpFirst { border-top: 0 none; }

/* COMMON TO ALL ITEMS */

/* Common style for items */
.AccordionMenu .rpLink.menu-item-disabled::before {
    font: normal normal normal 14px FontAwesome;
    content: '\f070'; /* fa-eye-slash */
    display: inline-block;
    position: absolute;
    right: 0;
    color: #999;
    line-height: inherit;
}
.AccordionMenu .rpLink.rpExpandable.menu-item-disabled::before {
    right: 35px;
}
.AccordionMenu .rpItem {
    font-family: var(--submenus-font-family) !important;
    font-size: var(--submenus-font-size) !important;
    line-height: 40px;
    border-top: 1px solid var(--gray-light);
    text-transform: uppercase;
    font-weight: var(--submenus-font-weight);
}

/* Common style for links inside items */
.AccordionMenu .rpLink {
    color: var(--link-color);
    border: 0 !important;
    position: relative;
    background-color: transparent;
    transition-property: all;
    transition-duration: 300ms;
    transition-timing-function: ease;
}
.AccordionMenu .rpLink:hover { color: var(--link-hover-color); }
.AccordionMenu .rpLink:hover .rpText { color: var(--link-hover-color); }
.AccordionMenu .rpLink.rpExpanded { color: var(--link-hover-color); }
.AccordionMenu .rpLink.rpFocused { color: var(--link-hover-color); }
.AccordionMenu .rpLink.rpDisabled { cursor: not-allowed; }
.AccordionMenu .rpLink.rpDisabled,
.AccordionMenu .rpLink:hover.rpDisabled,
.AccordionMenu .rpLink:hover.rpDisabled .rpText { color: var(--gray-light); }

.AccordionMenu .rpOut { padding: 0 !important; border: 0 !important; }

.AccordionMenu .rpExpandHandle {
    margin: 0 !important;
    width: 22px !important;
    height: 22px !important;
    border-radius: 15px;
    position: absolute;
    top: 10px;
    left: auto;
    right: 5px;
}
.AccordionMenu .rpExpandable .rpExpandHandle {
    border: 0px solid;
    background-image: url('img/radActionsSprite.png');
    background-position: -14px -63px;
    background-color: var(--link-color);
    transition-property: all;
    transition-duration: 300ms;
    transition-timing-function: ease;
}
.AccordionMenu .rpExpanded .rpExpandHandle {
    border: 0px solid;
    background-position: -14px -15px;
    background-color: var(--link-hover-color);
}
.AccordionMenu .rpItem .rpLink:hover.rpExpandable .rpExpandHandle { background-color: var(--link-hover-color); }
.AccordionMenu .rpItem .rpLink:hover.rpDisabled .rpExpandHandle { background-color: var(--gray-light); }

/* CHILD ITEMS */

/* Common style for child items */
.AccordionMenu .rpGroup .rpItem.rpFirst { border-top: 1px solid var(--gray-light); }
.AccordionMenu .rpGroup .rpItem {
    font-family: var(--submenus-font-family) !important;
    font-size: 0.875rem !important; /* 14px */
    line-height: 24px;
    border-top: 1px solid color-mix(in srgb, var(--gray-light) 98%, white);
    font-weight: var(--submenus-font-weight);
    text-transform: none;
}
.AccordionMenu .rpGroup .rpItem .rpLink {
    color: #8c9099;
    background-color: transparent;
    font-size: inherit;
    line-height: 24px;
}
.AccordionMenu .rpGroup .rpItem .rpLink:hover {
    color: var(--link-hover-color);
    background-color: transparent;
}
.AccordionMenu .rpGroup .rpItem .rpLink.rpDisabled { color: var(--gray-light); }

/* Right space for each child item level */
.AccordionMenu .rpGroup.rpLevel1 .rpItem .rpLink .rpText { padding: 0 20px; }
.AccordionMenu .rpGroup.rpLevel2 .rpItem .rpLink .rpText { padding: 0 30px; }

.AccordionMenu .rpGroup .rpItem .rpLink.rpExpanded {
    color: var(--link-hover-color) !important;
    background-color: none !important;
}
.AccordionMenu .rpGroup .rpItem .rpLink.rpSelected {
    color: color-mix(in srgb, var(--link-hover-color) 75%, black) !important;
    background-color: none !important;
}
.AccordionMenu .rpGroup .rpItem .rpLink.rpFocused {
    color: color-mix(in srgb, var(--link-hover-color) 75%, black) !important;
    background-color: none !important;
}
.AccordionMenu .rpGroup .rpExpandHandle { border: 0 !important; top: 2px; }


/* ---------------------------------------------------------------------------------
3.4 TEXT/HTML MODULE V2023.06.21
------------------------------------------------------------------------------------*/

.MTextoHTMLContainer {}
.MTextoHTMLTitulo { font-size: var(--font-size-h3); }
.MTextoHTMLCorpo {}

.MTextoHTMLContainer {

    & .texthtml-view-01 .article-header,
    & .texthtml-view-01b .article-header,
    & .texthtml-view-01c .article-header,
    & .texthtml-view-01d .article-header {
        bottom: 0; /* At the bottom. Use top:0 to append it to the top */
        background: rgb(0, 0, 0); /* Fallback color */
        background: var(--overlay-bg-color); /* Black background with 0.5 opacity */
        color: #f1f1f1; /* Grey text */
        width: 100%; /* Full width when the parent is position-relative */

        &.position-absolute {
            width: calc(100% - var(--bs-gutter-x)); /* Full width minus the padding of the BS container */
        }
    }

    & .texthtml-view-02 .article-header,
    & .texthtml-view-02b .article-header,
    & .texthtml-view-02c .article-header,
    & .texthtml-view-02d .article-header {
        bottom: 0;
        background: rgb(0, 0, 0); /* Fallback color */
        background: var(--overlay-bg-color); /* Black background with 0.5 opacity */
        color: #f1f1f1;
    }

    & .images-grid {
        position: relative;
        --minimum-width: 180px;
        list-style: none;
        padding: 0;
        display: grid;
        gap: 0px;
        grid-template-columns: repeat(auto-fill, minmax(var(--minimum-width), 1fr)); /* Play with min-value */
    }

    & .images-grid li {
        position: relative;
        cursor: pointer;
    }

    & .images-grid img {
        background-color: gainsboro; /* To visualize empty space */
        aspect-ratio: var(--aspect-ratio);
        object-fit: cover;
        width: 100%;
    }

    & .images-grid .grid-item-overlay {
        position: absolute;
        width: 100%;
        height: 100%;
        background: var(--overlay-bg-color);
        top: 0;
        left: 0;
        transform: scale(0);
        transition: all 0.1s 0.1s ease-in-out;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    & .images-grid li:hover .grid-item-overlay {
        transform: scale(1);
    }
}

/* Extra small devices, phones - inherits from above */
@media only screen and (max-width: 480px) {
    .MTextoHTMLContainer .texthtml-view-01 .article-header,
    .MTextoHTMLContainer .texthtml-view-01b .article-header,
    .MTextoHTMLContainer .texthtml-view-01c .article-header,
    .MTextoHTMLContainer .texthtml-view-01d .article-header {
        position: relative !important; /* Show info below the image */
        right: 0;
        left: 0;
        background: var(--link-hover-color);
    }
}

.MTextoHTMLMultipaginaPaginacao { text-align: right; }
.MTextoHTMLMultipaginaIndice,
.MTextoHTMLMultipaginaIndice a,
.MTextoHTMLMultipaginaPaginacao .previous-page {}
.MTextoHTMLMultipaginaPaginacao .current-page { margin: 0 10px; }
.MTextoHTMLMultipaginaPaginacao .next-page {}


/* ---------------------------------------------------------------------------------
3.5 SITEMAP MODULE V2026.05.05
    REQUIRES: ECM-FONT FONT
------------------------------------------------------------------------------------*/

.MMapaSiteContainer {}

/* Generic style */

/* Links styles */
.RadSiteMap_eCM .rsmLink,
.RadSiteMap_eCM .rsmTemplate {
    font-family: var(--font-family-base);
    color: var(--text-color);
    text-decoration: none;
    background-color: transparent;
}

/* Links hover style */
.RadSiteMap_eCM .rsmLevel.rsmList > .rsmItem > .rsmLink:hover,
.RadSiteMap_eCM .rsmLevel1.rsmList > .rsmItem > .rsmLink:hover,
.RadSiteMap_eCM .rsmLevel2.rsmList > .rsmItem > .rsmLink:hover,
.RadSiteMap_eCM .rsmLevel3.rsmList > .rsmItem > .rsmLink:hover {
    color: var(--link-hover-color);
    text-decoration: none;
}

/* No links/disabled links style */
.RadSiteMap_eCM .rsmLevel.rsmList > .rsmItem.rsmDisabled > .rsmLink:hover,
.RadSiteMap_eCM .rsmLevel1.rsmList > .rsmItem.rsmDisabled > .rsmLink:hover,
.RadSiteMap_eCM .rsmLevel2.rsmList > .rsmItem.rsmDisabled > .rsmLink:hover,
.RadSiteMap_eCM .rsmLevel3.rsmList > .rsmItem.rsmDisabled > .rsmLink:hover {
    color: var(--text-color) !important;
}

/* Responsive behavior - DO NOT REMOVE! */
.RadSiteMap_eCM .rsmColumnWrap .rsmColumn { display: inline-block; min-width: 200px !important; }

/* Just Level 0 */
.RadSiteMap_eCM .rsmLevel > .rsmItem > .rsmLink {
    border-color: var(--gray-light) !important;
    border-width: 0 0 1px !important;
    margin-bottom: 20px !important;
    margin-top: 20px;
    padding-bottom: 5px !important;
    color: var(--link-color);
}
.RadSiteMap_eCM .rsmLevel > .rsmItem > .rsmLink:hover { color: var(--link-hover-color); }

/* Just Level 1 */
.RadSiteMap_eCM .rsmLevel1 > .rsmItem > .rsmLink {
    font-weight: bold;
    border: none;
    padding: 4px 10px !important;
}
/* Only apply dotted border when there's more than 4 levels */
.RadSiteMap_eCM .rsmManyLevels .rsmLevel1 > .rsmItem > .rsmLink {
    border-color: var(--gray-light);
    border-width: 0 0 1px !important;
    border-style: dotted !important;
}
/* All Level 1 rsmLink immediate children */
.RadSiteMap_eCM .rsmLevel1.rsmList > .rsmItem > .rsmLink::before {
    font-family: 'eCM-Font';
    content: '\e99d';
    font-size: 11px;
    padding-right: 5px;
}
.RadSiteMap_eCM .rsmLevel1.rsmFlow > .rsmItem > .rsmLink {}

/* All Level 2 rsmLink immediate children */
.RadSiteMap_eCM .rsmLevel2.rsmList > .rsmItem > .rsmLink {
    padding-left: 15px;
    line-height: var(--line-height-computed);
}
.RadSiteMap_eCM .rsmLevel2.rsmList > .rsmItem > .rsmLink::before {
    font-family: 'eCM-Font';
    content: '\e99d';
    font-size: 11px;
    padding-right: 5px;
}
.RadSiteMap_eCM .rsmLevel2.rsmFlow > .rsmItem > .rsmLink {}

/* Specific style for footer list mode */
.RadSiteMap_eCM.footer-list-mode .rsmItem { margin-bottom: 0 !important; }
.RadSiteMap_eCM.footer-list-mode .rsmLink,
.RadSiteMap_eCM.footer-list-mode .rsmTemplate { padding: 0 0 !important; border-bottom: none; }
.RadSiteMap_eCM.footer-list-mode .rsmLevel > .rsmItem > .rsmLink {
    font-size: var(--font-size-base) !important;
    margin-bottom: auto !important;
    margin-top: auto;
    padding-bottom: 0px !important;
}


/* ---------------------------------------------------------------------------------
3.6 LOGIN MODULE V2014.10.06
------------------------------------------------------------------------------------*/

/* Login NORMAL MODE */
.MLoginNormal {}
.MLoginNormal a {
    text-align: left;
    color: var(--text-color);
    text-decoration: none;
    font-weight: 300;
}
.MLoginNormal .login-button { margin-right: 20px; }
.MLoginNormal .checkbox { display: inline-block; }

/* Ultra Large devices, 4K wide screens - inherits from default */
/* Large Devices, Wide Screens - inherits from default */
@media only screen and (max-width: 4000px) {
    .MLoginNormal .login-actions {
        float: right;
        display: inline-block;
        margin-top: 10px;
    }
    .MLoginNormal .register-link { margin-left: 30px; }
}

/* Small devices, tablets - inherits from above */
@media only screen and (max-width: 768px) {
    .MLoginNormal .login-actions {
        display: block;
        width: 100%;
        margin-top: 50px;
        float: none;
    }
    .MLoginNormal .register-link { margin-left: 15px; }
}

.MLoginNormal .recover-password-link::before,
.MLoginNormal .register-link::before {
    font-family: "FontAwesome";
    content: '\f105';
    margin-right: 5px;
}
.MLoginNormal .recover-password-link:hover,
.MLoginNormal .register-link:hover,
.MLoginNormal .LogoutContainer a:hover { color: var(--link-hover-color); }

/* Logout button centered */
.MLoginNormal .LogoutContainer { text-align: center; }
.MLoginNormal .LogoutContainer .btn { margin-top: 10px; }

/* Logout button in left position */
/*.MLoginNormal .LogoutContainer .welcome-text {display: inline-block; width:50%; float: left}*/

/* Logout button in right position */
/*.MLoginNormal .LogoutContainer .welcome-text {display: inline-block; width:50%; float: right;}*/

.MLoginNormal .Warning_box {
    display: block;
    background-color: #fbefef;
    border: 1px solid #f7d7d7;
    line-height: 14px;
    font-family: Arial, Verdana, Helvetica, sans-serif;
    font-size: 10px;
    color: #d64b57;
    font-weight: 100;
    text-align: center;
    padding: 10px;
    margin-top: 10px;
}
.MLoginNormal .Info_box {
    display: block;
    background-color: #f3f8f1;
    border: 1px solid #e4f0de;
    line-height: 14px;
    font-family: Arial, Verdana, Helvetica, sans-serif;
    font-size: 10px;
    color: #568700;
    font-weight: 100;
    text-align: center;
    padding: 10px;
    margin-top: 10px;
}

/* Login MINI MODE */
.MLoginMini {
    width: 100%;
    text-align: center;
    margin-bottom: 15px;
}
.MLoginMini .link-separator,
.MLoginMini .LinkLogin,
.MLoginMini .LinkRegisto,
.MLoginMini .link-username,
.MLoginMini .link-signout {
    font-family: 'Open Sans', Arial, Verdana, Helvetica, sans-serif;
    font-size: 1.1rem;
    text-decoration: none;
}
.MLoginMini .link-username::before {
    font-family: 'FontAwesome';
    content: '\f007';
    margin-right: 5px;
}
.MLoginMini .link-signout::before {
    font-family: 'FontAwesome';
    content: '\f08b';
    margin-right: 5px;
}
.MLoginMini .link-separator { opacity: .35; }


/* ---------------------------------------------------------------------------------
3.7 REGISTER MODULE V2014.11.02
------------------------------------------------------------------------------------*/

.MRegistoUtilizadores {}
.MRegistoUtilizadores .CamposObrigatorios { color: var(--brand-danger); }

/* MSG registo com sucesso/registo indisponivel/registo sem sucesso */
.MRegistoUtilizadores .MsgAvisoContainer {
    width: 100%;
    background-color: #FEFEFE;
    border: 1px solid #333;
}
.MRegistoUtilizadores .MsgAvisoContainer p { margin: 10px; }


/* ---------------------------------------------------------------------------------
3.8 BREADCRUMBS MODULE V2023.02.01
------------------------------------------------------------------------------------*/

.MBreadcrumbsContainer { display: inline-block; font-size: 0.875rem; }

.BreadCrumbSeparator {
    font-family: var(--font-family-base), Arial, Verdana, Helvetica, sans-serif;
    font-size: inherit;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    color: var(--gray-light);
    padding-left: 2px;
    padding-right: 2px;
}

.BreadCrumbEstaAqui {
    font-family: var(--font-family-base), Tahoma, Verdana, Arial, Helvetica, sans-serif;
    font-size: inherit;
    font-weight: normal;
    display: none; /* Optional */
}

.MBreadcrumbsContainer a,
.MBreadcrumbsContainer a:visited {
    font-family: var(--font-family-base), Tahoma, Verdana, Arial, Helvetica, sans-serif;
    font-size: inherit;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-decoration: none;
}
.MBreadcrumbsContainer a:hover {
    font-family: var(--font-family-base), Tahoma, Verdana, Arial, Helvetica, sans-serif;
    font-size: inherit;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-decoration: none;
}
.MBreadcrumbsContainer a:last-child {
    opacity: .5;
    pointer-events: none;
}


/* ---------------------------------------------------------------------------------
3.9 SEARCH MODULE V2026.07.06
------------------------------------------------------------------------------------*/

.MLiveSearch {}
.MLiveSearch .search-mode {}
.MLiveSearch .search-results-mode {}

/* SEARCH RESULTS MODE
------------------------------------------------------------------------------------*/
.MLiveSearch .search-panel {margin-bottom: 30px}
.MLiveSearch .results-info {margin-bottom: 30px}
.MLiveSearch .results-list {list-style: none; padding-left: 0; margin-left: 0}
.MLiveSearch .results-item {margin-bottom: 20px}
.MLiveSearch .results-item .index {
    font-size: var(--font-size-h4);
    font-family: var(--headings-font-family);
    font-weight: var(--headings-font-weight);
    color: var(--link-color);
}
.MLiveSearch .results-item .title { font-weight: bold; }
.MLiveSearch .results-item .title a,
.MLiveSearch .results-item .title a:visited {
    font-size: var(--font-size-h4);
    font-family: var(--headings-font-family);
    font-weight: var(--headings-font-weight);
    color: var(--link-color);
}
.MLiveSearch .results-item .title a:hover { color: var(--link-hover-color); }
.MLiveSearch .results-item .description {}
.MLiveSearch .results-item .display-url { font-size: 1.1rem; }

/* Pager controls are styled by common eCM CSS */
.MLiveSearch .pager-container { margin-top: 20px; text-align: right; display: block; }

/* OVERLAY SEARCH MODE
   -------------------------------------------------------------------------------- */
.MLiveSearch .overlay-search-mode {
    position: fixed;
    z-index: 10000;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: color-mix(in srgb, var(--overlay-bg-color) 95%, transparent);
}

/* Overlay effects */
.MLiveSearch .overlay-scale {
    visibility: hidden;
    opacity: 0;
    transform: scale(0.9);
    transition: transform 0.2s, opacity 0.2s, visibility 0s 0.2s;
}
.MLiveSearch .overlay-scale.open {
    visibility: visible;
    opacity: 1;
    transform: scale(1);
    transition: transform 0.4s, opacity 0.4s;
}

@supports (backdrop-filter: blur(10px)) {
    .MLiveSearch .overlay-scale.open {
        backdrop-filter: blur(10px);
    }
}

.MLiveSearch .overlay-scale .overlay-close {
    width: 50px;
    height: 50px;
    position: absolute;
    right: 1em;
    top: 1em;
    overflow: hidden;
    text-indent: 100%;
    cursor: pointer;
    pointer-events: none;
    opacity: 0;
    transform: scale3d(0, 0, 1);
}
@media screen and (max-width: 53.125em) {
    .overlay-scale .overlay-close { width: 35px; height: 35px; }
}
.overlay-scale.open .overlay-close {
    opacity: 1;
    pointer-events: auto;
    transform: scale3d(1, 1, 1);
    transition: opacity 0.3s, transform 0.3s;
    transition-delay: 0.5s;
}
.overlay-close::before,
.overlay-close::after {
    content: '';
    position: absolute;
    width: 2px;
    height: 100%;
    top: 0;
    left: 50%;
    border-radius: 3px;
    opacity: 0.3;
    background: #fff;
}
.overlay-close:hover.overlay-close::before,
.overlay-close:hover.overlay-close::after {
    opacity: 1;
}
.overlay-close::before { transform: rotate(45deg); }
.overlay-close::after  { transform: rotate(-45deg); }

.MLiveSearch .overlay-search-mode .search-form {
    margin: 60px auto;
    position: relative;
}
.MLiveSearch .overlay-search-mode.open .search-form {
    width: 80%;
    height: 160px;
}
.MLiveSearch .overlay-search-mode .search-input {
    width: 100%;
    height: 100%;
    padding: 0 10% 0 10px;
    font-family: var(--font-family-base);
    font-weight: 300;
    border: none;
    font-size: 3em;
    color: var(--overlay-fg-color);
    background-color: transparent;
}
@media screen and (max-width: 480px) {
    .MLiveSearch .overlay-search-mode .search-input { font-size: 2em; }
}
.MLiveSearch .overlay-search-mode .search-input::-ms-clear {
    display: none;
}
.MLiveSearch .overlay-search-mode .search-input:focus {
    outline: 0;
}
.MLiveSearch .overlay-search-mode .search-input::placeholder {
    color: #fff;
}
.MLiveSearch .overlay-search-mode .search-submit {
    position: absolute;
    color: #fff;
    right: 0;
    top: 50%;
    border: none;
    pointer-events: none;
    opacity: 0;
    background-color: transparent;
    cursor: pointer;
}
.MLiveSearch .overlay-search-mode .search-submit:hover {
    color: color-mix(in srgb, var(--link-hover-color), black 10%);
}
.MLiveSearch .overlay-search-mode .search-submit:focus {
    outline: 0;
}
.MLiveSearch .overlay-search-mode.open .search-submit {
    pointer-events: auto;
    opacity: 1;    
}
@media screen and (max-width: 53.125em) {
    .MLiveSearch .search-input {
        padding: 0 25% 0 10px;
    }
    .MLiveSearch .overlay-search-mode.open .search-input {
        font-size: 1.3em;
    }
    .MLiveSearch .search-submit i {
        font-size: 1.5em;
    }
}


/* ---------------------------------------------------------------------------------
3.10 TOP SEARCH BOX V2016.09.14
    REQUIRES TOP SEARCH BOX SCRIPT ON ECM.JS
------------------------------------------------------------------------------------*/

.ecm-top-search-box {
    background-color: var(--brand-secondary);
    padding: 60px 20px;
    top: 0px;
    position: absolute;
    left: 0;
    z-index: 100;
    width: 100%;
    display: inline;
    opacity: 0;
    transform: translate(0, -100%);
    transition: transform 0.2s ease, opacity 0.5s ease;

    & .icon-circle {
        display: inline;
        text-align: center;
        border-radius: 50%;
        width: 64px;
        height: 64px;
        padding: 0;
        border: 1px solid var(--brand-secondary);
        transition: background-color 0.2s, color 0.2s;
        vertical-align: middle;
    }

    & .icon-circle-small {
        background-color: color-mix(in srgb, var(--brand-secondary) 95%, white);
        border: none;
        color: #fff;
        display: inline-block;
        margin-right: 20px;
        position: relative;
        width: 64px;
        height: 64px;
        line-height: 64px;
        -webkit-font-smoothing: antialiased;
    }

    & .inner-container {
        margin: auto 5%;
        position: relative;
        height: 64px;
        max-width: 1280px;
    }

    & .col-search {
        white-space: nowrap;
        float: left;
        width: 75%;
        padding: 0 15px;

        & .search-icon {
            position: absolute;
        }
        & .search-input {
            margin-left: 95px;
        }
        & input {
            background-color: transparent;
            border: none;
            height: 100%;
            font-size: 40px;
            font-family: 'Open Sans', sans-serif;
            font-weight: 300;
            color: #fff;
            width: 100%;
            box-shadow: none;
            outline: none;
            border-bottom: 1px solid rgba(255, 255, 255, .1);

            &::placeholder {
                color: #fff;
            }
        }
    }

    & .col-submit {
        width: 25%;
        padding: 0 15px;
        float: left;
        text-align: right;
    }
    & .col-submit .btn {
        margin: auto 0;
    }

    &.open {
        opacity: 1;
        transform: translate(0, 0);
    }
}

@media (min-width: 0) and (max-width: 767px) {
    .ecm-top-search-box { padding: 40px 20px; }
    .ecm-top-search-box .icon-circle-small {
        width: 40px;
        height: 40px;
        line-height: 40px;
    }
    .ecm-top-search-box .inner-container { height: 40px; }
    .ecm-top-search-box .col-search .search-input { margin-left: 64px; }
    .ecm-top-search-box .col-search input { font-size: 25px; }
}

/* Overlay inserted into DOM in runtime */
.ecm-top-search-box-overlay {
    position: fixed;
    left: 0;
    top: -10000;
    z-index: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    background-color: #000;
    transition: opacity 0.2s ease-in;

    &.active {
        top: 0;
        z-index: 60;
        opacity: 0.7;
    }
}


/* ---------------------------------------------------------------------------------
3.11 ACTIVITY PLAN MODULE V2019.11.05
------------------------------------------------------------------------------------*/

.activityplan-module {}

/* ADMIN - GENERIC FONT
------------------------------------------------------------------------------------*/
.activityplan-module-admin *:not(.fa):not(.ecm-icon):not(.k-icon):not(.pager-container a) {
    font-family: var(--module-admin-font);
}

/*
   RadClient Export Manager Styling for PDF Export
   -------------------------------------------------- */

@font-face {
    font-family: 'Open Sans Export';
    src: url('../fonts/open-sans-export-font.ttf');
}

.activityplan-module .pdf-title { display: none; }

.activityplan-module .k-pdf-export.results-bar .pdf-title {
    display: block;
    padding-top: 30px;
    margin-bottom: 20px;
    font-size: 20px;
    color: var(--link-color);
}

.activityplan-module .k-pdf-export.results-bar .header,
.activityplan-module .k-pdf-export.results-bar .pager-container { display: none; }

.activityplan-module .k-pdf-export.results-bar,
.activityplan-module .k-pdf-export.results-bar .results-table-header > th,
.activityplan-module .k-pdf-export.results-bar .results-table-header > th a,
.activityplan-module .k-pdf-export.results-bar .results-table-body > td {
    font-family: 'Open Sans Export' !important;
    font-weight: normal !important;
    pointer-events: none !important;
    color: var(--gray-dark) !important;
}

/* ADMIN BAR
   -------------------------------------------------------------------------------- */

.activityplan-module .admin-nav {
    padding: 0;
    margin: 0;
    width: 100%;
    display: table;
    border-bottom: 1px solid color-mix(in srgb, var(--gray-light) 95%, white);
    margin-bottom: 30px;
}
.activityplan-module .admin-nav li {
    display: table-cell;
    height: 80px;
    line-height: 80px;
    list-style: none;
    text-align: center;
}
.activityplan-module .admin-nav li a {
    width: 100%;
    line-height: normal;
    text-decoration: none;
    font-weight: bold;
    display: table;
    height: 100%;
    vertical-align: middle;
    color: var(--link-color);
    padding: 0 15px;
    text-transform: uppercase;
    position: relative;
}
.activityplan-module .admin-nav li > a::after {
    content: '';
    position: absolute;
    height: 4px;
    width: 100%;
    left: 0;
    bottom: 0;
    background-color: var(--link-hover-color);
    visibility: hidden;
    transform: scaleX(0);
    transition: all .1s ease;
}
.activityplan-module .admin-nav li > a:hover::after {
    visibility: visible;
    transform: scaleX(1);
}
.activityplan-module .admin-nav li a:hover {
    color: var(--link-hover-color);
}
.activityplan-module .admin-nav li.active > a::after {
    visibility: visible;
    transform: scaleX(1);
}
.activityplan-module .admin-nav li.active a,
.activityplan-module .admin-nav li.active a:hover {
    color: var(--link-hover-color);
}
.activityplan-module .admin-nav li.disabled {
    pointer-events: none;
}
.activityplan-module .admin-nav li.disabled a {
    color: color-mix(in srgb, var(--link-color) 30%, transparent);
}
.activityplan-module .admin-nav li.disabled a span.badge {
    background-color: color-mix(in srgb, var(--link-color) 30%, transparent);
}
.activityplan-module .admin-nav li a span {
    display: table-cell;
    vertical-align: middle;
}
.activityplan-module .admin-nav li a span.badge {
    display: inline-block;
    background-color: var(--link-color);
    margin-left: 10px;
}
.activityplan-module .admin-nav li a:hover span.badge {
    background-color: var(--link-hover-color);
}

/* Extra small devices, phones */
@media only screen and (max-width: 768px) {
    .activityplan-module .admin-nav li { display: block; }
}

/* ACTIONS BAR
   -------------------------------------------------------------------------------- */

.activityplan-module .actions-nav {
    padding-top: 30px;
    padding-bottom: 10px;
}
.activityplan-module .actions-nav a {
    text-decoration: none;
    margin-left: 10px;
}
.activityplan-module .actions-nav a i {
    color: #566071;
    vertical-align: middle;
}
.activityplan-module .actions-nav a:hover i {
    color: var(--link-hover-color);
}
.activityplan-module .actions-nav a.disabled {
    pointer-events: none; /* Disables the button completely. Better than just cursor: default; */
    opacity: 0.2;
}
.activityplan-module .actions-nav-separator {
    margin-right: 10px;
    margin-left: 10px;
    border: 1px solid #CCC;
    height: 30px;
    display: inline-block;
    vertical-align: middle;
}
.activityplan-module .actions-nav-separator + a {
    margin-left: 0px;
}
.activityplan-module .actions-nav ul {
    padding: 0;
    margin: 0;
    width: 100%;
    position: relative;
}
.activityplan-module .actions-nav ul li {
    list-style: none;

    & .toggle-action label { cursor: pointer; }

    & .toggle-action.collapsed .ecm-icon {
        border-radius: 50%;
        border: 2px solid var(--link-color);
        padding: 4px;
        font-size: 16px;
        color: var(--link-color);
    }
    & .toggle-action.collapsed:hover .ecm-icon {
        border: 2px solid var(--link-hover-color);
        color: var(--link-hover-color);
    }
    & .toggle-action:not(.collapsed) .ecm-icon {
        border-radius: 50%;
        border: 2px solid var(--link-hover-color);
        padding: 4px;
        font-size: 16px;
        color: var(--link-hover-color);
    }
}

/* Extra small devices, phones */
@media only screen and (max-width: 768px) {
    .activityplan-module .actions-nav ul { text-align: center; }
    .activityplan-module .actions-nav ul li {
        display: block;
        position: relative !important;
        padding: 0;
        margin: 0;
    }
    .activityplan-module .actions-nav ul li:last-child { margin-top: 20px; }
    .activityplan-module .actions-nav ul li.toggle-actions,
    .activityplan-module .actions-nav ul li.list-mode-actions { display: inline-block; }
}
/* Extra Small Devices, Phones, inherits from above */
@media only screen and (max-width: 640px) {
    .activityplan-module .actions-nav ul li:first-child,
    .activityplan-module .actions-nav ul li:last-child { margin-left: 0; }
    .activityplan-module .actions-nav ul li.toggle-actions {
        display: block;
        text-align: center;
    }
    .activityplan-module .actions-nav ul li.toggle-actions .ecm-togglebox.tb-inline + .tb-inline { margin-left: 0; }
    .activityplan-module .actions-nav ul li.toggle-actions .actions-nav-separator { display: none !important; }
}

/* SEARCH BAR
   -------------------------------------------------------------------------------- */

.activityplan-module {
    & .search-bar {}
    & .search-table {
        margin: 20px 0 40px 0;
        background-color: #333333;
        border-radius: 6px;
        display: table;
        border-collapse: separate;
        border-spacing: 0px 0;
        width: 100%;
        padding: 30px 0;
        transition: all .25s;
    }

    & .table-row { display: table-row; }
    & .table-col { display: table-cell; padding: 10px 30px; }
    & .table-col.table-form label { color: #E0E0E0; font-weight: normal; }
    & .table-col.table-form div { padding: 5px; }
    & .table-col.table-actions { width: 100px; vertical-align: middle; text-align: center; }
    & .table-col.table-actions .btn-reverse:last-child { margin-top: 20px; border-color: #4e4e4e; }
    & .table-separator { width: 25px; height: 100%; border-right: 1px solid #4e4e4e; padding: 0; }

    @media only screen and (max-width: 768px) {
        & .search-table { display: block; }
        & .table-row { display: block; }
        & .table-col { display: block; }
        & .table-col.table-form { text-align: center; margin-bottom: 30px; }
        & .table-col.table-form label { display: block; text-align: left; }
        & .table-col.table-actions { width: 100%; }
        & .table-col.table-actions .btn-reverse:last-child { margin-top: 0; }
    }
}

/*
   Custom Style for Searchbar RadComboBoxes
   -------------------------------------------------- */

.RadComboBox_BlackMetroTouch {
    font: inherit !important;
    font-family: var(--input-font-family-base) !important;
    width: auto !important;
}
.RadComboBox_BlackMetroTouch .rcbReadOnly {
    background-color: transparent !important;
    border-radius: 15px;
}
.RadComboBox_BlackMetroTouch .rcbReadOnly.rcbFocused,
.RadComboBox_BlackMetroTouch .rcbReadOnly.rcbHovered {
    border-color: var(--link-hover-color) !important;
    color: white;
    background-color: var(--link-hover-color) !important;
}
.RadComboBox_BlackMetroTouch .rcbActionButton:focus {
    border: 0 !important;
    outline: 0 !important;
}
.RadComboBox_BlackMetroTouch .rcbInner {
    background-color: transparent !important;
}
.RadComboBox_BlackMetroTouch .rcbActionButton {
    background-color: transparent !important;
    border-radius: 15px;
}
.RadComboBox_BlackMetroTouch .rcbActionButton .rcbIconDown::before {
    content: "\E00e" !important;
}

.RadComboBoxDropDown_BlackMetroTouch {
    font: inherit !important;
    font-family: var(--input-font-family-base) !important;
    font-size: 13px !important;
    padding: 5px;
    padding-bottom: 10px;
    border-radius: 15px;
    border-right: 0;
    background-color: #333 !important;
    border-color: color-mix(in srgb, #333 95%, white) !important;
    line-height: 2.125em !important;
}
@media only screen and (max-width: 768px) {
    .RadComboBoxDropDown_BlackMetroTouch { width: 200px !important; }
}

.RadComboBoxDropDown_BlackMetroTouch .rcbHovered {
    background-color: var(--link-hover-color) !important;
    border-radius: 15px;
}
.RadComboBoxDropDown_BlackMetroTouch .rcbCheckAllItems {
    background-color: transparent !important;
    border-bottom: 1px dotted color-mix(in srgb, #333 90%, white);
}
.RadComboBoxDropDown_BlackMetroTouch .rcbCheckAllItemsHovered {
    background-color: var(--link-hover-color) !important;
    border-radius: 12px;
}

.RadComboBoxDropDown_BlackMetroTouch .rcbItem > label,
.RadComboBoxDropDown_BlackMetroTouch .rcbHovered > label,
.RadComboBoxDropDown_BlackMetroTouch .rcbDisabled > label,
.RadComboBoxDropDown_BlackMetroTouch .rcbLoading > label,
.RadComboBoxDropDown_BlackMetroTouch .rcbCheckAllItems > label,
.RadComboBoxDropDown_BlackMetroTouch .rcbCheckAllItemsHovered > label {
    display: inline-block !important;
}

.RadComboBoxDropDown_BlackMetroTouch .rcbItem > i {
    font-size: 12px;
}

.RadComboBoxDropDown_BlackMetroTouch .rcbScroll {
    border-radius: 15px;

    &::-webkit-scrollbar { width: 12px; }
    &::-webkit-scrollbar:horizontal { height: 12px; }
    &::-webkit-scrollbar-track {
        background-color: color-mix(in srgb, #333 95%, white);
        border-radius: 12px;
    }
    &::-webkit-scrollbar-thumb {
        background: var(--brand-primary);
        border-radius: 12px;
    }
    &::-webkit-scrollbar-thumb:window-inactive {
        background: color-mix(in srgb, #333 90%, white);
    }
}

/*
   Custom Style for Searchbar RadDatePickers
   -------------------------------------------------- */

.RadInput_BlackMetroTouch { width: auto !important; }

.RadInput_BlackMetroTouch .riTextBox,
.RadInputMgr_BlackMetroTouch {
    background-color: transparent !important;
    border-radius: 15px;
}
.RadInput_BlackMetroTouch .rcSelect {
    right: 0;
    background-color: transparent !important;
}
.RadInput_BlackMetroTouch .rcCalPopup {
    border-color: transparent transparent transparent inherit;
    background-color: transparent;
    width: 30px;
    border-radius: 0 15px 15px 0;
}
.RadPicker_BlackMetroTouch.rcCalPopupOpen .RadInput,
.RadPicker_BlackMetroTouch.rcMYPopupOpen .RadInput,
.RadPicker_BlackMetroTouch.rcTimePopupOpen .RadInput {
    background-color: transparent !important;
}

/*
   Results Bar
   -------------------------------------------------- */

.activityplan-module {

    & .ecm-web-card {

        & .header-left { border-top-left-radius: 6px; }

        & .table {
            border-spacing: 0;
            font-family: var(--module-admin-font);

            & > :not(caption) > * > * {
                transition-property: background-color;
                transition-duration: 250ms;
                transition-timing-function: ease;
            }

            & input[type=checkbox] {
                width: 15px;
                height: 15px;
            }

            & .results-table-header { word-break: break-word; }

            & .results-table-header > th,
            & > thead > tr > th {
                vertical-align: middle !important;
                border-bottom: none;
                color: #566071;
                font-size: 13px;
                padding-bottom: 15px;
                font-weight: 600;
            }
            & .results-table-header > th:first-child { padding-left: 30px; }
            & .results-table-header > th:last-child { text-align: center; }

            & .results-table-body {
                height: 80px;
                margin: 30px 0;

                & > td {
                    position: relative;
                    vertical-align: middle !important;
                    font-size: 12px;
                    color: #85919f;
                }
            }

            /* World icon in first column cell */
            & .results-table-body > td:first-child {
                padding-left: 30px;

                & i.fa,
                & i.ecm-icon { opacity: .5; }
            }

            & .results-table-body > td a:not(.fa):not(.ecm-icon) {
                text-decoration: 1px dashed underline;
                text-underline-position: under;
            }

            &.table-sm .results-table-body { height: auto; }

            &.table-striped > tbody > tr:nth-of-type(even) {
                background-color: color-mix(in srgb, var(--brand-secondary) 45%, white);
            }

            & .results-table-body.selected-row,
            &.table-striped > tbody > tr.selected-row {
                background-color: color-mix(in srgb, var(--brand-secondary) 15%, white);
            }

            & .product-attribute,
            & .product-attribute-disabled {
                margin-right: 5px;
                margin-left: 5px;
                font-size: 15px;
                cursor: help;
            }
            & .product-attribute-disabled { opacity: .25; }

            & .results-table-actions { text-align: center; font-size: 16px !important; }
        }
    }

    .no-touch & .ecm-web-card .table .results-table-body:hover > td a { color: var(--reverse-color); }

    .no-touch & .ecm-web-card .table .results-table-body:hover > td,
    & .ecm-web-card .table .results-table-body[data-expanded="true"] > td { color: #fff; }

    .no-touch & .ecm-web-card .table.table-hover .results-table-body {
        transition-property: background-color;
        transition-duration: 250ms;
        transition-timing-function: ease;
    }

    .no-touch & .ecm-web-card .table.table-hover .results-table-body:hover,
    & .ecm-web-card .table .results-table-body.selected-row:hover,
    & .ecm-web-card .table.table-hover .results-table-body[data-expanded="true"] {
        --bs-table-hover-bg: color-mix(in srgb, var(--brand-secondary) 95%, black) !important; /* Override Bootstrap row hover style */
    }

    .no-touch & .ecm-web-card .table .results-table-body:hover > td .badge.badge-outline {
        border: none;
        color: var(--reverse-color);
    }
}

/*
   Dialog Windows
   -------------------------------------------------- */

.RadWindow_Metro .rwTitleBar { background-color: var(--brand-primary) !important; }

/*
   Style of AJAX Loading Panel
   This element is placed in the Body
   -------------------------------------------------- */

.ajaxLoadingPanel { background-color: rgba(255, 255, 255, 0.70) !important; }
.ajaxLoadingPanel .loading-icon-panel { position: relative; top: 40%; }

.fa-circle-o-notch.fa-spin {
    color: var(--brand-primary);
    /* Prevent wobbly behavior when spinning */
    filter: blur(0);
    transform-origin: 49% 48.5%;
}

.eCM-msgbox-error-item,
.eCM-msgbox-success-item,
.eCM-msgbox-info-item,
.eCM-msgbox-warning-item {
    display: block;
    color: #eee;
    padding: 15px 30px;
    font-size: 11px;
    font-family: verdana;
}
.eCM-msgbox-error-item   { background-color: #CC0000; }
.eCM-msgbox-success-item { background-color: #6fa600; }
.eCM-msgbox-info-item    { background-color: #2e859b; }
.eCM-msgbox-warning-item { background-color: #ba932e; }

.eCM-msgbox-error-item p,
.eCM-msgbox-success-item p,
.eCM-msgbox-info-item p,
.eCM-msgbox-warning-item p {
    padding: 5px;
    margin: 0;
    padding-left: 50px;
}
.eCM-msgbox-image { margin: 10px; float: left; }

/*
   RadEditor Style Override
   -------------------------------------------------- */

.riSingle .riTextBox,
.RadForm.rfdTextbox .riSingle input.rfdDecorated[type="text"] {
    height: 34px !important;
    border: none;
}

/*
   DateTimePicker Style Override
   -------------------------------------------------- */

.RadInput_Default .riTextBox,
html body .RadInputMgr_Default {
    border-color: var(--border-color) !important;
}

/* Override checkbox label styles */
.activityplan-module .form-control input[type="checkbox"] + label {
    font-weight: normal;
}

/*
   Statistics View
   -------------------------------------------------- */

.activityplan-module .ecm-web-card {
    --header-left-dark: color-mix(in srgb, var(--brand-secondary) 90%, black);

    & .header-left { background-color: var(--header-left-dark); }
    & .header-left a { color: var(--reverse-color); }
    & .chart-description { color: var(--gray); }
    & .chart { padding: 20px; }

    & .circle-bar {
        margin: 25px 25px 10px 25px;
        width: 90px;
        height: 90px;
        position: relative;
    }
    & .circle-bar svg path:first-child { stroke: var(--border-color); stroke-width: 4px; }
    & .circle-bar svg path:last-child  { stroke-width: 6px; }

    & .circle-bar.total-activities svg path:last-child      { stroke: var(--brand-secondary); }
    & .circle-bar.completed-activities svg path:last-child  { stroke: var(--brand-secondary); }
    & .circle-bar.evaluated-activities svg path:last-child  { stroke: var(--brand-secondary); }

    & .circle-bar .progressbar-text {
        font-family: var(--input-font-family-base);
        color: var(--brand-danger);
        font-size: 1rem;
    }
}


/* ---------------------------------------------------------------------------------
3.12 ECOMMERCE MODULE V2021.02.25
     REQUIRES GOOGLE FONT: POPPINS
              MODULE SCRIPT FILE              
------------------------------------------------------------------------------------*/

.ecommerce-module {}

/* ADMIN - GENERIC FONT
------------------------------------------------------------------------------------*/
.ecommerce-module-admin *:not(.fa):not(.ecm-icon):not(.k-icon):not(.pager-container a)
{
    font-family: var(--module-admin-font);
}

/*
   Admin Tooltips
   -------------------------------------------------- */

.ecommerce-module-admin {
    & .tooltip {
        font-size: 11px;
        & .tooltip-inner { border-radius: 6px; }
    }
}

/*
   Common Bootstrap Alert Messages
   -------------------------------------------------- */

.ecommerce-module-admin .alert,
.ecommerce-module .alert {
    display: flex;
    align-items: center;
    border-radius: 6px;
    font-size: 12px;
    font-family: var(--module-admin-font);
    color: #fff;

    &.alert-danger  { background-color: var(--brand-danger); }
    &.alert-warning { background-color: var(--brand-warning); }
    &.alert-info    { background-color: var(--brand-info); }
    &.alert-success { background-color: var(--brand-success); }

    & i.ecm-icon { margin-right: 10px; }
}

/*
   Common - Dropdownlists with Optiongroups
   -------------------------------------------------- */

.ecommerce-module,
.ecommerce-module-admin {
    & optgroup {
        margin: 1em;
        background-color: var(--gray-light);
        color: var(--gray-dark);

        & option {
            margin: 1em;
            background-color: #fff;
            color: var(--gray-dark);
        }
    }
}

/*
   Common - Customize Bootstrap Badges
   -------------------------------------------------- */

.ecommerce-module,
.ecommerce-module-admin {
    & .badge {
        padding: 5px 10px 3px 10px;
        font-size: 12px;
        font-weight: 400;
    }
}
.ecommerce-module-admin .badge { font-family: var(--module-admin-font); }

/*
   Common - Toggle Store Button
   -------------------------------------------------- */

.ecommerce-module .toggle-store-panel { padding-bottom: 30px; }

/*
   Admin Bar
   -------------------------------------------------- */

.ecommerce-module {
    & .admin-nav {
        padding: 0;
        margin: 0;
        width: 100%;
        display: table;
        border-bottom: 1px solid color-mix(in srgb, var(--gray-light) 95%, white);
        margin-bottom: 30px;

        & li {
            display: table-cell;
            height: 80px;
            line-height: 80px;
            list-style: none;
            text-align: center;

            & a {
                width: 100%;
                line-height: normal;
                text-decoration: none;
                font-weight: bold;
                display: table;
                height: 100%;
                vertical-align: middle;
                color: var(--link-color);
                padding: 0 15px;
                text-transform: uppercase;
                position: relative;

                &:hover { color: var(--link-hover-color); }
            }

            & > a::after {
                content: '';
                position: absolute;
                height: 4px;
                width: 100%;
                left: 0;
                bottom: 0;
                background-color: var(--link-hover-color);
                visibility: hidden;
                transform: scaleX(0);
                transition: all .1s ease;
            }
            & > a:hover::after {
                visibility: visible;
                transform: scaleX(1);
            }

            &.active > a::after {
                visibility: visible;
                transform: scaleX(1);
            }
            &.active a,
            &.active a:hover { color: var(--link-hover-color); }

            &.disabled {
                pointer-events: none;

                & a {
                    color: color-mix(in srgb, var(--link-color) 30%, transparent);
                    & span.badge { background-color: color-mix(in srgb, var(--link-color) 30%, transparent); }
                }
            }

            & a span {
                display: table-cell;
                vertical-align: middle;

                &.badge {
                    display: inline-block;
                    background-color: var(--link-color);
                    margin-left: 10px;
                }
            }
            & a:hover span.badge { background-color: var(--link-hover-color); }
        }
    }
}

/* Extra small devices, phones */
@media only screen and (max-width: 768px) {
    .ecommerce-module .admin-nav li { display: block; }
}

/*
   Actions Bar - Toolbar of Actions
   -------------------------------------------------- */

.ecommerce-module {
    & .actions-nav {
        padding-top: 30px;
        padding-bottom: 10px;

        & a {
            text-decoration: none;
            margin-left: 10px;

            & i { color: #566071; }
        }
        & a.disabled {
            pointer-events: none; /* Disables the button actions completely. Better than just cursor: default; */
            opacity: 0.2;
        }

        & ul {
            padding: 0;
            margin: 0;
            width: 100%;
            position: relative;

            & li {
                list-style: none;

                & .toggle-action label { cursor: pointer; }

                & .toggle-action.collapsed .ecm-icon {
                    border-radius: 50%;
                    border: 2px solid var(--link-color);
                    padding: 4px;
                    font-size: 16px;
                    color: var(--link-color);
                }
                & .toggle-action.collapsed:hover .ecm-icon {
                    border: 2px solid var(--link-hover-color);
                    color: var(--link-hover-color);
                }
                & .toggle-action:not(.collapsed) .ecm-icon {
                    border-radius: 50%;
                    border: 2px solid var(--link-hover-color);
                    padding: 4px;
                    font-size: 16px;
                    color: var(--link-hover-color);
                }
            }
        }
    }

    & .actions-nav-separator {
        margin-right: 10px;
        margin-left: 10px;
        border: 1px solid #CCC;
        height: 30px;
        display: inline-block;
        vertical-align: middle;

        & + a { margin-left: 0px; }
    }
}

/*
   Search Bar
   -------------------------------------------------- */

.ecommerce-module {
    & .search-bar {}

    & .search-table {
        margin: 0 0 40px 0;
        background-color: #333333;
        border-radius: 6px;
        display: table;
        border-collapse: separate;
        border-spacing: 0px 0;
        width: 100%;
        padding: 30px 0;
        transition: all .25s;
    }

    .table-row { display: table-row; }
    .table-col { display: table-cell; padding: 10px 30px; }
    .table-col.table-form label { color: #E0E0E0; font-weight: normal; }
    .table-col.table-form div { padding: 5px; }
    .table-col.table-actions { width: 100px; vertical-align: middle; text-align: center; }
    .table-col.table-actions .btn-reverse:last-child {                           
        /* set border color to 20% transparent */
        border-color: color-mix(in srgb, currentColor 20%, transparent);
        &:hover { border-color: var(--btn-primary-hover-bg);}
    }
    .table-separator { width: 25px; height: 100%; border-right: 1px solid #4e4e4e; padding: 0; }

    @media only screen and (max-width: 768px) {
        .search-table { display: block; }
        .table-row { display: block; }
        .table-col { display: block; }
        .table-col.table-form { text-align: center; margin-bottom: 30px; }
        .table-col.table-form label { display: block; text-align: left; }
        .table-col.table-actions { width: 100%; }
        .table-col.table-actions .btn-reverse:last-child { margin-top: 0; }
    }

    /* Custom style for searchbar RadComboBoxes */
    .RadComboBox_BlackMetroTouch {
        font: inherit !important;
        font-family: var(--input-font-family-base) !important;
        width: auto !important;
    }
    .RadComboBox_BlackMetroTouch .rcbReadOnly {
        background-color: transparent !important;
        border-radius: 15px;
    }
    .RadComboBox_BlackMetroTouch .rcbReadOnly.rcbFocused,
    .RadComboBox_BlackMetroTouch .rcbReadOnly.rcbHovered {
        border-color: var(--link-hover-color) !important;
        color: white;
        background-color: var(--link-hover-color) !important;
    }
    .RadComboBox_BlackMetroTouch .rcbActionButton:focus {
        border: 0 !important;
        outline: 0 !important;
    }
    .RadComboBox_BlackMetroTouch .rcbInner { background-color: transparent !important; }
    .RadComboBox_BlackMetroTouch .rcbActionButton {
        background-color: transparent !important;
        border-radius: 15px;
    }
    .RadComboBox_BlackMetroTouch .rcbActionButton .rcbIconDown::before {
        content: "\E00e" !important;
    }

    .RadComboBoxDropDown_BlackMetroTouch {
        font: inherit !important;
        font-family: var(--input-font-family-base) !important;
        font-size: 13px !important;
        padding: 5px;
        padding-bottom: 10px;
        border-radius: 15px;
        border-right: 0;
        background-color: #333 !important;
        border-color: color-mix(in srgb, #333 95%, white) !important;
        line-height: 2.125em !important;
    }
    @media only screen and (max-width: 768px) {
        .RadComboBoxDropDown_BlackMetroTouch { width: 200px !important; }
    }
    .RadComboBoxDropDown_BlackMetroTouch .rcbHovered {
        background-color: var(--link-hover-color) !important;
        border-radius: 15px;
    }
    .RadComboBoxDropDown_BlackMetroTouch .rcbCheckAllItems {
        background-color: transparent !important;
        border-bottom: 1px dotted color-mix(in srgb, #333 90%, white);
    }
    .RadComboBoxDropDown_BlackMetroTouch .rcbCheckAllItemsHovered {
        background-color: var(--link-hover-color) !important;
        border-radius: 12px;
    }
    .RadComboBoxDropDown_BlackMetroTouch .rcbItem > label,
    .RadComboBoxDropDown_BlackMetroTouch .rcbHovered > label,
    .RadComboBoxDropDown_BlackMetroTouch .rcbDisabled > label,
    .RadComboBoxDropDown_BlackMetroTouch .rcbLoading > label,
    .RadComboBoxDropDown_BlackMetroTouch .rcbCheckAllItems > label,
    .RadComboBoxDropDown_BlackMetroTouch .rcbCheckAllItemsHovered > label {
        display: inline-block !important;
    }
    .RadComboBoxDropDown_BlackMetroTouch .rcbItem > i { font-size: 12px; }

    .RadComboBoxDropDown_BlackMetroTouch .rcbScroll {
        border-radius: 15px;

        &::-webkit-scrollbar { width: 12px; }
        &::-webkit-scrollbar:horizontal { height: 12px; }
        &::-webkit-scrollbar-track {
            background-color: color-mix(in srgb, #333 95%, white);
            border-radius: 12px;
        }
        &::-webkit-scrollbar-thumb {
            background: var(--brand-primary);
            border-radius: 12px;
        }
        &::-webkit-scrollbar-thumb:window-inactive {
            background: color-mix(in srgb, #333 90%, white);
        }
    }
}

/*
   Results Bar
   -------------------------------------------------- */

.ecommerce-module {
    & .ecm-web-card {
        --header-left-dark: color-mix(in srgb, var(--brand-secondary) 90%, black);

        & .header-left {
            background-color: var(--header-left-dark);
            border-top-left-radius: 6px;
        }

        & img.product-thumb {
            width: 60px;
            height: 60px;
            border-radius: 10px;
            border: 2px #fff solid;
        }

        & .dropdown-toggle {
            background-color: color-mix(in srgb, var(--btn-primary-bg) 95%, black);
        }
        & .dropdown-toggle:hover,
        & .dropdown-toggle:focus { background-color: var(--btn-primary-hover-bg); }

        & .dropdown-menu {            
            border: inherit;            
            background-color: #fff;
            box-shadow: 0 1px 2px rgba(0, 0, 0, .15);

            & .dropdown-item { font-family: var(--module-admin-font); }
        }

        & .table {
            border-spacing: 0;
            font-family: var(--module-admin-font);

            & > :not(caption) > * > * {
                transition-property: background-color;
                transition-duration: 250ms;
                transition-timing-function: ease;
            }

            & input[type=checkbox] {
                width: 15px;
                height: 15px;
            }

            & .results-table-header { word-break: break-word; }

            & .results-table-header > th,
            & > thead > tr > th {
                vertical-align: middle !important;
                border-bottom: none;
                color: #566071;
                font-size: 13px;
                padding-bottom: 15px;
                text-transform: uppercase;
                font-weight: 600;
            }
            & .results-table-header > th:first-child { padding-left: 30px; }
            & .results-table-header > th:last-child { text-align: center; }

            & .results-table-body {
                height: 80px;
                margin: 30px 0;
                transition-duration: 250ms;
                transition-timing-function: ease;
                transition-property: all;                

                & > td {
                    position: relative;
                    vertical-align: middle !important;
                    font-size: 12px;
                    color: var(--gray);
                }
            }

            /* World icon in first column cell */
            & .results-table-body > td:first-child {
                padding-left: 30px;

                & i.fa,
                & i.ecm-icon { opacity: .5; }
            }

            & .results-table-body > td a:not(.fa):not(.ecm-icon) {
                text-decoration: 1px dashed underline;
                text-underline-position: under;
            }

            &.table-condensed .results-table-body { height: 50px; }

            &.table-striped > tbody > tr:nth-of-type(even) {
                --bs-table-bg: color-mix(in srgb, var(--brand-secondary) 45%, white);
            }

            & .results-table-body.selected-row,
            &.table-striped > tbody > tr.selected-row {
                --bs-table-bg: color-mix(in srgb, var(--brand-secondary) 15%, white);                
            }

            & .product-attribute,
            & .product-attribute-disabled {
                margin-right: 5px;
                margin-left: 5px;
            }
            & .product-attribute-disabled { opacity: .25; }

            & .results-table-actions { text-align: center; font-size: 16px !important; }
        }
    }

    .no-touch & .ecm-web-card .table .results-table-body:hover > td a { color: var(--reverse-color); }

    .no-touch & .ecm-web-card .table .results-table-body:hover > td,
    & .ecm-web-card .table .results-table-body[data-expanded="true"] > td { color: #fff; }
   
    .no-touch & .ecm-web-card .table.table-hover .results-table-body:hover > td,
    & .ecm-web-card .table .results-table-body.selected-row:hover > td,
    & .ecm-web-card .table.table-hover .results-table-body[data-expanded="true"] > td {
        --bs-table-hover-bg: color-mix(in srgb, var(--brand-secondary) 95%, black);
        background-color: var(--bs-table-hover-bg);
    }

    .no-touch & .ecm-web-card .table .results-table-body:hover > td .badge.badge-outline {
        border: none;
        color: var(--reverse-color);
    }
}

.ecommerce-module-admin {
    & .results-bar .basic-info {
        width: 100%;
        overflow: hidden;
        padding: 0;
        margin: 0;

        & dt {
            float: left;
            width: 30%;
            padding: 5px 15px 5px 0;
            margin: 0;
            text-align: right;
            clear: left;
        }
        & dd {
            float: left;
            width: 70%;
            padding: 5px 15px 5px 0;
            margin: 0;
        }
    }
}

/*
   Results Bar - Responsive Mode (<600px)
   -------------------------------------------------- */

@media screen and (max-width: 600px) {
    .ecommerce-module .results-bar {
        & .table {
            border: 0;

            & .results-table-body {
                height: auto;
                margin: auto;
                display: block;
            }
            & caption {
                font-size: 1.3em;
            }
            & thead {
                border: none;
                clip: rect(0 0 0 0);
                height: 1px;
                margin: -1px;
                overflow: hidden;
                padding: 0;
                position: absolute;
                width: 1px;
            }
            & td {
                border-bottom: 1px solid color-mix(in srgb, var(--gray-light) 90%, white);
                display: block;
                font-size: .8em;
                text-align: right !important;
                padding: 15px !important;

                &:first-child { background-color: color-mix(in srgb, var(--gray-light) 90%, white); }
                &::before {
                    content: attr(data-label);
                    float: left;
                    font-weight: bold;
                    text-transform: uppercase;
                }
                &:last-child { border-bottom: 0; }
            }
        }
    }
}

/*
   Style of RadMultiSelect Control
   -------------------------------------------------- */

.RadMultiSelect .k-multiselect-wrap {
    border-color: var(--border-color) !important;
    border-width: var(--border-size) !important;
}
.RadMultiSelect .k-multiselect-wrap:focus {
    border-color: var(--input-border-focus) !important;
}

/*
   Style of Dialog Windows
   -------------------------------------------------- */

.RadWindow_Metro .rwTitleBar { background-color: var(--brand-primary) !important; }
.RadWindow .window-content { padding: 20px; }

/*
   Style of AJAX Loading Panel
   This element is placed in the Body
   -------------------------------------------------- */

.ajaxLoadingPanel { background-color: rgba(255, 255, 255, 0.70) !important; }
.ajaxLoadingPanel .loading-icon-panel { position: relative; top: 40%; }

.fa-circle-o-notch.fa-spin {
    color: var(--brand-primary);
    /* Prevent wobbly behavior when spinning */
    filter: blur(0);
    transform-origin: 49% 48.5%;
}

/*
   Style of Message Boxes
   -------------------------------------------------- */

.eCM-msgbox-error-item,
.eCM-msgbox-success-item,
.eCM-msgbox-info-item,
.eCM-msgbox-warning-item {
    display: block;
    color: #eee;
    padding: 15px 30px;
    font-size: 11px;
    font-family: verdana;
}
.eCM-msgbox-error-item   { background-color: #CC0000; }
.eCM-msgbox-success-item { background-color: #6fa600; }
.eCM-msgbox-info-item    { background-color: #2e859b; }
.eCM-msgbox-warning-item { background-color: #ba932e; }

.eCM-msgbox-error-item p,
.eCM-msgbox-success-item p,
.eCM-msgbox-info-item p,
.eCM-msgbox-warning-item p {
    padding: 5px;
    margin: 0;
    padding-left: 50px;
}
.eCM-msgbox-image { margin: 10px; float: left; }

.riSingle .riTextBox,
.RadForm.rfdTextbox .riSingle input.rfdDecorated[type="text"] {
    height: 34px !important;
    border: none;
}

/*
   DateTimePicker Style Override
   -------------------------------------------------- */

.RadInput_Default .riTextBox,
html body .RadInputMgr_Default {
    border-color: var(--border-color) !important;
}

/*
   Override Checkbox Label Styles
   -------------------------------------------------- */

.ecommerce-module {
    & .form-control {
        & input[type="checkbox"] + label { font-weight: normal; }
        & .cbitem-selected {
            display: block;
            width: 100%;
            background-color: var(--component-active-bg);
            color: var(--reverse-color);
        }
    }
}
.ecommerce-module-notifications { position: fixed !important; top: 15px !important; }

/*
   Frontend - Promo Bar
   -------------------------------------------------- */

.ecommerce-module .promo-bar {
    display: flex;
    min-height: 40px;
    background-color: coral;
    color: #fff;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 400;
    font-size: 1rem;
    text-transform: uppercase;
    text-align: center;

    & span {
        align-self: center;
        width: 100%;
    }

    /* Small devices and up (landscape phones, 576px and up) */
    @media (max-width: 576px) {
        padding: 2px 10px;
        font-size: 0.875rem;
    }
}

/*
   Frontend - Shopping Cart Menu (Icon)
   -------------------------------------------------- */

.ecommerce-module {
    & .cart-icon {
        margin-right: 15px;
        @media (max-width: 480px) { font-size: 32px !important; }
    }
    & .cart-link {
        color: rgba(255, 255, 255, 0.75);
        &:hover { color: rgba(255, 255, 255, 1); }
    }
    & .cart-badge {
        position: absolute;
        left: 14px;
        bottom: 19px;
        min-width: 20px;
        font-size: 11px;
        text-align: center;
        font-weight: 700;
        color: #fff;
        font-family: Arial, sans-serif;
        /* Extra Small Devices, Phones, inherits from above */
        @media (max-width: 480px) { left: 27px !important; }
    }
}

/*
   Frontend - Shopping Cart Modal Window - Window Style
   -------------------------------------------------- */

.ecommerce-module.cart-window {
    &.modal {
        & .modal-content {
            border: 15px solid rgba(255, 255, 255, .7);
            border-radius: 15px;

            /* Extra Small Devices, Phones, inherits from above */
            @media (max-width: 480px) { border: 1px solid rgba(255, 255, 255, 1); }

            & .modal-header { border-bottom: 1px solid rgba(0, 0, 0, .06); }

            & .modal-title {
                color: color-mix(in srgb, var(--text-color) 70%, black);
                font-weight: 400;
                font-family: var(--module-admin-font);
            }
            & .close {
                opacity: .5;
                color: var(--link-hover-color);
                font-weight: 400;
                &:hover { opacity: 1; }
            }
            & .modal-body {
                background-color: #f5f5f5;
                font-family: var(--module-admin-font);
                & h4 { font-family: var(--module-admin-font); }
            }
            & .modal-footer {
                text-align: center;
                background-color: #f5f5f5;
                border-top: none;
                padding: 15px 30px 25px 30px;                

                & .btn { font-family: var(--module-admin-font); }

                /* Extra Small Devices, Phones, inherits from above */
                & .btn:first-child {
                    @media (max-width: 480px) { margin-bottom: 10px; }
                }
            }
        }
    }
}

/*
   Frontend - Shopping Cart Modal Window - Content
   -------------------------------------------------- */

.ecommerce-module.cart-window {
    &.modal .modal-body {
        & ul { padding: 0 1.5em; list-style-type: none; }

        /* Extra Small Devices, Phones, inherits from above */
        @media (max-width: 480px) {
            & ul { padding: 0; }
        }

        & li { margin-bottom: 0.25em; }

        & .cart-item-wrapper {
            width: 100%;
            position: relative;
            overflow: hidden;
            background-color: #ffffff;
            height: 7.5em;
            display: table;
            border-radius: 5px;
        }

        & .cart-item-image,
        & .cart-item-description,
        & .cart-item-trash { display: table-cell; position: relative; }

        & .cart-item-image {
            width: 7.5em;
            vertical-align: middle;
            padding: 1em;

            & > div {
                background-repeat: no-repeat;
                background-size: cover;
                background-position: center;
                width: 5.5em;
                height: 5.5em;
                border-radius: var(--border-radius-base);
            }
        }

        & .cart-item-description {
            & > span {
                display: inline-block;
                padding: 1.5em 1em;
            }
            & .cart-item-label {
                line-height: 1.3em;
                max-height: 2.6em;
                font-size: 0.875em;
                overflow: hidden;
                display: block;
                font-weight: 700;

                /* Small devices (landscape phones, 576px and up)*/
                @media (min-width: 576px)  { font-size: 1em; }

                /* Medium devices (tablets, 768px and up)*/
                @media (min-width: 768px)  { font-size: 0.875em; }

                /* Extra large devices (large desktops, 1200px and up)*/
                @media (min-width: 1200px) { font-size: 1em; }
            }
        }

        & .cart-item-total {
            display: table-cell;
            position: relative;
            vertical-align: middle;
            text-align: center;
        }

        & .cart-item-trash {
            width: 2em;

            & .cart-delete-item { cursor: pointer; }
            & svg {
                position: absolute;
                display: inline-block;
                top: 50%;
                left: 50%;
                right: auto;
                transform: translate(-50%, -50%);
                width: 1.375em;
                height: 1.375em;
                fill: none;
                stroke-width: 2.6;
                stroke-linecap: round;
                stroke-miterlimit: 4;
                stroke: var(--link-hover-color);
                opacity: .4;
                transition: opacity 0.3s linear;
            }
            & svg:hover { stroke: var(--brand-danger); opacity: 1; }
        }

        & .cart-subtotal {
            display: block;
            text-align: right;
            font-size: 1.5em;
            font-weight: 400;
            padding: 15px 20px 0 0;
            color: color-mix(in srgb, var(--text-color) 80%, black);
            & span { font-weight: 700; }
        }

        & .cart-total-tax {
            display: block;
            text-align: right;
            padding: 5px 20px 0 0;
        }

        & .ecm-icon { display: block; opacity: .4; }
        & .empty-cart-message { padding: 20px 0 15px 0; }

        /* Extra Small Devices, Phones, inherits from above */
        @media (min-width: 480px) {
            .cart-item-total { width: 4em; font-size: 1em; }
            .cart-item-trash { width: 3em; }
        }

        /* Small devices (landscape phones, 576px and up)*/
        @media (min-width: 576px) {
            .cart-item-total { width: 4em; font-size: 1em; }
            .cart-item-trash { width: 4em; }
        }

        /* Medium devices (tablets, 768px and up)*/
        @media (min-width: 768px) {
            .cart-item-total { font-size: 1.2em; }
            .cart-item-trash { width: 4em; }
        }

        /* Extra large devices (large desktops, 1200px and up)*/
        @media (min-width: 1200px) {
            .cart-item-total { font-size: 1.5em; }
            .cart-item-trash { width: 4em; }
        }
    }
}

/*
   Frontend - Shopping Cart Modal Window - Item Quantity Controls
   -------------------------------------------------- */

.ecommerce-module.cart-window {
    & .cart-item-qt {
        display: inline-block;
        margin-top: 0.125em;
        @media screen and (min-width: 22.5em)  { font-size: 1em; }
        @media screen and (min-width: 26.25em) { font-size: 0.875em; }
        @media screen and (min-width: 64em)    { font-size: 1em; }
    }

    & .cart-qt,
    & .cart-qt-plus,
    & .cart-qt-minus,
    & .cart-unit-price {
        display: block;
        float: left;
        line-height: 30px;
        color: var(--text-color);
    }

    & .cart-qt-plus,
    & .cart-qt-minus {
        background: #fcfcfc;
        border: none;
        border-radius: var(--border-radius-base);
        font-size: 22px;
        font-weight: 300;
        color: color-mix(in srgb, var(--text-color) 90%, black);
        height: 28px;
        width: 28px;
        transition: background .2s linear;
    }
    & .cart-qt-plus:focus,
    & .cart-qt-minus:focus { outline: none; }
    & .cart-qt-plus:hover,
    & .cart-qt-minus:hover {
        background: var(--link-hover-color);
        color: #fff;
        cursor: pointer;
    }

    & .cart-qt { font-size: 1.2em; width: 50px; text-align: center; }
    & .cart-unit-price { font-size: 1.2em; margin-left: 10px; opacity: .5; }
}

/*
   Frontend - Shopping Cart & Checkout Page - Wizard Controls
   -------------------------------------------------- */

.ecommerce-module .wizard-cart-checkout {
    & .wizard-steps-bar {
        & ul { display: block; list-style: none; padding-left: 20px; }

        & .wizard-steps-step {
            display: inline-block;
            position: relative;
            margin-left: 20px;
            padding-left: 20px;
            border-left: 1px dotted var(--border-color);

            &:first-child { margin-left: 0; border-left: none; }

            & .wizard-steps-icon {
                float: left;
                width: 40px;
            }
            &:first-child .wizard-steps-icon i::before    { content: var(--ecm-shopping-basket-arrow); }
            &:nth-child(2) .wizard-steps-icon i::before   { content: var(--ecm-contact); }
            &:nth-child(3) .wizard-steps-icon i::before   { content: var(--ecm-in-transit); }
            &:nth-child(4) .wizard-steps-icon i::before   { content: var(--ecm-shopping-basket-check); }
            &:last-child .wizard-steps-icon i::before     { content: var(--ecm-approved-delivery); }

            & .wizard-steps-title {
                float: left;
                width: auto;

                & p { color: var(--gray); margin: 0; }
                & a {
                    position: relative;
                    font-size: var(--font-size-h4);
                }
                &::after {
                    content: "";
                    float: left;
                    width: 100%;
                    height: 4px;
                    border-radius: 2px;
                    margin-top: 5px;
                }
            }

            /* Items before and including current active */
            & .wizard-steps-title {
                &::after { background: transparent; }
                & a { color: var(--link-color); }
            }
            & .wizard-steps-icon { color: var(--brand-secondary); }

            /* Current active item */
            &.active-step .wizard-steps-title::after { background: var(--brand-secondary); }

            /* Items past current active */
            &.active-step ~ li {
                & .wizard-steps-title {
                    &::after { background: transparent; }
                    & a { color: var(--link-hover-color); }
                }
                & .wizard-steps-icon { color: var(--link-hover-color); }
            }
        }

        /* Medium devices (tablets, 768px and up)*/
        @media (max-width: 768px) {
            & .wizard-steps-step {
                width: 100%;
                &:first-child { margin-left: 20px; border-left: 1px dotted var(--border-color); }
            }
        }
    }

    & .wizard-navigation {
        padding-bottom: 20px;
        & a {
            display: inline-flex;
            align-items: center;
            &.previous-step > i { padding-right: 10px; }
            &.next-step > i { padding-left: 10px; }
        }
    }
}

/*
   Frontend - Shopping Cart & Checkout Page - Cart Item List Block (1st wizard step)
   -------------------------------------------------- */

.ecommerce-module {
    & .cart-item-list {
        & ul { padding: 0 1.5em; list-style-type: none; }

        /* Extra Small Devices, Phones, inherits from above */
        @media (max-width: 480px) {
            & ul { padding: 0; }
        }

        & li { margin-bottom: 0.25em; }

        & .cart-item-wrapper {
            width: 100%;
            position: relative;
            overflow: hidden;
            background-color: #ffffff;
            height: 7.5em;
            display: table;
            border-radius: 5px;
        }

        & .cart-item-image,
        & .cart-item-description,
        & .cart-item-trash { display: table-cell; position: relative; }

        & .cart-item-image {
            width: 7.5em;
            vertical-align: middle;
            padding: 1em;

            & > div {
                background-repeat: no-repeat;
                background-size: cover;
                background-position: center;
                width: 5.5em;
                height: 5.5em;
                border-radius: var(--border-radius-base);
            }
        }

        & .cart-item-description {
            & > span {
                display: inline-block;
                padding: 1.5em 1em;
            }
            & .cart-item-label {
                line-height: 1.3em;
                max-height: 2.6em;
                font-size: 0.875em;
                overflow: hidden;
                display: block;
                font-weight: 700;

                /* Small devices (landscape phones, 576px and up)*/                
                @media (min-width: 576px) {font-size: 1em;}
                
                /* Medium devices (tablets, 768px and up)*/
                @media (min-width: 768px) {font-size: 0.875em;}
                
                /* Extra large devices (large desktops, 1200px and up)*/
                @media (min-width: 1200px) {font-size: 1em;}
            }
        }

        & .cart-item-total {
            display: table-cell;
            position: relative;
            vertical-align: middle;
            text-align: center;
        }

        & .cart-total-tax {
            display: block;
            text-align: right;
            padding: 5px 20px 0 0;
        }

        & .cart-item-trash {
            width: 2em;

            & .cart-delete-item { cursor: pointer; }
            & svg {
                position: absolute;
                display: inline-block;
                top: 50%;
                left: 50%;
                right: auto;
                transform: translate(-50%, -50%);
                width: 1.375em;
                height: 1.375em;
                fill: none;
                stroke-width: 2.6;
                stroke-linecap: round;
                stroke-miterlimit: 4;
                stroke: var(--link-hover-color);
                opacity: .4;
                transition: opacity 0.3s linear;
            }
            & svg:hover { stroke: var(--brand-danger); opacity: 1; }
        }

        & .cart-subtotal {
            display: block;
            text-align: right;
            font-size: 1.5em;
            font-weight: 400;
            padding: 15px 20px 0 0;
            color: color-mix(in srgb, var(--text-color) 80%, black);
            & span { font-weight: 700; }
        }

        & .ecm-icon {
            display: block;
            opacity: .4;
            height: auto;
            margin: 20px 0;
        }

        & .empty-cart-message { padding: 20px 0 50px 0; }

        /* Extra Small Devices, Phones, inherits from above */
        @media (min-width : 480px) { 
            .cart-item-total {width: 4em; font-size: 1em}
            .cart-item-trash {width: 3em}
        }

        /* Small devices (landscape phones, 576px and up)*/
        @media (min-width: 576px) {
            .cart-item-total {width: 4em; font-size: 1em}
            .cart-item-trash {width: 4em}
        }  

        /* Medium devices (tablets, 768px and up)*/
        @media (min-width: 768px) {
            .cart-item-total {font-size: 1.2em}
            .cart-item-trash {width: 4em}
        }  

        /* Extra large devices (large desktops, 1200px and up)*/
        @media (min-width: 1200px) {
            .cart-item-total {font-size: 1.5em;}
            .cart-item-trash {width: 4em}
        }
    }
}

/*
   Frontend - Shopping Cart & Checkout Page - Cart Item List Block - Item Quantity Controls
   -------------------------------------------------- */

.ecommerce-module .cart-item-list {
    & .cart-item-qt {
        display: inline-block;
        margin-top: 0.125em;
        @media screen and (min-width: 22.5em)  { font-size: 1em; }
        @media screen and (min-width: 26.25em) { font-size: 0.875em; }
        @media screen and (min-width: 64em)    { font-size: 1em; }
    }

    & .cart-qt,
    & .cart-qt-plus,
    & .cart-qt-minus,
    & .cart-unit-price {
        display: block;
        float: left;
        line-height: 30px;
        color: var(--text-color);
    }

    & .cart-qt-plus,
    & .cart-qt-minus {
        background: #fcfcfc;
        border: none;
        border-radius: var(--border-radius-base);
        font-size: 22px;
        font-weight: 300;
        color: color-mix(in srgb, var(--text-color) 90%, black);
        height: 28px;
        width: 28px;
        transition: background .2s linear;
    }
    & .cart-qt-plus:focus,
    & .cart-qt-minus:focus { outline: none; }
    & .cart-qt-plus:hover,
    & .cart-qt-minus:hover {
        background: var(--link-hover-color);
        color: #fff;
        cursor: pointer;
    }

    & .cart-qt { font-size: 1.2em; width: 50px; text-align: center; }
    & .cart-unit-price { font-size: 1.2em; margin-left: 10px; opacity: .5; }
}

/*
   Frontend - Checkout Page (3rd wizard step)
   -------------------------------------------------- */

.ecommerce-module {
    & .wizard-cart-checkout {
        & .list-group .list-group-item {
            border-radius: 5px;

            & h5 { font-weight: bold; }
            & > label {
                display: flex;
                align-items: center;
                justify-content: center;
                cursor: pointer;
                margin: 0;
                width: 100%;
                font-weight: normal;
            }
        }
        & .Shipping-methods i.ecm-icon { margin-right: 10px; }
        & .Shipping-methods .disabled {
            & .list-group .list-group-item,
            & .list-group .list-group-item h5 { color: var(--gray-light); }
            & .list-group .list-group-item > label { cursor: not-allowed; }
        }
    }

    & .cart-summary {
        & .products-summary-list {
            & dl { margin-bottom: 5px; }
            & dt {
                float: left;
                text-overflow: ellipsis;
                overflow: hidden;
                width: 75%;
                white-space: nowrap;
            }
            & dt span { font-weight: normal; }
            & dd { text-align: right; }
        }
        & .list-group { margin-top: 0; }

        & .cart-summary-subtotal,
        & .cart-summary-total-tax { display: block; }
        & .cart-summary-total-tax { margin-bottom: 20px; }
        & .btn { margin-bottom: 10px; }
    }

    & .cart-summary.card,
    & .delivery-data-summary.card,
    & .billing-data-summary.card,
    & .payment-method-summary.card,
    & .shipping-method-summary.card { padding: 10px; }

    & .cart-summary .card-header,
    & .delivery-data-summary .card-header,
    & .billing-data-summary .card-header,
    & .payment-method-summary .card-header,
    & .shipping-method-summary .card-header { font-size: var(--font-size-h4); }
}

.ecommerce-module .products-summary-table {
    & th { text-transform: uppercase; }
    & tr {
        &.calc-row td { padding-top: 5px; padding-bottom: 5px; }
        & td { vertical-align: middle; }
    }
    & img.product-thumb {
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        width: 4em;
        height: 4em;
        border-radius: 6px;
    }
    & .border-top-0 td { border-top: 0; }
    & h4, & h5 { margin: 0; }
}

/*
   Frontend - Order Success Animation
   -------------------------------------------------- */

.ecommerce-module {
    @keyframes scaleAnimation {
        0%   { opacity: 0; transform: scale(1.5); }
        100% { opacity: 1; transform: scale(1); }
    }
    @keyframes drawCircle {
        0%   { stroke-dashoffset: 151px; }
        100% { stroke-dashoffset: 0; }
    }
    @keyframes drawCheck {
        0%   { stroke-dashoffset: 36px; }
        100% { stroke-dashoffset: 0; }
    }

    & #successAnimationCircle {
        stroke-dasharray: 151px 151px;
        stroke: var(--brand-secondary);
    }
    & #successAnimationCheck {
        stroke-dasharray: 36px 36px;
        stroke: var(--brand-secondary);
    }
    & #successAnimationResult {
        fill: var(--brand-secondary);
        opacity: 0;
    }
    & #successAnimation {
        animation: scaleAnimation 1s ease-out 1s 1 both;

        & #successAnimationCircle {
            animation-name: drawCircle, fadeOut;
            animation-duration: 1.5s, 0.8s;
            animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1), linear;
            animation-delay: 0.5s, 1.4s;
            animation-iteration-count: 1, 1;
            animation-direction: normal, normal;
            animation-fill-mode: both, both;
        }
        & #successAnimationCheck {
            animation: drawCheck 0.6s cubic-bezier(0.77, 0, 0.175, 1) 0.6s 1 both,
                       fadeOut 0.8s linear 1.4s 1 both;
        }
        & #successAnimationResult {
            animation: fadeIn 0.8s linear 1.4s both;
        }
    }
}

/*
   Frontend - Catalog View - Product Add to Cart Button
   -------------------------------------------------- */

.ecommerce-module {
    & .add-to-cart {
        position: relative;
        display: inline-flex;
        -webkit-font-smoothing: antialiased;
        overflow: hidden;        

        /* this is the button text message */
        & span {
            display: inline-flex;
            align-items: center;
            transition: opacity 0.3s linear;
            opacity: 1;
        }        
        & svg {
            position: absolute;
            left: 50%;
            top: 50%;
            width: 100%;

            /* move the icon on the right - outside the button */
            transform: translateX(50%) translateY(-50%);
        }
        &.is-added {
            & span {
                /* product added to the cart - hide text message with transition*/
                opacity: 0;
                transition: opacity 0.1s linear;
            }
            & svg {
                /* product added to the cart - move the svg back inside the button */
                transform: translateX(-50%) translateY(-50%);
                transition: transform 0s;
            }
        }
    }
}

/*
   Frontend - Catalog View - Category Links
   -------------------------------------------------- */

.ecommerce-module {
    & ul.view-products-catalog-categories {
        margin-bottom: -10px;
        list-style: none;
        text-align: center;
        padding-left: 0;

        & li {
            display: inline-block;
            margin: 10px;
            text-transform: uppercase;

            & a {
                font-size: 0.875rem;
                color: var(--brand-primary);
                line-height: 1.385;
                margin-bottom: 0;
                vertical-align: middle;
                padding-right: 7px;
                padding-left: 7px;
                transition: border 0.25s ease, padding 0.25s ease, border-radius 0.25s ease;

                &.text-danger {
                    color: var(--brand-danger);
                }

                &.active {
                    color: #fff;
                    padding-right: 15px;
                    padding-left: 15px;
                }
            }

            & a:hover:not(.active) {
                border: 1px solid var(--btn-primary-hover-bg);
                border-color: var(--btn-primary-hover-bg);
                padding: 7px 15px;
                border-radius: 17px;
            }
        }
    }
}

/*
   Frontend - Catalog View - Products Grid
   -------------------------------------------------- */

.ecommerce-module {
    & .view-products-catalog {
        & ul {
            font-size: 0px;
            margin-left: -1.25%;
            margin-right: -1.25%;
            padding-left: 0;
            list-style: none;

            & li {
                padding: 0 1.25% 2.5% 1.25%;
                font-size: 16px;
                font-size: 1.5rem;
                vertical-align: top;

                & h3 {
                    font-size: var(--font-size-h4) !important;
                    color: var(--brand-primary);
                    text-align: center;
                }

                & .header {
                    text-align: center;
                }

                & .detail-link {
                    padding-top: 15px;
                }

                & .promo-sticker {
                    position: absolute;
                    margin-left: 15px;
                    z-index: 1;
                }
            }
        }

        /* Default column settings - 3 columns */
        &.columns-3 li {
            display: inline-block;
            width: 33.33%;

            /* Medium Devices, Desktops - inherits from above */
            /* Small Devices, Tablets */
            @media only screen and (max-width: 1024px) {
                width: 50%;
            }

            /* Extra Small Devices, Phones */
            @media only screen and (max-width: 480px) {
                width: 100% !important;
            }
        }

        /* Circular images for 3-column layout */
        &.columns-3.circular li figure {
            border-radius: 126px;
            width: 252px;
            height: 252px;
            margin: auto;

            & img {
                margin-left: -25%;                
                max-width: fit-content;
                height: auto;
                width: unset;
            }
        }

        /* Default column settings - 4 columns */
        &.columns-4 li {
            display: inline-block;
            width: 25%;

            /* Medium Devices, Desktops - inherits from above */
            /* Small Devices, Tablets */
            @media only screen and (max-width: 1024px) {
                width: 50%;
            }

            /* Extra Small Devices, Phones */
            @media only screen and (max-width: 480px) {
                width: 100% !important;
            }
        }
    }
}

/*
   Frontend - Detail View
   -------------------------------------------------- */

.ecommerce-module {
    & .view-products-detail {
        & h3 {
            color: var(--brand-primary);
            text-align: left;
            text-transform: uppercase;
            margin-top: 10px;
        }

        & img {
            border-radius: 6px;
            width: 100%;
        }

        & .long-description {
            margin-top: 30px;
        }
    }
}

/*
   Frontend - Featured View
   -------------------------------------------------- */

.ecommerce-module {
    & .view-featured-products {
        & h3 {
            font-size: var(--font-size-h4) !important;
            color: var(--brand-primary);
            text-align: center;
        }

        & .header {
            text-align: center;
        }

        & .detail-link {
            padding-top: 15px;
        }

        & .promo-sticker {
            position: absolute;
            margin-left: 15px;
            z-index: 1;
        }
    }
}

/*
   Frontend - Catalog View + Detail View + Featured View
   Promo and Status Stickers + Carousel Controls
   -------------------------------------------------- */

.ecommerce-module {
    /* Promo stickers - common across all views */
    & .view-products-catalog .promo-sticker,
    & .view-products-detail .promo-sticker,
    & .view-featured-products .promo-sticker,
    & .view-products-catalog .status-sticker,
    & .view-products-detail .status-sticker,
    & .view-featured-products .status-sticker {
        background-color: var(--link-color);
        color: #fff;
        padding: 4px 10px;
        font-size: 0.75rem;
        font-weight: bold;
        text-transform: uppercase;
        border-radius: 25px;
        height: 25px;
        opacity: 0.9;
        display: inline-block;
        margin-top: 15px;
    }

    /* Status stickers - positioned absolutely */
    & .view-products-catalog .status-sticker,
    & .view-products-detail .status-sticker,
    & .view-featured-products .status-sticker {
        position: absolute;
        margin-right: 15px;
        background-color: var(--brand-danger) !important;
        z-index: 1;
        right: 0;
    }

    /* Carousel controls with hover effects */
    & .carousel-control {
        opacity: 0.1;
        transition: opacity 0.25s ease;

        &:focus {
            opacity: 0.1;
        }

        &:hover {
            opacity: 0.9;
        }
    }
}


/* ---------------------------------------------------------------------------------
3.13 CONTACTS FORM MODULE V2021.11.08              
------------------------------------------------------------------------------------*/

.MFormEmail {
    padding-top: 15px;
    font-family: var(--font-family-base);
    color: var(--text-color);

    & .Instructions {
        font-size: var(--font-size-base);
        margin-bottom: 20px;
    }

    & .SubjectContainer {
        /* Container for subject field */
    }

    & .MsgContainer {
        width: 100%;
        font-size: var(--font-size-base);
    }

    & .MsgAvisoContainer p {
        margin: 10px;
    }

    & .warning_messages {
        font-family: var(--font-family-base);
        font-size: var(--font-size-base);
        color: var(--brand-danger);
        font-weight: normal;
    }
}

/* ---------------------------------------------------------------------------------
3.14 FILE SHARE MODULE V2023.06.24              
------------------------------------------------------------------------------------*/

.fileshare-module {
    /* General style */
    & ul {
        margin: 0;
        padding: 0;
    }

    & li {
        list-style: none outside none;
    }

    & .item-title {
        color: #111111;
        font-size: 13px;
        margin: 5px 0;
        word-wrap: break-word;

        & a {
            text-decoration: none;
            color: #25A0DA;

            &:hover {
                border-bottom: 1px dotted #0099FF;
                margin-bottom: 1px;
            }

            &[disabled],
            &[disabled]:hover {
                color: #ccc;
                border-bottom: none;
                cursor: not-allowed;
            }
        }

        & .badge {
            background-color: #0099FF;
        }
    }

    & .required {
        color: #990000;
    }

    /* Breadcrumbs */
    & .breadcrumbs {
        font-size: 12px;
        color: #666666;

        & img {
            margin-right: 10px;
        }

        & a {
            text-decoration: none;
            color: var(--link-color);

            &:hover {
                color: var(--link-hover-color);
                text-decoration: underline;
            }
        }

        & span {
            font-size: 9px;
        }

        & .ecm-icon {
            color: var(--link-color);
        }
    }

    /* Filter menu */
    & .filter_menu {
        display: inline-block;
        position: relative;
        cursor: pointer;

        & a img {
            margin-right: 5px;
        }

        & .tagList {
            cursor: default;
            display: none;
            margin: 0;
            min-width: 216px;
            position: absolute;
            left: 0;
            box-shadow: inset 0 1px 0 0 #ffffff;
            background-color: #ededed;
            border-radius: 6px;
            border: 1px solid #dcdcdc;
            color: #777777;
            font-weight: bold;
            text-decoration: none;
            padding: 10px;
            z-index: 20;
        }

        &:hover .tagList {
            display: block;
        }

        & .tagList .RadListBox {
            display: block;
        }

        &:hover .tagList .rlbGroup {
            border: none !important;
            background-color: transparent !important;
        }
    }

    & .filter_menu .RadListBox_Default .rlbGroup,
    & .filter_menu .RadListBox_Default .rlbTemplateContainer {
        border: none;
        background-color: transparent;
    }

    & .filter_menu .RadListBox_Default .rlbItem.rlbHovered {
        color: #333;
        border-radius: 3px;
    }

    /* Sorting dropdown control */
    & .dropdown {
        width: 180px;
        color: #666;
        padding: 5px 10px;
        background: #fff;
        border: 1px solid #eee;
        border-radius: 3px;

        &:hover {
            border: 1px solid #d2d2d2;
        }
    }

    & .RadComboBox_Metro.dropdown table td.rcbInputCell,
    & .RadComboBox_Metro.dropdown table td.rcbArrowCell {
        border: none !important;
    }

    /* Dropdowntree control */
    & .RadDropDownTree.RadDropDownTree_Metro {
        border-radius: 0.375rem;
        padding: 5px;
        background-color: var(--ecm-input-solid-bg);
        font-family: var(--ecm-font-family);
        font-size: var(--ecm-font-size);

        & .rddtInner {
            border: 0;
            background-color: var(--ecm-input-solid-bg);
        }

        & .rddtFocused {
            background-color: var(--ecm-link-hover-color);
        }
    }

    /* Folder title bar */
    & .folder_titlebar {
        border-bottom: thin solid #E6E6E6;
    }

    & .folder_title {
        line-height: 40px;
        font-weight: bold;

        & i {
            color: darkorange;
        }
    }

    /* Folder description */
    & .folder-description {
        background-color: #f6f6f6;
        border-left: 3px solid darkorange;
    }

    /* File Icons */
    & div.ecm-folder-fill,
    & div.ecm-hyperlink {
        color: darkorange;
    }

    & div[class^="ecm-file-type-"]::after {
        display: block;
        min-height: 40px;
        background-repeat: no-repeat;
        background-position: center top;
        content: " ";
        min-width: 32px;
        margin: 0;
    }

    /* Asset listing */
    & .list-group-flush .list-group-item {
        --bs-list-group-bg: transparent;
        border-width: 0 0 var(--bs-list-group-border-width);
        border-bottom: thin solid #E6E6E6;
    }

    /* Override the style of the ecm clipboard plugin */
    & .ecm-clipboard-tool svg path {
        stroke: var(--link-color);
    }

    & .ecm-clipboard-tool:hover svg path {
        stroke: var(--link-hover-color);
    }

    /* Window Add File - Upload dropzone */
    & .uploads-container .RadUpload_Metro {
        padding: 20px;
        border: 2px dashed #ddd;

        & .ruDropZone {
            top: 0;
            left: 0;
        }

        & .ruFakeInput {
            height: inherit !important;
            border-radius: 15px;
        }

        & .ruButton.ruBrowse {
            background-color: #323544 !important;
            color: #fff !important;
            border-radius: 15px;
            border: none !important;
            padding-left: 20px;
            padding-right: 20px;
            font-weight: 500;
            height: inherit !important;
        }
    }

    /* Windows Add/Edit folder */
    & .tooltip-inner {
        /* when using html content, keep it within boundaries */
        max-width: 80vw;
    }

    /* Window download asset */
    &.ecm.RadWindow.download-window .rwTitleBar {
        background: var(--brand-primary) !important;
    }

    &.ecm.download-window .btn.btn-default {
        color: var(--link-color);
        border-color: var(--ecm-blue-light);
        background-color: var(--ecm-blue-light);

        &:hover {
            color: #fff;
            border-color: var(--link-hover-color);
            background-color: var(--link-hover-color) !important;
        }
    }

    /* Preview Area */
    & .asset-preview-container {
        width: auto;
        text-align: center;
        height: auto;

        & .no-preview-icon::after {
            min-height: 100px;
        }
    }
}

/* ---------------------------------------------------------------------------------
3.15 MEDIA GALLERY MODULE V2009.04.03 - Deprecated module              
------------------------------------------------------------------------------------*/

.MMediaGallery {
    font-family: var(--font-family-base);
    padding-top: 15px;

    /* Common styles */
    & .Titles {
        font-family: var(--font-family-base);
        font-weight: bold;
        font-size: 12px;
        color: var(--link-color);
        text-decoration: none;

        &:hover {
            text-decoration: underline;
        }
    }

    & .FunctionLinks {
        font-family: tahoma, arial, sans-serif;
        font-size: 11px;
        color: var(--link-color);
        text-decoration: none;

        &:hover {
            text-decoration: underline;
        }
    }

    & .VerticalSeparator {
        font-family: var(--font-family-base);
        font-size: var(--font-size-base);
        color: var(--text-color);
    }

    /* Edit styles */
    & .FormArea {
        font-family: Arial, sans-serif;
        font-size: 13px;
        background-color: #F9F9F9;
        padding: 10px;
    }

    & fieldset {
        border: 1px solid #D5DFE5;
        padding: 2px 2px 0 2px;

        & legend {
            font-family: var(--font-family-base);
            color: var(--text-color);
            font-weight: bold;
            font-size: 12px;
            padding-bottom: 4px;
        }
    }

    & .FormTitles {
        font-family: tahoma, arial, sans-serif;
        font-size: 11px;
        color: #4d4d4d;
        font-weight: bold;
    }

    & .MandatoryFields {
        font-family: "Trebuchet MS", sans-serif;
        font-size: 11px;
        color: #DE2929;
    }

    & .OrderList select {
        width: 400px;
        font-family: tahoma, arial, sans-serif;
        font-size: 11px;
        color: #4d4d4d;
    }

    & .GalleryAvailableMediaList {
        width: 400px;
        font-family: tahoma, arial, sans-serif;
        font-size: 11px;
        color: #4d4d4d;
    }

    /* Gallery Listing only */
    & dl {
        margin: 0 auto;
        padding-bottom: 0;
        overflow: hidden;

        & dt img {
            float: left;
            margin: 0 15px 0 0;
            border: 0;
        }

        & dd {
            overflow: auto;
            padding-top: 0.31em;
            margin-left: 0;

            & p {
                margin: 0;
                padding: 0;
            }

            & .DateInfo {
                font-size: 10px;
                color: #999999;
            }

            & .InfoTotalItems {
                font-family: var(--font-family-base);
                font-size: var(--font-size-base);
                color: var(--text-color);
                vertical-align: bottom;
            }
        }
    }

    & .RssIcon {
        vertical-align: bottom;
    }

    & .Descriptions {
        font-family: var(--font-family-base);
        font-size: var(--font-size-base);
        color: var(--text-color);
        vertical-align: bottom;
    }

    & .GalleriesRSSLink {
        vertical-align: bottom;
        font-family: Arial, sans-serif;
        font-size: 10px;
        color: var(--link-color);
        text-decoration: none;

        &:hover {
            text-decoration: underline;
        }
    }

    /* Media Item Listing only */
    & div.display .MediaTitles {
        font-family: var(--font-family-base);
        font-weight: bold;
        font-size: 12px;
        color: var(--text-color);
        text-decoration: none;
    }

    & div.thumb_view .MediaTitles {
        font-family: var(--font-family-base);
        font-size: 9px;
        color: var(--text-color);
        text-decoration: none;
    }

    & div.display ul {
        padding: 0;
        margin: 0;
    }

    & div.display li {
        float: left;
        width: 100%;
        padding: 5px 5px 0 5px;
        margin: 0;
        list-style: none;

        & .content_block {
            padding: 0 5px;
            margin-bottom: 10px;

            & .titleBar {
                padding: 0;
                margin: 0;
            }

            & p {
                padding: 5px;
                margin: 0;
            }

            & a img {
                padding: 5px;
                border: 1px solid #ccc;
                background: #fff;
                float: left;
                margin: 0 15px 0 0;

                &:hover {
                    border: 1px solid var(--link-color);
                }
            }
        }
    }

    & div.thumb_view li {
        list-style: none;
        padding: 10px 0;

        & .ArquivoSeparador {
            display: none;
        }

        & .titleBar {
            display: inline;
        }

        & p {
            display: none;
        }

        & .content_block {
            text-align: center;

            & a img {
                margin: 0;
            }
        }
    }
}


/* ---------------------------------------------------------------------------------
3.16 LANGUAGE SELECTOR MODULE V2025.09.25              
------------------------------------------------------------------------------------*/

.lang-selector-module {
    &.gtranslate_wrapper:not(.inline-mode) { position: fixed; top: 20px; right: 20px; z-index: 999999; }
    &.gtranslate_wrapper.inline-mode { display: inline !important; }
    &.gtranslate_wrapper.inline-mode #gt_float_wrapper { display: flex !important; }

    & .gt_float_switcher {
        font-family: var(--mainmenus-font-family);
        font-size: var(--mainmenus-font-size);
        background: none !important;

        & .gt-selected { border-radius: 4px; }
        & .gt-lang-code { font-weight: var(--mainmenus-font-weight) !important; }
    }

    &.gtranslate_wrapper.selector-text-white .gt-lang-code { color: white; }
    &.gtranslate_wrapper.selector-text-white .gt_float_switcher-arrow { filter: invert(100%) brightness(200%); }

    /* Remove shadow */
    &.gtranslate_wrapper.inline-mode .gt_float_switcher,
    &.gtranslate_wrapper.inline-mode .gt_float_switcher .gt-selected { box-shadow: none !important; background: none !important; }

    /* Options box */
    & .gt_float_switcher .gt_options {
        position: absolute !important;
        background-color: white;
        max-width: fit-content !important;
        border-radius: 4px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        transform: translateX(-51px) !important;
        text-align: left !important;

        & a { white-space: nowrap; color: #666 !important; }
        & a:hover { background-color: #f0f0f0 !important; color: #333 !important; }
    }

    /* Flags size */
    &.gtranslate_wrapper img { width: 16px !important; height: auto !important; }

    /* Hide current language flag */
    &.gtranslate_wrapper.hide-current-lang-image .gt-current-lang img { display: none !important; }

    /* Other modes */
    & .SeparadorLinks,
    & .ModoDropdownlist,
    & .ModoBandeira_e_idioma a,
    & .ModoCodigoIdioma a,
    & .ModoIdioma_e_pais a {
        font-family: Arial, Verdana, Helvetica, sans-serif;
        font-size: 11px;
        color: #e3f0f6;
        text-decoration: none;
        vertical-align: middle;
    }

    & .SeparadorLinks { color: #bcdce9; margin-left: 4px; margin-right: 5px; }
    & .ModoDropdownlist { background-color: #C5D5DD; }
    & .ModoBandeira {}
    & .ModoBandeira_e_idioma a:hover,
    & .ModoCodigoIdioma a:hover,
    & .ModoIdioma_e_pais a:hover { text-decoration: underline; }
    & .Bandeira img { vertical-align: middle; }
}


/* ---------------------------------------------------------------------------------
3.17 REPOSITORY MODULE V2009.03.21 - Deprecated module              
------------------------------------------------------------------------------------*/

.MRepositorio {
    margin: 10px;
    width: auto;

    /* Width is mandatory! */
    & .MessageBox {
        border: 1px dotted #C6C6C6;
        background-color: #F9F9F9;
        font-family: "Trebuchet MS", sans-serif;
        font-size: 11px;
    }

    & .TitulosRepositorio,
    & .TitulosDocumentos,
    & .DescricoesRepositorio,
    & .InfoActualizacao,
    & .LinksFuncoes,
    & .LinksGerais,
    & .VerticalSeparator,
    & .InfoTotalDocs,
    & .MsgSemItens,
    & .AutoresRepositorio,
    & .TitulosCamposRepositorio { font-family: tahoma, arial, sans-serif; }

    & .CamposObrigatorios { font-family: "Trebuchet MS", sans-serif; font-size: 11px; color: #DE2929; }
    & .TitulosRepositorio { font-size: 12px; font-weight: bold; }
    & .TitulosDocumentos { font-size: 12px; font-weight: bold; color: #4d4d4d; }

    & .DescricoesRepositorio,
    & .VerticalSeparator,
    & .MsgSemItens,
    & .InfoTotalDocs { font-size: 11px; color: #4d4d4d; }

    & .InfoActualizacao { font-size: 10px; color: #999999; white-space: nowrap; }

    & .LinksFuncoes,
    & .LinksGerais { font-size: 11px; text-decoration: none; }

    & .TitulosCamposRepositorio { font-size: 11px; color: #4d4d4d; font-weight: bold; }
    & .AutoresRepositorio { font-size: 11px; font-style: italic; color: #999999; }

    & .TitulosRepositorio,
    & .LinksFuncoes { color: var(--link-color); }

    & .TitulosRepositorio:hover,
    & .LinksFuncoes:hover,
    & .LinksGerais:hover { text-decoration: underline; }

    & .LinksFuncoes,
    & .LinksGerais { color: #416ba0; }

    & .InfoTotalDocs img { padding: 0; margin-right: 5px; vertical-align: middle; }

    & .RepositoryItem {
        line-height: 16px;
        padding: 10px 0 0 0;
        margin-bottom: 0;
    }

    & .DocumentItem,
    & .DocumentItem_Inactive { background-color: #f9f9f9; }

    & .DocumentItem_Active { background-color: #F1F5F9; }
}


/* ---------------------------------------------------------------------------------
3.18 PHOTO GALLERY MODULE V2008.07.01 - Deprecated module              
------------------------------------------------------------------------------------*/

.MGaleriaFotos {
    padding-top: 15px;
    width: 100%;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;

    & .SelectorAlbuns { font-family: Arial, Helvetica, sans-serif; font-size: 11px; }

    & .MiniaturaContainer {
        background-color: #f8f8f8;
        border: 1px solid #EAEAEA;
        margin: 5px;
        vertical-align: middle;

        & img { margin: 10px; cursor: pointer; opacity: 0.75; }
    }

    & .BotaoVer {
        color: #fff;
        border: 0;
        padding: 0 8px 1px 8px;
        background-color: #888;
        font-size: 11px;
        height: 20px;
        width: auto;
        overflow: visible;
    }
}

.MGaleriaFotos_ImagemAmpliada {
    background-color: #EAEAEA;

    & img { border: solid 10px #FFF; }

    & a,
    & a:visited { font-family: Arial, Helvetica, sans-serif; font-size: 9px; font-weight: bold; color: #888; text-decoration: none; }

    & a:hover { color: #555; }
}

/* Global settings needed for thickbox */
.MGaleriaFotos * { padding: 0; margin: 0; }

/* Thickbox specific link and font settings */
#TB_window {
    font: 11px Arial, Helvetica, sans-serif;
    color: #333333;
    position: fixed;
    background: #ffffff;
    z-index: 10002;
    color: #000000;
    display: none;
    border: 4px solid #525252;
    text-align: left;
    top: 50%;
    left: 50%;

    & a:link,
    & a:visited,
    & a:active,
    & a:focus { color: #666666; }

    & a:hover { color: #000; }

    & img#TB_Image {
        display: block;
        margin: 15px 0 0 15px;
        border: 1px solid #666 1px solid #ccc 1px solid #ccc 1px solid #666;
    }
}

#TB_secondLine {
    font: 10px Arial, Helvetica, sans-serif;
    color: #666666;
    margin-left: 15px;
    margin-top: 5px;
}

#TB_caption,
#TB_iFrameCaption {
    height: auto;
    padding: 10px 15px 5px 15px;
    overflow: auto;
    max-height: 80px;
    width: auto;
}

#TB_closeWindow { height: 25px; padding: 11px 25px 10px 0; float: right; }
#TB_closeAjaxWindow { padding: 7px 10px 5px 0; margin-bottom: 1px; text-align: right; float: right; }
#TB_ajaxWindowTitle { float: left; margin-bottom: 1px; }
#TB_title { background-color: #e8e8e8; height: 27px; }

#TB_ajaxContent {
    clear: both;
    padding: 2px 15px 15px 15px;
    overflow: auto;
    text-align: left;
    line-height: 1.4em;

    &.TB_modal { padding: 15px; }
    & p { padding: 5px 0; }
}

#TB_overlay {
    position: fixed;
    z-index: 10000;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}

.TB_overlayMacFFBGHack { background: url(macFFBgHack.png) repeat; }
.TB_overlayBG { background-color: #000; opacity: 0.85; }

#TB_load {
    position: fixed;
    display: none;
    height: 13px;
    width: 208px;
    z-index: 10003;
    top: 50%;
    left: 50%;
    margin: -6px 0 0 -104px;
}

#TB_HideSelect {
    z-index: 99;
    position: fixed;
    top: 0;
    left: 0;
    background-color: #fff;
    border: none;
    opacity: 0;
    height: 100%;
    width: 100%;
}

#TB_iframeContent { clear: both; border: none; margin-bottom: -1px; margin-top: 0; }


/* ---------------------------------------------------------------------------------
3.19 QUICKLINKS MODULE V2008.07.01 - Deprecated module              
------------------------------------------------------------------------------------*/

.MQuicklinksContainer {
    width: 100%;
    padding-top: 0;
    padding-bottom: 10px;
    text-align: center;
}
.Links {
    font-family: Arial, Tahoma, Verdana, Helvetica, sans-serif;
    font-size: 11px;
    color: #e8e4c4;
    text-decoration: none;

    &:visited { color: #e8e4c4; }
    &:hover { text-decoration: underline; }
}
.Separadores {
    font-family: Arial, Tahoma, Verdana, Helvetica, sans-serif;
    font-size: 11px;
    color: #c0a473;
    padding: 0 1px;
}


/* ---------------------------------------------------------------------------------
3.20 RSS FEEDER MODULE V2010.03.09 - Deprecated module              
------------------------------------------------------------------------------------*/

.MRssFeederContainer { margin-top: 15px; padding: 5px; }
.RssFeeder td {
    font-family: var(--font-family-base);
    color: var(--text-color);
    padding-bottom: 15px;
    border-bottom: 1px solid #fefefe;

    & h3 { display: none; }

    & img {
        float: left;
        border: 1px solid #fff;
        margin: 0 5px 5px 0;
        filter: grayscale(100%);
    }
}
.RssFeeder .RssFeederLink a {
    font-weight: bold;
    color: var(--link-hover-color);
    text-decoration: none;

    &:hover { text-decoration: underline; }
}
.RssFeederData {
    font-family: var(--font-family-base);
    color: var(--text-color);
    font-size: 9px;
}


/* ---------------------------------------------------------------------------------
3.21 QUICK LINKS MODULE V2025.07.07 - New version
------------------------------------------------------------------------------------*/

.quicklinks-module {
    & .col-auto { margin-top: 0.25rem !important; }
    & a {
        font-family: inherit;
        font-weight: inherit;
        font-size: inherit;
        color: var(--link-color);
        line-height: 25px;
        text-transform: uppercase;
        text-decoration: none;
        white-space: nowrap;
        transition: color 0.2s ease-in-out;

        &:hover { color: var(--link-hover-color); }
    }
}


/* ---------------------------------------------------------------------------------
3.22 HTML PARSE MODULE V2026.06.24
------------------------------------------------------------------------------------*/

/* This module uses a 100% CSS modal to display item details to the users */

.htmlparser-module {
    & .d-grid {
        grid-template-rows: repeat(var(--bs-rows, 1), 1fr);
        grid-template-columns: repeat(var(--bs-columns, auto-fit), minmax(350px, 1fr));
        gap: var(--bs-gap, 1.5rem);

        /* Set different grid columns for devices below 576px */
        @media only screen and (max-width: 576px) {
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        }

        & .card {
            background-color: rgba(231, 238, 246, 0.46);

            & img {
                width: 100%;
                max-height: 250px;
                object-fit: cover;
                object-position: top;
            }
        }
    }

    & .owl-carousel .card { margin: 1rem; }

    & .card-title { font-size: clamp(1rem, 0.913rem + 0.243vi, 1.125rem); }

    & .modal-backdrop {
        display: none; /* Hidden by default */

        &:target {
            display: block;
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.6);
            backdrop-filter: blur(10px);
            z-index: 9998;
        }
    }

    & .modal-window {
        position: fixed;
        top: 10vh;
        left: 10vw;
        width: 80vw;
        height: 80vh;
        background: #fff;
        border-radius: 10px;
        padding: 20px;
        z-index: 9999;
        display: flex;
        flex-direction: column;

        /* Style modal-window for devices below 768px */
        @media only screen and (max-width: 768px) {
            top: 0vh;
            left: 0vw;
            width: 100vw;
            height: 100vh;
            display: block;
            overflow-y: auto;
        }

        & .modal-title { font-size: clamp(1rem, 0.913rem + 0.243vi, 1.125rem); }
    }

    & .modal-content {
        /* Scroll only inside this area */
        flex: 1;
        overflow-y: auto;

        & > p { font-size: clamp(0.875rem, 0.788rem + 0.243vi, 1rem); }

        & > .row {
            background-color: color-mix(in srgb, var(--brand-secondary) 60%, transparent);
            padding: 1rem 0rem 0rem 1rem !important;
            border-radius: 10px;
        }

        & .detalhe-acao > p {
            font-size: clamp(0.875rem, 0.788rem + 0.243vi, 1rem);

            &:first-child {
                margin-bottom: 1rem;

                & > * {
                    border-radius: 5px;
                    background-color: var(--brand-primary);
                    padding: 0.2rem 0.5rem;
                    font-size: 0.9rem;
                    color: #fff;
                }
            }
        }

        & .sub-titulo { font-weight: bold; margin-top: 1rem; }
        & .pre { white-space: pre-line; }
        & span.detalhe,
        & .criar-inscricao,
        & .btn { display: none; }
    }

    & .modal-close {
        position: absolute;
        top: 10px;
        right: 20px;
        font-size: 32px;
        text-decoration: none;
        color: var(--link-color);
        font-weight: 200;
        transition: color 0.2s ease-in-out, font-weight 0.2s ease-in-out;

        &:hover {
            color: var(--link-hover-color);
            font-weight: 300;
        }
    }

    & .modal-footer .btn { font-size: clamp(0.875rem, 0.788rem + 0.243vi, 1rem); }
}

/* Prevent page scroll when modal is open (Chrome, Edge, Safari, Firefox 121+) */
body:has(.htmlparser-module .modal-backdrop:target) {
    overflow: hidden;
    height: 100vh;

    & .scroll-to-top { visibility: hidden !important; }
}