.minidraw-canvas {
    box-shadow: 0 0 16px -6px #000;
}
.minidraw-canvas-c {
    text-align: center;
    padding: 50px 0;
    width: calc(100% - 200px);
    height: 100%;
    box-sizing: border-box;
    display: none;
}
.mteditor-right-c {
    width: 200px;
    float: right;
    height: 100%;
    /* height: 90%; */
    /* background: rgb(46 36 55); */
    box-sizing: border-box;
    /* padding: 20px; */
    /* background: #fff; */
    display: flex;
    /* max-height: 100vh; */
    position: relative;
    flex-direction: column;
    flex-wrap: nowrap;
    /* align-self: stretch; */
}
.minidrawpage .bottombar-container {
    display: none;
}
.minidrawpage .default-main {
    height: 100vh;
    /* padding-top: 40px; */
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
    margin: 0;
    padding: 0;
    width: 100vw;
    position: fixed;
    /* height: 100%; */
}
.minidraw-draft, .minidraw-download {
    text-align: center;
    font-size: 16px;
    text-transform: uppercase;
    /* border-bottom-width: 4px; */
    margin-bottom: 5px;
    /* background: #fff; */
    color: #ffffff;
    /* border-color: currentColor; */
    display: inline-block;
    margin-top: 2px;
    float: right;
    margin-right: 5px;
}
 .minidraw-submit {
    text-align: center;
    font-size: 16px;
    text-transform: uppercase;
    /* border-bottom-width: 4px; */
    margin-bottom: 5px;
    /* background: #fff; */
    color: #ffffff;
    /* border-color: currentColor; */
    display: inline-block;
    margin-top: 2px;
    float: right;
    margin-right: 5px;
    /* margin: 0; */
    /* height: 100%; */
    /* box-sizing: border-box; */
    /* border-radius: 0; */
    /* border: 0; */
    /* padding: 0 20px 0 16px; */
    /* line-height: 40px; */
    /* background: #b1efff80; */
    /* font-size: 18px; */
}
.minidraw-minitoon {
    text-align: center;
    font-size: 18px;
    /* text-transform: uppercase; */
    /* border-bottom-width: 4px; */
    /* margin-bottom: 5px; */
    /* background: #fff; */
    color: #e9d2ff;
    color: #ffffff;
    /* border-color: currentColor; */
    display: inline-block;
    margin-top: 3px;
    margin-right: 5px;
    text-decoration: none;
    border: 0;
    float: left;
}
.minidraw-top-title {
    /* display: inline-block; */
    /* width: max-content; */
    color: #fff;
    font-size: 19px;
    line-height: 30px;
    margin-top: 5px;
    margin-left: 100px;
    display: block;
    padding: 0px 8px 0 8px;
    /* padding-left: 5px; */
    white-space: nowrap;
    background-color: rgb(242 230 255 / 25%);
    /* width: fit-content; */
    box-sizing: border-box;
    min-width: 120px;
    cursor: pointer;
    /* background-image: url(/assets/wnote/pen.png); */
    /* background-size: contain; */
    /* background-position: left center; */
    /* background-repeat: no-repeat; */
    height: 25px;
    overflow: hidden;
    text-overflow: ellipsis;
    /* display: inline; */
    /* margin-right: 5px; */
    max-width: fit-content;
    border-radius: 5px;
    user-select: none;
}
.minidraw-top-title:after {
    content: "";
    background-image: url(/assets/wnote/pen.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    width: 28px;
    opacity: 0.5;
    display: none;
    display: inline-block;
    height: 23px;
    vertical-align: top;
    position: relative;
    top: 1px;
    transform: scaleY(-1);
    margin-left: 0px;
    margin-right: -5px;
}
.minidraw-top-title:hover {
    transform: scale(1.03);
    /* transform-origin: left; */
    background: rgb(255 255 255 / 35%);
    background-color: rgb(242 230 255 / 35%);
}

.mteditor-top-c {
    height: 35px;
    display: block;
    overflow: hidden;
    /* background: rgb(0 0 0 / 25%); */
    /* display: flex; */
    /* background: rgb(78 29 43); */
}
.mteditor-bottom-c {
    width: 100%;
    height: calc(100% - 35px);
}
.mteditor-left-c {
    float: left;
    width: 175px;
    height: 100%;
    /* background: #797979; */
    /* background: rgb(46 36 55); */
    /* padding-top: 15px; */
    box-sizing: border-box;
}

.mteditor-left-c2 {
    padding-top: 5px;
    border-bottom: 2px solid rgba(255,255,255,0.2);
    padding-bottom: 5px;
    padding-right: 10px;
    user-select: none;
}






.mteditor-left-tooloptions-c {
    /* height: 1000px; */
    padding-right: 8px;
    padding-bottom: 300px;
    user-select: none;
}
.mteditor-left-c .ss-scroll {
    background: rgb(255 255 255 / 30%);
    transform: translateX(-2px);
    width: 5px;
}
.mtslide-c-input {
    font-size: 14px;
    width: fit-content;
    min-width: unset;
    padding: 0;
    padding-left: 5px;
    padding-top: 2px;
    border-radius: 7px;
    width: 50px;
    border-bottom: 0;
    background: rgb(255 255 255 / 20%);
    color: #ffd0de;
    display: inline-block;
    margin: 0;
}
.mtslide-c-slide:hover {
  background: rgb(255 255 255 / 40%);
  
}
.mtslide-c-slide {
  -webkit-appearance: none;
  width: 100%;
  height: 8px;
  background: rgb(255 255 255 / 20%);
  outline: none;
  opacity: 1;
  -webkit-transition: .2s;
  transition: all .2s ease;
  border-radius: 10px;
  border: 0;
  display: inline-block;
  width: calc(100% - 55px);
  float: right;
  margin: 0;
  margin-top: 5px;
  /* outline: none; */
  padding: 0;
}
.mtslide-c-slide::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 15px;
  height: 15px;
  border-radius:50%;
  margin-top: -0px;
  background: #ff92b1;
  cursor: pointer;
}
.mtslide-c-slide::-moz-range-thumb {
  width: 15px;
  height: 15px;
  border-radius:50%;
  margin-top: -0px;
  background: #ff92b1;
  cursor: pointer;
}
.mteditor-tooloption {
    background: rgb(255 255 255 / 10%);
    padding: 5px 5px 4px;
    box-sizing: border-box;
    width: 100%;
    /* width: calc(100% - 5px); */
    margin-bottom: 5px;
    cursor: pointer;
    /* display: flex; */
    /* flex-direction: column-reverse; */
    /* padding-left: 17px; */
    user-select: none;
    border-radius: 10px;
    border: 3px solid #ff92b1;
    border-color: transparent;
    filter: grayscale(1);
    position: relative;
}
.mteditor-tooloption-title {
    color: #fff;
    font-size: 16px;
    opacity: 0.8;
    margin-bottom: 5px;
}
.mteditor-tooloption-text {
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 10px;
    color: #aaa;
    pointer-events: none;
    margin-bottom: -1px;
    margin-top: 4px;
    /* text-align: right; */
}
.mteditor-tooloption-c {
    padding: 10px 5px;
    display: none;
}

.mteditor-tooloption-select-button {
    user-select: none;
    background: rgb(255 255 255 / 10%);
    padding: 3px 5px 2px;
    box-sizing: border-box;
    width: 100%;
    /* width: calc(100% - 5px); */
    margin-bottom: 5px;
    cursor: pointer;
    /* display: flex; */
    /* flex-direction: column-reverse; */
    /* padding-left: 17px; */
    user-select: none;
    border-radius: 7px;
    border: 3px solid #ff92b1;
    border-color: transparent;
    filter: grayscale(1);
    position: relative;
    color: #fff;
    color: rgb(255 255 255 / 80%);
    font-size: 16px;
    /* opacity: 0.8; */
}

.mteditor-tooloption-select-button:hover {
    color: #fff;
    transform: scale(1.04);
}
.mteditor-tooloption-c-title {
    color: #888;
    font-size: 17px;
    margin-bottom: 5px;
}
.mteditor-tooloption > * {
    pointer-events: none;
    /* opacity: 0.8; */
}
.mteditor-tooloption-selected > * {
    pointer-events: visible;
    opacity: 1;
}
.mteditor-tooloption:hover {
    transform: scale(1.05);
}
.mteditor-tooloption-selected {
    filter: unset;
    /* background: rgb(255 71 123 / 25%); */
    border-color: rgb(255 146 177 / 90%);
}
.mteditor-tooloption-selected .mteditor-tooloption-title {
    /* opacity: 1; */
}
.mteditor-tooloption-shapes-temp-editing ~ .mteditor-tooloption {
    display: none;
}
.mteditor-tooloption-info {
    position: absolute;
    right: 4px;
    width: 14px;
    height: 14px;
    /* border: 2px solid; */
    top: 2px;
    background-image: url(/assets/icons/info.png);
    background-size: contain;
    background-color: rgb(255 255 255 / 40%);
    border-radius: 20px;
    padding: 0px;
    box-sizing: border-box;
    background-origin: content-box;
    /* padding-bottom: 1px; */
    /* opacity: 0.8; */
    background-repeat: no-repeat;
    background-position: center center;
    pointer-events: visible;
}
.mteditor-tooloption-texttool-e-delete {
    background-image: url(/assets/icons/delete.png);
    width: 18px;
    height: 18px;
    background-size: contain;
    float: right;
    margin-top: 0px;
    margin-right: -3px;
    opacity: 0.35;
    cursor: pointer;
}
.mteditor-tooloption-texttool-e {
    background: rgb(255 255 255 / 10%);
    margin: 4px 0;
    border-radius: 4px;
    padding: 2px 5px 2px;
    line-height: 0.95;
    /* color: #000; */
    /* cursor: pointer; */
    position: relative;
    /* height: 15px; */
    overflow: hidden;
    cursor: pointer;
}
.mteditor-tooloption-texttool-e-title {
    /* filter: brightness(2); */
    /* filter: invert(1) brightness(0.9) invert(1) brightness(8); */
    color: #bbb;
    /* text-shadow: 3px 0px 0px rgb(158 111 111); */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 15px;
    pointer-events: none;
    padding-left: 8px;
    /* background: rgb(255 255 255 / 15%); */
    /* width: fit-content; */
    padding: 4px 4px 0px
4px;
    margin-left: 6px;
}
.mteditor-tooloption-texttool-c {
    /* padding: 0 3px; */
    padding-right: 5px;
    padding-left: 2px;
    /* position: relative; */
    user-select: none;
}
.mteditor-tooloption-texttool-e-delete:hover {
    background-image: url(/assets/icons/deletec.png);
    opacity: 1;
    transform: scale(1.25);
    filter: brightness(2);
}
.mteditor-tooloption-texttool-e-color {
    width: 4px;
    height: 20px;
    float: left;
    background-color: currentColor;
    /* padding-right: 2px; */
    display: inline-block;
    position: absolute;
    top: 3px;
    height: calc(100% - 5px);
    left: 4px;
    border-radius: 8px;
}
.mteditor-tooloption-texttool-e:hover {
    transform: scale(1.025);
}
.mteditor-tooloption-texttool-e:hover .mteditor-tooloption-texttool-e-title {
    color: #fff;
}
.mteditor-tooloption-texttool-e-selected {
    background: #623441;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    transform: unset !important;
}
.mteditor-tooloption-texttool-e-selected .mteditor-tooloption-texttool-e-title {
    color: #ffdbe5;
}
.mteditor-tooloption-texttool-edit-c {
    background: rgb(98 52 65);
    margin: 4px 0;
    border-radius: 4px;
    padding: 1px 5px 6px;
    /* color: #000; */
    /* cursor: pointer; */
    position: relative;
    /* height: 15px; */
    margin-top: -4px;
    margin-bottom: 8px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    display: none;
}

.mteditor-tooloption-shapes-edit-c {
    background: rgb(255 255 255 / 10%);
    margin: 0px 0 8px;
    border-radius: 10px;
    padding: 3px 7px 6px;
    line-height: 0.95;
    /* color: #000; */
    /* cursor: pointer; */
    position: relative;
    /* height: 15px; */
    overflow: hidden;
    /* cursor: pointer; */
    background: #623441;
    /* border-bottom-left-radius: 0; */
    /* border-bottom-right-radius: 0; */
    display: none;
}
.mteditor-tooloption-shapes-edit-c-show {
    display: block;
}
.mteditor-tooloption-shapes-e-delete {
    background-image: url(/assets/icons/delete.png);
    width: 18px;
    height: 18px;
    background-size: contain;
    float: right;
    margin-top: 1px;
    margin-right: -3px;
    opacity: 0.35;
    cursor: pointer;
}
.mteditor-tooloption-shapes-e-delete:hover {
    background-image: url(/assets/icons/deletec.png);
    opacity: 1;
    transform: scale(1.25);
    filter: brightness(2);
}
.mteditor-tooloption-shapes-e-title {
    /* filter: brightness(2); */
    /* filter: invert(1) brightness(0.9) invert(1) brightness(8); */
    color: #bbb;
    /* text-shadow: 3px 0px 0px rgb(158 111 111); */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 15px;
    pointer-events: none;
    padding-left: 8px;
    /* background: rgb(255 255 255 / 15%); */
    /* width: fit-content; */
    padding: 4px 4px 0px 0px;
    /* margin-left: 6px; */
    color: #ffdbe5;
    margin-bottom: 8px;
}



.mteditor-pages-c4 {
    width: calc(100% - 35px - 230px);
    width: calc(100% - 100px - 230px);
    width: calc(100% - 150px - 210px);
    width: calc(100% - 175px - 200px);
    height: 100%;
    margin-left: 35px;
    margin-left: 175px;
    position: relative;
}
.mteditor-pages-c2 {
    width: calc(100% - 35px - 230px);
    width: calc(100% - 100px - 230px);
    width: calc(100% - 100px - 210px);
    height: 100%;
    /* margin-left: 35px; */
    /* margin-left: 100px; */
    background: #b8acc4;
    background: #606060;
    overflow: hidden;
    /* overflow: scroll; */
    /* direction: rtl; */
    overflow: auto;
    text-align: center;
    width: 100%;
}
.minidraw-editor-c {
    background: rgb(46 36 55);
    background: #2e2e2e;
    /* position: absolute; */
    /* width: 100%; */
    height: 100%;
    /* top: 0; */
    /* position: relative; */
    /* top: 0; */
    /* overflow: hidden; */
}
.pcr-app .pcr-interaction .pcr-result {
    background: rgb(0 0 0 / 40%);
    background: rgb(0 0 0 / 40%);
    /* color: #fff; */
    /* border: 2px solid #fff; */
    padding: 6px 7px 4px;
    /* border-radius: 5px !important; */
}


.mteditor-pages-c3 {
    position: relative;
    width: 3000px;
    /* height: fit-content; */
}
.mteditor-pages-c5 {
    /* cursor: move; */
    position: relative;
    padding: 0.1px;
    /* width: 2200px; */
    /* direction: rtl; */
    /* padding: 100px 0 200px; */
    margin: 0 auto;
    transform-origin: top center;
    /* transform-origin: center center; */
    transform: scale(1);
    transition: transform 0.1s ease;
    width: fit-content;
    height: fit-content;
    margin-top: 200px;
    margin-bottom: 400px;
}
.mteditor-pageoptions-c {
    position: absolute;
    right: -40px;
    top: 0;
    /* height: 100%; */
    transform: translateX(100%);
    text-align: left;
    padding: 10px;
    pointer-events: none;
}
.mteditor-pageoption-c {
    background: rgb(139 115 122);
    color: #ffc6d6;
    background: rgb(120 120 120);
    color: #d4d4d4;
    width: fit-content;
    display: table;
    /* height: 30px; */
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 2px;
    line-height: 22px;
    border-radius: 6px;
    padding: 0px 10px;
    padding-top: 4px;
    cursor: pointer;
    transition: 0.1s ease all;
    margin-bottom: 8px;
    cursor: pointer;
    user-select: none;
    pointer-events: visible;
    /* max-width: 60px; */
    text-align: center;
    /* line-height: 1.2; */
}
.mteditor-pageoption-c:hover {
    transform: scale(1.05);
    color: #ffc6d6;
    background: rgb(159 122 133);
}
.mteditor-previews-c2 {
    position: absolute;
    left: -40px;
    top: 0;
    height: 100%;
}
.mteditor-previews-c {
    /* background: #ffb0b0; */
    position: absolute;
    /* width: 100px; */
    /* height: 100%; */
    right: 0;
    /* top: 0; */
    /* transform: translate(-100%); */
    padding: 10px;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    flex-flow: column wrap;
    /* max-height: 100%; */
    min-height: 800px;
    align-content: flex-end;
    width: 1600px;
    /* max-width: 3000px; */
    box-sizing: border-box;
    pointer-events: none;
}
.mteditor-previews-testpage {
    background: #999;
    width: 80px;
    height: 150px;
    margin: 10px 5px;
}
.mteditor-preview {
    pointer-events: visible;
    cursor: pointer;
    transition: 0.1s ease all;
    position: relative;
    margin-bottom: 10px;
    border: 4px solid rgba(0,0,0,0);
    user-select: none;
    margin-left: 10px;
    /* filter: brightness(0.5); */
    border-color: #ff92b100;
}
.mteditor-preview:hover {
    transform: scale(1.03);
}
.mteditor-preview-selected {
    border-color: #ff92b1;
    border-color: #d86989;
    padding: 0;
}
.mteditor-preview-can {
    max-height: 250px;
    max-width: 100px;
    filter: brightness(0.75);
}
.mteditor-preview-selected .mteditor-preview-can {
    filter: unset;
}
.mteditor-preview-text {
    color: #fff;
    background: rgba(0,0,0,0.4);
    border-radius: 5px;
    font-size: 18px;
    padding: 3px 5px 0 4px;
    position: absolute;
    bottom: 4px;
    right: 4px;
    white-space: nowrap;
    left: 50%;
    transform: translateX(-50%);
    width: fit-content;
}
.mteditor-preview-text:before {
    content: "Page ";
}
.mteditor-previews-newpage {
    /* width: 100%; */
    box-sizing: border-box;
    border: 3px dashed rgb(255 255 255 / 70%);
    background: rgba(255,255,255,0.05);
    /* opacity: 0.9; */
    padding: 1px;
}
.mteditor-preview-newpage-text {
    color: rgb(255 255 255 / 85%);
    font-size: 20px;
    /* width: 20px; */
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    /* user-select: none; */
    pointer-events: none;
    text-align: center;
    /* opacity: 0.7; */
}

.mteditor-pages-new-c {
    display: none;
}
.mteditor-page {
    box-shadow: 0 0 16px -6px #000;
    margin: 0 auto 25px;
    position: relative;
    /* display: none; */
}
.mteditor-page-unselected {
    display: none;
}
.mteditor-pages-new-option {
    background: rgb(139 115 122);
    color: #ffc6d6;
    background: rgb(120 120 120);
    color: #d4d4d4;
    width: 150px;
    display: inline-block;
    height: 30px;
    font-size: 21px;
    text-transform: uppercase;
    letter-spacing: 2px;
    line-height: 30px;
    border-radius: 6px;
    padding-top: 4px;
    cursor: pointer;
    transition: 0.1s ease all;
}
.mteditor-pages-new-option:hover {
    transform: scale(1.05);
    color: #ffc6d6;
    background: rgb(159 122 133);
}

.mteditor-page-input, .mteditor-page-layer {
    position: absolute;
    top: 0;
    left: 0;
    image-rendering: auto;
    cursor: crosshair;
    pointer-events: none;
}
 .mteditor-input-c, .mteditor-layer-c {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
}
.mteditor-layer-allowclick {
    pointer-events: unset;
}
.mteditor-layer-allowclick .mteditor-page-layer {
    pointer-events: unset;
}
.mteditor-page-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.mteditor-page-input {
    pointer-events: visible;
}
.mteditor-tool-name {
    display: inline-block;
    color: #fff;
    pointer-events: none;
    line-height: 23px;
    margin-left: 3px;
    font-size: 16px;
    margin-top: 5px;
    margin-bottom: 1px;
}

.mteditor-tool-c {
    cursor: pointer;
    margin: 0px 0 4px;
    padding: 2px 3px;
    width: 100%;
    box-sizing: border-box;
    clear: both;
    user-select: none;
    white-space: nowrap;
    border-radius: 30px;
    width: 92%;
    margin: 0 auto 2px;
    padding: 2px 8px 1px;
}

div#mteditor-tool-image {
    display: none;
}

.mteditor-tool-c:hover {
    transform: scale(1.1);
}
.mteditor-tool:hover {
    transform: scale(1.1);
}
.mteditor-tool {
    display: inline-block;
    height: 28px;
    min-width: 28px;
    margin: 2px 3px;
    /* margin-right: 4px; */
    /* margin-top: 4px; */
    cursor: pointer;
    vertical-align: top;
    /* background-color: rgb(185 115 255); */
    background-color: #ffffff;
    border-radius: 7px;
    /* image-rendering: pixelated; */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    /* width: 23px; */
    padding: 0;
    /* background-color: rgba(255, 255, 255, 0.25); */
    pointer-events: none;
    float: left;
    border-radius: 10px;
    /* image-rendering: pixelated; */
    margin-top: 0;
}
#mteditor-tool-pencil .mteditor-tool {
    background-image: url(/assets/wnote/peni.png);
}
.mteditor-tool-selected#mteditor-tool-pencil  .mteditor-tool{
    /* background-image: url(/assets/wnote/pen.png); */
    /* background-color: rgb(118 183 255); */
    /* transform: scale(1.05); */
    /* border: 2px solid #ffffff; */
    /* box-sizing: border-box; */
}
#mteditor-tool-eraser  .mteditor-tool{
    background-image: url(/assets/wnote/eraseri.png);
}
.mteditor-tool-selected#mteditor-tool-eraser  .mteditor-tool{
    /*background-image: url(/assets/wnote/eraser.png);*/
}
#mteditor-tool-bucket  .mteditor-tool{
    background-image: url(/assets/wnote/bucketi.png);
}
.mteditor-tool-selected#mteditor-tool-bucket  .mteditor-tool{
    /*background-image: url(/assets/wnote/bucket.png);*/
}
#mteditor-tool-move  .mteditor-tool{
    background-image: url(/assets/wnote/movei.png);
}
.mteditor-tool-selected#mteditor-tool-move  .mteditor-tool{
    background-image: url(/assets/wnote/move.png);
}
#mteditor-tool-eyedrop  .mteditor-tool{
    background-image: url(/assets/wnote/eyedropi.png);
}
#mteditor-tool-text  .mteditor-tool{
    background-image: url(/assets/wnote/texti.png);
}
#mteditor-tool-shapes  .mteditor-tool{
    background-image: url(/assets/wnote/shapesi.png?v=4);
}
#mteditor-tool-select  .mteditor-tool{
    background-image: url(/assets/wnote/selecti2.png?v=2);
    /* opacity: 0.7; */
}
.mteditor-tool-selected#mteditor-tool-eyedrop  .mteditor-tool{
    /*background-image: url(/assets/wnote/eyedrop.png);*/
}
#mteditor-tool-undo  .mteditor-tool{
    background-image: url(/assets/wnote/undoi.png);
}
.mteditor-tool-selected#mteditor-tool-undo  .mteditor-tool{
    /*background-image: url(/assets/wnote/undo.png);*/
}
#mteditor-tool-redo  .mteditor-tool{
    background-image: url(/assets/wnote/redoi.png);
}

#mteditor-tool-image .mteditor-tool {
    background-image: url(/assets/wnote/loadi.png);
}
.mteditor-tool-selected#mteditor-tool-redo  .mteditor-tool{
    /*background-image: url(/assets/wnote/redo.png);*/
}
.mteditor-tool-selected .mteditor-tool-name {
    color: #d7eaff;
    color: #ffbbcf;
}
.mteditor-tool-c:active,
.mteditor-tool-selected {
    background: rgb(255 255 255 / 10%);
    /* background: rgb(190 47 88 / 51%); */
}
.mteditor-tool-selected .mteditor-tool {
    background-color: rgb(165 208 255);
    background-color: #ff92b1;
    /* transform: scale(1.05); */
    /* border: 2px solid #ffffff; */
    box-sizing: border-box;
}




.mteditor-pages-zoom-c {
    position: absolute;
    bottom: 10px;
    right: 10px;
    text-align: center;
}
.mteditor-pages-zoom {
    width: 35px;
    height: 35px;
    background: rgb(0 0 0 / 30%);
    border-radius: 20px;
    box-sizing: border-box;
    cursor: pointer;
    margin-top: 3px;
    background-repeat: no-repeat;
    background-size: contain;
    background-origin: content-box;
    padding: 4px;
}
.mteditor-pages-zoom:hover {
    transform: scale(1.1);
    background-color: rgba(0,0,0,0.5)
}
.mteditor-pages-zoom-plus {
    background-image: url(/assets/icons/zoomp.png);
}
.mteditor-pages-zoom-minus {
    background-image: url(/assets/icons/zoomm.png);
}
.mteditor-pages-zoom-text {
    font-size: 18px;
    /* opacity: 0.75; */
    pointer-events: none;
    color: #b9b9b9;
    /* text-shadow: 0 0 2px #000, 0 0 2px #000; */
}


.mteditor-pubbox-c {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgb(0 0 0 / 80%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 10000;
}
.mteditor-pubbox-show {
    display: block;
    opacity: 1;
    pointer-events: unset;
}
.mteditor-pubbox-c2 {
    width: 90%;
    height: 90%;
    position: relative;
    top: 5%;
    /* margin-top: 5%; */
    background: hsl(276deg 31% 65% / 90%);
    background: #f3e0ffe6;
    background: rgb(241 221 255 / 94%);
    background: rgb(243 225 255);
    /* background: rgb(255 255 255 / 85%); */
    border-radius: 30px;
    max-width: 600px;
    margin: 0% auto;
    /* background-image: url(/assets/main/wave4.png); */
    /* background-attachment: fixed; */
    max-height: 600px;
    /* border-bottom: 5px solid #fff; */
    overflow: hidden;
}
.mteditor-pubbox-left {
    float: left;
    width: 120px;
    background: rgb(0 0 0 / 40%);
    height: 100%;
    /* padding: 20px 9px; */
    box-sizing: border-box;
    padding: 20px 0;
    padding-left: 5px;
    /* text-align: right; */
    /* padding-right: 5px; */
}
.mteditor-pubbox-option {
    box-sizing: border-box;
    /* border: 2px solid currentColor; */
    border-radius: 20px;
    font-size: 19px;
    line-height: 22px;
    padding: 9px 10px 4px;
    border-left: 0;
    border-right: 0;
    border-top: 0;
    cursor: pointer;
    color: #fff;
    border-color: #e1b5ff !important;
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
    /* margin-bottom: 5px; */
    letter-spacing: 0.5px;
    /* text-align: right; */
    /* width: fit-content; */
    /* margin-right: 0; */
    /* margin-left: auto; */
    user-select: none;
}
.mteditor-pubbox-option:hover {/* transform: scale(1.1); */background: rgb(255 255 255 / 20%);}
.mteditor-pubbox-option:nth-child(1) {
    /* border-top: 2px solid; */
}
.mteditor-pubbox-option-selected {
    /* background: #a082b4 !important; */
    background: #f3e0ffe6;
    color: #000;
}
.mteditor-pubbox-tab-publish .mteditor-pubbox-publish-c,.mteditor-pubbox-tab-loadfile .mteditor-pubbox-loadfile-c, .mteditor-pubbox-tab-download .mteditor-pubbox-download-c{
    display: block;
}
.mteditor-pubbox-tab-publish .mteditor-pubbox-option-publish, .mteditor-pubbox-tab-download .mteditor-pubbox-option-download, .mteditor-pubbox-tab-loadfile .mteditor-pubbox-option-loadfile {
    display: block;
    background: #e5d2f2;
    /* background: #e1e1e1; */
    color: #000;
    background: rgb(243 225 255);
}
.mteditor-pubbox-c3 {
    width: calc(100% - 120px);
    height: 100%;
    /* float: right; */
    margin-left: 120px;
    position: relative;
    /* padding: 20px; */
    box-sizing: border-box;
}
.mt-pubbox-title {
    font-size: 30px;
    cursor: default;
    user-select: none;
    /* margin-bottom: 5px; */
}
.mt-pubbox-text {
    font-size: 18px;
    margin-bottom: 20px;
    cursor: default;
}
.mteditor-pubbox-option.mteditor-pubbox-option-newdoc {
    display: none;
}
.mt-pubbox-command {
    /* margin-top: 10px; */
    /* opacity: 0.8; */
    font-size: 16px;
    user-select: none;
}
.mt-pubbox-input {
    margin-bottom: 10px;
    font-size: 18px;
    padding: 8px 5px 5px;
    border-bottom-color: #b0a4b7;
}
.mt-pubbox-category {
    display: inline-block;
    border: 2px dashed;
    border-radius: 10px;
    padding: 2px 7px 0px;
    margin-top: 5px;
    color: rgb(0 0 0 / 80%);
    font-size: 16px;
    letter-spacing: 0;
    cursor: pointer;
    margin-right: 1px;
    transition: 0.1s ease all;
    user-select: none;
}
.mt-pubbox-category-selected {
    /* color: #8100d5; */
    /* border-style: solid; */
    /* background: #b036ff; */
    /* color: #fff; */
    /* border-color: transparent; */
    background: #fff;
    /* background-clip: padding-box; */
    /* color: #9b00ff; */
}
.mt-pubbox-category:hover {
    transform: scale(1.05);
}
.mt-pubbox-button {
    font-size: 19px;
    display: inline-block;
    /* float: right; */
    /* position: absolute; */
    /* bottom: 0; */
    /* left: 0; */
    margin-bottom: 5px;
}
.mteditor-pubbox-download-c, .mteditor-pubbox-publish-c, .mteditor-pubbox-loadfile-c {
    padding: 40px 20px;
    /* position: relative; */
    padding-bottom: 100px;
    display: none;
}
.mt-pubbox-comment {
    background: rgb(255 255 255 / 50%);
    padding: 10px;
    color: #5d266e;
    text-align: center;
    max-width: 80%;
    margin: 0 auto;
    margin-top: 20px;
}
.mt-pubbox-publishsave {
    /* position: absolute; */
    bottom: 20px;
    left: 20px;
    /* color: #2d2036; */
    /* position: fixed; */
    margin-top: 30px;
}
.mt-pubbox-publish {
    /* position: absolute; */
    bottom: 20px;
    right: 20px;
    color: #ffffff;
    /* background: #59ff87; */
    background: #b036ff;
    border-color: #b954ff00;
    font-size: 21px;
    padding: 6px 12px 0px;
    /* position: fixed; */
    float: right;
    margin-top: 30px;
}
.mt-pubbox-download3 {
    display: none;
}
.mt-pubbox-download2 {
    display: none;
}
.mteditor-pubbox-loadfile-i {
    background: unset;
    border: 0;
    margin: 0;
    padding: 0;
    border-radius: 0;
    font-size: 18px;
}




.mteditor-newdoc-c {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgb(0 0 0 / 50%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 10000;
    user-select: none;
}
.mteditor-newdoc-show {
    display: block;
    opacity: 1;
    pointer-events: unset;
}
.mteditor-newdoc-c2 {
    width: 90%;
    height: 90%;
    position: relative;
    top: 48%;
    /* margin-top: 5%; */
    /* background: hsl(276deg 31% 65% / 90%); */
    background: rgb(243 224 255 / 94%);
    /* background: rgb(255 255 255 / 94%); */
    /* background: rgb(255 217 217 / 95%); */
    border-radius: 30px;
    max-width: 500px;
    margin: 0% auto;
    /* background-image: url(/assets/main/wave4.png); */
    /* background-attachment: fixed; */
    max-height: 600px;
    /* border-bottom: 5px solid #fff; */
    overflow: hidden;
    transform: translateY(-50%);
}
.mteditor-newdoc-c3 {
    /* width: calc(100% - 120px); */
    height: 100%;
    /* float: right; */
    /* margin-left: 120px; */
    position: relative;
    padding: 30px;
    box-sizing: border-box;
}
.mt-newdoc-title {
    font-size: 37px;
    cursor: default;
    user-select: none;
    /* margin-bottom: 5px; */
}
.mt-newdoc-text {
    font-size: 18px;
    margin-bottom: 20px;
    cursor: default;
    user-select: none;
}

.mt-newdoc-command {
    /* margin-top: 10px; */
    /* opacity: 0.8; */
    font-size: 16px;
    user-select: none;
}
.mt-newdoc-input {
    margin-bottom: 10px;
    font-size: 18px;
    padding: 8px 5px 5px;
    border-bottom-color: #b0a4b7;
}
.mt-newdoc-button {
    font-size: 19px;
    display: inline-block;
    /* float: right; */
    /* position: absolute; */
    /* bottom: 0; */
    /* left: 0; */
    margin-bottom: 5px;
}
.mt-newdoc-cat {
    width: 50%;
    margin: 0;
    /* margin: 0 2%; */
    display: inline-block;
    /* height: 100px; */
    font-size: 20px;
    padding: 10px 15px;
    box-sizing: border-box;
    cursor: pointer;
    border-radius: 20px;
    vertical-align: top;
    /* filter: grayscale(1); */
    transition: 0.1s ease all;
    /* opacity: 0.9; */
    /* margin-bottom: 10px; */
    /* height: 195px; */
}
.mt-newdoc-cat-c {
    font-size: 0;
    width: 100%;
}
.mt-newdoc-cat-title {
    color: #000;
    user-select: none;
    font-size: 20px;
    margin-bottom: 5px;
}
.mt-newdoc-cat-size, .mt-newdoc-cat-size-custom {
    color: #5a3572;
    font-size: 16px;
    letter-spacing: -0.5px;
    border: 2px solid;
    padding: 3px 5px 1px;
    border-radius: 10px;
    display: inline-block;
    cursor: pointer;
    margin-bottom: 4px;
    transition: 0.1s ease all;
    color: #444;
}

.mt-newdoc-cat-size span {
    /* display: block; */
    text-align: center;
    opacity: 0.5;
    line-height: 1;
    font-size: 90%;
    margin-left: 5px;
    /* color: inherit; */
    position: relative;
    top: -0.5px;
}
.mt-pubbox-cat-custom-i {
    width: 75px;
    font-size: 16px;
    border: 2px solid #5a3572b8;
    color: #5a3572;
}
.mt-newdoc-cat-custom {
    margin-top: 10px;
    width: 200px;
}
.mt-newdoc-select {
    position: absolute;
    bottom: 20px;
    right: 20px;
    color: #ffffff;
    /* background: #59ff87; */
    background: #b036ff;
    border-color: #b954ff00;
    font-size: 21px;
    padding: 6px 12px 0px;
    z-index: 1;
}
.mt-newdoc-cat-size:hover, .mt-newdoc-cat-size-custom:hover {
    transform: scale(1.05);
}
.mt-newdoc-cat-sizes {
    user-select: none;
    /* max-width: 100px; */
}
.mt-newdoc-cat-preview {
    /* background-image: url(/assets/icons/vertical.png); */
    /* width: 90px; */
    /* height: 175px; */
    /* background-size: contain; */
    /* background-repeat: no-repeat; */
    float: right;
    background-position: center;
    image-rendering: -webkit-optimize-contrast;
    /* box-shadow: 0 0 4px #000; */
    max-height: 174px;
    max-width: 85px;
    /* background: #fff; */
}

#newdoc-option-square .mt-newdoc-cat-preview {
    max-width: 65px;
}
.mt-newdoc-cat-selected {
    background: #faf1ff;
    filter: unset;
}
#newdoc-option-vertical .mt-newdoc-cat-preview {
    /* background-image: url(/assets/icons/vertical.png); */
    /* width: 60px; */
    /* height: 175px; */
    max-width: 48px;
}
#newdoc-option-freedraw {
    width: 100%;
    width: unset;
    height: unset;
}
.mt-newdoc-cat-selected .mt-newdoc-cat-size-selected {
    color: #fff;
    background: #9580ff;
    border-color: #9580ff;
}

.mt-newdoc-cat-selected .mt-newdoc-cat-size-selected span {
    opacity: 0.75;
}
.mt-newdoc-cat:hover {
    transform: scale(1.03);
}
.mt-newdoc-cat-selected:hover {
    transform: unset;
}
.mt-newdoc-cat * {
    pointer-events: none;
}
.mt-newdoc-cat-selected * {
    pointer-events: initial;
}
.mteditor-newdoc-c .ss-content {
    overflow-x: hidden;
}


.pcr-app {
    /* box-shadow: 0 0.15em 1.5em 0 rgba(255, 255, 255, 0.1), 0 0 1em 0 rgba(255, 255, 255, 0.03); */
    background: rgb(255 255 255 / 0%);
    border: 0px solid #ddd;
    border-radius: 0px;
    position: relative;
    top: 0px !important;
    left: 0px !important;
    box-shadow: none;
    /* border-radius: 0 !important; */
    max-width: 100% !important;
    box-sizing: border-box;
    margin: 0 auto;
    padding: 7px 10px !important;
    /* padding: 0 !important; */
    /* border: 0; */
    /* margin: 0; */
    /* width: 100% !important; */
}
.pcr-app textarea, .pcr-app input {
    /* font-family: "redalert1", monospace; */
    font-size: 14px !important;
    transition: none !important;
    box-shadow: none !important;
    border-radius: 5px !important;
    letter-spacing: 1px !important;
}
.pcr-app .pcr-interaction input {
}
.pcr-app .pcr-interaction input:focus {
}
.pcr-button {
    transition: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}
.pcr-swatches  {
    display: none !important;
}
.pcr-color-preview {
    margin-left: 0 !important;
    /* border: 2px solid; */
}
.pcr-color-chooser, .pcr-color-opacity {
    margin: 0 0.15em !important;
}
.pcr-app[data-theme=nano] .pcr-interaction {
    padding: 0;
}
.pcr-app .pcr-swatches {
    white-space: nowrap;
    overflow: hidden;
    flex-wrap: nowrap;
    display: block;
}
.pickr {
    display: none;
}
.mteditor-picker-c {
    width: 100%;
    /* flex-direction: column; */
    border-bottom: 2px solid rgba(255,255,255,0.2);
}

.mteditor-picker-c {}
.pcr-color-preview .pcr-current-color {
    border: 2px solid rgb(255 255 255 / 50%);
}

.mteditor-palette-c {
    width: 100%;
    /* flex-direction: column; */
    border-bottom: 2px solid rgba(255,255,255,0.2);
    padding: 0 10px;
    box-sizing: border-box;
    display: none;
}
.mteditor-palette-box {
    display: inline-block;
    /* border: 1px solid #fff; */
    width: 15px;
    height: 15px;
    margin: 0;
    margin-right: 2px;
    margin-bottom: 2px;
    cursor: pointer;
    position: relative;
    background: #ff9292;
    border-radius: 5px;
    box-sizing: border-box;
}
.mteditor-palette-box-c {
    font-size: 0;
}
.mteditor-palette-box:hover {
    transform: scale(1.2);
}
.mteditor-palette-box:before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* background: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>'); */
    /* background-size: .5em; */
    /* border-radius: .15em; */
    /* z-index: -1; */
    /* opacity: 0.3; */
    background-size: 8px;
}
.mteditor-palette-options {
    margin: 2px 0 5px;
    text-align: right;
    font-size: 0;
}
.mteditor-palette-option {

display: inline-block;

font-size: 11px;

padding: 2px 4px 0;

color: #fff;

border-width: 2px;

height: 18px;

box-sizing: border-box;

vertical-align: top;

min-width: 19px;

border-radius: 5px;

margin-left: 2px;
}
.mteditor-palette-save { 
float: left;
margin-left: 0;
}
.mteditor-sblayers-c {
    flex-grow: 1;
    width: 100%;
    /* display: flex; */
    align-self: stretch;
    /* flex: 1 1 auto; */
    /* flex: auto; */
    overflow: hidden;
    /* border-top: 2px solid rgba(255,255,255,0.2); */
}
.mteditor-sblayers-c2 {
    /* padding: 20px; */
    color: #fff;
    padding: 10px 15px 10px 5px;
}
.mteditor-sblayers-title {
    color: #888;
    font-size: 17px;
    /* border-bottom: 2px solid rgba(255,255,255,0.15); */
    /* padding-bottom: 5px; */
    user-select: none;
}
.mteditor-sblayers-c3 {
    /* height: 1800px; */
    min-height: 110%;
    padding: 5px 0;
    /* display: flex; */
    /* flex-direction: column-reverse; */
    user-select: none;
}
.mteditor-sblayers-c .ss-scroll {
    background: rgb(255 255 255 / 40%);
    opacity: 1;
    transform: translateX(-3px);
    width: 6px;
}
.mteditor-sblayer-info {
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 12px;
    color: #aaa;
    pointer-events: none;
    margin-bottom: -2px;
}
.mteditor-sblayer-c {
    background: rgb(255 255 255 / 12%);
    padding: 5px 7px;
    box-sizing: border-box;
    width: 100%;
    /* width: calc(100% - 5px); */
    margin-bottom: 3px;
    cursor: pointer;
    /* display: flex; */
    /* flex-direction: column-reverse; */
    /* padding-left: 17px; */
    user-select: none;
    border-radius: 6px;
}
.mteditor-sblayer-c:hover {
    transform: scale(1.02);
        background: rgb(255 255 255 / 20%);
}
.mteditor-sblayer-c-selected {
    background: rgb(255 71 123 / 25%);
    /* background: rgb(190 47 88 / 51%); */
    /* color: #fff; */
}
.mteditor-sblayer-c-selected:hover {
    background: rgb(255 71 123 / 40%);
    /* background: rgb(190 47 88 / 60%); */
}


.test {
    position: absolute;
    bottom: 0;
    z-index: 1000;
    right: 0;
    background: rgb(0 0 0 / 60%);
    width: 100%;
    height: 100px;
    display: none;
    /* opacity: 0.9; */
    padding: 0 10px;
    box-sizing: border-box;
    overflow: hidden;
}
.mteditor-test ~ .test {
    display: block;
}
.mteditor-test .mteditor-layer-c {
    /* transform: scale(0.1); */
    position: relative;
    display: inline-block;
    width: 25%;
    /* zoom: 0.25; */
    /* overflow: hidden; */
    height: 25%;
    /* overflow: hidden; */
    float: left;
    outline: 1px solid #f00;
    background: #4819192e;
    /* display: block !important; */
}
.mteditor-test .mteditor-input-c {
    /* transform: scale(0.1); */
    position: relative;
    display: inline-block;
    width: 50%;
    /* zoom: 0.25; */
    /* overflow: hidden; */
    height: 25%;
    /* overflow: hidden; */
    float: left;
    outline: 1px solid #00ff39;
}
.mteditor-test .mteditor-page-layer {
    /* position: relative; */
    transform: scale(0.25);
    transform-origin: top left;
    float: left;
    display: inline-block;
}
.mteditor-test .mteditor-page-input {
    position: relative;
    /* transform: scale(0.25); */
    transform-origin: top left;
    float: left;
    display: inline-block;
    /* zoom: 0.25; */
    width: 50%;
    background: #23481929;
    outline: 1px solid #c3ffae94;
}
.mteditor-test .mteditor-input-c canvas {
    /* width: 100% !important; */
    /* height: 100%; */
    width: 50% !important;
    height: unset !important;
}
.mteditor-test .mteditor-input-c > div {
    width: 100% !important;
    height: unset !important;
}

.test canvas {
    height: 200px;
    margin: 10px 3px;
    background: rgb(255 255 255 / 50%);
}








.mt-newdoc-cat-desc2 {
    color: #b94dff;
    font-size: 14px;
    /* display: table; */
    padding-right: 5px;
    /* pointer-events: none; */
    padding-right: 50px;
}

.mt-newdoc-cat-desc2 a {
    color: inherit;
    font-style: italic;
    /* pointer-events: visible; */
}

#newdoc-option-story .mt-newdoc-cat-preview {
    width: 45px;
}

.mt-pubbox-category-descstory {
    color: #b036ff;
    margin-top: 7px;
    line-height: 1;
    font-size: 15px;
    max-width: 350px;
    display: none;
    /* pointer-events: none; */
}

.mt-pubbox-category-story.mt-pubbox-category-selected ~ .mt-pubbox-category-descstory {
    display: block;
}

.mt-pubbox-category-descstory a {
    color: inherit;
    font-style: italic;
}