/* latin-ext */
@font-face {
  font-family: 'Sen';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/sen/v7/6xKjdSxYI9_3kvWNAGn5LEwJ.woff2) format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Sen';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/sen/v7/6xKjdSxYI9_3nPWNAGn5LA.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Sen';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/sen/v7/6xKudSxYI9__J9CYI0v0BnYASNr7.woff2) format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Sen';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/sen/v7/6xKudSxYI9__J9CYLUv0BnYASA.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
html, body {min-height: 100vh;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, main {display: block;}
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video, main {margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent;}
ol, ul {list-style:none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,  q:before, q:after {content:''; content:none;}
del {text-decoration: line-through;}
svg:not(:root) {overflow: hidden;}
abbr[title], dfn[title] {border-bottom: 1px dotted; cursor: help;}
table {width: 100%; border-collapse: collapse; border-spacing: 0; empty-cells: show; table-layout: fixed;}
input, select {vertical-align: middle;}
input[type="radio"] {vertical-align: text-bottom;}
input[type="checkbox"] {vertical-align: bottom;}
button, input, select, textarea {margin: 0; font-family: "Source Sans Pro", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;}
textarea {resize: none;}
button, html input[type="button"], input[type="reset"], input[type="submit"] {-webkit-appearance: button; cursor: pointer;}
button[disabled], html input[disabled] {cursor: default;}
input[type="checkbox"], input[type="radio"] {box-sizing: border-box; padding: 0; *height: 13px; *width: 13px;}
img {display: block; max-width: 100%; height: auto !important;}
td img {vertical-align: top;}
address {display: inline;}
code, kbd, pre, samp {font-family: monospace, serif; font-size: 16px;}
pre {white-space: pre; white-space: pre-wrap; word-wrap: break-word;}
a:hover, a:active {outline: none;}
a, a:hover, a:visited {text-decoration: none;}
iframe {display: block; max-width: 100%;}
fieldset {border: 1px solid #c0c0c0; padding: 16px;}
::-webkit-input-placeholder {color: #AAAAAA; font-family: "Sen", Arial, sans-serif; font-size: 16px; opacity: 0.5;}
:focus::-webkit-input-placeholder {opacity: 0;}
:-moz-placeholder {color: #AAAAAA; font-family: "Sen", Arial, sans-serif; font-size: 16px; opacity: 0.5;}
:focus:-moz-placeholder {opacity: 0;}
*, *:before, *:after {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
.cf:before, .cf:after {content:""; display:table;} .cf:after {clear:both;}

body {
  font: 16px/1.6em "Sen", Helvetica, Arial, sans-serif;
  background-color: #E8F0F8;
  color: #242222;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.container {width: 764px; margin: 0 auto; position: relative;}
.hidden {display: none; pointer-events: none;}
.document-wrapper {
  width: 100%; 
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;
}
  .document-wrapper.cols {
    flex-direction: row;
    width: 90%;
    margin: 0 auto;
    padding: 48px 0;
    align-items: center;
  }
  .document-wrapper.cols .dw-col {max-width: 50%; flex-basis: 50%; padding: 0 24px;}
  .document-wrapper.cols .container {width: 100%;}

.loading-animation {
  width: 100%;
  position: absolute;
  left: 0;
  top: -140px;
}

h1 {
  color: #284157;
  font-size: 32px;
  line-height: 40px;
  margin-bottom: 24px;
  text-align: center;
}
.form-wrapper {
  background-color: #fff;
  border-radius: 40px;
  position: relative;
  padding: 24px 0 0 24px;
  box-shadow:
    0px 0.9px 1.5px rgba(0, 0, 0, 0.017),
    0px 2.1px 3.7px rgba(0, 0, 0, 0.024),
    0px 3.9px 7px rgba(0, 0, 0, 0.03),
    0px 6.9px 12.5px rgba(0, 0, 0, 0.036),
    0px 13px 23.4px rgba(0, 0, 0, 0.043),
    0px 31px 56px rgba(0, 0, 0, 0.06)
  ;
}
  .form-wrapper span {
    display: block;
    color: #AAA;
    font-size: 12px;
    font-weight: 700;
    position: absolute;
    left: 24px;
    top: 4px;
  }
  .form-wrapper input[type=text] {
    display: block;
    border: 0;
    outline: none;
    padding: 8px 0 16px 0;
    background-color: transparent;
    font-size: 16px;
    width: 85%;
  }
  .form-wrapper button {
    display: block;
    border: 0;
    outline: none;
    background: #3770A1 url(images/ask-icon.png) no-repeat 84% center scroll;
    position: absolute;
    right: 16px;
    top: 12px;
    padding: 12px 40px 12px 20px;
    border-radius: 24px;
    z-index: 20;
    color: #fff;
    font-weight: 700;
    font-size: 16px;
    cursor: pointer;
  }
  .form-wrapper:after {
    display: block;
    content: "";
    width: 64px;
    height: 46px;
    background: -moz-linear-gradient(-45deg,  rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
    background: -webkit-linear-gradient(-45deg,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
    background: linear-gradient(135deg,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
    position: absolute;
    right: 104px;
    bottom: 0;
    z-index: 10;
  }

.responses {padding: 48px 32px 0 32px;}
  .responses .response {background-color: #284157; border-radius: 16px; padding: 16px 24px; color: #fff; position: relative;}
    .responses .response:not(:last-of-type) {margin-bottom: 24px;}
    .responses .response a {
      display: block; 
      color: #fff; 
      padding-right: 32px; 
      text-decoration: underline; 
      font-weight: 700;
      background: url(images/open-in-new-window-icon.png) no-repeat right 0 scroll;
    }
      .responses .response a:hover {text-decoration: none;}
    .responses .response p:not(:last-of-type) {margin-bottom: 12px;}

  .copy-block {
background-color: #fff;
border-radius: 16px;
border: 1px solid #D0D6DD;
padding: 32px 40px;
position: relative;
max-height: 84vh;
 overflow-y: auto;
}
  .copy-block a {text-decoration: underline;}
  .copy-block .close {
    display: block;
    text-decoration: none;
    width: 32px;
    height: 32px;
    background: url(images/close-window-icon.png) no-repeat scroll;
    position: absolute;
    right: 32px;
    top: 32px;
    font: 0/0 a;
    color: transparent;
  }
  .copy-block img {margin-bottom: 24px;}
  .copy-block p:not(:last-of-type) {margin-bottom: 24px;}
  .copy-block ol {margin: 0 0 24px 24px; counter-reset: item;}
    .copy-block ol li {display: block;}
      .copy-block ol li:not(:last-of-type) {margin-bottom: 16px;}
    .copy-block ol li:before {
      content: counter(item) ". ";
      counter-increment: item;
      color: #3770A1;
      font-weight: 700;
    }
  .copy-block h2, .copy-block h3 {color: #3770A1; font-size: 24px; line-height: 32px; margin-bottom: 24px;}

.copy-block ul {margin: 0 0 24px 24px; counter-reset: item;}
    .copy-block ul li {display: block;}
      .copy-block ul li:not(:last-of-type) {margin-bottom: 16px;}
    .copy-block ul li:before {
      content: counter(item) ". ";
      counter-increment: item;
      color: #3770A1;
      font-weight: 700;
    }

@media (max-width: 840px) {
  .container {width: 90%;}
  .document-wrapper.cols .container {width: 100%;}
}

.copy-block ol p {display: inline; margin: 0 !important;}
.copy-block ul p {display: inline; margin: 0 !important;}
.copy-block ol ul {margin: 0 0 16px 25px;}

/* Styling for user messages */
.user-message {
  background-color: #f0f0f0; /* Light gray background */
  color: #333; /* Dark text color */
  padding: 0 10px;
  margin: 0 10px 15px;
  border-radius: 5px;
  text-align: left;
  font-style: italic; /* Optional, for a different text style */
  display: inline-block;
  width: 90%; /* Adjust as needed */
  clear: both;
  float: left; /* Aligns user messages to the left */
}

/* Styling for server responses */
.server-response {
  background-color: #e1f5fe; /* Light blue background */
  color: #0277bd; /* Dark blue text color */
  padding: 0 10px;
  margin: 0 10px 15px;
  border-radius: 5px;
  text-align: left;
  display: inline-block;
  width: 90%; /* Adjust as needed */
  clear: both;
  float: right; /* Aligns server messages to the right */
}

/* Styling for labels ("user" and "seo assistant") */
.label {
  font-weight: bold;
  font-size: 12px;
  color: #666;
  margin-left: 10px; /* Aligns with the messages */
}

/* Styling for the message block that wraps both label and message */
.message-block {
  margin-bottom: 25px;
  clear: both; /* Ensures that messages don't overlap */
}

/* Optional: Add different styling for user and server labels */
.label.user-label {
  float: left;
}

.label.server-label {
  float: right;
  margin-right: 10px;
}