/* ----- override, append ----- */
.login-box {
    width: 500px;
    min-height: 466px;
}

.content-wrapper {
    padding-bottom: 20px;
}

.ribbon.bg-success.text-xl {
    border-style: solid;
    border-color: yellow;
    border-width: 5px 0;
}

.ribbon.bg-success.text-xl::before, .ribbon.bg-success.text-Xl::after {
    border: none;
}

.ribbon-wrapper.ribbon-xl .ribbon {
    top: 40px;
}

.modal-body {
    word-break: break-word;
}

.form-group div.form-control {
    border: none;
}

tags {
    min-height: 46px;
    height: auto !important;
}

tag.tagify__tag {
    height: 30px;
    overflow: hidden;
    border: 1px solid #6c757d;
}

.tagify {
    --tag-bg: #91ceff;
    --tag-hover: #d8ffd3;
    --tag-remove-btn-bg--hover: #ffa998;
}

.swal2-toast {
    max-width: 500px;
}

.swal2-title {
    text-align: left;
}

.swal2-popup.swal2-toast .swal2-title {
    padding: 5px 10px;
    font-size: 1.1rem;
}

.swal2-popup.swal2-toast {
    font-size: 1.1rem;
}

.my-0 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.fa-twitter-square {
    color: #1da1f2 !important;
}

.fa-instagram {
    background: linear-gradient(-135deg, #9941D8, #E4A972);
    color: white;
    padding: 1px;
}

/* ----- user icon ----- */
.user_icon_unregistered {
    font-size: 266px;
    opacity: 0.5;
}

/* ----- spinner ----- */
.spinner {
    width: 5em;
    height: 5em;
    margin: 10px auto;
    border: 4px #ddd solid;
    border-top: 4px #2e93e6 solid;
    border-radius: 50%;
    animation: sp-anime 1.0s infinite linear;
}

.spinner.checkbox {
    width: 22px;
    height: 22px;
}

@keyframes sp-anime { 100% {
    transform: rotate(360deg);
}

}

/* ----- badge ----- */
.badge.attr {
    border: 1px solid #007bff;
    font-size: 16px;
    font-weight: normal;
}

/* ----- overflow ----- */
.overflow-hide {
    /* width: 200px; */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 0;
}

.multi-overflow-hide {
    /* width: 200px; */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    margin: 0;
}

/* ----- table  ----- */
.input-table td {
    padding: .25em !important;
    vertical-align: middle;
}

.input-table td input {
    height: 32px;
    margin: 0 auto;
}

td[data-toggle="modal"] {
    cursor: pointer;
}

table.input-table th,
table.input-table td,
table.view_table th,
table.view_table td {
    word-break: break-all;
}

/* ----- data-inputmask ----- */
input[data-inputmask-inputformat="yyyy/mm/dd"] {
    width: 120px;
}

.form-inline input[data-inputmask-inputformat="yyyy/mm/dd"].form-control
    {
    width: 120px !important;
}

input[data-inputmask-inputformat="HH:MM"] {
    width: 80px;
}

.form-inline input[data-inputmask-inputformat="HH:MM"].form-control {
    width: 80px !important;
}

input[data-inputmask-inputformat="yyyy/mm/dd HH:MM"] {
    width: 170px;
}

.form-inline input[data-inputmask-inputformat="yyyy/mm/dd HH:MM"].form-control
    {
    width: 170px !important;
}

select.form-control {
    width: auto;
    max-width: 100%;
    padding: .375rem .55rem;
}

.input-table select.form-control {
    width: 100%;
}

.custom-file-label::after {
    content: "ファイルを選択"
}

input[type="checkbox"].form-control {
    width: 0;
}

/* ----- tagify ----- */
.tags-look .tagify__dropdown__item {
    display: inline-block;
    border-radius: 3px;
    padding: .3em .5em;
    border: 1px solid #6c757d;
    background: #f0f0f0;
    margin: .2em;
    font-size: .85em;
    color: black;
    transition: 0s;
}

.tags-look .tagify__dropdown__item--active {
    color: black;
}

.tags-look .tagify__dropdown__item:hover {
    background: lightyellow;
    border-color: gold;
}

/* ----- width ----- */
.w-40px {
    width: 40px !important;
}

.w-60px {
    width: 60px !important;
}

.w-70px {
    width: 70px !important;
}

.w-120px {
    width: 120px !important;
}

.w-135px {
    width: 135px !important;
}

.w-190px {
    width: 190px !important;
}

.w-500px {
    width: 500px !important;
}

.mw-365px {
    max-width: 365px;
}

.mw-500px {
    max-width: 500px;
}

.mw-600px {
    max-width: 600px;
}

.mw-95p {
    max-width: 95%;
}

.mw-100p {
    max-width: 100%;
}
/* ----- height ----- */
.h-40px {
    height: 40px !important;
}

.h-80px {
    height: 80px !important;
}

.h-135px {
    height: 135px !important;
}

/* ----- font size ----- */
.fs-xs {
    font-size: 12px;
}

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

.fs-lg {
    font-size: 18px;
}

.fs-xl {
    font-size: 22px;
}

.fs-2xl {
    font-size: 24px;
}

.fs-3xl {
    font-size: 28px;
}

/* ----- other ----- */
.view_text {
    font-size: 1.2em;
    margin-top: auto;
    margin-bottom: auto;
}

.read_only {
    cursor: default !important;
}

.hidden {
    position: absolute;
    top: -100px;
    left: -100px;
}

.hidden-row{
    display: none;
}

.btn-primary {
    color: #fff;
    -webkit-color: #fff;
    background-color: #008A7B;
    -webkit-background-color: #008A7B;
    border-color: #008A7B;
    -webkit-border-color: #008A7B;
    box-shadow: none;
    -webkit-box-shadow: none;
}

.btn-primary:hover {
    background-color: #00645A;
    -webkit-background-color: #00645A;
}

.sidebar-dark-primary .nav-sidebar>.nav-item>.nav-link.active, .sidebar-light-primary .nav-sidebar>.nav-item>.nav-link.active {
    background-color: #008A7B;
    -webkit-background-color: #008A7B;
    color: #fff;
    -webkit-color: #fff;
}
.card-primary {
    border-top: 3px solid #008A7B !important;
    -webkit-border-top: 3px solid #008A7B !important;
}

a {
    color: #008A7B;
    text-decoration: none;
    background-color: transparent;
}

a:hover {
    color: #00645A;
}

.btn-primary:focus {
    color: #fff;
    background-color: #00645A;
    border-color: #00645A;
}
.btn-primary.disabled, .btn-primary:disabled {
    color: #fff;
    background-color: #00645A;
    border-color: #00645A;
}

.btn-outline-primary {
    color: #008A7B;
    border-color: #008A7B;
}

.btn-outline-primary:hover {
    border-color: #00645A;
    background-color: #00645A;
}

a:active {
    background-color: #00645A !important;
}

.btn-primary:active {
    background-color: #00645A !important;
}