.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, .cs_section1 {width:100%; float: none; background-color: lightgrey; text-align: center; min-height:55px;padding: 3px;}
.cs_spacer {min-height: 10px !important; background-color: transparent;}
.cs_section1 {display:flex;}
.cs_section_alpha {min-height:40px;}
.cs_section_left {width:25%; float: left;}
.cs_section_right {width:18%; float: right; text-align: right;}
.cs_section_center {width: 56%; float: left; text-align:center; padding-right:10%;}
@media all and (max-width:320px){.cs_kb_col{width:32%}}
.cs_button {width:120px;}
.result_area, .result_area_ind, .result_area_one {min-height:80px; margin:0 auto; margin-top: 10px; max-width: 100%;}
.result_area_tree {min-height: 180px; margin: 0 auto; margin-top: 10px; padding-bottom: 20px; border:1px solid black;}
.tree-container {display: flex; justify-content: center; overflow: auto; padding-bottom: 10px;}
.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 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; min-height:35px;}
.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 !important;}
    .l3 {display:none;}
    .cs_name_button, .cs_surname_button {width: 75px !important}
    .cs_modalDialog {display: none;}
    .cs_note_button, .cs_section_right, .cs_tree_btn {display:none !important;}
    .cs_section_alpha {height:140px !important;}
    }
@media screen and (max-width: 800px) {
    .cs_section_alpha {height:80px !important;}
}
.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_border {border: 1px solid black;}
.cs_male {background-color: lightblue !important;}
.cs_female {background-color: lightpink !important;}
.cs_blank_row {height: 10px !important; background-color: #ffffff !important;}
.cs_my_button {font-size: 14px;}
.cs_my_btn {font-size: 14px; min-height:50px;}
button, .cs_my_btn {font-size: 13px; cursor: pointer; margin: 2px 0; border: 2px #000000; border-style: groove; border-radius: 4px; padding: 3px 4px !important; color: #000000;background-color: #afafaf;}
button:hover, .cs_my_btn:hover {color:gray; background-color: transparent !important; background-repeat:no-repeat !important;}
.ind_btn{padding: 0; border: none; font-size: 14px; color: inherit; background-color: transparent !important; text-decoration: underline; cursor: pointer;}
.cs_button1 {background-color: transparent !important; font-size: 12px !important; padding: 3px 0 !important; border-radius: 5px !important; }
.cs_tree_btn {background-image: url("images/tree-small.jpg") !important; background-repeat: no-repeat; height: 36px; text-align: right; width: 130px;
font-size: 11px;}
.cs_alpha_btn, .cs_alpha_btn:visited, .cs_alpha_btn:hover {margin:3px 3px 0 3px !important; background-color: lightslategrey !important; font-size: 13px !important; border: 1px solid lightslategrey !important;}
.cs_alpha_btn a {text-decoration:none !important; color: #000000 !important;}
.cs_alpha_btn:hover {color:gray; background-color: transparent !important; background-repeat:no-repeat !important; border: 1px solid black !important;}
.cs_note_button {background-image: url("images/note.png") !important; background-repeat: no-repeat; height: 45px; width: 45px; background-color: transparent !important;}
@media screen and (max-width: 800px){.tree-container {margin-left: 10px !important; overflow: scroll; }}
.cs_surname_button, .cs_name_button {float:left; background-color: gray;}
.cs_solo {margin-left:50px}
.gs_admin {border: 1px solid black; width: 500px; padding: 20px 0 20px 20px; border-radius: 5px;}
.gs_page_container {width:100%; min-height: 150px;}
.gs_page_photo {width: 145px; float:left;}
.gs_page_facts {width:70%; float:left; padding: 15px 0 0 15px; font-size: large;}

/*New tree*/
html {box-sizing: border-box;}
*, *:before, *:after {box-sizing: inherit;}
/*body {user-select: none;}*/
#gstr_family-graph {width: 100%; height: 100%;}
#gstr_wrapper {margin-top: 50px; position: relative;}
#gstr_root-left {position: relative; display: table-cell; vertical-align: middle;}
#gstr_root-right {position: relative; display: table-cell; vertical-align: middle;}
#gstr_main-root {position: relative; display: table-cell; vertical-align: middle; min-width: 150px;}
.gstr_branch {position: relative; margin-left: 0px;}
.gstr_branch:before {content: ""; width: 20px; border-top: 2px solid black; position: absolute; left: -80px; top: 50%; margin-top: 1px;}
.gstr_entry {position: relative; min-height: 60px; min-width: 150px;}
.gstr_entry:before {content: ""; height: 100%; position: absolute; border-left: 2px solid black; left: -60px;}
.gstr_entry:after {content: ""; width: 20px; border-top: 2px solid black; position: absolute; left: -60px; top: 50%; margin-top: 1px;}
.gstr_entry:first-child:before {width: 10px; height: 50%; top: 50%; margin-top: 2px; border-radius: 10px 0 0 0;}
.gstr_entry:first-child:after {height: 10px; border-radius: 10px 0 0 0;}
.gstr_entry:last-child:before {width: 10px; height: 50%; border-radius: 0 0 0 10px;}
.gstr_entry:last-child:after {height: 10px; border-top: none; border-bottom: 2px solid black; border-radius: 0 0 0 10px; margin-top: -10px;}
.gstr_entry.sole:after {width: 20px; height: 0px; margin-top: 1px; border-radius: 0px}
.gstr_entry.sole:before {display: none;}
.gstr_label {display: block; width: 200px; padding: 5px 10px; line-height: 18px !important; text-align: center; border: 2px solid silver; border-radius: 5px; position: absolute;
    left: -40px; top: 50%; margin-top: -15px; overflow-wrap: break-word; background-color: lightblue; font-size: 12px; min-height: 30px;}
.gstr_branch-inverse {position: relative; margin-right: 250px;}
.gstr_branch-inverse:before {content: ""; width: 30px; border-top: 2px solid black; position: absolute; right: -190px; top: 50%; margin-top: 1px;}
.gstr_entry-inverse {position: relative; min-height: 60px; min-width: 100px;}
.gstr_entry-inverse:after {content: ""; width: 20px; border-top: 2px solid black; position: absolute; right: -160px; top: 50%; margin-top: 1px;}
.gstr_entry-inverse:before {content: ""; height: 100%; border-right: 2px solid black; position: absolute; right: -160px;}
.gstr_entry-inverse:first-child:before {width: 10px; height: 50%; top: 50%; margin-top: 2px; border-radius: 0 10px 0 0;}
.gstr_entry-inverse:first-child:after {height: 10px; border-radius: 0 10px 0 0;}
.gstr_entry-inverse:last-child:before {width: 10px; height: 50%; border-radius: 0 0 10px 0;}
.gstr_entry-inverse:last-child:after {height: 10px; border-top: none; border-bottom: 2px solid black; border-radius: 0 0 10px 0; margin-top: -10px;}
.gstr_entry-inverse.sole:after {width: 20px; margin-top: 1px; border-radius: 0px}
.entry-inverse.sole:before {display: none;}
.gstr_label-inverse {display: block; width: 200px; padding: 5px 10px; line-height: 18px !important; text-align: center; border: 2px solid silver; border-radius: 5px; position: absolute;
    right: -140px; top: 50%; margin-top: -15px; overflow-wrap: break-word; background-color: lightblue; font-size: 12px; min-height: 30px;}

/*Modal CSS */
.cs_modalDialog {position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0, 0, 0, 0.8); z-index: 99999; opacity:0; transition: opacity 400ms ease-in; overflow: auto;
    pointer-events: none;}
.cs_modalDialog:target {opacity:1; pointer-events: auto;}
.cs_modalDialog > div { width: 800px; position: relative; margin: 10% auto; padding: 5px 20px 13px 20px; border-radius: 10px; background: #fff; background: -o-linear-gradient(#fff, #999);
    text-align: justify;}
.cs_close {background: #606061; color: #FFFFFF; line-height: 25px; position: absolute; right: -12px; text-align: center; top: -10px; width: 24px; text-decoration: none;
    font-weight: bold; border-radius: 12px; box-shadow: 1px 1px 3px #000;}
.cs_close:hover {background: #00d9ff;}

/*Grid stuff*/
.gs_item {display: grid; justify-content: center; align-items: center;}
.gs_grid-container {display: grid; grid-gap: 5px; }
.gs_grid-container1 {display: grid; margin-top: 7px; grid-gap: 5px; }

/*Widget css*/
.gs_widget1 {width:100%;}
.gs_widget2 {width:75%; font-size: small; line-height:16px; padding:3px;}
.gs_widget3 {width:25%; font-size: small; line-height:16px;}
.sml-text {width:50px;}
table {border-collapse: collapse;}
table, th, td  {border: 1px solid black; padding:7px;}
.gs_widget_bgg {background-color: lightgrey;}
.gs_widget_bgp {background-color: lightpink;}
.gs_widget_bggr {background-color: lightgreen;}

/*Tooltip*/
.gs_tooltip {position: relative; display: inline-block;}
.gs_tooltip .gs_tooltiptext {visibility: hidden; width: 120px; background-color: black; color: #fff; font-family: "Times New Roman";text-align: center; border-radius: 6px; padding: 5px 0; position: absolute; z-index: 1; bottom: 150%; left: 50%; margin-left: -60px;}
.gs_tooltip:hover .gs_tooltiptext {visibility: visible;}
.gs_tooltip .gs_tooltiptext::after {content: " ";position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: black transparent transparent transparent;}