h1 {
    word-break: break-all;
    font-size: 24px;
}

#row-info-container {
    height: 40px;

    .i-box {
        display: flex; flex-direction: column;
        justify-content: center;
        padding: 0 10px;
        margin: 10px 0;
        font-size: small;
    }
    .i-box:not(:last-child) {
        padding-right: 10px;
        border-right: #ddd 1px solid;
    }
}

#row-info-container:not(:has(.i-box)) {
    height: 0;
}

h2 {
    font-size: medium;
}
#history-container {
    display: flex; flex-direction: column;
    gap: 10px;

    .history-wrapper {
        padding: 5px;
        /* padding-left: 25px; */
        padding-left: 0;
    }
    .history-wrapper:not(.first) {}
}
#history-container[data-history="close"] .history-wrapper:not(.first) {
    display: none;
}
#history-container[data-history="close"] + #more-history {
    width: 110px;

    #mh-less {
        display: none;
    }
} 
#history-container[data-history="open"] + #more-history {
    width: 120px;

    #mh-more {
        display: none;
    }
}
#more-history {
    /* margin-left: 15px; */

    button {
        color: gray;
    }
    span {
        font-size: small;
    }
}

#cc-container {
    display: flex; gap: 10px; flex-direction: column;
    margin-top: 10px;
    padding: 20px;
    border: 2px #ccc solid;
    border-radius: 12px;

    img {
        width: 150px;
    }
}

.pp-container {
    padding: 20px;
    border-style: solid;
    border-radius: 12px;
    border-width: 3px;
}
#pp-green {
    border-color: #3DB370;
    margin: 10px 0;
    h3 { color: #3DB370; }
}
#pp-red {
    border-color: #E60033;
    h3 { color: #E60033; }
}

#form-container {
    margin-top: 20px;
    display: flex; flex-direction: column;
    gap: 20px;
}
#dl-panel {
    display: flex; gap: 20px;
    margin: 0 auto;

    #dl-button-wrapper {
        width: fit-content;

        #submit-button {
            font-size: small;
            padding: 10px 20px !important;
        }
    }
}
#dl-panel:not(:has(input)) {
    width: 100%;

    #dl-button-wrapper {
        margin: 0 auto;
        width: 80%;
        max-width: 200px;
    }
}
@media screen and (max-width: 499px) {
    #dl-panel {
        flex-direction: column;
        width: 100%; max-width: 300px;

        #dl-panel-in {
            width: 100%;
        }
        #dl-button-wrapper {
            width: 100%; max-width: 240px;
            margin: 0 auto;
        }
    }
}
@media screen and (min-width: 500px) {
    #dl-panel-in {
        width: 240px;
    }
}