/* Split the screen in half */
.split {
  height: 100dvh;
  width: 50%;
  position: fixed;
  z-index: 1;
  top: 0;
  overflow-x: hidden;
    overflow-y: hidden;
  padding-top: 0px;
}

/* Control the left side */
.left {
    left: 0;

}

/* Control the right side */
.right {
  right: 0;
/*  background-color: red; */
}

body {
  background: #9A8EDF;
  background: radial-gradient(circle, rgba(154, 142, 223, 1) 30%, rgba(161, 120, 160, 1) 100%);
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}


/* Split the screen in half */
.split {
  height: 100dvh;
  width: 50%;
  position: fixed;
  z-index: 1;
  top: 0;
  overflow-x: hidden;
  padding-top: 0px;
}

.left {
    left: 0;
  border-width: 0 7px 0 0;
  border-style: solid;
  border-image: 
    linear-gradient(
	to bottom,
	rgba(20, 206, 29, 0.6), rgba(150, 200, 40, 0.6)
    ) 1 100%;    
}


/* Control the right side */
.right {
/*  background-color: #FFFFE8; */
}

.right-topright {
    position: fixed;
    height: 50dvh;
    right: 0;
    width: 25%;  /* 4 items per row */
    top: 0; 
      height: 50%;
}

.right-topleft {
    position: fixed;
    height: 50dvh;
    top: 0; /* 2 rows */    
  left: 50%;
  width: 25%;  /* 4 items per row */
  height: 50%; /* 2 rows */
}

.right-bottomright {
    position: fixed;
    right: 0;
        bottom: 0;
  width: 25%;  /* 4 items per row */
  height: 50%; /* 2 rows */
}

.right-bottomleft {
    position: fixed;
    left: 50%;
    bottom: 0;
  width: 25%; 
  height: 50%;
}



body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

.floating {
   position: -webkit-sticky;
   position: sticky;
   position: absolute;
   top: 10px;
   right: 10px;
   z-index: 9999;
}



.signature {
    overflow: hidden;   
    width: 100%;
    height: auto%;
    position: absolute;
    top: 0%;
    left: 0%;
}



.stem {
  position: absolute;
right: 14%;
top: 27%;
  width: 25%;
height: auto;
  top: 0;
}

body .imageEditorContainer {
  --background-color-1: rgba(256, 256, 256, 0);
  --foreground-color-1: black;
}

/* Mobile portrait mode optimizations */
@media screen and (orientation: portrait) {
  body {
    overflow: hidden !important;
  }
}