#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; } .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: 4em; } .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_descibe{ font-weight: bold; float: left; max-width: 50%; } #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; } .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; } }