@import url(https://fonts.googleapis.com/css?family=Open+Sans);
html {
    -ms-content-zooming:none
}

#loading-progress {
    width: 50%;
    margin:10px 0
}

#layoutLoadingProgressBarContainer {
    height: 50px;
    text-align: left;
    line-height:1.5
}

#FPS_Statistics {
    padding-left: 60px;
    padding-top:60px
}

#additionalInformationContainer {
    position: absolute;
    top: 10px;
    right:50px
}

#modeOfOperationString {
    padding-left:34px
}

#close_directUploadBtn, #direct-text-input, #directUploadBtn {
    border: 1px solid #34495e;
    width: 100%;
    margin-top: 5px;
    cursor:pointer
}

#di_controls > ul {
    list-style: none;
    margin: 0;
    padding:5px 0 0 5px
}

#progressBarContext {
    border-radius: 10px;
    background-color: #bdc3c7;
    height: 25px;
    border: 1px solid #000;
    margin:auto
}

#progressBarValue {
    border-radius: 9px;
    width: 0;
    background-color: #2980b9;
    height: 25px;
    line-height: 1.5;
    text-align:center
}

.dbEntry {
    background-color: #fff;
    color: #2980b9;
    padding: 10px;
    font-size: 14px;
    border: none;
    cursor:pointer
}

.dbEntrySelected {
    color: #2980b9;
    padding: 10px;
    font-size: 14px;
    border: none;
    cursor:pointer
}

.dbEntry:focus, .dbEntry:hover, .dbEntrySelected {
    background-color:#bdc3c7
}

.searchMenuEntry {
    background-color: #fff;
    bottom: 0;
    font-size: 14px;
    min-width: 50px;
    margin: 0;
    padding: 0;
    z-index: 99;
    border-radius: 4px 4px 0 0;
    border: 1px solid rgba(0, 0, 0, .15);
    -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
    box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
    box-sizing: border-box;
    border-bottom: none;
    display: none;
    position: absolute;
    list-style:none
}

.searchInputText {
    background-color: #fff;
    color: #000;
    border: #000;
    text-decoration: none;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    margin:0
}

iframe, img {
    border:none
}

.hidden {
    display:none !important
}

.clear {
    clear:both
}

a {
    color: #69c;
    text-decoration:none
}

a:hover {
    color:#3498db
}

#optionsArea a {
    color:#2980b9
}

#optionsArea a.highlighted {
    background-color:#d90
}

.toolTipMenu li.highlighted {
    background-color:#feb
}

#browserCheck {
    background-color: red;
    padding: 5px 0;
    position: absolute;
    text-align: center;
    width:100%
}

#browserCheck a {
    color:#fff
}

#browserCheck a:hover {
    text-decoration:underline
}

@-webkit-keyframes sbExpandAnimation {
    0% {
        width:78%
    }

    to {
        width:100%
    }
}

@-moz-keyframes sbExpandAnimation {
    0% {
        width:78%
    }

    to {
        width:100%
    }
}

@-o-keyframes sbExpandAnimation {
    0% {
        width:78%
    }

    to {
        width:100%
    }
}

@keyframes sbExpandAnimation {
    0% {
        width:78%
    }

    to {
        width:100%
    }
}

@-webkit-keyframes sbCollapseAnimation {
    0% {
        width:100%
    }

    to {
        width:78%
    }
}

@-moz-keyframes sbCollapseAnimation {
    0% {
        width:100%
    }

    to {
        width:78%
    }
}

@-o-keyframes sbCollapseAnimation {
    0% {
        width:100%
    }

    to {
        width:78%
    }
}

@keyframes sbCollapseAnimation {
    0% {
        width:100%
    }

    to {
        width:78%
    }
}

@-webkit-keyframes l_sbExpandAnimation {
    0% {
        width:0
    }

    to {
        width:200px
    }
}

@-moz-keyframes l_sbExpandAnimation {
    0% {
        width:0
    }

    to {
        width:200px
    }
}

@-o-keyframes l_sbExpandAnimation {
    0% {
        width:0
    }

    to {
        width:200px
    }
}

@keyframes l_sbExpandAnimation {
    0% {
        width:0
    }

    to {
        width:200px
    }
}

@-webkit-keyframes l_sbCollapseAnimation {
    0% {
        width:200px
    }

    to {
        width:0
    }
}

@-moz-keyframes l_sbCollapseAnimation {
    0% {
        width:200px
    }

    to {
        width:0
    }
}

@-o-keyframes l_sbCollapseAnimation {
    0% {
        width:200px
    }

    to {
        width:0
    }
}

@keyframes l_sbCollapseAnimation {
    0% {
        width:200px
    }

    to {
        width:0
    }
}

@-webkit-keyframes warn_ExpandAnimation {
    0% {
        top:-500px
    }

    to {
        top:0
    }
}

@-moz-keyframes warn_ExpandAnimation {
    0% {
        top:-500px
    }

    to {
        top:0
    }
}

@-o-keyframes warn_ExpandAnimation {
    0% {
        top:-500px
    }

    to {
        top:0
    }
}

@keyframes warn_ExpandAnimation {
    0% {
        top:-500px
    }

    to {
        top:0
    }
}

@-webkit-keyframes warn_CollapseAnimation {
    0% {
        top:0
    }

    to {
        top:-400px
    }
}

@-moz-keyframes warn_CollapseAnimation {
    0% {
        top:0
    }

    to {
        top:-400px
    }
}

@-o-keyframes warn_CollapseAnimation {
    0% {
        top:0
    }

    to {
        top:-400px
    }
}

@keyframes warn_CollapseAnimation {
    0% {
        top:0
    }

    to {
        top:-400px
    }
}

@keyframes msg_CollapseAnimation {
    0% {
        top:0
    }

    to {
        top:-400px
    }
}

@-webkit-keyframes warn_ExpandLeftBarAnimation {
    0% {
        left:0
    }

    to {
        left:100px
    }
}

@-moz-keyframes warn_ExpandLeftBarAnimation {
    0% {
        left:0
    }

    to {
        left:100px
    }
}

@-o-keyframes warn_ExpandLeftBarAnimation {
    0% {
        left:0
    }

    to {
        left:100px
    }
}

@keyframes warn_ExpandLeftBarAnimation {
    0% {
        left:0
    }

    to {
        left:100px
    }
}

@-webkit-keyframes warn_CollapseLeftBarAnimation {
    0% {
        left:100px
    }

    to {
        left:0
    }
}

@-moz-keyframes warn_CollapseLeftBarAnimation {
    0% {
        left:100px
    }

    to {
        left:0
    }
}

@-o-keyframes warn_CollapseLeftBarAnimation {
    0% {
        left:100px
    }

    to {
        left:0
    }
}

@keyframes warn_CollapseLeftBarAnimation {
    0% {
        left:100px
    }

    to {
        left:0
    }
}

@-webkit-keyframes warn_ExpandRightBarAnimation {
    0% {
        width:100%
    }

    to {
        width:78%
    }
}

@-moz-keyframes warn_ExpandRightBarAnimation {
    0% {
        width:100%
    }

    to {
        width:78%
    }
}

@-o-keyframes warn_ExpandRightBarAnimation {
    0% {
        width:100%
    }

    to {
        width:78%
    }
}

@keyframes warn_ExpandRightBarAnimation {
    0% {
        width:100%
    }

    to {
        width:78%
    }
}

@-webkit-keyframes warn_CollapseRightBarAnimation {
    0% {
        width:78%
    }

    to {
        width:100%
    }
}

@-moz-keyframes warn_CollapseRightBarAnimation {
    0% {
        width:78%
    }

    to {
        width:100%
    }
}

@-o-keyframes warn_CollapseRightBarAnimation {
    0% {
        width:78%
    }

    to {
        width:100%
    }
}

@keyframes warn_CollapseRightBarAnimation {
    0% {
        width:78%
    }

    to {
        width:100%
    }
}

body {
    background: #18202a;
    font-size: 14px;
    font-family: Open Sans, Helvetica, Arial, sans-serif;
    line-height: 1;
    overflow: hidden;
    position:fixed
}

body, main {
    height: 100%;
    margin: 0;
    padding: 0;
    width:100%
}

#canvasArea, main {
    position:relative
}

#canvasArea {
    margin: 0;
    padding: 0;
    width:78%
}

#canvasArea #graph {
    margin: 0 0 2px;
    background-color: #ecf0f1;
    width:100%
}

#canvasArea #graph, #canvasArea svg {
    box-sizing: border-box;
    overflow: hidden;
    padding:0
}

#canvasArea svg {
    margin:0
}

#logo {
    position: fixed;
    pointer-events:none
}

#logo h2 {
    color: #3498db;
    margin: 0;
    line-height: .7;
    text-align: center;
    font-size:24px
}

#logo h2 span {
    color: #34495e;
    font-size:16px
}

@media screen and (max-device-height: 800px) {
    #logo h2 {
        font-size:calc(8px + 1vmin)
    }

    #logo h2 span {
        font-size:calc(3px + 1vmin)
    }
}

@media screen and (max-height: 800px) {
    #logo h2 {
        font-size:calc(8px + 1vmin)
    }

    #logo h2 span {
        font-size:calc(3px + 1vmin)
    }
}

@media screen and (max-device-width: 1200px) {
    #logo h2 {
        font-size:calc(8px + 1vmin)
    }

    #logo h2 span {
        font-size:calc(3px + 1vmin)
    }
}

@media screen and (max-width: 1200px) {
    #logo h2 {
        font-size:calc(8px + 1vmin)
    }

    #logo h2 span {
        font-size:calc(3px + 1vmin)
    }
}

.checkboxContainer input, .checkboxContainer label {
    vertical-align:middle
}

.selected-ontology {
    background-color:#eee
}

#credits {
    border-top: 1px solid #bdc3c7;
    font-size:.9em
}

.slideOption {
    position: relative;
    padding: 8px 5px;
    outline:none
}

.slideOption .value {
    float: right;
    outline:none
}

.slideOption input[type=range] {
    box-sizing: border-box;
    margin: 0;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    border-radius: 3px;
    height: 12px;
    width: 100%;
    box-shadow: none;
    left: 0;
    position: relative;
    transition: all .5s ease;
    background-color:#eee
}

.slideOption input[type=range]::-webkit-slider-runnable-track {
    -webkit-appearance: none;
    background-color: #3071a9;
    height:3px
}

.slideOption input[type=range]::-moz-range-track {
    -webkit-appearance: none;
    background-color: #3071a9;
    height:3px
}

.slideOption input[type=range]:hover {
    outline:none
}

.slideOption input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    background-color: #fff;
    border-radius: 3px;
    border: 1px solid #000;
    transition: all .5s ease;
    height: 10px;
    width: 30px;
    outline: none;
    margin-top:-3px
}

.slideOption input[type=range]::-moz-range-thumb {
    -webkit-appearance: none;
    background-color: #fff;
    border-radius: 3px;
    border: 1px solid #000;
    transition: all .5s ease;
    height: 10px;
    width: 30px;
    outline:none
}

.slideOption input[type=range]::-moz-range-thumb:hover {
    background-color: #d90;
    outline:none
}

.slideOption input[type=range]::-webkit-slider-thumb:hover {
    background-color: #d90;
    outline:none
}

.slideOption input[type=range]:active, .slideOption input[type=range]:focus {
    outline:none
}

.slideOption input[type=range]::-moz-range-thumb:active, .slideOption input[type=range]::-moz-range-thumb:focus {
    outline:none
}

.slideOption input[type=range]::-webkit-slider-thumb:active, .slideOption input[type=range]::-webkit-slider-thumb:focus {
    outline:none
}

.slideOption input[type=range]:disabled {
    box-sizing: border-box;
    margin: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    border-radius: 3px;
    height: 12px;
    width: 100%;
    box-shadow: none;
    left: 0;
    position: relative;
    transition: all .5s ease;
    background-color:#787878
}

.slideOption input[type=range]:disabled::-webkit-slider-runnable-track {
    -webkit-appearance: none;
    background-color: #373737;
    height:3px
}

.slideOption input[type=range]:disabled::-moz-range-track {
    -webkit-appearance: none;
    background-color: #373737;
    height:3px
}

.slideOption input[type=range]:disabled {
    outline:none
}

.slideOption input[type=range]:disabled::-webkit-slider-thumb {
    -webkit-appearance: none;
    background-color: #363636;
    border-radius: 3px;
    border: 1px solid #aaa;
    transition: all .5s ease;
    height: 10px;
    width: 30px;
    margin-top:-3px
}

.slideOption input[type=range]:disabled::-moz-range-thumb {
    -webkit-appearance: none;
    border-radius: 3px;
    border: 1px solid #000;
    transition: all .5s ease;
    height: 10px;
    width: 30px;
    background-color: #aaa;
    outline:none
}

.slideOption input[type=range]:disabled::-webkit-slider-thumb {
    background-color: #aaa;
    outline:none
}

.slideOption input[type=range]:disabled:hover::-moz-range-thumb {
    background-color: #404040;
    outline:none
}

.slideOption input[type=range]:disabled:hover::-webkit-slider-thumb {
    background-color: #404040;
    outline:none
}

#detailsArea {
    top: 0;
    right: 0;
    bottom: 0;
    color: #bdc3c7;
    height: 100%;
    width: 22%;
    overflow-y: auto;
    overflow-x: hidden;
    position: fixed;
    border-left:1px solid #34495e
}

#detailsArea h1 {
    border-bottom: 1px solid #34495e;
    color: #ecf0f1;
    display: block;
    font-weight: 100;
    font-size: 1.5em;
    margin: 0;
    padding: 10px 0;
    text-align:center
}

#generalDetails {
    width: auto;
    box-sizing: border-box;
    height:100%
}

#generalDetails span #about {
    border-bottom: 1px solid #34495e;
    display: block;
    padding: 10px;
    text-align: center;
    word-wrap: break-word;
    color:#69c
}

#generalDetails h4 {
    background: #1b252e;
    color: #ecf0f1;
    display: block;
    font-size: 1.1em;
    font-weight: 100;
    margin: 0;
    padding: 10px 0;
    text-align:center
}

#detailsArea #generalDetails h5 {
    border-bottom: 1px solid #34495e;
    font-size: .9em;
    font-weight: 100;
    margin: 0;
    padding: 5px;
    text-align:center
}

#description {
    text-align:justify
}

.accordion-container p {
    font-size: .9em;
    line-height: 1;
    margin:5px 10px
}

.statisticDetails span {
    padding:10px
}

.statisticDetails div, .statisticDetails span {
    font-weight: 100;
    font-style: italic;
    margin:0px 0
}

.statisticDetails div {
    padding:0 0px
}

#selection-details .propDetails a {
    color:#69c
}

#selection-details .propDetails > span {
    font-weight: 100;
    font-style: italic;
    padding:0 10px
}

#selection-details #classEquivUri span, #selection-details #disjointNodes span {
    padding:0
}

#selection-details .propDetails div {
    font-weight: 100;
    font-style: italic;
    margin: 10px 0;
    padding: 0 10px;
    display:inline
}

#selection-details .propDetails div span {
    padding:0
}

.subclass {
    fill:#ecf0f1
}

.accordion-trigger {
    background: #24323e;
    cursor: pointer;
    padding:.5em
}

.accordion-trigger.accordion-trigger-active:before {
    padding-right: 4px;
    content: "\25BC"
}

.accordion-trigger:not(.accordion-trigger-active):before {
    padding-right: 4px;
    content: "\25BA"
}

.accordion-container.scrollable {
    max-height: 40%;
    overflow:auto
}

.small-whitespace-separator {
    height:3px
}

#language {
    background: transparent;
    border: 1px solid #34495e;
    color:#ecf0f1
}

#language option {
    background-color:#24323e
}

.converter-form:not(:first-child) {
    margin-top:5px
}

.converter-form label {
    display: inline-block;
    line-height:normal
}

.converter-form input {
    box-sizing: border-box;
    height: 20px;
    width: 74%;
    border:1px solid #34495e
}

.converter-form button {
    float: right;
    padding: 0;
    width: 25%;
    background-color:#ecf0f1
}

#file-converter-label, .converter-form button {
    cursor: pointer;
    height: 20px;
    border:1px solid #34495e
}

#file-converter-label {
    box-sizing: border-box;
    width:74%
}

#killWarning {
    cursor: pointer;
    color: #fff;
    font-weight:700
}

#copyBt {
    box-sizing: border-box;
    height: 20px;
    width: 31%;
    border:1px solid #34495e
}

#sidebarExpandButton {
    height: 24px;
    width: 24px;
    box-sizing: border-box;
    top: 10px;
    color: #000;
    float: right;
    position: absolute;
    right: 0;
    border: 1px solid #000;
    text-align: center;
    font-size: 1.5em;
    cursor:pointer
}

.dropdownMenuClass {
    height: 20px;
    float: right;
    border: 1px solid #34495e;
    background-color: #34495e;
    color: #fff;
    text-align: left;
    width:auto
}

#typeEditForm_datatype {
    padding-top:5px
}

#typeEditor, #typeEditor_datatype {
    width:165px
}

#leftSideBarCollapseButton {
    box-sizing: border-box;
    top: 50px;
    color: #000;
    position: absolute;
    left: 200px;
    border: 1px solid #000;
    cursor: pointer;
    width: 24px;
    height: 24px;
    font-size: 1.5em;
    text-align:center
}

#leftSideBarCollapseButton:hover, #sidebarExpandButton:hover {
    background-color:#d90
}

.spanForCharSelection {
    padding-left:25px
}

.nodeEditSpan {
    color: #000;
    background-color: #fff;
    text-align: center;
    border: none;
    padding-top:6px
}

.nodeEditSpan:focus {
    outline: none;
    border:none
}

.foreignelements {
    border:none
}

.foreignelements:focus {
    outline: none;
    border:none
}

#leftSideBarContent {
    color: #000;
    float: left;
    position: absolute;
    left: 0;
    background-color: #18202a;
    width: 100%;
    height:100%
}

#leftSideBarContent > h3 {
    color: #ecf0f1;
    display: block;
    font-size: 1.1em;
    font-weight: 100;
    margin: 0 0 5px;
    padding: 10px 0;
    text-align:left
}

#generalDetailsEdit {
    color:#ecf0f1
}

#generalDetailsEdit > div {
    padding:5px
}

#generalDetailsEdit > h3 {
    font-size: 1.1em;
    margin: 0 0 5px;
    padding:10px 0
}

#generalDetailsEdit > h3, .subAccordion {
    color: #ecf0f1;
    display: block;
    font-weight: 100;
    text-align:left
}

.subAccordion {
    font-size: .8em;
    margin: 0;
    padding:5px
}

.boxed, .subAccordionDescription {
    padding:0 5px
}

.separatorLineRight {
    border-right:1px solid red
}

.editPrefixButton:hover {
    color: #ff972d;
    cursor:pointer
}

.editPrefixIcon:hover {
    stroke: #ff972d;
    stroke-width: 1px;
    cursor:pointer
}

.editPrefixIcon {
    stroke: #fffff;
    stroke-width: 1px;
    cursor:pointer
}

.deletePrefixButton:hover {
    color: #ff972d;
    cursor:pointer
}

.deletePrefixButton {
    color: red;
    cursor:pointer
}

.invisiblePrefixButton {
    cursor: default;
    color:#18202a
}

#containerForAddPrefixButton {
    width: 100%;
    margin-top:5px
}

.roundedButton {
    border: 1px solid #000;
    border-radius: 20px;
    padding: 0 5px;
    background: #fff;
    cursor: pointer;
    color: #000;
    outline:none
}

.roundedButton:hover {
    background: #318638;
    cursor: pointer;
    color: #fff;
    outline:none
}

#prefixURL_Description {
    padding:5px 0 0
}

.prefixIRIElements {
    display: inline-block;
    padding: 3px;
    border-bottom: 1px solid #34495e;
    width:100%
}

.prefixInput {
    width: 30px;
    display: inline-block;
    margin-right:5px
}

.prefixURL {
    width: 100px;
    display: inline-block;
    paddig-left:5px
}

.selectedDefaultElement {
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    max-width:200px
}

#editHeader, #leftHeader {
    color: #ecf0f1;
    background-color: #394f5a;
    display: block;
    font-size: 1.1em;
    font-weight: 100;
    text-align:center
}

#leftHeader {
    padding: 10px 0;
    margin:0
}

.containerForDefaultSelection {
    color: #ecf0f1;
    display: block;
    font-size: 1.1em;
    font-weight: 100;
    margin: 0;
    padding: 10px 20px;
    text-align:left
}

.defaultSelected {
    color: #a15d05;
    background-color:#283943
}

.containerForDefaultSelection:hover {
    color: #f19505;
    background-color: #394f5a;
    display: block;
    cursor:pointer
}

#containerForLeftSideBar {
    top: 50px;
    float: left;
    position: absolute;
    background-color: #1b252e;
    left: 0;
    width: 200px;
    height: 200px;
    overflow-y: auto;
    overflow-x:hidden
}

#leftSideBar {
    width: 100%;
    background-color:#18202a
}

#loading-info {
    box-sizing: border-box;
    position: absolute;
    text-align: center;
    width: 100%;
    height: 80%;
    top:0
}

#loading-info > div {
    display: inline-block;
    color: #fff;
    background-color: #18202a;
    border-bottom-left-radius: 2px;
    border-bottom-right-radius:2px
}

#loading-info > * > * {
    padding:5px
}

#loading-info {
    pointer-events:none
}

#loading-progress {
    pointer-events: auto;
    min-width: 220px;
    border-radius:10px
}

#show-loadingInfo-button {
    font-size: 12px;
    color: #fff;
    cursor: pointer;
    text-align:center
}

#loadingIndicator_closeButton:hover {
    color: #ff972d;
    cursor:pointer
}

#loadingIndicator_closeButton {
    color: #ffe30f;
    cursor: pointer;
    padding-bottom: 5px;
    float:right
}

.busyProgressBar {
    background-color: #000;
    height: 25px;
    position: relative;
    animation:busy 2s linear infinite
}

@-webkit-keyframes busy {
    0% {
        left:0
    }

    50% {
        left:80%
    }

    to {
        left:0
    }
}

#bulletPoint_container {
    padding-left: 15px;
    margin-top: 0;
    margin-bottom:0
}

#bulletPoint_container > div {
    margin-left:-15px
}

#loadingInfo-container {
    box-sizing: border-box;
    text-align: left;
    line-height: 1.2;
    padding-top: 5px;
    overflow: auto;
    height: 120px;
    min-height: 40px;
    background-color:#3c3c3c
}

#error-description-button {
    margin: 5px 0 0;
    font-size: 12px;
    color: #69c;
    cursor: pointer;
    text-align:center
}

#error-description-container {
    box-sizing: border-box;
    text-align:left
}

#error-description-container pre {
    background-color: #34495e;
    padding: 2px;
    margin: 0;
    white-space: pre-wrap;
    max-height: calc(100vh - 125px);
    max-width: 75vw;
    overflow:auto
}

.spin {
    display: inline-block;
    -webkit-animation: spin 2s infinite linear;
    animation:spin 2s infinite linear
}

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform:rotate(0deg)
    }

    to {
        -webkit-transform: rotate(359deg);
        transform:rotate(359deg)
    }
}

@keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform:rotate(0deg)
    }

    to {
        -webkit-transform: rotate(359deg);
        transform:rotate(359deg)
    }
}

.truncate {
    max-width: 250px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow:ellipsis
}

.color-mode-switch {
    float: right;
    width: 90px;
    cursor: pointer;
    height: 20px;
    padding: 0;
    border: 0;
    color: #555;
    background-color: #eceeef;
    box-shadow:0 1px 4px rgba(0, 0, 0, .2), inset 0 0 3px rgba(0, 0, 0, .1)
}

.color-mode-switch:focus {
    outline-width:0
}

.color-mode-switch.active {
    color: #fff;
    background-color: #32cd32;
    box-shadow:inset 0 1px 4px rgba(0, 0, 0, .2), inset 0 0 3px rgba(0, 0, 0, .1)
}

.filterMenuButtonHighlight {
    background-color:#d90
}

@-webkit-keyframes buttonAnimation {
    0% {
        background-color:unset
    }

    to {
        background-color:#d90
    }
}

@-moz-keyframes buttonAnimation {
    0% {
        background-color:unset
    }

    to {
        background-color:#d90
    }
}

@-o-keyframes buttonAnimation {
    0% {
        background-color:unset
    }

    to {
        background-color:#d90
    }
}

@keyframes buttonAnimation {
    0% {
        background-color:unset
    }

    to {
        background-color:#d90
    }
}

.buttonPulse {
    -webkit-animation-name: buttonAnimation;
    -moz-animation-name: buttonAnimation;
    -o-animation-name: buttonAnimation;
    animation-name: buttonAnimation;
    -webkit-animation-duration: .5s;
    -moz-animation-duration: .5s;
    -o-animation-duration: .5s;
    animation-duration: .5s;
    -webkit-animation-iteration-count: 3;
    -moz-animation-iteration-count: 3;
    -o-animation-iteration-count: 3;
    animation-iteration-count: 3;
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    -o-animation-timing-function: linear;
    animation-timing-function:linear
}

#m_about {
    max-width: 200px;
    width: 200px;
    position:absolute
}

#m_modes {
    max-width: 160px;
    width: 160px;
    position:absolute
}

#m_filter {
    max-width: 170px;
    width: 170px;
    position:absolute
}

#m_gravity {
    max-width: 180px;
    width: 180px;
    position:absolute
}

#m_export {
    max-width: 160px;
    width: 160px;
    position:absolute
}

#exportedUrl {
    width:100px
}

#m_select {
    max-width: 300px;
    width: 300px;
    position:absolute
}

#m_config {
    max-width: 240px;
    width: 240px;
    position:absolute
}

#m_search {
    max-width: 250px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow:ellipsis
}

#swipeBarContainer {
    position: fixed;
    width: 77.8%;
    height: 40px;
    margin: 0;
    padding: 0;
    bottom:0
}

#menuElementContainer {
    margin: 0;
    padding: 0;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    text-align: right;
    list-style-type:none
}

#menuElementContainer > li {
    display: inline-block;
    box-sizing: border-box;
    text-align: left;
    position: relative;
    height: 40px;
    font-size: 14px;
    color: #fff;
    padding: 12px 0 0;
    margin-left:-4px
}

#menuElementContainer > li > a {
    color: #fff;
    padding:9px 12px 12px 30px
}

.menuElementSvgElement {
    height: 20px;
    width: 20px;
    display: block;
    position: absolute;
    top: 10px;
    left:8px
}

.btn_shadowed {
    background-color: #fefefe;
    box-shadow:1px 1px 1px gray
}

.reloadCachedOntologyIcon {
    height: 20px;
    width: 108px;
    display: block;
    position: absolute;
    top: 20px;
    left: 3px;
    border: 1px solid #000;
    border-radius: 10px;
    cursor:pointer
}

.reloadCachedOntologyIcon:disabled {
    background: #f4f4f4;
    cursor: auto;
    border:1px solid #a9a9a9
}

.reloadCachedOntologyIcon:hover {
    background: #d90;
    cursor:pointer
}

.disabledReloadElement {
    cursor: auto;
    background: #f4f4f4;
    pointer-events: auto;
    border: 1px solid #a9a9a9;
    color:#bbb
}

.disabledReloadElement:hover {
    cursor: auto;
    background: #eee;
    pointer-events:auto
}

#menuElementContainer > li > input {
    color: #000;
    padding: .1em .3em .1em 1.5em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width:120px
}

#menuElementContainer > li > a:hover {
    box-sizing: border-box;
    background: #1b252e;
    color:#bdc3c7
}

#empty:hover {
    box-sizing: border-box;
    background: #e1e1e1;
    color:#2980b9
}

#empty.disabled, .disabled {
    pointer-events: none;
    cursor: default;
    color:#979797
}

.toolTipMenu {
    -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
    box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
    box-sizing: border-box;
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, .15);
    border-bottom: none;
    border-radius: 4px 4px 0 0;
    bottom: 0;
    display: none;
    font-size: 14px;
    list-style: none;
    margin: 0;
    padding: 0;
    white-space: normal;
    position: absolute;
    z-index:99
}

.toolTipMenu > li:first-of-type {
    border:none
}

.toolTipMenu a {
    color:#2980b9
}

.toolTipMenu > li {
    border-top:1px solid #bdc3c7
}

.toolTipMenu li {
    color: #2980b9;
    display:block
}

#menuElementContainer > li:hover .toolTipMenu {
    display:block
}

#menuElementContainer li > ul.toolTipMenu li a:hover {
    background:#e1e1e1
}

#scrollLeftButton {
    height: 30px;
    width: 30px;
    padding: 5px 0 5px 10px;
    color: #fff;
    cursor: pointer;
    position: absolute;
    margin-top: -2px;
    font-size: 2em;
    background-color: #24323e;
    left:0
}

#scrollLeftButton:focus {
    outline:none
}

#scrollLeftButton:before {
    content: "<"
}

#scrollRightButton {
    height: 30px;
    width: 30px;
    padding: 5px 0 5px 10px;
    color: #fff;
    cursor: pointer;
    position: absolute;
    margin-top: -2px;
    font-size: 2em;
    background-color: #24323e;
    right:0
}

#scrollRightButton:focus {
    outline:none
}

#scrollLeftButton:hover, #scrollRightButton:hover {
    color:#bdc3c7
}

#scrollRightButton:before {
    content: ">"
}

#centerGraphButton, #zoomInButton, #zoomOutButton {
    border: 1px solid #000;
    text-align: center;
    margin: -1px 0 0;
    font-size: 1.5em;
    padding: 0;
    height:28px
}

.noselect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select:none
}

#zoomOutButton {
    line-height:22px
}

#centerGraphButton, #zoomInButton {
    line-height:25px
}

#zoomSlider > p:hover {
    background-color:#d90
}

#zoomSliderParagraph {
    color: #000;
    padding-top: 5px;
    margin: -1px 0 0;
    border: 1px solid #000;
    height:150px
}

p#zoomSliderParagraph:hover {
    background-color:#fff
}

#zoomSlider {
    width: 28px;
    margin-top: -2px;
    padding: 0;
    font-size: 1.5em;
    cursor: pointer;
    position: absolute;
    right: 20px;
    bottom: 20px;
    color: #000;
    box-sizing:border-box
}

#menuElementContainer > li > a:before {
    font-size: 1em;
    margin: 0;
    padding:0 6px 0 0
}

#menuElementContainer a.highlighted {
    background-color: #d90
}

/*!*padding: 0 0.2em;*!*/.inner-addon {
    position:relative
}

.gearIcon, .searchIcon {
    position: absolute;
    width: 17px;
    height: 17px;
    pointer-events:none
}

.gearIcon {
    left: -5px
}

/*!*padding: 0 0.2em;*!*/
/*!*color: black;*!*/
/*!*content: "\2315";*!*/
/*!*content: "\2315"  or  "\1F50D"*!;*/li#c_search {
    padding: 0 5px;
    margin-left: 5px;
    height:20px
}

li#c_locate {
    padding:0
}

#c_locate > a {
    font-size: 2em;
    padding:0
}

a#pause-button {
    padding:12px
}

a#pause-button.paused:before {
    content: "\25BA"
}

a#pause-button.paused:hover {
    background-color: #d90;
    color:#fff
}

a#pause-button:not(.paused):before {
    content: "II"
}

.toolTipMenu li:hover {
    background-color:#e1e1e1
}

#emptyLiHover, #emptyLiHover:hover {
    background-color:#fff
}

.toggleOption li:hover {
    background-color:#e1e1e1
}

.toggleOption {
    padding:8px 5px
}

#converter-option:hover {
    background-color:#fff
}

.option, .toolTipMenu li a:only-child {
    display: block;
    float: none;
    padding:8px 5px
}

.customLocate {
    padding: 0;
    background-color:#32cd32
}

a#locateSearchResult {
    padding-top:50px
}

#zoomSliderElement {
    color: #000;
    position: relative;
    padding-top: 0;
    width: 155px;
    height: 24px;
    background-color: transparent;
    -webkit-transform-origin-x: 73px;
    -webkit-transform-origin-y: 73px;
    -webkit-transform: rotate(-90deg);
    -moz-transform-origin: 73px 73px;
    transform: rotate(-90deg);
    transform-origin: 73px 73px;
    -webkit-appearance: none;
    outline: none;
    margin:4px 0
}

#zoomSliderElement::-webkit-scrollbar {
    height:0
}

#zoomSliderElement:hover {
    cursor:crosshair
}

#zoomSliderElement::-webkit-slider-runnable-track {
    width: 100%;
    height: 5px;
    cursor: pointer;
    background:#3071a9
}

#zoomSliderElement::-moz-range-track {
    width: 100%;
    height: 5px;
    cursor: pointer;
    background:#3071a9
}

#zoomSliderElement::-webkit-slider-thumb {
    -webkit-appearance: none;
    border: 1px solid #000;
    height: 10px;
    width: 30px;
    margin-right: 50px;
    border-radius: 3px;
    background: #fff;
    cursor: pointer;
    outline: none;
    margin-top:-3px
}

#zoomSliderElement::-ms-thumb {
    background:#fff
}

#zoomSliderElement::-ms-thumb, #zoomSliderElement::-ms-thumb:hover {
    -webkit-appearance: none;
    border: 1px solid #000;
    height: 10px;
    width: 30px;
    margin-right: 50px;
    border-radius: 3px;
    cursor: pointer;
    outline: none;
    margin-top:-3px
}

#zoomSliderElement::-ms-thumb:hover {
    background:#d90
}

#zoomSliderElement::-webkit-slider-thumb:hover {
    -webkit-appearance: none;
    border: 1px solid #000;
    height: 10px;
    width: 30px;
    margin-right: 50px;
    border-radius: 3px;
    background: #d90;
    cursor: pointer;
    outline: none;
    margin-top:-3px
}

#zoomSliderElement::-moz-range-thumb, #zoomSliderElement::-moz-range-thumb:hover {
    border: 1px solid #000;
    height: 10px;
    width: 30px;
    border-radius: 3px;
    cursor: pointer;
    outline:none
}

#zoomSliderElement::-moz-range-thumb:hover {
    background:#d90
}

#zoomSliderElement::-moz-focus-outer {
    border:0
}

#locateSearchResult:focus {
    outline:none
}

a#locateSearchResult.highlighted:hover {
    background-color: #d90;
    color:red
}

a#locateSearchResult {
    outline: none;
    padding-bottom: 0;
    padding-top: 0;
    position: relative;
    top:5px
}

#editorHint {
    padding: 5px;
    position: absolute;
    text-align: center;
    width: 100%;
    pointer-events:none
}

#editorHint label {
    pointer-events: auto;
    float: right;
    padding: 5px;
    color:#fd0
}

#editorHint label:hover {
    text-decoration: underline;
    cursor:pointer
}

#editorHint > div {
    pointer-events: auto;
    text-align: left;
    display: inline-block;
    color: #fff;
    font-size: .8em;
    background-color: #18202a;
    padding: 5px;
    border-radius:5px
}

#WarningErrorMessagesContainer {
    position: absolute;
    text-align: center;
    top: 0;
    pointer-events:none
}

#WarningErrorMessages {
    position: relative;
    width: 50%;
    pointer-events: auto;
    margin: 10px 0;
    padding-right: 12px;
    overflow-y: auto;
    overflow-x:hidden
}

#WarningErrorMessages label {
    color:#fd0
}

#WarningErrorMessages label, #WarningErrorMessages span {
    pointer-events: auto;
    float: right;
    padding:5px
}

#WarningErrorMessages label:hover {
    text-decoration: underline;
    cursor:pointer
}

#WarningErrorMessages > div {
    pointer-events: auto;
    text-align: left;
    display: inline-block;
    color: #fff;
    font-size: .8em;
    background-color: #18202a;
    padding: 5px;
    border-radius: 10px;
    border: 1px solid #ecf0f1;
    width:70%
}

#WarningErrorMessagesContent > ul {
    -webkit-padding-start: 20px;
    padding:0 16px
}

#WarningErrorMessagesContent > ul > li {
    padding:5px
}

.textLineEditWithLabel {
    display: inline-block;
    width: 100%;
    border-bottom: 1px solid #34495e;
    padding:2px 0
}

.converter-form-Editor label {
    line-height:normal
}

.descriptionTextClass, .prefixIRIElements input {
    background-color: #34495e;
    color:#fff
}

.prefixIRIElements input {
    border:1px solid #34495e
}

.prefixIRIElements input:disabled {
    background-color: #18202a;
    border: 1px solid #18202a;
    color:#fff
}

.converter-form-Editor input {
    float: right;
    border: 1px solid #34495e;
    background-color: #34495e;
    color:#fff
}

.converter-form-Editor input:disabled {
    background-color: #545350;
    border: 1px solid #34495e;
    color:#939798
}

.disabledLabelForSlider {
    color: gray
}