.card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.card-content {
    flex: 1;
}

.card-footer {
    margin-top: auto;
}

.box {
    margin-top: 1vw;
}

.table th, .table td {
    padding: 10px;
}

#task-table th, #task-table td {
    padding: 10px 14px 10px 14px;
}

#task-table th {
    background-color: #f4f4f4;
    font-size: 1.1rem;
}

.mongo-diagram {
    width: 100%;
    max-width: 100%;
    background: #f6f6f6;
    border-radius: 10px;
    padding: 10px 12px;

    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;

    display: block;
    margin: 0;
}

.mongo-diagram pre {
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
}

.mongo-diagram code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    line-height: 0.8;
    letter-spacing: 0.2px;
    color: #111;
    display: inline-block;
    white-space: pre;
}

.mongo-diagram [data-mongo="line"] { display: block; }

.mongo-diagram [data-mongo-indent="1"] { padding-left: 22px; }
.mongo-diagram [data-mongo-indent="2"] { padding-left: 44px; }
.mongo-diagram [data-mongo-indent="3"] { padding-left: 66px; }

.mongo-diagram [data-mongo="pun"]  { color: #111; }
.mongo-diagram [data-mongo="key"]  { color: #b24a43; }
.mongo-diagram [data-mongo="str"],
.mongo-diagram [data-mongo="oid"]  { color: #2f7a56; }
.mongo-diagram [data-mongo="num"],
.mongo-diagram [data-mongo="bool"] { color: #2b62c5; }

.mongo-diagram [data-mongo="tri"] {
    display: inline-block;
    width: 22px;
    height: 22px;
    margin-right: 10px;
    transform: translateY(2px);
    position: relative;
    opacity: 0.9;
}

.mongo-diagram [data-mongo="tri"]::before {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 0;
    height: 0;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-left: 10px solid #111;
}

.mongo-diagram [data-mongo~="open"]::before {
    transform: rotate(90deg);
    transform-origin: 45% 50%;
}

.mongo-diagram [data-mongo="oid-icon"] {
    display: inline-block;
    width: 30px;
    height: 30px;
    margin: 0 10px;
    border: 2px solid #9aa1a8;
    border-radius: 8px;
    vertical-align: -4px;
    position: relative;
    background: #f4f6f8;
}

.mongo-diagram [data-mongo="oid-icon"]::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 18px;
    height: 6px;
    transform: translate(-50%, -50%);
    background:
            radial-gradient(circle at 2px 3px, #7f8790 2px, transparent 2.6px),
            radial-gradient(circle at 9px 3px, #7f8790 2px, transparent 2.6px),
            radial-gradient(circle at 16px 3px, #7f8790 2px, transparent 2.6px);
    opacity: 0.95;
}

.mongo-diagram::-webkit-scrollbar { height: 10px; }
.mongo-diagram::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.18);
    border-radius: 999px;
}
.mongo-diagram::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.06);
    border-radius: 999px;
}