/* Dark */
.joint-app.joint-theme-dark .app-title {
    background: #252525;
    box-shadow: inset -2px -1px 0px #333;
}

.joint-app.joint-theme-dark .inspector-container {
    background: #252525;
}

.joint-paper.joint-theme-dark .port-label {
    fill: #414042;
}

.joint-stencil.joint-theme-dark, .joint-stencil.joint-theme-dark .joint-paper {
    color: #feffff;
    background: #252525;
}

.joint-stencil.joint-theme-dark .joint-element.joint-type-uml rect,
.joint-stencil.joint-theme-dark .joint-element.joint-type-uml path {
    stroke: #252525;
}

.joint-select-box.joint-color-palette.joint-theme-dark .select-box-option:nth-child(2):not(.hover) {
    border: none;
}

@font-face {
    font-family: 'toolbar-icons-dark-kitchen-sink';
    src: url('./../assets/iconsdark.woff') format('woff');
}

@font-face {
    font-family: 'toolbar-icons-dark-kitchen-sink';
    src: url('./../assets/toolbar-icons-dark.woff') format('woff');
}

@font-face {
    font-family: 'toolbar-icons-dark-kitchen-sink';
    src: url('./../assets/fa-regular-400.woff') format('woff');
}

@font-face {
    font-family: 'toolbar-icons-dark-kitchen-sink';
    src: url('./../assets/toback.woff') format('woff');
}

.joint-widget.joint-theme-dark[data-name="background"]:after,
.joint-widget.joint-theme-dark[data-name="refresh"]:after,
.joint-widget.joint-theme-dark[data-name="save"]:after,
.joint-widget.joint-theme-dark[data-name="clear"]:after,
.joint-widget.joint-theme-dark[data-name="populate"]:after,
.joint-widget.joint-theme-dark[data-name="fullscreen1"]:after,
.joint-widget.joint-theme-dark[data-name="undo"]:after,
.joint-widget.joint-theme-dark[data-name="redo"]:after,
.joint-widget.joint-theme-dark[data-name="lock"]:after,
.joint-widget.joint-theme-dark[data-name="unlock"]:after,
.joint-widget.joint-theme-dark[data-name="tofront"]:after,
.joint-widget.joint-theme-dark[data-name="toback"]:after,
.joint-widget.joint-theme-dark[data-name="showstencil"]:after,
.joint-widget.joint-theme-dark[data-name="hidestencil"]:after,
.joint-widget.joint-theme-dark[data-name="showgrid"]:after,
.joint-widget.joint-theme-dark[data-name="hidegrid"]:after {
    font-family: "toolbar-icons-dark-kitchen-sink";
    font-style: normal;
    font-weight: normal;
    display: inline-block;
    margin: auto;
    text-align: center;
    font-variant: normal;
    text-transform: none;
    line-height: 1em;
    font-size: 22px;
}

.joint-widget.joint-theme-dark[data-name="clear"]:after {
    content: '\e850';
}

.joint-widget.joint-theme-dark[data-name="save"]:after {
    content: '\e900';
}

.joint-widget.joint-theme-dark[data-name="background"]:after {
    content: '\e903';
}

.joint-widget.joint-theme-dark[data-name="refresh"]:after {
    content: '\e904';
}

.joint-widget.joint-theme-dark[data-name="populate"]:after {
    content: '\e901';
}

.joint-widget.joint-theme-dark[data-name="fullscreen1"]:after {
    content: '\e902';
}

.joint-widget.joint-theme-dark[data-name="undo"]:after {
    content: '\f0e2';
}

.joint-widget.joint-theme-dark[data-name="redo"]:after {
    content: '\f01e';
}

.joint-widget.joint-theme-dark[data-name="lock"]:after {
    content: '\f023';
}

.joint-widget.joint-theme-dark[data-name="unlock"]:after {
    content: '\f09c';
}

.joint-widget.joint-theme-dark[data-name="tofront"]:after {
    content: '\ee40';
}

.joint-widget.joint-theme-dark[data-name="toback"]:after {
    content: '\ee3f';
}

.joint-widget.joint-theme-dark[data-name="showstencil"]:after {
    content: '\f067';
}

.joint-widget.joint-theme-dark[data-name="hidestencil"]:after {
    content: '\f067';
}

.joint-widget.joint-theme-dark[data-name="showgrid"]:after {
    content: '\f00a';
}

.joint-widget.joint-theme-dark[data-name="hidegrid"]:after {
    content: '\f00a';
}

@media screen and (max-width: 1390px) and (min-width: 1280px) {
    
    div[data-name="zoom-slider"] input,
    .joint-toolbar.joint-theme-dark label[data-name="zoom-slider-label"] {
        display: none;
    }

    .joint-app.joint-theme-dark .toolbar-container button[data-type="zoomIn"],
    .joint-app.joint-theme-dark .toolbar-container button[data-type="zoomOut"] {
        display: block;
    }
}

@media screen and (max-width: 1280px) {
    .joint-app.joint-theme-dark .toolbar-container {
        overflow-y: auto;
    }

    .joint-toolbar.joint-theme-dark {
        flex-wrap: wrap;
    }

    .joint-app.joint-theme-dark .app-title h1 {
        line-height: 92px;
    }

    .joint-app.joint-theme-dark .app-body {
        height: -moz-calc(100% - 92px);
        height: -webkit-calc(100% - 92px);
        height: calc(100% - 92px);
    }
}

/*  IE  */
@media screen and (max-width: 1390px) and (min-width: 0\0
) {
    .joint-toolbar.joint-theme-dark div[data-name="zoom-slider"] input,
    .joint-toolbar.joint-theme-dark label[data-name="zoom-slider-label"] {
        display: none;
    }

    .joint-app.joint-theme-dark .toolbar-container button[data-type="zoomIn"],
    .joint-app.joint-theme-dark .toolbar-container button[data-type="zoomOut"] {
        display: block;
    }
}

@media screen and (max-width: 1350px) and (min-width: 0\0
) {
    .joint-toolbar.joint-theme-dark div[data-name="zoom-slider"] input,
    .joint-toolbar.joint-theme-dark label[data-name="zoom-slider-label"] {
        display: inline-block;
    }

    .joint-app.joint-theme-dark .toolbar-container button[data-type="zoomIn"],
    .joint-app.joint-theme-dark .toolbar-container button[data-type="zoomOut"] {
        display: none;
    }

    .joint-app.joint-theme-dark .toolbar-container {
        overflow-y: auto;
    }

    .joint-toolbar.joint-theme-dark {
        flex-wrap: wrap; /*  IE 11 */
    }

    .joint-app.joint-theme-dark .app-title h1 {
        line-height: 92px;
    }

    .joint-app.joint-theme-dark .app-body {
        height: -moz-calc(100% - 92px);
        height: -webkit-calc(100% - 92px);
        height: calc(100% - 92px);
    }
}

.joint-tool.joint-theme-dark[data-tool-name="source-arrowhead"],
.joint-tool.joint-theme-dark[data-tool-name="target-arrowhead"],
.joint-tool.joint-theme-dark[data-tool-name="segments"] rect,
.joint-tool.joint-theme-dark[data-tool-name="vertices"] circle {
    fill: white;
    stroke: black;
}

.joint-tool.joint-theme-dark[data-tool-name="source-anchor"] rect,
.joint-tool.joint-theme-dark[data-tool-name="source-anchor"] rect {
    stroke: white;
}