.btn-holder {
    padding: 0px 15px 15px 15px;
    overflow-x: auto;
    white-space: nowrap;
}

.btn-scroll {
    min-width: 150px;
    margin: 1px 1px;
    display: inline-block;
}

.ui-datepicker {
    z-index: 9999 !important;
}

.dx-texteditor {
    background-color: transparent;
    border: none;
}

.dx-toolbar {
    background-color: transparent;
}

.scrollHeight {
    height: 85vh;
}

.dx-datagrid {
    background-color: transparent;
}

.dx-group-cell {
    color: #000000 !important;
    font-size: 1.2em;

}

.dx-datagrid-text-content {
    color: #000000 !important;
}

.dx-overlay-content label {
    width: auto;
}

.dx-datagrid td {
    font-weight: bold;
}

.Main {
    background-color: #8eaadb;
}

.sub-total {
    color: #ff0000;
}

.dx-row-alt td.Main {
    background-color: #a5bbe3;
}

.Total {
    background-color: #c2cbdc;
}

.dx-row-alt td.Total {
    background-color: #cdd3dc;
}

.Eth {
    background-color: #72a94d;
}

.dx-row-alt td.Eth {
    background-color: #6c9d4b;
}

.Eth1 {
    background-color: #8dc667;
}

.dx-row-alt td.Eth1 {
    background-color: #85b863;
}

.Eth2 {
    background-color: #96c677;
}

.dx-row-alt td.Eth2 {
    background-color: #90ba74;
}

.Eth3 {
    background-color: #aedb8f;
}

.dx-row-alt td.Eth3 {
    background-color: #a0c687;
}

.Eth4 {
    background-color: #bce0a4;
}

.dx-row-alt td.Eth4 {
    background-color: #adcb99;
}

.Eth5 {
    background-color: #c5e1b3;
}

.dx-row-alt td.Eth5 {
    background-color: #b4cda3;
}

.Eth6 {
    background-color: #dcedd1;
}

.dx-row-alt td.Eth6 {
    background-color: #d8e7ce;
}

.Age {
    background-color: #2e75b5;
}

.dx-row-alt td.Age {
    background-color: #326a9d;
}

.Age4 {
    background-color: #deeaf6;
}

.dx-row-alt td.Age4 {
    background-color: #c6d1dc;
}

.Age3 {
    background-color: #bdd6ee;
}

.dx-row-alt td.Age3 {
    background-color: #a9bfd4;
}

.Age2 {
    background-color: #b4c6e7;
}

.dx-row-alt td.Age2 {
    background-color: #9eaecd;
}

.Age1 {
    background-color: #5b9bd5;
}

.dx-row-alt td.Age1 {
    background-color: #5d8ab3;
}

.Occ {
    background-color: #de9463;
}

.dx-row-alt td.Occ {
    background-color: #d49063;
}

.Occ1 {
    background-color: #d29c77;
}

.dx-row-alt td.Occ1 {
    background-color: #c49474;
}

.Occ4 {
    background-color: #e3c0a9;
}

.dx-row-alt td.Occ4 {
    background-color: #d4b6a2;
}

.Occ6 {
    background-color: #edddd3;
}

.dx-row-alt td.Occ6 {
    background-color: #ded1c8;
}

.Occ5 {
    background-color: #e1c7b6;
}

.dx-row-alt td.Occ5 {
    background-color: #d7c2b4;
}

.Occ3 {
    background-color: #e3b799;
}

.dx-row-alt td.Occ3 {
    background-color: #d9b095;
}

.Occ2 {
    background-color: #d9a989;
}

.dx-row-alt td.Occ2 {
    background-color: #c99f83;
}

.date-top input {
    width: 100%;
    display: inline-block;
}

.date-top label {
    width: 100%;
    display: inline-block;
}

.tree * {
    margin: 0;
    padding: 0;
}

.tree ul {
    padding-top: 20px;
    position: relative;

    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
}

.tree li {
    float: left;
    text-align: center;
    list-style-type: none;
    position: relative;
    padding: 20px 5px 0 5px;

    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
}

/*We will use ::before and ::after to draw the connectors*/

.tree li::before,
.tree li::after {
    content: '';
    position: absolute;
    top: 0;
    right: 50%;
    border-top: 1px solid #1c7ebe;
    width: 50%;
    height: 20px;
}

.tree li::after {
    right: auto;
    left: 50%;
    border-left: 1px solid #1c7ebe;
}

/*We need to remove left-right connectors from elements without 
any siblings*/
.tree li:only-child::after,
.tree li:only-child::before {
    display: none;
}

/*Remove space from the top of single children*/
.tree li:only-child {
    padding-top: 0;
}

/*Remove left connector from first child and 
right connector from last child*/
.tree li:first-child::before,
.tree li:last-child::after {
    border: 0 none;
}

/*Adding back the vertical connector to the last nodes*/
.tree li:last-child::before {
    border-right: 1px solid #1c7ebe;
    border-radius: 0 5px 0 0;
    -webkit-border-radius: 0 5px 0 0;
    -moz-border-radius: 0 5px 0 0;
}

.tree li:first-child::after {
    border-radius: 5px 0 0 0;
    -webkit-border-radius: 5px 0 0 0;
    -moz-border-radius: 5px 0 0 0;
}

/*Time to add downward connectors from parents*/
.tree ul ul::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    border-left: 1px solid #1c7ebe;
    width: 0;
    height: 20px;
}

.tree li span {
    border: 2px solid #091fe6;
    padding: 1em 0.75em;
    text-decoration: none;
    color: #666767;
    font-family: arial, verdana, tahoma;
    font-size: 0.85em;
    display: inline-block;

    /*
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
  */

    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
}

/* -------------------------------- */
/* Now starts the vertical elements */
/* -------------------------------- */

.tree ul.vertical,
ul.vertical ul {
    padding-top: 0px;
    left: 50%;
}

/* Remove the downward connectors from parents */
.tree ul ul.vertical::before {
    display: none;
}

.tree ul.vertical li {
    float: none;
    text-align: left;
}

.tree ul.vertical li::before {
    right: auto;
    border: none;
}

.tree ul.vertical li::after {
    display: none;
}

.tree ul.vertical li a {
    padding: 10px 0.75em;
    margin-left: 16px;
}

.tree ul.vertical li::before {
    top: -20px;
    left: 0px;
    border-bottom: 1px solid #1c7ebe;
    border-left: 1px solid #1c7ebe;
    width: 20px;
    height: 60px;
}

.tree ul.vertical li:first-child::before {
    top: 0px;
    height: 40px;
}

/* Lets add some extra styles */

div.tree>ul>li>ul>li>a {
    width: 1em;
}

div.tree>ul>li>a {
    font-size: 1em;
    font-weight: bold;
}

label {
    width: 100%;
}


/* ------------------------------------------------------------------ */
/* Time for some hover effects                                        */
/* We will apply the hover effect the the lineage of the element also */
/* ------------------------------------------------------------------ */


.ui-datepicker-title select {
    color: black;
}

/* .modal-body input
{
	width : 100%;
	display: inline-block;
}

.modal-body select {
    width: 100%;
    display: inline-block;
}

.modal-body label 
{
	width : 100%;
	display: inline-block;
} */

.modal-body .chk {
    width: auto;
    display: inline-block;
    text-align: right;
}

/* .modal-footer button 
{
	width : 100%;
	display: inline-block;
} */

.content {
    overflow: auto;
}

#tableid th a {
    font-size: 12px !important;
}

#tableid td {
    font-size: 12px !important;
}

#tableid th {
    font-size: 12px !important;
}

.editablegrid-action a {
    font-size: 1.4em;
}

.dx-column-lines td {
    background-color: white;
}

.dx-header-row td {
    background-color: #08567a;
    vertical-align: middle !important;

}

.dx-header-row td div {
    color: rgb(255, 255, 255) !important;
    vertical-align: middle !important;
}

.dx-header-filter {
    color: grey !important;
}

.dx-header-filter-empty {
    color: white !important;
}

.dx-row-lines td {
    background-color: white;
    vertical-align: middle !important;
}

div.dx-popup-content input[type=text] {
    border: 1px solid black !important;
    border-radius: 5px !important;
}

.logo img {
    margin-left: -15px !important;
}

.print-4 {
    height: 500px;
}

.print-6 {
    height: 500px;
}

@media print {

    .dxDataGrid {
        margin: 0px, 0px, 0px, 0px;
        background-color: grey;
    }

    .print-structure-name {
        display: block !important;
        color: #d24a38  !important;
        font-size: 2.5em !important;
        font-family: sans-serif !important;
        font-weight: bold !important;
        padding-top: 1.7em !important;
    }

    .print-logo,
    #homecell h1 {
        display: inline !important;
        color: #d24a38  !important;
        font-size: 40px !important;
        font-weight: 900 !important;
        padding: 10px;
    }


    .print_important {
        display: block !important;
    }

    .info-box {
        border: 1px solid black;
    }

    .info-box hr {
        color: #000000 !important;
    }

    .info-box .progress-bar {
        color: #222222 !important;
    }

    .no-print,
    .no-print * {
        display: none !important;
    }

    .print-margin-top {
        margin-top: 300px;
    }

    #bap_hs {
        height: 320px !important;
    }

    #bap_wat {
        height: 320px !important;
    }

    #sal_hom {
        height: 320px !important;
    }

    #sal_chu {
        height: 320px !important;
    }

    #ftv_hom {
        height: 320px !important;
    }

    #ftv_chu {
        height: 320px !important;
    }
}

@media (max-width: 1000px) {
    .Nets {
        display: none;
    }

    /* #gridContainer {
    height: 600px;
  } */
}

/* @media (min-width: 1350px) {
  #gridContainer {
    height: 750px;
  }
} */

.Clear {
    float: right;
    position: absolute;
    right: 20px;
    top: 20px;
    z-index: 9999999 !important;
    color: #ff0000;
    font-size: 1.2em;
}

.Clear:hover {
    color: #ad0303 !important;
}

.table-bordered td {
    text-align: center;
}

.table-bordered {
    border-spacing: 45 !important;
    border-collapse: collapse;
}

.table-bordered td,
.table-bordered th {
    text-align: center;
    border: 1px solid #999999 !important;
}

.table-bordered th {
    background-color: #ccd6db;
}

.table-bordered td {
    font-size: 1.2em;
}

.panel-title {
    text-align: center;
}