* {
  color: #333!important; 
}
body {
  margin: 0;
  color: #333!important;
  overflow: hidden;
}
.gjs-pn-views-container {
  height: calc(100vh - 60px)!important;
  padding: 42px 0 0;
  right: 0;
  width: 25%!important;
  overflow: auto;
  box-shadow: 0 0 5px rgb(0 0 0 / 7%)!important;
  top: 60px!important;
}
.gjs-pn-views {
  border-bottom: 0.05px solid rgb(0 0 0 / 7%)!important;
  right: 0;
  width: 25%!important;
  z-index: 4;
}

.gjs-color-main, .gjs-sm-sector .gjs-sm-stack #gjs-sm-add, .gjs-clm-tags .gjs-sm-stack #gjs-sm-add, .gjs-off-prv {
  fill: transparent;
  border-radius: 100%;
  width: 30px;
  height: 30px;
}
.gjs-pn-btn {
  box-sizing: border-box;
  min-height: 30px;
  min-width: 30px;
  line-height: 42px!important;
  border: none;
  font-size: 18px;
  margin-right: 5px;
  padding: 4px;
  position: relative;
  cursor: pointer;
  background-color: #e7eaed!important;
  width: 50px!important;
  height: 50px!important;
  border-radius: 5px!important;
}
.gjs-off-prv {
  position: absolute;
  z-index: 10;
  cursor: pointer;
  left: 10px;
  top: 10px;
}

.fa-eye-slash {
  font-size: 32px!important;
  color: #849ba659!important;
}

.gjs-frame {
  outline: medium none;
  height: 80%!important;
  width: 50%!important;
  border: none;
  margin: auto;
  display: block;
  transition: width .35s ease,height .35s ease;
  position: absolute;
  bottom:auto!important;
  top: 0;
  left: 0;
  right: 0;
}


.panel__basic-actions {
  position: initial;
}
#gjs {
  border: 0px solid #e7eaed;
}
.gjs-pn-views {
  border-bottom: 0.05px solid rgb(0 0 0 / 9%);
  right: 0;
  width: 25%;
  z-index: 4;
  height: 61px!important;
}
.gjs-three-bg {
  background-color: #dee0e4!important;
}

.gjs-field {
  background-color: #e7eaed!important;
  border: none;
  box-shadow: none;
  border-radius: 2px;
  box-sizing: border-box;
  padding: 0;
  position: relative;
}

.gjs-category-title, .gjs-layer-title, .gjs-block-category .gjs-title, .gjs-sm-sector .gjs-sm-title, .gjs-clm-tags .gjs-sm-title {
  font-weight: lighter;
  background-color: #e7eaed!important;
  letter-spacing: 1px;
  padding: 9px 10px 9px 20px;
  border-bottom: 0.5px solid rgb(0 0 0 / 8%)!important;
  text-align: left;
  position: relative;
  cursor: pointer;
}

.gjs-cv-canvas {
 background-color:#e7eaed!important;
 /*
 background-image:  url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAYAAABV7bNHAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpFRjNFMzJDM0IyNURFMjExQTQ5Nzg0NDU1RjcxQ0I5NiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpENjY1RjQ3NzVEQjIxMUUyQjJERTgyREM1RTk4RjcyNSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpENjY1RjQ3NjVEQjIxMUUyQjJERTgyREM1RTk4RjcyNSIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1LjEgV2luZG93cyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkVGM0UzMkMzQjI1REUyMTFBNDk3ODQ0NTVGNzFDQjk2IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkVGM0UzMkMzQjI1REUyMTFBNDk3ODQ0NTVGNzFDQjk2Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+pZE7iQAAAL5JREFUeNrs1rGthDAQRdEZRBW0Qf/1UIYREgECyyZBBD5P2uAvPzranb0ZEWtYcz2gZeTnk89He/P1j1LK4x8ys/r+KM99gjoDBAjQp8vzZ35D8aKDjmt+fx2dUHt/lOe+Ym4QIECAAOkgHaSDzA0CBAgQIB2kg3SQuUGAAAECpIN0kA4yQIAAAQKkg3SQDnKDDBAgQIB0kA7SQW6QAQIECJAO0kE6yA0yQIAAAdJBOkgHuUGADBAgQH9sF2AAjn/gJpFLwPMAAAAASUVORK5CYII=');
*/

  width: 100%;
  height: 100%;

}
.gjs-block {
  margin-left: 5px;
  width: auto;
  height: auto;
  min-height: auto; 
}

.gjs-one-bg{
  background-color: white!important;
  color: black;
  
}
.gjs-pn-buttons {
  align-items: center;
  display: flex;
  justify-content: space-between;
  position: relative;
  width: 100%;
 
}

.gjs-sm-sector .gjs-sm-field.gjs-sm-composite, .gjs-clm-tags .gjs-sm-field.gjs-sm-composite, .gjs-sm-sector .gjs-sm-composite.gjs-clm-select, .gjs-clm-tags .gjs-sm-composite.gjs-clm-select, .gjs-sm-sector .gjs-sm-composite.gjs-clm-field, .gjs-clm-tags .gjs-sm-composite.gjs-clm-field {
  background-color: rgb(231 234 237);
  border: 1px solid rgb(173 202 211 / 25%);
}

.gjs-block {
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
  width: 45%;
  min-width: 45px;
  padding: 1em;
  box-sizing: border-box;
  min-height: 90px;
  cursor: all-scroll;
  font-size: 11px;
  font-weight: lighter;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: none!important;
  border-radius: 3px;
  margin: 10px 2.5% 5px;
  box-shadow: 1px 1px 5px 1px #8492a64a!important;
  transition: all .2s ease 0s;
  transition-property: box-shadow,color;
}
#gjs > div.gjs-editor.gjs-one-bg.gjs-two-color > div.gjs-pn-panels > div.gjs-pn-panel.gjs-pn-commands.gjs-one-bg.gjs-two-color > div > span{display:none!important}
#gjs > div.gjs-editor.gjs-one-bg.gjs-two-color > div.gjs-pn-panels > div.gjs-pn-panel.gjs-pn-options.gjs-one-bg.gjs-two-color > div{right:10vw}
.gjs-pn-views-container {
  padding: 42px 0 0;
  right: 0;
  width: 25%;
  overflow: auto;
}

.gjs-pn-btn.gjs-pn-active {
  background-color: #b4d7f8!important;
  border: none!important;
}
.gjs-pn-btn {
  box-sizing: border-box;
  min-height: 30px;
  min-width: 30px;
  line-height: 42px;
  background-color: #e7eaed;
  border: none;
  font-size: 18px;
  margin-right: 5px;
  padding: 4px;
  position: relative;
  cursor: pointer;
}

#gjs > div.gjs-editor.gjs-one-bg.gjs-two-color > div.gjs-pn-panels > div.gjs-pn-panel.gjs-pn-views.gjs-one-bg.gjs-two-color > div > span.gjs-pn-btn.fa.fa-cog {
  border-radius: 100%!important;
  width: 55px!important;
  height: 50px!important;
  padding: 5px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  align-items: center;
}
#gjs > div.gjs-editor.gjs-one-bg.gjs-two-color > div.gjs-pn-panels > div.gjs-pn-panel.gjs-pn-views.gjs-one-bg.gjs-two-color > div > span.gjs-pn-btn.fa.fa-th-large{
  border-radius: 100%!important;
  width: 55px!important;
  height: 50px!important;
  padding: 5px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  align-items: center;}

#gjs > div.gjs-editor.gjs-one-bg.gjs-two-color > div.gjs-pn-panels > div.gjs-pn-panel.gjs-pn-views.gjs-one-bg.gjs-two-color > div > span.gjs-pn-btn.fa.fa-bars{
  border-radius: 100%!important;
  width: 55px!important;
  height: 50px!important;
  padding: 5px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  align-items: center;}

#gjs > div.gjs-editor.gjs-one-bg.gjs-two-color > div.gjs-pn-panels > div.gjs-pn-panel.gjs-pn-views.gjs-one-bg.gjs-two-color > div > span.gjs-pn-btn.fa.fa-cog{
  border-radius: 100%!important;
  width: 55px!important;
  height: 50px!important;
  padding: 5px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  align-items: center;}

#gjs > div.gjs-editor.gjs-one-bg.gjs-two-color > div.gjs-pn-panels > div.gjs-pn-panel.gjs-pn-views.gjs-one-bg.gjs-two-color > div > span.gjs-pn-btn.fa.fa-paint-brush.gjs-pn-active.gjs-four-color{
  border-radius: 100%!important;
  width: 55px!important;
  height: 50px!important;
  padding: 5px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  align-items: center;}
.gjs-pn-commands {
  width: 85%;
  left: 0;
  top: 0;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.09);
  height: 60px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  align-items: center;
}

.gjs-pn-btn  {
  color: #333!important;
}
.gjs-devices {
 
  background-color: black!important;
}
.gjs-pn-panel gjs-pn-commands gjs-one-bg gjs-two-color {
  background-color: black!important;
}
.gjs-pn-btn.gjs-pn-active {
  
  background-color: white!important;
  box-shadow: none!important;
}
.gjs-mdl-title{
  
  color: black!important;
}
.gjs-device-label {
  color: black!important;
}
.gjs-devices-c{
  display: none!important;
  
  
}
.gjs-four-color {
  
  color: #1e88e5!important;
}
.gjs-clm-tag {
  background-color: #dee0e4!important;
}




.gjs-frame-wrapper {
  margin-top: 50px!important;
  margin-bottom: 50px!important;
}
.gjs-sm-sectors {
  background-color: #f1f1f1!important;
}
.gjs-off-prv {
  padding: 20px!important;
  background-color: #dee0e4!important;
  
}
.fa-eye-slash {
  font-size: 32px!important;
  color: white!important;
  
}
.cm-s-hopscotch.CodeMirror {
    background: #fff!important;
    
}
.gjs-cm-editor #gjs-cm-title {
  background-color: #eee;
  font-size: 12px;
  padding: 5px 10px 3px;
  text-align: right;
}

.CodeMirror {
  font-family: monospace;
  height: 300px;
  color: #0076ff;
  direction: ltr;
}