*,*::before,*::after{
    box-sizing: border-box;
}

*{
    margin: 0;
    padding: 0;
}
html, body{
    height: 100%;
    /* overflow: hidden; */
    overflow-x: hidden;
    position:relative;
    left:0px;top:0px;
    font-family: sans-serif, serif, "Noto Sans CJK TC", "Microsoft JhengHei", PingFang, STHeiti;
    letter-spacing: .05rem;
}
#container{
    display: flex;
    flex-direction: column;
    height: 100%;
}
header{
    flex: 0 0 auto;
    box-shadow: #aaaaaa 1px 0px 3px;
}
.main{
    flex: 1 0 auto;
}
footer{
    flex: 0 0 auto;
    width: 100%; 
    background-color: #746262;
    color: white; 
    padding: 1rem; 
    text-align:center; 
    font-size: small;
}
footer p{
    margin-bottom: 0%;
}
/* 初始設定 end */
.material-icons {
    display: inline-block;
    font-size: inherit;
    line-height: inherit;
    vertical-align: middle;
    transform: translateY(-.1em);
}
.content{
    margin: 0 auto;
    margin-top: 2rem;
    margin-bottom: 10rem;
    width: 90%;
    max-width: 1920px;
    font-size: 14px;
}
a{
    text-decoration: none;
}
h1 {
    font-size: 2.5rem;
    font-weight: bold;
    line-height: 1.5;
}

h2 {
    font-size: 2rem;
    font-weight: bold;
    line-height: 1.5;
}

h3 {
    font-size: 1.75rem;
    font-weight: bold;
    line-height: 1.5;
}

h4 {
    font-size: 1.5rem;
    font-weight: bold;
    line-height: 1.5;
}

h5 {
    font-size: 1.25rem;
    font-weight: bold;
    line-height: 1.5;
}

h6 {
    font-size: 1rem;
    font-weight: bold;
    line-height: 1.5;
}
.fs-sm {
    font-size: small;
}

.fs-14 {
    font-size: 14px;
}
.fs-20{
    font-size: 1.25rem;
}
.fs-24{
    font-size: 1.5rem;
}
.fc-blue{
    color: #0058c4;
}
.fc-darkblue {
    color: #084894;
}
.fc-red{
    color: red;
}
.fc-darkred{
    color: #ac0101;
}
.fc-green{
    color: #0eaca4;
}
/* button start */
.btn-normal {
    padding: .75rem 1rem;
    border-radius: .25rem;
    text-align: center;
}

.btn-sm {
    padding: .5rem .75rem;
    border-radius: .25rem;
    font-size: small;
}

.btn-lg {
    padding: .75rem 1.5rem;
    border-radius: .25rem;
    font-size: 1.25rem;
}

.btn-w100 {
    width: 100%;
    padding: .5rem 1.5rem;
    border-radius: .25rem;
}

.btn-cancel {
    background-color: darkgray;
    color: #fff;
    border: 1px solid darkgray;
}
.btn-cancel:hover {
    background-color: rgb(186, 186, 186);
    color: #fff;
    border: 1px solid rgb(186, 186, 186)y;
}
.btn-cancel:active,
.btn-cance-outlined:hover {
    background-color: rgb(144, 144, 144);
    color: #fff;
    border: 1px solid rgb(144, 144, 144);
}
.btn-cancel-outlined {
    background-color: #ffffff;
    color: darkgray;
    border: 1px solid darkgray;
}

.btn-cance-outlined:hover {
    background-color: darkgray;
    color: #fff;
    border: 1px solid darkgray;
}
.btn-blue,
.btn-blue-outlined:hover {
    background-color: #084894;
    border: 1px solid #084894;
    color: #fff;
}

.btn-blue-outlined {
    background-color: #fff;
    border: 1px solid #084894;
    color: #084894;
}

.btn-blue:hover {
    background-color: #0058c4;
    border: 1px solid #0058c4;
    color: #fff;
}

.btn-blue:active,
.btn-blue-outlined:active {
    background-color: #053775;
    border: 1px solid #053775;
    color: #fff;
}
/*  */
.btn-lightblue,
.btn-lightblue-outlined:hover {
    background-color: #1c8ffa;
    border: 1px solid #1c8ffa;
    color: #fff;
}

.btn-lightblue-outlined {
    background-color: #fff;
    border: 1px solid #1c8ffa;
    color: #1c8ffa;
}

.btn-lightblue:hover {
    background-color: #34aaff;
    border: 1px solid #34aaff;
    color: #fff;
}

.btn-lightblue:active,
.btn-lightblue-outlined:active  {
    background-color: #0e7adf;
    border: 1px solid #0e7adf;
    color: #fff;
}

.btn-yellow,
.btn-yellow-outlined:hover {
    background-color: #ffa826;
    border: 1px solid #ffa826;
    color: #fff;
}

.btn-yellow:hover {
    background-color: #ffc849;
    border: 1px solid #ffc849;
    color: #fff;
}

.btn-yellow:active,
.btn-yellow-outlined:active {
    background-color: #f78c00;
    border: 1px solid #f78c00;
    color: #fff;
}
.btn-yellow-outlined{
    background-color: #fff;
    border: 1px solid #ffa826;
    color: #ffa826;
}
.btn-green {
    background-color: #35C2BA;
    color: #fff;
    border: 1px solid #35C2BA;
}

.btn-green:hover,
.btn-green-outlined:hover {
    background-color: #44dbd4;
    color: #fff;
    border: 1px solid #44dbd4;
}

.btn-green:active,
.btn-green-outlined:active {
    background-color: #0eaca4;
    color: #fff;
    border: 1px solid #0eaca4;
}

.btn-green-outlined {
    background-color: #fff;
    color: #35C2BA;
    border: 1px solid #35C2BA
}

.btn-red {
    background-color: #ac0101;
    color: #fff;
    border: 1px solid #ac0101;
}

.btn-red:hover,
.btn-red-outlined:hover {
    background-color: #cc0101;
    color: #fff;
    border: 1px solid #cc0101;
}

.btn-red:active,
.btn-red-outlined:active {
    background-color: #800808;
    color: #fff;
    border: 1px solid #800808;
}

.btn-red-outlined {
    background-color: #fff;
    color: #ac0101;
    border: 1px solid #ac0101;
}
/* button end */
/* thead-color start */
thead.th-blue{
    background-color: #084894;
    color: #fff;
}
thead.th-red{
    background-color: #ac0101;
    color: #fff;
}
thead.th-green{
    background-color: #008552;
    color: #fff;
}
thead.th-violet{
    background-color: #6a0091;
    color: #fff;
}
thead.th-orange{
    background-color: #b24700;
    color: #fff;
}
thead.th-yellow{
    background-color: #ffe645;
    color: #000;
}
/* thead-color end */
/* table-bg-color start */
.bg-red{
    background-image:linear-gradient( #fdecf4,#fdecf4)
}
.bg-blue{
    background-image:linear-gradient( #e3f2fd,#e3f2fd)
}
.bg-green{
    background-image:linear-gradient( #d8f3dc,#d8f3dc)
}
.bg-yellow{
    background-image:linear-gradient( #fdfcdc,#fdfcdc)
}
.bg-gray{
    background-image:linear-gradient( #e9ecef,#e9ecef)
}
.bg-violet{
    background-image:linear-gradient( #f2ebfb,#f2ebfb)
}
.bg-orange{
    background-image:linear-gradient( #ffebd3,#ffebd3)
}
/* table-bg-color end */
/* table start */
.table thead tr {
    text-align: center;
    font-size: 1.5rem;
}
.table tbody tr{
    font-size: 14px;
}
th,
td {
    vertical-align: middle;
}
th{
    line-height: 1.5;
}
.text-area {
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 1rem;
}
.form-check-input {
    margin-top: 0;
}
.form-control, .form-select{
    font-size: 14px;
}
/* table end */
/*  */
.x-center{
    text-align: center;
}
.y-center{
    vertical-align: middle;
}
.xy-center{
    text-align: center;
    vertical-align: middle;
}