.bulk-container{
    width: 96%;
    padding: 20px;
}
.bulk-border {
    border: 1px solid #c8c2c2;
}

/* Switch container with label and toggle switch */
.switch-container {
    display: flex;
    align-items: flex-start;
    width: 100%;
    margin-bottom: 8px; /* Space between the switch and other content */
}

.all_discount_rules_div{
    width: 100%; 
    border: 1px solid lightgray; 
    border-radius: 8px; 
    margin-top: 10px;
}

.bulk_discount_field_set{
   border: 1px solid black; 
   padding: 10px; 
   width: fit-content; 
   border-radius: 6px; 
}

.bulk_discount_main_div{
    margin-bottom: 30px; 
    margin-top: 30px; 
    width: 100%; 
    display: inline-flex;
}

.bulk_discount_heading_div{
    width: 30%; 
    float: left; 
    text-align: center; 
    font-size: 16px; 
    font-weight: bold;
}

/* Label styling */
.switch-label,
.discount-rule,
.discount-application-label
{
    font-size: 16px;
    font-weight: 500;
    width: 30%; /* Set label width to 30% */
    margin-right: 10px; /* Space between label and switch */
}

/* Switch wrapper */
.switch-wrapper,
.discount-rules-wrapper,
.discount-application-options {
    width: 70%; /* Set wrapper width to 70% */
}

/* Switch Container */
.switch {
    position: relative;
    display: inline-block;
    width: 60px; /* Control the width of the switch */
    height: 30px;
}

/* Hide the default checkbox */
.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

/* The slider */
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: 0.4s;
    border-radius: 30px;
}

/* Slider handle */
.slider::before {
    position: absolute;
    content: "";
    height: 22px;
    width: 22px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: 0.4s;
    border-radius: 50%;
}

/* Change the background when checked */
input:checked + .slider {
    background-color: #4CAF50;
}

/* Move the handle when checked */
input:checked + .slider::before {
    transform: translateX(28px);
}

/* Styling for the info text */
.switch-info {
    display: block;
    font-size: 14px;
    color: #555;
    margin-top: 5px;
    text-align: left;
}

/* Discount Rules Container */
.discount-rules-container {
    display: flex;
    align-items: flex-start;
    margin-top: 15px;
    width: 100%;
}


/* Input fields container */
.discount-rules-inputs {
    width: 100%;
    display: flex;
    align-items: center;
}

/* Input group styling */
.input-group {
    display: flex;
    align-items: center;
    width: 23%;
}

/* Inline labels */
.input-group label {
    font-size: 14px;
    margin-right: 5px;
    white-space: nowrap;
}

/* Input and select field styling */
.input-group input,
.input-group select {
    padding: 4px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 4px;
    width: calc(100% - 50px); /* Adjusting width based on label size */
}

/* Adjust select width */
.input-group select {
    width: calc(100% - 55px); /* Adjust width for select field */
}

/* Discount Application Container */
.w-100 {
    display: flex;
    width: 100%;
    margin-top: 15px;
}
.w-70{
    width: 70%;
}
/* Radio button options container */
.discount-application-options {
    display: flex;
    flex-direction: column;
}

/* Radio button and label styling */
.radio-group {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}

.radio-group input[type="radio"] {
    margin-right: 8px;
}

.radio-group label {
    font-size: 14px;
    margin: 0;
}

/* Additional information styling */
.application-info {
    margin-top: 10px;
    font-size: 14px;
    color: #555;
}
.application-info small {
    display: block;
}

/* Additional styles for switch description */
.switch-description {
    display: block;
    font-size: 12px;
    color: #666;
}
.save-button {
    display: flex;
    justify-content: end;
    margin-right: 6px;
    margin-top: 8px;
}

.flex{
    display: flex;
}
.gap-30{
    gap: 30px;
}
.items-center{
    align-items: center;
}

.m-block-start-20{
    margin-block-start: 20px;
}
.mt-30{
    margin-top: 30px;
}
.mb-30{
    margin-bottom: 30px;
}
.mb-20{
    margin-bottom: 20px;
}
a.add-rule.button-link{
    font-size: 22px;
    font-weight: 600;
}

/** Tabs */
.tabs {
    display: flex;
    cursor: pointer;
    margin-bottom: 20px;
    border-bottom: 2px solid #ddd;
}

.tab {
    padding: 10px 20px;
    margin-right: 10px;
    border: 1px solid #ddd;
    border-bottom: none;
    background-color: #f7f7f7;
    transition: background-color 0.3s ease;
}
.return.tab{
    padding: 0;
    margin-right: 0;
    border: none;
   display: inline-block;

}
.tab:hover {
    background-color: #e7e7e7;
}
.return.tab:hover {
    background-color: rgba(231, 231, 231, 0.11);
}

.tab.active {

    background-color: #336374;
    border-bottom: 2px solid #fff;
    font-weight: bold;
    color: #fff;
}

/* Tab content */
.tab-content {
    display: none;
    padding: 20px;
    border: 1px solid #ddd;
    background-color: #fff;
}

.tab-content.active {
    display: block;
}

/*End Tabs*/

.rules-section {
    margin-bottom: 20px;
    width: 100%;
}
.rule-input {
    margin-top: 10px;
}

.rule-input > input[type="text"] {
    padding: 5px;
    width: 100%;
    box-sizing: border-box;
    margin-top: 5px;
    font-size: 22px;
}

.add-rule-btn:hover {
    background-color: #0056b3;
}


/* Dynamic product search */
.selected-products {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 10px;
}

.product-tag {
    display: flex;
    align-items: center;
    padding: 5px 10px;
    background-color: #0073aa;
    color: white;
    border-radius: 4px;
    cursor: default;
}

.product-tag .close-btn,
.item-tag .close-btn
{
    margin-left: 8px;
    color: #fff;
    font-weight: bold;
    cursor: pointer;
}


.suggestion-box {
    border: 1px solid #ddd;
    overflow-y: auto;
    /*position: absolute;*/
    background-color: #fff;
    z-index: 1000;
    /*width: 40%;*/
    display: none;
}

.suggestion-box> small {
    display: inline-block !important;
    padding: 5px 10px;
    font-size: 14px;
    border-radius: 3px;
}

/*
    Exclude product search by products, categories, tags
*/
.selected-items {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 10px;
}

.item-tag {
    display: flex;
    align-items: center;
    padding: 5px 10px;
    background-color: #d9534f;
    color: white;
    border-radius: 4px;
    cursor: default;
}

.suggestion-item {
    padding: 8px;
    cursor: pointer;
}
.suggestion-item:hover {
    background-color: #f0f0f0;
}


.notice{
    display: none !important;
}