/* 
    Styling for SOCKit online SOCME builder.

    Note that most of the SVG styling should be applied directly to the
    individual elements, NOT in this CSS file.  That makes it _much_ easier when
    exporting to an SVG or PNG file.  Temporary styling (e.g. on hover, or for
    selecting an element) can still be done with CSS since we don't need to save
    that.

*/

/* *** BEGIN ADJUSTMENTS FROM KCVS BASE THEME *** */

#appletContainer {
    box-shadow: none;
    max-width: unset;
}

body {
    background-color: white;
    box-sizing: border-box;
    overflow: hidden;
}

.contentContainer {
    width: 100%;
}

#infoContainer,
.menuBar {
    max-width: unset;
}

input[type=checkBox]:not(.openSidebarMenu) {
    /* The KCVS theme hides checkboxes for the menu to work.  These settings
    turn them back on outside of the menu (while leaving the menu alone). */
    border-radius: initial;
    display: initial;
    transition: none;
}

#wrapper {
    /* Make the page "wrapper" fill the window. */
    position: absolute;
}

::-webkit-scrollbar-track {
    /* Remove shadows from scrollbars.  Otherwise we get weird shadowy spaces
    with overflow set to scroll. */
    box-shadow: none;
}

/* *** END ADJUSTMENTS FROM KCVS BASE THEME *** */
/* Applet-specific CSS starts here. */

input,
button,
select {
    /* Note that tag types are considered the "lowest specificity" in CSS,
    making this easy to override with classes. */
    /* Default to black text (it's blue on iOS, which is ugly). */
    color: black;
    /* Have controls use the surrounding font size by default.  */
    font-size: 1em;
}

#appletContainer {
    height: 100%;
}

.bannerMessageContainer {
    background-color: palegoldenrod;
    box-shadow: 5px 0 10px darkgray;
    font-size: 1.5rem;
    padding: 0.5rem;
    padding-left: 80px;
    position: absolute;
    text-align: left;
    top: 0;
    width: 100%;
}

.bannerMessageContainer button {
    font-size: 0.8em;
}

.bannerMessageContainer button+button {
    margin-left: 0.5em;
}

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

.buttonShine {
    background-image: -webkit-radial-gradient(top, circle, rgba(255, 255, 255, 0.4), rgba(0, 0, 0, 0.2));
    background-image: -moz-radial-gradient(top, circle, rgba(255, 255, 255, 0.4), rgba(0, 0, 0, 0.2));
    background-image: -o-radial-gradient(top, circle, rgba(255, 255, 255, 0.4), rgba(0, 0, 0, 0.2));
    background-image: radial-gradient(circle at top, rgba(255, 255, 255, 0.4), rgba(0, 0, 0, 0.2));
}

.buttonDoesNothing,
.buttonShine.buttonDoesNothing {
    background: #EEE;
    border: solid 1px #CCC;
    color: gray;
}

.buttonDoesNothing img {
    opacity: 0.25;
}



.colourOption {
    /* display: block; */
    /* Using flex aligns everything much better, even if we do nothing else. :) */
    display: flex;
    flex-wrap: nowrap;
    height: 0;
    margin: 0;
    padding: 0;
    width: 100%;
    overflow: hidden;
    position: relative;
    user-select: none;
    transition: all 250ms ease-out,
        background-color 0s;
}

.colourOption .inUseLabel {
    display: inline-block;
    font-size: 0.8em;
    font-style: italic;
    left: -4rem;
    position: relative;
    text-align: center;
    width: 4rem;
    visibility: hidden;
}

.colourOption.inUse .inUseLabel {
    visibility: visible;
}

.colourSwatch {
    color: rgba(0, 0, 0, 0);
    display: inline-block;
    height: 100%;
    min-height: 1em;
    width: 4rem;
}

.contentContainer {
    height: 100%;
    padding: 0;
}

.deleteButton {
    background: darkred;
    color: white;
    margin-bottom: 0.5em;
}

.deleteButton:disabled {
    opacity: 0.25;
}

.deselectButton {
    font-style: italic;
}

.disclosureArrow {
    display: inline-block;
    transition: all 250ms ease-out;
}

.disclosureCheckbox {
    height: 2em;
    width: 100%;
}

.disclosureCheckbox:checked~.disclosureList {
    padding-bottom: 0.25em;
    padding-top: 0.25em;
}

.disclosureCheckbox:checked~.disclosureList .colourOption {
    height: 1.5em;
    margin-bottom: 1px;
    margin-top: 1px;
    padding-bottom: 2px;
    padding-top: 2px;
}

.disclosureCheckbox:checked+.disclosureLabel>.disclosureArrow {
    transform: rotate(-180deg);
}

.disclosureLabel {
    align-items: center;
    background-color: #EEE;
    border: solid 1px #222;
    border-radius: 0.5em;
    display: flex;
    gap: 0.25em;
    padding: 0.25em;
    padding-left: 0.5em;
    width: 100%;
}

.disclosureCheckbox:active~.disclosureLabel {
    background-color: #BBB;
    box-shadow: inset 0 0 5px #222;
}

.disclosureCheckbox:hover~.disclosureLabel {
    background-color: #CCC;
}

.disclosureLabel .colourSwatch {
    border: solid 1px #222;
    margin-left: auto;
    margin-right: 1em;
}

.disclosureList {
    box-shadow: inset 1px 3px 5px darkgray;
    padding-bottom: 0;
    padding-top: 0;
    transition: all 250ms ease-out;
}

.disclosureListWrapper {
    margin-bottom: 0.5em;
    position: relative;
}

.forceNode.hasNodeBg {
    cursor: pointer;
}

/* .forceNode *{
    transition: all 250ms ease-out;
} */


.forceNode:hover>:not(.nodeControlsGroup, .selected),
.forceNode.highlighted>:not(.nodeControlsGroup, .selected) {
    transform: scale(1.1);
}


/* .forceNode:hover:not(.subsystemLabelNode) .nodeBg {
    stroke: gray;
    stroke-width: 1px;
} */

.forceNode.selected:not(.centralConcept.forceNode:not(.subsystemLabelNode))>:not(.nodeControlsGroup) {
    transform: scale(1.4);
}
.forceNode.selected.centralConcept>:not(.nodeControlsGroup) {
    transform: scale(1.1);
}
.forceNode.selected.subsystemLabelNode,
.forceNode.highlighted.subsystemLabelNode {
    font-weight: bold;
}

/* .forceNode.selected:not(.subsystemLabelNode) .nodeBg { */
.forceNode.selected.itemNode .nodeBg {
    stroke: black;
    stroke-width: 2px;
}

/* .forceNode:hover circle,
.forceNode:hover rect {
    stroke: black;
    stroke-width: 2;
} */

.forceNode text,
.svgButton text {
    pointer-events: none;
    user-select: none;
}

.generalSettings {
    border-bottom: solid 1px black;
    margin-bottom: 0.5em;
    padding-bottom: 0.5em;
}

.graphContainer {
    align-items: center;
    display: flex;
    height: 100%;
    position: relative;
    width: 100%;
}

.inputOK {
    height: 1.5em;
    position: relative;
}

.inputOK>div {
    height: 100%;
    overflow: hidden;
    position: relative;
    text-align: center;
}

.inputOK>div>div {
    position: relative;
    top: 0;
    transition: top 0.25s ease-out;
}

.inputOK.success>div>div {
    top: -100%;
}

.disclosureList>label:hover {
    background: #7accc3;
}

.keepBackupButton {
    background-color: #CEA;
    border: outset 2px black;
}

.nodeControl {
    font-size: 0.8em;
}

.startupMessage {
    font-size: 2em;
    min-width: 20rem;
    width: 100%;
}

.startupMessageWrapper {
    align-items: center;
    display: flex;
    justify-content: left;
    margin-right: 0;
    pointer-events: none;
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transition: all 0.5s ease-out;
}

.settingsContainer:not(.closed)~.startupMessageWrapper {
    margin-right: 20rem;
}

.graphContainer:not(.emptyGraph)~.startupMessageWrapper,
.graphContainer.initializing~.startupMessageWrapper {
    display: none;
}

.graphContainer.emptyGraph .zoomButton {
    display: none;
}

.graphContainer.initializing .toolButtonContainer {
    display: none;
}

.graphContainer>svg {
    height: 100%;
    left: 0;
    overflow: visible;
    position: absolute;
    top: 0;
    width: 100%;
}

.graphContainer>svg[data-tool="addItemTool"] {
    cursor: crosshair;
}

.graphContainer>svg[data-tool="addLinkTool"] .subsystemLabelNode {
    pointer-events: none;
}

.hideNodeText .forceNode:not(.subsystemLabelNode) .forceNodeLabel {
    visibility: hidden;
}

select {
    border: 1px solid #111;
}

.invisibleCheckbox {
    /* Remember to set the width and height in each case. */
    box-sizing: border-box;
    cursor: pointer;
    left: 0;
    margin: 0;
    position: absolute;
    top: 0;
    opacity: 0;
    z-index: 1;
}

.linkLine:not(.linkClickTarget) {
    pointer-events: none;
}

.linkClickTarget {
    stroke: blue;
    stroke-width: 22;
    opacity: 0;
    transition-property: stroke, stroke-width, opacity;
    transition-duration: 250ms;
    transition-timing-function: ease-out;
}

.linkClickTarget:hover {
    cursor: pointer;
    opacity: 0.25;
}

.linkClickTarget.selected {
    stroke: green;
    stroke-width: 30;
    opacity: 0.5;
}

main {
    height: 100%;
    width: 100%;
}

.menu a.homeMenuLink {
    font-style: italic;
    text-transform: none;
}

.newLinkLine {
    stroke: blue;
    stroke-width: 4;
}

.newLinkLine {
    pointer-events: none;
    stroke-dasharray: 15;
    stroke-dashoffset: 30;
    animation: 0.75s linear infinite marchingDash;
}

.newLinkLine.linkToThis {
    stroke-dashoffset: -30;
}

@keyframes marchingDash {

    /* By marching to 0 and changing the initial offset instead, we can always
    start the line at the first-selected node; this way when the mouse moves it
    adds/removes dashes instead of shifting them all. */
    to {
        stroke-dashoffset: 0;
    }
}

.pullTab :not(.pullTabBg),
.pullTabPath {
    pointer-events: none;
}

.pullTab.dragging {
    pointer-events: none;
}

.pullTabPath.dragging {
    stroke-dasharray: 15;
    stroke-dashoffset: 30;
    animation: 0.75s linear infinite marchingDash;
}

.rightAlign {
    text-align: right;
}

.selectionInstructions {
    margin-bottom: 0.5em;
    text-align: right;
}

.settingsContainer {
    background-color: white;
    box-shadow: -2px 5px 5px darkgray;
    box-sizing: border-box;
    height: 100%;
    margin-top: 32px;
    padding-left: 16px;
    /* padding-top: 54px; */
    padding-top: 60px;
    padding-right: 0.25rem;
    position: absolute;
    right: 0;
    text-align: left;
    top: 0;
    width: 20rem;
    /* transition: all 0.5s ease-out; */
    transition: right 0.5s ease-out;
}

.settingsContainer * {
    box-sizing: border-box;
}

.settingsContainer.closed {
    right: -20rem;
}

.settingsContainer .checkboxRow {
    min-height: 3em;
}

.settingsContainer .checkboxRow input+label {
    margin-left: 0.25em;
}

.settingsContainer .inputRow {
    align-items: center;
    display: flex;
    flex-wrap: nowrap;
}

.settingsContainer .inputRow input[type="text"] {
    flex: 1 1 100%;
}

/* .settingsContainer input,
.settingsContainer button,
.settingsContainer select {
    font-size: 1em;
}
 */
.settingsContainer .bigInput {
    font-size: 1.2rem;
    font-weight: bold;
}

.settingsContainer .inputRow input+button {
    margin-left: 0.5em;
}

.settingsContainer .settingsSet button {
    margin-top: 0.25em;
    margin-bottom: 0.25em;
}

.settingsInfo {
    font-size: 0.8em;
    margin-bottom: 0.5em;
    /* margin-top: 0.25em; */

}

.settingsScrollWrapper {
    /* Need a wrapper for the scroll, or the overflow algorithm will cut off the
    toggle when the drawer is closed! */
    height: 100%;
    overflow-y: scroll;
}

.settingsSet {
    border: none;
    margin: 0;
    padding: 0;
}

.settingsToggle {
    align-items: center;
    background-color: #01635b;
    border-radius: 0 10px 10px 0;
    box-shadow: 0 5px 5px darkgray;
    color: white;
    display: flex;
    font-size: 22px;
    height: 44px;
    justify-content: center;
    left: 0;
    position: absolute;
    text-align: center;
    top: 4px;
    width: 40px;
    /* transition: all 0.5s ease-out; */
    transition: left 0.5s ease-out;
    z-index: 1;
}

.settingsToggle:focus-within {
    box-shadow: 0 0 20px teal;
}

.closed .settingsToggle {
    border-radius: 10px 0 0 10px;
    left: -40px;
}

.settingsScrollWrapper * p:first-child {
    margin-top: 0;
    padding-top: 0;
}

.settingsToggle svg {
    height: 1em;
    position: relative;
    stroke: white;
    stroke-width: 2px;
    top: -0.08em;
    vertical-align: middle;
    width: 1em;
}

.settingsToggleCheckbox {
    height: 100%;
    width: 100%;
}

.settingsToggleCheckbox:checked~.drawerOpen {
    display: none;
}

.settingsToggleCheckbox:not(:checked)~.drawerClosed {
    display: none;
}

.settingsContainer fieldset,
.settingsContainer .toolInstructions {
    border-bottom: solid 1px black;
    margin-bottom: 0.5em;
    padding-bottom: 0.5em;
}

.svgButton {
    cursor: pointer;
    stroke: black;
    stroke-width: 1;
    fill: white;
}

.svgButton text {
    stroke: none;
    fill: black;
}

.svgButton:hover,
.svgButton:focus {
    stroke-width: 2;
}

.svgButton:active {
    fill: darkgray;
}

.svgDefs {
    height: 0;
    padding: 0;
    margin: 0;
    width: 0;
    position: absolute;
}

.toolButtonContainer {
    align-items: flex-end;
    background: white;
    /* box-shadow: inset 0 0 5px darkgray; */
    box-shadow: 0 0 5px darkgray;
    display: flex;
    flex-direction: column;
    gap: 5px;
    left: 0;
    /* margin: 1rem; */
    margin: 0.75rem;
    padding: 0.25rem;
    position: absolute;
    text-align: left;
    top: 0;
}

.toolButton {
    border-radius: 0.5rem;
    /* margin: 0.25rem; */
    margin: 0;
    padding: 0.25rem;
}

.toolButton {
    font-size: 0.8rem;
}

.toolButton>img {
    height: 1.8rem;
    width: 1.8rem;
}

.toolButton img.rotated {
    transform: rotate(0.5turn);
}

.toolButtonSpacer {
    /* This is in addition to the container's gap setting! */
    margin: 5px;
}