.icon-add-comp::before, .icon-comp100::before, .icon-comp50::before, .icon-comp30::before, .icon-rm::before {
  content: "";
}

.icon-add-comp {
  background: url("./svg/icon-sq-a.svg") no-repeat center;
}

.icon-comp100 {
  background: url("./svg/icon-sq-1.svg") no-repeat center;
}

.icon-comp50 {
  background: url("./svg/icon-sq-2.svg") no-repeat center;
}

.icon-comp30 {
  background: url("./svg/icon-sq-3.svg") no-repeat center;
}

.icon-rm {
  background: url("./svg/icon-sq-r.svg") no-repeat center;
}

.icons-flex {
  background-size: 70% 65% !important;
  height: 15px;
  width: 17px;
  opacity: 0.9;
}

.icon-dir-row {
  background: url("./svg/flex-dir-row.svg") no-repeat center;
}

.icon-dir-row-rev {
  background: url("./svg/flex-dir-row-rev.svg") no-repeat center;
}

.icon-dir-col {
  background: url("./svg/flex-dir-col.svg") no-repeat center;
}

.icon-dir-col-rev {
  background: url("./svg/flex-dir-col-rev.svg") no-repeat center;
}

.icon-just-start {
  background: url("./svg/flex-just-start.svg") no-repeat center;
}

.icon-just-end {
  background: url("./svg/flex-just-end.svg") no-repeat center;
}

.icon-just-sp-bet {
  background: url("./svg/flex-just-sp-bet.svg") no-repeat center;
}

.icon-just-sp-ar {
  background: url("./svg/flex-just-sp-ar.svg") no-repeat center;
}

.icon-just-sp-cent {
  background: url("./svg/flex-just-sp-cent.svg") no-repeat center;
}

.icon-al-start {
  background: url("./svg/flex-al-start.svg") no-repeat center;
}

.icon-al-end {
  background: url("./svg/flex-al-end.svg") no-repeat center;
}

.icon-al-str {
  background: url("./svg/flex-al-str.svg") no-repeat center;
}

.icon-al-center {
  background: url("./svg/flex-al-center.svg") no-repeat center;
}

[data-tooltip]::after {
  background: rgba(51, 51, 51, 0.9);
}

.gjs-pn-commands {
  min-height: 40px;
}

#gjs-sm-float,
.gjs-pn-views .fa-cog {
  display: none;
}

.gjs-am-preview-cont {
  height: 100px;
  width: 100%;
}

.gjs-logo-version {
  background-color: #756467;
}

.gjs-pn-panel.gjs-pn-views {
  padding: 0;
  border-bottom: none;
}

.gjs-pn-btn.gjs-pn-active {
  box-shadow: none;
}

.gjs-pn-views .gjs-pn-btn {
  margin: 0;
  height: 40px;
  padding: 10px;
  width: 33.3333%;
  border-bottom: 2px solid rgba(0, 0, 0, 0.3);
}

.CodeMirror {
  min-height: 450px;
  margin-bottom: 8px;
}

.grp-handler-close {
  background-color: transparent;
  color: #ddd;
}

.grp-handler-cp-wrap {
  border-color: transparent;
}

:root {
  --theme-color:#41dad2;
}

.spinner-wrapper {
  transition: all ease 0.4s;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #ffffffd0;
}
.spinner-wrapper .spinner {
  margin-right: 10px;
  display: inline-block;
  width: 30px;
  height: 30px;
  border: 3px solid var(--theme-color);
  border-radius: 50%;
  border-top-color: transparent;
  animation: spin 1s linear infinite;
  -webkit-animation: spin 1s linear infinite;
}

.spinner-wrapper.hide {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-2000px);
}

@keyframes spin {
  to {
    -webkit-transform: rotate(360deg);
  }
}
@-webkit-keyframes spin {
  to {
    -webkit-transform: rotate(360deg);
  }
}
body,
html {
  height: 100%;
  margin: 0;
}

.fa::before {
  -webkit-text-stroke: 0.5px #fff;
}

.form-modal .gjs-mdl-dialog {
  max-width: 500px;
}

.btn {
  transition: all ease 0.3s;
  padding: 10px 30px;
  border: 1px solid transparent;
  background: #fff;
  box-shadow: 0 1px 10px #dddddd9c;
  border-radius: 4px;
}

.btn:hover {
  cursor: pointer;
  background: var(--theme-color);
  color: #fff;
  transform: translateY(-2px);
}

.required {
  color: red;
}

/* Generated by Glyphter (http://www.glyphter.com) on  Tue Mar 12 2019*/
@font-face {
  font-family: "Glyphter";
  src: url("./fonts/glypher/Glyphter.eot");
  src: url("./fonts/glypher/Glyphter.eot?#iefix") format("embedded-opentype"), url("./fonts/glypher/Glyphter.woff") format("woff"), url("./fonts/glypher/Glyphter.ttf") format("truetype"), url("./fonts/glypher/Glyphter.svg#Glyphter") format("svg");
  font-weight: normal;
  font-style: normal;
}
[class*=gly-]:before {
  font-size: 2em;
  line-height: 2em;
  padding: 11px;
  display: inline-block;
  font-family: "Glyphter";
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.gly-four-columns:before {
  content: "A";
}

.gly-four-eight:before {
  content: "B";
}

.gly-menu-bottom:before {
  content: "C";
}

.gly-menu-center:before {
  content: "D";
}

.gly-menu-left:before {
  content: "E";
}

.gly-menu-right:before {
  content: "F";
}

.gly-menu-top:before {
  content: "G";
}

.gly-one-column:before {
  content: "H";
}

.gly-three-columns:before {
  content: "I";
}

.gly-three-nine:before {
  content: "J";
}

.gly-two-columns:before {
  content: "K";
}

.gram-form .form-group label {
  display: block;
}

.gram-form .form-control {
  width: 100%;
  clear: both;
  margin: 10px 0 10px;
}

.gram-form input.form-control {
  height: 30px;
  border: 1px solid #ddd;
}

.gram-form textarea.form-control {
  min-height: 60px;
  border: 1px solid #ddd;
}

.gram-form h4 {
  margin: 10px 0;
}

.hide {
  display: none;
}

.gram-form .existing-sites,
.gram-form .deploy-btn {
  margin-top: 20px;
}

.gram-form textarea.form-control:active,
.gram-form textarea.form-control:focus,
.gram-form input.form-control:active,
.gram-form input.form-control:focus {
  box-shadow: none;
  border: none;
  outline: none;
  border: 1px solid var(--theme-color);
}

/** Modal Message **/
.modal-message p.msg-success {
  font-size: 0.85rem;
  padding: 10px;
  background: var(--theme-color);
  color: #fff;
}

.modal-message p.msg-error {
  padding: 10px;
  background: #ffa5a5;
  color: #fff;
}

.modal-message p.msg-success span.fa {
  background: #fff;
  padding: 2px;
  float: right;
  color: #444;
}

.modal-message p.msg-success span.fa:hover {
  cursor: pointer;
}

.existing-sites ul {
  padding: 0;
  list-style: none;
}

.existing-sites ul li {
  background: #fff;
  padding: 4px;
  margin: 4px 0 4px;
  transition: all ease 0.4s;
  border: 2px solid transparent;
}

.existing-sites ul li.active {
  border: 2px solid var(--theme-color);
}

.existing-sites ul li input {
  margin-right: 10px;
}

.existing-sites ul li span.fa-trash {
  float: right;
  padding: 2px;
  color: var(--theme-color);
  border: 1px solid var(--theme-color);
}

.existing-sites ul li span.fa-trash:hover {
  cursor: pointer;
}

.gram-form .export-btn,
.gram-form .deploy-btn {
  margin-bottom: 20px;
}

.deploy-result {
  word-break: break-word;
}

/* Overwrite GrapeJS css */
.gjs-cm-editor#gjs-cm-css #gjs-cm-title,
.gjs-cm-editor#gjs-cm-htmlmixed #gjs-cm-title,
.gjs-two-color,
.gjs-four-color,
.gjs-color-warn, .gjs-sm-sector .gjs-sm-field input, .gjs-clm-tags .gjs-sm-field input, .gjs-sm-sector .gjs-clm-field input, .gjs-clm-tags .gjs-clm-field input, .gjs-sm-sector .gjs-sm-field select, .gjs-clm-tags .gjs-sm-field select, .gjs-sm-sector .gjs-clm-field select, .gjs-clm-tags .gjs-clm-field select {
  color: #464973;
}

.gjs-one-bg {
  background-color: #f6f7f9;
}

.gjs-block:hover {
  box-shadow: 0 3px 4px 0 rgba(204, 210, 251, 0.42);
}

.gjs-category-title,
.gjs-sm-sector .gjs-sm-title,
.gjs-clm-tags .gjs-sm-title,
.gjs-block-category .gjs-title,
.gjs-layer-title {
  background-color: #eee;
  border-bottom: 1px solid rgba(121, 121, 121, 0.25);
}

/* text editor color */
.gjs-cm-editor #gjs-cm-title {
  background-color: rgba(164, 190, 241, 0.2);
}

.cm-s-hopscotch.CodeMirror {
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#2f3c54+0,414251+100 */
  background: #2f3c54;
  /* Old browsers */
  /* FF3.6-15 */
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(135deg, #2f3c54 0%, #414251 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#2f3c54", endColorstr="#414251", GradientType=1);
  /* IE6-9 fallback on horizontal gradient */
  color: #999;
}

.cm-s-hopscotch .CodeMirror-gutters {
  background: #232c3c;
}

/* class name */
.gjs-clm-tags #gjs-clm-close,
.gjs-clm-tags #gjs-clm-checkbox {
  color: #444;
}

.gjs-three-bg {
  background-color: #f6f7f9;
}

/* select box */
.gjs-field-arrow-u {
  border-bottom: 4px solid #444;
}

.gjs-field-arrow-d {
  border-top: 4px solid #444;
}

.gjs-field .gjs-d-s-arrow {
  border-top: 4px solid #444444;
}

.gjs-pn-btn.fa:before,
.gjs-block.fa:before {
  color: #262c42;
}

.gjs-block {
  background: #fff;
}

.gjs-blocks-c {
  padding-bottom: 6px;
}

.gjs-field select.gjs-devices {
  padding: 2px;
}

.gjs-color-warn,
.gjs-sm-sector .gjs-sm-field input,
.gjs-clm-tags .gjs-sm-field input,
.gjs-sm-sector .gjs-clm-field input,
.gjs-clm-tags .gjs-clm-field input,
.gjs-sm-sector .gjs-sm-field select,
.gjs-clm-tags .gjs-sm-field select,
.gjs-sm-sector .gjs-clm-field select,
.gjs-clm-tags .gjs-clm-field select {
  color: #000;
}

#gjs-mdl-c .header-menus {
  justify-content: space-between;
  display: flex;
  align-items: center;
}

label.gjs-import-file {
  padding: 10px 30px;
  border: 1px dashed #ddd;
  font-size: 13px;
  background: #fff;
}

label.gjs-import-file:hover {
  cursor: pointer;
  border-color: var(--theme-color);
}

.CodeMirror {
  height: 400px;
}

button.exportgram {
  margin-left: 10px;
  padding: 4px 10px;
  background: #444;
  color: #fff;
  border-radius: 20px;
}

.html-wrapper,
.css-wrapper {
  width: 49%;
  float: left;
}

.html-wrapper h4,
.css-wrapper h4 {
  margin: 4px 0 4px;
}

.gjs-mdl-dialog {
  max-width: none;
}

.clear-fix {
  width: 100%;
  clear: both;
}

.css-wrapper {
  margin-left: 2%;
}

.gjs-sm-sectors .gjs-radio-items .gjs-radio-item {
  background: #585858;
}

label.gjs-radio-item-label,
.gjs-sm-sectors .gjs-radio-item .fa {
  color: #fff;
}

.gjs-four-color-h:hover {
  color: var(--theme-color);
}

.iframe-wrapper {
  padding-bottom: 30px;
}