#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;}

.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:1;opacity:0;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:rgb(0, 172, 214);color:#fff;}
.is-section-remove {cursor:pointer;background:rgb(247, 99, 46);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:40px !important;height:80px;left:auto !important;right:0px !important;top:150px !important; margin-left:0 !important;}
.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;}
.sidebar-active #rte-toolbar {margin:0 0 0 50px;}

.is-sidebar {z-index:1002;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;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:1001;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);
}
.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: 600px;}
		
#divSidebarSnippets > div:first-child {width: 100%;height: 50px;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 {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: 1100px) {
    #divSidebarSections {max-width:1005px}
}

@media all and (min-width: 1550px) {
    #divSidebarSections {
        max-width:1450px;
    }
}

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

.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);
}

#btnViewHtmlOk2{
    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;
    border:#ccc 1px solid
}
#btnViewHtmlCancel2 {
    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);
}

#inpViewHtml2 {
    background-color: #fff;
    color: #000;
    border: none;
    padding:30px;
    box-sizing: border-box;
    overflow-x: hidden;
    font-family: courier;
    font-size: 17px;
    line-height: 2;
}

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;
}

/* New */
#divCb {
    font-family: sans-serif;
    font-size: 100%; 
    font-weight: normal;
}

.is-builder {min-height:50px} /* Enlarge droppable area */

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

.is-modal.customcolor button {
    float: left;
    width: 45px;
    height: 45px;
    cursor: pointer;
}
.is-modal.customcolor button.clear {
    width: 225px;
    height: 45px;
}
.is-modal.customcolor .more input.input-text {
    width: 270px;
    height: 45px;
}
.is-modal.customcolor button.input-more {width:45px;height:45px;}
.is-modal.customcolor .more input.input-text {width:270px;height:45px}
.is-modal.customcolor .more button.input-ok {width:45px;height:45px}
.is-modal.customcolor .more {overflow:hidden; width:100%;height:0px;}
.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;}
}
.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{transition: background-color ease 1s;}*/
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;}


.is-modal.imageedit{
    max-height: 100%;
    overflow-y: auto;
}
.input-elm-color,.cell-color,.input-elm-bgcolor{
    font-family: Arial, Helvetica, sans-serif !important;
}