/*////////////////
////Elements/////
//////////////*/
@import url('https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700&display=swap');


html{
    overflow-x: hidden;
}

body{
    font-family: Ubuntu !important;
    margin: 0;
    background: rgb(8,29,38) ;
    background: linear-gradient(135deg, rgb(51,78,90) 10%, rgb(8,29,38) 100%);
    height: 100%;
    max-height: 100vh;
    overflow-x: hidden;
}

legend{
    font-family: Ubuntu !important;
}

span{
    transition: all 0.2s linear;
}

a{
    color: white;
    text-decoration: none;
}

a:hover{
    color: lightgray;
    text-decoration: none;
}

textarea, input, select{
    background-color: #91A2AA;
    border: none;
    border-radius: 1px;
}

svg{
    color: white;
}




/*////////////////
//////Fonts//////
//////////////*/



@font-face {
    font-family: 'timamoon';
    src:  url('../fonts/timamoon.eot?lpgbde');
    src:  url('../fonts/timamoon.eot?lpgbde#iefix') format('embedded-opentype'),
    url('../fonts/timamoon.ttf?lpgbde') format('truetype'),
    url('../fonts/timamoon.woff?lpgbde') format('woff'),
    url('../fonts/timamoon.svg?lpgbde#timamoon') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

.icon {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: 'timamoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-time:before {
    content: "\e900";
    font-family: 'timamoon' !important;
    padding-right: 1rem;
    font-size: 24pt;
}
.icon-projekte:before {
    content: "\e901";
    font-family: 'timamoon' !important;
    padding-right: 1rem;
    font-size: 24pt;
}
.icon-aufgaben:before {
    content: "\e902";
    font-family: 'timamoon' !important;
    padding-right: 1rem;
    font-size: 24pt;
}
.icon-user:before {
    content: "\e903";
    font-family: 'timamoon' !important;
    padding-right: 1rem;
    font-size: 24pt;
}
.icon-customer:before {
    content: "\e904";
    font-family: 'timamoon' !important;
    padding-right: 1rem;
    font-size: 24pt;
}
.icon-dashboard:before {
    content: "\e905";
    font-family: 'timamoon' !important;
    padding-right: 1rem;
    font-size: 24pt;
}
.icon-refresh-cw:before {
    content: "\e906";
    font-family: 'timamoon' !important;
    font-size: 0.9rem;
}




/*////////////////
/////Classes/////
//////////////*/

.login, .white{
    color: white;
}


.form-signin {
    width: 100%;
    max-width: 330px;
    padding: 15px;
    margin: auto;
}

.bg-kt{
    background-color: #334E5A;

}


.side-nav {
    background-color: #1D2F38;
    height: 100%;
}

.side-nav-a-lg{
    font-size: 1.1rem;
}

.side-nav-a-lg button{
    background-color: transparent;
    border: none;
}

.nav{
    width: 100%;
    height: 100%;
    min-height: 100vh;
}

.navbar-brand::after{
    content: '';
    height: 120px;
    width: 120px;
    display: inline-block;
}


.active{
    background-color: transparent !important;
    border-left: none!important;
    border-radius: 0!important;
    width: inherit;
}

.active::before{
    content: '';
    display: inline-block;
    position: absolute;
    height: 65px;
    margin-top: -2px;
    left: 2vw;
    width: inherit;
    background-color: #304B58 !important;
    border-left: 5px solid #3180A7 !important;
    border-radius: 0!important;
    z-index: -1;
}

.active-parent{
    z-index: 999;
    padding-left: 2rem !important;
    margin-left: 0!important;
}

.custom-select{
    width: 100% !important;
}

.aufgabe-dropdown, .chosen-container{
    background: #91A2AA url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right .75rem center/8px 10px;
    border: 1px solid #91A2AA;
    border-radius: 0.25rem;
    width: 100% !important;
}


.aufgabe, .chosen-container-single, .chosen-single{
    background: #91A2AA ;
    border: 1px solid #91A2AA !important;
    border-radius: 0.25rem;
    width: 100%;
    box-shadow: none !important;
    height: 35px;
}

.chosenselect{
    max-width: 80vw;
}

.aufgabe:focus{
    background: #91A2AA;
    border: 1px solid #91A2AA;
    border-radius: 0.25rem;
}

.shortTimeHide {
    display: none;
}

.btn-kt{
    background-color: #598398;
    color: white;
    border: none;
    max-height: 2.5rem;
    height: 34px;
}

.btn-kt-success{
    background-color: #3DD8A8;
    color: white;
    border: none;
}

.btn-kt-danger{
    background-color: #D83D5B;
    color: white;
    border: none;
}

.btn-kt-danger:hover, .btn-kt-success:hover{
    color: #eeeeee;
}

.btn-kt svg{
    height: 22px;
}

.btn-kt:hover, .btn-kt:hover .st0{
    color: lightgray !important;
    fill: lightgray;
}

.close{
    margin: -1rem 0rem -1rem auto !important;
}

.close:hover{
    color: #D83D5B !important;
    border: none;
    text-shadow: none;
}

.custom-control-input:checked ~ .custom-control-label::before {
    color: #fff;
    border-color: #3DD8A8;
    background-color: #3DD8A8!important;
}

.vprogress {
    width: 14px;
    font-size: 11px;
    font-weight: bold;
    line-height: 13px;
    padding: 0 0 0 4px;
    color: #fff;
    position: absolute;
    bottom: 0;
    left: 0;
}

.vprogress div {
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    transform: rotate(270deg);
    writing-mode: lr-tb;
    line-height: 14px;
    position: absolute;
    bottom: 62px;
}

.progress-bar p{
    position: relative;
    bottom: 0;
}

.datedm{
    font-size: 14px;
    bottom: 5px !important;
}

.daybar{
    width: 15px;
    margin: 2px;
    position: relative;
    float: left;
    height: 250px;
}

.daybar p{
    position: absolute;
    bottom: -1px;
    margin-bottom: 0;
    color: white;
}


.progress{
    width: 15px;
    height: 200px;
    margin-top: -4vh;
    background-color: transparent;
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-bottom: 2rem;
}
.progress-bar{
    position:absolute;
    height: 100%;
    background-color: #3DD8A8;
    border-radius: 5px;
    width: 100%;
    bottom: 0;
}

.progress .progress-bar p{
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    transform: rotate(270deg);
    position: relative;
    margin-bottom: -15px;
}

.datum{
    position: relative;
    color: white;
    font-size: 0.60rem;
}


.navbar-collapse {
    height: 100%;
    align-items: start;
}

.navbar-toggler-icon{
    width: 50px;
    height: 50px;
}

.navbar-toggler-icon::before{
    content: '';
}

.modal-content{
    background: rgb(51,78,90);
    background: linear-gradient(135deg, rgb(48, 75, 88) 10%, rgb(45, 64, 73) 100%);
    color: white;
}

.thismonth{
    background-color: #334E5A;
    color: white;
    border-radius: 5px;
    border: none;
}

.thismonth button h5{
    color: white;
}

.modal-header{
    background-color: #334E5A;
    border: none;
}

.modal-content{
    border: none;
}

.close {
    color: white;
}

.brgr{
    height: 0px;
    padding: 0px !important;
}

.status{
    background-color: rgba(51,78,90,0.25);
}

.priorityhoch{
    background-color: rgba(216,60,91,0.4);
    border-radius: 0;
    margin-bottom: 1rem;
    color: white;
}

.prioritymittel{
    background-color: rgba(211,217,63,0.4);
    border-radius: 0;
    margin-bottom: 1rem;
    color: white;
}

.priorityniedrig{
    background-color: rgba(63,217,168,0.4);
     border-radius: 0;
     margin-bottom: 1rem;
     color: white;
 }

.customer-border{
    border-left: #3180A7 5px solid !important;
    border-right: #3180A7 5px solid !important;
    border-top: #304A58 !important;
    border-bottom: #304A58 !important;
}

.Projekt-Status{
    color: #3B6976;
    font-weight: 300;
    font-size: 50px;
}

.deadline{
    color: #D88A3D;
}

.time-list{
    background-color: #304A58;
    border-left: #3180A7 5px solid;
    border-right: #3180A7 5px solid;
    border-top: #304A58;
    border-bottom: #304A58;
    border-radius: 0;
    margin-bottom: 1rem;
    color: white;
    height: 3rem;
}

.time-spacer{
    color: rgba(0,0,0,0);
    height: 10px;
}


.customer-internal{
    background-color: #3e5a66;
    padding: 0.5rem;
    border-radius: 3px;
}

.tasks{
    background: rgb(62, 90, 102);
    padding: 1.5rem;
    border-radius: 3px;
}

.loader {
    display: none;
    position: absolute;
    z-index: 99999999;
    left: 40%;
    top: 65%;
    border: 4px solid #3B6976;
    border-radius: 50%;
    width: 120px;
    height: 120px;
    animation: spin 2s linear infinite;
}

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



/*////////////////
///////Ids///////
//////////////*/


#c5, .tx-felogin-pi1{
    height: 100vh;
}


#logo{
    width: 150px;
    height: 150px;
    cursor: pointer;
}

#burger{
    height: 90px;
    top: -85px;
    position: relative;
    width: 100px;
}

#burger_inside{
    height: 70px;
}


#beschreibung, .auswahl{
    width: 100% !important;
}

#time{
    background-color: #304B58;
    color: white;
}

#burger{
    width: 50px;
    margin-right: 1vw;
}

#timeline{
    width: 97%;
    padding-top: 1rem;
    padding-bottom: 1rem;
    margin-left: 15px!important;
    padding-right: 0rem;
}

#zeitstrahl {
    width:100%;
    height: 10px;
    background-color: #d81b3c;
    border-radius: 5px 5px 0px 0px;
}

#zeitstrahlDay {
    width:100%;
    height: 10px;
    background-color: #C3CECB;
    border-radius: 0px 0px 5px 5px;
}

#zeitstrahlgreen {
    width: 0%;
    height: 10px;
    background-color: #3DD8A8;
    border-radius: 5px 5px 0px 0px;
}

#zeitstrahlgreenDay {
    width: 0%;
    height: 10px;
}

#times, .times-card{
    background-color: #334E5A;
    border-radius: 0;
    color: white;
    border: none;
}

#times{
    border-radius: 5px;
}

#timesTable, .scroll{
    overflow-x: auto;
}

#monat{
    padding-right: 2rem;
}

#monat td,th{
    padding-top: 1.75rem;
    font-size: 1rem;
    color: white;
}

#lastdays{
    height: 175px;
}

#controle{
    width: 190px;
}

#collapseOne, #headingOne, .thismonth, #accordion{
    width: 100%;
}


#spinner{
    position: absolute;
    top: -12%;
    left: -8%;
    width: 130px;
    height: 130px;
}


/*////////////////
////Viewports////
//////////////*/





@media (max-width: 1199px) {
.nav {
    width: 105vw;
    z-index: 1040;
}
    .nav .pt-3{
        margin-left: 15vw;
    }

    #navcontainerleft{
       width: 0;
        height: inherit!important;
    }
    .active{
       width: 100vw;
    }
    .side-nav-a-lg a{
        font-size: 1.75rem;
    }

}

@media (min-width: 1199px) {
    .nav {

    }
    .active::before{
        content: '';
        display: inline-block;
        position: absolute;
        height: 60px;
        margin-top: 4px;
        left: 0;
        background-color: #304B58 !important;
        width: 100%;
        border-left: 25px solid #3180A7 !important;
        border-radius: 0!important;
        z-index: -1;
    }
    .navbar-brand::after{
        content: '';
        height: 120px;
        width: 120px;
        display: inline-block;
    }
}

@media (min-width: 1501px) {
    .side-nav-a-lg a{
        font-size: 1.75rem;
    }
}
@media (max-width: 991px) {
    #timeline{
        padding-right: 3vw;
    }
    .navbar-toggler-icon::before{
        margin-left: -8vw;
    }
}


.unpaid {
    background-color: #D83D5B;
}