/* for side bar */
.edd_sidebar
{
	height:700px;
	width: 20%;
	border:1px solid #222d32;
}
.edd_sidebar_header
{
	display: flex;
	padding:2%;
	text-align: justify;
	border-bottom: 1px solid #222d32;
	border-bottom-style: dashed;
}
.edd_sidebar_header_data
{
   width:90%;
   text-align:center;
   padding:3%;
   background-color: #ccc;
   margin-top:2%;
   margin-left:5%;
   margin-right:2%;
}
.edd_drag_grid
{
	display:grid;
	grid-template-columns: 100px 100px;
	grid-column-gap:2px;

}

.edd_drag_buttons
{
   text-align:center!important;
   background-color: black!important;
   color:white!important;
   margin:1%!important;
   padding-left: 2%!important;
   padding-right: 2%!important;
   min-height:32px!important;
   line-height:30px!important;

 }

 .edd_data_grid_style
 {
 	padding-left:8%;
 }

 /*--for toolbar--*/
.edd_layout
{
  
   width:80%;
   border-top: 1px solid #222d32;
   border-right:1px solid #222d32;

}
.edd_toolbar
{
	display: grid;
	grid-template-columns:25% 60% 15%;
	grid-column-gap: 1px;
	width:100%;
	height:40px;

}
.edd_formatting
{
	border:1px solid none;
}
.edd_settings
{
	border: 1px solid none;
}
.edd_fonts
{
	border:none;

}
.edd_layout_grids
{
	display:grid;
	grid-template-columns: auto;
}
/*format buttons*/
.format_buttons
{
	min-width:25px!important;
	min-height: 20px!important;
	line-height: 24px!important;
	margin-right:1%!important;
	text-align: center!important;

}
/*page_area*/
.edd_page_area
{
	width:100%;
	height:660px;
	border-right:1px solid black;
	border-bottom: 1px solid black;
	background-size: 10px 10px;
    background-color: #269;
    background-image: linear-gradient(to right,  #ccc 0.2px, transparent 1px), linear-gradient(to bottom, #ccc 0.2px, transparent 1px);
    border-style:ridge;
    z-index: 2;
    overflow-x:scroll;
    overflow-y:scroll;
    padding-top:10%;
    padding-left:10%;
    padding-right:10%;
    padding-bottom:50%;  


 
}

.page_a4
{
	/*1240 x 1754*/
	/*794 x 1123*/
  width: 794px;
  height:1123px;
  background-color: white;

  padding:5%;
  display: inline-block;


  }
.page_content
{
	width:100%;
	height: 100%;
    border-width: 2px;
    border-style: dashed;
    border-color: black;
	position: relative;
	background-color: white;

}

/*draggable_container*/

.draggable_container
{
	width:auto;
	height:auto;
	position: absolute;
/*	word-break: break-all;*/
	padding-top:none;
	padding-bottom: none;
	padding-left:1%;
	padding-right:1%;
	padding-top:1%;
	padding-bottom: 1%;
	user-select: none;
	min-height: 10px;
	min-width: 10px;
	overflow: none;
	cursor: move;
}

.draggable_container_outline
{
	outline:3px solid #1dcaff;
	outline-style: solid;
	border:none;
}

/*resize container*/
.resize_tleft
{
	width:17px;
	height:17px;
	cursor:nw-resize;	
	background-color: white;
	border:3px solid black;
    top: -7px;
	left: -7px;
	z-index:4;
	position:absolute;
	box-sizing: border-box;
}
.resize_tright
{
	width:17px;
	height:17px;
	cursor:ne-resize;    
	background-color: white;
	border:3px inset black;
	top: -7px;
	right: -7px;
	z-index:4;
	position:absolute;
	box-sizing: border-box;
}
.resize_bleft
{
	width:17px;
	height:17px;
	cursor:ne-resize;	
	background-color: white;
	border:3px solid black;
	bottom: -7px;
	left: -7px;
	z-index:4;
	position: absolute;
}
.resize_bright
{
	width:17px;
	height:17px;
	cursor:nw-resize;	
	background-color: white;
	border:3px solid black;
	bottom: -7px;
	right: -7px;
	z-index:4;
	position: absolute;
}

.color_grid
{
	display: grid;
	grid-template-columns: 12px 12px 12px 12px 12px 12px 12px 12px 12px 12px;
	grid-column-gap: 2px;
	grid-row-gap:2px;

}