/*!***********************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[0].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[0].use[3]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[0].use[4]!./client/styles/main.scss ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************************************************/
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css);
/*!***************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[0].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[0].use[3]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[0].use[4]!./client/styles/main.scss (1) ***!
  \***************************************************************************************************************************************************************************************************************************************************************************************************************************/
.invite-container .credits, .signup-form h4, .terms-and-conditions, .name-survey input, .name-survey > a, .login-container .login-form .form-group input, .login-container .login-form button, .login-container .credits, .login-container .login-form-container .login-frame-container .login-input-container .email-input-container .login-input, .login-container .login-form-container .login-frame-container .login-input-container .email-input-container .password-input, .login-container .login-form-container .login-frame-container .login-input-container .password-input-container .login-input, .login-container .login-form-container .login-frame-container .login-input-container .password-input-container .password-input, .modal-container .configure .date-picker .picker, .modal-container .configure textarea, .modal-container .modal-survey-name, .modal-container button, .modal-container, h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 100;
  letter-spacing: 1px;
  text-decoration: none;
}

:root {
  --color-navy: #063957;
  --color-navy-deep: #04283e;
  --color-teal: #1ebbb8;
  --color-teal-deep: #19a9a6;
  --color-yellow: #dfe21c;
  --color-coral: #f1674d;
  --color-green: #04aa83;
  --color-pink: #ef5e8e;
  --color-purple: #9883bc;
  --color-blue-icon: #4f73ea;
  --color-light: #f7f9fb;
  --color-border: #e8ecf0;
  --color-divider: #d4dce5;
  --color-text: #1f1f1f;
  --color-text-muted: #555555;
  --color-text-faint: #888888;
  --font-heading: Poppins, Roboto, system-ui, sans-serif;
  --font-body: Roboto, system-ui, sans-serif;
  --radius-input: 6px;
  --radius-sm: 12px;
  --radius-md: 15px;
  --radius-lg: 18px;
  --shadow-card: 0 2px 12px rgba(6, 57, 87, 0.08);
  --shadow-pop: 0 8px 32px rgba(6, 57, 87, 0.12);
}

@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/Roboto-Regular.71779d80.ttf) format("truetype");
}
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/Roboto-Medium.ea7d3afe.ttf) format("truetype");
}
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/Roboto-Bold.9630c546.ttf) format("truetype");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/Poppins-SemiBold.ac8d04b6.ttf) format("truetype");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/Poppins-Bold.cdb29a5d.ttf) format("truetype");
}
@font-face {
  font-family: "DIN";
  src: local("DIN Light"), local("DIN-Light"), url(/fonts/DIN-Light.d2e32715.woff2) format("woff2"), url(/fonts/DIN-Light.16d7b37b.woff) format("woff"), url(/fonts/DIN-Light.2beef40d.ttf) format("truetype");
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: "DIN";
  src: local("DIN Medium"), local("DIN-Medium"), url(/fonts/DIN-Medium.a1f3c417.woff2) format("woff2"), url(/fonts/DIN-Medium.c7da88c9.woff) format("woff"), url(/fonts/DIN-Medium.ac50005d.ttf) format("truetype");
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: "DIN";
  src: local("DIN-Regular"), url(/fonts/DIN-Regular.6e13a6d0.woff2) format("woff2"), url(/fonts/DIN-Regular.9ff79a16.woff) format("woff"), url(/fonts/DIN-Regular.e9146b09.ttf) format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "icomoon";
  src: url(/fonts/icomoon.99db7dc5.ttf) format("truetype"), url(/fonts/icomoon.e3d8b371.woff) format("woff");
  font-weight: normal;
  font-style: normal;
}
[class^=icon-], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: "icomoon" !important;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-ArrowBack:before {
  content: "\e900";
}

.icon-ArrowDown:before {
  content: "\e901";
}

.icon-ArrowUp:before {
  content: "\e902";
}

.icon-Binary:before {
  content: "\e903";
}

.icon-BINARY:before {
  content: "\e903";
}

.icon-Bubble:before {
  content: "\e904";
}

.icon-BUBBLE:before {
  content: "\e904";
}

.icon-MetricsIcon:before {
  content: "\e905";
}

.icon-CalcHollow:before {
  content: "\e906";
}

.icon-Calendar:before {
  content: "\e907";
}

.icon-Checklist:before,
.icon-CHECKLIST:before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  background-color: currentColor;
  -webkit-mask-image: url(/fonts/list-checks.caa27131.svg);
  mask-image: url(/fonts/list-checks.caa27131.svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.icon-Ranking:before,
.icon-RANKING:before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  background-color: currentColor;
  -webkit-mask-image: url(/fonts/list-ordered.0a8337ee.svg);
  mask-image: url(/fonts/list-ordered.0a8337ee.svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.icon-Check:before {
  content: "\e908";
}

.icon-CircleColor:before {
  content: "\e909";
}

.icon-CircleColorSelected:before {
  content: "\e90a";
}

.icon-CircleFilled:before {
  content: "\e90b";
}

.icon-CircleHollow:before {
  content: "\e90c";
}

.icon-Close:before {
  content: "\e90d";
}

.icon-Cog:before {
  content: "\e90e";
}

.icon-Completion:before {
  content: "\e90f";
}

.icon-Duplicate:before {
  content: "\e910";
}

.icon-DuplicateCircle:before {
  content: "\e911";
}

.icon-EmoteNegative:before {
  content: "\e912";
}

.icon-EmoteNeutral:before {
  content: "\e913";
}

.icon-EmotePositive:before {
  content: "\e914";
}

.icon-Export:before {
  content: "\e915";
}

.icon-Eye:before {
  content: "\e916";
}

.icon-NOTICE:before {
  content: "\e916";
}

.icon-EyeCircle:before {
  content: "\e917";
}

.icon-Grid:before {
  content: "\e918";
}

.icon-MULTIGRID:before {
  content: "\e918";
}

.icon-HexFilled:before {
  content: "\e919";
}

.icon-Honeycomb:before {
  content: "\e91a";
}

.icon-HEX:before {
  content: "\e91a";
}

.icon-Hoolio:before {
  content: "\e91b";
}

.icon-Inactive:before {
  content: "\e91c";
}

.icon-Launched:before {
  content: "\e91d";
}

.icon-Minus:before {
  content: "\e91e";
}

.icon-OpenText:before {
  content: "\e91f";
}

.icon-OPENTEXT:before {
  content: "\e91f";
}

.icon-Orbit:before {
  content: "\e920";
}

.icon-ORBIT:before {
  content: "\e920";
}

.icon-Pencil:before {
  content: "\e921";
}

.icon-Plus:before {
  content: "\e922";
}

.icon-PlusFilled:before {
  content: "\e923";
}

.icon-PlusHollow:before {
  content: "\e924";
}

.icon-Quadrant:before {
  content: "\e925";
}

.icon-QUADRANT:before {
  content: "\e925";
}

.icon-Referral:before {
  content: "\e926";
}

.icon-Refresh:before {
  content: "\e927";
}

.icon-Responses:before {
  content: "\e928";
}

.icon-Rotary:before {
  content: "\e929";
}

.icon-RatingIcon:before {
  content: "\e92a";
}

.icon-RATING:before {
  content: "\e92a";
}

.icon-SkipHollow:before {
  content: "\e92b";
}

.icon-SquareFilled:before {
  content: "\e92c";
}

.icon-SquareHollow:before {
  content: "\e92d";
}

.icon-Emote0:before {
  content: "\e92e";
}

.icon-StarHollow:before {
  content: "\e92f";
}

.icon-Tag:before {
  content: "\e930";
}

.icon-TagCircle:before {
  content: "\e931";
}

.icon-ThankYou:before {
  content: "\e932";
}

.icon-Trash:before {
  content: "\e933";
}

.icon-TrashCircle:before {
  content: "\e934";
}

.icon-Unlaunched:before {
  content: "\e935";
}

.icon-Users:before {
  content: "\e936";
  /*
  single user: <i class="fa-solid fa-user"></i>
  users: <i class="fa-solid fa-users"></i>
  */
}

.icon-Visits:before {
  content: "\e937";
}

.icon-Welcome:before {
  content: "\e938";
}

.icon-OpenTextEmotePositive:before {
  content: "\e96f";
}

.icon-OpenTextEmoteNeutral:before {
  content: "\e976";
}

.icon-OpenTextEmoteNegative:before {
  content: "\e9b0";
}

.icon-Wrench:before {
  content: "\e939";
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

*:focus {
  outline: none;
}

html,
body {
  color: #063957;
  background: white;
  min-height: 100%;
  width: 100%;
  height: 100vh;
  margin: 0;
  padding: 0;
  font-family: "Roboto";
  font-weight: normal;
  font-style: normal;
  overflow-x: hidden;
}
html .survey-panel,
body .survey-panel {
  max-height: 220px;
  border-radius: 8px;
}
html .survey-panel .panel-footer img,
body .survey-panel .panel-footer img {
  height: 2rem;
  margin-right: 10px;
}
html .cookie-policy,
body .cookie-policy {
  padding: 3vh 10%;
}
html .cookie-policy > div > h4,
body .cookie-policy > div > h4 {
  font-weight: bold;
}
html .cookie-footer,
body .cookie-footer {
  justify-content: center;
  display: flex;
  padding: 2vh;
  font-size: small;
}

button {
  border: none;
  text-decoration: none;
}

#app {
  display: flex;
  height: 100%;
  min-height: 100%;
  width: 100%;
  overflow-y: hidden;
}

.flex-container {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  width: 100%;
  overflow-y: hidden;
}

.custom-color-button-container button:hover {
  background-color: #063957 !important;
  color: white !important;
}

.app-item-content { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  background-color: white;
  flex: 1;
  overflow-y: auto;
}

.app-item-content > div { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  background-color: white;
  flex: 1;
}

.example-enter {
  opacity: 0.01;
}

.example-enter.example-enter-active {
  opacity: 1;
  transition: opacity 5000ms ease-in;
}

.example-leave {
  opacity: 1;
}

.example-leave.example-leave-active {
  opacity: 0.01;
  transition: opacity 3000ms ease-in;
}

.app-item-content > .acct,
.acct {
  display: block;
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  background: #f7f9fb;
  font-family: "Roboto", system-ui, sans-serif;
  color: #1f1f1f;
}
.app-item-content > .acct *, .app-item-content > .acct *::before, .app-item-content > .acct *::after,
.acct *,
.acct *::before,
.acct *::after {
  box-sizing: border-box;
}

.acct__inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 32px 28px 48px;
}
@media (max-width: 640px) {
  .acct__inner {
    padding: 20px 16px 32px;
  }
}

.acct__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px 24px;
  margin-bottom: 20px;
}

.acct__head-side {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.acct__title {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 20px;
}
.acct__head .acct__title {
  margin-bottom: 0;
}
.acct__title h1 {
  margin: 0;
  font-family: "Poppins", "Roboto", system-ui, sans-serif;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.15;
  color: #063957;
}

.acct__eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #19a9a6;
}

.acct-loading {
  display: flex;
  justify-content: center;
  padding: 48px 0;
}

.acct-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding: 24px;
  border: 1px solid #e8ecf0;
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 2px 12px rgba(6, 57, 87, 0.08);
}
@media (max-width: 640px) {
  .acct-card {
    padding: 18px 16px;
  }
}
.acct-card > .ui-btn {
  align-self: flex-start;
}
.acct-card__title {
  margin: 0;
  font-family: "Poppins", "Roboto", system-ui, sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: #063957;
}
.acct-card__text {
  margin: 0;
  max-width: 640px;
  font-size: 14px;
  line-height: 1.55;
  color: #555555;
}
.acct-card__actions {
  display: flex;
  gap: 10px;
}

.acct-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  max-width: 480px;
}
.acct-field .inspector-input {
  width: 100%;
}
.acct-field input[readonly] {
  background: #f7f9fb;
  color: #555555;
}
.acct-field__label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #063957;
}
.acct-field__state {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 500;
  color: #888888;
}
.acct-field__state.is-saved {
  color: #04aa83;
}

.acct-hint {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: #888888;
}

.acct-error {
  font-size: 13px;
  color: #dc5238;
}

.acct-note {
  margin: 16px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: #555555;
}

.acct-link {
  padding: 0;
  border: 0;
  background: none;
  font-family: "Roboto", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #19a9a6;
  cursor: pointer;
}
.acct-link:disabled {
  color: #888888;
  cursor: default;
}

.acct-notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 16px;
  padding: 12px 16px;
  border: 1px solid rgba(223, 226, 28, 0.6);
  border-radius: 12px;
  background: rgba(223, 226, 28, 0.15);
  font-size: 14px;
  color: #063957;
}
.acct-notice svg {
  flex: none;
  margin-top: 2px;
}

.acct__inner--settings {
  max-width: 1080px;
}

.acct-settings {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}
@media (max-width: 800px) {
  .acct-settings {
    grid-template-columns: minmax(0, 1fr);
  }
}
.acct-settings__nav {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.acct-settings__nav button {
  padding: 9px 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  font-family: "Roboto", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  color: #555555;
  cursor: pointer;
}
.acct-settings__nav button:hover, .acct-settings__nav button:focus-visible {
  background: #fff;
  color: #063957;
  outline: none;
}
@media (max-width: 800px) {
  .acct-settings__nav {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
  }
}
.acct-settings__sections {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.acct-settings__sections > section {
  scroll-margin-top: 16px;
}

.acct-profile {
  display: flex;
  align-items: center;
  gap: 16px;
}
.acct-profile__photo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #f7f9fb;
  overflow: hidden;
  cursor: pointer;
}
.acct-profile__photo img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.acct-profile__photo:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(30, 187, 184, 0.12);
}
.acct-profile__photo-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.acct-plan {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.acct-plan__name {
  font-family: "Poppins", "Roboto", system-ui, sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: #063957;
}
.acct-plan__price {
  font-size: 16px;
  font-weight: 600;
  color: #1f1f1f;
}
.acct-plan__period {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #888888;
}

.acct-choice {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.acct-choice__card {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 160px;
  padding: 14px 16px;
  border: 1px solid #e8ecf0;
  border-radius: 12px;
  background: #fff;
  font-family: "Roboto", system-ui, sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #063957;
  cursor: pointer;
}
.acct-choice__card.is-on {
  border: 2px solid #1ebbb8;
  padding: 13px 15px;
  background: rgba(30, 187, 184, 0.06);
}
.acct-choice__card:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(30, 187, 184, 0.12);
}
.acct-choice__radio {
  width: 16px;
  height: 16px;
  border: 2px solid #d4dce5;
  border-radius: 50%;
}
.is-on .acct-choice__radio {
  border-color: #1ebbb8;
  background: radial-gradient(#1ebbb8 45%, transparent 50%);
}

.acct-langs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
  width: 100%;
}
.acct-langs__tile {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid #e8ecf0;
  border-radius: 12px;
  background: #fff;
  font-family: "Roboto", system-ui, sans-serif;
  font-size: 14px;
  text-align: left;
  color: #1f1f1f;
  cursor: pointer;
}
.acct-langs__tile.is-on {
  border-color: #1ebbb8;
  background: rgba(30, 187, 184, 0.06);
}
.acct-langs__tile:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(30, 187, 184, 0.12);
}
.acct-langs__check {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: 2px solid #d4dce5;
  border-radius: 5px;
  color: #fff;
}
.is-on .acct-langs__check {
  border-color: #1ebbb8;
  background: #1ebbb8;
}
.acct-langs__name {
  flex: 1;
  font-weight: 500;
}
.acct-langs__tag {
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(30, 187, 184, 0.12);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #19a9a6;
}

.acct-seats {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: 4px 12px;
  padding: 10px 14px;
  border: 1px solid #e8ecf0;
  border-radius: 15px;
  background: #fff;
}
.acct-seats__label {
  font-size: 12px;
  color: #555555;
}
.acct-seats strong {
  font-family: "Poppins", "Roboto", system-ui, sans-serif;
  font-size: 16px;
  color: #063957;
  text-align: right;
}
.acct-seats__bar {
  grid-column: 1/-1;
  display: block;
  width: 160px;
  height: 6px;
  border-radius: 3px;
  background: #e8ecf0;
  overflow: hidden;
}
.acct-seats__bar > span {
  display: block;
  height: 100%;
  background: #1ebbb8;
}

.acct-table-wrap {
  overflow-x: auto;
  border: 1px solid #e8ecf0;
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 2px 12px rgba(6, 57, 87, 0.08);
}

.acct-users {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  font-size: 14px;
}
.acct-users th {
  padding: 12px 16px;
  background: #f7f9fb;
  border-bottom: 1px solid #e8ecf0;
  text-align: left;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #555555;
}
.acct-users td {
  padding: 12px 16px;
  border-bottom: 1px solid #e8ecf0;
  vertical-align: middle;
}
.acct-users tbody tr:last-child td {
  border-bottom: 0;
}
.acct-users__row.is-disabled .acct-users__who strong {
  color: #888888;
}
.acct-users__user {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.acct-users__avatar {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(6, 57, 87, 0.08);
  font-size: 13px;
  font-weight: 700;
  color: #063957;
}
.acct-users__who {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.acct-users__who strong {
  font-weight: 600;
  color: #063957;
  overflow-wrap: anywhere;
}
.acct-users__who span {
  font-size: 13px;
  color: #555555;
  overflow-wrap: anywhere;
}
.acct-users__spinner {
  width: 18px;
  height: 18px;
  border-width: 2px;
}
.acct-users__actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

.acct-pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.acct-pill--creator {
  background: rgba(6, 57, 87, 0.08);
  color: #063957;
}
.acct-pill--accepted {
  background: rgba(30, 187, 184, 0.12);
  color: #127a88;
}
.acct-pill--invited {
  background: rgba(223, 226, 28, 0.25);
  color: #5c5e00;
}
.acct-pill--disabled, .acct-pill--unknown {
  background: #f0f2f4;
  color: #555555;
}

.acct-types {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
@media (max-width: 480px) {
  .acct-types {
    grid-template-columns: minmax(0, 1fr);
  }
}
.acct-types__card {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px;
  border: 1px solid #e8ecf0;
  border-radius: 12px;
  background: #fff;
  font-family: "Roboto", system-ui, sans-serif;
  text-align: left;
  cursor: pointer;
}
.acct-types__card strong {
  font-size: 14px;
  color: #063957;
}
.acct-types__card span {
  font-size: 12px;
  color: #555555;
}
.acct-types__card.is-on {
  border: 2px solid #1ebbb8;
  padding: 11px;
  background: rgba(30, 187, 184, 0.06);
}
.acct-types__card:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(30, 187, 184, 0.12);
}

.acct-integration {
  max-width: 720px;
}
.acct-integration__head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.acct-integration__icon {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(79, 115, 234, 0.12);
  color: #4f73ea;
}
.acct-integration__head > div {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.acct-secret {
  display: flex;
  gap: 8px;
}
.acct-secret .inspector-input {
  flex: 1;
  min-width: 0;
  font-family: monospace;
}
.acct-secret__toggle {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  border: 1px solid #d4dce5;
  border-radius: 6px;
  background: #fff;
  font-family: "Roboto", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #063957;
  cursor: pointer;
}
.acct-secret__toggle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(30, 187, 184, 0.12);
}

.app-item-header {
  flex: none;
}
.app-item-header:not(.is-app) {
  min-height: 80px;
}

.app-header {
  height: 64px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 20px;
  background: #063957;
  color: #fff;
  font-family: "Roboto", system-ui, sans-serif;
  position: relative;
  z-index: 10;
}
.app-header a {
  color: inherit;
  text-decoration: none;
}
.app-header__logo {
  flex: none;
  display: flex;
}
.app-header__logo img {
  height: 26px;
  display: block;
}
.app-header__divider {
  flex: none;
  width: 1px;
  height: 28px;
  background: rgba(255, 255, 255, 0.2);
}
.app-header__back {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px 7px 9px;
  border-radius: 15px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  transition: background-color 0.15s, border-color 0.15s;
}
.app-header__back:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.5);
}
.app-header__back:focus-visible {
  box-shadow: 0 0 0 2px #1ebbb8;
  outline: none;
}
.app-header__title {
  flex: 0 1 auto;
  min-width: 80px;
  margin: 0;
  font-family: "Poppins", "Roboto", system-ui, sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: normal;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.app-header__page-items {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
}
.app-header__page-items:empty {
  display: none;
}
.app-header__spacer {
  flex: 1;
}
.app-header__guide {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  border-radius: 15px;
  border: 2px solid #1ebbb8;
  background: transparent;
  color: #fff;
  font-family: "Roboto", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s;
}
.app-header__guide:hover {
  background: #1ebbb8;
}
.app-header__guide:focus-visible {
  box-shadow: 0 0 0 3px rgba(30, 187, 184, 0.4);
  outline: none;
}
.app-header__icon-btn {
  flex: none;
  position: relative;
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 50%;
  border: 0;
  background: transparent;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.app-header__icon-btn:hover, .app-header__icon-btn[data-state=open] {
  background: rgba(255, 255, 255, 0.1);
}
.app-header__icon-btn:focus-visible {
  box-shadow: 0 0 0 2px #1ebbb8;
  outline: none;
}
.app-header .unread-notification-indicator {
  position: absolute;
  top: 6px;
  right: 7px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #dfe21c;
  box-shadow: 0 0 0 2px #063957;
}
.app-header__avatar {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 6px 3px 3px;
  border-radius: 20px;
  border: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
}
.app-header__avatar:hover, .app-header__avatar.is-open {
  background: rgba(255, 255, 255, 0.1);
}
.app-header__avatar:focus-visible {
  box-shadow: 0 0 0 2px #1ebbb8;
  outline: none;
}
.app-header__avatar-img, .app-header__avatar-initials {
  width: 34px;
  height: 34px;
  border-radius: 50%;
}
.app-header__avatar-img {
  display: block;
  -o-object-fit: cover;
     object-fit: cover;
}
.app-header__avatar-initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.12);
  font-size: 13px;
  font-weight: 700;
}
.app-header__chevron {
  transition: transform 0.15s;
}
.is-open > .app-header__chevron, .app-header__chevron.is-up {
  transform: rotate(180deg);
}
@media (max-width: 1240px) {
  .app-header__collapsible {
    display: none;
  }
  .app-header__back {
    padding: 7px 9px;
  }
}
@media (max-width: 736px) {
  .app-header {
    gap: 10px;
    padding: 0 12px;
  }
  .app-header__guide {
    display: none;
  }
}

.app-popover {
  z-index: 30;
  background: #fff;
  color: #1f1f1f;
  border: 1px solid #e8ecf0;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(6, 57, 87, 0.12);
  font-family: "Roboto", system-ui, sans-serif;
  max-height: calc(100vh - 70px);
  overflow-y: auto;
  overflow-x: hidden;
  outline: none;
}

.app-menu {
  width: 280px;
  padding: 8px 0 0;
}
.app-menu__who {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 16px 12px;
  border-bottom: 1px solid #e8ecf0;
}
.app-menu__eyebrow {
  font-family: "Roboto", system-ui, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #1ebbb8;
  font-size: 11px;
}
.app-menu__account {
  font-family: "Poppins", "Roboto", system-ui, sans-serif;
  font-weight: 600;
  font-size: 15px;
  color: #063957;
}
.app-menu__user {
  font-size: 12px;
  color: #555555;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.app-menu__group {
  display: flex;
  flex-direction: column;
  padding: 6px 0;
}
.app-menu__group + .app-menu__group {
  border-top: 1px solid #e8ecf0;
}
.app-menu__group--last {
  padding-bottom: 8px;
}
.app-menu__item, .app-menu__account-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  border: 0;
  background: transparent;
  text-align: left;
  font-family: "Roboto", system-ui, sans-serif;
  color: #063957;
  cursor: pointer;
}
.app-menu__item:hover, .app-menu__account-row:hover {
  background: #f7f9fb;
}
.app-menu__item:focus-visible, .app-menu__account-row:focus-visible {
  background: #f7f9fb;
  outline: none;
  box-shadow: inset 2px 0 0 #1ebbb8;
}
.app-menu__item {
  padding: 9px 16px;
  font-size: 14px;
}
.app-menu__item--danger {
  color: #f1674d;
}
.app-menu__icon {
  flex: none;
  display: inline-flex;
  color: #1ebbb8;
}
.app-menu__label {
  flex: 1;
  min-width: 0;
}
.app-menu__tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #888888;
}
.app-menu__account-row {
  gap: 10px;
  padding: 8px 16px 8px 30px;
  font-size: 13px;
  color: #555555;
}
.app-menu__account-row.is-current {
  color: #063957;
  font-weight: 600;
  cursor: default;
}
.app-menu__account-row.is-current:hover {
  background: transparent;
}
.app-menu__check {
  color: #1ebbb8;
  flex: none;
}
.app-menu .app-header__chevron.is-up {
  transform: rotate(180deg);
}

.notifications-dropdown {
  width: 340px;
  display: flex;
  flex-direction: column;
}
.notifications-dropdown__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid #e8ecf0;
}
.notifications-dropdown__title {
  font-family: "Poppins", "Roboto", system-ui, sans-serif;
  font-weight: 600;
  font-size: 15px;
  color: #063957;
}
.notifications-dropdown__mark-all {
  border: 0;
  background: none;
  padding: 0;
  font-family: "Roboto", system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: #1ebbb8;
  cursor: pointer;
}
.notifications-dropdown__mark-all:hover {
  text-decoration: underline;
}
.notifications-dropdown__item {
  display: flex;
  gap: 12px;
  width: 100%;
  padding: 12px 16px;
  border: 0;
  border-bottom: 1px solid #e8ecf0;
  background: #fff;
  text-align: left;
  font-family: "Roboto", system-ui, sans-serif;
  cursor: pointer;
}
.notifications-dropdown__item:last-child {
  border-bottom: 0;
}
.notifications-dropdown__item:hover {
  background: #f7f9fb;
}
.notifications-dropdown__item:focus-visible {
  background: #f7f9fb;
  outline: none;
  box-shadow: inset 2px 0 0 #1ebbb8;
}
.notifications-dropdown__item.is-unread {
  background: rgba(30, 187, 184, 0.05);
}
.notifications-dropdown__icon {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #1ebbb8;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.notifications-dropdown__icon.is-error {
  background: #f1674d;
}
.notifications-dropdown__icon.is-progress {
  background: rgba(30, 187, 184, 0.12);
}
.notifications-dropdown__spinner {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(30, 187, 184, 0.3);
  border-top-color: #1ebbb8;
  border-radius: 50%;
  animation: ui-spin 0.8s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .notifications-dropdown__spinner {
    animation: none;
  }
}
.notifications-dropdown__text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.notifications-dropdown__message {
  font-size: 13px;
  line-height: 1.45;
  color: #1f1f1f;
}
.is-unread .notifications-dropdown__message {
  font-weight: 500;
}
.notifications-dropdown__meta {
  font-size: 11px;
  color: #888888;
}
.notifications-dropdown__dot {
  flex: none;
  width: 8px;
  height: 8px;
  margin-top: 6px;
  border-radius: 50%;
  background: #1ebbb8;
}
.notifications-dropdown__empty {
  padding: 32px 16px;
  text-align: center;
  font-size: 13px;
  color: #555555;
}

.support-modal h3 {
  margin: 0;
  font-family: "Poppins", "Roboto", system-ui, sans-serif;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: normal;
  color: #063957;
}
.support-modal__list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.support-modal__section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.support-modal__section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.support-modal__table {
  border: 1px solid #e8ecf0;
  border-radius: 12px;
  overflow: hidden;
  max-height: 320px;
  overflow-y: auto;
}
.support-modal__row {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) 170px;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border-top: 1px solid #e8ecf0;
  font-size: 13px;
}
.support-modal__row--head {
  border-top: 0;
  padding: 10px 14px;
  background: #f7f9fb;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #555555;
  position: sticky;
  top: 0;
}
.support-modal__date {
  color: #555555;
}
.support-modal__desc {
  line-height: 1.45;
  color: #1f1f1f;
}
.support-modal__status {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 8px;
  background: #f0f2f4;
  color: #555555;
}
.support-modal__status.Active {
  background: rgba(30, 187, 184, 0.12);
  color: #127a88;
}
.support-modal__status.Resolved {
  background: rgba(4, 170, 131, 0.12);
  color: #037a5e;
}
.support-modal__status.Cancelled {
  background: #f0f2f4;
  color: #555555;
}
.support-modal__loading {
  display: flex;
  justify-content: center;
  padding: 24px;
}
.support-modal__empty {
  padding: 24px;
  text-align: center;
  font-size: 14px;
  color: #555555;
  border: 1px dashed #d4dce5;
  border-radius: 12px;
}
.support-modal__guides {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}
.support-modal__guide {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  border: 1px solid #e8ecf0;
  border-radius: 12px;
  background: #fff;
  text-align: left;
  font-family: "Roboto", system-ui, sans-serif;
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s;
}
.support-modal__guide:hover {
  border-color: #1ebbb8;
  background: rgba(30, 187, 184, 0.04);
}
.support-modal__guide:focus-visible {
  border-color: #1ebbb8;
  box-shadow: 0 0 0 3px rgba(30, 187, 184, 0.12);
  outline: none;
}
.support-modal__guide-label {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  color: #063957;
}
.support-modal__guide-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
}
.support-modal__guide-cta {
  font-size: 12px;
  font-weight: 600;
  color: #1ebbb8;
}
.support-modal__tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #888888;
}
.support-modal__form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.support-modal__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.support-modal__field > span {
  font-size: 14px;
  font-weight: 500;
  color: #063957;
}
.support-modal__field input,
.support-modal__field textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #d4dce5;
  border-radius: 6px;
  padding: 12px 14px;
  font-family: "Roboto", system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: #1f1f1f;
}
.support-modal__field input:focus,
.support-modal__field textarea:focus {
  border-color: #1ebbb8;
  box-shadow: 0 0 0 3px rgba(30, 187, 184, 0.12);
  outline: none;
}
.support-modal__field textarea {
  resize: vertical;
}

.site-header { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  align-items: center;
  background-color: #F8F8F8;
  justify-content: space-between;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 10;
  box-shadow: 5px 2px 21px rgba(105, 105, 105, 0.32);
}
.site-header img {
  height: 3.5rem;
  padding: 10px 25px;
}
.site-header h2 {
  color: #063957;
  font-weight: bold;
  padding: 0;
  margin: 0;
}

.site-logo { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
}

.signup {
  color: #063957;
  font-weight: bold;
  font-size: 1rem;
}

.gray-divider {
  background-color: #919397;
  margin-bottom: 5px;
  margin-top: 5px;
  width: 2px;
}

@media (max-width: 736px) {
  .support-modal__row {
    grid-template-columns: 80px minmax(0, 1fr);
  }
  .support-modal__row > :last-child {
    grid-column: 2;
  }
}
.utility-icon { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  justify-content: space-between;
}
.utility-icon .icon { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  align-items: center;
  background-color: #fff;
  color: #063957;
  border: 2px solid #dfe21c;
  border-radius: 50%;
  cursor: pointer;
  height: 50px;
  justify-content: center;
  margin: 5px 5px 5px 15px;
  position: relative;
  width: 50px;
}
.utility-icon .fa {
  color: #063957;
  font-size: 50px;
}
.utility-icon .arrow-container {
  height: 25px;
  margin-top: 22px;
}

.disabled.icon {
  background-color: #f5f5f5;
  border-color: #a8a7a9;
  color: #a8a7a9;
  cursor: not-allowed !important;
}

.active.icon {
  background-color: #dfe21c;
  color: #f5f5f5;
}

.utility-panel { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  align-items: center;
  justify-content: center;
  width: 100%;
}
.utility-panel > div {
  width: 100%;
}
.utility-panel .template-info-header {
  text-align: center;
  padding-top: 2rem;
  align-self: flex-start;
  font-size: 1.25rem;
  position: absolute;
  width: 30%;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
.utility-panel .template-info-header div {
  border: 1px solid #063957;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  font-size: 14px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.ultility-panel-container, .ultility-panel-container-special {
  background-color: #fff;
  border: 2px solid #919397;
  border-radius: 10px;
  margin: 40px 0;
}
.ultility-panel-container .header, .ultility-panel-container-special .header { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  border-bottom: 2px solid #919397;
  justify-content: center;
  padding: 15px;
  letter-spacing: 0.15em;
  font-size: 24px;
  font-weight: 700;
}
.ultility-panel-container .header .mobile-close-button, .ultility-panel-container-special .header .mobile-close-button {
  display: none;
}
.ultility-panel-container .redirect, .ultility-panel-container-special .redirect { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  justify-content: center;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  font-size: 13px;
  padding: 0px 0px 15px;
}
.ultility-panel-container .disabled, .ultility-panel-container-special .disabled {
  opacity: 0.5;
  cursor: default;
}
.ultility-panel-container .disabled input, .ultility-panel-container-special .disabled input {
  cursor: default !important;
}
.ultility-panel-container .url, .ultility-panel-container-special .url { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  justify-content: center;
  border-top: 2px solid #063957;
}
.ultility-panel-container .url input, .ultility-panel-container-special .url input {
  width: 100%;
  border: 1.5px solid #919397;
  border-radius: 5px;
  padding: 8px 5px;
  text-align: left;
  margin: 20px;
}
.ultility-panel-container .powered-by, .ultility-panel-container-special .powered-by {
  display: flex;
  justify-content: center;
  align-items: center;
  border-top: 2px solid #063957;
  letter-spacing: 0.2em;
  font-size: 12px;
}
.ultility-panel-container .powered-by > input, .ultility-panel-container-special .powered-by > input {
  margin-top: 20px;
  margin-bottom: 20px;
}
.ultility-panel-container .weights, .ultility-panel-container-special .weights {
  max-height: 420px;
  padding: 0px 15px 15px 15px;
}
.ultility-panel-container .weight-container, .ultility-panel-container-special .weight-container { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  justify-content: space-between;
  margin-top: 15px;
  align-items: center;
}
.ultility-panel-container .weight-container .option-text, .ultility-panel-container-special .weight-container .option-text { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  flex: 1;
  width: auto;
  align-self: center;
  margin-right: 4px;
}
.ultility-panel-container .weight-container .option-text .option-color, .ultility-panel-container-special .weight-container .option-text .option-color {
  border-radius: 50%;
  width: 20px;
  min-width: 20px;
  height: 20px;
  align-self: center;
  margin-right: 10px;
}
.ultility-panel-container .weight-container .option-text .option-name, .ultility-panel-container-special .weight-container .option-text .option-name {
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100px;
  display: inline-block;
}
.ultility-panel-container .weight-container .option-text .option-text, .ultility-panel-container-special .weight-container .option-text .option-text { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  flex: 2 2 100%;
  align-self: center;
  font-size: 15px;
}
.ultility-panel-container .weight-container .weight-then, .ultility-panel-container-special .weight-container .weight-then { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  justify-content: flex-end;
}
.ultility-panel-container .weight-container .dropdown-container, .ultility-panel-container-special .weight-container .dropdown-container {
  max-width: 200px;
}
.ultility-panel-container .weight-container .selected-option, .ultility-panel-container-special .weight-container .selected-option {
  white-space: nowrap;
  overflow: hidden !important;
  text-overflow: ellipsis;
  max-width: 250px;
}
.ultility-panel-container .weight-container .dropdown-content, .ultility-panel-container-special .weight-container .dropdown-content {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ultility-panel-container .weight-container .dropdown-option, .ultility-panel-container-special .weight-container .dropdown-option {
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 100%;
}
.ultility-panel-container .weight-container .util-page-button, .ultility-panel-container-special .weight-container .util-page-button {
  color: #063957;
  border: solid #063957 1.9px;
  border-radius: 5px;
  padding: 0 1.2em;
  font-size: 20px;
  cursor: pointer;
}
.ultility-panel-container .weight-container .util-page-button.page-button-inactive, .ultility-panel-container-special .weight-container .util-page-button.page-button-inactive {
  color: #919397;
  border: solid #919397 1.9px;
  cursor: default;
}
.ultility-panel-container .weight-container .weight-input, .ultility-panel-container-special .weight-container .weight-input { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  text-transform: uppercase;
  width: auto;
}
.ultility-panel-container .weight-container .weight-input select, .ultility-panel-container-special .weight-container .weight-input select {
  margin-right: 10px;
  width: 100%;
}
.ultility-panel-container .weight-container .weight-input input, .ultility-panel-container-special .weight-container .weight-input input {
  width: 50px;
  border: 1.5px solid #919397;
  border-radius: 5px;
  padding: 8px 5px;
  text-align: center;
}
.ultility-panel-container .ai-panel-container, .ultility-panel-container-special .ai-panel-container {
  display: flex;
  flex-direction: column;
}
.ultility-panel-container .ai-panel-container #ai-chat-box, .ultility-panel-container-special .ai-panel-container #ai-chat-box {
  height: 230px;
  background-color: rgba(190, 190, 192, 0.2);
  border-radius: 5px;
  margin: 20px;
  box-sizing: border-box;
  resize: vertical;
  border: none;
  position: relative;
  display: flex;
  justify-content: center;
}
.ultility-panel-container .ai-panel-container #ai-chat-box #messages-container, .ultility-panel-container-special .ai-panel-container #ai-chat-box #messages-container {
  width: 100%;
  height: calc(80% - 10px);
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
}
.ultility-panel-container .ai-panel-container #ai-chat-box #messages-container .user-message, .ultility-panel-container-special .ai-panel-container #ai-chat-box #messages-container .user-message {
  width: 100%;
  justify-content: flex-end;
  display: flex;
  height: -moz-fit-content;
  height: fit-content;
}
.ultility-panel-container .ai-panel-container #ai-chat-box #messages-container .user-message .message-content, .ultility-panel-container-special .ai-panel-container #ai-chat-box #messages-container .user-message .message-content {
  background-color: white;
  color: #063957;
  padding: 10px;
  border-radius: 5px;
  width: 70%;
  margin: 5px;
}
.ultility-panel-container .ai-panel-container #ai-chat-box #messages-container .ai-message, .ultility-panel-container-special .ai-panel-container #ai-chat-box #messages-container .ai-message {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  height: -moz-fit-content;
  height: fit-content;
}
.ultility-panel-container .ai-panel-container #ai-chat-box #messages-container .ai-message .message-content, .ultility-panel-container-special .ai-panel-container #ai-chat-box #messages-container .ai-message .message-content {
  background-color: #063957;
  color: white;
  padding: 10px;
  border-radius: 5px;
  width: 70%;
  margin: 5px;
  white-space: pre-wrap;
}
.ultility-panel-container .ai-panel-container #ai-chat-box #ai-chat-textarea, .ultility-panel-container-special .ai-panel-container #ai-chat-box #ai-chat-textarea {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 20%;
  resize: none;
  border: none;
  border-radius: 5px;
  margin-bottom: 5px;
  border: 1px solid #063957;
}
.ultility-panel-container .ai-panel-container .button-container, .ultility-panel-container-special .ai-panel-container .button-container {
  display: flex;
  justify-content: space-between;
  width: 100%;
  box-sizing: border-box;
}
.ultility-panel-container .ai-panel-container .button-container .create-button, .ultility-panel-container-special .ai-panel-container .button-container .create-button {
  color: #DFE21C;
  background-color: #063957;
  height: 40px;
  border-radius: 5px;
  width: 40%;
  margin: 0px 20px 15px 20px;
  cursor: pointer;
}
.ultility-panel-container .ai-panel-container .button-container .send-button, .ultility-panel-container-special .ai-panel-container .button-container .send-button {
  color: white;
  background-color: #063957;
  height: 40px;
  border-radius: 5px;
  width: 40%;
  margin: 0px 20px 15px 0px;
  cursor: pointer;
}

.checklist-reorder-list {
  display: flex;
  flex-direction: column;
  width: 100%;
  box-sizing: border-box;
  max-height: 240px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 5px 10px 10px 10px;
}
.checklist-reorder-list .checklist-reorder-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  margin-bottom: 5px;
  border: 1.5px solid #e3e3e3;
  border-radius: 5px;
  background: #ffffff;
  font-size: 0.8157em;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.checklist-reorder-list .checklist-reorder-row.dragging {
  border-style: dashed;
}
.checklist-reorder-list .checklist-reorder-handle {
  flex: 0 0 auto;
  opacity: 0.45;
}
.checklist-reorder-list .checklist-reorder-swatch {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  border: 1px solid rgba(0, 0, 0, 0.15);
}
.checklist-reorder-list .checklist-reorder-label {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  max-width: 22ch;
}

.ultility-panel-container-special.disabled {
  opacity: 0.5;
}
.ultility-panel-container-special.disabled * {
  cursor: not-allowed !important;
}

.ultility-panel-container-special {
  margin-bottom: 90px;
  height: auto;
}
.ultility-panel-container-special .hex-submit { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  justify-content: center;
}
.ultility-panel-container-special .hex-submit input {
  width: 100%;
  border: 1.5px solid #919397;
  border-radius: 5px;
  padding: 8px 5px;
  text-align: left;
  margin: 20px;
}
.ultility-panel-container-special .loading {
  display: flex;
  justify-content: center;
  align-items: center;
}
.ultility-panel-container-special .rating-colors {
  display: flex;
  justify-content: space-around;
  padding: 20px 10px 10px 10px;
  font-size: 0.8157em;
}
.ultility-panel-container-special .label-first {
  flex: 1;
  border-top: 2px solid #e3e3e3;
  padding-top: 5px !important;
}
.ultility-panel-container-special .label-gap {
  flex: 1;
}
.ultility-panel-container-special .label-second {
  flex: 6;
  border-top: 2px solid #e3e3e3;
  padding-top: 5px !important;
}
.ultility-panel-container-special .rating-color {
  padding: 3px;
  width: 15px;
  border-radius: 5px;
  text-align: center;
  border: 2px solid #063957;
  cursor: pointer;
}
.ultility-panel-container-special .rating-colors-label {
  display: flex;
  padding-left: 15px;
  padding-right: 15px;
}

.arrow-container {
  position: relative;
}

.arrow-right {
  border-bottom: 10px solid transparent;
  border-left: 10px solid #fff;
  border-top: 10px solid transparent;
  height: 0;
  position: absolute;
  right: -8px;
  top: 0;
  width: 0;
  z-index: 1;
}

.arrow-right-border {
  border-bottom: 12px solid transparent;
  border-left: 11px solid #919397;
  border-top: 12px solid transparent;
  height: 0;
  position: absolute;
  right: -10px;
  top: -2px;
  width: 0;
}

#trash-circle-inactive {
  color: gray;
  cursor: not-allowed;
}

#plus-hollow-inactive {
  color: gray;
  cursor: not-allowed;
}

.bubble-counter { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  align-content: center;
  align-items: center;
  justify-content: center;
}
.bubble-counter .numOfBubbles { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  align-items: center;
  margin-top: 20px;
}
.bubble-counter .circle { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  align-items: center;
  border: 2px solid #063957;
  border-radius: 50%;
  font-size: 2rem;
  height: 100px;
  justify-content: center;
  margin: 10px;
  width: 100px;
}
.bubble-counter > span { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  flex: 1;
  font-size: 1.7rem;
  justify-content: center;
}

.box-counter { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  align-content: center;
  align-items: center;
  justify-content: center;
}
.box-counter .numOfBubbles { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  align-items: center;
  margin-top: 20px;
}
.box-counter .box { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  align-items: center;
  border: 2px solid #063957;
  font-size: 2rem;
  height: 100px;
  justify-content: center;
  margin: 10px;
  width: 100px;
}
.box-counter > span { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  flex: 1;
  font-size: 1.7rem;
  justify-content: center;
}

.ultility-panel-container-special .watermark-check {
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom: 2px solid #919397;
  letter-spacing: 0.2em;
  font-size: 12px;
}
.ultility-panel-container-special .watermark-check .watermark-check-label {
  margin-left: 3px;
  margin-top: 15px;
  margin-bottom: 15px;
}
.ultility-panel-container-special .image-input > span {
  margin-top: 15px;
  margin-bottom: 0px;
  letter-spacing: 0.2em;
  font-size: 13px;
  text-transform: uppercase;
}
.ultility-panel-container-special .video-input > span {
  margin-top: 15px;
  margin-bottom: 0px;
  letter-spacing: 0.2em;
  font-size: 13px;
  text-transform: uppercase;
}
.ultility-panel-container-special .conditions { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  flex-direction: column;
}
.ultility-panel-container-special .conditions .active {
  background-color: #063957;
  color: #fff;
}
.ultility-panel-container-special .conditions > img {
  margin: 3px 3px 3px 3px;
  border: 1px solid grey;
  border-radius: 2px;
  height: 16px;
  width: 16px;
}
.ultility-panel-container-special .conditions .no-answer-input {
  color: #063957;
  height: 18px;
  width: 18px;
}
.ultility-panel-container-special .conditions-inner {
  overflow-y: auto;
  max-height: 150px;
}
.ultility-panel-container-special {
  /*.conditions-inner:hover {
    overflow-y: auto;
    // padding-right: 1px;
    max-height: 101px;
  }*/
}

.condition-add, .condition-entry { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  align-items: center;
  border-radius: 5px;
  font-size: 0.9rem;
  justify-content: space-between;
  letter-spacing: 2px;
  margin: 5px;
  padding: 8px;
  text-transform: uppercase;
}

.condition-entry input {
  border-style: none;
  border: 2px solid #063957;
  border-radius: 5px;
  max-width: 50px;
  padding: 5px;
  text-align: right;
}

.conditions-icon {
  cursor: pointer;
  font-size: 1.2rem;
}

.conditions-icon:hover {
  color: #1ebbb8;
}

.condition-entry:hover {
  background-color: #063957;
  color: #fff;
  cursor: pointer;
}

.multi-grid-answers { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  justify-content: center;
  align-items: center;
  margin: 1vh;
}
.multi-grid-answers span {
  cursor: pointer;
  font-size: 1.63vw;
}
.multi-grid-answers .num-answers { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  background-color: #063957;
  color: #fff;
  border-radius: 50%;
  align-items: center;
  height: 0vw;
  justify-content: center;
  margin: 0 10px;
  padding: 1.805vw;
  width: 0vw;
  font-size: 2.11vw;
}

.multi-grid-num-answers { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  justify-content: space-around;
  padding: 10px;
}
.multi-grid-num-answers .button {
  background-color: #fff;
  border: 2px solid #063957;
  border-radius: 7px;
  color: #063957;
  padding: 7px 20px;
  cursor: pointer;
  min-width: 58px;
  text-align: center;
  text-transform: uppercase;
  font-size: 0.6157em;
  font-weight: medium;
  letter-spacing: 0.2em;
}
.multi-grid-num-answers .button.selected {
  background: #063957;
  color: #fff;
  box-shadow: inset 0px 0px 0px 2px white;
}
.multi-grid-num-answers .multi-select-section { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  align-items: center;
  flex: 1;
  justify-content: center;
}
.multi-grid-num-answers .num-answers { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  align-items: center;
  background-color: #063957;
  border-radius: 50%;
  color: #fff;
  height: 0vw;
  justify-content: center;
  margin: 0 10px;
  padding: 1.805vw;
  width: 0vw;
  font-size: 2.11vw;
}
.multi-grid-num-answers span {
  cursor: pointer;
  font-size: 1.6vw;
}

.ratings {
  padding-top: 30px !important;
}

@media screen and (max-height: 900px) {
  .utility-panel .ultility-panel-container .weights, .utility-panel .ultility-panel-container-special .weights {
    max-height: 260px !important;
  }
  .utility-panel .conditions-inner {
    max-height: 101px;
  }
}
.language-picker-icon {
  position: relative;
}

.language-picker-flag {
  font-size: 1.55rem;
  line-height: 1;
  display: block;
}

.language-picker-dropdown {
  position: absolute;
  right: calc(100% + 8px);
  top: 0;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 6px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14);
  min-width: 190px;
  z-index: 50;
  overflow: hidden;
}

.language-picker-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  font-size: 0.85rem;
  cursor: pointer;
  white-space: nowrap;
}
.language-picker-option:hover {
  background: #f5f5f5;
}
.language-picker-option span {
  font-size: 1.15rem;
  line-height: 1;
}
.language-picker-option--active {
  background: #e8f5e9;
  font-weight: 600;
}
.language-picker-option--clear {
  color: #888;
  border-bottom: 1px solid #f0f0f0;
  font-style: italic;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.ReactModal__Content { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  animation-duration: 0.6s;
  animation-name: fadeIn;
  flex-direction: column;
  padding: 0;
}

.modal-container {
  width: 600px;
}
.modal-container .submit-button:hover {
  background-color: #1ebbb8;
}
.modal-container .filters {
  height: 75vh;
}
.modal-container .filters > .scrollarea { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  flex-wrap: nowrap;
  overflow: hidden;
  background: #f5f5f5;
  height: 100%;
}
.modal-container .filters > .scrollarea > .scrollarea-content { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  flex: 1;
  overflow: visible;
  overflow-y: scroll;
}
.modal-container .filters > .scrollarea > .scrollarea-content .andor-circle {
  border-radius: 50%;
  border: #063957 solid 1px;
  text-align: center;
  height: 48px;
  width: 48px;
  padding: 2px;
  position: fixed;
  background: #ffffff;
  z-index: 2;
  left: 4px;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.modal-container .filters > .scrollarea > .scrollarea-content .andor-circle .and {
  border-top-left-radius: 50px;
  border-top-right-radius: 50px;
  padding: 2px 0;
}
.modal-container .filters > .scrollarea > .scrollarea-content .andor-circle .and span {
  line-height: 20px;
  font-size: 13px;
}
.modal-container .filters > .scrollarea > .scrollarea-content .andor-circle .or {
  border-bottom-left-radius: 50px;
  border-bottom-right-radius: 50px;
  padding: 2px 0;
}
.modal-container .filters > .scrollarea > .scrollarea-content .andor-circle .or span {
  line-height: 20px;
  font-size: 14px;
}
.modal-container .filters > .scrollarea > .scrollarea-content .andor-circle .active {
  color: #ffffff;
  background-color: #063957;
}
.modal-container .filters > .scrollarea > .scrollarea-content .plus {
  border-radius: 50%;
  border: #063957 solid 1px;
  color: #063957;
  text-align: center;
  width: 48px;
  height: 48px;
  cursor: pointer;
  background-color: #ffffff;
  position: relative;
  left: 7px;
}
.modal-container .filters > .scrollarea > .scrollarea-content .plus span {
  line-height: 48px;
}
.modal-container .filters > .scrollarea > .scrollarea-content .filters-groups { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  flex: 1;
  margin-right: 20px;
}
.modal-container .filters > .scrollarea > .scrollarea-content .filters-groups .filter-groups-container { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  flex-direction: column;
  flex: 1;
}
.modal-container .filters > .scrollarea > .scrollarea-content .filters-groups .filter-groups-container .filter-group {
  margin-bottom: 15px;
}
.modal-container .filters > .scrollarea > .scrollarea-content .filters-groups .filter-groups-container .filter-group .side-operation-circle {
  border-radius: 50%;
  border: #063957 solid 1px;
  background-color: #063957;
  text-align: center;
  width: 24px;
  height: 24px;
  cursor: pointer;
  align-self: center;
  z-index: 1;
  margin-left: 18px;
}
.modal-container .filters > .scrollarea > .scrollarea-content .filters-groups .filter-groups-container .filter-group .side-operation-circle span {
  line-height: 24px;
  font-size: 10px;
  color: #ffffff;
}
.modal-container .filters > .scrollarea > .scrollarea-content .filters-groups .filter-groups-container .filter-group .filter-group-container { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  flex: 1;
  flex-direction: row;
  border-left: 1px solid #063957;
  padding: 0 0 10px 30px;
  align-self: flex-end;
  margin-left: 30px;
}
.modal-container .filters > .scrollarea > .scrollarea-content .filters-groups .filter-groups-container .filter-group .filter-group-container .vertical-line {
  border-right: #063957 solid 1.5px;
  height: 80%;
  position: absolute;
  right: 48%;
  top: 30px;
}
.modal-container .filters > .scrollarea > .scrollarea-content .filters-groups .filter-groups-container .filter-group .filter-group-container .filter-group-content {
  flex: 8;
  background: #ffffff;
  border: #063957 1px solid;
  padding: 9px;
  position: relative;
}
.modal-container .filters > .scrollarea > .scrollarea-content .filters-groups .filter-groups-container .filter-group .filter-group-container .filter-group-content input[type=checkbox] {
  visibility: hidden;
}
.modal-container .filters > .scrollarea > .scrollarea-content .filters-groups .filter-groups-container .filter-group .filter-group-container .filter-group-content label.checkbox {
  cursor: pointer;
  display: inline-block;
  width: 16px;
  height: 16px;
  background: transparent;
  border: 1px solid #375b7b;
  border-radius: 4px;
  position: relative;
}
.modal-container .filters > .scrollarea > .scrollarea-content .filters-groups .filter-groups-container .filter-group .filter-group-container .filter-group-content label.checkbox:after {
  opacity: 0;
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  background: #375b7b;
  border-radius: 2px;
}
.modal-container .filters > .scrollarea > .scrollarea-content .filters-groups .filter-groups-container .filter-group .filter-group-container .filter-group-content label.checkbox.BUBBLE.button-questions {
  border-radius: 50%;
}
.modal-container .filters > .scrollarea > .scrollarea-content .filters-groups .filter-groups-container .filter-group .filter-group-container .filter-group-content label.checkbox.BUBBLE.button-questions:after {
  border-radius: 50%;
}
.modal-container .filters > .scrollarea > .scrollarea-content .filters-groups .filter-groups-container .filter-group .filter-group-container .filter-group-content input[type=checkbox]:checked + label:after {
  opacity: 1;
}
.modal-container .filters > .scrollarea > .scrollarea-content .filters-groups .filter-groups-container .filter-group .filter-group-container .filter-group-content .top-andor { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  justify-content: center;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.modal-container .filters > .scrollarea > .scrollarea-content .filters-groups .filter-groups-container .filter-group .filter-group-container .filter-group-content .top-andor .top-andor-container { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  flex-wrap: nowrap;
  border: #063957 1px solid;
  border-radius: 15px;
  padding: 1px;
  height: 18px;
  width: 95px;
  align-self: center;
  justify-content: space-between;
  background: #ffffff;
  position: relative;
  top: -20px;
}
.modal-container .filters > .scrollarea > .scrollarea-content .filters-groups .filter-groups-container .filter-group .filter-group-container .filter-group-content .top-andor .top-andor-container .and {
  cursor: pointer;
  padding: 0px 5px;
  flex: 1;
  text-align: center;
}
.modal-container .filters > .scrollarea > .scrollarea-content .filters-groups .filter-groups-container .filter-group .filter-group-container .filter-group-content .top-andor .top-andor-container .or {
  cursor: pointer;
  padding: 0px 5px;
  flex: 1;
  text-align: center;
}
.modal-container .filters > .scrollarea > .scrollarea-content .filters-groups .filter-groups-container .filter-group .filter-group-container .filter-group-content .top-andor .top-andor-container .active {
  color: #ffffff;
  background-color: #063957;
  border-top-left-radius: 23px;
  border-top-right-radius: 23px;
  border-bottom-left-radius: 23px;
  border-bottom-right-radius: 23px;
}
.modal-container .filters > .scrollarea > .scrollarea-content .filters-groups .filter-groups-container .filter-group .filter-group-container .filter-group-content .remove-box-minus {
  border: #063957 solid 1px;
  border-radius: 50%;
  height: 30px;
  width: 30px;
  position: relative;
  text-align: center;
  cursor: pointer;
  position: absolute;
  background-color: #ffffff;
  right: -15px;
  top: 50%;
}
.modal-container .filters > .scrollarea > .scrollarea-content .filters-groups .filter-groups-container .filter-group .filter-group-container .filter-group-content .remove-box-minus span {
  line-height: 30px;
}
.modal-container .filters > .scrollarea > .scrollarea-content .filters-groups .filter-groups-container .filter-group .filter-group-container .filter-group-content .questions { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  flex-direction: column;
  padding: 10px;
}
.modal-container .filters > .scrollarea > .scrollarea-content .filters-groups .filter-groups-container .filter-group .filter-group-container .filter-group-content .questions .question-pair .question-divider { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  justify-content: center;
  position: relative;
  border-bottom: #063957 solid 1px;
  margin-bottom: 25px;
}
.modal-container .filters > .scrollarea > .scrollarea-content .filters-groups .filter-groups-container .filter-group .filter-group-container .filter-group-content .questions .question-pair .question-divider .question-divider-container {
  color: #ffffff;
  flex-wrap: nowrap;
  border: #063957 1px solid;
  border-radius: 15px;
  padding: 1px;
  height: 18px;
  width: 48px;
  background: #063957;
  text-align: center;
  position: relative;
  bottom: -12px;
}
.modal-container .filters > .scrollarea > .scrollarea-content .filters-groups .filter-groups-container .filter-group .filter-group-container .filter-group-content .questions .question-pair .question-box {
  margin-bottom: 15px;
}
.modal-container .filters > .scrollarea > .scrollarea-content .filters-groups .filter-groups-container .filter-group .filter-group-container .filter-group-content .questions .question-pair .question-box .question-container { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  flex-direction: column;
}
.modal-container .filters > .scrollarea > .scrollarea-content .filters-groups .filter-groups-container .filter-group .filter-group-container .filter-group-content .questions .question-pair .question-box .question-container hr {
  color: #a8a7a9;
  background-color: #a8a7a9;
  border: 0px;
  width: 459px;
  height: 1px;
  margin-top: 16px;
  margin-bottom: 0px;
}
.modal-container .filters > .scrollarea > .scrollarea-content .filters-groups .filter-groups-container .filter-group .filter-group-container .filter-group-content .questions .question-pair .question-box .question-container .question-dropdown { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
.modal-container .filters > .scrollarea > .scrollarea-content .filters-groups .filter-groups-container .filter-group .filter-group-container .filter-group-content .questions .question-pair .question-box .question-container .question-dropdown .dropdown-container {
  flex: 5;
}
.modal-container .filters > .scrollarea > .scrollarea-content .filters-groups .filter-groups-container .filter-group .filter-group-container .filter-group-content .questions .question-pair .question-box .question-container .question-dropdown .question-remove { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  flex: 1;
  justify-content: center;
}
.modal-container .filters > .scrollarea > .scrollarea-content .filters-groups .filter-groups-container .filter-group .filter-group-container .filter-group-content .questions .question-pair .question-box .question-container .question-dropdown .question-remove .question-remove-minus {
  border: #063957 solid 1px;
  border-radius: 50%;
  height: 30px;
  width: 30px;
  position: relative;
  text-align: center;
  cursor: pointer;
}
.modal-container .filters > .scrollarea > .scrollarea-content .filters-groups .filter-groups-container .filter-group .filter-group-container .filter-group-content .questions .question-pair .question-box .question-container .question-dropdown .question-remove .question-remove-minus span {
  line-height: 30px;
}
.modal-container .filters > .scrollarea > .scrollarea-content .filters-groups .filter-groups-container .filter-group .filter-group-container .filter-group-content .questions .question-pair .question-box .question-container .answers { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  justify-content: center;
  flex-direction: column;
}
.modal-container .filters > .scrollarea > .scrollarea-content .filters-groups .filter-groups-container .filter-group .filter-group-container .filter-group-content .questions .question-pair .question-box .question-container .answers .answer-controls { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  flex-wrap: nowrap;
  justify-content: space-around;
  padding-top: 15px;
  position: relative;
  top: 10px;
}
.modal-container .filters > .scrollarea > .scrollarea-content .filters-groups .filter-groups-container .filter-group .filter-group-container .filter-group-content .questions .question-pair .question-box .question-container .answers .answer-controls .answer-control-item { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
.modal-container .filters > .scrollarea > .scrollarea-content .filters-groups .filter-groups-container .filter-group .filter-group-container .filter-group-content .questions .question-pair .question-box .question-container .answers .answer-controls .answer-control-item > div { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  align-items: center;
  height: 16px;
  border: #063957 solid 1px;
  border-radius: 9px;
  padding-left: 6px;
  padding-right: 6px;
  padding-top: 3px;
  padding-bottom: 3px;
  margin-left: 41px;
  background: #ffffff;
  cursor: pointer;
  position: relative;
}
.modal-container .filters > .scrollarea > .scrollarea-content .filters-groups .filter-groups-container .filter-group .filter-group-container .filter-group-content .questions .question-pair .question-box .question-container .answers .answer-controls .answer-control-item span {
  margin-left: 5px;
  margin-top: 1px;
}
.modal-container .filters > .scrollarea > .scrollarea-content .filters-groups .filter-groups-container .filter-group .filter-group-container .filter-group-content .questions .question-pair .question-box .question-container .answers .answer-controls .answer-control-item input {
  position: absolute;
}
.modal-container .filters > .scrollarea > .scrollarea-content .filters-groups .filter-groups-container .filter-group .filter-group-container .filter-group-content .questions .question-pair .question-box .question-container .answers .options-container { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  align-self: center;
  flex-wrap: wrap;
  border: #063957 solid 1px;
  border-radius: 6px;
  padding-left: 7px;
  padding-right: 7px;
  padding-bottom: 7px;
  padding-top: 21px;
  width: 100%;
}
.modal-container .filters > .scrollarea > .scrollarea-content .filters-groups .filter-groups-container .filter-group .filter-group-container .filter-group-content .questions .question-pair .question-box .question-container .answers .options-container .option-item { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  align-items: center;
  flex: 1 45%;
  cursor: pointer;
  position: relative;
}
.modal-container .filters > .scrollarea > .scrollarea-content .filters-groups .filter-groups-container .filter-group .filter-group-container .filter-group-content .questions .question-pair .question-box .question-container .answers .options-container .option-item span {
  margin-left: 5px;
}
.modal-container .filters > .scrollarea > .scrollarea-content .filters-groups .filter-groups-container .filter-group .filter-group-container .filter-group-content .questions .question-pair .question-box .question-container .answers .questions-container { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  align-self: center;
  flex-wrap: wrap;
  border: #063957 solid 1px;
  border-radius: 6px;
  padding-left: 7px;
  padding-right: 7px;
  padding-bottom: 7px;
  padding-top: 21px;
  width: 100%;
  margin-bottom: 15px;
}
.modal-container .filters > .scrollarea > .scrollarea-content .filters-groups .filter-groups-container .filter-group .filter-group-container .filter-group-content .questions .question-pair .question-box .question-container .answers .questions-container .option-item { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  align-items: center;
  flex: 1 45%;
  cursor: pointer;
  position: relative;
}
.modal-container .filters > .scrollarea > .scrollarea-content .filters-groups .filter-groups-container .filter-group .filter-group-container .filter-group-content .questions .question-pair .question-box .question-container .answers .questions-container .option-item span {
  margin-left: 5px;
}
.modal-container .filters > .scrollarea > .scrollarea-content .filters-groups .filter-groups-container .filter-group .filter-group-container .filter-group-content .questions .add-new-question { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  justify-content: center;
  border-bottom: #063957 solid 1px;
  border-bottom-width: 80%;
  position: relative;
}
.modal-container .filters > .scrollarea > .scrollarea-content .filters-groups .filter-groups-container .filter-group .filter-group-container .filter-group-content .questions .add-new-question .add-new-icon {
  background-color: #ffffff;
  align-self: center;
  border-radius: 50%;
  border: #063957 solid 1px;
  text-align: center;
  height: 24px;
  width: 24px;
  padding: 2px;
  position: relative;
  bottom: -15px;
  cursor: pointer;
}
.modal-container .filters > .scrollarea > .scrollarea-content .filters-groups .filter-groups-container .filter-group .filter-group-container .filter-group-content .questions .add-new-question .add-new-icon span {
  line-height: 24px;
}
.modal-container .filters > .scrollarea > .scrollarea-content .filters-groups .filter-groups-container .bottom-container { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  flex-wrap: nowrap;
  align-items: center;
  margin-top: 10px;
  margin-bottom: 10px;
}
.modal-container .filters > .scrollarea > .scrollarea-content .filters-groups .filter-groups-container .bottom-container .right-content { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  flex: 1;
  justify-content: center;
}
.modal-container .filters > .scrollarea > .scrollarea-content .filters-groups .filter-groups-container .bottom-container .right-content button.apply-filter {
  border: 2px solid #063957;
  color: #fff;
  background-color: #063957;
  text-transform: uppercase;
  margin-left: 45px;
  cursor: pointer;
}
.modal-container .plans {
  background: #f8f8f8;
  padding: 10px;
}
.modal-container .plans .loading { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  background: #000000;
  opacity: 0.35;
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
}
.modal-container .plans .loading span {
  color: #ffffff;
  flex: 1;
  align-self: center;
  text-align: center;
}
.modal-container .plans .plan-container { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  flex-wrap: nowrap;
  background: #ffffff;
  margin: 15px;
  padding: 15px;
}
.modal-container .plans .plan-container .left-panel {
  flex: 2;
  font-size: 12px;
}
.modal-container .plans .plan-container .left-panel .plan-title {
  font-weight: bold;
  font-size: 20px;
  margin-bottom: 5px;
}
.modal-container .plans .plan-container .left-panel .disclaimer {
  color: #919496;
  font-size: 10px;
  margin-top: 5px;
}
.modal-container .plans .plan-container .left-panel .plan-description a {
  color: #063957;
  font-weight: bold;
  display: block;
  margin-top: 10px;
}
.modal-container .plans .plan-container .right-panel {
  display: flex;
  flex: 1;
  align-self: center;
  font-size: 12px;
  padding: 10px;
}
.modal-container .plans .plan-container .right-panel a {
  width: 100%;
}
.modal-container .plans .plan-container .right-panel button.upgrade.confirm {
  background-color: #a3cf5e;
  color: #fff;
  border-color: #a3cf5e;
}
.modal-container .plans .plan-container .right-panel button.downgrade.confirm {
  background-color: #eb435d;
  color: #fff;
  border-color: #eb435d;
}
.modal-container .plans .plan-container .right-panel button {
  flex-wrap: nowrap;
  width: 100%;
  width: inherit;
  border: 2px solid #063957;
  margin: 0;
  padding: 0;
  width: 100%;
  flex: 1;
  height: 50px;
  background: white;
  color: #063957;
}
.modal-container .plans .plan-container .right-panel button:hover {
  background: #063957;
  color: white;
}
.modal-container .error {
  background: #f8f8f8;
  padding: 10px;
}
.modal-container .error .error-container {
  align-self: center; /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  flex-direction: column;
  text-align: center;
  flex-wrap: nowrap;
  background: #ffffff;
  margin: 15px;
  padding: 15px;
}
.modal-container .error .error-container img {
  width: 150px;
  margin: 0 auto;
}
.modal-container h2 { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  color: #a8a7a9;
  flex: 2;
  font-weight: bolder;
  justify-content: center;
  margin-bottom: 25px;
}
.modal-container button {
  align-self: center;
  background-color: #063957;
  border-radius: 5px;
  color: #fff;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: bolder;
  margin: 10px;
  padding: 15px 30px;
  text-transform: uppercase;
  width: 35%;
}
.modal-container .survey-modal-textarea {
  margin-top: 15px;
}
.modal-container .close {
  flex: 1;
}
.modal-container .close .icon-Close { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  color: #f0f0f0;
  flex: 1;
  justify-content: flex-end;
}
.modal-container .close .icon-Close::before {
  cursor: pointer;
  flex: none;
  padding: 12px;
}
.modal-container .header { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  background-color: #fff;
  flex: 1;
  justify-content: space-between;
  cursor: default;
}
.modal-container .header span {
  flex: 1;
}
.modal-container .header .fa-times { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  flex: 1;
  justify-content: flex-end;
}
.modal-container .header-below { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  background-color: #fff;
  justify-content: space-around;
  margin-left: 70px;
  margin-right: 70px;
}
.modal-container .header-below div {
  color: #a8a7a9;
  padding-bottom: 10px;
  font-size: 14pt;
  cursor: pointer;
}
.modal-container .active-modal {
  border-bottom: 4px solid #063957;
}
.modal-container .nav { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  background-color: #fff;
  flex: 1;
  justify-content: center;
}
.modal-container .nav .active {
  border-bottom: 3px solid #063957;
}
.modal-container .nav .outside {
  border-bottom: 3px solid #f0f0f0;
  flex: 0.7;
}
.modal-container .nav .seperater {
  width: 100%;
}
.modal-container .nav ul { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  justify-content: space-between;
  list-style: none;
  -webkit-margin-after: 0;
  -webkit-margin-before: 0;
  -webkit-padding-start: 0;
  width: 200px;
}
.modal-container .nav li {
  cursor: pointer;
  text-transform: uppercase;
  border-bottom: 3px solid #f0f0f0;
}
.modal-container .form-group { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  flex: 1;
}
.modal-container .modal-survey-name {
  background-color: #f5f5f5;
  border: 0;
  border-bottom: 1px solid #063957;
  color: #063957;
  flex: 1;
  font-size: 1rem;
  letter-spacing: 3px;
  margin-top: 10px;
  padding-bottom: 15px;
  text-align: center;
}
.modal-container.is-scrollable {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.modal-container.is-scrollable > .header,
.modal-container.is-scrollable > .header-below {
  flex: none;
}
.modal-container.is-scrollable > .configure,
.modal-container.is-scrollable > .body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
.modal-container.is-scrollable > .body {
  padding-bottom: 0;
}
.modal-container.is-scrollable > .body > .options {
  position: sticky;
  bottom: 0;
  z-index: 2;
  background-color: #f5f5f5;
  margin: auto -90px 0;
  padding: 12px 90px 20px;
}
.modal-container .configure { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  background-color: #f5f5f5;
  color: #a8a7a9;
  flex: 1;
  flex-direction: column;
  padding: 20px 90px;
}
.modal-container .configure .feedback-question {
  align-self: baseline;
  font-size: small;
  color: #063957;
}
.modal-container .configure textarea {
  background-color: #fff;
  border: 2px solid #063957;
  border-radius: 5px;
  color: #063957;
  height: 90px;
  max-width: 97%;
  padding: 10px;
  resize: none;
}
.modal-container .configure > span {
  align-self: flex-end;
}
.modal-container .configure .modal-checkbox { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  align-items: center;
  flex: 1;
  font-size: 0.7rem;
  justify-content: flex-end;
  padding: 11px 0;
  text-transform: uppercase;
}
.modal-container .configure .date-picker { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  flex: 1;
  justify-content: space-between;
  margin-top: 10px;
  padding: 10px 0;
}
.modal-container .configure .date-picker .picker {
  background-color: #fff;
  border: 2px solid #063957;
  border-radius: 4px;
  color: #063957;
  font-size: 0.8rem;
  padding: 10px 20px;
  text-align: center;
}
.modal-container .configure .color-container { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  align-items: center;
  color: #063957;
  flex-direction: column;
  font-size: 0.65rem;
  margin-top: 20px;
}
.modal-container .configure .color-container span {
  text-transform: uppercase;
  letter-spacing: 2px;
}
.modal-container .configure .color-container .colors { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  justify-content: space-around;
}
.modal-container .configure .color-container .colors .active {
  border: 3px solid #f5f5f5 !important;
  box-shadow: 0 0 0 2px #063957;
}

.color-selector { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  flex-wrap: wrap;
  justify-content: center;
}
.color-selector .custom-text {
  margin: 0px 0px 0px 45px;
}

.multiple-responses { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  flex-direction: column;
  align-items: center;
  font-size: 0.65rem;
  color: #063957;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin: 10px 0px 10px 0px;
}

.queue-body {
  padding: 11px 90px 20px 90px;
  text-align: center;
  background-color: #f5f5f5;
  height: 8vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.queue-body .survey-list {
  min-width: 400px;
  max-width: 550px;
  height: 3vh;
  border-radius: 5px;
  font-family: "Roboto";
  font-size: inherit;
  cursor: pointer;
}

.queue-footer {
  padding: 0px 20px 20px 20px;
  display: flex;
  justify-content: center;
  background-color: #f5f5f5;
}

.body {
  padding: 11px 90px 20px 90px;
  text-align: center;
  background-color: #f5f5f5;
}
.body .dialogue {
  color: #063957;
  font-size: 1.5rem;
}
.body .launch-icons { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  justify-content: space-around;
  margin-left: 70px;
  margin-right: 70px;
  transform: scale(0.75);
}
.body .launch-icons:has(> :nth-child(3)) {
  margin-left: 10px;
  margin-right: 10px;
}
.body .launch-icons:has(> :nth-child(3)) > div {
  flex: 1 1 0;
  min-width: 0;
  position: relative;
}
.body .launch-icons:has(> :nth-child(3)) > div + div:before {
  content: "";
  position: absolute;
  top: 68px;
  left: -50%;
  right: 50%;
  margin: 0 13px;
  height: 2px;
  background: #1293cc;
  z-index: 0;
}
.body .launch-icons:has(> :nth-child(3)) .paused .circle:before {
  content: none;
}
.body .launch-icons:has(> :nth-child(3)) .paused img {
  margin-right: 0;
}
.body .launch-icons:has(> :nth-child(3)) .circle {
  position: relative;
  z-index: 1;
}
.body .launch-icons__art {
  height: 50px; /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  align-items: center;
  justify-content: center;
}
.body .launch-icons__art img {
  max-height: 100%;
  width: auto;
}
.body .launch-icons > div {
  opacity: 0.5;
}
.body .launch-icons .active {
  opacity: 1;
  cursor: pointer;
}
.body .launch-icons .not-active {
  cursor: not-allowed;
  pointer-events: none;
}
.body .launch-icons .editable .inner-circle:after {
  content: "";
  position: absolute;
  top: 0.4em;
  left: 15px;
  width: 120px;
  height: 2px;
  background: #1293cc;
  z-index: -1;
}
.body .launch-icons .paused .circle:before {
  content: "";
  position: absolute;
  top: 0.4em;
  right: 15px;
  width: 123px;
  height: 2px;
  background: #1293cc;
  z-index: 1000;
}
.body .launch-icons .paused img {
  margin-right: 13px;
}
.body .launch-icons .circle {
  margin: 10px auto;
  border-radius: 50%;
  border: #1293cc solid 2px;
  width: 14px;
  height: 14px;
  color: #1293cc;
  position: relative;
}
.body .launch-icons .circle .selected {
  background: #1293cc;
  border-radius: 50%;
  width: 10px;
  height: 10px;
  border: #ffffff solid 2px;
  opacity: 1;
}
.body .launch-schedule,
.body .response-limit {
  text-align: left;
  margin: 12px auto 0;
  max-width: 420px;
  color: #063957;
  font-size: 0.9rem;
}
.body .launch-schedule input[type=date],
.body .launch-schedule input[type=time],
.body .launch-schedule input[type=number],
.body .launch-schedule select,
.body .response-limit input[type=date],
.body .response-limit input[type=time],
.body .response-limit input[type=number],
.body .response-limit select {
  border: 1px solid #d5d5d5;
  border-radius: 4px;
  padding: 5px 7px;
  font-size: 0.9rem;
  color: #063957;
  background: #ffffff;
  box-sizing: border-box;
}
.body .launch-schedule select,
.body .response-limit select {
  max-width: 260px;
}
.body .launch-schedule__row { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  justify-content: flex-start;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.body .launch-schedule__label {
  width: 74px;
  flex: none;
  font-weight: 600;
}
.body .launch-schedule__choice { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  align-items: center;
  gap: 4px;
  cursor: pointer;
  margin: 0;
}
.body .launch-schedule__choice input[type=radio] {
  margin: 0;
  cursor: pointer;
}
.body .launch-schedule__fields { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 10px 86px;
}
.body .launch-schedule__echo {
  font-size: 0.8rem;
  color: #6b7b85;
  font-style: italic;
}
.body .launch-schedule__warning {
  color: #ef684e;
  font-size: 0.85rem;
  margin: 4px 0 0;
}
.body .launch-schedule__note {
  color: #6b7b85;
  font-size: 0.85rem;
  margin: 4px 0 0;
}
.body .launch-schedule__reason {
  max-width: 420px;
  margin: 10px auto 0;
  padding: 8px 10px;
  border-left: 3px solid #ef684e;
  background: #ffffff;
  text-align: left;
  font-size: 0.85rem;
  color: #063957;
}
.body .response-limit {
  border-top: 1px solid #d5d5d5;
  padding-top: 12px;
}
.body .response-limit__toggle { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  cursor: pointer;
  margin: 0;
}
.body .response-limit__toggle input[type=checkbox] {
  margin: 0;
  cursor: pointer;
}
.body .response-limit__fields { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 8px 0 0 22px;
}
.body .response-limit__fields input[type=number] {
  width: 110px;
}
.body .response-limit__collected {
  font-size: 0.8rem;
  color: #6b7b85;
  font-style: italic;
}
.body .survey-demo-container { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  padding: 10px 0px;
  flex-wrap: nowrap;
  margin: 10px 0px;
  width: 328px;
}
.body .survey-demo-container .survey-demo {
  flex: 2;
  border-radius: 50px;
  border: #1293cc solid 2px;
  padding: 3px;
}
.body .survey-demo-container .survey-demo .selected {
  background: #1293cc;
  border-radius: 50px;
  color: #ffffff;
}
.body .survey-demo-container .survey-demo .survey-label {
  padding: 0px 25px;
  display: inline-block;
  cursor: pointer;
}
.body .survey-demo-container .survey-demo .demo-label {
  padding: 0px 25px;
  display: inline-block;
  cursor: pointer;
}
.body .survey-demo-container .demo-warning {
  font-size: 10px;
  align-self: center;
  flex-wrap: nowrap;
  padding: 0px 15px;
}
.body .custom-slug-container {
  padding-bottom: 22px;
  padding-top: 10px;
  font-size: 0.85rem;
}
.body .custom-slug-container > span {
  margin-right: 10px;
}
.body .custom-slug-container > input {
  border-color: #063957 !important;
  padding-top: 5px;
  padding-bottom: 5px;
  margin-right: 5px;
}
.body .copy-module {
  display: flex;
  padding-bottom: 22px;
}
.body .copy-module .copy-survey-url-container {
  width: 100%;
  border: #063957;
  border-style: solid;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  overflow: hidden;
  position: relative;
}
.body .copy-module .copy-survey-url-container .gradient-right {
  pointer-events: none;
  background-image: linear-gradient(to right, transparent 95%, #dedede);
  position: absolute;
  top: 0;
  right: 0;
  height: 50px;
  width: 100%;
  z-index: 1;
}
.body .copy-module .copy-survey-url-container .gradient-left {
  pointer-events: none;
  background-image: linear-gradient(to left, transparent 95%, #dedede);
  position: absolute;
  top: 0;
  right: 0;
  height: 50px;
  width: 100%;
  z-index: 1;
}
.body .copy-module .copy-survey-url-container .copy-survey-url {
  padding: 15px 5px;
  width: 97%;
  border: none;
}
.body .copy-module .copy-survey-button {
  width: 50px;
  margin-left: auto;
  color: white;
  background-color: #063957;
  padding: 15px;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  cursor: pointer;
}
.body .label {
  color: #063957;
  font-size: 1rem;
  padding: 25px;
}
.body .options { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  justify-content: space-around;
  color: #0d7ec3;
}
.body .options button {
  align-self: center;
  background-color: #063957;
  border-radius: 5px;
  color: #fff;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: bolder;
  margin-top: 10px;
  padding: 15px 30px;
  text-transform: uppercase;
  width: 35%;
}

.link-text {
  display: flex;
  align-self: flex-start;
  margin-bottom: 10px;
  font-size: 0.85rem;
}

.disable {
  pointer-events: none;
  opacity: 0.5;
}

.bookings-modal-container {
  width: 600px;
}
.bookings-modal-container .header {
  display: flex;
  background-color: white;
  justify-content: space-between;
  cursor: default;
  margin-bottom: 10px;
}
.bookings-modal-container .header .close {
  display: flex;
  width: 5%;
  justify-content: center;
  margin-top: 10px;
  cursor: pointer;
}
.bookings-modal-container .queue-body {
  background-color: #f5f5f5;
  display: block;
  text-align: center;
  max-height: 25vh;
  overflow-y: auto;
  overflow-x: hidden;
  height: auto;
}
.bookings-modal-container .queue-body .business-list {
  padding: 10px 20px;
  background-color: white;
  margin-bottom: 10px;
  width: 90%;
  border-radius: 10px;
  cursor: pointer;
}
.bookings-modal-container .queue-body .business-list .bookings-name {
  margin-bottom: 5px;
}
.bookings-modal-container .queue-body .business-list:hover {
  background-color: #063957;
  color: white;
}

.modal-container.override-prompt {
  width: 680px;
}
.modal-container.override-prompt .override-prompt__body {
  background-color: #f5f5f5;
  padding: 4px 40px 24px;
  text-align: center;
  color: #063957; /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.modal-container.override-prompt .override-prompt__body p {
  margin: 0;
  max-width: 52ch;
  line-height: 1.45;
}
.modal-container.override-prompt .override-prompt__body ul {
  margin: 0;
  padding-left: 22px;
  text-align: left;
  max-width: 52ch;
}
.modal-container.override-prompt .override-prompt__body ul li + li {
  margin-top: 8px;
}
.modal-container.override-prompt .queue-footer {
  gap: 12px;
}

@media (max-width: 768px) {
  .modal-container.override-prompt {
    width: 100vw;
  }
  .modal-container.override-prompt .override-prompt__body {
    padding: 4px 20px 20px;
  }
}
@media (max-width: 768px) {
  .modal-container {
    width: 100vw;
  }
  .modal-container .header-below {
    margin-right: 0;
    margin-left: 0;
  }
  .modal-container .configure, .modal-container .body {
    width: 90%;
    padding: 5%;
  }
  .modal-container .configure .survey-modal-textarea, .modal-container .body .survey-modal-textarea {
    font-size: 16px;
  }
  .modal-container .configure .custom-slug-container input, .modal-container .body .custom-slug-container input {
    font-size: 16px;
  }
  .modal-container .configure .launch-icons, .modal-container .body .launch-icons {
    justify-content: center;
  }
  .modal-container .configure .launch-icons .live, .modal-container .configure .launch-icons .paused, .modal-container .body .launch-icons .live, .modal-container .body .launch-icons .paused {
    margin: 0 20px;
  }
  .modal-container .configure .launch-icons .paused .circle:before, .modal-container .body .launch-icons .paused .circle:before {
    width: 100px;
  }
}
.app-item-content > .editor-shell {
  display: grid;
  grid-template-columns: clamp(210px, 19vw, 290px) minmax(0, 1fr) clamp(300px, 26vw, 390px);
  grid-template-rows: minmax(0, 1fr);
  position: relative;
  height: 100%;
  min-height: 520px;
  overflow: hidden;
  background: #f7f9fb;
  font-family: "Roboto", system-ui, sans-serif;
  color: #1f1f1f;
}
.app-item-content > .editor-shell,
.app-item-content > .editor-shell *,
.app-item-content > .editor-shell *::before,
.app-item-content > .editor-shell *::after {
  box-sizing: border-box;
}
.app-item-content > .editor-shell.is-busy {
  cursor: progress;
}
.app-item-content > .editor-shell .disabled-overlay {
  position: absolute;
  inset: 0;
  z-index: 15;
  align-items: center;
  justify-content: center;
  background: rgba(247, 249, 251, 0.55);
}

.app-header__page-items:not(:empty) {
  flex: 1;
  min-width: 0;
  gap: 12px;
}
.app-header__page-items:not(:empty) + .app-header__spacer {
  display: none;
}

.editor-header__status {
  flex: none;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 6px;
}
.editor-header__status--draft {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}
.editor-header__status--live {
  background: #1ebbb8;
  color: #fff;
}
.editor-header__status--scheduled {
  background: #dfe21c;
  color: #063957;
}
.editor-header__status--paused {
  background: #f1674d;
  color: #fff;
}

.editor-header__saved {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  white-space: nowrap;
}
.editor-header__saved-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #1ebbb8;
}
.editor-header__saved.is-saving .editor-header__saved-dot {
  background: #dfe21c;
  animation: editor-pulse 1s ease-in-out infinite;
}

@keyframes editor-pulse {
  50% {
    opacity: 0.35;
  }
}
.editor-header__spacer {
  flex: 1;
}

.editor-header__finish, .editor-header__preview, .editor-header__settings, .editor-header__lang {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 15px;
  font-family: "Roboto", system-ui, sans-serif;
  font-size: 13px;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.editor-header__finish:focus-visible, .editor-header__preview:focus-visible, .editor-header__settings:focus-visible, .editor-header__lang:focus-visible {
  box-shadow: 0 0 0 2px #1ebbb8;
  outline: none;
}

.editor-header__lang {
  padding: 7px 10px;
  gap: 8px;
  font-weight: 500;
  color: #fff;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.25);
}
.editor-header__lang:hover:not(:disabled), .editor-header__lang[data-state=open] {
  background: rgba(255, 255, 255, 0.1);
}
.editor-header__lang:disabled {
  opacity: 0.5;
  cursor: default;
}
.editor-header__lang.is-translating {
  border-color: #1ebbb8;
  background: rgba(30, 187, 184, 0.25);
}
.editor-header__lang-code {
  display: none;
}

.editor-header__settings {
  padding: 8px 12px;
  font-weight: 500;
  color: #fff;
  background: transparent;
  border: 0;
}
.editor-header__settings:hover {
  background: rgba(255, 255, 255, 0.1);
}

.editor-header__preview {
  padding: 8px 16px;
  font-weight: 600;
  color: #fff;
  border: 2px solid #fff;
}
.editor-header__preview:hover {
  background: #fff;
  color: #063957;
}

.editor-header__finish {
  padding: 8px 18px;
  font-weight: 600;
  color: #063957;
  background: #dfe21c;
  border: 2px solid #dfe21c;
}
.editor-header__finish:hover {
  background: #c9cc16;
  border-color: #c9cc16;
}

.editor-lang-menu {
  width: 280px;
  padding: 8px 0;
}
.editor-lang-menu__head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 16px 10px;
  border-bottom: 1px solid #e8ecf0;
  margin-bottom: 4px;
}
.editor-lang-menu__sub {
  font-size: 12px;
  color: #555555;
}
.editor-lang-menu__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 16px;
  border: 0;
  background: transparent;
  text-align: left;
  font-family: "Roboto", system-ui, sans-serif;
  cursor: pointer;
}
.editor-lang-menu__item:hover, .editor-lang-menu__item:focus-visible {
  background: #f7f9fb;
  outline: none;
}
.editor-lang-menu__item.is-on {
  background: rgba(30, 187, 184, 0.06);
}
.editor-lang-menu__empty {
  margin: 4px 0 0;
  padding: 6px 16px 2px;
  font-size: 13px;
  color: #555555;
}
.editor-lang-menu__foot {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid #e8ecf0;
}
.editor-lang-menu__retranslate {
  color: #19a9a6;
  font-weight: 600;
}
.editor-lang-menu__retranslate .editor-lang-menu__name {
  color: inherit;
}
.editor-lang-menu__retranslate:disabled {
  color: #888888;
  cursor: default;
  background: transparent;
}
.editor-lang-menu__retranslate svg {
  flex: none;
}
.editor-lang-menu__retranslate .is-spinning {
  animation: editor-lang-spin 1s linear infinite;
}
.editor-lang-menu__tag {
  flex: none;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(30, 187, 184, 0.12);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #19a9a6;
}
.editor-lang-menu__code {
  width: 30px;
  flex: none;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 2px 0;
  border-radius: 4px;
  background: #f7f9fb;
  color: #063957;
}
.editor-lang-menu__name {
  flex: 1;
  font-size: 14px;
  color: #063957;
}

@media (max-width: 1240px) {
  .editor-header__lang-code {
    display: inline;
  }
}
.editor-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: #f7f9fb;
}

.preview-toolbar {
  flex: none;
  height: 52px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 20px;
  background: #fff;
  border-bottom: 1px solid #e8ecf0;
}
.preview-toolbar__title {
  flex: 0 1 auto;
  min-width: 90px;
  font-size: 14px;
  font-weight: 600;
  color: #063957;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.preview-toolbar__badge {
  flex: none;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #1ebbb8;
  background: rgba(30, 187, 184, 0.1);
  padding: 3px 8px;
  border-radius: 6px;
}
.preview-toolbar__spacer {
  flex: 1;
}
.preview-toolbar__actions {
  flex: none;
  display: flex;
  align-items: center;
  color: #555555;
}
.preview-toolbar__action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  font-family: "Roboto", system-ui, sans-serif;
  font-size: 12px;
  cursor: pointer;
}
.preview-toolbar__action:hover {
  background: #f7f9fb;
  color: #063957;
}
.preview-toolbar__action:focus-visible {
  box-shadow: 0 0 0 3px rgba(30, 187, 184, 0.12);
  outline: none;
}
.preview-toolbar__action.is-on {
  color: #1ebbb8;
}
.preview-toolbar__action.is-unavailable {
  opacity: 0.4;
}
.preview-toolbar__action--danger {
  color: #f1674d;
}
.preview-toolbar__action--danger:hover {
  background: rgba(241, 103, 77, 0.08);
  color: #f1674d;
}
.preview-toolbar.is-compact .preview-toolbar__label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.phone-stage {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  overflow: hidden;
}
.phone-stage__box {
  flex: none;
  position: relative;
}

.phone-frame {
  position: absolute;
  left: 0;
  top: 0;
  width: 300px;
  height: 610px;
  padding: 10px;
  border-radius: 42px;
  background: #0e1a23;
  box-shadow: 0 8px 32px rgba(6, 57, 87, 0.12);
  transform-origin: 0 0;
}
.phone-frame__screen {
  width: 280px;
  height: 590px;
  border-radius: 33px;
  overflow: hidden;
  background: #fff;
}
.phone-frame .phone-content {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.editor-main__note {
  flex: none;
  margin: 0;
  padding: 0 16px 16px;
  text-align: center;
  font-size: 12px;
  color: #555555;
}

@media (max-width: 879px) {
  .app-item-content > .editor-shell {
    display: block;
    height: auto;
    min-height: 0;
    overflow: visible;
    padding-bottom: 64px;
  }
  .editor-main {
    min-height: min(78vh, 680px);
  }
  .editor-header__saved-label,
  .editor-header__status {
    display: none;
  }
  .app-header__page-items:not(:empty) {
    gap: 8px;
  }
  .editor-header__preview {
    padding: 7px 10px;
  }
  .editor-header__finish {
    padding: 7px 12px;
  }
}
@media (max-width: 560px) {
  .editor-header__settings,
  .editor-header__lang {
    display: none;
  }
}
.preview-toolbar__badge--lock {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #fff;
  background: #063957;
  cursor: help;
}

@keyframes editor-lang-spin {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .editor-lang-menu__retranslate .is-spinning {
    animation: none;
  }
}
.survey-flow {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: #fff;
  border-right: 1px solid #e8ecf0;
}
.survey-flow__head {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid #e8ecf0;
  margin-bottom: 10px;
}
.survey-flow__title {
  display: flex;
  align-items: center;
  gap: 8px;
}
.survey-flow__title h2 {
  margin: 0;
  font-family: "Poppins", "Roboto", system-ui, sans-serif;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: normal;
  color: #063957;
}
.survey-flow__count {
  font-size: 12px;
  font-weight: 700;
  color: #063957;
  background: #f7f9fb;
  border: 1px solid #e8ecf0;
  border-radius: 10px;
  padding: 1px 8px;
}
.survey-flow__hint {
  font-size: 12px;
  color: #888888;
}
.survey-flow__list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.survey-flow__pages {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.survey-flow__row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  text-align: left;
  font-family: "Roboto", system-ui, sans-serif;
  color: #063957;
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s, opacity 0.15s;
}
.survey-flow__row:hover {
  border-color: #d4dce5;
}
.survey-flow__row:focus-visible {
  box-shadow: 0 0 0 3px rgba(30, 187, 184, 0.12);
  outline: none;
}
.survey-flow__row.is-selected {
  background: rgba(30, 187, 184, 0.08);
  border-color: #1ebbb8;
}
.survey-flow__row.is-dragging {
  opacity: 0.4;
}
.survey-flow__row--screen {
  align-items: center;
  font-size: 14px;
  font-weight: 500;
}
.survey-flow__row--page[draggable=true] {
  cursor: grab;
}
.survey-flow__screen-icon {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #f7f9fb;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #063957;
}
.survey-flow__number {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #063957;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
}
.is-selected .survey-flow__number {
  background: #1ebbb8;
}
.survey-flow__row-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.survey-flow__row-top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.survey-flow__type {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #888888;
}
.survey-flow__star {
  color: #1ebbb8;
}
.survey-flow__tag {
  font-size: 10px;
  font-weight: 700;
  color: #063957;
  background: #f7f9fb;
  border: 1px solid #e8ecf0;
  padding: 0 5px;
  border-radius: 4px;
}
.survey-flow__question {
  font-size: 13px;
  line-height: 1.35;
  color: #063957;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.survey-flow__jumps {
  font-size: 11px;
  font-weight: 500;
  color: #1ebbb8;
}
.survey-flow__divider {
  flex: none;
  height: 1px;
  background: #e8ecf0;
  margin: 4px 12px;
}
.survey-flow__divider--after-add {
  margin: 8px 12px 4px;
}
.survey-flow__insert {
  flex: none;
  position: relative;
  height: 3px;
  margin: -2px 4px;
  border-radius: 2px;
  background: #1ebbb8;
  box-shadow: 0 0 0 2px rgba(30, 187, 184, 0.18);
}
.survey-flow__insert span {
  position: absolute;
  left: -4px;
  top: -3px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #1ebbb8;
}
.survey-flow__add {
  width: calc(100% - 24px);
  margin: 6px 12px 0;
  padding: 10px;
  border: 1px dashed #1ebbb8;
  border-radius: 12px;
  background: transparent;
  color: #1ebbb8;
  font-family: "Roboto", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.survey-flow__add:hover:not(:disabled) {
  background: rgba(30, 187, 184, 0.06);
}
.survey-flow__add:focus-visible {
  box-shadow: 0 0 0 3px rgba(30, 187, 184, 0.12);
  outline: none;
}
.survey-flow__add:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.survey-flow__estimate {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 12px;
  padding: 14px 16px;
  border-radius: 15px;
  background: #063957;
}
.survey-flow__estimate span {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.85);
}
.survey-flow__estimate strong {
  font-family: "Poppins", "Roboto", system-ui, sans-serif;
  font-weight: 700;
  font-size: 20px;
  color: #dfe21c;
}
.survey-flow__handle {
  display: none;
}

@media (max-width: 879px) {
  .survey-flow.is-drawer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 14;
    max-height: min(75vh, 620px);
    border-right: 0;
    border-top: 1px solid #e8ecf0;
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -8px 32px rgba(6, 57, 87, 0.16);
    transform: translateY(calc(100% - 56px));
    transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  .survey-flow.is-drawer.is-open {
    transform: translateY(0);
  }
  .survey-flow.is-drawer .survey-flow__handle {
    flex: none;
    display: flex;
    align-items: center;
    gap: 10px;
    height: 56px;
    padding: 0 20px;
    border: 0;
    background: transparent;
    font-family: "Roboto", system-ui, sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #063957;
    cursor: pointer;
    position: relative;
    touch-action: none;
  }
  .survey-flow.is-drawer .survey-flow__grabber {
    position: absolute;
    top: 7px;
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: #d4dce5;
  }
  .survey-flow.is-drawer .survey-flow__handle-chevron {
    margin-left: auto;
    transition: transform 0.15s;
  }
  .survey-flow.is-drawer .survey-flow__handle-chevron.is-up {
    transform: rotate(180deg);
  }
  .survey-flow.is-drawer .survey-flow__head {
    display: none;
  }
}
.survey-flow__lock {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #063957;
  cursor: help;
}

.survey-flow__row-lock {
  color: #888888;
}

.editor-inspector {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: #fff;
  border-left: 1px solid #e8ecf0;
}

.inspector-tabs {
  flex: none;
  display: flex;
  gap: 12px;
  padding: 0 16px;
  border-bottom: 1px solid #e8ecf0;
  overflow-x: auto;
  scrollbar-width: none;
}
.inspector-tabs::-webkit-scrollbar {
  display: none;
}
.inspector-tabs__tab {
  flex: none;
  padding: 16px 0 13px;
  border: 0;
  border-bottom: 3px solid transparent;
  background: transparent;
  font-family: "Roboto", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #555555;
  white-space: nowrap;
  cursor: pointer;
}
.inspector-tabs__tab:focus-visible {
  box-shadow: 0 0 0 3px rgba(30, 187, 184, 0.12);
  outline: none;
}
.inspector-tabs__tab.is-disabled {
  color: #b5bcc4;
}
.inspector-tabs__tab.is-active {
  font-weight: 600;
  color: #063957;
  border-bottom-color: #1ebbb8;
}
.inspector-tabs__tab.is-active.is-disabled {
  border-bottom-color: #d4dce5;
}

.inspector-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.inspector-banner {
  display: flex;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #f7f9fb;
  border: 1px solid #e8ecf0;
  font-size: 13px;
  line-height: 1.5;
  color: #555555;
}
.inspector-banner svg {
  flex: none;
  margin-top: 2px;
  color: #1ebbb8;
}
.inspector-banner--teal {
  background: rgba(30, 187, 184, 0.1);
  border-color: rgba(30, 187, 184, 0.35);
  color: #063957;
}

.inspector-translating {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid rgba(30, 187, 184, 0.35);
  border-radius: 12px;
  background: rgba(30, 187, 184, 0.1);
  font-size: 13px;
  line-height: 1.5;
  color: #063957;
}
.inspector-translating__text {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.inspector-translating__text strong {
  font-weight: 700;
}
.inspector-translating__text span {
  color: #555555;
}
.inspector-translating .ui-btn {
  flex: none;
}

.inspector-source {
  margin: 6px 0 0;
  padding: 6px 10px;
  border-radius: 8px;
  background: #f7f9fb;
  font-size: 12px;
  line-height: 1.45;
  color: #555555;
  overflow-wrap: anywhere;
}
.inspector-source__lang {
  font-weight: 700;
  color: #063957;
}

.inspector-field.is-compact:has(.inspector-swatch) .inspector-source {
  margin-left: 38px;
}

.inspector-template {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid #e8ecf0;
  border-radius: 12px;
  background: #f7f9fb;
  font-family: "Roboto", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #063957;
  cursor: pointer;
  text-align: left;
}
.inspector-template svg {
  color: #1ebbb8;
}
.inspector-template:hover {
  border-color: #1ebbb8;
}

.inspector-content,
.inspector-section,
.inspector-section__fields,
.inspector-section__rows {
  display: flex;
  flex-direction: column;
}

.inspector-content {
  gap: 20px;
}

.inspector-section {
  gap: 10px;
}

.inspector-section__fields {
  gap: 20px;
}

.inspector-section__rows {
  gap: 6px;
}

.inspector-section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.inspector-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.inspector-field.is-compact {
  gap: 0;
}
.inspector-field.is-disabled {
  opacity: 0.55;
}
.inspector-field__label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.inspector-field__label {
  font-size: 14px;
  font-weight: 500;
  color: #063957;
}
.inspector-field__count {
  flex: none;
  font-size: 12px;
  color: #888888;
  font-variant-numeric: tabular-nums;
}
.inspector-field__count.is-near {
  color: #f1674d;
}
.inspector-field__count--inline {
  min-width: 38px;
  text-align: right;
}
.inspector-field__row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.inspector-input {
  flex: 1;
  min-width: 0;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #d4dce5;
  border-radius: 6px;
  background: #fff;
  font-family: "Roboto", system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.4;
  color: #1f1f1f;
  resize: none;
}
.inspector-input:focus {
  border-color: #1ebbb8;
  box-shadow: 0 0 0 3px rgba(30, 187, 184, 0.12);
  outline: none;
}
.inspector-input:disabled {
  background: #f7f9fb;
  color: #888888;
  cursor: not-allowed;
}
.inspector-input[readonly] {
  background: #f7f9fb;
}
.inspector-input::-moz-placeholder {
  color: #888888;
}
.inspector-input::placeholder {
  color: #888888;
}
.inspector-input--weight {
  flex: none;
  width: 56px;
  text-align: center;
}

textarea.inspector-input {
  padding: 12px 14px;
  font-size: 15px;
}

.inspector-swatch {
  flex: none;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
  cursor: pointer;
}
.inspector-swatch.is-open, .inspector-swatch:focus-visible {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #1ebbb8;
  outline: none;
}
.inspector-swatch:disabled {
  cursor: not-allowed;
}

.inspector-hint {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: #888888;
}

.inspector-intro {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: #555555;
}

.inspector-tag {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #888888;
}

.inspector-link {
  flex: none;
  padding: 8px 4px;
  border: 0;
  background: none;
  font-family: "Roboto", system-ui, sans-serif;
  font-size: 13px;
  color: #555555;
  cursor: pointer;
}
.inspector-link:hover:not(:disabled) {
  color: #063957;
}
.inspector-link:disabled {
  opacity: 0.4;
  cursor: default;
}

.required-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid #e8ecf0;
}
.required-question__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.required-question__title {
  font-size: 14px;
  font-weight: 500;
  color: #063957;
}
.required-question__sub {
  font-size: 12px;
  color: #888888;
}

.inspector-upload {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.inspector-upload.is-disabled {
  opacity: 0.45;
}
.inspector-upload__box {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 1px dashed #d4dce5;
  border-radius: 12px;
  font-size: 14px;
  color: #555555;
}
.inspector-upload__icon {
  flex: none;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #1ebbb8;
}
.inspector-upload__thumb {
  flex: none;
  width: 44px;
  height: 44px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 8px;
  border: 1px solid #e8ecf0;
}
.inspector-upload__pick {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  align-self: stretch;
  color: #1ebbb8;
  font-weight: 600;
  cursor: pointer;
}
.inspector-upload.is-disabled .inspector-upload__pick {
  cursor: not-allowed;
}

.inspector-option {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.inspector-option.is-disabled {
  opacity: 0.55;
}
.inspector-option__title {
  margin: 0;
  font-family: "Poppins", "Roboto", system-ui, sans-serif;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: normal;
  color: #063957;
}

.inspector-choice {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
  border-color: #d4dce5;
}
.inspector-choice .ui-segmented__item {
  font-weight: 600;
}

.inspector-stepper {
  display: inline-flex;
  align-self: flex-start;
  align-items: stretch;
  border: 1px solid #d4dce5;
  border-radius: 10px;
  overflow: hidden;
}
.inspector-stepper.is-disabled {
  opacity: 0.4;
}
.inspector-stepper button {
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  background: #fff;
  color: #063957;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.inspector-stepper button:hover:not(:disabled) {
  background: #f7f9fb;
}
.inspector-stepper button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.inspector-stepper__value {
  width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-left: 1px solid #d4dce5;
  border-right: 1px solid #d4dce5;
  background: #fff;
  font-family: "Roboto", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #063957;
  text-align: center;
}
.inspector-stepper__value:focus {
  outline: none;
  background: rgba(30, 187, 184, 0.06);
}

.inspector-scale {
  display: grid;
  grid-template-columns: repeat(11, minmax(0, 1fr));
  gap: 4px;
}
.inspector-scale.is-busy {
  opacity: 0.5;
  pointer-events: none;
}
.inspector-scale__chip {
  height: 30px;
  padding: 0;
  border: 1px solid #e8ecf0;
  border-radius: 7px;
  background: #fff;
  font-family: "Roboto", system-ui, sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: #888888;
  cursor: pointer;
}
.inspector-scale__chip.is-on {
  color: #fff;
}
.inspector-scale__chip:disabled {
  cursor: default;
}
.inspector-scale__legend {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #888888;
}

.inspector-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.inspector-sortable {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: none;
}

.inspector-logic-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.inspector-logic-row__answer {
  flex: none;
  width: 104px;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.inspector-logic-row--skip .inspector-logic-row__answer {
  width: 110px;
}
.inspector-logic-row__text {
  min-width: 0;
  font-size: 13px;
  color: #063957;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.inspector-logic-row__then {
  flex: none;
  font-size: 11px;
  font-weight: 700;
  color: #888888;
}
.inspector-logic-row__arrow {
  flex: none;
  color: #888888;
  transform: rotate(180deg);
}
.inspector-logic-row__saving {
  flex: 1;
  font-size: 13px;
  color: #888888;
}

.inspector-dot {
  flex: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}

.inspector-select {
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid #d4dce5;
  border-radius: 6px;
  background: #fff;
  font-family: "Roboto", system-ui, sans-serif;
  font-size: 13px;
  color: #1f1f1f;
}
.inspector-select:focus {
  border-color: #1ebbb8;
  box-shadow: 0 0 0 3px rgba(30, 187, 184, 0.12);
  outline: none;
}
.inspector-select.is-set {
  background: rgba(30, 187, 184, 0.08);
}

.inspector-ai-chat {
  display: flex;
  max-height: 260px;
  overflow: hidden;
  border: 1px solid #e8ecf0;
  border-radius: 12px;
  background: #f7f9fb;
}
.inspector-ai-chat #messages-container {
  flex: 1;
  max-height: 260px;
  overflow-y: auto;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13px;
  line-height: 1.45;
}

.inspector-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.thank-you-outputs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.thank-you-outputs__chip {
  padding: 7px 12px;
  border: 1px solid #e8ecf0;
  border-radius: 10px;
  background: #fff;
  font-family: "Roboto", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #063957;
  cursor: pointer;
}
.thank-you-outputs__chip:hover:not(:disabled) {
  border-color: #d4dce5;
}
.thank-you-outputs__chip.is-on {
  background: #063957;
  border-color: #063957;
  color: #fff;
}
.thank-you-outputs__chip--add {
  border: 1px dashed #1ebbb8;
  color: #1ebbb8;
}
.thank-you-outputs__chip--add:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.thank-you-condition {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #f7f9fb;
  font-size: 13px;
  color: #555555;
}
.thank-you-condition__remove {
  margin-left: auto;
  border: 0;
  background: none;
  font-family: "Roboto", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #f1674d;
  cursor: pointer;
}
.thank-you-condition__remove:disabled {
  opacity: 0.5;
  cursor: default;
}

.thank-you-link {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  border: 1px solid #e8ecf0;
  border-radius: 15px;
}
.thank-you-link.is-locked .inspector-input {
  cursor: pointer;
}

@media (max-width: 879px) {
  .editor-inspector {
    border-left: 0;
    border-top: 1px solid #e8ecf0;
    scroll-margin-top: 72px;
  }
  .inspector-body {
    overflow: visible;
    padding-bottom: 32px;
  }
}
.inspector-lock {
  display: flex;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(6, 57, 87, 0.05);
  border: 1px solid rgba(6, 57, 87, 0.15);
}
.inspector-lock__icon {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #063957;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.inspector-lock__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 13px;
  line-height: 1.45;
  color: #555555;
}
.inspector-lock__text strong {
  font-size: 14px;
  font-weight: 600;
  color: #063957;
}

.inspector-shown-darker {
  display: flex;
  align-items: flex-start;
  cursor: help;
  gap: 6px;
  margin: 4px 0 0 38px;
  font-size: 12px;
  line-height: 1.4;
  color: #888888;
}
.inspector-shown-darker .inspector-dot {
  flex: none;
  width: 12px;
  height: 12px;
  margin-top: 2px;
}

.inspector-field:not(.is-compact) .inspector-shown-darker {
  margin-left: 0;
}

.add-smartform__body {
  display: flex;
  padding: 0;
  overflow: hidden;
}
.add-smartform__main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.add-smartform__head {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 24px 28px 0;
}
.add-smartform__search {
  flex: none;
  width: 250px;
  margin-top: 6px;
}
.add-smartform__tabs {
  align-self: flex-start;
  margin: 18px 28px 0;
}
.add-smartform__count {
  margin-left: 6px;
  font-size: 12px;
  opacity: 0.75;
}
.add-smartform__content {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 20px 28px 28px;
}
.add-smartform__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: min-content;
  gap: 12px;
}
.add-smartform__card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border: 1px solid #e8ecf0;
  border-radius: 12px;
  background: #fff;
  text-align: left;
  font-family: "Roboto", system-ui, sans-serif;
  cursor: pointer;
}
.add-smartform__card:hover {
  border-color: #1ebbb8;
}
.add-smartform__card:focus-visible {
  box-shadow: 0 0 0 3px rgba(30, 187, 184, 0.12);
  outline: none;
}
.add-smartform__card.is-selected {
  border: 2px solid #1ebbb8;
  padding: 9px;
  background: rgba(30, 187, 184, 0.06);
}
.add-smartform__card.is-disabled {
  opacity: 0.6;
}
.add-smartform__thumb {
  flex: none;
  width: 44px;
  height: 64px;
  border-radius: 6px;
  background-color: #f7f9fb;
  background-size: 44px auto;
  background-position: center top;
  background-repeat: no-repeat;
}
.add-smartform__thumb.is-muted {
  filter: grayscale(100%);
}
.add-smartform__thumb.is-large {
  width: 100%;
  height: 100%;
  max-height: 400px;
  background-color: transparent;
  background-size: contain;
  background-position: center;
}
.add-smartform__card-text, .add-smartform__row-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.add-smartform__card-name {
  font-size: 14px;
  font-weight: 600;
  color: #063957;
}
.add-smartform__card-short {
  font-size: 12px;
  line-height: 1.35;
  color: #555555;
}
.add-smartform__empty {
  margin: 0;
  padding: 20px 0;
  font-size: 14px;
  color: #555555;
}
.add-smartform__empty--grid {
  grid-column: 1/-1;
}
.add-smartform__rows {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.add-smartform__row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  border: 1px solid #e8ecf0;
  border-radius: 12px;
}
.add-smartform__row-text {
  flex: 1;
  gap: 3px;
}
.add-smartform__row-type {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #888888;
}
.add-smartform__row-question {
  font-size: 15px;
  font-weight: 500;
  color: #063957;
}
.add-smartform__pill {
  flex: none;
  padding: 5px 10px;
  border: 1px solid #e8ecf0;
  border-radius: 8px;
  background: #f7f9fb;
  font-family: "Roboto", system-ui, sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: #063957;
  cursor: pointer;
}
.add-smartform__pill:hover {
  border-color: #d4dce5;
}
.add-smartform__remove {
  flex: none;
  border: 0;
  background: none;
  font-family: "Roboto", system-ui, sans-serif;
  font-size: 13px;
  color: #555555;
  cursor: pointer;
}
.add-smartform__remove:hover:not(:disabled) {
  color: #f1674d;
}
.add-smartform__remove:disabled {
  opacity: 0.5;
  cursor: default;
}
.add-smartform__add {
  flex: none;
  padding: 8px 16px;
  border: 2px solid #1ebbb8;
  border-radius: 15px;
  background: #fff;
  font-family: "Roboto", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #1ebbb8;
  cursor: pointer;
}
.add-smartform__add:hover:not(:disabled) {
  background: #1ebbb8;
  color: #fff;
}
.add-smartform__add:disabled {
  opacity: 0.5;
  cursor: default;
}
.add-smartform__detail {
  flex: none;
  width: 380px;
  display: flex;
  flex-direction: column;
  padding: 24px 28px;
  background: #f7f9fb;
  border-left: 1px solid #e8ecf0;
}
.add-smartform__close {
  align-self: flex-end;
}
.add-smartform__preview {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.add-smartform__detail-text {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 16px;
}
.add-smartform__detail-text h3 {
  margin: 0;
  font-family: "Poppins", "Roboto", system-ui, sans-serif;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: normal;
  color: #063957;
}
.add-smartform__detail-text p {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: #555555;
}
.add-smartform__cta {
  margin-top: 20px;
  height: 48px;
  border: 0;
  border-radius: 15px;
  background: #1ebbb8;
  font-family: "Roboto", system-ui, sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
}
.add-smartform__cta:hover:not(:disabled) {
  background: #19a9a6;
}
.add-smartform__cta.is-navy {
  background: #063957;
}
.add-smartform__cta.is-navy:hover:not(:disabled) {
  background: #04283e;
}
.add-smartform__cta:disabled {
  opacity: 0.6;
  cursor: progress;
}

@media (max-width: 879px) {
  .add-smartform__body {
    flex-direction: column;
    overflow-y: auto;
  }
  .add-smartform__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .add-smartform__detail {
    width: auto;
    border-left: 0;
    border-top: 1px solid #e8ecf0;
  }
  .add-smartform__preview {
    display: none;
  }
  .add-smartform__head {
    flex-wrap: wrap;
  }
  .add-smartform__search {
    width: 100%;
  }
}
.bookings-picker {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.bookings-picker__row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px;
  border: 1px solid #e8ecf0;
  border-radius: 12px;
  background: #fff;
  text-align: left;
  font-family: "Roboto", system-ui, sans-serif;
  cursor: pointer;
}
.bookings-picker__row:hover {
  border-color: #1ebbb8;
  background: rgba(30, 187, 184, 0.04);
}
.bookings-picker__name {
  font-size: 14px;
  font-weight: 600;
  color: #063957;
}
.bookings-picker__id {
  font-size: 12px;
  color: #888888;
}

.frequency-picker {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}
.frequency-picker__options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.frequency-picker__option {
  padding: 8px 14px;
  border: 2px solid #e8ecf0;
  border-radius: 15px;
  background: #fff;
  font-family: "Roboto", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #063957;
  cursor: pointer;
}
.frequency-picker__option:hover {
  border-color: #d4dce5;
}
.frequency-picker__option.is-on {
  background: #1ebbb8;
  border-color: #1ebbb8;
  color: #fff;
}
.frequency-picker__custom {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: #555555;
}
.frequency-picker__custom .inspector-input {
  flex: none;
  width: 90px;
}
.frequency-picker__error {
  margin: 0;
  font-size: 12px;
  color: #f1674d;
}

.favorite-dialog__frequency {
  display: flex;
  flex-direction: column;
  margin-top: 16px;
}

.settings-modal .ui-modal__body {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.settings-modal .ui-modal__footer {
  position: sticky;
  bottom: 0;
  background: #fff;
}

.settings-tabs {
  align-self: flex-start;
}

.settings-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px 32px;
}

.settings-col {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.settings-wide {
  grid-column: 1/-1;
}

.settings-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.settings-field__label {
  font-size: 14px;
  font-weight: 500;
  color: #063957;
}
.settings-field__toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.settings-select {
  flex: none;
  width: 100%;
  padding: 11px 12px;
  font-size: 15px;
}

.settings-note {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  color: #888888;
}
.settings-note--warn {
  color: #f1674d;
}

.settings-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.settings-swatch {
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 12px;
  cursor: pointer;
}
.settings-swatch.is-on, .settings-swatch:focus-visible {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #063957;
  outline: none;
}
.settings-swatch.settings-swatch--add {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}
.settings-swatch.settings-swatch--add > span {
  width: 24px;
  height: 24px;
}
.settings-swatch.settings-swatch--add.is-open {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #1ebbb8;
}

.settings-text-color {
  display: flex;
  gap: 10px;
}
.settings-text-color__tile {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid #e8ecf0;
  border-radius: 12px;
  background: #fff;
  font-family: "Roboto", system-ui, sans-serif;
  font-size: 14px;
  color: #063957;
  cursor: pointer;
}
.settings-text-color__tile.is-on {
  border: 2px solid #1ebbb8;
  padding: 7px 9px;
}
.settings-text-color__chip {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "Poppins", "Roboto", system-ui, sans-serif;
  font-weight: 700;
  font-size: 14px;
}

.settings-kiosk {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid #e8ecf0;
  border-radius: 15px;
}
.settings-kiosk__cell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
}
.settings-kiosk__cell + .settings-kiosk__cell {
  border-left: 1px solid #e8ecf0;
}
.settings-kiosk__cell.is-disabled {
  opacity: 0.45;
}
.settings-kiosk__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.settings-kiosk__title {
  font-size: 14px;
  font-weight: 500;
  color: #063957;
}
.settings-kiosk__sub {
  font-size: 12px;
  line-height: 1.4;
  color: #555555;
}

.settings-admin {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px 18px;
  border: 1px dashed #d4dce5;
  border-radius: 15px;
}

.settings-launch {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.settings-status {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.settings-status__card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  border: 1px solid #e8ecf0;
  border-radius: 15px;
  background: #fff;
  text-align: left;
  font-family: "Roboto", system-ui, sans-serif;
  cursor: pointer;
}
.settings-status__card:focus-visible {
  box-shadow: 0 0 0 3px rgba(30, 187, 184, 0.12);
  outline: none;
}
.settings-status__card:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.settings-status__card.is-on {
  border: 2px solid #1ebbb8;
  padding: 15px;
  background: rgba(30, 187, 184, 0.06);
}
.settings-status__radio {
  flex: none;
  position: relative;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  border-radius: 50%;
  border: 2px solid #d4dce5;
}
.is-on .settings-status__radio {
  border-color: #1ebbb8;
}
.is-on .settings-status__radio::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: #1ebbb8;
}
.settings-status__text {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.settings-status__label {
  font-size: 15px;
  font-weight: 600;
  color: #063957;
}
.settings-status__desc {
  font-size: 12px;
  line-height: 1.4;
  color: #555555;
}

.settings-schedule {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding: 16px 18px;
  border-radius: 15px;
  background: #f7f9fb;
}
.settings-schedule__inputs {
  display: flex;
  gap: 8px;
}
.settings-schedule__inputs .inspector-input {
  padding: 10px 12px;
}
.settings-schedule__zone {
  grid-column: 1/-1;
}

.settings-slug {
  display: flex;
  border: 1px solid #d4dce5;
  border-radius: 6px;
  overflow: hidden;
}
.settings-slug.is-off {
  opacity: 0.5;
}
.settings-slug__prefix {
  flex: 0 1 auto;
  max-width: 65%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 10px;
  background: #f7f9fb;
  border-right: 1px solid #d4dce5;
  font-size: 14px;
  color: #555555;
}
.settings-slug__input {
  flex: 1;
  min-width: 0;
  padding: 10px;
  border: 0;
  font-family: "Roboto", system-ui, sans-serif;
  font-size: 14px;
  color: #1f1f1f;
  outline: none;
}

.settings-links {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 20px;
  border-top: 1px solid #e8ecf0;
}

.settings-link {
  display: flex;
  align-items: center;
  gap: 12px;
}
.settings-link__label {
  flex: none;
  width: 100px;
  font-size: 14px;
  font-weight: 500;
  color: #063957;
}
.settings-link__url {
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid #e8ecf0;
  border-radius: 6px;
  background: #f7f9fb;
  font-size: 13px;
  color: #555555;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.settings-link__copy {
  flex: none;
  width: 84px;
  padding: 9px 0;
  border: 2px solid #1ebbb8;
  border-radius: 15px;
  background: #fff;
  font-family: "Roboto", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #1ebbb8;
  cursor: pointer;
}
.settings-link__copy.is-copied {
  background: #1ebbb8;
  color: #fff;
}

.ui-confirm__body ul {
  margin: 6px 0 0;
  padding-left: 18px;
}

.ui-confirm__body p {
  margin: 0 0 6px;
}

@media (max-width: 879px) {
  .settings-grid,
  .settings-kiosk,
  .settings-schedule {
    grid-template-columns: 1fr;
  }
  .settings-kiosk__cell + .settings-kiosk__cell {
    border-left: 0;
    border-top: 1px solid #e8ecf0;
  }
  .settings-status {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 600px) {
  .login-form {
    width: auto !important;
  }
  .login-form button {
    padding: 20px 50px 20px 50px !important;
  }
}
.login-container { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  align-items: center;
  background-color: #fff;
  height: 100%;
  width: 100%;
  justify-content: space-around;
  overflow-y: auto;
  max-width: 1440px;
  margin: auto;
  margin-top: 80px;
}
.login-container .login-form-container { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  align-items: center;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  width: 40%;
  max-width: 375px;
  min-width: 500px;
}
.login-container .login-form-container .login-frame-container { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  flex-direction: column;
  justify-content: center;
  background: #FFF;
  width: 100%;
  padding: 40px;
  border-radius: 10px;
}
.login-container .login-form-container .login-frame-container .login-header {
  font-size: 36px;
  margin-bottom: 30px;
}
.login-container .login-form-container .login-frame-container .login-subheader {
  font-size: 24px;
  font-weight: 700;
}
.login-container .login-form-container .login-frame-container hr {
  border: 1px solid #1EBBB8;
  width: 100%;
  margin: 40px 0px;
}
.login-container .login-form-container .login-frame-container a {
  text-decoration: none;
  color: #063957;
}
.login-container .login-form-container .login-frame-container .errors {
  color: red;
  height: 0px;
  font-weight: 500;
  font-size: 12px;
}
.login-container .login-form-container .login-frame-container .form-group {
  display: flex;
  justify-content: center;
  width: 100%;
}
.login-container .login-form-container .login-frame-container .login-input-container {
  width: 100%;
  margin-bottom: 20px;
}
.login-container .login-form-container .login-frame-container .login-input-container .email-input-container, .login-container .login-form-container .login-frame-container .login-input-container .password-input-container {
  display: block;
  width: 100%;
  margin-bottom: 2px;
}
.login-container .login-form-container .login-frame-container .login-input-container .email-input-container .reset-password-link, .login-container .login-form-container .login-frame-container .login-input-container .password-input-container .reset-password-link {
  cursor: pointer;
  font-weight: bold;
  font-size: 12px;
  margin-top: 5px;
}
.login-container .login-form-container .login-frame-container .login-input-container .email-input-container .email-label, .login-container .login-form-container .login-frame-container .login-input-container .email-input-container .password-label, .login-container .login-form-container .login-frame-container .login-input-container .password-input-container .email-label, .login-container .login-form-container .login-frame-container .login-input-container .password-input-container .password-label {
  display: inline-block;
  margin-bottom: 5px;
  font-weight: 600;
  display: flex;
  align-items: center;
}
.login-container .login-form-container .login-frame-container .login-input-container .email-input-container .login-input, .login-container .login-form-container .login-frame-container .login-input-container .email-input-container .password-input, .login-container .login-form-container .login-frame-container .login-input-container .password-input-container .login-input, .login-container .login-form-container .login-frame-container .login-input-container .password-input-container .password-input {
  display: inline-block;
  height: 40px;
  width: 100%;
  border: 1px solid #1EBBB8;
  border-radius: 0.5rem;
  outline: 0;
  background-color: #fff;
  color: #555;
  padding-left: 20px;
}
.login-container .login-form-container .login-frame-container .login-input-container .email-input-container .password-label, .login-container .login-form-container .login-frame-container .login-input-container .password-input-container .password-label {
  margin-top: 20px;
}
.login-container .login-form-container .login-frame-container .signin-btn {
  width: 100%;
  background-color: #1EBBB8;
  color: white;
  display: inline-block;
  margin-top: 2rem;
  line-height: 1.3333333;
  border-radius: 0.5rem;
  padding: 10px 16px;
  cursor: pointer;
  height: 30px;
  font-size: 16px;
}
.login-container .login-form-container .login-frame-container .signin-btn:hover {
  background-color: #1ebbb8;
}
.login-container .login-form-container .login-frame-container .reset-password-link {
  color: #043957;
  font-size: 16px;
  margin-top: 9px;
  text-decoration: none;
  cursor: pointer;
  font-weight: bold;
  width: -moz-fit-content;
  width: fit-content;
}
.login-container .login-form-container .login-frame-container .reset-password-link:hover {
  color: #1ebbb8;
}
.login-container .third-party-authentication-button {
  display: flex;
  width: 100%;
  border: 1px solid #58585a;
  padding: 15px 0;
  margin-bottom: 15px;
  cursor: pointer;
}
.login-container .third-party-authentication-button:hover {
  box-shadow: rgba(0, 0, 0, 0.2) 0 1px 4px, rgba(0, 0, 0, 0.12) 0 1px 2px;
}
.login-container .authentication-icon {
  margin-left: 30px;
}
.login-container .authentication-label {
  margin: 0 auto;
  font-weight: 800;
  font-size: 17px;
}
.login-container .button-container { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  width: 100%;
  justify-content: center;
}
.login-container .credits {
  color: #063957;
  font-size: 0.5rem;
  margin-top: 3vh;
  text-transform: uppercase;
}
.login-container .help-block {
  color: #063957;
  padding-top: 10px;
}
.login-container .login-form { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  align-items: center;
  flex-direction: column;
  justify-content: center;
  width: 448px;
}
.login-container .login-form img {
  flex: 1;
}
.login-container .login-form > div { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
.login-container .login-form button {
  background-color: #063957;
  border: 1px solid white;
  border-radius: 4px;
  color: white;
  font-weight: 500;
  letter-spacing: 2px;
  margin-top: 40px;
  padding: 10px 25px 10px 25px;
}
.login-container .login-form button:last-child {
  margin-left: 20px;
}
.login-container .login-form button:hover {
  background-color: white;
  color: #063957;
  cursor: pointer;
}
.login-container .login-form .form-group { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  flex-direction: column;
  justify-content: center;
  width: 100%;
}
.login-container .login-form .form-group .help-block {
  color: #063957;
}
.login-container .login-form .form-group .name-survey input[type=text], .name-survey .login-container .login-form .form-group input[type=text],
.login-container .login-form .form-group .name-survey input[type=password],
.name-survey .login-container .login-form .form-group input[type=password], .login-container .login-form .form-group .name-survey input[type=text]:focus, .name-survey .login-container .login-form .form-group input[type=text]:focus,
.login-container .login-form .form-group .name-survey input[type=password]:focus,
.name-survey .login-container .login-form .form-group input[type=password]:focus, .login-container .login-form .form-group input[type=text],
.login-container .login-form .form-group input[type=password], .login-container .login-form .form-group input[type=text]:focus,
.login-container .login-form .form-group input[type=password]:focus, .login-container .login-form .form-group input {
  background-color: #063957;
  border: 0;
  border-bottom: 1px solid white;
  border-radius: 0;
  box-shadow: none;
}
.login-container .login-form .form-group input {
  color: white;
  font-size: 1rem;
  margin: 0;
  padding: 40px 0 20px 5px;
  width: 100%;
}
.login-container .login-form .form-group input[type=text]::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: white;
  text-transform: uppercase;
}
.login-container .login-form .form-group input[type=text]::-moz-placeholder { /* Firefox 19+ */
  color: white;
  text-transform: uppercase;
}
.login-container .login-form .form-group input[type=text]:-ms-input-placeholder { /* IE 10+ */
  color: white;
  text-transform: uppercase;
}
.login-container .login-form .form-group input[type=text]:-moz-placeholder { /* Firefox 18- */
  color: white;
  text-transform: uppercase;
}
.login-container .login-form .form-group input[type=password]::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: white;
  text-transform: uppercase;
}
.login-container .login-form .form-group input[type=password]::-moz-placeholder { /* Firefox 19+ */
  color: white;
  text-transform: uppercase;
}
.login-container .login-form .form-group input[type=password]:-ms-input-placeholder { /* IE 10+ */
  color: white;
  text-transform: uppercase;
}
.login-container .login-form .form-group input[type=password]:-moz-placeholder { /* Firefox 18- */
  color: white;
  text-transform: uppercase;
}
.login-container .login-form .form-group input:-webkit-autofill {
  box-shadow: 0 0 0px 1000px #063957 inset;
  -webkit-box-shadow: 0 0 0px 1000px #063957 inset;
  -webkit-text-fill-color: white !important;
}
.login-container .login-form .form-group input:-webkit-autofill,
.login-container .login-form .form-group input:-webkit-autofill:hover,
.login-container .login-form .form-group input:-webkit-autofill:focus,
.login-container .login-form .form-group input:-webkit-autofill:active {
  -webkit-transition: background-color 5000s ease-in-out 0s;
  transition: background-color 5000s ease-in-out 0s;
}
.login-container .login-image-container {
  width: 40%;
  min-width: 600px;
  justify-content: center;
  align-items: center;
  display: flex;
  flex-direction: column;
}
.login-container .login-image-container .infotap-logo {
  width: 50%;
}
.login-container .login-image-container .phones-image {
  width: 100%;
}

@media (max-width: 736px) {
  .login-container .login-form-container {
    width: 80vw;
    min-width: 80vw;
    max-width: 80vw;
  }
  .login-container .login-image-container {
    display: none;
  }
  .login-container .login-input-container input {
    font-size: 16px;
  }
}
.name-survey { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  flex: 1;
  flex-direction: column;
  margin: auto;
  max-width: 700px;
}
.name-survey input[type=checkbox] {
  display: none;
}
.name-survey input[type=checkbox] label {
  text-transform: uppercase;
}
.name-survey input[type=checkbox] + label span {
  display: inline-block;
  height: 19px;
  width: 19px;
}
.name-survey .checkbox {
  margin-left: auto;
}
.name-survey .date-picker { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
.name-survey .end-picker, .name-survey .start-picker {
  align-items: baseline;
  flex: 1;
  font-size: 1rem;
  justify-content: flex-end;
  letter-spacing: 6px;
  text-transform: uppercase;
}
.name-survey .start-picker { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  flex-wrap: wrap;
}
.name-survey .end-picker { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  flex-wrap: wrap;
}
.name-survey .text-field-group {
  margin-bottom: 20px;
}
.name-survey .text-field-group input {
  font-size: 1.3rem;
  font-weight: 300;
  text-align: center;
}
.name-survey > a { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  align-self: center;
  background-color: #f5f5f5;
  border: 1px solid #063957;
  border-radius: 6px;
  color: #063957;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 500;
  justify-content: center;
  letter-spacing: 2px;
  margin-top: 140px;
  padding: 15px 33px;
  text-decoration: none;
  text-transform: uppercase;
}
.name-survey > a:hover {
  background-color: #063957;
  color: white;
}
.name-survey input {
  background-color: #f5f5f5;
  border: 0;
  color: #063957;
  font-size: 1rem;
  padding: 40px 0 20px 5px;
  text-align: right;
  width: 100%;
}
.name-survey input[type=text],
.name-survey input[type=password], .name-survey input[type=text]:focus,
.name-survey input[type=password]:focus, .name-survey .login-container .login-form .form-group input, .login-container .login-form .form-group .name-survey input, .name-survey .login-container .login-form .form-group input[type=text]:focus, .login-container .login-form .form-group .name-survey input[type=text]:focus,
.name-survey .login-container .login-form .form-group input[type=password]:focus,
.login-container .login-form .form-group .name-survey input[type=password]:focus, .name-survey .login-container .login-form .form-group input[type=text], .login-container .login-form .form-group .name-survey input[type=text],
.name-survey .login-container .login-form .form-group input[type=password],
.login-container .login-form .form-group .name-survey input[type=password] {
  border: 0;
  border-bottom: 1px solid #063957;
  border-radius: 0;
  box-shadow: none;
}
.name-survey input[type=text]::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #063957;
  text-transform: uppercase;
}
.name-survey input[type=text]::-moz-placeholder { /* Firefox 19+ */
  color: #063957;
  text-transform: uppercase;
}
.name-survey input[type=text]:-ms-input-placeholder { /* IE 10+ */
  color: #063957;
  text-transform: uppercase;
}
.name-survey input[type=text]:-moz-placeholder { /* Firefox 18- */
  color: #063957;
  text-transform: uppercase;
}
.name-survey input[type=password]::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #063957;
  text-transform: uppercase;
}
.name-survey input[type=password]::-moz-placeholder { /* Firefox 19+ */
  color: #063957;
  text-transform: uppercase;
}
.name-survey input[type=password]:-ms-input-placeholder { /* IE 10+ */
  color: #063957;
  text-transform: uppercase;
}
.name-survey input[type=password]:-moz-placeholder { /* Firefox 18- */
  color: #063957;
  text-transform: uppercase;
}
.name-survey input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0px 1000px #1ebbb8 inset;
  -webkit-text-fill-color: #063957 !important;
}
.name-survey input:-webkit-autofill,
.name-survey input:-webkit-autofill:hover,
.name-survey input:-webkit-autofill:focus,
.name-survey input:-webkit-autofill:active {
  -webkit-transition: background-color 5000s ease-in-out 0s;
  transition: background-color 5000s ease-in-out 0s;
}

.terms-and-conditions {
  color: #063957;
  letter-spacing: normal;
}
.terms-and-conditions a {
  text-decoration: none;
}

.signup-form { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  align-items: center;
  flex-direction: column;
  justify-content: center;
  padding: 0 30px 20px 30px;
  background-color: white;
  border-radius: 5px;
  max-width: 500px;
}
.signup-form .account-disclaimer {
  margin-top: 5px;
  font-size: small;
}
.signup-form .domain-list {
  width: 100%;
  margin-top: 10px;
  border-color: #063957;
  cursor: pointer;
  height: 5vh !important;
  font-family: "Roboto";
  font-size: 0.9rem;
}
.signup-form h4 {
  font-size: 1.3rem;
  margin-bottom: 0;
  color: #063957;
  font-weight: 500;
  cursor: default;
}
.signup-form .signup-form-header {
  font-size: 36px;
  font-weight: 400;
  text-align: left;
  width: 100%;
}
.signup-form .signup-progress {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  margin-top: 30px;
  margin-bottom: 10px;
}
.signup-form .signup-progress .progress-text {
  font-size: 14px;
}
.signup-form .signup-progress .progress-bar {
  width: 100%;
  display: flex;
  background-color: rgba(190, 190, 192, 0.6666666667);
  border-radius: 5px;
}
.signup-form .signup-progress .progress-bar .progress-bar-filled {
  height: 6px;
  background-color: #1EBBB8;
  border-radius: 5px;
}
.signup-form .welcome-message {
  font-size: 24px;
  font-weight: 700;
  text-align: left;
}
.signup-form hr {
  width: 100%;
  border: 1px solid #1EBBB8;
  margin: 40px 0px 30px 0px;
}
.signup-form .top-input {
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: space-between;
  margin-bottom: 15px;
}
.signup-form .top-input .input-container {
  width: 49%;
}
.signup-form .top-input .input-container.email-input {
  width: 100%;
}
.signup-form .bottom-input {
  display: flex;
  align-items: center;
  width: 100%;
}
.signup-form .error {
  color: red;
  font-size: 12px;
  height: 0px;
  width: 100%;
  text-align: left;
}
.signup-form .input-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
}
.signup-form .input-container label {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 3px;
}
.signup-form .input-container input {
  height: 40px;
  border-radius: 5px;
  border: 1px solid #1EBBB8;
  width: 100%;
  padding: 0px 10px;
  box-sizing: border-box;
  color: #063957;
  font-size: 16px;
  font-family: "Roboto";
}
.signup-form .button-container {
  width: 100%;
}
.signup-form .button-container button {
  width: 100%;
  border-radius: 5px;
  background-color: #1EBBB8;
  color: white;
  cursor: pointer;
  height: 40px;
  margin-top: 40px;
  padding: 0;
}
.signup-form .form-group { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  flex: 1;
  flex-direction: column;
  width: 100%;
}
.signup-form .form-group .help-block {
  align-self: flex-start;
  font-size: 1rem;
  padding-top: 10px;
  color: #063957;
}
.signup-form img {
  align-self: center;
}
.signup-form {
  /*button {
    @extend %normalize-text;
    // background-color: #F0B200;
    background-color: $infotap-blue;
    border-radius: 4px;
    color: white;
    font-weight: 500;
    margin-top: 30px;
    margin-bottom: 30px;
    padding: 15px 39px;
    //font-family: 'DIN' !important;
    letter-spacing: 0px;
    font-size: 14pt;
    // text-shadow: 0.5px 0.5px #333;
  }

  button:hover {
    background-color: $infotap-light-blue;
    color: white;
    cursor: pointer;   
  }

  .login-input {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    border-bottom: 1px solid #3a3a3a;
    background-color: white;
    padding-bottom: 10px;
  }

  input {
    @extend %normalize-text;
    @extend .login-input;
    //background-color: red;

    //color: $white;
    font-size: 1rem;
    margin: 0;
    padding: 40px 0px 20px 5px;
    width: 100%;
    //font-family: 'DIN' !important;
  }

  input[type=text]:focus,
  input[type=password]:focus {
    @extend .login-input;
  }
  input[type=text],
  input[type=password] {
    @extend .login-input;
  }*/
  /*input[type=text]::-webkit-input-placeholder { /* Chrome/Opera/Safari 
    color: #3a3a3a;
    text-transform: uppercase;
  }
  input[type=text]::-moz-placeholder { /* Firefox 19+ 
    color: #3a3a3a;
    text-transform: uppercase;
  }
  input[type=text]:-ms-input-placeholder { /* IE 10+ 
    color: #3a3a3a;
    text-transform: uppercase;
  }
  input[type=text]:-moz-placeholder { /* Firefox 18- 
    color: #3a3a3a;
    text-transform: uppercase;
  }
  input[type=password]::-webkit-input-placeholder { /* Chrome/Opera/Safari 
    color: #3a3a3a;
    text-transform: uppercase;
  }
  input[type=password]::-moz-placeholder { /* Firefox 19+ 
    color: #3a3a3a;
    text-transform: uppercase;
  }
  input[type=password]:-ms-input-placeholder { /* IE 10+ 
    color: #3a3a3a;
    text-transform: uppercase;
  }
  input[type=password]:-moz-placeholder { /* Firefox 18- 
    color: #3a3a3a;
    text-transform: uppercase;
  }

  // remove styling for "autofill"
  input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px $infotap-light-blue inset;
    -webkit-text-fill-color: #3a3a3a !important;
  }
  input:-webkit-autofill,
  input:-webkit-autofill:hover,
  input:-webkit-autofill:focus,
  input:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s;
  }*/
}

@media (max-width: 736px) {
  .signup-form {
    width: auto !important;
  }
  .signup-form button {
    padding: 13px 0px !important;
  }
  .signup-form .form-group {
    width: 90vw !important;
  }
  .signup-form input {
    font-size: 16px;
  }
  .signup-form {
    border-radius: 0px !important;
  }
}
@media (min-width: 737px) and (max-width: 885px) {
  .signup-form {
    width: auto !important;
  }
  .signup-form button {
    padding: 13px 32px !important;
  }
  .signup-form .form-group {
    width: 80vw !important;
  }
}
.smartform-selector-container { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  align-items: center;
  flex: 1;
  justify-content: center;
}
.smartform-selector-container img {
  cursor: pointer;
  height: 30rem;
  padding: 10px 25px;
}
.smartform-selector-container .smartform-container { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  align-items: center;
  flex-direction: column;
}
.smartform-selector-container .favorite-smartform-container {
  display: flex;
  align-items: center;
  border: 1px solid #063957;
  border-radius: 10px;
  padding: 5px 10px;
  margin-top: 1px;
  width: 80%;
}
.smartform-selector-container .favorite-smartform-container > h2 {
  width: 40%;
  display: flex;
  align-items: center;
  gap: 10px;
}
.smartform-selector-container .favorite-smartform-container:hover {
  border-color: #1ebbb8;
  cursor: pointer;
}
.smartform-selector-container .frequency-badge {
  margin-left: auto;
  font-size: 0.75rem;
  color: #063957;
  border: 1px solid #063957;
  border-radius: 12px;
  padding: 2px 8px;
  white-space: nowrap;
  cursor: pointer;
}
.smartform-selector-container .frequency-badge:hover {
  background-color: #063957;
  color: #fff;
}

.custom, .prime0 {
  border: 1px solid #063957;
  border-radius: 50%;
  cursor: pointer;
  height: 25px;
  margin: 10px 5px;
  width: 25px;
}

.custom-modal {
  border: 3px solid #f5f5f5;
  border-radius: 50%;
  cursor: pointer;
  height: 25px;
  margin: 10px 10px 10px 10px;
  width: 25px;
}

.active-color {
  border-color: white !important;
  box-shadow: 0 0 0 2px white, 0 0 0 4px currentColor;
}

.active-color-white {
  border-color: white !important;
  box-shadow: 0 0 0 2px white;
}

.active-color-other {
  border-color: white !important;
  box-shadow: 0 0 0 2px white, 0 0 0 4px #063957;
}

.prime0 {
  background-color: #3e9be0;
  border: 0px !important;
  margin: 13px 13px 3px 13px !important;
}

.wyz-modal .header { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  background-color: #f5f5f5;
  justify-content: space-between;
}
.wyz-modal .header span {
  flex: 1;
}
.wyz-modal h2 { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  color: #a8a7a9;
  flex: 2;
  justify-content: center;
}
.wyz-modal .close {
  flex: 1;
}
.wyz-modal .close .icon-Close { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  color: #dadada;
  flex: 1;
  justify-content: flex-end;
}
.wyz-modal .close .icon-Close::before {
  cursor: pointer;
  flex: none;
  padding: 12px;
}
.wyz-modal .body {
  padding: 25px;
  text-align: center;
}
.wyz-modal .body .dialogue {
  color: #063957;
  font-size: 1.5rem;
}
.wyz-modal .body .launch-icons { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  justify-content: space-between;
}
.wyz-modal .body .launch-icons > div {
  opacity: 0.5;
}
.wyz-modal .body .launch-icons .active {
  opacity: 1;
  cursor: pointer;
}
.wyz-modal .body .launch-icons .not-active {
  cursor: not-allowed;
  pointer-events: none;
}
.wyz-modal .body .launch-icons .editable .inner-circle:after {
  content: "";
  position: absolute;
  top: 0.4em;
  left: 15px;
  width: 120px;
  height: 2px;
  background: #1293cc;
  z-index: -1;
}
.wyz-modal .body .launch-icons .paused .circle:before {
  content: "";
  position: absolute;
  top: 0.4em;
  right: 15px;
  width: 120px;
  height: 2px;
  background: #1293cc;
  z-index: -1;
}
.wyz-modal .body .launch-icons .paused img {
  margin-right: 13px;
}
.wyz-modal .body .launch-icons .circle {
  margin: 0 auto;
  border-radius: 50%;
  border: #1293cc solid 2px;
  width: 14px;
  height: 14px;
  color: #1293cc;
  position: relative;
}
.wyz-modal .body .launch-icons .circle .selected {
  background: #1293cc;
  border-radius: 50%;
  width: 10px;
  height: 10px;
  border: #ffffff solid 2px;
  opacity: 1;
}
.wyz-modal .body .survey-demo-container { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  padding: 10px 0px;
  flex-wrap: nowrap;
  margin: 10px 0px;
  width: 328px;
}
.wyz-modal .body .survey-demo-container .survey-demo {
  flex: 2;
  border-radius: 50px;
  border: #1293cc solid 2px;
  padding: 3px;
}
.wyz-modal .body .survey-demo-container .survey-demo .selected {
  background: #1293cc;
  border-radius: 50px;
  color: #ffffff;
}
.wyz-modal .body .survey-demo-container .survey-demo .survey-label {
  padding: 0px 25px;
  display: inline-block;
  cursor: pointer;
}
.wyz-modal .body .survey-demo-container .survey-demo .demo-label {
  padding: 0px 25px;
  display: inline-block;
  cursor: pointer;
}
.wyz-modal .body .survey-demo-container .demo-warning {
  font-size: 10px;
  align-self: center;
  flex-wrap: nowrap;
  padding: 0px 15px;
}
.wyz-modal .body .copy-module {
  display: flex;
  padding-bottom: 25px;
}
.wyz-modal .body .copy-module .copy-survey-url-container {
  width: 100%;
  border: #063957;
  border-style: solid;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  overflow: hidden;
  position: relative;
}
.wyz-modal .body .copy-module .copy-survey-url-container .gradient-right {
  pointer-events: none;
  background-image: linear-gradient(to right, transparent 95%, #dedede);
  position: absolute;
  top: 0;
  right: 0;
  height: 50px;
  width: 100%;
  z-index: 1;
}
.wyz-modal .body .copy-module .copy-survey-url-container .gradient-left {
  pointer-events: none;
  background-image: linear-gradient(to left, transparent 95%, #dedede);
  position: absolute;
  top: 0;
  right: 0;
  height: 50px;
  width: 100%;
  z-index: 1;
}
.wyz-modal .body .copy-module .copy-survey-url-container .copy-survey-url {
  padding: 15px 5px;
  width: 97%;
  border: none;
}
.wyz-modal .body .copy-module .copy-survey-button {
  width: 50px;
  margin-left: auto;
  color: white;
  background-color: #063957;
  padding: 15px;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  cursor: pointer;
}
.wyz-modal .body .label {
  color: #063957;
  font-size: 1rem;
  padding: 25px;
}
.wyz-modal .body .options { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  justify-content: space-around;
  color: #0d7ec3;
}
.wyz-modal .body .options button {
  align-self: center;
  background-color: #063957;
  border-radius: 5px;
  color: #fff;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: bolder;
  margin-top: 10px;
  padding: 15px 30px;
  text-transform: uppercase;
  width: 35%;
}

.app-item-content > .mx,
.mx {
  display: block;
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  background: #f7f9fb;
  font-family: "Roboto", system-ui, sans-serif;
  color: #1f1f1f;
}
.app-item-content > .mx *, .app-item-content > .mx *::before, .app-item-content > .mx *::after,
.mx *,
.mx *::before,
.mx *::after {
  box-sizing: border-box;
}

.mx__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 32px 28px 48px;
}
@media (max-width: 640px) {
  .mx__inner {
    padding: 20px 16px 32px;
  }
}

.mx-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.85);
  white-space: nowrap;
}
.mx-live__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #04aa83;
  box-shadow: 0 0 0 3px rgba(4, 170, 131, 0.25);
}
.mx-live.is-off .mx-live__dot {
  background: #888888;
  box-shadow: none;
}

.mx__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px 24px;
  margin-bottom: 20px;
}

.mx__title {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.mx__title h1 {
  margin: 0;
  font-family: "Poppins", "Roboto", system-ui, sans-serif;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.15;
  color: #063957;
  overflow-wrap: anywhere;
}

.mx__eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #19a9a6;
}

.mx__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.mx-action {
  display: inline-flex;
}
.mx-action.is-gated {
  cursor: pointer;
}
.mx-action.is-gated .ui-btn {
  pointer-events: none;
  opacity: 0.55;
}

.mx-btn-navy.ui-btn--primary {
  background: #063957;
  border-color: #063957;
}
.mx-btn-navy.ui-btn--primary:hover:not(:disabled) {
  background: #04283e;
  border-color: #04283e;
}

.mx-btn-spinner {
  width: 14px;
  height: 14px;
  border-width: 2px;
  border-color: rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
}
.ui-btn--secondary .mx-btn-spinner {
  border-color: #e8ecf0;
  border-top-color: #1ebbb8;
}

.mx__section {
  margin: 28px 0 12px;
  font-family: "Poppins", "Roboto", system-ui, sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: #063957;
}

.mx-picker {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 250px;
  max-width: 320px;
  padding: 8px 14px;
  border: 1px solid #d4dce5;
  border-radius: 15px;
  background: #fff;
  font-family: "Roboto", system-ui, sans-serif;
  color: #063957;
  text-align: left;
  cursor: pointer;
}
.mx-picker:hover {
  border-color: #1ebbb8;
}
.mx-picker:focus-visible {
  outline: none;
  border-color: #1ebbb8;
  box-shadow: 0 0 0 3px rgba(30, 187, 184, 0.12);
}
.mx-picker[data-state=open] {
  border-color: #1ebbb8;
}
.mx-picker__text {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}
.mx-picker__eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #19a9a6;
}
.mx-picker__current {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 600;
}
.mx-picker__menu {
  z-index: 1200;
  width: 360px;
  max-width: calc(100vw - 24px);
  padding: 6px;
}
.mx-picker__row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  font-family: "Roboto", system-ui, sans-serif;
  text-align: left;
  color: #063957;
  cursor: pointer;
}
.mx-picker__row:hover, .mx-picker__row:focus-visible {
  background: #f7f9fb;
  outline: none;
}
.mx-picker__row.is-on {
  background: rgba(30, 187, 184, 0.08);
}
.mx-picker__row.is-pending {
  cursor: default;
}
.mx-picker__icon {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(6, 57, 87, 0.06);
}
.mx-picker__spinner {
  flex: none;
  width: 20px;
  height: 20px;
  border-width: 2px;
  margin: 6px;
}
.mx-picker__label {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  font-size: 14px;
}
.mx-picker__label strong {
  font-weight: 600;
}
.mx-picker__label span {
  font-size: 12px;
  color: #888888;
}
.mx-picker__latest {
  padding: 2px 8px;
  border-radius: 999px;
  background: #dfe21c;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #063957;
}
.mx-picker__view {
  font-size: 13px;
  font-weight: 600;
  color: #19a9a6;
}
@media (max-width: 640px) {
  .mx-picker {
    max-width: none;
    flex: 1 1 100%;
  }
}

.mx-kpis {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 1100px) {
  .mx-kpis {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 520px) {
  .mx-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.mx-kpi {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding: 16px 18px;
  border: 1px solid #e8ecf0;
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 2px 12px rgba(6, 57, 87, 0.08);
}
.mx-kpi__label {
  font-size: 13px;
  color: #555555;
}
.mx-kpi__value {
  font-family: "Poppins", "Roboto", system-ui, sans-serif;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.1;
  color: #063957;
  font-variant-numeric: tabular-nums;
}

.mx-filter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin-top: 20px;
  padding: 12px 16px;
  border: 1px solid rgba(30, 187, 184, 0.35);
  border-radius: 12px;
  background: rgba(30, 187, 184, 0.1);
  font-size: 14px;
  line-height: 1.45;
  color: #063957;
}

.mx-hint {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 20px 0 0;
  font-size: 13px;
  color: #555555;
}
.mx-hint svg {
  flex: none;
  color: #1ebbb8;
}

.mx-loading {
  display: flex;
  justify-content: center;
  padding: 48px 0;
}

.mx-empty {
  margin: 24px 0;
  color: #555555;
}

.mx-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
  gap: 20px;
  align-items: start;
}
@media (max-width: 900px) {
  .mx-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
.mx-grid {
  transition: opacity 0.15s ease;
}
.mx-grid.is-refreshing {
  opacity: 0.55;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .mx-grid {
    transition: none;
  }
}

.mx-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 20px 22px;
  border: 1px solid #e8ecf0;
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 2px 12px rgba(6, 57, 87, 0.08);
}
@media (max-width: 640px) {
  .mx-card {
    padding: 16px;
  }
}
.mx-card--muted {
  box-shadow: none;
  background: rgba(255, 255, 255, 0.6);
}
.mx-card__head {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid #e8ecf0;
}
.mx-card__eyebrow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  color: #888888;
}
.mx-card__num {
  padding: 2px 8px;
  border-radius: 6px;
  background: #063957;
  font-weight: 700;
  color: #fff;
}
.mx-card__badge {
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(30, 187, 184, 0.12);
  font-weight: 700;
  color: #127a88;
}
.mx-card__title {
  margin: 0;
  font-family: "Poppins", "Roboto", system-ui, sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  color: #063957;
  overflow-wrap: anywhere;
}
.mx-card__summary {
  font-size: 13px;
  color: #555555;
}
.mx-card__loading {
  display: flex;
  justify-content: center;
  padding: 32px 0;
}
.mx-card__empty {
  margin: 8px 0;
  font-size: 14px;
  color: #555555;
}

.mx-groups {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.mx-bars__label {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 600;
  color: #063957;
}
.mx-bars__list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.mx-bars__row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  font-family: "Roboto", system-ui, sans-serif;
  text-align: left;
  color: #1f1f1f;
}
.mx-bars__row button.mx-bars__row {
  cursor: pointer;
}
.mx-bars__row button.mx-bars__row:hover {
  background: #f7f9fb;
}
.mx-bars__row:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(30, 187, 184, 0.12);
}
.mx-bars__row.is-selected {
  background: rgba(6, 57, 87, 0.06);
}
.mx-bars__row.is-selected .mx-bars__name, .mx-bars__row.is-selected .mx-bars__value {
  font-weight: 700;
  color: #063957;
}
.mx-bars__text {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: 14px;
}
.mx-bars__dot {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.mx-bars__name {
  flex: 1;
  min-width: 0;
  font-weight: 500;
  overflow-wrap: anywhere;
}
.mx-bars__value {
  flex: none;
  font-size: 13px;
  color: #555555;
  font-variant-numeric: tabular-nums;
}
.mx-bars__track {
  display: block;
  height: 8px;
  border-radius: 4px;
  background: #e8ecf0;
  overflow: hidden;
}
.mx-bars__fill {
  display: block;
  height: 100%;
  min-width: 2px;
  border-radius: inherit;
  transition: width 0.3s ease;
}

.mx-rating {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.mx-rating__nps {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  color: #555555;
}
.mx-rating__nps strong {
  color: #063957;
}
.mx-rating__scale {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  width: 100%;
}
.mx-rating__point {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 40px;
  padding: 6px 4px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  font-family: "Roboto", system-ui, sans-serif;
  cursor: pointer;
}
.mx-rating__point:hover {
  background: #f7f9fb;
}
.mx-rating__point:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(30, 187, 184, 0.12);
}
.mx-rating__point.is-selected .mx-rating__chip {
  background: #063957;
  border-color: #063957 !important;
  color: #fff;
}
.mx-rating__chip {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 6px;
  border: 2px solid;
  border-radius: 8px;
  font-weight: 700;
  color: #063957;
}
.mx-rating__pct {
  font-size: 12px;
  color: #555555;
  font-variant-numeric: tabular-nums;
}

.mx-gauge {
  position: relative;
  width: min(260px, 100%);
}
.mx-gauge svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.mx-gauge__track, .mx-gauge__value {
  fill: none;
  stroke-width: 14;
  stroke-linecap: round;
}
.mx-gauge__track {
  stroke: #e8ecf0;
}
.mx-gauge__value {
  transition: stroke-dasharray 0.4s ease;
}
.mx-gauge__text {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.mx-gauge__text strong {
  font-family: "Poppins", "Roboto", system-ui, sans-serif;
  font-size: 32px;
  font-weight: 700;
  line-height: 1;
  color: #063957;
}
.mx-gauge__text span {
  margin-top: 4px;
  font-size: 12px;
  color: #555555;
}
.mx-gauge__range {
  display: flex;
  justify-content: space-between;
  padding: 4px 8px 0;
  font-size: 12px;
  color: #888888;
}

.mx-ranking {
  position: relative;
  width: 100%;
}

.mx-text__declined {
  margin: 0 0 10px;
  font-size: 13px;
  color: #555555;
}
.mx-text__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 520px;
  margin: 0;
  padding: 0 4px 0 0;
  overflow-y: auto;
  list-style: none;
}
.mx-text__entry {
  padding: 10px 12px;
  border: 1px solid #e8ecf0;
  border-radius: 10px;
  background: #fff;
}
.mx-text__answer {
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  font-family: "Roboto", system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  text-align: left;
  color: #1f1f1f;
  cursor: pointer;
  overflow-wrap: anywhere;
}
.mx-text__answer:hover {
  color: #063957;
}
.mx-text__answer:focus-visible {
  outline: none;
  border-radius: 4px;
  box-shadow: 0 0 0 3px rgba(30, 187, 184, 0.12);
}
.mx-text__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.mx-text__lang {
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(30, 187, 184, 0.12);
  font-size: 11px;
  font-weight: 700;
  color: #127a88;
}
.mx-text__toggle {
  padding: 0;
  border: 0;
  background: none;
  font-family: "Roboto", system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: #19a9a6;
  cursor: pointer;
}
.mx-text__original {
  flex-basis: 100%;
  margin: 0;
  padding: 8px 10px;
  border-radius: 8px;
  background: #f7f9fb;
  font-size: 13px;
  line-height: 1.5;
  color: #555555;
}
.mx-text__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
  font-size: 13px;
  color: #555555;
}
.mx-text__nav button {
  padding: 6px 10px;
  border: 1px solid #e8ecf0;
  border-radius: 8px;
  background: #fff;
  font-family: "Roboto", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #063957;
  cursor: pointer;
}
.mx-text__nav button:disabled {
  opacity: 0.4;
  cursor: default;
}

.mx-modal__text {
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.55;
  color: #555555;
}
.mx-modal__link {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 600;
  color: #19a9a6;
  cursor: pointer;
}
.mx-modal__input {
  width: 100%;
}
.mx-modal__error {
  margin: 8px 0 0;
  font-size: 13px;
  color: #dc5238;
}
.mx-modal__dates {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}
@media (max-width: 480px) {
  .mx-modal__dates {
    grid-template-columns: 1fr;
  }
}
.mx-modal__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
}
.mx-modal__field > span {
  font-size: 14px;
  font-weight: 500;
  color: #063957;
}
.mx-modal__field .inspector-input {
  width: 100%;
}
.mx-modal__hint {
  margin: 2px 0 0;
  font-size: 12px;
  color: #888888;
}

.mx-report {
  max-width: calc(100vw - 32px);
}
.mx-report__body {
  padding: 0;
}
.mx-report__frame {
  display: block;
  width: 100%;
  height: min(70vh, 900px);
  border: 0;
}

.dropdown-container { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  border: solid #919397 1px;
  border-radius: 5px;
  padding: 5px 10px;
  flex: 1;
  position: relative;
  min-width: 85px;
  margin: 0px 10px;
  cursor: pointer;
}
.dropdown-container .dropdown-arrow {
  margin-left: auto;
  align-self: center;
  padding-left: 5px;
}
.dropdown-container .selected-option {
  align-self: center;
}
.dropdown-container .dropdown-option {
  cursor: pointer;
}
.dropdown-container .dropdown-content {
  position: absolute;
  top: 0;
  left: -1px;
  right: -1px;
  margin-top: 29px;
  background: white;
  z-index: 5;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  border-bottom: solid #919397 1px;
  border-left: solid #919397 1px;
  border-right: solid #919397 1px;
}
.dropdown-container .dropdown-content .scrollarea-content {
  padding-left: 10px;
  padding-bottom: 10px;
}
.dropdown-container .dropdown-content .disabled {
  cursor: default;
  pointer-events: none;
  opacity: 0.5;
}
.dropdown-container .dropdown-content .scrollarea {
  max-height: 200px;
}
.dropdown-container .dropdown-content .scrollarea .scrollarea-content {
  overflow: visible;
}
.dropdown-container .weight-input {
  flex: 1;
}

.forgot-password-wrapper { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  align-items: center;
  background-color: white;
  flex-direction: column;
  height: 100vh;
  justify-content: center;
  width: 100vw;
}
.forgot-password-wrapper p {
  color: #063957;
  font-size: 0.9rem;
  font-weight: 100;
  margin: 20px 0;
  text-align: center;
}
.forgot-password-wrapper h2 {
  font-size: 1.8rem;
  font-weight: bolder;
  margin: 0;
  padding: 0;
  text-align: center;
}
.forgot-password-wrapper .form-group { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  align-items: center;
  width: 100%;
}

.forgot-password-container { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  align-items: center;
  flex-direction: column;
  justify-content: center;
  margin-top: -80px;
  width: 35vw;
}
.forgot-password-container .captcha-container {
  display: none;
}
.forgot-password-container img {
  width: 415px;
}
.forgot-password-container .error-container {
  color: #eb435d;
  margin-top: 9px;
}
.forgot-password-container .info-container {
  margin-top: 9px;
}
.forgot-password-container .change-password-label {
  align-self: flex-start;
  color: #063957;
  text-transform: uppercase;
}
.forgot-password-container .captcha-container {
  height: 76px;
  margin-top: 10px;
  width: 302px;
}

.password-reset-success { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  align-items: center;
  flex-direction: column;
}
.password-reset-success .password-reset-message { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  align-items: center;
  background-color: #f0f0f0;
  border-radius: 8px;
  flex-direction: column;
  padding: 12px;
  width: 25vw;
}
.password-reset-success .password-reset-message p {
  color: #063957;
  font-size: 1.1rem;
}
.password-reset-success .password-button {
  padding: 10px 5px;
}
.password-reset-success .password-button:hover {
  background-color: #063957;
}

.password-button {
  background-color: #063957;
  border-radius: 6px;
  color: white;
  cursor: pointer;
  font-size: 1.2rem;
  margin-top: 10px;
  padding: 9px 0;
  width: 100%;
}

.password-button:hover {
  background-color: #1EBBB8;
}

.forgot-password-input {
  background-color: white;
  border: 1px solid #1EBBB8;
  border-radius: 6px;
  color: #063957;
  font-size: 1rem;
  font-weight: 100;
  padding: 11px;
  width: 100%;
  color: #063957;
}

.forgot-password-input::-webkit-input-placeholder {
  color: #f5f5f5;
}

.forgot-password-input::-moz-placeholder {
  color: #f5f5f5;
}

.forgot-password-input:-ms-input-placeholder {
  color: #f5f5f5;
}

.forgot-password-input:-moz-placeholder {
  color: #f5f5f5;
}

.change-password-input {
  margin-bottom: 20px;
}

@media (max-width: 768px) {
  .forgot-password-container {
    width: 80vw;
  }
  .forgot-password-container img {
    width: 80vw;
  }
  .forgot-password-container h2 {
    width: 80vw;
  }
  .forgot-password-container p {
    width: 80vw;
    font-size: 16px;
  }
  .forgot-password-container .form-group input {
    width: 80vw;
    font-size: 16px;
    margin-bottom: 10px;
  }
  .password-reset-success {
    width: 80vw;
  }
  .password-reset-success .password-reset-message {
    width: 100%;
  }
}
.pricing-page { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  flex: 1;
  align-items: flex-start;
  font-family: "Roboto";
}
.pricing-page .scrollarea { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  flex: 1;
  flex-wrap: nowrap;
  overflow: hidden;
  background: #f5f5f5;
}
.pricing-page .scrollarea .scrollbar-container.horizontal:hover {
  background: none;
  opacity: 1 !important;
}
.pricing-page .scrollarea .scrollbar-container.horizontal:before {
  border-top: 1px solid #063957;
  content: "";
  margin: 0 auto; /* this centers the line to the full width specified */
  position: absolute; /* positioning must be absolute here, and relative positioning must be applied to the parent */
  top: 50%;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  z-index: -1;
}
.pricing-page .scrollarea .scrollarea-content { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  overflow: visible;
}
.pricing-page .scrollarea .scrollarea-content .pricing-container {
  flex-direction: column;
  width: 100%;
  height: 100%;
}
.pricing-page .scrollarea .scrollarea-content .pricing-container .pricing-content { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  flex-direction: row;
  justify-content: space-around;
  margin-top: 45px;
  flex-wrap: wrap;
  margin: 80px 135px;
}
.pricing-page .scrollarea .scrollarea-content .pricing-container .pricing-content .coming-soon {
  min-height: 80px;
}
.pricing-page .scrollarea .scrollarea-content .pricing-container .pricing-content h1 {
  font-size: 30px;
}
.pricing-page .scrollarea .scrollarea-content .pricing-container .pricing-content h2 {
  font-size: 40px;
  margin: 0;
}
.pricing-page .scrollarea .scrollarea-content .pricing-container .pricing-content h2 sup {
  font-size: 20px;
}
.pricing-page .scrollarea .scrollarea-content .pricing-container .pricing-content > div {
  flex: 1;
  flex-direction: column;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  padding: 25px;
  color: #ffffff;
  vertical-align: top;
  margin: 15px;
  font-weight: 300;
  font-size: 20px;
}
.pricing-page .scrollarea .scrollarea-content .pricing-container .pricing-content > div button {
  flex: 1;
  width: 60%;
  font-weight: 400;
  font-size: 15px;
  padding: 15px;
  margin: 15px 0;
  cursor: pointer;
  text-transform: uppercase;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}
.pricing-page .scrollarea .scrollarea-content .pricing-container .pricing-content > div ul {
  text-align: left;
  margin-top: 0;
  font-size: 20px;
  font-weight: 100;
}
.pricing-page .scrollarea .scrollarea-content .pricing-container .pricing-content > div ul li {
  line-height: 30px;
  font-weight: 100;
}
.pricing-page .scrollarea .scrollarea-content .pricing-container .pricing-content .basic {
  position: relative;
  background: #b2d46b;
  font-weight: 300;
}
.pricing-page .scrollarea .scrollarea-content .pricing-container .pricing-content .basic .top-half { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  flex-direction: column;
  position: relative;
}
.pricing-page .scrollarea .scrollarea-content .pricing-container .pricing-content .basic .top-half button {
  background-color: #f0b200;
  color: #ffffff;
  align-self: center;
}
.pricing-page .scrollarea .scrollarea-content .pricing-container .pricing-content .basic .top-half .disabled {
  pointer-events: none;
}
.pricing-page .scrollarea .scrollarea-content .pricing-container .pricing-content .basic:before {
  content: "Limited Offer";
  background: red;
  color: #ffffff;
  text-shadow: none;
  padding: 5px;
  box-sizing: border-box;
  position: absolute;
  top: -34px;
  width: 70%;
  left: 15%;
}
.pricing-page .scrollarea .scrollarea-content .pricing-container .pricing-content .professional {
  background: #063957;
  position: relative;
}
.pricing-page .scrollarea .scrollarea-content .pricing-container .pricing-content .professional .top-half { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  flex-direction: column;
}
.pricing-page .scrollarea .scrollarea-content .pricing-container .pricing-content .professional .top-half button {
  background-color: #f0b200;
  color: #ffffff;
  align-self: center;
}
.pricing-page .scrollarea .scrollarea-content .pricing-container .pricing-content .professional .top-half .disabled {
  pointer-events: none;
}
.pricing-page .scrollarea .scrollarea-content .pricing-container .pricing-content .professional-plus {
  background: #919192;
}
.pricing-page .scrollarea .scrollarea-content .pricing-container .pricing-content .professional-plus .top-half { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  flex-direction: column;
  position: relative;
}
.pricing-page .scrollarea .scrollarea-content .pricing-container .pricing-content .professional-plus .top-half button {
  background-color: #ffffff;
  color: #b2d46b;
  align-self: center;
}
.pricing-page .scrollarea .scrollarea-content .pricing-container .pricing-content .professional-plus .top-half .disabled {
  pointer-events: none;
}
.pricing-page .scrollarea .scrollarea-content .pricing-container .faq {
  background: #fff;
}
.pricing-page .scrollarea .scrollarea-content .pricing-container .faq h1 {
  color: #1f94ca;
}
.pricing-page .scrollarea .scrollarea-content .pricing-container .faq .downArrow.show {
  transition: all 0.15s ease-in-out;
  opacity: 1;
}
.pricing-page .scrollarea .scrollarea-content .pricing-container .faq .downArrow.hide {
  opacity: 0;
  transition: all 0.15s ease-in-out;
}
.pricing-page .scrollarea .scrollarea-content .pricing-container .faq .faq-body { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  flex: 2;
  flex-wrap: wrap;
}
.pricing-page .scrollarea .scrollarea-content .pricing-container .faq .faq-body .faq-section {
  flex: 1 45%;
  text-align: left;
  padding: 25px;
}
.pricing-page .scrollarea .scrollarea-content .pricing-container .faq .faq-body .faq-section h2 {
  color: #b1d36b;
}

@media (max-width: 1200px) {
  .pricing-content {
    overflow: visible;
    margin: 80px 0 !important;
  }
}
.disabled {
  opacity: 0.5;
  cursor: default !important;
}

h1 {
  font-weight: bold;
}

.app-item-content > .wq,
.wq {
  display: block;
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  background: #f7f9fb;
  font-family: "Roboto", system-ui, sans-serif;
  color: #1f1f1f;
}
.app-item-content > .wq *, .app-item-content > .wq *::before, .app-item-content > .wq *::after,
.wq *,
.wq *::before,
.wq *::after {
  box-sizing: border-box;
}

.wq__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 32px 28px 48px;
}
@media (max-width: 640px) {
  .wq__inner {
    padding: 20px 16px 32px;
  }
}

.wq__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 20px;
}

.wq__title {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.wq__title h1 {
  margin: 0;
  font-family: "Poppins", "Roboto", system-ui, sans-serif;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.15;
  color: #063957;
}

.wq__eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #19a9a6;
}

.wq-loading {
  display: flex;
  justify-content: center;
  padding: 48px 0;
}

.wq-empty {
  margin: 24px 0;
  font-size: 15px;
  color: #555555;
}

.wq-hint {
  margin: 10px 0 0;
  font-size: 13px;
  color: #555555;
}

.wq-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}

.wq-queue {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid #e8ecf0;
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 2px 12px rgba(6, 57, 87, 0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.wq-queue:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 32px rgba(6, 57, 87, 0.12);
}
.wq-queue.is-bookmarked {
  border: 2px solid #dfe21c;
}
@media (prefers-reduced-motion: reduce) {
  .wq-queue {
    transition: none;
  }
  .wq-queue:hover {
    transform: none;
  }
}
.wq-queue__ribbon {
  position: absolute;
  top: -2px;
  right: 18px;
  color: #c9cc16;
}
.wq-queue__open {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 6px;
  padding: 18px 18px 12px;
  border: 0;
  border-radius: 15px 15px 0 0;
  background: none;
  font-family: "Roboto", system-ui, sans-serif;
  text-align: left;
  cursor: pointer;
}
.wq-queue__open:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 3px rgba(30, 187, 184, 0.12);
}
.wq-queue__name {
  display: -webkit-box;
  padding-right: 24px;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-family: "Poppins", "Roboto", system-ui, sans-serif;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
  color: #063957;
}
.wq-queue__count {
  font-size: 14px;
  font-weight: 600;
  color: #19a9a6;
}
.wq-queue__date {
  font-size: 12px;
  color: #888888;
}
.wq-queue__actions {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 10px;
  border-top: 1px solid #e8ecf0;
}
.wq-queue__spacer {
  flex: 1;
}
.wq-queue__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #063957;
  cursor: pointer;
}
.wq-queue__icon:hover {
  background: #f7f9fb;
}
.wq-queue__icon:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(30, 187, 184, 0.12);
}
.wq-queue__icon.is-on {
  color: #c9cc16;
}
.wq-queue__icon--danger {
  color: #f1674d;
}
.wq-queue__copy-wrap {
  position: relative;
  display: inline-flex;
}
.wq-queue__copied {
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  padding: 3px 8px;
  border-radius: 6px;
  background: #063957;
  font-size: 11px;
  color: #fff;
  white-space: nowrap;
}

.wq-detail__head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}
.wq-detail__head h1 {
  margin: 0;
  font-family: "Poppins", "Roboto", system-ui, sans-serif;
  font-size: 26px;
  font-weight: 700;
  color: #063957;
  overflow-wrap: anywhere;
}

.wq-detail__cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  margin-bottom: 28px;
}
@media (max-width: 860px) {
  .wq-detail__cards {
    grid-template-columns: minmax(0, 1fr);
  }
}

.wq-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px;
  border: 1px solid #e8ecf0;
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 2px 12px rgba(6, 57, 87, 0.08);
}
.wq-card__title {
  margin: 0;
  font-family: "Poppins", "Roboto", system-ui, sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #063957;
}

.wq-url {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 6px 6px 12px;
  border: 1px solid #d4dce5;
  border-radius: 6px;
  background: #f7f9fb;
}
.wq-url__text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: monospace;
  font-size: 13px;
  color: #063957;
}
.wq-url__copy {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid #e8ecf0;
  border-radius: 8px;
  background: #fff;
  font-family: "Roboto", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #063957;
  cursor: pointer;
}
.wq-url__copy:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(30, 187, 184, 0.12);
}

.wq-toggles {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.wq-toggles__row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.wq-tip {
  display: inline-flex;
  color: #888888;
  cursor: help;
}

.wq-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.wq-field .inspector-input {
  width: 100%;
}
.wq-field__label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #063957;
}
.wq-field__hint {
  font-size: 12px;
  line-height: 1.45;
  color: #888888;
}

.wq-saving {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 500;
  color: #888888;
}
.wq-saving .ui-spinner {
  width: 12px;
  height: 12px;
  border-width: 2px;
}

.wq-list__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.wq-section {
  margin: 0;
  font-family: "Poppins", "Roboto", system-ui, sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: #063957;
}

.wq-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.wq-rows__line {
  height: 3px;
  margin: -3px 0;
  border-radius: 2px;
  background: #1ebbb8;
}

.wq-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid #e8ecf0;
  border-radius: 12px;
  background: #fff;
}
.wq-row.is-dragging {
  opacity: 0.45;
}
.wq-row.is-removing {
  opacity: 0.6;
  pointer-events: none;
}
@media (max-width: 720px) {
  .wq-row {
    flex-wrap: wrap;
  }
}
.wq-row__handle {
  display: flex;
  flex: none;
  color: #888888;
  cursor: grab;
}
.wq-row__handle.is-off {
  opacity: 0.35;
  cursor: not-allowed;
}
.wq-row__main {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  font-family: "Roboto", system-ui, sans-serif;
  text-align: left;
  cursor: pointer;
}
.wq-row__main[aria-disabled=true] {
  cursor: default;
}
.wq-row__main:focus-visible {
  outline: none;
  border-radius: 8px;
  box-shadow: 0 0 0 3px rgba(30, 187, 184, 0.12);
}
.wq-row__order {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 2px solid;
  border-radius: 10px;
  font-family: "Poppins", "Roboto", system-ui, sans-serif;
  font-weight: 700;
  color: #063957;
}
.wq-row__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.wq-row__text strong {
  font-size: 15px;
  font-weight: 600;
  color: #063957;
  overflow-wrap: anywhere;
}
.wq-row__text .dash-schedule {
  margin: 0;
}
.wq-row__meta {
  font-size: 12px;
  color: #888888;
}
.wq-row__actions {
  display: flex;
  flex: none;
  align-items: center;
  gap: 6px;
}
.wq-row__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #f1674d;
  cursor: pointer;
}
.wq-row__remove:hover {
  background: #f7f9fb;
}
.wq-row__remove:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(30, 187, 184, 0.12);
}

.wq-modal__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: #555555;
}
.wq-modal__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.wq-modal__field > span {
  font-size: 14px;
  font-weight: 500;
  color: #063957;
}
.wq-modal__field .inspector-input, .wq-modal__field .inspector-select {
  width: 100%;
}
.wq-modal__hint {
  margin: 8px 0 0;
  font-size: 12px;
  color: #888888;
}

.invite-container { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  align-items: center;
  background-color: #043957;
  flex-direction: column;
  height: 100%;
  width: 100%;
  justify-content: center;
  overflow-y: auto;
}
.invite-container .third-party-authentication-button {
  display: flex;
  width: 100%;
  border: 1px solid #58585a;
  padding: 15px 0;
  margin-bottom: 15px;
  cursor: pointer;
}
.invite-container .third-party-authentication-button:hover {
  box-shadow: rgba(0, 0, 0, 0.2) 0 1px 4px, rgba(0, 0, 0, 0.12) 0 1px 2px;
}
.invite-container .authentication-icon {
  margin-left: 30px;
}
.invite-container .authentication-label {
  margin: 0 auto;
  font-weight: 800;
  font-size: 17px;
}
.invite-container .invite-form-container { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  align-items: center;
  flex-direction: column;
  justify-content: center;
}
.invite-container .invite-frame-container { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  align-items: center;
  flex-direction: column;
  justify-content: center;
  background: #FFF;
  width: 100%;
  height: 100%;
  padding: 30px;
  border-radius: 10px;
  margin-top: 2vh;
}
.invite-container .create-password-input {
  width: 100%;
  margin-top: 2vh;
}
.invite-container .local-account-setup { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  display: flex;
  flex-direction: column;
  width: 100%;
  flex: 1;
  gap: 0.75rem;
}
.invite-container .local-account-setup .label-input-group {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.invite-container .local-account-setup .label-input-group label {
  font-size: 1.125rem;
}
.invite-container .local-account-setup .label-input-group input {
  height: 35px;
  border: 1px solid #1EBBB8;
  border-radius: 0.5rem;
  background-color: #fff;
  color: #555;
  padding-left: 10px;
  font-size: 1rem;
}
.invite-container .local-account-setup .error-button-group {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-top: 1rem;
}
.invite-container .local-account-setup .error-button-group .errors {
  color: red;
  font-size: 0.75rem;
}
.invite-container .local-account-setup .error-button-group button {
  font-size: 1.125rem;
  background-color: #1EBBB8;
  color: white;
  border-radius: 0.5rem;
  cursor: pointer;
  height: 30px;
  padding: 10px 0;
}
.invite-container .form-group { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  flex-direction: column;
  justify-content: center;
  width: 100%;
  height: 100%;
  flex: 1;
  border: none;
}
.invite-container .form-group input {
  height: 100%;
  font-size: 17px;
  padding: 15px 0;
  border: 1px solid #58585a;
  padding-left: 10px;
}
.invite-container .credits {
  color: #063957;
  font-size: 0.5rem;
  margin-top: 3vh;
  text-transform: uppercase;
}
.invite-container .invite-submit-button-container {
  margin-top: 1vh;
  width: 100%;
}
.invite-container .invite-submit-button-container .submit-button {
  width: 100%;
  padding: 15px 0;
  background-color: #043957;
  color: white;
  font-size: 17px;
}

.app-item-content > .themes,
.themes {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr) 380px;
  flex: 1;
  min-width: 0;
  min-height: 0;
  background: #f7f9fb;
  font-family: "Roboto", system-ui, sans-serif;
  color: #1f1f1f;
}
.app-item-content > .themes *, .app-item-content > .themes *::before, .app-item-content > .themes *::after,
.themes *,
.themes *::before,
.themes *::after {
  box-sizing: border-box;
}
@media (max-width: 1100px) {
  .app-item-content > .themes,
  .themes {
    grid-template-columns: 240px minmax(0, 1fr) 340px;
  }
}
@media (max-width: 900px) {
  .app-item-content > .themes,
  .themes {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
  }
}

.themes__list {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 20px 16px;
  border-right: 1px solid #e8ecf0;
  background: #fff;
}
@media (max-width: 900px) {
  .themes__list {
    border-right: 0;
    border-bottom: 1px solid #e8ecf0;
  }
}

.themes__heading {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #19a9a6;
}

.themes__loading {
  display: flex;
  justify-content: center;
  padding: 24px 0;
}

.themes__items {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 6px;
  min-height: 0;
  margin: 0 0 12px;
  padding: 0;
  overflow-y: auto;
  list-style: none;
}
@media (max-width: 900px) {
  .themes__items {
    flex-direction: row;
    overflow-x: auto;
  }
}

.themes__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  font-family: "Roboto", system-ui, sans-serif;
  text-align: left;
  cursor: pointer;
}
.themes__item:hover {
  background: #f7f9fb;
}
.themes__item.is-on {
  border-color: #1ebbb8;
  background: rgba(30, 187, 184, 0.06);
}
.themes__item:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(30, 187, 184, 0.12);
}
@media (max-width: 900px) {
  .themes__item {
    width: 220px;
  }
}

.themes__backdrop {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}
.themes__backdrop img {
  max-width: 80%;
  max-height: 80%;
  opacity: 0.5;
}

.themes__meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.themes__meta strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 600;
  color: #063957;
}

.themes__dots {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}
.themes__dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
}
.themes__dots em {
  font-size: 11px;
  font-style: normal;
  color: #888888;
}

.themes__new {
  width: 100%;
}

.themes__stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  min-width: 0;
  min-height: 0;
  padding: 24px 16px;
  overflow-y: auto;
}

.theme-preview {
  width: min(300px, 100%);
}
.theme-preview svg {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 8px 24px rgba(6, 57, 87, 0.12));
}

.themes__caption {
  margin: 0;
  font-size: 12px;
  color: #888888;
  text-align: center;
}

.themes__panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-left: 1px solid #e8ecf0;
  background: #fff;
}
@media (max-width: 900px) {
  .themes__panel {
    border-left: 0;
    border-top: 1px solid #e8ecf0;
  }
}

.themes__panel-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 24px;
  min-height: 0;
  padding: 20px;
  overflow-y: auto;
}

.themes__colors {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.themes__field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.themes__field .inspector-input {
  width: 100%;
}

.themes__label {
  font-size: 14px;
  font-weight: 600;
  color: #063957;
}

.themes__hint {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  color: #888888;
}

.themes__note {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  color: #555555;
}
.themes__note.is-low {
  color: #dc5238;
}

.themes__palette {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.themes__color-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.themes__swatch {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
  cursor: pointer;
}
.themes__swatch.is-empty {
  background: #f7f9fb;
  box-shadow: inset 0 0 0 1px #d4dce5;
  color: #555555;
}
.themes__swatch:focus-visible, .themes__swatch[data-state=open] {
  outline: none;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #1ebbb8;
}

.themes__hex {
  flex: 1;
  font-family: monospace;
  font-size: 13px;
  color: #555555;
}

.themes__remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #888888;
  cursor: pointer;
}
.themes__remove:hover {
  background: #f7f9fb;
  color: #f1674d;
}
.themes__remove:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(30, 187, 184, 0.12);
}

.themes__add {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 6px;
  padding: 7px 12px;
  border: 1px dashed #1ebbb8;
  border-radius: 10px;
  background: transparent;
  font-family: "Roboto", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #19a9a6;
  cursor: pointer;
}
.themes__add:hover {
  background: rgba(30, 187, 184, 0.06);
}
.themes__add:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(30, 187, 184, 0.12);
}

.themes__drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 120px;
  padding: 16px;
  border: 1px dashed #063957;
  border-radius: 12px;
  background: #f7f9fb;
  font-family: "Roboto", system-ui, sans-serif;
  font-size: 14px;
  color: #063957;
  text-align: center;
  cursor: pointer;
}
.themes__drop.is-over {
  border: 1px solid #1ebbb8;
  background: rgba(30, 187, 184, 0.06);
}
.themes__drop:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(30, 187, 184, 0.12);
}
.themes__drop:disabled {
  cursor: default;
}

.themes__browse {
  font-weight: 600;
  color: #19a9a6;
  text-decoration: underline;
}

.themes__watermark {
  display: flex;
  align-items: center;
  gap: 14px;
}
.themes__watermark-img {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 72px;
  border-radius: 10px;
  overflow: hidden;
}
.themes__watermark-img img {
  max-width: 85%;
  max-height: 85%;
}
.themes__watermark-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.themes__footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 20px;
  border-top: 1px solid #e8ecf0;
}

.theme-congrats {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 8px 8px 4px;
  text-align: center;
}
.theme-congrats img {
  width: 160px;
  height: auto;
}
.theme-congrats h2 {
  margin: 0;
  font-family: "Poppins", "Roboto", system-ui, sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: #063957;
}
.theme-congrats p {
  margin: 0 0 8px;
  font-size: 14px;
  line-height: 1.55;
  color: #555555;
}

.email-injector__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0;
}
.email-injector__subtitle {
  margin: 0;
  padding: 16px 28px 0;
  font-size: 14px;
  color: #555555;
}
.email-injector__panes {
  display: flex;
  min-height: 0;
  border-top: 1px solid #e8ecf0;
}
.email-injector__left {
  flex: none;
  width: 220px;
  padding: 22px 20px;
  border-right: 1px solid #e8ecf0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.email-injector__style-picker {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.email-injector__style-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid #e8ecf0;
  border-radius: 12px;
  background: #fff;
  font-family: "Roboto", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #063957;
  text-align: left;
  cursor: pointer;
}
.email-injector__style-btn:hover {
  border-color: #d4dce5;
}
.email-injector__style-btn:focus-visible {
  box-shadow: 0 0 0 3px rgba(30, 187, 184, 0.12);
  outline: none;
}
.email-injector__style-btn--active {
  border: 2px solid #1ebbb8;
  padding: 9px 11px;
  background: rgba(30, 187, 184, 0.06);
}
.email-injector__style-icon {
  width: 18px;
  text-align: center;
  color: #1ebbb8;
}
.email-injector__note {
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 1.45;
  color: #888888;
}
.email-injector__right {
  flex: 1;
  min-width: 0;
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.email-injector__preview-frame {
  height: 260px;
  border: 1px solid #e8ecf0;
  border-radius: 12px;
  background: #f0f0f0;
  overflow: hidden;
}
.email-injector__preview-frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
.email-injector__export-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.email-injector__hint {
  margin: 0;
  font-size: 13px;
  color: #555555;
}
.email-injector__loading {
  padding: 30px;
  text-align: center;
  font-size: 14px;
  color: #555555;
  background: #f7f9fb;
  border-radius: 12px;
}
.email-injector__code {
  margin: 0;
  max-height: 200px;
  overflow: auto;
  padding: 14px 16px;
  border-radius: 12px;
  background: #0e1a23;
  color: #cfe9e8;
  font: 12px/1.55 ui-monospace, Menlo, Consolas, monospace;
  white-space: pre-wrap;
  word-break: break-all;
}
.email-injector__actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
.email-injector__esp-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.email-injector__esp-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.email-injector__esp-label {
  flex: none;
  width: 130px;
  font-size: 13px;
  font-weight: 500;
  color: #063957;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.email-injector__esp-input {
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid #e8ecf0;
  border-radius: 6px;
  background: #f7f9fb;
  font-family: "Roboto", system-ui, sans-serif;
  font-size: 12px;
  color: #555555;
}
.email-injector__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 18px;
  border: 2px solid #e8ecf0;
  border-radius: 15px;
  background: #fff;
  font-family: "Roboto", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #063957;
  cursor: pointer;
}
.email-injector__btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.email-injector__btn--primary {
  background: #1ebbb8;
  border-color: #1ebbb8;
  color: #fff;
}
.email-injector__btn--primary:hover:not(:disabled) {
  background: #19a9a6;
  border-color: #19a9a6;
}
.email-injector__btn--secondary:hover:not(:disabled) {
  border-color: #d4dce5;
  background: #f7f9fb;
}
.email-injector__btn--sm {
  padding: 7px 14px;
  font-size: 12px;
  border-color: #1ebbb8;
  color: #1ebbb8;
}

@media (max-width: 879px) {
  .email-injector__panes {
    flex-direction: column;
  }
  .email-injector__left {
    width: auto;
    border-right: 0;
    border-bottom: 1px solid #e8ecf0;
  }
}
.translation-panel-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
}

.translation-panel {
  background: #fff;
  width: 80vw;
  max-width: 1100px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.translation-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  border-bottom: 1px solid #e0e0e0;
  background: #f5f5f5;
  flex-shrink: 0;
}
.translation-panel__header h2 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
}
.translation-panel__controls {
  display: flex;
  align-items: center;
  gap: 12px;
}
.translation-panel__lang-select {
  padding: 6px 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 0.9rem;
  cursor: pointer;
}
.translation-panel__close {
  background: none;
  border: none;
  font-size: 1.2rem;
  cursor: pointer;
  padding: 4px 8px;
  color: #555;
}
.translation-panel__close:hover {
  color: #000;
}
.translation-panel__processing-banner {
  background: #fff3cd;
  border-bottom: 1px solid #ffc107;
  color: #856404;
  padding: 10px 24px;
  font-size: 0.85rem;
  flex-shrink: 0;
}
.translation-panel__empty, .translation-panel__loading {
  padding: 40px 24px;
  text-align: center;
  color: #888;
  font-size: 0.95rem;
}
.translation-panel__body {
  flex: 1;
  overflow-y: auto;
  padding: 0 24px 24px;
}

.translation-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
  margin-top: 16px;
}
.translation-table th {
  text-align: left;
  padding: 8px 10px;
  background: #f0f0f0;
  border-bottom: 2px solid #ddd;
  font-weight: 600;
  position: sticky;
  top: 0;
  z-index: 1;
}
.translation-table__col-label {
  width: 160px;
}
.translation-table__col-source {
  width: 40%;
}
.translation-table__col-translated {
  width: auto;
}

.translation-section-header td {
  padding: 12px 10px 4px;
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #555;
  background: #fafafa;
  border-top: 2px solid #e8e8e8;
}
.translation-section-header--question td {
  padding-left: 20px;
  font-size: 0.75rem;
  color: #777;
  background: #fdfdfd;
  border-top: 1px solid #efefef;
}

.translation-row {
  border-bottom: 1px solid #f0f0f0;
}
.translation-row:hover {
  background: #fafafe;
}
.translation-row__label {
  padding: 8px 10px;
  color: #666;
  font-size: 0.8rem;
  vertical-align: middle;
  white-space: nowrap;
}
.translation-row__source {
  padding: 8px 10px;
  color: #333;
  vertical-align: middle;
}
.translation-row__translated {
  padding: 6px 10px;
  vertical-align: middle;
}
.translation-row__input-wrapper {
  display: flex;
  align-items: center;
  gap: 6px;
}

.translation-input {
  width: 100%;
  padding: 5px 8px;
  border: 1px solid #ddd;
  border-radius: 3px;
  font-size: 0.85rem;
}
.translation-input:focus {
  outline: none;
  border-color: #3e9be0;
  box-shadow: 0 0 0 2px rgba(62, 155, 224, 0.15);
}
.translation-input:disabled {
  background: #f5f5f5;
  color: #aaa;
  cursor: not-allowed;
}

.translation-edited-badge {
  flex-shrink: 0;
  font-size: 0.65rem;
  font-weight: 600;
  background: #e3f2fd;
  color: #1976d2;
  border-radius: 3px;
  padding: 2px 5px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.nf-hero {
  position: relative;
  overflow: hidden;
  text-align: center;
  background: linear-gradient(135deg, #053048 0%, #063957 55%, #052f47 100%);
  color: #fff;
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nf-rings {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.nf-rings svg {
  width: 100%;
  height: 100%;
}

.nf-inner {
  position: relative;
  z-index: 2;
  max-width: 760px;
  margin: 0 auto;
  padding: 60px 20px;
}

.nf-glyph {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0 0 6px;
  line-height: 1;
}

.nf-d {
  font-weight: 800;
  font-size: clamp(120px, 22vw, 220px);
  letter-spacing: -0.04em;
  color: #fff;
}

.nf-o {
  width: clamp(96px, 17vw, 172px);
  height: clamp(96px, 17vw, 172px);
  border-radius: 50%;
  flex: 0 0 auto;
  background: radial-gradient(circle at 50% 38%, rgba(30, 187, 184, 0.28), transparent 70%);
  border: 3px solid #1ebbb8;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 clamp(2px, 1vw, 10px);
  box-shadow: 0 0 0 10px rgba(30, 187, 184, 0.08);
}
.nf-o img {
  width: 46%;
  height: auto;
}

.nf-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  margin-bottom: 22px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #1ebbb8;
  background: rgba(30, 187, 184, 0.12);
  border: 1px solid rgba(30, 187, 184, 0.3);
  border-radius: 50px;
  padding: 6px 14px;
}

.nf-hero h1 {
  font-weight: 700;
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0 0 16px;
  color: #fff;
}
.nf-hero h1 .nf-yellow {
  color: #dfe21c;
}

.nf-sub {
  font-size: 18px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.84);
  max-width: 540px;
  margin: 0 auto 32px;
}

.nf-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}

.nf-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #1ebbb8;
  color: #fff;
  border: 2px solid #1ebbb8;
  border-radius: 6px;
  padding: 12px 24px;
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  transition: background 0.2s, border-color 0.2s;
}
.nf-btn-primary:hover {
  background: rgb(24.3594470046, 151.8405529954, 149.4046082949);
  border-color: rgb(24.3594470046, 151.8405529954, 149.4046082949);
  color: #fff;
  text-decoration: none;
}

.nf-btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.5);
  border-radius: 6px;
  padding: 12px 24px;
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  transition: border-color 0.2s, background 0.2s;
}
.nf-btn-outline:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  text-decoration: none;
}

@media (max-width: 560px) {
  .nf-ctas {
    flex-direction: column;
    align-items: stretch;
  }
  .nf-btn-primary,
  .nf-btn-outline {
    justify-content: center;
  }
}
.eb-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  text-align: center;
  background: linear-gradient(135deg, #053048 0%, #063957 55%, #052f47 100%);
  color: #fff;
}

.eb-fallback-page {
  min-height: 100vh;
}

.eb-fallback-panel {
  min-height: 60vh;
  border-radius: 8px;
}

.eb-inner {
  max-width: 620px;
  padding: 48px 24px;
}

.eb-eyebrow {
  display: inline-block;
  margin-bottom: 18px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(235, 67, 93, 0.18);
  border: 1px solid rgba(235, 67, 93, 0.45);
  border-radius: 50px;
  padding: 6px 14px;
}

.eb-fallback h2 {
  font-weight: 700;
  font-size: clamp(22px, 3vw, 32px);
  line-height: 1.15;
  margin: 0 0 14px;
  color: #fff;
}

.eb-sub {
  font-size: 16px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.84);
  margin: 0 auto 28px;
}

.eb-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}

.eb-btn-primary,
.eb-btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 6px;
  padding: 12px 24px;
  font-weight: 600;
  font-size: 16px;
  font-family: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}

.eb-btn-primary {
  background: #1ebbb8;
  color: #fff;
  border: 2px solid #1ebbb8;
}
.eb-btn-primary:hover {
  background: rgb(24.3594470046, 151.8405529954, 149.4046082949);
  border-color: rgb(24.3594470046, 151.8405529954, 149.4046082949);
  color: #fff;
}

.eb-btn-outline {
  background: transparent;
  color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.5);
}
.eb-btn-outline:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  text-decoration: none;
}

@media (max-width: 560px) {
  .eb-ctas {
    flex-direction: column;
    align-items: stretch;
  }
  .eb-btn-primary,
  .eb-btn-outline {
    justify-content: center;
  }
}
.app-header,
.app-header *,
.app-header *::before,
.app-header *::after,
.app-popover,
.app-popover *,
.app-popover *::before,
.app-popover *::after,
.ui-modal,
.ui-modal *,
.ui-modal *::before,
.ui-modal *::after,
.ui-toast,
.ui-toast *,
.ui-toast *::before,
.ui-toast *::after,
.ui-btn,
.ui-btn *,
.ui-btn *::before,
.ui-btn *::after,
.ui-toggle,
.ui-toggle *,
.ui-toggle *::before,
.ui-toggle *::after,
.ui-segmented,
.ui-segmented *,
.ui-segmented *::before,
.ui-segmented *::after {
  box-sizing: border-box;
}

.ui-spinner {
  display: inline-block;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 3px solid #e8ecf0;
  border-top-color: #1ebbb8;
  animation: ui-spin 0.8s linear infinite;
}

@keyframes ui-spin {
  to {
    transform: rotate(360deg);
  }
}
.ui-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.ui-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 2px solid transparent;
  border-radius: 15px;
  font-family: "Roboto", system-ui, sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.2;
  letter-spacing: normal;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
}
.ui-btn:focus-visible {
  box-shadow: 0 0 0 3px rgba(30, 187, 184, 0.12);
}
.ui-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.ui-btn__icon {
  display: inline-flex;
}
.ui-btn__icon svg {
  display: block;
}
.ui-btn--md {
  padding: 9px 18px;
}
.ui-btn--sm {
  padding: 7px 12px;
  font-size: 13px;
}
.ui-btn--icon-only.ui-btn--md {
  padding: 9px;
}
.ui-btn--icon-only.ui-btn--sm {
  padding: 6px;
}
.ui-btn--primary {
  background: #1ebbb8;
  border-color: #1ebbb8;
  color: #fff;
}
.ui-btn--primary:hover:not(:disabled) {
  background: #19a9a6;
  border-color: #19a9a6;
}
.ui-btn--secondary {
  background: #fff;
  border-color: #e8ecf0;
  color: #063957;
}
.ui-btn--secondary:hover:not(:disabled) {
  border-color: #d4dce5;
  background: #f7f9fb;
}
.ui-btn--destructive {
  background: #fff;
  border-color: #e8ecf0;
  color: #f1674d;
}
.ui-btn--destructive:hover:not(:disabled) {
  border-color: #f1674d;
}
.ui-btn--destructive-fill {
  background: #f1674d;
  border-color: #f1674d;
  color: #fff;
}
.ui-btn--destructive-fill:hover:not(:disabled) {
  background: #dc5238;
  border-color: #dc5238;
}
.ui-btn--on-navy {
  background: transparent;
  border-color: #fff;
  color: #fff;
}
.ui-btn--on-navy:hover:not(:disabled) {
  background: #fff;
  color: #063957;
}
.ui-btn--launch {
  background: #dfe21c;
  border-color: #dfe21c;
  color: #063957;
}
.ui-btn--launch:hover:not(:disabled) {
  background: #c9cc16;
  border-color: #c9cc16;
}

.ui-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(6, 57, 87, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 1000;
}
.ui-modal-overlay--confirm {
  z-index: 1100;
}

.ui-modal {
  position: relative;
  display: flex;
  flex-direction: column;
  max-width: 100%;
  max-height: calc(100vh - 32px);
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 8px 32px rgba(6, 57, 87, 0.12);
  color: #1f1f1f;
  font-family: "Roboto", system-ui, sans-serif;
  outline: none;
  overflow: hidden;
}
.ui-modal__header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 22px 28px;
  border-bottom: 1px solid #e8ecf0;
}
.ui-modal__titles {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ui-modal__eyebrow {
  font-family: "Roboto", system-ui, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #1ebbb8;
}
.ui-modal__title {
  font-family: "Poppins", "Roboto", system-ui, sans-serif;
  font-weight: 700;
  font-size: 24px;
  line-height: 1.25;
  letter-spacing: normal;
  color: #063957;
  margin: 0;
}
.ui-modal__round-btn {
  flex: none;
  width: 36px;
  height: 36px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid #e8ecf0;
  background: #fff;
  color: #063957;
  cursor: pointer;
}
.ui-modal__round-btn:hover {
  background: #f7f9fb;
}
.ui-modal__round-btn:focus-visible {
  border-color: #1ebbb8;
  box-shadow: 0 0 0 3px rgba(30, 187, 184, 0.12);
  outline: none;
}
.ui-modal__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 22px 28px;
  font-size: 15px;
  line-height: 1.5;
}
.ui-modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 28px;
  border-top: 1px solid #e8ecf0;
}

.ui-confirm .ui-modal__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 26px 28px;
}
.ui-confirm__title {
  font-family: "Poppins", "Roboto", system-ui, sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: normal;
  color: #063957;
  margin: 0;
}
.ui-confirm__body {
  font-size: 14px;
  line-height: 1.55;
  color: #1f1f1f;
}
.ui-confirm__label {
  font-size: 13px;
  line-height: 1.5;
  color: #555555;
}
.ui-confirm__actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}

.ui-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  position: relative;
}
.ui-toggle__input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.ui-toggle__track {
  flex: none;
  position: relative;
  width: 40px;
  height: 22px;
  border-radius: 11px;
  background: #d4dce5;
  transition: background-color 0.15s;
}
.ui-toggle__knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(6, 57, 87, 0.2);
  transition: transform 0.15s;
}
.ui-toggle__input:checked + .ui-toggle__track {
  background: #1ebbb8;
}
.ui-toggle__input:checked + .ui-toggle__track .ui-toggle__knob {
  transform: translateX(18px);
}
.ui-toggle__input:focus-visible + .ui-toggle__track {
  box-shadow: 0 0 0 3px rgba(30, 187, 184, 0.12);
}
.ui-toggle__label {
  font-size: 14px;
  color: #1f1f1f;
}
.ui-toggle--disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.ui-segmented {
  display: inline-flex;
  gap: 2px;
  padding: 4px;
  border: 1px solid #e8ecf0;
  border-radius: 12px;
  background: #fff;
}
.ui-segmented__item {
  border: 0;
  border-radius: 9px;
  padding: 7px 14px;
  background: transparent;
  color: #555555;
  font-family: "Roboto", system-ui, sans-serif;
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}
.ui-segmented__item:hover:not(:disabled):not(.is-selected) {
  color: #063957;
}
.ui-segmented__item:focus-visible {
  box-shadow: 0 0 0 3px rgba(30, 187, 184, 0.12);
}
.ui-segmented__item:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.ui-segmented__item.is-selected {
  background: #063957;
  color: #fff;
}

.ui-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  z-index: 2000;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: min(560px, 100vw - 32px);
  padding: 12px 10px 12px 18px;
  border-radius: 12px;
  background: #063957;
  color: #fff;
  box-shadow: 0 8px 32px rgba(6, 57, 87, 0.12);
  font-family: "Roboto", system-ui, sans-serif;
  animation: ui-toast-in 0.2s ease-out;
}
.ui-toast__icon {
  flex: none;
  display: inline-flex;
  color: #1ebbb8;
}
.ui-toast__icon svg {
  display: block;
}
.ui-toast--error .ui-toast__icon, .ui-toast--delete .ui-toast__icon {
  color: #f1674d;
}
.ui-toast--warning .ui-toast__icon {
  color: #dfe21c;
}
.ui-toast__text {
  min-width: 0;
  padding-right: 4px;
}
.ui-toast__message {
  font-size: 14px;
  line-height: 1.4;
}
.ui-toast__sub {
  font-size: 12px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.75);
}
.ui-toast__close {
  flex: none;
  width: 26px;
  height: 26px;
  padding: 0;
  border-radius: 50%;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.6);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.ui-toast__close:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
}
.ui-toast__close:focus-visible {
  box-shadow: 0 0 0 2px #1ebbb8;
}

@keyframes ui-toast-in {
  from {
    opacity: 0;
    transform: translate(-50%, 8px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}
.tour {
  position: fixed;
  inset: 0;
  z-index: 5000;
  pointer-events: none;
  font-family: "Roboto", system-ui, sans-serif;
}
.tour *, .tour *::before, .tour *::after {
  box-sizing: border-box;
}
.tour__spot {
  position: fixed;
  pointer-events: none;
}
.tour__dim {
  position: fixed;
  pointer-events: auto;
}
.tour__mask {
  position: fixed;
  pointer-events: auto;
}
.tour__spot {
  border: 3px solid #1ebbb8;
  border-radius: 10px;
  box-shadow: 0 0 0 9999px rgba(6, 57, 87, 0.6);
  transition: top 0.15s ease, left 0.15s ease, width 0.15s ease, height 0.15s ease;
}
.tour__spot::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 12px;
  box-shadow: 0 0 0 0 rgba(30, 187, 184, 0.7);
  animation: tour-pulse 1.6s ease-out infinite;
}
.tour__dim {
  inset: 0;
  background: rgba(6, 57, 87, 0.6);
}
.tour__block {
  position: fixed;
  pointer-events: auto;
  cursor: not-allowed;
}
.tour__card {
  position: fixed;
  max-width: calc(100vw - 32px);
  padding: 18px 20px 16px;
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 8px 32px rgba(6, 57, 87, 0.12);
  pointer-events: auto;
  outline: none;
}
.tour__card:focus-visible {
  box-shadow: 0 8px 32px rgba(6, 57, 87, 0.12), 0 0 0 3px rgba(30, 187, 184, 0.4);
}
.tour__count {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #19a9a6;
}
.tour__title {
  margin: 6px 0 6px;
  font-family: "Poppins", "Roboto", system-ui, sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  color: #063957;
}
.tour__body {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: #555555;
}
.tour__note {
  margin: 10px 0 0;
  padding: 8px 10px;
  border-radius: 8px;
  background: #f7f9fb;
  font-size: 12px;
  color: #063957;
}
.tour__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
}
.tour__skip {
  padding: 0;
  border: 0;
  background: none;
  font-family: "Roboto", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #888888;
  cursor: pointer;
}
.tour__skip:hover {
  color: #063957;
}
.tour__nav {
  display: flex;
  gap: 8px;
}

@keyframes tour-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(30, 187, 184, 0.7);
  }
  70%, 100% {
    box-shadow: 0 0 0 12px rgba(30, 187, 184, 0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .tour__spot {
    transition: none;
  }
  .tour__spot::after {
    animation: none;
  }
}
.color-popover {
  z-index: 1200;
  width: 320px;
  max-width: calc(100vw - 24px);
  padding: 14px;
  max-height: var(--radix-popover-content-available-height, calc(100vh - 24px));
}

.color-picker {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-family: "Roboto", system-ui, sans-serif;
}
.color-picker *, .color-picker *::before, .color-picker *::after {
  box-sizing: border-box;
}
.color-picker__tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  border: 1px solid #d4dce5;
  border-radius: 12px;
}
.color-picker__tabs button {
  padding: 7px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  font-family: "Roboto", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #555555;
  cursor: pointer;
}
.color-picker__tabs button.is-on {
  background: #063957;
  color: #fff;
}
.color-picker__label {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #888888;
}
.color-picker__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.color-picker__swatch, .color-picker__add {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}
.color-picker__swatch {
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}
.color-picker__swatch:hover {
  transform: scale(1.08);
}
.color-picker__swatch.is-selected, .color-picker__swatch:focus-visible {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #1ebbb8;
  outline: none;
}
.color-picker__add {
  display: flex;
  align-items: center;
  justify-content: center;
  background: conic-gradient(#f1674d, #dfe21c, #04aa83, #1ebbb8, #4f73ea, #9883bc, #ef5e8e, #f1674d);
}
.color-picker__add span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #063957;
  color: #fff;
}
.color-picker__add span svg {
  display: block;
}
.color-picker__add:focus-visible {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #1ebbb8;
  outline: none;
}
.color-picker__mine {
  position: relative;
  display: inline-flex;
}
.color-picker__mine:hover .color-picker__remove, .color-picker__mine:focus-within .color-picker__remove {
  opacity: 1;
}
.color-picker__remove {
  position: absolute;
  top: -5px;
  right: -5px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  padding: 0;
  border: 1px solid #e8ecf0;
  border-radius: 50%;
  background: #fff;
  font-size: 12px;
  line-height: 1;
  color: #555555;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.1s;
}
.color-picker__remove:hover {
  color: #f1674d;
  border-color: #f1674d;
}
@media (hover: none) {
  .color-picker__remove {
    opacity: 1;
  }
}
.color-picker__custom-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.color-picker__preview {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}
.color-picker__hex {
  flex: 1;
  min-width: 0;
}
.color-picker__hex .inspector-input {
  width: 100%;
  font-family: monospace;
  text-transform: uppercase;
}
.color-picker__contrast {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  color: #888888;
}
.color-picker__contrast.is-low {
  color: #dc5238;
}
.color-picker__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}
.color-picker__actions .inspector-link {
  padding-left: 0;
  color: #19a9a6;
  font-weight: 600;
}
.color-picker__actions .inspector-link:disabled {
  color: #888888;
  cursor: default;
}
.color-picker__nav {
  display: flex;
  gap: 8px;
  margin-left: auto;
}

.hsv-picker {
  display: flex;
  flex-direction: column;
  gap: 12px;
  touch-action: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.hsv-picker__shade {
  position: relative;
  height: 150px;
  border-radius: 10px;
  background-image: linear-gradient(to top, #000, rgba(0, 0, 0, 0)), linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
  cursor: crosshair;
  outline: none;
}
.hsv-picker__shade:focus-visible {
  box-shadow: 0 0 0 3px rgba(30, 187, 184, 0.4);
}
.hsv-picker__hue {
  position: relative;
  height: 14px;
  border-radius: 7px;
  background: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
  cursor: pointer;
  outline: none;
}
.hsv-picker__hue:focus-visible {
  box-shadow: 0 0 0 3px rgba(30, 187, 184, 0.4);
}
.hsv-picker__thumb {
  position: absolute;
  width: 16px;
  height: 16px;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25), 0 1px 3px rgba(0, 0, 0, 0.3);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.hsv-picker__thumb--hue {
  top: 50%;
  background: transparent;
}

.app-item-content > .dash,
.dash {
  display: block;
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  background: #f7f9fb;
  font-family: "Roboto", system-ui, sans-serif;
  color: #1f1f1f;
}
.app-item-content > .dash *, .app-item-content > .dash *::before, .app-item-content > .dash *::after,
.dash *,
.dash *::before,
.dash *::after {
  box-sizing: border-box;
}

.dash__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 32px 28px 48px;
}
@media (max-width: 640px) {
  .dash__inner {
    padding: 20px 16px 32px;
  }
}

.dash-loading {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  background: #f7f9fb;
}

.dash__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px 24px;
  margin-bottom: 20px;
}

.dash__title {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.dash__title h1 {
  margin: 0;
  font-family: "Poppins", "Roboto", system-ui, sans-serif;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.15;
  color: #063957;
}

.dash__eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #19a9a6;
}

.dash__head-side {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
@media (max-width: 640px) {
  .dash__head-side {
    width: 100%;
  }
  .dash__head-side .dash-meter {
    flex: 1;
  }
}

.dash-meter {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 4px 12px;
  min-width: 260px;
  padding: 12px 16px;
  border: 1px solid #e8ecf0;
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 2px 12px rgba(6, 57, 87, 0.08);
}
.dash-meter__label {
  grid-column: 1/-1;
  font-size: 12px;
  font-weight: 600;
  color: #555555;
}
.dash-meter__value {
  font-family: "Poppins", "Roboto", system-ui, sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: #063957;
}
.dash-meter__bar {
  display: block;
  height: 8px;
  border-radius: 4px;
  background: #e8ecf0;
  overflow: hidden;
}
.dash-meter__bar > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #1ebbb8;
  transition: width 0.3s ease;
}
.dash-meter__bar--mid > span {
  background: #efb91c;
}
.dash-meter__bar--high > span {
  background: #f1674d;
}
.dash-meter__note {
  grid-column: 1/-1;
  font-size: 12px;
  color: #888888;
}
@media (max-width: 640px) {
  .dash-meter {
    min-width: 0;
  }
}

.dash-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
.dash-summary__card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 18px;
  border: 1px solid #e8ecf0;
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 2px 12px rgba(6, 57, 87, 0.08);
}
.dash-summary__card strong {
  font-family: "Poppins", "Roboto", system-ui, sans-serif;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.1;
  color: #063957;
}
.dash-summary__card span {
  font-size: 13px;
  color: #555555;
}
@media (max-width: 900px) {
  .dash-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 420px) {
  .dash-summary {
    grid-template-columns: minmax(0, 1fr);
  }
}

.dash-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}

.dash-search {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 220px;
  min-width: 0;
  max-width: 340px;
  padding: 0 12px;
  border: 1px solid #d4dce5;
  border-radius: 6px;
  background: #fff;
  color: #888888;
}
.dash-search:focus-within {
  border-color: #1ebbb8;
  box-shadow: 0 0 0 3px rgba(30, 187, 184, 0.12);
}
.dash-search input {
  flex: 1;
  min-width: 0;
  height: 38px;
  border: 0;
  outline: none;
  background: transparent;
  font-family: "Roboto", system-ui, sans-serif;
  font-size: 14px;
  color: #1f1f1f;
}
@media (max-width: 640px) {
  .dash-search {
    max-width: none;
    flex-basis: 100%;
  }
}

.dash-filter {
  flex-wrap: wrap;
  max-width: 100%;
}
.dash-filter__count {
  margin-left: 4px;
  font-size: 11px;
  opacity: 0.7;
}

.dash-sort select {
  height: 40px;
  padding: 0 32px 0 12px;
  border: 1px solid #d4dce5;
  border-radius: 6px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2712%27 height=%2712%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23063957%27 stroke-width=%272.5%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M6 9l6 6 6-6%27/%3E%3C/svg%3E") no-repeat right 12px center;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  font-family: "Roboto", system-ui, sans-serif;
  font-size: 14px;
  color: #063957;
  cursor: pointer;
}
.dash-sort select:focus {
  outline: none;
  border-color: #1ebbb8;
  box-shadow: 0 0 0 3px rgba(30, 187, 184, 0.12);
}

.dash-view {
  display: inline-flex;
  gap: 2px;
  margin-left: auto;
  padding: 4px;
  border: 1px solid #e8ecf0;
  border-radius: 12px;
  background: #fff;
}
.dash-view button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #555555;
  cursor: pointer;
}
.dash-view button.is-on {
  background: #063957;
  color: #fff;
}
.dash-view button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(30, 187, 184, 0.12);
}

.dash-empty {
  margin: 40px 0;
  text-align: center;
  font-size: 15px;
  color: #555555;
}

.dash-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}
@media (max-width: 400px) {
  .dash-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.dash-card-wrap {
  min-width: 0;
}

.dash-track {
  display: contents;
}

.dash-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid #e8ecf0;
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 2px 12px rgba(6, 57, 87, 0.08);
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.dash-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 32px rgba(6, 57, 87, 0.12);
}
.dash-card.is-copying {
  pointer-events: none;
  opacity: 0.7;
}
@media (prefers-reduced-motion: reduce) {
  .dash-card {
    transition: none;
  }
  .dash-card:hover {
    transform: none;
  }
}
.dash-card__band {
  position: relative;
  display: flex;
  flex: none;
  flex-direction: column;
  justify-content: space-between;
  height: 104px;
  padding: 14px 16px 16px;
}
.dash-card__band-top {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  height: 30px;
}
.dash-card__spacer {
  flex: 1;
}
.dash-card__tag {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 600;
  opacity: 0.9;
}
.dash-card__count {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.dash-card__count strong {
  font-family: "Poppins", "Roboto", system-ui, sans-serif;
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
}
.dash-card__count span {
  font-size: 13px;
  opacity: 0.85;
}
.dash-card__copying {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.6);
}
.dash-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 6px;
  padding: 16px 16px 8px;
}
.dash-card__name {
  margin: 0;
  font-family: "Poppins", "Roboto", system-ui, sans-serif;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
  color: #063957;
  overflow-wrap: anywhere;
}
.dash-card__open {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.dash-card__open:focus-visible {
  outline: none;
  border-radius: 4px;
  box-shadow: 0 0 0 3px rgba(30, 187, 184, 0.12);
}
.dash-card__desc {
  display: -webkit-box;
  margin: 0;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 14px;
  line-height: 1.45;
  color: #555555;
}
.dash-card__foot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px 12px;
}
.dash-card__meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
  font-size: 12px;
  line-height: 1.4;
  color: #888888;
}
.dash-card__meta span:last-child {
  color: #555555;
  font-weight: 500;
}
.dash-card__actions {
  padding: 8px 10px;
  border-top: 1px solid #e8ecf0;
  cursor: default;
}

.dash-status {
  flex: none;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
}
.dash-status--live {
  background: #1ebbb8;
  color: #fff;
}
.dash-status--scheduled {
  background: #dfe21c;
  color: #063957;
}
.dash-status--draft {
  background: rgba(255, 255, 255, 0.22);
  color: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}
.dash-status--paused {
  background: #f1674d;
  color: #fff;
}
.dash-status--template {
  background: #fff;
  color: #063957;
}

.dash-link {
  position: relative;
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  color: inherit;
  cursor: pointer;
}
.dash-link:hover {
  background: rgba(255, 255, 255, 0.28);
}
.dash-link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px currentColor;
}
.dash-link__copied {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  padding: 2px 8px;
  border-radius: 6px;
  background: #063957;
  font-size: 11px;
  color: #fff;
  white-space: nowrap;
}

.dash-schedule,
.dash-translation {
  margin: 2px 0 0;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  color: #555555;
}

.dash-schedule--closed {
  color: #dc5238;
}

.dash-translation--done {
  color: #127a88;
}

.dash-translation--failed {
  color: #dc5238;
}

.dash-owner {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(6, 57, 87, 0.08);
  font-size: 12px;
  font-weight: 700;
  color: #063957;
  -o-object-fit: cover;
     object-fit: cover;
}

.dash-actions {
  display: flex;
  align-items: center;
  gap: 2px;
}

.dash-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #063957;
  cursor: pointer;
  text-decoration: none;
}
.dash-action:hover {
  background: #f7f9fb;
}
.dash-action:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(30, 187, 184, 0.12);
}
.dash-action--danger {
  color: #f1674d;
}
.dash-action[aria-disabled=true] {
  opacity: 0.35;
  cursor: not-allowed;
  background: transparent;
}

.dash-table-wrap {
  overflow-x: auto;
  border: 1px solid #e8ecf0;
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 2px 12px rgba(6, 57, 87, 0.08);
}

.dash-table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
  font-size: 14px;
}
.dash-table th {
  padding: 12px 14px;
  background: #f7f9fb;
  border-bottom: 1px solid #e8ecf0;
  text-align: left;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #555555;
  white-space: nowrap;
}
.dash-table td {
  padding: 10px 14px;
  border-bottom: 1px solid #e8ecf0;
  vertical-align: middle;
}
.dash-table tbody tr:last-child td {
  border-bottom: 0;
}

.dash-row {
  cursor: pointer;
}
.dash-row:hover {
  background: rgba(30, 187, 184, 0.04);
}
.dash-row.is-copying {
  opacity: 0.6;
  pointer-events: none;
}
.dash-row__name {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.dash-row__dot {
  flex: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
}
.dash-row__open {
  padding: 0;
  border: 0;
  background: none;
  font-family: "Roboto", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #063957;
  text-align: left;
  cursor: pointer;
}
.dash-row__open:focus-visible {
  outline: none;
  border-radius: 4px;
  box-shadow: 0 0 0 3px rgba(30, 187, 184, 0.12);
}
.dash-row__spinner {
  width: 16px;
  height: 16px;
  border-width: 2px;
}
.dash-row__num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.dash-row__muted {
  color: #555555;
  white-space: nowrap;
}
.dash-row td:last-child {
  cursor: default;
}

.dash-pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.dash-pill--live {
  background: rgba(30, 187, 184, 0.12);
  color: #127a88;
}
.dash-pill--scheduled {
  background: rgba(223, 226, 28, 0.25);
  color: #5c5e00;
}
.dash-pill--draft {
  background: #f0f2f4;
  color: #555555;
}
.dash-pill--paused {
  background: rgba(241, 103, 77, 0.12);
  color: #b23a24;
}
.dash-pill--template {
  background: rgba(6, 57, 87, 0.08);
  color: #063957;
}

.dash-welcome {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  max-width: 560px;
  margin: 48px auto;
  padding: 40px 32px;
  border: 1px solid #e8ecf0;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 2px 12px rgba(6, 57, 87, 0.08);
  text-align: center;
}
.dash-welcome__eyebrow {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #19a9a6;
}
.dash-welcome__logo {
  width: min(260px, 80%);
  height: auto;
}
.dash-welcome__text {
  margin: 8px 0 0;
  font-family: "Poppins", "Roboto", system-ui, sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
  color: #063957;
}
.dash-welcome__sub {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: #555555;
}
.dash-welcome__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 12px;
}
@media (max-width: 640px) {
  .dash-welcome {
    margin: 16px auto;
    padding: 28px 20px;
  }
}

.create-survey__custom {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 18px 20px;
  border: 2px dashed #1ebbb8;
  border-radius: 15px;
  background: rgba(30, 187, 184, 0.04);
  font-family: "Roboto", system-ui, sans-serif;
  text-align: left;
  cursor: pointer;
}
.create-survey__custom:hover {
  background: rgba(30, 187, 184, 0.08);
}
.create-survey__custom:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(30, 187, 184, 0.12);
}
.create-survey__plus {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #1ebbb8;
  color: #fff;
}
.create-survey__custom-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.create-survey__custom-text strong {
  font-family: "Poppins", "Roboto", system-ui, sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #063957;
}
.create-survey__custom-text span {
  font-size: 13px;
  color: #555555;
}
.create-survey__heading {
  margin: 24px 0 12px;
  font-family: "Poppins", "Roboto", system-ui, sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #063957;
}
.create-survey__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
.create-survey__consent {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: #555555;
}

.template-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 0;
  border: 1px solid #e8ecf0;
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
  font-family: "Roboto", system-ui, sans-serif;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.template-card:hover:not(:disabled) {
  border-color: #1ebbb8;
  box-shadow: 0 2px 12px rgba(6, 57, 87, 0.08);
}
.template-card:focus-visible {
  outline: none;
  border-color: #1ebbb8;
  box-shadow: 0 0 0 3px rgba(30, 187, 184, 0.12);
}
.template-card:disabled {
  opacity: 0.5;
  cursor: default;
}
.template-card.is-copying {
  border-color: #1ebbb8;
}
.template-card__strip {
  display: block;
  height: 8px;
}
.template-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px 14px;
}
.template-card__name {
  font-family: "Poppins", "Roboto", system-ui, sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #063957;
}
.template-card__desc {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 13px;
  line-height: 1.45;
  color: #555555;
}
.template-card__count {
  margin-top: auto;
  font-size: 12px;
  font-weight: 600;
  color: #19a9a6;
}
.template-card__spinner {
  position: absolute;
  top: 18px;
  right: 12px;
  width: 18px;
  height: 18px;
  border-width: 2px;
}

/*# sourceMappingURL=main.22307e8b.css.map*/