/*!
 * Start Bootstrap - SB Admin (http://startbootstrap.com/)
 * Copyright 2013-2016 Start Bootstrap
 * Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap/blob/gh-pages/LICENSE)
 */


/* Global Styles */

body {
    margin-top: 105px;
    font-size: 13.5px;
    background-color: #FFFFFF;
    min-height: 100%;
}

a {
    font-size: 13px;
}

@media(min-width:323px) {
    body {
        margin-top: 55px;
    }
}

#wrapper {
    padding-left: 0;
}

#page-wrapper {
    width: 100%;
    padding: 0;
}

@media(min-width:992px) {
    #wrapper {
        padding-left: 175px;
    }
    #page-wrapper {
        padding: 10px;
    }
}


/* Top Navigation */

.top-nav {
    /*padding: 0 15px;*/
}

.nav-top-bar {
    background: #00305c;
}

.top-nav .top_home {
    margin-top: 10px;
}

.top-nav .top_logoimg {
    margin-top: -7px;
}

.top-nav>li {
    display: inline-block;
    float: left;
}

.top-nav>li>a {
    padding-top: 13px;
    padding-bottom: 15px;
    line-height: 20px;
    /*color: #999;*/
    color: #FFFFFF;
}

.top-nav>li>a:hover,
.top-nav>li>a:focus,
.top-nav>.show>a,
.top-nav>.show>a:hover,
.top-nav>.show>a:focus {
    color: #fff;
    background-color: #4183D7;
}

.top-nav>.show>.dropdown-menu {
    float: left;
    position: absolute;
    margin-top: 0;
    border: 1px solid rgba(0, 0, 0, .15);
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    background-color: #fff;
    -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
    box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
}

.top-nav>.show>.dropdown-menu>a {
    white-space: normal;
}

.top-nav>.show>.dropdown-menu>a:hover,
.top-nav>.show>.dropdown-menu>a:focus {
    background: #4183D7;
    color: #FFFFFF;
}

.navbar {
    min-height: 50px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    padding: 0px 1rem;
}

ul.message-dropdown {
    padding: 0;
    max-height: 250px;
    overflow-x: hidden;
    overflow-y: auto;
}

li.message-preview {
    width: 275px;
    border-bottom: 1px solid rgba(0, 0, 0, .15);
}

li.message-preview>a {
    padding-top: 15px;
    padding-bottom: 15px;
}

li.message-footer {
    margin: 5px 0;
}

ul.alert-dropdown {
    width: 200px;
}

#page-wrapper {
    margin-top: 30px;
}


/* Side Navigation */

@media(min-width:992px) {
    .side-nav {
        position: fixed !important;
        top: 50px;
        left: 225px;
        width: 175px;
        height: 100%;
        margin-left: -225px;
        border: none;
        border-radius: 0;
        overflow-y: hidden !important;
        background-color: #00305c;
        bottom: 0;
        overflow-x: hidden;
        padding-bottom: 70px;
    }
    .side-nav:hover {
        overflow-y: auto !important;
    }
    .side-nav>li>a {
        width: 175px;
    }
    .side-nav li a:hover,
    .side-nav li a:focus {
        outline: none;
        background-color: #262F37 !important;
    }
    .side-nav li a.active {
        outline: none;
        background-color: #4183D7 !important;
    }
    .side-nav li {
        position: relative;
    }
    .side-nav li a.active:after {
        right: 0;
        border: solid 8px transparent;
        content: " ";
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
        border-right-color: #FFFFFF;
        top: 50%;
        margin-top: -8px;
    }
    .navbar-toggle {
        display: none;
    }
    .top-nav {
        width: 100%;
        justify-content: flex-end!important;
    }
    .navbar-expand-md .navbar-nav {
        -ms-flex-direction: column !important;
        flex-direction: column !important;
    }
    .navbar-expand-lg .navbar-nav {
        display: block;
    }
}

@media(max-width:991px) {
    .side-nav {
        overflow-y: auto !important;
        overflow-x: hidden;
    }
}

.side-nav>li>a {
    padding: 8.5px 10px !important;
}

#SideNav a {
    color: #FFFFFF;
}

.side-nav>li>ul {
    padding: 0;
}

.side-nav>li>ul>li>a {
    display: block;
    padding: 8px 30px;
    text-decoration: none;
    /*color: #999;*/
    color: #FFFFFF;
}

.side-nav>li>ul>li>a:hover {
    background: #4183D7;
    color: #FFFFFF;
}


/* Flot Chart Containers */

.flot-chart {
    display: block;
    height: 400px;
}

.flot-chart-content {
    width: 100%;
    height: 100%;
}


/* Custom Colored Panels */

.huge {
    font-size: 40px;
    line-height: normal;
}

.card-heading {
    padding: 11px;
}

.card-heading .text-right {
    margin-top: -10px;
}

.card-blue {
    border-color: #337AB7;
}

.card-blue>.card-heading {
    border-color: #337AB7;
    color: #fff;
    background-color: #337AB7;
}

.card-blue>a {
    color: #337AB7;
}

.card-blue>a:hover {
    color: #337AB7;
}

.card-green {
    border-color: #5cb85c;
}

.card-green>.card-heading {
    border-color: #5cb85c;
    color: #fff;
    background-color: #5cb85c;
}

.card-green>a {
    color: #5cb85c;
}

.card-green>a:hover {
    color: #3d8b3d;
}

.card-red {
    border-color: #d9534f;
}

.card-red>.card-heading {
    border-color: #d9534f;
    color: #fff;
    background-color: #d9534f;
}

.card-red>a {
    color: #d9534f;
}

.card-red>a:hover {
    color: #b52b27;
}

.card-yellow {
    border-color: #f0ad4e;
}

.card-yellow>.card-heading {
    border-color: #f0ad4e;
    color: #fff;
    background-color: #f0ad4e;
}

.card-yellow>a {
    color: #f0ad4e;
}

.card-yellow>a:hover {
    color: #df8a13;
}

.nav-top-bar .navbar-toggle .icon-bar {
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 1px;
    background-color: #fff;
}

.nav-top-bar .navbar-toggle .icon-bar+.icon-bar {
    margin-top: 4px;
}

.nav-top-bar .navbar-toggle {
    position: relative;
    float: right;
    padding: 9px 10px;
    margin-top: 8px;
    margin-right: 15px;
    margin-bottom: 8px;
    background-color: transparent;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
}

.nav-top-bar button.navbar-toggle:focus {
    outline: none;
}

.page-header {
    font-size: 30px;
    font-weight: normal;
    margin-bottom: 20px;
    padding-bottom: 9px;
    border-bottom: 1px solid rgb(199, 199, 199);
}

a:hover {
    text-decoration: none;
    color: #2196F3;
}

a .btn {
    text-decoration: none;
    color: #2196F3;
}

.button {
    color: #4183D7;
    font-weight: 600;
    border: 1px solid #4183D7;
    margin-left: 5px;
}

.button:focus,
.button:hover {
    color: #FFFFFF;
    border: 1px solid #4183D7;
    background: #4183D7;
}

.btn_submit {
    color: #FFFFFF;
    font-weight: 400;
    border: 1px solid #4183D7;
    background: #4183D7;
    padding: .25rem .8rem;
}

.btn_submit:focus,
.btn_submit:hover {
    color: #4183D7;
    border: 1px solid #4183D7;
    background: #FFFFFF;
}

.btn_delete {
    color: #FFFFFF;
    font-weight: 400;
    border: 1px solid #a00;
    background: #a00;
    padding: .25rem .8rem;
}

.btn_delete:focus,
.btn_delete:hover {
    color: #a00;
    border: 1px solid #a00;
    background: #FFFFFF;
}

.table-responsive {
    overflow-x: inherit;
}

.table-view {
    border: 1px solid #CCD0D4;
}

.table-view tr th {
    padding: 7px 10px;
    max-width: 200px;
    word-break: break-word;
    text-align: left;
    font-size: 12px;
}

.table-view tr td {
    padding: 7px 10px;
    max-width: 200px;
    word-break: break-word;
    text-align: left;
    font-size: 13px;
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(249, 249, 249, 1);
}

.table-view tr th {
    color: #FFFFFF;
    background: #39AED3;
    border: none;
    /* background:#FFFFFF; */
    font-weight: 480;
    border-bottom: 1px solid #CCD0D4;
}

.table-view tr th a span {
    color: #FFFFFF;
}

.table-view tr td {
    border-top: none !important;
}

.table-view .date {
    max-width: 100px;
    min-width: 95px;
}

.table tr td a,
.table tr th a {
    color: #2073AA;
    font-size: 13px;
}

.table tr td a:hover,
.table tr td a:focus,
.table tr th a:hover,
.table tr th a:focus {
    color: #3397D9;
}

.table-view .row-actions {
    color: #ddd;
    font-size: 12px;
    padding: 3px 0 1px;
    position: relative;
    left: -9999em;
}

.table-view .row-actions a {
    font-size: 12px;
}

.table-view .check-row {
    width: 20px;
}

.table-view input[type="checkbox"] {
    line-height: 2;
    vertical-align: middle;
}

.table-view .sortable a,
.table-view .sorted a {
    display: block;
    overflow: hidden;
}

.table-view .sortable span,
.table-view .sorted span {
    float: left;
}

.table-view .sorting-indicator {
    display: block;
    visibility: hidden;
    width: 10px;
    height: 4px;
    margin-top: 8px;
    margin-left: 7px;
}

.table-view .sorting-indicator:before {
    content: "\f0d8";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    top: 0px;
    left: -1px;
    color: #444;
    line-height: .5;
    position: relative;
    vertical-align: top;
    text-decoration: none!important;
}

.table-view .sorted.asc .sorting-indicator:before,
.table-view th.desc:hover .sorting-indicator:before {
    content: "\f0d8";
    visibility: visible;
}

.table-view .sorted.desc .sorting-indicator:before,
.table-view th.asc:hover .sorting-indicator:before {
    content: "\f0d7";
    visibility: visible;
}

.table-view .row-actions .delete {
    color: #a00;
}

.has-row-actions:hover .row-actions {
    left: 0em;
}

@media (max-width: 560px) {
    .table-view thead {
        display: none;
    }
    .table-view tr {
        margin-bottom: 10px !important;
        display: block;
        width: 100% !important;
    }
    .table-view tr:last-child {
        margin-bottom: 0px !important;
    }
    .table-view td {
        display: block;
        text-align: left !important;
        min-width: 100% !important;
    }
    .table-view td:before {
        content: attr(data-label);
        font-weight: 500;
    }
    .table-view .row-actions {
        left: 0em !important;
    }
    .mb-hidden {
        display: none;
    }
}

.form-control {
    display: block;
    font-size: 13px;
    line-height: 2;
    color: #32373c;
    border-color: #ccc;
    box-shadow: none;
    border-radius: 3px;
    padding: 0 8px 0 8px;
    min-height: 31px;
    max-height: 31px;
    max-width: 25rem;
    -webkit-appearance: none;
    vertical-align: middle;
    margin-right: 6px !important;
}

select.form-control {
    padding: 0 24px 0 8px;
    background: #fff url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%206l5%205%205-5%202%201-7%207-7-7%202-1z%22%20fill%3D%22%23555%22%2F%3E%3C%2Fsvg%3E) no-repeat right 5px top 55%;
    background-size: 16px 16px;
    cursor: pointer;
}

textarea.form-control {
    min-height: 100px;
    resize: none;
}

input[type="date"] {
    padding: 0 0px 0 8px;
}

.form-control:focus {
    box-shadow: none;
    outline: 0 none;
    border: 1px solid #3c8dbc;
}

.mb_inline {
    display: inline-block !important;
    width: auto !important;
    max-width: 140px !important;
}

.fw-500 {
    font-weight: 500;
}

.fs-13 {
    font-size: 13px;
}

.form-rows-custom label {
    font-weight: 500;
    padding-top: .29rem!important;
    cursor: pointer;
}

.form-rows-custom p.text {
    padding-top: .29rem!important;
    margin: 0;
}

.form-rows-custom .links {
    color: #ddd;
    font-size: 12px;
}

.form-rows-custom .links a {
    display: inline-block;
    margin-top: 4px;
    font-size: 12px;
}

@media(min-width:768px) {
    .form-rows-custom input[type="checkbox"] {
        line-height: 2;
        vertical-align: middle;
        margin-top: 6.5px !important;
    }
}

div.pagination {
    padding: 0;
    font-size: 13px;
    color: #000000;
    text-align: center;
}

div.pagination a {
    border: 1px solid #D1D1D1;
    border-radius: 5px;
    background: #FFFFFF;
    color: #000000;
    padding: 5px 11px;
    margin-right: 3px;
    text-decoration: none;
}

div.pagination svg {
    font-size: 12px !important;
    vertical-align: middle;
    margin-bottom: 3px;
}

div.pagination a:hover,
div.pagination a:active {
    background-color: #222222;
    color: #FFFFFF;
    text-decoration: none;
}

div.pagination span.current {
    border: 1px solid #FFFFFF;
    border-radius: 5px;
    background: #4183D7;
    color: #FFFFFF;
    padding: 5px 11px;
    margin-right: 3px;
    text-decoration: none;
    cursor: default;
}

div.pagination span.disabled {
    display: none;
}

.pagination_box_design {
    font-size: 13px;
    margin-left: 29px;
    margin-top: 15px;
    margin-bottom: 10px;
    color: #595959;
}

.pagination_design {
    color: #39AED3;
    border: 1px solid #39AED3;
    padding: 2px 6px;
}

.mh-51 {
    max-height: 51px !important;
}

.mh-40 {
    max-height: 40px !important;
}

.mw-120px {
    max-width: 120px !important;
}

.status-green {
    color: green;
}

.status-red {
    color: red;
}

.image-preview {
    display: inline-block;
    margin-right: 10px;
    text-align: center !important;
}

.image-preview img,
.image-preview-img {
    width: auto;
    height: 70px;
    margin: 2px;
    margin-bottom: 0px;
}

.image-preview .del_link {
    margin-bottom: 5px !important;
}

.image-preview-closebtn {
    float: right;
}

.image-preview-closebtn i {
    font-size: 18px;
}

::-webkit-scrollbar {
    width: 6px;
    height: 8px;
}


/* Track */

::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px grey;
    border-radius: 10px;
}


/* Handle */

::-webkit-scrollbar-thumb {
    background: #4183D7;
    border-radius: 10px;
}


/* Handle on hover */

::-webkit-scrollbar-thumb:hover {
    background: #13345B;
}

.row-highlighted {
    background: #94BAE9 !important;
    color: #FFFFFF !important;
}

.row-highlighted a,
.row-highlighted .status-green,
.row-highlighted .status-red {
    color: #FFFFFF !important;
}

.w-mc {
    min-width: max-content;
    width: 100%;
}

.h-mh {
    height: max-content;
}

* {
    margin: 0;
    padding: 0;
}

.tree {
    display: flex;
    align-items: center;
    justify-content: center;
}

.tree img {
    max-height: 60px;
}

.tree p {
    margin-bottom: 3px;
    margin-top: 0px;
    font-size: 13px;
    color: #000000;
}

.tree .pending {
    color: red;
    font-size: 10px;
}

.tree ul {
    padding-top: 20px;
    position: relative;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
}

.tree li {
    float: left;
    text-align: center;
    list-style-type: none;
    position: relative;
    padding: 20px 5px 0 5px;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
}


/*We will use ::before and ::after to draw the connectors*/

.tree li::before,
.tree li::after {
    content: '';
    position: absolute;
    top: 0;
    right: 50%;
    border-top: 1px solid #ccc;
    width: 50%;
    height: 20px;
}

.tree li::after {
    right: auto;
    left: 50%;
    border-left: 1px solid #ccc;
}


/*We need to remove left-right connectors from elements without 
any siblings*/

.tree li:only-child::after,
.tree li:only-child::before {
    display: none;
}


/*Remove space from the top of single children*/

.tree li:only-child {
    padding-top: 0;
}


/*Remove left connector from first child and 
right connector from last child*/

.tree li:first-child::before,
.tree li:last-child::after {
    border: 0 none;
}


/*Adding back the vertical connector to the last nodes*/

.tree li:last-child::before {
    border-right: 1px solid #ccc;
    border-radius: 0 5px 0 0;
    -webkit-border-radius: 0 5px 0 0;
    -moz-border-radius: 0 5px 0 0;
}

.tree li:first-child::after {
    border-radius: 5px 0 0 0;
    -webkit-border-radius: 5px 0 0 0;
    -moz-border-radius: 5px 0 0 0;
}


/*Time to add downward connectors from parents*/

.tree ul ul::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    border-left: 1px solid #ccc;
    width: 0;
    height: 20px;
}

.tree li a {
    border: 1px solid #ccc;
    padding: 5px 10px;
    text-decoration: none;
    color: #666;
    font-size: 11px;
    display: inline-block;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
}


/*Time for some hover effects*/


/*We will apply the hover effect the the lineage of the element also*/

.tree li a:hover,
.tree li a:hover+ul li a {
    background: #c8e4f8;
    color: #000;
    border: 1px solid #94a0b4;
}


/*Connector styles on hover*/

.tree li a:hover+ul li::after,
.tree li a:hover+ul li::before,
.tree li a:hover+ul::before,
.tree li a:hover+ul ul::before {
    border-color: #94a0b4;
}

.plot_block {
    width: 100%;
    text-align: left;
    padding-left: 12px;
    padding-right: 12px;
}

.plot_col {
    box-shadow: 0 2px 20px rgba(65, 131, 215, 0.22), 0 2px 11px rgba(65, 131, 215, 0.15) !important;
    background: #FFFFFF;
    word-wrap: break-word;
    padding: 0px;
    padding: 7px 4px;
    text-align: center;
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
}


/* .plot_main_col:first-child */


/* { */


/* padding-left:15px; */


/* padding-right:3px; */


/* } */

.plot_main_col {
    padding-left: 3px;
    padding-right: 3px;
}


/* .plot_main_col:last-child */


/* { */


/* padding-left:3px; */


/* padding-right:15px; */


/* } */

.plot_col p,
.plot_col ul {
    padding: 0px !important;
    margin: 0px !important;
}

.plot_col .plot_ul {
    /*display:none;*/
}

.plot_col:hover .plot_col ul.plot_ul {
    display: block;
}

.plot_green {
    background: green !important;
    color: #FFFFFF !important;
}

.plot_red {
    background: red !important;
    color: #FFFFFF !important;
}

.plot_blue {
    background: blue !important;
    color: #FFFFFF !important;
}

.plot_pink {
    background: #FF7189 !important;
    color: #FFFFFF !important;
}

.box_available {
    background: #23B14D !important;
    color: #FFFFFF !important;
}

.box_token {
    background: #9AD9EA !important;
    color: #000000 !important;
}

.box_partpayment {
    background: #FEAEC9 !important;
    color: #000000 !important;
}

.box_booked {
    background: red !important;
    color: #FFFFFF !important;
}

.box_emi {
    background: #c4c4c4 !important;
    color: #000000 !important;
}

.box_register {
    background: #000000 !important;
    color: #ffffff !important;
}


/* Tooltip container */

.plot_col .tooltip2 {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
    /* If you want dots under the hoverable text */
}


/* Tooltip text */

.plot_col .tooltip2 .tooltiptext {
    visibility: hidden;
    width: 250px;
    box-shadow: 0 2px 20px rgba(65, 131, 215, 0.22), 0 2px 11px rgba(65, 131, 215, 0.15) !important;
    background: #FFFFFF;
    word-wrap: break-word;
    color: #000000;
    text-align: center;
    padding: 8px 12px;
    border-radius: 3px;
    top: 100%;
    left: 50%;
    margin-left: -60px;
    position: absolute;
    z-index: 1;
}

.plot_col .tooltip2 .tooltiptext p {
    margin-bottom: 3.5px !important;
}

.plot_col .tooltip2 .tooltiptext .tooltip_col1 {
    display: inline-block;
    text-align: left;
    width: 45%;
    margin-bottom: 3.5px !important;
    vertical-align: top;
}

.plot_col .tooltip2 .tooltiptext .tooltip_col2 {
    display: inline-block;
    text-align: left;
    width: 53%;
    margin-bottom: 3.5px !important;
    vertical-align: top;
}


/* Show the tooltip text when you mouse over the tooltip container */

.plot_col .tooltip2:hover .tooltiptext {
    visibility: visible;
}

.multitextarea {
    max-height: 120px !important;
    height: 120px !important;
    background: none !important;
}

.genealogy-scroll::-webkit-scrollbar {
    width: 5px;
    height: 8px;
}

.genealogy-scroll::-webkit-scrollbar-track {
    border-radius: 10px;
    background-color: #e4e4e4;
}

.genealogy-scroll::-webkit-scrollbar-thumb {
    background: #212121;
    border-radius: 10px;
    transition: 0.5s;
}

.genealogy-scroll::-webkit-scrollbar-thumb:hover {
    background: #4183D7;
    transition: 0.5s;
}

.genealogy-body {}

.genealogy-tree {
    display: flex;
}

.genealogy-tree ul {
    padding-top: 20px;
    position: relative;
    padding-left: 0px;
    display: flex;
}

.genealogy-tree li {
    text-align: center;
    list-style-type: none;
    position: relative;
    padding: 20px 5px 0 5px;
}

.genealogy-tree li::before,
.genealogy-tree li::after {
    content: '';
    position: absolute;
    top: 0;
    right: 50%;
    border-top: 2px solid #ccc;
    width: 50%;
    height: 18px;
}

.genealogy-tree li::after {
    right: auto;
    left: 50%;
    border-left: 2px solid #ccc;
}

.genealogy-tree li:only-child::after,
.genealogy-tree li:only-child::before {
    display: none;
}

.genealogy-tree li:only-child {
    padding-top: 0;
}

.genealogy-tree li:first-child::before,
.genealogy-tree li:last-child::after {
    border: 0 none;
}

.genealogy-tree li:last-child::before {
    border-right: 2px solid #ccc;
    border-radius: 0 5px 0 0;
    -webkit-border-radius: 0 5px 0 0;
    -moz-border-radius: 0 5px 0 0;
}

.genealogy-tree li:first-child::after {
    border-radius: 5px 0 0 0;
    -webkit-border-radius: 5px 0 0 0;
    -moz-border-radius: 5px 0 0 0;
}

.genealogy-tree ul ul::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    border-left: 2px solid #ccc;
    width: 0;
    height: 20px;
}

.genealogy-tree li a {
    text-decoration: none;
    color: #666;
    font-size: 11px;
    display: inline-block;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}

.genealogy-tree li a:hover+ul li::after,
.genealogy-tree li a:hover+ul li::before,
.genealogy-tree li a:hover+ul::before,
.genealogy-tree li a:hover+ul ul::before {
    border-color: #4183D7;
}

.genealogy-tree li a:hover+ul li .member-view-box,
.genealogy-tree li a:hover .member-view-box {
    background: #c8e4f8;
    color: #000;
    border: 1px solid #94a0b4;
}

.member-view-box {
    border: 1px solid #ccc;
    padding: 5px 10px;
    text-decoration: none;
    color: #666;
    font-size: 11px;
    display: inline-block;
    width: auto;
    height: auto;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    word-break: break-word !important;
}

.member-image {
    width: 70px;
    position: relative;
}

.member-image p {
    font-size: 13px;
    /* color:#000000; */
    margin-bottom: 5px;
}

.member-image img {
    width: auto;
    height: 60px;
    border-radius: 6px;
    z-index: 1;
}

.genealogy-tree1 {
    display: flex;
}

.genealogy-tree1 ul {
    padding-top: 20px;
    position: relative;
    padding-left: 0px;
    display: flex;
}

.genealogy-tree1 li {
    text-align: center;
    list-style-type: none;
    position: relative;
    padding: 20px 5px 0 5px;
}

.genealogy-tree1 li::before,
.genealogy-tree1 li::after {
    content: '';
    position: absolute;
    top: 0;
    right: 50%;
    border-top: 2px solid #ccc;
    width: 50%;
    height: 18px;
}

.genealogy-tree1 li::after {
    right: auto;
    left: 50%;
    border-left: 2px solid #ccc;
}

.genealogy-tree1 li:only-child::after,
.genealogy-tree1 li:only-child::before {
    display: none;
}

.genealogy-tree1 li:only-child {
    padding-top: 0;
}

.genealogy-tree1 li:first-child::before,
.genealogy-tree1 li:last-child::after {
    border: 0 none;
}

.genealogy-tree1 li:last-child::before {
    border-right: 2px solid #ccc;
    border-radius: 0 5px 0 0;
    -webkit-border-radius: 0 5px 0 0;
    -moz-border-radius: 0 5px 0 0;
}

.genealogy-tree1 li:first-child::after {
    border-radius: 5px 0 0 0;
    -webkit-border-radius: 5px 0 0 0;
    -moz-border-radius: 5px 0 0 0;
}

.genealogy-tree1 ul ul::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    border-left: 2px solid #ccc;
    width: 0;
    height: 20px;
}

.genealogy-tree1 li a {
    text-decoration: none;
    color: #666;
    font-size: 11px;
    display: inline-block;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}

.genealogy-tree1 li a:hover+ul li::after,
.genealogy-tree1 li a:hover+ul li::before,
.genealogy-tree1 li a:hover+ul::before,
.genealogy-tree1 li a:hover+ul ul::before {
    border-color: #4183D7;
}

.genealogy-tree1 li a:hover+ul li .member-view-box,
.genealogy-tree1 li a:hover .member-view-box {
    background: #c8e4f8;
    color: #000;
    border: 1px solid #94a0b4;
}

.navbar-dark .navbar-nav .nav-link {
    min-width: 175px;
}