@charset "UTF-8";
/* var ####################################### */
/* カラーパネル 2明るい 0暗い */
:root {
    --light-black: #505050;
    --black: #303030;
    --gray: #707070;
    --content-white-2: #f6f9f8;
    --content-white-1: #EBF0ED;
    --content-white-0: #E5EaE6;
    --background-white: #d4dbd6;
    --cream: #FBF0C4;
    --brown: #575848;
    --light-brown: #B0AB99;
    --light-blue: #9DE0D8;
    --blue: #67A8A2;
    --glycoPortal-purple: #9169ce;
    --shadow: rgba(0,0,0,0.5);
}

/* layout ####################################### */
/* 全体のlayout */
html{
    color: var(--light-black);
    font-family: "Robot", sons-serif, "Arial";
    font-size: 100%;
}

body{
    background-color: var(--background-white);
    min-height: 100vh;
}

input:focus{
    background-color: var(--cream);
}

.wrapper{
    margin: 0 auto;
    padding: 0 40px;
    width: 100%;
    margin-bottom: 24px;
}

/* header ######################################## */
.page-header{
    align-items: center;
    background-color: var(--blue);
    box-shadow: 0 10px 10px 0 var(--shadow);
    display: flex;
    justify-content: space-between;
    padding: 12px 28px;
    text-align: center;
}

.nav ul{
    display: flex;
    gap: 20px;
    align-items: center;
    height: 48px;
    list-style: none;
}

.nav a{
    display: block;
    color: var(--light-blue);
    text-decoration: none;
    font-size: 1.6em;
    padding-top: 8px;
}

.nav a:hover{
    color: var(--cream);
    transition: 0.3s;
}

.nav a.selected{
    color: var(--cream);
}

.nav .logo{
    background-image: url('images/logo.jpg');
    background-size: contain;
    width: 104px;
    height: 48px;
    opacity: 1;
}

.progress{
    display: flex;
    gap: 4px;
    margin: 0 12px;
    padding-top: 6px;
    cursor: default;
}
.progress-item{
    padding-left: 20px;
    margin: 0 6px;
    font-size: 24px;
    font-weight: bold;
    list-style: none;
    color: var(--brown);
    position: relative;
    cursor: pointer;
}
.progress-item.done{
    color: var(--cream);
}
.progress-item.done:before{
    content: "";
    position: absolute;
    top: .3em;
    left: 0;
    transform: rotate(-45deg);
    width: 12px;
    height: 12px;
    border-right: 3px solid var(--cream);
    border-bottom: 3px solid var(--cream);
}
/* content ######################################*/
.page-title{
    font-size: 3rem;
    font-weight: bold;
}

.content-item{
    font-size: large;
    background-color: var(--content-white-0);
    padding: 24px;
    border-radius: 24px;
    box-shadow: 1px 1px 4px var(--shadow);
}

.content-item.plane
{
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin: 20px 36px;
}

.content-item p{
    margin: 0 16px;
}

.btn-list{
    display: flex;
    justify-content: space-around;
    padding: 0 25%;
}

.tb-container{
    margin: 0 auto 10px auto;
    max-height: 400px;
    max-width: 100%;
    overflow: auto;
    width: auto;
}

.closed,
.filtered
{
    display: none !important;
}

/* component #################################### */
/* select&option */
select{
    text-align: center;
    color: var(--light-black);
    height: 100%;
    width: 100%;
}

select:hover{
    cursor: pointer;
}
select:focus{
    background-color: var(--cream);
}

option{
    background-color: var(--content-white-0);
    color: var(--brown);
}

/* scrollbar */
.card-list::-webkit-scrollbar-track,
.tb-container::-webkit-scrollbar-track{
    background-color: var(--light-brown);
}

.card-list::-webkit-scrollbar-track,
.tb-container::-webkit-scrollbar-thumb{
    background-color: var(--brown);
}

/* table */
table {
    border-collapse: collapse;
    border-spacing: 0;
    margin: 0 auto;
    text-align: right;
}

thead th {
    background: var(--light-brown);
    left: 0;
    padding: 3px 10px;
    position: -webkit-sticky;
    position: sticky;
    text-align: center;
    top: 0;
    width: 100px;
}

tbody th {
    background: var(---content-white-1);
    padding: 3px 10px;
    text-align: center;
    width: 50px;
}

tbody td {
    padding: 3px 10px;
    background: var(--content-white-2);
    cursor: pointer;
}

/* button */
button{
    color: inherit;
}
button.btn {
    align-items: center;
	background: var(--content-white-2);
    border: 3px var(--brown) solid;
	border-radius: 100vh;
	color: var(--brown);
	display: flex;
    justify-content: space-between;
    font-size: larger;
	margin: 4px;
	padding: 1rem 5rem;
	position: relative;
	text-align: center;
    font-weight: bold;
	text-decoration: none;
	transition: 0.5s;
}

button.btn:hover, button.btn:focus{
    background: var(--brown);
    color: var(--content-white-0);
}

button.btn::before {
	background: var(--brown);
	content: '';
	height: 1px;
	position: absolute;
	right: 1em;
	top: calc(50% - 2px);
	transform: translateY(calc(-50% - 2px)) rotate(45deg);
	width: 10px;
}

button.btn::after {
	background-color: var(--brown);
	content: '';
	height: 1px;
	position: absolute;
	right: 1em;
	top: 50%;
	transform: translateY(-50%);
	width: 40px;
}

button.btn.back::after {
	left: 1em;
	top: calc(50% - 2px);
	transform: translateY(calc(-50% - 2px)) rotate(-45deg);
	width: 10px;
}

button.btn.back::before {
	top: 50%;
    left: 1em;
	transform: translateY(-50%);
	width: 40px;
}

/* details, summary & detail */
summary:hover{
    cursor: pointer;
}

/* home ######################################### */
.available-description a{
    color: var(--brown);
}

.available-description > .icon{
    background-color: var(--brown);
}

.available-cell-lines{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 7px;
}
.available-cell-lines-item{
    list-style: none;
    background-color: var(--background-white);
    box-shadow: 0 0 3px var(--shadow) inset;
    border-radius: 1rem;
    padding: 8px 12px;
    margin: 0 4px;
}

/* fieldset */
.config-set{
    border: none;
    border-left: 4px solid var(--light-brown);
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0;
    margin: 0 5%;
}

.config{
    align-items: baseline;
    display: flex;
    gap: 8px;
    /* justify-content: stretch; */
}

.config-name{
    display: inline-block;
    height: auto;
    padding: 8px 16px;
    vertical-align: middle;
    min-width: 120px;
    width: 30%;
}

.config-multi-rows{
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.config-row-label{
    font-size: medium;
    margin: 2px 0 0 2px;
}

.config-row{
    align-items: baseline;
    display: flex;
    gap: 8px;
    /* justify-content: stretch; */
}

.source-select-radio{
    opacity: 0;
}

.source-select-label{
    background-color: var(--content-white-2);
    border: 2px solid var(--brown);
    display: inline-block;
    flex: 1;
    padding: 6px 16px;
    text-align: center;
    max-width: 50%;
}

.config-row:has(:focus){
    outline: 1px solid cornflowerblue;
}

.config-number-input{
    background-color: var(--content-white-2);
    border: 2px solid var(--brown);
    border-radius: 4px;
    display: inline-block;
    flex: 1;
    padding: 4px 8px;
    width: 50%;
}

.config:has(.config-check){
    align-items: center;
}

.config-check{
    width: 64px;
    margin-left: 4px;
}

/* disabled */
.source-select-radio:disabled + .source-select-label,
.config-number-input:disabled{
    background-color: var(--content-white-0);
}

/* checked */
.source-select-radio:checked + .source-select-label{
    background-color: var(--brown);
    color: var(--content-white-1);
}

/* toggle */
.toggle{
    display: flex;
    align-items: center;
    position: relative;
    width: 60px;
    height: 28px;
    border-radius: 28px;
    border: 2px solid var(--brown);
    box-sizing: content-box;
    background-color: var(--content-white-2);
    cursor: pointer;
    transition: background-color .4s;
}
.toggle:has(:checked){
    background-color: var(--brown);
}

.toggle::before{
    position: absolute;
    left: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid var(--brown);
    background-color: var(--content-white-2);
    content: '';
    transition: left .4s;
}

.toggle:has(:checked)::before{
    left: 34px;
}

.toggle:has(:focus){
    outline: 2px solid cornflowerblue;
}

.toggle input{
    /* display: none; */
    opacity: 0;
}

/* btn */
.squared-btn{
    background-color: var(--content-white-2);
    align-items: center;
    border: 2px var(--brown) solid;
    border-radius: 1vh;
    display: block;
    height:48px;
    margin: 16px auto 0 auto;
    width: 160px;
}

.squared-btn:hover, .squared-btn:focus{
    background: var(--brown);
    color: var(--content-white-2);
}

/* message */
.alert-message{
    text-align: left;
    width: auto;
}

.alert-message .alert span{
    color: #ee0000;
    margin-right: 20px;
}

/* input-table */
#input-table,
#input-table th,
#input-table td
{
    border-collapse: collapse;
    border: 1px solid var(--brown);
}

/* view ######################################## */
.config-label{
    background-color: var(--content-white-0);
    border: 2px solid var(--brown);
    border-radius: 4px;
    padding: 4px 8px;
    min-width: 150px;
    width: 25%;
    text-align: right;
}

.gene-view-table .gene-description
{
    text-align: left;
    height: auto;
    width: 650px;
    /* overflow-wrap: anywhere; */
    overflow: auto;
    /* test */
}

.gene-view-table tbody tr:hover td,
.gene-view-table tbody tr:hover th
{
    background-color: var(--cream);
}

/* result ###################################### */
/* base */
.result-content{
    display: flex;
    justify-content: space-between;
}

.main-report{
    display: flex;
    justify-content: space-between;
    margin: 20px 30px;
}

.side-report{
    /* width: 35%; */
    max-width: 400px;
    margin-left: 24px;
    margin-bottom: 24px;
}

.report-header{
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    min-height: 50px;
    height: auto;
}

.report-header h1{
    display: block;
}
.report-nav{
    display: flex;
    justify-content: end;
    gap: 8px;
    width: auto;
    align-items: center;
}
.report-nav-item{
    border-radius: 6px;
    padding: 4px;
    color: var(--light-black);
    text-decoration: none;
    font-weight: bold;
    width: auto;
    cursor: pointer;
}

#number-of-cards{
    width: 230px;
}

.report-nav-number,
.report-nav-number:hover{
    background-color: var(--content-white-0);
    max-width: 2.2rem;
    color: black;
}

.report-nav-select,
.report-nav-select:hover{
    width: 7rem;
    background-color: var(--content-white-0);
    color: black;
}

.icon{
    display: inline-block;
    height: 16px;
    width: 16px;
    vertical-align: middle;
    position: relative;
    background-color: var(--brown);
}

.download{
    -webkit-mask-image: url('images/download.svg');
            mask-image: url('images/download.svg');
}

.number{
    -webkit-mask-image: url('images/number.svg');
            mask-image: url('images/number.svg');
}

.information{
    -webkit-mask-image: url('images/information.svg');
            mask-image: url('images/information.svg');
}

.filter{
    -webkit-mask-image: url('images/filter.svg');
            mask-image: url('images/filter.svg');
}

.close{
    -webkit-mask-image: url('images/close.svg');
            mask-image: url('images/close.svg');
}

.sort{
    -webkit-mask-image: url('images/sort-svgrepo-com-1616.svg');
            mask-image: url('images/sort-svgrepo-com-1616.svg');
}

.help{
    -webkit-mask-image: url('images/help.svg');
            mask-image: url('images/help.svg');
}

.link{
    -webkit-mask-image: url('images/link.svg');
            mask-image: url('images/link.svg');
}

/* hover */
.report-nav-item:hover{
    background-color: var(--brown);
    color: var(--content-white-0);
}

.report-nav-item:hover>.icon{
    background-color: var(--content-white-0);
}

.other-tool-btn {
    display: flex;
    gap: 6px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--light-brown);
    width: 180px;
    background-color: var(--content-white-2);
    color: var(--glycoPortal-purple);
    padding: 2px 0;
}

.other-tool-btn>img{
    width: 35px;
    height: 35px;
}

.other-tool-btn>.icon{
    background-color: var(--glycoPortal-purple);
}

/* lectin-report ####*/

/* content */
#lectin-report-content{
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* gene-report #### */
#gene-report{
    flex: 1 1 0;
}

#gene-report-content{
    display: flex;
    flex-direction: column;
}

#gene-report-tab-manager
{
    border-bottom: 2px solid var(--brown);
    display: block;
    margin: 6px 0;
    width: 100%;
}

.tab-label{
    background-color: var(--background-white);
    cursor: pointer;
    display: block;
    float: left;
    line-height: 40px;
    padding:0 15px;
}

.tab-label.active{
    background-color: var(--brown);
    box-shadow: 0 0 10px var(--shadow);
    color: var(--background-white);
    position: relative;
}

.tabs > div{
    display: none;
}

.tabs > .active-tab{
    display: block;
    justify-content: space-around;
    width: 100%;
}

/*side report ### */
#side-report-header{
    height: auto;
    align-items: center;
    border-bottom: var(--background-white) 6px solid;
    padding-bottom: 4px;
    margin-bottom: 4px;
}
#side-report-header > .report-nav{
    text-align: left;
    align-items: flex-start;
    flex-direction: column-reverse;
}
/* content */
#side-report-content{
    display: flex;
    flex-direction: column;
}

#side-report-content h2{
    font-size: larger;
    overflow-wrap: anywhere;
}

.chart-container{
    background-color: var(--background-white);
    width: 250px;
    height: 250px;
    margin: 10px auto 20px auto;
}

#side-report-table{
    width: auto;
    margin-top: 10px;
}

/* result_tab */
.card-header{
    background-color: var(--light-brown);
    font-weight: bold;
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 50px;
    padding-right: 12px;
}

.card-head{
    cursor: pointer;
}

.card-head.ascend > span,
.card-head.descend > span
{
    color: var(--cream);
}

.card-head.ascend > .sort{
    background: linear-gradient(180deg, var(--light-brown) 0%, var(--light-brown) 50%, var(--cream) 50%, var(--cream) 100%);
}

.card-head.descend > .sort{
    background: linear-gradient(180deg, var(--cream) 0%, var(--cream) 50%, var(--light-brown) 50%, var(--light-brown) 100%);
}

.card-list{
    height: 640px;
    overflow: auto;
}

.card-index{
        flex-basis: 160px;
        text-align: left;
        margin-left: 20px;
}

.card-grid-id{
    flex-basis: 80px;
    text-align: left;
    margin-left: 10px;
}

.card-accession{
    flex-basis: 140px;
    text-align: left;
    margin-left: 10px;
}

.card-category{
    flex: 1 1;
    text-align: left;
    margin-left: 10px;
}

.card-pvalue{
    text-align: right;
    margin-right: 30px;
}

.card-corr{
    flex-basis: 140px;
    text-align: right;
    margin-left: 10px;
    padding-right: 6px;
}

.card-corr .card-head{
    text-align: left;
}

.gene-report-cards
{
    display: block;
    min-height: 50px;
    height: auto;
}

.gene-report-cards.selected >.card-summary{
    background-color: var(--cream);
}
.gene-report-cards.selected >.card-summary:hover{
    background-color: var(--light-brown);
    color: var(--cream);
}

.card-summary{
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 50px;
}

.card-summary:hover{
    background-color: var(--brown);
    color: var(--content-white-1);
}

.card-detail{
    background-color: var(--content-white-2);
    padding: 4px 60px 4px 60px;
    text-align: left;
}

.card-detail > h2{
    font-size: large;
}

.card-detail > h2 > span{
    font-weight: bold;
    margin-right: 2rem;
}

.card-detail > h3{
    font-size: smaller;
    text-align: right;
}

.card-detail-content{
    display: flex;
    margin: 4px 0 4px 1rem;
}

.card-detail-list-head{
    width: auto;
    margin: 0 8px;
}
.card-detail-list-content{
    flex: 1 1 0;
    overflow-wrap: anywhere;
}

/*test*/
.spinner {
    display: none;
    width: 50px;
    height: 50px;
    border: 6px solid var(--light-blue);
    border-top: var(--black);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    /* position: relative;
    top: 1px;
    left: 840px; */
    transform: translate(-50%,-50%);
    margin: 0 auto;
}

@keyframes spin {
    0% { transform: rotate(0deg);}
    100% { transform: rotate(360deg);}
}

.under-line {
    text-decoration: underline;
    text-decoration-color: var(--black);
}

.flex {
    display: flex;
}

.img-overview-1 {
    background-image: url('images/image_overview_1.png');
    /* background-repeat: no-repeat; */
    background-size: contain;
    width: 1000px;
    height: 500px;
}

.img-overview-2 {
    background-image: url('images/image_overview_2.png');
    /* background-repeat: no-repeat; */
    background-size: contain;
    width: 1000px;
    height: 300px;
}

.text {
    margin:0 0 0 20px;
    padding: 0;
    line-height: 3;
}

.text-right {
    text-align: center;
}

.img-pca-1 {
    background-image: url('images/pca_plot.png');
    /* background-repeat: no-repeat; */
    background-size: contain;
    width: 1000px;
    height: 500px;
}

.pca-choice {
    text-align: center;
}

.pca-chart-container {
    position: relative;
    width: 1500px;
    height: 1000px;
}

.side {
    display: flex;
    flex-direction: column;
}

/* .test10 {
    display: flex;
} */