.dt-buttons{
  float:right;
  margin-left:15px;
}
.dt-buttons .btn {
  padding: 0.18rem 0.75rem;
}
.bg-cover {
  /* Set rules to fill background */
  background: url(../img/bg-01.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;

  min-height: 100%;
  min-width: 1024px;

  /* Set up proportionate scaling */
  width: 100%;
  /*height: auto;*/

  /* Set up positioning */
  position: fixed;
  top: 0;
  left: 0;
}

@media screen and (max-width: 1024px) { /* Specific to this particular image */
  .bg-cover {
    left: 50%;
    margin-left: -512px;   /* 50% */
  }
}

.user-panel .image {
  margin: auto 0;
}

@media (min-width: 768px) {
  .before-footer {
    transition: margin-left .3s ease-in-out;
    margin-left:250px;
    background-color: #f4f6f9;
  }
}

/*----------------genealogy-scroll----------*/
.genealogy-scroll::-webkit-scrollbar {
    width: 5px;
    height: 8px;
}
.genealogy-scroll::-webkit-scrollbar-track {
    border-radius: 10px;
    background-color: #e4e4e4;
}
.genealogy-scroll::-webkit-scrollbar-thumb {
    background: #212121;
    border-radius: 10px;
    transition: 0.5s;
}
.genealogy-scroll::-webkit-scrollbar-thumb:hover {
    background: #d5b14c;
    transition: 0.5s;
}
 
 
/*----------------genealogy-tree----------*/
.genealogy-body{
    white-space: nowrap;
    overflow-y: hidden;
    padding: 50px;
    min-height: 500px;
    padding-top: 10px;
}
.genealogy-tree ul {
    padding-top: 20px; 
    position: relative;
    padding-left: 0px;
    display: flex;
}
.genealogy-tree li h3 {
    font-size: 0.8rem!important;
    color:#09c4a5;
    margin-bottom: 0.1rem;
}
.genealogy-tree li {
    float: left; text-align: center;
    list-style-type: none;
    position: relative;
    padding: 20px 5px 0 5px;
}

.genealogy-tree li::before, .genealogy-tree li::after{
    content: '';
    position: absolute; 
  top: 0; 
  right: 50%;
    border-top: 2px solid #ccc;
    width: 50%; 
  height: 18px;
}
.genealogy-tree li::after{
    right: auto; left: 50%;
    border-left: 2px solid #ccc;
}
.genealogy-tree li:only-child::after, .genealogy-tree li:only-child::before {
    display: none;
}
.genealogy-tree li:only-child{ 
    padding-top: 0;
}
.genealogy-tree li:first-child::before, .genealogy-tree li:last-child::after{
    border: 0 none;
}
.genealogy-tree li:last-child::before{
    border-right: 2px solid #ccc;
    border-radius: 0 5px 0 0;
    -webkit-border-radius: 0 5px 0 0;
    -moz-border-radius: 0 5px 0 0;
}
.genealogy-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;
}
.genealogy-tree ul ul::before{
    content: '';
    position: absolute; top: 0; left: 50%;
    border-left: 2px solid #ccc;
    width: 0; height: 20px;
}
.genealogy-tree li a{
    text-decoration: none;
    display: inline-block;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}
 
.genealogy-tree li a:hover+ul li::after, 
.genealogy-tree li a:hover+ul li::before, 
.genealogy-tree li a:hover+ul::before, 
.genealogy-tree li a:hover+ul ul::before{
    border-color:  #fbba00;
}
 
/*--------------memeber-card-design----------*/
.member-view-box{
    padding:0px 20px;
    text-align: center;
    border-radius: 4px;
    position: relative;
}
.member-image{
    width: 60px;
    position: relative;
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.member-image img{
    width: 60px;
    height: 60px;
    border-radius: 6px;
  background-color :#000;
  z-index: 1;
}

.color-palette {
  text-align: center;
}
.color-palette-set{
  margin-bottom:0.5rem;
  box-shadow: 0 0 1px rgb(0 0 0 / 13%), 0 1px 3px rgb(0 0 0 / 20%);
}
.col-md-1-5{
  position: relative;
  width: 100%;
  padding-right: 7.5px;
  padding-left: 7.5px;
  flex: 0 0 12.5%;
  max-width:12.5%;
  border-radius: 0.25rem;
}
.col-md-25{
  position: relative;
  width: 100%;
  padding-right: 7.5px;
  padding-left: 7.5px;
  flex: 0 0 auto;
  max-width:25%;
  border-radius: 0.25rem;
}
.font-size-palette-head {
  font-weight: 500;
  line-height: 1vw
}
.font-size-palette-sub {
  color:#6c757db8;
}
.pad-top-bott{
  padding-top:1rem;
  padding-bottom:1rem;
}
.bar-beginner{
  background: rgb(0,125,236);
  background: linear-gradient(90deg, rgba(0,125,236,1) 30%, rgba(0,181,244,1) 100%);
}
.bar-junior{
  background: rgb(26,165,208);
  background: linear-gradient(90deg, rgba(26,165,208,1) 30%, rgba(85,230,191,1) 100%);
}
.bar-senior{
  background: rgb(180,66,179);
  background: linear-gradient(90deg, rgba(180,66,179,1) 30%, rgba(242,97,226,1) 100%);
}
.bar-pro{
  background: rgb(253,128,2);
  background: linear-gradient(90deg, rgba(253,128,2,1) 30%, rgba(255,247,0,1) 100%);
}

.circle-dot-senior{
  width:10px;
  height:10px;
  border-radius:20px;
  font-size:5px;
  color:#fff;
  line-height:10px;
  text-align:center;
  background:#b543b4;
  opacity: 0.5;
}

.table thead th, .table.dataTable tfoot th{
  font-size:0.8rem;
  white-space: nowrap;
}
.table.dataTable td{
  font-size:0.75rem;
  border:0;
  vertical-align: middle;
  white-space: nowrap;
}

/*#na_datatable th, #orders_list th, #invoice_list th, #list_team th, #income_datatable th , #income_datatable_sub th, #invoice_history th {
    font-size:0.8rem;
    white-space: nowrap;
}

#na_datatable td, #orders_list td, #invoice_list td, #list_team td, #income_datatable td, #income_datatable_sub td, #invoice_history td {
    font-size:0.9rem;
    border:0;
    vertical-align: middle;
}*/

.sidebar-mini .main-sidebar .user-panel img, .sidebar-mini .main-sidebar:hover .user-panel img, .sidebar-mini.sidebar-collapse .main-sidebar:hover .user-panel img {
  height: auto;
  width: 3rem;
}

.sidebar-mini.sidebar-collapse .main-sidebar .user-panel img {
  height: auto;
  width: 2.1rem;
}

.sidebar-mini .main-sidebar .brand-link .brand-image, .sidebar-mini .main-sidebar:hover .brand-link .brand-image, .sidebar-mini.sidebar-collapse .main-sidebar:hover .brand-link .brand-image {
  margin-left: 1rem;
  margin-right: .8rem;
  max-height: 40px;
}

.sidebar-mini.sidebar-collapse .main-sidebar .brand-link .brand-image {
  margin-left: 0.8rem;
  margin-right: 0.5rem;
  margin-top: -3px;
  max-height: 33px;
}

.rank {
  /*background: linear-gradient(330deg, #e05252 0%, #99e052 30%, #52e0e0 50%, #9952e0 75%, #e05252 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;*/
  font-size:1.3rem;
}

/* Style the rainbow text element. */
.rainbow-text {
  /* Create a conic gradient. */
  /* Double percentages to avoid blur (#000 10%, #fff 10%, #fff 20%, ...). */
  background: #CA4246;
  background-color: #CA4246;
  background: conic-gradient(
    #CA4246 16.666%, 
    #E16541 16.666%, 
    #E16541 33.333%, 
    #F18F43 33.333%, 
    #F18F43 50%, 
    #8B9862 50%, 
    #8B9862 66.666%, 
    #476098 66.666%, 
    #476098 83.333%, 
    #A7489B 83.333%);
  
  /* Set thee background size and repeat properties. */
  background-size: 57%;
  background-repeat: repeat;
  
  /* Use the text as a mask for the background. */
  /* This will show the gradient as a text color rather than element bg. */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; 
  
  /* Animate the text when loading the element. */
  /* This animates it on page load and when hovering out. */
  animation: rainbow-text-animation-rev 0.5s ease forwards;

  cursor: pointer;
}

/* Add animation on hover. */
.rainbow-text:hover {
  animation: rainbow-text-animation 0.5s ease forwards;
}

/* Move the background and make it larger. */
/* Animation shown when hovering over the text. */
@keyframes rainbow-text-animation {
  0% {
    background-size: 57%;
    background-position: 0 0;
  }
  20% {
    background-size: 57%;
    background-position: 0 1em;
  }
  100% {
    background-size: 300%;
    background-position: -9em 1em;
  }
}

/* Move the background and make it smaller. */
/* Animation shown when entering the page and after the hover animation. */
@keyframes rainbow-text-animation-rev {
  0% {
    background-size: 300%;
    background-position: -9em 1em;
  }
  20% {
    background-size: 57%;
    background-position: 0 1em;
  }
  100% {
    background-size: 57%;
    background-position: 0 0;
  }
}



.plusminus .input-group {
  position: relative;
  display: table;
  border-collapse: separate;
}

.plusminus .input-group-btn {
  position: relative;
  font-size: 0;
  white-space: nowrap;
}

.plusminus .input-group .form-control {
  float: left;
  width: 100%;
  margin-bottom: 0;
}

.plusminus .input-group-addon, .plusminus .input-group-btn {
  width: 1%;
  white-space: nowrap;
  vertical-align: middle;
}

.plusminus .input-group-addon, .plusminus .input-group-btn, .plusminus .input-group .form-control {
  display: table-cell;
}

.plusminus .input-group-btn:first-child>.btn, .plusminus .input-group-btn:first-child>.btn-group {
  margin-right: -1px;
}

.plusminus .input-group-btn>.btn {
  position: relative;
}

.plusminus .input-group-btn:first-child>.btn, .plusminus .input-group-btn:first-child>.btn-group>.btn, .plusminus .input-group-btn:first-child>.dropdown-toggle, .plusminus .input-group-btn:last-child>.btn:not(:last-child):not(.dropdown-toggle), .plusminus .input-group-btn:last-child>.btn-group:not(:last-child)>.btn {
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
}

.plusminus .input-group .form-control:last-child, .plusminus .input-group-addon:last-child, .plusminus .input-group-btn:last-child>.btn, .plusminus .input-group-btn:last-child>.btn-group>.btn, .plusminus .input-group-btn:last-child>.dropdown-toggle, .plusminus .input-group-btn:first-child>.btn:not(:first-child), .plusminus .input-group-btn:first-child>.btn-group:not(:first-child)>.btn {
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
}

.plusminus .btn {
  display: inline-block;
  margin-bottom: 0;
  font-weight: 400;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  background-image: none;
  border: 1px solid transparent;
  white-space: nowrap;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.428571429;
  border-radius: 4px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}

.glyphicon {
  position: relative;
  top: 1px;
  display: inline-block;
  font-family: 'Glyphicons Halflings';
  font-style: normal;
  font-weight: 400;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.upload-error p:last-child{
  display:inherit;
}