.doc-box, .doc-work-box {
    --accent: #888;
}

.doc-icon {
    color: var(--accent);
    font-size: 2.8rem;
    margin-right: 3rem;
}

.card {
    height: 100%;
}

.doc-box .card-header,
.doc-work-box .card-header {
    box-shadow: none;
}

.doc-box .card-header-title,
.doc-work-box .card-header-title {
    padding-left: 3.5rem;
}

.doc-box {
    text-decoration: none;
    border: 3px solid #444;
    border-radius: 1rem;
    padding: 2rem 1.25rem 1.5rem;
    box-shadow: 4px 6px 0 rgba(0, 0, 0, 0.15);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.doc-box:hover {
    transform: translateY(-4px);
    box-shadow: 6px 10px 0 rgba(0, 0, 0, 0.2);
}

.doc-work-box {
    background: white;
    border-left: 6px dashed var(--accent, #444);
    padding: 2rem 1.25rem 1.5rem;
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
    position: relative;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.doc-info {
    margin-top: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.info-block {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    line-height: 1.4;
}

.info-icon {
    flex-shrink: 0;
    font-size: 1.2rem;
}

.control input[readonly] {
    background-color: #fde3ab;
}

@media (min-width: 550px) {
    #incorrect-field-reason-control {
        min-width: 400px;
    }
}