html {
    background: #1e1e1e;
}

body {
    background: rgb(30, 30, 30);
    background: linear-gradient(0deg, rgba(30, 30, 30, 1) 0%, rgba(2, 2, 2, 1) 100%);
    font-size: 1rem;
	color: #fff;
	background: radial-gradient(circle at 0% 0%, #000000,#737373, #220000);
}

a {
    text-decoration: none;
}

.fs-14 {
    font-size: 14px;
}

.fs-6rem {
    font-size: 6rem;
}

/*========== Buttom ==========*/
.btn-check:checked+.btn,
.btn.active,
.btn.show,
.btn:first-child:active,
:not(.btn-check)+.btn:active {
    background-color: #4A57CB;
    border-color: #2D3DC9;
}

.btn-light-blue {
    background-color: #2D3DC9;
}

.btn-light-blue:hover {
    background-color: #4A57CB;
    border-color: #2D3DC9;
}

.btn-dark-blue {
    background-color: #4A57CB;
}

.btn-dark-blue:hover {
    background-color: #2D3DC9;
    border-color: #4A57CB;
}

.btn-purple {
    background: #744279;
}

.btn-yellow {
    background: #BDBE5E;
}

.fc-light-blue {
    color: #2D3DC9;
}

.fc-light-blue:hover {
    color: #4A57CB;
}

.fc-tiffany-blue {
    color: #1EFFFF;
}

.fc-theme-color {
    color: #BDE8F3;
}

.fc-green {
    color: #639769;
}

.fc-D9D9D9 {
    color: #D9D9D9;
}

/*========== Background color ==========*/
.bg-green {
    background: rgb(32, 32, 32);
    background: linear-gradient(0deg, rgba(32, 32, 32, 1) 0%, rgba(59, 125, 139, 1) 80%);
    border: 0;
}

.bg-pantone-blue {
    background: rgb(106, 208, 231);
    background: linear-gradient(180deg, rgba(106, 208, 231, 1) 0%, rgba(71, 84, 85, 1) 67%);
}

.bg-signal-black {
    background: rgb(41, 41, 41);
    background: linear-gradient(90deg, rgba(41, 41, 41, 1) 20%, rgba(29, 29, 29, 1) 50%, rgba(41, 41, 41, 1) 100%);
}

.bg-blue-grey {
    background-color: #474747 !important;
}

.bg-blue-white {
    background: rgb(122, 143, 157);
    background: linear-gradient(0deg, rgba(122, 143, 157, 1) 0%, rgba(77, 93, 203, 1) 100%);
}

.bg-dark-blue {
    background: #181F65;
    background-color: #181F65;
}

.bg-purple-green {
    background: rgb(37, 154, 43);
    background: linear-gradient(0deg, rgba(37, 154, 43, 1) 0%, rgba(148, 117, 175, 1) 100%);
}

.bg-red {
    background: rgb(74, 51, 51);
    background: linear-gradient(0deg, rgba(74, 51, 51, 1) 0%, rgba(184, 26, 26, 1) 50%);
    border: 0;
}

.bg-yellow-dark {
    background: rgb(50, 50, 43);
    background: linear-gradient(0deg, rgba(50, 50, 43, 1) 0%, rgba(123, 125, 30, 1) 50%, rgba(162, 165, 26, 1) 100%);
    border: 0;
}

.bg-purple {
    background: rgb(50, 46, 54);
    background: linear-gradient(0deg, rgba(50, 46, 54, 1) 0%, rgba(87, 28, 134, 1) 50%);
    border: 0;
}

.bg-light-green {
    background: rgb(47, 57, 47);
    background: linear-gradient(0deg, rgba(47, 57, 47, 1) 0%, rgba(28, 142, 32, 1) 50%);
    border: 0;
}

.bg-slate-blue {
    background: rgb(36, 55, 59);
    background: linear-gradient(0deg, rgba(36, 55, 59, 1) 0%, rgba(19, 83, 107, 1) 50%, rgba(71, 81, 142, 1) 100%);
}

.bg-teal-blue {
    background: rgb(63, 85, 92);
    background: linear-gradient(0deg, rgba(63, 85, 92, 1) 0%, rgba(53, 113, 136, 1) 60%);
}

.bg-hunter-green {
    background: rgb(91, 138, 94);
    background: linear-gradient(0deg, rgba(91, 138, 94, 1) 0%, rgba(52, 96, 47, 1) 60%);
}

.bg-purple-plum {
    background: rgb(74, 67, 75);
    background: linear-gradient(0deg, rgba(74, 67, 75, 1) 0%, rgba(171, 70, 179, 1) 60%);
}

.bg-purple-dark {
    background: rgb(71, 67, 71);
    background: linear-gradient(0deg, rgba(71, 67, 71, 1) 0%, rgba(170, 69, 180, 1) 100%);
}

.bg-dark-transpar {
    background: rgb(59, 59, 59);
    background: radial-gradient(circle, rgb(41 40 40) 0%, rgb(153 153 153 / 15%) 100%);
}

.bg-dark-green {
    background: rgb(69, 114, 98);
    background: linear-gradient(0deg, rgba(69, 114, 98, 1) 0%, rgba(54, 97, 48, 1) 50%);
}

.bg-footer {
    background: #BCE7F1;
    background-color: #BCE7F1;
}

.bg-ffffff29 {
    background: #ffffff29;
    background-color: #ffffff29;
}

.bg-progress-bar {
    background: url("../../assets/img/bg.png");
    background-repeat: no-repeat;
    background-size: contain;
    background-position-x: center;
    display: flex;
    justify-content: center;
    padding: 1.5rem;
}

/*========== ================= ==========*/
.overflow-y-800 {
    height: 400px;
    max-height: 600px;
    overflow-y: scroll;
}

.form-control {
    background: #ffffff29 !important;
    border: none !important;
	color: #fff !important;
}
.table>:not(caption)>*>* {
    background-color: transparent;
}

[data-bs-theme=dark] .form-select {
    background-color: #ffffff29 !important;
}
/*========== Custom Scrollbar ==========*/

::-webkit-scrollbar {
    /* display: none; */
    width: 3px;
    height: 0;
}

/* 長條 */
::-webkit-scrollbar-track {
    /* box-shadow: inset 0 0 5px grey; */
    border-radius: 10px;
    background: transparent;
}

/* 短條 */
::-webkit-scrollbar-thumb {
    background: #D9D9D9;
    border-radius: 3px;
}

/* hover */
::-webkit-scrollbar-thumb:hover {
    background: #000;
}

/*========== Begin Progress Bar ==========*/
.progress-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 350px;
    height: 350px;
    border-radius: 50%;
    background: radial-gradient(closest-side, #282828 70%, transparent 70% 100%), conic-gradient(from 180deg, #00FF85 0, #478249 0);
}

.progress-bar-25 {
	background: radial-gradient(closest-side, #282828 70%, transparent 70% 100%), conic-gradient(from 180deg, #00FF85 25%, #478249 0);
}

.progress-bar-50 {
	background: radial-gradient(closest-side, #282828 70%, transparent 70% 100%), conic-gradient(from 180deg, #00FF85 50%, #478249 0);
}

.progress-bar-75 {
	background: radial-gradient(closest-side, #282828 70%, transparent 70% 100%), conic-gradient(from 180deg, #00FF85 75%, #478249 0);
}

.progress-bar-100 {
	background: radial-gradient(closest-side, #282828 70%, transparent 70% 100%), conic-gradient(from 180deg, #00FF85 100%, #478249 0);
}

.progress-bar::before {
    content: "";
}

/*========== End Progress Bar ==========*/




@media (min-width:1200px) {
    .logo-max-height {
        max-height: 100px;
    }
}

@media (max-width:1200px) {
    .logo-max-height {
        max-height: 50px;
    }

    .progress-bar {
        width: 200px;
        height: 200px;
    }

    .fs-6rem {
        font-size: 4rem;
    }
}
@media (max-width:300px) {
    .progress-bar {
        width: 150px;
        height: 150px;
    }
    .fs-xs-14 {
        font-size: 12px;
    }
}

#qrcode canvas {
	vertical-align: middle;
    padding: 2px;
}
.layui-layer-content { color: #000!important; }
.layui-layer-btn a { height: 40px!important; line-height: 38px!important; background: #4A57CB!important; color: #fff!important; border-radius: 5px!important;}
.layui-layer-btn a:hover { color: #7F8FA4!important;}
.layui-layer-btn .layui-layer-btn0 {
    border-color: #4A57CB!important;
    background-color: #4A57CB!important;
}
.cursor-pointer { cursor: pointer; }
select.form-control {
    color: #000 !important;
}
.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
	background-color: #744279;
	background: #744279;
}
.blue_dot {
  background-color: #4BCFDA;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  display: block;
  position: absolute;
  margin-top: -19px;
}

/*-------------vertical-tree-view------------*/
.vertical-tree {
  margin-top: 22px;
  text-align: left;
}

.vertical-tree > ul {
  padding-left: 20px !important;
}

.vertical-tree > ul > li > a {
  display: block;
}

.vertical-tree > ul > li > a::after {
  right: 0;
  font-size: 18px;
}

.vertical-tree > ul > li ul > li {
  padding-top: 49px;
  padding-left: 36px;
}

.vertical-tree > ul > li ul > li ul li {
  padding-top: 16px;
}

.vertical-tree > ul > li ul > li ul li::after {
  top: 27px;
}

.vertical-tree > ul > li ul > li ul li a::after {
  display: none;
}

.vertical-tree ul {
  padding-left: 30px;
}

.vertical-tree li {
  margin: 0px 0;
  list-style-type: none;
  position: relative;
  padding: 20px 5px 0px 5px;
}

.vertical-tree li:last-of-type::before {
  height: calc(100% - 7px);
}

.vertical-tree li::before {
  content: '';
  position: absolute;
  top: -24px;
  width: 1px;
  height: 100%;
  right: auto;
  left: -26px;
  border-left: 2px dotted rgba(255, 255, 255, 0.2);
  bottom: 0;
}

.vertical-tree li::after {
  content: '';
  position: absolute;
  top: 58px;
  width: 51px;
  height: 20px;
  right: auto;
  left: -24px;
  border-top: 2px dotted rgba(255, 255, 255, 0.2);
}

.vertical-tree li a {
  display: inline-block;
  text-decoration: none;
  position: relative;
  padding-left: 20px;
}

.vertical-tree li a::before {
  content: '';
  background: #4BCFDA 0% 0% no-repeat padding-box;
  width: 10px;
  height: 10px;
  display: inline-block;
  border-radius: 50%;
  position: absolute;
  left: 0;
  top: 5px;
}

.vertical-tree li a::after {
  font-family: "Font Awesome 5 Free";
  /*content: "\f0d7";*/
  display: inline-block;
  vertical-align: middle;
  font-weight: 900;
  color: #4BCFDA;
  position: absolute;
  right: -18px;
  bottom: -4px;
}

.vertical-tree li a span {
  text-align: left;
  letter-spacing: 0px;
  color: #ffffff;
  opacity: 0.6;
  font-size: 12px;
  line-height: 18px;
  display: block;
  margin-bottom: 6px;
}

.vertical-tree li a p {
  text-align: left;
  letter-spacing: 0px;
  color: #BDE8F3;
  font-size: 15px;
  line-height: 14px;
  font-weight: 500;
  margin-bottom: 0;
}

.vertical-tree > ul > li::before,
.vertical-tree > ul > li::after {
  border: 0;
}