@innovastudio/contentbuilder 1.4.149 → 1.5.0

package/public/contentbuilder/contentbuilder.css

@@ -8,6 +8,10 @@ svg {
   pointer-events: none;
 }
 
+.is-container > div > div svg {
+  pointer-events: initial;
+}
+
 [contenteditable] svg {
   pointer-events: initial;
 }
@@ -91,7 +95,8 @@ button:focus-visible {
 .is-builder .cell-active[data-html] {
   background-color: rgba(200, 200, 201, 0.11);
 }
-.is-builder .cell-active .icon-active {
+.is-builder .cell-active .icon-active,
+.is-builder .cell-active .svg-active {
   background-color: rgba(200, 200, 201, 0.4);
 }
 .is-builder .elm-inspected {
@@ -991,10 +996,13 @@ button:focus-visible {
   margin: 0 !important;
   line-height: 1.45 !important;
   text-align: center;
-  transform: scale(0.7);
   white-space: nowrap;
   pointer-events: none;
 }
+#_cbhtml .is-rte-pop.rte-paragraph-options > ul > li > *:not(p),
+.is-ui .is-rte-pop.rte-paragraph-options > ul > li > *:not(p) {
+  transform: scale(0.8);
+}
 #_cbhtml .is-rte-pop.rte-textsetting-options > div,
 .is-ui .is-rte-pop.rte-textsetting-options > div {
   width: 233px;
@@ -1201,15 +1209,35 @@ button:focus-visible {
 }
 #_cbhtml .is-rte-pop.rte-icon-options,
 .is-ui .is-rte-pop.rte-icon-options {
-  width: 280px;
+  width: 270px;
 }
-#_cbhtml .is-rte-pop.rte-icon-options iframe,
-.is-ui .is-rte-pop.rte-icon-options iframe {
-  margin: 1px 0 0;
+#_cbhtml .is-rte-pop.rte-icon-options #inpRteIconSearch,
+.is-ui .is-rte-pop.rte-icon-options #inpRteIconSearch {
+  height: 40px;
+  flex: none;
+}
+#_cbhtml .is-rte-pop.rte-icon-options > div,
+.is-ui .is-rte-pop.rte-icon-options > div {
+  flex-direction: column;
+  width: 100%;
+  padding: 0;
+}
+#_cbhtml .is-rte-pop.rte-icon-options > div .div-icon-list,
+.is-ui .is-rte-pop.rte-icon-options > div .div-icon-list {
   width: 100%;
-  max-width: 300px;
   height: 100%;
-  border: none;
+  display: flex;
+  align-content: flex-start;
+  flex-wrap: wrap;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+#_cbhtml .is-rte-pop.rte-icon-options > div .div-icon-list button,
+.is-ui .is-rte-pop.rte-icon-options > div .div-icon-list button {
+  font-size: 16px;
+  width: 50px;
+  height: 40px;
+  outline-offset: -2px;
 }
 #_cbhtml .is-rte-pop.rte-icon-options.active,
 .is-ui .is-rte-pop.rte-icon-options.active {
@@ -1220,7 +1248,7 @@ button:focus-visible {
     height: 0;
   }
   to {
-    height: 240px;
+    height: 280px;
   }
 }
 #_cbhtml .is-rte-pop.rte-icon-options.deactive,
@@ -1229,12 +1257,54 @@ button:focus-visible {
 }
 @keyframes icon-slide-in {
   from {
-    height: 240px;
+    height: 280px;
   }
   to {
     height: 0;
   }
 }
+#_cbhtml .is-rte-pop.rte-fontfamily-options,
+.is-ui .is-rte-pop.rte-fontfamily-options {
+  width: 260px;
+}
+#_cbhtml .is-rte-pop.rte-fontfamily-options #inpRteFontSearch,
+.is-ui .is-rte-pop.rte-fontfamily-options #inpRteFontSearch {
+  height: 40px;
+  flex: none;
+  text-align: center;
+}
+#_cbhtml .is-rte-pop.rte-fontfamily-options > div,
+.is-ui .is-rte-pop.rte-fontfamily-options > div {
+  flex-direction: column;
+  width: 100%;
+  padding: 0;
+}
+#_cbhtml .is-rte-pop.rte-fontfamily-options > div .div-font-list,
+.is-ui .is-rte-pop.rte-fontfamily-options > div .div-font-list {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+#_cbhtml .is-rte-pop.rte-fontfamily-options > div .div-font-list button,
+.is-ui .is-rte-pop.rte-fontfamily-options > div .div-font-list button {
+  font-size: 16px;
+  width: 100%;
+  height: 40px;
+  outline-offset: -2px;
+  flex: none;
+}
+#_cbhtml .is-rte-pop.rte-fontfamily-options > div .div-font-list button img,
+.is-ui .is-rte-pop.rte-fontfamily-options > div .div-font-list button img {
+  height: 24px;
+  pointer-events: none;
+}
+#_cbhtml .is-rte-pop.rte-fontfamily-options > div .div-font-list button.hidden,
+.is-ui .is-rte-pop.rte-fontfamily-options > div .div-font-list button.hidden {
+  display: none;
+}
 #_cbhtml .is-rte-pop.rte-fontfamily-options iframe,
 .is-ui .is-rte-pop.rte-fontfamily-options iframe {
   margin: 1px 0 0;
@@ -1444,6 +1514,45 @@ button:focus-visible {
 .is-ui[toolbarleft] .is-rte-pop.rte-fontfamily-options {
   height: 260px;
 }
+#_cbhtml[toolbarleft] .is-rte-pop.rte-fontfamily-options #inpRteFontSearch,
+.is-ui[toolbarleft] .is-rte-pop.rte-fontfamily-options #inpRteFontSearch {
+  height: 40px;
+  flex: none;
+  text-align: center;
+}
+#_cbhtml[toolbarleft] .is-rte-pop.rte-fontfamily-options > div,
+.is-ui[toolbarleft] .is-rte-pop.rte-fontfamily-options > div {
+  flex-direction: column;
+  width: 100%;
+  height: 320px;
+  padding: 0;
+}
+#_cbhtml[toolbarleft] .is-rte-pop.rte-fontfamily-options > div .div-font-list,
+.is-ui[toolbarleft] .is-rte-pop.rte-fontfamily-options > div .div-font-list {
+  width: 100%;
+  height: 220px;
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+#_cbhtml[toolbarleft] .is-rte-pop.rte-fontfamily-options > div .div-font-list button,
+.is-ui[toolbarleft] .is-rte-pop.rte-fontfamily-options > div .div-font-list button {
+  font-size: 16px;
+  width: 100%;
+  height: 40px;
+  outline-offset: -2px;
+  flex: none;
+}
+#_cbhtml[toolbarleft] .is-rte-pop.rte-fontfamily-options > div .div-font-list button img,
+.is-ui[toolbarleft] .is-rte-pop.rte-fontfamily-options > div .div-font-list button img {
+  height: 24px;
+  pointer-events: none;
+}
+#_cbhtml[toolbarleft] .is-rte-pop.rte-fontfamily-options > div .div-font-list button.hidden,
+.is-ui[toolbarleft] .is-rte-pop.rte-fontfamily-options > div .div-font-list button.hidden {
+  display: none;
+}
 #_cbhtml[toolbarleft] .is-rte-pop.rte-fontfamily-options iframe,
 .is-ui[toolbarleft] .is-rte-pop.rte-fontfamily-options iframe {
   margin: 9px 0 9px 0;
@@ -1543,6 +1652,35 @@ button:focus-visible {
 .is-ui[toolbarleft] .is-rte-pop.rte-icon-options {
   height: 320px;
 }
+#_cbhtml[toolbarleft] .is-rte-pop.rte-icon-options #inpRteIconSearch,
+.is-ui[toolbarleft] .is-rte-pop.rte-icon-options #inpRteIconSearch {
+  height: 40px;
+  flex: none;
+}
+#_cbhtml[toolbarleft] .is-rte-pop.rte-icon-options > div,
+.is-ui[toolbarleft] .is-rte-pop.rte-icon-options > div {
+  flex-direction: column;
+  width: 100%;
+  height: 320px;
+  padding: 0;
+}
+#_cbhtml[toolbarleft] .is-rte-pop.rte-icon-options > div .div-icon-list,
+.is-ui[toolbarleft] .is-rte-pop.rte-icon-options > div .div-icon-list {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-content: flex-start;
+  flex-wrap: wrap;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+#_cbhtml[toolbarleft] .is-rte-pop.rte-icon-options > div .div-icon-list button,
+.is-ui[toolbarleft] .is-rte-pop.rte-icon-options > div .div-icon-list button {
+  font-size: 16px;
+  width: 50px;
+  height: 40px;
+  outline-offset: -2px;
+}
 #_cbhtml[toolbarleft] .is-rte-pop.rte-icon-options iframe,
 .is-ui[toolbarleft] .is-rte-pop.rte-icon-options iframe {
   margin: 9px 0 9px 0;
@@ -1699,6 +1837,45 @@ button:focus-visible {
 .is-ui[toolbarright] .is-rte-pop.rte-fontfamily-options {
   height: 260px;
 }
+#_cbhtml[toolbarright] .is-rte-pop.rte-fontfamily-options #inpRteFontSearch,
+.is-ui[toolbarright] .is-rte-pop.rte-fontfamily-options #inpRteFontSearch {
+  height: 40px;
+  flex: none;
+  text-align: center;
+}
+#_cbhtml[toolbarright] .is-rte-pop.rte-fontfamily-options > div,
+.is-ui[toolbarright] .is-rte-pop.rte-fontfamily-options > div {
+  flex-direction: column;
+  width: 100%;
+  height: 320px;
+  padding: 0;
+}
+#_cbhtml[toolbarright] .is-rte-pop.rte-fontfamily-options > div .div-font-list,
+.is-ui[toolbarright] .is-rte-pop.rte-fontfamily-options > div .div-font-list {
+  width: 100%;
+  height: 220px;
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+#_cbhtml[toolbarright] .is-rte-pop.rte-fontfamily-options > div .div-font-list button,
+.is-ui[toolbarright] .is-rte-pop.rte-fontfamily-options > div .div-font-list button {
+  font-size: 16px;
+  width: 100%;
+  height: 40px;
+  outline-offset: -2px;
+  flex: none;
+}
+#_cbhtml[toolbarright] .is-rte-pop.rte-fontfamily-options > div .div-font-list button img,
+.is-ui[toolbarright] .is-rte-pop.rte-fontfamily-options > div .div-font-list button img {
+  height: 24px;
+  pointer-events: none;
+}
+#_cbhtml[toolbarright] .is-rte-pop.rte-fontfamily-options > div .div-font-list button.hidden,
+.is-ui[toolbarright] .is-rte-pop.rte-fontfamily-options > div .div-font-list button.hidden {
+  display: none;
+}
 #_cbhtml[toolbarright] .is-rte-pop.rte-fontfamily-options iframe,
 .is-ui[toolbarright] .is-rte-pop.rte-fontfamily-options iframe {
   margin: 9px 0 9px 0;
@@ -1761,6 +1938,30 @@ button:focus-visible {
 .is-ui[toolbarright] .is-rte-pop.rte-icon-options {
   height: 320px;
 }
+#_cbhtml[toolbarright] .is-rte-pop.rte-icon-options > div,
+.is-ui[toolbarright] .is-rte-pop.rte-icon-options > div {
+  flex-direction: column;
+  width: 100%;
+  height: 320px;
+  padding: 0;
+}
+#_cbhtml[toolbarright] .is-rte-pop.rte-icon-options > div .div-icon-list,
+.is-ui[toolbarright] .is-rte-pop.rte-icon-options > div .div-icon-list {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-content: flex-start;
+  flex-wrap: wrap;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+#_cbhtml[toolbarright] .is-rte-pop.rte-icon-options > div .div-icon-list button,
+.is-ui[toolbarright] .is-rte-pop.rte-icon-options > div .div-icon-list button {
+  font-size: 16px;
+  width: 50px;
+  height: 40px;
+  outline-offset: -2px;
+}
 #_cbhtml[toolbarright] .is-rte-pop.rte-icon-options iframe,
 .is-ui[toolbarright] .is-rte-pop.rte-icon-options iframe {
   margin: 9px 0 9px 0;
@@ -1874,8 +2075,9 @@ button:focus-visible {
   font-weight: 300;
   outline: none;
 }
-#_cbhtml .is-modal .pickcolorclass, #_cbhtml .is-modal .imagesource, #_cbhtml .is-modal .imageadjust, #_cbhtml .is-modal .imageadjust2,
+#_cbhtml .is-modal .pickcolor, #_cbhtml .is-modal .pickcolorclass, #_cbhtml .is-modal .imagesource, #_cbhtml .is-modal .imageadjust, #_cbhtml .is-modal .imageadjust2,
 #_cbhtml .is-modal .audioselect, #_cbhtml .is-modal .imageselect, #_cbhtml .is-modal .mediaselect, #_cbhtml .is-modal .videoselect, #_cbhtml .is-modal .mediasource,
+.is-ui .is-modal .pickcolor,
 .is-ui .is-modal .pickcolorclass,
 .is-ui .is-modal .imagesource,
 .is-ui .is-modal .imageadjust,
@@ -1983,7 +2185,7 @@ button:focus-visible {
 .is-ui .is-modal.is-modal-content,
 .is-ui .is-modal .is-modal-content {
   background: #fff;
-  border: 1px solid rgba(212, 217, 226, 0.75);
+  border: 1px solid #e3e3e3;
   box-shadow: 6px 14px 20px 0px rgba(95, 95, 95, 0.08);
   border-radius: 5px;
   overflow: hidden;
@@ -1999,7 +2201,7 @@ button:focus-visible {
 #_cbhtml .is-modal:not(.is-modal-content) > div:not(.is-modal-overlay),
 .is-ui .is-modal:not(.is-modal-content) > div:not(.is-modal-overlay) {
   background: #fff;
-  border: 1px solid rgba(212, 217, 226, 0.75);
+  border: 1px solid #e3e3e3;
   box-shadow: 6px 14px 20px 0px rgba(95, 95, 95, 0.08);
   position: relative;
   width: 100%;
@@ -2072,12 +2274,13 @@ button:focus-visible {
 .is-ui .is-modal div.is-modal-footer button {
   margin-left: 2px;
 }
-#_cbhtml .is-modal.fileselect, #_cbhtml .is-modal.mediaselect, #_cbhtml .is-modal.imageselect, #_cbhtml .is-modal.videoselect, #_cbhtml .is-modal.otherselect, #_cbhtml .is-modal.pickcolorclass, #_cbhtml .is-modal.imagesource, #_cbhtml .is-modal.imageadjust, #_cbhtml .is-modal.imageadjust2, #_cbhtml .is-modal.audioselect, #_cbhtml .is-modal.mediasource,
+#_cbhtml .is-modal.fileselect, #_cbhtml .is-modal.mediaselect, #_cbhtml .is-modal.imageselect, #_cbhtml .is-modal.videoselect, #_cbhtml .is-modal.otherselect, #_cbhtml .is-modal.pickcolor, #_cbhtml .is-modal.pickcolorclass, #_cbhtml .is-modal.imagesource, #_cbhtml .is-modal.imageadjust, #_cbhtml .is-modal.imageadjust2, #_cbhtml .is-modal.audioselect, #_cbhtml .is-modal.mediasource,
 .is-ui .is-modal.fileselect,
 .is-ui .is-modal.mediaselect,
 .is-ui .is-modal.imageselect,
 .is-ui .is-modal.videoselect,
 .is-ui .is-modal.otherselect,
+.is-ui .is-modal.pickcolor,
 .is-ui .is-modal.pickcolorclass,
 .is-ui .is-modal.imagesource,
 .is-ui .is-modal.imageadjust,
@@ -2351,6 +2554,121 @@ button:focus-visible {
   background: rgba(255, 255, 255, 0.2);
   border: rgba(0, 0, 0, 0.09) 1px solid;
 }
+#_cbhtml .is-modal.editblock,
+.is-ui .is-modal.editblock {
+  z-index: 10002;
+  position: fixed;
+  overflow: hidden;
+  width: 300px;
+  height: auto;
+  top: calc(50vh - 400px);
+  left: auto;
+  right: 40px;
+  box-sizing: content-box;
+  flex-direction: row;
+  align-items: flex-start;
+}
+#_cbhtml .is-modal.editblock .is-modal-bar,
+.is-ui .is-modal.editblock .is-modal-bar {
+  line-height: 30px;
+  height: 30px;
+}
+#_cbhtml .is-modal.editblock .is-modal-bar .is-modal-close,
+.is-ui .is-modal.editblock .is-modal-bar .is-modal-close {
+  width: 20px;
+  height: 20px;
+  line-height: 20px;
+  font-size: 10px;
+}
+#_cbhtml .is-modal.editblock.active,
+.is-ui .is-modal.editblock.active {
+  display: flex;
+}
+#_cbhtml .is-modal.editblock > div:not(.is-draggable),
+.is-ui .is-modal.editblock > div:not(.is-draggable) {
+  width: 100%;
+  margin-top: 30px;
+  padding: 25px;
+  box-sizing: border-box;
+}
+#_cbhtml .is-modal.editblock .is-modal-overlay,
+.is-ui .is-modal.editblock .is-modal-overlay {
+  display: none !important;
+}
+#_cbhtml .is-modal.editblock button,
+.is-ui .is-modal.editblock button {
+  width: auto;
+  height: 35px;
+  font-size: 10px;
+  line-height: 1;
+  text-transform: uppercase;
+  padding: 1px 20px;
+  box-sizing: border-box;
+  border: none;
+  outline-offset: -2px;
+}
+#_cbhtml .is-modal.editblock button:focus,
+.is-ui .is-modal.editblock button:focus {
+  border-radius: 2px;
+}
+#_cbhtml .is-modal.editblock button.is-btn-color,
+.is-ui .is-modal.editblock button.is-btn-color {
+  width: 35px;
+  height: 35px;
+  padding: 0;
+  background: rgba(255, 255, 255, 0.2);
+  border: rgba(0, 0, 0, 0.09) 1px solid;
+}
+#_cbhtml .is-modal.editblock button span,
+.is-ui .is-modal.editblock button span {
+  margin-left: 5px;
+}
+#_cbhtml .is-modal.editblock button svg,
+.is-ui .is-modal.editblock button svg {
+  width: 12px;
+  height: 12px;
+  flex: none;
+}
+#_cbhtml .is-modal.editblock button.input-cell-bgimage,
+.is-ui .is-modal.editblock button.input-cell-bgimage {
+  margin-right: 1px;
+}
+#_cbhtml .is-modal.editblock button.input-cell-bgimage svg,
+.is-ui .is-modal.editblock button.input-cell-bgimage svg {
+  width: 14px;
+  height: 14px;
+}
+#_cbhtml .is-modal.editblock .asset-preview,
+.is-ui .is-modal.editblock .asset-preview {
+  max-width: 120px;
+  height: 100px;
+}
+#_cbhtml .is-modal.editblock .asset-preview img,
+.is-ui .is-modal.editblock .asset-preview img {
+  max-width: 100%;
+  max-height: 100%;
+}
+#_cbhtml .is-modal.editblock .div-content-textcolor,
+.is-ui .is-modal.editblock .div-content-textcolor {
+  display: flex;
+}
+#_cbhtml .is-modal.editblock .div-content-textcolor button,
+.is-ui .is-modal.editblock .div-content-textcolor button {
+  width: 40px;
+  border: transparent 1px solid;
+}
+#_cbhtml .is-modal.editblock .div-content-textcolor button[data-textcolor=dark],
+.is-ui .is-modal.editblock .div-content-textcolor button[data-textcolor=dark] {
+  width: auto;
+  background-color: #f7f7f7;
+  color: #111;
+}
+#_cbhtml .is-modal.editblock .div-content-textcolor button[data-textcolor=light],
+.is-ui .is-modal.editblock .div-content-textcolor button[data-textcolor=light] {
+  width: auto;
+  background-color: #333;
+  color: #f7f7f7;
+}
 #_cbhtml .is-modal.shortcuts div.is-modal-content,
 .is-ui .is-modal.shortcuts div.is-modal-content {
   max-width: 600px;
@@ -2382,6 +2700,70 @@ button:focus-visible {
 .is-ui .is-modal.pickcolor .is-modal-overlay {
   background: rgba(255, 255, 255, 0);
 }
+#_cbhtml .is-modal.snippetwindow,
+.is-ui .is-modal.snippetwindow {
+  z-index: 10002;
+  position: fixed;
+  overflow: hidden;
+  width: 228px;
+  height: 78vh;
+  min-height: 560px;
+  top: calc(50% - 42.5vh);
+  left: auto;
+  right: 40px;
+  box-sizing: content-box;
+  flex-direction: row;
+  align-items: flex-start;
+  border-radius: 6px;
+  box-shadow: 9px 14px 30px 1px rgba(0, 0, 0, 0.12);
+  background-color: #fff;
+}
+#_cbhtml .is-modal.snippetwindow.left,
+.is-ui .is-modal.snippetwindow.left {
+  right: auto;
+  left: 40px;
+}
+#_cbhtml .is-modal.snippetwindow #divSnippetWindow,
+.is-ui .is-modal.snippetwindow #divSnippetWindow {
+  height: 100%;
+  position: absolute;
+  top: 0;
+  border-top: transparent 20px solid;
+  box-sizing: border-box;
+  margin-top: 0;
+}
+#_cbhtml .is-modal.snippetwindow .is-modal-overlay,
+.is-ui .is-modal.snippetwindow .is-modal-overlay {
+  display: none !important;
+}
+#_cbhtml .is-modal.snippetwindow .is-modal-bar,
+.is-ui .is-modal.snippetwindow .is-modal-bar {
+  line-height: 30px;
+  height: 20px;
+  background-color: transparent;
+  transition: none !important;
+}
+#_cbhtml .is-modal.snippetwindow .is-modal-bar .is-modal-close,
+.is-ui .is-modal.snippetwindow .is-modal-bar .is-modal-close {
+  width: 20px;
+  height: 20px;
+  line-height: 20px;
+  font-size: 10px;
+  top: 0px;
+}
+#_cbhtml .is-modal.snippetwindow.active,
+.is-ui .is-modal.snippetwindow.active {
+  display: flex;
+}
+#_cbhtml .is-modal.snippetwindow > div:not(.is-draggable),
+.is-ui .is-modal.snippetwindow > div:not(.is-draggable) {
+  width: 100%;
+  margin-top: 20px;
+}
+#_cbhtml .is-modal.snippetwindow #divSnippetHandle,
+.is-ui .is-modal.snippetwindow #divSnippetHandle {
+  display: none !important;
+}
 #_cbhtml .is-modal.buttoneditor,
 .is-ui .is-modal.buttoneditor {
   z-index: 10002;
@@ -2935,6 +3317,19 @@ button:focus-visible {
   width: 50px;
   height: 43px;
 }
+#_cbhtml .is-modal.svgsettings div.is-modal-content,
+.is-ui .is-modal.svgsettings div.is-modal-content {
+  max-width: 550px;
+}
+#_cbhtml .is-modal.svgsettings div.is-modal-content #inpSvgCode,
+.is-ui .is-modal.svgsettings div.is-modal-content #inpSvgCode {
+  width: 100%;
+  height: 300px;
+  line-height: 1.4;
+  font-size: 16px;
+  font-family: "Courier New", monospace;
+  resize: none;
+}
 #_cbhtml .is-modal.audiolink div.is-modal-content,
 .is-ui .is-modal.audiolink div.is-modal-content {
   max-width: 550px;
@@ -3099,43 +3494,49 @@ button:focus-visible {
 .is-ui .is-tool.is-table-tool > button svg {
   fill: #121212;
 }
-#_cbhtml .is-tool.is-code-tool, #_cbhtml .is-tool.is-module-tool,
+#_cbhtml .is-tool.is-code-tool, #_cbhtml .is-tool.is-module-tool, #_cbhtml .is-tool.is-svg-tool,
 .is-ui .is-tool.is-code-tool,
-.is-ui .is-tool.is-module-tool {
+.is-ui .is-tool.is-module-tool,
+.is-ui .is-tool.is-svg-tool {
   border: none;
   background: none;
+  border-radius: 3px;
+  overflow: hidden;
 }
-#_cbhtml .is-tool.is-code-tool > button, #_cbhtml .is-tool.is-module-tool > button,
+#_cbhtml .is-tool.is-code-tool > button, #_cbhtml .is-tool.is-module-tool > button, #_cbhtml .is-tool.is-svg-tool > button,
 .is-ui .is-tool.is-code-tool > button,
-.is-ui .is-tool.is-module-tool > button {
-  width: 30px;
-  height: 30px;
+.is-ui .is-tool.is-module-tool > button,
+.is-ui .is-tool.is-svg-tool > button {
+  width: 35px !important;
+  height: 35px !important;
   background: rgba(240, 240, 240, 0.9);
 }
-#_cbhtml .is-tool.is-code-tool > button svg, #_cbhtml .is-tool.is-module-tool > button svg,
+#_cbhtml .is-tool.is-code-tool > button svg, #_cbhtml .is-tool.is-module-tool > button svg, #_cbhtml .is-tool.is-svg-tool > button svg,
 .is-ui .is-tool.is-code-tool > button svg,
-.is-ui .is-tool.is-module-tool > button svg {
+.is-ui .is-tool.is-module-tool > button svg,
+.is-ui .is-tool.is-svg-tool > button svg {
+  width: 14px !important;
+  height: 14px !important;
   fill: #121212;
 }
-#_cbhtml .is-tool#divLinkTool, #_cbhtml .is-tool#divButtonTool, #_cbhtml .is-tool#divSvgTool,
+#_cbhtml .is-tool#divLinkTool, #_cbhtml .is-tool#divButtonTool,
 .is-ui .is-tool#divLinkTool,
-.is-ui .is-tool#divButtonTool,
-.is-ui .is-tool#divSvgTool {
+.is-ui .is-tool#divButtonTool {
   background: rgba(243, 243, 243, 0.9);
   box-shadow: none;
+  border-radius: 3px;
+  overflow: hidden;
 }
-#_cbhtml .is-tool#divLinkTool button, #_cbhtml .is-tool#divButtonTool button, #_cbhtml .is-tool#divSvgTool button,
+#_cbhtml .is-tool#divLinkTool button, #_cbhtml .is-tool#divButtonTool button,
 .is-ui .is-tool#divLinkTool button,
-.is-ui .is-tool#divButtonTool button,
-.is-ui .is-tool#divSvgTool button {
+.is-ui .is-tool#divButtonTool button {
   width: 30px;
   height: 30px;
   background: transparent;
 }
-#_cbhtml .is-tool#divLinkTool button svg, #_cbhtml .is-tool#divButtonTool button svg, #_cbhtml .is-tool#divSvgTool button svg,
+#_cbhtml .is-tool#divLinkTool button svg, #_cbhtml .is-tool#divButtonTool button svg,
 .is-ui .is-tool#divLinkTool button svg,
-.is-ui .is-tool#divButtonTool button svg,
-.is-ui .is-tool#divSvgTool button svg {
+.is-ui .is-tool#divButtonTool button svg {
   fill: #121212;
 }
 #_cbhtml .dot,
@@ -3411,7 +3812,8 @@ button:focus-visible {
 }
 #_cbhtml select:focus,
 .is-ui select:focus {
-  outline-offset: 0;
+  outline: #3e93f7 2px solid;
+  outline-offset: -2px;
   box-shadow: none;
 }
 #_cbhtml input[type=text],
@@ -3461,6 +3863,7 @@ button:focus-visible {
   display: flex;
   align-items: center;
   line-height: 1;
+  cursor: pointer;
 }
 #_cbhtml label.label-checkbox input,
 .is-ui label.label-checkbox input {
@@ -3718,6 +4121,28 @@ button:focus-visible {
 .is-ui .is-tabs-more li.active {
   background: whitesmoke;
 }
+#_cbhtml .inp-snippets.custom-select,
+.is-ui .inp-snippets.custom-select {
+  width: 100%;
+}
+#_cbhtml .inp-snippets.custom-select .select-styled,
+.is-ui .inp-snippets.custom-select .select-styled {
+  border: none;
+  border-bottom: 1px solid #bababa38;
+  padding: 0 6px 0 14px;
+  outline-offset: -2px;
+  box-shadow: none;
+}
+#_cbhtml .inp-snippets.custom-select .select-options,
+.is-ui .inp-snippets.custom-select .select-options {
+  max-height: 300px;
+  top: 46px;
+}
+#_cbhtml .inp-snippets.custom-select .select-options li,
+.is-ui .inp-snippets.custom-select .select-options li {
+  font-size: 14px !important;
+  padding: 0 8px 0 14px;
+}
 #_cbhtml #divSnippetList,
 .is-ui #divSnippetList {
   right: -230px;
@@ -3795,7 +4220,7 @@ button:focus-visible {
   overflow-y: auto;
   overflow-x: hidden;
   text-align: center;
-  border-top: transparent 40px solid !important;
+  border-top: transparent 46px solid !important;
   outline: none;
 }
 #_cbhtml .is-design-list > div,
@@ -5602,3 +6027,196 @@ div[data-html] {
     transform: scale(0.62);
   }
 }
+.custom-select {
+  --cs-height: 46px;
+  --cs-border: 1px solid #ddd;
+  --cs-background: #fff;
+  --cs-hover-background: #f2f2f2;
+  --cs-selected-background: #eee;
+  position: relative;
+  display: inline-block;
+  font-size: 15px;
+  height: var(--cs-height);
+  width: 100%;
+}
+.custom-select .select-styled {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 6px 0 14px;
+  border: var(--cs-border);
+  cursor: pointer;
+  position: relative;
+  user-select: none;
+  box-sizing: border-box;
+  height: var(--cs-height);
+  overflow: hidden;
+  border-radius: 3px;
+  box-shadow: -2px 5px 10px -6px rgba(0, 0, 0, 0.08);
+  outline: none;
+}
+.custom-select .select-styled span {
+  display: flex;
+}
+.custom-select .select-styled span img {
+  height: 25px;
+  margin-top: 3px;
+}
+.custom-select .select-styled:focus-visible {
+  outline: #3e93f7 2px solid;
+  outline-offset: -1px;
+}
+.custom-select .select-styled > span:first-child {
+  position: absolute;
+  margin-right: 23px;
+}
+.custom-select .select-styled > span:nth-child(2) {
+  position: absolute;
+  height: 15px;
+  top: calc(50% - 7.5px);
+  right: 6px;
+  display: flex;
+}
+.custom-select .select-styled svg {
+  width: 15px;
+  height: 15px;
+}
+.custom-select .select-styled[aria-expanded=true] > span:nth-child(2) {
+  -webkit-transform: rotate(-180deg);
+  transform: rotate(-180deg);
+  top: calc(50% - 7.5px);
+}
+.custom-select input {
+  display: none;
+  width: 100%;
+  height: 40px;
+  border: var(--cs-border);
+  border-top: none;
+  padding: 0 3px 0 8px;
+  box-sizing: border-box;
+  margin: 0;
+  position: absolute;
+  top: var(--cs-height);
+  left: 0;
+  font-size: 15px;
+  z-index: 2;
+  outline-offset: 0;
+  background: var(--cs-background);
+}
+.custom-select input:focus {
+  outline: none;
+}
+.custom-select .select-options {
+  display: none;
+  position: absolute;
+  top: calc(var(--cs-height) + 1px);
+  left: 0;
+  border: var(--cs-border);
+  box-sizing: border-box;
+  border-top: none;
+  z-index: 1;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  background-color: var(--cs-background);
+  z-index: 1;
+  max-height: 200px;
+  overflow-y: auto;
+}
+.custom-select.has-search .select-options {
+  top: calc(var(--cs-height) + 40px);
+}
+.custom-select .select-options.active {
+  display: block;
+}
+.custom-select .select-options li {
+  padding: 0 8px 0 14px;
+  cursor: pointer;
+  white-space: nowrap;
+  min-height: 36px;
+  align-items: center;
+}
+.custom-select .select-options li img {
+  margin: 8px 0;
+  height: 25px;
+}
+.custom-select .select-options li:hover {
+  background-color: var(--cs-hover-background);
+}
+.custom-select .select-options li.selected {
+  background-color: var(--cs-selected-background);
+}
+
+/* Switch */
+.is-ui .switch, .builder-ui .switch {
+  position: relative;
+  display: inline-block;
+  width: 60px;
+  height: 34px;
+}
+.is-ui .switch input, .builder-ui .switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+.is-ui .switch .slider, .builder-ui .switch .slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ccc;
+  -webkit-transition: 0.4s;
+  transition: 0.4s;
+  border-radius: 34px;
+}
+.is-ui .switch .slider:before, .builder-ui .switch .slider:before {
+  position: absolute;
+  content: "";
+  height: 26px;
+  width: 26px;
+  left: 4px;
+  bottom: 4px;
+  background-color: #fff;
+  -webkit-transition: 0.4s;
+  transition: 0.4s;
+  border-radius: 50%;
+}
+.is-ui .switch input:checked + .slider, .builder-ui .switch input:checked + .slider {
+  background-color: #0e75de;
+  border-radius: 34px;
+}
+.is-ui .switch input:focus + .slider, .builder-ui .switch input:focus + .slider {
+  box-shadow: 0 0 1px #0e75de;
+}
+.is-ui .switch input:checked + .slider:before, .builder-ui .switch input:checked + .slider:before {
+  -webkit-transform: translateX(26px);
+  -ms-transform: translateX(26px);
+  transform: translateX(26px);
+}
+
+.dark .is-ui .switch .slider,
+.dark .builder-ui .switch .slider {
+  background-color: #7c7c7c;
+}
+.dark .is-ui .switch .slider:before,
+.dark .builder-ui .switch .slider:before {
+  background-color: rgba(255, 255, 255, 0.82);
+}
+.dark .is-ui .switch input:checked + .slider,
+.dark .builder-ui .switch input:checked + .slider {
+  background-color: #0e75de;
+}
+.dark .is-ui .switch input:focus + .slider,
+.dark .builder-ui .switch input:focus + .slider {
+  box-shadow: 0 0 1px #0e75de;
+}
+
+.dark .div-font-list > button img,
+.colored-dark .div-font-list > button img,
+.colored .div-font-list > button img {
+  mix-blend-mode: screen;
+  filter: invert(1);
+}