/*
 * This vars file is based off of Bootstrap. Not all vars are used.
 *
 * The most obviously unused ones (e.g., modal windows, etc) were removed.
 * There are some vars that remain that are not actually used but
 * perhaps should be. E.g. using dropdown colours.
 */
/******************************
 Greyscale colours
 *******************************/
/******************************
 Colours
 ******************************/
/* COULD NOT LOAD FILE (../../../../../../node_modules/font-awesome/scss/variables) */
/* COULD NOT LOAD FILE (../../../../../../node_modules/font-awesome/scss/mixins) */
/*
 Use these classnames in your HTML markup:
 as-no-dpui:
 Add to things that are meant to be displayed when NOT using enhanced UI controls. These are fallback controls.
 as-dpui:
 Add to things that ARE enhanced controls. These are typically added during pageload with JS.
 with-dpx:
 Add to containers that may or may not contain enhanced controls.
 The contents of these elements are hidden until after the page is done loading. This
 reduces the "flash" as JS runs to enhance controls.
 If there are many elements on a page, you might consider putting this on a 'high'
 parent (e.g., a <form>) to hide the entire contents until page load.
 */
body .as-no-dpui {
  display: block; }

body .as-dpui {
  display: none; }

body.with-dpui .as-no-dpui {
  display: none; }

body.with-dpui .as-dpui {
  display: block; }

body.with-js .with-dpx {
  visibility: hidden; }

body.with-js .with-dpx {
  visibility: hidden; }

.without-dpui .dpx-placeholder {
  display: none; }

body.with-js.with-dpui.with-pageload-dpx-done .dpx-placeholder {
  display: none; }

body.with-js.without-dpui.with-pageload-done .with-dpx {
  visibility: visible; }

body.with-js.with-dpui.with-pageload-dpx-done .with-dpx {
  visibility: visible; }

:root {
  --brand-primary: #1464ad;
  --danger: #d0021b;
  --warning: #ec764e;
  --neutral: #ffe55d;
  --success: #2eb67d;
  --info: #3a8dde;
  --background-color: #f5fafe;
  --text-color: #02203b;
  --text-color-lighter: #4c4f50;
  --font-family-sans-serif: Inter, Lato, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-family-heading: Inter, Rubik, sans-serif;
  --font-family-monospace: Inter, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --brand-primary-d-75: #10508b;
  --brand-primary-d-100: #0f4a7f;
  --brand-primary-d-125: #0d4374;
  --brand-primary-d-150: #0c3c68;
  --brand-primary-l-100: #197edb;
  --brand-primary-l-250: #55a4eb;
  --brand-primary-l-350: #83bcf1;
  --brand-primary-yiq: #fff;
  --brand-primary-d-75-yiq: #fff;
  --brand-primary-d-100-yiq: #fff;
  --brand-primary-rgb: 20, 100, 173;
  --danger-d-75: #aa0216;
  --danger-d-100: #9d0214;
  --danger-d-125: #910113;
  --danger-d-150: #840111;
  --danger-l-100: #fd0826;
  --danger-yiq: #fff;
  --danger-d-75-yiq: #fff;
  --danger-d-100-yiq: #fff;
  --danger-rgb: 208, 2, 27;
  --warning-d-75: #e85b2b;
  --warning-d-100: #e75220;
  --warning-d-125: #e24b18;
  --warning-d-150: #d64717;
  --warning-l-100: #f19a7c;
  --warning-yiq: #fff;
  --warning-d-75-yiq: #fff;
  --warning-d-100-yiq: #fff;
  --warning-rgb: 236, 118, 78;
  --neutral-d-75: #ffdf37;
  --neutral-d-100: #ffdd2a;
  --neutral-d-125: #ffdb1d;
  --neutral-d-150: #ffd911;
  --neutral-l-100: #ffed90;
  --neutral-yiq: #212529;
  --neutral-d-75-yiq: #212529;
  --neutral-d-100-yiq: #212529;
  --neutral-rgb: 255, 229, 93;
  --success-d-75: #269768;
  --success-d-100: #248d61;
  --success-d-125: #21835a;
  --success-d-150: #1f7953;
  --success-l-100: #47d097;
  --success-yiq: #fff;
  --success-d-75-yiq: #fff;
  --success-d-100-yiq: #fff;
  --success-rgb: 46, 182, 125;
  --info-d-75: #237acf;
  --info-d-100: #2173c4;
  --info-d-125: #1f6db9;
  --info-d-150: #1d67ae;
  --info-l-100: #66a6e5;
  --info-yiq: #fff;
  --info-d-75-yiq: #fff;
  --info-d-100-yiq: #fff;
  --info-rgb: 58, 141, 222;
  --tcl-danger-b-6: #6c010e;
  --tcl-danger-w-6: #e77b88;
  --tcl-danger-w-10: #f6ccd1;
  --tcl-danger-w-9: #f2b8bf;
  --tcl-danger-w-9-d-50: #eea3ac;
  --tcl-danger-b-6-d-100: #3a0107;
  --tcl-info-b-6: #1e4973;
  --tcl-info-w-6: #99c4ee;
  --tcl-info-w-10: #d8e8f8;
  --tcl-info-w-9: #c8dff6;
  --tcl-info-w-9-d-50: #b2d2f2;
  --tcl-info-b-6-d-100: #14304b;
  --tcl-success-b-6: #185f41;
  --tcl-success-w-6: #92d9bb;
  --tcl-success-w-10: #d5f0e5;
  --tcl-success-w-9: #c4ebdb;
  --tcl-success-w-9-d-50: #b2e4cf;
  --tcl-success-b-6-d-100: #0e3625;
  --tcl-warning-b-6: #7b3d29;
  --tcl-warning-w-6: #f5b8a3;
  --tcl-warning-w-10: #fbe4dc;
  --tcl-warning-w-9: #fad9cd;
  --tcl-warning-w-9-d-50: #f7c7b6;
  --tcl-warning-b-6-d-100: #542a1c; }

/*
 Use this template to add custom CSS to your site.
 The code you enter here will be evaluated as SCSS which is an extension of CSS
 that adds nesting features, variables, mixins, inheritance and more.
 Read more about SCSS here: http://sass-lang.com/guide
 */
.dp-po .dp-po-search {
  align-items: center;
  background: linear-gradient(to right, var(--brand-primary-d-100) 0, var(--brand-primary) 49.48%, var(--brand-primary-l-100) 100%);
  display: flex;
  height: 120px;
  justify-content: center;
  position: relative; }

.dp-po .dp-po-main {
  background: var(--background-color);
  min-height: calc(100vh - 274px);
  padding: 50px 0; }

.dp-po .dp-po-search-form input[type=search] {
  background: #fff;
  border: 2px solid var(--brand-primary);
  border-radius: 8px;
  color: var(--text-color-lighter);
  font-family: var(--font-family-heading);
  font-size: 1.436625rem;
  font-weight: 400;
  outline: none;
  padding: 13px 20px 13px 60px;
  width: 100%; }

.dp-po .dp-po-navigation-block-link {
  align-items: flex-start;
  background: #fff;
  border: 1.5px solid #d3d6d7;
  border-radius: 12px;
  box-shadow: 0 0px 0px rgba(0, 0, 0, 0.15);
  color: var(--text-color);
  display: flex;
  flex-wrap: nowrap;
  height: 140px;
  justify-content: flex-start;
  margin: 0 30px 0 0;
  padding: 20px 20px; }

.dp-po .dp-po-navigation-block-figure {
  align-items: center;
  background: #f7f7f7;
  border-radius: 8px;
  display: flex;
  flex: 0 0 30%;
  height: 100%;
  justify-content: center;
  margin: 0;
  min-height: 48px;
  text-align: center; }

.dp-po .dp-po-navigation-block-title {
  color: var(--brand-primary);
  font-family: var(--font-family-heading);
  font-size: 1.186875rem;
  font-weight: 600; }

/* Add margin-bottom for mobile view */
@media (max-width: 768px) {
  .dp-po .dp-po-navigation-block-list > * {
    margin-bottom: 15px;
    /* Adjust the margin as needed */
    /* Remove margin from the navigation block link in mobile view */ }
  .dp-po .dp-po-navigation-block-link {
    margin: 0; } }

.dp-po .dp-po-title-link .dp-po-title-text {
  color: var(--brand-primary);
  font-weight: 500; }

.dp-po .dp-po-homepage .dp-po-block {
  border-radius: 12px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 0px 0px rgba(0, 0, 0, 0.15);
  padding: 30px; }

.dp-po .dp-po-header .dp-po-brand-name, .dp-po .h1, .dp-po .h2, .dp-po .h3, .dp-po .h4, .dp-po .h5, .dp-po .h6, .dp-po h1, .dp-po h2, .dp-po h3, .dp-po h4, .dp-po h5, .dp-po h6 {
  font-family: var(--font-family-heading), var(--font-family-sans-serif);
  font-weight: 500;
  line-height: 1.5;
  margin-bottom: 0.5rem; }

.dp-po .dp-po-category-title-text {
  color: var(--brand-primary);
  font-family: var(--font-family-heading);
  font-size: 1.436625rem;
  font-weight: 500;
  margin: 0; }

.dp-po .dp-po-news-carousel-day {
  background: #fff;
  border: 1px solid #d3d6d7;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  border-top: none;
  margin: 0;
  padding: 5px 0;
  position: absolute;
  right: 15px;
  text-align: center;
  top: 0;
  width: 60px;
  z-index: 1; }

.dp-po .dp-po-news-carousel-item {
  border: 2px solid #d3d6d7;
  border-radius: 12px;
  display: inline-block;
  list-style: none;
  margin: 0 17px 10px; }

.dp-po .dp-po-news-carousel-photo {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px; }

.dp-po .dp-po-news-carousel-cover {
  background: #f7f7f7;
  border-bottom: 2px solid #d3d6d7;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  margin: -15px -15px 45px;
  min-height: 32px;
  position: relative; }

.dp-po .dp-po-news-carousel-content.with-splash {
  height: 180px; }

.dp-po .dp-po-news-carousel .badge {
  border: 1.5px solid #fff;
  bottom: -17px;
  left: 15px;
  position: absolute; }

.dp-po .badge {
  border-radius: 6px;
  font-size: 0.74925rem;
  font-weight: 700;
  margin: 0 0 2px;
  padding: 7px 10px;
  text-decoration: none; }

.dp-po .dp-po-block {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 0px 0px rgba(0, 0, 0, 0.15);
  padding: 30px; }

.dp-po .dp-po-subscribe-btn {
  align-items: center;
  background: #fff;
  border: 2px solid #d3d6d7;
  border-radius: 8px;
  color: var(--brand-primary);
  display: flex;
  font-family: var(--font-family-sans-serif);
  font-size: 0.874125rem;
  font-weight: 600;
  min-width: 145px;
  outline: none;
  padding: 4px 30px 4px 10px;
  position: relative;
  text-align: left; }

.dp-po .dp-po-sidebar {
  background: #fff;
  border: 1px solid #d3d6d7;
  border-radius: 8px;
  box-sizing: border-box;
  margin: 0 0 20px;
  padding: 20px; }

.dp-po .dp-po-sidebar-title {
  color: var(--text-color-lighter);
  font-family: var(--font-family-heading);
  font-size: 1.186875rem;
  font-weight: 500;
  margin: 0 0 15px; }

.dp-po .dropdown-menu {
  background-clip: padding-box;
  background-color: #fff;
  border: 1px solid #d3d6d7;
  border-radius: 8px;
  color: #212529;
  display: none;
  float: left;
  font-size: 1.125rem;
  left: 0;
  list-style: none;
  margin: 0.125rem 0 0;
  min-width: 10rem;
  padding: 0.5rem 0;
  position: absolute;
  text-align: left;
  top: 100%;
  z-index: 1000; }

.dp-po .dp-po-post-day {
  background: #fff;
  border: 1px solid #d3d6d7;
  border-radius: 8px;
  left: -60px;
  position: absolute;
  text-align: center;
  top: 0;
  width: 60px; }

.dp-po .dp-po-homepage .dp-po-block {
  border-radius: 12px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 0px 0px rgba(0, 0, 0, 0.15);
  padding: 30px; }

.dp-po .dp-po-title-text {
  font-family: var(--font-family-heading);
  font-size: 1.87425rem;
  font-weight: 500;
  margin: 0; }

.dp-po .dp-po-post-meta {
  background: #fff;
  border: 1px solid #d3d6d7;
  border-radius: 8px;
  box-sizing: border-box;
  margin: 0 0 20px;
  padding: 20px; }

.dp-po .dp-po-guides-section {
  background-color: #f5fafe;
  border-top: 1px solid #d3d6d7;
  padding: 30px 0;
  position: relative;
  z-index: 1; }

.dp-po .dp-po-guides-landing {
  background-color: #fff;
  border: 1px solid #d3d6d7;
  border-radius: 10px;
  box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.1);
  min-height: calc(100vh - 135px); }

.dp-po .dp-po-guides-block-main {
  box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.1);
  margin-bottom: 30px; }

.dp-po .dp-po-community-row-icon {
  align-items: center;
  background: #ebe4f2;
  border-radius: 50%;
  display: flex;
  font-size: 40px;
  height: 80px;
  justify-content: center;
  left: 20px;
  position: absolute;
  top: 12px;
  width: 80px;
  z-index: 1; }

.dp-po .dp-po-community-row-item {
  align-items: center;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 0px 0px rgba(0, 0, 0, 0.15);
  display: flex;
  list-style: none;
  margin-top: 50px; }

.dp-po .dp-po-community-row-btn {
  border: 1.5px solid #fff;
  border-radius: 8px;
  color: #fff;
  float: right;
  font-size: 0.874125rem;
  font-weight: 600;
  margin-top: 10px;
  padding: 10px 20px;
  position: relative;
  vertical-align: bottom;
  z-index: 1; }

.dp-po .dp-po-community-title-button {
  align-items: center;
  background: #fff;
  border: 1.5px solid var(--brand-primary);
  border-radius: 4px;
  display: inline-flex;
  float: right;
  justify-content: space-between; }

.dp-po .dp-po-community-title-button-dropdown {
  border-left: 1.5px solid var(--brand-primary);
  padding: 9px 10px;
  text-align: center; }

.dp-po .dp-po-community-create-link {
  align-items: center;
  background: #fff;
  border: 1.5px solid var(--brand-primary);
  border-radius: 8px;
  display: flex;
  font-family: var(--font-family-heading);
  font-size: 1.436625rem;
  font-weight: 400;
  margin-bottom: 25px;
  padding: 8px 20px; }

.dp-po .dp-po-subscribe-large .dp-po-subscribe-btn {
  border: 1.5px solid var(--brand-primary);
  font-family: var(--font-family-heading);
  font-size: 1.436625rem;
  font-weight: 400;
  padding: 8px 50px 8px 20px;
  width: 100%; }

.dp-po .manage-emails-link {
  display: inline-block;
  float: right;
  font-size: 13px;
  font-style: italic;
  font-weight: 500; }

.dp-po .dp-po-guides-card {
  box-shadow: 0 0px 0px rgba(0, 0, 0, 0.15);
  border: 1.5px solid #d3d6d7;
  border-radius: 10px;
  color: var(--text-color);
  display: flex; }

@media (max-width: 768px) {
  .dp-po .dp-po-navigation-block-item:first-child:nth-last-child(n+5) .dp-po-navigation-block-figure, .dp-po .dp-po-navigation-block-item:first-child:nth-last-child(n+5) ~ li .dp-po-navigation-block-figure {
    background: #f7f7f7;
    border-radius: 12px 0 0 12px;
    flex: 0 0 30%;
    height: calc(100% - 12px); } }

@media (max-width: 768px) {
  .dp-po .dp-po-guides-block-header {
    align-items: center;
    background: #f7f7f7;
    border: 1px solid #d3d6d7;
    border-radius: 8px 8px 0 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 10px 20px 15px; }
  .dp-po .dp-po-guides-block-content {
    background: #fff;
    border: 1px solid #d3d6d7;
    border-radius: 0 0 8px 8px;
    border-top: 0 solid #d3d6d7;
    padding: 20px;
    z-index: 1; }
  .dp-po .dp-po-navigation-block-item:last-child a.dp-po-navigation-block-link {
    margin-right: 0px; }
  .dp-po .dp-po-homepage .dp-po-title {
    border-bottom: 1.5px solid #d3d6d7;
    display: flex; }
  .dp-po .dp-po-category-title .dp-po-icon {
    background: transparent;
    /* Set background to transparent */
    border-radius: 50px;
    flex: 0 0 50px;
    height: 30px;
    margin-bottom: 0;
    margin-right: -2px; }
  .dp-po .dp-po-category-title-expand {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    position: absolute;
    right: 15px;
    text-align: center;
    top: 0;
    vertical-align: bottom;
    width: 50px;
    z-index: 1; }
  .dp-po .dp-po-navigation-block-item:first-child:nth-last-child(n+5) .dp-po-navigation-block-link, .dp-po .dp-po-navigation-block-item:first-child:nth-last-child(n+5) ~ li .dp-po-navigation-block-link {
    box-shadow: none;
    height: 90px;
    margin-bottom: -6px;
    padding: 0;
    padding-left: 6px; } }

.dp-po .dp-po-community-header {
  align-items: center;
  border: 0px solid #d3d6d7;
  border-left: none;
  box-shadow: 0 0px 0px rgba(0, 0, 0, 0.15);
  display: flex;
  justify-content: space-between;
  padding-bottom: 10px; }

.dp-po .dp-po-community-channel-tags-link {
  align-items: center;
  background: #fff;
  border: 1.5px solid #d3d6d7;
  border-radius: 24px;
  color: var(--brand-primary);
  display: inline-flex;
  font-family: var(--font-family-heading);
  font-size: 1.186875rem;
  font-weight: 500;
  padding: 6px 20px;
  text-decoration: none; }

.dp-po .dp-po-post-extra-link .dp-po-icon {
  color: var(--text-color-lighter);
  font-size: 20px; }

.dp-po .dp-po-search-form input[type=search] {
  background: #fff;
  border: 2px solid var(--brand-primary);
  border-radius: 8px;
  color: var(--text-color-lighter);
  font-family: var(--font-family-heading);
  font-size: 1.436625rem;
  font-weight: 400;
  outline: none;
  padding: 13px 20px 13px 60px;
  width: 100%; }

.dp-po .dp-po-search-hint {
  background: #fff;
  border: 2px solid var(--brand-primary);
  border-radius: 8px;
  border-top: 2px solid var(--brand-primary);
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.15);
  display: block;
  left: 0;
  position: absolute;
  top: 66px;
  width: 100%;
  z-index: 2;
  overflow: hidden; }

.dp-po .dp-po-search-form input[type=search].opened {
  border-radius: 8px 0 0 8px; }

.dp-po .dp-po-search-form input[type=submit] {
  align-self: stretch;
  background: #fff;
  border: 2px solid var(--grey-dark);
  border-radius: 0 8px 8px 0;
  color: var(--grey-dark);
  font-weight: 600;
  height: 57px;
  left: -10000px;
  margin-left: -2px;
  padding: 0 12px;
  position: absolute;
  top: -10000px; }

.dp-po .dp-po-search-form input[type=search]:focus {
  border-color: var(--grey-dark);
  border-radius: 8px 0 0 8px; }

.dp-po .dp-po-search-sidebar {
  background: #fff;
  border: 1px solid #d3d6d7;
  border-radius: 8px;
  padding: 6px 0; }

.dp-po .form-control {
  background: #f7f7f7;
  border: 2px solid #d3d6d7;
  border-radius: 8px;
  height: auto;
  padding: 7px 15px 6px; }

.dp-pc_field textarea ~ .dp-pc_label, .dp-pc_field .react-select__control {
  border: 2px solid var(--grey-light);
  border-radius: 8px;
  background-color: var(--input-background);
  height: var(--input-height);
  width: 100%;
  font-size: 18px;
  box-shadow: none;
  padding: 0 11px 0 12px; }

.dp-pc_field .dp-pc_file-upload .dp-pc_file-upload__dropzone {
  border: 2px dashed var(--checkbox-border);
  border-radius: 8px;
  display: inline-block;
  padding: 10px;
  cursor: pointer;
  width: 100%; }

.dp-pc_field .dp-pc_file-upload .dp-pc_file-upload__dropzone .choose {
  border: 2px solid var(--checkbox-border);
  border-radius: 8px;
  padding: 10px;
  display: inline-block; }

.dp-po .btn-primary {
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
  color: var(--brand-primary-yiq); }

.dp-po .dp-po-news-listing-link {
  align-items: center;
  border: 2px solid #d3d6d7;
  border-radius: 8px;
  color: var(--text-color);
  display: flex;
  padding: 20px;
  position: relative; }

.dp-po .dp-po-news-listing-date {
  background: #f7f7f7;
  border: 1px solid #d3d6d7;
  border-radius: 8px;
  flex: 0 0 80px;
  font-family: var(--font-family-heading);
  font-size: 1.125rem;
  font-weight: 400;
  height: 100%;
  margin: 0 20px 0 0;
  text-align: center; }

.dp-po .dp-po-guides-search-content-title {
  align-items: center;
  border-bottom: 1px solid var(--brand-primary);
  border-radius: 2px;
  color: var(--text-color);
  cursor: pointer;
  display: flex;
  flex-wrap: nowrap;
  font-family: var(--font-family-heading);
  font-size: 1.062rem;
  font-weight: 600;
  justify-content: flex-start;
  max-width: 100%;
  padding: 11px 10px 11px 0;
  text-transform: uppercase; }

.dp-po .dp-po-guides-search-content-list .chapter {
  font-weight: 600;
  text-transform: uppercase; }

.dp-po .dp-po-community-view-author-link .badge-secondary {
  background-color: #E9ECEF; }

.dp-po .dp-po-community-view-author-link .badge:hover {
  color: var(--brand-secondary-yiq); }

.dropdown-menu.dropdown-menu-right.dp-po-columnfilter-dropdown {
  right: auto; }