@charset "UTF-8";

/* .title{
  color:white;
  height: 70px;
  width: 100%;
  background-color: rgba(34, 49, 52, 0.9);
  position:fixed;
  top:0;
  z-index:10;
} */

.ringsHome{
  padding: 1px;
  margin: 1px;
 /* global setting  */
}
.hide {
  display: none;
}
.italic {
  font-style: italic;
}
.a{
  background-color: white;
}
.bgGray{
  background-color: #f1f1f1;
}
.bgDark {
  background-color:rgba(34, 49, 52, 1.0) ;
}
.bgSkyBlue {
  background-color: #668ad8;
}
.bgOrange {
  background-color: #ffc17a;
}
.bgPurple {
  background-color: rgb(188, 117, 254);
}
.bgRound {
  padding: 1em 1em;
  border-radius: 5px;
}
.bgLightGreen {
  background-color: rgb(200, 230, 200);
}


.fontBold {
  font-weight: bold; }

.fontWhite {
  color: #fff;
}
.hoverFontWhite:hover{
  color: #fff;
}
.fontLightGreen{
  color:rgb(6, 245, 6);
}


.fontRed {
  color: red; }

ul {
  padding: 0;
  margin: 0; }

li {
  padding: 0;
  margin: 0; }

.no-list-type {
  list-style-type: none; }

.font-8 {
  font-size: 8px;
  font-size: 0.8rem; }
.font-6 {
  font-size: 6px;
  font-size: 0.6rem; }

.font-10 {
  font-size: 10px;
  font-size: 1rem; }

h6 {
  font-size: 14px;
  font-size: 1.4rem; }

h5 {
  font-size: 16px;
  font-size: 1.6rem; }

h4 {
  font-size: 18px;
  font-size: 1.8rem; }

h3 {
  font-size: 20px;
  font-size: 2rem; }

h2 {
  font-size: 22px;
  font-size: 2.2rem; }

h1 {
  font-size: 24px;
  font-size: 2.4rem; }

p {
  font-size: 14px;
  font-size: 1.4rem; }

a {
  color: #353e94; }

.input-block{
  display: inline-block;
}
body {
  font-family: "游ゴシック", "メイリオ", "Verdana", "MS Pゴシック", "sans-serif", "Times New Roman";
  font-size: 62.5%;
  font-size: 16px;
  background: #fff;
  margin-top: 3em;
}

textarea {
  font-size: 10px;
  font-size: 1rem;
  margin-top: 30px;
  display: block;
  width: 100%;
  height: 350px;
  resize: none;
  white-space: pre;
  overflow-wrap: normal;
  overflow-x: auto;
  /*overflow-x: scroll;*/
  /*overflow-y: scroll;*/
}
textarea.math {
  width: 500px;
  white-space: normal;
}

label {
  margin: 0; }

/** flex */

.flex { 
  display: flex;
  justify-content: space-between;
}

.left {
  flex: 1
}

.right {
  flex: 1
}

/** alert config */
.alert-ly {
  position: fixed;
  top:-100px;
  margin-left: -200px;
  left: 50%;
  z-index: 10000;
}
.alert-css{
  padding: .75rem 1.25rem;
  margin-bottom: 1rem;
  border: 1px solid transparent;
  border-radius: .25rem;
}
.alert-transition {
  transition: transform 1s cubic-bezier(0,.46,.6,1.14) 0s
}
.alert-transition.show{
  transform: translate(0, 150px);
}

/****************************/
/* TOP NAVIGATION BAR START */
/****************************/

/* @media ( min-width: 768px){
  .top-navbar-ly .navbar-nav {
    flex-direction: row;
    align-items: center;
  }
} */
.top-navbar-ly .navbar-nav {
  flex-direction: row;
  align-items: center;
}
.top-navbar-ly div .title {
  flex-grow: 1;
}
/* assign btn to left side */
.top-navbar-ly .nav-saveBtn {
  margin-right: auto;
  margin-left: 1em;
}
.top-navbar-ly .navbar-nav .nav-item {
  padding-right: 1em;
 
}
.top-navbar-ly .navbar-nav .nav-item .dropdown-ly .dropdown-menu{
  position: absolute;
}
/* .top-navbar-ly .navbar-nav .nav-item .user_info{
  margin-top: -20px; 
  margin-left: -140px; 
  width: 210px;
}
.top-navbar-ly .navbar-nav .nav-item .user_info_content{
  padding-top: 0px;
  padding-bottom: 0px;
  margin-top: 0px;
  line-height: normal;
}
.top-navbar-ly .navbar-nav .nav-item .user_info_content{
  color: black !important;
} */

/* TOP NAVIGATION BAR END */


#overlay {
  position: fixed;
  top: 0;
  z-index: 100;
  width: 100%;
  height: 100%;
  display: none;
  background: rgba(0, 0, 0, 0.6); }
#progress_overlay {
  position: fixed;
  top: 0;
  z-index: 100;
  width: 100%;
  height: 100%;
  display: none;
  background: rgba(0, 0, 0, 0.6); }

#progress_overlay .progress{
  position: absolute;
  
  width: 50%;
  top: 20%;
  left:20% }

.inner-shadow {
  box-shadow: inset 5px 5px 5px #ccc; }

.bg-gray {
  background-color: #bbb; }

.cv-spinner {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center; }

.spinner {
  width: 40px;
  height: 40px;
  border: 4px #ddd solid;
  border-top: 4px rgb(0,123,255) solid;
  border-radius: 50%;
  animation: sp-anime 1.0s infinite linear; }

@keyframes sp-anime {
  0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(359deg); } }
.is-hide {
  display: none; }



#topNavBar{
  margin: 2em 1em ;
}
.topBarTab{
  margin: 0.2em 0.1em;
  
  cursor: pointer;
  box-shadow: 0 .20em gray;
}

.topBarTab:active{
  box-shadow:none;
  position:relative;
  top:7px;
  background-color: #ff9100;
  transition: .5s;
  cursor:pointer;
/* global setting END */

/* Parameter setting css START  */
    border-bottom: solid 2px black; }
  #rxn_prop #rxn_prop_table tr td {
    border: solid 1px black;}

.detail_rxn {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap; }
  .detail_rxn .rxn_card {
    flex: 1;
    box-sizing: border-box; }

#enzymeCheckbox ul {
  list-style: none;
}


ul#navGPP {
  margin: 1em 1em; }

.wrapperGPPBbuttons {
  margin: 1em 0; }
  .wrapperGPPBbuttons ul {
    border: 1px solid #444;
    border-radius: 5px;
    margin: 1em 0; }
  .wrapperGPPBbuttons a {
    margin: 1em 0; }

.cytoscape-layout {
  width: 90%;
  height: 1000px;
  border: 1px solid black; }

.modal-component {
  position: relative; }
  .modal-component .modal-back {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.199); }

.qtip{
  position: absolute;
}
/*# sourceMappingURL=glycosim.css.map */

#sim{
  margin: 1em;
}

.rowCol-12{
  border-bottom:2px solid #dee7ec;
  border-top:2px solid #dee7ec;
  margin: 1em 0;
  padding: 1em 0;
}

#individualPlot{
  text-align: center;
  margin: 1em 0;
  padding: 1em 0;
  box-shadow: 0 0 8px gray;
  overflow: auto;
}

#groupPlot{
  text-align: center;
  margin: 1em 0 ;
  padding: 1em 0;
  box-shadow: 0 0 8px gray;
  margin-bottom: 5em;
  overflow: auto;
}


main {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}

#main{
  display: flex;
}

#inputsetting{
  display: block;
  flex: 3;
  padding:0 1em 0 0;
}

#inputPlot{
  box-shadow: 0 0 8px gray;
  text-align: center;
  margin: 4em 0 0 0;
  padding: 1em;
  flex: 9;
  overflow: auto;
}

.plotitem{
  text-align: center;
  font-weight: bold;
  border-bottom: solid 2px #dadada;/*下に灰色線*/
  /* width: 500px; */
  /* line-height: 2; */
}

.plotlist1{
  /* width:auto; */
  color: #404040;
  border-left: solid 10px #ff9100;/*左側の線*/
  border-bottom: solid 2px #dadada;/*下に灰色線*/
  background: whitesmoke;
  margin-top: 1em;
  margin-bottom: 10px;/*下のバーとの余白*/
  line-height: 1.5;
  padding: 2em;
  list-style-type: none!important;/*ポチ消す*/
  font-weight: bold;
  /* width: 580px; */
  line-height: 2;
  box-shadow: 0 0 8px gray;
}

.plotlavel{
  font-weight: bold;
  /* font-size: 18px; */
  cursor: pointer;
  /* width: 500px; */
  /* line-height: 2; */
}
/* layout */
.content-ly {
  width: 100%;
}
/* GPP page css START */

#predictionForm {
  background-color: #f1f1f1;
  padding: 1em 1em;
  border-radius: 5px;
}

#gppInputGlycanProfileTable {
  background-color: #f1f1f1;
}

#TestPdnPg {
  background-color: #f1f1f1;
  padding: 1em 1em;
  border-radius: 5px;
}

#testGlycanTable {
  margin: 1em 0;
  background-color: white;
}


#gppInputGlycanProfileTable{
  margin: 1em 0;
  background-color: white;
}
.gppResult-ly{
  margin-top: 1em;
  margin-bottom: 1em;
}
.gpp-cytoscape-ly{
  width: 100%;
}
/* GlycoSimDB START */


.glycosimdb_ly {
  width: 100%;
}
.glycosimdb_ly .glycosimdb_pagination .pagination {
  overflow: auto;
}


/* .glycosimdb_ly .glycosimdb_cards {
  height: 500px;
  overflow: auto;
  padding: 1em;
} */
.glycosimdb_table_ly {
  overflow: auto;
}
.glycosimdb_table_ly input {
  width: 5em;
}
.glycosimdb_table_ly .glycosimdb_table_substrate input {
  width: 10em;
}
.glycosimdb_table_ly .glycosimdb_table_product input {
  width: 10em;
}
.glycosimdb_table_ly .glycosimdb_table_constraint input {
  width: 10em;
}
.glycosimdb_modal_ly .modal-body {
  overflow: auto;
  height: 500px;
}
.glycosimdb_modal_ly .modal-body .check_input {
  position:relative;
  top: 4px;
}
.glycosimdb_modal_ly .modal-body .glycosimdb_modal_flex {
  display: flex;
}
.glycosimdb_modal_ly .modal-body .glycosimdb_modal_flex .flex_left{
  flex: 1;
  padding: 5px;
}
.glycosimdb_modal_ly .modal-body .glycosimdb_modal_flex .flex_right{
  flex: 2;
  padding: 5px;
}
.flex_1 {
  flex: 1;
}
.flex_2 {
  flex: 2;
}

.glycosimdb_cards {
  list-style-type: none;
}
.glycosimdb_card {
  border-radius: 5px;
  padding: 1em;
  margin: 1em 0;

}
.glycosimdb_card_ly_gd{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  /* grid-auto-rows: minmax(0px, 55px); */
  grid-gap: .5em 0;
}
.glycosimdb_card_ly_gd input {
  width: 5em;
}
.glycosimdb_card_ly_gd span {
  display: inline;
}
/* image layout */
.glycosimdb_card_ly_gd img {
  max-width: 100%;
}
.glycosimdb_card_ly_gd div {
  padding: 1em;
}
.glycosimdb_card_ly_gd .glycosimdb_card_substrate input {
  width:100%;
}
.glycosimdb_card_ly_gd .glycosimdb_card_product input {
  width:100%;
}
.glycosimdb_card_ly_gd .glycosimdb_card_cosubstrate input {
  width:100%;
}
.glycosimdb_card_ly_gd .glycosimdb_card_coproduct input {
  width:100%;
}
.glycosimdb_card_ly_gd .glycosimdb_card_constraint input {
  width:100%;
}

.glycosimdb_card_title{
  grid-row-start: 1;
  grid-row-end: 2;
  grid-column-start: 1;
  grid-column-end: 3;
  text-align: left;
}
.glycosimdb_card_btn_ly {
  grid-row-start: 0;
  grid-row-end: 1;
  grid-column-start: 4;
  grid-column-end: 6;
  text-align: right;
}

.glycosimdb_card_substrate {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 2;
  grid-row-end: 5;
  text-align: left;
}

.glycosimdb_card_product {
  grid-column-start: 4;
  grid-column-end: 6;
  grid-row-start: 2;
  grid-row-end: 5;
  text-align: left;
}
.glycosimdb_card_coproduct {
  grid-column-start: 4;
  grid-column-end: 6;
  grid-row-start:6;
  grid-row-end: 7;
  text-align: right;
}
.glycosimdb_card_cosubstrate {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start:6;
  grid-row-end: 7;
  text-align: left;
}
.glycosimdb_card_constraint {
  grid-column-start:1;
  grid-column-end: 3;
  grid-row-start:5;
  grid-row-end: 6;
  text-align: left;
}
.glycosimdb_card_local {
  padding: 5px;
  grid-row-start: 7;
  grid-row-end: 8;
}
.glycosimdb_card_param {
  padding: 5px;
  grid-row-start: 8;
  grid-row-end: 9;
}
/* .glycosimdb_card_er {
  grid-row-start: 6;
  grid-row-end:7;
}
.glycosimdb_card_cis {
  grid-row-start: 6;
  grid-row-end:7;
}
.glycosimdb_card_medial {
  grid-row-start: 6;
  grid-row-end:7;
}
.glycosimdb_card_trans {
  grid-row-start: 6;
  grid-row-end:7;
}
.glycosimdb_card_tgn {
  grid-row-start: 6;
  grid-row-end:7;
}
.glycosimdb_card_param {
  grid-row-start: 7;
  grid-row-end: 8;
}
.glycosimdb_card_kf {
  grid-row-start: 7;
  grid-row-end: 8;
}
.glycosimdb_card_km {
  grid-row-start: 7;
  grid-row-end: 8;
}
.glycosimdb_card_kmd {
  grid-row-start: 7;
  grid-row-end: 8;
} */

.glycosimdb_card_class {
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 0;
  grid-row-end: 1;
  text-align: right;
}
.glycosimdb_card_type {
  grid-column-start: 3;
  grid-column-end: 4;
  grid-row-start: 0;
  grid-row-end: 1;
  text-align: right;
}

/* pagination */



.glycosimdb_autocomplete_link:hover .active {
  display: inline-block;
}
.glycosimdb_autocomplete_link .active {
  display: none;
}
.glycosimdb_autocomplete_link:hover .normal {
  display: none;
}

/* GlycoSimDB END */
/* GPP page css END */

/* SBML Infomation page css setting  START */
#compartments-table {
  border: 1px solid black;
  table-layout: auto;
}
#compartments-table tr th {
  border-top: 1px solid black;
  border-right: 1px solid black;
  border-bottom: 3px solid black;
}
#compartments-table .compartments-list:nth-of-type(2n) {
  background: #f1f1f1;

}
#compartments-table .compartments-list td {
  border-right: 1px solid black;
  padding-right: 2em;
}
#species-table {
  border: 1px solid black;
  table-layout: auto;
}
#species-table tr th {
  border: 1px solid black;
  border-bottom: 3px solid black;
}
#species-table .species-list:nth-of-type(2n){
  background: #f1f1f1;
}
#species-table .species-list td{
  border-right: 1px solid black;
  padding-right: 2em;
}

#parameters-table {
  border: 1px solid black;
  table-layout: auto;
}
#parameters-table tr th {
  border: 1px solid black;
  border-bottom: 3px solid black;
}

#parameters-table tr:nth-of-type(2n){
  background: #f1f1f1;
}

#parameters-table tr td {
  border-right: 1px solid black;
  padding-right: 2em; 
}

#reactions-table {
  border: 1px solid black;
  padding: 0 0 0 2em;
  table-layout: auto;
}
#reactions-table .reactions-card {
  padding: 1em 0;
  border: 1px solid black;
}
#reactions-table .reactions-card:nth-of-type(2n) {
  background: #f1f1f1;
}

#assignmentRule-table {
  border: 1px solid black;
}
#assignmentRule-table tr th {
  border-top: 1px solid black;
  border-right: 1px solid black;
  border-bottom: 3px solid black;

}
#assignmentRule-table tr td {
  border-right: 1px solid black;
  padding-right: 2em;
}

#assignmentRule-table tr:nth-of-type(2n) {
  background: #f1f1f1;
}

#species-show-button {
  padding: auto;
}
#compartments-show-button {
  padding: auto;
}
#parameters-show-button {
  padding: auto;
}
#reactions-show-button {
  padding: auto;
}
#assignmentRule-show-button {
  padding: auto;
}

/* 以下の書き方だと、レイアウトの設定と分かりにくいのでボツ */
#wrapperModelInfo {
  /* display: flex; */
}
#modelInfo #modelDetailInfo {
  /* flex: 9 */
}

#modelInfo #modelUlBar {
  /* flex: 3;
  background: #f1f1f1; */
  border-right: 3px solid #f5f5f5;
  overflow: auto;
}
#modelInfo #modelUlBar ul {
  margin-left: 1em;
  list-style-type: none;
}
#modelInfo #modelUlBar ul li div span{
  font-weight: bold;
  padding: 0.5em 0;
}
#modelInfo #modelUlBar ul li div ul li {
  margin-left: 2em;
}
#modelInfo #modelUlBar ul li button {
  display: inline-block;
  box-shadow: 0 0 8px gray;
}
/* SBML Infomation page css setting  END */


/* plotly styling on simulation result  */
.plotlist3{
  list-style-type: none!important;
}

.plotlavel:hover{
  background-color: #ff9100;
  /* padding: 12px 24px; */
  /* border-radius:5px; */
  transition: 0.5s;
  cursor:pointer;
}

.plotlavels{
  cursor:pointer;
}

/* 全体 */
.hidden_box {
  margin: 1em 0;
  padding: 0;
}

/*ボタン装飾*/
.hidden_box label {
  padding: 0 15px;
  font-weight: bold;
  /* background: #efefef; */
  border-radius: 5px;
  cursor :pointer;
  transition: .5s;
}

/*アイコンを表示*/
.hidden_box > label:before {
  display: inline-block;
  content: '\f078';
  font-family: 'FontAwesome';
  padding-right: 5px;
  transition: 0.2s;
}

/*ボタンホバー時*/
.hidden_box label:hover {
  background: #ff9100;
  border-radius:5px;
  cursor:pointer;
}

/*アイコンを切り替え*/
.hidden_box > input:checked ~ label:before {
  content: '\f00d';
  -webkit-transform: rotate(360deg);
  transform: rotate(360deg);
  color: #668ad8;
}

/*チェックは見えなくする*/
.hidden_box > input {
  display: none;
}

/*中身を非表示にしておく*/
.hidden_box .hidden_show {
  height: 0;
  padding: 0;
  overflow: hidden;
  opacity: 0;
  transition: 1s;
}

/*クリックで中身表示*/
.hidden_box input:checked ~ .hidden_show {
  padding: 10px 0;
  height: auto;
  opacity: 1;

}

.cytoscape_table{
  position: fixed;
  bottom: 10px;
  right:10px;
  background-color:#e3f0fb;
}
.cytoscape_table table{
  width: 100%;
  border-collapse: collapse;
}

.cytoscape_table table tr{
  border-bottom: solid 2px white;
}

.cytoscape_table table tr:last-child{
  border-bottom: none;
}

.cytoscape_table table th{
  position: relative;
  text-align: left;
  background-color: #52c2d0;
  color: white;
  text-align: center;
  padding: 10px 0;
}

.jexcel{
  font-size: 13px;
}

.btn-reset {
  background-color: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  padding: 0;
  appearance: none;
}

.jexcel_toolbar .material-icons:hover{
  background-color: lightgrey;
}

/* parameter estimation page */
#expdataSetting {
  overflow: auto;
}

/* inputボタンのスタイルをアイコンにする */
.send_file {
  display: none;  /* 本来のファイル選択フォームは非表示に */
}