:active,
:focus,
:hover,
:visited,
a:focus {
    outline: 0;
    outline: none
}

ol,
ul {
    margin: 0
}

dl.grid {
    display: grid;
    grid-template-columns: 1fr 100%
}

dd {
    margin: 0;
    padding-left: 1em
}

dl.grid dd {
    margin-bottom: 1em
}

dl.grid dt {
    min-width: 140px
}

@font-face {
    font-family: Roboto;
    src: url(fonts/Roboto-Regular.ttf) format("truetype")
}

@font-face {
    font-family: Roboto;
    font-style: italic;
    src: url(fonts/Roboto-Italic.ttf) format("truetype")
}

@font-face {
    font-family: Roboto;
    font-weight: 700;
    src: url(fonts/Roboto-Bold.ttf) format("truetype")
}

@font-face {
    font-family: Roboto;
    font-style: italic;
    font-weight: 700;
    src: url(fonts/Roboto-BoldItalic.ttf) format("truetype")
}

body,
html {
    display: flex;
    font-family: Roboto, sans-serif;
    font-size: 1em;
    height: 100%;
    margin: 0;
    padding: 0;
    width: 100%
}

.pace {
    animation: pace-theme-center-circle-spin 2s linear infinite;
    background-color: transparent !important;
    background-image: url(../css/img/Nepo_N.png);
    background-repeat: no-repeat;
    background-size: cover;
    bottom: 0;
    color: transparent;
    font-size: 2rem;
    font-weight: 100;
    height: 12rem;
    left: 0;
    line-height: 12rem;
    margin: auto;
    pointer-events: none;
    position: fixed;
    right: 0;
    text-align: center;
    top: 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    width: 12rem;
    z-index: 3000
}

@keyframes pace-theme-center-circle-spin {
    0% {
        transform: perspective(12rem) rotateY(0deg)
    }

    to {
        transform: perspective(12rem) rotateY(1turn)
    }
}

body.blocklyMinimalBody * {
    opacity: 1 !important;
    overflow: hidden;
    transform: none
}

#header {
    background-color: #fff;
    border: 0;
    margin: 0
}

#header>.navbar {
    padding-bottom: 0
}

.navbar-toggler {
    border: none;
    padding: 12px
}

.navbar-toggler:focus {
    box-shadow: none
}

.nav-item:hover,
button#navbarButtonsHead:hover {
    background-color: #bacc1e;
    border: 0;
    border-radius: 2px
}

#head-navigation-tabs>li>a.active {
    border-bottom: 4px solid #bacc1e
}

.blocklyToolboxDiv {
    top: 0 !important
}

#iconDisplayLogin,
#iconDisplayRobotState {
    cursor: pointer;
    float: left;
    font-size: 24px;
    height: 24px;
    margin: 0 6px;
    width: 24px
}

.robertaLogo {
    background: url(../css/svg/logo-word.svg) no-repeat
}

.fraunhoferLogo {
    background: url(../css/img/iais_logo.gif) no-repeat
}

.googleLogo {
    background: url(../css/svg/Google_logo.svg) no-repeat;
    background-size: contain
}

.NRWMinLogo {
    background: url(../css/img/AK_Schule.png) no-repeat;
    background-size: contain
}

.imgFloatLeft {
    float: left;
    height: 65px;
    margin: 4px 16px 0 0;
    padding: 0;
    width: 210px
}

#language.nav>li>a {
    color: #333;
    margin: 6px;
    padding: 0
}

#language.nav>li>a:focus,
#language.nav>li>a:hover {
    background-color: #fff
}

#logoShowStart img {
    display: block;
    height: 60px;
    margin: 18px;
    width: 146px
}

.invisible {
    visibility: hidden
}

.hidden {
    display: none
}

.img-beta,
.img-deprecated {
    left: 10px;
    position: absolute;
    top: -5px;
    transform: rotate(-10deg);
    width: auto;
    z-index: 5
}

.new {
    background-color: #fdc300;
    border-radius: 5px 0;
    font-size: 14px;
    left: 0;
    max-width: -moz-fit-content;
    max-width: fit-content;
    padding: 5px 10px;
    position: absolute;
    top: 0;
    z-index: 99
}

.menuTab {
    font-weight: 700;
    text-transform: uppercase
}

.navigation-row {
    margin: 0;
    width: 100%
}

.scroller {
    background-color: #fff;
    cursor: pointer;
    float: left;
    font-size: 24px;
    margin: 0;
    padding: 8px 2px 0 28px
}

#main-section {
    background: #e9ecef;
    bottom: 0;
    left: 0;
    margin: 0;
    overflow: hidden;
    padding: 0;
    position: absolute;
    right: 0;
    top: 96px
}

#headNavigation.show {
    max-height: 335px;
    overflow-y: auto
}

.navbar-nav ul {
    max-height: calc(100vh - 100px);
    overflow: hidden;
    overflow-y: auto
}

.btn-default {
    background-color: #fff;
    border-color: #ccc;
    color: #333;
    margin-right: 2px
}

.btn-default:hover {
    background-color: #ddd;
    border-color: #ccc
}

#blocklyDiv,
#bricklyDiv {
    background-size: 100%;
    height: 100%;
    overflow: hidden;
    touch-action: none
}

.log {
    bottom: 50px;
    margin: 16px 68px 32px;
    overflow: auto;
    position: fixed;
    top: 152px
}

.canvasSim {
    left: 0;
    position: absolute;
    top: 0
}

canvas.border {
    border: 2px solid grey
}

#webotsDiv {
    height: 100%
}

#canvasDiv,
#webotsDiv {
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1
}

#sliderDiv {
    cursor: col-resize;
    width: 20px;
    z-index: 11
}

#sliderBorder {
    background-color: silver;
    width: 6px;
    z-index: 8
}

.codeActive>pre {
    word-wrap: inherit;
    height: 100%;
    width: 100%
}

.fromRight {
    background-color: #d8d8d8;
    display: none;
    float: right;
    height: 100%;
    position: relative;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    width: 0;
    z-index: 10
}

#infoDiv.fromRight {
    background-color: #eee
}

.fromRight.rightActive {
    display: block;
    height: 100%;
    overflow: hidden
}

#sourceCodeEditor {
    height: calc(100% - 80px);
    height: -webkit-calc(100% - 80px);
    width: 100%
}

#codeContainer {
    background-color: #eee;
    height: 100%;
    overflow-y: auto;
    padding-bottom: 80px;
    padding-right: 5px;
    padding-top: 10px;
    width: 100%
}

#codeContent .ace_scroller .ace_content .ace_hidden-cursors .ace_cursor {
    opacity: 0
}

.ace_layer {
    left: -4px
}

.ace_editor {
    color: inherit;
    direction: ltr;
    font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, Courier, monospace;
    font-size: 12px;
    height: 100%;
    line-height: 18px;
    width: 100%
}

.ace_active-line,
.ace_gutter-active-line {
    background-color: #c3e3efb3 !important
}

.ace_lineBackgroundGrey {
    background-color: #eee !important
}

.ace_lineBackgroundGrey,
.ace_lineBackgroundWhite {
    border-bottom-left-radius: 0 !important;
    border-top-left-radius: 0 !important;
    left: 0 !important
}

.ace_lineBackgroundWhite {
    background-color: #fff !important
}

#infoContent {
    background-color: #fff;
    border: 10px solid #eee;
    border-top: none;
    height: inherit;
    overflow: auto;
    -webkit-user-select: text;
    -moz-user-select: text;
    user-select: text;
    width: inherit
}

#infoContent[data-placeholder]:before {
    color: #555;
    padding: 0 12px
}

#infoToolbar {
    border: 10px solid #eee
}

#legalDiv {
    background-color: #fff;
    overflow-y: scroll;
    padding-top: 1.5rem
}

#legalDiv>:not(#legalDivHeader) {
    -webkit-touch-callout: default;
    padding: 1rem;
    -webkit-user-select: text;
    -moz-user-select: text;
    user-select: text
}

#legalDiv>#legalDivHeader {
    font-size: 1.25em;
    text-align: center
}

#legalDiv>#legalDivHeader>a {
    padding: 0 1rem
}

#helpDiv ul {
    display: table;
    list-style-type: none
}

#helpDiv li {
    display: table-row
}

#helpDiv li:before {
    display: table-cell;
    padding-right: 6px
}

#helpContent {
    -webkit-touch-callout: none;
    background-color: #fff;
    height: 100%;
    overflow-y: auto;
    padding: 10px 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

#helpContent h2,
#helpContent h3 {
    border-top: 1px solid #f29400;
    padding-left: 10px;
    padding-top: 25px
}

#helpContent h4,
#helpContent p {
    margin-left: 8px;
    margin-right: 12px
}

#helpContent h4 {
    margin-top: 18px
}

.selectedHelp {
    background-color: #f0f0f0
}

#rightMenuDiv {
    position: absolute;
    right: 0;
    top: 32px;
    z-index: 9
}

.stationaryContent,
.valuesContent {
    background-color: #fff;
    border: 2px solid #33b8ca;
    border-radius: 2px;
    display: inline-block;
    padding: 12px 14px 12px 12px
}

.valuesContent {
    min-width: 330px;
    overflow-y: auto
}

.customDropdown {
    background-color: #fff;
    border: 1px solid #333;
    border-radius: 2px
}

.rightMenuButton {
    background: silver;
    border-radius: 2px;
    height: 40px;
    margin-bottom: 6px;
    position: relative;
    width: 40px;
    z-index: 12
}

.rightMenuButton:before {
    border-bottom: 5px solid transparent;
    border-right: 6px solid #333;
    border-top: 5px solid transparent;
    content: "";
    height: 0;
    position: absolute;
    right: 100%;
    top: 14px;
    width: 0
}

.rightMenuButton.rightActive {
    color: #e2001a
}

.rightMenuButton.rightActive:before {
    border-bottom: 5px solid transparent;
    border-left: 6px solid #333;
    border-top: 5px solid transparent;
    right: -6px
}

.rightMenuButton:active,
div.rightMenuButton:hover {
    cursor: pointer
}

.rightMenuButton>.typcn {
    font-size: 24px;
    left: 7px;
    position: relative;
    top: 8px
}

#infoButton.notEmpty,
#tutorialButton.rightMenuButton {
    background-color: #bacc1e
}

#infoButton.notEmpty:before,
#tutorialButton.rightMenuButton:before {
    border-right: 6px solid #bacc1e
}

.menu-icons {
    border: 0;
    color: #fff;
    font-size: 24px;
    line-height: 24px;
    margin: 0
}

#toastContainer {
    left: 50%;
    position: absolute;
    top: 0
}

#toastLeftContainer {
    left: -50%;
    margin: 0;
    padding: 0;
    position: relative;
    top: 0
}

#toastLeftContainer span {
    background-color: #fff;
    color: #333;
    font-size: 16px;
    padding: 8px;
    white-space: nowrap;
    z-index: 9999
}

.ok,
.wait {
    color: #33b8ca
}

.error {
    color: #333
}

@keyframes blinker {
    0% {
        color: #f29400
    }

    to {
        color: #e2001a
    }
}

.busy {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-name: blinker;
    animation-name: blinker;
    -webkit-animation-timing-function: cubic-bezier(1, 0, 0, 1);
    animation-timing-function: cubic-bezier(1, 0, 0, 1)
}

.menuDisabled {
    background-color: #fff
}

.dropdown-toggle.disabled:focus,
.dropdown-toggle.disabled:hover {
    background-color: #fff !important;
    background-image: none;
    cursor: default;
    text-decoration: none
}

.bottomLeftButtons {
    bottom: 6px;
    display: flex
}

#simEditButtons,
.bottomLeftButtons {
    left: 12px;
    position: absolute;
    z-index: 99
}

#simEditButtons {
    top: 10px
}

#simEditButtons button span:before {
    font-size: 36px
}

.simAddMarker span {
    display: inline-block;
    font-size: 12px;
    min-width: 16px
}

button#simCustomColorObject span.typcn:before {
    color: #fbed00
}

button#simCustomObstacle.typcn:before {
    color: #009ee3
}

.huebee__container {
    background: #e7e7e7;
    border-radius: 2px;
    box-shadow: none;
    left: -50px;
    padding: 24px 10px 10px;
    position: absolute;
    top: 6px
}

.huebee__cursor {
    border: 5px solid #fff;
    border-radius: 2px;
    height: 30px;
    width: 30px
}

.huebee {
    transition: none
}

.huebee__close-button {
    background: none;
    border-radius: 0;
    display: block;
    height: 24px;
    position: absolute;
    right: 0;
    top: 0;
    width: 24px
}

.huebee__close-button__x {
    stroke-width: 2;
    stroke: #bbb
}

.huebee__close-button__x:focus,
.huebee__close-button__x:hover {
    stroke: #333
}

.huebee__close-button:focus,
.huebee__close-button:hover {
    background: #e7e7e7
}

#codeButtons {
    background-color: #eee;
    bottom: 0;
    height: 70px;
    left: 12px;
    padding-top: 10px;
    position: absolute;
    width: 100%;
    z-index: 99
}

.btn-group-vertical>.btn.simbtn {
    margin: 8px 0
}

.btn-toolbar>.btn,
.btn-toolbar>.btn-group,
.btn-toolbar>.input-group {
    margin-bottom: 5px
}

.btn-group.open .dropdown-toggle {
    box-shadow: none
}

.tooltip>.tooltip-inner {
    background-color: #333
}

.tooltip>.tooltip-arrow {
    border-right-color: #333
}

.nav-tabs>li+li {
    margin: 0
}

#toolboxDiv {
    -webkit-overflow-scrolling: touch
}

#toolboxDiv>.nav-tabs {
    border: 0
}

#toolboxDiv>.nav-tabs li {
    border: none;
    text-align: center;
    width: 50%
}

#toolboxDiv>.blocklyToolboxDiv {
    position: relative !important
}

#toolboxDiv>.nav-tabs li>a.active {
    background-color: #e9ecef;
    color: #333
}

#toolboxDiv>.nav-tabs li>a {
    background-color: silver;
    border: none;
    border-radius: 0;
    color: #fff;
    margin: 0;
    padding: 6px 0
}

.blocklyFlyoutBackground {
    fill-opacity: .925 !important
}

.head-navi-icons:before {
    margin-right: 2px
}

.dropdown-menu:not(.editor) {
    border-radius: 2px
}

.dropdown-menu>li>a>span.kbd {
    bottom: .4em;
    float: right;
    font-size: .8em;
    position: absolute;
    right: 20px
}

#head-navigation-configuration-edit .dropdown-menu>li>a,
#head-navigation-program-edit .dropdown-menu>li>a {
    padding-right: 70px;
    position: relative
}

.dropdown-menu>li:not(.disabled)>a:focus,
.dropdown-menu>li:not(.disabled)>a:hover {
    background-color: #bacc1e !important
}

.dropdown-menu>.disabled>a,
.dropdown-menu>.disabled>a:focus,
.dropdown-menu>.disabled>a:hover {
    color: #bbb
}

#tokenValue {
    text-transform: uppercase
}

#roberta {
    background-image: url(/css/img/Roberta_ears_up.png);
    background-repeat: no-repeat;
    background-size: contain;
    bottom: -12px;
    height: 180px;
    position: absolute;
    right: -20px;
    width: 160px
}

#version-info {
    font-size: 24px;
    font-weight: 500;
    position: absolute;
    right: 60px;
    top: 16px
}

.cover {
    background-color: #ddd;
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 2000
}

.connector {
    fill: #bacc1e;
    margin-top: 19px;
    position: absolute;
    right: 5%;
    z-index: 900
}

.border-dotted {
    border-right: 1px dashed #afca04
}

.popupTitel {
    margin-bottom: 10px;
    margin-top: 20px;
    text-align: center
}

.popup-checkbox {
    color: #bbb;
    font-size: 14px;
    padding: 0 0 16px !important
}

.download-checkbox {
    color: #bbb;
    font-size: 14px;
    padding-bottom: 16px !important;
    padding-left: 16px !important;
    width: 100%
}

.download-checkbox input,
.popup-checkbox input {
    margin-bottom: 6px;
    margin-right: 6px;
    position: relative;
    top: 2px
}

.download-checkbox label,
.popup-checkbox label {
    display: initial;
    font-weight: 400
}

.download-checkbox ul {
    list-style: none
}

#download-instructions {
    list-style-type: none;
    margin: 32px 16px 0;
    padding: 0
}

#download-instructions li {
    font-size: 20px;
    margin-bottom: 48px;
    padding-left: 2em;
    position: relative
}

#download-instructions .typcn-Roberta:before {
    left: 0;
    padding-top: 4px;
    position: absolute
}

#programLink a {
    color: #337ab7;
    text-decoration: underline
}

.clearer {
    clear: both
}

.simWindow {
    display: none;
    left: 50px;
    position: fixed;
    top: 200px;
    z-index: 99
}

.simWindow button.close {
    position: absolute;
    right: 14px;
    top: 4px
}

.simWindow#simRobotWindow button.close {
    position: absolute;
    right: 16px;
    top: 4px;
    z-index: 99999
}

#VariablesContent {
    height: 300px;
    overflow: auto;
    width: auto
}

#simValuesContent label {
    display: inline-block;
    margin-left: 10px;
    margin-right: 6px;
    width: 150px
}

#simValuesContent div>div {
    max-height: 70vh;
    white-space: nowrap
}

#simValuesContent span {
    display: inline-block;
    padding: 0 6px;
    width: 60px
}

.bigNumber {
    color: #8fa402;
    font-size: large;
    font-weight: 700
}

.simWindow .modal-dialog {
    margin: 0;
    min-width: -moz-max-content;
    min-width: max-content;
    pointer-events: all;
    width: -moz-max-content;
    width: max-content
}

.simWindow text {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

.simWindow div {
    width: 100%
}

.modal-backdrop.in {
    opacity: .3
}

.modal-content {
    border: 0;
    border-radius: 2px
}

.modal-body {
    padding: 0 16px
}

.modal-body.left-inner-addon {
    word-break: break-word
}

#startup-message-statustext h4 {
    font-weight: 500
}

.modal-footer,
.modal-header {
    border: none;
    padding: 16px 16px 20px;
    text-align: left
}

.modal-header {
    border-top-left-radius: inherit;
    border-top-right-radius: inherit
}

.modal-footer {
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit
}

.form-control:focus,
.form-select:focus {
    border: 1px solid #afca04;
    box-shadow: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    -moz-transition: none;
    -webkit-transition: none
}

.modal-footer {
    justify-content: space-between
}

.with-devider {
    margin-top: 10px
}

.btn-toolbar.editor {
    background-color: #eee;
    padding: 10px 0 0
}

.btn-default.show,
.btn-info {
    background-color: #afca04;
    border-color: #afca04
}

.btn.btn-link.btn-user {
    background-color: transparent;
    color: var(--bs-btn-color);
    padding: 0;
    text-decoration: none
}

.btn.btn-link.btn-user:focus,
.btn.btn-link.btn-user:hover,
.btn.btn-link.btn-user:hover:focus {
    background-color: transparent;
    color: var(--bs-btn-hover-color);
    text-decoration: underline
}

.btn {
    border-radius: 2px
}

.btn-info.active,
.btn-info.focus,
.btn-info:active,
.btn-info:focus,
.btn-info:hover,
.open>.dropdown-toggle.btn-info {
    background-color: #afca04;
    border-color: #afca04
}

a.btn.editor {
    align-items: center;
    display: flex
}

.btn .active:not(.editor, .start),
.btn .focus:not(.editor, .start),
.btn:active:focus:not(.editor, .start),
.btn:active:not(.editor, .start),
.btn:focus:not(.editor, .start),
.btn:hover:not(.editor, .start),
.open>.dropdown-toggle .btn:not(.editor, .start) {
    background-color: #c7d92b;
    box-shadow: none;
    color: #fff;
    outline: none
}

.btn:not(.editor, .galleryLike, .start) {
    background-color: #8a2a90;
    border: none;
    border-radius: 2px;
    box-shadow: none;
    color: #fff;
    cursor: pointer;
    font-size: 16px;
    margin-left: 0;
    margin-right: 16px
}

button.editor {
    background-color: #dedede;
    border-radius: 2px
}

button.editor:hover {
    background-color: #eee
}

.open>.dropdown-toggle.simbtn.btn,
.simbtn.btn.active,
.simbtn.btn.focus,
.simbtn.btn:active,
.simbtn.btn:active:focus,
.simbtn.btn:focus,
.simbtn.btn:hover {
    background-color: #f29400
}

#simEditButtons>.typcn-chart-line-outline {
    fill: #bacc1e
}

.simKey:hover {
    cursor: pointer
}

.fixed-table-toolbar .btn:not(.start) {
    background-color: #bacc1e;
    border: none;
    border-radius: 2px;
    box-shadow: none;
    color: #fff;
    cursor: pointer;
    font-size: 24px;
    height: 48px;
    margin-left: 0;
    margin-right: 4px;
    width: 48px
}

.fixed-table-toolbar button.btn:last-child {
    margin-right: 0
}

.fixed-table-toolbar .btn:hover:not(.start) {
    background-color: #c7d92b
}

.btn-group.pull-right>.btn:last-child {
    margin-right: 0
}

table .typcn-chevron-left:before,
table .typcn-chevron-right:before,
table .typcn-flow-merge:before {
    display: inline-block;
    transform: rotate(-90deg)
}

table:not(#robotTable) [data-bs-toggle=collapse]:after {
    content: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 32 32'><path d='M24.267 17.733l-8.267-8.4-8.267 8.4c-0.267 0.267-0.4 0.667-0.4 0.933s0.133 0.667 0.4 0.933c0.267 0.267 0.533 0.4 0.933 0.4h14.667c0.4 0 0.667-0.133 0.933-0.4s0.4-0.667 0.4-0.933-0.133-0.667-0.4-0.933z'></path></svg>");
    float: right
}

.fixed-table-container thead th .both {
    background-image: url(../css/svg/arrow-unsorted.svg)
}

.fixed-table-container thead th .asc {
    background-image: url(../css/svg/arrow-sorted-up.svg)
}

.fixed-table-container thead th .desc {
    background-image: url(../css/svg/arrow-sorted-down.svg)
}

table:not(#robotTable) [data-bs-toggle=collapse].collapsed:after {
    transform: rotate(180deg)
}

.modal-body>.bootstrap-table {
    margin: 0
}

.blbtn {
    background-color: #fff;
    border: 1px solid #d8d8d8;
    border-radius: 2px;
    box-shadow: none;
    color: #333;
    cursor: pointer;
    font-size: 0;
    height: 48px;
    margin-bottom: 6px;
    margin-left: 0;
    margin-right: 2px;
    width: 48px
}

.blbtn:hover {
    background-color: #bacc1e
}

.modal-footer .btn+.btn {
    margin-left: 0;
    margin-right: 0
}

.btn-close {
    --bs-btn-close-focus-shadow: 0
}

.close:focus,
.close:hover {
    color: #333;
    opacity: 1
}

#popup-robot-main {
    visibility: hidden
}

.startupImages {
    margin-top: 0;
    position: relative;
    top: 50%
}

.robot-label {
    display: block;
    line-height: 14px
}

.robot-icon {
    font-size: 40px;
    position: relative;
    right: -16px
}

.typcn.robot-icon:before {
    margin: 0
}

.bootstrap-tagsinput {
    border: 10px solid #eee;
    color: #555;
    -webkit-hyphens: auto;
    hyphens: auto;
    overflow-x: auto;
    padding: 4px 6px;
    white-space: nowrap;
    width: 100%;
    word-break: break-word
}

.bootstrap-tagsinput .tag {
    background-color: #bbb;
    border-radius: .25em;
    color: #fff;
    display: inline;
    font-size: 75%;
    font-weight: 700;
    line-height: 1;
    margin-right: 2px;
    padding: .2em .6em .3em;
    text-align: center;
    vertical-align: baseline;
    white-space: nowrap
}

.dropdown-menu .typcn:before {
    margin-right: 6px
}

#toolboxDiv>.nav-tabs .typcn:before {
    position: relative;
    top: 1px
}

.blbtn.typcn:before {
    font-size: 36px;
    margin-right: 0
}

.bootstrap-table .typcn:before {
    margin-right: 0
}

.bootstrap-table .no-records-found td {
    color: #333
}

.bootstrap-table .fixed-table-container .fixed-table-body .fixed-table-loading {
    background-color: #e9ecef
}

.input-typcn:before {
    font-size: 22px;
    left: -1px;
    position: relative;
    top: 4px
}

label.form-invalid {
    background: #ddd;
    background: hsla(0, 0%, 87%, .9);
    border-radius: 2px;
    color: #e2001a;
    font-size: 16px;
    font-weight: 400;
    padding: 6px;
    position: relative;
    width: 100%;
    z-index: 10
}

label.form-invalid:after {
    border: 6px solid transparent;
    border-top-color: #e2001a;
    content: " ";
    height: 0;
    margin-top: 28px;
    pointer-events: none;
    position: absolute;
    right: 10%;
    width: 0;
    z-index: 20
}

#div-login-forms .form-group {
    position: relative
}

.form-group {
    width: 100%
}

.form-group .hint {
    background: #ddd;
    background: hsla(0, 0%, 87%, .9);
    border-radius: 2px;
    color: #333;
    font-size: 16px;
    margin-top: 12px;
    padding: 6px;
    position: relative;
    width: 100%;
    z-index: 11
}

.hint:before {
    border-color: transparent transparent #8fa402;
    border-style: solid;
    border-width: 0 6px 6px;
    content: "";
    height: 0;
    position: absolute;
    right: 75%;
    top: -6px;
    width: 0
}

.capitalLetters {
    text-transform: uppercase
}

.input-group-addon {
    background: #fff;
    border: 1px solid #afca04;
    border-radius: 2px;
    padding: 6px 6px 0 10px
}

.inner-addon {
    position: relative
}

.inner-addon .typcn {
    color: #c7c7c7;
    font-size: 20px;
    left: 0;
    padding: 0 6px;
    position: absolute
}

#programShareWith {
    margin-right: 15px
}

input.shareLabelInput.form-control,
select.shareLabelInput.form-control {
    margin: 0
}

legend {
    margin-bottom: 0
}

.progName:before {
    margin-right: 0
}

.bootstrap-table,
.table {
    --bs-table-color: #333
}

.bootstrap-table:not(#start .bootstrap-table),
.table:not(#robotTable) {
    cursor: pointer
}

.bootstrap-table a {
    color: #333;
    margin-left: 4px;
    margin-right: 4px;
    text-decoration: none
}

.bootstrap-table a.disabled {
    color: #bbb;
    pointer-events: none
}

.bootstrap-table .fixed-table-toolbar .float-left,
.bootstrap-table .fixed-table-toolbar .float-right {
    margin-top: 0
}

#nn-explore-table-user-input,
#nn-learn-table-user-input {
    margin-top: -46px !important
}

.bs-bars.float-left {
    width: 100%
}

td.bs-checkbox {
    padding: 14px 8px 0 !important
}

.bootstrap-table a:focus,
.bootstrap-table a:hover {
    color: #000;
    text-decoration: none
}

.bootstrap-table a>span {
    padding: 0
}

.galleryTable {
    position: absolute
}

.galleryTable tbody {
    display: flex;
    flex-wrap: wrap;
    overflow-x: hidden;
    overflow-y: auto
}

.galleryTable tr>td {
    background-color: transparent
}

.galleryTable .typcn:before {
    color: #eee;
    font-size: 80px;
    left: 50%;
    margin-left: -40px;
    position: absolute;
    top: 10px
}

a.bookmark.typcn:before {
    color: #39378b;
    font-size: 34px;
    left: 40px;
    opacity: .8;
    padding: 16px;
    position: relative;
    top: 16px;
    z-index: 30
}

a.bookmark {
    border-radius: 50%;
    display: block;
    height: 66px;
    margin: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 66px
}

a.bookmark.typcn:hover:before {
    font-size: 30px;
    opacity: 1;
    padding: 18px;
    top: 18px
}

#start .nav-link {
    background: none;
    border-bottom: .1875rem solid rgba(57, 55, 139, 0);
    color: rgba(0, 0, 0, .5);
    margin-right: 1.25rem;
    padding: 0 0 .625rem
}

#start .nav-link.active {
    border-bottom: .1875rem solid #39378b;
    color: #39378b;
    font-weight: 700
}

#start .nav-link:hover {
    color: #39378b
}

#start .dropdown-menu {
    border-radius: 5px
}

#start .dropdown-toggle.show:after {
    transform: rotate(180deg)
}

button.btnFilter.start {
    background-color: #fff;
    border: none;
    border-radius: 5px !important;
    color: #39378b;
    display: inline-block;
    font-weight: 700;
    margin-left: 6px !important;
    padding: .9375rem;
    text-decoration: none
}

button.btnFilter.start:hover,
button.filter.start.show {
    background: #39378b;
    color: #fff
}

#start .fixed-table-toolbar {
    min-height: 74px
}

#start .galleryTable button.pick.start {
    border-radius: 5px 0;
    float: right;
    margin: 12px -9px -9px 0;
    padding: 10px 50px 10px 15px
}

#start .galleryTable button.pick.start,
button#more.start {
    background-color: #39378b;
    color: #fff;
    display: inline-block;
    position: relative;
    text-decoration: none
}

button#more.start {
    border-radius: 5px;
    margin: 0 0 20px;
    padding: 10px;
    width: auto
}

#start div.start.typcn {
    position: relative
}

#start .galleryTable button.pick.start:before {
    font-size: 24px;
    margin: 0;
    position: absolute;
    right: 0;
    transform: translate(0);
    transition-duration: .3s
}

#start .galleryTable button.pick.start:hover:before {
    transform: translate(5px);
    transition-duration: .3s
}

#start .galleryTable div.start.typcn:hover {
    background-color: red
}

#start .fixed-table-body,
#start .fixed-table-container.fixed-height {
    border: none;
    height: auto !important;
    margin: 0 -1.5em
}

#start .galleryTable.table {
    position: relative
}

#start .galleryTable td {
    background-color: #fff;
    border-radius: 5px;
    color: #333
}

.table-hover>tbody>tr:hover>* {
    --bs-table-color-state: 0;
    --bs-table-bg-state: 0
}

a.page-link {
    --bs-pagination-active-bg: #bacc1e;
    --bs-pagination-active-border-color: #bacc1e
}

a.page-link:focus,
a.page-link:hover {
    box-shadow: none
}

.galleryIcon.typcn:before {
    color: #fff;
    font-size: 24px;
    font-weight: 700;
    left: 40px;
    position: relative;
    top: 4px
}

.fixed-table-container.fixed-height.has-card-view {
    overflow: auto
}

span.card-view-title {
    min-width: auto !important
}

.tutorialIcon.typcn:before {
    color: #fff;
    display: inline-block;
    font-size: 24px;
    left: 0;
    margin-left: 0;
    margin-right: 12px;
    position: relative;
    top: 0;
    width: 1.5em
}

div.imgSol img,
div.imgSol svg {
    max-width: 100%;
    overflow: hidden
}

#galleryList .fixed-table-toolbar .pull-left {
    flex: 1
}

#galleryList .pull-right.search {
    display: none
}

.listToolbar {
    display: flex;
    justify-content: space-between;
    position: absolute;
    top: 10px
}

.filter,
.form-control:not(#start .fixed-table-toolbar>.float-right>.form-control) {
    background-color: #fff;
    border: 1px solid #afca04;
    border-radius: 2px;
    height: 48px;
    padding-bottom: 0;
    padding-top: 0
}

.form-control:not(#start .fixed-table-toolbar>.float-right>.form-control) {
    -webkit-appearance: auto;
    -moz-appearance: auto;
    appearance: auto
}

#start .fixed-table-toolbar>.float-right>.form-control {
    border-color: #39378b;
    height: 54px;
    margin-left: 6px
}

.search>label {
    margin-left: 6px;
    margin-top: 12px;
    max-width: 100%;
    white-space: nowrap
}

.search.float-right {
    max-width: calc(100% - 100px)
}

.cardViewName {
    font-size: 24px;
    -webkit-hyphens: auto;
    hyphens: auto;
    margin-bottom: 12px;
    margin-top: 80px;
    max-height: 34px;
    min-height: 34px;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    word-break: break-all
}

.cardViewName,
.robotName {
    font-weight: 700;
    text-align: center
}

.robotName {
    font-size: 20px;
    max-height: 52px;
    min-height: 52px
}

.robotImage {
    cursor: pointer;
    height: 0;
    padding-bottom: 60%;
    position: relative;
    width: 100%
}

.robotImage img {
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%)
}

#start button.accordion-button {
    padding: 6px 12px
}

#start label.form-check-label {
    margin-left: 12px;
    margin-top: 4px
}

.button,
.button-big,
.button-big--arrow,
.button-big--primary:after,
.button-big--quaternary:after,
.button-big--secondary:after,
.button-big--tertiary:after,
.button-big.icon:after,
.transition {
    transition: all .3s
}

h1,
h2,
h3,
h4,
h5 {
    font-weight: 700
}

h1 {
    margin-bottom: 30px
}

h1,
h2 {
    font-size: 30px;
    line-height: 40px
}

h2 {
    margin-bottom: 20px
}

h3 {
    font-size: 30px;
    line-height: 40px;
    margin-bottom: 30px
}

h4,
h5 {
    font-size: 20px;
    line-height: 30px
}

.tint {
    color: #fff;
    display: inline-block;
    margin: 0 -10px;
    mix-blend-mode: multiply;
    padding: 10px 20px
}

.tint--primary {
    background: #39378b;
    position: relative;
    top: 5px;
    transform: rotate(1deg)
}

.tint--secondary {
    background: #fdc300;
    transform: rotate(-1deg)
}

.tint--tertiary {
    background: #8a2a90;
    transform: rotate(-2deg)
}

.tint--quaternary {
    background: #88bce2;
    position: relative;
    top: -8px;
    transform: rotate(1deg)
}

p {
    font-size: 16px;
    line-height: 24px;
    margin-bottom: 15px
}

p:last-child {
    margin-bottom: 0
}

p.teaser {
    font-size: 20px;
    line-height: 30px
}

p.teaser:last-child {
    margin-bottom: 15px
}

p.teaser+.button {
    margin-top: 20px
}

a {
    color: #39378b;
    text-decoration: underline
}

@media (hover:hover) {
    a:hover {
        cursor: pointer;
        text-decoration: none
    }
}

.button-big--arrow,
.button-big--primary:after,
.button-big--quaternary:after,
.button-big--secondary:after,
.button-big--tertiary:after,
.button-big.icon:after {
    background-repeat: no-repeat;
    background-size: contain;
    bottom: 15px;
    content: "";
    height: 30px;
    position: absolute;
    right: 20px;
    width: 30px
}

@media (hover:hover) {

    .button-big--arrow:hover,
    .button-big--primary:hover:after,
    .button-big--quaternary:hover:after,
    .button-big--secondary:hover:after,
    .button-big--tertiary:hover:after,
    .button-big.icon:hover:after {
        right: 15px
    }
}

.button {
    border-radius: 5px;
    display: inline-block;
    font-weight: 700;
    padding: 15px;
    text-decoration: none
}

.button--light {
    background: #fff;
    color: #39378b
}

.button.show {
    background: #39378b;
    color: #fff
}

@media (hover:hover) {
    .button:hover {
        background: #39378b;
        color: #fff
    }
}

.button-big {
    border-radius: 5px;
    color: #000;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 10px 80px 10px 15px;
    text-decoration: none
}

@media (min-width:768px) {
    .button-big {
        padding: 15px 15px 50px
    }
}

@media (min-width:992px) {
    .button-big {
        padding: 15px 80px 15px 20px
    }
}

.button-big--primary {
    background: rgba(57, 55, 139, .1);
    border: 1px solid rgba(57, 55, 139, .5);
    position: relative
}

.button-big--primary:after {
    background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%2339378B"><path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z"/></svg>')
}

@media (hover:hover) {
    .button-big--primary:hover {
        background: rgba(57, 55, 139, .2);
        border: 1px solid #39378b
    }
}

.button-big--primary.icon {
    background: #39378b
}

.button-big--secondary {
    background: rgba(253, 195, 0, .1);
    border: 1px solid rgba(253, 195, 0, .5);
    position: relative
}

.button-big--secondary:after {
    background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%23FDC300"><path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z"/></svg>')
}

@media (hover:hover) {
    .button-big--secondary:hover {
        background: rgba(253, 195, 0, .2);
        border: 1px solid #fdc300
    }
}

.button-big--secondary.icon {
    background: #fdc300
}

.button-big--tertiary {
    background: rgba(51, 184, 202, .1);
    border: 1px solid rgba(51, 184, 202, .5);
    position: relative
}

.button-big--tertiary:after {
    background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%2333B8CA"><path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z"/></svg>')
}

@media (hover:hover) {
    .button-big--tertiary:hover {
        background: rgba(51, 184, 202, .2);
        border: 1px solid #33b8ca
    }
}

.button-big--tertiary.icon {
    background: #33b8ca
}

.button-big--quaternary {
    background: rgba(136, 188, 226, .1);
    border: 1px solid rgba(136, 188, 226, .5);
    position: relative
}

.button-big--quaternary:after {
    background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%2388BCE2"><path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z"/></svg>')
}

@media (hover:hover) {
    .button-big--quaternary:hover {
        background: rgba(136, 188, 226, .2);
        border: 1px solid #88bce2
    }
}

.button-big--quaternary.icon {
    background: #88bce2
}

.button-big.icon {
    border: none;
    color: #fff;
    padding: 15px 80px 10px 15px
}

@media (min-width:992px) {
    .button-big.icon {
        padding: 40px 80px 40px 40px
    }
}

.button-big.icon:after {
    background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%23fff"><path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z"/></svg>')
}

@media (hover:hover) {
    .button-big.icon:hover {
        box-shadow: 0 20px 50px rgba(0, 0, 0, .05)
    }
}

.button-big.icon svg {
    fill: #fff;
    align-self: flex-start;
    height: 25px;
    margin-bottom: 20px;
    width: auto
}

section {
    width: 100%
}

.section--white {
    background: #fff
}

.section--light {
    background: #e9ecef
}

#start {
    background: #fff
}

#startup-message-statustext {
    background: #39378b;
    border-radius: 5px;
    bottom: 50px;
    box-shadow: 0 0 20px rgba(0, 0, 0, .25);
    color: #fff;
    max-width: 450px;
    position: absolute;
    right: 50px;
    width: 100%;
    z-index: 999
}

#startup-message-statustext h4,
#startup-message-statustext p {
    padding: 20px
}

.nepo,
.nepo:before {
    display: inline-block
}

.nepo:before {
    background-image: url(img/nepo.svg);
    background-position: 0 100%;
    background-repeat: no-repeat;
    background-size: contain;
    content: "";
    height: 20px;
    margin-right: 5px;
    width: 85px
}

.teaser-news {
    background: #e9ecef;
    border-radius: 5px;
    display: flex;
    padding: 15px
}

@media (min-width:992px) {
    .teaser-news {
        padding: 40px
    }
}

.teaser-news--header {
    font-size: 20px;
    font-weight: 700;
    line-height: 30px;
    margin-bottom: 10px
}

.teaser-news--body h3 {
    color: #39378b
}

.teaser-news--image {
    height: auto;
    width: 100%
}

#start footer {
    border-top: 1px solid rgba(0, 0, 0, .2);
    padding-bottom: 96px;
    width: 100%
}

#start footer img {
    width: 100%
}

#start footer .nav-link,
#start footer p {
    font-size: 14px;
    line-height: 20px;
    margin-right: 0
}

#start footer .nav-item,
#start footer .nav-item:hover {
    background: none
}

#start footer .nav-link {
    color: #6c757d;
    padding: 5px 0
}

@supports (background:-webkit-named-image(i)) {
    .flexbox-fix {
        display: flex
    }
}

.galleryTable tr,
.galleryTable.table {
    border: .75em solid #e9ecef;
    border-collapse: collapse
}

#share-with-gallery .galleryTable tr,
#share-with-gallery .galleryTable.table {
    border-color: #fff
}

div.galleryLike {
    bottom: -20px;
    color: #fff;
    text-align: center
}

div.galleryLike a>span {
    color: #fff
}

button.galleryLike.btn {
    border: 2px solid #fff;
    border-radius: 2px;
    color: #fff;
    opacity: .75
}

button.galleryLike.btn:active,
button.galleryLike.btn:focus,
button.galleryLike.btn:focus:active,
button.galleryLike.btn:hover {
    background-color: inherit;
    font-weight: 600;
    opacity: 1
}

div.cardViewDescription {
    -webkit-line-clamp: 2;
    margin-bottom: 12px;
    min-height: 42px
}

div.cardViewDescription,
div.cardViewInfo {
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
    position: relative;
    text-overflow: ellipsis;
    word-break: break-word
}

div.cardViewInfo {
    -webkit-line-clamp: 1
}

div.cardViewLabel {
    display: inline-block;
    min-width: 30%
}

.galleryDescription:before,
.tutorialOverview:before {
    bottom: 0;
    content: "...";
    position: absolute;
    right: 0
}

.galleryDescription:after,
.tutorialOverview:after {
    content: "";
    height: 2.5em;
    margin-top: -.3em;
    position: absolute;
    right: 0;
    width: 1em
}

.galleryDescription.color0:after,
.tutorialOverview.color0:after {
    background: #33b8ca
}

.galleryDescription.color1:after,
.tutorialOverview.color1:after {
    background: #ebc300
}

.galleryDescription.color2:after,
.tutorialOverview.color2:after {
    background: #005a94
}

.galleryDescription.color3:after,
.tutorialOverview.color3:after {
    background: #179c7d
}

.galleryDescription.color4:after,
.tutorialOverview.color4:after {
    background: #f29400
}

.galleryDescription.color5:after,
.tutorialOverview.color5:after {
    background: #e2001a
}

.galleryDescription.color6:after,
.tutorialOverview.color6:after {
    background: #eb6a0a
}

.galleryDescription.color7:after,
.tutorialOverview.color7:after {
    background: #8fa402
}

.galleryDescription.color8:after,
.tutorialOverview.color8:after {
    background: #bacc1e
}

.galleryDescription.color9:after,
.tutorialOverview.color9:after {
    background: #9085ba
}

.galleryDescription.color10:after,
.tutorialOverview.color10:after {
    background: #ff69b4
}

.galleryDescription.color11:after,
.tutorialOverview.color11:after {
    background: #df01d7
}

.galleryAuthor {
    height: 22px;
    overflow: hidden;
    word-break: break-all
}

.galleryLike.typcn:before {
    color: #fff;
    font-size: 16px;
    position: inherit
}

.galleryTags {
    background-color: inherit;
    border: none;
    box-shadow: none;
    height: 34px;
    line-height: 34px;
    overflow: hidden;
    padding: 0;
    text-decoration: none;
    white-space: normal
}

.galleryTags input {
    height: 0
}

.galleryTags>.tag {
    background-color: #bbb;
    line-height: 34px;
    white-space: normal
}

.galleryTable td {
    border: none !important;
    color: #fff;
    position: relative;
    width: 100vw
}

#galleryPreview tr {
    width: 100%
}

.dataTables_wrapper {
    margin: 0 68px
}

#confList table tbody tr.selected,
#confList table tbody tr:hover td:not(td:last-child),
#progList .fixed-table-container tbody .selected td,
#progList table tbody tr.selected,
#progList table tbody tr:hover td:not(td:last-child),
#relationsList table tbody tr.selected,
#relationsList table tbody tr:hover,
#userGroupList .fixed-table-container tbody .selected td,
#userGroupList table tbody tr.selected,
#userGroupList table tr:hover td:not(td:last-child),
#userGroupMemberList .fixed-table-container tbody .selected td,
#userGroupMemberList table tbody tr.selected {
    background-color: #bacc1e
}

a.delete:hover {
    color: #e2001a
}

a.gallery:hover,
a.load:hover,
a.share:hover {
    color: #bacc1e
}

.float-right.search.btn-group {
    max-width: calc(100% - 150px)
}

input[type=range] {
    -webkit-appearance: none;
    margin: 10px 0;
    width: 100%
}

input[type=range]:focus {
    outline: none
}

input[type=range]::-webkit-slider-runnable-track {
    animate: .2s;
    background: #bacc1e;
    border: 0 solid #000;
    border-radius: 2px;
    box-shadow: 0 0 0 #000;
    cursor: pointer;
    height: 8px;
    width: 100%
}

input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    background: #fff;
    border: 1px solid #333;
    border-radius: 2px;
    box-shadow: 0 0 0 #000;
    cursor: pointer;
    height: 24px;
    margin-top: -8.5px;
    width: 12px
}

input[type=range]:focus::-webkit-slider-runnable-track {
    background: #bacc1e
}

input[type=range]::-moz-range-track {
    animate: .2s;
    background: #bacc1e;
    border: 0 solid #000;
    border-radius: 2px;
    box-shadow: 0 0 0 #000;
    cursor: pointer;
    height: 8px;
    width: 100%
}

input[type=range]::-moz-range-thumb {
    background: #fff;
    border: 1px solid #333;
    border-radius: 2px;
    box-shadow: 0 0 0 #000;
    cursor: pointer;
    height: 24px;
    width: 12px
}

input[type=range]::-ms-track {
    animate: .2s;
    background: transparent;
    border-color: transparent;
    color: transparent;
    cursor: pointer;
    height: 8px;
    width: 100%
}

input[type=range]::-ms-fill-lower,
input[type=range]::-ms-fill-upper {
    background: #bacc1e;
    border: 0 solid #000;
    border-radius: 4px;
    box-shadow: 0 0 0 #000
}

input[type=range]::-ms-thumb {
    background: #fff;
    border: 1px solid #333;
    border-radius: 2px;
    box-shadow: 0 0 0 #000;
    cursor: pointer;
    height: 24px;
    width: 12px
}

input[type=range]:focus::-ms-fill-lower,
input[type=range]:focus::-ms-fill-upper {
    background: #bacc1e
}

.table-dark {
    --bs-table-bg: #898989;
    --bs-table-border-color: none;
    text-transform: uppercase
}

#confList table,
#progList table,
#show-relations table,
#showMultipleSimPrograms table thead {
    margin: 0;
    width: 100%
}

.updatedRow {
    color: #bacc1e
}

.table>tbody>tr>td,
.table>tbody>tr>th,
.table>thead>tr>td,
.table>thead>tr>th {
    padding: 9px
}

.dataTables_scrollBody {
    border-bottom: none !important
}

#confList .configurations,
#progList .programs,
#relationsList .relations {
    border-bottom: 1px solid #eee
}

#relationsListing {
    margin-bottom: 15px
}

#confList>h2,
#logList>h2,
#progList>h2 {
    margin-left: 68px
}

#create-user-group .modal-body {
    margin-bottom: 1em
}

#userGroupList .btn-group>.btn:not(.dropdown-toggle),
#userGroupMemberList .btn-group>.btn:not(.dropdown-toggle) {
    border-radius: 2px
}

#userGroupMemberTable .edit-member-name:not(.active),
#userGroupMemberTable .member-name:not(.active) {
    display: none
}

#userGroupMemberTable .btn {
    border: none;
    display: inline-block;
    font-size: 16px;
    height: calc(1.25em + 12px);
    margin-right: 0;
    vertical-align: top
}

#userGroupMemberTable.table-hover>tbody>tr:hover {
    background-color: transparent
}

#userGroupMemberTable .btn:active,
#userGroupMemberTable .btn:focus {
    box-shadow: none;
    outline: none
}

#userGroupMemberTable .member-name-column {
    display: inline-block;
    margin: -8px;
    padding: 8px;
    position: relative
}

#userGroupMemberTable tr.selected .member-name-column.active {
    background-color: hsla(0, 0%, 100%, .5)
}

#userGroupMemberTable .member-name {
    display: inline-block;
    font-size: 16px;
    line-height: 1.25;
    margin-left: 16px;
    padding: 7px 0
}

#userGroupMemberTable .edit-member-name,
#userGroupMemberTable .edit-member-name form {
    display: inline-block
}

#userGroupMemberTable .edit-member-name form {
    margin: 0;
    padding: 0
}

#userGroupMemberTable .edit-member-name form label.form-invalid {
    bottom: 0;
    left: 0;
    margin-bottom: 0;
    position: absolute;
    right: 0;
    transform: translateY(100%)
}

#userGroupMemberTable .edit-member-name form label.form-invalid:after {
    border-bottom-color: red;
    border-top-color: transparent;
    margin-top: 0;
    right: 25%;
    top: 0;
    transform: translateY(-100%)
}

#userGroupMemberTable .edit-member-name input.form-control {
    font-size: 16px;
    line-height: 1.25;
    margin: 0;
    padding: 4px 12px 4px 15px
}

#userGroupMemberTable .edit-member-name .btn.iais-loading-spin:before {
    animation: iais-loading-spin 1.2s linear infinite;
    display: inline-block
}

#simEditButtons>.btn-group {
    height: 48px;
    vertical-align: top;
    width: 48px
}

#simEditButtons>.btn-group.open button {
    background-color: #e7e7e7
}

#simEditButtons>.btn-group>.dropdown-menu {
    margin-top: 6px;
    min-width: 48px;
    width: 48px
}

#simEditButtons>.btn-group>.dropdown-menu>li>a {
    font-size: 28px;
    height: 35px;
    padding-left: 5px;
    padding-right: 0;
    text-align: center;
    text-decoration: none
}

.simChangeObject.disabled {
    color: #bbb;
    cursor: not-allowed
}

#simControl.typcn-media-stop,
#simStop {
    color: #e2001a !important
}

#simStop.disabled {
    color: #f6b3b9 !important;
    cursor: not-allowed
}

.disabled a,
li.disabled {
    color: #bbb;
    cursor: not-allowed;
    pointer-events: none
}

.disabled :hover,
.disabled:hover {
    background: inherit
}

#simButtons>.debug {
    color: #1c5a94
}

.typcn-media-play-outline.rotated:before {
    display: inline-block;
    transform: rotate(-90deg)
}

@keyframes iais-loading-spin {
    0% {
        transform: rotate(0deg)
    }

    to {
        transform: rotate(1turn)
    }
}

.pull-none .pull-right {
    margin-left: 3px
}

.pull-none .pull-left {
    margin-right: 3px
}

@media only screen and (max-width:992px) {
    #main-section {
        top: 60px
    }

    #logoShowStart img {
        height: 44px;
        margin-top: 8px;
        width: auto
    }

    #head-navigation-tabs>li>a.active {
        border-bottom: none
    }

    #head-navigation {
        padding-bottom: 8px
    }

    #roberta {
        bottom: -6px;
        height: 90px;
        right: -10px;
        width: 80px
    }

    .navbar-nav .open .dropdown-menu .dropdown-header,
    .navbar-nav .open .dropdown-menu>li>a {
        padding: 5px 15px 5px 36px
    }

    .navbar-default .navbar-nav .open .dropdown-menu>li>a {
        color: inherit
    }

    .modal-dialog.bigModal {
        min-width: 300px;
        width: 80%
    }

    #head-navigation-tabs li {
        float: none;
        overflow: hidden;
        width: auto
    }

    .log {
        margin: 16px
    }

    .dataTables_wrapper {
        margin: 0 16px
    }

    #confList>h2,
    #logList>h2,
    #progList>h2,
    #relationsList>h2 {
        margin-left: 16px
    }

    .navbar-fixed-bottom {
        border: 0;
        margin-bottom: 0;
        padding: 16px
    }

    .simWindow {
        left: 6px;
        top: 60px
    }

    .border-dotted {
        border-right: 0
    }
}

img.img-responsive {
    height: 140px;
    margin: 0 auto
}

.enjoyhint_close_btn {
    border: 2px solid #bacc1e
}

.enjoyhint_close_btn:active,
.enjoyhint_close_btn:hover {
    background: #c7d92b
}

@media print {
    svg.blocklySvg {
        overflow: visible
    }

    .nav,
    .navbar {
        display: block
    }

    .headNavigationTabs {
        margin-top: 59px;
        z-index: 1
    }

    .navbar-collapse {
        padding-left: 10px;
        padding-right: 10px
    }

    .collapse {
        display: block;
        visibility: visible
    }

    #blocklyDiv {
        border: none
    }

    div#simButtonsCollapse {
        display: none
    }

    .blocklyToolboxDiv {
        display: none !important
    }

    .blocklyMainBackground {
        stroke: none !important
    }

    #rightMenuDiv,
    g.blocklyButtons {
        display: none
    }

    .blocklyMainBackground {
        stroke: none
    }

    a#tabConfiguration {
        display: none
    }

    .nav-tabs>li {
        width: 100%
    }

    #headNavigationTabs {
        border: none
    }

    #head-navigation-tabs>li>a.active {
        border-bottom: 2px solid #000
    }

    g.blocklyBlockCanvas {
        transform: translate(-200px, -50px)
    }

    div#releaseInfo {
        display: none
    }
}

li.L0,
li.L1,
li.L2,
li.L3,
li.L5,
li.L6,
li.L7,
li.L8 {
    list-style-type: inherit !important
}

#tutorialRoberta {
    background-image: url(../css/svg/Roberta_zwinkernd.svg);
    background-repeat: no-repeat;
    background-size: 200px;
    bottom: -15%;
    height: 200px;
    position: absolute;
    right: -5%;
    width: 200px
}

.tutorialLevelStars {
    position: relative
}

.tutorialLevel.typcn:before {
    color: #fff;
    display: table-cell;
    font-size: 24px;
    left: 0;
    position: relative;
    top: 0
}

#tutorialOverview .modal-dialog {
    border: 2px solid #33b8ca;
    font-size: 16px
}

#tutorial-navigation,
#tutorialEnd {
    display: none
}

#tutorial-navigation ul {
    margin: 16px
}

ul#tutorial-close {
    float: right
}

#tutorialEnd a:before {
    font-size: 1.5em;
    line-height: 42px
}

#tutorial-close,
#tutorial-header,
.step {
    color: #333
}

#tutorial-navigation li {
    text-align: center
}

#tutorial-navigation li:last-child a:before {
    position: absolute;
    right: 3px;
    top: 3px
}

#tutorial-navigation li.step {
    background: #eaf0bb;
    float: left;
    height: 48px;
    list-style: none;
    padding: 0;
    text-align: center
}

#tutorial-navigation li.step.active {
    background: #bacc1e
}

#tutorial-navigation li a {
    box-sizing: border-box;
    color: inherit;
    display: inline-block;
    float: left;
    font-size: 24px;
    font-weight: 700;
    height: 48px;
    margin: 0 0 0 -15px;
    padding: 6px 8px 6px 16px;
    text-decoration: none;
    width: 48px
}

#tutorial-navigation li:first-child a {
    margin-left: 0;
    width: 48px
}

#tutorial-navigation li.step:after {
    background-image: url(../css/svg/step_connector.svg);
    content: " ";
    display: inline-block;
    height: 48px;
    width: 17px
}

#tutorial-navigation li.step.last:after {
    background-image: url(../css/svg/step_connector_last.svg)
}

#tutorial-navigation li.step.active:after {
    background-image: url(../css/svg/step_connector_active.svg)
}

#tutorial-navigation li.step.preActive:after {
    background-image: url(../css/svg/step_connector_before_active.svg)
}

#tutorial-navigation li.step.last.active:after {
    background-image: url(../css/svg/step_connector_active_last.svg)
}

#tutorial-navigation .navbar-nav>.active>a,
#tutorial-navigation .navbar-nav>li>a:hover {
    background-color: transparent;
    color: #333
}

#tutorialNavs {
    left: 60px;
    position: relative
}

#tutorial-navigation a.typcn.typcn-delete {
    background: #fff;
    border: 6px solid #fff;
    color: #333;
    font-size: 36px;
    position: absolute;
    text-decoration: none;
    top: 24px
}

#tutorial-header {
    height: 92px;
    line-height: 76px;
    margin: 0;
    overflow: hidden;
    vertical-align: middle
}

#tutorialOverview>.modal-backdrop.fade.in {
    opacity: .6
}

#tutorialDiv.fromRight {
    background-color: #eee
}

#tutorialContent {
    background-color: #fff;
    font-size: 16px;
    height: 100%;
    margin: 10px;
    overflow-y: auto;
    padding: 16px
}

#tutorialContent .tip {
    list-style-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMzAiIHdpZHRoPSIzMiI+PGRlZnM+PHN0eWxlPi5jbHMtMXtmaWxsOiMxYTFhMTh9LmNscy0ye2ZpbGw6I2ZmZn08L3N0eWxlPjwvZGVmcz48ZyB0cmFuc2Zvcm09InNjYWxlKC4xKSIgaWQ9IkViZW5lXzIiIGRhdGEtbmFtZT0iRWJlbmUgMiI+PGcgaWQ9IkViZW5lXzEtMiIgZGF0YS1uYW1lPSJFYmVuZSAxIj48cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik0xMDQuNDUgMTgyLjYxYTIxLjE5IDIxLjE5IDAgMSAxIDYuMjEtMTUgMjEuMTggMjEuMTggMCAwIDEtNi4yMSAxNW0yLjcxLTMyLjY4YTI1IDI1IDAgMSAwIDUuNDMgOC4xMiAyNS4wOSAyNS4wOSAwIDAgMC01LjQzLTguMTIiLz48cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik0zMTYgMTYuN2ExLjc1IDEuNzUgMCAwIDEtLjk0LjIzaC0yMy42M3YtMy41OEgzMTVhMS43OSAxLjc5IDAgMCAxIDEgMy4zNW0tMzIuMjEtMTBhOS4xIDkuMSAwIDAgMC0xLjgtLjMxSDI1OC41M2E3LjkzIDcuOTMgMCAwIDEgNC0yLjM1IDExLjA3IDExLjA3IDAgMCAxIDIuODYtLjJoMTQuNzhhNy43NiA3Ljc2IDAgMCAxIDEuMzIuMiA4IDggMCAwIDEgNC40IDIuODQgOC4xMyA4LjEzIDAgMCAxIC44NiAxLjM3IDguNjEgOC42MSAwIDAgMC0zLTEuNTRtMi4xMSAxNi43MmE3Ljk0IDcuOTQgMCAwIDEtNC40MyAyLjggMTEuMTkgMTEuMTkgMCAwIDEtMi44Ni4yaC0xNC43NmE3LjI2IDcuMjYgMCAwIDEtMS4zMi0uMiA3LjkyIDcuOTIgMCAwIDEtNC0yLjMzaDIyLjM5YTExLjUxIDExLjUxIDAgMCAwIDEuNjktLjA5IDguNjQgOC42NCAwIDAgMCAxLjc4LS40NCA4LjU0IDguNTQgMCAwIDAgMi40Mi0xLjM3IDcuMzEgNy4zMSAwIDAgMS0uODkgMS40bS0yOS40Ny01di02LjYyYTggOCAwIDAgMSAuMTYtMS41NmgyMy44M2E3LjQ3IDcuNDcgMCAwIDEgMi4zMi4xOCA0LjkyIDQuOTIgMCAwIDEgLjM1IDkuMzYgNC44NiA0Ljg2IDAgMCAxLTEgLjI1IDcuMzcgNy4zNyAwIDAgMS0xLjE3IDBoLTI0LjMzYTggOCAwIDAgMS0uMTYtMS42Nm0tMy43MSAxLjY2aC00Ny40OGwtNC45LTkuODRoNTIuMzhhMTEuOTQgMTEuOTQgMCAwIDAtLjEyIDEuNTZ2Ni42N2ExMS42IDExLjYgMCAwIDAgLjExIDEuNjZtLTg3LjkxIDI1Ljc3YTM3LjExIDM3LjExIDAgMCAwLTE4LjQ0LTEwLjk0Yy0uODEtLjItMS42NC0uMzctMi40Ny0uNTFsNTEuNDUtMjUuNjFMMjA0IDI2LjI4Wm0zMC41NyAxMzIuOTVhMjkuNSAyOS41IDAgMCAxLS4zMSAzLjUxIDIxLjM0IDIxLjM0IDAgMCAxLTUuODQgMTIuMjcgMjAuODUgMjAuODUgMCAwIDEtMTIuNDUgNS40NCAzNC4xOCAzNC4xOCAwIDAgMS0zLjU2LjIzaC01NC42di02LjA2Yy4yNC0uMjYuNDYtLjUzLjctLjhoNDVjMS4xIDAgMi4zMSAwIDMuNDktLjA4YTI5IDI5IDAgMCAwIDMuNTctLjQzIDIzLjA5IDIzLjA5IDAgMCAwIDYuOTItMi40MSAxOC42OSAxOC42OSAwIDAgMCA1LjczLTQuODUgMjEuMDYgMjEuMDYgMCAwIDAgMy40My02LjUyIDI2Ljg0IDI2Ljg0IDAgMCAwIDEuMjktNy4xM1YzOC4ybDYuNjItMy4yOXYxNDMuODdtLTc3Ljg2IDEwLjc1aC0uMzd2LjQ3YTM2Ljc4IDM2Ljc4IDAgMCAxLTIuNSAyLjc5IDM2LjUgMzYuNSAwIDEgMSAyLjg3LTMuMjZNNjQuMTUgMjYzLjJ2LTY1LjM4YTM5LjMyIDM5LjMyIDAgMCAwIDUwLjYxIDB2NjUuMzhINjQuMTVabTY1IDMuODNhMzAuNzEgMzAuNzEgMCAwIDEgMzAuMzUgMjUuNzFjLjEzLjc5LjIzIDEuNTguMyAyLjM4bC4wNS43NUgxOS4wOHYtLjM3bC4wNS0uNmEzMC43NyAzMC43NyAwIDAgMSAyOC40NC0yNy44Yy44My0uMSAxLjYxLS4xIDIuNDMtLjFoNzkuMTNaTTUwLjA5IDE2Ni40NmE2MC40MSA2MC40MSAwIDAgMS0yNC45LTEwNC44NUEzNi41MiAzNi41MiAwIDAgMCAyNCA3MC44NmEzNyAzNyAwIDAgMCAyOC4xNyAzNiAzNy40MSAzNy40MSAwIDAgMCA2LjA3IDFjMSAuMDggMi4wNi4xIDMuMDYuMWg3NS44OGMxIDAgMiAwIDMuMDYtLjFhMzcuNDIgMzcuNDIgMCAwIDAgNi4wNy0xIDM1LjM4IDM1LjM4IDAgMCAwIDQuNTMtMS40M3Y2MC4zMWgtMjIuMDNhMzkuMzkgMzkuMzkgMCAwIDAtNzguNzMuNzVtMTM0Ljc5IDUuMzFhMjAuMTggMjAuMTggMCAwIDEtMy44NyAxMS40MyAxNC44MyAxNC44MyAwIDAgMS00LjUzIDMuODUgMTguOTIgMTguOTIgMCAwIDEtNS43NiAyIDI2IDI2IDAgMCAxLTMuMTIuMzljLTEuMDUuMDctMi4wOS4wNy0zLjI0LjA2aC00Mi4xYTM5LjE2IDM5LjE2IDAgMCAwIDYuNTktMjBoMjUuODh2LTY1Ljg3YTM3IDM3IDAgMCAwIDEyLjU4LTU0LjhsMTcuNi04Ljc2djEzMS42N1ptLTE1MC0xMjEuNGEzMy4xNiAzMy4xNiAwIDAgMSAyMy42OC0xMi42NmMuOTItLjA3IDEuODMtLjA5IDIuNzctLjFoNzUuODljLjk1IDAgMS44NSAwIDIuNzcuMWEzMy4yMiAzMy4yMiAwIDAgMSA1LjQ0IDY1LjM4IDM0IDM0IDAgMCAxLTUuNDIuODhjLS45Mi4wNy0xLjgyLjA5LTIuNzcuMDloLTc1LjljLTEgMC0xLjg1IDAtMi43Ny0uMDlhMzMuOTQgMzMuOTQgMCAwIDEtNS40NC0uODcgMzMuMjMgMzMuMjMgMCAwIDEtMTguMi01Mi43NG0yODIuOTQtNDAuMTVhNS42NSA1LjY1IDAgMCAwLTIuODYtLjcyaC0yMy44YTExLjc2IDExLjc2IDAgMCAwLTguNzgtOS4xOSAxMS44OSAxMS44OSAwIDAgMC0yLS4zaC0xNi43NmExMi4yIDEyLjIgMCAwIDAtMiAuMjggMTEuNzQgMTEuNzQgMCAwIDAtNi41NiA0LjE0IDExLjI0IDExLjI0IDAgMCAwLTEuMjUgMS45NGgtNTUuNDRMMTk3IDMuNjRsLTYwLjUxIDMwLjEzSDYxLjMzYy0xIDAtMiAwLTMuMDYuMUEzNyAzNyAwIDAgMCAzMS45MSA0OGEzNi4yMiAzNi4yMiAwIDAgMC00LjQzIDcuMjNsLS4xMS0uMTVhNjQuMjYgNjQuMjYgMCAwIDAgMjIuOCAxMTUuMzIgMzkuMTQgMzkuMTQgMCAwIDAgMTAuMTYgMjMuNzV2NjlINTBjLS44OCAwLTEuNzkgMC0yLjY4LjA5YTM0LjU0IDM0LjU0IDAgMCAwLTMyIDMxLjI2bC0uMDYuNjctLjA1LjkxYzAgLjg0IDAgMS42OC0uMDUgMi41M3YuOTRjMCAuMDguMDUuMDYuMS4wNmgxNDguNDFjLjA3IDAgLjA5IDAgLjA4LS4wOHYtNC43OWMtLjA3LS45LS4xOS0xLjc5LS4zNC0yLjY4YTMzLjg0IDMzLjg0IDAgMCAwLTEuMjktNS4yNCAzNC42MSAzNC42MSAwIDAgMC0zMi44My0yMy42N2gtMTAuN1YyMDRoNTQuNjVhMzkuNDUgMzkuNDUgMCAwIDAgNC0uMjUgMjguNzEgMjguNzEgMCAwIDAgNy44LTIgMjEuODEgMjEuODEgMCAwIDAgNi44Ni00LjUgMjIuNDYgMjIuNDYgMCAwIDAgNC43LTYuNzEgMjguNDcgMjguNDcgMCAwIDAgMi4yNy03LjczIDMyLjI2IDMyLjI2IDAgMCAwIC4zNC00VjE3Ny4xNWMwLS4wNiAwIDAgMCAwVjMzbDEwLTUtMi4wNS00LjEyaDQ2Ljc0YTEwLjcgMTAuNyAwIDAgMCAxLjE4IDEuODUgMTEuNzggMTEuNzggMCAwIDAgNi41MiA0LjIxIDExLjUgMTEuNSAwIDAgMCAyIC4yOWgxNi44NWExMS41NCAxMS41NCAwIDAgMCAyLS4yOCAxMS43NiAxMS43NiAwIDAgMCA4Ljg5LTkuMjFIMzE1YTUuNjIgNS42MiAwIDAgMCAyLjgyLTEwLjUyIi8+PHBhdGggY2xhc3M9ImNscy0yIiBkPSJNNjcuOTQgOTYuMjZBMjQuNzYgMjQuNzYgMCAxIDEgOTIuNyA3MS40OWEyNC43NiAyNC43NiAwIDAgMS0yNC43NiAyNC43NyIvPjxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTQxLjQyIDcxLjVBMjYuNTEgMjYuNTEgMCAwIDEgNjcuOTQgNDVhMjYuNTEgMjYuNTEgMCAwIDEgMjYuNTEgMjYuNUEyNi41MSAyNi41MSAwIDAgMSA2Ny45NCA5OHYtMy41YTIzIDIzIDAgMCAwIDIzLTIzIDIzIDIzIDAgMCAwLTIzLTIzIDIzIDIzIDAgMCAwLTIzIDIzIDIzIDIzIDAgMCAwIDIzIDIzVjk4YTI2LjUxIDI2LjUxIDAgMCAxLTI2LjUyLTI2LjVaIi8+PHBhdGggY2xhc3M9ImNscy0xIiBkPSJNNjEgNjQuNTlhOS43NiA5Ljc2IDAgMSAxLTIuODYgNi45IDkuNzggOS43OCAwIDAgMSAyLjg2LTYuOU02Ny45NCA4NWExMy41IDEzLjUgMCAxIDAtOS41NS00IDEzLjQ4IDEzLjQ4IDAgMCAwIDkuNTUgNCIvPjxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTY3Ljk0IDc3LjY4YTYuMjkgNi4yOSAwIDAgMCAxLjY2LTEyLjM2djdoLTMuMzJ2LTdhNi4yOSA2LjI5IDAgMCAwIDEuNjYgMTIuMzYiLz48cGF0aCBjbGFzcz0iY2xzLTIiIGQ9Ik0xMzAuNyA5Ni4yNmEyNC43NiAyNC43NiAwIDEgMSAyNC43Ni0yNC43NiAyNC43NiAyNC43NiAwIDAgMS0yNC43NiAyNC43NiIvPjxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTEwNC4xOSA3MS40OUEyNi41MSAyNi41MSAwIDAgMSAxMzAuNyA0NWEyNi41MSAyNi41MSAwIDAgMSAyNi41MSAyNi41MUEyNi41MSAyNi41MSAwIDAgMSAxMzAuNyA5OHYtMy41YTIzIDIzIDAgMCAwIDIzLTIzIDIzIDIzIDAgMCAwLTIzLTIzIDIzIDIzIDAgMCAwLTIzIDIzIDIzIDIzIDAgMCAwIDIzIDIzVjk4YTI2LjUyIDI2LjUyIDAgMCAxLTI2LjUyLTI2LjUyWiIvPjxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTEyMy44IDY0LjU5YTkuNzcgOS43NyAwIDEgMS0yLjg2IDYuOSA5Ljc4IDkuNzggMCAwIDEgMi44Ni02LjlNMTMwLjcgODVhMTMuNSAxMy41IDAgMSAwLTkuNTUtNCAxMy40NyAxMy40NyAwIDAgMCA5LjU1IDQiLz48cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik0xMzAuNyA3Ny42OGE2LjI5IDYuMjkgMCAwIDAgMS42Ni0xMi4zNnY3SDEyOXYtN2E2LjI5IDYuMjkgMCAwIDAgMS42NiAxMi4zNiIvPjwvZz48L2c+PC9zdmc+)
}

#tutorialContent ul {
    list-style-image: none
}

#tutorialContent a {
    color: #f29400;
    font-weight: 700;
    text-decoration: none
}

.quiz.continue,
div#helpDiv {
    margin-top: 24px
}

.quiz.continue {
    border-top: 1px solid #eee;
    padding-top: 10px;
    text-align: right
}

.quiz.footer,
p.quiz {
    margin-top: 16px
}

.quiz.footer>.btn.right {
    margin-left: 16px
}

.quiz.answer {
    cursor: pointer;
    display: block;
    margin-top: 16px;
    padding-left: 34px;
    position: relative;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

.quiz.answer input {
    cursor: pointer;
    opacity: 0;
    position: absolute
}

.checkmark {
    background-color: #eee;
    border-radius: 2px;
    height: 25px;
    left: 2px;
    position: absolute;
    top: 2px;
    width: 25px
}

.quiz.answer input:checked~.checkmark,
.quiz.answer:hover input~.checkmark {
    background-color: #ccc
}

.quiz.answer>.checkmark:after {
    content: "";
    display: none;
    position: absolute
}

.quiz.answer input:checked~.checkmark:after {
    display: block
}

.quiz.answer>.checkmark:after {
    border: solid #fff;
    border-width: 0 3px 3px 0;
    height: 14px;
    left: 10px;
    top: 5px;
    transform: rotate(45deg);
    width: 6px
}

label.quiz.answer {
    border-radius: 4px;
    padding: 6px 10px 6px 36px
}

label.quiz.answer.correct {
    background-color: #c7d92b;
    border: 2px solid #c7d92b;
    padding: 4px 8px 4px 34px
}

label.quiz.answer.fail {
    border: 2px solid #e2001a;
    padding: 4px 8px 4px 34px
}

#welcomeHaribo {
    z-index: 9999
}

#welcomeHaribo .modal-dialog {
    width: 40vw
}

#simModal .fixed-table-header {
    background-color: #898989;
    color: #fff
}

#simModal .fixed-table-header table {
    color: #fff
}

.lds-ellipsis {
    display: inline-block;
    height: 100px;
    position: relative;
    width: 64px
}

.lds-ellipsis div {
    animation-timing-function: cubic-bezier(0, 1, 1, 0);
    background: #333;
    border-radius: 50%;
    height: 11px;
    position: absolute;
    top: 27px;
    width: 11px
}

.lds-ellipsis div:first-child {
    animation: lds-ellipsis1 .6s infinite;
    left: 6px
}

.lds-ellipsis div:nth-child(2) {
    animation: lds-ellipsis2 .6s infinite;
    left: 6px
}

.lds-ellipsis div:nth-child(3) {
    animation: lds-ellipsis2 .6s infinite;
    left: 26px
}

.lds-ellipsis div:nth-child(4) {
    animation: lds-ellipsis3 .6s infinite;
    left: 45px
}

@keyframes lds-ellipsis1 {
    0% {
        transform: scale(0)
    }

    to {
        transform: scale(1)
    }
}

@keyframes lds-ellipsis3 {
    0% {
        transform: scale(1)
    }

    to {
        transform: scale(0)
    }
}

@keyframes lds-ellipsis2 {
    0% {
        transform: translate(0)
    }

    to {
        transform: translate(19px)
    }
}

#simModal .fixed-table-header {
    background-color: #b3bfb8
}

td[lkey="Blockly.Msg.POPUP_DOWNLOAD_STEP_A_SENSEBOX"] {
    padding-bottom: 2.5em
}

pre code {
    white-space: inherit
}

#confirm,
#confirmCancel {
    text-transform: capitalize
}

.blinking {
    animation: blinkingBackground 1.2s infinite
}

.blinking>span {
    animation: blinkingForeground 1.2s infinite
}

@keyframes blinkingBackground {
    0% {
        background-color: #e2001a;
        border-bottom: 4px solid #e2001a
    }

    49% {
        background-color: #e2001a;
        border-bottom: 4px solid #e2001a
    }

    60% {
        background-color: transparent;
        border-bottom: 4px solid transparent
    }

    99% {
        background-color: transparent;
        border-bottom: 4px solid transparent
    }

    to {
        background-color: #e2001a;
        border-bottom: 4px solid #e2001a
    }
}

@keyframes blinkingForeground {
    0% {
        color: #fff
    }

    49% {
        color: #fff
    }

    60% {
        color: #333
    }

    99% {
        color: #333
    }

    to {
        color: #fff
    }
}

#blocklyDiv.debug path.blocklyPath {
    fill-opacity: .3
}

#blocklyDiv.debug path.blocklyPath.selectedBreakpoint {
    stroke-opacity: 1;
    stroke: purple;
    stroke-width: 2px;
    transition: none
}

#blocklyDiv.debug path.blocklyPath.breakpoint {
    stroke-opacity: 1;
    stroke: red;
    stroke-width: 2px;
    transition: none
}

.badge-primary {
    background-color: #f29400
}

#releaseInfo {
    background-color: #fbde00;
    border: 1px solid #d8d8d8;
    bottom: 60px;
    left: 70%;
    padding: 16px;
    position: fixed;
    right: 8px;
    z-index: 2999
}

#releaseInfo>span {
    display: inline-block !important;
    padding-right: 16px;
    vertical-align: middle
}

#releaseInfo>.no-button {
    position: absolute;
    right: 0;
    top: 0
}

@media (max-width:60em),
(max-width:800px) {
    #releaseInfo {
        left: 40%
    }
}

.port {
    cursor: default !important
}

.valuesContent .panel-heading {
    background-color: #ddd
}

.valuesContent .panel-group {
    margin: 20px 0 0
}

.panel-title>a:before {
    background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32"><path d="M24 14.667H8a2.668 2.668 0 0 0 0 5.334h16a2.668 2.668 0 0 0 0-5.334z"/></svg>');
    position: relative
}

.panel-title>a.collapsed:before,
.panel-title>a:before {
    background-size: 10px;
    content: "";
    display: inline-block;
    height: 10px;
    margin: 0 4px;
    width: 10px
}

.panel-title>a.collapsed:before {
    background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32"><path d="M24 13.333h-5.333V8a2.668 2.668 0 0 0-5.334 0l.095 5.333H8a2.668 2.668 0 0 0 0 5.334l5.428-.095L13.333 24a2.668 2.668 0 0 0 5.334 0v-5.428l5.333.095a2.668 2.668 0 0 0 0-5.334z"/></svg>')
}

.panel-title>a {
    color: inherit;
    display: inline-block;
    height: 100%;
    line-height: 1.5;
    text-decoration: none;
    width: 100%
}

#accordion .panel-body {
    border: none;
    max-height: 50vh;
    overflow: auto
}

input,
textarea {
    border: 1px solid #e9ecef;
    box-sizing: border-box;
    margin: 0;
    outline: none;
    padding: 10px
}

input[type=button] {
    -webkit-appearance: button;
    cursor: pointer
}

.btn input[type=radio] {
    clip: rect(0, 0, 0, 0);
    pointer-events: none;
    position: absolute
}

input::-webkit-inner-spin-button,
input::-webkit-outer-spin-button {
    -webkit-appearance: none
}

.input-group {
    clear: both;
    position: relative
}

.input-group input[type=button] {
    background-color: #ddd;
    transition: all .3s ease
}

.input-group .button-minus,
.input-group .button-plus {
    font-weight: 700;
    height: 32px;
    padding: 0;
    width: 32px
}

.input-group .quantity-field {
    display: inline-block;
    font-size: 14px;
    height: 32px;
    position: relative;
    resize: vertical;
    text-align: center;
    width: 32px
}

input[type=number] {
    -moz-appearance: textfield
}

#nn,
#nn-learn {
    height: 100%;
    width: 100%
}

#nn .nn-middle-size {
    font-size: 20px
}

#nn .nn-bold,
#nn-learn .nn-bold {
    font-weight: 700
}

#nn .nn-large-size {
    font-size: 28px
}

#nn-epoch-num {
    width: 80px
}

#nn-top-controls {
    -webkit-justify-content: space-around
}

#nn-learn-top-controls,
#nn-top-controls {
    background: #fff;
    border-bottom: 1px solid #ddd;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .08);
    display: flex;
    padding: 16px 0;
    width: 100%
}

#nn-learn-top-controls {
    justify-content: space-between
}

#nn-learn-top-controls .nn-control,
#nn-top-controls .nn-control {
    flex-grow: 0;
    margin-left: 10px;
    margin-top: 6px
}

#nn-show-math-all.nn-control {
    flex: 0 0 15%;
    margin-right: 10px
}

#nn-learn-show-iteration-all.nn-control,
#nn-show-iteration-all.nn-control,
#nn-show-next-neuron-all.nn-control {
    align-items: stretch;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    margin: 0 10px
}

#nn-learn-show-activation {
    padding: 8px;
    width: 100px
}

#nn-top-controls .nn-control .label {
    color: #777;
    display: block;
    font-size: 13px;
    font-weight: 300;
    margin-bottom: 6px
}

#nn-top-controls .nn-control .value {
    font-size: 24px;
    font-weight: 300;
    margin: 0
}

#nn-top-controls .nn-control .select,
.nn-input-div {
    position: relative
}

.nn-input-div {
    height: 36px
}

#goto-sim,
#learn-goto-sim {
    background-color: #fff;
    bottom: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
    color: #333;
    font-size: 36px;
    margin: 0;
    max-width: 48px;
    min-height: 48px;
    min-width: 48px;
    padding: 2px 0 0;
    position: absolute;
    right: 10px;
    z-index: 9999
}

#goto-sim:hover,
#learn-goto-sim:hover {
    background-color: #bacc1e
}

.nn-selection {
    background-color: #23b6ac;
    border: none;
    color: #fff
}

#nn-show-math,
.nn-selection {
    border-radius: 2px;
    min-height: 36px;
    padding: 6px
}

#nn-show-math {
    background-color: #f0f0f0
}

#nn-learn-show-iteration,
#nn-show-iteration,
#nn-show-next-neuron {
    background-color: #fafafa;
    color: rgba(0, 0, 0, .6);
    font-weight: 300;
    text-align: center
}

#nn-learn-main-part,
#nn-main-part {
    display: flex;
    justify-content: space-between;
    margin-bottom: 50px;
    margin-top: 30px;
    padding-top: 2px;
    position: relative
}

#nn-learn-main-part .output .mdl-checkbox__label.label,
#nn-main-part .output .mdl-checkbox__label.label {
    line-height: 1.7em
}

#nn-features,
#nn-learn-features {
    position: relative;
    width: 10%
}

#nn-features .nn-plus-minus-neurons {
    height: 44px;
    line-height: 28px;
    position: absolute;
    top: -58px;
    width: 120px
}

.nn-modal-content {
    background-color: #fff;
    border: 1px solid
}

.nn-popup-modal {
    bottom: 0;
    display: none;
    left: 50%;
    max-width: 90%;
    position: fixed;
    transform: translate(-50%);
    z-index: 1
}

.nn-modal-dialog {
    width: auto
}

button.nn-btn {
    background-color: #23b6ac;
    border: none;
    border-radius: 2px;
    color: #fff;
    font-size: 20px;
    height: 36px;
    margin-right: inherit;
    padding: 0;
    width: 36px
}

.nn-btn.nn-top-control-button {
    height: 27px;
    width: 27px
}

.nn-btn.nn-cancel {
    background-color: #cd5c5c
}

.nn-btn.nn-cancel:hover {
    background-color: #e8c0c0
}

#nn-features .nn-plus-minus-neuron-button.active-input {
    background-color: #bacc1e;
    box-shadow: inset 0 0 2px 2px #000
}

#nn-features .nn-plus-minus-neuron-button.active-hidden {
    background-color: #c7b7b7;
    box-shadow: inset 0 0 2px 2px #000
}

#nn-features .nn-plus-minus-neuron-button.active-output {
    background-color: #f29400;
    box-shadow: inset 0 0 2px 2px #000
}

#nn-test-data-upload,
#nn-training-data-upload {
    display: none
}

.nn-table-input {
    width: 100px
}

.nn-user-input-table-header {
    display: inline-block;
    width: 100%
}

.nn-input-background-color {
    background: #8fa40266
}

.nn-output-background-color {
    background: #f2940066
}

button.nn-btn:hover {
    background-color: #ade7e4
}

.nn-selection option {
    background-color: #fff;
    color: #333
}

#nn-top-controls .nn-num-layers-group {
    font-weight: 700
}

#nn-features .nn-plus-minus-neurons .nn-plus-minus-neuron-button {
    margin-right: 4px
}

#nn-features svg .main-label,
#nn-learn-features svg .main-label {
    fill: #333;
    font-size: 13px;
    font-weight: 300
}

#nn-features .nn-showval,
#nn-learn-features .nn-showval {
    text-anchor: start;
    cursor: pointer;
    display: block;
    font-size: 16px;
    font-weight: 700
}

#nn-features svg #markerArrow,
#nn-learn-features svg #markerArrow {
    fill: #000;
    stroke: #000;
    stroke-opacity: .2
}

#nn-features .node_input rect,
#nn-learn-features .node_input rect {
    fill: #8fa402;
    cursor: default
}

#nn-features .node_hidden rect,
#nn-learn-features .node_hidden rect {
    fill: #d3d3d3;
    cursor: default
}

#nn-features .node_output rect,
#nn-learn-features .node_output rect {
    fill: #f29400;
    cursor: default
}

#nn-features .core .link,
#nn-learn-features .core .link {
    stroke-dasharray: 9 1;
    stroke-dashoffset: 1
}

#nn-features .core .nn-weight-click {
    stroke-width: 14;
    stroke: #000;
    fill: none;
    cursor: pointer;
    opacity: 0
}

.nn-input {
    border: 2px solid #23b6ac;
    height: 100%;
    position: relative;
    top: -4px;
    width: 6em
}

#nn-learn-features .core .nn-weight-click {
    stroke-width: 14;
    stroke: #000;
    fill: none;
    cursor: pointer;
    opacity: 0
}

#nn-features .core .nn-weight-show-click,
#nn-learn-features .core .nn-weight-show-click {
    stroke-width: 14;
    stroke: gray;
    fill: none;
    cursor: pointer;
    opacity: .3
}

.nn-bias-click {
    cursor: pointer
}

#nn-features .canvas canvas,
#nn-learn-features .canvas canvas {
    border: 2px solid #000;
    border-radius: 3px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
    left: -2px;
    position: absolute;
    top: -2px
}

#nn-network {
    left: 0;
    position: absolute;
    top: 50px
}

#nn-editCard {
    background: #fff;
    border: 1px solid #aaa;
    border-radius: 5px;
    cursor: default;
    display: none;
    left: 240px;
    padding: 5px;
    position: absolute;
    z-index: 10
}

#nn-learn-training-bias-linechart,
#nn-learn-training-weight-linechart {
    height: 65px;
    width: 200px
}

#nn-learn-training-bias-linechart,
#nn-learn-training-weight-linechart,
#nn-nameCard {
    background: #fff;
    border: 1px solid #aaa;
    cursor: default;
    display: none;
    position: absolute;
    z-index: 10
}

#nn-nameCard {
    border-radius: 5px;
    left: 240px;
    padding: 5px
}

#nn-name-message {
    background: #fff;
    border: 12px 4px 4px;
    color: #333
}

#nn-table-user-input input {
    width: 100px
}

.nn-type-button {
    position: relative;
    top: 5px
}

.nn-btn.nn-finish-button {
    left: -4px;
    position: relative
}

.nn-metrics {
    align-content: center;
    display: flex;
    flex-basis: 25%;
    flex-wrap: nowrap;
    font-weight: 300;
    height: 60px;
    justify-content: space-evenly;
    margin-right: 10px;
    position: relative
}

#nn-learn-training-loss-linechart {
    border: 1px solid #333;
    flex: 0 0 40%;
    height: 100%;
    max-width: 200px
}

.nn-output-stats {
    padding: 10px
}

#nn-random-values-from-to {
    height: 36px;
    position: relative
}

#nn-random-values-from-to>input {
    width: 50px
}

#nn-random-values-from-to>span {
    position: relative;
    top: -4px
}

#nn-random-values-from-to>.nn-random-values-finished-button {
    padding-left: 5px;
    position: relative;
    top: 0
}

.nn-output-stats .value {
    color: rgba(0, 0, 0, .6);
    font-weight: 300;
    text-align: center
}

.nn-type {
    style: "font-size: 14px";
    height: 40px
}

canvas {
    display: block
}

.link {
    fill: none;
    stroke: #aaa;
    stroke-width: 1
}

g.column rect {
    stroke: none
}

#downloadType {
    padding: 8px 20px 20px;
    text-align: center
}

.downloadType {
    border: 1px solid #bacc1e;
    border-radius: 2px;
    cursor: pointer;
    font-size: 18px;
    margin: 12px;
    padding: 12px;
    text-align: center;
    text-decoration: none;
    width: 100%
}

#progressBar {
    height: 10px;
    width: 0
}

#progressBar,
.downloadType:hover {
    background-color: #bacc1e
}

#rcjScoringTable {
    table-layout: fixed;

    tr>td {
        max-width: 150px;
        min-width: 150px;
        padding: 0 15px
    }
}

#rcjStartStop.running {
    background-color: #e2001a
}

/*# sourceMappingURL=roberta.css.map */