:root {
    --themeColourP: #3E5278;
    --themeColourP50: #3E527880;
    --themeColourP80: #3E5278CC;
    --themeColourS: #A0D7EC;
    --themeColourS50: #A0D7EC80;
    --themeColourS80: #A0D7ECCC;
    --themeColourT: #DCDCDC;
    --themeColourT50: #DCDCDC80;
    --themeColourT80: #DCDCDCCC;
    --themeColourW: #F5FCFD;
    --themeColourW50: #F5FCFD80;
    --themeColourW80: #F5FCFDCC;
    /* Product Panel Theme */
    --product-panel-theme-bg: linear-gradient(180deg, rgba(62, 82, 120, 1) 0%, rgba(78, 182, 215, 1) 70%, rgba(160, 215, 236, 1) 100%);
    /* Product Swiper  */
    --product-swiper-theme-bg: rgba(255,255,255,0.6);
    --product-swiper-template-theme-bg: var(--themeColourS);
}

/* Theme Overrides */
.color-theme-ocuvite-blue {
    --themeColourP: #3DAEE3;
    --themeColourP50: #3DAEE380;
    --themeColourP80: #3DAEE3CC;
    --themeColourS: #92D6E3;
    --themeColourS50: #92D6E380;
    --themeColourS80: #92D6E3CC;
    --themeColourT: #F5FCFD;
    --themeColourT50: #F5FCFD80;
    --themeColourT80: #F5FCFDCC;
    /* Product Panel */
    --product-panel-theme-bg: linear-gradient(180deg, rgba(62, 82, 120, 1) 0%, rgba(78, 182, 215, 1) 70%, rgba(160, 215, 236, 1) 100%);
    /* Product Swiper  */
    --product-swiper-theme-bg: var(--themeColourS);
    --product-swiper-template-theme-bg: var(--themeColourS);
    background: linear-gradient(180deg, rgba(160, 215, 236, 0.5) 0%, rgba(78, 182, 215, 1) 31%, rgba(62, 82, 120, 1) 71%, rgba(62, 82, 120, 1) 100%);
}

.color-theme-ocuvite-green {
    --themeColourP: #245950;
    --themeColourP50: #24595080;
    --themeColourP80: #245950CC;
    --themeColourS: #3DC3B2;
    --themeColourS50: #3DC3B280;
    --themeColourS80: #3DC3B2CC;
    --themeColourT: #3DC3B2;
    --themeColourT50: #3DC3B280;
    --themeColourT80: #3DC3B2CC;
    /* Product Panel */
    --product-panel-theme-bg: linear-gradient(180deg, rgba(19, 68, 59, 1) 0%, rgba(36, 89, 80, 1) 30%, rgba(44, 141, 125, 1) 83%, rgba(61, 195, 178, 1) 100%);
    /* Product Swiper  */
    --product-swiper-theme-bg: var(--themeColourS);
    --product-swiper-template-theme-bg: var(--themeColourS);
    background: linear-gradient(180deg, rgba(61, 195, 178, 0.5) 0%, rgba(44, 141, 125, 1) 18%, rgba(36, 89, 80, 1) 70%, rgba(19, 68, 59, 1) 100%);
}

.color-theme-ocuvite-orange {
    --themeColourP: #CD3B15;
    --themeColourP50: #CD3B1580;
    --themeColourP80: #CD3B15CC;
    --themeColourS: #FEBA83;
    --themeColourS50: #FEBA8380;
    --themeColourS80: #FEBA83CC;
    --themeColourT: #FEBA83;
    --themeColourT50: #FEBA8380;
    --themeColourT80: #FEBA83CC;
    /* Product Panel */
    --product-panel-theme-bg: linear-gradient(180deg, rgba(232, 91, 54, 1) 0%, rgba(240, 104, 69, 1) 14%, rgba(244, 142, 55, 1) 55%, rgba(255, 150, 66, 1) 76%, rgba(254, 185, 129, 1) 100%);
    /* Product Swiper  */
    --product-swiper-theme-bg: var(--themeColourS);
    --product-swiper-template-theme-bg: var(--themeColourS);
    background: linear-gradient(180deg, rgba(255, 150, 66, 0.5) 0%, rgba(244, 142, 55, 1) 30%, rgba(240, 104, 69, 1) 86%, rgba(232, 91, 54, 1) 100%);
}

.color-theme-ocuvite-purple {
    --themeColourP: #77358A;
    --themeColourP50: #77358A80;
    --themeColourP80: #77358ACC;
    --themeColourS: #C176CA;
    --themeColourS50: #C176CA80;
    --themeColourS80: #C176CACC;
    --themeColourT: #C176CA;
    --themeColourT50: #C176CA80;
    --themeColourT80: #C176CACC;
    /* Product Panel */
    --product-panel-theme-bg: linear-gradient(180deg, rgba(90, 46, 94, 1) 0%, rgba(119, 53, 138, 1) 26%, rgba(149, 54, 161, 1) 82%, rgba(193, 118, 202, 1) 100%);
    /* Product Swiper  */
    --product-swiper-theme-bg: var(--themeColourS);
    --product-swiper-template-theme-bg: var(--themeColourS);
    background: linear-gradient(180deg, rgba(193, 118, 202, 0.5) 0%, rgba(149, 54, 161, 1) 18%, rgba(119, 53, 138, 1) 74%, rgba(90, 46, 94, 1)) 100%;
}

body {
    /* Button Variables */
    --btn-bg: transparent;
    --btn-border: 2px solid #000;
    --btn-color: #000;
    --btn-radius: 2px;
    --btn-hover-bg: #3E5278;
    --btn-hover-border: 2px solid #3E5278;
    --btn-hover-color: #FFF !important;
    --btn-white-bg: transparent;
    --btn-white-border: 2px solid #FFF;
    --btn-white-color: #FFF;
    --btn-white-hover-bg: #FFF;
    --btn-white-hover-border: 2px solid #FFF;
    --btn-white-hover-color: #000 !important;
    /* Radius Variables */
    --banner-radius: 10px;
    --standard-radius: 10px;
    --large-radius: 10px;
    --row-theme-border-bg: rgba(255,255,255,0.85);
    --row-theme-border-radius: 10px;
}

/* Header Variables */
.header-wrapper {
    --header-color: #00818a;
    --header-link-color: #000;
    --header-link-active-color: #00818a;
    --header-dropdown-bg: #FFF;
    --header-dropdown-link-border-color: #00818a;
    --header-dropdown-product-border: 1px solid var(--themeColourS);
    --header-menu-btn-color: #000;
    --header-bg: #FFF;
    --header-sub-menu-border: 1px solid #ccc;
    --header-sub-menu-trigger-color: #000;
}

/* Footer Variables */
footer {
    --footer-bg: #3E5278;
    --footer-color: #FFF;
    --footer-border: 1px solid rgba(255,255,255,0.3);
}

/* Badge Icons */
.badge-icons-control {
    --badge-icon-bg: var(--themeColourS50);
}

/* Card Carousel */
.card-carousel-control {
    --card-carousel-title-bg: #FFF;
    --card-carousel-control-bg: #FFF;
    --card-carousel-control-border: 2px solid var(--themeColourP);
}

/* FAQs */
.faqs-control {
    --faqs-accord-border: 1px solid #707070;
    --faqs-accord-button-color: #1D1C1B;
    --faqs-accord-trigger-bg: #FFF;
    --faqs-accord-trigger-border: 2px solid var(--themeColourP);
    --faqs-accord-trigger-color: #000;
    --faqs-accord-content-color: #1D1C1B;
}

/* FAQs Repository */
.faqs-repository {
    --faqs-repo-menu-wrapper-border: 6px solid transparent;
    --faqs-repo-menu-border: 1px solid #000;
    --faqs-repo-container-bg: var(--themeColourT);
    --faqs-repo-back-color: #000;
    --faqs-repo-accord-item-bg: transparent;
    --faqs-repo-accord-item-border: 1px solid #707070;
    --faqs-repo-accord-button-bg: transparent;
    --faqs-repo-accord-button-color: #1D1C1B;
    --faqs-repo-accord-trigger-bg: #FFF;
    --faqs-repo-accord-trigger-border: 2px solid var(--themeColourP);
    --faqs-repo-accord-trigger-color: #000;
    --faqs-repo-accord-content-color: #1D1C1B;
}

/* Latest News */
.latest-news-block {
    --latest-news-article-button-color: #3DAEE3;
}

/* Main Banner */
.main-banner-wrap {
    --banner-inner-radius: var(--banner-radius);
    --banner-content-bg: #FFF;
    --banner-control-color: #000;
    --banner-item-overlay-bg: linear-gradient(90deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.28) 61%, rgba(255, 255, 255, 0) 100%)
}

/* Page Menu */
.page-menu-control {
    --page-menu-wrapper-bg: var(--themeColourS);
    --page-menu-item-color: #FFF;
}

/* Product Panel */
.product-panel {
    --product-panel-bg: var(--product-panel-theme-bg);
    --product-panel-radius: 10px;
    --product-panel-display-slide-radius: 10px;
    --product-panel-thumb-slide-bg: #FFF;
    --product-panel-thumb-slide-radius: 10px;
    --product-panel-dots-color: #FFF;
    --product-panel-arrows-bg: var(--themeColourP);
    --product-panel-arrows-border: #FFF;
    --product-panel-arrows-color: #FFF;
    --product-panel-simplebar-bg: var(--themeColourP);
    --product-panel-simplebar-track-bg: var(--themeColourS);
    --product-panel-simplebar-track-hover-bg: var(--themeColourS80);
    --product-panel-content-color: #FFF;
    --product-panel-content-btn-border: 2px solid var(--themeColourP);
    --product-panel-content-btn-bg: #FFF;
    --product-panel-content-btn-color: var(--themeColourP);
    --product-panel-content-btn-width: 100%;
    --product-panel-content-btn-hover-border: 2px solid var(--themeColourP);
    --product-panel-content-btn-hover-bg: var(--themeColourP);
    --product-panel-content-btn-hover-color: #FFF;
    --product-panel-accordion-separator: #000;
    --product-panel-accordion-heading-color: #FFF;
    --product-panel-accordion-heading-case: uppercase;
    --product-panel-accordion-trigger-border: 2px solid var(--themeColourP);
    --product-panel-accordion-trigger-color: var(--themeColourP);
    --product-panel-accordion-color: #FFF;
    --product-panel-accordion-img-size: 106px;
}

/* Product Swiper */
.product-swiper-block {
    --product-swiper-bg: var(--product-swiper-theme-bg);
    --product-swiper-radius: var(--standard-radius);
    --product-swiper-padding: 15px;
    --product-swiper-template-bg: var(--product-swiper-template-theme-bg);
    --product-swiper-inner-bg: rgba(255,255,255,0.65);
}

/* Stats */
.stats {
    --stats-wrap-border: 1px solid #979797;
    --stats-cricle-border: 4px solid var(--themeColourP);
}

/* Swiper */
.swiper-container {
    --swiper-bg: transparent;
    --swiper-radius: 10px;
    --swiper-padding: 0;
    --swiper-slider-width: 150px;
    --swiper-image-transform: scale(0.8);
    --swiper-control-height: 45px;
}

/* Swiper Testimonials */
.swiper-testimonial-container {
    --swiper-testimonial-bg: rgba(252,254,255,0.85);
    --swiper-testimonial-stars-full-color: var(--themeColourP);
    --swiper-testimonial-stars-empty-color: var(--themeColourS);
    --swiper-testimonial-pager-bg: var(--themeColourS);
    --swiper-testimonial-pager-active-bg: var(--themeColourP);
}

/* Template News */
.featured-news-row {
    --temp-news-featured-section-bg: #3E5278;
    --temp-news-featured-section-padding: 0;
    --temp-news-featured-bg: transparent;
    --temp-news-featured-color: #FFF;
    --temp-news-featured-arrow-prev: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23FFF'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");
    --temp-news-featured-arrow-next: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23FFF'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    --temp-news-featured-btn-bg: var(--btn-white-bg);
    --temp-news-featured-btn-border: var(--btn-white-border);
    --temp-news-featured-btn-color: var(--btn-white-color);
    --temp-news-featured-btn-hover-bg: var(--btn-white-hover-bg);
    --temp-news-featured-btn-hover-border: var(--btn-white-hover-border);
    --temp-news-featured-btn-hover-color: var(--btn-white-hover-color);
    --temp-news-featured-image-radius: 10px;
}

.news-categories-row {
    --temp-news-categories-bg: var(--themeColourS50);
    --temp-news-categories-border-color: var(--themeColourS50);
}

.news-topics-row {
    --temp-news-topics-select-border: 1px solid #979797;
    --temp-news-topics-select-icon-color: #000;
}

/* Template News Article */
.news-article {
    --temp-article-bg: #FFF;
    --temp-article-header-bg: var(--themeColourP);
    --temp-article-header-color: #FFF;
    --temp-article-header-radius: 10px;
    --temp-article-header-author-border: 2px solid #3DAEE3;
    --temp-article-header-image-display: block;
    --temp-article-header-image-radius: 10px;
    --temp-article-header-image-width: 50%;
    --temp-article-author-bg: var(--themeColourP);
    --temp-article-author-color: #FFF;
    --temp-article-author-outer-border: 2px solid var(--themeColourP);
    --temp-article-author-border: 2px solid #3DAEE3;
    --temp-article-author-radius: 10px;
}

#newsList {
    --temp-article-image-radius: 10px;
}

/* Template Products */
.template-products {
    --product-banner-content-gb: rgba(0,0,0,0.2);
    --product-item-bg: rgba(255,255,255, 0.2);
    --product-item-title-color: #FFF;
}

@media only screen and (min-width: 992px) {
    body {
        /* Radius Variables */
        --banner-radius: 10px;
        --standard-radius: 10px;
        --large-radius: 10px;
        /* Button Variables */
        --btn-radius: 2px;
    }

    /* Main Banner */
    .main-banner-wrap {
        --banner-content-bg: transparent
    }

    /* Product Panel */
    .product-panel {
        --product-panel-radius: 10px;
        --product-panel-thumb-slide-radius: 10px;
    }

    /* Product Swiper */
    .product-swiper-block {
        --product-swiper-padding: 30px;
    }

    /* Swiper */
    .swiper-container {
        --swiper-radius: 10px;
        --swiper-slider-width: 297px;
    }

    /* Template News Article */
    .news-article {
        --temp-article-header-radius: 10px;
        --temp-article-author-radius: 10px;
    }
}

/* #region Page Theme */

.page-wrapper-theme {
    background: #93D2E9;
    background: radial-gradient(circle at 50% 75%,rgba(62, 82, 120, 1) 0%, rgba(62, 82, 120, 1) 29%, rgba(78, 182, 215, 1) 70%, rgba(160, 215, 236, 1) 100%);
}

/* #endregion */
