/**
* HEADING
*/ 
.my-account-form-subtitle {
    color: #000;
    font-size: 24px !important;
    line-height: 28.13px !important;
    margin-bottom: 42px !important;
}

/**
* MODIFIERS
*/ 
.d-none {
    display: none;
}

.d-flex {
    display: flex;
}

.d-flex-column {
    flex-direction: column;
}

.flex-wrap {
    flex-wrap: wrap;
}

.no-wrap {
    flex-wrap: nowrap;
}

.justify-center {
    justify-content: center;
}

.justify-space-between {
    justify-content: space-between;
}

.items-center {
    align-items: center;
}

.p-rel {
    position: relative;
}

.p-abs {
    position: absolute;
}

.full-w {
    width: 100%;
}

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


/**
* COMPONENTS
*/ 

/* Form group */
.form-group {
    margin-bottom: 32px !important;
}
.payment-group {
    margin-bottom: 12px !important;
}
/* Radio Buttons */
.radio-inline:has(.csc-radio) {
    margin-right: 35px !important;
}

.csc-radio {
    position: relative;
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-right: 10px;
    margin-top: -3px;
    vertical-align: middle;
    cursor: pointer;
    background: #fff;
    border: 1px solid #acacac;
    border-radius: 50%;

    input[type="radio"] {
        cursor: pointer;
        opacity: 0;
    }

    input[type="radio"]:checked+span {
        display: block;
        position: absolute;
        top: 4px;
        left: 4px;
        width: 10px;
        height: 10px;
        background-color: #fff;
        border-radius: 50%;
    }

    &:has(input[type="radio"]:checked) {
        background: #1b0000;
    }
}


/* Input */

.input-group-md {
    width: 440px !important;
}

.has-float-label input:placeholder-shown:not(:focus)+*, .has-float-label select:placeholder-shown:not(:focus)+*, .has-float-label textarea:placeholder-shown:not(:focus)+* {
    font-size: 16px !important;
    opacity: .5 !important;
    top: 15px !important;
    left: 15px !important;
}

.has-float-label input, .has-float-label select, .has-float-label textarea {
    color: #000 !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    padding-top: 16px !important;
    padding-left: 16px !important;
    margin-bottom: 2px !important;
    border: 1px solid #acacac !important;
    border-radius: 20px !important;
}

.has-float-label input, .has-float-label select {
    height: 48px !important;
}

.has-float-label select {
    padding-bottom: 12px !important;
}

.has-float-label label, .has-float-label>span {
    padding: 0 8px;
    background: #fff;
    border-radius: 8px;
    position: absolute;
	left: 16px!important;
	top: -10px!important;	
    cursor: text;
    font-size: 12px;
    font-weight: 400;
    opacity: 1;
    color: #8d8d8d;
    -webkit-transition: all .2s;
    transition: all .2s;
    z-index: 10;
}


.has-float-default {
    display: block;
    position: relative;
}
.has-float-default label,  .has-float-default>span {
    position: absolute;
    top: -31px;
    right: 32px;
    padding: 6px;
    font-size: 16px;
    font-weight: 700;
    line-height: 18.75px;
    opacity: 1;
    border-radius: 30px;
    background: linear-gradient(90deg, #11A9EE 0%, #28FF9D 100%);
}

/* Switcher with text */

.csc-switcher-container {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    width: fit-content;
    border: 1px solid #cecece;
    border-radius: 20px;
    background: #fff;
    color: #000;
    cursor: pointer;
}

.csc-switcher-container-sm {
    
    &>div {
        font-size: 16px !important;
        padding: 9px 6px !important;
        width: 75px !important;
    }
}

.csc-switcher-container::before {
    content: '';
    position: absolute;
    width: 50%;
    height: 100%;
    left: 0%;
    border-radius:20px;
    background: linear-gradient(to right, #11A9EE, #28FF9D);
    transition: all 0.3s;
}

.csc-switcher-checkbox:checked + .csc-switcher-container::before {
    left: 50%;
}

.csc-switcher-container div {
    font-weight: 500 !important;
    padding: 9px 52px;
    text-align: center;
    z-index: 1;
}

.csc-switcher-container .date-switcher {
    font-weight: 500 !important;
    padding: 9px 20px;
    text-align: center;
    z-index: 1;
}
.csc-switcher-checkbox {
    display: none;
}

.csc-switcher-checkbox:checked + .csc-switcher-container div:first-child{
    color: #000;
    transition: color 0.3s;
}
  
.csc-switcher-checkbox:checked + .csc-switcher-container div:last-child{
    color: #000;
    transition: color 0.3s;
}
  
.csc-switcher-checkbox + .csc-switcher-container div:first-child{
    color: #000;
    transition: color 0.3s;
}
  
.csc-switcher-checkbox + .csc-switcher-container div:last-child{
    color: #000;
    transition: color 0.3s;
}


/* Input date with icon */
.input-group-btn {
    box-sizing: border-box !important;
    width: auto;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 10;
}

.input-group-btn .btn {
    box-sizing: border-box !important;
    height: calc(100% - 2px) !important;
    width: 52px !important;
    border: 1px solid #acacac !important;
    border-top-right-radius: 20px !important;
    border-bottom-right-radius: 20px !important;
    background-color: #fff !important;
    color: #000 !important;
}

.input-group-btn .btn img {
    position: relative;
    right: 3px;
}

/* Input password */
#show_hide_password label + .input-group-btn .btn .password-eye-close {
    display: none;
}

/* Button */

.csc-btn {
    font-size: 15px;
    line-height: 27px;
    font-family: 'Roboto Flex Variable', sans-serif !important;
    font-weight: 700 !important;
    border: 0;
    padding: 8px 30px;
    border-radius: 60px;
}

.csc-btn:hover, .csc-btn:active, .csc-btn:focus {
    border: 0 !important;
    outline: none !important;
}

.csc-btn-primary {
    background: linear-gradient(to right, #11A9EE, #28FF9D);
}


/* Textarea */

.csc-textarea {
    resize: none;
    height: 144px;
}

/* Accordion */

.csc-accordion {
    border-top: 1px solid #000;

    &:last-of-type {
        border-bottom: 1px solid #000;
        margin-bottom: 32px;
    }

    &.is-open {
        padding-bottom: 0 !important;
    }

    /* &.is-open .csc-accordion-body {
        display: block;
    } */
}

.csc-accordion-header {
    display: flex;
    justify-content: space-between;
    cursor: pointer;
    padding: 32px 0;
}

.csc-accordion-header__title {
    font-size: 22px !important;
    line-height: 25.78px !important;
    margin: 0 !important;
}

.csc-accordion-header__subtitle {
    font-size: 16px !important;
    line-height: 18.75px !important;
    margin: 0 !important;
}

.csc-accordion-body {
    display: block;
}


/* Profile picture uploader */

.csc-profile-picture-container {
    width: 160px;
    position: relative;
}
  
.csc-profile-picture-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: inline-block;
    max-width: 100%;
}
  
.csc-profile-picture__file-upload {
    display: none;
}
  
.csc-profile-picture__wrapper-circle {
    border-radius: 100% !important;
    overflow: hidden;
    width: 160px;
    height: 160px;
    background: linear-gradient(to right, #11A9EE, #28FF9D);
}
  
.csc-profile-picture__edit-wrapper {
    width: 40px;
    height: 40px;
    cursor: pointer;
    position: absolute;
    top: 4.5px;
    right: 7px;
    background-color: #000;
    border-radius: 32px;
    padding: 8px;
    transition: all .3s cubic-bezier(.175, .885, .32, 1.275);
}
  
.csc-profile-picture__edit-wrapper:hover {
    transition: all .3s cubic-bezier(.175, .885, .32, 1.275);
    background-color: #252525;
}
  
.csc-profile-picture__edit-btn {
    width: 24px;
    height: 24px;
}
  
.csc-profile-picture__edit-btn:hover {
    transition: all .3s cubic-bezier(.175, .885, .32, 1.275);
}

.slider-container {
    width: 100%;
    margin: auto;
    max-width: 550px;
    text-align: center;
    padding-top: 30px;
}
.slider {
    -webkit-appearance: none;
    width: 100%;
    height: 8px;
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
    border-radius: 10px;
    border: 1px solid #D8D8D8;
    position: relative;
}
.slider:hover {
    opacity: 1;
}
.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 34px;
    height: 34px;
    background-image: url(../../img/cofee-icon.svg);
    background-size: auto;
    background-repeat: no-repeat;
    cursor: pointer;
    border-radius: 50%;
    position: relative;
    z-index: 1;
}

.icon-container {
    font-size: 14px;
    font-weight: bold;
    color: #000;
    background-image: url(../../img/cofee-notification.svg);
    background-size: cover;
    background-repeat: no-repeat;
    white-space: nowrap;
    padding: 2px 5px;
    display: flex;
    width: 8%;
    height: auto;
    flex-direction: column;
    align-items: center;
}

.slider::-moz-range-thumb {
    width: 25px;
    height: 25px;
    background: #4CAF50;
    cursor: pointer;
    border-radius: 50%;
    position: relative;
    z-index: 1;
}

.icon-container {
    position: relative;
    top: -10px;
    transform: translate(-28%, -2%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}
.indicators-container {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    padding: 0 10px;
    font-weight: 500;
    line-height: 27px;
    color:#8A8A8A ;
}
.confirmation-card-footer .calc-btn {
    margin: auto;
    display: flex;
    padding: 10px;
    align-items: center;
    width: 20%;
    padding-top: 30px
}
.icon-image {
    width: 50px; 
    height: 50px; 
    position: relative;
}

.slider-value {
    position: absolute;
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -4%);
    font-size: 14px;
    font-weight: bold;
    color: #000;
    white-space: nowrap;
    padding: 2px 5px;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 3px;
    z-index: 3;
}

#value {
    display: block;
    margin-top: 20px;
    font-size: 24px;
}

.catched-carbon__value-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-right: 2.5px;
    padding-bottom: 10px;
}

.payment-methods-container {
    display: flex;
    justify-content: space-between;
    padding: 20px;
}

.left-column {
    flex: 1;
    margin: 0 10px;
}

.right-column {
    flex: 1;
    margin: 0 10px;
    max-width: 70%;
}
.add-payment-method {
    text-align: center;
    font-weight: bold;
}

.selected-payment-method {
    border: 1px solid #ddd;
    padding: 20px;
}

.selected { 
    cursor: pointer;
    transition: background-color 0.3s ease;
    padding: 15px;
    border-radius: 40px;
    color: #000;
    background: #fff;
    border: 1px solid #DDDDDD;
}
.selected.active {
    box-shadow: 0px 0px 10px 0px #00000040;   
    position: relative; 
    border: #11A9EE;
}

.selected.active::before {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: inherit;
    padding: 2px;
    background: linear-gradient(90deg, #11A9EE 0%, #28FF9D 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out !important;
    mask-composite: exclude !important;
    z-index: 0;
}

.selected:hover {
    background-color: #f0f0f0;
}

.payment-header {
    font-size: 75px;
    font-weight: 700;
    line-height: 87.89px;
}
.csc-card {
    resize: none;
}

.card-content {
    display: flex;
    align-items: center;
}

.card-logo {
    width: 40%;
    padding: 10px;
}

.card-content .payment-card-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.card-content  .payment-card-info .card-title{
    font-size: 22px;
    color: #000000;
    margin-bottom: 0 !important;
}
.card-title {
    font-weight: bold;
    font-size: 16px;
}

.card-type,
.card-ending {
    font-size: 16px;
    color: #000000;
    font-weight: 300;
}

label, .label {
    text-align: left;
}
div#payment-details .selected .csc-card .card-content .payment-card-info {
    position: relative;
    top: -63px;
}
  /* view mobile  */
@media (max-width: 1024px) { 
    div#payment-details .selected .csc-card .card-content .payment-card-info {
        position: relative;
        top: 0;
    }
}
@media (max-width: 768px) {
    .payment-methods-container {
        flex-direction: column;
        padding: 0;
    }
    div#payment-details .selected .csc-card .card-content .payment-card-info {
        position: relative;
        top: 0;
    }
    .left-column {
        max-width: 100%;
        margin: 0;
    }

    .right-column {
        max-width: 100%;
        margin: 0; 
        margin-top: 20px;
    }
    .payment-header {
        font-size: 32px;
        font-weight: 700;
        line-height: 37.5px;
    }
}

/* Submit Button */

button.form-control-submit.float-xs-right {
    float: none !important;
    background-color: #000;
    color: #fff;
    border-radius: 80px;
    text-transform: none;
    font-weight: 500;
    padding-left: 40px;
    padding-right: 40px;
}

button.form-control-submit.float-xs-right:active, 
button.form-control-submit.float-xs-right:focus {
    background-color: #000;
    color: #fff;
}


/* Flat Button */

.csc-flat-btn {
    box-sizing: border-box;
    display: block;
    border: 0;
    border-radius: 30px;;
    padding: 8px;
    font-size: 20px;
    line-height: 23.44px;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 700;
    height: 54px;

    &.bg-green {
        background-color: #28FE9C;
        color: #002C4F;
    }
}

.csc-flat-btn-large {
    width: 100%;
}

@media screen and (max-width: 767px) {
    .csc-flat-btn {
        border-radius: 20px;;
        padding: 8px;
        font-size: 14px;
        line-height: 16.41px;
        height: 32px;

    }
}

/* Input Range */
.csc-range-input {
    width: 400px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

@media screen and (max-width: 767px) {
    .csc-range-input {
        width: 280px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
}


.csc-range-input span {
    position: relative;
    margin: 15px -5px 0 -5px;
    flex-basis: 0;
    flex-grow: 1;
    text-align: center;
    font-size: 13px;
    color: #8a8a8a;
    user-select: none;
}

.csc-range-input span::after {
    content: "";
    position: absolute;
    width: 1px;
    height: 3px;
    left: 0;
    right: 0;
    margin: auto;
    top: -12px;
    background-color: #ccc;
}

.csc-range-input input {
    width: 100%;
    margin: 5px 10px;
    position: relative;
    background-color: #fff;
    border: 1px solid #cecece;
    border-radius: 99px;
    z-index: 10;
    height: 7px;
    -webkit-appearance: none;
}

.csc-range-input input::-moz-range-thumb {
    border: none;
    height: 34px;
    width: 34px;
    border-radius: 99px;
    background-color: #fff;
    background-image: url(../../img/csc-range-input-coffee-thumb.png);
    cursor: pointer;
}

.csc-range-input input::-webkit-slider-thumb {
  box-shadow: none;
  border: none;
  height: 34px;
  width: 34px;
  border-radius: 99px;
  background-color: #fff;
  background-image: url(../../img/csc-range-input-coffee-thumb.png);
  cursor: pointer;
  -webkit-appearance: none;
}

.csc-range-tooltip-wrapper {
    width: 100%;
    position: relative;
    margin-bottom: 15px;
    padding: 0 8px;
}

.csc-range-input .csc-range-tooltip {
    position: relative;
    top: 0;
    left: 0;
    border: 1px solid #cecece;
    border-radius: 5px;
    display: inline-block;
    width: 47px;
    height: 31px;
    padding: 3px 10px;
    text-align: center;
    font-weight: bold;
    white-space: nowrap;
    color: #000;
}
  
.csc-range-input .csc-range-tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #cecece #fff #fff #fff;
}


/**
* Fix Faceted Search
*/

@media screen and (max-width: 767px) {
    #category #search_filters {
        padding-top: 45px !important;
    }
}


#category #search_filters .btn.close-push {
    width: auto !important;
}

#category #search_filters .facet .title.hidden-md-up {
    display: flex;
    align-items: center;
}

#category #search_filters .facet .title .collapse-icons {
    display: flex;
    justify-content: center;
    align-items: center;
}

#category #search_filters .facet .title[aria-expanded="false"] .collapse-icons .remove {
    display: none;
}
#category #search_filters .facet .title[aria-expanded="false"] .collapse-icons .add {
    display: block !important;
}

#category #search_filters .facet .title[aria-expanded="true"] .collapse-icons .add {
    display: none;
}

#category #search_filters .facet .collapse {
    display: none;
}

#category #search_filters .facet .collapse.in {
    display: block;
}


/* Draggable Scroll */
  
.csc-draggable-scroll:hover {
    cursor: grab;
}

.csc-draggable-scroll::-webkit-scrollbar {
    display: none;
}

/* Custom Grouped Radio Button */
.csc-radio-group {
    display: flex;
    border: 1px solid #cecece;
    border-radius: 20px;
    width: fit-content;
    background: #fff;
    
    input[type="radio"] {
        display: none;
    }
    
    label:has(input[type="radio"]) {
        background-color: #fff;
        color: #000;
        font-weight: 500 !important;
        display: inline-block;
        padding: 9px 30px;
        cursor: pointer;
        border-radius: 20px;
        margin-bottom: 0;
    }
    
    label:has(input[type="radio"]:checked) {
        /* background: linear-gradient(90deg, #11A9EE 0%, #28FF9D 100%); */
        background: #D8FC31;
    }

}

@media screen and (max-width: 767px) {
    .csc-radio-group {
        flex-direction: column;
    }
}