/* All rules in this file are indented from section headers
 *  to enable indent-based code folding for legibility

/* Table of contents
末末末末末末末末末末末末末末末末末末末末末末末末末
 - Opinionated Defaults
 - Helpers
 - DEX Styleguide Globals
 - Animations
 - Animated Show/Hide Transitions
 - Links
 - Buttons
 - Forms
 - Input Placeholder text
 */

/* Opinionated Defaults
末末末末末末末末末末末末末末末末末末末末末末末末末 */
  /*
   * Make html take up the entire screen
   * Then set touch-action to avoid touch delay on mobile IE
   */
  html {
    width: 100%;
    height: 100%;
    -ms-touch-action: manipulation;
    touch-action: manipulation; }

  /*
  * Make body take up the entire screen
  * Remove body margin so layout containers don't cause extra overflow.
  */
  body {
    width: 100%;
    height: 100%;
    min-height: 100%;
    margin: 0; }

  /*
   * Main display reset for IE support.
   * Source: http://weblog.west-wind.com/posts/2015/Jan/12/main-HTML5-Tag-not-working-in-Internet-Explorer-91011
   */
  main {
    display: block; }

  /*
   * Typography reset.
   */
  h1, h2, h3, h4, h5, h6, p {
    margin: 0;
    padding: 0; }

/* Helpers
末末末末末末末末末末末末末末末末末末末末末末末末末 */
  /*
   * Hide visually and from screen readers:
   */
  .hidden {
    display: none !important; }

  /*
   * Show/hide for responsive layouts
   * The rule applies to the named size and above
   */
  .hidden-xs { display: none !important; }

  /*sm = > 40.0rem (640px) - for tablets*/
  @media only screen and (min-width: 40.0rem) { 
    .hidden-sm { display: none !important; }
    .show-sm { display: initial !important; }
  }

  /*md = > 60.0rem (960px) - for laptops*/
  @media only screen and (min-width: 60.0rem) {
    .hidden-md { display: none !important; }
    .show-md { display: initial !important; }
  }

  /*lg = > 80.0rem (1280px)- for desktops*/
  @media only screen and (min-width: 80.0rem) {
    .hidden-lg { display: none !important; }
    .show-lg { display: initial !important; }
  }

  /*
   * Hide only visually, but have it available for screen readers:
   * http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
   */
  .visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px; }

  /*
   * Extends the .visuallyhidden class to allow the element
   * to be focusable when navigated to via the keyboard:
   * https://www.drupal.org/node/897638
   */
  .visuallyhidden.focusable:active,
  .visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto; }

  /*
   * Hide visually and from screen readers, but maintain layout
   */
  .invisible {
    visibility: hidden; }

  .full-width {
    width: 100%;
    box-sizing: border-box; }

  /*
   * Clearfix: contain floats
   *
   * For modern browsers
   * 1. The space content is one way to avoid an Opera bug when the
   *    `contenteditable` attribute is included anywhere else in the document.
   *    Otherwise it causes space to appear at the top and bottom of elements
   *    that receive the `clearfix` class.
   * 2. The use of `table` rather than `block` is only necessary if using
   *    `:before` to contain the top-margins of child elements.
   */
  .clearfix:before,
  .clearfix:after {
    content: " ";
    /* 1 */
    display: table;
    /* 2 */ }

  .clearfix:after {
    clear: both; }
  /*
  * Apply no display to elements with the hidden attribute.
  * IE 9 and 10 support.
  */
  *[hidden] {
    display: none !important; }

/* DEX Styleguide Globals
末末末末末末末末末末末末末末末末末末末末末末末末末 */
  html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ul,ol,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td {
    font-family: "Elena", serif;
  }

  html, body {
    line-height: 1.4;
    font-weight: 400;
  }

/* Animations
末末末末末末末末末末末末末末末末末末末末末末末末末 */
  @keyframes buttondefault {
      0%  { transform: scale(1.01) }
     100% { transform: scale(1.00) }
  }

  @keyframes buttonhover {
      0%  { transform: scale(1.00) }
     100% { transform: scale(1.01) }
  }

  @keyframes buttonclick {
      0%  { transform: scale(1.00) }
      20% { transform: scale(0.98) }
      40% { transform: scale(1.01) }
     100% { transform: scale(1.01) }
  }

/* Animated Show/Hide Transitions
末末末末末末末末末末末末末末末末末末末末末末末末末 */
  /*  NOTE: these are coupled with dex-stylefuide.js:
   *  transitionHide(el)
   *  transitionShow(el)
   *  transitionSwap(elA, elB)
   *  we use transforms for scale and position to hardware-optimize the animation
   */

  .hidden {
    opacity: 0;
    transform: scale(0);
  }

  .shown {
    opacity: 1;
    transform: scale(1);
  }

  .transition {
    display: block;
    opacity: 1;
    transform: scale(1);
    transition-property: opacity, transform;
    transition-duration: .3s, .4s;
    transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  }

  .transition-reset {
    opacity: 0.0;
    transition-duration: .005s;
  }

  .transition-show {
    display: block;
    opacity: 0.0;
    transform: scale(0.8);
  }

  .transition-hide {
    display: block;
    opacity: 0.001;
    transform: scale(0.8);
  }

  .transition-did-hide {
    display: none;
    opacity: 0;
    transform: scale(0.00);
  }

  .transition-did-show {
    display: block;
    opacity: 1;
    transform: scale(1.00);
  }

/* Links
末末末末末末末末末末末末末末末末末末末末末末末末末 */
  a {
    display: inline-block;
    color: #0F0F59;
    font-weight: 600;
    text-decoration: underline;
    padding: .25rem 0;
    animation-name: buttondefault;
    animation-duration: .125s;
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform: scale(1.00);
  }

  a:hover {
    animation-name: buttonhover;
    animation-duration: .25s;
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform: scale(1.02);
  }

  a:active,
  a:focus {
    animation-name: buttonclick;
    animation-duration: .4s;
    animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
    transform: scale(1.01);
  }

  a:focus {
    outline-style: auto;
    outline-color: Highlight;
    outline-width: unset;
    outline-offset: unset;
  }

  @media (-webkit-min-device-pixel-ratio:0) {
    a:focus {
      outline-color: -webkit-focus-ring-color;
    }
  }

  @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    a:focus {
      outline-style: dashed;
      outline-width: 1px;
    }
  }

/* Buttons
末末末末末末末末末末末末末末末末末末末末末末末末末 */
  .button,
  button,
  input[type="submit"],
  input[type="reset"],
  input[type="button"] {
    font-family:"Bryant Pro", sans-serif;
    display: inline-block;
    height: 32px;
    padding: 0 12px;
    color: #009fb8;
    text-align: center;
    font-size: 15px;
    font-weight: bold;
    line-height: 32px;
    vertical-align:middle;
    letter-spacing: -.5px;
    text-decoration: none;
    white-space: nowrap;
    background-color: transparent;
    border-radius: 3px;
    border:none;
    cursor: pointer;
    box-sizing: border-box;
    animation-name: buttondefault;
    animation-duration: .125s;
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform: scale(1.00);
  }

  .button:hover,
  button:hover,
  input[type="submit"]:hover,
  input[type="reset"]:hover,
  input[type="button"]:hover {
    background-color: #009fb8;
    color:#FFF;
    border-color: #FFF;
    animation-name: buttonhover;
    animation-duration: .25s;
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform: scale(1.01);
  }

  .button:active,
  button:active,
  input[type="submit"]:active,
  input[type="reset"]:active,
  input[type="button"]:active,
  .button:focus,
  button:focus,
  input[type="submit"]:focus,
  input[type="reset"]:focus,
  input[type="button"]:focus {
    background-color: #f0f0f0;
    border-color: #e0e0e0;
    outline: 0; 
  }

  .button:focus,
  button:focus,
  input[type="submit"]:focus,
  input[type="reset"]:focus,
  input[type="button"]:focus {
    animation-name: buttonhover;
    animation-duration: .25s;
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform: scale(1.01);
    outline-style: auto;
    outline-color: Highlight;
    outline-width: unset;
    outline-offset: unset;
  }

  @media (-webkit-min-device-pixel-ratio:0) {
    .button:focus,
    button:focus,
    input[type="submit"]:focus,
    input[type="reset"]:focus,
    input[type="button"]:focus {
      outline-color: -webkit-focus-ring-color;
    }
  }

  @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .button:focus,
    button:focus,
    input[type="submit"]:focus,
    input[type="reset"]:focus,
    input[type="button"]:focus {
      outline-style: dashed;
      outline-width: 1px;
    }
  }

  .button:active,
  button:active,
  input[type="submit"]:active,
  input[type="reset"]:active,
  input[type="button"]:active {
    animation-name: buttonclick;
    animation-duration: .4s;
    animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
    transform: scale(1.01);
  }

  .button span,
  button span {
    font-weight: 600;
    text-decoration: underline;
  }

  /* Emphasized Button */
  .button.button-emphasized,
  button.button-emphasized,
  input[type="submit"].button-emphasized,
  input[type="reset"].button-emphasized,
  input[type="button"].button-emphasized {
    background-color: #009fb8;
    color: #FFF;
    text-transform: uppercase;
  }

  .button.button-emphasized:hover,
  button.button-emphasized:hover,
  input[type="submit"].button-emphasized:hover,
  input[type="reset"].button-emphasized:hover,
  input[type="button"].button-emphasized:hover {
    background-color: #007284;
  }

  .button.button-emphasized:active,
  button.button-emphasized:active,
  input[type="submit"].button-emphasized:active,
  input[type="reset"].button-emphasized:active,
  input[type="button"].button-emphasized:active,
  .button.button-emphasized:focus,
  button.button-emphasized:focus,
  input[type="submit"].button-emphasized:focus,
  input[type="reset"].button-emphasized:focus,
  input[type="button"].button-emphasized:focus {
    background-color: #007284;
  }

  /* Standard Button */
  .button.button-standard,
  button.button-standard,
  input[type="submit"].button-standard,
  input[type="reset"].button-standard,
  input[type="button"].button-standard {
    background-color: #6c6054;
    color: #fff;
    font-weight: bold;
    text-transform: uppercase;
  }

  .button.button-standard:hover,
  button.button-standard:hover,
  input[type="submit"].button-standard:hover,
  input[type="reset"].button-standard:hover,
  input[type="button"].button-standard:hover {
    background-color: #524940;
    color: #FFF;
  }

  .button.button-standard:active,
  button.button-standard:active,
  input[type="submit"].button-standard:active,
  input[type="reset"].button-standard:active,
  input[type="button"].button-standard:active,
  .button.button-standard:focus,
  button.button-standard:focus,
  input[type="submit"].button-standard:focus,
  input[type="reset"].button-standard:focus,
  input[type="button"].button-standard:focus {
    background-color: #000;
    color: #fff;
  }

  /* De-Emphasized Button */
  .button.button-de-emphasized,
  button.button-de-emphasized,
  input[type="submit"].button-de-emphasized,
  input[type="reset"].button-de-emphasized,
  input[type="button"].button-de-emphasized {
    background-color: #transparent;
    color: #37474f;
    font-weight: 500;
    text-transform: uppercase;
    border: 1px solid #37474f;
  }

  .button.button-de-emphasized:hover,
  button.button-de-emphasized:hover,
  input[type="submit"].button-de-emphasized:hover,
  input[type="reset"].button-de-emphasized:hover,
  input[type="button"].button-de-emphasized:hover {
    color: #9ba1a9;
    background:#FFF;
    border-color: #9ba1a9;
  }

  .button.button-de-emphasized:active,
  button.button-de-emphasized:active,
  input[type="submit"].button-de-emphasized:active,
  input[type="reset"].button-de-emphasized:active,
  input[type="button"].button-de-emphasized:active,
  .button.button-de-emphasized:focus,
  button.button-de-emphasized:focus,
  input[type="submit"].button-de-emphasized:focus,
  input[type="reset"].button-de-emphasized:focus,
  input[type="button"].button-de-emphasized:focus {
    color: #000;
    border-color: #000;
  }

  /* De-Emphasized Dark Button */
  .button.button-de-emphasized-dark,
  button.button-de-emphasized-dark,
  input[type="submit"].button-de-emphasized-dark,
  input[type="reset"].button-de-emphasized-dark,
  input[type="button"].button-de-emphasized-dark {
    background-color: transparent;
    color: #fff;
    font-weight: 300;
    text-transform: uppercase;
    border: 1px solid #fff;
  }

  .button.button-de-emphasized-dark:hover,
  button.button-de-emphasized-dark:hover,
  input[type="submit"].button-de-emphasized-dark:hover,
  input[type="reset"].button-de-emphasized-dark:hover,
  input[type="button"].button-de-emphasized-dark:hover {
    color: #caf0ff;
    border-color: #caf0ff;
  }

  .button.button-de-emphasized-dark:active,
  button.button-de-emphasized-dark:active,
  input[type="submit"].button-de-emphasized-dark:active,
  input[type="reset"].button-de-emphasized-dark:active,
  input[type="button"].button-de-emphasized-dark:active,
  .button.button-de-emphasized-dark:focus,
  button.button-de-emphasized-dark:focus,
  input[type="submit"].button-de-emphasized-dark:focus,
  input[type="reset"].button-de-emphasized-dark:focus,
  input[type="button"].button-de-emphasized-dark:focus {
    color: #4cc6ff;
    border-color: #4cc6ff;
  }

/* Status Messages
末末末末末末末末末末末末末末末末末末末末末末末末末 */
  .success-message,
  .warning-message,
  .error-message {
    margin: 1rem 0;
    padding: 1rem 2rem;
    font-weight: 600;
    color: #000000;
  }

  .success-message.banner,
  .warning-message.banner,
  .error-message.banner {
    position: relative;
    margin: -1rem -1rem 1rem -1rem;
    padding-left: 5rem;
  } 

  .success-message.banner img,
  .warning-message.banner img,
  .error-message.banner img {
    position: absolute;
    top: 1rem;
    bottom: 1rem;
    left: 1rem;
    width: 3rem;
  }

  .success-message {
    background-color: #E4F2DB;
  }

  .warning-message {
    background-color: #FFF5DB;
  }

  .error-message {
    background-color: #FAE2E2;
  }

  .success-message a,
  .warning-message a,
  .error-message a {
    font-weight: 600;
    text-decoration: underline;
  }

  .success-message a {
    color: #44AD00;
  }

  .success-message a:hover,
  .success-message a:focus {
    background-color: #e4f2db;
  }

  .success-message a:active {
    background-color: #a3d582;
  }

  .warning-message a {
    color: #ffebb6;
  }

  .warning-message a:hover,
  .warning-message a:focus {
    background-color: #fff5db;
  }

  .warning-message a:active {
    background-color: #ffdf84;
  }

  .error-message a:hover,
  .error-message a:focus {
    background-color: #fae2e2;
  }

  .error-message a:active {
    background-color: #ec9f9f;
  }

/* Forms
末末末末末末末末末末末末末末末末末末末末末末末末末 */
  input[type="email"],
  input[type="number"],
  input[type="search"],
  input[type="text"],
  input[type="tel"],
  input[type="url"],
  input[type="password"],
  textarea,
  select {
    font: inherit;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.33;
    height: 2rem;
    padding: .25rem .75rem;
    border: 1px solid #b9babb;
    border-radius: 0;
    background: white;
    color: #000;
    box-shadow: none;
    box-sizing: border-box;
    outline-width: 0;
    outline-style: solid;
    outline-color: transparent;
    transform: scale(1.00);
    transition: outline-width 0.25s, transform 0.25s;
    transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  }
  /* Removes awkward default styles on some inputs for iOS */
  input[type="email"],
  input[type="number"],
  input[type="search"],
  input[type="text"],
  input[type="tel"],
  input[type="url"],
  input[type="password"],
  textarea {
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none; }
  textarea {
    min-height: 65px;
    padding-top: 6px;
    padding-bottom: 6px; }
  input:focus,
  textarea:focus,
  select:focus {
    border: 1px solid #33C3F0;
    outline-color: #33c3f0;
    outline-width: 2px;
    transform: scale(1.02);
  }
  label,
  legend {
    display: block;
    margin-bottom: .5rem;
    font-weight: 600; }
  label {
    margin-bottom: 0;
    color: #737d85;
    font-size: .85rem;
    /* margin-bottom: 2em; */
  }
  fieldset {
    padding: 0;
    border-width: 0; }
  input[type="checkbox"],
  input[type="radio"] {
    display: inline; }
  label > .label-body {
    display: inline-block;
    margin-left: .5rem;
    font-weight: normal; }

/* Input Placeholder text
末末末末末末末末末末末末末末末末末末末末末末末末末 */
  ::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    color: #C3C5CD;
  }
  ::-moz-placeholder { /* Firefox 19+ */
    color: #C3C5CD;
  }
  :-ms-input-placeholder { /* IE 10+ */
    color: #C3C5CD;
  }

/*  Input Container for labeling and validation messages
末末末末末末末末末末末末末末末末末末末末末末末末末 */
  .input-container {
    position: relative;
    padding-top: 1rem;
  }
  .input-container label {
    position: absolute;
    top: 0;
  }
  .input-container input[required] ~ label:after {
    color: #d84040;
    content: '*';
    position: relative;
    top: -2px;
    left: -2px;
  }


/* HTML5 form validation messages
末末末末末末末末末末末末末末末末末末末末末末末末末 */
  input:invalid.touched,
  textarea:invalid.touched,
  select:invalid.touched,
  input.server-invalid.touched {
    border: 1px solid #d84040;
    outline-color: #d84040;
  }

  input + .input-message,
  textarea + .input-message,
  select + .input-message,
  input:valid.touched + .input-message,
  textarea:valid.touched + .input-message,
  select:valid.touched + .input-message,
  input ~ .input-message-server {
    content: attr(data-message-invalid);
    position: relative;
    display: block;
    top: -1.375rem;
    left: 0.75rem;
    font-size: 10px;
    visibility: visible;
    height: 0;
    color: #d84040;
    opacity: 0;
    transform: scaleY(0);
    transition: opacity .4s cubic-bezier(0.175, 0.885, 0.32, 1.275),
                transform .25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  }

  input:invalid.touched + .input-message,
  textarea:invalid.touched + .input-message,
  select:invalid.touched + .input-message,
  input.server-invalid ~ .input-message-server {
    opacity: 1;
    transform: scaleY(1.0);
  }

/* Lists
末末末末末末末末末末末末末末末末末末末末末末末末末 */
  ul {
    list-style: disc outside; }
  ol {
    list-style: decimal outside; }
  ol, ul {
    padding-left: 0;
    margin-top: 0;
    margin-left: 1.5rem; }
  ul ul,
  ul ol,
  ol ol,
  ol ul {
    margin: 0 0 0 1rem; }
  li {
    margin-bottom: .5rem; }

/* Spacing
末末末末末末末末末末末末末末末末末末末末末末末末末 */
  button,
  .button {
    margin-bottom: 1rem; }
  input,
  textarea,
  select,
  fieldset {
    margin-bottom: 1.5rem; }
  pre,
  blockquote,
  dl,
  figure,
  table,
  form {
    margin-bottom: 2.5rem; }

/* Modal Dialog
末末末末末末末末末末末末末末末末末末末末末末末末末 */
.dialog-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
}

.dialog-container.transition {
  opacity: 0;
}

.dialog-container.transition-show {
  opacity: 0.001;
  transform: scale(1);
}

.dialog-container.transition-did-show {
  opacity: 1;
}

.dialog-container.transition-hide {
  opacity: 0.001;
  transform: scale(1);
  transition-delay: .200s;
}

.dialog-container.transition-did-hide {
  opacity: 0;
  transform: scale(1);
  transition-delay: 0s;
}

.dialog-container .scrim {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.8);
}

.dialog-container.dark .scrim {
  background: rgba(15, 15, 89, 0.925);
}

.dialog-container .dialog {
  position: relative;
  background: white;
  border: 2px solid #0f0f59;
  margin: 0 1rem;
  padding: 2rem 2rem 0 2rem;
  max-width: 320px;
  box-sizing: border-box;
}

.dialog-container .dialog.large {
  max-width: 640px;
  max-height: calc(100% - 2rem);
  margin: 1rem;
  display: flex;
  flex-direction: column;
}

@media only screen and (min-width: 40.0rem) { 
  .dialog-container .dialog.large {
    max-height: 90%;
  }
}

.dialog-container .dialog.large .scrollable {
  margin: 0 -2rem 0 -2rem;
  padding: 1rem 2rem 2rem 2rem;
  flex: 0 1 auto;
  overflow: auto;
}

.dialog-container .dialog.large .dialog-footer {
  flex: 0 0 auto;
  padding: 1rem 0;
}

.dialog-container .dialog.large .dialog-footer button {
  margin: 0;
}

.dialog-container.dark .dialog {
  background: #0f0f59;
  color: white;
  border: 2px solid #46eaa7;
}

.dialog-container .dialog.transition-show {
  transition-delay: .050s;
}

.dialog-container.legacy {
  position: fixed;
}

.dialog-container.legacy .dialog.large {
  max-height: 100%;
  width: calc(100% - 50px);
  min-width: 528px;
  margin: 16px;
  overflow: hidden;
  box-sizing: border-box;
}

.lte-ie9 .dialog-container.legacy .dialog.large {
  margin: 16px auto;
}

.dialog-container.legacy .dialog.large .banner {
  height: 80px;
  box-sizing: border-box;
}

.dialog-container.legacy .dialog.large .scrollable {
  max-height: calc(100% - 144px);
  box-sizing: border-box;
}

.ie8 .dialog-container.legacy .dialog.large .scrollable {
  height: 66%;
}

.dialog-container.legacy .dialog.large .dialog-footer {
  height: 64px;
  box-sizing: border-box;
}


/* Media Queries
末末末末末末末末末末末末末末末末末末末末末末末末末 */
  /*
   *  Note: The best way to structure the use of media queries is to create the queries
   *  near the relevant code. For example, if you wanted to change the styles for buttons
   *  on small devices, paste the mobile query code up in the buttons section and style it
   *  there.
  */
  /*sm = > 40.0rem (640px) - for tablets*/
  @media only screen and (min-width: 40.0rem) { }

  /*md = > 60.0rem (960px) - for laptops*/
  @media only screen and (min-width: 60.0rem) { }

  /*lg = > 80.0rem (1280px)- for desktops*/
  @media only screen and (min-width: 80.0rem) { }