@charset "UTF-8";
.w-5-p {
  width: 5%;
}

.w-10-p {
  width: 10%;
}

.w-15-p {
  width: 15%;
}

.w-20-p {
  width: 20%;
}

.w-25-p {
  width: 25%;
}

.w-30-p {
  width: 30%;
}

.w-35-p {
  width: 35%;
}

.w-40-p {
  width: 40%;
}

.w-45-p {
  width: 45%;
}

.w-50-p {
  width: 50%;
}

.w-55-p {
  width: 55%;
}

.w-60-p {
  width: 60%;
}

.w-65-p {
  width: 65%;
}

.w-70-p {
  width: 70%;
}

.w-75-p {
  width: 75%;
}

.w-80-p {
  width: 80%;
}

.w-85-p {
  width: 85%;
}

.w-90-p {
  width: 90%;
}

.w-95-p {
  width: 95%;
}

.w-100-p {
  width: 100%;
}

.h-5-p {
  height: 5%;
}

.h-10-p {
  height: 10%;
}

.h-15-p {
  height: 15%;
}

.h-20-p {
  height: 20%;
}

.h-25-p {
  height: 25%;
}

.h-30-p {
  height: 30%;
}

.h-35-p {
  height: 35%;
}

.h-40-p {
  height: 40%;
}

.h-45-p {
  height: 45%;
}

.h-50-p {
  height: 50%;
}

.h-55-p {
  height: 55%;
}

.h-60-p {
  height: 60%;
}

.h-65-p {
  height: 65%;
}

.h-70-p {
  height: 70%;
}

.h-75-p {
  height: 75%;
}

.h-80-p {
  height: 80%;
}

.h-85-p {
  height: 85%;
}

.h-90-p {
  height: 90%;
}

.h-95-p {
  height: 95%;
}

.h-100-p {
  height: 100%;
}

/*
    Tree Node 範例
    <ul class="treenode">
        <li class="root">Root Node
            <ul>
                <li>Node 1</li>
                <li>Node 2
                    <ul>
                        <li>Node 2-1</li>
                        <li>Node 2-2</li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
*/
/* begin:: Start */
.treenode {
  margin: 0px 0px 0px 5px;
  list-style: none;
  line-height: 2em;
}
.treenode ul {
  list-style: none;
}
.treenode li {
  position: relative;
}
.treenode li:before {
  position: absolute;
  left: -15px;
  top: 0px;
  content: "";
  display: block;
  border-left: 1px solid #ddd;
  height: 1em;
  border-bottom: 1px solid #ddd;
  width: 10px;
}
.treenode li:after {
  position: absolute;
  left: -15px;
  bottom: -7px;
  content: "";
  display: block;
  border-left: 1px solid #ddd;
  height: 100%;
}
.treenode li.root {
  margin: 0px 0px 0px -5px;
}
.treenode li.root:before {
  display: none;
}
.treenode li.root:after {
  display: none;
}
.treenode li:last-child:after {
  display: none;
}

/* begin:: End */
/*begin::Tree Node 使用*/
/*L 型態 線條*/
.AISQLBuild_TreeNodeLLine {
  position: absolute;
  left: 50%;
  top: -25%;
  content: "";
  display: block;
  border-left: 1px dotted #ccc;
  height: 75%;
  border-bottom: 1px dotted #ccc;
  width: 60%;
}

/*I 型態 線條*/
.AISQLBuild_TreeNodeILine {
  position: absolute;
  left: 50%;
  top: 50%;
  content: "";
  display: block;
  height: 50%;
  border-left: 1px dotted #ccc;
  width: 60%;
}

/*end::Tree Node 使用*/
/*begin::Theme Color Slip */
.Mat-primary-bg {
  background-color: #1bc5bd;
}

.Mat-primary-arrow svg g [fill] {
  fill: #1bc5bd;
}

.Mat-primary-10-bg {
  background-color: rgb(27.6147321429, 201.4852678571, 193.303125);
}

.Mat-primary-10-arrow svg g [fill] {
  fill: rgb(27.6147321429, 201.4852678571, 193.303125);
}

.Mat-primary-20-bg {
  background-color: rgb(28.2294642857, 205.9705357143, 197.60625);
}

.Mat-primary-20-arrow svg g [fill] {
  fill: rgb(28.2294642857, 205.9705357143, 197.60625);
}

.Mat-primary-30-bg {
  background-color: rgb(28.8441964286, 210.4558035714, 201.909375);
}

.Mat-primary-30-arrow svg g [fill] {
  fill: rgb(28.8441964286, 210.4558035714, 201.909375);
}

.Mat-primary-40-bg {
  background-color: rgb(29.4589285714, 214.9410714286, 206.2125);
}

.Mat-primary-40-arrow svg g [fill] {
  fill: rgb(29.4589285714, 214.9410714286, 206.2125);
}

.Mat-primary-50-bg {
  background-color: rgb(30.0736607143, 219.4263392857, 210.515625);
}

.Mat-primary-50-arrow svg g [fill] {
  fill: rgb(30.0736607143, 219.4263392857, 210.515625);
}

.Mat-primary-60-bg {
  background-color: rgb(30.6883928571, 223.9116071429, 214.81875);
}

.Mat-primary-60-arrow svg g [fill] {
  fill: rgb(30.6883928571, 223.9116071429, 214.81875);
}

.Mat-primary-70-bg {
  background-color: rgb(34.8700892857, 224.8299107143, 215.890625);
}

.Mat-primary-70-arrow svg g [fill] {
  fill: rgb(34.8700892857, 224.8299107143, 215.890625);
}

.Mat-primary-80-bg {
  background-color: rgb(39.3553571429, 225.4446428571, 216.6875);
}

.Mat-primary-80-arrow svg g [fill] {
  fill: rgb(39.3553571429, 225.4446428571, 216.6875);
}

.Mat-primary-90-bg {
  background-color: rgb(43.840625, 226.059375, 217.484375);
}

.Mat-primary-90-arrow svg g [fill] {
  fill: rgb(43.840625, 226.059375, 217.484375);
}

.Mat-primary-100-bg {
  background-color: rgb(48.3258928571, 226.6741071429, 218.28125);
}

.Mat-primary-100-arrow svg g [fill] {
  fill: rgb(48.3258928571, 226.6741071429, 218.28125);
}

.Mat-success-bg {
  background-color: #3699ff;
}

.Mat-success-arrow svg g [fill] {
  fill: #3699ff;
}

.Mat-success-10-bg {
  background-color: rgb(59.1, 155.5880597015, 255);
}

.Mat-success-10-arrow svg g [fill] {
  fill: rgb(59.1, 155.5880597015, 255);
}

.Mat-success-20-bg {
  background-color: rgb(64.2, 158.176119403, 255);
}

.Mat-success-20-arrow svg g [fill] {
  fill: rgb(64.2, 158.176119403, 255);
}

.Mat-success-30-bg {
  background-color: rgb(69.3, 160.7641791045, 255);
}

.Mat-success-30-arrow svg g [fill] {
  fill: rgb(69.3, 160.7641791045, 255);
}

.Mat-success-40-bg {
  background-color: rgb(74.4, 163.352238806, 255);
}

.Mat-success-40-arrow svg g [fill] {
  fill: rgb(74.4, 163.352238806, 255);
}

.Mat-success-50-bg {
  background-color: rgb(79.5, 165.9402985075, 255);
}

.Mat-success-50-arrow svg g [fill] {
  fill: rgb(79.5, 165.9402985075, 255);
}

.Mat-success-60-bg {
  background-color: rgb(84.6, 168.528358209, 255);
}

.Mat-success-60-arrow svg g [fill] {
  fill: rgb(84.6, 168.528358209, 255);
}

.Mat-success-70-bg {
  background-color: rgb(89.7, 171.1164179104, 255);
}

.Mat-success-70-arrow svg g [fill] {
  fill: rgb(89.7, 171.1164179104, 255);
}

.Mat-success-80-bg {
  background-color: rgb(94.8, 173.7044776119, 255);
}

.Mat-success-80-arrow svg g [fill] {
  fill: rgb(94.8, 173.7044776119, 255);
}

.Mat-success-90-bg {
  background-color: rgb(99.9, 176.2925373134, 255);
}

.Mat-success-90-arrow svg g [fill] {
  fill: rgb(99.9, 176.2925373134, 255);
}

.Mat-success-100-bg {
  background-color: rgb(105, 178.8805970149, 255);
}

.Mat-success-100-arrow svg g [fill] {
  fill: rgb(105, 178.8805970149, 255);
}

.Mat-danger-bg {
  background-color: #f64e60;
}

.Mat-danger-arrow svg g [fill] {
  fill: #f64e60;
}

.Mat-danger-10-bg {
  background-color: rgb(246.2467741935, 82.8532258065, 100.3596774194);
}

.Mat-danger-10-arrow svg g [fill] {
  fill: rgb(246.2467741935, 82.8532258065, 100.3596774194);
}

.Mat-danger-20-bg {
  background-color: rgb(246.4935483871, 87.7064516129, 104.7193548387);
}

.Mat-danger-20-arrow svg g [fill] {
  fill: rgb(246.4935483871, 87.7064516129, 104.7193548387);
}

.Mat-danger-30-bg {
  background-color: rgb(246.7403225806, 92.5596774194, 109.0790322581);
}

.Mat-danger-30-arrow svg g [fill] {
  fill: rgb(246.7403225806, 92.5596774194, 109.0790322581);
}

.Mat-danger-40-bg {
  background-color: rgb(246.9870967742, 97.4129032258, 113.4387096774);
}

.Mat-danger-40-arrow svg g [fill] {
  fill: rgb(246.9870967742, 97.4129032258, 113.4387096774);
}

.Mat-danger-50-bg {
  background-color: rgb(247.2338709677, 102.2661290323, 117.7983870968);
}

.Mat-danger-50-arrow svg g [fill] {
  fill: rgb(247.2338709677, 102.2661290323, 117.7983870968);
}

.Mat-danger-60-bg {
  background-color: rgb(247.4806451613, 107.1193548387, 122.1580645161);
}

.Mat-danger-60-arrow svg g [fill] {
  fill: rgb(247.4806451613, 107.1193548387, 122.1580645161);
}

.Mat-danger-70-bg {
  background-color: rgb(247.7274193548, 111.9725806452, 126.5177419355);
}

.Mat-danger-70-arrow svg g [fill] {
  fill: rgb(247.7274193548, 111.9725806452, 126.5177419355);
}

.Mat-danger-80-bg {
  background-color: rgb(247.9741935484, 116.8258064516, 130.8774193548);
}

.Mat-danger-80-arrow svg g [fill] {
  fill: rgb(247.9741935484, 116.8258064516, 130.8774193548);
}

.Mat-danger-90-bg {
  background-color: rgb(248.2209677419, 121.6790322581, 135.2370967742);
}

.Mat-danger-90-arrow svg g [fill] {
  fill: rgb(248.2209677419, 121.6790322581, 135.2370967742);
}

.Mat-danger-100-bg {
  background-color: rgb(248.4677419355, 126.5322580645, 139.5967741935);
}

.Mat-danger-100-arrow svg g [fill] {
  fill: rgb(248.4677419355, 126.5322580645, 139.5967741935);
}

.Mat-warning-bg {
  background-color: #ffa800;
}

.Mat-warning-arrow svg g [fill] {
  fill: #ffa800;
}

.Mat-warning-10-bg {
  background-color: rgb(255, 169.74, 5.1);
}

.Mat-warning-10-arrow svg g [fill] {
  fill: rgb(255, 169.74, 5.1);
}

.Mat-warning-20-bg {
  background-color: rgb(255, 171.48, 10.2);
}

.Mat-warning-20-arrow svg g [fill] {
  fill: rgb(255, 171.48, 10.2);
}

.Mat-warning-30-bg {
  background-color: rgb(255, 173.22, 15.3);
}

.Mat-warning-30-arrow svg g [fill] {
  fill: rgb(255, 173.22, 15.3);
}

.Mat-warning-40-bg {
  background-color: rgb(255, 174.96, 20.4);
}

.Mat-warning-40-arrow svg g [fill] {
  fill: rgb(255, 174.96, 20.4);
}

.Mat-warning-50-bg {
  background-color: rgb(255, 176.7, 25.5);
}

.Mat-warning-50-arrow svg g [fill] {
  fill: rgb(255, 176.7, 25.5);
}

.Mat-warning-60-bg {
  background-color: rgb(255, 178.44, 30.6);
}

.Mat-warning-60-arrow svg g [fill] {
  fill: rgb(255, 178.44, 30.6);
}

.Mat-warning-70-bg {
  background-color: rgb(255, 180.18, 35.7);
}

.Mat-warning-70-arrow svg g [fill] {
  fill: rgb(255, 180.18, 35.7);
}

.Mat-warning-80-bg {
  background-color: rgb(255, 181.92, 40.8);
}

.Mat-warning-80-arrow svg g [fill] {
  fill: rgb(255, 181.92, 40.8);
}

.Mat-warning-90-bg {
  background-color: rgb(255, 183.66, 45.9);
}

.Mat-warning-90-arrow svg g [fill] {
  fill: rgb(255, 183.66, 45.9);
}

.Mat-warning-100-bg {
  background-color: rgb(255, 185.4, 51);
}

.Mat-warning-100-arrow svg g [fill] {
  fill: rgb(255, 185.4, 51);
}

.Mat-info-bg {
  background-color: #6993ff;
}

.Mat-info-arrow svg g [fill] {
  fill: #6993ff;
}

.Mat-info-10-bg {
  background-color: rgb(110.1, 150.672, 255);
}

.Mat-info-10-arrow svg g [fill] {
  fill: rgb(110.1, 150.672, 255);
}

.Mat-info-20-bg {
  background-color: rgb(115.2, 154.344, 255);
}

.Mat-info-20-arrow svg g [fill] {
  fill: rgb(115.2, 154.344, 255);
}

.Mat-info-30-bg {
  background-color: rgb(120.3, 158.016, 255);
}

.Mat-info-30-arrow svg g [fill] {
  fill: rgb(120.3, 158.016, 255);
}

.Mat-info-40-bg {
  background-color: rgb(125.4, 161.688, 255);
}

.Mat-info-40-arrow svg g [fill] {
  fill: rgb(125.4, 161.688, 255);
}

.Mat-info-50-bg {
  background-color: rgb(130.5, 165.36, 255);
}

.Mat-info-50-arrow svg g [fill] {
  fill: rgb(130.5, 165.36, 255);
}

.Mat-info-60-bg {
  background-color: rgb(135.6, 169.032, 255);
}

.Mat-info-60-arrow svg g [fill] {
  fill: rgb(135.6, 169.032, 255);
}

.Mat-info-70-bg {
  background-color: rgb(140.7, 172.704, 255);
}

.Mat-info-70-arrow svg g [fill] {
  fill: rgb(140.7, 172.704, 255);
}

.Mat-info-80-bg {
  background-color: rgb(145.8, 176.376, 255);
}

.Mat-info-80-arrow svg g [fill] {
  fill: rgb(145.8, 176.376, 255);
}

.Mat-info-90-bg {
  background-color: rgb(150.9, 180.048, 255);
}

.Mat-info-90-arrow svg g [fill] {
  fill: rgb(150.9, 180.048, 255);
}

.Mat-info-100-bg {
  background-color: rgb(156, 183.72, 255);
}

.Mat-info-100-arrow svg g [fill] {
  fill: rgb(156, 183.72, 255);
}

.Mat-dark-bg {
  background-color: #131628;
}

.Mat-dark-arrow svg g [fill] {
  fill: #131628;
}

.Mat-dark-10-bg {
  background-color: rgb(20.6423728814, 23.9016949153, 43.4576271186);
}

.Mat-dark-10-arrow svg g [fill] {
  fill: rgb(20.6423728814, 23.9016949153, 43.4576271186);
}

.Mat-dark-20-bg {
  background-color: rgb(22.2847457627, 25.8033898305, 46.9152542373);
}

.Mat-dark-20-arrow svg g [fill] {
  fill: rgb(22.2847457627, 25.8033898305, 46.9152542373);
}

.Mat-dark-30-bg {
  background-color: rgb(23.9271186441, 27.7050847458, 50.3728813559);
}

.Mat-dark-30-arrow svg g [fill] {
  fill: rgb(23.9271186441, 27.7050847458, 50.3728813559);
}

.Mat-dark-40-bg {
  background-color: rgb(25.5694915254, 29.606779661, 53.8305084746);
}

.Mat-dark-40-arrow svg g [fill] {
  fill: rgb(25.5694915254, 29.606779661, 53.8305084746);
}

.Mat-dark-50-bg {
  background-color: rgb(27.2118644068, 31.5084745763, 57.2881355932);
}

.Mat-dark-50-arrow svg g [fill] {
  fill: rgb(27.2118644068, 31.5084745763, 57.2881355932);
}

.Mat-dark-60-bg {
  background-color: rgb(28.8542372881, 33.4101694915, 60.7457627119);
}

.Mat-dark-60-arrow svg g [fill] {
  fill: rgb(28.8542372881, 33.4101694915, 60.7457627119);
}

.Mat-dark-70-bg {
  background-color: rgb(30.4966101695, 35.3118644068, 64.2033898305);
}

.Mat-dark-70-arrow svg g [fill] {
  fill: rgb(30.4966101695, 35.3118644068, 64.2033898305);
}

.Mat-dark-80-bg {
  background-color: rgb(32.1389830508, 37.213559322, 67.6610169492);
}

.Mat-dark-80-arrow svg g [fill] {
  fill: rgb(32.1389830508, 37.213559322, 67.6610169492);
}

.Mat-dark-90-bg {
  background-color: rgb(33.7813559322, 39.1152542373, 71.1186440678);
}

.Mat-dark-90-arrow svg g [fill] {
  fill: rgb(33.7813559322, 39.1152542373, 71.1186440678);
}

.Mat-dark-100-bg {
  background-color: rgb(35.4237288136, 41.0169491525, 74.5762711864);
}

.Mat-dark-100-arrow svg g [fill] {
  fill: rgb(35.4237288136, 41.0169491525, 74.5762711864);
}

/*end::Theme Color Slip */
/*begin::Google Material Progress-Spinner */
.Mat-ProgressSpinnerWrap-PageTop {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(180, 180, 180, 0.5);
  z-index: 99999;
  height: 100%;
}
.Mat-ProgressSpinnerWrap-PageTop .Mat-ProgressSpinnerWrap_Box {
  position: absolute;
  top: 40%;
  bottom: 0;
  left: 0;
  right: 0;
}

.Mat-ProgressSpinnerWrap-ContentTop {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(180, 180, 180, 0.5);
  width: 100%;
  height: 100%;
  z-index: 99999;
}
.Mat-ProgressSpinnerWrap-ContentTop .Mat-ProgressSpinnerWrap_Box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.Mat-ProgressSpinner {
  position: relative;
  margin: 0 auto;
  width: 100px;
}
.Mat-ProgressSpinner:before {
  content: "";
  display: block;
  padding-top: 100%;
}
.Mat-ProgressSpinner .circular {
  animation: rotate 2s linear infinite;
  height: 100%;
  transform-origin: center center;
  width: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
.Mat-ProgressSpinner .path {
  stroke-dasharray: 1, 200;
  stroke-dashoffset: 0;
  animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
  stroke-linecap: round;
}
@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}
@keyframes dash {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -35px;
  }
  100% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -124px;
  }
}
@keyframes color {
  100%, 0% {
    stroke: #1bc5bd;
  }
  40% {
    stroke: #3699ff;
  }
  66% {
    stroke: #f64e60;
  }
  80% {
    stroke: #ffa800;
  }
  90% {
    stroke: #6993ff;
  }
}

/*end::Google Material Progress-Spinner */
/*begin::Google Material Progress-Bar */
.Mat-ProgressBar-Determinate, progress[value] {
  width: 100%;
  border: none;
  height: 5px;
  display: block;
}

.Mat-ProgressBar {
  position: relative;
  height: 4px;
  display: block;
  width: 100%;
  /*background-color: lighten( map-get($ColorSlip, primary), 35% );*/
  border-radius: 2px;
  overflow: hidden;
}
.Mat-ProgressBar .indeterminate {
  /*background-color: map-get($ColorSlip, primary);*/
}
.Mat-ProgressBar .indeterminate:before {
  content: "";
  position: absolute;
  background-color: inherit;
  top: 0;
  left: 0;
  bottom: 0;
  will-change: left, right;
  animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
}
.Mat-ProgressBar .indeterminate:after {
  content: "";
  position: absolute;
  background-color: inherit;
  top: 0;
  left: 0;
  bottom: 0;
  will-change: left, right;
  animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
  animation-delay: 1.15s;
}
.Mat-ProgressBar .query:before {
  content: "";
  position: absolute;
  background-color: inherit;
  top: 0;
  left: 0;
  bottom: 0;
  will-change: left, right;
  animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
  animation-direction: reverse;
}
.Mat-ProgressBar .query:after {
  content: "";
  position: absolute;
  background-color: inherit;
  top: 0;
  left: 0;
  bottom: 0;
  will-change: left, right;
  animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
  animation-delay: 1.15s;
  animation-direction: reverse;
}

/*.Mat-ProgressBar-ContentTop, .Mat-ProgressBar-PageTop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 99999;
}*/
/*.Mat-ProgressBar-ContentTop {
    position: absolute;
    top: 0;
    left: auto;
    right: auto;
    height: 4px;
    display: block;
    width: 100%;*/
/*background-color: lighten( map-get($ColorSlip, primary), 35% );*/
/*border-radius: 2px;
    overflow: hidden;
}

.Mat-ProgressBar-PageTop {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 99999;
}*/
.Mat-ProgressBar-primary {
  background-color: rgb(115.6049107143, 235.8950892857, 230.234375);
}
.Mat-ProgressBar-primary .indeterminate, .Mat-ProgressBar-primary .query {
  background-color: #1bc5bd;
}
.Mat-ProgressBar-primary .Mat-ProgressBar-Determinate::-webkit-progress-bar, .Mat-ProgressBar-primary progress[value]::-webkit-progress-bar {
  background-color: rgb(115.6049107143, 235.8950892857, 230.234375);
}
.Mat-ProgressBar-primary .Mat-ProgressBar-Determinate::-webkit-progress-value, .Mat-ProgressBar-primary progress[value]::-webkit-progress-value {
  background-color: #1bc5bd;
}

.Mat-ProgressBar-success {
  background-color: rgb(181.5, 217.7014925373, 255);
}
.Mat-ProgressBar-success .indeterminate, .Mat-ProgressBar-success .query {
  background-color: #3699ff;
}
.Mat-ProgressBar-success .Mat-ProgressBar-Determinate::-webkit-progress-bar, .Mat-ProgressBar-success progress[value]::-webkit-progress-bar {
  background-color: rgb(181.5, 217.7014925373, 255);
}
.Mat-ProgressBar-success .Mat-ProgressBar-Determinate::-webkit-progress-value, .Mat-ProgressBar-success progress[value]::-webkit-progress-value {
  background-color: #3699ff;
}

.Mat-ProgressBar-danger {
  background-color: rgb(252.1693548387, 199.3306451613, 204.9919354839);
}
.Mat-ProgressBar-danger .indeterminate, .Mat-ProgressBar-danger .query {
  background-color: #f64e60;
}
.Mat-ProgressBar-danger .Mat-ProgressBar-Determinate::-webkit-progress-bar, .Mat-ProgressBar-danger progress[value]::-webkit-progress-bar {
  background-color: rgb(252.1693548387, 199.3306451613, 204.9919354839);
}
.Mat-ProgressBar-danger .Mat-ProgressBar-Determinate::-webkit-progress-value, .Mat-ProgressBar-danger progress[value]::-webkit-progress-value {
  background-color: #f64e60;
}

.Mat-ProgressBar-warning {
  background-color: rgb(255, 211.5, 127.5);
}
.Mat-ProgressBar-warning .indeterminate, .Mat-ProgressBar-warning .query {
  background-color: #ffa800;
}
.Mat-ProgressBar-warning .Mat-ProgressBar-Determinate::-webkit-progress-bar, .Mat-ProgressBar-warning progress[value]::-webkit-progress-bar {
  background-color: rgb(255, 211.5, 127.5);
}
.Mat-ProgressBar-warning .Mat-ProgressBar-Determinate::-webkit-progress-value, .Mat-ProgressBar-warning progress[value]::-webkit-progress-value {
  background-color: #ffa800;
}

.Mat-ProgressBar-info {
  background-color: rgb(232.5, 238.8, 255);
}
.Mat-ProgressBar-info .indeterminate, .Mat-ProgressBar-info .query {
  background-color: #6993ff;
}
.Mat-ProgressBar-info .Mat-ProgressBar-Determinate::-webkit-progress-bar, .Mat-ProgressBar-info progress[value]::-webkit-progress-bar {
  background-color: rgb(232.5, 238.8, 255);
}
.Mat-ProgressBar-info .Mat-ProgressBar-Determinate::-webkit-progress-value, .Mat-ProgressBar-info progress[value]::-webkit-progress-value {
  background-color: #6993ff;
}

.Mat-ProgressBar-dark {
  background-color: rgb(60.0593220339, 69.5423728814, 126.4406779661);
}
.Mat-ProgressBar-dark .indeterminate, .Mat-ProgressBar-dark .query {
  background-color: #131628;
}
.Mat-ProgressBar-dark .Mat-ProgressBar-Determinate::-webkit-progress-bar, .Mat-ProgressBar-dark progress[value]::-webkit-progress-bar {
  background-color: rgb(60.0593220339, 69.5423728814, 126.4406779661);
}
.Mat-ProgressBar-dark .Mat-ProgressBar-Determinate::-webkit-progress-value, .Mat-ProgressBar-dark progress[value]::-webkit-progress-value {
  background-color: #131628;
}

@keyframes indeterminate {
  0% {
    left: -35%;
    right: 100%;
  }
  60% {
    left: 100%;
    right: -90%;
  }
  100% {
    left: 100%;
    right: -90%;
  }
}
@keyframes indeterminate-short {
  0% {
    left: -200%;
    right: 100%;
  }
  60% {
    left: 107%;
    right: -8%;
  }
  100% {
    left: 107%;
    right: -8%;
  }
}
/*end::Google Material Progress-Bar */
/*begin::文字特效 */
.TextEffects {
  text-transform: uppercase;
  letter-spacing: 4px;
  overflow: hidden;
  background: linear-gradient(90deg, #fff, #000, #fff);
  background-repeat: no-repeat;
  background-size: 80%;
  animation: TextAnimate 3s linear infinite;
  -webkit-background-clip: text;
  -webkit-text-fill-color: rgba(255, 255, 255, 0);
}

@keyframes TextAnimate {
  0% {
    background-position: -500%;
  }
  100% {
    background-position: 500%;
  }
}
/*end::文字特效 */
/*begin:: DEMO 使用 ============================================  */
/*begin::Loading特效 */
.loader2 {
  width: 48px;
  height: 48px;
  border: 3px dotted #FFF;
  border-style: solid solid dotted dotted;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  box-sizing: border-box;
  animation: rotation2 2s linear infinite;
}

.loader2::after {
  content: "";
  box-sizing: border-box;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  border: 3px dotted #FF3D00;
  border-style: solid solid dotted;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  animation: rotationBack2 1s linear infinite;
  transform-origin: center center;
}

@keyframes rotation2 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes rotationBack2 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}
/*end::Loading特效 */
/*begin::按鈕特效 */
.btn2,
.btn2:focus,
.btn2:hover {
  position: relative;
  min-width: 200px;
  border: 1px solid #FFFFFF;
  color: #FFFFFF;
  font-size: 1rem;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  -webkit-font-smoothing: antialiased;
  padding: 10px 20px;
  border-radius: 0.25rem;
  background-color: transparent;
}

.btn2:active:after {
  opacity: 1;
  transition: 0s;
  box-shadow: 0 0 0 0 white;
}

.btn2:active {
  top: 1px;
}

.btn2 span:nth-child(1),
.btn2 span:nth-child(2),
.btn2 span:nth-child(3),
.btn2 span:nth-child(4) {
  content: "";
  display: block;
  position: absolute;
  background-color: #FFFFFF;
}

.btn2 span:nth-child(1) {
  width: 1px;
  left: 0;
  bottom: 0;
}

.btn2 span:nth-child(2) {
  height: 1px;
  left: 0;
  top: 0;
}

.btn2 span:nth-child(3) {
  width: 1px;
  right: 0;
  top: 0;
}

.btn2 span:nth-child(4) {
  height: 1px;
  right: 0;
  bottom: 0;
}

.btn2:hover {
  border: none;
}

.btn2:hover span:nth-child(1) {
  animation: move1 1500ms infinite ease;
}

.btn2:hover span:nth-child(2) {
  animation: move2 1500ms infinite ease;
}

.btn2:hover span:nth-child(3) {
  animation: move3 1500ms infinite ease;
}

.btn2:hover span:nth-child(4) {
  animation: move4 1500ms infinite ease;
}

@keyframes move1 {
  0% {
    height: 100%;
    bottom: 0;
  }
  54% {
    height: 0;
    bottom: 100%;
  }
  55% {
    height: 0;
    bottom: 0;
  }
  100% {
    height: 100%;
    bottom: 0;
  }
}
@keyframes move2 {
  0% {
    width: 0;
    left: 0;
  }
  50% {
    width: 100%;
    left: 0;
  }
  100% {
    width: 0;
    left: 100%;
  }
}
@keyframes move3 {
  0% {
    height: 100%;
    top: 0;
  }
  54% {
    height: 0;
    top: 100%;
  }
  55% {
    height: 0;
    top: 0;
  }
  100% {
    height: 100%;
    top: 0;
  }
}
@keyframes move4 {
  0% {
    width: 0;
    right: 0;
  }
  55% {
    width: 100%;
    right: 0;
  }
  100% {
    width: 0;
    right: 100%;
  }
}
/*end::按鈕特效 */
em {
  color: var(--bs-danger-active);
  font-weight: 600 !important;
}

/*begin:: DEMO 使用 ============================================  */
/*begin:: 自製動畫 */
/* 使用動畫顯示 */
.animation-fadeIn {
  display: block;
  animation: fadeIn 0.5s ease-in-out;
}

/* 使用動畫隱藏 */
.animation-fadeOut {
  display: none;
  animation: fadeOut 0.5s ease-in-out;
}

/* 漸入效果 */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* 漸出效果 */
@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
/*end:: 自製動畫 */
/* Vertical Marquee 垂直滾動元件使用的動畫 */
@keyframes scroll-up {
  0% {
    transform: translateY(0%);
  }
  100% {
    transform: translateY(-50%);
  }
}
/* flatpickr-time：手機上時間欄位更好按、更大（修正撐高與對齊） */
/*@media (max-width: 768px) {*/
/* 讓 time 容器用 flex，子項目同高置中 */
/*.flatpickr-time {
    display: flex;
    align-items: center;*/ /* ✅ 垂直置中 */
/*justify-content: center;
gap: 6px;*/ /* ✅ 替代 separator padding 更穩 */
/*height: auto !important;*/ /* ✅ 強制讓容器可撐開 */
/*line-height: normal !important;
    padding: 10px 8px;
    box-sizing: border-box;
}*/
/* 兩個欄位 wrapper：固定高度、置中 */
/*.flatpickr-time .numInputWrapper {
    display: flex;
    align-items: center;
    height: 44px;*/ /* ✅ 跟 input 一樣高 */
/*width: 84px;*/ /* ✅ 比你原本 76px 更寬一點，避免字擠 */
/*box-sizing: border-box;
}*/
/* input 放大且高度一致 */
/*.flatpickr-time input.flatpickr-hour,
.flatpickr-time input.flatpickr-minute,
.flatpickr-time input.flatpickr-second {
    font-size: 18px;
    height: 44px;
    line-height: 44px;*/ /* ✅ 讓數字垂直置中更穩 */
/*width: 100%;*/ /* ✅ 交給 wrapper 控寬 */
/*box-sizing: border-box;
padding-right: 22px;*/ /* ✅ 留空間給上下箭頭 */
/*}*/
/* 分隔符號 ":" 用 inline-flex 置中，並跟 input 同高度 */
/*.flatpickr-time .flatpickr-time-separator {
    display: inline-flex;*/ /* ✅ 置中關鍵 */
/*align-items: center;*/ /* ✅ 垂直置中 */
/*justify-content: center;
height: 44px;*/ /* ✅ 跟 input 同高 */
/*line-height: 44px;
font-size: 20px;
padding: 0;*/ /* ✅ 讓 gap 控距離更一致 */
/*margin: 0;
width: 14px;*/ /* ✅ 固定寬度避免左右晃 */
/*}*/
/* 24hr 模式不會有 am/pm，但留著以防 */
/*.flatpickr-time .flatpickr-am-pm {
    font-size: 18px;
    height: 44px;
    line-height: 44px;
}*/
/* 上下箭頭在手機下比較容易偏位，直接調整到中間 */
/*.flatpickr-time .numInputWrapper span.arrowUp,
.flatpickr-time .numInputWrapper span.arrowDown {
    right: 6px;
    width: 16px;
}*/
/* 有些版本 arrowUp/Down 會用 top/height 控制，這裡讓它們在 44px 容器內均分 */
/*.flatpickr-time .numInputWrapper span.arrowUp {
        top: 6px;
    }

    .flatpickr-time .numInputWrapper span.arrowDown {
        bottom: 6px;
    }
}*/