:root{
    --primary-color: #262626;
    --secondary-color: #666666;
    --blue-color : #095aba;
    --white-color : #ffffff;
    --black-color : #000000;
    --body-background-color: #f8f8f8;
    --progress-bar-value-color:#006DCC;
    --progressbar-clor: rgba(0, 0, 0, 0.06);
    --disabled-color: #b3b3b3;
    /* status colors */
    --sliver-color : #A8A6A2;
    --member-color : #242424;
    --bronze-color : #A4783D;
    --gold-color : #C29004;
    --platinum-color : #6B7679;
    --surface-background : #f8f8f8;
    --border-dividers : #b3b3b3;
    --link-color:#006DCC;

}
body{
    background: var(--body-background-color);
    font-family: 'Lutron-Sans-Screen', Helvetica, Arial, sans-serif;
    color: var(--primary-color);
}
h2{
    font-size: 28px;
    line-height: 32px;
    font-weight: 500;
    color: var(--primary-color);
}
h3{
    font-size: 24px;
    color: var(--primary-color);
    line-height: 28px;
    font-weight: 500;
}
h4{
    font-size: 20px;
    line-height: 24px;
    font-weight: 500;
    text-transform: capitalize;
    color: var(--primary-color);
}
@media only screen and (max-width:1024px){
    h2{
        font-size: 20px;
        line-height: 24px;
    }
    h3{
        font-size: 20px;
        line-height: 24px;
    }
    h4{
        font-size: 16px;
        line-height: 20px;
    }
    .slds-m-top--large, .slds-m-top_large{
        margin-top: 16px;
    }
    .slds-m-bottom--large, .slds-m-bottom_large{
        margin-bottom: 16px;
    }
    .slds-p-around_large{
        padding: 16px;
    }
    .component-wrapper-spacer{
        margin-bottom: 16px;
    }
    .comm-section-container{
        padding: 16px;
    }

}
.white-box{
    background: var(--white-color);
}
.info-text{
    color: var(--primary-color);
    font-size: 14px;
}
.secondary-text{
    color: var(--secondary-color);
    font-size: 14px;
    font-weight: 400;
    line-height: 16px;
    @media only screen and (max-width:1024px){
        font-size: 12px;
    }
}
.primary-btn{
    background: var(--blue-color);
    border-radius: 20px;
    font-size: 14px;
    padding: 4px 16px;
    color: var(--white-color);
    font-weight: 500;
    &:hover
    &:focus, 
    &:active{
        color: var(--primary-color);
        box-shadow: none;
    }
}
.secondary-btn{
    background: rgba(0, 0, 0, 0.06);
    border-radius: 20px;
    font-size: 14px;
    padding: 4px 16px;
    color: var(--primary-color);
    font-weight: 500;
    &:hover, 
    &:focus, 
    &:active{
        background: rgb(224 224 224);
        color: var(--primary-color);
        box-shadow: none; 
    }  
}
/* Navigation bar */
nav.comm-customizable-navigation-bar ul li a{
    font-size: 18px !important;
    color: var(--secondary-color) !important;
    font-weight: 500 !important;
    line-height: 24px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
}
nav.comm-customizable-navigation-bar ul li a.isActive{
    color: var(--primary-color) !important;
    font-weight: 500 !important;
}
.promotion_description{
    font-size: 16px;
    color: var(--secondary-color);
    font-weight: 400;
    line-height: 20px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    @media only screen and (max-width:1024px){
        font-size: 12px;
        line-height: 16px;
    }
}
.bottom-pannel{
    overflow: auto;
    @media only screen and(max-width:1024px){
        margin-top: 16px;
    }
}
.right-container{
    @media only screen and (max-width:1024px){
        padding-right: 0px;
    }
}
/* Member Conatiner */
.member_title{
    background: var(--blue-color);
    border-radius: 10px;
    padding: 20px;
}
.member_title h2{
    text-transform: uppercase;
    font-size: 30px;
    letter-spacing: 0.75px;
    color: var(--white-color);
    line-height: 30px;
    display: flex;
    align-items: center;
}
.member_title h2 span{
    background: var(--white-color);
    color: var(--blue-color);
    text-transform: uppercase;
    font-size: 10px;
    font-weight: bold;
    line-height: 10px;
    padding: 5px 10px;
    border-radius: 10px;
}
/* Sales Box */
.user_memebership_status .slds-progress-bar, .user_memebership_status .slds-progress-bar__value{
    height: 24px;
    border-radius: 16px;
}
.sales_target, .user_memebership_status{
    border: 2px solid var(--blue-color);
    border-radius: 8px;
    background: var(--white-color);
    box-shadow: 0 0 0 0.4px rgba(0, 0, 0, 0.20) inset, 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.10), 0 1.6px 3.6px 0 rgba(0, 0, 0, 0.13);
}
.sales_target.gold, .user_memebership_status.gold{
    border: 2px solid var(--gold-color);
}
.sales_target.silver, .user_memebership_status.silver{
    border: 2px solid var(--sliver-color)
}
.sales_target.member, .user_memebership_status.member{
    border: 2px solid var(--member-color);
}
.sales_target.bronze, .user_memebership_status.bronze{
    border: 2px solid var(--bronze-color);
} 
.sales_target.platinum, .user_memebership_status.platinum{
    border: 2px solid var(--platinum-color);
}
.sales_target .sales_info p{
    font-size: 16px;
    color: var(--secondary-color);
    line-height: 20px;
}
.sales_target .total_price{
    font-size: 40px;
    line-height: 32px;
    color: var(--primary-color);
    font-weight: bold;
    padding-top: 16px;
}
/* User Membership */
.user_memebership_status{
    @media only screen and (max-width:1024px){
        margin-top: 16px;
    }
}
.user_memebership_status .target_price{
    display: flex;
    justify-content: end;
    font-size: 14px;
    color: var(--secondary-color);
}
.user_memebership_status .slds-progress-bar__value{
    background: var(--blue-color);
}
/* Benefits */
.right-pannel{
    @media only screen and (max-width:1024px){
        padding: 0px;
    }
}
.right-pannel .slds-p-around_large, .right-container .slds-p-around_large{
    @media only screen and (max-width:1024px){
        padding: 16px;
    }
}
.benefits-container{
    padding: 24px;
    @media only screen and (max-width:1024px){
        margin-bottom: 16px;
        padding: 16px;
    }
}
/* Promotion Box */
.promotion-grid{
    @media only screen and (max-width:1024px){
        margin-top: 16px;
    }
}
.promotion-container{
    @media only screen and (max-width:767px){
        padding-right: 0px;
        padding-left: 0px;
        padding-bottom: 8px;
        padding-top: 8px;
    }
}
.promotion-row .promotion_box{
    cursor: pointer;
    &:hover{
        box-shadow: 0px 0px 2px 0.4px rgba(0, 0, 0, 0.20) inset, 0px 0.3px 0.9px 0px rgba(0, 0, 0, 0.10), 0px 1.6px 3.6px 0px rgba(0, 0, 0, 0.13);
    }
}
.promotion_box, .benefits-container{
    border-radius: 8px;
    background: var(--white-color);
    box-shadow: 0px 0px 0px 0.4px rgba(0, 0, 0, 0.20) inset, 0px 0.3px 0.9px 0px rgba(0, 0, 0, 0.10), 0px 1.6px 3.6px 0px rgba(0, 0, 0, 0.13);
}
.promotion_box button{
    background: rgba(0, 0, 0, 0.06);
    border-radius: 20px;
    color: var(--primary-color);
    border: 0px;
    align-items: center;
    justify-content: center;
}
.promotion_box button.slds-button_brand{
    width: 100%;
    background-color: var(--link-color);
    border-color: var(--link-color);
    color: var(--white-color);
}
.promotion_box .slds-button.slds-button_icon.slds-button_icon-bare{
    background: transparent;
    justify-content: end;
    line-height: 14px;
    &:focus{
        box-shadow: none;
        border: 0px;
    }
}
.promotion_box .target_price{
    color: var(--secondary-color);
    font-size: 14px;
}
.promotion_box .slds-progress-bar{
    height: 16px;
    background: var(--progressbar-clor);
    border-radius: 8px;
}
.promotion_box .slds-progress-bar .slds-progress-bar__value{
    background: var(--progress-bar-value-color);
    border-radius: 8px;
}
.user_memebership_status.gold .slds-progress-bar__value{
    background: var(--gold-color);
}
.user_memebership_status.silver .slds-progress-bar__value{
    background: var(--sliver-color);
}
.user_memebership_status.member .slds-progress-bar__value{
    background: var(--member-color);
}
.user_memebership_status.bronze .slds-progress-bar__value{
    background: var(--bronze-color);
} 
.user_memebership_status.platinum .slds-progress-bar__value{
    background: var(--platinum-color);
}
/* Promotion List */
.promotion_list li.slds-item{
    padding: 0px;
}
.promotion_list li.slds-item .promotion-list-name{
    opacity: 0.2;
}
.promotion_list li.slds-item:first-child .promotion-list-name{
    opacity: 100%;
}
.promotion_list .current-benefit-list-name .slds-text-heading_small, .promotion-list-name .slds-text-heading_small{
    color: var(--primary-color);
    font-size: 14px;
    font-weight: 500;
    line-height: 16px;
    padding-bottom: 4px;
}
.promotion_list .current-benefit-list-name .slds-text-title.info-text, .promotion-list-name .slds-text-title.info-text{
    color: var(--secondary-color);
    font-size: 14px;
    line-height: 16px;
    font-weight: 400;
}
/* Transaction history */
.transaction-history{
    @media only screen and (max-width:1024px){
        margin-bottom: 16px;
    }
}
.transaction-history .transaction-item{
    padding: 0px;
}
.transaction-item .slds-text-heading_small{
    font-size: 18px;
    line-height: 24px;
    color: var(--primary-color);
}
.transaction-item .info-text{
    color: var(--secondary-color);
    font-size: 16px;
    line-height: 20px;
}
.transaction-history .transaction-item .price{
    font-weight: 500;
    color: var(--primary-color);
    font-size: 18px;
}
.transaction-history .view-all{
    border: 0px;
    font-weight: bold;
    font-size: 14px;
    color: var(--primary-color);
}

.skill-builder .name a{
    color: var(--primary-color);
    text-decoration: underline;
    font-size: 12px;
}
.card {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.card .number{
    font-size: 16px;
    color: var(--primary-color);
    font-weight: 500;
}
.card .percent {
  position: relative;
}
.card svg {
  position: relative;
  width: 75px;
  height: 75px;
  transform: rotate(-90deg);
}
.card svg circle {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: #f0f0f0;
  stroke-width: 4;
  stroke-linecap: round;
}
.card svg circle:last-of-type {
  stroke-dasharray: 190px;
  stroke-dashoffset: calc(190px - (190px * var(--percent)) / 100);
  stroke: #3498db; 
}
.card .number {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.card:nth-child(1) svg circle:last-of-type {
  stroke: var(--primary-color);
}
.card:nth-child(2) svg circle:last-of-type {
  stroke: var(--disabled-color);
}
/* Training Tabs */
.training-tab{
    background: transparent;
}
.training-tab .slds-tabs_default__nav{
    border-bottom: 1px solid rgba(0, 0, 0, 0.09);
}
.training-tab .slds-tabs_default__item{
    margin-left: 16px;
}
.training-tab li a.slds-tabs_default__link{
    text-transform: capitalize;
    color: var(--secondary-color);
    font-size: 18px;
    font-weight: 500;
    &:hover{
        text-decoration: none;
    }
}
.training-tab li.slds-is-active a.slds-tabs_default__link{
    color: var(--primary-color);
}
.training-tab li.slds-is-active::after{
    background-color: var(--progress-bar-value-color);
    height: 3px;
}
.training-tab .progress-status{
    color: var(--primary-color);
    font-size: 18px;
    font-weight: 400;
    line-height: 20px;
}
.training-tab .skill-builder-btn{
    border: 1px solid var(--progress-bar-value-color);
    border-radius: 16px;
    padding: 8px 16px;
    font-size: 14px;
    line-height: 20px;
    color: var(--progress-bar-value-color);
}
.training-tab .skill-builder-btn img{
    vertical-align: middle;
    margin-left: 8px;
}
.lesson-container .lesson-name{
    font-size: 14px;
    color: var(--primary-color);
    font-weight: 400;
}
.lesson-container .lesson-name span.status{
    color: var(--secondary-color);
}
.lesson-container .lesson-card{
    width: 100%;
    height: 150px;
    border-radius: 4px;
    background: #989898 url(../HTML/images/complete-lesson.svg) no-repeat center center;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}
.lesson-container .lesson-card.lesson-plan{
    background: var(--black-color) url(../HTML/images/lesson-plan.svg) no-repeat center center;
}
.logged-container .table-container{
    @media only screen and (max-width:1024px){
        overflow: auto;
    }
}
.logged-row .logged-btn{
    @media only screen and (max-width:1024px){
        display: none;
    }
}
.logged-row .logged-btn.team-member-edit{
    @media only screen and (max-width:1024px){
        display: flex;
        align-items: center;
        position: absolute;
        right: 16px;
        width: 20px;
    }
}
.logged-row.team-member .secondary-btn{
    @media only screen and (max-width:1024px){
        font-size: 0px;
        background: transparent url(../images/pencil-Icon.svg) no-repeat right top;
        width: 20px;        
        height: 20px;
        background-size: 16px 16px;
    }
}
.logged-row.team-member .secondary-btn:focus{
    border: 0px;
}
@media only screen and (max-width:1024px){
    .table-container{
        overflow: hidden;
        overflow-x: auto;
        max-width: calc(100vw - 40px);
        display: block;
    }
}

.logged-table{
    border: 0px;
    background: transparent;
    max-width: 100vw;
}
@media only screen and (max-width:1024px){
    .logged-table{
        border: 0px;
        background: transparent;
        max-width: calc(100vw - 20px);
        overflow: hidden;
        display: block;
        overflow-x: auto;
    }
}
.logged-table thead th{
    border-bottom: 1px solid rgba(0,0,0,0.09);
    padding: 16px;
    font-size: 14px;
    color: var(--primary-color);
    font-weight: 500;
    background: transparent;
}
.logged-table tbody td{
    padding: 16px;
    font-size: 16px;
    color: var(--primary-color);
    border: 0px;
}
.logged-table tbody tr:nth-child(even) td{
    background: rgba(0, 0, 0, 0.02);
}
.account-details{
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.09);
}
@media only screen and (max-width:1024px){
        .account-details{
            border-bottom: 0px;
            padding-bottom: 0px;
        }
    }

@media only screen and (max-width:1024px){
    dl.label-name{
        margin-bottom: 16px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.09);
        padding-bottom: 8px;
        margin-top: 16px;
}
}
.label-name dt, .label-name dd{
    font-size: 20px;
    line-height: 24px;
    color: var(--secondary-color);
    font-weight: 400;
    margin-bottom: 16px;
    @media only screen and (max-width:1024px){
        margin-bottom: 8px;
        font-size: 14px;
        line-height: 16px;
    }
}

.label-name dt{
    @media only screen and (max-width:1024px){
        width: 40% !important;
        white-space: normal;
        ;
    }
}
.label-name dd{
    font-weight: 500;
    @media only screen and (max-width:1024px){
      width: 60% !important;  
      text-overflow: unset;
      white-space: normal;
    }
}

.purchase-list .upload-receipt .slds-button.slds-button_neutral{
    background: rgba(0, 0, 0, 0.06);
    background-size: 10px 10px;
    border-radius: 16px;
    font-size: 14px;
    line-height: 16px;
    padding: 8px 16px 8px 16px;
    color: var(--primary-color);
    border: 0px;
    font-weight: 500;
    &:hover{
        background-color: rgb(224 224 224);
        color: var(--primary-color); 
    }  
}
.purchase-list .purchase-card{
    margin-left: -5px;
    margin-right: -5px;
}
/*Upload receipt*/
.interactions-region .interactions-component .slds-modal__content{
    border-radius: 12px;
    background: var(--white-color);
    box-shadow: 0 0 0 0.4px rgba(0, 0, 0, 0.20) inset, 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.11), 0 6.4px 14.4px 0 rgba(0, 0, 0, 0.13);
    padding: 24px;
}
.receipt-uploader-popup .slds-modal__content, .purchase-data-popup .slds-modal__content{
    position: absolute;
    left: 50%;
    top: 50%;
    width: 95%;
    transform: translate(-50%, -50%);
    margin: 0 auto;
    border-radius: 12px !important;
    box-shadow: 0 0 0 0.4px rgba(0, 0, 0, 0.20) inset, 0 1.2px 3.6px 0 rgba(0, 0, 0, 0.11), 0 6.4px 14.4px 0 rgba(0, 0, 0, 0.13) !important;
}
.receipt-uploader-popup .slds-modal__content .slds-file-selector.slds-file-selector_files{
    width: 100%;
}
.receipt-uploader-popup .slds-modal__content .slds-file-selector.slds-file-selector_files .slds-file-selector__dropzone{
    width: 100%;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-background);
    border: 2px dashed var(--border-dividers);
    border-radius: 4px;
}
.receipt-uploader-popup .slds-modal__content .slds-file-selector__dropzone span.slds-file-selector__button.slds-button.slds-button_neutral{
    font-size: 0px;
    border: 0px;
    padding-right: 0px;
    padding-left: 0px;
    cursor: pointer;
    background: transparent;
    box-shadow: none;
    &:hover, &:focus, &:visited, &:active, &:focus-visible{
        background: transparent;
        outline: none;
        border: 0px;
        box-shadow: none;
    }
    &::after{
        content: 'Click to Upload';
        font-size: 16px;
        color: var(--link-color);
        line-height: 20px;
        font-weight: 500;
    }
}
.receipt-uploader-popup .slds-modal__content .slds-file-selector__dropzone .slds-file-selector__text .slds-medium-show{
    font-size: 16px;
    line-height: 20px;
    font-weight: 500;
    color: var(--secondary-color);
}
.receipt-uploader-popup .slds-modal__content .slds-file-selector__dropzone span.slds-file-selector__button.slds-button.slds-button_neutral .slds-button__icon{
    display: none;
}
.receipt-uploader-popup .slds-modal__content .slds-form-element{
    margin-bottom: 0px;
}
.receipt-uploader-popup .slds-modal__content .slds-button.slds-button_brand.slds-button_stretch{
    background: var(--link-color);
    border-radius: 24px;
    font-size: 18px;
    line-height: 24px;
    border: 0px;
    height: 48px;
}
.receipt-uploader-popup .slds-modal__content .slds-button.slds-button_brand.slds-button_stretch lightning-primitive-icon::before{
    content: '';
    background: url(../images/image-Icon.svg) no-repeat left center;
    width: 24px;
    height: 24px;
    margin-right: 10px;
    display: inline-block;
    vertical-align: middle;
}
.receipt-uploader-popup .slds-modal__content .slds-button.slds-button_brand.slds-button_stretch svg{
    display: none;
}
.upload-receipt button.slds-button.slds-button_icon .slds-button__icon{
    width: 16px;
    height: 16px;
    fill: var(--black-color);
    @media only screen and (max-width:1024px){
        width: 12px;
        height: 12px;
    }
}

/*Sales Table*/
.logged-container .slds-scrollable_y::before{
    display: none;
}
.logged-container .slds-table_header-fixed_container{
    padding-top: 48px;
}
.logged-container .slds-cell-fixed{
    background: transparent;
    border-bottom: 1px solid rgba(0, 0, 0, 0.09);
}
.logged-container .slds-resizable__handle{
    display: none;
}
.logged-container .slds-th__action{
    height: 48px;
    &:hover{
        background: transparent;
        color: var(--primary-color);
    }
}
.logged-container .slds-th__action .slds-truncate{
    font-size: 14px;
    font-weight: 500;
    line-height: 16px;
    color: var(--primary-color);
}
.logged-container .slds-table--bordered, 
.logged-container .slds-table_bordered{
    border:0px;
}
.logged-container .slds-table--bordered tbody td, 
.logged-container .slds-table--bordered tbody th, 
.logged-container .slds-table_bordered tbody td, 
.logged-container .slds-table_bordered tbody th{
    padding: 14px 16px;
    color: var(--primary-color);
    font-size: 16px;
    line-height: 20px;
    font-weight: 500;
    border: 0px;
}
.logged-container  .slds-table tbody tr:nth-child(odd) td, 
.logged-container  .slds-table tbody tr:nth-child(odd) th{
    background: rgba(0, 0, 0, 0.02);
}
.logged-container  .slds-table tbody tr:nth-child(even) td, 
.logged-container  .slds-table tbody tr:nth-child(even) th{
    background: #ececec;
}
.logged-container .slds-table tbody tr:hover, 
.logged-container .slds-table tbody tr:hover{
    border: 0px;
    outline: 0px;
}
.logged-container .slds-table--bordered tbody .slds-truncate a, 
.logged-container .slds-table_bordered tbody .slds-truncate a{
    color: var(--primary-color);
    font-size: 16px;
    line-height: 20px;
    font-weight: 500;
}

/*Upload Data Form*/
.purchase-data-popup .slds-modal__content.modalcontent{
    padding: 24px 8px;
    @media only scree and (max-width:1024px){
        padding: 16px 4px;
    }
}
.purchase-data-form .slds-card__header{
    padding-top: 0px;
}
.purchase-data-form .slds-card__body{
    margin-bottom: 0px;
}
.purchase-data-form h2{
    font-size: 24px;
    color: var(--primary-color);
    line-height: 28px;
    font-weight: 500;
}
.purchase-data-popup .purchase-data-form .slds-button.slds-button_brand{
    width: auto;
}
.purchase-data-form .slds-form-element__label, .purchase-data-form .label-row slot{
    font-size: 12px;
    color: var(--secondary-color);
    line-height: 16px;
    font-weight: 400;
}
.purchase-data-form .label-row slot .slds-form-element__icon{
    padding-top: 0px;
    padding-left: 4px;
    line-height: 16px;
}
.purchase-data-form .slds-input-has-icon .slds-input__icon{
    line-height: 14px;
}
.purchase-data-form .slds-input, .purchase-data-form .slds-select{
    border-radius: 4px;
    border: 1px solid rgba(0, 0, 0, 0.90);
    padding: 8px 12px;
    height: 32px;
    font-size: 14px;
    color: var(--secondary-color);
    line-height: 16px;
    font-weight: 400;
    &:focus, &:active{
        box-shadow: none;
    }
}
.purchase-data-form .slds-form-element__control.slds-grow.slds-input-has-icon svg{
    display: none;
}
.purchase-data-form button.slds-button.slds-button_icon .slds-button__icon{
    fill: var(--secondary-color);
}
.purchase-data-form .slds-button{
    font-size: 14px;
    line-height: 16px;
    width: auto;
    background: rgba(0, 0, 0, 0.06);
    color: var(--primary-color);
    padding: 8px 16px;
    border: 0px;
}
.purchase-data-form .slds-button.slds-button_brand{
    font-size: 14px;
    font-weight: 500;
    line-height: 16px;
    background: var(--link-color);
    color: var(--white-color);
    border-radius: 16px;
}
.purchase-data-form .slds-button.slds-button_icon{
    background: transparent;
    padding: 0;
    color: var(--secondary-color);
}
.purchase-data-form .delete-icon button, .purchase-data-form .delete-icon button svg{
    width: 20px !important;
    height: 20px !important;
}
.purchase-data-form .add-product button.slds-button{
    background: transparent;
    padding-left: 0px;
    &:hover, &:focus {
        background: transparent;
        border: 0px;
        box-shadow: none;
        text-decoration: none;
    }
    &::after{
        display: none;
    }
}
.purchase-data-form button.slds-input_faux.slds-combobox__input.slds-combobox__input-value{
    background: var(--white-color);
    color: var(--secondary-color);
    justify-content: flex-start;
    border-radius: 4px;
    border: 1px solid rgba(0, 0, 0, 0.90);
    padding: 8px 12px 8px 12px;
    font-size: 14px;
    line-height: 16px;
    box-shadow: none;
    align-items: center;
}

/*Invite Team member */
.slds-modal__header, .slds-modal__footer{
    border: 0px;
    box-shadow: 0px;
}
.invite-team-member-popup-header .slds-modal__header{
    padding: 24px;
    padding-bottom: 0px;
}
.invite-team-member-popup .slds-modal__content{
    padding: 24px;
    padding-bottom: 0px;
    padding-right: 0px;
}
.invite-team-member-popup .slds-form-element__label{
    font-size: 14px;
    color: var(--secondary-color);
    font-weight: 400;
}
.invite-team-member-popup-footer .slds-modal__footer{
    padding: 24px;
    padding-top: 16px;
}
.invite-team-member-popup-header h1{
    text-align: left;
    font-size: 24px !important;
    color: var(--primary-color) !important;
    font-weight: 500 !important;
    line-height: 28px !important;
    &:focus-visible{
        border: 0px;
        box-shadow: 0px;
    }
}

/*Purcahse Card List*/
.purchase-card-list .slds-card{
	border-radius: 8px;
	background: var(--white-color);
	box-shadow: 0 0 0 0.4px rgba(0, 0, 0, 0.20) inset, 0 0.3px 0.9px 0 rgba(0, 0, 0, 0.10), 0 1.6px 3.6px 0 rgba(0, 0, 0, 0.13);
    border: 0px;
    padding: 24px;
    @media only screen and (max-width: 1024px){
        padding: 16px;
    }
}
.purchase-card-list .slds-card__header.slds-grid{
    padding: 0px;
    margin: 0px;
}
.purchase-card-list .slds-card .slds-card__body{
    margin: 0px;
}
.purchase-card-list .program-label{
    font-size: 14px;
    line-height: 16px;
    font-weight: 400;
    color: var(--primary-color);
    margin-bottom: 4px;
}
.purchase-card-list .purchase-title{
    color: var(--primary-color);
    font-size: 20px;
    line-height: 24px;
    font-weight: 500;
    @media only screen and (max-width: 1024px){
        font-size: 16px;
        line-height: 20px;
    }
}
.purchase-card-list .purchase-list{
    padding-top: 8px;
}
.purchase-card-list .purchase-row{
    border-bottom: 1px solid rgba(0, 0, 0, 0.09);
    padding: 16px 0;
    @media only screen and (max-width: 1024px){
        padding: 8px 0;
    }
}
.purchase-card-list .purchase-store, .purchase-card-list .purchase-price{
    font-size: 18px;
    line-height: 24px;
    font-weight: 500;
    color: var(--primary-color);
    margin-bottom: 4px;
    @media only screen and (max-width: 1024px){
        font-size: 16px;
        line-height: 20px;
    }
}
.purchase-card-list .purchase-date{
    color: var(--secondary-color);
    font-size: 16px;
    line-height: 20px;
    font-weight: 400;
    @media only screen and (max-width: 1024px){
        font-size: 14px;
        line-height: 16px;
    }
}
.purchase-card-list .view-all-link{
    padding: 16px 16px 0 8px;
    @media only screen and (max-width: 1024px){
        padding: 8px 8px 0 0px;
    }
}
.purchase-card-list .view-all-link .slds-button{
    padding: 0;
    font-size: 14px;
    color: var(--primary-color);
    line-height: 16px;
    font-weight: 500;
    &:hover, &:focus, &:active{
        background: transparent;
        border: 0px;
        box-shadow: none;
        color: var(--primary-color);
        text-decoration: none;
    }
    &::after{
        display: none;
    }
}

/*Logout Conatiner*/
.logout-container{
    float: right;
}
.logout-container .slds-button{
    display: block;
    width: 220px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 20px;
    text-align: right;
    color: var(--black-color);
    line-height: 24px;
    font-size: 20px;
    transition: none;
    &:hover, &:focus, &:active{
        background: transparent;
        border: 0px;
        box-shadow: none;
        text-decoration: none;
        transition: none;
    }
    @media only screen and (max-width: 1024px){
        width: 120px;
        padding-left: 10px;
    }
}
.logout-container lightning-primitive-icon{
    position: absolute;
    right: 0px;
}
.logout-container .slds-dropdown__item a{
    background: var(--white-color);
    border: 0px;
    font-size: 16px;
    color: var(--primary-color);
    box-shadow: none;
}

.promotion_box button.slds-button_brand:hover{
	background:#063c7c;
}
.receipt-uploader-popup .slds-modal__content .slds-button.slds-button_brand.slds-button_stretch:hover{
	background:#063c7c;
}