/* General styles for dataCosmos pages */
/* May be individually overriden...    */
/* V0.9 DF/03-JUL-2013                 */

/* ---------------------------------------------------------------------------------- */

/* general */

/* material icons font from https://github.com/marella/material-icons */

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(fonts/MaterialIcons-Regular.eot); /* For IE6-8 */
  src: url(fonts/MaterialIcons-Regular.woff2) format('woff2'),
    url(fonts/MaterialIcons-Regular.woff) format('woff'),
    url(fonts/MaterialIcons-Regular.ttf) format('truetype');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}

div, table {
	color: rgb(51, 51, 51);
	font-family: Arial,sans-serif;
	font-size: 14px;
	line-height: 1.42857;
}

a {
    font-family: Verdana, Arial, sans-serif;
 color: #005400;
}

/* Error field */
.dc-message {
    width: 100%;
    position: fixed; 
    top: 115px;
    height: 50px !important;
    z-index:90;
    background: none repeat scroll 0 0 #ffae13;
    border-bottom: 1px solid #f1c90b;
    color: #550303;	
    border-bottom: medium none;
    font-size: 12px;
    font-weight: bold;
    display: none;
    padding-top: 5px;
}

/*
.dc-messsage > div.inner:before {
	content: url('../images/icon_error32.png');
        vertical-align: top;
}
*/

/* input types */

.dc-form input.dc-numeric, .dc-form input.dc-percentage, .dc-form input.dc-zip {
    width: 50px;
    text-align: right;
}

/* input fields with glow effect */

.dc-form input[type=text], .dc-form input[type=password], .dc-form input[type=email], .dc-form input[type=tel], .dc-form textarea, .dc-textInput {
   width: 225px;
  -webkit-transition: all 0.15s ease-in-out;
  -moz-transition: all 0.15s ease-in-out;
  -ms-transition: all 0.15s ease-in-out;
  -o-transition: all 0.15s ease-in-out;
  outline: none;
  padding: 2px 0 2px 2px;
  margin: 3px 1px 3px 0;
  border: 1px solid rgba(81, 203, 238, 1);
  -webkit-border-radius: 0 2px 0 2px;
  -moz-border-radius: 0 2px 0 2px;
  border-radius: 0 2px 0 2px;
  font-size: 13px;
}

.dc-form input[readonly], .dc-form textarea[readonly] {
  color: #555;
  background-color: #eee;
}

.dc-form select, .dc-selectInput {
  margin: 3px 1px 3px 0;
  border: 1px solid rgba(81, 203, 238, 1);
  -webkit-border-radius: 0 2px 0 2px;
  -moz-border-radius: 0 2px 0 2px;
  border-radius: 0 2px 0 2px;
} 

.dc-form input[type=text]:focus, .dc-form input[type=password]:focus, .dc-form textarea:focus, .dc-form select:focus, .dc-textInput:focus  {
  box-shadow: 0 0 4px rgba(81, 203, 238, 1);
  border: 1px solid rgba(81, 203, 238, 1);
}

.dc-form input[type=button] {
  background-color: rgba(81, 203, 238, 1);
  border: 1px solid #333;
}

.dc-radiolabel {
	color: rgb(51, 51, 51);
	text-decoration: none;
}

/* "other" option input section */
div.dc-other {
	padding-left: 30px;
	margin-top: 2px;
}

div.dc-other.dc-active {
  display: block;
  visibility:visible;
  opacity:1;
  max-height: 1000px;
  transition:visibility 0s,opacity 0.25s ease-in-out;
  -webkit-transition:visibility 0s,opacity 0.25s ease-in-out;
  -moz-transition:visibility 0s,opacity 0.25s ease-in-out;
}

div.dc-other.dc-inactive {
  visibility:hidden;
  display: block;
  opacity: 0;
  max-height: 0;
}


/* Start Renderer Elements */

div.dc-top-button-row {
    z-index: 9;
    position: relative;
    right: 0px;
}

div.dc-text {
 margin-bottom: 10px;
}

div.dc-input, div.dc-assignment {
 margin-bottom: 10px;
}

textarea.dc-input-textarea {
 width: 450px;
 height: 55px;
 max-width: 95%; 
}

textarea.dc-input-textarea-big {
 width: 550px;
 height: 300px;
}

div.dc-validatorMessage {
 color: red;
 font-size: 9px;
}

div.dc-lengthMessage {
 color: grey;
 font-size: 9px;
}

div.dc-lengthMessage.warn {
 color: red;
}

div.dc-input_invalid input {
 border-color: red;
}

div.dc-output {
 margin-bottom: 10px;
}

hr.dc-separator {
 width: 80%;
 margin-left: 0;
 text-align: left;
 margin-bottom: 10px;
}

hr.dc-separator-transparent {
 width: 80%;
 margin-left: 0;
 text-align: left;
 color: transparent; 
}

div.dc-section {
 position: relative;
 outline: 1px solid #ddd;
 margin-bottom: 3px;
}

div.dc-section:hover {
	background-color: #f0f3f0;
}

div.dc-section {
	padding-bottom: 5px;
	margin-bottom: 5px;
}

div.dc-caption {
/*	padding-bottom: 5px; */
        /* allow space for topright save button */
        margin-right: 150px;
}

div.dc-section span.dc-caption, div.dc-assignment span.dc-caption {
	font-weight: bold;
}

div.dc-assignment {
    
}

div.dc-assignment-target {
    border: 1px solid grey; 
    min-height: 100px; 
    padding:2px; 
    background-color: #fff;   
    width: 240px;
}

div.dc-assignment-target-disabled {
    background-color: #eee;   
}

div.dc-assignment_invalid {
    border: 1px solid red;
}

/* End renderer elements */

/* Start Comment bubble */

.dc-comment {
	position:relative;
	padding:15px 15px;
	margin:0;
	color:#fff;
	background:#f6dd78; /* default background for browsers without gradient support */
/*	background:#ffe400; *//* default background for browsers without gradient support */
	/* css3 */
	background:-webkit-gradient(linear, 0 0, 0 100%, from(#ffe400), to(#f6dd78));
	background:-moz-linear-gradient(#ffe400, #f6dd78);
	background:-o-linear-gradient(#ffe400, #f6dd78);
	background:linear-gradient(#ffe400, #f6dd78);
/*	background:-webkit-gradient(linear, 0 0, 0 100%, from(#f0ff00), to(#ffe400));
	background:-moz-linear-gradient(#f0ff00, #ffe400);
	background:-o-linear-gradient(#f0ff00, #ffe400);
	background:linear-gradient(#f0ff00, #ffe400);*/
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	border-radius:10px;
	width: 300px;
	height: 200px;
	border: 1px solid #555;
}

/* creates the triangle */
.dc-comment:after {
	content:"";
	position:absolute;
	bottom:-40px;
	left:180px;
	border-width:0 0 40px 20px;
	border-style:solid;
	border-color:transparent #f6dd78;
/*	border-color:transparent #ffe400;*/
    /* reduce the damage in FF3.0 */
    display:block; 
    width:0;
}

#dc-comment-content{
    color: #222222;
    font-size: 11px;
    max-height: 185px;
    overflow: auto;
}

.dc-comment div {
    color: #444444;
    font-size: 11px;
}

.dc-comment div[contenteditable] {
    border: 1px solid #aaaaaa;
    color: #444444;
    font-size: 11px;
    min-height: 40px;
    margin-top: 2px;
}

span.dc-comment-info {
    background-color: #888;
    padding: 1px;
    color:#fff; 
    font-style: italic;
    border-radius: 2px;
}

hr.dc-comment-separator {
    margin-top: -10px;
    width: 50%;
    color: #fff;
    height: 1px;
}

/* End Comment bubble */

/* Start toggleable fields fade in and out */

/* for convenienence this class is available in various cases */
/* both versions are currently used */
.hideanimated, .hideAnimated {
  visibility:hidden;
  display: block;
  opacity: 0;
  max-height: 0;
  transition:visibility 0s linear 0.25s,opacity 0.25s ease-in-out,max-height 0s linear 0.25s;
  -webkit-transition:visibility 0s linear 0.25s,opacity 0.25s ease-in-out,max-height 0s linear 0.25s;
  -moz-transition:visibility 0s linear 0.25s,opacity 0.25s ease-in-out,max-height 0s linear 0.25s;
  overflow: hidden;
  margin-bottom: 0 !important;
  margin-top: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
}

.hide {
  visibility:hidden;
  display: block;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  margin-bottom: 0 !important;
  margin-top: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
}

/* for convenienence this class is available in various cases */
/* both versions are currently used */
.showanimated, .showAnimated {
  display: block;
  visibility:visible;
  opacity:1;
  max-height: 10000px;
  transition:visibility 0s,opacity 0.25s ease-in-out;
  -webkit-transition:visibility 0s,opacity 0.25s ease-in-out;
  -moz-transition:visibility 0s,opacity 0.25s ease-in-out;
}

.show {
  display: block;
  visibility:visible;
  opacity:1;
  max-height: 1000px;
}

/* End fade in and out */

/* Start Search */

.dc-searchresults {
}

.dc-searchresults .dc-searchtype {
	margin-top:2px;
	margin-bottom:-2px;
	margin-right: 3px;
}

.dc-searchresults .dc-searchresult {
 margin-bottom: 5px;
}

.dc-searchresults .dc-highlighted {
 background-color: yellow;
}

.dc-searchresults .dc-hits-in-result {
 font-style: italic;
}

/* End Search */

/* Start Table/Measures */

.dc-table {
 min-width: 50%;
}

.dc-table-row-even {
 background-color: #eee;
}

.dc-table-row-odd {
}

.dc-table-cell {
 padding-right: 2px;
 padding-left: 2px;
}

.dc-table-cell-data {
 width: 50px;
}

.dc-data-error-hint {
    color: red;
    font-weight: bold;
}

.dc-data-error-hint:before {
/* removed as this won't be shown in PDF - so included as real text... */
/*    content: "*"; */
}

/* End Table/Measures */

/* Mandatory field indicator */

.dc-mandatory {
    color: red;
    font-weight: bold;
    padding-left: 3px;
}

.dc-mandatory:before {
    content: "*";
}

/* End Mandatory field indicator */

/* Subgroup label, e.g. for list of diagrams in evaluate page */

.dc_subgroup {
    margin-top: 5px;
    margin-bottom: 0;
    font-size: 14px;
    padding-left: 20px;
    font-style: italic;
    font-weight: normal;
}

/* ContextMenu */

ul.contextMenu li {
    font-size: 11px;
    margin-right: 30px;
}

ul.fancytree-container {
    background-color: transparent;
}

.tooltip {
    /* instead of text-decoration-style */
    border-bottom: 1px dotted #ba0000;
}

.dc-caption-datatable, .dc-caption-parameters {
	font-size: 13px;
}

/* Start lightbox */

div.lightbox {
	background-color:#eee;
	border-bottom: 2px solid #666;
	border-right: 2px solid #666;
	width: 575px;
	z-index: 99;
	display: none;
	/* top corners must match lightbox-title top corners */
	-moz-border-radius: 10px 10px 3px 3px;
	-webkit-border-radius: 10px 10px 3px 3px;
	-khtml-border-radius: 10px 10px 3px 3px;
	border-radius: 10px 10px 3px 3px;	

	position: fixed;
	height: 475px; 
	top: 50%;
	left: 50%;
	margin-top: -250px; 
	margin-left: -285px;
  
	-moz-box-shadow:    2px 2px 6px 6px #333;
	-webkit-box-shadow: 2px 2px 6px 6px #333;
	box-shadow:         2px 2px 6px 6px #333;
        
        /* alternative placing: always keep at top and have height dynamic 
	max-height: 500px;
        height: 94%;
	top: 3%;
	left: 50%;
	margin-top: auto;
        */
}

div.lightbox h2 {
    font-size: 17px;
}

@media screen and (min-width: 1024px) {
    div.lightbox {
	width: 675px;
	height: 575px; 
	top: 50%;
	left: 50%;
	margin-top: -300px; 
	margin-left: -335px;
    }
}

@media screen and (min-width: 1200px) and (min-height: 675px) {
    div.lightbox {
	width: 775px;
	height: 675px; 
	top: 50%;
	left: 50%;
	margin-top: -350px; 
	margin-left: -385px;
    }
}

@media screen and (max-width: 760px) {
    /* have lightbox as near-full-screen page for small screens */
    div.lightbox {
	width: 94%;
	position: fixed;
	height: 84%;
	height: 84vh;
	top: 3%;
	left: 3%;
	margin-top: 0;
	margin-left: 0;
    }    
    /* decrease caption font size */
    div.lightbox h2 {
        font-size: 15px;
        padding-top: 2px;
    }
}

/* restrict height of lightbox on small heights */
@media screen and (max-height: 475px) {
    div.lightbox {
        height: 100vh;
	top: 0;
	margin-top: 0; 
    }
}

div.lightbox-title {
	margin: 10px; 
	color: #fff;	
}

div.lightbox-wrapper {
	position:absolute; 
	width:100%; 
	height: 100%;	
}

div.lightbox-title-wrapper {
	position:absolute; 
	width: 100%; 
	height: 50px; 
	background-color: rgb(84, 171, 210); 
	color: #fff;	
	/* top corners must match lightbox top corners */
	 -moz-border-radius: 10px 10px 0 0;
    -webkit-border-radius: 10px 10px 0 0;
    -khtml-border-radius: 10px 10px 0 0;
    border-radius: 10px 10px 0 0;
}

div.lightbox-closeButton  {
	position:absolute; 
	top: -12px; 
	right: -12px; 
	z-index: 99;
}

div.lightbox-content-wrapper {
	position:relative; 
	top: 0;
	left: 0;
	margin-top:50px; 
	padding-top: 10px; 
	width:100%; 
	height:350px; 
	overflow:auto;
}

div.lightbox-content {
	padding-left: 10px; 
	padding-right: 10px;
}

div.lightbox-buttons-wrapper {
	position:relative; 
	top: 0;
	left: 0;
	width:100%; 
	height:40px; 
	text-align:right; 
	overflow:auto;
}

div.lightbox-buttons {
	padding-left: 10px; 
	padding-right: 20px;
}

#overlay img{
 border: none; 
}

#overlay{ 
 background-image: url('../dc/images/overlay.png');
 position: fixed;
 top: 0;
 left: 0;
 z-index: 97;
 display: none;
 width: 100%;
 height: 100%;
}

.lightbox-closeButton-image {
	border: 0;
}

.lightbox-closeButton-image:hover {
 opacity: 0.8;
}

/* End lightbox */

.dc-long-info-notification {
    margin-top: 10px;
    font-size: 9px;
}

div.dc-lightbox-long-info {
    background-color: #f6eb87;
    width: 575px;
    z-index: 999;
    display: none;
    position: fixed;
    height: 450px;
    top: 50%;
    left: 50%;
    margin-top: -250px;
    margin-left: -250px;
}

div.lightbox-long-info-wrapper {
     background-color: #f6eb87;
}

div.lightbox-long-info-content-wrapper {
    position:relative; 
    top: 0;
    left: 0;
    padding-top: 10px; 
    width:100%; 
    height:440px; 
    overflow:auto;
}

/* Section message field */
div.dc-section-message {
    width: 80%;
    margin: 0 auto;
    background-color: #ddd;
    border: 1px solid #888;
    font-size: 10px;
    padding: 5px;
    text-align: center;
    margin-bottom: 5px;
}

div.dc-section-message span {
    vertical-align: middle;
}

div.dc-section-message span.success:before {
    content: url('../images/icon_success24.png');
    vertical-align: middle;
}

div.dc-section-message span.error:before {
    content: url('../images/icon_error24.png');
    vertical-align: middle;
}

div.dc-message-page {
    padding-top: 5px;
    padding-bottom: 10px;
    padding-left: 10px;
    padding-right: 10px;
}

/* Tooltip - background color does not work, whyever... */
.ui-tooltip {
 background: #f6eb87;
}

/* Remove closing X for dialogs */
.ui-dialog-titlebar-close {
  visibility: hidden;
}

/* Force datepicker to be above all (e.g. header) */
.ui-datepicker {
 z-index: 9999 !important;
}

/* tab panel padding adjustment */
.ui-tabs .ui-tabs-panel {
    padding: 15px 10px 5px 10px;
}

/* for the progress bar label, centered */
.ui-progressbar {
    position: relative;
}

.progress-label {
    position: absolute;
/*    left: 50%; */
    top: 4px;
    font-weight: bold;
    text-shadow: 1px 1px 0 #fff;
    text-align: center;
    width: 100%;
}

label.publication-details {
   margin-left: 8px; 
}

label.publication-details, input.publication-details {
   margin-left: 8px; 
   width: 250px;
}

h4.publication-details {
   margin-left: 8px; 
   margin-top: 5px; 
   margin-bottom: 0;
}

div.jqte {
/*    margin-left: 10px;*/
    margin-right: 10px;
    margin-top: 0;
    margin-bottom: 0;
}

div.module-title {
    font-size: 15px;
    font-style: italic;
    color: white;
    position: absolute;
    padding: 3px 0 3px 5px;
    font-weight: bold;
}

#div_accordion-users .ui-accordion-header {  
    padding: 0px 10px 3px 25px;
    background: none;
    border-bottom: none;
    font-weight: normal;
}

#div_accordion-users .ui-accordion-header:hover {  
    background-color: #eee;
}

#div_accordion-users .ui-accordion-header.ui-state-active {  
    background-color: #eee;
}

#div_accordion-users .ui-accordion-content {
    padding: 0px;
    display: inline-block;
}

div.dc-divgrid {
    width: 100%;
    display: table;
    table-layout: fixed;
    border-spacing: 4px;
    height: 80px;
}

div.dc-divgrid-cell {
    display: table-cell;
    padding: 2px 5px 2px 5px;
}

.dc-accordion-button {
    border: 1px solid #ddd;
    -webkit-border-radius: 4px 4px 4px 4px;
    -moz-border-radius: 4px 4px 4px 4px;
    border-radius: 4px 4px 4px 4px;
    background-color: #f3f3f3;
}

.dc-accordion-button h2 {
    font-style: italic;
    font-weight: normal;
    font-size: 14px;
    display: inline;
}

.dc-accordion-content {
    background:#eee;
}

.dc-accordion-button:hover {
    background-color: #fff;
}

/* app chooser bubble START */

.dc-app-chooser {
/*  position:relative;*/
  position: fixed;
  padding:15px;
  margin:125px 0 0 2px;
  color:#333;
  background:#eee;
  /* css3 */
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  width: 250px;
  height: 250px;
  border: 1px solid grey;
  -webkit-box-shadow: 2px 2px 5px 1px rgba(18,18,18,1);
  -moz-box-shadow: 2px 2px 5px 1px rgba(18,18,18,1);
  box-shadow: 2px 2px 5px 1px rgba(18,18,18,1);
}

.dc-app-chooser p {
    font-size:28px; 
    line-height:1.25em;
}

/* creates the triangle */
.dc-app-chooser:after {
  content:"";
  position:absolute;
  top:-20px;
  left:19px;
  border:10px solid transparent;
  border-bottom-color:grey;
  /* reduce the damage in FF3.0 */
  display:block;
  width:0;
}

/* display of quote author (alternatively use a class on the element following the blockquote) */
.dc-app-chooser + p {
    padding-left:15px; 
    font:14px Arial, sans-serif;
}

img.dc-app-chooser-img {
    filter: alpha(opacity=70); 
    opacity: 0.7; 
}

img.dc-app-chooser-img:hover {
    filter: alpha(opacity=100); 
    opacity: 1; 
}

a.dc-app-chooser-link {
    text-decoration: none;
    color: #111111;
    font-size: 12px;
}
/* App chooser bubble END */

/* app chooser div */
#app-chooser {
    position:absolute;
    top:0px;
    left:0px;
    z-index:999;
}

.dc-app-chooser-item {
    display:table-cell;
    text-align:center;
    line-height:1em;
    padding: 5px 10px;    
}

.dc-app-chooser-item.active, .dc-app-chooser-item:active {
    background-color: #ddd; 
    border: 1px dotted grey;
}

/* end app chooser */

table.dc-timecapture-table {
    width: 100%;
    background-color: aliceblue;
}

.dc-timecapture th {
    border: 1px solid aliceblue;
    font-weight: normal;
    font-style: italic;
}

.dc-timecapture td {
/*    padding: 3px 1px 3px 1px; */
    padding: 5px 3px 5px 3px;
}

a.dc-readMore {
  font-size: 12px;
  font-style: italic;
  color: #333;
}

.dc-text-info {
    border: 1px solid rgb(187, 187, 187);
    padding: 5px 5px 10px 5px;
    font-size: 11px; 
    background-color: rgb(248, 246, 176);
    min-height: 35px;
/*    margin-left: 10px;
    margin-right: 10px; */
}

.dc-text-info-content {
    font-size: 11px; 
}

.dc-text-contact {
    border: 1px solid rgb(187, 187, 187);
    padding: 5px 5px 10px 5px;
    font-size: 12px; 
    background-color: rgb(242, 217, 146);
    min-height: 35px;
    margin-left: 7px;
    margin-right: 7px;
}

.dc-text-contact-content {
    font-size: 11px; 
}

.dc-text-warn {
    border: 1px solid rgb(187, 187, 187);
    padding: 5px 5px 10px 5px;
    font-size: 12px; 
    background-color: rgb(242, 240, 146);    
    min-height: 35px;
    margin-left: 10px;
    margin-right: 10px;
    font-weight: bold;
}

.dc-text-warn-content {
    font-size: 12px; 
}

textarea.dc-contact {
    width: 98%;
    margin: 10px 0;
    padding: 5px;
    height: 225px;
}

.dc-warn-entities {
    padding: 5px;
    font-size: 12px;
}

.rotate {
    /* Safari */
    -webkit-transform: rotate(-90deg);
    /* Firefox */
    -moz-transform: rotate(-90deg);
    /* IE */
    -ms-transform: rotate(-90deg);
    /* Opera */
    -o-transform: rotate(-90deg);
    /* Internet Explorer */
/*    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); */
    transform: rotate(-90deg);
}

.dc-output-field {
    padding: 2px 3px;
    border: 1px solid #CCC;
    background: #F5F5F5 none repeat scroll 0% 0%;
    min-width: 50px;
    display: inline-block;
    text-align: right;
    min-height: 16px;
    margin-bottom: -5px;
}

.dc-subnav-tiles {
/*    display:table; */
    display:flex;
    flex-wrap: wrap;
}
.dc-subnav-tiles .dc-subnav-tile {
/*    display:table-cell; */
    text-align:center;
/*    width:150px; 
    height: 70px; 
    max-height: 70px; 
    padding-top:50px; */
    width: 19%;
    min-width: 125px;
    max-width: 250px;
    padding-top:25px;
    background-color:#ddd;
    border: 1px solid #999;
    margin: 0px 5px 5px 0px;
}

.dc-subnav-tile.dc-subnav-tile-info {
    max-width: none; 
    flex-grow: 1; 
    width: 100%; 
    text-align: left; 
    background-color: unset; 
    border: none; 
    padding: 0; 
    margin-top: 10px;    
    margin-bottom: 40px;    
}

.dc-subnav-tile.dc-subnav-tile-info hr {
    width: calc(100% - 20px); 
    text-align: left; 
    margin: 10px 0 20px 0; 
    border: 1px solid #ccc;    
}

.dc-subnav-tile.dc-subnav-tile-info div.content {
    margin-left: 50px; 
    font-size: 13px;
}

.dc-subnav-tile  a {
    padding: 0 5px;
    display: block;
}

/* for hidden element within flex boxes we need visibility: collapse => not supported in Chome currently 11-OCT-2024 */
.dc-subnav-tiles .hide {
/*  visibility: collapse; */
  display: none;
}

.dc-subnav-tile.disabled {
  background-color: #eee;
}

.dc-subnav-tile.disabled a {
  cursor: not-allowed;
  opacity: 0.5;
}

.dc-subnav-tile.disabled img {
  opacity: 0.5;
}

/* Fixed width for JQTEs withing container */
.dc-container .jqte {
    width: 500px;
    margin-left: 2px;
}

/* have some space after a container */
.dc-container {
    margin-bottom: 10px;
}

/* placeholder for JQuery sortable drop zone */
.ui-state-highlight { 
    height: 1.5em; line-height: 1.2em;
}
  
.dc-section-content {
    padding-left: 20px;
    padding-top: 10px;
}

.dc-upload-image {
    margin-bottom: 10px;
    margin-right: 15px;
    width: 115px; 
    height: 80px;
    border: 1px solid black;
    text-align: center;
    background-color: white;
}

.dc-assignment-source {
    height: 174px;
    min-width: 150px;
}

.dc-assignment-target {
    background-color: white;
}

/* begin: jQuery UI Datepicker moving pixels fix */
table.ui-datepicker-calendar {border-collapse: separate;}
.ui-datepicker-calendar td {border: 1px solid transparent;}
/* end: jQuery UI Datepicker moving pixels fix */

/* begin: jQuery UI Datepicker emphasis on selected dates */
.ui-datepicker .ui-datepicker-calendar .ui-state-highlight a {
	background: #743620 none; /* a color that fits the widget theme */
	color: white; /* a color that is readeable with the color above */
}
/* end: jQuery UI Datepicker emphasis on selected dates */

/* style multi dates inline picker */
.dc-multidatespicker {
    height: 180px; 
    font-size: 15px;
}

.dc-multidatespicker .ui-state-highlight {
    height: unset;
    line-height: unset;
}

/* prevent downscrolling of confirmation dialogs */
.ui-dialog {
    position: fixed !important;
}

li.dc-topologyFolder {
    display: block;
    margin: 0 10px 0 0;
    padding: 1px 0 1px 0;
/*    background-color: #eee; */
/*    border-bottom: 1px solid white;*/
}

.dc-topologyEntry a {
    font-size: 12px;
    text-decoration: none;
    min-height: 25px;
    padding-top: 5px;
}

li.dc-topologyFolder > div {
    min-height: 25px;
}

li.dc-topologyEntry {
    display: block;
    margin: 0;
    clear:both; 
    min-height: 25px;
    margin-right: 18px;
    margin-right: 10px;
    border-top: 1px solid #ddd;
    position: relative;
}

li.dc-topologyEntry.unassigned.first {
    padding-top: 2px;
    border-top: 1px solid #ccc;    
}

li li.dc-topologyEntry {
/*    background-color: #fafafa; */
    /* clear margin from 1st level */
    margin-right: 0;
/*    padding: 0px; */
}

li li.dc-topologyEntry:first-child {
    padding-top: 5px;
}

li.dc-topologyFolder {
    cursor: pointer;
    min-height: 30px;
}

li.dc-topologyFolder.collapsed ul {
    display: none;
}

li.dc-topologyFolder:not(.collapsed) img.icon-expand {
    display: none;
}

li.dc-topologyFolder.collapsed img.icon-collapse {
    display: none;
}

.dc-topologyEntry .nav-buttons {
    margin: 5px 2px 0 0;
}

li.dc-topologyEntry:hover {
    background-color: wheat;
}

li.dc-topologyEntry.active {
    background-color: wheat;
}

.dc-topologyFolder .topology-label {
    width: 100%;
    min-height: 30px;
    background-color: #eee;
    padding-top: 10px;    
}

.dc-form-content {
    padding-right: 5px;
}

/* Styles for Trumbowyg Editor (type=editor) START */

.trumbowyg-button-pane button, .trumbowyg-button-pane button:hover {
    color: #666;
}

.trumbowyg-box p {
    margin: 0;
}

.dc-textstyle-normal {
}

.dc-textstyle-small {
    font-size: 10px;
}

.dc-textstyle-big {
    font-size: 17px;
}

.trumbowyg-box, .trumbowyg-editor, .trumbowyg-textarea {
    min-height: 200px;
}

.dc-editor-small .trumbowyg-box, .dc-editor-small .trumbowyg-editor, .dc-editor-small .trumbowyg-textarea {
    min-height: 100px;
}

.dc-editor-medium .trumbowyg-box, .dc-editor-medium .trumbowyg-editor, .dc-editor-medium .trumbowyg-textarea {
    min-height: 150px;
}

.dc-editor-big .trumbowyg-box, .dc-editor-big .trumbowyg-editor, .dc-editor-big .trumbowyg-textarea {
    min-height: 300px;
}

.trumbowyg-editor, .trumbowyg-box {
    background-color: white;
}

.trumbowyg-box {
    margin: 0px;
}

/* Styles for Trumbowyg Editor (type=editor) END */

.dc-add-entry:hover {
    background-color: #F9EBA0 !important;
}


/* mark selected entity nav links START */
.dc-entityLink {
    padding-right: 2px;
    /* cut labels */
    width: calc(100% - 40px);
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-left: 18px;
}

.dc-entityLink.with-icon {
    /* cut labels */
    width: calc(100% - 60px);
}

.dc-entityLink.with-sort {
    /* cut labels */
    width: calc(100% - 60px);
}

.dc-entityLink.with-icon.with-sort {
    /* cut labels */
    width: calc(100% - 80px);
}

.dc-entityLink.active {
/*    background: #F9F2CD; */
    font-weight: bold;
}

.dc-entityLink.active:before {
    content: '\25BA';
    text-decoration: none;
    position: absolute;
/*    position: relative; */
    left: 4px;
    color: #333;
    padding: 0;
/*    margin: 0 -3px 0 -14px; */
/*    width: 14px; */
    display: inline-block;
}
/* mark selected entity nav links END */

/* styles for breadcrumbs display START */

.showBreadcrumbs #breadcrumbs {
    display: block;
}

#breadcrumbs {
    display: none;
    height: 23px;
    position: relative;
    z-index: 1;
}

#breadcrumbs a {
    color: rgb(51,51,51);
    font-family: Arial, sans-serif;
}

.showBreadcrumbs .sidebar {
    margin-top: 115px;
}

/* styles for breadcrumbs display END */

/* styles for mobile menu START */
#mobile-menu {
 position: absolute;
 min-width: 500px; 
 z-index: 999;
 display: block !important;
 left: -500px;
 background-color: #407289;
 height: 100%;
}

.mobile-menu-on {
 left: 0px !important;
 transition: all 350ms cubic-bezier(0.000, 0.000, 0.580, 1.000);
}

.mobile-menu-off {
 left: -500px !important;
 transition: all 250ms cubic-bezier(0.000, 0.000, 0.580, 1.000);
}

.mobile-menu-entry {
 background-color: #407289;
 border-bottom: 1px solid #ccc;
 border-right: 1px solid #ccc;
 font-size: 20px;
 color: #ffffff;
 padding: 10px 10px 10px 1em;
}

#mobile-menu a {
    text-decoration: none;
}

.mobile-menu-level2 {
 display: none;
 background-color: #769623;
 border-bottom: 1px solid #777;
 border-right: 1px solid #777;
 font-size: 16px;
 color: #ffffff;
 padding: 5px 10px 10px 2em;
}

/* styles for mobile menu END */

/* allow items for small devices only */
.mobile-only {
    display: none;
}

@media screen and (max-width: 760px) {
    .mobile-only {
        display: unset;
    }
    .mobile-not {
        display: none;
    }
}

/* styles for input type=list widget START */

.dc-list-container {
    border: 1px solid grey;
    margin-bottom: 10px;
    max-width: 500px;
}

.dc-list-container ul {
    margin: 0px;
    padding: 0 0 0 0;
}

.dc-list-container li {
    display: block;
    margin: 0;
    padding: 2px 10px 1px 3px;
    clear: both;
    min-height: 20px;    
}

/* no padding for sublevels */
.dc-list-container li ul li {
    padding: 0;
}

.dc-list-item-no-entries {
    font-style: italic;
}

.dc-list-container ul.has-entries .dc-list-item-no-entries {
    display: none;
}

.dc-list-item:nth-child(even) {
    background: #f0f0f0;
}

.lightbox-content .dc-list-item:nth-child(even) {
    background: #f8f8f8;
}

.dc-list-item:nth-child(even) .dc-list-item:nth-child(odd) {
    background: #e0e0e0;
}

.dc-list-item:nth-child(odd) .dc-list-item:nth-child(odd) {
    background: #f8f8f8;
}

.dc-list-item:nth-child(odd) .dc-list-item:nth-child(even) {
    background: #fff;
}

div.dc-list-container > ul > li.dc-list-item:nth-child(2) > div > .dc-list-item-sort-up {
    visibility: hidden;
}

div.dc-list-container > ul > li.dc-list-item:last-child > div > .dc-list-item-sort-down {
    visibility: hidden;
}

/* disable sorting when no-sorting class is set */
div.dc-list-container > ul.no-sorting > li.dc-list-item > div > .dc-list-item-sort-up, div.dc-list-container > ul.no-sorting > li.dc-list-item > div > .dc-list-item-sort-down {
    display: none;
}

/* sublevels */
div.dc-list-container ul li ul > li.dc-list-item:nth-child(1) > div > .dc-list-item-sort-up {
    visibility: hidden;
}

div.dc-list-container ul li ul > li.dc-list-item:last-child > div > .dc-list-item-sort-down {
    visibility: hidden;
}

.dc-list-item-label {
    display: inline-block;
}

.dc-list-item {
    position: relative;
}

.dc-list-item-actions {
    display: inline-block;
/*    float: right; */
    padding-top: 3px;
    position: absolute;
    right: 10px;
}

/* sublevels */
li li .dc-list-item-actions {
    right: 0;
}

/* styles for input type=list widget END */

.dc-greyed-out {
    -webkit-filter: grayscale(100%);
       -moz-filter: grayscale(100%);
         -o-filter: grayscale(100%);
        -ms-filter: grayscale(100%);
            filter: grayscale(100%);
}

/* styles for calendar START */

div.dc-cal {
    width: 330px;
    min-width: 330px;
    margin-bottom: 10px;
}

ul.dc-cal {list-style-type: none;}

/* Month header */
.dc-cal-month {
    width: calc(100% - 32px);
    background: #e4ba28;
    margin: 0px auto;
}

.calendar-grey .dc-cal-month {
    background-color: #aaa;
}

/* Month list */
.dc-cal-month ul {
    margin: 0;
    padding: 10px 20px;
}

.dc-cal-month ul li {
    color: white;
    font-size: 20px;
    text-transform: uppercase;
    letter-spacing: 3px;
}

/* Weekdays (Mon-Sun) */
.dc-cal-weekdays {
    margin: 0;
    padding: 10px 0;
    background-color:#ddd;
}

.dc-cal-calwidth {
    width: calc(100% - 32px);
    margin: 0px auto;
}

.dc-cal-weekdays li {
    display: inline-block;
    width: 11%;
    color: #666;
    text-align: center;
}

/* Days (1-31) */
.dc-cal-days {
    padding: 10px 0;
    background: #eee;
    margin: 0;
}

.dc-cal-days li {
    list-style-type: none;
    display: inline-block;
    width: 11%;
    text-align: center;
    margin-bottom: 5px;
    font-size:12px;
    color:#777;
}

/* Display calendarweek day */
.dc-cal-days li.dc-cal-calendarweek {
    line-height: 0.8em;
    font-size: 8px;
    text-align: left;
    margin: 0 -2px 0 2px;
}

/* Highlight the "current" day */
.dc-cal-days li.dc-cal-hidden {
    visibility: hidden;
}

/* Highlight the "current" day */
.dc-cal-days li .dc-cal-today {
    padding: 5px;
    background: #1abc9c;
    color: white !important;
}

/* Highlight today */
.dc-cal-days li.dc-cal-today {
    background: #ccc;
    color: black !important;
}

/* Highlight the "active"/toggled li - may override "today" */
.dc-cal-days li.dc-cal-active, .dc-cal-days li.dc-cal-setActive {
    background: red !important;
    color: black !important;
}

.dc-cal-days li.public-holiday {
    background-color: #63c73b;
}

.dc-cal-days li.school-holiday, .marker-school-holiday, .calendar-grey .dc-cal-days li.public-holiday {
    background-color: #53dc1d60;
}

/* Emphasize weekend days */
.dc-cal-days li.weekend {
    background: #ddd;
}

/* Densities */
.dc-cal-days li.dc-cal-density-1, .dc-cal-legend-density-1 {
    background: yellow !important;
}
.dc-cal-days li.dc-cal-density-2, .dc-cal-legend-density-2, .dc-cal-days li.dc-cal-tentative, .dc-cal-legend-tentative {
    background: orange !important;
}
.dc-cal-days li.dc-cal-density-3, .dc-cal-legend-density-3 /*, .dc-cal-days li.dc-cal-declined, .dc-cal-legend-declined */ {
    background: red !important;
}
.dc-cal-days li.dc-cal-accepted, .dc-cal-legend-accepted {
/*    background: #2fb72f !important; */
    background: red !important;
}
.dc-cal-days li.dc-cal-declined, .dc-cal-legend-declined, .dc-cal-days li.dc-cal-declined-half {
    position: relative;
}
.dc-cal-days li.dc-cal-declined::before, .dc-cal-days li.dc-cal-declined-half::before {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    border-bottom: 1px solid #444;
    -webkit-transform: skewY(-45deg);
    transform: skewY(-45deg);
    height: 18px;
    width: 18px;
    left: 6px;
    top: -10px;
}
.dc-cal-legend-declined::before {
    content: '';
    width: 100%;
    position: absolute;
    right: 0;
    top: 50%;
    border-bottom: 1px solid #444;
    -webkit-transform: skewY(-45deg);
    transform: skewY(-45deg);
}


/* secondary highlighting: boxed days */
.dc-cal-days li.dc-cal-boxed {
    border: 1px solid red;
    margin: -1px -1px 4px -1px; /* we need this to keep the size */
}

/* tertiary highlighting: half/triangle marked */
.dc-cal-days li.dc-cal-half /*, .dc-cal-days li.dc-cal-declined-half */ {
    background-image: -webkit-linear-gradient(135deg, transparent 50%, red 50%);
}
.dc-cal-days li.dc-cal-accepted-half {
/*    background-image: -webkit-linear-gradient(135deg, transparent 50%, #2fb72f 50%); */
    background-image: -webkit-linear-gradient(135deg, transparent 50%, red 50%);
}
.dc-cal-days li.dc-cal-tentative-half {
    background-image: -webkit-linear-gradient(135deg, transparent 50%, orange 50%);
}
.dc-cal-days li.dc-cal-declined-half {
    background-image: -webkit-linear-gradient(135deg, transparent 50%, #ddd 50%);
}

.dc-cal-info {
    background: #eee;
    font-size: 11px;
    padding: 0 2px 2px 2px;   
    color: #777;
    text-align: center;
}

/* styles for calendar END */

a.dc-navigation-filter {
    cursor: pointer;    
}

a.dc-navigation-filter:hover {
    cursor: pointer;    
    color: #888;
}

/* let color picker work in lightboxes */
.cp-color-picker {
    z-index: 999;
}

/* Checkbox, radio and select styles according to https://kyusuf.com/post/completely-css-custom-checkbox-radio-buttons-and-select-boxes START */

.control-group {
    margin-top: 8px;
}

.control {
/*	font-size: 18px;*/
	position: relative;
	display: block;
/*	margin-bottom: 15px;*/
	margin-bottom: 5px;
	padding-left: 30px;
	cursor: pointer;
}

.control input {
	position: absolute;
	z-index: -1;
	opacity: 0;
}

.control__indicator {
	position: absolute;
	top: 2px;
	left: 0;
	width: 20px;
	height: 20px;
	background: #e6e6e6;
}

.control--radio .control__indicator {
	border-radius: 50%;
}
    
/* Hover and focus states */
.control:hover input ~ .control__indicator/*,
.control input:focus ~ .control__indicator*/ {
	background: #ccc;
}

/* Checked state */
.control input:checked ~ .control__indicator {
	background: #2aa1c0;
}

/* Hover state whilst checked */
.control:hover input:not([disabled]):checked ~ .control__indicator,
.control input:checked:focus ~ .control__indicator {
	background: #0e647d;
}

/* Disabled state */
.control input:disabled ~ .control__indicator {
	pointer-events: none;
	opacity: .6;
	background: #e6e6e6;
}

/* Check mark */
.control__indicator:after {
	position: absolute;
	display: none;
	content: '';
}

/* Show check mark */
.control input:checked ~ .control__indicator:after {
	display: block;
}

/* Checkbox tick */
.control--checkbox .control__indicator:after {
	top: 4px;
	left: 8px;
	width: 3px;
	height: 8px;
	transform: rotate(45deg);
	border: solid #fff;
	border-width: 0 2px 2px 0;
}

/* Disabled tick colour */
.control--checkbox input:disabled ~ .control__indicator:after {
	border-color: #7b7b7b;
}

/* Radio button inner circle */
.control--radio .control__indicator:after {
	top: 7px;
	left: 7px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #fff;
}

/* Disabled circle colour */
.control--radio input:disabled ~ .control__indicator:after {
	background: #7b7b7b;
}

.control-label {
    margin: 5px 0;
    font-size: 15px;
    font-weight: bold;
}

.select {
	position: relative;
	display: inline-block;
/*	max-width: 75%;
	width: 100%; */
        min-width: 300px;
	margin-bottom: 15px;
}

.select select {
	display: inline-block;
	width: 100%;
/*	padding: 10px 15px; */
        padding: 10px 30px 10px 15px;
	cursor: pointer;
	color: #7b7b7b;
	border: 0;
	border-radius: 0;
	outline: 0;
	background: #e6e6e6;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
        text-overflow: ellipsis;
}

.select select::-ms-expand {
	display: none;
}

.select select:hover,
.select select:focus {
	color: #000;
	background: #ccc;
}

.select select:disabled {
	pointer-events: none;
	opacity: .5;
}

.select__arrow {
	position: absolute;
	top: 16px;
	right: 15px;
	width: 0;
	height: 0;
	pointer-events: none;
	border-width: 8px 5px 0 5px;
	border-style: solid;
	border-color: #7b7b7b transparent transparent transparent;
}
.select select:hover ~ .select__arrow,
.select select:focus ~ .select__arrow {
	border-top-color: #000;
}

.select select:disabled ~ .select__arrow {
	border-top-color: #ccc;
}

.control__indicator-boxed {
    background: #fff; 
    border: 1px solid #aaa; 
    margin-left: 3px;
}

/* set darker grey for contrast when showing in lightbox */
#lightbox .control__indicator {
    background: #aaa;
}

#lightbox .control input:checked ~ .control__indicator {
    background: #2aa1c0;
}

    /* Checkbox, radio and select styles END */

.ui-tooltip {
    background: #f6eb87;
    color: white;
    border: none;
    padding: 0;
    opacity: 1;
    z-index: 999;    
}
.ui-tooltip-content {
    position: relative;
    padding: 1em;
    z-index: 999;    
}
.ui-tooltip-content::after {
    content: '';
    position: absolute;
    border-style: solid;
    display: block;
    width: 0;
    top: -10px;
    left: 10px;
    border-color: #f6eb87 transparent;
    border-width: 0 10px 10px;
    z-index: 999;    
}

#breadcrumbs {
    order: 1;
}

.dc-assignment option {
    padding: 2px 2px 2px 5px;
}

span.dc-labelgroup {
    display: inline-block;
    letter-spacing: 0.15em;
    font-weight: bold;
}

span.dc-labelgroup:not(:first-child) {
    margin-top: 10px;
}

div.list-attachment {
    padding: 10px; 
    background-color: #f8f8f8;
    margin-top: 8px;
}

div.thumbs-attachment {
    margin-top: 10px;
}

/* START Clearable text inputs */
.clearable{
  background: #fff url(../images/icon_clearable.gif) no-repeat right -10px center;
  border: 1px solid #999;
  padding: 3px 18px 3px 4px;     /* Use the same right padding (18) in jQ! */
  border-radius: 3px;
  transition: background 0.4s;
}
.clearable.x  { 
    background-position: right 5px center; 
} /* (jQ) Show icon */
.clearable.onX { 
    cursor: pointer; 
} /* (jQ) hover cursor style */
.clearable::-ms-clear {
    display: none; 
    width:0; 
    height:0;
} /* Remove IE default X */
.clearable:focus {
    outline-width: 0;
}
/* END Clearable text inputs */

.dc-list-item div.data {
    display: inline-block;
    margin-left: 5px;
    font-size: 11px;
    font-style: italic;
    color: inherit;
}
div.dc-list-item-label {
    max-width: 420px;
    overflow: hidden;
    white-space: nowrap;
    vertical-align: top;
    color: inherit;
}

/* in order to use a container widget to place form items beneath each other, we have to reduce some space... */

.dc-container.tight table {
    border-collapse: collapse;
}

.dc-container.tight td {
    padding: 0px;
}

/* builder widget styles */
.dc-builder .dc-builder-entry, .dc-builder .dc-builder-add-entry > div  {
    max-width: 800px;
}

div.dc-builder-entry-template {
    display: none;
}

.dc-builder .dc-builder-entries .dc-builder-entry:first-child .sort-up {
    visibility: hidden;
}

.dc-builder .dc-builder-entries .dc-builder-entry:last-child .sort-down {
    visibility: hidden;
}

.dc-builder .dc-builder-entry.is-moving {
    background-color: #f4a00620 !important;
}

.dc-builder .options li {
    border-radius: 15px;
    background-color: #F9EBA0;
    margin: 0 0 3px 0;
    width: 290px;
    padding: 5px 15px;
}

.dc-builder .options-add-entry {
    border-radius: 15px;
    border: 1px solid #888;
    margin: 0 0 3px 0;
    width: 290px;
    padding: 5px 15px;
}

.dc-builder .options li input {
    background-color: transparent;
    border: 0;
    border-bottom: 2px solid #888;
    padding: 3px 0px;
    width: 225px;    
}

.dc-builder .options li input:focus {
    border: 0;
    border-bottom: 2px solid #2aa1c0;
    background-color: #ffffff30;
}

.dc-builder .options ul {
    list-style: none;
    padding: 0;
}

.dc-builder .dc-builder-entries .dc-builder-entry li:first-child .option-sort-up {
    visibility: hidden;
}

.dc-builder .dc-builder-entries .dc-builder-entry li:last-child .option-sort-down {
    visibility: hidden;
}

.saveButtonBottom {
    margin-bottom: 10px;
}

/* force wrap of long text blocks */
.wrapped {
    white-space: pre;           /* CSS 2.0 */
    white-space: pre-wrap;      /* CSS 2.1 */
    white-space: pre-line;      /* CSS 3.0 */
    white-space: -pre-wrap;     /* Opera 4-6 */
    white-space: -o-pre-wrap;   /* Opera 7 */
    white-space: -moz-pre-wrap; /* Mozilla */
    white-space: -hp-pre-wrap;  /* HP Printers */
    word-wrap: break-word;      /* IE 5+ */
}

/* masking link START */

#dc-ui-filter-container {
    flex: 0 0 100%;
}

#dc-ui-filter-container.with-breadcrumbs {
    margin-top: -24px;
    height: 24px;
}

#dc-ui-filter-container > div {
    float: right; 
    margin: 0 20px 5px 0; 
    text-align: right;
    position: relative;
    z-index: 2;
}

/* masking link END */

/* Remove all the outline border all in our document */
a { 
   outline: none;
}

/* prevent from selecting */

.no-user-select {
    -webkit-user-select:none;
    -moz-user-select:none;
    user-select:none;
}

/* tags (inspired by https://codepen.io/wbeeftink/pen/AJjVZQ) START */

.dc-tag {
  background: #eee;
  border-radius: 3px 0 0 3px;
  color: #666;
  display: inline-block;
  height: 26px;
  line-height: 26px;
  padding: 0 10px 0 23px;
  position: relative;
  margin: 2px 15px 10px 0;
  text-decoration: none;
  -webkit-transition: color 0.2s;
  font-size: 13px;
  white-space: nowrap;
}

.dc-tag.small {
  border-radius: 2px 0 0 2px;
  height: 15px;
  line-height: 15px;
  padding: 0 6px 0 15px;
  margin: 3px 6px -1px 2px;
  font-size: 11px !important;
}

.dc-tag.light {
  color: #eee;
}

.dc-tag .delete {
  visibility: hidden;
}

.dc-tag:hover .delete {
  visibility: visible;
}

.dc-tag::before {
  background: #fff;
  border-radius: 10px;
  box-shadow: inset 0 1px rgba(0, 0, 0, 0.25);
  content: '';
  height: 6px;
  left: 10px;
  position: absolute;
  width: 6px;
  top: 10px;
}

.dc-tag.small::before {
  border-radius: 5px;
  height: 4px;
  left: 5px;
  width: 4px;
  top: 5px;
}

.dc-tag::after {
  border-bottom: 13px solid transparent;
  border-top: 13px solid transparent;
  content: '';
  position: absolute;
  right: -9px;
  top: 0;
  border-left-width: 10px;
  border-left-style: solid;
  border-left-color: inherit;
}

.dc-tag.small::after {
  border-bottom: 8px solid transparent;
  border-top: 8px solid transparent;
  right: -4px;
  border-left-width: 5px;
}

.dc-tag.hover:hover {
  background-color: #ccc !important;
  border-left-color: #ccc !important;
  color: white;
}

.dc-tag.hover:hover::after {
   border-left-color: inherit; 
}

.dc-nav-tag {
    position: relative;
    width: 10px;
    height: 10px;
    display: inline-block;
    margin-right: 4px;
}

.dc-nav-tag:after {
  border-bottom: 5px solid transparent;
  border-top: 5px solid transparent;
  content: '';
  position: absolute;
  right: -3px;
  top: 0;
  border-left-width: 4px;
  border-left-style: solid;
  border-left-color: inherit;
}

/* tags END */

.dc-topologyEntry.archive a {
    color: #888;
}

.dc-form-changestatus-indicator {
    width: calc(100% - 10px);
    min-height: 30px;
    padding: 10px 5px 5px 5px;
    margin-top: 5px;
    border-radius: 10px;
    border: 1px solid #444;
    font-style: normal;
    text-align: center;
    background-color: wheat;
    color: #000;
    font-variant: small-caps;
    font-size: large;
    font-weight:bold;
    margin-bottom: 10px;
}

.dc-form-changestatus-indicator.changed {
    background-color: #ffb3b0;
    transition: all 400ms linear;
}    

.dc-form-changestatus-indicator.saved {
    background-color: #7ddb68;
    transition: all 400ms linear;
}    

.dc-form-changestatus-indicator.new {
    background-color: #8ad76f;
    transition: all 400ms linear;
}    

.dc-form-changestatus-indicator.new.entry.changed {
    background-color: #8ad76f;
    transition: all 400ms linear;
}    

.dc-form-changestatus-indicator.new.config.changed {
    background-color: #ffb3b0;
    transition: all 400ms linear;
}    

.dc-form-changestatus-indicator .new.saved, .dc-form-changestatus-indicator .new.unchanged, .dc-form-changestatus-indicator .unchanged, .dc-form-changestatus-indicator .changed, .dc-form-changestatus-indicator .unchanged.saved {
    display: none;
}

.dc-form-changestatus-indicator.new.saved .new.saved {
    display: block;
}

.dc-form-changestatus-indicator.new.changed .new.changed {
    display: block;
}

.dc-form-changestatus-indicator.new.unchanged:not(.saved) .new.unchanged {
    display: block;
}

.dc-form-changestatus-indicator.unchanged:not(.new):not(.saved) .unchanged:not(.new):not(.saved) {
    display: block;
}

.dc-form-changestatus-indicator.changed:not(.new) .changed:not(.new) {
    display: block;
}

.dc-form-changestatus-indicator.unchanged.saved:not(.new) .unchanged.saved:not(.new) {
    display: block;
}

.dc-entity-actions {
    margin-top: 10px;
    margin-bottom: 10px;
    font-size: 12px;
}

.dc-entity-settings {
    margin-bottom: 10px;
    font-size: 12px;
}

.dc-builder-entry.new-page {
    margin-top: 35px;
}

.dc-builder-entry.new-page:before {
  content: "------------ neue Seite ------------";
  position: absolute;
  height: 20px;
  width: 100%;
  left: 0;
  top: -23px;
  display: block;
  text-align: center;
  font-size: 12px;
  background-color: #d1d3ce;
  transform: translate(-3px, -10px);
  border: 3px solid #ccc;
  font-style: italic;
}