:root{
  --color-1:transparent;
  --white:#fff;
  --black:#333;
  --oll:#333;
  --d_gre:#999;
  --gre:#cfcfce;
  --green:#00552d;
  --wh_bg:#fbfbfb;
  --color-3-grad:linear-gradient(90deg, #000 52%, #fff);
  --max-width:1200px;
  --breakpoint-tablet:992px;
  --breakpoint-phone:768px;
  --breakpoint-mini:600px;
  --color_1:orange;
  --color_2:#fff;
  --color_3:#fff;
  --color_4:red;
  --color_5:#aaa;
  --color_6:blue;
  --color_7:#fcba03;
  --color_8:#a00;
  --color_9:#3678d6;
  --color_10:#333;
  --color_11:#ddd;
  --color_12:#000;
  --color_13:#000;
  --color_14:green;
  --color_15:#855a00;
  --color_16:#ca0b69;
  --color_17:#ff20ed;
  --color_18:#00008b;
  --color_19:#31f031;
  --color_20:#66c2ff;
  --color_21:#ec4242;
  --color_22:#eec97d;
  --color_23:#ef8fbe;
  --color_24:#fd48cb;
  --color_25:#027bff;
  --color_26:#9494ff;
  --color_27:#23a0db;
  --font-family_1: "Material Symbols Outlined";
  --font-family_2: "Material Icons";
  --font-family_3:courier;
  --font-family_4:"Arial";
  --font-family_5:arial;
  --font-family_6:"courier";
  --font-family_7:inherit;
  --font-family_8:monospace;
  --background-color_1:rgba(0,172,250,.1);
  --background-color_2:rgba(0,0,0,.05);
  --background-color_3:hsla(0,0%,100%,.05);
  --color_1:inherit;
  --color_2:#fcba03;
  --color_3:#a00;
  --color_4:#3678d6;
  --color_5:#000;
  --color_6:#222;
  --color_7:#aaa;
  --color_8:#fff;
}


/* 1 */
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(../assets/google/gms.ttf);
  /* For IE6-8 */
  src: local('Material Icons'), local('MaterialIcons-Regular'), url(../assets/google/gms.ttf) format('truetype');
}
/* fallback */
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 100;
  src: url(../assets/google/gms.woff2) format('woff2');
}





.material-symbols-outlined{
  font-family:var( --font-family_1, "Material Symbols Outlined");
  -webkit-font-feature-settings:"liga";
}
.material-icons,.material-symbols-outlined{
  font-weight:400;
  font-style:normal;
  font-size:24px;
  line-height:1;
  letter-spacing:normal;
  text-transform:none;
  display:inline-block;
  white-space:nowrap;
  word-wrap:normal;
  direction:ltr;
  -webkit-font-smoothing:antialiased;
}
.material-icons{
  font-family:var(--font-family_2, "Material Icons");
  text-rendering:optimizeLegibility;
  -moz-osx-font-smoothing:grayscale;
  font-feature-settings:"liga";
}


@-webkit-keyframes rotating{
  0%{
    -webkit-transform:rotate(0deg);
    -o-transform:rotate(0deg);
    transform:rotate(0deg);
  }
  to{
    -webkit-transform:rotate(1turn);
    -o-transform:rotate(1turn);
    transform:rotate(1turn);
  }
}
@keyframes rotating{
  0%{
    -ms-transform:rotate(0deg);
    -moz-transform:rotate(0deg);
    -webkit-transform:rotate(0deg);
    -o-transform:rotate(0deg);
    transform:rotate(0deg);
  }
  to{
    -ms-transform:rotate(1turn);
    -moz-transform:rotate(1turn);
    -webkit-transform:rotate(1turn);
    -o-transform:rotate(1turn);
    transform:rotate(1turn);
  }
}

.dom-flex,.dom-flex-col{

  &.gap2{
    gap:2px;
  }
  &.gap6{
    gap:6px;
  }
  &.gap12{
    gap:12px;
  }
  &.gap16{
    gap:16px;

  } 
  &.flex-even{
    >div{
      flex:1;
    }
  }
}


.bdh-sc-comp{
  border:1px dashed transparent;
  box-sizing:border-box;
  position:relative;
  &:hover{
    >.bdh-sc-options{
      display:block;
      a{
        color:var(--color_1);
        text-shadow:1px 1px 2px #000;
        &:hover{
          color:var(--color_6);
        }
      }
      a.active{
        color:var(--color_4);
      }
    }
  }
}
.bdh-sc-options{
  position:absolute;
  right:0;
  top:0;
  min-height:25px;
  min-width:50px;
  border:0 solid red;
  opacity:1;
  >.buttons{
    position:relative;
    display:none;
    padding:2px 5px;
    background:transparent;
    text-decoration:none;
    font-size:20px;
    border-color:red;
    border-style:solid;
    border-width:0;
    overflow:hidden;
  }
  >.buttons,a{
    color:var(--color_1);
  }
  &:hover{
    opacity:.8;
    .buttons{
      display:inline-block;
    }
  }
}
.ddl-message{
  display:block;
  padding:5px;
  display:flex;
  flex-direction:column;
  background:#333;
  color:var(--color_2);
}
.ddl-error,.ddl-message{
  border:1px solid red;
}
.ddl-warn{
  border:1px solid orange;
}
.ddl-notice{
  border:1px solid #ff0;
}
.ddl-message.title{
  font-weight:700;
  color:var(--color_3);
}
.ddl-message.ddl-warn.title{
  font-weight:700;
  color:var(--color_1);
}
.ddl-message.ddl-error.title{
  font-weight:700;
  color:var(--color_4);
}
textarea.bdh-code,textarea.log-ta{
  width:100%;
  background:#000;
  color:var(--color_5);
  font-family:var(--font-family_3);
  min-height:250px;
}
.ddl-warning.data{
  font-family:var(--font-family_4);
}
.bdh-sc-admin-edit{
  position:relative;
  z-index:100;
}
.bdh-input-wrap{
  margin:2px 5px 3px 0;
  .bdh-input-label{
    padding:5px 0;
    text-align:left;
  }
  >.bdh-i-wrap{
    text-align:right;
    input[type=text],select,textarea{
      flex:1;
    }
    input[type=checkbox]{
      float:right;
    }
  }
}
body{
  .dom-pos-bottom,.dom-pos-top{
    bottom:0;
    top:auto;
  }
  .dom-pos-left{
    left:0;
    right:auto;
  }
  .dom-pos-right{
    right:0;
    left:auto;
  }
  .debug-only{
    visibility:hidden;
  }
}
.dom-abs{
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  display:block;
  overflow:auto;
}
.dom-rel{
  position:relative;
}
.dom-image-grayscale{
  -webkit-filter:grayscale(1);
  filter:grayscale(1);
}
.dom-image-grayscale.fhover{
  &:hover{
    -webkit-filter:grayscale(0);
    filter:grayscale(0);
    -webkit-transition:-webkit-filter .2s linear;
    -moz-transition:-moz-filter .2 linear;
    -moz-transition:filter .2 linear;
    -ms-transition:-ms-filter .2 linear;
    -o-transition:-o-filter .2 linear;
    transition:filter .2 linear,-webkit-filter .2 linear;
  }
}
.dom-image-desaturate{
  -webkit-filter:saturate(0);
  filter:saturate(0);
}
.dom-image-bg{
  background-size:contain;
}
.dom-image-bg,.dom-image-bgf{
  background-position:50%;
  background-repeat:no-repeat;
}
.dom-image-bgf{
  background-size:cover;
}
.dom-flex-grid{
  overflow:auto;
  width:calc(100% + 8px);
  display:flex;
  flex-wrap:wrap;
  padding:0;
  margin:0;
  position:relative;
  left:-4px;
  >.fg-item{
    position:relative;
    flex-basis:calc(16.66666% - 8px);
    margin:4px;
    border:0 solid;
    box-sizing:border-box;
    max-height:25vw;
  }
}
.sc-undefined{
  text-align:center;
  h3{
    font-family:var(--font-family_5);
    font-size:26px;
    border:2px solid red;
  }
}
.dom-bg-checkerboard{
  background:repeating-conic-gradient(#252525 0 25%, transparent 0 50%) 50% / 20px 20px;
}
.selected{
  .dom-bg-checkerboard{
    background:repeating-conic-gradient(#003b5b 0 25%, transparent 0 50%) 50% / 20px 20px;
  }
}
.domx-grid{
  display:grid;
  grid-template-columns:repeat(6, 1fr);
  place-items:start;
  >[style^="--aspect-ratio"]{
    &:before{
      content:"";
      display:inline-block;
      width:1px;
      height:0;
      padding-bottom:calc(100%/(var(--aspect-ratio)));
    }
  }
}
.dom-pad{
  padding:5px;
}
.dom-pad-l{
  padding:0 0 0 5px;
}
.dom-pad-r{
  padding:0 5px 0 0;
}
.dom-prevent-select{
  -webkit-user-select:none;
  -ms-user-select:none;
  user-select:none;
}
.dom-fixed{
  display:fixed;
  overflow:hidden;
}
.dom-flex{
  display:flex;
  flex-direction:row;
  align-items:stretch;
}
.dom-flex1{
  flex:1;
}
.dom-flex-col{
  display:flex;
  flex-direction:column;
  align-items:stretch;
}
.flex-1{
  flex:1;
}
.flex-0{
  flex:0.001;
}
.flex-span{
  flex:1;
  display:none;
}
.flex-center{
  display:flex;
  align-items:center;
  justify-content:center;
}

.flex-right{
  display:flex;

  justify-content:right;
}

.flex-left{
  display:flex;

  justify-content:left;
}

.flex-top{
  display:flex;

  align-items:top;

}
.flex-bottom{
  display:flex;

  align-items:bottom;

}

.flex-gap{
  gap:25px;
}
.flex-center-v{
  display:flex;
  align-items:center;
}
.flex-center-h{
  display:flex;
  justify-content:center;
}
.dom-flex.dom-flex-wrap{
  flex-wrap:wrap;
  align-items:flex-start;
  >*{
    flex-basis:17%;
    box-sizing:border-box;
  }
}
.sc-data{
  display:none;
}
.w600{
  width:600px;
}
.bdh-debug-icon{
  padding-right:15px;
  &:after{
    content:"*";
    position:absolute;
    right:0;
    top:0;
    font-family:var(--font-family_6);
    color:var(--color_4);
    font-weight:700;
    font-size:18px;
  }
}
body.bdh-debug{
  .debug-only{
    visibility:visible;
  }
}
.right{
  float:right;
}

body{

  .flex-010{
    flex:0.10;
  }

  .flex-020{
    flex:0.20;
  }

  .flex-025{
    flex:0.25;
  }

  .flex-030{
    flex:0.30;
  }
  .flex-033{
    flex:0.333333;
  }
  .flex-040{
    flex:0.4;
  }
  .flex-050{
    flex:0.5;
  }
  .flex-060{
    flex:0.6;
  }
  .flex-066{
    flex:0.66666;
  }
  .flex-070{
    flex:0.7;
  }

  .flex-075{
    flex:0.75;
  }

  .flex-080{
    flex:0.8;
  }

  .flex-090{
    flex:0.9;
  }

  .flex-100{
    flex:1;
  }

}



body{
  .mgb-0{
    margin-bottom:0;
  }
  .mgb-2{
    margin-bottom:2px;  
  }
  .mgb-4{
    margin-bottom:4px;  
  }
  .mgb-6{
    margin-bottom:6px;  
  }
  .mgb-12{
    margin-bottom:12px;  
  }

  .mgb-16{
    margin-bottom:16px;
  }
   .mgb-24,.mgb-25{
    margin-bottom:24px;
  }
   .mgb-32{
    margin-bottom:32px;
  }
   .mgb-50{
    margin-bottom:50px;
  }
   .mgb-64,.mgb-75{
    margin-bottom:64px;
  }
   .mgb-100{
    margin-bottom:100px;
  }
}


body{
  .gap-0,.gap-2{
    gap:2px;
  }
  .gap-4{
    gap:4px;
  }

  .gap-5{
    gap:5px;
  }

  .gap-6{
    gap:6px;
  }

  .gap-10{
    gap:10px;
  }

  .gap-12{
    gap:12px;
  }

  .gap-14{
    gap:14px;
  }
  .gap-16{
    gap:16px;
  }
  .gap-20{
    gap:20px;
  }
  .gap-24{
    gap:24px;
  }
  .gap-32{
    gap:32px;
  }
}



body{

  .pad-2{
    padding:2px;
  }
  .pad-4{
    padding:4px;
  }

  .pad-5{
    padding:5px;
  }

  .pad-6{
    padding:6px;
  }

  .pad-10{
    padding:10px;
  }

  .pad-12{
    padding:12px;
  }

  .pad-14{
    padding:14px;
  }
  .pad-16{
    padding:16px;
  }
  .pad-20{
    padding:20px;
  }
  .pad-14{
    padding:24px;
  }
}

body{
  .aspect-1  {
    aspect-ratio:1;
  }
  .aspect-1_2  {
    aspect-ratio:1 / 2;
  }
  .aspect-1_3  {
    aspect-ratio:1 / 3;
  }
  .aspect-1_4  {
    aspect-ratio:1 / 4;
  }
  .aspect-1_5  {
    aspect-ratio:1 / 5;
  }
  .aspect-2_1  {
    aspect-ratio:2 / 1;
  }
  .aspect-3_1  {
    aspect-ratio:3 / 1;
  }
  .aspect-4_1  {
    aspect-ratio:4 / 1;
  }
  .aspect-4_3  {
    aspect-ratio:4 / 3;
  }
  .aspect-5_1  {
    aspect-ratio:5 / 1;
  }
  .aspect-5_2  {
    aspect-ratio:5 / 2;
  }
  .aspect-5_3  {
    aspect-ratio:5 / 3;
  }
  .aspect-5_4  {
    aspect-ratio:5 / 4;
  }

  .aspect-16_9  {
    aspect-ratio:16 / 9;
  }
  
   .aspect-24_9  {
    aspect-ratio:24 / 9;
  }
  
  
   .aspect-32_9  {
    aspect-ratio:32 / 9;
  }
  
    .aspect-48_9  {
    aspect-ratio:48 / 9;
  }
    .aspect-64_9  {
    aspect-ratio:64 / 9;
  }
  
  



}


body{
  .op-0{
    opacity:0;
  }
  .op-10{
    opacity:.1;
  }
  .op-20{
    opacity:.2;
  }
  .op-30{
    opacity:.3;
  }
  .op-40{
    opacity:.4;
  }
  .op-50{
    opacity:.5;
  }
  .op-60{
    opacity:.6;
  }
  .op-70{
    opacity:.7;
  }
  .op-80{
    opacity:.8;
  }
  .op-90{
    opacity:.9;
  }
}
.is-layout-flex.no-gap{
 gap:0; 
}  


figure.img-as-bg{
  margin:0;
  padding:0;
  position:relative;
  
  img{ 
    width:100%;
    height:100%;
    object-fit:cover

  }

}
.sicp-debug{
  position:relative;

  >div{
    font-family:courier;
    font-size:12px;
    color:red;
    padding:5px;
    background:#86c6f7;
    border:3px solid #1573bd;
    border-radius:5px;
  }

}

.d-50{
  width:50%;
}
.bdh-loading{
  .rotate-on-load{
    -webkit-animation:rotating 2s linear infinite;
    -moz-animation:rotating 2s linear infinite;
    -ms-animation:rotating 2s linear infinite;
    -o-animation:rotating 2s linear infinite;
    animation:rotating 2s linear infinite;
    color:var(--color_1);
  }
}
.rotate{
  -webkit-animation:rotating 2s linear infinite;
  -moz-animation:rotating 2s linear infinite;
  -ms-animation:rotating 2s linear infinite;
  -o-animation:rotating 2s linear infinite;
  animation:rotating 2s linear infinite;
  color:var(--color_1);
}
.dom-flex-wrap{
  flex-wrap:wrap;
}
.hide-element{
  display:none !important;
}
.bdh-i-wrap{
  input[type=password],input[type=text]{
    font-family:var(--font-family_7);
    font-size:1em;
    border:0;
    border-bottom:2px solid #666;
    background:rgba(177,188,176,.2);
    border-radius:3px 3px 0 0;
    padding:5px;
    line-height:25px;
    min-height:15px;
    height:24px;
  }
}
.bd-construction{
  border:1px solid orange;
  text-align:center;
  padding:10px;
  box-sizing:border-box;
  width:auto;
}
.bdh-debug{




  .bd-shortcode{
    box-shadow:0 0 1px 1px rgba(255,162,31,.4);
    &:hover{
      box-shadow:0 0 1px 1px rgba(255,162,31,.8);
      [data-view-id]{
        box-shadow:0 0 1px 1px rgba(0,172,250,0);
        &:hover{
          box-shadow:0 0 1px 1px #37acfa;
          background-color:var(--background-color_1);
        }
      }
      [data-row-id]{
        box-shadow:0 0 1px 1px rgba(0,172,250,0);
        &:hover{
          box-shadow:0 0 1px 1px rgba(0,172,250,.4);
          background-color:var(--background-color_1);
        }
      }
    }
    &:before{
      content:"Shortcode";
      position:absolute;
      right:-1px;
      bottom:-1px;
      opacity:.5;
      font-size:10px;
      padding:2px;
      line-height:12px;
      border:1px solid gray;
    }
  }
  .bdh-reload-area{
    position:relative;
    box-shadow:0 0 1px 1px rgba(33,162,231,.6);
    &:hover{
      box-shadow:0 0 1px 1px rgba(33,162,231,.8);

    }

  }


  .bd-active-component{
    box-shadow:0 0 1px 1px rgba(255,162,31,.4);
    box-shadow:0 0 1px 1px rgba(255,162,31,.8);
  }
  .bdh-debug-border{
    border:1px solid red;
    .bdh-debug-border{
      border-color:blue;
      border-style:solid;
      border-width:1px;
      .bdh-debug-border{
        border-color:green;
        border-style:solid;
        border-width:1px;
        .bdh-debug-border{
          border-color:cyan;
          border-style:solid;
          border-width:1px;
          .bdh-debug-border{
            border-color:#f0f;
            border-style:solid;
            border-width:1px;
            .bdh-debug-border{
              border-color:#ff0;
              border-style:solid;
              border-width:1px;
              .bdh-debug-border{
                border-color:purple;
                border-style:solid;
                border-width:1px;
              }
            }
          }
        }
      }
    }
  }
  .bd-construction.bd-active-component,.bd-shortcode.bd-construction{
    border:1px dashed orange;
    text-align:left;
  }
}
.bdh-debug-border{
  border:0 solid transparent;
}
html{
  >body{
    .bdh-debug-hide,.bdh-debug-show{
      display:none;
    }
  }
  >body.bdh-debug{
    .bdh-debug-hide,.bdh-debug-show{
      display:inherit;
    }
  }
  #wpadminbar{
    .material-icons{
      margin-top:5px;
      font-family:var(--font-family_2);
      font-weight:400;
      font-style:normal;
      font-size:20px;
      line-height:18px;
      overflow:hidden;
      letter-spacing:normal;
      text-transform:none;
      white-space:nowrap;
      word-wrap:normal;
      direction:ltr;
      -webkit-font-feature-settings:"liga";
      -webkit-font-smoothing:antialiased;
      transform:color .2s, opacity .3s;
    }
  }
}
.pre-e{
  background:rgba(0,0,0,.3);
  border-radius:4px;
  min-height:20px;
  flex:auto;
  margin:0 5px 5px 0;
}
#wpadminbar{
  #wp-admin-bar-helper-cheetah{
    .ab-item{
      padding:0;
    }
  }
  span.material-icons{
    margin-top:5px;
    font-family:var(--font-family_2);
    font-weight:400;
    font-style:normal;
    font-size:20px;
    line-height:18px;
    overflow:hidden;
    letter-spacing:normal;
    text-transform:none;
    white-space:nowrap;
    word-wrap:normal;
    direction:ltr;
    -webkit-font-feature-settings:"liga";
    -webkit-font-smoothing:antialiased;
    transform:color .2s, opacity .3s;
  }
}
button.bdh-button.bdh-icon.bdh-warn,button.bdh-button.bdh-warn{
  color:var(--color_7);
}
button.bdh-button.bdh-danger,button.bdh-button.bdh-icon.bdh-danger{
  color:var(--color_8);
}
button.bdh-button.bdh-icon.bdh-system,button.bdh-button.bdh-system{
  color:var(--color_9);
}
button.bdh-button.active{
  font-weight:700;
  opacity:1;
  background:#fff;
}
button.bdh-button.bdh-icon{
  border:0 solid transparent;
  background:transparent;
  margin:0 5px 0 0;
  padding:0;
  >span.material-icons{
    font-size:20px;
    opacity:.6;
    transition:all .2s;
    margin:0;
  }
  &:hover{
    >span.material-icons{
      opacity:1;
    }
  }
}
button.bdh-button.right{
  float:right;
}
button.bdh-button.bdh-icon.right{
  float:right;
  margin-bottom:0;
}
button.bdh-button.left{
  button.bdh-button.bdh-icon.left{
    float:left;
  }
  margin-bottom:0;
}
button.bdh-button.bdh-icon.left{
  margin-bottom:0;
}
.bdh-button.bdh-icon{
  >span.material-icons{
    font-size:20px;
    opacity:.6;
    transition:all .2s;
    margin:0;
  }
  &:hover{
    >span.material-icons{
      opacity:1;
    }
  }
}
button.bdh-button{
  >span.material-icons{
    font-size:20px;
    opacity:.6;
    transition:all .2s;
    margin:0 5px 0 0;
  }
  &:hover{
    opacity:1;
    outline-style:none;
    box-shadow:none;
    color:var(--color_12);
    >span.material-icons{
      opacity:1;
    }
  }
  display:flex;
  position:relative;
  float:left;
  width:auto;
  line-height:20px;
  outline:none;
  background:#aaa;
  padding:2px 5px;
  color:var(--color_10);
  transition:all .2s;
  &:focus{
    outline-style:none;
    box-shadow:none;
    color:var(--color_12);
  }
}
.pad-tl-5,button.bdh-button.bdh-icon.pad-tl-5{
  padding:5px 0 0 5px;
}
.wp-admin{
  button.bdh-button{
    background:#333;
    color:var(--color_11);
    color:var(--color_2);
    &:focus,&:hover{
      background:#5555;
      color:var(--color_2);
    }
  }
  button.bdh-button.bdh-icon{
    background:transparent;
    color:var(--color_11);
    &:focus{
      background:transparent;
      color:var(--color_2);
    }
  }
  .bdh-button{
    &:focus,&:hover{
      background:#5555;
      color:var(--color_2);
    }
  }
  a.bdh-button{
    &:focus,&:hover{
      background:#5555;
      color:var(--color_2);
    }
  }
  .bdh-button.bdh-icon{
    &:focus,&:hover{
      background:transparent;
      color:var(--color_2);
    }
  }
  a.bdh-button.bdh-icon{
    &:focus,&:hover{
      background:transparent;
      color:var(--color_2);
    }
  }
  button.bdh-button.bdh-icon.bdh-icon{
    &::hover{
      background:transparent;
      color:var(--color_2);
    }
  }
}
.bdh-button{
  &:focus,&:hover{
    outline-style:none;
    box-shadow:none;
    color:var(--color_12);
  }
}
a.bdh-button{
  &:focus,&:hover{
    outline-style:none;
    box-shadow:none;
    color:var(--color_12);
  }
}
.dark-mode{
  button.bdh-button{
    color:var(--color_2);
  }
  >span.material-icons,button.bdh-button.bdh-icon.active{
    color:var(--color_2);
    opacity:1;
  }
}
.bdh-render-json{
  display:none;
}
.json-formatter-row{
  text-transform:none;
  *{text-transform:none;
  }
  font-family:var(--font-family_8);
  color:var(--color_13);
  text-decoration:none;
  a{
    color:var(--color_13);
    text-decoration:none;
    &:hover{
      color:var(--color_13);
      text-decoration:none;
    }
  }
  .json-formatter-row{
    margin-left:1rem;
  }
  .json-formatter-children.json-formatter-empty{
    opacity:.5;
    margin-left:1rem;
    &:after{
      display:none;
    }
  }
  .json-formatter-children.json-formatter-empty.json-formatter-object{
    &:after{
      content:"No properties";
    }
  }
  .json-formatter-children.json-formatter-empty.json-formatter-array{
    &:after{
      content:"[]";
    }
  }
  .json-formatter-string,.json-formatter-stringifiable{
    color:var(--color_14);
    white-space:pre;
    word-wrap:break-word;
  }
  .json-formatter-number{
    color:var(--color_6);
  }
  .json-formatter-boolean{
    color:var(--color_4);
  }
  .json-formatter-null{
    color:var(--color_15);
  }
  .json-formatter-undefined{
    color:var(--color_16);
  }
  .json-formatter-function{
    color:var(--color_17);
  }
  .json-formatter-date{
    background-color:var(--background-color_2);
  }
  .json-formatter-url{
    text-decoration:underline;
    cursor:pointer;
  }
  .json-formatter-bracket,.json-formatter-url{
    color:var(--color_6);
  }
  .json-formatter-key{
    color:var(--color_18);
    padding-right:.2rem;
  }
  .json-formatter-toggler-link{
    cursor:pointer;
  }
  .json-formatter-toggler{
    line-height:1.2rem;
    font-size:.7rem;
    vertical-align:middle;
    opacity:.6;
    cursor:pointer;
    padding-right:.2rem;
    &:after{
      display:inline-block;
      transition:transform .1s ease-in;
      content:"►";
    }
  }
  >a{
    >.json-formatter-preview-text{
      opacity:0;
      transition:opacity .15s ease-in;
      font-style:italic;
    }
  }
  &:hover{
    >a{
      >.json-formatter-preview-text{
        opacity:.6;
      }
    }
  }
}
.json-formatter-row.json-formatter-open{
  >.json-formatter-toggler-link{
    .json-formatter-toggler{
      &:after{
        transform:rotate(90deg);
      }
    }
  }
  >.json-formatter-children{
    &:after{
      display:inline-block;
    }
  }
  >a{
    >.json-formatter-preview-text{
      display:none;
    }
  }
}
.json-formatter-row.json-formatter-open.json-formatter-empty{
  &:after{
    display:block;
  }
}
.json-formatter-dark.json-formatter-row{
  font-family:var(--font-family_8);
  color:var(--color_3);
  text-decoration:none;
  a{
    color:var(--color_3);
    text-decoration:none;
    &:hover{
      color:var(--color_3);
      text-decoration:none;
    }
  }
  .json-formatter-row{
    margin-left:1rem;
  }
  .json-formatter-children.json-formatter-empty{
    opacity:.5;
    margin-left:1rem;
    &:after{
      display:none;
    }
  }
  .json-formatter-children.json-formatter-empty.json-formatter-object{
    &:after{
      content:"No properties";
    }
  }
  .json-formatter-children.json-formatter-empty.json-formatter-array{
    &:after{
      content:"[]";
    }
  }
  .json-formatter-string,.json-formatter-stringifiable{
    color:var(--color_19);
    white-space:pre;
    word-wrap:break-word;
  }
  .json-formatter-number{
    color:var(--color_20);
  }
  .json-formatter-boolean{
    color:var(--color_21);
  }
  .json-formatter-null{
    color:var(--color_22);
  }
  .json-formatter-undefined{
    color:var(--color_23);
  }
  .json-formatter-function{
    color:var(--color_24);
  }
  .json-formatter-date{
    background-color:var(--background-color_3);
  }
  .json-formatter-url{
    text-decoration:underline;
    color:var(--color_25);
    cursor:pointer;
  }
  .json-formatter-bracket{
    color:var(--color_26);
  }
  .json-formatter-key{
    color:var(--color_27);
    padding-right:.2rem;
  }
  .json-formatter-toggler-link{
    cursor:pointer;
  }
  .json-formatter-toggler{
    line-height:1.2rem;
    font-size:.7rem;
    vertical-align:middle;
    opacity:.6;
    cursor:pointer;
    padding-right:.2rem;
    &:after{
      display:inline-block;
      transition:transform .1s ease-in;
      content:"►";
    }
  }
  >a{
    >.json-formatter-preview-text{
      opacity:0;
      transition:opacity .15s ease-in;
      font-style:italic;
    }
  }
  &:hover{
    >a{
      >.json-formatter-preview-text{
        opacity:.6;
      }
    }
  }
}
.json-formatter-dark.json-formatter-row.json-formatter-open{
  >.json-formatter-toggler-link{
    .json-formatter-toggler{
      &:after{
        transform:rotate(90deg);
      }
    }
  }
  >.json-formatter-children{
    &:after{
      display:inline-block;
    }
  }
  >a{
    >.json-formatter-preview-text{
      display:none;
    }
  }
}
.json-formatter-dark.json-formatter-row.json-formatter-open.json-formatter-empty{
  &:after{
    display:block;
  }
}

.dom-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);

  grid-auto-rows:minmax(50px, auto);
  >div.grid-item{
    border:1px solid #666;
    border-radius:3px;
    background:#333;
  }
}

.dom-grid-2-1,.dom-grid-2-2-1{
  display:grid;
  grid-template-columns:repeat(2, 1fr);

  grid-auto-rows:minmax(50px, auto);
}

.dom-grid-4-2,.dom-grid-4-2-1,.dom-grid-4-3-2{
  display:grid;
  grid-template-columns:repeat(4, 1fr);

  grid-auto-rows:minmax(50px, auto);
}
.dom-grid-6-3-2,.dom-grid-6-3-2-1{
  display:grid;
  grid-template-columns:repeat(6, 1fr);

  grid-auto-rows:minmax(50px, auto);
}
.dom-grid-8-4,.dom-grid-8-4-2,.dom-grid-8-4-2-1{
  display:grid;
  grid-template-columns:repeat(8, 1fr);

  grid-auto-rows:minmax(50px, auto);
}
.dom-aspect-1{
  --aspect-ratio:1;
}
.dom-grid-6{
  grid-template-columns:repeat(6, 1fr);
}

@media (max-width:var(--max-width )){
  .dom-grid-6-3-2-1{

    grid-template-columns:repeat(3, 1fr);

    grid-auto-rows:minmax(50px, auto);
  }

  .dom-grid-8-4,.dom-grid-8-4-2,.dom-grid-8-4-2-1{

    grid-template-columns:repeat(4, 1fr);

    grid-auto-rows:minmax(50px, auto);
  }

  .dom-grid-2-1{

    grid-template-columns:repeat(1, 1fr);

    grid-auto-rows:minmax(50px, auto);
  }
}

@media (max-width:var(--breakpoint-tablet )){
  .dom-grid-4-2-1,.dom-grid-6-3-2-1{

    grid-template-columns:repeat(2, 1fr);

    grid-auto-rows:minmax(50px, auto);
  }
  .dom-grid-6-3-2{

    grid-template-columns:repeat(3, 1fr);
  }

  .dom-grid-6-3-2,.dom-grid-8-4-2{

    grid-auto-rows:minmax(50px, auto);
  }

  .dom-grid-8-4-2{

    grid-template-columns:repeat(4, 1fr);
  }

  .dom-grid-8-4-2-1{

    grid-template-columns:repeat(2, 1fr);
  }
  .dom-grid-4-3-2,.dom-grid-8-4-2-1{

    grid-auto-rows:minmax(50px, auto);
  }
  .dom-grid-4-3-2{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
  }

  .dom-grid-4-2{

    grid-template-columns:repeat(2, 1fr);

    grid-auto-rows:minmax(50px, auto);
  }
  .flex-span{
    display:block;
  }
  .dom-flex.flex-t{
    flex-direction:column;
  }
  .d-50{
    width:100%;
  }
}

@media (max-width:var(--breakpoint-phone )){
  .dom-grid-4-3-2{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
  }
  .dom-grid-2-2-1,.dom-grid-4-3-2{

    grid-auto-rows:minmax(50px, auto);
  }
  .dom-grid-2-2-1{
    grid-template-columns:repeat(1, 1fr);
  }
  
  .dom-grid-6-3-2{

    grid-template-columns:repeat(2, 1fr);

    grid-auto-rows:minmax(50px, auto);
  }
  .dom-grid-4-2-1,.dom-grid-6-3-2-1{

    grid-template-columns:repeat(1, 1fr);

    grid-auto-rows:minmax(50px, auto);
  }
  .dom-grid-8-4-2{

    grid-template-columns:repeat(2, 1fr);
  }
  .dom-grid-8-4-2,.dom-grid-8-4-2-1{

    grid-auto-rows:minmax(50px, auto);
  }
  .dom-grid-8-4-2-1{

    grid-template-columns:repeat(1, 1fr);
  }
  .dom-flex.flex-r{
    flex-direction:column;
  }

}











.DialogView{
  .bdh-dialog-button{
   position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    min-width:100%;
    min-height:100%;
    background:rgba(0,0,0,.1);
    align-content:center;
    z-index:90000000;
    transition:none;
    align-items:center;
    justify-content:center;
  
    display:flex;
    
   box-sizing:border-box;
    &:hover{
      opacity:1;
      >span.material-icons{
        opacity:1;
      }
    }
    >span.material-icons{
      font-size:20px;
      opacity:.6;
      transition:all .2s;
      margin:0;
    }
  }
  .bdh-dialog-button.bdh-icon.pad-5{
    padding:5px;
  }
  .bdh-dialog-button.bdh-warn{
    color:var(--color_2);
  }
  .bdh-dialog-button.bdh-danger{
    color:var(--color_3);
  }
  .bdh-dialog-button.bdh-system{
    color:var(--color_4);
  }
  .bdh-dialog-button.active{
    font-weight:700;
    opacity:1;
  }
  .bdh-dialog-button.bdh-icon{
    border:0 solid transparent;
    background:#999;
    margin:0 5px 0 0;
    padding:0;
    >span{
      color:var(--color_5);
    }
  }
  button.bdh-button{
    color:#666;
  }
  .bdh-dialog-button.right{
    float:right;
    margin-bottom:0 0 0 16px;
  }
  .bdh-dialog-button.left{
    float:left;
  }
  .bdh-dialog-button.bdh-icon.pad-tl-5{
    padding:5px 0 0 5px;
  }
}

.wp-admin{
  .DialogView{
    .bdh-dialog-button{
      background:#333;
      color:var(--color_1);
    }
    .bdh-dialog-button.active{
      background:#fff;
    }
    button.bdh-button{
      color:var(--color_7);
    }
  }
  .DialogView.cdl-wrapper{
    position:fixed;
    background:rgba(0,0,0,.1);

    >.cdl-dialog{
      background:#111;
      color:var(--color_8);
      >.cdl-title{

        background:transparent;
        >.fa-times{
          &:hover{
            color:var(--color_8);
          }
        }
      }
      >.cdl-content-wrapper{
        >.cdl-content{
          height:100%;
          background:transparent;
        }
      }
      >.cdl-options{
        background:transparent;
      }
    }
  }
}


dialog[open]{
  opacity:1;
  transform:scale(1);
  transition:opacity .3s ease,transform .3s cubic-bezier(.34, 1.56, .64, 1),display allow-discrete .3s; 
}


@starting-style{
  dialog[open]{
    opacity:0;
    transform:scale(.9);
  }
}


dialog{
  opacity:0;
  transform:scale(.9);
  max-width:800px;
  width:100%;
  border:1px solid #000;
  transition:opacity .3s ease,transform .3s ease,display allow-discrete .3s;
  &.full{
    max-width:none;
    width:100%;

  }
}


dialog::backdrop{
  background-color:transparent;
  transition:display allow-discrete .3s,background-color .3s ease;
}

dialog[open]::backdrop{
  background-color:rgba(0,0,0,.5);
}

@starting-style{
  dialog[open]::backdrop{
    background-color:transparent;
  }
}


dialog.is-loading{
  pointer-events:none; 
  user-select:none;    
  cursor:wait;         
}


dialog.is-loading>div{
  opacity:.5;
  filter:grayscale(.5);
  transition:opacity .3s ease;
}


.DialogView.cdl-wrapper{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  min-width:100%;
  min-height:100%;
  border-top:0 solid #666;
  background:rgba(0,0,0,.1);
  z-index:90000000;
  transition:none;
  display:flex;
  align-items:center;
  align-content:center;
  
   &.full-width{
      max-width:100%;
      max-height:100%;
      overflow:hidden;
      box-sizing:border-box;
      padding:16px


    }

  

  .cdl-content{
    p,ul{
      margin-bottom:5px;
    }
    ul{
      list-style-type:circle;
      padding-inline-start:40px;
    }
  }
  
  >.cdl-block{
    position:absolute;
   
    top:0;
    left:0;
    width:100%;
    height:100%;
    max-height:100;
    overflow:hidden;
    transition:none;
    filter:blur(2px);
    -webkit-filter:blur(1px);
    backdrop-filter:blur(1px);
  }
  
  >.cdl-dialog{
    position:fixed;
    box-sizing:border-box;
    
    margin:auto;
    padding:24px;
    background:#fff;
    color:#333;
    border-radius:0;
    box-shadow:0 0 30px rgba(0,0,0,.6);
    display:flex;
    flex-direction:column;
    width:auto;
    

    >.cdl-title{
      border-bottom:0 #666;
      padding:17px 0 17px 16px;
      position:relative;
      font-weight:700;
      font-size:24px;
      background:transparent;
      >.cdl-title-text{
        line-height:20px;
      }
      >span.material-icons{
        font-size:16px;
        float:right;
      }
      .bdh-move{
        cursor:pointer;
        >span{ 
          color:#666;
          transition:all .2s;
          
        }
         >span:hover{ 
          color:#fff;

          
        }
      }
      >.fa-times{
        float:right;
        cursor:pointer;
        &:hover{
          color:var(--color_5);
        }
      }
      >.title-options{
        margin:0 10px 0 15px;
        gap:8px;
        .material-icons{
          font-size:25px;
        }
      }
      
    }
    >.cdl-content-wrapper{
      flex:1;
      position:relative;
      overflow:auto;
      padding:17px 15px;

      >.cdl-content{
        border-bottom:1px #666;
        padding:5px;
        font-size:16px;
        color:#dadada;
      }
    }
    
    >.cdl-options{
      display:block;
      position:relative;
      padding:17px 15px;
      bottom:0;
      left:0;
      width:100%;
      background:rgba(0,0,0,.1);
      box-sizing:border-box;
      
      
      button.bdh-button{
        background:#000;
        border-color:#666;
        border-style:solid;
        border-width:1px;
        padding:10px 16px;
        border-radius:15px;
         font-size:16px;
        transition:all .2s;
        margin:0 16px 0 0;
        cursor:pointer;
        
      }
      button.right{
        float:right;
        margin:0 0 0 16px;
      }
      
      button.bdh-button:hover{
        background:transparent;
        color:#fff;
      }
      
    }
  }
  >.cdl-dialog.small{
    min-width:250px;
    min-height:150px;
    min-width:450px;
    min-height:350px;
  }
  >.cdl-dialog.medium{
    min-width:450px;
    min-height:250px;
    min-width:25%;
    min-height:20%;
  }
  >.cdl-dialog.big{
    min-width:650px;
    min-height:350px;
    min-width:50%;
    min-height:40%;
  }
  >.cdl-dialog.full{
    flex:1;
    min-width:auto;
    min-height:auto;
    height:100%;
    width:100%%ial;

  }
}
.dark-mode{
  .DialogView.cdl-wrapper{
    >.cdl-dialog{
      color:var(--color_8);
     
    }
  }
}