.PendingAproveBoxes .row {
    height: 8rem;
}
.parentPendingRequestDiv {
    height: 100%;
    background:#64a7d8;
    /*z-index: 4;*/
    display: flex;
    align-items: center;
    justify-content: center;
}
.PendingAprovecount {
    font-size: 3.5em;
    font-weight: 500;
    color: white;
    cursor: pointer;
}

.PendingAprovecountText {
    height: 100%;
    text-align:center;
    background:#80bbe6;
}

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

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

#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;
}

.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-container {
            background: white;
        }

        .highcharts-credits {
            display: none;
        }

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

        .highcharts-background {
            height: 296px;
        }
        /****************************calender css**************/

        .content-wrapper {
            width: auto;
            box-sizing: border-box;
            transform-style: preserve-3d;
        }

            .content-wrapper.is-rotated-left {
                transform: translate(-50%, -50%) rotateY(-4deg);
            }

            .content-wrapper.is-rotated-right {
                transform: translate(-50%, -50%) rotateY(4deg);
            }

            .content-wrapper .left-wrapper,
            .content-wrapper .right-wrapper {
                background-color: #fafbff;
                width: 50%;
                float: left;
                height: 100%;
                box-sizing: border-box;
                padding: 25px;
                display: flex;
                flex-direction: column;
                justify-content: flex-start;
                align-items: center;
            }

            .content-wrapper .header {
                padding: 15px 0 20px;
                display: flex;
                justify-content: space-between;
                width: 100%;
            }

                .content-wrapper .header i {
                    padding: 0 5px;
                    cursor: pointer;
                }

                .content-wrapper .header span {
                    display: inline-block;
                    margin: 0 3px;
                    font-weight: 600;
                }

            .content-wrapper .right-wrapper {
                background-color: #fafbff;
                color: #3f4e5e;
            }

                .content-wrapper .right-wrapper .header {
                    text-align: left;
                    justify-content: center;
                }

                .content-wrapper .right-wrapper .day {
                    font-size: 8em;
                    font-weight: 600;
                    text-indent: -12px;
                    display: block;
                }

                .content-wrapper .right-wrapper .month {
                    font-size: 2.5em;
                }

            .content-wrapper .left-wrapper .showDate {
                color: white;
                text-align: right;
                width: 100%;
            }

                .content-wrapper .left-wrapper .showDate i {
                    cursor: pointer;
                    background: #48A9A6;
                    border-radius: 4px;
                    padding: 8px 12px;
                    transform: scale(1);
                    transition: all 0.3s;
                }

                    .content-wrapper .left-wrapper .showDate i.is-active {
                        transform: scale(-1);
                    }

            .content-wrapper .left-wrapper .tableContainer {
                text-align: center;
                font-family: "Open Sans";
                width: 90%;
                margin: 30px auto 0;
                table-layout: fixed;
                border-collapse: collapse;
            }

                .content-wrapper .left-wrapper .tableContainer .tableBody:before {
                    content: "-";
                    display: block;
                    line-height: 0.75em;
                    color: transparent;
                }

                .content-wrapper .left-wrapper .tableContainer .tableSubHeads {
                    color: #b9ccdf;
                    font-size: 0.75em;
                    text-transform: uppercase;
                    margin-bottom: 10px;
                }

                .content-wrapper .left-wrapper .tableContainer .tableData {
                    padding: 11px 5px;
                    color: #ced0ce;
                    font-size: 0.75em;
                    transition: all 0.3s;
                    position: relative;
                }

                    .content-wrapper .left-wrapper .tableContainer .tableData::before {
                        content: "";
                        display: none;
                        width: 50%;
                        height: 2px;
                        position: absolute;
                        left: 50%;
                        top: 100%;
                        transform: translate(-50%, -8px);
                        background-color: #3e4d5d;
                    }

                    .content-wrapper .left-wrapper .tableContainer .tableData.currentDay::before {
                        display: block;
                    }

                    .content-wrapper .left-wrapper .tableContainer .tableData.selectable {
                        color: #303633;
                        cursor: pointer;
                    }

                        .content-wrapper .left-wrapper .tableContainer .tableData.selectable:hover {
                            background: #3e4d5d;
                            color: white;
                        }

                    .content-wrapper .left-wrapper .tableContainer .tableData.between {
                        background: rgba(62, 77, 93, 0.65);
                        color: white;
                    }

                    .content-wrapper .left-wrapper .tableContainer .tableData.active,
                    .content-wrapper .left-wrapper .tableContainer .tableData.hover {
                        background: #3e4d5d;
                        color: white;
                    }


        /*****************************calender css ends************/

        /*weekly trend css*/

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

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

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

        /*weekly trend css*/

        /*department wise attendance*/

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

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

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

        /*department wise attendance*/

        /*branch wise arttendance*/

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

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

        /*branch wise arttendance*/

        /*donut css starts*/

        .highcharts-series .highcharts-color-3 {
            fill: #89dbee;
        }

        .highcharts-series .highcharts-color-2 {
            fill: #fdde7d;
        }

        .highcharts-series .highcharts-color-1 {
            fill: #87c498;
        }

        .highcharts-series .highcharts-color-0 {
            fill: #f96966;
        }
        /*donut css ends*/

        @media (max-width:767px) and (min-width:320px) {
            .content-wrapper .left-wrapper, .content-wrapper .right-wrapper {
                width: 100%;
            }

            .content-wrapper {
                width: auto;
            }
        }

        .badge1 {
            display: block;
            width: 14%;
            border-radius: 50%;
            height: 14%;
            background: #ffc00e;
            position: absolute;
            right: 6px;
        }

        .lnkTeamSizeChild {
            /*width: auto;
            display: none;
            position: absolute;
            right: 0;
            text-align: left;
            font-size: 12px;
            border-radius: 4px;
            top: 4rem;
            z-index: 100;
            box-shadow: 2px 1px 20px #545454;
            overflow-y: scroll;
            width: 500px;
            height: 400px;
            background: white;*/
            display:block;
        }

        .lnkTeamSizeParent {
            cursor: pointer;
        }

            .lnkTeamSizeParent:focus + .lnkTeamSizeChild {
                display: block;
                width: auto;
                background: white;
            }

        .lnkPresentParent:focus + .lnkTeamSizeChild {
            display: block;
            width: auto;
            height: 400px;
            background: white;
        }

        .lnkOnTourParent:focus + .lnkOnTourChild {
            display: block;
            width: auto;
            height: 400px;
            overflow: hidden;
            overflow-y: auto;
            background: white;
        }

        .lnkAbsentParent:focus + .lnkAbsentChild {
            display: block;
            width: auto;
            height: 400px;
            overflow: hidden;
            overflow-y: auto;
            background: white;
        }

        .lnkOnLeaveParent:focus + .lnkOnLeaveChild {
            display: block;
            width: auto;
            height: 400px;
            overflow: hidden;
            overflow-y: auto;
            background: white;
        }

        .lnkLateArrivalParent:focus + .lnkLateArrivalChild {
            display: block;
            width: auto;
            height: 400px;
            overflow: hidden;
            overflow-y: auto;
            background: white;
        }


        .lnkEarlyGoingParent:focus + .lnkEarlyGoingChild {
            display: block;
            overflow: hidden;
            overflow-y: auto;
            width: auto;
            height: 400px;
            background: white;
        }

   

        

            .parentPendingRequestDiv:hover .childDialogueDiv,
            .attendanceDiv:hover .attendanceDivChild,
            .tourDivParent:hover .tourDivChild,
            .otherDivParent:hover .otherDivChild {
                display: block;
                cursor: pointer;
                transition: all 2s;
            }

        .highcharts-button-symbol {
            display: none;
        }

        .monthly-header-title a:hover {
            background: transparent !important;
            border: none !important;
            color: black;
        }

        .monthly-header-title a {
            background: transparent !important;
            border: none !important;
        }

        .monthly-week {
            /*display:-ms-table-row;*/
            /*display: flex !important;*/
            height: 59.3px;
        }


        .monthly-day-event > .monthly-day-number {
            top: 0.7em;
            left: 5.3em !important;
        }

        @media (min-width:320px) and (max-width:375px) {
            .monthly-day-event > .monthly-day-number {
                top: 0.7em;
                left: 1.8em !important;
            }
        }

        @media (min-width:376px) and (max-width:414px) {
            .monthly-day-event > .monthly-day-number {
                top: 0.7em;
                left: 2em !important;
            }
        }

        @media (min-width:415px) and (max-width:667px) {
            .monthly-day-event > .monthly-day-number {
                top: 0.7em;
                left: 4.6em !important;
            }
        }

        @media (min-width:769px) and (max-width:1024px) {
            .monthly-day-event > .monthly-day-number {
                top: 0.7em;
                left: 3.3em !important;
            }
        }

        @media (min-width:1025px) and (max-width:1366px) {
            .monthly-day-event > .monthly-day-number {
                top: 0.7em;
                left: 4.6em !important;
            }
        }

        @media (min-width:320px) and (max-width:414px) {
            .lnkTeamSizeChild {
                width: 303px !important;
            }

            .lnkTeamSizeParent:focus + .lnkTeamSizeChild {
                display: block;
                width: 303px !important;
                background: white;
            }

            .lnkPresentParent:focus + .lnkTeamSizeChild {
                display: block;
                width: 303px !important;
                height: 400px;
                background: white;
            }

            .lnkOnTourParent:focus + .lnkOnTourChild {
                display: block;
                width: 303px !important;
                height: 400px;
                overflow: hidden;
                overflow-y: auto;
                background: white;
            }

            .lnkAbsentParent:focus + .lnkAbsentChild {
                display: block;
                width: 303px !important;
                height: 400px;
                overflow: hidden;
                overflow-y: auto;
                background: white;
            }

            .lnkOnLeaveParent:focus + .lnkOnLeaveChild {
                display: block;
                width: 303px !important;
                height: 400px;
                overflow: hidden;
                overflow-y: auto;
                background: white;
            }

            .lnkLateArrivalParent:focus + .lnkLateArrivalChild {
                display: block;
                width: 303px !important;
                height: 400px;
                overflow: hidden;
                overflow-y: auto;
                background: white;
            }


            .lnkEarlyGoingParent:focus + .lnkEarlyGoingChild {
                display: block;
                overflow: hidden;
                overflow-y: auto;
                width: 303px !important;
                height: 400px;
                background: white;
            }
        }

        .monthly-indicator-wrap {
            padding-top: 1rem;
            display: flex !important;
        }

        .monthly-day .monthly-event-indicator {
            color: #ea6565;
            border-radius: 4px;
            width: 20px !important;
            height: 20px;
            line-height: 18px;
        }

        @media(min-width:320px) and (max-width:414px) {
            .monthly-day .monthly-event-indicator {
                margin-top: 2rem;
            }

                .monthly-day .monthly-event-indicator span {
                    color: white;
                    line-height: 1.8rem;
                }
        }

.monthly-today .monthly-day-number {
    width: max-content;
    height: max-content;
    color: #FFF;
    padding: 0.5rem !important;
    background: #EA6565;
    border-radius: 4px;
    line-height: 12px;
    text-align: center;
    display: block;
    margin: 0px auto;
}

        .divEmpCount {
            text-align: center;
            margin-top: -.5rem;
            font-weight: 600;
        }

        .monthly-header-title-date {
            font-weight: 600;
        }

        .monthly-cal:after {
            content: 'Back';
            font-weight: 600;
        }

        .crossSign {
            width: 20px;
            height: 20px;
            position: absolute;
            right: 0;
            top: -14px;
            cursor: pointer;
            font-weight: 600;
            background: black;
            color: white;
            border-radius: 50%;
        }

        #containerEmployeeCount > div {
            height: 290px !important;
        }

        .monthly-indicator-wrap > div {
            /*width: 70% !important;*/
            font-size: 12px !important;
        }

        .filterDiv {
            margin-top:0px;
            margin-bottom: 0rem;
            background: white;
            box-shadow: 0px 2px 11px 3px #e0e0e0;
        }

        .attendaceTrendDiv {
            
            /*height: 319px;*/
            /*background: white;
            box-shadow: 0px 2px 11px 3px #e0e0e0;*/
        }

            .attendaceTrendDiv #container {
                min-width: 280px;
                height: 300px;
                margin: 0 auto;
            }

        .employeeCountDiv {
            /*height: 319px;
            background: white;
            box-shadow: 0px 2px 11px 3px #e0e0e0;*/
        }

        .employeeCountDiv #containerEmployeeCount {
            height: 310px;
        }

        .teamStatsDiv {
            background: white;
            box-shadow: 0px 2px 11px 3px #e0e0e0;
            height: 319px;
            overflow: auto;
            padding: 0px 15px;
        }

            .teamStatsDiv > div.row:first-child {
                position: sticky;
                top: 0px;
                background: #fff;
                z-index: 1;
            }

        .monthly-week .m-d:not(.monthly-day-blank):first-child {
            background-color: #e1eaff;
        }

        @media(max-width:768px) and (min-width:737px) {
            .dateLabel {
                line-height: 34px;
                margin-bottom: 0rem;
            }

            .dateFieldCol {
                display: flex;
            }

        }

        /*23 sep 2019*/
        .lnkOnOffParent:focus + .lnkOnOffChild {
            display: block;
            width: auto;
            height: 400px;
            overflow: hidden;
            overflow-y: auto;
            background: white;
        }


        /**** New Code CSS for Team Statistics****/
        .popupOuter {
            position: fixed;
            top: 0px;
            bottom: 0px;
            left: 0px;
            right: 0px;
            background: rgba(0,0,0,0.8);
            overflow: auto;
            display: none;
            z-index: 9;
        }

        .popupInner {
            /*width: 80%;*/
            overflow: hidden;
            display: flex;
            position: absolute;
            background: #fff;
            top: 165px;
            left: 50%;
            transform: translate(-50%,0%);
            flex-flow: column;
        }

        .poupheader {
            padding: 10px 15px;
            background: #005ca1 !important;
            color: #fff !important;
            margin: 0px !important;
            justify-content: space-between;
            border-bottom: 2px solid #cecece;
            display:flex;
        }

            .poupheader > .headerTxt {
                font-size: 15px;
                font-weight: 600;
                margin:0px;
                color: #fff !important;
            }

        .popupbody {
            min-height:200px;
            min-width:300px;
            max-height: 280px;
            overflow: auto;
            flex: 1 1 auto;
            background: #fff;
        }
        .popupbody .table tr th {
            top:-1px !important;
            position:sticky !important;
        }
        .popupfooter {
            padding: 10px 15px;
            background: #f5f5f5;
            color: #122e44;
            margin: 0px !important;
            justify-content: flex-end;
            border-top: 1px solid #ccc;
            display:flex;
        }

        .toggleBtn.close {
            position: absolute;
            right: 0px;
            top: 0px;
            width: 38px;
            height: 41px;
            opacity: 1;
            background: none;
            padding: 12px 0px;
            cursor: pointer;
        }

            .toggleBtn.close:before, .toggleBtn.close:after {
                position: absolute;
                left: 18px;
                content: ' ';
                height: 17px;
                width: 2px;
                background-color: #fff;
            }

            .toggleBtn.close:before {
                transform: rotate(45deg);
            }

            .toggleBtn.close:after {
                transform: rotate(-45deg);
            }

            .pl7 {
                padding-left:9px;
            }
            .pr7 {
                padding-right:9px;
            }
            .toggleBtn.btn.btn-default {
                width:34px !important;
                background: #fff3e7;
                color: #484848;
                border-color: #efd3b7;
                font-weight: 600;
            }
            .toggleBtn.btn.btn-default:hover {
                width:34px !important;
                background: #fff3e7;
                color: #484848;
                border-color: #efd3b7;
            }
            .toggleBtn.btn.btn-default:focus {
                width:34px !important;
                background: #fff3e7;
                color: #484848;
                border-color: #efd3b7;
            }
            .filtersPanels {
                margin-bottom:15px !important;
            }

            .memberCountAvl {
                color: #f5f5f5 !important;
                background-color: #d5847c !important;
            }
            .gender {
                width:30px
            }
            .gender i {
                font-size: 20px;
                border: solid 1px #a59c9c;
                padding: 8px;
                color: #a59c9c;
                border-radius: 100%;
                width: 40px;
                height: 40px;
                text-align: center;
            }
            
            
            .employeeDetails p {
                margin-bottom:5px;
            }
            .employeeDetails span {
                font-style:italic;
            }