#divboxtool {display:none;z-index:10;position:absolute;top:0px;left:0px;box-sizing: border-box;width: 60px;line-height:30px;outline: none;text-align: center;cursor: pointer;border-radius:0px;overflow:hidden;background: #F4F3F2; box-shadow: 0px 4px 40px 0px rgba(0, 0, 0, 0.30);border-radius: 10px; padding:8px;margin-left: -12px;}

/* .is-section:hover .is-section-tool {opacity:1;transition: all 0.2s ease-in-out;} */
/* .is-box {-webkit-transition: all ease 0.2s;-moz-transition: all ease 0.2s;-ms-transition: all ease 0.2s;-o-transition: all ease 0.2s;transition: all ease 0.2s;} */
.is-module {width:100%;height:100%;min-height:100px;position:absolute;top:0;left:0;background-image:url(images/module.png);background-repeat:no-repeat;background-position:50%;background-color:rgba(0,0,0,0.05);}
.is-placeholder {width:100%;height:200px;position:relative;top:0;left:0;background-image:url(images/placeholder.png);background-repeat:no-repeat;background-position:50%;background-color:rgba(0,0,0,0.05);}

.is-section-tool {z-index:10;display:none;opacity:1;position:absolute !important;top:0px;left:0px;margin:0px;margin-left:70px;width:100%;height:40px;white-space:nowrap;}
.is-section-tool > div {width:40px;height:40px;border-radius:0;box-sizing:border-box;padding:0px;font-size:13px;text-align:center;line-height:40px;float:left;}
.is-section-edit {cursor:pointer;background:transparent;color:#fff;}
.is-section-remove {cursor:pointer;background:transparent;color:#fff;}
.is-section-edit *, .is-section-remove * {color:#fff !important;}

.is-dummy {height:0px;min-height: 0px !important;}

/* Old Section Templates */
.is-section-list {background:rgba(255, 255, 255, 0.96);}
.is-section-list div{cursor:pointer;margin:0 15px 19px;padding:0;display:inline-block;}
.is-section-list div img {opacity:0.9;border:none;transition: all 0.2s ease-in-out;width:100%; max-width:250px; margin:0; box-sizing:border-box;display:block;-webkit-box-shadow: 0px 5px 17px rgba(0, 0, 0,0.2);-moz-box-shadow: 0px 5px 17px rgba(0, 0, 0,0.2);box-shadow: 0px 5px 17px rgba(0, 0, 0,0.2);}
.is-section-list div:hover img {opacity:1;}
.is-section-list {height:auto;max-height: 703px;margin:0;padding:27px 0 0;box-sizing:border-box;overflow-y:auto;overflow-x:hidden;text-align:center;}
@media all and (max-width: 960px) {
   .is-section-list {max-height: 533px;} 
}

/* New Sidebar Option */
/*.sidebar-active {margin-left:50px;}*/
.sidebar-active {padding-left:50px;box-sizing:border-box;}
.sidebar-active .is-section-tool {width:56px !important;height:104px;left:auto !important;right:5px !important;top:10px !important; margin-left:0 !important;padding: 8px;background: #F4F3F2;box-shadow: 0px 4px 40px 0px rgba(0, 0, 0, 0.30);border-radius: 10px;}
.sidebar-active .is-section-tool .is-section-edit {width:40px;height:40px;border-radius:0;line-height:40px;}
.sidebar-active .is-section-tool .is-section-remove {width:40px;height:40px;border-radius:0;line-height:40px;margin-top:8px}
.sidebar-active #rte-toolbar {margin:0 0 0 50px;}

.is-sidebar {z-index:10003;position:fixed;top:0;left:0;width:50px;height:100%;background:#f9f9f9;color:rgba(0,0,0,0.8);border-right:rgba(0, 0, 0, 0.05) 1px solid;box-shadow:0 0 15px rgba(143, 143, 143, 0.06);}
.is-sidebar div.is-sidebar-button {width:100%;display:table;float:left;height:50px;background:none;text-align:center;cursor:pointer;font-size:16px;line-height: 50px !important;position:relative}
.is-sidebar div.is-sidebar-button i {display:table-cell;vertical-align:middle;}
.is-sidebar div.is-sidebar-button:hover {background:#f9f9f9;}
.is-sidebar div.is-sidebar-button.active {background:#f9f9f9;}
.is-sidebar-content {
	z-index:10002;position:fixed;top:0;left:0;width:100%;max-width:100%;height:100%;max-height:100%;box-sizing:border-box;background:rgba(255, 255, 255, 0.96);color:rgba(0,0,0,0.8);padding: 0;
	-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;
	transition-property:transform;transition-property:transform,-webkit-transform;
	-webkit-transition-duration:0.3s;transition-duration:0.3s;
    -webkit-transform: translate3d(-120%, 0, 0);transform: translate3d(-120%, 0, 0);
    box-shadow: 1px -2px 20px 0px rgba(0, 0, 0, 0.08);
}
.is-sidebar-content.active {
	-webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);
} 
.is-sidebar-content > div {width:100%;height:100%;max-width:100%;max-height:100%;}

.is-sidebar-content textarea:focus {outline:none}
.is-sidebar-content select:focus {outline:none}

#divSidebarSnippets {max-width:316px}
#divSidebarTypography {max-width: 450px;}
		
#divSidebarSnippets > div:first-child {width: 100%;height:40px;position: absolute;background: #f3f3f3;padding:0 0 0 50px;box-sizing:border-box;}
#divSidebarSnippets > div:first-child > #divSnippetCat {position:relative;width:100%;height:50px;line-height:50px;}
#divSidebarSnippets > div:first-child > #divSnippetCatOptions {top:auto;width:262px;}
		
#divSidebarSnippets .is-snippet-list {padding:25px 12px 0 75px;border-top:50px transparent solid;}
#divSidebarSnippets .is-snippet-list div {background: #000;margin: 0 12px 12px 0;}
#divSidebarSnippets .is-snippet-list div img{outline:#ddd 1px solid;box-shadow:none;opacity:1;}
#divSidebarSnippets .is-snippet-list div:hover img {opacity:0.95;}

#divSidebarSections > div,
.sidebar-sections > div {padding:0 0 0 50px;box-sizing:border-box;}
#divSidebarSource > div {padding:0 0 0 50px;box-sizing:border-box;}
#divSidebarTypography > div {padding:0 0 0 50px;box-sizing:border-box;}

#divSidebarSections {width:100%}
@media all and (min-width: 640px) {
    #divSidebarSections {max-width:550px}
}
@media all and (min-width: 1024px) {
    #divSidebarSections {max-width:1005px}
}
@media all and (min-width: 1440px) {
    #divSidebarSections {max-width:1020px}
}

#divSidebarSource,
.sidebar-sections {width:100%}
@media all and (min-width: 640px) {
    #divSidebarSource, .sidebar-sections {max-width:550px}
}
@media all and (min-width: 1024px) {
    #divSidebarSource, .sidebar-sections {max-width:1005px}
}
@media all and (min-width: 1440px) {
    #divSidebarSource, .sidebar-sections {max-width:1005px}
}

.svg-icon  {
    width: 16px;
    height: 16px;
    fill: rgba(0,0,0,0.8);
}

.is-sidebar-content button {
    margin: 0;
    padding: 19px;
    border:none;
    line-height: 1.7;
    font-family:sans-serif;
    font-size: 11px !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    cursor:pointer;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    background: rgba(0,0,0,0.8); 
    color: rgba(255,255,255,0.6);
}

.is-sidebar-content button.primary {
    background: rgb(63, 63, 63);
    color: rgba(255,255,255,0.6);
}
.is-sidebar-content button.primary:hover {
    background: rgb(73, 73, 73);
    color:rgba(255,255,255,0.83);
}
.is-sidebar-content button.secondary {
    background: rgb(80, 80, 80);
    color: rgba(255,255,255,0.73);
}
.is-sidebar-content button.secondary:hover {
    background: rgb(90, 90, 90);
    color: rgba(255,255,255,0.9);
}

#_cbhtml #btnViewHtmlOk {
    font-size: 13px !important;
    padding: 0;
    text-align: center;
    line-height: 35px;
    width: 120px;
    height: 35px;
    background: rgb(255, 255, 255);
    color: rgba(0, 0, 0, 0.83);  
    border-radius: 0px;
}
#_cbhtml #btnViewHtmlCancel {
    font-size: 12px !important;
    padding: 0;
    text-align: center;
    line-height: 35px;
    width: 120px;
    background: rgba(0, 0, 0, 0);
    color: rgb(65, 65, 65);
    height: auto;
}

#_cbhtml #inpViewHtml {
    background-color: #fff;
    color: #000;
    border: none;
    padding:8px 16px;
    box-sizing: border-box;
    overflow-x: hidden;
    font-family: courier;
    font-size: 13px;
    line-height: 2;
    letter-spacing: 1px;
}

button:focus {outline:none}

/* Old */
#divSidebarSource .CodeMirror {height:100% !important;}
#divSidebarSource .CodeMirror-sizer {padding-top:12px;}

#md-editcustomcode #txtBoxCustomCode {height:450px !important;}
#md-editcustomcode .CodeMirror {height: 450px !important;}

/* First Loading */
.is-wrapper {opacity:0.01;} /* setting display=none makes initial script may not work properly */
.pace {
  -webkit-pointer-events: none;
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
.pace-inactive {
  display: none;
}
.pace .pace-progress {
  background: #000000;
  position: fixed;
  z-index: 2000;
  top: 0;
  right: 100%;
  width: 100%;
  height: 2px;
}

.dark-text {
    color:#000000;
}

.dark-text a, 
.dark-text p, 
.dark-text h1,
.dark-text h2,
.dark-text h3, 
.dark-text h4, 
.dark-text h5, 
.dark-text h6, 
.dark-text ul, 
.dark-text ol {
    color:inherit;
}

.light-text {
    color:#ffffff;
}

.light-text a, 
.light-text p, 
.light-text h1,
.light-text h2,
.light-text h3, 
.light-text h4, 
.light-text h5, 
.light-text h6, 
.light-text ul, 
.light-text ol {
    color:inherit;
}

.box-active {
    animation-name: box-active-anim;
    animation-duration: 1s;
}
@keyframes box-active-anim {
    0% {transform:scale(1);}
    50% {transform:scale(0.95);}
    100% {transform:scale(1);}
}

/* 
.is-builder {min-height:50px} Enlarge droppable area */
/*
#_cbhtml .is-modal.customcolor button {
    float: left;
    width: 45px;
    height: 45px;
    cursor: pointer;
}
#_cbhtml .is-modal.customcolor button.clear {
    width: 225px;
    height: 45px;
}
#_cbhtml .is-modal.customcolor .more input.input-text {
    width: 270px;
    height: 45px;
}
#_cbhtml .is-modal.customcolor button.input-more {width:45px;height:45px;}
#_cbhtml .is-modal.customcolor .more input.input-text {width:270px;height:45px}
#_cbhtml .is-modal.customcolor .more button.input-ok {width:45px;height:45px}
#_cbhtml .is-modal.customcolor .more {overflow:hidden; width:100%;height:0px;}
#_cbhtml .is-modal.customcolor .more.active {animation-name:color-slide-out; animation-duration:0.3s; animation-fill-mode: forwards;}
@keyframes color-slide-out {
    from {height: 0;}
    to {height: 54px;}
}
#_cbhtml .is-modal.customcolor .more.deactive {animation-name:color-slide-in; animation-duration:0.3s; animation-fill-mode: forwards;}
@keyframes color-slide-in {
    from {height: 54px;}
    to {height: 0;}
} 
body.modal-active {background-color:rgba(123, 123, 123, 0.2);}

.is-customgrad-remove {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 20px;
    height: 20px;
    background: rgba(95, 94, 94, 0.26);
    color: #fff;
    line-height: 20px;
    text-align: center;
    font-size: 12px;
    cursor: pointer;
    display:none;
}
.is-customgrad-item.active .is-customgrad-remove {display:block;}

@media all and (max-width: 1025px) {
    body.full-edit .is-sidebar {display:none !important;}
    body.full-edit.sidebar-active {padding-left: 0 !important;}
}
@media all and (max-width: 680px) {
    .is-sidebar {display:none !important;}
    body {padding-left: 0 !important;}
    #divboxtool, .is-section-tool {display:none !important}
}
body.full-edit .is-builder > div > div:not(.mobile-edit) {display:none !important;}
body.full-edit #divboxtool, body.full-edit .is-section-tool {display:none !important}
body.full-edit .mobile-edit * {color: #111 !important;}
*/



#_cbhtml .editbox .is-settings,
#_cbhtml .editsection .is-settings {margin-bottom:15px;}
#_cbhtml .editbox .is-settings > div,
#_cbhtml .editsection .is-settings > div {display:block;height:45px;}
#_cbhtml .editbox .is-settings > div:first-child,
#_cbhtml .editsection .is-settings > div:first-child {height:auto;font-family: sans-serif;font-size:14px;letter-spacing: 1px;margin: 10px 0 3px;}
#_cbhtml .editbox .is-settings button,
#_cbhtml .editsection .is-settings button { width:50px;float:left;font-size:12px; line-height: 1.3;padding: 1px 6px;text-transform:none; }
#_cbhtml .editbox .is-settings label,
#_cbhtml .editsection .is-settings label {font-size:14px;color:inherit;}
#_cbhtml .editbox .is-settings button.classic,
#_cbhtml .editsection .is-settings button.classic {
    width: 100%;
    height:60px;
    display: block;
    background: #f7f7f7; 
}
#_cbhtml .editbox .is-settings button.classic:hover,
#_cbhtml .editsection .is-settings button.classic:hover {background: #fafafa;}

#_cbhtml .editbox .is-tabs a {
    font-size: 11px;
    color: #000;
}
#_cbhtml .is-modal.editbox div.is-draggable {
    background: #f9f9f9;
}

.is-header .is-section-edit,
.is-footer .is-section-edit {
    display: none !important;
}

.is-header .is-section-tool,
.is-footer .is-section-tool {
    height: 56px;
}

.sidebar-active .is-footer .is-section-tool .is-section-remove,
.sidebar-active .is-header .is-section-tool .is-section-remove {
    margin-top:0;
}

#_cbhtml .is-modal.takeUserInputForAI .takeUserInputButtonHolder {
    position: absolute;
    right: 8px;
    top: 8px;
}

#_cbhtml .is-modal.takeUserInputForAI #inpBoxHtmlAi.textarea {font-size:18px;border:#F15F27 2px solid; min-height:56px;width:570px; border-radius:4px; box-shadow: 0px 4px 40px 0px rgba(0, 0, 0, 0.30);color:#000000;font-family: Inter;line-height: 24px;padding: 13px 74px 13px 16px;}

#_cbhtml .is-modal.takeUserInputForAI #inpBoxHtmlAi.textarea::placeholder {color:#B9B6B0;font-size:18px;font-family: Inter;line-height: 24px;}

#_cbhtml .is-modal.takeUserInputForAI .input-ok {cursor:pointer;color:#fff;display:inline-block;padding: 8px;pointer-events: none;}
#_cbhtml .is-modal.takeUserInputForAI .input-cancel {cursor:pointer;color:#fff;display:inline-block;padding: 8px;}