textarea:focus, input:focus, select:focus{outline: none;}
button.accordion-button:focus, button.accordion-button:not(.collapsed){box-shadow: none;}
.hide{display: none !important;}
.vertical-center{margin: auto; display: block;}
.paging_simple_numbers{display: ruby;}

.keyword-type{font-size: 1.4rem; background: #e3eeea; color:#2d483f; padding: 1px 5px; border-radius: 5px; margin-right: 5px;}

/* Datasets list */
.list_frame{display: flex;}
.list_frame > .filter_util{width: 30rem;float: left;}
.list_frame > .filter_util .filter h3{margin-bottom: 1.5rem;}
.list_frame > .filter_util button.accordion-button{font-size: 1.6rem; background: #f7f8fa;}
.list_frame > .filter_util button.accordion-button:not(.collapsed){background-color: #f7f8fa;}
.list_frame > .filter_util .accordion-body{font-size: 1.3rem;user-select: none;}
.list_frame > .filter_util .filter input{font-size: 1.3rem; width: 100%; padding: 0 1rem; height: 3.5rem;}
.list_frame > .filter_util .filter input::placeholder{font-size: 1.3rem;}
.list_frame > .table_frame{width: calc(100% - 30rem);float: left; padding-left: 3rem;}
.list_frame > .table_frame #dataset_table a{color: #007546;}
.list_frame > .table_frame #dataset_table a:hover{text-decoration: underline;}

.filter_item{line-height: 3rem;}
.filter_item span{background: #f0f0f0; padding: 0.3rem 1rem; border-radius: 1rem; cursor: pointer;user-select: none; margin-right: 5px;}
.filter_item span:last-child{margin-right: 0;}
.filter_item  span.active{background: #00623a; color: #fff;}
div.items{display: inline-block; padding-right: 3rem;}
div.items span{color: #008952; padding-left: 0.8rem; /* cursor: pointer; */}
div.items span i{cursor: pointer; color: #adadad; font-weight: 600; padding: 0 0.3rem; font-size: 1.4rem;}
/* div.items span:hover{text-decoration: line-through;} */
.select2-container{width: 100% !important; font-size: 1.5rem;}

.selected_filter{background: whitesmoke; padding: 1rem 2rem; margin-bottom: 2rem; font-size: 1.4rem; user-select: none;}
.selected_filter > div {display: inline-block; user-select: none;}
.selected_filter .clear{margin-right: 1rem; border: 1px solid #c5c5c5; padding: 0 1rem; border-radius: 5px; background: #FAFBFC;}
.selected_filter .clear:hover{background: #155CD6; border-color: #155CD6; color: #fff; transition:0.3s}

/* Datasets detail */
.dataset_frame{display: flow-root;}
.dataset_frame > .sidemenu_frame{float:left;position: absolute; user-select: none;}
.dataset_frame > .sidemenu_frame.full{width: 35rem;}
.dataset_frame > .sidemenu_frame .navigation{border: 1px solid #dee2e6;}
.dataset_frame > .sidemenu_frame .navigation .navmenu{padding: 0.8rem 1.5rem; border-bottom: 1px solid #dee2e6;}
.dataset_frame > .sidemenu_frame .navigation .navmenu.active{background: #E7EFFB !important; color: #145CD6 !important;}
.dataset_frame > .sidemenu_frame .navigation .navmenu a {display: block;width: 100%;}
.dataset_frame > .sidemenu_frame .navigation .navmenu a:hover {color: #145CD6;}
.dataset_frame > .sidemenu_frame .navigation .navmenu.head{background: #f4f5f9; font-weight: bold; color: #052c65; border-bottom: 1px solid #dee2e6;}
.dataset_frame > .sidemenu_frame .navigation .navmenu.head > .icon{background:#E7EFFB; color:#145CD6;font-size:1.3rem; padding: .4rem 0.6rem .3rem; border-radius: 4px; margin-left: 1rem;}
.dataset_frame > .sidemenu_frame .navigation .navmenu.head i {float: right; cursor: pointer;}
.dataset_frame > .sidemenu_frame .navigation .navmenu.dpt1{background: #f4f5f9; font-weight: bold; color: #052c65; border-bottom: 1px solid #dee2e6;}
.dataset_frame > .sidemenu_frame .navigation .navmenu.dpt2{font-size: 1.5rem; font-weight: 500;}
.dataset_frame > .sidemenu_frame .navigation .navmenu.dpt2.sub{cursor: pointer;}
.dataset_frame > .sidemenu_frame .navigation .navmenu.dpt2 i {float: right;}
.dataset_frame > .sidemenu_frame .navigation .dpt3{font-size: 1.5rem; background: #f7f7f7;}
.dataset_frame > .sidemenu_frame .navigation .dpt3 .navmenu{border-bottom: none; background: #f7f7f7; padding: 0.5rem 1.5rem 0.5rem 2.5rem;}
.dataset_frame > .sidemenu_frame .navigation .dpt3 .navmenu a::before{content: '\25AB'; padding-right: 0.7rem;}

.dataset_frame > .info_frame{float: right; padding-left: 2rem;}
.dataset_frame > .info_frame.full{width: calc(100% - 35rem);}
.dataset_frame > .info_frame button.accordion-button{font-size: 1.7rem; background: #f7f8fa; font-weight: bold; border-bottom: 1px solid #dee2e6;}
.dataset_frame > .info_frame button.accordion-button:not(.collapsed){background-color: #f7f8fa;}
.dataset_frame > .info_frame .accordion-body .tab-pane{padding: 2rem;}

.dataset_frame > .info_frame .based_selector_util{display: flow-root;}
.dataset_frame > .info_frame .based_selector_util > select{float: left; margin-right: 1rem; background: #f3f3f3 url(../img/main/arrow.png) no-repeat 97% 50% !important; font-weight: 500; border-radius: 5px; height: 3.5rem; padding: 0 2.5rem 0 1rem;}
.dataset_frame > .info_frame .based_selector_util > select > option {background: #fff !important; color: #000;}
.dataset_frame > .info_frame .nav-link{padding: 0.7rem 2rem; color: #000;}
.dataset_frame > .info_frame .nav-link.active{color: #148557;}

.dataset_frame .keymetrics {padding: 2rem 0rem 0rem 0rem;}
.dataset_frame .keymetrics .key_cnt{font-weight: 500; font-size: 2.3rem;}

.qcmetrics:not(:first-child) {padding: 2rem 0rem 0rem 0rem;}
.qcmetrics .qc_cnt{font-weight: 500; font-size: 2.3rem;}

.dataset_frame > .sidemenu_frame.small{width: 5rem;}
.dataset_frame > .info_frame.small{width: calc(100% - 5rem);}

.dataset_frame > .sidemenu_frame.small .navigation_small{text-align: center; border: 1px solid #dee2e6; border-radius: 7px;}
.dataset_frame > .sidemenu_frame.small .navigation_small > div{cursor: pointer;}
.dataset_frame > .sidemenu_frame.small .navigation_small > div:hover{background: #E7EFFB;}
.dataset_frame > .sidemenu_frame.small .navigation_small .close{padding: 1rem 0.5rem; background: #155cd6 !important; color: #fff;border-top-left-radius: 5px;border-top-right-radius: 5px;}
.dataset_frame > .sidemenu_frame.small .navigation_small > div img{max-height: 20px; max-width: 20px;}
.dataset_frame > .sidemenu_frame.small .navigation_small > div > a{display: block; width: 100%; padding: 1rem 0.5rem;}

.info_frame #info_table td{border: none;}
.info_frame #info_table td a{color: #155CD6; text-decoration: underline; }

.info_frame .degtable {font-size: 1.4rem;}
.info_frame .degtable tbody, td, tfoot, th, thead, tr{border-color: lightgray;}

.info_frame .accordion-button:not(.collapsed)::after{background-image: none;}
.info_frame .accordion-button{cursor: auto;}

.ftp_info {margin: 0.5rem; border: var(--bs-accordion-border-width) solid var(--bs-accordion-border-color); padding: 1.5rem;}

/* statistics table */
.statistics_table1 {margin-top: 6rem;}
.statistics_table1 span { background: rgb(136, 179, 209); color: #000; font-size: 1.5rem;padding: 3px 7px; border-radius: 10px;margin-right: 0.5rem;}
.statistics_table1 strong {width:200px; font-size: 2rem; font-style: italic; font-weight: bold; margin-right: 1rem;}
#disease_table {border-top:1px rgba(255, 255, 255, 0.5); line-height:28px; margin: 20px 10px;}
#disease_table thead {font-size:13px; border:0; --bs-table-bg: rgb(201, 224, 240); font-weight: bold; }
#disease_table td {vertical-align: middle; font-size: 13px;}
#disease_table .bg {background: #F4F5F9;}

.statistics_table2 {margin-top: 6rem;}
.statistics_table2 span { background: rgb(207, 200, 232); color: #000; font-size: 1.5rem;padding: 3px 7px; border-radius: 10px;margin-right: 0.5rem;}
.statistics_table2 strong {width:200px; font-size: 2rem; font-style: italic; font-weight: bold; margin-right: 1rem;}
#gene_table {border-top:1px rgba(255, 255, 255, 0.5); line-height:28px; margin: 20px 10px;}
#gene_table thead {font-size:13px; border:0; --bs-table-bg: rgb(224, 219, 239); font-weight: bold; }
#gene_table td {vertical-align: middle; font-size: 13px;}
#gene_table .bg {background: #F4F5F9;}

/* download */
.download_btn {background: #00623a; color: #fff; padding: 0.3rem 1rem; border-radius: 1rem; cursor: pointer;user-select: none; margin-right: 5px; font-size: 1.4rem;} 
/* .explore_btn {background: #00623a; color: #fff; padding: 0.3rem 1rem; border-radius: 1rem; cursor: pointer;user-select: none; margin-right: 5px;}  */
.modal-footer-btn {background: #d8d9df; padding: 0.3rem 1rem; border-radius: 1rem; cursor: pointer;user-select: none; margin-right: 5px; font-size: 1.4rem;}
.modal-footer-btn:hover {background:#00623a; color: #fff; transition: 0.3s;}
.modal-header{border: none;}
.modal-content {min-width: 820px;}
.modal-title {font-weight: bold;}
.modal_table {border-collapse: separate; border-spacing: 0px 1rem;}
.download_modal {margin: 1rem;}
/* explore list */
#pagination {text-align: center; margin-top: 20px;}
#pagination > li.page-item{
	display: inline-block;
    border: 1px solid #cdcdcd;
    padding: 5px 15px;
    margin-right: 5px;
    border-radius: 3px;
    cursor: pointer;
 }
 
#pagination > li.page-item.active{
	background: #00623a; color: #fff;
}
.modal-header{padding: 1rem 2rem;}
.modal-header h1{font-size: 2rem;}
.modal-body{padding: 2rem;}

.code{padding: 0.7rem 1rem; border: 1px solid #dddddd; background: #f7f7f7;}
.modal-body {font-size: 1.5rem;}
.modal-body .tit{color: #002f1c; font-size: 1.4rem; font-weight: 600; margin-bottom: 0.5rem;}
.modal-body .tit:not(:first-child){margin-top: 2rem;}
.modal-body .details_desc{font-size: 1.4rem; margin-top: 1.5rem;}
.modal-body .details_desc p{margin-bottom: 1rem;}
.code .copy{float: right; font-size: 1.4rem; color: #005b37; font-weight: 500; cursor: pointer; user-select: none;}

/* download2 */
.quick_menu_download{display:flex;gap:1rem; margin-top: 2rem;}
.quick_menu_download li{flex:1; padding: 1rem; border-bottom: 1px solid #fff;}
.quick_menu_download li > div.img{width: 40%; float:left; text-align: center; line-height: 6; box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px; border-radius: 20px;}
.quick_menu_download li > div.img img{width: 100%; max-width: 65px; max-height: 65px;}
.quick_menu_download li > div.desc{width: 60%; float:left; font-size: 1.4rem; padding-left: 2rem;}
.quick_menu_download li > div.desc strong{font-size: 1.7rem; color: #00462a; font-weight: bold;}
.quick_menu_download li > a{border-radius:1.2rem;text-align: center;height:16rem;display:flex;flex-direction: column;justify-content: space-between;color:#333333;font-weight:600;padding:3rem 1rem;word-break: keep-all;line-height:1.2;transition: all .2s;}
.quick_menu_download li > a:hover, .quick_menu_download li > a:focus{transform: translateY(-2rem);text-decoration: underline;background:#E5EBF7;}
.quick_menu_download li > a > i{display:block;margin-bottom:2rem;}
.quick_menu_download li > div.desc div:not(:first-child):hover {color: #007546; text-decoration: underline;}
.explore_link{white-space: nowrap;} 
.marker_gene { margin: 1rem;}
.download_data{cursor: pointer;}
.download_marker{cursor: pointer;}
span.size{color: gray; font-size: 1.3rem; margin-left: 0.5rem;}
.rds_size{margin-bottom: .5rem; font-size: 1.4rem; color: #818181;}

/* .quick_menu_download li:hover > div.desc strong{color: #007546; text-decoration: none;} */

/* Highcharts style */
#scmc1_number text{font-size: 1.2rem !important;}
#scmc1_number .highcharts-title{font-weight: normal !important; font-size: 1.5rem !important;}
#scmc1_number .highcharts-data-label text{font-weight: normal !important;}
#scmc1_strength text{font-size: 1.2rem !important;}
#scmc1_strength .highcharts-title{font-weight: normal !important; font-size: 1.5rem !important;}
#scmc1_strength .highcharts-data-label text{font-weight: normal !important;}
#cell_count_frame text{font-size: 1.2rem !important;}
#cell_count_frame .highcharts-title{font-weight: bold !important; font-size: 2rem !important;}
#cell_count_frame .highcharts-data-label text{font-weight: normal !important;}
#year_frame text{font-size: 1.2rem !important;}
#year_frame .highcharts-title{font-weight: bold !important; font-size: 2rem !important;}
#year_frame .highcharts-data-label text{font-weight: normal !important;}

.highcharts-container text{font-size: 1.2rem !important;}
#snac3_pathway g.highcharts-xaxis-labels text{font-size: 0.9rem !important;}
#scmc2_incoming g.highcharts-yaxis-labels text{font-size: 0.9rem !important;}
#scmc2_incoming g.highcharts-xaxis-labels text{font-size: 0.9rem !important;}
#scmc2_outgoing g.highcharts-yaxis-labels text{font-size: 0.9rem !important;}
#scmc2_outgoing g.highcharts-xaxis-labels text{font-size: 0.9rem !important;}

/* help */
.help {display: flex;}
.help .help-body{width: calc(100% - 20rem); display: inline-block; float: left;}
.help .title{font-size: 2rem; font-weight: bold; border-bottom: 3px solid black; user-select: none;}
.help p{padding: 2rem 0 0 1rem;}
.help img{width: 70%; margin: 0 auto; display: block; margin-top: 3rem; margin-bottom: 5rem;}
.help .left-menu-frame{width: 20rem; display: inline-block; float: left;}
.help ul.left-menu{position: fixed; width: 17rem;}
.help ul.left-menu li{background: #F4F5F9; border: 1px solid #e8e9ea;}
.help ul.left-menu li a{display: block; width: 100%; padding: 7px 20px;}
.help ul.left-menu li a.active{font-weight: bold;}

/* START TOOLTIP STYLES */
[tooltip] {
  position: relative; /* opinion 1 */
}

/* Applies to all tooltips */
[tooltip]::before,
[tooltip]::after {
  text-transform: none; /* opinion 2 */
  font-size: .9em; /* opinion 3 */
  line-height: 1;
  user-select: none;
  pointer-events: none;
  position: absolute;
  display: none;
  opacity: 0;
}
[tooltip]::before {
  content: '';
  border: 5px solid transparent; /* opinion 4 */
  z-index: 1001; /* absurdity 1 */
}
[tooltip]::after {
  content: attr(tooltip); /* magic! */
  
  /* most of the rest of this is opinion */
  font-family: Helvetica, sans-serif;
  text-align: center;
  
  /* 
    Let the content set the size of the tooltips 
    but this will also keep them from being obnoxious
    */
  min-width: 3em;
  white-space: nowrap;
  padding: 1rem 1.5rem;
  border-radius: .3ch;
  box-shadow: 0 1em 2em -.5em rgba(0, 0, 0, 0.35);
  background: #000;
  color: #fff;
  z-index: 1000; /* absurdity 2 */
}

/* Make the tooltips respond to hover */
[tooltip]:hover::before,
[tooltip]:hover::after {
  display: block;
}

/* don't show empty tooltips */
[tooltip='']::before,
[tooltip='']::after {
  display: none !important;
}

/* FLOW: UP */
[tooltip]:not([flow])::before,
[tooltip][flow^="up"]::before {
  bottom: 100%;
  border-bottom-width: 0;
  border-top-color: #333;
}
[tooltip]:not([flow])::after,
[tooltip][flow^="up"]::after {
  bottom: calc(100% + 5px);
}
[tooltip]:not([flow])::before,
[tooltip]:not([flow])::after,
[tooltip][flow^="up"]::before,
[tooltip][flow^="up"]::after {
  left: 50%;
  transform: translate(-50%, -.5em);
}

/* FLOW: DOWN */
[tooltip][flow^="down"]::before {
  top: 100%;
  border-top-width: 0;
  border-bottom-color: #333;
}
[tooltip][flow^="down"]::after {
  top: calc(100% + 5px);
}
[tooltip][flow^="down"]::before,
[tooltip][flow^="down"]::after {
  left: 50%;
  transform: translate(-50%, .5em);
}

/* FLOW: LEFT */
[tooltip][flow^="left"]::before {
  top: 50%;
  border-right-width: 0;
  border-left-color: #333;
  left: calc(0em - 5px);
  transform: translate(-.5em, -50%);
}
[tooltip][flow^="left"]::after {
  top: 50%;
  right: calc(100% + 5px);
  transform: translate(-.5em, -50%);
}

/* FLOW: RIGHT */
[tooltip][flow^="right"]::before {
  top: 50%;
  border-left-width: 0;
  border-right-color: #333;
  right: calc(0em - 5px);
  transform: translate(.5em, -50%);
}
[tooltip][flow^="right"]::after {
  top: 50%;
  left: calc(100% + 5px);
  transform: translate(.5em, -50%);
}

/* KEYFRAMES */
@keyframes tooltips-vert {
  to {
    opacity: .9;
    transform: translate(-50%, 0);
  }
}

@keyframes tooltips-horz {
  to {
    opacity: .9;
    transform: translate(0, -50%);
  }
}

/* FX All The Things */ 
[tooltip]:not([flow]):hover::before,
[tooltip]:not([flow]):hover::after,
[tooltip][flow^="up"]:hover::before,
[tooltip][flow^="up"]:hover::after,
[tooltip][flow^="down"]:hover::before,
[tooltip][flow^="down"]:hover::after {
  animation: tooltips-vert 300ms ease-out forwards;
}

[tooltip][flow^="left"]:hover::before,
[tooltip][flow^="left"]:hover::after,
[tooltip][flow^="right"]:hover::before,
[tooltip][flow^="right"]:hover::after {
  animation: tooltips-horz 300ms ease-out forwards;
}

.ui-helper-hidden-accessible {
  display: none !important;
}

.img-download{text-align: right;}
.img-download img{width: 20px;}

.autocomplete-custom-li{cursor: pointer;}

#downloadModal div.code{
	width: 100%;
    display: flex;
}
#downloadModal div.code code{
	width: 95%;
}