/* COMMON */

:root {
    --StatisticsTitle: #000;
    --statisticsBoxBorder: #f1f1f1;
    --commonCardShadow: rgba(0, 0, 0, 0.15) 0px 2px 8px;
    --common-statistics-CardShadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
    --box-bg: rgba(222, 222, 222, 0.5);
    --box-border: 2px solid #d8d8d8;
    --boxHeaderTitle: #087141;
    --boxBodyBorder: #d4d4d4;
    --boxBodyBg: rgba(255, 255, 255, 0);
    --secondaryColorGradient: linear-gradient(180deg,#087141 0%, #b2d33a 100%);
    --box-header-gradient: linear-gradient(180deg, #f0f0f0 0%, #f0f0f0 100%);
    --box-header-text: #1a1a1a;
    --expand-color: #d5a13e;
    --updatedBG: rgb(14 23 31 / 70%);
    --card-value: #2e3841;
    --main-tab-bg: #000;
    --main-tab-text: #fff;
    --card-bg-color: #ffffff;
    --card-button-color: #fff;
    --card-colums-bg: linear-gradient(145deg, rgba(8,113,65,1) 0%, rgba(178,211,58,1) 100%);
    --card-colums-color: #fff;
    --sub-accordian-border: #0c1f6f;
    --btn-xs-text-color: #fff;
    --update-welcome-text: #ffffff;
    --profile-img-border: #ffffff;
    --update-box-bg: rgba(0,0,0,0.5);
    --card-bg: rgba(1, 5, 83, 0.7);
    --card-shadow: rgba(88, 89, 90, 0.5) 0px 3px 10px;
    --card-border: #d8d8d8;
    --tab-btn-bg: linear-gradient(to bottom, #0ca35e, #0ca35e);
    --side-menu-icon: #b2d33a;
    --sub-button-icon-bg: #de771b;
}

.left-sidebar-menu-pro a i {
    color:var(--side-menu-icon);
}

.content {
    padding-top: 0px !important;
}

.card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 0px solid rgba(0, 0, 0, 0.125);
    border-radius: 0.25rem;
}



.card-body {
    flex: 1 1 auto;
    min-height: 1px;
    padding: 1.25rem;
}


.text-center {
    text-align: center !important;
}

.card {
    box-shadow: 3px -3px 3px 5px rgba(152, 152, 152, 0.3);
    margin-bottom: 30px;
    transition: box-shadow 0.2s ease-in-out;
    height: 290px;
}

.card .card-block, .card .card-body {
        padding: 10px 10px;
}

.m-b-10 {
    margin-bottom: 10px;
}

.m-t-10 {
    margin-top: 10px;
}

.m-b-15 {
    margin-bottom: 15px;
}

.user-card2 .risk-rate {
    display: inline-block;
    margin: 0 auto;
}

/*.user-card2 .risk-rate span {
        width: 180px;
        height: 180px;
        border-radius: 50%;
        border: 6px dashed #d6d6d6;
        border-top-color: #f1df8f;
        border-bottom-color: transparent;
        padding: 68px 30px;
        display: block;
        position: relative;
        font-size: 20px;
}

.user-card2 .risk-rate span:after {
    content: "";
    width: 130px;
    height: 130px;
    background-color: #f1df8f;
    border-radius: 50%;
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 1;
}*/

.user-card2 .risk-rate span b {
            font-size: 18px;
            /*color: #fff;*/
            z-index: 2;
            position: relative;
}


.user-card2 .risk-rateMultiD {
    display: inline-block;
    margin: 0 auto;
}

/*.user-card2 .risk-rateMultiD span {
        width: 160px;
        height: 160px;
        border-radius: 50%;
        border: 6px dashed #d6d6d6;
        border-top-color: var(--main-color);
        border-bottom-color: transparent;
        padding: 55px 30px;
        display: block;
        position: relative;
}

.user-card2 .risk-rateMultiD span:after {
    content: "";
    width: 130px;
    height: 130px;
    background-color: #f13066;
    border-radius: 50%;
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 1;
}*/

        .user-card2 .risk-rateMultiD span b {
            font-size: 20px;
            color: var(--card-value);
            z-index: 2;
            position: relative;
        }


.overflow-hidden {
    overflow: hidden !important;
}

.col {
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
}

.card-body {
    flex: 1 1 auto;
    min-height: 1px;
    padding: 1.25rem;
}

/*.pb-0, .py-0 {
    padding-bottom: 0 !important;
}*/

.card .card-footer {
    border-top: 1px solid #e2e5e8;
    padding: 12px 20px;
}

.card .card-block, .card .card-body {
    padding: 20px 20px;
}

.text-c-blue {
    color: #4680ff;
    display: block;
}



.resize-triggers, .resize-triggers > div, .contract-trigger:before {
    content: " ";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
}

.resize-triggers {
    animation: 1ms resizeanim;
    visibility: hidden;
    opacity: 0;
}

    .resize-triggers > div {
        background: #eee;
        overflow: auto;
    }

.text-center {
    text-align: center !important;
}

.rowHL {
    display: flex;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

.bg-primary {
    color: #fff;
    background-color: var(--menu-bg);
}

.user-card2.SingD .btn-success {
    background-color: var(--menu-hvr-bg);
    border-color: var(--menu-hvr-bg);
}

.secBtn.active, .btn-xs.active {
    /*background-color: var(--icon-hover) !important;*/
    background: var(--btn-gradient) !important;
    font-weight: bold;
}

.gridHead {
    display: inline-block;
}

.box.box-info {
    margin-top: 0px;
}

.box {
    margin-bottom: 15px;
    border-radius: 0px;
    /*background: var(--second-primary);*/
    background:var(--card-bg-color);
    color: var(--menu-color);
    position: relative;
    border: 2px solid var(--statisticsBoxBorder) !important;
    box-shadow: var(--commonCardShadow);
}

.box2 {
    margin-bottom: 5px;
    border: 2px solid var(--border) !important;
    border-radius: 0px;
    background: var(--card-bg);
    color: var(--menu-color);
    box-shadow: rgb(0 0 0 / 10%) 0 0 0 0px, rgb(0 0 0 / 10%) 0 4px 16px;
    position: relative;
}

.box3 {
    margin-bottom: 5px;
    border: 2px solid var(--border) !important;
    border-radius: 0px;
     background: #55595a;
    color: var(--menu-color);
    box-shadow: rgb(0 0 0 / 10%) 0 0 0 0px, rgb(0 0 0 / 10%) 0 4px 16px;
    position: relative;
    z-index: 1;
}

.box4 {
    margin-bottom: 5px;
    border: 2px solid var(--border) !important;
    border-radius: 0px;
    background: #B5B5B5;
    color: var(--menu-color);
    box-shadow: rgb(0 0 0 / 10%) 0 0 0 0px, rgb(0 0 0 / 10%) 0 4px 16px;
    position: relative;
    z-index: 1;
}



.box-header .box-title {
    color: var(--menu-color);
}

.box-body .panel {
    background-color: none;
    border: none;
    height: 300px;
    /*overflow: auto;*/
    display: inline;
}

.rowpad2 {
    padding: 0 8px;
}

.box .btn-group-xs > .btn, .btn-xs {
    padding: 1px 2px;
}

.box .btn.btn-flat {
    margin: 2px;
}

.box .Grid-chart {
    height: 300px;
    /*overflow: auto;*/
}

.box .chart {
    position: relative;
    overflow: auto;
    width: 100%;
    height: 300px;
}

.box .chartepin {
    height: 400px;
    width: 100%;
    max-width: 500px;
    display: inline-block;
    padding: 5% 0;
}

.box .Griddata2 {
    margin-top: 10px;
}



@media(max-width:660px) {
    .box .Grid-chart {
        overflow: auto;
    }

    .box .chart {
        overflow: auto;
    }

    .box-body .panel {
        overflow: auto;
    }

    .box-contdata {
        overflow: auto;
    }
}

.box .btn-box-tool {
    border: none;
     /*   background: transparent !important;*/
	 border-radius: 50% !important;
	background: var(--sub-button-icon-bg);
	    width: 20px;
    height: 20px;
	    line-height: 10px;
}

.btn-flat {
    /*background-color: var(--icon-color) !important;*/
     background: linear-gradient(to bottom, #ff9931, #c96805) !important;
    color: var(--black) !important;
    border-bottom: 2px solid var(--primary) !important;
    padding: 3px 5px !important;
    border-radius: 0px !important;
    margin: 10px 5px !important;
}

.btn-xs {
        background: linear-gradient(to bottom, #ff9931, #c96805) !important;
    /*background-color: var(--icon-color) !important;*/
    color: var(--black) !important;
    border-bottom: 2px solid var(--primary) !important;
    padding: 3px 2px !important;
    border-radius: 0px !important;
    margin: 0;
}

.p2 {
    text-align: right;
    padding: 0 20px;
}

.p1 {
    padding-bottom: 20px;
}

.panelp1 {
    height: 300px;
    overflow: auto;
}

.panel-body {
    padding: 1px !important;
}



/*====New Style=====*/
.box-statistics {
    background:transparent !important;
    border:0px !important;
    box-shadow:none !important;
}

.box-statistics .box-header.with-border {
    border-bottom:0px !important;
}
.box-statistics .box-header.with-border {
    border-bottom:0px !important;
	background: var(--accordion-head-bg);
    border-radius: 0px;
    border: 0px;
    padding: 10px 10px;
    margin-bottom: 20px;
}
.box-statistics .box-header .box-title {
    color:var(--StatisticsTitle);
    font-weight:500;
}

.card {
    box-shadow:var(--common-statistics-CardShadow);
    border-radius:25px;
    overflow:hidden;
}
.box-statistics .card {
    height:180px;
    border: 2px solid var(--statisticsBoxBorder);
    transition: all 0.5s ease-in-out 0s;
    background:var(--card-bg-color) !important;
}
.box-statistics .card:hover {
     transform: translateY(-10px);
     box-shadow: rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 56px;
     /*border:2px solid var(--primary);*/
   /*box-shadow: rgba(255, 255, 255, 0.1) 0px 1px 1px 0px inset, rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;*/
}
.box-statistics .card .card-body {
    background:url("../img/box-bg.jpg") center;
    background-size:cover;
    border-radius: 0px;
    padding: 10px;
    position:relative;
}
.box-statistics .card-body-footer {
    background:var(--card-colums-bg);
}
.box-statistics .card .card-body span {
    color:var(--card-value);
    font-size: 1.8rem;
}

.box-statistics .user-card2.SingD .btn-success {
    /*background: transparent !important;*/
    border: 0px;
    margin-top: 0px;
    color: var(--card-button-color);
    font-weight: 500;
    padding: 15px 10px;
}
.box-statistics .card:hover  .btn-success {
    color:var(--secondary);
}

.box-statistics .user-card2 .risk-rate {
    margin:5px auto;
}
.box-statistics .user-card2 .risk-rate .icon-box {
    height:50px;
    width:50px;
    margin: 0px auto 10px;
    background-size:50px;
    background-repeat:no-repeat;
    border-radius:50%;
}

.dashboardsettings-newmembermystatus {
    background: url("../img/status.png") , linear-gradient(0deg, rgb(0, 155, 181) 0%, rgb(37, 216, 253) 100%);
}
.dashboardsettings-newmemberkycdocumentstatus {
    background:url("../img/docs.png"), linear-gradient(0deg, rgb(231, 76, 71) 0%, rgb(245, 109, 105) 100%);
}
.dashboardsettings-newmemberincomereceived {
    background:url("../img/incomerec.png"), linear-gradient(0deg, rgb(233, 146, 13) 0%, rgb(254, 172, 46) 100%);
}
.dashboardsettings-newmembermyawardstatus {
    background:url("../img/award-status.png"), linear-gradient(0deg, rgb(51, 132, 230) 0%, rgb(30, 110, 207) 100%);
}
.dashboardsettings-newmemberepin {
     background:url("../img/epinrec.png"), linear-gradient(0deg, rgb(78, 36, 216) 0%, rgb(64, 23, 197) 100%);
}
.dashboardsettings-newmemberewallet {
background:url("../img/ewalletbalance.png"), linear-gradient(0deg, rgb(147, 49, 239) 0%, rgb(125, 32, 211) 100%);
}
.dashboardsettings-newmembermultipleewalletbalance {
    background: url("../img/ewalletbalance.png"), linear-gradient(0deg, rgb(147, 49, 239) 0%, rgb(125, 32, 211) 100%);
}
.dashboardsettings-newmemberpendingaddmoneyrequest {
    background:url("../img/pending-add-money-icon.png"), linear-gradient(0deg, rgb(231, 76, 71) 0%, rgb(245, 109, 105) 100%);
}
.dashboardsettings-newmemberpendingwithdrawrequest {
    background:url("../img/pending-ewallet-request-icon.png"), linear-gradient(0deg, rgb(233, 146, 13) 0%, rgb(254, 172, 46) 100%);
}
.dashboardsettings-newmemberpendingorder {
    background:url("../img/pending-order.png"), linear-gradient(0deg, rgb(51, 132, 230) 0%, rgb(30, 110, 207) 100%);
}
.dashboardsettings-newmemberlastsignindate {
 background:url("../img/lastsignin.png"), linear-gradient(0deg, rgb(78, 36, 216) 0%, rgb(64, 23, 197) 100%);
}
.dashboardsettings-newmemberlastsigninip {
    background:url("../img/ip-icon.png"), linear-gradient(0deg, rgb(0, 155, 181) 0%, rgb(37, 216, 253) 100%);
}
.dashboard-royaltyQualifier {
    background:url("../img/royaltyupdated.png"), linear-gradient(0deg, rgb(147, 49, 239) 0%, rgb(125, 32, 211) 100%);
}

.dashboardsettings-newmemberroyaltyqualifierlastupdatedon {
    background: url("../img/royaltyupdated.png"), linear-gradient(0deg, rgb(147, 49, 239) 0%, rgb(125, 32, 211) 100%);
}

.dashboardsettings-newmemberawardqualifierlastupdatedon {
    background: url("../img/royaltyupdated.png"), linear-gradient(0deg, rgb(147, 49, 239) 0%, rgb(125, 32, 211) 100%);
}

.dashboardsettings-newmembermydownlinecount {
    background: url(../img/mydownlinecount.png), linear-gradient(0deg, rgb(78, 36, 216) 0%, rgb(64, 23, 197) 100%);
}
.dashboardsettings-newmemberrankmemdashboard {
    background: url("../img/member-rank.png"), linear-gradient(0deg, rgb(147, 49, 239) 0%, rgb(125, 32, 211) 100%);
}
.dashboardsettings-newmemberhighlight1 {
    background: url("../img/award-status.png"), linear-gradient(0deg, rgb(147, 49, 239) 0%, rgb(125, 32, 211) 100%);
}
.dashboardsettings-newmemberhighlight2 {
    background: url("../img/incomerec.png"), linear-gradient(0deg, rgb(233, 146, 13) 0%, rgb(254, 172, 46) 100%);
}

.box-statistics .bg-primary {
    color: var(--card-colums-color);
    background: var(--card-colums-bg);
    border-top:0px;
}

.box .box-header .box-title {
    color:var(--sub-head-color);
    font-weight:600;
    color:var(--accordion-head-color);
}
.box .box-header-new {
    background: var(--box-header-gradient);
    border-radius: 15px;
    border:0px;
}
.box .box-header .box-title i{
	    line-height: 28px !important;
    margin-right: 5px;
    color: var(--accordion-head-icon);
	    width: 28px;
    height: 28px;
	    text-align: center;
}
.box .box-header-new .box-title {
    color:var(--header-new-title);
}
.box .box-header-new {
    background: var(--accordion-head-bg);
    border-radius: 0px;
}
.box .box-header-no-border{
    border-bottom:0px !important;
}
.box .box-header .box-title-withicon i{
    background: var(--secondary);
    border-radius: 50%;
    width: 28px;
    height: 28px;
    text-align: center;
    line-height: 28px !important;
    margin-right: 5px;
    color: var(--accordion-head-icon);
}

.box2 {
    background: transparent;
    color: var(--menu-color);
    box-shadow: none;
    border:0px;
    margin-bottom:15px !important;
    /*border-bottom: 1px solid var(--sub-accordian-border) !important;*/
}

.box2 .box-header {
    border-radius:0px;
    background:var(--sub-head-bg);
}

.box2 .sub-heading .box-tools {
    color:#212a32;
}

.box2 .box-header .box-title {
    color: var(--boxHeaderTitle);
    font-weight: 600;
    line-height: 25px;
}

.box2 .sub-heading .box-title i {
    margin-right: 5px;
    color: var(--side-menu-icon);
}


.box3 {
    background: transparent;
    box-shadow: none;
    border: 0px !important;
    padding: 5px;
    box-shadow:var(--commonCardShadow);
}
.box3 .box-header {
    background:var(--box-header-gradient);
    border-radius:0px;
    border-bottom:0px !important;
}
.box3 .box-header .box-title, .box3 .box-header .box-title a {
    color:var(--box-header-text) !important;
    font-weight:600;
}

.box3 .box-header .box-title i {
    display:none !important;
}

.box3 .box-body {
    /*border: 1px solid var(--statisticsBoxBorder);*/
    border-radius: 15px;
    margin-top: 10px;
    /*box-shadow:var(--commonCardShadow);*/
}

.box4 {
    background: transparent;
    box-shadow: none;
    border: 0px !important;
    padding: 5px;
    box-shadow:var(--commonCardShadow);
}
.box4 .box-header {
    background:var(--box-header-gradient);
    border-radius:0px;
    border-bottom:0px !important;
}
.box4 .box-body {
    /*border: 1px solid var(--statisticsBoxBorder);*/
    border-radius: 15px;
    margin-top: 10px;
    /*box-shadow:var(--commonCardShadow);*/
}
.box4 .box-header .box-title, .box4 .box-header .box-title a {
    color:var(--box-header-text);
    font-weight:600;
}

.box4 .box-header .box-title i {
    display:none !important;
}
.box4 .btn-xs {
    background:transparent !important;
    padding: 3px 5px !important;
    border-radius: 0px !important;
}
    .box4 .btn-xs.active {
        /*background:var(--primary) !important;*/
        background: var(--secondaryColorGradient) !important;
    }
.btn-flat {
    background:var(--tab-btn-bg) !important;
    padding: 3px 15px !important;
    border-radius: 0px !important;
    margin: 10px 0px !important;
}
.box-header > .box-tools {
    top: 0px;
}
.update-wrapper {
    background:url("../img/updated-bg.jpg") center;
    background-size:cover;
    border-radius: 10px;
    overflow: hidden;
    padding: 40px 15px;
    background-size: 100%;
    margin-bottom: 20px;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    position: relative;
}
.update-wrapper:before {
    position: absolute;
    content: '';
    background: var(--updatedBG);
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}
.update-box {
    margin: 0px;
    float: right;
    padding: 20px 15px;
    /*border: 2px solid var(--secondary);
    background: var(--update-box-bg);*/
    border-radius: 15px;
}
.update-wrapper .update-box h3 {
    font-size: 1.8rem;
    color: var(--white);
    font-weight: 600;
    margin: 0px 0px;
    text-align:center;
    border-bottom:2px solid var(--secondary);
    padding-bottom:15px;
}
.update-wrapper .update-box p {
    font-size:2.0rem;
    color: var(--white);
    padding-top:5px;
    text-align:center;
    margin: 0px;
    font-weight:500;
}
.update-profile {
    float: left;
    width: 100px;
    margin-right: 15px;
    margin-left:15px;
}
.update-profile img {
    width:100%;
    border-radius:50%;
    border:3px solid var(--profile-img-border);
}
.update-user {
  float: left;
}
.update-user h4 {
    font-size: 2.5rem;
    text-transform: capitalize;
    color: var(--update-welcome-text);
    font-weight: 600;
}
.update-user p {
    color: var(--update-welcome-text);
    font-weight: 500;
    font-size: 2.8rem;
    text-transform: uppercase;
    text-shadow: 2px 6px 4px rgba(0,0,0,0.6);
}

.box-statistics .MultiD .text-c-blue a {
    color:var(--card-value) !important;
    font-size: 14px;
    font-weight: 600;
}
.box-statistics .user-card2.SingD .btn-success {
    word-wrap: break-word !important;
    white-space: unset !important;
}
.open .btn-box-tool, .btn-box-tool:hover {
    color: #fff;
}
.panel-body .white_shd .col-lg-12 {
    padding-right:0px;
    padding-left:0px;
}
.NewGridNorecord {
    color: var(--black);
}
@media(max-width:1366px) {
  .box-statistics .card {
    height: 200px;
}
}
@media(max-width:768px) {
.Dashpad-0 {
    padding:0px;
}
.Dashpad-0 .row {
    margin-left:0px;
    margin-right:0px;
}
.box-statistics .card {
    height: 170px;
}
.box3 {
    padding-right:0px;
}
.box4 {
    padding-left:0px;
}
.update-wrapper {
    padding: 15px 15px;
}
.update-wrapper .update-box h3, .update-wrapper .update-box p {
    text-align: left;
}

}
@media(max-width:1024px) {
	.box-header .box-title{
		font-size: 14px ;
		
	}
	.box4 .btn-xs{
		font-size: 11px !important;
		
		padding: 6px 1px !important;
	}
	.box-header > .box-tools{
		right: 4px;
		 
	}

}
@media(max-width:660px) {
    .update-box {
    float: left;
}
}
@media(max-width:480px) {
.box-statistics .card {
    height:auto;
}
.update-wrapper {
    background-size: cover;
    padding: 15px 0px;
}
.update-box {
    padding: 15px 0px;
}
.update-wrapper .col-sm-12 {
    padding-left:0px;
    padding-right:0px;
}
.update-user h4 {
    font-size: 1.8rem;
}
.update-user p {
    font-size: 2.0rem;
}
.update-profile {
    margin-right: 0;
    margin-left: 0;
}
.box-body .col-xs-12 {
    padding-left:0px;
    padding-right:0px;
}
.box-body {
    padding: 5px;
}
.rowpad2 {
    padding: 5px 8px;
}
.box3 {
    padding-right: 5px;
}
.box4 {
    padding-left: 5px;
}
}
.k-grid { 
    overflow: hidden !important;
}


@media(max-width:360px) {
	.box-header .box-title{
		font-size: 16px;
		
	}
	.btn-group-xs>.btn, .btn-xs{
		    font-size: 11px;
		margin-bottom: 15px;
			    padding: 0px 5px !important;
	}
	.box4 .box-header {
    padding: 26px 11px 5px 11px;
}
}
@media(max-width:360px) {
	.box-header .box-title{
		font-size: 16px !important;
		
	}
	.btn-group-xs>.btn, .btn-xs{
		    font-size: 11px !important;
		margin-bottom: 15px;
			    padding: 0px 5px !important;
	}
	.box4 .box-header {
    padding: 9px 11px 5px 11px;
}
	.box-header > .box-tools{
		position: relative !important;
	}
	.box4 .btn-xs{
		padding: 3px 4px !important;
	}
}
@media(max-width:360px){
    .box .chart{
        height: 400px !important;
    }
}

/************ AJS After UAT Uploading  *****************************/
.btn-flat{
color: var(--box-header-text) !important;
}
.box4 .btn-xs {
    color: var(--box-header-text) !important;
}
@media(min-width:1025px) and (max-width:1920px){
    .rowHL .col {
        position: relative !important;
        bottom: 18px !important;
        font-weight: bold !important;
    }
}