body,.header-navbar,.content-header-title,.breadcrumb-item, .xcrud-view label, .ui-tabs .ui-tabs-nav li a,
.pt-1, .py-1, .text-white, h1,h2,h3,h4,h5,h6,
.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button {
    font-family: 'Open Sans', 'Quicksand', 'Tajawal', sans-serif;
}

footer.footer {
    padding: 30px 20px;
}

.xcrud-list-container {
    margin-top: 20px;
}

.xcrud-nav {
    padding: 15px 0;
    padding-bottom: 0;
}

.breadcrumbs-top {
    margin-bottom: 20px;
}

.xcrud-search .select2-container .select2-selection--single {
    height: calc(1.25em + 1.5rem + 2px);
    border-radius: 0;
}

.xcrud-search input {
    border-radius: 0;
}

.select2-container .select2-selection--single {
    height: calc(1.25em + 1.5rem + 2px);
}

.xcrud-top-actions {
    padding: 5px 0;
    margin-bottom: 20px;
}

.xcrud-view label {
    font-weight: bolder;
    color: black;
}

.xcrud-th th {
    background: #811856;
    color: white;
}

.content-header-title {
    font-weight: 900;
    color: black;
    font-size: 33px;
}

.xcrud-view .xcrud-upload-container img {
    max-width: 200px;
    max-height: 200px;
}

#crypto-stats-2 .mb-2 {
    margin-bottom: 8px!important;
}


.table {
    color: black;
}



.menu-collapsed .nav-link i {
    margin: 0!important;
}

.pagination {
    float: left;
}

.pagination a {
    color: inherit!important;
}

.xcrud-limit-buttons {
    float: right;
}

.required {
    margin: 0 5px;
    color: red;
}

.header-navbar .navbar-header .navbar-brand .brand-logo {
    width: 200px;
    height: auto;
    margin-top: 6px;
}

.btn-full {
    width: 100%;
}

.bold-tr {
    font-weight: bold;
    border-top: 2px solid;
}

@media print {
table {
    font-size: 12px;
}

}

.table .thead-dark th {
    color: #fff;
    background-color: #811856;
    border-color: #cd328e;
}



.btn-title {
    padding-left: 3px;
}

.btn-title i {
    margin-right: 6px;
    margin-left: 6px;
}






.tree-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }

  .tree {
    margin: 18px;
    padding: 0;
  }
  .tree:not(:empty):before, .tree:not(:empty):after,
  .tree ul:not(:empty):before, .tree ul:not(:empty):after,
  .tree li:not(:empty):before, .tree li:not(:empty):after {
    display: block;
    position: absolute;
    content: "";
  }
  .tree ul, .tree li {
    position: relative;
    margin: 0;
    padding: 0;
  }
  .tree li {
    list-style: none;
  }
  .tree li > div {
    background-color: #eee;
    color: #222;
    padding: 10px 25px;
    border-radius: 3px;
    display: inline-block;
  }
  .tree.cascade li {
    margin-left: 24px;
  }
  .tree.cascade li div {
    margin-top: 12px;
  }
  .tree.cascade li:before {
    border-left: 1px solid #7e1855;
    height: 100%;
    width: 0;
    top: 0;
    left: -12px;
  }
  .tree.cascade li:after {
    border-top: 1px solid #7e1855;
    width: 12px;
    left: -12px;
    top: 24px;
  }
  .tree.cascade li:last-child:before {
    height: 24px;
    top: 0;
  }
  .tree.cascade > li:first-child:before {
    top: 24px;
  }
  .tree.cascade > li:only-child {
    margin-left: 0;
  }
  .tree.cascade > li:only-child:before, .tree.cascade > li:only-child:after {
    content: none;
  }
  .tree.horizontal li {
    display: flex;
    align-items: center;
    margin-left: 24px;
  }
  .tree.horizontal li div {
    margin: 6px 0;
  }
  .tree.horizontal li:before {
    border-left: 1px solid #7e1855;
    height: 100%;
    width: 0;
    top: 0;
    left: -12px;
  }
  .tree.horizontal li:first-child:before {
    height: 50%;
    top: 50%;
  }
  .tree.horizontal li:last-child:before {
    height: 50%;
    bottom: 50%;
    top: auto;
  }
  .tree.horizontal li:after, .tree.horizontal li ul:after {
    border-top: 1px solid #7e1855;
    height: 0;
    width: 12px;
    top: 50%;
    left: -12px;
  }
  .tree.horizontal li:only-child:before {
    content: none;
  }
  .tree.horizontal li ul:after {
    left: 0;
  }
  .tree.horizontal > li:only-child {
    margin-left: 0;
  }
  .tree.horizontal > li:only-child:before, .tree.horizontal > li:only-child:after {
    content: none;
  }
  .tree.vertical {
    display: flex;
  }
  .tree.vertical ul {
    display: flex;
    justify-content: center;
  }
  .tree.vertical li {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .tree.vertical li div {
    margin: 12px 6px;
  }
  .tree.vertical li:before {
    border-left: 1px solid #7e1855;
    height: 12px;
    width: 0;
    top: 0;
  }
  .tree.vertical li:after {
    border-top: 1px solid #7e1855;
    height: 0;
    width: 100%;
  }
  .tree.vertical li:first-child:after {
    border-top: 1px solid #7e1855;
    height: 0;
    width: 50%;
    left: 50%;
  }
  .tree.vertical li:last-child:after {
    border-top: 1px solid #7e1855;
    height: 0;
    width: 50%;
    right: 50%;
  }
  .tree.vertical li:only-child:after {
    content: none;
  }
  .tree.vertical li ul:before {
    border-left: 1px solid #7e1855;
    height: 12px;
    width: 0;
    top: -12px;
  }
  .tree.vertical > li:only-child:before, .tree.vertical > li:only-child:after {
    content: none;
  }
  .tree.vertical.cascade-4 > li > ul > li > ul > li > ul > li, .tree.vertical.cascade-3 > li > ul > li > ul > li, .tree.vertical.cascade-2 > li > ul > li, .tree.vertical.cascade-1 > li, .tree.vertical .cascade {
    flex-direction: column;
    align-items: start;
    padding: 0 12px;
  }
  .tree.vertical.cascade-4 > li > ul > li > ul > li > ul > li:before, .tree.vertical.cascade-3 > li > ul > li > ul > li:before, .tree.vertical.cascade-2 > li > ul > li:before, .tree.vertical.cascade-1 > li:before, .tree.vertical .cascade:before {
    left: 24px;
  }
  .tree.vertical.cascade-4 > li > ul > li > ul > li > ul > li:after, .tree.vertical.cascade-3 > li > ul > li > ul > li:after, .tree.vertical.cascade-2 > li > ul > li:after, .tree.vertical.cascade-1 > li:after, .tree.vertical .cascade:after {
    left: 0;
  }
  .tree.vertical.cascade-4 > li > ul > li > ul > li > ul > li:first-child:after, .tree.vertical.cascade-3 > li > ul > li > ul > li:first-child:after, .tree.vertical.cascade-2 > li > ul > li:first-child:after, .tree.vertical.cascade-1 > li:first-child:after, .tree.vertical .cascade:first-child:after {
    left: 24px;
    width: 100%;
  }
  .tree.vertical.cascade-4 > li > ul > li > ul > li > ul > li:last-child:after, .tree.vertical.cascade-3 > li > ul > li > ul > li:last-child:after, .tree.vertical.cascade-2 > li > ul > li:last-child:after, .tree.vertical.cascade-1 > li:last-child:after, .tree.vertical .cascade:last-child:after {
    left: 0;
    width: 24px;
  }
  .tree.vertical.cascade-4 > li > ul > li > ul > li > ul > li ul, .tree.vertical.cascade-3 > li > ul > li > ul > li ul, .tree.vertical.cascade-2 > li > ul > li ul, .tree.vertical.cascade-1 > li ul, .tree.vertical .cascade ul, .tree.vertical.cascade-4 > li > ul > li > ul > li > ul > li li, .tree.vertical.cascade-3 > li > ul > li > ul > li li, .tree.vertical.cascade-2 > li > ul > li li, .tree.vertical.cascade-1 > li li, .tree.vertical .cascade li {
    display: block;
  }
  .tree.vertical.cascade-4 > li > ul > li > ul > li > ul > li ul:before, .tree.vertical.cascade-3 > li > ul > li > ul > li ul:before, .tree.vertical.cascade-2 > li > ul > li ul:before, .tree.vertical.cascade-1 > li ul:before, .tree.vertical .cascade ul:before, .tree.vertical.cascade-4 > li > ul > li > ul > li > ul > li ul:after, .tree.vertical.cascade-3 > li > ul > li > ul > li ul:after, .tree.vertical.cascade-2 > li > ul > li ul:after, .tree.vertical.cascade-1 > li ul:after, .tree.vertical .cascade ul:after,
  .tree.vertical.cascade-4 > li > ul > li > ul > li > ul > li li:before,
  .tree.vertical.cascade-3 > li > ul > li > ul > li li:before,
  .tree.vertical.cascade-2 > li > ul > li li:before,
  .tree.vertical.cascade-1 > li li:before,
  .tree.vertical .cascade li:before, .tree.vertical.cascade-4 > li > ul > li > ul > li > ul > li li:after, .tree.vertical.cascade-3 > li > ul > li > ul > li li:after, .tree.vertical.cascade-2 > li > ul > li li:after, .tree.vertical.cascade-1 > li li:after, .tree.vertical .cascade li:after {
    border: none;
  }
  .tree.vertical.cascade-4 > li > ul > li > ul > li > ul > li div, .tree.vertical.cascade-3 > li > ul > li > ul > li div, .tree.vertical.cascade-2 > li > ul > li div, .tree.vertical.cascade-1 > li div, .tree.vertical .cascade div {
    margin: 0;
    margin-top: 12px;
  }
  .tree.vertical.cascade-4 > li > ul > li > ul > li > ul > li li, .tree.vertical.cascade-3 > li > ul > li > ul > li li, .tree.vertical.cascade-2 > li > ul > li li, .tree.vertical.cascade-1 > li li, .tree.vertical .cascade li {
    margin-left: 24px;
  }
  .tree.vertical.cascade-4 > li > ul > li > ul > li > ul > li li:before, .tree.vertical.cascade-3 > li > ul > li > ul > li li:before, .tree.vertical.cascade-2 > li > ul > li li:before, .tree.vertical.cascade-1 > li li:before, .tree.vertical .cascade li:before {
    border-left: 1px solid #7e1855;
    height: 100%;
    width: 0;
    top: 0;
    left: -12px;
  }
  .tree.vertical.cascade-4 > li > ul > li > ul > li > ul > li li:after, .tree.vertical.cascade-3 > li > ul > li > ul > li li:after, .tree.vertical.cascade-2 > li > ul > li li:after, .tree.vertical.cascade-1 > li li:after, .tree.vertical .cascade li:after {
    border-top: 1px solid #7e1855;
    width: 12px;
    height: 0;
    left: -12px;
    top: 24px;
    content: "";
  }
  .tree.vertical.cascade-4 > li > ul > li > ul > li > ul > li li:last-child:before, .tree.vertical.cascade-3 > li > ul > li > ul > li li:last-child:before, .tree.vertical.cascade-2 > li > ul > li li:last-child:before, .tree.vertical.cascade-1 > li li:last-child:before, .tree.vertical .cascade li:last-child:before {
    height: 24px;
    top: 0;
  }


  .tree li > div {
    background-color: #7f1855;
    color: #fff;
    padding: 10px 25px;
    border-radius: 3px;
    display: inline-block;
}

html body a {
    color: #e7078c;
}

html body a:hover {
    color: #ff46b4;
}

.tree-wrapper a {
  color: white;
}

.tree-parent-name {
    color: white!important;
    margin: 0;
    padding: 10px 40px;
}

.table .thead-light th {
    color: white;
}

.tree-parent-name {
    font-size: 20px;
    font-weight: bold;
    background-color: #4cd137!important;
}


#tree-wrapper .tree.vertical li:last-child {
}

#tree-wrapper .tree li > div {
  background-color: #707070;
}

.tree li > div a {
}

r {
  color: red;
  margin: 0 3px;
}

.invoice-table th {
    background: #811856;
    color: white;
}

.invoice-table tbody tr td {
    padding: 0;
}

.invoice-table tr td input,
.invoice-table tr td select {
  border: 0;
  width: 100%;
}

.invoice-table .select2-container--bootstrap.select2-container--focus .select2-selection {
    -webkit-box-shadow: none!important;
    box-shadow: none!important;
    -o-transition: none!important;
    -webkit-transition: none!important;
    transition: none!important;
    transition: none!important;
    transition: none!important;
    border-color: none!important;
    border: 0!important;
}

.invoice-table .select2-container .select2-selection--single {
    height: 40px!important;
    border: 0!important;
    width: 100%!important;
    display: inline-block!important;
}

.invoice-table tr td .btn {
    border-radius: 0;
    height: 40px;
    width: 50%;
    float: left;
    padding-top: 9px;
    font-size: 17px;
}

.invoice-table tfoot tr td input {
  font-weight: bold;
  text-align: center;
}



.invoice-table input[type="radio"], .invoice-table input[type="checkbox"] {
    box-sizing: border-box;
    padding: 0;
    height: 22px;
    margin-top: 8px;
}



.tree-container {
    overflow-y: scroll;
}


#tree-wrapper .tree li > div {
    text-align: center;
}

.tree.vertical li div {
    text-align: center;
}


.fix-text-td {
    vertical-align: middle!important;
    text-align: center;
}



.green {
    color: limegreen;
}