body {
}
.invoice-head {
    background: #b8f2a0;
    padding: 10px;
}

.invoice-wrp {
    width: 793px;
    margin: 0 auto;
    border: 1px solid #333;
    padding: 3px;
}

.head-txt {
    text-align: center;
    font-size: 18px;
    margin: 8px 0;
}

.heading-bg {
    background: #b8f2a0;
    padding: 8px;
}

.txt-pt {
    padding: 5px 10px;
}

.txt-b {
    font-weight: bold;
}

table thead tr th {
    padding: 0 2px;
    text-align: center;
    font-size: 13px;
}

.fnt-eql {
    font-size: 12px;
    font-weight: 500;
}

.tax-wrp {
    margin: 10px 0;
}

    .tax-wrp table tr td {
        padding: 3px 0;
    }

.item-info {
    margin-top: 15px;
}

table.item-info td {
    border: 1px solid #333;
    border-collapse: collapse;
}

.tabl-line {
    border: 1px solid #333;
    padding: 8px;
}

table.tabl-line tr td {
    border-top: 1px solid #333;
}

.table-space {
    padding: 10px;
}



 

 
.login-box {
    text-align:center
}

/*New style dashboar*/
.comm-padd {
    padding:15px;
}
.dashtitle {
    color: #333;
    margin-bottom: 2px;
    font-size: 14px;
    font-weight: 600;
    text-align: right;
    border-bottom: 1.5px dashed #948f8f;
}
.dash-count {
    font-size: 20px;
    font-weight: bold;
    color: #007bff;
    text-align: right;
    overflow-wrap: break-word;
}
.dash-wd-left { float:left;width:38%;}
    .dash-wd-left img {        width: 72px;    }
 .dash-wd-right {
    float: left;
    width: 57%
}
.dashcard {
    border: initial;
    background: #fff;
    border-radius: 0.5rem;
    box-shadow: 0 1px 15px rgb(0 0 0 / 4%), 0 1px 6px rgb(0 0 0 / 4%);
    min-height: 114px;
}

.newcard-body { padding: 1.15rem!important;}
.newcard-body .card-title { margin-bottom: 1rem; }
.newcard-body tabele {margin:0px; }
.kyc-status-bar table tr td .btn { padding: 0.3rem 1.25rem 0.3rem 1.25rem;}
.tb-bg { background: rgba(0,0,0,.06)}
.rounded .card {border-radius: 0.2rem!important;}
.tbl-header {
    font-size: 1.1rem !important;
    font-weight: 500 !important;
    padding: 0.75rem 1.25rem;
    margin-bottom: 0;
    color: inherit;
    background-color: #fff;
    border-bottom: 1px solid rgba(26,54,126,.125);
    height: 3.5rem;
    /*background-image: linear-gradient(to top, #c4c5c7 0%, #dcdddf 52%, #ebebeb 100%);*/
    background-image: linear-gradient(to top, #accbee 0%, #e7f0fd 100%);
    border-radius: 20px 20px 0 0;
}
.tbl-header h3{font-weight:bold}
.tbl-header h3 i {
        font-size: 29px;margin-right:5px;
        vertical-align: middle;
    }
    .dash-board-head {
        border-bottom: 3px solid #17a2b8;
        background: #fff;
        padding: 0.75rem;
    }
.dash-board-head h1 {font-size:20px;margin:0px;padding:0px; }
.dash-board-head nav {  }
.dash-board-head img { width: 40px; height: 40px;}
.fnt-size {font-size:12px;}
.fnt-size1 {
    font-size: 14px;
}
.top-head { border-bottom: 3px solid #17a2b8; background: #fff; padding: 0.75rem;}
.top-head h1 { font-size: 18px;margin:0px;padding:0px }
.top-head .breadcrumb { margin-bottom: 0rem; padding-bottom: 0px;   }
.comm-padd1{padding:30px 0 0px 0;}
.info-wrp {margin-top:15px;}
.fontred {    color: #dc3545}
.pan-wrp { margin-top: 30px;    margin-bottom: 30px;}
.address-phto-wrp{margin-bottom:30px}
.photo-border{border:1px solid #ccc; padding:8px; display:inline-block}
 
.single-line{white-space:nowrap!important}

.tab-bg-custom {
    background: #eee;
    padding: 10px 15px;
    margin-bottom: 20px
}
.tab-bg-custom h3{margin:0px; font-size:14px;font-weight:bold}
.wall-price{font-weight:bold;margin-bottom:10px}
ul.pin-list li {
    margin-right: 20px;
}

.modal-header{padding:10px!important}
.tree-icn {
    border-top: 1px solid #ccc;
    padding-top: 10px;
}
.tree-icn ul{margin:0px;padding:0px; float:right}
.tree-icn ul li{ float:left;text-decoration:none;display: block;margin-right: 10px;}
    .tree-icn ul li img{width:36px;}
.modal-backdrop {    
    opacity: .5 !important;
}s
.tree-wrp{}
ul.pagination {
    margin: 8px 0px 0px 0px;
    padding: 0px;
}
    ul.pagination li {
        text-decoration: none;
        background: #eee;
        margin-right: 6px;
        text-align: center;
        line-height: 27px;
        margin-bottom: inherit;
    }
        ul.pagination li a {
            cursor: pointer;
            font-size: 12px;
            padding: 0px 8px;
            display: inline-block;
        }
        
ul.pagination li.active {
    background: #0182d3;
}
            ul.pagination li.active a{color:#fff;}


            .member-btn button {
                background: none;
                border: none
            }
.member-wrp{padding-top:20px;}
/* mobile view */
@media screen and (max-width: 767px) {
    .btn-lft-rgt {
        margin-left: -47px !important;
    }

    .btn-filr {
        margin-left: -47px !important;
    }

    .top-head h1 {
        font-size: 20px !important;
    }

    a.handpointer {
        /* margin-left: 46px; */
        float: right !important;
    }

    label.pre-name {
        float: left;
        margin-left: 15px;
    }

    .foot-copy {
        text-align: center;
    }

    .rec-form {
        /* float: right; */
        margin-left: 20px !important;
    }
   
    
}

@media screen and (max-width: 1200px) {
    .tree-wrp {
        overflow: auto;
    }
}

    @media (min-width: 1440px) {
        .container {
            max-width: 1200px !important;
        }
    }

    /* tab style*/
    .tab {
        display: inline-block;
    }

        /* Style the buttons inside the tab */
        .tab button {
            background-color: inherit;
            float: left;
            border: none;
            outline: none;
            cursor: pointer;
            padding: 5px 15px;
            transition: 0.3s;
        }

            /* Change background color of buttons on hover */
            .tab button:hover {
                background-color: #c5dbf8;
                border-radius: 4px;
            }

            /* Create an active/current tablink class */
            .tab button.active {
                background-color: #4d4b4b;
                color: #fff;
                background-image: linear-gradient(to top, #004aaa 0%, #005bea 100%);
                border-radius: 4px;
            }

    /* Style the tab content */
    .tabcontent {
        display: none;
        padding: 0px;
        border-top: none;
    }

    .pipe {
        float: left;
        line-height: 30px;
    }

    .member-txt {
        font-size: 24px;
        margin: 0px 20px 0 0px;
        padding: 0px;
    }

    .theme-button {
        display: none;
    }

    /*tab styles*/
    .Bnav-header {
        border-bottom: 3px solid #17a2b8;
        background: #fff;
        padding-bottom: 10px;
        margin-bottom: 10px;
        display: flex;
    }
    /* Style the tab */
    .tab {
        display: inline-block;
    }

        /* Style the buttons inside the tab */
        .tab button {
            background-color: inherit;
            float: left;
            border: none;
            outline: none;
            cursor: pointer;
            padding: 5px 15px;
            transition: 0.3s;
        }

            /* Change background color of buttons on hover */
            .tab button:hover {
                background-color: #ddd;
            }

            /* Create an active/current tablink class */
            .tab button.active {
                background-color: #4d4b4b;
                color: #fff;
            }

    /* Style the tab content */
    .tabcontent {
        display: none;
        padding: 6px 12px;
        border-top: none;
    }

    .pipe {
        float: left;
        line-height: 30px;
    }

    .member-txt {
        font-size: 24px;
        margin: 0px 20px 0 0px;
        padding: 0px;
    }
    /*tab styles end*/

    #idimagePreview {
        width: 100px;
        height: 100px;
        background-position: center center;
        background-size: cover;
        -webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, .3);
        display: inline-block;
    }

    #idimagePreviewBack {
        width: 100px;
        height: 100px;
        background-position: center center;
        background-size: cover;
        -webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, .3);
        display: inline-block;
    }

    #pidimagePreview {
        width: 100px;
        height: 100px;
        background-position: center center;
        background-size: cover;
        -webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, .3);
        display: inline-block;
    }

    #pidimagePreviewBack {
        width: 100px;
        height: 100px;
        background-position: center center;
        background-size: cover;
        -webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, .3);
        display: inline-block;
    }

    #imagePreview {
        width: 100px;
        height: 100px;
        background-position: center center;
        background-size: cover;
        -webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, .3);
        display: inline-block;
    }

    .input-group-addon {
        width: 35%;
    }

    /*----News scroll----*/
    .new-wrp h2 {
        text-align: center;
        border-bottom: 1px dashed #ccc;
        margin: 0px;
        padding: 0px;
    }

    .new-wrp {
        padding: 10px 20px 20px 20px;
        border: 1px solid #ccc;
        background: #E0F6FE;
        height: 250px;
        z-index: 1;
        overflow: hidden;
        box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
        width: 441px;
    }

        .new-wrp ul {
            margin: 0px;
            padding: 0px;
        }

        .new-wrp li {
            display: block;
            text-decoration: none;
            text-align: justify-all
        }

    .top-new-wrp ul {
        margin: 0px;
        padding: 0px;
    }

        .top-new-wrp ul li {
        }



    .top-achievers h2 {
        text-align: center;
        border-bottom: 1px dashed #ccc;
        margin: 0px;
        padding: 0px;
    }

    .top-achievers {
        padding: 10px 20px 20px 20px;
        position: absolute;
        background: #FAFAE3;
        border: 1px solid #eee;
        height: 250px;
        z-index: 1;
        overflow: hidden;
        box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
        border: 1px solid #ccc;
    }

        .top-achievers ul {
            margin: 0px;
            padding: 0px;
        }

        .top-achievers li {
            display: block;
            text-decoration: none;
            text-align: justify-all
        }


    .cal-box {
        padding: 8px;
        border-radius: 8px;
        border: 1px solid #ccc;
    }

    .litt-box {
        width: 49%;
        border-radius: 6px;
        font-size: 1rem;
        padding: 5px;
    }

    .notif-list ul {
        margin: 0px;
        padding: 0px;
    }

    .notif-list li {
        display: block;
        border: 1PX solid #c7c7c9;
        text-align: center;
        padding: 7px;
        margin: 8px 2px 8px 0;
        position: relative;
        color: #333;
        font-size: 14px;
        float: left;
        width: 49%;
        border-radius: 6px;
    }

    .litt-box1 {
        width: 32%;
        border-radius: 6px;
        font-size: 1rem;
        padding: 5px;
    }

    .notif-list1 ul {
        margin: 0px;
        padding: 0px;
        display: flex;
    }

    .notif-list1 li {
        display: block;
        border: 1PX solid #c7c7c9;
        text-align: center;
        padding: 7px;
        margin: 8px 2px 0px 0;
        position: relative;
        color: #333;
        font-size: 14px;
        float: left;
        width: 32%;
        border-radius: 6px;
    }

    .notif-list1 ul li:last-of-type {
        margin-bottom: auto
    }

    .border-line {
        border-bottom: 1px dashed #17a2b8;
        padding-bottom: 5px;
        font-size: 16px;
        padding-top: 5px;
    }

    ul.ulvalid {
        display: block;
        margin: 0px;
        padding: 0px;
    }

        ul.ulvalid li {
            text-align: left;
            display: block;
            color: red
        }

    .botter-bottom {
        border-bottom: 2px solid #fff;
        width: 100%;
        position: absolute;
        bottom: 0;
    }

    .txt-breack {
        width: 80%;
    }

    .conver-header {
        background-image: linear-gradient(to top, #accbee 0%, #e7f0fd 100%);
        padding: 0;
    }

    .bg-head1 {
        background: #d0ebfb;
        padding: 8px;
        border: 1px solid #bfe3f8;
    }

    .radio span {
        display: inline-block;
        vertical-align: top;
    }

    .radio input[type="radio"] {
        vertical-align: middle;
    }

    .img-blur {
        filter: blur(3px);
        -webkit-filter: blur(3px);
    }

    .data-color {
        color: #dc3545;
        font-weight: bold;
    }

    .drop-box-wrp {
        float: left;
        width: 100%;
        margin-bottom: 18px;
    }

    .name-label {
        float: left;
        width: 130px
    }

    .colon-box {
        float: left;
        margin: 0 10px;
    }

    .value-label {
        float: left
    }

    .drop-box-logout {
        cursor: pointer;
        color: red;
        border-top: 1px solid #ccc;
        display: inline-block;
        width: 100%;
        padding: 10px 0 0 0;
    }

    .pink-corl {
        color: #e1234d
    }

    .drop-width {
        min-width: 353px;
    }

    .tree-bg1 {
        background: #017bd0;
        color: #fff
    }

    .tree-bg2 {
        background: #cbe4f9
    }

    .tree-bg3 {
        background: #eeeeee
    }

    .table-header, .tab-bgnew {
        background-color: #017bd0 !important;
        color: #fff
    }

    .cal-box .btn-info {
        background-color: #017bd0 !important;
        color: #fff
    }
    /*---tree view print----*/
    ul.tree-left-tab {
        display: block;
        margin: 0px;
        padding: 0px;
    }

        ul.tree-left-tab li {
            display: inline-block;
            margin: 0px;
            float: left;
            margin-right: 12px;
        }

            ul.tree-left-tab li a {
                padding: 8px 15px;
                color: #333;
                font-weight: bold;
                text-align: center;
                background: #cbe4f9;
                border-radius: 4px;
            }

            ul.tree-left-tab li.active {
            }

                ul.tree-left-tab li.active a {
                    color: white;
                    background-color: #00a67e;
                }

    /*-------*/
    .showprofile-show .collapsed {
        background: #e1f1fc !important;
        text-indent: 15px;
        color: #333 !important;
    }

    .showprofile-show .modal-title {
        background: #017bd0;
        color: #fff;
        text-indent: 15px;
        cursor: pointer;
    }
    /*--genealogy wrp -----*/

    .genealogy-wrp.table th, .genealogy-wrp .table td {
        padding: 0.15rem;
        font-size: 12px;
        border-color: #b4b4b4 !important;
    }

    .genealogy-wrp .tree-bg {
        background: #017bd0;
        color: #fff;
    }

    .genealogy-wrp .modal-body {
        padding: 8px;
    }

    .genealogy-wrp .modal-header {
        background: #017bd0;
        color: #fff;
        border-radius: 0;
    }

        .genealogy-wrp .modal-header .close {
            color: #fff;
        }

    .genealogy-wrp .table {
        font-weight: 600;
        background: #fff;
        margin: 0px;
    }

    .hv-container .person p b {
        padding: 0 5px
    }

    .hv-container .person p {
        margin-top: 5px;
    }

    .hv-container .person {
        cursor: pointer;
    }

    .pop-up-menu {
        position: absolute;
        top: -8px;
        background: #fff !important;
        width: 30px;
        height: 30px;
        border-radius: 30px;
        right: -7px;
        z-index: 13;
        opacity: 1;
        border: 2px solid #017bd0 !important;
    }
    /*-------------  calendar active-------*/
    .datepicker {
        border-radius: 0;
        border: 1px solid #ccc;
    }

        .datepicker.active {
            background: #017bd0 !important;
            color: #fff !important;
        }

        .datepicker:hover {
            background: #017bd0 !important;
            color: #fff !important;
        }

        .datepicker.active .text-info {
            color: #fff !important;
        }

        .datepicker .text-info {
            color: #017bd0 !important;
            font-weight: 600;
        }

        .datepicker:hover .text-info {
            color: #fff !important;
        }

/*---banking wrp---*/
.banking-wrp {
    width: 60%;
    margin: 0 auto;
    background: #f3f3f3;
    padding: 10px;
    border: 1px solid #dee2e6;
}

.banking-list-wrp {
    border-left: 1px solid #dee2e6;
}
     /*---Reward section----*/
.rewar-inp {
    padding: 15px;
    background: #d5f5ff;
    border-radius: 5px;
}
.reward-menu a {
    color: #fff !important;
    font-weight: 500;
    background: #0053b3;
    border-radius: 6px;
    padding: 8px;
    display: inline-block;
}
    .reward-menu a:hover {
        color: #0053b3 !important;
        cursor: pointer;
        background: #fff;
    }
.reward-menu .row:first-child {
    margin-bottom: 15px
}
    .rewar-inp .badge-secondary {
        border-radius: 5px
    }
.reward-menu1 .row {
    margin-bottom: 20px
}
 


.eye-wrp {
    position: absolute;
    top: 27%;
    right: 6%;
}

.pop-up-menu {
    position: absolute;
    top: -8px;
    background: #017bcf !important;
    width: 30px;
    height: 30px;
    border-radius: 30px;
    right: -7px;
    z-index: 13;
    opacity: 1;
    border: 2px solid #fff !important;
}


/*-----Table Strick Header---*/
.table th, .table td {
    font-size: 12px !important;
    padding: 0.45rem;
    font-weight: 600;
}


.tableFixHead {
    overflow-y: auto; /* make the table scrollable if height is more than 200 px  */
    /*  height: calc(71vh - 0px);  gives an initial height of 200px to the table */
    max-height: 450px;
    overflow: auto;
}

    .tableFixHead thead th {
        position: sticky; /* make the table heads sticky */
        top: -1px; /* table head will be placed from the top of the table and sticks to it */
    }



th {
    background: #017bd0 !important;
    color: #fff;
}

/*-----Scroll design----*/

/*-----Scroll design----*/
.scroll-style::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    background-color: #F5F5F5;
}

.scroll-style::-webkit-scrollbar {
    width: 6px;
    height: 7px;
    background-color: #00365a;
}

.scroll-style::-webkit-scrollbar-thumb {
    background-color: #00365a;
}
/*-----ppv popup*/

.ppv-wrp {
    position: relative;
    z-index: 9000;
}

.ppv-header {
    padding: 5px;
    background: url(../img/pvv-popup/pop-header.jpg) no-repeat center center #1953db;
    height: 70px;
    border-radius: 16px 16px 0 0;
}

.ppv-content-wrp {
    background: #fff;
    padding: 20px;
}

.ppv-corner {
    border-radius: 6px
}

.ppv-header h3 {
    font-size: 18px;
    font-weight: 800;
    color: #fff;
    text-align: center;
    line-height: 60px;
}

.ppv-box {
    -ms-flex: 1; /* IE 10 */
    flex: 1;
    margin: 0 10px;
    background: #ececec;
    padding: 30px 10px;
    text-align: center;
    background-image: linear-gradient(to top, #fff1eb 0%, #ace0f9 100%);
}

    .ppv-box h3 {
        font-size: 15px;
        font-weight: 800;
        color: #333;
        text-align: center;
    }

    .ppv-box p {
        width: 60px;
        height: 60px;
        background: #1953db;
        border-radius: 185px;
        margin: 0 auto;
        color: #fff;
        line-height: 60px;
        font-size: 25px;
        font-weight: 600;
    }

.ppv-commsion-wrp {
    display: flex;
}

.ppv-box-btn {
    background: #f1c50e;
    padding: 10px;
    border-radius: 50px;
    width: 50%;
    margin: 0 auto;
    display: block;
    font-size: 16px;
    border: none;
    font-weight: 800;
    margin-top: 21px;
}
.in-process {
    background: green;
    padding: 3px 8px;
    color: #fff;
    animation: blinker 1s linear infinite;
    font-size: 13px;
}

@keyframes blinker {
    50% {
        opacity: 0;
    }
}

/*---Cycle info------*/
        .cycle-wrp {
            margin: 10px 5px;
            border-bottom: 5px solid #b2d7f0;
            border-radius: 0 0 5px 5px;
        }

        .cycle-head {
            background: #b2d7f0;
            padding: 5px;
            font-weight: 600;
            text-align: center;
            border-radius: 8px 8px 0 0;
            background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);
        }

        .cycle-body {
            background: #fff;
            padding: 0px;
        }

            .cycle-body .table td {
                padding: 0.15rem;
            }

        .cycle-bg {
            background: #e5f1fa;
            font-weight: 500
        }
        /*---End Cycle info------*/