.channel-letter-modal-container {
    background-color: #fff;
}

div.channel-letter {
    background-color: #fff!important;
}

.channel-letter-container .channel-letter-header {
    display: block;
    background-color: #fff;
    margin: 5px;
}

.channel-letter-details-container {
    display: block;
   /* height: 650px;*/
    
}

    .channel-letter-details-container.add-details {
       
    }

.channel-letter-data {
    display: block;
}


.channel-letter-description {
    padding: 10px;
  
}

.channel-details {
    margin-bottom:10px;
}

    .channel-details .channel-description-label {
        font-weight: bold;
        font-size: 12px;
        color: #414141;
        margin-right: 5px;
    }

.channel-details .add-label {
    font-size: 12px;
    font-weight: 600;
    color: #414141;
    margin-right: 5px;
}

.channel-letter-information .channel-details {
    margin-top: 1px;
    float: left;
    margin-right: 15px;
}

.channel-button-container {
    margin-top: 14px;
    margin-left: 5px;
    background-color: #fff;
}

.channelNoteForm .span8 {
    width: 720px;
    margin-left: 0px !important;
}

.channelNoteForm textarea {
    width: 820px;
    background-color: #fff;
}

.channel-letter-data .form-group {
    margin-bottom: 10px;
}

.channel-letter-modal-container label {
    font-size: 12px;
    font-weight: 600;
    color: #414141;
    margin-bottom: 2px;
}

.channel-letter-modal-container .form-inline label {
    display:block;
}

.channel-letter-data .span3 {
    width: 270px !important;
}

.channel-letter-data .span4 {
    width: 280px !important;
}



.flex-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.channel-details {
    margin-right: 20px;
}

.ul-compliance-wrapper {
    display: flex;
    align-items: center;
}

.ul-logo-container {
    margin-right: 10px;
}

.ul-logo {
    width: 40px; /* Adjust the size of the UL logo to align with the height of the inputs */
    height: auto;
}

.ul-info {
    display: flex;
    align-items: center;
    gap: 10px; /* Space between the checkbox and UL number input */
}

.ul-number-input {
    width: 150px;
}

/* Scope all styles to channel-letter-modal-container to avoid affecting other pages */
.channel-letter-modal-container {
    font-family: Arial, sans-serif; /* Use a clean, modern font */
    color: #333; /* Use a dark gray for text */
}

    /* Add subtle styling to input fields */
    .channel-letter-modal-container .form-control {
        border-radius: 4px; /* Subtle rounded corners */
        padding: 5px 10px; /* Add padding for better spacing */
        border: 1px solid #ccc; /* Standard border */
        transition: border-color 0.3s ease, box-shadow 0.3s ease; /* Smooth transitions */
    }

        .channel-letter-modal-container .form-control:focus {
            border-color: #007bff; /* Highlight border on focus */
            box-shadow: 0 0 5px rgba(0, 123, 255, 0.5); /* Subtle shadow on focus */
        }

    /* Style for labels with smaller font size */
    .channel-letter-modal-container label {
        font-weight: bold;
        font-size: 12px; /* Smaller font size for a more compact look */
        color: #414141;
    }

    /* Adjust button styles for a modern look */
    .channel-letter-modal-container .btn {
        border-radius: 4px; /* Rounded corners */
        padding: 8px 15px;
        font-size: 14px;
        transition: background-color 0.3s ease, box-shadow 0.3s ease; /* Smooth hover effect */
    }

    .channel-letter-modal-container .btn-success {
        background-color: #28a745;
        border-color: #28a745;
    }

        .channel-letter-modal-container .btn-success:hover {
            background-color: #218838;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

    .channel-letter-modal-container .btn-warning {
        background-color: #ffc107;
        border-color: #ffc107;
    }

        .channel-letter-modal-container .btn-warning:hover {
            background-color: #e0a800;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

    .channel-letter-modal-container .btn-info {
        background-color: #17a2b8;
        border-color: #17a2b8;
    }

        .channel-letter-modal-container .btn-info:hover {
            background-color: #138496;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

    .channel-letter-modal-container .btn-danger {
        background-color: #dc3545;
        border-color: #dc3545;
    }

        .channel-letter-modal-container .btn-danger:hover {
            background-color: #c82333;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

    /* Styling for table or form headers */
    .channel-letter-modal-container .well-header-flat {
        background-color: #007bff; /* Primary color for a professional look */
        color: white;
        font-size: 16px;
        padding: 10px;
        border-radius: 4px 4px 0 0;
    }

    /* UL compliance section */
    .channel-letter-modal-container .ul-compliance-wrapper {
        margin-top: 15px;
    }

    .channel-letter-modal-container .ul-logo {
        width: 50px;
        height: auto;
        margin-bottom: 10px;
    }

    /* Buttons container */
    .channel-letter-modal-container .channel-button-container {
        background-color: #343a40; /* Subtle background */
        padding: 10px;
        border-top: 1px solid #ddd;
        text-align: right; /* Align buttons to the right */
    }

    /* Add hover and transition effects to buttons */
    .channel-letter-modal-container .btn {
        transition: background-color 0.2s ease, box-shadow 0.2s ease;
    }

        .channel-letter-modal-container .btn:hover {
            box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
        }

    /* Subtle shadow to main containers for a clean look */
    .channel-letter-modal-container .channel-letter-details-container {
        border: 1px solid #ddd;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
        border-radius: 4px;
        padding: 15px;
        background-color: white;
    }


/* Set the container to take full height */
.channel-letter-modal-container {
    display: flex;
    flex-direction: column;
    height: 100vh; /* Full viewport height */
}

/* Scrollable content area */
.scrollable-content {
    flex-grow: 1; /* This makes the content take up all available space between the header and the buttons */
    overflow-y: auto; /* Enable vertical scrolling */
    padding-bottom: 20px; /* Avoid content being too close to the buttons */
}

/* Fixed buttons section at the bottom */
.channel-button-container {
    display: flex;
    justify-content: flex-start;
    position: sticky;
    bottom: 0;
    background-color: #343a40; /* Same background color as the form */
    padding: 10px;
    border-top: 1px solid #ddd;
    box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.1); /* Optional shadow for better visibility */
}

    /* Ensure buttons look consistent and are positioned correctly */
    .channel-button-container .btn-group {
        margin-right: 10px;
    }