.hide {
   display: none;
}

@-webkit-keyframes fadeIn {
   0% {
      opacity: 0;
   }

   100% {
      opacity: 1;
   }
}

@keyframes fadeIn {
   0% {
      opacity: 0;
   }

   100% {
      opacity: 1;
   }
}

.fadeIn {
   -webkit-animation-name: fadeIn;
   animation-name: fadeIn;
   -webkit-animation-duration: 500ms;
   animation-duration: 500ms;
   -webkit-animation-fill-mode: both;
   animation-fill-mode: both;
}
@keyframes awn-fade-in {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes awn-fade-out {
    0% {
        opacity: 1
    }

    to {
        opacity: 0
    }
}

@keyframes awn-slide-right {
    0% {
        left: 100%;
        opacity: 0
    }

    to {
        left: 0;
        opacity: 1
    }
}

@keyframes awn-slide-left {
    0% {
        opacity: 0;
        right: 100%
    }

    to {
        opacity: 1;
        right: 0
    }
}

@keyframes awn-bar {
    0% {
        right: 100%
    }

    to {
        right: 0
    }
}

.awn-popup-loading-dots,
.awn-popup-loading-dots:after,
.awn-popup-loading-dots:before {
    animation-fill-mode: both;
    animation: awn-loading-dots 1s ease-in-out infinite;
    background: #fff;
    border-radius: 50%;
    height: 6px;
    width: 6px
}

.awn-popup-loading-dots {
    animation-delay: -.16s;
    color: #fff;
    display: inline-block;
    margin-left: 24px;
    position: relative
}

.awn-popup-loading-dots:after,
.awn-popup-loading-dots:before {
    content: "";
    position: absolute;
    top: 0
}

.awn-popup-loading-dots:before {
    animation-delay: -.32s;
    left: -16px
}

.awn-popup-loading-dots:after {
    left: 16px
}

@keyframes awn-loading-dots {

    0%,
    80%,
    to {
        box-shadow: 0 0 0 0
    }

    40% {
        box-shadow: 0 0 0 2px
    }
}

#awn-popup-wrapper {
    align-items: center;
    animation-fill-mode: both;
    animation-name: awn-fade-in;
    animation-timing-function: ease-out;
    background: rgba(0, 0, 0, .7);
    bottom: 0;
    display: flex;
    justify-content: center;
    left: 0;
    opacity: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 99999
}

#awn-popup-wrapper.awn-hiding {
    animation-name: awn-fade-out
}

#awn-popup-wrapper .awn-popup-body {
    background: #fff;
    border-radius: 6px;
    font-size: 14px;
    max-width: 500px;
    min-width: 320px;
    padding: 24px;
    position: relative;
    word-break: break-word
}

#awn-popup-wrapper .awn-popup-body.awn-popup-confirm {
    align-items: center;
    display: flex;
    flex-direction: column
}

#awn-popup-wrapper .awn-popup-body.awn-popup-confirm .fa {
    color: #c26700;
    font-size: 44px
}

#awn-popup-wrapper .awn-popup-body.awn-popup-async-block {
    background: transparent;
    color: #fff;
    font-size: 32px;
    font-weight: 700;
    text-align: center
}

#awn-popup-wrapper .awn-popup-title {
    font-size: 14px;
    font-weight: 700;
    margin-top: 8px;
    text-transform: uppercase
}

#awn-popup-wrapper .awn-buttons {
    display: flex;
    justify-content: space-between;
    margin-top: 24px;
    width: 100%
}

#awn-popup-wrapper .awn-buttons .awn-btn {
    border: 0;
    border-radius: 4px;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    line-height: 32px;
    transition: background .2s linear;
    width: 45%
}

#awn-popup-wrapper .awn-buttons-1 .awn-btn {
    width: 100%
}

#awn-popup-wrapper .awn-buttons .awn-btn-success {
    background: #40871d
}

#awn-popup-wrapper .awn-buttons .awn-btn-success:hover {
    background: #367218
}

#awn-popup-wrapper .awn-buttons .awn-btn-cancel {
    background: #1c76a6
}

#awn-popup-wrapper .awn-buttons .awn-btn-cancel:hover {
    background: #186690
}

#awn-toast-container {
    bottom: 24px;
    box-sizing: border-box;
    position: fixed;
    right: 24px;
    z-index: 99998
}

#awn-toast-container.awn-top-left,
#awn-toast-container.awn-top-right {
    bottom: auto;
    top: 24px
}

#awn-toast-container.awn-top-left .awn-toast:first-child,
#awn-toast-container.awn-top-right .awn-toast:first-child {
    margin-top: 16px
}

#awn-toast-container.awn-bottom-left,
#awn-toast-container.awn-top-left {
    left: 24px;
    right: auto
}

#awn-toast-container.awn-bottom-left .awn-toast,
#awn-toast-container.awn-top-left .awn-toast {
    animation-name: awn-slide-left;
    right: 100%
}

#awn-toast-container.awn-bottom-left .awn-toast.awn-hiding,
#awn-toast-container.awn-top-left .awn-toast.awn-hiding {
    right: 0
}

#awn-toast-container.awn-bottom-right .awn-toast,
#awn-toast-container.awn-top-right .awn-toast {
    animation-name: awn-slide-right;
    left: 100%
}

#awn-toast-container.awn-bottom-right .awn-toast.awn-hiding,
#awn-toast-container.awn-top-right .awn-toast.awn-hiding {
    left: 0
}

.awn-toast {
    animation-fill-mode: both;
    animation-timing-function: linear;
    background: #ebebeb;
    border-radius: 6px;
    color: gray;
    cursor: pointer;
    font-size: 14px;
    margin-top: 16px;
    opacity: 0;
    overflow: hidden;
    position: relative;
    width: 320px
}

.awn-toast-content {
    word-break: break-word
}

.awn-toast-label {
    color: gray;
    display: block;
    font-size: 18px;
    text-transform: uppercase
}

.awn-toast-icon {
    align-items: center;
    bottom: 0;
    display: flex;
    justify-content: flex-end;
    position: absolute;
    right: 16px;
    top: 6px
}

.awn-toast-icon .fa {
    color: gray;
    font-size: 44px
}

.awn-toast-wrapper {
    border: 2px solid #d1d1d1;
    border-radius: 6px;
    padding: 22px 88px 16px 16px
}

.awn-toast-progress-bar {
    height: 6px;
    left: 0;
    position: absolute;
    right: 0;
    top: 0
}

.awn-toast-progress-bar:after {
    animation-duration: inherit;
    animation-fill-mode: both;
    animation-name: awn-bar;
    animation-timing-function: linear;
    background: gray;
    content: " ";
    height: 6px;
    position: absolute;
    right: 100%;
    top: 0;
    width: 100%
}

.awn-toast.awn-toast-progress-bar-paused .awn-toast-progress-bar:after {
    animation-play-state: paused
}

.awn-toast.awn-hiding {
    animation-name: awn-fade-out !important
}

.awn-toast.awn-toast-success {
    background: #dff8d3;
    color: #40871d
}

.awn-toast.awn-toast-success .awn-toast-wrapper {
    border-color: #a7d590
}

.awn-toast.awn-toast-success .fa,
.awn-toast.awn-toast-success b {
    color: #40871d
}

.awn-toast.awn-toast-success .awn-toast-progress-bar:after {
    background: #40871d
}

.awn-toast.awn-toast-info {
    background: #d3ebf8;
    color: #1c76a6
}

.awn-toast.awn-toast-info .awn-toast-wrapper {
    border-color: #9fd3ef
}

.awn-toast.awn-toast-info .fa,
.awn-toast.awn-toast-info b {
    color: #1c76a6
}

.awn-toast.awn-toast-info .awn-toast-progress-bar:after {
    background: #1c76a6
}

.awn-toast.awn-toast-alert {
    background: #f8d5d3;
    color: #a92019
}

.awn-toast.awn-toast-alert .awn-toast-wrapper {
    border-color: #f0a29d
}

.awn-toast.awn-toast-alert .fa,
.awn-toast.awn-toast-alert b {
    color: #a92019
}

.awn-toast.awn-toast-alert .awn-toast-progress-bar:after {
    background: #a92019
}

.awn-toast.awn-toast-warning {
    background: #ffe7cc;
    color: #c26700
}

.awn-toast.awn-toast-warning .awn-toast-wrapper {
    border-color: #ffc480
}

.awn-toast.awn-toast-warning .fa,
.awn-toast.awn-toast-warning b {
    color: #c26700
}

.awn-toast.awn-toast-warning .awn-toast-progress-bar:after {
    background: #c26700
}

[class^=awn-] {
    box-sizing: border-box
}
/**************************\
  Basic Modal Styles
\**************************/

.modal {
  display: none;
}

.modal.is-open {
  display: block;
}


.modal .modal__overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal__container {
  background-color: #fff;
  padding: 30px;
  /*
  max-width: 640px;
  max-height: 100vh;
  */
  border-radius: 4px;
  overflow-y: auto;
  box-sizing: border-box;
}

.modal .modal__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal .modal__title {
  margin-top: 0;
  margin-bottom: 0;
}

.modal .modal__close {
  background: transparent;
  border: 0;
}

.modal .modal__header .modal__close:before {
  content: "\2715";
}

.modal .modal__content {
  margin-top: 2rem;
  margin-bottom: 2rem;
  line-height: 1.5;
  color: rgba(0, 0, 0, .8);
}
root {
    display: block;
}

*,
*:before,
*:after {
    user-select: none;
}

::selection {
    background: transparent;
    color: inherit;
}


#playstreamgo-canvas {
    image-rendering: optimizeSpeed;
    image-rendering: crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    -ms-interpolation-mode: nearest-neighbor;
    touch-action: none;
    user-select: none;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    /* mobile webkit */
    position: fixed;
}

.playstreamgo-login-dialog {
    text-align: left;
}

/*************** FONTS ******************/

@font-face {
    font-family: 'PlayStreamGo';
    src: url('impact-webfont.woff2') format('woff2'),
         url('impact-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/*************** ORIENTATION ***************/

.playstreamgo-orientation-container {
    width: 100%;
    height: 100%;
    margin: 0;
    position: fixed;
    background: #000 url('PlayStreamGo-please-rotate.webp') no-repeat center;
    background-size: 65%;
    display: none;
}

@media (max-width: 767px) {
    .playstreamgo-orientation-container p {
        font-size: 30px;
    }
}


@media (max-width: 500px) {
    .playstreamgo-orientation-container p {
        font-size: 25px;
    }
}

/*************** BLOCK GAME DIV ***************/

.playstreamgo-block-game {
    position: fixed;
    background-color: transparent;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
}
.plume article,
.plume aside,
.plume details,
.plume figcaption,
.plume figure,
.plume footer,
.plume header,
.plume hgroup,
.plume main,
.plume menu,
.plume nav,
.plume section,
.plume summary {
    display: block
}

.plume audio,
.plume canvas,
.plume progress,
.plume video {
    display: inline-block;
    vertical-align: baseline
}

.plume [hidden],
.plume audio:not([controls]),
.plume template {
    height: 0;
    display: none
}

.plume a {
    background-color: transparent
}

.plume a:active,
.plume a:hover {
    outline: 0
}

.plume abbr[title] {
    border-bottom: 1px dotted
}

.plume b,
.plume optgroup,
.plume strong {
    font-weight: 700
}

.plume dfn {
    font-style: italic
}

.plume h1 {
    font-size: 2em;
    margin: .67em 0
}

.plume mark {
    background: #ff0;
    color: #000
}

.plume small {
    font-size: 80%
}

.plume sub,
.plume sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline
}

.plume sup {
    top: -.5em
}

.plume sub {
    bottom: -.25em
}

.plume svg:not(:root) {
    overflow: hidden
}

.plume figure {
    margin: 1em 40px
}

.plume hr {
    box-sizing: content-box;
    height: 0
}

.plume code,
.plume kbd,
.plume pre,
.plume samp {
    font-family: monospace, monospace;
    font-size: 1em
}

.plume button,
.plume input,
.plume optgroup,
.plume select,
.plume textarea {
    color: inherit;
    font: inherit;
    margin: 0
}

.plume button {
    overflow: visible
}

.plume button,
.plume select {
    text-transform: none
}

.plume button,
.plume html input[type=button],
.plume input[type=reset],
.plume input[type=submit] {
    -webkit-appearance: button;
    appearance: button;
    cursor: pointer
}

.plume button[disabled],
.plume html input[disabled] {
    cursor: default
}

.plume button::-moz-focus-inner,
.plume img,
.plume input::-moz-focus-inner,
.plume legend,
.plume td,
.plume th {
    border: 0;
    padding: 0
}

.plume input {
    line-height: normal
}

.plume input[type=checkbox],
.plume input[type=radio] {
    box-sizing: border-box;
    padding: 0
}

.plume input[type=number]::-webkit-inner-spin-button,
.plume input[type=number]::-webkit-outer-spin-button {
    height: auto
}

.plume input[type=search] {
    -webkit-appearance: textfield;
    appearance: textfield;
    box-sizing: content-box
}

.plume input[type=search]::-webkit-search-cancel-button,
.plume input[type=search]::-webkit-search-decoration {
    -webkit-appearance: none
}

.plume pre,
.plume textarea {
    overflow: auto
}

.plume table {
    border-collapse: collapse;
    border-spacing: 0
}

:root {
    --pm-font-family-primary: HelveticaNeue, Helvetica Neue, Helvetica, Arial, sans-serif;
    --pm-font-family-secondary: Noto Serif, Droid Serif, Times, Times New Roman
}

:root {
    --pm-primary-color: #33b5e5;
    --pm-secondary-color: #c03ae9;
    --pm-color-success: #58b858;
    --pm-color-error: #ff6961;
    --pm-color-warning: #ffa501;
    --pm-color-info: var(--pm-primary-color)
}

:root {
    --pm-app-surface-color: rgba(0, 0, 0, 0);
    --pm-app-ground-color: rgba(200, 200, 200, 0.1);
    --pm-app-text-color: #333;
    --pm-app-selection-color: var(--pm-primary-color);
    --pm-app-selection-text-color: #fff;
    --pm-app-base-font-size: 18px;
    --pm-app-line-height: 1.6;
    --pm-app-font-weight: 400;
    --pm-app-container-padding: 16px;
    --pm-app-container-max-width: 1024px
}

.plume {
    box-sizing: border-box;
    color: var(--pm-app-text-color);
    font-weight: var(--pm-app-font-weight);
    line-height: var(--pm-app-line-height);
    font-size: var(--pm-app-base-font-size);
    font-family: var(--pm-font-family-primary);
    background-color: var(--pm-app-surface-color)
}

.plume *,
.plume ::after,
.plume ::before {
    box-sizing: inherit;
    outline-color: var(--pm-primary-color)
}

.plume ::-moz-selection {
    color: var(--pm-app-selection-text-color);
    background: var(--pm-app-selection-color)
}

.plume ::selection {
    color: var(--pm-app-selection-text-color);
    background: var(--pm-app-selection-color)
}

.plume .pm-container,
.pm-plume-container,
.plume.pm-container {
    position: relative;
    width: 100%;
    margin: 0 auto;
    padding: 0 var(--pm-app-container-padding);
    max-width: var(--pm-app-container-max-width)
}

@media screen and (max-width:760px) {

    .plume .pm-container,
    .pm-plume-container,
    .plume.pm-container {
        padding: 0 calc(var(--pm-app-container-padding)/ 2)
    }
}

:root {
    --pm-h1-font-size: 3.9em;
    --pm-h2-font-size: 3.33em;
    --pm-h3-font-size: 2.6em;
    --pm-h4-font-size: 1.8em;
    --pm-h5-font-size: 1.3em;
    --pm-h6-font-size: 1.1em;
    --pm-paragraph-font-size: 1em;
    --pm-paragraph-margin-bottom: 24px;
    --pm-paragraph-font-family: var(--pm-font-family-secondary);
    --pm-link-color: var(--pm-primary-color);
    --pm-link-text-transform: none;
    --pm-link-text-decoration: none;
    --pm-link-font-weight: normal;
    --pm-headings-margin: 0 0 24px 0;
    --pm-headings-font-family: var(--pm-font-family-primary);
    --pm-mark-border-radius: 2px;
    --pm-mark-background-color: rgba(180, 180, 180, 0.2)
}

.plume .pm-h1,
.plume h1 {
    line-height: 1.2;
    letter-spacing: -.5px;
    font-size: var(--pm-h1-font-size)
}

.plume .pm-h2,
.plume h2 {
    line-height: 1.25;
    letter-spacing: -.5px;
    font-size: var(--pm-h2-font-size)
}

.plume .pm-h3,
.plume h3 {
    line-height: 1.3;
    letter-spacing: 0;
    font-size: var(--pm-h3-font-size)
}

.plume .pm-h4,
.plume h4 {
    line-height: 1.35;
    letter-spacing: .25px;
    font-size: var(--pm-h4-font-size)
}

.plume .pm-h5,
.plume h5 {
    line-height: 1.5;
    letter-spacing: .2px;
    font-size: var(--pm-h5-font-size)
}

.plume .pm-h6,
.plume h6 {
    line-height: 1.6;
    letter-spacing: .15px;
    font-size: var(--pm-h6-font-size)
}

.plume .pm-h1,
.plume h1 {
    margin-top: 0;
    font-weight: 300;
    margin: var(--pm-headings-margin);
    font-size: var(--pm-h1-font-size);
    font-family: var(--pm-headings-font-family)
}

@media screen and (max-width:1023px) {

    .plume .pm-h1,
    .plume h1 {
        font-size: calc((var(--pm-h1-font-size)/ 1.8) + 1.5vw)
    }
}

.plume .pm-h2,
.plume h2 {
    margin-top: 0;
    font-weight: 300;
    margin: var(--pm-headings-margin);
    font-size: var(--pm-h2-font-size);
    font-family: var(--pm-headings-font-family)
}

@media screen and (max-width:1023px) {

    .plume .pm-h2,
    .plume h2 {
        font-size: calc((var(--pm-h2-font-size)/ 1.8) + 1.5vw)
    }
}

.plume .pm-h3,
.plume h3 {
    margin-top: 0;
    font-weight: 300;
    margin: var(--pm-headings-margin);
    font-size: var(--pm-h3-font-size);
    font-family: var(--pm-headings-font-family)
}

@media screen and (max-width:1023px) {

    .plume .pm-h3,
    .plume h3 {
        font-size: calc((var(--pm-h3-font-size)/ 1.8) + 1.5vw)
    }
}

.plume .pm-h4,
.plume h4 {
    margin-top: 0;
    font-weight: 300;
    margin: var(--pm-headings-margin);
    font-size: var(--pm-h4-font-size);
    font-family: var(--pm-headings-font-family)
}

@media screen and (max-width:1023px) {

    .plume .pm-h4,
    .plume h4 {
        font-size: calc((var(--pm-h4-font-size)/ 1.8) + 1.5vw)
    }
}

.plume .pm-h5,
.plume h5 {
    margin-top: 0;
    font-weight: 300;
    margin: var(--pm-headings-margin);
    font-size: var(--pm-h5-font-size);
    font-family: var(--pm-headings-font-family)
}

@media screen and (max-width:1023px) {

    .plume .pm-h5,
    .plume h5 {
        font-size: calc((var(--pm-h5-font-size)/ 1.8) + 1.5vw)
    }
}

.plume .pm-h6,
.plume h6 {
    margin-top: 0;
    font-weight: 300;
    margin: var(--pm-headings-margin);
    font-size: var(--pm-h6-font-size);
    font-family: var(--pm-headings-font-family)
}

@media screen and (max-width:1023px) {

    .plume .pm-h6,
    .plume h6 {
        font-size: calc((var(--pm-h6-font-size)/ 1.8) + 1.5vw)
    }
}

.plume hr {
    opacity: .2;
    margin: 32px 0;
    border-width: 0;
    border-top: 1px solid var(--pm-app-text-color)
}

.plume .p,
.plume p {
    margin-top: 0;
    font-size: var(--pm-paragraph-font-size);
    font-family: var(--pm-paragraph-font-family);
    margin-bottom: var(--pm-paragraph-margin-bottom)
}

.plume .pm-link,
.plume a {
    color: var(--pm-link-color);
    -webkit-text-decoration: var(--pm-link-text-decoration);
    text-decoration: var(--pm-link-text-decoration);
    font-weight: var(--pm-link-font-weight);
    text-transform: var(--pm-link-text-transform)
}

@media print {

    .plume .pm-link:not([href^="#"]):not([href^=javascript])::after,
    .plume a:not([href^="#"]):not([href^=javascript])::after {
        content: " (" attr(href) ") "
    }
}

.plume blockquote {
    margin: 0;
    padding: 16px;
    margin: var(--pm-headings-margin);
    font-size: var(--pm-paragraph-font-size);
    font-family: var(--pm-font-family-primary);
    border-left: solid 4px var(--pm-primary-color);
    background-color: rgba(180, 180, 180, .1)
}

.plume blockquote>:only-child {
    margin-bottom: 0
}

.plume .pm-mark,
.plume mark {
    color: inherit;
    display: inline;
    font-size: inherit;
    font-family: inherit;
    white-space: inherit;
    padding: 0 4px;
    border-radius: var(--pm-mark-border-radius);
    background-color: var(--pm-mark-background-color)
}

.plume kbd {
    padding: 0 4px;
    border-radius: 2px;
    background-color: rgba(180, 180, 180, .2)
}

:root {
    --pm-button-primary-text-color: #fff;
    --pm-button-secondary-text-color: #fff;
    --pm-button-padding: 0 32px;
    --pm-button-font-size: 14px;
    --pm-button-min-width: 140px;
    --pm-button-min-height: 40px;
    --pm-button-font-weight: 600;
    --pm-button-box-shadow: none;
    --pm-button-margin-bottom: 24px;
    --pm-button-border-radius: 4px;
    --pm-button-border-style: solid;
    --pm-button-border-width: 1px;
    --pm-button-rounded-size: 52px
}

.plume .pm-button,
.plume [class*=pm-btn-],
.plume button,
.plume input[type=button],
.plume input[type=reset],
.plume input[type=submit] {
    height: auto;
    cursor: pointer;
    line-height: auto;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    position: relative;
    align-items: center;
    display: inline-flex;
    text-decoration: none;
    letter-spacing: .3px;
    justify-content: center;
    text-transform: uppercase;
    background-color: transparent;
    color: var(--pm-primary-color);
    padding: var(--pm-button-padding);
    font-size: var(--pm-button-font-size);
    min-width: var(--pm-button-min-width);
    box-shadow: var(--pm-button-box-shadow);
    min-height: var(--pm-button-min-height);
    line-height: var(--pm-button-min-height);
    font-weight: var(--pm-button-font-weight);
    border-style: var(--pm-button-border-style);
    border-width: var(--pm-button-border-width);
    border-color: var(--pm-button-border-color);
    border-radius: var(--pm-button-border-radius);
    margin-bottom: var(--pm-button-margin-bottom)
}

.plume .pm-btn-block {
    display: flex;
    width: 100%
}

.plume .pm-btn-primary {
    color: var(--pm-button-primary-text-color);
    background-color: var(--pm-primary-color);
    border-color: var(--pm-primary-color)
}

.plume .pm-btn-secondary {
    color: var(--pm-button-secondary-text-color);
    background-color: var(--pm-secondary-color);
    border-color: var(--pm-secondary-color)
}

.plume .pm-btn-gradient {
    border: none;
    color: var(--pm-button-primary-text-color);
    min-width: calc(var(--pm-button-min-width) + var(--pm-button-border-width));
    min-height: calc(var(--pm-button-min-height) + var(--pm-button-border-width));
    background: linear-gradient(30deg, var(--pm-primary-color) 0, var(--pm-secondary-color) 100%)
}

.plume .pm-btn-black {
    color: #fff;
    border-color: #fff;
    background-color: #000
}

.plume .pm-btn-black:hover {
    color: #000;
    border-color: #000;
    background-color: #fff
}

.plume .pm-btn-white {
    color: #000;
    border-color: #000;
    background-color: #fff
}

.plume .pm-btn-white:hover {
    color: #fff;
    border-color: #fff;
    background-color: #000
}

.plume .pm-btn-light {
    color: var(--pm-app-text-color);
    border-color: rgba(200, 200, 200, .3);
    background-color: rgba(200, 200, 200, .3)
}

.plume .pm-btn-light:hover {
    background-color: rgba(200, 200, 200, .2)
}

.plume .pm-btn-success {
    color: #fff;
    background-color: var(--pm-color-success);
    border-color: var(--pm-color-success)
}

.plume .pm-btn-warning {
    color: #fff;
    background-color: var(--pm-color-warning);
    border-color: var(--pm-color-warning)
}

.plume .pm-btn-round {
    padding: 0;
    min-width: unset;
    min-height: unset;
    border-radius: 100%;
    width: var(--pm-button-rounded-size);
    height: var(--pm-button-rounded-size)
}

.plume .pm-btn-text {
    border: none;
    padding: 0 2ch;
    background: 0 0;
    box-shadow: none;
    min-width: unset;
    min-height: unset;
    color: var(--pm-primary-color)
}

.plume .pm-btn-danger,
.plume .pm-btn-error {
    color: #fff;
    background-color: var(--pm-color-error);
    border-color: var(--pm-color-error)
}

:root {
    --pm-placeholder-color: #999;
    --pm-form-field-margin-bottom: 24px;
    --pm-form-caption-font-size: .8em;
    --pm-fieldset-border-style: solid;
    --pm-fieldset-border-width: 1px;
    --pm-fieldset-border-color: rgba(127, 127, 127, 0.4);
    --pm-label-font-size: 1em;
    --pm-label-font-weight: 600;
    --pm-label-margin-bottom: 8px;
    --pm-input-height: 40px;
    --pm-input-box-shadow: none;
    --pm-input-padding: 8px 16px;
    --pm-input-border-style: solid;
    --pm-input-border-radius: none;
    --pm-input-border-width: 0 0 2px 0;
    --pm-input-border-color: rgba(127, 127, 127, 0.4);
    --pm-input-background-color: rgba(200, 200, 200, 0.1);
    --pm-input-switch-size: 24px;
    --pm-input-switch-border-width: 2px;
    --pm-textarea-padding: 16px;
    --pm-textarea-min-height: 100px
}

.plume fieldset {
    padding: 12px;
    border-style: var(--pm-fieldset-border-style);
    border-width: var(--pm-fieldset-border-width);
    border-color: var(--pm-fieldset-border-color);
    border-radius: var(--pm-input-border-radius)
}

.plume fieldset legend {
    padding: 0 10px;
    color: var(--pm-primary-color)
}

.plume .pm-field,
.plume fieldset {
    width: 100%;
    display: block;
    margin-bottom: var(--pm-form-field-margin-bottom)
}

.plume .pm-label,
.plume .pm-legend,
.plume label,
.plume legend {
    display: block;
    color: var(--pm-app-text-color);
    font-weight: var(--pm-label-font-weight);
    margin-bottom: var(--pm-label-margin-bottom)
}

.plume .pm-label[data-pm-holder],
.plume .pm-legend[data-pm-holder],
.plume label[data-pm-holder],
.plume legend[data-pm-holder] {
    font-weight: 300;
    margin: 0 4px;
    align-items: center;
    display: inline-flex;
    height: var(--pm-input-height)
}

.plume .pm-label.pm-required::after,
.plume .pm-legend.pm-required::after,
.plume label.pm-required::after,
.plume legend.pm-required::after {
    content: '*';
    margin-left: 8px;
    color: var(--pm-color-error)
}

.plume input:not([type=range]):not([type=button]):not([type=reset]):not([type=submit]):not([type=checkbox]):not([type=radio]),
.plume textarea {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none
}

.plume input:not([type=range]):not([type=button]):not([type=reset]):not([type=submit]):not([type=checkbox]):not([type=radio]),
.plume select,
.plume textarea {
    width: 100%;
    display: block;
    box-sizing: border-box;
    height: var(--pm-input-height);
    padding: var(--pm-input-padding);
    box-shadow: var(--pm-input-box-shadow);
    border-style: var(--pm-input-border-style);
    border-color: var(--pm-input-border-color);
    border-width: var(--pm-input-border-width);
    border-radius: var(--pm-input-border-radius);
    background-color: var(--pm-input-background-color)
}

.plume input:not([type=range]):not([type=button]):not([type=reset]):not([type=submit]):not([type=checkbox]):not([type=radio]):focus,
.plume select:focus,
.plume textarea:focus {
    outline: 0;
    --pm-input-border-color: var(--pm-primary-color)
}

.plume textarea {
    display: block;
    padding: var(--pm-textarea-padding);
    min-height: var(--pm-textarea-min-height)
}

.plume input[type=color] {
    border: none;
    background: 0 0;
    --pm-input-padding: 0;
    --pm-input-border-width: 0;
    --pm-input-background-color: transparent
}

.plume input[type=checkbox],
.plume input[type=radio] {
    margin: 0 8px;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    position: relative;
    display: inline-block;
    width: var(--pm-input-switch-size);
    height: var(--pm-input-switch-size);
    border: solid var(--pm-input-switch-border-width);
    border-color: var(--pm-input-border-color)
}

.plume input[type=checkbox]::before,
.plume input[type=radio]::before {
    top: 2px;
    left: 2px;
    content: "";
    opacity: 0;
    visibility: hidden;
    position: absolute;
    background-color: var(--pm-primary-color);
    height: calc(100% - 4px);
    width: calc(100% - 4px)
}

.plume input[type=checkbox]:checked,
.plume input[type=radio]:checked {
    border-color: var(--pm-primary-color)
}

.plume input[type=checkbox]:checked::before,
.plume input[type=radio]:checked::before {
    opacity: 1;
    visibility: visible
}

.plume input[type=radio],
.plume input[type=radio]:checked::before {
    border-radius: 100%
}

.plume input[type=checkbox][data-pm-checkbox-toggle] {
    border-radius: 25px;
    height: var(--pm-input-switch-size);
    cursor: pointer;
    width: calc(var(--pm-input-switch-size) * 2)
}

.plume input[type=checkbox][data-pm-checkbox-toggle]::before {
    top: 2px;
    left: 2px;
    content: "";
    opacity: 1;
    visibility: visible;
    position: absolute;
    border-radius: 100%;
    height: calc(100% - 4px);
    width: calc(var(--pm-input-switch-size) - (var(--pm-input-switch-border-width) * 2) - 4px);
    background-color: var(--pm-input-border-color)
}

.plume input[type=checkbox][data-pm-checkbox-toggle]:checked {
    border-color: var(--pm-input-border-color)
}

.plume input[type=checkbox][data-pm-checkbox-toggle]:checked::before {
    content: "";
    top: 2px;
    left: calc(var(--pm-input-switch-size) + 2px);
    background-color: var(--pm-primary-color)
}

.plume input[type=range] {
    width: 100%;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    position: relative;
    background: 0 0;
    display: flex;
    align-items: center;
    height: var(--pm-input-switch-size);
    line-height: var(--pm-input-height)
}

.plume input[type=range]::-moz-focus-outer {
    border: 0
}

.plume input[type=range]::-ms-track {
    cursor: default;
    width: 100%;
    background: 0 0;
    height: var(--pm-input-switch-border-width);
    background-color: var(--pm-input-border-color)
}

.plume input[type=range]:focus {
    outline: 0
}

.plume input[type=range]:focus::-ms-track {
    background-color: var(--pm-primary-color)
}

.plume input[type=range]::-moz-range-track {
    cursor: default;
    width: 100%;
    background: 0 0;
    height: var(--pm-input-switch-border-width);
    background-color: var(--pm-input-border-color)
}

.plume input[type=range]:focus {
    outline: 0
}

.plume input[type=range]:focus::-moz-range-track {
    background-color: var(--pm-primary-color)
}

.plume input[type=range]::-webkit-slider-runnable-track {
    cursor: default;
    width: 100%;
    background: 0 0;
    height: var(--pm-input-switch-border-width);
    background-color: var(--pm-input-border-color)
}

.plume input[type=range]:focus {
    outline: 0
}

.plume input[type=range]:focus::-webkit-slider-runnable-track {
    background-color: var(--pm-primary-color)
}

.plume input[type=range]::-ms-thumb {
    width: var(--pm-input-switch-size);
    height: var(--pm-input-switch-size);
    cursor: default;
    appearance: none;
    border-radius: 100%;
    margin-top: calc(((var(--pm-input-switch-size)/ 2) - var(--pm-input-switch-border-width)/ 2) * -1);
    border: 2px solid rgba(100, 100, 100, .1);
    background: var(--pm-primary-color)
}

.plume input[type=range]::-moz-range-thumb {
    width: var(--pm-input-switch-size);
    height: var(--pm-input-switch-size);
    cursor: default;
    -moz-appearance: none;
    appearance: none;
    border-radius: 100%;
    margin-top: calc(((var(--pm-input-switch-size)/ 2) - var(--pm-input-switch-border-width)/ 2) * -1);
    border: 2px solid rgba(100, 100, 100, .1);
    background: var(--pm-primary-color)
}

.plume input[type=range]::-webkit-slider-thumb {
    width: var(--pm-input-switch-size);
    height: var(--pm-input-switch-size);
    cursor: default;
    -webkit-appearance: none;
    appearance: none;
    border-radius: 100%;
    margin-top: calc(((var(--pm-input-switch-size)/ 2) - var(--pm-input-switch-border-width)/ 2) * -1);
    border: 2px solid rgba(100, 100, 100, .1);
    background: var(--pm-primary-color)
}

.plume input[type=range]::-ms-fill-lower {
    appearance: none
}

.plume input[type=range]::-ms-fill-upper {
    appearance: none
}

.plume input[type=range][data-pm-subs]::after,
.plume input[type=range][data-pm-subs]::before {
    font-weight: 600;
    color: var(--pm-app-text-color)
}

.plume input[type=range][data-pm-subs]::before {
    content: attr(min);
    margin-right: 6px
}

.plume input[type=range][data-pm-subs]::after {
    content: attr(max);
    margin-left: 6px
}

.plume input[type=range][data-pm-subs]:focus::after,
.plume input[type=range][data-pm-subs]:focus::before {
    color: var(--pm-primary-color)
}

.plume meter,
.plume progress {
    width: 100%;
    height: 12px;
    display: block;
    overflow: hidden;
    border-radius: 25px
}

.plume meter::-webkit-meter-optimum-value,
.plume progress::-webkit-meter-optimum-value {
    border-radius: 25px;
    background: linear-gradient(30deg, var(--pm-primary-color) 0, var(--pm-secondary-color) 100%)
}

.plume meter::-moz-meter-optimum,
.plume progress::-moz-meter-optimum {
    border-radius: 25px;
    background: linear-gradient(30deg, var(--pm-primary-color) 0, var(--pm-secondary-color) 100%)
}

.plume meter::-webkit-progress-value,
.plume progress::-webkit-progress-value {
    border-radius: 25px;
    background: linear-gradient(30deg, var(--pm-primary-color) 0, var(--pm-secondary-color) 100%)
}

.plume .pm-input-file {
    cursor: pointer;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--pm-button-margin-bottom)
}

.plume .pm-input-file input[type=file] {
    top: 0;
    left: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    position: absolute
}

.plume [data-pm-success] {
    --pm-input-border-color: var(--pm-color-success);
    --pm-primary-color: var(--pm-color-success)
}

.plume [data-pm-success] label:not([data-pm-holder]) {
    color: var(--pm-color-success)
}

.plume [data-pm-success]:not([data-pm-success=""])::after {
    margin: 4px 0;
    display: block;
    font-weight: 600;
    content: attr(data-pm-success);
    color: var(--pm-color-success);
    font-size: var(--pm-form-caption-font-size)
}

.plume [data-pm-error] {
    --pm-input-border-color: var(--pm-color-error);
    --pm-primary-color: var(--pm-color-error)
}

.plume [data-pm-error] label:not([data-pm-holder]) {
    color: var(--pm-color-error)
}

.plume [data-pm-error]:not([data-pm-error=""])::after {
    margin: 4px 0;
    display: block;
    font-weight: 600;
    content: attr(data-pm-error);
    color: var(--pm-color-error);
    font-size: var(--pm-form-caption-font-size)
}

.plume [data-pm-warning] {
    --pm-input-border-color: var(--pm-color-warning);
    --pm-primary-color: var(--pm-color-warning)
}

.plume [data-pm-warning] label:not([data-pm-holder]) {
    color: var(--pm-color-warning)
}

.plume [data-pm-warning]:not([data-pm-warning=""])::after {
    margin: 4px 0;
    display: block;
    font-weight: 600;
    content: attr(data-pm-warning);
    color: var(--pm-color-warning);
    font-size: var(--pm-form-caption-font-size)
}

.plume [data-pm-info] {
    --pm-input-border-color: var(--pm-color-info);
    --pm-primary-color: var(--pm-color-info)
}

.plume [data-pm-info] label:not([data-pm-holder]) {
    color: var(--pm-color-info)
}

.plume [data-pm-info]:not([data-pm-info=""])::after {
    margin: 4px 0;
    display: block;
    font-weight: 600;
    content: attr(data-pm-info);
    color: var(--pm-color-info);
    font-size: var(--pm-form-caption-font-size)
}

.plume [data-pm-info]:not([data-pm-info=""]) label {
    color: var(--pm-app-text-color)
}

.plume ::-moz-placeholder {
    font-size: inherit;
    color: var(--pm-placeholder-color)
}

.plume :-ms-input-placeholder {
    font-size: inherit;
    color: var(--pm-placeholder-color)
}

.plume ::placeholder {
    font-size: inherit;
    color: var(--pm-placeholder-color)
}

:root {
    --pm-table-cell-border-style: solid;
    --pm-table-cell-border-color: #E1E1E1;
    --pm-table-cell-border-width: 0 0 1px 0
}

.plume table {
    width: 100%;
    text-align: left;
    margin-bottom: 24px
}

.plume table thead {
    font-size: 1.1em;
    font-weight: 600
}

.plume table td,
.plume table th {
    padding: 16px;
    border-style: var(--pm-table-cell-border-style);
    border-width: var(--pm-table-cell-border-width);
    border-color: var(--pm-table-cell-border-color)
}

.plume table td {
    font-size: 1em
}

@media screen and (max-width:980px) {
    .plume table {
        display: block;
        overflow: auto
    }
}

:root {
    --pm-ul-list-style: circle inside;
    --pm-ol-list-style: decimal inside;
    --pm-list-item-margin-bottom: 24px
}

.plume ul {
    list-style: var(--pm-ul-list-style)
}

.plume ol {
    list-style: var(--pm-ol-list-style)
}

.plume ol,
.plume ul {
    padding-left: 0;
    margin-top: 0;
    font-size: 1em
}

.plume ol ol,
.plume ol ul,
.plume ul ol,
.plume ul ul {
    font-size: .9em;
    margin: 16px 0 16px 32px
}

.plume li {
    margin-bottom: var(--pm-list-item-margin-bottom)
}

.plume dl {
    width: 100%;
    word-break: break-word;
    margin-bottom: var(--pm-list-item-margin-bottom)
}

.plume dl dd,
.plume dl dt {
    padding: 16px;
    text-align: left;
    border-bottom: 1px solid #e1e1e1
}

.plume dl dt {
    font-size: 1.1em;
    font-weight: 600
}

.plume dl dd {
    margin: 0;
    border: none;
    position: relative;
    padding-left: 56px;
    font-family: var(--pm-font-family-secondary)
}

.plume dl dd::before {
    content: "";
    top: 50%;
    left: 24px;
    width: 6px;
    height: 6px;
    font-size: 1em;
    position: absolute;
    border-radius: 100%;
    transform: translateY(-50%);
    border: solid 1px currentColor
}

@media screen and (max-width:768px) {
    .plume dl dd {
        padding-left: 32px
    }

    .plume dl dd::before {
        left: 10px
    }
}

:root {
    --pm-pre-code-border-radius: 4px;
    --pm-pre-code-background-color: #444;
    --pm-pre-color: #fff;
    --pm-pre-font-size: .9em;
    --pm-pre-max-height: 760px;
    --pm-pre-margin-bottom: 24px;
    --pm-pre-padding: 16px;
    --pm-code-padding: 0 4px;
    --pm-code-background-color: rgba(100, 100, 100, 0.1)
}

.plume code {
    overflow: auto;
    color: inherit;
    display: inline;
    font-size: inherit;
    font-family: inherit;
    white-space: inherit;
    padding: var(--pm-code-padding);
    border-radius: var(--pm-pre-code-border-radius);
    background-color: var(--pm-code-background-color)
}

.plume pre {
    width: 100%;
    display: block;
    overflow: auto;
    white-space: pre;
    position: relative;
    word-wrap: break-word;
    font-family: monospace, monospace;
    color: var(--pm-pre-color);
    margin-bottom: var(--pm-pre-margin-bottom);
    padding: var(--pm-pre-padding);
    font-size: var(--pm-pre-font-size);
    max-height: var(--pm-pre-max-height);
    border-radius: var(--pm-pre-code-border-radius);
    line-height: calc(var(--pm-pre-font-size) + 10px);
    background-color: var(--pm-pre-code-background-color)
}

.plume pre code {
    padding: 0;
    background-color: transparent
}

.plume:not(.pm-no-effects) [class*=pm-btn-],
.plume:not(.pm-no-effects) button {
    overflow: hidden
}

.plume:not(.pm-no-effects) [class*=pm-btn-].pm-focus,
.plume:not(.pm-no-effects) [class*=pm-btn-].pm-hover,
.plume:not(.pm-no-effects) [class*=pm-btn-]:focus,
.plume:not(.pm-no-effects) [class*=pm-btn-]:hover,
.plume:not(.pm-no-effects) button.pm-focus,
.plume:not(.pm-no-effects) button.pm-hover,
.plume:not(.pm-no-effects) button:focus,
.plume:not(.pm-no-effects) button:hover {
    opacity: .8
}

.plume:not(.pm-no-effects) [class*=pm-btn-]:active,
.plume:not(.pm-no-effects) button:active {
    transform: translateY(2px)
}

.plume:not(.pm-no-effects) [class*=pm-btn-]:focus,
.plume:not(.pm-no-effects) button:focus,
.plume:not(.pm-no-effects) input:focus,
.plume:not(.pm-no-effects) select:focus,
.plume:not(.pm-no-effects) textarea:focus {
    transition: .1s
}

.plume:not(.pm-no-effects) input[type=checkbox]::after,
.plume:not(.pm-no-effects) input[type=checkbox]::before,
.plume:not(.pm-no-effects) input[type=radio]::after,
.plume:not(.pm-no-effects) input[type=radio]::before {
    transition: .1s
}

.plume:not(.pm-no-effects) input[type=button]:active,
.plume:not(.pm-no-effects) input[type=reset]:active,
.plume:not(.pm-no-effects) input[type=submit]:active {
    transform: translateY(2px)
}

.plume:not(.pm-no-effects) input[type=button]:hover,
.plume:not(.pm-no-effects) input[type=reset]:hover,
.plume:not(.pm-no-effects) input[type=submit]:hover {
    opacity: .8
}

.plume:not(.pm-no-effects) [data-pm-success]:not([data-pm-success=""])::after {
    -webkit-animation: slide-down .3s ease-out;
    animation: slide-down .3s ease-out
}

.plume:not(.pm-no-effects) [data-pm-error]:not([data-pm-error=""])::after {
    -webkit-animation: slide-down .3s ease-out;
    animation: slide-down .3s ease-out
}

.plume:not(.pm-no-effects) [data-pm-warning]:not([data-pm-warning=""])::after {
    -webkit-animation: slide-down .3s ease-out;
    animation: slide-down .3s ease-out
}

.plume:not(.pm-no-effects) [data-pm-info]:not([data-pm-info=""])::after {
    -webkit-animation: slide-down .3s ease-out;
    animation: slide-down .3s ease-out
}

@-webkit-keyframes slide-down {
    0% {
        opacity: 0;
        transform: translateY(-100%)
    }

    100% {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes slide-down {
    0% {
        opacity: 0;
        transform: translateY(-100%)
    }

    100% {
        opacity: 1;
        transform: translateY(0)
    }
}

.plume .pm-disabled,
.plume .pm-is-disabled,
.plume [disabled] {
    cursor: default !important;
    filter: opacity(.4) !important;
    pointer-events: none !important
}

.plume .pm-is-hidden,
.plume [hidden] {
    display: none !important
}

.plume .pm-surface {
    background-color: var(--pm-app-surface-color) !important
}

.plume .pm-ground {
    background-color: var(--pm-app-ground-color)
}

.plume .pm-padded {
    padding: 16px !important
}

.plume .pm-stacked {
    margin-bottom: 24px !important
}

.plume .pm-is-invisible {
    visibility: hidden !important;
    opacity: 0 !important
}

.plume .pm-no-padding {
    padding: 0 !important
}

.plume .pm-no-margin {
    margin: 0 !important
}

.plume .pm-no-border {
    border: none !important
}

.plume .pm-nowrap {
    white-space: nowrap !important
}

.plume .pm-hgroup {
    margin: var(--pm-headings-margin) !important
}

.plume .pm-hgroup h1,
.plume .pm-hgroup h2,
.plume .pm-hgroup h3,
.plume .pm-hgroup h4,
.plume .pm-hgroup h5,
.plume .pm-hgroup h6 {
    margin-bottom: 8px !important
}

.plume .pm-text-black {
    color: #000 !important
}

.plume .pm-text-white {
    color: #fff !important
}

.plume .pm-text-dark {
    color: #444 !important
}

.plume .pm-text-light {
    color: #ccc !important
}

.plume .pm-text-app {
    color: var(--pm-app-font-color) !important
}

.plume .pm-bg-black {
    background-color: #000 !important
}

.plume .pm-bg-white {
    background-color: #fff !important
}

.plume .pm-bg-dark {
    background-color: #444 !important
}

.plume .pm-bg-light {
    background-color: rgba(200, 200, 200, .1) !important
}

.plume .pm-text-upper {
    text-transform: uppercase !important
}

.plume .pm-text-lower {
    text-transform: lowercase !important
}

.plume .pm-text-capitalize {
    text-transform: capitalize !important
}

.plume .pm-text-center {
    text-align: center !important
}

.plume .pm-text-left {
    text-align: left !important
}

.plume .pm-text-right {
    text-align: right !important
}

.plume .pm-font-primary {
    font-family: var(--pm-font-family-primary) !important
}

.plume .pm-text-primary {
    color: var(--pm-primary-color) !important
}

.plume .pm-bg-primary {
    background-color: var(--pm-primary-color) !important
}

.plume .pm-bc-primary {
    border-color: var(--pm-primary-color) !important
}

.plume .pm-font-secondary {
    font-family: var(--pm-font-family-secondary) !important
}

.plume .pm-text-secondary {
    color: var(--pm-secondary-color) !important
}

.plume .pm-bg-secondary {
    background-color: var(--pm-secondary-color) !important
}

.plume .pm-bc-secondary {
    border-color: var(--pm-secondary-color) !important
}

.plume .pm-text-success {
    color: var(--pm-color-success) !important
}

.plume .pm-bg-success {
    background-color: var(--pm-color-success) !important
}

.plume .pm-bc-success {
    border-color: var(--pm-color-success) !important
}

.plume .pm-text-error {
    color: var(--pm-color-error) !important
}

.plume .pm-bg-error {
    background-color: var(--pm-color-error) !important
}

.plume .pm-bc-error {
    border-color: var(--pm-color-error) !important
}

.plume .pm-text-warning {
    color: var(--pm-color-warning) !important
}

.plume .pm-bg-warning {
    background-color: var(--pm-color-warning) !important
}

.plume .pm-bc-warning {
    border-color: var(--pm-color-warning) !important
}

.plume .pm-text-info {
    color: var(--pm-color-info) !important
}

.plume .pm-bg-info {
    background-color: var(--pm-color-info) !important
}

.plume .pm-bc-info {
    border-color: var(--pm-color-info) !important
}

@media print {
    .plume .pm-dont-print {
        display: none !important
    }

    .plume #pm-dont-print {
        color: #fff
    }
}
:root {
    --pm-pre-code-border-radius: 4px;
    --pm-pre-code-background-color: #444;
    --pm-pre-color: #fff;
    --pm-pre-font-size: .9em;
    --pm-pre-max-height: 760px;
    --pm-pre-margin-bottom: 24px;
    --pm-pre-padding: 16px;
    --pm-code-padding: 0 4px;
    --pm-code-background-color: rgba(100, 100, 100, 0.1);
}

:root {
    --pm-ul-list-style: circle inside;
    --pm-ol-list-style: decimal inside;
    --pm-list-item-margin-bottom: 0px;
}

:root {
    --pm-table-cell-border-style: solid;
    --pm-table-cell-border-color: #E1E1E1;
    --pm-table-cell-border-width: 0 0 1px 0;
}

:root {
    --pm-placeholder-color: #999;
    --pm-form-field-margin-bottom: 24px;
    --pm-form-caption-font-size: .8em;
    --pm-fieldset-border-style: solid;
    --pm-fieldset-border-width: 1px;
    --pm-fieldset-border-color: rgba(127, 127, 127, 0.4);
    --pm-label-font-size: 1em;
    --pm-label-font-weight: 600;
    --pm-label-margin-bottom: 8px;
    --pm-input-height: 40px;
    --pm-input-box-shadow: none;
    --pm-input-padding: 8px 16px;
    --pm-input-border-style: solid;
    --pm-input-border-radius: none;
    --pm-input-border-width: 0 0 2px 0;
    --pm-input-border-color: rgba(127, 127, 127, 0.4);
    --pm-input-background-color: rgba(200, 200, 200, 0.1);
    --pm-input-switch-size: 24px;
    --pm-input-switch-border-width: 2px;
    --pm-textarea-padding: 16px;
    --pm-textarea-min-height: 100px;
}

:root {
    --pm-button-primary-text-color: #fff;
    --pm-button-secondary-text-color: #fff;
    --pm-button-padding: 0 32px;
    --pm-button-font-size: 14px;
    --pm-button-min-width: 140px;
    --pm-button-min-height: 40px;
    --pm-button-font-weight: 600;
    --pm-button-box-shadow: none;
    --pm-button-margin-bottom: 24px;
    --pm-button-border-radius: 4px;
    --pm-button-border-style: solid;
    --pm-button-border-width: 1px;
    --pm-button-rounded-size: 52px;
}

:root {
    --pm-h1-font-size: 3.9em;
    --pm-h2-font-size: 3.33em;
    --pm-h3-font-size: 2.6em;
    --pm-h4-font-size: 1.8em;
    --pm-h5-font-size: 1.3em;
    --pm-h6-font-size: 1.1em;
    --pm-paragraph-font-size: 1em;
    --pm-paragraph-margin-bottom: 24px;
    --pm-paragraph-font-family: var(--pm-font-family-secondary);
    --pm-link-color: var(--pm-primary-color);
    --pm-link-text-transform: none;
    --pm-link-text-decoration: none;
    --pm-link-font-weight: normal;
    --pm-headings-margin: 0 0 24px 0;
    --pm-headings-font-family: var(--pm-font-family-primary);
    --pm-mark-border-radius: 2px;
    --pm-mark-background-color: rgba(180, 180, 180, 0.2);
}

:root {
    --pm-app-surface-color: rgba(0, 0, 0, 0);
    --pm-app-ground-color: rgba(200, 200, 200, 0.1);
    --pm-app-text-color: #000;
    --pm-app-selection-color: var(--pm-primary-color);
    --pm-app-selection-text-color: #fff;
    --pm-app-base-font-size: 18px;
    --pm-app-line-height: 1.2;
    --pm-app-font-weight: 400;
    --pm-app-container-padding: 16px;
    --pm-app-container-max-width: 1024px;
}

:root {
    --pm-primary-color: #fa6855;
    --pm-secondary-color: #33b5e5;
    --pm-color-success: #58b858;
    --pm-color-error: #ff6961;
    --pm-color-warning: #ffa501;
    --pm-color-info: var(--pm-primary-color);
}

:root {
    --pm-font-family-primary: Helvetica Neue, Helvetica, Arial, sans-serif;
    --pm-font-family-secondary: sans-serif;
}