/* /////////////////////////// -IMPORT GOOGLE FONTS - ////////////////////////// */

/* FIGTREE + MONTSERRAT + RALEWAY + POPPINS FONTS */
@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@300;500;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Overpass:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&display=swap');



/* /////////////////////////// - MEDIA ADJUSTMENTS -////////////////////////// */
@media all and (min-width: 800px) {
    .grdesk {
        display: flex;
    }

    .grmob {
        display: none !important;
    }

    /*.grearnmob{}*/
    
}

@media all and (max-width: 799px) {
    .grdesk {
        display: none;
    }

    .grmob {
        display: flex;
    }

    .grearnmob {
        margin: -40px 10px 40px 10px !important;
        padding: 30px;
    }

    .whitebox {
        padding: 15px !important;
    }

    .nav-menu {display:none;}
    .nav-back {display:none;}
   
    
}

@media screen and (max-width: 800px){

.logo-mobile {
    display: block;
    background-size: cover;
    background-repeat: no-repeat;
}



/* Firefox Scrollbar Adjustments */
* {
    scrollbar-width: thin;
    scrollbar-color: lightgrey white;
}

/* Chrome, Edge, and Safari Scrollbar Adjustments */
*::-webkit-scrollbar {
    width: 14px;
    height: 6px;
}

/* Track Scrollbar Adjustments */
*::-webkit-scrollbar-track {
    background: transparent;
}

/* Thumb Scrollbar Adjustments */
*::-webkit-scrollbar-thumb {
    background-color: lightgrey;
    border-radius: 20px;
}
}

@media screen and (min-width: 769px) {
    .tile {
        display: flex;
    }
}

/*/////////////*/
html {
    scroll-behavior: smooth;
}

.cw-business {
    display: none !important;
}

.cw-spot {
    display: none !important;
}


/* ///////////////////////////GENERAL SETTINGS////////////////////////// */
p {
    font-size: 0.9rem;
    font-family: var(--gr-bodyfont);
    font-weight: 300;
    color: #000000;
    line-height: 1.3;
    margin: 0px;
}

h1 {
    font-size: 34px;
    font-family: var(--gr-font);
    font-weight: 600;
    line-height: 1.2em;
    margin: 0;
}

.display h1 {
    font-size: 34px;
    font-family: var(--gr-font);
    font-weight: 600;
    line-height: 1.2;
    margin: 0;
}

h2 {
    font-size: 32px;
    font-family: var(--gr-font);
    font-weight: 600;
    line-height: 1.2;
    margin: 0;
}

h3 {
    font-size: 1.4rem;
    font-family: var(--gr-font);
    font-weight: 600;
    margin: 0px 0px 20px 0px;
    margin: 0;
}

h4 {
    font-size: 1.3rem;
    font-family: var(--gr-font);
    font-weight: 600;
    margin: 0;
}

h5 {
    font-size: 18px;
    font-family: var(--gr-font);
    font-weight: 600;
    margin: 0;
}

.h-no-padding {
    margin: 0px;
}

.h-15-padding {
    margin: 15px 0px;
}

.fontorange {
    color: #FF914D;
}

.fontgreen {
    color: #3A7D64;
}

.fontwhite {
    color: #FFFFFF;
}

.fontdashstat {
    color: #FFFFFF;
    font-size: 10px;
    margin-top: -5px;
    font-family: var(--gr-font);
}

.pagecolor {
    background-color: var(--gr-background);
    margin: 40px 15px;
}

.FS14 {
    font-size: 14px;
}

.FS16 {
    font-size: 16px;
}

.FS18 {
    font-size: 18px;
}


.main-content {
    background-color: var(--gr-background);
    font-family: var(--gr-bodyfont);
    
}

.w1{font-weight: 100;}
.w2{font-weight: 200;}
.w3{font-weight: 300;}
.w4{font-weight: 400;}
.w5{font-weight: 500;}
.w6{font-weight: 600;}
.w7{font-weight: 700;}
.w8{font-weight: 800;}

.title{font-family: var(--gr-font);}

.cp {color:var(--gr-primary)}
.cs {color:var(--gr-secondary)}

.T2 {
    overflow: hidden;
    /*line-height: 2rem; */
    -webkit-box-orient: vertical;
    display: block;
    display: -webkit-box;
    overflow: hidden !important;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
}

.T4 {
    overflow: hidden;
    /*line-height: 2rem; */
    max-height: 8rem;
    -webkit-box-orient: vertical;
    display: block;
    display: -webkit-box;
    overflow: hidden !important;
    text-overflow: ellipsis;
    -webkit-line-clamp: 4;
}

.T6 {
    overflow: hidden;
    /*line-height: 2rem; */
    -webkit-box-orient: vertical;
    display: block;
    display: -webkit-box;
    overflow: hidden !important;
    text-overflow: ellipsis;
    -webkit-line-clamp: 6;
}

/* /////////////////////////// FONT AWSOME EDITS ////////////////////////// */
.fa-solid, .fas {
   margin-right: 0px;
}

.fa-brands, .fab {
   margin-right: 0px;
}

.fa {
   margin-right: 0px;
}


/* /////////////////////////// NEW GR GRID NEW ////////////////////////// */
.grunhub-scoller-contain {
    max-width: 1200px;
    margin: 1rem auto;
}

/*.grid-full-container{
  background-color:var(--gr-background);
  padding:15px 0px 20px 0px;
}*/



.grunhub-scoller {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 31%;
    gap: 2rem;;
    /*max-width: 1170px;
  margin:0 1rem;*/
    padding: 1rem 0rem;
    justify-content: space-between;
    cursor: grab;

    overflow-x: auto;
    overscroll-behavior-inline: contain;
}

.gac2 {
    grid-auto-columns: 48%;
}

/* ///GRID - GAP STYLE/// */
.fs-05 {
    font-size: 0.5rem !important;
}

.fs-075 {
    font-size: 0.75rem !important;
}

.fs-1 {
    font-size: 1rem !important;
}

.fs-125 {
    font-size: 1.25rem !important;
}

.fs-15 {
    font-size: 1.5rem !important;
}

.fs-175 {
    font-size: 1.75rem !important;
}

.fs-2 {
    font-size: 2rem !important;
}

/* ///GRID - GAP STYLE/// */
.e-gap-05 {
    gap: 0.5rem;
}

.e-gap-075 {
    gap: 0.75rem;
}

.e-gap-1 {
    gap: 1rem;
}

.e-gap-15 {
    gap: 1.5rem;
}

.e-gap-2 {
    gap: 2rem;
}

/* ///GRID - ALIGN STYLE/// */
.e-stretch {
    align-content: stretch;
}

.e-space {
    align-content: space-between;
}

.e-news {
    user-select: none;
    cursor: pointer;
    background: no-repeat;
    background-size: cover;
    border-radius: 1rem !important;
}

.element {
    display: grid;
    grid-template-rows: min-content;
    background-color: white;
    padding: 2rem 1.5rem;
    text-align: center;
    border-radius: var(--gr-radius);
    column-gap: 1rem;
}

.grunhub-element {
    display: grid;
    grid-template-rows: min-content;
    gap: 1rem;
    padding: 2rem 1.5rem;
    align-content: space-between;
    text-align: center;
    /*user-select: none;*/
    box-shadow: rgba(26, 26, 26, 0.1) 0px 2px 5px 1px;
    background-color: #FFFFFF;
}


.grunhub-element > img {
    inline-size: 100%;
    /* aspect-ratio: 16 / 9; */
    object-fit: cover;
}

.grunhub-snap {
    scroll-snap-type: inline mandatory;
}

.grunhub-snap > * {
    scroll-snap-align: center;
    scroll-padding-inline: 1rem;
}

.mtb20 {
    margin: 1rem 0rem;
}

.dash-title {
    font-size: 1.75rem;
    margin: 0rem 1rem;
}

.dash-sub-title {
    font-size: 0.9rem;
    margin: 0.5rem 0rem 1.5rem 0rem;
    color: #222222;
}

.high-lighter {
    background: var(--gr-secondary-light);
}

.grid-welcome {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1rem;
    margin: 0 1rem;
}

.grid-40-60 {
    display: grid;
    grid-template-columns: 2fr 3fr;
    gap: 3rem;
    margin: 0 1rem;
}

.grid-60-40 {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: 3rem;
    margin: 0 1rem;
}

.grid-sidebar {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 2rem;
    margin: 0 1rem;
    grid-auto-rows: 1fr;
}

.grid--sidebar {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: 2rem;
    grid-row-gap: 2rem;
    /*margin: 0 1rem;*/
}

.grid-4to1 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 2rem;
    margin: 0 1rem;
}

.grid-3to1 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 2rem;
    margin: 0 1rem;
}

.grid-2to1 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    margin: 0 1rem;
}

.grid-1to1 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    margin: 0 1rem;
}

.grid-dashstats {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1rem;
    margin: 0.5rem 0;
}

.company-news {
    height: 300px;
    grid-auto-columns: 24%;
}

.grid-header1 {
    display: grid;
    grid-template-columns: 3fr 1fr 2fr;
    gap: 2rem;
    margin: 0 1rem;
    color: white;
}


.grid-dash-welcome {
    display: grid;
    grid-template-columns: 1.5fr 3fr 1fr;
    gap: 2rem;
    margin: 1.5rem 1rem;
    background-color: #FFFFFF10;
    align-items: center;
    padding: 1.5rem;
    border-radius: var(--gr-radius);
}

.grid-page-header {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 1rem;
    margin: 1.5rem 1rem;
    background-color: #FFFFFF10;
    align-items: center;
    padding: 1.5rem;
    border-radius: var(--gr-radius);
}

.dash-dash-main {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 2rem;
    margin: 0 1rem;
}

.dash-dash-main-left {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
    margin: 0;
    background-color: #FFFFFF;
    padding: 1.5rem 1.5rem 2rem 1.5rem;
    border-radius: var(--gr-radius);
    z-index: 2;
}

.dash-dash-main-left-news {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
    margin: 0;
    background-color: #FFFFFF;
    padding: 3rem;
    border-radius: var(--gr-radius);
    z-index: 2;

}

.dash-inner-title {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    align-items: center;
    border-bottom: 1px solid var(--gr-background);
    padding-bottom: 1rem;
}

.dash-profile {
    background: var(--gr-primary);
    display: grid;
    grid-template-columns: 1fr;
    padding: 2rem 1.5rem;
    color: #FFFFFF;
    border-radius: var(--gr-radius);
    gap: 0.5rem;
    text-align: center;
    margin: 1.5rem 0rem 1.5rem 0rem;
}


.dash-profile-stats {
    background-color: #ffffff30;
    font-size: 22px;
    color: white;
    text-align: center;
    padding: 0.5rem;
    border-radius: 5px;
}

.grid-indent {
    margin: 1rem 0;
}

/* /////////////////////////// Splash screen ////////////////////////// */
.dash-splash {
    display: grid;
    grid-template-columns: 1fr;
    margin: 0;
    padding: 0rem;
    border-radius: var(--gr-radius);
}

.dash-splash-card {
    display: grid;
    grid-template-rows: min-content;
    gap: 0rem; /*this was 0.5rem */
    text-align: center;
    user-select: none;
    padding: 0.5rem;
    align-content: center;
}

.dash-splash-card-coffee {
    display: grid;
    grid-template-rows: min-content;
    gap: 0.5rem;
    text-align: center;
    user-select: none;
    padding: 1.5rem;
    align-content: center;
}

.grunhub-scoll-splash {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 100%;
    gap: 1rem;
    padding: 0rem;
    justify-content: space-between;
    cursor: grab;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    grid-auto-columns: 90%;
}

.grunhub-scoll-splashscreen {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 100%;
    gap: 0rem;
    padding: 0rem;
    justify-content: space-between;
    cursor: grab;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    grid-auto-columns: 100%;
    scroll-behavior: smooth;
}

.dash-splash-logincontain {
    height: 100vh;
    background-color: var(--gr-primary);
    padding: 2rem;
    display: grid;
    justify-content: center;
    align-items: center;

}

.gh-splash-controls {
    position: absolute;
    bottom: 0;
    background: #055193;
    width: 100%;
    display: grid;
    border-top: 1px solid white;
}

.splash-controls-inner {
    padding: 1rem 2rem 2rem 2rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    align-items: start;
}

.splash-skip {
    padding: 2rem 1rem 1.5rem 1rem;
}

.splash-100vh {
    height: 100vh;
    background: var(--gr-primary);
    display: grid;
    align-items: start;
}

.splash-title {
    font-size: 2rem !important;
    color: #FFFFFF !important;
    padding: 0 1rem;

}

.splash-sub-title {
    font-weight: 400 !important;
    font-size: 1rem !important;
    color: #FFFFFF !important;
    margin-bottom: 1rem !important;
    padding: 0 0.5rem;
}

.splash-image {
    max-height: 600px;
    margin: 0 auto;
}

.splash-swipe {
    background-color: #FFFFFF00;
    height: 45px;
    width: 45px;
    border-radius: 50%;
    animation-name: ghswipe;
    animation-duration: 2s;
    animation-timing-function: ease-in;
    animation-delay: 0s;
    animation-iteration-count: 2;
    animation-direction: normal;
    animation-fill-mode: none;
    position: absolute;
    top: 50vh;

    transform: translateX(150px);
}

@keyframes ghswipe {
    from {
        transform: translateX(300px);
        opacity: 1;
        background-color: #FFFFFF;
    }
    to {
        transform: translateX(0);
        opacity: 0.1;
        background-color: #FFFFFF;
    }

}

/* /////////////////////////// POPUP MODAL  ////////////////////////// */

.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
    float: none;
    width: 100%;
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.ui-widget-content{
border: none;
border-radius: var(--gr-radius);
padding: 1.5rem 1rem;
}

.ui-button-text-only .ui-button-text {
padding: 0.5em 1.5em;
}

.ui-dialog .ui-state-default, .ui-dialog .ui-widget-content .ui-state-default, .ui-dialog .ui-widget-header .ui-state-default {
width:50%;
border-radius: var(--gr-buttonradius);
display: flex;
justify-content: center;

background-color: var(--gr-primary) !important;
    min-height: 35px;
    min-width: 35px;
}



.ui-dialog .ui-dialog-titlebar-close {
   width: 21px;
   max-width: 21px;
   height: 21px;
   max-height: 21px ;
   right: 23px !important;
   top: 15px !important;
}

.ui-dialog .ui-dialog-buttonpane {
padding: 0.5rem 1rem;
}

.ui-dialog-title {
font-size: 1.1rem;
font-family: var(--gr-font);
}

.ui-dialog .ui-dialog-content{
font-size: 1rem;
font-family: var(--gr-font);
line-height: 1;
}

/* /////////////////////////// DASHBOARD ////////////////////////// */
.grunhub-scoll-splash-mobile {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 100%;
    gap: 1rem;
    padding: 0rem;
    justify-content: space-between;
    cursor: grab;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    grid-auto-columns: 90%;
}

.grunhub-snap-mobile {
    scroll-snap-type: inline mandatory;
}

.grunhub-snap-mobile > * {
    scroll-snap-align: center;
    scroll-padding-inline: 1rem;
}

.dash-spare {
    background-color: #FFFFFF;
}

.dash-instagram {
    background-color: #FFFFFF;
}

.dash-linkedin {
    background-color: #FFFFFF;
}

.dash-container {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 1fr;
    gap: 2em 2em;
    grid-auto-flow: row;
    grid-template-areas:
    "dash-latest dash-news"
    "dash-spend dash-news"
    "dash-carbon dash-news";
    margin: 0 1rem;
}

.dash-container-top {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 1fr;
    gap: 2em 2em;
    grid-auto-flow: row;
    grid-template-areas: "dash-latest dash-news";
    margin: 0 1rem;
}

.dash-spend {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    gap: 0em 2rem;
    grid-auto-flow: row;
    grid-area: dash-spend;
}

.dash-news-inner {
    display: grid;
    grid-template-rows: 1fr;
}

/*--------Featured Articles Widget   --*/    
.dash-news-item{
    background-size: cover;
    background-repeat: no-repeat;
    aspect-ratio: 1.3 / 1;
    border-radius: 8px;
    display: grid;
    align-content: flex-end;
}

.GL-section-1{
    margin: 1rem 0 0 0;
}

.dash-news-item-content{
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.9));
    padding: 1.5rem;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    color: #FFFFFF;
    line-height: 1;
    font-size: 1rem;
    font-weight: 500;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, .9);
}

.dash-news-item-image {
    height: 100%;
    object-fit: cover;
    min-height: 60px;
    max-height: 100% !important;
    max-width: 100% !important;
    min-width: 100px;    
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.dash-news-item-title {
    font-size: 1rem;
    font-weight: 600;
    font-family: var(--gr-font);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    position: relative;
}

.dash-news-item-title::after {
    content: ''; /* Empty content for the underline */
    position: absolute;
    left: 0; /* Start from the left edge */
    bottom: -2px; /* Adjust as needed (controls the distance of the underline from the text) */
    width: 0; /* Initially no width */
    height: 2px; /* Thickness of the underline */
    background-color: #0074D9; /* Your desired underline color */
    transition: width 0.3s ease; /* Smooth animation effect */
  }
  
  .dash-news-item-title:hover::after {
    width: 100%; /* Expand to the right on hover */
  }

.dash-news-item-date {
    font-size: 0.75rem;
    color: var(--gr-primary);
    font-weight: 300;
}

.dash-donations {
    background: var(--gr-primary);
    display: grid;
    grid-template-columns: 1fr 1fr;
    color: white;
    padding: 1.5rem;
    align-items: stretch;
    border-radius: var(--gr-radius);
    margin-bottom: 10px;
}

.dash-prize, .dash-donate {
    display: grid;
}



.dash-latest {
    grid-area: dash-latest;
}

/*.dash-prize { grid-area: 1 / 1 / 2 / 2; }
.dash-donate { grid-area: 1 / 2 / 2 / 3; }*/
.dash-carbon {
    grid-area: dash-carbon;
}

.dash-news {
    grid-area: dash-news;
    background-color: white;
    border-radius: 10px;
}

.grid-carbon {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 2rem;
    margin: 2rem 0rem 0rem 0rem;
}

.carbon-right{
    background: #edf1f7;
    padding: 1rem;
    border-radius: 8px;
}

.carbon-left{
    /*background: #edf1f7;*/
    padding: 0rem 1rem 1rem 1rem;
    border-radius: 8px;
}

.badge-grid {
    display: grid;
    grid-template-columns: 1fr;
}

.badge-wrapper {
    margin-left: 0;
    margin-right: 0;
    font-size: 0.7rem;
    text-align: center;
}

.badge-title, .carbon-left {
    font-family: var(--gr-font);
    font-size: 0.9rem;
    margin-left: 0px;
}

.badge-motivation {
    color: black;
    font-weight: 600;
    margin-top: 30px;
    margin-left: 0px;
    margin-right: 0px;
    font-family: var(--gr-font);
    font-size: 0.9rem;
}

.dash-3-donate {
    background-size: contain;
    background-repeat: no-repeat;
    background-image: var(--gr-donate);
    height: 100%;
    background-position: center;
    max-width: 125px;
    margin-left: 2rem;
}

.dash-3-prize {
    background-size: contain;
    background-repeat: no-repeat;
    background-image: var(--gr-dashprize);
    height: 100%;
    background-position: center;
    max-width: 125px;
    margin-left: 2rem;
}

/* ----------- DASH WIDGET POSITIONS ------------ */
.dash-div-campaign {
    grid-area: 1 / 1 / 2 / 3;
    border-radius: var(--gr-radius);
    background-color: #FFFFFF;
    border: 2px solid #DCE4F4;
}

.dash-div-news {
    grid-area: 1 / 3 / 2 / 4;
    border-radius: var(--gr-radius);
    background-color: #FFFFFF;
    border: 2px solid #DCE4F4;
}


/* /////////////////////////// MASTER MEDIA QUERIES ////////////////////////// */

/* Media Query for Mobile Devices */
@media (max-width: 680px) {
    .grunhub-scoller {
        grid-auto-columns: 85%;
    }

    .grid-60-40 {
        grid-template-columns: 1fr;
        display: flex;
        flex-direction: column-reverse;
    }

    .grid-welcome {
        grid-template-columns: 1fr;
    }

    .grid-4to1 {
        grid-template-columns: 1fr;
    }

    .grid-3to1 {
        grid-template-columns: 1fr;
    }

    .grid-2to1 {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .company-news {
        grid-auto-columns: 80%;
    }

    .grid-header1 {
        grid-template-columns: 1fr;
    }

    .grid-page-header {
        grid-template-columns: 1fr;
    }

    .grid-dash-welcome {
        grid-template-columns: 1fr;
    }

    .dash-dash-main {
        grid-template-columns: 1fr;
    }

    .dash-activities-container {
        grid-template-columns: 1fr !important;
    }

    .dash-spend {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .header-right {
        min-height: 200px !important;
    }

    .header-right-image {
        max-width: 300px !important;
    }

    .grid-activity-detail-icons {
        grid-template-columns: 1.5fr 1fr 1.5fr !important;
    }

    .earncontent-container {
        padding: 0 !important;
        background-color: #FFFFFF !important;
    }

    #quiz-container {
        background-color: #FFFFFF !important;
    }

    .optionOutCss {
        width: unset;
        padding: 0.5rem;
    }

    .campaign-box {
        padding: 3rem 1rem !important;
    }

    .campaign-box-mobile {
        margin-top: 9rem !important;
        position: relative;
    }

    .my-account-subs-list {
        width: 100% !important;
        margin-bottom: 5px;
        margin-left: -5px;
    }

    .ma-tabcon-myrewards-table-history tr td:nth-of-type(2) {
        display: none;
    }

    /*.donate-item-drop-wrap {
        grid-template-rows: 250px 2fr !important;
    }*/

    .donate-item-drop-1 {
        grid-template-columns: 1fr !important;
    }

    .donate-item-drop-3 {
        grid-area: 2 / 1 / 3 / 3 !important;
        padding: 2rem 2rem 0rem 2rem !important;
    }

    .donate-item-drop-2 {
        grid-area: charitytext !important;
        padding: 2rem 0rem 0rem 0rem !important;
    }

    /*.donate-item-item-logo {
        margin-right: auto;
        margin-left: auto;
    }*/

    .donate-item-item-logo {
        float: left;
        margin-right: 30px;
        width: 100px;
        grid-area: donpic;
    }

    .donate-item-item-title {
        padding-bottom: 0px !important;
        grid-area: dontitle;
    }

    .donate-item-item-wrap {
        text-align: center;
    }

    .donate-item-item-points {
        justify-content: center;
    }

    .donate-item-item-go .btn {
        position: unset !important;
        margin-top: 1.5rem !important;
    }

    .grid-carbon {
        grid-template-columns: 1fr;
    }

    /*.grid-dashstats {grid-template-columns: 1fr;}*/
    .dash-donations {
        grid-template-columns: 1fr 1fr;
    }

    .activitymove {
        margin-top: 6rem !important;
    }

    .prizedraw-grid {
        grid-template-columns: 1fr !important;
    }

    .prizeqty {
        padding-top: 0 !important;
        width: 100%;
    }

    .prize-detail H2 {
        margin-top: 0 !important;
    }

    .prize-text-wrap {
        margin-left: 0 !important;
    }

    .prizedesc {
        padding: 0 !important;
    }

    .grid--sidebar {
        grid-template-columns: 1fr !important;
        grid-auto-rows: auto;
    }

    .dash-div-campaign {
        grid-area: auto;
    }

    .dash-div-news {
        grid-area: auto;
    }

    #remove_profile_image {
        margin: 1rem 0rem !important;
    }

    .header-right-circle {
        display: none;
    }

    .errorflex {
        grid-template-columns: 1fr !important;
    }

    .header-right-image-prize, .header-right-image-donate, .header-right-image-rewards, .header-right-image-everyday {
        position: absolute !important;
        top: -60px;
        height: 290px !important;
    }

    .mb30 {
        display: flex;
        flex-direction: column;
    }

    .col-8 {
        width: 100% !important
    }

    .cw-box {
        padding: 2rem 1rem !important;
    }

    .p-3 {
        padding: 0rem !important;
    }

    .dash-dash-main-left-news {
        padding: 2rem 1rem;
    }

    .grid-prizedraw-enter {
        grid-template-columns: 1fr !important;
        row-gap: 0.5rem;
    }

    .directory-dropdown {
        grid-template-columns: 1fr !important;
    }

    .blog-video {
        max-width: 100% !important;
    }

    .header-right-news {
        min-height: 250px !important;
    }

    .click-to-reveal {
        width: 100% !important;
    }

    .click-to-reveal-winner {
        width: 90% !important;
    }

    blockquote {
        font-size: 1.1rem !important;
    }

    .video-vertical {
        padding-bottom: 175% !important;
    }

    .dash-container {
        grid-template-columns: 1fr !important;
        grid-template-areas:
        "dash-latest"
        "dash-spend"
        "dash-news"
        "dash-carbon" !important;
    }

    *::-webkit-scrollbar {
        width: 14px;
        height: 4px !important;

    }

    *::-webkit-scrollbar-thumb {
        display: none;
    }

    .latestNewsGrid6{        
        grid-template-columns: 1fr 1fr !important;
        margin: 0 1rem !important;
    }

    .dash-news-item {       
        aspect-ratio: 1/1;
        height:100%;
        
    }

    .blogHeader{
        grid-template-columns: 1fr !important;
    }

}

/* Media Query for low resolution  Tablets, Ipads */
@media (min-width: 681px) and (max-width: 880px) {
    .grunhub-scoller {
        grid-auto-columns: 85%;
    }

    .grid-4to1 {
        grid-template-columns: 1fr 1fr;
    }

    .grid-3to1 {
        grid-template-columns: 1fr 1fr;
    }

    .company-news {
        grid-auto-columns: 40%;
    }

    .grid-header1 {
        grid-template-columns: 3fr 0fr 2fr;
    }

    .dash-dash-main {
        grid-template-columns: 1fr;
    }

    .dash-spend {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .dash-activities-container {
        grid-template-columns: 1fr 1fr;
    }

    .reginput {
        float: left;
        width: 50%;
    }

    .donate-item-item-go .btn {
        position: unset !important;
        margin-top: 1.5rem !important;
    }

    /*.grid-dashstats {grid-template-columns: 1fr;}*/
    .grid-activity-detail-icons {
        grid-template-columns: 1fr 1fr 1fr !important;
    }

    .prizedraw-grid {
        grid-template-columns: 1fr 1fr !important;
    }

    .prizeqty {
        padding-top: 0 !important;
        width: 100%;
    }

    .prize-detail H2 {
        margin-top: 0 !important;
    }

    .prize-text-wrap {
        margin-left: 0 !important
    }

    .prizedesc {
        padding: 0 !important
    }

    .grid-sidebar {
        grid-template-columns: 1fr 1fr !important;
    }

    .grid-60-40 {
        grid-template-columns: 1fr;
        display: flex;
        flex-direction: column-reverse;
    }

    .blog-video {
        max-width: 100% !important;
    }



    /*.dash-container {
     grid-template-columns: 1fr !important;
     grid-template-areas:
     "dash-latest"
     "dash-spend"
     "dash-carbon"
     "dash-news";
  }*/
    *::-webkit-scrollbar {
        width: 14px;
        height: 4px !important;
    }

    .latestNewsGrid6{        
        grid-template-columns: 1fr 1fr !important;
        
    }

}

/* Media Query for small desktop */
@media (min-width: 881px) and (max-width: 1080px) {

    .grid-4to1 {
        grid-template-columns: 1fr 1fr 1fr;
    }

    .company-news {
        grid-auto-columns: 30%;
    }

    .grid-header1 {
        grid-template-columns: 3fr 0fr 2fr;
    }

    .dash-container {
        grid-template-columns: 2fr 1fr;
    }

    .ui-tabs .ui-tabs-nav li a {
        width: auto;
    }

    .grid-activity-detail-icons {
        grid-template-columns: 1fr 1fr 1fr !important;
    }

    *::-webkit-scrollbar {
        width: 14px;
        height: 0px !important;
    }

}


/* /////////////////////////// NEW GR GRID OLD ////////////////////////// */
.flex-1 {
    padding: 15px;
    flex: 8.3%;
}

.flex-2 {
    padding: 15px;
    flex: 16.6%;
}

.flex-3 {
    padding: 15px;
    flex: 24.9%;
}

.flex-4 {
    padding: 15px;
    flex: 33.3%;
}

.flex-5 {
    padding: 15px;
    flex: 41.6%;
}

.flex-6 {
    padding: 15px;
    flex: 50%;
}

.flex-7 {
    padding: 15px;
    flex: 58.3%;
}

.flex-8 {
    padding: 15px;
    flex: 66.6%;
}

.flex-9 {
    padding: 15px;
    flex: 74.9%;
}

.flex-10 {
    padding: 15px;
    flex: 83.3%;
}

.flex-11 {
    padding: 15px;
    flex: 91.6%;
}

.flex-12 {
    padding: 15px;
    flex: 100%;
}

.flex-con {
    display: flex;
    flex-direction: row;
    max-width: 1170px;
    margin: 0px auto;
    gap: 20px;
}

.flex-left {
    text-align: left;
}

.flex-right {
    text-align: right;
}

.flex-center {
    text-align: center;
}

.flex-white {
    background-color: #FFFFFF;
}

.flex-primary {
    background-color: var(--gr-primary);
}

.flex-border {
    border: 2px solid lightgrey;
    border-radius: var(--gr-radius);
}

.flex-ac {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
}

/* Responsive layout - makes a one column-layout instead of two-column layout
@media (max-width: 700px) {
  .flex-con {
    flex-direction: column;
    margin: 0px 20px;
  }
}*/


.gr-grid {
    padding-top: 1.5em;
    padding-bottom: 1.5em;
}

.gr-grid-inner {
    padding: 10px;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.gr-row {
    padding: 0px 25px;
    gap: 20px;
    display: flex;
    justify-content: space-between;
}

.gr-col {
    padding: 0px 25px;
    gap: 5px;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
}

.restrict-width {
    margin-left: auto;
    margin-right: auto;
    max-width: 1200px !important;
}

.PT15 {
    padding-top: 15px;
}

.PT25 {
    padding-top: 25px;
}

.PT35 {
    padding-top: 35px;
}

.PB15 {
    padding-bottom: 1rem;
}

.PB25 {
    padding-bottom: 2rem;
}

.PB35 {
    padding-bottom: 3rem;
}

.BGW {
    background-color: #FFFFFF;
}

.bump {
    height: 150px;
    clear: both;
    background-color: var(--gr-background);
}

.bumpmini {
    height: 10px;
    clear: both;
    background-color: var(--gr-primary);
}

.gr-flex {
    display: flex;
    align-items: center;
}


/* /////////////////////////// NEW LOGIN PAGE - INPUT OVERRIDE ////////////////////////// */
.login-page-wrap label {
    margin: 0px 0px 10px 0px;
}

.login-page-wrap button[type=submit] {
    padding: 15px;
    border-radius: var(--gr-radius);
    font-size: 16px;
}

input:not([type=submit]):not([type=image]):not([type=radio]):not([type=button]) {
    padding: 10px 15px;
    border-radius: 8px;
    font-size: 15px;
    color: #000000;
}

input:-internal-autofill-selected {
    background-color: white;
}

input[type=submit], input[type=button], button[type=submit] {
    font-size: 16px;
    border-radius: var(--gr-buttonradius);
    padding: 1rem;
    margin-top: 10px;
    min-width: 100%;
    background-color: var(--gr-primary);
    border: 1px solid #FFFFFF;
    transition: none;
    font-family: var(--gr-font) !important;
}

remember_me {
    font-size: 16px;
}

.errormessage {
    max-width: 100%;
    margin-top: 10px;
    color: #ff0000 !important;
    background: #ff000010 !important;
    padding: 1rem;
}

.fixed-bottom {
    display: none !important;
}


.loginsplash {
    background-size: cover;
    background-repeat: no-repeat;
    background-image: var(--gr-splash);
    overflow: hidden;
    height: 95vh;
    max-height: 650px;
    border-top-right-radius: var(--gr-radius);
    border-bottom-right-radius: var(--gr-radius);
    width: 100%;
    background-color: var(--gr-primary);
}

.forgotpassbox {
    background-color: #EDF1F7;
    border-radius: var(--gr-radius);
    margin: 30px 0px;
    padding: 30px;
    gap: 0.5rem;
    display: grid;
}

#resetEmail {
    width: calc(100% - 2rem);
}

.loginbox {
    max-width: 950px !important;
    background-color: white;
    border-radius: var(--gr-radius);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    margin-top: 4rem;
}

.boxbreak {
    width: 100%;
    border-bottom: 1px solid lightgray;
    margin: 20px 0px;
}

/* /////////////////////////// NEW GR GRID - BULMA RIP ////////////////////////// */


.tile {
    align-items: stretch;
    display: block;
    flex-basis: 0;
    flex-grow: 1;
    flex-shrink: 1;
    min-height: -webkit-min-content;
    min-height: -moz-min-content;
    min-height: min-content;
    box-shadow: 0 0.5em 1em -0.125em rgba(10, 10, 10, .1), 0 0 0 1px rgba(10, 10, 10, .02);
}

.tile.is-vertical {
    flex-direction: column;
}

.tile.is-ancestor {
    margin-left: -0.75rem;
    margin-right: -0.75rem;
    margin-top: -0.75rem;
}

.tile.is-parent {
    padding: 0.75rem;
}

.tile.is-child {
    margin: 0 !important;
}

/* ///////////////////////////CLIENT SETTING////////////////////////// */

.cfontlight {
    font-family: var(--gr-font);
    color: #FFFFFF;
    font-size: 16px !important;
    font-style: normal !important;
    line-height: 1.3;
}

.cfontdark {
    font-family: var(--gr-font);
    color: #000000;
    font-size: 16px !important;
    font-style: normal !important;
    line-height: 1.3;
    margin: 0px;
}


/* ///////////////////////////BUTTONS////////////////////////// */
.buttonsolid {
    background-color: #000000 !important;
    color: #FFFFFF !important;
    border-radius: 50px;
    border: 2px solid #000000;
    text-align: center;
    font-family: var(--gr-font);
    font-weight: 500;
    padding: 12px 30px;
    margin: 0px 10px;
    align-items: center;
    cursor: pointer;
    margin: 20px 0px;
    font-size: 18px;
}

.buttonauto {
    width: fit-content;
}

.grid-rowmargin {
    display: grid;
    gap: 0.75rem;
}

.buttonsolid:hover {
    background-color: #FFFFFF !important;
    color: #000000 !important;
}

.buttonoutline {
    background-color: #FFFFFF !important;
    color: #000000 !important;
    border-radius: 50px;
    border: 2px solid #000000;
    text-align: center;
    font-family: var(--gr-font);
    font-weight: 500;
    padding: 12px 30px;
    margin: 0px 10px;
    align-items: center;
    cursor: pointer;
}

.buttonoutline:hover {
    background-color: #000000;
    color: #FFFFFF;

}

/* Button 50% width */
.b50 {
    width: 50%;
    margin: 20px auto;
}

/* Button contain ??? */
.button-container-end {
    display: flex;
    justify-content: flex-end;
}

.btn {
    -webkit-transition: none;
    transition: none;
    text-transform: capitalize !important;
}

/* ///////////////////////////   CLIENT BUTTONS   ////////////////////////// */

.btn.btn-primary {
    color: var(--gr-secondary);
    text-decoration: none;
    border-radius: var(--gr-buttonradius);
    border: 2px solid var(--gr-secondary);
}

.btn.btn-primary:hover {
    color: #ffffff;
    background-color: var(--gr-secondary);
    border-color: var(--gr-secondary);
    text-decoration: none;
}

.buttonclientprimary {
    background-color: var(--gr-primary);
    color: #FFFFFF;
    border-radius: var(--gr-buttonradius);
    border: 2px solid var(--gr-primary);
    text-align: center;
    font-family: var(--gr-font);
    font-weight: 500;
    padding: 8px 20px;
    align-items: center;
    cursor: pointer;
    font-size: 16px;
    margin-top: 0.5rem;
    text-transform: capitalize;
}

.buttonclientprimary:hover {
    background-color: #FFFFFF;
    color: var(--gr-primary);
    transition: .5s ease;
}

.buttonclientsecondary {
    background-color: var(--gr-secondary);
    color: #FFFFFF;
    border-radius: var(--gr-buttonradius);
    border: 2px solid var(--gr-secondary);
    text-align: center;
    font-family: var(--gr-font);
    font-weight: 500;
    padding: 8px 20px;
    align-items: center;
    cursor: pointer;
    font-size: 16px;
    margin-top: 0.5rem;
    text-transform: capitalize;
}

.buttonclientsecondary:hover {
    background-color: #FFFFFF;
    color: var(--gr-secondary);
    transition: .5s ease;
}

.buttonclientoutline {
    color: #FFFFFF;
    border-radius: var(--gr-buttonradius);
    border: 2px solid #FFFFFF;
    text-align: center;
    font-family: var(--gr-font);
    font-weight: 500;
    padding: 8px 20px;
    align-items: center;
    cursor: pointer;
    font-size: 16px;
    margin-top: 0.5rem;
    text-transform: capitalize;
}

.buttonclientoutline:hover {
    background-color: #FFFFFF;
    color: var(--gr-primary);
    transition: .5s ease;
}

button:disabled {
    /*background-color: var(--gr-background);
    color: #888;
    border-radius: var(--gr-buttonradius);
    text-align: center;
    font-family: var(--gr-font);
    font-weight: 500;
    padding: 15px 30px;
    margin: 0px 10px;
    align-items: center;
    cursor: not-allowed;
    margin: 1rem 0rem;
    font-size: 16px;
    width: 100%;
    border: 2px solid #f1f1f1;
    box-shadow: none;*/
    opacity: 0.65;
}

.campaignfinishbutton {
    background-color: #00A878;
    color: #FFFFFF;
    border-radius: 6px;
    text-align: center;
    font-family: var(--gr-font);
    font-weight: 600;
    padding: 6px 10px;
    align-items: center;
    cursor: pointer;
    margin: 0.2rem 0rem;
    font-size: 12px;
    width: 150px;
    border: 2px solid #00A878;
}

.buttonlearnmore {
    background-color: var(--gr-background);
    color: #000000;
    font-family: var(--gr-font);
    border-radius: var(--gr-buttonradius);
    font-weight: 500;
    padding: 10px 20px;
    border: 2px solid var(--gr-background);
    cursor: pointer;
    width: fit-content;
    margin-left: auto;
}

.buttonsecondary-nohover {
    background-color: var(--gr-secondary);
    color: #FFFFFF;
    border-radius: var(--gr-buttonradius);
    border: 2px solid var(--gr-secondary);
    text-align: center;
    font-family: var(--gr-font);
    font-weight: 600;
    padding: 8px 20px;
    align-items: center;
    cursor: pointer;
    font-size: 16px;
    margin-top: 0.5rem;
    text-transform: capitalize;
}

.buttonclientprimarynews {
    
    color: var(--gr-primary);
    border-radius: 6px;
    border: 2px solid var(--gr-primary);
    text-align: center;
    font-family: var(--gr-font);
    font-weight: 600;
    padding: 4px 20px;
    align-items: center;
    cursor: pointer;
    font-size: 0.9rem;
    margin-top: 0.5rem;
    text-transform: capitalize;
    width: max-content;
    margin: 1.5rem;
}

.buttonclientprimarynews:hover {
    background-color: var(--gr-primary);
    color: #FFFFFF;
    
}

figcaption{
    padding:0 1rem;
}


/* /////////////////////////// NAVBAR FOOTER - DESKTOP ////////////////////////// */
.desktop-nav-footer {
    background-color: #EDF1F7;
    padding: 10px 0;
    width: 100%;
    color: #000000;
    font-size: 14px;
    font-family: 'poppins', sans-serif;
}

.desktop-nav-footer a:link {
    text-decoration: none;
    color: #000000;
}

.desktop-nav-footer a:hover {
    text-decoration: underline;
    
}

/*
.column a:hover{
  text-decoration: underline;
  color: #FFFFFF;
}*/

#google_translate_element {
    display: none;
}

/*
google_translate_element{
  display:none;
}

.google_translate_element{
  display:none;
}*/

/* /////////////////////////// GR4 NAVBAR FOOTER - MOBILE ////////////////////////// */

.mobile-nav-footer {
    position: fixed;
    /*background: var(--gr-primary);*/
    width: calc(100% - 0px);
    padding: 0rem 0 0.75rem 0;
    bottom: 0;
    z-index: 900;
    /*(box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.40);*/
}

.mobile-footer-contain {
    background-color: var(--gr-primary);
    margin: 0 1.5rem;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    /* gap: 5px; */
    padding: 4px 12px;
    border-radius: 50px;
    justify-items: center;
    align-items: center;
}

.mobile-footer-item {
    display: grid;
    grid-template-columns: 1fr;
    color: white;
    gap: 3px;
    padding: 5px;
    border-radius: 5px;
    grid-template-columns: minmax(20px, 40px);
    justify-items: center;
}

.mobile-footer-item:hover {
    background: #FFFFFF50;
}

.mobile-footer-icon {
    font-size: 18px;
}

.mobile-footer-text {
    font-size: 9px;
    color: #FFFFFF;
    font-weight: 300;
    line-height: 1.1;
}


.footer-icon {
    /*width: 15%;
  border-radius: 99px;*/
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0px 2px;
    color: #FFFFFF90;
    font-size: 20px;
}

.mobProfilePic{
    min-height: 35px;
    min-width: 35px;
    max-height: 35px;
    max-width: 35px;
    border-radius: 50px;
    color: #FFFFFF;
    font-size: 21px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-repeat: no-repeat;
    cursor: pointer;
    background-color: #ffffff30;
}

/*below old code*/

.footer-icon .crimson-text {
    display: none;
}

.footer-icon a {
    color: #FFFFFF90;
}

.footer-icon-active {
    width: 40%;
    background-color: #FFFFFF;
    border-radius: 99px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: var(--gr-primary);
    gap: 5px;
    padding: 8px 0px;
}

.footer-icon-active .crimson-text {
    font-size: 15px;
    font-weight: bold;
    display: flex;
    color: var(--gr-primary);
    align-items: center;
    gap: 10px;
}

.footer-icon-active a {
    color: var(--gr-primary);
    text-decoration: none;
}

.f-icon {
    color: #FFFFFF50;
    text-align: center;
    font-size: 24px;
    margin-right: 10px;
}

.f-icontext {
    font-size: 14px;
    color: var(--gr-primary);
    font-weight: 600;
}

.footer-flex {
    display: flex;
    gap: 10px;
    color: #FFFFFF50;
}

.footer a {

    text-decoration: none !important;
    font-weight: normal;
    color: #000000;
}



/* ///////////////////////////NAVBAR HEADER - DESKTOP ////////////////////////// */

.header-contain {
    padding: 10px 0px;
    display: flex;
    justify-content: space-between;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    align-items: center;
    width:100%;
}

.header-ingroup {
    background-color: brown;
    padding: 10px;
}

.header-profilepic {
    min-height: 45px;
    min-width: 45px;
    max-height: 45px;
    max-width: 45px;
    /*border: 3px solid #FFFFFF;*/
    border-radius: 50px;
    color: #FFFFFF;
    font-size: 24px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url(images/gr-profile-pic1.png);
    background-size: cover;
    background-repeat: no-repeat;
    cursor: pointer;
    margin-right: 7px;
    background-color: #00000050;
}

.header-profilepic-mob {
    min-height: 35px;
    min-width: 35px;
    max-height: 35px;
    max-width: 35px;
    border: 1px solid #FFFFFF;
    border-radius: 50px;
    color: #FFFFFF;
    font-size: 24px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url(images/gr-profile-pic1.png);
    background-size: cover;
    background-repeat: no-repeat;
    cursor: pointer;
    margin: 5px 0px;
}

.nav-profilepic {
    width:35px;
    height:35px;
    border-radius: 6px;
    color: #FFFFFF;
    font-size: 20px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-repeat: no-repeat;
    cursor: pointer;
    background-color: var(--gr-primary);
}

.nav-profilepic-mob {
    width:35px;
    height:35px;
    border: 1px solid #FFFFFF;
    border-radius: 6px;
    color: #FFFFFF;
    font-size: 24px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-repeat: no-repeat;
    cursor: pointer;
    margin: 5px 0px;
}

.nav-loggedin{
    display: flex;
    padding: 8px 12px;
    background: #FFFFFF20;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 700;
    font-family: var(--gr-font);
}

.nav-loggedin:hover {
    background: #FFFFFF40;
}

.nav-pointsContain{
    display: flex;
    /*margin-right: 1rem; */
    align-items: center;
    font-size: 0.9rem;
    color:#FFFFFF;
    
}

.header-search-mobile {
    height: 28px;
    width: 28px;
    border: 0px solid #FFFFFF;
    border-radius: 50px;
    color: #FFFFFF;
    align-items: center;
    justify-content: center;
    padding: 5px;
    font-size: 22px;
}

.header-search-mobile:hover {
    background-color: #FFFFFF50;
}

.header-search-desktop {
    height: 30px;
    width: 300px;
    border: 1px solid #FFFFFF;
    border-radius: 50px;
    color: #000000;
    font-size: 24px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 5px 15px;
    font-size: 20px;
    background-color: #FFFFFF;
}


.nav-logo {
    width: 20%;
    /*min-width: 120px;*/
    /*margin-left: 1rem;*/
}

.nav-logo-50 {
    min-height: 50px;
}

.nav-logo-60 {
    min-height: 50px;
}

.nav-buttons {
    width: 20%;
    display: flex;
    align-items: center;
    justify-content: flex-end;    
}

.nav-menu{
    width: 60%;
    display: flex;
    gap: 1rem;
justify-content: center;
}

.nav-menu-item{
    font-size: 0.9rem;
    font-weight: 700;
    font-family: var(--gr-font);
}

.nav-menu-item:hover{
    color:var(--gr-primary);
    
}



.nav-back{
    width: 40%;
    font-size: 1rem;
    font-weight: 600;       
    color: #000000;
    text-transform: uppercase;
    font-family: var(--gr-font);
}

.nav-backbutton{
    display:flex; 
    font-size:2rem;
    align-items: center; 
    color:var(--gr-secondary);
}

.navProfileName{    
    font-size: 0.8rem;
    font-weight: 600;       
    color: #000000;
    text-transform: uppercase;
    font-family: var(--gr-font);
    padding-right: 15px;
}

.nav-points {    

    font-family: var(--gr-font);
    font-weight: 800;
    /*font-size: 3rem;*/
    line-height: 1;
    display: flex;
    align-items: center;
    margin-right:1rem;
}

.nav-points-coin {
    background-image: var(--gr-coin);
    height: 20px;
    width: 20px;
    background-size: cover;
    background-repeat: no-repeat;
    margin-right: 4px;
}

/*.nav-points-eco {
    background-image: var(--gr-ecobit);
    height: 20px;
    width: 20px;
    background-size: cover;
    background-repeat: no-repeat;
    margin-right: 4px;
}*/

/*Addtolive*/
.carbon-footprint-icon {
    background-image: var(--gr-carboncoin);
    height: 20px;
    width: 20px;
    background-size: cover;
    background-repeat: no-repeat;
    margin-right: 4px;
}

/*Addtolive*/
.carbon-summary{
    display: flex;
    margin-right: 10px;
}
/*Addtolive*/
li.otc-sub-menu-item {
    width: min-content;
    border: 3px solid #dce4f4 ;
    padding: 8px 25px;
    color: #000000;
    border-radius: 6px;
    font-family: var(--gr-font);
    font-weight: 700;
    cursor: pointer;
}
/*Addtolive*/
ul.otc-sub-menu {
    display: flex;
    gap: 1rem;
    list-style: none;
    padding-inline-start: 0;
}
/*Addtolive*/
.selected-otc-tab {
    background-color: #dce4f4;
}

/*Addtolive*/
.campaign-title {
font-size: 2rem !important;
    font-family: var(--gr-font);
    letter-spacing: var(--gr-letterspace);
    text-align: left;
    font-weight: 800;
    color: #000000;
    line-height: 1.1;
}

.nav-register {
    text-align: center;
    border-radius: var(--gr-buttonradius);
    padding: 5px 15px;
    font-size: 15px;
    display: flex;
    cursor: pointer;
    justify-content: center;
    min-width: 60px;
    border: 2px solid var(--gr-primary);
    color:#FFFFFF;
    margin-right: 10px;
}

.nav-register:hover {
    background-color: #FFFFFF;
    color: var(--gr-primary);
}

.nav-register:hover a {
    text-decoration: none;
}

.nav-login {
    color: var(--gr-primary);
    text-align: center;
    border-radius: var(--gr-buttonradius);
    padding: 5px 15px;
    font-size: 15px;
    display: flex;
    border: 2px solid #FFFFFF;
    cursor: pointer;
    justify-content: center;
    min-width: 60px;
    background-color:#FFFFFF;
}

.nav-login:hover {
    background-color: #FFFFFF;
    color: var(--gr-primary);
    text-decoration: none;
}

.nav-login:hover a {
    text-decoration: none;
}

#loginEmail, #loginPassword {
    width: 90%
}


#logo, #logo-mobile {
    float: left;
}



.logo-mobile {
    background-size: contain;
    background-repeat: no-repeat;
    height: 40px;
    width: 70px;
}

.current-page {
    background-color: #FFFFFF !important;
    color: #000000 !important;
    text-shadow: none !important;
}


@keyframes colorCycle {
    0% { border-color: var(--gr-bar1); }
    25% { border-color: var(--gr-bar1); }
    50% { border-color: var(--gr-bar2); }
    75% { border-color: var(--gr-bar3); }
    100% { border-color: var(--gr-bar3); }
}

.color-cycling-border {
    border-top: 5px solid var(--gr-primary);
    background-color: var(--gr-primary);
    /*animation: colorCycle 20s infinite alternate; */ /*Removed the aminamtion from header*/
}

@keyframes colorCycleBar {
    0% { background-color: var(--gr-bar1); }
    25% { background-color: var(--gr-bar1); }
    50% { background-color: var(--gr-bar2); }
    75% { background-color: var(--gr-bar3); }
    100% { background-color: var(--gr-bar3); }
}

.color-cycling-background {    
    background-color: #FFFFFF;
    animation: colorCycleBar 20s infinite alternate;
}



/* ///////////////////////////NAVBAR HEADER - SEARCH INPUT////////////////////////// */
.he-search-slide {
    background-color: transparent;
    width: 100%;
    height: 34px;
    margin-bottom: 0px;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
    border: solid 1px #FFFFFF;
    position: static;
}

.search-header {
    border: none;
    width: 100%;
    margin: 0px;
    padding: 2px 3px;
    border-radius: 2px;
    background-color: #FFFFFF;
    font-size: 14px;
}

.search-header input[type=image] {
    width: 25px;
    height: 25px;
    float: right;
    margin-top: 2px;
}


/* ///////////////////////////NAVBAR HEADER - HORIZONAL SCROLL MENU NEW ////////////////////////// */
.scrollmenucontainer {
    /*background-color: var(--gr-primary);*/
    padding: 0rem 0rem 0.0rem 0rem;
}

div.scrollmenu {
    overflow: auto;
    white-space: nowrap;
    cursor: grab;
    display: flex;
    justify-content: flex-start;
    gap: 1.5rem;
    margin: 0rem;
}

div.scrollmenuu {
    overflow: auto;
    white-space: nowrap;    
    cursor: grab;
    display: flex;
    justify-content: flex-start;
    gap: 1.0rem;
    margin: 0rem;
}

div.scrollmenu a {    
    /*border: 2px solid #edf1f7;    
    padding: 14px 20px;
    border-radius: 8px;
    color: #000000;
    font-size: 16px;
    font-weight: 600;
    font-family: var(--gr-font);
    display: flex;
    gap: 8px;
    justify-content: flex-start;*/
    
    border: 0px solid #edf1f7;
    padding: 8px 14px;
    border-radius: 8px;
    color: #FFFFFF;
    background-color:#FFFFFF10;
    font-size: 14px;
    font-weight: 600;
    font-family: var(--gr-font);
    display: flex;
    gap: 8px;
    justify-content: flex-start;
    align-items: center;
}

div.scrollmenu a:hover {
    background-color: #FFFFFF40;    
}


/* ///////////////////////////NAV -  MINI MENU////////////////////////// */
.mob-return {
    background-color: #FFFFFF30;
    color: #FFFFFF;
    border-radius: 99px;
    font-size: 24px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mobile-nav-header-inner {
    display: flex;
    align-items: center;
    gap: 15px;

}

.mob-return-title h1 {
    font-size: 24px;
    font-weight: 600;
    color: #FFFFFF;
    margin: 5px 0px;
}


.mobile-nav-header {
    background-color: var(--gr-background);
    padding: 15px 10px;
}


/* ///////////////////////////  PAGES ////////////////////////// */

/* ///////////////////////////  GR4 ACTIVITIES - DETAIL PATH ////////////////////////// */

.newactivity {background-color:white; padding: 10px; border-radius:50px;}

    .newactivity a {
        font-family: var(--gr-font);
        font-weight: 500;
        font-size: 13px;
    }

    .dash-dash-main-left{
    z-index:0 !important;
    padding:0 !important;
}

    .sticky {position: sticky !important;}
    
    .campaign-grid {
        background-color: #FFFFFF;    
        /*padding: 0rem 2rem;*/
        border-radius: 1rem;
        margin: 0rem 1rem;    
    }    
    .path-title{
        display: flex;
        justify-content: space-between;
        margin-bottom: 5px;
    }
    .campaign-paths {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        column-gap: 1.5rem;
        align-items: center;
        margin-bottom: 10px;
    }

.campaign-path{
    border-radius: 0px;
    background-color:#FFFFFF;
    display: flex;
    align-items: center;
    gap: 3rem;
    color: #000000;
    font-weight:500;
    justify-content: space-around;
    padding: 10px 0px 5px 0px;
    background-image: url(/images/pathdash6002px.png);
    background-size: cover;
    background-repeat: no-repeat;
}

/*.path-complete{
     background-color: #00A878 !important;
    color:#FFFFFF;
}*/

    .activitycomplete{
        color:#00A878 !important;
        font-size: 38px !important;
    }
    
    .activityreward{
        color:#FF9859   !important;
    }

.path-number{
        background-color: #FFFFFF;
        color: #000000;
        padding: 2px;
        border-radius: 50px;
        height: 32px;
        width: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        border: 2px solid #dce4f4;
    }
    
    div.scrollpaths {
        overflow: auto;
        white-space: nowrap;
        padding-bottom: 5px;
        cursor: grab;
        display: flex;
        justify-content: center;
        gap: 2rem;
        }
    
.campaigngroup-name{
        text-align: center;
        font-size: 0.8rem;
        font-weight:600;
        /*display: flex!important;*/
}    
    
    

    
    .navPointsButton{
        background-color: #EDF1F7;
        padding: 7px;
        border-radius: 8px;
        display: flex;
        align-content: center;
        align-items: center;
        width: 90px;
        justify-content: center;
        gap: 8px;
        font-size: 14px;
        font-weight: 700;
    }

  

    /* ------- Path Footer ---------*/
    
    .path-footer {
        position: fixed;
        background: #ffffff;
        width: calc(100% - 0px);
        padding: 0;
        bottom: 0;
        z-index: 901;
        box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.10); 
        display: none;  
    }
    
    .footer-returnbutton{
        background-color: #EDF1F7;
        padding: 5px;
        border-radius: 50px;
        display: grid;
        width: 35px;
        height: 35px;
        justify-items: center;
        align-content: center;
        margin-right: 1rem;
    }
    
    .footer-bar{
        display: flex; 
        margin: 0 1rem; 
        align-items: center;
    }
    .footer-pathfull{
        width: 100%;
    }
    
    /* --- MEDIA QUERIES ---*/
    @media (min-width: 0px) and (max-width: 680px){
        .path-footer { display:block; }
        .path-header { display:none; }
    }

/* ///////////////////////////  GR4 ACTIVITIES - DETAIL ////////////////////////// */

.dash-activities-container {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 1fr;
    gap: 1em 2em;
    grid-auto-flow: row;
    margin: 0 1rem;
    align-items: start;
}

.grid-activity-detail-icons {
    display: flex;
    /*grid-template-columns: 1fr 1fr 1fr 1.5fr;*/
    gap: 1em;
    margin: 1.5rem 0rem;
    justify-content: center;
}



.grid-activity-icon {
    display: flex;
    align-items: center;
    font-weight: 600;
    font-family: var(--gr-bodyfont);
    font-size: 0.9rem;
}

.grid-activity-campaign-top {
    display: grid;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.campaign-box {
    background-color: #FFFFFF;
    border-radius: var(--gr-radius);
    padding: 3rem 2rem;
    margin: 0px 1rem;
}

.campaign-mobback {
    position: absolute;
}

.campaign-box-mobile {
    background-color: transparent !important;
    margin-top: -4rem;
}

/*---- Quiz mod -----*/
.activityMainContainer{
    display:grid;
    grid-template-columns:1fr; 
    margin:1rem;
}   

.activityContentTitle{
    display: flex;
    justify-content: center;
    text-align: center;
    flex-direction: column;
}

.activityContentTitle h1 {font-weight:700}

/*---- Progress Bar -----*/
.activityBar{
    display:grid; 
    grid-template-columns: 150px 1fr 150px; 
    align-items: center;
    min-height: 64px;
    grid-template-areas: "act-return act-path act-points";
}

.act-border{
    border-bottom: 1px solid #EDF1F7; 
}

.act-return{
    grid-area: act-return;
    display: flex;
    justify-content: flex-start;    
}

.act-path{
    grid-area: act-path;
    display: flex;
    flex-direction: row;
    align-content: center;
    justify-content: center;
    align-items: center;
}

.act-points{
    grid-area:act-points; 
    display: flex;
    justify-content: flex-end;   
}

.act-boxes{
    min-width:80px;
    display: flex;
    padding: 8px 12px;
    background: #edf1f780;
    border-radius: 8px;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    font-weight: 600;
    gap: 5px;
}


/* ///////////////////////////  PAGES - SPEND POINTS ////////////////////////// */
.card-inner {
    padding: 30px;
}

.card-title {
    margin: 0px;
    font-size: 1.25rem;
    font-family: var(--gr-font);
    font-weight: 800;
    color: #000000;
    line-height: 1.4em;
    text-align: center;
}

.card-title-mini {
    margin-top: -10px;
    font-size: 1.1em;
    font-family: var(--gr-font);
    font-weight: 900;
    color: #000000;
    line-height: 1.4em;
    text-align: center;
    margin: 0.5rem 0rem;
}

.card-description {
    margin: 15px 0px;
    font-size: 1.3em;
    font-family: var(--gr-font);
    font-weight: 400;
    color: #000000;
    line-height: 1.4em;
    text-align: center;

}

.card-img {
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}

.card-highlight-primary {
    background-color: var(--gr-primary-light);
    padding: 5px 15px 5px 15px;
    border-radius: 6px;
    color: var(--gr-primary);
    text-align: center;
    width: fit-content;
    font-size: 14px;
    font-family: var(--gr-font);
    font-weight: 600;
    margin-left: auto;
    margin-right: auto;
}

.card-highlight-secondary {
    background-color: var(--gr-secondary-light);
    padding: 5px 20px;
    border-radius: var(--gr-buttonradius);
    color: var(--gr-secondary);
    text-align: center;
    width: fit-content;
    font-size: 14px;
    font-family: var(--gr-font);
    font-weight: 600;
    margin-left: auto;
    margin-right: auto;
    max-height: 25px;
}

.card-highlight-white {
    background-color: #FFFFFF40;
    padding: 5px 20px;
    border-radius: var(--gr-buttonradius);
    color: #FFFFFF;
    text-align: center;
    width: fit-content;
    font-size: 14px;
    font-family: var(--gr-font);
    font-weight: 600;
    margin-left: auto;
    margin-right: auto;
    max-height: 25px;
}


.card-highlight-activity {
    background-color: var(--gr-primary-light);
    padding: 10px 20px;
    border-radius: var(--gr-radius);
    color: var(--gr-primary);
    text-align: center;
    width: fit-content;
    font-size: 16px;
    font-family: var(--gr-font);
    font-weight: 600;
    margin: 2rem 0rem 1rem 0rem;
}

.activitymove {
    background-color: transparent !important;
    margin-top: -4rem;
    margin-bottom: 0rem;
}

/* ///////////////////////////  PAGES - BLOGS or Company news ////////////////////////// */

.dash-dash-main-left-news p {
    font-size: 1rem;
    font-family: var(--gr-font);
    font-weight: 400;
    color: #000000;
    line-height: 1.4;
    margin: 0px;
    font-style: normal;
    margin-bottom: 10px;
}

.display p {
    font-size: 1rem;
    font-family: var(--gr-font);
    font-weight: 400;
    color: #000000;
    line-height: 1.4;
    margin: 0px;
    font-style: normal;
    margin-bottom: 10px;
}

.blog-video {
    background: var(--gr-background);
    max-width: 90%;
}

.blog-image {
    max-width: 100% !important;
}

.news-intro {
    /*padding-bottom: 3rem;*/
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin: 0.5rem;
}


.GL-section-2 a P {
    font-family: var(--gr-font);
    color: #555555;
    margin-top: 0px;
    font-size: 15px;
}


.colour.no-pad figure {
    margin-bottom: 0px;
    background-color: white;    
    border-radius: 8px;
    border:2px solid #DCE4F4;
}



.GL-filters-column {
    overflow: auto;
    white-space: nowrap;
    padding: 0px;
    cursor: grab;
    display: flex;
    justify-content: flex-start;
    gap: 1rem;
    margin: 0rem 0rem;
}

.GL-filters-column .btn.btn-primary {
    color: #ffffff;
    background-color: var(--gr-primary);
    border: 3px solid var(--gr-primary);
    font-family: var(--gr-font);
    border-radius: var(--gr-radius);
    padding: 8px 30px;
}

.GL-filters-column .btn.btn-primary:hover {  
    background-color: #dce4f4 !important;
}



.header-right-news {
    /*background: url(https://devroot.greenredeem.co.uk/websites/AD2902966/images/gh-dev-news-3.jpg);  */
    background-size: cover !important;
    background-repeat: no-repeat !important;
    border-radius: var(--gr-radius);
    min-height: 310px; /* was 300 */
    position: relative;
}


.GL-sum-item-bg {
    background-color: var(--gr-primary) !important;
    background-image: url(https://devroot.greenredeem.co.uk/websites/AD2902966/images/gl-read-more.png) !important;
    margin: 1.5rem;
    border-radius: 8px;
    aspect-ratio: 1/1;
}

.GL-sum-item-bg img{
    border-radius: 8px !important;
   
}


/* ///////////////////////////  PAGES - Prizedraw ////////////////////////// */

blockquote {
    font-size: 1.25rem;
    max-width: 99%;
    margin: 50px auto;
    font-family: var(--gr-font);
    font-style: italic;
    color: #000000;
    padding: 1.2em 30px 1.2em 60px;
    border-left: 8px solid var(--gr-secondary);
    line-height: 1.6;
    position: relative;
    background: var(--gr-background);
}

blockquote::before {
    font-family: var(--gr-font);
    content: "\201C";
    color: var(--gr-secondary);
    font-size: 4em;
    position: absolute;
    left: 10px;
    top: -10px;
}

blockquote::after {
    content: '';
}

blockquote span {
    display: block;
    color: #000000;
    font-style: normal;
    font-weight: bold;
    margin-top: 1em;
}

/* ///////////////////////////  PAGES - Prizedraw ////////////////////////// */

.grid-full-container {
    background-color: var(--gr-primary);
    padding: 0.5rem 0rem 2rem 0rem;
}

.grid-full-container-head {
    background-color: var(--gr-primary);
    padding: 0.5rem 0rem 2rem 0rem;
}

.transparent {
    background-color: transparent !important;
}


.header-left {
    display: grid;
    align-content: center;
    gap: 0.75rem;
}

.header-right {
    background-color: var(--gr-secondary);
    border-radius: 2rem;
    min-height: 290px;
    max-height: 310px;
    position: relative;
    display: grid;
    justify-items: center;
}

.header-right-image {
    position: absolute;
    max-width: 400px;
    bottom: -56px;
}

.header-right-image-rewards {
    z-index: 2;
    background-size: cover;
    background-repeat: no-repeat;
    background-image: var(--gr-ecoshop);
    height: 100%;
    width: 315px;
    position: relative;
    background-position: center;
    margin: 0rem auto;
}

.header-right-image-donate {
    z-index: 2;
    background-size: cover;
    background-repeat: no-repeat;
    background-image: var(--gr-donate);
    height: 100%;
    width: 315px;
    position: relative;
    background-position: center;
    margin: 0rem auto;
}

.header-right-image-everyday {
    z-index: 2;
    background-size: cover;
    background-repeat: no-repeat;
    background-image: var(--gr-everyday);
    height: 100%;
    width: 315px;
    position: relative;
    background-position: center;
    margin: 0rem auto;
}

.header-right-image-prize {
    z-index: 2;
    background-size: cover;
    background-repeat: no-repeat;
    background-image: var(--gr-prize);
    height: 100%;
    width: 315px;
    position: relative;
    background-position: center;
    margin: 0rem auto;
}

.header-right-news-image {
    background-image: var(--gr-news);
    height: 200px;
    width: 200px;
    background-size: cover;
    background-repeat: no-repeat;
    position: absolute;
    bottom: -50px;
    right: -50px;
}

.header-right-circle {
    width: 250px;
    height: 250px;
    position: absolute;
    background: #FFFFFF40;
    border-radius: 50%;
    left: -30px;
    top: 50px;
}

/* ///////////////////////////  GR4 PAGES - PRIZE DRAW INDIVIDUAL ////////////////////////// */
.prizewrapper {
    background: #FFFFFF;
    border: solid 2px #dce4f4;
    padding: 1rem;
    border-radius: 8px;
    margin-top: 0;
}

.prize-detail {
    float: unset;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;

}

.prizeimg {
    margin: 0 auto;
    float: unset;
    width: unset;
}

.prizedraw-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.donations-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
}


.prize-text-wrap {
    width: 100%;
}

.baseprize, .firstprize, .secondprize, .thirdprize, .fourthprize, .fifthprize, .sixthprize,
.seventhprize, .eighthprize, .ninthprize, .tenthprize {
    display: none !important;
}

.prizeqty {
    padding-left: 0;
    margin-top:0 !important;
    height: 35px;
}

.prize-item-wrap {
    border: 0px solid #000000 !important;
    border-radius: var(--gr-radius);
    margin-top: 1rem;
}

.prize-item-points {
    background-color: var(--gr-primary) !important;
    border-top-left-radius: var(--gr-radius);
    border-bottom-left-radius: var(--gr-radius);
}


.prizeqty span {
    color: var(--gr-primary) !important;
    font-family: var(--gr-font);
    font-size: 1.5rem;
}

.prize-detail H2 {
    color: #000000;
    font-family: var(--gr-font);
    font-size: 1.3rem;
}

.prizedesc {
    font-family: var(--gr-font);
    font-size: 0.9rem;
    line-height: 1.3;
    padding-bottom: 0;
}

.prizeterms {
    font-family: var(--gr-font);
    font-size: 0.9rem;
}

.prizedaw-grid{
    display: grid;
    grid-template-columns: 2fr 1.5fr;
    gap: 3rem;
    margin-top: 1rem;
    grid-template-areas: "prizes sidebar";
}
.prizedraw-prizes{
    grid-area: prizes;
}

.gr-sidebarBar{
    border-radius: 8px;
    position: relative;
    grid-area: sidebar;
    display: grid;
}

.gr-sidebarBarContain{
    background-color: #edf1f780;
    padding: 2rem 1.5rem;
    display: flex;
    flex-direction: column;
    height: max-content;
    border-radius: 8px;
    gap: 10px;
    position: sticky;
    top: 90px;
}

.sidebarBlock{
    background-color: #FFFFFF;
    border-radius: 1rem;
    padding: 1rem;
    margin:1rem 0rem;
}

.prizeMainImage {
    background-size: cover !important;
    background-repeat: no-repeat !important;
    border-radius: var(--gr-radius);
    position: relative;
    border-radius: 8px;
    aspect-ratio: 1/1;
}


.pd-label {
    color:#000000 !important;
}

/* ///////PRIZE ENTER BOX ////////////////  */

.pd-quantity {
    display: flex;
    column-gap: 15px;
    align-items: center;
    /*margin: 0.5rem 0;*/
}

.pd-label {
    color: #FFFFFF;
    margin-bottom: 10px;
}

.prize-item-go {
    width: 100%;
    text-align: center;
    font-family: var(--gr-font);
    font-weight: 600;
    background-color: var(--gr-primary);
    font-size: 1.1rem;
    margin-top: 0;
    padding: 10px;
    padding: 8px 20px;
    border-radius: 8px;
    max-height: 30px;
}

.pditem {
    display: flex;
    justify-content: flex-start;
}

.pd-entries {
    color: #FFFFFF;
    font-size: 1.5rem;
}

.grid-prizedraw-enter {
    background-color: var(--gr-primary);
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: baseline;
    margin: 1rem;
    padding: 2.5rem 2rem;
    column-gap: 2rem;
    border-radius: var(--gr-radius);
}

.pd-amount {
    flex-direction: column;
    color: white;
    row-gap: 10px;
    font-family: var(--gr-font);
}

/* ///////////////////////////  PAGES - Activity Page Main ////////////////////////// */

.prizedraw {
    background-color: #000000;
    color: #FFFFFF;
    border-radius: 15px;
    padding: 15px;
    margin-bottom: 20px;
    text-align: left;
}

.widgetcopy {
    font-size: 16px;
    color: #FFFFFF;
    font-family: 'Figtree', sans-serif;
    font-weight: 400;
    text-align: left;
}

.grouptitle {
    margin-top: 0px;
    margin-bottom: 0px;
    font-weight: 700;
    font-family: 'Figtree', sans-serif;
    font-size: 2.5em;
    line-height: 1.2em;
    color: #000000;
}

.groupdetail {
    margin-top: 0px;
    margin-bottom: 0px;
    font-family: var(--gr-font);
    color: var(--gr-secondary);
    font-weight: 700;
    font-size: 20px;
}

.groupdescription {
    margin: 20px 0px;
    font-size: 0.9rem;
    font-family: var(--gr-font);
    font-weight: 400;
    color: #222222;
    line-height: 1.4em;;
}

.whitebox {
    background-color: #FFFFFF;
    border-radius: var(--gr-radius);
    padding: 30px 40px;
    margin: 0px 10px;

}

.whiteboxslim {
    background-color: #FFFFFF;
    border-radius: var(--gr-radius);
    padding: 20px;
    margin: 20px 0px;
}

.whiteboxcard {
    background-color: #FFFFFF;
    border-radius: var(--gr-radius);
    padding: 0px;
    margin: 30px 0px;
}

.Earns-item-content-extras {
    background-color: #FFFFFF;
    border-radius: 20px;
    padding: 30px 30px;
    text-align: left;
}

.earndetails {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    flex-direction: row;
    margin: 15px 0px;
}


.earn-toggle {
    /*background-color: var(--gr-secondary);*/
    border-radius: 50px;
    width: 60%;
    height: 5px;
    margin-bottom: 20px;
    display:none;
}

.earn-icons {
    width: 20px;
    height: 20px;
    margin-right: 5px;
}

.earndetails-flex {
    display: flex;
    align-items: center;
    margin-right: 15px;
    color: #a6a6a6;
    font-family: var(--gr-font);
    font-size: 18px;
}

.earndetails-flex img {
    margin-right: 10px;
    padding: 10px;
}


.earncontent-container {
    background-color: var(--gr-background);
    border-radius: 15px;
    padding: 25px 20px;
}

.campaignimage {
    border-radius: var(--gr-radius);
    width: 100%;
}

.newactivity {
    color: #000000;
    font-size: 15px;
    font-family: var(--gr-font);
    font-weight: 400;
    display: flex;
    margin-bottom: 15px;
    align-items: center;
    flex-direction: row;
    justify-content: flex-start;
    flex-wrap: nowrap;
    line-height: 1.2;
    border-radius: 8px !important;
    padding: 1rem !important;
}

.newactivity a {
    font-family: var(--gr-font);
    font-weight: 600;

}

.activity-not-done {
    color: #000000;
    font-size: 16px;
    font-family: var(--gr-font);
    font-weight: 900;
    display: flex;
    margin-bottom: 15px;
    align-items: center;
    flex-direction: row;
    justify-content: flex-start;
    flex-wrap: nowrap;
}

.activity-card-title {
    font-family: var(--gr-font);
    font-weight: 600;
    color: #000000;
    font-size: 18px;
    margin-top: 15px;
    padding-bottom: 15px;
    height: 40px;
}

.btn-activity {
    background-color: var(--gr-primary);
    color: #FFFFFF;
    border-radius: var(--gr-buttonradius);
    border: 2px solid var(--gr-primary);
    text-align: center;
    font-family: var(--gr-font);
    font-weight: 600;
    padding: 10px 20px;
    align-items: center;
    cursor: pointer;
    font-size: 16px;
    box-shadow: none;
}

.btn-activity:hover {
    background-color: #FFFFFF;
    color: var(--gr-primary);
    border: 2px solid var(--gr-primary);
}

.activity-card-channel {
    background-color: var(--gr-primary-light);
    padding: 5px 20px;
    border-radius: 50px;
    color: var(--gr-primary);
    text-align: center;
    width: fit-content;
    font-size: 16px;
    font-family: var(--gr-font);
    font-weight: 600;
    margin: 5px auto 15px auto;
}

.activity-card {
    background-color: #ffffff;
    margin: 0 5px 30px 5px;
    border-radius: var(--gr-radius);
    text-align: center;
    position: relative;
    box-shadow: rgba(26, 26, 26, 0.1) 0px 2px 5px 1px;
}

.activity-card-image {
    border-top-left-radius: var(--gr-radius);
    border-top-right-radius: var(--gr-radius);
}

.activity-card-carbon {
    background: rgba(0, 0, 0, 0.8);
    color: #FFFFFF;
    font-size: 16px;
    font-weight: 500;
    border-top-right-radius: var(--gr-radius);
    border-bottom-left-radius: 20px;
    width: 35%;
    padding: 5px;
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: poppins, sans-serif;
}

.activity-card-inner {
    padding: 10px 25px 10px 25px;
    margin-bottom: 0px;
}

.activity-card-complete {
    width: 100%;
    height: 100%;
    position: absolute;
    opacity: 0.8;
    background: #EDF1F7;
    z-index: 9;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--gr-radius);
}

.carouselb{  
    width: 35px !important;
    height: 35px !important;  
    border: 2px solid var(--gr-primary) !important;   
    color: var(--gr-primary) !important;
}

.carouselb:hover {
    background-color: #FFFFFF !important;
}

/* ///////////////////////////  Reward Individaul Item  ////////////////////////// */

.reward-item-info-wrap {
    background-color: #FFFFFF;
    border-radius: 0px;
    border: solid 0px #FFFFFF !important;
    border-bottom-right-radius: var(--gr-radius);
}

.reward-item-desc {
    background-color: #FFFFFF;
    padding: 2rem;
    border-radius: var(--gr-radius);
}

.reward-item-dash-wrap {
    background-color: #FFFFFF;
    border-radius: var(--gr-radius);
}

.reward-itempage-image-wrap{
    padding:2rem 1rem;
}

/* ///////////////////////////  My Account Area ////////////////////////// */
#AccountSettings {
    background-color: #FFFFFF;
    padding: 0px;
}

.reg-label {
    float: left;
    display: block;
    clear: both;
    width: 100%;
    text-align: left;
    padding-right: 1rem;
    padding-top: 10px;
    font-family: var(--gr-font);
    font-size: 0.9rem;
}

.reginput {
    float: left;
    width: 100%;
}

#remove_profile_image {
    margin: 6rem 1rem;
    color: #ff0000;
    background: #ff000010;
    padding: 0.5rem 1rem;
    cursor: pointer;
}

#profile-view {
    float: left;
    border-radius: 50%;
    margin: 1rem 0rem;
    width: 180px;
    height: 180px;
    object-fit: cover;
}

.my-account-section-title {
    display: none;
}

.reginput input:disabled {
    background-color: var(--gr-primary-light) !important;
}

.ui-button-text {
    /*background-color: var(--gr-primary);
    min-height: 35px;*/
    display: flex !important;
    align-items: center;
}

#savePassword {
    float: left !important;
    margin: 1rem 0rem;
    background-color: var(--gr-primary) !important;
    padding: 0.5rem;
}

.ma-tabcon-myrewards-title {
    margin: 1rem 0rem;
    font-family: var(--gr-font);
    font-weight: 600;
}

.ma3-blue-account-tabs-bg {
    padding: 0 !important;
}


.my-account-subs-title {
    text-align: left;
}


.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
    border: 0px solid #ffffff;
    background: var(--gr-primary);
    font-weight: bold;
    color: #fff;
}

.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button {
    float: left;
}

.ui-button-text-only .ui-button-text {
    padding: 0.5em 1em;
    background-color: var(--gr-primary);
}


.ma3-blue-account-tabs-bg .ui-tabs .ui-tabs-nav li a {
    font-family: var(--gr-font);
    font-weight: 600;
}

#textaddress {
    text-align: left;
}

.reg-gender {
    gap: 1rem;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}


/*  ...... Email Settings ...... */
.ui-widget-content {
    background: #FFFFFF;
}

.my-account-subs-row {
    clear: left;
    float: left;
    border-bottom: 1px solid #B3B3B3;
    margin-top: 10px;
    line-height: 20px;
    width: 100%;
    padding-left: 0px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.my-account-subs-list {
    float: left;
    width: 50%;
    text-align: left;
    font-weight: bold;
}

#saveEmailSettings {
    float: left !important;
    margin-top: 20px !important;
}

.tips {
    display: none !important;
}

.subslist {
    text-align: left;
    font-weight: unset;
    display: flex;
    align-items: center;
}

.unsubslist {
    text-align: left;
    font-weight: unset;
    display: flex;
    align-items: center;
}

.unsubscribe-all {
    color: #ff0000;
    background: #ff000010;
    padding: 0.5rem 1rem;
    margin: 1rem 0rem 2rem 0rem;
    float: left !important;
}

/*  ...... Reward Settings ...... */

.points-plus {
    color: var(--gr-primary) !Important;
    font-weight: bold;
}

.ma-tabcon-myrewards-table-history tr td:nth-of-type(1), .ma-tabcon-myrewards-table-history thead tr td:nth-of-type(1) {
    width: 70% !important;
    text-align: left;
}

.ui-tabs .ui-tabs-panel {
    display: block;
    border-width: 0;
    padding: 0;
    background: 0;
}

.ma3-blue-account-tabs-bg .ui-tabs .ui-tabs-nav li.ui-tabs-active a {
    background-color: #FFFFFF !important;
    border-bottom: 4px solid var(--gr-secondary);
}

.ui-widget-header {
    border: 0px solid #fff;
    background: #FFFFFF;
    color: #e69700;
    font-weight: bold;
}

.tr-dark {
    background-color: var(--gr-primary-light);
    color: #000000;
}










/* ///////////////////////////  Tool tip abbreviation ////////////////////////// */

abbr {
    font-style: italic;
    position: relative;
}

abbr:hover::after {
    background: var(--gr-primary);
    border-radius: var(--gr-radius);
    content: attr(title);
    display: block;
    left: 100%;
    padding: 1em;
    position: absolute;
    width: 225px;
    z-index: 1;
    color: white;
    font-size: 14px;
    text-align: center;
    font-family: var(--gr-font);
    font-size: 14px;
    font-style: normal;
}

/* ///////////////////////////  PAGES - Activity Page - Quiz ////////////////////////// */
.er-item-quizbutton, button#quiz-start {
    background-color: var(--gr-primary);
    color: #FFFFFF;
    padding: 20px 60px 20px 30px;
    cursor: pointer;
    width: 100%;
    font-family: var(--gr-font);
    text-align: left;
    font-size: 1rem;
    border-radius: var(--gr-radius);
    background-position: right 20px center;
    background-size: auto 25px;
}

.er-item-quizbutton:hover {
    background-color: #00A878;

}

.imgpadright {
    padding-left: 40px;
}

#nextQBtn {
    width: 200px !important;
}

.claim-points {
    background-color: #00A878;
    color: #FFFFFF;
    padding: 20px 30px;
    cursor: pointer;
    min-width: 80%;
    font-family: var(--gr-font);
    text-align: center;
    font-size: 1.1rem !important;
    border-radius: var(--gr-radius) !important;
    background-position: right 20px center;
    background-size: auto 25px;

}

.quiz-congratulations-text {
    font-weight: bold;
    font-size: 1.3em;
    color: #00A878;
    font-family: var(--gr-font);
}


#quiz-container {
    background-color: var(--gr-background);
    margin-bottom: 30px !important;
}

#goBtn #btn {
    background-color: var(--gr-primary);
    color: #FFFFFF;
    padding: 20px 30px;
    cursor: pointer;
    width: 100%;
    font-family: var(--gr-font);
    text-align: left;
    font-size: 1.1rem !important;
    border-radius: var(--gr-radius) !important;
    background-position: right 20px center;
    background-size: auto 25px;
}

#quiz-container #goBtn #btn {
    background-color: var(--gr-primary);
    color: #FFFFFF;
    padding: 10px 24px;
    cursor: pointer;
    width: 100%;
    font-family: var(--gr-font);
    text-align: left;
    font-size: 1.1rem !important;
    border-radius: var(--gr-radius) !important;
    background-position: right 20px center;
    background-size: auto 25px;
    text-align: center !important;
}

input[type=submit]:hover, input[type=button]:hover {
    background-color: var(--gr-primary) !important;
    color: #FFFFFF;
}

p.quiz-question {
    margin: 1rem auto;
    font-size: 1.4rem;
    font-weight: 600;
    font-family: var(--gr-font);
    width: 90%;
}

#progress-bar-wrapper {
    width: max-content;
    background-color: var(--gr-primary-light);
    padding: 6px 20px;
    margin: 20px auto 0px auto;
    border-radius: 6px;
    color: var(--gr-primary);
    font-size: 14px;
    font-weight: 600;
}


.optionOutCss {
    margin: 1rem 10px; /*was 1rem auto*/
    width: 40%; /*was 90%*/
    padding: 1rem;
    display: inline-block;
    margin: 0 10px;
    border: 2px solid #e5e5e5;
    padding: 0.8rem 1rem;
    border-radius: 8px;
    font-size: 16px;
    color: #000000;
    border-bottom: 4px solid #e5e5e5;
    transition: all 0.1s;
    background: white;
    font-weight: 600;
}

.optionOutCss:hover {
    background: var(--gr-primary-light);
    border: 2px solid var(--gr-primary);
    border-bottom: 4px solid var(--gr-primary);
}

.optionOutCss p {
    /*color: var(--gr-primary);
    font-size: 1.1rem;*/
}

.optionOverCss p {
    color: var(--gr-primary) !important;
    

}

.optionOverCss {
    border: 2px solid var(--gr-primary);
    border-bottom: 4px solid var(--gr-primary);
    margin: 0rem 10px; /*was 1rem auto*/
    width: 40%; /*was 90%*/
    padding: 0.8rem 1rem;
    background: var(--gr-primary-light);
    border-radius: 8px;
    display: inline-block;
    color: var(--gr-primary) !important;
    font-weight: 600;
}

.quiz-correct-answer, .quiz-wrong-answer {
    font-size: 1rem;
}

#quizfeedbackContainer{
    background: var(--gr-primary-light);
    border-radius: 8px;    
    margin-top: 2rem;
}

#txt1{
    margin-bottom: 10px !important;
    margin-left:1.5rem;
    margin-right:1.5rem;
}

#passimage{
    margin-bottom: 10px !important;
}

#failimage{
    margin-bottom: 10px !important;
}


/*experimental*/



/*#quizfeedbackContainer{
    display: grid;
    border-top: 1px solid lightgrey;
    grid-template-columns: 500px 1fr 500px;
    height: 80px;
    gap: 1rem;
    font-size: 14px;
    position: sticky;
    bottom: 0;    
    width: 100%;
    z-index: 1000;
    padding: 1rem 0;
    align-items: center;
    background-color: pink;
}*/

#passimage img, #failimage img {
    width:55px !important;
    margin-top:1rem;
}

/* ///////////////////////////  PAGES - Donations Page ////////////////////////// */
.Donation-sum figure {
    overflow: hidden;
    background-color: #FFFFFF;
    border-radius: var(--gr-radius);
    padding: 1.5rem;
}

.Donation-sum img {
    width: 100% !important;
    margin-right: 0;
    margin-left: 0;
    border-radius: var(--gr-radius);
}

.GL-section-2 figcaption H4 {
    font-size: 1.1rem;
    font-family: var(--gr-font);
    font-weight: 600;
    color: #000000;
    line-height: 1.4em;
    line-height: 1.1;
    margin: 0.5rem 0rem 0.5rem 0rem;
    /*new below*/
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box !important;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    min-height: 58px;
    margin: 0 0.5rem;

}



figure {
    /*padding: 0 !important;
    display: grid;
    gap: 2rem;
    grid-template-columns: 1.3fr 1fr;*/
    padding: 0 !important;
    display: grid; /*was flex*/
    grid-template-columns: 1fr;
    flex-direction: column;
    
}

.donate-item-item-wrap {
    background-color: #FFFFFF;
    padding: 1rem;
    position: relative;
    display: grid;
    grid-template-columns: 130px 1fr;
    grid-template-areas:
        "donpic dontitle"
        "donpic donpoints"
        "donpic donbutton";
    border: 2px solid #dce4f4;
    border-radius: 8px;
    align-items: start;
    grid-template-rows: 50px;
}

.donate-item-item-points {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    grid-area: donpoints;
    color: var(--gr-primary);
}

.donate-item-item-title {
    padding-bottom: 0px !important;
}

.donate-item-item-points span {
    font-weight: 600;
    font-size: 1.4em;
    color: var(--gr-primary);
}

.donate-wrapper {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 1rem;
}

.donate-item-item-title h3 {
    font-size:1.25rem;
}

.donate-item-item-go .btn {
    position: absolute;
    right: 1rem;
    bottom: 8px;
    background-color: var(--gr-primary);
    color: #FFFFFF;
    border-radius: var(--gr-radius);
    border: 2px solid var(--gr-primary);
    text-align: center;
    font-family: var(--gr-font);
    font-weight: 600;
    padding: 8px 20px;
    align-items: center;
    cursor: pointer;
    font-size: 15px;
    margin-top: 0.5rem;
}

.donate-item-drop-1 {
    background-color: var(--gr-primary);
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    column-gap: 2rem;
    align-items: center;
    width: 100%;
    padding: 2rem;
    grid-area: charitydonate;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
        "enterpoint enterpoint"
        "box boxbutton";
    border-radius: 8px;
}

.donate-item-drop-2 {
    width: 100%;
    float: left;
    padding: 1.5rem 0;
    grid-area: charitytext;
}

.donate-item-drop-3 {
    display:none;
}

.donate-item-item-logo img {
    width: 100%;
    max-width: 110px !important;
    display: block;
}

.item-selected {
    margin-top: -1rem;
}

.donate-submit {
    background-color: var(--gr-secondary);
}

.donate-item-drop-enterpoints {
    font-family: var(--gr-font);
    font-weight: 600;
    font-size: 1.4em;
    color: #FFFFFF;
    line-height: 1.2em;
    text-align: left;
    margin-bottom: -10px;
    grid-area: enterpoint;
}

.donate-item-drop-input{
    grid-area: box;
}

.donate-item-drop-go{
    grid-area: boxbutton;
}

.donate-item-drop-wrap {
    display: grid;
    grid-template-columns: 1fr;
    /* grid-template-rows: 10rem 2fr; */
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    background-color: #fff;
    grid-template-areas:
        "charitytext"
        "charitydonate";
    border-bottom: none;
    border-right: none;
}


.donation-boost {
    background-color: #ffffff20;
    padding: 30px;
    border-radius: 20px;
    margin: 20px 10px;
    display:none;
}

.donation-boost P {
    color: #FFFFFF;
    font-size: 1.2em;
    text-align: center;
    font-family: 'Figtree', sans-serif;
}


div.countdown {
    height: 80px !important;
    margin: 0 !important;
    text-align: left;
    
}

.countdown-days, .countdown-hours, .countdown-minutes, .countdown-seconds {
    float: left;
    width: 25%;
    text-align: left;
    border-left: solid 0px rgba(255, 255, 255, 0.25);
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0px 0px;
    line-height: 1.25em;
}

.countdown-seconds {
    border-right: solid 0px rgba(255, 255, 255, 0.25);
}

.countdown-text {
    font-family: var(--gr-font);
    font-weight: 600;
    width: 100%;
    text-align: left;
    font-size: 1rem;
}

/*input:not([type=submit]):not([type=image]):not([type=radio]):not([type=button]) {
  max-width: calc(100% - 2rem);
}*/

.donate-item-drop-go input[type=submit] {
    background-color: var(--gr-secondary);
    color: #FFFFFF;
    border-radius: var(--gr-radius);
    border: 2px solid var(--gr-secondary);
    text-align: center;
    font-family: var(--gr-font);
    font-weight: 600;
    padding: 10px 20px;
    align-items: center;
    cursor: pointer;
    font-size: 15px;
    margin-top: 0.6rem;
}

/* ///////////////////////////  PAGES - Rewards cat Page ////////////////////////// */

.cat-filter-wrap {
    background-color: white;
    padding: 1rem;
    border-radius: var(--gr-radius);
}

.cat-filter-title {
    color: var(--gr-primary);
    font-size: 1.5rem;
    border-bottom: solid 1px #FFFFFF;
    padding: 0.5rem 0.5rem 1rem 0.5rem;
    font-family: var(--gr-font);
    line-height: 1em;
    margin: 0rem;
    font-weight: 600;
}

H3.mega-filter-title, H3.mega-filter-secondary-title {
    font-size: 1.1em !important;
    margin: 0rem 0.5rem;
    padding: 1rem 0rem;
    clear: both;
    line-height: 2em;
    color: var(--gr-primary);
    font-family: var(--gr-font);
}

/* ///////////////////////////  PAGES - Client Directory ////////////////////////// */

/* ---- Mobile devices---- */
@media (min-width: 0px) and (max-width: 500px) {
    .column.third {
        width: 100%;
    }

    /*.column.fourth {width: 100%;}*/
}

/* ---- Tablets devices---- */
@media (min-width: 501px) and (max-width: 800px) {
    /*.column.third {width: 50%;}
    .column.fourth {width: 50%;}*/
}

/* ---- Small Desktop ---- */
@media (min-width: 801px) and (max-width: 1000px) {
    .column.third {
        width: 33.3%;
    }

    .column.fourth {
        width: 33.3%;
    }
}

/* ---- Large Desktop ---- */
@media (min-width: 1001px) and (max-width: 2800px) {
    .column.third {
        width: 100%;
    }

    .column.fourth {
        width: 25%;
    }
}

.directory-cover {
    background-color: var(--gr-primary);
    height: 65px;
    border-top-left-radius: var(--gr-radius);
    border-top-right-radius: var(--gr-radius);
}

.directory-image {
    border-radius: 50%;
    width: 100px;
    height: 100px;
    object-fit: cover;

}

.directory-image-container {
    width: 100px;
    margin: -3rem 1.25rem 0.5rem 1.25rem;
    height: 100px;
    /*background: var(--gr-primary);*/
    border-radius: 50%;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0px solid #FFFFFF;
}

.directory-name {
    font-size: 1.25rem;
    font-family: var(--gr-font);
    color: var(--gr-primary);
    margin: 10px 0px 0px 0px;
    text-align: left;

}

.directory-job {
    font-size: 1rem !important;
    margin: 0px 0px 10px 0px;
    font-family: var(--gr-font);
    text-align: left;
    font-style: normal !important;
}

.directory-email {
    font-size: 20px;
    color: #FFFFFF;
    position: absolute;
    right: 30px;
    top: 15px;
    display: none; /* Removed temp */
}

.directory-email a {
    color: #FFFFFF !important;
}


.directory-location {
    /* background: var(--gr-primary); */
    color: var(--gr-primary);
    font-size: 15px;
    text-align: left;
    border-radius: var(--gr-radius);
    font-family: var(--gr-font);
}

.directory-card {
    background-color: #FFFFFF;
    border-radius: var(--gr-radius);
    margin-bottom: 20px;
}

.directory-details {
    padding: 0rem 1.25rem 2rem 1.25rem;
    border-bottom-left-radius: var(--gr-radius);
    border-bottom-right-radius: var(--gr-radius);
}


.directory-initial {
    font-size: 2rem;
    color: #FFFFFF;
    font-family: var(--gr-font);
}

select {
    /*max-width: 272px !important*/
}

.directory-dropdown {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1rem;
}

.directory-change {
    width: 100%;
}

.address-lookup{
    height:100%;
    max-height: 55px;
}

/* ///////////////////////////  PAGES - Community wall ////////////////////////// */
.widget-title {
    font-family: var(--gr-font);
    font-size: 1.5rem;
    font-weight: 600;
    color: #000000;
}

.cwReadGrid {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 1rem;
}

.caracard {
    border: 2px solid #DCE4F4 !important;
    border-radius: 8px !important;
    box-shadow: none !important;
}

.challengecard {
    border: 2px solid #DCE4F4 !important;
    border-radius: 8px !important;
    box-shadow: none !important;
}

.home-demo .item {
    border-radius: 8px !important;
    border: 2px solid #DCE4F4 !important;
}

.py-3 {
    padding-top: 0rem !important;
    padding-bottom: 0rem !important;
}

.challengebar2 {min-height:25px; background-color: var(--gr-primary) !important; font-weight: 500 !important;font-size: 12px !important;}

.table>:not(caption)>*>* {width:110px !important; text-align: center;}

.table{
    background: #edf1f7;
    border-radius: 8px;
}
.table-dark{
    background-color: #dce4f4;
}

.cw-giftcardbox{
    display:none !important;
}

.cwAuthorBox{
    background-color: #edf1f7;
    padding: 1.5rem 1rem;
    border-radius: 8px;
    display: grid;
    grid-template-areas:
        "authorpic authorname"
        "authorpic authorabout";
    margin-top: 1.5rem;
    gap: 0.5rem;
    align-items: center;
    grid-template-columns: 80px;
}

.emojiRow{
    display: flex;
    padding-left: 0px;
    padding-right: 0px;
    gap:10px;
}

.emojibutton {
    width: 25%;
}

/* ///////////////////////////  PAGES - Client - Company Videos ////////////////////////// */

.clientheadingarea {
    padding: 0px 15px;
    margin: 3rem 0rem 2rem 0rem;
}

.clientvideo {
    height: 200px;
    border-radius: 10px;
    justify-content: center;
    display: flex;
    align-items: center;
    font-size: 45px;
    color: #FFFFFF;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
}

.clientvideo:hover {
    font-size: 70px;
    color: #055193;
    transition: .5s ease;
}

/* ///////////////////////////  PAGES - Client - Congratulations ////////////////////////// */
.TArea15 {
    height: 15vh;
}

.TArea22 {
    height: 22vh;
}

/* ///////////////////////////  Altenative Scroll ////////////////////////// */
div.ghscrollmenu {
    overflow: auto;
    white-space: nowrap;
    padding-left: 0px;
    padding-bottom: 10px;
    cursor: grab;
}

div.ghscrollmenu a {
    display: inline-block;
    color: var(--gr-secondary);
    text-align: center;
    padding: 5px 20px;
    text-decoration: none;
    border: 2px solid var(--gr-secondary);
    margin-right: 15px;
    border-radius: 0px;
    min-width: 100px;
}

div.ghscrollmenu a:hover {
    background-color: var(--gr-secondary);
    color: #000000;

}

div.ghscrollmenu a:active {
    background-color: var(--gr-secondary);
    color: #000000;

}

/* ///////////////////////////  PROFILE POPUP MODAL ////////////////////////// */
.modal-window {
    position: fixed;
    background-color: rgba(000, 000, 000, 0.4);
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 999;
    opacity: 0;
    pointer-events: none;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
    display: flex;
    justify-content: center;
    align-items: center;
}

.modal-window:target {
    opacity: 1;
    pointer-events: auto;
}

.modal-window > div {
    width: 90%;
    position: relative;
    margin: 10% auto;
    padding: 10px 0px;
    background: transparent;
    color: #444;
    max-width: 400px;
}

.modal-window header {
    font-weight: bold;
}

.modal-close {
    color: #000;
    font-size: 24px;
    position: absolute;
    right: 25px;
    text-align: center;
    top: 34px;
    border-radius: 99px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #edf1f760;
    cursor: pointer;
    z-index: 1;
}

.modal-close:hover {
    color: #000000;
    background-color: #edf1f7;
}

.modal-window h1 {
    font-size: 150%;
    margin: 0 0 15px;
}

.popup-option {
    border: 2px solid #edf1f7;
    margin-top: 1rem;
    padding: 10px 20px;
    border-radius: 8px;
    color: #000000;
    font-size: 16px;
    font-weight: 500;
    font-family: var(--gr-font);
}

.popup-option:hover {
    background-color: #edf1f7;
    border: 2px solid #edf1f7;
}

.header-profilepic-pop {
    min-height: 60px;
    min-width: 60px;
    max-height: 60px;
    max-width: 60px;
    border-radius: 8px;
    color: #FFFFFF;
    font-size: 24px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-repeat: no-repeat;
    /*cursor: pointer;*/
    background-color: var(--gr-primary);
}

.profileModal{
    background-color: #FFFFFF;
    padding: 2.5rem 1.5rem; 
    border-radius: 8px;
}


.popprofile {
    margin-top: 20px;
    display: flex;
    column-gap: 1rem;
}

.progressbar > div {
    background-color: var(--gr-primary) !important;

}

/* ///////////////////////////  Blog Overide ////////////////////////// */
p span {
    font-family: var(--gr-font) !important;
    font-size: 1rem !important;
    color: #000000;

}

.gh-progressbar {
    max-width: 600px;

}

.progress-title {
    font-family: var(--gr-font);
    font-size: 1.2rem;
    margin-bottom: 1rem
}

.progress-container {
    background-color: #EDF1F7;
    Width: calc (100% - 20px);
    height: 35px;
    border-radius: 50px;
    padding: 10px;
    margin: 1rem 0rem;
}

.progress-bar {
    height: 35px;
    border-radius: 50px;
    color: white;
    font-family: var(--gr-font);
    font-size: 1rem;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.click-to-reveal {
    width: 70%;
    height: 100px;
    text-align: center;
    cursor: pointer;
    font-family: var(--gr-font);
    font-weight: 600;
    background-color: #EDF1F7;
    font-size: 1.2rem;
    margin-top: 0;
    padding: 10px;
    padding: 15px 20px;
    border-radius: var(--gr-buttonradius);
    border: 2px solid #EDF1F7;
}

.click-to-reveal-winner {
    background-color: #00A878;
    width: 70%;
    height: 100px;
    color: #FFFFFF;
    text-align: center;
    padding: 1rem;
    font-family: var(--gr-font);
    display: grid;
    align-items: center;
}

.disabled {
    display: none;
}

.hidden-winner {
    display: none;
}


/* ///////////////////////////  Redirect page ////////////////////////// */
.redirectpage {
    height: 90vh;
    background-color: #FFFFFF !important;
}

.redirectdiv {
    margin: 0 2rem;
    text-align: center;
}

.redirecttext {
    color: #223645;
    font-size: 1.25rem;
}

.redirecttext a {
    color: #000;
    text-decoration: underline;
}

/* ///////////////////////////  Everyday essentials ////////////////////////// */
.ee-title {
    margin: 1rem;
}

div.ee-scrollmenu {
    overflow: auto;
    white-space: nowrap;
    padding: 0px;
    cursor: grab;
    display: flex;
    justify-content: flex-start;
    gap: 2rem;
    margin: 0rem 1rem;
}

div.ee-scrollmenu a {
    display: inline-block;
    color: white;
    padding: 10px 25px;
    text-decoration: none;
    border-radius: var(--gr-radius);
    background-color: var(--gr-primary);
    font-weight: 500;

}

div.ee-scrollmenu a:hover {
    background-color: var(--gr-secondary);
}


.errorflex {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: 2rem;
}

/* ///////////////////////////  REGISTER PAGE ////////////////////////// */
.text-center {
    margin-bottom: 1.5rem;
}

#email-wrapper {
    display: flex;
}

.btn-primary, .btn-primary:active, .btn-primary:visited {
    background-color: var(--gr-background) !important;
    border-color: #dce4f4 !important;
    color: #000000 !important;
}

.form-row {
    margin-top:1rem !important;
}

.text-secondary {
    margin-top:1rem !important;
    color: #000000 !important;
}

/* ///////////////////////////  Community wall  ////////////////////////// */
.truncate-line-clamp {
    -webkit-line-clamp: 5;
    min-height: 110px;

}

/* ///////////////////////////  GR4 - HIGHLIGHTING ////////////////////////// */
::selection {
    background: var(--gr-primary-light); /* WebKit/Blink Browsers */
}

/* /////////////////////////// GR4 - REFER A FRIEND /////////////////////////// */
.raflinkbox {border: 2px solid #FFFFFF; color:#FFFFFF; border-radius:50px; padding:0.5rem 1rem; margin-right:20px;}

.copybutton {border: 2px solid var(--gr-primary); color:#FFFFFF; background-color:var(--gr-primary); border-radius:50px; padding:0.4rem 1.4rem; cursor:pointer;min-width: 100px;
    text-align: center; }
.copybutton:hover{border: 2px solid #3A7D64;background-color:#3A7D64;}

.statusnumber{font-size: 2.5rem;
    font-family: var(--gr-font);
    font-weight: 700;}
.progressbar {
    background-color: #e8e8e850;
    border-radius: 50px;
    padding: 0px;
height: 16px;
}
.progressbar > div {
    background-color: #00A878 !important;
border-radius: 50px;
color:white;
height: 16px;
text-align:center;
}

/*.rafremaining{color:#FFFFFF;}*/
.greendot {color:#00A878;}

.raf2to1grid {display: grid; gap: 2rem; grid-template-columns: 3fr 1.5fr !important;}
.rafcopylink {display: flex;  align-items: flex-start;
    justify-content: flex-start; margin-top: 1rem;}
.rafstatus{display:grid; grid-template-columns: 50px 1fr;align-items: center; margin-top:1rem;}

.rafmilestone {width: 45px; height: 45px; color: #FFFFFF; background-color: var(--gr-primary); border-radius: 50px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; margin-left:-10px;}
.rafpromilestone {display:grid; grid-template-columns: 1fr 50px; align-items: center;}
#raflink {border-radius: 50px;height: 20px;min-width:400px;background: #FFFFFF;color:#000000;border: 2px solid var(--gr-primary);}

.raf-table{
    width: 100%;
 }
.raf-table-history{
     color:#000000;
}

.raf-table-h{
    color:#000000;
}
.raf-table-h-date{color:#000000; width:30%; font-weight:bold;}
.raf-table-h-person{color:#000000; width:30%;font-weight:bold;}
.raf-table-h-status{color:#000000; width:40%; font-weight:bold;}
.raf-table td {
     padding-left: 0px; /* this was 10px */
    font-size: 14px;
}
                   
.ma-tabcon-myrewards-table-h {
    font-weight: bold;
    color: #000;
     padding-top: 15px;
     padding-bottom: 10px;
     font-family: 'Rubik', sans-serif;
}
.tr-dark {height:40px;}
.tr-light {height:40px;}
.tr-light td, .tr-dark td {font-size:14px !important;}

.grid-raf-box{
    border: 2px solid #DCE4F4;
    border-radius: 8px;
    padding: 2rem;
}

/* /////////////////////////// GR4  WALLET - HISTORY /////////////////////////// */

#divWallet{
    display: grid;
    grid-template-columns: 1fr;
    border-radius: 10px;
    border: 2px solid #DCE4F4;
    gap: 1rem;
    position: relative;
    padding: 1.5rem;
    margin-bottom: 3rem;
}
.walletItemHeader {
    grid-template-columns: 2fr 1fr 1fr 1fr !important;
}

.walletItem {
    grid-template-columns: 2fr 1fr 1fr 1fr !important;
    border-radius: 8px !important;
}

.walletItem:nth-child(odd) {background-color: #edf1f7;}

.walletItemContainer{
    gap: 5px !important;
    height: 200px !important;
    padding-right: 1rem !important;
}

/* /////////////////////////// GR4  WALLET - GIFT VOUCHERS /////////////////////////// */

.giftcard {
    border-radius: 8px;
    font-family: "poppins", "Arial", sans-serif;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    border: 2px solid #EDF1F7;
   } 

.giftcard:hover {
    -webkit-transform: rotateZ(-2deg);
    -ms-transform: rotateZ(-2deg);
    transform: rotateZ(-2deg);
    transition: 1s ease;
}

.inactivegc {
    cursor: no-drop;
} 

.inactivegc:hover {
    opacity:0.2;
}

.giftcard-title {
    font-weight: 600;
    line-height:1;
    font-size: 13px;
} 
   
.giftcard-description {
    display:none;
} 
   
.giftcard-amount {
    font-size: 0.6rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    background: #00000010;
    padding: 4px 8px;
    border-radius: 50px;
    width: max-content;
} 
   
.cardgrid-3to1{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 1.5rem;
    margin: 0rem;
}
   
.giftcard-coin{
    background-image: url(/images/ecobit_icon.png);
    height: 25px;
    width: 25px;
    background-size: cover;
    background-repeat: no-repeat;
    margin-right: 4px;
    display:none;
}

.giftcard-logo-image{
    border: 2px solid #EDF1F7;
    border-radius: 50px;
    overflow: hidden;
    height: 40px;
    width: 40px;

}

.raf-giftcards{
    display: grid;
    grid-template-columns: 1fr 150px;
    column-gap: 2rem;
    margin:0rem;
}

.soldoutgc {
    opacity:0.5;
    background-color:#e4e4e4 !important;    
}

.giftcard-content{
    display: grid;
    grid-template-columns: 45px 1fr 70px;
    padding: 0.3rem 0.5rem 1rem 0.5rem;
    gap: 0.5rem;
    align-items: center;
    align-content: center;
}

.giftcard-featuredimage{
    border-top-right-radius: 8px;
    border-top-left-radius: 8px;
    overflow: hidden;
}

/* ///////////////////////////  GR4 WALLET - 4 Collectibles  ////////////////////////// */

.fourCollectiblesGrid{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

.collectibleIconPoints{
    background-image: var(--gr-coin);
    height: 35px;
    width: 35px;
    background-size: cover;
    background-repeat: no-repeat;
    /*margin-right: 2rem;*/
}

.collectibleImage{
    width: 127px;
    position: absolute;
    bottom: -30px;
    right: -30px;
}

.collectibleBox{
    padding: 1.5rem 1rem 1rem 2rem;
    border-radius: 8px;
    display: flex;
    align-items: center;
    font-size: 1.5rem;
    color: #000000;
    font-weight: 700;
    justify-content: flex-start;
    overflow: hidden;
    position: relative;
}

.collectibleDescription{
    font-size: 0.9rem;
    font-weight: 800;
    text-transform: uppercase;  
}

.collectibleDescriptionHidden{
    font-size: 12px;
    font-weight: 300;
    line-height: 1.5;
    display: none;
}

/*.collectibleBox:hover .collectibleDescriptionHidden{
    display: flex;
    flex-direction: column;
}

.collectibleBox:hover .collectibleBoxInner{
    display: none;
}

.collectibleBox:hover .collectibleImage{
    display: none;
}*/



.collectibleMiniContain{
    display: flex;
    flex-direction: row;
    font-family: var(--gr-font);
    font-weight: 800;
    font-size: 2.5rem;
    line-height: 1;
    align-items: center;
}

.collectibleImgBox{
    display: flex;
    flex-direction: row;
}

.collectibleButton {
    cursor: pointer;
    border: 2px solid #e5e5e5;
    padding: 0.3rem 0.9rem;
    border-radius: 8px;
    font-size: 15px;
    color: #4f4f4f;
    border-bottom: 4px solid #e5e5e5;
    transition: all 0.1s;
    max-width: max-content;
}

.collectibleBoxInner{
    display: flex;
    flex-direction: column;
    z-index: 1;
}
/* ///////////////////////////  GR4 Transparent Header  ////////////////////////// */
.transparentHeader{
    background: transparent;
    height: 70px;
    display: grid;
    grid-template-columns:1fr 150px;
    position: relative;
    z-index: 100;
align-items: center;
}


#myVideo {
    width: calc(100% - 0px);/* Style the video: 100% width and height to cover the entire window */
    height: 55vh;
    object-fit: cover;
    position: absolute;
    top: 0;
}

.video-container{
    width: calc(100% - 0px);
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 55vh;
}  

.transparentHeaderLogo{
    max-width:220px;
}


/* ///////////////////////////  DASHBOARD STYLING  ////////////////////////// */

.homeSection-White{
    background-color: #FFFFFF; 
    padding: 0rem 1rem;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

.homeSection-Back{
    background-color: var(--gr-background); 
    padding: 0rem 1rem;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

.homeSection-Back1{
    background-color: var(--gr-background1); 
    padding: 0rem 1rem;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

.homeSection-Container{   
    max-width:1040px;
}

.homeSection-ContainerWide{   
    max-width:1800px;
}

.element-contain {
    max-width: 1040px;
    margin: 1rem auto;
}


.OnePageTitle{
    font-size: 30px;
    font-family: var(--gr-font);   
    text-align: center;
    font-weight: 800;
    margin: 2rem 0rem 0rem 0rem;
}
.OnePageSubTitle{
    font-size: 16px;
    color:#000000;
    opacity: 0.8;
    font-family: var(--gr-font); 
    font-weight:300;
    margin-bottom:2rem;
    text-align: center;
    text-transform: uppercase;
}

.latestNewsGrid6{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr; 
    gap: 1.5rem; 
    margin-top:1rem;
    margin-bottom: 2rem;
}

/* ///////////////////////////  GR4 PAGE WIDTH CONTROL ////////////////////////// */ 

.page-container {
    display: flex;
    justify-content: center;
}   

.page-innerwide{
    margin: 0 2rem;
    max-width: 1200px;
    width: 100%;
}

.page-innersmall{
    margin: 0 2rem;
    max-width: 800px;
    width: 100%;
}

.page-innerFull{    
    width: 100%;
}

.nav-bargr{
    display:flex; 
    /*background:white; */
    padding:12px 0; 
    align-items: center;
}
.nav-bargr a {
    /*color:#000000 !important;*/
}

.scroll-x {
/* empty until used on Mobile device*/
}

.pageHeaderSection{
    padding: 4rem 0 3rem 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap:1.5rem;
}

.pageSectionBody{
    font-size: 1rem;
}

.grGrey{
    background-image: linear-gradient(#EDF1F7, white);
}

.pageHeaderTitle{
    font-size: 3rem !important;
    font-family: var(--gr-font);
    letter-spacing: var(--gr-letterspace);
    text-align: left;
    font-weight: 800;  
    color: #000000;
    
     
}

/* ///////////////////////////  GR4 PAGE - section divider ////////////////////////// */ 
.dividerSection{
    display: grid;
    grid-template-columns: 1fr 120px;
    gap: 1rem;    
    align-items: center;
    align-content: center;
    margin-top:2rem;
    margin-bottom: 0.75rem;
}

.dividerSectionTitle{
    font-size: 2rem !important;
    font-family: var(--gr-font);
    letter-spacing: var(--gr-letterspace);
    text-align: left;
    font-weight: 800;  
    color: #000000;  
    /*text-transform: uppercase;*/
}

.dividerSectionTitleMini{
    font-size: 1.25rem !important;
    font-family: var(--gr-font);
    letter-spacing: var(--gr-letterspace);
    text-align: left;
    font-weight: 800;   
    /*text-transform: uppercase;*/
    padding: 1rem 0 0 1rem;
}

.dividerSectionRight{
    display: flex;
    justify-content: flex-end;
}

.dividerSectionLink{
    font-family: var(--gr-font);
    text-align: right;
    font-weight: 800;
    color: #000000; 
}

.dividerSectionLink:hover{
    cursor: pointer;
    color:var(--gr-primary);
}  


/* ///////////////////////////  GR4 - STICKY HEADER ////////////////////////// */ 
.sticky{
    position: sticky;
    top: 0;
    z-index: 99;
}

#section-header{
    text-align: center;
    font-size: 24px;
    font-family: var(--gr-font);   
    font-weight: 800;

}


/* ///////////////////////////  INSIGHT ACTIVITY  ////////////////////////// */ 


.insight-answer {
    cursor: pointer;
    margin: 0.5rem;
    border: 2px solid #e5e5e5;
    padding: 0.8rem 1rem;
    border-radius: 8px;
    color: #000000;
    border-bottom: 4px solid #e5e5e5;
    transition: all 0.1s;
    background: white;
    font-size: 0.9rem;
    font-family: var(--gr-bodyfont);
    font-weight: 300;

    
}

.insight-answer:hover {
    background-color: #ddf4ff;
    border-color: var(--gr-primary);
}

.insight-answer:active {
    border-bottom: 2px solid var(--gr-primary);
  }

.insight-response {
    display: none;
    cursor: pointer;
    color: white;
    background-color: black;
    padding: 1.5rem 1rem;
    margin: 1.5rem 0.5rem;
    border-radius: 10px;
}

.insight-url-button {
    color: white;
    background-color: var(--gr-primary);
    border-radius: 5px;
    display: block;
    margin-top: 20px;
    padding: 15px;
}

.insight-url-button:hover {
    color:#000000;
}

#insight-confirm {  
    cursor: pointer;
    margin: 0.5rem;
    border: 2px solid var(--gr-primary);
    padding: 0.8rem 1rem;
    border-radius: 12px;
    font-size: 16px;
    color: var(--gr-primary);
    border-bottom: 4px solid var(--gr-primary);
    transition: all 0.1s;
    background: var(--gr-primary-light);
}

#insight-confirm:hover {
    background: var(--gr-primary);
    color:#FFFFFF;

}

.insight-answer.selected-answer{
    background-color: #ddf4ff;
    border-color: var(--gr-primary);
    
}

.insight-container {
    font-size:18px;
    font-weight:bold;
    text-align: center;
    font-family: "Overpass", sans-serif;
}

.insight-answer-container{
    display: grid;
    grid-template-columns: 1fr 1fr;
}



/* /////////////////////////// GR4 PAGES - ACTIVITY PAGE  /////////////////////////// */

.exploreCampaignGroup {
    display: grid;
    grid-template-columns: 1fr 350px ;
    gap: 2rem;
    margin-top: 0.5rem;
}

.group-section{
    margin-top:2rem;
}

.nav-wheel {
    background-image: var(--gr-wheel);
    height: 20px;
    width: 20px;
    background-size: cover;
    background-repeat: no-repeat;

}



.campaignGroupTitle{
    display: flex;
    font-size: 1.2rem;
    font-weight: 700;
    align-items: center;
    gap: 1rem;
}



.campaignGroupContainer{
    display: grid;
    gap: 0.5rem;
    
}

.campaignGroupBox{
    border:0px solid grey;
    border-radius: 8px;
    padding: 0.8rem 1rem;
    display: grid;
    grid-template-columns: 55px 1fr;
    gap: 1rem;
    align-items: center;
    align-content: center;
}

.campaignGroupBox:hover{
    background-color: #dce4f450;
    cursor: pointer;
}

.activeGroupBox{
    background-color: #dce4f450;
}

.groupBoxComplete{
    opacity: 0.2;
    cursor: default !important;
}

.activityComplete{
    opacity: 0.2;
    cursor: default !important;
}

.campaignGroupImage{
    border-radius: 10px;
    display: flex;
}

.cgTitle{
    font-size: 15px;
    font-weight: 600;
    line-height: 1;    
    font-family: "Overpass", sans-serif;
    letter-spacing: -0.5px;
}

 

.fullImageWidth{
    width:100%;
    border-radius: 6px;
}

.heroImageTitle{
    font-size: 2.25rem;
    font-weight: 800;
    line-height: 1;
    color: #FFFFFF;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, .5);
    font-family: var(--gr-font);
}

.heroImageDescription{
    font-size: 0.9rem;
    font-weight: 400;
    line-height: 1.4;
    color: #000000;
    margin:1.5rem 0;
}

.heroImageBackground{
    background-image: url(/images/newactbacktest2.png);
    background-size: cover;
    background-repeat: no-repeat;
    min-height: 350px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 0.5rem;
    border-radius: 8px;
    background-position: center center;
}

.campaignGroupBonuses {
    display: flex; 
    gap: 0.5rem; 
    flex-wrap: wrap; 
    margin-bottom: 0.5rem;
}

.heroImagebutton{
    background-color: var(--gr-primary);
    padding: 0.3rem 1rem;
    border-radius: 6px;
    color: #FFFFFF;
    width: max-content;
    font-size: 12px;
    font-weight: 500;
}

.heroImagePointsWheel {
    background-color: #FFFFFF40;
    padding: 0.3rem 0.5rem;
    border-radius: 6px;
    color: #FFFFFF;
    width: max-content;
    font-size: 12px;
    font-weight: 500;
    display:flex;
}

.campaignGroupDescription{
    margin: 2rem 0;
    line-height: 1.4;
}

.campaignGroupActivityBoxes{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 1.5rem;
    margin: 1.5rem 0;    
}

.campaignGroupActivityBox{
    background-size: cover;
    background-repeat: no-repeat;
    aspect-ratio: 1 / 1;
    border-radius: 8px;
}

.campaignGroupGradient{
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgb(0 0 0 / 75%) 47.42%, rgb(0 0 0 / 90%));
    padding: 2.5rem 1.5rem 1.5rem 1.5rem;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;   
}

.campaignGroupHeroContent{
    width:65%;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.activityGradient{
    background: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(26, 43, 73, 0.9));
    padding: 0.7rem;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    color: #FFFFFF;
    line-height: 1;
    font-size: 0.8rem;
    font-weight: 500;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, .5);
    display: flex;
    align-items: center;
}

.activityType{
    color: var(--gr-primary) !important;
    font-weight: 600;
    font-size: 0.9rem;
    margin: 10px 0 10px 0;
    text-transform: uppercase;
    background: var(--gr-primary-light);
    max-width: max-content;
    padding: 5px 20px;
    border-radius: 5px;
    
}

.activityTitle{
    color: #000000;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.1;
    font-family: var(--gr-font);
}


.campaignGroupBoxLibrary{
    display: flex;
    flex-direction: column;
    align-content: center;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
}

.cgRewardBoxContainter{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 1rem;
    margin: 1rem 0 2rem 0;
}

.cgRewardBox{
    padding: 1rem;
    background-color: #FF985920;
}

.imgContainZoom {
    transform: translateZ(0);
    transition: all .4s ease-in-out;
    overflow: hidden;
    border-radius: 8px;

}

.campaignGroupActivityBox:hover{
    scale:1.2;
    transition: 0.5s ease-in-out;
    cursor: pointer;
}
.campaignGroupActivityBox:hover .activityGradient{
    opacity:0;
}


.campaignGroupOwlImage{
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 8px;
    aspect-ratio: 1 / 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.campaignGradient {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4));
    padding: 1.5rem 1rem;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    color: #FFFFFF;
    line-height: 1;
    font-size: 1.1rem;
    font-weight: 700;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, .6);
    display: flex;
    align-items: center;
}

.campaignHasPoints{
    padding: 10px;
    display: flex;
    gap: 10px;
    flex-direction: row;
}

.campaignPointsCoin {
    background-image: var(--gr-coin);
    height: 26px;
    width: 26px;
    background-size: cover;
    background-repeat: no-repeat;
    margin-bottom: 10px;
}

.campaignWheelspin{
    background-image: var(--gr-wheel);
    height: 25px;
    width: 25px;
    background-size: cover;
    background-repeat: no-repeat;
}




.campaignOwlItem:hover{
    .campaignGroupOwlImage{  justify-content: flex-end;   cursor:pointer;}
    .campaignHasPoints{    display: none;    transition: 0.5s ease-in-out;}
    .campaignGradient{    justify-content: center;    transition: 0.5s ease-in-out;    height: 100%; text-align: center; }
}


.activeCampaign {
    .campaignGradient {justify-content: center;  transition: 0.5s ease-in-out;  height: 100%;}
    .campaignHasPoints {display: none; transition: 0.5s ease-in-out;} 
    .campaignGroupOwlImage {justify-content: flex-end; cursor:none;} 
}

.campaign-title {margin-bottom: 1.5rem;}
.library {margin-bottom: 1.5rem;}



/*Tony slider*/
.activity-tabs {
    display: inline-block;
    cursor: pointer;
    font-size: 1.25rem;
    font-weight: 800;
    font-family: var(--gr-font);
    line-height: 1rem;
    padding: 1rem 3rem !important;
    width: max-content;
    color: #FFFFFF;
    border-radius: 8px 8px 0 0;
    background-color: #FFFFFF30 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, .5);
    margin-right: 1rem;
    
}

.campaign-group-carousel {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: -60px;
    padding-bottom: 10px;
}

.slide-left {
    cursor: pointer;
    color: #edf1f7;
}

.slide-left:hover {
    
    color: var(--gr-primary);
}

.slide-right {
    cursor: pointer;
    color: #edf1f7;
}

.slide-right:hover {
    
    color: var(--gr-primary);
}

.caveat {
    font-family: "Caveat", "Arial", sans-serif;
    font-size: 24px;
    color: #FFFFFF;
    font-weight: 700;
}

.moreactiviteshere{
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    margin-left: -25px;
}

.caveatArrow{
    width: 80px;
    margin-right: 5px;
}


.activity-tabs:hover {
    color: #000000 !important;
    background-color: #FFFFFF !important;
    text-shadow:none !important;
}

.selected-activity-tab {
    color: #000000 !important;
    background-color: #FFFFFF !important;
    text-shadow:none !important;
}

.campaign-group-description{
    margin-top:1.5rem;
}

.scroll-box {
    display: flex;
    white-space: normal !important;
    overflow: hidden;
    cursor: grab;
    user-select: none;
    transition: transform 0.3s ease;
    margin-top: 1.5rem;
}

.scroll-box:active {
    cursor: grabbing;
  }

.scroll-wrapper {
    width: calc(100% + 0rem) !important;
    margin: 0 auto;
    overflow: hidden;
    overflow-scrolling: touch;
    transition: transform 0.3s ease;
}

.scrollable-content {
    flex: 0 0 auto;
    margin-right: 1.5rem !important;
    background-size: cover;
    text-align: center;
    color: white;
}

.owl-fullwidth {
    padding: 0rem 0rem !important;
}

.selectedCampaignGroup{
    justify-content: center;
    transition: 0.5s ease-in-out;
    height: 100%;
    text-align: center;
    border-radius: 8px;
    /*box-shadow: inset 0px 0px 20px 20px #00000040;*/
    /*border: 4px solid var(--gr-primary);*/
    background-color: var(--gr-primary);
}

.owlLibraryItem {
    padding: 8px 25px;
    border: #dce4f4 3px solid !important;
    color: #000000 !important;
    border-radius: 6px;
    font-family: var(--gr-font);
    font-weight: 700;
}

.owlLibraryItem:hover {
    background-color: #dce4f4 !important;
    color: #000000 !important;
}

.selectedLibraryItem {
    background-color: #dce4f4  !important;
    color: #000000 !important;
}

.group-locked {
    opacity: 0.6;
    cursor: not-allowed !important;
 }

 .group-locked p {
    color: white;
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, .9);
    font-size: 16px;
 }

 .group-locked .campaignGradient {
    color: transparent;
    text-shadow: none;
    background:none;
}

.group-locked .campaignPointsCoin {
    background-image: none !important;
}
 

/* ///////////////////////////  GR4 - Prize Draw & Donation Widgets ////////////////////////// */ 
.draw-description {
    font-size: 0.8rem;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box !important;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
}

.donation-description{
    font-size: 0.8rem;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box !important;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
}

.spendPointsWidget{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap:1.5rem;
}


.prizedrawWidget{
        display: grid;
        grid-template-columns: 1fr;
        border-radius: 10px;
        border: 2px solid #DCE4F4;
        gap:1rem;
        position: relative;
        padding: 1.5rem;
    }

/*.prizedrawWidget:hover{
    background-color: #DCE4F450;
}    */

.donationsWidget{
        display: grid;
        grid-template-columns: 1fr;
        border-radius: 10px;
        border: 2px solid #DCE4F4;
        gap:1rem;
        position: relative;
        padding: 1.5rem;
    }  

/*.donationsWidget:hover{
    background-color: #DCE4F450;
} */      
    

.widgetPoints{
    display: flex;
    align-content: center;
    position: absolute;
    top: 2.25rem;
    left: 2.25rem;
    background-color: var(--gr-primary);
    padding: 7px 12px 6px 12px;
    border-radius: 5px;
    color: #FFFFFF;
    width: max-content;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    line-height: 1;  
}

.spendPointsWidgetButton {
    cursor: pointer;
    border: 2px solid var(--gr-primary);
    padding: 0.5rem 1.5rem;
    border-radius: 8px;
    font-size: 14px;
    color: var(--gr-primary);
    transition: all 0.1s;
    background: var(--gr-primary-light);
    font-family: var(--gr-font);
    text-align: center;
    text-transform: uppercase;
    font-weight: 700;
}


a.spendPointsWidgetButton:hover {
    background: var(--gr-primary);
    color:#FFFFFF;
    transition: 0.5s ease;  
}



  



/*----PRIZE DRAW WIDGET ----*/
.draw-image{
    border-radius: 8px;
}

.draw-name{
    line-height: 1;
    height: 50px;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box !important;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    font-weight: 700;
}

.draw-ends-in{
    font-weight: 600;
}

.countdown-times-prizedraw{
    font-size: 1.4rem;
    font-weight: 600;
}

.countdown-wording-prizedraw{
    font-size:8px;
}

/*----DONATION WIDGET ----*/
.donation-image{
    border-radius: 8px;
}

.donation-name{
    line-height: 1;
    height: 50px;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box !important;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    font-weight: 700;
}

.donation-ends-in{
    font-weight: 600;
}

.countdown-donations{
    margin-bottom: 6px;
}

.countdown-times-donations{
    font-size: 1.4rem;
    font-weight: 600;
}

.countdown-wording-donations{
    font-size:8px;
}

/* ///////////////////////////  GR4 - Client 3 Grid Dashboard ////////////////////////// */ 
.clientActivityGrid{
    display: grid;
    grid-template-columns: 50% 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 2rem;
    grid-template-areas: "clientcurrent clientprev clientprev2";
}  
.campaignGroupHeroContent{
    width:100% !important;
}

.client1 {
    grid-area: clientcurrent;
}

.client2 {
    grid-area: clientprev;
}

.client3 {
    grid-area: clientprev2;
}

/* ///////////////////////////  GR4 - Eco SHop Items ////////////////////////// */ 
.cat-prod-wrap {
    float: left;
    width: calc(100% + 0rem);
    margin: 0px;
}

#filtereddata{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

.reward-item-info-desc {
    color: #000000;
    font-weight: 300;
    font-size: 0.8rem;
    margin-top: 0px;
    display: grid;
    gap: 6px;
    font-family: var(--gr-bodyfont);
    padding: 1rem;
    width: calc(100% - 0px);
}

.reward-item-info-desc span {
    color: #000000;
    /*display: block;*/
    padding-right: 20px;
    font-weight: 700;
    font-size: 1.2rem;
    font-family: var(--gr-font);
    padding-top: 8px;
    line-height: 1;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.reward-item-info-points {
    background-color: #FFFFFF !important;
    border: 2px solid #DCE4F4;
    position: absolute;
    top: 10px;
    right: 20px;
    color: #000000;
    border-radius: 4px;
    width: max-content;
    height: max-content;
    padding: 5px 10px;
}

.reward-item-info-points .reward-item-info-points-number {
    padding-top: 0px;
    color: #000;
    font-size: 0.9rem;
}

.reward-item-info-points .reward-item-info-points-text {
    font-weight: 300;
    padding-top: 0px;
    color: #000;
    font-size: 0.9rem;
    margin-top: 0;
}

.reward-item-wrap {
    background-color: transparent !important;
    padding-top: 15px;
    margin-bottom: 0.5rem !important;
}

.ecoShopItem{
    border: 2px solid #DCE4F4;
    border-radius: 8px;
    position: relative;
    padding: 15px 5px 5px 5px;
}

.reward-item-info-points div {
    margin-top: 0 !important;
    display: flex;
    align-content: center;
    align-items: center;
}

.rewards-plus-override .reward-item-info-points {
    height: max-content;
    width: max-content;
}

.reward-item-wrap.rewards-plus-override {
    padding: 15px 0 0 0 !important;
}

/* ///////////////////////////  GR4 - Dashboard - Community Wall 3 Boxes ////////////////////////// */

.cwall2boxes{
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1.5rem;
    margin: 0rem 0 1.5rem 0
}  

.cwall3boxes{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.chalboxes{
    grid-template-areas:
        "chalicon chaltext"
        "chalprogress chalprogress";
}

.chalIcon {grid-area: chalicon;}
.chalText {grid-area: chaltext;}
.chalProgress {grid-area: chalprogress;}

.cwallBox{
    display: grid;
    grid-template-columns: 50px 1fr;
    border-radius: 8px;
    border: 2px solid #DCE4F4;
    gap: 1rem;
    position: relative;
    padding: 1rem;
}
.cwallBox2{
    display: flex;
    grid-template-columns: 1fr;
    border-radius: 8px;
    border: 2px solid #DCE4F4;
    gap: 1rem;
    position: relative;
    padding: 1.5rem;
    flex-direction: column;
}

.cwallBox2-inner{
    display: grid;
    grid-template-columns: 1fr 1fr; 
    gap:1.5rem;   
}

.cwallIcon{
    width:50px;
}

.cwallDetails{
    display:flex;
    flex-direction: column;
    justify-content: center;
}

.cwallMiniTitle{
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1;
    font-family: var(--gr-font);
}

.cwallLargeTitle{
    font-size: 1.4rem;
    font-weight: 800;
    line-height: 1;
    margin-top: 5px;
    font-family: var(--gr-font);
}


/* ///////////////////////////  GR4 - Streak Popup ////////////////////////// */ 

.currentStreakFire{
    background-image: url(/images/grstreak64.png) !important;
    height: 45px !important;
    width: 45px !important;
}

.btn-ClaimStreak{
    padding: 7px 20px !important;
}

/* ///////////////////////////  GR4 - new blog page ////////////////////////// */ 
#summary-view{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    margin: 1.5rem 0rem 3rem 0rem;
}

/* ///////////////////////////  STW ////////////////////////// */
.wheeldot {
    position: absolute;
    top: 208px;
    user-select: none;
    pointer-events: none;
    z-index: 99;
    height: 50px;
    width: 50px;
    background-image: url(https://devroot.greenredeem.co.uk/websites/AD2902966/images/gr4-wheeldot.png);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

/* ///////////////////////////  GR4 - BOTTOM BAR ////////////////////////// */ 
.activityBarBottom {
    border-top: 2px solid #EDF1F7;
    position: fixed;
    bottom: 0;
    width: 100%;
    padding: 1rem;
    left: 0;
    display: flex;
    justify-content: center;
    background: white;
}

/* ///////////////////////////  NEW SECTION ////////////////////////// */



/* ///////////////////////////  Client BUTTON ////////////////////////// */
.clientButton{
    cursor: pointer;
    border: 2px solid var(--gr-primary);
    padding: 0.5rem 1.5rem;
    border-radius: 8px;
    font-size: 14px;
    color: var(--gr-primary);
    transition: all 0.1s;
    background: var(--gr-primary-light);
    font-family: var(--gr-font);
    text-align: center;
    text-transform: uppercase;
    font-weight: 700;
}

.clientButton:hover{
    background: var(--gr-primary);
    color:#FFFFFF;
    transition: 0.5s ease;
}

.cbSlim{
    padding: 0.3rem 1rem;
    font-size:13px;
}

.cbXL{
    padding: 0.8rem 2rem;
    font-size:16px;
}



/* ///////////////////////////  GR4 - Wallet items  ////////////////////////// */
.walletItem{
    background-color: var(--gr-background);
    display:grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    padding:10px;
    border-radius: 10px;
    align-items: center;
    }
  
  .walletItemContainer{
    display:grid;
     grid-template-columns: 1fr;
      gap:10px;
      height: 170px;
      overflow-y: scroll;
    }
  
  .walletItemHeader{
    font-weight: bold;
    display:grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    width: calc(100% - 30px);
  }
  
  .buttonWalletItem {
    background-color: var(--gr-primary);
    color: #FFFFFF;
    border-radius: var(--gr-buttonradius);
    border: 2px solid var(--gr-primary);
    text-align: center;
    font-family: var(--gr-font);
    font-weight: 500;
    padding: 4px 10px;
    align-items: center;
    cursor: pointer;
    font-size: 12px;
  }

/* ///////////////////////////  UNKNOWN CSS ////////////////////////// */

.completedText {
    padding-right:10px;
  }
  
  /* The switch - the box around the slider */
  .switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 30px;
  }
  
  /* Hide default HTML checkbox */
  .switch input {
    opacity: 0;
    width: 0;
    height: 0;
  }
  
  /* The slider */
  .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #DCE4F4;
    -webkit-transition: .4s;
    transition: .4s;
  }
  
  .slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
  }
  
  input:checked + .slider {
    background-color: #00A878;
  }
  
  input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
  }
  
  input:checked + .slider:before {
    -webkit-transform: translateX(20px);
    -ms-transform: translateX(20px);
    transform: translateX(20px);
  }
  
  /* Rounded sliders */
  .slider.round {
    border-radius: 34px;
  }
  
  .slider.round:before {
    border-radius: 50%;
  }
  @media (min-width: 0px) and (max-width: 680px) {    
  .walletItemDate{display:none;}
  .walletItem {grid-template-columns: 1.5fr 1fr 1fr !important; }
  .walletItemHeader {grid-template-columns: 1.5fr 1fr 1fr !important; }
  .completedText {display:none;}
  }

  
/* ///////////////////////////  GR4 Hero Image and Nav ////////////////////////// */
.image-container{
    width: calc(100% - 0px);
    margin-bottom: 3rem;
}    

.imageHero{
    min-height: 60vh;
    background-size: cover;
    background-repeat: no-repeat;
    align-items: flex-end;
    display: flex;
    background-position: bottom;
}

/* Add some content at the bottom of the video/page */
.myvideoOverlay {      
    margin-bottom: 40px;
    width: 50%;
    z-index: 1;
    position: relative;
    
}

.videoTitle {
    font-size: 2.25rem; 
    color: #FFFFFF;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, .5);
    font-weight: 700;
}
.videoPara {
    font-size: 1.1rem; 
    color: #FFFFFF;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, .5);
    font-weight: 400;
}

/*Hero navigation*/
/*Tony slider*/
.activity-tabss {
    display: inline-block;
    cursor: pointer;
    font-size: 1.25rem;
    font-weight: 800;
    font-family: var(--gr-font);
    line-height: 1rem;
    padding: 1rem 3rem !important;
    width: max-content;
    color: #FFFFFF;
    border-radius: 8px 8px 0 0;
    background-color: #FFFFFF30 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, .5);
    /*margin-right: 1rem;*/
    
}

.activity-tabss:hover {
    color: #000000 !important;
    background-color: #FFFFFF !important;
    text-shadow:none !important;
}

.selected-activity-tabs {
    color: #000000 !important;
    background-color: #FFFFFF !important;
    text-shadow:none !important;
}

.megaMenuContainer{
    display: flex;
    gap:1rem;
}

.mm-item{
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1rem;
    padding: 1rem 3rem;
    width: max-content;
    color: white;
    border-radius: 16px 16px 0 0;
    background-color: transparent;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, .5);
}

.mm-active{
    background-color: white;
    color: #1a2b49;
    text-shadow: none !important;
}



/* /////////////////////////// Horizonal  SCROLL MENU NEW ////////////////////////// */


div.horizontalscrollmenu {
    overflow: auto;
    white-space: nowrap;
    cursor: grab;
    display: flex;
    gap: 1.5rem;
    margin: 0rem;
    flex-direction: row;
    align-items: flex-end;
    z-index: 1;
    position: relative;
}

div.horizontalscrollmenu a {
    
}

div.horizontalscrollmenu a:hover {
    
}






/* ///////////////////////////  GR4 Spin the wheel ////////////////////////// */
/*------------ CSS For the reward CARDS ---------*/
@media (min-width: 681px) and (max-width: 900px){
    .cardgrid-3to1 {
    grid-template-columns: 1fr 1fr !important;
    }
}

    @media (min-width: 0px) and (max-width: 680px){
    .giftcard:hover {
    -webkit-transform: rotateZ(-0deg);
    -ms-transform: rotateZ(-0deg);
    transform: rotateZ(-0deg);
    transition: 1s ease;
   }    
    .cardgrid-3to1 {
    grid-template-columns: 1fr !important;
    }
    }

/*------------ CSS For the reward CARDS ENDS ---------*/


.colour {
    padding-top: 0em;
    padding-bottom: 0em;
}



#stwMasterDiv {
    display: none;
    justify-items: center;
    justify-content: center;
}

/*------------ START NEW CODE HERE  -----------------------------------------------------*/


.stw{
    background-color: #FFFFFF;  
    display:grid;
    grid-template-columns: 1fr;
    padding:1.0rem 0.5rem 0rem 0.5rem;
    justify-items: center;
    font-family: "Poppins", sans-serif;
    position: fixed;/*Tony add*/ 
    bottom: 0;/*Tony add*/ 
    background-image: var(--gr-wheelbackground);
    background-size: 200px;
    background-repeat: repeat;
    width: calc(100% - 16px);
    height: calc(100% - 21px);
    z-index: 999;
    justify-content: center;
    border-top:5px solid var(--gr-primary);
    margin: 0 auto;
}

.stw-container{
    display: flex; /*was grid*/
    grid-template-columns: 1fr ;
    margin: 0 0rem;
    min-width: 400px;
    max-width: 400px;
    height:85vh; /*Tony add*/ 
    justify-content: center;
    flex-direction: column;/*added with flex*/
}
/* -------This is the instructions box CSS --------- */
.stw-instructions{
    display:grid;      
    padding:0rem 0.5rem;
    align-items: center;  
    grid-template-columns: 1fr;
}

.stw-inner{
    display: grid;
    justify-items: center;
    grid-template-columns: 1fr;
    align-items: center;
}
.stw-heading{
    color:#000;
    font-size:24px;
    text-align:left;
    margin: 0;
}
.stw-explain{
    color:#000;
    font-size:16px;
    text-align:center;
    font-weight: 300;
    margin:0;
}

#spinButton{
    cursor: pointer;
    border: 2px solid var(--gr-primary);
    padding: 0.9rem 1.5rem !important;
    border-radius: 8px !important;
    font-size: 16px;
    color: var(--gr-primary);
    transition: all 0.3s;
    width: max-content !important;
    background: var(--gr-primary-light);
    font-weight: 800;
    font-family: var(--gr-font) !important;
    text-transform: uppercase;
    margin: 0rem 0 1rem 0;
    border-bottom: 4px solid var(--gr-primary);
}

#spinButton:hover{
    background-color: var(--gr-primary);
    color:#FFFFFF;
}

#closeWheelPopup{
    font-size: 40px;
    color: var(--gr-primary);
    cursor: pointer;
}

.wallet-spins{
    color:#FFFFFF;
}

#nextSpinAvailable{
    padding: 0.8rem 2rem;
    font-size: 16px;
    color: #FFFFFF;
    background-color: var(--gr-primary);
    font-family: var(--gr-font);
    text-align: center;
    text-transform: uppercase;
    font-weight: 700;
    transition: all 0.1s;
    border-radius: 8px;
    border: 1px;
    cursor: pointer;
    box-shadow: 0 0 0 0 rgba(88, 120, 243, 0.4);
    -moz-animation: pulse 2s infinite;
    -webkit-animation: pulse 2s infinite;
    animation: pulse 2s infinite;
    
}




/* -------This is the instructions box CSS ENDS --------- */
.stw-wheel{ 
    display:grid;
    /*flex-direction: column;*/  /*Tony change*/ 
    /*align-content: center;*/  /*Tony change*/ 
    justify-items: center;
    position: relative; /* Ensure the parent container has a positioned context */ 
    overflow: hidden;/*Tony add*/ 
}

.stw-wheelbox { 
	/*background-image: url(https://webroot.greenredeem.co.uk/websites/AD2902966/images/greenspinthewheel.png);		*/
  height:400px;
  width:400px;  
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  margin-top:30px;  /*Tony add*/  
  overflow: hidden;/*Tony add*/   
}

.grbutton{
  position:absolute;
  top: 10px;
  user-select: none;   
  pointer-events: none;
  z-index: 99;
  
}

/*.wheeldot{
  position:absolute;
  top: 225px;
  user-select: none;   
  pointer-events: none;
  z-index: 99;
  background-color: black;
  height:30px;
  width:30px;
  border-radius: 50px;
}*/

.wheelticker{
  height:65px;  
}

.presstospin{
  width: 150px !important;
    padding: 8px !important;
    border-radius: 10px !important;

}


/* wheel ticker animation */
@keyframes rotateLeftRight {
  0%  {  transform: rotate(0deg); }
  5%  {  transform: rotate(5deg); }
  10% {  transform: rotate(0deg); }
  15%  {  transform: rotate(-5deg); }
  20% {  transform: rotate(0deg); }
  25% {  transform: rotate(5deg); }
  30%  {  transform: rotate(0deg); }
  35%  {  transform: rotate(5deg); }
  40% {  transform: rotate(0deg); }
  45%  {  transform: rotate(-5deg); }
  50% {  transform: rotate(0deg); }
  55% {  transform: rotate(5deg); }
  60%  {  transform: rotate(0deg); }
  65%  {  transform: rotate(5deg); }
  70% {  transform: rotate(0deg); }
  75%  {  transform: rotate(-5deg); }  
  100% {  transform: rotate(0deg); } 
}

/* Apply the animation to the image */
.wheelticker.rotate-left-right {
  animation: rotateLeftRight 3s linear;
}


.stw-prize{
  display:grid;
    flex-direction: column;
    align-content: center;
    justify-items: left;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;    
  border-radius:10px;
    padding:0.5rem;   
}

#stwResult{
  color:#000000;
  font-size:24px;
  text-align:left;
}


/* -------This is the wheel box CSS ENDS --------- */
.btn-stwprize{
  width:200px;
  height:40px;
  font: inherit;
  font-size:1rem;
  font-weight:500;
  background:#223645;
  color:white;
  border:none;
  border-radius:10px;
  cursor:pointer;
}

/*----- new modal --*/
/* Styles for the modal */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 99;
    backdrop-filter: blur(1px);   
    z-index: 999999;
    --bs-modal-width: 100% !important;
}

.modal-content {
    font-family: "Poppins", sans-serif;
    background-color: #FFFFFF;
    width: 50%;
    padding:2rem;
    border-radius: 15px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    gap: 0.5rem;
    display: grid;
    justify-items: center;
    max-width:900px;
}
.form-label {
    font-size: 15px;
    color: #000000;
    font-weight: 700;
    font-family: var(--gr-font);
    max-width: 380px;
}



.closemodal{
    background-color: #EDF1F7;
    width: 35px;
    height: 35px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    cursor: pointer;
    font-family: "poppins";
    font-weight: 700;
    right: 15px;
    position: fixed;
    top: 15px;
}

.prizebutton{
  margin:0rem;
  color:#FFFFFF;
}



/* -------Media rules --------- */
@media (max-width: 600px) {
    .stw-container {grid-template-columns: 1fr !important; grid-auto-rows: auto; height:85vh; }
   
  /* .stw {padding:0.5rem;} */ /* dudley change this */
  .stw-heading{ text-align:center !important;}
  .stw-explain{ text-align:center !important;}
  .stw-inner {display:grid;justify-items: center;}
  #stwResult {text-align:center;}
  .modal-content {width:70%;}
  /* these are new to be added */
  /* .stw-wheel{transform: scale(0.6);} */
  canvas {width: 435px;    height: 435px;}
  .stw-wheelbox { width:350px; height:350px;}
  .wheeldot {top:200px;}
}

/* ///////////////////////////  Whats New Grid ////////////////////////// */
.whatsNewGrid{
    display: grid;
    grid-template-columns: 1fr 250px;
    column-gap: 4rem;
    margin-bottom: 2rem;
    grid-template-areas: "whatsnew wnarrow";
}

@keyframes wnpulse {
    0% {
      box-shadow: 0 0 0 0 rgba(5, 2, 2, 0.7);
    }
    70% {
      box-shadow: 0 0 0 10px rgba(255, 0, 0, 0);
    }
    100% {
      box-shadow: 0 0 0 0 rgba(255, 0, 0, 0);
    }
  }

  #wnbutton {
    padding: 0.8rem 2rem;
    font-size: 16px;
    color: #FFFFFF;
    background-color: var(--gr-primary);
    font-family: var(--gr-font);
    text-align: center;
    text-transform: uppercase;
    font-weight: 700;
    transition: all 0.1s;
    border-radius: 8px;
    border: 1px;
    cursor: pointer;
    box-shadow: 0 0 0 0 rgba(88, 120, 243, 0.4);
    -moz-animation: wnpulse 2s infinite;
    -webkit-animation: wnpulse 2s infinite;
    animation: wnpulse 2s infinite;
  }

/* ///////////////////////////  More Popup ////////////////////////// */
.modalFooter{
    flex-wrap: wrap;
    justify-content: flex-start;
    display: flex;
    column-gap: 1.5rem;
    font-size: 12px;
    border-radius: 8px;
    color: #000000;
    font-family: var(--gr-font);
    margin-top: 1.5rem;
}

.modalFooter a {
    color: #000000;
}
.modalFooter a:hover {
    color: var(--gr-primary);
}

.modalFooterPoweredBy{
    display: flex;
    justify-content: flex-start;
    font-size: 0.7rem;
    margin-top: 10px;
    color: var(--gr-primary);
    font-weight: 800;
    font-family: var(--gr-font);
}


/* ///////////////////////////  ! ALL MEDIA QUERIES ! ////////////////////////// */ 

/* @@@Media Query for Mobile Devices */
@media (max-width: 680px) {
    .nav-buttons {  width: 100% !important;}
    .exploreCampaignGroup {grid-template-columns: 1fr; gap: 0rem;}
    .campaignGroupActivityBoxes{ grid-template-columns: 1fr 1fr;}
    .page-innerwide { margin: 0 1rem;}
    .cgRewardBoxContainter{grid-template-columns: 1fr 1fr;}
    .campaignGroupContainer {grid-template-columns: 1fr;}
    .campaignGroupHeroContent{width:100%}
    .heroImageTitle {font-size: 1.75rem;}
    .scroll-x {display: grid; grid-auto-flow: column; gap:1rem; margin:0 0 0 1rem; overflow-x: scroll; padding-bottom:10px;}
    .cardgrid-3to1 {grid-auto-flow: column; gap:1rem; margin:0 0 0 1rem; overflow-x: scroll; padding-bottom:10px;}
    .giftcard-content {min-width: 55dvw;}
    figure{grid-template-columns: 1fr !important; gap: 1rem !important;}
    .dividerSectionTitle {font-size: 1.5rem !important;}
    .walletItem {grid-template-columns: 1fr !important; max-height: max-content !important; }
    .walletItemHeader {display:none !important}
    .pageHeaderSection {grid-template-columns: 1fr; gap: 0rem !important;}
    .pageHeaderTitle { font-size: 2.5rem !important; }
    .collectibleBox {min-width: 50vw; padding: 1.5rem 1rem 1rem 1rem;}
    .sticky {position: unset;}
    .collectibleMiniContain {font-size: 2rem;}
    .spendPointsWidget {grid-template-columns: 1fr;}
    .prizedaw-grid{grid-template-columns: 1fr; grid-template-areas: "sidebar"  "prizes";}
    .gr-sidebarBar {position: relative; top: 0px;}
    .prizeimg, .prizeimg img {  width: 100% !important;}
    /*mobile scroll child*/
    .collectibleBox:nth-last-child(1) {margin-right:1rem;  }
    .giftcard:nth-last-child(1) { margin-right:1rem;  }
    .cwallBox:nth-last-child(1) { margin-right:1rem;  }
    .cwallLargeTitle {font-size: 1.2rem;}
    .cwallBox {width: 75vw;}
    /*blog grid*/
    #summary-view { grid-template-columns: 1fr; margin: 0 1rem;}
    .GL-filters-column {margin: 2rem 1rem;        padding-bottom: 5px;}
    .GL-section-2 #summary-view H4 {min-height: auto; font-size: 1.1rem;}
    /*activitybar*/
    .activityBar { padding: 0.5rem 0;  grid-template-columns: 1fr 1fr;}    
    /* -- hero nav menu --*/   
    /*div.scrollmenu a {font-size: 0.9rem; padding: 0.9rem 1.3rem;} */
    /*div.scrollmenu {gap: 1rem;  margin: 0 1rem 0 1rem;}*/
    /* MegaMenu menu */
    #myVideo {  max-height: 340px;  min-height: 340px;}
    .myvideoOverlay {  width:calc(100% - 0.5rem); margin:2rem 1rem 2rem 0rem;}
    .mm-item{  font-size: 0.9rem; padding: 1rem 1rem;}
    div.horizontalscrollmenu { display: none; }
    /* PD Don Widget */
    .donation-name {height:auto;}
    .draw-name {height:auto;}
    /* Nav Edit */
    .nav-menu {display:none;}
    #heroMenuTabs {display:none;}
    /* Clint Activity Grid */
    .clientActivityGrid{ grid-template-columns:1fr;}
    .heroImageTitle {font-size: 1.2rem;}
    .client1 {min-width: 350px;}
    .client2 {min-width: 350px;}
    .client3 {min-width: 350px;}
    /*cw 2 boxes*/
    .cwall2boxes {grid-template-columns: 1fr;}
    .cwallBox2-inner {grid-template-columns: 1fr;}
    /*Eco Shop*/
    #filtereddata {grid-template-columns:repeat(2, 1fr);}
    .reward-item-info-desc span {-webkit-line-clamp: 3 !important;}
    /*Activity progressbar*/
    .activityBar{ grid-template-columns: 1fr 1fr; grid-template-areas: "act-return   act-points" "act-path   act-path";}
    .optionOutCss {width:80%;}
    .optionOverCss {width:80%;}
    /*video background*/
    .video-container {height: 42vh !important;}
    #myVideo {height: 50vh;}
    /*Tony Slider*/
    .scroll-box {overflow: scroll !important;}
    .activity-tabs {font-size: 1rem;  padding: 0.9rem 1.7rem !important; margin-right: 0rem !important;}
    .activityPageMargin {width: calc(100% - 2rem);}
    .scroll-navigation{display:none;}
    .mah {display: none;}
    /*blog mobile hover*/
    .GL-sum-item-bg {background-image:url(/images/openblogmobile.png) !important}
    /*transparent header*/
    .imageHero {min-height: 45vh;}
    .transparentHeaderLogo{max-width:180px;}
    /*community wall*/
    .cwAuthorBox {"authorpic authorpic" "authorname authorname"  "authorabout authorabout"}
    /*my account*/
    .myAccountGrid {grid-template-areas: "form form" "sidebar sidebar" !important;}

    .whatsNewGrid {grid-template-areas:"wnarrow wnarrow""whatsnew whatsnew";gap: 0;}
    
}
    
    



/* @@@Media Query for low resolution  Tablets, Ipads */
@media (min-width: 681px) and (max-width: 880px) {
    .exploreCampaignGroup {grid-template-columns: 1fr; gap: 0rem;}
    .campaignGroupActivityBoxes{ grid-template-columns: 1fr 1fr 1fr;}
    .page-innerwide { margin: 0 1rem;}
    .cgRewardBoxContainter{grid-template-columns: 1fr 1fr 1fr;}
    .campaignGroupContainer {grid-template-columns: 1fr 1fr;}
    .campaignGroupHeroContent{width:100%}
    .collectibleBox {min-width: 45vw;}
    .spendPointsWidget {grid-template-columns: 1fr;}
    .prizedaw-grid{grid-template-columns: 1fr; grid-template-areas: "sidebar"  "prizes";}
    .gr-sidebarBar {position: relative};
    .prizeimg, .prizeimg img {  width: 100% !important;}
    #summary-view { grid-template-columns: 1fr 1fr; margin: 0 1rem;}
    /* -- hero nav menu --*/   
    /*div.scrollmenu a {font-size: 1.1rem; padding: 1rem 2rem;} */
    div.scrollmenu {gap:1rem;}
    /* MegaMenu menu */
    .myvideoOverlay {  width:100%;}
    .mm-item{  font-size: 1.1rem; padding: 1rem 2rem;}
    div.horizontalscrollmenu { gap: 1rem;  margin: 0 1rem 0 1rem;  }
    /* PD Don Widget */
    .donation-name {height:auto;}
    .draw-name {height:auto;}
    /* Nav Edit */
    .nav-menu {display:none;}
    .nav-buttons {  width: 100% !important;}
   
    /* Clint Activity Grid */
    .clientActivityGrid{ grid-template-columns:1fr 1fr; grid-template-areas: "clientcurrent clientcurrent" "clientprev clientprev2";}
    .heroImageTitle {font-size: 1.2rem;}

    #filtereddata {grid-template-columns: repeat(2, 1fr);}
    .collectibleMiniContain {font-size: 2rem;}
    /*Tony Slider*/
    .scroll-box {overflow-x: scroll !important;}
    .activity-tabs {font-size: 1.1rem;  padding: 1rem 2rem !important;margin-right: 0rem !important;}
    .activityPageMargin {width: calc(100% - 2rem);}
    .mah {display: none;}
    /*blog mobile hover*/
    .GL-sum-item-bg {background-image:url(/images/openblogmobile.png) !important}
    /*my account*/
    .myAccountGrid {grid-template-areas: "form form" "sidebar sidebar" !important;}

    .whatsNewGrid {grid-template-areas:"wnarrow wnarrow""whatsnew whatsnew"; gap: 0;}    

}

/* @@@Media Query for low resolution small Desktops */
@media (min-width: 881px) and (max-width: 1100px) {    
    .cgRewardBoxContainter {grid-template-columns: 1fr 1fr 1fr;}
    .campaignGroupHeroContent{width:100%}    
    /* PD Don Widget */
    figure {grid-template-columns: 1fr !important; gap:0.5rem !important; }
    .donation-name {height:auto;}
    .draw-name {height:auto;}
    /* Clint Activity Grid */
    .clientActivityGrid{ grid-template-columns:1fr 1fr 1fr;}
    .heroImageTitle {font-size: 1.2rem;}
    .mah {display: none;}
    #filtereddata {grid-template-columns: repeat(3, 1fr);}
    .collectibleMiniContain {font-size: 2rem;}
    .activityPageMargin {width: calc(100% - 2rem);}
    
    
}

/* ///////////////////////////  END OF STYLING ////////////////////////// */