/** Base **/
html,body {
  background-size: cover;
  text-align: center;

  height: 100%;
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
h1,h2,h3,h4,h5 {
  font-weight: bold;
  font-family: Lato,sans-serif;
}
h1,h2,h3 {
  margin-bottom: 20px;
}
th { text-align: center; }
button {
  font-family: Lato,sans-serif;
  font-size: 16px;
  color: rgba(255,255,255,1.0);
}
hr {
  height: 1px;
  width: 60%;
  border: 0;
  border-top: 1px solid rgba(200,200,200,.6);
  margin: 24px auto;
}
@media (max-width: 480px) {
  hr { margin: 10px auto; }
}


/** General styles **/

.wai-redrawn { transform: translateZ(0); }
.wai-centered { margin: 0px auto; }
.wai-text-centered { text-align: center !important; }
.wai-fast { color: #efda68; }
.wai-gold { color: #efda68; }
.wai-green { color: #519476; }
.wai-noscroll { overflow: hidden; }
.wai-justify-start { justify-content: flex-start !important; }

.wai-page-container-inner {
  height: 100%;
  width: 100%;
  margin: 0px auto;
}
.wai-page-container-inner > p { font-size: 16px; }
@media (max-height: 440px) {
  .wai-page-container-inner { padding-bottom: 2px; }
}

.wai-overlay {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.9);
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow-y: scroll;
}
.wai-overlay-item { z-index: 4; }
.wai-overlay-item-container {
  border: 3px solid white;
  border-radius: 20px;
  max-width: 980px;
  width: 100%;
  margin: 0px auto;
  padding: 20px;
}

.wai-alert-slim {
  margin-bottom: 5px;
  padding: 10px;
}
.wai-text-alert {
  margin-top: 4px;
  color: #ffc71a !important;
}
.wai-text-alert > span {
  height: 24px;
  line-height: 24px;
  vertical-align: middle;
  font-size: 16px;
}
#wai-ic-warn {
  height: 20px;
  width: 20px;
}
.panel-primary {
  background-color: rgba(255,255,255,.95);
  border: none;
}
.panel-title a { color: #fff; }
.form-title {
  color: #000;
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
}


/** Buttons **/

.wai-btn,
.wai-btn-go {
  min-width: 100px;
  border: 1px solid #ddd;
  border-radius: 40px;
  background-color: transparent;
  color: #ddd;
}
.wai-btn-go {
  padding: 5px;
  margin: 5px;
}
.wai-btn,
.wai-btn-go:focus {
  color: #eee;
  border-color: #eee;
  background-color: rgba(255,255,255,0.04);
}
.wai-btn:hover, .wai-btn:active,
.wai-btn-go:hover, .wai-btn-go:active {
  color: #fff;
  border-color: #fff;
  background-color: rgba(255,255,255,0.04);
}
.wai-btn:focus, .wai-btn-go:focus {
  outline: none !important;
  box-shadow: none !important;
}

.wai-btn-cta {
  border: 1.5px solid #eee;
  padding: 10px 20px;
  font-size: 18px;
}
.wai-btn-cta:hover {
  background-color: #fff;
  color: rgb(6,122,169);
}


/** Site wrapper & Header **/

#wai-site-wrapper {
  flex: 1 0 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
}
#wai-header { flex: 0 0 auto; }
#wai-nav {
  background-color: transparent;
  border: 0px;
  padding: 8px;
  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
  margin: 0px auto;
  max-width: 980px;
}
@media (max-height: 440px) {
  #wai-nav { padding: 2px; }
}
#wai-nav-header {
  margin-left: 0px;
  margin-right: 0px;
}
#wai-nav-brand {
  height: 54px;
  padding-top: 12px;
  padding-bottom: 4px;
  padding-left: 4px;
  padding-right: 4px;
}
@media (max-width: 540px) {
  #wai-nav-header {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
  }
  #wai-nav-brand { flex: 1 0 auto; }
  #wai-nav-hamburger{ flex: 0 0 auto; }
}
@media (min-width: 540px) {
  #wai-nav-brand { padding-left: 8px; }
}
#wai-nav-brand > img { height: 100%; }
#wai-nav-login > li { height: 42px; }
#wai-nav-login,
#wai-nav-login > li,
#wai-nav-login > li > a {
  padding: 5px;
  color: #ddd !important;
}
#wai-nav-account,
#wai-nav-account > li > a,
#wai-nav-account > li > ul > li > a {
  color: #ddd !important;
  text-align: center;
}
#wai-nav-account > li > a:hover {
  color: #fff !important;
  border-bottom: 1px solid #fff;
}

#wai-nav-login > li.active > a,
#wai-nav-account > li.active > a {
  color: #ffc112 !important;
  background-color: transparent;
}
.wai-nav-admin { color: #2fccff !important; }

#navbar { border: none; }
.navbar-default .navbar-toggle,
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
  background-color: transparent;
  border: none;
  margin-right: 0px;
}
.navbar-default .navbar-toggle .icon-bar { background-color: #ddd; }

#wai-nav-account > li.open,
#wai-nav-account > li.open > ul {
  background-color: rgb(6,116,160);
}
#wai-nav-account > li.open > a,
#wai-nav-account > li.open > ul > li > a {
  background-color: transparent;
}
#wai-nav-account > li.dropdown > ul.dropdown-menu > li.divider {
  background-color: rgba(0,0,0,0.08);
}
@media (min-width: 460px) {
  #wai-nav-account > li.open > ul {
    background-color: rgb(6,116,160);
  }
  .navbar-header { float: left; }
  .navbar-toggle { display: none; }
  .navbar-right {
    float: right !important;
    margin-right: -15px;
  }
  .navbar-collapse {
    width: auto;
    border-top: 0px;
    box-shadow: none;
  }
  .navbar-collapse.collapse {
    display: block !important;
    height: auto !important;
    padding-bottom: 0px;
    overflow: visible !important;
  }
  .navbar-nav {
    float: left;
    margin: 0px;
  }
  .navbar-nav > li { float: left; }
  .navbar-nav > li > a {
    padding-top: 15px;
    padding-bottom: 5px;
  }
  .collapse.in { display: block !important; }
}


/** Footer **/

footer {
  flex: 0 0 auto;
  padding: 10px;
}
.wai-footer-group {
  display: flex;
  justify-content: center;
}
.wai-footer-group > a {
  font-family: Lato,sans-serif;
  font-size: 14px;
  color: #ddd;
  margin: 10px;
}
.wai-footer-group > a:hover { color: #fff; }
@media (max-height: 440px) { footer { padding: 6px; } }
@media (max-height: 340px) {
  footer { padding: 2px; }
  .wai-footer-group > a {
    margin: 6px;
    font-size: 13px;
  }
}


/** Modal styles **/

.wai-modal-container {
  flex: 1 0 auto;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 10px;
}
.wai-modal-exit-btn {
  position: absolute;
  top: 15px;
  right: 15px;
  z-index: 100;
  color: #aaa;
  font-size: 12px;
  line-height: 18px;
  height: 30px;
  width: 30px;
  padding: 6px 8px;
  cursor: pointer;
}
.wai-modal-exit-btn:hover { background-color: rgba(139,139,139,0.2); }
.wai-modal-exit-btn:active { background-color: rgba(139,139,139,0.4); }

.wai-modal-content {
  flex: 1 0 auto;
  position: relative;
  max-width: 500px;
  max-height: 700px;
  height: 70%;
  color: #111;
  background-color: rgba(255,255,255,0.95);
  border-radius: 8px;
  padding: 60px 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media (max-height: 600px), (max-width: 600px) {
  .wai-modal-content { height: calc(100% - 20px); }
}
@media (max-height: 500px) {
  .wai-modal-content { min-width: 400px; }
}
@media (max-width: 400px) {
  .wai-modal-content {
    min-width: 310px;
    padding: 40px 20px;
  }
}


/** Settings / config / account **/

#wai-account-container { max-width: 780px; }
@media (max-width: 480px) {
  #wai-account-info > p { display: none; }
  #wai-subscription-info > p { display: none; }
}

.wai-settings-section {
  text-align: left;
  margin: 15px 6px;
}
.wai-settings-section > h3 {
  font-size: 17px;
  font-weight: normal;
}
.wai-settings-section > div > div {
  border: 0px solid white;
}
@media (min-width: 400px) { .wai-settings-section { margin: 15px 15px; } }
@media (min-width: 480px) { .wai-settings-section { margin: 15px 20px; } }
@media (min-width: 520px) { .wai-settings-section { margin: 20px 40px; } }
@media (min-width: 600px) { .wai-settings-section { margin: 30px 60px; } }
@media (min-width: 768px) { .wai-settings-section { margin: 32px 100px; } }
@media (max-height: 440px) {
  .wai-settings-section {
    margin-top: 4px;
    margin-bottom: 4px;
  }
  .wai-settings-block { margin-bottom: 10px; }
}

.wai-settings-block { margin: 2px 0px 16px 0px; }
.wai-settings-block:last-child { margin: 4px 0px; }

.wai-settings-banner {
  font-size: 28px;
  color: #eee;
}
@media (max-width: 480px) { .wai-settings-banner { font-size: 22px; } }

.wai-settings-title {
  font-size: 20px;
  color: #eee;
}
.wai-settings-subtitle {
  font-size: 16px;
  color: #ddd;
}
.wai-settings-subtitle > a:hover { color: #fff; }
.wai-settings-subtitle > a:link,
.wai-settings-subtitle > a:visited {
  color: #eee;
  text-decoration: underline;
}
.wai-settings-info {
  color: #e0e0e0;
  margin-top: 5px;
  margin-bottom: 16px;
}
.wai-settings-info > p {
  font-size: 16px;
  margin-bottom: 6px;
}
.wai-settings-info > ul > li {
  font-size: 15px;
  margin-bottom: 2px;
}

.wai-settings-buttons { margin-top: 12px; }
.wai-settings-buttons > a,
.wai-settings-buttons > button {
  margin: 6px 0px 6px 8px;
}
.wai-settings-buttons > a:first-child,
.wai-settings-buttons > button:first-child {
  margin-left: 0px;
}
@media (max-width: 480px) {
  .wai-settings-title { font-size: 18px; }
  .wai-settings-subtitle { font-size: 14px; }
  .wai-settings-info > p { font-size: 14px; }
  .wai-settings-info > ul > li { font-size: 13px; }
  .wai-settings-buttons > button { margin: 2px }
}

#wai-account-profile {
  display: flex;
  flex-direction: row;
  align-items: center;
}
#wai-account-profile-logout { text-align: center; }
#wai-account-profile-info { flex: 0 1 auto; }
#wai-account-profile-space { flex: 1 1 auto; }
#wai-account-profile-avatar {
  flex: 1 1 auto;
  padding-left: 4px;
  max-width: 25%;
}
#wai-account-profile-avatar > img {
  max-height: 70px;
  border-radius: 50%;
}
@media (min-width: 370px) { #wai-account-profile-avatar > img { max-height: 80px; } }
@media (min-width: 480px) { #wai-account-profile-avatar > img { max-height: 100px; } }
@media (min-width: 600px) { #wai-account-profile-avatar > img { max-height: 120px; } }
@media (min-width: 700px) {
  #wai-account-profile-avatar { max-width: 25%; }
  #wai-account-profile-avatar > img { max-height: 140px; }
}


/** Invites **/

#wai-invite-welcome { padding-bottom: 5px; }
#wai-invite-welcome > hr { width: 40%; }
#wai-invite-welcome > p {
  font-family: Lato,sans-serif;
  font-size: 16px;
}
#wai-invite-banner {
  display: block;
  max-width: 65%;
  margin: auto;
  padding-bottom: 5px;
}


/** Login **/

#wai-login-banner {
  display: block;
  max-width: 80%;
  margin: auto;
  padding-bottom: 40px;
}
#wai-err-login { max-width: 80%; }
.wai-login-item { padding: 8px 10px; }
#wai-login-google,
#wai-login-amazon {
  width: 240px;
  border: 1px solid #bbb;
  line-height: 46px;
  padding: 2px 12px 2px 2px;
  text-align: left;
  font-size: 14px;
  color: rgba(0,0,0,0.54);
}
.wai-google-icon {
  background-image: url(../img/auth/google_normal.svg);
  background-position: center;
  background-repeat: no-repeat;
  float: left;
  height: 46px;
  width: 46px;
  margin-right: 8px;
}
.wai-amazon-icon {
  background-image: url(../img/auth/amazon_normal.png);
  background-position: center;
  background-repeat: no-repeat;
  float: left;
  height: 46px;
  width: 46px;
  margin-right: 8px;
}
#wai-login-options {
  text-align: center;
  margin: 12px 0px;
}
#wai-login-email-container { margin-top: 8px; }
#wai-login-email {
  color: rgb(63, 135, 136);
}
@media (max-height: 500px) {
  #wai-login-banner {
    max-height: 100px;
    padding-bottom: 5px;
  }
}


/** Landing page **/

#wai-landing-container {
  flex: 1 1 auto;
  height: 100%;
  max-height: 640px;
  max-width: 680px;
  margin: auto;
  color: #eee;

  display: flex;
  flex-direction: column;
}
#wai-landing-container-inner {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0px;
  padding-top: 20px;
  padding-bottom: 20px;
}
@media (min-width: 700px) and (min-height: 600px) {
  #wai-landing-container-inner {
    min-height: 640px;
    min-width: 600px;
    padding-top: 60px;
    padding-bottom: 60px;
  }
}
@media (max-width: 600px) {
  #wai-landing-container {
    flex: 1 0 auto;
    min-height: 0px;
    padding-bottom: 0px;
  }
  #wai-landing-container-inner {
    padding: 6px 6px;
    border-radius: 0px;
  }
  #wai-landing-container-inner > hr { display: none; }
}
@media (max-height: 440px) {
  #wai-landing-container { max-width: none; }
  #wai-landing-container-inner { padding: 0px; }
}

#wai-intro-container {
  flex: 0 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
#wai-intro-container > p { 
  max-width: 80%;
  font-family: Lato,sans-serif;
  font-size: 26px;
  margin: 12px auto;
}
#wai-intro-container > p > span.wai-fast {
  color: #efda68;
  font-style: italic;
  font-size: 34px;
}
@media (max-width: 440px) and (max-height: 440px) {
  #wai-intro-container { display: none; }
}
@media (max-width: 480px) {
  #wai-intro-container.wai-flex-any { flex: 0 1 auto; }
}
@media (max-width: 440px) {
  #wai-intro-container > p > span.wai-fast { font-size: 28px; }
  #wai-intro-container > p {
    max-width: 80%;
    font-size: 26px;
    margin: 4px auto;
    line-height: 1.3;
  }
}
@media (max-height: 440px) {
  #wai-intro-container > p > span.wai-fast { font-size: 24px; }
  #wai-intro-container > p { 
    font-size: 22px;
    margin: 3px auto;
  }
}

#wai-landing-intro {
  font-family: Lato,sans-serif;
  font-size: 30px;
  margin: 40px;
}

#wai-logo-container {
  max-width: 400px;
  min-height: 180px;
  position: relative;
  margin: 0 auto;
}
#wai-logo {
  position: absolute;
  left: 0;
  top: 20px;
  width: 100%;
}
#wai-slogan {
  z-index: 100;
  position: absolute;
  left: 0;
  top: 110px;
  color: #ddd;
  font-size: 18px;
  font-style: italic;
  font-family: Lato,sans-serif;
}
#wai-landing-container > hr {
  height: 1px;
  width: 60%;
  border: 0;
  border-top: 1px solid rgba(200,200,200,.3);
  margin: 16px auto;
}
#wai-landing-act { margin: 20px; }
#wai-landing-act > a > button {
  font-family: Lato,sans-serif;
  font-size: 20px;
  color: rgba(255,255,255, 1.0);
  padding: 12px 32px;
  background-color: rgba(10,202,25,0.58);
}

@media (max-height: 500px) {
  #wai-landing-intro {
    max-width: 80%;
    margin: 5px auto;
    font-size: 22px;
  }
  #wai-landing-container-inner > hr { display: none; }
}
@media (max-width: 500px) {
  #wai-intro {
    max-width: 70%;
    margin: 20px auto;
    font-size: 22px;
  }
  #wai-landing-fast { font-size: 30px; }
  #wai-logo-container {
    max-width: 290px;
    min-height: 140px;
  }
  #wai-slogan {
    font-size: 14px;
    top: 84px;
  }
  #wai-landing-container-inner > hr { display: none; }
}
@media (max-height: 400px) {
  #wai-landing-container-inner { padding-top: 0px; }
  #wai-intro {
    margin: 0px auto;
    font-size: 22px;
  }
  #wai-landing-fast { font-size: 30px; }
  #wai-logo-container-inner {
    max-width: 290px;
    min-height: 120px;
  }
  #wai-logo { top: 10px; }
  #wai-slogan {
    font-size: 14px;
    top: 72px;
  }
}
@media (max-width: 315px) {
  #wai-logo-container { max-width: 80%; }
  #wai-slogan { display: none; }
}


/** Landing page demo **/

#wai-landing-demo {
  display: none;
  background-color: rgba(0,0,0,0.16);
  min-width: 400px;
  border-radius: 25px;
  margin: 60px 30px 20px 30px;
}
#wai-chat-container {
  flex: 1 0 auto;
  width: 100%;
  max-width: 430px;
  min-height: 180px;
  max-height: 290px;
  position: relative;
  margin: 4px auto 2px auto;

  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media (max-height: 440px) and (max-width: 440px) {
  #wai-chat-container.wai-in-demo {
    visibility: hidden;
    height: 80px;
    max-height: 80px;
  }
}
#wai-chat-container.wai-in-result {
  padding-left: 12px;
  padding-right: 12px;
}
@media (max-width: 440px) and (min-height: 440px) {
  #wai-chat-container { max-height: 200px; }
  #wai-chat-container.wai-in-demo {
    height: 290px;
    max-height: 290px;
  }
  #wai-chat-container.wai-in-result {
    height: 335px;
    max-height: 335px;
  }
}
@media (max-height: 440px) {
  #wai-chat-container {
    min-height: 70px;
    margin-top: 8px;
  }
  #wai-chat-container.wai-in-result {
    padding: 6px 10px 0px;
    margin-bottom: 0px;
  }
}
@media (max-height: 600px) {
  #wai-chat-container.wai-in-result { max-width: 600px; }
}
@media (max-height: 360px) {
  #wai-chat-container { margin-top: 2px; }
}
@media (max-height: 220px) {
  #wai-intro-container { display: none; }
  #wai-chat-container { display: none; }
  #wai-footer { display: none; }
}
@media (max-width: 440px), (max-height: 540px) {
  .wai-hide-mobile { display: none !important; }
}

.wai-demo-left,
.wai-demo-right,
.wai-demo-mid {
  display: flex;
}
.wai-demo-mid { justify-content: center; }
.wai-demo-left { justify-content: flex-start; }
.wai-demo-right { justify-content: flex-end; }
.wai-demo-right > div > p {
  font-style: normal;
  min-height: 25px;
}
.wai-demo-right .wai-landing-chat { width: 95%; }
.wai-demo-mid .wai-landing-chat {
  padding: 16px;
  border-radius: 36px;
}
.wai-demo-left .wai-landing-chat,
.wai-demo-right .wai-landing-chat {
  background-color: rgba(104,214,239,0.01);
}

.wai-landing-chat {
  margin-top: 5px;
  margin-bottom: 5px;
  background-color: rgba(104, 214, 239,0.1);
  border: 1px solid rgba(36, 129, 130, 0.38);
  padding: 12px;
  font-style: italic;
  border-radius: 20px;
  font-size: 18px;
  font-family: Lato,sans-serif;
  max-width: 95%;
  text-align: left;
  word-wrap: break-word;
}
.wai-demo-gen-btn > p,
.wai-landing-chat > p { margin-bottom: 0px; }

@media (max-width: 600px) {
  .wai-landing-chat {
    padding: 8px 10px;
    border-radius: 18px;
  }
}
@media (max-height: 440px) {
  .wai-landing-chat {
    margin-top: 3px;
    margin-bottom: 3px;
    max-width: 92%;
  }
  .wai-landing-chat,
  .wai-landing-chat > p {
    padding-top: 3px;
    padding-bottom: 3px;
    font-size: 17px;
  }
}
@media (max-height: 340px) {
  .wai-landing-chat,
  .wai-landing-chat > p {
    padding-top: 1px;
    padding-bottom: 1px;
    font-size: 15px;
  }
}

#wai-play-btn {
  display: block;
  width: 0;
	height: 0;
  border-top: 16px solid transparent;
	border-bottom: 16px solid transparent;
	border-left: 24px solid rgba(255,255,255,0.8);
  margin: 40px auto 20px auto;
  position: relative;
  z-index: 1;
  left: 4px;
}
#wai-play-btn:before {
  content: '';
  position: absolute;
  top: -30px;
  left: -46px;
  bottom: -30px;
  right: -14px;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,0.8);
}

.wai-brand-tiny {
  height: 40px;
  line-height: 60px;
  margin-top: 10px;
  padding-left: 5px;
  padding-right: 4px;
}
@media (max-height: 340px) {
  .wai-brand-tiny { height: 36px; }
}

.wai-demo-result {
  display: block;
  margin-left: 4px;
  margin-right: 4px;
}
@media (max-width: 400px) and (max-height: 300px) {
  .wai-demo-result { display: none; }
}
.wai-demo-result > p {
  text-align: left;
  word-wrap: break-word;
  font-size: 19px;
  font-family: Lato,sans-serif;
}
@media (max-width: 360px), (max-height: 360px) { .wai-demo-result > p { font-size: 14px; } }
@media (max-width: 400px), (max-height: 400px) { .wai-demo-result > p { font-size: 15px; } }

.wai-demo-gen-btn,
#wai-demo-next-btn {
  max-width: 240px;
  margin-top: 8px;
  margin-bottom: 10px;
  cursor: pointer;
  padding: 6px 12px;
  border-radius: 24px;
  border: 2px solid rgba(104,214,239,0.1);
  background-color: rgba(104,214,239,0.01);
  box-shadow: 1px 1px 2px 1px rgba(0,0,0,0.4);
  color: white;
  font-style: italic;
  font-size: 14px;
  text-align: center;
}
.wai-demo-gen-btn:hover,
#wai-demo-next-btn:hover {
  border: 2px solid rgba(20,108,167,0.4);
  box-shadow: 0px 0px 12px 1px rgba(20,108,167,0.5);
  -webkit-animation: none;
}
.wai-demo-start-btn {
  padding: 10px 20px !important;
  font-size: 18px !important;
}
@media (max-height: 440px) {
  #wai-demo-next-btn {
    margin-top: 2px;
    margin-bottom: 2px;
  }
  .wai-demo-start-btn {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
  }
}

/** Landing/prelaunch signup **/

#wai-notify-container {
  font-style: italic;
}
#wai-notify-container > p,
#wai-prelaunch-thanks > p {
  font-family: Lato,sans-serif;
  font-size: 20px;
}
@media (max-width: 600px) {
  #wai-notify-container { padding-bottom: 4px; }
  #wai-notify-container > p,
  #wai-prelaunch-thanks > p {
    font-size: 18px;
    margin: 5px 0px;
  }
}
@media (max-height: 440px) {
  #wai-notify-container { padding-bottom: 6px; }
  #wai-notify-container > p,
  #wai-prelaunch-thanks > p {
    font-size: 16px;
    margin: 3px 0px;
  }
}

#wai-prelaunch-thanks,
#wai-prelaunch-form {
  max-width: 360px;
  margin: 0px auto;
  padding-left: 20px;
  padding-right: 20px;
}
#wai-prelaunch-form > div {
  display: inline-table;
  vertical-align: middle;
}
#wai-prelaunch-email { display: inline-block; }

#wai-connect {
  font-size: 20px !important;
  margin: 0px;
  color: #222;
}
#wai-connect > span {
  display: inline-block;
  height: 34px;
  margin-left: 10px;
}
.wai-prelaunch-social {
  display: inline-block;
  margin: 0px 2px;
}
.wai-prelaunch-social > img {
  height: 28px;
}
.wai-prelaunch-bigsocial > img {
  height: 32px;
}

/** User home **/

#wai-motd > p > a { color: #efda68; }
#wai-motd-container {
  display: none;
  background-color: rgba(77,111,117,1);
  border: 0px;
  border-radius: 6px;
}

.wai-note-container {
  background-color: rgba(0,0,0,0.2);
  border: 2px solid rgba(0,0,0,0.8);
  display: flex;
  flex-direction: row;
  padding: 8px;
  max-width: 960px;
  margin: 5px auto 15px auto;
}
@media (max-height: 440px) {
  .wai-note-container { margin-bottom: 5px; }
}

.wai-note-content { flex: 1 1 auto; }
.wai-note-content > p {
  font-family: Lato,sans-serif;
  font-size: 20px;
  color: rgba(255,255,255,0.9);
  margin: 8px;
}
.wai-note-hide {
  flex: 0 1 auto;
  font-size: 16px;
  font-weight: bold;
  margin: auto 5px;
  cursor: pointer;
  padding: 5px;
  color: rgba(255,255,255,0.65);
}
@media (max-width: 500px) {
  .wai-note-container {
    padding: 4px;
    margin: 0px auto 6px auto;
  }
  .wai-note-content > p {
    font-size: 18px;
    margin: 6px;
  }
}


/** Overlay & content containers **/

.wai-page-container {
  flex: 1 0 auto;
  min-height: calc(100vh - 130px);
  width: 100%;
  padding: 16px;
  display: flex;
  flex-direction: column;
}
@media (max-width: 600px), (max-height: 600px) { .wai-page-container { padding: 10px 8px; } }
@media (max-width: 400px), (max-height: 400px) { .wai-page-container { padding: 4px; } }
@media (max-height: 440px) {
  .wai-page-container {
    padding: 0px;
    min-height: calc(100vh - 110px);
  }
}
@media (max-height: 340px) { .wai-page-container { min-height: calc(100vh - 92px); } }
@media (max-width: 990px) {
  .wai-overlay-container { margin: 40px; }
}

.wai-overlay-container,
.wai-content-container {
  max-width: 960px;
  border-radius: 6px;
  padding: 15px;
  background-color: rgba(0,0,0,0.2);
  margin-bottom: 10px;
}
.wai-overlay-container {
  position: relative;
  max-height: 100%;
}
.wai-overlay-exit-btn {
  top: 6px;
  right: 6px;
  border-radius: 4px;
  cursor: pointer;
}

.wai-content-container:last-child { margin-bottom: 0px; }

.wai-content-header {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.wai-content-search {
  min-width: 80px;
  margin-top: 2px;
  position: relative;
}
.wai-content-search > input {
  border-radius: 24px;
  border: 1px solid #ddd;
  margin: 1px;
  outline: none;
  padding: 4px 32px 4px 10px;
  font-size: 12px;
  color: #333;
  line-height: 18px;
}
@media (max-width: 360px) {
  .wai-content-search > input { width: 140px; }
}
.wai-content-search > input::placeholder { color: #aaa; }
.wai-content-search > input:focus {
  border: 2px solid #018cc3;
  margin: 0px;
}
.wai-search-icon {
  position: absolute;
  top: 6px;
  right: 8px;
  width: 18px;
  height: 18px;
  border: 0px;
  padding: 0px;
  margin: 0px;
  background-color: transparent;
  background-image: url(../img/icons/search_lightgray_24px.svg);
  background-size: 18px 18px;
}
.wai-search-icon:focus {
  outline: none !important;
  box-shadow: none !important;
}
.wai-content-search > input:active + button,
.wai-content-search > input:focus + button {
  background-image: url(../img/icons/search_gray_24px.svg);
}
.wai-content-search > input:valid + button {
  background-image: url(../img/icons/clear_lightgray_24px.svg);
}

.wai-overlay-container { 
  background-color: rgba(0,0,0,0.75);
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  padding: 40px;
}
@media (min-width: 1000px) {
  .wai-overlay-container {
    border: 3px solid white;
  }
}

.wai-overlay-preview {
  padding: 20px;
  max-width: 492px;
}
.wai-overlay-form-container {
  padding: 4px;
  margin: auto 0px;
  width: 382px;
}
@media (max-width: 520px), (max-height: 520px) {
  .wai-overlay-preview,
  .wai-overlay-form-container {
    margin: 0px 2px 4px 2px;
    padding-left: 5px;
    padding-right: 5px;
  }
}

.wai-content-title { margin-top: 4px; }
.wai-card-overlay-title,
.wai-content-title,
.wai-content-container > p {
  text-align: left;
  font-family: Lato,sans-serif;
  margin-left: 8px;
}
.wai-card-overlay-title { font-size: 24px; }
.wai-content-title,
.wai-content-container > p { font-size: 18px; }
@media (max-width: 520px) {
  .wai-card-overlay-title { font-size: 20px; }
  .wai-overlay-container,
  .wai-content-container { 
    padding: 4px; 
  }
}
@media (max-width: 380px) {
  .wai-card-overlay-title { font-size: 18px; }
}

@media (max-width: 520px), (max-height: 520px) {
  .wai-overlay-container {
    border: none;
    padding: 32px 0px 0px 0px;
    margin: 0px 4px;
  }
  .wai-overlay-exit-btn {
    position: absolute;
    top: 4px;
    right: 6px;
    border-radius: 4px;
  }
}


/** Text panels **/

.wai-text-panel-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-width: 780px;
}
.wai-text-panel {
  display: flex;
  flex-direction: column;
  margin: 0px auto;
  padding: 5px 45px 20px 45px;
  border-radius: 12px;

  background: rgba(0,0,0,0.65);
  color: #eee;
  font-family: Lato,sans-serif;
}
.wai-text-panel > .wai-text-panel-content {
  flex: 0 1 auto;
  text-align: left;
  font-size: 16px;
  overflow: scroll;
}
.wai-text-panel-content > p > a {
  margin-left: 1px;
  margin-right: 1px;
}
.wai-text-panel-content > p > a:link,
.wai-text-panel-content > p > a:visited {
  color: #efda68;
}
.wai-text-panel-content > h3 {
  font-weight: normal;
  font-size: 22px;
}

.wai-text-panel > h2,
.wai-text-panel > h3 {
  font-size: 24px;
  font-weight: normal;
  color: #eee;
  margin-bottom: 30px;
}
.wai-text-panel > p,
.wai-text-panel > ul,
.wai-text-panel > li {
  text-align: left;
  font-size: 20px;
}
@media (max-width: 500px) {
  .wai-text-panel > h2,
  .wai-text-panel > h3 {
    font-size: 18px;
    margin-bottom: 20px;
  }
  .wai-text-panel > p,
  .wai-text-panel > ul,
  .wai-text-panel > li {
    font-size: 16px;
  }
  .wai-text-panel > .wai-text-panel-content {
    font-size: 14px;
  }
}

.wai-text-panel a:link { color: blue; }
.wai-text-panel a:visited { color: #623; }
@media (max-width: 500px) {
  .wai-text-panel {
    margin: 0px 5px;
    padding: 5px 15px 5px 15px;
  }
}


/** Draft management **/

#wai-drafts-home,
#wai-kanban-container,
#wai-kanban-in-progress {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
}
#wai-kanban-container {
  width: 100%;
  max-width: 780px;
}
.wai-kanban-row {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}
.wai-kanban-list-container {
  width: 99%;
  min-width: 280px;
  background: rgba(5,7,8,.08);
  border-radius: 6px;
  margin: 4px 2px 2px;
  height: 100%;
}
.wai-kanban-list-title {
  width: 100%;
  height: 40px;
  background-color: rgba(0,0,0,0.2);
  color: #eee;
  font-family: Lato,sans-serif;
  font-size: 16px;
  padding: 8px;
}
@media (max-width: 662px) {
  .wai-kanban-list-title { display: none; }
  #wai-kanban-completed { display: none; }
}
.wai-kanban-list {
  height: 100%;
  width: 99%;
  max-height: calc(100vh - 258px);
  padding: 0px;
  overflow-y: auto;
  flex: 1 1 auto;
}
@media (max-width: 540px) {
  .wai-kanban-list { max-height: calc(100vh - 224px); }
}
@media (max-width: 520px) {
  .wai-kanban-list { max-height: calc(100vh - 202px); }
}
@media (max-height: 440px) {
  .wai-kanban-list { max-height: none; }
}

.wai-kanban-table {
  margin: 0px;
  width: 100%;
}
.wai-kanban-table > thead {
  background-color: #f4f4f4;
  border: 1px solid #f4f4f4;
}
.wai-kanban-table > thead > tr > th,
.wai-kanban-table > tbody > tr > td { padding: 10px; }
.wai-kanban-table > thead > tr > th:first-child,
.wai-kanban-table > tbody > tr > td:first-child {
  width: 20%;
  min-width: 100px;
}
.wai-kanban-table > tbody > tr {
  height: 60px;
  padding: 0px;
  border: 1px solid rgba(0,0,0,0.08);
  border-top: 0px;
  cursor: pointer;
}
.wai-kanban-table > tbody > tr:hover {
  background-color: rgba(255,255,255,0.03);
}
.wai-kanban-tbody > tr > td:last-child > p:first-child {
  font-style: normal;
  font-size: 18px;
  color: #ddd;
}
.wai-kanban-table > thead > tr > th:last-child,
.wai-kanban-table > tbody > tr > td:last-child > p {
  text-align: left;
}
.wai-kanban-table > tbody > tr > td:last-child > p {
  margin-bottom: 2px;
  font-style: italic;
  font-size: 11px;
  color: #bbb;
}
.wai-draft-list-btns { 
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-left: 4px;
}
.wai-draft-list-btns > *:first-child { margin-bottom: 4px; }
.wai-draft-list-btns > * {
  height: 32px;
  min-width: 32px;
  width: 75px;
  border: 1px solid #eee;
  border-radius: 20px;
  cursor: pointer;
  background-color: white;
  background-size: 20px 20px;
  background-repeat: no-repeat;
  background-position: 8px 50%;
  outline: none;
  color: #444;
  font-size: 13px;
  padding-left: 24px;
  font-family: Lato,sans-serif;
  display: flex;
  align-items: center;
  padding: 0px 6px 2px 31px;
}
.wai-draft-list-btns > *:active,
.wai-draft-list-btns > *:focus,
.wai-draft-list-btns > *:hover {
  border: 1px solid #aaa;
}
.wai-draft-list-btns > .wai-disabled {
  color: #bbb;
  cursor: default;
  pointer-events: none;
}
@media (min-width: 600px) {
  .wai-draft-list-btns { flex-direction: row; }
  .wai-draft-list-btns > * { height: 40px; }
  .wai-draft-list-btns > *:first-child { margin-right: 4px; }
}

.wai-view-compose-btn, .wai-view-compose-btn:active { background-image: url(../img/icons/chat_gray_24px.svg); }
.wai-view-generated-btn, .wai-view-generated-btn:active { background-image: url(../img/icons/doc_gray_24px.svg); }
.wai-view-generated-btn.wai-disabled { background-image: url(../img/icons/doc_lightgray_24px.svg); }

#wai-account-drafts { margin: 0px; }
#wai-account-drafts-body { height: 100%; }
#wai-account-drafts-body > tr {
  height: 60px;
  padding: 0px;
}
#wai-account-drafts-body > tr > td {
  padding: 12px;
  text-align: left;
  border-color: rgba(68,68,68,1);
}
#wai-account-drafts-body > tr > td > p:first-child {
  font-style: normal;
  font-size: 16px;
  color: rgba(200,200,200,1);
}
#wai-account-drafts-body > tr > td > p {
  font-style: italic;
  color: rgba(140,140,140,1);
  font-size: 11px;
  margin-bottom: 2px;
}
#wai-draft-manager-panels {
  display: flex;
  flex-direction: column;
}
#wai-draft-list-panel {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
#wai-draft-list-panel-body {
  height: 100%;
  padding: 0px;
  overflow-y: auto;
  flex: 1 1 auto;
}
#wai-draft-manager-panels > div {
  background-color: transparent;
}
#wai-draft-manager-panels > div > .panel-body {
  background-color: rgba(0,0,0,0.4);
}


/** Draft creation **/

.wai-new-draft-row {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}
.wai-new-draft-row:after {
  content: "";
  margin: 0px 10px;
  flex: 0 1 288px;
}
@media (min-width: 986px) {
  .wai-new-draft-row:after { flex: auto; }
}

.wai-overlay-order-form {
  padding: 15px;
  border: 1px solid white;
  border-radius: 6px;
}
@media (max-width: 990px) {
  .wai-overlay-form-container {
    width: 432px;
    padding: 0px;
  }
  .wai-overlay-order-form { border-width: 0px; }
}
@media (max-width: 400px) {
  .wai-overlay-order-form {
    padding-left: 4px;
    padding-right: 4px;
  }
}

.wai-overlay-form-instruction {
  text-align: center;
  font-size: 17px;
  font-family: Lato,sans-serif;
  margin-bottom: 20px;
}
@media (max-width: 400px) {
  .wai-overlay-form-instruction {
    font-size: 15px;
    margin-bottom: 15px;
  }
}
@media (max-width: 700px) {
  .wai-overlay-form-instruction {
    font-size: 15px;
  }
}

#wai-new-draft-form-title { min-width: 280px; }
@media (min-width: 600px), (max-width: 800px) {
  #wai-new-draft-form-title { min-width: 220px; }
}

.wai-overlay-form-submit-btn {
  font-size: 16px;
  background-color: #136263 !important;
  border: none;
  padding: 8px 15px;
}

#wai-draft-create-panel { flex: 0 1 auto; }
#wai-draft-create-panel-body { padding: 15px; }


/** Box-corner ribbons **/

.wai-ribbon {
  width: 150px;
  height: 150px;
  overflow: hidden;
  position: absolute;
}
.wai-ribbon::before,
.wai-ribbon::after {
  position: absolute;
  z-index: -1;
  content: '';
  display: block;
  border: 2px solid darkorange;
}
.wai-ribbon span {
  position: absolute;
  display: block;
  width: 225px;
  padding: 6px 0;
  background-color: #ef6e0f;
  box-shadow: 0 5px 10px rgba(0,0,0,.1);
  color: #fff;
  font: 700 12px/1 'Lato', sans-serif;
  text-shadow: 0 1px 1px rgba(0,0,0,.2);
  text-transform: uppercase;
  text-align: center;
}
.wai-ribbon-top-left {
  top: -1px;
  left: -1px;
}
.wai-ribbon-top-left::before,
.wai-ribbon-top-left::after {
  border-top-color: transparent;
  border-left-color: transparent;
}
.wai-ribbon-top-left::before {
  top: 0;
  right: 0;
}
.wai-ribbon-top-left::after {
  bottom: 0;
  left: 0;
}
.wai-ribbon-top-left span {
  right: 5px;
  top: 20px;
  transform: rotate(-45deg);
}


/** Card views **/

.wai-card {
  position: relative;
  background-repeat: no-repeat;
  background-size: 288px 162px;
  background-color: #fff;
  border-radius: 2px;
  width: 288px;
  height: 242px;
  display: inline-block;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
  margin: 10px;
  cursor: pointer;
}
.wai-card:hover {
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
.wai-card-media {
  background-size: cover;
  width: 288px;
  height: 162px;
}
.wai-card-media > p,
.wai-card-media-title {
  width: 100%;
  height: 40px;
  background-color: rgba(0,0,0,0.6);
  color: #eee;
  font-family: Lato,sans-serif;
  font-size: 16px;
  padding: 8px;
}

.wai-card-content {
  width: 100%;
  height: 80px;
  padding: 8px;
}
.wai-card-content > p {
  font-family: Lato,sans-serif;
  color: #444;
  font-size: 14px;
  text-align: left;
  margin: auto 0px;
}
.wai-card-content.wai-spaced > p { margin: 20px 0px; }
.wai-card-content > p.wai-card-title {
  font-size: 16px;
  padding: 8px;
}

.wai-card-overlay {
  background-position: 0px 40px;
  background-repeat: no-repeat;
  background-color: transparent;
  width: 432px;
  height: 363px;
  cursor: default;
}
.wai-card-overlay .wai-card-media {
  width: 432px;
  height: 283px;
}
.wai-card-overlay .wai-card-content {
  padding: 10px 0px;
  height: auto;
}
.wai-card-overlay .wai-card-content > p {
  font-size: 20px;
  color: #ddd;
}
@media (max-width: 520px) {
  .wai-card-overlay {
    max-width: 382px;
    width: 95%;
    height: 242px;
    margin: 0px;
  }
  .wai-card-overlay .wai-card-media {
    width: 100%;
    height: 202px;
  }
  .wai-card-overlay .wai-card-content > p { font-size: 15px; }
  .wai-card-overlay .wai-card-content > h3 {
    font-size: 18px;
    margin: 0px 0px 15px 0px;
  }
  .wai-overlay-preview,
  .wai-overlay-form-container {
    width: 382px;
    padding: 10px;
  }
}
@media (max-height: 520px) and (min-width: 600px) {
  .wai-card-overlay-title {
    font-size: 17px;
    margin-left: 0px;
  }
  .wai-card-overlay,
  .wai-card-overlay .wai-card-media {
    width: 100%;
    max-width: 320px;
    height: 180px;
    margin: 0px;
  }
  .wai-overlay-preview {
    max-width: 48%;
    padding: 2px;
    margin-left: 10px;
  }
  .wai-overlay-form-container {
    max-width: 49%;
    padding: 2px;
    margin-top: 4px;
  }
  .wai-card-overlay .wai-card-content > p { font-size: 15px; }
  .wai-card-overlay .wai-card-content > h3 {
    font-size: 18px;
    margin: 4px 0px;
  }
}


/** Tab navigation bar **/

.wai-tabnav {
  display: flex;
  justify-content: center;
  align-content: space-around;
  border-radius: 30px;
  margin: 0px auto 12px;
  box-shadow: 1px 1px 2px rgba(24,24,24,0.2);
}
@media (max-width: 400px), (max-height: 400px) {
  .wai-tabnav { margin: 4px auto 8px; }
}
@media (max-height: 440px) {
  .wai-tabnav { margin: 6px auto 6px; }
}

.wai-tabnav > div {
  padding: 8px 0px;
  width: 105px;
  border-right: 1px solid #eee;
}
.wai-tabnav > div:first-child {
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
}
.wai-tabnav > div:last-child {
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  border-right: 0px;
}
.wai-tabnav-active { background-color: #fff8dc; }
.wai-tabnav-inactive {
  background-color: white;
  cursor: pointer;
}
.wai-tabnav-inactive:hover { background-color: #fff3c2; }


/** Draft containers **/

.wai-draft-page-container {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.wai-draft-content-container-outer {
  flex: 1 0 auto;
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin: 0px auto;
  max-width: 780px;
  width: 99%;
}
.wai-draft-content-container {
  flex: 1 0 auto;
  background-color: rgba(0,0,0,0.4);
  padding: 0px;
  margin-bottom: 0px;
  max-width: 780px;
  width: 100%;
}
.wai-draft-title {
  flex: 0 1 auto;
  margin-top: 12px;
  margin-bottom: 0px;
  padding: 0px 5px;
}


/** Draft composition **/

#wai-writing-progress {
  max-width: 780px;
  width: 100%;
  margin: 0px auto 12px auto;

  transition:max-height 0.3s ease-out;
  height: auto;
  max-height: 20px;
}
#wai-writing-progress.collapsed {
  max-height: 0px;
  margin: 0px;
}
#wai-writing-progress .progress-bar { border-radius: 6px; }
@media (max-width: 400px), (max-height: 400px) {
  #wai-writing-progress{ margin: 4px auto 8px; }
}
@media (max-height: 440px) {
  #wai-writing-progress{ margin: 6px auto 6px; }
}

#wai-writing-panel {
  max-height: calc(100vh - 120px);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* Shorten #wai-writing-panel when wai-tabnav/wai-writing-progress visible */
.wai-tabnav:not([style*="display:none"]) + div #wai-writing-panel { max-height: calc(100vh - 150px); }
#wai-writing-progress:not([style*="display:none"]) + #wai-writing-panel { max-height: calc(100vh - 152px); }
@media (max-width: 600px), (max-height: 600px) {
  .wai-tabnav:not([style*="display:none"]) + div #wai-writing-panel { max-height: calc(100vh - 138px); }
  #wai-writing-progress:not([style*="display:none"]) + #wai-writing-panel { max-height: calc(100vh - 122px); }
}
@media (max-width: 400px), (max-height: 400px) {
  .wai-tabnav:not([style*="display:none"]) + div #wai-writing-panel { max-height: calc(100vh - 126px); }
  #wai-writing-progress:not([style*="display:none"]) + #wai-writing-panel { max-height: calc(100vh - 110px); }
}
@media (max-height: 440px) {
  .wai-tabnav:not([style*="display:none"]) + div #wai-writing-panel { max-height: calc(100vh - 106px); }
  #wai-writing-progress:not([style*="display:none"]) + #wai-writing-panel { max-height: calc(100vh - 90px); }
}

@media (max-height: 800px) {
  #wai-compose-container {
    justify-content: flex-start;
  }
}
@media (max-height: 440px) {
  #wai-compose-container { margin-bottom: 0px; }
  #wai-writing-panel { max-height: calc(100vh - 100px); }
}

#wai-writing-messages-container:last-child { padding-bottom: 15px; }
#wai-writing-title {
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(200,200,200,0.3);
  font-size: 18px;
  font-weight: normal;
}
@media (max-height: 550px) { #wai-writing-title { display: none; } }

#wai-writing-messages-container {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 0px;
  padding: 15px 0px;
}
#wai-compose-container[data-generated] > * > #wai-writing-messages-container {
  justify-content: flex-start;
}

#wai-writing-messages {
  font-size: 16px;
  color: #5e8e88;
  flex-direction: column;
  flex: 0 1 auto;
  justify-content: flex-end;
  overflow-y: auto;
  min-height: 0px;
  padding-left: 16px;
  padding-right: 16px;
}
#wai-writing-messages > div > div {
  border: none;
  text-align: left;
  max-width: 90%;
  word-wrap: break-word;
  box-shadow: 1px 1px 1px rgba(0,0,0,0.2);
}
.wai-user, .wai-prompt { display: flex; }
.wai-user > div,
.wai-prompt > div {
  border-radius: 20px;
  padding: 15px;
  margin-bottom: 4px;
}
.wai-prompt { justify-content: flex-start; }
.wai-user { justify-content: flex-end; }
.wai-prompt > div {
  background-color: rgba(2,11,45,0.22);
  color: ghostwhite;
}
.wai-user > div {
  background-color: rgba(52,179,132,0.35);
  color: ghostwhite;
}
.wai-response { text-align: left; }
.wai-response > textarea { resize: none; }
.wai-cuddle { margin-bottom: 4px !important; }
.wai-uncuddle { margin-top: 11px !important; }

#wai-writing-panel-input {
  padding-left: 10px;
  padding-right: 10px;
}
#wai-draft-gen-form {
  padding: 15px 0px;
  border-top: 1px solid rgba(200,200,200,0.3);
}
#wai-draft-gen {
  padding: 10px 20px;
  font-size: 18px;
}

#wai-edited-title,
#wai-generated-title {
  font-family: 'Lora', serif;
  font-weight: 400;
  font-size: 32px;
  padding-top: 12px;
  padding-bottom: 24px;
  padding-left: 16px;
  padding-right: 16px;
}
#wai-generated-content {
  color: ghostwhite;
  font-size: 18px;
  padding: 10px 20px;
}
#wai-generated-content > p {
  font-family: 'Lato', sans-serif;
  font-family: 'Open Sans', sans-serif;
  font-size: 18px;
  text-align: left;
  margin-bottom: 16px;
  color: ghostwhite;
  word-wrap: break-word;
}
#wai-generated-content h3,
#wai-generated-content h4 {
  font-family: 'Crimson Text', serif;
  text-align: left;
  word-wrap: break-word;
}
#wai-generated-content h3 {
  margin-top: 28px;
  font-size: 22px;
}
#wai-generated-content h4 {
  margin-top: 20px;
  font-size: 21px;
}

.wai-generated-info-container {
  max-width: 180px;
  float: right;
  margin-top: 10px;
  margin-left: 25px;
  margin-right: 5px;
  margin-bottom: 20px;
}
.wai-generated-info {
  max-width: 170px;
  margin: 0px auto;
  padding: 8px;
  border: 1px solid #eee;
  border-radius: 4px;
}
.wai-generated-info > p { font-size: 16px; }
@media (max-width: 430px) {
  #wai-generated-title { padding-bottom: 8px; }
  .wai-generated-info-container {
    max-width: 270px;
    width: 100%;
    max-width: 420px;
    clear: both;
  }
  .wai-generated-info { max-width: 260px; }
  .wai-generated-info > p { margin-bottom: 6px; }
  .wai-generated-info > p > br { display: none; }
  .wai-generated-info > p > span { margin-left: 6px; }
}

.wai-generated-sharing {
  position: fixed;
  right: calc((100vw - 900px) / 2);

  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  background-color: rgba(0,0,0,0.4);
  border-radius: 40px;
  box-shadow: 1px 1px 3px #ddd;
  margin-top: 30px;
  padding: 8px 4px;
  margin-left: 8px;

  display: none;
}
.wai-generated-sharing > img {
  margin: 4px 2px;
  cursor: pointer;
  padding: 8px;
  border-radius: 30px;
  transition: all 0.2s cubic-bezier(.25,.8,.25,1);
}
.wai-generated-sharing > img:hover { box-shadow: 1px 1px 8px #ccc; }
.wai-generated-sharing > img:active { box-shadow: 1px 1px 12px #666; }
@media (max-width: 920px) {
  .wai-generated-sharing { display: none; }
}


/** Copyedit overlay **/

#wai-copyedit-stripe-form-container { flex: 1 0 auto; }
#wai-copyedit-form-err {
  flex: 0 0 auto;
  margin-top: 10px;
}
#wai-copyedit-stripe-form-button-row {
  display: flex;
  justify-content: space-around;
  padding: 3px;
  margin: 8px 0px;
}
#wai-copyedit-training-ok-row { padding-top: 8px; }
#wai-copyedit-training-ok-row > p {
  font-size: 15px;
}
#wai-copyedit-stripe-form-button-row > p {
  margin: 10px 8px 0px 0px;
  font-size: 15px;
  font-family: Lato,sans-serif;
  line-height: 38px;
}
@media (max-width: 480px), (max-height: 400px) {
  #wai-copyedit-stripe-form-button-row > p {
    font-size: 14px;
  }
}


/** Manager **/

#wai-manager-container {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
}
@media (min-height: 801px) {
  #wai-manager-container > .row { height: calc(100vh - 102px); }
}
@media (max-height: 800px) {
  #wai-manager-container > .row { height: calc(130vh); }
}
#wai-manager-container > .row {
  min-height: calc(100vh - 102px);
  flex: 1 0 auto;
  display: flex;
  flex-direction: row;
}
.wai-manager-row {
  margin: 0px;
  flex-wrap: wrap;
}
.wai-manager-panels {
  min-height: 100%;
  display: flex;
  flex-direction: column;

  padding-left: 4px;
  padding-right: 4px;
  margin-bottom: 0px;
  color: #333;
}
.wai-manager-panels .panel-heading { padding: 2px; }
.wai-manager-panels .panel-body {
  padding: 8px;
  height: calc(100% - 43px);
}
.wai-manager-panels > h4 { font-size: 16px; }

.wai-editor-panel, .wai-manager-panel {
  flex: 1 1 auto;
  max-height: calc(95vh);
}
.wai-editor-panel .panel-heading { background: rgba(51, 156, 183, 1); }
.wai-picker-panel .panel-heading { background: rgba(206, 114, 0, 1); }
.wai-manager-panel-body { height: calc(100% - 43px); }
.wai-picker-panel-body,
.wai-manager-create-panel-body {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.wai-manager-create-panel-body > form { flex: 0 1 auto; }
.wai-picker-panel-body > table,
.wai-manager-create-panel-body > table {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: flex-start;
  margin-bottom: 0px;
  max-width: calc(100vw - 16px);
}
.wai-picker-panel-body > table > tbody,
.wai-manager-create-panel-body > table > tbody {
  flex: 1 1 auto;
  overflow-y: auto;
  height: 100%;
  min-height: 0px;
}
.wai-manager-panels .panel { height: calc(60% - 5px); }
.wai-manager-panels .wai-panel-full,
#wai-sample-manager-container-full,
#wai-sample-container-full {
  height: calc(100% - 5px);
}
.wai-manager-panels .wai-panel-half { height: calc(50% - 5px); }
@media (min-width: 620px) {
  #wai-sample-container { height: calc(60% - 5px); }
  #wai-annotate-container { height: 40%; }
  #wai-sample-manager-container { height: 33.333%; }
  #wai-class-manager-container { height: calc(33.333% - 5px); }
  #wai-rel-manager-container { height: calc(33.333% - 5px); }
  #wai-domain-editor-container,
  #wai-domain-manager-container {
    height: calc(60% - 5px);
  }
  #wai-samples-picked-container,
  #wai-samples-available-container {
    height: 40%;
  }
}

#wai-copyedit-content-title,
#wai-sample-content-title {
  padding-left: 40px;
  padding-right: 40px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
#wai-copyedit-content-body,
#wai-sample-content-body,
#wai-domain-body {
  display: flex;
  flex-direction: column;
}
#wai-copyedit-content-text,
#wai-sample-content-text {
  overflow-y: auto;
  text-align: left;
  font-size: 16px;
  padding-left: 10px;
  padding-right: 10px;
  flex: 1 1 auto;
}
#wai-copyedit-content-text > * > h3 {
  font-size: 16px;
}

#wai-sample-content-save {
  height: 42px;
  padding-top: 8px;
  flex: 0 0 auto;
}
#wai-sample-content-saved-at {
  margin-left: 10px;
  color: #bbb;
}
#wai-sample-annotations { height: 20%; }

#wai-domain-body-structure {
  height: 100%;
  display: flex;
  flex-direction: column;
}
#wai-domain-body-train {
  padding-top: 10px;
  flex: 0 0 auto;
}
#wai-domain-node-table {
  flex: 0 1 auto;
  margin-bottom: 0px;
  display: flex;
  flex-direction: column;
}
#wai-domain-node-table > tbody {
  overflow-y: auto;
  flex: 1 1 auto;
}

.wai-node-create-form { margin: 0px; }
.wai-form-inline {
  margin-left: 0px;
  margin-right: 0px;
}
.wai-form-inline .form-group {
  margin: 0px 0px;
  padding: 3px 3px;
}
.wai-node-indent-1 { 
  margin-left: 10px; 
  background-color: #eee; 
}
.wai-node-indent-2 { 
  margin-left: 20px; 
  background-color: #ddd;
}
.wai-node-indent-3 {
  margin-left: 30px;
  background-color: #ccc;
}
.wai-node-indent-4 { 
  margin-left: 40px; 
  background-color: #bbb;
}
.wai-node-indent-5 { 
  margin-left: 50px;
  background-color: #aaa;
}
.wai-node-indent-6 { 
  margin-left: 60px; 
  background-color: #999;
}
.wai-node-indent-7 { 
  margin-left: 70px; 
  background-color: #888;
}
.wai-node-indent-8 { 
  margin-left: 80px; 
  background-color: #777;
}
.wai-node-list {
  table-layout: fixed;
  color: #555;
}
.panel-body > div > p { color: #333; }

.wai-node-list > thead,
.wai-node-list > tbody,
.wai-node-list > thead > tr,
.wai-node-list > tbody > tr,
.wai-node-list > thead > tr > th,
.wai-node-list > tbody > tr > td {
  display:block;
}
.wai-node-list > tbody > tr > td {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.wai-node-list > tbody > tr > td:hover {
  text-overflow: clip;
  white-space: normal;
  word-break: break-all;
}
.wai-node-list > tbody > tr > td > button {
  height: 24px;
  line-height: 22px;
  padding-top: 1px;
  padding-bottom: 1px;
}
.wai-node-list > tbody > tr:after,
.wai-node-list > thead > tr:after {
  content: ' ';
  display: block;
  visibility: hidden;
  clear: both;
}
.wai-node-list-2-col > tbody > tr > td,
.wai-node-list-2-col > thead > tr > th {
  max-width: 50%;
  width: 50%;
  float: left;
}
.wai-node-list-3-col > tbody > tr > td,
.wai-node-list-3-col > thead > tr > th {
  max-width: 33.333%;
  width: 33.333%;
  float: left;
}
.wai-node-list-4-col > tbody > tr > td,
.wai-node-list-4-col > thead > tr > th {
  max-width: 25%;
  width: 25%;
  float: left;
}
.wai-node-list-5-col > tbody > tr > td,
.wai-node-list-5-col > thead > tr > th {
  max-width: 20%;
  width: 20%;
  float: left;
}
.wai-node-list-6-col > tbody > tr > td,
.wai-node-list-6-col > thead > tr > th {
  max-width: 16.667%;
  width: 16.667%;
  float: left;
}
.wai-node-list-2-1-col > tbody > tr > td,
.wai-node-list-2-1-col > thead > tr > th {
  max-width: 43%;
  width: 43%;
  float: left;
}
.wai-node-list-2-1-col > tbody > tr > td:last-child,
.wai-node-list-2-1-col > thead > tr > th:last-child {
  max-width: 14%;
  width: 14%;
}
.wai-node-list-3-1-col > tbody > tr > td,
.wai-node-list-3-1-col > thead > tr > th {
  max-width: 29%;
  width: 29%;
  float: left;
}
.wai-node-list-3-1-col > tbody > tr > td:last-child,
.wai-node-list-3-1-col > thead > tr > th:last-child {
  max-width: 13%;
  width: 13%;
}
.wai-node-list-4-1-col > tbody > tr > td,
.wai-node-list-4-1-col > thead > tr > th {
  max-width: 21.5%;
  width: 21.5%;
  float: left;
}
.wai-node-list-4-1-col > tbody > tr > td:last-child,
.wai-node-list-4-1-col > thead > tr > th:last-child {
  max-width: 14%;
  width: 14%;
}
.wai-node-list-1-4-1-col > tbody > tr > td,
.wai-node-list-1-4-1-col > thead > tr > th {
  max-width: 18.5%;
  width: 18.5%;
  float: left;
}
.wai-node-list-1-4-1-col > tbody > tr > td:first-child,
.wai-node-list-1-4-1-col > thead > tr > th:first-child,
.wai-node-list-1-4-1-col > tbody > tr > td:last-child,
.wai-node-list-1-4-1-col > thead > tr > th:last-child {
  max-width: 13%;
  width: 13%;
}

.wai-editing { border: 1px solid chocolate; }
.wai-edit-action {
  padding: 0px 6px;
  color: chocolate;
  cursor: pointer;
  font-size: 16px;
  line-height: 100%;
}


/** Privacy & Terms of Service **/

#wai-legal-container {
  max-width: 780px;
  margin: 0 auto;
}
@media only print {
  #wai-writing-title,
  #wai-generated-title { display: block !important; }
  .wai-page-container { height: initial; }
  #wai-writing-panel {
    height: initial;
    max-height: initial;
  }
  #wai-draft-gen-form { display: none !important; }
  .wai-generated-info { display: none !important; }
  .wai-tabnav { display: none !important; }
}


/** Subscription form **/

.wai-stripe-form { min-height: 300px; }
.wai-stripe-form > h3 {
  font-size: 18px;
  font-weight: normal;
  background-color: rgb(11,70,99);
  padding: 8px;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  margin: 0px;
}
.wai-stripe-form-notice {
  font-family: Lato,sans-serif;
  font-size: 17px;
  padding: 12px 0px;
  text-align: left;
}
.wai-stripe-form-notice > ul {
  margin-top: 0px;
  margin-bottom: 10px;
}
.wai-stripe-form-notice > ul > li { padding: 1px 0px; }
.wai-stripe-form-price,
.wai-stripe-form-price-detailed {
  font-family: Lato,sans-serif;
  font-size: 20px;
  margin: 0px;
  padding: 10px 0px 10px 0px;
  border-top: 1px solid #444;
}
.wai-stripe-form-price-detailed {
  display: flex;
  flex-direction: row;
}
.wai-stripe-form-price-detailed > div {
  flex: 1 0 auto;
  padding: 0px 6px;
}
.wai-stripe-form-price-labels { text-align: right; }
.wai-stripe-form-price-totals { text-align: left; }
.wai-stripe-form-price-detailed > div > p { margin-bottom: 4px; }
.wai-stripe-form-price-detailed > div > p:last-child { margin-top: 8px; }

@media (max-width: 520px), (max-height: 520px) {
  .wai-stripe-form > h3 { font-size: 15px; }
  .wai-stripe-form-price {
    margin: 12px 0px 2px 0px;
    font-size: 17px;
    padding-bottom: 2px;
  }
  .wai-stripe-form-price-detailed { font-size: 18px; }
  .wai-stripe-form-notice {
    padding: 4px 4px 0px 4px;
    font-size: 16px;
  }
  .wai-stripe-form-notice > ul { margin: 0px -15px; }
}
.wai-stripe-form-row { background-color: #090909; }
.wai-stripe-form-row > p > input[type="checkbox"] { margin-left: 8px; }
.wai-stripe-form-row > button {
  font-size: 16px;
  background-color: #136263;
  margin-top: 10px;
  margin-bottom: 0px;
  padding: 8px 32px;
  border-radius: 4px;
  border: 0px;
}
.wai-stripe-form-row > button:hover {
  background-color: #187a7b;
}
@media (max-width: 580px), (max-height: 400px) {
  .wai-stripe-form-row > button { padding: 8px 20px; }
}
@media (max-width: 480px) {
  .wai-stripe-form-row > button {
    font-size: 15px;
    padding: 8px 12px;
  }
}

.wai-stripe-form > button {
  background-color: #136263;
  border: none;
  padding: 8px 15px;
  margin: 10px 0px 0px 0px;
  border-radius: 4px;
}

#wai-subscribed-congrats {
  font-size: 19px;
  font-family: Lato,sans-serif;
  font-style: italic;
  margin-bottom: 30px;
}

.StripeElement {
  background-color: white;
  height: 40px;
  padding: 10px 12px;
  border-radius: 4px;
  border: 1px solid transparent;
  box-shadow: 0 1px 3px 0 #e6ebf1;
  -webkit-transition: box-shadow 150ms ease;
  transition: box-shadow 150ms ease;
}
.StripeElement--focus { box-shadow: 0 1px 3px 0 #cfd7df; }
.StripeElement--invalid { border-color: #fa755a; }
.StripeElement--webkit-autofill { background-color: #fefde5 !important; }


/** Loading widget **/

.wai-element-loading { background-color: #136263; }
.wai-loader {
  border: 12px solid rgba(19,98,99,0.4);
  border-top: 12px solid rgb(19,98,99);
  border-radius: 50%;
  width: 80px;
  height: 80px;
  animation: spin 2s linear infinite;
  margin: 0px auto;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}


/** Themes **/

.wai-theme-blue { background-color: rgb(6,122,169); }
.wai-theme-blue * .wai-page-container { background-color: rgb(2,140,195); }
.wai-theme-blue * .wai-content-container,
.wai-theme-blue * .wai-text-panel { background-color: rgb(6,122,169) !important; }
.wai-theme-blue * #wai-motd-container { background-color: rgb(6,122,169); }


.wai-theme-white {
  background-color: #f7f8f9;
  color: #111;
}
.wai-theme-white * #wai-header { 
  background-color: #fff;
  position: relative;
  box-shadow: 0px 1px 4px #bbb;
}
.wai-theme-white * .wai-overlay {
  background-color: rgba(0,0,0,0.96);
  color: #eee;
}
.wai-theme-white * .wai-overlay-container { border-width: 2px; }
.wai-theme-white * .wai-fast { color: #ffd249 !important; }
.wai-theme-white * #wai-intro-container > p > span.wai-fast { color: #2145d6cf !important }

.wai-theme-white * .wai-gold { color: #b76922 !important; }
.wai-theme-white * #wai-nav-login,
.wai-theme-white * #wai-nav-login > li,
.wai-theme-white * #wai-nav-login > li > a { color: #333 !important; }
.wai-theme-white * #wai-nav-account,
.wai-theme-white * #wai-nav-account > li > a,
.wai-theme-white * #wai-nav-account > li > ul > li > a {
  color: #333 !important;
  text-align: center;
}
.wai-theme-white * #wai-nav-login > li.active > a,
.wai-theme-white * #wai-nav-account > li.active > a {
  color: darkblue !important;
  background-color: transparent;
  border-bottom: 1px solid transparent;
}
.wai-theme-white * #wai-nav-account > li > a:hover {
  color: darkblue !important;
  border-bottom: 1px solid darkblue;
}
.wai-theme-white * #wai-nav-account > li.active > a:hover { color: darkblue !important; }
.wai-theme-white * #wai-nav-account > li.open > a,
.wai-theme-white * #wai-nav-account > li.open > a:hover { border-bottom: 1px solid transparent; }
.wai-theme-white * #wai-nav-account > li.open,
.wai-theme-white * #wai-nav-account > li.open > ul { background-color: #fff; }
.wai-theme-white * #wai-nav-account > li.dropdown > ul.dropdown-menu > li > a:hover {
  color: darkblue !important;
  text-decoration: underline;
}

.wai-theme-white * .wai-footer {
  background-color: #fff;
  box-shadow: 0px -1px 3px #ddd;
}
.wai-theme-white * .wai-footer-group > a { color: #888 !important; }
.wai-theme-white * .wai-footer-group > a:hover { color: #444 !important; }

.wai-theme-white * .btn-success {
  background-color: #4e70af;
  border-color: #286090;
}
.wai-theme-white * .wai-btn,
.wai-theme-white * .wai-btn:focus {
  color: #444;
  border-color: #444;
}
.wai-theme-white * .wai-btn:hover,
.wai-theme-white * .wai-btn:active {
  color: #111;
  border-color: #111;
}
.wai-theme-white * .wai-btn:hover,
.wai-theme-white * .wai-btn:active {
  background-color: #f6f6f6;
}
.wai-theme-white *.wai-btn-go,
.wai-theme-white *.wai-btn-go:active,
.wai-theme-white *.wai-btn-go:hover {
  color: #127331;
  border-color: #1d8641;
}
.wai-theme-white * .wai-btn-go:focus,
.wai-theme-white * .wai-btn-go:hover,
.wai-theme-white * .wai-btn-go:active {
  color: #fff;
  background-color: #52af77;
}

.wai-theme-white * .wai-page-container { background-color: #f7f8f9; }
.wai-theme-white * .wai-modal-content,
.wai-theme-white * #wai-motd-container,
.wai-theme-white * .wai-content-container {
  background-color: #fff;
  box-shadow: 1px 1px 3px #ddd;
}

.wai-theme-white * .wai-text-panel { color: #222; }
.wai-theme-white * .wai-text-panel > h2,
.wai-theme-white * .wai-text-panel > h3 { color: #333; }
.wai-theme-white * .wai-text-panel-content > p > a:link,
.wai-theme-white * .wai-text-panel-content > p > a:visited { color: #21599ef5; }

.wai-theme-white * .wai-settings-banner,
.wai-theme-white * .wai-settings-title { color: #222; }
.wai-theme-white * .wai-settings-subtitle { color: #666; }
.wai-theme-white * .wai-settings-subtitle > a:link,
.wai-theme-white * .wai-settings-subtitle > a:visited { color: #666; }
.wai-theme-white * .wai-settings-subtitle > a:hover { color: #222; }

.wai-theme-white * #wai-motd-hide { color: #ccc; }
.wai-theme-white * .wai-text-panel { background-color: #fff; }
.wai-theme-white * #wai-motd > p { color: #555; }

.wai-theme-white * .wai-kanban-list-container { background-color: transparent; }
.wai-theme-white * .wai-kanban-tbody > tr > td,
.wai-theme-white * .wai-kanban-tbody > tr > td > p { color: #777; }
.wai-theme-white * .wai-kanban-tbody > tr > td > p:first-child { color: #222; }
.wai-theme-white * .wai-kanban-tbody > tr:hover { background-color: rgba(0,0,0,0.03); }

.wai-theme-white * .wai-generated-sharing,
.wai-theme-white * #wai-generated-panel,
.wai-theme-white * #wai-writing-panel { background-color: #fff; }
.wai-theme-white * .wai-prompt > div {
  background-color: #f5f5f5;
  color: #222;
}
.wai-theme-white * .wai-generated-info {
  border-color: #aed2c2;
}
.wai-theme-white * .wai-user > div {
  background-color: rgb(1,140,195);
  color: #fff;
}
.wai-theme-white * .wai-user > div { color: #fff; }
.wai-theme-white * #wai-generated-content,
.wai-theme-white * #wai-generated-content > p { color: #222; }

.wai-theme-white * #wai-landing-fast { color: orange; }
.wai-theme-white * #wai-landing-container { color: #545454; }
.wai-theme-white * #wai-notify-container > p { color: #414958; }
.wai-theme-white * #wai-landing-container > hr { border-top-color: #bbb; }
.wai-theme-white * #wai-slogan { color: #888; }

.wai-theme-white * .wai-demo-gen-btn,
.wai-theme-white * #wai-demo-next-btn { color: #222; }