.verification-item-list {
    width: 100%;
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    justify-content: center;
    padding-bottom: 24px;

    &.digital-twin {
        justify-content: initial;
        height: 100%;
        padding: 0;

        .item-container {
            margin: 0;
            padding: 0;
            width: 100%;

            .action-box {
                display: flex;
                justify-content: space-between;
                position: fixed;
                bottom: 0;
                padding: 8px 16px;
                background-color: var(--cf-verification-action-box-bg-color);
                height: 70px;
                width: 100%;

                .text {
                    color: var(--cf-verification-primary-color);

                    h4 {
                        margin-bottom: 0.25rem;
                        font-size: $font-size-normal;
                        line-height: $line-height;
                    }

                    p {
                        font-size: $font-size-medium;
                        color: var(--cf-verification-action-box-text-color);
                    }
                }

                .actions {
                    display: flex;
                    align-items: center;
                    justify-content: flex-end;

                    &.navigate {
                        width: 100%;
                        justify-content: space-between;
                    }
                }

                &.confirmation {
                    display: none;

                    &.mobile {
                        display: flex;
                        margin: 0 -12px;
                    }

                    .confirmation-action {
                        position: relative;
                        cursor: pointer;

                        &:before {
                            content: '';
                            position: absolute;
                            z-index: -1;
                            top: 0;
                            right: 0;
                            bottom: 0;
                            left: 0;
                            margin: auto;
                            width: 24px;
                            height: 24px;
                            border-radius: 50%;
                            background-color: white;
                        }

                        .md-icon {
                            height: 30px;
                            width: 30px;
                        }

                        &.approve {
                            margin-right: 20px;

                            .md-icon {
                                color: $verification-result-success-dark;
                            }
                        }

                        &.decline {
                            .md-icon {
                                color: $verification-result-error-dark;
                            }
                        }
                    }
                }
            }

            .card-container {
                position: relative;
                height: 100%;

                > .header {
                    height: 65px;
                    padding: 20px;

                    .logo {
                        height: 100%;
                        background-image: var(--cf-verification-logo-url);
                        background-repeat: no-repeat;
                        background-size: contain;
                    }

                    &.error {
                        text-align: center;
                    }
                }

                .base-card {
                    justify-content: initial;
                    width: 100%;
                    height: calc(100% - 65px);

                    .card-body {
                        flex-grow: initial;
                    }

                    .card-footer {
                        padding-bottom: 80px;
                    }

                    &.file-declined-card {
                        h3 {
                            padding-top: 12px;
                            color: $verification-result-error-dark;
                            font-size: 1.25rem;
                        }
                    }
                }
            }

            .pdf-viewer {
                display: none;
                position: absolute;
                top: 65px;
                right: 0;
                bottom: 70px;
                left: 0;
                width: auto;
                height: auto;
            }

            &.confirmation-step {
                .pdf-viewer {
                    display: block;
                }
            }

            &.error {
                .card-container {
                    width: 100%;
                    text-align: center;

                    .base-card {
                        margin: 0 auto;
                        padding-top: 20px;
                        box-shadow: none;

                        .card-header .title {
                            width: 100%;
                        }

                        .error-message {
                            padding: 12px;
                            margin: 35px 16px 24px;
                            border-radius: 8px;
                            background-color: #fdecf0;
                            text-align: left;
                            font-size: $font-size-medium;
                            color: $verification-result-error-dark;
                        }
                    }
                }

                .pdf-viewer {
                    display: none;
                }
            }
        }
    }

    .item-container {
        max-width: 100%;
    }
}

.verification-shadow-card {
    .lines {
        padding: $spacer * 2;

        .divider {
            width: 100%;
            height: 1px;
            margin: $spacer 0;
            border-bottom: 1px solid $gray-100;
        }

        .line {
            background: $gray-100;
            height: 20px;
            margin-bottom: 9px;

            &.long {
                width: 100%;
            }

            &.medium {
                width: 250px;
            }

            &.short {
                width: 170px;
            }

            &:last-child {
                margin-bottom: 0;
            }
        }
    }
}

@media screen and (min-width: 768px) {
    .verification-item-list {
        &.digital-twin {
            .item-container {
                display: flex;

                .action-box {
                    position: absolute;
                    right: 12px;
                    left: 12px;
                    bottom: 20px;
                    width: auto;
                    border-radius: 8px;

                    &.confirmation {
                        display: block;
                        position: static;
                        width: auto;
                        height: auto;
                        margin-top: 16px;

                        &.mobile {
                            display: none;
                        }

                        .text {
                            h4 {
                                font-weight: 500;
                            }
                        }

                        .actions {
                            justify-content: space-between;

                            .btn {
                                position: relative;
                                padding-left: 28px;

                                .md-icon {
                                    position: absolute;
                                    top: 0;
                                    bottom: 0;
                                    left: 10px;
                                    margin-top: auto;
                                    margin-bottom: auto;
                                    height: 14px;
                                    width: 14px;
                                }

                                &.decline {
                                    .md-icon {
                                        color: $verification-result-error-dark;
                                    }
                                }

                                &.approve {
                                    .md-icon {
                                        color: $verification-result-success-dark;
                                    }
                                }
                            }
                        }
                    }
                }

                .card-container {
                    height: 100%;
                    width: 400px;

                    .base-card {
                        width: 100%;
                    }
                }

                .pdf-viewer {
                    display: block;
                    flex: 1 1 auto;
                    position: relative;
                    top: auto;
                    right: auto;
                    bottom: auto;
                    left: auto;
                    max-width: calc(100% - 400px);
                    height: 100vh;
                }
            }
        }
    }
}