/* /Pages/PatientDetailsPage/Components/FamilyData.razor.rz.scp.css */
body[b-yh23f8b1sn] {
}
/* /Shared/MainLayout.razor.rz.scp.css */
.page[b-q59ytdolc6] {
    position: relative;
   /* display: flex;*/
}

main[b-q59ytdolc6] {
    flex: 1;
    padding-left:4rem;
}

.sidebar[b-q59ytdolc6] {
    min-width: 280px !important;
    background-color: #fff;
}
.sidebar-collapsed[b-q59ytdolc6] {
    min-width: 60px !important;
}
.top-row[b-q59ytdolc6] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

   /* .top-row ::deep a, .top-row ::deep .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

    .top-row ::deep a:hover, .top-row ::deep .btn-link:hover {
        text-decoration: underline;
    }

    .top-row ::deep a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }*/

@media (max-width: 640.98px) {
    .top-row:not(.auth)[b-q59ytdolc6] {
        display: none;
    }

    .top-row.auth[b-q59ytdolc6] {
        justify-content: space-between;
    }

   /* .top-row ::deep a, .top-row ::deep .btn-link {
        margin-left: 0;
    }*/
}

@media (min-width: 641px) {
    .page[b-q59ytdolc6] {
        flex-direction: row;
    }

    .sidebar[b-q59ytdolc6] {
        width: 280px;
        height: 100vh;
        position: sticky;
        top: 0;
    }
    .top-row[b-q59ytdolc6] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

   /* .top-row.auth ::deep a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }*/

/*    .top-row, article {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }*/
}
@media screen and (min-width: 501px) {
    main[b-q59ytdolc6] {
        padding-left: 4rem !important;
    }
}
/* /Shared/NavMenu.razor.rz.scp.css */
/*.navbar-toggler {
    background-color: rgba(255, 255, 255, 0.1);
}

.sidebar-upper-half {
    margin-top: 50px;
    padding-left: 0;
    padding-right: 0;
}

.w280 {
    width: 280px !important;
}

.w
.top-row {
    height: 17rem;
    background-color: white;
    padding-left: 0px !important;
    padding: 10px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    overflow: hidden;
    width: 100%;
}

.top-row:after {
    content: "";*/ /* This is necessary for the pseudo element to work. */
    /*display: block;*/ /* This will put the pseudo element on its own line. */
    /*margin: 0 auto;*/ /* This will center the border. */
    /*width: 80%;*/ /* Change this to whatever width you want. */
    /*padding-top: 20px;*/ /* This creates some space between the element and the border. */
    /*border-bottom: 2px solid gray;*/ /* This creates the border. Replace black with whatever color you want. */
/*}

.nav-icon {
    padding-right: 10px;
    height: 20px;
    background: white
}

.home {
    margin-left: -2px !important;
}

.navbar-brand {
    font-size: 1.1rem;
}

.sidebar-upper-half .nav-link {
    color: #4483C1 !important;
}

.sidebar-upper-half .nav-item {
    color: #4483C1 !important;
    margin-top: 55px;
}

.sidebar-upper-half .first-item {
    margin-top: 60px;
    margin-left: 0 !important;
}

.toggler-sidebar {
    position: absolute;
    right: 0px;
    top: 10px;
    border: none;
    background: #fff;
}

.sidebar-toggler-icon {
    height: 25px;
    width: 35px;
}
.sidebar-middle-half {*/
    /*padding: 1rem*/
    /*border-radius: 10px 10px 0 0;
    min-height: calc(99.8vh - 150px);
    background-color: #2F7DC1;
    transition: 500ms;
    padding-top: 28px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.sidebar-middle-half:after {
    content: "";*/ /* This is necessary for the pseudo element to work. */
    /*display: block;*/ /* This will put the pseudo element on its own line. */
    /*margin: 0 auto;*/ /* This will center the border. */
    /*width: 80%;*/ /* Change this to whatever width you want. */
    /*padding-top: 20px;*/ /* This creates some space between the element and the border. */
    /*border-bottom: 2px solid gray;*/ /* This creates the border. Replace black with whatever color you want. */
/*}

.oi {
    width: 2rem;
    font-size: 1.1rem;
    vertical-align: text-top;
    top: -2px;
}

.nav-item {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
    padding-left: 0 !important;
}

    .nav-item:first-of-type {
        padding-top: 1rem;
    }

    .nav-item:last-of-type {
        padding-bottom: 1rem;
    }



.sidebar-logo {
    margin-left: auto;
    margin-right: auto;
    margin-top: -30px;
}

@media only screen and (min-width: 641px) and (max-width: 828px) {
    .sidebar-logo {
        width: 50%;
        margin-top: -30px;
    }
}

@media (min-width: 641px) {
    .navbar-toggler {
        display: none;
    }

    .collapse {*/
        /* Never collapse the sidebar for wide screens */
        
    /*}

    .sidebar {
        width: 280px;
        height: 94vh;
        position: sticky;
        top: 0;
    }

    .sidebar-collapsed {
        width: 60px;
        height: 100vh;
        position: sticky;
        top: 0;
    }
}

.sidebar {
    background-color: #fff;
    position: fixed;
    top: 0;
    left: 0;
    width: 5rem;
    height: 99.8vh;
    z-index: 11;
    overflow-x: hidden;
    overflow-y: scroll;
}

.sidenav:hover {
    width: 232px;*/
    /*position: absolute;
    z-index: 2000;*/
/*}

    .sidenav:hover .sidenav-header {
        padding-inline: 2rem;
    }

    .sidenav:hover .sidenav-items {
        border-radius: 35px 35px 0 0;
    }
sidenav .sidenav-items .sidenav-item .sidenav-link:hover, .sidenav .sidenav-items .sidenav-item a:hover {
    background-color: #E7E7E7;
    color: #2F7DC1;
}

    .sidenav .sidenav-items .sidenav-item .sidenav-link:hover svg path, .sidenav .sidenav-items .sidenav-item a:hover svg path {
        fill: #2F7DC1;
    }

.sidebar-collapsed {
    background-color: #fff;
}

    .sidebar-collapsed .nav-item {
        padding-right: 8px !important;
    }

    .sidebar-collapsed .sidebar-logo {
        margin-left: 0px;
        width: 60px;
    }

    .sidebar-collapsed .sidebar-toggler-icon {
        height: 17px;
        width: 27px;
    }

    .sidebar-collapsed .toggler-sidebar {
        right: 5px;
    }

.transition-sidebar {
    transition: all 0.2s linear;
    overflow-y: scroll;
    box-shadow: 0px 0px 10px 0px #e7e0e0;
    height: 100vh;
}

    .transition-sidebar::-webkit-scrollbar {
        display: none;
    }*/


/*.sidenav {
    position: fixed;
    top: 0;
    left: 0;
    width: 5rem;
    height: 99.8vh;
    z-index: 11;
    overflow-x: hidden;
    overflow-y: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

    .sidenav::-webkit-scrollbar {
        display: none;
    }

    .sidenav .sidenav-header {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        overflow: hidden;
        width: 100%;
    }

    .sidenav:hover {
        width: 232px;
    }

        .sidenav:hover .sidenav-header {
            padding-inline: 2rem;
        }

        .sidenav:hover .sidenav-items {
            border-radius: 35px 35px 0 0;
        }

.sidenav {
    background-color: white;
    color: white;
    transition: 500ms;
    filter: drop-shadow(0px 4px 13px rgba(0, 0, 0, 0.25));
}

    .sidenav .sidenav-header {
        transition: inherit;
        height: 150px;
        overflow: hidden;
        padding-inline: 0.5rem;
    }

        .sidenav .sidenav-header .sidenav-heading {
            font-size: 1.75rem;
            margin-inline: auto;
            margin-top: 0rem;
        }

            .sidenav .sidenav-header .sidenav-heading img {
                width: 100%;
            }

    .sidenav .sidenav-items {
        padding: 1rem;
        border-radius: 10px 10px 0 0;
        min-height: calc(99.8vh - 150px);*/
      /*  background-color: #2F7DC1;*/
        /*transition: 500ms;
        padding-top: 28px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

        .sidenav .sidenav-items .sidenav-item {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            margin-bottom: 0.2rem;
            overflow: hidden;
            width: 100%;
            transition: 500ms;
        }

            .sidenav .sidenav-items .sidenav-item .sidenav-link, .sidenav .sidenav-items .sidenav-item a {
                display: block;
                width: 100%;
                padding: 0.5rem;
                border-radius: 0.5rem;
                color: white;
                text-decoration: none;
                height: 2.2rem;
                font-size: 1rem;
            }

                .sidenav .sidenav-items .sidenav-item .sidenav-link:hover, .sidenav .sidenav-items .sidenav-item a:hover {
                    background-color: #E7E7E7;
                    color: #2F7DC1;
                }

                    .sidenav .sidenav-items .sidenav-item .sidenav-link:hover svg path, .sidenav .sidenav-items .sidenav-item a:hover svg path {
                        fill: #2F7DC1;
                    }

                .sidenav .sidenav-items .sidenav-item .sidenav-link .link-container, .sidenav .sidenav-items .sidenav-item a .link-container {
                    display: flex;
                    flex-direction: row;
                    justify-content: flex-start;
                    width: 100%;
                    height: 100%;
                    font-size: 1rem;
                }

                    .sidenav .sidenav-items .sidenav-item .sidenav-link .link-container .iconMid, .sidenav .sidenav-items .sidenav-item a .link-container .iconMid {
                        margin-bottom: 8px;
                    }

                    .sidenav .sidenav-items .sidenav-item .sidenav-link .link-container .icon-container, .sidenav .sidenav-items .sidenav-item a .link-container .icon-container {
                        text-align: center;
                        min-width: 2rem;
                    }

                        .sidenav .sidenav-items .sidenav-item .sidenav-link .link-container .icon-container span, .sidenav .sidenav-items .sidenav-item a .link-container .icon-container span {
                            position: relative;
                            top: 2px;
                        }

                    .sidenav .sidenav-items .sidenav-item .sidenav-link .link-container .text-container, .sidenav .sidenav-items .sidenav-item a .link-container .text-container {
                        margin-left: 1rem;
                        margin-top: -2.5px;
                    }

                        .sidenav .sidenav-items .sidenav-item .sidenav-link .link-container .text-container .link-text, .sidenav .sidenav-items .sidenav-item a .link-container .text-container .link-text {
                            white-space: nowrap;
                        }

            .sidenav .sidenav-items .sidenav-item .active {
                background-color: #E7E7E7;
                color: #2F7DC1;
            }

                .sidenav .sidenav-items .sidenav-item .active svg path {
                    fill: #2F7DC1;
                }

@media screen and (max-width: 500px) {
    .sidenav {
        display: none;
    }
}*/


