.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-list label{
   display: flex;
   flex-direction: column;
   width: 18%;
   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-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;
    }
}