/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Custom properties */

:root {
  --font_stack_headings_light: "Poppins Light", serif !important;
  --font_stack_headings_light_weight: 300 !important;
  --font_stack_headings_regular: "Poppins Regular", serif !important;
  --font_stack_headings_regular_weight: 400 !important;
  --font_stack_headings_medium: "Poppins Medium", serif !important;
  --font_stack_headings_medium_weight: 500 !important;
  --font_stack_headings_bold: "Poppins Bold", serif !important;
  --font_stack_headings_bold_weight: 600 !important;
  --font_stack_headings_extra_bold: "Poppins Extra Bold", serif !important;
  --font_stack_headings_extra_bold_weight: 700 !important;
  --font_stack_headings_line_height_headings: 1.75em;

  --font_stack_body: "Poppins Light", serif !important;
  --font_stack_body_weight: 300 !important;
  --font_stack_body_regular: "Poppins Regular", serif !important;
  --font_stack_body_regular_weight: 400 !important;
  --font_stack_body_medium: "Poppins Medium", serif !important;
  --font_stack_body_medium_weight: 600 !important;
  --font_stack_body_bold: "Poppins Bold", serif !important;
  --font_stack_body_bold_weight: 600 !important;
  --font_stack_body_extra_bold: "Poppins Extra Bold", serif !important;
  --font_stack_body_extra_bold_weight: 700 !important;
  --font_stack_body_line_height: 1.75em;

  --font_stack_buttons: "Poppins Regular", serif !important;
  --font_weight_buttons: normal;

  --font_size_body_huge: 2.5rem;
  --font_size_body_xxl: 2rem;
  --font_size_body_xl: 1.75rem;
  --font_size_body_large: 1.5rem;
  --font_size_body_medium: 1.25rem;
  --font_size_body_bigger: 1.0625rem;
  --font_size_body: 1rem;
  --font_size_body_small: 0.875rem;
  --font_size_body_xs: 0.8rem;
  --font_size_body_xxs: 0.725rem;

  --font-family-serif: var(--font_stack_body);
  --font-family-monospace: "Courier New", monospace;

  /* --colour_black: #000000; */
  --colour_black_tint: #161616;
  --colour_grey_darkest: #252627;
  --colour_grey_charcoal: #3a3c40; /* * */ /* colour_white_dark_mode? styledBackgroundGreyLighter, styledBackgroundGrey */
  --colour_grey_charcoal_alt: #46494d; /* * */ /* styledBackgroundGreyAlt */
  --colour_grey_darker: #4c4f54;
  /* --colour_grey_dark: #535860; */
  --colour_grey_medium: #6c7078;
  --colour_grey: #7e848c;
  /* --colour_grey_tint: #979ea8; */
  --colour_grey_light: #a5acb5;
  --colour_grey_light_rgb: 165, 172, 181;
  --colour_grey_lighter: #d3d8e0;
  --colour_grey_lighter_alt: #ccd9e3;
  --colour_grey_faint: #edf0f5;
  --colour_white_shade_alt: #f4f4f4;
  --colour_white_shade: #f7f9fc;
  --colour_white_shade_dark_mode: #404247; /* * */
  --colour_white: #ffffff;
  --colour_red_dark: #481010;
  --colour_red: #621615;
  --colour_red_medium: #9b1c20;
  --colour_red_medium_darken_075: #7b1619;
  --colour_red_medium_alt: #9c1e20;
  --colour_red_bright: #d02323;
  /* --colour_red_light: #f23037; */
  /* --colour_red_gradient_start: #f02425;
  --colour_red_gradient_start_darken_075: #df0f10; */
  --colour_red_gradient_end: #842522;
  --colour_blue_dark: #0b3b59;
  --colour_blue_dark_alt: #072437;
  --colour_blue: #1c71a6;
  --colour_blue_rgb: 28, 113, 166;
  --colour_blue_medium: #134c6f;
  /* --colour_blue_darken_150: #114465; */
  /* --colour_blue_light: #2699e0; */
  /* --colour_blue_faint: #c9d9e3; */
  --colour_blue_gradient_start: #1e78b1;
  --colour_blue_gradient_end: #0f527b;
  --colour_green_dark: #104821;
  --colour_green_dark_alt: #092913; /* * */
  /* --colour_green_dark_light_025: #125226; */
  --colour_green_dark_light_050: #155d2b;
  --colour_green: #15622d;
  /* --colour_green_darken_050: #114d23; */
  /* --colour_green_darken_075: #0e431f; */
  --colour_green_lighten_050: #1a7737;
  /* --colour_green_lighten_100: #1e8c40; */
  /* --colour_green_light: #25ae50; */
  --colour_green_alt_dark: #586657;
  --colour_green_alt: #7c8f7a;
  --colour_green_alt_medium: #aebfad;
  --colour_green_alt_light: #cdd9cc;
  --colour_green_alt_faint: #f2f5f2;
  /* --colour_orange_dark: #b35712; */
  /* --colour_orange: #de6000; */
  /* --colour_orange_medium: #ee8d00; */
  /* --colour_orange_light: #ffa119; */
  /* --colour_orange_faint: #fff3e4; */
  /* --colour_gold_dark: #e09900; */
  --colour_gold: #f3ad1a;
  --colour_gold_alt: #d39000; /* * */
  /* --colour_gold_light: #ffc64d; */
  /* --colour_gold_darken_010: #cf900b; */
  /* --colour_gold_darken_015: #b77f0a; */
  /* --colour_purple_dark: #550e52; */
  /* --colour_purple: #6f126b; */
  /* --colour_purple_light: #bb1eb5; */
  /* --colour_peach_dark: #cca887; */
  --colour_peach: #dab694;
  --colour_peach_light: #ede3d5;
  --colour_peach_faint: #ffebd9;
  --colour_pink_dark: #ddb0ab;
  --colour_pink: #e6c2bf;
  --colour_pink_light: #ede4e3;
  --colour_pink_faint: #f7f0f0;

  /* --blue: --colour_blue;
  --purple: --colour_purple;
  --red: --colour_red;
  --orange: --colour_orange;
  --green: --colour_green;
  --white: --colour_white;
  --gray: --colour_grey;
  --gray-dark: --colour_grey_darker;
  --primary: --colour_red;
  --secondary: --colour_grey_darkest;
  --success: --colour_green;
  --info: --colour_blue;
  --warning: --colour_orange;
  --danger: --colour_red_medium;
  --light: --colour_grey_faint;
  --dark: --colour_grey_darkest; */

  --button_height: 52px;
  --button_height_md: 40px;
  --button_height_sm: 32px;
  --button_padding_block: 0.375rem;
  --button_padding_inline: 1.25rem;
  --button_line-height: 1.5;
  --button_border_width: 2px;
  --button_border_radius: 999px;
  --button_hover_transform: scale(1.075);

  --transition_colour: color 0.3s linear;
  --transition_background: background 0.3s linear;
  --transition_border: border 0.3s linear;
  --transition_box-shadow: box-shadow 0.15s linear;
  --transition_text-shadow: text-shadow 0.15s linear;
  --transition_transform: transform 0.15s linear;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Fonts */

@font-face {
  font-family: "Poppins Light";
  src: url("/fonts/Poppins/Poppins_300.woff2") format("woff2"),
    url("/assets/fonts/Poppins/Poppins_300.woff") format("woff");
  font-display: swap;
}
@font-face {
  font-family: "Poppins Regular";
  src: url("/fonts/Poppins/Poppins_400.woff2") format("woff2"),
    url("/fonts/Poppins/Poppins_400.woff") format("woff");
  font-display: swap;
}
@font-face {
  font-family: "Poppins Medium";
  src: url("/fonts/Poppins/Poppins_500.woff2") format("woff2"),
    url("/fonts/Poppins/Poppins_500.woff") format("woff");
  font-display: swap;
}
@font-face {
  font-family: "Poppins Bold";
  src: url("/fonts/Poppins/Poppins_600.woff2") format("woff2"),
    url("/fonts/Poppins/Poppins_600.woff") format("woff");
  font-display: swap;
}
@font-face {
  font-family: "Poppins Extra Bold";
  src: url("fonts/Poppins/Poppins_700.woff2") format("woff2"),
    url("/fonts/Poppins/Poppins_700.woff") format("woff");
  font-display: swap;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Internal ads */

.appeal {
  --heading-font-family: var(--font_stack_headings_light);
  font-family: var(--font_stack_body);
  font-size: 1rem;

  /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  Backgrounds */

  &.styledBackground.styledBackgroundImage--globeWithMailbox, 
  &.styledBackground.styledBackgroundImage--globeWithMailboxFaded {
    background-repeat: no-repeat;
    background-position: bottom right;
    background-image: url("/assets/ads/globe_with_mailbox_01_832x836.png");
    background-size: auto 50%;
  }
  &.styledBackground.styledBackgroundImage--globeWithMailboxFaded {
    background-image: url("/assets/ads/globe_with_mailbox_01_832x836_faded_@15.png");
  }
  &.styledBackground.styledBackgroundImage--figureOnQuestionMarkFaded {
    background-repeat: no-repeat;
    background-position: center center;
    background-image: url("/assets/ads/figure_on_question_mark_01_960x752_faded.png");
    background-size: auto 85%;
  }
  &.styledBackground.styledBackgroundImage--clockFaded {
    background-repeat: no-repeat;
    background-position: center right;
    background-image: url("/assets/ads/clock_02_960x590_faded.jpg");
    background-size: auto 100%;
    box-shadow: inset 0px 0px 20px var(--colour_white);
  }
  &.styledBackground.styledBackgroundImage--faxMachineFaded {
    background-repeat: no-repeat;
    background-position: center right;
    background-image: url("/assets/ads/fax_machine_01_960x628_faded.jpg");
    background-size: auto 100%;
    box-shadow: inset 0px 0px 20px var(--colour_white);
  }

  .styledBackground {

    &.styledBackground--pinkLight {
      background-color: var(--colour_pink_light) !important;
    }
  }

  /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  Grow on hover */

  .growOnHover:hover {
    transform: scale(1.075);
  }

  /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  Buttons */

  .btn {
    display: inline-block;
    width: auto;
    height: auto;
    min-height: var(--button_height_md);
    padding-inline: var(--button_padding_inline);
    font-family: var(--font_stack_buttons);
    font-size: var(--font_size_body);
    font-weight: normal;
    border-width: var(--button_border_width);
    border-style: solid;
    border-color: var(--colour_red_medium);
    background: var(--colour_red_medium);
    border-radius: var(--button_border_radius);
    transition: 
      color 0.3s linear, 
      background 0.3s linear, 
      border 0.3s linear, 
      box-shadow 0.15s linear, 
      text-shadow 0.15s linear, 
      transform 0.15s linear !important;
  }
    /* States */
    .btn:hover, .btn:focus-visible, .btn:active {
      color: var(--colour_red_medium);
      background-color: var(--colour_white);
      border-color: var(--colour_red_medium);
    }
    .btn.focus, .btn:focus {
      box-shadow: 0 0 0 0.2rem rgba(var(--colour_grey_light_rgb), 0.5);
    }
    .btn.activated {
      color: var(--colour_red_medium);
      background-color: var(--colour_white);
      border-color: var(--colour_red_medium);
    }

  /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  Text */

  .font-weight-extra-bold {
    font-family: var(--font_stack_headings_extra_bold);
    font-weight: var(--font_stack_headings_extra_bold_weight);
    /* font-family: "Poppins Extra Bold", serif !important; */
  }

  h2.text-muted,
  .text-muted h2 {
    color: var(--colour_grey_medium) !important;
  }

  h2.text-large,
  h2.text-larger {
    font-size: var(--font_size_body_huge);
  }
  h3.text-large,
  h3.text-larger {
    font-size: var(--font_size_body_xl);
  }
  h4.text-large,
  h4.text-larger {
    font-size: var(--font_size_body_medium);
  }

  b,
  strong {
    font-family: var(--font_stack_body_medium);
    font-weight: var(--font_stack_body_medium_weight);
    font-weight: bold;
    letter-spacing: 0.25px;
    color: var(--colour_red_medium);
  }

  .text-lg,
  .text-large,
  .text-larger {
    font-size: 120%;
  }
  span.text-lg,
  span.text-large,
  span.text-larger {
    font-size: 120% !important;
  }
  .text-small,
  .text-smaller {
    font-size: 85%;
  }
  .text-small > span,
  .text-smaller > span {
    font-size: inherit;
  }

  /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  Spaced lists */

  ul.spaced, ol.spaced {

    > li + li {
      margin-top: 0.5em;
    }
    > li > p {
      margin-bottom: 0.5em;
    }
  }

  /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  Colours */

  .red,
  .text-red {
    color: var(--colour_red_medium);
  }
  .red-dark,
  .text-red-dark {
    color: var(--colour_red);
  }
  .text-danger {
    /* color: var(--colour_red_medium) !important; */
  }

  /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  Ad styles */

  .appeal__header {

    .appeal__heading {
      text-wrap: balance;
    }
  }
  .appeal__body {
    margin-bottom: 1.5rem;

    .appeal__heading, > p {
      text-wrap: balance;
    }
  }
  .appeal__body .numberPreface {
    position: relative;
    padding-left: 2.25rem;
  }
  .appeal__body .numberPreface::before {
    content: "1";
    display: flex;
    align-items: center;
    position: absolute;
    margin-left: -2.25rem;
    width: 2.25rem;
    height: 100%;
    font-family: var(--font_stack_body_extra_bold);
    font-weight: 700 !important;
    font-size: 2rem;
    color: var(--colour_red_medium);
  }
  .appeal__body .numberPreface:nth-of-type(2)::before {
    content: "2";
  }
  .appeal__footer {
    margin-top: 2rem;
  }
  .appeal__buttonContainer {
    text-align: center;
  }
  .appeal__disclaimer {
    opacity: 0.8;
    margin-top: 1.75rem;
    margin-bottom: 0;
    font-size: 85%;
    line-height: 1.5em;
    text-align: center;
    text-wrap: balance;
  }
  .appeal__image.appeal__image--bottomRight {
    float: right;
  }

  /* Ad button component */
  tracument-ad-button {
    vertical-align: middle;
  }
}
.appeal::after {
  content: "";
  display: block;
  clear: both;
}

/* Default ad #1 */
.appeal.appeal--default-01 {
  padding: 4rem 0 4rem 4rem;

  .appeal__image--globe {
	max-width: 216px;
  }
}
@media only screen and (max-width: 568px) {
  .appeal.appeal--default-01 {
    padding: 2rem 0 0 0;
  }
}
@media only screen and (min-width: 992px) {
  .appeal.appeal--default-01 .appeal__image.appeal__image--bottomRight {
    
  }
}
@media only screen and (max-width: 568px) and (orientation: portrait) {
  .appeal.appeal--default-01 .appeal__image.appeal__image--bottomRight {
    max-width: 45vw;
  }
}

/* Default ad #2 */
.appeal.appeal--default-02 {
  padding: 5rem 4rem;
}
@media only screen and (max-width: 568px) {
  .appeal.appeal--default-02 {
    padding: 2.5rem 2rem;
  }
}

/* Paywall ad #1 */
.appeal.appeal--paywall-01 {
  padding: 4rem 0 4rem 4rem;
}
@media only screen and (max-width: 568px) {
  .appeal.appeal--paywall-01 {
    padding: 2rem 0 2rem 0;
  }
}

/* Paywall ad #2 */
.appeal.appeal--paywall-02 {
  /* padding: 4rem; */
  padding: 4rem 2rem;
}
@media only screen and (max-width: 568px) {
  .appeal.appeal--paywall-02 {
    /* padding: 0 2rem 2rem 2rem; */
    padding: 2rem;
  }
}

/* Secure Send ad #1 */
.appeal.appeal--secure-send-01 {
  padding: 4rem;
}
@media only screen and (max-width: 568px) {
  .appeal.appeal--secure-send-01 {
    padding: 2rem;
  }
}

/* Secure Send ad #2 */
.appeal.appeal--secure-send-02 {
  padding: 4rem;

  .appeal__image--airplane {
	max-width: 240px;
  }
}
@media only screen and (max-width: 568px) {
  .appeal.appeal--secure-send-02 {
    /* padding: 0 2rem 2rem 2rem; */
    padding: 2rem;
  }
}
@media only screen and (min-width: 992px) {
  .appeal.appeal--secure-send-02 .appeal__image.appeal__image--bottomRight {
    /* max-width: 300px; */
  }
}

/* Columns containing ads */
.col.col-12:has(> .appeal) {
  padding: 0;
}
.externalInvoice__appealColumn {
  margin-bottom: 0.625rem;
}
@media only screen and (max-width: 1199px) {
  .externalInvoice__appealColumn {
    margin-top: 2rem;
  }
}