@font-face {
    font-family: Oswald-Light;
    src: url(Oswald-Light.ttf); 
}

@font-face {
    font-family: Oswald-Regular;
    src: url(Oswald-Regular.ttf); 
}

@font-face {
    font-family: Oswald-Bold;
    src: url(Oswald-Bold.ttf);
}

@font-face {
    font-family: RobotoCondensed-Light;
    src: url(RobotoCondensed-Light.ttf);
}

:root {    
    font-family:Oswald-Light;
}

input {    
    outline: none !important;
    box-shadow:none !important;
}

.startpagebutton {
    border: 2px solid var(--input-colors);
    opacity: 1;
    color:var(--input-colors);
    background-color:transparent;
    width:146px;
    height: 38px;
    font-size:16px;
    font-family:Oswald-Light;
    text-transform: uppercase;
}

.defaultinput {
    background-color:transparent;
    border:none;
    
    margin-bottom:8px;
    padding-left:15px;
    
    font-family:Oswald-Light;
    font-size:20px;
    width:85%;

    color:var(--black);
    outline:none;
}

.fieldtextarea {
    min-width: 100%;
    overflow: hidden;
    min-height: 32px;
    height: 32px;
    padding-top: 4px;
}

.inputcolor {
    color: var(--input-colors);
}

body {
    background-color: var(--white);
    font-family:Oswald-Light;
    margin:0;
}

pre {
    white-space: pre-wrap;       /* Since CSS 2.1 */
    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
    white-space: -pre-wrap;      /* Opera 4-6 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    word-wrap: break-word;       /* Internet Explorer 5.5+ */
}











/* Input fields */
.input-div,
.input-div-less-bottom  {
    border-bottom: 2px solid var(--input-colors);
    width: 400px;
}

.input-div {
    margin-bottom:40px;
}

.input-div-less-bottom {
    margin-bottom:20px;
    margin-top:10px;
}

.input-div-black {    
    border-bottom: 2px solid var(--black);
}

.input-div-show_edit  {
    border-bottom: 2px solid var(--input-colors);
    width:100%
}

.input-icon {
    border-right: 2px solid var(--input-colors);
    font-size:20px;
    width:40px;
    height:40px;
    float:left;
    text-align:center;
    
}

.input-icon-black {
        border-right: 2px solid var(--black);
}

.input-icon-padding {
    padding-top:10px;
}

.input-div-black {
    border-bottom: 2px solid var(--black);
    margin-bottom:50px;
    width:400px;
}


.log-td-idinput {
    border: 2px solid var(--black);
    width:40px;
    height:38px;
}

.input-log {
    background-color:transparent;
    color: var(--black);
    border:none;
    text-align:center;
    font-family:Oswald-Light;
    font-size:20px;
    width:40px;
    height:40px;
}

body {
    -webkit-touch-callout: none; /* iOS Safari */
      -webkit-user-select: none; /* Safari */
       -khtml-user-select: none; /* Konqueror HTML */
         -moz-user-select: none; /* Old versions of Firefox */
          -ms-user-select: none; /* Internet Explorer/Edge */
              user-select: none; /* Non-prefixed version, currently
                                    supported by Chrome, Opera and Firefox */
  }





















/* Startpage */
.body_startpage {
    background-image:url('../img/mainbg.jpg');
    background-repeat: no-repeat;
    background-size: auto;
}

.body_graylayer {
    background-color: rgba(32, 32, 32, 0.8);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.startpage_logo {
    margin-bottom:130px;
    width:500px;
    height:auto;    
}

.loginscreen {
    margin-top:50px;
    vertical-align: middle;
}

.loginscreen,
.loginfields {
    display: table;
    margin-left:auto;
    margin-right:auto;
}

.loginfields {
    width:410px;
}

.btn_login {
    margin-left:44px;
}

.btn_register {
    margin-left:30px;
}

.startpage_infocolor {
    color: var(--red);
}






/* Menu CSS */
.menucontainer {
    height: 100%; 
    width: 300px;
    background-position: top; 
    float:left;
    position: fixed;
    background-color: var(--darkred);
}

.menulogo {
    width: 170px;
    height: 140px;
    border-bottom: solid var(--input-colors) 2px;
    color : var(--input-colors);
    font-size:80px;
    font-family: Oswald-Bold;
    text-align:center;
    padding-top:50px;
    margin-bottom:50px;
}

.menuoptions { 
    margin-left:20%;
}

.menuicon-td {
    width: 35px;
}

.divcenter {
    display:table;
    margin-left:auto;
    margin-right:auto;
}

.menuoptions tr {
    line-height:60px;
}

.menuoptions a,
.tutorial-numbers {
    text-decoration: none;
    color: var(--input-colors);
    white-space: nowrap;
}

.option {
    text-transform: uppercase;
    color : var(--input-colors);
    
}

.option_selected {
    font-weight:bolder;
}

.menuicons {
    fill: var(--input-colors);
    font-size:20px;
}

.login-as {
    color:var(--input-colors);
    position: absolute; 
    bottom: 5px;
    left:5px;
}

.tutorial-start {
    color:var(--input-colors);
    position: absolute; 
    bottom: 5px;
    right:5px;
}

.tutorial-navheight {
    line-height:35px !important;
}

.tutorial-img {
    max-width:80%;
}

.tutorial-part {
    margin-bottom:100px;
}









/* Collapsible Lists */
.collapsibleList li{
    list-style-type: none;
    list-style-image: none;
    cursor           : auto;
    color : var(--input-colors);
    font-size:30px;
    margin-top:20px;
}

li.collapsibleListOpen{
    list-style-image : url('../img/icons/icon_rem.svg');
    cursor           : pointer;
    color : var(--input-colors);
    font-size:30px;
}

li.collapsibleListClosed{
    list-style-image : url('../img/icons/icon_add.svg');
    cursor           : pointer;
    color : var(--input-colors);
    font-size:30px;
}

.fielddataname {
    width:300px;
}

.fielddata {
    left:350px;
    width:400px;
}





















/* Panel */
.panel {
    position:absolute;
    left:380px;
    top:80px;
    bottom:80px;
    right:80px;
}

.smallpanel {
    height:100%;
    position: relative;
}

.scrollablediv {
    overflow-y:scroll;
}

.outputdiv {
    padding-left:50px;
    height:90%;
}

.backgroundpanel {
    padding-left: 50px;
    
    -webkit-touch-callout: text; /* iOS Safari */
    -webkit-user-select: text; /* Safari */
     -khtml-user-select: text; /* Konqueror HTML */
       -moz-user-select: text; /* Old versions of Firefox */
        -ms-user-select: text; /* Internet Explorer/Edge */
            user-select: text; /* Non-prefixed version, currently
                                  supported by Chrome, Opera and Firefox */
}

.option-iframe 
{
    position: relative;
    top:80px;
    left:80px;
    border:none;
    width: 80%;
    height: 80%;    
}

.tableheader {
    width:100%;
    height:10%;
    margin-bottom: 50px;
}

.tablebody {
    width:100%;
    height:90%;
}

.tableheadrow {
    background-color: #333333;
    color: var(--input-colors);
    height:50px;
    width: 100%;
    font-family: Oswald-Bold;
    text-transform: uppercase;
}

.tableheadrow th {
    font-weight: normal;
    text-align:left;
}

.outputfortable {
    width:100%;
}

.outputtable {
    margin-top:40px;
    border-collapse: collapse;
    border-style: hidden;
    margin-top:50px;
    width: 100%;
}

.tabledata {
    border:1px solid #CFCFCF;
    padding-top:10px;
    padding-bottom:10px;
    font-size:15px;
    font-family: RobotoCondensed-Light;
    color: var(--black);
}

.settings-col {
    float:left;
    margin-right:50px;
    margin-bottom:50px;
}

.userpermissionstable-col {
    width:420px;
}

.permissionuser {
    margin-top:25px;
    margin-bottom:25px;
}

.permissionlist {
    float:left;
    width:450px;
}


.checkbox-field {
    width:24px;
    height:24px;

    border:var(--white) solid 3px;
    color: var(--advance);
    float:right;
}

.defaulttextarea {
    max-width:100%;
    min-width:100%;
    min-height:200px;
    margin-bottom:30px;

    background-color: var(--white);
    color: var(--black);
    border: 2px solid var(--black);
}

.ks {
    background-image: url('../img/ks.png');
    background-repeat: no-repeat;
    background-size:100%;
    

    width: 400px;
    height: 400px;
    
    bottom:-100%;
    position: fixed;
    right:0; 
}






.datatable {
    width:100%;
}

.col-field {
    width:400px;
}

.col-fname {
    width:30%;
}

.col-spaceholder {
    width:100px;
}

.col-small {
    width:20px;
}

.col-fdata {
    width:50%;
}

#btn_search {
    margin-left: 20px;
}

.col {
    padding-left:20px;
    padding-right:20px;
}

.redbutton {
    border: solid var(--advance) 2px;
    color: var(--advance);
    background:transparent;
    text-transform: uppercase;
    font-size:16px;
    height:42px;
    padding-left:20px;
    padding-right:20px;
    font-family:Oswald-Light;
    cursor:pointer;
}

.redbutton:hover {
    border: solid var(--advance) 2px;
    color: var(--input-colors);
    background-color: var(--darkred);
}

.whitebutton {
    border: solid var(--input-colors) 2px;
    color: var(--input-colors);
    background:transparent;
    text-transform: uppercase;
    font-size:16px;
    height:42px;
    padding-left:20px;
    padding-right:20px;
    font-family:Oswald-Light;
    white-space: nowrap;
    cursor:pointer;
}

.whitebutton:hover {
    border: solid var(--white) 2px;
    color: var(--advance);
    background-color: var(--white);
}

.redbuttonadd {
    border: solid var(--advance) 2px;
    color: var(--advance);
    background:transparent;
    width:38px;
    height:38px;
    font-family:Oswald-Light;
    cursor:pointer;
}

.buttonsave {
    float:right;
    margin-top:100px;
    margin-right:10px;
}

.buttonadd {    
    float:left;
    margin-top:100px;
    margin-bottom:50px;
}

.panelbutton {
    border: solid var(--input-colors) 2px;
    color: var(--input-colors);
    background:transparent;
    width:38px;
    height:38px;
    font-family:Oswald-Light;    
    cursor:pointer;
}

.buttonclose {
    border: solid var(--input-colors) 2px;
    color: var(--input-colors);
    background:transparent;
    width:38px;
    height:38px;
    font-family:Oswald-Light;
    cursor:pointer;
}

.panelbutton-small {
    border: solid var(--input-colors) 2px;
    color: var(--input-colors);
    background:transparent;
    width:25px;
    height:25px;
    font-family:Oswald-Light;    
    cursor:pointer;
}

.rightbuttons {
    float:right;
    margin: 10px 10px;
}

.settings-function {
    margin-left:20px;
    margin-top:10px;
}

.closebutton {
    padding-top:8px;
    margin-left:auto;
    margin-right:auto;
    display:table;
}

.optionbutton-red {
    border: solid var(--advance) 2px;
    color: var(--advance);
    background:transparent;
    width:24px;
    height:24px;
    margin-right:10px;
    text-align:center;
    float: left;    
    cursor:pointer;
    padding-top:6px;
    padding-right:6px;
}

.optionbutton-white {
    border: solid var(--input-colors)  2px;
    color: var(--input-colors) ;
    background:transparent;
    width:24px;
    height:24px;
    margin-right:10px;
    text-align:center;
    float: left;    
    cursor:pointer;
}

.settingsbutton {
    width:200px;
}


.smalladdbutton{
    padding-top:2px;
    display:table;
    margin-left:auto;
    margin-right:auto;
}

.icons {
    max-height:20px;
    max-width:20px;
    font-size:20px;
    margin-left:auto;
    margin-right:auto;
    display:table;
    background-color: var(--icon);
}

.icons-big {
    max-height:30px !important;
    max-width:30px !important;
    font-size:30px !important;
}

.iconsadv {
    background-color: var(--advance) !important;
}

.icon-add {
    mask: url(../img/icons/icon_add.svg);
    mask-repeat: no-repeat;
    mask-size: contain;

    -webkit-mask: url(../img/icons/icon_add.svg);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
}
.icon-blackboard {
    mask: url(../img/icons/icon_blackboard.svg);
    mask-repeat: no-repeat;
    mask-size: contain;

    -webkit-mask: url(../img/icons/icon_blackboard.svg);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
}
.icon-close {
    mask: url(../img/icons/icon_close.svg);
    mask-repeat: no-repeat;
    mask-size: contain;
    
    -webkit-mask: url(../img/icons/icon_close.svg);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
}
.icon-copy {
    mask: url(../img/icons/icon_copy.svg);
    mask-repeat: no-repeat;
    mask-size: contain;
    
    -webkit-mask: url(../img/icons/icon_copy.svg);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
}
.icon-delete {
    mask: url(../img/icons/icon_delete.svg);
    mask-repeat: no-repeat;
    mask-size: contain;
    
    -webkit-mask: url(../img/icons/icon_delete.svg);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
}
.icon-edit {
    mask: url(../img/icons/icon_edit.svg);
    mask-repeat: no-repeat;
    mask-size: contain;
    
    -webkit-mask: url(../img/icons/icon_edit.svg);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
}
.icon-filter2 {
    mask: url(../img/icons/icon_filter2.svg);
    mask-repeat: no-repeat;
    mask-size: contain;
    
    -webkit-mask: url(../img/icons/icon_filter2.svg);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
}
.icon-ftp {
    mask: url(../img/icons/icon_ftp.svg);
    mask-repeat: no-repeat;
    mask-size: contain;
    
    -webkit-mask: url(../img/icons/icon_ftp.svg);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
}
.icon-globe {
    mask: url(../img/icons/icon_globe.svg);
    mask-repeat: no-repeat;
    mask-size: contain;
    
    -webkit-mask: url(../img/icons/icon_globe.svg);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
}
.icon-unselect {
    mask: url(../img/icons/icon_heart_unselect.svg);
    mask-repeat: no-repeat;
    mask-size: contain;
    
    -webkit-mask: url(../img/icons/icon_heart_unselect.svg);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
}
.icon-heart_select {
    mask: url(../img/icons/icon_heart_select.svg);
    mask-repeat: no-repeat;
    mask-size: contain;
    
    -webkit-mask: url(../img/icons/icon_heart_select.svg);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
}
.icon-info {
    mask: url(../img/icons/icon_info.svg);
    mask-repeat: no-repeat;
    mask-size: contain;
    
    -webkit-mask: url(../img/icons/icon_info.svg);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
}
.icon-key {
    mask: url(../img/icons/icon_key.svg);
    mask-repeat: no-repeat;
    mask-size: contain;
    
    -webkit-mask: url(../img/icons/icon_key.svg);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
}
.icon-customers {
    mask: url(../img/icons/icon_customers.svg);
    mask-repeat: no-repeat;
    mask-size: contain;
    
    -webkit-mask: url(../img/icons/icon_customers.svg);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
}
.icon-mail {
    mask: url(../img/icons/icon_mail.svg);
    mask-repeat: no-repeat;
    mask-size: contain;
    
    -webkit-mask: url(../img/icons/icon_mail.svg);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
}
.icon-off {
    mask: url(../img/icons/icon_off.svg);
    mask-repeat: no-repeat;
    mask-size: contain;
    
    -webkit-mask: url(../img/icons/icon_off.svg);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
}
.icon-save {
    mask: url(../img/icons/icon_save.svg);
    mask-repeat: no-repeat;
    mask-size: contain;
    
    -webkit-mask: url(../img/icons/icon_save.svg);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
}
.icon-search {
    background-color: var(--black) !important;

    mask: url(../img/icons/icon_search.svg);
    mask-repeat: no-repeat;
    mask-size: contain;

    -webkit-mask: url(../img/icons/icon_search.svg);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
}
.icon-settings {
    mask: url(../img/icons/icon_settings.svg);
    mask-repeat: no-repeat;
    mask-size: contain;
    
    -webkit-mask: url(../img/icons/icon_settings.svg);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
}
.icon-smartphone {
    mask: url(../img/icons/icon_smartphone.svg);
    mask-repeat: no-repeat;
    mask-size: contain;
    
    -webkit-mask: url(../img/icons/icon_smartphone.svg);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
}
.icon-user {
    mask: url(../img/icons/icon_user.svg);
    mask-repeat: no-repeat;
    mask-size: contain;

    -webkit-mask: url(../img/icons/icon_user.svg);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
}

.favoriteicon {
    margin-right: 10px;
    margin-top:5px;
    cursor:pointer;
}

.isFav {

}

.noFav {

}

a {
    color: inherit;
}

.outputdiverror {
    position: absolute; 
    bottom: 0;
}

.select-customer {    
    background-color: var(--white) !important;
    color : var(--black);
    font-size:20px;
    width: 95%;
    height:50px;
    padding-top: 10px;
    padding-bottom: 5px;
    padding-left: 30px;
    padding-right: 30px;
    font-family:RobotoCondensed-Light;
}

.modal-table {
    width:100%;
}

.modal-table td {
    width: 50%;
}

.modalerror {
    color : var(--input-colors);
    text-transform: uppercase;
    width:90%;
    height:100px;
    text-align:center;
}

.modal-closeimage {
    width:24px;
    height:24px;
    float:right;
    content:url("../img/icons/icon_close.png");
}

.modal-inner {
    float:left;
    width:90%;
}

.no-uppercase {
    text-transform: none !important;
}

.modal-title {
    color : var(--input-colors);
    text-transform: uppercase;
    font-family:Oswald-Bold;
}

.modal-button {
    margin-left:20px;
    margin-right:20px;
    margin-top:20px;
    cursor:pointer;
}

.modal-input {
    background-color: var(--white) !important;
    color : var(--black);
    font-size:20px;
    width: 95%;
    height:50px;
    padding-left: 30px;
    padding-right: 30px;
    font-family: RobotoCondensed-Light;
}

.modal-input::placeholder {
    font-style:italic;
}

.modal-inputtitle {
    color : var(--input-colors);
    font-family:Oswald-Bold;
}

.modal-buttons {
    position:absolute;
    bottom:10px;
    width:90%;
    text-align:center;
}




/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
  
/* Modal Content */
.modal-content {
    background-color: gray;
    background-position:left;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width:720px;
    position:relative;
    height:auto !important;
    display:flow-root;
}

/* The Close Button */
.close {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}
  
.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}






/* Blackboard */

#newblackboardpost {
    min-height:80px;
}

.ownpost {
    width:50%;
    min-height:80px;
}

.posttextarea {
    min-height:80px;
    min-width:80%;
    max-width:80%;
    font-size:16pt;

    background-color: var(--white);
    color: var(--black);
    border: 2px solid var(--black);
}

.userpost {
    background-color:var(--white);
    max-width: 40%;
    border-radius: 20px;
    margin: 20px;
    padding: 20px;
    float:left;
    min-width: 15%;
    word-wrap:anywhere;
    color:var(--black);
    border:solid 2px var(--black);
}







/* Reports / Zugriffsliste */
#reporttable,
#reporttable > tr > td,
#reporttable > tr > th,
#accesslisttable,
#accesslisttable > tr > td,
#accesslisttable > tr > th {
    border:var(--input-colors) 1px solid;
    border-collapse: collapse;
    padding:10px;
}



@media screen and (max-height:650px) {
    .menuoptions tr {
        line-height:40px;
    }
}

@media screen and (max-height:1080px) {
    .body_startpage {
        background-image:url('../img/mainbg-s.jpg');
        background-repeat: no-repeat;
        background-size: 100%;
    }
}


@media screen and (max-height:760px) {
    .tutorial-navheight {
        line-height: 25px !important;
    }
}


@media screen and (max-width: 1700px) {

    .menucontainer {
        width: 250px !important;
    }

    .modal-input {
        padding-left: 0px !important;
    }

    #log-filter-Beschreibung {
        width: 250px !important;
    }

    .foreigninfo {
        width: 350px !important;
    }

    .redbutton-long {
        padding-left: 10px !important;
        padding-right: 10px !important;        
    }

    .panel {
        left:300px;
        top:50px;
        bottom:50px;
        right:50px;
    }
}