:root {
    /* MAIN COLORS */
    --main-color1: #1e2227;     /*[SCHWARZ]*/
    --main-color2: #66707b;     /*[DUNKELGRAU]*/
    --main-color3: #89919b;     /*[HELLGRAU]*/
    --main-color4: #46505c;     /*[HELLGRAU (ICON RÄNDER)]*/
    --main-color5: #363f4a;
    --main-color6: #fff;        /*[WEISS]*/
    --main-color7: #99cc01;     /*[GREEN]*/
    --main-color8: rgba(255,100,10,.3); /*[TABELLE GEÄNDERT]*/
    --main-color9: #5457da;     /*[BLAU]*/
    --main-color10: rgb(255,164,1);     /*[ORANGE]*/
    --main-color11: rgb(109,207,247);     /*[HELLBLAU]*/
    --main-color12: #1ba638;     /*[GREEN STATUS]*/
    --main-color13: #ff0000;     /*[ROT STATUS]*/



    /* TABLE COLORS */
    --table-head: #566270;          /*[HEAD]*/
    --table-head-corner: #5e6a79;   /*[HEAD CORNER]*/
    --table-left-even: #353e49;     /*[LEFT EVEN]*/
    --table-left-odd: #434d59;      /*[LEFT ODD]*/
    --table-even: #2b333d;          /*[EVEN]*/
    --table-odd:  #3a434e;          /*[ODD]*/

    /* FONT SIZES */
    --main-font-0: 40px;
    --main-font-1: 20px;
    --main-font-2: 15px;
    --main-font-3: 10px;


    /* MARGINS */
    --main-margin-0: 25px;          /* MARGIN MEDIUM*/
    --main-margin-1: 10px;          /* MARGIN SMALL*/

}






* {
    font-size: var(--main-font-2);
    color: #fff;
    font-family: 'Montserrat', sans-serif;
}

body {
    margin: 0;
    background-color: var(--main-color1);
}

h2 {
   text-align: center;
}

.bold {
    font-weight: 900 !important;
}

.autoHeight {
    height: auto !important;
}

.capitalize {
    text-transform: capitalize;
}

hr {
    background-color: var(--main-color2);
    margin: 0;
    margin-bottom: 10px;
}

.hidden {
    display: none;
}

/*CENTER*/
#centerElem {
    text-align: center;
}

.capitals {
    text-transform: uppercase;
}

/* Spacer */
.spacer {
    display: block;
    width: 100vw;
    height: 75px;
}

.headline1, h1 {
    font-size: var(--main-font-1);
    color: inherit;
    display: inline-block;
    width: 100%;
    text-align: left;
}
.headline1 * {
    font-size: var(--main-font-1);
    margin: 0 !important;
}
.headline2, h2 {
    font-size: var(--main-font-2);
    color: inherit;
}
.headline2 * {
    font-size: var(--main-font-2);
    color: inherit;
    margin: 0;
}

.freeHeadline {
    width: 1200px;
    margin: 0 auto;
    margin-bottom: 30px;
    margin-top: 30px;
    display: block;
}

.userColor {
    color: var(--main-color7);
}


#bg {
    position: fixed;
    left: 0;
    top: 0;
    z-index: -999;
    width: 100vw;
    height: 100vh;
    background-size: cover;
    background-repeat: no-repeat;
    background-image: url('../gfx/bg.jpg');
}

#bg #gradient {
    width: 100vw;
    height: 100vh;
    margin: 0;
    background: linear-gradient(180deg, rgba(30,34,34,0) 0%, rgba(30,34,34,0.3) 10%, rgba(30,34,34,1) 62%, rgba(30,34,34,1) 100%); 
}

textArea {
    background-color: transparent;
    width: 100%;
    height: 150px;
    resize: none;
}

/* ########################################################### */
/* ######################## MESSAGES ######################### */
/* ########################################################### */

#messageContactCloser {
    position: fixed;
    display: block;
    width: 300px;
    height: 24px;
    right: 0;
    top: 98px;
    background-color: var(--main-color13);
    z-index: 1000;
}


#messageContactParent {
    display: block;
    position: fixed;
    right: 0;
    top: -100vh;
    width: 300px;
    max-height: calc( 100vh - 124px );
    z-index: 10;
    overflow-y: auto;
    background-color: var(--main-color13);
    transition: all .75s ease-in-out;
}

.messageContactIn {
    top: 124px !important;
}


#messageContactHL {
    display: inline-block;
    width: 100%;
    font-weight: 900;
    padding: 15px 0 5px 0;
}

#messageContact {
    width: 300px;
    margin: 0;
}

#messageContact tr td:nth-of-type(2) {
    width: 0px;
    padding: 0;
}
#messageContact tr td:nth-of-type(3) {
    width: 120px;
}



#messageContact * {
    background-color: transparent;
}

#messageContact th, #messageContact td {
    padding: 5px;
}

#messageContact thead {
    border-bottom: 1px solid var(--main-color6);
}

.messageContactHidden {
    font-size: 0;
}
.messageContactHidden span{
    font-size: initial;
}


/* ########################################################### */
/* ######################## WP KACKE ######################### */
/* ########################################################### */

.responsive-menu-button, #wpadminbar {
    display: none !important;
}


/* ########################################################### */
/* ########################## MENU ########################### */
/* ########################################################### */

#menu {
    width: 100vw;
    background-color: var(--main-color1);
    color: var(--main-color3);
    position: fixed;
    top: 0;
    left: 0;
    height: 98px;
    z-index: 1000;

}

//@media only screen and (min-width: 1700px) {
//    #menu {
//        background-image: url('../gfx/Pandion_Bastide_Asperg_Logo.png');
//        background-repeat: no-repeat;
//        background-position: 25px center;
//        background-size: 200px;
//    }
//}

#menuDashboard {
    margin-top: 9px;
}

.menuSpacer, .contentSpacer {
    width: 1200px;
    margin: 0 auto;
    text-align: left;
}

#menu ul, #menuDashboard ul {
    margin: 0 auto;
    width: max-content;
    padding: 0;
}

#menu li, #menuDashboard li {
    line-height: 40px;
    display: inline-block;
    margin-left: 6px;
    transition: background-color .25s ease-in-out;
    font-size: var(--main-font-2);
    text-align: center;
}
#menu a:first-of-type li, #menuDashboard a:first-of-type li{
    margin: 0;
}

#menu li:hover, #menuDashboard li:hover {
    background-color: var(--main-color2);
    color: #2b3138;
}

#menuRight {
    float: right;
    margin-top: 13px;
}

#menuRight img {
    margin-left: 40px;
}


.backendLink, .backendLink:hover {
    text-decoration: none;
}







.menuNav {
    display: inline-block;
    height: 37px !important;
    width: 394px;
    background: rgb(70,80,92);
    background: linear-gradient(180deg, rgba(70,80,92,1) 0%, rgba(102,112,123,1) 35%);
}
.menuNavDashboard {
    display: inline-block;
    height: 135px !important;
    background: rgb(70,80,92);
    background: linear-gradient(180deg, rgba(70,80,92,1) 0%, rgba(102,112,123,1) 35%);
    padding: 10px;
    width: 394px;
}


/*MENU*/
.menuImages {   
    height: 24px;
    vertical-align: middle;
    padding-right: 8px;
}
/*DASH*/
#menuDashboard .menuImages {   
    height: 54px;
    vertical-align: middle;
    display: block;
    margin: 0 auto;
}


#menuTitle, #menuTitle * {
    font-size: var(--main-font-1);
    color: var(--main-color2);
    line-height: 50px;
}
#menuDataLink, #menuDataLink * {
    font-size: var(--main-font-2);
    color: var(--main-color0);
    line-height: 50px;
}

#menuDataLink::before {
    content: '';
    display: inline-block;
    width: 23px;
    height: 23px;
    background-image: url(../gfx/ic_manipulateData.png);
    background-position: center;
    background-repeat: no-repeat;
    vertical-align: sub;
}

#menuRight, #menuRight * {
    color: var(--main-color3);
}

#loggedInUser {
    color: var(--main-color6);
}
/* ########################################################### */
/* ######################## HOVER MENU ####################### */
/* ########################################################### */

#dataMenu {
    width: 105px;
    position: fixed;
    top: 3px;
    right: calc((100vw - 1600px) /2 + 50px);
    z-index: 1000;
    text-align: left;
}

.uiButton {
    color: transparent;
    display: inline-block;    
    width: 25px;
    height: 25px;
    cursor: pointer;
    margin: 10px 5px;
    background-repeat: no-repeat;
    background-position: center;
}
#uiSave {
    display: none;
}
/*.uiBSave {
    background-image: url(../gfx/ic_data_save.png);
}*/
.uiBReset {
    background-image: url(../gfx/ic_data_reload.png);
}
.uiBOld {
    background-image: url(../gfx/ic_data_old.png);
}


.uiBLoad {
    background-image: url(../gfx/ic_data_load.png);
}
.uiBDelete {
    background-image: url(../gfx/ic_data_delete.png);
}
.uiBCancel {
    background-image: url(../gfx/ic_data_cancel.png);
}

/* ########################################################### */
/* ######################## MESSAGES ######################### */
/* ########################################################### */

#message {
    position: fixed;
    z-index: 2000;
    top: 0;
    left: 0;
    width: 100vw;
    max-height: 150px;
    animation-name: bannerAnim;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;

    -webkit-box-shadow: 10px 10px 13px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 10px 10px 13px 0px rgba(0,0,0,0.75);
    box-shadow: 10px 10px 13px 0px rgba(0,0,0,0.75);
    text-align: center;
    padding: 50px;
    font-size: 2rem;
    background-color: var(--main-color2);
}

@keyframes bannerAnim {
    90%  {top: 0}
    100% {top: -150px}
}

/* ########################################################### */
/* ########################### DATA ########################## */
/* ########################################################### */

table input, table select {
    cursor: pointer;
}

#trackerStatsHidden {
    display: none;
}
#trackerStats {
    border-collapse: collapse;
}



/* Dots in Flatname */
.trackerStatsProject .trackerStatsName::first-letter, .trackerStatsUser .tableElemName::first-letter {
    padding-right: 10px;
}

.trackerStatsProject .trackerStatsName, .trackerStatsUser .tableElemName {
    position: relative;    
}

.trackerStatsProject .trackerStatsName::before {
    content: '.';
    position: absolute;
    left: 20px;
}
.trackerStatsUser .tableElemName::before {
    content: '.';
    position: absolute;
    left: 10px;
}
/* // Dots in Flatname */







.highlightedTR {
    box-shadow: -5px 0px 0px 0px var(--main-color12);
    animation-name: deHighlightTR;
    animation-duration: 5s;
    animation-delay: 10s;
    animation-fill-mode: forwards;
}

@keyframes deHighlightTR {
    from {box-shadow: -5px 0px 0px 0px var(--main-color12);}
    to {box-shadow: -5px 0px 0px 0px rgba(0,0,0,0)}
}


tbody td p {
    display: none;
}

tfoot tr {
    background-color: transparent !important;
    border-top: 1px solid #fff;
}

#tabParent {
    position: relative;
    width: 1600px;
    margin: 0 auto;
    margin-top: 50px;
    margin-bottom: 50px;
}

#tabBlocker {
    width: 1175px;
    background-color: rgba(0,0,0,.4);
    height: 100%;
    z-index: 999;
    position: absolute;
}

#tooltip {
    opacity: 0;
    transition: all .1s ease-in-out;
    position: fixed;
    background-color: var(--main-color1);
    border-radius: 5px;
    padding: 5px;
    user-select: none;
    line-height: 1.5rem;
}

#tabBlocker:hover #tooltip {
    opacity: 1;
}

#dataChanged, #noData {
    width: 1180px;
    margin: 0 auto;
    margin-top: 100px;
}

form {
    display: block;
    width: 1600px;
}

table {
    border-spacing: 0px 5px;
    margin: 0 auto;
    width: 1600px;
}

tr {
    background-color: var(--table-even);
    margin-bottom: 10px;
}

thead tr {
    background-color: var(--table-head);
}
thead tr th:first-of-type{
    background-color: var(--table-head-corner);
}
tbody tr:nth-of-type(even) {
    background-color: var(--table-odd);
}
tr:nth-of-type(even) td:first-of-type {
    background-color: var(--table-left-odd);
}
tr:nth-of-type(odd) td:first-of-type {
    background-color: var(--table-left-even);
}

tfoot, tfoot * {
    background-color: transparent !important;
}


/* HOVER */
tbody tr:hover {
    background-color: var(--main-color3) !important;
}


th {
    font-size: var(--main-font-2);
    text-align: left;
}
th, td {
    padding: 10px;
    text-align: left;
}

input, select {
    background-color: transparent;
    border: 1px;
}
form input, form select {
    max-width: 100px;
}

#filename {
    max-width: inherit;
}
select option {
    background-color: var(--main-color1);
}
.activeRow {
    background-color:  var(--main-color2);
}

#actData .stats {
    font-size: .8rem;
    opacity: .5;
}

#tableLegend {
    width: 1200px;
    margin: 0 auto;
    margin-bottom: 10px;
    padding: 5px 0;
    text-align: left;
}

.tableLegendElem {
    margin-right: 16px;
}

.tableElemName, .tableElemWatched {
    display: inline-block;
    width: 40%;
}

.tableElemAvailable {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 100%;
    margin-left: 10px;
}

.tableElemAvailable0 {
    background-color: var(--main-color13);
}
.tableElemAvailable1 {
    background-color: var(--main-color12);
}
.tableElemAvailable2 {
    background-color: yellow;
}


.tableElemSaved {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-left: 10px;
    color:  var(--main-color7) !important;
    font-weight: 900 !important;
}

.tableElemUserinfo {
    display: inline-block;
    width: 17px;
    height: 17px;
    margin-left: 10px;
    font-weight: 900 !important;
    background-color: var(--main-color3);
    color: var(--main-color4);
    border-radius: 100%;
    line-height: 17px;
    text-align: center;
}

table .tableElemUserinfo {
    padding: 0 1px 1px 0;
}

table tr:hover .tableElemUserinfo {
    border: 1px solid var(--main-color1);
    height: 18px;
    width: 18px;
}


.trackerStatsTimeBefore::before {
    content: '<';
}

.trackerStatsTime::after, .trackerStatsCrossSection::after {
    content: ' Min';
}


/*RAUMGROESSEN, OBJEKTTEXTE UND OBJEKTIMAGES*/
#sizeElemBg, #textElemBg, #imgElemBg {
    position: fixed;
    left: 0;
    top: 0;
    background-color: rgba(0,0,0,.5);
    width: 100vw;
    height: 100vh;
    transition: opacity 1s ease-in-out;
    opacity: 0;
    visibility: hidden;
    z-index: 9;
}
#sizeElem, #textElem, #imgElem {
    width: 440px;
    position: fixed;
    left: calc(50% - 220px);
    top: -200vh;
    z-index: 1;
    transition: all 1s ease-in-out;
    background-color: var(--main-color1);
    padding: 15px;
    border: 10px solid #000;
    z-index: 10;
}

/*Überschrift*/
#sizeElemHead, #textElemHead, #imgElemHead {
    border-bottom: 1px solid var(--main-color4);
}
#sizeElemHead span, #textElemHead span, #imgElemHead span {
    display: inline-block !important;
    width: 50%;
    text-align: left;
    font-size: var(--main-font-2) !important;
    color: var(--main-color6);
    opacity: 1 !important;
    margin-bottom: 10px;
}
#sizeElemHead span:nth-of-type(2), #textElemHead span:nth-of-type(2), #imgElemHead span:nth-of-type(2) {
    text-align: right;
}
#sizeElem .sizeElemHl, #textElem .textElemHl, #imgElem .imgElemHl {
    display: inline-block;
    font-size: var(--main-font-2);
    opacity: 1;
    margin: 15px 0;
    color: var(--main-color4);
}
/*Überschrift*/

#sizeElem input, #textElem textarea, #imgElem input{
    background-color: var(--main-color4);
    margin-bottom: 25px;
    padding: 2px 5px;
}
#sizeElem input, #sizeElem .sizeElemHl, #textElem textarea, #textElem .textElemHl, #imgElem input, #imgElem .imgElemH {
    width: 25px;
    margin-right: 15px;
}
#sizeElem input:nth-of-type(2),#sizeElem .sizeElemHl:nth-of-type(2) {
    width: 200px;
    margin-right: 15px;
}
#sizeElem input:nth-of-type(3),#sizeElem .sizeElemHl:nth-of-type(3) {
    width: 100px;
    margin-right: 15px;
}

#textElem textArea {
    width: 390px;
    border: none;
}

#sizeElem span {
    display: block;
    font-size: .75rem;
    opacity: .5;
}

#buttonParent {
    text-align: left;
    padding: 10px 0;
    margin-bottom: 10px;
    border-top: 1px solid var(--main-color4);
    border-bottom: 1px solid var(--main-color4);
}

#sizeElem .button, #textElem .button, #imgElem .button {
    display: inline-block;
    width: 120px;
    text-align: center;
    background-color: var(--main-color3);
    color: var(--main-color5);
}
#sizeElem .button:last-of-type, #textElem .button:last-of-type, #imgElem .button:last-of-type {
    background-color: var(--main-color7);
}

#sizeElem .button:first-of-type, #textElem .button:first-of-type, #imgElem .button:first-of-type {
    margin-right: 150px;
}

.commentFail {
    border: 1px solid #f00;
}


/* OBJECT IMAGES*/
.objImgTableInput {
    opacity: 0;
    position: absolute;
    width: 100%;
    display: block;
    max-width: 100%;
    height: 50px;
}

.objImgSmall {
    display: inline-block;
    width: 100px;
    height: 100px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    border: 1px solid var(--main-color2);
}

.objImgSmallActive {
    border: 3px dotted var(--main-color7);
}

#actData td {
    position: relative;
}

.objImgTableParent {
    width: 115px;
}

.objImgTable {
    display: inline-block;
    width: 26px;
    height: 20px;
    margin-right: 2px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* TABLE EXTRAS */

#tabParentExtras {
    position: relative;
    width: 1250px;
    margin: 0 auto;
    margin-top: 50px;
}

#tabBlockerExtras:hover #tooltip, #tabBlockerContact:hover #tooltip {
    opacity: 1;
}

#formularExtras, #formularExtras table, #formularContact, #formularContact table {
    width: 1250px;
}

#formularExtras th:first-of-type {
    width: 10px;
}
#formularContact input {
    min-width: 200px;
}
#formularExtras th:nth-of-type(2) {
    width: 50px;
}
#formularExtras th:nth-of-type(3) {
    width: 10px;
}
#formularExtras th:nth-of-type(4) {
    width: 100px;
}

#formularExtras textArea {
    width: 500px;
    height: 150px;
    color: #000;
    border: none;
    user-select: auto !important;
}
#formularExtras form input, #formularExtras form select {
    max-width: inherit;
}

#tabBlockerExtras {
    width: 1250px;
    background-color: rgba(0,0,0,.4);
    height: 100%;
    z-index: 999;
    position: absolute;
    top: 41px;
}


/* SHOW FILE (FILES)*/
#showFile iframe {
    width: 100vw;
    height: calc(100vh - 95px);
    border: 0;
}

.headerClass {
    height: 45px;
}

/* SORTING TABLES*/
#trackerStats , #trackerStats * {
    user-select: none;
}




/* MATOMO */
/*LoadStats*/
.segments iframe{
    visibility: hidden;
}

.statsLoader {
    position: absolute;
    width: 1200px;
    background: url(../../gfx/loader.gif);
    background-size: 50px;
    background-repeat: no-repeat;
    background-position: center 100px;
    z-index: -999;
}
/*LoadStats*/



/* USER SEGMENT*/
#widgetIframe {
    width: 1200px;
    margin: 0 auto;
}
#matomoframeUser {
    width: 1200px;
    margin: 0 auto;
}

#widgetIframe .segmentUser {
    min-height: calc(100vh - 45px);
}

/*Project Segments*/
.segments {
    width: 1200px;
    margin: 0 auto;
    margin-bottom: 100px;
}
.segments iframe{
    width: 1200px;
}

.segments span {
    font-size: var(--main-font-1);
}

.segment1, .segment1 * {
    height: 210px !important;
}
.segment2, .segment2 * {
    height: 850px !important;
}
.segment3, .segment3 *, .segment4, .segment4 * {
    height: 610px !important;
}
.segment5, .segment5 * {
    height: 395px !important;
}
.segment6, .segment6 * {
    height: 400px !important;
}

/* END MATOMO */










/* ########################################################################################## */
/* #################################### DASHBOARD ########################################### */
/* ########################################################################################## */

.dashStats {
    position: relative;
    display: inline-block;
    width: 393px;
    height: 400px;
    background-color: var(--main-color5);
    border: 10px solid var(--main-color4);
    padding: 15px 0;
    overflow: hidden;
    /*text-align: center;*/
}
.dashStats:first-of-type {
    margin-left: 0;
}

.dashStats:nth-last-of-type(even) {
    margin: 0 6px;
}

.dashStats span {
    margin-left: 25px;
}

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






.chartText {
    position: absolute;
    top: 175px;
    text-align: center;
    width: 100%;
}


.chartTextValue {
    display: block;
    margin: 0 !important;
    margin-bottom: 10px !important;
    font-size: var(--main-font-0);
    font-weight: 700;
}

.chartTextLabel {
    display: block;
    margin: 0 !important;
    font-size: var(--main-font-2);

}

/*DASHBOARD CHART COLs*/
#chartTextDashboard1 * {
    color: rgba(153, 204, 0, 1);
}

#chartTextDashboard2 * {
    color: rgba(255, 212, 85, 1);
}

#chartTextDashboard3 * {
    color: rgba(62, 149, 241, 1);
}
/*DASHBOARD CHART COLs*/


/* ########################################################################################## */
/* ###################################### LOGIN ############################################# */
/* ########################################################################################## */

#loginSiteBackend #bg {
    background-image: url('../gfx/bg_login.jpg');
    background-position: center;
}
#loginSiteBackend #bg #gradient{
    display: none;
}


#loginFormBackend {
    background-color: var(--main-color1);
    border: 10px solid var(--main-color5);
    width: 600px;
    margin: 0 auto;
    margin-top: 200px;
    padding: 15px;
}


#loginFormBackend form {
    width: 270px;
    margin: 0 auto;
    margin-top: 50px;
    margin-bottom: 50px;
    overflow: hidden;
}

#loginFormBackend .input {
    background-color: rgba(255,255,255,.75);
    border: 1px solid var(--main-color1);
    width: 266px;
    max-width: 266px;
    height: 30px;
}

#loginFormBackend p label {
    display: block;
}

#loginFormBackend #wp-submit {
    width: 104px;
    height: 30px;
    background-color: var(--main-color7);
    color: var(--main-color1);
    text-transform: uppercase;
    float: right;
    margin-top: 25px;
    padding: 5px;
    font-weight: 500;
}


/* ########################################################################################## */
/* #################################### USER DATA ########################################### */
/* ########################################################################################## */

.statsButtonParent {
    width: 1200px;
    margin: 0 auto;
    margin-bottom: 30px;
    text-align: left;
}

.statsButton {
    margin: 0 10px;
    padding: 3px 15px;
    color: var(--main-color6);
    background-color: var(--main-color5);
    border-color: var(--main-color4);
    border-radius: 5px;
}

.statsButton:first-of-type {
    margin: 0;
}

/* USER TABELLE */
#userTableParent {
    position: relative;
    /*padding-top: 30px;*/
    transition: all 1s ease-in-out;
    max-height: available;
    width: 1200px;
    margin: 0 auto;
    background-color: var(--table-left-even);
}
#userTable {
    width: 1200px;
    max-height: 75vh;
    overflow-y: auto;
    /*display: block;*/
    background-color: transparent;
}
#userTable tr, #userTable th , #userTable td {
    background-color: transparent;

}


/*#userTable tr {
    background-color: transparent;
    border-bottom: 1px solid var(--main-color4);
    display: none;
}

#userTable tr:not(.tableAnchor):hover {
    box-shadow: -5px 0px 0px 0px var(--main-color12);
}
*/

.userTableTrElemsActive {
    display: table-row !important;
}


#userTable td {
    background-color: unset;
    margin: 5px 0 0 0;
    padding: 0;
}

.userTableFirstColumn {
    padding-left: var(--main-margin-1) !important;
}

#userTable td:hover {
    cursor: pointer;
}

.tableAnchor p {
    display: block;
    margin: 25px 0 0 0;
    color: var(--main-color6);
    text-transform: capitalize;
}

.userContactOutput {
    font-size: 0;
    text-align: center;
}

.userContactOutput1:after {
    font-size: 18px;
    content: "\260F";
    color: #f00;
}
.userContactOutput2:after {
    font-size: 18px;
    content: "\260F";
    color: #fff;
}
.userContactOutput3:after {
    font-size: 18px;
    content: "\260F";
    color: #fff;
    opacity: .5
}


.userTableDiagram {
    padding-right: 5px !important;
}

.userTableWatched, .userTableSaved {
    display: block;
    height: 14px;
    font-size: 12px;
    line-height: 14px;
    padding-left: 5px;
    color: var(--main-color5);
    font-weight: 900;
    transition: width 2s ease-in-out;
}

.userTableWatched{
    background-color: var(--main-color10);
    width: 0;
}

.userTableSaved{
    background-color: var(--main-color7);
    width: 0;
}

.userTableTime::after {
    content: 'min';
}

.userTableLastVisit {
    font-size: 0;
}
.userTableLastVisit span {
    font-size: var(--main-font-2);
}




#tableVars {
    height: 30px;
    line-height: 30px;
    position: absolute;
    top: 0;
    left: 0;
    width: 1200px;
    text-transform: uppercase;
    background-color: var(--table-head-corner);
}

#tableVars a {
    color: var(--main-color6);
    margin: 0 5px;
}

#tableVarsResizer {
    position: absolute;
    width: 30px;
    height: 30px;
    background-image: url(../gfx/ic_in);
    background-size: 16px 16px;
    background-repeat: no-repeat;
    transition: all 1s ease-in-out;
    background-position: center;
    /*transform: rotate(90deg);*/
}

.selected {
    color: var(--main-color7);
}

/* USER TABELLE */

#persData {
    width: 1200px;
    height: auto;
    text-align: left;
    margin: 0 auto;
    padding: 15px;
}


#persData *:not(a):not(span) {
    color: var(--main-color6);
}

#persData h2 {  
    margin: unset;
}
#persData h2, #persData h2 * {  
    font-size: var(--main-font-1);
}

#persData p {
    margin: 0;
}

#persData span {
    margin: 0;
}

#persDataHead {
    border-bottom: 1px solid var(--main-color3);
    margin-bottom: var(--main-margin-0);
}

#persDataHeadLeft {
    display: inline-block;
    height: 60px;
}

#persDataHead h2 span {
    margin-left: 0;
}


#regSince {
    font-size: var(--main-font-3);
    display: inline-block;
    float: right;
    line-height: 95px;
}

#regSince * {
    font-size: var(--main-font-3);
    color: var(--main-color3);
}

#regSince span{
    color: var(--main-color6);
    float: none;
}

#persDataBody p{
    display: inline-block;
}

.persDataDetails p:first-of-type {
    width: 140px;
}

#persDataBodyContact {
    margin-top: var(--main-margin-0) !important;
}

#persDataBodyContact p {
    display: block;
}

#userContactForm * {
    display: none;
}

#userContactFormSubmit, #userContactMessage {
    display: inline-block;
    margin: var(--main-margin-0) 0 0 0;
    padding: 3px 15px;
    color: var(--main-color6);
    background-color: var(--main-color4);
    border-radius: 5px;
    max-width: unset;
}

#userContactFormSubmit:hover {
    background-color: var(--main-color6);
    color: var(--main-color5);
}

.persDataBodyContactInfo {
    margin: var(--main-margin-0) 0 0 0 !important;
}

#contactRequest {
    color: var(--main-color6);
    font-weight: 600;
    background-color: var(--main-color13);
    padding: 15px;
    display: block;
}


.reqFlatHl {
    margin-top: var(--main-margin-0) !important;
}

#reqFlatTable {
    width: inherit;
    margin: 0;
}

#reqFlatTable * {
    background: unset;
}

#reqFlatTable .reqFlatAct {
    background-color: var(--main-color13);
}
#reqFlatTable .reqFlatAct:hover * {
    color: var(--main-color13);
    background-color: var(--main-color6);
}

#reqFlatTable .reqFlatUnsaved {
    opacity: .25;
}





.statsContainerParent {
    width: 1200px;
    margin: 0 auto;
}

.statsContainer {
    position: relative;
    display: inline-block;
    width: 578px;
    height: auto;
    background-color: var(--main-color5);
    border: 10px solid var(--main-color4);
    padding: 15px 0;
    margin: 20px;
}

.statsContainerTriple {
    width: 393px;
    float: left;
}
.statsContainerTriple:nth-of-type(even) {
    margin: 0 10px;
}

.statFullwidth {
    width: 1200px;
    /*height: inherit !important;*/
}

.statsContainerMargin {
    margin-right: 40px;
}

.statsContainer span {
    margin-left: 25px;
}

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

.chartTextUser {
    position: absolute;
    top: 15px;
    right: 15px;
    text-align: right;
}

.chartTextUser .chartTextValue {
    margin-bottom: 0 !important;
}

.chartTextUserPieLegend {
    font-size: var(--main-font-3);
    position: absolute;
    top: 95px;
    right: 0;
    margin: 0;
    padding: 0;
    text-align: left;
    width: 173px;
    line-height: 12px;
}


.statsContainerWPDataParent {
    width: 1200px;
    height: inherit;
}

.statsContainerWPDataParent div * {
    margin: 0;
}

.statsContainerWPData {
    display: inline-block;
    width: 333px;
    margin-left: 50px;
    vertical-align: top;
}

#lastLoginTime, #lastWatched, #userTime {
    margin-top: 20px;    
}

#lastLoginTime .lastLoginTimeValue:first-of-type, .userTimeValue, .userMetaValue {
    font-size: var(--main-font-0);
    font-weight: 700;
}

#lastLoginTime, #lastLoginDate{
    color: var(--main-color10);
}


#userTime * {
    color: var(--main-color7);
}



#lastWatched *, #lastWatched, #lastWatchedSpecs {
    color: var(--main-color9);
}

.statsNoSave {
    margin-left: 25px;
}
.statsNoSave span{
    margin: 0;
}

#userStatsSaved {
    width: 1200px;
    height: auto;
    padding-bottom: 22px;
}


#userStatsSaved hr {
    margin: 0 25px;
}


.statsFooter {
    display: inline-block;
    width: 33.3%;
    margin-left: 0 !important;
    text-align: center;
    float: left;
}



.anchorEtage {
    font-size: 0;
}

.anchorEtage::after {
    font-size: var(--main-font-2);
}

.anchorEtage0::after {
    content: '0';
}
.anchorEtage1::after {
    content: '1';
}
.anchorEtage2::after {
    content: '2';
}
.anchorEtage3::after {
    content: '3';
}
.anchorEtage4::after {
    content: '4';
}
.anchorEtage5::after {
    content: '5';
}

.anchorEtage45::after {
    content: '4|5';
}
.anchorEtage-01::after {
    content: '-1|0';
}


.savedElem {
    height: 150px;
    padding: 25px;
}

.savedElem:hover {
    outline: 10px solid var(--main-color2);
}

.savedElemStateSold {
    border-left: 10px solid var(--main-color13);
    padding-left: 15px;
}
.savedElemStateReserved {
    border-left: 10px solid yellow;
    padding-left: 15px;
}


.savedElem * {
    color: var(--main-color6);
    font-size: var(--main-font-2);
}

.savedElemPlan {
    display: inline-block;
    width: 100px;
    height: 100px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.savedElemInfo {
    display: inline-block;
    width: 250px;
    vertical-align: top;
}
.savedElemInfo:first-of-type {
    width: 368px;
}

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

.savedElemInfo p, .savedElemInfo p * {
    margin: 0;
    padding: 0;
}

.savedElemTabHL {
    font-size: var(--main-font-1);
    margin-bottom: 11px;
}


span.savedElemWatchCount {
    display: inline-block;
    font-size: 80px;
    font-weight: 700;
    margin: 0;
}


.savedElemInfoWatchedText {
    display: inline-block;
}

.savedElemWatchLabel {
    font-weight: 700;
}

p.savedElemWatchLastWatchedDate, p.savedElemWatchSavedDate {
    font-size: 25px;
    font-weight: 700;
    margin-top: 17px;
    margin-bottom: 18px;
}





.col7 *:not(.savedElemTabHL) {
    color: var(--main-color7);
}
.col9 *:not(.savedElemTabHL) {
    color: var(--main-color11);    
}
.col10 *:not(.savedElemTabHL) {
    color: var(--main-color10);    
}


#filter1Legend.legend, #filter1Legend.legend *, #filter2Legend.legend, #filter2Legend.legend *, #topFiveLegend.legend, #topFiveLegend.legend *, #dash2Legend.legend, #dash2Legend.legend *, #dash3Legend.legend, #dash3Legend.legend * {
    margin: 0;
}


.legend {
    position: absolute;
    right: 15px;
    top: 104px;
}

.legendElem {
    display: block;
    text-align: left;
    width: 100%;
}

#filter1Legend .legendCol, #filter2Legend .legendCol, #topFiveLegend .legendCol, #dash2Legend .legendCol, #dash3Legend .legendCol {
    display: inline-block;
    width: 15px;
    margin-right: 10px;
    height: 100%;
}

.legendVal {

}





/* ########################################################################################## */
/* ################################### PROJECT DATA ######################################### */
/* ########################################################################################## */

.projectStats {
    position: relative;
    display: inline-block;
    width: 578px;
    height: 355px;
    background-color: var(--main-color5);
    border: 10px solid var(--main-color4);
    padding: 15px 0;
    overflow: hidden;
    left: 6px;
}

.projectStats span {
    margin-left: 25px;
}

.chartTextProject {
    position: absolute;
    top: 32%;
    left: 39%;
    text-align: center;
}

/* MATOMO DATA */
.segments iframe {
    border: 10px solid var(--main-color4);
}

.statsThirds {
    position: relative;
    display: inline-block;
    width: calc( 99% / 3 );
    margin: 0 auto;
    float: left;
}

.statsQuads {
    position: relative;
    display: inline-block;
    width: calc( 99% / 4 );
    margin: 0 auto;
    float: left;
}

/* ########################################################################################## */
/* ###################################### EXTRAS ############################################ */
/* ########################################################################################## */



/* ########################################################################################## */
/* ################################## ANSPRECHPARTNER ####################################### */
/* ########################################################################################## */

#contactDataTextarea {
    border: 1px solid var(--main-color2);
}

#contactDataHead {
    width: 1250px;
    border-bottom: 1px solid var(--main-color2);
    font-size: var(--main-font-1);
    margin: 0 auto;
    margin-top: 100px;
    text-align: left;
}

#contactDataChanged {
    width: 1250px;
    margin: 0 auto;
    margin-top: 70px;
    text-align: right;
}

#tabParentContact {
    position: relative;
    width: 1250px;
    margin: 0 auto;
    margin-top: 5px;
}

#imageBox {
    width: 1250px;
    margin: 0 auto;
    margin-top: 25px;
    text-align: left;
}

#imageBox .imgParent {
    border: 2px solid #000;
    display: inline-block;
    margin: 0 10px 10px 0;
}

#imageBox .imgParent .contactImg {
    background-size: cover;
    background-position: center center;
    height: 150px;
    width: 100px;
}

#imageBox .active {
    border: 2px solid #999;
    -webkit-box-shadow: 2px 2px 7px 0px #999;
    -moz-box-shadow: 2px 2px 7px 0px #999;
    box-shadow: 2px 2px 7px 0px #999;
}

#imageBox input {
    max-width: inherit
}






/* ############################################################################################ */
/* ###################################### FlatInfo ############################################ */
/* ############################################################################################ */



#flatInfo {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: -100vw;
    background-color: rgba(0,0,0,.875);
    z-index: 9;
    transition: all 1s ease-in-out;
    padding-top: 25vh;
}

#flatInfoCloser {
    /*    width: 30px;
        height: 30px;
        position: absolute;
        top: 115px;
        right: 35px;
        background-image: url(../gfx/closer.png);
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;*/

    width: 100vw;
    height: 100vh;
    position: absolute;
    top: 0;
    right: 0;
    z-index: -1;
}

/*############### HEADER ###############*/

#flatInfoHeader {
    width: 1200px;
    margin: 0 auto;
    border-bottom: 1px solid #fff;
}

/*LEFT*/
#flatInfoHeaderLeft {
    display: inline-block;
    width: 200px;
    text-align: left;
    vertical-align: top;
}

#flatInfoTitle {
    font-size: var(--main-font-1);
}

.flatStatus0 {
    color:  var(--main-color13) !important;
    font-weight: 900;
}
.flatStatus1 {
    color: green !important;
    font-weight: 900;
}
.flatStatus2 {
    color: yellow !important;
    font-weight: 900;
}

/*CENTER*/
#flatInfoHeaderCenter {
    display: inline-block;
    width: 792px;
}

#flatInfoHeaderCenter span {
    font-size: var(--main-font-0);
    font-weight: 700;
    display: block;
}
#flatInfoHeaderCenter div {
    display: inline-block;
    margin: 0 auto;
}

#flatInfoWatched, #flatInfoWatched * {
    color: var(--main-color10);
}

#flatInfoRequested, #flatInfoRequested * {
    color: var(--main-color7);
}
#flatInfoRequested {
    margin-left: 100px !important;
}

#flatInfoSaved, #flatInfoSaved * {
    color: var(--main-color11);
}
#flatInfoSaved {
    margin-left: 100px !important;
}

/*RIGHT*/
#flatInfoHeaderRight {
    display: inline-block;
    vertical-align: top;
}

#flatInfoProspectivesButton {
    border: 1px solid var(--main-color2);
    background-color: var(--main-color4);
    padding: 5px 10px;
    width: 200px;
}

/*############### BODY ###############*/


#flatInfoBody {
    width: 1200px;
    margin: 0 auto;
}

#flatInfoBodyLeft {
    display: inline-block;
    width: 200px;
    vertical-align: top;
    margin-top: 20px;
}

#flatInfoPlan {
    width: 200px;
    height: 200px;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

#flatInfoData p {
    color: var(--main-color6);
    text-align: left;
    line-height: 0.5rem;
}

#flatInfoBodyRight {
    display: inline-block;
    width: 990px;
    height: 400px;
    /*    background-image: url(../gfx/dummys/model.png);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;*/
}





/*PROSPECTIVES*/
#prospectiveListBG {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: -200vh;
    left: 0;
    z-index: 999;
    transition:all 1s ease-in-out;
}

.prospectiveListActive {
    top: 0 !important;
}

#prospectTableHL {
    margin: 35px 0;
    text-align: center;
    font-size: var(--main-font-0);
}

#prospectiveList {
    width: 1200px;
    height: calc( 100vh - 100px );
    margin-top: 100px;
}

#prospectiveParent {
    background: var(--main-color1);
}

#prospectiveElem {
    color: var(--main-color3);
}







/* ############################################################################################ */
/* ################################ USER ADMINISTRATION ####################################### */
/* ############################################################################################ */



.userList {
    width: 1200px;
}

.userListForm {
    width: 1200px;
    margin: auto;
    padding: 15px 0;
    border: 10px solid var(--main-color4);
    background-color: var(--main-color5);
}

.userListForm label{
    margin-right: 5px;
}
.userListForm input{
    margin-right: 20px;
    background-color: rgba(255,255,255,.1);
    max-width: unset;
    width: 180px;
}
.userListForm input[type=email]{
    width: 250px;
}

.userListForm .statsButton {
    margin-left: 96px;
}

.userListEditForm {
    width: unset;
}






/* ########################################################################################## */
/* ################################ USER ONLINE CHECK ####################################### */
/* ########################################################################################## */


#messageContact .userOnline::before, #userTable .userOnline::before {
    content: ' ';
    background-color: var(--main-color12);
    border-radius: 100%;
    width: 10px;
    height: 10px;
    display: inline-block;
    margin-right: 5px;
    border: 1px solid #ccc;
}




/* ###################################################################################### */
/* ################################ TIME TRACKING ####################################### */
/* ###################################################################################### */

#flatTimeTracking {
    position: fixed;
    top: calc( -1000px - 100vh );
    left: 0;
    display: block;
    width: 100vw;
    height: calc( 100vh - 100px );
    padding-top: 100px;
    z-index: 10;
    transition: all 1s ease-in-out;
}
#flatTimeTrackingBG {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100vw;
    height: 100vh ;
    background-color: rgba(0,0,0,.875);
}


.timeTrackingButtonParent {
    position: relative;
    width: 1200px;
    margin: 0 auto;
    margin-bottom: 30px;
    text-align: left;
}


.timeTrackingSelectParent {
    width: 100%;
    background-color: var(--main-color5);
    border: 10px solid var(--main-color4);
    padding: 15px 0;
    margin-bottom: var(--main-margin-0);
}

.timeTrackingSelect {
    width: 100%;
}


.timeTrackingContainer {
    position: relative;
    display: inline-block;
    width: 100%;
    height: 500px;
    background-color: var(--main-color5);
    border: 10px solid var(--main-color4);
    padding: 15px 0;
    text-align: left;
}

.entry-title {
    display:none
}

#og-select {
   margin:10px;
}