button,
input,
select,
textarea, body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-trophy, .icon-bargraph, .icon-sort, .icon-more, .icon-pq, .icon-upload, .icon-edit, .icon-expand, .icon-info {
  overflow: hidden;
  text-indent: -99999px;
}

/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */
/* Document
   ========================================================================== */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */
/**
 * Remove the margin in all browsers.
 */
body {
  margin: 0;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */
/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */
/**
 * Remove the gray background on active links in IE 10.
 */
a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */
/**
 * Remove the border on images inside links in IE 10.
 */
img {
  border-style: none;
}

/* Forms
   ========================================================================== */
/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select { /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */
legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type=checkbox],
[type=radio] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type=search] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */
/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
  display: list-item;
}

/* Misc
   ========================================================================== */
/**
 * Add the correct display in IE 10+.
 */
template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
  display: none;
}

html {
  font-size: 100%;
}

body {
  font-size: 1rem;
}
@media screen and (min-width: 600px) {
  body {
    font-size: 0.875rem;
  }
}
body {
  color: #4A4A4A;
  font-family: "Noto Sans", Arial, Helvetica, sans-serif;
  line-height: 1.3;
}

button,
input,
select,
textarea {
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

h1,
.h1,
.headline {
  font-weight: bold;
  font-size: 1.25rem;
}
@media screen and (min-width: 600px) {
  h1,
  .h1,
  .headline {
    font-size: 1.5rem;
  }
}

h2,
h3,
.h2,
.h3,
.subheader {
  font-size: 1.125rem;
  font-weight: bold;
}

h4,
h5,
.h4,
.h5 {
  font-weight: bold;
  font-size: 1rem;
}
@media screen and (min-width: 600px) {
  h4,
  h5,
  .h4,
  .h5 {
    font-size: 0.875rem;
  }
}

h6,
.h6 {
  font-weight: 400;
  text-transform: uppercase;
  font-size: 0.875rem;
}
@media screen and (min-width: 600px) {
  h6,
  .h6 {
    font-size: 0.75rem;
  }
}

h1 small,
h2 small,
h3 small,
h4 small,
h5 small {
  font-weight: 400;
}

dl,
dt,
dd,
ul,
ol,
p {
  margin: 0;
  padding: 0;
}

ul,
ol {
  margin-bottom: 1rem;
  padding-left: 1.5rem;
}
ul.unstyled,
ol.unstyled {
  list-style: none;
  margin: 0;
  padding-left: 0;
}

p {
  margin-bottom: 1rem;
}

small {
  font-size: 0.75rem;
  line-height: 1.5;
}

.detail-text {
  font-size: 14px;
  color: #9B9B9B;
}

.ellipse-text {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.uppercase {
  text-transform: uppercase;
}

.bold {
  font-weight: 700;
}

a:focus {
  outline: none;
}

a,
.fake-link {
  color: #3D76C5;
  text-decoration: none;
}
a:hover, a:active, a:focus,
.fake-link:hover,
.fake-link:active,
.fake-link:focus {
  text-decoration: underline;
}

*:hover .fake-link {
  text-decoration: underline;
}

/* Section Separators */
hr {
  border: none;
  border-top: 2px solid #E4E4E4;
  clear: both;
  margin: 2em auto;
}
hr.icon {
  border-color: currentColor;
  color: #777777;
  font-size: 32px;
  overflow: visible;
  position: relative;
}
hr.icon:before {
  background-color: #FFFFFF;
  display: inline-block;
  height: 32px;
  width: 32px;
  padding: 0 0.75em;
  position: absolute;
  top: -16px;
  left: 0;
  right: 0;
  margin: auto;
}
hr.hr-primary {
  border-color: #00B265;
  color: #00B265;
}

/**
 * Status Texts
 * Common tags and labels
 */
.status {
  text-transform: uppercase;
}
.status.premium {
  color: #04C8D6;
}
.status.event-passed, .status.disabled, .status.archived {
  color: #D34627;
}
.status.unpublished, .status.geotour {
  color: #02874D;
}
.status.problem {
  color: #D34627;
}

@media screen and (max-width: 320px) {
  [class*=grid-] {
    width: 100%;
  }
}

* {
  box-sizing: border-box;
}

html {
  min-width: 320px;
}

.wrapper {
  margin: 0 5%;
  width: 90%;
}

.container {
  max-width: 1300px;
  margin: 0 auto;
}
.container.flex {
  display: flex;
}

.main {
  background-color: #fff;
}

@media only screen and (min-width: 600px) {
  html {
    height: 100%;
  }
  body {
    min-height: 100%;
    position: relative;
  }
}
@media only screen and (min-width: 1055px) {
  /* =======================
      Full desktop display
     ======================= */
  .wrapper {
    margin: 0 auto;
  }
}
@media only screen and (min-width: 1430px) {
  .wrapper {
    width: 1300px;
  }
}
body,
.content-slide {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

nav,
footer,
.header-mobile {
  flex-shrink: 0;
}

.main {
  flex: 1 0 auto;
}

@media print {
  body,
  .content-slide {
    display: block;
  }
  nav {
    display: none;
  }
}
/**
 * SIDEBAR AD
 *  requires markup like this
 *
 *   div .container.flex
 *      aside .sidebar-ad(.sidebar-left|.sidebar-right)
 *      section
 *          //page content
 */
.sidebar-ad {
  display: none;
  min-width: 180px;
  padding-top: 2em;
}
@media screen and (min-width: 950px) {
  .sidebar-ad {
    display: flex;
  }
}
.sidebar-ad.sidebar-right {
  order: 2;
  flex-flow: column wrap;
  justify-content: flex-start;
  align-items: center;
}
.sidebar-ad.no-padding {
  padding: 0;
}
.sidebar-ad + section {
  padding: 0 0.5em;
  width: 100%;
}

/**
 * LAYOUT COLUMNS
 * an update to 'sidebar-ad' letting you do 3 column
 *
 *  div .container.layout-columns
 *      aside .layout-sidebar (.sidebar-left|.sidebar-right)
 *      section .layout-center
 *      aside .layout-sidebar OPTIONAL (.sidebar-left|.sidebar-right)
 *
 */
.layout-columns {
  display: flex;
  flex-flow: column wrap;
  padding-bottom: 1.5rem;
}
@media screen and (min-width: 600px) {
  .layout-columns {
    padding: 40px 20px 1.5rem;
  }
  .alert + .layout-columns {
    padding-top: 10px;
  }
}
@media screen and (min-width: 950px) {
  .layout-columns {
    flex-flow: row nowrap;
  }
}
.layout-columns .layout-main {
  display: flex;
  flex-flow: row nowrap;
  flex-grow: 1;
  margin-bottom: 100px;
}
@media screen and (min-width: 600px) {
  .layout-columns .layout-main {
    margin-bottom: 0;
  }
}
.layout-columns .layout-sidebar {
  width: 100%;
  flex-flow: column wrap;
  justify-content: center;
  align-items: center;
  margin: 0 0 1.5rem;
}
@media screen and (min-width: 600px) {
  .layout-columns .layout-sidebar {
    margin-right: 0;
    justify-content: flex-start;
  }
}
.layout-columns .layout-sidebar.sidebar-right {
  order: 1;
  display: flex;
  flex-flow: column nowrap;
}
@media screen and (min-width: 600px) {
  .layout-columns .layout-sidebar.sidebar-right {
    max-width: 300px;
  }
}
@media screen and (min-width: 950px) {
  .layout-columns .layout-sidebar.sidebar-right {
    flex-flow: column nowrap;
    max-width: 300px;
  }
}
.layout-columns .layout-sidebar.sidebar-left {
  order: 0;
  min-width: 100%;
  max-width: 300px;
}
@media screen and (min-width: 600px) {
  .layout-columns .layout-sidebar.sidebar-left {
    min-width: 0;
  }
}
.layout-columns .layout-sidebar .advertisement {
  margin: 1.5rem 0;
  text-align: center;
}
.layout-columns .layout-sidebar::after {
  content: "";
  flex: 1;
}
.layout-columns .layout-center {
  width: 100%;
  flex-grow: 1;
  max-width: 660px;
}
@media screen and (min-width: 600px) {
  .layout-columns .layout-center {
    padding: 0 20px;
  }
}

/**
 * Callouts
 * Like a mini-hero. Use these for in-page content callouts, e.g. empty states.
*/
.callout {
  background-color: #F5F5F5;
}

.layout-callout {
  background-color: #F5F5F5;
}
.layout-callout:before, .layout-callout:after {
  content: "";
  display: table;
}
.layout-callout:after {
  clear: both;
}
.layout-callout .callout {
  background-color: #FFFFFF;
  border: 1px solid #E4E4E4;
}

/**
 * HALF-WIDTH CENTERED CONTENT
 */
.presentation-column {
  max-width: 700px;
  margin: 2em auto;
}

.visuallyhidden,
.visually-hidden,
.autohide {
  position: absolute;
  overflow: hidden;
  clip: rect(0 0 0 0);
  height: 1px;
  width: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
}

.hidden {
  display: none;
  visibility: hidden;
}

@media screen and (max-width: 600px) {
  .hide-mobile {
    display: none;
  }
}
@media screen and (min-width: 600px) {
  .hide-desktop {
    display: none;
  }
}
/* -----------------------------------------
   Legacy png icons and such
   TODO: convert these to SVG sprite icons as applicable
 ----------------------------------------- */
.icon-info {
  background: url("../ui-icons/css/png/info.png") no-repeat 0 0;
  background-size: 100%;
  content: "";
  display: inline-block;
  height: 15px;
  width: 15px;
  cursor: pointer;
  vertical-align: middle;
}

.icon-expand {
  background: url("../ui-icons/css/png/expand.png") no-repeat 0 0;
  background-size: 100%;
  content: "";
  display: inline-block;
  height: 20px;
  width: 17px;
  cursor: pointer;
  vertical-align: middle;
}
.icon-expand.active, .active .icon-expand {
  transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
}

.icon-edit {
  background: url("../ui-icons/css/png/edit.png") no-repeat 0 0;
  background-size: 100%;
  content: "";
  display: inline-block;
  height: 40px;
  width: 40px;
}

.icon-upload {
  background: url("../ui-icons/css/png/upload.png") no-repeat 0 0;
  background-size: 100%;
  content: "";
  display: inline-block;
  height: 20px;
  width: 16px;
  background-size: 90%;
}

.icon-pq {
  background: url("../ui-icons/css/png/pocket-quieries.png") no-repeat 0 0;
  background-size: 100%;
  content: "";
  display: inline-block;
  height: 16px;
  width: 16px;
}

.icon-more {
  background: url("../ui-icons/css/png/more.png") no-repeat 0 0;
  background-size: 100%;
  content: "";
  display: inline-block;
  height: 24px;
  width: 24px;
  background-image: url("/app/ui-icons/icons/global/more.svg");
}
.icon-action .icon-more:hover, .icon-action .icon-more:active, .icon-action .icon-more:focus, .icon-more.icon-action:hover, .icon-more.icon-action:active, .icon-more.icon-action:focus {
  background-image: url("/app/ui-icons/icons/global/more-hover.svg");
}

.icon-sort {
  background: url("../ui-icons/css/png/sort.png") no-repeat 0 0;
  background-size: 100%;
  content: "";
  display: inline-block;
  height: 24px;
  width: 24px;
  background-image: url("/app/ui-icons/icons/global/sort.svg");
}
.icon-action .icon-sort:hover, .icon-action .icon-sort:active, .icon-action .icon-sort:focus, .icon-sort.icon-action:hover, .icon-sort.icon-action:active, .icon-sort.icon-action:focus {
  background-image: url("/app/ui-icons/icons/global/sort-hover.svg");
}

.icon-bargraph {
  background-image: url("/app/ui-icons/icons/premium-features/bargraph.svg");
}

.icon-trophy {
  background-image: url("/app/ui-icons/icons/premium-features/trophy.svg");
}

/*
 CSS/SVG icons

 Standalone icons (.icon): currentColor if associated with text.
 Icons inside a button (.btn-icon .icon): $tempest when inactive/$emerald on hover.

 Example:
 <button type="button" class="btn-icon" title="Some Action">
	<svg class="icon">
		<use ... />
	</svg>
 </button>
*/
.btn-icon {
  background: none;
  border: 0;
  color: #4A4A4A;
  cursor: pointer;
  padding: 0;
}
.btn-icon:hover, .btn-icon:focus {
  color: #02874D;
}
.btn-icon .icon {
  height: 24px;
  width: 24px;
  pointer-events: none;
}

.btn-icon .icon-cancel {
  color: #4A4A4A;
  fill: #FFFFFF;
}
.btn-icon:hover .icon-cancel, .btn-icon:active .icon-cancel, .btn-icon:focus .icon-cancel {
  color: #FFFFFF;
  fill: #4A4A4A;
}

/**
 * For svg icons
 */
.icon-svg-fill.evergreen {
  fill: #004D2B;
}
.icon-svg-fill.emerald {
  fill: #02874D;
}
.icon-svg-fill.sea {
  fill: #00B265;
}
.icon-svg-fill.dirt {
  fill: #836344;
}
.icon-svg-fill.dust {
  fill: #83603f;
}
.icon-svg-fill.sand {
  fill: #f8edd4;
}
.icon-svg-fill.sunshine {
  fill: #E0B70A;
}
.icon-svg-fill.poppy {
  fill: #F35C00;
}
.icon-svg-fill.dark-seas {
  fill: #2B7277;
}
.icon-svg-fill.glacier {
  fill: #04C8D6;
}
.icon-svg-fill.sky {
  fill: #3D76C5;
}
.icon-svg-fill.sunset {
  fill: #F38B00;
}
.icon-svg-fill.white {
  fill: #FFFFFF;
}
.icon-svg-fill.cotton {
  fill: #E4E4E4;
}
.icon-svg-fill.cloud {
  fill: #E4E4E4;
}
.icon-svg-fill.storm {
  fill: #777777;
}
.icon-svg-fill.charcoal, .icon-svg-fill.tempest {
  fill: #4A4A4A;
}
.icon-svg-fill.facebook-blue {
  fill: #4267B2;
}
.icon-svg-fill.twitter-blue {
  fill: #1DA1F2;
}
.icon-svg-fill.active-sea {
  outline: none;
}
.icon-svg-fill.active-sea:hover, .icon-svg-fill.active-sea:active, .icon-svg-fill.active-sea:focus {
  fill: #00B265;
}
.icon-svg-fill.active-emerald {
  outline: none;
}
.icon-svg-fill.active-emerald:hover, .icon-svg-fill.active-emerald:active, .icon-svg-fill.active-emerald:focus {
  fill: #02874D;
}
.icon-svg-fill.active-charcoal, .icon-svg-fill.active-tempest {
  outline: none;
}
.icon-svg-fill.active-charcoal:hover, .icon-svg-fill.active-charcoal:active, .icon-svg-fill.active-charcoal:focus, .icon-svg-fill.active-tempest:hover, .icon-svg-fill.active-tempest:active, .icon-svg-fill.active-tempest:focus {
  fill: #4A4A4A;
}

/* ----------------------------------
    Buttons
   ---------------------------------- */
button.no-focus:focus {
  outline: none;
}

.btn-iconsvg {
  display: flex;
}
.btn-iconsvg svg {
  width: 22px;
  height: 22px;
  margin-right: 3px;
}

.btn-remove-file {
  position: absolute;
  top: 6px;
  right: 6px;
}

.btn-clear {
  background: 0;
  border: 0;
  border-radius: 0;
}

.btn {
  appearance: none;
  box-sizing: border-box;
  transition: background-color 0.15s ease-out, border-color 0.15s ease-out, color 0.15s ease-out;
  border: 1px solid;
  cursor: pointer;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: block;
}
.btn svg {
  vertical-align: bottom;
}
.btn:hover, .btn:active, .btn:focus {
  text-decoration: none;
}
.btn.btn-primary {
  background-color: #02874D;
  border-color: #02874D;
  color: #FFFFFF;
  min-width: 150px;
  border-radius: 4px;
}
.btn.btn-primary:hover, .btn.btn-primary:active, .btn.btn-primary:focus {
  background-color: #00B265;
  border-color: #00B265;
}
.btn.btn-primary[disabled], .btn.btn-primary[disabled]:hover, .btn.btn-primary[disabled]:active, .btn.btn-primary[disabled]:focus {
  background-color: #9B9B9B;
  border-color: #9B9B9B;
}
.btn.btn-secondary {
  background-color: transparent;
  border: none;
  color: #4A4A4A;
}
.btn.btn-secondary:hover, .btn.btn-secondary:active, .btn.btn-secondary:focus {
  color: #00B265;
}
.btn.btn-secondary[disabled], .btn.btn-secondary[disabled]:hover, .btn.btn-secondary[disabled]:active, .btn.btn-secondary[disabled]:focus {
  color: #777777;
}
.btn.btn-tertiary {
  background-color: transparent;
  border: 1px solid #3D76C5;
  border-radius: 40px;
  color: #3D76C5;
  font-size: 0.875em;
  padding-left: 20px;
  padding-right: 20px;
  position: relative;
}
.btn.btn-tertiary:hover, .btn.btn-tertiary:active, .btn.btn-tertiary:focus {
  background-color: #3D76C5;
  color: #FFFFFF;
  outline: none;
}
.btn.btn-tertiary[disabled], .btn.btn-tertiary[disabled]:hover, .btn.btn-tertiary[disabled]:active, .btn.btn-tertiary[disabled]:focus {
  background-color: #9B9B9B;
  border-color: #9B9B9B;
}
.btn.btn-tertiary.inverted {
  color: #FFFFFF;
  border-color: #FFFFFF;
}
.btn.btn-tertiary.inverted:hover, .btn.btn-tertiary.inverted:active, .btn.btn-tertiary.inverted:focus {
  background-color: #FFFFFF;
  color: #04C8D6;
  border-color: #04C8D6;
}
.btn.btn-dark {
  background-color: #4A4A4A;
  border-color: #4A4A4A;
  color: #FFFFFF;
  min-width: 150px;
  border-radius: 4px;
}
.btn.btn-dark:hover, .btn.btn-dark:active, .btn.btn-dark:focus {
  background-color: #777777;
  border-color: #777777;
}
.btn.btn-dark[disabled], .btn.btn-dark[disabled]:hover, .btn.btn-dark[disabled]:active, .btn.btn-dark[disabled]:focus {
  background-color: #9B9B9B;
  border-color: #9B9B9B;
}
.btn.btn-danger, .btn.btn-destroy {
  background-color: #D34627;
  border-color: #D34627;
  border-radius: 4px;
  color: #FFFFFF;
}
.btn.btn-danger:hover, .btn.btn-danger:active, .btn.btn-danger:focus, .btn.btn-destroy:hover, .btn.btn-destroy:active, .btn.btn-destroy:focus {
  background-color: rgb(222, 116.25, 93);
  border-color: rgb(222, 116.25, 93);
  outline: none;
}
.btn.btn-danger[disabled], .btn.btn-danger[disabled]:hover, .btn.btn-danger[disabled]:active, .btn.btn-danger[disabled]:focus, .btn.btn-destroy[disabled], .btn.btn-destroy[disabled]:hover, .btn.btn-destroy[disabled]:active, .btn.btn-destroy[disabled]:focus {
  background-color: #9B9B9B;
  border-color: #9B9B9B;
}
.btn.btn-link {
  background: none;
  border: none;
}
.btn.btn-link:hover, .btn.btn-link:active, .btn.btn-link:focus {
  text-decoration: underline;
}
.btn.btn-link[disabled], .btn.btn-link[disabled]:hover, .btn.btn-link[disabled]:active, .btn.btn-link[disabled]:focus {
  color: #9B9B9B;
  text-decoration: none;
}
.btn.full-width {
  width: 100%;
}

.btn-facebook,
.btn-twitter {
  align-items: center;
  border-radius: 4px;
  color: #FFFFFF;
  display: flex;
  justify-content: center;
  text-align: left;
}
.btn-facebook .icon,
.btn-twitter .icon {
  margin-right: 12px;
  vertical-align: middle;
}
.btn-facebook:hover, .btn-facebook:active, .btn-facebook:focus,
.btn-twitter:hover,
.btn-twitter:active,
.btn-twitter:focus {
  color: #FFFFFF;
}

.btn-facebook {
  background-color: #4267B2;
  border-color: #4267B2;
}

.btn-twitter {
  background-color: #1DA1F2;
  border-color: #1DA1F2;
}

.btn-oauth-facebook,
.btn-oauth-google,
.btn-oauth-apple {
  display: flex;
  border-radius: 4px;
  padding: 0 16px;
  align-items: center;
  cursor: pointer;
  border: none;
  text-decoration: none;
}
.btn-oauth-facebook:hover,
.btn-oauth-google:hover,
.btn-oauth-apple:hover {
  text-decoration: none;
}
.btn-oauth-facebook .icon,
.btn-oauth-google .icon,
.btn-oauth-apple .icon {
  height: 24px;
  width: 24px;
  position: absolute;
}
.btn-oauth-facebook span,
.btn-oauth-google span,
.btn-oauth-apple span {
  padding: 12px 40px;
  flex-grow: 1;
  text-align: center;
}

.btn-oauth-google {
  background-color: #FFFFFF;
  color: #757575;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}

.btn-oauth-apple {
  background-color: black;
  color: #FFFFFF;
}

.btn-oauth-facebook {
  background-color: #4267B2;
  color: #FFFFFF;
}

.btn-play-video {
  display: inline-block;
}
.btn-play-video:hover, .btn-play-video:active, .btn-play-video:focus {
  text-decoration: none;
}
.btn-play-video:hover span, .btn-play-video:active span, .btn-play-video:focus span {
  text-decoration: underline;
}
.btn-play-video:hover .icon, .btn-play-video:active .icon, .btn-play-video:focus .icon {
  text-decoration: none;
}
.btn-play-video .icon {
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border: 4px solid #FFFFFF;
  box-sizing: border-box;
  display: inline-block;
  height: 40px;
  margin-right: 0.5em;
  position: relative;
  vertical-align: middle;
  width: 40px;
}
.btn-play-video .icon:before {
  font-size: 18px;
  height: 18px;
  padding-left: 4px;
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.btn-group {
  text-align: left;
  display: flex;
  flex-flow: column wrap;
}
@media screen and (min-width: 480px) {
  .btn-group {
    flex-flow: row nowrap;
    justify-content: center;
  }
  .btn-group input {
    flex-grow: 1;
    margin-bottom: 0;
    margin-right: 10px;
  }
}
.btn-group input {
  width: auto;
}
.btn-group .btn {
  flex-grow: 1;
}
@media screen and (min-width: 480px) {
  .btn-group .btn {
    flex-basis: 150px;
  }
  .btn-group .btn + .btn {
    margin-left: 24px;
  }
}
.btn-group.inline {
  display: block;
  text-align: center;
}
.btn-group.inline .btn {
  min-width: 150px;
  display: inline-block;
}
.btn-group.inline .btn + .btn {
  margin-top: 0;
}
.btn-group.inline-left {
  text-align: left;
}

.btn-group-stacked {
  margin: 1.5rem auto;
}
.btn-group-stacked .btn {
  margin: 0 auto;
}
.btn-group-stacked .btn + .btn {
  margin-top: 1rem;
  margin-left: auto;
}

.pill {
  color: #4A4A4A;
  border: 1px solid #4A4A4A;
  padding: 0.5em 0.75em;
  margin-right: 20px;
  border-radius: 25px;
  font-size: 14px;
  background: transparent;
  line-height: 1;
  transition: background-color 0.15s ease-out, border-color 0.15s ease-out, color 0.15s ease-out;
}
.pill:hover, .pill:active,
.pill .active, .pill:focus {
  border-radius: 25px;
  color: #FFFFFF;
}
.pill.primary {
  color: #FFFFFF;
  border-color: #3D76C5;
}
.pill.primary:hover, .pill.primary:active,
.pill.primary .active, .pill.primary:focus {
  background-color: #3D76C5;
}
.pill.secondary {
  color: #FFFFFF;
  border-color: #04C8D6;
  text-transform: uppercase;
}
.pill.secondary:hover, .pill.secondary:active,
.pill.secondary .active, .pill.secondary:focus {
  background-color: #02874D;
}

/**
* STANDALONE CENTERED PROMPT
*/
.prompt-column > .alert {
  margin: 0;
}
@media screen and (min-width: 600px) {
  .prompt-column {
    max-width: 440px;
    margin: 3rem auto;
  }
  .prompt-column > .alert {
    margin: 1rem 0;
  }
}

.prompt {
  background: #FFFFFF;
  padding: 1.5rem 3rem;
  text-align: center;
}
.prompt h2 {
  font-size: 1.125rem;
  font-weight: bold;
}
.prompt h2:first-child {
  margin-top: 0;
}
.prompt label,
.prompt input,
.prompt .field-validation-error,
.prompt .requirement-list-group {
  text-align: left;
}
.prompt .field-validation-error {
  font-weight: 400;
  line-height: 1.5;
  font-size: 0.875rem;
}
@media screen and (min-width: 600px) {
  .prompt .field-validation-error {
    font-size: 0.75rem;
  }
}
.prompt .field-validation-error {
  display: block;
}
.prompt label {
  margin-top: 1.5rem;
}
.prompt .btn {
  margin: 1.5rem auto 0;
  text-align: center;
}
@media screen and (min-width: 600px) {
  .prompt {
    border: 1px solid #E4E4E4;
    margin: 2rem auto;
  }
  .prompt .btn {
    margin-top: 2rem;
  }
}

/**
 * Passive alert banners
 * Error, success, and info states. Error and success banners should be
 * dismissable by the user. 
 * 
 * Sample markup:
 * <div class="alert alert-info alert-dismissable">
 *     <p>Some text</p>
 *     <button class="btn-close">
 *         <svg class="icon" height="18" width="18">
 *             <use xlink:href="@Url.Content("~/Content/ui-icons/sprites/global.svg#icon-close-currentcolor")" />
 *         </svg>
 *     </button>
 * </div>
 */
.alert.alert-info, .alert.alert-success, .alert.alert-error {
  margin: 16px 0;
  text-align: left;
}

.alert {
  color: #4A4A4A;
  display: block;
  text-align: center;
  padding: 16px;
}
.alert svg {
  vertical-align: bottom;
}
.alert p {
  margin: 0;
}
.alert a {
  color: inherit;
  text-decoration: underline;
}
.alert a:hover, .alert a:focus {
  text-decoration: none;
}
.alert .btn-primary {
  text-decoration: none;
}
.alert ul, .alert li {
  list-style-type: none;
}
.alert.alert-dismissable {
  padding-right: 48px;
  position: relative;
}
.alert.alert-dismissable .btn-close {
  color: #777777;
  line-height: 100%;
  position: absolute;
  top: 16px;
  right: 16px;
  bottom: 16px;
  margin: auto;
}
.alert.alert-dismissable .btn-close:hover, .alert.alert-dismissable .btn-close:focus {
  color: #4A4A4A;
}
.alert.alert-dismissable .icon {
  height: 18px;
  width: 18px;
}
.alert.alert-error {
  background-color: rgb(246.2, 218, 211.8);
  border: 1px solid #D34627;
}
.alert.alert-success {
  background-color: rgb(229.5, 247.3, 239.6);
  border: 1px solid #02874D;
}
.alert.alert-info {
  background-color: rgb(216.2, 227.6, 243.4);
  border: 1px solid #3D76C5;
}

/**
 * ------------------------------------------------------
 * Full bleed banner for new feature messaging, etc
 * ATTN: this is being deprecated
 * ------------------------------------------------------
 *
 * Sample markup:
 * <div class="alert">
 *     <div class="container">
 *          <p>Some text</p>
 *          <a class="btn">Some CTA</a>
 *     </div>
 * </div>
 *
 */
.alert.alert-attention {
  border-color: #3D76C5;
  color: #FFFFFF;
  background-color: #3D76C5;
  overflow: hidden;
  margin: 0;
  padding: 1em;
  text-align: center;
}
@media (min-width: 1055px) {
  .alert.alert-attention {
    padding: 22px;
  }
}
.alert.alert-attention p {
  display: block;
  margin: 0 auto 1em;
}
@media (min-width: 1055px) {
  .alert.alert-attention p {
    display: inline-block;
    margin-bottom: 0;
    margin-right: 3em;
  }
}
.alert.alert-attention .btn {
  border: 2px solid #FFFFFF;
  color: inherit;
  display: inline-block;
  padding: 0.28125rem 1.25rem;
  text-decoration: none;
}
.alert.alert-attention .btn:hover, .alert.alert-attention .btn:active, .alert.alert-attention .btn:focus {
  background-color: #FFFFFF;
  color: #3D76C5;
}

body {
  background-color: #83603f;
  color: #4A4A4A;
  font-family: "Noto Sans", Arial, Helvetica, sans-serif;
}

.wrapper {
  margin: 0 5%;
  max-width: 1300px;
  padding: 1.5rem 1.5rem;
  width: 90%;
}
@media only screen and (min-width: 1055px) {
  .wrapper {
    margin: 0 auto;
  }
}
@media only screen and (min-width: 1140px) {
  .wrapper {
    width: 1030px;
    margin: 0 auto;
  }
}
.alert-cookies .wrapper {
  padding: 0;
}

header, .header {
  font-size: 0.875rem;
  align-items: center;
  background-color: #02874D;
  flex-shrink: 0;
  height: 80px;
  right: 0;
  top: 0;
  width: 100%;
}
header .wrapper, .header .wrapper {
  align-items: center;
  display: flex;
  height: 80px;
  max-width: 1300px;
}

.logo {
  color: #fff;
  display: inline-block;
  fill: currentColor;
  flex: 0 0 216px;
  float: left;
  height: 32px;
  margin-top: 0;
  overflow: hidden;
  width: 216px;
}
.logo:hover, .logo:active, .logo:focus {
  border-bottom: none;
}
.logo svg {
  height: 100%;
  min-width: 100%;
  width: 216px;
}

#Content {
  background-color: #fff;
  font-size: 0.875rem;
}

.WarningMessage {
  padding: 1em;
  background-color: #fccf33;
  border-bottom: 1px solid #000;
  border-bottom: 1px solid rgba(0, 0, 0, 0.5);
}
.WarningMessage p {
  margin-bottom: 0;
}
.WarningMessage a, .WarningMessage a:visited {
  color: #000;
}
.WarningMessage a:hover, .WarningMessage a:active, .WarningMessage a:focus {
  color: #594a42;
}

a {
  color: #3D76C5;
  text-decoration: none;
}
a:hover, a:focus, a:active {
  border-bottom: 1px solid currentColor;
  color: #3D76C5;
  text-decoration: none;
}
a:visited {
  color: #551A8B;
}
a.LinkButton {
  display: inline-block;
  padding: 2px 8px 4px;
  font-weight: bold;
  text-decoration: none;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
a.LinkButton:hover, a.LinkButton:active, a.LinkButton:focus {
  color: #fff !important;
  border: 1px solid #13b5ea;
  background-color: #13b5ea;
}
a.LinkButton, a.LinkButton:visited {
  color: #000 !important;
  border: 1px solid #eaeaea;
  background-color: #eaeaea;
}
.alert-cookies a:hover, .alert-cookies a:focus, .alert-cookies a:active {
  color: #FFFFFF;
}
.alert-cookies a:visited {
  color: #FFFFFF;
}

#Footer {
  background: #836344;
  color: #f8edd4;
  font-size: 0.75rem;
  min-height: 2em;
  width: 100%;
}
.oauth #Footer {
  background: #83603f;
}
.oauth #Footer p {
  margin: 0 auto;
}
#Footer a, #Footer a:visited {
  color: #f8edd4;
  text-decoration: none;
}
#Footer a:hover, #Footer a:active, #Footer a:focus {
  border-bottom: 1px solid;
}
#Footer .links {
  padding: 1em;
  max-width: 1000px;
  margin: 0 auto;
}
#Footer .links:before, #Footer .links:after {
  content: "";
  display: table;
}
#Footer .links:after {
  clear: both;
}
#Footer .copyright {
  background: #83603f;
  line-height: 1.5;
  padding: 1.425em 1em;
  text-align: center;
}
#Footer .copyright > * {
  display: inline-block;
  line-height: 1.86; /* 26/14 */
  margin: 0 0 0.7em 0;
  padding: 0;
  vertical-align: middle;
}
@media screen and (max-width: 599px) {
  #Footer .copyright p {
    margin-bottom: 1.5em;
  }
}
@media screen and (min-width: 600px) {
  #Footer .copyright p {
    margin-right: 3em;
  }
}

.Icon, .Widget.Error h4, .Widget.Success h4 {
  min-height: 16px;
  background: url(/images/tlnMobile/sprite_icons.png) no-repeat;
}

a.Icon, .Icon.Replace {
  display: inline-block;
  width: 16px;
  height: 16px;
  text-indent: -999999px;
}

a.Icon {
  -webkit-transition: none;
  -moz-transition: none;
  -o-transition: none;
  transition: none;
}

span.ValidationContainer .Validation {
  display: inline-block;
}

.Icon.Replace {
  display: block;
  padding-right: 4px;
}

.Icon.Info, a.Icon.Info, a.Icon.Info:link, a.Icon.Info:visited {
  background-position: -208px -144px;
}

a.Icon.Info:hover, a.Icon.Info:active, a.Icon.Info:focus {
  background-position: -144px -208px;
}

.Icon.Close, a.Icon.Close, a.Icon.Close:link, a.Icon.Close:visited {
  background-position: -80px -272px;
  display: block;
}

a.Icon.Close:hover, a.Icon.Close:active, a.Icon.Close:focus {
  background-position: -16px -336px;
}

.Icon.Error, .Widget.Error h4, .Icon.ValidationIcon {
  padding-left: 20px;
  background-position: -336px -16px;
}

.Icon.Error.Replace {
  padding-left: 0;
}

.Icon.ValidationIcon {
  text-indent: -999999px;
  display: inline-block;
}

.Icon.Success, .Widget.Success h4 {
  padding-left: 20px;
  background-position: -272px -80px;
}

h2 + h3 {
  margin-top: 1em;
}

dl dd {
  margin-bottom: 1.5em;
  margin-left: 0;
}

.Warning {
  color: #8c0b0b !important;
}

.Success {
  color: #54b948 !important;
}

legend {
  color: #594a42 !important;
  font-size: 1.2em;
  font-weight: bold;
  padding: 0 0.5em;
}

input.Text, input.SmallText, select.Select, select.SignUpSelect, select.SmallSelect, textarea.TextArea {
  border: 1px solid #4A4A4A;
  color: #000;
  font: 18px "Noto Sans", Arial, Helvetica, sans-serif;
  padding: 8px;
  -webkit-transition: all 0.25s ease-in-out;
  -moz-transition: all 0.25s ease-in-out;
  -o-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
}

input.Text, textarea.TextArea {
  width: 75%;
}

textarea.TextArea {
  height: 150px;
}

select.Select {
  width: 77%;
}
select.SignUpSelect {
  margin: 0 0 0 0.25em;
  width: 90%;
}
select.SmallSelect {
  width: 27%;
}

input.SmallText {
  width: 25%;
}

input.Text:hover, input.Text:focus, input.SmallText:hover,
input.SmallText:focus, select.Select:hover, select.Select:focus,
select.SmallSelect:hover, select.SmallSelect:focus {
  border: 1px solid #00b265;
}

input.Text:active, input.SmallText:active, select.Select:active, select.SmallSelect:active {
  border: 1px solid #6C8E0E;
}

@media screen and (min-width: 480px) {
  .btn:only-child {
    display: inline-block;
  }
}

#recaptcha_area {
  margin-bottom: 1.5em;
}

fieldset select.Select {
  width: 85%;
}
fieldset select.SmallSelect {
  width: 45%;
}
fieldset input.Text {
  width: 70%;
}

.ValidationText {
  color: #D34627 !important;
  display: block !important;
  margin-top: 0.5em;
}

input.Text.input-error {
  border-color: #8c0b0b;
}
input.Text.input-error:hover, input.Text.input-error:active, input.Text.input-error:focus {
  box-shadow: 0 0 2px #b11a1a;
}
input.Text:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 50px white inset; /* Change the color to your own background color */
  -webkit-text-fill-color: #5F452A;
}
input[type=checkbox].input-error {
  box-shadow: 0 0 1px 1px #8c0b0b;
}

p.CloseButton {
  float: right;
}

.SignInWidget {
  margin-bottom: 1.5em;
  padding-bottom: 1em;
  border-bottom: 1px solid #eaeaea;
}
.SignInWidget p {
  margin-bottom: 0;
}

.Widget {
  margin: 1.5em 0.25em;
  padding: 1em;
  border-radius: 5px;
}
.Widget.Information, .Widget.FormInfo {
  border: 1px solid #594a42;
  background-color: #f7f6f5;
}
.Widget.Error {
  color: #8c0b0b !important;
  border: 1px solid #8c0b0b;
  background-color: #f9f3f2;
}
.Widget.Error h4, .Widget.Error li {
  color: #8c0b0b !important;
}
.Widget.Success {
  color: #54b948 !important;
  border: 1px solid #54b948;
  background-color: #f6fbf6;
}
.Widget.Success h4 {
  color: #54b948 !important;
}
.Widget p, .Widget ul {
  margin-bottom: 0;
  padding-left: 20px;
}
.Widget li {
  padding-left: 0px !important;
}
.Widget.FormInfo {
  width: 72%;
}

.oauth {
  text-align: center;
}

.content-block {
  text-align: left;
}

.panel-unsubscribe ul {
  list-style-type: none;
  padding: 0;
}
.panel-unsubscribe ul li {
  padding: 0 1rem;
}
.panel-unsubscribe ul li + li {
  margin-top: 0.75rem;
}
.panel-unsubscribe ul label {
  margin-left: 0.375rem;
}
.panel-unsubscribe .item-unsubscribe {
  border-top: 1px solid #4A4A4A;
  padding-top: 1rem;
}
.panel-unsubscribe .item-unsubscribe label {
  font-weight: bold;
}
.panel-unsubscribe li .disclaimer {
  margin-left: 19px;
}
.panel-unsubscribe .btn-primary {
  margin: 1.5rem 0;
}

div[id$=uxUnsubscribeSuccess] .social-icons a {
  color: #4A4A4A;
  display: inline-block;
}
div[id$=uxUnsubscribeSuccess] .social-icons a svg {
  display: block;
}
div[id$=uxUnsubscribeSuccess] .social-icons a + a {
  margin-left: 0.375rem;
}
div[id$=uxUnsubscribeSuccess] .social-icons a:hover {
  border-bottom: none;
}
div[id$=uxUnsubscribeSuccess] .social-icons a:focus {
  border: none;
  border-radius: 50%;
  outline: 2px solid black;
}