@{
    Layout = "~/Views/Shared/Layout/_Layout.None.cshtml";
}
    <style>
        body {
        }

        .wrapper {
            display: flex;
            height: 100vh;
            --mainColor: #02595a;
            --mainBgColor: #f3fffe;
            --mainBgColor2: #c7f0f3;
        }

            .wrapper .body-left {
                width: 300px;
                height: 100vh;
                display: flex;
                justify-content: center;
                background: #c7f0f3;
                padding-top: 5%;
            }

            .wrapper .body-right {
                width: calc(100vw - 300px);
                height: 100vh;
                background: var(--mainBgColor);
                padding: 10px;
                border-left: 2px solid var(--mainColor);
            }
    </style>
<div class="wrapper">

    <div class="body-left">
        @Html.Partial("Layout/_MainSidebar.Play")
    </div>
    <div class="body-right">
        @RenderBody()
    </div>
</div>
@section styles{
    @RenderSection("styles", false)
}
@section css{
    @RenderSection("css", false)
}

@section js{
    @RenderSection("js", false)
}

@section scripts{
    <script>
        $(function() {
            OverlayScrollbar($(".wrapper>div"));
        })
    </script>
    @RenderSection("scripts", false)
}

@section modal{
    @RenderSection("modal", false)
}