/* -------------------------------------------------------------------------------- /
    [10] STYLE EDITOR - UPDATED 05.09.2024
/ -------------------------------------------------------------------------------- */

@media not all and (min-resolution:.001dpcm) {
    @supports (-webkit-appearance:none) {
   #cc-inner .style-switcher .cc-m-all:hover {
    position:fixed;
    }
   }
  }
  
  .is-switcher {
     display:none;
  }
  
  .matrix .is-switcher {
    display:block;
  }
  
  .is-switcher .cc-m-all-drag-handle-icon.icon-move:before {
    content: "";
  }
  
  
  .is-switcher .j-sharebuttons {
    opacity:0;
  }
  
  .is-switcher .btn.btn-sm.ng-pristine.ng-untouched.ng-valid {
    display:none!important;
  }
  
  .is-switcher td.col-6 {
      height:32px;
    }
  
  .color-switcher {
    background: #404040; 
    max-height: 240px; 
    overflow-y: scroll;
  }

  .style-switcher .cc-m-tlbx-copy {
    display:none!important;
   }
    
    
   .color-switcher td,#cc-inner .color-switcher p, .color-switcher {
      font-size:14px!important;
    }
    
    .style-switcher {
        min-height:300px;
        max-width:400px;
        width: 400px;
        background:#2e2e2e;
        padding: 34px;
        border-radius: 4px;
    }
    
    .is-light-theme .collapsible-content {
       background:#F4F5F9;
       box-shadow: 0 5px 10px 0 rgba(50,51,53,.2);
    }
    
    .is-light-theme .style-switcher {
        background:#F4F5F9;
        /* box-shadow: 0 5px 10px 0 rgba(50,51,53,.2); */
    }
    
    .is-light-theme .color-switcher{
        background: #E6E7F0!important;   
    }
    
    
    .is-light-theme .color-switcher,.is-light-theme .color-switcher p,.is-light-theme .color-switcher td,.is-light-theme .color-switcher span {
        color:#696c76!important;
    }
    
    .is-light-theme .color-switcher .cc-map-additional-devider span {
        display: block;
        padding: 0 4px;
        background-color: #ced0e0;
        color:#696c76!important;
        border-radius:3px;
    }
    
    .is-light-theme .color-switcher .cc-map-additional-devider {
        border-bottom: 1px solid #ced0e0!important;
    }
    
    #cc-inner .is-light-theme .cc-config {
      background-color: #fff!important; 
      border: 1px solid #ced0e0!important;
    }
    
    
    #cc-inner .is-light-theme .cc-config.cc-css,#cc-inner .is-light-theme .cc-config.cc-css p,#cc-inner .is-light-theme .cc-config.cc-css span {
      color:#117700!important;
      background: transparent!important;
    }
    
    #cc-inner .is-light-theme .cc-config.cc-js,#cc-inner .is-light-theme .cc-config.cc-js p,#cc-inner .is-light-theme .cc-config.cc-js span {
      color:#a5955c!important;
      background: transparent!important;
    }
        
     .matrix .style-switcher {
        display:block;
    }
      
   .matrix .style-switcher {
      display:block;
  }
  
  .is-switcher .cc-map-additional-devider,.mce-container,#cc-inner .mce-reset,#cc-inner .color-switcher,#cc-inner .color-switcher p,.color-switcher h3,.color-switcher td,.is-switcher span.icon-table-cell-selection:after,.mtx-toggle,.is-brandon-font {
      font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif!important;
  }

.color-select {
    cursor: pointer; 
    width: 32px!important;
    height: 32px!important; 
    text-align: center; 
    border-radius: 500px!important; 
    border: 1px solid #666666!important;
}
.style-switcher .class-name {
    background-color: transparent!important; 
    height: 32px;
}

  #cc-inner .cc-config {
    background-color: #2e2e2e!important; 
    border: 1px solid #2e2e2e!important; 
    padding: 3px; 
    box-sizing: border-box; 
    border-radius: 3px; 
    width: 100%; 
    min-height: 32px; 
  }
  
  #cc-inner .cc-config,#cc-inner .cc-config p {
    color:#888!important;
  }
  
  #cc-inner .cc-config.cc-css,#cc-inner .cc-config.cc-css p,#cc-inner .cc-config.cc-css span,
    #cc-inner .cc-config.cc-js,#cc-inner .cc-config.cc-js p,#cc-inner .cc-config.cc-js span {
    font-family:monospace!important;
    font-size:13px!important;
  }
  
  #cc-inner .cc-config.cc-css,#cc-inner .cc-config.cc-css p,#cc-inner .cc-config.cc-css span {
    color:#96b38a!important;
  }
  
  #cc-inner .cc-config.cc-js,#cc-inner .cc-config.cc-js p,#cc-inner .cc-config.cc-js span {
    color:#ddca7e!important;
  }
  
  
  
  .color-switcher .cc-map-additional-devider {
      clear: both;
      width: 100%;
      margin: 5px 0;
      border-bottom: 1px solid rgba(255,255,255,.15);
      position: relative;
      top: auto;
      right: auto;
      bottom: auto;
      left: auto;
  }
    .color-switcher .cc-map-additional-devider span {
      display: block;
      padding: 0 4px;
      background-color: #404040;
      position: absolute;
      top: -10px;
      right: auto;
      bottom: auto;
      left: 4px; 
  }
  
  .cc-m-table.cc-m-all-opened table.mce-item-table td {
      outline: 0px dashed #000!important;
    }
    
  .cc-content-parent {
      opacity: 0;
      transition: opacity 0.5s ease-in-out;
  }
    
  .matrix .j-calltoaction-wrapper{
      display: block;
  }
    
  .matrix .cc-m-htmlcode .hs-button{
      display: inline-block;
  }
    
  .wrap-collabsible input[type="checkbox"],input#collapsible.toggle {
      display: none;
  }
  
  .wrap-collabsible {
      position:fixed;
      z-index:999998;
      margin-top:40px;
  }
    
  .mce-container.mce-panel.mce-floatpanel.mce-window.mce-in {
      z-index:9999998!important;
  }
    
  .cc-sm-color-picker.sp-container {
     z-index: 9999999;
  }
    
  .mtx-toggle {
      position:fixed;
      top:0;
      display: none;
      font-size: 16px;
      line-height: 32px;
      text-align: center;
      vertical-align: middle;
      padding: 0px;
      margin: 1px;
      background: #1ba9e1;
      width: 32px;
      height: 32px;
      -webkit-border-radius: 3px;
      border-radius: 3px;
      cursor: pointer;
      z-index:999999;
      transition: all 0.25s ease-out;
  }
  
  .cc-matrix-active .mtx-toggle {
    display:block;
  }
    
    .mtx-toggle::before {
        font-family: "JimdoIconFont"!important;
        content: "\E219";
        speak: none;
        display: block;
        vertical-align: middle;
        color: #fff;
        -moz-osx-font-smoothing: grayscale;
        -webkit-font-smoothing: antialiased;
        transition: transform 0.2s ease-out;
    }
    .wrap-collabsible .toggle:checked + .mtx-toggle::before {
        -webkit-transform:rotate(180deg);
        -moz-transform:rotate(180deg);
        -ms-transform:rotate(180deg);
        -o-transform:rotate(180deg);
        transform:rotate(180deg);
    }
    
    .collapsible-content {
        position:fixed;
        top:40px;
        max-height: 0px;
        border-radius:4px;
        margin:1px;
        overflow-y: scroll;
        height: 420px;
        background:#2e2e2e;
        transition: max-height 0.25s ease-in-out;
    }
    
    .wrap-collabsible .toggle:checked + .mtx-toggle + .collapsible-content {
        max-height:100vh;
    }
  
  .is-safari .collapsible-content {
      position:relative;
      height:0;
      max-height:unset;
      overflow-y: hidden;
      transition:max-height 0.5s;
  }
    
   .is-safari .wrap-collabsible .toggle:checked + .mtx-toggle + .collapsible-content {
      position:fixed;
      top:0px;
      padding-top:20px;
      height:auto;
      
    }
    
    .wrap-collabsible .toggle:checked + .mtx-toggle {
    }
    
    .collapsible-content .content-inner {
        padding: 0;
    }
    
    .collapsible-content p {
        margin-bottom: 0;
    }
    
    .is-switcher span.icon-table-cell-selection{
     background:#1ba9e1;
     padding:4px 7px;
     border-radius:4px;
    }
  
  .is-switcher .icon-table-cell-selection:before {
      content: "\E202";
      padding-right:3px;
      border:0;
     
  }
    .is-switcher span.icon-table-cell-selection:after{
        content:'Select a color';
        padding:3px;display:inline-block;
    }
    
    .matrix-save:before{
       font-family: "JimdoIconFont"!important;
       content: "\E2F9";
       speak: none;
       display: block;
       vertical-align: middle;
       color: #fff;
       font-size:16px;
       line-height: 32px;
       -moz-osx-font-smoothing: grayscale;
       -webkit-font-smoothing: antialiased;
       transition: transform 0.2s ease-out;
    }
    
    .matrix-reload:before{
       font-family: "JimdoIconFont"!important;
       content: "\E2eb";
       display: block;
       speak:none;
       vertical-align: middle;
       color: #fff;
       font-size:16px;
       line-height: 32px;
      -moz-osx-font-smoothing: grayscale;
      -webkit-font-smoothing: antialiased;
       transition: transform 0.2s ease-out;
    }
    
    .matrix-view:before{
       font-family: "JimdoIconFont"!important;
       content: "\E2DD";
       speak: none;
       display: block;
       vertical-align: middle;
       color: #fff;
       font-size: 16px;
       line-height: 32px;
       -moz-osx-font-smoothing: grayscale;
       -webkit-font-smoothing: antialiased;
       transition: transform 0.2s ease-out;
    }
    
    .matrix-save:active,.matrix-reload:active,.matrix-view:active {
      transform: translateY(2px);
    }
    
    
   .style-switcher .editor-group:nth-of-type(1),
    .style-switcher .editor-group:nth-of-type(2),
    .style-switcher .editor-group:nth-of-type(3) .btn.btn-sm:nth-of-type(3),
    .style-switcher .editor-group:nth-of-type(4) .btn.btn-sm:nth-of-type(1) {
       display:none!important;
    }
    
    
    [data-tooltip] {
        display: inline-block;
        position: relative;
        cursor: help;
        padding: 4px;
    }
  
  .cc-matrix-active .is-switcher button.btn-sm.matrix-msg {
    width: 32px;
    height: 32px;
    position:fixed;
    text-align: center;
    top:1px;
    left:1px;
    z-index:999999;
    border:1px solid transparent;
    padding: 0px;
    background: #1ba9e1;
    color: #fff;
    -webkit-border-radius: 3px;
    border-radius: 3px;
   }
  
  button.btn-sm.matrix-save,
  button.btn-sm.matrix-view {
    display:none;
  }
  
  .collapsible-content button.btn-sm.matrix-save,
  .collapsible-content button.btn-sm.matrix-view {
    display:block;
  }
  
  .cc-matrix-active .is-switcher button.btn-sm.matrix-save {
    left:35px;
  }
  
  .cc-matrix-active .is-switcher button.btn-sm.matrix-view {
    left:69px;
  }

.cc-matrix-active .is-switcher button.btn-sm.matrix-reload {
    left:103px;
    
  }
    
    /* Tooltip styling */
    [data-tooltip]:before {
        content: attr(data-tooltip);
        display: none;
        position: absolute;
        background: #000;
        color: #fff;
        padding: 4px 8px;
        font-size: 14px;
        line-height: 1.4;
        width: 334px;
        text-align: left;
        border-radius: 4px;
    }
    /* Dynamic horizontal centering */
    [data-tooltip-position="top"]:before,
    [data-tooltip-position="bottom"]:before {
        left: 0%;
        -ms-transform: translateX(0);
        -moz-transform: translateX(0);
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    /* Dynamic vertical centering */
    [data-tooltip-position="right"]:before,
    [data-tooltip-position="left"]:before {
        top: 50%;
        -ms-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
    }
    [data-tooltip-position="top"]:before {
        bottom: 100%;
        margin-bottom: 6px;
    }
    [data-tooltip-position="right"]:before {
        left: 100%;
        margin-left: 6px;
    }
    [data-tooltip-position="bottom"]:before {
        top: 100%;
        margin-top: 6px;
    }
    [data-tooltip-position="left"]:before {
        right: 100%;
        margin-right: 6px;
    }
    
    /* Tooltip arrow styling/placement */
    [data-tooltip]:after {
        content: '';
        display: none;
        position: absolute;
        width: 0;
        height: 0;
        border-color: transparent;
        border-style: solid;
    }
    /* Dynamic horizontal centering for the tooltip */
    [data-tooltip-position="top"]:after,
    [data-tooltip-position="bottom"]:after {
        left: 50%;
        margin-left: -6px;
    }
    /* Dynamic vertical centering for the tooltip */
    [data-tooltip-position="right"]:after,
    [data-tooltip-position="left"]:after {
        top: 50%;
        margin-top: -6px;
    }
    [data-tooltip-position="top"]:after {
        bottom: 100%;
        border-width: 6px 6px 0;
        border-top-color: #000;
    }
    [data-tooltip-position="right"]:after {
        left: 100%;
        border-width: 6px 6px 6px 0;
        border-right-color: #000;
    }
    [data-tooltip-position="bottom"]:after {
        top: 100%;
        border-width: 0 6px 6px;
        border-bottom-color: #000;
    }
    [data-tooltip-position="left"]:after {
        right: 100%;
        border-width: 6px 0 6px 6px;
        border-left-color: #000;
    }
    
    /* Show the tooltip when hovering */
    [data-tooltip]:hover:before,
    [data-tooltip]:hover:after {
        display: block;
        z-index: 50;
    }

   #cc-inner .has-pattern-img> div {
      background-repeat: repeat !important;
      background-size: auto !important;
   }

   .sp-alpha {
       display:block;
       bottom:-8px;
  }

.mce-resize-bar.mce-resize-bar-row,
.mce-resize-bar.mce-resize-bar-col{
    height: 0px!important;

}
    
    /*** end style editor ***/