✏️ Editing: pagelayer-editor.css

/*
PAGELAYER
http://pagelayer.com/
(c) Pagelayer Team
*/

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  overflow: hidden !important;
}

body {
  margin: 0;
  overflow: hidden !important;
}

main {
  display: block;
}

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

a {
  background-color: transparent;
}

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

b,
strong {
  font-weight: bolder;
}

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

small {
  font-size: 80%;
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

img {
  border-style: none;
}

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

button,
input { /* 1 */
  overflow: visible;
}

button,
select { /* 1 */
  text-transform: none;
}

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

progress {
  vertical-align: baseline;
}

textarea {
  overflow: auto;
}

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

details {
  display: block;
}

summary {
  display: list-item;
}

template {
  display: none;
}

[hidden] {
  display: none;
}

/* END normalize.css */

/* An overwrite to show the row irrespective in the editor */

body {
font-family: Roboto, 'Open Sans', Arial, Helvetica, sans-serif;
font-size:12px;
}

.pagelayer-normalize{
height:100%;
width:100%;
padding:0px;
margin:0px;
border:0px;
}

/* Pagelayer Top Bar */
.pagelayer-bottombar-holder{
background: #4f4f4f;
position:relative;
padding: 5px;
}

.pagelayer-bottombar{
padding: auto;
}

.pagelayer-bottombar-rightbuttons button{
font-size: 13px;
font-weight: bold;
cursor: pointer;
border-radius: 2px;
padding: 4px 8px;
margin: auto 5px;
outline:none;
}

.pagelayer-bottombar-rightbuttons .pli{
color:#fff;
cursor: pointer;
}

.pagelayer-success-btn{
border: #398439 1px solid;
color: #fff;
background: #449d44;
}

.pagelayer-success-btn:hover{
background: #3a733a;
border-color: #3a733a;
}

.pagelayer-primary-btn{
border: #2e6da4 1px solid;
color: #fff;
background: #337ab7;
}

.pagelayer-primary-btn:hover{
background: #286090;
border-color: #204d74;
}

.pagelayer-close-button{
border: #ef4d4d 1px solid;
color: #fff;
background: #ef4d4d;
}

.pagelayer-close-button:hover{
background: #c13030;
border-color: #c13030;
}

.pagelayer-bottombar-rightbuttons i{
padding: 4px;
margin: auto 3px;
}

.pagelayer-mode-wrapper i{
padding: 8px;
margin: auto 5px;
}

.pagelayer-mode-wrapper{
display:inline-block;
text-align:center;
}

.pagelayer-mode-wrapper i{
padding: 8px;
margin: auto 5px;
}

.pagelayer-mode-buttons-wrapper{
position:absolute;
bottom:100%;
color:#fff;
background-color: #3e8ef7;
display:none;
z-index:1;
}

.pagelayer-leftbar-toggle-h{
width:0px;
}

.pagelayer-leftbar-table{
position:relative;
}

.pagelayer-leftbar-hidden{
width:0px;
}

.pagelayer-leftbar-hidden table{
display:none;
}

.pagelayer-leftbar-toggle{
position: absolute;
width:12px;
background: #E3E3E3;
cursor: pointer;
text-align:center;
line-height:300%;
top: 50%;
left: 100%;
transform: translateY(-50%);
}

.pagelayer-rightbar .pagelayer-leftbar-toggle{
left: -12px;
}

.pagelayer-rightbar:not(.pagelayer-leftbar-hidden) .pagelayer-leftbar-toggle,
.pagelayer-leftbar-hidden:not(.pagelayer-rightbar) .pagelayer-leftbar-toggle{
direction: rtl;
}

.pagelayer-leftbar-toggle:hover{
background-color: #3e8ef7;
color: #ffffff;
}

.pagelayer-leftbar-holder{
overflow: hidden;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
border-right: 1px solid #c9d0d9;
}

/*.pagelayer-body-table{
max-height: 100vh !important;
}*/

.pagelayer-iframe {}

.pagelayer-iframe-holder{
max-height: 100vh !important;
height: 100%;
overflow: auto;
text-align:center;
}

.pagelayer-iframe-holder.pagelayer-iframe-holder-with-bar{
max-height: calc(100vh - 45px) !important;
height: calc(100vh - 45px) !important;
}

.pagelayer-iframe-top-bar{
height:45px;
background-color: #3e8ef7;
display:none;
color: #fff;
}

.pagelayer-body{
transition:0.5s;
}

.pagelayer-pro-req{
font-size: 10px;
padding: 2px 4px;
display: inline-block;
background-color: #e63131;
color: #fff;
margin-left: 4px;
border-radius: 2px;
cursor: pointer;
}

.pagelayer-pro-req > .pagelayer-tlite{
background: #fff;
color: #000;
width: 220px !important;
white-space: inherit !important;
top: 22px !important;
left: 0px !important;
}

.pagelayer-screen-desktop {}

.pagelayer-screen-tablet{
height:900px;
margin:20px auto;
border: solid #444;
border-width: 30px 10px;
border-radius: 10px;
}

.pagelayer-screen-mobile{
height:540px;
margin:20px auto;
border: solid #444;
border-width: 30px 10px;
border-radius: 10px;
}

/* Element Properties Dialog classes */
[class^="pagelayer-elp"]{
font-family: Roboto, 'Open Sans', Arial, Helvetica, sans-serif !important;
color: #313439;
background-color: transparent;
}

#pagelayer-elpd {
display:none;
color:#444;
border: 1px solid #d3d3d3;
}

.pagelayer-dark #pagelayer-elpd {
border: 1px solid #252529;
}

#pagelayer-elpd .slimScrollDiv{
height: calc(100% - 50px) !important;
}

.pagelayer-elpd-header {
border: none;
color:#fff;
}

.pagelayer-elpd-title {
text-align: center;
padding:0px;
cursor: move;
color: #fff;
font-weight: 600;
width:76%;
}

.pagelayer-elpd-close {
padding-right:10px;
cursor: pointer;
margin: 0px;
position: absolute;
right: 5px;
color: #fff;
top: 50%;
transform: translateY(-50%);
}

.pagelayer-elpd-body{
border: none;
}

.pagelayer-elpd-section-rows{
background-color: #FFF;
border-top: 1px solid #d3d3d3;
}

.pagelayer-dark .pagelayer-elpd-section-rows{
background-color: #1c1c1f;
border-top: 1px solid #1c1c1f;
}

.pagelayer-elpd-section-name{
margin-top: 10px;
padding: 11px 10px;
background-color: #FFF;
font-size: 13px;
font-weight: bold;
color: #555;
cursor: pointer;
transition: all 0.3s;
}

.pagelayer-dark .pagelayer-elpd-section-name{
background-color: #252529;
font-family: Roboto;
font-size: 12px;
font-weight: 400;
color: #ffffff;
}

.pagelayer-elpd-section-name:hover,
.pagelayer-elpd-section-open{
color:#1a7fb0;
}

.pagelayer-dark .pagelayer-elpd-section-open{
background-color: #0d47a1;
}

.pagelayer-dark .pagelayer-elpd-section-name:hover{
color:#ffffff;
}

.pagelayer-elpd-section-name:not(.pagelayer-elpd-section-open) .pli:before,
.pagelayer-navigator-toggle .pagalayer-arrow:before{
content: "\f0da";
font-family: pagelayer;
}
.pagelayer-elpd-section-name.pagelayer-elpd-section-open .pli:before,
.pagelayer-navigator-open > .pagelayer-navigator-toggle .pagalayer-arrow:before{
content: "\f0d7";
font-family: pagelayer;
}

.pagelayer-elpd-section-name .pli{
width:15px;
float:right;
font-style: normal;
}

/* Pagelayer editor panel tabs*/

.pagelayer-elpd-tab,
.pagelayer-history-tab,
.pagelayer-widget-tab{
display: inline-block;
font-size: 13px;
cursor: pointer;
padding: 10px 6px;
margin: 0px 5px 0px 0px;
}

.pagelayer-elpd-tab:hover,
.pagelayer-history-tab:hover,
.pagelayer-widget-tab:hover{
color: #3e8ef7;	
}

.pagelayer-dark .pagelayer-elpd-tab,
.pagelayer-dark .pagelayer-history-tab,
.pagelayer-dark .pagelayer-widget-tab{
font-family: Roboto !important;
color:#777777;
font-size: 14px;
font-weight: 400;
}

.pagelayer-elpd-settings-body{
display: none;
}

.pagelayer-elpd-settings-body.active{
display: block;
}

.pagelayer-elpd-style-body{
display: none;
}

.pagelayer-elpd-style-body.active{
display: block;
}

.pagelayer-history-section{
display:none;
}

.pagelayer-history-body{
margin:10px 0px;	
padding:10px;
background-color:#ffffff;
}

.pagelayer-history-section.active{
display:block;	
}

.pagelayer-history-section.active[pagelayer-show-tab="actions"]{
display:flex;
flex-direction:column-reverse;	
}

[pagelayer-elpd-active-tab="1"],
[pagelayer-history-active-tab="1"] {
color: #2563eb;
border-bottom: 2px solid #2563eb;
}

.pagelayer-dark [pagelayer-elpd-active-tab="1"],
.pagelayer-dark [pagelayer-history-active-tab="1"]{
color: #ffffff;
}

.pagelayer-elpd-tabs,
.pagelayer-history-tabs,
.pagelayer-widget-tabs {
background-color: #fff;
border-bottom: 1px solid #d3d3d3;
}

.pagelayer-dark .pagelayer-elpd-tabs,
.pagelayer-dark .pagelayer-history-tabs,
.pagelayer-dark .pagelayer-widget-tabs{
background-color: #1c1c1f;
border-bottom: 1px solid #1c1c1f;
}

.pagelayer-elpd-tabs{
display: flex;
align-items: center;
}

.pagelayer-widget-tabs{
display: flex;
text-align: center;
margin-left: -17px;
}

.pagelayer-widget-tab{
flex:1;
}

.pagelayer-elpd-options{
text-align:right;
display:inline-block;
margin-right:10px;
}

.pagelayer-elpd-options i{
padding:4px 5px;
cursor:pointer;
}

.pagelayer-dark .pagelayer-elpd-options i{
color:#777777;
}

.pagelayer-dark .pagelayer-elpd-options i:hover{
color: #ffffff;
}

.pagelayer-form-item {
border-bottom: 1px dashed #e6e6e6;
padding: 10px 8px 10px 6px; 
margin-bottom: 0px;
position: relative;
}

[pagelayer-access-item]{
position: absolute;
z-index: -100;
top: 0px;
visibility: hidden;
}

.pagelayer-access-item-visible{
position: relative !important;
z-index: unset !important;
visibility: visible !important;
}

.pagelayer-dark .pagelayer-form-item{
border-bottom: 1px dashed #686870;
}

.pagelayer-form-item:hover .pagelayer-elp-default[data_show=true]{
display:initial;
}

.pagelayer-elp-label-div, .pagelayer-elp-link-label-div{
padding:4px 0px 4px 0px;
position:relative;
}

.pagelayer-elp-label-div[type=select]{
width:50%;
}

.pagelayer-elp-label, .pagelayer-elp-link-label{
display: inline-block;
color: #555;
font-size: 12px;
line-height: 150%;
}

.pagelayer-dark .pagelayer-elp-label,
.pagelayer-dark .pagelayer-elp-link-label,
.pagelayer-dark .pagelayer-post-category, 
.pagelayer-dark .pagelayer-elp-postCategory,
.pagelayer-dark .pagelayer-elp-postdate::-webkit-datetime-edit-second-field{
color:#bdbdbd;
}

.pagelayer-elp-heading{
font-size: 13px;
font-weight:600;
line-height: 150%;
}

.pagelayer-elp-screen{
display: inline-block;
text-align: center;
z-index: 1;
vertical-align: middle;
position: relative;
}

.pagelayer-elp-screen .pli{
padding: 0;
cursor: pointer;
box-shadow: 0 0 0.5rem #babbbc;
height: 30px;
width: 30px;
border-radius: 50%;
line-height: 30px;
transition-duration: 0.1s;
}

.pagelayer-dark .pagelayer-elp-screen .pli{
color:#bdbdbd;
}

.pagelayer-elp-screen .pli-desktop:not(.pagelayer-prop-screen),
.pagelayer-elp-screen .pli-tablet:not(.pagelayer-prop-screen),
.pagelayer-elp-screen .pli-mobile:not(.pagelayer-prop-screen){
position: absolute;
transform: none;
left: 0;
display:none;
opacity:0;
background:#aaaaaa;
color:#ffffff;
}

.pagelayer-dark .pagelayer-elp-screen .pli-desktop:not(.pagelayer-prop-screen),
.pagelayer-dark .pagelayer-elp-screen .pli-tablet:not(.pagelayer-prop-screen),
.pagelayer-dark .pagelayer-elp-screen .pli-mobile:not(.pagelayer-prop-screen){
background:#0d47a1;
}

.pagelayer-elp-screen .pli-desktop.open{
transform: rotate(-90deg) translate(30px, -27px) rotate(90deg);
transition-delay: 0s;
top:-5px;
left: 40px;
opacity:1;
display:block;
}

.pagelayer-elp-screen .pli-tablet.open{
transform: rotate(-90deg) translate(0px, -6px) rotate(90deg);
transition-delay: 0.1s;
top:0px;
left: 40px;
opacity:1;
display:block;
}

.pagelayer-elp-screen .pli-mobile.open{
transform: rotate(-90deg) translate(-30px, -27px) rotate(90deg);
transition-delay: 0.2s;
top:5px;
left: 40px;
opacity:1;
display:block;
}

.pagelayer-elp-screen .pagelayer-prop-screen{
box-shadow: none;
z-index: 2;
font-size: 12px;
height: 20px;
width: 20px;
line-height: 20px;
}

.pagelayer-elp-screen .pli:not(.pagelayer-prop-screen):hover{
background-color: #2563eb;
}

.pagelayer-dark .pagelayer-elp-screen .pli:not(.pagelayer-prop-screen):hover{
background-color: #2563eb;
}

.pagelayer-elp-screen .pagelayer-prop-screen:hover,
.pagelayer-typo-default:hover i,
.pagelayer-elp-default:hover i{
color: #2563eb;
}

.pagelayer-elp-units{
display: inline-block;
float:right;
padding-top:4px;
}

.pagelayer-elp-units span{
padding:1px 4px;
font-size:12px;
cursor: pointer;
}

.pagelayer-dark .pagelayer-elp-units span{
color:#bdbdbd;
}

.pagelayer-elp-units span[selected] {
color: #3e8ef7;
}

/* Default button css start */
.pagelayer-elp-default{
display:none;
width: 20px;
height: 20px;
cursor: pointer;
margin-left: 4px;
position: absolute;
top: 9px;
}

.pagelayer-elp-default:focus{
outline:none;
}

.pagelayer-elp-default i{
font-size: 10px;
color: black;
}

/* Default button css ends */

.pagelayer-elp-desc, .pagelayer-elp-permalink-a, .pagelayer-elp-link-desc{
color:#757575;
font-size: 12px;
line-height: 20px;
font-style: italic;
margin-top: 5px;
display:block;
word-break: break-word;
}

.pagelayer-elpd-body input,
.pagelayer-elpd-body textarea,
.pagelayer-elpd-body select,
.pagelayer-elpd-body option,
.pagelayer-elp-multiselect{
font-size: 13px !important;
color: #666;
border-radius: unset;
border:1px solid #CCC;
width: 100%;
}

.pagelayer-elp-textarea{
border-radius: 3px !important;
resize:vertical;
}

.pagelayer-dark .pagelayer-elpd-body input,
.pagelayer-dark .pagelayer-elpd-body textarea,
.pagelayer-dark .pagelayer-elpd-body select,
.pagelayer-dark .pagelayer-elpd-body option,
.pagelayer-dark .pagelayer-add-cat-btn input,
.pagelayer-dark .pagelayer-elp-multiselect{
  border:1px solid #6e6d6d;
}

.pagelayer-elpd-body input:focus,
.pagelayer-elpd-body textarea:focus,
.pagelayer-elpd-body select:focus{
border-color: #2563eb;
box-shadow: 0 0 1px #2563eb inset;
}

.pagelayer-elp-button{
text-transform: unset !important;
border: 1px solid #2563eb !important;
font-weight: 500 !important;
font-size: 13px !important;
margin: 15px auto !important;
min-height: unset !important;
background-color: #2563eb !important;
color: #ffffff !important;
transition: all 0.2s ease !important;
border-radius: 6px !important;
padding: 8px 18px !important;
cursor: pointer !important;
display: block !important;
}

.pagelayer-elp-button:hover{
background-color: #1d4ed8 !important;
border-color: #1d4ed8 !important;
}

.pagelayer-dark .pagelayer-elp-button{
background-color: #2563eb !important;
border-color: #2563eb !important;
}

.pagelayer-dark .pagelayer-elp-button:hover{
background-color: #3b82f6 !important;
border-color: #3b82f6 !important;
}

.pagelayer-elp-group-item .pagelayer-form-item{
padding: 8px 12px !important;
}

.pagelayer-elp-image-div,
.pagelayer-elp-retina-image-div,
.pagelayer-elp-retina-mobile-image-div{
padding:7px;
width:90%;
margin:5px auto;
height:150px;
position:relative;
border: 1px solid #2563eb;
}

/* image drop zone css start */
.pagelayer-elp-drop-zone{
position:absolute;
text-align:center;
width:100%;
height:100%;
top:0;
left:0;
z-index:3;
background-color: rgba(37, 99, 235, 0.94);
display:none;
}

.pagelayer-elp-drop-zone *{
pointer-events: none;
}

.pagelayer-elp-drop-zone > div{
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
text-align:center;
}

.pagelayer-elp-drop-zone div *{
color:white;
}

.pagelayer-elp-drop-zone div i{
font-size:20px;
}

.pagelayer-elp-drop-zone div h4{
margin: 12px;
}

.pagelayer-elp-img-up-progress {
width: 50%;
margin-left: auto;
margin-right: auto;
background-color: transparent;
border: 2px solid white;
border-radius: 20px;
padding: 4px;
}

.pagelayer-elp-img-up-bar {
width: 3%;
height: 5px;
background-color: white;
line-height: 5px;
text-align: center;
border-radius: 20px;
}
/* image drop zone css start */

.pagelayer-elp-modal,
.pagelayer-elp-access{
cursor: pointer;
padding: 10px;
display: block;
margin: 0 auto;
position: absolute;
font-size:1.5rem;
top: 0px;
right: 12px;
color: #333;
vertical-align: middle;
}

.pagelayer-elp-access .pli-caret-right{
font-size: 18px;
line-height: 1.5;
}

.pagelayer-elp-access .pli-caret-right:hover{
color: #3e8ef7;
}

.pagelayer-elp-access .pli-caret-open:before{
content: "\f0d7" !important;
}

.pagelayer-pro-notice,
.pagelayer-confirm-box-holder {
position: fixed;
top: 0px;
z-index: 10000;
width: 100%;
display: none;
left: 0px;
height: 100vh;
}

.pagelayer-pro-div,
.pagelayer-confirm-box{
margin: 25vh auto;
max-width: 500px;
padding: 20px;
background-color: #fff;
box-shadow: 0 0 15px -5px;
}

.pagelayer-pro-x{
float:right;
font-size: 13px;
cursor: pointer;
}

.pagelayer-pro-head{
text-align: center;
}

.pagelayer-pro-message,
.pagelayer-confirmation-msg{
margin: 25px auto;
font-size: 15px;
padding: 2px 25px;
text-align: center;
line-height: 1.8;
}

.button-pagelayer{
padding: 12px 25px !important;
font-size: 15px !important;
font-weight: bold;
background: #7444fd !important;
color: #fff !important;
border: 1px solid #7444fd !important;
transition: all .3s linear;
cursor: pointer;
text-decoration: none;
display: inline-block;
}

.button-pagelayer:hover{
background: #fff !important;
color: #7444fd !important;
}

.pagelayer-elp-access-holder{
position: absolute;
border: 1px solid #ccc;
top: 42px;
background: #fff;
z-index: 100;
right: 8px;
width: 95%;
box-shadow: 0 0 15px -5px;
display: none;
}

.pagelayer-elp-image{
height: 100%;
-webkit-background-size: cover;
background-size: cover;
background-position: 50%;
cursor:pointer;
}

.pagelayer-elp-image-delete,
.pagelayer-elp-retina-delete,
.pagelayer-elp-retina-mobile-delete,
.pagelayer-elp-image-retina{
cursor: pointer;
position: absolute;
top: 4px;
right: 4px;
background-color: #2563eb;
padding: 5px 9px;
max-width: 28px;
max-height: 28px;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
border-radius: 2px;
}

.pagelayer-elp-image-retina{
right:50px;
}

.pagelayer-elp-image-ai{
position: absolute;
top: -5px;
left: -5px;
}

.pagelayer-elp-image-ai input{
width: 18px;
height: 18px;
}

.pagelayer-elp-image-delete .pli,
.pagelayer-elp-retina-delete .pli,
.pagelayer-elp-retina-mobile-delete .pli,
.pagelayer-elp-image-retina .pli{
color: #fff;
}

.pagelayer-hidden{
display:none !important;
}

.pagelayer-elp-radio-div{
display:flex;
}

.pagelayer-elp-radio:first-child{
border-radius: 4px 0px 0px 4px;
-moz-outline-radius: 7px 0px 0px 7px;
}

.pagelayer-elp-radio:last-child{
border-radius: 0px 4px 4px 0px;
-moz-outline-radius: 0px 7px 7px 0px;
}

.pagelayer-elp-radio{
display: inline-block;
vertical-align: middle;
padding: 6px;
cursor: pointer; 
font-size:12px;
color: #666 !important;
text-decoration: none;
background: #eee;
flex:1;
text-align:center;
}

.pagelayer-elp-radio:hover{
background-color: #4CB5E8 !important;
color:#fff !important;
transition: all 0.3s;
}

.pagelayer-dark .pagelayer-elp-radio{
background-color: #fafafa;
}

.pagelayer-dark .pagelayer-elp-radio:hover,
.pagelayer-dark .pagelayer-elp-radio-active{
background-color:#0d47a1 !important;
}

.pagelayer-elp-radio-active{
background-color: #1A9CDB !important;
color:#ffffff !important;
}

.pagelayer-elp-typo-edit-div,
.pagelayer-elp-color-div-holder{
cursor: pointer;
width: 70px;
height: 30px;
border-radius: 3px;
margin: 0 auto;
position: absolute;
top: 5px;
right: 11px;
border: solid 1px #999;
color: #333;
display: flex;
}

.pagelayer-elp-typo-edit-div{
width: 34px;
}

.pagelayer-elp-color-div{
cursor: pointer;
padding: 3px;
width: 28px;
height: 23px; 
display: block; 	  	
border-radius: 2px; 	  	
margin: 0 auto; 	
position: absolute; 	
top: 5px;
right: 7px;
border: solid 1px #999;
color: #333;
vertical-align: middle;
}

.pagelayer-elp-color-div-holder .pagelayer-elp-color-div{
position: relative;
border: 0px;
height: calc(100% - 6px);
top: 0;
left: 0;
}

.pagelayer-elp-color-preview{
height: 100%;
background-size: cover !important;
border-radius: 2px;
flex: 1;
}

.pagelayer-elp-color-global{
width: 50%;
border-right: 1px solid #999;
display: flex;
align-items: center;
justify-content: center;
}

.pagelayer-elp-global-icon:hover,
.pagelayer-elp-color-global:hover{
color: #137dc5;
}

.pagelayer-elp-typo-edit-div .pli-pencil{
display: flex;
align-items: center;
justify-content: center;
flex: 1;
}

.pagelayer-elp-global-icon:before,
.pagelayer-elp-color-global:before{
content: "\e9c9";
font-family: 'pagelayer', "Font Awesome 5 Free" !important;
}

.pagelayer-white-border{
outline: 1px solid #dfdfdf;
}

.pagelayer-global-selected,
.pagelayer-global-font-list-item:hover,
.pagelayer-global-color-list-item:hover{
background: #f9f9f9;
}

.pagelayer-global-selected:after{
content: "\ea10";
font-family: 'pagelayer', "Font Awesome 5 Free" !important;
color: #137dc5;
}

.pagelayer-global-font-list,
.pagelayer-global-color-list{
position: absolute;
background: #fff;
padding: 10px 0;
z-index: 9999;
border-radius: 4px;
right: 0;
top: 35px;
width: 250px;
display: none;
max-height: 350px;
overflow-y: auto;
font-size: 12px;
box-shadow: 0px 0px 13px rgb(0 0 0 / 30%);
}

.pagelayer-global-font-list-item,
.pagelayer-global-color-list-item{
display: flex;
padding: 10px 20px;
cursor: pointer;
}

.pagelayer-global-font-list-item .pagelayer-global-font-title,
.pagelayer-global-color-list-item .pagelayer-global-color-title{
flex: 1;
}

.pagelayer-global-color-list-item .pagelayer-global-color-pre{
position: relative;
border: 1px solid #f1f1f1;
margin-right: 7px;
padding: 1px;
background-clip: content-box;
}

.pagelayer-global-color-list-item .pagelayer-global-color-pre:before{
content: '';
padding: 0px 10px;
background-color: #ff000000;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAALElEQVQYGWO8d+/efwYkoKioiMRjYGBC4WHhUK6A8T8QIJt8//59ZC493AAAQssKpBK4F5AAAAAASUVORK5CYII=);
-webkit-background-size: 12px 12px;
background-size: 6px 6px;
position: relative;
z-index: -1;
}

.pagelayer-global-setting-color{
position: relative;
box-shadow: 0 1px 2px #d2cfcf;
padding: 10px 4px;
margin-bottom: 5px;
margin-top: -10px;
cursor: default;
}

.pagelayer-global-setting-color b{
margin-left: 11px;
}

.pagelayer-global-setting-color .pli{
right: 15px;
position: absolute;
cursor: pointer;
}

.pagelayer-elp-typo-icons .pli-service{
cursor: pointer;
}

.pagelayer-elp-global-typo .pli:hover,
.pagelayer-global-setting-color .pli:hover{
color: #137dc5;
}

.pagelayer-active-global{
color: #137dc5;
}

.pagelayer-blank-preview{
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKAAAACgBAMAAAB54XoeAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAC1QTFRFAAAAAQEBBQUFDAwM9PT0+vr6/////v7+BAQE+/v7AgIC/f39AwMDDQ0N8/Pzb6ggJQAAAZ5JREFUeJztlr1twzAQhU+tK7ELDDdBNsgO2SAznAr3JAJXWSJp49YLuPAW2cJbhEdSQZBCEMRHgMVj5U80HnkSfz4Ra06eXjSoTvr6HKGGU94o8vBpqPr2LjLUcAr8ikNEnLx6jT93VZxneBn1Zg9uOlxsxO0suTkXfJywTsG5Ok5x9hK0NKM6bhEosh+nq+HJD+c6TmvG2r8RtrMb9g4aOKY3CA0ElyyHcbAHIXNw5Q9bWeLG2aUH80ItU97K8ihlhmmIUFb+dpZvOceNE7fOnz/UsNztHAMEzSwf6idEqTOLHv0R8THc7/o72Qzrl8vMwAVdmreDFhloLxQcCC65QSC45AYfBV0yfGGjtx78cLjrVaHHF/yAhV8B8EsKfo3CL/pRHFZFnIBlCa5z9EP6If1wBdMPe5QleMkNAumHuZ9+SD9cYPphjzpHP6Qf0g9XMP2wR1mCl9wgkH6Y++mH9MMFph/2qHP0Q/oh/XAF0w97lCV4yQ0C6Ye5n35IP1xg+mGPOkc/pB/SD1cw/bBHWYKX3CCQfpj76Yfr+QfwnsxmcLvdhQAAAABJRU5ErkJggg==') !important;
background-size: cover !important;
opacity: 70%;
}

.picker_arrow {
display:none;
}

.picker_wrapper {
top: 13px !important;
right: -15px !important;
font-family: Roboto !important;
font-size: 12px;
border-radius: 4px;
background:#f7f7f7;
}

.picker_done button{
border: #318088 1px solid;
color: #fff;
background: #248a4c;
border-radius: 2px;
font-size: 14px;
line-height: 1.5;
}

.picker_editor input{
font-family: Roboto !important;
font-size: 12px;
}

.pagelayer-elp-color-span{
padding: 2px 0;
height: 28px;
line-height: 28px;
float: left;
font-size: 10px;
}

.pagelayer-elp-color-div .picker_wrapper{
margin-top: 22px !important;
border: 1px solid rgba(0,0,0,0.2) !important;
background: #fff !important;
box-shadow: 0 3px 5px rgba(0,0,0,0.2) !important;
}

.pagelayer-dark .pagelayer-elp-color-div .picker_wrapper{
border: 1px solid #0277bd !important;
background: #252529 !important;
box-shadow: 0 0.5rem 1rem #00000026 !important;
}

.picker_wrapper{
z-index:12 !important;
}

.pagelayer-dark .picker_done button {
border: none;
font-family: roboto;
color: #777;
background-color: #ffffff;
}

.pagelayer-dark .picker_editor input{
color: #bdbdbd;
background-color: #1c1c1f;
}

.pagelayer-elp-remove-color{
background-color:#616161;
position: absolute;
top: 0;
right: 0;
z-index:1;
box-shadow: 0 0 3px #333;
padding: 3px;
border-top-right-radius: 2px;
}

.pagelayer-elp-remove-color .pli:before{
color: #fff;
font-size: 7px;
}

.pagelayer-elp-icon-div{
cursor: pointer;
padding: 6px;
border: solid 1px #d1d1d1;
background: #fffffc;
color: #333;
vertical-align: middle;
width: 126px;
height: 18px;
display: block;
border-radius: 4px;
margin: 0 auto;
position: absolute;
top: 7px;
right: 10px;
}

.pagelayer-dark .pagelayer-elp-icon-div{
background-color: #1c1c1f;
color: #bdbdbd;
border: 1px solid #6e6d6d;
}

.pagelayer-elp-icon-preview{
position: relative;
display: block;
margin-right: 5px;
float: left;
width: 75%;
height: auto;
border: none;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}

.pagelayer-elp-icon-preview i{
padding-right: 5px;
font-size: 19px;
color: #666;
vertical-align: middle;
}

.pagelayer-dark .pagelayer-elp-icon-preview i,
.pagelayer-dark .pagelayer-elp-icon-name{
color:#bdbdbd;
}

.pagelayer-elp-icon-name{
font-size: 13px;
}

.pagelayer-elp-icon-open,
.pagelayer-elp-icon-close{
float: right;
font-size: 10px;
padding: 0px;
line-height: 20px;
}

.pagelayer-dark .pagelayer-elp-icon-open,
.pagelayer-dark .pagelayer-elp-icon-close{
color:#bdbdbd;
}

.pagelayer-elp-icon-close{
padding-right: 5px;
font-size: 12px;
}

.pagelayer-elp-icon-remove{
position: absolute;
right: 20px;
font-size: 11px;
top: 10px;
z-index: 10;
}

.pagelayer-elp-icon-selector,
.pagelayer-elp-link-list{
position: absolute;
z-index: 1000;
border: 1px solid rgba(0,0,0,0.2) !important;
background: #fff !important;
box-shadow: 0 3px 5px rgba(0,0,0,0.2) !important;
-webkit-border-radius: 2px !important;
text-shadow: none !important;
padding: 5px;
height: auto;
box-sizing: border-box;
display: none;
width: 80%;
border-radius: 2px;
margin: 0 0 0 auto;
top: 40px;
right: 10px;
}

.pagelayer-dark .pagelayer-elp-icon-selector{
background: #252529 !important;
border: 1px solid #ffffff73 !important;
}

.pagelayer-elp-search-icon{
margin-bottom: 5px !important;
padding: 2px 6px;
line-height: 20px !important;
border-radius: 3px !important;
}

.pagelayer-elp-icon-list{
width: 100%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
max-height: 183px;
overflow-y: auto;
}

.pagelayer-elp-icon-list::-webkit-scrollbar {
-webkit-appearance: none;
}

.pagelayer-elp-icon-list::-webkit-scrollbar:vertical {
width: 10px;
}

.pagelayer-elp-icon-list::-webkit-scrollbar-thumb {
border-radius: 8px;
border: 2px solid white;
background-color: rgba(0, 0, 0, .5);
}

.pagelayer-elp-icon-list::-webkit-scrollbar-track { 
background-color: #fff; 
border-radius: 8px; 
}

.pagelayer-elp-icon-span{
display: block;
margin: 2px;
cursor: pointer;
box-sizing: border-box;
border: 1px solid #dbdbdb;
transition: all 0.3s;
font-size: 13px;
padding: 3px;
}

.pagelayer-dark .pagelayer-elp-icon-span,
.pagelayer-dark .pagelayer-elp-icon-span i{
color:#bdbdbd;
}

.pagelayer-elp-icon-span:hover{
border-color: #2563eb;
background-color: #3e8ef7;
color: #ffffff;
box-shadow: 0px 1px 1px #3e8ef7bf;
}

.pagelayer-elp-icon-span i{
font-size: 15px;
line-height: 1em;
padding: 3px;
color: #555;
transition: all 0.3s;
vertical-align: middle;
}

.pagelayer-elp-icon-span:hover i{
color: #ffffff;
}

.pagelayer-elp-icon-type{
display:flex;
flex-grow:1;
text-align:center;
}

.pagelayer-elp-icon-type p{
flex-grow: 1;
padding: 5px 0;
margin: 0 0 3px;
cursor: pointer;
font-size: 12px;
background: #999;
color: #ffffff;
border: 1px solid #777;
}

.pagelayer-elp-icon-type p.active{
background-color:#666666;
}

.pagelayer-dark .pagelayer-elp-icon-type p.active{
background: #0277bd;
}

.pagelayer-elp-icon-sets{
line-height: 27px;
height: 27px;
border-radius: 4px;
margin: 5px 0;
}

.pagelayer-video{
width: 100% !important;
/* background: #ccc; */
position: relative;
/* top: -40px;
float: right;
border-radius: 0px 4px 4px 0px; */
}

.pagelayer-video i{
top: 10px;
position: relative;
left: 8px;
}

.pagelayer-elp-slider-div{
display: flex !important;
align-items: center !important;
width: 100% !important;
padding: 6px 0 !important;
box-sizing: border-box !important;
}

input.pagelayer-elp-slider{
-webkit-appearance: none !important;
flex: 1 1 auto !important;
width: 0 !important;
height: 6px !important;
border-radius: 3px !important;
background-color: #e2e8f0 !important;
outline: none !important;
opacity: 0.8 !important;
transition: opacity 0.2s !important;
padding: 0 !important;
margin: 0 !important;
}

.pagelayer-dark input.pagelayer-elp-slider {
background-color: #334155 !important;
}

.pagelayer-elp-slider:focus{
border-color: transparent;
box-shadow: 0 0 1px transparent;
}

.pagelayer-elp-slider:hover{
opacity: 1;
}

.pagelayer-elp-slider::-webkit-slider-thumb{
-webkit-appearance: none;
appearance: none;
width: 15px;
height: 15px;
border-radius: 50%;
background: #4CAF50;
cursor: pointer;
}

.pagelayer-dark .pagelayer-elp-slider::-webkit-slider-thumb{
background: #3e8ef7;
}

.pagelayer-elp-slider::-moz-range-thumb{
width: 15px;
height: 15px;
border-radius: 50%;
background: #2563eb;
cursor: pointer;
}

.pagelayer-leftbar-holder input.pagelayer-elp-slider-value {
flex: 0 0 55px !important;
width: 55px !important;
height: 28px !important;
border: 1px solid #cbd5e1 !important;
border-radius: 6px !important;
padding: 4px 6px !important;
margin: 0 0 0 12px !important;
font-size: 13px !important;
text-align: center !important;
background-color: #ffffff !important;
color: #0f172a !important;
box-sizing: border-box !important;
}

.pagelayer-dark .pagelayer-leftbar-holder input.pagelayer-elp-slider-value {
border-color: #334155 !important;
background-color: #131926 !important;
color: #f8fafc !important;
}

.pagelayer-elp-datetime-div{
position: relative;
width: 100% !important;
}

.pagelayer-elp-datetime{
width: 100% !important;
box-sizing: border-box !important;
}

.pagelayer-elp-postdate-div{
display: flex !important;
border: 1px solid #cbd5e1 !important;
border-radius: 6px !important;
background-color: #ffffff !important;
height: 32px !important;
align-items: center !important;
overflow: hidden !important;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.02) !important;
transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
width: 100% !important;
box-sizing: border-box !important;
}

.pagelayer-elp-postdate-div:focus-within {
border-color: #2563eb !important;
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15) !important;
}

.pagelayer-elp-postdate{
flex: 1 !important;
height: 100% !important;
border: none !important;
background: transparent !important;
padding: 6px 10px !important;
font-size: 13px !important;
color: #0f172a !important;
outline: none !important;
box-sizing: border-box !important;
min-width: 0 !important;
}

.pagelayer-elp-postdate:first-child {
border-right: 1px solid #cbd5e1 !important;
}

.pagelayer-elp-postdate::-webkit-calendar-picker-indicator {
cursor: pointer !important;
margin-left: 4px !important;
}

.pagelayer-dark .pagelayer-elp-postdate-div {
border-color: #334155 !important;
background-color: #131926 !important;
}

.pagelayer-dark .pagelayer-elp-postdate-div:focus-within {
border-color: #2563eb !important;
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.25) !important;
}

.pagelayer-dark .pagelayer-elp-postdate {
color: #f8fafc !important;
}

.pagelayer-dark .pagelayer-elp-postdate:first-child {
border-right: 1px solid #334155 !important;
}

.pagelayer-elp-fa-calendar{
position: absolute;
height: 40px;
width: 40px;
background: #000;
right: 0;
top: 0;
}

.pagelayer-elp-checkbox-div{
top: 13px;
right:7px;
position: absolute;
}

input[type="checkbox"].pagelayer-elp-checkbox{
font-size: 30px;
-webkit-appearance: none;
-moz-appearance: none;
	appearance: none;
width: 3.5em;
height: 1.7em;
background: #ddd;
border-radius: 3em;
position: relative;
cursor: pointer;
outline: none;
-webkit-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}

input[type="checkbox"].pagelayer-elp-checkbox:checked{
background-color: #1A9CDB;
border-color: #1A9CDB;
}

.pagelayer-dark input[type="checkbox"].pagelayer-elp-checkbox:checked{
background-color: #0d47a1;
}

input[type="checkbox"].pagelayer-elp-checkbox:after{
position: absolute;
content: "";
width: 1.5em;
height: 1.5em;
border-radius: 50%;
background: #fff;
-webkit-box-shadow: 0 0 .25em rgba(0,0,0,.3);
	box-shadow: 0 0 .25em rgba(0,0,0,.3);
-webkit-transform: scale(.7);
	transform: scale(.7);
left: 0;
-webkit-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}

input[type="checkbox"].pagelayer-elp-checkbox:checked:after{
left: calc(100% - 1.5em);
}

.pagelayer-elp-input-icon,
.pagelayer-elp-pos-rel{
position: relative;
}

.pagelayer-elp-link-no-addons > .pagelayer-elp-link{
width:100% !important;
}

.pagelayer-elp-link-no-addons > .pagelayer-elp-link-icon{
display:none !important;
}

.pagelayer-elp-input-icon input{
width: 85%;
}

.pagelayer-elp-input-icon i.pli{
padding:1px 10px;
position:relative;
top:0px;
border: 1px solid #d1d1d1;
border-left:0px;
cursor: pointer;
background:#FFF;
line-height:26px !important;
font-size: 13px;
}

.pagelayer-dark .pagelayer-elp-input-icon i.pli{
background: #e0e0e0;
}

.pagelayer-elp-padding-div i.pli{
padding:8px 11px;
border: 1px solid #d1d1d1;
border-left:0px !important;
cursor: pointer;
background: #FFF;
vertical-align:top;
font-size: 12px;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}

.pagelayer-elp-padding-linked{
background: #1a7fb0 !important;
color: #fff !important;
border: 1px solid #1a7fb0 !important;
}

.pagelayer-elp-padding:first-child{
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
}

.pagelayer-dark .pagelayer-elp-padding-linked{
background: #e0e0e0 !important;
}

.pagelayer-elp-dimension-div {
display: flex !important;
align-items: stretch !important;
width: 100% !important;
position: relative !important;
box-sizing: border-box !important;
}

.pagelayer-elp-dimension-div input.pagelayer-elp-dimension {
flex: 1 1 auto !important;
width: 0 !important;
height: 32px !important;
border: 1px solid #cbd5e1 !important;
border-right: none !important;
border-radius: 0 !important;
box-sizing: border-box !important;
padding: 6px 10px !important;
font-size: 13px !important;
background-color: #ffffff !important;
margin: 0 !important;
}

.pagelayer-elp-dimension-div input.pagelayer-elp-dimension:first-child {
border-radius: 6px 0 0 6px !important;
}

.pagelayer-elp-dimension-div i.pli{
flex: 0 0 auto !important;
width: 36px !important;
height: 32px !important;
border: 1px solid #cbd5e1 !important;
border-radius: 0 6px 6px 0 !important;
box-sizing: border-box !important;
background-color: #f8fafc !important;
color: #64748b !important;
cursor: pointer !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
margin: 0 !important;
position: static !important;
font-size: 14px !important;
line-height: normal !important;
transition: background-color 0.15s ease, color 0.15s ease !important;
}

.pagelayer-elp-dimension-div i.pli:hover {
background-color: #f1f5f9 !important;
color: #2563eb !important;
}

.pagelayer-elp-dimension-div i.pli.pagelayer-elp-dimension-linked,
.pagelayer-elp-dimension-linked{
background-color: #2563eb !important;
border-color: #2563eb !important;
color: #ffffff !important;
}

/* Focus states */
.pagelayer-elp-dimension-div:focus-within input {
border-color: #2563eb !important;
}

.pagelayer-elp-dimension-div:focus-within i.pli:not(.pagelayer-elp-dimension-linked) {
border-color: #2563eb !important;
}

/* Dark Mode Overrides */
.pagelayer-dark .pagelayer-elp-dimension-div input.pagelayer-elp-dimension {
border-color: #334155 !important;
background-color: #131926 !important;
color: #f8fafc !important;
}

.pagelayer-dark .pagelayer-elp-dimension-div i.pli {
border-color: #334155 !important;
background-color: #1e1e24 !important;
color: #94a3b8 !important;
}

.pagelayer-dark .pagelayer-elp-dimension-div i.pli:hover:not(.pagelayer-elp-dimension-linked) {
background-color: #2d2d34 !important;
color: #3b82f6 !important;
}

.pagelayer-dark .pagelayer-elp-dimension-div i.pli.pagelayer-elp-dimension-linked,
.pagelayer-dark .pagelayer-elp-dimension-linked {
background-color: #2563eb !important;
border-color: #2563eb !important;
color: #ffffff !important;
}

.pagelayer-dark .pagelayer-elp-dimension-div:focus-within input,
.pagelayer-dark .pagelayer-elp-dimension-div:focus-within i.pli:not(.pagelayer-elp-dimension-linked) {
border-color: #2563eb !important;
}

/* Pagelayer Multi Select Property */
.pagelayer-elp-multiselect{
min-height: 25px;
width:95%;
}

.pagelayer-elp-multiselect-ul{
list-style:none;
padding:0;
margin:0;
display:none;
border: 1px solid #CCC;
border-radius: 0 0 5px 5px;
border-top:none;
position:absolute;
background:rgb(255, 255, 255);
z-index:1;
width:99%;
}

.pagelayer-dark .pagelayer-elp-multiselect-ul{
background: #1c1c1f;
border: 1px solid #6e6d6d;
border-top: none;
box-shadow: 0 0.5rem 1rem #00000026;
}

.pagelayer-elp-multiselect-option{
font-size:13px;
padding:4px 8px;
cursor:pointer;
}

.pagelayer-dark .pagelayer-elp-multiselect-option{
color: #777;
}

.pagelayer-elp-multiselect-option[selected="selected"]{
background: #f2f2f2;
}

.pagelayer-elp-multiselect-remove{
color: #f2f2f2;
padding-left: 2px;
cursor: pointer;
}

.pagelayer-dark .pagelayer-elp-multiselect-option[selected="selected"]{
background: #0277bd;
color: #fff;
}

.pagelayer-elp-multiselect-selected{
padding: 3px 5px;
border-radius: 5px;
margin: 2px;
background: #44a9db;
line-height: 13px;
font-size: 13px;
color: #fff;
}

.pagelayer-dark .pagelayer-elp-multiselect-selected{
color: #777;
background: #ffffff;
}

.pagelayer-elp-multiselect{
display: flex;
flex-wrap: wrap;
padding: 5px;
border-radius: 3px;
}

/* Pagelayer Multi Select Property end*/

.pagelayer-elp-multi_image{
padding: 3px;
width: 60%;
margin: 5px auto;
border: 1px solid #d5dadf;
position: relative;
text-align: center;
background: #4CBCDF;
color: #fff;
font-size: 13px;
cursor: pointer;
}

.pagelayer-elp-multi_image{
height: 100%;
-webkit-background-size: cover;
background-size: cover;
background-position: 50%;
}

.pagelayer-elp-multi_image-thumbs{
margin-top:10px;
}

.pagelayer-elp-multi_image-thumb{
display: inline-block;
width: 44px;
height: 44px;
background-size: cover;
background-position: 50% 50%;
margin: 0 7px 0 0;
border: 2px solid #d5dadf;
}

.pagelayer-grid-columns-1 .pagelayer-grid-item{
width: 100%;
}

.pagelayer-grid-columns-2 .pagelayer-grid-item{
width: 50%;
}

.pagelayer-grid-columns-3 .pagelayer-grid-item{
width: 33%;
}

.pagelayer-grid-columns-4 .pagelayer-grid-item{
width: 25%;
}

.pagelayer-grid-columns-5 .pagelayer-grid-item{
width: 20%;
}

.pagelayer-grid-columns-6 .pagelayer-grid-item{
width: 16%;
}

.pagelayer-grid-columns-7 .pagelayer-grid-item{
width: 14%;
}

.pagelayer-grid-columns-8 .pagelayer-grid-item{
width: 12%;
}

.pagelayer-grid-columns-9 .pagelayer-grid-item{
width: 11%;
}

.pagelayer-grid-columns-10 .pagelayer-grid-item{
width: 10%;
}

.pagelayer-grid-item{
float: left;
}

.pagelayer-elp-audio-div,
.pagelayer-elp-media-div,
.pagelayer-elp-video-div {
display: flex !important;
align-items: stretch !important;
width: 100% !important;
position: relative !important;
box-sizing: border-box !important;
}

.pagelayer-elp-audio-div input.pagelayer-elp-audio,
.pagelayer-elp-media-div input.pagelayer-elp-media,
.pagelayer-elp-video-div input.pagelayer-elp-video {
flex: 1 1 auto !important;
width: 0 !important;
height: 32px !important;
border: 1px solid #cbd5e1 !important;
border-right: none !important;
border-radius: 6px 0 0 6px !important;
box-sizing: border-box !important;
padding: 6px 10px !important;
font-size: 13px !important;
background-color: #ffffff !important;
margin: 0 !important;
}

.pagelayer-elp-audio-div i.pli,
.pagelayer-elp-media-div i.pli,
.pagelayer-elp-video-div i.pli {
flex: 0 0 auto !important;
width: 36px !important;
height: 32px !important;
border: 1px solid #cbd5e1 !important;
border-radius: 0 6px 6px 0 !important;
box-sizing: border-box !important;
background-color: #f8fafc !important;
color: #64748b !important;
cursor: pointer !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
margin: 0 !important;
position: static !important;
font-size: 14px !important;
line-height: normal !important;
transition: background-color 0.15s ease, color 0.15s ease !important;
}

.pagelayer-elp-audio-div i.pli:hover,
.pagelayer-elp-media-div i.pli:hover,
.pagelayer-elp-video-div i.pli:hover {
background-color: #f1f5f9 !important;
color: #2563eb !important;
}

/* Focus states */
.pagelayer-elp-audio-div:focus-within input,
.pagelayer-elp-media-div:focus-within input,
.pagelayer-elp-video-div:focus-within input {
border-color: #2563eb !important;
}

.pagelayer-elp-audio-div:focus-within i.pli,
.pagelayer-elp-media-div:focus-within i.pli,
.pagelayer-elp-video-div:focus-within i.pli {
border-color: #2563eb !important;
}

/* Dark Mode*/
.pagelayer-dark .pagelayer-elp-audio-div input.pagelayer-elp-audio,
.pagelayer-dark .pagelayer-elp-media-div input.pagelayer-elp-media,
.pagelayer-dark .pagelayer-elp-video-div input.pagelayer-elp-video {
border-color: #334155 !important;
background-color: #131926 !important;
color: #f8fafc !important;
}

.pagelayer-dark .pagelayer-elp-audio-div i.pli,
.pagelayer-dark .pagelayer-elp-media-div i.pli,
.pagelayer-dark .pagelayer-elp-video-div i.pli {
border-color: #334155 !important;
background-color: #1e1e24 !important;
color: #94a3b8 !important;
}

.pagelayer-dark .pagelayer-elp-audio-div i.pli:hover,
.pagelayer-dark .pagelayer-elp-media-div i.pli:hover,
.pagelayer-dark .pagelayer-elp-video-div i.pli:hover {
background-color: #2d2d34 !important;
color: #3b82f6 !important;
}

.pagelayer-dark .pagelayer-elp-audio-div:focus-within input,
.pagelayer-dark .pagelayer-elp-media-div:focus-within input,
.pagelayer-dark .pagelayer-elp-video-div:focus-within input,
.pagelayer-dark .pagelayer-elp-audio-div:focus-within i.pli,
.pagelayer-dark .pagelayer-elp-media-div:focus-within i.pli,
.pagelayer-dark .pagelayer-elp-video-div:focus-within i.pli {
border-color: #2563eb !important;
}

.pagelayer-elp-audio-insert,
.pagelayer-elp-media-select{
position: absolute;
top: 0;
right: 0;
background-color: #000;
height: 100%;
width: 40px;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}

.pagelayer-elp-shadow-div,
.pagelayer-elp-typo-div,
.pagelayer-elp-filter-div{
padding: 0px 10px;
box-shadow: 0px 0px 13px rgba(0,0,0,.3);
position: relative;
margin-top: 8px;
border: 1px solid #ddd;
display: none;
position: absolute;
background-color: #fff;
width: 86%;
z-index: 12;
}

.pagelayer-typo-default{
display:none;
width: 20px;
height: 20px;
cursor: pointer;
margin-left: 4px;
}

.pagelayer-global-on .pagelayer-elp-typo:not([pagelayer-set-global]):hover .pagelayer-typo-default{
display: inline-block;
}

.pagelayer-dark .pagelayer-elp-shadow-div,
.pagelayer-dark .pagelayer-elp-typo-div,
.pagelayer-dark .pagelayer-elp-filter-div{
background-color:#252529;
}

.pagelayer-prop-edit{
padding: 7px;
border: 1px solid #3e8ca4;
width: 20px;
position: absolute;
top: 7px;
right: 11px;
text-align: center;
cursor: pointer;
border-radius: 3px;
}

.pagelayer-prop-edit i{
font-size: 14px;
color: #484848;
}

.pagelayer-dark .pagelayer-prop-edit i{
color:#bdbdbd;
}

.pagelayer-prop-show{
display: block;
}

.pagelayer-elp-shadow-color{
padding: 15px 0px !important;
}

.pagelayer-elp-shadow-color .pagelayer-elp-color-div{
top:7px;
}

.pagelayer-elp-typo,
.pagelayer-elp-prop-grp{
margin: 0px;
padding: 10px 0;
position: relative;
border-bottom: 1px dashed #ccc;
display: flex;
align-items: center;
}

.pagelayer-elp-typo-fonts{
padding: 10px 0;
}

.pagelayer-elp-gradient-div .pagelayer-elp-prop-grp{
padding: 5px 0;
display: flex;
align-items: center;
justify-content: space-between;
}

.pagelayer-elp-gradient-div .pagelayer-elp-label{
width: auto !important;
}

.pagelayer-elp-gradient-input{
width: 65px !important;
text-align: center;
}

.pagelayer-elp-gradient-color{
padding: 15px 0px !important;
}

.pagelayer-elp-prop-grp .pagelayer-elp-color-div{
right: 0;
}

.pagelayer-elp-typo-fonts .pagelayer-elp-label,
.pagelayer-elp-typo .pagelayer-elp-label,
.pagelayer-elp-typo .pagelayer-elp-typo-input,
.pagelayer-elp-shadow-div .pagelayer-elp-shadow-input,
.pagelayer-elp-shadow-div .pagelayer-elp-label,
.pagelayer-elp-prop-grp>label, .pagelayer-elp-prop-grp>input{
width: 50%;
}

.pagelayer-elp-filter-div .pagelayer-elp-label{
width:40%;
text-transform: capitalize;
}

.pagelayer-elp-filter-div .pagelayer-elp-filter-val{
float:right;
width:10%;
font-size:13px;
text-align: right;
}

.pagelayer-elp-filter-input{
background-position: center center !important;
background-size: cover !important;
width: 50% !important;
}

.pagelayer-elp-filter-blur .pagelayer-elp-filter-input{
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFwAAAAKCAIAAAC2Wq7lAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAABq9JREFUeJyVlmtvHGcZhnfOszs7u+s9ENtrI9eqHbWJKSSIlBz4QD/mFxQpUvlSviTKb4nyC4qI/0HkCCgijapQQJBDUe04uPEh69re887OeXa43l2wjNsK+toejd/Dc7if+7nfUTMnhiRJGxsbS0tLk3/TNL1+/fra2hrzvPO8c+fOzZs3eZlsuHv37u3btydL5XL5xo0bv/rwwzeXl9Ikff16b+3Bg3v3fvPs6bMwiqbPTF/92ZX33//FpUvvFoulfq/7ycOHH/36o4d//MRxBpZlrays/PKDD35y6d36XN31gid//9tvf/+7x59+2mg0dF1fXlq6cuXylWvXzp07Z1mFXrfz4MHaxx//YfPFJsZnpqdXfnD+xxcvnHv7fC6fazVbX6x/8fTpsxebm439fU2RL1648NPLl996620rb3W73a1/bj198qTf7w+HQ1mWK5XqwsLC4uIbc3PzZGGYpnoSFNI7hdHJ+cnzePLUkpSRcCBl+M2MmMiMt6X8iCOSzIIcR3E6GmVGYrBDVbSJH1lRVE1jb5ImSRJHYRDFIYYUVcWmooi/NMPxxHN9TdWTUYJFlaEpo1Ey9ithM0wiY5TESYJ5JnVVsy0rCAMiGKWjGMsRxiN84F04HdtniLNh6HpD3cV4pE7yPAXHdx0AJSsydoAjEYOcE/AAJwInYk3TFUmJRUj8BmEYEAd14xSR6brBIALf87udnuP0Qz9UJNk09FwuB1N0zQBkTkErUPA8V1Uk3dBY5bhh6rgOwngwcMjQ9704jgEym8vaUUHxXFCnHr7rEtbQdclfkSRN1UamqcgCGvY7w2Gn3QY2w/hvpvzP8Y3YaZqmKEo2m6V6QeA3j5ps6/UHVCyXs6q1ipRK5UpFMwzHcZuHRy7+3SGh66o+NTWVy+aKpSIjDMJWu+UMnTiISF5RlalyGWRVTS8UberW7fb2Gw3o7flelMRWLletVuM4sW2bzFzPPTo88L3hYIBxn5DsQkFVVDvOg6rn+c1WS9XUoQMsrgLfMikuqCTPKI4H/T5wD5wh7FOXl5dPpkoPZ/7TI8yXSiUkZqIazERRtLm5ebwK5Kx+f34eOArFAqX7/PN/sEYvhUHgDoeLiwv1+kwmIxMWiR8eHv75r3+hG8DLGQyKUyWEAmJTq0ql0h/0Xmxs0gppOgr8APq8sbBQn63Td1SPIn/1VaPdbkEB2if0Pdsu6JrOvGgjVe11up7r8g5RAUXT1XKplNgFyKtrGgoSBPRRZiTaM6JzsZOKSDOQKwrDbg+GOmO+y+r6+vpJFM6ePUvaxxjdv39/dXX1mCbIKiAer966dQthfvnyJe8k/OjRo9XVewHM1xTKuLi4ePXqtWKhQBsBEHB/+erVZ5/9icY2dL1aq62snH/vvZ+riuIF/u727s7Oq3bnS/BCROx8ng1z9Xo2myNJ+gISbW/vuq4DNci8YNsz0zPWzKysSHgE4k67gyiQHt1ocz6fL+RtpIoeBqz2mIMoGq2IzaxpGYomKRJZoTXoTuQQVyhUD5RPCufXxeXU6td7h0nIIgTCsh4/fry9s7O7vaPq2vSZM3VIMjMDymw6OjwcOA6RPX/+nILYBfvijy5C/nfe+aGZNTutdhxGGxvrW1tbFBnI5ufnZ2frXAe1ahV67uy9braahwcHjf0GG/JWntU3l5bn6rOarnGh+J4HF/YPGv3+oFCwOVgqTnHNWfm8Zuh7O7ugtvd6j7zptVqtlsvm6XpVVwGFvsNFr99z+gPXE3r03TTl24agnCbwTeKYhleiwPeLIGUY+qThCRo+kw+hkwMt44d+LitqZuWsJIooLPVAjziezZrgpQpRsCu1KlrT6XSoFaU+ah6hCHE5LpWn2MbT0HTuG2jv+m6r2ez1+3RfrfY9lAKbpakSXg729yFjt9MlAHhB37GHypkml1WC7KOvQ8dpddqD3iCMwtOgfCMd/g9QRGdK8r9Pi9tnNLm/meTuU4SkISVQfzxgKfCNnbEuIaW6afDmieEyzU6eKJGhm7xABzkViuaLdS/MR5mxwIML9xo/7EEsh8gpIwjxgDvDFIhTDFzgjoWh5xqmkaRxmqGPVNM0Y24iWVznrDoDB0wxoPK/NB6Zb7lcjsfxd8rJbccaLGUmZmTesUnSkw8YMS+WBGbEmo4H6bFH3Nniw0boP1o4/npJyI1bQHzfjIGGAjIfInQ/oScjUBWWU1IyIKAi8YcEKSIqnEZjGyPxoYJZ7hGuv3gUTeJEnpMoGX8riY8n4skqemRIqixAoAxQBtCHvvcv+qJRH7fzah8AAAAASUVORK5CYII=') !important;
}

.pagelayer-elp-filter-contrast input{
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAAAKCAMAAAAU2ikOAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAklQTFRFAAAAAgICAwMDBAQEBgYGCAgICwsLAQEBISEhJSUlKioqLy8vNDQ0WFhYXl5eZWVla2trcXFxmpqaoKCgpqamra2ts7OzJiYm1dXV2dnZ3t7e4uLi5ubm2tra+/v7/Pz8/f39/v7+////BQUFBwcHGhoaHh4eIyMjJycnLCwsTk5OVFRUWlpaYWFhaGhoj4+PlpaWnZ2do6Ojqqqqzc3N0tLS19fX3Nzc4ODg9/f3+vr6FBQUGBgYHBwcICAgRUVFS0tLUVFRV1dXhYWFjIyMkpKSmZmZn5+fxMTEysrKz8/P1NTU9PT09vb2+fn5Dw8PEhISFhYWPDw8QUFBSEhIe3t7goKCiIiIu7u7wcHBx8fHzMzM0dHR7+/v8vLy9fX1CgoKDQ0NEBAQFxcXOTk5Pj4+SkpKd3d3fn5+i4uLsrKyuLi4vr6+ycnJ6urq7e3t8PDw8/PzBQYHBQUGBAQFAwMEAgMDFRUVGRkZHR0dIiIiR0dHTU1NYGBglZWVm5uboqKixsbG1tbW29vbBgcIBAUGAwQFExMTGxsbHx8fREREUFBQVlZWhISEkZGRmJiYvb29w8PDzs7O09PT+Pj4AAABDAwMDg4OERERNTU1Ozs7RkZGTExMdHR0enp6gICAjo6OJCQktLS0urq6wMDAy8vL6+vr7u7uAQECLS0tMjIyODg4Q0NDaWlpcHBwdnZ2fX19q6ursbGxt7e35eXl6enpCQkJKysrMDAwX19fbGxsc3NzeXl5oaGhqKiorq6u39/f4+Pj5+fnrIREkAAAAeZJREFUeJxd0Pk/FHEcx/Hv7OLblrvD1S675cjKolJLOVJSIVKtctOKStaQIyKZEuWqJEI50h0lkXT5yzLvT4N2fpnnYx6Pz+vxmQ9jK4+gUjs4OgmMM2GDZuMmZ8jF1c3dQyXLc/OWrdu8ZHn7+Ppth7Q6/wA9yWAwQBxieLig2rGTywgMCg7ZBYUaw3aHQ6aIyKg9Gll790XvPwBpzTG6AJKcWRP7V+QqNRB78FCcBopPSDzsCiUdOZp8DB9Tjp846QNpU9PSY0j2Qa4sidepjMzAIOh01plQI3T2nMUUgeHs8xdycimTl19gXg0a1sQEzinKUS4sKo4tgZwvWuNLIY9LZUnlGLl85WpKBQ1fq7RV/b8hiYnVNddr+eolobr6hhshUGOTMewmZDE1t9zCXGtO7u02KhSY03V2VSaJ4p27TDkl/Xdxe8m9DsjaWXr/AVTWVd7dg5HevoqHjyhjq0p7bPffTJIksRrqZ8pBnww8rauHBoeyng1DI6PPLS/GZI1PTLa+hNqmXuWnkuTgmBKUROg1VxZ1XLlkO/Tm7Tvre+jDx+mZLuzw6fNsbx/t9WWu0kbSr99QkpCqFXg/BdUOX50G8M1rfmFwCPrmtvh9CSM/fv4an6DM7z/LUyR/vZ5u+BdDtnhZvafUoAAAAABJRU5ErkJggg==') !important;	
}

.pagelayer-elp-filter-brightness input{
background-image: linear-gradient(90deg,#000,#fff);
}

.pagelayer-elp-filter-grayscale input{
background-image: linear-gradient(90deg, rgba(203,20,106,1) 0%, rgba(88,88,88,1) 56%);
}

.pagelayer-elp-filter-hue input{
background-image: linear-gradient(90deg,red,orange,#ff0,#adff2f,#32cd32,#00bfff,blue,#9400d3 95%);
}

.pagelayer-elp-filter-saturate input{
background-image: linear-gradient(90deg,gray,red);
}

.pagelayer-elp-filter-opacity input{
background-image: linear-gradient(90deg,#fff,#000);
}

.pagelayer-elp-typo-fonts .pagelayer-elp-label,
.pagelayer-elp-typo .pagelayer-elp-label{
font-weight: 600;
font-size: 11px;
color: #555;
}

.pagelayer-elp-global-typo{
box-shadow: 0 2px 2px -1px #d2cfce;
margin: -10px -10px 0 -10px;
padding: 8px 10px;
display: flex;
}

[pagelayer-screen-mode="desktop"] [pagelayer-show-device]:not([pagelayer-show-device="desktop"]),
[pagelayer-screen-mode="tablet"] [pagelayer-show-device]:not([pagelayer-show-device="tablet"]),
[pagelayer-screen-mode="mobile"] [pagelayer-show-device]:not([pagelayer-show-device="mobile"]){
display:none;
}

.pagelayer-elp-global-typo .pagelayer-elp-typo-icons{
text-align: right;
width: 50%;
}

.pagelayer-elp-global-typo .pagelayer-global-font-list{
width: 100%;	
}

.pagelayer-elp-typo-icons .pagelayer-elp-global-icon{
margin-right: 10px;
cursor: pointer;
}

.pagelayer-dark .pagelayer-elp-typo .pagelayer-elp-label{
color:#bdbdbd;
}

.pagelayer-elp-typo select.pagelayer-elp-typo-input,
.pagelayer-elp-typo-input,
.pagelayer-elp-shadow-input{
padding: 3px;
border-radius: 4px !important;
line-height: 23px !important;
}

.pagelayer-dark .pagelayer-elp-typo select.pagelayer-elp-typo-input{
background-color: #252529;
}

.pagelayer-elp-grad-color{
position:relative;
}

/* Left side menu Input related */
.pagelayer-elp-text,
.pagelayer-elp-spinner,
.pagelayer-elp-tinymce-textarea,
.pagelayer-elp-tinymce {
border-radius: 2px !important;
}

.pagelayer-post-type{
text-transform: capitalize;
}

.pagelayer-elp-text{
padding-left:5px;
}

.pagelayer-elp-select-div,
.pagelayer-elp-spinner-div{
width: 50%;
right: 10px;
position: absolute;
top: 7px;
}

.pagelayer-elp-spinner-div{
width:85px;
}

.pagelayer-elp-spinner{
padding: 2px 0 2px 6px;
border-radius: 4px !important;
}

.pagelayer-elp-select {
font-size: 16px;
font-weight: 700;
color: #444;
line-height: 1.3;
padding: 2px 2px 2px 6px;
width: 100%;
max-width: 100%;
margin: 0;
border: 1px solid #aaa;
border-radius: 3px !important;
box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
background-image: linear-gradient(45deg, transparent 50%, #1A9CDB 50%), linear-gradient(135deg, #1A9CDB 50%, transparent 50%);
background-position: right .9em top 50%, right .55em top 50%;
background-size: 5px 5px, 5px 5px;
background-repeat: no-repeat;
}
.pagelayer-elp-select::-ms-expand {
display: none;
}
.pagelayer-elp-select:hover {
	border-color: #888;
}
.pagelayer-elp-select:focus {
border-color: #aaa;
box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
box-shadow: 0 0 0 3px -moz-mac-focusring;
color: #222;
outline: none;
}
.pagelayer-elp-select option{
font-weight:normal;
}

.pagelayer-dark .pagelayer-elp-select-div .pagelayer-elp-select,
.pagelayer-dark .pagelayer-elp-typo-input .pagelayer-elp-select,
.pagelayer-dark .pagelayer-parent-category .pagelayer-add-cat{
background-color: #252529;
color:#bdbdbd;
}

.pagelayer-elpd-body input:focus,
.pagelayer-elpd-body textarea:focus,
.pagelayer-elpd-body select:focus {
border-color: #3e8ef7;
box-shadow: unset;
}

.pagelayer-elp-group-item{
border: 1px solid #777;
font-size: 13px;
margin-bottom: 10px;
}

.pagelayer-elp-group-item .pagelayer-form-item{
padding: 10px 0px 10px 0px;
}

.pagelayer-elp-group-item .pagelayer-elp-spinner-div,
.pagelayer-elp-group-item .pagelayer-elp-color-div,
.pagelayer-elp-group-item .pagelayer-elp-color-div-holder{
right: 0px !important;
}

.pagelayer-elp-group-item .pagelayer-elp-select-div{
position: relative !important;
width: 100% !important;
right: auto !important;
left: auto !important;
top: auto !important;
display: block !important;
margin-top: 6px !important;
box-sizing: border-box !important;
}

.pagelayer-elp-group-item .pagelayer-elp-select {
width: 100% !important;
}

.pagelayer-elp-group-item .pagelayer-elp-label-div[type=select] {
width: 100% !important;
}

.pagelayer-elp-group-item .pagelayer-elp-label-div {
display: flex !important;
width: 100% !important;
align-items: center !important;
justify-content: space-between !important;
flex-wrap: nowrap !important;
}

.pagelayer-elp-group-item .pagelayer-elp-label-div .pagelayer-elp-units {
margin-left: auto !important;
}

.pagelayer-elp-group-item-head{
display:flex;
background: #F8F8F8;
}

.pagelayer-dark .pagelayer-elp-group-item-head{
background:#252529;
}

.pagelayer-elp-group-item-head span{
cursor: pointer;
padding: 9px;
display:inline-block;
}

.pagelayer-dark .pagelayer-elp-group-item-head span{
color:#bdbdbd;
}

.pagelayer-elp-group-item-head .pagelayer-elp-group-item-drag:hover {
cursor:all-scroll;
}

.pagelayer-elp-group-item-title{
flex-grow: 100;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.pagelayer-elp-group-item-del{
float: right;
}

.pagelayer-elp-group-item-body{
display: none;
padding: 7px 10px;
}

.pagelayer-elp-group-item-clone{
padding-right:0px !important;	
}

.pagelayer-elp-padding{
width:21% !important;
}

.pagelayer-elp-dimension{
width:42% !important;
}

/* END Element Properties Dialog classes */

/* Widget Parameters */

.pagelayer-widgets-form input,
.pagelayer-widgets-form select,
.pagelayer-widgets-form textarea {
border: 1px solid #ddd;
box-shadow: inset 0 1px 2px rgba(0,0,0,.07);
background-color: #fff;
color: #32373c;
outline: 0;
transition: 50ms border-color ease-in-out;
font-size: 15px !important;
line-height: 150% !important;
}

.pagelayer-widgets-form select{
padding:5px;
}

.pagelayer-widgets-form input[type="checkbox"]{
width: auto !important;
height: auto !important;
display: inline-block !important;
float: left !important;
clear: left !important;
margin: 4px 8px 12px 0 !important;
vertical-align: middle !important;
}

.pagelayer-widgets-form input[type="checkbox"] + label {
display: inline-block !important;
float: left !important;
width: calc(100% - 35px) !important;
margin-bottom: 12px !important;
vertical-align: middle !important;
cursor: pointer !important;
}

.pagelayer-widgets-form p,
.pagelayer-widgets-form li {
display: flow-root !important;
}

.pagelayer-widgets-form{
line-height:150%;
border-top: none;
padding: 8px;
}

.pagelayer-dark .pagelayer-widgets-form label{
color:#bdbdbd;
}

.pagelayer-dark .pagelayer-widgets-form input,
.pagelayer-dark .pagelayer-widgets-form select,
.pagelayer-dark .pagelayer-widgets-form textarea {
color:#bdbdbd;
background-color:#1c1c1f;
border:1px solid #6e6d6d;
}

/* End Widget Parameters */

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

.trumbowyg-editor{
min-height: 250px !important;
padding: 10px !important;
}

/* Pagelayer Left bar */

.pagelayer-topbar-holder{
background-color: #4CB5E8;
position:relative;
animation: colorchange 30s infinite alternate;
-webkit-animation: colorchange 30s infinite alternate;
}

@keyframes colorchange{
0%   {background: #3e0772;}
25%  {background: #209ce2;}
50%  {background: #00838c;}
75%  {background: #088dce;}
100% {background: #3d5afe;}
}

.pagelayer-topbar-mover{
cursor: all-scroll;
}

/* Sidebar top header bar */
td.pagelayer-topbar-holder {
background: #26292c !important;
border-bottom: 1px solid #1f2124 !important;
height: 50px !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
padding: 0 15px !important;
box-sizing: border-box !important;
}

.pagelayer-logo{
font-size:18px;
font-weight: bold;
display: block;
text-align:center;
vertical-align:middle;
color:#fff;
width:76%;
}

.pagelayer-logo-text{
font-weight: bold;
margin-left: 5px;
line-height: normal;
vertical-align: super;
}

.pagelayer-settings-icon{
padding-right:10px;
cursor: pointer;
position: absolute;
right: 5px;
top: 50%;
transform: translateY(-50%);
}

.pagelayer-options-icon{
padding-left:10px;
cursor: pointer;
position: absolute;
left: 5px;
top: 50%;
transform: translateY(-50%);
font-size: 18px !important;
color: #ffffff;
}

.pagelayer-leftbar{
width:270px !important;
padding-top:0;
background-color: #E3E3E3;
overflow: hidden;
background: -moz-linear-gradient(224deg, rgba(222,222,222,1) 0%, rgba(191,202,214,1) 100%);  /* ff3.6+ */
background: -webkit-gradient(linear, left bottom, right top, color-stop(0%, rgba(191,202,214,1)), color-stop(100%, rgba(222,222,222,1))); /* safari4+,chrome */
background: -webkit-linear-gradient(224deg, rgba(222,222,222,1) 0%, rgba(191,202,214,1) 100%); /* safari5.1+,chrome10+ */
background: -o-linear-gradient(224deg, rgba(222,222,222,1) 0%, rgba(191,202,214,1) 100%); /* opera 11.10+ */
background: -ms-linear-gradient(224deg, rgba(222,222,222,1) 0%, rgba(191,202,214,1) 100%); /* ie10+ */
background: linear-gradient(226deg, rgba(222,222,222,1) 0%, rgba(191,202,214,1) 100%); /* w3c */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#BFCAD6', endColorstr='#DEDEDE',GradientType=1 ); /* ie6-9 */
}

.pagelayer-dark .pagelayer-leftbar{
background: unset !important;
background-color: #1c1c1f !important;
}

.pagelayer-leftbar-search{
text-align:center;
margin: 20px 40px 10px 25px;
position:relative;
}

.pagelayer-search-field{
width:100%;
line-height:120%;
padding: 5px 20px 5px 30px;
border-radius: 5px;
border: none;
font-size: 14px;
height:30px;
}

.pagelayer-widget-search .pli,
.pagelayer-leftbar-search .pli{
position: absolute;
top: 0;
height: 30px;
padding: 0 7px;
color: #666;
line-height: 30px;
}

.pagelayer-widget-search .pagelayer-sf-empty,
.pagelayer-leftbar-search .pagelayer-sf-empty{
right:0;
left:auto;
font-weight:bolder;
cursor:pointer;
}

.pagelayer-widget-group,
.pagelayer-leftbar-group{
width: 100%;
background-repeat: no-repeat;
background-position: center;
font-size: 11px !important;
color: #442E2E;
clear: both;
text-align: center;
font-family: Roboto, 'Open Sans', Arial, sans-serif !important;
margin-bottom: 2px;
}

.pagelayer-widget-group h5,
.pagelayer-leftbar-group h5{
font-size: 11px;
line-height: 20px;
text-transform: uppercase;
color: #777;
padding: 5px 0 3px;
margin: 5px;
}

.pagelayer-widget-group h5:only-child,
.pagelayer-leftbar-group h5:only-child{
display: none;	
}

.pagelayer-global-widget-pro{
text-align: center;
margin-right: 10px;
padding-top: 20px;
font-size: 14px;
}

.pagelayer-shortcode-holder,
.pagelayer-shortcode-drag{
width: 100px !important;
height:67px !important;
margin-bottom:12px; 
margin-left:12px;
background-color: #FFFFFF;
border-radius: 4px;
float: left;
transition: all 0.1s;
}

.pagelayer-dark .pagelayer-shortcode-drag,
.pagelayer-dark .pagelayer-shortcode-drag:hover{
background-color:#252529;
box-shadow:0 0.5rem 1rem #00000026;
}

.pagelayer-shortcode-holder:hover,
.pagelayer-shortcode-drag:hover{
transform: scale(1.06);
}

.pagelayer-sc{
padding: 4px !important;
margin: 4px auto 0 auto !important;
cursor: move;
}

.pagelayer-shortcode-inner{
height: 25px;
padding: 0px !important;
}

.pagelayer-shortcode-text{
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
font-family: Roboto, 'Open Sans', Arial, Helvetica, sans-serif;
font-size: 11px !important;
font-style: normal;
line-height: 125%;
margin: 0;
overflow: hidden;
cursor: move;
text-overflow: ellipsis;
text-align: center;
width: 100%;
margin-top: 3px;
color: #777;
transition: all 0.3s;
padding:1px;
}

.pagelayer-leftbar-search-empty{
display: none;
padding: 40px;
text-align: center;
color: #777;
font-family: 'Roboto';
}

.pagelayer-leftbar-search-empty p{
margin: 8px;
}

.pagelayer-leftbar-search-empty .fa-sad-tear{
font-size: 24px;
}

.pagelayer-dark .pagelayer-shortcode-text{
color: #bdbdbd;
}

.pagelayer-shortcode-drag:hover .pagelayer-shortcode:before,
.pagelayer-shortcode-drag:hover .pagelayer-shortcode-text{
color: #2563eb;
}

.pagelayer-dark .pagelayer-shortcode-drag:hover .pagelayer-shortcode:before,
.pagelayer-dark .pagelayer-shortcode-drag:hover .pagelayer-shortcode-text{
color: #2563eb;
}

/* Trumbowyg color widget style */
.trumbowyg-dropdown-foreColor,
.trumbowyg-dropdown-backColor {
width: 100% !important;
max-width: 250px !important;
padding: 7px 5px;
left:0 !important;
}

.trumbowyg-dropdown-foreColor svg,
.trumbowyg-dropdown-backColor svg {
display: none !important;
}

.trumbowyg-dropdown-foreColor button[type="button"],
.trumbowyg-dropdown-backColor button[type="button"] {
display: block;
position: relative;
float: left;
text-indent: -9999px;
height: 20px;
width: 20px;
max-height:27px;
max-width:27px;
border: 1px solid #333;
padding: 0;
margin: 2px;
}

.trumbowyg-dropdown-foreColor button[type="button"]:hover::after,
.trumbowyg-dropdown-backColor button[type="button"]:hover::after,
.trumbowyg-dropdown-foreColor button[type="button"]:focus::after,
.trumbowyg-dropdown-backColor button[type="button"]:focus::after{
content: " ";
display: block;
position: absolute;
top: -5px;
left: -5px;
height: 27px;
width: 27px;
max-width:27px;
background: inherit;
border: 1px solid #FFF;
box-shadow: #000 0 0 2px;
z-index: 10;
}

.trumbowyg-dropdown-fontsize,
.trumbowyg-dropdown-lineheight,
.trumbowyg-dropdown-fontfamily{
height: 200px;
overflow: auto;
}

/* Trumbowyg color widget style end */

/* Pagelayer history style*/

.pagelayer-revision-holder,
.pagelayer-history-holder{
border: 1px solid #b7b5b5fa;
margin-bottom: 10px;
padding: 10px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
font-size: 12px;
color:#505050;
}

.pagelayer-leftbar-tab,
.pagelayer-history,
.pagelayer-history-hidden{
display:none;
}

.pagelayer-revision-holder:hover,
.pagelayer-history-holder:hover,
.pagelayer-history-holder.current_active_item{
background-color:#efefef;	
}

.pagelayer-revision-img-holder{
border-radius: 50%;
overflow: hidden;
margin-right:10px;
}

.pagelayer-revision-detail-holder,
.pagelayer-history-detail-holder{
flex:1;
}

.pagelayer-revision-holder .pagelayer-revision-delete,
.pagelayer-history-holder .pagelayer-history-check{
display:none;
}

.pagelayer-revision-holder:hover .pagelayer-revision-delete,
.pagelayer-history-holder.current_active_item .pagelayer-history-check{
display:block;
}

.pagelayer-revision-delete:hover{
cursor:pointer;	
}

.pagelayer-revision-img-holder img{
max-width: 100%;
width: 20px;
height: 20px;
}

.pagelayer-history-holder span{
margin-right:5px;
}

/* Pagelayer history end*/

/* Pagelayer General options*/
.pagelayer-general-options{
color: #777;
background-color: #FFFFFF;
font-size: 14px;
}

.pagelayer-general-options .pagelayer-option-holder{
display: flex !important;
align-items: center !important;
padding: 10px;
border-radius: 4px;
transition: all 0.1s;
margin-bottom:4px;
cursor: pointer;
}

.pagelayer-general-options .pagelayer-option-holder i{
margin: 0 10px;
}

.pagelayer-general-options .pagelayer-option-holder:hover{
color: #3b82f6;
background: #f1f5f9;
}

.pagelayer-dark .pagelayer-general-options .pagelayer-option-holder:hover {
color: #60a5fa !important;
background: #1e293b !important;
}

.pagelayer-general-options .pagelayer-option-holder:active{
transform: scale(0.97);
cursor: progress;
}

.pagelayer-general-options .pagelayer-options-sections{
padding: 10px;
}

.pagelayer-general-options .pagelayer-options-sections:not(:last-child){
border-bottom: 1px solid #ebebeb;
}

.pagelayer-general-options h5{
font-size: 11px;
text-transform: uppercase;
color: #777;
margin: 15px 5px;
}

/* Pagelayer General options end*/

/* Pagelayer settings*/

.pagelayer-post-settings-holder{
border:1px solid #d3d3d3;
font-size: 14px;
line-height: 150%;
}

.pagelayer-post-settings-acc{
background-color:#fff;
}

.pagelayer-post-settings-apply{
font-size: 14px;
font-weight: bold;
cursor: pointer;
border-radius: 2px;
padding: 4px 8px;
margin: auto 5px;
}

.pagelayer-post-settings-apply[disabled]{
opacity:0.5;
}

.pagelayer-post-settings-acc{
margin-top:7px;
}

.pagelayer-post-settings-fields{
padding:10px;
display:none;
}

.pagelayer-post-settings-lable{
border:1px solid #d3d3d3;
padding:10px;
cursor:pointer;
}

.pagelayer-toggle{
float:right;	
}

.pagelayer-toggle:not(.pagelayer-open):before{
content: "\f0da";
}

.pagelayer-toggle.pagelayer-open:before{
content: "\f0d7";
}

.pagelayer-post-settings-fields label{
display:block;
margin:7px 0;
}

/* Pagelayer settings end*/

/*Tooltip TLITE CSS : https://github.com/chrisdavies/tlite */
.pagelayer-tlite {
background: #111;
color: white;
font-family: sans-serif;
font-size: 0.8rem;
font-weight: normal;
text-decoration: none;
text-align: left;
padding: 0.6em 0.75rem;
border-radius: 4px;
position: absolute;
opacity: 0;
visibility: hidden;
transition: opacity 0.4s;
white-space: nowrap;
box-shadow: 0 0.5rem 1rem -0.5rem black;
z-index: 1000;
-webkit-backface-visibility: hidden;
}

.pagelayer-tlite-table td,
.pagelayer-tlite-table th {
position: relative;
}

.pagelayer-tlite-visible {
visibility: visible;
opacity: 0.9;
}

.pagelayer-tlite::before {
content: ' ';
display: block;
background: inherit;
width: 10px;
height: 10px;
position: absolute;
transform: rotate(45deg);
}

.pagelayer-tlite-n::before {
top: -3px;
left: 50%;
margin-left: -5px;
}

.pagelayer-tlite-nw::before {
top: -3px;
left: 10px;
}

.pagelayer-tlite-ne::before {
top: -3px;
right: 10px;
}

.pagelayer-tlite-s::before {
bottom: -3px;
left: 50%;
margin-left: -5px;
}

.pagelayer-tlite-se::before {
bottom: -3px;
right: 10px;
}

.pagelayer-tlite-sw::before {
bottom: -3px;
left: 10px;
}

.pagelayer-tlite-w::before {
left: -3px;
top: 50%;
margin-top: -5px;
}

.pagelayer-tlite-e::before {
right: -3px;
top: 50%;
margin-top: -5px;
}
/*Tooltip end*/

/* Add section modal*/
.pagelayer-add-section-modal-container{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #00000069;
z-index:9999;
display:none;
font-family: Roboto, 'Open Sans', Arial, Helvetica, sans-serif;
}

.pagelayer-add-section-modal-close{
font-size: 30px;
float: right;
cursor:pointer;
line-height: 100%;
}

.pagelayer-add-section-modal-holder{
position: relative;
font-size: 18px;
height: 100vh;
}

.pagelayer-add-section-modal{
background-color: #ffffff;
width: 100%;
margin: auto;
position: relative;
}

/* Add modal for editor*/
.pagelayer-editor-modal{
position:fixed;
display:none;
justify-content:center;
align-items:center;
top:0;
left:0;
width:100%;
height:100%;
z-index:9999;
background-color:rgba(0, 0, 0, 0.3);
}

.pagelayer-editor-modal *{
box-sizing:border-box;
padding:0;
margin:0;
}

.pagelayer-editor-modal-wrap{
background-color: #FFF;
border-radius:2px;
width: 40%;
box-shadow: 0 10px 10px rgb(0 0 0 / 25%);
}

.pagelayer-editor-modal-header{
display:flex;
justify-content:space-between;
align-items: center;
padding: 20px 30px;
border-bottom: 1px solid #ccc;
}

.pagelayer-editor-modal-header i{
font-size: 1.3em;
cursor:pointer;
}

.pagelayer-editor-modal-header i:hover{
color: #3e8ef7;
}

.pagelayer-editor-modal-body{
padding: 0 25px;
}

.pagelayer-edt-modal-block{
margin: 10px;
}

.pagelayer-edt-modal-block ul{
padding:0;
margin-bottom:10px;
}

.pagelayer-edt-modal-block li{
list-style-type:none;
display:flex;
flex-direction:row;
justify-content:space-between;
font-size:1.1em;
padding: 10px 0;
border-bottom: 1px solid #ccc;
color: #282828;
}

.pagelayer-keyboard-shortcut-keys{
font-weight: bold;
}

.pagelayer-keyboard-shortcut-keys > span{
margin: 0 4px;
background-color: #e8e8e8;
padding: 5px 7px;
border-radius: 3px;
}

/* width */
.pagelayer-add-section-modal::-webkit-scrollbar {
width: 7px;
}

/* Track */
.pagelayer-add-section-modal::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius:5px;
}
 
/* Handle */
.pagelayer-add-section-modal::-webkit-scrollbar-thumb {
background: #c1c1c1;
border-radius:5px;
}

/* Handle on hover */
.pagelayer-add-section-modal::-webkit-scrollbar-thumb:hover {
  background: #555; 
}

.pagelayer-add-section-modal-header{
padding: 15px;
position: sticky;
background: #5e5e5e;
top: 0;
z-index: 999;
color: #fff;
}

.pagelayer-add-section-modal-header>div{
display: inline-block;
}

.pagelayer-section-type-div{
width: 85%;
text-align: center;
}

.pagelayer-add-section-modal-row{
display: flex;
flex-direction: row;
}

.pagelayer-add-section-modal-left{
min-width: 250px;
width: 250px;
background-color: #ccc;
}

.pagelayer-section-search-div{
text-align:center;
margin: 20px;
position:relative;
}

.pagelayer-section-search{
width:100%;
line-height:120%;
padding: 5px 20px 5px 30px;
border-radius: 5px;
border: none;
font-size: 14px;
height:30px;
}

.pagelayer-section-search-div .pli{
position: absolute;
top: 0;
height: 30px;
padding: 0 7px;
color: #666;
line-height: 30px;
}

.pagelayer-section-search-div .pagelayer-sf-empty{
right:0;
left:auto;
font-weight:bolder;
cursor:pointer;
}

.pagelayer-section-tags-holder{
padding: 0px 10px;
height: calc(100vh - 150px);
overflow: auto;
}

.pagelayer-section-tags{
background: #1A9CDB;
cursor: pointer;
padding: 5px;
color: #fff;
font-size: 13px;
display: inline-block;
margin: 3px;
}

.pagelayer-section-tags[on="1"]{
background: #326fa6;
}

.pagelayer-section-modal-body-holder{
overflow:auto;
height: calc(100vh - 50px);
width: calc(100vw - 250px);
background: #efefef;
}

.pagelayer-add-section-modal-body{
margin: 0;
background: #efefef;
height: 100%;
display: flex;
flex-wrap: wrap;
}

.pagelayer-add-section-modal-footer{
padding: 15px;
border-top: 1px solid #e5e5e5;
}

.pagelayer-section-is-visible{
height: 50px;
flex-basis: 100%;
}

.pagelayer-section-holder{
vertical-align: top;
background: #efefef;
flex: 1;
}

.pagelayer-section-item{
min-height: 50px;
margin:15px;
z-index: 9;
transition-duration: 0.2s;
background-color:#fff;
border: 3px solid #fff;
border-radius: 4px;
cursor: pointer;
position: relative;
}

.pagelayer-section-item:hover{
z-index: 99;
transform: scale(1.01);
border: 3px solid #1A9CDB;
}

.pagelayer-section-item img{
width:100%;
}

.pagelayer-section-item[pagelayer-section-type=page]{
max-height: 350px;
overflow: auto;
}

.pagelayer-section-pro-req{
position: absolute;
top: 15px;
right: 0px;
font-size: 14px;
padding: 10px;
background-color: #e63131;
color: #fff;
margin-left: 4px;
border-radius: 2px;
cursor: pointer;
}

.pagelayer-section-pro-txt{
position: absolute;
top: 45%;
left: 0px;
font-size: 14px;
padding: 10px;
color: #fff;
line-height: 120%;
background: #111;
opacity: 0;
transition: all 0.3s;
}

.pagelayer-section-item:hover > .pagelayer-section-pro-txt{
opacity: 0.8;
}

.pagelayer-section-pro-txt a{
color: #1A9CDB;
}

.pagelayer-add-section-modal-overlay{
position: absolute;
top:0;
bottom:0;
height:100%;
width:100%;
z-index:999999;
align-items: center;
justify-content: center;
text-align:center;
display:flex;
background-color:#f7f7f7fa;
}

.pagelayer-section-wait .fa-spin{
font-size:50px;
}

/* Add section modal end */

/* Navigator start */
.pagelayer-leftbar-prop-body{
margin:10px 0px;	
background-color:#ffffff;
border: 1px solid #d3d3d3;
font-size:12px;
}

.pagelayer-ele-name{
padding: 10px;
border-bottom:1px solid #d3d3d3;
color: #000000;
}

.pagelayer-ele-name:hover{
background-color:#f5f5f5;
cursor:pointer;
}

.pagelayer-navigetor-ele > .pagelayer-navigetor-ele{
display:none;
}

.pagelayer-navigator-open > .pagelayer-navigetor-ele{
display:block;
}

.pagelayer-ele-name .fa:before{
margin-right:8px;
font-family:pagelayer,fontawesome;
font-size:14px !important;
}

.pagelayer-navi-active{
background-color: #d5e4f7
}

.pagelayer-navigator-options{
float: right;
}

.pagelayer-navigator-options .pli{
padding: 0 4px;
}
/* Navigator end */

/* Left bar move start */
.pagelayer-leftbar-moving{
position:absolute;
height:80vh;
z-index:999;
box-shadow:0 0 5px #e1e1e1;
}

.pagelayer-overflow-hidden{
overflow:hidden !important;
}

.pagelayer-leftbar-move{
width:30px;
height:100%;
background-color:#00BCD4;
position:absolute;
opacity: 0.33;
}

.pagelayer-moveto-left{
left:0;
right:auto;
}

.pagelayer-moveto-right{
right:0;
left:auto;
}

.pagelayer-close-bar{
background-color: #000;
color: #ffffff;
height:15px;
}

.pagelayer-leftbar-table:not(.pagelayer-leftbar-moving) .pagelayer-close-bar{
display:none;
}

.pagelayer-leftbar-minimize{
height:auto;
}

.pagelayer-close-bar-icons{
float:right;
}

.pagelayer-close-bar-icons i{
padding:5px 10px;
font-size: 10px;
}

.pagelayer-close-bar-icons i:hover{
background-color: #E3E3E3;
color: #000;
}

.pagelayer-leftbar-moving.pagelayer-leftbar-minimize .pagelayer-leftbar-holder,
.pagelayer-leftbar-moving.pagelayer-leftbar-minimize .pagelayer-bottombar-row{
display:none;
}

/* Left bar move end*/

/* Pre-Loading animaiton classes */
#pagelayer-loader-wrapper {
background-color:white;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
height: 100%;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
position: fixed;
left: 0;
top: 0;
width: 100%;
z-index: 9000;
}

#pagelayer-loader-wrapper .pagelayer-animation-section {
position: absolute;
z-index: 1000;
}

.pagelayer-loader {	
position:relative;
width: 150px;
height: 150px;
margin: 0 auto 50px auto;
z-index: 1001;
}

.pagelayer-loader:before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: #3498db;
-webkit-animation: spin 3s linear infinite; 
animation: spin 3s linear infinite;
}

.pagelayer-loader:after {
content: "";
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: #e74c3c;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}

.pagelayer-loader .pagelayer-percent-parent{
width:100%;
height:100%;
margin:auto;
display: flex;
align-items: center;
justify-content: center;
text-align:center;
}

.pagelayer-loader .pagelayer-percent-parent:before{
content: "";
position: absolute;
top: 20px;
left: 20px;
right: 20px;
bottom: 20px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: #f9c922;
-webkit-animation: spin 1.5s linear infinite;
animation: spin 1.5s linear infinite; 
}

.pagelayer-loader .pagelayer-percent-parent .pagelayer-percent{
font-size:30px;
}

@-webkit-keyframes spin {
0%{ 
	-webkit-transform: rotate(0deg);  
	-ms-transform: rotate(0deg);  
	transform: rotate(0deg);  
}
100%{
	-webkit-transform: rotate(360deg);
	-ms-transform: rotate(360deg);
	transform: rotate(360deg);
}
}

@keyframes spin {
0%   { 
	-webkit-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
	transform: rotate(0deg);
}
100% {
	-webkit-transform: rotate(360deg);
	-ms-transform: rotate(360deg);
	transform: rotate(360deg);
}
}

#pagelayer-loader-wrapper .pagelayer-animation-section .pagelayer-txt-loading {
font: bold 7em Poppins,sans-serif;
text-align: center;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

.pagelayer-txt-loading .letters-loading {
color: rgba(0,0,0,0.2);
position: relative;
}

.pagelayer-txt-loading .letters-loading:before {
-webkit-animation: letters-loading 4s infinite;
animation: letters-loading 4s infinite;
color: #000;
content: attr(data-text-preloader);
left: 0;
opacity: 0;
font-family: "Poppins",sans-serif;
position: absolute;
-webkit-transform: rotateY(-90deg);
transform: rotateY(-90deg);
}

.pagelayer-txt-loading .letters-loading:nth-child(2):before {
-webkit-animation-delay: .2s;
animation-delay: .2s
}
.pagelayer-txt-loading .letters-loading:nth-child(3):before {
-webkit-animation-delay: .4s;
animation-delay: .4s
}
.pagelayer-txt-loading .letters-loading:nth-child(4):before {
-webkit-animation-delay: .6s;
animation-delay: .6s
}
.pagelayer-txt-loading .letters-loading:nth-child(5):before {
-webkit-animation-delay: .8s;
animation-delay: .8s
}
.pagelayer-txt-loading .letters-loading:nth-child(6):before {
-webkit-animation-delay: 1s;
animation-delay: 1s
}
.pagelayer-txt-loading .letters-loading:nth-child(7):before {
-webkit-animation-delay: 1.2s;
animation-delay: 1.2s
}
.pagelayer-txt-loading .letters-loading:nth-child(8):before {
-webkit-animation-delay: 1.4s;
animation-delay: 1.4s
}
.pagelayer-txt-loading .letters-loading:nth-child(9):before {
-webkit-animation-delay: 1.6s;
animation-delay: 1.6s
}
.pagelayer-txt-loading .letters-loading:nth-child(10):before {
-webkit-animation-delay: 1.8s;
animation-delay: 1.8s
}
.pagelayer-txt-loading .letters-loading:nth-child(11):before {
-webkit-animation-delay: 2s;
animation-delay: 2s
}

.pagelayer-loaded .pagelayer-animation-section .pagelayer-loader,
.pagelayer-loaded .pagelayer-animation-section .pagelayer-txt-loading {
opacity: 0;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}

@-webkit-keyframes letters-loading {
0%, 75%, 100% {
opacity: 0;
-webkit-transform: rotateY(-90deg);
transform: rotateY(-90deg)
}
25%, 50% {
opacity: 1;
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg)
}
}
@keyframes letters-loading {
0%, 75%, 100% {
opacity: 0;
-webkit-transform: rotateY(-90deg);
transform: rotateY(-90deg)
}
25%, 50% {
opacity: 1;
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg)
}
}

@media screen and (max-width: 767px) {
#pagelayer-loader-wrapper .pagelayer-animation-section .pagelayer-loader {
height: 8em;
width: 8em
}
#pagelayer-loader-wrapper .pagelayer-animation-section .pagelayer-txt-loading {
font: bold 3.5em Poppins, sans-serif
}
.pagelayer-loader .pagelayer-percent-parent .pagelayer-percent{
font-size:20px;
}
}
@media screen and (max-width: 500px) {
#pagelayer-loader-wrapper .pagelayer-animation-section .pagelayer-loader {
height: 7em;
width: 7em
}
#pagelayer-loader-wrapper .pagelayer-animation-section .pagelayer-txt-loading {
font: bold 2em Poppins, sans-serif
}
.pagelayer-loader .pagelayer-percent-parent .pagelayer-percent{
font-size:15px;
}
}

/* Pre-Loading animaiton classes end*/

/* Update Loading animation class start */

.pagelayer-update-button{
width:58px;
height:24px;
}

.pagelayer-update-loader{
display:none;
padding:2px;
white-space: nowrap;
}

.pagelayer-update-loader span{
width:8px;
height:8px;
margin: 0 2px;
background-color: #ededede0;
border-radius: 50%;
display:inline-block;
animation: dots 0.9s ease-in-out infinite;
}

.pagelayer-update-loader span:nth-child(2){
animation-delay: 0.3s;
}

.pagelayer-update-loader span:nth-child(3){
animation-delay: 0.6s;
}

@keyframes dots{
50%{
opacity:0;
}
}

/* Update Loading animation class end */

/* Error box css starts */

.pagelayer-errorBox{
position:absolute;
top:10px;
left: 0; 
right: 0; 
margin-left: auto; 
margin-right: auto; 
width:70%;
height:234;
border-radius:20px;
background-color:#fffafa;
box-shadow: 1px 1px 8px #ffc7c7;
z-index:9999;
display:none;
}

.pagelayer-errorBox-close{
position:absolute;
right:10;
top:10;
font-size:20px;
padding:5px;
color:lightgrey;
cursor:pointer;
}

.pagelayer-errorBox-main{
height:180px;
margin:2px 10px;
}

.pagelayer-errorBox-main h2{
color:red;
font-size:20px;
margin:0;
}

.pagelayer-errorBox-main h2 i{
font-size:30px;
margin:10px;
vertical-align:middle;
}

.pagelayer-errorBox-content{
margin-left:90px;
font-size:13px;
overflow:auto;
height:130px;
border-bottom:1px solid lightgrey;
}

.pagelayer-errorBox-resolve{
text-align:right;
padding:10px;
}
.pagelayer-errorBox-resolve p{
display:inline;
margin:10px;
}

.pagelayer-errorBox-resolve .pagelayer-errorBox-support, .pagelayer-errorBox-resolve .pagelayer-errorBox-copy{
cursor:pointer;
padding: 5px;
border-radius: 5px;
color: white;
}

.pagelayer-errorBox-resolve .pagelayer-errorBox-copy{
background-color: #616cf3;
border: 1px solid blue;
}

.pagelayer-errorBox-resolve .pagelayer-errorBox-support{
background-color: #56b45d;
border: 1px solid green;
}

/* Error box css ends */

/* Property modal start*/
.pagelayer-elp-modal-wrapper{
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow-y: auto;
background: #0000009c;
z-index: 999;
color: #fff;
display:none;
}

.pagelayer-elp-modal-wrap{
width: 500px;
background-color: #fff;
position: relative;
margin: 20px auto;
border-radius: 5px;
box-shadow: 0px 0px 7px 0px #fff;
}

.pagelayer-elp-modal-close{
float:right;
padding: 5px;
cursor:pointer
}

.pagelayer-elp-modal-header{
padding:15px 20px 10px;
margin-top: 10px;
font-size: 13px;
font-weight: bold;
color: #555;
}

.pagelayer-elp-modal-holder{
padding: 5px 20px 10px;
}

/* Property modal end*/
/* Property link start*/

.pagelayer-elp-link-list{
max-height:250px;
overflow:auto;
width: 99%;
top: 35px;
right: 4px;
}

.pagelayer-elp-link-list .pagelayer-elp-link-search{
width:100%;
}

.pagelayer-elp-link-item{
display: flex;
font-size: 13px;
padding: 7px 2px;
margin: 2px 0;
cursor: pointer;
align-items:center;
}

.pagelayer-elp-link-item:hover{
box-shadow: inset 0 0 0 1px #555d66, inset 0 0 0 2px #fff;
border-radius: 4px;
}

.pagelayer-elp-link-item span{
text-overflow: ellipsis;
display: inline-block;
overflow: hidden;
white-space: nowrap;
width: 100%;
padding:3px;
}

.pagelayer-elp-link-item-title{
font-weight:bold;
}

.pagelayer-elp-link-item-perma{
color:#999;
}

.pagelayer-elp-link-title{
width: 73%;
margin-right:2%;
}

.pagelayer-elp-link-info{
width: 20%;
background-color: #ededed;
padding: 2px;
font-size:11px;
}

.pagelayer-elp-link-id{
background-color: #ededed;
padding: 2px 6px;
font-size:12px;
margin-left:5px;
}

.pagelayer-elp-link-info span{
padding: 4px;
}

.pagelayer-elp-link-div .pagelayer-elp-link-addons{
margin-right: 30px;
display: none;
}

.pagelayer-elp-link-div .pagelayer-elp-link-cb-div{
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 5px;	
}

.pagelayer-elp-link-div .pagelayer-elp-link-cb-div:first-child{
margin-top: 10px;
}

.pagelayer-elp-link-div .pagelayer-elp-link-ca{
margin: 5px 0px;	
}

.pagelayer-elp-link-ca input{
width: 100%;
}

/* Property link end*/
/* Editor notice start*/
.pagelayer-editor-notice{
position: fixed;
right: 10px;
top: 10px;
padding-right: 16px;
transition: all 5s ease-out;
pointer-events: none;
}

.sitepad-body .pagelayer-editor-notice{
top:50px;
}

.pagelayer-editor-msg{
position:relative;
font-size: 13px;
background-color: rgba(0,0,0,.8);
border-radius: 4px;
box-shadow: 0 2px 4px rgba(0,0,0,.3);
color: #fff;
padding: 16px 30px 16px 15px;
margin-bottom:7px;
transition: opacity 800ms ease-out;
pointer-events: all;
width:fit-content;
margin-left:auto;
}

.pagelayer-editor-msg.pagelayer-editor-msg-state-success{
background-color: #449d44;
}

.pagelayer-editor-msg.pagelayer-editor-msg-state-error{
background-color: #ef4d4d;
}

.pagelayer-editor-msg.pagelayer-editor-msg-state-warning{
background-color: #cd8500;
}

.pagelayer-notice-x{
position: absolute;
top: 50%;
right: 10px;
transform: translateY(-50%);
cursor:pointer;
}

/* Editor notice end*/
/* Pagelayer post setting modal start*/
.pagelayer-props-modal{
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 1100;
background-color:#2d2d2d8c;
display:none;
}

.pagelayer-props-holder{
position:relative;
height: 100%;
overflow: auto;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
margin:auto;
max-height: 967px;
}

.pagelayer-props-wrap{
position:relative;
height: 90%;
width: 90%;
margin:auto;
overflow: auto;
display: flex;
justify-content: center;
align-items: center;
border-radius: 10px
}

.pagelayer-props-loading-screen{
position:absolute;
border: 8px solid transparent;
border-radius: 50%;
border-top: 8px solid #ebebeb;
width: 80px;
height: 80px;
-webkit-animation: propsLoading 0.5s ease-in-out infinite; /* Safari */
animation: propsLoading 0.5s ease-in-out infinite;
}

/* Safari */
@-webkit-keyframes propsLoading {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}

@keyframes propsLoading {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}

.pagelayer-props-wrap .pagelayer-meta-iframe{
position: relative;
width: 100%;
height: 100%;
border: 0px;
}

.pagelayer-props-modal-close{
position: absolute;
top: 20px;
right: 25px;
z-index: 999;
cursor:pointer;
visibility:hidden;
}

@keyframes highlight {
0% {
	background: #dfdfdf;
}
100% {
	background: #fff;
}
}

.highlight {
    animation: highlight 1s;
	animation-iteration-count: 5;
}
/* Pagelayer post setting modal end  */

/* Pagelayer post props(category) start  */
.pagelayer-post-cat-div{
max-height:300px;
overflow:auto;
}

.pagelayer-post-category, .pagelayer-post-category ul{
list-style:none;
padding:0;
margin:0;
margin-left:16px;
}

.pagelayer-post-category li{
margin:8px 0px;	
}

.pagelayer-post-category label, .pagelayer-elp-postCategory *{
font-size:small;
}

.pagelayer-post-category input[type=checkbox]{
margin-right:5px;
background-color:#007cba;
width:16px;
height:16px;
}

.pagelayer-add-cat-btn{
color:#0073aa;
cursor:pointer;
line-height:3;
}

.pagelayer-add-cat-btn:hover {
color: #2563eb;
}

.pagelayer-elp-postCategory input, .pagelayer-parent-category > select{
margin-top:5px;
margin-bottom:12px;
}

.pagelayer-parent-category{
margin-top:5px;
}

.pagelayer-parent-category > select{
height:32px;
outline:none;
}

.pagelayer-cat-submit{
color: #007cba;
border: 1px solid #007cba;
padding: 10px;
background-color: white;
cursor: pointer;
}

.pagelayer-cat-submit:hover{
color: #006ba1;
border: 1px solid #006ba1;	
}

.pagelayer-dark .pagelayer-cat-submit, 
.pagelayer-elp-postCategory input{
background-color:transparent;
}

.pagelayer-dark .pagelayer-cat-submit:hover{
color:white;
background-color:#007cba;
}

/* Pagelayer post props(category) end  */
/* Pagelayer post props(tags) start  */

.pagelayer-elp-postTags{
border: 1px solid #757575;
border-radius: 2px;
display: flex;
flex-wrap: wrap;
padding:2px;
}

.pagelayer-post-tags{
display: flex;
flex-wrap: wrap;
align-items: flex-start;
}

.pagelayer-elp-tags-ele{
display: flex;
margin: 2px 4px 2px 0;
max-width: 100%;
background-color: #ddd;
border-radius: 2px;	
font-size: 13px;
padding: 5px;
}

.pagelayer-elp-tags-ele .pagelayer-tags-label{
padding: 2px;
}

.pagelayer-elp-tags-ele .pagelayer-elp-tags-remove{
cursor:pointer;
padding: 3px 5px;
}

.pagelayer-elp-postTags-inp{
width:auto;
display: inline-block;
flex: 1;
padding: 5px;
height: 26px;
border: none !important;
outline: none !important;
max-width: 100%;
min-height: 24px;
min-width: 50px;
background: inherit;
color: #1e1e1e;
box-shadow: none;
margin-top:3px;
}

.pagelayer-post-tags .pagelayer-postTags-list{
flex: 1 0 100%;
min-width: 100%;
max-height: 9em;
overflow-y: auto;
transition: all .15s ease-in-out;
list-style: none;
border-top: 1px solid #757575;
outline: none;
border: none;
margin: 0;
margin-top:4px;
padding:0;
}

.pagelayer-post-tags .pagelayer-postTags-list li{
color: #757575;
display: block;
font-size: 13px;
padding: 4px 8px;
margin: 0;
cursor: pointer;
border-top: 1px solid #757575;
}

.pagelayer-post-tags .pagelayer-postTags-list li:hover{
color:white;
background-color:#007cba;
}

.pagelayer-elp-trash-button-div{
text-align: center !important;
margin-top: 8px !important;
}

.pagelayer-elp-trash-button{
color: #dc2626 !important;
padding: 6px 14px !important;
white-space: nowrap !important;
background: transparent !important;
text-decoration: none !important;
font-size: 12px !important;
font-weight: 500 !important;
cursor: pointer !important;
border: 1px solid #dc2626 !important;
border-radius: 6px !important;
line-height: 1.2 !important;
display: inline-block !important;
transition: all 0.2s ease !important;
}

.pagelayer-elp-trash-button:hover{
background-color: #fee2e2 !important;
color: #b91c1c !important;
border-color: #b91c1c !important;
box-shadow: none !important;
}

.pagelayer-dark .pagelayer-elp-trash-button:hover{
color: #ffffff !important;
background-color: #dc2626 !important;
border-color: #dc2626 !important;
}

.pagelayer-dark .pagelayer-elp-postdate-div .pagelayer-elp-postdate::-webkit-calendar-picker-indicator{
filter: invert(70%);
}
/* Pagelayer post props(tags) end */
/* Pagelayer widget list tooltip start*/

.pagelayer-widget-tooltip{
position: fixed;
top: 0;
left: 0;
background: #fff;
width: 300px;
max-height: 350px;
min-height: 125px;
height: auto;
overflow-y: auto;
box-shadow: 0 2px 6px rgb(0 0 0 / 5%);
border-radius: 2px;
display: none;
z-index: 999;
}

.pagelayer-widget-search-holder{
position: sticky;
top: 0;
padding: 10px 10%;
z-index: 1;
background: #fff;
}

.pagelayer-widget-search{
position: relative;
}

.pagelayer-pointer.pagelayer-shortcode-text,
.pagelayer-pointer.pagelayer-sc{
cursor: pointer !important;
}

.pagelayer-widget-tooltip .pagelayer-search-field{
border: 2px solid;
}

.pagelayer-widget-tooltip .pagelayer-shortcode-holder{
width: 70px !important;
border: 1px solid transparent;
}

.pagelayer-widget-list-tooltip{
width: 200px !important;
padding: 6px !important;
border-radius: 6px !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
border: 1px solid #e2e8f0 !important;
box-sizing: border-box !important;
}

.pagelayer-dark .pagelayer-widget-list-tooltip {
background-color: #1e1e24 !important;
border-color: #2d2d34 !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

.pagelayer-shortcode-holder[pagelayer-tag="pl_row"],
.pagelayer-shortcode-holder[pagelayer-tag="pl_col"],
.pagelayer-widget-list-tooltip .pagelayer-widget-group h5,
.pagelayer-widget-list-tooltip .pagelayer-widget-search-holder{
display:none !important;
}

.pagelayer-widget-list-tooltip .pagelayer-shortcode{
width: 20px !important;
height: 20px !important;
font-size: 16px !important;
text-align: center !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}

.pagelayer-widget-list-tooltip .pagelayer-shortcode-holder{
width: 100% !important;
height: auto !important;
float: unset !important;
margin: 2px 0px !important;
border: 1px solid transparent !important;
border-radius: 4px !important;
background-color: transparent !important;
box-sizing: border-box !important;
transition: background-color 0.15s ease, border-color 0.15s ease !important;
}

.pagelayer-widget-list-tooltip .pagelayer-shortcode-holder:hover {
transform: none !important;
background-color: #f1f5f9 !important;
}

.pagelayer-dark .pagelayer-widget-list-tooltip .pagelayer-shortcode-holder:hover {
background-color: #2d2d34 !important;
}

.pagelayer-widget-list-tooltip .pagelayer-sc{
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: flex-start !important;
padding: 6px 8px !important;
margin: 0 !important;
height: auto !important;
width: 100% !important;
box-sizing: border-box !important;
}

.pagelayer-widget-list-tooltip .pagelayer-shortcode-text{
text-align: left !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
max-width: none !important;
font-size: 12px !important;
font-weight: 500 !important;
color: #334155 !important;
}

.pagelayer-dark .pagelayer-widget-list-tooltip .pagelayer-shortcode-text {
color: #cbd5e1 !important;
}

.pagelayer-widget-list-tooltip .pagelayer-shortcode-inner{
height: auto !important;
width: auto !important;
margin-bottom: 0px !important;
margin-right: 10px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}

.pagelayer-widget-list-tooltip .pagelayer-shortcode-holder.pagelayer-list-widget-active{
border: 1px solid #3b82f6 !important;
background-color: #eff6ff !important;
}

.pagelayer-dark .pagelayer-widget-list-tooltip .pagelayer-shortcode-holder.pagelayer-list-widget-active {
border: 1px solid #3b82f6 !important;
background-color: #1e293b !important;
}

/* Pagelayer widget list tooltip end*/
/* Menu start */
.pagelayer-elp-menu-items-holder{
padding-top: 15px;
}

.pagelayer-drag-highlight{
margin-top: 0;
margin-bottom: 10px;
max-width: calc(100% - 2px);
border: 1px dashed #a7aaad;
height: 33px !important;
}

.pagelayer-menu-depth-1{
margin-left: 10px;
width: calc(100% - 10px) !important;
}

.pagelayer-menu-depth-2{
margin-left: 20px;
width: calc(100% - 20px) !important;
}

.pagelayer-menu-depth-3{
margin-left: 30px;
width: calc(100% - 30px) !important;
}

.pagelayer-menu-depth-4{
margin-left: 40px;
width: calc(100% - 40px) !important;
}

.pagelayer-menu-depth-5{
margin-left: 50px;
width: calc(100% - 50px) !important;
}

.pagelayer-menu-depth-6{
margin-left: 60px;
width: calc(100% - 60px) !important;
}

.pagelayer-menu-depth-7{
margin-left: 70px;
width: calc(100% - 70px) !important;
}

.pagelayer-menu-depth-8{
margin-left: 80px;
width: calc(100% - 80px) !important;
}

.pagelayer-menu-depth-9{
margin-left: 90px;
width: calc(100% - 90px) !important;
}

.pagelayer-menu-depth-10{
margin-left: 100px;
width: calc(100% - 100px) !important;
}

.pagelayer-menu-depth-11{
margin-left: 110px;
width: calc(100% - 110px) !important;
}

.pagelayer-menu-depth-12{
margin-left: 120px;
width: calc(100% - 120px) !important;
}

.pagelayer-menu-depth-13{
margin-left: 130px;
width: calc(100% - 130px) !important;
}

.pagelayer-menu-depth-14{
margin-left: 140px;
width: calc(100% - 140px) !important;
}

.pagelayer-menu-depth-15{
margin-left: 150px;
width: calc(100% - 150px) !important;
}

.pagelayer-menu-item-transport:empty{
display: none;
}

.pagelayer-menu-item-transport{
padding-top: 10px;
}

/* Menu end */

/* ==========================================================================
MODERN UI REDESIGN
========================================================================== */
/* Apply Font Family Everywhere */
.pagelayer-normalize,
.pagelayer-body,
.pagelayer-leftbar-table,
.pagelayer-leftbar,
.pagelayer-shortcode-text,
.pagelayer-elpd-tab,
.pagelayer-widget-tab,
.pagelayer-history-tab,
.pagelayer-leftbar-group h5,
.pagelayer-history-title,
.pagelayer-history-subtitle,
.pagelayer-history-action,
.pagelayer-general-options,
.pagelayer-general-options h5,
.pagelayer-widgets-form label,
.pagelayer-post-settings-holder,
.pagelayer-elpd-title,
.pagelayer-elp-label {
font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}

/* 2. Pill Segmented Tab Navigation */
.pagelayer-widget-tabs,
.pagelayer-elpd-tabs,
.pagelayer-history-tabs {
background-color: #f8fafc !important;
border-bottom: 1px solid #e2e8f0 !important;
padding: 6px 12px !important;
margin: 0 !important;
display: flex !important;
gap: 6px !important;
}

.pagelayer-dark .pagelayer-widget-tabs,
.pagelayer-dark .pagelayer-elpd-tabs,
.pagelayer-dark .pagelayer-history-tabs {
background-color: #0b0f19 !important;
border-bottom: 1px solid #1e293b !important;
}

.pagelayer-widget-tab,
.pagelayer-elpd-tab,
.pagelayer-history-tab {
flex: 1 !important;
text-align: center !important;
padding: 6px 10px !important;
margin: 0 !important;
font-size: 12px !important;
font-weight: 600 !important;
color: #64748b !important;
border-radius: 6px !important;
border-bottom: none !important;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.pagelayer-dark .pagelayer-widget-tab,
.pagelayer-dark .pagelayer-elpd-tab,
.pagelayer-dark .pagelayer-history-tab {
color: #94a3b8 !important;
}

/* Active tab style overlaying standard borders */
[pagelayer-elpd-active-tab="1"],
[pagelayer-history-active-tab="1"],
.pagelayer-widget-tab[pagelayer-elpd-active-tab="1"] {
color: #2563eb !important;
border-bottom: none !important;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.06), 0 1px 2px 0 rgba(0, 0, 0, 0.04) !important;
}

.pagelayer-dark [pagelayer-elpd-active-tab="1"],
.pagelayer-dark [pagelayer-history-active-tab="1"],
.pagelayer-dark .pagelayer-widget-tab[pagelayer-elpd-active-tab="1"] {
color: #ffffff !important;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3) !important;
}

.pagelayer-widget-tab:hover,
.pagelayer-elpd-tab:hover,
.pagelayer-history-tab:hover {
color: #0f172a !important;
background-color: rgba(0, 0, 0, 0.02) !important;
}

.pagelayer-dark .pagelayer-widget-tab:hover,
.pagelayer-dark .pagelayer-elpd-tab:hover,
.pagelayer-dark .pagelayer-history-tab:hover {
color: #ffffff !important;
background-color: rgba(255, 255, 255, 0.04) !important;
}

/* 3. Leftbar Shell & Search Area */
.pagelayer-leftbar-table {
border-right: 1px solid #e2e8f0 !important;
}

.pagelayer-leftbar {
background: #f8fafc !important;
border-right: none !important;
}

.pagelayer-dark .pagelayer-leftbar-table {
border-right: 1px solid #1e293b !important;
}

.pagelayer-dark .pagelayer-leftbar {
background: #0b0f19 !important;
}

.pagelayer-leftbar-search {
margin: 16px 12px 12px 12px !important;
position: relative !important;
}

.pagelayer-search-field {
background-color: #ffffff !important;
border: 1px solid #cbd5e1 !important;
border-radius: 8px !important;
padding: 8px 12px 8px 32px !important;
font-size: 13px !important;
color: #0f172a !important;
height: 36px !important;
width: 100% !important;
transition: all 0.2s ease !important;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.02) !important;
}

.pagelayer-dark .pagelayer-search-field {
background-color: #1e293b !important;
border: 1px solid #334155 !important;
color: #f8fafc !important;
}

.pagelayer-search-field:focus {
border-color: #3b82f6 !important;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15) !important;
outline: none !important;
}

.pagelayer-dark .pagelayer-search-field:focus {
border-color: #60a5fa !important;
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.25) !important;
}

.pagelayer-leftbar-search .pli-search {
left: 10px !important;
line-height: 36px !important;
height: 36px !important;
color: #94a3b8 !important;
font-size: 14px !important;
}

.pagelayer-leftbar-search .pagelayer-sf-empty {
right: 8px !important;
line-height: 36px !important;
height: 36px !important;
color: #94a3b8 !important;
font-size: 14px !important;
}

/* 4. Group Headings */
.pagelayer-leftbar-group {
margin-bottom: 8px !important;
padding: 0 12px !important;
}

.pagelayer-leftbar-group h5 {
font-size: 11px !important;
font-weight: 700 !important;
letter-spacing: 0.05em !important;
text-transform: uppercase !important;
color: #94a3b8 !important;
margin: 16px 0 8px 0 !important;
text-align: left !important;
border-bottom: 1px solid rgba(0, 0, 0, 0.03);
padding-bottom: 4px;
}

.pagelayer-dark .pagelayer-leftbar-group h5 {
color: #cbd5e1 !important;
background: #0b0f19 !important;
border-top: 1px solid #1e293b !important;
border-bottom: 1px solid #1e293b !important;
}

/* 5. Draggable Widget Cards */
.pagelayer-shortcodes-widget {
padding: 0 4px !important;
}

.pagelayer-shortcode-drag {
width: 112px !important;
height: 58px !important;
margin: 6px !important;
background-color: #ffffff !important;
border: 1px solid #e2e8f0 !important;
border-radius: 10px !important;
float: left !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.02) !important;
box-sizing: border-box !important;
}

.pagelayer-dark .pagelayer-shortcode-drag {
background-color: #131926 !important;
border: 1px solid #1e293b !important;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1) !important;
}

.pagelayer-shortcode-drag:hover {
transform: translateY(-3px) scale(1.02) !important;
border-color: #2563eb !important;
box-shadow: 0 10px 15px -3px rgba(37, 99, 235, 0.08), 0 4px 6px -4px rgba(37, 99, 235, 0.08) !important;
}

.pagelayer-dark .pagelayer-shortcode-drag:hover {
border-color: #2563eb !important;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3) !important;
}

.pagelayer-sc {
padding: 0 !important;
margin: 0 !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
height: 100% !important;
}

.pagelayer-shortcode-inner {
height: auto !important;
margin-bottom: 6px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}

.pagelayer-shortcode {
font-size: 20px !important;
color: #2563eb !important;
/* Indigo accent */
transition: color 0.2s ease !important;
}

.pagelayer-dark .pagelayer-shortcode {
color: #818cf8 !important;
}

.pagelayer-shortcode-text {
font-size: 11px !important;
font-weight: 500 !important;
color: #475569 !important;
margin: 0 !important;
text-align: center !important;
transition: color 0.2s ease !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
max-width: 90% !important;
}

.pagelayer-dark .pagelayer-shortcode-text {
color: #cbd5e1 !important;
}

.pagelayer-shortcode-drag:hover .pagelayer-shortcode {
color: #2563eb !important;
}

.pagelayer-dark .pagelayer-shortcode-drag:hover .pagelayer-shortcode {
color: #2563eb !important;
}

.pagelayer-shortcode-drag:hover .pagelayer-shortcode-text {
color: #2563eb !important;
}

.pagelayer-dark .pagelayer-shortcode-drag:hover .pagelayer-shortcode-text {
color: #2563eb !important;
}

/* 6. Settings Panels & Accordions */
.pagelayer-elpd,
.pagelayer-post-settings,
.pagelayer-general-options {
background: #ffffff !important;
}

.pagelayer-dark .pagelayer-elpd,
.pagelayer-dark .pagelayer-post-settings,
.pagelayer-dark .pagelayer-general-options {
background: #0b0f19 !important;
}

.pagelayer-elpd-header {
border-bottom: 1px solid #e2e8f0 !important;
background-color: #ffffff !important;
}

.pagelayer-dark .pagelayer-elpd-header {
border-bottom: 1px solid #1e293b !important;
background-color: #0b0f19 !important;
}

.pagelayer-elpd-title {
font-weight: 600 !important;
color: #0f172a !important;
}

.pagelayer-dark .pagelayer-elpd-title {
color: #f8fafc !important;
}

.pagelayer-form-item {
margin-bottom: 14px !important;
position: relative !important;
border-bottom: none !important;
padding: 8px 0 !important;
}

.pagelayer-elp-label,
.pagelayer-widgets-form label {
font-size: 12px !important;
font-weight: 600 !important;
color: #475569 !important;
margin-bottom: 6px !important;
display: block !important;
}

.pagelayer-dark .pagelayer-elp-label,
.pagelayer-dark .pagelayer-widgets-form label {
color: #94a3b8 !important;
}

/* Rounded Inputs */
.pagelayer-elp-text,
.pagelayer-elp-spinner,
.pagelayer-elp-textarea,
.pagelayer-elp-gradient-input,
.pagelayer-elp-datetime,
.pagelayer-elpd-body input[type="text"],
.pagelayer-widgets-form input[type="text"],
.pagelayer-widgets-form textarea {
background-color: #ffffff !important;
border: 1px solid #cbd5e1 !important;
border-radius: 8px !important;
padding: 8px 10px !important;
font-size: 13px !important;
color: #0f172a !important;
transition: all 0.2s ease !important;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.02) !important;
box-sizing: border-box !important;
}

.pagelayer-elp-text,
.pagelayer-elp-spinner,
.pagelayer-elp-gradient-input,
.pagelayer-elp-datetime,
.pagelayer-elpd-body input[type="text"],
.pagelayer-widgets-form input[type="text"] {
height: auto !important;
}

.pagelayer-dark .pagelayer-elp-text,
.pagelayer-dark .pagelayer-elp-spinner,
.pagelayer-dark .pagelayer-elp-textarea,
.pagelayer-dark .pagelayer-elp-gradient-input,
.pagelayer-dark .pagelayer-elp-datetime,
.pagelayer-dark .pagelayer-elpd-body input[type="text"],
.pagelayer-dark .pagelayer-widgets-form input[type="text"],
.pagelayer-dark .pagelayer-widgets-form textarea {
background-color: #131926 !important;
border: 1px solid #1e293b !important;
color: #f8fafc !important;
}

.pagelayer-elp-text:focus,
.pagelayer-elp-spinner:focus,
.pagelayer-elp-gradient-input:focus,
.pagelayer-elpd-body input:focus,
.pagelayer-widgets-form input:focus,
.pagelayer-widgets-form textarea:focus {
border-color: #3b82f6 !important;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15) !important;
outline: none !important;
}

.pagelayer-dark .pagelayer-elp-text:focus,
.pagelayer-dark .pagelayer-elp-spinner:focus,
.pagelayer-dark .pagelayer-elp-gradient-input:focus,
.pagelayer-dark .pagelayer-elpd-body input:focus,
.pagelayer-dark .pagelayer-widgets-form input:focus,
.pagelayer-dark .pagelayer-widgets-form textarea:focus {
border-color: #2563eb !important;
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.25) !important;
}

/* Custom Dropdown Select styling */
.pagelayer-elp-select,
.pagelayer-widgets-form select {
background-color: #ffffff !important;
border: 1px solid #cbd5e1 !important;
border-radius: 8px !important;
padding: 6px 30px 6px 10px !important;
font-size: 13px !important;
color: #0f172a !important;
height: 34px !important;
transition: all 0.2s ease !important;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.02) !important;
-webkit-appearance: none !important;
-moz-appearance: none !important;
appearance: none !important;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%2364748b' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E") !important;
background-position: right 8px center !important;
background-size: 18px 18px !important;
background-repeat: no-repeat !important;
}

.pagelayer-dark .pagelayer-elp-select,
.pagelayer-dark .pagelayer-widgets-form select {
background-color: #131926 !important;
border: 1px solid #1e293b !important;
color: #f8fafc !important;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%2394a3b8' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E") !important;
}

.pagelayer-elp-select:focus,
.pagelayer-widgets-form select:focus {
border-color: #2563eb !important;
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15) !important;
outline: none !important;
}

/* Accordion sections styling */
.pagelayer-post-settings-lable{
border: 1px solid #e2e8f0 !important;
background: #f8fafc !important;
border-radius: 8px !important;
padding: 10px 14px !important;
font-weight: 600 !important;
color: #334155 !important;
margin-bottom: 6px !important;
transition: all 0.2s ease !important;
}

.pagelayer-dark .pagelayer-post-settings-lable{
border: 1px solid #1e293b !important;
background: #131926 !important;
color: #cbd5e1 !important;
}

.pagelayer-post-settings-lable:hover{
border-color: #cbd5e1 !important;
background-color: #f1f5f9 !important;
}

.pagelayer-dark .pagelayer-post-settings-lable:hover{
border-color: #334155 !important;
background-color: #1e293b !important;
}

.pagelayer-elp-group-item-head {
background: #f8fafc !important;
border: none !important;
border-bottom: 1px solid #e2e8f0 !important;
padding: 10px 14px !important;
font-weight: 600 !important;
color: #334155 !important;
margin-bottom: 0 !important;
transition: all 0.2s ease !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
cursor: pointer !important;
}

.pagelayer-dark .pagelayer-elp-group-item-head {
background: #131926 !important;
border-bottom: 1px solid #1e293b !important;
color: #cbd5e1 !important;
}

.pagelayer-elp-group-item-head:hover {
background-color: #f1f5f9 !important;
}

.pagelayer-dark .pagelayer-elp-group-item-head:hover {
background-color: #1e293b !important;
}

.pagelayer-elp-group-item-head span {
padding: 4px 8px !important;
display: inline-flex !important;
align-items: center !important;
}

.pagelayer-elp-group-item-clone:hover i {
color: #2563eb !important;
}

.pagelayer-elp-group-item-del:hover i {
color: #dc2626 !important;
}

.pagelayer-dark .pagelayer-elp-group-item-clone:hover i {
color: #60a5fa !important;
}

.pagelayer-dark .pagelayer-elp-group-item-del:hover i {
color: #f87171 !important;
}

.pagelayer-elp-group-item {
border: 1px solid #e2e8f0 !important;
border-radius: 10px !important;
overflow: hidden !important;
background: #ffffff !important;
margin-bottom: 12px !important;
}

.pagelayer-dark .pagelayer-elp-group-item {
border: 1px solid #1e293b !important;
background: #0b0f19 !important;
}

/* Prevent popup clipping inside list group items */
.pagelayer-elp-group-item:has(.pagelayer-elp-icon-selector:not([style*="display: none"])),
.pagelayer-elp-group-item:has(.pagelayer-elp-link-list:not([style*="display: none"])) {
overflow: visible !important;
}

/* Ranges Sliders Modernization */
.pagelayer-elp-slider-input[type="range"] {
	-webkit-appearance: none !important;
	width: 100% !important;
	height: 6px !important;
	border-radius: 3px !important;
	background: #e2e8f0 !important;
	outline: none !important;
}

.pagelayer-dark .pagelayer-elp-slider-input[type="range"] {
	background: #1e293b !important;
}

.pagelayer-elp-slider-input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none !important;
	appearance: none !important;
	width: 16px !important;
	height: 16px !important;
	border-radius: 50% !important;
	background: #3b82f6 !important;
	cursor: pointer !important;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) !important;
	transition: transform 0.1s ease !important;
}

.pagelayer-dark .pagelayer-elp-slider-input[type="range"]::-webkit-slider-thumb {
	background: #60a5fa !important;
}

.pagelayer-elp-slider-input[type="range"]::-webkit-slider-thumb:hover {
	transform: scale(1.2) !important;
}

/* 7. Revisions & History Panel */
.pagelayer-revision-holder,
.pagelayer-history-holder {
	border: 1px solid #e2e8f0 !important;
	border-radius: 8px !important;
	margin-bottom: 8px !important;
	padding: 12px !important;
	background-color: #ffffff !important;
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.02) !important;
	transition: all 0.2s ease !important;
}

.pagelayer-dark .pagelayer-revision-holder,
.pagelayer-dark .pagelayer-history-holder {
	border: 1px solid #1e293b !important;
	background-color: #131926 !important;
}

.pagelayer-revision-holder:hover,
.pagelayer-history-holder:hover,
.pagelayer-history-holder.current_active_item {
	background-color: #f8fafc !important;
	border-color: #cbd5e1 !important;
}

.pagelayer-dark .pagelayer-revision-holder:hover,
.pagelayer-dark .pagelayer-history-holder:hover,
.pagelayer-dark .pagelayer-history-holder.current_active_item {
	background-color: #1e293b !important;
	border-color: #334155 !important;
}

.pagelayer-revision-img-holder {
	border-radius: 50% !important;
	width: 24px !important;
	height: 24px !important;
	box-shadow: 0 0 0 2px #e2e8f0 !important;
	overflow: hidden !important;
}

.pagelayer-dark .pagelayer-revision-img-holder {
	box-shadow: 0 0 0 2px #1e293b !important;
}

.pagelayer-revision-img-holder img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
}

.pagelayer-history-title {
	font-weight: 600 !important;
	color: #334155 !important;
}

.pagelayer-dark .pagelayer-history-title {
	color: #f8fafc !important;
}

.pagelayer-history-subtitle {
	color: #64748b !important;
}

.pagelayer-dark .pagelayer-history-subtitle {
	color: #94a3b8 !important;
}

/* 8. Loader overlay & Custom scrollbars */
.pagelayer-leftbar-scroll::-webkit-scrollbar,
.pagelayer-leftbar::-webkit-scrollbar,
.slimScrollDiv::-webkit-scrollbar,
#pagelayer-history::-webkit-scrollbar,
#pagelayer-elpd::-webkit-scrollbar {
	width: 6px !important;
	height: 6px !important;
}

.pagelayer-leftbar-scroll::-webkit-scrollbar-track,
.pagelayer-leftbar::-webkit-scrollbar-track,
#pagelayer-history::-webkit-scrollbar-track,
#pagelayer-elpd::-webkit-scrollbar-track {
	background: transparent !important;
}

.pagelayer-leftbar-scroll::-webkit-scrollbar-thumb,
.pagelayer-leftbar::-webkit-scrollbar-thumb,
#pagelayer-history::-webkit-scrollbar-thumb,
#pagelayer-elpd::-webkit-scrollbar-thumb {
	background: #cbd5e1 !important;
	border-radius: 3px !important;
}

.pagelayer-dark .pagelayer-leftbar-scroll::-webkit-scrollbar-thumb,
.pagelayer-dark .pagelayer-leftbar::-webkit-scrollbar-thumb,
.pagelayer-dark #pagelayer-history::-webkit-scrollbar-thumb,
.pagelayer-dark #pagelayer-elpd::-webkit-scrollbar-thumb {
	background: #334155 !important;
}

/* ==========================================================================
HEADER BAR AND ACTIVE SUB-TABS OVERRIDES
========================================================================== */

/* 1. Show and Redesign Iframe Top Bar */
.pagelayer-iframe-top-bar {
	display: block !important;
	height: 48px !important;
	background-color: #ffffff !important;
	border-bottom: 1px solid #e2e8f0 !important;
	box-sizing: border-box !important;
}

.pagelayer-dark .pagelayer-iframe-top-bar {
	background-color: #0f172a !important;
	border-bottom: 1px solid #1e293b !important;
}

.pagelayer-iframe-holder {
	max-height: calc(100vh - 48px) !important;
	height: calc(100vh - 48px) !important;
}

.pagelayer-iframe-holder-with-bar {
	max-height: calc(100vh - 48px) !important;
	height: calc(100vh - 48px) !important;
}

/* Header bar inside top container */
.pagelayer-top-header-bar {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	height: 100% !important;
	padding: 0 16px !important;
	color: #475569 !important;
}

.pagelayer-dark .pagelayer-top-header-bar {
	color: #cbd5e1 !important;
}

/* Hide legacy bottom button switcher */
.pagelayer-bottombar-holder,
.pagelayer-bottombar-row {
	display: none !important;
}

/* 2. Style Opened settings sub-tabs (accordions) */
.pagelayer-elpd-section-name.pagelayer-elpd-section-open {
	background-color: #eff6ff !important;
	color: #2563eb !important;
	border-left: 4px solid #3b82f6 !important;
	border-radius: 8px 8px 0 0 !important;
	font-weight: 700 !important;
	box-shadow: 0 1px 3px rgba(59, 130, 246, 0.05) !important;
}

.pagelayer-dark .pagelayer-elpd-section-name.pagelayer-elpd-section-open {
	background-color: #1e293b !important;
	color: #60a5fa !important;
	border-left: 4px solid #2563eb !important;
}

/* Sibling rows container for opened tab */
.pagelayer-elpd-section-open+.pagelayer-elpd-section-rows {
	background-color: #ffffff !important;
	border-left: 4px solid #3b82f6 !important;
	border-right: 1px solid #e2e8f0 !important;
	border-bottom: 1px solid #e2e8f0 !important;
	border-radius: 0 0 8px 8px !important;
	padding: 16px 12px !important;
	margin-bottom: 12px !important;
}

.pagelayer-dark .pagelayer-elpd-section-open+.pagelayer-elpd-section-rows {
	background-color: #0b0f19 !important;
	border-left: 4px solid #2563eb !important;
	border-right: 1px solid #1e293b !important;
	border-bottom: 1px solid #1e293b !important;
}

/* WordPress postbox (post settings tabs inside iframe) active state */
.postbox:not(.closed) {
	border: 1px solid #3b82f6 !important;
	border-radius: 10px !important;
	overflow: hidden !important;
	margin-bottom: 16px !important;
	box-shadow: 0 4px 12px rgba(59, 130, 246, 0.05) !important;
}

.pagelayer-dark .postbox:not(.closed) {
	border: 1px solid #334155 !important;
}

.postbox:not(.closed) .postbox-header,
.postbox:not(.closed) h2.hndle {
	background-color: #eff6ff !important;
	color: #1e40af !important;
	border-bottom: 1px solid #bfdbfe !important;
}

.pagelayer-dark .postbox:not(.closed) .postbox-header,
.pagelayer-dark .postbox:not(.closed) h2.hndle {
	background-color: #1e293b !important;
	color: #60a5fa !important;
	border-bottom: 1px solid #334155 !important;
}

.postbox:not(.closed) .inside {
	padding: 16px 12px !important;
	background-color: #ffffff !important;
}

.pagelayer-dark .postbox:not(.closed) .inside {
	background-color: #0b0f19 !important;
}

/* ==========================================================================
STYLE SKIN
========================================================================== */

/* Parent topbar Dark Theme */
.pagelayer-iframe-top-bar {
background: #26292c !important;
border-bottom: 1px solid #1f2124 !important;
height: 50px !important;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15) !important;
display: block !important;
}

.pagelayer-top-header-bar {
color: #ffffff !important;
height: 100% !important;
}

/* Header right icons & buttons */
.pagelayer-header-icon-wrap {
cursor: pointer !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
color: #a4afb7 !important;
border-radius: 6px !important;
width: 34px !important;
height: 34px !important;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.pagelayer-header-icon-wrap:hover {
background-color: rgba(255, 255, 255, 0.08) !important;
color: #ffffff !important;
transform: translateY(-1px) !important;
}

.pagelayer-header-divider {
width: 1px !important;
height: 20px !important;
background-color: rgba(255, 255, 255, 0.1) !important;
margin: 0 4px !important;
}

.pagelayer-header-right .pagelayer-update-button {
width: 76px !important;
background-color: #2563eb !important;
color: #ffffff !important;
border-radius: 6px !important;
padding: 0 !important;
font-weight: 600 !important;
box-shadow: 0 2px 4px rgba(37, 99, 235, 0.2) !important;
height: 34px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
border: none !important;
font-size: 13px !important;
line-height: normal !important;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.pagelayer-header-right .pagelayer-update-button:hover {
background-color: #1d4ed8 !important;
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35) !important;
transform: translateY(-1px) !important;
}

.pagelayer-header-right .pagelayer-close-button {
background-color: rgba(255, 255, 255, 0.08) !important;
color: #a4afb7 !important;
border: none !important;
border-radius: 6px !important;
width: 34px !important;
height: 34px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
padding: 0 !important;
cursor: pointer !important;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
box-sizing: border-box !important;
}

.pagelayer-header-right .pagelayer-close-button:hover {
background-color: #ef4444 !important;
color: #ffffff !important;
transform: translateY(-1px) !important;
}

.pagelayer-header-right .pagelayer-close-button i {
font-size: 14px !important;
display: block !important;
margin: 0 !important;
padding: 0 !important;
}

/* Edit Element properties header */
.pagelayer-elpd-header {
background: transparent !important;
border-bottom: none !important;
height: 100% !important;
color: #ffffff !important;
display: flex;
align-items: center !important;
justify-content: space-between !important;
flex: 1 !important;
margin-left: 25px !important;
}

.pagelayer-elpd-title {
color: #ffffff !important;
font-weight: 700 !important;
font-size: 14px !important;
order: 1 !important;
margin-right: auto !important;
}

.pagelayer-elpd-close {
color: #a4afb7 !important;
cursor: pointer !important;
font-size: 16px !important;
order: 2 !important;
position: static !important;
transform: none !important;
transition: color 0.2s !important;
}

.pagelayer-elpd-close:hover {
color: #ffffff !important;
}

/* Segmented Tab Switchers - Flat light grey theme */
.pagelayer-widget-tabs,
.pagelayer-elpd-tabs {
background-color: #f4f5f7 !important;
border-bottom: 1px solid #eaeaea !important;
padding: 0 !important;
gap: 0 !important;
display: flex !important;
width: 100% !important;
}

.pagelayer-elpd-tabs {
margin-bottom: 12px !important;
}

.pagelayer-widget-tab,
.pagelayer-elpd-tab {
flex: 1 !important;
text-align: center !important;
padding: 12px 6px !important;
font-size: 12px !important;
font-weight: 600 !important;
color: #8c9298 !important;
border-radius: 0 !important;
border: none !important;
background: transparent !important;
box-shadow: none !important;
cursor: pointer !important;
border-bottom: 3px solid transparent !important;
}

.pagelayer-widget-tab:hover,
.pagelayer-elpd-tab:hover {
color: #23282d !important;
background: transparent !important;
}

/* Active tab style */
[pagelayer-elpd-active-tab="1"],
.pagelayer-widget-tab[pagelayer-elpd-active-tab="1"] {
color: #23282d !important;
border-bottom: 3px solid #2563eb !important;
/* Brand indigo line */
font-weight: 700 !important;
box-shadow: none !important;
}

/* Sidebar lists backgrounds */
.pagelayer-leftbar {
background: #ffffff !important;
}

/* Search Area */
.pagelayer-leftbar-search {
margin: 15px 15px 5px 15px !important;
}

.pagelayer-search-field {
border: 1px solid #d5dadf !important;
border-radius: 3px !important;
height: 32px !important;
font-size: 12px !important;
padding-left: 28px !important;
box-shadow: none !important;
background: #ffffff !important;
}

.pagelayer-search-field:focus {
border-color: #2563eb !important;
box-shadow: none !important;
}

/* Group headings list */
.pagelayer-leftbar-group {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 8px !important;
padding: 0 15px 15px 15px !important;
box-sizing: border-box !important;
clear: both !important;
}

.pagelayer-leftbar-group h5 {
grid-column: span 3 !important;
font-size: 11px !important;
font-weight: 700 !important;
letter-spacing: 0.5px !important;
text-transform: uppercase !important;
color: #495157 !important;
background: #f4f5f7 !important;
margin: 15px -15px 10px -15px !important;
padding: 8px 15px !important;
border-top: 1px solid #eaeaea !important;
border-bottom: 1px solid #eaeaea !important;
text-align: left !important;
}

/* Draggable widgets cards - style (3 Columns & Compact) */
.pagelayer-shortcode-drag {
width: 100% !important;
min-width: 0 !important;
/* Prevents text-nowrap children from expanding grid column width */
height: 58px !important;
margin: 0 !important;
background-color: #ffffff !important;
border: 1px solid #d5dadf !important;
border-radius: 4px !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 4px !important;
box-shadow: none !important;
box-sizing: border-box !important;
float: none !important;
transition: all 0.2s ease !important;
cursor: grab !important;
}

.pagelayer-shortcode-drag:hover {
transform: none !important;
border-color: #2563eb !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
}

.pagelayer-shortcode {
font-size: 18px !important;
color: #a4afb7 !important;
}

.pagelayer-shortcode-drag:hover .pagelayer-shortcode {
color: #2563eb !important;
}

.pagelayer-shortcode-inner {
margin-bottom: 2px !important;
}

.pagelayer-shortcode-text {
font-size: 10px !important;
color: #556068 !important;
font-weight: 400 !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
max-width: 95% !important;
display: block !important;
}

.pagelayer-shortcode-drag:hover .pagelayer-shortcode-text {
color: #2563eb !important;
}

/* Properties forms, sections and inputs */
.pagelayer-elpd-section {
border-bottom: 1px solid #eaeaea !important;
background: #ffffff !important;
}

.pagelayer-elpd-section-name {
background-color: #ffffff !important;
color: #495157 !important;
font-weight: 700 !important;
font-size: 12px !important;
padding: 12px 15px !important;
border-bottom: none !important;
border-radius: 0 !important;
border-left: none !important;
box-shadow: none !important;
transition: background 0.2s !important;
}

.pagelayer-elpd-section-name:hover {
background-color: #f7f8f9 !important;
color: #23282d !important;
}

.pagelayer-elpd-section-name.pagelayer-elpd-section-open {
background-color: #f7f8f9 !important;
color: #23282d !important;
border-left: none !important;
border-radius: 0 !important;
font-weight: 700 !important;
box-shadow: none !important;
}

.pagelayer-elpd-section-open+.pagelayer-elpd-section-rows {
background-color: #ffffff !important;
border-left: none !important;
border-right: none !important;
border-bottom: none !important;
border-radius: 0 !important;
padding: 15px 0 !important;
margin-bottom: 0 !important;
}

.pagelayer-form-item {
padding: 6px 16px !important;
margin-bottom: 10px !important;
border-bottom: none !important;
}

.pagelayer-elp-label,
.pagelayer-widgets-form label {
font-size: 11px !important;
color: #6d7882 !important;
text-transform: uppercase !important;
font-weight: 700 !important;
letter-spacing: 0.5px !important;
margin-bottom: 5px !important;
}

/* Fields & inputs */
.pagelayer-elp-text,
.pagelayer-elp-spinner,
.pagelayer-elp-textarea,
.pagelayer-elp-datetime,
.pagelayer-elpd-body input[type="text"],
.pagelayer-widgets-form input[type="text"],
.pagelayer-widgets-form textarea {
background-color: #ffffff !important;
border: 1px solid #d5dadf !important;
border-radius: 3px !important;
padding: 6px 8px !important;
font-size: 12px !important;
color: #23282d !important;
box-shadow: none !important;
}

.pagelayer-elp-text,
.pagelayer-elp-spinner,
.pagelayer-elp-datetime,
.pagelayer-elpd-body input[type="text"],
.pagelayer-widgets-form input[type="text"] {
height: 30px !important;
}

.pagelayer-elp-select,
.pagelayer-widgets-form select {
background-color: #ffffff !important;
border: 1px solid #d5dadf !important;
border-radius: 3px !important;
padding: 6px 28px 6px 10px !important;
/* Fixed padding to allow text to show fully with select arrow */
font-size: 12px !important;
color: #23282d !important;
height: 30px !important;
box-shadow: none !important;
-webkit-appearance: none !important;
-moz-appearance: none !important;
appearance: none !important;
}

.pagelayer-elp-text:focus,
.pagelayer-elp-spinner:focus,
.pagelayer-elpd-body input:focus,
.pagelayer-widgets-form input:focus,
.pagelayer-widgets-form textarea:focus,
.pagelayer-elp-select:focus,
.pagelayer-widgets-form select:focus {
border-color: #2563eb !important;
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15) !important;
outline: none !important;
}

/* Custom dropdown arrow for select */
.pagelayer-elp-select,
.pagelayer-widgets-form select {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236d7882' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E") !important;
background-position: right 6px center !important;
background-size: 14px 14px !important;
}

/* 4-column Spacing/Padding styles */
.pagelayer-elp-padding-div {
display: flex !important;
align-items: center !important;
gap: 6px !important;
background: transparent !important;
}

.pagelayer-elp-padding-inner {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
flex: 1 !important;
}

.pagelayer-elp-padding-inner input {
width: 100% !important;
text-align: center !important;
padding: 6px !important;
border: 1px solid #d5dadf !important;
border-radius: 3px !important;
font-size: 12px !important;
box-sizing: border-box !important;
height: 28px !important;
background: #ffffff !important;
}

.pagelayer-elp-padding-inner input:focus {
border-color: #2563eb !important;
outline: none !important;
}

.pagelayer-elp-padding-lbl {
font-size: 9px !important;
text-transform: uppercase !important;
color: #a4afb7 !important;
margin-top: 4px !important;
font-weight: 600 !important;
}

.pagelayer-elp-padding-div i.pli-link {
cursor: pointer !important;
font-size: 13px !important;
color: #a4afb7 !important;
padding: 4px !important;
border: 1px solid #d5dadf !important;
border-radius: 3px !important;
background: #ffffff !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
height: 28px !important;
width: 28px !important;
box-sizing: border-box !important;
align-self: flex-start !important;
}

.pagelayer-elp-padding-div i.pagelayer-elp-padding-linked {
color: #ffffff !important;
background: #2563eb !important;
border-color: #2563eb !important;
}

/* Close bar & toggle tab styling */
.pagelayer-leftbar-toggle {
background: #eaeaea !important;
border: 1px solid #d5dadf !important;
border-left: none !important;
border-radius: 0 4px 4px 0 !important;
color: #556068 !important;
width: 12px !important;
font-size: 14px !important;
line-height: 40px !important;
top: 50% !important;
height: 40px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
box-shadow: 2px 0 5px rgba(0, 0, 0, 0.05) !important;
}

.pagelayer-leftbar-toggle:hover {
background: #d5dadf !important;
color: #23282d !important;
}

/* Radio selectors (Normal/Hover, None/Color/Gradient/Image) */
.pagelayer-elp-radio-div {
border: 1px solid #d5dadf !important;
border-radius: 3px !important;
overflow: hidden !important;
background: #ffffff !important;
display: flex !important;
}

.pagelayer-elp-radio {
background: #ffffff !important;
color: #6d7882 !important;
border: none !important;
border-right: 1px solid #d5dadf !important;
font-size: 11px !important;
padding: 6px 10px !important;
font-weight: 500 !important;
transition: all 0.2s ease !important;
text-align: center !important;
flex: 1 !important;
}

.pagelayer-elp-radio:last-child {
border-right: none !important;
}

.pagelayer-elp-radio:hover {
background-color: #f7f8f9 !important;
color: #23282d !important;
}

.pagelayer-elp-radio-active {
background-color: #556068 !important;
color: #ffffff !important;
}

.pagelayer-elp-radio-active:hover {
background-color: #556068 !important;
}

/* Sidebar bottom control bar */
.pagelayer-bottombar-holder {
background: #26292c !important;
border-top: 1px solid #1f2124 !important;
padding: 5px 10px !important;
height: 35px !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
box-sizing: border-box !important;
}

.pagelayer-bottombar-row {
background: #26292c !important;
height: 35px !important;
}

.pagelayer-bottombar-holder button {
border: none !important;
padding: 4px 8px !important;
font-size: 11px !important;
font-weight: 600 !important;
border-radius: 3px !important;
cursor: pointer !important;
transition: background 0.2s !important;
}

.pagelayer-bottombar-holder .pagelayer-success-btn {
background-color: #2563eb !important;
/* Indigo update button */
color: #ffffff !important;
}

.pagelayer-bottombar-holder .pagelayer-success-btn:hover {
background-color: #1d4ed8 !important;
}

.pagelayer-bottombar-holder .pagelayer-close-button {
background-color: transparent !important;
color: #a4afb7 !important;
border: 1px solid #495157 !important;
}

.pagelayer-bottombar-holder .pagelayer-close-button:hover {
background-color: #373a3c !important;
color: #ffffff !important;
}

.pagelayer-bottombar-holder i {
color: #a4afb7 !important;
font-size: 13px !important;
cursor: pointer !important;
transition: color 0.2s !important;
}

.pagelayer-bottombar-holder i:hover {
color: #ffffff !important;
}

/* ==========================================================================
STYLE SIDEBAR WIDTH & RESPONSIVE DEVICERS OVERRIDES
========================================================================== */

/* Custom Sidebar Width (Style: 300px) */
.pagelayer-leftbar-table {
width: 300px !important;
min-width: 300px !important;
max-width: 300px !important;
}

.pagelayer-leftbar-table.pagelayer-leftbar-hidden {
width: 0px !important;
min-width: 0px !important;
max-width: 0px !important;
}

.pagelayer-leftbar-holder {
width: 300px !important;
}

.pagelayer-leftbar {
width: 300px !important;
max-width: 300px !important;
}

.pagelayer-leftbar-scroll,
.pagelayer-leftbar-tab,
.pagelayer-leftbar-holder .slimScrollDiv {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}

/* absolute center 3-column topbar alignment */
.pagelayer-header-left {
flex: 1 !important;
display: flex !important;
align-items: center !important;
justify-content: flex-end !important;
padding-right: 24px !important;
}

.pagelayer-header-center {
color: #ffffff !important;
font-size: 14px !important;
font-weight: 500 !important;
flex: 1 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}

.pagelayer-header-right {
flex: 1 !important;
display: flex !important;
align-items: center !important;
justify-content: flex-end !important;
gap: 12px !important;
}
.pagelayer-header-document-title {
font-size: 13px !important;
font-weight: 500 !important;
color: #94a3b8 !important;
display: inline-flex !important;
align-items: center !important;
}

.pagelayer-header-post-name {
color: #f8fafc !important;
font-weight: 600 !important;
background-color: rgba(255, 255, 255, 0.06) !important;
border: 1px solid rgba(255, 255, 255, 0.12) !important;
padding: 4px 10px !important;
border-radius: 6px !important;
margin-left: 8px !important;
font-size: 12.5px !important;
transition: all 0.2s ease !important;
}

.pagelayer-header-post-name:hover {
background-color: rgba(255, 255, 255, 0.12) !important;
border-color: rgba(255, 255, 255, 0.2) !important;
}

/* Device Selector Modernization (Style) */
.pagelayer-device-selectors {
background-color: transparent !important;
border: none !important;
padding: 0 !important;
border-radius: 0 !important;
display: flex !important;
gap: 16px !important;
align-items: center !important;
}

.pagelayer-device-selectors .screen-mode {
font-size: 18px !important;
padding: 6px !important;
color: #a4afb7 !important;
cursor: pointer !important;
border-radius: 4px !important;
background-color: transparent !important;
box-shadow: none !important;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
position: relative !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}

.pagelayer-device-selectors .screen-mode:hover {
color: #ffffff !important;
background-color: transparent !important;
transform: translateY(-1px) !important;
}

.pagelayer-device-selectors .screen-mode.active {
color: #2563eb !important;
/* Premium Brand Indigo */
background-color: transparent !important;
box-shadow: none !important;
transform: scale(1.15) !important;
}

/* Accent bottom indicator dot for active screen mode */
.pagelayer-device-selectors .screen-mode.active::after {
content: '' !important;
position: absolute !important;
bottom: -4px !important;
left: calc(50% - 2px) !important;
width: 4px !important;
height: 4px !important;
background-color: #2563eb !important;
border-radius: 50% !important;
box-shadow: 0 0 4px #2563eb !important;
}

/* Consistent Checkbox and Radio styling (Brand Indigo) */
input[type="checkbox"],
input[type="radio"] {
accent-color: #2563eb !important;
}

input[type="checkbox"]:checked,
input[type="radio"]:checked,
.pagelayer-post-category input[type="checkbox"]:checked,
.pagelayer-widgets-form input[type="checkbox"]:checked,
.pagelayer-elpd-body input[type="checkbox"]:checked {
background-color: #2563eb !important;
border-color: #2563eb !important;
}

/* Consistent Toggle switch checked color (Brand Indigo) */
input[type="checkbox"].pagelayer-elp-checkbox:checked {
background-color: #2563eb !important;
border-color: #2563eb !important;
}

.pagelayer-dark input[type="checkbox"].pagelayer-elp-checkbox:checked {
background-color: #2563eb !important;
border-color: #2563eb !important;
}

/* Segmented selector active state color override (Brand Indigo) */
.pagelayer-elp-radio-active,
.pagelayer-elp-radio-active:hover,
.pagelayer-dark .pagelayer-elp-radio-active,
.pagelayer-dark .pagelayer-elp-radio-active:hover {
background-color: #2563eb !important;
color: #ffffff !important;
}

/* ==========================================================================
DARK MODE 
========================================================================== */

/* Accordion sections and headings */
.pagelayer-dark .pagelayer-elpd-section {
border-bottom: 1px solid #1e293b !important;
background: #0b0f19 !important;
}

.pagelayer-dark .pagelayer-elpd-section-name {
background-color: #0b0f19 !important;
color: #cbd5e1 !important;
}

.pagelayer-dark .pagelayer-elpd-section-name:hover {
background-color: #1e293b !important;
color: #ffffff !important;
}

.pagelayer-dark .pagelayer-elpd-section-name.pagelayer-elpd-section-open {
background-color: #1e293b !important;
color: #ffffff !important;
}

.pagelayer-dark .pagelayer-elpd-section-open+.pagelayer-elpd-section-rows {
background-color: #0b0f19 !important;
}

/* Input elements, Selects, Textareas, and Link buttons */
.pagelayer-dark .pagelayer-elp-text,
.pagelayer-dark .pagelayer-elp-spinner,
.pagelayer-dark .pagelayer-elp-textarea,
.pagelayer-dark .pagelayer-elpd-body input[type="text"],
.pagelayer-dark .pagelayer-widgets-form input[type="text"],
.pagelayer-dark .pagelayer-widgets-form textarea,
.pagelayer-dark .pagelayer-elp-select,
.pagelayer-dark .pagelayer-widgets-form select,
.pagelayer-dark .pagelayer-elp-padding-inner input,
.pagelayer-dark .pagelayer-elp-padding-div i.pli-link {
color: #f8fafc !important;
}

/* Form labels text color */
.pagelayer-dark .pagelayer-elp-label,
.pagelayer-dark .pagelayer-widgets-form label {
color: #94a3b8 !important;
}

/* Segmented selectors container & inactive buttons */
.pagelayer-dark .pagelayer-elp-radio-div {
border: 1px solid #334155 !important;
background: #131926 !important;
}

.pagelayer-dark .pagelayer-elp-radio {
border-right: 1px solid #334155 !important;
}

.pagelayer-dark .pagelayer-elp-radio:last-child {
border-right: none !important;
}

.pagelayer-dark .pagelayer-elp-radio:hover {
background-color: #1e293b !important;
color: #ffffff !important;
}

/* Active tab text color */
.pagelayer-dark [pagelayer-elpd-active-tab="1"],
.pagelayer-dark .pagelayer-widget-tab[pagelayer-elpd-active-tab="1"] {
color: #ffffff !important;
}

/* Force hidden elements to be display none even if stylesheet has display important */
.pagelayer-leftbar-group[style*="display: none"],
.pagelayer-leftbar-group[style*="display:none"],
.pagelayer-shortcode-drag[style*="display: none"],
.pagelayer-shortcode-drag[style*="display:none"] {
display: none !important;
}

/* Fix desktop screen selector position to sit inline with label */
.pagelayer-elp-label-div,
.pagelayer-elp-link-label-div {
display: flex !important;
align-items: center !important;
gap: 6px !important;
}

.pagelayer-elp-label-div .pagelayer-elp-label,
.pagelayer-elp-link-label-div .pagelayer-elp-link-label {
display: inline-block !important;
width: auto !important;
vertical-align: middle !important;
margin-bottom: 0 !important;
}

.pagelayer-elp-label-div .pagelayer-elp-units,
.pagelayer-elp-link-label-div .pagelayer-elp-units {
margin-left: auto !important;
}

/* Fix textarea height in sidebar */
.pagelayer-elp-textarea,
.pagelayer-widgets-form textarea {
height: 100px;
min-height: 50px;
resize: vertical;
}

/* Fix restore/revert default icon position to sit inline next to the label text */
.pagelayer-elp-label-div,
.pagelayer-elp-link-label-div {
position: relative !important;
display: flex !important;
width: 100% !important;
align-items: center !important;
flex-wrap: nowrap !important;
gap: 6px !important;
}

.pagelayer-elp-typo .pagelayer-elp-label {
position: relative !important;
display: inline-flex !important;
align-items: center !important;
flex-wrap: wrap !important;
gap: 6px !important;
}

.pagelayer-elp-default,
.pagelayer-typo-default {
position: relative !important;
display: none !important;
align-items: center !important;
justify-content: center !important;
margin: 0 !important;
cursor: pointer !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
width: auto !important;
height: auto !important;
z-index: 5 !important;
}

.pagelayer-form-item:hover .pagelayer-elp-default[data_show=true],
.pagelayer-base-control:hover .pagelayer-elp-default[data_show=true] {
display: inline-flex !important;
}

.pagelayer-elp-default i,
.pagelayer-typo-default i {
font-size: 11px !important;
color: #64748b !important;
transition: color 0.15s ease !important;
}

.pagelayer-elp-default:hover i,
.pagelayer-typo-default:hover i {
color: #2563eb !important;
}

/* Dark mode colors for restore/revert default icons */
.pagelayer-dark .pagelayer-elp-default i,
.pagelayer-dark .pagelayer-typo-default i {
color: #94a3b8 !important;
}

.pagelayer-dark .pagelayer-elp-default:hover i,
.pagelayer-dark .pagelayer-typo-default:hover i {
color: #3b82f6 !important;
}

/* Active state for topbar header icon wraps */
.pagelayer-header-icon-wrap.active {
background-color: rgba(59, 130, 246, 0.2) !important;
color: #3b82f6 !important;
}

.pagelayer-dark .pagelayer-header-icon-wrap.active {
background-color: rgba(96, 165, 250, 0.2) !important;
color: #60a5fa !important;
}

/* Right sidebar panel for Navigator and History */
.pagelayer-right-sidebar {
position: fixed !important;
right: -300px;
top: 0px !important;
bottom: 0;
width: 300px;
background: #ffffff !important;
border-left: 1px solid #cbd5e1 !important;
box-shadow: -4px 0 15px rgba(0, 0, 0, 0.08) !important;
z-index: 9999 !important;
display: flex !important;
flex-direction: column !important;
transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

.pagelayer-right-sidebar-header {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
padding: 0 15px !important;
border-bottom: 1px solid #1f2124 !important;
background: #26292c !important; /* matches left sidebar header topbar background */
height: 50px !important; /* matches left sidebar header topbar height */
box-sizing: border-box !important;
}

.pagelayer-right-sidebar-title {
margin: 0 !important;
font-size: 14px !important;
font-weight: 600 !important;
color: #ffffff !important;
}

.pagelayer-right-sidebar-close {
background: transparent !important;
border: none !important;
font-size: 16px !important;
cursor: pointer !important;
color: #a4afb7 !important;
padding: 4px !important;
line-height: 1 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
outline: none !important;
}

.pagelayer-right-sidebar-close:hover {
color: #ffffff !important;
}

.pagelayer-right-sidebar-content {
flex: 1 !important;
overflow-y: auto !important;
padding: 0 !important;
position: relative !important;
}

/* Ensure inside containers are correctly displayed */
.pagelayer-right-sidebar #pagelayer-navigator,
.pagelayer-right-sidebar #pagelayer-history {
position: static !important;
height: 100% !important;
background: transparent !important;
}

.pagelayer-right-sidebar .pagelayer-leftbar-prop-body {
padding: 12px !important;
}

.pagelayer-right-sidebar .pagelayer-history-body {
height: calc(100% - 40px) !important;
overflow-y: auto !important;
}

/* Dark mode overrides */
.pagelayer-dark.pagelayer-right-sidebar {
background: #1c1c1f !important;
border-left-color: #1c1c1f !important;
color: #ffffff !important;
}

.pagelayer-dark.pagelayer-right-sidebar .pagelayer-right-sidebar-header {
background: #0b0f19 !important;
border-bottom-color: #1e293b !important;
}

.pagelayer-dark.pagelayer-right-sidebar .pagelayer-right-sidebar-title {
color: #ffffff !important;
}

.pagelayer-dark.pagelayer-right-sidebar .pagelayer-right-sidebar-close {
color: #94a3b8 !important;
}

.pagelayer-dark.pagelayer-right-sidebar .pagelayer-right-sidebar-close:hover {
color: #ffffff !important;
}

/* Adjust Editor section when Right Sidebar is active */
.pagelayer-iframe {
transition: padding-right 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.pagelayer-right-sidebar-open .pagelayer-iframe {
padding-right: 300px !important;
}
/* Custom premium input/select/textarea styling inside Sidebar tabs (including Post Settings, Properties, etc.) */
.pagelayer-leftbar-holder textarea,
.pagelayer-leftbar-holder select,
.pagelayer-leftbar-holder input[type="text"],
.pagelayer-leftbar-holder input[type="search"],
.pagelayer-leftbar-holder input[type="email"],
.pagelayer-leftbar-holder input[type="tel"],
.pagelayer-leftbar-holder input[type="url"],
.pagelayer-leftbar-holder input:not([type]) {
border: 1px solid #cbd5e1 !important;
border-radius: 6px !important;
background-color: #ffffff !important;
color: #0f172a !important;
font-size: 13px !important;
transition: all 0.2s ease !important;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.02) !important;
width: 100% !important;
box-sizing: border-box !important;
outline: none !important;
}

.pagelayer-leftbar-holder textarea:focus,
.pagelayer-leftbar-holder select:focus,
.pagelayer-leftbar-holder input[type="text"]:focus,
.pagelayer-leftbar-holder input[type="search"]:focus,
.pagelayer-leftbar-holder input[type="number"]:focus,
.pagelayer-leftbar-holder input[type="email"]:focus,
.pagelayer-leftbar-holder input[type="tel"]:focus,
.pagelayer-leftbar-holder input[type="url"]:focus,
.pagelayer-leftbar-holder input:not([type]):focus {
border-color: #2563eb !important;
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15) !important;
}

.pagelayer-dark .pagelayer-leftbar-holder textarea,
.pagelayer-dark .pagelayer-leftbar-holder select,
.pagelayer-dark .pagelayer-leftbar-holder input[type="text"],
.pagelayer-dark .pagelayer-leftbar-holder input[type="search"],
.pagelayer-dark .pagelayer-leftbar-holder input[type="number"],
.pagelayer-dark .pagelayer-leftbar-holder input[type="email"],
.pagelayer-dark .pagelayer-leftbar-holder input[type="tel"],
.pagelayer-dark .pagelayer-leftbar-holder input[type="url"],
.pagelayer-dark .pagelayer-leftbar-holder input:not([type]) {
border-color: #334155 !important;
background-color: #131926 !important;
color: #f8fafc !important;
}

.pagelayer-dark .pagelayer-leftbar-holder textarea:focus,
.pagelayer-dark .pagelayer-leftbar-holder select:focus,
.pagelayer-dark .pagelayer-leftbar-holder input[type="text"]:focus,
.pagelayer-dark .pagelayer-leftbar-holder input[type="search"]:focus,
.pagelayer-dark .pagelayer-leftbar-holder input[type="number"]:focus,
.pagelayer-dark .pagelayer-leftbar-holder input[type="email"]:focus,
.pagelayer-dark .pagelayer-leftbar-holder input[type="tel"]:focus,
.pagelayer-dark .pagelayer-leftbar-holder input[type="url"]:focus,
.pagelayer-dark .pagelayer-leftbar-holder input:not([type]):focus {
border-color: #2563eb !important;
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.25) !important;
}

/* Search field padding and icon alignment fixes */
.pagelayer-leftbar-holder input.pagelayer-search-field {
padding: 6px 28px 6px 32px !important;
height: 32px !important;
border: 1px solid #cbd5e1 !important;
border-radius: 6px !important;
background-color: #ffffff !important;
color: #0f172a !important;
font-size: 13px !important;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.02) !important;
width: 100% !important;
box-sizing: border-box !important;
outline: none !important;
}

.pagelayer-dark .pagelayer-leftbar-holder input.pagelayer-search-field {
border-color: #334155 !important;
background-color: #1e293b !important;
color: #f8fafc !important;
}

.pagelayer-leftbar-search .pli-search {
left: 10px !important;
line-height: 32px !important;
height: 32px !important;
color: #94a3b8 !important;
font-size: 14px !important;
position: absolute !important;
top: 0 !important;
display: flex !important;
align-items: center !important;
}

.pagelayer-leftbar-search .pagelayer-sf-empty {
right: 10px !important;
line-height: 32px !important;
height: 32px !important;
color: #94a3b8 !important;
font-size: 14px !important;
position: absolute !important;
top: 0 !important;
display: flex !important;
align-items: center !important;
cursor: pointer !important;
transition: color 0.15s ease !important;
}

.pagelayer-leftbar-search .pagelayer-sf-empty:hover {
color: #2563eb !important;
}

/* Fix device icon overlapping/showing on top of select and input fields */
.pagelayer-elp-screen {
flex-shrink: 0 !important;
}

.pagelayer-form-item:has(.pagelayer-elp-select-div) .pagelayer-elp-label-div,
.pagelayer-form-item:has(.pagelayer-elp-spinner-div) .pagelayer-elp-label-div,
.pagelayer-form-item:has(.pagelayer-elp-color-div-holder) .pagelayer-elp-label-div,
.pagelayer-form-item:has(.pagelayer-elp-color-div) .pagelayer-elp-label-div,
.pagelayer-base-control:has(.pagelayer-elp-select-div) .pagelayer-elp-label-div,
.pagelayer-base-control:has(.pagelayer-elp-spinner-div) .pagelayer-elp-label-div,
.pagelayer-base-control:has(.pagelayer-elp-color-div-holder) .pagelayer-elp-label-div,
.pagelayer-base-control:has(.pagelayer-elp-color-div) .pagelayer-elp-label-div {
max-width: 45% !important;
flex-wrap: wrap !important;
padding-right: 10px !important;
box-sizing: border-box !important;
}

/* Fix: undo icon overlapping the icon picker select box */
.pagelayer-form-item:has(.pagelayer-elp-icon-div) .pagelayer-elp-label-div,
.pagelayer-base-control:has(.pagelayer-elp-icon-div) .pagelayer-elp-label-div{
max-width: 45% !important;
flex-wrap: wrap !important;
padding-right: 20px !important;
box-sizing: border-box !important;
}

.pagelayer-elp-typo {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
flex-wrap: wrap !important;
}

.pagelayer-elp-typo .pagelayer-elp-label {
width: 48% !important;
max-width: 48% !important;
display: flex !important;
align-items: center !important;
flex-wrap: wrap !important;
gap: 6px !important;
margin-bottom: 0 !important;
padding-right: 8px !important;
box-sizing: border-box !important;
}

.pagelayer-elp-typo .pagelayer-elp-typo-input {
width: 48% !important;
max-width: 48% !important;
}

/* Fix link input field and gear icon alignment to form a unified input group */
.pagelayer-elp-link-div {
display: flex !important;
align-items: stretch !important;
flex-wrap: wrap !important;
width: 100% !important;
}

.pagelayer-elp-link-div input.pagelayer-elp-link {
flex: 1 1 auto !important;
width: 0 !important;
height: 32px !important;
border: 1px solid #cbd5e1 !important;
border-right: none !important;
border-radius: 4px 0 0 4px !important;
box-sizing: border-box !important;
padding: 6px 10px !important;
font-size: 13px !important;
background-color: #fff !important;
margin: 0 !important;
}

.pagelayer-dark .pagelayer-elp-link-div input.pagelayer-elp-link {
background-color: #252529 !important;
border-color: #475569 !important;
color: #cbd5e1 !important;
}

.pagelayer-elp-link-div i.pagelayer-elp-link-icon {
flex: 0 0 auto !important;
width: 36px !important;
height: 32px !important;
border: 1px solid #cbd5e1 !important;
border-radius: 0 4px 4px 0 !important;
box-sizing: border-box !important;
background-color: #f8fafc !important;
color: #64748b !important;
cursor: pointer !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
margin: 0 !important;
position: static !important;
font-size: 14px !important;
line-height: normal !important;
transition: background-color 0.15s ease, color 0.15s ease !important;
}

.pagelayer-elp-link-div i.pagelayer-elp-link-icon:hover {
background-color: #f1f5f9 !important;
color: #2563eb !important;
}

.pagelayer-dark .pagelayer-elp-link-div i.pagelayer-elp-link-icon {
background-color: #1e1e24 !important;
border-color: #475569 !important;
color: #94a3b8 !important;
}

.pagelayer-dark .pagelayer-elp-link-div i.pagelayer-elp-link-icon:hover {
background-color: #2d2d34 !important;
color: #3b82f6 !important;
}

.pagelayer-elp-link-no-addons > .pagelayer-elp-link {
border-radius: 4px !important;
border-right: 1px solid #cbd5e1 !important;
}

.pagelayer-dark .pagelayer-elp-link-no-addons > .pagelayer-elp-link {
border-right-color: #475569 !important;
}

.pagelayer-elp-link-div .pagelayer-elp-link-addons {
width: 100% !important;
margin-right: 0 !important;
}

.pagelayer-elp-link-div .pagelayer-elp-link-list {
width: 100% !important;
}

/* Match sidebar top header section and bottombar section background in dark mode */
.pagelayer-dark td.pagelayer-topbar-holder,
.pagelayer-dark .pagelayer-bottombar-row {
background: #0b0f19 !important;
}

.pagelayer-dark td.pagelayer-topbar-holder {
border-bottom: 1px solid #1e293b !important;
}

.pagelayer-dark .pagelayer-bottombar-holder {
border-top: 1px solid #1e293b !important;
background: #0b0f19 !important;
}

/* Sidebar fields alignment and symmetric padding */
.pagelayer-elpd-section-open+.pagelayer-elpd-section-rows {
padding: 16px 0 !important;
box-sizing: border-box !important;
}

.pagelayer-elpd-section-rows .pagelayer-form-item {
padding: 8px 16px 8px 12px !important;
box-sizing: border-box !important;
width: 100% !important;
}

.pagelayer-elpd-section-rows .pagelayer-elp-select-div,
.pagelayer-elpd-section-rows .pagelayer-elp-spinner-div,
.pagelayer-elpd-section-rows .pagelayer-elp-checkbox-div,
.pagelayer-elpd-section-rows .pagelayer-elp-color-div-holder,
.pagelayer-elpd-section-rows .pagelayer-elp-color-div {
right: 16px !important;
}

.pagelayer-elpd-section-name {
margin-top: 0 !important;
}

/* Global Tab widgets list - styled to match standard widgets tab (3 columns, same box size) */
#pagelayer-global-widget {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 8px !important;
padding: 0 15px 15px 15px !important;
box-sizing: border-box !important;
}

#pagelayer-global-widget > .pagelayer-global-widget-shortcodes{
grid-column: span 3 !important;
margin-left: -15px !important;
margin-right: -15px !important;
}

#pagelayer-global-widget > .pagelayer-leftbar-group{
grid-column: span 3 !important;
margin-left: -15px !important;
margin-right: -15px !important;
}

#pagelayer-global-widget > .pagelayer-global-widget-pro{
grid-column: span 3 !important;
}

Advanced Web Server Manager