/*
 * It is advised not to edit the smartadmin_production.css
 * as this will override any changes you make in the 
 * later versions of this theme. 
 * 
 * We advise that you use use this CSS to override 
 * SmartAdmin styles. 
 * 
 * Rename the stylesheet to whatever your liking so it will stay
 * unique to you with each update of SmartAdmin.
 */
.padding-top-0 {
  padding-top: 0 !important;
}
.padding-top-5 {
  padding-top: 5px !important;
}
.padding-bottom-0 {
  padding-bottom: 0 !important;
}
.padding-bottom-5 {
  padding-bottom: 5px !important;
}
.padding-left-5 {
  padding-left: 5px !important;
}
.padding-left-10 {
  padding-left: 10px !important;
}
.padding-right-5 {
  padding-right: 5px !important;
}
.padding-right-10 {
  padding-right: 10px !important;
}
.margin-top-0 {
  margin-top: 0 !important;
}
.margin-top-5 {
  margin-top: 5px !important;
}
.margin-bottom-0 {
  margin-bottom: 0 !important;
}
.margin-bottom-5 {
  margin-bottom: 5px !important;
}
.margin-left-5 {
  margin-left: 5px !important;
}
.margin-left-10 {
  margin-left: 10px !important;
}
.margin-right-5 {
  margin-right: 5px !important;
}
.margin-right-10 {
  margin-right: 10px !important;
}
.margin-right-15 {
  margin-right: 15px !important;
}
/*.smart-form {
    .input {
        input {
            padding: 4px 10px !important;
        }
    }
}*/
/* SmartForm Bootstrap Validation */
#extr-page h4.paragraph-header {
  width: auto;
}
#extr-page .smart-form .alert {
  margin: 4px;
}
#extr-page .smart-form .alert li {
  margin-left: 14px;
  list-style: none;
}
#extr-page .smart-form .alert li:before {
  content: "\f071";
  font-family: FontAwesome;
  position: absolute;
  left: 14px;
}
#extr-page .smart-form div + fieldset {
  padding-top: 15px;
}

.tree li.parent_li > span, .hei-unit {
    width: 375px;
    padding: 12px !important;
    position: relative;
}

.hie-text span {
    border: none !important;
}

.hei-img {
    overflow: hidden;
    height: 120px;
    width: 200px;
    border-radius: 5px;
    background-color: #ccc;
    position: relative;
}

    .hei-img img {
        /*position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translateY(-50%) translateX(-50%);*/
        position: absolute;
        left: 50%;
        top: 50%;
        -webkit-transform: translateY(-50%) translateX(-50%);
        height: 100%;
    }

.tree li.parent_li > span i, .hei-unit i {
    position: absolute;
    bottom: 10px;
    right: 10px;
}

.tree li::after {
    width: 50px;
}

.tree li {
    padding: 5px 30px;
}

.hie-wrap.root .hei-img {
    width: 100%;
    background-color: #fff;
}

.hie-wrap.root img {
    margin: 0 auto;
    height: auto;
    width:auto;
}

/*vertical view*/
/*.tree li.parent_li > ul {
    width: 420px;
}*/
ul.ng-scope li:hover, ul li.ng-scope.parent_li:hover {
    background: transparent !important;
}
li.ng-scope.parent_li span {
    width: auto;
}
.tree_vertical2 span {
    width:auto !important;
}
modal-title-left2{
    text-align:left !important;
}

.hrm_label2{
    width:auto;
    float:left;
}

.text_balance2 {
    text-align: right;
    width:100%;
}



span.hei-univ1 {
    width: 420px !important;
}

.acounts_center2{
    width:80%; margin:auto;
}

.border_bot2 {
    padding-bottom: 10px;
    border-bottom: dashed 1px #ccc;
    font-weight: bold;
    text-align: left !important;
}
.mb2_15 {
    margin-bottom:15px;
}

/* ## MEDIA QUERIES ## */
/* Large desktops and laptops */
@media (min-width: 1200px) {
}

/* Landscape tablets and medium desktops */
@media (min-width: 992px) and (max-width: 1199px) {
}


/* Portrait tablets and small desktops */
@media (min-width: 768px) and (max-width: 991px) {
    div.orgChart div.node {
        width: 220px;
    }

    .hei-unit1 div.col-md-5 {
        width: 40%;
        float: left;
    }

    .hei-unit1 div.col-md-7 {
        width: 60%;
        float: left;
        margin-top: -20px;
    }

    .hei-img {
        width: 70px;
        height: 70px;
    }

    .hei-unit1 {
        padding-top: 0;
    }

        .hei-unit1 strong {
            font-size: 12px !important;
        }

        .hei-unit1 div.col-md-12 {
            font-size: 11px;
            letter-spacing: 0;
            margin-bottom: 0 !important;
        }

    .hie-wrap.root div.hei-img img {
        width: 65% !important;
    }

    .hie-wrap.root div.hei-img {
        height: 85px;
    }
    li.ng-scope.parent_li span {
        width: 100%;
    }
    div.vertical2_viewport .hei-img {
        overflow: hidden;
        height: 120px;
        width: 120px;
        border-radius: 5px;
        background-color: #ccc;
        position: relative;
    }
    .text_balance2 {
        text-align: left !important;
        width: 100%;
    }
}



@media (min-width: 768px) {
}

/* Landscape phones and portrait tablets */
@media (max-width: 767px) {

    div.orgChart div.node {
        width: 200px;
    }

    .hei-unit1 div.col-md-5 {
        width: 30%;
        float: left;
    }

    .hei-unit1 div.col-md-7 {
        width: 70%;
        float: left;
        margin-top: -20px;
    }

    .hei-img {
        width: 52px;
        height: 52px;
    }

    .hei-unit1 {
        padding-top: 0;
    }

        .hei-unit1 strong {
            font-size: 12px !important;
        }

        .hei-unit1 div.col-md-12 {
            font-size: 11px;
            letter-spacing: 0;
            margin-bottom: 0 !important;
        }

    .smart-form .row {
        margin-left: -10px;
    }

    .hie-wrap.root div.hei-img img {
        width: 65% !important;
    }

    .hie-wrap.root div.hei-img {
        height: 85px;
    }

    li.ng-scope.parent_li span {
        width: 100%;
    }

    li.ng-scope.parent_li span {
        width: 100%;
    }

    div.vertical2_viewport .hei-img {
        overflow: hidden;
        height: 120px;
        width: 120px;
        border-radius: 5px;
        background-color: #ccc;
        position: relative;
    }
    li.ng-scope .hei-univ1 {
        width: 100%;
    }

    span.hei-univ1 {
        width: 240px !important;
    }
    .text_balance2 {
        text-align: left !important;
        width: 100%;
    }
}

@media (max-width: 700px) {
    .vertical2_viewport .verticalmd5 {
        width:100%;
    }
    .tree div.vertical2_viewport li.parent_li > ul {
        width: 300px;
    }
}

@media (max-width: 540px) {
    .tree div.vertical2_viewport li.parent_li > ul {
        width: 250px !important;
    }
    div.vertical2_viewport li.parent_li span.hie-wrap {
        width: 270px;
    }
}

    /* Portrait phones and smaller */
@media (max-width: 480px) {
    div.orgChart div.node {
        width: 320px;
    }

    .hei-img {
        width: 44px;
        height: 44px;
    }

    .hei-unit1 strong {
        font-size: 10px !important;
    }

    .hei-unit1 div.col-md-12 {
        font-size: 10px;
        letter-spacing: 0;
        margin-bottom: 0 !important;
    }

    .tree div.vertical2_viewport li.parent_li > ul {
        width: 220px !important;
    }

    div.vertical2_viewport li.parent_li span.hie-wrap {
        width: 240px;
    }
    div.vertical2_viewport .hei-img {
        height: 80px;
        width: 80px;
    }
    .org_chart_mobile2 div.hie-text{
        font-size:12px !important;
    }
    .org_chart_mobile2 div.hie-text div.col-md-12 {
        font-size: 12px !important;
        margin-bottom:0 !important;
        padding: 1px 2px 1px 10px;
    }

    span.hei-univ1 {
        width: 190px !important;
    }
    .tree li::after {
        width: 25px;
    }
    .tree li {
        padding: 5px 30px;
        padding-left: 4px;
    }
    .text_balance2 {
        text-align: left !important;
        width: 100%;
    }

}

#chart-container {
    position: relative;
    display: inline-block;
    top: 10px;
    left: 10px;
    height: 626px;
    width: calc(100% - 24px);
    border: 2px dashed #aaa;
    border-radius: 5px;
    overflow: auto;
    text-align: center;
}

#chart-container-single {
    position: relative;
    display: inline-block;
    top: 10px;
    left: 10px;
    height: 525px;
    width: calc(100% - 24px);
    border: 2px dashed #aaa;
    border-radius: 5px;
    overflow: auto;
    text-align: center;
}

.orgchart.b2t .node .verticalmd5 {
    transform: rotate(-180deg);
    /*transform-origin: center bottom;*/
    transform-origin: 50% 80%;
}

.orgchart.b2t .node .org_chart_mobile2 {
    transform: rotate(180deg);
    /*transform-origin: center top;*/
    transform-origin: 49% -31%;
}