body {
    height: 0%;
}

.login-box {
    margin: 15% auto !important;
}

.red{
    color: hsl(0deg 100% 59.17%);
}

td.dt-type-numeric.sorting_1 {
    text-align: left !important;
}


canvas#taskReportChart {
    /* height: 239px !important; */
}

.projectResult {
    background: #fff;
    padding: 10px 15px 10px 15px;
}

.taskResult {
    background: #fff;
    padding: 10px 15px 10px 15px;
}


.progress {
    width: 200px;
    height: 200px;
    font-size: 60px;
    color: #fff;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
    background: #3c8dbc;
    text-align: center;
    line-height: 200px;
    margin: 20px
}

.progress::after {content: "%";}

.progress .title {position: relative;z-index: 100;}

.progress .overlay {
    width: 50%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    background-color: #3c8dbc;
}

.input-group-text {
  display: flex;
  align-items: center;
  padding: 0.375rem 0.75rem;
  background-color: #e9ecef;
  border: 1px solid #ced4da;
  border-left: 0;
  border-radius: 0 0.25rem 0.25rem 0;
}

.input-group .form-control {
  border-radius: 0.25rem 0 0 0.25rem;
}


.progress .left, .progress .right {
    width: 50%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border: 10px solid #4b6878;
    border-radius: 100px 0px 0px 100px;
    border-right: 0;
    transform-origin: right;
}



.progress .left {animation: load1 1s linear forwards;}

.progress:nth-of-type(2) .right, .progress:nth-of-type(3) .right {animation: load2 .5s linear forwards 1s;}

.progress:last-of-type .right, .progress:first-of-type .right {animation: load3 .8s linear forwards 1s;}

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

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

@keyframes load2 {
    0% {z-index: 100;transform: rotate(180deg);}

    100% {z-index: 100;transform: rotate(270deg);}
}

@keyframes load3 {
    0% {z-index: 100;transform: rotate(180deg);}

    100% {
        z-index: 100;transform: rotate(315deg);}
}


.timing-btn {
    display: flex;
    justify-content: center;
    border-bottom: 1px solid #ccc;
}

.timing-btn button {
    margin-right: 10px;
    margin-bottom: 20px;
}