@-webkit-keyframes scale-in-center {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@keyframes scale-in-center {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@-webkit-keyframes rotate-center-01 {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes rotate-center-01 {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}



[v-cloak] {
    display: none;
}

:root {
    --light-green: 137, 233, 244, 1; /* #89E9F4 */
    --outer-glow-xs: 93, 163, 175, 0.1; /* #5DA3AF */
    --outer-glow: 93, 163, 175, 0.5; /* #5DA3AF */
    --dark-blue: 23, 42, 75, 1; /* #172A4B */
    --filter-light-green: brightness(0) saturate(100%) invert(78%) sepia(51%) saturate(363%) hue-rotate(149deg) brightness(103%) contrast(91%) drop-shadow(4px 4px 12px rgba(var(--outer-glow))); /* use generator https://angel-rs.github.io/css-color-filter-generator */

    --light-yellow: 228, 224, 107, 1; /* #E4E06B */
    --light-bright-yellow: 255, 250, 35, 1; /* #E4E06B */
    --outer-glow-yellow-xs: 255, 250, 35, 0.2; /* #FFF922 */
    --outer-glow-yellow: 255, 250, 35, 0.7; /* #FFF922 */
    --filter-light-yellow: brightness(0) saturate(100%) invert(100%) sepia(40%) saturate(5070%) hue-rotate(332deg) brightness(109%) contrast(108%) drop-shadow(4px 4px 12px rgba(var(--outer-glow-yellow))); /* use generator https://angel-rs.github.io/css-color-filter-generator */

    --light-red: 245, 35, 35, 1; /* #F52323 */
    --light-red-opacity-20: 245, 35, 35, 0.2;
    --light-red-opacity-50: 245, 35, 35, 0.5;
    --outer-glow-red-xs: 235, 75, 75, 0.1; /* #EB4B4B */
    --outer-glow-red: 235, 75, 75, 0.4; /* #EB4B4B */
    --filter-light-red: brightness(0) saturate(100%) invert(15%) sepia(90%) saturate(5910%) hue-rotate(5deg) brightness(106%) contrast(91%) drop-shadow(4px 4px 12px rgba(var(--outer-glow-red))); /* use generator https://angel-rs.github.io/css-color-filter-generator */


    --light-orange: 255, 132, 0, 1; /* #FF8400 */
    --outer-glow-orange-xs: 235, 135, 75, 0.1; /* #EB874B */
    --outer-glow-orange: 235, 135, 75, 0.4; /* #EB874B */
    --filter-light-orange: brightness(0) saturate(100%) invert(34%) sepia(83%) saturate(2430%) hue-rotate(16deg) brightness(108%) contrast(108%) drop-shadow(4px 4px 12px rgba(var(--outer-glow-orange))); /* use generator https://angel-rs.github.io/css-color-filter-generator */


    --light-pumpkin: 255, 160, 0, 1; /* FFA000 */
    --light-pumpkin-opacity-20: 255, 160, 0, 0.2;
    --light-pumpkin-opacity-50: 255, 160, 0, 0.5;
    --outer-glow-pumpkin-xs: 235, 135, 75, 0.1; /* #EB874B */
    --outer-glow-pumpkin: 235, 135, 75, 0.4; /* #EB874B */
    --filter-light-pumpkin: filter: brightness(0) saturate(100%) invert(54%) sepia(98%) saturate(1191%) hue-rotate(2deg) brightness(108%) contrast(104%) drop-shadow(4px 4px 12px rgba(var(--outer-glow-pumpkin))); /* use generator https://angel-rs.github.io/css-color-filter-generator */
}

html { height: 100%; }
body {
    font-size: 20px;
    overflow-x:hidden;
    background: radial-gradient(
                    at calc(var(--mouse-x, 0) * 100%) calc(var(--mouse-y, 0) * 100%), 
                    #152937, /* light */
                    #0A1121 80%/* dark */
                ) #0A1121 no-repeat center / 180%;
}


  .logo-img {
    height: 10vw;
    max-height: 130px;
  }
  .identity-area {
    font-size: 1rem;
  }
  .identity-area > img{
    height: 100px;
  }
  .identity-area > .acc {
    font-size: 1rem;

    top: 23%;
    left: 13%;
  }
  .identity-area > .power {
    font-size: 1rem;

    bottom: 15%;
    right: 10%;
  }
  .identity-area > .circle {
    top: 30%;
    right: 11%;

    -webkit-animation: scale-in-center 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) 0.1s both, 
    rotate-center-01 20s linear reverse infinite 0.2s;
    animation: scale-in-center 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) 0.2s both, 
    rotate-center-01 20s linear reverse infinite 0.2s;
  }



  .logo-text {
    color: rgba(var(--light-green));

    -moz-text-shadow:4px 4px 12px 4px rgba(var(--outer-glow));
    -webkit-text-shadow:4px 4px 12px 4px rgba(var(--outer-glow));
    text-shadow:4px 4px 12px rgba(var(--outer-glow)),-4px -4px 12px rgba(var(--outer-glow));
  }
  .logo-text > span:nth-child(2) {
    color: rgba(var(--light-yellow));

    -moz-text-shadow:4px 4px 12px 4px rgba(var(--outer-glow-yellow-xs));
    -webkit-text-shadow:4px 4px 12px 4px rgba(var(--outer-glow-yellow-xs));
    text-shadow:4px 4px 12px rgba(var(--outer-glow-yellow-xs)),-4px -4px 12px rgba(var(--outer-glow-yellow-xs));
  }

  .menu-btn {
    width: 7vw;
    min-width: 100px;
    min-height:130px;
    cursor: pointer; 
  }
  .menu-btn > div:nth-child(1) {
    background: center/contain no-repeat url(/Img/Layout/menu.svg);

    -webkit-filter: drop-shadow(4px 4px 12px rgba(var(--outer-glow)));
    filter: drop-shadow(4px 4px 12px rgba(var(--outer-glow)));
  }
  .menu-btn:hover > div:nth-child(1) {
    background: center/contain no-repeat url(/Img/Layout/menu-hover.svg);

    -webkit-filter: drop-shadow(4px 4px 12px rgba(var(--outer-glow)));
    filter: drop-shadow(4px 4px 12px rgba(var(--outer-glow)));
  }

  .menu-icon {
    height: fit-content;
    width: fit-content;

    bottom: 40%;
    font-size: 2rem;
  }

  .menu-text {
    height: fit-content;
    width: fit-content;

    top: 35%;
  }
  
  .text-light-green {
    color: rgba(var(--light-green));
  }
  .text-bright {
    color: rgba(var(--light-green));

    -moz-text-shadow:4px 4px 12px 4px rgba(var(--outer-glow));
    -webkit-text-shadow:4px 4px 12px 4px rgba(var(--outer-glow));
    text-shadow:4px 4px 12px rgba(var(--outer-glow)),-4px -4px 12px rgba(var(--outer-glow));
  }
  .text-bright-yellow {
    color: rgba(var(--light-bright-yellow));

    -moz-text-shadow:4px 4px 12px 4px rgba(var(--outer-glow-yellow-xs));
    -webkit-text-shadow:4px 4px 12px 4px rgba(var(--outer-glow-yellow-xs));
    text-shadow:4px 4px 12px rgba(var(--outer-glow-yellow-xs)),-4px -4px 12px rgba(var(--outer-glow-yellow-xs));
  }


.border-light-green {
    border: solid;
    border-color: rgba(var(--light-green));
}

  .border-bright {
    border: solid;
    border-color: rgba(var(--light-green));

    -moz-box-shadow:4px 4px 12px 4px rgba(var(--outer-glow));
    -webkit-box-shadow:4px 4px 12px 4px rgba(var(--outer-glow));
    box-shadow:4px 4px 12px rgba(var(--outer-glow)),-4px -4px 12px rgba(var(--outer-glow));
  }
    .border-1-bright {
        border: 1px solid;
        border-color: rgba(var(--light-green));
        -moz-box-shadow: 4px 4px 12px 4px rgba(var(--outer-glow));
        -webkit-box-shadow: 4px 4px 12px 4px rgba(var(--outer-glow));
        box-shadow: 4px 4px 12px rgba(var(--outer-glow)),-4px -4px 12px rgba(var(--outer-glow));
    }
.border-bright-yellow {
    border: solid;
    border-color: rgba(var(--light-yellow));

    -moz-box-shadow: 4px 4px 12px 4px rgba(var(--outer-glow-yellow));
    -webkit-box-shadow: 4px 4px 12px 4px rgba(var(--outer-glow-yellow));
    box-shadow: 4px 4px 12px rgba(var(--outer-glow-yellow)),-4px -4px 12px rgba(var(--outer-glow-yellow));
}

.border-light-red {
    border: solid;
    border-color: rgba(var(--light-red));
}
.border-bright-red-opacity-20 {
    border: solid;
    border-color: rgba(var(--light-red-opacity-20));
    -moz-box-shadow: 4px 4px 12px 4px rgba(var(--outer-glow-red-xs));
    -webkit-box-shadow: 4px 4px 12px 4px rgba(var(--outer-glow-red-xs));
    box-shadow: 4px 4px 12px rgba(var(--outer-glow-red-xs)),-4px -4px 12px rgba(var(--outer-glow-red-xs));
}
.bg-bright-red {
    background: rgba(var(--light-red));
    -moz-box-shadow: 4px 4px 12px 4px rgba(var(--outer-glow-red-xs));
    -webkit-box-shadow: 4px 4px 12px 4px rgba(var(--outer-glow-red-xs));
    box-shadow: 4px 4px 12px rgba(var(--outer-glow-red)),-4px -4px 12px rgba(var(--outer-glow-red-xs));
}
.bg-bright-red-opacity-50 {
    background: rgba(var(--light-red-opacity-50));
    -moz-box-shadow: 4px 4px 12px 4px rgba(var(--outer-glow-red-xs));
    -webkit-box-shadow: 4px 4px 12px 4px rgba(var(--outer-glow-red-xs));
    box-shadow: 4px 4px 12px rgba(var(--outer-glow-red-xs)),-4px -4px 12px rgba(var(--outer-glow-red-xs));
}
.border-bright-pumpkin-opacity-20 {
    border: solid;
    border-color: rgba(var(--light-pumpkin-opacity-20 ));
    -moz-box-shadow: 4px 4px 12px 4px rgba(var(--outer-glow-pumpkin-xs ));
    -webkit-box-shadow: 4px 4px 12px 4px rgba(var(--outer-glow-pumpkin-xs ));
    box-shadow: 4px 4px 12px rgba(var(--outer-glow-pumpkin-xs )),-4px -4px 12px rgba(var(--outer-glow-pumpkin-xs));
}


.bg-bright-pumpkin-opacity-50 {
    background: rgba(var(--light-pumpkin-opacity-50));
    -moz-box-shadow: 4px 4px 12px 4px rgba(var(--outer-glow-pumpkin-opacity-50));
    -webkit-box-shadow: 4px 4px 12px 4px rgba(var(--outer-glow-pumpkin-opacity-50));
    box-shadow: 4px 4px 12px rgba(var(--outer-glow-pumpkin-opacity-50)),-4px -4px 12px rgba(var(--outer-glow-pumpkin-opacity-50));
}

.bg-bright-pumpkin {
    background: rgba(var(--light-pumpkin));
    -moz-box-shadow: 4px 4px 12px 4px rgba(var(--outer-glow-pumpkin));
    -webkit-box-shadow: 4px 4px 12px 4px rgba(var(--outer-glow-pumpkin));
    box-shadow: 4px 4px 12px rgba(var(--outer-glow-pumpkin)),-4px -4px 12px rgba(var(--outer-glow-pumpkin));
}

  .bg-light-green {
    background: rgba(var(--light-green));
  }
  .bg-bright {
    background: rgba(var(--light-green));

    -moz-box-shadow:4px 4px 12px 4px rgba(var(--outer-glow));
    -webkit-box-shadow:4px 4px 12px 4px rgba(var(--outer-glow));
    box-shadow:4px 4px 12px rgba(var(--outer-glow)),-4px -4px 12px rgba(var(--outer-glow));
  }

    .bg-light-yellow {
        background: rgba(var(--light-yellow));
    }

    .bg-bright-yellow {
        background: rgba(var(--light-yellow));

        -moz-box-shadow:4px 4px 12px 4px rgba(var(--outer-glow-yellow));
        -webkit-box-shadow:4px 4px 12px 4px rgba(var(--outer-glow-yellow));
        box-shadow:4px 4px 12px rgba(var(--outer-glow-yellow)),-4px -4px 12px rgba(var(--outer-glow-yellow));
    }

  .menu-btn:hover .text-bright {
    color: rgba(var(--dark-blue));
  }

  .horizontal-line {
    height:0px;
    border-bottom: 1px solid rgba(var(--light-green));

    -moz-box-shadow:4px 4px 12px 4px rgba(var(--outer-glow-xs));
    -webkit-box-shadow:4px 4px 12px 4px rgba(var(--outer-glow-xs));
    box-shadow:4px 4px 12px 4px rgba(var(--outer-glow-xs)),-4px -4px 12px 4px rgba(var(--outer-glow-xs));
  }


  /* 主內容區塊*/
  .flexFillVerticalRemaining {
    flex: 1 0 auto;
  }

  .case-status > img {
    width: 100%;

    -webkit-filter: drop-shadow(4px 4px 12px rgba(var(--outer-glow)));
    filter: drop-shadow(4px 4px 12px rgba(var(--outer-glow)));
  }
  .case-status > .case-name {
    width: fit-content;
    height: fit-content;

    top: 10%;

    font-size: 1.5rem;
    letter-spacing: 2px;
  }
  .case-status > .title {
    width: fit-content;
    height: fit-content;

    top: unset;
    bottom: 1%;
    left: 15%;

    font-size: 1rem;
    letter-spacing: 2px;
  }

.page-title {
    letter-spacing: 2px;
}

/* Table style */
.table {
    --bs-table-color-type: initial;
    /*--bs-table-bg-type: #0A1121;*/
    --bs-table-color-state: #FFFFFF;
    /*--bs-table-bg-state: initial;*/
    --bs-table-color: var(--bs-body-color);
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--bs-border-color);
    --bs-table-accent-bg: transparent;
    --bs-table-striped-color: var(--bs-body-color);
    --bs-table-striped-bg: rgba(255, 255, 255, 0.05);
    --bs-table-active-color: var(--bs-body-color);
    --bs-table-active-bg: rgba(0, 0, 0, 0.1);
    --bs-table-hover-color: #FFFFFF;
    --bs-table-hover-bg: rgba(255, 255, 255, 0.075);
    width: 100%;
    margin-bottom: 1rem;
    vertical-align: top;
    border-color: var(--bs-table-border-color);
}

    .table > thead > tr > th {
        background: #0E1927;
    }

.table-group-bg {
    background-color: rgba(15, 75, 80, 1) !important;
}

.modal .table {
    --bs-table-color-type: initial;
    --bs-table-bg-type: initial;
    --bs-table-color-state: #333333;
    --bs-table-bg-state: initial;
    --bs-table-color: var(--bs-body-color);
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--bs-border-color);
    --bs-table-accent-bg: transparent;
    --bs-table-striped-color: var(--bs-body-color);
    --bs-table-striped-bg: rgba(255, 255, 255, 0.05);
    --bs-table-active-color: var(--bs-body-color);
    --bs-table-active-bg: rgba(0, 0, 0, 0.1);
    --bs-table-hover-color: #333333;
    --bs-table-hover-bg: rgba(255, 255, 255, 0.075);
    width: 100%;
    margin-bottom: 1rem;
    vertical-align: top;
    border-color: #333333;
}


/* circle-check in Navbar */
@keyframes circle {
    from {
        stroke-dashoffset: 283;
    }
    to {
        stroke-dashoffset: 566;
    }
}

@keyframes circle-check-t {
    from {
        stroke-dashoffset: 100;
    }

    to {
        stroke-dashoffset: 0;
    }
}

.circle-check-c {
    stroke-dasharray: 283; /* svg's r *2 *pi = 圓周長 */
    stroke-dashoffset: 0;

}

.circle-check-t {
    stroke-dasharray: 100;
    stroke-dashoffset: 0;
}


footer {
    font-size: 0.9rem;
}