.yith-woocompare-widget ul.products-list{list-style:none;margin:0 0 15px}.yith-woocompare-widget ul.products-list li:not( .list_empty ){position:relative;padding:5px 0 5px 30px;border-bottom:1px solid #dfdfdf}.yith-woocompare-widget ul.products-list li .remove{position:absolute;left:3px;color:red;font-weight:400;font-size:1.2em;line-height:1.2;height:1.2em;width:1.2em;border-radius:50%;text-align:center;cursor:pointer;outline:none}.yith-woocompare-widget ul.products-list li .remove:hover{background-color:red;color:#fff}.yith-woocompare-widget ul.products-list li .title{cursor:pointer;text-transform:uppercase;font-size:12px;font-weight:400;display:block;outline:none}.yith-woocompare-widget a.compare{float:right;float:right;line-height:1;cursor:pointer;padding:8px 10px;font-size:13px;text-transform:uppercase;font-weight:700;border-radius:3px;border:0;white-space:nowrap;display:inline-block;color:#fff;background-color:#b2b2b2}.yith-woocompare-widget a.compare:hover{background-color:#303030}.yith-woocompare-widget a.clear-all{outline:none;font-size:12px}

.popup {
  position: relative;
  display: inline-block;
  cursor: pointer;
}.input-text {
    width: 100%;
    border: 1px solid #ccc;
}

/* The actual popup */
.popup .popuptext {
  visibility: hidden;
  width: 175px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  font-size: 11px;
  font-weight: 400;
  left: 50%;
  height: 100px;
  margin-left: -87.5px; /* Adjusted for half the width */
}

.popup .show {
  visibility: visible;
}



/* Default style for .noshow (visible on desktop) */
.noshow {
    display: inline-block;
}

/* Hide on tablets (screens less than 768px wide) */
@media screen and (max-width: 767px) {
    .noshow {
        display: none;
    }
}

/* Hide on mobile phones (screens less than 480px wide) */
@media screen and (max-width: 479px) {
    .noshow {
        display: none;
    }
}


.friendsboxes {
    display: flex;
    flex-direction: column; 
}

.friendsboxes label {
    display: flex;
    flex-direction: column;
    margin-bottom: 10px; 
}

.friend-input {
    border: 1px solid grey;
    padding: 5px;
    box-sizing: border-box;
    border-radius: 4px;
    margin-right: 10px;
}

/* Media query for devices wider than 768px (laptops and larger) */
@media (min-width: 768px) {
    .friendsboxes {
        flex-direction: row;
        align-items: flex-end;
        flex-wrap: wrap;
    }

    .friendsboxes label {
        flex: 1 1 auto;
        margin-right: 10px;
        margin-bottom: 0;
    }

    .friendsboxes label:last-child {
        margin-right: 0;
    }
}











.friend-container {
    display: flex;
    margin-right: 10px;
    flex-wrap: wrap;
    gap: 10px; /* Adjust the gap between friend fields */
}

.friend-fields {
    display: flex;
    align-items: center;
    margin-right: 10px;
    margin-bottom: 10px;
    flex: 1 1 calc(33.333% - 10px); /* Adjust based on the number of fields per row */
    max-width: calc(33.333% - 10px); /* Adjust maximum width */
}

.friend-fields:not(:last-of-type) {
    margin-right: 10px; /* Right margin between boxes */
}

.friend-fields label {
    margin-bottom: 5px; /* Add margin below each label */
    flex: 0 0 auto;
    margin-right: 10px;
    min-width: 100px; /* Ensure labels have minimum width */
}

.friend-fields input {
    border: 1px solid grey;
    padding: 5px;
    flex: 1 1 auto;
    margin-right: 10px;
    box-sizing: border-box;
    width: 100%; /* Ensure input takes full width */
    max-width: 100%; /* Ensure input doesn't overflow */
}

@media (max-width: 768px) {
    .friend-fields {
        flex-direction: column;
        align-items: flex-start;
        margin-bottom: 10px; /* Adjust vertical margin */
        max-width: 100%; /* Full width in mobile view */
    }

    .friend-fields:not(:last-of-type) {
        margin-right: 0; /* Remove right margin from all but the last box */
    }

    .friend-fields label {
        margin-bottom: 5px;
        margin-right: 0;
        width: 100%;
        min-width: 0; /* Reset minimum width for labels */
    }

    .friend-fields input {
        width: 100%;
        max-width: 100%; /* Ensure input doesn't overflow */
        margin-bottom: 5px; /* Add margin below each input */
    }
}