* {
    box-sizing: border-box;
}
html{ 
 height: 100%;
 background-color: white;
} 

body{
 height 100%;
 position: relative;
}

body{
    font-size: 14px;
    line-height: 18px;
    color: #8c8c8c;
    font-family: "Neue Haas Unica Regular";
    margin: 0;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
@media (min-width:982px){
body{
    background-color: black;
}
}

::-webkit-scrollbar { 
        display: none; 
}

svg{
    background-color: white;
    display: none;
    cursor: grab;
}
svg:active{
    cursor: grabbing;
}
@media (min-width:982px){
svg{
    display: block;
}
}

em {
    font-family: "Neue Haas Unica Italic";
    font-style: normal;
}

.active {
    color: #0a0a0a;
}
#start-overlay{
    display: none;
}
@media (min-width:982px){

#start-overlay{
    width: 100%;
    height: 100%;
    background-color: white;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
}
}
#start{
    width: 100%;
    height: 100vh;
    background-color: #62b7ff;
    position: absolute;
    z-index: 1;
    color: white;
    /*display: flex;*/
    /*flex-direction: column;*/
    -webkit-animation-name: animate1; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 7s; /* Chrome, Safari, Opera */
    animation-name: animate1;
    animation-duration: 7s;
    animation-iteration-count: infinite;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes animate1 {
    0%  {background-color: #62b7ff;}
    33%  {background-color: #92c46d;}
    66%  {background-color: #ffc172;}
    100%  {background-color: #62b7ff;}

}

/* Standard syntax */
@keyframes animate1 {
    0%  {background-color: #62b7ff;}
    33%  {background-color: #92c46d;}
    66%  {background-color: #ffc172;}
    100%  {background-color: #62b7ff;}
}
@media (min-width:982px){
#start{
    /*height: calc(100% - 66px);*/
    height: 100%;
    z-index: 3;
}
}
#startButtons{
    position: absolute;
    top: 12px;
    left: 0px;
    display: flex;

}
#startWatchIntro{
    padding: 6px 10px;
    border-radius: 4px;
    cursor: pointer;
    height: 32px;
    margin: 0px 0px 11px 11px;
    background-color: white;
    color: #62b7ff;
    -webkit-animation-name: animate2; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 7s; /* Chrome, Safari, Opera */
    animation-name: animate2;
    animation-duration: 7s;
    animation-iteration-count: infinite;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes animate2 {
    0%  {color: #62b7ff;}
    33%  {color: #92c46d;}
    66%  {color: #ffc172;}
    100%  {color: #62b7ff;}

}

/* Standard syntax */
@keyframes animate2 {
    0%  {color: #62b7ff;}
    33%  {color: #92c46d;}
    66%  {color: #ffc172;}
    100%  {color: #62b7ff;}
}
#startSkipIntro{
    padding: 6px 10px;
    height: 32px;
    margin: 0px 0px 11px 11px;
    cursor: pointer;
    display: flex;
}
#skipArrow{
    height: 20px;
    margin-left: 10px;
    transform: rotate(270deg);
    display: none;
}
#skipSpinner{
    height: 20px;
    margin-left: 10px;

    -webkit-animation:spin 4s linear infinite;
    -moz-animation:spin 4s linear infinite;
    animation:spin 4s linear infinite;

}
@-moz-keyframes spin { 
    100% { -moz-transform: rotate(360deg);  } 
}
@-webkit-keyframes spin { 
    100% { -webkit-transform: rotate(360deg);  } 
}
@keyframes spin { 
    100% { 
        -webkit-transform: rotate(360deg); 
        transform:rotate(360deg); 
    } 
}
#firstTitle, #secondTitle{
    font-size: 24px;
    line-height: 28px;
    font-family: "Neue Haas Unica Light";
    color: white;
    margin: 12px 12px 0;
    /*align-self: center;*/
}
@media (min-width:982px){
#firstTitle, #secondTitle{
    left:0;
    right: 0;
    top: calc(50% - 21px);
    text-align: center;
    position: absolute;
    margin:0;
    margin-left:auto;
    margin-right:auto;
    font-size: 30px;
    line-height: 34px;
}
}
#secondTitle{
    width: 91px;
    position: absolute;
    margin: 12px;
    bottom: 44px;
    top: auto;
}

@media (min-width:982px){
#secondTitle{
    right: 0;
    left:   auto;
    margin: 24px;
    bottom: 0;
}
}
#firstFooter{
    margin: 0 12px;
    font-size: 24px;
    line-height: 28px;
    font-family: "Neue Haas Unica Light";
}
@media (min-width:982px){
#firstFooter{
    bottom: 0;
    font-size: 14px;
    line-height: 18px;
    font-family: "Neue Haas Unica Regular";
    position: absolute;
    margin: 24px;
    left: 0;
}
}


#menu{
    display: none;
}
#zoomMenu{
    display: none;
}
@media (min-width:982px){
#menu{
    position: fixed;
    top: 12px;
    display: block;
}
#zoomMenu{
    position: fixed;
    top: 12px;
    right: 12px;
    display: block;
    display: flex;
    flex-direction: column;
}
}
.menuItem{
    padding: 6px 10px;
    display: inline;
    border-radius: 4px;
    cursor: pointer;
    white-space: nowrap;
    float: left;
    height: 32px;
    margin: 0px 0px 11px 11px;
    color: white;
}
.menuItem:hover{
    color: black;
}
#menu-theme-header:hover, .menu-theme:hover{
    background-color: white;
}
#menu-path-header:hover, .menu-path:hover{
    background-color: white;
}
#menu-asyl-header:hover, .menu-asyl:hover{
    background-color: white;
}

#menu-theme-header, .menu-theme{
    border: 1px solid #62b7ff;
    background-color: #62b7ff;
}
#menu-path-header, .menu-path{
    border: 1px solid #ffc172;
    background-color: #ffc172;
}
#menu-path-header.activeMenuPath{
    color: black;
    background-color: white !important;
}
#menu-asyl-header, .menu-asyl{
    border: 1px solid #92c46d;
    background-color: #92c46d;
}
.menu-path-item:hover{
    background-color: white;
}
#menu-theme-header.activeMenuTheme, .menu-theme.activeMenuTheme, .activeMenuCluster, .activeMenuPath, .activeMenuAsyl{
    background-color: white !important;
    color: black;
}
#menu-cluster-container > .menuItem{
    border: 1px solid #62b7ff;
    background-color: #62b7ff;
}
#menu-cluster-container > .menuItem:hover{
    background-color: white;
}
#menu-asyl-cluster-container > .menuItem{
    border: 1px solid #92c46d;
    background-color: #92c46d;
}
#menu-asyl-cluster-container > .menuItem:hover{
    background-color: white;
}
.menu-path-item{
    border: 1px solid #ffc172;
    background-color: #ffc172;
}
/*
#menu-theme-header:hover, #menu-theme-container .menuItem:hover, #menu-cluster-container .menuItem:hover{
    border: 1px solid #62b7ff;
}

.activeMenuTheme, .activeMenuCluster{
    border: 1px solid #62b7ff;
    color: #0a0a0a;
}
*/
/*
#menu-path-header:hover, #menu-path-container .menuItem:hover{
    border: 1px solid #ffc172;
}
*/
#menu-path-container, #menu-theme-container, #menu-cluster-container, #menu-asyl-theme-container, #menu-asyl-cluster-container{
    display: inline;
}
.menu-reset-theme, .menu-reset-path, .menu-reset-cluster, .menu-reset-themes, .menu-reset-paths, .menu-reset-asyl-themes, .menu-reset-asyl-cluster{
    cursor: pointer;
    width: 12px;
    height: 12px;
}
.menu-reset-path.hover, .menu-reset-paths.hover, .menu-reset-theme.hover, .menu-reset-themes.hover, .menu-reset-cluster.hover, .menu-reset-asyl-themes.hover, .menu-reset-asyl-cluster.hover{
    display: none;
}
.menu-reset-container{
    float: left;
    margin: 11px 4px 11px 15px;
}
.menu-reset-container:hover .menu-reset-path, .menu-reset-container:hover .menu-reset-paths, .menu-reset-container:hover .menu-reset-theme, .menu-reset-container:hover .menu-reset-themes, .menu-reset-container:hover .menu-reset-asyl-themes, .menu-reset-container:hover .menu-reset-cluster, .menu-reset-container:hover .menu-reset-asyl, .menu-reset-container:hover .menu-reset-asyl-cluster{
    display:none !important;
}
.menu-reset-container:hover .menu-reset-path.hover, .menu-reset-container:hover .menu-reset-paths.hover, .menu-reset-container:hover .menu-reset-theme.hover, .menu-reset-container:hover .menu-reset-themes.hover, .menu-reset-container:hover .menu-reset-asyl-themes.hover, .menu-reset-container:hover .menu-reset-cluster.hover, .menu-reset-container:hover .menu-reset-asyl.hover, .menu-reset-container:hover .menu-reset-asyl-cluster.hover{
    display: block !important;
}

/*
.menu-reset-theme:hover, .menu-reset-path:hover, .menu-reset-cluster:hover, .menu-reset-themes:hover, .menu-reset-paths:hover{
    color: #0a0a0a;
}
*/
/*.menu-reset-theme:hover, .menu-reset-path:hover, .menu-reset-cluster:hover, .menu-reset-themes:hover, .menu-reset-paths:hover{
    color: #0a0a0a;
}*/

#footer{
    position: fixed;
    bottom: 0;
    height: 30px;
    width: 100%;
}
#leftMenu{
    width: 100%;
    position: fixed;
    bottom: 0;
    background-color: white;
    border-right: 1px solid #d2d2d2;
    z-index: 2;
}
@media (min-width:982px){
#leftMenu{
    width: calc(100% - 529px);
}
}
#leftMenuMenu{
    display: none;
}

#leftMenuMenu, #workbenchMenu{
    margin: 12px;
}
@media (min-width:982px){
#leftMenuMenu, #workbenchMenu{
    margin: 24px;
    display: block;
}
}

#leftMenuMenu > span:hover, #workbenchMenu > span:hover{
    color: #0a0a0a;
}
#leftMenuMenu > span, #workbenchMenu > span{
    margin-left: 12px;
    cursor: pointer;
}
#leftMenuMenu > span:first-of-type, #workbenchMenu > span:first-of-type{
    margin-left: 0;
}

#leftMenuContentIndex{
    display: none;
    border-top: 1px solid #d2d2d2;
    height: 100%;
}
#leftMenuContentIndexFilters{
    margin: 0 12px;
    padding: 12px 0;
    border-bottom: 1px solid #d2d2d2;
}
#leftMenuContentIndexFilters > span{
    margin-left: 12px;
    cursor: pointer
}
#leftMenuContentIndexFilters > span:hover{
    color: #0a0a0a;
}
#leftMenuContentIndexFilters > span:first-of-type{
    margin-left: 0;
}
#leftMenuContentLiteratur, #leftMenuContentVideos{
    display: none;
}
#leftMenuContentManual, #leftMenuContentHelp{
    display: none;
}
#leftMenuContentMethods{
    display: none;
}
.leftMenuContentMethodsContainer{
    display: none;
}
#leftMenuContentImprint{
    display: none;
}
#workbenchContentImprint{
    display: none;
}
#leftMenuContentPrivacy{
    display: none;
}
#workbench{
    width: 100%;
    left: 0;
    
    position: fixed;
    bottom: 0;
    background-color: white;
    border-left: 1px solid #d2d2d2;
    margin-left: -1px;
    margin-top: -1px;
    z-index: 2;
    display: none;
}
@media (min-width:982px){
#workbench{
    /*width: calc(34% + 1px);*/
    width: 530px;
    /*left: 66%;*/
    left: calc(100% - 529px);
    bottom: 0;
}

}

.border-top{
    border-top: 1px solid #d2d2d2;
}
.workbenchArrows{
    float: right;
    display: none;
}
.workbenchArrowDown{
    cursor: pointer;
    float: right;
    display: block;
    width: 24px;
    height: 24px;
    margin-top: -3px;
}
.workbenchArrowDown.hover{
    display: none !important;
}
@media (min-width:982px){
.workbenchArrows:hover .workbenchArrowDown{
    display: none !important;
}
.workbenchArrows:hover .workbenchArrowDown.hover{
    display: block !important;
}
}
#workbenchContentQuestionDetail{
    height: calc(100% - 42px);
    width: 100%;
    display: none;
    overflow: auto;
    border-top: 1px solid #d2d2d2;
}
#workbenchContentQuestions{
    display: none;
    border-top: 1px solid #d2d2d2;
    width: 100%;
    height: 100%;
    overflow: auto;
    webkit-overflow-scrolling: touch;
    height: calc(100% - 42px);
}
@media (min-width:982px){
#workbenchContentQuestions{
    overflow: auto;
    height: 100%;
}
#workbenchContentQuestionDetail{
    height: calc(100% - 66px);
}
#workbenchContentQuestions{
    height: calc(100% - 66px);
}
}
#workbenchContentRegister, #newWorkbenchContentRegister{
    display: none;
    border-top: 1px solid #d2d2d2;
    padding: 12px;
}
#workbenchContentLogin, #newWorkbenchContentLogin{
    display: none;
    border-top: 1px solid #d2d2d2;
    padding: 12px;
}
#newWorkBenchLogout{
    display: none;
}
#workbenchContentLoginMessage, #workbenchContentRegisterMessage{
    padding-left: 0;
    color: black;
}
#login-form, #register-form, #new-login-form, #new-register-form{
    border: none;
    font-family: "Neue Haas Unica Regular";
    background-color: transparent;
    padding: 0;
    position: relative;
    margin: 0;
}
.formFields > input{
    background-color: white;
    border: 1px solid #d2d2d2;
    font-family: "Neue Haas Unica Regular";
    font-size: 14px;
    padding: 0 4px;
    margin: 0;
}
.formFields{
    border-bottom: 1px solid #d2d2d2;
    padding: 0;
}
.formLabel{
    width: 100px;
    display: inline-block;
    padding-bottom: 12px;
}
#new-login-form > input[type="submit"], #new-register-form > input[type="submit"]{
    color: #8c8c8c;
    cursor: pointer;
    border: none;
    font-family: "Neue Haas Unica Regular";
    font-size: 14px;
    line-height: 18px;
    background-color: transparent;
    padding: 0;
    margin-top: 12px;
    box-shadow: none;
    outline-style: none;

}
#login-form > input[type="submit"]:hover, #register-form > input[type="submit"]:hover{
    color: black;
}
#agreed{
    /*display: inline !important;*/
    margin-right: 10px !important;
    /*margin-bottom: 12px !important;*/
    float: left;
    height: 20px;
}

label[for=agreed]{
    color: black;
    display: block;
}

#workbenchContentLoginRegister{
    cursor: pointer;
    position: absolute;
    display: inline;
    right: 0;
    margin-top: 12px;
    /*bottom: 0;*/
}
#workbenchContentLoginRegister:hover{
    color: black;
}

#imprint-link{
    color: #8c8c8c;
    cursor: pointer;
}

#QuestionList{
}
.QuestionListItem{
    color: black;
    font-size: 24px;
    line-height: 28px;
    font-family: "Neue Haas Unica Light";
    padding: 10px 12px 12px; 
    border-bottom: 1px solid #d2d2d2;
    position: relative;
}
@media (min-width:982px){
.QuestionListItem{
    font-size: 30px;
    line-height: 34px;
}
.QuestionListItem:hover{
    background-color: #62b7ff;
}
}
.questionListItemTitle{
    width: calc(100% - 40px);
}
.questionListItemArrowDown, .questionListItemArrowUp{
    right: 12px;
    width: 24px;
    height: 24px;
    position: absolute;
    top: 16px;
    cursor:pointer;
}
@media (min-width:982px){
.questionListItemArrowDown, .questionListItemArrowUp{
    right: 24px;
}
}
.questionListItemArrowDown.hover, .questionListItemArrowUp.hover{
    display: none;
}
@media (min-width:982px){
.questionListItemArrows:hover .questionListItemArrowDown, .questionListItemArrows:hover .questionListItemArrowUp{
    display: none;
}
.questionListItemArrows:hover .questionListItemArrowDown.hover, .questionListItemArrows:hover .questionListItemArrowUp.hover{
    display: block;
}
}
.questionListItemArrowDown{
    right: 16px;
}
.detailClickable, .detailToLogin{
    cursor: pointer;
}

#detailTitle{
    font-size: 30px;
    line-height: 34px;
    font-family: "Neue Haas Unica Light";
    padding: 12px;
    color: black;
    position: relative;
}
#workbenchLogin{
}
#workbenchLogout{
    display:none
}
#leftMenuImprint, #leftMenuPrivacy{
    float: right;
}
#workbenchImprint{
    float: right;
}
@media (min-width:982px){
#workbenchImprint{
    display: none;
}
}
.leftMenuArrows{
    float: right;
    display: none;
}
.leftMenuArrowDown{
    cursor: pointer;
    float: right;
    display: block;
    width: 24px;
    height: 24px;
}
.leftMenuArrowDown.hover{
    display: none !important;
}
.leftMenuArrows:hover .leftMenuArrowDown{
    display: none !important;
}
.leftMenuArrows:hover .leftMenuArrowDown.hover{
    display: block !important;
}


#leftMenuContentIndexTable{
    display: table;
    margin: 0 12px 12px;
    width: calc(100% - 24px);
    table-layout: fixed;
    color: black;
}
#tableScrollContainer{
    height: calc(100% - 148px);
    overflow: auto;
    padding: 12px 0 0;
}


.indexTableRow{
    cursor: pointer;
    display: table-row;
    color: #0a0a0a;
}
.indexTableRow:hover{
    color: #8c8c8c;
}
.indexTableRow > div{
    display: table-cell;
}

.indexTableTitle{
    padding-right: 10px
}
.indexTableCat{
    width: 50px;
}
.indexTableTime{
    width: 70px;
    text-align: right;
}

#leftMenuContentIndexTableHeader{
    margin: 0 12px;
    padding: 12px 0 12px 0;
    border-bottom: 1px solid #d2d2d2;
    display: table;
    width: calc(100% - 24px);
}

#leftMenuContentIndexTableHeader > span{
    cursor: pointer;
}
#leftMenuContentIndexTableHeader > span:hover{
    color: black;
}




#indexTableOrderTitle{
    display: table-cell;
}
#indexTableOrderCat{
    display: table-cell;
    width: 50px;
    padding-left: 26px;
}
#indexTableOrderTime{
    display: table-cell;
    width: 96px;
    text-align: right;
    padding-left: 26px;
}

@media screen and (min--moz-device-pixel-ratio:0) {
    #indexTableOrderTime{
        padding-left: 0;
        width: 79px;
    }
}
.tableOrderDown, .tableOrderUp{
    width: 12px;
    margin: 0 .5em;
}

#footerText, #pathText, #footerASText{
    display:none;
    position: fixed;
    bottom: 67px;
    width: 100%;
    color: black;
    /*background-color: #99d9ff;*/
    background-color: white;
    border-top: 1px solid #d2d2d2;
}


#pathText, #footerASText{
    /*background-color: #fff172;*/
}

#footerTextHeader, #pathTextHeader, #footerASTextHeader{
    display: inline;
}
#footerTextContainer, #pathTextContainer, #footerASTextContainer{
    padding: 24px;
    cursor: pointer
}

#footerTextText, #pathTextText, #footerASTextText{
    display: none;
    padding: 12px;
    border-top: 1px solid #d2d2d2;
}
#footerTextText:empty, #pathTextText:empty, #footerASTextText:empty{
    display: none !important;
}
#pathTextText{
    width: 100%;
}
.pathTextNextArrows, .pathTextPrevArrows{
    display: none;
}
.pathTextNext, .pathTextPrev{
    height: 12px;
    margin: 12px;
    cursor: pointer;
    position: absolute;
    top: calc(50vh - 50px);
    width: 24px;
    height: 24px;
}
.pathTextNext{
    right: 0;
}
.pathTextNext.hover, .pathTextPrev.hover{
    display: none !important;
}

.pathTextPrevArrows:hover .pathTextPrev, .pathTextNextArrows:hover .pathTextNext{
    display: none !important;
}
.pathTextPrevArrows:hover .pathTextPrev.hover, .pathTextNextArrows:hover .pathTextNext.hover{
    display: block !important;
}

#pathTextFlexContainer{
}
.footerTextArrows, .footerASTextArrows, .pathTextArrows{
    float: right;
}

.footerTextArrowUp, .footerTextArrowDown, .pathTextArrowUp, .pathTextArrowDown, .footerASTextArrowUp, .footerASTextArrowDown{
    float: right;
    width: 24px;
    height: 24px;
}
.footerTextArrowDown, .pathTextArrowDown, .footerASTextArrowDown{
}
.footerTextArrowDown.hover, .footerTextArrowUp.hover, .footerASTextArrowDown.hover, .footerASTextArrowUp.hover, .pathTextArrowDown.hover, .pathTextArrowUp.hover{
    /*display: none !important;*/
    display:none;
}
#footerTextContainer:hover .footerTextArrowDown, #footerASTextContainer:hover .footerASTextArrowDown, #pathTextContainer:hover .pathTextArrowDown{
    display: none !important;
}
#footerTextContainer:hover .footerTextArrowUp, #footerASTextContainer:hover .footerASTextArrowUp, #pathTextContainer:hover .pathTextArrowUp{
    display: none !important;
}
#footerTextContainer:hover .footerTextArrowDown.hover, #footerASTextContainer:hover .footerASTextArrowDown.hover, #pathTextContainer:hover .pathTextArrowDown.hover{
    display: block !important;
}
#footerTextContainer:hover .footerTextArrowUp.hover, #footerASTextContainer:hover .footerASTextArrowUp.hover, #pathTextContainer:hover .pathTextArrowUp.hover{
    display: block !important;
}




#detailDiv{
    display:none;
    position: absolute;
    top: 0;
    left: 0;
    background-color: black;
    color: white;
    z-index: 100;
    font-family: "Neue Haas Unica Light";
    min-width: 100%;
    min-height: 100%;
    font-size: 24px;
    line-height: 28px;

}
#detailDiv.intro{
    /*background-color: #62b7ff;*/
}
@media (min-width:982px){
#detailDiv{
    font-size: 30px;
    line-height: 34px;
}
}
.detailDivCloseIcons{
    padding-top: 12px;
}
@media (min-width:982px){
.detailDivCloseIcons{
    padding-top: 24px;
}
}
.detailDivClose{
    position: fixed;
    right: 12px;
    cursor: pointer;
    width: 24px;
    height: 24px;
    z-index: 100;
}
@media (min-width:982px){
.detailDivClose{
    right: 24px;
}
}
.detailDivClose.hover{
    display: none;
}
@media (min-width:982px){
.detailDivCloseIcons:hover .detailDivClose{
    display: none;
}
.detailDivCloseIcons:hover .detailDivClose.hover{
    display: block;
}
}

.detailDownArrows{
    float: right;
    margin-top: 5px;
}
@media (min-width:982px){
.detailDownArrows{
    margin-top: 7px;
}
}
.detailDownArrow{
    display: inline;
    float: right;
    width: 24px;
    height: 24px;
}

.detailDownArrow.hover{
    display: none;
}
@media (min-width:982px){
#videoTitle:hover .detailDownArrow{
    display: none;
}
#videoTitle:hover .detailDownArrow.hover{
    display: block;
}
}

#detailTopContainer{
    height: calc(100vh - 24px);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
@media (min-width:982px){
#detailTopContainer{
    height: calc(100vh - 47px);
}
}

#videoVideo{
    display: block;
    width: calc(100% - 24px);
    margin: auto;
}
@media (min-width:982px){
#videoVideo{
    width: 105vh;
}
}

#videoTitle, #graphicTitle{
    margin-top: 24px;
    border-top: 1px solid white;
    padding: 12px 12px 0;
    cursor: pointer;
}
@media (min-width:982px){
#videoTitle, #graphicTitle{
    padding: 19px 24px 0;
}
}
#detailDivVideo, #detailDivGraphic, #detailDivGesetz{
    padding: 0 12px 12px 12px;
}
@media (min-width:982px){
#detailDivVideo, #detailDivGraphic, #detailDivGesetz{
    padding: 0 60px 24px 24px;
}
}
#gesetzTitle p{
    margin: 0;
}
#videoText p{
    margin-bottom: 0;
}
#videoTitle p, #graphicTitle p{
    margin: 0;
    float: left;
    max-width: calc(100% - 24px);
}
#graphicImage, #linkImage{
    display: block;
    margin-left: auto;
    margin-right: auto;
    height: calc(100% - 96px);
    min-height: 0;
    max-width: 100%;
}

#detailDivVideo, #detailDivGraphic, #detailDivGesetz a{
    color: #8c8c8c;
    text-decoration: none;
}
#detailDivVideo, #detailDivGraphic, #detailDivGesetz a:hover{
    color: white;
}
/*#detailElements{
    display: none;
}

#detailResponse{
    display:none;
}*/
#detailResponseContainer{
    display: none;
}
#detailResponseListContainer{
    display: none;
}

@keyframes wiggle {
    0% { transform: rotate(0deg); }
   25% { transform: rotate(2deg); }
   50% { transform: rotate(0deg); }
   75% { transform: rotate(-2deg); }
   100% { transform: rotate(0deg); }
}

.wiggle {
  animation: wiggle .2s infinite;
}

#leftMenuContentGlossar{
    display: none;
    border-top: 1px solid #d2d2d2;
    overflow: auto;
    height: calc(100% - 66px);
}

#glossaryList{
    margin: 0 12px;
    color: black;
}

.glossaryListItem{
    border-bottom: 1px solid #d2d2d2;
    padding: 12px 0;
}


.glossaryListItemTitle{
    cursor: pointer;
    color: #8c8c8c;
}
.glossaryListItemTitle > p{
    margin: 0;
}
.glossaryListItemTitle:hover{
    color: #0a0a0a;
}
.glossaryListItemText{
    margin-top: 12px;
    display: none;
}
.glossaryListItemText p{
    margin: 0;
}
.glossaryListItemText a{
    color: #8c8c8c;
    text-decoration: none;
}
.glossaryListItemText a:hover{
    color: #0a0a0a;
}

#leftMenuContentLiteratur, #leftMenuContentVideos{
    border-top: 1px solid #d2d2d2;
    height: 100%;
}
#leftMenuContentLiteraturFilters, #leftMenuContentVideosFilters{
    margin: 0 12px;
    padding: 12px 0;
    border-bottom: 1px solid #d2d2d2;
}
#leftMenuContentLiteraturFilters > span, #leftMenuContentVideosFilters > span{
    cursor: pointer;
    margin-right: 12px;
}
#leftMenuContentLiteraturFilters > span:hover, #leftMenuContentVideosFilters > span:hover{
    color: black;
}
#leftMenuContentBiblioScroll, #leftMenuContentVideosScroll{
    overflow: auto;
    height: calc(100% - 109px);
}
#leftMenuContentBiblioList, #leftMenuContentVideosList{
    color: black;
    margin-right: 12px;
}
.biblioListItem, .videosListItem, .methodsListItem{
    padding-bottom: 12px;
    margin: 12px 12px 0 12px;
    border-bottom: 1px solid #d2d2d2;
    /*height: 60px;*/
    overflow:hidden;
    width: calc(100% - 12px);
}
.methodsListItem{
    border-bottom: none;
    margin-left: 0;
    margin-top: 0;
    padding-bottom: 0;
    display: flex !important;
}
.methodsListItem::before{
    content: '•  ';
}
a.methodsListItem{
    color: #8c8c8c !important;
}
a.methodsListItem:hover{
    color: black !important;
}
.biblioListItem.hoverable, .videosListItem.hoverable, .methodsListItem.hoverable{
    cursor: pointer;
}
.biblioListItem.hoverable:hover, .videosListItem.hoverable:hover, .methodsListItem.hoverable:hover{
    color: #8c8c8c;
}
.biblioListItemImage, .videosListItemImage{
    max-height: 48px;
    max-width: 100%;
}

.biblioListItemImageContainer, .videosListItemImageContainer, .methodsListItemImageContainer{
    text-align:center;
    width: 48px;
    min-height: 1px;
    float: left;
    margin-right: 12px;
}
.biblioListItemTitle, .videosListItemTitle, .methodsListItemTitle{
    /*margin-left: 12px;*/
    /*float: left;*/
    width: calc(100% - 75px);
    display: inline-block;
}
.biblioListItemTitle > p, .videosListItemTitle > p, .methodsListItemTitle > p{
    margin: 0;
}

#leftMenuContentManualContainer, #leftMenuContenHelpContainer{
    margin: 0 12px;
    padding: 12px 0;
}
.leftMenuContentMethodsContainer{
    padding: 10px 0px;
    border-top: 1px solid #d2d2d2;
    overflow: auto;
    height: calc(100% - 42px);
}
.twelvepx{
    height: 8px;
}
#leftMenuContentImprint, #leftMenuContentPrivacy, #leftMenuContentManual, #workbenchContentImprint, #leftMenuContentHelp, #leftMenuContentMethods{
    border-top: 1px solid #d2d2d2;
    overflow: auto;
    height: calc(100% - 42px);
    overflow: auto;
    color: black;
    font-size: 14px;
    line-height: 18px;
}
@media (min-width:982px){
#leftMenuContentImprint, #leftMenuContentPrivacy, #leftMenuContentManual, #leftMenuContentHelp, #workbenchContentImprint, #leftMenuContentMethods{
    height: calc(100% - 66px);
}
}
#leftMenuContentMethods{
    padding: 0 12px;
}
#leftMenuContentImprint p, #leftMenuContentPrivacy p, #leftMenuContentManual p, #leftMenuContentHelp p, #workbenchContentImprint p, #leftMenuContentMethods p{
    margin: 0;
}
#leftMenuContentManual hr, #leftMenuContentHelp hr, #leftMenuContentMethods hr{
    background: #d2d2d2;
    border: 0;
    height: 1px;

}
#leftMenuContentMethods hr{
    margin: 12px 0 10px;
}
#leftMenuContentManual a, #leftMenuContentHelp{
    color: #8c8c8c;
    text-decoration: none;
}
#leftMenuContentMethods a{
    color: #0a0a0a;
    text-decoration: none;
    display: block;
}
#leftMenuContentMethods a:hover{
    color: #8c8c8c;
}
#leftMenuContentManual a:hover, #leftMenuContentHelp a:hover{
    color: #0a0a0a;
}
#leftMenuContentMethodsFilters{
    margin: 12px 0px;
}
#leftMenuContentMethodsFilters > span{
    color: #8c8c8c;
    text-decoration: none;
    cursor: pointer;
    margin-left: 12px;
}
#leftMenuContentMethodsFilters > span:first-child{
    margin-left: 0;
}
#leftMenuContentMethodsFilters > span:hover, #leftMenuContentMethodsFilters > span.active{
    color: #0a0a0a;
}
#leftMenuContentImprintContainer, #leftMenuContentPrivacyContainer{
    margin: 0 12px;
    padding: 12px 0;
}
#leftMenuContentImprintContainer a{
    color: #8c8c8c;
    text-decoration: none;
}
#leftMenuContentImprintContainer a:hover{
    color: #0a0a0a;
}

#detailElementContainerTitle:hover, #detailResponseContainerTitle:hover, #detailResponseListContainerTitle:hover {
    color: black;
}
#detailElementContainerTitle{
    margin-right: 12px;
    margin-left: 12px;
    cursor: pointer;
}
#detailElementContainer{
}
.detailElementsItems{
    margin: 12px 12px 12px 0px;
    width: 141px;
    text-align: center;
    cursor: pointer;
    font-size: 10px;
    line-height: 12px;
}
.detailElementsItems:nth-child(2n+2){
    margin-right: 0;
}
@media (min-width:982px){
.detailElementsItems{
    width: 160px;
}
.detailElementsItems:nth-child(3n+4){
    margin-right: 0;
}
}
.detailElementsItems:hover .detailElementsItemTitles{
    color: #0a0a0a;
}
.detailElementsItemImages{
    max-height: 80px;
    margin-bottom: 12px;
}
.detailElementsItemImageContainer{
    position: relative;
    display:inline;
}
.detailElementsItemRemove{
    cursor: pointer;
    position: absolute;
    top: -84px;
    right: -10px;
    display: none;
    width: 20px;
    height: 20px;
}
#detailResponseListContainerTitle{
    display: none;
}
#detailResponseContainerTitle, #detailResponseListContainerTitle{
    cursor: pointer;
}
#detailElementContainer, #detailResponseContainer, #detailResponseListContainer{
    margin: 0 12px;
    padding: 12px 0;
}
#detailResponseList{
    border-top: 1px solid #d2d2d2;
}
.detailResponseListItemEmpty{
    padding: 12px 0;
}
.detailResponseListItemEmpty > .responseListItemText{
    font-size: inherit;
    line-height: inherit;
    padding-bottom: 12px;
    font-family: inherit;
}
.detailResponseListItem{
    border-bottom: 1px solid #d2d2d2;
    padding: 12px 0;
}
.responseListItemText{
    font-size: 30px;
    line-height: 34px;
    font-family: "Neue Haas Unica Light";
    padding-bottom: 12px;
}
.responseListItemUser{
    margin-right: 12px;
}
#detailElements{
    border-top: 1px solid #d2d2d2;
    border-bottom: none;
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 12px
}
@media (min-width:982px){
#detailElements{
    border-bottom: 1px solid #d2d2d2;
}
}
#detailResponse{
    border-top: 1px solid #d2d2d2;
    border-bottom: 1px solid #d2d2d2;
    margin-bottom: 12px;
}
#detailSaveContainer{
    float: right;
    margin-bottom: 24px;
    display: none;
}
@media (min-width:982px){
#detailSaveContainer{
    display: block;
}
}
#detailSaveContainer > button{
    background-color: transparent;
    border:none;
    color: #8c8c8c;
    margin: 0;
    padding: 0;
    cursor: pointer;
    font-family: "Neue Haas Unica Regular";
    font-size: 14px;
    line-height: 18px;
    margin-left: 12px;
    box-shadow: none;
    outline-style: none;
}
#detailSaveContainer > button:hover{
    color: black;
}
.detailSaveMessage{
    float: left;
    color: black;
    clear: left;
}

.detailSubmit{
    display: none;
}

#detailText{
    border: none;
    min-width: 100%;
    font-size: 30px;
    line-height: 34px;
    font-family: "Neue Haas Unica Light";
    color: black;
    margin: 12px 0;
}
#detailText:focus {
    outline: none !important;
}
#fileInput{
    width: 0.1px;
	height: 0.1px;
	opacity: 0;
	overflow: hidden;
	position: absolute;
	z-index: -1;
}
#fileInputLabel{
    cursor: pointer;
}
#fileInputLabel:hover{
    color: black;
}
#detailUploads{
    float: left;
}
#detailUploadsMessage{
    color: black;
}
#detailUploadForm{
    margin: 0;
}
#detailUploadsFiles{
    padding: 12px 0;
    border-top: 1px solid #d2d2d2;
    display: none;
}
/*
.detailUploadsFilesItems{
    margin-bottom: 12px;
}
*/
.detailUploadsFilesItems a{
    color: #8c8c8c;
    text-decoration: none;
}
.detailUploadsFilesItems a:hover{
    color: black
}
/*
.detailUploadsFilesItems:first-child{
    margin-bottom: 0;
}
*/
.filesItemsRemove{
    float: right;
    cursor:pointer;
    width: 12px;
    height: 12px;
    margin-top: 4px;
}
.filesItemsRemove.hover{
    display: none;
}
.filesItemsRemoveContainer:hover .filesItemsRemove{
    display: none;
}
.filesItemsRemoveContainer:hover .filesItemsRemove.hover{
    display: inline;
}

.addrects{
    pointer-events: visible;
}
.placeHolder{
    margin: 12px 0;
}
.blurElements{
    pointer-events: all;
}

#selected-elements *{
    pointer-events: none !important;
}
#newWorkbench{
    width: 100%;
    left: 0;
    
    position: fixed;
    bottom: 0;
    background-color: white;
    border-left: 1px solid #d2d2d2;
    margin-left: -1px;
    margin-top: -1px;
    z-index: 2;
}
#newWorkBenchContent{
    display: none;
    height: calc(100% - 42px);
}
#newWorkBenchContent.visible{
    display: block;
    height: calc(100vh - 67px);
}
@media (min-width:982px){
#newworkbench{
    /*width: calc(34% + 1px);*/
    width: 530px;
    /*left: 66%;*/
    left: calc(100% - 529px);
    bottom: 0;
}

}

#newWorkbenchMenu{
    margin: 12px;
}
@media (min-width:982px){
#newWorkbenchMenu{
    margin: 0;
    border-bottom: 1px solid #d2d2d2;
    padding: 23.5px;
    display: block;
}
}

#newWorkbenchMenu > span:hover{
    color: #0a0a0a;
}
#newWorkbenchMenu > span{
    margin-left: 12px;
    cursor: pointer;
}
#newWorkbenchMenu > span:first-of-type{
    margin-left: 0;
}


#newWorkBenchArrows{
    float: right;
    display: none;
}
#newWorkBenchArrows.visible{
    display: block;
}
#newWorkBenchArrowDown{
    cursor: pointer;
    float: right;
    display: block;
    width: 24px;
    height: 24px;
    margin-top: -3px;
}
#newWorkBenchArrowDown.hover{
    display: none !important;
}
@media (min-width:982px){
#newWorkBenchArrows:hover #newWorkBenchArrowDown{
    display: none !important;
}
#newWorkBenchArrows:hover #newWorkBenchArrowDown.hover{
    display: block !important;
}
}


#plus, #minus{
    width: 24px;
    margin-bottom: 6px;
}
#plushover, #minushover{
    display: none;
    cursor: pointer;
    margin-bottom: 6px;
}
#plusContainer:hover #plushover, #minusContainer:hover #minushover{
    display: block;
}
#plusContainer:hover #plus, #minusContainer:hover #minus{
    display: none;
}
#questionList, #questionDetail{
    display: none;
    height: 100%;
    overflow: scroll;
}
#questionDetail{
    margin: 0 12px;
}
#questionTemplate{
    display: none;
}
#questionTabs{
    display: flex;
    flex-direction: row;
}
#tabContainer3 #options{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;

}
#tabContainer3 > #selection{
    padding: 12px 0;
    border-bottom: 1px solid #d2d2d2; 
    overflow: hidden;
}
#tabContainer3 > #selection *{
    /*display: flex;
    flex-direction: row;
    flex-wrap: wrap;*/
}
#tabContainer3 > #selection > p{
    color: black;
    margin-top: 0;
}
#tabContainer3 > #selection > #selectionContainer{
    margin-left: -5px;
}

#tabContainer3 .categories > a, #tabContainer3 .subCategories > a, #tabContainer3 .subSubCategories > a{
    padding: 10px;
    color: white;
    background-color: green;
    border: 1px solid green;
    margin: 5px;
    border-radius: 5px;
    float: left;
    white-space: nowrap;
    cursor: pointer;
}
#tabContainer3 #Narrative.categories a{
    background-color: #ffc172;
    border: 1px solid #ffc172;
}
#tabContainer3 #Narrative.categories a:hover{
    background-color: white;
    color: #ffc172;
}
#tabContainer3 #Narrative.categories.active > a, #tabContainer3 #Narrative .subCategories.active > a, #tabContainer3 #Narrative .subSubCategories.active > a{
    background-color: white;
    color: #ffc172;
}


#tabContainer3 #Wege.categories a{
    background-color: #92c46d;
    border: 1px solid #92c46d;
}
#tabContainer3 #Wege.categories a:hover{
    background-color: white;
    color: #92c46d;
}
#tabContainer3 #Wege.categories.active > a, #tabContainer3 #Wege .subCategories.active > a, #tabContainer3 #Wege .subSubCategories.active > a{
    background-color: white;
    color: #92c46d;
}


#tabContainer3 #Themen.categories a{
    background-color: #62b7ff;
    border: 1px solid #62b7ff;
}
#tabContainer3 #Themen.categories a:hover{
    background-color: white;
    color: #62b7ff;
}
#tabContainer3 #Themen.categories.active > a, #tabContainer3 #Themen .subCategories.active > a, #tabContainer3 #Themen .subSubCategories.active > a{
    background-color: white;
    color: #62b7ff;
}

#tabContainer3 .categories > a:hover, #tabContainer3 .subCategories > a:hover, #tabContainer3 .subSubCategories > a:hover{
    background-color: white;
    color: green;
}
#tabContainer3 .categories.active > a, #tabContainer3 .subCategories.active > a, #tabContainer3 .subSubCategories.active > a{
    background-color: white;
    color: green;
}
#tabContainer3 > #addFile{
    border-bottom: 1px solid #d2d2d2; 
}
#tabContainer3 .fileElement{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
#tabContainer3 .fileElement > p{
    margin: 0
}
#tabContainer3 .fileElement > .fileRemove{
    cursor: pointer;
}
#tabContainer3 .fileElement > .fileRemove:hover{
    color: black;
}
#tabContainer3 #fileTemplate{
    display: none;
}
#tabContainer3 #fileList{
    margin-top: 10px;
    margin-bottom: 12px;
}
#fileUploadForm{
    margin-bottom: 12px;
}


#tabContainer2{
    flex-direction: column;
}
#tabContainer2 > #elements{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    border-bottom: 1px solid #d2d2d2; 
    padding: 10px 0 12px 0;
}
#tabContainer2 > #save, #tabContainer3 > #submit{
    display: flex;
    justify-content: flex-end;
}
#tabContainer2 > #save > div, #tabContainer3 > #submit > div{
    margin: 12px 0 12px 12px;
    cursor: pointer
}
#tabContainer2 > #save > div:hover, #tabContainer3 > #submit > div:hover{
    color: black;
}

#tabContainer2 #elementTemplate{
    display: none;
}
#tabContainer2 .element{
    margin: 12px 12px 12px 0px;
    width: 160px;
    width: 152px;
    text-align: center;
    cursor: pointer;
    font-size: 10px;
    line-height: 12px;
    position: relative;
}
#tabContainer2 .elementImageContainer{
    display: inline;
    position: relative;
}
#tabContainer2 .elementImageContainer > img{
    max-height: 80px;
    margin-bottom: 12px;
}
#tabContainer1{
    color: black;
}
#tabContainer1 > div{
    padding: 12px 0;
    border-bottom: 1px solid #d2d2d2; 
}
.questionItems{
    display: flex;
}
.questionItems > img{
    max-height: 80px;
    margin-bottom: 12px;
}
.questionItems > .text{
    margin-left: 12px;
}
#questionText > p, #questionItems > p{
    margin-top: 0;
}

#categories{

}
/*.subCategories{
    display: none;
}*/
/*.subSubCategories{
    display: none;
}*/

.questionNode{
    font-family: "Neue Haas Unica Light";
    padding: 10px 12px 12px;
    border-bottom: 1px solid #d2d2d2;
    position: relative;
    cursor: pointer;
    color: black;
    font-size: 30px;
    line-height: 34px;
}
.questionNode.active{
    border-bottom: none;
    padding: 10px 0 12px;
    cursor: default;
}
.questionNode.active:hover{
    background-color: transparent;
}

.questionNode:hover{
    background-color: #62b7ff;
}

.questionNode > .title{
    width: calc(100% - 40px);
}
#questionTabs{
    border-bottom: 1px solid #d2d2d2;
}
#questionTabs > div{
    cursor: pointer;
    margin: 12px;
}
#questionTabs > div:first-child{
    margin-left: 0;
}
#questionTabs > div:hover{
    color: black;
}
#questionTabs > div.active{
    color: black;
}
#questionItemTemplate{
    display: none;
}
.elementRemove{
    display: none;
    position: absolute;
    right: -8px;
    top: -90px;
    height: 20px;
}
.clearSelection{
    float: left;
    font-size: 24px;
    margin-top: 12px;
    cursor: pointer;
}