body {
    font-family: Calibri, Arial, sans-serif;
    font-size: 16px;
    margin: 0;
    padding: 0;
    background-color: #f0f0f0;
}
.fillred {
    fill: "#FF0000";
}
/* *-------- --------------------------------------------------------------*/
/* *--------                 STACK Panes            ----------------*/
/* *-------- --------------------------------------------------------------*/
.stack-pane {
    background-color: #ffffff40;
    border-style: solid;
    border-color: #a0a0a0;
    border-width: 0px 1px 1px 1px;
}
.stack-pane-chgbutton {
    color: black;
    border: none;
    background-color: #e0e0e0;
    padding: 0px;
}
.stack-pane-chgbutton:hover {
    transition: 0.1s;
    transform: scale(1.5);
}

/* *-------- --------------------------------------------------------------*/
/* *--------                 Windows/Containers           ----------------*/
/* *-------- --------------------------------------------------------------*/
.wn-draggable-main {
    background-color: #f0f0f0d0;
    border-radius: 4px;
    border-style: solid;
    border: 2px 1px 1px 1px;
    border-color: #c0c0c0;

    -webkit-box-shadow: 3px 4px 3px 0px #000000;
    box-shadow: 3px 4px 3px 0px #000000;
}
.wn-titlebar {
    background-color: #00000020;
    font-size: 16px;
    text-align: center;
    color: #707070;
}
.overlay-window {
    background-color: #ffffffa0;
    border-style: solid;
    border-width: 0px 0px 1px 0px;
    border-color: #e0e0e0;
}
.top-dialog {
    background-color: #ffffff20;
    border-style: solid;
    border-color: #a0a0a0;
    border-width: 0px 1px 1px 1px;
    border-radius: 0px 0px 10px 10px;
}
.bottom-dialog {
    background-color: #ffffff20;
    border-style: solid;
    border-color: #a0a0a0;
    border-width: 1px 1px 0px 1px;
    border-radius: 10px 10px 0px 0px;
}
.route-card {
    border-style: solid;
    border-color: #a0a0a0;
    border-width: 0px 0px 1px 0px;
}
/* *-------- --------------------------------------------------------------*/
/* *--------                          BUTTONS             ----------------*/
/* *-------- --------------------------------------------------------------*/
/*  IMAGE BUTTON */
.imagebutton {
    background-color: #00000000;
    background-repeat: no-repeat;
    background-size: contain;
    border-width: 0px;
    outline: none;
    transition: scale 1s;
    font-size: 14px;
    font-weight: bold;
    color: black;
}
.imagebutton:hover {
    transition: 0.1s;
    transform: scale(1.5);
}
.imagebutton:active {
    transform: translateY(3px);
}
.imagebutton2 {
    background-color: #ffffff00;
    background-repeat: no-repeat;
    background-size: contain;
    border-width: 0px;
    outline: none;
    border-radius: 10px;
}
.imagebutton2:hover {
    transition: 0.3s;
    transform: scale(1.25);
}
.imagebutton2:active {
    transition: 0.1s;
    transform: translateY(3px);
}
.imagebutton3 {
    background-color: #00000030;
    background-repeat: no-repeat;
    background-size: 32px 32px;

    border: none;
    outline: none;

    background-position-x: 3px;
    background-position-y: -3px;
}
.imagebutton3:hover {
    background-color: #00000000;
}
.imagebutton3:active {
    transform: translateY(3px);
}
.panbutton {
    background-color: #00000000;
    background-repeat: no-repeat;
    background-size: contain;
    background-position-x: 30%;
    border-width: 1px;
    border-color: #00000050;
    border-radius: 2px;
    outline: none;
    transition: scale 1s;
}
.panbutton:hover {
    transition: 0.3s;
    transform: scale(1.2);
}
.panbutton:active {
    transform: translateY(3px);
}
/*  STANDARD 1 */
.basicbutton1 {
    background-color: #f0f0f0;
    border-radius: 6px;
    color: black;
    font-size: 12px;
    border-style: solid;
    border-width: 1px;
    border-color: grey;
    font-weight: bold;
}
.basicbutton1:hover {
    transition: 0.1s;
    font-size: 14px;
}
.basicbutton1:active {
    transform: translateY(2px);
}
/*  STANDARD 1 */
.min-button {
    background: transparent;
    font-size: 13px;
    border: none;
    border-color: black;
    text-align: left;

    font-weight: bold;
    color: #303030;
    padding: 0px;
}
.min-button:hover {
    transform: translateX(2px);
}
.min-button:active {
    transform: translateY(2px);
}
.min-selected {
    border-left: solid;
    border-width: 4px;
    padding-left: 4px;
}
/*  CUSTOM TOGGLE */
.toggle-container {
    border: solid;
    border-width: 2px;
    background-color: #d0d0d0;
    border-color: #808080;
    border-radius: 8px;
    padding: 0px;
}
.toggle-container:hover {
    border-width: 4px;
}
.toggle-inner-off {
    border: none;
    background-color: #404040;
    border-radius: 12px;
}
.toggle-inner-on {
    border: none;
    background-color: #007a08;
    border-radius: 12px;
}
.info-button {
    border: none;
}
/* *-------- --------------------------------------------------------------*/
/* *--------                 DRAGGING             ----------------*/
/* *-------- --------------------------------------------------------------*/
.over {
    border-color: black;
    border-width: 2px;
    border-style: dotted;
}
.draggable:hover {
    border-color: black;
    border-width: 2px;
    border-style: dotted;
}
/* *-------- --------------------------------------------------------------*/
/* *--------                 SVG            ----------------*/
/* *-------- --------------------------------------------------------------*/
.svgDisplayObject {
    stroke: #ffff00;
    stroke-dasharray: 4, 6;
    stroke-width: 2px;
    fill: #00000000;
    opacity: 0;
}
.svgDisplayObject:hover {
    opacity: 1;
}
.svgDisplayObject:active {
    fill: #ffffff80;
}
.svgLine {
    stroke: #ffff00;
    stroke-width: 6px;
    opacity: 0;
}
.svgLine:hover {
    opacity: 1;
    stroke-width: 3px;
    fill: #00000000;
}
.svgIgnore {
    opacity: 0;
}
.svg-datatag {
    stroke: #00000000;
    fill: #00000020;
    opacity: 0;
}
.svg-datatag:hover {
    opacity: 1;
}
.highlight {
    stroke: #ffff00;
    stroke-width: 2px;
    stroke-dasharray: 5, 1;
    fill: #00000000;
}
.dragHandle {
    stroke: yellow;
    fill: #00000060;
    stroke-width: 1px;
}
.dragHandle:hover {
    fill: #ffffff60;
    cursor: crosshair;
}
.dragHandle:active {
    cursor: crosshair;
}
.testsvg {
    stroke: red;
    fill: green;
    width: 200px;
    height: 200px;
}
.testsvg:hover {
    background-color: pink;
    fill: yellow;
}
/* *-------- --------------------------------------------------------------*/
/* *--------                Labels/text             ----------------*/
/* *-------- --------------------------------------------------------------*/
.obj-label {
    font-size: 12px;
    color: #474d56;
}
.obj-label2 {
    font-size: 13px;
    color: #474d56;
    font-weight: bold;
}
.title {
    font-size: 16px;
    color: #1771f8;
    font-weight: bold;
    width: 200px;
    border-bottom: solid;
    border-color: #1771f8;
    border-width: 2px;
}
.boldit {
    font-weight: bold;
}
.underlineit {
    text-decoration: underline;
}
.spn-label {
    background-color: white;
    font-size: 16px;
    font-weight: bold;
    color: #00529c;
    border: 1px 0px 1px 0px;
}
.info-caption {
    font-size: 20px;
    font-weight: bold;
    color: #404040;
}
@keyframes shine {
    0% {
        color: #606060;
    }
    50% {
        color: #a0a0a0;
    }
    100% {
        color: #606060;
    }
}
.card {
    background-color: #ffffff20;
    border: solid;
    border-radius: 8px;
    border-color: grey;
    color: black;
}
.card-label {
    color: black;
    font-size: 20px;
}
.card-label-error {
    color: red;
    font-size: 20px;
}
/* *-------- --------------------------------------------------------------*/
/* *--------                OTHER           ----------------*/
/* *-------- --------------------------------------------------------------*/
.inputcolor {
    background-color: transparent;
    padding: 0px;
    margin: 0px;
    border-radius: 6px;
    border: solid;
    border-color: #808080;
}
.dropdown {
    border: none;
    color: grey;
    background-color: #f0f0f0;
}
.number-input {
    background-color: #e0e0e0;
    color: #303030;
    font-size: 14px;
    border: 1px;
    border: solid;
    border-color: #b0b0b0;
    text-align: center;
}
.text-input {
    background-color: #e0e0e0;
    color: #303030;
    font-size: 14px;
    border: 1px;
    border: solid;
    border-color: #b0b0b0;
    word-wrap: break-word;
    word-break: break-all;
}
/* *-------- --------------------------------------------------------------*/
/* *--------                 CUSTOM SLIDER            ----------------*/
/* *-------- --------------------------------------------------------------*/
/* The slider itself */
.slider {
    -webkit-appearance: none; /* Override default CSS styles */
    appearance: none;
    width: 100%; /* Full-width */
    height: 12px; /* Specified height */
    background: transparent; /* Grey background */
    outline: none; /* Remove outline */
    opacity: 0.5; /* Set transparency (for mouse-over effects on hover) */
    -webkit-transition: 0.2s; /* 0.2 seconds transition on hover */
    transition: opacity 0.2s;
    border-top: solid;
    border-width: 3px;
    cursor: pointer;
}
/* Mouse-over effects */
.slider:hover {
    opacity: 1; /* Fully shown on mouse-over */
    cursor: pointer;
}
/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
.slider::-webkit-slider-thumb {
    -webkit-appearance: none; /* Override default look */
    appearance: none;
    width: 8px; /* Set a specific slider handle width */
    height: 8px; /* Slider handle height */
    outline: none;
    border-radius: 4px 4px 0px 0px;
    border: solid;
    border-color: black;
    border-width: 1px;
    background: #00000080; /* Green background */
    cursor: pointer;
}
.slider::-moz-range-thumb {
    width: 8px; /* Set a specific slider handle width */
    height: 12px; /* Slider handle height */
    outline-color: black;
    outline-width: 2px;
    background: #00000080; /* Green background */
    cursor: pointer;
}
/* *-------- --------------------------------------------------------------*/
/* *--------                 CUSTOM CHECKBOX            ----------------*/
/* *-------- --------------------------------------------------------------*/
.customcheck {
    background-color: #00000000;
    border: solid;
    border-color: #808080;
    border-width: 1px;
    border-radius: 2px;
    margin: 0px;
    padding: 0px;
}
.customcheck:hover {
    border-width: 2px;
}
.customcheck:active {
    transform: translateY(2px);
}