.panel {
    display: flex;
}

.panel.list {
    flex-direction: column;

    .item {
        flex-direction: row;
        align-items: center;

        .icon {
            width: 4rem !important;
            height: 3rem !important;
        }
        .icon.placeholder {
            background-color: #ddd;
            height: 100%;
            padding: 2rem;
            border-radius: 0.5rem;
            width: 3rem !important;
            height: 2rem !important;
        }
    }
}

.panel.grid {
    flex-direction: row;
    flex-wrap: wrap;

    .item {
        flex-direction: column;
        align-items: center;
        position: relative;

        input[type=checkbox] {
            position: absolute;
            left: 0;
            margin: 0.25rem;
        }
        &:hover {
            input[type=checkbox] {
                display: block;
            }
        }
        &.checked {
            input[type=checkbox] {
                display: block;
            }
        }
        & {
            input[type=checkbox] {
                display: none;
            }
        }

        .title_and_ocr_status {
            display: flex;
            div.ocr_status {
                margin-right: 0.3rem;
            }
        }

        .icon {
            width: 6rem !important;
            height: 8rem !important;

            &.placeholder {
                background-color: #ddd;
                padding: 2rem;
                border-radius: 0.5rem;
                width: 4.5rem !important;
                height: 6rem !important;
                margin-top: 1rem;
            }
            &.placeholder {
                 height: 1rem;
                 width: 6rem;
                 background-color: #ccc;
                 border-radius: 0.3rem;
                 margin: 1rem;
            }
        } // .icon
    } // .node
} // .panel.grid