/*!***********************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** 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) ***!
  \***************************************************************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
.invite-container .credits, .welcome-survey-list-wrapper .queue-survey-container .new-survey-panel, .queue-survey-container .new-survey-panel, .queue-survey-container .survey-panel .panel-footer .panel-footer-meta span:first-child, .queue-survey-container .survey-panel .panel-content p, .image-container h4, .signup-form h4, .terms-and-conditions, .signup-title, .signup-container span, .name-survey input, .name-survey > a, .survey-container .new-survey-panel, .survey-container .survey-panel .panel-footer .panel-footer-meta span:first-child, .survey-container .survey-panel .panel-content p, .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, .smartform-edit-panel .edit-panel-text-input, .modal-container .configure .date-picker .picker, .modal-container .configure textarea, .modal-container .modal-survey-name, .modal-container button, .modal-container, .site-header .show-guide-button, .site-header .upgrade-button, .site-header button, h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 100;
  letter-spacing: 1px;
  text-decoration: none;
}

@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu4mxK.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "DIN";
  src: url(/fonts/DIN-Light.2f1cc2c2.eot);
  src: local("DIN Light"), local("DIN-Light"), url(/fonts/DIN-Light.2f1cc2c2.eot?#iefix) format("embedded-opentype"), url(/fonts/DIN-Light.d2e32715.woff2) format("woff2"), url(/fonts/DIN-Light.16d7b37b.woff) format("woff"), url(/fonts/DIN-Light.2beef40d.ttf) format("truetype"), url(/fonts/DIN-Light.ecf9b2ef.svg#DIN-Light) format("svg");
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: "DIN";
  src: url(/fonts/DIN-Medium.ec493efe.eot);
  src: local("DIN Medium"), local("DIN-Medium"), url(/fonts/DIN-Medium.ec493efe.eot?#iefix) format("embedded-opentype"), url(/fonts/DIN-Medium.a1f3c417.woff2) format("woff2"), url(/fonts/DIN-Medium.c7da88c9.woff) format("woff"), url(/fonts/DIN-Medium.ac50005d.ttf) format("truetype"), url(/fonts/DIN-Medium.fd3ac8c7.svg#DIN-Medium) format("svg");
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: "DIN";
  src: url(/fonts/DIN-Regular.f34ca680.eot);
  src: local("DIN-Regular"), url(/fonts/DIN-Regular.f34ca680.eot?#iefix) format("embedded-opentype"), url(/fonts/DIN-Regular.6e13a6d0.woff2) format("woff2"), url(/fonts/DIN-Regular.9ff79a16.woff) format("woff"), url(/fonts/DIN-Regular.e9146b09.ttf) format("truetype"), url(/fonts/DIN-Regular.2df0a8a5.svg#DIN-Regular) format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "icomoon";
  src: url(/fonts/icomoon.aac70640.eot);
  src: url(/fonts/icomoon.aac70640.eot?#iefix) format("embedded-opentype"), url(/fonts/icomoon.99db7dc5.ttf) format("truetype"), url(/fonts/icomoon.e3d8b371.woff) format("woff"), url(/fonts/icomoon.09a22661.svg#icomoon) format("svg");
  font-weight: normal;
  font-style: normal;
}
/* @font-face {
  font-family: "icomoon";
  src: url("../../fonts/icons/icomoon.eot");
  src: url("../../fonts/icons/icomoon.eot?#iefix") format("embedded-opentype"), 
    url("../../fonts/icons/icomoon.woff") format("woff"), 
    url("../../fonts/icons/icomoon.ttf") format("truetype"), 
    url("../../fonts/icons/icomoon.svg#icomoon") format("svg");
  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-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;
}

.account-settings-page { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  padding: 3vw 5vw;
}
.account-settings-page button {
  padding: 13px 18px;
  background-color: #063957;
  border-radius: 5px;
  color: #fff;
  border: 2px solid #063957;
  cursor: pointer;
  margin-top: 35px;
}
.account-settings-page button:hover {
  background-color: #fff;
  color: #063957;
}

.account-settings-container { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  background: #fff;
  flex-wrap: wrap;
  flex: 1;
  border-radius: 3px;
  padding: 20px;
  justify-content: space-around;
}
.account-settings-container .account-column { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  font-size: 0.7rem;
  flex-direction: column;
  border: 3px solid #f0f0f0;
  flex: 1;
  align-items: center;
  border-radius: 5px;
  padding: 2.5vw;
  margin: 20px;
  width: 100%;
  min-width: 250px;
  max-width: 400px;
}
.account-settings-container .account-column h2 {
  text-transform: uppercase;
  margin: 0;
  padding: 0;
  margin-top: 20px;
  font-weight: bolder;
  font-size: 0.8rem;
}
.account-settings-container .account-column h3 {
  text-transform: capitalize;
  margin: 10px 0;
  padding: 0;
  font-size: 1.2rem;
}
.account-settings-container .account-column .column-header { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  text-transform: uppercase;
  font-weight: 900;
  letter-spacing: 5px;
  margin-top: 0;
  text-align: center;
}
.account-settings-container .account-column .header-divider {
  align-self: center;
  width: 40%;
  height: 1px;
  background-color: #f0f0f0;
}
.account-settings-container .account-column .template-benchmark-consent-description {
  font-size: 1rem;
  text-align: center;
  margin: 15px 0;
}
.account-settings-container .account-column .template-benchmark-consent-options { /* 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;
  gap: 10px;
  font-size: 1rem;
}
.account-settings-container .account-column .template-benchmark-consent-option { /* 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;
  gap: 5px;
}
.account-settings-container .account-column .template-benchmark-consent-option input {
  width: 16px;
  height: 16px;
}
.account-settings-container .account-column .translation-languages-description {
  font-size: 1rem;
  text-align: center;
  margin: 15px 0;
}
.account-settings-container .account-column .translation-languages-list { /* 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-self: stretch;
  gap: 8px;
  font-size: 1rem;
  margin: 5px 0;
}
.account-settings-container .account-column .translation-languages-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;
  gap: 10px;
  cursor: pointer;
}
.account-settings-container .account-column .translation-languages-item input {
  width: 16px;
  height: 16px;
  cursor: pointer;
}
.account-settings-container .photo-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;
  align-items: center;
  padding-top: 10px;
  flex: 1;
  justify-content: space-between;
}
.account-settings-container .photo-container .change-photo {
  color: #063957;
  font-weight: 900;
  margin-top: 12px;
  font-size: 0.8rem;
}
.account-settings-container .photo-container .profile-image {
  width: 40%;
  margin: auto;
}
.account-settings-container .profile-details { /* 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: space-around;
  width: 100%;
  font-size: 0.1rem;
  flex: 1;
}
.account-settings-container .profile-details .form-group { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  position: relative;
  width: 100%;
}
.account-settings-container .profile-details .icon-Pencil {
  position: absolute;
  align-self: center;
  right: 0;
  font-size: 0.9rem;
}
.account-settings-container .profile-input {
  background-color: #fff;
  border: none;
  width: 100%;
  padding: 10px 0;
  color: #063957;
  border-bottom: 1px solid #063957;
  font-size: 0.9rem;
  margin: 5px 0px;
}
.account-settings-container .help-block {
  /*position: absolute;*/
  font-size: 0.8rem;
  color: #eb435d;
  right: 0;
}
.account-settings-container .saved-changes {
  font-size: 0.8rem;
  color: #063957;
  right: 0;
}
.account-settings-container .change-password-link {
  color: white;
  align-self: flex-start;
  margin-top: 20px;
  text-decoration: none;
  font-size: 0.8rem;
}

.price {
  margin: 0;
  padding: 0;
  font-weight: 700;
  font-size: 1.5rem;
}

.payment-info-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;
  width: 100%;
}

.app-item-header {
  min-height: 80px;
}

.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;
  color: #fff;
  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 .support-icon {
  height: 30px;
  cursor: pointer;
}
.site-header h2 {
  color: #063957;
  font-weight: bold;
  padding: 0;
  margin: 0;
}
.site-header button {
  background-color: white;
  border: 1px solid #063957;
  border-radius: 4px;
  color: #063957;
  font-weight: 500;
  margin-left: 10px;
  margin-right: 20px;
  padding: 8px 12px;
  box-sizing: border-box;
  height: 35px;
  font-size: 16px;
}
.site-header .upgrade-button {
  background-color: #063957;
  border: 1px solid white;
  border-radius: 4px;
  color: white;
  font-weight: 500;
  margin-left: 10px;
  margin-right: 20px;
  padding: 8px 12px;
}
.site-header .upgrade-button:hover {
  background-color: #1ebbb8;
}
.site-header button:hover {
  background-color: #063957;
  color: white;
  cursor: pointer;
}
.site-header .show-guide-button {
  color: #063957;
  background-color: #DFE21C;
  border-radius: 4px;
  border: none;
  font-weight: 500;
  border: 1px solid #DFE21C;
}
.site-header .signin-signup-button {
  display: flex;
  align-items: center;
}
.site-header .signin-signup-button div {
  color: #063957;
  font-size: 16px;
  font-weight: 500;
}
.site-header .signin-signup-button button {
  background-color: #063957;
  background-color: #DFE21C;
  border: none;
  font-weight: 500;
}
.site-header .signin-signup-button button:hover {
  color: white;
  background-color: #063957;
}

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

.feedback-flag, .site-flag-null, .site-flag { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  align-content: center;
  border: 2px solid #dfe21c;
  color: #063957;
  background-color: #dfe21c;
  font-size: 1rem;
  font-weight: 500;
}

.site-flag-container { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  flex: 1;
}
.site-flag-container a {
  text-decoration: none;
}

.site-flag-container-right { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  gap: 10px;
  align-items: center;
  justify-content: flex-end;
  position: relative;
  flex: 1;
}

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

.site-flag { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  border-left: 0;
  border-bottom-right-radius: 8px;
  border-top-right-radius: 8px;
  padding: 8px 8px 8px 0;
}
.site-flag .icon-ArrowBack {
  font-size: 1.8rem;
}
.site-flag .site-flag-text {
  align-self: center;
  padding-right: 10px;
  padding-top: 3px;
}

.site-flag-null {
  border-color: #fff;
  color: #fff;
  flex: 1;
}

.notifications-icon-container {
  width: 30px;
  height: 30px;
  color: #063957;
  cursor: pointer;
  position: relative;
}
.notifications-icon-container .unread-notification-indicator {
  position: absolute;
  top: 0;
  right: 0;
  width: 12px;
  height: 12px;
  background-color: #dfe21c;
  border-radius: 50%;
}

.notifications-dropdown {
  width: 200px;
  border: 1px solid #063957;
  border-radius: 5px;
  text-align: center;
  background-color: white;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
  z-index: 1000;
  cursor: default;
}
.notifications-dropdown .notifications-dropdown-header {
  padding: 10px;
  border-bottom: 1px solid #063957;
  font-size: 1.25rem;
}
.notifications-dropdown .notifications-dropdown-empty {
  padding: 10px;
}
.notifications-dropdown .notifications-dropdown-item {
  padding: 10px;
  cursor: pointer;
}

.feedback-flag-container { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
.feedback-flag-container a {
  text-decoration: none;
}
.feedback-flag-container {
  align-items: center;
}

.feedback-flag { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  border-right: 0;
  border-bottom-left-radius: 8px;
  border-top-left-radius: 8px;
  padding: 8px 8px 8px 0;
  cursor: pointer;
}
.feedback-flag .icon-ArrowBack {
  font-size: 1.8rem;
}
.feedback-flag .feedback-flag-text {
  align-self: center;
  padding-left: 10px;
  padding-top: 3px;
}

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

.feedback-questionare {
  padding-top: 15px;
  padding-bottom: 15px;
  text-align: center;
  align-self: center !important;
}
.feedback-questionare a {
  color: #A2CE5D;
  font-size: small;
}

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

.green-divider {
  background-color: #dfe21c;
  margin-bottom: 12px;
  margin-top: 12px;
  width: 2px;
}

.account-dropdown ul {
  display: none;
}

.header-dropdown { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  cursor: pointer;
}
.header-dropdown img {
  padding: 10px;
}
.header-dropdown span {
  align-self: center;
  color: #395c7a;
  cursor: pointer;
  margin-right: 20px;
}
.header-dropdown .upgrade-entry {
  color: #063957 !important;
}

.site-nav ul {
  display: flex;
  list-style: none;
}

.user-dropdown { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  align-items: flex-start;
  background: #fff;
  border-radius: 5px;
  color: #063957;
  flex-direction: column;
  font-weight: bolder;
  justify-content: center;
  margin-right: 2px;
  margin-top: 82px;
  position: absolute;
  right: 0;
  top: 0;
  width: 220px;
  padding: 15px;
  padding: 15px;
  z-index: 100;
  box-shadow: 10px 13px 17px 0px rgb(220, 220, 220);
}
.user-dropdown .divider {
  height: 1px;
  margin: 9px 0;
  overflow: hidden;
  background-color: #f5f5f5;
  width: 100%;
}
.user-dropdown .header-icon {
  margin-right: auto;
  padding: 10px;
}
.user-dropdown .disabled {
  color: #f5f5f5;
  cursor: not-allowed;
}
.user-dropdown .working-as {
  color: #063957;
  border-bottom: 1px solid #f5f5f5;
  width: 100%;
  align-self: center;
  cursor: default;
  font-size: 20px;
  margin-bottom: 5px;
}
.user-dropdown .user-info {
  color: #1ebbb8;
  align-self: center;
  cursor: default;
}
.user-dropdown .logout {
  align-self: center;
  cursor: pointer;
  width: 100%;
  text-align: center;
}
.user-dropdown #account-dropdown {
  margin-left: 10px;
}
.user-dropdown .dropdown-help {
  padding-top: 6px;
}
.user-dropdown .dropdown-help a {
  text-decoration: none;
  color: #063957;
}
.user-dropdown .dropdown-help .disabled {
  color: #f5f5f5;
  cursor: not-allowed;
}
.user-dropdown .switch-account-current {
  cursor: default;
  flex-direction: column;
  border-bottom: 1px solid lightgray;
  flex-direction: column;
  justify-content: center;
  margin-top: 10px;
  background-color: lightgray;
  width: 100%;
  align-self: center;
  text-align: center;
}
.user-dropdown .switch-account {
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  margin-top: 10px;
  width: 100%;
  align-self: center;
  text-align: center;
}
.user-dropdown .switch-account:hover {
  background-color: #063957;
  color: white;
}

.tour-item > div:nth-child(2) {
  display: flex;
  justify-content: end;
}
.tour-item .tour-header {
  color: #063957;
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 10px;
}
.tour-item .tour-description {
  color: #063957;
  font-weight: 500;
  font-size: 14px;
}
.tour-item .next-button {
  background-color: #1EBBB8;
  color: white;
  height: 35px;
  border-radius: 5px;
  cursor: pointer;
  padding: 0 25px;
  font-size: 16px;
}

.support-modal-content {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.support-modal-content .header {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
}
.support-modal-content .header h2 {
  font-size: 36px;
  margin: 0;
  color: #063957;
  font-weight: 700;
  display: flex;
  align-items: center;
}
.support-modal-content .header h2 span {
  cursor: pointer;
  margin-right: 10px;
}
.support-modal-content .loading {
  display: flex;
  justify-content: start;
  align-items: center;
  width: 100%;
}
.support-modal-content .loading img {
  height: 40px;
}
.support-modal-content .ticket-header, .support-modal-content .guidance-header {
  font-size: 24px;
  font-weight: 700;
  color: #063957;
  margin-top: 20px;
  margin-bottom: 15px;
}
.support-modal-content .ticket-list {
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
  max-height: 200px;
  overflow-y: auto;
}
.support-modal-content .ticket-list .ticket-item {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 35px;
  align-items: center;
  border-bottom: 1px solid #1Ebbb8;
}
.support-modal-content .ticket-list .ticket-item .ticket-date {
  width: 15%;
}
.support-modal-content .ticket-list .ticket-item .ticket-description {
  width: 60%;
}
.support-modal-content .ticket-list .ticket-item .ticket-status {
  width: 25%;
}
.support-modal-content .ticket-list .ticket-item .ticket-status.Active {
  color: #063957;
}
.support-modal-content .ticket-list .ticket-item .ticket-status.Resolved {
  color: #04aa83;
}
.support-modal-content .ticket-list .ticket-item .ticket-status.Cancelled {
  color: #ef5e8e;
}
.support-modal-content .ticket-list .ticket-item.header {
  font-weight: 700;
}
.support-modal-content .guidance-options div {
  margin: 10px 0px;
  font-size: 14px;
}
.support-modal-content .guidance-options div:hover {
  text-decoration: underline;
  cursor: pointer;
}
.support-modal-content .input {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.support-modal-content .input label {
  font-size: 14px;
  font-weight: 400;
}
.support-modal-content .input input {
  min-height: 40px;
}
.support-modal-content .input input, .support-modal-content .input textarea {
  width: 100%;
  border: 1px solid #1Ebbb8;
  border-radius: 5px;
  font-size: 16px;
  padding: 0px 10px;
  box-sizing: border-box;
  font-family: sans-serif;
}
.support-modal-content .input.title-input {
  margin-top: 30px;
}
.support-modal-content .input.description-input {
  flex: 1;
  margin-top: 20px;
  margin-bottom: 30px;
}
.support-modal-content .input.description-input textarea {
  flex: 1;
  padding-top: 10px;
}
.support-modal-content button {
  color: white;
  background-color: #1Ebbb8;
  height: 40px;
  border-radius: 5px;
  font-weight: 500;
  font-size: 16px;
  cursor: pointer;
}
.support-modal-content .submit-button {
  width: 40%;
}
.support-modal-content .new-ticket-button {
  width: 15%;
}

@media (max-width: 736px) {
  .site-header .site-flag-container {
    display: none;
  }
  .site-header .feedback-flag-container {
    display: none;
  }
  .site-header .header-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .site-header .dropdown-themes {
    display: none;
  }
  .site-header .dropdown-tour {
    display: none;
  }
  .snackbar {
    width: 80% !important;
  }
  .snackbar .snackbar-right img {
    width: 20px;
  }
}
.disabled-overlay {
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 1;
  background: gray;
  opacity: 0.5;
}

.timeline-footer { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  border-top: 2px solid #919397;
  background-color: #fff;
  flex: 1;
  justify-content: space-between;
  padding: 18px 10px 10px;
  position: relative;
}
.timeline-footer .translation-review, .timeline-footer .survey-edit, .timeline-footer .preview, .timeline-footer .finalize { /* 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: 50%;
  color: #fff;
  cursor: pointer;
  font-size: 1.5rem;
  height: 30px;
  justify-content: center;
  width: 30px;
}
.timeline-footer .finalize {
  background: #1ebbb8;
  position: absolute;
  right: 56px;
  top: -17px;
}
.timeline-footer .estimation-timer-container {
  position: absolute;
  right: 12vw;
  top: -100px;
  width: 300px;
  padding: 5px;
}
.timeline-footer .estimation-timer-container .estimation-timer { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  height: 60px;
  color: #a3cf5e;
  border-radius: 12px;
  border-radius: 12px;
  border: 2px solid #dfe21c;
  justify-content: space-around;
  border-bottom: none;
  max-width: 25vw;
}
.timeline-footer .estimation-timer-container .estimation-timer .label { /* 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;
  text-align: center;
  flex: 1;
  text-transform: uppercase;
}
.timeline-footer .estimation-timer-container .estimation-timer .timer { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  flex: 2;
  justify-content: center;
  align-items: center;
  font-size: 3rem;
  font-weight: 100;
  letter-spacing: 5px;
  text-decoration: none;
}
.timeline-footer .estimation-timer-container .estimation-timer .dashed-circle {
  border-radius: 50%;
  border: 2px dashed #a8a7a9;
  height: 40px;
  width: 40px;
}
.timeline-footer .estimation-timer-container .estimation-timer .icon { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  flex: 1;
  color: #063957;
  justify-content: center;
  align-items: center;
  font-size: 3rem;
}
.timeline-footer .preview {
  background: #1ebbb8;
  left: 0;
  margin-left: auto;
  margin-right: auto;
  position: absolute;
  right: 0;
  top: -17px;
  z-index: 1;
}
.timeline-footer .preview .icon-Eye {
  padding-left: 1px;
}
.timeline-footer .survey-edit {
  background: #1ebbb8;
  left: 56px;
  position: absolute;
  top: -17px;
}
.timeline-footer .translation-review {
  background: #1ebbb8;
  right: 0;
  position: absolute;
  top: -17px;
  cursor: pointer;
}
.timeline-footer .translation-review i {
  font-size: 1.2rem;
}

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

.timeline-thank-you-container { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  margin-left: auto;
}

.timeline-pages-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-wrap: nowrap;
  overflow: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: -ms-autohiding-scrollbar;
  width: 0;
}

.smartform-card::after {
  border-bottom: 5px solid #f5f5f5;
  bottom: -15px;
  content: " ";
  left: 5px;
  position: absolute;
  right: 5px;
  top: 5px;
  z-index: 1;
}

.timeline-icon-container { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  border: 2px solid #063957;
  border-radius: 3px;
  flex: 0 0 auto;
  height: 90px;
  justify-content: center;
  margin: 10px;
  margin-top: 12px;
  margin-bottom: 18px;
  padding: 5px;
  position: relative;
  width: 90px;
  display: flex;
  flex-direction: column;
}
.timeline-icon-container .question-number {
  display: flex;
  padding: 1px 5px 2px 3px;
  max-width: 15px;
  color: white;
  background-color: #063957;
  border-bottom-right-radius: 5px;
  position: absolute;
  top: 0;
  font-size: 9pt;
}
.timeline-icon-container img.hasGoTo {
  width: 15px;
  position: absolute;
  bottom: 0;
  right: 0;
}
.timeline-icon-container img.receivesGoTo {
  width: 15px;
  position: absolute;
  bottom: 0;
  left: 0;
}
.timeline-icon-container .contents { /* 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;
}
.timeline-icon-container .contents .add-smartform {
  font-size: 3.2rem;
}
.timeline-icon-container .contents .smartform-icon { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  align-items: flex-end;
  flex: 4;
  font-size: 3.7rem;
  padding: 5px;
}
.timeline-icon-container .contents .smartform-name {
  flex: 1;
  font-size: 0.7rem;
}
.timeline-icon-container .email-inject-page, .timeline-icon-container .copy-page, .timeline-icon-container .favorite-page, .timeline-icon-container .trash-page { /* 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: #fff;
  border: 2px solid #1ebbb8;
  border-radius: 50%;
  color: #1ebbb8;
  font-size: 0.7rem;
  height: 24px;
  justify-content: center;
  position: absolute;
  top: -14px;
  width: 24px;
  z-index: 2;
}
.timeline-icon-container .trash-page {
  font-size: 1rem;
  right: 60px;
  top: 90px;
}
.timeline-icon-container .favorite-page {
  font-size: 1.75rem;
  left: 60px;
}
.timeline-icon-container .selected {
  background-color: #dfe21c;
}
.timeline-icon-container .copy-page {
  font-size: 1rem;
  right: 60px;
}
.timeline-icon-container .email-inject-page {
  font-size: 1rem;
  left: 60px;
  top: 90px;
}
.timeline-icon-container .email-inject-page--disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.timeline-icon-container .trash-page--centered {
  left: 50%;
  transform: translateX(-50%);
  right: auto;
}

.locked.timeline-icon-container {
  opacity: 0.4;
  cursor: not-allowed;
}

.locked.timeline-icon-container:hover {
  background-color: transparent;
  color: inherit;
  cursor: not-allowed;
}

.timeline-icon-container:hover {
  background-color: #063957;
  color: #fff;
  cursor: pointer;
}
.timeline-icon-container:hover .question-number {
  color: #063957;
  background-color: #fff;
  font-weight: bold;
}

.selectable-card {
  color: #dfe21c;
  background-color: #063957;
}

.selectable-card:hover {
  cursor: pointer;
}

.active.timeline-icon-container {
  border-color: #1ebbb8;
  color: #1ebbb8;
}

.active.timeline-icon-container:hover {
  color: #fff;
  background-color: #1ebbb8;
}

.special-active.timeline-icon-container {
  border-color: #063957;
  color: #dfe21c;
}

.special-active.timeline-icon-container:hover {
  color: #fff;
  background-color: #063957;
}

.q-number.timeline-icon-container {
  padding: 0px !important;
  height: 100px !important;
  width: 100px !important;
}

.timeline-card-no-reorder {
  cursor: default;
}

@media (max-width: 1177px) {
  .timeline-thank-you-container { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
    display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
    margin-left: auto;
  }
}
.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 .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 > 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 .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;
}

@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;
  }
}
@keyframes test {
  from {
    left: -500px;
  }
  to {
    left: 0;
  }
}
.edit-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: column;
}

.smartform-workspace { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  flex: 1;
  padding-left: 5%;
}

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

.smartform-edit-panel-container {
  background-color: #fff;
  min-width: 350px;
}
.smartform-edit-panel-container .update-icon {
  cursor: pointer;
  flex: 1;
  font-size: 2.5rem;
  margin: 10px 0 0px;
  transform: rotate(-90deg);
  /* Safari */
  -webkit-transform: rotate(-90deg);
  /* Firefox */
  -moz-transform: rotate(-90deg);
  /* IE */
  -ms-transform: rotate(-90deg);
  /* Opera */
  -o-transform: rotate(-90deg);
  /* Internet Explorer */
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

.smartform-edit-panel { /* 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;
  flex-wrap: nowrap;
  position: relative;
  width: 35%;
}
.smartform-edit-panel #mobile-close-button {
  display: none;
}
.smartform-edit-panel > div { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  border: 2px solid #919397;
  border-radius: 10px 10px 10px 10px;
  flex-direction: column;
  text-transform: uppercase;
}
.smartform-edit-panel h5 {
  font-weight: bolder;
  text-align: center;
  width: auto;
  margin-bottom: 0px;
  margin-top: 0px;
}
.smartform-edit-panel .edit-panel-text-input { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  background-color: #fff;
  border: 0;
  border-bottom: 1px solid #063957;
  color: #063957;
  font-size: 0.85rem;
  font-weight: 400;
  margin: 0 50px 0px;
  padding: 15px 5px 5px 5px;
}
.smartform-edit-panel .theme-name-container {
  display: flex;
  justify-content: center;
  padding: 5px;
  border: 1px solid gray;
  border-radius: 5px;
  margin: 5px auto;
}
.smartform-edit-panel .theme-name-container .theme-name {
  font-size: 0.85rem;
}
.smartform-edit-panel .translation-mode-banner {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: #e8f5e9;
  border-radius: 4px;
  font-size: 0.72rem;
  font-weight: 700;
  color: #2e7d32;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.smartform-edit-panel .translation-mode-banner span {
  font-size: 1rem;
  line-height: 1;
}
.smartform-edit-panel .answer-input {
  border-bottom: 2px solid #919397;
  position: relative;
  padding-top: 30px;
  padding-bottom: 10px;
}
.smartform-edit-panel .answer-input .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%;
}
.smartform-edit-panel .answer-input .text-count {
  text-align: right;
  margin-right: 50px;
}
.smartform-edit-panel .answer-input .text-saving {
  width: 100%;
  display: flex;
  justify-content: center;
}
.smartform-edit-panel .answer-input .remaining-chars {
  font-size: 0.887em;
}
.smartform-edit-panel .answer-input .char-limit {
  font-size: 0.69em;
}
.smartform-edit-panel .answer-input .slash {
  font-size: 0.7886em;
}
.smartform-edit-panel .answer-input .slash:empty:before {
  content: "​";
}
.smartform-edit-panel .color-input { /* 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-bottom: 2px solid #919397;
  flex-direction: column;
  padding-top: 30px;
  padding-bottom: 10px;
  max-width: 100%;
}
.smartform-edit-panel .color-input .preset-container {
  padding-top: 30px;
}
.smartform-edit-panel .color-input .selected {
  color: #1ebbb8;
}
.smartform-edit-panel .color-input .tab-container {
  display: flex;
  width: 100%;
  font-size: 13.5px;
}
.smartform-edit-panel .color-input .tab-container > div {
  border-bottom: 2px solid #919397;
  border-radius: 3px;
  width: 50%;
  text-align: center;
  cursor: pointer;
  padding: 3px;
}
.smartform-edit-panel .color-input .tab-container .preset-tab {
  border-right: 1px solid #919397;
}
.smartform-edit-panel .color-input .tab-container .disabled.preset-tab {
  color: #666;
  cursor: default;
}
.smartform-edit-panel .color-input .tab-container .preset-tab:hover {
  color: #1ebbb8;
}
.smartform-edit-panel .color-input .tab-container .custom-tab {
  border-left: 1px solid #919397;
}
.smartform-edit-panel .color-input .tab-container .custom-tab:hover {
  color: #1ebbb8;
}
.smartform-edit-panel .color-input h5 {
  flex: 1;
}
.smartform-edit-panel .color-input .theme {
  font-weight: 100;
  letter-spacing: normal;
  margin-left: 3px;
}
.smartform-edit-panel .color-input .custom-text {
  font-weight: 100;
  letter-spacing: normal;
  margin-left: 3px;
}
.smartform-edit-panel .color-input .default-text {
  font-weight: 100;
  letter-spacing: normal;
}
.smartform-edit-panel .color-input .color-container { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  margin: -10px 0 10px;
}
.smartform-edit-panel .disabled {
  background-color: #f5f5f5;
  color: #a8a7a9;
  border-bottom-color: #a8a7a9;
  pointer-events: none;
}
.smartform-edit-panel .disabled .edit-panel-text-input {
  background-color: #f5f5f5;
  border-bottom: 1px solid #a8a7a9;
}
.smartform-edit-panel .disabled.answer-input {
  border-top-right-radius: 8px;
}
.smartform-edit-panel .disabled.image-input {
  border-bottom-right-radius: 8px;
  color: #a8a7a9;
}
.smartform-edit-panel .disabled.image-input .image-upload-options .upload-area {
  color: #a8a7a9;
  border-color: #a8a7a9;
}

.image-input { /* 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;
  flex-direction: column;
  padding-top: 30px;
  padding-bottom: 20px;
}
.image-input h5 {
  flex: 1;
}
.image-input .image-upload-options { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  width: 100%;
  flex: 1;
  justify-content: center;
  margin-top: 20px;
}
.image-input .image-upload-options .primary.upload-area {
  position: relative;
  margin: 0 1.6vw 15px;
  cursor: pointer;
  overflow: hidden;
}
.image-input .image-upload-options .primary.upload-area .image-upload-button {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  padding: 40px;
  font-size: 20px;
  width: 100%;
  height: 100%;
  opacity: 0;
  filter: alpha(opacity=0);
  cursor: pointer;
}
.image-input .image-upload-options .primary.upload-area .overlay {
  align-items: center;
  cursor: pointer;
  z-index: 10;
  margin: 0;
  padding: 0;
  font-size: 0.7rem;
  padding: 8px 16px;
  color: #063957;
  border: 2px solid #063957;
  border-radius: 6px;
}
.image-input .image-upload-options .primary.upload-area .disabled.overlay {
  color: #a8a7a9;
  border-color: #a8a7a9;
  cursor: default !important;
}
.image-input .image-upload-options .disabled.upload-area {
  color: #a8a7a9;
  border-color: #a8a7a9;
}
.image-input .image-upload-options .disabled.primary.upload-area {
  border-color: #a8a7a9;
}
.image-input .image-upload-options .clear-button { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  align-items: center;
  cursor: pointer;
  position: relative;
  font-size: 0.7rem;
  margin: 0 1.6vw 15px;
  padding: 8px 16px;
  color: #063957;
  border: 2px solid #063957;
  border-radius: 6px;
}
.image-input .image-upload-options .clear-button span {
  background-color: white;
  border-radius: 50%;
  border: 0;
  position: absolute;
  left: -15px;
  font-size: 2.3rem;
}
.image-input .image-upload-options .disabled.clear-button {
  color: #a8a7a9;
  border-color: #a8a7a9;
  cursor: default;
}

.video-input { /* 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;
  flex-direction: column;
  padding-top: 10px;
  padding-bottom: 20px;
}
.video-input h5 {
  flex: 1;
}
.video-input .video-url-options { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  width: 80%;
  flex: 1;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
  padding: 0 1.6vw;
}
.video-input .video-url-options .video-url-input {
  flex: 1;
  font-size: 0.8rem;
  padding: 8px 12px;
  border: 2px solid #063957;
  border-radius: 6px;
  margin-right: 10px;
}
.video-input .video-url-options .video-url-input:disabled {
  color: #a8a7a9;
  border-color: #a8a7a9;
  cursor: not-allowed;
}
.video-input .video-url-options .clear-button { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  align-items: center;
  cursor: pointer;
  font-size: 0.7rem;
  padding: 8px 16px;
  color: #063957;
  border: 2px solid #063957;
  border-radius: 6px;
}
.video-input .video-url-options .disabled.clear-button {
  color: #a8a7a9;
  border-color: #a8a7a9;
  cursor: default;
}

.smartform-display-panel {
  align-items: center;
  justify-content: center;
  display: grid;
  height: 80%;
  margin-right: -2%;
}
.smartform-display-panel .smartform-name {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #1ebbb8;
  position: relative;
  align-items: center;
}
.smartform-display-panel .smartform-name .icon-Welcome, .smartform-display-panel .smartform-name .icon-ThankYou {
  margin-right: 0px !important;
}
.smartform-display-panel .smartform-name > span {
  display: inline-flex;
  font-size: 2em;
  margin-right: 10px;
}
.smartform-display-panel .phone-container { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  position: relative;
}
.smartform-display-panel .phone-content {
  border-radius: 9px;
  left: 18px;
  position: absolute;
  top: 26px;
  width: 250px;
  height: 544px;
}
.smartform-display-panel img {
  height: auto;
  max-height: 600px;
  max-width: 300px;
  width: auto;
}

.smartform-edit-container { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  background-color: #f5f5f5;
  flex: 1;
  flex-wrap: wrap;
  justify-content: space-between;
}

.smartform-edit-display { /* 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;
  flex-direction: column;
  justify-content: center;
}

.smartform-edit-sidebar { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  flex: 1;
  min-width: 38%;
  max-width: 38%;
  padding-right: 2%;
}
.smartform-edit-sidebar .smartform-edit-tool-bar { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  align-items: flex-end;
  flex: 1;
  flex-direction: column;
  justify-content: center;
}

.required-question-active {
  margin: 14px 90px;
  text-align: center;
}
.required-question-active h5 {
  letter-spacing: 1.5px;
  font-size: 0.82em;
  font-weight: normal;
  display: inline;
}
.required-question-active input {
  vertical-align: bottom;
  margin-left: 20px;
  display: inline;
}

.required-question {
  border: 0px !important;
  text-transform: uppercase;
  flex: 1;
}

@media screen and (max-height: 900px) {
  .smartform-display-panel .phone-content {
    border-radius: 7px;
    left: 13.2px;
    position: absolute;
    top: 18.5px;
    width: 178px;
    height: 389px;
  }
  .smartform-display-panel img {
    height: auto;
    max-height: 830px;
    max-width: 202.86px;
    width: auto;
  }
  .smartform-edit-panel .color-input {
    padding-left: 5px;
    padding-right: 5px;
  }
  .smartform-edit-panel .color-selector .custom {
    margin: 3px;
  }
  .estimation-timer-container {
    width: 25% !important;
  }
  .estimation-timer-container .estimation-timer .timer, .estimation-timer-container .estimation-timer .icon {
    font-size: 2rem !important;
  }
  .required-question .required-question-active {
    margin: 0px 0px;
  }
}
@media (max-width: 736px) {
  .edit-container .app-item-footer {
    width: 100vw;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 19;
    background: white;
    border-top: 1px solid #e0e0e0;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    transform: translateY(calc(100% - 50px));
    transition: transform 0.3s ease-in-out;
    overscroll-behavior: contain;
  }
  .edit-container .app-item-footer .drawer-handle-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 20px;
    z-index: 1002;
    background: transparent;
    pointer-events: auto;
    cursor: pointer;
    touch-action: none;
  }
  .edit-container .app-item-footer::before {
    content: "";
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 4px;
    background: #063957;
    border-radius: 2px;
    cursor: pointer;
    z-index: 1001;
    pointer-events: auto;
  }
  .edit-container .app-item-footer::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 20px;
    background: transparent;
    cursor: pointer;
    z-index: 1000;
    pointer-events: auto;
  }
  .edit-container .app-item-footer.drawer-open {
    transform: translateY(0);
  }
  .edit-container .app-item-footer.drawer-open .timeline-footer {
    opacity: 1;
    pointer-events: auto;
  }
  .edit-container .app-item-footer.drawer-partial {
    transform: translateY(calc(100% - 50px));
  }
  .edit-container .app-item-footer.drawer-touching {
    transition: none;
  }
  .edit-container .app-item-footer:active {
    background: #f8f8f8;
  }
  .edit-container .app-item-footer.drawer-spring {
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  .edit-container .app-item-footer .timeline-footer {
    width: 100%;
    overflow-x: scroll;
    padding: 20px 0px 10px;
    max-height: 50vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    pointer-events: none;
  }
  .edit-container .app-item-footer .timeline-footer .preview, .edit-container .app-item-footer .timeline-footer .finalize, .edit-container .app-item-footer .timeline-footer .survey-edit {
    display: none;
  }
  .edit-container .app-item-footer .timeline-footer .timeline-pages-container {
    width: -moz-fit-content;
    width: fit-content;
    overflow-y: visible;
    overflow: visible;
  }
  .edit-container .smartform-workspace {
    padding-left: 0px;
    position: relative;
  }
  .edit-container .smartform-workspace::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 2000;
    display: none;
    pointer-events: none;
  }
  .edit-container .smartform-workspace:has(.smartform-edit-panel[style*="display: block"])::before, .edit-container .smartform-workspace:has(.smartform-edit-panel[style*="display: flex"])::before, .edit-container .smartform-workspace:has(.utility-panel > .ultility-panel-container, .utility-panel > .ultility-panel-container-special)::before, .edit-container .smartform-workspace:has(.utility-panel > div > .ultility-panel-container, .utility-panel > div > .ultility-panel-container-special)::before {
    display: block;
    opacity: 1;
    pointer-events: auto;
  }
  .edit-container .smartform-workspace .smartform-edit-panel {
    display: none;
    position: absolute;
    z-index: 2001;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100vw;
  }
  .edit-container .smartform-workspace .smartform-edit-panel .form-group input {
    font-size: 16px;
  }
  .edit-container .smartform-workspace .smartform-edit-panel > div {
    border-radius: 0px;
  }
  .edit-container .smartform-workspace .smartform-edit-panel #mobile-close-button {
    display: block;
    position: absolute;
    top: 2%;
    right: 5%;
    z-index: 2;
    font-size: 2rem;
  }
  .edit-container .smartform-workspace .smartform-edit-panel .required-question {
    background-color: white;
    border: 2px solid #919397;
    border-radius: 0px 0px 10px 10px;
  }
  .edit-container .smartform-workspace .smartform-edit-panel .required-question .required-question-active {
    display: flex;
  }
  .edit-container .smartform-workspace .smartform-edit-sidebar {
    flex: 0;
    min-width: 0px;
    max-width: 0px;
    padding-right: 0px;
  }
  .edit-container .smartform-workspace .smartform-edit-sidebar .smartform-edit-tool-bar {
    flex-direction: row;
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
  }
  .edit-container .smartform-workspace .smartform-edit-sidebar .utility-panel {
    position: absolute;
    z-index: 2001;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100vw;
  }
  .edit-container .smartform-workspace .smartform-edit-sidebar .utility-panel .header {
    position: relative;
  }
  .edit-container .smartform-workspace .smartform-edit-sidebar .utility-panel .header .mobile-close-button {
    display: block;
    position: absolute;
    top: 3%;
    right: 5%;
    z-index: 2;
    font-size: 2rem;
  }
  .edit-container .smartform-workspace .smartform-edit-sidebar .utility-panel .ultility-panel-container .weights .weight-container .weight-input input, .edit-container .smartform-workspace .smartform-edit-sidebar .utility-panel .ultility-panel-container-special .weights .weight-container .weight-input input {
    font-size: 16px;
  }
  .edit-container .smartform-workspace .smartform-edit-sidebar .utility-panel .ultility-panel-container .ai-panel-container #ai-chat-box, .edit-container .smartform-workspace .smartform-edit-sidebar .utility-panel .ultility-panel-container-special .ai-panel-container #ai-chat-box {
    height: 45vh;
  }
  .edit-container .smartform-workspace .smartform-edit-sidebar .utility-panel .ultility-panel-container .ai-panel-container #ai-chat-box #ai-chat-textarea, .edit-container .smartform-workspace .smartform-edit-sidebar .utility-panel .ultility-panel-container-special .ai-panel-container #ai-chat-box #ai-chat-textarea {
    font-size: 16px;
  }
  .edit-container .smartform-workspace .smartform-display-panel {
    margin-right: 0;
    height: 100%;
    align-items: flex-start;
  }
  .edit-container .smartform-workspace .smartform-display-panel .smartform-name {
    display: none;
  }
  .edit-container .smartform-workspace .smartform-display-panel .phone-container {
    margin-top: 20px;
  }
  .edit-container .smartform-workspace .smartform-display-panel .phone-container img {
    max-height: calc(100vh - 300px);
    max-width: 90vw;
  }
  .edit-container .smartform-workspace .smartform-display-panel .phone-container .phone-content {
    width: 88.3%;
    height: 94%;
    left: 6.1%;
    top: 4%;
  }
  .estimation-timer-container {
    display: none;
  }
}
@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;
  }
}
.content-wrapper { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  background-color: #f5f5f5;
  flex: 1;
  justify-content: center;
  position: relative;
  overflow-y: auto;
}

.remaining-responses { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  flex-direction: row;
  position: absolute;
  background-color: #fff;
  text-align: center;
  justify-content: center;
  top: 0;
  left: 0;
  width: 100%;
  height: -moz-fit-content;
  height: fit-content;
  background-color: #063957;
  color: white;
}
.remaining-responses span {
  padding: 5px 10px;
}

.survey-container { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  align-content: center;
  flex-wrap: wrap;
  justify-content: center;
  margin: auto;
  max-width: 1200px;
}
@media screen and (max-width: 980px) {
  .survey-container {
    flex-wrap: wrap;
  }
}
.survey-container h2 {
  background-color: #C678DD;
}
.survey-container .space-holder {
  background-color: #98C379;
  border-radius: 5px;
  height: 0;
  margin: 0;
  padding: 0;
  width: 334px;
}
.survey-container .base-panel, .survey-container .welcome-survey-list-wrapper .queue-survey-container .welcome-survey-card, .welcome-survey-list-wrapper .queue-survey-container .survey-container .welcome-survey-card, .survey-container .welcome-survey-list-wrapper .queue-survey-container .new-survey-panel, .welcome-survey-list-wrapper .queue-survey-container .survey-container .new-survey-panel, .survey-container .new-survey-panel, .survey-container .survey-panel, .survey-container .space-holder {
  margin: 10px;
}
.survey-container .editable.survey-panel {
  background-color: #fff;
  border: 2px dashed #063957;
  border-radius: 8px;
  color: #063957;
  height: 220px;
  width: 330px;
}
.survey-container .editable.survey-panel:hover {
  background-color: #f5f5f5;
  cursor: pointer;
}
.survey-container .survey-panel:hover {
  background-color: #063957;
  cursor: pointer;
}
.survey-container .survey-panel { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  background-color: #063957;
  border: 2px solid #063957;
  border-radius: 8px;
  color: #fff;
  flex-direction: column;
  position: relative;
  height: 220px;
  padding: 0px;
  width: 330px;
}
.survey-container .survey-panel span {
  cursor: pointer;
  font-size: 1.4rem;
}
.survey-container .survey-panel img {
  height: 2rem;
  margin-right: 10px;
}
.survey-container .survey-panel .global-template-header span {
  padding-top: 6px;
  font-size: 18px;
}
.survey-container .survey-panel .global-template-header {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.survey-container .survey-panel .launch-container {
  flex: 1;
}
.survey-container .survey-panel .launch-status { /* 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;
  width: 100%;
  position: absolute;
  top: -2px;
  left: -2px;
}
.survey-container .survey-panel .launch-status a {
  color: #063957;
  text-decoration: none;
  border: 2px solid;
  border-bottom-right-radius: 8px;
  border-top-left-radius: 8px;
  text-align: center;
  padding: 7px 7px;
  height: 100%;
  width: 75px;
}
.survey-container .survey-panel .launch-status span {
  font-size: 2rem;
  display: block;
}
.survey-container .survey-panel .launch-status h3 {
  font-size: 25px;
  margin: 0;
}
.survey-container .survey-panel .launch-status span.responses {
  font-size: 1rem;
  text-decoration: none;
  border-bottom: 2px solid;
  border-right: 2px solid;
  border-bottom-right-radius: 8px;
  text-align: right;
  padding: 7px 7px;
  padding-right: 8.6px;
  height: 100%;
  width: 75px;
}
.survey-container .survey-panel .launch-status span.responses > span {
  font-size: 0.5rem;
}
.survey-container .survey-panel .launch-status span.preview-text {
  font-size: 0.5rem;
}
.survey-container .survey-panel .launch-status .icon-Unlaunched,
.survey-container .survey-panel .launch-status .icon-Launched,
.survey-container .survey-panel .launch-status .icon-Inactive {
  font-size: 2.3rem;
}
.survey-container .survey-panel .panel-content { /* 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;
  font-size: 1.1rem;
  line-height: 1.85rem;
  padding: 10px 10px 0px 10px;
  max-height: 110px;
}
.survey-container .survey-panel .panel-content h3 {
  font-weight: 500;
  margin: 0;
  padding: 0;
}
.survey-container .survey-panel .panel-content p {
  font-size: 0.7rem;
  letter-spacing: 0;
  line-height: 1.35rem;
  margin: 0;
  padding: 0;
  min-height: 1.35rem;
  overflow-y: auto;
}
.survey-container .survey-panel .panel-footer { /* 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: auto;
  padding: 10px;
}
.survey-container .survey-panel .panel-footer .panel-footer-meta { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  flex: 2;
  flex-direction: column;
  line-height: 1rem;
}
.survey-container .survey-panel .panel-footer .panel-footer-meta span:first-child {
  font-size: 8px;
  font-weight: 500;
  margin: 0;
  padding: 0;
}
.survey-container .survey-panel .panel-footer .panel-footer-meta span:nth-child(2) {
  font-size: 1rem;
  margin: 0;
  padding: 0;
}
.survey-container .new-survey-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;
  background-color: #fff;
  border: 2px solid #063957;
  border-radius: 8px;
  font-weight: 500;
  height: 220px;
  justify-content: center;
  width: 330px;
}
.survey-container .new-survey-panel:hover {
  background-color: #063957;
  color: #f5f5f5;
  cursor: pointer;
}

@media (max-width: 736px) {
  .panel-footer-icons {
    opacity: 1 !important;
  }
}
.panel-footer-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: 20px;
  margin-right: 20px;
  font-size: 1.8rem;
}
.panel-footer-icons span {
  cursor: pointer;
}
.panel-footer-icons a:hover {
  transform: scale(1.3) translateZ(0);
  transition-duration: 0.2s;
  transition-timing-function: ease-in-out;
}
.panel-footer-icons span:hover {
  transform: scale(1.3) translateZ(0);
  transition-duration: 0.2s;
  transition-timing-function: ease-in-out;
}

.preview-icon {
  text-decoration: none;
}

.translation-status-header {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  opacity: 1 !important;
  margin-bottom: 3px;
}
.translation-status-header i {
  font-size: inherit;
}
.translation-status-header__spinner {
  width: 9px;
  height: 9px;
}
.translation-status-header--processing, .translation-status-header--pending {
  color: rgba(255, 255, 255, 0.85);
}
.translation-status-header--completed {
  color: rgba(255, 255, 255, 0.95);
}
.translation-status-header--failed {
  color: #ffcdd2;
}

.disabled {
  opacity: 0.5;
  cursor: default !important;
}

.copy-live-link {
  padding: 8px 6px;
  width: 21px;
  height: 21px;
}

.welcome-screen { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  flex-direction: column;
  max-width: 700px;
  margin: 0 auto;
  align-items: center;
  height: 80%;
  justify-content: center;
}
.welcome-screen .welcome-screen-header {
  font-size: 48px;
  font-weight: 700;
  margin-bottom: 5px;
}
.welcome-screen img {
  width: 100%;
  max-width: 460px;
}
.welcome-screen .welcome-screen-text {
  font-size: 24px;
  font-weight: 700;
  margin-top: 20px;
  text-align: center;
}
.welcome-screen .welcome-screen-subtext {
  font-size: 16px;
  font-weight: 500;
  margin-top: 20px;
  text-align: center;
  width: 80%;
}
.welcome-screen .welcome-screen-buttons { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  gap: 20px;
  margin-top: 30px;
  justify-content: space-between;
  width: 80%;
}
.welcome-screen .welcome-screen-buttons button {
  font-size: 24px;
  font-weight: 700;
  width: 40%;
  border: none;
  border-radius: 10px;
  height: 60px;
  cursor: pointer;
}
.welcome-screen .welcome-screen-buttons button:hover {
  background-color: #063957;
  color: #fff;
}
.welcome-screen .welcome-screen-buttons .new-theme-button {
  background-color: #DFE21C;
  color: #063957;
}
.welcome-screen .welcome-screen-buttons .new-survey-button {
  background-color: #fff;
  color: #063957;
  height: 56px;
  border: 2px solid #063957;
}

.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;
}

.signup-container { /* 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;
  flex-direction: column;
  text-align: center;
  padding-top: 100px;
  overflow-y: auto;
  margin-top: 80px;
}
.signup-container .signup-welcome {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  font-weight: 700;
}
.signup-container .signup-welcome img {
  width: 300px;
}
.signup-container .signup-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;
  padding: 0 30px 20px 30px;
  background-color: white;
  min-width: 900px;
  border-radius: 5px;
}
.signup-container .signup-frame-container .new-account-email-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.signup-container .signup-frame-container .new-account-email-container .email-input-container {
  width: 50%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.signup-container .signup-frame-container .new-account-email-container .email-input-container .error {
  height: 0px;
  color: red;
  font-size: 12px;
}
.signup-container .signup-frame-container .new-account-email-container .create-account-button {
  background-color: #1EBBB8;
  color: white;
  border-radius: 5px;
  cursor: pointer;
  width: 45%;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}
.signup-container .signup-frame-container .new-account-email-container input {
  border: 1px solid #1EBBB8;
  border-radius: 5px;
  padding: 0px 10px;
  width: 100%;
  height: 50px;
  font-size: 24px;
}
.signup-container .signup-frame-container .third-party-divider {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 30px 0px 30px 0px;
}
.signup-container .signup-frame-container .third-party-divider hr {
  width: 45%;
  border: 1px solid #1EBBB8;
  margin: 0;
}
.signup-container .signup-frame-container .third-party-buttons {
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: space-between;
}
.signup-container .signup-frame-container .third-party-authentication-button {
  display: flex;
  width: 100%;
  border: 1px solid #58585a;
  cursor: pointer;
  border-radius: 5px;
  height: 50px;
  width: 48%;
  justify-content: center;
}
.signup-container .signup-frame-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;
}
.signup-container .signup-frame-container .login-link-mobile {
  display: none;
}
.signup-container .signup-frame-container .authentication-icon {
  margin: 5px 10px 0px 0px;
}
.signup-container .signup-frame-container .authentication-label {
  font-weight: 800;
  font-size: 24px;
}
.signup-container span {
  align-self: center;
  color: black;
}
.signup-container p {
  width: 50vh;
}
.signup-container p span {
  display: block;
  line-height: 200%;
}
.signup-container p a {
  text-decoration: none;
  color: #063957;
}
.signup-container p a:hover {
  color: #063957;
}

.body-container { /* 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;
  flex-direction: row;
  flex-flow: row wrap;
  justify-content: center;
}

.signup-title {
  margin: 20px 0 40px 0;
  align-self: center;
  color: #063957;
  font-size: 24px;
  font-weight: 700;
}

.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;
  }*/
}

.pricing-page { /* 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;
}
.pricing-page .pricing-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;
  justify-content: space-around;
  flex-direction: column;
  text-align: center;
  border-radius: 16px;
  height: 20vh;
  width: 20vw;
}

.image-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: flex-start;
  min-height: 400px;
  padding: 0 30px 20px 30px;
  flex-basis: auto;
  border-radius: 5px;
}
.image-container h4 {
  font-size: 1.3rem;
  color: #063957;
  font-weight: 500;
}
.image-container img {
  width: 54vh;
}

@media (max-width: 736px) {
  .body-container {
    height: auto !important;
    align-items: center;
  }
  .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-title {
    display: none;
  }
  .signup-form {
    border-radius: 0px !important;
  }
  .image-container {
    display: none !important;
  }
  .site-header .signin-signup-button {
    display: none;
  }
  .signup-container {
    padding-top: 0px;
  }
  .signup-container .signup-frame-container {
    width: 100vw;
    min-width: 100vw;
  }
  .signup-container .signup-frame-container .new-account-email-container {
    flex-direction: column;
  }
  .signup-container .signup-frame-container .new-account-email-container input {
    box-sizing: border-box;
    margin-bottom: 10px;
    margin-top: 20px;
  }
  .signup-container .signup-frame-container .new-account-email-container .email-input-container {
    width: 80vw;
  }
  .signup-container .signup-frame-container .new-account-email-container .create-account-button {
    width: 80vw;
    margin-top: 24px;
  }
  .signup-container .signup-frame-container .third-party-divider {
    width: 80vw;
  }
  .signup-container .signup-frame-container .third-party-buttons {
    flex-direction: column;
  }
  .signup-container .signup-frame-container .third-party-buttons .third-party-authentication-button {
    width: 80vw;
    margin-bottom: 24px;
  }
  .signup-container .signup-frame-container .login-link-mobile {
    display: block;
    margin-top: 20px;
  }
  .signup-container .signup-frame-container .login-link-mobile span {
    color: #063957;
    font-weight: bold;
    text-decoration: none;
  }
}
@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;
  }
  .image-container img {
    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: 3px solid white !important;
  box-shadow: 0 0 0 2px currentColor;
}

.active-color-white {
  border: 3px solid white !important;
}

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

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

.smartform-modal-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;
}
.smartform-modal-container .tab-header {
  display: flex;
  justify-content: space-between;
}
.smartform-modal-container .tab-header > div {
  border-bottom: 1px solid gray;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  padding-bottom: 5px;
  cursor: pointer;
  padding: 10px 0px;
}
.smartform-modal-container .tab-header > div:hover {
  color: #1ebbb8;
}
.smartform-modal-container .tab-header .default-tab {
  width: 33.33%;
  justify-content: center;
  display: flex;
  border-right: 1px solid gray;
  background-color: #f5f5f5;
}
.smartform-modal-container .tab-header .favorite-tab {
  width: 33.34%;
  justify-content: center;
  display: flex;
  border-right: 1px solid gray;
  background-color: #f5f5f5;
}
.smartform-modal-container .tab-header .global-tab {
  width: 33.33%;
  justify-content: center;
  display: flex;
  background-color: #f5f5f5;
}
.smartform-modal-container .tab-header .selected {
  background-color: white;
}
.smartform-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;
  justify-content: center;
}
.smartform-modal-container .header h4 {
  color: #a8a7a9;
  font-size: 1.3rem;
  margin: 0;
  padding: 20px;
}
.smartform-modal-container .smartform-selector-container { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  background-color: #f5f5f5;
  overflow-x: show;
  width: 90vw;
}
.smartform-modal-container .smartform-selector-container .scroll-favorites {
  width: 100%;
}
.smartform-modal-container .smartform-selector-container .scroll-favorites .scrollarea {
  display: block;
}
.smartform-modal-container .smartform-selector-container .scroll-favorites .scrollarea .scrollarea-content {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-top: 2.5%;
}
.smartform-modal-container .smartform-selector-container .scroll-favorites .scrollarea .scrollarea-content .favorite-containers {
  display: flex;
  align-items: center;
}
.smartform-modal-container .smartform-selector-container .scroll-favorites .scrollarea .scrollarea-content .favorite-containers .minus-container {
  display: flex;
  width: 10%;
  font-size: xx-large;
  justify-content: center;
}
.smartform-modal-container .smartform-selector-container .scroll-favorites .scrollarea .scrollarea-content .favorite-containers .minus-container .icon-Minus:hover {
  color: #1ebbb8;
  cursor: pointer;
}
.smartform-modal-container .smartform-selector-container .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;
  min-height: 534px;
  max-height: 534px;
}
.smartform-modal-container .smartform-selector-container .scrollarea .scrollbar-container.horizontal:hover {
  background: none;
  opacity: 1 !important;
}
.smartform-modal-container .smartform-selector-container .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;
}
.smartform-modal-container .smartform-selector-container .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;
}
.smartform-modal-container .close {
  flex: 1;
}
.smartform-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;
}
.smartform-modal-container .close .icon-Close::before {
  cursor: pointer;
  flex: none;
  padding: 12px;
}

.smartform-container { /* 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;
}
.smartform-container img {
  cursor: pointer;
  height: 25rem;
  padding: 10px 25px;
}
.smartform-container div p {
  width: 100%;
  height: 100%;
  border: 1px solid gray;
  display: flex;
  align-items: center;
  text-align: center;
  margin-top: 0;
}

@media (max-width: 736px) {
  .smartform-modal-container .tab-header {
    text-align: center;
  }
  .smartform-modal-container .tab-header div {
    border: 1px solid gray;
    border-radius: 5px;
    padding: 10px 20px;
  }
  .smartform-modal-container .smartform-selector-container .scroll-favorites .favorite-containers .favorite-smartform-container {
    flex-direction: column;
  }
  .smartform-modal-container .smartform-selector-container .scroll-favorites .favorite-containers .favorite-smartform-container h2 {
    font-size: 16px;
    width: -moz-fit-content;
    width: fit-content;
  }
  .smartform-modal-container .smartform-selector-container .scrollarea {
    overflow: hidden;
  }
  .smartform-modal-container .smartform-selector-container .scrollarea .scrollarea-content:has(.smartform-container) {
    overflow: hidden;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    touch-action: pan-x;
    padding: 0 50%;
  }
  .smartform-modal-container .smartform-selector-container .scrollarea .scrollarea-content:has(.smartform-container) .smartform-container {
    scroll-snap-align: center;
  }
}
.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%;
}

.metrics-container {
  overflow-x: hidden;
  max-width: 100%;
  display: block !important;
}

.body-level-metrics .clear-filter-container {
  position: fixed;
  z-index: 10;
  margin-top: 5px;
  left: 30px;
}
.body-level-metrics .clear-filter {
  border: 2px solid #063957;
  border-radius: 6px;
  color: #fff;
  background-color: #063957;
  text-transform: uppercase;
  cursor: pointer;
  height: 32px;
  font-family: "Roboto";
  letter-spacing: 0.15em;
}
.body-level-metrics .sub-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;
  justify-content: space-between;
  margin-top: 20px;
  margin: auto;
  padding: 10px;
  font-family: Roboto;
}
.body-level-metrics .sub-header-left { /* 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;
}
.body-level-metrics .sub-header-left .refresh-icon {
  background: #063957;
  border: solid #063957 1px;
  color: #ffffff;
  max-width: 15px;
  border-radius: 5px;
  padding: 10px 10px;
  flex: 1;
  position: relative;
  cursor: pointer;
  align-self: center;
  margin-right: 20px;
}
.body-level-metrics .sub-header-left .filtering-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;
}
.body-level-metrics .sub-header-left .filtering-container .filter-buttons { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  font-family: "Roboto";
}
.body-level-metrics .sub-header-left .filtering-container .filter-buttons .edit-filter {
  border: 2px solid #063957;
  color: #fff;
  background-color: #063957;
  text-transform: uppercase;
  margin-left: 20px;
  cursor: pointer;
}
.body-level-metrics .sub-header-left .filtering-container .filter-buttons .edit-filter span {
  margin-right: 8px;
}
.body-level-metrics .sub-header-left .filtering-container .filter-buttons .disabled {
  cursor: not-allowed !important;
}
.body-level-metrics .sub-header-left .filtering-container .filter-buttons .hide {
  visibility: hidden;
}
.body-level-metrics .sub-header-left .filtering-container .filter-buttons .remove-filter {
  color: #063957;
  border: #063957 1px solid;
  background-color: #ffffff;
}
.body-level-metrics .sub-header-left .filtering-container .filter-buttons button { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  letter-spacing: 0.15em;
  border-radius: 6px;
  font-size: 0.78rem;
  padding: 8px;
  text-decoration: none;
  justify-content: center;
  align-content: center;
  cursor: pointer;
}
.body-level-metrics .sub-header-left .filtering-container .filter-buttons button img {
  align-self: center;
}
.body-level-metrics .sub-header-left .filtering-container .filter-buttons button .span {
  text-transform: uppercase;
  margin-left: 5px;
}
.body-level-metrics .sub-header-right { /* 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;
  gap: 20px;
}
.body-level-metrics .sub-header-right .disabled {
  opacity: 0.5;
  cursor: not-allowed !important;
}
.body-level-metrics .question-header .header-span {
  display: flex;
  justify-content: center;
}
.body-level-metrics .question-header .number-responses {
  display: flex;
  align-items: center;
  padding-bottom: 15px;
}
.body-level-metrics .question-header .number-responses .multiselect-badge {
  margin-left: 8px;
  padding: 2px 7px;
  font-size: 0.72em;
  font-weight: 500;
  border-radius: 10px;
  border: 1px solid #1ebbb8;
  color: #1ebbb8;
  background: rgba(30, 187, 184, 0.08);
  letter-spacing: 0.3px;
  white-space: nowrap;
}
.body-level-metrics .metrics-body .text-metrics { /* 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-start;
  align-items: stretch;
  align-content: center;
  width: 95%;
  margin: auto;
}
.body-level-metrics .metrics-body .normal-metrics { /* 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;
  align-content: center;
  flex-wrap: wrap;
  width: 80%;
  margin: auto;
}
.body-level-metrics .metrics-body .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;
}
.body-level-metrics .metrics-body .scrollarea .scrollbar-container.horizontal:hover {
  background: none;
  opacity: 1 !important;
}
.body-level-metrics .metrics-body .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;
}
.body-level-metrics .metrics-body .scrollarea .scrollbar-container.vertical:hover {
  background: none;
  opacity: 1 !important;
}
.body-level-metrics .metrics-body .scrollarea .scrollbar-container.vertical:before {
  border-left: 1px solid #063957;
  content: "";
  margin: auto 0;
  /* 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: 0;
  left: 50%;
  right: 0;
  bottom: 0;
  height: 100%;
  z-index: -1;
}
.body-level-metrics .metrics-body .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;
}
.body-level-metrics .metrics-body .qNumber {
  background: #063957;
  border-bottom-right-radius: 5px;
  border-top-left-radius: 5px;
  padding: 2px;
  color: #FFFFFF;
  display: inline-block;
  font-size: 0.78em;
  margin-right: 10px;
}
.body-level-metrics .metrics-body hr {
  width: 90%;
  color: #063957;
}
.body-level-metrics .metrics-body span {
  text-align: center;
  min-width: 25px;
}
.body-level-metrics .metrics-body span h4 {
  text-align: center;
  margin-top: 0px;
  margin-bottom: 0px;
}
.body-level-metrics .metrics-body .metrics-loading {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-width: 400px;
  margin-top: 100px;
}
.body-level-metrics .metrics-body .metrics-loading .img {
  width: 78px;
  height: 78px;
}
.body-level-metrics .metrics-body .metric-box {
  height: 100%;
  background: #ffffff;
  position: relative;
  margin: 0 15px 50px 15px;
}
.body-level-metrics .metrics-body .metric-box .NoResponse {
  padding: 15px 10px;
}
.body-level-metrics .metrics-body .metric-box .metric-box.NoResponse .metrics-inner-box .metric-chart-area, .body-level-metrics .metrics-body .metric-box .metric-box.NoResponse .metrics-inner-box .open-text-metric .open-text-chart-area, .open-text-metric .body-level-metrics .metrics-body .metric-box .metric-box.NoResponse .metrics-inner-box .open-text-chart-area {
  align-items: center;
}
.body-level-metrics .metrics-body .metric-box .multi-grid-wrapper {
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
}
.body-level-metrics .metrics-body .metric-box .checklist-wrapper {
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  overflow-y: auto;
  max-height: 70vh;
}
.body-level-metrics .metrics-body .metric-box .metrics-inner-box { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  flex-direction: column;
  height: 100%;
  min-width: 400px;
  border-radius: 10px;
  border: 2px solid #063957;
  padding: 10px;
}
.body-level-metrics .metrics-body .metric-box .metrics-inner-box .metric-chart-area, .body-level-metrics .metrics-body .metric-box .metrics-inner-box .open-text-metric .open-text-chart-area, .open-text-metric .body-level-metrics .metrics-body .metric-box .metrics-inner-box .open-text-chart-area { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  flex-direction: row;
  flex: 1;
  flex-wrap: wrap;
  padding: 10px;
  padding-right: 50px;
  padding-left: 50px;
  margin: auto;
  min-height: 250px;
}
.body-level-metrics .metrics-body .metric-box .metrics-inner-box .metric-chart-area .chart-container-hex, .body-level-metrics .metrics-body .metric-box .metrics-inner-box .open-text-metric .open-text-chart-area .chart-container-hex, .open-text-metric .body-level-metrics .metrics-body .metric-box .metrics-inner-box .open-text-chart-area .chart-container-hex {
  flex: 5 !important;
  max-width: 250px;
}
.body-level-metrics .metrics-body .metric-box .metrics-inner-box .metric-chart-area .metric-chart-container, .body-level-metrics .metrics-body .metric-box .metrics-inner-box .open-text-metric .open-text-chart-area .metric-chart-container, .open-text-metric .body-level-metrics .metrics-body .metric-box .metrics-inner-box .open-text-chart-area .metric-chart-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: 4;
}
.body-level-metrics .metrics-body .metric-box .metrics-inner-box .metric-chart-area .metric-chart-container .hex-chart, .body-level-metrics .metrics-body .metric-box .metrics-inner-box .open-text-metric .open-text-chart-area .metric-chart-container .hex-chart, .open-text-metric .body-level-metrics .metrics-body .metric-box .metrics-inner-box .open-text-chart-area .metric-chart-container .hex-chart { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  flex: 4 !important;
  max-height: 210px;
  max-width: 400px;
  margin: auto;
}
.body-level-metrics .metrics-body .metric-box .metrics-inner-box .metric-chart-area .metric-chart-container .hex-text, .body-level-metrics .metrics-body .metric-box .metrics-inner-box .open-text-metric .open-text-chart-area .metric-chart-container .hex-text, .open-text-metric .body-level-metrics .metrics-body .metric-box .metrics-inner-box .open-text-chart-area .metric-chart-container .hex-text { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  flex: 1;
}
.body-level-metrics .metrics-body .metric-box .metrics-inner-box .metric-chart-area canvas, .body-level-metrics .metrics-body .metric-box .metrics-inner-box .open-text-metric .open-text-chart-area canvas, .open-text-metric .body-level-metrics .metrics-body .metric-box .metrics-inner-box .open-text-chart-area canvas {
  margin: auto;
}
.body-level-metrics .metrics-body .metric-box .metrics-inner-box .metric-chart-area .bubble-chart, .body-level-metrics .metrics-body .metric-box .metrics-inner-box .open-text-metric .open-text-chart-area .bubble-chart, .open-text-metric .body-level-metrics .metrics-body .metric-box .metrics-inner-box .open-text-chart-area .bubble-chart { /* 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: 10px;
  position: relative;
}
.body-level-metrics .metrics-body .metric-box .metrics-inner-box .metric-chart-area .bubble-chart .bubble-inner-chart, .body-level-metrics .metrics-body .metric-box .metrics-inner-box .open-text-metric .open-text-chart-area .bubble-chart .bubble-inner-chart, .open-text-metric .body-level-metrics .metrics-body .metric-box .metrics-inner-box .open-text-chart-area .bubble-chart .bubble-inner-chart {
  position: relative;
  width: 100px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.body-level-metrics .metrics-body .metric-box .metrics-inner-box .metric-chart-area .bubble-chart .bubble-inner-text, .body-level-metrics .metrics-body .metric-box .metrics-inner-box .open-text-metric .open-text-chart-area .bubble-chart .bubble-inner-text, .open-text-metric .body-level-metrics .metrics-body .metric-box .metrics-inner-box .open-text-chart-area .bubble-chart .bubble-inner-text { /* 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;
  position: absolute;
  width: 50%;
  height: 50%;
  text-align: center;
  z-index: 0;
}
.body-level-metrics .metrics-body .metric-box .metrics-inner-box .metric-chart-area .bubble-chart .bubble-inner-text span, .body-level-metrics .metrics-body .metric-box .metrics-inner-box .open-text-metric .open-text-chart-area .bubble-chart .bubble-inner-text span, .open-text-metric .body-level-metrics .metrics-body .metric-box .metrics-inner-box .open-text-chart-area .bubble-chart .bubble-inner-text span {
  max-width: 75%;
}
.body-level-metrics .metrics-body .metric-box .metrics-inner-box .metric-chart-area .chart-row, .body-level-metrics .metrics-body .metric-box .metrics-inner-box .open-text-metric .open-text-chart-area .chart-row, .open-text-metric .body-level-metrics .metrics-body .metric-box .metrics-inner-box .open-text-chart-area .chart-row {
  display: flex;
  width: 100%;
}
.body-level-metrics .metrics-body .metric-box .metrics-inner-box .metric-chart-area .chartBox-top, .body-level-metrics .metrics-body .metric-box .metrics-inner-box .open-text-metric .open-text-chart-area .chartBox-top, .open-text-metric .body-level-metrics .metrics-body .metric-box .metrics-inner-box .open-text-chart-area .chartBox-top {
  justify-content: flex-start;
}
.body-level-metrics .metrics-body .metric-box .metrics-inner-box .metric-chart-area .chartBox-bottom, .body-level-metrics .metrics-body .metric-box .metrics-inner-box .open-text-metric .open-text-chart-area .chartBox-bottom, .open-text-metric .body-level-metrics .metrics-body .metric-box .metrics-inner-box .open-text-chart-area .chartBox-bottom {
  justify-content: flex-end;
}
.body-level-metrics .metrics-body .metric-box .metrics-inner-box .metric-chart-area .bubble-filler, .body-level-metrics .metrics-body .metric-box .metrics-inner-box .open-text-metric .open-text-chart-area .bubble-filler, .open-text-metric .body-level-metrics .metrics-body .metric-box .metrics-inner-box .open-text-chart-area .bubble-filler {
  width: 50px;
}
.body-level-metrics .metrics-body .metric-box .metrics-inner-box .options-hex {
  width: 400px !important;
}
.body-level-metrics .metrics-body .metric-box .metrics-inner-box .options-container {
  display: flex;
  flex-wrap: wrap;
  border-top: #063957 solid 2px;
  width: 100%;
  align-self: center;
}
.body-level-metrics .metrics-body .metric-box .metrics-inner-box .options-container .rating-metric-label {
  display: inline-flex;
  justify-content: center;
  cursor: pointer;
  max-height: 21px;
}
.body-level-metrics .metrics-body .metric-box .metrics-inner-box .options-container .rating-metric-overlay {
  border-radius: 25px;
  width: 21px;
  height: 25px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background-color: lightgray;
}
.body-level-metrics .metrics-body .metric-box .metrics-inner-box .options-container .option-even {
  border-right: #063957 solid 2px;
}
.body-level-metrics .metrics-body .metric-box .metrics-inner-box .options-container .option-container {
  display: flex;
  flex: 1 2 40%;
  padding: 5px 10px;
  justify-content: space-between;
}
.body-level-metrics .metrics-body .metric-box .metrics-inner-box .options-container .option-container .option-color-container { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  flex: 1;
}
.body-level-metrics .metrics-body .metric-box .metrics-inner-box .options-container .option-container .option-color-container .option-color {
  margin: auto;
  border-radius: 50%;
  width: 10px;
  min-width: 10px;
  height: 10px;
  align-self: center;
  margin-right: 10px;
}
.body-level-metrics .metrics-body .metric-box .metrics-inner-box .options-container .option-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: 2 2 100%;
  align-self: center;
  font-size: 15px;
}
.body-level-metrics .metrics-body .metric-box .metrics-inner-box .options-container .option-container .option-count {
  width: 70px;
  flex: 0 0 70px;
  text-align: right;
}

.open-text-metric {
  width: 400px;
}
.open-text-metric .open-text-entry {
  border-bottom: 2px solid #f5f5f5;
  padding: 0 10px;
  flex: 1;
}
.open-text-metric .open-text-entry:last-child {
  border: none;
}
.open-text-metric .open-text-chart-area {
  flex-direction: column;
  overflow-y: scroll;
  max-height: 275px;
  padding-right: 20px !important;
  padding-left: 20px !important;
  flex-wrap: nowrap !important;
  min-height: 275px;
}
.open-text-metric .open-text-nav {
  padding-top: 3%;
}
.open-text-metric .open-text-nav-prev {
  cursor: pointer;
  padding-right: 20%;
  padding-bottom: 0px;
}
.open-text-metric .open-text-nav-next {
  cursor: pointer;
  padding-left: 20%;
  padding-bottom: 0px;
}
.open-text-metric .open-text-translation-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding-bottom: 6px;
}
.open-text-metric .open-text-lang-badge {
  font-size: 11px;
  color: #a8a7a9;
  font-style: italic;
}
.open-text-metric .open-text-toggle-original {
  background: none;
  border: none;
  padding: 0;
  font-size: 11px;
  color: #063957;
  cursor: pointer;
  text-decoration: underline;
}
.open-text-metric .open-text-toggle-original:hover {
  opacity: 0.75;
}
.open-text-metric .open-text-original {
  width: 100%;
  margin: 4px 0 0;
  color: #a8a7a9;
  font-style: italic;
  font-size: 13px;
}

.bottom-metrics { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  flex: 1;
  width: 95%;
  margin: auto;
  margin-top: 15px;
}
.bottom-metrics .responseMapArea { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  flex: 1;
  background: #ffffff;
  border-radius: 5px;
  margin-right: 10px;
  margin-left: 10px;
}
.bottom-metrics .responseLineArea { /* 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: wrap;
  background: #ffffff;
  padding: 15px;
  border-radius: 5px;
  margin-right: 10px;
  margin-left: 10px;
}
.bottom-metrics .responseLineArea .responseLineHeader { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  flex: 1 100%;
}
.bottom-metrics .responseLineArea .responseLineHeader .responseTitle { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  flex: 1;
}
.bottom-metrics .responseLineArea .responseLineHeader .responseTitle h4 {
  text-align: center;
  margin-top: 10px;
  margin-bottom: 10px;
}
.bottom-metrics .responseLineArea .responseLineChart { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  flex: 1 100%;
}

.top-level-metrics { /* 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;
  color: #fff;
  justify-content: space-around;
}
.top-level-metrics .data-header {
  font-size: 0.7rem;
}
.top-level-metrics .data {
  font-size: 1.2rem;
}
.top-level-metrics .divider {
  background-color: #fff;
  height: 10px;
  width: 1px;
}

.data-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;
  flex-direction: column;
  margin: 5px;
  padding: 5px;
}

.export-button { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  background-color: #063957;
  border-radius: 6px;
  border: 2px solid #063957;
  color: #fff;
  font-size: 0.75rem;
  justify-content: center;
  padding: 8px;
  text-decoration: none;
  letter-spacing: 0.15em;
  align-items: center;
  gap: 5px;
}
.export-button:hover {
  background-color: #063957;
  border: 2px solid #063957;
  cursor: pointer;
}
.export-button.loading {
  padding: 5.5px 8px;
}
.export-button .fa.loading {
  font-size: 1.25rem;
  display: none;
  margin: 0;
  margin-right: 4px;
  padding-left: 2px;
}
.export-button .fa.loading.visible {
  display: inline-block;
}

.hex {
  display: flex;
  flex: 1;
  min-width: 250px !important;
}

.north {
  transform-origin: 51.09px 132.74px;
  fill: #2ba85c;
}
.north .outer {
  opacity: 0.2;
}
.north .inner {
  transform-origin: 51.09px 125px;
  opacity: 1;
}
.north .inner:hover {
  fill: rgb(48.1966824645, 188.3033175355, 103.1184834123);
}

.north-east {
  transform-origin: 51.09px 132.74px;
  transform: rotate(60deg);
  fill: #f1c02f;
}
.north-east .outer {
  opacity: 0.2;
}
.north-east .inner {
  transform-origin: 51.09px 125px;
  opacity: 1;
}
.north-east .inner:hover {
  fill: rgb(236.3891891892, 180.7013513514, 15.9108108108);
}

.south-east {
  transform-origin: 51.09px 132.74px;
  transform: rotate(120deg);
  fill: #ec566d;
}
.south-east .outer {
  opacity: 0.2;
}
.south-east .inner {
  transform-origin: 51.09px 125px;
  opacity: 1;
}
.south-east .inner:hover {
  fill: rgb(231.8765957447, 49.3234042553, 77.314893617);
}

.south {
  transform-origin: 51.09px 132.74px;
  transform: rotate(180deg);
  fill: #c576b1;
}
.south .outer {
  opacity: 0.2;
}
.south .inner {
  transform-origin: 51.09px 125px;
  opacity: 1;
}
.south .inner:hover {
  fill: rgb(184.8646153846, 89.3353846154, 160.68);
}

.north-west {
  transform-origin: 51.09px 132.74px;
  transform: rotate(-60deg);
  fill: #5696cb;
}
.north-west .outer {
  opacity: 0.2;
}
.north-west .inner {
  transform-origin: 51.09px 125px;
  opacity: 1;
}
.north-west .inner:hover {
  fill: rgb(58.4, 130.2769230769, 189.8);
}

.south-west {
  transform-origin: 51.09px 132.74px;
  transform: rotate(-120deg);
  fill: #6966ae;
}
.south-west .outer {
  opacity: 0.2;
}
.south-west .inner {
  transform-origin: 51.09px 125px;
  opacity: 1;
}
.south-west .inner:hover {
  fill: rgb(84.4307692308, 81.4153846154, 153.7846153846);
}

.option-container-hex {
  display: flex;
  flex: 1 1 33%;
  border-right: 2px solid #063957;
  padding-top: 5px;
}

.option-container-hex:nth-child(3), .option-container-hex:nth-child(6) {
  border-right: none;
}

.option-text-hex { /* 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%;
  font-size: 15px;
  display: block !important;
  width: 90px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left !important;
  padding: 2px 0;
}

.north-text-fill {
  fill: #2ba85c;
}

.north-east-text-fill {
  fill: #f1c02f;
}

.south-east-text-fill {
  fill: #ec566d;
}

.south-text-fill {
  fill: #c576b1;
}

.south-west-text-fill {
  fill: #5696cb;
}

.north-west-text-fill {
  fill: #6966ae;
}

.icon-0 {
  color: #5696cb;
}

.icon-1 {
  color: #2ba85c;
}

.icon-2 {
  color: #f1c02f;
}

.icon-3 {
  color: #6966ae;
}

.icon-4 {
  color: #c576b1;
}

.icon-5 {
  color: #ec566d;
}

.rating {
  justify-content: center;
  max-height: 250px;
  max-width: 250px;
}

.rating-area {
  transform: rotate(240deg);
  position: absolute;
  max-height: 250px;
  max-width: 250px;
  z-index: 3;
}

.rating-grey-area {
  transform: rotate(240deg);
  position: absolute;
  max-height: 250px;
  max-width: 250px;
  z-index: 2;
}

.both {
  position: absolute;
  display: flex;
  flex: 1;
  justify-content: center;
  margin: auto;
  left: 70px;
}

.legend-area { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  color: black;
  position: absolute;
  z-index: 4;
  flex-direction: column;
  width: 300px;
  height: 200px;
  padding-top: 25px;
  left: 47px;
}

.rating-metric-slider {
  width: 400px;
  margin: auto;
}

.rating-metric-slider-track {
  top: 8px;
  height: 4px;
  background: grey;
}

.rating-metric-slider-track.rating-metric-slider-track-0 {
  background: #063957;
}

.text-area { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  color: black;
  position: absolute;
  z-index: 4;
  flex-direction: column;
  width: 300px;
  height: 200px;
  padding-top: 25px;
}
.text-area .mid { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  flex: 0.45;
  justify-content: center;
  color: #cccccc;
}
.text-area .value { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  font-size: 50pt;
  font-weight: 900;
  justify-content: center;
}
.text-area .rating-text {
  font-size: 20pt;
  font-weight: 900;
  text-align: center;
}
.text-area .min-max { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  flex: 0.5;
  flex-direction: row;
}
.text-area .min-max .min { /* 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: 1;
  color: #cccccc;
}
.text-area .min-max .filler { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  flex: 8;
}
.text-area .min-max .max { /* 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;
  color: #cccccc;
}

.ReactTable .-loading > div {
  color: #063957 !important;
  font-family: "Roboto";
  font-size: 1rem !important;
}

.ReactTable .rt-noData {
  color: #063957 !important;
}

.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;
  }
}
.add-user-container { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  background: #fff;
  flex-wrap: wrap;
  flex: 1;
  padding: 20px;
  justify-content: space-around;
}

.create-user-container {
  justify-content: center;
  margin-top: auto;
  min-width: 50vw;
  min-height: 75vh;
}

.account-name-field {
  background-color: #f5f5f5 !important;
}

.go-back-div {
  position: absolute;
  margin-top: 3vh;
  margin-left: 3vh;
}

.go-back-button {
  background-color: #063957;
  border-bottom: 1px solid #adadad;
  color: white;
  font-size: 16px;
  border-radius: 5px;
  min-height: 5vh;
  min-width: 6.5vw;
}

.go-back-button:hover {
  background-color: #1ebbb8;
}

.account-users-container { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  display: block !important;
  background: #fff;
  width: 100%;
}

.users-table-container {
  margin-top: 5vh;
  min-width: 75vw;
  margin-left: 12.5%;
  margin-right: 12.5%;
}

.add-user-div {
  display: flex;
  justify-content: center;
  margin-top: 5vh;
}

.add-user-button {
  cursor: pointer;
  min-height: 5vh;
  min-width: 10vw;
  height: max(5vh, 45px);
  font-size: 18px;
  font-weight: 300;
  color: white;
  border: 1px solid #adadad;
  border-radius: 5px;
  background-color: #063957;
}

.add-user-button:hover {
  background-color: #1ebbb8;
  border: 1px solid #1ebbb8;
}

.user-row-container {
  min-height: 8vh;
  height: max(8vh, 45px);
  border-radius: 5px;
  background-color: #F8F8F8;
  border-bottom: 1px solid #adadad;
  display: flex;
  align-items: center;
  padding-left: 2vw;
}

.user-row {
  display: inline-flex;
  min-width: 50%;
  max-width: 50%;
}

.inner-user-row {
  display: inline-block;
  color: #1c5b7e;
  line-height: 3vh;
  justify-content: center;
}

.name-container {
  color: #1ebbb8;
}

.invite-status-container {
  color: #063957;
  display: inline-block;
  min-width: 30%;
  max-width: 30%;
}

.resend-invite-button {
  margin-right: 1vw;
  font-size: 16px;
  background-color: #063957;
  min-height: 3vh;
  color: white;
  border-radius: 5px;
}

.resend-invite-button:hover {
  background-color: #1ebbb8;
}

.user-loading {
  display: flex;
  align-items: center;
  margin: auto;
  max-height: 3vh;
  max-width: 3vh;
}

@media (max-width: 736px) {
  .users-table-container {
    margin-left: 2.5%;
    margin-right: 2.5%;
  }
}
.queue-content-wrapper { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  display: block !important;
  background-color: #f5f5f5;
  width: 100%;
  max-width: 1200px;
  position: relative;
  overflow-y: auto;
  margin: 0 auto;
  scrollbar-width: none;
}

h1 {
  font-weight: bold;
}

.preview-checkbox {
  cursor: default;
}

.distribute-wrapper {
  display: flex;
  justify-content: center;
}
.distribute-wrapper span {
  margin-right: 10px;
}

.queue-surveys-options {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 30%;
}
.queue-surveys-options span {
  font-size: 14px;
}
.queue-surveys-options div {
  width: 100%;
  display: flex;
  white-space: nowrap;
  align-items: center;
}
.queue-surveys-options input {
  background-color: #F8F8F8;
  font-size: 14px;
  font-weight: bold;
  border-radius: 5px;
  border: none;
  padding: 5px 10px;
  margin-left: 10px;
  width: 100%;
}

.welcome-survey-header {
  display: flex;
  align-items: center;
  width: 100%;
}
.welcome-survey-header div {
  cursor: pointer;
}

.custom-label {
  font-size: 24px;
  font-weight: bold;
  margin-right: 2vw;
}

.welcome-survey-settings {
  display: flex;
  width: 100%;
  justify-content: space-between;
  height: 12vh;
}

.custom-url-wrapper {
  justify-content: space-between;
  width: 60%;
  display: flex;
  flex-direction: column;
}
.custom-url-wrapper .custom-url {
  height: 40px;
  background-color: #F8F8F8;
  font-size: 16px;
  font-weight: bold;
  align-items: center;
  justify-content: space-between;
  display: flex;
  border-radius: 5px;
  padding-left: 15px;
  padding-right: 15px;
}
.custom-url-wrapper .custom-url .custom-url-text {
  max-width: calc(100% - 45px);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.custom-url-wrapper .custom-url .icon-Duplicate {
  font-size: 25px;
  margin-left: 20px;
}
.custom-url-wrapper .custom-url .icon-Duplicate:hover {
  color: #1ebbb8;
  cursor: pointer;
}
.custom-url-wrapper .custom-url .icon-Check {
  font-size: 25px;
  margin-left: 20px;
  color: #063957;
}
.custom-url-wrapper .custom-url .copy-button {
  top: 8vh;
  position: absolute;
  display: flex;
  height: 50px;
  min-width: 100px;
  background-color: #063957;
  color: white;
  font-size: 15px;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
  cursor: pointer;
}
.custom-url-wrapper .checkboxes {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
}

.queue-survey-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 334px));
  grid-gap: 20px;
  -moz-column-gap: 99px;
       column-gap: 99px;
  align-content: center;
  flex-wrap: wrap;
  margin: auto;
  max-width: 1400px;
  margin-top: 20px;
}
@media screen and (max-width: 980px) {
  .queue-survey-container {
    flex-wrap: wrap;
  }
}
.queue-survey-container h2 {
  background-color: #C678DD;
}
.queue-survey-container .space-holder {
  background-color: #98C379;
  border-radius: 5px;
  height: 0;
  margin: 0;
  padding: 0;
  width: 334px;
}
.queue-survey-container .base-panel, .welcome-survey-list-wrapper .queue-survey-container .welcome-survey-card, .welcome-survey-list-wrapper .queue-survey-container .new-survey-panel, .queue-survey-container .new-survey-panel, .queue-survey-container .survey-panel, .queue-survey-container .space-holder {
  margin: 0;
}
.queue-survey-container .editable.survey-panel {
  background-color: #fff;
  border: 2px dashed #063957;
  border-radius: 8px;
  color: #063957;
  height: 220px;
  width: 330px;
}
.queue-survey-container .editable.survey-panel:hover {
  background-color: #f5f5f5;
  cursor: pointer;
}
.queue-survey-container .survey-panel:hover {
  background-color: #063957;
  cursor: pointer;
}
.queue-survey-container .survey-panel { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  background-color: #063957;
  border: 2px solid #063957;
  border-radius: 8px;
  color: #fff;
  flex-direction: column;
  position: relative;
  height: 220px;
  padding: 0px;
  width: 330px;
}
.queue-survey-container .survey-panel span {
  cursor: pointer;
  font-size: 1.4rem;
}
.queue-survey-container .survey-panel img {
  height: 2rem;
  margin-right: 10px;
}
.queue-survey-container .survey-panel .launch-container {
  flex: 1;
}
.queue-survey-container .survey-panel .launch-status { /* 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;
  width: 100%;
  position: absolute;
  top: -2px;
  left: -2px;
}
.queue-survey-container .survey-panel .launch-status a {
  color: #063957;
  text-decoration: none;
  border: 2px solid;
  border-bottom-right-radius: 8px;
  border-top-left-radius: 8px;
  text-align: center;
  padding: 7px 7px;
  height: 100%;
  width: 75px;
}
.queue-survey-container .survey-panel .launch-status span {
  font-size: 2rem;
  display: block;
}
.queue-survey-container .survey-panel .launch-status h3 {
  font-size: 25px;
  margin: 0;
}
.queue-survey-container .survey-panel .launch-status span.responses {
  font-size: 1rem;
  text-decoration: none;
  border-bottom: 2px solid;
  border-right: 2px solid;
  border-bottom-right-radius: 8px;
  text-align: right;
  padding: 7px 7px;
  padding-right: 8.6px;
  height: 100%;
  width: 75px;
}
.queue-survey-container .survey-panel .launch-status span.responses > span {
  font-size: 0.5rem;
}
.queue-survey-container .survey-panel .launch-status span.preview-text {
  font-size: 0.5rem;
}
.queue-survey-container .survey-panel .launch-status .icon-Unlaunched,
.queue-survey-container .survey-panel .launch-status .icon-Launched,
.queue-survey-container .survey-panel .launch-status .icon-Inactive {
  font-size: 2.3rem;
}
.queue-survey-container .survey-panel .panel-content { /* 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;
  font-size: 1.1rem;
  line-height: 1.85rem;
  padding: 10px 10px 0px 10px;
  max-height: 110px;
}
.queue-survey-container .survey-panel .panel-content h3 {
  font-weight: 500;
  margin: 0;
  padding: 0;
}
.queue-survey-container .survey-panel .panel-content p {
  font-size: 0.7rem;
  letter-spacing: 0;
  line-height: 1.35rem;
  margin: 0;
  padding: 0;
  min-height: 1.35rem;
  overflow-y: auto;
}
.queue-survey-container .survey-panel .panel-footer { /* 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: auto;
  padding: 10px;
}
.queue-survey-container .survey-panel .panel-footer .panel-footer-meta { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  flex: 2;
  flex-direction: column;
  line-height: 1rem;
}
.queue-survey-container .survey-panel .panel-footer .panel-footer-meta span:first-child {
  font-size: 8px;
  font-weight: 500;
  margin: 0;
  padding: 0;
}
.queue-survey-container .survey-panel .panel-footer .panel-footer-meta span:nth-child(2) {
  font-size: 1rem;
  margin: 0;
  padding: 0;
}
.queue-survey-container .new-survey-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;
  background-color: #fff;
  border: 2px solid #063957;
  border-radius: 8px;
  font-weight: 500;
  height: 220px;
  justify-content: center;
  width: 330px;
}
.queue-survey-container .new-survey-panel:hover {
  background-color: #063957;
  color: #f5f5f5;
  cursor: pointer;
}

.welcome-survey-list-wrapper { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  display: block !important;
  background-color: #f5f5f5;
  width: 100%;
  position: relative;
  overflow-y: auto;
}
@media screen and (max-width: 980px) {
  .welcome-survey-list-wrapper {
    flex-wrap: wrap;
  }
}
.welcome-survey-list-wrapper .welcome-survey-list-header {
  text-align: center;
  font-weight: bold;
}
.welcome-survey-list-wrapper .queue-survey-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 324px));
  grid-gap: 30px;
  justify-content: center;
  align-items: center;
}
.welcome-survey-list-wrapper .queue-survey-container .new-survey-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;
  background-color: #fff;
  border: 2px solid #063957;
  border-radius: 8px;
  font-weight: 500;
  height: 140px;
  justify-content: center;
  width: 300px;
}
.welcome-survey-list-wrapper .queue-survey-container .new-survey-panel:hover {
  background-color: #063957;
  color: #f5f5f5;
  cursor: pointer;
}
.welcome-survey-list-wrapper .queue-survey-container .welcome-survey-card { /* OLD - Firefox 19- (buggy but mostly works) */ /* TWEENER - IE 10 */ /* NEW - Chrome */
  display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
  background-color: #fff;
  border-radius: 8px;
  height: 140px;
  width: 300px;
  border: 2px solid #063957;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  position: relative;
  padding: 10px;
}
.welcome-survey-list-wrapper .queue-survey-container .welcome-survey-card.bookmarked {
  background-color: #063957;
}
.welcome-survey-list-wrapper .queue-survey-container .welcome-survey-card.bookmarked .welcome-survey-card-header {
  color: #dfe21c;
}
.welcome-survey-list-wrapper .queue-survey-container .welcome-survey-card.bookmarked .survey-count, .welcome-survey-list-wrapper .queue-survey-container .welcome-survey-card.bookmarked .updated-on {
  color: white;
}
.welcome-survey-list-wrapper .queue-survey-container .welcome-survey-card .welcome-survey-card-header {
  color: #063957;
  font-size: 24px;
  font-weight: bold;
  height: 60px;
  width: 80%;
}
.welcome-survey-list-wrapper .queue-survey-container .welcome-survey-card .welcome-survey-card-header div {
  overflow: hidden;
  text-overflow: ellipsis;
  height: 100%;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  word-wrap: break-word;
}
.welcome-survey-list-wrapper .queue-survey-container .welcome-survey-card .survey-count {
  font-size: 14px;
  color: #063957;
  margin-top: 5px;
  margin-bottom: 5px;
}
.welcome-survey-list-wrapper .queue-survey-container .welcome-survey-card .updated-on {
  font-size: 10px;
  color: #063957;
}
.welcome-survey-list-wrapper .queue-survey-container .welcome-survey-card .welcome-survey-icons {
  position: absolute;
  right: 10px;
  bottom: 10px;
  display: flex;
}
.welcome-survey-list-wrapper .queue-survey-container .welcome-survey-card .welcome-survey-icons img {
  height: 18px;
}
.welcome-survey-list-wrapper .queue-survey-container .welcome-survey-card .welcome-survey-icons .icon-bookmark {
  margin-right: 5px;
}
.welcome-survey-list-wrapper .queue-survey-container .welcome-survey-card .welcome-survey-icons .tooltip {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  background-color: #333;
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
  z-index: 1000;
  margin-top: 4px;
}
.welcome-survey-list-wrapper .queue-survey-container .welcome-survey-card .large-bookmark {
  position: absolute;
  top: -2px;
  right: 15px;
  height: 40px;
}
.welcome-survey-list-wrapper .queue-survey-container .welcome-survey-card .panel-footer-icons {
  display: none;
}
.welcome-survey-list-wrapper .queue-survey-container .welcome-survey-card:hover .panel-footer-icons {
  display: flex;
  position: absolute;
  top: 100%;
  width: 100%;
  justify-content: center;
  left: 0;
  margin: 0;
}

@media (max-width: 736px) {
  .queue-content-wrapper h1 {
    text-align: center;
  }
  .queue-content-wrapper .welcome-survey-settings {
    flex-direction: column;
    height: -moz-fit-content;
    height: fit-content;
    justify-content: center;
  }
  .queue-content-wrapper .custom-url-wrapper {
    margin-bottom: 20px;
    width: 100%;
    box-sizing: border-box;
    padding: 0px 10px;
  }
  .queue-content-wrapper .custom-url-wrapper .custom-url {
    margin-bottom: 5px;
  }
  .queue-content-wrapper .custom-url-wrapper .checkboxes {
    flex-direction: column;
    align-items: baseline;
    padding-left: 25%;
  }
  .queue-content-wrapper .queue-surveys-options {
    width: 100%;
    box-sizing: border-box;
    padding: 0px 10px;
  }
  .queue-content-wrapper .queue-surveys-options .name-input input {
    font-size: 16px;
  }
  .queue-content-wrapper .queue-surveys-options .name-input {
    margin-bottom: 5px;
  }
  .queue-content-wrapper .queue-surveys-options .master-redirect-url input {
    font-size: 16px;
  }
  .queue-content-wrapper .queue-survey-container {
    justify-content: center;
  }
  .welcome-survey-list-wrapper .queue-survey-container .new-survey-panel {
    width: 100%;
    box-sizing: border-box;
  }
  .welcome-survey-list-wrapper .queue-survey-container .welcome-survey-card {
    width: 100%;
  }
  .welcome-survey-list-wrapper .queue-survey-container .welcome-survey-card .panel-footer-icons {
    display: flex;
    position: absolute;
    top: 100%;
    width: 100%;
    justify-content: center;
    left: 0;
    margin: 0;
  }
}
.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;
}

.microsoft-ids-container {
  display: grid;
  justify-content: center;
  align-items: center;
  background-color: white;
  border: 2px solid #063957;
  border-radius: 5px;
  margin-top: 15px;
  margin-left: 10%;
  height: 20vh;
  width: 80vw;
}
.microsoft-ids-container > span {
  display: flex;
  justify-content: center;
  font-size: large;
}
.microsoft-ids-container > input {
  width: 64vw;
  height: 25px;
}

.integrations-button-container {
  display: flex;
  width: 100%;
  justify-content: center;
  height: 5vh;
  margin-top: 3vh;
}
.integrations-button-container > button {
  height: 100%;
  background-color: #063957;
  color: white;
  border-radius: 10px;
  min-width: 80px;
  width: 5vw;
}
.integrations-button-container > button:hover {
  cursor: pointer;
  background-color: #1ebbb8;
}

.theme-editor {
  display: flex;
}
.theme-editor .theme-select {
  width: 20%;
  background-color: rgba(245, 245, 245, 0.8);
  background-image: linear-gradient(to bottom, rgba(216, 223, 225, 0.4), #FFFFFF);
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  height: 100%;
}
.theme-editor .theme-select .theme-list {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  scrollbar-width: none;
}
.theme-editor .theme-select .theme-select-item {
  height: 110px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #BEBEC0;
  justify-content: space-evenly;
  cursor: pointer;
  width: 100%;
}
.theme-editor .theme-select .name-and-colors {
  height: 50px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 70%;
}
.theme-editor .theme-select .name-and-colors .name {
  font-size: 16px;
  color: #063957;
  font-weight: 500;
}
.theme-editor .theme-select .name-and-colors .colors {
  display: flex;
}
.theme-editor .theme-select .name-and-colors .colors .color {
  height: 15px;
  width: 15px;
  border-radius: 50%;
  margin-right: 3px;
}
.theme-editor .theme-select .watermark {
  height: 50px;
  width: 50px;
  border-radius: 5px;
  justify-content: center;
  display: flex;
  align-items: center;
}
.theme-editor .theme-select .watermark img {
  height: 80%;
  width: 80%;
  margin: auto;
}
.theme-editor .theme-select .theme-select-bottom {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 200px;
  display: flex;
  justify-content: center;
  background-color: rgba(245, 245, 245, 0.5333333333);
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.4), rgb(255, 255, 255));
}
.theme-editor .theme-select .theme-select-bottom .new-theme-button {
  background-color: #DFE21C;
  color: #063957;
  border-radius: 5px;
  cursor: pointer;
  height: 60px;
  width: 80%;
  margin-top: 20px;
  position: absolute;
  bottom: 40px;
  font-size: 24px;
  font-weight: 700;
}
.theme-editor .theme-settings {
  width: 85%;
  display: flex;
}
.theme-editor .theme-settings h2 {
  font-weight: 700;
}
.theme-editor .theme-settings .theme-preview {
  display: flex;
  flex-direction: column;
  width: 30%;
  min-width: 360px;
  margin-left: 75px;
}
.theme-editor .theme-settings .theme-preview .theme-name-input {
  display: flex;
  align-items: center;
  height: 100px;
  background-color: white;
}
.theme-editor .theme-settings .theme-preview .theme-name-input input {
  color: #063957;
  font-size: 36px;
  font-weight: 700;
  text-align: left;
  border: none;
  field-sizing: content;
}
.theme-editor .theme-settings .theme-preview .theme-name-input input.editing-name {
  border-bottom: 1px solid #063957;
}
.theme-editor .theme-settings .theme-preview .theme-name-input img {
  height: 30px;
  cursor: pointer;
  margin-left: 10px;
}
.theme-editor .theme-settings .colors-and-watermark {
  display: flex;
  flex-direction: column;
  width: 100%;
  flex-direction: column;
  width: 40%;
  margin-top: 100px;
  margin-left: 5%;
}
.theme-editor .theme-settings .colors-and-watermark .color-picker-container {
  justify-content: left;
  display: flex;
  flex-direction: column;
  height: -moz-fit-content;
  height: fit-content;
}
.theme-editor .theme-settings .colors-and-watermark .color-picker-container div {
  font-weight: 500;
}
.theme-editor .theme-settings .colors-and-watermark .color-picker-container .color-selector {
  justify-content: left;
}
.theme-editor .theme-settings .colors-and-watermark .color-picker-container .color-selector .custom-modal, .theme-editor .theme-settings .colors-and-watermark .color-picker-container .color-selector .custom {
  width: 40px;
  height: 40px;
  margin-left: 5px;
  margin-right: 5px;
}
.theme-editor .theme-settings .colors-and-watermark .color-picker-container .color-selector .custom-modal.active-color-other, .theme-editor .theme-settings .colors-and-watermark .color-picker-container .color-selector .custom.active-color-other {
  margin: 10px 5px;
}
.theme-editor .theme-settings .colors-and-watermark .color-picker-container .color-selector .custom-modal span, .theme-editor .theme-settings .colors-and-watermark .color-picker-container .color-selector .custom span {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: static !important;
  font-size: 24px;
}
.theme-editor .theme-settings .colors-and-watermark .color-picker-container .color-selector .active-color-other {
  margin: 10px 0;
}
.theme-editor .theme-settings .colors-and-watermark .image-input {
  justify-content: left;
  align-items: baseline;
  width: 70%;
  flex: 0;
}
.theme-editor .theme-settings .colors-and-watermark .image-input .image-upload-options {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 20px;
}
.theme-editor .theme-settings .colors-and-watermark .image-input .watermark-preview {
  height: 110px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.theme-editor .theme-settings .colors-and-watermark .image-input .watermark-preview.upload {
  border: 1px dashed #063957;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.theme-editor .theme-settings .colors-and-watermark .image-input .watermark-preview.upload img {
  height: 40px;
  margin-top: 12px;
  pointer-events: none;
}
.theme-editor .theme-settings .colors-and-watermark .image-input .watermark-preview.upload .drag-drop-text {
  color: #1ebbb8;
  display: flex;
  font-size: 16px;
  font-weight: 500;
  white-space: pre;
  border: none !important;
}
.theme-editor .theme-settings .colors-and-watermark .image-input .watermark-preview.upload .drag-drop-text span {
  color: #063957;
  text-decoration: underline;
  cursor: pointer;
  border: none !important;
}
.theme-editor .theme-settings .colors-and-watermark .image-input .watermark-preview.upload .upload-info-text {
  font-size: 10px;
  color: #063957;
  text-align: center;
  margin: 5px 10px;
  pointer-events: none;
}
.theme-editor .theme-settings .colors-and-watermark .image-input .watermark-preview img {
  height: 75px;
}
.theme-editor .theme-settings .colors-and-watermark .image-input button {
  background-color: white;
  color: #063957;
  height: 40px;
  width: 40%;
  cursor: pointer;
  border: 1px solid #063957;
  border-radius: 5px;
}
.theme-editor .theme-settings .colors-and-watermark .image-input button.upload-wide {
  width: 100%;
}
.theme-editor .theme-settings .colors-and-watermark .save-and-delete {
  width: 100%;
  display: flex;
  align-items: center;
  margin-top: 50px;
}
.theme-editor .theme-settings .colors-and-watermark .save-and-delete .save-button {
  background-color: #063957;
  color: white;
  height: 60px;
  width: 70%;
  cursor: pointer;
  border-radius: 10px;
  padding: 0;
  font-size: 24px;
  font-weight: 700;
}
.theme-editor .theme-settings .colors-and-watermark .save-and-delete .delete-button {
  background-color: white;
  color: red;
  width: 25%;
  cursor: pointer;
  border-radius: 10px;
  border: 1px solid red;
  margin-left: 15px;
  font-size: 24px;
  font-weight: 700;
  height: 60px;
}

.congratulations-modal-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 5%;
  text-align: center;
}
.congratulations-modal-content button {
  width: 100%;
  height: 60px;
  font-size: 24px;
  font-weight: 700;
  margin-top: 40px;
  color: #063957;
  background-color: white;
  border-radius: 10px;
  border: 2px solid #063957;
  cursor: pointer;
}

.email-injector {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  color: #063957;
  height: 90vh;
  max-height: 780px;
  border-radius: 12px;
  overflow: hidden;
}
.email-injector__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 20px 24px 16px;
  border-bottom: 1px solid #dde3e8;
  flex-shrink: 0;
  background: #ffffff;
}
.email-injector__title {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 4px;
  color: #063957;
}
.email-injector__subtitle {
  font-size: 13px;
  color: #5a7890;
  margin: 0;
  max-width: 520px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.email-injector__close {
  background: none;
  border: none;
  color: #a0b0bc;
  font-size: 18px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  line-height: 1;
}
.email-injector__close:hover {
  color: #063957;
  background: rgba(6, 57, 87, 0.06);
}
.email-injector__body {
  display: flex;
  flex: 1;
  overflow: hidden;
}
.email-injector__left {
  width: 220px;
  flex-shrink: 0;
  padding: 20px;
  border-right: 1px solid #dde3e8;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  background: #f5f5f5;
}
.email-injector__right {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #ffffff;
}
.email-injector__section-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #1ebbb8;
  margin-bottom: 10px;
}
.email-injector__style-picker {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.email-injector__style-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 8px;
  background: #ffffff;
  border: 1px solid #dde3e8;
  border-radius: 8px;
  color: #5a7890;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.12s;
}
.email-injector__style-btn:hover {
  border-color: #063957;
  color: #063957;
}
.email-injector__style-btn--active {
  background: #063957;
  border-color: #063957;
  color: #ffffff;
}
.email-injector__style-btn--active:hover {
  color: #ffffff;
}
.email-injector__style-icon {
  font-size: 18px;
}
.email-injector__preview-frame {
  overflow: hidden;
  background: #f0f0f0;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 200px;
}
.email-injector__export-section {
  flex-shrink: 0;
  border-top: 1px solid #dde3e8;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #ffffff;
}
.email-injector__tabs {
  display: flex;
  border-bottom: 1px solid #dde3e8;
  padding: 0 16px;
  flex-shrink: 0;
}
.email-injector__tab {
  padding: 10px 14px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: #5a7890;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.12s;
}
.email-injector__tab:hover {
  color: #063957;
}
.email-injector__tab--active {
  color: #063957;
  font-weight: 600;
  border-bottom-color: #1ebbb8;
}
.email-injector__tab-content {
  overflow-y: auto;
  padding: 12px 16px;
}
.email-injector__export-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.email-injector__tile-preview {
  max-width: 420px;
  max-height: 280px;
  overflow-y: auto;
  border-radius: 10px;
}
.email-injector__tile-preview img {
  display: block;
  width: 100%;
}
.email-injector__hint {
  font-size: 12px;
  color: #5a7890;
  margin: 0;
}
.email-injector__hint--warning {
  color: #a06000;
  background: #fff8e1;
  border: 1px solid #ffe082;
  border-radius: 6px;
  padding: 8px 10px;
}
.email-injector__code {
  background: #f5f5f5;
  border: 1px solid #dde3e8;
  border-radius: 6px;
  padding: 10px 12px;
  font-size: 11px;
  font-family: "Courier New", monospace;
  color: #5a7890;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-all;
  max-height: 100px;
}
.email-injector__loading {
  color: #a0b0bc;
  font-size: 13px;
  padding: 24px 0;
  text-align: center;
}
.email-injector__actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  flex-shrink: 0;
}
.email-injector__btn {
  padding: 8px 18px;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.12s;
}
.email-injector__btn--primary {
  background: #063957;
  color: #ffffff;
  font-weight: 600;
  border-color: #063957;
}
.email-injector__btn--primary:hover:not(:disabled) {
  background: rgb(8.6322580645, 82.0064516129, 125.1677419355);
}
.email-injector__btn--primary:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.email-injector__btn--secondary {
  background: #ffffff;
  border-color: #dde3e8;
  color: #5a7890;
}
.email-injector__btn--secondary:hover {
  color: #063957;
  border-color: #063957;
}
.email-injector__btn--sm {
  padding: 5px 10px;
  font-size: 11px;
}
.email-injector__multi-note {
  font-size: 12px;
  color: #5a7890;
  margin: 0;
  line-height: 1.5;
}
.email-injector__esp-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  max-height: 200px;
}
.email-injector__esp-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.email-injector__esp-label {
  font-size: 12px;
  color: #5a7890;
  min-width: 80px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.email-injector__esp-input {
  flex: 1;
  background: #f5f5f5;
  border: 1px solid #dde3e8;
  border-radius: 4px;
  color: #063957;
  font-size: 11px;
  padding: 6px 8px;
  font-family: "Courier New", monospace;
  outline: none;
}
.email-injector__esp-input:focus {
  border-color: #1ebbb8;
}
.email-injector__warn-modal {
  padding: 28px 24px 24px;
  background: #ffffff;
  border-radius: 12px;
}
.email-injector__warn-title {
  font-size: 16px;
  font-weight: 700;
  color: #063957;
  margin: 0 0 10px;
}
.email-injector__warn-body {
  font-size: 13px;
  color: #5a7890;
  line-height: 1.55;
  margin: 0 0 20px;
}
.email-injector__warn-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.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;
  }
}

/*# sourceMappingURL=main.8c85d4f7.css.map*/