/* C&P Grid CSS */
/* Created by Anand */
/* Ver 1.0 */


/* retire.js fixes */
.tooltip {
    --bs-tooltip-zindex: 1080;
    --bs-tooltip-max-width: 200px;
    --bs-tooltip-padding-x: 0.5rem;
    --bs-tooltip-padding-y: 0.25rem;
    --bs-tooltip-margin: ;
    --bs-tooltip-font-size: 0.875rem;
    --bs-tooltip-color: #fff;
    --bs-tooltip-bg: #000;
    --bs-tooltip-border-radius: 0.375rem;
    --bs-tooltip-opacity: 0.9;
    --bs-tooltip-arrow-width: 0.8rem;
    --bs-tooltip-arrow-height: 0.4rem;
    z-index: var(--bs-tooltip-zindex);
    display: block;
    padding: var(--bs-tooltip-arrow-height);
    margin: var(--bs-tooltip-margin);
    font-family: var(--bs-font-sans-serif);
    font-style: normal;
    font-weight: 400;
    line-height: 1.5;
    text-align: left;
    text-align: start;
    text-decoration: none;
    text-shadow: none;
    text-transform: none;
    letter-spacing: normal;
    word-break: normal;
    white-space: normal;
    word-spacing: normal;
    line-break: auto;
    font-size: var(--bs-tooltip-font-size);
    word-wrap: break-word;
    opacity: 0;
}
.tooltip.show {
    opacity: var(--bs-tooltip-opacity);
}
.tooltip .tooltip-arrow {
    display: block;
    width: var(--bs-tooltip-arrow-width);
    height: var(--bs-tooltip-arrow-height);
}
.tooltip .tooltip-arrow::before {
    position: absolute;
    content: "";
    border-color: transparent;
    border-style: solid;
}
.bs-tooltip-top .tooltip-arrow, .bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow {
    bottom: 0;
  }
  .bs-tooltip-top .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before {
    top: -1px;
    border-width: var(--bs-tooltip-arrow-height) calc(var(--bs-tooltip-arrow-width) * 0.5) 0;
    border-top-color: var(--bs-tooltip-bg);
  }
  
  /* rtl:begin:ignore */
  .bs-tooltip-end .tooltip-arrow, .bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow {
    left: 0;
    width: var(--bs-tooltip-arrow-height);
    height: var(--bs-tooltip-arrow-width);
  }
  .bs-tooltip-end .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before {
    right: -1px;
    border-width: calc(var(--bs-tooltip-arrow-width) * 0.5) var(--bs-tooltip-arrow-height) calc(var(--bs-tooltip-arrow-width) * 0.5) 0;
    border-right-color: var(--bs-tooltip-bg);
  }
  
  /* rtl:end:ignore */
  .bs-tooltip-bottom .tooltip-arrow, .bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow {
    top: 0;
  }
  .bs-tooltip-bottom .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before {
    bottom: -1px;
    border-width: 0 calc(var(--bs-tooltip-arrow-width) * 0.5) var(--bs-tooltip-arrow-height);
    border-bottom-color: var(--bs-tooltip-bg);
  }
  
  /* rtl:begin:ignore */
  .bs-tooltip-start .tooltip-arrow, .bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow {
    right: 0;
    width: var(--bs-tooltip-arrow-height);
    height: var(--bs-tooltip-arrow-width);
  }
  .bs-tooltip-start .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before {
    left: -1px;
    border-width: calc(var(--bs-tooltip-arrow-width) * 0.5) 0 calc(var(--bs-tooltip-arrow-width) * 0.5) var(--bs-tooltip-arrow-height);
    border-left-color: var(--bs-tooltip-bg);
  }
  


/* layout */
.cnp_grid_container{
	display: flex;
	flex-direction: column;
    padding-bottom: 20px;
}
.cnp_grid_header{
	grid-column: span 3;
    padding: 10px;
}
.cnp_grid_sidebar{
    padding: 10px;
}
.cnp_grid_content{
	flex: 1;
    padding: 10px;
}
.cnp_grid_footer{
	grid-column: span 3;
    padding: 10px;
}
.clearfix{
    clear: both;
}
/* elements */
.cnp_grid_label, .cnp_grid_input, .cnp_btn, .cnp_grid_select, .cnp_grid_textarea, .cnp_grid_text{
    padding: 2px 8px;
    margin-bottom: 0px;
}
.cnp_grid_container .required:after { content:" *";color:red; }

/* sidebar */
.cnp_grid_nav{
    padding: 3px 0px;
    background-color: #ddd;
    list-style: none;
    margin: 0px;
    border-radius: 3px;
}
.cnp_grid_nav li a{
    padding: 17px 17px;
    display: block;
    background-color: #efefef;
    border-bottom: 1px solid #ddd;
    text-decoration: none;
}
.cnp_grid_nav li a:hover, .cnp_grid_nav li a.active{
    background-color: #fff;
}

/*content*/
.cnp_grid_content h3{
    margin-top: 10px;
    margin-bottom: 10px;
}
.cnp_grid_content .cnp_float_left{
    float: left;
}
.cnp_grid_content .cnp_float_right{
    float: right;
}
.cnp_btn{
    padding: 5px 10px;
}
.cnp_btn.cnp_btn_default{
    background-color: #fff;
    border: 1px solid #ced4da;
    display: inline-block;
    border-radius: 5px;
}
.cnp_btn.cnp_btn_red{
    background-color: #d9534f;
    border: 1px solid #d43f3a;
    color:#fff;
}
.cnp_btn.cnp_btn_primary {
    color: #fff;
    background-color: #428bca;
    border-color: #357ebd;
}
.cnp_btn.cnp_btn_secondary {
    color: #fff;
    background-color: #f0ad4e;
    border-color: #eea236;
}
.cnp_grid_table_responsive{
    overflow-x:auto;
    margin:10px 0px 30px;
}
.cnp_grid_table{
    width: 100%;
}
.cnp_grid_table tr th, .cnp_grid_table tr td{
    padding:5px 10px;
    border-bottom: 1px solid #ddd;
    vertical-align: top;
}
.cnp_grid_table_striped tr:nth-child(even) {background-color: #f2f2f2;}
.cnp_grid_table_default tr > td:first-child {
    width: 30%;
}

/* forms */
.cnp_grid_form{
    display: grid;
    grid-gap: 16px;
}
.cnp_grid_form div{
    display: grid; 
}

.cnp_grid_form_horizontal{
	display: grid;
    padding: 20px 0px;
}
.cnp_grid_form_horizontal > div{
	display: grid;   
}

.cnp_grid_form_bordered > div{
    border-bottom: 1px solid #DFDFDF;
    padding-bottom: 5px;
}

/* product details */
.cnp_grid_productdetails tr td{
    padding:15px 0px;
}
.cnp_grid_productdetails tr td:first-child, .cnp_grid_productdetails tr td:last-child{
    padding:15px 10px;
}
.cnp_pos_grey, .cnp_pos_dot {
    color: #A8A8A8;
}
.cnp_pos_bg {
    height: 30px;
    vertical-align: middle;
    border-left: 1px #DFDFDF solid;
    padding-top: 2px;
    white-space: nowrap;

    background: linear-gradient(180deg, rgba(0,0,0,0) calc(50% - 1px), rgba(192,192,192,1) calc(50%), rgba(0,0,0,0) calc(50% + 0px) );
}
.cnp_pos_bg span{background: #fff; padding:10px; position:relative; top:-10px; left: 20px}
.cnp_pos_bg_last{
    border:1px solid #dfdfdf;
}
.cnp_pos_dot_3 .icon-gift{
    font-size: 1.5em;
    vertical-align: text-bottom;
}

/* track package */
.cnp_tp .cnp_tp_timeline{
    padding-left: 10px;
}
.cnp_tp .cnp_tp_timeline .row{
    position: relative;
}
.cnp_tp .cnp_tp_timeline .row::before{
    content: ' ';
    background-color:#5cb85c;
    display: inline-block;
    position: absolute;
    left: 22px;
    width: 2px;
    height: 100%;
    z-index: 400;
    margin-top: 15px;
}
.cnp_tp .cnp_tp_timeline .row:last-child::before {
    display: none;
}
.cnp_tp .cnp_tp_timeline .cnp_tp_icon h3{
    background: #fff;
    z-index: 400;
    position: absolute;
    color: #5cb85c;
}
.cnp_tp .cnp_tp_timeline .cnp_tp_time p{
    line-height: normal;
    margin-bottom: 10px;
}
.cnp_nodata{
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
}
/*card sprite*/
#card_number, .card_number {
	/*Login_Menu.page image path*/
    background-image: url(../images/cards_sprite.png),url(../images/cards_sprite.png);
    background-position: 4px -119px, right -90px top -58px;
    background-size: 120px auto, 120px auto;
    background-repeat: no-repeat;
    padding-left: 60px;
}
#card_number.Visa, .card_number.Visa  {
	background-position: 4px -161px, right -90px top -58px;
}
#card_number.card_valid.Visa, .card_number.card_valid.Visa {
	background-position: 4px -161px, right -90px top -85px;
}
#card_number.MasterCard, .card_number.MasterCard {
	background-position: 4px -245px, right -90px top -58px;
}
#card_number.card_valid.MasterCard, .card_number.card_valid.MasterCard {
	background-position: 4px -245px, right -90px top -85px;
}
#card_number.JCB, .card_number.JCB {
	background-position: 4px -374px, right -90px top -58px;
}
#card_number.card_valid.JCB, .card_number.card_valid.JCB {
	background-position: 4px -374px, right -90px top -85px;
}
#card_number.Amex, .card_number.Amex {
	background-position: 4px -416px, right -90px top -58px;
}
#card_number.card_valid.Amex, .card_number.card_valid.Amex {
	background-position: 4px -416px, right -90px top -85px;
}
#card_number.Discover, .card_number.Discover {
	background-position: 4px -330px, right -90px top -58px;
}
#card_number.card_valid.Discover, .card_number.card_valid.Discover {
	background-position: 4px -330px, right -90px top -85px;
}
#card_number.eCheck, .card_number.eCheck {
	background-position: 4px -453px, right -90px top -58px;
}
.onactive.Visa {
    background-position: 2px -161px, right -90px top -58px;
 }
 .onactive.valid.Visa {
    background-position: 2px -161px, right -90px top -87px;
 }
 .onactive.MasterCard {
    background-position: 2px -245px, right -90px top -58px;
 }
 .onactive.valid.MasterCard {
    background-position: 2px -245px, right -90px top -87px;
 }
 .onactive.JCB {
    background-position: 2px -374px, right -90px top -58px;
 }
 .onactive.valid.JCB {
    background-position: 2px -374px, right -90px top -87px;
 }
 .onactive.Amex {
    background-position: 2px -416px, right -90px top -58px;
 }
 .onactive.valid.Amex {
    background-position: 2px -416px, right -90px top -87px;
 }
 .onactive.Discover {
    background-position: 2px -331px, right -90px top -58px;
 }
 .onactive.valid.Discover {
    background-position: 2px -331px, right -90px top -87px;
 }
 #card_number.CnP-AmazonPay, .card_number.CnP-AmazonPay {
	background-position: 4px -496px, right -90px top -58px;
 }
 #card_number.card_valid.CnP-AmazonPay, .card_number.card_valid.CnP-AmazonPay {
    background-position: 4px -496px, right -90px top -85px;
  }
  .onactive.CnP-AmazonPay {
    background-position: 4px -496px, right -90px top -58px;
 }
 .onactive.valid.CnP-AmazonPay {
    background-position: 4px -496px, right -90px top -87px;
 }
 #card_number.Bank, .card_number.Bank {
    background-position: 4px -538px, right -90px top -58px;
 }
 #card_number.card_valid.Bank, .card_number.card_valid.Bank {
    background-position: 4px -538px, right -90px top -85px;
 }
 .onactive.Bank {
    background-position: 4px -538px, right -90px top -58px;
 }
 .onactive.valid.Bank {
    background-position: 4px -538px, right -90px top -87px;
 }
span.card_number {
    width: 50px;
    height: 38px;
    display: inline-block;
}
/* vertical nav-tabs */
.cnp_vertical_tabs .nav-tabs{
    border-bottom: none;
    z-index: 1;
    /* position: absolute; */
    width: 100%;
}
/* .cnp_vertical_tabs .tab-content{
    border-left: 1px solid #dee2e6;
} */
.cnp_vertical_tabs .nav-tabs .nav-link {
    margin-bottom: 0px;    
    border-top-left-radius: .25rem;
    border-top-right-radius: 0rem;

    margin-right: -1px;
    border-bottom-left-radius: .25rem;    
}
.cnp_vertical_tabs .nav-tabs .nav-item.show .nav-link, .cnp_vertical_tabs .nav-tabs .nav-link.active{
    border-color: #dee2e6 #fff #dee2e6 #dee2e6;
    background-color: #f8f9fa;
}
.cnp-subscription_cards .card-body{
    padding-bottom: 3rem;
}
.cnp-subscription_cards .position-absolute{
    bottom: 15px;
}
.cnp-inner-page .btn-light{
    border: 1px solid #ced4da;
}
/* media */
/* @media (min-width: 1400px) {
    .container {
        max-width: 1370px!important;
    }
} */
@media (min-width: 768px){
    .cnp_grid_container{
        display: grid;
        grid-template-columns: 250px 1fr;        
        grid-gap: 10px
    }
    .cnp_grid_form_horizontal > div{
        display: grid;
        grid-template-columns: 200px 1fr;  
        padding: 0px 0px 10px;
    }
    .cnp_grid_form_horizontal label{
        grid-column: 1 / 2;
        margin-bottom: 0px;
    } 
    .cnp_grid_form_horizontal input{
        grid-column: 2 / 3;
    } 

}
@media (max-width: 767px){
    .cnp_grid_table thead {
        border: none;
        clip: rect(0 0 0 0);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        width: 1px;
    }      
    .cnp_grid_table tr {
        border-bottom: 3px solid #ddd;
        display: block;
        margin-bottom: .625em;
    }      
    .cnp_grid_table td {
        border-bottom: 1px solid #ddd;
        display: block;
    }    
    .cnp_grid_table td::before {
        /*
        * aria-label has no advantage, it won't be read inside a table
        content: attr(aria-label);
        */
        content: attr(data-label);
        display: block;
        font-weight: bold;
        text-transform: uppercase;
        text-align: left;
    }      
    .cnp_grid_table td:last-child {
        border-bottom: 0;
    }
    .cnp_grid_table_default tr > td:first-child {
        width: 100%;
    }
    .cnp_grid_table .cnp_pos_bg, .cnp_grid_table .cnp_pos_bg_last{
        border: none;
        background: none; 
    }
    .cnp_grid_productdetails tr td {
        padding: 10px 10px;
    }

    .cnp-inner-page .form-inline.pull-right{
        display: block;
        float: none;
    }
    .cnp-inner-page #filter, .cnp-inner-page #orderType, .cnp-inner-page #pageSize, .cnp-inner-page #pageSize+.btn
    {
        width: 49%!important;
        margin: 1px 1px 3px 1px!important;
    }
    .cnp-inner-page .cnp-orderitems .btn-warning,
    .cnp-inner-page .cnp-orderitems .btn-light.btn-block
    {
        width: 100%!important;
        margin-top: 5px;
        margin-bottom: 5px;
    }
    .cnp-inner-page .cnp-orderitems img
    {
        margin-bottom: 10px;
    }
     /* .cnp-inner-page .form-group.ml-auto{
      display: none;
    }*/
    .cnp-inner-page .cnp_horizontal_tabs .row.pb-4 .col-md-4,
    .cnp-inner-page .cnp_horizontal_tabs .row.pb-4 .col-md-3
    {
        padding-left: 6rem;
    }
    .cnp-inner-page .cnp-subscription_list .text-right.col-md-5.form-inline .form-group{
        display: block;
        width: 100%;
    }
    .cnp-inner-page .card.mb-3 .card-header div[class*=col-md-]{
        padding-bottom: 1rem;
        text-align: left!important;
    }
}
@media (max-width: 576px){
    .cnp-inner-page #filter, .cnp-inner-page #orderType, .cnp-inner-page #pageSize, .cnp-inner-page #pageSize+.btn,
    .cnp-inner-page .cnp_horizontal_tabs .col-md-6 .btn
    {
        width: 100%!important;
        margin: 5px 0px 5px 0px!important;
    }
    .cnp-inner-page .pagination{
        display: block;
        text-align: center;
    }
    .cnp-inner-page h1 .pull-right{
        float: none;
        text-align: right;
    }
}