/*******Paycode*********/
.menuforsteps{}
.nav-tabs {position: relative;}
.nav-tabs>li {padding-left: 0;padding-right: 0;}
.menuforsteps ul li a.active:before {border: medium solid transparent;content: "";height: 0;left: 50%;pointer-events: none;position: absolute;width: 0;z-index: 120;top: 98%;border-top-color: rgba(0,0,0,.2);border-width: 11px;margin-left: -11px;}
.nav-tabs>li>a {display: block;border-radius: 0;padding: 13px 20px;margin-right: 0;font-weight: 300;letter-spacing: .06em;color: #444;font-size: 14px;min-width: 70px;border-color: transparent;position: relative;line-height: 1.7em;background: 0 0;box-shadow: none;border-color: transparent;}
.menuforsteps ul li a.active:hover{color:#626262;}
.paySumm{border-top: 1px solid #eee;border-bottom: 1px solid #eee; padding:10px 0px 0px 0px}
.completed{background: #7cb342 !important; color:#fff !important;}
.inprocess{ background: #18AACC !important; color:#fff !important;}
.menuforsteps ul li a.inprocess:before{border-top-color: #18AACC !important;}
.nav-item { position: relative;}
.righticon{position: absolute; right: 3px; top: 3px;}
.pointer{ cursor: pointer;}
.empData a:hover{background: #18AACC;   background: -webkit-gradient(linear, left top, left bottom, from(#18AACC), to(#0485A3)) !important;background: -moz-linear-gradient(top, #18AACC, #0485A3) !important;filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#18AACC', endColorstr='#0485A3') !important; color:#fff !important;}
.empboxheader{font-weight: 400 !important;font-size: 18px !important;margin-bottom: 10px !important;}
.headerHr hr{margin-top: 0px;margin-bottom: 10px;}
.pos-rel{position: relative;}
.empnext{width: 24px;height: 24px;background: #18aacc;color: #fff;border-radius: 50%;text-align: center;line-height: 24px;font-size: 14px;position: absolute;left: 49%;top: 30%;z-index: 9;}
.empprev{width: 24px;height: 24px;background: #18aacc;color: #fff;border-radius: 50%;text-align: center;line-height: 24px;font-size: 14px;position: absolute;left: 49%;top: 42%;z-index: 9;}
.paycodeHR{margin-top: 5px;margin-bottom: 10px;}
.noofemp{background: #daeffd;padding: 5px 10px;color: #2b6a94;border-radius: 5px;font-weight: bold;}
.table-user-image {
    float: left;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    margin-right: 10px;
    margin-top: -2px;
    border: solid 2px #18AACC;
}

@media screen and (max-width: 1024px) 
{
  .nav-tabs>li>a{padding: 13px 15px;}

  }

  /*******Dashboard*********/
.pr0{ padding-right: 0px !important;}
.dcard{background: #fff; padding:0px; border: 1px solid rgba(0,0,0,.07);   box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0 1px 15px 1px rgba(69,65,78,.08);-moz-box-shadow: 0 1px 15px 1px rgba(69,65,78,.08);box-shadow: 0 1px 15px 1px rgba(69,65,78,.08);     border-radius: 3px; margin-bottom: 15px;}
.dcard h3{font-size: 18px;color: #676767;font-weight: 400; margin: 0px;}
.dcard h4{font-size: 18px;color: #18AACC;font-weight: 400;margin-top: 20px; margin-bottom: 0px;}
.dcard .cardheader {color: #18AACC;position: relative;box-shadow: none;padding:10px; border-bottom: solid thin #dedede}
.dcard .cardheader h3:before {position: absolute;width: 3px;height: 22px;left: -2px;top:6px;content: '';background: #18AACC;}
.dcard .cardheader  p{color: #676767;margin-top: 10px;font-size: 13px;}
canvas{

    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
  }
@media screen and (max-width: 800px) {
  .pr0{ padding-right: 15px !important;}

}
.animated {
  animation-duration: 1s;
  animation-fill-mode: both;
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.fadeInUp {
  animation-name: fadeInUp;
}

/********Org chart************/


.bg-white{ padding:15px; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 0 1px 15px 1px rgba(69,65,78,.08);
    -moz-box-shadow: 0 1px 15px 1px rgba(69,65,78,.08);
    box-shadow: 0 1px 15px 1px rgba(69,65,78,.08);
    border-radius: 3px; background: #fff;}


ol.organizational-chart,
ol.organizational-chart ol,
ol.organizational-chart li,
ol.organizational-chart li > div {
    position: relative;
}

ol.organizational-chart,
ol.organizational-chart ol {
    list-style: none;
    margin: 0;
    padding: 0;
}

ol.organizational-chart {
    text-align: center;
}

ol.organizational-chart ol {
    padding-top: 1em;
}

ol.organizational-chart ol:before,
ol.organizational-chart ol:after,
ol.organizational-chart li:before,
ol.organizational-chart li:after,
ol.organizational-chart  li  div:before,
ol.organizational-chart  li  div:after {
    background-color: #b7a6aa;
    content: '';
    position: absolute;
}


ol.organizational-chart li li:before,
ol.organizational-chart li li:after,
ol.organizational-chart  li  li > div:before,
ol.organizational-chart  li  li > div:after {
    background-color: #b7a6aa;
    content: '';
    position: absolute;
}



ol.organizational-chart ol > li {
    padding: 1em 0 0 1em;
    /*display: none;*/
}

ol.organizational-chart > li ol:before {
    height: 1em;
    left: 50%;
    top: 0;
    width: 3px;
}

ol.organizational-chart > li ol:after {
    height: 3px;
    left: 3px;
    top: 1em;
    width: 50%;
}

ol.organizational-chart > li ol > li:not(:last-of-type):before {
    height: 3px;
    left: 0;
    top: 2em;
    width: 1em;
}

ol.organizational-chart > li ol > li:not(:last-of-type):after {
    height: 100%;
    left: 0;
    top: 0;
    width: 3px;
}

ol.organizational-chart > li ol > li:last-of-type:before {
    height: 3px;
    left: 0;
    top: 2em;
    width: 1em;
}

ol.organizational-chart > li ol > li:last-of-type:after {
    height: 2em;
    left: 0;
    top: 0;
    width: 3px;
}

ol.organizational-chart li > div {
    background-color: #fff;
    border-radius: 3px;
    min-height: 2em;
    min-width: 200px;
    padding: 0.5em;
        border: 4px solid #fff;
            box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 0 1px 15px 1px rgba(69,65,78,.08);
    -moz-box-shadow: 0 1px 15px 1px rgba(69,65,78,.08);
    box-shadow: 0 1px 15px 1px rgba(69,65,78,.08);
    border-radius: 3px;
}

/*** PRIMARY ***/
ol.organizational-chart > li > div {
    background-color: #fff;
    margin-right: 1em;
}

ol.organizational-chart > li > div:before {
    bottom: 2em;
    height: 3px;
    right: -1em;
    width: 1em;
}

ol.organizational-chart > li > div:first-of-type:after {
    bottom: 0;
    height: 2em;
    right: -1em;
    width: 3px;
}

ol.organizational-chart > li > div + div {
    margin-top: 1em;
}

ol.organizational-chart > li > div + div:after {
    height: calc(100% + 1em);
    right: -1em;
    top: -1em;
    width: 3px;
}

/*** SECONDARY ***/
ol.organizational-chart > li > ol:before {
    left: inherit;
    right: 0;
}

ol.organizational-chart > li > ol:after {
    left: 0;
    width: 100%;
}

ol.organizational-chart > li > ol > li > div {
    background-color: #fff;
}

/*** TERTIARY ***/
ol.organizational-chart > li > ol > li > ol > li > div {
    background-color: #fff;
}

/*** QUATERNARY ***/
ol.organizational-chart > li > ol > li > ol > li > ol > li > div {
    background-color: #fff;
}

/*** QUINARY ***/
ol.organizational-chart > li > ol > li > ol > li > ol > li > ol > li > div {
    background-color: #fff;
}

/*** MEDIA QUERIES ***/
@media only screen and ( min-width: 64em ) {

    ol.organizational-chart {
        margin-left: -1em;
        margin-right: -1em;
        margin-top: 20px;
        overflow:auto;
        min-height:400px;
        max-height:400px;
    }

    /* PRIMARY */
    ol.organizational-chart > li > div {
          max-width: 200px;
        display: inline-block;
        float: none;
        margin: 0 1em 1em 1em;
        vertical-align: bottom;
            border: 4px solid #fff;
                box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 0 1px 15px 1px rgba(69,65,78,.08);
    -moz-box-shadow: 0 1px 15px 1px rgba(69,65,78,.08);
    box-shadow: 0 1px 15px 1px rgba(69,65,78,.08);
    border-radius: 3px;
    }

    ol.organizational-chart > li > div:only-of-type {
        margin-bottom: 0;
        width: calc((100% / 1) - 2em - 4px);
    }

    ol.organizational-chart > li > div:first-of-type:nth-last-of-type(2),
    ol.organizational-chart > li > div:first-of-type:nth-last-of-type(2) ~ div {
        width: calc((100% / 2) - 2em - 4px);
    }

    ol.organizational-chart > li > div:first-of-type:nth-last-of-type(3),
    ol.organizational-chart > li > div:first-of-type:nth-last-of-type(3) ~ div {
        width: calc((100% / 3) - 2em - 4px);
    }

    ol.organizational-chart > li > div:first-of-type:nth-last-of-type(4),
    ol.organizational-chart > li > div:first-of-type:nth-last-of-type(4) ~ div {
        width: calc((100% / 4) - 2em - 4px);
    }

    ol.organizational-chart > li > div:first-of-type:nth-last-of-type(5),
    ol.organizational-chart > li > div:first-of-type:nth-last-of-type(5) ~ div {
        width: calc((100% / 5) - 2em - 4px);
    }

    ol.organizational-chart > li > div:before,
    ol.organizational-chart > li > div:after {
        bottom: -1em!important;
        top: inherit!important;
    }

    ol.organizational-chart > li > div:before {
        height: 1em!important;
        left: 50%!important;
        width: 3px!important;
    }

    ol.organizational-chart > li > div:only-of-type:after {
        display: none;
    }

    ol.organizational-chart > li > div:first-of-type:not(:only-of-type):after,
    ol.organizational-chart > li > div:last-of-type:not(:only-of-type):after {
        bottom: -1em;
        height: 3px;
        width: calc(50% + 1em + 3px);
    }

    ol.organizational-chart > li > div:first-of-type:not(:only-of-type):after {
        left: calc(50% + 3px);
    }

    ol.organizational-chart > li > div:last-of-type:not(:only-of-type):after {
        left: calc(-1em - 3px);
    }

    ol.organizational-chart > li > div + div:not(:last-of-type):after {
        height: 3px;
        left: -2em;
        width: calc(100% + 4em);
    }

    /* SECONDARY */
    ol.organizational-chart > li > ol {
        display: flex;
        flex-wrap: nowrap;
    }

    ol.organizational-chart > li > ol:before,
    ol.organizational-chart > li > ol > li:before {
        height: 1em!important;
        left: 50%!important;
        top: 0!important;
        width: 3px!important;
    }

    ol.organizational-chart > li > ol:after {
        display: none;
    }

    ol.organizational-chart > li > ol > li {
        flex-grow: 1;
        padding-left: 1em;
        padding-right: 1em;
        padding-top: 1em;
    }

    ol.organizational-chart > li > ol > li:only-of-type {
        padding-top: 0;
    }

    ol.organizational-chart > li > ol > li:only-of-type:before,
    ol.organizational-chart > li > ol > li:only-of-type:after {
        display: none;
    }

    ol.organizational-chart > li > ol > li:first-of-type:not(:only-of-type):after,
    ol.organizational-chart > li > ol > li:last-of-type:not(:only-of-type):after {
        height: 3px;
        top: 0;
        width: 50%;
    }

    ol.organizational-chart > li > ol > li:first-of-type:not(:only-of-type):after {
        left: 50%;
    }

    ol.organizational-chart > li > ol > li:last-of-type:not(:only-of-type):after {
        left: 0;
    }

    ol.organizational-chart > li > ol > li + li:not(:last-of-type):after {
        height: 3px;
        left: 0;
        top: 0;
        width: 100%;
    }

}

.organizational-chart h1, .organizational-chart h2{font-size: 15px; margin: 0px; cursor:pointer;}
.organizational-chart h3{font-size: 13px; margin: 0px; margin-top: 5px;}
.minheightreg{ min-height: 417px;}
.minheightreg5{min-height: 348px;}
.ml4{ margin-left:4px;}
.organizational-chart i.circleInfo{float:right;font-size:16px; cursor:pointer;}
.org i{ width:8px;}
.org{top: 75%;
    right: -6px;}
@media screen and (max-width: 1024px) 
{
  .minheightreg{ min-height: 350px;}
  .minheightreg1{ min-height: 330px;}
  .minheightreg2{ min-height: 250px;}
  .minheightreg3{ min-height: 300px;}
}
.apprheading{font-size: 18px;
    color: #676767;
    font-weight: 200;
    margin: 0px; margin-bottom: 20px;}
/*********end org chart*********/

tr.highlight td
        {
            background: #fef6dd !important;
        }
.summaryBg{background: #fff;box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); 
    -webkit-box-shadow: 0 1px 15px 1px rgba(69,65,78,.08);
    -moz-box-shadow: 0 1px 15px 1px rgba(69,65,78,.08);
    box-shadow: 0 1px 15px 1px rgba(69,65,78,.08);
    margin-bottom: 20px;
    padding: 16px;
}
.whitebgcr{ background: #fff;}
.payCheckBox{ border: solid thin #daeffd ; border-radius: 6px; padding: 12px; background: #daeffd; color:#2b6a94; margin-bottom: 16px;}
.payCheckBox .icon i{font-size: 30px; margin-top: 2px;}
.payCheckBox .contentpay{ margin-left: 8px; margin-top:9px;}
.payCheckBox .contentpay h4{ margin: 0px; padding: 0px; font-size: 16px;}
.payCheckBox .contentpay h4 a{color: #2b6a94;}
.payCheckBox .contentpay p{color: #676767;margin-top: 2px;font-size: 13px; margin-bottom: 0px;}
.payCheckBox .lasticon i{font-size: 22px; margin-top: 7px;}
.notDone{ background:#e8e8e8; color: :#242424;}
.notDone .contentpay h4 a{ color: #242424;}
.notDone .icon i{color: #736d6d;}
.modalextra{ margin:0px;font-size: 13px;padding: 5px 15px;color: #2b6a94;background: #daeffd;border-radius: 5px;}
#drilldownmyModal .modal-lg {

min-width:1000px !important;}
/**************Table**************/
.table-hover > tbody > tr:hover, .table-hover > tbody > tr:hover > td {background-color: #daeffd;}
.table-striped>tbody>tr:nth-of-type(odd) {background-color: #f7f5f5;}
.table-bordered > thead > tr > th, .table-bordered > tbody > tr > th, .table-bordered > tfoot > tr > th, .table-bordered > thead > tr > td, .table-bordered > tbody > tr > td, .table-bordered > tfoot > tr > td{color: #626262;}
table.table thead tr th {vertical-align: middle;white-space: nowrap;text-shadow: 0 1px 1px rgba(0,0,0,.3) !important;}
.table>thead:first-child>tr:first-child>th {
    background: #18AACC;
    color: #fff;
}
#tblDrillDown tr.bgRed td{background:#ffd7d7 !important;}
#tblDrillDown tr.bgBlue td{background:#91eff9 !important;}
#tblchartdrilldown tr.bgRed td{background:#ffd7d7 !important;}
#tblchartdrilldown tr.bgBlue td{background:#91eff9 !important;}

.sbox {
    width: 16px;
    height: 16px;
    border: solid thin #6d6666;
    margin-right: 5px;
}
.actual {
    background: #ffd7d7 ;
}
.estimated {
    background: #91eff9 ;
}

 .treegrid-expander{ margin-right: 5px; cursor: pointer;}
 .colorClick{cursor: pointer;}
 .selectColot td{ background: #fef6dd !important;}

 .modal-content .table>tbody>tr>td, .modal-content .table>tbody>tr>th, .modal-content .table>tfoot>tr>td, .modal-content .table>tfoot>tr>th, .modal-content .table>thead>tr>td, .modal-content .table>thead>tr>th{ font-size:13px;}
.modal-content .table > tbody > tr > td {
padding:5px 3px !important;
}
i {
    margin-right:5px;
}
.fa-expand, .fa-compress{ cursor: pointer; color: #333 !important;}

 .dcardBG {   transition: 500ms all;}
 .disp-block{ display: block !important;}
 .canvasbg{height: 100%; min-height:350px}
 table.dataTable{ margin-top:-2px !important;}
 .modal-body { padding:0px !important;}
 .modal-body.col-middle { padding:15px !important;}
 .modal-body .form-control{    height: 28px; margin-bottom:4px;}
 .modal-header{padding: 0px 0px 5px 0px;}
 table.dataTable{ border-collapse:collapse !important;}
 #drilldownmyModal .modal-title{ float:left;}
 .modalextra{ float:left;margin-left: 5px; padding:5px;}
 .max-height400{max-height:480px;}
 #tblchartdrilldown tbody a{font-weight:bold;     color: #0485a3; cursor:pointer;}
 .drillEmpimage{ margin-bottom:5px;}
 #modalSlideLeftEmp .modal-title .text-aqua {
    color: #0485a3 !important;
}
.dcard h3.text-aqua {
    color: #0485a3 !important; font-weight:400;
}
.p15{ padding:15px;}

.nav {
    display:block;
}

    .nav.nav-tabs li {
        display:inline-block;
    }

.width150 {
    min-width: 150px !important;
}

.select2-container {
    width: 150px !important;
}