.proxy-input {
    display: flex;
    flex-flow: column wrap;
    border-top: 1px solid var(--white-color-back);

    & section.load-file-area {
        display: flex;
        justify-content: space-between;
        user-select: none;
        margin-bottom: 20px;
        align-items: center;
        width: 76%;
        background: #fff;
        padding: 15px 25px 30px 25px;
        border-radius: 10px;
        font-size: 14px;
        @media screen and (max-width: 960px) {
            width: 100%;
        }

        & .wrap {
            width: calc(50% - 1em);
            & .title {
                color: #757DA1;
                padding-bottom: 30px;
                font-size: 12px;
                font-weight: 700;
            }
            & .text-underline{
                text-decoration: underline;
            }
            & .from-clipboard {
                padding: 8px;
                border-radius: 0.5rem;
                font-weight: 700;
                color: var(--white-color);
                white-space: nowrap;
                background-color: #84AEFF;
                margin-bottom: 20px;
                cursor: pointer;
                text-align: center;
                transition: background-color 0.5s easeOne, color 0.5s easeOne;

                &:hover {
                    color: color(var(--white-color) alpha(95%));
                    background-color: #3464E0;

                    & svg {
                        fill: color(var(--white-color) alpha(95%));
                    }
                }
            }

            & .select-event {
                min-height: 11em;
                display: flex;
                background-color: #84AEFF;
                justify-content: center;
                align-items: center;
                border-radius: 0.5em;
                color: var(--white-color);
                font-weight: 700;
                cursor: pointer;
                transition: background-color 0.5s easeOne, color 0.5s easeOne;

                &:hover {
                    color: color(var(--white-color) alpha(95%));
                    background-color: #3464E0;

                    & svg {
                        fill: color(var(--white-color) alpha(95%));
                    }
                }

                & svg {
                    fill: var(--white-color);
                    margin-right: 1em;
                    transition: fill 0.5s easeOne;
                }
            }
        }

        & .data {
            width: calc(50% - 1em);
            animation: fade-left 0.7s easeOne both;
            overflow: hidden;

            & .stat {
                margin-top: 1em;

                & .item {
                    padding-bottom: 0.5em;
                    
                    &:last-child {
                        padding-bottom: 0;
                    }

                    & div {
                        
                        font-size: 0.95em;
                       
                        
                        
                        white-space: nowrap;

                        &:last-child {
                            overflow: hidden;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                        }

                        &:nth-child(1) {
                            margin-right: 0.5em;
                            color: #757DA1;    
                        }

                        &:nth-child(2) {
                            color: #3464E0;
                            font-weight: 700;
                            font-size: 1em;
                            
                        }
                    }
                }
            }

            & label.checkbox {
                padding: 0;
            }
        }

        & svg.metrics-svg {
            width: 20px;
            height: 20px;
            margin: auto;
            fill: #3464E0;
        }

        & .preview {
            width: calc(50% - 1em);
        }
    }
}

@keyframes fade-left {
    from {
        opacity: 0;
        transform: translateX(-5%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.container.dark .proxy-input {
    border-top: 1px solid color(var(--white-color) alpha(5%));

    & section.load-file-area {
        & .from-clipboard {
            color: color(var(--neo-black-color) alpha(75%));

            &:hover {
                color: color(var(--neo-black-color) alpha(95%));
            }
        }

        & .select-event {
            color: color(var(--neo-black-color) alpha(75%));

            &:hover {
                color: color(var(--neo-black-color) alpha(95%));

                & svg {
                    fill: color(var(--neo-black-color) alpha(95%));
                }
            }

            & svg {
                fill: color(var(--neo-black-color) alpha(75%));
            }
        }

        & .data .stat .item span {
            color: color(var(--neo-black-color) alpha(85%));

            &:nth-child(2) {
                color: color(var(--blue-color) alpha(80%));
                background-color: color(var(--grey-color) alpha(35%));
            }
        }
    }
}