#canvasFrame{position:relative;}
#svgUseShape{cursor:move !important;}
.kaleidoCanvasCs{cursor:auto;/* cursor: move !important; */}
.kaleidoCanvasCr{cursor:crosshair !important;}
#imagesUl li,#imagesNew li,#ownDesignsDiv li{display:inline-block;padding:0;background:rgba(0,0,0,0);white-space:nowrap;cursor:pointer;-webkit-user-select:none;user-select:none;transition:background 300ms ease-in-out,box-shadow 300ms ease-in-out;}
#imagesUl li:hover,#imagesNew li:hover,#ownDesignsDiv li:hover{
background:rgba(210,210,210,0.8);box-shadow:0px 0px 15px 0px rgba(0,0,0,0.5) inset;
}
#imagesUl,#imagesNew,#ownDesignsDiv ul{list-style:none;padding:2px;margin:0;}
#allImages,#gifImages{position:absolute;z-index:300;top:0;max-width:1100px;padding:3px;margin:0;display:none;border:2px solid #777;border-radius:6px;background:rgba(53,53,53,0.9);box-shadow:0 0 8px #000;}
#gifImages{text-align:center;}
.floatleft{float:left;}
#svgdiv{display:inline-block;border:1px solid #999;touch-action:none;overflow:hidden;margin:1px;background:#777;}
#KaleidosSp:before,#svgdiv:before,#canvasFrame:before,#wcansize:before,#hcansize:before{content:'Pattern Position';position:absolute;margin-top:-7px;background:rgba(99,99,99,.7);border:1px solid #999;border-radius:5px;padding:0 2px;font-size:9px;color:#eee;}
#canvasFrame:before{content:'Canvas';z-index: 999;}
#svgdiv:before{margin-left:15px;}
#KaleidosSp:before{content:'Options';left:10px;}
#tipslider0:before,#tipslider1:before,#svgdiv:after{position: absolute;margin-top: -7px;background: #f7db06;border: 0px solid #999;border-radius: 5px;padding: 0 2px;font-size: 9px;color: #000;}
.hideCursor{cursor:none !important;}
.moveCursor{cursor:move !important;}
#startupHelp,#startupHelp2{position:absolute;max-width:0;text-align:center;font-weight:bold;z-index:90;color:#cbcbcb;text-shadow:0 0 5px #000,0 0 5px #000;background:#4040458a;transition:max-height 1s ease-in-out;overflow:hidden;max-height:200px;}
#startupHelp{top:20px;left:10px;max-width:0;font-size:230%;}
#startupHelp p{text-align:center;font-size:14px;margin:3px;}
#startupHelp p#designs-version{font-size:12px;}
#startupHelp2{margin-top:-5px;max-width:180px;font-size:14px;background: transparent;}
label{display:inline-block;font-size:12px;text-align:left;line-height:12px;margin:2px;}
#KaleidosSp{position:absolute;z-index:100;right:10px;top:0;color:#fff;text-align:center;padding:0 5px;background: #c3e8fd;border:1px solid #777;border-radius: 15px;
background-image:linear-gradient(#0d0d0d,#2b2b2b);-webkit-user-select:none;user-select:none;}

input[type=range]{max-width:100px;padding:0;margin:3px;border-radius:8px;box-shadow:0 0 0 1px #999;appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,#6cabf7,azure);vertical-align: bottom;overflow: hidden;}
input[type=range]::slider-thumb{border:none;height:16px;width:16px;border-radius:50%;background:#2121ff;cursor:e-resize;appearance:none;box-shadow: -200px 0 0 193px #016ef1;}
input[type=range]::-webkit-slider-thumb{border:none;height:16px;width:16px;border-radius:50%;background:#2121ff;cursor:e-resize;-webkit-appearance:none;box-shadow: -200px 0 0 193px #016ef1;}
input[type=range]::-moz-range-thumb{border:none;height:16px;width:16px;border-radius:50%;background:#2121ff;cursor:e-resize;appearance:none;-webkit-appearance:none;box-shadow: -200px 0 0 193px #016ef1;}
input[type=range]::-webkit-slider-thumb:hover{background:#009;}
input[type=range]::-moz-range-thumb:hover{background:#009;}
input[type=range]:disabled{background-image:linear-gradient(45deg,#eee,#777);cursor:no-drop;}
input[type=range]:disabled::-webkit-slider-thumb{background:#999;cursor:no-drop;box-shadow:-200px 0 0 193px #ccc;}
input[type=range]:disabled::-moz-range-thumb{background:#999;cursor:no-drop;box-shadow:-200px 0 0 193px #ccc;}
#slider33{display:none}

fieldset,legend{border:1px solid #777;border-radius:5px;background:#676767;padding:2px;box-shadow: 0 0 0 1px #aaa inset;overflow: hidden;transition:all 0.6s ease-in-out;}
fieldset{margin:5px 0;}
legend{background:#026;padding:1px 9px;}
#fieldsettwo label{width:135px;margin-bottom:5px;}
#removeColor{display:inline-block;vertical-align:middle;}
#resetAllHist,#resetAllFilterEx,#resetAllFilter,#ResetHcolor,#designsSDel,#designsAllDel{background:#d16666;background-image:linear-gradient(#d16666,#b33636);cursor:pointer;float:right;font-size:11px;}
#ResetHcolor,#designsSDel,#designsAllDel{float:none;}
#resetAllHist:hover,#resetAllFilterEx:hover,#resetAllFilter:hover,#ResetHcolor:hover,#designsSDel:hover,#designsAllDel:hover{background:#fd8282;}
button:disabled,button[disabled],button#ResetHcolor:disabled,button#resetAllFilter:disabled,button#resetAllFilterEx:disabled{
background:#cccccc;background-image: linear-gradient(#d5d5d5,#707071);color:#666666;cursor:no-drop;box-shadow:none;}
#fotoInBtn,.fotoformbto{font-size:24px;cursor:pointer;margin:7px;}
.fotoformbto{font-size:16px;border:1px solid #555;display:inline-block;
width:32px;height:32px;padding:0;background:#309dfb;border-radius:0;box-shadow:none;outline:none;
margin:3px;}
.fotoformbto,label k{background-image:url(sprt5.png);background-repeat:no-repeat}
#formKalei1{background-position:0 0}
#formKalei2{background-position:-30px 0}
#formKalei3{background-position:-60px 0}
#formKalei4{background-position:-90px 0}
#formKalei5{background-position:0 -30px}
#formKalei6{background-position:-30px -30px}
#formKalei7{background-position:-60px -30px}
#formKalei8{background-position:-90px -30px}
#formKalei9{background-position:0 -60px}
#formKalei10{background-position:-30px -60px}
#formKalei11{background-position:-60px -60px}
#formKalei12{background-position:-90px -60px}
label k{display:inline-block;width:20px;height:20px;}
#label1{background-position:0 -90px}
#label2{background-position:-20px -90px}
#label3{background-position:-40px -90px}
#label4{background-position:-60px -90px}
#label5{background-position:-80px -90px}
#label6{background-position:-100px -90px}
#label7{background-position:0 -110px}
#label8{background-position:-20px -110px}
#label9{background-position:-40px -110px}
#label10{background-position:-60px -110px;filter:none;vertical-align:bottom;}

#undoText{background-position:0 -130px;width:22px;height:22px;background-image:url(sprt5.png),linear-gradient(-90deg,#0dccea,#0d70ea);}
#redoText{background-position:-20px -130px;width:22px;height:22px;background-image:url(sprt5.png),linear-gradient(90deg,#0dccea,#0d70ea);}
#redoText:disabled,#undoText:disabled{filter:grayscale(100%);}
#shareAsGif,#shareAsPng,#shareAsWeb{background-position:-60px -130px;margin-left:10px;padding-left:18px;height:22px;background-image:url(sprt5.png),linear-gradient(90deg,#0299b1,#0d70ea);}
#shareAsPng{float:right;}
#shareAsWeb{margin: 4px;vertical-align: middle;}
#lightdark{background-position:-78px -129px;background-image:url(sprt5.png),linear-gradient(90deg,#0299b1,#0d70ea);}
#imageTrEye,#imageBgEye,#imageTxiEye,#imageTxaEye{background-position:-98px -129px;  padding-left: 18px;height: 18px;vertical-align: middle;background-image:url(sprt5.png),linear-gradient(90deg,#0299b1,#0d70ea);}

#formKalei1{outline:2px solid #042cef;}
.fotoformbto:hover{outline:2px solid #6da1ff !important;box-shadow:0 0 8px #000 inset !important;}
.glow-on-hover{position:relative;font-size:11px;padding:2px;}

#allImages p,#gifImages p{padding: 2px;
    display: block;
    margin: 0;
    background: #333;
    margin-top: 3px;}
.imagetext{font-weight:bold;font-size:18px;}
#kaleidoCanvas,.imageAddView{
    background-color: #fff;
    background-image: linear-gradient(45deg,#bbb 25%,transparent 25%),linear-gradient(-45deg,#bbb 25%,transparent 25%), linear-gradient(45deg,transparent 75%,#bbb 75%),linear-gradient(-45deg,transparent 75%,#bbb 75%);
    background-size: 20px 20px;
    background-position: 0 0,0 10px,10px -10px,-10px 0px;
}

#infokaleid{position:absolute;left:0;right:0;}
#clipboardDiv:hover #infokaleid{display:block;}
.inlineblock{display:inline-block;vertical-align:middle;}

#KaleidosSp{width:380px;}
.KaleidosSpTr{cursor:crosshair;}
button#fotoInBtn:before {
    content: 'image for kaleidoscope';
    position: absolute;
    font-size: 9px;
    margin: -3px;
    color: #555;
}
#selectedcolor{color:#fff;text-shadow:0 0 2px #000,1px 1px 0 #000;padding:1px 1px 3px;;width:45px;font-size:11px;display:inline-block;}
.labelclass{font-size:12px;cursor:pointer;}

#easytxt{font-size:11px;}
#easytxt div.inlineblock{border:1px solid #777;border-radius:5px;padding:3px;margin:0;background:#676767;box-shadow: 0 0 0 1px #aaa inset;}
#easytxt button b:nth-child(2n){font-size:20px;}
#chCssHelptoool,#gifTransp{transform: scale(1.5);cursor:pointer;}
svg.classfilter,#canvas1,#canvas2{position:absolute;top:-999px;left:-999px;z-index:-1;}

.tooltip div,#otherscolor,#infokaleid,#undoredoDiv,#ownDesignsDiv{display:none;transition:all 500ms ease-in-out;position:absolute;font-size:11px;border:1px solid #008; background:#fff;box-shadow:0 3px 7px rgba(0,0,0,0.7);z-index:100;border-radius:10px 10px 0 10px;right:0;left:0;margin-top:-55px;padding:0;opacity:0.95;}
label.tooltip div{margin-top:-43px;left:auto;}
#gifImages label.tooltip div{margin-top:-50px;left:0;text-align:center;}
#install_but.tooltip div,#lightdarkdv.tooltip div,#shareAsWeb.tooltip div{left:0;right:auto;top:0;margin-top:0;}
#otherscolor{margin-top:-40px;left:auto;-webkit-user-select: none;user-select:none;}
.tooltip div b,#otherscolor b,#infokaleid b,#undoredoDiv b,#ownDesignsDiv b{display:block;margin:1px;padding:5px;padding-left:30px;color:#fff;position:relative;z-index:100;overflow:hidden; 
box-shadow:inset 2px 2px 5px rgba(255,255,255,0.5),inset -2px -2px 7px rgba(0,0,0,0.7);border-radius:8px 8px 0 8px;background:#005bc7;min-height:24px;}
p#imagetexts,.tooltip div b,#otherscolor b,#undoredoDiv b,#ownDesignsDiv b{background-image: url(maus-kl32.png);background-repeat:no-repeat;background-position:left top;background-size: 32px 32px;}
#startupHelp2 i,.tooltip div b i{font-weight: normal;color: aqua;font-size: 11px;font-style: normal;}
#svgdiv i{position: absolute;width:20px;height:10px;}
#startupHelp2.hoverit:hover{max-height:500px !important;}
p#imagetexts{cursor: pointer;}
#infokaleid{border:none;z-index:9999;margin-top:0;}
#infokaleid b{padding:5px;background:#456d52}
.tooltip div b:before,#otherscolor b:before,#undoredoDiv b:before,#ownDesignsDiv b:before{display:block;content:""; width:80%;height:50px;background:transparent;border-radius:100%/50px;position:absolute;left:25px;top:-30px;z-index:200;background-image:linear-gradient(90deg,rgba(255,255,255,0.5),rgba(255,255,255,0));}
#ownDesignsDiv li{font-size:9px;box-shadow:0px 0px 15px 0px rgba(0,0,0,1) inset;padding:3px;}
#ownDesignsDiv{margin-top:0;}
#webpbutton{display:none;}
#filform{display:block;position:absolute;top:-999px;left:-999px;z-index:1;}
#closeimg,#closeimg1,#closeimg2,#infoSavedCl,#undoredoCl,#gifImagesCl,#ownDesignsCl,#ownDesiCl,#imagesInfo,#closeinfo{float:right;color:red;background:#fbea99;}
#closeimg2,#gifImagesCl,#ownDesignsCl{width:90%;float:none;margin:8px 0 0;}
#imagesInfo{display:none;}
#wcansitze,#hcansitze{width:30px;}
#wcansize:before,#hcansize:before{background:#878686;color:#f9ff00;margin-top:-12px;line-height: 12px;}
#selectedcolor,#otherscolor{-webkit-user-select:text;user-select:text;}
#imagesizeinfo{vertical-align:top;}
#imagesUldiv{margin:0 0 5px 0;}
#filtercss{display:inline-block;}
#liactivesid{box-shadow:0px 0px 15px 0px rgba(0,0,0,1) inset;}
#easytxt legend{font-size:12px;}
#kaleidoCanvas,#textCanvas{max-width:100vw;max-width:calc(100vw - 420px);}
@media screen and (min-width:1105px){
#kaleidoCanvas,#textCanvas{max-width:700px;}
}
#textCanvas{position:absolute;left:0;top:0;}
legend k{color:transparent;float:right;font-weight:bold;text-shadow:0 0 6px #fff;}
fieldset{max-height:inherit;position:static;transition:max-height 0.35s ease-in-out;z-index:9;right:0;left:0;box-shadow:0 0 9px rgba(0,0,0,0.5) inset;}
legend{min-height:1em;width:85%;width:-webkit-fill-available;}
input[type=range]#invertcolor{max-width:60px;}
#infoSavedHi,#progress-bar{left:0;right:0;margin-top:0;margin-left:auto;margin-right:auto;width:90vw;padding:10px;z-index:999;font-weight:bold;}
#infoSavedHi p,#undoredoDiv em{text-align:center;font-size:16px;margin:5px;}
#undoredoDiv{opacity:0.95;}
#stored-version{padding:5px;background:#054589;}
#slider9{width:230px;max-width:230px;}
#undoredo{font-size:9px;padding:1px;margin-bottom:5px;}
#progress-bar{display:none;width:94vw;height:100vh;position:fixed;top:0;margin-top:auto;margin-bottom:auto;text-align:center;background:rgba(0,0,0,0.8);}
#progress-bar img{filter:drop-shadow(0 0 40px #000);transform:scale(2);margin-top:25%;}
input[type="color"]{padding:0;width:35px;height:20px;cursor:pointer;vertical-align:middle;position:relative;}
input[type="color"]:before{content:"";width:19px;height:19px;background:transparent;position:absolute;margin-left:6px;background-position:-40px -131px;background-image:url(sprt5.png);filter:drop-shadow(0 0 3px #000);transform:scale(0.7);}
::-moz-color-swatch{border-color:#000;}
input[type="color"]::-webkit-color-swatch-wrapper{padding:0;}
#textGif{width:150px;height:3em;vertical-align:middle;text-align:center;font-family:Arial;font-size:12px;line-height:0.9em;}
select{width:55px;margin:2px;cursor: pointer;}
.formbox{background:#444;}
#gifForShare{display:inline-block;margin: 0 30px;}
#ownDesignsDiv p{font-size:16px;margin:0;}
p#helpselect{display:none;background:#d3742f;font-size:11px;margin:0px;}
#addDesignbt,#ownDesignsbt{font-size:12px;padding:0;margin-top:6px;line-height:9px;}
#addDesignbt{padding: 4px;}
#addDesignVi{position:absolute;max-width:0;opacity:0;transition:all 1s ease-out;z-index:999;overflow:hidden;right:14px;background:#0565b9;padding:0;}
#transpset{vertical-align:middle;}
.hrtopda{border-top:1px dashed #a3a1a1;}
#resetAllFilterEx label{width:auto;cursor:pointer;text-align:center;}
.imgmore{vertical-align: top;}
.imgmore div{height: 40px;padding-top: 25px;}
.appbadge{border-radius: 50%;background: #333;display: inline-block;width: 18px;height: 17px;font-size: 11px;line-height: 16px;color: #eee;padding: 0;margin: 0;}
.fullpage::-webkit-scrollbar {display: none;}
.fullpage{position:fixed !important;top: 0;left: 0;bottom: 0;right: 0;max-width:none !important;z-index: 99999;overflow-y: auto;-ms-overflow-style: none;scrollbar-width: none;}
#canvasFrameInf{position:fixed;top: 0;right: 0;width:250px;height:70px;text-align:center;z-index: 999999;opacity: 0;font-size:18px;padding:15px;}
#canvasFrameInf:hover{background-color:#000;color:#fff;opacity: 0.7;}
.fullpage #KaleidosSp,#canvasFrameInf{display:none;}
.fullpage #kaleidoCanvas, .fullpage #textCanvas {max-width:100vw !important;width: 100% !important;}

@media only screen and (max-height: 575.98px) and (orientation: landscape) {
#kaleidoCanvas,#KaleidosSp,#textCanvas{max-width:49.5vw;}
#KaleidosSp{right:0;padding:0;}
fieldset{max-height:15px;z-index:9;right:0;left:0;}
legend{min-height:2em;}
#fieldsettwo label{width:auto;}
#filtercss{display:block;}
#svgdiv,fieldset{max-width:24vw;}
fieldset{left:auto;top:0;}
.tooltip div,label.tooltip div{position:fixed;margin-top:0;left:0;top:0;}
input[type=range]{max-width:110px;margin:3px 0;}
#sampleimage{float:left;max-width:55vw !important;}
#sampleimgif{float:right;max-width:36vw;}
#textinhalt img{max-width:48vw;}
}
@media only screen and (max-width: 575.98px) and (orientation: portrait) {
#kaleidoCanvas,#textCanvas{max-width:100vw;}
#KaleidosSp{right:0;width:100%;padding:0;position:relative;}
fieldset{max-height:15px;z-index:9;right:0;left:0;}
legend{min-height:2em;}
#fieldsettwo label{width:auto;}
#filtercss{display:block;}
#svgdiv{max-width:49.5vw;}
fieldset{left:auto;top:0;max-width: 45.5vw;}
#easytxt,#easysiz{display:inline-block;}
.tooltip div,label.tooltip div{position:fixed;margin-top:0;left:0;top:0;}
input[type=range]{max-width:110px;margin:3px 0;}
#textinhalt img{max-width:98vw;float:none;}
}
@media only screen and (max-width: 379px) and (orientation: portrait) {
fieldset{max-width:41.4vw;}
}