cancer_predict/app/assets/stylesheets/cancer_predict.scss

#cancer_table *[data-key]{
	padding: 0.375em 0;
	display: inline-block;
}
.head_logo{
	height: 4em;
}
@media screen and (max-width: 48em){
	.navbar-brand{
		width: 100%;
	}
}
div.num_group{
	position: relative;
	float: left;
	width: 4.125em;
	height: 2.25em;
}
@media screen and (min-width: 93.75em){
	.navbar-brand>img.head_logo{
		width: 50%;
		height: auto;
	}
}
@media screen and (min-width: 48.125em) and (max-width: 93.625em){
	.navbar-brand>img.head_logo{
		width: 70%;
		height: auto;
	}
}
.header-nav{
	top:0 !important;
}
.title_texts{
	color:rgb(210, 106, 2);
	display:none;
}
.cencer_table_name{
	display: inline-block;
	vertical-align: middle;
	color:#5d7ca2;
}
@media screen and (min-width: 71.125em){
	#cancer_table .cencer_table_name{
		width: 16.25em;
	}
}
@media screen and (max-width: 71em){
	#cancer_table .cencer_table_name{
		width: 12.25em;
	}
}
#cancer_predict_result_block .cencer_table_name{
	width: 5em;
}
.cancer_table_btn{
	margin-right: 0.5em;
	color:#5d7ca2;
	border-color: #5d7ca2;
	font-weight: 600;
}
.cancer_table_btn::last-of-type{
	margin-right:auto;
}
#cancer_table{
	font-size:0.825em;
	color:#5d7ca2;
}
#cancer_table_top{
	padding-bottom: 4em;
}
#font_texts{
	padding-right: 0.5em;
}
#text_describe{
	font-weight: bold;
	float: left;
	max-width: 75%;
	padding-bottom: 3em;
}
#font_size_choices{
	font-weight: bold;
	float: right;
	max-width: 50%;
	padding-left:1em;
}
form.for_num{
	position: relative;
	float:left;
}
select.select_num{
	position: absolute;
	width: 5.125em;
	height: 1.75em;
	left: 1em;
	clip: rect(0.25em,4.8em,1.5em,3.875em);
	border:none;
	padding: 0.5em;
}
input.num_only{
	color: black;
	border-top: 0.125em solid rgb(221, 221, 221);
	width: 5.125em;
	padding: 0em 0em 0.25em;
	border-left: 0.125em solid rgb(221, 221, 221);
	text-align: center;
	font-size: 0.875em;
	background-color: rgb(255, 255, 255);
	height: 2.25em;
	position: absolute;
	left:0.625em;
}
input.float_num{
	position: relative;
}
#cancer_table_left{
	width:100%;
}
#cancer_table_right{
	width:100%;
}
#cancer_table_submit{
	margin-left: 1em;
	float: right;
	background-color: rgb(210, 105, 0);
	color: white;
	border: 0em;
	padding: 0.125em 0.5em;
	border-radius: 0.5em;
	font-size: 1.25em;
}
#cancer_table_reset{
	float: right;
	background-color: rgb(210, 105, 0);
	color: white;
	border: 0em;
	padding: 0.125em 0.5em;
	border-radius: 0.5em;
	font-size: 1.25em;
}
.btn-sub{
	background:url("/assets/cancerpredict/triangle_sub.png")  no-repeat top transparent;
	position: relative;
	width: 1.875em;
	border: 0;
	height: 1.875em;
	background-size: contain;
	top:1em;
	bottom: -0.7em;
	padding: 0;
}
.btn-add{
	background:url("/assets/cancerpredict/triangle_add.png")  no-repeat top transparent;
	position: relative;
	width: 1.875em;
	border: 0;
	height: 1.875em;
	background-size: contain;
	right: 1.815em;
	top: -0.3em;
	padding: 0;
}
.cancer_table_btn:focus{
	color: #5d7ca2 !important;
	background-color: #9dc3e6 !important;
	border-color: #8c8c8c !important;
}
.cancer_table_btn:hover{
	color: #5d7ca2 !important;
	background-color: #9dc3e6 !important;
	border-color: #8c8c8c !important;
}
.cancer_table_btn.active{
	color: #5d7ca2;
	background-color: #9dc3e6;
	border-color: #8c8c8c;
}
.cancertable_empty{
	border: 0.25em solid pink !important;
	border-radius: 0.5em !important;
	padding: 0.125em !important;
}
.result_title{
	background-color: rgb(210, 105, 0);
	color: white;
	border: 0em;
	padding: 0.125em 0.5em;
	border-radius: 0.5em;
	font-size: 1.25em;
	float: left;
}
.result_tab{
	background: #023d79;
	background: linear-gradient(135deg, transparent 0.3em, #023d79 0);
	border: none;
	float:right;
	padding: 0.5em 0.125em 0.5em 0.5em;
	margin-top: 0.5em;
	cursor: pointer;
}
#cancer_table a:hover{
	text-decoration: none;
	color: #5d7ca2;
}
#result_contents{
	padding-top: 2em;
}
#choice_fields{
	padding: 2em 0 0 calc(20% - 1.625em);
}
.result_tab:hover{
	background: #d16801;
	background: linear-gradient(135deg, transparent 0.3em, #d16801 0);
	padding: 0.8em 0.125em 0.5em 1em;
	margin-left: -0.5em;
}
.result_tab.active{
	background: #d16801;
	background: linear-gradient(135deg, transparent 0.3em, #d16801 0);
	padding: 0.8em 0.125em 0.5em 1em;
	margin-left: -0.5em;
}
.result_tab > a{
	writing-mode: vertical-lr;
	-webkit-writing-mode: vertical-lr;
	color: white;
}
.result_tab_group{
	width: 20%;
	margin: 0;
	float: left;
}
.result_content_group{
	width: 80%;
	margin: 0;
	float: right;
}
.result_content{
	display: none;
	min-height: 25em;
	border: 0.125em solid #c0cbdd;
	padding: 0.5em;
}
.result_content:first-of-type{
	display: block;
}
.result_content  a{
	color: #5d7ca2;
}
.result_content  p{
	color: #5d7ca2;
	clear: both;
}
.cancer_years{
	float:left;
	color: #5d7ca2;
	background-color: #fff;
	border-color: #5d7ca2;
	border-width: 0.125em;
	margin: 0em;
}
.cancer_years:first-of-type{
	margin-left: 1em;
}
.cancer_years:last-of-type{
	margin-right: 1em;
}
.cancer_form_field{
	margin-left: 1em;
}
#result_table_content a{
	float:left;
	display: contents;
}
.result_content  span{
	color: #5d7ca2;
}
.hint-texts{
	color: rgb(104, 104, 104);
	font-size: 0.75em;
	clear: both;
	padding: 0.5em 0;
}
#result_text_content a{
	float:left;
}
#result_table_content table{
	clear: both;
	width:100%;
	table-layout: fixed;
	overflow-wrap: break-word;
}
#result_table_content table tbody tr{
	display: none;
}
#result_table_content table tbody tr:first-of-type{
	display: table-row;
}
.white_text,.white_text:link,.white_text:visited{
	color:white;
}
.cancer_th{
	color: white;
	background-color: #003d79;
	border-right: 0.375em solid white;
	border-top: 0.375em solid white;
}
.cancer_td {
	background-color: #e9eaf5;
	border-right: 0.375em solid white;
	border-top: 0.375em solid white;
}
#cancer_predict_result_block{
	display:none;
	font-size: 0.825em;
	margin-top: 3em;
    border-top: #666 solid;
    padding-top: 2em;
}
p.texts_show{
	display: list-item;
	margin-left: 1.5em;
	clear: both;
}
div.texts_show{
	display: block;
	margin-left: 0;
}
.addition{
	display: none;
}
#cancer_table_right_result .cancer_table_btn{
	padding: 0.25em 1em;
}
#cancer_table_left_result .cancer_table_btn{
	padding: 0.25em 1em;
}
.modal-dialog {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) !important;
  overflow: auto;
  overflow-y: auto;
}
#cancer_predict_result{
	width: 80%;
}
@media screen and (min-width: 48em) {
  #cancer_table_right{
	float:right;
	width:50%;
  }
  #cancer_table_left{
	float:left;
	width:50%;
  }
  #cancer_table_right_result{
	width: 50%;
	float: right;
  }
  #cancer_table_left_result{
	width: 50%;
	float: left;
  }
  #cancer_predict_result{
	width: 50%;
	float: left;
  }
  .result_title{
	margin-top: 1em;
  }
}
@media print {
  * {
    -webkit-print-color-adjust: exact !important;
  }
}