:root {
    --tinylayer-theme-color: #1588fc;
    --tinylayer-info-icon-color: #1588fc;
    --tinylayer-success-icon-color: #24d472;
    --tinylayer-warning-icon-color: #f8a528;
    --tinylayer-error-icon-color: #f43f26;
    --tinylayer-animation-duration: 280ms;
    --tinylayer-loading-background: rgb(255 255 255 / 95%);
    --tinylayer-public-mask-background: rgb(0 0 0 / 70%);
    --tinylayer-public-wrapper-background: #fff;
    --tinylayer-public-wrapper-radius: 4px;
    --tinylayer-public-button-radius: 4px;
    --tinylayer-public-title-color: #000;
    --tinylayer-ok-button-color: #fff;
    --tinylayer-cancel-button-color: #707070;
    --tinylayer-cancel-button-background: #fff;
    --tinylayer-cancel-button-border-color: #d0d0d0;
    --tinylayer-alert-confirm-content-color: #2f2f2f;
    --tinylayer-prompt-input-background: #fff;
    --tinylayer-prompt-input-border-color: #e0e0e0;
    --tinylayer-prompt-input-color: #3a3b3b;
    --tinylayer-prompt-error-color: #f43f26;
    --tinylayer-prompt-input-tip-color: #6c6c70;
    --tinylayer-prompt-input-disabled-background: #f1f1f1;
    --tinylayer-prompt-input-radius: 4px;
    --tinylayer-modal-line-color: #e0e0e0;
    --tinylayer-modal-content-color: #2f2f2f;
    --tinylayer-modal-content-padding: 15px;
    --tinylayer-modal-header-footer-lr-padding: 15px;
    --tinylayer-modal-content-loading-background: rgb(255 255 255 / 95%);
}
html.dark {
    --tinylayer-theme-color: #0e6bc8;
    --tinylayer-info-icon-color: #0e6bc8;
    --tinylayer-success-icon-color: #13b25a;
    --tinylayer-warning-icon-color: #e28d0c;
    --tinylayer-error-icon-color: #e22a10;
    --tinylayer-loading-background: rgb(0 0 0 / 85%);
    --tinylayer-public-mask-background: rgb(0 0 0 / 80%);
    --tinylayer-public-wrapper-background: #1e1d1d;
    --tinylayer-public-title-color: #ededed;
    --tinylayer-ok-button-color: #efeaea;
    --tinylayer-cancel-button-color: #c3c3c5;
    --tinylayer-cancel-button-background: transparent;
    --tinylayer-cancel-button-border-color: #5a5a5a;
    --tinylayer-alert-confirm-content-color: #dcdcdd;
    --tinylayer-prompt-input-background: #212221;
    --tinylayer-prompt-input-border-color: #4f4d4d;
    --tinylayer-prompt-input-color: #c2c3c3;
    --tinylayer-prompt-error-color: #e22a10;
    --tinylayer-prompt-input-tip-color: #a7a7a7;
    --tinylayer-prompt-input-disabled-background: #3e3e3e;
    --tinylayer-modal-line-color: #414141;
    --tinylayer-modal-content-color: #dcdcdd;
    --tinylayer-modal-content-loading-background: rgb(34 34 34 / 93%);
}
html.dark .tinylayer-public-button-ok:not([disabled]):hover {
    opacity: .85 !important;
}
html.dark .tinylayer-icon svg path {
    fill: #fff;
}

@media ( prefers-color-scheme: dark ) {
    :root {
        --tinylayer-theme-color: #0e6bc8;
        --tinylayer-info-icon-color: #0e6bc8;
        --tinylayer-success-icon-color: #13b25a;
        --tinylayer-warning-icon-color: #e28d0c;
        --tinylayer-error-icon-color: #e22a10;
        --tinylayer-loading-background: rgb(0 0 0 / 85%);
        --tinylayer-public-mask-background: rgb(0 0 0 / 80%);
        --tinylayer-public-wrapper-background: #1e1d1d;
        --tinylayer-public-title-color: #ededed;
        --tinylayer-ok-button-color: #efeaea;
        --tinylayer-cancel-button-color: #c3c3c5;
        --tinylayer-cancel-button-background: transparent;
        --tinylayer-cancel-button-border-color: #5a5a5a;
        --tinylayer-alert-confirm-content-color: #dcdcdd;
        --tinylayer-prompt-input-background: #212221;
        --tinylayer-prompt-input-border-color: #4f4d4d;
        --tinylayer-prompt-input-color: #c2c3c3;
        --tinylayer-prompt-error-color: #e22a10;
        --tinylayer-prompt-input-tip-color: #a7a7a7;
        --tinylayer-prompt-input-disabled-background: #3e3e3e;
        --tinylayer-modal-line-color: #414141;
        --tinylayer-modal-content-color: #dcdcdd;
        --tinylayer-modal-content-loading-background: rgb(34 34 34 / 93%);
    }
    .tinylayer-public-button-ok:not([disabled]):hover {
        opacity: .85 !important;
    }
    .tinylayer-icon svg path {
        fill: #fff;
    }
}
.tinylayer-fade-enter-active,
.tinylayer-fade-leave-active,
.tinylayer-scale-enter-active,
.tinylayer-scale-leave-active,
.tinylayer-slide-enter-active,
.tinylayer-slide-leave-active {
    transition: var(--tinylayer-animation-duration);
}
.tinylayer-fade-enter-from,
.tinylayer-fade-leave-to {
    opacity: 0;
}
.tinylayer-scale-enter-from,
.tinylayer-scale-leave-to {
    transform: translate(-50%, -50%) scale(.88) !important;
    opacity: 0;
}
.tinylayer-slide-enter-from,
.tinylayer-slide-leave-to {
    transform: translate(-50%, calc(-50% - 25px)) !important;
    opacity: 0;
}
.tinylayer-loading-body-noscroll,
.tinylayer-modal-body-noscroll {
    padding-right: 17px;
    overflow: hidden !important;
}
.tinylayer-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
.tinylayer-container * {
    box-sizing: border-box;
}
.tinylayer-mask {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    background: var(--tinylayer-public-mask-background);
    pointer-events: auto;
}
.tinylayer-public-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 5;
    min-width: 300px;
    background: var(--tinylayer-public-wrapper-background);
    border-radius: var(--tinylayer-public-wrapper-radius);
    box-shadow: rgb(0 0 0 / 10%) 0 0 15px;
    transform: translate(-50%, -50%);
    pointer-events: auto;
}
.tinylayer-public-wrapper.tinylayer-fullscreen {
    width: 100% !important;
    border-radius: 0 !important;
}
.tinylayer-public-button-box {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    overflow: hidden;
    border-radius: var(--tinylayer-public-button-radius);
}
.tinylayer-public-button-box button,
.tinylayer-public-button-default,
.tinylayer-public-button-default-plain {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    max-width: 300px;
    height: 32px;
    padding: 0 15px;
    overflow: hidden;
    font-size: 14px;
    white-space: nowrap;
    border-radius: var(--tinylayer-public-button-radius);
    outline: none;
    cursor: pointer;
    transition: .2s;
    user-select: none;
}
.tinylayer-public-button-box button {
    margin-left: 7px;
}
.tinylayer-public-button-box button[disabled],
.tinylayer-public-button-default[disabled],
.tinylayer-public-button-default-plain[disabled] {
    cursor: not-allowed;
    opacity: .55;
}
.tinylayer-public-button-ok,
.tinylayer-public-button-default {
    color: var(--tinylayer-ok-button-color);
    background: var(--tinylayer-theme-color);
    border: var(--tinylayer-theme-color) solid 1px;
}
.tinylayer-public-button-ok:not([disabled]):hover,
.tinylayer-public-button-default:not([disabled]):hover,
.tinylayer-public-button-default-plain:not([disabled]):hover {
    opacity: .7;
}
.tinylayer-public-button-ok:not([disabled]):active,
.tinylayer-public-button-default:not([disabled]):active,
.tinylayer-public-button-default-plain:not([disabled]):active {
    opacity: 1;
}
.tinylayer-public-button-default-plain {
    color: var(--tinylayer-theme-color);
    background: transparent;
    border: var(--tinylayer-theme-color) solid 1px;
}
.tinylayer-public-button-ok > i {
    position: relative;
    display: block;
    width: 16px;
    height: 16px;
    margin-right: 6px;
    animation: 2s tinylayer-button-loading-animation linear infinite;
    pointer-events: none;
}

@keyframes tinylayer-button-loading-animation {
    0%  {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
.tinylayer-public-button-cancel {
    color: var(--tinylayer-cancel-button-color);
    background: var(--tinylayer-cancel-button-background);
    border: var(--tinylayer-cancel-button-border-color) solid 1px;
}
.tinylayer-public-button-cancel:not([disabled]):hover {
    color: var(--tinylayer-theme-color);
    border-color: var(--tinylayer-theme-color);
}

/* loading */
.tinylayer-loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--tinylayer-loading-background);
    pointer-events: auto;
}
.tinylayer-loading > div {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 5;
    width: calc(100% - 40px);
    transform: translate(-50%, -50%);
    user-select: none;
}
.tinylayer-loading > div > div {
    position: relative;
    width: 44px;
    height: 44px;
    margin: 0 auto;
    overflow: hidden;
}
.tinylayer-loading > div > p {
    display: block;
    width: 100%;
    height: 20px;
    margin: 5px 0 0;
    overflow: hidden;
    color: var(--tinylayer-theme-color);
    font-size: 14px;
    line-height: 20px;
    white-space: nowrap;
    text-align: center;
    text-overflow: ellipsis;
    user-select: none;
}
.tinylayer-loading svg {
    width: 44px;
    transform-origin: center;
    animation: tinylayer-loading-svg-animation 2s linear infinite;
}
.tinylayer-loading circle {
    animation: tinylayer-loading-circle-animation 1.6s ease-in-out infinite;
    fill: none;
    stroke: var(--tinylayer-theme-color);
    stroke-width: 2;
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
    stroke-linecap: round;
}

@keyframes tinylayer-loading-svg-animation {
    100% {
        transform: rotate(360deg);
    }
}

@keyframes tinylayer-loading-circle-animation {
    0% {
        stroke-dasharray: 1, 200;
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dasharray: 90, 200;
        stroke-dashoffset: -35px;
    }
    100% {
        stroke-dashoffset: -125px;
    }
}

/* alert-confirm */
.tinylayer-alert-confirm {
    padding: 20px 25px;
}
.tinylayer-alert-confirm-header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: 40px;
}
.tinylayer-alert-confirm-header i {
    margin-right: 14px;
    border-radius: 50%;
}
.tinylayer-alert-confirm-warning {
    transform: rotate(180deg);
}
.tinylayer-alert-confirm-header p {
    width: calc(100% - 34px);
    overflow: hidden;
    color: var(--tinylayer-public-title-color);
    font-weight: bold;
    font-size: 16px;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.tinylayer-alert-confirm-content {
    max-height: 400px;
    padding-left: 40px;
    overflow-x: hidden;
    overflow-y: auto;
    color: var(--tinylayer-alert-confirm-content-color);
    font-size: 14px;
    word-break: break-all;
}
.tinylayer-alert-confirm-button {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-top: 40px;
}
.tinylayer-alert-confirm-info path {
    fill: var(--tinylayer-info-icon-color);
}
.tinylayer-alert-confirm-success path {
    fill: var(--tinylayer-success-icon-color);
}
.tinylayer-alert-confirm-warning path {
    fill: var(--tinylayer-warning-icon-color);
}
.tinylayer-alert-confirm-error path {
    fill: var(--tinylayer-error-icon-color);
}

/* prompt */
.tinylayer-prompt .tinylayer-public-wrapper {
    padding: 20px;
}
.tinylayer-prompt-title {
    color: var(--tinylayer-public-title-color);
    font-size: 16px;
    user-select: none;
}
.tinylayer-prompt-input {
    margin: 20px 0 7px;
}
.tinylayer-prompt-input input,
.tinylayer-prompt-input textarea {
    display: block;
    width: 100%;
    padding: 0 10px;
    color: var(--tinylayer-prompt-input-color);
    font-size: 14px;
    background: var(--tinylayer-prompt-input-background);
    border: var(--tinylayer-prompt-input-border-color) solid 1px;
    border-radius: var(--tinylayer-prompt-input-radius);
    outline: none;
    transition-duration: .2s;
    transition-property: border-color;
}
.tinylayer-prompt-input input:not([disabled]):hover,
.tinylayer-prompt-input input:not([disabled]):focus,
.tinylayer-prompt-input textarea:not([disabled]):hover,
.tinylayer-prompt-input textarea:not([disabled]):focus {
    border-color: var(--tinylayer-theme-color);
}
.tinylayer-prompt-input input::placeholder,
.tinylayer-prompt-input textarea::placeholder {
    color: #bbb;
    transform: translateY(0);
}
.tinylayer-prompt-input input[disabled],
.tinylayer-prompt-input textarea[disabled] {
    background: var(--tinylayer-prompt-input-disabled-background);
    cursor: not-allowed;
}
.tinylayer-prompt-input input[disabled]::selection,
.tinylayer-prompt-input textarea[disabled]::selection {
    background: transparent;
}
.tinylayer-prompt-input.tinylayer-prompt-input-error input {
    border-color: var(--tinylayer-prompt-error-color) !important;
}
.tinylayer-prompt-input input {
    height: 34px;
}
.tinylayer-prompt-input textarea {
    height: 120px;
    padding: 10px;
    resize: none;
}
.tinylayer-prompt-input textarea::placeholder {
    display: block;
    transform: translateY(-2px);
}
.tinylayer-prompt-input-tip {
    color: var(--tinylayer-prompt-input-tip-color);
    font-size: 13px;
}
.tinylayer-prompt .tinylayer-public-button-box {
    margin-top: 20px;
}
.tinylayer-prompt-error-msg {
    color: var(--tinylayer-prompt-error-color);
    font-size: 13px;
    word-break: break-all;
}

/* modal */
.tinylayer-modal .tinylayer-content + .tinylayer-loading {
    z-index: 100;
    background: var(--tinylayer-modal-content-loading-background);
}
.tinylayer-draggable .tinylayer-header {
    cursor: grab;
}
.tinylayer-draggable.tinylayer-dragging .tinylayer-header {
    cursor: grabbing;
}
.tinylayer-fullscreen .tinylayer-header,
.tinylayer-fullscreen .tinylayer-footer {
    border-radius: 0;
}
.tinylayer-header,
.tinylayer-footer {
    display: flex;
    align-items: center;
    padding: 0 var(--tinylayer-modal-header-footer-lr-padding);
    overflow: hidden;
}
.tinylayer-header {
    justify-content: space-between;
    border-bottom: var(--tinylayer-modal-line-color) solid 1px;
    border-radius: var(--tinylayer-public-wrapper-radius) var(--tinylayer-public-wrapper-radius) 0 0;
    user-select: none;
}
.tinylayer-title {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: calc(100% - 60px);
    height: 20px;
    overflow: hidden;
    font-weight: 600;
    font-size: 16px;
    white-space: nowrap;
}
.tinylayer-title > span {
    color: var(--tinylayer-public-title-color);
}
.tinylayer-iconbtn {
    display: flex;
    justify-content: flex-end;
    height: 16px;
    cursor: default;
}
.tinylayer-iconbtn > * {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    transform: scale(.9);
    cursor: pointer;
    user-select: none;
}
.tinylayer-iconbtn > *:not(:first-child) {
    margin-left: 14px;
}
.tinylayer-icon {
    opacity: .65;
}
.tinylayer-icon svg path {
    fill: #000;
}
.tinylayer-content {
    position: relative;
    min-height: 110px;
    padding: var(--tinylayer-modal-content-padding);
    overflow-x: hidden;
    overflow-y: auto;
    color: var(--tinylayer-modal-content-color);
    border-radius: var(--tinylayer-public-wrapper-radius);
}
.tinylayer-content-iframe {
    width: 100%;
    height: 100%;
    border: none;
}
.tinylayer-footer {
    justify-content: space-between;
    border-top: var(--tinylayer-modal-line-color) solid 1px;
    border-radius: 0 0 var(--tinylayer-public-wrapper-radius) var(--tinylayer-public-wrapper-radius);
}
.tinylayer-footer-left,
.tinylayer-footer-left-slot {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: 32px;
}
.tinylayer-autoclose {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    font-size: 13px;
    user-select: none;
}
.tinylayer-autoclose span {
    height: 20px;
    line-height: 20px;
}
.tinylayer-autoclose span:first-child {
    width: 30px;
}