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

.icon-add-comp {
    background: url(svg/icon-sq-a.svg) no-repeat 50%
}

.icon-comp100 {
    background: url(svg/icon-sq-1.svg) no-repeat 50%
}

.icon-comp50 {
    background: url(svg/icon-sq-2.svg) no-repeat 50%
}

.icon-comp30 {
    background: url(svg/icon-sq-3.svg) no-repeat 50%
}

.icon-rm {
    background: url(svg/icon-sq-r.svg) no-repeat 50%
}

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

.icon-dir-row {
    background: url(svg/flex-dir-row.svg) no-repeat 50%
}

.icon-dir-row-rev {
    background: url(svg/flex-dir-row-rev.svg) no-repeat 50%
}

.icon-dir-col {
    background: url(svg/flex-dir-col.svg) no-repeat 50%
}

.icon-dir-col-rev {
    background: url(svg/flex-dir-col-rev.svg) no-repeat 50%
}

.icon-just-start {
    background: url(svg/flex-just-start.svg) no-repeat 50%
}

.icon-just-end {
    background: url(svg/flex-just-end.svg) no-repeat 50%
}

.icon-just-sp-bet {
    background: url(svg/flex-just-sp-bet.svg) no-repeat 50%
}

.icon-just-sp-ar {
    background: url(svg/flex-just-sp-ar.svg) no-repeat 50%
}

.icon-just-sp-cent {
    background: url(svg/flex-just-sp-cent.svg) no-repeat 50%
}

.icon-al-start {
    background: url(svg/flex-al-start.svg) no-repeat 50%
}

.icon-al-end {
    background: url(svg/flex-al-end.svg) no-repeat 50%
}

.icon-al-str {
    background: url(svg/flex-al-str.svg) no-repeat 50%
}

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

[data-tooltip]:after {
    background: rgba(51,51,51,.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 {
    border-bottom: none;
    padding: 0
}

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

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

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

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

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

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

.spinner-wrapper {
    align-items: center;
    background: #ffffffd0;
    display: flex;
    height: 100%;
    justify-content: center;
    left: 0;
    position: fixed;
    top: 0;
    transition: all .4s ease;
    width: 100%;
    z-index: 999
}

    .spinner-wrapper .spinner {
        animation: spin 1s linear infinite;
        -webkit-animation: spin 1s linear infinite;
        border: 3px solid var(--theme-color);
        border-radius: 50%;
        border-top: 3px solid transparent;
        display: inline-block;
        height: 30px;
        margin-right: 10px;
        width: 30px
    }

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

@keyframes spin {
    to {
        -webkit-transform: rotate(1turn)
    }
}

@-webkit-keyframes spin {
    to {
        -webkit-transform: rotate(1turn)
    }
}

body, html {
    height: 100%;
    margin: 0
}

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

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

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

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

.required {
    color: red
}

@font-face {
    font-family: Glyphter;
    font-style: normal;
    font-weight: 400;
    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")
}

[class*=gly-]:before {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: inline-block;
    font-family: Glyphter;
    font-size: 2em;
    font-style: normal;
    font-weight: 400;
    line-height: 2em;
    line-height: 1;
    padding: 11px
}

.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 {
    clear: both;
    margin: 10px 0;
    width: 100%
}

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

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

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

.hide {
    display: none
}

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

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

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

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

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

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

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

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

        .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 {
            border: 1px solid var(--theme-color);
            color: var(--theme-color);
            float: right;
            padding: 2px
        }

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

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

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

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

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

.gjs-block-category .gjs-title, .gjs-category-title, .gjs-clm-tags .gjs-sm-title, .gjs-layer-title, .gjs-sm-sector .gjs-sm-title {
    background-color: #eee;
    border-bottom: 1px solid hsla(0,0%,47%,.25)
}

.gjs-cm-editor #gjs-cm-title {
    background-color: rgba(164,190,241,.2)
}

.cm-s-hopscotch.CodeMirror {
    background: #2f3c54;
    background: linear-gradient(135deg,#2f3c54,#414251);
    color: #999;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#2f3c54",endColorstr="#414251",GradientType=1)
}

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

.gjs-clm-tags #gjs-clm-checkbox, .gjs-clm-tags #gjs-clm-close {
    color: #444
}

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

.gjs-field-arrow-u {
    border-bottom: 4px solid #444
}

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

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

.gjs-block {
    background: #fff
}

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

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

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

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

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

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

.CodeMirror {
    height: 400px
}

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

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

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

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

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

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

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

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

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

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