.elementor-2972 .elementor-element.elementor-element-b564cc5{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:flex-start;--align-items:center;--margin-top:100px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-2972 .elementor-element.elementor-element-b564cc5:not(.elementor-motion-effects-element-type-background), .elementor-2972 .elementor-element.elementor-element-b564cc5 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-648a1e3 );}.elementor-2972 .elementor-element.elementor-element-390d255{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--border-radius:0px 0px 0px 0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2972 .elementor-element.elementor-element-390d255:not(.elementor-motion-effects-element-type-background), .elementor-2972 .elementor-element.elementor-element-390d255 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-648a1e3 );}.elementor-2972 .elementor-element.elementor-element-390d255.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-2972 .elementor-element.elementor-element-be79d4f{width:100%;max-width:100%;}@media(min-width:768px){.elementor-2972 .elementor-element.elementor-element-390d255{--width:100%;}}/* Start custom CSS for html, class: .elementor-element-b343dee *//* Layout */
#sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: 280px;
  height: 100vh;
  background: #111;
  color: white;
  padding: 20px;
  z-index: 9999;
  overflow-y: auto;
  transition: all .3s ease;
}

#sidebar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#sidebar h2 {
  font-size: 20px;
  margin-bottom: 15px;
}

.sidebar-btn {
  background: #222;
  color: white;
  border: 1px solid #444;
  padding: 6px 10px;
  cursor: pointer;
  font-size: 18px;
  border-radius: 5px;
}

/* Theme List */
#themeList {
  list-style: none;
  padding: 0;
  margin-top: 20px;
}

#themeList li {
  padding: 12px;
  margin-bottom: 8px;
  background: #222;
  border-radius: 6px;
  cursor: pointer;
  transition: .3s;
  border: 1px solid #333;
}

#themeList li:hover {
  background: #333;
}

#themeList li.active {
  background: #ff0055;
  border-color: #ff0055;
}

/* Preview Area */
#previewWrapper {
  margin-left: 280px;
  height: 100vh;
}

#previewFrame {
  width: 100%;
  height: 100%;
}

/* Mobile */
@media(max-width: 900px) {
  #sidebar {
    left: -280px;
  }
  #sidebar.open {
    left: 0;
  }

  #previewWrapper {
    margin-left: 0;
  }

  .sidebar-btn {
    position: fixed;
    top: 15px;
    left: 15px;
    z-index: 99999;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-be79d4f *//* Layout */
#sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: 280px;
  height: 100vh;
  background: #111;
  color: white;
  padding: 20px;
  z-index: 9999;
  overflow-y: auto;
  transition: all .3s ease;
}

#sidebar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#sidebar h2 {
  font-size: 20px;
  margin-bottom: 15px;
}

.sidebar-btn {
  background: #222;
  color: white;
  border: 1px solid #444;
  padding: 6px 10px;
  cursor: pointer;
  font-size: 18px;
  border-radius: 5px;
}

/* Theme List */
#themeList {
  list-style: none;
  padding: 0;
  margin-top: 20px;
}

#themeList li {
  padding: 12px;
  margin-bottom: 8px;
  background: #222;
  border-radius: 6px;
  cursor: pointer;
  transition: .3s;
  border: 1px solid #333;
}

#themeList li:hover {
  background: #333;
}

#themeList li.active {
  background: #ff0055;
  border-color: #ff0055;
}

/* Preview Area */
#previewWrapper {
  margin-left: 280px;
  height: 100vh;
}

#previewFrame {
  width: 100%;
  height: 100%;
}

/* Mobile */
@media(max-width: 900px) {
  #sidebar {
    left: -280px;
  }
  #sidebar.open {
    left: 0;
  }

  #previewWrapper {
    margin-left: 0;
  }

  .sidebar-btn {
    position: fixed;
    top: 15px;
    left: 15px;
    z-index: 99999;
  }
}/* End custom CSS */