test-viewer section {
  overflow-y: scroll !important;
}
test-viewer legend {
  text-transform: none !important;
}
test-viewer .field:not(.message) {
  border-bottom: none;
  cursor: pointer;
}
test-viewer .field.message {
  font-size: 12px;
  color: #666;
}
test-viewer [outcome=true] .field:not(.message) {
  background-color: green;
}
test-viewer [outcome=false] .field:not(.message) {
  background-color: red;
}
test-viewer [status=running] .field:not(.message) {
  background-color: yellow;
}
/* open-sans-300 - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: url(/build/web/fonts/open-sans-v15-latin-300.eot);
  /* IE9 Compat Modes */
  src: local('Open Sans Light'), local('OpenSans-Light'), url(/build/web/fonts/open-sans-v15-latin-300.eot?#iefix) format('embedded-opentype'),  url(/build/web/fonts/open-sans-v15-latin-300.woff2) format('woff2'),  url(/build/web/fonts/open-sans-v15-latin-300.woff) format('woff'),  url(/build/web/fonts/open-sans-v15-latin-300.ttf) format('truetype'),  url(data:image/svg+xml;base64,bW9kdWxlLmV4cG9ydHMgPSBfX3dlYnBhY2tfcHVibGljX3BhdGhfXyArICJmb250cy9vcGVuLXNhbnMtdjE1LWxhdGluLTMwMC5zdmciOw==#OpenSans) format('svg');
  /* Legacy iOS */
}
/* open-sans-regular - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url(/build/web/fonts/open-sans-v15-latin-regular.eot);
  /* IE9 Compat Modes */
  src: local('Open Sans Regular'), local('OpenSans-Regular'), url(/build/web/fonts/open-sans-v15-latin-regular.eot?#iefix) format('embedded-opentype'),  url(/build/web/fonts/open-sans-v15-latin-regular.woff2) format('woff2'),  url(/build/web/fonts/open-sans-v15-latin-regular.woff) format('woff'),  url(/build/web/fonts/open-sans-v15-latin-regular.ttf) format('truetype'),  url(data:image/svg+xml;base64,bW9kdWxlLmV4cG9ydHMgPSBfX3dlYnBhY2tfcHVibGljX3BhdGhfXyArICJmb250cy9vcGVuLXNhbnMtdjE1LWxhdGluLXJlZ3VsYXIuc3ZnIjs=#OpenSans) format('svg');
  /* Legacy iOS */
}
/* open-sans-regular 

  We serve 600 as 500 to be able to use 500 when not availble
*/
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  src: url(/build/web/fonts/open-sans-v15-latin-regular.eot);
  /* IE9 Compat Modes */
  src: local('Open Sans Regular'), local('OpenSans-Regular'), url(/build/web/fonts/open-sans-v15-latin-600.eot?#iefix) format('embedded-opentype'),  url(/build/web/fonts/open-sans-v15-latin-600.woff2) format('woff2'),  url(/build/web/fonts/open-sans-v15-latin-600.woff) format('woff'),  url(/build/web/fonts/open-sans-v15-latin-600.ttf) format('truetype'),  url(data:image/svg+xml;base64,bW9kdWxlLmV4cG9ydHMgPSBfX3dlYnBhY2tfcHVibGljX3BhdGhfXyArICJmb250cy9vcGVuLXNhbnMtdjE1LWxhdGluLTYwMC5zdmciOw==#OpenSans) format('svg');
  /* Legacy iOS */
}
.user-not-found {
  width: 100%;
  max-width: 650px;
  margin: 0 auto;
}
.user-not-found .profile-image {
  float: left;
  padding: 10px;
  width: 200px;
  text-align: center;
}
@media screen and (max-width: 850px) {
  .user-not-found .profile-image {
    width: 80px;
  }
}
.user-not-found .alert {
  float: right;
  top: 50%;
  margin-top: 115px;
  height: 230px;
  width: calc(100% - 200px);
  text-align: center;
}
.user-not-found .alert button {
  width: 200px;
}
@media screen and (max-width: 850px) {
  .user-not-found .alert {
    width: calc(100% - 80px);
  }
}
.user-not-found svg {
  opacity: 0.4;
  width: 100%;
}
.information .banner div {
  width: 85%;
  margin: 0 auto;
}
.information .banner h1 {
  margin-top: 30px;
}
.faq h2 {
  margin-top: 40px;
  padding: 6px 0;
}
.faq h3 {
  font-size: 20px;
  font-weight: lighter;
  color: #878787;
  padding: 6px 0;
}
.faq strong {
  font-weight: bold;
}
.faq li {
  margin: 20px;
  font-size: 1.2em;
}
.pricing {
  display: flex;
  flex-wrap: wrap;
  font-family: sans-serif;
  width: 100%;
  max-width: 960px;
  text-align: center;
  margin: 50px auto;
  font-size: 16px;
}
@media screen and (max-width: 850px) {
  .pricing {
    font-size: 12px;
  }
}
.pricing .action {
  color: black;
  text-transform: uppercase;
  font-size: 14px;
}
@media screen and (max-width: 850px) {
  .pricing .action {
    font-size: 10px;
  }
}
.pricing .action button {
  padding: 6px 12px;
  border: none;
  text-transform: uppercase;
  font-size: 14px;
}
.pricing .note {
  text-align: center;
  width: 100%;
}
.pricing header {
  width: 100%;
  height: 40px;
}
.pricing .tier {
  flex: 1 1 33%;
  color: rgba(255, 255, 255, 0.95);
}
.pricing .tier header {
  font-weight: bold;
  background-color: rgba(0, 0, 0, 0.15);
}
.pricing .tier header,
.pricing .tier .feature,
.pricing .tier .action {
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pricing .tier .price {
  font-family: 'Open Sans';
  font-size: 40px;
  font-weight: 100;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pricing .tier .price span {
  font-size: 16px;
}
@media screen and (max-width: 850px) {
  .pricing .tier .price {
    font-size: 18px;
  }
}
.pricing .tier:nth-of-type(1) {
  background-color: #d64a48;
}
.pricing .tier:nth-of-type(1) .action {
  background-color: #eee;
}
.pricing .tier:nth-of-type(2) {
  background-color: #40c26d;
}
.pricing .tier:nth-of-type(2) .action {
  background-color: #ddd;
}
.pricing .tier:nth-of-type(3) {
  background-color: #4d4d4d;
}
.pricing .tier:nth-of-type(3) .action {
  background-color: #ccc;
}
.pricing .tier:hover {
  transform: scale(1.05);
  transition: ease 0.3s;
  box-shadow: rgba(0, 0, 0, 0.3) 1px 1px 10px;
}
.pricing .available {
  cursor: pointer;
}
.style {
  max-width: 960px;
  width: 100%;
  margin: 50px auto;
}
.style .base-color {
  width: 100%;
  display: flex;
  color: white;
}
.style .base-color .color {
  flex: 1 1 auto;
  width: 40px;
  height: 60px;
  padding: 20px 40px;
  margin: 10px 20px;
  border-radius: 4px;
  text-align: center;
}
.style .red .color:nth-of-type(1) {
  background-color: #d64a48;
}
.style .red .color:nth-of-type(2) {
  background-color: #c02d2b;
}
.style .green .color:nth-of-type(1) {
  background-color: #40c26d;
}
.style .green .color:nth-of-type(2) {
  background-color: #329d57;
}
.style .grey .color:nth-of-type(1) {
  background-color: #666666;
}
.style .grey .color:nth-of-type(2) {
  background-color: #4d4d4d;
}
.style .blue .color:nth-of-type(1) {
  background-color: #007aff;
}
.style .blue .color:nth-of-type(2) {
  background-color: #0062cc;
}
.style .yellow .color:nth-of-type(1) {
  background-color: #ffcc00;
}
.style .yellow .color:nth-of-type(2) {
  background-color: #cca300;
}
.style .purple .color:nth-of-type(1) {
  background-color: #5856d6;
}
.style .purple .color:nth-of-type(2) {
  background-color: #3331c8;
}
.style .teal .color:nth-of-type(1) {
  background-color: #0097A7;
}
.style .teal .color:nth-of-type(2) {
  background-color: #006974;
}
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}
body {
  line-height: 1;
}
ol,
ul {
  list-style: none;
}
blockquote,
q {
  quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
html,
body,
button,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
input,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  font-family: "Open Sans", "lucida grande", "Segoe UI", arial, verdana, "lucida sans unicode", tahoma, sans-serif;
  -webkit-overflow-scrolling: touch;
}
body {
  padding-top: env(safe-area-inset-top);
  padding-top: constant(safe-area-inset-top);
  display: flex;
  overflow: hidden;
}
body[break] {
  background-color: white;
}
a {
  text-decoration-skip: ink;
}
/* Remove the little x in input type search */
input[type=text]::-ms-clear {
  display: none;
  width: 0;
  height: 0;
}
input[type=text]::-ms-reveal {
  display: none;
  width: 0;
  height: 0;
}
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
  display: none;
}
input[type=text],
input[type=password],
textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  border-radius: 0;
}
/* Remove yellow from saved fields */
input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 50px #ffffff inset;
}
input:required {
  box-shadow: none;
}
svg {
  vertical-align: middle;
}
html,
body {
  min-height: 100%;
  position: relative;
  width: 100%;
  height: 100%;
}
template {
  display: none;
}
* {
  font-smooth: always;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}
.highlight {
  border-radius: 4px;
  padding: 0 6px;
  background-color: #fffa9e;
}
input[type="search"] {
  -webkit-appearance: textfield;
}
body:not(.login) {
  min-height: 100%;
  min-height: 100vh;
  height: 100%;
}
input,
textarea {
  /*-webkit-appearance: none;*/
}
a {
  text-decoration: none;
}
body:not(.tabbing) button:focus,
body:not(.tabbing) input:focus,
body:not(.tabbing) select:focus,
body:not(.tabbing) textarea:focus {
  outline: none;
}
::-moz-focus-inner {
  border: 0;
}
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}
.no-js .js-only {
  display: none !important;
}
.mside {
  height: 100%;
}
.error {
  color: #d64a48;
}
a {
  color: #d64a48;
}
h1 {
  font-weight: bold;
  font-size: 15px;
  margin: 20px 0 5px;
}
.input-clear svg {
  width: 9px;
  stroke: white;
  fill: rgba(255, 255, 255, 0.95);
  background-color: rgba(0, 0, 0, 0.3);
  padding: 4px;
  border-radius: 50%;
  margin: 7px;
  height: auto;
  cursor: pointer;
}
.input-clear svg:hover {
  background-color: rgba(0, 0, 0, 0.6);
  fill: white;
}
body,
input,
textarea {
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  line-height: 20px;
}
button {
  border: 1px solid #cccccc;
  background-color: white;
  color: #595959;
  border-radius: 3px;
  padding: 6px;
  font-size: 15px;
  margin: 5px 0;
  cursor: pointer;
}
button:hover {
  background-color: #fafafa;
}
/*button.round {
    font-family:'Open Sans';
    font-size:30px;
    width:56px;
    height:56px;
    position:fixed;
    right:30px;
    bottom:30px;
    border-radius:50%;
    border:none;
    background-color:@prime-color;
    color:white;


    span {
        padding-bottom:2px;
    }
}*/
button.power,
button.power-inactive,
button.toggler {
  min-width: 100px;
  border: none;
  border-radius: 3px;
  padding: 6px 12px;
  font-size: 15px;
  margin: 5px 0;
  cursor: pointer;
  transition: all ease 0.1s;
  border-bottom: 2px solid rgba(0, 0, 0, 0.2);
}
button.power,
button.power:hover,
button.toggler.active {
  background-color: #d64a48;
  color: white;
}
.break button.power,
.break button.power-inactive,
.break button.toggler {
  background-color: #4482fd;
  border: none;
}
.break button.power,
.break button.power:hover,
.break button.toggler.active {
  background-color: #4482fd;
  color: white;
  border: none;
}
[dark][break] button.power,
[dark][break] button.power-inactive,
[dark][break] button.toggler {
  background-color: #313131;
  color: #b1b1b1;
  border: none;
}
[dark][break] button.power,
[dark][break] button.power:hover,
[dark][break] button.toggler.active {
  background-color: #313131;
  color: #b1b1b1;
  border: none;
}
button.power.has-icon {
  text-align: left;
  width: auto;
  padding: 5px 12px;
}
button.power.has-icon svg {
  fill: white;
  padding: 0 4px;
}
button.light {
  border: none;
  background-color: white;
  color: rgba(0, 0, 0, 0.6);
  border-bottom: 2px solid #eee;
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.11);
}
*[hidden] {
  visibility: hidden;
}
*[busy] {
  cursor: default;
}
*[busy] button.power,
*[busy] button.inactive {
  border: none;
  background-color: white;
  color: rgba(0, 0, 0, 0.4);
  border-bottom: 2px solid #eee;
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.11);
  cursor: default;
}
*[busy] header button {
  border: none;
  background-color: transparent;
  color: rgba(0, 0, 0, 0.4);
  cursor: default;
}
button.link {
  color: #d64a48;
  border: none;
  background: none;
  font-size: 12px;
  padding: 0;
  margin: 5px 0;
}
button.power:hover {
  background-color: #c23634;
  color: white;
}
button[disabled] {
  cursor: default;
}
button.power:active {
  border-bottom: 2px solid rgba(0, 0, 0, 0);
}
button.power-inactive,
button.toggler,
button.power[disabled] {
  background-color: #ededed;
  color: #737373;
}
button.power-inactive:hover {
  background-color: #d4d4d4;
  color: #404040;
}
button.icon {
  width: auto;
  margin: 0 !important;
  border: none;
  background: none;
  padding: 10px;
}
@media all and (max-width: 850px) {
  button.icon {
    padding: 10px 6px;
  }
}
button.icon svg {
  margin: 0;
}
button.icon .tip {
  opacity: 0;
  pointer-events: none;
  font-family: sans-serif;
  position: absolute;
  padding: 10px 5px;
  background-color: white;
  margin-left: -244px;
  max-width: 280px;
  height: auto;
  width: 280px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 13px 58px 0 rgba(0, 0, 0, 0.19);
  margin-top: 24px;
  border-radius: 3px;
  white-space: normal;
  transition: opacity 0.3s ease-out;
}
button.icon .tip p:first-of-type {
  color: black;
}
button.icon[disabled] {
  opacity: 0.3;
}
button.icon[disabled]:hover svg {
  fill: black;
}
button.icon[disabled]:hover .tip {
  display: none;
}
button.cancel {
  background-color: transparent !important;
  border: none;
}
button.icon:hover svg {
  fill: black;
}
button.icon:hover .tip {
  transition: opacity 0.1s ease-in;
  opacity: 1;
}
.login button {
  width: 100%;
}
.login input[type="text"],
.login input[type="password"],
.login input[type="email"] {
  background-color: #fff;
  border: 1px solid #d5d5d5;
  border-radius: 0.3rem;
  color: black;
  display: inline-block;
  font-size: 15px;
  line-height: 20px;
  padding: 6px 12px;
  text-align: left;
  transition: border-color 0.3s ease 0s;
  width: 100%;
  margin: 6px 1px;
}
.login input[type="text"]:focus,
.login input[type="password"]:focus,
.login input[type="email"]:focus {
  border-color: #d64a48;
  border-width: 1px;
}
.form {
  display: block;
}
.form::-webkit-input-placeholder {
  color: #404040;
  line-height: 1.125rem;
  /*opacity: 1 !important;*/
  padding-top: 0.1rem;
}
.form:-moz-placeholder {
  color: #404040;
  line-height: 1.125rem;
  /*opacity: 1 !important;*/
  padding-top: 0.1rem;
}
.form::-moz-placeholder {
  color: #404040;
  line-height: 1.125rem;
  /*opacity: 1 !important;*/
  padding-top: 0.1rem;
}
.form:-ms-input-placeholder {
  color: #404040;
  line-height: 1.125rem;
  /*opacity: 1 !important;*/
  padding-top: 0.1rem;
}
.form:placeholder-shown {
  /* Standard one last! */
  color: #404040;
  line-height: 1.125rem;
  /*opacity: 1 !important;*/
  padding-top: 0.1rem;
}
.external-login-form button {
  border: 1px solid #cccccc;
  background-color: white;
  color: #595959;
}
label {
  display: none;
}
.checkbox {
  margin: 5px 0;
}
.checkbox label {
  display: inline;
  font-size: 14px;
}
input[type=checkbox] {
  border: 1px solid black;
}
.field-validation-error {
  display: block;
  font-size: 13px;
  margin-left: 310px;
  margin-top: -32px;
  position: absolute;
  width: 300px;
}
/** {
    box-sizing: border-box;
}*/
.mini {
  border: none;
  font-size: 14px;
  text-transform: uppercase;
  padding: 4px 2px;
  display: inline-block;
  white-space: nowrap;
  color: #d64a48 !important;
  transition: color ease-in-out 0.2s;
}
.mini svg {
  fill: currentcolor;
  display: inline-block;
  vertical-align: sub;
  margin: 0 2px;
  overflow: visible;
}
.mini span {
  line-height: 10px;
}
.mini:hover {
  color: black !important;
}
@media all and (max-width: 850px) {
  .form {
    width: 100%;
  }
}
@media all and (max-width: 350px) {
  .form {
    width: 100%;
    margin: 0;
    padding: 10px;
    max-width: 100%;
  }
}
hr {
  border-color: rgba(0, 0, 0, 0.1);
  border-image: none;
  border-style: solid none none;
  border-width: 1px medium medium;
  padding: 0;
  text-align: center;
  margin-bottom: -37px;
  margin-top: 20px;
}
hr:after {
  background: #f5f5f5 none repeat scroll 0 0;
  color: rgba(0, 0, 0, 0.1);
  content: "\A7";
  display: inline-block;
  font-family: serif;
  font-size: 23px;
  line-height: 34px;
  padding: 11px 0.25em 13px;
  position: relative;
  top: -29px;
  transform: rotate(-90deg);
}
#socialLoginList,
.socialLoginList,
social-providers {
  display: flex;
  justify-content: space-between;
}
#socialLoginList button,
.socialLoginList button,
social-providers button {
  color: rgba(0, 0, 0, 0.47);
  font-size: 11px;
}
#socialLoginList button svg,
.socialLoginList button svg,
social-providers button svg {
  fill: rgba(0, 0, 0, 0.5);
  height: 20px;
  margin: 0 0 2px;
  width: 100%;
}
#socialLoginList > button,
.socialLoginList > button,
social-providers > button,
#socialLoginList > form,
.socialLoginList > form,
social-providers > form {
  flex-basis: 32%;
  width: 32% !important;
}
#socialLoginList button:hover,
.socialLoginList button:hover,
social-providers button:hover {
  color: rgba(0, 0, 0, 0.8);
}
#socialLoginList .twitter:hover,
.socialLoginList .twitter:hover,
social-providers .twitter:hover {
  /*color: #3cf;*/
}
#socialLoginList .twitter:hover svg,
.socialLoginList .twitter:hover svg,
social-providers .twitter:hover svg {
  fill: #3cf;
}
#socialLoginList .google:hover,
.socialLoginList .google:hover,
social-providers .google:hover {
  /*color: rgb(80,128,241);*/
}
#socialLoginList .google:hover svg,
.socialLoginList .google:hover svg,
social-providers .google:hover svg {
  fill: #5080f1;
}
#socialLoginList .facebook:hover svg,
.socialLoginList .facebook:hover svg,
social-providers .facebook:hover svg {
  fill: #4062a0;
}
.socialLoginList,
social-providers {
  justify-content: flex-start;
}
.socialLoginList form,
social-providers form {
  margin-right: 9px;
}
#socialLoginList,
.full,
social-providers {
  justify-content: space-between;
}
#socialLoginList form,
.full form,
social-providers form {
  margin-right: 0;
}
.button-panel {
  text-align: right;
  clear: both;
  width: 100%;
}
@media screen and (max-width: 850px) {
  .button-panel {
    padding: 10px;
  }
}
.switch {
  float: left;
  width: 65px;
  height: 32px;
  z-index: 0;
  margin: 0;
  padding: 6.5px 11px;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  border: none;
  cursor: pointer;
  position: relative;
  border-radius: 16px;
  -moz-border-radius: 16px;
  -webkit-border-radius: 16px;
}
.switch span:first-of-type {
  display: none;
}
.switch span:last-of-type {
  display: block;
  text-indent: 26px;
}
.switch.true span:first-child {
  display: block;
}
.switch.true span:last-child {
  display: none;
}
.switch:before {
  content: ' ';
  position: absolute;
  left: 1px;
  top: 1px;
  width: 73px;
  height: 30px;
  background: rgba(0, 0, 0, 0.3);
  z-index: 1;
  border-radius: 16px;
  -moz-border-radius: 16px;
  -webkit-border-radius: 16px;
}
.switch:after {
  content: ' ';
  height: 26px;
  width: 26px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  position: absolute;
  z-index: 2;
  top: 3px;
  left: 3px;
  -webkit-transition-duration: 300ms;
  -moz-transition-duration: 300ms;
  -o-transition-duration: 300ms;
  transition-duration: 300ms;
}
.switch.true:after {
  left: 45px !important;
}
fieldset.modern input[type=text] {
  border: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  width: 100%;
  transition: all 0.2s ease;
  border-radius: 0;
  padding-left: 0;
  float: left;
}
fieldset.modern input[type=text]::-webkit-input-placeholder {
  color: rgba(0, 0, 0, 0.4);
  text-transform: none;
}
fieldset.modern input[type=text]:-moz-placeholder {
  color: rgba(0, 0, 0, 0.4);
  text-transform: none;
}
fieldset.modern input[type=text]::-moz-placeholder {
  color: rgba(0, 0, 0, 0.4);
  text-transform: none;
}
fieldset.modern input[type=text]:-ms-input-placeholder {
  color: rgba(0, 0, 0, 0.4);
  text-transform: none;
}
fieldset.modern input[type=text]:placeholder-shown {
  /* Standard one last! */
  color: rgba(0, 0, 0, 0.4);
  text-transform: none;
}
fieldset.modern button {
  float: right;
  margin-right: 2px;
}
fieldset.modern input[type=text]:placeholder-shown,
fieldset.modern input[type=text].placeholder-shown {
  box-shadow: none;
}
fieldset.modern .group {
  width: 100%;
  clear: both;
  float: left;
  position: relative;
}
fieldset.modern .group label {
  color: #999;
  font-size: 13px;
  font-weight: normal;
  position: absolute;
  pointer-events: none;
  margin-top: 12px;
  display: block;
}
.case fieldset:first-of-type {
  margin-top: 25px;
}
.case fieldset {
  margin: 26px 0 0;
}
.case fieldset.right {
  text-align: right;
}
.case label {
  display: block;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.9);
}
.case input[type=password],
.case input[type=text],
.case input[type=email] {
  color: rgba(0, 0, 0, 0.9);
  font-size: 16px;
  padding: 4px 0;
  width: 100%;
  border: none;
  border-bottom: 1px solid #ccc;
  margin-bottom: 1px;
  border-radius: 0;
}
.case input[type=password]::-webkit-input-placeholder,
.case input[type=text]::-webkit-input-placeholder,
.case input[type=email]::-webkit-input-placeholder {
  color: #b3b3b3;
}
.case input[type=password]:-moz-placeholder,
.case input[type=text]:-moz-placeholder,
.case input[type=email]:-moz-placeholder {
  color: #b3b3b3;
}
.case input[type=password]::-moz-placeholder,
.case input[type=text]::-moz-placeholder,
.case input[type=email]::-moz-placeholder {
  color: #b3b3b3;
}
.case input[type=password]:-ms-input-placeholder,
.case input[type=text]:-ms-input-placeholder,
.case input[type=email]:-ms-input-placeholder {
  color: #b3b3b3;
}
.case input[type=password]:placeholder-shown,
.case input[type=text]:placeholder-shown,
.case input[type=email]:placeholder-shown {
  /* Standard one last! */
  color: #b3b3b3;
}
.case .validation-message {
  font-size: 12px;
  color: #d64a48;
}
.case input[type=password]:focus,
.case input[type=text]:focus,
.case input[type=email]:focus {
  border-bottom: 2px solid #d64a48;
  margin-bottom: 0px;
}
.three-d-box {
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
}
.column {
  width: 50%;
  height: 100%;
  float: left;
}
@media screen and (max-width: 850px) {
  .column {
    clear: both;
    width: 100%;
  }
}
.main-area {
  display: flex;
  height: 100%;
  overflow: hidden;
}
a {
  color: #d64a48;
}
.box {
  float: left;
}
.center-message {
  max-width: 1000px;
  width: 100%;
  margin: 0 auto;
  text-align: center;
  padding: 100px;
  font-size: 16px;
}
.center-message h1,
.center-message h2 {
  padding: 10px 0;
}
.js .no-js {
  display: none;
}
.changes-only {
  opacity: 0;
}
.common-detail {
  width: 100%;
}
.common-detail h1 {
  color: rgba(0, 0, 0, 0.7);
  font-size: 23px;
  padding: 10px 30px;
  font-weight: lighter;
}
.common-detail .menu {
  border-bottom: 1px solid #e6e6e6;
  overflow: auto;
  margin: 10px 0 15px;
}
.common-detail .menu li {
  float: left;
  margin-right: 20px;
  font-size: 17px;
  padding: 8px 16px;
}
.common-detail .menu .active {
  background-color: #fafafa;
  color: #4d4d4d;
}
.common-detail .menu .active a {
  pointer-events: none;
  color: inherit !important;
}
.lazy {
  transition: opacity 500ms ease-in-out;
  max-width: 100%;
  opacity: 0;
}
.lazy.b-loaded {
  opacity: 1;
}
.no-js .lazy {
  display: none;
}
.no-js .load-more {
  display: none;
}
.js .img-holder img {
  opacity: 0;
}
.img-holder {
  position: relative;
  display: block !important;
}
.img-holder > div {
  height: 54px;
  width: 54px;
  animation: rotation 1s infinite linear;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-top-color: rgba(0, 0, 0, 0.7);
  border-radius: 50%;
  position: absolute;
  margin-left: 34px;
  margin-top: 34px;
  transition: opacity 300ms ease-in-out;
  opacity: 1;
  pointer-events: none;
}
@media all and (max-width: 850px) {
  .img-holder > div {
    margin-left: 18px;
    margin-top: 18px;
  }
}
.js .img-holder.loaded > div {
  /*, .img-holder.error > div*/
  opacity: 0;
}
.img-holder.error img {
  opacity: 0;
}
.img-holder.loaded > div {
  display: none;
  visibility: hidden;
  animation: none;
}
.img-holder.loaded img {
  transition: opacity 300ms ease-in-out;
  opacity: 1;
}
@keyframes rotation {
  to {
    transform: rotate(360deg);
  }
}
.content-page {
  text-align: left;
}
.content-page .bottom p {
  font-size: 1.2em;
}
.content-page .bottom .text {
  margin: 0 auto;
  width: 85%;
  padding: 10px;
}
@media screen and (max-width: 60em) {
  .content-page .bottom .text {
    width: 100%;
    text-align: center;
  }
}
.content-page h1 {
  line-height: 38px;
  font-size: 38px;
  padding: 15px 0 9px;
  color: #4d4d4d;
  font-weight: lighter;
  width: 100%;
  float: left;
}
.content-page h2,
.content-page p {
  text-align: left;
}
.content-page h2 {
  /*margin-top: 30px;*/
  width: 100%;
  font-size: 28px;
  font-weight: lighter;
  color: #878787;
  padding: 16px 0;
  text-align: left;
  line-height: 1.2;
}
@media screen and (max-width: 60em) {
  .content-page h2 {
    text-align: center;
  }
}
noscript.warn {
  font-size: 18px;
}
.segmented {
  color: rgba(0, 0, 0, 0.65);
  font-size: 14px;
  font-family: sans-serif;
}
.segmented input[type=text] {
  font-size: 14px;
}
.segmented input[type=text]::-webkit-input-placeholder {
  font-size: 14px;
}
.segmented input[type=text]:-moz-placeholder {
  font-size: 14px;
}
.segmented input[type=text]::-moz-placeholder {
  font-size: 14px;
}
.segmented input[type=text]:-ms-input-placeholder {
  font-size: 14px;
}
.segmented input[type=text]:placeholder-shown {
  /* Standard one last! */
  font-size: 14px;
}
.segmented legend {
  color: #181818;
  font-size: 16px;
}
i-field {
  display: block;
  min-height: 72px;
}
.adaptive {
  transition: all .3s ease;
  transform: translateX(0);
  width: 100%;
  height: 100%;
  height: calc(100% - env(safe-area-inset-bottom));
  height: calc(100% - constant(safe-area-inset-bottom));
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  z-index: 10000;
}
@media screen and (max-width: 850px) {
  .adaptive {
    background-color: white;
  }
}
.adaptive > * {
  padding-top: env(safe-area-inset-top);
  padding-top: constant(safe-area-inset-top);
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  max-height: 100%;
  z-index: 2000;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(156, 110, 110, 0.02), 0 13px 58px 0 rgba(0, 0, 0, 0.19);
}
@media screen and (max-width: 850px) {
  .adaptive > * {
    height: 100%;
  }
}
.adaptive > * > * {
  flex: initial;
}
.adaptive > * header {
  flex: 0 0 44px;
  height: 44px;
  width: 100%;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  background-color: white;
  border-radius: 3px 3px 0 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
@media screen and (max-width: 850px) {
  .adaptive > * header {
    border-radius: 0;
  }
}
.adaptive > * header div.caption {
  color: rgba(0, 0, 0, 0.6);
  font-family: "open sans";
  font-size: 21px;
  font-weight: lighter;
}
.adaptive > * header div:first-of-type,
.adaptive > * header div:last-of-type {
  flex: 0 0 70px;
}
.adaptive > * header div:last-of-type {
  text-align: right;
}
.adaptive > * header button {
  border: none;
  padding: 4px;
  color: #d64a48;
  padding: 0 12px;
  font-family: sans-serif;
}
.adaptive > * header button:active {
  border: none;
}
.adaptive > * header button[disabled] {
  color: #737373;
  fill: #737373 !important;
}
.adaptive > * header button:hover {
  background: none;
}
.adaptive > * header button[name=add] {
  float: right;
  margin-left: -2px;
  display: flex;
  fill: #d64a48;
  align-items: center;
  padding: 0 2px;
}
.adaptive > * header button[name=add] svg {
  height: 30px;
  width: auto;
  margin-left: -2px;
}
.adaptive[slide] {
  opacity: 0;
  transform: translateX(100%);
}
[dark] .adaptive header {
  background-color: black;
  border-bottom-color: #545454 !important;
  color: #c5c5c5;
  fill: #c5c5c5;
}
[dark] .pop-frame section header {
  background-color: black;
  border-bottom-color: #545454 !important;
  color: #c5c5c5;
  fill: #c5c5c5;
}
.dialog {
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 13px 58px 0 rgba(0, 0, 0, 0.19);
  max-width: 400px;
  margin: 0 auto;
  position: absolute;
  box-sizing: border-box;
}
.dialog a {
  cursor: pointer;
}
.dialog a.disabled {
  cursor: not-allowed;
  pointer-events: none;
}
.form {
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
  max-width: 320px;
  margin: 40px auto;
}
.dialog,
.form {
  background-color: white;
  border: none;
  border-radius: 4px;
  width: 100%;
  padding: 0;
  z-index: 10;
}
.dialog form,
.form form {
  height: 100%;
}
.dialog input[type="text"],
.form input[type="text"],
popup-content input[type="text"],
.dialog input[type="password"],
.form input[type="password"],
popup-content input[type="password"],
.dialog input[type="email"],
.form input[type="email"],
popup-content input[type="email"] {
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.3);
  border-radius: 3px;
  color: black;
  display: inline-block;
  font-size: 15px;
  line-height: 20px;
  padding: 6px 12px;
  text-align: left;
  transition: border-color 0.3s ease 0s;
  width: 100%;
  margin: 5px 0;
}
.dialog input[type="text"]:not([readonly]):focus,
.form input[type="text"]:not([readonly]):focus,
popup-content input[type="text"]:not([readonly]):focus,
.dialog input[type="password"]:not([readonly]):focus,
.form input[type="password"]:not([readonly]):focus,
popup-content input[type="password"]:not([readonly]):focus,
.dialog input[type="email"]:not([readonly]):focus,
.form input[type="email"]:not([readonly]):focus,
popup-content input[type="email"]:not([readonly]):focus {
  border-color: #d64a48;
  border-width: 1px;
}
.dialog header,
.form header,
popup-content header {
  width: 100%;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  background-color: white;
  padding: 15px 0 10px;
  margin-bottom: 4px;
  border-radius: 4px 4px 0 0;
  height: 48px;
}
.dialog header .close,
.form header .close,
popup-content header .close,
.dialog header [name=close],
.form header [name=close],
popup-content header [name=close] {
  position: absolute;
  right: 4px;
  top: 6px;
  fill: rgba(0, 0, 0, 0.2);
}
.dialog header .close svg,
.form header .close svg,
popup-content header .close svg,
.dialog header [name=close] svg,
.form header [name=close] svg,
popup-content header [name=close] svg {
  height: 13px;
  width: 13px;
}
.dialog header [name=close],
.form header [name=close],
popup-content header [name=close] {
  top: 3px;
}
.dialog header .close:hover svg,
.form header .close:hover svg,
popup-content header .close:hover svg {
  fill: #d64a48;
}
.dialog header a,
.form header a,
popup-content header a,
.dialog header span,
.form header span,
popup-content header span {
  margin: 0 13px;
  padding: 9px 3px 8px;
  color: rgba(0, 0, 0, 0.6);
  font-family: open sans;
  font-size: 21px;
  font-weight: lighter;
}
.dialog header a.active,
.form header a.active,
popup-content header a.active {
  border-bottom: 1px solid #d64a48;
}
.dialog section,
.form section,
popup-content section {
  padding: 4px 14px;
}
.dialog section p,
.form section p,
popup-content section p {
  margin: 0 0 20px;
  text-overflow: ellipsis;
  overflow: hidden;
}
.dialog footer,
.form footer,
popup-content footer {
  float: right;
  padding: 0 15px 15px;
  width: 100%;
  text-align: right;
}
.dialog footer > div,
.form footer > div,
popup-content footer > div {
  clear: both;
}
.dialog footer label,
.form footer label,
popup-content footer label {
  display: block;
}
.dialog footer .extra,
.form footer .extra,
popup-content footer .extra {
  margin-top: 15px;
  width: 100%;
  text-align: left;
}
.dialog footer .extra > *,
.form footer .extra > *,
popup-content footer .extra > * {
  float: left;
}
.dialog footer .extra input[type=checkbox],
.form footer .extra input[type=checkbox],
popup-content footer .extra input[type=checkbox] {
  margin-top: 4.0px;
}
.dialog footer .extra label,
.form footer .extra label,
popup-content footer .extra label {
  padding: 0 4px;
}
.dialog footer button,
.form footer button,
popup-content footer button {
  margin: 10px 0 0 10px;
}
.dialog + .backdrop,
.form + .backdrop,
popup-content + .backdrop {
  background: rgba(0, 0, 0, 0.15) none repeat scroll 0 0;
}
.arrow {
  overflow: visible !important;
}
.arrow:after,
.arrow:before {
  bottom: 100%;
  left: 93%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}
.arrow:after {
  border-color: rgba(255, 255, 255, 0);
  border-bottom-color: white;
  border-width: 5px;
  margin-left: -5px;
}
.arrow:before {
  border-color: rgba(194, 225, 245, 0);
  border-bottom-color: rgba(0, 0, 0, 0.1);
  border-width: 6px;
  margin-left: -6px;
}
.arrow.top-left:after,
.arrow.top-left:before {
  left: 7%;
}
.popup {
  position: fixed;
  background-color: rgba(0, 0, 0, 0.3);
  width: 100%;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 40000;
  height: 100%;
}
.popup popup-content {
  box-sizing: border-box;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 13px 58px 0 rgba(0, 0, 0, 0.19);
  border-radius: 2px;
  height: auto;
  width: 100%;
  max-width: 400px;
  background-color: white;
  position: relative;
}
@media screen and (max-width: 850px) {
  .popup popup-content {
    padding-top: calc(env(safe-area-inset-top) + 10px);
    padding-top: calc(constant(safe-area-inset-top) + 10px);
    min-height: 100%;
    border-radius: 0;
  }
}
.popup popup-content header {
  position: relative;
}
.popup popup-content header button.icon {
  top: 2px;
  right: 8px;
}
.popup popup-content footer {
  position: absolute;
  bottom: 0;
}
.popup popup-content section {
  margin-bottom: 60px;
}
dialog {
  position: absolute;
  left: 0; right: 0;
  width: -moz-fit-content;
  width: -webkit-fit-content;
  width: fit-content;
  height: -moz-fit-content;
  height: -webkit-fit-content;
  height: fit-content;
  margin: auto;
  border: solid;
  padding: 1em;
  background: white;
  color: black;
  display: block;
}

dialog:not([open]) {
  display: none;
}

dialog + .backdrop {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  background: rgba(0,0,0,0.1);
}

._dialog_overlay {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
}

dialog.fixed {
  position: fixed;
  top: 50%;
  transform: translate(0, -50%);
}progressive-image,
image-view {
  position: relative;
  overflow: hidden;
  display: inline-block;
}
progressive-image img,
image-view img {
  width: 100%;
  height: auto;
  display: inline-block;
  padding: 0 !important;
}
progressive-image [name=overlay],
image-view [name=overlay] {
  position: absolute;
  z-index: 1;
  background-repeat: no-repeat;
  background-size: cover;
  filter: blur(2px);
  transition: opacity .8s;
}
[dark] progressive-image img,
[dark] image-view img,
[dark] progressive-image [name=overlay],
[dark] image-view [name=overlay] {
  opacity: 0.85;
}
image-view {
  display: block;
}
image-view img {
  border-radius: 6px;
}
image-view [name=overlay] {
  border-radius: 6px;
}
progressive-image[loaded] [name=overlay] {
  opacity: 0;
}
.three-d-box {
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
}
add-anything * {
  box-sizing: border-box;
  overflow: hidden;
  min-width: 0;
}
add-anything .list .field {
  min-height: 112px;
}
add-anything .stack-title,
add-anything .category-title,
add-anything [name=url-button] {
  width: 100%;
  text-align: right;
  padding: 0 15px;
  margin-top: -22px;
  color: #b3b3b3;
  font-size: 13px;
}
add-anything .stack-title > svg,
add-anything .category-title > svg,
add-anything [name=url-button] > svg {
  fill: #b3b3b3;
  height: 26px;
  padding-bottom: 2px;
}
add-anything .stack-title,
add-anything .category-title {
  position: absolute;
}
add-anything [name=url-button] {
  margin-bottom: -7px;
  margin-top: -25px;
}
add-anything [name=url-button] button {
  transition: opacity 0.2s;
  opacity: 1;
  font-size: 9px;
  text-transform: uppercase;
  border-radius: 50%;
  background-color: #eaeaea;
  border: none;
  width: 22px;
  height: 22px;
  display: inline-flex;
  justify-content: center;
}
add-anything [name=url-button] button svg {
  height: 8px;
  opacity: 0.7;
  width: auto;
}
add-anything [name=error-message] {
  padding: 0 16px;
  color: #d64a48;
  font-size: 13px;
}
add-anything [name=link] {
  display: flex;
  flex-direction: column;
}
add-anything [name=link] div.info {
  display: flex;
  height: 70px;
  width: 100%;
  flex-direction: row;
}
add-anything [name=link] div.info .img-container {
  align-items: center;
  background-color: #f5f5f5;
  box-shadow: 0 0 1px #f5f5f5;
  border-radius: 3px;
  display: flex;
  flex: 0 0 40px;
  height: 40px;
  justify-content: center;
  margin: 15px 15px 0 0;
  width: 40px;
}
add-anything [name=link] div.info .img-container img {
  max-width: 40px;
  max-height: 40px;
}
add-anything [name=link] div.info div.preview {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  background-color: transparent;
  border-radius: 3px;
  flex: 0 0 40px;
  height: 40px;
  margin: 15px 15px 0 0;
  width: 40px;
}
add-anything [name=link] div.info div.title {
  align-content: center;
  box-sizing: content-box;
  color: black !important;
  display: flex;
  flex-direction: column;
  font-family: sans-serif;
  font-size: 13px;
  height: 100%;
  justify-content: center;
  line-height: 18px;
  white-space: pre-wrap;
}
add-anything [name=link] div.buttons {
  display: flex;
  justify-content: flex-end;
  padding: 0 0 15px;
  text-align: right;
  width: 100%;
}
add-anything [name=link] div.buttons button {
  margin: 0;
}
add-anything section {
  flex-direction: column;
}
add-anything [name=scroll-container] {
  overflow: auto;
  overflow-x: hidden;
  overflow-y: auto;
  border-bottom: 1px solid #dedede;
}
@media (min-resolution: 2dppx) {
  add-anything [name=scroll-container] {
    border-bottom-width: 0.5px;
  }
}
@media (min-resolution: 3dppx) {
  add-anything [name=scroll-container] {
    border-bottom-width: 0.33333333px;
  }
}
@media (min-resolution: 4dppx) {
  add-anything [name=scroll-container] {
    border-bottom-width: 0.25px;
  }
}
add-anything .field[slug] {
  cursor: pointer;
}
add-anything .field button {
  border: 1px solid #d64a48;
  text-transform: uppercase;
  font-size: 11px;
  padding: 5px 10px;
  background-color: #d64a48;
  color: white;
}
add-anything[empty] [name=url-button] button {
  pointer-events: none;
  opacity: 0;
}
.three-d-box {
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
}
.mixin-field fieldset {
  display: flex;
  flex-direction: column;
  flex: auto;
  overflow: hidden;
}
.mixin-field fieldset .field:first-of-type {
  border-top: 1px solid #dedede;
}
@media (min-resolution: 2dppx) {
  .mixin-field fieldset .field:first-of-type {
    border-top-width: 0.5px;
  }
}
@media (min-resolution: 3dppx) {
  .mixin-field fieldset .field:first-of-type {
    border-top-width: 0.33333333px;
  }
}
@media (min-resolution: 4dppx) {
  .mixin-field fieldset .field:first-of-type {
    border-top-width: 0.25px;
  }
}
.mixin-field fieldset .field:last-of-type {
  border-bottom: 1px solid #dedede;
}
@media (min-resolution: 2dppx) {
  .mixin-field fieldset .field:last-of-type {
    border-bottom-width: 0.5px;
  }
}
@media (min-resolution: 3dppx) {
  .mixin-field fieldset .field:last-of-type {
    border-bottom-width: 0.33333333px;
  }
}
@media (min-resolution: 4dppx) {
  .mixin-field fieldset .field:last-of-type {
    border-bottom-width: 0.25px;
  }
}
.mixin-field fieldset legend {
  color: #7c7b81;
  font-size: 12px;
  padding: 15px 16px 10px;
  text-transform: uppercase;
}
.mixin-field fieldset .field {
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  background-color: white;
  width: 100%;
  min-height: 44px;
  display: flex;
  padding: 0 16px;
  justify-content: space-between;
  font-size: 15px;
  align-items: center;
  padding-right: 16px;
  box-sizing: border-box;
  font-weight: 300;
  flex: 1 0 auto;
}
.mixin-field fieldset .field,
.mixin-field fieldset .field > * {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mixin-field fieldset .field div {
  color: rgba(0, 0, 0, 0.4);
}
.mixin-field fieldset .field div svg {
  fill: rgba(0, 0, 0, 0.3);
}
.mixin-field fieldset .field div:first-of-type svg {
  fill: rgba(0, 0, 0, 0.2);
  margin: 0 5px 0 0;
  height: 18px;
  width: auto;
  padding-bottom: 2px;
}
.mixin-field fieldset .field label,
.mixin-field fieldset .field input[type=text],
.mixin-field fieldset .field input[type=password],
.mixin-field fieldset .field textarea {
  width: 100%;
  height: 21px;
  background-color: transparent;
}
.mixin-field fieldset .field input[type=text],
.mixin-field fieldset .field input[type=password],
.mixin-field fieldset .field textarea {
  font-size: 15px;
  border: none;
  padding: 0;
  margin: 0;
  line-height: initial;
}
.mixin-field fieldset .field input[type=text]::-webkit-input-placeholder,
.mixin-field fieldset .field input[type=password]::-webkit-input-placeholder,
.mixin-field fieldset .field textarea::-webkit-input-placeholder {
  color: rgba(0, 0, 0, 0.4);
}
.mixin-field fieldset .field input[type=text]:-moz-placeholder,
.mixin-field fieldset .field input[type=password]:-moz-placeholder,
.mixin-field fieldset .field textarea:-moz-placeholder {
  color: rgba(0, 0, 0, 0.4);
}
.mixin-field fieldset .field input[type=text]::-moz-placeholder,
.mixin-field fieldset .field input[type=password]::-moz-placeholder,
.mixin-field fieldset .field textarea::-moz-placeholder {
  color: rgba(0, 0, 0, 0.4);
}
.mixin-field fieldset .field input[type=text]:-ms-input-placeholder,
.mixin-field fieldset .field input[type=password]:-ms-input-placeholder,
.mixin-field fieldset .field textarea:-ms-input-placeholder {
  color: rgba(0, 0, 0, 0.4);
}
.mixin-field fieldset .field input[type=text]:placeholder-shown,
.mixin-field fieldset .field input[type=password]:placeholder-shown,
.mixin-field fieldset .field textarea:placeholder-shown {
  /* Standard one last! */
  color: rgba(0, 0, 0, 0.4);
}
.mixin-field fieldset .field label {
  display: block;
  color: black;
  font-size: 15px;
  padding-right: 10px;
  width: auto;
}
.mixin-field fieldset .field input {
  border: none;
  font-size: 15px;
}
.mixin-field fieldset .field textarea {
  min-height: 60px;
  word-wrap: break-word;
  padding: 10px 0;
}
.mixin-field fieldset.button-set {
  background-color: white;
  padding: 10px;
}
.mixin-field fieldset.button-set button {
  width: 100%;
  border: none;
}
.three-d-box {
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
}
.mixin-field-2 fieldset.input {
  border: none;
}
.mixin-field-2 fieldset.input input,
.mixin-field-2 fieldset.input textarea {
  background-color: #f1f2f3;
  border-radius: 20px;
  border: 2px solid white;
  color: black;
  font-size: 15px;
  padding: 7px 14px 8px;
  width: 100%;
  margin: 10px 0;
}
.mixin-field-2 fieldset.input textarea {
  height: 40px;
  color: black;
  word-wrap: break-word;
  white-space: pre-wrap;
  resize: none;
}
.mixin-field-2 fieldset.input input:focus,
.mixin-field-2 fieldset.input textarea:focus {
  border-color: #e3e6e8;
  background-color: white;
}
.mixin-field-2 fieldset.list .field {
  padding: 0 15px;
  border-bottom: 1px solid #e6e6e6;
}
@media (min-resolution: 2dppx) {
  .mixin-field-2 fieldset.list .field {
    border-bottom-width: 0.5px;
  }
}
@media (min-resolution: 3dppx) {
  .mixin-field-2 fieldset.list .field {
    border-bottom-width: 0.33333333px;
  }
}
@media (min-resolution: 4dppx) {
  .mixin-field-2 fieldset.list .field {
    border-bottom-width: 0.25px;
  }
}
.mixin-field-2 fieldset.list .field:last-of-type {
  border: none;
}
.mixin-field-2 fieldset {
  display: flex;
  flex-direction: column;
  flex: auto;
  overflow: hidden;
}
.mixin-field-2 fieldset legend {
  color: #7c7b81;
  font-size: 12px;
  padding: 15px 16px 0;
  text-transform: uppercase;
}
.mixin-field-2 fieldset .field {
  background-color: white;
  width: 100%;
  min-height: 44px;
  display: flex;
  padding: 0 10px;
  justify-content: space-between;
  font-size: 15px;
  align-items: center;
  box-sizing: border-box;
  font-weight: 300;
  flex: 1 0 auto;
}
.mixin-field-2 fieldset .field,
.mixin-field-2 fieldset .field > * {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mixin-field-2 fieldset .field div {
  color: rgba(0, 0, 0, 0.4);
}
.mixin-field-2 fieldset .field div svg {
  fill: rgba(0, 0, 0, 0.3);
}
.mixin-field-2 fieldset .field div:first-of-type svg {
  fill: rgba(0, 0, 0, 0.2);
  margin: 0 5px 0 0;
  height: 18px;
  width: auto;
  padding-bottom: 2px;
}
.mixin-field-2 fieldset .field label,
.mixin-field-2 fieldset .field input[type=text],
.mixin-field-2 fieldset .field input[type=password],
.mixin-field-2 fieldset .field textarea {
  width: 100%;
}
.mixin-field-2 fieldset .field input::-webkit-input-placeholder,
.mixin-field-2 fieldset .field input::-webkit-input-placeholder,
.mixin-field-2 fieldset .field textarea::-webkit-input-placeholder {
  color: rgba(0, 0, 0, 0.4);
}
.mixin-field-2 fieldset .field input:-moz-placeholder,
.mixin-field-2 fieldset .field input:-moz-placeholder,
.mixin-field-2 fieldset .field textarea:-moz-placeholder {
  color: rgba(0, 0, 0, 0.4);
}
.mixin-field-2 fieldset .field input::-moz-placeholder,
.mixin-field-2 fieldset .field input::-moz-placeholder,
.mixin-field-2 fieldset .field textarea::-moz-placeholder {
  color: rgba(0, 0, 0, 0.4);
}
.mixin-field-2 fieldset .field input:-ms-input-placeholder,
.mixin-field-2 fieldset .field input:-ms-input-placeholder,
.mixin-field-2 fieldset .field textarea:-ms-input-placeholder {
  color: rgba(0, 0, 0, 0.4);
}
.mixin-field-2 fieldset .field input:placeholder-shown,
.mixin-field-2 fieldset .field input:placeholder-shown,
.mixin-field-2 fieldset .field textarea:placeholder-shown {
  /* Standard one last! */
  color: rgba(0, 0, 0, 0.4);
}
.mixin-field-2 fieldset .field label {
  display: block;
  color: black;
  font-size: 15px;
  padding-right: 10px;
  width: auto;
}
.mixin-field-2 fieldset.button-set {
  background-color: white;
  padding: 10px;
}
.mixin-field-2 fieldset.button-set button {
  width: 100%;
  border: none;
}
side-bar-header {
  align-items: center;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  display: flex;
  font-family: sans-serif;
  font-size: 14px;
  height: 44px;
  justify-content: space-between;
  position: fixed;
  top: 0;
  top: constant(safe-area-inset-top);
  top: env(safe-area-inset-top);
  width: 100%;
  box-sizing: border-box;
  width: 320px;
  right: 0px;
}
@media screen and (max-width: 850px) {
  side-bar-header {
    width: 100%;
  }
}
side-bar-header div {
  width: 75px;
  text-align: center;
}
side-bar-header div button {
  border: none;
  color: #d64a48;
  font-size: 14px;
  margin: 0;
  padding: 0 15px;
  font-family: sans-serif;
}
side-bar-header div:last-of-type {
  text-align: right;
}
.three-d-box {
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
}
side-bar {
  transition: all ease 0.2s;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-color: white;
  box-shadow: 0 0 30px #ededed;
  box-sizing: border-box;
  contain: layout style;
  display: block;
  flex: 1 1;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  right: 0;
  width: 0;
  z-index: 2000;
}
@media screen and (max-width: 850px) {
  side-bar {
    position: fixed;
  }
}
side-bar > * {
  display: block;
  height: 100%;
  margin-top: 0;
  overflow-x: hidden;
  overflow-y: scroll;
  padding-top: 44px;
  width: 320px;
}
@media screen and (max-width: 850px) {
  side-bar > * {
    width: 100vw;
  }
}
[show-side-bar] side-bar {
  margin-left: 0;
  pointer-events: all;
  position: relative;
  width: 320px;
}
@media screen and (max-width: 850px) {
  [show-side-bar] side-bar {
    position: fixed;
    width: 100%;
    z-index: 10000;
  }
}
[promote] side-bar {
  height: calc(100vh - 49px);
}
.three-d-box {
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
}
category-selector section {
  background-color: #f1f2f4;
}
category-selector [name=scroll-container] {
  overflow: auto;
  overflow-x: hidden;
  overflow-y: auto;
  border-bottom: 1px solid #dedede;
}
@media (min-resolution: 2dppx) {
  category-selector [name=scroll-container] {
    border-bottom-width: 0.5px;
  }
}
@media (min-resolution: 3dppx) {
  category-selector [name=scroll-container] {
    border-bottom-width: 0.33333333px;
  }
}
@media (min-resolution: 4dppx) {
  category-selector [name=scroll-container] {
    border-bottom-width: 0.25px;
  }
}
category-selector .field[slug] {
  cursor: pointer;
}
.mixin-popup {
  transition: all 0.3s ease;
  align-items: center;
  display: flex;
  flex: 1 1;
  height: 100%;
  justify-content: center;
  left: 0;
  position: absolute;
  top: 0;
  transform: translateX(0);
  width: 100%;
  z-index: 10000;
}
@supports (env(safe-area-inset-top)) {
  .mixin-popup {
    height: calc(100% - env(safe-area-inset-bottom));
  }
}
@supports (constant(safe-area-inset-top)) {
  .mixin-popup {
    height: calc(100% - constant(safe-area-inset-bottom));
  }
}
.mixin-popup > * {
  background-color: white;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(156, 110, 110, 0.02), 0 13px 58px 0 rgba(0, 0, 0, 0.19);
  display: flex;
  flex-direction: column;
  height: 100%;
  max-height: 680px;
  max-width: 400px;
  overflow: hidden;
  padding-top: constant(safe-area-inset-top);
  padding-top: env(safe-area-inset-top);
  position: relative;
  width: 100%;
  z-index: 2000;
}
@media screen and (max-width: 850px) {
  .mixin-popup > * {
    border-radius: 0;
    max-height: 100%;
    max-width: 100%;
  }
}
.mixin-header {
  align-items: center;
  background-color: white;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 3px 3px 0 0;
  display: flex;
  flex: 0 0 44px;
  font-size: 15px;
  font-weight: 400;
  height: 44px;
  justify-content: space-between;
  width: 100%;
}
@media (min-resolution: 2dppx) {
  .mixin-header {
    border-bottom-width: 0.5px;
  }
}
@media (min-resolution: 3dppx) {
  .mixin-header {
    border-bottom-width: 0.33333333px;
  }
}
@media (min-resolution: 4dppx) {
  .mixin-header {
    border-bottom-width: 0.25px;
  }
}
.mixin-header > * {
  flex: 1 1 33%;
}
.mixin-header div.caption {
  color: #666;
  text-align: center;
}
.mixin-header button:last-of-type {
  text-align: right;
}
.mixin-header button {
  border: none;
  color: #d64a48;
  padding: 0 12px;
  font-size: 15px;
}
.mixin-header button:active {
  border: none;
}
.mixin-header button[disabled] {
  color: #737373;
  fill: #737373 !important;
}
.mixin-header button:hover {
  background: none;
}
.mixin-header button.veiter {
  float: right;
  margin-left: -2px;
  display: flex;
  fill: #d64a48;
  align-items: center;
  padding: 0 2px;
}
.mixin-header button.veiter svg {
  height: 30px;
  width: auto;
  margin-left: -2px;
}
.three-d-box {
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
}
content-area {
  background-color: white;
}
.content-destination {
  width: 100%;
  overflow: auto;
  margin-top: 44px;
  height: calc(100vh - 44px);
  overflow-x: hidden;
  overflow-y: auto;
  contain: strict;
}
@media screen and (max-width: 850px) {
  .content-destination {
    height: calc(100vh - 44px - 49px);
  }
}
[promote] .content-destination {
  height: calc(100vh - 44px - 49px);
}
.not-authenticated .content-destination {
  margin: 0;
  height: 100vh;
}
body[break] header {
  background-color: #f8f8f8;
  color: black;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom: 1px solid #dedede;
  fill: black;
}
@media (min-resolution: 2dppx) {
  body[break] header {
    border-bottom-width: 0.5px;
  }
}
@media (min-resolution: 3dppx) {
  body[break] header {
    border-bottom-width: 0.33333333px;
  }
}
@media (min-resolution: 4dppx) {
  body[break] header {
    border-bottom-width: 0.25px;
  }
}
.three-d-box {
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
}
app-buttons-side .count,
app-buttons-bottom .count {
  background-color: #d64a48;
  border-radius: 14px;
  color: white;
  display: flex;
  font-family: -apple-system-apple-system, BlinkMacSystemFont, 'Open sans', sans-serif;
  font-size: 10px;
  line-height: 10px;
  left: 29px;
  top: 11px;
  padding: 4px 6px;
  position: absolute;
  width: auto;
  opacity: 1;
  transition: opacity 0.5s ease-in-out;
  z-index: 1;
}
app-buttons-side .count:empty,
app-buttons-bottom .count:empty {
  opacity: 0;
}
app-buttons-side [name=beta-tag],
app-buttons-bottom [name=beta-tag] {
  position: absolute;
}
app-buttons-side {
  display: flex;
  flex: 0 0 60px;
  overflow: hidden;
  background-color: white;
  flex-direction: column;
  border-right: 1px solid rgba(0, 0, 0, 0.06);
  z-index: 3000;
  position: relative;
}
app-buttons-side button {
  font-size: 11px;
  padding: 10px 0;
  background-color: transparent;
  margin: 10px 0;
  border: none;
  letter-spacing: -0.4px;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 1;
  color: #909090;
  position: relative;
}
app-buttons-side button img {
  border-radius: 50%;
  height: 21px;
  margin: 4px;
}
app-buttons-side button svg {
  margin: 3px;
  height: 21px;
  fill: #909090;
}
app-buttons-side button[name=feeds] svg {
  height: 24px;
}
app-buttons-side button:hover {
  color: #d64a48;
}
app-buttons-side button:hover svg {
  fill: #d64a48;
}
app-buttons-side button[selected] {
  background-color: white;
  box-shadow: 0px 0 30px #ededed;
  color: rgba(0, 0, 0, 0.8);
}
app-buttons-side button[selected] svg {
  fill: rgba(0, 0, 0, 0.8);
}
@media screen and (max-width: 850px) {
  app-buttons-side {
    display: none;
  }
}
[show-side-menu] app-buttons-side {
  border-right: none;
  box-shadow: inset 0 0 30px #ededed;
}
app-buttons-bottom {
  -webkit-user-select: none;
  border-top: 1px solid #e8e8e8;
  align-items: center;
  background-color: white;
  bottom: 0;
  box-sizing: border-box;
  display: none;
  height: 49px;
  height: calc(49px + constant(safe-area-inset-bottom));
  height: calc(49px + env(safe-area-inset-bottom));
  justify-content: space-between;
  padding-top: 0;
  padding-bottom: 0;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: 15px;
  padding-right: 15px;
  position: fixed;
  user-select: none;
  white-space: nowrap;
  width: 100%;
  z-index: 10000;
}
@media (min-resolution: 2dppx) {
  app-buttons-bottom {
    border-top-width: 0.5px;
  }
}
@media (min-resolution: 3dppx) {
  app-buttons-bottom {
    border-top-width: 0.33333333px;
  }
}
@media (min-resolution: 4dppx) {
  app-buttons-bottom {
    border-top-width: 0.25px;
  }
}
app-buttons-bottom .count {
  top: 3px;
  left: 21px;
}
@media screen and (max-width: 850px) {
  app-buttons-bottom {
    display: flex;
  }
}
app-buttons-bottom button {
  color: #909090;
  fill: #909090;
  flex: 0 0 45px;
  border: none;
  background-color: transparent;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 10px;
  padding: 4px 0 2px 0;
  margin: 0;
  font-family: -apple-system-apple-system, BlinkMacSystemFont, 'Open sans', sans-serif;
  position: relative;
}
app-buttons-bottom button img {
  border-radius: 50%;
  height: 21px;
  margin: 4px;
}
app-buttons-bottom button svg {
  height: 25px;
  width: auto;
  margin: 2px;
}
app-buttons-bottom button:hover {
  background-color: transparent;
}
app-buttons-bottom button[selected] {
  color: black;
}
app-buttons-bottom button[selected] svg {
  fill: black;
}
.not-authenticated app-buttons-side,
.not-authenticated app-buttons-bottom {
  display: none;
}
.three-d-box {
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
}
app-switch {
  display: flex;
  width: 100%;
  height: 100%;
  transition: all ease 0.2s;
}
@media screen and (max-width: 850px) {
  app-switch {
    flex-direction: column;
  }
}
app-switch app-content {
  flex: 1 1;
  background-color: white;
  display: flex;
  min-width: 0;
}
app-switch app-content > div {
  width: 100%;
  height: 100%;
}
app-switch app-content [name=single-holder] {
  display: flex;
  flex-direction: column;
  flex: 1 1;
}
app-switch app-content [name=single-holder] .app-top {
  flex: 0 0 2px;
}
app-switch app-content [name=single-holder] .app-center {
  display: flex;
  flex: 1 1;
}
app-switch app-content [name=single-holder] .app-center .mside {
  flex: 1 1;
  flex-direction: column;
}
app-switch app-content [name=single-holder] .app-center content-manager {
  flex: 1 1;
}
app-switch app-content [name=single-holder] .app-center content-manager content-area {
  max-height: 100%;
  overflow: auto;
  display: flex;
  top: 42px;
  justify-content: center;
}
[show-side-bar] app-switch {
  width: calc(100% - 320px);
}
@media screen and (max-width: 850px) {
  [show-side-bar] app-switch {
    width: 100%;
  }
}
collaboration-editor[busy] {
  pointer-events: none;
}
collaboration-editor[busy] * {
  opacity: 0.8;
}
collaboration-editor {
  background-color: #f1f2f4;
  display: block;
  flex: 1 1;
  width: 100%;
}
collaboration-editor input {
  height: 42px;
  width: 100%;
}
collaboration-editor section {
  flex: 1 1;
}
collaboration-editor .field input[type=text]::-webkit-input-placeholder,
collaboration-editor .field input[type=email]::-webkit-input-placeholder {
  color: #ccc;
}
collaboration-editor .field input[type=text]:-moz-placeholder,
collaboration-editor .field input[type=email]:-moz-placeholder {
  color: #ccc;
}
collaboration-editor .field input[type=text]::-moz-placeholder,
collaboration-editor .field input[type=email]::-moz-placeholder {
  color: #ccc;
}
collaboration-editor .field input[type=text]:-ms-input-placeholder,
collaboration-editor .field input[type=email]:-ms-input-placeholder {
  color: #ccc;
}
collaboration-editor .field input[type=text]:placeholder-shown,
collaboration-editor .field input[type=email]:placeholder-shown {
  /* Standard one last! */
  color: #ccc;
}
collaboration-editor [name=invite] button {
  color: white;
  flex: 1 1 73px;
  text-transform: uppercase;
  font-size: 12px;
  opacity: 0;
  transition: all 0.5s;
}
collaboration-editor [name=invite] button[visible] {
  opacity: 1;
  background-color: #ccc;
}
collaboration-editor [name=invite] button[active] {
  background-color: #d64a48;
}
collaboration-editor [empty] {
  display: none;
}
collaboration-editor [name=break-connection] {
  width: calc(100% - 20px);
  margin: 10px;
}
collaboration-editor [name=editors] button,
collaboration-editor [name=invitations] button,
collaboration-editor [name=owner] button {
  border: none;
}
collaboration-editor [name=editors] .field,
collaboration-editor [name=invitations] .field,
collaboration-editor [name=owner] .field {
  font-size: 12px;
  min-height: 56px;
}
collaboration-editor [name=editors] .field label,
collaboration-editor [name=invitations] .field label,
collaboration-editor [name=owner] .field label {
  font-size: 13px;
  font-weight: 400;
}
collaboration-editor [name=editors] .field [name=email],
collaboration-editor [name=invitations] .field [name=email],
collaboration-editor [name=owner] .field [name=email] {
  font-weight: 300;
  color: #8a8a8a;
}
collaboration-editor [name=editors] .field img,
collaboration-editor [name=invitations] .field img,
collaboration-editor [name=owner] .field img {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  margin-right: 11px;
  margin-left: -4px;
}
collaboration-editor [name=editors] .field > div,
collaboration-editor [name=invitations] .field > div,
collaboration-editor [name=owner] .field > div {
  flex: 1 1;
}
collaboration-editor [name=editors] .field [name=remove],
collaboration-editor [name=invitations] .field [name=remove],
collaboration-editor [name=owner] .field [name=remove] {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
collaboration-editor [name=editors] .field [name=remove] svg,
collaboration-editor [name=invitations] .field [name=remove] svg,
collaboration-editor [name=owner] .field [name=remove] svg {
  width: 10px;
  height: auto;
  fill: #ccc;
}
collaboration-editor [name=editors] .field [name=remove]:hover svg,
collaboration-editor [name=invitations] .field [name=remove]:hover svg,
collaboration-editor [name=owner] .field [name=remove]:hover svg {
  fill: black;
}
media-viewer {
  overflow: scroll;
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 10000;
  top: 0;
  left: 0;
  background-color: black;
  display: flex;
  align-items: center;
  align-content: center;
  transition: all 0.5s;
  transform: scale 0.3;
  opacity: 0;
}
media-viewer img {
  position: absolute;
  transition: all 0.3s ease-out;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}
media-viewer button[name=close] {
  top: 18px;
  left: 26px;
  position: absolute;
  background: transparent;
  border: none;
  cursor: pointer;
}
media-viewer button[name=close] svg {
  height: 16px;
  width: auto;
  fill: white;
  filter: drop-shadow(0px 0px 8px #000);
  -webkit-filter: drop-shadow(0px 0px 2px #777);
}
media-viewer[open] {
  transform: scale(1);
  opacity: 1;
}
media-viewer[closing] {
  transform: translateY(-50%);
  opacity: 0;
}
break-search {
  position: absolute;
  height: 42px;
  width: 100%;
  z-index: 10000;
  background-color: white;
  display: flex;
  left: 0;
  margin-top: env(safe-area-inset-top);
  margin-top: constant(safe-area-inset-top);
  top: 1px;
}
break-search button {
  flex: 0 0;
  background-color: transparent;
}
break-search button[name=up] svg {
  transform: rotate(90deg);
}
break-search button[name=down] svg {
  transform: rotate(-90deg);
}
break-search input {
  flex: 1 1;
  border: none;
  background-color: transparent;
}
break-search .highlight {
  background-color: gold;
}
break-search mark {
  background: orange;
  color: black;
}
[dark] break-search {
  background-color: black;
  color: #c5c5c5;
}
[dark] break-search svg {
  fill: #c5c5c5;
}
image-view {
  display: block;
  position: relative;
  overflow: hidden;
}
image-view img {
  width: 100%;
  height: auto;
  border-radius: 6px;
}
image-view [name=overlay] {
  position: absolute;
  z-index: 1;
  background-repeat: no-repeat;
  background-size: cover;
  filter: blur(2px);
  transition: opacity .8s;
  border-radius: 6px;
}
[dark] image-view img,
[dark] image-view [name=overlay] {
  opacity: 0.85;
}
image-view[loaded] [name=overlay] {
  opacity: 0;
}
.three-d-box {
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
}
[urlprovider-mode="test"] break-reader.pop-frame section header [name=title] {
  border-bottom: 1px solid red;
}
[urlprovider-mode="local"] break-reader.pop-frame section header [name=title] {
  border-bottom: 1px solid green;
}
break-reader.pop-frame {
  transition: all 0.3s ease;
  transform: translateX(0);
  height: 100%;
}
break-reader.pop-frame section {
  background-color: white;
  border-radius: 0;
  width: 100%;
  height: 100%;
  padding-bottom: env(safe-area-inset-bottom);
  padding-bottom: constant(safe-area-inset-bottom);
  max-width: 100%;
  max-height: 100%;
  padding-top: env(safe-area-inset-top);
  padding-top: constant(safe-area-inset-top);
}
break-reader.pop-frame section header {
  user-select: none;
  -webkit-user-select: none;
  height: 44px;
  display: flex;
  justify-content: space-between;
}
break-reader.pop-frame section header div:not(:first-of-type):not(:last-of-type) {
  display: flex;
  flex: 0 0 110px;
  justify-content: center;
  align-items: center;
}
break-reader.pop-frame section header div:first-of-type {
  justify-content: left;
}
break-reader.pop-frame section header div:last-of-type {
  justify-content: flex-end;
}
break-reader.pop-frame a {
  text-decoration: none;
  color: inherit;
  align-items: center;
  display: flex;
}
break-reader.pop-frame a svg {
  fill: #aaa;
  width: 18px;
  margin: 0 !important;
}
break-reader.pop-frame section [name="stream"] {
  display: flex;
  flex-direction: column;
  padding-bottom: 15px;
  padding-top: 8px;
}
break-reader.pop-frame section [name="main"] {
  overflow-y: scroll;
  overflow-x: hidden;
  height: calc(100% - 42px);
  padding-bottom: 41px;
  word-wrap: break-word;
  background-color: #f2f2f2;
}
break-reader.pop-frame section [name="main"] pre {
  font-family: monospace;
  font-size: 11px;
  white-space: pre-wrap;
  word-wrap: break-word;
}
break-reader.pop-frame section [name="main"] ul {
  list-style: initial;
  padding: 10px 0 0 16px;
  margin: initial;
}
break-reader.pop-frame section [name="main"] li {
  text-indent: -22px;
  padding-left: 22px;
  display: list-item;
}
break-reader.pop-frame section [name="main"] li:empty,
break-reader.pop-frame section [name="main"] em:empty,
break-reader.pop-frame section [name="main"] strong:empty {
  display: none;
}
break-reader.pop-frame section [name="main"] em {
  font-style: italic;
}
break-reader.pop-frame section [name="main"] strong {
  font-weight: bolder;
}
break-reader.pop-frame section .spinner {
  padding: 10px 15px 4px;
  width: 60px;
  margin-top: 15px;
}
break-reader.pop-frame section .spinner > div {
  width: 3px;
  height: 3px;
  margin: 2px;
  background-color: #333;
  border-radius: 100%;
  display: inline-block;
  -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
  animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}
break-reader.pop-frame section .spinner .bounce1 {
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}
break-reader.pop-frame section .spinner .bounce2 {
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}
@-webkit-keyframes sk-bouncedelay {
  0%,
  80%,
  100% {
    -webkit-transform: scale(0);
  }
  40% {
    -webkit-transform: scale(1);
  }
}
@keyframes sk-bouncedelay {
  0%,
  80%,
  100% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  40% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
break-reader.pop-frame .readable[slide] {
  opacity: 0;
  transform: translateX(-100%);
}
break-reader.pop-frame .readable {
  transition: all 0.6s ease;
  transform: translateX(0);
  position: relative;
}
break-reader.pop-frame .readable a > div,
break-reader.pop-frame .readable image-view,
break-reader.pop-frame .readable .spinner {
  border-radius: 6px;
  margin: 7px 2px 7px 15px;
}
break-reader.pop-frame .text {
  padding: 12px 15px;
  background-color: white;
  max-width: calc(100% - 40px);
}
break-reader.pop-frame .action-taken[slide] {
  opacity: 0;
  transform: translateX(100%);
}
break-reader.pop-frame time.published,
break-reader.pop-frame .source,
break-reader.pop-frame .history {
  color: #4b4b4b;
  width: 100%;
  text-align: center;
  font-size: 10px;
  font-family: "open sans";
  margin: 0;
}
break-reader.pop-frame time.published {
  margin-top: 5px;
  margin-bottom: -3px;
}
break-reader.pop-frame .history {
  text-transform: uppercase;
  margin: 4px 0 14px;
  color: #4b4b4b;
}
break-reader.pop-frame .history span {
  color: #4482fd;
  border-bottom: 1px dashed #4482fd;
}
break-reader.pop-frame .source {
  margin-top: -3px;
  margin-bottom: 5px;
  text-transform: uppercase;
  user-select: none;
  -webkit-user-select: none;
}
break-reader.pop-frame .action-taken {
  transition: all 0.6s ease;
  transform: translateX(0);
  width: 100%;
}
break-reader.pop-frame .action-taken div {
  background-color: #929292;
  color: white;
  padding: 2px 10px;
  border-radius: 6px 6px 0;
  margin: 15px 15px 6px 15px;
  max-width: 80%;
  float: right;
  font-size: 11px;
}
break-reader.pop-frame .read-status[slide] {
  opacity: 0;
  transform: translateX(-100%);
}
break-reader.pop-frame .read-status {
  transition: all 0.6s ease;
  transform: translateX(0);
  display: flex;
  justify-content: center;
  user-select: none;
  -webkit-user-select: none;
  width: 100%;
}
break-reader.pop-frame .read-status div {
  color: #4b4b4b;
  padding: 2px 10px;
  border-radius: 6px 6px 0;
  margin: 0px 0 8px 0;
  max-width: 80%;
  float: left;
  font-size: 11px;
}
break-reader.pop-frame .read-status div span {
  float: left;
}
break-reader.pop-frame .read-status div a {
  display: block;
  float: left;
  color: #4482fd;
  border-bottom: 1px dashed #4482fd;
  font-size: 11px;
  margin-left: 4px;
}
break-reader.pop-frame .read-status[busy] {
  pointer-events: none;
  opacity: 0.5;
}
break-reader.pop-frame button.tiny {
  background: transparent;
  color: #808080;
  font-size: 11px;
  font-family: "open sans";
  text-transform: uppercase;
}
break-reader.pop-frame button.tiny a {
  display: block;
}
break-reader.pop-frame button.tiny svg {
  fill: #808080;
  padding-bottom: 2px;
  margin-right: 1px;
}
break-reader.pop-frame [name=open-link] svg {
  stroke: #808080;
}
break-reader.pop-frame [name=save-link] {
  display: none;
}
.authenticated break-reader.pop-frame [name=save-link] {
  display: inline;
}
break-reader[slide] {
  opacity: 0;
  transform: translateX(100%);
}
[dark] break-reader.pop-frame button.tiny svg {
  fill: #b0b0b0;
}
[dark] break-reader.pop-frame [name=open-link] svg {
  stroke: #b0b0b0;
}
[dark] break-reader.pop-frame .read-status div {
  color: #b0b0b0;
}
[dark] break-reader.pop-frame time.published,
[dark] break-reader.pop-frame .source,
[dark] break-reader.pop-frame .history {
  color: #b0b0b0;
}
[dark] break-reader.pop-frame .spinner > div {
  background-color: #b0b0b0;
}
[dark] break-reader.pop-frame section {
  background-color: black;
}
[dark] break-reader.pop-frame section [name="main"] {
  background-color: #121212;
  transition: background-color 2s;
}
[dark] break-reader.pop-frame .text,
[dark] break-reader.pop-frame .action-taken > div {
  background-color: #313131;
  color: #b1b1b1;
}
status-bar {
  position: fixed;
  top: 42px;
  top: calc(42px + env(safe-area-inset-top));
  top: calc(42px + constant(safe-area-inset-top));
  width: 100%;
  z-index: 1000000;
  height: 36px;
  transition: all 0.4s cubic-bezier(0.02, 0.01, 0.47, 1);
  opacity: 1;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  pointer-events: none;
}
status-bar div {
  width: 100%;
  color: white;
  font-size: 13px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Open Sans";
  height: 36px;
}
status-bar.show-at-top {
  top: 0;
  height: calc(36px + env(safe-area-inset-top));
  height: calc(36px + constant(safe-area-inset-top));
}
status-bar[hidden],
status-bar.show-at-top[hidden] {
  height: 0;
  opacity: 0;
}
status-bar.error {
  background-color: #d64a48;
}
status-bar.info {
  background-color: #3a3a3a;
}
mini-progress {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0px 0 6px 0;
}
mini-progress > div {
  width: 50%;
  background-color: #ebebeb;
  height: 1px;
  position: relative;
}
mini-progress > div .completed {
  position: absolute;
  background-color: #a2a2a2;
  height: 1px;
}
[dark] mini-progress > div {
  background-color: #505050;
}
stream-complete {
  display: flex;
  justify-items: center;
  width: 100%;
  align-items: center;
  flex-direction: column;
}
stream-complete h1 {
  display: flex;
  justify-items: center;
  align-items: center;
  position: relative;
  padding: 20px;
  margin-left: 61px;
}
stream-complete h1 svg {
  position: absolute;
  margin-left: -54px;
  margin-top: -17px;
}
stream-complete h1 svg #confetti path {
  opacity: 0;
}
stream-complete p {
  margin-bottom: 50px;
}
@keyframes confdash0 {
  0% {
    transform: none;
    opacity: 0;
  }
  10% {
    transform: translate(40px, -50px) rotate(700deg);
    opacity: 1;
  }
  100% {
    transform: translate(30px, 20px) rotate(800deg);
    opacity: 0;
  }
}
@keyframes confdash1 {
  0% {
    transform: none;
    opacity: 0;
  }
  8% {
    transform: translate(15px, -40px) rotate(300deg);
    opacity: 1;
  }
  100% {
    transform: translate(15px, 20px) rotate(400deg);
    opacity: 0;
  }
}
@keyframes confdash2 {
  0% {
    transform: none;
    opacity: 0;
  }
  8% {
    transform: translate(10px, -35px) rotate(800deg);
    opacity: 1;
  }
  100% {
    transform: translate(10px, 20px) rotate(700deg);
    opacity: 0;
  }
}
@keyframes confdash3 {
  0% {
    transform: none;
    opacity: 0;
  }
  9% {
    transform: translate(33px, -45px) rotate(600deg);
    opacity: 1;
  }
  100% {
    transform: translate(33px, 20px) rotate(500deg);
    opacity: 0;
  }
}
@keyframes confdash4 {
  0% {
    transform: none;
    opacity: 0;
  }
  8% {
    transform: translate(23px, -40px) rotate(400deg);
    opacity: 1;
  }
  100% {
    transform: translate(23px, 20px) rotate(300deg);
    opacity: 0;
  }
}
@keyframes confdash5 {
  0% {
    transform: none;
    opacity: 0;
  }
  10% {
    transform: translate(26px, -38px) rotate(20deg);
    opacity: 1;
  }
  100% {
    transform: translate(26px, 20px);
    opacity: 0;
  }
}
@keyframes confdash6 {
  0% {
    transform: none;
    opacity: 0;
  }
  11% {
    transform: translate(20px, -27px) rotate(400deg);
    opacity: 1;
  }
  100% {
    transform: translate(26px, 20px) rotate(500deg);
    opacity: 0;
  }
}
@keyframes confdash7 {
  0% {
    transform: none;
    opacity: 0;
  }
  9% {
    transform: translate(30px, -27px) rotate(200deg);
    opacity: 1;
  }
  100% {
    transform: translate(30px, 20px) rotate(300deg);
    opacity: 0;
  }
}
[dark] stream-complete {
  color: white;
}
story-navigator {
  position: absolute;
  bottom: 0;
  height: 55px;
  display: flex;
  justify-content: center;
  width: 100%;
  align-items: flex-end;
  color: #474f5c;
  margin-bottom: constant(safe-area-inset-bottom);
  /* iOS 11.0 */
  margin-bottom: env(safe-area-inset-bottom);
  /* iOS 11.2 */
}
@media screen and (max-width: 370px) {
  story-navigator {
    justify-content: left;
  }
  story-navigator button.bre:first-of-type {
    margin-left: 6px;
  }
}
story-navigator button,
story-navigator button:focus,
story-navigator button:active,
story-navigator button:hover {
  transition: transform cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.4s;
  background-color: #4482fd;
  color: white;
  user-select: none;
  -webkit-user-select: none;
}
story-navigator button:disabled {
  transform: translate(68px, 0);
}
story-navigator button.bre:disabled {
  transform: translate(0, 45px);
}
story-navigator button.bre {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 11px;
  font-weight: 400;
  text-transform: uppercase;
  width: auto;
  border-radius: 30px;
  margin: 10px 10px 10px 0;
  padding: 8px 20px;
}
story-navigator button[name="show-more"],
story-navigator button[name="show-more"]:hover,
story-navigator button[name="show-more"]:active {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  position: absolute;
  right: 11px;
  bottom: 11px;
  z-index: 1;
  margin-bottom: 0;
  width: 80px;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  background-color: #4482fd;
}
story-navigator button[name="show-more"] svg,
story-navigator button[name="show-more"]:hover svg,
story-navigator button[name="show-more"]:active svg {
  fill: white;
  width: 40px;
  height: auto;
  padding: 5px 4px;
}
story-navigator[busy] button[name=show-more],
story-navigator[busy] button.bre {
  pointer-events: none !important;
  background: #ccc;
  color: white;
}
[dark] story-navigator {
  transition: background-color 2s;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 70%);
}
[dark] story-navigator button {
  background-color: #313131;
  color: #b1b1b1;
}
[dark] story-navigator[busy] button[name=show-more],
[dark] story-navigator[busy] button.bre {
  pointer-events: none !important;
  background: #313131;
  color: #505050;
}
[dark] story-navigator[busy] button[name=show-more] svg,
[dark] story-navigator[busy] button.bre svg {
  fill: #505050;
}
break-pre-login section {
  padding: 10px !important;
  text-align: center;
}
break-pre-login section .blob {
  background-color: white;
  border-radius: 6px;
  width: 100%;
  padding: 10px;
  margin-bottom: 7px;
}
break-pre-login section .blob a {
  color: #4482fd;
}
break-pre-login section .blob p {
  margin: 8px 0;
}
break-pre-login section .blob [name=mockup] {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 0;
}
break-pre-login section .blob [name=mockup] svg,
break-pre-login section .blob [name=mockup] img {
  width: 60%;
  height: auto;
}
break-pre-login section .blob [name=apps] {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 0;
}
break-pre-login section .blob [name=apps] a {
  padding: 0 10px;
}
break-pre-login section .blob [name=apps] svg {
  zoom: 0.8;
}
break-pre-login section button {
  width: 100%;
  font-family: "open sans";
  text-transform: uppercase;
  font-weight: 400;
  font-size: 12px !important;
  padding: 11px !important;
}
break-settings [name=log-off] {
  display: none;
}
.authenticated break-settings [name=log-off] {
  display: block;
}
tab-menu {
  white-space: nowrap;
  display: flex;
  bottom: 0;
  background-color: white;
  flex-direction: column;
  width: 100%;
  z-index: 10000;
  box-sizing: border-box;
  height: 100%;
}
tab-menu [name=tabs] {
  border-bottom: 2px solid #eaeaea;
  height: 38px;
  display: flex;
  user-select: none;
  -webkit-user-select: none;
}
tab-menu [name=tabs] button {
  flex: 1 1 0;
  border-radius: 0;
  font-size: 13px;
  padding: 0 20px;
  color: #737373;
  border: none;
  background-color: transparent;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 0;
  font-family: -apple-system-apple-system, BlinkMacSystemFont, 'Open sans', sans-serif;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
}
tab-menu [name=tabs] button[active] {
  border-bottom-color: #d64a48;
}
tab-menu content-target {
  flex: 1 1;
  display: flex;
  overflow-x: hidden;
  overflow-y: auto;
  height: 300px;
}
.three-d-box {
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
}
body[break] header {
  background-color: #f8f8f8;
  color: black;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom: 1px solid #dedede;
  fill: black;
}
@media (min-resolution: 2dppx) {
  body[break] header {
    border-bottom-width: 0.5px;
  }
}
@media (min-resolution: 3dppx) {
  body[break] header {
    border-bottom-width: 0.33333333px;
  }
}
@media (min-resolution: 4dppx) {
  body[break] header {
    border-bottom-width: 0.25px;
  }
}
tab-content {
  background-color: #f2f3f7;
  position: absolute;
  width: 100%;
  height: calc(100% - 47px);
  top: 0;
}
tab-bar {
  white-space: nowrap;
  position: fixed;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  display: flex;
  bottom: 0;
  background-color: white;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  z-index: 10000;
  padding: 0 15px;
  box-sizing: border-box;
  user-select: none;
  -webkit-user-select: none;
  height: 49px;
  height: calc(49px + env(safe-area-inset-bottom));
  height: calc(49px + constant(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  padding-bottom: constant(safe-area-inset-bottom);
}
@media (min-resolution: 2dppx) {
  tab-bar {
    border-top-width: 0.5px;
  }
}
@media (min-resolution: 3dppx) {
  tab-bar {
    border-top-width: 0.33333333px;
  }
}
@media (min-resolution: 4dppx) {
  tab-bar {
    border-top-width: 0.25px;
  }
}
tab-bar button {
  color: #909090;
  fill: #909090;
  flex: 0 0 45px;
  border: none;
  background-color: transparent;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 10px;
  padding: 4px 0 2px 0;
  margin: 0;
  font-family: -apple-system-apple-system, BlinkMacSystemFont, 'Open sans', sans-serif;
}
tab-bar button svg {
  height: 25px;
  width: auto;
  margin: 2px;
}
tab-bar button:hover {
  background-color: transparent;
}
tab-bar button[active] {
  color: #3478f6;
}
tab-bar button[active] svg {
  fill: #3478f6;
}
tab-content {
  background-color: white;
}
[dark] tab-bar {
  background-color: black;
  border-top: 1px solid #505050;
}
[dark] tab-bar button[active] {
  color: #3478f6;
}
[dark] tab-bar button[active] svg {
  fill: #3478f6;
}
[dark] tab-content {
  background-color: black;
}
font-selector .demo {
  padding: 20px;
  width: 100%;
  text-align: center;
}
font-selector [name=font-size] .indicator:first-of-type {
  font-size: 10px;
}
font-selector [name=font-size] .indicator:last-of-type {
  font-size: 20px;
}
font-selector [name=font-size] input[type=range] {
  width: 87%;
}
font-selector [name=font-weight] .indicator {
  font-size: 16px;
}
font-selector [name=font-weight] input[type=range] {
  width: 87%;
}
font-selector fieldset.checkboxes .field {
  justify-content: flex-start;
}
font-selector fieldset.checkboxes .field svg {
  opacity: 0;
}
font-selector fieldset.checkboxes .field label {
  padding-left: 10px;
}
font-selector fieldset.checkboxes .field[selected] svg {
  opacity: 1;
}
.uni-popup {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  z-index: 10000;
}
@media screen and (max-width: 850px) {
  .uni-popup {
    background-color: white;
  }
}
.uni-popup section {
  padding-top: env(safe-area-inset-top);
  padding-top: constant(safe-area-inset-top);
  position: relative;
  width: 100%;
  max-width: 600px;
  background-color: #fafafa;
  overflow: hidden;
  max-height: 100%;
  z-index: 2000;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(156, 110, 110, 0.02), 0 13px 58px 0 rgba(0, 0, 0, 0.19);
}
@media screen and (max-width: 850px) {
  .uni-popup section {
    height: 100%;
  }
}
.uni-popup section > * {
  flex: initial;
}
.uni-popup section header {
  flex: 0 0 44px;
  height: 44px;
  width: 100%;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  background-color: white;
  border-radius: 3px 3px 0 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.uni-popup section header div.caption {
  color: rgba(0, 0, 0, 0.6);
  font-family: "open sans";
  font-size: 21px;
  font-weight: lighter;
}
.uni-popup section header div:first-of-type,
.uni-popup section header div:last-of-type {
  flex: 0 0 70px;
}
.uni-popup section header div:last-of-type {
  text-align: right;
}
.uni-popup section header button {
  border: none;
  padding: 4px;
  color: #d64a48;
  padding: 0 12px;
  font-family: sans-serif;
}
.uni-popup section header button:active {
  border: none;
}
.uni-popup section header button[disabled] {
  color: #737373;
}
.uni-popup section header button:hover {
  background: none;
}
.uni-popup section header button[forward] {
  float: right;
  margin-left: -2px;
  display: none;
  fill: #d64a48;
  align-items: center;
  padding: 0 2px;
}
.uni-popup section header button[forward] svg {
  height: 30px;
  width: auto;
  margin-left: -2px;
}
@media screen and (max-width: 850px) {
  .uni-popup section header button[forward] {
    display: flex;
  }
}
.uni-form button,
.uni-form button.power {
  border: none;
}
.uni-form .error-message {
  padding: 7px 15px 0;
}
.uni-form fieldset:first-of-type {
  margin-top: 10px;
}
.uni-form fieldset {
  padding: 10px 0;
  flex: auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.uni-form fieldset .field:first-of-type {
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}
.uni-form fieldset legend {
  padding: 10px 16px 0;
  color: #a0a0a0;
  text-transform: uppercase;
  font-size: 12px;
  margin: 0;
  line-height: 10px;
  font-weight: 100;
}
.uni-form .field.focus {
  border-left: 2px solid #d64a48;
}
.uni-form > p {
  padding: 16px 16px 0;
  flex: 0 0 55px;
  overflow: hidden;
}
.uni-form .field {
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  background-color: white;
  width: 100%;
  min-height: 44px;
  display: flex;
  padding: 0 16px;
  justify-content: space-between;
  font-size: 15px;
  align-items: center;
  padding-right: 16px;
  box-sizing: border-box;
  font-weight: 300;
  flex: 1;
}
.uni-form .field,
.uni-form .field > * {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.uni-form .field div {
  color: rgba(0, 0, 0, 0.4);
}
.uni-form .field div svg {
  fill: rgba(0, 0, 0, 0.3);
}
.uni-form .field div:first-of-type svg {
  fill: rgba(0, 0, 0, 0.2);
  margin: 0 5px 0 0;
  height: 18px;
  width: auto;
  padding-bottom: 2px;
}
.uni-form .field label,
.uni-form .field input[type=text],
.uni-form .field input[type=password],
.uni-form .field textarea {
  width: 100%;
  height: 21px;
}
.uni-form .field input[type=text],
.uni-form .field input[type=password],
.uni-form .field textarea {
  font-size: 15px;
  border: none;
  padding: 0;
  margin: 0;
  line-height: initial;
}
.uni-form .field input[type=text]::-webkit-input-placeholder,
.uni-form .field input[type=password]::-webkit-input-placeholder,
.uni-form .field textarea::-webkit-input-placeholder {
  color: rgba(0, 0, 0, 0.4);
}
.uni-form .field input[type=text]:-moz-placeholder,
.uni-form .field input[type=password]:-moz-placeholder,
.uni-form .field textarea:-moz-placeholder {
  color: rgba(0, 0, 0, 0.4);
}
.uni-form .field input[type=text]::-moz-placeholder,
.uni-form .field input[type=password]::-moz-placeholder,
.uni-form .field textarea::-moz-placeholder {
  color: rgba(0, 0, 0, 0.4);
}
.uni-form .field input[type=text]:-ms-input-placeholder,
.uni-form .field input[type=password]:-ms-input-placeholder,
.uni-form .field textarea:-ms-input-placeholder {
  color: rgba(0, 0, 0, 0.4);
}
.uni-form .field input[type=text]:placeholder-shown,
.uni-form .field input[type=password]:placeholder-shown,
.uni-form .field textarea:placeholder-shown {
  /* Standard one last! */
  color: rgba(0, 0, 0, 0.4);
}
.uni-form .field label {
  display: block;
  color: black;
  font-size: 15px;
  padding-right: 10px;
  width: auto;
}
.uni-form .field input {
  border: none;
  font-size: 15px;
}
.uni-form .field textarea {
  min-height: 60px;
  word-wrap: break-word;
  padding: 10px 0;
}
.uni-form .action {
  justify-content: flex-end;
  width: 100%;
  display: flex;
  margin: 8px 0 19px;
  flex: 0 0 32px;
}
.uni-form .action button.inactive {
  background-color: transparent;
}
.uni-form .action button {
  margin: 0 20px 0 0;
}
@media screen and (max-width: 850px) {
  .uni-form .action {
    display: none;
  }
}
rich-editor {
  height: 0;
  display: block;
  position: relative;
  height: 200px;
  overflow: hidden;
}
rich-editor textarea {
  display: none;
}
rich-editor .editor {
  padding: 5px;
  width: 100%;
  height: calc(100% - 40px);
  outline: 0;
  overflow-y: auto;
  display: block;
  box-sizing: border-box;
  cursor: text !important;
}
rich-editor .editor b {
  font-weight: bold;
}
rich-editor .editor div {
  width: 100%;
}
rich-editor .toolbar {
  width: 100%;
  float: none;
  bottom: 0;
  height: 40px;
  position: absolute;
  padding: 1px;
  border-top: 1px solid #ccc;
  align-items: center;
  display: flex;
}
rich-editor .toolbar button {
  margin: 0 !important;
  border: none;
}
rich-editor .toolbar button svg {
  fill: #aaaaaa;
}
rich-editor .toolbar button:hover {
  background: none;
}
rich-editor .toolbar button:hover svg {
  fill: black;
}
rich-editor .toolbar .char-count {
  flex: 1;
  text-align: right;
  font-family: "Open Sans";
  font-weight: 100;
  font-size: 12px;
  color: #888;
}
rich-editor .toolbar .char-count.warn {
  color: #d64a48;
}
rich-editor .toolbar [name=add-link] {
  padding: 0px 10px 3px;
}
rich-editor .toolbar [name=add-link] svg {
  height: 15px;
  padding-bottom: 2px;
}
rich-editor:focus {
  background-color: green;
}
.rich div {
  width: 100%;
}
.rich p {
  padding: none !important;
}
.rich div:after {
  content: "";
  display: table;
  clear: both;
}
.three-d-box {
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
}
feed-control {
  border-bottom: 1px solid #ebebeb;
  display: flex;
  padding: 25px 0;
  align-items: center;
}
@media (min-resolution: 2dppx) {
  feed-control {
    border-bottom-width: 0.5px;
  }
}
@media (min-resolution: 3dppx) {
  feed-control {
    border-bottom-width: 0.33333333px;
  }
}
@media (min-resolution: 4dppx) {
  feed-control {
    border-bottom-width: 0.25px;
  }
}
@media screen and (max-width: 850px) {
  feed-control {
    padding: 25px 10px;
  }
}
feed-control .details {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
feed-control .details time {
  color: #808080;
  font-size: 12px;
}
feed-control .details h2 {
  color: #4d4d4d;
  font-family: "Open Sans", "lucida grande", "Segoe UI", arial, verdana, "lucida sans unicode", tahoma, sans-serif;
  font-size: 30px;
  font-weight: 100;
  line-height: 30px;
  padding-bottom: 5px;
}
@media screen and (max-width: 850px) {
  feed-control .details h2 {
    font-size: 16px;
  }
}
feed-control .details .description {
  font-size: 18px;
  color: #333;
  white-space: pre-wrap;
  line-height: 1.4;
}
@media screen and (max-width: 850px) {
  feed-control .details .description {
    font-size: 14px;
  }
}
feed-control img {
  border-radius: 3px;
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
  flex: 0 0 40px;
  height: 40px;
  margin-right: 25px;
  width: 40px;
}
.three-d-box {
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
}
entry-control {
  border-bottom: 1px solid #ebebeb;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  justify-content: center;
  padding: 5px;
  width: 100%;
  align-items: center;
  contain: layout;
}
@media (min-resolution: 2dppx) {
  entry-control {
    border-bottom-width: 0.5px;
  }
}
@media (min-resolution: 3dppx) {
  entry-control {
    border-bottom-width: 0.33333333px;
  }
}
@media (min-resolution: 4dppx) {
  entry-control {
    border-bottom-width: 0.25px;
  }
}
@media screen and (max-width: 850px) {
  entry-control {
    padding: 0 10px;
  }
}
entry-control .full-entry {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  padding: 10px 0;
  max-width: 1024px;
  width: 100%;
  overflow: hidden;
  position: relative;
}
@media screen and (max-width: 850px) {
  entry-control .full-entry {
    padding: 10px 0;
  }
}
entry-control .full-entry img {
  flex: 0 0 40px;
  height: 40px;
  width: 40px;
  margin-right: 10px;
  border-radius: 3px;
  box-shadow: 0 0 0.5px #ccc;
}
entry-control .full-entry [name=overlay] {
  position: absolute;
  z-index: 1;
  background-repeat: no-repeat;
  background-size: cover;
  transition: opacity 0.8s;
  border-radius: 3px;
}
entry-control .full-entry[loaded] [name=overlay] {
  opacity: 0;
}
entry-control .entry {
  display: flex;
  flex-direction: column;
  flex: 1 0 0%;
  width: 100%;
}
entry-control .entry [name=top-part] {
  display: flex;
  flex: 0 0 auto;
}
entry-control .entry [name=top-part] [name=expand-entry] {
  transition: all 0.1s;
  align-content: center;
  border-radius: 50%;
  border: none;
  display: flex;
  flex: 0 0 30px;
  height: 30px;
  justify-content: center;
  margin: 0;
  padding: 0;
  width: 30px;
}
entry-control .entry [name=top-part] .intro {
  font-family: sans-serif;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
entry-control .entry [name=top-part] .intro .meta {
  flex: 0 1 auto;
  color: #808080;
  font-size: 12px;
  font-family: sans-serif;
}
entry-control .entry [name=top-part] .intro header {
  flex: 1 1 auto;
  font-size: 16px;
  font-weight: 100;
  font-size: 18px;
  font-weight: 500;
  cursor: pointer;
  font-family: sans-serif;
}
entry-control .entry [name=top-part] .intro header a {
  color: #333333;
}
@media screen and (max-width: 850px) {
  entry-control .entry [name=top-part] .intro header {
    font-size: 15px;
  }
}
entry-control .entry [name=top-part] context-menu {
  padding: 0;
  margin-right: -2px;
}
entry-control .entry [name=top-part] context-menu button {
  padding: 0;
}
entry-control .entry .summary {
  flex: 1 1 auto;
  font-size: 15px;
  line-height: 1.5;
  max-height: 99999px;
  overflow: hidden;
  padding: 3px 0 10px 0;
  transition: max-height 0.3s cubic-bezier(1, 0, 1, 0);
  cursor: pointer;
}
entry-control .body {
  flex: 0 0 auto;
  font-family: sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  max-height: 0;
  max-width: 1024px;
  overflow: hidden;
  transition: max-height 0.3s cubic-bezier(0, 1, 0, 1);
  width: 100%;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  -ms-word-break: break-all;
  -webkit-hyphens: auto;
  hyphens: auto;
  overflow-wrap: break-word;
  word-break: break-word;
  word-wrap: break-word;
}
entry-control .body i,
entry-control .body cite,
entry-control .body em,
entry-control .body var,
entry-control .body address,
entry-control .body dfn {
  font-style: italic;
}
entry-control .body p {
  margin: 15px 0;
}
entry-control .body a {
  text-decoration: underline;
  text-decoration-skip: edges;
  -webkit-text-decoration-skip: edges;
  text-underline-position: under;
}
entry-control .body img {
  max-width: 100%;
  max-height: 100%;
  padding: 15px 0;
  height: auto;
  width: auto;
}
@media screen and (max-width: 850px) {
  entry-control .body table {
    zoom: 0.7;
  }
}
entry-control .body h1,
entry-control .body h2,
entry-control .body h3,
entry-control .body h4,
entry-control .body h5,
entry-control .body h6,
entry-control .body h7 {
  font-size: 20px;
  margin-top: 30px;
  margin-bottom: 15px;
  line-height: 1.2;
}
entry-control .body h1 {
  font-size: 30px;
}
entry-control .body h2 {
  font-size: 25px;
}
entry-control .body h3 {
  font-size: 20px;
}
entry-control .body ul {
  list-style: disc;
  display: block;
  margin: 20px 40px;
  line-height: 26px;
}
entry-control .body ul li {
  padding-left: 10px;
}
entry-control .body pre {
  margin: 10px 0;
  box-sizing: border-box;
  font-family: monospace;
  overflow: auto;
}
entry-control .body tt,
entry-control .body code,
entry-control .body kbd,
entry-control .body samp {
  font-family: monospace;
}
entry-control .body code {
  overflow: auto;
  background: #eee;
  position: relative;
  font-size: 13px;
}
entry-control[open] .body {
  max-height: 9999px;
  flex: 1 1 auto;
  transition: max-height 0.3s cubic-bezier(1, 0, 1, 0);
}
entry-control[open] .summary {
  transition: max-height 0.3s cubic-bezier(0, 1, 0, 1);
  flex: 0 0 auto;
  max-height: 0;
  padding: 0;
}
entry-control[open] [name=expand-entry] {
  -webkit-transform: scaleY(-1);
  transform: scaleY(-1);
}
entry-control[read] .intro header,
entry-control[read] .intro header a {
  color: #8c8c8c !important;
}
.three-d-box {
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
}
feed-header {
  border-bottom: 1px solid #f0f0f0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  flex: 0 0;
  padding: 10px 14px 10px 20px;
  width: 100%;
  align-items: center;
}
@media (min-resolution: 2dppx) {
  feed-header {
    border-bottom-width: 0.5px;
  }
}
@media (min-resolution: 3dppx) {
  feed-header {
    border-bottom-width: 0.33333333px;
  }
}
@media (min-resolution: 4dppx) {
  feed-header {
    border-bottom-width: 0.25px;
  }
}
@media screen and (max-width: 850px) {
  feed-header {
    padding: 10px;
  }
}
feed-header [name=top-part] {
  display: flex;
  flex: 0 0;
  max-width: 1024px;
  width: 100%;
  padding: 2vh 0 10px;
}
feed-header [name=top-part] header {
  font-family: "Open Sans";
  font-size: 38px;
  font-weight: 100;
  margin-left: -6px;
  flex: 1 1;
  color: #737373;
  line-height: 1;
}
feed-header [name=top-part] context-menu button {
  padding: 0 4px;
}
feed-header section {
  max-width: 1024px;
  width: 100%;
  line-height: 1.4;
  margin-top: 10px;
  color: #737373;
  margin-left: -10px;
}
[read] feed-header {
  color: #4d4d4d;
}
feed-viewer {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  height: 100vh;
  max-height: 100%;
  overflow: auto;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0 8px;
}
feed-viewer [name=next-page] {
  opacity: 0;
}
.mix-popup .frame {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  z-index: 10000;
}
@media screen and (max-width: 850px) {
  .mix-popup .frame {
    background-color: white;
  }
}
.mix-popup .window {
  padding-top: env(safe-area-inset-top);
  padding-top: constant(safe-area-inset-top);
  position: relative;
  width: 100%;
  max-width: 600px;
  background-color: #fafafa;
  overflow: hidden;
  max-height: 100%;
  z-index: 2000;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(156, 110, 110, 0.02), 0 13px 58px 0 rgba(0, 0, 0, 0.19);
}
@media screen and (max-width: 850px) {
  .mix-popup .window {
    height: 100%;
  }
}
.mix-popup .window > * {
  flex: initial;
}
.mix-popup .window header {
  flex: 0 0 44px;
  height: 44px;
  width: 100%;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  background-color: white;
  border-radius: 3px 3px 0 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.mix-popup .window header div.caption {
  color: rgba(0, 0, 0, 0.6);
  font-family: "open sans";
  font-size: 21px;
  font-weight: lighter;
}
.mix-popup .window header div:first-of-type,
.mix-popup .window header div:last-of-type {
  flex: 0 0 70px;
}
.mix-popup .window header div:last-of-type {
  text-align: right;
}
.mix-popup .window header button {
  border: none;
  padding: 4px;
  color: #d64a48;
  padding: 0 12px;
  font-family: sans-serif;
}
.mix-popup .window header button:active {
  border: none;
}
.mix-popup .window header button[disabled] {
  color: #737373;
  fill: #737373 !important;
}
.mix-popup .window header button:hover {
  background: none;
}
.mix-popup .window header button[name=add] {
  float: right;
  margin-left: -2px;
  display: flex;
  fill: #d64a48;
  align-items: center;
  padding: 0 2px;
}
.mix-popup .window header button[name=add] svg {
  height: 30px;
  width: auto;
  margin-left: -2px;
}
.mix-form button,
.adaptive button,
.mix-form button.power,
.adaptive button.power {
  border: none;
}
.mix-form .error-message,
.adaptive .error-message {
  padding: 7px 15px 0;
}
.mix-form fieldset,
.adaptive fieldset {
  margin-top: 10px;
  padding: 10px 0;
  flex: auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.mix-form fieldset .field:first-of-type,
.adaptive fieldset .field:first-of-type {
  border-top: 1px solid #dedede;
}
@media (min-resolution: 2dppx) {
  .mix-form fieldset .field:first-of-type,
  .adaptive fieldset .field:first-of-type {
    border-top-width: 0.5px;
  }
}
@media (min-resolution: 3dppx) {
  .mix-form fieldset .field:first-of-type,
  .adaptive fieldset .field:first-of-type {
    border-top-width: 0.33333333px;
  }
}
@media (min-resolution: 4dppx) {
  .mix-form fieldset .field:first-of-type,
  .adaptive fieldset .field:first-of-type {
    border-top-width: 0.25px;
  }
}
.mix-form fieldset .field:last-of-type,
.adaptive fieldset .field:last-of-type {
  border-bottom: 1px solid #dedede;
}
@media (min-resolution: 2dppx) {
  .mix-form fieldset .field:last-of-type,
  .adaptive fieldset .field:last-of-type {
    border-bottom-width: 0.5px;
  }
}
@media (min-resolution: 3dppx) {
  .mix-form fieldset .field:last-of-type,
  .adaptive fieldset .field:last-of-type {
    border-bottom-width: 0.33333333px;
  }
}
@media (min-resolution: 4dppx) {
  .mix-form fieldset .field:last-of-type,
  .adaptive fieldset .field:last-of-type {
    border-bottom-width: 0.25px;
  }
}
.mix-form fieldset legend,
.adaptive fieldset legend {
  padding: 0 16px 0;
  color: #7c7b81;
  text-transform: uppercase;
  font-size: 12px;
}
.mix-form .field.focus,
.adaptive .field.focus {
  border-left: 2px solid #d64a48;
}
.mix-form > p,
.adaptive > p {
  padding: 16px 16px 0;
  flex: 0 0 55px;
  overflow: hidden;
}
.mix-form .field,
.adaptive .field {
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  background-color: white;
  width: 100%;
  min-height: 44px;
  display: flex;
  padding: 0 16px;
  justify-content: space-between;
  font-size: 15px;
  align-items: center;
  padding-right: 16px;
  box-sizing: border-box;
  font-weight: 300;
  flex: 1;
}
.mix-form .field,
.adaptive .field,
.mix-form .field > *,
.adaptive .field > * {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mix-form .field div,
.adaptive .field div {
  color: rgba(0, 0, 0, 0.4);
}
.mix-form .field div svg,
.adaptive .field div svg {
  fill: rgba(0, 0, 0, 0.3);
}
.mix-form .field div:first-of-type svg,
.adaptive .field div:first-of-type svg {
  fill: rgba(0, 0, 0, 0.2);
  margin: 0 5px 0 0;
  height: 18px;
  width: auto;
  padding-bottom: 2px;
}
.mix-form .field label,
.adaptive .field label,
.mix-form .field input[type=text],
.adaptive .field input[type=text],
.mix-form .field input[type=password],
.adaptive .field input[type=password],
.mix-form .field textarea,
.adaptive .field textarea {
  width: 100%;
  height: 21px;
  background-color: transparent;
}
.mix-form .field input[type=text],
.adaptive .field input[type=text],
.mix-form .field input[type=password],
.adaptive .field input[type=password],
.mix-form .field textarea,
.adaptive .field textarea {
  font-size: 15px;
  border: none;
  padding: 0;
  margin: 0;
  line-height: initial;
}
.mix-form .field input[type=text]::-webkit-input-placeholder,
.adaptive .field input[type=text]::-webkit-input-placeholder,
.mix-form .field input[type=password]::-webkit-input-placeholder,
.adaptive .field input[type=password]::-webkit-input-placeholder,
.mix-form .field textarea::-webkit-input-placeholder,
.adaptive .field textarea::-webkit-input-placeholder {
  color: rgba(0, 0, 0, 0.4);
}
.mix-form .field input[type=text]:-moz-placeholder,
.adaptive .field input[type=text]:-moz-placeholder,
.mix-form .field input[type=password]:-moz-placeholder,
.adaptive .field input[type=password]:-moz-placeholder,
.mix-form .field textarea:-moz-placeholder,
.adaptive .field textarea:-moz-placeholder {
  color: rgba(0, 0, 0, 0.4);
}
.mix-form .field input[type=text]::-moz-placeholder,
.adaptive .field input[type=text]::-moz-placeholder,
.mix-form .field input[type=password]::-moz-placeholder,
.adaptive .field input[type=password]::-moz-placeholder,
.mix-form .field textarea::-moz-placeholder,
.adaptive .field textarea::-moz-placeholder {
  color: rgba(0, 0, 0, 0.4);
}
.mix-form .field input[type=text]:-ms-input-placeholder,
.adaptive .field input[type=text]:-ms-input-placeholder,
.mix-form .field input[type=password]:-ms-input-placeholder,
.adaptive .field input[type=password]:-ms-input-placeholder,
.mix-form .field textarea:-ms-input-placeholder,
.adaptive .field textarea:-ms-input-placeholder {
  color: rgba(0, 0, 0, 0.4);
}
.mix-form .field input[type=text]:placeholder-shown,
.adaptive .field input[type=text]:placeholder-shown,
.mix-form .field input[type=password]:placeholder-shown,
.adaptive .field input[type=password]:placeholder-shown,
.mix-form .field textarea:placeholder-shown,
.adaptive .field textarea:placeholder-shown {
  /* Standard one last! */
  color: rgba(0, 0, 0, 0.4);
}
.mix-form .field label,
.adaptive .field label {
  display: block;
  color: black;
  font-size: 15px;
  padding-right: 10px;
  width: auto;
}
.mix-form .field input,
.adaptive .field input {
  border: none;
  font-size: 15px;
}
.mix-form .field textarea,
.adaptive .field textarea {
  min-height: 60px;
  word-wrap: break-word;
  padding: 10px 0;
}
.mix-form .action,
.adaptive .action {
  justify-content: flex-end;
  width: 100%;
  display: flex;
  margin: 8px 0 19px;
  flex: 0 0 32px;
}
.mix-form .action button.inactive,
.adaptive .action button.inactive {
  background-color: transparent;
}
.mix-form .action button,
.adaptive .action button {
  margin: 0 20px 0 0;
}
@media screen and (max-width: 850px) {
  .mix-form .action,
  .adaptive .action {
    display: none;
  }
}
[dark] .adaptive .field {
  background-color: #6c6c6c;
}
[dark] .adaptive .field input {
  color: #dfdfdf;
}
create-stack {
  z-index: 60000 !important;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  z-index: 10000;
}
@media screen and (max-width: 850px) {
  create-stack {
    background-color: white;
  }
}
create-stack section {
  padding-top: env(safe-area-inset-top);
  padding-top: constant(safe-area-inset-top);
  position: relative;
  width: 100%;
  max-width: 600px;
  background-color: #fafafa;
  overflow: hidden;
  max-height: 100%;
  z-index: 2000;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(156, 110, 110, 0.02), 0 13px 58px 0 rgba(0, 0, 0, 0.19);
}
@media screen and (max-width: 850px) {
  create-stack section {
    height: 100%;
  }
}
create-stack section > * {
  flex: initial;
}
create-stack section header {
  flex: 0 0 44px;
  height: 44px;
  width: 100%;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  background-color: white;
  border-radius: 3px 3px 0 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
create-stack section header div.caption {
  color: rgba(0, 0, 0, 0.6);
  font-family: "open sans";
  font-size: 21px;
  font-weight: lighter;
}
create-stack section header div:first-of-type,
create-stack section header div:last-of-type {
  flex: 0 0 70px;
}
create-stack section header div:last-of-type {
  text-align: right;
}
create-stack section header button {
  border: none;
  padding: 4px;
  color: #d64a48;
  padding: 0 12px;
  font-family: sans-serif;
}
create-stack section header button:active {
  border: none;
}
create-stack section header button[disabled] {
  color: #737373;
  fill: #737373 !important;
}
create-stack section header button:hover {
  background: none;
}
create-stack section header button[name=add] {
  float: right;
  margin-left: -2px;
  display: flex;
  fill: #d64a48;
  align-items: center;
  padding: 0 2px;
}
create-stack section header button[name=add] svg {
  height: 30px;
  width: auto;
  margin-left: -2px;
}
create-stack section button,
create-stack section button.power {
  border: none;
}
create-stack section .error-message {
  padding: 7px 15px 0;
}
create-stack section fieldset {
  margin-top: 10px;
  padding: 10px 0;
  flex: auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
create-stack section fieldset .field:first-of-type {
  border-top: 1px solid #dedede;
}
@media (min-resolution: 2dppx) {
  create-stack section fieldset .field:first-of-type {
    border-top-width: 0.5px;
  }
}
@media (min-resolution: 3dppx) {
  create-stack section fieldset .field:first-of-type {
    border-top-width: 0.33333333px;
  }
}
@media (min-resolution: 4dppx) {
  create-stack section fieldset .field:first-of-type {
    border-top-width: 0.25px;
  }
}
create-stack section fieldset .field:last-of-type {
  border-bottom: 1px solid #dedede;
}
@media (min-resolution: 2dppx) {
  create-stack section fieldset .field:last-of-type {
    border-bottom-width: 0.5px;
  }
}
@media (min-resolution: 3dppx) {
  create-stack section fieldset .field:last-of-type {
    border-bottom-width: 0.33333333px;
  }
}
@media (min-resolution: 4dppx) {
  create-stack section fieldset .field:last-of-type {
    border-bottom-width: 0.25px;
  }
}
create-stack section fieldset legend {
  padding: 0 16px 0;
  color: #7c7b81;
  text-transform: uppercase;
  font-size: 12px;
}
create-stack section .field.focus {
  border-left: 2px solid #d64a48;
}
create-stack section > p {
  padding: 16px 16px 0;
  flex: 0 0 55px;
  overflow: hidden;
}
create-stack section .field {
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  background-color: white;
  width: 100%;
  min-height: 44px;
  display: flex;
  padding: 0 16px;
  justify-content: space-between;
  font-size: 15px;
  align-items: center;
  padding-right: 16px;
  box-sizing: border-box;
  font-weight: 300;
  flex: 1;
}
create-stack section .field,
create-stack section .field > * {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
create-stack section .field div {
  color: rgba(0, 0, 0, 0.4);
}
create-stack section .field div svg {
  fill: rgba(0, 0, 0, 0.3);
}
create-stack section .field div:first-of-type svg {
  fill: rgba(0, 0, 0, 0.2);
  margin: 0 5px 0 0;
  height: 18px;
  width: auto;
  padding-bottom: 2px;
}
create-stack section .field label,
create-stack section .field input[type=text],
create-stack section .field input[type=password],
create-stack section .field textarea {
  width: 100%;
  height: 21px;
  background-color: transparent;
}
create-stack section .field input[type=text],
create-stack section .field input[type=password],
create-stack section .field textarea {
  font-size: 15px;
  border: none;
  padding: 0;
  margin: 0;
  line-height: initial;
}
create-stack section .field input[type=text]::-webkit-input-placeholder,
create-stack section .field input[type=password]::-webkit-input-placeholder,
create-stack section .field textarea::-webkit-input-placeholder {
  color: rgba(0, 0, 0, 0.4);
}
create-stack section .field input[type=text]:-moz-placeholder,
create-stack section .field input[type=password]:-moz-placeholder,
create-stack section .field textarea:-moz-placeholder {
  color: rgba(0, 0, 0, 0.4);
}
create-stack section .field input[type=text]::-moz-placeholder,
create-stack section .field input[type=password]::-moz-placeholder,
create-stack section .field textarea::-moz-placeholder {
  color: rgba(0, 0, 0, 0.4);
}
create-stack section .field input[type=text]:-ms-input-placeholder,
create-stack section .field input[type=password]:-ms-input-placeholder,
create-stack section .field textarea:-ms-input-placeholder {
  color: rgba(0, 0, 0, 0.4);
}
create-stack section .field input[type=text]:placeholder-shown,
create-stack section .field input[type=password]:placeholder-shown,
create-stack section .field textarea:placeholder-shown {
  /* Standard one last! */
  color: rgba(0, 0, 0, 0.4);
}
create-stack section .field label {
  display: block;
  color: black;
  font-size: 15px;
  padding-right: 10px;
  width: auto;
}
create-stack section .field input {
  border: none;
  font-size: 15px;
}
create-stack section .field textarea {
  min-height: 60px;
  word-wrap: break-word;
  padding: 10px 0;
}
create-stack section .action {
  justify-content: flex-end;
  width: 100%;
  display: flex;
  margin: 8px 0 19px;
  flex: 0 0 32px;
}
create-stack section .action button.inactive {
  background-color: transparent;
}
create-stack section .action button {
  margin: 0 20px 0 0;
}
@media screen and (max-width: 850px) {
  create-stack section .action {
    display: none;
  }
}
.mix-popup .frame {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  z-index: 10000;
}
@media screen and (max-width: 850px) {
  .mix-popup .frame {
    background-color: white;
  }
}
.mix-popup .window {
  padding-top: env(safe-area-inset-top);
  padding-top: constant(safe-area-inset-top);
  position: relative;
  width: 100%;
  max-width: 600px;
  background-color: #fafafa;
  overflow: hidden;
  max-height: 100%;
  z-index: 2000;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(156, 110, 110, 0.02), 0 13px 58px 0 rgba(0, 0, 0, 0.19);
}
@media screen and (max-width: 850px) {
  .mix-popup .window {
    height: 100%;
  }
}
.mix-popup .window > * {
  flex: initial;
}
.mix-popup .window header {
  flex: 0 0 44px;
  height: 44px;
  width: 100%;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  background-color: white;
  border-radius: 3px 3px 0 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.mix-popup .window header div.caption {
  color: rgba(0, 0, 0, 0.6);
  font-family: "open sans";
  font-size: 21px;
  font-weight: lighter;
}
.mix-popup .window header div:first-of-type,
.mix-popup .window header div:last-of-type {
  flex: 0 0 70px;
}
.mix-popup .window header div:last-of-type {
  text-align: right;
}
.mix-popup .window header button {
  border: none;
  padding: 4px;
  color: #d64a48;
  padding: 0 12px;
  font-family: sans-serif;
}
.mix-popup .window header button:active {
  border: none;
}
.mix-popup .window header button[disabled] {
  color: #737373;
  fill: #737373 !important;
}
.mix-popup .window header button:hover {
  background: none;
}
.mix-popup .window header button[name=add] {
  float: right;
  margin-left: -2px;
  display: flex;
  fill: #d64a48;
  align-items: center;
  padding: 0 2px;
}
.mix-popup .window header button[name=add] svg {
  height: 30px;
  width: auto;
  margin-left: -2px;
}
.mix-form button,
.adaptive button,
.mix-form button.power,
.adaptive button.power {
  border: none;
}
.mix-form .error-message,
.adaptive .error-message {
  padding: 7px 15px 0;
}
.mix-form fieldset,
.adaptive fieldset {
  margin-top: 10px;
  padding: 10px 0;
  flex: auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.mix-form fieldset .field:first-of-type,
.adaptive fieldset .field:first-of-type {
  border-top: 1px solid #dedede;
}
@media (min-resolution: 2dppx) {
  .mix-form fieldset .field:first-of-type,
  .adaptive fieldset .field:first-of-type {
    border-top-width: 0.5px;
  }
}
@media (min-resolution: 3dppx) {
  .mix-form fieldset .field:first-of-type,
  .adaptive fieldset .field:first-of-type {
    border-top-width: 0.33333333px;
  }
}
@media (min-resolution: 4dppx) {
  .mix-form fieldset .field:first-of-type,
  .adaptive fieldset .field:first-of-type {
    border-top-width: 0.25px;
  }
}
.mix-form fieldset .field:last-of-type,
.adaptive fieldset .field:last-of-type {
  border-bottom: 1px solid #dedede;
}
@media (min-resolution: 2dppx) {
  .mix-form fieldset .field:last-of-type,
  .adaptive fieldset .field:last-of-type {
    border-bottom-width: 0.5px;
  }
}
@media (min-resolution: 3dppx) {
  .mix-form fieldset .field:last-of-type,
  .adaptive fieldset .field:last-of-type {
    border-bottom-width: 0.33333333px;
  }
}
@media (min-resolution: 4dppx) {
  .mix-form fieldset .field:last-of-type,
  .adaptive fieldset .field:last-of-type {
    border-bottom-width: 0.25px;
  }
}
.mix-form fieldset legend,
.adaptive fieldset legend {
  padding: 0 16px 0;
  color: #7c7b81;
  text-transform: uppercase;
  font-size: 12px;
}
.mix-form .field.focus,
.adaptive .field.focus {
  border-left: 2px solid #d64a48;
}
.mix-form > p,
.adaptive > p {
  padding: 16px 16px 0;
  flex: 0 0 55px;
  overflow: hidden;
}
.mix-form .field,
.adaptive .field {
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  background-color: white;
  width: 100%;
  min-height: 44px;
  display: flex;
  padding: 0 16px;
  justify-content: space-between;
  font-size: 15px;
  align-items: center;
  padding-right: 16px;
  box-sizing: border-box;
  font-weight: 300;
  flex: 1;
}
.mix-form .field,
.adaptive .field,
.mix-form .field > *,
.adaptive .field > * {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mix-form .field div,
.adaptive .field div {
  color: rgba(0, 0, 0, 0.4);
}
.mix-form .field div svg,
.adaptive .field div svg {
  fill: rgba(0, 0, 0, 0.3);
}
.mix-form .field div:first-of-type svg,
.adaptive .field div:first-of-type svg {
  fill: rgba(0, 0, 0, 0.2);
  margin: 0 5px 0 0;
  height: 18px;
  width: auto;
  padding-bottom: 2px;
}
.mix-form .field label,
.adaptive .field label,
.mix-form .field input[type=text],
.adaptive .field input[type=text],
.mix-form .field input[type=password],
.adaptive .field input[type=password],
.mix-form .field textarea,
.adaptive .field textarea {
  width: 100%;
  height: 21px;
  background-color: transparent;
}
.mix-form .field input[type=text],
.adaptive .field input[type=text],
.mix-form .field input[type=password],
.adaptive .field input[type=password],
.mix-form .field textarea,
.adaptive .field textarea {
  font-size: 15px;
  border: none;
  padding: 0;
  margin: 0;
  line-height: initial;
}
.mix-form .field input[type=text]::-webkit-input-placeholder,
.adaptive .field input[type=text]::-webkit-input-placeholder,
.mix-form .field input[type=password]::-webkit-input-placeholder,
.adaptive .field input[type=password]::-webkit-input-placeholder,
.mix-form .field textarea::-webkit-input-placeholder,
.adaptive .field textarea::-webkit-input-placeholder {
  color: rgba(0, 0, 0, 0.4);
}
.mix-form .field input[type=text]:-moz-placeholder,
.adaptive .field input[type=text]:-moz-placeholder,
.mix-form .field input[type=password]:-moz-placeholder,
.adaptive .field input[type=password]:-moz-placeholder,
.mix-form .field textarea:-moz-placeholder,
.adaptive .field textarea:-moz-placeholder {
  color: rgba(0, 0, 0, 0.4);
}
.mix-form .field input[type=text]::-moz-placeholder,
.adaptive .field input[type=text]::-moz-placeholder,
.mix-form .field input[type=password]::-moz-placeholder,
.adaptive .field input[type=password]::-moz-placeholder,
.mix-form .field textarea::-moz-placeholder,
.adaptive .field textarea::-moz-placeholder {
  color: rgba(0, 0, 0, 0.4);
}
.mix-form .field input[type=text]:-ms-input-placeholder,
.adaptive .field input[type=text]:-ms-input-placeholder,
.mix-form .field input[type=password]:-ms-input-placeholder,
.adaptive .field input[type=password]:-ms-input-placeholder,
.mix-form .field textarea:-ms-input-placeholder,
.adaptive .field textarea:-ms-input-placeholder {
  color: rgba(0, 0, 0, 0.4);
}
.mix-form .field input[type=text]:placeholder-shown,
.adaptive .field input[type=text]:placeholder-shown,
.mix-form .field input[type=password]:placeholder-shown,
.adaptive .field input[type=password]:placeholder-shown,
.mix-form .field textarea:placeholder-shown,
.adaptive .field textarea:placeholder-shown {
  /* Standard one last! */
  color: rgba(0, 0, 0, 0.4);
}
.mix-form .field label,
.adaptive .field label {
  display: block;
  color: black;
  font-size: 15px;
  padding-right: 10px;
  width: auto;
}
.mix-form .field input,
.adaptive .field input {
  border: none;
  font-size: 15px;
}
.mix-form .field textarea,
.adaptive .field textarea {
  min-height: 60px;
  word-wrap: break-word;
  padding: 10px 0;
}
.mix-form .action,
.adaptive .action {
  justify-content: flex-end;
  width: 100%;
  display: flex;
  margin: 8px 0 19px;
  flex: 0 0 32px;
}
.mix-form .action button.inactive,
.adaptive .action button.inactive {
  background-color: transparent;
}
.mix-form .action button,
.adaptive .action button {
  margin: 0 20px 0 0;
}
@media screen and (max-width: 850px) {
  .mix-form .action,
  .adaptive .action {
    display: none;
  }
}
[dark] .adaptive .field {
  background-color: #6c6c6c;
}
[dark] .adaptive .field input {
  color: #dfdfdf;
}
stack-selector-2 {
  z-index: 50000 !important;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  z-index: 10000;
}
@media screen and (max-width: 850px) {
  stack-selector-2 {
    background-color: white;
  }
}
stack-selector-2 section {
  padding-top: env(safe-area-inset-top);
  padding-top: constant(safe-area-inset-top);
  position: relative;
  width: 100%;
  max-width: 600px;
  background-color: #fafafa;
  overflow: hidden;
  max-height: 100%;
  z-index: 2000;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(156, 110, 110, 0.02), 0 13px 58px 0 rgba(0, 0, 0, 0.19);
  display: flex;
  flex-direction: column;
}
@media screen and (max-width: 850px) {
  stack-selector-2 section {
    height: 100%;
  }
}
stack-selector-2 section > * {
  flex: initial;
}
stack-selector-2 section header {
  flex: 0 0 44px;
  height: 44px;
  width: 100%;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  background-color: white;
  border-radius: 3px 3px 0 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
stack-selector-2 section header div.caption {
  color: rgba(0, 0, 0, 0.6);
  font-family: "open sans";
  font-size: 21px;
  font-weight: lighter;
}
stack-selector-2 section header div:first-of-type,
stack-selector-2 section header div:last-of-type {
  flex: 0 0 70px;
}
stack-selector-2 section header div:last-of-type {
  text-align: right;
}
stack-selector-2 section header button {
  border: none;
  padding: 4px;
  color: #d64a48;
  padding: 0 12px;
  font-family: sans-serif;
}
stack-selector-2 section header button:active {
  border: none;
}
stack-selector-2 section header button[disabled] {
  color: #737373;
  fill: #737373 !important;
}
stack-selector-2 section header button:hover {
  background: none;
}
stack-selector-2 section header button[name=add] {
  float: right;
  margin-left: -2px;
  display: flex;
  fill: #d64a48;
  align-items: center;
  padding: 0 2px;
}
stack-selector-2 section header button[name=add] svg {
  height: 30px;
  width: auto;
  margin-left: -2px;
}
stack-selector-2 section button,
stack-selector-2 section button.power {
  border: none;
}
stack-selector-2 section .error-message {
  padding: 7px 15px 0;
}
stack-selector-2 section fieldset {
  margin-top: 10px;
  padding: 10px 0;
  flex: auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
stack-selector-2 section fieldset .field:first-of-type {
  border-top: 1px solid #dedede;
}
@media (min-resolution: 2dppx) {
  stack-selector-2 section fieldset .field:first-of-type {
    border-top-width: 0.5px;
  }
}
@media (min-resolution: 3dppx) {
  stack-selector-2 section fieldset .field:first-of-type {
    border-top-width: 0.33333333px;
  }
}
@media (min-resolution: 4dppx) {
  stack-selector-2 section fieldset .field:first-of-type {
    border-top-width: 0.25px;
  }
}
stack-selector-2 section fieldset .field:last-of-type {
  border-bottom: 1px solid #dedede;
}
@media (min-resolution: 2dppx) {
  stack-selector-2 section fieldset .field:last-of-type {
    border-bottom-width: 0.5px;
  }
}
@media (min-resolution: 3dppx) {
  stack-selector-2 section fieldset .field:last-of-type {
    border-bottom-width: 0.33333333px;
  }
}
@media (min-resolution: 4dppx) {
  stack-selector-2 section fieldset .field:last-of-type {
    border-bottom-width: 0.25px;
  }
}
stack-selector-2 section fieldset legend {
  padding: 0 16px 0;
  color: #7c7b81;
  text-transform: uppercase;
  font-size: 12px;
}
stack-selector-2 section .field.focus {
  border-left: 2px solid #d64a48;
}
stack-selector-2 section > p {
  padding: 16px 16px 0;
  flex: 0 0 55px;
  overflow: hidden;
}
stack-selector-2 section .field {
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  background-color: white;
  width: 100%;
  min-height: 44px;
  display: flex;
  padding: 0 16px;
  justify-content: space-between;
  font-size: 15px;
  align-items: center;
  padding-right: 16px;
  box-sizing: border-box;
  font-weight: 300;
  flex: 1;
}
stack-selector-2 section .field,
stack-selector-2 section .field > * {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
stack-selector-2 section .field div {
  color: rgba(0, 0, 0, 0.4);
}
stack-selector-2 section .field div svg {
  fill: rgba(0, 0, 0, 0.3);
}
stack-selector-2 section .field div:first-of-type svg {
  fill: rgba(0, 0, 0, 0.2);
  margin: 0 5px 0 0;
  height: 18px;
  width: auto;
  padding-bottom: 2px;
}
stack-selector-2 section .field label,
stack-selector-2 section .field input[type=text],
stack-selector-2 section .field input[type=password],
stack-selector-2 section .field textarea {
  width: 100%;
  height: 21px;
  background-color: transparent;
}
stack-selector-2 section .field input[type=text],
stack-selector-2 section .field input[type=password],
stack-selector-2 section .field textarea {
  font-size: 15px;
  border: none;
  padding: 0;
  margin: 0;
  line-height: initial;
}
stack-selector-2 section .field input[type=text]::-webkit-input-placeholder,
stack-selector-2 section .field input[type=password]::-webkit-input-placeholder,
stack-selector-2 section .field textarea::-webkit-input-placeholder {
  color: rgba(0, 0, 0, 0.4);
}
stack-selector-2 section .field input[type=text]:-moz-placeholder,
stack-selector-2 section .field input[type=password]:-moz-placeholder,
stack-selector-2 section .field textarea:-moz-placeholder {
  color: rgba(0, 0, 0, 0.4);
}
stack-selector-2 section .field input[type=text]::-moz-placeholder,
stack-selector-2 section .field input[type=password]::-moz-placeholder,
stack-selector-2 section .field textarea::-moz-placeholder {
  color: rgba(0, 0, 0, 0.4);
}
stack-selector-2 section .field input[type=text]:-ms-input-placeholder,
stack-selector-2 section .field input[type=password]:-ms-input-placeholder,
stack-selector-2 section .field textarea:-ms-input-placeholder {
  color: rgba(0, 0, 0, 0.4);
}
stack-selector-2 section .field input[type=text]:placeholder-shown,
stack-selector-2 section .field input[type=password]:placeholder-shown,
stack-selector-2 section .field textarea:placeholder-shown {
  /* Standard one last! */
  color: rgba(0, 0, 0, 0.4);
}
stack-selector-2 section .field label {
  display: block;
  color: black;
  font-size: 15px;
  padding-right: 10px;
  width: auto;
}
stack-selector-2 section .field input {
  border: none;
  font-size: 15px;
}
stack-selector-2 section .field textarea {
  min-height: 60px;
  word-wrap: break-word;
  padding: 10px 0;
}
stack-selector-2 section .action {
  justify-content: flex-end;
  width: 100%;
  display: flex;
  margin: 8px 0 19px;
  flex: 0 0 32px;
}
stack-selector-2 section .action button.inactive {
  background-color: transparent;
}
stack-selector-2 section .action button {
  margin: 0 20px 0 0;
}
@media screen and (max-width: 850px) {
  stack-selector-2 section .action {
    display: none;
  }
}
stack-selector-2 section .description {
  font-family: "Open Sans";
  font-weight: 400;
}
stack-selector-2 section .description span {
  font-family: "Open Sans";
  font-weight: 300;
  color: #333;
}
stack-selector-2 section .scroll [active],
stack-selector-2 section .fixed [active],
stack-selector-2 section .scroll [active] *,
stack-selector-2 section .fixed [active] * {
  cursor: pointer;
}
stack-selector-2 section .scroll :not([selected]) svg,
stack-selector-2 section .fixed :not([selected]) svg {
  display: none;
}
stack-selector-2 section .scroll svg,
stack-selector-2 section .fixed svg {
  fill: rgba(0, 0, 0, 0.6);
}
stack-selector-2 section .fixed .field {
  font-weight: 400;
}
stack-selector-2 section .scroll {
  overflow-y: scroll;
}
@media screen and (max-width: 850px) {
}
stack-selector-2 section .scroll .field:first-of-type {
  border-top: none;
}
stack-selector-2 section .scroll .field label {
  color: rgba(0, 0, 0, 0.7);
}
stack-selector-2 section [name=search-field],
stack-selector-2 section [name=create-field] {
  flex: 0 0 44px;
}
stack-selector-2 section [name=search-field] div,
stack-selector-2 section [name=create-field] div {
  width: 100%;
}
stack-selector-2 section [name=search-field] div input,
stack-selector-2 section [name=create-field] div input {
  width: calc(100% - 28px);
}
stack-selector-2 section [name=search-field] {
  margin-bottom: 6px;
}
stack-selector-2 section [name=create-field] {
  margin-top: 10px;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}
.mix-popup .frame {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  z-index: 10000;
}
@media screen and (max-width: 850px) {
  .mix-popup .frame {
    background-color: white;
  }
}
.mix-popup .window {
  padding-top: env(safe-area-inset-top);
  padding-top: constant(safe-area-inset-top);
  position: relative;
  width: 100%;
  max-width: 600px;
  background-color: #fafafa;
  overflow: hidden;
  max-height: 100%;
  z-index: 2000;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(156, 110, 110, 0.02), 0 13px 58px 0 rgba(0, 0, 0, 0.19);
}
@media screen and (max-width: 850px) {
  .mix-popup .window {
    height: 100%;
  }
}
.mix-popup .window > * {
  flex: initial;
}
.mix-popup .window header {
  flex: 0 0 44px;
  height: 44px;
  width: 100%;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  background-color: white;
  border-radius: 3px 3px 0 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.mix-popup .window header div.caption {
  color: rgba(0, 0, 0, 0.6);
  font-family: "open sans";
  font-size: 21px;
  font-weight: lighter;
}
.mix-popup .window header div:first-of-type,
.mix-popup .window header div:last-of-type {
  flex: 0 0 70px;
}
.mix-popup .window header div:last-of-type {
  text-align: right;
}
.mix-popup .window header button {
  border: none;
  padding: 4px;
  color: #d64a48;
  padding: 0 12px;
  font-family: sans-serif;
}
.mix-popup .window header button:active {
  border: none;
}
.mix-popup .window header button[disabled] {
  color: #737373;
  fill: #737373 !important;
}
.mix-popup .window header button:hover {
  background: none;
}
.mix-popup .window header button[name=add] {
  float: right;
  margin-left: -2px;
  display: flex;
  fill: #d64a48;
  align-items: center;
  padding: 0 2px;
}
.mix-popup .window header button[name=add] svg {
  height: 30px;
  width: auto;
  margin-left: -2px;
}
.mix-form button,
.adaptive button,
.mix-form button.power,
.adaptive button.power {
  border: none;
}
.mix-form .error-message,
.adaptive .error-message {
  padding: 7px 15px 0;
}
.mix-form fieldset,
.adaptive fieldset {
  margin-top: 10px;
  padding: 10px 0;
  flex: auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.mix-form fieldset .field:first-of-type,
.adaptive fieldset .field:first-of-type {
  border-top: 1px solid #dedede;
}
@media (min-resolution: 2dppx) {
  .mix-form fieldset .field:first-of-type,
  .adaptive fieldset .field:first-of-type {
    border-top-width: 0.5px;
  }
}
@media (min-resolution: 3dppx) {
  .mix-form fieldset .field:first-of-type,
  .adaptive fieldset .field:first-of-type {
    border-top-width: 0.33333333px;
  }
}
@media (min-resolution: 4dppx) {
  .mix-form fieldset .field:first-of-type,
  .adaptive fieldset .field:first-of-type {
    border-top-width: 0.25px;
  }
}
.mix-form fieldset .field:last-of-type,
.adaptive fieldset .field:last-of-type {
  border-bottom: 1px solid #dedede;
}
@media (min-resolution: 2dppx) {
  .mix-form fieldset .field:last-of-type,
  .adaptive fieldset .field:last-of-type {
    border-bottom-width: 0.5px;
  }
}
@media (min-resolution: 3dppx) {
  .mix-form fieldset .field:last-of-type,
  .adaptive fieldset .field:last-of-type {
    border-bottom-width: 0.33333333px;
  }
}
@media (min-resolution: 4dppx) {
  .mix-form fieldset .field:last-of-type,
  .adaptive fieldset .field:last-of-type {
    border-bottom-width: 0.25px;
  }
}
.mix-form fieldset legend,
.adaptive fieldset legend {
  padding: 0 16px 0;
  color: #7c7b81;
  text-transform: uppercase;
  font-size: 12px;
}
.mix-form .field.focus,
.adaptive .field.focus {
  border-left: 2px solid #d64a48;
}
.mix-form > p,
.adaptive > p {
  padding: 16px 16px 0;
  flex: 0 0 55px;
  overflow: hidden;
}
.mix-form .field,
.adaptive .field {
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  background-color: white;
  width: 100%;
  min-height: 44px;
  display: flex;
  padding: 0 16px;
  justify-content: space-between;
  font-size: 15px;
  align-items: center;
  padding-right: 16px;
  box-sizing: border-box;
  font-weight: 300;
  flex: 1;
}
.mix-form .field,
.adaptive .field,
.mix-form .field > *,
.adaptive .field > * {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mix-form .field div,
.adaptive .field div {
  color: rgba(0, 0, 0, 0.4);
}
.mix-form .field div svg,
.adaptive .field div svg {
  fill: rgba(0, 0, 0, 0.3);
}
.mix-form .field div:first-of-type svg,
.adaptive .field div:first-of-type svg {
  fill: rgba(0, 0, 0, 0.2);
  margin: 0 5px 0 0;
  height: 18px;
  width: auto;
  padding-bottom: 2px;
}
.mix-form .field label,
.adaptive .field label,
.mix-form .field input[type=text],
.adaptive .field input[type=text],
.mix-form .field input[type=password],
.adaptive .field input[type=password],
.mix-form .field textarea,
.adaptive .field textarea {
  width: 100%;
  height: 21px;
  background-color: transparent;
}
.mix-form .field input[type=text],
.adaptive .field input[type=text],
.mix-form .field input[type=password],
.adaptive .field input[type=password],
.mix-form .field textarea,
.adaptive .field textarea {
  font-size: 15px;
  border: none;
  padding: 0;
  margin: 0;
  line-height: initial;
}
.mix-form .field input[type=text]::-webkit-input-placeholder,
.adaptive .field input[type=text]::-webkit-input-placeholder,
.mix-form .field input[type=password]::-webkit-input-placeholder,
.adaptive .field input[type=password]::-webkit-input-placeholder,
.mix-form .field textarea::-webkit-input-placeholder,
.adaptive .field textarea::-webkit-input-placeholder {
  color: rgba(0, 0, 0, 0.4);
}
.mix-form .field input[type=text]:-moz-placeholder,
.adaptive .field input[type=text]:-moz-placeholder,
.mix-form .field input[type=password]:-moz-placeholder,
.adaptive .field input[type=password]:-moz-placeholder,
.mix-form .field textarea:-moz-placeholder,
.adaptive .field textarea:-moz-placeholder {
  color: rgba(0, 0, 0, 0.4);
}
.mix-form .field input[type=text]::-moz-placeholder,
.adaptive .field input[type=text]::-moz-placeholder,
.mix-form .field input[type=password]::-moz-placeholder,
.adaptive .field input[type=password]::-moz-placeholder,
.mix-form .field textarea::-moz-placeholder,
.adaptive .field textarea::-moz-placeholder {
  color: rgba(0, 0, 0, 0.4);
}
.mix-form .field input[type=text]:-ms-input-placeholder,
.adaptive .field input[type=text]:-ms-input-placeholder,
.mix-form .field input[type=password]:-ms-input-placeholder,
.adaptive .field input[type=password]:-ms-input-placeholder,
.mix-form .field textarea:-ms-input-placeholder,
.adaptive .field textarea:-ms-input-placeholder {
  color: rgba(0, 0, 0, 0.4);
}
.mix-form .field input[type=text]:placeholder-shown,
.adaptive .field input[type=text]:placeholder-shown,
.mix-form .field input[type=password]:placeholder-shown,
.adaptive .field input[type=password]:placeholder-shown,
.mix-form .field textarea:placeholder-shown,
.adaptive .field textarea:placeholder-shown {
  /* Standard one last! */
  color: rgba(0, 0, 0, 0.4);
}
.mix-form .field label,
.adaptive .field label {
  display: block;
  color: black;
  font-size: 15px;
  padding-right: 10px;
  width: auto;
}
.mix-form .field input,
.adaptive .field input {
  border: none;
  font-size: 15px;
}
.mix-form .field textarea,
.adaptive .field textarea {
  min-height: 60px;
  word-wrap: break-word;
  padding: 10px 0;
}
.mix-form .action,
.adaptive .action {
  justify-content: flex-end;
  width: 100%;
  display: flex;
  margin: 8px 0 19px;
  flex: 0 0 32px;
}
.mix-form .action button.inactive,
.adaptive .action button.inactive {
  background-color: transparent;
}
.mix-form .action button,
.adaptive .action button {
  margin: 0 20px 0 0;
}
@media screen and (max-width: 850px) {
  .mix-form .action,
  .adaptive .action {
    display: none;
  }
}
[dark] .adaptive .field {
  background-color: #6c6c6c;
}
[dark] .adaptive .field input {
  color: #dfdfdf;
}
stack-indicator {
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  background-color: white;
  width: 100%;
  min-height: 44px;
  display: flex;
  padding: 0 16px;
  justify-content: space-between;
  font-size: 15px;
  align-items: center;
  padding-right: 16px;
  box-sizing: border-box;
  font-weight: 300;
  flex: 1;
  cursor: pointer;
}
stack-indicator,
stack-indicator > * {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
stack-indicator div {
  color: rgba(0, 0, 0, 0.4);
}
stack-indicator div svg {
  fill: rgba(0, 0, 0, 0.3);
}
stack-indicator div:first-of-type svg {
  fill: rgba(0, 0, 0, 0.2);
  margin: 0 5px 0 0;
  height: 18px;
  width: auto;
  padding-bottom: 2px;
}
stack-indicator label,
stack-indicator input[type=text],
stack-indicator input[type=password],
stack-indicator textarea {
  width: 100%;
  height: 21px;
  background-color: transparent;
}
stack-indicator input[type=text],
stack-indicator input[type=password],
stack-indicator textarea {
  font-size: 15px;
  border: none;
  padding: 0;
  margin: 0;
  line-height: initial;
}
stack-indicator input[type=text]::-webkit-input-placeholder,
stack-indicator input[type=password]::-webkit-input-placeholder,
stack-indicator textarea::-webkit-input-placeholder {
  color: rgba(0, 0, 0, 0.4);
}
stack-indicator input[type=text]:-moz-placeholder,
stack-indicator input[type=password]:-moz-placeholder,
stack-indicator textarea:-moz-placeholder {
  color: rgba(0, 0, 0, 0.4);
}
stack-indicator input[type=text]::-moz-placeholder,
stack-indicator input[type=password]::-moz-placeholder,
stack-indicator textarea::-moz-placeholder {
  color: rgba(0, 0, 0, 0.4);
}
stack-indicator input[type=text]:-ms-input-placeholder,
stack-indicator input[type=password]:-ms-input-placeholder,
stack-indicator textarea:-ms-input-placeholder {
  color: rgba(0, 0, 0, 0.4);
}
stack-indicator input[type=text]:placeholder-shown,
stack-indicator input[type=password]:placeholder-shown,
stack-indicator textarea:placeholder-shown {
  /* Standard one last! */
  color: rgba(0, 0, 0, 0.4);
}
stack-indicator label {
  display: block;
  color: black;
  font-size: 15px;
  padding-right: 10px;
  width: auto;
}
stack-indicator input {
  border: none;
  font-size: 15px;
}
stack-indicator textarea {
  min-height: 60px;
  word-wrap: break-word;
  padding: 10px 0;
}
stack-indicator div {
  text-align: right;
  flex: 1;
}
stack-indicator svg {
  fill: rgba(0, 0, 0, 0.4);
  margin-right: -7px;
  margin-left: 2px;
}
switch-button {
  width: 42px;
  height: 12px;
  z-index: 0;
  margin: 0;
  padding: 6.5px 11px;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  border: none;
  cursor: pointer;
  position: relative;
  border-radius: 16px;
  -moz-border-radius: 16px;
  -webkit-border-radius: 16px;
}
switch-button span {
  color: rgba(0, 0, 0, 0.5);
  font-size: 12px;
  line-height: 14px;
  display: block;
  position: absolute;
  z-index: 1;
  -webkit-transition-duration: 500ms;
  -moz-transition-duration: 500ms;
  -o-transition-duration: 500ms;
  transition-duration: 500ms;
}
switch-button span.off {
  text-indent: 20px;
}
switch-button span:first-of-type {
  opacity: 0;
}
switch-button[checked] span:first-of-type {
  opacity: 1;
  color: white;
}
switch-button[checked] span.off {
  opacity: 0;
}
switch-button:before {
  width: 60px;
  height: 24px;
  background: rgba(0, 0, 0, 0.1);
  content: ' ';
  position: absolute;
  left: 1px;
  top: 1px;
  z-index: 1;
  border-radius: 16px;
  -moz-border-radius: 16px;
  -webkit-border-radius: 16px;
}
switch-button[checked]:before {
  width: 60px;
  height: 24px;
  background: #d64a48;
}
switch-button:after {
  height: 20px;
  width: 20px;
  background: white;
  content: ' ';
  border-radius: 50%;
  position: absolute;
  z-index: 2;
  top: 3px;
  left: 3px;
  -webkit-transition-duration: 300ms;
  -moz-transition-duration: 300ms;
  -o-transition-duration: 300ms;
  transition-duration: 300ms;
}
switch-button[checked]:after {
  left: 38px !important;
}
[break] switch-button[checked]:before {
  background: #4482fd;
}
[dark] switch-button[checked]:before {
  background: #212121;
}
[dark] switch-button[checked] span:first-of-type {
  color: #989696;
}
[dark] switch-button:after {
  background: #989696;
}
.mix-popup .frame {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  z-index: 10000;
}
@media screen and (max-width: 850px) {
  .mix-popup .frame {
    background-color: white;
  }
}
.mix-popup .window {
  padding-top: env(safe-area-inset-top);
  padding-top: constant(safe-area-inset-top);
  position: relative;
  width: 100%;
  max-width: 600px;
  background-color: #fafafa;
  overflow: hidden;
  max-height: 100%;
  z-index: 2000;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(156, 110, 110, 0.02), 0 13px 58px 0 rgba(0, 0, 0, 0.19);
}
@media screen and (max-width: 850px) {
  .mix-popup .window {
    height: 100%;
  }
}
.mix-popup .window > * {
  flex: initial;
}
.mix-popup .window header {
  flex: 0 0 44px;
  height: 44px;
  width: 100%;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  background-color: white;
  border-radius: 3px 3px 0 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.mix-popup .window header div.caption {
  color: rgba(0, 0, 0, 0.6);
  font-family: "open sans";
  font-size: 21px;
  font-weight: lighter;
}
.mix-popup .window header div:first-of-type,
.mix-popup .window header div:last-of-type {
  flex: 0 0 70px;
}
.mix-popup .window header div:last-of-type {
  text-align: right;
}
.mix-popup .window header button {
  border: none;
  padding: 4px;
  color: #d64a48;
  padding: 0 12px;
  font-family: sans-serif;
}
.mix-popup .window header button:active {
  border: none;
}
.mix-popup .window header button[disabled] {
  color: #737373;
  fill: #737373 !important;
}
.mix-popup .window header button:hover {
  background: none;
}
.mix-popup .window header button[name=add] {
  float: right;
  margin-left: -2px;
  display: flex;
  fill: #d64a48;
  align-items: center;
  padding: 0 2px;
}
.mix-popup .window header button[name=add] svg {
  height: 30px;
  width: auto;
  margin-left: -2px;
}
.mix-form button,
.adaptive button,
.mix-form button.power,
.adaptive button.power {
  border: none;
}
.mix-form .error-message,
.adaptive .error-message {
  padding: 7px 15px 0;
}
.mix-form fieldset,
.adaptive fieldset {
  margin-top: 10px;
  padding: 10px 0;
  flex: auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.mix-form fieldset .field:first-of-type,
.adaptive fieldset .field:first-of-type {
  border-top: 1px solid #dedede;
}
@media (min-resolution: 2dppx) {
  .mix-form fieldset .field:first-of-type,
  .adaptive fieldset .field:first-of-type {
    border-top-width: 0.5px;
  }
}
@media (min-resolution: 3dppx) {
  .mix-form fieldset .field:first-of-type,
  .adaptive fieldset .field:first-of-type {
    border-top-width: 0.33333333px;
  }
}
@media (min-resolution: 4dppx) {
  .mix-form fieldset .field:first-of-type,
  .adaptive fieldset .field:first-of-type {
    border-top-width: 0.25px;
  }
}
.mix-form fieldset .field:last-of-type,
.adaptive fieldset .field:last-of-type {
  border-bottom: 1px solid #dedede;
}
@media (min-resolution: 2dppx) {
  .mix-form fieldset .field:last-of-type,
  .adaptive fieldset .field:last-of-type {
    border-bottom-width: 0.5px;
  }
}
@media (min-resolution: 3dppx) {
  .mix-form fieldset .field:last-of-type,
  .adaptive fieldset .field:last-of-type {
    border-bottom-width: 0.33333333px;
  }
}
@media (min-resolution: 4dppx) {
  .mix-form fieldset .field:last-of-type,
  .adaptive fieldset .field:last-of-type {
    border-bottom-width: 0.25px;
  }
}
.mix-form fieldset legend,
.adaptive fieldset legend {
  padding: 0 16px 0;
  color: #7c7b81;
  text-transform: uppercase;
  font-size: 12px;
}
.mix-form .field.focus,
.adaptive .field.focus {
  border-left: 2px solid #d64a48;
}
.mix-form > p,
.adaptive > p {
  padding: 16px 16px 0;
  flex: 0 0 55px;
  overflow: hidden;
}
.mix-form .field,
.adaptive .field {
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  background-color: white;
  width: 100%;
  min-height: 44px;
  display: flex;
  padding: 0 16px;
  justify-content: space-between;
  font-size: 15px;
  align-items: center;
  padding-right: 16px;
  box-sizing: border-box;
  font-weight: 300;
  flex: 1;
}
.mix-form .field,
.adaptive .field,
.mix-form .field > *,
.adaptive .field > * {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mix-form .field div,
.adaptive .field div {
  color: rgba(0, 0, 0, 0.4);
}
.mix-form .field div svg,
.adaptive .field div svg {
  fill: rgba(0, 0, 0, 0.3);
}
.mix-form .field div:first-of-type svg,
.adaptive .field div:first-of-type svg {
  fill: rgba(0, 0, 0, 0.2);
  margin: 0 5px 0 0;
  height: 18px;
  width: auto;
  padding-bottom: 2px;
}
.mix-form .field label,
.adaptive .field label,
.mix-form .field input[type=text],
.adaptive .field input[type=text],
.mix-form .field input[type=password],
.adaptive .field input[type=password],
.mix-form .field textarea,
.adaptive .field textarea {
  width: 100%;
  height: 21px;
  background-color: transparent;
}
.mix-form .field input[type=text],
.adaptive .field input[type=text],
.mix-form .field input[type=password],
.adaptive .field input[type=password],
.mix-form .field textarea,
.adaptive .field textarea {
  font-size: 15px;
  border: none;
  padding: 0;
  margin: 0;
  line-height: initial;
}
.mix-form .field input[type=text]::-webkit-input-placeholder,
.adaptive .field input[type=text]::-webkit-input-placeholder,
.mix-form .field input[type=password]::-webkit-input-placeholder,
.adaptive .field input[type=password]::-webkit-input-placeholder,
.mix-form .field textarea::-webkit-input-placeholder,
.adaptive .field textarea::-webkit-input-placeholder {
  color: rgba(0, 0, 0, 0.4);
}
.mix-form .field input[type=text]:-moz-placeholder,
.adaptive .field input[type=text]:-moz-placeholder,
.mix-form .field input[type=password]:-moz-placeholder,
.adaptive .field input[type=password]:-moz-placeholder,
.mix-form .field textarea:-moz-placeholder,
.adaptive .field textarea:-moz-placeholder {
  color: rgba(0, 0, 0, 0.4);
}
.mix-form .field input[type=text]::-moz-placeholder,
.adaptive .field input[type=text]::-moz-placeholder,
.mix-form .field input[type=password]::-moz-placeholder,
.adaptive .field input[type=password]::-moz-placeholder,
.mix-form .field textarea::-moz-placeholder,
.adaptive .field textarea::-moz-placeholder {
  color: rgba(0, 0, 0, 0.4);
}
.mix-form .field input[type=text]:-ms-input-placeholder,
.adaptive .field input[type=text]:-ms-input-placeholder,
.mix-form .field input[type=password]:-ms-input-placeholder,
.adaptive .field input[type=password]:-ms-input-placeholder,
.mix-form .field textarea:-ms-input-placeholder,
.adaptive .field textarea:-ms-input-placeholder {
  color: rgba(0, 0, 0, 0.4);
}
.mix-form .field input[type=text]:placeholder-shown,
.adaptive .field input[type=text]:placeholder-shown,
.mix-form .field input[type=password]:placeholder-shown,
.adaptive .field input[type=password]:placeholder-shown,
.mix-form .field textarea:placeholder-shown,
.adaptive .field textarea:placeholder-shown {
  /* Standard one last! */
  color: rgba(0, 0, 0, 0.4);
}
.mix-form .field label,
.adaptive .field label {
  display: block;
  color: black;
  font-size: 15px;
  padding-right: 10px;
  width: auto;
}
.mix-form .field input,
.adaptive .field input {
  border: none;
  font-size: 15px;
}
.mix-form .field textarea,
.adaptive .field textarea {
  min-height: 60px;
  word-wrap: break-word;
  padding: 10px 0;
}
.mix-form .action,
.adaptive .action {
  justify-content: flex-end;
  width: 100%;
  display: flex;
  margin: 8px 0 19px;
  flex: 0 0 32px;
}
.mix-form .action button.inactive,
.adaptive .action button.inactive {
  background-color: transparent;
}
.mix-form .action button,
.adaptive .action button {
  margin: 0 20px 0 0;
}
@media screen and (max-width: 850px) {
  .mix-form .action,
  .adaptive .action {
    display: none;
  }
}
[dark] .adaptive .field {
  background-color: #6c6c6c;
}
[dark] .adaptive .field input {
  color: #dfdfdf;
}
user-feedback {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  z-index: 10000;
}
@media screen and (max-width: 850px) {
  user-feedback {
    background-color: white;
  }
}
user-feedback section {
  padding-top: env(safe-area-inset-top);
  padding-top: constant(safe-area-inset-top);
  position: relative;
  width: 100%;
  max-width: 600px;
  background-color: #fafafa;
  overflow: hidden;
  max-height: 100%;
  z-index: 2000;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(156, 110, 110, 0.02), 0 13px 58px 0 rgba(0, 0, 0, 0.19);
}
@media screen and (max-width: 850px) {
  user-feedback section {
    height: 100%;
  }
}
user-feedback section > * {
  flex: initial;
}
user-feedback section header {
  flex: 0 0 44px;
  height: 44px;
  width: 100%;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  background-color: white;
  border-radius: 3px 3px 0 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
user-feedback section header div.caption {
  color: rgba(0, 0, 0, 0.6);
  font-family: "open sans";
  font-size: 21px;
  font-weight: lighter;
}
user-feedback section header div:first-of-type,
user-feedback section header div:last-of-type {
  flex: 0 0 70px;
}
user-feedback section header div:last-of-type {
  text-align: right;
}
user-feedback section header button {
  border: none;
  padding: 4px;
  color: #d64a48;
  padding: 0 12px;
  font-family: sans-serif;
}
user-feedback section header button:active {
  border: none;
}
user-feedback section header button[disabled] {
  color: #737373;
  fill: #737373 !important;
}
user-feedback section header button:hover {
  background: none;
}
user-feedback section header button[name=add] {
  float: right;
  margin-left: -2px;
  display: flex;
  fill: #d64a48;
  align-items: center;
  padding: 0 2px;
}
user-feedback section header button[name=add] svg {
  height: 30px;
  width: auto;
  margin-left: -2px;
}
user-feedback section button,
user-feedback section button.power {
  border: none;
}
user-feedback section .error-message {
  padding: 7px 15px 0;
}
user-feedback section fieldset {
  margin-top: 10px;
  padding: 10px 0;
  flex: auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
user-feedback section fieldset .field:first-of-type {
  border-top: 1px solid #dedede;
}
@media (min-resolution: 2dppx) {
  user-feedback section fieldset .field:first-of-type {
    border-top-width: 0.5px;
  }
}
@media (min-resolution: 3dppx) {
  user-feedback section fieldset .field:first-of-type {
    border-top-width: 0.33333333px;
  }
}
@media (min-resolution: 4dppx) {
  user-feedback section fieldset .field:first-of-type {
    border-top-width: 0.25px;
  }
}
user-feedback section fieldset .field:last-of-type {
  border-bottom: 1px solid #dedede;
}
@media (min-resolution: 2dppx) {
  user-feedback section fieldset .field:last-of-type {
    border-bottom-width: 0.5px;
  }
}
@media (min-resolution: 3dppx) {
  user-feedback section fieldset .field:last-of-type {
    border-bottom-width: 0.33333333px;
  }
}
@media (min-resolution: 4dppx) {
  user-feedback section fieldset .field:last-of-type {
    border-bottom-width: 0.25px;
  }
}
user-feedback section fieldset legend {
  padding: 0 16px 0;
  color: #7c7b81;
  text-transform: uppercase;
  font-size: 12px;
}
user-feedback section .field.focus {
  border-left: 2px solid #d64a48;
}
user-feedback section > p {
  padding: 16px 16px 0;
  flex: 0 0 55px;
  overflow: hidden;
}
user-feedback section .field {
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  background-color: white;
  width: 100%;
  min-height: 44px;
  display: flex;
  padding: 0 16px;
  justify-content: space-between;
  font-size: 15px;
  align-items: center;
  padding-right: 16px;
  box-sizing: border-box;
  font-weight: 300;
  flex: 1;
}
user-feedback section .field,
user-feedback section .field > * {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
user-feedback section .field div {
  color: rgba(0, 0, 0, 0.4);
}
user-feedback section .field div svg {
  fill: rgba(0, 0, 0, 0.3);
}
user-feedback section .field div:first-of-type svg {
  fill: rgba(0, 0, 0, 0.2);
  margin: 0 5px 0 0;
  height: 18px;
  width: auto;
  padding-bottom: 2px;
}
user-feedback section .field label,
user-feedback section .field input[type=text],
user-feedback section .field input[type=password],
user-feedback section .field textarea {
  width: 100%;
  height: 21px;
  background-color: transparent;
}
user-feedback section .field input[type=text],
user-feedback section .field input[type=password],
user-feedback section .field textarea {
  font-size: 15px;
  border: none;
  padding: 0;
  margin: 0;
  line-height: initial;
}
user-feedback section .field input[type=text]::-webkit-input-placeholder,
user-feedback section .field input[type=password]::-webkit-input-placeholder,
user-feedback section .field textarea::-webkit-input-placeholder {
  color: rgba(0, 0, 0, 0.4);
}
user-feedback section .field input[type=text]:-moz-placeholder,
user-feedback section .field input[type=password]:-moz-placeholder,
user-feedback section .field textarea:-moz-placeholder {
  color: rgba(0, 0, 0, 0.4);
}
user-feedback section .field input[type=text]::-moz-placeholder,
user-feedback section .field input[type=password]::-moz-placeholder,
user-feedback section .field textarea::-moz-placeholder {
  color: rgba(0, 0, 0, 0.4);
}
user-feedback section .field input[type=text]:-ms-input-placeholder,
user-feedback section .field input[type=password]:-ms-input-placeholder,
user-feedback section .field textarea:-ms-input-placeholder {
  color: rgba(0, 0, 0, 0.4);
}
user-feedback section .field input[type=text]:placeholder-shown,
user-feedback section .field input[type=password]:placeholder-shown,
user-feedback section .field textarea:placeholder-shown {
  /* Standard one last! */
  color: rgba(0, 0, 0, 0.4);
}
user-feedback section .field label {
  display: block;
  color: black;
  font-size: 15px;
  padding-right: 10px;
  width: auto;
}
user-feedback section .field input {
  border: none;
  font-size: 15px;
}
user-feedback section .field textarea {
  min-height: 60px;
  word-wrap: break-word;
  padding: 10px 0;
}
user-feedback section .action {
  justify-content: flex-end;
  width: 100%;
  display: flex;
  margin: 8px 0 19px;
  flex: 0 0 32px;
}
user-feedback section .action button.inactive {
  background-color: transparent;
}
user-feedback section .action button {
  margin: 0 20px 0 0;
}
@media screen and (max-width: 850px) {
  user-feedback section .action {
    display: none;
  }
}
user-feedback section .field[name=screenshot] {
  display: none;
  justify-content: center;
}
user-feedback section .field[name=screenshot] img {
  height: 180px;
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
}
[break] user-feedback section {
  border-radius: 0;
}
[break] user-feedback section header {
  background-color: #4482fd;
}
[break] user-feedback section header .caption {
  font-family: sans-serif;
  font-size: 15px;
  color: white;
}
[break] user-feedback section button {
  background: transparent;
  color: white;
}
user-feedback[screenshotting] {
  background-color: transparent;
  cursor: wait;
}
user-feedback[screenshotting] > * {
  visibility: hidden;
}
[name=please-wait] {
  background-color: rgba(0, 0, 0, 0.7);
  border-radius: 10px;
  padding: 10px;
  color: white;
  left: 50%;
  width: 250px;
  margin-left: -125px;
  top: 28%;
  position: fixed;
  z-index: 1000000;
  text-align: center;
  font-size: 18px;
  box-sizing: border-box;
}
[name=please-wait] .loader {
  float: left;
  height: 54px;
  width: 54px;
  animation: rotation 1s infinite linear;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-top-color: rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  margin: 5px;
}
[name=please-wait] c:last-of-type {
  line-height: 64px;
  text-indent: 18px;
  float: left;
}
[name=global-feedback] {
  position: fixed;
  left: 0;
  bottom: 20%;
  z-index: 10000;
  pointer-events: none;
}
[name=global-feedback] button {
  transform: rotate(90deg) translateY(100%);
  border-radius: 10px 10px 0 0;
  pointer-events: all;
}
@media screen and (max-width: 850px) {
  [name=global-feedback] {
    display: none;
  }
}
@media screen and (max-height: 600px) {
  [name=global-feedback] {
    display: none;
  }
}
.three-d-box {
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
}
membership-promotion {
  display: none;
  background-color: #d64a48;
  height: 49px;
  position: fixed;
  z-index: 10000;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  color: white;
  font-size: 30px;
  align-items: center;
}
membership-promotion a {
  color: white;
  text-decoration: underline;
}
membership-promotion div {
  width: 100%;
  text-align: center;
  line-height: 1.1;
}
@media screen and (max-width: 850px) {
  membership-promotion {
    font-size: 18px;
  }
}
[promote] membership-promotion {
  display: flex;
}
tip-display {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: rgba(0, 0, 0, 0.65);
  margin-top: 40px;
}
@media screen and (max-width: 850px) {
  tip-display {
    margin-top: 0;
  }
}
tip-display > div {
  max-width: 400px;
  width: 100%;
  padding: 20px;
  font-size: 17px;
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.15), 0 0 38px rgba(0, 0, 0, 0.04);
  margin: 18px;
  border-radius: 3px;
}
tip-display section {
  line-height: 1.5;
}
tip-display section > div {
  text-align: center;
  margin-top: 15px;
}
tip-display section > div img {
  max-height: 160px;
}
tip-display header {
  color: rgba(0, 0, 0, 0.45);
  font-size: 22px;
  line-height: 30px;
  padding-bottom: 10px;
}
tip-display header svg {
  fill: rgba(0, 0, 0, 0.3);
  padding: 0 3px 3px 0;
}
tip-display footer {
  display: none;
  text-align: right;
}
tip-display footer a {
  color: rgba(0, 0, 0, 0.45);
  font-size: 14px;
  cursor: pointer;
}
stack-selector {
  background-color: pink;
}
stack-selector input[type=text] {
  width: 100%;
}
stack-selector .selected-stacks a.stack-button {
  display: block;
  padding: 2.5px 7px;
  background-color: rgba(0, 0, 0, 0.05);
  margin: 4px 8px 3px 0;
  float: left;
  border-radius: 2px;
  font-size: 11px;
  color: rgba(0, 0, 0, 0.6);
  height: 24px;
  /*I'm looking at you, IE 10*/
  font-family: sans-serif;
  font-size: 13px;
}
stack-selector .selected-stacks a.stack-button svg {
  width: 8px;
  padding: 2px 1px 3px 4px;
  opacity: 0.5;
}
stack-selector .selected-stacks a.stack-button img {
  width: 12px;
  height: 12px;
  vertical-align: middle;
  opacity: 0.9;
  border-radius: 50%;
  margin-bottom: 0.5px;
}
stack-selector .selected-stacks a.stack-button:not("[readonly]"):hover svg {
  opacity: 1;
  fill: #d64a48;
}
stack-selector .selected-stacks a.stack-button[readonly] {
  pointer-events: none;
}
stack-selector .selected-stacks a.stack-button[readonly] svg {
  display: none;
}
stack-selector .suggest-frame {
  position: absolute;
  max-height: 300px;
  overflow-x: hidden;
  overflow-y: scroll;
  background-color: white;
  z-index: 2;
  width: 100%;
  margin-right: 20px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0px 13px 13px 0 rgba(0, 0, 0, 0.05);
  width: calc(100% - 40px);
  margin-top: 38px;
}
stack-selector .suggest-frame .suggest {
  font-size: 14px;
}
stack-selector .suggest-frame .suggest li {
  padding: 10px;
  color: rgba(0, 0, 0, 0.7);
  cursor: pointer;
  border-bottom: 1px solid #ccc;
  overflow: hidden;
}
stack-selector .suggest-frame .suggest li .title {
  width: calc(100% - 30px);
  float: left;
}
stack-selector .suggest-frame .suggest li .check {
  width: 30px;
  float: left;
}
stack-selector .suggest-frame .suggest li .check svg {
  fill: none;
}
stack-selector .suggest-frame .suggest li.selected .check svg {
  fill: #d64a48;
}
stack-selector .suggest-frame .suggest li.highlight,
stack-selector .suggest-frame .suggest li:hover {
  background-color: #eee;
  color: rgba(0, 0, 0, 0.9);
}
.tagging {
  width: 100% !important;
  clear: both;
  padding: 10px 0;
}
@media screen and (max-width: 850px) {
  .tagging {
    padding: 0 10px 10px 10px;
  }
}
.tagging a.tag {
  display: block;
  padding: 2px 8px;
  background-color: rgba(0, 0, 0, 0.05);
  margin: 4px 8px 3px 0;
  float: left;
  text-transform: uppercase;
  border-radius: 2px;
  font-size: 11px;
  color: rgba(0, 0, 0, 0.6);
  height: 24px;
  /*I'm looking at you, IE 10*/
}
.tagging a.tag.highlight {
  background-color: #fff602;
  color: rgba(0, 0, 0, 0.9);
}
tag-selector.tagging {
  display: block;
  box-sizing: border-box;
}
@media (max-width: 850px) {
  tag-selector.tagging {
    margin: 0 !important;
  }
}
tag-selector.tagging fieldset {
  width: 100%;
}
tag-selector.tagging fieldset.modern button {
  margin: 10px 0 10px 10px;
}
tag-selector.tagging fieldset.modern .group {
  width: calc(100% - 140px);
}
tag-selector.tagging button {
  margin-right: 20px;
}
@media screen and (min-width: 1200px) {
  tag-selector.tagging .new-tag {
    max-width: 400px;
  }
}
tag-selector.tagging .existing-tags {
  margin-bottom: 10px;
}
@media screen and (max-width: 60em) {
  tag-selector.tagging .existing-tags {
    margin-bottom: 0;
  }
}
tag-selector.tagging .existing-tags svg {
  width: 8px;
  padding: 2px 1px 3px 4px;
  opacity: 0.5;
}
tag-selector.tagging .existing-tags a {
  cursor: pointer;
}
tag-selector.tagging .existing-tags a:hover svg {
  opacity: 1;
  fill: #d64a48;
}
tag-selector.tagging .suggest {
  z-index: 2;
  background-color: white;
  position: absolute;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0px 13px 13px 0 rgba(0, 0, 0, 0.05);
  text-transform: uppercase;
  font-size: 12px;
  width: 193px;
  margin-top: 43px;
}
tag-selector.tagging .suggest li {
  padding: 10px;
  color: rgba(0, 0, 0, 0.7);
  cursor: pointer;
}
tag-selector.tagging .suggest li.highlight,
tag-selector.tagging .suggest li:hover {
  background-color: #eee;
  color: rgba(0, 0, 0, 0.9);
}
tag-selector.tagging input[type=text] {
  text-transform: uppercase;
  margin: 10px 0;
  width: 100%;
  clear: both;
  float: left;
}
event-history .initiator {
  text-transform: uppercase;
  font-size: 10px;
}
event-history .stack-ref {
  cursor: pointer;
}
event-history h1 {
  margin: 10px 0;
  margin: 5px 0 0;
  padding: 10px;
  text-align: center;
  width: 100%;
  text-transform: uppercase;
  font-size: 13px;
  color: #626060;
  font-weight: normal;
}
event-history .revision {
  width: 100%;
  padding: 15px;
  border-bottom: 1px solid #efefef;
  color: rgba(0, 0, 0, 0.7);
  overflow: auto;
  max-height: 500px;
  transition: max-height ease 2s;
}
event-history .revision .icon,
event-history .revision .message {
  float: left;
}
event-history .revision .icon {
  width: 40px;
  margin-top: 4px;
}
event-history .revision .icon img {
  background-color: #eee;
  width: 40px;
  height: 40px;
  border: 1px solid #e6e6e6;
}
event-history .revision .message {
  padding-left: 10px;
  width: calc(100% - 40px);
  -ms-word-break: break-all;
  word-break: break-all;
  word-break: break-word;
  /* Non standard for WebKit */
}
event-history .revision .tag,
event-history .revision .stack {
  color: black;
  margin: 0;
  padding: 0;
}
event-history .revision .action {
  width: calc(100% - 40px);
  float: left;
  color: black;
}
event-history .revision time {
  width: 40px;
  float: left;
}
event-history .revision .detail {
  font-size: 0.9em;
  color: #6f6f6f;
  width: 100%;
  clear: both;
}
event-history .revision.flat {
  max-height: 0;
  transition: max-height ease 2s;
}
event-history .revision:hover {
  background-color: #f2f2f2;
}
manage-membership .box {
  max-width: 580px !important;
}
manage-membership .membership-details {
  max-width: 400px;
}
manage-membership .membership-details button {
  width: 168px;
  float: right;
}
manage-membership .transactions {
  display: flex;
  flex-flow: column nowrap;
}
manage-membership .transactions .transaction {
  width: 100%;
  display: flex;
  flex-flow: row nowrap;
  font-size: 12px;
}
manage-membership .transactions .transaction div {
  display: flex;
  flex-flow: row nowrap;
  flex-grow: 1;
  flex-basis: 0;
  line-height: 28px;
  white-space: nowrap;
}
@media screen and (max-width: 850px) {
  manage-membership .transactions .transaction .valid-from,
  manage-membership .transactions .transaction .valid-to {
    display: none;
  }
}
manage-membership .transactions .transaction .card {
  flex-basis: 58px;
  text-transform: uppercase;
}
manage-membership .transactions .header {
  border-bottom: 1px solid #ebebeb;
  margin-bottom: 4px;
}
manage-membership .transactions .header div {
  text-transform: uppercase;
  font-size: 11px;
  color: #a1a1a1;
}
manage-membership > button {
  margin: 10px;
  padding: 0 0 6px;
}
manage-membership .space {
  margin-top: 20px;
}
manage-membership .action,
manage-membership .line {
  width: 100%;
  font-size: 13px;
}
manage-membership .line {
  line-height: 28px;
  display: flex;
  border-bottom: 1px solid #ebebeb;
  justify-content: space-between;
  line-height: 50px;
}
manage-membership .line label {
  display: block;
  padding-right: 10px;
  font-size: 16px;
  font-weight: 500;
}
manage-membership .line div {
  color: black;
  float: right;
  font-family: sans-serif;
  text-align: right;
  font-weight: 100;
  color: rgba(0, 0, 0, 0.65);
  font-size: 15px;
}
@media screen and (max-width: 850px) {
  manage-membership .box {
    margin: 0 10px 10px;
    max-width: calc(100% - 20px);
  }
  manage-membership .transactions .transaction {
    font-size: 11px;
  }
}
.package {
  display: block;
  width: 100%;
  position: relative;
}
.package nav {
  width: 100%;
  height: 42px;
  display: flex;
  align-items: center;
  padding: 0 17px;
  z-index: 1;
  position: absolute;
  background-color: rgba(255, 255, 255, 0.6);
}
.package nav a {
  display: block;
  color: black;
}
.package > header {
  width: 100%;
  height: 130px;
  box-sizing: border-box;
  background-repeat: no-repeat;
  background-size: 106%;
  background-position: center;
}
.package .content {
  margin: 2vh auto;
  width: 100%;
  max-width: 1200px;
  padding: 10px 50px;
  display: block;
  box-sizing: border-box;
}
@media all and (max-width: 850px) {
  .package .content {
    padding: 10px 20px 0;
  }
}
.package .content h1 {
  line-height: 38px;
  font-size: 38px;
  color: #4d4d4d;
  font-weight: 100;
  margin: 0 0 12px 0;
  width: 100%;
  float: left;
  font-family: "Open Sans";
}
.package .content p {
  padding: 10px 0;
}
.package .content button {
  margin-top: 30px;
}
.package .content .actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.package .content .actions button {
  margin: 0 0 0 15px;
}
.package * {
  font-family: sans-serif;
  box-sizing: border-box;
}
.package input[type=checkbox] {
  float: left;
  margin-right: 6px;
  margin-bottom: 12px;
}
.package label {
  display: block;
}
.package .box-label {
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.4);
  padding: 20px 10px 5px 20px;
  width: 100%;
  font-size: 11px;
  clear: both;
}
.package .box {
  border-radius: 2px;
  box-shadow: 0 0px 1px 0 rgba(0, 0, 0, 0.26);
  box-sizing: border-box;
  padding: 10px 20px;
  margin: 0 30px 10px 0;
  max-width: 360px;
  width: 100%;
}
.package .box header {
  font-size: 17px;
  font-weight: 500;
  padding: 10px 0;
}
.package .box .description {
  color: rgba(0, 0, 0, 0.65);
  margin-bottom: 10px;
}
.about svg {
  margin: 9px 4px 0;
}
.about .version {
  margin: 0px 8px 0;
  font-size: 16px;
  line-height: 25px;
}
share-stack.mixin-popup > div section {
  flex: 1 1;
}
social-share {
  background-color: #f1f2f4;
  width: 100%;
  height: 100%;
}
social-share .mixin-field [name=social-buttons] {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  white-space: normal;
  height: 57px;
  text-align: center;
  background-color: white;
  width: 100%;
  height: 200px;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid #dedede;
}
@media (min-resolution: 2dppx) {
  social-share .mixin-field [name=social-buttons] {
    border-bottom-width: 0.5px;
  }
}
@media (min-resolution: 3dppx) {
  social-share .mixin-field [name=social-buttons] {
    border-bottom-width: 0.33333333px;
  }
}
@media (min-resolution: 4dppx) {
  social-share .mixin-field [name=social-buttons] {
    border-bottom-width: 0.25px;
  }
}
social-share .mixin-field [name=social-buttons] > div {
  flex: 1 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
social-share .mixin-field [name=short-url-area] {
  margin-top: 20px;
}
social-share .mixin-field [name=short-url-area] button {
  border: none;
}
social-share .mixin-field .round:hover {
  opacity: 0.7;
}
social-share .mixin-field .round {
  padding: 20px;
}
social-share .mixin-field .round div {
  width: 50px;
  height: 50px;
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-items: center;
  justify-content: center;
}
social-share .mixin-field .round div svg {
  fill: white !important;
  width: 26px  !important;
  padding-top: 1px  !important;
}
social-share .mixin-field .round .twitter {
  background-color: #4099ff;
}
social-share .mixin-field .round .feed {
  background-color: #ff6600;
}
social-share .mixin-field .round .feed svg {
  padding-left: 2px !important;
  padding-bottom: 1px !important;
}
social-share .mixin-field .round .facebook {
  background-color: #3b5998;
}
social-share .mixin-field .round .facebook svg {
  width: 18px !important;
  padding-right: 2px !important;
}
social-share .mixin-field .round .linked-in {
  background-color: #0b62a6;
}
.mix-popup .frame {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  z-index: 10000;
}
@media screen and (max-width: 850px) {
  .mix-popup .frame {
    background-color: white;
  }
}
.mix-popup .window {
  padding-top: env(safe-area-inset-top);
  padding-top: constant(safe-area-inset-top);
  position: relative;
  width: 100%;
  max-width: 600px;
  background-color: #fafafa;
  overflow: hidden;
  max-height: 100%;
  z-index: 2000;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(156, 110, 110, 0.02), 0 13px 58px 0 rgba(0, 0, 0, 0.19);
}
@media screen and (max-width: 850px) {
  .mix-popup .window {
    height: 100%;
  }
}
.mix-popup .window > * {
  flex: initial;
}
.mix-popup .window header {
  flex: 0 0 44px;
  height: 44px;
  width: 100%;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  background-color: white;
  border-radius: 3px 3px 0 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.mix-popup .window header div.caption {
  color: rgba(0, 0, 0, 0.6);
  font-family: "open sans";
  font-size: 21px;
  font-weight: lighter;
}
.mix-popup .window header div:first-of-type,
.mix-popup .window header div:last-of-type {
  flex: 0 0 70px;
}
.mix-popup .window header div:last-of-type {
  text-align: right;
}
.mix-popup .window header button {
  border: none;
  padding: 4px;
  color: #d64a48;
  padding: 0 12px;
  font-family: sans-serif;
}
.mix-popup .window header button:active {
  border: none;
}
.mix-popup .window header button[disabled] {
  color: #737373;
  fill: #737373 !important;
}
.mix-popup .window header button:hover {
  background: none;
}
.mix-popup .window header button[name=add] {
  float: right;
  margin-left: -2px;
  display: flex;
  fill: #d64a48;
  align-items: center;
  padding: 0 2px;
}
.mix-popup .window header button[name=add] svg {
  height: 30px;
  width: auto;
  margin-left: -2px;
}
.mix-form button,
.adaptive button,
.mix-form button.power,
.adaptive button.power {
  border: none;
}
.mix-form .error-message,
.adaptive .error-message {
  padding: 7px 15px 0;
}
.mix-form fieldset,
.adaptive fieldset {
  margin-top: 10px;
  padding: 10px 0;
  flex: auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.mix-form fieldset .field:first-of-type,
.adaptive fieldset .field:first-of-type {
  border-top: 1px solid #dedede;
}
@media (min-resolution: 2dppx) {
  .mix-form fieldset .field:first-of-type,
  .adaptive fieldset .field:first-of-type {
    border-top-width: 0.5px;
  }
}
@media (min-resolution: 3dppx) {
  .mix-form fieldset .field:first-of-type,
  .adaptive fieldset .field:first-of-type {
    border-top-width: 0.33333333px;
  }
}
@media (min-resolution: 4dppx) {
  .mix-form fieldset .field:first-of-type,
  .adaptive fieldset .field:first-of-type {
    border-top-width: 0.25px;
  }
}
.mix-form fieldset .field:last-of-type,
.adaptive fieldset .field:last-of-type {
  border-bottom: 1px solid #dedede;
}
@media (min-resolution: 2dppx) {
  .mix-form fieldset .field:last-of-type,
  .adaptive fieldset .field:last-of-type {
    border-bottom-width: 0.5px;
  }
}
@media (min-resolution: 3dppx) {
  .mix-form fieldset .field:last-of-type,
  .adaptive fieldset .field:last-of-type {
    border-bottom-width: 0.33333333px;
  }
}
@media (min-resolution: 4dppx) {
  .mix-form fieldset .field:last-of-type,
  .adaptive fieldset .field:last-of-type {
    border-bottom-width: 0.25px;
  }
}
.mix-form fieldset legend,
.adaptive fieldset legend {
  padding: 0 16px 0;
  color: #7c7b81;
  text-transform: uppercase;
  font-size: 12px;
}
.mix-form .field.focus,
.adaptive .field.focus {
  border-left: 2px solid #d64a48;
}
.mix-form > p,
.adaptive > p {
  padding: 16px 16px 0;
  flex: 0 0 55px;
  overflow: hidden;
}
.mix-form .field,
.adaptive .field {
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  background-color: white;
  width: 100%;
  min-height: 44px;
  display: flex;
  padding: 0 16px;
  justify-content: space-between;
  font-size: 15px;
  align-items: center;
  padding-right: 16px;
  box-sizing: border-box;
  font-weight: 300;
  flex: 1;
}
.mix-form .field,
.adaptive .field,
.mix-form .field > *,
.adaptive .field > * {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mix-form .field div,
.adaptive .field div {
  color: rgba(0, 0, 0, 0.4);
}
.mix-form .field div svg,
.adaptive .field div svg {
  fill: rgba(0, 0, 0, 0.3);
}
.mix-form .field div:first-of-type svg,
.adaptive .field div:first-of-type svg {
  fill: rgba(0, 0, 0, 0.2);
  margin: 0 5px 0 0;
  height: 18px;
  width: auto;
  padding-bottom: 2px;
}
.mix-form .field label,
.adaptive .field label,
.mix-form .field input[type=text],
.adaptive .field input[type=text],
.mix-form .field input[type=password],
.adaptive .field input[type=password],
.mix-form .field textarea,
.adaptive .field textarea {
  width: 100%;
  height: 21px;
  background-color: transparent;
}
.mix-form .field input[type=text],
.adaptive .field input[type=text],
.mix-form .field input[type=password],
.adaptive .field input[type=password],
.mix-form .field textarea,
.adaptive .field textarea {
  font-size: 15px;
  border: none;
  padding: 0;
  margin: 0;
  line-height: initial;
}
.mix-form .field input[type=text]::-webkit-input-placeholder,
.adaptive .field input[type=text]::-webkit-input-placeholder,
.mix-form .field input[type=password]::-webkit-input-placeholder,
.adaptive .field input[type=password]::-webkit-input-placeholder,
.mix-form .field textarea::-webkit-input-placeholder,
.adaptive .field textarea::-webkit-input-placeholder {
  color: rgba(0, 0, 0, 0.4);
}
.mix-form .field input[type=text]:-moz-placeholder,
.adaptive .field input[type=text]:-moz-placeholder,
.mix-form .field input[type=password]:-moz-placeholder,
.adaptive .field input[type=password]:-moz-placeholder,
.mix-form .field textarea:-moz-placeholder,
.adaptive .field textarea:-moz-placeholder {
  color: rgba(0, 0, 0, 0.4);
}
.mix-form .field input[type=text]::-moz-placeholder,
.adaptive .field input[type=text]::-moz-placeholder,
.mix-form .field input[type=password]::-moz-placeholder,
.adaptive .field input[type=password]::-moz-placeholder,
.mix-form .field textarea::-moz-placeholder,
.adaptive .field textarea::-moz-placeholder {
  color: rgba(0, 0, 0, 0.4);
}
.mix-form .field input[type=text]:-ms-input-placeholder,
.adaptive .field input[type=text]:-ms-input-placeholder,
.mix-form .field input[type=password]:-ms-input-placeholder,
.adaptive .field input[type=password]:-ms-input-placeholder,
.mix-form .field textarea:-ms-input-placeholder,
.adaptive .field textarea:-ms-input-placeholder {
  color: rgba(0, 0, 0, 0.4);
}
.mix-form .field input[type=text]:placeholder-shown,
.adaptive .field input[type=text]:placeholder-shown,
.mix-form .field input[type=password]:placeholder-shown,
.adaptive .field input[type=password]:placeholder-shown,
.mix-form .field textarea:placeholder-shown,
.adaptive .field textarea:placeholder-shown {
  /* Standard one last! */
  color: rgba(0, 0, 0, 0.4);
}
.mix-form .field label,
.adaptive .field label {
  display: block;
  color: black;
  font-size: 15px;
  padding-right: 10px;
  width: auto;
}
.mix-form .field input,
.adaptive .field input {
  border: none;
  font-size: 15px;
}
.mix-form .field textarea,
.adaptive .field textarea {
  min-height: 60px;
  word-wrap: break-word;
  padding: 10px 0;
}
.mix-form .action,
.adaptive .action {
  justify-content: flex-end;
  width: 100%;
  display: flex;
  margin: 8px 0 19px;
  flex: 0 0 32px;
}
.mix-form .action button.inactive,
.adaptive .action button.inactive {
  background-color: transparent;
}
.mix-form .action button,
.adaptive .action button {
  margin: 0 20px 0 0;
}
@media screen and (max-width: 850px) {
  .mix-form .action,
  .adaptive .action {
    display: none;
  }
}
[dark] .adaptive .field {
  background-color: #6c6c6c;
}
[dark] .adaptive .field input {
  color: #dfdfdf;
}
add-link {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  z-index: 10000;
}
@media screen and (max-width: 850px) {
  add-link {
    background-color: white;
  }
}
add-link section {
  padding-top: env(safe-area-inset-top);
  padding-top: constant(safe-area-inset-top);
  position: relative;
  width: 100%;
  max-width: 600px;
  background-color: #fafafa;
  overflow: hidden;
  max-height: 100%;
  z-index: 2000;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(156, 110, 110, 0.02), 0 13px 58px 0 rgba(0, 0, 0, 0.19);
}
@media screen and (max-width: 850px) {
  add-link section {
    height: 100%;
  }
}
add-link section > * {
  flex: initial;
}
add-link section header {
  flex: 0 0 44px;
  height: 44px;
  width: 100%;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  background-color: white;
  border-radius: 3px 3px 0 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
add-link section header div.caption {
  color: rgba(0, 0, 0, 0.6);
  font-family: "open sans";
  font-size: 21px;
  font-weight: lighter;
}
add-link section header div:first-of-type,
add-link section header div:last-of-type {
  flex: 0 0 70px;
}
add-link section header div:last-of-type {
  text-align: right;
}
add-link section header button {
  border: none;
  padding: 4px;
  color: #d64a48;
  padding: 0 12px;
  font-family: sans-serif;
}
add-link section header button:active {
  border: none;
}
add-link section header button[disabled] {
  color: #737373;
  fill: #737373 !important;
}
add-link section header button:hover {
  background: none;
}
add-link section header button[name=add] {
  float: right;
  margin-left: -2px;
  display: flex;
  fill: #d64a48;
  align-items: center;
  padding: 0 2px;
}
add-link section header button[name=add] svg {
  height: 30px;
  width: auto;
  margin-left: -2px;
}
add-link section button,
add-link section button.power {
  border: none;
}
add-link section .error-message {
  padding: 7px 15px 0;
}
add-link section fieldset {
  margin-top: 10px;
  padding: 10px 0;
  flex: auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
add-link section fieldset .field:first-of-type {
  border-top: 1px solid #dedede;
}
@media (min-resolution: 2dppx) {
  add-link section fieldset .field:first-of-type {
    border-top-width: 0.5px;
  }
}
@media (min-resolution: 3dppx) {
  add-link section fieldset .field:first-of-type {
    border-top-width: 0.33333333px;
  }
}
@media (min-resolution: 4dppx) {
  add-link section fieldset .field:first-of-type {
    border-top-width: 0.25px;
  }
}
add-link section fieldset .field:last-of-type {
  border-bottom: 1px solid #dedede;
}
@media (min-resolution: 2dppx) {
  add-link section fieldset .field:last-of-type {
    border-bottom-width: 0.5px;
  }
}
@media (min-resolution: 3dppx) {
  add-link section fieldset .field:last-of-type {
    border-bottom-width: 0.33333333px;
  }
}
@media (min-resolution: 4dppx) {
  add-link section fieldset .field:last-of-type {
    border-bottom-width: 0.25px;
  }
}
add-link section fieldset legend {
  padding: 0 16px 0;
  color: #7c7b81;
  text-transform: uppercase;
  font-size: 12px;
}
add-link section .field.focus {
  border-left: 2px solid #d64a48;
}
add-link section > p {
  padding: 16px 16px 0;
  flex: 0 0 55px;
  overflow: hidden;
}
add-link section .field {
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  background-color: white;
  width: 100%;
  min-height: 44px;
  display: flex;
  padding: 0 16px;
  justify-content: space-between;
  font-size: 15px;
  align-items: center;
  padding-right: 16px;
  box-sizing: border-box;
  font-weight: 300;
  flex: 1;
}
add-link section .field,
add-link section .field > * {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
add-link section .field div {
  color: rgba(0, 0, 0, 0.4);
}
add-link section .field div svg {
  fill: rgba(0, 0, 0, 0.3);
}
add-link section .field div:first-of-type svg {
  fill: rgba(0, 0, 0, 0.2);
  margin: 0 5px 0 0;
  height: 18px;
  width: auto;
  padding-bottom: 2px;
}
add-link section .field label,
add-link section .field input[type=text],
add-link section .field input[type=password],
add-link section .field textarea {
  width: 100%;
  height: 21px;
  background-color: transparent;
}
add-link section .field input[type=text],
add-link section .field input[type=password],
add-link section .field textarea {
  font-size: 15px;
  border: none;
  padding: 0;
  margin: 0;
  line-height: initial;
}
add-link section .field input[type=text]::-webkit-input-placeholder,
add-link section .field input[type=password]::-webkit-input-placeholder,
add-link section .field textarea::-webkit-input-placeholder {
  color: rgba(0, 0, 0, 0.4);
}
add-link section .field input[type=text]:-moz-placeholder,
add-link section .field input[type=password]:-moz-placeholder,
add-link section .field textarea:-moz-placeholder {
  color: rgba(0, 0, 0, 0.4);
}
add-link section .field input[type=text]::-moz-placeholder,
add-link section .field input[type=password]::-moz-placeholder,
add-link section .field textarea::-moz-placeholder {
  color: rgba(0, 0, 0, 0.4);
}
add-link section .field input[type=text]:-ms-input-placeholder,
add-link section .field input[type=password]:-ms-input-placeholder,
add-link section .field textarea:-ms-input-placeholder {
  color: rgba(0, 0, 0, 0.4);
}
add-link section .field input[type=text]:placeholder-shown,
add-link section .field input[type=password]:placeholder-shown,
add-link section .field textarea:placeholder-shown {
  /* Standard one last! */
  color: rgba(0, 0, 0, 0.4);
}
add-link section .field label {
  display: block;
  color: black;
  font-size: 15px;
  padding-right: 10px;
  width: auto;
}
add-link section .field input {
  border: none;
  font-size: 15px;
}
add-link section .field textarea {
  min-height: 60px;
  word-wrap: break-word;
  padding: 10px 0;
}
add-link section .action {
  justify-content: flex-end;
  width: 100%;
  display: flex;
  margin: 8px 0 19px;
  flex: 0 0 32px;
}
add-link section .action button.inactive {
  background-color: transparent;
}
add-link section .action button {
  margin: 0 20px 0 0;
}
@media screen and (max-width: 850px) {
  add-link section .action {
    display: none;
  }
}
add-link section .url {
  width: 94vw;
}
add-link section .title {
  width: 94vw;
}
#add-link-dialog,
.add-link-dialog {
  border-radius: 4px;
  right: 10px;
  top: 54px;
  position: fixed;
}
@supports (env(safe-area-inset-top)) {
  #add-link-dialog,
  .add-link-dialog {
    top: calc(54px + env(safe-area-inset-top));
  }
}
@supports (constant(safe-area-inset-top)) {
  #add-link-dialog,
  .add-link-dialog {
    top: calc(54px + constant(safe-area-inset-top));
  }
}
@media screen and (max-width: 850px) {
  #add-link-dialog,
  .add-link-dialog {
    right: 0;
  }
}
how-to-add-links {
  margin-top: 40px;
  overflow: hidden;
  padding-bottom: 15px;
  border-radius: 4px;
  display: flex;
  flex-wrap: wrap;
  animation: fade-border 0.8s forwards 1s;
  /*.help-box:hover {
        transition: transform ease-out 5s;
        transform: scale(1.2);
    }*/
}
how-to-add-links > header {
  font-family: 'Open Sans';
  font-size: 22px;
  font-weight: lighter;
  position: absolute;
  margin-left: 10px;
  margin-top: -12px;
  opacity: 1;
  /*animation: fade-in .8s forwards .6s;*/
}
how-to-add-links > header span {
  background-color: white;
  padding: 24px;
  color: rgba(0, 0, 0, 0.9);
}
how-to-add-links .help-box:nth-of-type(1) {
  opacity: 0;
  animation: fade-in 0.8s 0.2s forwards;
}
how-to-add-links .help-box:nth-of-type(2) {
  opacity: 0;
  animation: fade-in 0.8s 0.3s forwards;
}
how-to-add-links .help-box:nth-of-type(3) {
  opacity: 0;
  animation: fade-in 0.8s 0.4s forwards;
}
how-to-add-links .help-box {
  height: 260px;
  width: 33%;
  float: left;
  background-repeat: no-repeat;
  background-position: center center;
  margin-top: 16px;
  flex-basis: 250px;
  flex-grow: 1;
  flex-shrink: 1;
  min-width: 250px;
}
@media screen and (min-width: 1200px) {
  how-to-add-links .help-box {
    border-right: 1px solid rgba(0, 0, 0, 0.1);
  }
}
how-to-add-links .help-box * {
  width: 100%;
  text-align: center;
  color: rgba(0, 0, 0, 0.9);
}
how-to-add-links .help-box * a {
  color: #d64a48;
}
how-to-add-links .help-box * a:hover {
  text-decoration: underline;
}
how-to-add-links .help-box header {
  line-height: 50px;
  font-size: 16px;
  color: rgba(0, 0, 0, 0.4);
  font-weight: bold;
}
how-to-add-links .help-box p {
  margin-top: 177px;
}
how-to-add-links .help-box:last-of-type {
  border-right: none;
}
how-to-add-links .direct {
  background-image: url(/build/web/add-link-teaser.jpg);
  background-size: auto 211.5px;
  background-position: center 38px;
}
how-to-add-links .bookmarklet {
  background-image: url(/build/web/bookmarklet-teaser.jpg);
  background-size: auto 201px;
}
how-to-add-links .import {
  background-image: url(/build/web/import-teaser.jpg);
  background-size: auto 138px;
}
@-webkit-keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fade-border {
  from {
    box-shadow: 0 0 0 2px rgba(76, 217, 100, 0);
  }
  to {
    box-shadow: 0 0 0 2px #4cd964;
  }
}
@keyframes fade-border {
  from {
    box-shadow: 0 0 0 2px rgba(76, 217, 100, 0);
  }
  to {
    box-shadow: 0 0 0 2px #4cd964;
  }
}
.dialog.filters {
  max-width: 500px;
  padding: 8px 16px;
}
.dialog.filters section {
  padding: 4px 3px;
}
.dialog.filters section > fieldset {
  margin: 20px 0;
}
.dialog.filters fieldset.modern .group {
  margin-top: 0;
}
.dialog.filters .tag-editor input[type=text] {
  margin: 3px 0 !important;
  width: calc(100% - 3px);
}
.dialog.filters header {
  height: 45px;
  padding: 12px 0 0;
}
.dialog.filters header a {
  padding: 9px 0px 8px;
}
.dialog.filters header a:first-of-type {
  margin-left: 3px;
}
.dialog.filters header .close {
  right: 8px;
  top: 10px;
}
.dialog.filters footer {
  padding: 0 5px 12px 0;
}
.dialog.filters .tagging {
  margin: 0;
}
.dialog.filters legend {
  font-size: 14px;
  margin: 12px 0 5px 0;
  font-family: open sans;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.7);
}
.dialog.filters .tag-editor fieldset {
  padding: 0;
}
.dialog.filters .tag-editor .new-tag {
  max-width: none;
}
.dialog.filters .tag-editor .suggest {
  margin-top: 36px;
}
#filters-list .filters-area {
  margin: 10px 20px;
  display: flex;
  flex-wrap: wrap;
}
@supports (display: grid) {
  #filters-list .filters-area {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    grid-gap: 20px;
  }
}
#filters-list #new-filter {
  color: rgba(0, 0, 0, 0.95);
  min-height: 200px;
}
#filters-list #new-filter div:first-of-type {
  font-size: 110px;
  opacity: 0.2;
  line-height: 80px;
}
#filters-list .filter {
  color: rgba(255, 255, 255, 0.95);
  padding: 0 0 60px 0;
}
#filters-list .hide {
  width: 0;
  opacity: 0;
  margin: 0 !important;
  padding: 0;
  min-width: 0 !important;
  flex-basis: 0 !important;
}
#filters-list .filter,
#filters-list #new-filter {
  transition: all 0.5s ease-in-out;
  min-width: 300px;
  font-family: 'Open Sans';
  flex-grow: 1;
  flex-shrink: 1;
  border-radius: 6px;
  margin: 10px;
  overflow: hidden;
  position: relative;
  line-height: 1.3;
  max-width: 100%;
  flex-basis: 23%;
}
@supports (display: grid) {
  #filters-list .filter,
  #filters-list #new-filter {
    margin: 0;
  }
}
@media (max-width: 1200px) {
  #filters-list .filter,
  #filters-list #new-filter {
    flex-basis: 47%;
  }
}
@media (max-width: 960px) {
  #filters-list .filter,
  #filters-list #new-filter {
    flex-basis: 100%;
  }
}
#filters-list .filter section,
#filters-list #new-filter section {
  padding: 20px 30px 30px;
  font-size: 23px;
  line-height: 1.4;
}
#filters-list .filter section .highlighted,
#filters-list #new-filter section .highlighted {
  border-bottom: 1px solid rgba(255, 255, 255, 0.6);
}
#filters-list .filter section .filterActionAssignTags .highlighted,
#filters-list #new-filter section .filterActionAssignTags .highlighted {
  text-transform: uppercase;
  font-size: 18px;
  font-weight: bold;
}
#filters-list .filter header,
#filters-list #new-filter header {
  height: 50px;
}
#filters-list .filter header *,
#filters-list #new-filter header * {
  float: left;
}
#filters-list .filter header div,
#filters-list #new-filter header div {
  padding: 23px 8px 0;
  font-size: 20px;
}
#filters-list .filter header svg,
#filters-list #new-filter header svg {
  width: 30px;
  height: 30px;
  margin: 23px 0 0 23px;
}
#filters-list .filter header svg path,
#filters-list #new-filter header svg path {
  stroke: rgba(255, 255, 255, 0.8);
}
#filters-list .filter footer,
#filters-list #new-filter footer {
  position: absolute;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.2);
  height: 60px;
  width: 100%;
  padding: 14px;
}
#filters-list .filter footer .buttons,
#filters-list #new-filter footer .buttons {
  float: right;
}
#filters-list .filter footer .buttons button.icon,
#filters-list #new-filter footer .buttons button.icon {
  opacity: 0.7;
  border: none;
  width: 36px;
  height: 45px;
  margin: -4px 0;
  padding: 0 0 10px;
}
#filters-list .filter footer .buttons button.icon:hover,
#filters-list #new-filter footer .buttons button.icon:hover {
  /*padding: 0 10px 10px 10px;*/
  background-color: transparent;
  opacity: 1;
}
#filters-list .filter footer .buttons svg,
#filters-list #new-filter footer .buttons svg {
  width: 26px;
  height: 26px;
}
#filters-list .filter footer .buttons svg path,
#filters-list #new-filter footer .buttons svg path {
  stroke: white;
}
#filters-list .filter.series-0 {
  background-color: #d64a48;
}
#filters-list .filter.series-1 {
  background-color: #c02d2b;
}
#filters-list .filter.series-2 {
  background-color: #40c26d;
}
#filters-list .filter.series-3 {
  background-color: #329d57;
}
#filters-list .filter.series-4 {
  background-color: #666666;
}
#filters-list .filter.series-5 {
  background-color: #4d4d4d;
}
#filters-list .filter.series-6 {
  background-color: #007aff;
}
#filters-list .filter.series-7 {
  background-color: #0062cc;
}
#filters-list .filter.series-8 {
  background-color: #40c26d;
}
#filters-list .filter.series-9 {
  background-color: #cca300;
}
#filters-list .filter.series-10 {
  background-color: #5856d6;
}
#filters-list .filter.series-11 {
  background-color: #5856d6;
}
#filters-list .filter.series-12 {
  background-color: #0097A7;
}
#filters-list .filter.series-13 {
  background-color: #006974;
}
#filters-list .filter.series-14 {
  background-color: #000;
}
.dialog.filters .actionKind {
  margin-top: 15px;
  width: 100%;
  height: 50px;
  font-size: 13px;
  text-transform: uppercase;
  font-weight: 700;
  font-family: sans-serif;
  text-shadow: rgba(0, 0, 0, 0.1) 0px 1px 0px;
}
bottom-panel {
  width: 100%;
  background-color: #f5f5f5;
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
  display: flex;
  height: 90px;
  margin-top: 30px;
  justify-content: center;
  flex-direction: column;
}
bottom-panel div {
  width: 100%;
  height: 30%;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
}
bottom-panel div:last-of-type {
  font-size: 10px;
  color: rgba(61, 61, 61, 0.7);
}
bottom-panel a {
  display: block;
  color: rgba(61, 61, 61, 0.8);
  padding: 10px;
}
bookmarklet-plugin h2 {
  font-size: 20px;
}
bookmarklet-plugin .anim {
  width: 400px;
  max-width: 100%;
}
bookmarklet-plugin .anim img {
  width: 100%;
  border-radius: 12px 0;
}
bookmarklet-plugin .button-link {
  background-color: #444;
  color: rgba(255, 255, 255, 0.8);
  border-radius: 4px;
  font-size: 16px;
  padding: 8px 15px;
}
bookmarklet-plugin textarea {
  border: none;
  width: 100%;
  font-family: Courier New;
  padding: 10px 0;
}
chrome-plugin .detail {
  padding-top: 30px;
}
chrome-plugin img {
  width: 100%;
  max-width: 340px;
  height: auto;
}
import-data ul {
  list-style-type: disc;
  padding-left: 17px;
}
import-data .dropzone {
  display: flex;
  width: 100%;
  height: 110px;
  background-color: rgba(0, 0, 0, 0.03);
  border-radius: 3px;
  border: 2px dashed #ccc;
  justify-content: center;
  align-items: center;
  margin: 20px 0;
  cursor: pointer;
  text-align: center;
}
import-data .dropzone span {
  font-size: 18px;
}
import-data .dropzone[dragover] {
  background-color: rgba(0, 0, 0, 0.06);
  border: 2px solid rgba(0, 0, 0, 0.8);
}
import-data .caption {
  border-bottom: 1px solid #ccc;
  margin: 10px 0;
  padding-bottom: 4px;
}
apps-control {
  margin: 25px;
  display: flex;
  flex-wrap: wrap;
}
@supports (display: grid) {
  apps-control {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(224px, 1fr));
    grid-gap: 25px;
  }
}
apps-control > a {
  height: 209px;
  min-width: 224px;
  border-radius: 3px;
  display: block;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 0 20px 2px rgba(0, 0, 0, 0.05);
  max-width: 325px;
  cursor: pointer;
  flex-grow: 1;
  flex-shrink: 1;
  margin: 10px;
  position: relative;
  max-width: 100%;
  flex-basis: 23%;
}
@supports (display: grid) {
  apps-control > a {
    margin: 0;
  }
}
apps-control a {
  color: black;
}
apps-control card {
  width: 100%;
  height: 100%;
  display: block;
}
apps-control card header {
  border-radius: 3px 3px 0 0;
  overflow: hidden;
  display: block;
  height: 100px;
  background-position: center;
  background-size: 122%;
  background-color: rgba(0, 0, 0, 0.044);
}
apps-control card .title {
  font-size: 18px;
}
apps-control card .description,
apps-control card .title,
apps-control card footer {
  padding: 10px;
  line-height: 20px;
}
apps-control card .description {
  padding-top: 0;
}
apps-control card footer {
  display: none;
}
apps-control card:hover {
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
}
.three-d-box {
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
}
[name=context-menu-items] .shadow {
  display: none;
}
@media screen and (max-width: 850px) {
  [name=context-menu-items] .shadow {
    display: block;
    background-color: rgba(0, 0, 0, 0.4);
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 12000;
    top: 0;
    left: 0;
  }
}
[name=context-menu-items] ul {
  will-change: transform;
  transform: translateZ(0);
  contain: layout style paint;
  z-index: 13000;
  position: absolute;
  background-color: white;
  min-width: 166px;
  border-radius: 3px;
  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
  padding: 5px 0;
  margin-left: -95px;
}
[name=context-menu-items] ul button {
  text-align: left;
  width: 100%;
  margin: 0 !important;
  border: none !important;
  color: black !important;
  font-size: 14px !important;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px  !important;
  font-family: sans-serif !important;
  white-space: nowrap;
}
[name=context-menu-items] ul button switch-button {
  margin-right: -10px;
  margin-left: 10px;
}
@media screen and (max-width: 850px) {
  [name=context-menu-items] ul button switch-button {
    margin-right: unset;
    margin-left: unset;
  }
}
[name=context-menu-items] ul button label {
  display: block;
}
[name=context-menu-items] ul button:hover {
  background-color: #eee;
}
@media screen and (max-width: 850px) {
  [name=context-menu-items] ul {
    margin: 0;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    border-radius: 0;
    transform: translate(0, 100%);
    transition: 0.15s ease-out;
  }
  [name=context-menu-items] ul button {
    padding: 15px 20px !important;
  }
  [name=context-menu-items] ul button:hover {
    background-color: white;
  }
}
[name=context-menu-items] ul li hr {
  margin-bottom: 2px;
  margin-top: 2px;
  border-color: rgba(0, 0, 0, 0.05);
}
[name=context-menu-items] ul li hr:after {
  display: none;
}
context-menu {
  padding: 1px 0 0 7px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
context-menu item {
  display: none;
  contain: strict;
  visibility: hidden;
}
context-menu button {
  border: none;
}
[dark] context-menu ul {
  background-color: #121212;
}
[dark] context-menu ul button,
[dark] context-menu ul button:hover {
  background-color: #121212;
  color: #cccccc;
}
search-control {
  display: block;
  height: 100%;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  justify-content: center;
  padding: 2vh 20px;
  box-sizing: border-box;
}
@media screen and (max-width: 850px) {
  search-control {
    padding: 0;
  }
}
search-control [name=suggest] {
  height: 40px;
  padding: 0 10px;
}
search-control [name=suggest] button {
  background-color: white;
  border-radius: 4px;
  border: 1px solid #d64a48;
  color: #d64a48;
  font-size: 12px;
  margin: 10px 2px;
  padding: 3px 9px;
}
search-control [name=search-box] {
  padding: 15px;
}
search-control [name=search-field] {
  border: 2px solid #e0e0e0;
  height: 36px;
  border-radius: 36px;
  overflow: hidden;
}
search-control [name=search-field] input {
  padding: 3px 16px;
  font-size: 16px;
  width: 100%;
  height: 100%;
  border: none;
}
search-control [name=center] {
  max-width: 1024px;
  width: 100%;
}
search-control content-target {
  overflow: visible;
  width: 100%;
}
search-control content-target > div {
  width: 100%;
}
search-control link-control context-menu {
  margin-left: 15px;
}
search-box {
  width: 100%;
  height: 100%;
  display: flex;
}
search-box > * {
  flex: 1 1 auto;
}
search-box > svg {
  margin: 13px -1px 14px 12px;
  opacity: 0.3;
}
search-box [name=create-rule] svg {
  fill: #d64a48;
  padding: 0 10px 2px 0px;
}
search-box input[type="text"] {
  width: 100%;
  height: 100%;
  border: none;
  padding: 1px 6px 0;
  background: none;
  font-size: 14px;
}
search-box input[type="text"]::-webkit-input-placeholder {
  color: rgba(0, 0, 0, 0.54);
}
search-box input[type="text"]:-moz-placeholder {
  color: rgba(0, 0, 0, 0.54);
}
search-box input[type="text"]::-moz-placeholder {
  color: rgba(0, 0, 0, 0.54);
}
search-box input[type="text"]:-ms-input-placeholder {
  color: rgba(0, 0, 0, 0.54);
}
search-box input[type="text"]:placeholder-shown {
  /* Standard one last! */
  color: rgba(0, 0, 0, 0.54);
}
search-box [name=suggest] {
  left: 0;
  margin-top: 45px;
  max-width: none;
  background-color: white;
  position: absolute;
  width: 100%;
  text-align: left;
  font-family: sans-serif;
  border-radius: 0;
}
search-box [name=suggest] .hint {
  width: 100%;
  line-height: 42px;
  font-size: 14px;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  background-color: rgba(0, 0, 0, 0.01);
  text-align: right;
  margin-top: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
}
search-box [name=suggest] .hint span {
  font-size: 16px;
}
search-box [name=suggest] .hint > svg {
  position: absolute;
  left: 7px;
  bottom: 7px;
  opacity: 0.3;
}
@media screen and (max-width: 850px) {
  search-box [name=suggest] .hint > svg {
    display: none;
  }
}
search-box [name=suggest] .hint > svg #left,
search-box [name=suggest] .hint > svg #right {
  opacity: 0.4;
}
search-box [name=suggest] li {
  clear: both;
}
search-box [name=suggest] > ul > li {
  text-transform: uppercase;
  font-size: 13px;
  color: rgba(0, 0, 0, 0.6);
}
search-box [name=suggest] > ul > li .section-title {
  padding: 10px 16px 0;
  color: rgba(0, 0, 0, 0.4);
  font-size: 11px;
  padding: 10px 0 2px 13px;
  text-transform: uppercase;
}
search-box [name=suggest] > ul > li ul li {
  color: rgba(0, 0, 0, 0.85);
  text-transform: none;
  text-indent: 10px;
  padding: 8px 14px;
  height: 46px;
}
search-box [name=suggest] > ul > li ul li img {
  width: 30px;
  height: 30px;
  float: left;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
}
search-box [name=suggest] > ul > li ul li .title {
  margin-top: 2px;
}
search-box [name=suggest] > ul > li ul li .title,
search-box [name=suggest] > ul > li ul li .sub {
  height: 14px;
  line-height: 12px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  width: calc(100% - 30px);
}
search-box [name=suggest] > ul > li ul li .sub {
  font-weight: normal;
  color: rgba(0, 0, 0, 0.5);
  font-size: 12px;
}
search-box [name=suggest] > ul > li ul li:hover,
search-box [name=suggest] > ul > li ul li.highlight {
  background-color: rgba(0, 0, 0, 0.06);
  cursor: pointer;
}
search-box .scope {
  display: flex;
  align-items: center;
  padding: 12px 10px 0;
}
search-box .scope label {
  display: block;
  white-space: nowrap;
  padding: 0 14px;
  color: rgba(0, 0, 0, 0.5);
  cursor: pointer;
}
search-box .scope .switch {
  width: 56px;
  height: 25px;
}
search-box .scope .switch span {
  color: rgba(0, 0, 0, 0.5);
  font-size: 12px;
  line-height: 14px;
  display: block;
  position: absolute;
  z-index: 1;
  -webkit-transition-duration: 500ms;
  -moz-transition-duration: 500ms;
  -o-transition-duration: 500ms;
  transition-duration: 500ms;
}
search-box .scope .switch span:last-of-type {
  text-indent: 20px;
}
search-box .scope .switch span:first-of-type {
  opacity: 0;
}
search-box .scope .switch.true span:first-of-type {
  opacity: 1;
  color: white;
}
search-box .scope .switch.true span:last-of-type {
  opacity: 0;
}
search-box .scope .switch:before {
  width: 60px;
  height: 24px;
  background: rgba(0, 0, 0, 0.1);
}
search-box .scope .switch.true:before {
  width: 60px;
  height: 24px;
  background: #d64a48;
}
search-box .scope .switch:after {
  height: 20px;
  width: 20px;
  background: white;
}
search-box .scope .switch.true:after {
  left: 38px !important;
}
search-box[focus] > svg {
  opacity: 1;
}
top-bar {
  width: 100%;
  display: block;
  box-sizing: border-box;
}
top-bar > div {
  padding: 25px;
  display: flex;
  justify-content: space-between;
  max-width: 1144px;
  margin: 0 auto;
}
top-bar > div a {
  display: block;
  justify-self: right;
}
top-bar > div div {
  display: flex;
}
top-bar > div div a {
  padding-left: 10px;
}
top-bar[dark] a {
  color: white;
}
top-bar[light] {
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
}
top-menu {
  transition: all ease 0.2s;
  align-items: center;
  background-color: white;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  box-sizing: border-box;
  color: #737373;
  display: flex;
  font-family: sans-serif;
  font-size: 14px;
  height: 44px;
  justify-content: space-between;
  left: 0;
  padding: 0 6px;
  position: fixed;
  right: 0;
  top: 0;
  top: constant(safe-area-inset-top);
  top: env(safe-area-inset-top);
  z-index: 3000;
  margin-left: 60px;
  width: calc(100% - 60px);
}
top-menu [name=context-menu-items] ul {
  margin-left: -155px;
}
@media screen and (max-width: 850px) {
  top-menu {
    margin-left: 0;
    width: 100%;
  }
}
top-menu svg {
  width: 20px;
  height: 20px;
}
top-menu .center {
  align-items: center;
  color: rgba(0, 0, 0, 0.84);
  display: flex;
  flex: 1 1 auto;
  font-family: 'Open sans', sans-serif;
  font-size: 16px;
  font-weight: 600;
  height: 100%;
  justify-content: center;
  text-align: center;
}
top-menu .center .low {
  font-weight: 400;
}
@media screen and (max-width: 850px) {
  top-menu .center {
    font-size: 15px;
  }
  top-menu .center .low {
    display: none;
  }
}
top-menu .center span.s {
  font-weight: 400;
  color: #b3b3b3;
}
top-menu .left,
top-menu .right {
  flex: 0 1 auto;
  display: flex;
}
top-menu .left button.icon,
top-menu .right button.icon {
  padding: 10px 4px;
}
top-menu .right {
  justify-content: flex-end;
}
top-menu [name=bad-connection] {
  display: none;
  fill: #d64a48;
  animation: blink normal 1.5s infinite ease-in-out;
}
[show-side-menu] top-menu {
  margin-left: 321px;
  width: calc(100% - 321px);
}
@media screen and (max-width: 850px) {
  [show-side-menu] top-menu {
    margin-left: 0;
    width: 100%;
  }
}
[show-side-bar] top-menu {
  width: calc(100% - 60px - 321px);
}
@media screen and (max-width: 850px) {
  [show-side-bar] top-menu {
    width: calc(100% - 321px);
    margin-left: 0;
    width: 100%;
  }
}
[show-side-menu][show-side-bar] top-menu {
  margin-left: 321px;
  width: calc(100% - 321px - 321px);
}
@media screen and (max-width: 850px) {
  [show-side-menu][show-side-bar] top-menu {
    margin-left: 0;
    width: 100%;
  }
}
[no-side-menu] top-menu button[name=side-menu] {
  display: none;
}
[no-side-menu][show-side-bar] top-menu {
  width: calc(100% - 60px - 321px);
}
@media screen and (max-width: 850px) {
  [no-side-menu][show-side-bar] top-menu {
    width: calc(100% - 321px);
  }
}
.not-authenticated top-menu {
  display: none;
}
@keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
top-menu[dark] a {
  color: white;
}
top-menu[light] {
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
}
body[urlprovider-mode="test"] top-menu {
  border-left: 1px solid red;
}
body[urlprovider-mode="local"] top-menu {
  border-left: 1px solid green;
}
.loginbar {
  background-color: transparent;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0.74)), color-stop(100% rgba(0, 0, 0, 0)));
  background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.74) 0%, rgba(0, 0, 0, 0) 100%);
  background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.74) 0%, rgba(0, 0, 0, 0) 100%);
  background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0.74) 0%, rgba(0, 0, 0, 0) 100%);
  background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.74) 0%, rgba(0, 0, 0, 0) 100%);
  background-image: linear-gradient(top, rgba(0, 0, 0, 0.74) 0%, rgba(0, 0, 0, 0) 100%);
  width: 100%;
  text-align: right;
  padding: 14px 0;
  font-family: sans-serif;
  position: absolute;
  height: 92px;
}
.loginbar .center {
  padding: 0 40px;
}
.loginbar div {
  float: left;
}
.loginbar .right-part {
  position: relative;
  padding: 0;
  float: right;
  z-index: 10;
  padding-right: 5px;
}
.loginbar a {
  color: rgba(255, 255, 255, 0.9);
  padding: 9px 12px;
  font-size: 14px;
  line-height: 33px;
}
.loginbar a:first-of-type {
  padding-left: 0;
}
.loginbar a:last-of-type {
  padding-right: 0;
}
.loginbar :hover {
  color: rgba(255, 255, 255, 0.98);
}
.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 30px auto 0;
  max-width: 1200px;
  padding: 10px 50px;
}
.top .membership a {
  padding: 0 10px;
}
.not-authenticated .top {
  margin: 0;
}
.no-js top-menu {
  display: none;
}
progress-bar {
  contain: strict;
  position: fixed;
  top: 0;
  width: 100%;
  left: 0;
  z-index: 50000;
  height: 2px;
}
progress-bar .bar {
  background-color: #d64a48;
  position: fixed;
  top: 0;
  width: 0;
  z-index: 50001;
  height: 2px;
  transition-timing-function: ease-out;
  contain: strict;
}
progress-bar.active .bar {
  -webkit-animation-name: progress;
  animation-name: progress;
  -webkit-animation-duration: 5s;
  -o-animation-duration: 5s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
progress-bar.done .bar {
  width: 100%;
}
@keyframes progress {
  from {
    width: 0;
  }
  40% {
    width: 40%;
  }
  to {
    width: 60%;
  }
}
@-webkit-keyframes progress {
  from {
    width: 0;
  }
  40% {
    width: 40%;
  }
  to {
    width: 60%;
  }
}
link-control context-menu {
  position: absolute;
  margin-left: 14px;
}
link-control context-menu svg {
  opacity: 0.7;
}
link-control context-menu:hover svg {
  opacity: 1;
}
link-control .select-overlay {
  position: absolute;
  margin-left: -1px;
  margin-top: 3px;
  width: 120px;
  fill: white;
}
link-control .select-overlay .disabled {
  opacity: 0.5;
  pointer-events: none;
  cursor: default;
}
link-control .select-overlay a {
  padding: 13px 16.5px 2px;
  background-color: #d64a48;
}
link-control .select-overlay a svg {
  vertical-align: baseline;
  width: 24px;
  height: 24px;
}
link-control .select-overlay a:hover {
  fill: black;
}
link-control .upper {
  width: calc(100% - 200px);
}
link-control[editing] .upper {
  width: 100%;
}
link-control[editing] .actions {
  display: block;
}
link-control[editing] .action-panel {
  display: block;
}
link-control {
  overflow: visible;
}
link-skeleton {
  overflow: auto;
}
link-skeleton,
link-control {
  contain: style;
  background-color: white;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  padding: 25px 0 32px;
  display: block;
}
@media screen and (max-width: 850px) {
  link-skeleton,
  link-control {
    contain: layout style paint;
    padding: 12px 0 5px;
  }
}
link-skeleton .button-panel,
link-control .button-panel {
  width: 100% !important;
}
@media screen and (max-width: 850px) {
  link-skeleton .button-panel,
  link-control .button-panel {
    padding: 0 10px;
  }
}
link-skeleton .button-panel button,
link-control .button-panel button {
  margin-left: 5px;
}
link-skeleton .highlights,
link-control .highlights {
  background-color: rgba(0, 0, 0, 0.04);
  margin-top: 15px;
  padding: 15px;
  width: 100%;
  border-radius: 2px;
  color: rgba(0, 0, 0, 0.8);
}
link-skeleton .highlights .highlight,
link-control .highlights .highlight {
  font-weight: bold;
}
link-skeleton .upper,
link-control .upper {
  width: calc(100% - 50px);
  float: left;
}
link-skeleton .upper > div,
link-control .upper > div {
  width: 100%;
}
link-skeleton .context,
link-control .context {
  float: left;
  margin-top: 4px;
}
link-skeleton .context svg,
link-control .context svg {
  margin-right: -10px;
}
link-skeleton .description,
link-control .description {
  width: 100%;
  font-weight: 100;
  overflow: hidden;
  padding: 8px 0;
}
link-skeleton .description *,
link-control .description * {
  font-size: 18px;
}
link-skeleton .description b,
link-control .description b {
  font-weight: 400;
}
link-skeleton .description a,
link-control .description a {
  color: #d64a48;
}
@media screen and (max-width: 850px) {
  link-skeleton .detail .description,
  link-control .detail .description {
    margin-top: 6px;
    clear: both;
    margin-left: -100px;
    width: calc(100% + 100px);
  }
  link-skeleton .detail .description *,
  link-control .detail .description * {
    font-size: 13px!important;
  }
  link-skeleton .select-overlay,
  link-control .select-overlay {
    margin-left: -5px;
    margin-top: -32px;
  }
  link-skeleton .select-overlay a,
  link-control .select-overlay a {
    padding: 12px 4.5px 0;
  }
}
link-skeleton .preview-back,
link-control .preview-back {
  background-position: center center;
  background-repeat: no-repeat;
  height: 120px;
  margin-top: 5px;
  opacity: 0.5;
  position: absolute;
  width: 120px;
  z-index: -1;
  margin-top: -126px;
}
link-skeleton .preview,
link-control .preview {
  width: 122px;
  height: 123px;
  margin-right: 30px;
  margin-top: 4px;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  background-color: transparent;
}
link-skeleton .preview img,
link-control .preview img,
link-skeleton .preview .bone,
link-control .preview .bone {
  width: 120px;
  height: 120px;
  z-index: 1;
  position: relative;
  border-radius: 3px;
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
  margin: 1px;
}
link-skeleton > div,
link-control > div,
link-skeleton > form > div,
link-control > form > div {
  position: relative;
  width: calc(100% - 154px);
}
@media all and (max-width: 850px) {
  link-skeleton > div,
  link-control > div,
  link-skeleton > form > div,
  link-control > form > div {
    width: calc(100% - 113px);
    overflow: visible;
  }
}
link-skeleton .url,
link-control .url,
link-skeleton h2,
link-control h2,
link-skeleton p,
link-control p {
  width: 100%;
  clear: both;
}
link-skeleton div,
link-control div {
  float: left;
}
link-skeleton a,
link-control a {
  color: black;
}
link-skeleton .url a,
link-control .url a {
  color: #d64a48;
  line-height: 20px;
}
link-skeleton .url,
link-control .url {
  height: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
  white-space: nowrap;
}
link-skeleton h2,
link-control h2 {
  padding: 2px 0 2px;
  float: left;
  max-height: 52px;
  overflow: hidden;
  line-height: 22px;
}
@media screen and (max-width: 60em) {
  link-skeleton h2,
  link-control h2 {
    width: 100%;
  }
}
link-skeleton h2 input,
link-control h2 input {
  padding: 2px 0 0;
  width: 100%;
  float: left;
}
link-skeleton h2 a,
link-control h2 a,
link-skeleton h2 input,
link-control h2 input {
  font-size: 23px;
  line-height: 21.7px;
  color: black;
}
link-skeleton h2 input,
link-control h2 input {
  line-height: 32px;
  padding-bottom: 2px;
}
link-skeleton .actions,
link-control .actions {
  width: 100px;
  text-align: right;
  display: none;
}
link-skeleton button:not(.context):not(.leave-edit),
link-control button:not(.context):not(.leave-edit) {
  margin: 10px 0 10px 10px;
}
link-skeleton p,
link-control p,
link-skeleton p textarea,
link-control p textarea,
link-skeleton rich-editor,
link-control rich-editor {
  font-size: 18px;
  color: #333333;
  white-space: normal;
}
link-skeleton editor,
link-control editor,
link-skeleton editor *,
link-control editor * {
  font-size: 14px;
  color: #333333;
}
link-skeleton p textarea,
link-control p textarea {
  height: 62px;
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto;
}
link-skeleton .top-info,
link-control .top-info {
  margin: 0 0 1px;
  width: 150px;
  color: #808080;
  font-size: 12px;
}
link-skeleton .top-info time,
link-control .top-info time,
link-skeleton .top-info span,
link-control .top-info span {
  float: left;
  padding-right: 10px;
}
@media screen and (max-width: 850px) {
  link-skeleton p,
  link-control p,
  link-skeleton p textarea,
  link-control p textarea {
    font-size: 13px !important;
  }
  link-skeleton h2 a,
  link-control h2 a,
  link-skeleton h2 input,
  link-control h2 input {
    font-size: 15px !important;
    line-height: 25px !important;
  }
  link-skeleton .preview,
  link-control .preview,
  link-skeleton .preview-back,
  link-control .preview-back {
    height: 92px !important;
    width: 92px !important;
    margin-left: 10px !important;
  }
  link-skeleton .preview-back,
  link-control .preview-back {
    margin-top: -92px !important;
  }
  link-skeleton .preview img,
  link-control .preview img,
  link-skeleton .preview .bone,
  link-control .preview .bone {
    height: 90px !important;
    width: 90px !important;
  }
  link-skeleton .preview,
  link-control .preview {
    margin-right: 10px !important;
  }
  link-skeleton .detail,
  link-control .detail {
    overflow: visible !important;
    width: calc(100% - 120px) !important;
  }
  link-skeleton .upper,
  link-control .upper {
    height: 90px !important;
  }
  link-skeleton .upper .url,
  link-control .upper .url {
    font-size: 12px !important;
  }
}
link-control[deleting] {
  display: none;
}
link-control[refreshing] {
  opacity: 0.7;
  pointer-events: none;
}
link-control[refreshing] context-menu {
  display: none;
}
link-control:after {
  content: "";
  display: table;
  clear: both;
}
link-control:target,
link-control.target {
  -webkit-animation-name: highlight;
  animation-name: highlight;
  -webkit-animation-duration: 1.8s;
  -o-animation-duration: 1.8s;
  -webkit-animation-timing-function: ease;
  animation-timing-function: ease;
}
@-webkit-keyframes highlight {
  0% {
    background-color: white;
  }
  20% {
    background-color: #444;
  }
  100% {
    border-left-color: white;
  }
}
@keyframes highlight {
  0% {
    background-color: white;
  }
  20% {
    background-color: #444;
  }
  100% {
    border-left-color: white;
  }
}
@media screen and (max-width: 60em) {
  .time {
    display: none !important;
  }
}
.image-selector {
  height: 348px;
  max-width: 370px;
  width: 100% !important;
  margin-top: 114px;
  overflow: visible !important;
  z-index: 30;
}
.image-selector section {
  padding: 0;
  overflow-y: scroll;
  margin: 10px;
  height: 333px;
}
.image-selector img {
  width: 100px;
  height: 100px;
  margin: 3px 5px;
  cursor: pointer;
}
@media screen and (max-width: 374px) {
  .image-selector img {
    margin: 0;
  }
}
.image-selector img:hover {
  outline: 2px solid #d64a48;
  outline-offset: -2px;
}
.image-selector header,
.image-selector footer {
  display: none;
}
.image-selector .img-holder.error {
  display: none !important;
}
.preview .hint {
  cursor: pointer;
  position: absolute;
  font-weight: bold;
  width: 120px;
  text-align: center;
  vertical-align: middle;
  z-index: 10;
  color: rgba(255, 255, 255, 0.95);
  font-size: 17px;
  line-height: 1.4;
  background-color: rgba(0, 0, 0, 0.2);
  height: 120px;
  padding-top: 38px;
  text-transform: uppercase;
}
@media all and (max-width: 850px) {
  .preview .hint {
    width: 90px;
    height: 90px;
    padding-top: 21px;
  }
}
.preview .hint:hover {
  outline: 2px solid #d64a48;
  outline-offset: -2px;
  background-color: transparent;
  color: transparent;
}
link-list {
  max-width: 1024px;
  display: block;
  width: 100%;
  scroll-behavior: smooth;
}
link-list .bone {
  background-color: #f5f5f5;
  border-radius: 3px;
}
[draggable] {
  cursor: move;
  /* fallback if grab cursor is unsupported */
  cursor: grab;
  cursor: -moz-grab;
  cursor: -webkit-grab;
}
[draggable]:active {
  cursor: grabbing;
  cursor: -moz-grabbing;
  cursor: -webkit-grabbing;
}
.dragging {
  opacity: 0.5;
}
.stack-list:hover div {
  color: rgba(0, 0, 0, 0.9);
}
.stack-list:hover svg {
  stroke: rgba(0, 0, 0, 0.9);
}
.stack-list {
  clear: both;
  width: 100%;
  border-radius: 3px;
  font-size: 11px;
  width: 100% !important;
  height: 35px;
  text-transform: uppercase;
  padding-left: 2px;
}
@media all and (max-width: 850px) {
  .stack-list {
    padding: 0 10px;
  }
}
.stack-list div {
  float: left;
  color: black;
  color: rgba(0, 0, 0, 0.5);
}
.stack-list .seperator {
  height: 1px;
  margin-right: 6px;
  margin-left: 6px;
}
.stack-list .seperator svg {
  margin-top: -3px;
  stroke: rgba(0, 0, 0, 0.5);
}
.paging {
  width: 100%;
  clear: both;
  text-align: center;
  padding: 30px;
}
.paging[busy] {
  opacity: 0.4;
}
.debug-size {
  position: absolute;
  border: 1px solid black;
  background-color: white;
  padding: 5px 10px;
  border-radius: 3px;
  z-index: 1;
  width: 100px;
}
.three-d-box {
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
}
stack-teaser {
  border-bottom: 1px solid #ebebeb;
  display: flex;
  padding: 25px 0;
}
@media (min-resolution: 2dppx) {
  stack-teaser {
    border-bottom-width: 0.5px;
  }
}
@media (min-resolution: 3dppx) {
  stack-teaser {
    border-bottom-width: 0.33333333px;
  }
}
@media (min-resolution: 4dppx) {
  stack-teaser {
    border-bottom-width: 0.25px;
  }
}
@media screen and (max-width: 850px) {
  stack-teaser {
    padding: 25px 10px;
  }
}
stack-teaser .details {
  display: flex;
  flex-direction: column;
}
stack-teaser .details auto-time {
  color: #808080;
  font-size: 12px;
}
stack-teaser .details h2 {
  color: #4d4d4d;
  font-family: "Open Sans", "lucida grande", "Segoe UI", arial, verdana, "lucida sans unicode", tahoma, sans-serif;
  font-size: 30px;
  font-weight: 100;
  line-height: 30px;
  padding-bottom: 5px;
}
@media screen and (max-width: 850px) {
  stack-teaser .details h2 {
    font-size: 16px;
  }
}
stack-teaser .details .description {
  font-size: 18px;
  color: #333;
  white-space: pre-wrap;
  line-height: 1.4;
}
@media screen and (max-width: 850px) {
  stack-teaser .details .description {
    font-size: 14px;
  }
}
stack-teaser img {
  border-radius: 3px;
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
  flex: 0 0 80px;
  height: 80px;
  margin-right: 25px;
  width: 80px;
}
stack-header {
  width: 100%;
  display: block;
}
@media all and (max-width: 850px) {
  stack-header {
    padding-top: 6px;
  }
}
stack-header [name=collaborators] {
  color: #999999;
  font-size: 11px;
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 0 0 0 2px;
}
stack-header [name=collaborators] svg {
  fill: #ccc;
  height: 10px;
  margin-right: 6px;
}
@media all and (max-width: 850px) {
  stack-header [name=collaborators] {
    padding: 0px 0px 0px 13px;
  }
}
stack-header [name=collaborators]:hover {
  color: #333;
}
stack-header [name=collaborators]:hover svg {
  fill: #333;
}
stack-header top {
  align-items: flex-start;
  display: flex;
  box-sizing: border-box;
}
stack-header top > * {
  flex: 1 1 auto;
}
@media all and (max-width: 850px) {
  stack-header top {
    padding: 0 8px 10px 10px;
  }
}
@media all and (max-width: 850px) {
  stack-header h3 {
    padding: 0 10px;
  }
}
stack-header > * {
  width: 100%;
}
stack-header editor,
stack-header editor * {
  font-size: 22px;
}
stack-header button-bar {
  align-items: center;
  justify-content: center;
  flex: 0 1 auto;
  display: flex;
  flex-wrap: nowrap;
}
stack-header button-bar context-menu {
  margin-right: 1px;
}
stack-header button-bar button.icon {
  white-space: nowrap;
  opacity: 0.7;
  display: flex;
  justify-items: center;
  align-items: center;
  padding: 6px 0px;
  font-size: 14px;
}
stack-header button-bar button.stack-context {
  margin: 0 -2px 0 7px;
}
stack-header button-bar [name=share] svg {
  margin: 0 10px 0;
  width: 17px;
  height: auto;
}
stack-header button-bar [name=access] svg {
  margin: 0px 10px 0 15px;
  width: 17px;
  height: auto;
}
stack-header button-bar button.icon:hover {
  opacity: 1;
}
stack-header button-bar button.icon:hover svg {
  fill: black;
}
stack-header button-bar > * {
  flex: 1 1 auto;
}
.stack-details {
  max-width: 1024px;
  width: 100%;
}
.stack-details:hover .stack-actions {
  display: block;
}
.stack-editing .stack-actions,
.edit .stack-actions {
  display: block !important;
}
.authenticated .stack,
.authenticated stack-control {
  padding-top: 2vh;
}
.stack,
stack-control {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 50px;
  box-sizing: border-box;
  min-height: 100%;
  /*h1 input, h3 input {
        width: calc(~"100% - 100px");
    }*/
}
.stack .search-summary,
stack-control .search-summary {
  color: rgba(0, 0, 0, 0.5);
}
@media all and (max-width: 850px) {
  .stack .search-summary,
  stack-control .search-summary {
    padding: 0 10px;
  }
}
.stack .search-summary svg,
stack-control .search-summary svg {
  fill: #d64a48;
  padding-bottom: 2px;
  margin-left: -4px;
}
.stack .context,
stack-control .context {
  float: right;
  clear: right;
  width: 18px;
}
.stack .inline-actions,
stack-control .inline-actions {
  width: 100%;
  clear: both;
  height: 28px;
}
.stack .message,
stack-control .message {
  color: #aaa;
  font-size: 25px;
  margin: 65px 0;
  line-height: 1.2;
}
.stack input,
stack-control input,
.stack textarea,
stack-control textarea {
  border: none;
  border-bottom: 1px solid #cccccc;
  width: 100%;
  transition: all 0.2s ease;
}
.stack input:focus,
stack-control input:focus,
.stack textarea:focus,
stack-control textarea:focus {
  border-bottom-color: #d64a48;
}
.stack .stack-context,
stack-control .stack-context {
  margin-top: 10px;
}
.stack .stack-actions,
stack-control .stack-actions {
  display: none;
  width: 100%;
  text-align: right;
  float: right;
  clear: both;
}
.stack h1,
stack-control h1 {
  line-height: 38px;
  font-size: 38px;
  color: #4d4d4d;
  font-weight: lighter;
  margin-top: 0;
  float: left;
}
.stack h1 input,
stack-control h1 input {
  font-size: 38px;
  padding: 15px 0 9px;
  color: #4d4d4d;
  line-height: 56px;
  font-weight: lighter;
  width: 100%;
  padding: 0;
}
.stack h3,
stack-control h3,
.stack h3 textarea,
stack-control h3 textarea {
  font-size: 22px;
  color: #666666;
  line-height: 1.4;
  clear: both;
  font-weight: 100;
}
.stack h3 b,
stack-control h3 b,
.stack h3 textarea b,
stack-control h3 textarea b {
  font-weight: 400;
}
.stack h3 textarea,
stack-control h3 textarea {
  padding: 0;
}
.stack .profile-action,
stack-control .profile-action {
  clear: both;
  width: 100%;
  padding-top: 20px;
  overflow: auto;
  padding-right: 8px;
  margin-bottom: 25px;
  max-width: 1024px;
}
.stack .profile-action .actions,
stack-control .profile-action .actions {
  float: right;
  width: 160px;
  text-align: right;
  white-space: nowrap;
}
.stack .profile,
stack-control .profile {
  max-width: calc(100% - 130px);
  float: left;
  height: 60px;
}
.stack .profile .left,
stack-control .profile .left {
  width: 40px;
  height: 40px;
  float: left;
}
.stack .profile .left img,
stack-control .profile .left img {
  width: 40px;
  height: 40px;
  position: relative;
  float: left;
  border-radius: 40px;
}
.stack .profile .badge,
stack-control .profile .badge {
  float: left;
  font-family: sans-serif;
  font-size: 12px;
  padding: 0 10px;
}
.stack .profile .badge .name,
stack-control .profile .badge .name {
  color: #d64a48;
}
.stack .profile .badge .date,
stack-control .profile .badge .date {
  color: #969696;
  margin-top: -2px;
}
.stack .action-panel,
stack-control .action-panel {
  width: 100%;
  text-align: right;
}
.edit h1 {
  width: 100%;
}
@media all and (max-width: 850px) {
  .stack,
  stack-control {
    margin: 0 !important;
    padding: 0 !important;
  }
  .stack .profile,
  stack-control .profile {
    margin: 10px !important;
  }
}
stack-menu {
  position: fixed;
  top: 45px;
  height: 36px;
  width: 100%;
  display: flex;
  align-items: space-between;
  border-bottom: 1px solid #ececec;
  left: 0;
  justify-content: center;
  align-items: center;
  background: white;
  z-index: 5;
}
stack-menu div {
  flex: 1 1 auto;
  text-transform: uppercase;
  color: #ccc;
  font-size: 12px;
  text-align: center;
}
.three-d-box {
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
}
.side-menu {
  opacity: 0;
  transition: all ease 0.2s;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-color: white;
  box-shadow: 0 0 30px #ededed;
  box-sizing: border-box;
  contain: strict;
  display: block;
  flex: 0 0 260px;
  height: 100%;
  overflow: auto;
  overflow-x: hidden;
  overflow-y: auto;
  padding-top: constant(safe-area-inset-top);
  padding-top: env(safe-area-inset-top);
  width: 260px;
  max-width: 260px;
  z-index: 2000;
  padding: 5px 4px;
  position: absolute;
  transform: translate(-100%, 0);
}
.side-menu > div {
  display: flex;
  flex-direction: column;
  flex: 1 1 100%;
  font-family: sans-serif;
  font-size: 13px;
  justify-content: flex-start;
  padding: 8px;
  box-sizing: border-box;
  width: 100%;
}
.side-menu * {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.side-menu .category {
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  color: #d64a48;
  font-family: arial;
  font-size: 11px;
  font-weight: 500;
  padding: 8px 0 2px 4px;
  text-transform: uppercase;
}
.side-menu .item {
  transition: max-height 0.4s;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  justify-content: flex-start;
  max-height: 30px;
  overflow: hidden;
  margin: 2px 0;
}
.side-menu .item .details {
  align-items: center;
  color: rgba(0, 0, 0, 0.9);
  display: flex;
  flex: 0 0 30px;
  font-size: 13px;
}
.side-menu .item .details .icon {
  transition: all 0.1s;
  align-items: center;
  display: flex;
  flex: 0 0 40px;
  justify-content: center;
  margin-left: -4px;
  margin-right: 2px;
}
.side-menu .item .details .icon svg {
  margin-top: 1px;
  fill: rgba(0, 0, 0, 0.9);
}
.side-menu .item .details .icon img {
  border-radius: 20px;
  height: 20px;
  padding: 0;
  width: 20px;
}
.side-menu .item .details .title {
  flex: 1 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.side-menu .item .details .count {
  flex: 0 0 36px;
  font-size: 10px;
  opacity: 0.8;
  text-align: center;
}
.side-menu .item[open] {
  flex: 1 1 auto;
}
.side-menu .item[open] > .details .icon {
  -webkit-transform: scaleY(-1);
  transform: scaleY(-1);
}
.side-menu .item[over] {
  background-color: #cccccc;
  border-radius: 20px;
}
.side-menu .item[over] .details .title {
  color: black;
}
.side-menu .item:hover > .details {
  background-color: #fafafa;
  border-radius: 20px;
}
.side-menu .item:hover > .details .title {
  color: black;
}
.side-menu .item[active] > .details {
  background-color: #ededed;
  border-radius: 20px;
}
.side-menu .item[active] > .details .title {
  color: black;
}
[promote] .side-menu {
  height: calc(100% - 49px);
}
[show-side-menu] .side-menu {
  opacity: 1;
  position: relative;
  transform: translate(0, 0);
}
.not-authenticated .side-menu {
  display: none;
}
@media screen and (max-width: 850px) {
  [show-side-menu] .side-menu {
    position: absolute;
    z-index: 10002;
    box-shadow: none;
  }
  [show-side-menu] div[name=body-overlay] {
    opacity: 1;
    pointer-events: all;
  }
}
div[name=body-overlay] {
  transition: opacity 0.5s ease-in-out;
  position: absolute;
  z-index: 10001;
  background-color: rgba(0, 0, 0, 0.6);
  opacity: 0;
  pointer-events: none;
  top: 0;
  top: constant(safe-area-inset-top);
  top: env(safe-area-inset-top);
  left: 0;
  width: 100vw;
  height: 100vh;
}
@keyframes smooth-entry-reverse {
  0% {
    opacity: 0;
    transform: translateY(2em);
  }
  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}
@-webkit-keyframes smooth-entry-reverse {
  0% {
    opacity: 0;
    transform: translateY(2em);
  }
  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}
.login {
  background-color: white;
  background-image: url("/images/banners/stack-letters-dark.jpg");
  background-repeat: no-repeat;
  background-size: 100% 650px;
  display: block;
  overflow: auto;
  overflow-y: auto;
  overflow-x: hidden;
}
@media screen and (max-width: 850px) {
  .login {
    background-size: 100% 802px;
  }
}
.login section.screenshot {
  width: 100%;
  clear: both;
  text-align: center;
  position: relative;
}
.login section.screenshot img {
  width: 100%;
  max-width: 1600px;
  animation: 0.7s ease 0s normal none 1 running smooth-entry-reverse;
}
.login .app-icons {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.login .app-icons svg {
  filter: grayscale(100%);
  opacity: 0.3;
  padding: 0 20px;
  transition: all 0.7s;
}
.login .app-icons a:hover svg {
  filter: grayscale(0%);
  opacity: 1;
}
.login .features {
  overflow: auto;
  width: 100%;
  margin: 0 auto 20px;
  text-align: center;
  padding: 0 20px 20px 20px;
}
.login .features svg {
  opacity: 0.4;
  padding-bottom: 5px;
  padding-right: 1px;
  vertical-align: middle;
}
@media screen and (max-width: 60em) {
  .login .features {
    width: 100%;
    text-align: center;
  }
}
.login .features li {
  width: calc(50%);
  float: left;
  padding: 25px;
  height: 148px;
}
@media screen and (max-width: 60em) {
  .login .features li {
    width: 100%;
    clear: both;
  }
}
.login .features li h1 {
  font-size: 28px;
  font-weight: lighter;
  color: rgba(0, 0, 0, 0.51);
  padding: 10px 0;
}
@media screen and (max-width: 60em) {
  .login .features li h1 {
    text-align: center;
  }
}
.login .features li p {
  font-size: 19px;
  color: rgba(0, 0, 0, 0.75);
  line-height: 1.5;
}
.login .center {
  max-width: 1200px;
  margin: 0 auto;
  float: none;
  overflow: auto;
}
@media screen and (max-width: 850px) {
  .login .center {
    padding: 0 6px !important;
  }
}
.login .column {
  min-height: calc(100% - 100px);
  height: auto;
}
.login .column.left {
  width: calc(100% - 350px);
}
@media screen and (max-width: 850px) {
  .login .column.left {
    width: 100%;
    margin-top: 90px;
  }
}
.login .column.left .info-box {
  margin: 64px 0;
  padding: 50px;
  color: rgba(255, 255, 255, 0.95);
  text-align: center;
  font-size: 18px;
  line-height: 1.6;
}
.login .column.left .info-box div {
  background: rgba(0, 0, 0, 0.15) none repeat scroll 0 0;
  box-shadow: 0 0 30px 30px rgba(0, 0, 0, 0.15);
}
@media screen and (max-width: 850px) {
  .login .column.left .info-box {
    margin: 0;
    padding: 10px;
  }
}
.login .column.left .info-box header {
  font-size: 38px;
  line-height: 80px;
  margin: 0 auto;
  width: 100%;
  font-weight: 100;
}
@media screen and (max-width: 850px) {
  .login .column.left .info-box header {
    line-height: 50px;
  }
}
.login .column.right {
  width: 350px;
  clear: right;
  padding-right: 30px;
  padding-bottom: 60px;
  position: relative;
  z-index: 5;
}
@media screen and (max-width: 850px) {
  .login .column.right {
    width: 100%;
    padding-top: 30px;
    padding-bottom: 30px;
    padding-right: 0;
  }
}
.login .column.right .form {
  color: rgba(0, 0, 0, 0.6);
  background-color: #f2f2f2;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 13px 58px 0 rgba(0, 0, 0, 0.5);
  margin: 20px 0 0;
  /*@media @break-low {
                margin: 8% auto;
            }*/
}
@media screen and (max-width: 850px) {
  .login .column.right .form {
    margin: 0 auto;
  }
}
.login .column.right .form section {
  padding: 4px 14px 8px;
}
.login .privacy-brief {
  margin-top: 30px;
  max-width: 320px;
  width: 100%;
}
@media screen and (max-width: 850px) {
  .login .privacy-brief {
    display: none;
  }
}
.login .privacy-brief li {
  padding: 15px 10px;
  text-align: center;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.6);
}
.plugin > header {
  font-family: open Sans;
  font-weight: lighter;
  color: white;
  text-align: center;
  font-size: 40px;
  margin: 75px;
}
.plugin > header div {
  padding: 50px;
  font-size: 25px;
}
.three-d-box {
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
}
auth-switcher {
  height: 100%;
  width: 100%;
  outline: 1px solid #e8e8e8;
}
@media (min-resolution: 2dppx) {
  auth-switcher {
    outline-width: 0.5px;
  }
}
@media (min-resolution: 3dppx) {
  auth-switcher {
    outline-width: 0.33333333px;
  }
}
@media (min-resolution: 4dppx) {
  auth-switcher {
    outline-width: 0.25px;
  }
}
auth-switcher > div {
  display: flex;
  height: 100%;
  width: 100%;
}
user-registration .help-text {
  padding: 10px;
  text-align: center;
}
user-registration-2 {
  transition: all .6s ease;
  transform: translateX(0);
}
user-registration-2[slide] {
  transform: translateX(-100%);
}
user-login {
  opacity: 0;
  transition: opacity 0.6s ease-in-out;
}
user-login [name=forgot-password] {
  margin: 10px 0;
  display: none;
  cursor: pointer;
}
.break user-login {
  position: absolute;
  z-index: 10000;
}
login-flow {
  height: 100%;
  width: 100%;
  display: block;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
login-flow .content {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
login-flow .form {
  color: rgba(0, 0, 0, 0.6);
  background-color: #f2f2f2;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 13px 58px 0 rgba(0, 0, 0, 0.2);
  padding-bottom: 5px;
}
login-flow .form button {
  width: 100%;
}
login-flow logo {
  background-image: url(/build/web/b4d5765e3e30e889feabcbacb0bb5931.svg);
  width: 201px;
  height: 49px;
  display: block;
  margin: 0 auto;
  background-repeat: no-repeat;
  position: absolute;
  left: 50%;
  margin-left: -100px;
  top: 7%;
  z-index: 1;
}
login-flow mini-progress {
  display: block;
  height: 2px;
  width: 30%;
  background-color: #ccc;
  position: relative;
  transition: opacity 1s ease-in-out;
}
login-flow mini-progress div {
  background-color: #d64a48;
  width: 0%;
  z-index: 3001;
  height: 2px;
  transition-timing-function: ease-in;
  contain: strict;
}
login-flow mini-progress.active div {
  -webkit-animation-name: progress;
  animation-name: progress;
  -webkit-animation-duration: 1s;
  -o-animation-duration: 1s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
login-flow mini-progress.done div {
  width: 100%;
}
@keyframes progress {
  from {
    width: 0;
  }
  40% {
    width: 40%;
  }
  to {
    width: 60%;
  }
}
@-webkit-keyframes progress {
  from {
    width: 0;
  }
  40% {
    width: 40%;
  }
  to {
    width: 60%;
  }
}
login-flow background-image {
  background-image: url(/build/web/blissful.jpg);
  background-position: center;
  height: 100%;
  width: 100%;
  background-size: cover;
  display: block;
  position: absolute;
  transition: all 1s ease-in-out;
  z-index: -1;
}
login-flow background-image.unfocus {
  filter: blur(6px);
  opacity: 0.7;
}
user-login-2.adaptive .error,
user-registration-2.adaptive .error,
forgot-password-2.adaptive .error,
activationmail-info.adaptive .error,
external-user-registration-2.adaptive .error,
break-reader.adaptive .error,
.adaptive .error {
  color: black;
  font-size: 11px;
  text-transform: uppercase;
  padding: 0 15px;
  display: block;
}
user-login-2.adaptive .error:empty,
user-registration-2.adaptive .error:empty,
forgot-password-2.adaptive .error:empty,
activationmail-info.adaptive .error:empty,
external-user-registration-2.adaptive .error:empty,
break-reader.adaptive .error:empty,
.adaptive .error:empty {
  display: none;
}
user-login-2.adaptive header,
user-registration-2.adaptive header,
forgot-password-2.adaptive header,
activationmail-info.adaptive header,
external-user-registration-2.adaptive header,
break-reader.adaptive header,
.adaptive header {
  flex: 0 0 42px;
  font-family: sans-serif;
  font-size: 15px;
}
user-login-2.adaptive header button[name=back] svg,
user-registration-2.adaptive header button[name=back] svg,
forgot-password-2.adaptive header button[name=back] svg,
activationmail-info.adaptive header button[name=back] svg,
external-user-registration-2.adaptive header button[name=back] svg,
break-reader.adaptive header button[name=back] svg,
.adaptive header button[name=back] svg {
  padding-top: 4px;
}
user-login-2.adaptive footer,
user-registration-2.adaptive footer,
forgot-password-2.adaptive footer,
activationmail-info.adaptive footer,
external-user-registration-2.adaptive footer,
break-reader.adaptive footer,
.adaptive footer {
  background-color: #f0eff5;
  flex: 0 0 content;
  padding: 10px 10px 7px;
}
user-login-2.adaptive footer button,
user-registration-2.adaptive footer button,
forgot-password-2.adaptive footer button,
activationmail-info.adaptive footer button,
external-user-registration-2.adaptive footer button,
break-reader.adaptive footer button,
.adaptive footer button {
  background-color: #4482fd;
  width: 100%;
  font-family: "open sans";
  text-transform: uppercase;
  font-weight: 400;
  font-size: 12px;
  padding: 11px;
}
user-login-2.adaptive > div,
user-registration-2.adaptive > div,
forgot-password-2.adaptive > div,
activationmail-info.adaptive > div,
external-user-registration-2.adaptive > div,
break-reader.adaptive > div,
.adaptive > div {
  background-color: white;
  border-radius: 0 !important;
  display: flex;
  flex-direction: column;
}
user-login-2.adaptive .field:first-of-type,
user-registration-2.adaptive .field:first-of-type,
forgot-password-2.adaptive .field:first-of-type,
activationmail-info.adaptive .field:first-of-type,
external-user-registration-2.adaptive .field:first-of-type,
break-reader.adaptive .field:first-of-type,
.adaptive .field:first-of-type {
  border-top: 0.5px solid #c9c8cc !important;
}
user-login-2.adaptive .field:last-child,
user-registration-2.adaptive .field:last-child,
forgot-password-2.adaptive .field:last-child,
activationmail-info.adaptive .field:last-child,
external-user-registration-2.adaptive .field:last-child,
break-reader.adaptive .field:last-child,
.adaptive .field:last-child {
  border-bottom: 0.5px solid #c9c8cc;
}
user-login-2.adaptive social-providers,
user-registration-2.adaptive social-providers,
forgot-password-2.adaptive social-providers,
activationmail-info.adaptive social-providers,
external-user-registration-2.adaptive social-providers,
break-reader.adaptive social-providers,
.adaptive social-providers {
  margin: 0 10px;
}
user-login-2.adaptive section,
user-registration-2.adaptive section,
forgot-password-2.adaptive section,
activationmail-info.adaptive section,
external-user-registration-2.adaptive section,
break-reader.adaptive section,
.adaptive section {
  flex: 1 1;
  background-color: #f2f2f2;
  overflow-x: scroll;
  padding-top: 20px;
}
user-login-2.adaptive section > p,
user-registration-2.adaptive section > p,
forgot-password-2.adaptive section > p,
activationmail-info.adaptive section > p,
external-user-registration-2.adaptive section > p,
break-reader.adaptive section > p,
.adaptive section > p {
  padding: 15px;
}
[dark] .adaptive section,
[dark] .adaptive footer {
  background-color: black;
}
[dark] .adaptive header {
  color: #c9bdda;
}
[dark] .adaptive header svg {
  fill: #c9bdda;
}
[dark] .adaptive > div {
  background-color: black;
}
[dark] .adaptive .field:first-of-type {
  border-top: 1px solid #272727 !important;
}
[dark] .adaptive .field:last-child {
  border-bottom: 1px solid #272727;
}
[dark] .adaptive .button-panel button {
  color: #c9bdda;
}
[dark] .adaptive social-providers button.light {
  background-color: #aeaeae;
}
alternate-emails[busy] {
  pointer-events: none;
}
alternate-emails[busy] * {
  opacity: 0.8;
}
alternate-emails fieldset:first-of-type {
  margin-top: 0  !important;
}
alternate-emails button {
  margin-top: 0 !important;
}
alternate-emails .email {
  display: flex;
  color: #a6a6a6;
  align-items: center;
  font-size: 13px;
}
alternate-emails .email div {
  flex: 1 1;
}
alternate-emails .email .status {
  flex: 0 0 65px;
  font-size: 11px;
}
alternate-emails .email button,
alternate-emails .email .filler {
  flex: 0 0 30px;
  border: none;
}
alternate-emails .email button svg,
alternate-emails .email .filler svg {
  height: 9px;
  width: auto;
  fill: #d64a48;
}
.allow-app {
  width: 100%;
}
.allow-app img {
  float: left;
  padding-right: 7px;
  max-width: 72px;
  margin: 6px 8px;
}
.allow-app .app-name {
  font-size: 18px;
  width: 100%;
  padding: 11px 0 13px;
}
authorized-applications .package-index {
  margin: 0;
}
authorized-applications .package-index card {
  height: 226px;
}
authorized-applications .package-index card button {
  margin: 9px !important;
  float: right;
}
authorized-applications .access-rights {
  font-size: 10px;
  color: #777;
  padding-bottom: 0;
  margin-bottom: 0;
  margin-top: -10px;
  text-transform: uppercase;
}
.box.browser-notifications {
  padding-bottom: 20px;
}
login-providers .provider {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
login-providers .provider .big {
  width: calc(100% - 60px);
  padding-left: 20px;
  color: #a6a6a6;
}
login-providers .provider .icon {
  flex-basis: 30px;
  width: auto;
  padding: none;
}
login-providers .provider .icon svg {
  padding-bottom: 2px;
  width: 30px;
  fill: #ccc;
}
login-providers .provider .action {
  flex-basis: 80px;
  width: auto;
  text-align: right;
}
login-providers .provider .action svg {
  fill: #d64a48;
  width: 11px;
  padding-bottom: 3px;
}
login-providers .provider.remove,
login-providers .provider.add {
  cursor: pointer;
}
login-providers .provider.remove .big,
login-providers .provider.sole .big {
  color: #1a1a1a;
}
login-providers .provider:hover .big {
  color: black;
}
login-providers .provider.facebook:hover .icon svg,
login-providers .provider.facebook.remove .icon svg,
login-providers .provider.facebook.sole .icon svg {
  fill: #3b5998;
}
login-providers .provider.twitter:hover .icon svg,
login-providers .provider.twitter.remove .icon svg,
login-providers .provider.twitter.sole .icon svg {
  fill: #4099ff;
}
login-providers .provider.google:hover .icon svg,
login-providers .provider.google.remove .icon svg,
login-providers .provider.google.sole .icon svg {
  fill: #5080f1;
}
login-providers .provider.facebook .icon svg {
  margin-left: -3px;
  margin-right: 3px;
}
change-password button {
  margin-top: 0 !important;
}
.package-index {
  margin: 25px;
  display: flex;
  flex-wrap: wrap;
}
@supports (display: grid) {
  .package-index {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(224px, 1fr));
    grid-gap: 25px;
  }
}
.package-index a {
  display: block;
  color: black;
}
.package-index card {
  height: 209px;
  min-width: 224px;
  border-radius: 3px;
  display: block;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 0 20px 2px rgba(0, 0, 0, 0.05);
  max-width: 325px;
}
.package-index card header {
  border-radius: 3px 3px 0 0;
  overflow: hidden;
  display: block;
  height: 100px;
  background-position: center;
  background-size: 122%;
  background-color: rgba(0, 0, 0, 0.044);
}
.package-index card .title {
  font-size: 18px;
}
.package-index card .description,
.package-index card .title,
.package-index card footer {
  padding: 10px;
}
.package-index card .description {
  padding-top: 0;
}
.package-index card footer {
  display: none;
}
.package-index a card {
  cursor: pointer;
}
.package-index a card:hover {
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
}
manage-index .box {
  width: 100%;
  height: 105px;
  margin: 10px 0;
  max-width: unset;
  position: relative;
}
@supports (display: grid) {
  manage-index .box {
    margin: 0;
  }
}
manage-index .box div:last-of-type {
  border-top: 1px solid #d6d6d6;
  padding-top: 13px;
}
.anim {
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}
.anim * {
  pointer-events: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
}
.anim img {
  border-radius: 4px;
}
.anim > div {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4MCIgaGVpZ2h0PSI4MCIgdmlld0JveD0iMCAwIDgwLjAwMDAwMyA4MC4wMDAwMDIiPjxnIHRyYW5zZm9ybT0ibWF0cml4KC45NTc4NCAwIDAgLjk1Nzg0IC0zMjkuNDUyIC00NDguMDI0KSI+PGNpcmNsZSByPSI0MS43NjEiIGN5PSI1MDkuNTA1IiBjeD0iMzg1LjcxNCIvPjxwYXRoIHRyYW5zZm9ybT0ibWF0cml4KC41NDggMCAwIC41NTAxMiAxODUuMDUgMjM3LjcpIiBkPSJNNDAzLjIwNiA0OTQuMDg4bC0zMC42NDYgMTcuNjk0LTMwLjY0NyAxNy42OTRWNDU4LjdsMzAuNjQ3IDE3LjY5NXoiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLXdpZHRoPSIzLjgwMyIvPjwvZz48L3N2Zz4=);
  content: '';
  position: absolute;
  width: 80px;
  height: 80px;
  opacity: 0.6;
  transition: opacity ease-in-out 0.5s;
}
.playing > div {
  opacity: 0 !important;
}
.anim:hover > div {
  opacity: 0.9;
  transition: opacity ease-in-out 0.5s;
}

/*# sourceMappingURL=4d8c1c777d3c723b68a3.style.css.map*/