.PendingAproveBoxes .row {
    height: 8rem;
}

.parentPendingRequestDiv {
    height: 100%;
    background: #64a7d8;
    /*z-index: 4;*/
    display: flex;
    align-items: center;
    justify-content: center;
}

.PendingAprovecount {
    font-size: 3em;
    font-weight: 400;
    color: white;
    cursor: pointer;
}


.PendingAprovecountText {
    height: 100%;
    background: #80bbe6;
}

    .PendingAprovecountText h3 {
        font-size: 1.3em;
        font-weight: 600;
        margin-top: 15px;
        text-transform: uppercase;
        color: #fff;
    }

    .PendingAprovecountText span {
        font-size: .85em;
        font-weight: 500;
        line-height: 10px;
        color: #fff;
    }


.myRequest:nth-child(1) .parentPendingRequestDiv {
    background: #57aeaf !important;
}

.myRequest:nth-child(1) .PendingAprovecountText {
    background: #82cecf !important;
}

.myRequest:nth-child(2) .parentPendingRequestDiv {
    background: #9ebc82 !important;
}

.myRequest:nth-child(2) .PendingAprovecountText {
    background: #b2d196 !important;
}

.myRequest:nth-child(3) .parentPendingRequestDiv {
    background: #c2b174 !important;
}

.myRequest:nth-child(3) .PendingAprovecountText {
    background: #dbcb94 !important;
}

.myRequest:nth-child(4) .parentPendingRequestDiv {
    background: #d5847c !important;
}

.myRequest:nth-child(4) .PendingAprovecountText {
    background: #efada6 !important;
}














.highcharts-series .highcharts-color-0, .highcharts-series .highcharts-color-1, .highcharts-series .highcharts-color-2, .highcharts-series .highcharts-color-3 {
    fill: !important;
}

.highcharts-title {
    font-size: 14px !important;
    font-weight: 600;
}

.highcharts-credits {
    display: none;
}

#highcharts-13ua9f7-4,
#highcharts-13ua9f7-4 svg {
    height: 360px;
}

#containerWeeklyTrend .highcharts-background {
    fill: #fbfcff !important;
}

#containerWeeklyTrend .highcharts-button-box {
    fill: #fbfcff !important;
}


#highcharts-3ziabvf-8 {
    height: 360px;
}

#containerDepartmentWisePresent .highcharts-background {
    fill: white !important;
}

#containerDepartmentWisePresent .highcharts-button-box {
    fill: white !important;
}


#containerBranchWiseAttendance .highcharts-background {
    fill: white !important;
}

#containerBranchWiseAttendance .highcharts-button-box {
    fill: white !important;
}

.impLinks div div {
    margin-top: .5rem;
}

.recentUpdateIconBox {
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 27px;
    border-radius: 50%;
    border: 2px solid #717171;
    position: absolute;
    top: 1.5rem;
    right: 29.5rem;
    background: white;
}


/*recent updates*/
.recent_updates {
    width: 53%;
    float: right;
    margin-top: 1%;
    background: #fff;
}

.timeline-item .date i {
    position: absolute;
    top: 0;
    right: 0;
    padding: 5px;
    width: 30px;
    text-align: center;
    border-top: 1px solid #e7eaec;
    border-bottom: 1px solid #e7eaec;
    border-left: 1px solid #e7eaec;
    background: #f8f8f8;
}

.timeline-item .date {
    text-align: right;
    /*width: 110px;*/
    position: relative;
    padding-top: 30px;
}

.timeline-item .content {
    border-left: 1px solid #e7eaec;
    border-top: 1px solid #e7eaec;
    padding-top: 10px;
    min-height: 100px;
}

    .timeline-item .content:hover {
        background: #f6f6f6;
    }

#container .highcharts-point {
    fill: rgb(27, 138, 46);
}

.highcharts-graph {
    stroke: rgb(27, 138, 46);
}

.highcharts-area {
    fill: rgba(27, 138, 46, 0.5);
}

.highcharts-background,
.highcharts-button-box {
    fill: white;
}

.highcharts-button, .highcharts-contextbutton, .highcharts-button-normal {
    display: none;
}

.canvasjs-chart-credit {
    display: none;
}

.canvasjs-chart-canvas {
    margin-top: 1rem;
}

.recentUpdatesPanel, .recentUpdatesPanel:hover, .announcementsPanel, .announcementsPanel:hover {
    color: #3f4e5f;
    text-decoration: none;
}

.badge {
    background-color: #ffb100;
    position: absolute;
    top: 14px;
}

.badge1 {
    background-color: #005ca1;
    position: absolute;
    top: 0 !important;
}

.bDayHead, .bDayHead:hover {
    text-decoration: none;
    color: #3f4d5f;
}



.parentPendingRequestDiv, .attendanceDiv, .tourDivParent, .otherDivParent {
    cursor: pointer;
}

#childDialogueDiv {
    display: block;
    cursor: pointer;
    transition: all 2s;
}

.childDialogueDiv {
    display: none;
    position: absolute;
    width: 320px;
    text-align: left;
    font-size: 12px;
    top: 80px;
    left: 0px;
    z-index: 100;
    box-shadow: 0px 0px 15px #c0c0c0;
}

    .childDialogueDiv a {
        font-size: 14px;
        color: #333;
    }

.statsTable tbody tr td {
    padding-top: 7px;
    padding-bottom: 7px;
}

.UpMarquee {
    padding-left: 0rem;
    overflow-x: hidden !important;
    /*height:325px !important;*/
    height: 100% !important;
}

.UpMarqueeNews {
    height: 100% !important;
}

.news-item {
    padding: 12px;
    margin: 0px;
    border-bottom: 1px dashed #ddd;
    list-style-type: none;
}

    .news-item:nth-child(odd) {
        background: #f9f9f9;
    }

.panel-footer {
    padding: 0rem;
}

    .panel-footer > ul {
        position: absolute;
        z-index: 9;
        top: .8rem;
        right: 2rem;
    }

.myAttendanceDiv {
    position: relative;
}

.myPerformance {
    font-weight: 600;
    font-size: 15px;
    right: 0px;
    width: auto;
    text-align: center;
}

    .myPerformance > label {
        float: right;
        font-weight: normal;
        color: #1dab24;
    }

        .myPerformance > label > span {
            margin-left: 3px;
        }

#containerMyPerformance {
    width: 100% !important;
    min-width: 760px !important;
    overflow-y: hidden;
    height: 350px !important;
}

    #containerMyPerformance .highcharts-container {
        width: 100% !important;
        min-width: 760px !important;
        height: auto !important;
        overflow-y: hidden;
    }

    #containerMyPerformance .highcharts-root {
        height: 350px !important;
        min-width: 760px !important;
        overflow-y: hidden;
    }

@media(min-width:1566px) {
    .highcharts-root {
        max-width: 810px !important;
    }
}

@media(max-width:1499px) {

    #containerMyPerformance {
        height: 335px !important;
    }

        #containerMyPerformance .highcharts-root {
            height: 335px !important;
        }
}

@media(min-width:991px) AND (max-width:1199px) {
    .myPerformance {
        height: 530px !important;
    }

    #containerMyPerformance .highcharts-root {
        height: 520px !important;
    }

    #containerMyPerformance {
        height: 530px !important;
    }
}

@media(min-width:767px) AND (max-width:990px) {
    .myPerformance {
        height: 445px !important;
    }

    #containerMyPerformance .highcharts-root {
        height: 435px !important;
    }

    #containerMyPerformance {
        height: 445px !important;
    }
}


a.SideDashOpen {
    display: none;
    color: #fff;
    position: absolute;
    top: 77px;
    right: 15px;
    padding: 10px;
}

@media(max-width:767px) {
    a.SideDashOpen {
        display:block;
    }

    .sideDash {
        display: none;
        position: fixed;
        top: 126px;
        left: 2px;
        width:calc(100% - 4px);
        height: calc(100% - 133px);
        overflow: auto;
    }
}

.rptBdayWell {
    border-bottom: 1px solid #e4e4e4;
    padding: 0.5rem;
    margin-bottom: 10px;
    background-color: #fafcff;
}

.byUser {
    font-style: italic;
    font-weight: 500;
    color: #005ca1;
    font-size: 13px;
}

.bgRecentUpdatesApproved {
    background: rgb(235 255 238);
}

.bgRecentUpdatesRejected {
    background: rgb(255 237 236);
}

.bgRecentUpdatesFrwrHR {
    background: rgb(224 244 255);
}

.bgRecentUpdatesWhishes {
    background: rgb(241 236 255);
}

.bgRecentUpdatesMarkToSysUser {
    background: rgb(255 253 236);
}






@media (max-width:736px) and (min-width:320px) {
    /*.recentUpdatesPanel {
        padding-left: 0rem;
        margin-top: 0rem;
    }*/
}

@media (max-width:768px) and (min-width:736px) {
    .recentUpdatePanelBody {
        height: 35rem !important;
    }
}

@media (max-width:375px) {
    .highcharts-container {
        width: 305px !important;
    }
}


.highcharts-root {
    font-size: 14px !important;
    height: 324px !important;
    width: 82% !important;
    left: 0px !important;
    /* position: absolute; */
    float: left !important;
    font-family: 'Open Sans' !important;
}

.highcharts-container {
    height: 100% !important;
}


:root {
    --rad-0: 0%;
    --rad-1: 1%;
    --rad-2: 2%;
    --rad-3: 3%;
    --rad-4: 4%;
    --rad-5: 5%;
    --rad-6: 6%;
    --rad-7: 7%;
    --rad-8: 8%;
    --rad-9: 9%;
    --rad-10: 10%;
    --rad-11: 11%;
    --rad-12: 12%;
    --rad-13: 13%;
    --rad-14: 14%;
    --rad-15: 15%;
    --rad-16: 16%;
    --rad-17: 17%;
    --rad-18: 18%;
    --rad-19: 19%;
    --rad-20: 20%;
    --rad-21: 21%;
    --rad-22: 22%;
    --rad-23: 23%;
    --rad-24: 24%;
    --rad-25: 25%;
    --rad-26: 26%;
    --rad-27: 27%;
    --rad-28: 28%;
    --rad-29: 29%;
    --rad-30: 30%;
    --rad-31: 31%;
    --rad-32: 32%;
    --rad-33: 33%;
    --rad-34: 34%;
    --rad-35: 35%;
    --rad-36: 36%;
    --rad-37: 37%;
    --rad-38: 38%;
    --rad-39: 39%;
    --rad-40: 40%;
    --rad-41: 41%;
    --rad-42: 42%;
    --rad-43: 43%;
    --rad-44: 44%;
    --rad-45: 45%;
    --rad-46: 46%;
    --rad-47: 47%;
    --rad-48: 48%;
    --rad-49: 49%;
    --rad-50: 50%;
    --rad-51: 51%;
    --rad-52: 52%;
    --rad-53: 53%;
    --rad-54: 54%;
    --rad-55: 55%;
    --rad-56: 56%;
    --rad-57: 57%;
    --rad-58: 58%;
    --rad-59: 59%;
    --rad-60: 60%;
    --rad-61: 61%;
    --rad-62: 62%;
    --rad-63: 63%;
    --rad-64: 64%;
    --rad-65: 65%;
    --rad-66: 66%;
    --rad-67: 67%;
    --rad-68: 68%;
    --rad-69: 69%;
    --rad-70: 70%;
    --rad-71: 71%;
    --rad-72: 72%;
    --rad-73: 73%;
    --rad-74: 74%;
    --rad-75: 75%;
    --rad-76: 76%;
    --rad-77: 77%;
    --rad-78: 78%;
    --rad-79: 79%;
    --rad-80: 80%;
    --rad-81: 81%;
    --rad-82: 82%;
    --rad-83: 83%;
    --rad-84: 84%;
    --rad-85: 85%;
    --rad-86: 86%;
    --rad-87: 87%;
    --rad-88: 88%;
    --rad-89: 89%;
    --rad-90: 90%;
    --rad-91: 91%;
    --rad-92: 92;
    --rad-93: 93%;
    --rad-94: 94%;
    --rad-95: 95%;
    --rad-96: 96%;
    --rad-97: 97%;
    --rad-98: 98%;
    --rad-99: 99%;
    --rad-100: 100%;
}

dl {
    display: flex;
    background-color: white;
    flex-direction: column;
    width: 100%;
    position: relative;
    padding: 0px;
    margin: 0px;
}

.text {
    display: flex;
    align-items: center;
    height: 44px;
    width: 75px;
    font-size: 10px;
    padding: 0px 5px;
    background-color: #ececec;
    position: absolute;
    left: 0;
    justify-content: flex-end;
    text-align: center;
}

span.week {
    font-size: 16px;
    width: 100%;
}

.percentage {
    font-size: .8em;
    line-height: 1;
    text-transform: uppercase;
    width: calc(100% - 90px);
    height: 50px;
    margin-left: 80px;
    background: repeating-linear-gradient( to right, #ddd, #ddd 1px, #fff 1px, #fff 27% );
}

    .percentage:after {
        content: attr(data-hrs);
        display: block;
        background-color: #e8f7ff;
        width: var(--radius);
        margin-bottom: 10px;
        height: 37%;
        position: relative;
        top: 50%;
        transform: translateY(-50%);
        transition: background-color .3s ease;
        cursor: pointer;
        padding: 4px 0px;
        font-size: 10px;
        text-align: center;
        color: #000;
        font-weight: 600;
    }

    .percentage:hover:after, .percentage:focus:after {
        background-color: #aaa;
    }



.currentDetails {
    position: relative;
    display: block;
    left: 0px;
    right: 0px;
}

.detailPanel {
    padding: 10px 0px 10px 0px;
}

.pr7 {
    padding-right: 7px !important;
}

.pl7 {
    padding-left: 7px !important;
}

.highcharts-root {
    WIDTH: 100% !IMPORTANT;
}

@media (max-width:960px) {
    .pl7, .pr7 {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    #ctl00_CPH_divUpdateLogs {
        height: 35rem !important;
    }
}

.genderIConsJoinee {
    display: block;
    width: 30px;
    height: 30px;
    border: solid 1px #717171;
    border-radius: 100%;
    text-align: center;
    padding: 5px;
    font-size: 20px;
}

.genderIConsJoineeImg {
    display: inline-block;
    width: 40px;
    height: 40px;
    border: solid 1px #dedede;
    border-radius: 100%;
    text-align: center;
    padding: 2px;
}

.nameJoinee, .branchJoinee {
    margin-top: 0px;
    margin-bottom: 5px;
}

.dtJoinee {
    color: #005ca1;
    font-style: italic;
    font-size: 12px;
}

.dprtmntJoinee {
    font-style: italic;
    font-size: 12px;
}

.MyDokuInnerBox {
    text-align: center;
}

.mydokuText {
    background: #fff;
    padding: 15px 10px;
    width: 100%;
    height: 27.50rem;
    /*display:flex;
    align-items:center;
    justify-content:center;*/
    border: solid 1px #e0e0e0;
}

    .mydokuText img {
        width: 64px;
        display: inline-block;
        margin-bottom: 15px;
    }

.MyDokuInnerBox {
    width: calc(100% / 4 - 10px);
    margin: 5px;
    float: left;
    padding: 5px;
}

.MyDokuHeader {
    width: 100%;
    display: flex;
    height: 50px;
    align-items: center;
    justify-content: center;
}

    .MyDokuHeader p {
        margin: 0px;
    }

.MyDokuInnerBox:nth-child(1) {
    background: #defdd4 !important;
    color: #015aa0 !important;
}

.MyDokuInnerBox:nth-child(2) {
    background: #d0faf4 !important;
    color: #01a091 !important;
}

.MyDokuInnerBox:nth-child(3) {
    background: #fff3e7 !important;
    color: #a08501 !important;
}

.MyDokuInnerBox:nth-child(4) {
    background: #ffe3e3 !important;
    color: #935353 !important;
}

.MyDokuInnerBox:nth-child(1) a {
    color: #015aa0 !important;
}

.MyDokuInnerBox:nth-child(2) a {
    color: #01a091 !important;
}

.MyDokuInnerBox:nth-child(3) a {
    color: #a08501 !important;
}

.MyDokuInnerBox:nth-child(4) a {
    color: #935353 !important;
}

.MyDokuInnerBox a {
    text-decoration: none;
}

    .MyDokuInnerBox a:hover {
        color: #333 !important;
    }

.largeDash {
    background: #fff;
    padding: 15px;
    margin-top: -15px;
}

.sideDash {
    background: #f3f3f3;
    padding: 15px;
    margin-top: -15px;
}

    .sideDash .panel {
        border: 0px !important;
        box-shadow: none !important;
    }

        .sideDash .panel .panel-heading {
            background: none !important;
            border-radius: 0px !important;
            border: 0px !important;
            padding-left: 0px !important;
            padding-right: 0px !important;
            color: #005ca1;
        }

            .sideDash .panel .panel-heading .badge {
                background-color: #005ca1;
            }

        .sideDash .panel .panel-body {
            box-shadow: 0px 0px 1px #005ca1;
            padding: 0px !important;
            border-radius: 5px;
            background: #f7f7f7;
            background: #f9f9f9;
            border-top: 3px #005ca1 solid;
        }

    .sideDash .NotificationDetails .actionGroup {
        width: 100px;
        float: right;
    }

    .sideDash .NotificationIcons {
        width: 100px;
    }

.height-all-size::-webkit-scrollbar {
    width: 0px !important;
}


.joinees.flexEqualCenter {
    align-items: unset !important;
}


@media(max-width:768px) {
    .MyDokuInnerBox {
        width: calc(100% / 2 - 10px);
    }

    .MyDoku {
        height: auto;
    }

    .mydokuText {
        height: 22rem;
    }
}

@media (max-width:991px) {
    .pl7, .pr7 {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    .filtersPanels {
        margin-bottom:0px !important;
    }
}

@media(min-width:992px) {
    .dashFlexs {
        display: flex;
    }
}