/* update profile style  */

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

section{
    width: 100%;
    height: auto;
}

form{
    width: 100%;
    height: auto;
}

.form1{
    width: 100%;
    height: auto;
    background-color: #fff;
    border-radius: 10px;
    padding: 1.5rem;
}
.form1 .customer{
    width: 100%;
    height: auto;
    display: flex;
    margin-bottom: 1.5rem;
}
.form1 .customer label{
    width: 15rem;
    font-size: 15px;
    color: #000;
}
input::placeholder{
    font-size: 15px;
    color: #000;
}

form .file{
    width: 50%;
    height: auto;
    background-color: #fff;
    border-radius: 10px;
    padding: 1.5rem;
}
form .file img{
    width: 10rem;
    height: auto;
}

@media (max-width:768px) {
    .form1{
        width: 100%;
        height: auto;
    }
    .form1 .customer{
        width: 100%;
        height: auto;
        display: block;
    }
    .form1 .customer label{
        width: 100%;
    }
    form .file{
        width: 100%;
    }
}


/* change password  */


section{
    width: 100%;
    height: auto;
}

form{
    width: 100%;
    height: auto;
}


 label{
    width: 15rem;
    font-size: 15px;
    color: #000;
}
input::placeholder{
    font-size: 15px;
    color: #000;
}

@media (max-width:768px) {
    form{
        width: 100%;
        height: auto;
    }
    
     label{
        width: 100%;
    }
    
}


/* UPDATE KYC PAGE STYLE */

section{
    width: 100%;
    height: auto;
}

form{
    width: 100%;
    height: auto;
}

label{
    width: 15rem;
    font-size: 15px;
    color: #000;
}
span{
    font-size: 15px;
    color: #000;
}
input::placeholder{
    font-size: 15px;
    color: #000;
}

@media (max-width:768px) {
    form{
        width: 100%;
        height: auto;
    }
    
     label{
        width: 100%;
    }
    
}

/* UPDATE NOMINEE PAGE STYLE  */


section{
    width: 100%;
    height: auto;
}

form{
    width: 100%;
    height: auto;
}

.form1{
    width: 100%;
    height: auto;
    background-color: #fff;
    border-radius: 10px;
    padding: 1.5rem;
}
.form1 .customer{
    width: 100%;
    height: auto;
    display: flex;
    margin-bottom: 1.5rem;
}
.form1 .customer label{
    width: 15rem;
    font-size: 15px;
    color: #000;
}
input::placeholder{
    font-size: 15px;
    color: #000;
}



@media (max-width:768px) {
    .form1{
        width: 100%;
        height: auto;
    }
    .form1 .customer{
        width: 100%;
        height: auto;
        display: block;
    }
    .form1 .customer label{
        width: 100%;
    }
}

/* ID CARD PAGE STYLE  */


/* Default styles */
.section1 {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.section1 .card1 {
    width: 25rem;
    height: auto;
    background-color: #fff;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 15px;
    margin-bottom: 1rem;
}

.section1 .card1 img {
    width: 10rem;
    margin-bottom: 0;
}

.section1 .card1 h2 {
    font-size: 20px;
    color: #000;
    font-weight: bold;
    margin: -1rem 0 -1rem 0;
    padding: 0;
}

.section1 .card1 .card-content {
    width: 100%;
    height: auto;
}

.section1 .card1 .card-content #img {
    width: 9rem;
    height: 7rem;
    border: 4px solid skyblue;
    place-self: center;
    margin-top: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.section1 .card1 .card-content #img img {
    width: 8rem;
    height: 6rem;
}

.section1 .card1 .card-content p {
    color: #000;
    font-size: 15px;
    margin: 0;
    margin-top: 8px;
}

/* Print-specific styles */
@media print {
    body {
        margin: 0;
        padding: 0;
    }

    .section1 {
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        page-break-before: always; /* Ensures a new page is started for printing */
    }

    .section1 .card1 {
        width: 100%; /* Set to 100% to ensure it uses the full page width */
        height: auto;
        page-break-inside: avoid; /* Prevents breaking inside the card */
        margin: 0;
    }

    .section1 .card1 h2,
    .section1 .card1 .card-content p {
        font-size: 18px; /* Adjust font size for printing */
    }

    .section1 .card1 .card-content #img img {
        width: 100%; /* Scale the image to fit properly */
        height: auto;
    }

    .btn {
        display: none; /* Hide the print button during printing */
    }

    .card-content p {
        font-size: 14px; /* Ensure text is small enough to fit */
    }
}


/* certificate */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.certificate-section {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: start;
}

.certificate-section .card1 {
    width: 100%;
    height: auto;
    background-color: #fff;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 15px;
    margin-bottom: 5rem;
    padding: 0 2rem;
}

.certificate-section .card1 img {
    width: 13rem;
    margin-bottom: 0;
}

.certificate-section .card1 h1 {
    font-size: 40px;
    color: #000;
    font-weight: bold;
    margin: -1rem 0 -1rem 0;
    padding: 0;
    font-family: "Nunito Sans", serif;
    text-transform: capitalize;
}

.certificate-section .card1 .card-content {
    width: 100%;
    height: auto;
}

.certificate-section .card1 .card-content #img {
    width: 25rem;
    height: auto;
    border-bottom: 2px solid skyblue;
    place-self: center;
    margin-top: 1rem;
    text-align: center;
}

.certificate-section .card1 .card-content #img p {
    font-size: 11px;
    color: #000;
    margin-bottom: 10px;
}

.certificate-section .card1 .card-content #img h2 {
    font-size: 20px;
    font-weight: bold;
    color: #000;
}

.certificate-section .card1 .card-content p {
    color: rgb(43, 42, 42);
    font-size: 12px;
    margin: 0;
    margin-top: 8px;
}

.certificate-section .card1 .card-content h2 {
    color: #000;
    font-size: 19px;
    font-weight: bold;
    margin-top: 1.5rem;
}

.certificate-section .card1 .card-content .name {
    width: 20rem;
    margin: 1rem 0 0 0;
    text-align: left;
}

.certificate-section .card1 .card-content .sign {
    width: 17rem;
    height: 4rem;
    border-bottom: 2px solid skyblue;
    margin-top: 1rem;
    text-align: left;
}

.certificate-section .card1 .card-content .sign img {
    width: 11rem;
}

/* Print Styles */
@media print {
    body {
        margin: 0;
        padding: 0;
    }

    .certificate-section {
        width: 100%;
        height: auto;
        display: block;
        align-items: center;
        padding: 0;
        margin: 0;
        page-break-before: always; /* Start on a new page */
    }

    .certificate-section .card1 {
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 1rem;
        border: none; /* Remove border to avoid clipping */
        box-shadow: none;
    }

    .certificate-section .card1 img {
        width: 10rem; /* Scale the logo for printing */
    }

    .certificate-section .card1 h1 {
        font-size: 30px; /* Adjust font size for printing */
    }

    .certificate-section .card1 .card-content p,
    .certificate-section .card1 .card-content h2 {
        font-size: 14px; /* Adjust text size for print */
    }

    .certificate-section .card1 .card-content #img {
        width: 100%; /* Make image container take full width */
    }

    .certificate-section .card1 .card-content .sign {
        width: 100%; /* Make the signature container fit on the page */
        text-align: left;
    }

    .certificate-section .card1 .card-content .sign img {
        width: 8rem; /* Scale the signature image */
    }

    .btn {
        display: none; /* Hide print button during printing */
    }
}

@media (max-width: 768px) {
    .certificate-section .card1 .card-content .sign {
        width: 100%;
    }

    .certificate-section .card1 .card-content #img {
        width: 100%;
    }
}


/* buy product  */

.product-section {
    width: 100%;
    height: auto;
}

.product-section .box1 {
    width: 100%;
    height: auto;
    background-color: #fff;
    padding: 1rem 1.5rem;
    margin: 2rem 0 2rem 0;
    border-radius: 10px;
}

.product-section .box1 select {
    width: 22rem;
    margin-right: 1.5rem;
}

.product-section .box1 button {
    padding: 4px 8px;
    margin-left: 5px;
    border: 1px solid black;
    outline: none;
    background-color: #fff;
    border-radius: 5px;

}

.product-section .box1 button a {
    padding: 6px 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: rgb(2, 2, 82);
}

.product-section .box1 button a i {
    font-weight: bold;
    font-size: 18px;
}

.product-section .box2 {
    width: 100%;
    height: auto;
    padding: 1rem 1.5rem;
    background-color: #fff;
    border-radius: 10px;
}

.product-section .box2 #search {
    width: 35rem;
}

.product-section .box2 .search {
    margin: 0 0 0 1.5rem;
}

.product-section .box2 .search button {
    margin-right: 5px;
}

.product-section .card-container {
    width: 100%;
    height: auto;
}

.product-section .card-container .box {
    width: 100%;
    height: auto;
    margin: 3rem 0 0 0;
}

.product-section .card-container .box .card {
    width: 14rem;
    height: auto;
}

.product-section .card-container .box .card img {
    width: 100%;
    height: 10rem;
}

.product-section .card-container .box .card .card-title {
    font-size: 16px;
}

.product-section .card-container .box .card .card-title span {
    font-size: 15px;
}

.product-section .card-container .box .card .card-title p {
    font-size: 15px;
    margin: 0;
}

.product-section .card-container .box .card .card-body a {
    width: 100%;
    font-size: 15px;
}

@media (max-width:768px) {
    .product-section .box1 {
        text-align: center;
    }

    .product-section .box1 select {
        width: 100%;
        margin-bottom: 1rem;
    }

    .product-section .box2 {
        text-align: center;
    }

    .product-section .box2 #search {
        width: 100%;
        margin-bottom: 1rem;
    }

    .product-section .card-container {
        width: 100%;
        height: auto;
        padding: 0 5rem;
    }

    .product-section .card-container .box .card {
        width: 100%;
        height: auto;
        margin-bottom: 1rem;
    }

}

@media (max-width:530px) {
    .product-section .card-container {
        width: 100%;
        height: auto;
        padding: 0 1rem;
    }

    .product-section .card-container .box .card {
        width: 100%;
        height: auto;
    }
}
 

/* MY CART  */

.cartsection {
    width: 100%;
    height: auto;
}

.cartsection .box1 {
    width: 100%;
    height: 6rem;
    background-color: #fff;
    padding: 1rem 1.5rem;
    margin: 2rem 0 2rem 0;
    border-radius: 10px;
}

.cartsection .box2 {
    width: 100%;
    height: auto;
    background-color: #fff;
    padding: 1rem 1.5rem;
    margin: 2rem 0 2rem 0;
    border-radius: 10px;
}
.cartsection .box2 h2{
    font-size: 22px;
    margin: 1rem 0;
    color: #000;
    font-weight: bold;
}
.cartsection .table{
    width: 100%;
    height: 11rem;
    font-size: 15px;
}



.cartsection form{
    width: 50%;
    height: auto;
    padding: 0 0 0 1.5rem ;
}
.cartsection form h3{
    font-size: 19px;
    color: #000;
    font-weight: bold;
}
.cartsection form label{
    font-size: 14px;
    color: #000;
    margin-bottom: 5px;
}
.cartsection form .customer{
    width: 13.5rem;
}
.cartsection form  select{
    margin-bottom: 1rem;
}
.cartsection form  input{
    margin-bottom: 1rem;
}
.cartsection form .checkout{
    width: 100%;
    height: auto;
    display: block;
    margin-top: 1rem;
}

.cartsection table th{
    width: auto;
    height: 3rem;
    background-color: #012970;
    color: #fff;
    font-size: 14px;
    font-weight: normal;
    text-align: center;
    margin: 0 1rem;
    padding: 0 1.2rem;
}

@media (max-width:768px) {
    .cartsection table{
        width: 100%;
    }
    .cartsection .table{
        width: 100%;
    }
    .cartsection form{
        width: 100%;
        height: auto;
        padding: 0;
    }
    .cartsection form .customer{
        width: 100%;
    }
} 


/* my order  */


.order-section {
    width: 100%;
    height: auto;
}
.order-section .box2{
    padding-top: 1rem;
}
.order-section .cart{
    width: 100%;
    height: auto;
    padding: 0 2rem;
    margin-top: 1rem;
}
.order-section .cart .box{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    background-color: #fff;
    padding: 1rem 0;
    
}
.order-section .cart .box .box1{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: space-around;
    font-size: 14px;
}
.order-section .cart .box .box1 p{
    margin: 0;
    color: #000;
}
.order-section .cart .box .box1 button{
    font-size: 14px;
    color: #fff;
}

.order-section .cart .div{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 1rem 5rem 1rem 3rem;
    margin-top: 2rem;
    font-size: 14px;
    color: #000;
}
.order-section .cart .div button{
    font-size: 14px;
}
.order-section h2{
    color: #000;
    font-size: 25px;
    font-weight: bold;
    margin: 1rem;
}

@media (max-width:768px) {
    .order-section .cart{
        width: 100%;
        height: auto;
    }
    .order-section .cart .box{
        width: 100%;
        height: auto;
        display: block;
    }
    .order-section .cart .div{
        display: block;
    }
    .order-section .cart .div .div1{
        margin-bottom: 2.5rem;
    }
    .order-section .cart .box .box1{
        width: 100%;
        height: auto;
        display: flex;
        justify-content: space-between;
        padding: 0 3rem;
    }
}


@media (max-width:576px) {
    .order-section .cart .box .box1{
        padding: 0 1rem;
    }
    .order-section .cart .div{
        padding-left: 1rem;
    }
}


/* LEFT DIRECT */

.left-section {
    width: 100%;
    height: auto;
}

.left-section .head{
    width: 100%;
    height: auto;
    padding: 1rem 0;
}
.left-section .head h1{
    color: #000;
    font-size: 22px;
}
.left-section #search{
    width: 20rem;
    margin: 0 0 2rem 0;
}
.left-section table{
    width: 100%;
    height: auto;
}
.left-section table thead th{
    height: 3.5rem;
    line-height: 40px;
   font-size: 15px;
   font-weight: normal;
   color: #fff;
   background-color: #012970;
}
.left-section table tbody td{
    height: 3.5rem;
    line-height: 40px;
    font-size: 15px;
    font-weight: normal;
 }
 .left-section .num{
    width: 20rem;
    height: 3rem;
    background-color: #fff;
    border-bottom: 1px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
 }
 .left-section .num button{
    border: none;
    outline: none;
    width: 100%;
    background: none;
 }


 /* RIGHT DIRECT  */


 .right-section {
    width: 100%;
    height: auto;
    margin-bottom: 10rem;
}

.right-section .head{
    width: 100%;
    height: auto;
    padding: 1rem 0;
}
.right-section .head h1{
    color: #000;
    font-size: 22px;
}
.right-section #search{
    width: 20rem;
    margin: 0 0 2rem 0;
}
.right-section table{
    width: 100%;
    height: auto;
}
.right-section table thead th{
    height: 3.5rem;
    line-height: 40px;
   font-size: 15px;
   font-weight: normal;
   color: #fff;
   background-color: #012970;
}
.right-section table tbody td{
    height: 3.5rem;
    line-height: 40px;
    font-size: 15px;
    font-weight: normal;
 }
 .right-section .num{
    width: 20rem;
    height: 3rem;
    background-color: #fff;
    border-bottom: 1px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
 }
 .right-section .num button{
    border: none;
    outline: none;
    width: 100%;
    background: none;
 }


 /* team  */

 .team-section{
    width: 100%;
    height: auto;
    margin-top: 2.5rem;
    border: none;
}
.team-section form{
    width: 100%;
    height: auto;
    
}
.team-section form .heading{
    width: 100%;
    height: 3.5rem;
    background-color: #012970;
    color: #fff;
    display: flex;
    align-items: center;
    margin-top: 2rem;
}
.team-section form .heading h4{
    font-size: 18px;
    padding: 0 0 0 1.5rem;
}
.team-section form  .form1{
    width: 100%;
    height: auto;
    padding: 1.5rem 2.5rem 1.5rem 1.5rem;
}


.team-section .box1{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: start;
    align-items: end;
    padding: 0 1.5rem;
}
.team-section .box1 input{
    width: 100%;
    height: 2.5rem;
    font-size: 14px;
}
.team-section .box1 select{
    width: 100%;
    height: 2.5rem;
    font-size: 14px;
}
.team-section .box{
    width: 15rem;
    margin-right: 1rem;
}
.team-section button{
    width: auto;
    height: 2.5rem;
}


.team-section table{
    width: 100%; 
    height: auto;
    overflow: scroll;
}
.team-section .table{
    overflow-y: hidden;

}
.team-section table th{
    width: auto;
    height: 3rem;
    background-color: #012970;
    color: #fff;
    font-size: 14px;
    font-weight: normal;
    text-align: center;
    margin: 0 1rem;
    padding: 0 1.2rem;
}
.team-section table td{
    width: auto;
    height: 3.5rem;
    font-size: 14px;
    font-weight: normal;
    text-align: center;
    margin: 0 1rem;
    padding: 0 1.2rem;
}
.team-section table td img{
    width: 8rem;
    margin: 1rem 0;
    height: auto;
}
.team-section .available{
    width: 100%; 
    height: 2.5rem; 
    border-bottom: 1px solid black;
}
.team-section .entry{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.team-section .div{
    padding: 0 1rem;
    margin: 10px 0;
}
.team-section .entries{
    width: 19rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    border-radius: 5px;
    background-color: rgb(233, 230, 230);
    font-size: 15px;
    border: none;
    outline: none;
}
.team-section .entries button{
  margin: 0 10px;
  border: none;
  background: none;
}
.team-section #search{
    width: 12rem;
}
@media (max-width:768px) {
  
    .team-section .entries{
      margin-bottom: 1rem;
    }
    .team-section .entry{
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-top: 1rem;
    }
    .team-section .box1{
        width: 100%;
        height: auto;
        display: block;
    }
    .team-section .box1 .box{
        width: 100%;
    }
    .team-section .btn-div{
        margin-top: 1rem;
    }
}

@media (max-width:475px) {
    .team-section .available{
        border: none;
    }
}
@media (max-width:415px) {
    .team-section .entries{
    width: 100%;
    height: 6rem;
    display: flex;
    flex-direction: column;
    align-items:start;
    justify-content: flex-start;
  }
}


/* activation request */

.activate-section{
    width: 100%;
    height: auto;
    margin-top: 2.5rem;
    border: none;
}
.activate-section form{
    width: 100%;
    height: auto;
    
}
.activate-section form .heading{
    width: 100%;
    height: 3.5rem;
    color: #000;
    display: flex;
    align-items: center;
    margin-top: 2rem;
}
.activate-section form .heading h4{
    font-size: 20px;
    padding: 0 0 0 1.5rem;
    margin: 1rem 0 0 0;
}
.activate-section form  .form1{
    width: 100%;
    height: auto;
    padding: 1.5rem 2.5rem 1.5rem 1.5rem;
}


.activate-section .card{
    width: 20rem;
    height: auto;
    margin-left: 1.5rem;
}
.activate-section #head{
    width: 100%;
    height: 3rem;
    background-color: #012970;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    
}
.activate-section #head h4{
    font-size: 19px;
    line-height: 40px;
}

.activate-section .content{
    width: 100%;
    height: auto;
    padding: 2rem 1.5rem;
}

.activate-section .content .company{
    width: 100%;
    margin-bottom: 1rem;
    font-size: 15px;
}
.activate-section .content img{
    width: 100%;
    height:auto;
}

.activate-section .box1{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: start;
    align-items: end;
    padding: 0 1.5rem;
}
.activate-section .box1 input{
    width: 100%;
    height: 2.5rem;
    font-size: 14px;
}
.activate-section .box1 select{
    width: 100%;
    height: 2.5rem;
    font-size: 14px;
}
.activate-section .box{
    width: 15rem;
    margin-right: 1rem;
}
.activate-section button{
    width: auto;
    height: 2.5rem;
}


.activate-section table{
    width: 100%; 
    height: auto;
    overflow: scroll;
}
.activate-section .table{
    overflow-y: hidden;

}
.activate-section table th{
    width: auto;
    height: 3rem;
    background-color: #012970;
    color: #fff;
    font-size: 14px;
    font-weight: normal;
    text-align: center;
    margin: 0 1rem;
    padding: 0 1.2rem;
}
.activate-section table td{
    width: auto;
    height: 3.5rem;
    font-size: 14px;
    font-weight: normal;
    text-align: center;
    margin: 0 1rem;
    padding: 0 1.2rem;
}
.activate-section table td img{
    width: 8rem;
    margin: 1rem 0;
    height: auto;
}
.activate-section .available{
    width: 100%; 
    height: 2.5rem; 
    border-bottom: 1px solid black;
}
.activate-section .entry{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.activate-section .div{
    padding: 0 1rem;
    margin: 10px 0;
}
.activate-section .entries{
    width: 19rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    border-radius: 5px;
    background-color: rgb(233, 230, 230);

    font-size: 15px;
    border: none;
    outline: none;
}
.activate-section .entries button{
  margin: 0 10px;
  border: none;
  background: none;
}
.activate-section #search{
    width: 12rem;
}
@media (max-width:768px) {
  
    .activate-section .entries{
      margin-bottom: 1rem;
    }
    .activate-section .entry{
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-top: 1rem;
    }
    .activate-section .box1{
        width: 100%;
        height: auto;
        display: block;
    }
    .activate-section .box1 .box{
        width: 100%;
    }
    .activate-section .btn-div{
        margin-top: 1rem;
    }
}

@media (max-width:576px) {
    .activate-section{
        padding: 0 1rem;
    }
    .activate-section .card{
        width: 100%;
        margin-left: 0;
    }
}

@media (max-width:475px) {
    .activate-section .available{
        border: none;
    }
}


@media (max-width:415px) {
    .activate-section .entries{
    width: 100%;
    height: 6rem;
    display: flex;
    flex-direction: column;
    align-items:start;
    justify-content: flex-start;
  }
}


/* INCOME PAGE STYLE  */

.income-section{
    width: 100%;
    height: auto;
    margin-top: 2.5rem;
    border: none;
}
.income-section form{
    width: 100%;
    height: auto;
    
}
.income-section form .heading{
    width: 100%;
    height: 3.5rem;
    background-color: #012970;
    color: #fff;
    display: flex;
    align-items: center;
    margin-top: 2rem;
}
.income-section form .heading h4{
    font-size: 18px;
    padding: 0 0 0 1.5rem;
}
.income-section form  .form1{
    width: 100%;
    height: auto;
    padding: 1.5rem 2.5rem 1.5rem 1.5rem;
}


.income-section .box1{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: start;
    align-items: end;
    padding: 0 1.5rem;
}
.income-section .box1 input{
    width: 100%;
    height: 2.5rem;
    font-size: 14px;
}
.income-section .box1 select{
    width: 100%;
    height: 2.5rem;
    font-size: 14px;
}
.income-section .box{
    width: 15rem;
    margin-right: 1rem;
}
.income-section button{
    width: auto;
    height: 2.5rem;
}


.income-section table{
    width: 100%; 
    height: auto;
    overflow: scroll;
}
.income-section .table{
    overflow-y: hidden;

}
.income-section table th{
    width: auto;
    height: 3rem;
    background-color: #012970;
    color: #fff;
    font-size: 14px;
    font-weight: normal;
    text-align: center;
    margin: 0 1rem;
    padding: 0 1.2rem;
}
.income-section table td{
    width: auto;
    height: 3.5rem;
    font-size: 14px;
    font-weight: normal;
    text-align: center;
    margin: 0 1rem;
    padding: 0 1.2rem;
}
.income-section table td img{
    width: 8rem;
    margin: 1rem 0;
    height: auto;
}
.income-section .available{
    width: 100%; 
    height: 2.5rem; 
    border-bottom: 1px solid black;
}
.income-section .entry{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}
.income-section .div{
    padding: 0 1rem;
    margin: 10px 0;
}

.income-section #search{
    width: 12rem;
}
@media (max-width:768px) {
  
    
    .income-section .entry{
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-top: 1rem;
    }
    .income-section .box1{
        width: 100%;
        height: auto;
        display: block;
    }
    .income-section .box1 .box{
        width: 100%;
    }
    .income-section .btn-div{
        margin-top: 1rem;
    }
}

@media (max-width:475px) {
    .income-section .available{
        border: none;
    }
}



/* CUMMULATIVE TDS & INDIVIDUAL TDS STYLE  */

.customer-tds-section{
    width: 100%;
    height: auto;
    margin-top: 2.5rem;
    border: none;
}
.customer-tds-section form{
    width: 100%;
    height: auto;
    
}
.customer-tds-section form .heading{
    width: 100%;
    height: 3.5rem;
    background-color: #012970;
    color: #fff;
    display: flex;
    align-items: center;
    margin-top: 2rem;
}
.customer-tds-section form .heading h4{
    font-size: 18px;
    padding: 0 0 0 1.5rem;
}
.customer-tds-section form  .form1{
    width: 100%;
    height: auto;
    padding: 1.5rem 2.5rem 1.5rem 1.5rem;
}


.customer-tds-section .box1{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: start;
    align-items: end;
    padding: 0 1.5rem;
}
.customer-tds-section .box1 input{
    width: 100%;
    height: 2.5rem;
    font-size: 14px;
}
.customer-tds-section .box1 select{
    width: 100%;
    height: 2.5rem;
    font-size: 14px;
}
.customer-tds-section .box{
    width: 15rem;
    margin-right: 1rem;
}
.customer-tds-section button{
    width: auto;
    height: 2.5rem;
}


.customer-tds-section table{
    width: 100%; 
    height: auto;
    overflow: scroll;
}
.customer-tds-section .table{
    overflow-y: hidden;

}
.customer-tds-section table th{
    width: auto;
    height: 3rem;
    background-color: #012970;
    color: #fff;
    font-size: 14px;
    font-weight: normal;
    text-align: center;
    margin: 0 1rem;
    padding: 0 1.2rem;
}
.customer-tds-section table td{
    width: auto;
    height: 3.5rem;
    font-size: 14px;
    font-weight: normal;
    text-align: center;
    margin: 0 1rem;
    padding: 0 1.2rem;
}
.customer-tds-section table td img{
    width: 8rem;
    margin: 1rem 0;
    height: auto;
}
.customer-tds-section .available{
    width: 100%; 
    height: 2.5rem; 
    border-bottom: 1px solid black;
}
.customer-tds-section .entry{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.customer-tds-section .entries{
    width: 5.3rem;
    height: auto;
    background-color: rgb(146, 145, 145);
    padding: 0 5px;
    border-radius: 5px;
    display: flex;
    justify-content: space-between;
}
.customer-tds-section .entries button{
    width: auto;
    border: none;
    background: none;
}
.customer-tds-section .div{
    padding: 0 1rem;
    margin: 10px 0;
}

.customer-tds-section #search{
    width: 12rem;
}
@media (max-width:768px) {
  
    .customer-tds-section .entries{
        margin: 1rem 0;
    }
    .customer-tds-section .entry{
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-top: 1rem;
    }
    .customer-tds-section .box1{
        width: 100%;
        height: auto;
        display: block;
    }
    .customer-tds-section .box1 .box{
        width: 100%;
    }
    .customer-tds-section .btn-div{
        margin-top: 1rem;
    }
}

@media (max-width:475px) {
    .customer-tds-section .available{
        border: none;
    }
}


/* REWARD ARCHIEVER  */


.reward_archiever{
    width: 100%;
    height: auto;
   
}
.reward_archiever h4{
    color: #000;
    margin: 1.5rem 0;
    font-size: 18px;
    display: flex;   
    align-items: center;
}

/* downline bv report  */

.downline{
    width: 100%;
    height: auto;
    margin-top: 2.5rem;
    border: none;
}

.downline button{
    width: auto;
    height: 2.5rem;
}


.downline table{
    width: 100%; 
    height: auto;
    overflow: scroll;
}
.downline .table{
    overflow-y: hidden;

}
.downline table th{
    width: auto;
    height: 3rem;
    background-color: #012970;
    color: #fff;
    font-size: 14px;
    font-weight: normal;
    text-align: center;
    margin: 0 1rem;
    padding: 0 1.2rem;
}
.downline table td{
    width: auto;
    height: 3.5rem;
    font-size: 14px;
    font-weight: normal;
    text-align: center;
    margin: 0 1rem;
    padding: 0 1.2rem;
}
.downline table td img{
    width: 8rem;
    margin: 1rem 0;
    height: auto;
}
.downline .available{
    width: 100%; 
    height: 2.5rem; 
    border-bottom: 1px solid black;
}
.downline .entry{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.downline .entries{
    width: 5.3rem;
    height: auto;
    background-color: rgb(146, 145, 145);
    padding: 0 5px;
    border-radius: 5px;
    display: flex;
    justify-content: space-between;
}
.downline .entries button{
    width: auto;
    border: none;
    background: none;
}
.downline .div{
    padding: 0 1rem;
    margin: 10px 0;
}

.downline #search{
    width: 12rem;
}
@media (max-width:768px) {
  
    .downline .entries{
        margin: 1rem 0;
    }
    .downline .entry{
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-top: 1rem;
    }
    .downline .box1{
        width: 100%;
        height: auto;
        display: block;
    }
    .downline .box1 .box{
        width: 100%;
    }
    .downline .btn-div{
        margin-top: 1rem;
    }
}

@media (max-width:475px) {
    .downline .available{
        border: none;
    }
}


/* PAYOUT REQUEST  */

.payout-request-section{
    width: 100%;
    height: auto;
    margin-top: 2.5rem;
    border: none;
}

.reward h4{
    color: #000;
    margin: 1.5rem 0;
    font-size: 18px;
    display: flex;   
    align-items: center;
}
.payout-request-section .box1{
    width: 100%;
    height: auto;
    
    padding: 2rem 1.5rem;
}
.payout-request-section .box1 input{
    width: 25rem;
    height: 2.5rem;
    font-size: 14px;
}

.payout-request-section .box{
    width: 15rem;
    margin-right: 1rem;
}
.payout-request-section button{
    width: auto;
    height: 2.5rem;
}

@media (max-width:768px) {
  
    .payout-request-section .box1{
        width: 100%;
        height: auto;
        display: block;
    }
    .payout-request-section .box1 .box{
        width: 100%;
    }
    .payout-request-section .box1 input{
        width: 100%;
    }
    .payout-request-section .btn-div{
        margin-top: 1rem;
    }
}


/* PAYOUT LIST  */

.payout-list-section form{
    width: 100%;
    height: auto;
    
}
.payout-list-section form .heading{
    width: 100%;
    height: 3.5rem;
    background-color: #012970;
    color: #fff;
    display: flex;
    align-items: center;
    margin-top: 2rem;
}
.payout-list-section form .heading h4{
    font-size: 18px;
    padding: 0 0 0 1.5rem;
}
.payout-list-section{
    width: 100%;
    height: auto;
    margin-top: 2.5rem;
    border: none;
}

.payout-list-section button{
    width: auto;
    height: 2.5rem;
}


.payout-list-section table{
    width: 100%; 
    height: auto;
    overflow: scroll;
}
.payout-list-section .table{
    overflow-y: hidden;

}
.payout-list-section table th{
    width: auto;
    height: 3rem;
    background-color: #012970;
    color: #fff;
    font-size: 14px;
    font-weight: normal;
    text-align: center;
    margin: 0 1rem;
    padding: 0 1.2rem;
}
.payout-list-section table td{
    width: auto;
    height: 3.5rem;
    font-size: 14px;
    font-weight: normal;
    text-align: center;
    margin: 0 1rem;
    padding: 0 1.2rem;
}

.payout-list-section .entries{
    width: auto;
    height: auto;
    padding: 0 5px;
    border-radius: 5px;
    display: flex;
    justify-content: space-between;
}
.payout-list-section .entries button{
    width: auto;
    margin-right: 10px;
}
.payout-list-section .div{
    padding: 0 1rem;
    margin: 10px 0;
}


@media (max-width:768px) {
  
    .payout-list-section .entries{
        margin: 1rem 0;
    }
    
    .payout-list-section .btn-div{
        margin-top: 1rem;
    }
}


/* VIEW GALLERY  */

.view-gallery-section{
    width: 100%;
    height: auto;
    padding: 2rem;
}

.view-gallery-section select{
    width: 24rem;
    margin-bottom: 1.5rem;
}


.view-gallery-section .photo{
    width: 8rem; 
    border: 1px solid black;
    text-align: center;
    border-radius: 10px;
    margin-bottom: 1.5rem;
}
.view-gallery-section .portfolio-links{
    height: 200px;
    width: 220px;
    overflow: hidden;
    position: relative;
    display: inline-block;
    
}
.view-gallery-section .portfolio-links .overlay{
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    z-index: 4000;
    transition: top 0.5s ease-in-out;
}

.view-gallery-section .portfolio-links:hover .overlay{
    top: 0;
}
.view-gallery-section .portfolio-links img{
    width: 100%;
    height: 100%;
    transition: .4s ease;
}
.view-gallery-section .portfolio-links img:hover{
    scale: 1.2;
}

@media (max-width:576px) {
    .view-gallery-section select{
        width: 100%;
    }
    .view-gallery-section .portfolio-links{
        height: auto;
        width: 100%;
        margin-bottom: 1rem;
    }
}


/* POST QUEERY */

.post-query-section{
    width: 100%;
    height: auto;
    padding: 2rem;
}

.post-query-section h2{
    font-size: 25px;
    color: #000;
}

.post-query-section p{
    font-size: 17px;
    color: #000;
}

.post-query-section .box1{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.post-query-section .box1 .div{
    width: 50%;
    height: auto;
}
.post-query-section .box1 .div2{
    width: 50%;
    height: auto;
}
.post-query-section .box1 .div input{
    width: 94%;
    font-size: 15px;
}
.post-query-section .box1 .div2 input{
    width: 94%;
    font-size: 15px;
}
.post-query-section .box1 .div select{
    width: 94%;
    font-size: 15px;
}

.post-query-section .box1 .div textarea{
    width: 94%;
    font-size: 15px;
    margin-bottom: 1rem;
}

@media (max-width:576px) {
    .post-query-section{
        width: 100%;
        height: auto;
        padding: 1rem;
    }
    .post-query-section .box1{
        width: 100%;
        height: auto;
        display: block;
        margin-bottom: 1rem;
    }
    .post-query-section .box1 .div{
        width: 100%;
        height: auto;
    }
    .post-query-section .box1 .div2{
        width: 100%;
        height: auto;
    }
    .post-query-section .box1 .div2 input{
        width: 100%;
    }
    .post-query-section .box1 .div input{
        width: 100%;
    }
    .post-query-section .box1 .div select{
        width: 100%;
    }
    
    .post-query-section .box1 .div textarea{
        width: 100%;
    }
}


/* INVOICE  */


.invoice{
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

}
.invoice .button{
    width: 100%;
    margin: 2rem 0;
    padding: 0 6rem;
    display: flex;
    justify-content: right;
}
.invoice .container{
    border: 2px solid #012970;
    padding: 2rem;
}
.invoice .container .invoice-card{
    width: 100%;
    height: auto;
}
.invoice .container .invoice-card .head{
    width: 100%;
    height: auto;
}
.invoice .container .invoice-card h1{
    text-align: center;
    margin: 0;
}
.invoice .container .invoice-card .head img{
    width: 9rem;
}
.invoice .container .invoice-card .content{
    width: 100%;
    height: auto;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}
.invoice .container .invoice-card .content .from{
    width: 100%;
    height: auto;
}
.invoice .container .invoice-card .content .from h4{
    font-size: 16px;
}
.invoice .container .invoice-card .content .from p{
    color: rgb(65, 64, 64);
    margin: 0;
}
.invoice .container table{
    width: 100%;
}

.invoice .container .total{
    width: 18rem;
    height: auto;
    float: right;
    margin-top: 1rem;
}
.invoice .container .total p{
    margin: 0;
}
.invoice .container .term{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 4rem;
}

.invoice .container .term .sign img{
    width: 9rem;
    margin-top: 1rem;
}


@media print {
    
    body, .invoice {
        margin: 0;
        padding: 0;
    }

   
    .invoice {
        width: 100%;
        height: auto;
        display: block;
    }

    .invoice .container {
        border: none; 
        padding: 10mm;
    }

    
    .invoice .button {
        display: none; 
    }

 
    .invoice .container .invoice-card h1 {
        font-size: 24px; 
        text-align: center;
    }

    
    .invoice .container .invoice-card .content .from {
        font-size: 12px;
        margin-bottom: 10px;
    }

    .invoice .container .invoice-card .content .from h4 {
        font-size: 14px;
    }

    .invoice .container .invoice-card .content .from p {
        margin: 0;
        color: rgb(65, 64, 64);
        font-size: 12px; 
    }

    .invoice .container table {
        width: 100%;
        font-size: 10px;
        border-collapse: collapse;
    }

    
    .invoice .container table th, .invoice .container table td {
        padding: 4px;
        border: 1px solid #ddd;
        text-align: center;
    }

 
    .invoice .container .total {
        width: auto;
        margin-top: 1rem;
        text-align: right;
    }

    .invoice .container .term {
        margin-top: 20px;
    }

   

   
    @page {
        size: A4;
        margin: 10mm;
    }

    
    .invoice .container .invoice-card {
        page-break-inside: avoid;
    }

   
    .invoice .container .invoice-card .content {
        page-break-inside: avoid;
    }

    
    .invoice .container p {
        text-align: center;
        font-size: 10px;
    }
}



/* TREE VIEW  */

/* <style>
   *{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
   }
   
   .box1{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: start;
    align-items:center;
    padding: 0 1.5rem;
    margin-bottom: 3rem;
   }
   .box1 input{
       width: 18rem;
       height: 3.5rem;
       margin-right: 1rem;
       font-size: 15px;
       color: #000;
   }
   .box input{
       width: 100%;
   }
   button{
    width: 8rem;
    height: 2.5rem;
   }
   
   .btn-div{
    width: 22rem;
    display: flex;
    justify-content: start;
    align-items: center;
   }
   
   .div{
    padding: 0 1rem;
    margin: 10px 0;
   }
   section table{
       width: 100%; 
       height: auto;
       
       overflow: scroll;
       margin: 1rem 0 1rem 0;
      }
      section .table{
       overflow-y: hidden;
       background-color: #fff;
      
      }
      section .table .div1{
       width: 100%;
       height: auto;
      
       place-items: center;
      }
      section .table .div1 .div1-img{
       width: 30rem;
       height: auto;
       
       text-align: center;
       border: none;
       border-bottom: 1px solid black;
       display: flex;
       flex-direction: column;
       justify-content: center;
       align-items: center;
      }
      section .table  img{
       width: 3rem;
      
       height: 3rem;
      }
      section .table .line{
       width: 1.2rem;
       height: 3rem;
      }
      section .table .div1 .arrow{
       width: 32rem;
       height: auto;
       display: flex;
       font-size: 22px;
       justify-content: space-between;
      }
   
   
   
   
      section .table .div2{
       width: 100%;
       height: auto;
       display: flex;
       justify-content: space-around;
       align-items: center;
       place-items: center;
      }
      section .table .div2 .div2-img{
       width: 12rem;
       height: auto;
       text-align: center;
       border: none;
       border-bottom: 1px solid black;
       display: flex;
       flex-direction: column;
       justify-content: center;
       align-items: center;
       
      } 
      section .table .div2 .divv-img{
       width: 12rem;
       height: auto;
       text-align: center;
       border: none;
       border-bottom: 1px solid black;
       display: flex;
       flex-direction: column;
       justify-content: center;
       align-items: center;
      }
      section .table .div2 .arrow2{
       width: 14rem;
       height: auto;
       display: flex;
       font-size: 22px;
       justify-content: space-between;
      }
      section .table .div2 .div2-img .line1{
       margin-top: 1rem;
       width: 3px;
       height: 2rem;
      }
      section .table .div2 .divv-img .line1{
       margin-top: 1rem;
       width: 3px;
       height: 2rem;
        border: none;
        border-bottom: 1px solid black;
        display: flex;
        flex-direction: column;
        align-items: center;
       } 
       section .table .div3 .arrow3{
        width: 10rem;
        height: auto;
        display: flex;
        font-size: 22px;
        justify-content: space-between;
       }
       section .table .div3 .div3-img .line1{
        margin-top: 1rem;
        width: 3px;
        height: 2rem;
       }

       section .table .div4{
        width: 100%;
        height: auto;
        display: flex;
        justify-content: space-around;
        align-items: center;
        place-items: center;
       }
       section .table .div4 .div2-img {
        width: 6rem;
       }
      
   @media (max-width:900px) {
       .box1{
           width: 100%;
           height: auto;
          }
          .box1 input{
           width: 11rem;
           height: 3.5rem;
           font-size: 14px;
           margin-right: 1rem;
          }
   }
   @media (max-width:786px) {
    section table{
       width: 100%; 
       height: auto;
       
       overflow: scroll;
       margin: 1rem 0 1rem 0;
      }
      section .table{
       overflow-y: hidden;
       background-color: #fff;
      
      }
    .box1{
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
    }
    .box1 input{
        margin: 0 0 1rem 0;
    }
    .btn-div{
        width: 100%;
        height: auto;
    }
    
    .box1 input{
       width: 100%;
    }
    section .table .div1 .div2-img{
        width: 25rem;
        margin-right: 2rem;
    }
    section .table .div1 .div2-img{
        width: 25rem;
        margin-right: 2rem;
    }
    section .table .div2 {
        display: flex;
        justify-content: start;
        
    }
    section .table .div2 .divv-img img{
        margin-right: 9rem;

    }
    section .table .div2 .div2-img img{
        margin-left: 9rem;

    }
    section .table .div2 .div2-img{
       width: 12rem;
       height: auto;
       border: none;
       border-bottom: 1px solid black;
       display: flex;
       flex-direction: column;
       align-items: center;
       
      }
    
   } 


   
</style>  */

/* TREE VIEW  */

.tree .box1 {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: start;
    align-items: center;
    padding: 0 1.5rem;
    margin-bottom: 3rem;
}

.tree .box1 input {
    width: 18rem;
    height: 3.5rem;
    margin-right: 1rem;
    font-size: 15px;
    color: #000;
}

.tree .box input {
    width: 100%;
}

.tree button {
    width: 8rem;
    height: 2.5rem;
}

.tree .btn-div {
    width: 22rem;
    display: flex;
    justify-content: start;
    align-items: center;
}

.tree .div {
    padding: 0 1rem;
    margin: 10px 0;
}

.tree table {
    width: 100%;
    height: auto;

    overflow: scroll;
    margin: 1rem 0 1rem 0;
}

.tree .table {
    overflow-y: hidden;
    background-color: #fff;

}

.tree .table .div1 {
    width: 100%;
    height: auto;
    margin-left: 16rem;
}

.tree .table .div1 .div1-img {
    width: 41rem;
    height: auto;

    text-align: center;
    border: none;
    border-bottom: 1px solid black;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.tree .table img {
    width: 3rem;

    height: 3rem;
}

.tree .table .line {
    width: 1.2rem;
    height: 3rem;
}

.tree .table .div1 .arrow {
    width: 34rem;
    height: auto;
    display: flex;
    font-size: 22px;
}

.tree .table .div2 {
    width: 100%;
    height: auto;
    display: flex;
}

.tree .table .div2 .div2-img {
    width: 20rem;
    height: auto;
    text-align: center;
    border: none;
    margin-left: 12.5rem;
    border-bottom: 1px solid black;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

}

.tree .table .div2 .divv-img {
    width: 20rem;
    height: auto;
    text-align: center;
    border: none;
    margin: 0 8rem 0 7rem;
    border-bottom: 1px solid black;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.tree .table .div2 .arrow2 {
    width: 22rem;
    height: auto;
    display: flex;
    font-size: 22px;
}

.tree .table .div2 .div2-img .line1 {
    margin-top: 1rem;
    width: 3px;
    height: 2rem;
}

.tree .table .div2 .divv-img .line1 {
    margin-top: 1rem;
    width: 3px;
    height: 2rem;
}

.tree .table .div3 {
    width: 100%;
    height: auto;
    display: flex;
}

.tree .table .div3 .div3-img {
    width: 12.6rem;
    height: auto;
    border: none;
    border-bottom: 1px solid black;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.tree .table .div3 .arrow3 {
    width: 12.6rem;
    height: auto;
    display: flex;
    font-size: 22px;
    justify-content: space-between;
}

.tree .table .div3 .div3-img .line1 {
    margin-top: 1rem;
    width: 3px;
    height: 2rem;
}

.tree .table .div4 {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: space-around;
    align-items: center;
    place-items: center;
}

.tree .table .div4 .div2-img {
    width: 6rem;
}

.tree .table .div2 .arrow2 .div2arrow {
    margin-left: 18.5rem;
}

.tree .table .div2 .arrow2 .div2arrow2 {
    margin-left: 6.5rem;
}

@media (max-width:900px) {
    .tree .box1 {
        width: 100%;
        height: auto;
    }

    .tree .box1 input {
        width: 11rem;
        height: 3.5rem;
        font-size: 14px;
        margin-right: 1rem;
    }
}

@media (max-width:786px) {
    .tree table {
        width: 100%;
        height: auto;

        overflow: scroll;
        margin: 1rem 0 1rem 0;
    }

    .tree .table {
        overflow-y: hidden;
        background-color: #fff;

    }

    .tree .box1 {
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
    }

    .tree .box1 input {
        margin: 0 0 1rem 0;
    }

    .tree .btn-div {
        width: 100%;
        height: auto;
    }

    .tree .box1 input {
        width: 100%;
    }
}

@media (max-width:500px) {
    .tree .table .div2 .divv-img {
        width: 25rem;
        margin-right: 2rem;
        margin-left: 25rem;
    }

    .tree .table .div2 .div2-img {
        margin-left: 55rem;
    }

    .tree .table .div2 .arrow2 .div2arrow {
        margin-left: 20rem;
    }

    .tree .table .div2 .arrow2 .div2arrow2 {
        margin-left: 14rem;
    }
}





























/* Default styles for light mode */
body {
    background-color: #fff;
    color: #000;
  }
  
  .header {
    background-color: #f8f9fa;
    color: #000;
  }
  
  .sidebar {
    background-color: #ffffff;
    color: #000;
  }
  
  .nav-link {
    color: #000;
  }
  
  /* Dark Mode Styles */
  body.dark-mode {
    background-color: #000000;
    color: #fff;
  }
  body.dark-mode h1{
    color: #fff;
  }
  /* Dark mode styling for header */
  body.dark-mode .header {
    background-color: #191B25;;
  }
  body.dark-mode .header i{
    color: #fff;
  }
  
 
  body.dark-mode .header span{
    color: #fff;
  }
  body.dark-mode .header ul{
    background-color: #191B25;;
    
  }
  body.dark-mode .dropdown-menu{
    background-color: #191B25;
    color: #fff;
  }
  body.dark-mode .header ul span{
    color: #fff;
  }
  body.dark-mode .header ul h6{
    color: #fff;
  }
  /* Dark mode styling for sidebar */
  body.dark-mode .sidebar {
    background-color: #191B25;
  }
  body.dark-mode .sidebar-nav .nav-content a {
    color: #fff;
  }
  body.dark-mode .sidebar-nav .nav-content a:hover, .sidebar-nav .nav-content a.active {
    color: #fff;
}
.sidebar-nav .nav-content ul li a:hover{
    background-color: #555555;
}
  body.dark-mode .nav-link {
    background-color: #191B25;
    color: #fff;
  }
  body.dark-mode .nav-link span{
    color: #fff;
  }
  /* Dark mode styling for the form section */
  body.dark-mode section {
    background-color: #000000; /* Dark background for the section */
    color: #fff; /* White text */
    padding: 20px;
    border-radius: 8px;
  }
  body.dark-mode section .box label{
    color: #fff; /* White text */
  }

  body.dark-mode section .card {
    background: #fff;
}
body.dark-mode section .card #head{
    background: #000;
}

  /* Dark mode styling for the form inputs */
  body.dark-mode input, body.dark-mode select, body.dark-mode textarea {
    background-color: #fff; /* Dark background for input fields */
    
    border: 1px solid #555; /* Dark border */
  }
  
  body.dark-mode input::placeholder, body.dark-mode textarea::placeholder {
    color: #000; /* Lighter color for placeholders */
  }
  
  /* Dark mode styling for the buttons */
  body.dark-mode .btn {
     /* Dark background for buttons */
    color: #fff; /* White text */
  }
  body.dark-mode .btn a{
    background: none;
  }
  /* Dark mode styling for the table */
  body.dark-mode .table {
    background-color: #143468; /* Dark background for the table */
    color: #fff; /* White text */
  }
  body.dark-mode .table th{
    background-color: #000;
  }
  body.dark-mode .table th, body.dark-mode .table td {
    border: 1px solid #444; /* Dark border for table cells */
  }

  body.dark-mode .form2 table {
    background-color: #143468; /* Dark background for the table */
    color: #fff; /* White text */
  }
  body.dark-mode .form2 table th{
    background-color: #000;
  }
  body.dark-mode .form2 table th, body.dark-mode .form2 table td {
    border: 1px solid #444; /* Dark border for table cells */
  }

  body.dark-mode .table1 table {
    background-color: #143468; /* Dark background for the table */
    color: #fff; /* White text */
  }
  body.dark-mode .table1 table th{
    background-color: #000;
  }
  body.dark-mode .table1 table th, body.dark-mode .table1 table td {
    border: 1px solid #444; /* Dark border for table cells */
  }
  /* Dark mode styling for links inside the table */
  body.dark-mode .table a {
    color: #fff; /* White text for links */
  }
  
  body.dark-mode .table a:hover {
    text-decoration: underline; /* Underline on hover for links */
  }
 
  /* Optional: Styling for the select options in dark mode */
  body.dark-mode select {
    background-color: #fff; /* Dark background for select dropdown */
   
  }
  body.dark-mode form .form1 .form-box1 label{
    color: #fff; 
  } 
  body.dark-mode form .form1 .form-box1 .box label{
    color: #fff; 
  } 

  body.dark-mode form .form1 .form-box1 .box .radio label{
    color: #fff;
  }
  body.dark-mode #form1 form div label{
    color: #fff;
  }
  body.dark-mode #form2 form div label{
    color: #fff;
  }
  body.dark-mode form .div1 label{
    color: #fff;
  }
  body.dark-mode form .div2 label{
    color: #fff;
  }
  body.dark-mode form .div4 label{
    color: #fff;
  }
  body.dark-mode .form2 label{
    color: #fff;
  }
  body.dark-mode form .form1 .input-group label{
    color: #fff;
  }
  body.dark-mode form .form1 .form-box1 h3{
    color: #fff; 
  } 
  body.dark-mode section .form .form1 .form-box1 .box span{
    color: #fff;
  }
  body.dark-mode form h4{
    color: #fff;
  }
  body.dark-mode form .policy label{
    color: #fff;
  }
  body.dark-mode label{
    color: #fff;
  }
  body.dark-mode .tree div{
    background: #143468;;
  }
  body.dark-mode .tree div i{
    background: #143468;;
  }

  body.dark-mode .div1-img img{
    background: #143468;;
  }
  body.dark-mode .form-container{
    background-color: rgba(0, 0, 0, 0.9);
  }
  
  body.dark-mode .box1 label{
    color: #fff;
  }
  body.dark-mode .rights p{
    color: #fff;
  }
  body.dark-mode .records {
    color: #fff;
    border-bottom: 1px solid #fff;
  }
  body.dark-mode .records p{
    color: #fff;
  }
  body.dark-mode .form1 .form-box1 .status div label{
    color: #fff;
  }
  
  body.dark-mode .table h1{
    color: #fff;
  }
  body.dark-mode .news .box1 .box label {
    color: #fff;
  }
  body.dark-mode .dropdown-item span{
    color: #fff;
  }
  body.dark-mode .chengepassword form{
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
  }
  body.dark-mode .chengepassword form h1{
    color: #fff;
  }
  body.dark-mode .copyright {
    color: #fff;
  }
  body.dark-mode .btn1 button a{
    color: #fff;
}
body.dark-mode .box2 button a{
    color: #fff;
}
body.dark-mode .table .record {
    border-bottom:1px solid #fff ;
    color: #fff;
}
body.dark-mode .record {
    border-bottom:1px solid #fff ;
}
body.dark-mode .record p {
    color: #fff;
}



body.dark-mode section form .file{
    background: linear-gradient(45deg, #000818, #04294b) ;
}
body.dark-mode section form .form1 label{
    color: #fff;
}
body.dark-mode .shadow {
    background: linear-gradient(45deg, #000818, #04294b) ;
}
body.dark-mode section span{
    color: #fff;
}
body.dark-mode section .box1{
    background: linear-gradient(45deg, #000818, #04294b) ;
}
body.dark-mode section .box2{
    background: linear-gradient(45deg, #000818, #04294b) ;
}
body.dark-mode section .box2 h2,form h3{
    color: #fff;
}
body.dark-mode section form h3{
    color: #fff;
}
body.dark-mode .order-section .cart .box{
    background-color: #000000;
}
body.dark-mode .order-section .cart .box .box1 {
    background: none;
}
body.dark-mode .order-section .cart .box .box1 p{
    color: #fff;
}
body.dark-mode .order-section .cart .div p{
    color: #fff;
}
body.dark-mode section form .heading{
    background: none;
}
body.dark-mode section h4{
    color: #fff;
}
body.dark-mode .reward h4{
    color: #fff;
}
body.dark-mode section .portfolio-info .photo{
    border:1px solid #fff;
}
body.dark-mode section p{
    color: #fff;
}
body.dark-mode .box .card .card-body p span{
    color: #000;
}
body.dark-mode .box .card .card-body p{
    color: #000;
}
body.dark-mode .card span{
    color: #000;
}