graphdb-workbench/dist/css/bootstrap-graphdb-theme.css

The web application for GraphDB APIs

/*-------------------------------------------------------------
	Fonts
-------------------------------------------------------------*/
@font-face {
    font-family: 'RubikWeb';
    src: url('fonts/rubik-regular.woff2') format('woff2'),
    url('fonts/rubik-regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'RubikWeb';
    src: url('fonts/rubik-italic.woff2') format('woff2'),
    url('fonts/rubik-italic.woff') format('woff');
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: 'RubikWeb';
    src: url('fonts/rubik-light.woff2') format('woff2'),
    url('fonts/rubik-light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'RubikWeb';
    src: url('fonts/rubik-lightitalic.woff2') format('woff2'),
    url('fonts/rubik-lightitalic.woff') format('woff');
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: 'RubikWeb';
    src: url('fonts/rubik-medium.woff2') format('woff2'),
    url('fonts/rubik-medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'RubikWeb';
    src: url('fonts/rubik-mediumitalic.woff2') format('woff2'),
    url('fonts/rubik-mediumitalic.woff') format('woff');
    font-weight: 500;
    font-style: italic;
}

/*-------------------------------------------------------------
	Icons
-------------------------------------------------------------*/
@font-face {
    font-family: 'icomoon';
    src: url('fonts/icons.eot?z4jeba');
    src: url('fonts/icons.eot?z4jeba#iefix') format('embedded-opentype'),
    url('fonts/icons.ttf?z4jeba') format('truetype'),
    url('fonts/icons.woff?z4jeba') format('woff'),
    url('fonts/icons.svg?z4jeba#icons') format('svg');
    font-weight: normal;
    font-style: normal;
}

[class^="icon-"], [class*=" icon-"], .icon-any {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: 'icomoon', sans-serif !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    vertical-align: middle;
    display: inline-block;
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-arrow-up-off:before {
    content: "\e948";
}

.icon-collapse:before {
    content: "\e949";
}

.icon-eye-off:before {
    content: "\e94a";
}

.icon-expand:before {
    content: "\e94c";
}

.icon-focus:before {
    content: "\e94d";
}

.icon-rotate-left:before {
    content: "\e94e";
}

.icon-rotate-right:before {
    content: "\e94f";
}

.icon-info-alt:before {
    content: "\e950";
}

.icon-facebook:before {
    content: "\e942";
}

.icon-google-plus:before {
    content: "\e943";
}

.icon-google:before {
    content: "\e944";
}

.icon-linkedin:before {
    content: "\e945";
}

.icon-twitter:before {
    content: "\e946";
}

.icon-youtube:before {
    content: "\e947";
}

.icon-play:before {
    content: "\e941";
}

.icon-email:before {
    content: "\e93e";
}

.icon-sameas-on:before {
    content: "\e93f";
}

.icon-sameas-off:before {
    content: "\e940";
}

.icon-repo-contour1:before {
    content: "\e906";
}

.icon-repo-contour2:before {
    content: "\e90b";
}

.icon-repo-contour3:before {
    content: "\e910";
}

/* Don't change the names of the repo icons, we rely on them being called master, worker, se, free, system */
.icon-repo-master-ro-mute:before {
    content: "\e913";
}

.icon-repo-free:before {
    content: "\e936";
}

.icon-repo-master-mute:before {
    content: "\e937";
}

.icon-repo-master-ro:before {
    content: "\e938";
}

.icon-repo-master:before {
    content: "\e939";
}

.icon-repo-se:before {
    content: "\e93a";
}

.icon-repo-system:before {
    content: "\e93b";
}

.icon-repo-worker:before {
    content: "\e93c";
}

.icon-repo:before {
    content: "\e93d";
}

.icon-copy:before {
    content: "\e934";
}

.icon-eye:before {
    content: "\e935";
}

.icon-connection-off:before {
    content: "\e931";
}

.icon-connection-on:before {
    content: "\e932";
}

.icon-key:before {
    content: "\e933";
}

.icon-comment:before {
    content: "\e930";
}

.icon-arrow-down:before {
    content: "\e900";
}

.icon-arrow-left:before {
    content: "\e901";
}

.icon-arrow-right:before {
    content: "\e902";
}

.icon-arrow-up:before {
    content: "\e903";
}

.icon-exchange:before {
    content: "\e904";
}

.icon-columns:before {
    content: "\e905";
}

.icon-inferred-off:before {
    content: "\e907";
}

.icon-inferred-on:before {
    content: "\e908";
}

.icon-save:before {
    content: "\e909";
}

.icon-tag:before {
    content: "\e90a";
}

.icon-file:before {
    content: "\e90c";
}

.icon-folder:before {
    content: "\e90d";
}

.icon-heartbeat:before {
    content: "\e90e";
}

.icon-pin:before {
    content: "\e90f";
}

.icon-zoom-in:before {
    content: "\e911";
}

.icon-zoom-out:before {
    content: "\e912";
}

.icon-check:before {
    content: "\e914";
}

.icon-download:before {
    content: "\e915";
}

.icon-external:before {
    content: "\e916";
}

.icon-lock:before {
    content: "\e917";
}

.icon-search:before {
    content: "\e918";
}

.icon-upload:before {
    content: "\e919";
}

.icon-caret-left:before {
    content: "\e91a";
}

.icon-caret-right:before {
    content: "\e91b";
}

.icon-caret-up:before {
    content: "\e91c";
}

.icon-minus:before {
    content: "\e91d";
}

.icon-reload:before {
    content: "\e91e";
}

.icon-trash:before {
    content: "\e91f";
}

.icon-warning:before {
    content: "\e920";
}

.icon-caret-down:before {
    content: "\e921";
}

.icon-close:before {
    content: "\e922";
}

.icon-edit:before {
    content: "\e923";
}

.icon-info:before {
    content: "\e924";
}

.icon-link:before {
    content: "\e925";
}

.icon-more:before {
    content: "\e926";
}

.icon-plus:before {
    content: "\e927";
}

.icon-data:before {
    content: "\e928";
}

.icon-help:before {
    content: "\e929";
}

.icon-monitoring:before {
    content: "\e92a";
}

.icon-settings:before {
    content: "\e92b";
}

.icon-sparql:before {
    content: "\e92c";
}

.icon-user:before {
    content: "\e92d";
}

.icon-export:before {
    content: "\e92e";
}

.icon-import:before {
    content: "\e92f";
}

.icon-repo-virtual:before {
    content: "\e957";
}

.icon-repo-ontop:before {
    content: "\e958";
}

.icon-repo-fedx:before {
    content: "\e959";
}

/*
[class^="icon-"]:before, [class*=" icon-"]:before {
	display: inline-block;
}
*/

.icon-lg {
    font-size: 1.4em;
    line-height: 0.75em;
    /*    vertical-align: -15%;*/
}

.icon-2x, .btn .icon-2x[class^="icon-"] {
    font-size: 2em;
}

.icon-2-5x, .btn .icon-2-5x[class^="icon-"] {
    font-size: 2.5em;
}

.icon-rotate-270:before {
    display: inline-block;
    -webkit-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    transform: rotate(270deg);
}

.icon-rotate-90:before {
    display: inline-block;
    -webkit-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
}

/*-------------------------------------------------------------
	General
-------------------------------------------------------------*/
@media (max-width: 1439px) {
    html {
        font-size: 14px;
    }
}

body {
    font-family: RubikWeb, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-weight: 300;
    margin-bottom: 0;
    font-variant-ligatures: no-common-ligatures;
}

a {
    color: #04355E;
}

a:focus, a:hover {
    color: #0a477b;
}

.font-weight-light {
    font-weight: 300;
}
.font-weight-bold {
    font-weight: bolder;
}

.small, small {
    font-size: 0.875em;
    font-weight: inherit;
}

.main-container {
    margin-left: 15rem;
    padding: 3rem 2rem 0 2rem;
    /*max-width: 1600px; Removed because of the collapse of the menu*/
    /*-moz-transition: margin-left 0.2s ease-in;  !* FF4+ *!*/
    /*-o-transition: margin-left 0.2s ease-in;  !* Opera 10.5+ *!*/
    /*-webkit-transition: margin-left 0.2s ease-in;  !* Saf3.2+, Chrome *!*/
    /*transition: margin-left 0.2s ease-in;*/
    /*Transition not working well when switching routes*/
}

.text-muted {
    color: rgba(0, 0, 0, 0.3) !important
}

.pos-r {
    position: relative;
}

/*Fix for ng-cloack*/
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
    display: none !important;
}

@media (min-width: 576px) {
    .modal-dialog.google-visualization-charteditor-dialog {
        max-width: initial;
    }
}

.google-visualization-charteditor-dialog {
    height: initial !important;
}

.google-visualization-charteditor-dialog .charts-flat-menu-button {
    height: 26px !important;
}

.btn.imports-queries {
    cursor: default;
}

.btn.imports-queries .btn {
    padding: 0 !important;
    border: 0 !important;
    vertical-align: inherit;
    color: #fff;
}

.btn.imports-queries .btn:hover {
    color: rgba(255, 255, 255, 0.7);
}


/*-------------------------------------------------------------
	Headings
-------------------------------------------------------------*/
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-weight: 400;
    margin-bottom: .5em;
}

h1:only-child, h2:only-child, h3:only-child, h4:only-child, h5:only-child, h6:only-child {
    margin-bottom: 0;
}

h1 .btn {
    margin-top: -0.2em
}

/*-------------------------------------------------------------
	Main menu
-------------------------------------------------------------*/
.main-menu {
    width: 15rem;
    position: fixed;
    font-weight: 400;
    z-index: 1010;
    margin: 0;
    padding: 0;
    -moz-transition: width 0.2s ease-in; /* FF4+ */
    -o-transition: width 0.2s ease-in; /* Opera 10.5+ */
    -webkit-transition: width 0.2s ease-in; /* Saf3.2+, Chrome */
    transition: width 0.2s ease-in;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}

/*Make collapsed menu with absolute position if window height is smaller than the
main menu height*/
@media screen and (max-height: 475px) {
    .main-menu.collapsed {
        position: absolute;
    }
}

.main-menu li {
    list-style: none;
}

.main-menu li a {
    color: #04355E;
    text-decoration: none;
}

.main-menu li .menu-element-root:hover,
.main-menu .sub-menu li:hover {
    background-color: rgba(0, 0, 0, .1);
}

.main-menu li .menu-element-root:hover .menu-item-icon,
.main-menu .menu-element.open .menu-item-icon {
    transform: scale(1.1);
}

.main-menu .menu-element.open .sub-menu .menu-item-icon {
    transform: scale(0.5);
}

.main-menu .menu-element {
    border-bottom: 1px solid #fff;
    background-color: #f7f7f7;
    position: relative;
}

.main-menu .menu-element-root {
    padding: 0.8em 2.5em 0.8em 0.8em;
    display: block;
    line-height: 2.5rem;
    position: relative;
    z-index: 100;
    -moz-transition: all 0.18s ease-out; /* FF4+ */
    -o-transition: all 0.18s ease-out; /* Opera 10.5+ */
    -webkit-transition: all 0.18s ease-out; /* Saf3.2+, Chrome */
    transition: all 0.18s ease-out;
    color: #04355E;
    cursor: pointer;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.main-menu .menu-item-icon {
    font-size: 2.5rem;
    vertical-align: middle;
    color: #ED4F2F;
    transform: scale(0.9);
    display: inline-block;
    -moz-transition: all 0.18s ease-out; /* FF4+ */
    -o-transition: all 0.18s ease-out; /* Opera 10.5+ */
    -webkit-transition: all 0.18s ease-out; /* Saf3.2+, Chrome */
    transition: all 0.18s ease-out;
    pointer-events: none;
}

.main-menu .menu-element-root .menu-item {
    pointer-events: none;
}

.main-menu .menu-element-root.active,
.main-menu .menu-element-root.active:hover {
    background-color: #ED4F2F;
    color: #fff;
}

.main-menu .active .menu-item-icon {
    color: #04355E;
}

.main-menu .brand {
    background-color: #04355E;
}

.main-menu .brand a {
    display: block;
    position: relative;
    z-index: 5;
}

.main-menu .product-version {
    line-height: normal;
    color: rgba(255, 255, 255, .8);
    text-transform: uppercase;
    font-size: 0.625rem;
    display: block;
    position: absolute;
    right: 0;
    bottom: 0;
    padding: 0.2em 0.5em;
    border-color: rgba(255, 255, 255, .2);
    border-style: solid;
    border-top-width: 1px;
    border-left-width: 1px;
    border-bottom-width: 0;
    border-right-width: 0;
}

.main-menu .menu-element.open,
.main-menu.collapsed .menu-element:hover {
    background-color: #dcdcdc;

}

.main-menu .sub-menu {
    position: relative;
    padding: 0;
    z-index: 110;
}

.main-menu .sub-menu li {
    display: none;
}

.main-menu .sub-menu li a {
    padding: 0.5em 0.8em;
    display: block;
}

.main-menu .sub-menu li.active a {
    background-color: #ED4F2F;
    font-weight: 500;
    color: #fff;
}

.main-menu .menu-element.open ul li {
    display: block;
}

.main-menu .menu-element ul:before, .rdf-list ul.datasource:before {
    font-family: 'icomoon', sans-serif !important;
    content: "\e921";
    display: block;
    color: rgba(0, 0, 0, .25);
    font-size: 1.5em;
    position: absolute;
    top: -3.3rem;
    right: 1rem;
    -moz-transition: all 0.2s ease-in; /* FF4+ */
    -o-transition: all 0.2s ease-in; /* Opera 10.5+ */
    -webkit-transition: all 0.2s ease-in; /* Saf3.2+, Chrome */
    transition: all 0.2s ease-in;
    pointer-events: none;
}

.main-menu .menu-element.open ul:before, .rdf-list ul.open.datasource:before {
    transform: rotate(180deg);
}

.rdf-list ul.datasource:before {
    top: 0.5rem;
}

.rdf-side-panel-content ul.rdf-list li.data-key {
    cursor: pointer;
    padding-right: 2.5rem;
}

.toggle-menu {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    color: #fff;
    font-size: 0.8em;
    line-height: 1.5;
    padding: 0 0.3em;
    background-color: rgba(255, 255, 255, .1);
    z-index: 10;
    cursor: pointer;
}

.toggle-menu:hover {
    background-color: #ED4F2F;
}

.toggle-menu [class^="icon-"] {
    -moz-transition: all 0.2s ease-in; /* FF4+ */
    -o-transition: all 0.2s ease-in; /* Opera 10.5+ */
    -webkit-transition: all 0.2s ease-in; /* Saf3.2+, Chrome */
    transition: all 0.2s ease-in;
    display: inline-block;
}

.toggle-menu:hover [class^="icon-"] {
    transform: scale(1.1);
}

.small-logo {
    width: 3.625rem;
    height: auto;
}

.big-logo {
    width: 11.25rem;
    height: auto;
}

.container-fluid.main-container.expanded {
    margin-left: 4.375rem;
}

.main-menu.collapsed {
    width: 4.375rem;
    overflow: visible;
}

.main-menu.collapsed .menu-element.clicked .sub-menu {
    position: absolute;
    top: 0;
    left: 4.375rem;
    background-color: #EBEBEB;
    width: 15rem;
}

.main-menu.collapsed .menu-element .menu-item,
.main-menu.collapsed .menu-element .sub-menu li {
    display: none;
}

.main-menu.collapsed .menu-element.clicked .sub-menu li {
    display: block;
}

.main-menu.collapsed .menu-element-root {
    overflow: visible;
}

.main-menu .menu-element.open ul li.submenu-title,
.main-menu .submenu-title {
    display: none;
}

.main-menu.collapsed .menu-element.clicked ul li.submenu-title {
    display: block;
    font-size: 1.2em;
    font-weight: 500;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    text-overflow: ellipsis;
    overflow: hidden;
    padding: 0.5em 0.8rem 0.2em 0;
    color: #04355E;
    margin-left: 0.8rem;
    margin-bottom: 0.5em;
}

.main-menu .sub-menu li.submenu-title:hover {
    background-color: transparent;
}

.main-menu.collapsed .menu-element.clicked .sub-menu.align-bottom {
    bottom: 0;
    top: auto;
}

.main-menu.collapsed .menu-element ul:before {
    display: none;
}

.main-menu.collapsed .brand a {
    padding: 0.4rem;
}

.main-menu.collapsed .product-version {
    display: none;
}

.main-menu.collapsed .small-logo, .main-menu .big-logo {
    display: block;
}

.main-menu .small-logo, .main-menu.collapsed .big-logo {
    display: none;
}

/*-------------------------------------------------------------
	Buttons
-------------------------------------------------------------*/
.btn {
    -moz-transition: all 0.15s ease-out; /* FF4+ */
    -o-transition: all 0.15s ease-out; /* Opera 10.5+ */
    -webkit-transition: all 0.15s ease-out; /* Saf3.2+, Chrome */
    transition: all 0.15s ease-out;
}

.btn, .btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle) {
    border-radius: 0;
}

.btn.active.focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn:active:focus, .btn:focus {
    outline: 0;
}

.btn-primary {
    background-color: #ED4F2F;
    border-color: #ED4F2F;
}

.btn-primary.active, .btn-primary.focus, .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active.focus,
.btn-primary.active:focus, .btn-primary.active:hover, .btn-primary:active.focus, .btn-primary:active:focus, .btn-primary:active:hover, .open > .btn-primary.dropdown-toggle.focus, .open > .btn-primary.dropdown-toggle:focus, .open > .btn-primary.dropdown-toggle:hover,
.btn-primary.disabled:hover, .btn-primary:disabled:hover {
    background-color: #d54a33;
    border-color: #d54a33;
}

.btn-secondary {
    background-color: #EBEBEB;
    border-color: #EBEBEB;
    color: #04355E;
}

.btn-secondary.focus,
.btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active,
.btn-secondary:active.focus, .btn-secondary:active:focus, .btn-secondary:active:hover,
.btn-prisecondarymary.disabled:hover, .btn-secondary:disabled:hover {
    background-color: #d4d4d4;
    border-color: #d4d4d4;
}

.btn-secondary.active, .btn-secondary.active.focus, .btn-secondary.active:focus, .btn-secondary.active:hover {
    background-color: #ED4F2F;
    border-color: #ED4F2F;
    color: #fff;
}

.btn-info {
    background-color: #04355E;
    border-color: #04355E;
}

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

/* outline buttons */
.btn-outline-primary {
    color: #ED4F2F;
    border-color: #ED4F2F;
}

.btn-outline-primary:hover,
.btn-outline-primary.focus, .btn-outline-primary:focus, .btn-outline-primary.active, .btn-outline-primary:active, .open > .btn-outline-primary.dropdown-toggle,
.btn-outline-primary.active.focus, .btn-outline-primary.active:focus, .btn-outline-primary.active:hover, .btn-outline-primary:active.focus, .btn-outline-primary:active:focus, .btn-outline-primary:active:hover, .open > .btn-outline-primary.dropdown-toggle.focus, .open > .btn-outline-primary.dropdown-toggle:focus, .open > .btn-outline-primary.dropdown-toggle:hover {
    color: #ED4F2F;
    background-color: rgba(237, 79, 47, 0.2);
    border-color: #ED4F2F;
}

.btn-outline-secondary {
    color: #04355E;
    background-image: none;
    background-color: transparent;
    border-color: rgba(4, 53, 94, 0.5);
}

.btn-outline-secondary:hover,
.btn-outline-secondary.focus, .btn-outline-secondary:focus, .btn-outline-secondary.active, .btn-outline-secondary:active,
.btn-outline-secondary.active.focus, .btn-outline-secondary.active:focus, .btn-outline-secondary:active.focus, .btn-outline-secondary:active:focus, .btn-outline-secondary:active:hover, .open > .btn-outline-secondary.dropdown-toggle.focus, .open > .btn-outline-secondary.dropdown-toggle:focus, .open > .btn-outline-secondary.dropdown-toggle:hover {
    color: #04355E;
    background-color: rgba(4, 53, 94, 0.2);
    border-color: #04355E;
}

.btn-outline-secondary.active:hover {
    background-color: rgba(4, 53, 94, 0.2);
    border-color: #09406d;
}

.btn-group-lg > .btn, .btn-lg {
    padding: .75em 1.2em;
    font-size: 1.125em;
}

.btn-link, .btn-link a {
    color: #ED4F2F;
    padding: .5em .8em;
}

.btn-link.secondary {
    color: rgba(0, 0, 0, .3);
}

.btn-link:focus, .btn-link:hover, .btn-link.secondary:hover {
    color: #d94223;
    text-decoration: none;
}

.btn-link.disabled:focus, .btn-link.disabled:hover, .btn-link.disabled.secondary:hover {
    color: rgba(0, 0, 0, .3);
    text-decoration: none;
}

.btn-link.btn-sm {
    padding: .25rem .5rem;
}

.btn-link.active, .btn-link:hover.active, .btn-link:focus.active, .btn-link:active.active {
    background-color: #d54a33;
    color: #fff;
}

/* button groups */
.btn-group .btn {
    margin-right: 3px;
}

/* button icons */
.btn [class^="icon-"], .btn .fa {
    -moz-transition: transform 0.15s ease-out; /* FF4+ */
    -o-transition: transform 0.15s ease-out; /* Opera 10.5+ */
    -webkit-transition: transform 0.15s ease-out; /* Saf3.2+, Chrome */
    transition: transform 0.15s ease-out;
}

.btn [class^="icon-"] {
    font-size: 1.4em;
    vertical-align: -0.25em;
    line-height: 0.8;
    display: inline-block;
}

.btn.btn-inline [class^="icon-"] {
     font-size: inherit;
     line-height: inherit;
     vertical-align: inherit;
}

.btn .icon-lg[class^="icon-"] {
    font-size: 2em;
    margin-right: 0.3em;
}

.btn:hover [class^="icon-"],
.btn:hover .fa {
    transform: scale(1.2);
}

.btn.disabled:hover [class^="icon-"],
.btn.disabled:hover .fa {
    transform: scale(1);
}

.btn + .dropdown-toggle-split {
    padding-right: 0.5rem;
    padding-left: 0.5rem;
}

.btn.p-0 {
    padding: 0.1em !important;
}

.btn-inline.p-0 {
    padding: 0 !important;
}

.btn-inline.b-0 {
    border: 0 !important;
}

.dropdown-menu-right {
    right: 3px;
}

/* collapse button */
.btn.collapsed [class^=icon-]{
    transform: rotate(180deg);
}
h3 [class^=icon-] {
  vertical-align: -0.1em;
  transition: transform 0.15s ease-out;
}
.collapsible-heading {
  cursor: pointer;
}
.collapsible-heading.collapsed [class^=icon-] {
  transform: rotate(-90deg);
}

/*-------------------------------------------------------------
	status bar
-------------------------------------------------------------*/
.status-bar {
    position: fixed;
    top: 0;
    right: 2rem;
    font-size: 0.9em;
    z-index: 1015;
    -moz-transition: all 0.1s ease-out; /* FF4+ */
    -o-transition: all 0.1s ease-out; /* Opera 10.5+ */
    -webkit-transition: all 0.1s ease-out; /* Saf3.2+, Chrome */
    transition: all 0.1s ease-out;
}

/*-------------------------------------------------------------
	sticky footer
-------------------------------------------------------------*/
html {
    position: relative;
    min-height: 100%;
}

footer.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 30px;
}

footer.footer .container-fluid.main-container {
    padding: 0;
}

footer.footer .container-fluid.main-container p {
    margin: 0;
    padding-left: 30px;
}

/*-------------------------------------------------------------
	Dropdowns
-------------------------------------------------------------*/
.open > .btn-secondary.dropdown-toggle,
.open > .btn-secondary.dropdown-toggle.focus,
.open > .btn-secondary.dropdown-toggle:focus,
.open > .btn-secondary.dropdown-toggle:hover {
    color: #fff;
    background-color: #ED4F2F;
    border-color: #ED4F2F;
}

.open > .btn-secondary.dropdown-toggle [class^="icon-"] {
    color: #04355E !important;
}

.dropdown-toggle {
}

.dropdown-toggle::after {
    font-family: 'icomoon', sans-serif !important;
    content: "\e921";
    display: inline-block;
    color: rgba(0, 0, 0, .35);
    width: auto;
    height: auto;
    border: none;
    margin-left: 0;
    font-size: 0.9em;
    -moz-transition: all 0.2s ease-in; /* FF4+ */
    -o-transition: all 0.2s ease-in; /* Opera 10.5+ */
    -webkit-transition: all 0.2s ease-in; /* Saf3.2+, Chrome */
    transition: all 0.2s ease-in;
}

.open .dropdown-toggle::after {
    transform: rotate(180deg);
}

.dropdown-menu {
    border: none;
    background-color: #ED4F2F;
    border-radius: 0;
    padding: 0;
    min-width: 100%;
    display: block;
    margin-top: -1em;
    opacity: 0;
    visibility: hidden;
    -moz-transition: all 150ms ease-out; /* FF4+ */
    -o-transition: all 150ms ease-out; /* Opera 10.5+ */
    -webkit-transition: all 150ms ease-out; /* Saf3.2+, Chrome */
    transition: all 150ms ease-out;
}

.open > .dropdown-menu {
    opacity: 1;
    visibility: visible;
    margin-top: -1px;
}

.dropdown-item {
    color: #fff !important;
    padding: 0.5em 1.2em;
    cursor: pointer;
}

.dropdown-item:focus, .dropdown-item:hover {
    background-color: rgba(0, 0, 0, .1);
    color: #fff;
}

.btn-link + .dropdown-menu-right {
    margin-top: 8px;
}

.multiline-text {
    line-height: 0.75em;
    display: inline-block;
    vertical-align: middle;
    text-align: left;
}

.multiline-text small {
    font-weight: 300;
    font-size: 0.75em;
    margin-top: 0.3em;
    display: inline-block;
    max-width: 120px;
    text-overflow: ellipsis;
    overflow: hidden;
}

.btn .multiline-text {
    margin-top: -0.3em;
    margin-bottom: -0.3em;
}

.text-primary {
    color: #ED4F2F !important;
}

.text-secondary {
    color: #04355E !important;
}

.text-tertiary {
    color: #11b0a1 !important;
}

.text-info {
    color: #11b0a1 !important;
}

.rdf-list .hidden-data-value {
    display: none;
}

/*-------------------------------------------------------------
	Alerts
-------------------------------------------------------------*/
.alert {
    border-radius: 0;
    border: 1px solid transparent;
    position: relative;
    padding: 1em;
}

.alert-warning {
    color: #C4781E;
}

.alert-info, .alert-help {
    background-color: rgba(45, 186, 171, 0.15);
    color: #0a6d63;
}

.alert-info, .alert-warning, .alert-help {
    padding-left: 3em;
}

.alert-info:before,
.alert-warning:before,
.alert-help:before {
    font-family: 'icomoon', sans-serif !important;
    font-size: 1.6em;
    vertical-align: middle;
    line-height: 1;
    position: absolute;
    left: 0.6em;
    top: 0.6em;
}

.alert-info:before {
    content: "\e924";
}

.alert-warning:before {
    content: "\e920";
}

.alert-help:before {
    content: "\e929";
}

.no-icon {
    padding-left: 1em;
}

.no-icon:before {
    display: none;
}

.alert .alert {
    background-color: transparent;
}

/*-------------------------------------------------------------
	Tabs
-------------------------------------------------------------*/
.nav-tabs {
    font-weight: 400;
}

.nav-tabs .nav-item {
    margin-top: 4px;
    margin-right: .2rem;
}

.nav-tabs .nav-item + .nav-item {
    margin-left: 0;
    margin-right: .2rem;
}

.nav-tabs .nav-link {
    border-radius: 0;
    cursor: pointer;
    color: #04355E;
    background-color: #eee;
}

.nav-tabs .nav-link .btn {
    padding: 0;
    border: none;
}

.nav-tabs .nav-link > span + .btn {
    margin-left: 0.8em;
}

.nav-tabs .active .nav-link {
    color: #55595c;
    background-color: #fff;
    border-color: #ddd #ddd transparent;
}

.nav-tabs .nav-item.active a,
.nav-tabs .nav-item.active:focus a,
.nav-tabs .nav-item.active:hover a {
    color: #55595c;
    background-color: #fff;
    border-color: #ddd #ddd transparent;
}

.nav-tabs .nav-link:focus {
    border-color: #ddd #ddd #eee;
}

tab-heading.nav-item {
    margin-right: 4px;
}

/*-------------------------------------------------------------
	Lists
-------------------------------------------------------------*/
ul[class*="style-"] {
    list-style: none;
    padding: 0;
    margin-bottom: 1.2em;
}

ul[class*="style-"] li {
    padding-left: 1.6em;
    position: relative;
    line-height: 1.2;
    margin-bottom: 0.6em;
}

ul[class*="style-"] li:before {
    content: "\e91b";
    font-family: 'icomoon', sans-serif !important;
    position: absolute;
    left: 0;
    top: -0.07em;
    font-size: 1.2em;
    color: #2DBAAB;
}

.text-white ul[class*="style-"] li:before {
    color: #fff;
}

ul.style-caret li:before {
    content: "\e91b";
}

ul.style-check li:before {
    content: "\e914";
}

ul.style-arrow li:before {
    content: "\e902";
}

/*-------------------------------------------------------------
	Tables
-------------------------------------------------------------*/
.table td, .table th {
    padding: .8rem;
    border-color: #ddd;
    vertical-align: middle;
}

.table th {
    font-weight: 500;
    vertical-align: middle;
}

.table-sm td, .table-sm th {
    padding: 0.3rem 0.5rem;
}

.table-info, .table-info > td, .table-info > th {
    background-color: #cbeeea;
}

.table-hover .table-info:hover,
.table-hover .table-info:hover > td, .table-hover .table-info:hover > th {
    background-color: #aee4df;
}

/*-------------------------------------------------------------
	Modals
-------------------------------------------------------------*/
.modal-content {
    border-radius: 0;
    border: none;
}

.modal-header .close {
    margin-top: 4px;
}

/*-------------------------------------------------------------
	Progress bars
-------------------------------------------------------------*/
.progress {
    display: block;
    overflow: hidden;
    font-size: 1.2rem;
    line-height: 2rem;
    height: 2rem;
    background-color: #eee;
}

.progress-bar {
    height: 2rem;
    color: #000;
    background-color: rgba(45, 186, 171, 0.5);
    padding: 0 0.2em;
    text-align: center;
}

/* Square progress bar */
.progress-square {
    width: 3em;
    height: 3em;
    margin: 0 0.5em 0 0;
    background-color: #eee;
    border-radius: 0.2em;
    overflow: hidden;
    position: relative;
}

.progress-square .progress-bar {
    width: 100%;
    display: block;
    background-color: #04355E;
    position: absolute;
    bottom: 0;
}

.progress-square.warning .progress-bar {
    background-color: #f0ad4e;
}

/*-------------------------------------------------------------
	Background colors
-------------------------------------------------------------*/
.bg-primary {
    background-color: #ED4F2F;
}

.bg-secondary {
    background-color: #04355E;
    color: #fff;
}

.bg-ternary {
    background-color: #2DBAAB;
}

.bg-lightgray {
    background-color: #eee;
}

.bg-white {
    background-color: #fff;
}

.bg-lightgray {
    background-color: #eee;
}

/*-------------------------------------------------------------
	Utilities
-------------------------------------------------------------*/
code {
    padding-top: 0.1rem;
    padding-bottom: 0.1rem;
    color: inherit;
}
.d-flex {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.loader {
    display: inline-block;
    animation: load8 2s infinite linear;
}

.close {
    font-weight: 300;
    font-size: 1.4em;
    opacity: 1;
    text-shadow: none;
}

.close:focus {
    outline: 0;
}

.close::before {
    font-family: 'icomoon', sans-serif !important;
    content: "\e922";
    -moz-transition: all 0.18s ease-out; /* FF4+ */
    -o-transition: all 0.18s ease-out; /* Opera 10.5+ */
    -webkit-transition: all 0.18s ease-out; /* Saf3.2+, Chrome */
    transition: all 0.18s ease-out;
    display: block;
    color: rgba(0, 0, 0, .3);
}

.close:focus, .close:hover {
    opacity: 1;
}

.close:hover::before {
    transform: scale(1.2);
    color: #ED4F2F;
}

.close.absolute {
    position: absolute;
    right: 1rem;
    top: 1rem;
}

.small, small {
    line-height: 1.25;
}

.break-word {
    word-break: break-all;
}

.break-word-alt {
    word-wrap: break-word;
    word-break: break-word;
}

.data-value {
    color: #04355E;
    font-weight: 400;
}

.data-value.big {
    display: block;
    font-size: 1.5em;
    line-height: 1;
}

.d-inline-block.valign-top {
    vertical-align: top;
}

.dot-separator:after {
    content: "\b7"; /* middot */
    margin: 0 0.5em;
}

.dot-separator:last-of-type:after {
    content: none;
    margin: 0;
}

.tag {
    font-weight: 500;
    border-radius: 0;
    vertical-align: 0.1em;
}

.tag-primary {
    background-color: #04355E;
}

.tag-inverse {
    color: rgba(0, 0, 0, 0.7);
}

.text-overflow {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.table .text-overflow {
    max-width: 300px;
}

@media (min-width: 1024px) {
    .table .text-overflow {
        max-width: 450px
    }
}

@media (min-width: 1440px) {
    .table .text-overflow {
        max-width: 650px
    }
}

@media (min-width: 1600px) {
    .table .text-overflow {
        max-width: 850px
    }
}

/*-------------------------------------------------------------
	Cards
-------------------------------------------------------------*/
.card {
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
    border-radius: 0;
    margin-bottom: 1em;
}

.card-header {
    padding: 0.75em 1.8rem;
    background-color: #fff;
}

.card.inline {
    display: inline-block;
    width: 19.5rem;
    margin-right: 1em;
    vertical-align: top;
    overflow: hidden;
}

.card.inline .card-title {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.card.inline .card-block {
    min-height: 165.19px;
}

.card-block {
    padding: 1.6rem;
}

.card-footer:last-child {
    border-radius: 0;
}

.card.button {
    width: 10em;
}

.card.button:hover {
    border-color: rgba(237, 79, 47, 0.4)
}

.card.button .card-block {
    padding: 0;
}

.card.button .btn {
    white-space: normal;
    padding: 0 1.8rem;
    line-height: 218px;

}

.card.button .btn > span {
    display: inline-block;
    line-height: 1.25;
    vertical-align: middle;
}

.card.button .btn:hover {
    background-color: rgba(237, 79, 47, 0.1)
}

.card.button .btn [class^="icon-"] {
    display: block;
    font-size: 3em;
    margin-bottom: 0.4em;
}

.card.active {
    border-color: #04355E;
    min-height: 300px;
}

.card.active .card-footer {
    background-color: #04355E;
    color: #fff;
    border-color: #04355E;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

.card.active .card-footer .text-muted {
    color: #fff !important;
    font-weight: 500;
}

.card .list-group-item {
    border-left: none;
    border-right: none;
}

.card .alert {
    margin-bottom: 0;
}

.actions-bar .btn {
    padding: 0.1em;
    background-color: transparent;
}

.actions-bar-inline .btn {
    padding-top: 0;
    margin-top: -0.1em;
    padding-bottom: 0.3em;
}

.actions-bar .btn:hover {
}

.hovered-parent .hovered-item {
    opacity: 0;
}

.hovered-parent:hover .hovered-item {
    opacity: 1;
}

/*-------------------------------------------------------------
	Popovers
-------------------------------------------------------------*/
.popover {
    border-radius: 0;
    box-shadow: 1px 3px 6px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(0, 0, 0, .125);
    padding: 0;
}

.popover-content {
    padding: 1em;
}

.popover-title {
    border-radius: 0;
}

/* popover arrows from bootstrap 3 (needed because of angular bootstrap controls which use the old markup) */
.popover.top {
    margin-top: -10px;
}

.popover.right {
    margin-left: 10px;
}

.popover.bottom {
    margin-top: 10px;
}

.popover.left {
    margin-left: -10px;
}

.popover .arrow,
.popover .arrow:after {
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
}

.popover .arrow {
    border-width: 11px;
}

.popover .arrow:after {
    border-width: 10px;
    content: "";
}

.popover.top .arrow {
    bottom: -11px;
    left: 50%;
    margin-left: -11px;
    border-top-color: #999999;
    border-top-color: rgba(0, 0, 0, 0.25);
    border-bottom-width: 0;
}

.popover.top .arrow:after {
    bottom: 1px;
    margin-left: -10px;
    border-top-color: #ffffff;
    border-bottom-width: 0;
    content: " ";
}

.popover.right .arrow {
    top: 50%;
    left: -11px;
    margin-top: -11px;
    border-right-color: #999999;
    border-right-color: rgba(0, 0, 0, 0.25);
    border-left-width: 0;
}

.popover.right .arrow:after {
    bottom: -10px;
    left: 1px;
    border-right-color: #ffffff;
    border-left-width: 0;
    content: " ";
}

.popover.bottom .arrow {
    top: -11px;
    left: 50%;
    margin-left: -11px;
    border-bottom-color: #999999;
    border-bottom-color: rgba(0, 0, 0, 0.25);
    border-top-width: 0;
}

.popover.bottom .arrow:after {
    top: 1px;
    margin-left: -10px;
    border-bottom-color: #ffffff;
    border-top-width: 0;
    content: " ";
}

.popover.left .arrow {
    top: 50%;
    right: -11px;
    margin-top: -11px;
    border-left-color: #999999;
    border-left-color: rgba(0, 0, 0, 0.25);
    border-right-width: 0;
}

.popover.left .arrow:after {
    right: 1px;
    bottom: -10px;
    border-left-color: #ffffff;
    border-right-width: 0;
    content: " ";
}

/*-------------------------------------------------------------
	Tooltips
-------------------------------------------------------------*/
.tooltip-inner {
    text-decoration: none;
    background-color: #04355E;
    border-radius: 0;
}

/* tooltip arrows from bootstrap 3 (needed because of angular bootstrap controls which use the old markup) */
.tooltip.top {
    padding: 5px 0;
    margin-top: -3px;
}

.tooltip.right {
    padding: 0 5px;
    margin-left: 3px;
}

.tooltip.bottom {
    padding: 5px 0;
    margin-top: 3px;
}

.tooltip.left {
    padding: 0 5px;
    margin-left: -3px;
}

.tooltip-arrow {
    position: absolute;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
}

.tooltip.top .tooltip-arrow {
    bottom: 0;
    left: 50%;
    margin-left: -5px;
    border-top-color: #04355E;
    border-width: 5px 5px 0;
}

.tooltip.top-left .tooltip-arrow {
    bottom: 0;
    left: 5px;
    border-top-color: #04355E;
    border-width: 5px 5px 0;
}

.tooltip.top-right .tooltip-arrow {
    right: 5px;
    bottom: 0;
    border-top-color: #04355E;
    border-width: 5px 5px 0;
}

.tooltip.right .tooltip-arrow {
    top: 50%;
    left: 0;
    margin-top: -5px;
    border-right-color: #04355E;
    border-width: 5px 5px 5px 0;
}

.tooltip.left .tooltip-arrow {
    top: 50%;
    right: 0;
    margin-top: -5px;
    border-left-color: #04355E;
    border-width: 5px 0 5px 5px;
}

.tooltip.bottom .tooltip-arrow {
    top: 0;
    left: 50%;
    margin-left: -5px;
    border-bottom-color: #04355E;
    border-width: 0 5px 5px;
}

.tooltip.bottom-left .tooltip-arrow {
    top: 0;
    left: 5px;
    border-bottom-color: #04355E;
    border-width: 0 5px 5px;
}

.tooltip.bottom-right .tooltip-arrow {
    top: 0;
    right: 5px;
    border-bottom-color: #04355E;
    border-width: 0 5px 5px;
}

/*-------------------------------------------------------------
	List groups
-------------------------------------------------------------*/
.list-group-item-action:focus, .list-group-item-action:hover {
    background-color: rgba(237, 79, 47, 0.1);
}

.list-group-item pre {
    margin-bottom: 0;
}

.list-group-item .help-label {
    float: right;
    margin-top: 0.7em;
    font-weight: 400;
    color: #ED4F2F;
    cursor: pointer;
    display: none;
}

.list-group-item:hover .help-label {
    display: inline-block;
}

.list-group.limit-height {
    max-height: 300px;
    overflow-y: auto;
}

.list-group-item samp, .ellipsis-block {
    display: block;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.list-group.two-columns .list-group-item {
    width: 50%;
    float: left;
    border-radius: 0;
}

.list-group.two-columns .list-group-item:first-child,
.list-group.two-columns .list-group-item:nth-child(2) {
    border-top: none;
}

.list-group.two-columns .list-group-item:last-child {
    border-bottom: none;
}

.list-group.two-columns .list-group-item:nth-child(odd) {
    border-right: 1px solid #ddd;
}

.card > .list-group.two-columns:first-child .list-group-item:first-child, .card > .list-group.two-columns:last-child .list-group-item:last-child {
    border-radius: 0;
}

.list-group.one-column .list-group-item:first-child {
    border-top: none;
}

.list-group.repos li {
    cursor: pointer;
}

/*-------------------------------------------------------------
	Forms
-------------------------------------------------------------*/
.form-control, .form-control-lg, .input-group-lg > .form-control, .input-group-lg > .input-group-addon, .input-group-lg > .input-group-btn > .btn {
    border-radius: 0;
}

.form-control-lg, .input-group-lg > .form-control, .input-group-lg > .input-group-addon, .input-group-lg > .input-group-btn > .btn {
    font-size: 1.125rem;
}

.form-control:focus {
    border-color: rgba(4, 53, 94, 0.5);
}

.input-group-btn {
    padding-left: 4px;
}

.input-group-addon {
    background-color: #fff;
    border-radius: 0;
    border: none;
    padding-left: 0;
}

.has-danger .input-group-addon {
    background-color: #fff;
}

input.ng-invalid.ng-touched, .ng-submitted input.ng-invalid {
    border-color: #d9534f;
}

.input-group-addon.icon {
    background: transparent;
    padding: 0;
    position: absolute;
    top: 3px;
    bottom: 0;
    z-index: 10;
    left: 0.5em;
    pointer-events: none;
    line-height: 2;
}

.input-group-addon.icon + .form-control {
    padding-left: 2.2em;
}

.form-control.b-0 {
    border: 0;
}

/*-------------------------------------------------------------
	List groups
-------------------------------------------------------------*/

.list-group-item:last-child,
.list-group-item:first-child {
    border-radius: 0;
}

.border-top-0 .list-group-item:first-child {
    border-top: 0;
}

/*-------------------------------------------------------------
	Switch control
-------------------------------------------------------------*/
span.switch {
    clear: both;
    margin: 0 5px;
    width: 36px;
}

input.switch:empty {
    display: none
}

input.switch:empty ~ label {
    position: relative;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    margin: 0.05em 0.6em -0.05em 0;
}

input.switch:empty ~ label:before {
    display: block;
    content: ' ';
    width: 2.2em;
    height: 0.8em;
    background-color: rgba(181, 181, 181, 0.5);
    border-radius: 10em;
    -moz-transition: all 100ms ease-in; /* FF4+ */
    -o-transition: all 100ms ease-in; /* Opera 10.5+ */
    -webkit-transition: all 100ms ease-in; /* Saf3.2+, Chrome */
    transition: all 100ms ease-in;
}

input.switch:empty ~ label:after {
    position: absolute;
    display: block;
    top: -0.2em;
    left: -0.3em;
    content: ' ';
    width: 1.25em;
    height: 1.25em;
    background-color: #888888;
    border-radius: 50%;
    -moz-transition: all 100ms ease-in; /* FF4+ */
    -o-transition: all 100ms ease-in; /* Opera 10.5+ */
    -webkit-transition: all 100ms ease-in; /* Saf3.2+, Chrome */
    transition: all 100ms ease-in;
}

input.switch:checked ~ label:before {
    background-color: rgba(4, 53, 94, .5)
}

input.switch:checked ~ label:after {
    left: 1.3em;
    background-color: #04355E;
}

.card.active input.switch:checked ~ label:before {
    background-color: rgba(255, 255, 255, .5);
}

.card.active input.switch:checked ~ label:after {
    background-color: #fff;
}

/*-------------------------------------------------------------
	Angular Toaster messages
-------------------------------------------------------------*/
#toast-container .toast {
    border-radius: 0;
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.3);
    position: relative;
}

#toast-container > :hover {
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.6);
}

#toast-container > div:before {
    display: block;
    font-family: 'icomoon', sans-serif !important;
    font-size: 2em;
    position: absolute;
    left: 0.3em;
    top: 0.1em;
}

#toast-container .toast.toast-error,
#toast-container .toast.toast-warning,
#toast-container .toast.toast-info,
#toast-container .toast.toast-success {
    background-image: none !important;
}

#toast-container > .toast-error:before,
#toast-container > .toast-warning:before {
    content: "\e920";
}

#toast-container > .toast-success:before {
    content: "\e914";
}

#toast-container > .toast-info:before {
    content: "\e924";
}

#toast-container > .toast-info {
    background-color: #10b0a0;
}

#toast-container > :hover {
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.5) !important;
}

#toast-container .toast-title {
    font-weight: 500;
}

/*-------------------------------------------------------------
	Tutorial
-------------------------------------------------------------*/

.pages-wrapper {
    position: relative;
    overflow: hidden;
}

.page-slide {
    position: absolute;
    -moz-transition: left 0.18s ease-out; /* FF4+ */
    -o-transition: left 0.18s ease-out; /* Opera 10.5+ */
    -webkit-transition: left 0.18s ease-out; /* Saf3.2+, Chrome */
    transition: left 0.18s ease-out;
}

.tutorial-container .pages-wrapper {
    min-height: 300px;
}

.page-slide ul {
    list-style-type: none;
    margin-top: 16px;
}

/*-------------------------------------------------------------
	Search RDF resource box
-------------------------------------------------------------*/

#auto-complete-results-wrapper {
    max-height: 204px;
    overflow: auto;
}

#auto-complete-results-wrapper div:hover {
    background-color: #3385ff;
    color: white;
    cursor: pointer;
}

#auto-complete-results-wrapper div.active {
    background-color: #3385ff;
    color: white;
    cursor: pointer;
}

#auto-complete-results-wrapper div.selected {
    background-color: #aee4df;
    color: #0a6d63;
    cursor: pointer;
}

#auto-complete-results-wrapper div p b {
    color: #ED4F2F;
}

#auto-complete-results-wrapper div.active p b {
    color: #FFAD33;
}

#auto-complete-results-wrapper div p {
    margin-bottom: 0;
    padding: 5px 25px;
}

#search-resource-box .clear-icon {
    position: relative;
    right: 45px;
    z-index: 10;
    float: none;
}

/*-------------------------------------------------------------
	Animations
-------------------------------------------------------------*/
@keyframes load8 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(-360deg);
        transform: rotate(-360deg);
    }
}

/*-------------------------------------------------------------
	Paggination - Export view
-------------------------------------------------------------*/

ul.nav.navbar-right.pagination li {
    float: left;
}

ul.nav.navbar-right.pagination li:hover a {
    text-decoration: none;
}

ul.nav.navbar-right.pagination li.disabled a {
    color: rgba(0, 0, 0, 0.5) !important;
    pointer-events: none;
}

/*-------------------------------------------------------------
	Paggination - Sparql view
-------------------------------------------------------------*/

#yasr ul.nav.navbar-right.pagination {
    float: right;
    margin-top: 10px;
}

#yasr ul.nav.navbar-right.pagination li {
    padding: 2px 5px;
}

#yasr ul.nav.navbar-right.pagination li.active {
    background-color: #ED4F2F;
    border-color: #ED4F2F;
}

#yasr ul.nav.navbar-right.pagination li.active a {
    color: #fff;
}

#yasr ul.nav.navbar-right.pagination li.disabled a {
    color: rgba(0, 0, 0, 0.5) !important;
    pointer-events: none;
}

@media (max-width: 1439px) {
    .yasr .dataTables_wrapper .dataTables_filter input, .yasr .openGchartBtn {
        margin-top: 8px;
    }
}

.yasr .pivotTable {
    overflow-y: auto;
}

.btn.btn-primary.btn-sm.yasr_downloadIcon {
    margin-right: 6px;
}

/*-------------------------------------------------------------
	Save as dropdown yasr SPARQL
-------------------------------------------------------------*/

.saveAsDropDown.btn-group .btn.btn-primary.btn-sm.dropdown-toggle, .yasr_downloadIcon, .resultsVisualButton button {
    font-size: 16px;
    padding: 10px 16px;
    margin-top: 4px;
}

/*-------------------------------------------------------------
	SPARQL editor
-------------------------------------------------------------*/

.yasqe .CodeMirror {
    min-height: 330px;
}

.nav-item.sparql-tab a.nav-link {
    max-width: 250px;
    padding-right: 20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    position: relative;
}

.nav-item.sparql-tab a.nav-link .btn.btn-link {
    position: absolute;
    right: 4px;
    top: 11px;
}

.nav-item.sparql-tab a.nav-link span {
    padding-right: 10px;
}

/*-------------------------------------------------------------
    Namespaces view
-------------------------------------------------------------*/
input[name=namespace] {
    width: 55%;
    float: left;
}

.showing-info-namespaces {
    margin-top: 16px;
}

/*-------------------------------------------------------------
    Domain-Range graph side menu
-------------------------------------------------------------*/

.rdf-side-panel-content ul.rdf-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.rdf-side-panel-content ul.rdf-list li {
    position: relative;
    padding: 5px 50px 5px 10px;
}

.rdf-side-panel-content ul.rdf-list li svg {
    position: absolute;
    top: 50%;
    right: 10px;
    pointer-events: none;
}

.rdf-side-panel-content ul.rdf-list li:nth-of-type(odd) {
    background-color: rgba(0, 0, 0, .05);

}

.rdf-side-panel-content ul.rdf-list li {
    border-top: 1px solid #ddd;
    padding: 10px;
}

/*-------------------------------------------------------------
    Class hierarchy view
-------------------------------------------------------------*/

.slider-help-button .help-button {
    padding: 0;
    position: absolute;
    right: -25px;
    top: -1px;
}

.slider-help-button .help-button .icon-info {
    font-size: 1.2em;
}

.slider-help-button {
    position: relative;
    left: -16px;
}

/*-------------------------------------------------------------
    Internet explorer fixes
-------------------------------------------------------------*/

/*Disable search graphs input clear and input reveal*/
::-ms-clear {
    displa