@-ms-viewport { 
	width: device-width; 
}

body {
	margin: 0;
	background-color: rgb(255, 255, 255);
	color: #fff;
	font-family: Monospace;
	font-size: 13px;
	line-height: 24px;
	overscroll-behavior: none;
}

a {
	color: rgb(255, 255, 255);
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

button {
	cursor: pointer;
	text-transform: uppercase;
}

canvas {
	display: block;
}

#info {
	position: absolute;
	top: 0px;
	width: 100%;
	padding: 10px;
	box-sizing: border-box;
	text-align: center;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
	pointer-events: none;
	z-index: 1; /* TODO Solve this in HTML */
}

a, button, input, select {
	pointer-events: auto;
}

.dg.ac {
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
	z-index: 2 !important; /* TODO Solve this in HTML */
}

#overlay {
	position: absolute;
	z-index: 2;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0,0,0,0.7);
}

	#overlay button {
		background: #ffffff;
		border: 0;
		color: #000000;
		padding: 16px 20px;
		text-transform: uppercase;
		cursor: pointer;
	}

#notSupported {
	width: 50%;
	margin: auto;
	background-color: #f00;
	margin-top: 20px;
	padding: 10px;
}

.fileElem{
	display: none;
}

.menuBar{
    position: absolute;
    width: 250px;
    height: 50px;
    top: calc(100% - 70px);
    background: #3d3d3da9;
    user-select: none;
    z-index: 30;
    left: calc(50% - 125px);
    border-radius: 30px;
}

.menuBar .menuBarBtns{
	position: relative;
	top: 15%;
	left: 5%;
	display: grid;
	grid-template-columns: auto 35px 35px 35px 35px auto;
	grid-gap: 15px;
	width: 90%;
}

/* .mobile .menuBar .menuBarBtns{
	grid-template-columns: 70px 140px auto 0px;
} */

.menuBarBtns > input{
	height: 30px;
	width: 80px;
	border-radius: 5px;
	border-style: solid;
	border-color: #acb3bfd1;
	border-width: thin;
	background-color: #ffffffb3;
	color: #484848;
	outline: none;
}

.mobile .menuBarBtns > input{
	width: 60px;
}


.googleIcons30{
	position: absolute;
	font-size: 30px; 
}

.googleIcons35{
	position: absolute;
	font-size: 35px; 
}

#autoRotateBtn{
	cursor: pointer;
}

#gyroBtn{
	cursor: pointer;
}

#gyroBtn > img{
	width: 30px;
}

#shareBtn{
	cursor: pointer;
}

.share_ico{
	width: 50px;
	margin: 5px;
	outline: none;
}

.mobile .share_ico{
	width: 40px;
	margin: 2px;
}

#fullscreenBtn{
	/* justify-self: right; */
	/* padding-left: calc(100% - 30px); */
	cursor: pointer;
}

/* .selectedFrameBar{
	display: block;
	background-color: #e9e9e9;
	position: absolute;
	z-index: 10;
	width: 70px;
	left: calc(50% - 35px);
	height: 25px;
	user-select: none;
}

.selectedFrameBar > label{
	color: black;
	position: absolute;
	left: 10%;
	font-weight: 600;
}

 .selectedFrameBarBtn > input{
	height: 30px;
	width: 80px;
	border-radius: 5px;
	border-style: solid;
	border-color: #acb3bfd1;
	border-width: thin;
	background-color: #ffffffb3;
	color: #484848;
	outline: none;
}

.mobile .selectedFrameBarBtn > input {
	width: 60px;
}

.selectedFrameBarBtn.disabled > input{
	background-color: #5c5c5cb3;
} */

.app_container{
	position: absolute;
	
	width: 100%;
    height: 100%;
    top: 0;
    left: 0;

	overflow: hidden;

    /* width: 768px;
    height: 540px;
    top: calc(50% - 270px);
    left: calc(50% - 384px); */
}

/*.mobile .app_container{
	 width: 100%;
	height: 80%;
	left: 0; 
}*/

.canvas_container{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    overflow: hidden;
}

.cropper{
	display: none;
    position: absolute;
    width: 100%;
	height: calc(100% - 50px);
	background-color: whitesmoke;
    /* left: 200px; */
}

.cropper.visible{
	display: block;
	z-index: 30;
}

.cropperMenu{
	/* display: none; */
	position: absolute;
	top: 100%;
	left: 1%;
	color: black;
}

.cropperMenu > input{
	height: 30px;
	width: 65px;
	border-radius: 5px;
	border-style: solid;
	border-color: #acb3bfd1;
	border-width: thin;
	background-color: #ffffffb3;
	color: #484848;
	outline: none;
}

.mobile .cropperMenu > input{
	width: 35px;
}

.cropperMenu.left{
	left: calc(45% + 138px);
    top: 100.5%;
}

.mobile .cropperMenu.left {
	left: calc(100% - 110px);
    top: calc(100% + 7px);
}

.cropperMenu.visible{
	display: block;
}

.menuTool{
	display: none;
	position: absolute;
    width: 380px;
    height: 200px;
    top: calc(100% - 250px);
	background: #949494;
	z-index: 10;
	overflow: hidden;
	user-select: none;
	/* min-width: 222px; */
	/* max-width: 222px; */
	background-color: #dbdbdb;
}

.mobile .menuTool{
	width: 100%;
}

.menuTool .menuBackground{
	position: absolute;
	height: 90%;
	left: 4%;
	/* overflow: auto; */
	width: 82%;
	top: 5%;
	display: grid;
	grid-template-columns: 150px 150px;
	grid-column-gap: 15px;
	color: black;
}

.menuTool.visible{
	display: block;
}

.closeMenuBackground{
	position: relative;
	left: calc(100% - 25px);
}

.imageList{
	position: relative;
	/* width: 80%; */
	/* left: 15%; */
	top: 15px;
	text-align: center;
	overflow-y: auto;
	height: 68%;
	left: -15px;
}


.inputRight{
	position: absolute;
	left: calc(100% + 1px);
	/* margin-top: 25px; */
	top: 85%;
}

.labelRight{
	position: absolute;
	left: calc(100% + 25px);
	/* margin-top: 20px; */
	top: 83%;
}

label{
	font-family: sans-serif;
}

.backgroundImgLabel{
	position: relative;
    top: -8px;
}

.menuLabel{
	font-weight: 700;
	color: black;
}

.itemUp { grid-area: header; }
.itemUpperLeft {
	grid-area: left;
}
.itemUpperRight {
	grid-area: right;
}
.itemMiddleLeft {
	grid-area: left;
	padding-top: 30px;
	justify-self: start;
}
.itemMiddleRight {
	grid-area: right;
	padding-top: 30px;
	justify-self: end;
}
.itemDownLeft {
	grid-area: left;
	padding-top: 60px;
}
.itemDownRight {
	grid-area: right;
	padding-top: 60px;
}
.itemDown { grid-area: footer; }

.grid-container {
  width: 150px;
  display: grid;
  grid-template-areas:
    'header header'
    'left right'
    'left right'
    'left right'
    'left right'
    'footer footer';
  /* grid-gap: 0px; */
  /* padding: 10px; */
  position: relative;
  top: 4%;
  /* left: 10%; */
  /* grid-template-rows: 21px; */
}

.grid-container input {
	position: relative;
	z-index: 30;
  }

.grid-container > div {
  text-align: center;
  /* padding: 20px 0; */
  /* font-size: 15px; */
}

.grid-container .label {
	margin-top: 3px;
}

.colorBox{
	position: relative;
	/* width: 20px; */
	height: 20px;
	left: 20px;
}

.txtEditorModal{
	display: none;
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 15;
	background-color: #c0d3f1e3;
}

.txtEditorModal.visible{
	display: block;
	z-index: 40;
}

.txtEditor{
	height: 310px;
	position: absolute;
	width: 280px;
	left: calc(50% - 138.5px);
	top: calc(50% - 160px);
	background-color: whitesmoke;
	z-index: 20;
	color: black;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
}

.mobile .txtEditor{
	top: 0%;
	height: 250px;
	overflow: auto;
}

#editor-container {
	/* height: 375px; */
	height: 85%;
}

.txtArea{
	position: absolute;
	top: 30px;
	width: 260px;
	max-width: 260px;
	height: 260px;
	max-height: 260px;
	resize: none;
	/* border: none; */
	outline: none;
	/* border-radius: 10px; */
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	padding: 10px;
	/* margin: 10px; */
	font-size: 43px;
	overflow: hidden;
	text-overflow: clip;
	background-color: white;
	line-height: normal;
	font-family: serif;
	text-align: center;
}

.mobile .txtArea{
	top: 0;
	font-size: 35px;
}

.txtArea.emoji{
	top: 151px;
	height: 135px;
	overflow: overlay;
}

.emoji-menu-tabs{
	position: absolute;
    top: 30px;
    z-index: 30;
}

.emoji-items-wrap{
	z-index: 30;
	position: absolute;
	top: 67px;
	overflow: auto;
	height: 80px;
	width: 98%;
	left: 5px;
	background-color: white;
}

.emoji-items-wrap1 {
	display: none;
}

/*
.emoji-items-wrap1.visible {
	display: block;
} */

.txtEditorToolbar{
	background-color: #808080b8;
	height: 30px;
}

.mobile .txtEditorToolbar{
	display: none;
}

.txtEditorToolbarMobile{
	height: 100px;
	width: 30px;
	display: none;
}

.mobile .txtEditorToolbarMobile{
	display: block;
}

.txtEditorBtn{
	border: none;
	font-size: large;
	background-color: #a0a0a0;
	position: relative;
	top: 3px;
	font-family: serif;
	/* left: 0px; */
	/* padding-left: 10px; */
}

.bold{
    font-weight: bold;
    left: 5px;
}

.mobile .bold{
    /* left: 6px; */
    width: 30px;
}

.bold.on{
    background-color: gray;
}

.italic{
    font-style :italic;
    padding-left: 8px;
    padding-right: 8px;
}

.mobile .italic{
    left: 5px;
    width: 30px;
    top: 10px;
}

.italic.on{
    background-color: gray;
}

.underline{
    text-decoration: underline;
    left: -3px;
}

.mobile .underline{
    left: 5px;
    width: 30px;
    top: 17px;
}

.underline.on{
    background-color: gray;
}


.emojiBtn{
    font-size: large;
    float: right;
    top: 0px;
}

.emoBtn{
	border: none;
	width: 24px;
	height: 24px;
	padding: inherit;
	background: none;
	font-size: large;
	outline: none;
}

.txtEditorOkCancel{
	position: absolute;
	top: calc(50% + 152px);
	/* top: 315px; */
	left: calc(50% - 118px);
	display: grid;
	grid-template-columns: 130px 40px 60px;
	grid-column-gap: 5px;
}

.txtEditorOkCancel > label{
	color: #f00;
	font-size: large;
	position: relative;
	/* left: -20px; */
}

.mobile .txtEditorOkCancel{
	top: 253px;
}

.showRes{
	display: none;
	position: absolute;
	/* width: 1024px;
	height: 1024px; */
	overflow: auto;
	z-index: 50;
	background-color: grey;
}

.mobile .showRes > canvas{
	overflow: auto;
}

.showRes.visible{
	display: block;
}

.menuFraming{
	justify-self: center;
	text-align: center;
}



/* The Modal (background) */
.msgModal {
	display: none; /* Hidden by default */
	position: fixed; /* Stay in place */
	z-index: 110; /* Sit on top */
	left: 0;
	top: 0;
	width: 100%; /* Full width */
	height: 100%; /* Full height */
	overflow: auto; /* Enable scroll if needed */
	background-color: rgb(0,0,0); /* Fallback color */
	background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
	/* cursor: pointer; */
  }
  
  /* Modal Content */
  .msgModal-content {
	background-color: #fefefe;
	margin: auto;
	padding: 20px;
	border: 1px solid #888;
	width: 60%;
	text-align: center;
	border-radius: 10px;
	margin-top: 37vh;
	font-family: sans-serif;
    font-size: large;
  }
  
  .mobile .msgModal-content {
	width: 80%;
  }
  
  /* The Text zone */
  .msgModal-text {
	color: #000;
	/* width: 90%;
	padding-left: 10%; */
  }
  
  /* The Close Button */
  .closeMsgModal {
	width: 60px;
    height: 30px;
	font-weight: bold;
	cursor: pointer;
  }
  
  /* .closeMsgModal:hover,
  .closeMsgModal:focus {
	color: #000;
	text-decoration: none;
	cursor: pointer;
  } */


  .spinner {
    display: none;
    position: absolute;
    height: 200px;
    width: 200px;
    /* background: rgb(255, 255, 255, 0.1); */
    top: calc(50% - 125px);
    left: calc(50% - 100px);
    z-index: 50;
    transition: opacity 0.3s linear;
    /* opacity: 1; */
    margin: auto;
   }
   
   .loadProgress{
	display: none;
    color: #ffffff;
    font-size: xx-large;
    position: absolute;
    width: 75px;
    height: 24px;
    text-align: center;
    top: calc(50% - 12px);
    left: calc(50% - 37.5px);
    background-color: #00000066;
    border-radius: 7px;
    border: hidden;
    font-family: serif;
   }

  .firebaseAuth{
	  position: absolute;
	  z-index: 100;
	  width: 100%;
	  height: 100%;
	  background-color: rgba(254, 255, 253, 0.7);

	  display: flex;
	  /* min-height: 100vh; */
	  align-items: center;
	  justify-content: center;
	  /* flex-direction: column; */
  }

  .notLoaded{
	display: none;
    position: absolute;
	text-align: center;
	font-family: 'Josefin Sans', sans-serif;
	color: white;
	z-index: 10;
	width: 300px;
    height: 100px;
    left: calc(50% - 150px);
    top: calc(50% - 75px);
  }