.col {width:24%; float:left;}
.cs-full {width:1000px;}
.cs_kb_cont {width:100%; margin:0 auto;)}
.cs_kb_row {width:100%;}
.cs_kb_col, .cs_kb_col_sn  {padding:3px; text-align:center; float:left;}
.cs_kb_col_p {width:25%; text-align:center; float:left; }
.cs_kb_col_pf {width:25%; text-align:right; float:left; }
.cs_kb_col_pl {width:50%; text-align:left; float:left; }
.cs_col_p_head {background-color: lightsteelblue; font-weight: bold;}
.cs_clearfix:after {content: " "; display: block;  height: 0;   clear: both;}
#cs_names {width:100%;}
.cs_section {width:100%; float: none; background-color: lightgrey; text-align: center; min-height:25px;padding: 3px;}
@media all and (max-width:320px){.cs_kb_col{width:32%}}
.cs_button {width:120px;}
.result_area, .result_area_ind {min-height:50px; margin:0 auto;}
.result_area_tree {margin-left:100px; min-height:150px; margin:0 auto;}
.tree-container {margin-left:100px !important;}
.cs_loading {width:20px; height:20px; background: url("images/spinner.gif") no-repeat center; float:left;}
.hidden {display:none;}
.cs_table {margin:0 auto;padding:0;border:1px solid #000000; overflow-y: auto;width:100%;border-collapse:collapse;table-layout: fixed;}
.cs_table::-webkit-scrollbar {-webkit-appearance: none; width: 14px;height: 14px;}
.cs_table::-webkit-scrollbar-thumb {border-radius: 8px; border: 3px solid #fff;background-color: rgba(0, 0, 0, .3);}
.cs_table table{border-collapse: collapse;border-spacing: 0; width:100%; height:100%; margin:0;padding:0;}
.cs_table tr:nth-child(odd){background-color:#e5e5e5;}
.cs_table tr:nth-child(even){background-color:#ffffff;}
.cs_table td{vertical-align:middle;	border:1px solid #000;text-align:left;padding:7px;font-size:14px;font-weight:normal;color:#000000;}
.cs_table th{background-color: #bfe7f3;text-align: left;padding: 6px;border-bottom: 1px dotted #ccc;}
.cs_tbl {width:100%; overflow-x:auto; font-size:11px;}
@media screen and (max-width: 600px) {
    .cs_table thead {border: none;clip: rect(0 0 0 0);height: 1px; margin: 0px; overflow: hidden; padding: 0; position: absolute; width: 1px;}
    .cs_table tr {border-bottom: 3px solid #000;display: block;}
    .cs_table td {border:1px solid #000; display: block;text-align: right; border-right: none;}
    .cs_table td::before {content: attr(data-label);float: left;padding-right: 10px;}
    .tree_btn {display:none;}
}
.cs_red {color:red;}
.cs_green{color: green;}
.cs_marriage {background-color: #98FB98 !important;}
.cs_birth {background-color: #d59595 !important;}
.cs_death {background-color: #778899 !important;}
.cs_bold {font-weight: bold !important;}
.cs_male {background-color: lightblue !important;}
.cs_female {background-color: lightpink !important;}
.cs_blank_row {height: 10px !important; background-color: #ffffff !important;}
.cs_button1 {background-color: transparent !important; font-size: 12px; padding: 3px !important; border-radius: 5px !important; }
button, .my_btn {padding: 0; border: none; font-size: 13px; cursor: pointer; margin: 2px 0; border: 2px #000000; border-style: groove;
    border-radius: 4px; padding: 3px 4px; color: #000000;background-color: transparent;}
button:hover, .my_btn:hover {color:#ffffff; background-color: #000000;}
.ind_btn {padding: 0; border: none; font-size: 14px; color: inherit; background-color: transparent; text-decoration: underline; cursor: pointer;}

/*Horizontal tree*/
*, *:before, *:after {
    box-sizing: border-box;
}

body {
   user-select: none;
}

#gst-wrapper {
    position: relative;
}

.gst-branch {
    position: relative;
    margin-left: 350px;
}
.gst-branch:before {
    content: "";
    width: 50px;
    border-top: 2px solid #000;
    position: absolute;
    left: -100px;
    top: 50%;
    margin-top: 1px;
}

.gst-entry {
    position: relative;
    min-height: 60px;
}
.gst-entry:before {
    content: "";
    height: 100%;
    border-left: 2px solid #000;
    position: absolute;
    left: -50px;
}
.gst-entry:after {
    content: "";
    width: 50px;
    border-top: 2px solid #000;
    position: absolute;
    left: -50px;
    top: 50%;
    margin-top: 1px;
}
.gst-entry:first-child:before {
    width: 10px;
    height: 50%;
    top: 50%;
    margin-top: 2px;
    border-radius: 10px 0 0 0;
}
.gst-entry:first-child:after {
    height: 10px;
    border-radius: 10px 0 0 0;
}
.gst-entry:last-child:before {
    width: 10px;
    height: 50%;
    border-radius: 0 0 0 10px;
}
.gst-entry:last-child:after {
    height: 10px;
    border-top: none;
    border-bottom: 2px solid #000;
    border-radius: 0 0 0 10px;
    margin-top: -9px;
}
.gst-entry.sole:before {
    display: none;
}
.gst-entry.sole:after {
    width: 50px;
    height: 0;
    margin-top: 1px;
    border-radius: 0;
}

.gst-label_female {
    display: block;
    min-width: 250px;
    padding: 5px 10px;
    line-height: 20px;
    text-align: center;
    border: 2px solid #000;
    border-radius: 5px;
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -15px;
    background-color: lightpink;
}
.gst-label_male {
    display: block;
    min-width: 250px;
    padding: 5px 10px;
    line-height: 20px;
    text-align: center;
    border: 2px solid #000;
    border-radius: 5px;
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -15px;
    background-color: lightblue;
}
.gst-label {
    display: block;
    min-width: 250px;
    padding: 5px 10px;
    line-height: 20px;
    text-align: center;
    border: 2px solid #000;
    border-radius: 5px;
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -15px;
    background-color: lightgreen;
}