﻿/* #########################  FaciTask  ######################### */
/* Core: */
    /* open-sans-regular - latin-ext_latin */
    @font-face {
      font-family: 'Open Sans';
      font-style: normal;
      font-weight: 400;
      src: local('Open Sans Regular'), local('OpenSans-Regular'),
           url('../font/open-sans-v17-latin-ext_latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
           url('../font/open-sans-v17-latin-ext_latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
    }
    /* open-sans-600 - latin-ext_latin */
    @font-face {
      font-family: 'Open Sans';
      font-style: normal;
      font-weight: 600;
      src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'),
           url('../font/open-sans-v17-latin-ext_latin-600.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
           url('../font/open-sans-v17-latin-ext_latin-600.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
    }
    /* open-sans-700 - latin-ext_latin */
    @font-face {
      font-family: 'Open Sans';
      font-style: normal;
      font-weight: 700;
      src: local('Open Sans Bold'), local('OpenSans-Bold'),
           url('../font/open-sans-v17-latin-ext_latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
           url('../font/open-sans-v17-latin-ext_latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
    }
    html {
        
    }
    body {
        font-family: 'Open Sans', sans-serif;
        font-size: 12px;
        padding: 0;
        margin: 0;
    }
    b{
        font-weight: 700;
    }
    h1{
        font-weight: 400;
    }
    h3{
        font-size: 16px;
        font-weight: 600;
    }
/* Core. */

/* Layout: */
    #load{
        position: fixed;
        width: 100%;
        height: 100%;
        background: #fff;
        margin: 0;
        padding: 0;
        z-index: 9999;
    }

    #menu {
        position: fixed;
        top: 0;
        left: 0;
        width: 375px;
        height: 100%;
        border-right: solid 1px #f1f1f1;
        box-shadow: -5px 0 9px #000;
        z-index: 9;
    }
        #menu #logo{
            position: fixed;
            top: 0;
            left: 0;
            background: #fff;
            z-index: 99;
            border-bottom: solid 1px #dddddd;
            width: 375px;
            height: 68px;
        }
            #menu #logo > img{
                height: 36px;
                padding: 16px 0 0 16px;
            }
            #menu-hide{
                position: absolute;
                top: 6px;
                right: 0px;
                padding: 20px;
                font-weight: bold;
                cursor: pointer;
            }
                #menu-hide img{
                    width: 16px;
                    height: 16px;
                    padding: 0;
                }
            #menu-show{
                display: none;
                position: absolute;
                top: 6px;
                right: -2px;
                padding: 20px;
                font-weight: bold;
                cursor: pointer;
            }
                #menu-show img{
                    width: 16px;
                    height: 16px;
                    padding: 0;
                }
        #dx-menu{
            padding-top: 69px;
        }

    #content {
        display: block;
        width: calc(100% - 415px);
        min-height: calc(100% - 64px);
        overflow-x: hidden;
        overflow-y: auto;
        position: absolute;
        top: 0;
        left: 375px;
        padding: 0 20px 64px 20px;
    }
        h2.content-block{
            margin: 0 -25px 20px -25px;
            padding: 16px 20px 0 25px;
            height: 52px;
            border-bottom: solid 1px #dddddd;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            font-size: 2em;
            font-weight: 400;
        }
            h2.content-block span{
                color: #ccc;
                font-size: 20px;
            }
        .ft-row{
            border-bottom: solid 1px #ddd;
            margin: 0 -25px 0 -25px;
            padding: 0 25px 25px 25px;
        }
            .ft-row-comlpaint{
                background: #d9603f;
                color: #fff;
                padding: 10px 25px 10px 25px;
                font-weight: 600;
            }
            .ft-btn-row{
                text-align: end;
            }
        .ft-last-row{
            margin: 0 -25px 0 -25px;
            padding: 0 25px 0 25px;
        }
            .ft-row h3,
            .ft-last-row h3{
                font-size: 16px;
                font-weight: 600;
            }
       .ft-last-button-row{
            margin: 10px -25px 0 -25px;
            padding: 0 25px 0 25px;
            float: right;
        }
           .ft-last-button-row .ft-btn-link{
               margin: 15px 0 0 15px;
           }

    #ft-footer{
        width: calc(100% - 40px);
        height: 18px;
        padding: 10px 20px;
        border-top: solid 1px #f1f1f1;
        position: absolute;
        bottom: 0;
        left: 0;
        background: #f9f9f9;
        color: #999;
        text-align: center;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }

/* Layout. */

/* Menü: */
    #dx-menu.dx-widget {
        font-family: 'Open Sans', sans-serif;
        font-size: 12px;
    }
    #dx-menu .dx-treeview-item {
        padding: 10px 10px 9px 5px;
        min-height: 20px;
        border-bottom: solid 1px #ddd;
        color: #777;
    }
    #dx-menu .dx-treeview-item-without-checkbox.dx-state-selected > .dx-treeview-item{
        background: rgb(249, 249, 249);
    }
    #dx-menu .dx-treeview-node {
        padding-left: 0;
    }
        #dx-menu .dx-treeview-node .dx-treeview-item {
            padding-left: 26px;
        }
            #dx-menu .dx-treeview-node .dx-treeview-node .dx-treeview-item {
                padding-left: 54px;
            }
                #dx-menu .dx-treeview-node .dx-treeview-node .dx-treeview-node .dx-treeview-item {
                    padding-left: 80px;
                }                
                    #dx-menu .dx-treeview-node .dx-treeview-node .dx-treeview-node .dx-treeview-node .dx-treeview-item {
                        padding-left: 108px;
                    }
        #dx-menu .dx-treeview-item .dx-icon {
            font-size: 16px;
            color: #32538D;
            margin-right: 10px;
        }
        #dx-menu .dx-treeview-toggle-item-visibility {
            left: 0;
        }
            #dx-menu .dx-treeview-toggle-item-visibility:before {
                margin-top: -10px;
            }   
                #dx-menu .dx-treeview-node .dx-treeview-node .dx-treeview-toggle-item-visibility:before {
                    width: 76px;
                }                
                    #dx-menu .dx-treeview-node .dx-treeview-node .dx-treeview-node .dx-treeview-toggle-item-visibility:before {
                        width: 124px;
                    }
    #dx-menu .help-item{
        margin: -10px -10px -9px -54px;
        padding: 10px 0 9px 54px;
        display: block;
        color: #777777 !important;
    }
        #dx-menu .help-item:visited, #dx-menu .help-item:focus, #dx-menu .help-item:active{
            color: #777777 !important;
        }
        #dx-menu .help-item i{
            margin-top: -3px;
        }
    .admin-note-icon::after{
        display: block;
        width: 10px;
        height: 10px;
        content: url(../img/ico-user-note.svg);
        position: relative;
        top: -25px;
        left: 113px;
    }
/* Menü. */

/* Step-By-Step Progressbar: */
    .progress {
        position: relative;
        display: flex;
        margin: 35px 0 10px 0;
    }
        .progress .progress-track {
            position: absolute;
            top: 10px;
            width: 100%;
            height: 5px;
            background-color: #dfe3e4;
            z-index: -1;
        }
        .progress .progress-step {
            position: relative;
            width: 100%;
            font-size: 12px;
            text-align: center;
        }
            .progress .progress-step:last-child:after {
                display: none;
            }
            .progress .progress-step:before {
                content: "\f00c";
                display: flex;
                margin: 0 auto;
                padding: 4px 0 0 4px;
                margin-bottom: 10px;
                width: 15px;
                height: 15px;
                background: #fff;
                border: 2px solid #dfe3e4;
                border-radius: 100%;
                color: transparent;
            }
            .progress .progress-step:after {
                content: "";
                position: absolute;
                top: 10px;
                left: 50%;
                width: 0%;
                height: 5px;
                background: #dfe3e4;
                z-index: -1;
            }
            .progress .progress-step.is-active {
                color: #79a697;
                font-weight: bold;
            }
            .progress .progress-step.is-active:before {
                border: 2px solid #777;
                animation: pulse 2s infinite;
                font-family: 'Font Awesome 5 Free';
                font-weight: 900;
                font-size: 10px;
                color: #fff;
                background: #79a697;
                border: 2px solid transparent;
            }
            .progress .progress-step.is-active-canceled {
                color: #d9603f;
                font-weight: bold;
            }
            .progress .progress-step.is-active-canceled:before {
                animation: pulse-canceled 2s infinite;
                font-family: 'Font Awesome 5 Free';
                font-weight: 900;
                content: "\f00d";
                display: flex;
                margin: 0 auto;
                padding: 3px 0 0 5px;
                margin-bottom: 10px;
                width: 13px;
                height: 15px;
                background: #d9603f;
                border: 2px solid #d9603f;
                border-radius: 100%;
                color: #fff;
            }
            .progress .progress-step.is-complete {
                color: #79a697;
            }
            .progress .progress-step.is-complete:before {
                font-family: 'Font Awesome 5 Free';
                font-weight: 900;
                font-size: 10px;
                color: #fff;
                background: #79a697;
                border: 2px solid transparent;
            }
            .progress .progress-step.is-complete:after {
                background: #c5d4e4;
                width: 100%;
            }
    @keyframes pulse {
        0% {
            box-shadow: 0 0 0 0 rgba(121, 166, 151, 0.6);
        }
        70% {
            box-shadow: 0 0 0 10px rgba(121, 166, 151, 0);
        }
        100% {
            box-shadow: 0 0 0 0 rgba(121, 166, 151, 0);
        }
    }
    @keyframes pulse-canceled {
        0% {
            box-shadow: 0 0 0 0 rgba(217, 96, 63, 0.6);
        }
        70% {
            box-shadow: 0 0 0 10px rgba(217, 96, 63, 0);
        }
        100% {
            box-shadow: 0 0 0 0 rgba(217, 96, 63, 0);
        }
    }
/* Step-By-Step Progressbar. */

/* DevExtreme: */
    .dx-widget{
        /*font-family: sans-serif;*/
        font-family: 'Open Sans', sans-serif;
        font-size: 12px;
    }
    .dx-card{
        border-radius: 0;
    }
    .dx-box-item-content {
        font-size: 12px;
    }
    .dx-datagrid-search-text{
        color: #000;
        background-color: #ff0;
    }
    .dx-datagrid-header-panel{
        background: #f9f9f9;
        padding: 10px 10px 0 10px;
    }
        .dx-datagrid-header-panel .dx-toolbar {
            background: #f9f9f9;
            padding: 0 10px 0 5px;
        }
    .dx-header-row {
        background: #32538D;
        border: solid 1px #1f3459;
        color: #fff;
    }
        .dx-datagrid-headers .dx-datagrid-table .dx-header-row > td {
            border-left: solid 1px #1f3459;
            border-right: solid 1px #1f3459;
            border-bottom: solid 1px #1f3459;
        }
        .dx-datagrid-headers .dx-datagrid-table .dx-row > td{
            padding:7px;
            color: #fff;
        }
            .dx-datagrid-headers .dx-datagrid-table .dx-row>td .dx-sort, .dx-datagrid-headers .dx-datagrid-table .dx-row>td .dx-sort-indicator, .dx-datagrid-headers .dx-datagrid-table .dx-row>td:hover .dx-datagrid-text-content{
                color: #fff;
            }
            .dx-datagrid .dx-header-filter.dx-header-filter-empty {
                color: rgba(255, 255, 255, 0.5);
            }
            .dx-datagrid .dx-header-filter {
                color: #fff;
            }
            .dx-datagrid-header-panel .dx-header-filter.dx-header-filter-empty {
                color: #ddd;
            }
            .dx-datagrid-header-panel .dx-header-filter {
                color: rgba(149, 149, 149, 0.5);
            }
    .dx-datagrid-filter-panel {
        padding: 14px 20px 14px 25px;
    }
    .dx-datagrid-pager{
        border-top: solid 1px #cccccc;
        padding: 5px 20px;
        font-weight: bold;
    }
    /* Zeilen markieren*/
    .dx-selection td {
        background: #d0dbee !important;
        border-color: #a5bbde !important;
        color: #333;
    }
    /* Grid-Icons*/
    .dx-datagrid .dx-datagrid-content .dx-datagrid-table .dx-row .dx-command-edit-with-icons .dx-link{
        color: #32538D;
        font-size: 14px;
    }
    /* Filter */
    .dx-datagrid-filter-panel .dx-datagrid-filter-panel-clear-filter, .dx-datagrid-filter-panel .dx-datagrid-filter-panel-text, .dx-datagrid-filter-panel .dx-icon-filter{
        color: #32538D;
    }
        /* Verhindern, dass die Spaltenauswahl teile der Seite blockiert */
        .dx-overlay-wrapper.dx-datagrid-column-chooser.dx-popup-wrapper.dx-datagrid-column-chooser-mode-drag{
            height: 0px !important;
        }
        /* Fix für TagBox */
        #search .dx-show-clear-button.dx-dropdowneditor-button-visible .dx-tag-container{
            padding-right: 0px;
            margin-right: 64px;
        }
        #search .dx-tagbox-single-line.dx-dropdowneditor-button-visible .dx-texteditor-container{
            width: 100%;
        }
        .dx-list:not(.dx-list-select-decorator-enabled) .dx-list-item.dx-state-focused{
            background: #f1f1f1;
            color: #333;
        }
        .dx-list:not(.dx-list-select-decorator-enabled) .dx-list-item.dx-state-focused.dx-list-item-selected{
            background: #f1f1f1;
            color: #333;
        }
        .dx-list:not(.dx-list-select-decorator-enabled) .dx-list-item.dx-state-active,
        .dx-list:not(.dx-list-select-decorator-enabled) .dx-list-item.dx-state-active .dx-list-slide-item-content {
            background: #f1f1f1;
            color: #fff;
        }
        .dx-popup-bottom.dx-toolbar{
            border-top: solid 1px #ddd;
        }
        /*Forms*/
        .dx-form-group-caption{
            font-size: 16px;
        }
            .dx-field-item-label-location-left{
                padding: 5px 10px;
            }
    /* Read-Only: */
        .dx-state-readonly,
        .dx-state-readonly input,
        .dx-state-readonly .dx-texteditor-input,
        .dx-state-readonly.dx-state-hover,
        .dx-state-readonly.dx-state-focused{
            color: #cccccc !important;
            cursor: default !important;
            border-color: #f4f4f4 !important;
        }
        /*Checkbox*/
        .dx-state-readonly .dx-checkbox-icon{
            color: #cccccc !important;
        }
        .dx-state-readonly.dx-state-hover .dx-checkbox-icon,
        .dx-state-readonly.dx-state-focused .dx-checkbox-icon{
            border: solid 1px #f4f4f4 !important;
        }
        /*Radiobutton*/
        .ft-form-item-readonly .dx-radiobutton{
            color: #cccccc;
            cursor: default;
            border-color: #f4f4f4 !important;
        }
            .ft-form-item-readonly .dx-radiobutton .dx-radiobutton-icon-dot{
                background: #cccccc;
            }
            .dx-state-readonly.dx-state-focused .dx-radiobutton-icon:before{
                border: solid 1px #f4f4f4 !important;
            }
        /*TextArea*/
        .ft-form-item-readonly .dx-field-item-help-text, 
        .ft-form-item-readonly .dx-field-item-label-text,
        .ft-form-item-readonly .dx-textarea,
        .ft-form-item-readonly .dx-state-hover .dx-textarea,
        .ft-form-item-readonly .dx-state-focused .dx-textarea,
        .ft-form-item-readonly .dx-texteditor-input{
            color: #cccccc !important;
            cursor: default;
            border-color: #f4f4f4 !important;
        }
        /*Platzhalter*/
        .ft-form-item-readonly .dx-placeholder{
            color: #ccc;
        }
        /*DatatGrid*/
        .dx-row .ft-form-item-readonly{
            background: #fafafa !important;
            border: solid 1px #f1f1f1 !important;
        }
            .dx-row .ft-form-item-readonly .dx-sort{
                color: #ccc !important;
            }
            .dx-row .ft-form-item-readonly .dx-datagrid-text-content{
                color: #ccc !important;
            }
                .dx-row.dx-state-hover .ft-form-item-readonly .dx-datagrid-text-content{
                    color: #ccc !important;
                }
            .dx-row .ft-form-item-readonly{
                color: #ccc !important;
            }            
                .dx-row.dx-state-hover .ft-form-item-readonly{
                    color: #ccc !important;
                }
            .dx-row .ft-form-item-readonly .dx-checkbox-icon{
                color: #ccc;
            }
        .dx-freespace-row .ft-form-item-readonly{
            border-top: none !important;
            border-bottom: none !important;
        }
        .max-column-with{
            max-width: 140px;
        }
        /*Pflichtfeld-Sternchen*/
        .ft-form-item-readonly .dx-field-item-required-mark{
            color: #ccc;
        }
        /*Hinweise*/
        .dx-field-item-help-text{
            margin: 4px 5px 0 0;
            font-style: normal;
            font-size: 10px;
            text-align: end;
        }
    /* Read-Only. */

    /* Checkbox: */ 
        .checkbox-container {
            display: block;
            position: relative;
            cursor: pointer;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            border-bottom: solid 1px #dddddd;
        }
            .checkbox-container input {
                position: absolute;
                opacity: 0;
                cursor: pointer;
                height: 0;
                width: 0;
            }
        .checkmark {
            position: absolute;
            top: 7px;
            left: 20px;
            height: 14px;
            width: 14px;
            background-color: #fff;
            border: solid 1px #ddd;
        }
        .checkbox-container:hover input ~ .checkmark {
            background-color: #fff;
        }
        .checkbox-container input:checked ~ .checkmark {
            background-color: #fff;
        }
        .checkmark:after {
            content: "";
            position: absolute;
            display: none;
        }
        .checkbox-container input:checked ~ .checkmark:after {
            display: block;
        }
        .checkbox-container .checkmark:after {
            left: 5px;
            top: 2px;
            width: 2px;
            height: 6px;
            border: solid #32538D;
            border-width: 0 2px 2px 0;
            -webkit-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            transform: rotate(45deg);
        }
    /* Checkbox. */

    /* FileUploader: */
        #content .dx-fileuploader-input-wrapper, #content .dx-fileuploader-wrapper{
            padding: 0;
            border: none;
        }
    /* FileUploader. */

/* DevExtreme. */

/* Button */
    .ft-btn-link{
        display: inline-block;
        margin:  0 15px 15px 0;
        padding: 7px 18px 8px;
        background-color: #fff;
        border: solid #ddd 1px;
        border-radius: 4px;
        color: #333;
        text-decoration: none;
    }
        .ft-btn-link:hover {
            background-color: #f5f5f5;
            border-color: #ddd;
        }
        .ft-btn-link:focus {
            background-color: #ebebeb;
            border-color: #ddd;
        }
        .ft-btn-link:active {
            background-color: #c2c2c2;
            border-color: #ddd;
        }
/* TaskList: */
    #dataGridTaskList .dx-data-row{
        cursor: pointer;
    }
    #tasklist-delete-all-btn, #tasklist-finish-all-btn, #tasklist-cancel-all-btn, #tasklist-finish-from-new-all-btn{
        margin: 15px 0 0 15px;
    }
        /*Kommentarfeld*/
        #tasklist-cancellation-reason,
        #tasklist-finish-comment,
        #tasklist-finishnew-comment{
            margin: 20px 0 20px 0;
            height: 90px;
        }
        /*Ausführen*/
        #btn-tasklist-delete,
        #btn-tasklist-cancellation,
        #btn-tasklist-finish,
        #btn-tasklist-finishnew{
            position: absolute;
            bottom: 20px;
            right: 130px;
        }
        /*Abbrechen*/
        #btn-tasklist-delete-close,
        #btn-tasklist-cancellation-close,
        #btn-tasklist-finish-close,
        #btn-tasklist-finishnew-close{
            position: absolute;
            bottom: 20px;
            right: 20px;
        }

        /* Zeilenumbrüche ermöglichen */
            #dataGridTaskList .dx-data-row{
                white-space: pre-line;
            }
            .dx-header-filter-menu .dx-list-item-content{
                white-space: pre-line;
            }

        /* Icon-Anhänge */
        .task-list-attachment i{
            padding: 0 8px 6px 0;
        }
        .task-list-attachment a, .task-list-attachment a:active, .task-list-attachment a:focus, .task-list-attachment a:visited{
            color: #333;
            text-decoration: none;
            padding: 3px;
        }
            .task-list-attachment a:hover{
                background: #e9e9e9;
            }
        /* Fehlermeldung - OK */
        #btn-message-close{
            position: absolute;
            bottom: 20px;
            left: calc(50% - 30px);
        }


/* TaskList. */

/* NewTask: */
    #partial-issues-grid.dx-card{
        border: none;
    }
        #partial-issues-grid .dx-header-row{
            background: #d9603f;
            border: solid 1px #d9603f;
        }
            #partial-issues-grid .dx-datagrid-headers .dx-datagrid-table .dx-header-row > td{
                border: none;
            }
            #partial-issues-grid .dx-datagrid .dx-row > td{
                border-left: solid 1px #ddd;
                border-right: solid 1px #ddd;
            }
    .new-task-button-row {
        padding: 0 !important;
    }
    .new-task-button-row .dx-box-flex{
        display: inline !important;
    }
        .new-task-button-row .dx-item{
            float: right;
        }
            .new-task-button-row .dx-layout-manager .dx-field-item:not(.dx-first-row){
                padding: 0;
            }
                .new-task-button-row #save,
                .new-task-button-row #saveattachment{
                    margin: 15px 0 0 15px;
                }
/* NewTask. */

/* EditTask: */
    .ft-comment{
        background: #f9f9f9;
        padding: 16px 25px 8px 25px
    }
        .ft-comment h3{
            margin: 0;
        }
        .ft-comment p{
            margin: 8px 0 16px 0;
        }
        .ft-comments{
            white-space: pre-line;
        }

    #ft-cancel-task-btn, 
    #ft-cancel-task-from-higher-role-btn, 
    #ft-finish-task-from-new-state-btn, 
    #ft-finish-task-btn, 
    #ft-print-task-btn, 
    #ft-copy-task-btn{
        margin: 0 15px 10px 0;
    }
        /*Kommentarfeld*/
        #edittask-finish-comment, 
        #edittask-finish-new-comment, 
        #edittask-cancel-comment,
        #edittask-finish-gridbutton-comment{
            margin: 20px 0 0 0;
            height: 90px;
        }
        /*Ausführen*/
        #btn-edittask-start-complaint,
        #btn-edittask-copy-task, 
        #btn-edittask-cancel-task, 
        #btn-edittask-finish-comment, 
        #btn-edittask-finish-new-comment, 
        #btn-deleteattachement-cancel-task, 
        #btn-edittask-cancel-task, 
        #btn-edittask-cancel-task-creator,
        #btn-edittask-finish-gridbutton-comment,
        #btn-edittask-finish-gridbutton-time{
            position: absolute;
            bottom: 20px;
            right: 130px;
        }
        /*Abbrechen*/
        #btn-edittask-start-complaint-close,
        #btn-edittask-copy-task-close, 
        #btn-edittask-cancel-task-close, 
        #btn-edittask-finish-comment-close, 
        #btn-edittask-finish-new-comment-close, 
        #btn-deleteattachement-cancel-task-close, 
        #btn-edittask-cancel-task-close, 
        #btn-edittask-cancel-task-creator-close,
        #btn-edittask-finish-gridbutton-comment-close,
        #btn-edittask-finish-gridbutton-time-close{
            position: absolute;
            bottom: 20px;
            right: 20px;
        }
    /*#assignment-finish-btn,*/ 
    #assignmentTimes-finish-btn{
        margin: 15px 0 0 0;
    }
    .ft-contractor-assignment .dx-checkbox{
        margin: 0 10px 10px 0;
    }
    /* Liste header Anhänge */
    .ft-et-existing-attachements-hide{
        display: none;
    }
    .copy-task-popup td{
        vertical-align: baseline;
    }
        .copy-task-popup td:first-child{
            min-width: 220px;
        }
        .copy-task-popup td ul{
            padding-left: 18px;
        }
    /* Liste der nicht hochgeladenen Anhänge*/
    .invalid-files div{
        padding: 15px 0 0 0;
        color: #d9534f;
    }
/* EditTask. */

/* E-Mail-Templates: */
    #email-template-legend{
        margin: 20px 0 0 0;
    }
        #email-template-legend h3{
            font-size: 16px;
            font-weight: 600;
            margin: 15px 0 0 0;
        }
            #email-template-legend span{
                display: inline-block;
                padding: 2px;
                background: #ddd;
                border-radius: 2px;
            }
    #email-template-legend .table{
        display: table;
        border-spacing: 10px;
        margin: 15px 0 15px 0;
    }   
        #email-template-legend .table-row{
            display: table-row;
        }
            #email-template-legend .table-cell:first-child{
                min-width: 200px;
            }
            #email-template-legend .table-cell{
                display: table-cell;
                border-bottom: #f1f1f1;
            }
    @media (max-width: 720px) {
        #email-template-legend .table{
            display: block;
        }   
            #email-template-legend .table-row{
                display: block;
                margin-bottom: 8px;
            }
                #email-template-legend .table-cell{
                    display: block;
                }
    }
/* E-Mail-Templates. */

/* FaciPlan Online Visualisierung: */
    #fpo-vis-switch-label{
        position: absolute;
        right: 80px;
        margin-top: -36px;
        color: #aaa;
    }
    #fpo-vis-switch{
        position: absolute;
        right: 20px;
        margin-top: -39px;
    }
    .fpo-vis-left{
        margin-right: 15px;
    }
    .fpo-vis-right{
        margin-left: 15px;
    }
        .fpo-vis-left h4, .fpo-vis-right h4{
            font-size: 16px;
            font-weight: normal;
            border-bottom: solid 1px #ddd;
            margin: 0 0 19px 0;
            padding: 0 0 5px 0;
        }
        #fpoiframemultiarea, #fpoiframeperson{
            border: solid 1px #ccc;
            margin-top: 10px;
            display: none;
        }
    #dropdown-fpmultiarea, #dropdown-fpperson{
        margin-bottom: 6px;
    }     
    #embedded-datagrid-fpmultiarea .dx-data-row,
    #embedded-datagrid-fpperson .dx-data-row {
        cursor: pointer;
    }
    @media (max-width: 1216px) {
        .fpo-vis-left, .fpo-vis-right{
            margin: 0;
        }
        .fpo-vis-right{
            margin-top: 20px;
        }
    }

/* FaciPlan Online Visualisierung. */

/* Fehler- / Erfolgsmeldung: */
    .dx-toast .dx-overlay-content{
        font-family: 'Open Sans', sans-serif;
        font-size: 12px;
        width: 100% !important;
        transform: none !important;
        bottom: 0px !important;
        top: initial !important;
        padding: 5px 20px 5px 20px;
        opacity: 0.9 !important;
        border-radius: 0 !important;
    }
        .dx-toast .dx-toast-icon{
            width: 16px !important;
            height: 16px;
        }
/* Fehler- / Erfolgsmeldung. */

/* FaciTask Popup-Form: */
    .ft-popup-form{
        width: calc(100% - 376px) !important;
        height: 100% !important;
        left: 376px !important;
        transform: none !important;
        border-radius: 0px !important;
        border-top: none !important;
        border-bottom: none !important;
        border-right: none !important;
    }
        .ft-popup-form .dx-popup-title.dx-toolbar .dx-toolbar-label{
            font-size: 24px;
        }
        .ft-popup-form .dx-popup-title{
            padding: 15px 20px 17px 18px;
        }
        .ft-popup-form .dx-popup-content{
            padding: 0;
        }
            .ft-popup-form .dx-popup-content .dx-form{
                padding: 19px;
            }
    .ft-popup-form-big{
        width: calc(100% - 55px) !important;
        height: 100% !important;
        left: 55px !important;
    }

    .ft-hide-scrollbar::-webkit-scrollbar {
        display: none;
    }
    .ft-hide-scrollbar{
        -ms-overflow-style: none;  /* IE and Edge */
        scrollbar-width: none;  /* Firefox */
    }
/* FaciTask Popup-Form. */

/* Report-Liste: */
    .report-link,
    .report-designer-link {
        color: #333;
        text-decoration: none;
    }  
        .report-link:hover, .report-link:focus, .report-link:active, .report-link:visited,
        .report-designer-link:hover, .report-designer-link:focus, .report-designer-link:active, .report-designer-link:visited{
            color: #333;
        }
    .report-link i,
    .report-designer-link i{
        padding: 0 8px 0 0;
    }
/* Report-Liste. */

/* Popup: */
    .ft-popup-btn-row{
        border-top: solid 1px #ddd;
        margin: 0;
        position: absolute;
        bottom: 0;
        right: 0;
        width: 100%;
        height: 75px;
    }
    .dx-popup-bottom.dx-toolbar .dx-toolbar-items-container .dx-toolbar-center{
        margin: 0;
        float: right !important;
    }
/* Popup. */

/* Loadscreen: */
    .load-screen {
        position: fixed;
        left: 0px;
        bottom: 0px;
        width: 100%;
        height: 100%;
        z-index: 9999;
        background-color: rgba(0, 0, 0, 0.6);
        cursor: progress;
        display: none;
    }
        .load-screen span {
            position: fixed;
            top: calc(50% + 40px);
            left: 0;
            font-size: 24px;
            color: #ddd;
            width: 100%;
            text-align: center;
        }
/* Loadscreen. */

/* Loadscreen-Spinner */
    .loader {
        display: block;
        width: 96px;
        height: 96px;
        position: absolute;
        border: 4px solid #FBFBFB;
        top: calc(50% - 95px);
        left: calc(50% - 48px);
        animation: loader 4s infinite ease;
    }
        .loader-inner {
            vertical-align: top;
            display: inline-block;
            width: 100%;
            background-color: #FBFBFB;
            animation: loader-inner 4s infinite ease-in;
        }
    @keyframes loader {
        0% {
            transform: rotate(0deg);
        }
        25% {
            transform: rotate(180deg);
        }
        50% {
            transform: rotate(180deg);
        }
        75% {
            transform: rotate(360deg);
        }
        100% {
            transform: rotate(360deg);
        }
    }
    @keyframes loader-inner {
        0% {
            height: 0%;
        }
        25% {
            height: 0%;
        }
        50% {
            height: 100%;
        }
        75% {
            height: 100%;
        }
        100% {
            height: 0%;
        }
    }
/* Loadscreen-Spinner */

/* Restart-Spinner: */
    .sk-cube-grid {
        display: none;
        width: 96px;
        height: 96px;
        position: absolute;
        top: calc(50% - 91px);
        left: calc(50% - 44px);
    }

    .sk-cube-grid .sk-cube {
        width: 33%;
        height: 33%;
        background-color: #fff;
        float: left;
        -webkit-animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
        animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out; 
    }
    .sk-cube-grid .sk-cube1 {
        -webkit-animation-delay: 0.2s;
        animation-delay: 0.2s; 
    }
    .sk-cube-grid .sk-cube2 {
        -webkit-animation-delay: 0.3s;
        animation-delay: 0.3s;
    }
    .sk-cube-grid .sk-cube3 {
        -webkit-animation-delay: 0.4s;
        animation-delay: 0.4s;
    }
    .sk-cube-grid .sk-cube4 {
        -webkit-animation-delay: 0.1s;
        animation-delay: 0.1s;
    }
    .sk-cube-grid .sk-cube5 {
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s; 
    }
    .sk-cube-grid .sk-cube6 {
        -webkit-animation-delay: 0.3s;
        animation-delay: 0.3s; 
    }
    .sk-cube-grid .sk-cube7 {
        -webkit-animation-delay: 0s;
        animation-delay: 0s;
    }
    .sk-cube-grid .sk-cube8 {
        -webkit-animation-delay: 0.1s;
        animation-delay: 0.1s; 
    }
    .sk-cube-grid .sk-cube9 {
        -webkit-animation-delay: 0.2s;
        animation-delay: 0.2s;
    }

    @-webkit-keyframes sk-cubeGridScaleDelay {
        0%, 70%, 100% {
            -webkit-transform: scale3D(1, 1, 1);
            transform: scale3D(1, 1, 1);
        } 35% {
            -webkit-transform: scale3D(0, 0, 1);
            transform: scale3D(0, 0, 1); 
        }
    }

    @keyframes sk-cubeGridScaleDelay {
        0%, 70%, 100% {
            -webkit-transform: scale3D(1, 1, 1);
            transform: scale3D(1, 1, 1);
        } 35% {
            -webkit-transform: scale3D(0, 0, 1);
            transform: scale3D(0, 0, 1);
        } 
    }
/* Restart-Spinner. */