body {
  background-color: white;
  position: relative;
  height: 100%;
  font-size: 0.65em;
  font-family: var(--tf);
  margin: 0;
}



.gm-bundled-control-on-bottom .gmnoprint div,
.gm-bundled-control-on-bottom .gmnoprint {

    transform: scale(.74);
}

.gm-bundled-control-on-bottom .gmnoprint div  {
    background-color: transparent!important;

  right: 24px;
    left: 15px!important;
    top: 7px!important;
    position: relative;
}
.gm-bundled-control-on-bottom .gmnoprint  div  button
{
    background-color: white!important;
}

.gm-bundled-control-on-bottom .gmnoprint  div  button:hover
{

    background-color: var(--tc-btn-hover)!important ;
}



/********************************************************/
/**** jQuery dialogs styles
/********************************************************/


.ui-widget-content {
  background: white;
  color: black;
}



/**** jQuery dialogs style override for close button ****/
.ui-widget-header .ui-icon.ui-icon-closethick {
  background: var(--tc-btn) url(./../statimg/icons/topo-icons.png) 1px -79px no-repeat;
}

.ui-dialog.critical {

}


.highlightedText {
  font-weight: normal;
  color: white;
}


input[type=text]::-ms-clear {
  /*color: red; This sets the cross color as red. */
  display: none;
}

textarea,
input,
button {
  font-size: 1em;
}
button.save, button.delete, button.submit_button {
  padding: 5px 10px;
}
button.delete {
  padding: 5px;
}

/* new unified button styles for later */
button.textButton {
  padding: 10px 15px;
}
button.noTextButton {
  box-shadow: none !important;
  position: relative;
  box-sizing: border-box;
  padding: 5px !important;
  width: 20px; height: 20px;
  background-size: contain;
}
button.addButton {
  background: var(--tc-btn) url(./../statimg/icons/icon_add.png) no-repeat center center;
}
button.removeButton {
  background: var(--tc-btn) url(./../statimg/icons/icon_delete.png) no-repeat center center;
}
button.changeButton {
  background: var(--tc-btn) url(./../statimg/icons/change.png) no-repeat center center;
}

/* dialog buttons */
.ui-dialog.ui-widget {
  font-size: 12px;
}

.ui-dialog .ui-dialog-titlebar {
 padding: 10px 6px 10px 10px;
}
.ui-dialog .ui-dialog-buttonpane button {
  padding: 10px 15px;
}
.ui-dialog.ui-widget .ui-dialog-content {
  font-size: 12px;
  height: auto !important;
}


#betabanner {
  position: absolute;
  left: 0;
  top: 0;
}
img {
  border: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 1em;
}
.clear {
  clear: both;
}
a {
  color: #000;
  text-decoration: none;
  transition: color .3s linear;
  -o-transition: color .3s linear;
  -moz-transition: color .3s linear;
  -webkit-transition: color .3s linear;
  transition: background-color .3s linear;
  -o-transition: background-color .3s linear;
  -moz-transition: background-color .3s linear;
  -webkit-transition: background-color .3s linear;
}
a.ui-slider-handle {
  transition: none;
  -o-transition: none;
  -moz-transition: none;
  -webkit-transition: none;
}
.ui-widget-overlay {
  z-index: 10000;
}
.ui-dialog {
  z-index: 10001;
}
a:visited {
  color: #010101;
}
a:hover,
a:focus {
  color: #444;
  text-decoration: underline;
}
#left {
  position: absolute;
  left: 10px;
  width: 200px;
  overflow: auto;
  padding: 10px;
  top: 30px;
  bottom: 0;
}
#map_canvas {
  top: 10px;
  bottom: 40px !important;
  left: 5px;
  right: 5px;
  position: absolute;
}


#main li.ui-menu-item a{
  color: white;
}

#main a,
.window a {
  color: var(--tc-main);
  text-decoration: none;
}
.window a:hover {
  color: #666;
}
input,
select,
button {
  font-size: 1em;
}
.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
}
body input[type=submit],
body input[type=button],
body button,
body a.button{
  border: none;
  background-color: var(--tc-btn);
  background-repeat: no-repeat;
  background-position: center center;
  color: #fff;
  box-shadow: 1px 1px 3px #aaa;
  -moz-box-shadow: 1px 1px 3px #aaa;
  -webkit-box-shadow: 1px 1px 3px #aaa;
  transition: background-color .2s linear;
  -o-transition: background-color .2s linear;
  -moz-transition: background-color .2s linear;
  -webkit-transition: background-color .2s linear;
  padding: 1px 6px;
  text-decoration: none;
  cursor: pointer;
  font-family: var(--tf);
}

#hoverDiv a.button,
#galleryOverlay a.button,
a.button.topo-icon {
  padding: 0;
  z-index: 6;
}
button::-moz-focus-inner {
  border: 0;
  padding: 0;
}

body input[type=submit]:hover,
body input[type=submit]:focus,
body input[type=button]:hover,
body input[type=button]:focus,
body button:not(#slideshow-button):hover,
body button:not(#slideshow-button):focus,
body a.button:hover,
body a.button:focus {
  background-color: var(--tc-btn-hover) ;
}
body input[type=submit]:active,
body input[type=button]:active,
body button:active,
body a.button:active {
  background-color: var(--tc-btn-hover) !important;
  box-shadow: none;
  -o-box-shadow: none;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
}
body input[type=submit][disabled],
body input[type=button][disabled],
body button[disabled],
body a.button[disabled] {
  background-color: #CCCCCC !important;
  box-shadow: none !important;
  -o-box-shadow: none !important;
  -moz-box-shadow: none !important;
  -webkit-box-shadow: none !important;
  border-color: #777 !important;
  text-shadow: -1px -1px 0 #aaa;
  -o-text-shadow: 1px -1px 0 #aaa;
  -moz-text-shadow: 1px -1px 0 #aaa;
  -webkit-text-shadow: 1px -1px 0 #aaa;
}



body input[type=submit].black,
body input[type=button].black,
body button.black {
  background-color: #000;
}
body input[type=submit].black:hover,
body input[type=submit].black:focus,
body input[type=button].black:hover,
body input[type=button].black:focus,
body button.black:hover,
body button.black:focus {
  background-color: #777;
}
body button[name=loginform_logout],
body button[name=loginform_logout],
body .noshadow,
body .titlebar button,
body .titlebar .button {
  box-shadow: none !important;
  -o-box-shadow: none !important;
  -moz-box-shadow: none !important;
  -webkit-box-shadow: none !important;
}
input,
select,
textarea,
button {
  outline: none !important;
}
#frame {
  position: relative;
}
header {
  height: 60px;
  position: relative;
  display: block;
}
#logo {
  width: 331px;
  height: 100px;
  display: block;
  background: url(./../statimg/logoline.png) left 52px no-repeat;
  z-index: 1;
  position: relative;
  margin-left: -1px;
}
#logo hr {
  background-color: gray;
  border: none;
  height: 2px;
  margin: 0 0 10px 0;
}
#headerbar {
  height: 100%;
  position: absolute;
  right: 0;
  left: 300px;
  top: 0;
  background: var(--tc-main);
  padding-left: 40px;
  margin-top: 10px;

}
#headerbar label {
  position: relative;
  bottom: 3px;
  color: #fff;
}
#main,
#frame>.main {
  background-color: #fff;
  overflow: hidden;
}
#content {
  position: absolute;
  top: 15px;
  left: 250px;
  bottom: 10px;
  overflow: auto;
  padding: 0 0 10px 0;
  right: 0;
}
address {
  font-style: normal;
}
#menu {
  position: absolute;
  bottom: -4px;
  margin: 0;
  padding: 0;
  right: 150px;
}
#menu li {
  float: left;
  list-style: none;
  margin-left: 20px;
}
#menu a,
#topoContent .text a {
  color: #888;
  text-decoration: none;
}
#topoContent .text a {
  text-decoration: underline;
  color: var(--tc-main);
}
#topoContent .text aside {
  float: right;
}

#menu a:hover,
#menu a:focus,
#menu a:active
{
  color: var(--tc-btn) !important;
}
#topoContent a:hover,
#topoContent a:focus,
#topoContent a:active {
  color: var(--tc-btn-hover) !important;
}



#side-menu {
  position: absolute;
  left: -30px;
  top: 145px;
  z-index: 2;
}
#side-menu:hover>div {
  display: block;
}
#side-menu a {
  color: #fff;
  display: block;
  text-decoration: none;
}
#side-menu a:hover,
#side-menu a:focus {
  color: #DDD;
}
#side-menu>div>ul {
  background: var(--tc-main);
  width: 170px;
  margin: 0 0 0 30px;
  padding: 10px 10px 15px 10px;
  min-height: 80px;
  border-radius: 0 10px 10px 10px;
  -moz-border-radius: 0 10px 10px 10px;
  -webkit-border-radius: 0 10px 10px 10px; }
  /* For new Side_Menu - otherArchives-Area */
  ul#archs {
    -webkit-column-count: 5;
    -moz-column-count: 5;
    column-count: 5;
    margin-left: 40px !important; }

  ul#archs li {
    display: inline-block;
    height: 20px;
    list-style-position: outside;
    text-indent: -10px;
    padding-left: 10px;
    width: 220px; }

  ul#archs li a {
    color: var(--tc-btn-text-hover);
  }
  ul#archs li a:hover {
    color: white;
  }

  ul#archs li.country {
    margin-top: 21px;
    font-size: 11px;
    font-weight: bold;
    color: #ffffff;  }
  ul#archs li.country:first-child {
    margin-top: 0; }
  ul#archs li.state {
    color: #ffffff;
    font-weight: bold;
    line-height: 20px; }

#side-menu li {
  list-style: none;
  border-bottom: 1px solid #da9ec4;
}
#side-menu li>a {
  padding: 4px 1px;
  border: none !important;
  outline: none !important;
}
#side-menu>div>ul+ul {
  margin-top: 10px;
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  min-height: 0;
  padding: 10px;
}
#side-menu>div>ul+ul>li {
  border: none;
}
#side-menu>div>ul+ul ul {
  margin: 0 0 5px 0;
  padding: 0;
  display: none;
}
#side-menu>div>ul+ul span+span {
  display: none;
}
#side-menu>a {
  background: var(--tc-main);
  display: block;
  height: 80px;
  width: 30px;
  position: absolute;
  border-radius: 10px 0 0 10px;
  -moz-border-radius: 10px 0 0 10px;
  -webkit-border-radius: 10px 0 0 10px;
}
#side-menu>a>img {
  margin: 0px 12px;
}
#side-menu>div {
  display: none;
}
#side-menu>div>div {
  position: absolute;
  background: var(--tc-main);
  top: 0px;
  left: 30px;
  width: 10px;
  height: 90px;
}
#side-menu>div>div>div {
  background-color: #fff;
  width: 9px;
  height: 10px;
  border-radius: 0 10px 0 0;
  position: absolute;
  bottom: 0;
  -o-transition: background-color .2s linear;
  -moz-transition: background-color .2s linear;
  -webkit-transition: background-color .2s linear;
  border-left: 1px solid white;
}
.contentVisible #side-menu>div>div>div {
  background-color: #000;
}
#notifyer {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 200px;
  border-radius: 10px;
  border: 1px solid black;
  background-color: #ddd;
  display: none;
  padding: 10px;
}
#watchlist {
  position: absolute;
  background-color: #eee;
  border: 1px solid #aaa;
  padding: 15px 3px 10px 10px;
  border-radius: 5px;
  -moz-border-radius: 5px;
  line-height: 1.2em;
  width: 150px;
  overflow: auto;
  display: none;
  z-index: 10;
}
#watchlist span {
  display: block;
}
#watchlist span a.del_watchlist {
  display: none;
  float: right;
  color: #f00;
  font-weight: bold;
}
#watchlist span:hover a.del_watchlist {
  display: block;
}
a.new_watchlist {
  position: absolute;
  top: 1px;
  right: 14px;
  font-weight: bold;
  color: #009900;
}
a.close_watchlist {
  position: absolute;
  top: 0px;
  right: 3px;
  font-weight: bold;
  color: #f00;
}

.grey_resizable {
  background-color: darkgrey;
  opacity: 0
}

.grey_resizable:hover {
  background-color: var(--tc-btn-text-hover);
  opacity: .4
}


.window, .window.ui-resizeable {
  position: absolute !important;
  border: 2px solid #d1d1d1;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  top: 50px;
  left: 50px;
  padding: 3px;
  width: 400px;
  background: #fff;
  -o-transition: border-color .2s linear;
  -moz-transition: border-color .2s linear;
  -webkit-transition: border-color .2s linear;
  transition: border-color .2s linear;
  -o-box-shadow: 0px 0px 5px #000;
  -moz-box-shadow: 0px 0px 5px #000;
  -webkit-box-shadow: 0px 0px 5px #000;
  box-shadow: 0px 0px 5px #000;
}
.window.active {
  border-color: var(--tc-main);
  box-shadow: 2px 2px 10px #000;
  -o-box-shadow: 2px 2px 10px #000;
  -moz-box-shadow: 2px 2px 10px #000;
  -webkit-box-shadow: 2px 2px 10px #000;
}
.window.droppableActive {
  border-color: #C63C4C;
}
.window.droppableHover {
  border-color: #95e133;
  z-index: 9000!important;
}
.document_detail {
  background-color: #fff;
  min-height: 150px;
  min-width: 200px;
  width: 450px;
  height: 300px;
  z-index: 5;
}


.ui-dialog-titlebar .ui-dialog-title {
  margin: 0.2em 16px 0.1em 0;
  max-width: calc(100% - 42px);
}
.ui-dialog-titlebar .topo-icon{
  box-shadow: none;
}



.ui-dialog.noclose .ui-dialog-titlebar .topo-icon.close{
  display:none
}


.ui-dialog-titlebar .topo-icon.close svg{
  box-shadow: none;
  position: absolute;
  left: 1px;
  top:1px;
  pointer-events: initial;
  width: 8px;
  background-color: transparent;
  color: #fff;
  -moz-box-shadow: 1px 1px 3px #aaa;
  -webkit-box-shadow: 1px 1px 3px #aaa;
  transition: background-color .2s linear;
  -o-transition: background-color .2s linear;
  -moz-transition: background-color .2s linear;
  -webkit-transition: background-color .2s linear;
   padding: 6px;
/*   margin: 8px 8px 0 8px;*/
/*    margin-left: 6px;*/
}

.ui-dialog-titlebar .topo-icon.close:hover{
  cursor: pointer;
  background-color: var(--tc-btn-hover) !important;
}

.ui-dialog-titlebar .topo-icon.close {
  border: none;
  float: right;
  width: 22px;
  height: 22px;
   padding: 0;
}



.titlebar{
  color: #000;
  height: 20px !important;
  /*height: auto !important; */
  border-top-left-radius: 4px;
  -o-border-top-left-radius: 4px;
  -moz-border-top-left-radius: 4px;
  -webkit-border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  -o-border-top-right-radius: 4px;
  -moz-border-top-right-radius: 4px;
  -webkit-border-top-right-radius: 4px;
  border-bottom: 1px solid gray;
  margin: 0 0 3px 0;
  padding: 6px 6px 10px 6px;
}
.titlebar,
.titlebar h1 {
  max-height: 22px;
  cursor: move !important;
}
.titlebar *{
  font-weight: bold;
  cursor: default !important;
}
.titlebar h1{
  line-height: 22px;
  margin: 0px;
  position: absolute;
  left: 3px;
  right: 40px;
  padding-left: 6px;
  z-index: 1;
}

.titlebar button,
.titlebar .button {
  border: 1px solid black;
  border-top: none;
  width: 22px;
  height: 22px;
  text-align: center;
  display: block;
  float: right;
  margin: 0px 1px 2px 4px;
  border: none;
  padding: 0 0 3px 0px;
  z-index: 2;
  position: relative;
}

.titlebar .topo-icon.close{
  background-position: 1px -79px;
  font-weight: normal;
  font-size: 12px;
  padding-bottom: 1px;
}


.titlebar .button{
  padding: 0;
}
.locationTransfer {
  z-index: 1000;
}
.titlebar span{
  display: inline-block;
  width: 0;
  height: 22px;
  border-left: 1px solid gray;
  padding-right: 3px;
  margin-left: 5px;
  float: right;
}
.window footer,
.window .footer {
  position: absolute;
  bottom: 3px;
  height: 22px;
  border-top: 1px solid gray;
  text-align: right;
  left: 3px;
  right: 3px;
  padding: 10px 20px 7px 0;
}

.footer .saveTags {
  padding: 5px 10px;
}

.window .c {
  background-color: #EEE;
  top: 43px;
  bottom: 3px;
  left: 3px;
  right: 3px;
  width: auto;
  position: absolute;
}
.tagBox {
  position: absolute !important;
  border: 2px solid var(--tc-main);
  box-shadow: #000 0 0 10px 2px;
  background: transparent;
  z-index: 1;
}

.tagBox.active {
  z-index: 1004
}


.c .tagBox {
  cursor: move;
}
.tagBox button {
  height: 17px;
  width: 17px;
  float: right;
  padding: 0 1px 0 0;
  margin: -2px -2px 0 0;
}




.tagBox .ui-autocomplete.ui-menu {
  z-index: 5;
}
.tagBox .ui-autocomplete.ui-menu li> a {
  color :var(--tc-btn-text)
}


.tagBox .input {
  border: 2px solid var(--tc-main);
  background-color: #fff;
  border-radius: 2px;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  white-space: nowrap;
  bottom: -25px;
  width: 204px;
  position: absolute;
  left: 50%;
  margin: 0 0 0 -105px;
  padding: 1px;
  z-index: 1001;
  min-height: 17px;

  overflow: hidden;
}
.tagBox.onBottom .input {
  bottom: auto;
  top: -21px;
}
.tagBox .input * {
  border: none;
}
.tagBox .input select {
  width: 40px;
  margin: 0 2px 0 0;
}



.tagBox .input input {
  width: 130px;
  margin-left: 10px;
}
.tagBox .input textarea {
  overflow: hidden;
  position: absolute;
  border: 1px solid #fff;
  border-top: 0;
  /*left: 45px;*/
  width: 100%;
  height: 10px;
  top: 0;
  margin: 0;

/*  background-color: #0f9d58;*/

}
.tagBox .input textarea:focus {
  overflow: auto;
  border-color: #aaa;
}
.tagBox [id^=svg-icon-close] {
  height: 9px;
  padding: 3px;
}


.addtowl {
  position: absolute;
  border: 1px solid black;
  padding: 5px;
  width: 150px;
  background-color: #fff;
  z-index: 10;
}
.addtowl a {
  display: block;
}
.document_detail.minimized img {
  width: 100% !important;
  margin: 0 !important;
  height: auto !important;
}
span.hoverThumb {
  cursor: default;
}
.hThumb {
  background: white;
  border: 2px solid var(--tc-main);
  line-height: 0;
  border-radius: 3px !important;
  -moz-border-radius: 3px !important;
  -webkit-border-radius: 3px !important;
  text-align: center;
}
.hThumb div {
  text-align: left;
}
.hThumb>a {
  display: block;
  margin: 5px 5px 0 5px;
  padding: 0 0 5px 0;
  border-bottom: 1px solid gray;
  position: relative;
}
.hThumb>a.last {
  margin: 5px;
  padding: 0;
  border: none;
}
.hThumb.text {
  line-height: 1.2em;
  padding: 2px 3px;
}
.hThumb>a>span {
  position: absolute;
  bottom: 5px;
  right: 0;
}
.hThumb>a.last>span {
  bottom: 0;
}
#loader {
  position: absolute;
  z-index: 100;
  display: none;
}
.ui-checkbox {
  display: inline-block;
  width: 8px;
  height: 8px;
  border: 1px solid #fff;
  margin: 5px 2px 2px 2px;
}
.ui-checkbox-state-checked,
.ui-checkbox-state-checked-hover {
  background-color: #ddd;
}
.document_detail {
  box-shadow: 2px 2px 5px rgba(0,0,0,0.5);
  -o-box-shadow: 2px 2px 5px rgba(0,0,0,0.5);
  -moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.5);
  -webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.5);
}
#ui-datepicker-div {
  display: none;
}
#creativDepotLink {
  position: absolute;
  bottom: -9px;
}
#genius {
  position: absolute;
  left: 100px;
  bottom: -9px;
  color: #888;
  font-size: .9em;
}
div#loginform {
  text-align: center;
}

div#loginform form {
  display: inline-block;
  margin: 50px 0 20px;
  padding: 20px 40px;
  color: #fff !important;
  background-color: var(--tc-main) !important;
  text-align: left;
  box-shadow: 2px 2px 5px rgba(0,0,0,0.5) !important;
  -o-box-shadow: 2px 2px 5px rgba(0,0,0,0.5) !important;
  -moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.5) !important;
  -webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.5) !important;
}
div#loginform form br {
  clear: both !important;
}

div#passwordresetform {
  text-align: center;
}

div#passwordresetform form {
  text-align: left;
}
div#passwordresetform form input,
div#passwordresetform form button {
  margin: 2px 0 !important;
  float: right !important;
  height: auto !important;
}
div#passwordresetform form br {
  clear: both !important;
}

.auth-box {
  display: inline-block;
  margin: 50px 0 20px;
  padding: 20px 40px;
  width: 450px;
  color: #fff !important;
  background-color: var(--tc-main) !important;
  box-shadow: 2px 2px 5px rgba(0,0,0,0.5) !important;
  -o-box-shadow: 2px 2px 5px rgba(0,0,0,0.5) !important;
  -moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.5) !important;
  -webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.5) !important;
}

div#loginform form input,
div#loginform form button {
  margin: 2px 0 !important;
  float: right !important;
  height: auto !important;
}
#header_login_form button {
  font-size: 1em !important;
}

.topoMessage {
  position: absolute;
  z-index: 100;
  top: 0;
  left: 20px;
  right: 20px;
  background: #c63c4c;
  color: #fff;
  padding: 5px 25px 5px 15px;
  border: 1px solid white;
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  line-height: 1.3em;
}
.topoMessage button {
  background-color: #c63c4c;
  position: absolute;
  right: 4px;
  top: 4px;
  padding: 1px 4px;
}
.topoMessage button:hover {
  background-color: #e65964;
}
.topoMessage.info {
  border-top: none;
  border-top-left-radius: 0px;
  -o-border-top-left-radius: 0px;
  -moz-border-top-left-radius: 0px;
  -webkit-border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  -o-border-top-right-radius: 0px;
  -moz-border-top-right-radius: 0px;
  -webkit-border-top-right-radius: 0px;
}
.topoMessage.error {
  position: relative;
  margin: 50px auto auto;
  width: 300px;
  font-size: 1.1em;
  padding: 20px;
}
.topo-icon {
  background: var(--tc-btn);
  width: 16px;
  height: 16px;
  font-size: 16px;
  display: inline-block;
  background: none;
}
.topo-icon.close, .topo-icon.locationTransfer {
  background: var(--tc-btn);
}
.topo-icon.wrench {
  background-position: 0 0;
}
.topo-icon.wrench.pink {
  background-position: -16px 0;
}
.topo-icon.arrow {
  background-position: 0 -16px;
}
.topo-icon.arrow.pink {
  background-position: -16px -16px;
}
.topo-icon.watchlist {
  background-position: 0 -32px;
}
.topo-icon.watchlist.pink {
  background-position: -16px -32px;
}
.topo-icon.win {
  background-position: 0 -48px;
}
.topo-icon.win.pink {
  background-position: -16px -48px;
}
.topo-icon.center {
  background-position: 0 -64px;
}
.topo-icon.close {
  background-position: 0 -80px;
  box-shadow: unset;
}
.topo-icon.question {
  background-position: 0 -96px;
}
.category_icon, .topo-type, .topo-type1 {
  width: 27px;
  height: 27px;
  display: inline-block;
  background-image: var(--ts);
  background-repeat: no-repeat;
}

#category #svg-icon-circle,
#category #svg-icon-video,
#category #svg-icon-objects,
#category #svg-icon-text,
#category #svg-icon-documents,
#category #svg-icon-audio,
#category #svg-icon-persons,
#category #svg-icon-question {
  height: 18px;
  padding: 2px 0 10px 0;
}

@media  (max-width: 1230px) {
  #category #svg-icon-circle,
  #category #svg-icon-video,
  #category #svg-icon-objects,
  #category #svg-icon-text,
  #category #svg-icon-documents,
  #category #svg-icon-audio,
  #category #svg-icon-persons,
  #category #svg-icon-question {
    display: none;
  }
}

.documentRow .video-overlay [id^=svg-icon-play],
.documentRow .audio-overlay [id^=svg-icon-audio-play]{
  height: 14px;
  width: 14px;
  padding-left: 3px;
  padding-top: 10px;
}

.documentRow .video-overlay,
.documentRow .audio-overlay{
  position: absolute;
  left: 50%;
  top: 50%;
  width: 34px;
  height: 34px;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  border: 2px solid #fff;
  transform: translate(-50%, -50%);
  display: block;
}

.resultimg #svg-icon-circle,
.resultimg #svg-icon-video,
.resultimg #svg-icon-objects,
.resultimg #svg-icon-text,
.resultimg #svg-icon-documents,
.resultimg #svg-icon-audio,
.resultimg #svg-icon-persons,
.resultimg [id^=svg-icon-question] {
  height: 18px;
  padding: 0 6px 6px 0;
}

.resultimg [id^=svg-icon-question] path {
  stroke: #fff !important;
}

.resultimg [id^=svg-icon-question],
#hoverDiv2 [id^=svg-icon-question] {
  height: 18px;
  padding-left: 5px;
}

#hoverDiv2 [id^=svg-icon-wrench],
#galleryContent, #svg-icon-fullscreen,
#galleryContent, #svg-icon-fullscreen-close {
  height: 20px;
}
#hoverDiv2 [id^=svg-icon-wrench]{
    top: 2px;
    position:  relative;
}

#galleryContent #svg-icon-wrench-gallery {
  height: 14px;
  padding: 3px;
}

#hoverDiv2 .icons a [id^=svg-icon-wrench] .cls-1{
  fill: var(--tc-btn) !important;
}

#hoverDiv2 .icons a:hover [id^=svg-icon-wrench] .cls-1{
  fill: var(--tc-btn-hover) !important;
  transition: fill 200ms linear;
}

#galleryOverlay .question #svg-icon-question {
  height: 18px;
  float: right;
  padding: 4px;
}

#hoverDiv2 #svg-icon-circle,
#hoverDiv2 #svg-icon-video,
#hoverDiv2 #svg-icon-objects,
#hoverDiv2 #svg-icon-text,
#hoverDiv2 #svg-icon-documents,
#hoverDiv2 #svg-icon-audio,
#hoverDiv2 #svg-icon-persons{
    height: 18px;
    padding-top: 5px;
}

#hoverDiv2 [id^=svg-icon-question] {
  height: 18px;
}


#galleryContent #svg-icon-close,
#galleryContent #svg-icon-magnifier-gallery {
  height: 18px;
}

#galleryContent #svg-icon-close {
  padding-top: 2px;
}


.titlebar .maximize {
  font-size: 18px;
/*  line-height: 18px;*/
  padding-bottom: 4px;
  font-weight: normal;
}

.titlebar .maximize.active {
  /*color: darkseagreen;*/
}


.documentDetail [id^=svg-icon-close-pinned] {
  height: 10px;
  padding: 6px;
}

.documentDetail .topo-icon.question,
.documentDetail .topo-icon.wrench {
  background: var(--tc-main) !important;
}

.documentDetail [id^=svg-icon-question],
.documentDetail [id^=svg-icon-wrench-pinned] {
  height: 14px;
  padding-top: 4px;
}

.handle-indicators [id^=svg-arrow-right],
.handle-indicators [id^=svg-arrow-left] {
  height: 16px;
  width: 16px;
}
#galleryMapWrapper > div > div.mapControl > div:nth-child(4) > span:nth-child(2)


svg {
  pointer-events: none;
}

#hoverDiv2 a.topo-icon {
  width: 20px;
  height: 20px;
  background: transparent !important;
}

#map_header button.topo-icon {
  background: transparent !important;
}

#galleryContent a.topo-icon,
#galleryContent button.magnifierbutton.topo-icon,
#galleryContent button#fullscreenbutton {
  background: var(--tc-btn);
}

#galleryContent a.topo-icon:hover #svg-icon-wrench-gallery,
#galleryContent button.magnifierbutton:hover,
#galleryContent button#fullscreenbutton:hover {
  background: var(--tc-btn-hover);
  transition: background 200ms linear;
}

[id^=svg-tt-logo] {
  height: 65px;
  padding-bottom: 18px;
  pointer-events: none;
  box-sizing: initial;
}




@media  (min-width: 1230px) {
  .frontend [id^=svg-tt-logo] {
    padding-bottom: 57px;
  }

  #topo_top_logo .headlines {
    text-align: left;
    padding-left: 50px;
  }
}

#map_header #svg-icon-localize {
  height: 15px;
}

#map_header button.topo-icon #svg-icon-localize .cls-1 {
  stroke: var(--tc-btn);
}
#map_header button.topo-icon:hover #svg-icon-localize .cls-1 {
  stroke: var(--tc-btn-hover);
}

#hoverDiv2 #svg-icon-copy {
  height: 24px;
}

#hoverDiv2 #svg-icon-copy {
  height: 24px;
}

#hoverDiv2 a.openQuestion.topo-callout {
  display: block;
}

#hoverDiv2 a.topo-icon #svg-icon-copy .cls-1 {
  stroke: var(--tc-btn);
  transition: stroke 200ms linear;
}
#hoverDiv2 a.topo-icon:hover #svg-icon-copy .cls-1 {
  stroke: var(--tc-btn-hover);
  transition: stroke 200ms linear;
}

a#top_logo_home_link {
  text-decoration: none;
  display: block;
  cursor: pointer;
}

a#top_logo_home_link svg.fixed{
  position: fixed;
}


.nosize {
  width: auto;
  height: auto;
}
.topo-type.type2,
.topo-type2 {
  background-position: -54px 0;
}
.topo-type.type3,
.topo-type3 {
  background-position: -108px 0;
}
.topo-type.type4,
.topo-type4 {
  background-position: -162px 0;
}
.topo-type.type5,
.topo-type5 {
  background-position: -216px 0;
}
.topo-type.type6,
.topo-type6 {
  background-position: -270px 0;
}
.topo-type.type7,
.topo-type7 {
  background-position: -108px -27px;
}
.topo-type.type99,
.topo-type99 {
  background-position: -378px 0;
}


.topo-overlay-controls {
  clear: both;
  background: #fff;
  opacity: 0.98;
}
.topo-overlay-controls h1 {
  margin: 0;
  padding: 5px 0;
}
.topo-overlay-controls .slider {
  width: 80px;
  float: right;
  margin: 3px 5px 3px 0px;
  border: 0
}

.topo-overlay-controls .ui-slider-range{
  background: darkgrey;
}

.topo-overlay-controls ul {
  margin: 0;
  padding: 5px 0;
  clear: both;
}
.topo-overlay-controls ul li {
  position: relative;
  margin: 3px 0;
  list-style: none;
  clear: both;
  padding: 1px;
  min-height: 16px;
  border: 1px solid transparent;
  background-color: #fff;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
}
.topo-overlay-controls select {
  width: 120px;
  margin-right: 10px;
}
.topo-overlay-controls .handle {
  width: 12px;
  height: 16px;
  float: right;
  background: url(./../statimg/dots.png);
  margin-left: 10px;
  cursor: n-resize;
}
.topo-overlay-controls .slider.autohide {
  position: absolute;
  right: 10px;
  top: 2px;
}
.topo-overlay-controls ul li.overlayPlaceholder {
  background-color: #ffd9ff;
  border-color: #ffbff8;
}
.topo-overlay-controls .overlayUL  input {
  float: left;
  margin: 1px 15px 0 0;
}
.topo-overlay-controls .overlayUL  a {
  border:0;
  line-height: 16px;
  top: -.15em;
}
#galleryOverlay .topo-overlay-controls ul,
#galleryOverlay .topo-overlay-controls ul li {
  background: #000;
}
.google-map-button {
  direction: ltr;
  overflow: hidden;
  text-align: center;
  position: relative;
  color: #000000;
  font-family:  Arial, sans-serif;
  -webkit-user-select: none;
  font-size: 11px;
  padding: 1px 6px;
  border-bottom-right-radius: 2px;
  border-top-right-radius: 2px;
  -webkit-background-clip: padding-box;
  border-width: 1px 1px 1px 0px;
  border-top-style: solid;
  border-right-style: solid;
  border-bottom-style: solid;
  border-top-color: rgba(0,0,0,0.14902);
  border-right-color: rgba(0,0,0,0.14902);
  border-bottom-color: rgba(0,0,0,0.14902);
  -webkit-box-shadow: rgba(0,0,0,0.298039) 0px 1px 4px -1px;
  box-shadow: rgba(0,0,0,0.298039) 0px 1px 4px -1px;
  min-width: 35px;
  background-color: #ffffff;
  background-clip: padding-box;
}
.google-map-button.topo {
  background: var(--tc-main);
  color: #fff;
  border-radius: 3px;
  min-width: 20px;
  height: 20px;
  padding: 0;
  line-height: 20px;
  top: auto;
  bottom: 0 !important;
  right: 0 !important;
  margin: 20px 5px;
}
.location-control-buttons,/*old classname*/
.location-control{
  position: absolute;
  left: 9px !important;
  margin-bottom: 30px;
  opacity: .5;
  background: white;
  opacity: 1;
  border-radius: 2px;
  z-index: 1000002 !important;
}
.location-control-buttons button,/*old classname*/
.location-control button
{
  height: 20px;
  width: 20px;
  line-height: 20px;
  padding: 0;
  box-shadow: none;
}
.location-control-buttons span,/*old classname*/
.location-control span{
  color: black;
  min-width: 40px;
  display: inline-block;
  text-align: center;
}
.galleryMapCanvas:hover .location-control-buttons,/*old classname*/
.galleryMapCanvas:hover .location-control {
  opacity: 1;
}
#other-archives {
  position: absolute;
  bottom: -20px;
  right: 0;
  background: var(--tc-main);
  border-radius: 10px 10px 0 0;
  -moz-border-radius: 10px 10px 0 0;
  -webkit-border-radius: 10px 10px 0 0;
  line-height: 1.5em;
  padding: 4px 10px;
  z-index: 1;
}
#other-archives span {
  cursor: default;
}
#other-archives ul {
  padding: 0;
  margin: 0;
  display: none;
}
#other-archives li {
  list-style: none;
  margin: 0;
  padding: 0;
}
#other-archives * {
  color: #fff;
  text-decoration: none;
}
#other-archives a:hover {
  color: #ddd;
}
#other-archives>a {
  display: block;
  margin-bottom: 10px;
}
.callout_main.foot {
  margin-left: 0 !important;
  z-index: 1000;
}
.callout_main.foot div {
  font-weight: normal !important;
}
.callout_main.foot .callout_tri {
  left: auto;
  margin: 0 0 0 13px !important;
}
.callout_main.foot.icarus .callout_tri {
  left: 58%;
}
a.icarus {
  display: inline-block;
}
.ui-slider-range {
  background: #f0c1e1;
}
#topoContent.main {
  background: none;
  border: 1px solid #fff;
  color: #aaa;
}
#topoContent .text {
  position: absolute;
  width: 840px;
  padding: 0 20px 0 0;
  top: 65px;
  bottom: 65px;
  left: 50%;
  margin-left: -430px;
  min-height: 250px;
  line-height: 1.5em;
  overflow: auto;
  overflow-x: visible;
  overflow-y: auto;
}
#topoContent .text h1 {
  font-size: 1.4em;
  color: var(--tc-main);
}
#topoContent .text h2 {
  font-size: 1.1em;
  border-top: 1px solid #fff;
  padding: 1.5em 0 0 0;
  margin: 1.5em 0;
}
#topoContent .text .press li a {
  display: block;
  margin-left: 30px;
  color: #fff;
}
#topoContent .text div.press table {
  padding: 0;
  border-collapse: collapse;
  margin: 2em 0 0;
  width: 100%;
}
#topoContent .text div.press table td {
  vertical-align: top;
  padding: 1em 1em 1em 0;
  border-top: 1px solid #ddd;
}
#topoContent .text div.press table td:first-child {
  width: 30px;
}
#topoContent strong {
  color: var(--tc-main);
}
#topoContent hr {
  border: none;
  border-top: 1px solid #fff;
  background: none;
  margin: 1.7em 0;
}
#topoContent table {
  padding: 0 30px;
  font-weight: bold;
  font-size: .9em;
}
#topoContent table td {
  padding: 0 0 10px 0;
  text-align: left;
}
#topoContent table img {
  margin: 0 5px 2px 10px;
}
#topoContent figure {
  display: block;
  float: left;
  width: 350px;
  position: relative;
  margin: 0 0 15px 35px;
  font-size: .9em;
}
#topoContent figure figcaption {
  position: absolute;
  bottom: 0;
  left: 210px;
  font-weight: bold;
}
#topoContent form textarea {
  height: 100px;
}
#topoContent form label {
  width: 100px;
  display: block;
  float: left;
  margin: 0 0 5px 0;
}
#topoContent form br {
  clear: left;
  float: none;
}
#topoContent form button {
  margin-left: 100px;
  padding: 3px;
  margin-top: 5px;
}
#topoContent>.button {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 16px;
  height: 16px;
  line-height: 14px;
  padding: 0;
  text-align: center;
  text-decoration: none;
  color: #fff !important;
}
#topoContent .text > * {
  width: 50%;
  float: left;
}
#topoContent form input,
#topoContent form textarea,
.question_form input[type=text],
.question_form textarea {
  border: 1px solid var(--tc-main);
  width: 200px;
  padding: 6px 3px;
}
#topoContent form input,
#topoContent form textarea {
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
}
.press ul {
  margin: 0 0 3em 0;
  padding: 0;
}
.press li {
  list-style: none;
  border-top: 1px solid #ddd;
  padding: .5em 0;
}

/* Style for left menu text */
.IF_MENU {
    position: relative;
    top: 50%;
    font-size: 1.2em;
    -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); }


/*****************************************************/
/***
/*** Detail-Table Additional Styles
/***
/*** + .license_image - Images for the CC-Licences
/***
/*****************************************************/
img.license_image {
    margin-right: 15px;
    height: 32px;
}

/**************************************
/***
/*** Test Stile wegen Datum-Feldern, die nicht weiß werden nach Highlighten
/***
/******************************************/

.date {
  background-color: #ffffff;
}

/* Text ist rosa nach Jquery UI wechsel */
.ui-autocomplete.ui-widget-content, .ui-menu-item {
  color: white;
}



#filetable .ui-autocomplete .ui-menu-item a

{
  color: white;
}

.ui-autocomplete.ui-widget-content .ui-menu-item.ui-state-focus,
.ui-autocomplete.ui-widget-content div.ui-menu-item div.ui-state-active{
  color: white;
  background-color: var(--tc-btn-hover);
}

.ui-autocomplete.ui-widget-content {
  z-index: 999;
  background-color: var(--tc-main);
}

.ui-button {
    padding-left: 0.4em;
}

.ui-button-text {
  color: white;
}



/*************************************************************/
/***
/*** Stil overrides / changes due to new layout
/*** moving some from frontend to basic if they are
/*** used in both front- and backend
/***
/**************************************************************/



/************************************************/
/*** Header: Contents:
/*** Logo // Categories
/*** Search
/*** Timeline
/************************************************/
header {
  height: auto;
  z-index: 2;
}
#headerbar {
  position: relative;
  top: 0; right: 0; bottom: 0; left: 0;
  margin: 0; padding: 0;
  background: black;
  border-radius: 0;
}

#header_top_bar {
  position: relative;
  padding-left: 450px;
  height: 100px;
  text-align: left;
}

#header_middle_bar {
  background: var(--tc-main);
  padding-left: 450px;
  text-align: left;
  height: 60px;
}


@media  (min-width: 1230px) {

  #header_middle_bar-sticky-wrapper #header_middle_bar {
    padding: 0 0 0 450px;
  }
}

#topo_footer_logos * {
  vertical-align: middle;
}
/*** Topo logo top left styles ***/
#topo_top_logo_container {
  display: inline-block;
  position: absolute;
  left: 0;
  bottom: 0;
  height: 100px;
  text-align: right;
}
#topo_background_image {
  height: 100px;
  width: 250px;
  position: absolute;
  z-index: 1;
  top: 0; left: 0;
}

#topo_background_image.grayscale{
  filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+ */
  /*filter: gray; /* IE6-9 */
  -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
  -webkit-transition: all .6s ease; /* Fade to color for Chrome and Safari */
  -webkit-backface-visibility: hidden; /* Fix for transition flickering */
}

#topo_top_logo_container #gradient {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+25,000000+100&0+25,1+100 */
  background: -moz-linear-gradient(left,  rgba(0,0,0,0) 25%, rgba(0,0,0,1) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(left,  rgba(0,0,0,0) 25%,rgba(0,0,0,1) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right,  rgba(0,0,0,0) 25%,rgba(0,0,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=1 ); /* IE6-9 */
}
#topo_top_logo {
  height: 80px;
  position: absolute;
  left: 25px; top: 20px;
  z-index: 2;
}
#top_logo_link {
  text-decoration: none;
  position: relative;
  top: 4px;
  float: left;
}

.frontend #top_logo_link {
  float: left;
}





#topothek_head {
  margin: 0; padding: 0;
}

@media  (min-width: 1230px) {
  #top_logo_home_link img,
  #top_logo_home_link svg {
    box-sizing: initial;
  }

}

#topothek_head #topothek_title {
  position: absolute;
  text-indent: -9999px;
  left: -9999px;
}

#topo_top_logo img {
  position: relative;
  left: 11px;
  height: 70px;
  display: inline-block;
  margin-bottom: 12px;
}

#topo_top_logo .main_headline, #topo_top_logo .solo_headline {
  font-style: normal;
  font-variant-ligatures: normal;
  font-variant-caps: normal;
  font-variant-numeric: normal;
  font-variant-east-asian: normal;
  font-weight: normal;
  font-stretch: normal;
  font-size: 20px;
  line-height: 20px;
  font-family: var(--tf);
  color: white;
}
#topo_top_logo .headlines span{
  max-width: 330px
}
#topo_top_logo .headlines {
  max-width: 340px;
  opacity: 0;


}
#topo_top_logo .main_headline {
  width: max-content;


}
#topo_top_logo .main_headline span{
  white-space: nowrap;
}

#topo_top_logo .solo_headline {
  font-size: 23px;
  line-height: 41px;
  white-space: nowrap;
}
#topo_top_logo .sub_headline {
  font-size: 14px;
}

/*****************************************************/
/***
/*** Language Switcher
/***
/******************************************************/
#language_login_container {
  position: absolute;
  right: 15px; top: 0;
  text-align: right;
}

#language_switcher {
  z-index: 3;
  position: relative;
  right: 0; top: 0; left: auto;
  padding: 10px 10px 0 0;
}
#language_switcher form {
  display: inline-block;
  vertical-align: top;
}
#language_switcher #sel_language {
  background: transparent none repeat scroll 0% 0%;
  color: var(--tc-main);
  border: none;
  padding-right: 15px;
  margin-right: 5px;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance:none;
  background-size: 0px;
  text-align: right;
}
#language_switcher #sel_language option {
  margin: 0 5px 0 10px;
}
#language_switcher #sel_language option:first-child {
  margin: 5px 5px 0 10px;
}
#language_switcher #sel_language option:last-of-type {
  margin: 0 5px 5px 10px;
}
#language_switcher .facebook {
  margin-left: 10px;
}
#language_switcher .facebook img {
  display: inline-block;
  height: 16px;
}

#language_switcher #lang-select2-wrapper {
    position: relative;
    display: inline-block;
}

/* Offenes Select2-Container-Element innerhalb des Wrappers */
#language_switcher #lang-select2-wrapper .select2-container--open {
    left: auto !important;
    right: 0 !important;
}

/* Das eigentliche Dropdown rechts an den Wrapper hängen */
#language_switcher #lang-select2-wrapper .select2-dropdown {
    left: auto !important;
    right: 0 !important;
    width: auto !important;
    min-width: 100%;
    max-width: 90vw;
    white-space: nowrap;
}

#language_switcher span.selection span.select2-selection__arrow {
    left: unset;
    right: 0;
    top: -1px
}

/***********************************/
/*** Loginbox
/**********************************/
.loginBox {
  position: relative;
  padding: 5px 10px 0 0;
  z-index: 2;
  text-align: right;
}
.loginBox form {
  width: 100%;
  height: 100%
}
.loginBox .name {
  display: block;
  text-align: right;
  color: white;
}
.loginBox .name span {
  display: block;
}

.loginBox div.name > span:nth-child(2)
{
  color: darkgrey;
  padding-left: 7px;
}

.loginBox .name .linked_name {
  display: block;
  color: var(--tc-main);
}

.loginBox .admin {
  padding: 2px 10px;
  border-radius: 0;
  border: none !important;
}

.loginBox .logout {
  background: none !important;
  color: var(--tc-main);
  padding: 0;
  border: none !important;
  padding-left: 8px;
}

.loginBox a.login  {
  position: relative;
  top: -5px;
  background: none;
  color: gray;
  transition: none;
  border: none !important;
  float: none;
}
.loginBox .login:hover, .loginBox .login:focus, .loginBox .login:active {
  color: white;
  background: none !important;
  background-color: transparent;
}

.loginBox .buttons {
  position: static;
  width: 100%;
  padding-top: 10px;
  text-align: right;
}

.loginBox .buttons a {
  display: inline-block;
  float: none;
}

.loginBox .buttons .logout {
  float: none;
}


/********************************************/
/***
/*** Introduction styles
/***
/********************************************/





/**************************************************************/
/**** Media queries
/**************************************************************/
@media (max-width: 1470px) {
  #language_login_container {
    position: relative;
    text-align: right;
    top: auto; right: auto;
    background: #333333;
    height: 32px;
  }
  #language_switcher {
    display: inline-block;
    float: right;
    position: relative;
    top: 0; left: 0;
    margin: 5px 10px 5px 5px;
    padding: 4px 0;
    vertical-align: top;
  }
  #headerbar .loginBox {
    display: inline-block;
    position: relative;
    top: 0; left: 0;
    padding: 2.5px 0;
    margin: 5px;
    z-index: 2;
    height: auto;
    width: auto;
    text-align: right;
    vertical-align: top;
  }
  .loginBox .name {
    padding-right: 15px;
    padding-top: 1px;
    vertical-align: middle;
  }
  .loginBox .name, .loginBox .name span, .loginBox .name .linked_name {
    display: inline-block;
  }

  .loginBox .name .linked_name {
    margin-left: 10px;
  }

  .loginBox .buttons {
    display: inline-block;
    position: relative;
    width: auto;
    margin: 0; padding: 0;
    vertical-align: top;
  }
  .loginBox a.login {
    padding: 7px 0 0 0;
  }
  .loginBox .button.admin {
    margin-right: 10px;
  }
}
@media (max-width: 960px) {
  #mainMenuContent {
    padding-right: 50px;
  }
  #mainMenuItemContent {
    margin: 0;
  }
  #mainMenuItemContent .column.left,
  #mainMenuItemContent .column.right {
    width: 45%;
  }
  #mainMenuItemContent .column.right {
    text-align: right;
  }
  #mainMenuItemContent .introduction .content,
  #mainMenuItemContent .menuItemContentBlock .content {
    padding: 0;
    margin: 0;
    padding-left: 0px!important;
  }
  #mainMenuItemContent .content:before {
    content: '';
    display: block;
    clear: both;
  }
}




i.fa {
  color: var(--tc-main);
}
.fa.fa-search {
  font-size: 22px;
  line-height: 0;
  margin-right: 5px;
}

.fa.fa-info-circle {

}

/****/
#gallerySidepanel {
  position: absolute;
  right: 0;
  height: 100%;
  border: none;
  border-left: 1px solid #666;
  width: 100px;
  z-index: 2;
  background: #000;
  color: #fff;
  left: auto !important;
  top: 0 !important;
  bottom: 0 !important;
  overflow: visible;
/*  padding: 10px 10px 10px 10px;*/
}
#gallerySidepanel a {
  color: var(--tc-main);
  text-decoration: none;
}
#gallerySidepanel a:hover,
#gallerySidepanel a.active {
  color: #fff;
}
#gallerySidepanel .handle-indicators {
  bottom: 5px;
}
#gallerySidepanel .handle-indicators span:last-child {
  float: right;
}

/*** Max 700px ***/
@media (max-width: 700px) {
  .introduction .content {
    padding: 0;
  }
}

.break-word{
  word-wrap: break-word;
  overflow-wrap: break-word;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  hyphens: auto;
}

/*CSS Adjustments done by Philip Steyrer for Tag-Categories*/

.tags-slide-out {
  width: 100%;
  height: auto;
  background-color: #353535;
  padding-top: 30px;
  padding-bottom: 40px;
  display: none;
}

.tags-slide-out .open-all {
  width: 1120px;
  margin: 30px auto;
  color: #949494;
}

.tags-slide-out .open-all>span {
  border-bottom: 1px solid #4a4a4a;
  width: calc(100% - 90px);
  display: block;
  padding-bottom: 6px;
  cursor: pointer;
  font-size: 14px;
  font-weight: inherit;
  line-height: 22px;
}

.open-all .fa-thumbtack {
  padding-right: 10px;
  font-size: 12px;
}

#headerbar {
  z-index: 99;
  -webkit-box-shadow: 0px 0px 40px rgba(0,0,0,.8);
  -moz-box-shadow: 0px 0px 40px rgba(0,0,0,.8);
  box-shadow: 0px 0px 40px rgba(0,0,0,.8);
}

#topo_footer {
  padding-top: 30px;
  -webkit-box-shadow: inset 0px 40px 30px -40px rgba(0,0,0,.8);
  -moz-box-shadow: inset 0px 40px 30px -40px rgba(0,0,0,.8);
  box-shadow: inset 0px 40px 30px -40px rgba(0,0,0,.8);
}

.overflow-hidden {
  overflow: hidden !important;
}

.category-list {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  background-color: #353535;
  list-style: none;
  width: 1260px;
  padding: 0;
  margin: auto;
  padding: 20px 0;
}

.category-list>li {
  font-size: 14px;
  font-weight: inherit;
  line-height: 22px;
  color: #949494;
  width: 250px;
  margin: 10px 70px 10px 70px;
  padding-top: 15px;
}

.category-list>li span:hover {
  color: #fff;
}

.category-list>li span:hover [id^=svg-arrow-bottom] .st0 {
  stroke: #fff;
}

.category-list>li [id^=svg-arrow-bottom] {
  height: 6px;
  transform: rotate(180deg);
  transition: transform 500ms linear;
}

.category-list>li .arrow {
  float: right;
  line-height: initial;
  display: inline-block;
  width: 15px;
}

.category-list>li span.pinned [id^=svg-arrow-bottom] {
  transform: rotate(0deg);
  transition: transform 500ms linear;
}

.category-list>li [id^=svg-arrow-bottom] .st0{
  stroke: #949494;
}



.btn_fav_tags #svg-arrow-bottom .st0{
  stroke: white;
}


.btn_fav_tags:hover #svg-arrow-bottom .st0{
  stroke: var(--tc-btn-hover);
}




.category-list>li>span {
  display: block;
  transition: color 200ms;
  border-bottom: 1px solid #4a4a4a;
  padding-bottom: 6px;
  cursor: pointer;
}

.category-list>li.is-keyword span:hover {
  color: #fff;
  cursor: pointer;
}

.category-list>li>ul:hover {
  cursor: initial;
}

.category-list>li>ul>li:hover {
  cursor: pointer;
}

.tag-list {
  display: block;
  align-items: flex-end;
  margin-left: 0;
  list-style: none;
  font-size: 16px;
  font-weight: initial;
  color: #afafaf;
  transition: visibility 1s, opacity 300ms linear;
  padding: 0;
  margin-top: 10px;
  width: 100%;
}

.tag-list>li>span {
  width: 100%;
  padding: 10px;
  font-size: 12px;
  transition: color 200ms;
  padding-left: 0;
}

.tag-list>li>span:hover {
  color: #ffffff;
}

.tag-list.active {
  visibility: visible;
  opacity: 1;
  transition: visibility 1s, opacity 300ms linear;
}

.keyword-count {
  float: right;
  margin-right: 5px;
}

.keyword-name {
  width: 75%;
  display: inline-block;
  line-height: 1.4;
  padding: 3px 0;
}

.category-list>li>i.caret-down {
  display: none;
}

.btn_fav_tags #svg-arrow-bottom {
  height: 8px;
  width: 8px;
  transform: rotate(0deg);
  transition: transform 500ms linear;
}

.btn_fav_tags.closed #svg-arrow-bottom {
  transform: rotate(180deg);
  transition: transform 500ms linear;
}


.category-list .fa-thumbtack {
  float: right;
  font-size: 12px;
  cursor: pointer;
  margin: 4px 4px 0 0;
  visibility: visible;
  opacity: 1;
  transition: opacity 500ms linear;
}

.fa-thumbtack.hidepin {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s linear 500ms, opacity 500ms;
}

span.pinned .fa-thumbtack {
  color: #fff;
  transform: rotate(20deg);
}

span.pinned {
  color: #fff;
}

.tag-list>li.search-for-cat {
  margin-bottom: 10px;
}

.tag-list>li.search-for-cat>span {
  font-size: 10px;
  padding-left: 15px;
}

.category-list>li>span>span {
  width: calc(100% - 25px);
  display: inline-block;
}

@media (max-width: 1260px) {
  .category-list {
    width: 100%;
  }

  .tags-slide-out .open-all {
    margin: 30px 0 30px 70px;
  }
}

@media (max-width: 1170px) {
  .category-list {
    width: 800px;
  }

  .tags-slide-out .open-all {
    width: 800px;
    margin: 30px auto;
  }

  .tags-slide-out .open-all>span {
    margin: 0 70px;
    width: calc(100% - 160px);
  }
}

@media (min-width: 861px) {
  .tag-list {
    display: none;
  }
}

@media  (max-width: 860px) {
  .tags-slide-out {
    padding-bottom: 0;
  }

  .tags-slide-out .open-all {
    display: none;
  }

  .fa-thumbtack {
    display: none;
    opacity: 0;
    visibility: hidden;
  }

  .category-list {
    margin-left: 0;
    border: 0;
    width: 100%;
    padding: 10px 0 40px 0;
  }

  .category-list>li {
    position: relative;
    width: 100%;
    margin: 5px 0 0 0;
    padding-top: 0;
    border-top: none;
  }

  .category-list>li.active {
    color: #fff;
  }

  .tag-list>li.search-for-cat {
    display: block;
  }

  .tag-list>li.search-for-cat>span {
    width: calc(100% - 40px);
  }

  .category-list>li>span {
    padding: 15px 40px;
    border-bottom: 1px solid #4a4a4a;
  }

  .category-list>li>span>span.keyword-count.hide-mobile {
    display: none;
  }

  .category-list>li>span>span.keyword-count {
    padding: 0 10px 0 0;
    margin: 0;
  }

  .tag-list>li.search-for-cat span {
    padding-left: 40px;
    font-size: 10px;
  }

  .category-list>li .arrow {
    width: 20px;
  }

  .tag-list {
    width: 100%;
    margin: 0;
    padding-left: 0;
    display: none;
    transition: none;
    visibility: visible;
    opacity: 1;
    top: inherit;
    position: relative;
  }

  .tag-list.active {
    position: relative;
    display: block;
  }

  .tag-list>li {
    margin-left: 0;
    margin-bottom: 0;
    width: 100%;
  }

  .tag-list>li>span {
    padding: 15px 0 15px 60px;
    width: calc(100% - 60px);
    border-bottom: 1px solid #4a4a4a;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
  }

  .empty-keywords>ul.tag-list {
    display: none !important;
  }

  .keyword-count {
    margin-right: 50px;
  }

  .keyword-name {
    max-width: 400px;
  }
}


/*
#https://werner-zenk.de/css/radio-buttons_und_checkboxen_per_css_gestalten.php
**/
input[type="radio"] {
 -moz-appearance: None;
 -webkit-appearance: none;
 width: 16px;
 height: 16px;
 background-image: url(./../statimg/icons/topo-radiounchecked.png);
 background-size: 16px 16px;
 background-position: Center Center;
 border: none;
 outline: none;
 vertical-align: Bottom;
 margin-top: 5px;
  cursor: pointer;
}

input[type="radio"]:checked {
 background-image: url(./../statimg/icons/topo-radiochecked.png);
}

input[type="checkbox"] {
  -moz-appearance: None;
  -webkit-appearance: none;
  width: 16px!important;
  height: 16px!important;
  background-image: url(./../statimg/icons/svg-cb-black-unchecked.svg);
  background-size: 16px 16px;
  background-position: Center Center;
  border: none;
  outline: none;
  vertical-align: Middle;
  cursor: pointer;
}

input[type="checkbox"]:checked {
  background-image: url(./../statimg/icons/svg-cb-black-checked.svg);
}

input[type="checkbox"]:hover {
  opacity: 0.75;
}

input[type="checkbox"]:disabled {
  background-color: lightgrey;
}


.github-fork-ribbon:before{
  background-color:var(--tc-btn);
  opacity: .75;
}


.select2-container .select2-selection-results {
  max-height: 60px;
  overflow-y: scroll;
}


svg {
  pointer-events: none;
}

.tox .tox-collection--list .tox-collection__item--active:hover {
  background-color: #c356a0;
}
.tox .tox-collection--list .tox-collection__item--active {
  background-color: transparent;
}



div.ui-selectmenu-menu .ui-menu .ui-menu-item,
div.ui-selectmenu-menu .ui-menu .ui-state-active {
  color: black;
}



div.ui-selectmenu-menu .ui-menu .ui-menu-item {
  /* background: var(--tc-btn-text-hover); */
}

.ui-state-active,.ui-widget-content .ui-state-active,.ui-widget-header .ui-state-active,a.ui-button:active,.ui-button:active,.ui-button.ui-state-active:hover {
  border: 1px solid var(--tc-home-link-hover);
  background: var(--tc-home-link-hover);
}

.ui-widget.ui-widget-content {
  border: 1px solid lightgrey;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
}


span[role=combobox]:not(.select2-selection) span.ui-selectmenu-button .ui-icon-caret-1-s
{
  background-image: var(--tui);

}
span[role=combobox]:not(.select2-selection) span.ui-selectmenu-button.ui-selectmenu-button-open .ui-icon-caret-1-s
{
  transform: rotate(-180deg);
}



span.ui-selectmenu-icon.ui-icon{
  background-image: var(--tui);
}




span[role=combobox]:not(.select2-selection) span.ui-selectmenu-icon{
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  transition: transform 300ms linear;
  background-image: var(--tui);
}


span[role=combobox]:not(.select2-selection).ui-selectmenu-button-open span.ui-selectmenu-icon{
  -webkit-transform: rotate(-180deg);
  -moz-transform: rotate(-180deg);
  -ms-transform: rotate(-180deg);
  -o-transform: rotate(-180deg);
  transform: rotate(-180deg);
  transition: transform 300ms linear;
  background-image: var(--tui);
}


span[role=combobox]:not(.select2-selection),
span[role=combobox]:not(.select2-selection):hover,
span[role=combobox]:not(.select2-selection):active,
span[role=combobox]:not(.select2-selection):focus{
  background: white;
  color:black;
  height: 10px;
  border: 1px solid #999;
  margin-top: 2px;
}

span[role=combobox]:not(.select2-selection) span.ui-selectmenu-icon,
span[role=combobox]:not(.select2-selection):hover span.ui-selectmenu-icon,
span[role=combobox]:not(.select2-selection).ui-selectmenu-button-closed span.ui-selectmenu-icon{
  background-image: var(--tui);
  position: relative;
  top: -2px;
  /*right: px;*/
  left: 9px;
}


span[role=combobox]:not(.select2-selection) span.ui-selectmenu-text{
  position: relative;
  top: -2px;
}




div.dGroup{
  display: inline;
  right: 13px;
  position: absolute;
  color: var(--tc-btn-disabled);
}

div.dGroup:hover {
  cursor: pointer;
}




div.dGroup i{
  font-size: 14px;
  position: relative;
  left: 13px;
  top: 0px;
  padding-bottom: 1px;
  opacity: .5;
}

div.dGroup span{
  /* border-radius: 0px; */
  top: -2px;
  left: -4px;
    font-size: 6px;
  position: relative;
  color: white;
  background-color: var(--tc-btn);
  display: inline-block;
  padding-top: 1px;
  height: 10px;
    overflow: visible;
    min-width: 15px;
}

.dGroup span:before{
  content: " ";
  display: inline-block;
  width: 3px;
}
.dGroup span:after{
  content: " ";
  display: inline-block;
  width: 3px;
  height: 7px;
}