.common-space {
    padding: 0 $space20;
}

.document-content {
    margin-bottom: $space35*2;

    .page-head {
        display: none;
    }

    .row {
        .tab-list {
            display: block;
            overflow-x: auto;
            white-space: nowrap;
            margin-right: - $space20;
            padding: $space35 0 $space40;

            .tabs {
                display: inline-block;
                width: fit-content;
                white-space: normal;
                margin-right: $space10+3;
                @include font-size(16px);
                line-height: 16px;
                padding: 8px $space10;
                border-radius: 5px;
                border: 1px solid $appicon;
                color: $title-color;
                transition: 0.3s all ease-in-out;
                cursor: pointer;

                &.active {
                    background: $appicon;
                    color: $white;
                }
            }

            &::-webkit-scrollbar {
                display: none;
            }
        }

        .search-section {
            display: none;
        }
    }

    .panels {
        .tab-panel {
            display: none;

            &:nth-of-type(1) {
                display: block;
            }
        }

        .documents {
            margin-top: 0;

            .drp-item {
                padding: $space15;
            }
        }

        .doc-wrpr {
            .drp-item {
                @include flex;
                border: $common-border;
                border-radius: 10px;
                @include font-size(16px);
                line-height: 20px;
                color: $title-color;
                padding: 12px $space10;
                margin-bottom: $space25;
                position: relative;

                &.after-select {
                    background: $bg-light;
                    border-color: $bg-light;
                    padding: $space15;
                }
            }

            .up-link {
                @media (hover:hover) {
                    &:hover {
                        opacity: 0.9;
                    }
                }
            }
        }

        .other-doc {
            background: $bg-light;
            border-radius: 10px;
            padding: $space40 $space15;
            text-align: center;
            border: 1px dashed $border-color;
            margin-bottom: $space25;

            img {
                width: 36px;
                height: 28px;
                display: block;
                margin: auto;
            }

            .ad-head {
                @include font-size(16px);
                line-height: 20px;
                color: $title-color;
                margin: $space10 0;
                font-family: $robotomedium;
            }

            .ad-subhead {
                @include font-size(13px);
                line-height: 16px;
                color: $subtitle-color;
                margin-bottom: $space25;
            }

            .upload-btn {
                @include font-size(15px);
                line-height: 18px;
                font-family: $robotoregular;
                text-transform: uppercase;
                background: $subtitle-color;
                padding: $space10+2;
                width: 53%;
                margin: auto;
                transition: 0.3s all ease-in-out;

                @media (hover:hover) {
                    &:hover {
                        opacity: 0.9;
                    }
                }
            }
        }
    }
}

.success-msg {
    margin: $space25 $space15 0;
}

.upload-popup{
    .single-input{
        bottom: $space60;
    }
}

@media screen and (min-width:768px) {
    .success-msg {
        margin: auto;
        top: -5px;
    }

    .document-content {
        position: relative;

        .page-head {
            display: block;
            @include font-size(26px);
            line-height: 26px;
            font-family: $robotomedium;
            color: $title-color;
            border-bottom: $common-border;
            padding-bottom: $space5;
        }

        .row {
            margin: $space25 0 $space40;

            .tab-list {
                margin-right: 0;
                padding: 0;

                .tabs {

                    &:nth-last-of-type(1) {
                        margin-right: 0;
                    }
                }
            }
        }

        .panels {
            .other-doc {
                .ad-subhead {
                    margin: auto auto $space25;
                    width: 284px;
                }

                .upload-btn {
                    width: 21%;
                }
            }
        }
    }
}

@media screen and (min-width:1024px) {

    .document-content {
        .row {
            @include flex;

            .search-section {
                position: relative;
                display: inline-block;
                 width: 26%;

                .input-field {
                    @include font-size(14px);
                    line-height: 18px;
                    width: 100%;
                    border: $common-border;
                    border-radius: 10px;
                    background: $white;
                    color: $title-color;
                    padding: 8px $space10;

                    &::placeholder {
                        width: 190px;
                        color: $subtitle-color;
                    }

                    &:placeholder-shown {
                        text-overflow: ellipsis;
                    }
                }

                .search-btn {
                    position: absolute;
                    top: 10px;
                    right: 10px;
                    background: transparent;
                    width: auto;
                    padding: 0;

                    svg {
                        width: 15px;
                        height: 15px;

                        path {
                            transition: 0.3s all ease-in-out;
                        }
                    }

                    @media (hover:hover) {
                        &:hover {
                            svg {
                                path {
                                    fill: $primary-color;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

@media screen and (min-width:1366px) {
    .document-content {
        .row {
            .search-section {
                width: 33%;

                .input-field {
                    padding: 13px $space10;

                    &::placeholder {
                        width: unset;
                    }
                }

                .search-btn {
                    top: 13px;
                    right: 13px;

                    svg {
                        width: 18px;
                        height: 18px;
                    }
                }
            }

            .tab-list {
                .tabs {
                    padding: 14px $space20;
                }
            }
        }
    }
}

@media screen and (min-width:1400px) {
    .document-content {
        .panels {
            height: 650px;
            overflow-y: scroll;
            padding-right: $space5;

            &::-webkit-scrollbar {
                width: 2px;
            }

            &::-webkit-scrollbar-track {
                background: $white;
            }
        }
    }
}