.addon-list{
   display: flex;
   flex-wrap: wrap;
   gap: 20px;
   margin-bottom: 20px;
}
.addon-list h4,
.custom-delivery-date-field label{
   width: 100%;
   font-size: 15px;
   margin: 0 0 .5em 0;
   font-weight: 500;
   color: #86bd15;
}
.addon-list .addon_item{
   width: 100%;
   display: flex;
   flex-wrap: wrap;
   gap: 0 2.5%;
}
.addon-options-row{
   width: 100%;
   display: flex;
   flex-wrap: wrap;
   gap: 0 2.5%;
}
.addon-suboptions-wrap{
   width: 100%;
}
.addon-suboptions-heading{
   width: 100%;
   font-weight: 600;
   color: #363f42;
   margin: 0 0 8px;
}
.addon-list label{
   display: flex;
   flex-direction: column;
   width: 18% !important;
   color: #363f42 !important;
   font-size: 14px !important;
   white-space: wrap !important;
   text-align: center;
}
.addon-list label .addonDiv{
   width: 100%;
   position: relative;
   border-radius: 4px;
   margin-bottom: 5px;
}
.addon-list label .imgDiv{
   position: absolute;
   left: 0;
   top: 0;
   border-radius: 4px;
   overflow: hidden;
   padding: 5px;
   width: 100%;
   height: 100%;
}
.addon-list label img{
   width: 100%;
   height: 100%;
}
.addon-list input{
   appearance: none;
   -webkit-appearance: none;
   background-color: transparent;
   border: 2px solid #dbdbdb;
   border-radius: 5px;
   cursor: pointer;
   position: relative;
   width: 100%;
}
.addon-list .onlyText input{
   position: absolute;
   top: 0;
   width: 100%;
   left: 0;
   height: 100%;
}
.addon-list input[type="checkbox"]:checked,
.addon-list input[type="radio"]:checked {
   border: 2px solid #86bd15;
}
.active .ct-swatch{
   --swatch-border-color: #1f1f1f !important;
}
.addon-list input[type="checkbox"]:checked::after {
   content: "";
   position: absolute;
   left: 5px;
   top: 1px;
   width: 6px;
   height: 12px;
   border-width: 0 3px 3px 0;
   transform: rotate(45deg);
}
.addon-category-description{
   width: 100%;
   margin: -.5em 0 1em;
   font-size: 13px;
   color: #6b7678;
}
.addon-suboptions{
   width: 100%;
   margin: 0 0 15px;
   padding: 10px 15px;
   border-left: 3px solid #86bd15;
   background: #f7faf1;
   text-align: left;
}
.suboption-group{
   margin-bottom: 10px;
   flex-wrap: wrap;
   display: flex;
   gap: 2.5%;
}
.suboption-group:last-child{
   margin-bottom: 0;
}
.suboption-group-title{
   font-weight: 500;
   color: #363f42;
   margin: 0 0 6px;
   width: 100%;
}
.suboption-limit-note{
   font-weight: 400;
   color: #6b7678;
   font-size: 13px;
}
.suboption-option{
   display: flex !important;
   flex-direction: column !important;
   width: 100% !important;
   text-align: center !important;
   color: #363f42 !important;
   font-size: 14px !important;
   margin-bottom: 6px;
   position: relative;
}
.suboption-option input[type="checkbox"]{
   margin-right: 8px;
   height: 100%;
   position: absolute;
   top: 0;
   left: 0;
}
.addon-message{
   display: flex;
   flex-direction: column;
   width: 100%;
}
.addon-message label{
   width: 100%;
   text-align: left;
   margin: 10px 0 5px;
}
.addon-message label{
   width: 100%;
   text-align: left;
   margin: 10px 0 5px;
}
.addon-message textarea{
   height: 60px;
   resize: none;
   border-radius: 6px;
   padding: 8px;
}
.navbar.bg-light{
    background-color: transparent !important;
}

@media screen and (max-width: 1199px) {
    .addon-list .addon_item.color-selection {
      gap: 0 2.3%;
   }
   .addon_item.color-selection label{
      width: 7%;
   }
}
@media screen and (max-width: 575px) {
    .addon_item.color-selection label{
      width: 10%;
   }
   .addon-list .addon_item.color-selection {
        gap: 0 2.8%;
    }
}
@media screen and (max-width: 370px){
    .addon-list .addon_item{
      gap: 0 1.3%;
   }
    .addon-list label{
        width: calc(25% - 4px);
    }
    .addon-list label{
        font-size: 11px !important;
        line-height: 18px !important;
    }
}