/*:root {
    --header_backcolor:pink;
    --backcolor_breadcrumb: #e9ecef;
    --backcolor_body_normal: #f9f9f9;
    --backcolor_body_online: white;
    --backcolor_footer: white;
    --backcolor_action_button: #d9534f;
    --backcolor_graphics: #2F4A6D;
    --forecolor_action_button: white;
    --fontcolor_header_menu: #999b9e;
    --fontcolor_text: white;
    --fontcolor_graphics: white;
    --fillcolor_graphics_default: #80cbc4;

    --backcolor_graphics_panel: #80cbc4;
    --color_separator_line: #80cbc4;
    --font_color_footer: #80cbc4;
    --backcolor_doIt_button: #80cbc4;
    --backcolor_cancel_button: #80cbc4;
    --path_logo: #80cbc4;
    --backcolor_header_popup: #80cbc4;
    --backcolor_body_popup: white;
    --fontcolor_header_popup: black;
    --fontcolor_body_popup: black;

    --backcolor_warning_button: black;
    --forecolor_warning_button: black;
    --backcolor_badge_pill: black;
    --forecolor_badge_pill: black;
    --backcolor_status_button: black;
    --forecolor_status_button: black;
    --jumbotron_ztml: #f8f8f8;
    --breadcrumb_fontcolor: #fff;
    --warningText:red;
}
*/
:root {
    --header_backcolor:	    #0F172A;
    --backcolor_breadcrumb: #F9FAFB;
    --backcolor_body_normal: #f9f9f9;
    --backcolor_body_online: white;
    --backcolor_footer: white;
    --backcolor_action_button: #d9534f;
    --backcolor_graphics: #2F4A6D;
    --forecolor_action_button: white;
    --fontcolor_header_menu: #999b9e;
    --fontcolor_text: white;
    --fontcolor_graphics: white;
    --fillcolor_graphics_default: #80cbc4;

    --backcolor_graphics_panel: #80cbc4;
    --color_separator_line: #80cbc4;
    --font_color_footer: #80cbc4;
    --backcolor_doIt_button: #80cbc4;
    --backcolor_cancel_button: #80cbc4;
    --path_logo: #80cbc4;
    --backcolor_header_popup: #80cbc4;
    --backcolor_body_popup: white;
    --fontcolor_header_popup: black;
    --fontcolor_body_popup: black;

    --backcolor_warning_button: black;
    --forecolor_warning_button: black;
    --backcolor_badge_pill: black;
    --forecolor_badge_pill: black;
    --backcolor_status_button: black;
    --forecolor_status_button: black;
    --jumbotron_ztml: #f8f8f8;
    --breadcrumb_fontcolor: #fff;
    --warningText:red;
}
#jumbotron_ztml {
    background-color:  var(--body_backcolor);
    color:var(--text_fontcolor);
    margin-bottom: 0;
}

#footer_ztml {
    background-color: var(--footer_backcolor);
    margin-top: 0;
    color:var(--footer_fontcolor) !important; 
}

#footer_ztml a {
      color: var(--footer_fontcolor) !important;
}

.ui-dialog-titlebar {
    background: var(--headerPopup_backcolor) !important;
    color: var(--headerPopup_fontcolor) !important;
}


.btn-standard {
    background: var(--actionButton_backcolor);
    color: var(--actionButton_fontcolor);
}

.btn-standard:hover {
    background: var(--actionButton_backcolor) !important;
    color: var(--actionButton_fontcolor)!important;  
    box-shadow: 1px 1px 5px white;
}

.btn-standard:focus {
    color: var(--actionButton_fontcolor)!important;  

}

.status_button {
    background-color: var(--statusButton_backcolor) !important;
    color: var(--statusButton_fontcolor) !important;
}

.warningBadge  {
    background-color: var(--warningButton_backcolor);
    color: var(--warningButton_fontcolor)
}
    


.successBtn {
    background-color: var(--successBtn_backcolor);
    color: var(--statusButton_fontcolor)
}

#addBtnBooklet {
    color:var(--successBtn_backcolor)
}
hr {
    border:2px solid var(--horizontalLines)
}

.btn-danger {
    background-color: var(--warningButton_backcolor) !important;
    border:  var(--warningButton_backcolor) !important;
    color: var(--warningButton_fontcolor)!important;
    background-image: none !important
}

.dataTables_wrapper {
    color: var(--forecolor_whiteBackground);
}


.workingPercentageInput {
    background-color: var(--backcolor_workingPercentages);
    color: var(--frontcolor_workingsPercentages)
}
    

#menu_allgemein_ztml {
    background: var(--header_backcolor) !important;
}
.mainNavLink {
    color: var(--headerMenu_fontcolor) !important;
}
/*
#check_in_btn {
    background: var(--backcolor_action_button);
    color: var(--forecolor_action_button);
}
*/
.warningClass {
    color: var(--warningText) !important;

}

.underNavLink a{
    color: var(--breadcrumb_fontcolor) !important;
}

#append_welcome_tag {
    color: var(--text_fontcolor) ;  
}


#version_name {
    color: var(--fontcolor_header_menu);
}
.breadcrumbFigCaption {
    color: var(--breadcrumb_fontcolor);

}
.breadcrumbIcon{
    color: var(--breadcrumb_fontcolor);

}

#breadcrumb_ztml {
    background-color: var(--breadcrumb_backcolor);
    margin-bottom: 0;
    width: 100%;
}



.panel {
    background-color: var(--backcolor_body_normal) !important;
}


#log_out_button {
    background: transparent;
    color: var(--breadcrumb_fontcolor);
}

#log_out_button.button_mobile {
    background: transparent;
    color: var(--backcolor_action_button);
}

/*#eingeben_btn {
    background: var(--backcolor_action_button);
    color: var(--forecolor_action_button);
}*/



#refreshButton {
    float: right;
}



#btn_timestatusGenerate {
    background: var(--backcolor_action_button);
    color: var(--forecolor_action_button);
}

.btn-table-abschliessen {
    background: var(--backcolor_action_button);
    color: var(--forecolor_action_button);
}




#border-line {
    height: 2000px !important;
}

.bar {
    fill: var(--graphics_default_fillcolor);
}

text {
    font-size: 12px;
    fill: var(--fontcolor_graphics);
}

.border_line {
    border: solid var(--color_separator_line) 2px;
    border-radius: 10px;
}

.btn-abbr {
    background-color: var(--backcolor_cancel_button) !important;
}

.btn_doit_color {
    color: var(--actionButton_backcolor) !important;
}

.ui-button {
    background: var(--actionButton_backcolor) !important;
    color: var(--actionButton_fontcolor) !important;
}

.successBtn:hover {
    background: var(--successBtn_backcolor);
    box-shadow: 1px 1px 5px var(--successBtn_fontcolor);
    color: var(--successBtn_fontcolor) !important   ;
}

.ui-widget-content{
    background-color: var(--backcolor_body_normal) !important
}

.ui-dialog-content {
    background-color: var(--backcolor_body_normal) !important;
    color: var(--fontcolor_body_popup) !important;
}

div#admin_icons_div button {
    background-color: transparent !important;
}

div#no_active button {
    background-color: transparent !important;
}

.auswContainer {
    background: var(--graphics_panel_backcolor) !important;
}

.warningButton {
    background-color: var(--warningButton_backcolor) !important;
    color: var(--warningButton_fontcolor) !important;
}

.warningButton:hover {
    background: var(--warningButton_backcolor) !important;
    color: var(--warningButton_fontcolor)!important;  
    box-shadow: 1px 1px 5px white;
}


.badge-pill {
    background-color: var(--backcolor_badge_pill) !important;
    color: var(--forecolor_badge_pill) !important;
}

.loader {
    border: 16px solid #f3f3f3;
    border-radius: 50%;
    border-top: 16px solid #3498db;
    width: 120px;
    height: 120px;
    -webkit-animation: spin 2s linear infinite;
    /* Safari */
    animation: spin 2s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

#loader {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;
    width: 100px;
    height: 100px;
}


select.form-control:not([size]):not([multiple]) {
    height: auto !important;
}


@media (min-width: 992px) {

    .breadcrumb_images.d-none.d-lg-block {

        display: flex !important;
    }




}

@media (max-width: 992px) {



    .ui-widget.ui-widget-content {
        max-width: 400px !important;
    }

    .table {
        max-width: 400px;
    }

    .table>tbody>tr>td {
        padding-left: 0 !important;
        padding-right: 5px !important;
    }

    .table>tbody>tr>th {
        padding-left: 0 !important;
    }

 

    #container {
        width: 100% !important;
    }

  

    #container3 {
        width: 100% !important;
    }

    .footer-copyright {
        font-size: 10px;
    }

    #save_new_firma_btn {
        margin-left: 300px !important;
    }

    #clock {
        width:310px !important
    }
    #check_in_btn {
        width:300px !important
    }
    #check_out_btn {
        width:300px !important
    }
    #no_running_tasks {
        width:300px !important
    }

}

/**
.nav-link:active {
    background-color:black;
}

.nav-link:hover {
    background-color:black;
}
*/


.breadcrumb {
    background-color: #e9ecef;
}

figcaption {
    font-size: 10px;
    color: #000;
}

.icon-runningtask {
    width: 24px;
    height: 24px;
    vertical-align: middle;
    margin-top: -3px;
    fill: currentColor;
    color: #333333;
}

@media (max-width: 992px) {
    #admin_icon {
        display: flex !important;
    }

    #cb {
        margin-left: 5px;
    }

    #append_logout_btn {
        margin-left: auto;
    }

    #append_admin_btn_breadcrumb {
        margin-top: 1rem;
    }

    #appended_version_default {
        text-align: left !important;
        margin-left: -10px;

    }

    /** .button_desktop {
        display: none;
    }
    .button_mobile {
        display: block;
    }*/

}

/**
    @media (min-width:992px) {

        .button_desktop {
            display: block;
        }
        .button_mobile {
            display: none;
        }

    }

*/



.popup_ztml .input-group-addon {
    background: none;
    
}
.input-group-addon {
    background:none
}

input[type=checkbox] {
    height:20px
}

.form-select {
    color: var(--forecolor_whiteBackground)!important
}
.form-control {
    background-color: var(--body_backcolor)!important;
    color: var(--text_fontcolor)!important;
    border:none !important;
    border-radius:0 !important;
    border-bottom: 1px solid var(--text_fontcolor)!important;
    box-shadow:none !important
}
.form-control[disabled] {
    color: var(--text_fontcolor)!important
}

.modal-content {
    background:var(--body_backcolor)!important;
    box-shadow:5px 5px 10px var(--fontcolor_text) !important;
    margin-top:10vh
}

.closeBtn {
    right:0px !important;
    color: var(--fontcolor_text) !important;
    opacity: 0.75 !important;
}

textarea {
    background-color: var(--body_backcolor);
}

.ui-dialog textarea {
    background-color: inherit;
}

.calenderBtn {
    background:none;
}

.calenderBtn span {
    color:var(--text_fontcolor) !important

}

.form-control[disabled], fieldset[disabled] .form-control {
    color: grey !important;
}

#Search {
    border: 1px solid lightgrey;
    border-radius: 5px;
}
@media only screen and (max-width: 992px) {
    table.responsive-table {
      width: 100%;
      border-collapse: collapse;
      border-spacing: 0;
      display: block;
      position: relative;
      /* sort out borders */
    }
    table.responsive-table td:empty:before {
      content: '\00a0';
    }
    table.responsive-table th,
    table.responsive-table td {
      margin: 0;
      vertical-align: top;
    }
    table.responsive-table th {
      text-align: left;
    }
    table.responsive-table thead {
      display: block;
      float: left;
    }
    table.responsive-table thead tr {
      display: block;
      padding: 0 10px 0 0;
    }
    table.responsive-table thead tr th::before {
      content: "\00a0";
    }
    table.responsive-table tbody {
      display: block;
      width: auto;
      position: relative;
      overflow-x: auto;
      white-space: nowrap;
    }
    table.responsive-table tbody tr {
      display: inline-block;
      vertical-align: top;
    }
    table.responsive-table th {
      display: block;
      text-align: right;
    }
    table.responsive-table td {
      display: block;
      min-height: 1.25em;
      text-align: left;
    }
    table.responsive-table tr {
      border-bottom: none;
      padding: 0 10px;
    }
    table.responsive-table thead {
      border: 0;
      border-right: 1px solid rgba(0, 0, 0, 0.12);
    }
    .navbar-light .navbar-nav .nav-link {
        color: #222324;
    }
  }

  #append_welcome_tag {
    font-size: 20px !important;
  }
#append_active_tasks{
  color: var(--breadcrumb_fontcolor);
}
.toast-success {
    background-color:var(--successBtn_backcolor) !important;
    color:var(--successBtn_fontcolor)!important
}
.toast-info {
        background-color:var(--actionButton_backcolor)!important;
    color:var(--actionButton_fontcolor)!important
}

.navLink {
    color: var(--actionButton_fontcolor) !important;
    text-transform: uppercase;
    font-weight: 800;
    letter-spacing: 0.1rem;
    justify-content: space-between;
    display: flex;
    padding: 10px 0px;
}

#navbarSupportedContent {
    border-radius: 0px 20px 20px 20px;
}

#activeTasks {
    color: var(--breadcrumb_fontcolor)
}