.header {
    padding: 30px 100px;
    border-bottom-right-radius: 50%;
    border-bottom-left-radius: 50%;
    background: #0af;
    color: #fff;
    user-select: none
}

.content {
    padding: 10px
}

.content-text {
    margin: 30px;
    font-weight: lighter;
    font-size: 20px;
    font-family: Harmony OS Sans SC
}

p {
    text-align: center
}

.h1,
p {
    margin: 20px;
    font-family: Harmony OS Sans SC
}

.h1 {
    font-size: 50px
}

.h1,
.h2 {
    font-weight: 700
}

.h2 {
    margin: 20px;
    font-size: 30px;
    font-family: Harmony OS Sans SC
}

.blocklyWidgetDiv .blocklyMenu {
    overflow: hidden
}

.blocklyFlyoutButton {
    fill: #0af
}

.blocklyFlyoutButton:hover {
    fill: #009ae7
}

.blocklyFlyoutButtonShadow {
    fill: transparent
}

.blocklyToolboxCategory,
.blocklyToolboxCategory * {
    transition: 0s !important
}

.darktheme .blocklyFlyoutLabelText {
    fill: #fff !important
}

.blocklyTooltipDiv {
    background-color: #fff
}

.darktheme .blocklyTooltipDiv {
    border: 1px solid #555;
    background-color: #666;
    color: #fff
}

.blocklyContextMenu,
.blocklyMenu,
.blocklyTrash *,
.blocklyZoom * {
    transition: .18s
}

.blocklyFlyoutButton {
    transition: fill .18s
}

.blocklyTreeRow {
    padding: 5px 10px 5px 5px;
    height: auto;
    cursor: pointer
}

.blocklyTreeRow:not(.blocklyTreeSelected):hover {
    background: #ddd !important
}

* {
    margin: 0
}

.blocklyTrash,
.blocklyZoom {
    display: none
}

.right-bottom-navigation-bar {
    position: fixed;
    right: 40px;
    bottom: 30px;
    z-index: 4800;
    display: flex;
    height: 40px;
    cursor: pointer;
    transition: .3s;
    flex-direction: row;
    align-items: center
}

.right-bottom-navigation-bar .right-bottom-navigation-bar-div {
    display: flex;
    margin: 0 5px;
    justify-content: center;
    align-items: center
}

.right-bottom-navigation-bar .right-bottom-navigation-bar-div .right-bottom-navigation-bar-div-svg {
    padding: 0;
    width: 24px;
    height: 24px
}

.right-bottom-navigation-bar .right-bottom-navigation-bar-div .right-bottom-navigation-bar-div-svg svg {
    width: 24px;
    height: 24px
}

.right-bottom-navigation-bar>div[data-tip],
.right-bottom-navigation-bar>div[data-tip]:after {
    display: flex;
    justify-content: center;
    align-items: center
}

.right-bottom-navigation-bar>div[data-tip]:after {
    position: absolute;
    top: -10px;
    z-index: 4800;
    padding: 8px;
    width: max-content;
    border-radius: 20px;
    background: rgba(0, 0, 0, .67);
    color: #fff;
    content: attr(data-tip);
    font-size: 12px;
    opacity: 0;
    transition: opacity .2s, top .2s;
    transform: scale(1);
    user-select: none;
    pointer-events: none
}

.right-bottom-navigation-bar>div[data-tip]:hover:after {
    top: -25px;
    opacity: 1
}

.right-bottom-navigation-bar-division {
    margin: 5px
}

.right-bottom-navigation-bar-text {
    margin: 5px;
    color: #000;
    font-weight: 700;
    font-size: 16px
}

:root {
    --common-background: #fff;
    --common-color: #000;
    --quote-color: #800;
    --keyword-color: #008;
    --variable-color: #660;
    --string-color: #080;
    --literal-color: #066;
    --title-color: #606;
    --attribute-color: #000;
    --formula-color: #eee;
    --selector-color: #9b703f;
    --addition-color: #baeeba;
    --deletion-color: #ffc8bd
}

.hljs {
    display: block;
    overflow-x: auto;
    padding: .5em;
    background: var(--common-background);
    color: var(--common-color)
}

.hljs-comment,
.hljs-quote {
    color: var(--quote-color)
}

.hljs-keyword,
.hljs-name,
.hljs-section,
.hljs-selector-tag,
.hljs-title {
    color: var(--keyword-color)
}

.hljs-template-variable,
.hljs-variable {
    color: var(--variable-color)
}

.hljs-regexp,
.hljs-selector-attr,
.hljs-selector-pseudo,
.hljs-string {
    color: var(--string-color)
}

.hljs-bullet,
.hljs-link,
.hljs-literal,
.hljs-meta,
.hljs-number,
.hljs-symbol {
    color: var(--literal-color)
}

.hljs-attr,
.hljs-built_in,
.hljs-builtin-name,
.hljs-doctag,
.hljs-params,
.hljs-title,
.hljs-type {
    color: var(--title-color)
}

.hljs-attribute,
.hljs-subst {
    color: var(--attribute-color)
}

.hljs-formula {
    background-color: var(--formula-color);
    font-style: italic
}

.hljs-selector-class,
.hljs-selector-id {
    color: var(--selector-color)
}

.hljs-addition {
    background-color: var(--addition-color)
}

.hljs-deletion {
    background-color: var(--deletion-color)
}

.hljs-doctag,
.hljs-strong {
    font-weight: 700
}

.hljs-emphasis {
    font-style: italic
}

.code-dialog {
    position: fixed;
    top: 0;
    right: -800px;
    z-index: 99999999999;
    overflow: auto;
    padding: 8px;
    width: 500px;
    height: 100%;
    border-left: 1px solid #000;
    background-color: #fff;
    transition: .3s
}

.code-dialog .code-dialog-button {
    position: absolute;
    bottom: 40px;
    z-index: 4900;
    display: flex;
    margin: 0 5px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #000;
    cursor: pointer;
    justify-content: center;
    align-items: center
}

.code-dialog .code-dialog-button[left] {
    right: 20px
}

.code-dialog .code-dialog-button[right] {
    display: none
}

.code-dialog .code-dialog-button .code-dialog-button-svg {
    padding: 0;
    width: 24px;
    height: 24px
}

.code-dialog.show {
    right: 0
}

.code-dialog .code-dialog-button .code-dialog-button-svg svg {
    width: 24px;
    height: 24px
}

.code-dialog .code-dialog-button[data-tip]:after {
    position: absolute;
    top: -20px;
    z-index: 880999;
    display: flex;
    padding: 8px;
    width: max-content;
    border-radius: 20px;
    background: rgba(0, 0, 0, .67);
    color: #fff;
    content: attr(data-tip);
    font-size: 12px;
    opacity: 0;
    transition: opacity .2s, top .2s;
    transform: scale(1);
    justify-content: center;
    align-items: center;
    user-select: none
}

@media (max-width:1000px) {
    .code-dialog {
        display: none
    }

    .code-dialog.show {
        display: block;
        width: calc(100% - 10px)
    }

    .code-dialog .code-dialog-button[left] {
        right: 80px
    }

    .code-dialog .code-dialog-button[right] {
        right: 20px;
        display: flex
    }
}

.code-dialog .code-dialog-button[data-tip]:hover:after {
    top: -35px;
    opacity: 1
}

body.code-dialog-show-body .workzone #blocklyDiv {
    width: calc(100% - 500px)
}

body.code-dialog-show-body .right-bottom-navigation-bar {
    right: 540px
}

.app-blue-button {
    display: inline-block;
    margin: 5px;
    padding: 20px;
    width: 200px;
    border: none;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    background-color: #0070f3;
    -webkit-box-shadow: 0 4px 14px 0 rgb(0 118 255/39%);
    box-shadow: 0 4px 14px 0 rgb(0 118 255/39%);
    color: #fff;
    text-align: center;
    font-size: 20px;
    cursor: pointer;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    transition: all .5s
}

.app-blue-button span {
    position: relative;
    display: inline-block;
    cursor: pointer
}

.app-blue-button span,
.app-blue-button span:after {
    -webkit-transition: .5s;
    -moz-transition: .5s;
    transition: .5s
}

.app-blue-button span:after {
    position: absolute;
    top: 0;
    right: -20px;
    content: "»";
    opacity: 0;
    -webkit-transform: scale(1.5);
    -moz-transform: scale(1.5);
    transform: scale(1.5);
    -ms-transform: scale(1.5)
}

.app-blue-button:hover span {
    padding-right: 25px
}

.app-blue-button:hover span:after {
    right: 0;
    opacity: 1
}

.blue-button {
    display: inline-block;
    margin: 5px;
    padding: 20px;
    width: 200px;
    border: none;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    background-color: #0070f3;
    -webkit-box-shadow: 0 4px 14px 0 rgb(0 118 255/39%);
    box-shadow: 0 4px 14px 0 rgb(0 118 255/39%);
    color: #fff;
    text-align: center;
    font-weight: 400;
    font-size: 20px;
    font-family: Harmony OS Sans SC;
    cursor: pointer;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    transition: all .5s
}

.blue-button:hover {
    background-color: #fff;
    color: #0070f3
}

.blue-button_click {
    display: inline-block;
    margin: 5px;
    padding: 20px;
    width: 200px;
    border: none;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    background-color: #0070f3;
    -webkit-box-shadow: 0 4px 14px 0 rgb(0 118 255/39%);
    box-shadow: 0 4px 14px 0 rgb(0 118 255/39%);
    color: #fff;
    text-align: center;
    font-size: 20px;
    cursor: pointer;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    transition: all .5s
}

.blocklyTreeIcon {
    visibility: visible;
    width: 24px;
    height: 24px;
    background: 0;
    vertical-align: middle
}

.blocklyTreeLabel {
    font-size: 16px
}

.blocklyTreeRowContentContainer {
    display: flex;
    flex-direction: column;
    align-items: center
}

.blocklyTreeRow {
    margin: 0;
    padding: 8px 10px !important;
    border: none !important;
    background-color: transparent !important
}

.blocklyTreeIcon {
    margin-bottom: 5px
}

.blocklyTreeLabel {
    padding: 0
}

.blocklyTreeRowContentContainer {
    max-width: 50px;
    min-width: 50px
}

.blocklyTreeSelected .blocklyTreeLabel {
    color: #000
}

.blocklyTreeSelected {
    background: rgba(0, 0, 0, .2) !important
}

.blocklyTreeRow:not(.blocklyTreeSelected):hover {
    background-color: rgba(0, 0, 0, .1) !important
}

.blocklyFlyout,
.blocklyToolboxDiv {
    box-shadow: 2px 0 4px -1px rgba(0, 0, 0, .2), 4px 0 5px 0 rgba(0, 0, 0, .14), 1px 0 10px 0 rgba(0, 0, 0, .12)
}

.blocklyToolboxDiv::-webkit-scrollbar {
    display: none
}

.app-top-icon {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99999;
    display: flex;
    background-color: #fff;
    cursor: pointer;
    align-items: center;
    justify-items: center;
    justify-content: center;
    align-content: center
}

.app-top-icon:hover {
    background-color: rgba(0, 0, 0, .1)
}

.app-top-icon.open {
    background-color: rgba(0, 0, 0, .2)
}

.app-top-icon:hover>img {
    filter: brightness(.9)
}

.app-top-icon.open>img {
    filter: brightness(.8)
}

.blocklyScrollbarVertical .blocklyScrollbarHandle {
    width: 5px
}

.blocklyScrollbarVertical .blocklyScrollbarBackground {
    width: 10px
}

.blocklyScrollbarHorizontal .blocklyScrollbarHandle {
    height: 5px
}

.blocklyScrollbarHorizontal .blocklyScrollbarBackground {
    height: 10px
}

.swal-overlay {
    z-index: 999999999999
}

.app-top-menu {
    position: fixed;
    top: 15px;
    left: 80px;
    z-index: 9999999999;
    display: none;
    padding: 0;
    border-radius: 10px;
    background: #fff;
    box-shadow: 5px 5px 10px #aaa;
    user-select: none;
    flex-direction: column
}

a.app-top-menu-div {
    padding: 10px 20px;
    cursor: pointer
}

a.app-top-menu-div:first-child {
    border-radius: 10px 10px 0 0
}

a.app-top-menu-div:last-child {
    border-radius: 0 0 10px 10px
}

a.app-top-menu-div:hover {
    background-color: rgba(0, 0, 0, .1)
}

a.app-top-menu-div:active {
    background-color: rgba(0, 0, 0, .2)
}

.app-top-menu hr {
    margin: 5px 0
}

.app-top-menu.show {
    display: flex
}

.mdui-toolbar .mdui-tab-indicator {
    display: none
}

.blocklyFlyoutBackground {
    fill-opacity: 1
}

.injectionDiv>.blocklyFlyout {
    position: absolute;
    z-index: 3;
    display: block !important;
    overflow: hidden;
    height: 100vh;
    transition: transform .3s ease 0s, opacity .3s ease-out 0s;
    transform: translate(-240px)
}

.blocklyFlyoutScrollbar {
    display: none
}

.settingsdialog>.mdui-dialog-content {
    display: flex;
    flex-direction: column;
    user-select: none
}

.mdui-tab a {
    min-width: 136px
}

.settingsdialog {
    height: fit-content !important
}

.blocklyFlyout:hover {
    overflow: visible
}

.blocklyMenuItem {
    transition: .3s
}

.blocklyDropDownDiv {
    transition: transform .25s ease 0s, opacity .25s ease, box-shadow .3s ease !important
}

.delect-block-zone {
    position: absolute;
    top: 0;
    z-index: -100;
    height: 100%;
    background-color: rgba(0, 0, 0, .33);
    opacity: 0;
    transition: 0s
}

.delect-block-zone .delete-svg {
    position: absolute;
    top: 50%;
    left: 15px;
    z-index: 0;
    width: 30px;
    opacity: 0
}

.delect-block-zone #delete-svg-up {
    left: 12.5px;
    margin-top: -4px;
    width: 35px;
    transition: transform .1s cubic-bezier(1, 1, 1, 1)
}

.delect-block-zone #delete-svg-down {
    margin-top: 3px
}

.blocklyToolboxCategory {
    width: 100%
}

.delect-block-zone-show {
    z-index: 301;
    opacity: 1
}

.delect-block-zone-show:hover svg#delete-svg-up.delete-svg {
    transform: translate(-4px, -4px) rotate(-20deg)
}

.delect-block-zone-show:hover {
    background-color: rgba(0, 0, 0, .53)
}

.delect-block-zone-show * {
    opacity: 1 !important
}

.history-trash-btn {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 300;
    display: flex;
    height: auto;
    background-color: #fff;
    cursor: pointer;
    flex-direction: column;
    align-items: center
}

.history-trash-btn * {
    fill: #000 !important
}

.history-trash-btn svg {
    width: 30px
}

.history-trash-btn svg#delete-svg-up {
    transform: translateY(10px)
}

.history-trash-btn:hover {
    background-color: #ddd
}

.mdui-toolbar>img {
    margin: 0;
    padding-left: 10px;
    height: 100%;
    background-color: #fff
}

.search-block-btn {
    position: absolute;
    bottom: 71px;
    left: 0;
    z-index: 300;
    display: flex;
    height: auto;
    background-color: #fff;
    cursor: pointer;
    flex-direction: column;
    align-items: center
}

.search-block-btn * {
    fill: #000 !important
}

.search-block-btn svg {
    width: 30px;
    height: 50px
}

.search-block-btn svg#delete-svg-up {
    transform: translateY(10px)
}

.search-block-btn:hover {
    background-color: #ddd
}

.beta-category .blocklyTreeIcon {
    filter: blur(1px)
}

.beta-category .blocklyTreeLabel {
    color: #afafaf
}

.mdui-dialog-alert {
    z-index: 999999999999
}

.blocklyMenuItem {
    padding: 10px 20px
}

.mdui-dialog-title button[mdui-dialog-close] {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%)
}

.mdui-dialog>.mdui-dialog-title {
    position: relative
}

.mdui-dialog {
    border-radius: 5px;
}

.mdui-dialog>.mdui-dialog-title {
    background: #00adff !important;
}

.mdui-tab .mdui-tab-active {
    color: #00adff !important;
    opacity: 1;
}

.mdui-tab-indicator {
    background-color: #00adff !important;
}

.mdui-theme-accent-blue .mdui-switch input[type=checkbox]:checked+.mdui-switch-icon::before {
    background-color: #00adff !important;
}

.mdui-theme-accent-blue .mdui-switch input[type=checkbox]:checked+.mdui-switch-icon {
    background-color: #00adff55 !important;
}

.mdui-theme-accent-blue .mdui-select-menu-item[selected] {
    color: #00adff !important;
}

.mdui-toolbar .mdui-menu {
    top: 54px !important;
}

py-splashscreen {
    display: none;
}