/* mobile artboard */
.container {
  width: 100%;
  background: rgb(95, 95, 95);
  position: relative;
  border-bottom: 25px solid transparent;
  transition: border-bottom 0.2s ease-in-out;
}

.newContainer {
  background: rgb(95, 95, 95);
  position: relative;
  border-bottom: 25px solid transparent;
  transition: border-bottom 0.2s ease-in-out;
}

/* #pageBody:before {
  content: "Mobile Artboard";
  position: absolute;
  left: 30px;
  top: -32px;
  width: 1 00px;
  font-size: 0.8rem;
  color: #a8a7a7;
  cursor: grab;
}

.myBody:before {
  content: "Mobile Artboard";
  position: absolute;
  left: 30px;
  top: -32px;
  width: 100px;
  font-size: 0.8rem;
  color: #a8a7a7;
  cursor: grab;
} */

.newContainer-resize {
  border-bottom: 25px solid rgba(0, 255, 255, 0.788);
  cursor: grab;
  transition: border-bottom 0.2s ease-in-out;
}

body {
  width: 1280px;
  max-width: 1280px;
  max-height: 1280px;
  margin: 0 auto;
  overflow: overlay;
}

html {
  /* background: #252525;
      width: 0;
      height: 0; */
}
#pageBody {
  position: absolute;
  /* left: 0%; */
  /* transform: translateX(-50%, -50%); */
  /* top: 0; */
  /* width: 100%; */
}
#savedata,
#loaddata {
  background: transparent;
}
#mobileBoard {
  display: none;
}

#pageBody {
  /* position: absolute; */
  /* width: 100%; */
  /* left: 0%; */
}

.container {
  width: 400px;
  background: inherit;
  position: relative;
  border-bottom: 25px solid transparent;
  transition: border-bottom 0.2s ease-in-out;
}

#web-container,
.newContainer {
  width: inherit;
  height: 1000px;
}

body,
html {
  min-height: 100vh;
}

#web-container,
.newContainer {
  width: inherit;
  height: 1000px;
}

.draggable {
  color: #fff;
  z-index: 10;
}

#pageBody {
  /* min-width: initial; */
}

.mobileReady .generated {
  margin-top: 1em !important;
  margin-left: 1em !important;
  margin-right: 1em !important;
}
.dragme:not(.imgObject, .absolutelyPositioned, .inD) {
  position: absolute !important;
}

.dragme:not(.imgObject, .absolutelyPositioned, .inD) {
  position: absolute !important;
}

.parentOfElements {
  margin-top: 0px !important;
}

/* For custom form */
#testBtn {
  width: auto;
}
.csnSignUpForms {
  left: 0px !important;
}

.boundingBox {
  margin-bottom: 0px !important;
}
.underImage:not(.formSignup, .GeS, .notAnImage) {
  margin-bottom: 0px !important;
}
.underImage .generated {
  text-align: center !important;
}

#bounded > .grouped:not(.imgContainer, .imgObject) {
  position: absolute !important;
}
#bounded > .grouped:not(.imgObject) {
  position: absolute !important;
}
.btnElement {
  margin: 0 auto;
  text-align: center;
}
.doNotMove:not(.fixSpce) {
  margin-bottom: 0px !important;
}
.doNotMove:not(.imgRearranged, .groupLastItem, .groupParent, .GeS, .fixSpce) {
  margin-bottom: 0px !important;
}
.linkedEmptySpace {
  margin-bottom: 0px !important;
}
.editable {
}
.draggable:not(.btnElement, .keepPosition, .btnElm) {
}

/* Spacing modifications for groups and elements within groups */
.groupParent:not(.dbD) {
  /* display: block !important; */
}

.btnText {
  width: 100% !important;
}

.domElement:not(.imgContainer, .btnElm, .smallIcon) {
  /* width: auto !important; */
  /* height: auto !important; */
  line-height: initial;
}

.text {
  margin-top: 0em !important;
}

.changeFontTiny {
  font-size: clamp(1.1rem, 0.5vw, 1rem) !important;
}

.changeFontSmall {
  font-size: clamp(1.2rem, 0.5vw, 2rem) !important;
}

.changeFontMed {
  font-size: clamp(2rem, 0.5vw, 3rem) !important;
}

.changeFontLarge {
  font-size: clamp(4rem, 2vw, 6rem) !important;
}

#bounded {
  border-radius: 0px !important;
}
.xboxMobile {
  /* height: 358px !important; */
}
video {
  width: 100% !important;
  object-fit: contain !important;
}
.xboxIntroMobile {
  height: 467px !important;
  top: 586px !important;
  margin-bottom: -567px !important;
}
.xboxVideoHome {
  width: auto !important;
}

.imgContainer img {
  /* width: 100% !important; */
  margin-left: auto !important;
  margin-right: auto !important;
}
.domElement {
  text-align: center;
}
.noOverLap {
  margin-bottom: 0px !important;
}

.xboxVideoL {
  height: 400px !important;
}

.textAX {
  margin-bottom: -150px !important;
}

.clown {
  top: 692px !important;
  left: 50px !important;
}

.mHide {
  opacity: 0 !important;
}
.xboxVideoText {
  color: #000000 !important;
  margin-top: 2em !important;
}

.elementEditorFull {
  display: none;
}

.resizeTime {
  width: 390px !important;
}

.absolutelyPositioned {
  position: absolute !important;
}

.autofill {
  width: 100%;
  height: 10px;
  background: rgb(48 213 205 / 57%);
  position: absolute;
  left: 0;
  top: 5em;
  z-index: 99999999999;
  display: none;
}

.autoFillError {
  background: rgb(213 48 48 / 57%) !important;
}

.pullIcon {
  position: relative;
}

.pullBG {
  width: 40px;
  height: 35px;
  background: #000;
  display: flex;
  justify-content: center;
  align-items: center;
  float: right;
  position: relative;
  right: -2.5em;
  top: -0.8em;
  border-radius: 6px;
  box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.5);
  cursor: pointer;
}

/**/
.pullIconLeft {
  position: relative;
}

.pullBGLeft {
  width: 40px;
  height: 35px;
  background: #000;
  display: flex;
  justify-content: center;
  align-items: center;
  float: left;
  position: relative;
  left: -2.5em;
  top: -0.8em;
  box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.5);
  cursor: pointer;
}

.flx {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-around !important;
  height: auto !important;
  flex-wrap: wrap !important;
  /* width: 100% !important; */
}

#pageBody,
.container {
  /* width: 100% !important; */
  min-width: 400px !important;
  min-height: 100% !important;
}

/* .groupParent .imgContainer {
  width: 100% !important;
} */

.flxC {
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: wrap !important;
  /* justify-content: center !important; */
}

.draggable:not(.imgRearranged, .groupLastItem, .groupParent, .GeS, .fixSpce) {
  margin-bottom: 0px !important;
}

.draggable {
  margin-bottom: 0px !important;
}

.draggable {
  position: absolute !important;
}

.generated {
  position: absolute !important;
}