@font-face {
    font-family: 'Goobi2';
    src: url('../font/opensans-regular-webfont.eot');
    src: url('../font/opensans-regular-webfont.eot?#iefix') format('embedded-opentype'), url('../font/opensans-regular-webfont.woff2') format('woff2'),
        url('../font/opensans-regular-webfont.woff') format('woff'), url('../font/opensans-regular-webfont.ttf') format('truetype'),
        url('../font/opensans-regular-webfont.svg#open_sansregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

body {
    font-family: Goobi2, sans-serif;
    font-size: 12px !important;
}

#main .page-header .pull-left h1 {
    line-height: 1.2;
}

@media ( max-width : 1200px) {
    .icon-nav {
        display: block !important;
    }
}

/* ------------- General --------------- */
a:hover, a:focus {
    /*     color: #E63A3A; */
    text-decoration: none;
}

.form-control::-moz-placeholder {
    color: silver;
    opacity: 1;
}

/* ------------- Theme overriding --------------- */
.form-control {
    height: 25px;
    font-size: 13px;
    padding: 2px 12px;
}

.form-control-file {
    height: auto;
}

.form-horizontal .control-label, .form-horizontal .radio, .form-horizontal .checkbox, .form-horizontal .radio-inline, .form-horizontal .checkbox-inline
    {
    padding-top: 0;
}

.checkbox-height-fix {
    height: 18px;
}

label, input, button, select, textarea {
    font-size: 13px;
}

label {
    font-weight: 300;
}

.input-group-btn .btn {
    font-size: 13px;
    height: 28px;
    margin-top: 0px;
    padding: 5px 10px 0;
}

.searchfield {
    width: 400px;
    margin: 0;
    border: 1px solid #ccc;
}

.searchfieldbuttongroup {
    padding-bottom: 4px;
    padding-top: 4px;
}

.form-horizontal.form-bordered .form-group [class*="col-"] {
    padding: 8px;
}

.help-block {
    margin-bottom: 1px;
}

#main .page-header {
    margin: 9px 0 2px 0;
}

.stats>li i {
    font-size: 28px;
}

.stats>li .details span.big {
    font-size: 11px;
}

.box .box-title {
    margin-top: 12px;
    /*padding: 2px 0 2px 10px;*/
}

.box .box-title h3 {
    font-size: 15px;
    line-height: 24px;
}

.box .box-title.box-toggle h3 {
    position: relative;
    display: flex;
    align-items: center;
    float: none;
/*     width: calc(100% - 28px); */
    font-size: 15px;
    line-height: 24px;
    cursor: pointer;
    z-index: 10;
}

.box .box-title.box-toggle h3 .fa-angle-down {
    margin-left: auto;
    transition: all 0.2s ease-in;
}

.box .box-title.box-toggle h3.in .fa-angle-down {
    transform: rotate(180deg);
}

.box .box-title.box-toggle .actions {
    margin-left: auto;
}

.progress-bar {
    height: 75%;
    margin-top: 5px;
}

/* ------------- Background colors --------------- */
.background-color-A {
    background: none repeat scroll 0 0 #aaa;
}

.background-color-B {
    background: none repeat scroll 0 0 #bbb;
}

.background-color-C {
    background: none repeat scroll 0 0 #ccc;
}

.background-color-D {
    background: none repeat scroll 0 0 #56af45;
}

.background-color-E {
    background: none repeat scroll 0 0 #e8860c;
}

.background-color-F {
    background: none repeat scroll 0 0 #e51400;
}

/* ------------- Menu --------------- */
#navigation #brand {
    width: 50px;
    height: 40px;
    margin-top: 0px;
    background: url("../img/goobi/goobi_2.0_eyes_navbar.png") no-repeat;
    padding-left: 0px;
}

#navigation .toggle-mobile {
    background-color: transparent;
}

.metadataTitle {
    color: #FFFFFF;
    float: left;
    font-size: 13px;
    line-height: 20px;
    margin-top: 9px;
    margin-right: 15px;
    padding-bottom: 2px;
    max-width: 350px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

/* Toggle mobile navigation */
#navigation .toggle-mobile {
    display: none;
}

@media screen and (max-width: 840px) {
    #navigation .toggle-mobile {
        display: block;
    }
}

/* CSS-Bugfix for rendered whitespace from h:panelGroup */
#navigation .mobile-nav.open>li.has-submenu {
    margin-bottom: -17px;
}

/* ------------- sub forms --------------- */

.padding-subform {
    padding: 4px !important;
}

.subform{
	border:1px #ddd solid;
	padding:0px;
	margin-bottom:9px;
}

/* ------------- Borders --------------- */
.border-top-light {
    border-top: 1px solid #ddd !important;
}

.border-bottom-light {
    border-bottom: 1px solid #ddd !important;
}

.border-right-light {
    border-right: 1px solid #ddd !important;
}

.border-left-light {
    border-left: 1px solid #ddd !important;
}

/* ------------- Margins --------------- */
.padding-sides-no {
    padding-right: 0px;
    padding-left: 0px;
}

.padding-right-no {
    padding-right: 0px;
}

.padding-left-no {
    padding-left: 0px;
}

.padding-right-less {
    padding-right: 5px;
}

.padding-right-more {
    padding-right: 10px;
}

.padding-left-less {
    padding-left: 5px;
}

.padding-sides-less {
    padding-left: 5px;
    padding-right: 5px;
}

.padding-sides-10 {
    padding-left: 10px;
    padding-right: 10px;
}

.margin-sides-10 {
    display: inline-block;
    margin-left: 10px;
    margin-right: 10px;
}

.margin-sides-less {
    margin-left: 5px;
    margin-right: 5px;
}

.margin-sides-lesser {
    margin-left: 3px;
    margin-right: 3px;
}

.margin-left-5 {
    display: inline-block;
    margin-left: 5px;
}

.margin-left-5-no-block {
    margin-left: 5px;
}

.margin-left-10-no-block {
    margin-left: 10px;
}

.margin-left-10 {
    display: inline-block;
    margin-left: 10px;
}

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

.margin-right-regular {
    margin-right: 7px !important;
}

.margin-right-less {
    margin-right: 5px !important;
}

.margin-right-lesser {
    margin-right: 3px !important;
}

.margin-right-10 {
    display: inline-block;
    margin-right: 10px;
}

.margin-all-regular {
    margin: 7px;
}

.margin-all-more {
    margin: 10px;
}

.margin-all-most {
    margin: 15px;
}

.margin-top-10 {
    display: inline-block;
    margin-top: 10px;
}

.margin-top-10-no-block {
    margin-top: 10px;
}

.margin-top-more {
    margin-top: 10px !important;
}

.margin-top-most {
    margin-top: 15px !important;
}

.margin-top-5 {
    display: inline-block;
    margin-top: 5px;
}

.margin-top-lesser {
    margin-top: 3px !important;
}

.margin-top-less {
    margin-top: 5px !important;
}

.margin-top-no {
    margin-top: 0px !important;
}

.margin-top-regular {
    margin-top: 7px !important;
}

.margin-bottom-most {
    margin-bottom: 15px;
}

.margin-bottom-more {
    margin-bottom: 10px;
}

.margin-bottom-no {
    margin-bottom: 0px !important;
}

.margin-bottom-regular {
    margin-bottom: 7px !important;
}

.margin-bottom-10 {
    display: inline-block;
    margin-bottom: 10px;
}

.margin-bottom-5 {
    display: inline-block;
    margin-bottom: 5px;
}

.margin-no {
    margin: 0px;
}

.margin-sidebar {
    display: table;
    margin-left: 20px;
    text-align: left;
}

.margin-sidebar-block {
    display: table;
    width: 150px;
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 5px;
    text-align: left;
}

.padding-all-regular {
    padding: 7px;
}

.padding-all-more {
    padding: 10px;
}

.padding-all-most {
    padding: 15px;
}

.padding-left-regular {
    padding-left: 10px !important;
}

.padding-right-regular {
    padding-right: 10px !important;
}

.slimScrollDiv {
    border-bottom: 0px !important;
}

/*
.input-group-addon {
    padding: 2px 5px;
}
*/

/* ------------- Tables --------------- */
.table>tbody>tr>td {
    padding: 6px;
}

.table.dataTable .sorting, .table.dataTable .sorting_desc, .table.dataTable .sorting_asc {
    padding-right: 10px;
}

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

.width80 {
    width: 80px;
}
.width100 {
    width: 100px;
}
.width120 {
    width: 120px;
}
.width150 {
    width: 150px;
}
.width200 {
    width: 200px;
}
.width250 {
    width: 250px;
}
.width300 {
    width: 300px;
}
.width350 {
    width: 350px;
}
.maxWidth80 {
    max-width: 80px;
}
.maxWidth100 {
    max-width: 100px;
}
.maxWidth120 {
    max-width: 120px;
}
.maxWidth150 {
    max-width: 150px;
}
.maxWidth200 {
    max-width: 200px;
}
.maxWidth250 {
    max-width: 250px;
}
.maxWidth300 {
    max-width: 300px;
}
.maxWidth350 {
    max-width: 350px;
}
.maxWidth350 {
    max-width: 500px;
}



.tableColumnWidthSmall {
    width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
}

.tableColumnWidth100 {
    width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
}

.tableColumnWidthMid {
    width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
}

.tableColumnWidthLong {
    width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
}

.tableColumnMaxWidthMid {
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
}

.tableColumnMaxWidthLong {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
}

.tableColumnMaxWidthLonger {
    max-width: 350px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
}

.tableColumnMaxWidthExtraLong {
    max-width: 500px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
}

.box.box-bordered .table.table-bordered th:last-child, .box.box-bordered .table.table-bordered td:last-child {
    border: 1px solid #ddd!important;
}

/* ------------- Statistics --------------- */
.searchformfield {
    padding-top: 9px;
    padding-bottom: 9px;
}

/* ------------- Statistics --------------- */
.standardTable {
    border: 1px solid #DDDDDD;
    line-height: 1.42857;
    padding: 8px;
    vertical-align: top;
    border-spacing: 0;
    margin-top: 20px;
    margin-bottom: 10px;
}

.normdataTable {
    vertical-align: top;
    padding: 3px;
}

.standardTable_Header, .standardTable_Column, .standardTable_ColumnRight {
    border-top: 1px solid #DDDDDD;
    line-height: 1.42857;
    padding: 8px !important;
    vertical-align: top;
}

/* ------------- Widths --------------- */
.width-40 {
    width: 40px;
}

.width-100 {
    width: 100px;
}

.width-150 {
    width: 150px;
}

.width-200 {
    width: 200px;
}

.width-300 {
    width: 300px;
}

.width-400 {
    width: 400px;
}

.width-600 {
    width: 600px;
}

.width-800 {
    width: 800px;
}

/* ------------- Fonts --------------- */
dropdown-menu>li>a {
    font-size: 13px;
}

.font-danger {
    color: red;
}

.font-info {
    color: blue;
}

.font-light {
    color: #AAAAAA;
}

.font-status-done{
	color: #339933;	
}

.font-status-open{
	color: #e8860c;	
}

.font-status-inwork{
	color: #ffbf21;	
}

.font-status-locked{
	color: #e51400;	
}

.font-status-error{
	color: #e51400;	
}

.font-status-deactivated{
	color: #ccc;	
}

.font-bold {
  font-weight: bold;
}

.font-asterisk {
    color: #AAAAAA;
    font-size: 9px;
}

.font-normal {
    font-weight: normal;
}

.font-black {
    color: black;
}

.font-size-xs {
    font-size: 11px;
}

.font-size-s {
    font-size: 12px;
}

.font-size-m {
    font-size: 13px;
}

.font-size-l {
    font-size: 14px;
}

.block {
    display: block;
}

.inline {
    display: inline;
}

.font-black-block {
    color: black;
    display: block;
}

.font-left {
    text-align: left;
}

/* ------------- Messages --------------- */
.messagesLogin {
    list-style: none;
    margin: 0;
    margin-top: 7px;
    padding-left: 0px;
    margin-bottom: -10px;
}

.messages {
    list-style: none;
    margin: 0;
    margin-top: 7px;
    /*margin-bottom: -20px;*/
}

.messages>li {
    margin-top: 3px;
    margin-bottom: 3px;
}

.alert {
    padding: 7px;
}
/* ------------- Boxes --------------- */
.box.box-bordered.thin-margin .box-title {
    border: 1px solid #ddd;
}

.box.box-bordered.thin-margin .box-content {
    border: 1px solid #ddd;
    border-top: 0;
}

.box .box-title .tab-margin>li {
    margin-bottom: 7px;
    margin-top: 2px;
}

.box .box-title .tab-margin>li.active>a {
    background: #eee;
    color: #666666;
}

.box.box-color.ultralightgrey .box-title {
    background: #ccc none repeat scroll 0 0 !important;
}

/* ------------- Action Box --------------- */
.action-ul {
    padding-left: 0px;
    margin: 0px;
    list-style-type: none;
}

.action-li {
    padding: 5px 0px 5px 0px;
}

.action-intent-ul {
    list-style-type: none;
}

.action-intent-li {
    padding: 3px 0px 3px 20px;
}

/* ------------- Icon fixes for boxes --------------- */
.box-icon-fix {
    padding: 0px 0px 7px 0px;
}

.box-icon-fix-menu-up3 {
    padding: 0px 5px 5px 0px;
}

.box-icon-fix-menu {
    padding: 0px 7px 0px 0px;
}

.box-icon-fix-down {
    padding: 10px 0px 0px 0px;
}

/* ------------- progress, color rectangles, buttons in list --------------- */
.colors.small13>li {
    height: 13px;
    width: 13px;
}

.btn.btn-very-small {
    padding: 0 7px;
}

/* farben:

grün: #339933
gelb: #ffbf21
orange: #e8860c
rot: #e51400
blau: #368ee0
grau: #dddddd

*/

.status-done{
	background: #339933 none repeat scroll 0 0;	
}

.status-open{
	background: #e8860c none repeat scroll 0 0;	
}

.status-inwork{
	background: #ffbf21 none repeat scroll 0 0;	
}

.status-locked{
	background: #e51400 none repeat scroll 0 0;	
}

.status-error{
	background: #eee none repeat scroll 0 0;	
	background-image: linear-gradient(45deg, #e51400 25%, transparent 25%, transparent 50%, #e51400 50%, #e51400 75%, transparent 75%, transparent);
    background-size: 7px 7px;
/*     border: 0.5px solid #e51400; */
}

.status-deactivated{
	background: #ccc none repeat scroll 0 0;	
}

.progressbar-status-error {
	background-image: linear-gradient(45deg, #eee 25%, transparent 25%, transparent 50%, #eee 50%, #eee 75%, transparent 75%, transparent);
    background-size: 10px 10px;
}

/*--------------- Easy Readability ---------------- */

.easy-read-status-done{
	background: black none repeat scroll 0 0;	
	border: 1px solid black;
}

.easy-read-status-open{
	background: #ddd none repeat scroll 0 0;
	border: 1px solid black;
}

.easy-read-status-inwork{
	background: #bbb none repeat scroll 0 0;
	border: 1px solid black;
}

.easy-read-status-locked{
	background: white none repeat scroll 0 0;
	border: 1px solid black;
}

.easy-read-status-error{
	background: #eee none repeat scroll 0 0;	
	background-image: linear-gradient(45deg, black 25%, transparent 25%, transparent 50%, black 50%, black 75%, transparent 75%, transparent);
    background-size: 7px 7px;
	border: 1px solid black;
}

.easy-read-status-deactivated{
	background: #eee none repeat scroll 0 0;	
	background-image: linear-gradient(0deg, #ccc 25%, transparent 25%, transparent 50%, #ccc 50%, #ccc 75%, transparent 75%, transparent);
    background-size: 14px 14px;
	border: 1px solid black;
}

.easy-read-progressbar-status-locked {
    background: white none repeat scroll 0 0;
	border-bottom: 1px solid black;
	border-top: 1px solid black;
	border-right: 1px solid black;
	box-shadow: none;
}

.easy-read-progressbar-status-open {
    background: #ccc none repeat scroll 0 0;
	border-bottom: 1px solid black;
	border-top: 1px solid black;
	border-right: 1px solid black;
	box-shadow: none;
}

.easy-read-progressbar-status-done {
   	background: black none repeat scroll 0 0;	
	border-bottom: 1px solid black;
	border-top: 1px solid black;
	border-left: 1px solid black;
	border-right: 1px solid black;
	box-shadow: none;
}

.easy-read-progressbar-status-error {
	background-color: black;	
	background-image: linear-gradient(45deg, #eee 25%, transparent 25%, transparent 50%, #eee 50%, #eee 75%, transparent 75%, transparent);
    background-size: 10px 10px;
    border-bottom: 1px solid black;
	border-top: 1px solid black;
	border-right: 1px solid black;
	box-shadow: none;
}

/* ------------- badges and labels --------------- */
.badge-no-radius {
	border-radius: 0px;
}
	
.label-intranda-ultralight, .badge-intranda-ultralight {
    background-color: #bbbbbb;
    font-weight: normal;
    margin: 3px;
}

.label-intranda-light, .badge-intranda-light {
    font-weight: normal;
    margin: 3px;
}

.label-intranda-red, .badge-intranda-red {
    background-color: #E51400;
    font-weight: normal;
    margin: 3px;
}

.label-intranda-orange, .badge-intranda-orange {
    background-color: #F8A31F;
    font-weight: normal;
    margin: 3px;
}

.label-intranda-green, .badge-intranda-green {
    background-color: #56AF45;
    font-weight: normal;
    margin: 3px;
}

.label-intranda-blue, .badge-intranda-blue {
    background-color: #368EE0;
    font-weight: normal;
    margin: 3px;
}

.label-light-red, .badge-light-red {
    background-color: white;
    border:1px solid #E51400;
    font-weight: normal;
    color: #E51400;
    margin: 3px;
}

.label-light-blue, .badge-light-blue {
    background-color: white;
    border:1px solid #368EE0;
    font-weight: normal;
    color: #368EE0;
    margin: 3px;
}

.label-light-green, .badge-light-green {
    background-color: white;
    border:1px solid #56AF45;
    font-weight: normal;
    color: #56AF45;
    margin: 3px;
}

.label-light-orange, .badge-light-orange {
    background-color: white;
    border:1px solid #F8A31F;
    font-weight: normal;
    color: #F8A31F;
    margin: 3px;
}

.label-light-purple, .badge-light-purple {
    background-color: white;
    border:1px solid #8947CC;
    font-weight: normal;
    color: #8947CC;
    margin: 3px;
}

.label-light-lila, .badge-light-lila {
    background-color: white;
    border:1px solid #500899;
    font-weight: normal;
    color: #500899;
    margin: 3px;
}

.label-light-greengrey, .badge-light-greengrey {
    background-color: white;
    border:1px solid #617F7D;
    font-weight: normal;
    color: #617F7D;
    margin: 3px;
}

.label-light-green2, .badge-light-green2 {
    background-color: white;
    border:1px solid #3B7F7B;
    font-weight: normal;
    color: #3B7F7B;
    margin: 3px;
}

.label-light-brown1, .badge-light-brown1 {
    background-color: white;
    border:1px solid #3E2115;
    font-weight: normal;
    color: #3E2115;
    margin: 3px;
}

.label-light-brown2, .badge-light-brown2 {
    background-color: white;
    border:1px solid #74422B;
    font-weight: normal;
    color: #74422B;
    margin: 3px;
}

a.badge:hover,
a.badge:focus {
	color: black;
  	text-decoration: none;
  	cursor: pointer;
}

.pointer {
    cursor: pointer;
}

/* ------------- Icons --------------- */
.fa-double-angle-left:before {
    content: "\f104\f104";
}

.fa-double-angle-right:before {
    content: "\f105\f105";
}

/* ------------- IMAGE/THUMBNAIL NAVIGATION ------------- */
.image-navigation,
.thumbnail-navigation {
    padding: 12px 0;
    text-align: center;
    border-bottom: 1px solid #ccc;
}
.thumbnail-navigation {
    border: none;
}
.image-navigation + .box-content {
    padding: 10px 0;
}
.image-navigation__imagecount {
    display: inline-block;
    padding: 6px 0;
}
#imageBack,
#imageNext,
.image-navigation__imagecount {
    margin-right: 7px;
    margin-left: 7px;
}
.goto-text {
    margin-right: 5px;
}
#jumpToImage, .autocomplete {
   width: 120px;
}

.thumbdropdownLabel{
	margin-left:10px;
}
.thumbdropdown {
	max-width: 100px;
	display:inline;
	margin-left:10px;
	margin-right:5px;
}

@media screen and (max-width: 1180px) {
    #imageBack span,
    #imageNext span,
    [id*="thumbPrev"] span,
    [id*="thumbNext"] span {
        display: none;
    }
}

/* ------------- METS-Editor Layout --------------- */
.row.no-margin { margin: 0; }
[class*="col-"].no-padding { padding: 0; }
[class*="col-"].no-padding-left { padding-left: 0; }
[class*="col-"].no-padding-right { padding-right: 0; }

@media screen and (max-width: 1180px) {
    [class*="col-"].no-padding-right { padding-left: 0; }
    [class*="col-"].no-padding-left { padding-right: 0; }
}

#toggleStructlist {
    display: none;
    padding: 11px 10px;
    color: #fff;
}
#left {
    height: calc(100vh - 40px);   
    border-right: 2px solid #368ee0; 
    transition: all 0.3s ease-in;
    z-index: 100;
}
#left .ui-resizable-handle {
    top: 0;
    bottom: 0; 
}

#tabelle {
    margin-bottom: 30px;
}


@media screen and (max-width: 768px) {
    #toggleStructlist {
        display: list-item;
    }
    #left {
        display: block !important;
        position: fixed !important;
        top: 40px !important;
        right: 0 !important;
        bottom: 0 !important;
        left: -100%;
        width: 50% !important;
        height: 100% !important;
        overflow-y: auto !important;
        opacity: 0;
        z-index: 999 !important;
    }
    #left.in {
        left: 0;
        opacity: 1;
    }
}
@media screen and (max-width: 480px) {
    #left {
        width: 100% !important;
    }
}

#main {
    overflow: inherit;
    padding-bottom: 0;
}

#pageSelectBox {
    margin-top: 12px;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    overflow-y: auto;
}
#pageSelectBox .box-title {
    margin: 0;
    border-top: none;
}
#pageSelectBox .box-content {
    border-bottom: none;
}

#myCheckboxes {
    width: 95%;
}

/* ------------- METS-Editor Metadata --------------- */
.metadata-input__person,
.metadata-input__metadata,
.metadata-input__duplicate {
    float: left;
}
.metadata-input__person,
.metadata-input__metadata {
    width: calc(100% - 60px);
    min-height: 25px;
    padding-right: 10px;
}
.metadata-input__duplicate {
    width: 60px;
    text-align: right;
}
.metadata-input__duplicate > a {
    display: inline-block;
    height: 25px;
    line-height: 25px;
    text-align: center;
    color: #eee;
}
.metadata-input__duplicate:hover > a {
    color: #333;
}

.change-icon > .toggle + .toggle,
.change-icon:hover > .toggle {
  display: none;
}
.change-icon:hover > .toggle + .toggle {
  display: inherit;
}


/* ------------- METS-Editor Image --------------- */
#metseditorImage {
    background-color: #fff;
    overflow-y: auto;
}

#metseditorImageContainer {
    margin: 0 auto;
    border: 1px solid #ccc;
    transition: all .2s ease-in;
    width: 100%;
}

#metseditorImageImage {
    overflow: hidden;
}

#metseditorImageImage.scrollable {
    overflow-y: auto;
}

/* ------------- METS-Editor --------------- */
#treeform {
    padding: 5px;
    padding-bottom: 30px;
}

.popover {
    z-index: 9999;
}

.metspopup_lable {
    font-weight: bold;
    margin: 4px 4px 0px 4px;
    font-size: 11px;
    display: block;
}

.metspopup_value {
    font-size: 11px;
    display: block;
    margin: 0px 4px 4px 4px;
}

.document {
    font-weight: normal;
    color: black;
}

.documentSelected {
    font-weight: bold;
    color: black;
}

.select-radio input[type="radio"] {
    margin: 5px;
}

.select-radio label {
    display: inline-block;
    margin: 0;
    padding: 2px 0 0 5px;
    font-weight: normal;
}

.btn2 {
    padding: 7px;
    /* 	font-size:14px; */
}

.btn2:focus {
    outline: 1px dotted;
}

.btn:focus {
    outline: 1px dotted;
}

a:focus {
    outline: 1px dotted;
}

.btn2:hover {
    background: #eee;
    text-shadow: none;
}

.font-bigger {
    font-size: 17px;
}

.btn-clean {
    margin: 0;
    padding: 0;
    border: none;
    background: none;
}
.btn-clean:active,
.btn-clean:focus {
    outline: none;
}

/* ------------- METS-Editor Bookmarks --------------- */
div[id*=":bookmark"] {
    position: fixed;
    right: 0;
    width: 30px;
    height: 30px;
}

div[id*=":bookmark1"], .bookmarkClass1 {
    bottom: 200px;
}

div[id*=":bookmark2"], .bookmarkClass2 {
    bottom: 160px;
}

div[id*=":bookmark3"], .bookmarkClass3 {
    bottom: 120px;
}

div[id*=":bookmark4"], .bookmarkClass4 {
    bottom: 80px;
}

div[id*=":bookmark5"], .bookmarkClass5 {
    bottom: 40px;
}

div[id*=":bookmark"] a {
    position: absolute;
    display: inline-block;
    top: 0;
    right: 0;
    width: 30px;
    height: 30px;
    line-height: 20px;
    text-align: center;
    transition: all 0.5s ease-in;
}

div[id*=":bookmark"] a.set-bookmark {
    z-index: 2;
}

div[id*=":bookmark"] a.remove-bookmark {
    z-index: 1;
}

div[id*=":bookmark"]:hover a.remove-bookmark {
    right: 30px;
}

.create-bookmark {
    position: fixed;
    right: 0px;
    width: 30px;
    height: 30px;
    line-height: 20px;
}

/* ------------- METS-Editor Structdata --------------- */
@media screen and (max-width: 480px) {
    #structdataContentBox .row {
        margin: 0;
    }
}

/* ------------- METS-Editor OCR --------------- */
.metseditorOcr {
	display:block;
	background-color: #ffffff; 
	border-style: solid; 
	border-width: 1px; 
	border-color: #CCCCCC; 
	margin-bottom: 15px; 
	padding: 5px;
}
.metseditorOcrCaption {
	font-size: 16px;
	font-weight: 400;
	display: block;
	margin-bottom:10px;
}

/* ------------- METS-Editor Popup --------------- */
.metseditorpopup-ul {
    padding-left: 0px;
    margin: 0px;
    list-style-type: none;
    font-weight: bold;
}

.metseditorpopup-ul>li:nth-child(2n) {
    font-weight: normal;
    margin-bottom: 3px;
}

#myCheckboxes label {
    font-weight: 400;
    margin-left: 5px;
    margin-right: 5px;
}

#myCheckboxes span {
    float: right;
    color: silver;
    margin-top: 3px;
    cursor: pointer;
}

#txtZoom2 {
    display: none;
    width: 30px;
    border-style: solid;
    border-color: silver;
    border-width: 1px;
}

.currentPageNumber {
    font-weight: bold;
    padding: 13px 10px 0px 10px;
    font-size: 16px;
}

#jumpToImage_input {
    font-size: 13px;
    color: #555;
    height: 28px;
    border: 1px solid #ccc;
    width: 100%;
}

#ui-datepicker-div {
    border: 1px solid #ccc;
}

/* PRIMEFACES AUTOCOMPLETE */
.ui-autocomplete-input,
.ui-autocomplete-panel {
    font-family: Goobi2,​ sans-serif;
    color: #333;
    border: 1px solid #ccc;    
}

.ui-autocomplete-input {
    width: 100%;
    height: 25px;
    padding: 2px 12px;
    font-size: 13px;
    text-decoration-color: #818181;
}

.ui-autocomplete-panel {
}

.ui-autocomplete-panel .ui-autocomplete-items {
    font-family: Goobi2,​ sans-serif;
    font-size: 13px;
    color: #333;
}

.ui-autocomplete-panel .ui-autocomplete-item {
    border: 0 none;
    cursor: pointer;
    font-weight: normal;
    margin: 1px 0;
    padding: 3px 5px;
    text-align: left;
}

.ui-autocomplete-panel.ui-shadow {
    box-shadow: none;
}

.ui-autocomplete-panel .ui-autocomplete-item.ui-state-highlight  {
    text-shadow: none;
    color: #fff;
    border: 1px solid #368EE0;
    background: #368EE0;    
}

.ui-corner-all {
    border-radius: 0px;
}

.ui-progressbar {
    background: #368EE0;
    height: 20px;
    text-align: left;
    overflow: hidden;
    margin-top: 10px;
    font-weight: normal;
}

.ui-widget-header {
    background: #368EE0;
    border: 0px solid #368EE0;
    color: #368EE0;
    font-weight: normal;
}

.ui-progressbar-label {
    height: 100%;
    margin-top: 1px;
    position: absolute;
    color: white;
    display: none;
    text-align: center;
    width: 100%;
}

.ui-progressbar .ui-widget-header {
    background: #368EE0;
    border-radius: 0px;
}

.ui-progressbar .ui-progressbar-label {
    font-weight: normal;
}

.metsEditorTextArea {
    min-height: 80px;
    resize: vertical;
}

.metsEditorSelectManyListbox {
    height: 160px !important;
}
.massimportListHeight {
    height: 150px !important;
}

.navigationitem {
    color: #fff;
    display: block;
    line-height: 20px;
    padding: 11px 10px 9px;
    position: relative;
}

.navigationitem i {
    color: #fff;
    font-size: 16px;
}

/* Thumbnails */
.goobi-thumbnail {
    float: left;
    margin: 7px;
    /*     width: 200px; */
}

.goobi-thumbnail .thumb {
    float: left;
    width: 100%;
    text-align: center;
    overflow: hidden;
}

.goobi-thumbnail .thumb canvas {
    max-width: 100%;
}

.goobi-thumbnail .goobi-thumbnail-caption {
    float: left;
    width: 100%;
    min-height: 20px;
    line-height: 20px;
    text-align: center;
}

.big-image-caption {
    text-align: center;
}

.div-image img {
    float: right;
    border: solid 1px;
    border-color: lightgrey;
}

.img-active {
    background-color: #368ee0;
    color: white;
}

#contentArea,
#thumbnailContainer {
    padding-bottom: 15px;
    overflow-y: auto;
    overflow-x: hidden;
}

/* ------------- step progressbar --------------- */
#progressSteps {
    float: left;
    width: 100%;
    min-height: 170px;
    margin: 21px auto;
}

#progressSteps ul {
    position: relative;
    float: left;
    left: 50%;
    list-style: none;
    margin: 0;
    padding: 0;
}

#progressSteps ul li {
    display: inline-block;
    position: inherit;
    float: left;
    right: 50%;
    min-width: 44px;
    margin-bottom: 14px;
    padding: 0 5px 28px 5px;
    text-align: center;
}

#progressSteps ul li .first-step-cover, #progressSteps ul li .last-step-cover {
    display: block;
    position: absolute;
    bottom: 11px;
    width: 50%;
    height: 2px;
    margin: -2px 0 0 0;
    background-color: white;
    z-index: 2;
}

#progressSteps ul li .first-step-cover {
    left: 0;
}

#progressSteps ul li .last-step-cover {
    right: 0;
}

#progressSteps ul li .rotate {
    display: block;
    left: 30px;
    position: relative;
    top: -10px;
    transform: rotate(-15deg);
}

#progressSteps ul li .current-step-info {
    position: absolute;
    left: 50%;
    top: 60px;
    width: 200px;
    min-height: 30px;
    margin: 0 0 0 -100px;
    padding: 7px;
    border: 1px solid orange;
    border-radius: 4px;
    background-color: white;
    z-index: 4;
}

#progressSteps ul li .current-step-info:before {
    content: '';
    position: absolute;
    top: -20px;
    left: 50%;
    width: 0;
    height: 0;
    margin-left: -10px;
    border-color: transparent transparent orange transparent;
    border-style: solid;
    border-width: 10px;
    z-index: 4;
}

#progressSteps ul li .current-step-info span {
    display: block;
    margin-bottom: 4px;
}

#progressSteps ul li .current-step-info span:last-child {
    margin: 0;
}

#progressSteps ul li:before, #progressSteps ul li:after {
    content: '';
    display: block;
    position: absolute;
}

#progressSteps ul li:before {
    bottom: 0;
    left: 50%;
    width: 22px;
    height: 22px;
    margin-left: -11px;
    border-radius: 4px;
    background-color: gray;
    cursor: pointer;
    z-index: 3;
}

#progressSteps ul li:after {
    bottom: 11px;
    left: 0;
    width: 100%;
    height: 2px;
    margin: -2px 0 0 0;
    background-color: gray;
    z-index: 1;
}

#progressSteps ul li.step-done:before, #progressSteps ul li.step-done:after {
    background-color: green;
}

#progressSteps ul li.step-inwork:before, #progressSteps ul li.step-inwork:after {
    background-color: orange;
}

#progressSteps ul li.step-locked:before, #progressSteps ul li.step-locked:after {
    background-color: red;
}

#progressSteps ul li.step-inwork:after, #progressSteps ul li.step-locked:after {
    left: -50%;
    width: 150%;
}

.popover .popover-content span {
    display: block;
    margin-bottom: 4px;
}

ul>li.yellow, .label-yellow {
    background: #FFBF21;
}

.statusSmall {
    padding: 2px 2px 4px 3px;
    height: 16px !important;
    width: 16px !important;
}

/* ------------- task --------------- */
.dataTables_wrapper .dataTables_filter, .dataTables_wrapper #searchForm .dataTables_filter {
    max-width: 35%;
}

.dataTables_wrapper .dataTables_filter .input-group.input-group .input-group-addon, .dataTables_wrapper #searchForm .dataTables_filter .input-group.input-group .input-group-addon
    {
    padding-top: 0px;
    padding-bottom: 0px;
}

.dataTables_wrapper .dataTables_filter .input-group.input-group .form-control.searchfield, .dataTables_wrapper #searchForm .dataTables_filter .input-group.input-group .form-control.searchfield
    {
    width: 100%;
    min-width: 300px;
    height: 28px;
    margin: 0;
    padding: 0 2px;
    border: 1px solid #ccc;
}

.dataTables_wrapper .dataTables_filter .input-group.input-group .form-control.searchfield {
    padding: 0;
}

.dataTables_filter .ui-autocomplete {
    padding: 0;
}
.dataTables_filter .ui-autocomplete-input {
    height: 26px;
    margin: 0;
    border: none;
}

.dataTables_filter input:focus {
    outline: none;
    border: none;
}

@media screen and (max-width: 1170px) {
    .dataTables_wrapper .dataTables_filter .input-group.input-group .form-control.searchfield, .dataTables_wrapper #searchForm .dataTables_filter .input-group.input-group .form-control.searchfield
        {
        min-width: inherit;
    }
}

@media screen and (max-width: 530px) {
    .dataTables_wrapper .dataTables_filter, .dataTables_wrapper #searchForm .dataTables_filter {
        max-width: 100%;
    }
}

/* ------------- breadcrumbs --------------- */
.breadcrumbs {
    min-height: 21px;
    line-height: 21px;
}

/* ------------- other media queries --------------- */
@media screen and (max-width: 1145px) {
    .dataTables_wrapper #myform {
        float: left;
        width: 100%;
        overflow-x: auto;
    }
}

@media screen and (max-width: 840px) {
    .container-fluid #myform table {
        /*display: block;*/
        max-width: 100%;
        overflow-x: auto;
    }
}

.box.box-color .box-title .tabs>li>span {
    color: #f666;
}

/* ------------- table user all --------------- */
#tableUserAll tr th:nth-child(6) {
    min-width: 125px;
}

/* ------------- slider component --------------- */
.input-option-slider .slider {
    width: 50%;
    margin-right: 5px;
    margin-left: 5px;
}

.input-option-slider .slider .slider-track {
    border-radius: 0;
    height: 6px;
    margin: 0 0 20px;
    font-size: 1.1em;
}

.input-option-slider .slider .slider-selection {
    display: none;
}

.input-option-slider .slider .slider-handle {
    background: #368ee0 none repeat scroll 0 0;
    color: #1c94c4;
    border: 0 none;
    border-radius: 0;
    height: 14px;
    width: 14px;
    margin-left: -0.6em;
    top: 0.05em;
}

.input-option-slider .slider-input {
    width: 20%;
    display: inline;
    margin-left: 5px;
    margin-right: 5px;
}

.input-option-slider .suffix {
    width: 10%;
}

.input-option-slider .prefix {
    width: 10%;
}

/* modals */
.modal {
   z-index: 9999;
}

.modal .modal-dialog {
    
}

.modal .modal-dialog .modal-content {
    border: 2px solid #368ee0;
}

.modal .modal-dialog .modal-content .modal-header {
    color: #fff;
    background-color: #368ee0;
}

.modal .modal-dialog .modal-content .modal-body {
    
}

.modal .modal-dialog .modal-content .modal-footer {
    
}

/* ------------- PROCESS LOG --------------- */

.log_color_error {
    color: #FF0000;
}

.log_color_warn {
    color: #FF6600;
}

.log_color_info {
    color: #0033CC;
}

.log_color_debug {
    color: #8e8d8e;
}

.log_color_user {
    color: #006600;
}

.log_table_column_date {
	min-width:140px;
}


@media only print {
    #left {
        display: block !important;
        border: none !important;
        background-color: FFF;
        border-right: none;
        height: auto !important;
        width: auto !important;
        overflow: visible !important;
    }
    #treeform a i {
        display: none;
    }
    #main {
        display: none;
    }
    .ui-resizable-handle .ui-resizable-e {
        display: none;
    }
}

.folder--line:after {
    content: "";
    position: absolute;
    top: 50%;
    right: 10px;
    left: 0;
    height: 2px;
    background-color: #eee;
}

.folder--line {
    position: relative;
    display: block;
    width: 100%;
}

.folder--line span.text {
    position: relative;
    z-index: 10;
    display: inline-block;
    padding: 2px 6px;
    background-color: #fff;
}


/* @media screen and (max-width: 760px) { */
/* 	#tableUserAll tr th:nth-child(3), */
/* 	#tableUserAll tr td:nth-child(3) { */
/* 		display: none; */
/* 	} */
/* 	Ein Element verstecken, welches eine dynamische ID hat */

/* 	.dataTables_filter a[id*="tableUserAllShowActiveUsers"] { */
/* 		display: none; */
/* 	} */
/* } */

/* @media screen and (max-width: 675px) { */
/* 	#tableUserAll tr th:nth-child(2), */
/* 	#tableUserAll tr td:nth-child(2) { */
/* 		display: none; */
/* 	} */
/* } */

/* @media screen and (max-width: 590px) { */
/* 	#tableUserAll tr th:nth-child(4), */
/* 	#tableUserAll tr td:nth-child(4) { */
/* 		display: none; */
/* 	} */
/* } */

/* @media screen and (max-width: 480px) { */
/* 	#tableUserAll { */
/* 		display: block; */
/* 		width: 100%; */
/* 		overflow-x: auto;  */
/* 	} */
/* 	#tableUserAll tr th:nth-child(1) { */
/* 		width: 30%; */
/* 	} */
/* 	#tableUserAll tr th:nth-child(5) { */
/* 		width: 30%; */
/* 	} */
/* } */

/* ------------- UNUSED --------------- */

/* .bottom-line{ */
/* 	border-bottom: 1px solid #DDDDDD; */
/* } */

/* .my-checkbox input[type="checkbox"]{ */
/* 	margin: 0; */
/* } */

/* .my-checkbox label { */
/* 	display: inline-block; */
/* 	margin: 0; */
/* 	padding: 2px 0 0 5px;		 */
/* 	font-weight: normal;	 */

/* } */

/* #fictitious input { */
/* 	margin: 0; */
/* } */

/* #fictitious label { */
/* 	display: inline-block; */
/* 	margin: 0; */
/* 	padding: 2px 0 0 5px;			 */

/* } */

/* .document { */
/* 		color: black;		 */
/* } */

/* .documentSelected { */
/* 		color: black; */
/* 		font-weight: bold; 		 */
/* } */

/* .label-intranda-red[href], */
/* .badge-intranda-red[href] { */
/*   background-color: #E51400; */
/* } */

/* .label-intranda-orange[href], */
/* .badge-intranda-orange[href] { */
/*   background-color: #F8A31F; */
/* } */

/* .label-intranda-green[href], */
/* .badge-intranda-green[href] { */
/*   background-color: #56AF45; */
/* } */