:root {
    --primary-color: #0467A3;
    --secondary-color: #767676;
    --third-color: #000;
    --success-color: #3adb76;
    --warning-color: #ffae00;
    --alert-color: #cc4b37;
}

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    src: url(/Content/Font/Site.woff2) format("woff2");
}

body {
    /*background: #e6e6e6;*/
    background: #f5f5f5;
    font-family: "Open Sans","Helvetica Neue",Helvetica,Roboto,Arial,sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
    font-family: "Open Sans", "Helvetica Neue";
}

.top-bar, .top-bar ul {
    /*background-color: inherit;*/
}

.layout {
    padding-top: 2.5rem;
}

    .layout .large-centered {
        margin: 0 auto;
    }

    .layout .menu.vertical a {
        font-size: .875rem;
    }

.ellipsis {
    text-overflow: ellipsis;
    /* Required for text-overflow to do anything */
    white-space: nowrap;
    overflow: hidden;
}

.CodeMirror {
    font-size: 12px;
}

.CodeMirror-matchingtag {
    background: rgb(226,230,214);
}

.CodeMirror-activeline-background {
    background: transparent !important;
}

.CodeMirror-focused .CodeMirror-activeline-background {
    background: transparent;
    border-top: 1px solid rgb(226, 230, 214);
    border-bottom: 1px solid rgb(226, 230, 214);
}

.v-components-link {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: .75rem;
}

#panel-Y {
    position: relative;
    cursor: n-resize;
}

    #panel-Y:after {
        content: " ";
        position: absolute;
        left: 0;
        width: 100%;
        height: 36.38px;
        cursor: n-resize;
    }

#panel-X {
    background: rgba(0, 0, 0, 0.1);
    border-left: solid 0.25px #c6c6c6;
    border-right: solid 0.25px #c6c6c6;
    position: relative;
    width: 10px;
}

    #panel-X:after {
        content: " ";
        position: absolute;
        right: 0;
        width: 10px;
        height: 100%;
        cursor: e-resize;
        top: 0;
        z-index: 10;
    }


.v-top-bar-center {
    flex: 1 0 auto;
}

#v-bottom-status ul {
    background-color: var(--primary-color);
    color: #fff;
}

#v-bottom-status li {
    padding: .2rem 1rem;
    font-size: 12px;
    font-weight: lighter;
}

.cm-tab {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAACCAYAAACZgbYnAAAAEklEQVQImWOQkpLyZfD09PwPAAfYAnaStpHRAAAAAElFTkSuQmCC) right repeat-y;
}

.cm-mustache {
    /*color: #0ca;*/
    color: #000;
    font-weight: bold;
    /*color: #000;
    background: rgba(23, 121, 186, 0.2);*/
}

.rotate {
    -ms-transform: rotate(180deg); /* IE 9 */
    -webkit-transform: rotate(180deg); /* Safari 3-8 */
    transform: rotate(180deg);
}

.title-bar {
    padding-top: 0;
    padding-bottom: 0;
    /*background: #f7f7f7;*/
    /*background: #e6e6e6;*/
    background: #ffffff;
    color: #000;
    /*font-size: .8rem;*/
    border-bottom: solid 0.25px #c6c6c6;
}

.grid-x > a {
    color: inherit;
}

.card-show.card-hover {
    cursor: pointer;
}

.card-show:not(.card-hover) .shrink {
    display: none;
}

.card-show:hover .shrink {
    display: block;
}

.cell-block-container .title-bar .button.clear,
.cell-block-container .title-bar .button.clear:hover {
    background: #fff;
}

.cell-block-container .active {
    background: #1779ba;
}

.button-menu {
    background: inherit !important;
}

i.gml-arrow {
    border: solid #1779ba;
    border-width: 0 1px 1px 0;
    display: inline-block;
    padding: 3px;
    position: relative;
    top: -1px;
}

i.gml-arrow-down {
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}

/*Overwite base colors*/
button, .button {
    background-color: var(--primary-color);
}

    .button:hover, .button:focus {
        background-color: #03588b;
    }


/*Common layout*/
.l-container {
}

    .l-container .l-header {
        border-bottom: 1px solid rgba(23, 121, 186, 0.5);
        height: 2.5rem;
    }

        .l-container .l-header .l-header-left {
            border-right: 1px solid rgba(194, 196, 197, 1);
            background: #f5f5f5;
        }

    .l-container .l-main {
        /*border-bottom: 1px solid rgba(194, 196, 197, 1);*/
    }

        .l-container .l-main .l-main-left {
        }

            .l-container .l-main .l-main-left .exact-active,
            .l-container .l-main .l-main-left .active {
                background: rgba(13, 13, 13, 0.2);
            }

    .l-container .l-footer {
        border-top: 1px solid rgba(194, 196, 197, 1);
    }

        .l-container .l-footer .l-footer-left {
            /*border-right: 1px solid rgba(194, 196, 197, 1);*/
        }

            .l-container .l-footer .l-footer-left button,
            .l-container .l-footer .l-footer-left .button {
                margin-bottom: 0;
                background: transparent;
            }




.button-menu-tag.active + .button {
    background: rgba(13, 13, 13, 0.2);
}