cancer_predict/app/assets/stylesheets/cancer_predict_print.scss

@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css);
button, input, optgroup, select, textarea {
    margin: 0;
    font: inherit;
    color: inherit;
}
.fa {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transform: translate(0, 0);
}
.fa-question:before {
    content: "\f128";
}
button {
    overflow: visible;
}
button, input, select, textarea {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}
#cancer_table *[data-key]{
	padding: 0.375em 0;
	display: inline-block;
	width: 100%;
}
.head_logo{
	height: 4em;
}
.texts_under_result{
	font-weight: bold;
	padding-top: 1em;
	color: #5d7ca2;
}
th.cancer_th.Treatment {
    width: 39%;
}
div.num_group{
	position: relative;
	float: left;
	width: 5.125em;
	height: 2.25em;
	margin-left: 1.125em;
}
.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 !important;
}
#cancer_table .cencer_table_name{
	width: 16.25em;
}
#cancer_predict_result_block .cencer_table_name{
	width: 5em;
}
.cancer_help_btn{
	background-color: rgb(210, 106, 2) !important;
    border-color: rgb(210, 106, 2) !important;
    color: white !important;
}
.cancer_help_btn i:before {
    color: white !important;
}
.cancer_table_btn{
	margin-right: 0.5em;
	color:#5d7ca2  !important;
	border-color: #5d7ca2  !important;
	font-weight: 600;
}
.cancer_table_btn::last-of-type{
	margin-right:auto;
}
#cancer_table{
	font-size:0.825em;
	color:#5d7ca2;
}
@media print{
#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: 4.3em;
	height: 1.75em;
	left: 0em;
	clip: rect(0.25em, 4.3em, 1.5em,3.3em);
	border:none;
	padding: 0.5em;
}
input.num_only{
	margin-left: 0;
	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) !important;
	height: 2.25em;
	position: absolute;
	left: 0;
}
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) !important;
	color: white !important;
	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) !important;
	color: white !important;
	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 !important;
	background-color: #9dc3e6 !important;
	border-color: #8c8c8c !important;
}
.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) !important;
	color: white !important;
	border: 0em;
	padding: 0.125em 0.5em;
	border-radius: 0.5em;
	font-size: 1.25em;
	float: left;
}
.result_tab{
	background: #023d79 !important;
	background: linear-gradient(135deg, transparent 0.3em, #023d79 0) !important;
	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: 1em;
}
#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 !important;
	background: linear-gradient(135deg, transparent 0.3em, #d16801 0) !important;
	padding: 0.8em 0.125em 0.5em 1em;
	margin-left: -0.5em;
}
.result_tab > a{
	writing-mode: vertical-lr !important;
	-webkit-writing-mode: vertical-lr !important;
	color: white !important;
}
.result_tab_group{
	display: none;
}
.result_content_group{
	width: 100%;
	margin: 0;
	float: none;
}
.result_content{
	display: block;
	min-height: 25em;
	border: 0.125em solid #c0cbdd !important;
	padding: 0.5em;
}
.result_content:first-of-type{
	display: block;
}
.result_content  a{
	color: #5d7ca2;
}
.result_content  span{
	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;
}
.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 !important;
	background-color: #003d79 !important;
	border-right: 0.375em solid white;
	border-top: 0.375em solid white;
}
.cancer_td {
	background-color: #e9eaf5 !important;
	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%;
}
#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;
}
* {
	-webkit-print-color-adjust: exact !important;
}
.layout-content{
	background: #fff !important;
}
}