/*
 Theme Name:   Divi Child
 Template:     Divi
 Version:      1.0.0
*/

@import url("../Divi/style.css");
#banner {
  position: relative;
}

#remove-logo-btn {
  position: absolute;
  display: none;
  background: #ff0000;
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  font-size: 12px;
  cursor: pointer;
  z-index: 10;
}

.draggable.logo {
  z-index: 5;
}

.reset_variations{
	visibility: hidden!important;
}
.draggable {
  box-sizing: border-box;
}

.banner-wrapper {
    width: 790px;
    height: 500px;
    position: relative;
    border: 2px solid grey;
    padding-top: 25px;
    padding-left: 10px;
 	 display: flex;
	flex-direction: column; /* stack children vertically */
  justify-content: center;
  align-items: center;
    background: #f4f4f4;
  position: relative;
}

.banner-container {
   max-width: 750px;
   max-height: 233px;
   border: 2px solid #000;
   position: relative;
   text-align : center;
   background: #f4f4f4;
   overflow: hidden;
}

.draggable {
	position: absolute;
    cursor: grab;
	user-select: none;
    transform: rotate(0deg);
 }

.btns {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

.editable-text * {
  -webkit-text-stroke: inherit !important;
  color: inherit !important;
  font-weight: inherit !important;
}

.stroke-text {
  color: #000;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 3px rgb(0, 100, 0);
}


#banner {
  position: relative;
  width: 800px;
  height: 600px;
  border: 1px solid #ccc;
}


.remove-text {
  position: absolute;
  top: -10px;
  right: -10px;
  background: #ff0000;
  color: white;
  border: none;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  font-size: 12px;
  line-height: 18px;
  text-align: center;
  cursor: pointer;
  overflow: visible;
  z-index: 999;
}

      .controls {
        text-align: center;
        margin-top: 10px;
      }






@media (min-width: 981px) {
    #left-area {
        width: 100%!important;
    	 padding-right: 0%!important;
	}
}

@media (max-width: 767px) {
	.banner-wrapper {
      width: 320px!important;
      height: 300px!important;
	}
}

@media (min-width: 1200px) and (max-width: 1300px) {
    .banner-wrapper {
        width: 765px !important;
        height: 370px !important;
    }
}

@media (min-width: 1300px) and (max-width: 1400px) {
	.banner-wrapper {
      width: 765px!important;
      height: 330px!important;
	}
}