/*COSA website styling*/

/* Import Montserrat from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');



/*Fonts*/
* {
    font-family: 'Montserrat', sans-serif !important;
}
:root {
    --aux-link-color: #001d4c;
    --aux-bg: #f7f7f7;
    --nav-color: #000000;
    --system-icon-color: #252E38;
    --system-icon-color-hover: #0088db;
}

h1, .h1, .PageTitle {
    color: #001d4c;
}


/*Header*/

/* header logo */
#masterHeaderImage, .Wrapper-HomePage #masterHeaderImage {
  background-image: url("images/cosa-logo.svg");
}
.backToTop {
    background: #001d4c 5px -223px no-repeat;
}

.backToTop:hover {
    background: #0088db;
}

/*Homepage*/

a.home-membership-btn:hover, a.home-membership-btn:active, a.home-membership-btn:focus {
    background: #0088db;
}
.readMore:hover, .readMore:focus, .readMore:active {
    color: #0088db;
}
.FullWidthArea-StyleBg1 .Spotlight .SectionLabel a {
    color: #001d4c;
}
.FullWidthArea-StyleBg1 .Spotlight .SectionLabel a:hover, .FullWidthArea-StyleBg1 .Spotlight .SectionLabel a:focus, .FullWidthArea-StyleBg1 .Spotlight .SectionLabel a:active {
    color: #0088db;
}

.home-member-tracker .ProgressTracker2 .ProgressTrackerPanel .count {
    color: #001d4c;
}

/*Menu*/

.RadMenu.RadMenu_Coffee .rmSlide ul.rmGroup .rmLink:hover, .RadMenu.RadMenu_Coffee .rmSlide ul.rmGroup .rmFocused, .RadMenu.RadMenu_Coffee .rmSlide ul.rmGroup .rmExpanded {
    color: #0088db;
}
@media (min-width: 992px) {
    .Wrapper-HomePage .RadMenu.RadMenu_Coffee .rmLink:hover, .Wrapper-HomePage .RadMenu.RadMenu_Coffee .rmFocused, .Wrapper-HomePage .RadMenu.RadMenu_Coffee .rmExpanded {
        color: #0088db;
    }
}

@media (min-width: 992px) {
    .Wrapper-HomePage .RadMenu.RadMenu_Coffee .rmRootLink:hover .rmToggle > .rmIcon, .Wrapper-HomePage .RadMenu.RadMenu_Coffee .rmRootLink.rmFocused .rmToggle > .rmIcon, .Wrapper-HomePage .RadMenu.RadMenu_Coffee .rmRootLink.rmExpanded .rmToggle > .rmIcon, .Wrapper-HomePage .RadMenu.RadMenu_Coffee .rmRootLink.rmSelected .rmToggle > .rmIcon {
        background: #0088db;
    }
}

@media (min-width: 992px) {
    .header-aux-container .UtilityAuthentication a:hover, .header-aux-container .UtilityAuthentication a:focus, .header-aux-container .UtilityAuthentication a:hover span, .header-aux-container .UtilityAuthentication a:focus span, .header-aux-container a.NavigationLink:hover, .header-aux-container a.NavigationLink:focus, .header-aux-container a.NavigationLink:hover span, .header-aux-container a.NavigationLink:focus span, .header-aux-container .UtilityNavigation .account-menu > li > a.sign-in-link:hover, .header-aux-container .UtilityNavigation .account-menu > li > a.sign-in-link:focus, .header-aux-container .UtilityNavigation .account-menu > li > a.sign-in-link:hover span, .header-aux-container .UtilityNavigation .account-menu > li > a.sign-in-link:focus span, .header-aux-container .account-toggle .nav-text:hover, .header-aux-container .account-toggle .nav-text:focus, .header-aux-container .account-toggle .nav-text:hover span, .header-aux-container .account-toggle .nav-text:focus span {
        color: #0088db;
    }
}

a, .Link, .RadGrid.RadGrid .rgRow a, .RadGrid.RadGrid .rgAltRow a, .RadGrid.RadGrid .rgEditForm a, .k-grid.k-grid a, .RadToolTip.RadToolTip a {
    color: #007bff;
}
.account-menu .dropdown-menu > li > a:hover, .account-menu .dropdown-menu > li > a:focus {
    color: #0056b3;
}

a:hover, a:focus, a:active, .Link:hover, .Link:focus, .Link:active, .RadGrid.RadGrid .rgRow a:hover, .RadGrid.RadGrid .rgRow a:focus, .RadGrid.RadGrid .rgRow a:active, .RadGrid.RadGrid .rgAltRow a:hover, .RadGrid.RadGrid .rgAltRow a:focus, .RadGrid.RadGrid .rgAltRow a:active, .RadGrid.RadGrid .rgEditForm a:hover, .RadGrid.RadGrid .rgEditForm a:focus, .RadGrid.RadGrid .rgEditForm a:active, .k-grid.k-grid a:hover, .k-grid.k-grid a:focus, .k-grid.k-grid a:active, .RadToolTip.RadToolTip a:hover, .RadToolTip.RadToolTip a:focus, .RadToolTip.RadToolTip a:active {
    color: #0056b3;
}

/*Aux menu*/

@media (min-width: 992px) {
    .account-menu .account-toggle:hover .nav-text, .account-menu .account-toggle:focus .nav-text {
        color: #0088db;
    }
.account-menu .account-toggle:hover .caret, .account-menu .account-toggle:focus .caret {
        background: #0088db;
    }
.nav-auxiliary .nav-aux-button.nav-aux-cart .nav-text:hover, .nav-auxiliary .nav-aux-button.nav-aux-cart .nav-text:focus {
        color: #0088db;
    }
    .nav-auxiliary .nav-aux-button.nav-aux-cart .nav-text:hover:before, .nav-auxiliary .nav-aux-button.nav-aux-cart .nav-text:focus:before {
        background: #0088db;
    }
    .obo-toggle:hover, .obo-toggle:focus, .obo-toggle.on, a.ste-toggle:hover, a.ste-toggle:focus, a.ste-toggle.on, .page-statistics-toggle:hover, .page-statistics-toggle:focus, .page-statistics-toggle.on {
        background: #0088db;
    }
}
.UtilitySearch #SimpleSearchBlock .search-field:focus, .UtilitySearch #SimpleSearchBlock .search-field:hover, .UtilitySearch #SimpleSearchBlock .search-field:active {
    background-color: #001d4c;
}
.Wrapper-HomePage {
    --aux-bg: #f7f7f7;
}

/*Buttons*/
.MediumButton, .UseMediumButton .TextButton {
    border-radius: 0px;
}
.PrimaryButton:hover, .PrimaryButton:focus, .PrimaryButton:active, .UsePrimaryButton .TextButton:hover, .UsePrimaryButton .TextButton:focus, .UsePrimaryButton .TextButton:active, .RadGrid input.PrimaryButton:hover, .RadGrid input.PrimaryButton:focus, .RadGrid input.PrimaryButton:active, .RadGrid.RadGrid input.TextButton.PrimaryButton:hover, .RadGrid.RadGrid input.TextButton.PrimaryButton:focus, .RadGrid.RadGrid input.TextButton.PrimaryButton:active, .RadGrid.RadGrid a.TextButton.PrimaryButton:hover, .RadGrid.RadGrid a.TextButton.PrimaryButton:focus, .RadGrid.RadGrid a.TextButton.PrimaryButton:active {
    background-color: #0088db;
    border-bottom: 4px solid #0088db;
}
.PrimaryButton, .UsePrimaryButton .TextButton, .RadGrid input.PrimaryButton, .RadGrid.RadGrid input.TextButton.PrimaryButton, .RadGrid.RadGrid a.TextButton.PrimaryButton {
    background-color: #001d4c;
    border-bottom: 4px solid #0088db;
}

/*Searches/IQAs*/
.SearchField, .SearchResultSummary .ListItemTitle a {
    background-color: #001d4c;
}
input#ctl01_TemplateBody_WebPartManager1_gwpciEventList_ciEventList_btnGo30b0bc4c {
    background-color: #0088db;
}
.SearchResultSummary .ListItemTitle a:hover {
    background-color: #001d4c;
}
.member-profile .mini-profile-banner-large .mini-profile-name-section .SectionLabel, .member-profile .mini-profile-banner-small .mini-profile-name-section .SectionLabel {
    color: #001d4c;
}
.blue-heading h1, .blue-heading h2, .blue-heading h3, .blue-heading h4, .blue-heading h5, .blue-heading h6 {
    color: #001d4c;
}
.stacked-tabs .select-tab {
    background: #001d4c;
}
html .RadTabStrip_MetroTouch .rtsLevel1 a.rtsLink {
    background-color: #001d4c;
}

/*Footer*/
footer.footer {
    background-color: #001d4c;
}
footer.footer a:hover, footer.footer a:focus {
    color: #0088db;
}
footer.footer a, footer.footer a:hover, footer.footer a:focus, footer.footer a:active, footer.footer a:visited {
    color: #ffffff;
    opacity: 0.75;
}
footer.footer a:hover, footer.footer a:focus {
    color: #fff;
    opacity: 1;
}

/* Temp changes - to be moved into CSS file */
/* Main nav */
:root {
    --aux-link-color: #001d4c;
    --aux-bg: #f7f7f7;
    --nav-color: #121a2f;
    --system-icon-color: #252E38;
    --system-icon-color-hover: #0088db;
}
::selection {
    background: #0088db96;
}
.RadMenu.RadMenu_Coffee .rmRootLink {
    font-size: 20px;
    font-weight: 600;
}
.RadMenu_Coffee .rmSlide .rmLink {
    font-size: 17px;
    font-weight: 600;
}
/* Aux */
.header-aux-container .UtilityAuthentication a, .header-aux-container a.NavigationLink, .header-aux-container .UtilityNavigation .account-menu > li > a.sign-in-link, .header-aux-container .account-toggle .nav-text {
    font-size: 85%;
    font-weight: 500;
}

.UtilitySearch #SimpleSearchBlock .search-field {
    background-position: 4px 2px;
    border-radius: 0px;
    color: var(--nav-color);
    font-size: 80%;
    font-weight: 500;
    border: none;
    border-bottom: 1px solid var(--nav-color);
    background-image: url(/App_Themes/Flat_White/images/auxIcons.svg#search) !important;
    background-size: 16px 18px;
    background-color: rgb(0 0 0 / 0%);
}
.header-aux-container > div {
    max-width: 1788px;
}
.UtilitySearch #SimpleSearchBlock .search-field:focus, .UtilitySearch #SimpleSearchBlock .search-field:hover, .UtilitySearch #SimpleSearchBlock .search-field:active {
    background-color: transparent;
    color: #121a2f8c;
}
.UtilitySearch #SimpleSearchBlock .search-field:focus {
    box-shadow: none;
	padding-right: 0;
}

/* Footer */
footer.footer .footer-content > .container {
    grid-template:
        "navigation contact"
        "copyright copyright" / 0.8fr 2.2fr;
    font-weight: 300;
}
footer.footer .footer-content > .container .footer-column:nth-child(3) {
    padding-right: 6em;
    font-size: 14px;
    color: #fff;
    font-weight: 300;
}
/* Home */
.Spotlight {
    background: #ffffff;
    padding: 30px 15px;
    border-radius: 4px;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
    border: 1px solid #dbdbdb;
}
.Spotlight-desc p {
    height: 150px;
}
.Spotlight-image {
    height: 200px;
}
@media (min-width: 992px) {
    .Wrapper-HomePage {
        --nav-color: #121a2f;
    }
}

.Wrapper-HomePage header.header .header-background-container:before {
    background-image: linear-gradient(to bottom, rgb(255 255 255) 0, rgb(255 255 255) 100%);
    background-repeat: repeat-x;
    height: 8em;
}
.Wrapper-HomePage header.header .header-background-container .carousel-inner .item:after {
    background: rgb(51 51 51 / 25%);
}

.header-background-container .item.active {
    background-position: 80% bottom !important;
}


/* Sign In */
.COSA-login h2 {
    margin-left: 20px;
}
.SignIn {
    max-width: 24em;
    background: #f7f7f7;
}
div#ctl01_TemplateBody_WebPartManager1_gwpciLogin_ciLogin_SignInRefreshPanel {
    background: #f7f7f7;
    margin: 0 20px;
    padding-top: 30px;
}
.COSA-LoginHelp {
    padding: 0 50px 20px 50px;
    background: #f7f7f7;
    margin: -10px 30px 0 30px;
}
span#ctl01_TemplateBody_WebPartManager1_gwpciLogin_ciLogin_forgotPasswordUser a {
    color: var(--nav-color);
}
div#ctl01_TemplateBody_WebPartManager1_gwpciLogin_ciLogin_accountLinkDiv a {
    color: var(--nav-color);
}
div#ste_container_ciLogin {
    margin-bottom: 0;
    border-right: solid 1px #d3d3d3;
}
div#ste_container_ciLoginHelpText_0905db5491464ad8a0b36fae71bd20db {
    border-right: solid 1px #d3d3d3;
}
.RegisterSection {
    background: #001d4c;
    padding: 50px 40px;
    color: #fff;
    margin-right: 5em;
    font-size: 30px;
    font-weight: 600;
    margin-top: 20px;
}
.RegisterSection a.TextButton.PrimaryButton {
    width: 100%;
    border-top: 1px solid rgba(255, 255, 255, .2);
    border-left: 1px solid rgba(255, 255, 255, .2);
    border-right: 1px solid rgba(255, 255, 255, .2);
}
.RegisterSection p {
    margin-bottom: 0.9em;
}
/* Mobile */
@media (max-width: 991px) {
    #masterHeaderImage {
        width: 250px;
        height: 90px;
        margin: 10px 0px;
        background-size: contain;
        position: relative;
    }
	.Wrapper-HomePage header.header .header-background-container:before {
    height: 1em;
}
/*footer.footer .footer-content > .container {
    grid-template:
        "navigation contact"
        "copyright copyright" / 1fr 1fr;
}*/
    footer.footer .footer-content > .container {
        display: grid
;
        grid-template-areas:
        "navigation"
        "contact"
        "copyright";
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        gap: 1rem;
    }
.RegisterSection {
    margin-right: 0;
}
}

/*Cart page*/
.CartCharges .GrandTotal .PanelField .Label {
    color: #0088db;
}
.CartCharges .GrandTotal .PanelField {
    color: #0088db;
}
/*Profile*/
.RadTreeView.GLE a:hover, .RadTreeView.GLE a:focus, .RadTreeView.GLE span[onclick]:hover, .RadTreeView.GLE span[onclick]:focus {
    background-color: #001d4c;
    color: #fff;
}

/* Bluesky icon - footer*/

.SocialSprite.BlueskyIcon {
  position: relative;
  width: 40px;  /* adjust to your icon size */
  height: 40px;
  background-color: #252E38; /* base background */
  border-radius: 50%; /* optional: make it circular */
  text-indent: -9999px; /* hide "Bluesky" text */
  overflow: hidden;
}

.SocialSprite.BlueskyIcon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  transform: translate(-50%, -50%);
  
  /* mask properties */
  -webkit-mask-image: url("/images/COSA/Icons/Bluesky_Logo.svg");
  mask-image: url("/images/COSA/Icons/Bluesky_Logo.svg");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;

  /* color fill */
  background-color: #fff;
}

/* hover effects */
.SocialSprite.BlueskyIcon:hover {
  background-color: #fff;
}

.SocialSprite.BlueskyIcon:hover::after {
  background-color: #252E38;
}

.SocialSprite.BlueskyIcon {
    position: relative;
    background-color: #ffffff !important; /* white background, like YouTube */
    overflow: hidden;
}

/* The icon mask itself */
.SocialSprite.BlueskyIcon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18px;
    height: 18px;
    transform: translate(-50%, -50%);
    
    /* mask setup */
    -webkit-mask-image: url("/images/COSA/Icons/Bluesky_Logo.svg");
    mask-image: url("/images/COSA/Icons/Bluesky_Logo.svg");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    
    /* icon color */
    background-color: #252E38; /* Bluesky brand dark tone */
}

/* Hover effect ???????? inverted like other icons */
.SocialSprite.BlueskyIcon:hover {
    background-color: #252E38 !important;
}

.SocialSprite.BlueskyIcon:hover::after {
    background-color: #1DA1F2;
}

/* Duplicate of nav-aux-account, but keeps text visible on mobile */
.nav-auxiliary .nav-aux-button.nav-aux-account-text .NavigationLink {
  width: auto;
  height: auto;
  border-radius: 0;
  padding-left: 0;
  padding-right: 0;
  margin-left: 0;
  border: 1px solid transparent;
  background-color: transparent;
  text-align: center;
}

.header-dark .nav-auxiliary .nav-aux-button.nav-aux-account-text .NavigationLink {
  background-color: transparent;
}

.nav-auxiliary .nav-aux-button.nav-aux-account-text .nav-text {
  display: inline-block;
  vertical-align: middle;
  background-repeat: no-repeat;
  height: 30px;
  min-width: 30px;
  line-height: 30px;
  overflow: hidden;
  margin-top: 9px;
  margin-bottom: 9px;
  background-position: -986px -76px; /* same as account icon */
  padding-left: 27px;
  color: inherit; /* ensure text colour is visible */
  font: inherit;
  text-shadow: none;
Padding-top:1.5pt;
}

/* Hover effects (same as .nav-aux-account) */
@media (max-width: 991px) {
  .nav-auxiliary .nav-aux-button.nav-aux-account-text .NavigationLink:hover,
  .nav-auxiliary .nav-aux-button.nav-aux-account-text .NavigationLink:focus {
    background-color: transparent;
  }

  .header-dark .nav-auxiliary .nav-aux-button.nav-aux-account-text .NavigationLink:hover,
  .header-dark .nav-auxiliary .nav-aux-button.nav-aux-account-text .NavigationLink:focus {
    background-color: rgba(255, 255, 255, 0.1);
  }

  /* Unlike .nav-aux-account, keep the text on mobile ???????? remove icon reset */
  .nav-auxiliary .nav-aux-button.nav-aux-account-text .nav-text {
    width: auto;
    height: auto;
    padding-left: 27px;
    font: inherit;
    color: inherit;
    text-shadow: none;
    background-color: transparent;
  }
}

@media (min-width: 992px) {
  .nav-auxiliary .nav-aux-button.nav-aux-account-text .NavigationLink {
    width: auto;
  }
}
@media (max-width: 991px) {
    .nav-auxiliary .nav-aux-button.nav-aux-cart .NavigationLink, .nav-auxiliary .nav-aux-button.nav-aux-account .NavigationLink {
        margin-top: 7px;
        margin-right: 5px;
    }
.nav-auxiliary .nav-aux-button.nav-aux-cart .cartFull {
    left: 10px;
}
}

/* Reducing hero slider */
.Wrapper-HomePage header.header .header-background-container {
    height: 550px;
}
.Wrapper-HomePage header.header .header-background-container .carousel-caption {
    top: 60%;
}
header.header .header-logo-container {
    
    margin-left: 28%!important;
}

@media (min-width: 1380px) {
    header.header .header-logo-container {
        justify-self: normal!important;
    }
}
.ErrorPageContainer h2 {
    font: 8em 'Cookie', serif !important;
}

body {
    font-family: "Poppins", Helvetica, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: #222222;
}
    .GroupBanner{
    max-width: 100vw !important;
    height: auto !important;
    margin-left: -20%;
    }
    @media (min-width: 992px) {
    body:not(.Wrapper-HomePage) .body-container > div {
    padding: 30px;
    
    }
    }
    .container {
    max-width: 80%;
    margin-right: auto;
    margin-left: auto;
    padding-left: 30px;
    padding-right: 30px;
    }