/* Define CSS variables for styling based on retrieved branding information */
  :root {
    --font-family: %%=v(@fontFamily)=%;
    --bg-color: %%=v(@bgColor)=%;
    --title-bg-color: #FFD100;
    --channel-preferences-bg-color: #FFD100;
    --footer-bg-color: #efefef;
    --text-color: #222731;
    --channel-pref-title-color: #222731;
    --channel-pref-text-color: #222731;
    --checkmark-border-color: #888B8D;
    --checkmark-bg-color: #F2F2F2;
    --checked-bg-color: #FF6900;
    --checked-border-color: #FF6900;
    --checkmark-color: #FFFFFF;
    --header-color: #001489;
    --footer-text-color: #74777d;
    --pref-btn-bg-color: #FFD100;
    --pref-btn-hover-bg-color: #222731;
    --pref-btn-text-color: #222731;
    --pref-btn-hover-text-color: #FFFFFF;
    --unsub-btn-bg-color: #222731;
    --unsub-btn-hover-bg-color: #FFD100;
    --unsub-btn-text-color: #FFFFFF;
    --unsub-btn-hover-text-color: #222731;
    --optout-text-color: #E4002B;
  }

  /* Apply font family to all text elements */
  h1, h2, h3, h4, p, span, div {
    font-family: var(--font-family);
  }

  /* Style for opt-out text color */
  .optout-text-color {
    color: var(--optout-text-color);
  }

  /* Background color for main sections */
  .bg-color {
    background-color: var(--bg-color) !important;
    padding: 0px;
    margin: auto;
  }

  /* Background color for title sections */
  .title-bg-color {
    background-color: var(--title-bg-color) !important;
  }

  /* Background color for channel preferences section */
  .channel-pref-bg-color {
    background-color: var(--channel-preferences-bg-color) !important;
  }

  /* Text color for channel preference titles */
  .channel-pref-title-color {
    color: var(--channel-pref-title-color) !important;
  }

  /* Text color for channel preference text */
  .channel-pref-text-color {
    color: var(--channel-pref-text-color) !important;
  }

  /* Background color for footer */
  .footer-bg-color {
    background-color: var(--footer-bg-color) !important;
    padding: 0px;
    margin: auto;
  }

  /* Container max width */
  .container {
    max-width: 1400px;
  }

  /* Header styles */
  .h1 {
    font-size: 42px;
    font-weight: 700;
  }

  /* Custom checkbox styles */
  .custom-checkbox {
    display: block;
    position: relative;
    padding-left: 55px;
    margin-bottom: 0px;
    cursor: pointer;
    font-size: 16px;
    user-select: none;
    color: var(--text-color);
  }

  /* Hide default checkbox */
  .custom-checkbox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
    margin-left: 20px;
  }

  /* Checkmark styles */
  .checkmark {
    position: absolute;
    top: 3px;
    left: 0;
    height: 20px;
    width: 20px;
    border-radius: 3px;
    margin-left: 20px;
    border: 1px solid var(--checkmark-border-color);
    background-color: var(--checkmark-bg-color);
  }

  /* Custom checkbox styles for white background */
  .custom-checkbox-white {
    color: var(--channel-pref-text-color) !important;
  }

  /* Styles for checked checkboxes */
  .custom-checkbox input:checked ~ .checkmark {
    border: 1px solid var(--checked-border-color);
    background-color: var(--checked-bg-color);
  }

  /* Checkmark display for checked state */
  .checkmark:after {
    content: "";
    position: absolute;
    display: none;
  }

  /* Display checkmark when checked */
  .custom-checkbox input:checked ~ .checkmark:after {
    display: block;
  }

  /* Checkmark icon styles */
  .custom-checkbox .checkmark:after {
    left: 5px;
    top: 0px;
    width: 7px;
    height: 13px;
    border: solid var(--checkmark-color);
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
  }

  /* Inline checkbox styles */
  .inline-chkbox {
    display: inline-block !important;
    padding-left: 28px !important;
  }

  /* Inline checkmark styles */
  .inline-checkmark {
    margin-left: 0px !important;
  }

  /* Margin for text sections */
  .text-margin {
    margin-top: 60px;
  }

  /* Form label styles */
  .form-label {
    color: var(--text-color);
    font-weight: 700;
    font-size: 16px;
  }

  /* Row padding */
  .row-2 {
    padding-top: 20px;
  }

  /* Paragraph text styles */
  .paragraph-text {
    font-size: 16px;
  }

  /* Footer paragraph text styles */
  .footer-paragraph-text {
    color: var(--footer-text-color);
    font-size: 12px;
    text-align: left;
  }
  
  .font-size-12{
    font-size: 12px;
  }
  
/* Footer paragraph link color */
  .footer-paragraph-color {
    color: var(--footer-text-color);
  }
  
  /* Primary text styles */
  .primary-text-color {
    color: var(--text-color);
  }
  .primary-text-color:hover {
    color: var(--text-color);
  }
  /* Header text styles */
  .h2 {
    font-weight: 700;
    color: var(--header-color);
  }

  /* Header text styles */
  .header-text {
    font-weight: 700;
    color: var(--text-color);
    font-size: 32px;
    margin-bottom: 40px;
    font-family: var(--font-family);
  }

  /* Title text styles */
  .title-css {
    font-weight: 700;
    color: var(--text-color);
    font-size: 42px;
    margin-bottom: 20px;
    font-family: var(--font-family);
  }

  /* Bold text styles */
  .bold {
    font-weight: 700;
  }

  /* Body font family */
  body {
    font-family: var(--font-family);
  }

  /* Input styles */
  input {
    font-size: 16px;
    border-radius: 0px !important;
  }

  /* Submit button styles */
  input[type="submit"] {
    width: 250px;
    height: 48px;
    background: var(--pref-btn-bg-color);
    border-radius: 50px !important;
    border: none;
    color: var(--pref-btn-text-color);
    margin-top: 0px;
    margin-bottom: 0px;
    cursor: pointer;
    font-size: 16px;
    font-family: var(--font-family);
    padding: 12px 30px;
    font-weight: 700;
  }

  /* Submit button hover styles */
  input[type="submit"]:hover {
    background: var(--pref-btn-hover-bg-color);
    border: 1px solid var(--pref-btn-hover-bg-color);
    color: var(--pref-btn-hover-text-color);
  }

  /* Submit button active styles */
  input[type="submit"]:active {
    background: var(--pref-btn-hover-bg-color);
    border: 1px solid var(--pref-btn-hover-bg-color);
    color: var(--pref-btn-hover-text-color);
  }

  /* Unsubscribe button styles */
  .blue-btn {
    background: var(--unsub-btn-bg-color) !important;
    color: var(--unsub-btn-text-color) !important;
  }

  /* Unsubscribe button hover styles */
  .blue-btn:hover {
    background: var(--unsub-btn-hover-bg-color) !important;
    border: 1px solid var(--unsub-btn-hover-bg-color) !important;
    color: var(--unsub-btn-hover-text-color) !important;
  }

  /* Unsubscribe button active styles */
  .blue-btn:active {
    background: var(--unsub-btn-hover-bg-color) !important;
    border: 1px solid var(--unsub-btn-hover-bg-color) !important;
    color: var(--unsub-btn-hover-text-color) !important;
  }

  /* Responsive styles for smaller screens */
  @media only screen and (max-width: 1000px) {
    .h1 {
      font-size: 30px;
    }
  }

  /* Responsive styles for smaller screens */
  @media only screen and (max-width: 685px) {
    input[type="submit"] {
      width: 100% !important;
    }
  }

  /* Responsive styles for smaller screens */
  @media only screen and (max-width: 600px) {
    .h1 {
      font-size: 24px;
    }
  }