﻿#serial-history-wrapper {
    width: 55%;
    max-width: 1000px;
    margin: 1.5rem auto;
    padding: 2rem;
    background: #ffffff;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

    #serial-history-wrapper h5 {
        color: #002b5c;
        font-size: 1.1rem;
        font-weight: 600;
        padding-bottom: 0.5rem;
        margin-bottom: 1.25rem;
        border-bottom: 1px solid #ccc;
        margin-top: 1.5rem;
    }

        #serial-history-wrapper h5:first-of-type {
            margin-top: 0;
        }

    #serial-history-wrapper .form-group.row {
        display: flex !important;
        align-items: flex-start;
        margin-bottom: 0.1rem !important;
        padding: 0 !important;
    }

    #serial-history-wrapper .col-form-label {
        flex: 0 0 170px;
        width: 170px;
        padding: 0 1rem 0 0 !important;
        font-weight: 400 !important;
        color: #000000 !important;
        text-align: left !important;
        line-height: 1.5;
    }

    #serial-history-wrapper .form-control-plaintext {
        color: #002b5c !important;
        font-weight: 400 !important;
        line-height: 1.5;
        font-size: 0.8rem !important;
        font-family: inherit !important;
        padding: 0 !important;
        border: none !important;
        background: none !important;
        box-shadow: none !important;
    }

    #serial-history-wrapper .form-group.row > div {
        padding: 0 !important;
    }

    #serial-history-wrapper .form-check-input {
        margin-top: 0.2rem;
        border-color: #999;
    }

@media (max-width: 1200px) {
    #serial-history-wrapper {
        width: 65%;
    }
}

@media (max-width: 500px) {
    #serial-history-wrapper {
        width: 80%;
        border-left: none;
        border-right: none;
        box-shadow: none;
        border-radius: 0;
    }

        #serial-history-wrapper .form-group.row {
            flex-direction: column;
            align-items: stretch;
            margin-bottom: 1rem !important;
        }

        #serial-history-wrapper .col-form-label {
            width: 100%;
            flex-basis: auto;
            font-weight: 600 !important;
            margin-bottom: 0.25rem;
        }
}
