:root {
    --Cloudy-Grey: #736868;
    --black: #000;
    --white: #fff;
    --Green: #07a759;
    --Tealish-Green: #e8d257;
    --Soft-Peach: #eeedeb;
    --Neon-Yellow: #d0ff00;
    --Brick-Red: #d6233e;
    --Pale-Taupe: #C5937E;
    --font-headline: linear-gradient(72deg, #df2b50 0, #e36138 51%, #0dba66 100%);
    --background-neon: linear-gradient(20deg, rgb(15, 6, 32), transparent 60%), linear-gradient(200deg, rgb(12, 3, 21), transparent 70%), linear-gradient(135deg, rgb(48, 19, 96), rgb(70, 6, 50));
}
/* CSS Document */
.cart-link{
    
}
.cart-link span{
    position: absolute;
    color:var(--Brick-Red);
    font-size: 0.6rem;
    margin-top: 8px;
    font-family: math;

}
.details-section .optionBtn.selected{
    border: 2px solid var(--Green) !important;
}

.size,
.add-ons{
    cursor: pointer;
    position: relative;
}
/* Basic custom checkbox using ::before for the box */
.add-ons::before {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    width: 20px;
    height: 20px;
    border: 2px solid var(--Brick-Red);
    background-color:var(--white);
    border-radius: 4px;
}

/* Checkmark creation using ::after */
.add-ons::after {
    content: '';
    position: absolute;
    right: 7px;
    top: 2px;
    width: 6px;
    height: 12px;
    border: solid var(--white);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    opacity: 0;
    transition: opacity 0.2s;
}

/* Default border for size-card */
.size .size-card,
.add-ons .size-card {
    border: 2px solid var(--Pale-Taupe);
    border-radius: 5px;
}

/* When the .add-ons is checked, change border color of .size-card */
.size.checked .size-card,
.add-ons.checked .size-card {
    border-color:var(--Green);

}

/* Change the background and border of the checkbox (simulated) when checked */
.add-ons.checked::before {
    background-color: var(--Green);
    border-color: var(--Green);
}

/* Make the checkmark visible when checked */
.add-ons.checked::after {
    opacity: 1;
}

.optionBtn{
    text-overflow: ellipsis;
    overflow: hidden;
}
.address-row{
    
}
.address-row .address-item{
}
.address-dt-all{
    position: relative;
    float: left;
    padding: 0.5rem;
    border: 1px solid #cccccc;
    border-radius: 5px;
    margin: 0 10px 10px 0;
    width: 100%;
}
.address-dt-all h4{
    font-size: 20px;
}