body{
    --theme-color: #707070;
    --sec-thm-cl: #3f3f3f50;
}
body.light{
				--bg-col:#fff;
				--bg-col-sc:rgb(223, 223, 223);
				--shd-c:#efefef;
				--txt-c:#000;
}
body.dark{
				--bg-col:#151525;
				--bg-col-sc:#151010;
				--shd-c:#151515;
				--txt-c:#fff;
}
html , body{
				margin:0;
				padding:0;
				background:var(--bg-col);
}
*:not(.material-icons){
				font-family: 'Gowun Dodum', sans-serif !important;
}

*{
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}
div.app{
				max-width:900px;
				width:100%;
				overflow:hidden;
				transition:0.3s;
				position: absolute;
				top:0;
				overflow:hidden;
				height:auto;
				max-height:calc(100vh + 60px);
}

div.menu-nav-bar{
				/*border-bottom:1px solid var(--theme-color);*/
				color:var(--txt-c);
				width:calc(100% - 30px);
			    height:50px;
				display: flex;
				justify-content: center;
				padding:0px 15px 0px 15px;
				transition:0.3s;
}
.ico{
		display: inline-flex;
		text-align:center;
		vertical-align:middle;
}
div.menu-nav-bar button {
 margin-top:10px;
 width:30%;
 overflow:hidden;
 text-overflow: ellipsis;
 color:var(--txt-c);
}
div.page{
				width:calc(100% - 10px);
				height:calc(100vh - 81px);
				margin-top:10px;
				background:var(--bg-col);
				border-radius:15px;
				margin-left:5px;
				margin-bottom:10px;
				transition:0.5s;
				overflow: scroll;			
}
div.page::-webkit-scrollbar{
	width: 0px;
}

div.box{
				box-shadow:0 0 0 1px var(--theme-color);
}
.pg-but.active-tab{
				border-bottom:3px solid var(--theme-color);
				transition:0.4s;
}
.formal{
 background:#151525; color:white; border:1px solid white;
}
div.loader{
				height:150px; width:150px;
				border-radius:15px;
				position: absolute;
				top:calc(50vh - 75px);
				left:calc(50vw - 75px);
				display: flex;
				vertical-align:middle;
				justify-content:center;
				/*animation:2s loader infinite;*/
				transition:0.3s;
				opacity:0;
				background:var(--bg-col);
				/*border:1px solid var(--txt-c);*/
}
@keyframes loader{
				10%{
				 box-shadow:0 0 0 3px #787878;
				}50%{
				 box-shadow:0 0 0 3px var(--bg-col);
				}100%{
							box-shadow:0 0 0 3px #787878;	
				}
}
button:disabled{
	color: transparent !important;
}
.bottom_up_slide{
position: fixed;
bottom:50px;
left:calc(50vw - 150px);
border:2px solid #fffc95;
background:#80acff;
color:white;
padding:5px;
border-radius:5px;
}


/*Additional Style*/
@font-face{font-family:'Material Icons';font-style:normal;font-weight:400;src:url(libs/Google-mt-fonts.woff2) format('woff2')}mat-ic{font-family:'Material Icons';font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:'liga';-webkit-font-smoothing:antialiased;margin:auto;}
.btn-del{
	background-color: red;
	border: none;
	border-radius: 5px;
	color: white;
	font-weight: 600;
	padding: 2px 8px;
	margin:5px;
	cursor: no-drop;
}
.btn-crop{
	background-color: dodgerblue;
	font-weight: 600;
	color: whitesmoke;
	border-radius: 5px;
	border: none;
	padding: 2px 8px;
	cursor: zoom-in;
}

.btn-downld{
	text-decoration: none;
	background-color: darkblue;
	font-weight: 600;
	color: whitesmoke;
	border-radius: 5px;
	border: none;
	padding: 2px 8px;
	margin-left: 4px;
}

.btn-save{
	margin: 6px;
	background: #418300;
	font-weight: 500;
	border-radius: 5px;
	padding: 2px 5px;
	width: 100px;
	color: whitesmoke;
	border: none;
	cursor: pointer;
}
.btn-b64{
	border-radius: 5px;
	border: 1px solid;
	margin-left: 4px;
	cursor: copy;
}
.footer{
	margin-bottom: 10px;
}