@import url('vue-component.css');

body {
  font-family: 'Noto Sans TC', sans-serif;
  background-color: #EEEEEE;
  /*font-weight: 100;*/
}

.dropdown-item.active,
.dropdown-item:active {
  color: #fff;
  text-decoration: none;
  background-color: #6c757d;
}

[v-cloak] {
  display: none;
}

.awesomplete {
  display: block;
}

/* Bottom */
.bottom-30 {
  bottom: 30%;
}

/* Right */
.end-20 {
  right: 20%;
}



.btn-big {
  padding: 18px 0 !important;
}

.btn-little {
  padding: 13px 0 !important;
  width: 6.40rem;
}

.btn-main {
  background: var(--main);
  color: var(--white);
  border-radius: .25rem;
}

.btn-main:hover {
  background: var(--main-lighter);
  color: var(--white);
}

.btn-main:focus {
  box-shadow: none !important;
}

.btn-main:disabled {
  background: var(--main-lightest);
  color: var(--white);
}

.rounded-left {
  border-radius: .25rem 0 0 .25rem;
}

.rounded-right {
  border-radius: 0 .25rem .25rem 0;
}

.cover-icon {
  position: absolute;
  right: 0px;
  top: calc(50% - 0.5em);
}


.form-floating {
  position: relative;
}

.form-floating>.form-control,
.form-floating>.form-control-plaintext,
.form-floating>.form-select {
  height: calc(3.5rem + calc(var(--bs-border-width) * 2));
  min-height: calc(3.5rem + calc(var(--bs-border-width) * 2));
  line-height: 1.25;
}

.form-floating>label {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  height: 100%;
  padding: 1rem 0.75rem;
  overflow: hidden;
  text-align: start;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
  border: var(--bs-border-width) solid transparent;
  transform-origin: 0 0;
  transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
  .form-floating>label {
    transition: none;
  }
}

.form-floating>.form-control,
.form-floating>.form-control-plaintext {
  padding: 1rem 0.75rem;
}

.form-floating>.form-control::-moz-placeholder,
.form-floating>.form-control-plaintext::-moz-placeholder {
  color: transparent;
}

.form-floating>.form-control::placeholder,
.form-floating>.form-control-plaintext::placeholder {
  color: transparent;
}

.form-floating>.form-control:not(:-moz-placeholder-shown),
.form-floating>.form-control-plaintext:not(:-moz-placeholder-shown) {
  padding-top: 1.625rem;
  padding-bottom: 0.625rem;
}

.form-floating>.form-control:focus,
.form-floating>.form-control:not(:placeholder-shown),
.form-floating>.form-control-plaintext:focus,
.form-floating>.form-control-plaintext:not(:placeholder-shown) {
  padding-top: 1.625rem;
  padding-bottom: 0.625rem;
}

.form-floating>.form-control:-webkit-autofill,
.form-floating>.form-control-plaintext:-webkit-autofill {
  padding-top: 1.625rem;
  padding-bottom: 0.625rem;
}

.form-floating>.form-select {
  padding-top: 1.625rem;
  padding-bottom: 0.625rem;
}

.form-floating>.form-control:not(:-moz-placeholder-shown)~label {
  color: rgba(var(--bs-body-color-rgb), 0.65);
  transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
}

.form-floating>.form-control:focus~label,
.form-floating>.form-control:not(:placeholder-shown)~label,
.form-floating>.form-control-plaintext~label,
.form-floating>.form-select~label {
  color: rgba(var(--bs-body-color-rgb), 0.65);
  transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
}

.form-floating>.form-control:not(:-moz-placeholder-shown)~label::after {
  position: absolute;
  inset: 1rem 0.375rem;
  z-index: -1;
  height: 1.5em;
  content: "";
  background-color: var(--bs-body-bg);
  border-radius: var(--bs-border-radius);
}

.form-floating>.form-control:focus~label::after,
.form-floating>.form-control:not(:placeholder-shown)~label::after,
.form-floating>.form-control-plaintext~label::after,
.form-floating>.form-select~label::after {
  position: absolute;
  inset: 1rem 0.375rem;
  z-index: -1;
  height: 1.5em;
  content: "";
  background-color: var(--bs-body-bg);
  border-radius: var(--bs-border-radius);
}

.form-floating>.form-control:-webkit-autofill~label {
  color: rgba(var(--bs-body-color-rgb), 0.65);
  transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
}

.form-floating>.form-control-plaintext~label {
  border-width: var(--bs-border-width) 0;
}

.form-floating> :disabled~label,
.form-floating>.form-control:disabled~label {
  color: #6c757d;
}

.form-floating> :disabled~label::after,
.form-floating>.form-control:disabled~label::after {
  background-color: var(--bs-secondary-bg);
}


.btn-green {
  background-color: #488254;
  border: #488254;
  color: #FFF;
}

.btn-green:hover {
  opacity: 68%;
  background-color: #488254;
  border: #488254;
  color: #FFF;
}

.btn-green:disabled {
  opacity: 84%;
  background-color: #488254;
  border: #488254;
  color: #FFF;
}

.btn-green-outline {
  border: 1px solid #ced4da;
  color: #0000008F;
}

.btn-green-outline:hover {
  background-color: #488254;
  border: 1px solid #488254;
  color: #FFF;
}

.btn-green-outline.active {
  background-color: #488254;
  border: 1px solid #488254;
  color: #FFF;
}

/* gap 工具類別：適用於 flex 或 grid 容器 */
.gap-0>*+* {
  margin-left: 0 !important;
}

.gap-1>*+* {
  margin-left: 0.25rem !important;
}

.gap-2>*+* {
  margin-left: 0.5rem !important;
}

.gap-3>*+* {
  margin-left: 1rem !important;
}

.gap-4>*+* {
  margin-left: 1.5rem !important;
}

.gap-5>*+* {
  margin-left: 3rem !important;
}

/* 垂直方向 gap（例如 column 排版） */
.gap-y-0>*+* {
  margin-top: 0 !important;
}

.gap-y-1>*+* {
  margin-top: 0.25rem !important;
}

.gap-y-2>*+* {
  margin-top: 0.5rem !important;
}

.gap-y-3>*+* {
  margin-top: 1rem !important;
}

.gap-y-4>*+* {
  margin-top: 1.5rem !important;
}

.gap-y-5>*+* {
  margin-top: 3rem !important;
}

.border-round {
  border-radius: 1rem;
}

.font-sm {
  font-size: .75rem;
}

.text-decoration {
  text-decoration: underline;
  cursor: pointer;
}


/* 禁止選取文字 */
.noselect {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.mvh-40{
  max-height: 40vh;
}