#nanoDialog {
    display: none;
    position: fixed;
    left: 50%;
    top: -208px;
    padding-top: 8px;
    background-color: #fff;
    color: #303030;
    font-size: 16px;
    z-index: 1000;
    border-radius: 8px;
    box-shadow: 0 2px 8px #000
}

#nanoDialog.on {
    display: block;
    animation: down .5s ease forwards
}

#nanoDialog.off {
    display: block;
    animation: downBack .5s ease
}

@keyframes down {
    from {
        transform: translateY(0)
    }

    to {
        transform: translateY(200px)
    }
}

@keyframes downBack {
    from {
        transform: translateY(200px)
    }

    to {
        transform: translateY(0)
    }
}

#nanoDialogTitle {
    padding: 8px 64px 8px 64px;
    background-color: #303030;
    color: #fff;
    line-height: 32px
}

#nanoDialogContent a {
    display: block;
    color: #303030;
    text-decoration: none
}

#nanoDialogContent .item {
    clear: both;
    padding: 0 8px 0 8px;
    line-height: 32px
}

#nanoDialogContent .item.last {
    border-radius: 0 0 8px 8px
}

#nanoDialogContent .item:hover {
    background-color: #a0a0a0;
    color: #fff
}

.fxOn input[type="text"] {
    border: 1px solid #c0c0c0;
    padding: 0 8px 0 8px;
    color: #404040;
    font-size: 14px;
    line-height: 24px;
    border-radius: 4px
}

.fxOn button {
    border: 1px solid #c0c0c0;
    background-color: #fff;
    padding: 0 8px 0 8px;
    color: #606060;
    font-size: 14px;
    line-height: 24px;
    border-radius: 4px
}

.fxOn button:hover {
    border-color: #a0a0a0;
    text-shadow: 0 0 2px rgba(0,0,0,.2)
}

.fxOn input[type="checkbox"] {
    visibility: hidden;
    width: 54px;
    height: 24px;
    vertical-align: middle
}

.fxOn input[type="checkbox"]+label {
    display: inline-block;
    position: relative;
    line-height: 24px;
    font-size: 14px;
    cursor: pointer
}

.fxOn input[type="checkbox"]+label::before {
    position: absolute;
    left: -54px;
    top: 0;
    content: "";
    width: 48px;
    height: 24px;
    background: #bdc3c7;
    border: 2px solid #bdc3c7;
    border-radius: 12px;
    box-sizing: border-box
}

.fxOn input[type="checkbox"]+label::after {
    position: absolute;
    left: -52px;
    top: 2px;
    content: "";
    width: 20px;
    height: 20px;
    background-color: #fff;
    border-radius: 50%;
    transition: transform .3s ease;
    box-sizing: border-box
}

.fxOn input[type="checkbox"]:checked+label::before {
    border-color: #1ac266;
    background-color: #1ac266
}

.fxOn input[type="checkbox"]:checked+label::after {
    transform: translateX(24px)
}

.fxOn input[type="radio"] {
    visibility: hidden;
    width: 30px;
    height: 24px;
    vertical-align: middle
}

.fxOn input[type="radio"]+label {
    display: inline-block;
    position: relative;
    line-height: 24px;
    font-size: 14px;
    cursor: pointer
}

.fxOn input[type="radio"]+label::before {
    position: absolute;
    left: -30px;
    top: 0;
    content: "";
    width: 24px;
    height: 24px;
    background: #fff;
    border: 2px solid #bdc3c7;
    border-radius: 50%;
    box-sizing: border-box
}

.fxOn input[type="radio"]+label::after {
    position: absolute;
    left: -24px;
    top: 6px;
    content: "";
    width: 12px;
    height: 12px;
    background-color: transparent;
    border-radius: 50%;
    box-sizing: border-box;
    transition: background-color .3s ease
}

.fxOn input[type="radio"]:checked+label::after {
    background-color: #1ac266
}

.nanoDropDownMenu {
    display: none;
    position: absolute;
    margin-left: 12px;
    background-color: #fff;
    font-size: .9rem;
    border-radius: 4px;
    box-shadow: 0 2px 6px rgba(0,0,0,.8);
    min-width: 100px;
    z-index: 1001
}

.nanoDropDownMenu:before {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    left: 33%;
    top: -13px;
    margin-top: 1px;
    border: 6px solid;
    border-color: transparent transparent rgba(0,0,0,.3) transparent
}

.nanoDropDownMenu:after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    left: 33%;
    top: -8px;
    margin-left: 2px;
    border: 4px solid transparent;
    border-bottom-color: #e0e0e0
}

.nanoDropDownMenu.right {
    margin-left: 0
}

.nanoDropDownMenu.right:before {
    left: 67%
}

.nanoDropDownMenu.right:after {
    left: 67%
}

.nanoDropDownMenu .item {
    display: block;
    padding: .8rem;
    color: #303030 !important;
    cursor: pointer;
    text-decoration: none
}

.nanoDropDownMenu .item.withIcon {
    background-repeat: no-repeat;
    background-position: 12px center;
    padding-left: 32px
}

.nanoDropDownMenu .item:hover {
    background-color: #e0e0e0;
    _\5f color: #fff !important
}

.nanoDropDownMenu .item:first-child:hover {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px
}

.nanoDropDownMenu .item:last-child:hover {
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px
}

.spinAround:hover {
    animation: spinAround 3s linear infinite
}

@keyframes spinAround {
    from {
        transform: rotateZ(0deg)
    }

    to {
        transform: rotateZ(360deg)
    }
}

#fxFarseer {
    position: absolute;
    visibility: hidden;
    border: 4px dashed #808080;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    box-sizing: border-box;
    pointer-events: none;
    z-index: 1001
}

#fxFarseer.fxFarseer-dark {
    border-color: rgba(0,0,0,.5)
}

#fxFarseer.fxFarseer-hover {
    visibility: visible;
    animation: spinAround 8s linear infinite
}

#fxNovak {
    position: absolute;
    opacity: 0;
    visibility: hidden;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: rgba(111,148,182,.2) !important;
    pointer-events: none;
    z-index: 1001
}

#fxNovak.fxNovak-click {
    visibility: visible;
    animation: anim-effect-novak .3s ease
}

@keyframes anim-effect-novak {
    0% {
        opacity: 1;
        transform: scale3d(1,1,1)
    }

    100% {
        opacity: 0;
        transform: scale3d(30,30,1)
    }
}

.fxZoom {
    animation: fxZoom .3s ease forwards
}

@keyframes fxZoom {
    from {
        opacity: 0;
        transform: scale3d(5,5,1)
    }

    to {
        opacity: 1;
        transform: scale3d(1,1,1)
    }
}

#fxVoodoo {
    position: absolute;
    opacity: 0;
    border: 1px solid rgba(0,0,0,.3);
    visibility: hidden;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: transparent;
    pointer-events: none;
    z-index: 1000;
    _box-shadow: 0 0 1px #000
}

#fxVoodoo.fxVoodoo-on {
    visibility: visible;
    animation: anim-fx-voodoo 2s ease
}

@keyframes anim-fx-voodoo {
    0% {
        opacity: 1;
        transform: scale3d(10,10,1)
    }

    100% {
        opacity: 0;
        transform: scale3d(2,2,1)
    }
}

#fxWaiter {
    display: none;
    position: absolute;
    left: 50%;
    top: 30%;
    width: 164px;
    height: 64px;
    margin-left: -82px;
    z-index: 1002;
    opacity: 0
}

#fxWaiter.on {
    display: block;
    opacity: 1
}

#fxWaiter::before {
    position: absolute;
    left: 0;
    content: "";
    width: 64px;
    height: 64px;
    background-color: rgba(0,128,255,.8);
    border-radius: 32px;
    opacity: 0;
    transition: opacity ease .3s
}

#fxWaiter::after {
    position: absolute;
    right: 0;
    content: "";
    width: 64px;
    height: 64px;
    background-color: rgba(0,200,100,.8);
    border-radius: 32px;
    opacity: 0;
    transition: opacity ease .3s
}

#fxWaiter.on::before {
    opacity: 1;
    animation: anim-fx-waiter 1s infinite alternate
}

#fxWaiter.on::after {
    opacity: 1;
    animation: anim-fx-waiter2 1s infinite alternate
}

#fxWaiter.off::before {
    opacity: 0
}

#fxWaiter.off::after {
    opacity: 0
}

@keyframes anim-fx-waiter {
    0% {
        transform: translateX(0)
    }

    100% {
        transform: translateX(100px)
    }
}

@keyframes anim-fx-waiter2 {
    0% {
        transform: translateX(0)
    }

    100% {
        transform: translateX(-100px)
    }
}

#fxSpinner-backdrop {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,.7);
    z-index: 9999
}

body.fxSpinner #fxSpinner-backdrop {
    display: block
}

#fxSpinner-container {
    position: fixed;
    display: inline-block;
    left: calc(50vw - 32px);
    top: calc(50vh - 32px);
    width: 64px;
    height: 64px;
    _background-color: rgba(0,255,0,.3);
    animation: fxSpinner-container-rotate 1568ms linear infinite;
    overflow: hidden
}

#fxSpinner-layer {
    position: relative;
    width: 100%;
    height: 100%;
    _background-color: rgba(0,0,255,.3);
    animation: fxSpinner-fill-unfill-rotate 5332ms cubic-bezier(.4,0,.2,1) infinite both
}

#fxSpinner-clipper-left,#fxSpinner-clipper-right {
    position: absolute;
    display: inline-block;
    width: 50%;
    height: 100%;
    overflow: hidden
}

#fxSpinner-clipper-right {
    left: 50%
}

.fxSpinner-circle {
    position: absolute;
    display: inline-block;
    width: 200%;
    height: 100%;
    border: 5px solid #e50914;
    border-bottom-color: transparent !important;
    border-radius: 50%
}

#fxSpinner-clipper-left .fxSpinner-circle {
    left: 0;
    animation: fxSpinner-left-spin 1333ms cubic-bezier(.4,0,.2,1) infinite both;
    transform: rotate(129deg);
    border-right-color: transparent !important
}

#fxSpinner-clipper-right .fxSpinner-circle {
    left: -100%;
    animation: fxSpinner-right-spin 1333ms cubic-bezier(.4,0,.2,1) infinite both;
    transform: rotate(-129deg);
    border-left-color: transparent !important
}

@keyframes fxSpinner-container-rotate {
    to {
        transform: rotate(1turn)
    }
}

@keyframes fxSpinner-fill-unfill-rotate {
    0% {
        transform: rotate(0deg)
    }

    12.5% {
        transform: rotate(135deg)
    }

    25% {
        transform: rotate(270deg)
    }

    37.5% {
        transform: rotate(405deg)
    }

    50% {
        transform: rotate(540deg)
    }

    62.5% {
        transform: rotate(675deg)
    }

    75% {
        transform: rotate(810deg)
    }

    87.5% {
        transform: rotate(945deg)
    }

    to {
        transform: rotate(3turn)
    }
}

@keyframes fxSpinner-left-spin {
    0% {
        transform: rotate(130deg)
    }

    50% {
        transform: rotate(-5deg)
    }

    to {
        transform: rotate(130deg)
    }
}

@keyframes fxSpinner-right-spin {
    0% {
        transform: rotate(-130deg)
    }

    50% {
        transform: rotate(5deg)
    }

    to {
        transform: rotate(-130deg)
    }
}

#nanoOverlay {
    position: fixed;
    display: none;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(0,0,0,.5);
    z-index: 10
}

.nanoTabWindow {
    display: none
}

.nanoTabWindow.on {
    display: block
}

.ntLeft {
    animation: ntLeft .3s ease
}

.ntRight {
    animation: ntRight .3s ease
}

.ntUp {
    animation: ntUp .3s ease
}

.ntDown {
    animation: ntDown .3s ease
}

@keyframes ntLeft {
    0% {
        opacity: 1;
        transform: none
    }

    50% {
        opacity: 0;
        transform: translate(-20px,0)
    }

    51% {
        opacity: 0;
        transform: translate(20px,0)
    }

    100% {
        opacity: 1;
        transform: none
    }
}

@keyframes ntRight {
    0% {
        opacity: 1;
        transform: none
    }

    50% {
        opacity: 0;
        transform: translate(20px,0)
    }

    51% {
        opacity: 0;
        transform: translate(-20px,0)
    }

    100% {
        opacity: 1;
        transform: none
    }
}

@keyframes ntUp {
    0% {
        opacity: 1;
        transform: none
    }

    50% {
        opacity: 0;
        transform: translate(0,-.5em)
    }

    51% {
        opacity: 0;
        transform: translate(0,.5em)
    }

    100% {
        opacity: 1;
        transform: none
    }
}

@keyframes ntDown {
    0% {
        opacity: 1;
        transform: none
    }

    50% {
        opacity: 0;
        transform: translate(0,5px)
    }

    51% {
        opacity: 0;
        transform: translate(0,-5px)
    }

    100% {
        opacity: 1;
        transform: none
    }
}

*[data-title]:hover:after {
    content: attr(data-title);
    padding: 4px 8px;
    color: #333;
    position: absolute;
    white-space: nowrap;
    font-size: 12px;
    background-color: #fff;
    z-index: 1000;
    border-radius: 5px;
    box-shadow: 0 0 4px #222;
    transition: all ease .3s
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border-collapse: collapse;
    outline: none
}

html,body {
    width: 100%;
    height: 100%;
    font-size: 16px
}

table {
    border-spacing: 0
}

h2 {
    margin-bottom: 1rem
}

.colorRed {
    color: #f00
}

.clear {
    clear: both
}

.cursorPointer {
    cursor: pointer
}

.displayNone {
    display: none
}

.floatLeft {
    float: left
}

.floatRight {
    float: right
}

.textAlignCenter {
    text-align: center
}

.textAlignLeft {
    text-align: left
}

.textAlignRight {
    text-align: right
}

.hidden {
    display: none !important
}

.xxicon-blank {
    display: inline-block;
    width: .9rem
}

.icon-blank:before {
    content: "⬜"
}

.mobile-only {
    display: none
}

@media(max-width: 640px) {
    .no-mobile {
        display:none !important
    }

    .mobile-only {
        display: block !important
    }
}

body {
    background-color: #303030;
    color: #303030;
    font-family: 'Raleway','Trebuchet MS','Lucida Grande',Arial,sans-serif;
    overflow-x: hidden;
    overflow-y: auto
}

.gradient {
    background-image: radial-gradient(circle at 0% 0%,#30d0a0,transparent),radial-gradient(circle at 0% 100%,#4080f0,transparent),radial-gradient(circle at 80% 30%,#e00080,transparent),radial-gradient(circle at 100% 80%,#0040f0,transparent)
}

.webp.wallpaper {
    background: #a0a0a0 url(https://www.smtper.net/lib/wSmtper/img/gun90.webp) no-repeat center center;
    background-size: cover
}

.no-webp.wallpaper {
    background: #a0a0a0 url(https://www.smtper.net/lib/wSmtper/img/gun.jpg) no-repeat center center;
    background-size: cover
}

.koo {
    background-image: url(https://www.smtper.net/lib/wSmtper/img/mail.png);
    background-repeat: no-repeat;
    background-position: right 200px
}

.loo {
    background-image: url(https://www.smtper.net/lib/wSmtper/img/paper-airplane.png);
    background-repeat: no-repeat;
    background-position: right bottom -80px
}

header {
    width: 100%;
    _height: 3rem;
    top: 0;
    left: 0;
    background-color: rgba(0,0,0,.5);
    color: #e0e0e0;
    _font-size: 14px;
    _line-height: 16px;
    z-index: 1000;
    transition: all ease .3s;
    border-bottom: 1px solid rgba(0,0,0,.5);
    box-shadow: 0 0 12px rgba(0,0,0,.8);
    user-select: none
}

header .item {
    display: inline-block;
    padding: 1rem;
    color: #f0f0f0;
    text-decoration: none;
    cursor: pointer
}

header .item.on {
    background-color: #00ffd8;
    background-color: rgba(0,255,220,.5)
}

.icoCalendarLive {
    background-image: url(/static/img/calendar.live.png)
}

#wSlogan {
    clear: both;
    padding: 32px;
    font-family: "Playball";
    color: #fff;
    font-size: 2.5em;
    text-align: center;
    text-shadow: 0 0 8px #000
}

#wSlogan .author {
    font-family: Oswald;
    font-size: .6em;
    font-weight: lighter
}

#footerKeeper {
    clear: both;
    height: 80px
}

footer {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    max-height: 80px;
    padding: 8px 8px 16px 8px;
    color: #e0e0e0;
    font-family: 'Raleway';
    font-size: 1em;
    text-shadow: 0 0 2px rgba(0,0,0,.5);
    overflow: hidden
}

#wDisclaimer {
    visibility: hidden;
    position: absolute;
    width: 868px;
    left: 150vw;
    margin-left: -575px;
    top: 140px
}

#wDisclaimer.on {
    visibility: visible;
    animation: slide .5s ease forwards
}

#wDisclaimer.off {
    visibility: visible;
    animation: slideBack .5s ease
}

#wDisclaimer .header {
    background: no-repeat right bottom
}

#wDisclaimer .footer {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    min-height: 32px
}

#wDisclaimer .footer .message {
    float: left;
    display: flex;
    align-items: center;
    width: 720px;
    padding: 0 16px 0 16px;
    height: 76px
}

@keyframes slideToLeft {
    0% {
        _opacity: 1;
        transform: translate(0,0) perspective(1000px) rotateY(0)
    }

    100% {
        _opacity: 0;
        transform: translate(-100vw,0) perspective(1000px) rotateY(0)
    }
}

@keyframes slideFromLeft {
    0% {
        _opacity: 0;
        transform: translate(-100vw,0) perspective(1000px) rotateY(0)
    }

    100% {
        _opacity: 1;
        transform: translate(0,0) perspective(1000px) rotateY(0)
    }
}

@keyframes slide {
    0% {
        _opacity: 0;
        transform: translate(0,0) perspective(1000px) rotateY(0)
    }

    100% {
        _opacity: 1;
        transform: translate(-100vw,0) perspective(1000px) rotateY(0)
    }
}

@keyframes slideBack {
    0% {
        _opacity: 1;
        transform: translate(-100vw,0) perspective(1000px) rotateY(0)
    }

    100% {
        _opacity: 0;
        transform: translate(0,0) perspective(1000px) rotateY(0)
    }
}

#wCore {
    _position: absolute;
    margin: auto;
    width: 1150px;
    _top: 140px;
    _left: 50%;
    _margin-left: -600px
}

#wSmtper {
    width: 868px
}

#wSmtper .header {
    background: url(https://www.smtper.net/lib/wSmtper/img/mail.png) no-repeat right top
}

#wSmtper .core {
    display: inline-block;
    _\5f background: url(https://www.smtper.net/lib/wSmtper/img/smtp.png) no-repeat center center
}

#wSmtper input[type="text"] {
    padding: 6px;
    width: 240px;
    border: 1px solid #606060;
    border-radius: 3px;
    background-color: transparent;
    color: #e0e0e0
}

#wSmtper input[type="text"]:focus {
    border-color: #4080f0
}

#wSmtper input[type="checkbox"]:focus {
    box-shadow: 0 0 5px 2px #4080f0
}

#wSmtper .foo {
    float: left;
    width: 80px;
    padding-top: 6px;
    text-align: left
}

#wSmtper .moo {
    float: left;
    width: 240px;
    text-align: left
}

#wSmtper .line {
    clear: both;
    padding: 8px 0 8px 0
}

#wSmtper .line.disabled {
    color: #808080
}

#wSmtper .comment {
    font-size: 12px;
    color: #808080
}

.red {
    color: #ff4040 !important
}

.orange {
    color: #ffc000
}

.green {
    color: #10b025
}

.highlight {
    color: #d0d0a0
}

#wSmtperLabelResult {
    clear: both;
    display: inline-block;
    width: calc(100% - 100px);
    font-size: 1rem;
    text-align: left
}

#xMessage {
    background-color: #ffb400;
    border-bottom: 1px solid #c08000;
    border-top: 1px solid #ffd000;
    color: #fff;
    padding: 4px;
    text-align: center
}

button {
    background-color: #fff;
    border: 1px solid #303030;
    border-radius: 3px;
    box-shadow: 0 0 6px rgba(0,0,0,.5);
    font-family: Raleway,sans-serif;
    font-size: 14px;
    padding: 6px 12px 6px 12px;
    cursor: pointer;
    opacity: .9
}

button:hover {
    box-shadow: 0 0 4px rgba(0,0,0,.4);
    opacity: 1
}

button.green {
    border-color: #10b025;
    background-color: #15cc35;
    color: #fff
}

#xNotification-badge {
    display: none;
    box-sizing: content-box;
    position: absolute;
    right: 16px;
    top: 64px;
    width: 32px;
    height: 32px;
    background-color: rgba(255,255,255,.9);
    border-radius: 50%;
    _border: 5px solid rgba(0,0,0,.7);
    box-shadow: 0 0 8px rgba(0,0,0,.5);
    color: #333;
    cursor: pointer;
    font-size: 32px;
    z-index: 1000
}

#xNotification-badge.on {
    display: inline-block
}

#xNotification {
    display: none;
    position: absolute;
    right: 16px;
    top: 64px;
    padding: 16px 16px 16px 16px;
    background-color: #fff;
    border-radius: 5px 16px 5px 5px;
    box-shadow: 0 0 8px rgba(0,0,0,.8);
    color: #333;
    cursor: default;
    font-size: .8rem;
    z-index: 1000
}

#xNotification.on {
    display: block
}

.xNotification-title {
    font-size: 1rem;
    font-weight: bold;
    margin-bottom: 8px
}

.xNotification-button {
    color: #f08;
    cursor: pointer;
    font-weight: bold
}

#xPopup {
    position: fixed;
    display: inline-block;
    left: 50vw;
    top: -10vh;
    min-width: 150px;
    min-height: 200px;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 2px 16px rgba(0,0,0,.5);
    transform: translate(-50%,-100%);
    z-index: 1001
}

#xPopup.transitionFx {
    transition: all ease .3s
}

#xPopup.on {
    top: calc(25vh - 100px);
    transform: translate(-50%,0%)
}

#xPopup .xPopupClose {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 24px;
    height: 24px;
    font-size: 20px;
    cursor: pointer;
    color: #606060;
    text-align: center;
    transition: transform ease .3s
}

#xPopup .xPopupClose:hover {
    transform: translate(0,-1px)
}

#xPopup-disclaimer {
    
    background: url(https://www.smtper.net/lib/wSmtper/img/paper-airplane.png) no-repeat right -160px
}

#xPopup-about .xPopup-core {
    background: url(https://www.smtper.net/lib/wSmtper/img/mail.png) no-repeat right bottom -160px
}

.xPopup {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column
}

.xPopup-header {
    color: #303030;
    font-family: 'Orbitron',cursive;
    font-weight: normal;
    font-size: 24px;
    line-height: 32px;
    padding-top: 16px;
    text-align: center;
    flex: 0 0 64px
}

.xPopup-core {
    padding: 16px;
    flex: 1;
    overflow: auto
}

.xPopup-footer {
    border-top: 1px solid #c0c0c0;
    width: 100%;
    padding: 20px 16px 16px 16px;
    _height: 64px;
    flex: 0 0 64px
}

#xBackdrop {
    position: fixed;
    display: none;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0,0,0,.5);
    z-index: 999
}

#xBackdrop.on {
    display: block
}

#xPopup-error {
    width: 100%;
    height: 100%;
    font-size: 16px;
    padding: 16px
}

xPopup-error-html {
    height: 240px;
    overflow-y: auto
}

#xSnackbar {
    display: none;
    left: 50%;
    bottom: 0;
    min-width: 250px;
    background-color: #fff;
    border: 1px solid #f0f0f0;
    border-radius: 2px;
    color: #303030;
    text-align: center;
    padding: 8px;
    position: fixed;
    z-index: 1002;
    box-shadow: 0 0 16px rgba(0,0,0,.3)
}

#xSnackbar.show {
    display: block;
    animation: xSnackbar-fadein .3s ease forwards,xSnackbar-fadeout .3s ease 2.5s forwards
}

@keyframes xSnackbar-fadein {
    from {
        opacity: 0;
        transform: translate(-50%,0)
    }

    to {
        opacity: 1;
        transform: translate(-50%,-16px)
    }
}

@keyframes xSnackbar-fadeout {
    from {
        opacity: 1;
        transform: translate(-50%,-16px)
    }

    to {
        opacity: 0;
        transform: translate(-50%,-100vh)
    }
}

@media(max-width: 639px) {
    #xSnackbar {
        width:90vw
    }
}

@media(max-width: 600px) {
    .no-mobile {
        display:none
    }
}

@media(max-width: 1023px) {
    #xPopup {
        width:80vw !important
    }
}

@media(max-width: 639px) {
    #xPopup {
        width:90vw !important
    }
}

@media(max-height: 600px) {
    #xPopup {
        width:95vw !important;
        height: 92vh !important
    }

    #xPopup.on {
        top: 4vh !important
    }
}

.aWindow-menu {
    color: #444;
    font-size: .9rem
}

.aWindow-menu .leftMenuButton {
    display: inline-block;
    padding: .75rem;
    cursor: pointer
}

.aWindow-menu .aWindow-menu-item {
    display: block;
    padding: .8rem
}

.aWindow-menu .aWindow-menu-item:hover {
    background-color: rgba(32,32,32,.5);
    color: #e0e0e0
}

.aWindow-menu .aWindow-menu-item.on {
    background-color: rgba(32,32,32,.75);
    color: #fff
}

.aTable {
    display: inline-block;
    color: #666
}

.aTable tr {
    border-top: 1px solid #c0c0c0
}

.aTable tr:first-of-type {
    border-top: none
}

.aTable td {
    padding: 8px
}

body.darkmode .aTable {
    color: #e0e0e0
}

body.darkmode .aTable tr {
    border-top: 1px solid #606060
}

.transitionAllEase {
    transition: all ease .3s
}

.aWindow {
    display: none;
    position: absolute;
    width: calc(100vw - 12vh);
    border-radius: 5px;
    left: 50vw;
    top: calc(50vh + 26px);
    cursor: default;
    transform: translate(-50%,-50%);
    box-shadow: 0 4px 16px #000;
    overflow: hidden;
    z-index: 100;
    flex-direction: column
}

.aWindow.transitionFx {
    transition: all ease .3s
}

.aWindow.off {
    display: none
}

.aWindow.on {
    display: block
}

.aWindow.maxi {
    width: 100vw !important;
    height: 100vh !important;
    top: 0 !important;
    transform: translate(-50%,0) !important;
    border-radius: 0
}

.aWindow.maxi .aWindow-header {
    background-color: #00b0a0
}

.aWindow-header {
    padding: 8px 8px 8px 16px;
    background-color: rgba(0,190,160,.8);
    color: #fff;
    height: 48px;
    line-height: 32px
}

._aWindow-header-title {
    display: inline-block;
    width: 200px;
    font-family: 'Orbitron',cursive;
    font-weight: normal;
    font-size: 20px;
    color: #404040;
    line-height: 32px
}

.aWindow-flex {
    position: relative;
    height: calc(100% - 48px);
    font-size: .8rem;
    line-height: 1rem;
    padding-left: 301px;
    background-color: transparent
}

.aWindow-menu {
    position: absolute;
    left: 0;
    top: 0;
    width: 301px;
    height: 100% !important;
    border-right: 1px solid #505050;
    background-color: #e0e0e0;
    z-index: 100
}

.aWindow-menu.transitionFx {
    transition: all ease .3s
}

.aWindow-menu.maxi {
    left: 0 !important
}

.aWindow-core {
    background-color: #fff;
    color: #404040;
    width: 100%;
    height: 100%;
    overflow-y: auto
}

.aWindow-footer {
    position: absolute;
    width: 100%;
    bottom: 0;
    padding: 20px 24px 20px 24px;
    color: #404040;
    _height: 100px;
    line-height: 32px
}

.aWindow-icon-button {
    display: inline-block;
    width: 32px;
    height: 32px;
    color: #fff;
    cursor: pointer;
    line-height: 32px;
    text-align: center;
    transition: all ease .3s
}

.aWindow-icon-button:hover {
    color: #f0f0f0
}

.aWindow-button {
    display: inline-block;
    background-color: #ff4060;
    border-radius: 2px;
    border: 1px solid #dd3040;
    box-shadow: 0 1px 4px rgba(0,0,0,.3);
    padding: .4rem .5rem .4rem .5rem;
    color: #fff;
    cursor: pointer;
    font-size: .8rem;
    line-height: .8rem;
    text-align: center;
    transition: all ease .3s
}

.aWindow-button.big {
    padding: .4rem .5rem .4rem .5rem;
    padding: .6rem .75rem .6rem .75rem;
    font-size: 1rem;
    line-height: 1rem
}

.aWindow-button:hover {
    border: 1px solid #ff5880;
    background-color: #ee4060
}

.aWindow-button.green {
    background-color: #3fc795;
    border-color: #1fa775;
    color: #fff
}

.aWindow-button.green:hover {
    background-color: #4fd7a5;
    border-color: #2fb785;
    color: #fff
}

.aWindow-button.orange {
    background-color: #fb0;
    border-color: #ca0;
    color: #fff
}

.aWindow-button.orange:hover {
    background-color: #fa0;
    border-color: #c80;
    color: #fff
}

.aWindow-button.fuchsia {
    background-color: #ff4060;
    border-color: #dd3040;
    color: #fff
}

.aWindow-button.fuchsia:hover {
    background-color: #ff5880;
    border-color: #ee4060;
    color: #fff
}

.aWindow-button.fuchsia:focus {
    box-shadow: 0 1px 8px rgba(0,0,0,.5)
}

.aWindow-button.fuchsia:disabled {
    background-color: #816167;
    border-color: #4c3437;
    color: #4c3437
}

.aWindow-line {
    display: flex;
    position: relative;
    clear: both;
    width: 100%;
    font-size: 0;
    line-height: 0
}

.aWindow-line>div {
    flex: 1;
    padding: 12px
}

.aWindow label {
    font-size: .8rem;
    line-height: .8rem;
    color: #4080a0;
    cursor: default
}

.aWindow .label {
    display: block;
    color: #a0a0a0;
    font-size: .7rem;
    line-height: .7rem
}

.aWindow .label.important {
    color: #ff5880;
    font-size: .8rem;
    line-height: .8rem
}

.aWindow .label.orange {
    color: #e0a000
}

.aWindow .tips {
    color: #808080;
    font-size: .8rem;
    line-height: 1rem;
    vertical-align: bottom
}

.aWindow input[type="number"],.aWindow input[type="text"],.aWindow input[type="password"] {
    position: relative;
    background: none;
    border: none;
    border-bottom: 1px solid #d0d0d0;
    color: #606060;
    font-size: 1rem;
    line-height: 1rem;
    padding: 2px 0 2px 0;
    transition: all .3s cubic-bezier(.64,.09,.08,1);
    background: linear-gradient(to bottom,transparent 96%,#808080 4%);
    background-position: 0 0;
    background-size: 0 100%;
    background-repeat: no-repeat
}

.aWindow input[type="number"]:focus,.aWindow input[type="text"]:focus,.aWindow input[type="password"]:focus {
    background-size: 100% 100%
}

.aWindow input[type="checkbox"]:focus {
    box-shadow: 0 0 4px rgba(0,0,0,.5)
}

.aWindow .highlight {
    color: #32c080
}

.aWindow ::placeholder {
    opacity: .75
}

body.darkmode .aWindow {
    background: #303030 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAIElEQVQIW2NsbW2VZACC6urq5yCaEUMAJAoCMAlGdAEA1nELVfaAsPsAAAAASUVORK5CYII=) repeat
}

body.darkmode .aWindow .aWindow-header {
    background-color: transparent;
    border-bottom: 1px solid #202020
}

body.darkmode .aWindow .aWindow-flex {
    _border-top: 1px solid #404040
}

body.darkmode .aWindow .aWindow-menu {
    background-color: transparent;
    border-right: 1px solid #202020;
    border-top: none;
    color: #a0a0a0
}

body.darkmode .aWindow .aWindow-core {
    background-color: transparent;
    border-left: 1px solid #404040;
    border-top: 1px solid #404040;
    color: #e0e0e0
}

body.darkmode .aWindow input[type="number"],body.darkmode .aWindow input[type="text"],body.darkmode .aWindow input[type="password"] {
    background: linear-gradient(to bottom,transparent 96%,#20a060 4%);
    background-position: 0 0;
    background-size: 0 100%;
    background-repeat: no-repeat;
    border-bottom: 1px solid #505050;
    color: #f0f0f0
}

body.darkmode .aWindow input[type="number"]:focus,body.darkmode .aWindow input[type="text"]:focus,body.darkmode .aWindow input[type="password"]:focus {
    background-size: 100% 100%;
    color: #f0e0d0
}

body.darkmode .aWindow input[type="checkbox"]:focus {
    box-shadow: 0 0 4px #fff
}

@media(max-width: 1279px) {
    .aWindow {
        width:96vw !important
    }
}

@media(max-width: 1023px) {
    .no-narrow {
        display:none !important
    }
}

table.yo td {
    padding: 12px
}

@media(max-width: 640px) {
    .no-maximized {
        display:none !important
    }

    .aWindow {
        border-radius: 0;
        width: 100vw !important;
        height: 100vh !important;
        top: 0 !important;
        transform: translate(-50%,0) !important
    }

    .aWindow-header {
        background-color: #00b0a0
    }

    .aWindow-flex {
        padding-left: 40px
    }

    .aWindow-menu {
        left: calc(-300px + 2.5rem)
    }

    table.yo td {
        _padding: 8px !important
    }
}

@media(max-height: 600px) {
    .no-maximized {
        display:none !important
    }

    .aWindow {
        border-radius: 0;
        width: 100vw !important;
        height: 100vh !important;
        top: 0 !important;
        transform: translate(-50%,0) !important
    }

    .aWindow-header {
        background-color: #00b0a0
    }

    table.yo td {
        _padding: 8px !important
    }
}

.wWindow {
    position: relative;
    background-color: #303030;
    background: #303030 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAIElEQVQIW2NsbW2VZACC6urq5yCaEUMAJAoCMAlGdAEA1nELVfaAsPsAAAAASUVORK5CYII=) repeat;
    color: #d0d0d0;
    font-size: 14px;
    line-height: 18px;
    border-radius: 8px;
    box-shadow: 0 2px 20px rgba(0,0,0,.4)
}

.macOSxButton {
    _display: none;
    float: left;
    margin: 4px 0 4px 6px;
    width: 13px;
    height: 13px;
    border: 1px solid #400000;
    background-color: #808080;
    overflow: hidden;
    border-radius: 6px;
    box-shadow: 0 0 3px rgba(0,0,0,.25)
}

.macOSxRedButton {
    border: 1px solid #f03030;
    background-color: #ff4040
}

.macOSxOrangeButton {
    border: 1px solid #f0a000;
    background-color: #ffbe05
}

.macOSxGreenButton {
    border: 1px solid #10b025;
    background-color: #15cc35
}

h1,.title {
    font-family: 'Orbitron',cursive;
    font-weight: normal;
    font-size: 24px;
    color: #f0f0f0;
    line-height: 32px
}

.separator {
    border-top: 1px solid #181818;
    border-bottom: 1px solid #505050;
    height: 0;
    overflow: hidden
}

.wWindow .footerButtonPanel {
    margin: 24px 24px 24px 16px
}