.user-info small {
    display: block;
    padding: 9px;
}
.upload-mage{
    max-height: 80px;
    max-width: 80px;
}
.header-upload {
    float: left;
    width: 90%;
    display: inline-block;
}
h3 p {
    font-size: 11px;
    display: inline-block;
}

#all_checked, #all_Dispatched_checked {
    width: 20px;   /* increase width */
    height: 20px;  /* increase height */
    transform: scale(1.1); /* scale up */
    margin-right: 5px;     /* spacing before label */
}
.checked, .Dispatched_checked{
    width: 20px;   /* increase width */
    height: 20px;  /* increase height */
    transform: scale(0.9); /* scale up */
    margin-right: 5px;     /* spacing before label */
}

.otp-options {
    display: flex;
    margin-top: 10px;
    gap: 10px; /* spacing between options */
}

.radio-option {
    position: relative;
    cursor: pointer;
    font-weight: 600;
    color: #444;
}

.radio-option input[type="radio"] {
    display: none; /* hide default radio */
}

.radio-option span {
    padding: 6px 14px;
    border: 2px solid #ccc;
    border-radius: 20px;
    transition: all 0.3s ease;
}

.radio-option input[type="radio"]:checked + span {
    background-color: #dc3545; /* Bootstrap danger red */
    color: #fff;
    border-color: #dc3545;
    box-shadow: 0 0 6px rgba(220,53,69,0.6);
}
.mapping-div {
    border: 1px solid #ddd;          /* subtle border */
    border-radius: 12px;             /* smooth rounded corners */
    padding: 20px;                   /* breathing space inside */
    background: linear-gradient(135deg, #f9f9f9, #f1f1f1); /* soft gradient */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* light shadow for depth */
    transition: transform 0.2s ease, box-shadow 0.2s ease; /* hover animation */
}

/* Hover effect */
.mapping-div:hover {
    transform: translateY(-3px);     /* slight lift */
    box-shadow: 0 6px 12px rgba(0,0,0,0.15);
    border-color: #007bff;           /* highlight border on hover */
}

/* Optional: add a subtle header style inside */
.mapping-div h3 {
    color: #007bff;                  /* Bootstrap primary color */
    font-weight: 600;
    margin-bottom: 5px;
}

.replace_div {
    border: 1px solid #e0e0e0;             /* subtle light border */
    border-radius: 10px;                   /* smooth rounded corners */
    padding: 5px;                         /* spacing inside */
    background: #ffffff;                   /* clean white background */
    color: #333333;                        /* dark gray text for readability */
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);/* soft shadow for depth */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Hover effect */
.replace_div:hover {
    transform: translateY(-2px);           /* slight lift */
    box-shadow: 0 4px 10px rgba(0,0,0,0.12);
    border-color: #007bff;                 /* highlight border on hover */
}

/* Header style inside */
.replace_div h3 {
    color: #007bff;                        /* professional blue accent */
    font-weight: 600;
    margin-bottom: 12px;
}

.stock_form {
    background: #fff;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    margin-top: 20px;
}

.stock_form b {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
    color: #1a1a1a;
}

.stock_form .form-control {
    border-radius: 6px;
    border: 1px solid #ccc;
    padding: 8px 12px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.stock_form .form-control:focus {
    border-color: #007bff;
    box-shadow: 0 0 6px rgba(0,123,255,0.25);
}

.stock_form .btn-primary {
    border-radius: 6px;
    padding: 10px 20px;
    font-weight: 600;
}