/* ------------------------------------------------------- */
/*     Globals & Variables                                 */
/* ------------------------------------------------------- */

/* Root Variables  */
:root {
  /* Base Colors */
  --purple: #330864;
  --medium-purple: #4b307b;
  --dark-purple: #17032d;
  --header-background: linear-gradient(
    to bottom,
    #d5cbb3 0%,
    #e8e2d4 50%,
    #f5f3ed 100%
  );
  --medium-dark: #444;
  --light-dark: #424242;
  --primary-color: #333;
  --gold: #d2c8b1;
  --dark-gold: #98886a;
  --white: white;

  /* Fonts */
  --primary-font: "Open Sans", sans-serif;
  --secondary-font: "Oxygen", sans-serif;
}

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

body {
  font-family: var(--primary-font);
  font-size: 16px;
  font-style: normal;
  color: var(--primary-color);
}

div#masterContentArea {
  min-height: 48vh;
}

.wrapper {
  display: table;
  width: 100%;
  height: 100%;
}

/* ---------- Global Typography ---------- */
h1,
.h1,
.PageTitle {
  font-size: 32px;
  font-family: var(--secondary-font);
  font-weight: 600;
  margin-top: 0;
  color: var(--purple);
}

h2,
.h2,
.PanelTitle {
  font-family: var(--secondary-font);
  font-size: 28px;
  font-weight: 600;
  color: var(--purple);
}

h3,
.SectionTitle {
  font-family: var(--secondary-font);
  font-size: 20px;
  font-weight: 700;
  color: var(--purple);
}

h4,
.h4,
.SectionLabel {
  font-family: var(--primary-font);
  font-size: 18px;
  font-weight: 700;
  color: var(--purple);
}

h5,
.h5,
.SectionLabelSmaller {
  font-family: var(--primary-font);
  font-size: 16px;
  font-weight: 700;
  color: var(--purple);
}

h6,
.h6 {
  font-family: var(--primary-font);
  font-size: 14px;
  font-weight: 700;
  color: var(--purple);
}

p {
  font-family: var(--primary-font);
  font-size: 16px;
  color: var(--primary-color);
}

a {
  font-family: var(--primary-font);
  text-decoration: none;
  cursor: pointer;
  color: var(--medium-purple);
  font-size: 16px;
  transition: color 0.3s ease;
}

a:visited,
.Link:visited,
.RadGrid.RadGrid .rgRow a:visited,
.RadGrid.RadGrid .rgAltRow a:visited,
.RadGrid.RadGrid .rgEditForm a:visited,
.k-grid.k-grid a:visited,
.RadToolTip.RadToolTip a:visited {
  color: var(--purple);
}

a:hover {
  color: var(--dark-purple);
}

/* ---------- Buttons ---------- */

.btn,
.TextButton,
.RadUpload.RadUpload .ruButton,
.RadUploadProgressArea.RadUploadProgressArea .ruButton {
  padding: 5px 15px;
  font-family: var(--primary-font);
}

.TextButton {
  font-family: var(--primary-font);
  /* background-color: var(--dark-gold);
border-color: transparent;
color: var(--white);
transition: all 0.2s ease-in-out; */
}

.TextButton:hover {
  /* background-color: var(--gold);
border-color: transparent;
color: var(--white); */
}

.PrimaryButton,
.UsePrimaryButton .TextButton,
.RadGrid input.PrimaryButton,
.RadGrid.RadGrid input.TextButton.PrimaryButton,
.RadGrid.RadGrid a.TextButton.PrimaryButton {
  background-color: var(--medium-purple);
}

.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: var(--purple);
}

.PrimaryButton:disabled,
.PrimaryButton:disabled:hover,
.PrimaryButton:disabled:focus,
.PrimaryButton:disabled:active,
.PrimaryButton.disabled,
.PrimaryButton.disabled:hover,
.PrimaryButton.disabled:focus,
.PrimaryButton.disabled:active,
.PrimaryButton.aspNetDisabled,
.PrimaryButton.aspNetDisabled:hover,
.PrimaryButton.aspNetDisabled:focus,
.PrimaryButton.aspNetDisabled:active,
.UsePrimaryButton .TextButton:disabled,
.UsePrimaryButton .TextButton:disabled:hover,
.UsePrimaryButton .TextButton:disabled:focus,
.UsePrimaryButton .TextButton:disabled:active,
.UsePrimaryButton .TextButton.disabled,
.UsePrimaryButton .TextButton.disabled:hover,
.UsePrimaryButton .TextButton.disabled:focus,
.UsePrimaryButton .TextButton.disabled:active,
.UsePrimaryButton .TextButton.aspNetDisabled,
.UsePrimaryButton .TextButton.aspNetDisabled:hover,
.UsePrimaryButton .TextButton.aspNetDisabled:focus,
.UsePrimaryButton .TextButton.aspNetDisabled:active,
.RadGrid input.PrimaryButton:disabled,
.RadGrid input.PrimaryButton:disabled:hover,
.RadGrid input.PrimaryButton:disabled:focus,
.RadGrid input.PrimaryButton:disabled:active,
.RadGrid input.PrimaryButton.disabled,
.RadGrid input.PrimaryButton.disabled:hover,
.RadGrid input.PrimaryButton.disabled:focus,
.RadGrid input.PrimaryButton.disabled:active,
.RadGrid input.PrimaryButton.aspNetDisabled,
.RadGrid input.PrimaryButton.aspNetDisabled:hover,
.RadGrid input.PrimaryButton.aspNetDisabled:focus,
.RadGrid input.PrimaryButton.aspNetDisabled:active,
.RadGrid.RadGrid input.TextButton.PrimaryButton:disabled,
.RadGrid.RadGrid input.TextButton.PrimaryButton:disabled:hover,
.RadGrid.RadGrid input.TextButton.PrimaryButton:disabled:focus,
.RadGrid.RadGrid input.TextButton.PrimaryButton:disabled:active,
.RadGrid.RadGrid input.TextButton.PrimaryButton.disabled,
.RadGrid.RadGrid input.TextButton.PrimaryButton.disabled:hover,
.RadGrid.RadGrid input.TextButton.PrimaryButton.disabled:focus,
.RadGrid.RadGrid input.TextButton.PrimaryButton.disabled:active,
.RadGrid.RadGrid input.TextButton.PrimaryButton.aspNetDisabled,
.RadGrid.RadGrid input.TextButton.PrimaryButton.aspNetDisabled:hover,
.RadGrid.RadGrid input.TextButton.PrimaryButton.aspNetDisabled:focus,
.RadGrid.RadGrid input.TextButton.PrimaryButton.aspNetDisabled:active,
.RadGrid.RadGrid a.TextButton.PrimaryButton:disabled,
.RadGrid.RadGrid a.TextButton.PrimaryButton:disabled:hover,
.RadGrid.RadGrid a.TextButton.PrimaryButton:disabled:focus,
.RadGrid.RadGrid a.TextButton.PrimaryButton:disabled:active,
.RadGrid.RadGrid a.TextButton.PrimaryButton.disabled,
.RadGrid.RadGrid a.TextButton.PrimaryButton.disabled:hover,
.RadGrid.RadGrid a.TextButton.PrimaryButton.disabled:focus,
.RadGrid.RadGrid a.TextButton.PrimaryButton.disabled:active,
.RadGrid.RadGrid a.TextButton.PrimaryButton.aspNetDisabled,
.RadGrid.RadGrid a.TextButton.PrimaryButton.aspNetDisabled:hover,
.RadGrid.RadGrid a.TextButton.PrimaryButton.aspNetDisabled:focus,
.RadGrid.RadGrid a.TextButton.PrimaryButton.aspNetDisabled:active {
  background-color: var(--medium-purple);
}

a:not(.aspNetDisabled):hover .sysicon.sysicon-add:after,
a:not(.aspNetDisabled):focus .sysicon.sysicon-add:after,
a:not(.aspNetDisabled):hover .sysicon--before.sysicon-add:before,
a:not(.aspNetDisabled):focus .sysicon--before.sysicon-add:before,
a:not(.aspNetDisabled):hover .sysicon--after.sysicon-add:after,
a:not(.aspNetDisabled):focus .sysicon--after.sysicon-add:after,
a.sysicon.sysicon-add:not(.aspNetDisabled):hover:after,
a.sysicon.sysicon-add:not(.aspNetDisabled):focus:after,
a.sysicon--before.sysicon-add:not(.aspNetDisabled):hover:before,
a.sysicon--before.sysicon-add:not(.aspNetDisabled):focus:before,
a.sysicon--after.sysicon-add:not(.aspNetDisabled):hover:after,
a.sysicon--after.sysicon-add:not(.aspNetDisabled):focus:after,
button.sysicon.sysicon-add:not([disabled]):hover:after,
button.sysicon--before.sysicon-add:not([disabled]):hover:before,
button.sysicon--after.sysicon-add:not([disabled]):hover:after,
button.sysicon.sysicon-add:not([disabled]):focus:after,
button.sysicon--before.sysicon-add:not([disabled]):focus:before,
button.sysicon--after.sysicon-add:not([disabled]):focus:after {
  background: var(--dark-gold);
}

a:not(.aspNetDisabled):hover .sysicon.sysicon-panel-config:after,
a:not(.aspNetDisabled):focus .sysicon.sysicon-panel-config:after,
a:not(.aspNetDisabled):hover .sysicon--before.sysicon-panel-config:before,
a:not(.aspNetDisabled):focus .sysicon--before.sysicon-panel-config:before,
a:not(.aspNetDisabled):hover .sysicon--after.sysicon-panel-config:after,
a:not(.aspNetDisabled):focus .sysicon--after.sysicon-panel-config:after,
a.sysicon.sysicon-panel-config:not(.aspNetDisabled):hover:after,
a.sysicon.sysicon-panel-config:not(.aspNetDisabled):focus:after,
a.sysicon--before.sysicon-panel-config:not(.aspNetDisabled):hover:before,
a.sysicon--before.sysicon-panel-config:not(.aspNetDisabled):focus:before,
a.sysicon--after.sysicon-panel-config:not(.aspNetDisabled):hover:after,
a.sysicon--after.sysicon-panel-config:not(.aspNetDisabled):focus:after,
button.sysicon.sysicon-panel-config:not([disabled]):hover:after,
button.sysicon--before.sysicon-panel-config:not([disabled]):hover:before,
button.sysicon--after.sysicon-panel-config:not([disabled]):hover:after,
button.sysicon.sysicon-panel-config:not([disabled]):focus:after,
button.sysicon--before.sysicon-panel-config:not([disabled]):focus:before,
button.sysicon--after.sysicon-panel-config:not([disabled]):focus:after {
  background: var(--dark-gold);
}

a:not(.aspNetDisabled):hover .sysicon.sysicon-edit:after,
a:not(.aspNetDisabled):focus .sysicon.sysicon-edit:after,
a:not(.aspNetDisabled):hover .sysicon--before.sysicon-edit:before,
a:not(.aspNetDisabled):focus .sysicon--before.sysicon-edit:before,
a:not(.aspNetDisabled):hover .sysicon--after.sysicon-edit:after,
a:not(.aspNetDisabled):focus .sysicon--after.sysicon-edit:after,
a.sysicon.sysicon-edit:not(.aspNetDisabled):hover:after,
a.sysicon.sysicon-edit:not(.aspNetDisabled):focus:after,
a.sysicon--before.sysicon-edit:not(.aspNetDisabled):hover:before,
a.sysicon--before.sysicon-edit:not(.aspNetDisabled):focus:before,
a.sysicon--after.sysicon-edit:not(.aspNetDisabled):hover:after,
a.sysicon--after.sysicon-edit:not(.aspNetDisabled):focus:after,
button.sysicon.sysicon-edit:not([disabled]):hover:after,
button.sysicon--before.sysicon-edit:not([disabled]):hover:before,
button.sysicon--after.sysicon-edit:not([disabled]):hover:after,
button.sysicon.sysicon-edit:not([disabled]):focus:after,
button.sysicon--before.sysicon-edit:not([disabled]):focus:before,
button.sysicon--after.sysicon-edit:not([disabled]):focus:after {
  background: var(--dark-gold);
}

a:not(.aspNetDisabled):hover .sysicon.sysicon-expanded:after,
a:not(.aspNetDisabled):focus .sysicon.sysicon-expanded:after,
a:not(.aspNetDisabled):hover .sysicon--before.sysicon-expanded:before,
a:not(.aspNetDisabled):focus .sysicon--before.sysicon-expanded:before,
a:not(.aspNetDisabled):hover .sysicon--after.sysicon-expanded:after,
a:not(.aspNetDisabled):focus .sysicon--after.sysicon-expanded:after,
a.sysicon.sysicon-expanded:not(.aspNetDisabled):hover:after,
a.sysicon.sysicon-expanded:not(.aspNetDisabled):focus:after,
a.sysicon--before.sysicon-expanded:not(.aspNetDisabled):hover:before,
a.sysicon--before.sysicon-expanded:not(.aspNetDisabled):focus:before,
a.sysicon--after.sysicon-expanded:not(.aspNetDisabled):hover:after,
a.sysicon--after.sysicon-expanded:not(.aspNetDisabled):focus:after,
button.sysicon.sysicon-expanded:not([disabled]):hover:after,
button.sysicon--before.sysicon-expanded:not([disabled]):hover:before,
button.sysicon--after.sysicon-expanded:not([disabled]):hover:after,
button.sysicon.sysicon-expanded:not([disabled]):focus:after,
button.sysicon--before.sysicon-expanded:not([disabled]):focus:before,
button.sysicon--after.sysicon-expanded:not([disabled]):focus:after {
  background: var(--dark-gold);
}

a:not(.aspNetDisabled):hover .sysicon.sysicon-collapsed:after,
a:not(.aspNetDisabled):focus .sysicon.sysicon-collapsed:after,
a:not(.aspNetDisabled):hover .sysicon--before.sysicon-collapsed:before,
a:not(.aspNetDisabled):focus .sysicon--before.sysicon-collapsed:before,
a:not(.aspNetDisabled):hover .sysicon--after.sysicon-collapsed:after,
a:not(.aspNetDisabled):focus .sysicon--after.sysicon-collapsed:after,
a.sysicon.sysicon-collapsed:not(.aspNetDisabled):hover:after,
a.sysicon.sysicon-collapsed:not(.aspNetDisabled):focus:after,
a.sysicon--before.sysicon-collapsed:not(.aspNetDisabled):hover:before,
a.sysicon--before.sysicon-collapsed:not(.aspNetDisabled):focus:before,
a.sysicon--after.sysicon-collapsed:not(.aspNetDisabled):hover:after,
a.sysicon--after.sysicon-collapsed:not(.aspNetDisabled):focus:after,
button.sysicon.sysicon-collapsed:not([disabled]):hover:after,
button.sysicon--before.sysicon-collapsed:not([disabled]):hover:before,
button.sysicon--after.sysicon-collapsed:not([disabled]):hover:after,
button.sysicon.sysicon-collapsed:not([disabled]):focus:after,
button.sysicon--before.sysicon-collapsed:not([disabled]):focus:before,
button.sysicon--after.sysicon-collapsed:not([disabled]):focus:after {
  background: var(--dark-gold);
}

a:not(.aspNetDisabled):hover .sysicon.sysicon-copy:after,
a:not(.aspNetDisabled):focus .sysicon.sysicon-copy:after,
a:not(.aspNetDisabled):hover .sysicon--before.sysicon-copy:before,
a:not(.aspNetDisabled):focus .sysicon--before.sysicon-copy:before,
a:not(.aspNetDisabled):hover .sysicon--after.sysicon-copy:after,
a:not(.aspNetDisabled):focus .sysicon--after.sysicon-copy:after,
a.sysicon.sysicon-copy:not(.aspNetDisabled):hover:after,
a.sysicon.sysicon-copy:not(.aspNetDisabled):focus:after,
a.sysicon--before.sysicon-copy:not(.aspNetDisabled):hover:before,
a.sysicon--before.sysicon-copy:not(.aspNetDisabled):focus:before,
a.sysicon--after.sysicon-copy:not(.aspNetDisabled):hover:after,
a.sysicon--after.sysicon-copy:not(.aspNetDisabled):focus:after,
button.sysicon.sysicon-copy:not([disabled]):hover:after,
button.sysicon--before.sysicon-copy:not([disabled]):hover:before,
button.sysicon--after.sysicon-copy:not([disabled]):hover:after,
button.sysicon.sysicon-copy:not([disabled]):focus:after,
button.sysicon--before.sysicon-copy:not([disabled]):focus:before,
button.sysicon--after.sysicon-copy:not([disabled]):focus:after {
  background: var(--dark-gold);
}

a,
.Link,
.RadGrid.RadGrid .rgRow a,
.RadGrid.RadGrid .rgAltRow a,
.RadGrid.RadGrid .rgEditForm a,
.k-grid.k-grid a,
.RadToolTip.RadToolTip a {
  color: var(--medium-purple);
}

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: var(--purple);
}

/* ------------------------------------------------------- */
/*     Header Styles                                       */
/* ------------------------------------------------------- */

header {
  position: relative;
  width: 100%;
  background: #f5f1e9;
  padding: 10px 20px;
  position: relative;
  top: 0;
  z-index: 1000;
  transition: padding 0.3s ease-in-out, background-color 0.3s ease-in-out;
}

header.header {
  background: #f5f1e9;
  box-shadow: none;
  display: block;
}

header.sticky {
  position: fixed;
  top: 0;
  background: #f5f1e9;
  top: 0;
  left: 0;
  width: 100%;
  padding: 7px 15px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  animation: slideDown 0.8s ease-in-out;
}

@keyframes slideDown {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}

header.sticky .header-logo img {
  width: 260px;
}

header .header-logo img {
  height: auto;
  width: 320px;
  transition: width 0.3s ease-in-out;
}

div#masterLogoArea {
  display: flex;
  align-items: center;
  justify-content: center;
}

header .nav-auxiliary .nav-text {
  transition: all 0.3s ease !important;
}

header.sticky .nav-auxiliary .nav-text {
  font-size: 14px;
}

@media (max-width: 768px) {
  header {
    padding: 10px 20px 5px;
  }

  header .header-logo img {
    width: 285px;
  }

  header.sticky .header-logo img {
    width: 200px;
  }

  .UtilityNavigation.nav-auxiliary {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
  }
}

@media (min-width: 768px) {
  div#masterLogoArea {
    justify-content: flex-start;
  }
  .RadMenu.RadMenu_Coffee ul.rmRootGroup {
    margin-top: 10px;
    transition: all 0.3s ease;
  }
  header.sticky .RadMenu.RadMenu_Coffee ul.rmRootGroup {
    margin-top: 0;
  }
  .navbar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-height: 52px;
    margin-bottom: 0;
  }
}

/* Center Primary Nav */
/* @media (min-width: 992px) {
  .primary-nav .MainMenu {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 10px !important;
  }
  header.sticky .primary-nav .MainMenu {
    margin-top: 3px !important;
  }
} */

header ul a.rmRootLink {
  font-family: var(--primary-font) !important;
  font-weight: 600 !important;
  color: var(--purple) !important;
  text-decoration: none;
  font-size: 18px !important;
  align-items: center;
  transition: all 0.3s ease !important;
}

.RadMenu.RadMenu_Coffee .rmRootLink.rmExpanded,
.RadMenu.RadMenu_Coffee .rmRootLink:hover,
.RadMenu.RadMenu_Coffee .rmRootLink.rmFocused {
  color: var(--dark-purple) !important;
}

header.sticky ul a.rmRootLink {
  font-size: 16px !important;
}

/* a.rmLink.rmRootLink.OPPManagementLink {
    border: 1px solid var(--purple);
    border-radius: 0;
    margin: 0 3px !important;
} */

/* Utility Navigation */

.header .UtilityNavigation.nav-auxiliary {
  text-align: right;
}

.UtilityNavigation .account-menu > li > a,
.UtilityNavigation .account-menu > li > a:hover,
.UtilityNavigation .account-menu > li > a:visited,
.UtilityNavigation .account-menu > li > a:active {
  transition: all 0.3s ease-in-out;
  color: var(--purple);
}

.account-menu .account-toggle .caret {
  background: var(--purple);
  transition: all 0.3s ease-in-out;
}

@media (min-width: 992px) {
  .account-menu .account-toggle:hover .nav-text,
  .account-menu .account-toggle:focus .nav-text {
    color: var(--dark-purple);
  }
  .account-menu .account-toggle:hover .caret,
  .account-menu .account-toggle:focus .caret {
    background: var(--dark-purple);
  }
}

.account-menu .dropdown-menu > li > a {
  font-weight: 400;
}

.account-menu .dropdown-menu > li > a:hover,
.account-menu .dropdown-menu > li > a:focus {
  background: #fcfaff;
  color: var(--dark-purple);
}

.navbar-toggle,
.obo-toggle,
.ste-toggle,
.page-statistics-toggle,
.searchbar-toggle,
.nav-auxiliary .nav-aux-button.nav-aux-cart .nav-text:before,
a.ste-toggle {
  background: var(--purple);
  margin: 0;
}

@media (min-width: 992px) {
  .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: var(--dark-purple);
  }
}

.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: var(--dark-purple);
}

.navbar-toggle.collapsed,
.obo-toggle.collapsed,
.ste-toggle.collapsed,
.page-statistics-toggle.collapsed,
.searchbar-toggle.collapsed {
  background: var(--purple);
}

/* Mobile */
.RadMenu.RadMenu_Coffee .rmGroup {
  background-color: var(--purple);
}

.RadMenu_Coffee .rmSlide .rmLink {
  color: white;
  font-weight: 500;
  font-family: var(--primary-font);
}

.RadMenu.RadMenu_Coffee .rmTwoLevels .rmLevel1 > .rmItem > .rmLink,
.RadMenu.RadMenu_Coffee
  .rmTwoLevels
  .rmLevel1
  > .rmItem.rmDisabled
  > .rmLink:hover,
.RadMenu.RadMenu_Coffee
  .rmTwoLevels
  .rmLevel1
  > .rmItem.rmDisabled
  > .rmLink:focus {
  color: white;
}

.RadMenu.RadMenu_Coffee .rmTwoLevels .rmLevel1 > .rmItem > .rmLink {
  font-size: 20px;
  font-weight: 700 !important;
  color: var(--gold) !important;
}

.RadMenu.RadMenu_Coffee .rmSlide ul.rmGroup .rmLink:hover,
.RadMenu.RadMenu_Coffee .rmSlide ul.rmGroup .rmFocused,
.RadMenu.RadMenu_Coffee .rmSlide ul.rmGroup .rmExpanded {
  color: var(--gold);
  background: transparent;
}

@media (max-width: 992px) {
  .RadMenu.RadMenu_Coffee .rmLevel1 .rmLink:hover .rmToggle > .rmIcon,
  .RadMenu.RadMenu_Coffee .rmLevel1 .rmLink.rmFocused .rmToggle > .rmIcon,
  .RadMenu.RadMenu_Coffee .rmLevel1 .rmSelected > .rmLink .rmToggle > .rmIcon,
  .RadMenu.RadMenu_Coffee
    .rmLevel1
    .rmFocused
    > .rmLink.rmRootLink
    .rmToggle
    > .rmIcon,
  .RadMenu.RadMenu_Coffee .rmLevel1 .rmExpanded > .rmLink .rmToggle > .rmIcon,
  .RadMenu.RadMenu_Coffee .rmLevel1 .rmLink .rmToggle > .rmIcon {
    background: var(--gold) !important;
    transition: all 0.2s ease-in-out;
  }
}

.RadMenu_Coffee .rmSlide .rmLink:hover,
.RadMenu_Coffee .rmSlide .rmLink:focus,
.RadMenu_Coffee .rmSlide .rmLink.rmFocused,
.RadMenu_Coffee .rmSlide .rmLevel1 > .rmItem > .rmLink:hover,
.RadMenu_Coffee .rmSlide .rmLevel1 > .rmItem > .rmLink:focus,
.RadMenu_Coffee .rmSlide .rmLevel1 > .rmItem > .rmLink.rmFocused {
  background-color: transparent;
  color: var(--gold);
}

/* Responsive design */

/* ------------------------------------------------------- */
/*     Footer Styles                                       */
/* ------------------------------------------------------- */

footer#footer {
  background: var(--medium-purple);
  color: var(--white);
  padding: 40px 30px 25px;
}

#footer .footer-container {
  max-width: 1350px;
  margin: 0 auto;
}

#footer .footer-main {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 30px;
}

#footer .footer-column {
  flex: 1;
  min-width: 200px;
}

#footer .footer-column .col-left {
  text-align: left;
}

#footer .footer-column .col-right {
  text-align: right;
}

#footer .footer-column .col-center {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

#footer .footer-column img {
  width: 150px;
  height: auto;
  margin-bottom: 15px;
}

#footer .footer-column ul {
  list-style: none;
  padding: 0;
}

#footer .footer-column ul li {
  margin-bottom: 18px;
}

#footer .footer-column ul li a {
  color: var(--gold);
  text-decoration: none;
  font-size: 16px;
  font-weight: 600;
  transition: color 0.3s ease;
}

#footer .footer-column ul li a:hover {
  color: var(--dark-gold);
}

#footer .social-icons {
  display: flex;
  justify-content: center;
  gap: 15px;
}

#footer .social-icons a {
  color: var(--gold);
  font-size: 18px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--gold);
  text-decoration: none;
  transition: all 0.3s ease;
}

#footer .social-icons a:hover {
  background-color: var(--gold);
  color: var(--medium-purple);
}

#footer .social-icons a:hover i {
  color: var(--dark-purple);
}

#footer .footer-bottom {
  text-align: center;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

#footer .footer-bottom p {
  line-height: 1.6;
  font-size: 14px;
  margin-bottom: 0;
  color: var(--white);
}

/* Responsive design */
@media (max-width: 992px) {
  #footer .footer-main {
    flex-wrap: wrap;
    justify-content: center;
  }

  #footer .footer-column {
    flex: 1 1 45%;
    margin-bottom: 20px;
  }

  #footer .footer-column.center {
    flex: 1 1 100%;
    order: -1; /* Moves logo to top */
  }
}

@media (max-width: 550px) {
  #footer .footer-main {
    flex-direction: column;
    align-items: center;
  }

  #footer .footer-column.center {
    order: 1;
  }

  #footer .footer-column.left {
    order: 2;
  }

  #footer .footer-column.right {
    order: 3;
  }

  #footer .footer-column img {
    margin: 0 auto 15px;
    display: block;
  }

  #footer .footer-column .col-left,
  #footer .footer-column .col-right {
    text-align: center;
  }
}

/* ------------------------------------------------------- */
/*      Override Styles                                    */
/* ------------------------------------------------------- */

/* Header */
@media (min-width: 992px) {
  .RadMenu.RadMenu_Coffee {
    padding-right: 0;
  }
  .RadMenu.RadMenu_Coffee .rmRootGroup {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }
  .RadMenu.RadMenu_Coffee .rmRootLink {
    border: 1px solid transparent;
    border-radius: 4px;
    display: flex !important;
    justify-content: center;
    align-items: center;
  }
  .RadMenu.RadMenu_Coffee.MegaDropDownMenuOuter ul.rmLevel1 div.rmSlide,
  .RadMenu.RadMenu_Coffee.MegaDropDownMenuOuter
    ul.rmLevel1
    ul.rmVertical
    div.rmSlide {
    min-width: 475px;
  }

  .RadMenu.MegaDropDownMenuOuter ul.rmLevel2 {
    display: flex !important;
    left: auto !important;
    flex-flow: row wrap;
    min-width: 475px;
  }
  .RadMenu.RadMenu_Coffee .rmSlide ul.rmGroup {
    padding: 5px 15px;
  }

  .RadMenu.RadMenu_Coffee .rmSlide ul.rmGroup .rmLink .rmText {
    padding: 7px 10px;
    line-height: 1.4;
    width: 100%;
  }
  .rmLevel1 .rmExpandRight span.rmText {
    padding: 16px 0 0px 0 !important;
  }
  .RadMenu.RadMenu_Coffee .rmSlide ul.rmGroup .rmLink {
    width: 100% !important;
    font-size: 16px;
  }
  .RadMenu.RadMenu_Coffee .rmSlide ul.rmGroup.rmLevel2 {
    margin: 0 0 0 10px;
  }
}

.RadMenu.RadMenu_Coffee .rmToggle .rmIcon,
.RadMenu.RadMenu_Coffee .rmRootGroup .rmRootLink .rmToggle .rmIcon {
  background: var(--purple);
}

.RadMenu.RadMenu_Coffee .rmLink:hover .rmToggle > .rmIcon,
.RadMenu.RadMenu_Coffee .rmLink.rmFocused .rmToggle > .rmIcon,
.RadMenu.RadMenu_Coffee .rmSelected > .rmLink .rmToggle > .rmIcon,
.RadMenu.RadMenu_Coffee .rmFocused > .rmLink.rmRootLink .rmToggle > .rmIcon,
.RadMenu.RadMenu_Coffee .rmExpanded > .rmLink .rmToggle > .rmIcon,
.RadMenu.RadMenu_Coffee .rmSlide .rmLink .rmToggle > .rmIcon {
  background: var(--dark-purple);
  transition: all 0.2s ease-in-out;
}

.RadMenu.RadMenu_Coffee .rmExpanded.rmLink > .rmToggle > .rmIcon {
  background: var(--purple);
  transform: rotate(180deg);
}

.RadMenu.RadMenu_Coffee {
  margin-top: 0;
  margin-bottom: 0;
}

/* Back To Top */
.backToTop {
  display: block;
  font-size: 0;
  color: transparent;
  bottom: 20px;
  position: fixed;
  right: 25px;
  z-index: 1;
  width: 45px;
  height: 45px;
  background: var(--purple) !important;
  border-radius: 50%;
  text-align: center;
  line-height: 48px;
  text-decoration: none;
  transition: all 0.2s ease-in-out;
}

.backToTop:hover {
  background: var(--dark-purple) !important;
}

.backToTop::before {
  content: "\f106";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 24px;
  color: #fff;
  display: inline-block;
  line-height: 46px;
}

/* On Behalf Of */
.OnBehalfOf .obo-panel {
  display: flex;
}
.obo-label {
  margin-right: 5px;
}

.obo-label span {
  color: var(--primary-color);
  font-weight: 600;
}

.obo-actions a {
  color: var(--medium-purple);
  font-weight: 600;
  transition: all 0.3s ease-in-out;
}

.ProxyPanelContact {
  padding: 5px 15px;
  display: flex;
  background-color: var(--medium-purple);
}

.ProxyPanelContact span {
  color: var(--white);
}

.ProxyPanelContact a {
  color: var(--gold);
}

ul.obo-actions,
ul.obo-actions > li {
  list-style: none;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 10px;
}

.obo-action.obo-clear-cart:hover:before {
  background: var(--white);
}

/* Modal */
.RadWindow.RadWindow_MetroTouch .rwTitleRow .rwTitlebar,
.RadWindow.RadWindow_MetroTouch .rwTitleRow .rwTopLeft,
.RadWindow.RadWindow_MetroTouch .rwTitleRow .rwTopRight {
  background-color: var(--purple);
}

/* Tables */
.RadGrid_MetroTouch .rgHeader,
.RadGrid_MetroTouch th.rgResizeCol,
.RadGrid_MetroTouch .rgHeaderWrapper {
  background-color: var(--medium-purple) !important;
}

.RadGrid_MetroTouch .rgHeader,
.RadGrid_MetroTouch .rgHeader a {
  color: white !important;
  font-weight: 600;
  text-decoration: none !important;
}

.RadGrid.RadGrid_MetroTouch .rgPagerCell .rgNumPart a.rgCurrentPage,
.RadGrid.RadGrid_MetroTouch .rgPagerCell .rgNumPart a.rgCurrentPage,
.RadGrid.RadGrid_MetroTouch .rgPagerCell .rgNumPart a.rgCurrentPage:hover,
.RadGrid.RadGrid_MetroTouch .rgPagerCell .rgNumPart a:active,
.RadGrid.RadGrid_MetroTouch .rgPagerCell .rgPagePrev:active,
.RadGrid.RadGrid_MetroTouch .rgPagerCell .rgPageNext:active,
.RadGrid.RadGrid_MetroTouch .rgPagerCell .rgPageFirst:active,
.RadGrid.RadGrid_MetroTouch .rgPagerCell .rgPageLast:active,
.RadGrid.RadGrid_MetroTouch .rgPager .rgPagerCell .rgPagerButton,
.RadGrid.RadGrid_MetroTouch .rgPager .rgPagerCell .rgPagerButton:hover,
.RadGrid.RadGrid_MetroTouch .rgPager .rgPagerCell .rgActionButton:hover,
.RadGrid.RadGrid_Metro .rgPagerCell .rgNumPart a.rgCurrentPage,
.RadGrid.RadGrid_Metro .rgPagerCell .rgNumPart a.rgCurrentPage,
.RadGrid.RadGrid_Metro .rgPagerCell .rgNumPart a.rgCurrentPage:hover,
.RadGrid.RadGrid_Metro .rgPagerCell .rgNumPart a:active,
.RadGrid.RadGrid_Metro .rgPagerCell .rgPagePrev:active,
.RadGrid.RadGrid_Metro .rgPagerCell .rgPageNext:active,
.RadGrid.RadGrid_Metro .rgPagerCell .rgPageFirst:active,
.RadGrid.RadGrid_Metro .rgPagerCell .rgPageLast:active,
.RadGrid.RadGrid_Metro .rgPager .rgPagerCell .rgPagerButton,
.RadGrid.RadGrid_Metro .rgPager .rgPagerCell .rgPagerButton:hover,
.RadGrid.RadGrid_Metro .rgPager .rgPagerCell .rgActionButton:hover {
  background-color: var(--medium-purple);
  border-color: var(--medium-purple);
}

.RadGrid.RadGrid_MetroTouch .rgMasterTable .rgSelectedCell,
.RadGrid.RadGrid_MetroTouch .rgSelectedRow,
.RadGrid.RadGrid_MetroTouch td.rgEditRow .rgSelectedRow,
.RadGrid.RadGrid_MetroTouch .rgSelectedRow td.rgSorted,
.RadGrid.RadGrid_MetroTouch th.rgSorted,
.RadGrid.RadGrid_Metro .rgMasterTable .rgSelectedCell,
.RadGrid.RadGrid_Metro .rgSelectedRow,
.RadGrid.RadGrid_Metro td.rgEditRow .rgSelectedRow,
.RadGrid.RadGrid_Metro .rgSelectedRow td.rgSorted,
.RadGrid.RadGrid_Metro th.rgSorted {
  background-color: var(--purple) !important;
  border-color: var(--purple);
}

.RadGrid_MetroTouch .rgHeader,
.RadGrid_MetroTouch th.rgResizeCol,
.RadGrid_MetroTouch .rgHeaderWrapper,
.RadGrid_MetroTouch .rgMultiHeaderRow th.rgHeader,
.RadGrid_MetroTouch .rgMultiHeaderRow th.rgResizeCol {
  border-bottom: 1px solid var(--medium-purple) !important;
  border-left: 1px solid var(--medium-purple);
}

/* Inputs */
input, button, select, textarea {
  font-family: var(--primary-font);
}

select:focus,
textarea:focus,
.RadInput.RadInput.riSingle .riTextBox:focus,
.RadInput.RadInput .riTextBox:focus,
.RadInput .riTextBox:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus,
.uneditable-input:focus,
.input-fake:focus {
  border-color: var(--medium-purple);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px #4a327293;
}

.chosen-container-active .chosen-choices {
  border: 1px solid var(--medium-purple);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px #4a327293;
}

/* CCOs */
html .RadTabStrip_MetroTouch .rtsLevel1 a.rtsLink {
  background-color: var(--medium-purple);
}

/* ------------------------------------------------------- */
/*     Main Styles                                         */
/* ------------------------------------------------------- */

/* Content Blocks */
.tan-background {
  margin: 0 auto;
  padding: 2.5rem;
  background: #fcfcff;
  border-radius: 12px;
  margin-bottom: 25px;
  /* box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.0125), 0 4px 16px rgba(0, 0, 0, 0.05); */
  box-shadow: 0 0 0 1px white, 0 4px 16px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.tan-background:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.tan-background h2 {
  font-weight: 700;
  color: var(--purple);
  margin-bottom: 1.5rem;
  line-height: 1.3;
  letter-spacing: -0.02em;
}

.tan-background p {
  line-height: 1.6;
  margin: 0;
}

.tan-background p a {
  color: var(--medium-purple);
  font-weight: 600;
  text-decoration: none;
  transition: color 0.2s ease;
}

.tan-background p a:hover {
  color: var(--purple);
  text-decoration: underline;
}

@media (max-width: 768px) {
  .tan-background {
    padding: 1.5rem;
  }
}