/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : Aug 3, 2013, 12:07:42 AM
    Author     : alo
*/

.sct-primitive-concept
{
    position: relative;
    border: 2px solid #333;
    background-color: #99ccff;
    padding: 10px;
    text-align: left;
    display: inline-block;
    border-radius: 0px;
    font-family: Helvetica, Arial, Sans-Serif;
    font-size: small;
    /* max-width:250px; */
    /* word-wrap:break-word; */
    /* word-break:normal; */
}

.sct-defined-concept
{
    position: relative;
    border: 1px solid #333;
    background-color: #ccccff;
    padding: 10px;
    text-align: left;
    display: inline-block;
    border-radius: 0px;
    font-family: Helvetica, Arial, Sans-Serif;
    font-size: small;
    /* max-width:250px; */
    /* word-wrap:break-word; */
    box-shadow:
        0 0 0 2px hsl(0, 0%, 80%),
        0 0 0 3px #333;
}

.sct-property-value
{
    position: relative;
    border: 2px solid #333;
    background-color: #2aca76;
    padding: 10px;
    text-align: left;
    display: inline-block;
    border-radius: 0px;
    font-family: Helvetica, Arial, Sans-Serif;
    font-size: small;
    /* max-width:250px; */
    /* word-wrap:break-word; */
    /* word-break:normal; */
}

.sct-attribute
{
    position: relative;
    border: 1px solid #333;
    background-color: #ffffcc;
    padding: 10px;
    text-align: left;
    display: inline-block;
    border-radius: 25px;
    font-family: Helvetica, Arial, Sans-Serif;
    font-size: small;
    /* max-width:250px;  */
    /* word-wrap:break-word; */
    box-shadow:
        0 0 0 2px hsl(0, 0%, 80%),
        0 0 0 3px #333;
}

.sct-primitive-concept-compact
{
    position: relative;
    border: 2px solid #333;
    background-color: #99ccff;
    padding: 3px;
    margin: 5px;
    text-align: left;
    display: inline-block;
    border-radius: 0px;
    font-family: Helvetica, Arial, Sans-Serif;
    font-size: small;
    /* max-width:250px; */
    /* word-wrap:break-word; */
    /* word-break:normal; */
}

.sct-defined-concept-compact
{
    position: relative;
    border: 1px solid #333;
    background-color: #ccccff;
    padding: 3px;
    margin: 5px;
    text-align: left;
    display: inline-block;
    border-radius: 0px;
    font-family: Helvetica, Arial, Sans-Serif;
    font-size: small;
    /* max-width:250px; */
    /* word-wrap:break-word; */
    box-shadow:
        0 0 0 2px hsl(0, 0%, 80%),
        0 0 0 3px #333;
}

.sct-attribute-compact
{
    position: relative;
    border: 1px solid #333;
    background-color: #ffffcc;
    padding: 3px;
    margin: 5px;
    text-align: left;
    display: inline-block;
    border-radius: 25px;
    font-family: Helvetica, Arial, Sans-Serif;
    font-size: small;
    /* max-width:250px;  */
    /* word-wrap:break-word; */
    box-shadow:
        0 0 0 2px hsl(0, 0%, 80%),
        0 0 0 3px #333;
}

.sct-slot
{
    position: relative;
    border: 2px solid #333;
    background-color: #ff9999;
    padding: 10px;
    text-align: left;
    display: inline-block;
    border-radius: 0px;
    font-family: Helvetica, Arial, Sans-Serif;
    font-size: small;
    /* max-width:250px;  */
    /* word-wrap:break-word; */
    -moz-transform: skewX(-15deg);
    -webkit-transform: skewX(-15deg);
    -o-transform: skewX(-15deg);
    -ms-transform: skewX(-15deg);
    transform: skewX(-15deg);
}

.sct-slot-straighten-text {
    -moz-transform: skewX(15deg);
    -webkit-transform: skewX(15deg);
    -o-transform: skewX(15deg);
    -ms-transform: skewX(15deg);
    transform: skewX(15deg);
}


/* Zoom control on the diagram toolbar. One segmented pill for the two steps and the level
   between them, and the reset on a pill of its own: it is a jump rather than a step, and
   sitting inside the same group it read as a third step. */
.sct-diagram-zoom {
    display: inline-flex;
    align-items: center;
    margin-left: 16px;
}

.sct-diagram-zoom-group {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid #dfe3e8;
    border-radius: 6px;
    background: #ffffff;
    overflow: hidden;
}

/* The background and border are cleared rather than left to the user agent: these are <button>
   elements so that they are reachable from the keyboard, and a bare button draws itself as a
   raised grey box in every browser. */
.sct-diagram-zoom-btn {
    border: 0;
    background: transparent;
    color: #6b7785;
    padding: 2px 9px;
    font-size: 12px;
    line-height: 18px;
    -webkit-transition: background-color .12s ease, color .12s ease;
    transition: background-color .12s ease, color .12s ease;
}

.sct-diagram-zoom-btn:hover,
.sct-diagram-zoom-btn:focus {
    background: #f2f4f7;
    color: #2f3b47;
    outline: none;
}

.sct-diagram-zoom-btn:active {
    background: #e7ebf0;
}

.sct-diagram-zoom-level {
    min-width: 46px;
    padding: 2px 4px;
    text-align: center;
    font-size: 11px;
    line-height: 18px;
    color: #6b7785;
    border-left: 1px solid #eceff3;
    border-right: 1px solid #eceff3;
    /* Figures of one width, so the number does not shift the two buttons apart on the way
       from 90% to 100%. */
    -moz-font-feature-settings: "tnum";
    -webkit-font-feature-settings: "tnum";
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
}

.sct-diagram-zoom-reset {
    margin-left: 6px;
    border: 1px solid #dfe3e8;
    border-radius: 6px;
    background: #ffffff;
}

/* The diagram is dragged to move it: horizontally inside its own container, vertically by
   whichever pane the tab is sitting in. The cursor is offered only while one of the two has
   somewhere to go, so a diagram that already fits does not promise a move that does nothing. */
.sct-diagram-pannable {
    cursor: move;
}

/* Put on the page for as long as a drag lasts. The pointer leaves the diagram well before the
   drag ends, and without this it picks up the cursor of whatever it crosses; the selection is
   held off for the same reason, since the drag is no longer over the element that suppressed
   it. */
body.sct-diagram-panning,
body.sct-diagram-panning * {
    cursor: move !important;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* The drawing is dragged rather than read as a document, and a drag across it would otherwise
   leave a trail of highlighted terms behind it. Set on the container and inherited by the svg
   and its text. The term itself is still there to be had: Download hands out the file with the
   text in it. */
.sct-diagram-body {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* The diagram's scrollbars used to be styled here, and were the only pale ones in the
   application. They are the application's everywhere now — same colours, same widths — so
   this block would only have restated it. See the scrollbar section at the top of
   sct-widgets-v2.css. */

/* The toolbar's own spacing, held here rather than in the template's inline style so that the
   two of them that stand one above the other in the Both view can be brought closer together
   than a toolbar standing on its own would want to be. */
.sct-diagram-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 6px 0 4px;
}

/* The shared row and the per-diagram row below it are two bands of controls in a column, and
   the gap between them used to be the widest on the tab — wider than the one above either of
   them — for no reason other than that each carried its own margin. */
.cd-both-view > .sct-diagram-toolbar {
    margin-bottom: 2px;
}

.cd-both-view .container-fluid > .sct-diagram-toolbar {
    margin-top: 2px;
}

/* A form with nothing to draw (views/conceptDetailsPlugin/tabs/diagramEmpty.hbs): one muted line
   where the drawing would start, in place of a concept box over half a node. */
.sct-diagram-body .sct-diagram-empty {
    padding: 14px 10px;
    font-size: 12px;
    color: #6b7280;
}

/* A box that can be pressed (js/diagramConceptMenu.js). The rects laid over the boxes take the
   press and nothing else: no fill drawn, but a fill to hit. The hand says the box opens
   something; the drawing's ground keeps the grab of the pan. A drag that starts on a box still
   pans, which is why the panning cursor below wins over this one. */
.sct-diagram-body .sct-diagram-hit {
    fill: transparent;
    cursor: pointer;
}

body.sct-diagram-panning .sct-diagram-body .sct-diagram-hit {
    cursor: grabbing;
    cursor: -webkit-grabbing;
}

/* The selected box: its outer line turns the brand's sandybrown, 3px over the 1-2px it had, so it
   covers it (the user's call, 2026-10-05; the accent blue came first). Not a wash: the box's own
   fill says what kind of concept it is. */
.sct-diagram-body .sct-diagram-selection {
    fill: none;
    stroke: #f4a460;
    stroke-width: 3;
    pointer-events: none;
}

/* The box's menu: the floating surface of the workflow graph's (5.22, section 4), laid on the
   page beside the box. It is outside every module's container, hence the class prefix rather
   than an id. The drawing is unselectable; the menu is text to be read and copied from. */
.sct-dmenu {
    position: fixed;
    z-index: 1060;
    width: 280px;
    max-width: calc(100vw - 16px);
    max-height: calc(100vh - 16px);
    overflow-y: auto;
    background: rgba(255, 255, 255, .96);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    backdrop-filter: blur(20px) saturate(140%);
    border: 1px solid #e0e4ea;
    border-radius: 6px;
    box-shadow: 0 1px 2px rgba(20, 28, 40, .05), 0 10px 26px -6px rgba(20, 28, 40, .16);
    font-size: 12px;
    color: #4a5568;
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

.sct-dmenu-head {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 6px 8px 12px;
    border-bottom: 1px solid #e0e4ea;
}

.sct-dmenu-title {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 14px;
    font-weight: 600;
    color: #2c3e50;
}

.sct-dmenu-close {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: #9aa3ad;
}

.sct-dmenu-close:hover,
.sct-dmenu-close:focus {
    background: #eef1f5;
    color: #4a5568;
}

.sct-dmenu-close:focus:not(:focus-visible) {
    outline: none;
}

.sct-dmenu-body {
    padding: 10px 12px 2px;
}

.sct-dmenu-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #8a94a0;
}

.sct-dmenu-fsn {
    margin: 2px 0 10px;
    font-size: 12px;
    line-height: 1.45;
    color: #2c3e50;
    word-wrap: break-word;
}

/* The id is what gets copied, so it wraps rather than being cut (section 3). */
.sct-dmenu-id {
    display: inline-block;
    margin: 3px 0 10px;
    padding: 1px 6px;
    border-radius: 3px;
    background: #eef2f7;
    font-family: Menlo, Consolas, monospace;
    font-size: 11px;
    color: #2c3e50;
    word-break: break-all;
}

.sct-dmenu-actions {
    padding: 4px 0;
    border-top: 1px solid #e0e4ea;
}

.sct-dmenu-action {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 6px 12px;
    border: 0;
    background: transparent;
    text-align: left;
    font-size: 12px;
    color: #4a5568;
}

.sct-dmenu-action:hover,
.sct-dmenu-action:focus {
    background: #eef1f5;
    color: #2c3e50;
}

.sct-dmenu-action .fa,
.sct-dmenu-action .glyphicon {
    width: 14px;
    top: 0;
    text-align: center;
    font-size: 12px;
    color: #9aa3ad;
}

/* Go to concept leads, in the accent: it is what the menu is mostly opened for. */
.sct-dmenu-goto,
.sct-dmenu-goto .fa {
    font-weight: 600;
    color: #337ab7;
}

.sct-dmenu-goto:hover,
.sct-dmenu-goto:focus,
.sct-dmenu-goto:hover .fa {
    color: #23527c;
}

/* The star says whether it is a favorite: empty off, filled amber on, like the Summary's. */
.sct-dmenu-fav .glyphicon-star,
.sct-dmenu-fav.is-on .glyphicon-star-empty {
    display: none;
}

.sct-dmenu-fav.is-on .glyphicon-star {
    display: inline-block;
    color: #e09b3d;
}

/* The Summary's four ways of copying, as one row of small bordered buttons. */
.sct-dmenu-copyrow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 8px 12px 10px;
    border-top: 1px solid #e0e4ea;
}

.sct-dmenu-copyrow .sct-dmenu-label {
    margin-right: 2px;
}

.sct-dmenu-copy {
    height: 22px;
    padding: 0 8px;
    border: 1px solid #e0e4ea;
    border-radius: 4px;
    background: #fff;
    font-size: 11px;
    color: #4a5568;
}

.sct-dmenu-copy:hover,
.sct-dmenu-copy:focus {
    border-color: #c9d0d9;
    background: #eef1f5;
    color: #2c3e50;
}