:root {
  --x: 0.5;
  --y: 0.5;
}

iops-footer {
  margin-top: auto;
}

.is-hidden-desktop.is-hidden {
    display: none;
    animation-duration: 1s;
    animation-name: fade-out;
  }
.is-hidden-desktop.is-visible {
animation-duration: 1s;
animation-name: fade-in;
}
li.is-active {
    justify-content: center;
}
@keyframes fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fade-out {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

.ce-block__content {
    margin: inherit;
    max-width: fit-content;
}

.codex-editor {
    border: 1px;
    outline: 1px solid #DBDBDB;
}

.iops-notification {
    position: fixed;
    z-index: 2000;
    right: 0;
  }

.iops-progress {
    position: relative;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .console-background {
    background-image: linear-gradient(rgba(241, 239, 239, 0.8),rgba(241, 239, 239, 0.8)),url(/console/images/admin-background.jpg);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
  }

  .login-box {
      padding: 75px 20px;
  }
  
  .iops-has-navbar-fixed-top {
      margin-top: 3.5rem;
  }
  
  .iops-has-navbar-fixed-bottom {
      margin-bottom: 3.5rem;
  }
  
  .navbar.is-fixed-bottom {
    display: flex;
    align-content: center;
    justify-content: center;
  }

  .navbar.is-fixed-bottom .navbar-menu {
    flex-grow: initial;
    flex-shrink: initial;
}

  .image.iops-thumbnail img {
      max-width: 64px;
      max-height: 64px;
      object-fit: contain;
  }

  .image.proccesor-logo {
    margin-left: 0em;
    margin-bottom: 0em;
    text-align: left;
  }

  .image.proccesor-logo img {
      width: auto;
      height: auto;
      margin: 0px;
      object-fit: contain;
  }

  .iops-button:hover {
    cursor: pointer;
  }

  .iops-issuer-inactive {
    filter: blur(1px) grayscale(100%);
  }

/*
    Styles for page creation
*/
.component-list {
    background-color: #dedede;
    /* max-width: 75px !important; */
}

.pageContainer {
  min-height: 10em;
  flex: 0 0 50%;
  overflow: auto;
}

.workspace {
  height: 80vh;
  /* overflow: scroll; */
  padding: 0 2em;
}

.workspace .outer {
  display: flex;
  position: relative;
  /* overflow: hidden; */
  height: 100%;
}

.workspace .outer .left-side {
  flex: 0 0 5%;
  padding: 1em;
}

.left-side .columns .column {
  border: 1px dotted #fff;
}

.workspace .outer .center-panel {
  display: flex;
  /* overflow: auto; */
  width: 100%;
}

.workspace .outer .inner {
  flex: 0 0 100%;
  min-height: 10em;
  margin-top: 1em;
  display: flex;
}

.workspace .outer .inner figure {
  padding: 12px;
}

.properties-overlay {
  z-index: -100;
  width: 400px;
  height: 80vh;
  display: flex;
  justify-content: left;
  align-items: flex-start;
  overflow-y: scroll;
  position: absolute;
  top: 10vh;
  right: 0vw;
  transition: .5s;
  opacity: 0;
  /* background-color: hsl(0deg, 0%, 93%); */
}

.properties-overlay .panel-container,
.properties-overlay .panel-container .panel {
  width: 100%;
  height: 100%;
  background-color: hsl(0deg, 0%, 93%);
}

.properties-overlay.is-active {
  /* left: 50%; */
  /* right: -100%; */
  transform: translateX(-25%);
  z-index: 100;
  opacity: 1;
} 

.component-overlay {
  pointer-events: none;
}

.component-overlay.hidden {
  visibility: hidden;
  position: absolute;
  z-index: -10;
  top: var(0);
  left: var(0);
  /* width: 100%; */
  /* transition: opacity 0.25s; */
}

.component-overlay.visible {
  position: absolute;
  z-index: 1000;
  top: var(--y);
  /* top: 0.5; */
  left: var(--x);
  /* left: 0.5; */
  /* width: 100%; */
  background-color: hsl(150deg 30% 60% / 0.75);
  /* transition: opacity 0.25s; */
}

/* .component-overlay--blur {
  backdrop-filter: blur(5px);
}

.component-overlay:hover {
  opacity: 1;
} */

._old_dropzone {
  position: relative;
    background-color: #fff;
    border: dashed 2px transparent;
    border-color: #000;
    border-radius: 4px;
    margin: 10px 10px;
    padding: 10px;
    width: 100%;
    transition: background-color 0.3s;
  }

  .drop-active {
    border-color: #aaa;
  }
  
  .drop-target {
    background-color: #29e;
    border-color: #fff;
    border-style: solid;
  }
  
  
  .no-drop-target {
    background-color: #eca0ad;
    border-color: #fff;
    border-style: solid;
  }
  
  .drag-drop {
    display: inline-block;
  
    color: #fff;
    background-color: #29e;
    border: solid 2px #fff;
  
    touch-action: none;
    transform: translate(0px, 0px);
  
    transition: background-color 0.3s;
  }
  
  .drag-drop.can-drop {
    color: #000;
    background-color: #4e4;
  }

/* static label */
.ql-bulma-size .ql-picker-label:before {
  content: "Text Size";     /* never changes its content as this menu's label changes */
}

.ql-bulma-size .ql-picker-label {
  padding-right: 18px;
}

.ql-bulma-size .ql-picker-item:before {
  content: attr(data-value);
}

/* Let's highlight canvas boundaries */
#gjs {
  border: 3px solid #444;
}

/* Reset some default styling */
.gjs-cv-canvas {
  top: 0;
  width: 100%;
  height: 100%;
}

.gjs-block {
  width: auto;
  height: auto;
  min-height: auto;
}

.panel__top {
  padding: 0;
  width: 100%;
  display: flex;
  position: initial;
  justify-content: center;
  justify-content: space-between;
}

.panel__basic-actions {
  position: initial;
}

.editor-row {
  display: flex;
  justify-content: flex-start;
  align-items: stretch;
  flex-wrap: nowrap;
  height: 70vh;
}

.editor-canvas {
  flex-grow: 1;
}

.panel__right {
  flex-basis: 230px;
  position: relative;
  overflow-y: auto;
}

.panel__switcher {
  position: initial;
}

.panel__devices {
  position: initial;
}

.iops-asset-picker {
  height: 500px;
  overflow-x:hidden;
  overflow-y:auto;
}

.iops-asset-picker img {
  max-width: 128px;
  max-height: 128px;
  object-fit: contain;
}