html,
body {
    height: 100%;
    margin-top: 0 !important;
}

.wpd-dashboard-portal {
    background-color: #ffffff;
    height: 100%;

    @media(max-width: 767px) {
        max-width: 100vw;
        overflow-x: hidden;
    }

    .wpd-dp {
        &__button {
            padding: 8px 12px;
            font-size: 14px;
            line-height: 1.7;
            font-weight: 500;
            color: #566267 !important;
            background-color: transparent !important;
            border-radius: 8px;
            border: none !important;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            text-decoration: none;
            transition: all .3s ease !important;

            &:hover,
            &.active {
                background-color: #efefef !important;
            }

            &.light {
                color: #ffffff !important;

                &:hover {
                    background-color: #272B30 !important;
                }

                &.active {
                    background-color: var(--primary-color) !important;
                }
            }

            .wpd-dp__icon {
                font-size: 20px;
            }


            &.active {
                background-color: var(--primary-color) !important;
                color: #fff !important;
            }
        }

        &__sidebar {
            &-inner {
                position: sticky;
                top: 24px;
            }

            &-toggler {
                padding: 0;
                background: none !important;
                border: none !important;
                font-size: 24px;
                line-height: 1;
                color: #212728 !important;
                cursor: pointer;
            }

            @media(min-width: 768px) {

                &-close,
                &-toggler {
                    display: none;
                }
            }
        }

        &__icon {
            display: inline-flex;
            pointer-events: none;
            transition: all .3s ease;

            svg {
                width: 1em;
                height: 1em;
                vertical-align: middle;
            }
        }

        &__title {
            font-size: 24px;
            line-height: 1.2;
            font-weight: 600;
            color: #323B3E;
            margin: 0;
        }

        &__brand {
            padding: 0 8px;
            margin: 0 0 24px;

            img {
                width: 100%;
                height: auto;
                max-width: 165px;
            }

            &-title {
                color: #ffffff;
                font-size: 24px;
            }

            &-wrap {
                margin-bottom: 16px;
                padding-bottom: 16px;
                border-bottom: 1px solid #FFFFFF29;
            }

            &-site-link {
                padding: 8px 12px;
                width: 100%;
                text-decoration: none;

                &:hover {
                    background: none;
                    color: var(--primary-color);
                }
            }
        }

        &__tab {
            display: flex;
            flex-wrap: wrap;
            gap: 4px;

            &.wpd-dp__tab-vertical {
                flex-direction: column;
            }

            &-content {
                display: none;

                &.active {
                    display: block;
                }

                .dr-form__heading {
                    display: none;
                }
            }
        }

        &__content {
            padding: 24px;
            max-width: 1200px;
            margin: 0 auto;
            width: 100%;

            .wpd-dp__title {
                padding-bottom: 24px;
                margin-bottom: 24px;
                border-bottom: 1px solid #EDEEEE;

                @media(min-width: 768px) {
                    display: none;
                }
            }

            header {
                display: none;
            }

            .container {
                max-width: 100%;
            }

            @media (min-width: 1025px) {
                .dr-advance-search .advance-search-options {
                    border: none !important;
                }
            }

            @media (min-width: 768px) and (max-width: 1024px) {
                .dr-archive-list.grid-view .dr-archive-single, .dr-archive-single, .dr-advance-search .advance-search-options .advance-search-block {
                    flex: 0 0 50% !important;
                    max-width: 50% !important;
                    width: border-box !important;
                }
                .dr-advance-search .advance-search-options {
                    border: none !important;
                }
            }
        }

        &__header {
            padding: 0 24px;
            margin: 0;
            background-color: #ffffff;

            @media(max-width: 767px) {
                box-shadow: 0px -8px 32px 0px #00000029;
            }

            @media(min-width: 768px) {
                border-bottom: 1px solid #EDEEEE;
            }

            .wpd-dp__title {
                @media(max-width: 767px) {
                    display: none;
                }
            }

            &-container {
                padding: 24px 0;
                display: flex;
                gap: 16px;
                max-width: 1152px;
                margin: 0 auto;
                width: 100%;

                @media(max-width: 767px) {
                    padding: 16px 0;
                }
            }

            &-left {
                display: flex;
                flex-wrap: wrap;
                gap: 16px;
                align-items: center;
            }

            &-right {
                margin-left: auto;
            }
        }

        &__user {
            display: flex;
            align-items: center;
            gap: 8px;

            &-wrap {
                position: relative;

                &.open {
                    .wpd-dp__user-dropdown-toggler {
                        .wpd-dp__icon {
                            transform: rotate(180deg);
                        }
                    }

                    .wpd-dp__user-dropdown {
                        transform: translateY(8px);
                        visibility: visible;
                        opacity: 1;

                        @media(max-width: 767px) {
                            transform: translateY(16px);
                            border-top-left-radius: 0;
                            border-top-right-radius: 0;
                        }
                    }
                }
            }

            &-avatar {
                flex: 0 0 48px;
                width: 48px;
                height: 48px;
                border-radius: 50%;
                overflow: hidden;
                background-color: #efefef;

                @media(max-width: 767px) {
                    width: 32px;
                    height: 32px;
                    flex: 0 0 32px;
                }

                img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }
            }

            &-dropdown-toggler {
                padding: 0;
                background: none;
            }

            &-dropdown {
                position: absolute;
                top: 100%;
                right: 0;
                width: 240px;
                background-color: #ffffff;
                border: 1px solid #EDEEEE;
                border-radius: 8px;
                box-shadow: 0px 24px 32px 0px #00000029;
                overflow: hidden;
                transform: translateY(16px);
                z-index: 1000;
                visibility: hidden;
                opacity: 0;
                transition: all .3s ease;

                .wpd-dp__button {
                    width: 100%;
                    border-radius: 0;
                    padding: 12px;

                    &:not(:last-child) {
                        border-bottom: 1px solid #EDEEEE !important;
                    }
                }
            }

            &-logout {
                .wpd-dp__icon {
                    color: #FF3C5F;
                }
            }
        }
    }

    &__container {
        display: flex;
        min-height: 100%;
    }

    &__sidebar {
        flex: 0 0 240px;
        max-width: 240px;
        background-color: #1A1D1F;
        color: #ffffff;
        padding: 24px 16px;

        .wpd-dp__button.wpd-dp__sidebar-close {
            position: absolute;
            right: -45px;
            top: 0px;
            padding: 0;

            &:hover {
                background: none !important;
            }
        }

        @media(max-width: 767px) {
            position: fixed;
            left: 0;
            top: 0;
            height: 100%;
            z-index: 1001;
            transform: translateX(-100%);
            transition: all .3s ease;

            .wpd-dp__sidebar-close {
                display: none;
            }

            &.open {
                transform: translateX(0);

                .wpd-dp__sidebar-close {
                    display: block;
                    width: unset;
                }
            }
        }
    }

    &__content-wrap {
        flex: 1;

        @media(max-width: 767px) {
            position: relative;

            &::before {
                content: "";
                position: fixed;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
                background: rgba(0, 0, 0, 0.5);
                z-index: 1000;
                visibility: hidden;
                opacity: 0;
                transition: all .3s ease;
            }
        }
    }

    &.sidebar-open {
        .wpd-dashboard-portal__content-wrap {
            @media(max-width: 767px) {
                &::before {
                    visibility: visible;
                    opacity: 1;
                }
            }
        }
    }
}

#dr-pro-submit-recipe {
    .dr-ud__header {
        display: none;
    }
    
    .dr-form__section:first-child {
        padding: 0;
        margin: 0;
        border: none;
    }
}