:root {
  --dark-blue: #0D2853;
  --clear-blue: #1D5998;
  --light-blue: #CDE0E5;
  --aqua-blue: #99BDD1;
  --light-gray: #F2F2F2;
  --gray: #9FA0A0;
  --dark-gray: #595757;
}

:root {
  scroll-padding-top: 90px;
}


body{
  font-family: arial,"Microsoft JhengHei","微軟正黑體",sans-serif;
  color: var(--dark-gray);
  letter-spacing: 1px;
  font-size: 1.0625rem;
}


a{
  color: var(--clear-blue);
  text-decoration: none;

}

.container{
  min-width: 1140px!important;
}

/*標題*/

h1{
  font-size: 1.8rem;
  font-weight: bold;
  margin-bottom: 1.5rem;
}

h2{
  color: var(--clear-blue);
  font-size: 1.3rem;
  font-weight: bold;
}

.page_title{
  font-weight: bold;
  text-align: center;
  font-size: 3rem;
  margin-bottom: 0;
  letter-spacing: 5px;
  margin-bottom: 6px;
}

.page_title .en{
  font-size: 1.8rem;
  letter-spacing: 2px;
  display: block;
  margin-bottom: 20px;
  font-weight: initial;

}

.sbu_title{
  font-weight: bold;
  text-align: center;
  font-size: 1.1rem;
}

.section_title{
  color: #6E6F70;
  font-size: 1.8rem;
  font-weight: bold;
  margin-bottom: 1.5rem;
  position: relative;
  display: inline-block;
  padding-left: 15px;
  padding-right: 15px;
  padding-bottom: 6px;
  border-bottom: 1px solid #999999;
}

.section_title:before{
  content: '';
  position: absolute;
  left: -9px;
  bottom: -7px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1px solid #999999;
  background: #FFF;

}

.section_title_2{
  color: #FFF;
  background: var(--clear-blue);
  font-size: 1.4rem;
  font-weight: bold;
  text-align: center;
  display: inline-block;
  padding: 13px 20px;
  border-radius: 50px;
  min-width: 190px;
  letter-spacing: 3px;
}

.section_title_3{
  display: inline-block;
  background: #A5A5A5;
  color: #FFF;
  font-size: 1.1em;
  padding: 12px;
  text-align: center;
  margin-bottom: 30px;
  border-radius: 50px;
  font-weight: bold;
  min-width: 250px;
}

.section_title_4{
    color: #595757;
    font-size: 1.3rem;
    font-weight: bold;
    margin-bottom: 1.5rem;
    position: relative;
    display: inline-block;
    padding-bottom: 6px;
    border-bottom: 2px solid #595757;
}

.section_title_5{
  color: #595757;
  font-size: 2.5rem;
  font-weight: bold;
  margin-bottom: 1.5rem;
  display: inline-block;
  padding-bottom: 6px;
  border-bottom: 3px solid #595757;
}


/*其他*/

.fit-img{
  width: 100%;
}

section.dashed_line{
  border-bottom: 2px dashed #ccc;
}

.ml-0{
  margin-left: 0;
}

.mr-0{
  margin-right: 0;
}

.clearfix{
  clear:both;
}

.cursor-ptr{
  cursor: pointer;
}

.ellipsis-1{
  overflow: hidden;
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-line-clamp: 1; /*行數*/
  -webkit-box-orient: vertical;
  white-space:normal;
}

.ellipsis-2{
  overflow: hidden;
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2; /*行數*/
  -webkit-box-orient: vertical;
  white-space:normal;
}

#goTop{
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: var(--clear-blue);
    border-radius: 0px;
    padding: 10px;
    cursor: pointer;
    z-index: 999;
    display: none;
}

#goTop:hover,
#goTop:active,
#goTop:focus{
	background: var(--aqua-blue);
}

#goTop img{
	width: 26px;
}

/*============ navbar選單 ==============*/
.navbar{
  padding-top: 30px;
  padding-bottom: 60px;
  border-bottom: 1px solid #606060;
  background: #FFF;
  z-index: 999;
}

.navbar-brand{
  position: relative;
  color: #FFF;
  display: inline-block;
  padding: 12px 20px 12px 40px;
  margin: 0;
  transform: translateY(-10px);
  -webkit-transform: translateY(-10px);
  -ms-transform: translateY(-10px);
}

.navbar-brand img{
  height: 38px;
}

.navbar-brand:before{
  content: '';
  position: absolute;
  top: 0;
  left: -20px;
  height: 100%;
  width: calc(100% + 100px);
  z-index: -1;
  background: var(--dark-blue);
  transform: skewX(-10deg);
  -webkit-transform: skewX(-10deg);
  -ms-transform: skewX(-10deg);
}


.logo-en{
  position: relative;
  color: #FFF;
  display: inline-block;
  padding: 15px 30px;
  margin: 0 5px 0 0;
  z-index: 0;
}

.logo-en img{
  height: 20px;
}

.logo-en:before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--clear-blue);
  z-index: -1;
  transform: skewX(-10deg);
  -webkit-transform: skewX(-10deg);
  -ms-transform: skewX(-10deg);
}


.navbar-light .navbar-nav .nav-link{
  padding: 15px 30px!important;
  font-size: 1.0625rem;
  font-weight: bold;
  color: var(--dark-gray);
}

.navbar-nav .nav-link {
  position: relative;
  margin-right: 5px;
}

.navbar-nav .nav-link:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--light-blue);
  z-index: -1;
  transform: skewX(-10deg);
  -webkit-transform: skewX(-10deg);
  -ms-transform: skewX(-10deg);
}

.navbar-nav .nav-item:nth-child(2) .nav-link:before{
  background: var(--light-gray);
}

.navbar-nav .nav-item:nth-child(3) .nav-link{
  color: var(--gray);
}
.navbar-nav .nav-item:nth-child(3) .nav-link:before{
  background: #FFF;
  border: 1px solid #C9CACA;
}

.navbar-light .navbar-nav .nav-link:focus,
.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link.active,
.navbar-light .navbar-nav .show>.nav-link{
  color: #FFF;
}

.navbar-light .navbar-nav .nav-link:focus:before,
.navbar-light .navbar-nav .nav-link:hover:before,
.navbar-light .navbar-nav .nav-link.active:before,
.navbar-light .navbar-nav .show>.nav-link:before{
  background: linear-gradient(to right,  #2e527c 0%,#a3bdd6 100%);
  border: 0;

}

.navbar-light .navbar-toggler{border:none;}
.navbar-light .navbar-toggler {
    color: rgb(205 224 229);
}

.login{
  margin-right: 3rem;
}

/*=========== 選單第二層 ===============*/
.navbar .navbar-nav .dropdown-menu{
  position: fixed;
  left: 0;
  right: 0;
  top: 95px;
  background: var(--aqua-blue);
  border: 0;
  border-radius: 0;
  text-align: center;
}


.navbar .navbar-nav .dropdown-menu li{
    display: inline-block;
    padding: 0 5px;
    width: 15%;
}

.dropdown-item{
  color: #FFF;
}

.dropdown-item:focus, .dropdown-item:hover{
  background: var(--light-blue);
  color: var(--dark-gray);
}

.dropdown-item.disabled, .dropdown-item:disabled {
  color: #6992a8;
}


/*=========== 彈出視窗 ===============*/
.modal-backdrop {
    background-color: #0D2853;
}

.modal-backdrop.show {
    opacity: .3;
}

.modal-content {
    background-color: #EFEFEF;
    border: 2px solid #FFF;
    border-radius: 20px;
}

.modal-content{
  padding: 1.5rem 1rem;
}

.modal-header{
  border-bottom: 0;
}

.modal-body{
  padding: 0.5rem 1rem;
}

.modal-footer{
  border-top: 0;
  padding: 0.5rem 1rem;
}

.modal-footer .check_area .form-check{
  background: var(--clear-blue);
  color: #FFF;
  padding: 5px;
  padding-left: 2em;
  margin-bottom: 4px;
}

.modal-header .btn-close {
  padding: 0.8rem 0.8rem;
  margin: 0;
  border: 2px solid #ddd;
  border-radius: 50%;
  box-shadow: 2px 2px 2px rgb(0 0 0 / 50%);
  position: absolute;
  top: 4px;
  right: 9px;
}

@media (min-width: 576px){

  .modal-dialog {
      max-width: 620px;
  }

}


@media screen and (max-width: 767px){
  .modal-header .btn-close {
      top: -2px;
      right: -4px;
  }
}

/*============ 表單 ==============*/

.col-form-label{
  font-size: 1.2rem;
  font-weight: bold;
  letter-spacing: 2px;
  position: relative;
}

.col-form-label.w-fixed{
  max-width: 140px;
}

.col-form-label.required:before{
  font-size: 1.3rem;
  color: #DE863C;
  content: "* ";
  position: absolute;
  left: -10px;
  top: 0;
}

.form-control {
  border: 1px solid #595757;
  border-radius: 0;
}

textarea.form-control{
  height: 130px;
}

.form-select{
  border: 1px solid #595757;
  border-radius: 0;
}

.check-style-1 .form-check{
  background: #FFF;
  color: #595757;
  border:1px solid #595757;
  padding: 10px 10px 10px 40px;
  margin-bottom: 10px;
  border-radius: 50px;
}

.check-style-1 .form-check label{
  display: block;
  cursor: pointer;
}


.check-style-1  .form-check .form-check-input{
  transform: translateY(-2px);
  -webkit-transform: translateY(-2px);
  -ms-transform: translateY(-2px);
}


input::placeholder {
  color: #A5A5A5!important;
}

.login-box .form-control{
  border: 0;
  border-radius: 50px;
}

.tips_btn{
  font-size: 1.2rem;
  color: #595757;
  float: right;
  line-height: 2.6rem;
}

/*============ 平台編輯 ==============*/
.box-style-1{
  background: #F2F2F2;
  border-radius: 20px;
  padding: 2.5rem;
}

.box-style-2{
  background: #F2F2F2;
  padding:4rem;
}

.search-bar{
  width: 400px;
}


/*============ 報告 ==============*/

/*檔案下載*/

.report_download .user,
.top-info .user{
  background: var(--light-blue);
  padding: 22px 30px;
}

.report_download .btn{
  background: var(--clear-blue);
  color: #FFF;
  padding: 10px 30px;
  margin-top: 10px;
}

/*報告摺疊*/

.collapse_style_1 .accordion-item{
  margin-bottom: 1.2rem;
  border-radius: 50px;
  border: 0;
}

.collapse_style_1 .accordion-header .accordion-button{
  font-size: 1.4rem;
  font-weight: bold;
  background: #CDDEE8;
  color: #595757;
  border: 4px solid #FFF;
  border-radius: 50px!important;
  box-shadow: 1px 3px 4px rgb(0 0 0 / 40%);
  padding-left: 4rem;
}

.collapse_style_1 .accordion-item:nth-child(3n+2) .accordion-button{
  background: #99BDD1;
}

.collapse_style_1 .accordion-item:nth-child(3n+3) .accordion-button{
  background: #EEEEEE;
}



.collapse_style_2 .accordion-item{
  margin-bottom: 1.2rem;
  border-radius: 50px;
  border: 0;
}

.collapse_style_2 .accordion-header .accordion-button{
  font-size: 1.4rem;
  font-weight: bold;
  background: #D9DCE8;
  color: #595757;
  border: 4px solid #FFF;
  border-radius: 50px!important;
  box-shadow: 1px 3px 4px rgb(0 0 0 / 40%);
  padding-left: 4rem;
}

.collapse_style_2 .accordion-item ul{
  list-style: none;
  padding: 0;
  margin-left: 5rem;
}

.collapse_style_2 .accordion-item ul li a{
  display: block;
  font-size: 1.3rem;
  letter-spacing: 3px;
  font-weight: bold;
  background: #BAD7E5;
  color: #595757;
  border: 4px solid #FFF;
  border-radius: 50px!important;
  box-shadow: 1px 3px 4px rgb(0 0 0 / 40%);
  padding: 1rem 1.25rem;
  padding-left: 4rem;
  margin-bottom: 0.9rem;
}

.collapse_style_2 .accordion-item ul li a:hover{
  background: #99BDD1;
}

/*===報告頁面===*/

.report-content{

}

.report-content .page{
  width: 820px;
  height: 1123px;
  margin: 0 auto;
/*  border: 1px solid #000;*/
  color: #000;
  padding: 2rem;
  position: relative;
}

.report-content .page .report-title{
  font-size: 2rem;
  font-weight: bold;
  letter-spacing: 3px;
}

.report-content .page.food-suggestions {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.report-content .page.food-suggestions .header {
  margin-bottom: 50px;
  flex: none;
  width: 100%;
}
.report-content .page.food-suggestions .food-suggestions-header {
  padding: 15px 35px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #1D5998;
  flex: none;
  width: 100%;
  border-top-left-radius: 30px;
  border-top-right-radius: 30px;
}
.report-content .page.food-suggestions .food-suggestions-header .title {
  font-size: 1.375rem;
  color: #fff;
  font-weight: 600;
  letter-spacing: 0.5em;
}
.report-content .page.food-suggestions .food-suggestions-header .unit-box {
  display: flex;
  align-items: center;
}
.report-content .page.food-suggestions .food-suggestions-header .direction {
  background-color: #fff;
  color: #1D5998;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  padding: 5px 10px;
  position: relative;
  margin-right: 35px;
  border: none;
}
.report-content .page.food-suggestions .food-suggestions-header .direction::after {
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 17px 0 17px 15px;
  border-color: transparent transparent transparent #fff;
  position: absolute;
  top: 0;
  right: 0;
  transform: translateX(100%);
}
.report-content .page.food-suggestions .food-suggestions-header .unit {
  color: #fff;
  font-size: 0.95rem;
  font-weight: 700;
  font-style: italic;
}
.report-content .page.food-suggestions .food-suggestions-information {
  /*flex: 1;*/
  width: 100%;
  border: 2px solid #1D5998;
  overflow: hidden;
  padding: 30px 25px 20px;
  border-bottom-left-radius: 30px;
  border-bottom-right-radius: 30px;
}


.food-suggestions-information-header {
  display: flex;
  letter-spacing: 0.2em;
  font-size: 0.75rem;
  line-height: 20px;
  color: #434345;
  font-weight: 700;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  margin-bottom: 20px;
  padding-left: 10px;
}
.food-suggestions-information-header .list {
  display: flex;
  position: relative;
}
.food-suggestions-information-header .list .item {
  width: 20%;
  height: 20px;
  text-align: center;
}
.food-suggestions-information-header .list.bg .item:nth-of-type(1) {
  background-color: #1D5998;
  border-top-left-radius: 30px;
  border-bottom-left-radius: 30px;
}
.food-suggestions-information-header .list.bg .item:nth-of-type(2) {
  background-color: #CDE0E5;
}
.food-suggestions-information-header .list.bg .item:nth-of-type(3) {
  background-color: #8BB785;
}
.food-suggestions-information-header .list.bg .item:nth-of-type(4) {
  background-color: #F7D9A5;
}
.food-suggestions-information-header .list.bg .item:nth-of-type(5) {
  background-color: #B96670;
  border-top-right-radius: 30px;
  border-bottom-right-radius: 30px;
}
.food-suggestions-information-header .list.bg::after {
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 14px 8px 0 8px;
  border-color: #2C2C2E transparent transparent transparent;
  position: absolute;
  top: -7px;
}
.food-suggestions-information-header .list.bg.location1::after {
  left: calc(10% - 8px);
}
.food-suggestions-information-header .list.bg.location2::after {
  left: calc(30% - 8px);
}
.food-suggestions-information-header .list.bg.location3::after {
  left: calc(50% - 8px);
}
.food-suggestions-information-header .list.bg.location4::after {
  left: calc(70% - 8px);
}
.food-suggestions-information-header .list.bg.location5::after {
  left: calc(90% - 8px);
}

.food-suggestions-information-header2 {
  display: flex;
  align-items: flex-end;
  margin-bottom: 15px;
}
.food-suggestions-information-header2 .title {
  background-color: #1D5998;
  border-radius: 50px;
  padding: 10px 25px 8px 28px;
  color: #fff;
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  margin-right: 30px;
}
.food-suggestions-information-header2 img {
  height: 46.8px;
}
.food-suggestions-information-header2 .unit-remark {
  flex: 1;
  text-align: right;
  color: #1D5998;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.1em;
}
.food-suggestions-information-table1 {
  border: 2px solid #1D5998;
  border-radius: 20px;
  overflow: hidden;
}
.food-suggestions-information-table1 .tr {
  display: flex;
}
.food-suggestions-information-table1 .tr:not(:last-of-type) {
  border-bottom: 2px solid #1D5998;
}
.food-suggestions-information-table1 .th {
  width: 200px;
  border-right: 2px solid #1D5998;
  flex: none;
  text-align: center;
  padding: 15px 10px;
  font-size: 1.2rem;
  color: #1D5998;
  font-weight: 700;
  background-color: #D3D3D4;
}
.food-suggestions-information-table1 .td {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 0 20px;
  color: #2F2F31;
  font-size: 0.9rem;
  white-space: pre-wrap;
}

.food-suggestions-information-table2 {
  border: 2px solid #1D5998;
  border-radius: 20px;
  overflow: hidden;
}
.food-suggestions-information-table2 .tr {
  display: flex;
}
.food-suggestions-information-table2 .tr:not(:last-of-type) {
  border-bottom: 2px solid #1D5998;
}
.food-suggestions-information-table2 .th {
  text-align: center;
  flex: 1;
  color: #1D5998;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  padding: 5px 10px;
  background-color: #D3D3D4;
}
.food-suggestions-information-table2 .th:first-of-type {
  border-right: 2px solid #1D5998;
  width: 40%;
  flex: none;
  text-align: center;
}
.food-suggestions-information-table2 .td {
  flex: 1;
  padding: 5px 30px;
  font-size: 0.9rem;
  letter-spacing: 0.1em;
}
.food-suggestions-information-table2 .td:first-of-type {
  border-right: 2px solid #1D5998;
  width: 40%;
  flex: none;
  text-align: center;
  font-weight: 700;
}
.food-suggestions-information-remark {
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  margin-top: 10px;
  padding: 0 15px;
  line-height: 1.5;
}

.report-content .page.life .life-header {
  padding: 15px 35px;
  text-align: center;
  background-color: #1D5998;
  border-top-left-radius: 30px;
  border-top-right-radius: 30px;
  font-size: 1.375rem;
  color: #fff;
  font-weight: 600;
  letter-spacing: 0.5em;
}
.report-content .page.life .life-information {
  border: 2px solid #1D5998;
  overflow: hidden;
  padding: 20px 45px 40px;
  border-bottom-left-radius: 30px;
  border-bottom-right-radius: 30px;
}
.life-information .title {
  background-color: #1D5998;
  color: #fff;
  padding: 10px 20px 9px;
  border-radius: 50px;
  font-size: 1.0625rem;
  letter-spacing: 0.3rem;
  display: inline-block;
  margin-bottom: 15px;
}
.life-information .content {
  padding-left: 50px;
  font-weight: 500;
  font-size: 1.0625rem;
  letter-spacing: 0.3rem;
  white-space: pre-wrap;
  line-height: 1.5;
  color: #2C2C2E;
}
.life-information .img-list {
  display: flex;
  column-gap: 30px;
  margin-top: 25px;
}
.life-information .img-list .img-box {
  width: 200px;
  height: 200px;
  background-color: #EFEFEF;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}
.life-information .img-list .img-box img {
  max-width: 100%;
  max-height: 100%;
}
.life-suggestion-container {
  display: flex;
  align-items: flex-start;
  margin-top: 20px;
}
.life-suggestion-container .tag {
  flex: none;
  padding: 7px 6px 6px;
  border: 1px solid #2C2C2E;
  color: #2C2C2E;
  font-size: 1.0625rem;
  letter-spacing: 0.2rem;
  font-weight: 600;
  margin-right: 15px;
}
.life-suggestion-container .life-suggestion-content {
  flex: 1;
  padding: 10px 20px 9px;
  background-color: #EFEFEF;
  color: #2C2C2E;
  font-size: 1.0625rem;
  letter-spacing: 0.2rem;
  white-space: pre-wrap;
  line-height: 1.5;
}

.page.basic-information-check {
  display: flex;
  flex-direction: column;
}
.page.basic-information-check header {
  flex: none;
}
.basic-information-check-container {
  height: 50%;
  overflow: hidden;
  position: relative;
}
.basic-information-check-container .title {
  display: inline-block;
  background-color: #1D5998;
  color: #fff;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.3rem;
  padding: 10px 25px 9px;
  border-radius: 50px;
  margin-bottom: 15px;
  flex: none;
}
.basic-information-check-container .check-list {
  display: flex;
  flex-wrap: wrap;
  column-gap: 10px;
  row-gap: 8px;
  width: 100%;
}
.basic-information-check-container .check-list .check-item {
  display: flex;
  align-items: flex-start;
  width: calc(50% - 5px);
}
.basic-information-check-container .check-list .check-item input {
  margin-right: 10px;
  margin-top: 4px;
  flex: none;
}

.page.life-planning {
  position: relative;
}
.page.life-planning .header {
  margin-bottom: 1rem;
}
.life-planning .text-container {
  position: absolute;
  top: 270px;
  width: calc(100% - 4rem);
}
.life-planning .title {
  font-size: 3rem;
  font-weight: 700;
  letter-spacing: 1rem;
  text-align: center;
  margin-bottom: 100px;
}

.page.calorie-proposal {
  padding-top: 1.5rem;
}
.page.calorie-proposal .title {
  font-weight: 700;
  text-align: center;
}
.calorie-proposal2 {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.calorie-proposal2 .header {
  flex: none;
}
.calorie-proposal2 .dietary-list {
  flex: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
}
.calorie-proposal2 .dietary-list .dietary-item {
  width: 27%;
  text-align: center;
}
.calorie-proposal2 .dietary-list .dietary-item:nth-child(2) {
  width: 46%;
}
.calorie-proposal2 .dietary-item .title {
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.1rem;
}
.calorie-proposal2 .dietary-item .img-box {
  margin: 10px auto 15px;
  position: relative;
}
.calorie-proposal2 .dietary-item .img-box .calorie-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1rem;
  color: #2D2D2F;
  line-height: 1;
}
.calorie-proposal2 .dietary-item .sub-title {
  display: inline-block;
  font-size: 1.2rem;
  font-weight: 700;
  color: #fff;
  background-color: #1D5998;
  border-radius: 50px;
  padding: 8px 30px 7px;
}
.calorie-proposal2 .content {
  flex: 1;
  font-size: 1rem;
  letter-spacing: 0.2rem;
  line-height: 1.5;
  padding: 20px 30px 20px;
  overflow: hidden;
  white-space: pre-wrap;
  text-align: center;
}
.calorie-proposal2 .content img {
  max-width: 100%;
  max-height: 100%;
}
.calorie-proposal2 > img {
  flex: none;
}

.calorie-proposal3 {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.calorie-proposal3 .header {
  flex: none;
}
.calorie-proposal3 > img {
  flex: none;
}
.calorie-proposal3 .food-list {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  column-gap: 30px;
  row-gap: 20px;
  align-items: center;
  margin: 10px 30px 40px;
}
.calorie-proposal3 .food-list .food-item {
  width: calc(50% - 15px);
  height: calc(33% - 15px);
  border: 1px dashed #000;
  border-radius: 10px;
  padding: 8px 10px;
  display: flex;
  align-items: center;
}
.calorie-proposal3 .food-list .food-item img {
  max-height: 100%;
  flex: none;
  margin-right: 20px;
}
.calorie-proposal3 .food-list .food-item .content {
  text-align: center;
  font-size: 1.2rem;
  font-weight: 700;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 80%;
}

.page.core .title {
  display: inline-block;
  font-size: 1.5rem;
  font-weight: 700;
  color: #fff;
  background-color: #1D5998;
  border-radius: 50px;
  padding: 15px 35px;
  letter-spacing: 0.5rem;
  margin-top: 20px;
  margin-bottom: 80px;
}
.page.core .content {
  margin-bottom: 80px;
}
.page.core .content #chart-container {
  height: 500px;
  width: 756px;
  position: relative;
  overflow: hidden;
}
.page.core .tip {
  text-align: center;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1D5998;
}
.page.core .tip .yellow {
  color: #EE9E5F;
}
.page.core .tip img {
  margin-right: 20px;
  height: 1.3rem;
}
.page.core .tip2 {
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: .2rem;
  padding: 15px 25px;
  color: #2C2C2E;
  border: 1px solid #2C2C2E;
  display: inline-block;
  margin-top: 80px;
  border-radius: 10px;
}

/*客戶名稱*/

.report-content .user-name.fl-t{
  position: absolute;
  top: 28rem;
  left: 0;
  width: 100%;
}

.report-content .user-name p{
  display: inline-block;
  margin-bottom: 0;
  font-size: 1.2rem;
  font-weight: bold;
}

.report-content .user-name p ~ p{
    margin-left: 2rem;
}


.report-content .user-name span{
  border-bottom: 1px solid;
  text-align: center;
  font-weight: normal;
  display: inline-block;
  width: 165px;
}

/*頁頭*/

.report-content .header{
  margin-bottom: 2rem;
}
.report-content .header.analysis {
  display: flex;
  justify-content: space-between;
  align-items: end;
}

.report-content .header p {
  margin-bottom: 0;
  font-size: 1.1rem;
  font-weight: bold;
  float: right;
  text-align: right;
}
.report-content .header.analysis p {
  font-size: 1.3rem;
  margin-bottom: -8px;
}

.report-content .header p span{
  display: block;
  font-size: 1rem;
  letter-spacing: 0px;
}

.report-content .header .user-name{
  float: right;
}

.report-content .header .user-name p{
  display: block;
  float: initial;
  text-align: left;
}

.report-content .header .user-name p span{
  display: inline-block;
}

.report-content .header .user-name p span.title{
  font-size: 1rem;
  font-weight: bold;
  border: 0;
  text-align: right;
}

.report-content .header .user-name p ~ p{
  margin-left: 0;
}
/*基本資料欄位*/

.report-content .personal-information .row{
  margin-bottom: 1rem;
  border: 1px solid;
  margin-left: 0;
  margin-right: 0;
}

.report-content .personal-information div[class*= col-]{
  font-size: 1.2rem;
  border: 1px solid#000;
  padding: 0.8rem 1rem;
  text-align: center;
}

.report-content .personal-information .title{
  font-weight: bold;
  background: #CDE0E5;
  letter-spacing: 4px;
}

.report-content .personal-information div.content{
  text-align: left;
  height: 200px;
}

.report-content .medical-records {
  text-align: center;
}
.report-content .medical-records .title-box {
  display: inline-block;
  position: relative;
  padding: 0 10px 0 14px;
  margin-bottom: 20px;
}
.report-content .medical-records .title {
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: 4px;
  position: relative;
  display: inline-block;
  z-index: 2;
}
.report-content .medical-records .title-box:after {
  content: '';
  position: absolute;
  height: 10px;
  background-color: #CDE0E5;
  width: 100%;
  border-radius: 10px;
  left: 0;
  bottom: 2px;
  z-index: 1;
}
.report-content .medical-records .table {
  border: 2px solid #1D5998;
  border-radius: 15px;
  overflow: hidden;
}
.report-content .medical-records .table .tr {
  display: flex;
  border-color: #1d5998;
}
.report-content .medical-records .table .tr .td.label {
  background-color: #CDE0E5;
  padding: 10px 20px;
  color: #1D5998;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 60px;
  flex: none;
  border-right: 2px solid #1D5998;
}
.report-content .medical-records .table .tr .td.content {
  padding: 30px 20px;
  white-space: pre-wrap;
  line-height: 1;
  min-height: 200px;
  text-align: left;
}

.report-content.knowledge .title {
  text-align: center;
  background-color: #618CA8;
  color: #fff;
  padding: 20px;
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1;
}
.report-content.knowledge .option-box {
  font-size: 1rem;
  color: #5F5F5F;
  text-align: center;
  padding: 15px 15px 10px;
  line-height: 2;
  font-weight: 600;
}
.report-content.knowledge .option-box .option {
  color: #D06454;
  font-size: 1.2rem;
}
.report-content.knowledge .content-container {
  padding: 0 30px;
}
.report-content.knowledge .content-container .card {
  background-color: #DCDDDF;
  border: none;
  border-radius: 0;
  color: #5F5F5F;
  font-size: 1rem;
  text-align: center;
  padding: 20px 20px 15px;
  font-weight: 600;
  margin-bottom: 25px;
}
.report-content.knowledge .content-container .sub-title {
  color: #618CA8;
  font-size: 1.2rem;
  font-weight: 600;
  padding: 0 5px;
  margin-bottom: 5px;
}
.report-content.knowledge .content-container .card2 {
  border: 1px dashed #D3D3D3;
  padding: 0 14px;
  margin-bottom: 30px;
}
.report-content.knowledge .content-container .card2 p {
  margin: 14px 0;
}

/*表格*/
.table-style-1 table{
  width: 100%;
}

.table-style-1 table th{
  background: #1D5998;
  color: #FFF;
  font-size: 1.2rem;
  text-align: center;
  padding: 12px;
  border: 2px solid #1d5998;
}

.table-style-1 table td{
  border: 2px solid #1d5998;
  font-weight: bold;
  font-size: 1rem;
  padding: 12px;
  vertical-align: middle;
}

.table-style-1 table td:first-child{
  background: #CDE0E5;
  color: #1d5998;
  font-size: 1.2rem;
  text-align: center;
  width: 125px;
}

.table-style-2 table{
  width: 100%;
  border: 2px solid #2B2C2D;
}

.table-style-2 table th{
  background: #CDE0E5;
  color: #2B2C2D;
  font-size: 1rem;
  text-align: center;
  padding: 12px;
  border: 1px solid #2B2C2D;
}

.table-style-2 table td{
  border: 1px solid #2B2C2D;
  font-size: 1.1rem;
  padding: 12px;
  text-align: center;
}
.table-style-2 table td img {
  max-width: 120px;
}

.table-style-3 table{
  width: 100%;
}

.table-style-3 table th{
  background: #99BDD1;
  color: #FFF;
  padding: 8px 20px;
  font-size: 1.3rem;
  letter-spacing: 4px;
  border: 8px solid #FFF;
}

.table-style-3 table td{
  padding: 8px 20px;
  font-size: 1.1rem;
}

.table-style-3 table tr ~ tr{
  border: 8px solid #FFF;
}

.table-style-3 table tr:nth-child(odd) td {
    background-color: #F2F2F2;
}


.table-style-4 table{
  width: 100%;
}

.table-style-4 table th{
  background: #99BDD1;
  color: #FFF;
  padding: 8px 20px;
  font-size: 1.3rem;
  letter-spacing: 4px;
  border: 8px solid #FFF;
}

.table-style-4 table td{
  padding: 10px 20px;
  font-size: 1.1rem;
  color: #595757;
}


.table-style-4 a{
  color: #595757;
}

.table-style-4 a:hover{
  color: var(--clear-blue);
}

.table-style-4 a.disabled{
  pointer-events: none;
  color: #bbb;
}

.table-style-4 table tr ~ tr{
  border-left: 8px solid #FFF;
  border-right: 8px solid #FFF;
  border-bottom: 2px dashed #bbb;
}

.nourishment-list table img{
  width: 120px;
}

.symptom-disease table td:nth-child(2){
  vertical-align: top;
}

.media-edit table{
  width: 100%;
  text-align: center;
}

.media-edit table .icon img{
  width: 40px;
}

.media-edit table td{
  border: 2px dashed #c6c6c6;
  padding: 0.7rem 1rem;
}

.media-edit table td .btn{
  font-size: 1.3rem;
}

.media-edit table td:first-child{
  width: 60px;
}

.media-edit table td:nth-child(2){
  width: 150px;
}
.media-edit table td:nth-child(4),
.media-edit table td:nth-child(5){
  width: 60px;
}

.media-edit table td:last-child i{
  color: var(--clear-blue);
}

.media-edit table .form-control{
  border: 0;
  border-radius: 8px;
}

/*每日卡路里*/
.daily-caloric {
  border: 2px dashed #959595;
  margin: 1rem 0;
}


.daily-caloric .item{
  text-align: center;
  font-size: 1.3em;
  font-weight: bold;
  padding: 3rem 1rem;
}

.daily-caloric .item .circle{
  border: 3px solid #000;
  width: 130px;
  height: 130px;
  border-radius: 49%;
  margin: 0 auto;
  padding: 1rem;
  font-size: 1.2rem;
  line-height: 6rem;
}

/*每日食物份數建議*/
.food-serving .item{
  border: 2px dashed #959595;
  border-radius: 15px;
  padding: 10px;
  overflow: hidden;
  margin-bottom: 1.5rem;
}

.food-serving .item img{
  float: left;
}

.food-serving .item p{
  float: right;
  font-size: 1.2rem;
  font-weight: bold;
  text-align: center;
  padding: 1rem 0;
  width: 50%;
}

.food-nutrients table th{
  font-size: 0.75rem;
  padding: 5px;
}

.food-nutrients table td{
  font-size: 0.875rem;
  padding: 5px;
  text-align: center;
  white-space: pre-wrap;
}

.food-nutrients table td:first-child{
  width: 75px;
  font-size: 0.875rem;
}

.food-nutrients table td ~ td{
  width: 80px;
}

.food-nutrients table td:nth-child(6){
  width: 220px;
  font-size: 0.8125rem;
  letter-spacing: 0;
  text-align: left;
  padding: 5px 15px;
}


.food-nutrients table img{
  width: 100px;
}

/*膳食營養素參考攝取量*/
.intakes-list .item{
  border: 2px dashed #959595;
  margin-top: 1rem;
  padding: 1rem;
}

.intakes-list .item h4{
  color: #E38C75;
  font-size: 2rem;
  font-weight: bold;
}

.intakes-list .item span{
  font-size: 1.3rem;
  font-weight: bold;
  border: 1px solid #000;
  padding: 4px 6px;
  float: left;
}

.intakes-list .item ol{
  float: left;
  font-weight: bold;
  line-height: 1.3rem;
  width: calc(100% - 60px);
  list-style: none;
  padding-left: 10px;
}

.intakes-list .item .bar-title{
  background: var(--clear-blue);
  color: #FFF;
  font-size: 0.9rem;
  font-weight: bold;
  padding: 8px;
  border-radius: 50px;
  text-align: center;
}

.intakes-list .item .progress{
  height: 28px;
  border: 1px solid #CDE0E5;
  border-radius: 8px;
  background: #FFF;
  transform: translateY(3px);
  -webkit-transform: translateY(3px);
  -ms-transform: translateY(3px);
}

.intakes-list .item .progress-bar{
  background-color: #CDE0E5;
}

.intakes-list .item .bar-text{
  display: block;
  transform: translateY(6px);
  -webkit-transform: translateY(6px);
  -ms-transform: translateY(6px);
}


.intakes-list .item .bar-style-2 .bar-title{
  background: #797C90;
}

.intakes-list .item .bar-style-2 .progress{
  border-color: #AABEBB;
}

.intakes-list .item .bar-style-2 .progress-bar{
  background-color: #AABEBB;
}

/*營養分析*/
.remark{
  background: #F2F2F2;
  border-radius: 30px;
  padding: 1.5rem;
  font-size: 14px;
}
.fit-img.analysis {
  position: absolute;
  bottom: 0;
  width: calc(100% - 64px);
}

.page5-text{
  font-size: 15px;
}

/*營養處方*/
.sort{
  width: 500px;
  margin: 0 auto;
}

#sort_list .item{
  border: 2px dashed #bbb;
  font-size: 1.2rem;
  color: var(--clear-blue);
  padding: 10px;
  margin-bottom: 5px;
}

#sort_list .item .arrow{
  padding: 12px;
  color: var(--dark-gray);
  font-size: 1.2rem;
  margin-left: -5px;
  margin-right: 20px;
  border-right: 2px dashed #bbb;
}

.suggestions-list .left{
  background: #FFF;
  border: 1px solid #99BDD1;
  border-radius: 12px;
  padding: 1rem;
}

.suggestions-list .right .btn{
  margin: 0px 4px;
  min-width: 120px;
  font-weight: bold;
}

.use-suggestions{
  width: 1000px;
  margin: 0 auto;
}

.use-suggestions > div > div{
  padding: 5px 15px;
}

.use-suggestions .title span{
  font-size: 1.1rem;
  font-weight: bold;
  color: var(--clear-blue);
}

.use-suggestions > div.title > div{
  padding: 0 15px;
}

.use-suggestions .suggestion .p-title{
  background: #F2F2F2;
  padding: 15px;
  margin-bottom: 0;
}

.use-suggestions .p-img{
  width: 110px;
  border: 1px solid;
  border-radius: 5px;
  padding: 5px;
}

.use-suggestions .title .p-img{
  border: 0;
}

.use-suggestions .btn-area{
  text-align: center;
}


/*=========右側視窗==========*/
.suggestions-btn {
  position: fixed;
  right: -150px;
  bottom: 80px;
  z-index: 9999;
  background: #EEF3F7;
  width: 250px;
  border-radius: 50px 0 0 50px;
  text-align: left;
  transition: 0.2s ease-in;
}

.suggestions-btn.open{
  right: 0;
}

.suggestions-btn .btn{
  border-radius: 50%;
  padding: 10px;
}

.suggestions-btn img{
  width: 55px;
}

.suggestions-btn p{
  margin-bottom: 0;
  display: none;
  font-size: 1.1rem;
  margin-left: 5px;
}

.suggestions-btn.open p{
  display: inline-block;
}

.suggestions-area{
  width: 282px;
  height: 80vh;
  top: 20px;
  right: -2px;
  background: #FFF;
  border: 2px solid;
  border-radius: 20px 0 0 20px;
  padding-bottom: 55px;
}

.suggestions-area .nav{
  position: absolute;
  left: -42px;
}

.suggestions-area .nav-pills .nav-link{
  writing-mode: vertical-lr;
  -webkit-writing-mode: vertical-lr;
  -ms-writing-mode: vertical-lr;
  background: #F2F2F2;
  padding: 10px 8px;
  margin-bottom: 3px;
  font-size: 16px;
  font-weight: bold;
  color: #595757;
  letter-spacing: 1px;
  border-radius: 5px;
}

.suggestions-area .nav-pills .nav-link.active,
.suggestions-area .nav-pills .show>.nav-link{
  background: var(--clear-blue);
  color: #FFF;
}

.suggestions-area .tab-content{
  width: 100%;
}

/* 營養素分析圖表 start */
.nutrients-analysis {
  /*margin-top: 2rem;*/
  margin-top: 0.7rem;
}
.nutrients-analysis table {
  border-collapse: separate;
  border-spacing: 0 1rem;
}
.nutrients-analysis tr {
  margin-bottom: 2rem;
}
.nutrients-analysis th {
  text-align: center;
}
.nutrients-analysis th.name {
  width: 15%;
}
.nutrients-analysis th.recommended {
  width: 15%;
}
.nutrients-analysis th.analysis {
  width: 40%;
}
.nutrients-analysis .recommended-tag {
  background: #F2F2F2;
  padding: 4px 5px;
  border-radius: 25px;
  display: inline-block;
  text-align: center;
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
}
.nutrients-analysis .tag {
  padding: 4px 5px;
  border-radius: 25px;
  display: inline-block;
  text-align: center;
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  border: 1px solid #000;
}
.nutrients-analysis .tag.tag1 {
  border-color: #68924A;
  color: #68924A;
}
.nutrients-analysis .tag.tag2 {
  border-color: #1A7CB1;
  color: #1A7CB1;
}
.nutrients-analysis .tag.tag3 {
  border-color: #796798;
  color: #796798;
}
.nutrients-analysis .tag.tag4 {
  border-color: #983C35;
  color: #983C35;
}
.nutrients-analysis td.text-center {
  font-style: italic;
}
.final_score {
  border: 1px solid #C6C6C6;
  position: relative;
}
.final_score:before {
  content: '';
  height: 100%;
  width: 0;
  border-right: 1px dashed #C6C6C6;
  position: absolute;
  left: 40%;
}
.final_score .progress {
  height: 1.5rem;
  border-radius: 0;
}
.final_score .progress.p20 {

}
.final_score .progress {
  width: 100%;
  background-color: #A41B22;
}
.final_score .p19 {
   width: 95%;
   background-color: #BF3C39;
}
.final_score .p18 {
   width: 90%;
   background-color: #AC5771;
}
.final_score .p17 {
   width: 85%;
   background-color: #CA6C8D;
}
.final_score .p16 {
   width: 80%;
   background-color: #DC879A;
}
.final_score .p15 {
   width: 75%;
   background-color: #D6978E;
}
.final_score .p14 {
   width: 70%;
   background-color: #D9835A;
}
.final_score .p13 {
   width: 65%;
   background-color: #D19468;
}
.final_score .p12 {
   width: 60%;
   background-color: #EE9C61;
}
.final_score .p11 {
   width: 55%;
   background-color: #F1B564;
}
.final_score .p10 {
   width: 50%;
   background-color: #F8DD7E;
}
.final_score .p9 {
   width: 45%;
   background-color: #FFE979;
}
.final_score .p8 {
   width: 40%;
   background-color: #FFF8AE;
}
.final_score .p7 {
   width: 35%;
   background-color: #BBD897;
}
.final_score .p6 {
   width: 30%;
   background-color: #83AF87;
}
.final_score .p5 {
   width: 25%;
   background-color: #70A9A8;
}
.final_score .p4 {
   width: 20%;
   background-color: #79A9D4;
}
.final_score .p3 {
   width: 15%;
   background-color: #286196;
}
.final_score .p2 {
   width: 10%;
   background-color: #744B9A;
}
.final_score .p1 {
   width: 5%;
   background-color: #55438F;
}
/* 營養素分析圖表 end */

/*========按鈕=============*/

.main_btn{
  display: inline-block;
  background: #FFF;
  color: #6E6F70;
  border: 2px solid #C6C6C6;
  border-radius: 50px;
  font-size: 1.4rem;
  padding: 10px 20px;
  min-width: 180px;
  box-shadow: 4px 4px 0 #D9D9D9;
}

.main_btn i{
  color: #378BBF;
}

.main_btn:hover,.main_btn:active,.main_btn:focus{
  color: #FFF;
  background: linear-gradient(to right,  #8dbdcc 0%,#dbedfc 100%);
  border-color: #FFF;
}

.main_btn_2{
  display: inline-block;
  background: #FFF;
  color: #595757;
  border: 1px solid #595757;
  border-radius: 15px;
  font-size: 1.3rem;
  font-weight: bold;
  padding: 10px 20px;
  min-width: 210px;
}

.main_btn_2:hover,.main_btn_2:active,.main_btn_2:focus{
  color: #FFF;
  background: #595757;
}

.main_btn_3{
  font-size: 1.4rem;
  font-weight: bold;
  color: var(--clear-blue);
  letter-spacing: 3px;
}

.main_btn_3:hover,.main_btn_3:active,.main_btn_3:focus{
  color: var(--dark-blue);
}

.btn-primary,a.btn-primary {
  color: #fff;
  background-color: var(--clear-blue);
  border-color: var(--clear-blue);
  border-radius: 50px;
  min-width: 100px;
}

.btn-primary:hover,a.btn-primary:hover {
    color: #fff;
    background-color: var(--dark-blue);
    border-color: var(--dark-blue);
}

.btn.btn-lg{
  min-width: 130px;
  font-weight: bold;
  letter-spacing: 4px;
}

.btn-primary-2,a.btn-primary-2{
  font-size: 1rem;
  color: #fff;
  font-weight: bold;
  background-color: var(--clear-blue);
  border-color: var(--clear-blue);
  border-radius: 5px;
}

.btn-primary-2:hover,a.btn-primary-2:hover {
    color: #fff;
    background-color: var(--dark-blue);
    border-color: var(--dark-blue);
}

.btn-primary-3,a.btn-primary-3 {
  color: var(--dark-gray);
  background-color: #FFF;
  border-color: var(--dark-gray);
  border-radius: 0;
  min-width: 100px;
}

.btn-primary-3:hover,a.btn-primary-3:hover {
    color: #fff;
    background-color: var(--dark-blue);
    border-color: var(--dark-blue);
}

.btn-primary-4,a.btn-primary-4 {
  color: #fff;
  background-color: #595757;
  border-color: #595757;
  border-radius: 50px;
  min-width: 100px;
}

.btn-primary-4:hover,a.btn-primary-4:hover {
    color: #fff;
    background-color: var(--dark-blue);
    border-color: var(--dark-blue);
}

.btn-primary-5,a.btn-primary-5 {
  color: var(--clear-blue);
  background-color: var(--light-blue);
  border-color: var(--light-blue);
  border-radius: 50px;
  min-width: 100px;
}

.btn-primary-5:hover,a.btn-primary-5:hover {
    color: #fff;
    background-color: var(--dark-blue);
    border-color: var(--dark-blue);
}

.delet-btn:hover,a.delet-btn:hover{
  background: #b90808;
  border-color: #b90808;
}

.border-rounded{
  border-radius: 50px!important;
}

.break {
  break-after: page;
}

@media print {
  @page {
    size: portrait;
    margin: 35px;
    padding: 0;
  }

  .report-content .page {
    /*padding: 35px;*/
    padding: 0;
    width: 210mm;
    height: 294mm;
    box-sizing: border-box;
    overflow: hidden;
    margin: 0 auto;
  }
  .accordion-body {
    padding: 0 !important;
  }


  .page.life-planning .header {
    margin-top: 1rem;
  }

  * {
    -webkit-print-color-adjust: exact !important;
    -moz-print-color-adjust: exact !important;
    -ms-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color-adjust: exact !important;
  }
}

.logo {
  max-width: 100%;
  max-height: 60px;
}

img {
  max-width: 100%;
}