@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
@import url(reset.css);
* { font-family: "Noto Sans TC", "Roboto", sans-serif; box-sizing: border-box;}
html{
-webkit-text-size-adjust:none;/*修正旋轉後文字會變大*/
-webkit-overflow-scrolling:touch;/*修正ios滾動順暢*/
scroll-behavior: smooth;}
body{ background: #fff; font-size: 15px; color: #4d4d4d; line-height:1.6;}
a:link, a:visited{ color: #aa0727; text-decoration: none;}
a:hover, a:active{ text-decoration: underline;}
img{ vertical-align: bottom;} 
a img{ border: none;}
h1{ font-size: 24px; line-height: 1.5;}
h2{ font-size: 20px; line-height: 1.5;}
h3{ font-size: 18px; line-height: 1.5;}
h4{ font-size: 16px; line-height: 1.5;}


.ballot_report{ max-width: 1200px; height: 100px; overflow: hidden; margin: 0px auto; border: 1px solid #ddd; position: relative;}
.ballot_report > .title{ background: #333; width: 45px; height: 100px; display: flex; flex-wrap: wrap; flex-direction: row; justify-content: center; position: absolute; top: 0px; left: 0px;}
.ballot_report > .title > em{ display: block; width: 50%; height: 75px;  text-align: center; font-style: normal; font-size: 15px; writing-mode: vertical-rl;  color: #fff; position: relative; left: 3px;}
.ballot_report > .title > span{ display: block; width: 50%; height: 75px;   text-align: center; font-size: 15px; color: #fff; writing-mode: vertical-rl; position: relative; right: 3px;}
.ballot_report > .title > .more{ display: block; width: 100%; height: 25px;  font-size: 12px; font-weight: 300; font-style: normal; text-align: center; line-height: 22px;}
.ballot_report > .title > .more{ background-color: #eec82e; color: #4d4d4d;}
.ballot_report .run{ cursor: grab; margin-left: 45px;}
.ballot_report .piece{ background-color: #fff; height: 100px; display: flex; flex-direction: column; justify-content: center; padding: 0px 5px; border-right: 1px solid #ddd;}
.ballot_report .piece.successful .piece_content > .chart > .bar > .disagree{ background-color: #eee;}
.ballot_report .piece_title{ display: flex; flex-direction: row; align-items: center; gap: 15px; margin-bottom: 2px;}
.ballot_report .piece.failed .piece_content > .chart > .bar > .agree{ background-color: #eee;}
.ballot_report .piece_title .city{ position: relative; font-size: 12px;}
.ballot_report .piece_title .city::after{ content: ""; display: block; width: 1px; height: 15px; background-color: #aaa; position: absolute; top: 3px; right: -7px; transform: rotate(25deg);}
.ballot_report .piece_title .name{ font-weight: 500; font-size: 15px;}
.ballot_report .piece_title .state{ background-color: #ccc; padding: 0 3px; border-radius: 3px; margin-left: auto; font-size: 12px;}
.ballot_report .piece_title .state.invoicing{ background-color: #fff; color: #333; border: 1px solid #333;}
.ballot_report .piece_title .state.successful{ background-color: #6A0DAD; color: #fff;}
.ballot_report .piece_title .state.failed{ background-color: #F2E2F7; color: #333;}
.ballot_report .piece_content > .chart{ display: flex; flex-direction: column; gap: 3px;}
.ballot_report .piece_content > .chart > .txt{ display: flex; flex-direction: row; justify-content: space-between; font-size: 13px;}
.ballot_report .piece_content > .chart > .bar{ display: flex; flex-direction: row; justify-content: space-between; height:20px; background-color: #eee;}
.ballot_report .piece_content > .chart > .bar > .agree{ width: 1%; background-color: #6A0DAD;}
.ballot_report .piece_content > .chart > .bar > .disagree{ width: 1%; background-color: #F2E2F7;}
.ballot_report .piece_content > .chart > .votes{ display: flex; flex-direction: row; justify-content: space-between; font-size: 13px;}

/* app */
.ballot_report.app{ height: 75px;}
.ballot_report.app > .title{ height: 75px; margin-bottom: 3px;}
.ballot_report.app > .title > em, .ballot_report.app > .title > span{ font-size: 11px; height: 55px;}
.ballot_report.app > .title > em{ left: 5px; font-size: 14px; }
.ballot_report.app > .title > span{ right: 5px; }
.ballot_report.app > .title > .more{ font-size: 11px; height: 20px; line-height: 18px;}
.ballot_report.app .piece{ height: 100%;}
.ballot_report.app .piece_title{ gap: 5px; margin-bottom: unset;}
.ballot_report .piece_title .city::after{ height: 12px; top: 5px; right: -3px;}
.ballot_report .piece_content > .chart{ gap: unset;}
.ballot_report.app .piece_content > .chart > .bar{ height: 5px;}