.bootstrap-tagsinput {
  background-color: #fff;
  border: 1px solid #ccc;
  box-shadow: none;
  display: inline-block;
  padding: 4px 6px;
  color: #555;
  vertical-align: middle;
  border-radius: 4px;
  max-width: 100%;
  line-height: 22px;
  cursor: text;
}
.bootstrap-tagsinput input {
  border: none;
  box-shadow: none;
  outline: none;
  background-color: transparent;
  padding: 0 6px;
  margin: 0;
  width: auto;
  max-width: inherit;
}

.bootstrap-tagsinput.form-control input::-moz-placeholder {
  color: #777;
  opacity: 1;
}
.bootstrap-tagsinput.form-control input:-ms-input-placeholder {
  color: #777;
}
.bootstrap-tagsinput.form-control input::-webkit-input-placeholder {
  color: #777;
}
.bootstrap-tagsinput input:focus {
  border: none;
  box-shadow: none;
}
.bootstrap-tagsinput .tag {
  margin-right: 2px;
  color: white;
}
.bootstrap-tagsinput .tag [data-role="remove"] {
  margin-left: 8px;
  cursor: pointer;
}
.bootstrap-tagsinput .tag [data-role="remove"]:after {
  content: "x";
  padding: 0px 2px;
}
.bootstrap-tagsinput .tag [data-role="remove"]:hover {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
}
.bootstrap-tagsinput .tag [data-role="remove"]:hover:active {
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}


/* 覧 Bootstrap Tagsinput con look&feel Vuexy 覧覧覧覧覧覧覧 */

.bootstrap-tagsinput {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .375rem;
    width: 100% !important;
    box-sizing: border-box;
    padding-block: calc(0.426rem - var(--bs-border-width));
    padding-inline: calc(0.9375rem - var(--bs-border-width)); 

    font-size: .9375rem;
    line-height: 1.625;
    color: var(--bs-heading-color);
    background-color: transparent;
    background-clip: padding-box;
    border: var(--bs-border-width) solid color-mix(in sRGB, var(--bs-base-color) 22%, var(--bs-paper-bg));
    border-radius: var(--bs-border-radius);

    min-height: calc(1.625em + .852rem + calc(var(--bs-border-width) * 2)); 
}

    .bootstrap-tagsinput:focus-within {
        padding-block: calc(0.426rem - 2px); 
        padding-inline: calc(0.9375rem - 2px); 
    }

    .bootstrap-tagsinput input {
        border: 0 !important;
        outline: 0;
        background: transparent;
        color: inherit;
        font: inherit;
        line-height: 1.25; 
        padding: 0;
        margin: 0;
        min-width: 6ch;
        flex: 1 0 auto;
    }

    .bootstrap-tagsinput .tag {
        display: inline-flex;
        align-items: center;
        gap: .25rem;
        margin: 0 .375rem 0 0; 
        padding: .125rem .375rem; 
        font-size: .8125rem;
        line-height: 1; 
        border-radius: var(--bs-border-radius-sm);
        background-color: var(--bs-info-bg-subtle);
        color: var(--bs-info);
        border: 1px solid color-mix(in sRGB, var(--bs-primary) 30%, transparent);
        white-space: nowrap;
    }

        .bootstrap-tagsinput .tag [data-role="remove"] {
            margin-left: .25rem;
            cursor: pointer;
            opacity: .75;
        }

            .bootstrap-tagsinput .tag [data-role="remove"]:hover {
                opacity: 1;
            }

            .bootstrap-tagsinput .tag [data-role="remove"]::after {
                content: "x";
                line-height: 1;
            }

    .bootstrap-tagsinput.form-control-sm {
        padding: .215rem .75rem;
        font-size: .8125rem;
        min-height: calc(1.625em + .43rem + calc(var(--bs-border-width)*2));
    }

    .bootstrap-tagsinput.form-control-lg {
        padding: .575rem 1rem;
        font-size: 1.0625rem;
        min-height: calc(1.625em + 1.15rem + calc(var(--bs-border-width)*2)); 
    }
:root {
    --tagsinput-tweak: 0.6px;
}

.bootstrap-tagsinput {
    padding-block: calc(0.426rem - var(--bs-border-width) - var(--tagsinput-tweak));
    padding-inline: calc(0.9375rem - var(--bs-border-width));
    min-height: calc(1.625em + .852rem + calc(var(--bs-border-width)*2) - calc(var(--tagsinput-tweak)*2));
}

    .bootstrap-tagsinput:focus-within {
        border-color: var(--bs-primary);
        border-width: 2px;
        padding-block: calc(0.426rem - 2px - var(--tagsinput-tweak));
        padding-inline: calc(0.9375rem - 2px);
        min-height: calc(1.625em + .852rem + 2px - calc(var(--tagsinput-tweak)*2));
    }