button{color:#fff;font-family:"Fjalla One",sans-serif;font-size:24px;padding:0.875rem 2rem;border:none;box-shadow:none;margin:0;cursor:pointer}
button i span{margin-left:0.5em;font-family:"Fjalla One",sans-serif}
button.disabled{
    background:grey;
    color:rgba(255,255,255,0.5);
    pointer-events:none;
    opacity:0.5
}

.main-button-row{border-top:8px solid #fff;background-color:#fff}
.main-button-row button{flex:1;z-index:1}
.main-button-row button:not(.disabled){border:4px solid #f3544c;color: #f3544c;background-color:#fff;}
.main-button-row #edit-image{margin-right:2px;}
.main-button-row #share-image{margin-left:2px;}

.main-button-row-two{border-top:4px solid #fff;background-color:#fff;}
.main-button-row-two button{flex:1;z-index:1}
.main-button-row-two button:not(.disabled){border:4px solid #f3544c;color:#f3544c;background-color:#fff}
.main-button-row-two .download-button{margin-right: 2px}

.bottom-tray{border-top:4px solid #fff;background-color:#fff}
.bottom-tray button{background-color:#f3544c;flex:1}
.bottom-tray .scale-toggle{margin-right:2px}
.bottom-tray .rotate-toggle{margin:0 2px}
.bottom-tray .text-toggle{margin-left:2px}

@media only screen and (max-width: 590px){button{padding:0.475rem 1rem}}
@media only screen and (max-width: 400px){button{padding:0.475rem 0.8rem}}

.slider-row input[type='range']{-webkit-appearance:none;width:100%;background:transparent}
.slider-row input[type='range']::-webkit-slider-thumb{-webkit-appearance:none}
.slider-row input[type='range']:focus{outline:none}
.slider-row input[type='range']::-ms-track{width:100%;cursor:pointer;background:transparent;border-color:transparent;color:transparent}
.slider-row input[type='range']::-webkit-slider-thumb{-webkit-appearance:none;border:1px solid #ff617b;height:36px;width:16px;border-radius:3px;
background:#ffffff;cursor:pointer;margin-top:-14px;box-shadow:1px 1px 1px #ff617b,0px 0px 1px #ff617b}
.slider-row input[type='range']::-moz-range-thumb{box-shadow:1px 1px 1px #000000, 0px 0px 1px #0d0d0d;border:1px solid #000000;height:36px;width:16px;border-radius:3px;background:#ffffff;cursor:pointer}
.slider-row input[type='range']::-ms-thumb{box-shadow:1px 1px 1px #000000, 0px 0px 1px #0d0d0d;border:1px solid #000000;height:36px;width:16px;border-radius:3px;background:#ffffff;cursor:pointer}
.slider-row input[type='range']::-webkit-slider-runnable-track{width:100%;height:8.4px;cursor:pointer;box-shadow:1px 1px 1px #000000, 0px 0px 1px #0d0d0d;background:#f3544c;border-radius:1.3px;border:0.2px solid #010101}
.slider-row input[type='range']:focus::-webkit-slider-runnable-track{background:#f3544c}
.slider-row input[type='range']::-moz-range-track{width:100%;height:8.4px;cursor:pointer;box-shadow:1px 1px 1px #000000, 0px 0px 1px #0d0d0d;background:#f3544c;border-radius:1.3px;border:0.2px solid #010101}
.slider-row input[type='range']::-ms-track{width:100%;height:8.4px;cursor:pointer;background:transparent;border-color:transparent;border-width:16px 0;color:transparent}
.slider-row input[type='range']::-ms-fill-lower{background:#f3544c;border:0.2px solid #010101;border-radius:2.6px;box-shadow:1px 1px 1px #000000, 0px 0px 1px #0d0d0d}
.slider-row input[type='range']:focus::-ms-fill-lower{background:#f3544c}
.slider-row input[type='range']::-ms-fill-upper{background:#f3544c;border:0.2px solid #010101;border-radius:2.6px;box-shadow:1px 1px 1px #000000, 0px 0px 1px #0d0d0d}
.slider-row input[type='range']:focus::-ms-fill-upper{background:#f3544c}body{margin:0;padding:20px 0 0 0;box-sizing:border-box}
.picture-filter-container{max-width:570px;width:100%;margin:0 auto}
.picture-filter-container .holder{position:relative;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;touch-action:none;z-index:1}

@media only screen and (max-width: 590px){.picture-filter-container{max-width:400px;width:100%;margin:0 auto}}
@media only screen and (max-width: 400px){.picture-filter-container{max-width:360px;width:100%;margin:0 auto}}

.container-wrap{width:100%}
.container-wrap .upload-button-center-box{position:absolute;display:flex;align-items:center;justify-content:center;width:570px;height:570px;z-index:4}
.container-wrap .upload-container{background-color:#f3544c;border-radius:0.125rem;color:#fff;font-size:24px;padding:0.875rem 2rem;cursor:pointer}
.container-wrap .upload-container #gn-uploadtext{margin-left:0.5em;font-family:"Fjalla One",sans-serif}
.container-wrap .upload-container input[type='file']{display:none}
#container{width:100%;display:flex;flex-direction:column;align-items:center}
#container canvas{background:#fff !important;box-sizing:border-box;outline:4px solid #ffffff00;outline-offset:-4px}
#container .konvajs-content canvas:hover{cursor:move}

@media only screen and (max-width: 590px){.container-wrap .upload-button-center-box{width:400px;height:400px}}
@media only screen and (max-width: 400px){.container-wrap .upload-button-center-box{width:360px;height:360px}}

.contain-bottom{width:100%;display:flex;flex-direction:column;align-items:center;opacity:1;z-index:-1}
.contain-bottom .wrap-buttons{transform:translateY(-100px);transition:transform 0.5s ease-in-out;width:100%}
.contain-bottom .wrap-buttons.move-down{transform:translateY(0)}
.contain-bottom .main-button-row{width:100%;background:white;display:flex;justify-content:center;align-items:center;position:relative;z-index:3}

.contain-bottom .main-button-row-two{width:100%;background:white;display:flex;justify-content:center;align-items:center;position:relative;z-index:3}

.contain-bottom .edit-tool-holder{transition:opacity 0.5s ease-in-out;opacity:0;pointer-events:none;z-index:-1;height:100px;width:100%;overflow:hidden}
.contain-bottom .edit-tool-holder.active{opacity:1;pointer-events:all}
.contain-bottom .edit-tool-holder .slider-row{display:flex;justify-content:center;align-items:center;width:100%;height:100%}
.contain-bottom .edit-tool-holder .slider-row.active{display:flex}
.contain-bottom .edit-tool-holder .slider-num{width:14% !important;margin-left:1%;height:16px;border-top:none;border-left:none;border-right:none;border-bottom:2px solid #f3544c;border-radius:0;padding:2px;font-size:16px;font-family:"Fjalla One"}
.contain-bottom .edit-tool-holder .text-edit-row{display:flex;justify-content:center;align-items:center;width:100%;height:100%}
.contain-bottom .edit-tool-holder .text-edit-row textarea{width:90%;height:80%;font-size:16px;padding:6px;box-sizing:border-box;border:4px solid #f3544c;font-family:"Fjalla One"}
.contain-bottom .edit-tool-holder .text-edit-row #text-count{font-family:"Fjalla One";width:9%;margin-left:1%}
.contain-bottom .bottom-tray{width:100%;transform:translateY(-200px);transition:transform 0.5s ease-in-out, opacity 0.7s ease-in-out;pointer-events:none;opacity:0;z-index:-1}
.contain-bottom .bottom-tray.active{transform:translateY(0px);opacity:1;pointer-events:all}
.contain-bottom .bottom-tray>div{justify-content:center;width:100%}
.contain-bottom .bottom-tray .edit-options{display:none}
.contain-bottom .bottom-tray .share-options{display:none}
.contain-bottom .bottom-tray .edit-options.active{display:flex}
.contain-bottom .bottom-tray .share-options.active{display:flex}

@media only screen and (max-width: 590px){.contain-bottom .edit-tool-holder .text-edit-row #text-count{font-size:12px;overflow-wrap:break-word}

.contain-bottom .slider-row{width:90%;margin-left:2%}}
.loading-screen{width:100%;height:100%;display:flex;justify-content:center;align-items:center;position:absolute;top:0;left:0;bottom:0;right:0;min-width:100px;min-height:100px}
.loading-screen img{max-width:90px;height:auto}

/* .directions-center{
    text-align: center;
} */

.directions{
	width: 100%;
	font-family:"Fjalla One",sans-serif;
	font-size: 30px;
	border: none;
	color: #333333;
    display: block;
    margin-right: auto;
    margin-left: auto;
    margin-top: -30px;
}

.directions h4 {
	margin: 20px;
	text-align: center;
}

.directions h2 {
	text-align: center;
}

.directions p {
	margin: 20px;
}

.center {
	font-size: 20px;
}

.number {
	padding-top: 30px;
}

.indent {
	padding-left: 10px;
}

.indent2 {
	padding-left: 25px;
}

img {
	width: 300px;
	border: 2px solid #555;
	margin-left: auto;
    margin-right: auto;
    display: block;
}

a {
	color: #f3544c;
}