@import 'base/global';
@import 'base/common';
@import 'base/colors';
@import 'inc/tableFixerSettings';

html {
  overflow-y: hidden;
}

body > img {
  position: absolute;
  z-index: 1000001;
}

.wptb-admin-container {
  background: #fff;
  color: var(--wptb-plugin-theme-text-color-main);
  z-index: 100000;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  min-width: 0;
  margin: 0 !important;
  overflow-y: auto;
}

.wptb-container {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

.wptb-container * {
  box-sizing: border-box;
}

/**
* Header Section
*/

.wptb-builder-header {
  position: sticky !important;
  top: 0;
  z-index: 10;
}

.wptb-header {
  width: 100%;
  background-color: var(--wptb-plugin-theme-color-light);
  border-bottom: 1px solid var(--wptb-plugin-theme-sidebar-bg);
  text-align: center;
  display: grid;
  grid-auto-flow: row;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "table-name buttons close";
  align-items: center;
  justify-content: center;
  font-size: var(--wptb-plugin-theme-header-font-size-base);
  position: relative;
  z-index: 10;
}

.wptb-left-panel[data-wptb-panel-location="right"] + .wptb-builder-panel .wptb-header {
  grid-template-areas: "close buttons table-name" !important;
  grid-template-columns: auto 1fr 1fr !important;
}

.wptb-header-buttons-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  grid-area: buttons;
  height: 100%;
}

.wptb-header-close {
  font-size: 30px;
  width: 30px;
  height: 30px;
  text-decoration: none;
  color: var(--wptb-plugin-gray-500);
}

.wptb-logo {
  padding-left: 30px;
  float: left;
  margin-top: 17px;
}

.wptb-right {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  height: 100%;
}

.wptb-left-panel[data-wptb-panel-location="right"] + .wptb-builder-panel .wptb-right {
  flex-direction: row-reverse !important;
}

.wptb-right .wptb-settings-section-item {
  margin: 0 !important;
}

.wptb-plugin-width-full {
  width: 100% !important;
}

.wptb-plugin-height-full {
  height: 100%;
}

#wptb-messaging-area {
  align-self: center;
  /*margin: 0 auto;*/
  /*display: inline-block;*/
  /*margin-top: 15px;*/
  /*margin-right: 15px;*/
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100px;
  pointer-events: none;
}

#wptb-messaging-area .wptb-message {
  border-radius: 4px;
  max-width: 410px;
  padding: 20px;
  margin: auto;
}

#wptb-messaging-area .wptb-success {
  color: green;
  background-color: lightgreen;
  font-size: 15px;
}

#wptb-messaging-area .wptb-error {
  color: red;
  background-color: rgb(255, 213, 213);
  font-size: 15px;
}

.wptb-panel-sub-container-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  border-left: 1px solid var(--wptb-plugin-theme-sidebar-bg);
  border-right: 1px solid var(--wptb-plugin-theme-sidebar-bg);
}

.wptb-panel-night-mode-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  border-left: 1px solid var(--wptb-plugin-theme-sidebar-bg);
  padding: 10px;
}

.wptb-panel-night-mode-icon-container {
  width: 32px;
  height: 32px;
  cursor: pointer;
}

[data-wptb-mode='light'] .wptb-panel-night-mode-icon-container {
  color: var(--wptb-plugin-gold);
}

[data-wptb-mode='dark'] .wptb-panel-night-mode-icon-container {
  color: var(--wptb-plugin-blue-400);
}

.wptb-header .wptb-settings-section-item {
  padding: 15px !important;
}

.wptb-undo-redo-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  padding: 0 20px;
  border-left: 1px solid var(--wptb-plugin-theme-sidebar-bg);
}

.wptb-undo,
.wptb-redo {
  display: inline-block;
  cursor: pointer;
}

.wptb-undo {
  margin-right: 7px;
}

.wptb-undo:hover,
.wptb-redo:hover {
}

.wptb-undoredo-disabled {
  cursor: default;
  opacity: .4;
}

.wptb-embed-btn, .wptb-preview-btn, .wptb-save-btn {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
}

.wptb-embed,
.wptb-preview,
.wptb-save {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.wptb-save {
  position: relative;
}

#wptb_builder[data-wptb-saving] .wptb-save-btn {
  opacity: 0 !important;
}

.wptb-busy {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  transition: all 0.2s ease-out;
}

.wptb-busy .wptb-busy-circle {
  width: 10px;
  height: 10px;
  border-radius: 100%;
  background-color: var(--wptb-plugin-gray-700);
  animation: wptb-beat var(--wptb-busy-duration) ease-out forwards infinite;
}

.wptb-busy-circle:nth-of-type(2) {
  animation-delay: calc(var(--wptb-busy-duration) / 3);
}

.wptb-busy-circle:nth-of-type(3) {
  animation-delay: calc(var(--wptb-busy-duration) / 1.5);
}

@keyframes wptb-beat {
  0% {
    transform: scale(1);
  }
  15% {
    transform: scale(1.5);
  }
  30% {
    transform: scale(1);
  }
  100% {
    transform: scale(1);
  }
}

#wptb_builder[data-wptb-saving] .wptb-busy {
  opacity: 1;
  pointer-events: all;
  cursor: not-allowed;
}

.wptb-button-grey {
  background-color: var(--wptb-plugin-white);
  /*border: 1px solid #ccc;*/
  /*font-size: 16px;*/
  /*font-weight: 500;*/
  text-transform: uppercase;
  /*display: inline-block;*/
  /*padding: 16px;*/
  text-decoration: none;
  color: inherit;
}

.wptb-button-grey:hover {
  color: inherit;
}

.wptb-button-grey.wptb-button-disable {
  cursor: not-allowed;
  color: #CBD5E0 !important;
}

.wptb-save-btn {
  color: inherit;
  opacity: 1;
  transition: all 0.2s ease-out;
}

.wptb-save-btn.wptb-save-disabled {
  cursor: not-allowed;
  color: #CBD5E0 !important;
}

.wptb-save-btn.wptb-save-disabled:hover {
  text-decoration: none;
}

.wptb-close {
  background-color: var(--wptb-plugin-white);
  border-left: 1px solid var(--wptb-plugin-gray-300);
}

.wptb-close:hover {
  background: var(--wptb-plugin-gray-300);
}

.wptb-close a {
  text-decoration: none;
}

.wptb-popup-dark-area {
  position: fixed;
  width: 100%;
  height: 100%;
  visibility: hidden;
  top: 0;
  left: 0;
  z-index: 1000;
  background-color: slategray;
  opacity: 0;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
}

.wptb-popup-window-modal.wptb-popup-show ~ .wptb-popup-dark-area {
  visibility: visible;
  opacity: .6;
}

.wptb-popup-window-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 50%;
  max-width: 630px;
  min-width: 300px;
  height: auto;
  z-index: 2000;
  visibility: hidden;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}

.wptb-popup-window-modal.wptb-popup-show {
  visibility: visible;
}

.wptb-popup-box {
  -webkit-transform: scale(0.7);
  -moz-transform: scale(0.7);
  -ms-transform: scale(0.7);
  transform: scale(0.7);
  opacity: 0;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
  border-radius: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  padding: 30px;
  background-color: white;
}

.wptb-popup-window-modal.wptb-popup-show .wptb-popup-box {
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  opacity: 1;
}

.wptb-popup-window-close-icon {
  height: 20px;
  width: 20px;
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
  opacity: .6;
  text-align: center;
  font-size: 27px !important;
  line-height: 14px !important;
  display: none;
  z-index: 1;
}

.wptb-popup-content p {
  font-size: 15px;
  text-align: center;
}

#wptb-embed-shortcode {
  width: 100%;
  text-align: center;
  font-size: 24px;
  display: block;
  border: 1px solid #d6d6d6;
  padding: 10px;
  box-shadow: none;
  margin: 20px auto 0 auto;
}

.wptb-edit-bar ul {
  display: flex;
  display: -webkit-flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.wptb-edit-bar {
  border-radius: 2px;
  display: none;
  padding: .3em .4em 0em .4em;
  position: relative;
  width: auto;
  z-index: 10;
  background: none;
  max-width: 870px;
  margin: auto;
  clear: both;
}

.wptb-edit-bar.visible {
  display: block;
}

.wptb-edit-bar ul li {
  height: auto;
  margin: 0;
  padding: 0;
}

.wptb-table_change_button {
  cursor: pointer;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  height: 41px;
  background: #fafbfc;
  font-size: 13px;
  color: #37454c;
  border-radius: 3px;
  border: 1px solid #a4a4a4;
  padding-left: 12px;
  padding-right: 12px;
  position: relative;
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: .02em;
  font-weight: bolder;
  text-align: center;
  margin-top: 0;
  margin-right: 1em;
  line-height: 2.4em;
  margin-bottom: 8px;
}

.wptb-management.wptb-bar.wptb-edit-bar.visible button.visible:hover {
  color: #4fbe31;
  -webkit-transition: all .1s ease-out;
  -o-transition: all .1s ease-out;
  transition: all .1s ease-out;
}

#wptb-delete-column,
#wptb-delete-row {
  background-color: #eb4c63;
}

#wptb-left-scroll-panel-curtain .wptb-table-edit-mode-close {
  margin: auto;
  display: block;
}

.wptb-table-edit-mode-close {
  background: #329d3f;
  color: #fff;
}

.wptb-edit-bar svg {
  cursor: pointer;
}

.wptb-edit-bar svg * {
  fill: rgba(0, 0, 0, 0) !important;
  stroke: #fff !important;
}


/**
* Left Panel
*/

.wptb-left-panel {
  position: fixed;
  height: 100%;
  box-sizing: border-box;
  background-color: var(--wptb-plugin-theme-sidebar-bg);
  -webkit-transition: all 0.2s ease-out, right 0.2s ease-out;
  -o-transition: all 0.2s ease-out, right 0.2s ease-out;
  transition: all 0.2s ease-out, right 0.2s ease-out;
  box-shadow: 0 0 5px 3px rgba(0, 0, 0, .2);
  z-index: 100001;
  font-size: var(--wptb-plugin-theme-side-bar-font-size-base);
}

.wptb-left-panel[data-wptb-panel-location="left"] {
  left: 0;
}

.wptb-left-panel[data-wptb-panel-location="right"] {
  right: 0;
}

.collapsed .wptb-left-panel[data-wptb-panel-location='left'] {
  transform: translateX(calc(-100% + var(--wptb-plugin-left-panel-constant)));
}

.collapsed .wptb-left-panel[data-wptb-panel-location='right'] {
  transform: translateX(calc(100% - var(--wptb-plugin-left-panel-constant)));
}

.collapsed .wptb-left-panel .wptb-left-panel-sidebar-content {
  opacity: 0;
}

.collapsed .wptb-left-panel .wptb-panel-tabs {
  opacity: 0;
}

.wptb-left-scroll-panel {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}

#wptb-left-scroll-panel-curtain,
#wptb-left-scroll-panel-cell-settings {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background-color: var(--wptb-plugin-theme-sidebar-bg);
  padding: 20px;
  display: none;
}

#wptb-left-scroll-panel-cell-settings {
  padding: 0px;
}

#wptb-left-scroll-panel-curtain.visible {
  display: block;
}

#wptb-left-scroll-panel-cell-settings.visible {
  display: block;
}

.wptb-panel-left {
  height: 100%;
  width: var(--wptb-plugin-sidebar-size-full);
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  grid-template-columns: 1fr;
  grid-auto-flow: row;
  transition: width .2s ease-out;
  grid-template-areas: "brand" "sidebar-tabs" "sidebar-content" "sidebar-footer";
}

.wptb-left-panel-sidebar-content {
  grid-area: sidebar-content;
  overflow: auto;
  transition: all 0.2s ease-out;
}

.wptb-panel-drawer-toggle {
  background-color: var(--wptb-plugin-theme-sidebar-bg);
  height: 50px;
  width: 25px;
  position: absolute;
  top: calc(50% - 25px);
  left: calc(100%);
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  border-radius: 0px 5px 5px 0;
  box-shadow: 3px 1px 5px rgba(0, 0, 0, .2);
}

.wptb-panel-drawer-icon::after {
  content: "\f341";
}

.collapsed .wptb-panel-drawer-icon::after {
  content: "\f345";
}


.wptb-panel-brand {
  grid-area: brand;
  background-color: var(--wptb-plugin-logo-color);
  color: var(--wptb-plugin-white);
  padding: 25px 0;
  font-size: 170%;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: "brand-position";
  text-align: center;
  height: 61px;
}

.wptb-brand-name {
  grid-area: brand-position
}

.wptb-brand-logo {
  grid-area: brand-position;
  display: none;
}

.wptb-panel-tabs {
  grid-area: sidebar-tabs;
  text-align: center;
  justify-content: stretch;
  transition: all 0.2s ease-out;
}

.wptb-panel-tabs div {
  width: 100%;
  margin: 0 !important;
  font-size: 90%;
  padding: 10px !important;
}

.wptb-left-panel-extend {
  position: absolute;
  top: 50%;
  left: 100%;
  margin-top: -55px;
  overflow: hidden;
  width: 18px;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  height: 40px;
  background-color: #f0f3f3;
  -webkit-box-shadow: 1px 0 5px 0 rgba(25, 31, 40, 0.2);
  box-shadow: 1px 0 5px 0 rgba(25, 31, 40, 0.2);
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  font-size: 12px;
  color: #353638;
  z-index: -1;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  border-top: 1px solid #ccc;
}

.wptb-left-panel-extend svg {
  display: inline-block;
  width: 1em;
  height: 1em;
  line-height: 1em;
  vertical-align: middle;
  stroke-width: 0;
  stroke: currentColor;
  fill: currentColor;
}

.wptb-container.collapsed .wptb-left-panel .wptb-left-panel-extend svg {
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}


/**
* Settings Section
*/

.wptb-settings-section p {
  font-size: 16px;
  margin: 0 0 10px 0;
}

.wptb-input-px {
  right: 35%;
  top: 0px;
  position: absolute;
  margin-top: 7px;
}

.wptb-settings-dropdown {
  font-size: 16px;
  padding: 16px 20px 16px 20px;
  position: relative;
  background-color: #fff;
  color: #186cba;
  border-top: .5px solid #ccc;
  border-bottom: .5px solid #ccc;
}

.wptb-panel-table-empty-message {
  padding: 0 20px;
  text-align: center;
  font-size: 80%;
  font-style: italic;
}

.wptb-settings-items,
.wptb-cell-management {
  /*margin: 0px 1px;*/
  transition: 1s 0s ease;
}

.wptb-cell-management {
  display: none;
}

.wptb-settings-items.visible,
#wptb-inner-border-settings.visible,
.wptb-cell-management.visible {
  display: block !important;
  opacity: 1;
}

.wptb-settings-item-title {
  font-size: 14px !important;
  margin: 0 !important;
  /*font-weight: 500;*/
  margin: 0;
}

.wptb-settings-item-header {
  font-size: 14px;
  /*font-weight: 500;*/
  line-height: 14px;
  padding: 14px 0 14px 15px;
  position: relative;
  /*border: 1px solid #ddd;*/
  background: var(--wptb-plugin-gray-100);
  /*margin-top: 5px;*/
  /*margin-bottom: -10px;*/
}

.wptb-settings-item-header-include-right {
  font-size: 14px;
  line-height: 14px;
  padding: 14px 10px 14px 10px;
  position: relative;
  background: var(--wptb-plugin-gray-100);
}

.wptb-settings-row {
  box-sizing: border-box !important;
  display: flex;
  flex: 0 1 auto;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  /*padding-bottom: 25px;*/
  padding-right: 0 !important;
}

.wptb-settings-row label {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.wptb-settings-middle-xs {
  align-items: center;
  background: var(--wptb-plugin-gray-100);
  /*padding: 10px 10px 20px 10px;*/
  padding: 15px !important;
  /*margin: 0px 0 6px 0;*/
  border-bottom: 1px solid #e5dfdf;
  /*border-radius: 2px;*/
}

.wptb-settings-middle-xs * {
  font-size: 14px !important;
}

.wptb-settings-col-xs-12 {
  flex-basis: 100%;
  max-width: 100%;
}

.wptb-settings-col-xs-8 {
  flex-basis: 66.66666667%;
  max-width: 66.66666667%;
}

.wptb-settings-col-xs-4 {
  flex-basis: 33.33333333%;
  max-width: 33.33333333%;
  position: relative;
}

.wptb-number-input {
  max-width: 75px;
  width: 100%;
  margin: 3px 10px;
}

input[type="number"] {
  height: 28px !important;
  line-height: 1;
  padding: 3px 5px !important;
}

input[type=range]::-moz-focus-inner {
  border: 0;
}

input[type=range]::-moz-focus-outer {
  border: none;
  outline: none;
}

input[type=range]:focus {
  outline: 0;
}

input[type="range"] {
  -webkit-appearance: none;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
  width: 100%;
  height: 8px;
  margin: 0;
  border: none;
  padding: 1px 2px;
  border-radius: 14px;
  background: #cccccc;
  outline: none;
  /* no focus outline */
}

input[type="range"]::-moz-range-track {
  border: inherit;
  background: #cccccc;
}

input[type="range"]::-ms-track {
  border: inherit;
  color: transparent;
  /* don't drawn vertical reference line */
  background: #cccccc;
}

input[type="range"]::-ms-fill-lower,
input[type="range"]::-ms-fill-upper {
  background: #cccccc;
}

input[type="range"]::-ms-tooltip {
  display: none;
}

input[type=range]::-webkit-slider-thumb:before {
  content: "";
  position: absolute;
  left: -3000px;
  right: 100%;
  top: 50%;
  height: 6px;
  padding: 0;
  background: #1d9b2a;
  transform: translate(0, -50%);
}

input[type=range]::-moz-range-progress {
  background-color: #3B7EC0;
  height: 6px;
}


/* thumb */

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border: 1px solid #3B7EC0;
  border-radius: 50%;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #ffffff));
  /* android <= 2.2 */
  background-image: -webkit-linear-gradient(top, #ffffff 0, #ffffff 100%);
  /* older mobile safari and android > 2.2 */
;
  background-image: linear-gradient(to bottom, #ffffff 0, #ffffff 100%);
  /* W3C */
}

input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border: 1px solid #3B7EC0;
  border-radius: 50%;
  background-image: linear-gradient(to bottom, #ffffff 0, #ffffff 100%);
  /* W3C */
}

input[type="range"]::-ms-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid #3B7EC0;
  background-image: linear-gradient(to bottom, #ffffff 0, #ffffff 100%);
  /* W3C */
}

.wptb-toggle {
  display: inline-block;
  width: 95%;
  /*padding: 25px 0 10px 0;*/
}

.wptb-toggle input {
  display: none;
}

.wptb-toggle input:checked + i::after {
  -webkit-transform: translateX(20px);
  transform: translateX(20px);
}

.wptb-toggle input:checked + i {
  background: #3B7EC0;
}

.wptb-toggle i {
  float: right;
  padding: 2px;
  width: 40px;
  height: 20px;
  border-radius: 13px;
  vertical-align: middle;
  transition: .25s .09s;
  position: relative;
  background: #d8d9db;
  box-sizing: initial;
}

.wptb-toggle i::after {
  content: " ";
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  position: absolute;
  left: 2px;
  transition: .25s;
}

.wptb-toggle.wptb-toggle2 input:checked + i::after,
.wptb-toggle.wptb-size-fixed-auto input:checked + i::after {
  -webkit-transform: translateX(50px);
  transform: translateX(50px);
}

.wptb-toggle.wptb-toggle2 i,
.wptb-toggle.wptb-size-fixed-auto i {
  float: left;
  width: 100px;
  border-radius: 5px;
  height: 25px;
}

.wptb-toggle.wptb-toggle2 i:after,
.wptb-toggle.wptb-size-fixed-auto i:after {
  width: 50px;
  height: 25px;
  border-radius: 5px;
  -webkit-transform: translateX(0px);
  transform: translateX(0px);
}

.wptb-checkbox {
  display: block;
  user-select: none;
  padding-top: 3px;
  padding-bottom: 3px;
}

.wptb-checkbox span {
  vertical-align: middle;
}

.wptb-checkbox input[type="checkbox"] {
  opacity: 0;
  height: 0;
  width: 0;
  display: none;
}

.wptb-checkbox-checkmark {
  height: 25px;
  width: 25px;
  background-color: #d8d9db;
  display: inline-block;
  position: relative;
  border-radius: 3px;
  margin-left: 5px;
}

.wptb-checkbox:hover input[type="checkbox"] ~ .wptb-checkbox-checkmark {
  background-color: #6EA4D8;
}

.wptb-checkbox input[type="checkbox"]:checked ~ .wptb-checkbox-checkmark {
  background-color: #3B7EC0;
}

.wptb-checkbox-checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

.wptb-checkbox input[type="checkbox"]:checked ~ .wptb-checkbox-checkmark:after {
  display: block;
}

.wptb-checkbox .wptb-checkbox-checkmark:after {
  left: 10px;
  top: 7px;
  width: 6px;
  height: 11px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.wptb-column-fixed,
.wptb-column-auto {
  position: absolute;
  font-size: 15px;
  width: 50%;
  height: 100%;
  text-align: center;
  line-height: 25px;
}

.wptb-column-fixed {
  color: #d8d9db;
}

.wptb-column-auto {
  color: #3B7EC0;
  right: 0;
}


/**
* Element Section
*/

.wptb-elements-section {
  /*height: auto;*/
  grid-area: sidebar-content;
}

#element-options-group {
  grid-area: sidebar-content;
  padding-top: 20px;
}

.wptb-settings-section {
  grid-area: sidebar-content;
}

.wptb-responsive-section {
  grid-area: sidebar-content;
}

[data-wptb-section] {
  padding-top: 20px;
  animation: wptb-basic-appear 0.2s ease-out;
}

.wptb-tabs {
  width: 100%;
  margin: 0;
  padding: 0;
  background: #ffffff;
  border-bottom: .5px solid #ccc;
  max-width: 349px;
  z-index: 10;
}

ul.wptb-tabs {
  list-style: none;
}

.wptb-tabs li {
  float: left;
  width: 49.3%;
  margin: 0;
}

.wptb-tabs li:last-of-type {
  float: right;
}

.wptb-tabs li a {
  display: block;
  text-align: center;
  padding: 18px 10px;
  font-size: 16px;
  color: #186cba;
  text-decoration: none;
}

.wptb-tabs li a:hover {
  color: #186cba;
  text-decoration: none;
}

.wptb-tabs li a:focus {
  -webkit-box-shadow: none;
  box-shadow: none;
}

.wptb-tabs li .active,
.wptb-tabs li .active:hover {
  color: #186cba;
}


.wptb-tabs #wptb-add-elements .active {
  background: #fff;
}

.wptb-tabs #element-options .active {
  background: #fff;
}


/**
* Tabs Content
*/

.wptb-tab-content {
  padding: 0;
}

.wptb-panel-toggle-group {
  background-color: var(--wptb-plugin-theme-color-light);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  margin: 20px 0;
}

.wptb-panel-toggle {
  background-color: var(--wptb-plugin-theme-color-light);
  padding: 10px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  border-bottom: 3px solid var(--wptb-plugin-theme-sidebar-bg);
  cursor: pointer;
}

.wptb-element-options .wptb-panel-toggle {
  cursor: pointer;
}

.wptb-panel-toggle .header {
  text-transform: uppercase;
  font-size: 90%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.wptb-panel-toggle .header .wptb-panel-toggle-group-header-icon {
  width: 17px;
  margin-right: 7px;
  color: var(--wptb-plugin-logo-color);
}

.wptb-panel-toggle .header .wptb-panel-toggle-group-header-icon:empty {
  display: none;
}

.wptb-panel-toggle .header .wptb-panel-toggle-group-header-icon svg {
  fill: currentColor;
}

.header .wptb-back-button {
  margin-right: 10px;
}

.wptb-panel-toggle .toggle-icon {
  cursor: pointer;
}

.wptb-panel-toggle .toggle-icon::after {
  content: "\f343";
}

.wptb-panel-toggle-content .wptb-panel-toggle .toggle-icon::after {
  content: "\f347";
}

.wptb-panel-toggle-target {
  background-color: var(--wptb-plugin-gray-100);
  padding: 20px 10px;
}

.wptb-panel-section-toggle-target {
  background-color: var(--wptb-plugin-gray-100);
}

.wptb-panel-elements-inner-wrapper {
  display: grid;
  grid-auto-flow: row;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
  color: var(--wptb-plugin-theme-text-color-main);
  font-size: 80%;
}

.wptb-section-group-tabbed {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: "header" "tabButtons" "controls";
  grid-auto-flow: row;
  grid-template-rows: auto;
}

.wptb-section-group-tabbed-header {
  grid-area: header;
  justify-content: center !important;
}

.wptb-section-group-tabbed-tabs-buttons {
  grid-area: tabButtons;
  display: flex;
  flex-direction: row;
  background-color: var(--wptb-plugin-theme-color-light);
  text-align: center;
  justify-content: stretch;
  border-bottom: 1px solid #E5DFDF;
}

.wptb-section-group-tabbed-tabs-buttons div {
  width: 100%;
  margin: 0 !important;
  font-size: 90%;
  padding: 7px !important;
}

.wptb-section-group-tab-content {
  grid-area: controls;
  /*animation: wptb-basic-appear 0.2s ease-out;*/
  transition: opacity 0.2s ease-out;
}

.wptb-plugin-non-visible {
  /*display: none !important;*/
  height: 0;
  opacity: 0;
  pointer-events: none;
  transition: none !important;
}

.wptb-plugin-non-visible div {
  height: 0;
}

/**
* Elements
*/


.wptb-elements-container {
  width: 100%;
  max-height: inherit;
  /*display: table;*/
  padding: 0 0 60px 0;
  background-color: inherit;
}

.wptb-element {
  position: relative;
  background: var(--wptb-plugin-theme-color-light);
  /*font-size: 15px;*/
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  height: 100px;
  text-align: center;
  border-radius: 5px;
  border: 2px solid var(--wptb-plugin-gray-400);
  transition: all .25s;
  cursor: move;
}

.wptb-element:nth-child(odd) {
  /*width: 47.5%;*/
  /*float: left;*/
  /*margin: 6px 0 -4px 6px;*/
}

.wptb-element:nth-child(even) {
  /*width: 47.5%;*/
  /*float: right;*/
  /*margin: 6px 5px -4px 0;*/
}

.wptb-element p {
  margin: 0;
}

.wptb-element:hover {
  box-shadow: 3px 3px 2px 0.5px rgba(0, 0, 0, 0.2);
}

.wptb-element svg {
  fill: var(--wptb-plugin-theme-text-color-main) !important;
}

.wptb-element-draggable-icon {
  position: absolute;
  top: 0;
  right: 0;
  color: var(--wptb-plugin-gray-500) !important;
}

.left {
  width: 47.5%;
  float: left;
  margin: 6px 0 -4px 6px;
}

.right {
  width: 47.5%;
  float: right;
  margin: 6px 5px -4px 0;
}


/**
* Builder Panel
*/

.wptb-builder-panel {
  display: flex;
  flex-direction: column;
  position: relative;
  /*left: var(--wptb-plugin-sidebar-size-full);*/
  min-height: 100%;
  height: 100%;
  -webkit-transition: all 0.2s ease-out, right 0.2s ease-out;
  -o-transition: all 0.2s ease-out, right 0.2s ease-out;
  transition: all 0.2s ease-out, right 0.2s ease-out;
  width: calc(100% - var(--wptb-plugin-sidebar-size-full));
  text-align: center;
  z-index: 100000;
}

[data-wptb-night-mode="true"] .wptb-builder-panel {
  background-color: var(--wptb-plugin-gray-500);
}

.wptb-left-panel[data-wptb-panel-location="left"] + .wptb-builder-panel {
  left: var(--wptb-plugin-sidebar-size-full);
}

.wptb-left-panel[data-wptb-panel-location="right"] + .wptb-builder-panel {
  left: 0;
}


.collapsed .wptb-left-panel[data-wptb-panel-location="left"] + .wptb-builder-panel {
  left: calc(0px + var(--wptb-plugin-left-panel-constant)) !important;
  width: calc(100% - var(--wptb-plugin-left-panel-constant)) !important;
}


.collapsed .wptb-left-panel[data-wptb-panel-location="right"] + .wptb-builder-panel {
  right: calc(0px - var(--wptb-plugin-left-panel-constant)) !important;
  width: calc(100% - var(--wptb-plugin-left-panel-constant)) !important;
}

/*.collapsed .wptb-builder-panel {*/
/*    left: calc(0px + var(--wptb-plugin-left-panel-constant)) !important;*/
/*    width: calc(100% - var(--wptb-plugin-left-panel-constant)) !important;*/
/*}*/

/**
* Table name Setup
*/

.wptb-name-setup {
  /*justify-content: center;*/
  text-align: start;
  margin: 0 20px;
  grid-area: table-name;
}

.wptb-left-panel[data-wptb-panel-location="right"] + .wptb-builder-panel .wptb-name-setup {
  text-align: end !important;
}

.wptb-left-panel[data-wptb-panel-location="right"] + .wptb-builder-panel .wptb-name-setup input {
  text-align: end !important;
}

.wptb-plugin-header-close {
  grid-area: close;
}

#wptb-setup-name {
  height: 50px;
  box-shadow: none;
  border: 1px solid var(--wptb-plugin-gray-300);
  font-size: 100%;
  width: 420px;
  padding: 0 20px;
}

.wptb-messaging {
  color: white;
  height: 0;
  margin: 0 auto;
  padding: 5px;
  transition: all 1s 0s;
  width: 90%;
  text-align: initial;
}

.wptb-messaging.wptb-success {
  background: #4caf50;
  background: -moz-linear-gradient(45deg, #4caf50 0%, #8bc34a 100%);
  background: -webkit-linear-gradient(45deg, #4caf50 0%, #8bc34a 100%);
  background: linear-gradient(45deg, #4caf50 0%, #8bc34a 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4caf50', endColorstr='#8bc34a', GradientType=1);
  height: auto;
}

.wptb-messaging.wptb-warning {
  background: #f44336;
  background: -moz-linear-gradient(45deg, #f44336 0%, #ff5722 100%);
  background: -webkit-linear-gradient(45deg, #f44336 0%, #ff5722 100%);
  background: linear-gradient(45deg, #f44336 0%, #ff5722 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f44336', endColorstr='#ff5722', GradientType=1);
  height: auto;
}

.wptb-management_table_container {
  margin: auto;
  text-align: initial;
}

.wptb-table-setup {
  justify-content: center;
  position: relative;
  z-index: 1;
  margin: 30px auto;
  background: #fff;
  max-width: 700px;
  overflow-x: auto;
  overflow-y: hidden;
}

[data-wptb-active-section="manage_cells"] .wptb-table-setup {

}

#wptb-cell_mode_background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(49, 59, 71, 0.49);
  display: none;
  text-align: initial;
}

#wptb-cell_mode_background.visible {
  display: block;
}


/**
* Table
*/

table.wptb-table {
  border-collapse: collapse
}

.wptb-wrapper {
  margin: 0 auto;
  padding: 40px;
  max-width: 960px;
  text-align: initial;
}

.wptb-table {
  margin: 20px 0 60px 0;
  width: 100%;
  border: 1px solid #ccc;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  display: table;
}

@media screen and (max-width: 580px) {
  .wptb-table {
    display: block;
  }
}

.wptb-row {
  display: table-row;
  background: #bebebe;
}

.wptb-row:nth-of-type(odd) {
  background: #bebebe;
}

.wptb-row.wptb-table-header {
  font-weight: 900;
  color: #ffffff;
  background: #ea6153;
}

.wptb-row.wptb-green {
  background: #27ae60;
}

.wptb-row.wptb-blue {
  background: #2980b9;
}

@media screen and (max-width: 580px) {
  .wptb-row {
    padding: 14px 0 7px;
    display: block;
  }

  .wptb-row.wptb-table-header {
    padding: 0;
    height: 6px;
  }

  .wptb-row.wptb-table-header .wptb-cell {
    display: none;
  }

  .wptb-row .wptb-cell {
    margin-bottom: 10px;
  }

  .wptb-row .wptb-cell:before {
    margin-bottom: 3px;
    content: attr(data-title);
    min-width: 98px;
    font-size: 10px;
    line-height: 10px;
    font-weight: bold;
    text-transform: uppercase;
    color: #969696;
    display: block;
  }
}

.wptb-cell {
  padding: 12px 12px;
  display: table-wptb-cell;
}

@media screen and (max-width: 580px) {
  /*    .wptb-cell {
        padding: 2px 16px;
        display: block;
    }*/
}

.wptb-preview-table {
  table-layout: fixed;
  font-size: 15px;
  display: table;
  border-collapse: collapse !important;
  margin: auto;
  width: auto;
}

.wptb-preview-table.wptb-preview-table-auto-width {
  width: auto;
}

.wptb-preview-table-manage-cells tbody > tr > td::after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: 100;
}

.wptb-preview-table-manage-cells td:hover::after {
  background: rgba(207, 218, 239, 0.2);
  border-color: inherit;
}

.wptb-preview-table p {
  margin: 0;
  font-size: 15px;
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: break-word;
}

.wptb-preview-table ul {
  list-style-type: disc;
  margin-left: 15px;
}

.wptb-preview-table tr {
  display: table-row;
  background: #fcfcfc;
}

.wptb-preview-table tr:nth-of-type(odd) {
  background: #eeeeee;
}

.wptb-state-dragging td {
  cursor: all-scroll;
}

.wptb-preview-table td {
  padding: 15px;
  position: relative;
  box-sizing: content-box;
}

.wptb-preview-table td.wptb-td-default-width {
  width: 100px;
}

.wptb-preview-table .wptb-row td.wptb-highlighted,
.wptb-state-dragging td:hover {
  outline: 1px solid #acc1e2;
}

.wptb-preview-table .wptb-row.wptb-highlighted-row {
  background-color: hsla(210, 53%, 49%, 0.34);
  border: 1px solid pink;
}

.wptb-preview-table .wptb-row td.wptb-highlighted-row-first {
  background-color: hsla(210, 53%, 49%, 0.34);
  border-bottom: 1px solid pink;
  border-left: 1px solid pink;
  border-right: inherit;
  border-top: 1px solid pink;
}

.wptb-preview-table .wptb-row td.wptb-highlighted-row-inner {
  background-color: hsla(210, 53%, 49%, 0.34);
  border-bottom: 1px solid pink;
  border-left: inherit;
  border-right: inherit;
  border-top: 1px solid pink;
}

.wptb-preview-table .wptb-row td.wptb-highlighted-row-last {
  background-color: hsla(210, 53%, 49%, 0.34);
  border-bottom: 1px solid pink;
  border-left: inherit;
  border-right: 1px solid pink;
  border-top: 1px solid pink;
}

.wptb-preview-table .wptb-row td.wptb-highlighted-column-first {
  background-color: hsla(210, 53%, 49%, 0.34);
  border-bottom: inherit;
  border-left: 1px solid pink;
  border-right: 1px solid pink;
  border-top: 1px solid pink;
}

.wptb-preview-table .wptb-row td.wptb-highlighted-column-inner {
  background-color: hsla(210, 53%, 49%, 0.34);
  border-bottom: inherit;
  border-left: 1px solid pink;
  border-right: 1px solid pink;
  border-top: inherit;
}

.wptb-preview-table .wptb-row td.wptb-highlighted-column-last {
  background-color: hsla(210, 53%, 49%, 0.34);
  border-bottom: 1px solid pink;
  border-left: 1px solid pink;
  border-right: 1px solid pink;
  border-top: inherit;
}

.wptb-row td:empty::before {
  content: 'Cell';
  display: block;
  font-weight: normal;
  font-size: 80%;
  text-align: center;
  color: #969fa6;
}

.wptb-row td:empty::after {
  content: '';
  display: block;
  border: 1px dashed #969fa6;
  position: absolute;
  top: 2px;
  right: 2px;
  bottom: 2px;
  left: 2px;
}

.wptb-preview-table.wptb-table-preview-head .wptb-row:first-child td:empty::before {
  content: 'Header';
}

.wptb-ph-element {
  position: relative;
  border: 1px solid #fff0;
  min-height: 15px;
}


/*
** Image Style
*/

.wptb-image-wrapper img {
  width: 100%;
  display: block;
  padding: 0;
  max-width: 100%;
  height: auto;
  transition: all 0.2s ease-out;
}

.wptb-image-wrapper a {
  display: block;
  max-width: 100%;
  position: relative;
  margin: auto;
  text-decoration: none;
}

.wptb-icon-image-button {
  display: block;
  padding: 5px;
  background: #747d84;
  border-radius: 5px;
  color: black;
  cursor: pointer;
}

.wptb-image-wrapper::after {
  content: "";
  display: block;
  height: 0;
  width: 100%;
  clear: both;
}


/*
** Button Style
*/

.wptb-button-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}

.wptb-button-wrapper > a {
  text-decoration: none;
  max-width: 100%;
}

.wptb-button {
  padding: 16px;
  background: #329d3f;
  color: #ffffff;
  cursor: pointer;
  border-radius: 5px;
  border: 0;
  box-shadow: none;
  transition: all 0.2s ease-out;
  display: flex;
  justify-content: center;
  align-items: center;
}

.wptb-button-icon {
  margin: 0 5px;
  order: -1;
  width: 25px;
  height: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.wptb-button-icon svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.wptb-button-icon[data-wptb-button-icon-src=""] {
  display: none;
}

[data-wptb-button-icon-position='right'] .wptb-button-icon {
  order: 2
}

.wptb-plugin-button-order-right .wptb-button-icon {
  order: 2;
}

.wptb-button:hover {
  color: #ffffff;
}


/**
* Table Generator
*/

.wptb-table-generator {
  text-align: center;
  margin: 60px auto 20px auto;
}

.wptb-table-generator input {
  margin: 0;
}

.wptb-generator-btn {
  width: 92%;
  padding: 15px;
  background: var(--wptb-plugin-logo-color);
  color: white;
  cursor: pointer;
  border: none;
  box-shadow: none;
  border-radius: 5px;
}

.wptb-input-number {
  width: 80px;
  padding: 0 12px;
  vertical-align: top;
  text-align: center;
  outline: none;
}

.wptb-input-number,
.wptb-input-number-decrement,
.wptb-input-number-increment {
  border: 1px solid #ccc;
  height: 40px;
}

.wptb-input-number-decrement,
.wptb-input-number-increment {
  display: inline-block;
  width: 30px;
  line-height: 38px;
  background: #f1f1f1;
  color: #444;
  text-align: center;
  font-weight: bold;
  cursor: pointer;
  user-select: none;
}

.wptb-input-number-decrement:active,
.wptb-input-number-increment:active {
  background: #ddd;
}

.wptb-input-number-decrement {
  border-right: none;
  border-radius: 4px 0 0 4px;
}

.wptb-input-number-increment {
  border-left: none;
  border-radius: 0 4px 4px 0;
}

.wptb-allow-drop {
  background: #b5e0d7;
}

#wpcd_fixed_toolbar {
  min-height: 55px;
  text-align: center;
  position: sticky !important;
  top: 39px;
  z-index: 100;
  display: inline-block;
}

#wpcd_fixed_toolbar > div.toolbar-active {
  display: block !important;
}


/*
 ** Button Size Selector Style
 */

.wptb-btn-size-btn {
  padding: 8px 15px;
  margin: 0;
  vertical-align: middle;
  border: solid 1px #ccc;
  font-size: 12px;
  border-radius: 4px;
  cursor: pointer;
}

.wptb-btn-size-switcher {
  background: linear-gradient(to bottom, white, #eeeeee);
  display: table-cell;
  border-right: none;
  border-radius: 0;
  color: #433f33;
}

.wptb-btn-size-switcher:first-child {
  border-radius: 4px 0 0 4px;
}

.wptb-btn-size-switcher:last-child {
  border-radius: 0 4px 4px 0;
  border-right: solid 1px #ccc;
}

.wptb-btn-size-switcher:hover {
  background: #fff;
}

.wptb-btn-size-switcher:active {
  box-shadow: inset 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
}

.wptb-btn-size-switcher.bnt-selected {
  background: #fff;
  box-shadow: inset 0px 0px 20px 4px rgba(0, 0, 0, 0.15);
  cursor: default;
}


/* customize tinymce Editor */

.mce-content-body {
  min-height: 19px;
  word-break: break-word;
}

.mce-tinymce.mce-tinymce-inline.mce-container.mce-panel {
  left: 50% !important;
  transform: translate(-50%, 0) !important;
  border: 1px solid var(--wptb-plugin-gray-300) !important;
}

.mce-container.mce-panel.mce-floatpanel.mce-window.mce-in {
  z-index: 100100 !important;
}

.mce-container.mce-panel.mce-floatpanel.mce-menu.mce-animate.mce-fixed.mce-menu-align.mce-in {
  z-index: 100101 !important;
}

.mce-edit-focus {
  outline: none !important;
}

.mce-btn button {
  padding: 14px 18px !important;
}

.mce-ico {
  font-size: 20px !important;
}

.mce-content-body [data-mce-selected="inline-boundary"] {
  background: transparent !important;
}

br[data-mce-bogus="1"] {
  display: none;
}

.wptb-text-container .mce-content-body a {
  color: rgb(30, 115, 190);
}

.wptb-text-container p:empty:not(:focus)::before {
  content: attr(data-placeholder);
  opacity: 0.4;
}

.wptb-droppable.wptb-cell ul,
.wptb-droppable.wptb-cell ol {
  border: 1px solid transparent;
  margin: 0;
  padding: 1em 0.2em 0.4em;
  width: 100%;
}

.wptb-droppable.wptb-cell ul article,
.wptb-droppable.wptb-cell ol article {
  align-items: flex-start;
  border: 1px solid transparent;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  list-style-type: none;
  margin-bottom: 0;
  padding: 0;
  position: relative;
  width: 100%;
}

.wptb-list-container ul li {
  list-style: none;
  margin: 0px;
}

.wptb-droppable.wptb-cell li .wptb-list-item-content {
  min-height: 30px;
}

.wptb-droppable.wptb-cell li .wptb-list-item-content p {
  word-wrap: break-word;
  line-height: 30px;
  font-size: 15px;
  padding-left: 20px;
}

.wptb-list-container ul li > div > p::before {
  content: attr(data-list-style-type-index);
  display: inline-block;
  line-height: 30px;
  padding: 0 5px 0 0;
  /* font-size: 15px; */
  font-family: verdana, sans-serif;
  cursor: text;
  min-width: fit-content;
}

.wptb-droppable.wptb-cell li .wptb-list-item-content p span.content {
  display: block;
}

.wptb-list-container ul li > div > p::before {
  margin-left: -20px;
}

.wptb-list-container ul li > div > p.wptb-list-style-type-disc::before {
  content: '\25CF';
}

.wptb-list-container ul li > div > p.wptb-list-style-type-circle::before {
  content: '\25CB';
}

.wptb-list-container ul li > div > p.wptb-list-style-type-square::before {
  content: '\25A0';
}

.wptb-list-container ul li > div > p.wptb-list-style-type-none::before {
  content: '';
  padding-right: 0px;
}

.wptb-droppable.wptb-cell .wptb-directlyhovered {
  outline: 1px solid #1ea5e5 !important;
  position: relative;
  /*width: 100%;*/
}

.wptb-cell .wptb-ph-element.edit-active {
  outline: 2px solid #1ea5e5 !important;
  position: relative;
}

.wptb-droppable.wptb-cell .wptb-list-container.wptb-directlyhovered {
  display: block;
}

.wptb-droppable.wptb-cell .wptb-directlyhovered .wptb-directlyhovered {
  display: flex;
  width: 100%;
}

.wptb-droppable.wptb-cell .wptb-list-container.wptb-directlyhovered .wptb-directlyhovered {
  display: list-item;
  border: none !important;
}

.wptb-droppable.wptb-cell .wptb-list-container.wptb-directlyhovered .wptb-directlyhovered:before {
  content: "";
  display: inline-block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border: 1px solid #1ea5e5 !important;
}

.wptb-list-container {
  /*padding-left: 20px;*/
}

.wptb-actions {
  align-items: center;
  background-color: #1ea5e5;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  /*border-bottom: 3px solid #fff0;*/
  box-sizing: content-box;
  color: white;
  justify-content: space-between;
  line-height: 1em;
  padding: 0px 5px;
  position: absolute;
  height: 15px;
  font-size: 9pt;
  display: none;
  max-width: 70px;
  z-index: 100001;
  box-sizing: border-box;
}

.wptb-ph-element:hover .wptb-actions {
  display: inline;
}

.wptb-actions .dashicons.dashicons-admin-page.wptb-duplicate-action {
  font-size: 10pt;
  margin: 0em 0.05em 0 0.1em;
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.wptb-actions .dashicons.wptb-prebuilt-mark-action {
  font-size: 10pt;
  margin: 0em 0.05em 0 0.1em;
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.wptb-actions .dashicons.dashicons-trash.wptb-delete-action {
  font-size: 10pt;
  margin: 0em 0.1em 0 0.05em;
  width: 16px;
  height: 16px;
  order: 2;
  cursor: pointer;
}

.wptb-cell-management .wptb-button {
  background: #3e99ca;
  color: #ffffff;
  border: none;
  border-radius: 2px;
  padding: .4em 0;
  width: 100%;
  box-shadow: 2px 1px 0px 0px rgba(13, 85, 126, 0.71);
}

.wptb-cell-management .wptb-button[disabled] {
  display: none;
}

.wptb-space-between {
  min-height: 10px;
  width: 100%;
}

.wptb-ph-element.wptb-directlyhovered.wptb-moving-mode {
  outline: 0px !important;
}

.wptb-ph-element.wptb-ondragenter::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 101000;
}

.wptb-ph-element.wptb-moving-mode {
  opacity: .4;
  -webkit-transform: scale(0.9) translate(-5%, -5%);
  -ms-transform: scale(0.9) translate(-5%, -5%);
  transform: scale(0.9) translate(-5%, -5%);
  -webkit-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
}

.wptb-drop-handle {
  height: 11px;
  position: absolute;
  z-index: 101000;
  display: none;
}

.wptb-drop-handle::after {
  content: attr(data-text);
  background-color: dodgerblue;
  color: white;
  display: block;
  font-variant: small-caps;
  position: relative;
  text-align: center;
  width: 100%;
  height: 100%;
  font-size: 11px;
  line-height: 1;
  text-transform: uppercase;
  box-sizing: border-box;
}

.wptb-drop-border-marker {
  position: absolute;
  width: 1px;
  height: 1px;
  z-index: 101000;
}

.wptb-drop-handle.wptb-moving-into-same-elem,
.wptb-drop-border-marker.wptb-moving-into-same-elem {
  opacity: 0;
  visibility: hidden;
}

.wptb-drop-border-marker > div {
  position: absolute;
  background: #1ea9eb;
}

.wptb-drop-border-marker-top {
  top: 0;
  left: 0;
  height: 1px;
}

.wptb-drop-border-marker-right {
  top: 0;
  width: 1px;
}

.wptb-drop-border-marker-bottom {
  left: 0;
  height: 1px;
}

.wptb-drop-border-marker-left {
  top: 0;
  left: 0;
  width: 1px;
}

.wptb-space-between.visible:empty::before {
  background-color: dodgerblue;
  border: 1px solid dodgerblue;
  color: white;
  content: 'drop here';
  display: block;
  font-variant: small-caps;
  margin: 2px 5%;
  padding: 0.5em 0;
  position: relative;
  text-align: center;
  width: 90%;
}

.wptb-draggable {
  border: none;
}

.wptb-actions .dashicons.dashicons-move.wptb-move-action {
  font-size: 14px !important;
  cursor: move;
  width: 16px;
  height: 16px;
  order: -1;
}

.wptb-no-cell-action:not(.visible),
.wptb-single-action:not(.visible),
.wptb-multiple-select-action:not(.visible) {
  cursor: not-allowed;
  opacity: 0.3;
}

.wptb-item-dragging {
  background-color: purple;
  min-height: 30px;
  min-width: 30px;
  position: absolute;
  transition: all 0.2s ease;
  transition-property: left, top;
  width: auto;
  z-index: 11000;
}

.wptb-range-input {
  height: 20px;
  position: relative;
}

.wptb-range-input .slider {
  background-color: white;
  border: 1px solid #4b88c4;
  border-radius: 200px;
  box-sizing: border-box;
  height: 20px;
  left: 2px;
  position: absolute;
  top: 0;
  width: 20px;
  z-index: 10;
}

.wptb-range-input .rail {
  background: #cccccc;
  border-radius: 14px;
  bottom: 6px;
  height: 8px;
  position: absolute;
  width: 100%;
  z-index: 1;
}

.wptb-preview-table.wptb-table-preview-head .wptb-row:first-child td.wptb-drop-here-empty:empty::before,
.wptb-row td.wptb-drop-here-empty:empty::before {
  background-color: dodgerblue;
  border: 1px solid dodgerblue;
  box-sizing: border-box;
  color: white;
  content: 'drop here';
  display: block;
  font-size: 1em;
  font-variant: small-caps;
  padding: 0.2em 0.4em;
  text-align: center;
  width: 100%;
}

td[class*="wptb-fused-cell"] {
  display: none !important;
}

.wptb-size-s .wptb-button {
  border-radius: .2rem;
  padding: .35rem .6rem;
  max-width: 100%;
}

.wptb-size-s .wptb-button p {
  font-size: .875rem;
  line-height: 1.5;
}

.wptb-size-m .wptb-button {
  border-radius: .3rem;
  padding: .475rem .85rem;
  max-width: 100%;
}

.wptb-size-m .wptb-button p {
  font-size: 1.125rem;
  line-height: 1.5;
}

.wptb-size-l .wptb-button {
  border-radius: .3rem;
  padding: .6rem 1.2rem;
  max-width: 100%;
}

.wptb-size-l .wptb-button p {
  font-size: 1.25rem;
  line-height: 1.5;
}

.wptb-size-xl .wptb-button {
  border-radius: .4rem;
  padding: .8rem 1.35rem;
  max-width: 100%;
}

.wptb-size-xl .wptb-button p {
  font-size: 1.35rem;
  line-height: 1.5;
}

[class*=wptb-element-text-] p {
  color: inherit !important;
  font-size: inherit !important;
}

.wptb-split-page-title-action a,
.wptb-split-page-title-action a:active,
.wptb-split-page-title-action .wptb-expander::after {
  padding: 6px 10px;
  position: relative;
  top: -3px;
  text-decoration: none;
  border: 1px solid #ccc;
  border-radius: 2px;
  background: #f7f7f7;
  text-shadow: none;
  font-weight: 600;
  font-size: 13px;
  line-height: normal;
  color: #0073aa;
  cursor: pointer;
  outline: 0;
}

.wptb-split-page-title-action a:hover {
  color: #fff;
  background-color: #1f8abb;
}

.wptb-column-title-mobile {
  display: none;
}


/* Star Rating */

.wptb-star_rating-container {
  text-align: center;
}

.wptb-rating-stars-box {
  text-align: center;
  display: inline-block;
  padding: 7px;
}

.wptb-rating-stars-box ul {
  list-style-type: none;
  padding: 0;
  -moz-user-select: none;
  -webkit-user-select: none;
  padding: 0.5em 0.2em 0.2em;
}

.wptb-rating-stars-box ul li {
  display: inline-block;
}

.wptb-rating-stars-box ul > li.wptb-rating-star {
  color: #ccc;
  cursor: pointer;
  margin: 0px;
  position: relative;
  width: 20px;
  height: 20px;
}

.wptb-rating-stars-box ul > li.wptb-rating-star span {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0px;
  left: 0px;
  z-index: 10;
}

.wptb-rating-stars-box ul > li.wptb-rating-star span.wptb-rating-star-left-signal-part,
.wptb-rating-stars-box ul > li.wptb-rating-star span.wptb-rating-star-right-signal-part {
  height: 100%;
  width: 50%;
  z-index: 20;
}

.wptb-rating-stars-box ul > li.wptb-rating-star span.wptb-rating-star-left-signal-part {
  left: 0px;
}

.wptb-rating-stars-box ul > li.wptb-rating-star span.wptb-rating-star-left-signal-part span.wptb-rating-star-zero-set {
  left: 0px;
  width: 40%;
  height: 100%;
  top: 0px;
  z-index: 30px;
}

.wptb-rating-stars-box ul > li.wptb-rating-star span.wptb-rating-star-right-signal-part {
  right: 0px;
  left: auto;
}

.wptb-rating-stars-box ul > li.wptb-rating-star span {
  display: block;
}

.wptb-rating-stars-box ul > li.wptb-rating-star span.wptb-filled-rating-star {
  display: none;
}

.wptb-rating-stars-box ul > li.wptb-rating-star span.wptb-half-filled-rating-star {
  display: none;
}

.wptb-rating-stars-box ul > li.wptb-rating-star span.wptb-not-filled-rating-star {
  fill: #ccc;
}

.wptb-rating-stars-box ul > li.wptb-rating-star.wptb-rating-star-hover-half span.wptb-not-filled-rating-star {
  display: none;
}

.wptb-rating-stars-box ul > li.wptb-rating-star.wptb-rating-star-hover-half span.wptb-half-filled-rating-star {
  display: block;
  fill: #FF912C;
  opacity: 0.5;
}

.wptb-rating-stars-box ul > li.wptb-rating-star.wptb-rating-star-hover-half span.wptb-filled-rating-star {
  display: none;
}

.wptb-rating-stars-box ul > li.wptb-rating-star.wptb-rating-star-hover-full span.wptb-not-filled-rating-star {
  display: none;
}

.wptb-rating-stars-box ul > li.wptb-rating-star.wptb-rating-star-hover-full span.wptb-half-filled-rating-star {
  display: none;
}

.wptb-rating-stars-box ul > li.wptb-rating-star.wptb-rating-star-hover-full span.wptb-filled-rating-star {
  display: block;
  fill: #FF912C;
  opacity: 0.5;
}

.wptb-rating-stars-box ul > li.wptb-rating-star.wptb-rating-star-selected-half.wptb-rating-star-hover-half span,
.wptb-rating-stars-box ul > li.wptb-rating-star.wptb-rating-star-selected-half.wptb-rating-star-hover-full span,
.wptb-rating-stars-box ul > li.wptb-rating-star.wptb-rating-star-selected-full.wptb-rating-star-hover-half span,
.wptb-rating-stars-box ul > li.wptb-rating-star.wptb-rating-star-selected-full.wptb-rating-star-hover-full span {
  opacity: 1;
}

.wptb-rating-stars-box ul > li.wptb-rating-star.wptb-rating-star-selected-half span.wptb-filled-rating-star {
  display: none;
}

.wptb-rating-stars-box ul > li.wptb-rating-star.wptb-rating-star-selected-half.wptb-rating-star-hover-full span.wptb-filled-rating-star {
  display: block;
  fill: #FF912C;
  opacity: 0.5;
}

.wptb-rating-stars-box ul > li.wptb-rating-star.wptb-rating-star-selected-half span.wptb-not-filled-rating-star {
  display: none;
}

.wptb-rating-stars-box ul > li.wptb-rating-star.wptb-rating-star-selected-half span.wptb-half-filled-rating-star {
  display: block;
  fill: #FF912C;
}

.wptb-rating-stars-box ul > li.wptb-rating-star.wptb-rating-star-selected-full span.wptb-filled-rating-star {
  display: block;
  fill: #FF912C;
}

.wptb-rating-stars-box ul > li.wptb-rating-star.wptb-rating-star-selected-full span.wptb-not-filled-rating-star {
  display: none;
}

.wptb-rating-stars-box ul > li.wptb-rating-star.wptb-rating-star-selected-full span.wptb-half-filled-rating-star {
  display: none;
}

.wptb-rating-stars-box ul > li.wptb-rating-star span svg {
  display: block;
}


/*.wptb-rating-stars-box ul > li.wptb-rating-star.wptb-rating-star-hover {
    color:#FF912C;
    opacity: 0.4;
}

.wptb-rating-stars-box ul > li.wptb-rating-star.wptb-rating-star-selected {
    color:#FF912C;
}


.wptb-rating-stars-box ul > li.wptb-rating-star.wptb-rating-star-selected.wptb-rating-star-hover {
    opacity: 1;
}

.wptb-rating-stars-box ul > li.wptb-rating-star:before {
    content: "☆";
    font-size: inherit;
    height: inherit;
    line-height: inherit;
    color: #ccc;
    font-style: normal;
    display: block;
}

.wptb-rating-stars-box ul > li.wptb-rating-star.wptb-rating-star-hover:before {
    content: "★";
    color: inherit;
}

.wptb-rating-stars-box ul > li.wptb-rating-star.wptb-rating-star-selected:before {
    content: "★";
    color: inherit;
}*/

.wptb-number-rating-box {
  text-align: center;
  font-size: 20px;
}

.wptb-number-rating-box > div {
  vertical-align: top;
  display: inline-block;
  color: #888;
  text-align: center;
  height: 25px;
  font-size: 25px;
  line-height: 25px;
}

/* Shortcode */

wptb_shortcode_container_element {
  display: block;
}

@media screen and (max-width: 1375px) {
  #wptb-messaging-area {
    position: relative;
  }

  #wptb-messaging-area .wptb-message {
    max-width: 400px;
    padding: 20px 5px;
    box-sizing: border-box;
  }
}

@media screen and (max-width: 1070px) {
  #wptb-messaging-area {
    position: absolute;
    top: 190px;
    left: 30px;
    right: 30px;
    margin: auto;
  }

  #wptb-messaging-area .wptb-message {
    padding: 50px 20px;
  }
}

@media screen and (max-width: 970px) {
  #wptb-setup-name {
    width: 100%;
    max-width: 420px;
    margin-left: 0px;
  }
}

@media screen and (max-width: 600px) {
  /*.wptb-right {*/
  /*    width: 100%;*/
  /*    text-align: justify;*/
  /*}*/
  /*.wptb-embed,*/
  /*.wptb-preview,*/
  /*.wptb-save {*/
  /*    display: inline-block;*/
  /*    float: none;*/
  /*    margin: 20px 20px auto;*/
  /*}*/
  /*.wptb-close {*/
  /*    padding: 20px;*/
  /*}*/
  /*.wptb-right::after {*/
  /*    !*content: "";*!*/
  /*    !*width: 100%;*!*/
  /*    !*display: inline-block;*!*/
  /*}*/
  /*.wptb-container {*/
  /*    top: 172px;*/
  /*}*/
}

@media screen and (max-width: 450px) {
  /*.wptb-embed,*/
  /*.wptb-preview,*/
  /*.wptb-save {*/
  /*    width: 100%;*/
  /*    margin: 15px 0px 0px;*/
  /*    padding: 0px 15px;*/
  /*    box-sizing: border-box;*/
  /*}*/
  /*.wptb-embed a,*/
  /*.wptb-preview a,*/
  /*.wptb-save a {*/
  /*    width: 100%;*/
  /*    text-align: center;*/
  /*    box-sizing: border-box;*/
  /*}*/
  /*#wptb-messaging-area {*/
  /*    top: 310px;*/
  /*}*/
  /*.wptb-container {*/
  /*    top: 300px;*/
  /*}*/
}

.wptb-cell img {
  max-width: 100%;
}

.wptb-exit-options {
  text-decoration: none;
}

.wptb-back-button {
  /*float: left;*/
}

.wptb-option-text {
  text-align: center;
}


/*
 ** Star rating alignment Selector Style
 */

.wptb-rating-alignment-btn {
  padding: 8px 15px 3px 15px;
  margin: 0;
  vertical-align: middle;
  border: solid 1px #ccc;
  font-size: 12px;
  border-radius: 4px;
  cursor: pointer;
}

.wptb-rating-alignment-switcher {
  background: linear-gradient(to bottom, white, #eeeeee);
  display: table-cell;
  border-right: none;
  border-radius: 0;
  color: #433f33;
}

.wptb-rating-alignment-switcher:first-child {
  border-radius: 4px 0 0 4px;
}

.wptb-rating-alignment-switcher:last-child {
  border-radius: 0 4px 4px 0;
  border-right: solid 1px #ccc;
}

.wptb-rating-alignment-switcher:hover {
  background: #fff;
}

.wptb-rating-alignment-switcher:active {
  box-shadow: inset 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
}

.wptb-rating-alignment-switcher.selected {
  background: #fff;
  box-shadow: inset 0px 0px 20px 4px rgba(0, 0, 0, 0.15);
  cursor: default;
}


/*
 ** list rating alignment Selector Style
 */

.wptb-list-alignment-btn {
  padding: 8px 15px 3px 15px;
  margin: 0;
  vertical-align: middle;
  border: solid 1px #ccc;
  font-size: 12px;
  border-radius: 4px;
  cursor: pointer;
}

.wptb-list-alignment-switcher {
  background: linear-gradient(to bottom, white, #eeeeee);
  display: table-cell;
  border-right: none;
  border-radius: 0;
  color: #433f33;
}

.wptb-list-alignment-switcher:first-child {
  border-radius: 4px 0 0 4px;
}

.wptb-list-alignment-switcher:last-child {
  border-radius: 0 4px 4px 0;
  border-right: solid 1px #ccc;
}

.wptb-list-alignment-switcher:hover {
  background: #fff;
}

.wptb-list-alignment-switcher:active {
  box-shadow: inset 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
}

.wptb-list-alignment-switcher.selected {
  background: #fff;
  box-shadow: inset 0px 0px 20px 4px rgba(0, 0, 0, 0.15);
  cursor: default;
}


/*
 ** button rating alignment Selector Style
 */

.wptb-button-alignment-btn {
  padding: 8px 15px 3px 15px;
  margin: 0;
  vertical-align: middle;
  border: solid 1px #ccc;
  font-size: 12px;
  border-radius: 4px;
  cursor: pointer;
}

.wptb-button-alignment-switcher {
  background: linear-gradient(to bottom, white, #eeeeee);
  display: table-cell;
  border-right: none;
  border-radius: 0;
  color: #433f33;
}

.wptb-button-alignment-switcher:first-child {
  border-radius: 4px 0 0 4px;
}

.wptb-button-alignment-switcher:last-child {
  border-radius: 0 4px 4px 0;
  border-right: solid 1px #ccc;
}

.wptb-button-alignment-switcher:hover {
  background: #fff;
}

.wptb-button-alignment-switcher:active {
  box-shadow: inset 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
}

.wptb-button-alignment-switcher.selected {
  background: #fff;
  box-shadow: inset 0px 0px 20px 4px rgba(0, 0, 0, 0.15);
  cursor: default;
}


/*
 ** image rating alignment Selector Style
 */

.wptb-image-alignment-btn {
  padding: 8px 15px 3px 15px;
  margin: 0;
  vertical-align: middle;
  border: solid 1px #ccc;
  font-size: 12px;
  border-radius: 4px;
  cursor: pointer;
}

.wptb-image-alignment-switcher {
  background: linear-gradient(to bottom, white, #eeeeee);
  display: table-cell;
  border-right: none;
  border-radius: 0;
  color: #433f33;
}

.wptb-image-alignment-switcher:first-child {
  border-radius: 4px 0 0 4px;
}

.wptb-image-alignment-switcher:last-child {
  border-radius: 0 4px 4px 0;
  border-right: solid 1px #ccc;
}

.wptb-image-alignment-switcher:hover {
  background: #fff;
}

.wptb-image-alignment-switcher:active {
  box-shadow: inset 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
}

.wptb-image-alignment-switcher.selected {
  background: #fff;
  box-shadow: inset 0px 0px 20px 4px rgba(0, 0, 0, 0.15);
  cursor: default;
}


/*
 ** classes with justify-content styles
 */

.wptb-justify-content-left {
  justify-content: left;
}

.wptb-justify-content-center {
  justify-content: center;
}

.wptb-justify-content-right {
  justify-content: right;
}


/*
 ** classes with float styles
 */

.wptb-float-left {
  float: left;
}

.wptb-float-center {
  float: none;
}

.wptb-float-right {
  float: right;
}

/*
 ** classes with text-align styles
 */

.wptb-text-align-left {
  text-align: left;
}

.wptb-text-align-center {
  text-align: center;
}

.wptb-text-align-right {
  text-align: right;
}

/*settings page related styles*/
.wptb-menu-page-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 90vh;
  color: #4A5568;
  line-height: normal;
}

.wptb-settings-wrapper {
  background-color: white;
  min-width: 90%;
  max-width: 90%;
  height: 90%;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: minmax(min-content, max-content) minmax(min-content, max-content) 1fr minmax(min-content, max-content);
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.wptb-settings-wrapper .import-export {
  grid-template-rows: minmax(min-content, max-content) minmax(min-content, max-content) minmax(min-content, max-content) 1fr minmax(min-content, max-content);
}


.wptb-settings-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--wptb-plugin-logo-color);
  padding: 10px;
}

.wptb-settings-header * {
  color: #ffffff;
}

.wptb-settings-header a {
  text-decoration: none;
  font-size: 1rem;
  margin: 0 10px;
  text-transform: capitalize;
}

.wptb-settings-header a:hover {
  color: #CBD5E0;
}

.wptb-settings-brand {
  font-size: 2.5rem;
  display: flex;
  align-items: center;
  cursor: default;
}

.wptb-settings-header-name {
  margin-left: 1rem;
}

.wptb-settings-sections-wrapper {
  position: relative;
  display: flex;
  flex-direction: row;
  background-color: #ffffff;
  border-bottom: 1px solid #cbd5e0;
}

.wptb-plugins-m-b-40 {
  margin-bottom: 40px;
}

.wptb-settings-checkbox-row {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  margin: 5px 0;
  width: 100%;
}

.wptb-settings-dropdown-row {
  margin: 10px 0;
}

.wptb-settings-sections-wrapper.child {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.wptb-settings-section-item {
  text-transform: uppercase;
  font-size: 1rem;
  padding: 20px;
  margin: 0 10px;
  cursor: pointer;
  transition: background-color 0.5s ease-out;
}

.wptb-settings-section-item.static-active {
  border-bottom: 3px solid transparent;
}

.wptb-settings-section-item.static-active.active {
  border-bottom: 3px solid var(--wptb-plugin-logo-color) !important;
  background-color: var(--wptb-plugin-gray-100);
}

.child .wptb-settings-section-item {
  font-size: 0.8rem;
  padding: 10px;
}

.wptb-settings-section-item:hover {
  background-color: #EDF2F7;
}

.wptb-settings-section-item.disabled {
  color: #CBD5E0 !important;
}

.wptb-panel-tabs .wptb-settings-section-item.disabled {
  color: inherit !important;
}

.wptb-menu-active-section-indicator {
  position: absolute;
  /*border-bottom: 2px solid #1A202C;*/
  border-bottom: 2px solid var(--wptb-plugin-logo-color);
  transition: all 0.3s ease-out;
}

.wptb-settings-controls-wrapper {
  padding: 20px 40px;
  overflow: auto;
}

.wptb-settings-controls-wrapper.grid {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-auto-rows: minmax(min-content, max-content);
  grid-auto-flow: row;
}

.wptb-settings-controls-wrapper.center {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.wptb-setting-control {
  padding: 20px;
  transition: all 0.2s ease-out;
  border: 1px solid transparent;
}

.wptb-setting-control:hover {
  border: 1px solid #cbd5e0;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  transform: translateY(-5px);
}

.wptb-setting-control .title {
  font-weight: bold;
  font-size: 1rem;
  text-transform: capitalize;
  margin-bottom: 30px;
  border-bottom: 1px solid #cbd5e0;
  padding: 10px 0;
}

.wptb-menu-export-control-title {
  font-weight: bold;
  font-size: 1rem;
  text-transform: capitalize;
  padding: 10px 0;
  width: 100%;
  border-bottom: 1px solid #cbd5e0;
}

.wptb-export-list-table-search {
  padding: 10px 0;
  border-bottom: 1px solid #cbd5e0;
}

.wptb-setting-control-row {
  display: flex;
  align-items: center;
  margin: 20px 0;
}

.wptb-setting-control-row label {
  text-transform: capitalize;
}

.wptb-setting-control-row input {
  margin-right: 20px;
}

.wptb-setting-control-row select {
  margin-right: 20px;
}

.wptb-settings-footer {
  background-color: #ffffff;
  display: flex;
  justify-content: space-between;
  width: 100%;
  border-top: 1px solid #cbd5e0;
  padding: 20px 0;
}

.wptb-settings-messages {
  margin: 0 20px;
  display: flex;
  align-items: center;
}

.wptb-settings-message {
  font-style: italic;
  font-weight: bold;
  text-transform: uppercase;
}

.wptb-settings-message.ok {
  color: #3299D1;
}

.wptb-settings-message.error {
  color: #E53E3E;
}

.wptb-settings-fetching {
  animation: wptb-settings-rotate 1s linear infinite reverse;

}

.wptb-settings-button-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.wptb-settings-button {
  width: fit-content;
  margin: 0 20px;
  color: #ffffff;
  font-size: 1.0rem;
  padding: 10px 20px;
  border-radius: 5px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all .2s ease-out;
}

.wptb-settings-button:hover {
  color: #CBD5E0;
}

.wptb-settings-button.primary {
  background-color: #3299D1;
}

.wptb-settings-button.danger {
  background-color: #E53E3E;
}

.wptb-settings-button.disabled {
  background-color: #CBD5E0 !important;
}

.wptb-settings-button.small {
  font-size: inherit;
}

.wptb-settings-button.disabled:hover {
  color: #ffffff !important;
  cursor: not-allowed;
}

.wptb-fade-enter-active, .wptb-fade-leave-active {
  transition: opacity 0.2s ease-out;
}

.wptb-fade-enter, .wptb-fade-leave-to {
  opacity: 0;
}

.wptb-menu-file-drop {
  border: 2px dashed #cbd5e0;
  width: 500px;
  height: 200px;
  margin: 20px 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-transform: capitalize;
  transition: all 0.2s ease-out;
  border-radius: 5px;
}

.wptb-menu-file-drop.dragenter {
  background-color: #EDF2F7;
}

.wptb-menu-file-drop div {
  margin: 10px 0;
}

.wptb-menu-file-drop .hint {
  font-style: italic;
  color: #cbd5e0;
  font-size: 1.3rem;
}

.wptb-menu-file-drop .supported {
  font-style: italic;
  color: #cbd5e0;
  font-size: 1rem;
}

.wptb-menu-file-drop .file {
  text-transform: none;
  font-size: 1.3rem;
  color: inherit;
}

.wptb-menu-file-drop a {
  text-decoration: underline;
  cursor: pointer;
}

.wptb-menu-file-drop .file-icon {
  color: #cbd5e0;
  transform: scale(4);
}

.wptb-flex {
  display: flex;
}

.wptb-flex-col {
  flex-direction: column;
}

.wptb-flex-row {
  flex-direction: row;
}

.wptb-flex-align-center {
  align-items: center;
}

.wptb-flex-justify-center {
  justify-content: center;
}

.wptb-flex-justify-space-between {
  justify-content: space-between;
}

.wptb-import-tables-wrapper {
  margin-top: 50px;
  margin-bottom: 30px;
  display: flex;
  justify-content: center;
}

.wptb-import-table {
  text-align: center;
  border-collapse: collapse;
}

.wptb-import-table th{
  padding: 15px 10px;
}

.wptb-import-table th {
  border-bottom: 1px solid #cbd5e0;
}

.wptb-import-table tbody tr:hover {
  background-color: #edf2f7;
}

.wptb-menu-overflow-auto {
  overflow: auto;
}

.wptb-text-transform-cap {
  text-transform: capitalize !important;
}

.wptb-text-transform-none {
  text-transform: none !important;
}

.wptb-import-table-count-info {
  margin-bottom: 20px;
  font-weight: bold;
  font-style: italic;
}

.wptb-menu-export-wrapper {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: 1fr auto 1fr;
  grid-template-rows: 0.9fr;
  justify-content: center;
  align-content: center;
  grid-gap: 30px;
  width: 90%;
  height: 100%;
}

.wptb-menu-export-card {
  display: grid;
  grid-auto-flow: row;
  grid-template-rows: auto auto 1fr;
  grid-template-columns: 1fr;
  position: relative;
  border: 1px solid #cbd5e0;
  padding: 10px;
  overflow: auto;
}

.wptb-menu-export-controls-wrapper {
  padding: 10px 0;
  overflow-y: auto;
  display: grid;
  grid-auto-flow: row;
}

.wptb-menu-empty-cover {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  font-style: italic;
  font-size: 1.2rem;
  color: #CBD5E0;
}

.wptb-menu-export-middle-section {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}

.wptb-menu-export-middle-section .arrow-holder {
  max-width: 100px;
  width: 50%;
  cursor: pointer;
}

.wptb-menu-export-middle-section img {
  max-width: 100px;
  cursor: pointer;
  transition: transform 0.1s ease-out;
}

.wptb-menu-export-middle-section img:hover {
  transform: scale(1.2);
}

.wptb-menu-export-middle-section img:active {
  transform: scale(1);
}

.wptb-menu-export-middle-section .flip {
  transform: rotateZ(180deg);
}

.wptb-menu-popup-wrapper {
  display: flex;
  position: relative;
  justify-content: center;
  align-items: center;
  margin: 0 10px;
  border: 1px solid #cbd5e0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.2s ease-out;
}

.wptb-menu-popup-wrapper:hover {
  background-color: #cbd5e0;
}

.wptb-menu-popup-message {
  display: block;
  position: fixed;
  color: white;
  min-width: 100px;
  max-width: 200px;
  transition: opacity 0.2s ease-out;
  opacity: 0;
  text-align: start;
  z-index: 999;
  pointer-events: none;
}

.wptb-menu-popup-wrapper:hover + .wptb-menu-popup-message {
  opacity: 1
}

.wptb-menu-popup-inner-holder {
  position: relative;
  background-color: #4A5568;
  padding: 10px;
}

.wptb-menu-popup-arrow {
  position: absolute;
  background-color: inherit;
  width: 10px;
  height: 10px;
  bottom: -5px;
  left: calc(50% - 5px);
  transform: rotateZ(45deg);
}

.wptb-menu-list-table {
  border-collapse: collapse;
  width: 100%;

  td {
    padding: 15px 10px;
  }
}

.wptb-menu-list-table thead {
  border-bottom: 1px solid #cbd5e0;
  text-align: start;
}

.wptb-menu-list-table thead td {
  font-weight: bold;
  transition: all 0.2s ease-out;
  cursor: pointer;
  text-transform: capitalize;

  &:first-child {
    pointer-events: none;

    & input {
      visibility: collapse;
    }
  }

  &:hover {
    background-color: #EDF2F7;
  }
}

.wptb-menu-list-table tbody td .title-label {
  word-break: break-all;
}

.wptb-menu-list-table tbody tr:nth-child(even) {
  background-color: #edf2f7;
}

.wptb-plugin-box-shadow-md {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.wptb-plugin-filter-box-shadow-md {
  filter: drop-shadow(4px 6px 2px rgba(0, 0, 0, 0.1))
}

.wptb-plugin-filter-box-shadow-md-close {
  filter: drop-shadow(4px 1px 2px rgba(0, 0, 0, 0.1))
}

.wptb-plugin-filter-box-shadow-md-around {
  filter: drop-shadow(0px 0px 1px rgba(0, 0, 0, 0.3))
}

.wptb-plugin-box-shadow-up-md {
  box-shadow: 0 -5px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.wptb-plugin-box-shadow-xl {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.3) !important;
}

.wptb-plugin-inset-shadow-md {
  box-shadow: inset 0 4px 6px -1px rgba(0, 0, 0, 0.2), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
}

.wptb-plugin-margin-no {
  margin: 0 !important;
}

@keyframes wptb-settings-rotate {
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(360deg);
  }
}

@keyframes wptb-basic-appear {
  0% {
    opacity: 0
  }
  100% {
    opacity: 1
  }
}

.wptb-settings-space-between {
  display: flex;
  flex-direction: row;
  width: 100%;
  justify-content: space-between;
  align-items: center;
}


.wptb-icon-select-wrapper {
  align-items: center;
  height: 100%;
}

.wptb-icon-select-wrapper[disabled] .wptb-icon-select-preview {
  opacity: 0.2;
  cursor: default;
}

.wptb-icon-select-display {
  width: 50px;
  height: 50px;
  background-color: var(--wptb-plugin-theme-color-light);
  border: 1px solid var(--wptb-plugin-gray-400);
  border-radius: 5px;
  position: relative;
}

.wptb-icon-select-preview {
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
  padding: 5px;
  cursor: pointer;
  position: relative;
}

.wptb-icon-select-preview img[src=''] {
  display: none;
}

.wptb-icon-select-preview img {
  width: 100%;
  height: 100%;
}

.wptb-icon-select-drawer {
  position: fixed;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr;
  grid-auto-flow: row;
  grid-gap: 15px;
  background-color: var(--wptb-plugin-theme-color-light);
  border: 1px solid var(--wptb-plugin-gray-400);
  border-radius: 5px;
  padding: 10px;
  width: 200px;
  max-height: 200px;
  overflow-y: hidden;
  z-index: 110000;
}

.wptb-icon-search-wrapper {
  width: 100%;
}

.wptb-icon-search-wrapper input {
  width: 100%;
}

.wptb-icon-previews {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-flow: row;
  grid-gap: 10px;
  justify-content: center;
  align-items: center;
  overflow-y: scroll;
}

.wptb-icon-select-drawer-preview {
  display: flex;
  justify-content: center;
  align-items: center;
}

.wptb-icon-select-drawer-preview img {
  width: 25px;
  height: 25px;
  transition: transform .2s ease-out;
  cursor: pointer;
}

.wptb-icon-select-drawer-preview img:hover {
  transform: scale(1.2);
}

.wptb-icon-select-drawer-end {
  /*border: 1px solid red;*/
}

.wptb-icon-preview-active {
  border: 2px solid var(--wptb-plugin-logo-color);
}

.wptb-icon-reset {
  border: 1px solid var(--wptb-plugin-theme-sidebar-bg);
  width: 100%;
  height: 100%;
  border-radius: 5px;
  cursor: pointer;
}

.wptb-html-control-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.wptb-html-control-wrapper > div {
  /*margin: 10px 0;*/
}

.wptb-html-control-wrapper div:last-child {
  /*margin-bottom: 40px;*/
}

.wptb-help-support-section-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px 0;
}

.wptb-help-support-section-wrapper div {
  margin: 5px 0;
}

.wptb-builder-responsive {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  z-index: 400000;
  margin: auto;
  padding: 40px 10px;
}

.wptb-builder-responsive[data-wptb-responsive-status="true"] .wptb-responsive-builder-main {
  overflow-x: hidden !important;
}

.wptb-responsive-menu-tools {
  margin: auto auto 60px auto;
  max-width: 700px;
}

.wptb-screen-size-slider-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: 'content';
  justify-content: center;
  align-items: center;
  margin-bottom: 80px;
}

.wptb-screen-size-slider-empty {
  width: 100%;
  position: relative;
  height: 5px;
  border-radius: 3px;
  background-color: #fff;
  border: 1px solid var(--wptb-plugin-gray-400);
  grid-area: content;
}

.wptb-screen-size-slider-fill {
  height: 100%;
  position: absolute;
  left: 0;
  border-radius: 3px;
  background-color: var(--wptb-plugin-logo-color);
  border: 1px solid transparent;
  transition: all 0.1s linear;
}

.wptb-drag-active .wptb-screen-size-slider-fill {
  transition: none !important;
}

.wptb-screen-size-slider-arrow {
  position: absolute;
  top: -30px;
  cursor: grab;
  transition: all 0.1s linear;
}

.wptb-drag-active .wptb-screen-size-slider-arrow {
  transition: none !important;
}

.wptb-screen-size-slider-arrow:active {
  cursor: grabbing;
}

.wptb-size-slider-stops-wrapper {
  z-index: 900000;
  position: absolute;
  top: -10px;
}

.wptb-slider-stop {
  position: absolute;
  display: flex;
  width: fit-content;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.wptb-slider-stop-knob {
  width: 20px;
  height: 20px;
  background-color: #fff;
  border: 2px solid var(--wptb-plugin-logo-color);
  border-radius: 50%;
  margin-bottom: 5px;
  transition: all 0.2s ease-out;
  display: flex;
  justify-content: center;
  align-items: center;
}

.wptb-slider-stop-label {
  text-transform: capitalize;
  font-size: 90%;
  color: var(--wptb-plugin-gray-400);
}

.wptb-slider-stop-knob[data-wptb-knob-disabled="true"] {
  background-color: var(--wptb-plugin-theme-color-light) !important;
  border: 2px solid var(--wptb-plugin-red-300) !important;
}

.wptb-slider-stop-knob[data-wptb-knob-disabled="true"] svg {
  fill: var(--wptb-plugin-red-600);
}

.wptb-slider-stop-active .wptb-slider-stop-knob {
  background-color: var(--wptb-plugin-logo-color);
  color: inherit !important;
}

.wptb-slider-stop-active .wptb-slider-stop-label {
  color: inherit !important;
}

.wptb-size-input-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 90%;
}

.wptb-size-input-wrapper * {
  margin: 0 10px;
  font-size: inherit !important;
  font-variant-numeric: tabular-nums;
}

.wptb-size-input {
  width: calc(9ch);
  border: 1px solid var(--wptb-plugin-gray-400) !important;
  background-color: var(--wptb-plugin-gray-100) !important;
  text-align: center;
  color: var(--wptb-plugin-theme-text-color-main) !important;
}

.wptb-responsive-builder-main {
  /*display: grid;*/
  /*grid-auto-flow: row;*/
  /*grid-template-areas: "toolbox" "main";*/
  margin-bottom: 20px;
  padding: 0 20px;
  position: relative;
  overflow: auto;
}

.wptb-responsive-toolbox-wrapper {
  display: grid;
  align-items: center;
  border: 1px solid var(--wptb-plugin-gray-300);
  border-radius: 3px;
  grid-area: toolbox;
}

.wptb-responsive-toolbox-top-static {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 1fr;
  align-items: center;
  grid-gap: 10px;
}

.wptb-responsive-identify-cells-wrapper {
  /*grid-column: 2;*/
}

.wptb-responsive-toolbox-dynamic-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 10px;
  grid-auto-rows: auto;
}

.wptb-responsive-toolbox-wrapper > div {
  padding: 10px;
  border-bottom: 1px solid var(--wptb-plugin-gray-300);
}

.wptb-responsive-toolbox-row div:nth-child(even) {
  justify-self: end;
}

.wptb-responsive-toolbox-wrapper > div:last-child {
  border-bottom: none !important;
}

.wptb-responsive-toolbox-dynamic-controls-holder {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 5px;
}

.wptb-responsive-toolbox-dynamic-controls-holder > div:nth-child(even) {
  justify-self: end;
}

.wptb-responsive-size-range-name {
  justify-self: center;
  font-weight: bold;
}

.wptb-responsive-clone-wrapper {
  width: 100%;
  height: 100%;
  grid-area: main;
  padding: 20px 0;
  justify-self: center;
  border: 1px solid var(--wptb-plugin-gray-300);
  border-top: none !important;
  display: flex;
  justify-content: center;
  align-items: center;
}

.wptb-responsive-clone-inner-wrapper {
  display: flex;
  justify-content: center;
  width: 100%;
}


.wptb-checkerboard-pattern {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyIDIiPgogICAgPHJlY3Qgd2lkdGg9IjEiIGhlaWdodD0iMSIgeD0iMCIgeT0iMCIgZmlsbD0icmdiKDIwMywyMTMsMjI0KSIvPgogICAgPHJlY3Qgd2lkdGg9IjEiIGhlaWdodD0iMSIgeD0iMSIgeT0iMCIgZmlsbD0icmdiKDIzNywyNDIsMjQ3KSIvPgogICAgPHJlY3Qgd2lkdGg9IjEiIGhlaWdodD0iMSIgeD0iMSIgeT0iMSIgZmlsbD0icmdiKDIwMywyMTMsMjI0KSIvPgogICAgPHJlY3Qgd2lkdGg9IjEiIGhlaWdodD0iMSIgeD0iMCIgeT0iMSIgZmlsbD0icmdiKDIzNywyNDIsMjQ3KSIvPgo8L3N2Zz4=");
  background-repeat: repeat;
  background-size: 20px;
}

.wptb-responsive-disabled-table-overlay {
  /*grid-area: main;*/
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-image: repeating-linear-gradient(45deg, transparent, transparent 15px, rgba(1, 1, 1, 0.2) 15px, rgba(1, 1, 1, 0.2) 30px);
  z-index: 10;
}

.wptb-responsive-wait-overlay {
  /*grid-area: main;*/
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.4);
  color: #fff;
  text-transform: uppercase;
  font-weight: bold;
}

.wptb-responsive-wait-overlay:after {
  content: '';
  animation: wptb-text-dots 2s infinite;
}

@keyframes wptb-text-dots {
  0% {
    content: ''
  }
  33% {
    content: '.'
  }
  66% {
    content: '..'
  }
  100% {
    content: '...'
  }
}

.wptb-controls-flex-row {
  display: flex;
  align-items: center;
  flex-direction: row;
}

.wptb-controls-flex-row label {
  margin: 0 5px;
}

/*checkbox fix for WordPress default style adding margin-top*/
.wptb-responsive-builder-main input[type="checkbox"] {
  margin-top: 0 !important;
}

.wptb-responsive-cell-identifier {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 4rem;
  text-shadow: 3px 3px 1px var(--wptb-plugin-gray-300);
  opacity: 0;
  transition: opacity 0.5s ease-out;
  z-index: 100;
}

.wptb-responsive-show-cell-identifier .wptb-responsive-cell-identifier {
  opacity: 1 !important;
}

.wptb-plugin-modal-window {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 600000;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  text-align: center;

  &[data-is-fixed="true"] {
    position: fixed;
  }


  & * {
    box-sizing: border-box;
  }
}

.wptb-plugin-modal-inner-window {
  max-width: 400px;
  background-color: #fff;
  border-radius: 3px;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: "modalHeader" "modalContent";
  overflow: hidden;
}

.wptb-plugin-modal-header {
  grid-area: modalHeader;
  display: grid;
  justify-content: center;
  grid-template-columns: 1fr;
  align-items: center;
  border-bottom: 1px solid $gray-400;

  .wptb-plugin-modal-header-title {
    font-weight: bold;
    grid-row: 1;
    grid-column: 1;
  }

  .wptb-plugin-modal-header-close {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    grid-row: 1;
    grid-column: 1;

    .wptb-plugin-modal-close-wrapper {
      @extend %default-transition;
      padding: 10px 15px;
      font-weight: bold;
      border-left: 1px solid $gray-400;
      color: $gray-400;
      cursor: pointer;
      font-size: 120%;

      &:hover {
        color: $white;
        background-color: $gray-400;
      }
    }
  }
}

.wptb-plugin-modal-content-container {
  grid-area: modalContent;
  padding: 20px;
  display: grid;
  grid-template-areas:
            "modalIcon message"
            "slotContainer slotContainer"
            "buttonContainer buttonContainer";
  grid-gap: 20px;

}

.wptb-embed-button-success {
  background-color: $green-500 !important;
}

.wptb-plugin-modal-slot-container {
  grid-area: slotContainer;
}

.wptb-plugin-modal-icon {
  grid-area: modalIcon;
  width: 50px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
  color: $logo-color;

  .wptb-plugin-modal-icon-parent-wrapper {
    @extend %size-full;
    @extend %flex-center-all;

    .wptb-plugin-modal-icon-inner-wrapper {
      @extend %size-full;
      @extend %flex-center-all;

      svg {
        @extend %size-full;
      }
    }
  }

}

.wptb-plugin-modal-message {
  @extend %flex-center-all;
  grid-area: message;
}

.wptb-plugin-modal-button-container {
  margin: 5px 0 0 0;
  justify-self: center;
  grid-area: buttonContainer;
  width: 100%;
}

.wptb-plugin-button-material {
  width: fit-content;
  padding: 5px;
  border-radius: 3px;
  background-color: var(--wptb-plugin-logo-color);
  color: #fff;
  cursor: pointer;
  transition: all 0.05s ease-out;
}

.wptb-plugin-button-material:active {
  transform: scale(0.95);
}

.wptb-plugin-button-material[disabled] {
  background-color: var(--wptb-plugin-gray-400) !important;
  cursor: not-allowed;
}

.wptb-plugin-button-material[disabled]:active {
  transform: none;
}

.wptb-plugin-button-material-fit-content {
  width: fit-content !important;
}

.wptb-plugin-button-material-full-size {
  width: 100%;
}

.wptb-plugin-responsive-base {
  min-width: auto !important;
  width: 100% !important;
}

/*visual update for popup components inside responsive menu*/
.wptb-responsive-toolbox-wrapper .wptb-menu-popup-wrapper {
  margin-right: 0 !important;
}

.wptb-responsive-breakpoint-edit-wrapper {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-flow: row;
  align-items: center;
}

.wptb-toggle input:disabled + i {
  background: var(--wptb-plugin-gray-400);
}

.wptb-control-row {
  width: 95%;
}

label.wptb-control-row {
  text-transform: capitalize;
}

.wptb-builder-content {
  position: relative;
  height: 100%;
  overflow: auto;
}

#wptb_builder[data-wptb-active-section="table_responsive_menu"] .wptb-builder-content {
  overflow-x: hidden !important;
}

.wptb-responsive-builder-toolbox-float {
  grid-area: toolbox;
  padding: 10px 0;
  display: flex;
  justify-content: space-between;
}

.wptb-responsive-builder-toolbox-left-float {
  /*display: inline;*/
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.wptb-number-postfix-buttons-wrapper {
  margin-left: 10px;
  display: flex !important;
  height: 100%;
}

.wptb-number-postfix-button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 30px;
  border: 1px solid var(--wptb-plugin-gray-400) !important;
  background-color: var(--wptb-plugin-gray-100) !important;
  border-radius: 5px;
  cursor: pointer;
  font-weight: bold;
  color: var(--wptb-plugin-theme-text-color-main) !important;
  font-size: 110%;
}

.wptb-number-postfix-button:active {
  animation: wptb-push 0.2s ease-out;
}

.wptb-panel-toggle-section {
  grid-area: sidebar-footer;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  padding: 20px 10px;
  background-color: var(--wptb-plugin-logo-color);
  color: #fff;
}


.wptb-left-panel[data-wptb-panel-location="right"] .wptb-panel-toggle-section {
  justify-content: flex-start !important;
}


.wptb-panel-toggle-section .wptb-panel-drawer-icon {
  cursor: pointer;
  transform: scale(2);
}

.wptb-left-panel[data-wptb-panel-location="right"] .wptb-panel-toggle-section .wptb-panel-drawer-icon {
  transform: scale(2) rotateZ(180deg);
}

.collapsed .wptb-panel-toggle-section {
  opacity: 1 !important;
}

.wptb-cell-related-drop-handle {
  position: fixed;
  display: none;
  background-color: #e2e8f0c7;
  z-index: 300000;
  pointer-events: none;
  transition: all 0.2s ease-out;
  animation: wptb-basic-appear 0.2s ease-out;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: bold;
  text-transform: uppercase;
  color: #4a5568;
}

.wptb-control-media-select-button {
  width: 100px;
  height: 50px;
  border: 1px solid var(--wptb-plugin-gray-400);
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;
  cursor: pointer;
}

.wptb-control-media-button-wrapper {
  position: relative;
}

.wptb-control-media-clear-button {
  position: absolute;
  width: 20px;
  height: 20px;
  top: -5px;
  right: -10px;
  color: red;
  cursor: pointer;
}

.wptb-control-media-clear-button span {
  transform: scale(1.8);
}

.wptb-controls-ul-row {
  display: flex;
}

.wptb-button-svg-center {
  display: flex !important;
  justify-content: center;
  align-items: center;
}

/*region sides control*/
.wptb-sides-link-icon-wrapper {
  width: 16px;
  height: 16px;
  cursor: pointer;
  transition: transform 0.1s ease-out;
  filter: opacity(0.7);
}

.wptb-sides-link-icon-wrapper:active {
  transform: scale(0.9);
}

.wptb-sides-controls-wrapper {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}

.wptb-side-control-header {
  color: var(--wptb-plugin-gray-500);
  text-align: center;
  margin: 5px 0;
}

.wptb-side-control-main-input {
  width: 100%;
  height: 30px !important;
  border: 1.5px solid var(--wptb-plugin-gray-400) !important;
  border-radius: 0 !important;
  text-align: center;
}

.wptb-side-control-number-input {
  transition: all 0.3s ease-out;
  margin-left: 5px;
}

.wptb-side-values-linked .wptb-side-control-number-input {
  margin-left: 0;
}

.wptb-side-control-main-input:active, .wptb-side-control-main-input:focus {
  outline: none !important;
  box-shadow: none !important;
}

.wptb-side-control-input-wrapper:first-of-type .wptb-side-control-main-input {
  border-left-width: 3px !important;
  border-radius: 5px 0 0 5px !important;
}

.wptb-side-control-input-wrapper:last-of-type .wptb-side-control-main-input {
  border-right-width: 3px !important;
  border-radius: 0 5px 5px 0 !important;
}

.wptb-side-control-dropdown-wrapper {
  align-self: end;
}

.wptb-side-control-dropdown {
  background-color: var(--wptb-plugin-gray-400) !important;
}

/*endregion*/

/*region named toggle control*/
.wptb-named-toggle-control-wrapper {
  position: relative;
  min-height: 30px;
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-columns: 1fr;
  grid-auto-flow: column;
  justify-content: center;
  align-items: center;
  border: 1px solid var(--wptb-plugin-gray-400);
  border-radius: 5px;
  background-color: var(--wptb-plugin-white);
  overflow: hidden;
}

.wptb-named-toggle-item {
  display: flex;
  justify-content: center;
  align-items: center;
  text-wrap: avoid;
  padding: 10px;
  z-index: 10;
  cursor: pointer;
  color: var(--wptb-plugin-gray-400);
  font-weight: bold;
  font-size: 90% !important;
}

.wptb-named-toggle-item[data-wptb-named-toggle-active='true'] {
  color: var(--wptb-plugin-white);
}

.wptb-named-toggle-active-indicator {
  position: absolute;
  height: 100%;
  background-color: var(--wptb-plugin-logo-color);
  z-index: 9;
  transition: left 0.2s ease-out;
}

/*endregion*/

/*region cell vertical alignment*/
.wptb-cell[data-wptb-cell-vertical-alignment="top"] {
  vertical-align: baseline;
}

.wptb-cell[data-wptb-cell-vertical-alignment="center"] {
  vertical-align: middle;
}

.wptb-cell[data-wptb-cell-vertical-alignment="bottom"] {
  vertical-align: bottom;
}

/*endregion*/

/*sortable mode*/
.wptb-table-setup:not(.wptb-preview-table-manage-cells) .wptb-preview-table[data-wptb-sortable-table-vertical="1"] td[data-sorted-vertical]::after,
.wptb-table-setup:not(.wptb-preview-table-manage-cells) .wptb-preview-table[data-wptb-sortable-table-horizontal="1"] td[data-sorted-horizontal]::after,
.wptb-responsive-clone-wrapper .wptb-preview-table[data-wptb-sortable-table-vertical="1"] td[data-sorted-vertical]::after,
.wptb-responsive-clone-wrapper .wptb-preview-table[data-wptb-sortable-table-horizontal="1"] td[data-sorted-horizontal]::after {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 101;
  display: grid;
  font-family: dashicons;
  font-size: 35px;
  align-content: center;
  text-align: center;
}

.wptb-table-setup:not(.wptb-preview-table-manage-cells) .wptb-preview-table[data-wptb-sortable-table-vertical="1"] td[data-sorted-vertical="ask"]::after,
.wptb-responsive-clone-wrapper .wptb-preview-table[data-wptb-sortable-table-vertical="1"] td[data-sorted-vertical="ask"]::after {
  content: "\f142";
  right: 0;
}

.wptb-table-setup:not(.wptb-preview-table-manage-cells) .wptb-preview-table[data-wptb-sortable-table-vertical="1"] td[data-sorted-vertical="desk"].sortable-hover::after,
.wptb-responsive-clone-wrapper .wptb-preview-table[data-wptb-sortable-table-vertical="1"] td[data-sorted-vertical="desk"].sortable-hover::after {
  content: "\f142";
  cursor: pointer;
  opacity: 0.7;
}

.wptb-table-setup:not(.wptb-preview-table-manage-cells) .wptb-preview-table[data-wptb-sortable-table-vertical="1"] td[data-sorted-vertical="desk"]::after,
.wptb-responsive-clone-wrapper .wptb-preview-table[data-wptb-sortable-table-vertical="1"] td[data-sorted-vertical="desk"]::after {
  content: "\f140";
  right: 0;
}

.wptb-table-setup:not(.wptb-preview-table-manage-cells) .wptb-preview-table[data-wptb-sortable-table-vertical="1"] td[data-sorted-vertical="ask"].sortable-hover::after,
.wptb-responsive-clone-wrapper .wptb-preview-table[data-wptb-sortable-table-vertical="1"] td[data-sorted-vertical="ask"].sortable-hover::after {
  content: "\f140";
  cursor: pointer;
  opacity: 0.7;
}

.wptb-table-setup:not(.wptb-preview-table-manage-cells) .wptb-preview-table[data-wptb-sortable-table-horizontal="1"] td[data-sorted-horizontal="ask"]::after,
.wptb-responsive-clone-wrapper .wptb-preview-table[data-wptb-sortable-table-horizontal="1"] td[data-sorted-horizontal="ask"]::after {
  content: "\f141";
  left: 0;
}

.wptb-table-setup:not(.wptb-preview-table-manage-cells) .wptb-preview-table[data-wptb-sortable-table-horizontal="1"] td[data-sorted-horizontal="desk"].sortable-hover::after,
.wptb-responsive-clone-wrapper .wptb-preview-table[data-wptb-sortable-table-horizontal="1"] td[data-sorted-horizontal="desk"].sortable-hover::after {
  content: "\f141";
  cursor: pointer;
  opacity: 0.7;
}

.wptb-table-setup:not(.wptb-preview-table-manage-cells) .wptb-preview-table[data-wptb-sortable-table-horizontal="1"] td[data-sorted-horizontal="desk"]::after,
.wptb-responsive-clone-wrapper .wptb-preview-table[data-wptb-sortable-table-horizontal="1"] td[data-sorted-horizontal="desk"]::after {
  content: "\f139";
  left: 0;
}

.wptb-table-setup:not(.wptb-preview-table-manage-cells) .wptb-preview-table[data-wptb-sortable-table-horizontal="1"] td[data-sorted-horizontal="ask"].sortable-hover::after,
.wptb-responsive-clone-wrapper .wptb-preview-table[data-wptb-sortable-table-horizontal="1"] td[data-sorted-horizontal="ask"].sortable-hover::after {
  content: "\f139";
  cursor: pointer;
  opacity: 0.7;
}

/*sortable mode end*/

/*endregion*/

/*region generate menu*/
.wptb-generate-wrapper {
  margin: 0 50px 0 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: inherit;
}

.wptb-generate-menu {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: 'header' 'listing';
}

.wptb-generate-menu-header {
  grid-area: header;
  padding: 30px;
  border-bottom: 1px solid var(--wptb-plugin-gray-300);
}

.wptb-generate-menu-listing {
  grid-area: listing;
  padding: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.wptb-generate-search {
  border: 1px solid var(--wptb-plugin-gray-300) !important;
  text-align: center;
  font-size: 90%;
  color: inherit;
}

.wptb-generate-search:active, .wptb-generate-search:focus {
  border: 1px solid var(--wptb-plugin-gray-400) !important;
  inset: 0 !important;
  box-shadow: none !important;
}

.wptb-prebuilt-card {
  width: 200px;
  max-width: 200px;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 125px auto;
  grid-template-areas: 'main' 'footer';
  border-radius: 5px;
  transition: all 0.4s ease-out;
  background-color: var(--wptb-plugin-theme-color-light);
  cursor: pointer;
  margin: calc(var(--wptb-prebuilt-card-control-size) + 10px);
}

.wptb-prebuilt-card-active {
  cursor: default;
  animation: wptb-pop 0.2s ease-out;
}

@keyframes wptb-pop {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  0% {
    transform: scale(1);
  }
}

@keyframes wptb-more-pop {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.5);
  }
  0% {
    transform: scale(1);
  }
}

.wptb-prebuilt-card:hover {
  box-shadow: 3px 3px 2px 0.5px rgba(0, 0, 0, 0.2);
}

.wptb-prebuilt-card-preview {
  position: relative;
  grid-area: main;
  border: var(--wptb-prebuilt-card-border-size) solid var(--wptb-plugin-gray-400);
  border-bottom: 1px solid var(--wptb-plugin-gray-400) !important;
  background-color: var(--wptb-plugin-gray-300);
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: 'preview';
  justify-content: center;
  align-items: center;
  border-radius: 5px 5px 0 0;
}

.wptb-prebuilt-card .wptb-settings-fetching {
  grid-area: main;
  width: 100%;
  height: 100%;
  z-index: 100;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--wptb-plugin-gray-500);
}

.wptb-prebuilt-card-preview table {
  transition: opacity 0.2s ease-out;
}

.wptb-team-prebuilt {
  border: var(--wptb-prebuilt-card-border-size) solid var(--wptb-plugin-logo-color) !important;
}

.wptb-prebuilt-card-controls {
  grid-area: preview;
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
}

.wptb-prebuilt-live-display {
  width: 100%;
  height: 100%;
  grid-area: preview;
  padding: 15px
}

.wptb-prebuilt-live-table {
  width: 100%;
  height: 100%;
  background-color: var(--wptb-plugin-theme-color-light);
  border-radius: 5px;
  /*overflow: hidden;*/
  border: 1px solid var(--wptb-plugin-gray-400);
  display: grid;
}

.wptb-prebuilt-live-cell {
  width: 100%;
  height: 100%;
  border: 0.5px solid var(--wptb-plugin-gray-400);
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: visible;
  z-index: 10;
}

.wptb-prebuilt-live-cell-hover {
  opacity: 0.7;
  background-color: var(--wptb-plugin-logo-color);
}


.wptb-prebuilt-live-cell:hover .wptb-prebuilt-live-control {
  opacity: unset;
  pointer-events: all;
}

.wptb-prebuilt-live-control-hide .wptb-prebuilt-live-control {
  display: none;
}

.wptb-prebuilt-live-control-active {
  background-color: var(--wptb-plugin-logo-color);
}

.wptb-prebuilt-live-control {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  transition: all 0.1s ease-out;
  font-size: 120%;
}

.wptb-prebuilt-live-control:active {
  animation: wptb-push 0.2s ease-out;
}

.wptb-prebuilt-added-cell {
  background-color: turquoise;
  cursor: default;
  z-index: 1 !important;
}

.wptb-prebuilt-control {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: all;
}

.wptb-prebuilt-control[data-orientation="row"] {
  top: 0;
  transform: translateY(calc(-100% - var(--wptb-prebuilt-card-border-size)));
  display: flex;
  justify-content: center;
  align-items: center;
}

.wptb-prebuilt-control[data-orientation="col"] {
  left: 0;
  transform: translateX(calc(-100% - var(--wptb-prebuilt-card-border-size)));
  display: flex;
  flex-wrap: wrap;
  flex-direction: column-reverse;
  width: var(--wptb-prebuilt-card-control-size);
  justify-content: center;
  align-items: center;
}

.wptb-prebuilt-control-input {
  text-align: center;
  width: var(--wptb-prebuilt-card-control-size);
  height: var(--wptb-prebuilt-card-control-size);
  border: 1px solid var(--wptb-plugin-gray-300) !important;
  color: inherit !important;
  border-radius: 0 !important;
  margin: 0 !important;
}

.wptb-prebuilt-control-input:active, .wptb-prebuilt-control-input:focus {
  border: 1px solid var(--wptb-plugin-gray-400) !important;
  inset: 0 !important;
  box-shadow: none !important;
}

.wptb-prebuilt-control-input:disabled {
  color: var(--wptb-plugin-gray-300) !important;
}

.wptb-prebuilt-control-increment-box {
  width: var(--wptb-prebuilt-card-control-size);
  height: var(--wptb-prebuilt-card-control-size);
  background-color: var(--wptb-plugin-gray-300);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 150%;
  cursor: pointer;
}

.wptb-prebuilt-control-increment-box:hover {
  background-color: var(--wptb-plugin-gray-400);
}

.wptb-prebuilt-control-increment-box[disabled] {
  background-color: var(--wptb-plugin-gray-200) !important;
  color: var(--wptb-plugin-gray-400) !important;
  cursor: default;
}

.wptb-prebuilt-card-footer {
  grid-area: footer;
  display: flex;
  justify-content: center;
  align-items: center;
}

.wptb-prebuilt-card-footer-element {
  padding: 15px;
  border: var(--wptb-prebuilt-card-border-size) solid var(--wptb-plugin-gray-400);
  border-top: 0 !important;
  width: 100%;
  height: 100%;
  border-radius: 0 0 5px 5px;
}

.wptb-prebuilt-card-footer-button-holder {
  padding: 0 !important;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 1px;
  background-color: var(--wptb-plugin-gray-500);
}

.wptb-prebuilt-card-footer-button-holder-single {
  grid-template-columns: 1fr !important;
}

.wptb-prebuilt-blank {
  font-size: 400%;
  color: var(--wptb-plugin-gray-500);
  margin: 0 !important;
}

.wptb-prebuilt-footer-button {
  width: 100%;
  height: 100%;
  cursor: pointer;
  transition: color 0.2s ease-out;
  font-weight: bold;
  padding: 15px;
  color: var(--wptb-plugin-gray-400);
}

.wptb-prebuilt-footer-generate {
  background-color: var(--wptb-plugin-logo-color);
}

.wptb-prebuilt-footer-edit {
  background-color: var(--wptb-plugin-green-500);
}

.wptb-prebuilt-footer-button:first-of-type {
  border-radius: 0 0 0 5px;
}

.wptb-prebuilt-footer-button:last-of-type {
  border-radius: 0 0 5px 0;
}

.wptb-prebuilt-footer-button:only-of-type {
  border-radius: 0 0 5px 5px;
}

.wptb-prebuilt-footer-button:hover {
  color: var(--wptb-plugin-theme-color-light);
}

.wptb-unselectable {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.wptb-no-pointer-events {
  pointer-events: none;
}

.wptb-plugin-basic-disappear {
  animation: wptb-basic-disappear 0.1s ease-out;
}

@keyframes wptb-basic-disappear {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.wptb-prebuilt-ad {
  margin: 50px;
  color: var(--wptb-plugin-gray-500);
}

.wptb-prebuilt-ad-link {
  font-size: 120%;
  color: var(--wptb-plugin-logo-color) !important;
  font-weight: bold;
}

.wptb-prebuilt-table-wrapper {
  width: 100%;
  overflow: hidden !important;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  animation: wptb-basic-disappear 0.2s ease-out alternate-reverse;
  pointer-events: none;
}

.wptb-prebuilt-table-wrapper table {
  /*width: 700px;*/
}

.wptb-prebuilt-card-search-indicator-main {
  color: var(--wptb-plugin-gray-500);
}

.wptb-prebuilt-card-search-indicator {
  color: var(--wptb-plugin-logo-color) !important;
  font-weight: bold;
}

.wptb-prebuilt-card-icon {
  width: 25px;
  height: 25px;
  position: absolute;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}

.wptb-prebuilt-card-icon svg {
  width: 100%;
  height: 100%;

}

.wptb-prebuilt-card-fav-icon {
  left: 8px;
  top: 8px;
}

.wptb-prebuilt-card-delete-icon {
  background-color: var(--wptb-plugin-gray-200);
  padding: 6px;
  border-radius: 50%;
  width: 35px;
  height: 35px;
  right: -15px;
  top: -15px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px solid var(--wptb-plugin-gray-400);
  transition: all 0.2s ease-out;
  z-index: 120;
}

.wptb-prebuilt-card-delete-icon:hover {
  transform: scale(1.1);
}

.wptb-prebuilt-card-delete-icon {
  fill: red;
}

.wptb-prebuilt-card-fav-icon svg {
  transition: fill 0.2s ease-out;
  fill: transparent;
  stroke-width: 40;
  stroke: var(--wptb-plugin-theme-color-light);
}

.wptb-prebuilt-card-fav-icon:active {
  animation: wptb-push 0.2s ease-out;
}

.wptb-prebuilt-card-fav-icon.is-fav svg {
  fill: var(--wptb-plugin-logo-color) !important;
  stroke-width: 0 !important;
}

.wptb-prebuilt-card-fav-icon:hover svg {
  fill: var(--wptb-plugin-theme-color-light);
}

@keyframes wptb-push {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}

.wptb-prebuilt-delete-module-confirmation-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.5);
  color: var(--wptb-plugin-theme-color-light);
  z-index: 100;
  border-radius: 5px 5px 0 0;
}

.wptb-prebuilt-delete-module-confirmation-overlay div {
  margin: 5px;
}

.wptb-prebuilt-delete-button-container {
  width: 100%;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

.wptb-prebuilt-card-circle-icon-button {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  color: var(--wptb-plugin-theme-color-light)
}

.wptb-prebuilt-card-circle-icon-button svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.wptb-prebuilt-card-circle-icon-button:active {
  animation: wptb-push 0.2s ease-out;
}

.wptb-prebuilt-card-circle-icon-button[data-wptb-button-type='positive'] {
  background-color: var(--wptb-plugin-green-500);
}

.wptb-prebuilt-card-circle-icon-button[data-wptb-button-type='negative'] {
  background-color: red;
}

.wptb-prebuilt-mark-indicator {
  position: absolute;
  pointer-events: none;
  width: calc(100% + 10px);
  height: calc(100% + 10px);
  top: -5px;
  left: -5px;
  background: repeating-linear-gradient(45deg, white, white 5px, var(--wptb-plugin-logo-color) 5px, var(--wptb-plugin-logo-color) 10px);
  background-size: 400% 400%;
  animation: linear-gradient-move 20s linear infinite reverse;
  opacity: 0.2;
}

.wptb-repeating-linear-gradient {
  background: repeating-linear-gradient(45deg, white, white 5px, var(--wptb-plugin-logo-color) 5px, var(--wptb-plugin-logo-color) 10px);
  background-size: 400% 400%;
  animation: linear-gradient-move 20s linear infinite reverse;
}

@keyframes linear-gradient-move {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}

.wptb-prebuilt-card .wptb-prebuilt-mark-indicator {
  display: none;
}

.wptb-prebuilt-tab-control {
  position: absolute;
  top: 20px;
  left: 20px;
  border: 1px solid var(--wptb-plugin-gray-400);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
}

.wptb-prebuilt-tab-control div {
  padding: 5px;
}

.wptb-prebuilt-tab-control-label {
  text-transform: capitalize;
  border-right: 1px solid var(--wptb-plugin-gray-400);
  white-space: nowrap;
}

.wptb-prebuilt-tab-control-buttons-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  flex-wrap: nowrap;
}

.wptb-prebuilt-tab-control-icon {
  width: 35px;
  height: 35px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.wptb-prebuilt-tab-control-icon[data-wptb-prebuilt-tab-control-type="stop"] {
  fill: red;
}

.wptb-prebuilt-tab-control-icon[data-wptb-prebuilt-tab-control-type="restart"] {
  fill: var(--wptb-plugin-green-500);
}

.wptb-prebuilt-tab-control-icon svg {
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.wptb-prebuilt-tab-control-icon svg:active {
  animation: wptb-push 0.2s ease-out;
}

.wptb-prebuilt-dev-tool {
  position: absolute;
  top: 20px;
  right: 20px;
  border: 1px solid var(--wptb-plugin-gray-400);
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
}

.wptb-prebuilt-dev-tool div {
  padding: 5px;
}

.wptb-prebuilt-dev-tool .label {
  font-weight: bold;
  border-bottom: 1px solid var(--wptb-plugin-gray-400);
}

.wptb-prebuilt-dev-tool .prebuilt-button {
  width: fit-content;
  padding: 10px;
  margin: 5px;
  color: var(--wptb-plugin-theme-color-light);
  background-color: var(--wptb-plugin-logo-color);
  border-radius: 5px;
  cursor: pointer;
}

.wptb-prebuilt-dev-tool .prebuilt-button:active {
  animation: wptb-push 0.2s ease-out;
}

.wptb-prebuilt-display-calculate {
  width: 700px;
}

/*endregion*/

/*region tinyMCE blocker*/
.wptb-preview-table-manage-cells table tr td div {
  pointer-events: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.wptb-plugin-blocker-element {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.wptb-highlighted .wptb-plugin-blocker-element {
  background: repeating-linear-gradient(45deg, white, white 5px, var(--wptb-plugin-logo-color) 5px, var(--wptb-plugin-logo-color) 10px);
  background-size: 400% 400%;
  animation: linear-gradient-move 40s linear infinite reverse;
  opacity: 0.2;
}

.wptb-plugin-blocker-element-empty::before {
  content: 'Cell';
  display: block;
  font-weight: normal;
  font-size: 80%;
  text-align: center;
  color: #969fa6;
}

.wptb-plugin-blocker-element-empty::after {
  content: '';
  display: block;
  border: 1px dashed #969fa6;
  position: absolute;
  top: 2px;
  right: 2px;
  bottom: 2px;
  left: 2px;
}

/*endregion*/

/*region header-toolbar*/
.wptb-plugin-header-toolbar {
  top: 0;
  position: absolute;
  left: 50%;
  padding: 0 10px;
  border: 1px solid var(--wptb-plugin-gray-300);
  z-index: 1;
  background-color: var(--wptb-plugin-gray-100);
  transition: top 0.2s ease-out;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.wptb-plugin-header-toolbar div {
  font-size: 110%;
  width: fit-content;
  padding: 5px;
  margin: 0 5px;
}

.wptb-plugin-header-toolbar .dashicons {
  color: var(--wptb-plugin-logo-color) !important;
  font-weight: bold !important;
}

/*endregion*/

/*region versionControl*/
.wptb-settings-version-control {
  max-width: 800px;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 300px;
  grid-template-areas: 'main changelog';
  grid-template-rows: 500px;
  grid-gap: 50px;
}

.wptb-version-control-main {
  grid-area: main;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.wptb-version-control-main-row {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 10px 0;
  flex-direction: column;
}

.wptb-version-control-warning-span {
  color: var(--wptb-plugin-red-600) !important;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 120%;
}

.wptb-version-control-warning-info {
  font-size: 90%;
}

.wptb-version-control-changelog {
  grid-area: changelog;
  background-color: var(--wptb-plugin-gray-200);
  border: 1px solid var(--wptb-plugin-gray-300);
  font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  padding: 10px;
  overflow-y: scroll;
  height: 100%;
}

.wptb-version-control-controls {
  width: 100%;
  height: 100%;
  margin: 20px 0;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: repeat(3, auto);
  align-items: center;
  grid-gap: 20px
}

.wptb-version-control-row-element {
  padding: 10px 0;

}

.wptb-version-control-row-label {
  text-transform: capitalize;
  font-weight: bold;
}

.wptb-version-control-row-label:after {
  content: ':';
}

.wptb-version-indicator {
  height: 100%;
  /*width: 100%;*/
  display: flex;
  align-items: center;
  margin-right: 10px;
}

.wptb-version-indicator-circle {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  margin-right: 10px;
}

.wptb-version-indicator-match {
  background-color: var(--wptb-plugin-green-500);
}

.wptb-version-indicator-low {
  background-color: var(--wptb-plugin-yellow-500);
}

.wptb-version-control-anchor {
  text-transform: capitalize;
}

.wptb-version-control-row-slot {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row;
}

/*endregion*/

.wptb-table-tags-menu-wrapper {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

/*region tagControl*/
.wptb-tag-control-cloud-wrapper {
  width: 100%;
}

.wptb-tag-control-create-wrapper {
  margin-top: 20px !important;
  border-top: 1px solid var(--wptb-plugin-gray-400);
  padding-top: 10px;
}

.wptb-tag-control-cloud-wrapper:nth-of-type(n+1) {
  margin-top: 10px;
}

.wptb-tag-control-cloud-wrapper .wptb-settings-item-title {
  text-transform: capitalize;
  font-size: 90% !important;
  font-weight: bold;
}

.wptb-tag-control-cloud {
  width: 100%;
  min-height: 90px;
  max-height: 90px;
  overflow-y: auto;
  background-color: var(--wptb-plugin-gray-200);
  padding: 3px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  position: relative;
  border: 1px solid var(--wptb-plugin-gray-400);
  border-radius: 5px;
}

.wptb-tag-ribbon-wrapper {
  color: var(--wptb-plugin-theme-color-light);
  font-size: 90% !important;
  padding: 3px 5px 3px 10px;
  background-color: var(--wptb-plugin-logo-color);
  border-radius: 999px !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 5px;
  cursor: default;
  animation: wptb-basic-appear 0.2s ease-out;
}

.wptb-tag-ribbon-name {
  font-size: inherit !important;
}

.wptb-tag-ribbon-wrapper:hover .wptb-tag-operation-button {
  opacity: 1;
}

.wptb-tag-operation-button {
  width: 20px;
  height: 20px;
  border-radius: 100%;
  margin-left: 10px;
  opacity: 0;
  transition: all 0.3s ease-out;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.wptb-tag-operation-add-button {
  background-color: var(--wptb-plugin-green-500);
}

.wptb-tag-operation-remove-button {
  background-color: var(--wptb-plugin-red-600);
}

.wptb-tag-control-cloud-empty {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  color: var(--wptb-plugin-gray-500);
  display: flex;
  justify-content: center;
  align-items: center;
  font-style: italic;
  font-size: 90% !important;
}

.wptb-tag-control-cloud-empty:before, .wptb-tag-control-cloud-empty:after {
  content: '==';
  margin: 0 5px;
}

.wptb-tag-control-search-wrapper {
  margin-top: 5px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.wptb-tag-control-search {
  border: 1px solid var(--wptb-plugin-gray-400) !important;
  text-align: center;
  font-size: 90% !important;
  color: inherit;
  border-radius: 999px !important;
  padding: 0 !important;
}

.wptb-tag-control-search:active, .wptb-tag-control-search:focus {
  border: 1px solid var(--wptb-plugin-gray-500) !important;
  inset: 0 !important;
  box-shadow: none !important;
}

.wptb-tag-control-search-input {
  position: relative;
  width: fit-content;
  font-size: 90% !important;
}

.wptb-tag-control-search-clear {
  position: absolute;
  top: 0;
  right: 10px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--wptb-plugin-gray-500);
  cursor: pointer;
  padding: 5px;
}

.wptb-tag-control-search-indicator {
  font-weight: bold;
  color: var(--wptb-plugin-green-500) !important;
  font-size: inherit !important;
}

.wptb-tag-control-create-controls-wrapper {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  grid-gap: 10px;
  margin-top: 10px;
}

.wptb-tag-control-create-controls-wrapper input {
  width: 100% !important;
}

.wptb-tag-control-create-control-label {
  font-size: 90% !important;
  text-transform: capitalize;
}

.wptb-tag-control-create-button {
  background-color: var(--wptb-plugin-logo-color);
  color: var(--wptb-plugin-theme-color-light);
  display: flex;
  justify-self: end;
  justify-content: center;
  align-items: center;
  font-size: 90% !important;
  text-transform: uppercase;
  padding: 5px;
  border-radius: 5px;
  grid-column: 2;
  width: fit-content;
  cursor: pointer;
  transition: all 0.2s ease-out;
}

.wptb-tag-control-create-button[data-disabled] {
  background-color: var(--wptb-plugin-gray-400);
  pointer-events: none;
}

.wptb-tag-control-status {
  grid-column: 1;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
}

.wptb-tag-control-status[data-status='positive'] {
  color: var(--wptb-plugin-green-500) !important;
}

.wptb-tag-control-status[data-status='negative'] {
  color: var(--wptb-plugin-red-600) !important;
}

.wptb-tag-control-busy {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  color: var(--wptb-plugin-logo-color);
  grid-column: 1;
}

/*endregion*/

.wptb-table-cell-select-wrapper {
  display: grid;
  grid-gap: 5px;
  width: 100%;
  height: 150px;
  border: 1px solid var(--wptb-plugin-gray-400);
  padding: 10px;
  border-radius: 3px;
  background-color: var(--wptb-plugin-gray-300);
}

.wptb-table-cell-select-cell {
  width: 100%;
  height: 100%;
  cursor: pointer;
  transition: all 0.2s ease-out;
  border-radius: 3px;
  background-color: var(--wptb-plugin-gray-400);
}

.wptb-table-cell-select-cell:hover {
  background-color: var(--wptb-plugin-gray-500);
}

.wptb-table-cell-select-cell[data-cell-selected=true] {
  /*background-color: var(--wptb-plugin-gray-300);*/
  /*background-color: #93B9CD !important;*/
  background-color: var(--wptb-plugin-logo-color) !important;
}

.wptb-table-cell-indicator {
  position: fixed;
  opacity: 0.2;
  pointer-events: none;
}

.wptb-different-border-control-wrapper .wptb-settings-middle-xs {
  padding-top: 5px !important;
  /*padding-left: 0 !important;*/
  /*padding-right: 0 !important;*/
  border-bottom: 0 !important;
}

.wptb-different-border-range-input .wptb-settings-item-header {
  padding-bottom: 0 !important;
}

/*region color picker*/
.wptb-color-picker-wrapper {
  width: 100%;
}

.wptb-color-picker-input-wrapper {
  width: 100px;
  height: 30px;
  border: 1px solid var(--wptb-plugin-gray-400);
  border-radius: 3px;
  cursor: pointer;
  background-color: var(--wptb-plugin-gray-200);
  display: grid;
  grid-template-columns: 0.7fr 0.3fr;
  justify-content: center;
  align-items: center;
}

.wptb-color-picker-input-wrapper[disabled] {
  pointer-events: none;
}

.wptb-color-picker-inner-indicator {
  height: 100%;
  padding: 3px;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}

.wptb-color-picker-clear-color-indicator {
  width: 100%;
  height: 100%;
  grid-column: 1;
  grid-row: 1;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
}

.wptb-color-picker-clear-color-indicator svg {
  fill: var(--wptb-plugin-red-600)
}

.wptb-color-picker-icon-standards svg {
  width: 15px;
  height: auto;

}

.wptb-color-picker-selected-color {
  border-radius: 3px 0 0 3px;
  border: 1px solid var(--wptb-plugin-gray-400);
  transition: background-color 0.2s ease-out;
  cursor: pointer;
  grid-column: 1;
  grid-row: 1;
  z-index: 2;
}

.wptb-color-picker-alpha-checkerboard {
  z-index: 1;
  grid-column: 1;
  grid-row: 1;
  background-size: 15px !important;
}

.wptb-color-picker-logo {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  font-size: 120% !important;
  color: var(--wptb-plugin-logo-color)
}

.wptb-color-picker-logo div {
  display: flex;
  justify-content: center;
  align-items: center;
}

.wptb-color-picker-logo svg {
  fill: currentColor;
}


.wptb-color-picker-tool-wrapper {
  position: fixed;
  z-index: 100;
}

.wptb-color-picker-tool-inner-wrapper {
  position: relative;
}

.wptb-color-picker-input {
  cursor: pointer;
}

.wptb-color-picker-input:disabled {
  cursor: default;
}

[data-wptb-text-disabled=true] {
  color: var(--wptb-plugin-gray-400) !important;
}

.wptb-color-picker-clear-color-wrapper {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  left: 0;
  width: 100%;
  height: 30px;
}

.wptb-color-picker-clear-color {
  background-color: #ffffff;
  height: 100%;
  padding: 0 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid var(--wptb-plugin-gray-400);
  border-radius: 0 0 3px 3px;
  font-size: 90% !important;
  color: var(--wptb-plugin-red-600);
  cursor: pointer;
}

.wptb-color-picker-clear-color svg {
  fill: currentColor;
}

.wptb-color-picker-input-wrapper[disabled] .wptb-color-picker-logo svg {
  fill: var(--wptb-plugin-gray-400);
}

.wptb-color-picker-input-wrapper[disabled] .wptb-color-picker-selected-color {
  background-color: var(--wptb-plugin-gray-300) !important;
}

/*endregion*/

/*region local dev file control*/
.wptb-local-dev-file-chooser {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.6);
}

.wptb-local-dev-modal {
  background-color: var(--wptb-plugin-theme-color-light);
  width: 500px;
  height: 300px;
  border-radius: 3px;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: minmax(min-content, max-content) 1fr minmax(min-content, max-content);
  grid-template-areas: "header" "files" "footer";
}

.wptb-local-dev-modal > div {
  padding: 5px;
  border-bottom: 1px solid var(--wptb-plugin-gray-400);
  display: flex;
  align-items: center;
}

.wptb-local-dev-modal > div:last-of-type {
  border-bottom: 0;
}

.wptb-local-dev-modal-header {
  font-weight: bold;
  text-transform: uppercase;
  justify-content: space-between;
  padding: 0 !important;
}

.wptb-local-dev-modal-title {
  padding: 5px !important;
}

.wptb-local-dev-modal-files {
  position: relative;
  overflow-y: auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  background-color: var(--wptb-plugin-gray-200);
}

.wptb-local-dev-modal-footer {
  justify-content: flex-end;
}

.wptb-local-dev-modal-footer .wptb-settings-button {
  margin: 0 5px !important;
  font-size: 90% !important;
}

.wptb-local-dev-image-card {
  width: 100px;
  max-width: 100px;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr minmax(min-content, max-content);
  grid-auto-flow: row;
  cursor: pointer;
  justify-content: center;
  align-items: center;
  margin: 5px;
  border: 2px solid var(--wptb-plugin-gray-300);
  padding: 5px;
  border-radius: 5px;
  transition: all 0.2s ease-out;
  background-color: var(--wptb-plugin-theme-color-light);
}

.wptb-local-dev-image-card[data-active=true] {
  border: 2px solid var(--wptb-plugin-logo-color) !important;
}

.wptb-local-dev-image-card:hover {
  border: 2px solid var(--wptb-plugin-gray-400);
  transform: scale(1.05);
}

.wptb-local-dev-image-holder {
  width: 100%;
  height: 100%
}

.wptb-local-dev-image-holder img {
  max-width: 100%;
  max-height: 100%;
  display: block;
}

.wptb-local-dev-image-name {
  word-break: break-all;
  display: flex;
  justify-content: center;
  align-items: center;
  font-style: italic;
  font-size: 90%;
  border-top: 1px solid var(--wptb-plugin-gray-300);
}

.wptb-local-dev-modal-close {
  padding: 0 10px;
  color: var(--wptb-plugin-red-600);
  cursor: pointer;
  font-size: 120% !important;
}

/*endregion*/

/*region upsells*/
.wptb-upsells-wrapper {
  width: 100%;
  padding: 15px;
  color: var(--wptb-plugin-theme-color-light);
  cursor: pointer;
  transition: all 0.2s ease-out;
  animation: wptb-unfold-up 0.3s ease-out forwards;
  animation-delay: 0.5s;
  transform: rotateX(-90deg);
  transform-origin: top;
  box-sizing: border-box;
}

.wptb-left-panel .wptb-upsells-wrapper {
  font-size: 90% !important;
}

.wptb-panel-left .wptb-upsells-anchor {
  font-size: 125%;
}

.wptb-upsells-message-holder {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin: 0 !important;
  border-radius: 5px;
  padding: 10px 5px;
  transition: all 0.3s ease-out;
  text-align: center;
  background-color: var(--wptb-plugin-theme-color-light) !important;
  border: 1px solid var(--wptb-plugin-gray-400);
  color: var(--wptb-plugin-gray-600);
  font-weight: 500;
}

.wptb-generate-wrapper .wptb-upsells-message-holder {
  background-color: var(--wptb-plugin-gray-200) !important;
  padding: 15px;
}

.wptb-upsells-pro-label {
  background-color: var(--wptb-plugin-cta-button) !important;
  color: var(--wptb-plugin-black);
  border-radius: 3px;
  padding: 5px;
  font-weight: bold;
  border: 1px solid var(--wptb-plugin-gray-400) !important;
}

.wptb-upsells-message-holder:hover {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.3) !important;
  transform: scale(1.05);
}

.wptb-upsells-anchor {
  text-decoration: none;
}

.wptb-upsells-wrapper:active {
  /*animation: wptb-push 0.1s ease-out;*/
}

@keyframes wptb-unfold-up {
  0% {
    transform: perspective(100px) rotateX(-90deg);
  }
  100% {
    transform: perspective(100px) rotateX(0deg);
  }
}

/*region notification manager*/
.wptb-notification-manager {
  position: fixed;
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
  height: max-content;
  top: 50%;
  right: calc(-1 * var(--wptb-notification-manager-width));
  width: var(--wptb-notification-manager-width);
  transition: all 0.2s ease-out;
  z-index: 99999999999;
}

.wptb-notification-wrapper {
  width: 100%;
  display: grid;
  grid-template-columns: 40px 3px 1fr;
  justify-content: center;
  align-items: start;
  color: var(--wptb-plugin-gray-700);
  border-radius: 3px 0 0 3px;
  /*overflow: hidden;*/
  border-right: 0 !important;
  margin: 0 0 5px 0;
  transition: all 0.3s ease-out;
  cursor: pointer;
}

.wptb-notification-icon {
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.wptb-notification-filler {
  width: 3px;
  height: 40px;
  background-color: var(--wptb-plugin-gray-200);
  border-width: 1px 0 1px 0;
  border-style: solid;
}

.wptb-notification-message {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 0 15px;
  text-transform: capitalize;
  border-width: 1px 0 1px 5px;
  border-style: solid;
  background-color: var(--wptb-plugin-gray-200);
}

.wptb-notification-svg-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

.wptb-notification-svg-wrapper svg {
  width: 25px;
  height: 25px;
  fill: currentColor;
}


.wptb-notification-manager-dev-tool-wrapper {
  position: absolute;
  top: 50%;
  left: 10px;
  width: fit-content;
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  grid-template-rows: repeat(4, minmax(min-content, max-content));
  grid-template-areas: "header" "selection" "message" "submit";
  border: 1px solid var(--wptb-plugin-gray-400);
  border-radius: 3px;
  justify-content: center;
  align-items: center;
  background-color: var(--wptb-plugin-gray-100);
}

.wptb-notification-manager-dev-tool-wrapper > div {
  padding: 10px;
  border-bottom: 1px solid var(--wptb-plugin-gray-300);
}

.wptb-nm-devtool-header {
  grid-area: header;
  font-weight: bold;
}

.wptb-nm-devtool-selection {
  grid-area: selection;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: row;
}

.wptb-nm-devtool-input {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(2, 1fr);
}

.wptb-nm-devtool-submit {
  grid-area: submit;
  justify-self: center;
}

.wptb-nm-devtool-message {
  grid-area: message;
  justify-self: center;
}

.wptb-notification-queue-length {
  position: absolute;
  width: 20px;
  height: 20px;
  left: -10px;
  top: -10px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 100%;
  color: var(--wptb-plugin-theme-color-light);
  font-weight: bold;
  animation: wptb-more-pop 0.2s ease-out;
}

/*endregion*/

.wptb-builder-panel[data-manage-cells-active='true'] {
  display: flex;
  flex-flow: column;
  height: 100%;
  overflow: hidden !important;
}

[data-manage-cells-active='true'] .wptb-builder-content {
  display: flex;
  flex-flow: column;
  height: 100%;
  overflow: hidden !important;

}

[data-manage-cells-active='true'] .wptb-management_table_container {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: minmax(min-content, max-content) 1fr minmax(min-content, max-content);
  overflow: hidden !important;
  margin: unset;
}

[data-manage-cells-active='true'] .wptb-preview-table-manage-cells {
  overflow: auto !important;
}

[data-manage-cells-active='true'] .wptb-management_table_container #wptb-bar-top {
  text-align: center;
  z-index: 10000;
}

/*region What Is New*/
.wptb-what-is-new-container {
  position: fixed;
  z-index: 100000000;
  background-color: rgba(0, 0, 0, 0.3);
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.wptb-what-is-new-window {
  background-color: var(--wptb-plugin-theme-color-light);
  width: 700px;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(2, minmax(min-content, max-content));
  grid-template-areas: 'header' 'content';
  justify-content: center;
  align-items: center;
  border-radius: 3px;
  font-size: 110% !important;
  color: var(--wptb-plugin-gray-700) !important;
  border: 2px solid var(--wptb-plugin-gray-300);
}

.wptb-what-is-new-header {
  grid-area: header;
  border-bottom: 2px solid var(--wptb-plugin-gray-300);
  display: flex;
  height: 45px;
}

.wptb-what-is-new-header-version {
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
  font-weight: bold !important;
  color: var(--wptb-plugin-logo-color)
}

.wptb-what-is-new-header-text-icon {
  width: 15px;
  height: auto;
  fill: var(--wptb-plugin-yellow-500);
  margin: 0 10px;
}

.wptb-what-is-new-header-close {
  width: 45px;
  height: 45px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-left: 2px solid var(--wptb-plugin-gray-300);
  cursor: pointer;
  transition: all 0.2s ease-out;
}

.wptb-what-is-new-header-close:hover {
  background-color: var(--wptb-plugin-gray-300);
}


.wptb-what-is-new-header-close:hover svg {
  fill: var(--wptb-plugin-gray-700);
}

.wptb-what-is-new-header-close svg {
  width: 15px;
  height: auto;
  fill: var(--wptb-plugin-gray-500);
  transition: all 0.2s ease-out;
}


.wptb-what-is-new-content {
  grid-area: content;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 200px minmax(min-content, max-content) 90px;
  grid-template-areas: 'imageContainer' 'noteIndex' 'textContainer';
  justify-content: center;
  align-items: center;
}

.wptb-what-is-new-note-image-carousel {
  grid-area: imageContainer;
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: minmax(min-content, max-content) 1fr minmax(min-content, max-content);
}

.wptb-what-is-new-note-index {
  grid-area: noteIndex;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--wptb-plugin-gray-500);
  font-variant-numeric: tabular-nums;
}

.wptb-what-is-new-note-text-container {
  grid-area: textContainer;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  justify-content: center;
  align-items: center;
}

.wptb-what-is-new-note-text {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin: 0 20px;
}

.wptb-what-is-new-note-text .wptb-upsells-pro-label {
  margin: 10px;
  text-decoration: none;
}

.wptb-what-is-new-carousel-nav-button {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  margin: 0 20px;
  color: var(--wptb-plugin-gray-700);
  cursor: pointer;
  transition: all 0.2s ease-out;
}

.wptb-what-is-new-carousel-nav-button:active {
  animation: wptb-pop 0.2s ease-out;
}

.wptb-what-is-new-carousel-nav-button svg {
  width: 25px;
  height: auto;
  fill: currentColor;
}

.wptb-what-is-new-carousel-nav-button[disabled='disabled'] {
  color: var(--wptb-plugin-gray-400);
  cursor: default;
  pointer-events: none;
}

.wptb-what-is-new-images-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 200px;
}

.wptb-what-is-new-image-background {
  position: relative;
  margin: 10px;
  padding: 10px;
  grid-column: 1;
  grid-row: 1;
  background-color: var(--wptb-plugin-gray-200);
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px solid var(--wptb-plugin-gray-300);
}

.wptb-what-is-new-pro-indicator {
  position: absolute;
  left: -20px;
  top: 10px;
  color: var(--wptb-plugin-theme-color-light);
  z-index: 1;
}

.wptb-what-is-new-pro-indicator-text {
  padding: 5px 20px;
  border-radius: 3px 3px 3px 0;
  background-color: var(--wptb-plugin-logo-color);
}

.wptb-what-is-new-pro-indicator-triangle-end {
  width: 1px;
  height: 20px;
  border-left: 20px solid transparent;
  border-top: 15px solid var(--wptb-plugin-gray-500);
}

.wptb-what-is-new-image-background:not([data-last="true"]) img {
  height: 100%;
  object-fit: contain;
  border: 2px solid $gray-400;
  border-radius: 5px;
}

/*endregion*/

/*region extra styles*/
.wptb-css-code-input {
  position: relative;
  width: 100% !important;
  max-width: 100% !important;
  border: 1px solid #ddd !important;
  border-radius: 3px;
}

.wptb-css-code-input .wptb-menu-empty-cover {
  background-color: rgba(0, 0, 0, 0.1) !important;
  z-index: 10000000;
}

.CodeMirror {
  max-height: 200px !important;
  height: 200px !important;
}

.CodeMirror * {
  font-size: 12px !important;
}

/*endregion*/

.wptb-plugin-inner-shadow {
  box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.09) 0px 2px 4px 0px inset;
}

.wptb-panel-plain-message {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 20px 10px;
  font-size: 80% !important;
  color: var(--wptb-plugin-gray-600) !important;
}

/*region background menu*/
.wptb-bg-selection-item {
  position: absolute;
  background-color: var(--wptb-plugin-logo-color);
  width: 30px;
  transition: all 0.2s ease-out;
  cursor: pointer;
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
}

.wptb-bg-color-selectors[data-visible='false'] {
  display: none !important;

}

.wptb-selector-icon-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.wptb-selector-icon-wrapper svg {
  width: 20px;
  height: auto;
  fill: var(--wptb-plugin-theme-color-light)
}

.wptb-col-selection {
  height: 30px;
}

.wptb-bg-column-rail {
  position: absolute;
  display: grid;
  grid-auto-flow: column;
  justify-content: center;
  align-items: center;
  height: 30px;
}

.wptb-bg-row-rail {
  position: absolute;
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-flow: row;
  justify-content: center;
  align-items: center;
  width: 30px;
  top: 0;
}

.wptb-bg-rail-mark {
  border: 2px dashed var(--wptb-plugin-logo-color);
  height: 100%;
  opacity: 0;
  transition: opacity 0.2s ease-out;
  cursor: pointer;
}

.wptb-bg-rail-mark:hover {
  opacity: 0.5;
}

/*endregion*/

/*region general styles settings menu*/
.wptb-general-style-settings {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: minmax(min-content, max-content) 1fr;
  grid-gap: 20px;
}

.wptb-general-style-settings .wptb-menu-empty-cover {
  color: var(--wptb-plugin-logo-color) !important;
}

.wptb-general-style-settings .wptb-css-code-input {
  height: 100% !important;
}

.wptb-general-style-settings .CodeMirror {
  height: 100% !important;
  max-height: 100% !important;
}

/*endregion*/

/*region panel message component*/
.wptb-panel-message {
  color: var(--wptb-plugin-gray-600);
}

.wptb-panel-message-icon {
  margin-right: 10px;
}

.wptb-panel-message-icon svg {
  width: 20px;
  height: 20px;
  fill: var(--wptb-plugin-yellow-500);
}


/*endregion*/

/*region size2 control*/
.wptb-size2-control-input-wrapper {
  display: grid;
  grid-template-columns: 1.2fr 20px 1.2fr 1fr;
  grid-template-rows: 1fr auto;
  justify-content: center;
  align-content: center;
  grid-gap: 10px;
}

.wptb-size2-input input {
  transition: all 0.2s ease-out;
  width: 100%;
  border: 1.5px solid var(--wptb-plugin-gray-400);
  border-radius: 3px !important;
  text-align: end;
}

.wptb-size2-input input[disabled] {
  background-color: var(--wptb-plugin-gray-300) !important;
  cursor: not-allowed;
}

.wptb-size2-control-input-component {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(2, 1fr);
  justify-items: center;
  align-items: center;
  height: 100%;
  width: 100%;
}

.wptb-size2-aspect-icon {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  color: var(--wptb-plugin-red-600);
}

.wptb-size2-aspect-icon[data-wptb-linked = 'true'] {
  color: var(--wptb-plugin-green-500) !important;
}

.wptb-size2-aspect-icon svg {
  width: 100%;
  height: 100%;
  transition: all 0.2s ease-out;
}

.wptb-size2-unit-dropdown {
  border: 1.5px solid var(--wptb-plugin-gray-400) !important;
  border-radius: 3px !important;
}

.wptb-size-control-aspect-ratio-info-container {
  padding: 10px;
  grid-column: 1/-1;
  justify-self: center;
  color: var(--wptb-plugin-gray-500);
  user-select: none;
}

.wptb-settings-reset-size2-control {
  transition: all 0.2s ease-out;
}

.wptb-settings-reset-size2-control:active {
  transform: rotateZ(-180deg);
}

/*endregion*/

/*region lazy load settings menu*/
.wptb-lazy-load-wrapper {
  max-width: 800px;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: 1fr;
  gap: 10px;
  grid-template-areas: 'left right';
}

.wptb-lazy-load-left-column {
  grid-area: left;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: minmax(min-content, max-content) 1fr minmax(min-content, max-content);
  grid-template-areas: 'basic' 'preview' 'disclaimer';
  justify-content: center;
  align-items: center;
  gap: 10px;
  overflow: auto;
}

.wptb-lazy-load-basic-options {
  grid-area: basic;
}

.wptb-lazy-load-preview-container {
  grid-area: preview;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: minmax(150px, max-content);
  grid-template-rows: minmax(min-content, max-content) minmax(150px, max-content) minmax(min-content, max-content);
  justify-content: center;
  justify-items: center;
  align-content: center;
  align-items: center;
  grid-template-areas: 'header' 'preview' 'footer';
  gap: 5px;
}

.wptb-lazy-load-preview-header {
  grid-area: header;
  text-transform: uppercase;
  font-weight: bold;
}

.wptb-lazy-load-preview {
  grid-area: preview;
}

.wptb-lazy-load-preview img {
  width: 150px;
  height: 150px;
}

.wptb-lazy-load-preview-button-container {
  grid-area: footer;
}

.wptb-lazy-load-preview-button-container > div {
  margin: 10px;
}

.wptb-lazy-load-pro-options {
  padding: 0 10px;
  overflow: auto;
  color: var(--wptb-plugin-gray-500);
  position: relative;
  grid-area: right;
}

.wptb-controls-for-settings > div {
  border: 1px solid var(--wptb-plugin-gray-300);
  border-bottom: 0;
}

.wptb-lazy-load-pro-options > div:last-of-type {
  border-bottom: 1px solid var(--wptb-plugin-gray-300);
}

.wptb-lazy-load-pro-disabled-overlay {
  width: 100%;
  height: 100%;
  background-image: repeating-linear-gradient(45deg, transparent, transparent 15px, #3299D132 15px, #3299D132 30px);
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
}


/*endregion*/

/*region controls for settings*/
.wptb-controls-for-settings * {
  font-size: inherit !important;
  color: var(--wptb-plugin-theme-text-color-main);
  box-sizing: border-box;
}

/*endregion*/

/*region control tip wrapper*/
.wptb-control-tip-wrapper {
  position: relative;
}

.wptb-control-tip-wrapper[disabled] .wptb-tip-popup {
  color: var(--wptb-plugin-gray-400);
}

.wptb-control-tip-wrapper[disabled] .wptb-tip-popup:hover {
  background-color: inherit !important;
}

.wptb-tip-popup {
  position: absolute;
  border: 2px solid var(--wptb-plugin-gray-300);
  border-radius: 100%;
  width: 20px;
  height: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  background-color: var(--wptb-plugin-theme-color-light);
  transition: background-color 0.2s ease-out;
  top: 5px;
  right: 5px;
}

.wptb-tip-popup[data-tip-positon="topRight"] {
  top: 5px;
  right: 5px;
}

.wptb-tip-popup:hover {
  background-color: var(--wptb-plugin-gray-200);
}


/*endregion*/

/*region lazy load frontend styles*/
.wptb-lazy-load-img[data-wptb-lazy-load-status='false'] {
  opacity: 0;
}

.wptb-lazy-load-img[data-wptb-lazy-load-status='true'] {
  opacity: 1;
}

.wptb-lazy-load-buffer-element-container {
  position: relative;
}

.wptb-lazy-load-buffer-element {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.wptb-lazy-load-buffer-icon-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}

.wptb-lazy-load-buffer-icon-wrapper[data-wptb-lazy-load-icon-animation='heartBeat'] svg {
  animation: wptb-beat 1.3s ease-out forwards infinite;
}

.wptb-lazy-load-buffer-icon-wrapper[data-wptb-lazy-load-icon-animation='rotate'] svg {
  animation: wptb-rotate-simple 1s ease-out forwards infinite;
}

.wptb-lazy-load-buffer-icon-wrapper[data-wptb-lazy-load-icon-animation='jump'] svg {
  animation: wptb-jump 0.5s ease-out alternate infinite;
}

.wptb-lazy-load-buffer-icon-wrapper[data-wptb-lazy-load-icon-animation='flip'] svg {
  animation: wptb-flip 1s ease-out forwards infinite;
}

@keyframes wptb-flip {
  0% {
    transform: rotateY(0deg);
  }

  100% {
    transform: rotateY(360deg);
  }
}

@keyframes wptb-jump {
  0% {
    transform: translateY(25%);
  }

  100% {
    transform: translateY(-25%);
  }
}


@keyframes wptb-rotate-simple {
  0% {
    transform: rotateZ(0deg);
  }

  100% {
    transform: rotateZ(360deg);
  }
}

@keyframes wptb-beat {
  0% {
    transform: scale(1);
  }
  15% {
    transform: scale(1.5);
  }
  30% {
    transform: scale(1);
  }
  100% {
    transform: scale(1);
  }
}

/*endregion*/

/*region panel direction control*/
.wptb-panel-direction-control-indicators-container {
  display: grid;
  grid-template-columns: repeat(3, minmax(min-content, max-content));
  grid-template-rows: repeat(3, minmax(min-content, max-content));
  grid-template-areas: 'up up up' 'left static right' 'down down down';
  grid-gap: 3px;
  justify-content: center;
  align-items: center;
}

.wptb-panel-direction-cadet {
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.wptb-panel-direction-cadet svg {
  width: 25px;
  height: 25px;
  fill: var(--wptb-plugin-gray-400);
  transition: fill 0.2s ease-out;
}

.wptb-panel-direction-cadet:hover svg {
  fill: var(--wptb-plugin-gray-500);
}

.wptb-panel-direction-cadet[data-wptb-active-direction='true'] svg {
  fill: var(--wptb-plugin-logo-color);
}

.wptb-panel-direction-cadet[data-wptb-panel-direction='up'] {
  grid-area: up;
}

.wptb-panel-direction-cadet[data-wptb-panel-direction='left'] {
  grid-area: left;
}

.wptb-panel-direction-cadet[data-wptb-panel-direction='right'] {
  grid-area: right;
}

.wptb-panel-direction-cadet[data-wptb-panel-direction='down'] {
  grid-area: down;
}

.wptb-panel-direction-static {
  grid-area: static;
  width: 20px;
  height: 20px;
  background-color: var(--wptb-plugin-gray-400);
  border: 1px solid var(--wptb-plugin-gray-500);
  border-radius: 3px;
}

[data-wptb-disabled='true'] .wptb-panel-direction-cadet svg {
  fill: var(--wptb-plugin-gray-300) !important;
}

[data-wptb-disabled='true'] .wptb-panel-direction-static {
  background-color: var(--wptb-plugin-gray-300);
  border: 1px solid var(--wptb-plugin-gray-400);
}

[data-wptb-disabled='true'] .wptb-panel-direction-cadet {
  cursor: pointer;
  pointer-events: none;
}

/*endregion*/

/*region disclaimer component*/
.wptb-disclaimer-container {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 10px 0;
  flex-direction: column;
}

.wptb-disclaimer-title {
  color: var(--wptb-plugin-red-600) !important;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 120%;
}

.wptb-disclaimer-message p, .wptb-disclaimer-message span {
  font-size: 90% !important;
}

/*endregion*/

.wptb-code {
  font-family: monospace !important;
  padding: 0 3px;
  border-radius: 3px;
  background-color: #FDE68A;
  border: 1px solid #FCD34D;
  font-size: inherit !important;
}

/*region dummy table element*/
.wptb-element[data-wptb-dummy="true"] {
  pointer-events: none;
  color: var(--wptb-plugin-gray-400) !important;
}

.wptb-element[data-wptb-dummy="true"] svg {
  fill: currentColor !important;
}

.wptb-element[data-wptb-dummy="true"] .wptb-element-draggable-icon {
  color: var(--wptb-plugin-gray-400) !important;
}

/*endregion*/

/*region disabled overlay container*/
.wptb-disabled-overlay-container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  justify-content: center;
  align-items: center;
  grid-template-areas: 'content';
}

.wptb-disabled-overlay {
  grid-area: content;
  width: 100%;
  height: 100%;
  z-index: 10;
  background-image: repeating-linear-gradient(45deg, transparent, transparent 15px, #3299D13C 15px, #3299D13C 30px);
  cursor: not-allowed;
}

.wptb-disabled-overlay-slot-wrapper {
  grid-area: content;
  z-index: 9;
}

/*endregion*/

.wptb-upsells-pro-overlay {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-image: repeating-linear-gradient(45deg, transparent, transparent 15px, #3299D13C 15px, #3299D13C 30px);
}

/*region data listing*/
.wptb-data-listing-row-search-clause-wrap {
  color: var(--wptb-plugin-gray-500);

}

.wptb-data-listing-row-search-clause {
  color: var(--wptb-plugin-logo-color) !important;
  font-weight: bold !important;
}

/*endregion*/

/*region search input component*/
.wptb-search-input-wrapper {
  position: relative;
  width: fit-content;
}

.wptb-search-input-element {
  width: 100% !important;
  border: 1px solid var(--wptb-plugin-gray-400) !important;
  text-align: center;
  color: inherit;
  border-radius: 999px !important;
  padding: 0 !important;
  font-size: inherit !important;
}

.wptb-search-input-element:active, .wptb-search-input-element:focus {
  border: 1px solid var(--wptb-plugin-gray-500) !important;
  inset: 0 !important;
  box-shadow: none !important;
}

.wptb-search-input-clear {
  position: absolute;
  top: 0;
  right: 10px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  padding: 0 5px;
  color: var(--wptb-plugin-red-500);
  font-weight: bold;
}

.wptb-search-input-clear[data-disabled='true'] {
  color: var(--wptb-plugin-gray-500) !important;
}

/*endregion*/

.wptb-svg-inherit-color svg {
  fill: currentColor;
}

.wptb-image-element-dummy {
  display: none !important;
}

.wptb-settings-generic-icon {
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.wptb-svg-14px svg {
  width: 14px;
}

/*region multi checkbox control*/
.wptb-multi-checkbox-wrapper .wptb-settings-checkbox-row label {
  transition: all 0.2s ease-out;
}

.wptb-multi-checkbox-wrapper .wptb-settings-checkbox-row[data-wptb-checked="true"] label {
  /*font-weight: bold;*/
  color: var(--wptb-plugin-logo-color);
}

/*endregion*/

/*region range control input*/
.wptb-range-input-wrapper[disabled] {
  pointer-events: none;
}

.wptb-range-input-operation-button {
  color: var(--wptb-plugin-gray-500) !important;
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  position: absolute;
  transition: all 0.1s ease-out;
  opacity: 0;
}

.wptb-range-input-operation-button svg {
  fill: var(--wptb-plugin-gray-500) !important;
}

.wptb-range-input-operation-button:active {
  transform: scale(0.8);
}

.wptb-range-input-operation-button[data-wptb-button-position="up"] {
  top: -50%;
}

.wptb-range-input-operation-button[data-wptb-button-position="down"] {
  bottom: -18%;
}

.wptb-range-text-input-wrapper:hover .wptb-range-input-operation-button {
  opacity: 1;
}

/*endregion*/