:root{
    --custom1: rgb(255, 99, 132);
    --custom2: rgb(54, 162, 235);
    --custom3: rgb(255, 159, 64);
    --custom4: rgb(75, 192, 192);
    --custom5: rgb(153, 102, 255);
    --custom6: rgb(255, 205, 86);
    --custom0: rgb(132, 235, 99);

}

.btn-outline-custom1 {
    --bs-btn-color: var(--custom1);
    --bs-btn-border-color: var(--custom1);
    --bs-btn-hover-color: #2c2b2b;
    --bs-btn-hover-bg: var(--custom1);
    --bs-btn-hover-border-color: var(--custom1);
    --bs-btn-focus-shadow-rgb: 59,125,221;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--custom1);
    --bs-btn-active-border-color: var(--custom1);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0,0,0,.125);
    --bs-btn-disabled-color: var(--custom1);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--custom1);
    --bs-gradient: none;
}
.badge-custom1-light, a.badge-custom1-light {
    background-color: rgba(255, 99, 132,.15);
    color: color-yiq(rgba(255, 99, 132,.15));
    color: var(--custom1);
}
.bg-custom1 {
    --bs-bg-opacity: 1;
    background-color: rgba(255, 99, 132, var(--bs-bg-opacity)) !important;
}

.btn-outline-custom2 {
    --bs-btn-color: var(--custom2);
    --bs-btn-border-color: var(--custom2);
    --bs-btn-hover-color: #2c2b2b;
    --bs-btn-hover-bg: var(--custom2);
    --bs-btn-hover-border-color: var(--custom2);
    --bs-btn-focus-shadow-rgb: 59,125,221;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--custom2);
    --bs-btn-active-border-color: var(--custom2);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0,0,0,.125);
    --bs-btn-disabled-color: var(--custom2);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--custom2);
    --bs-gradient: none;
}
.badge-custom2-light, a.badge-custom2-light {
    background-color: rgba(54, 162, 235,.15);
    color: color-yiq(rgba(54, 162, 235,.15));
    color: var(--custom2);
}
.bg-custom2 {
    --bs-bg-opacity: 1;
    background-color: rgba(54, 162, 235, var(--bs-bg-opacity)) !important;
}

.btn-outline-custom3 {
    --bs-btn-color: var(--custom3);
    --bs-btn-border-color: var(--custom3);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--custom3);
    --bs-btn-hover-border-color: var(--custom3);
    --bs-btn-focus-shadow-rgb: 59,125,221;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--custom3);
    --bs-btn-active-border-color: var(--custom3);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0,0,0,.125);
    --bs-btn-disabled-color: var(--custom3);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--custom3);
    --bs-gradient: none;
}
.badge-custom3-light, a.badge-custom3-light {
    background-color: rgba(255, 159, 64,.15);
    color: color-yiq(rgba(255, 159, 64,.15));
    color: var(--custom3);
}
.bg-custom3 {
    --bs-bg-opacity: 1;
    background-color: rgba(255, 159, 64, var(--bs-bg-opacity)) !important;
}

.btn-outline-custom4 {
    --bs-btn-color: var(--custom4);
    --bs-btn-border-color: var(--custom4);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--custom4);
    --bs-btn-hover-border-color: var(--custom4);
    --bs-btn-focus-shadow-rgb: 59,125,221;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--custom4);
    --bs-btn-active-border-color: var(--custom4);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0,0,0,.125);
    --bs-btn-disabled-color: var(--custom4);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--custom4);
    --bs-gradient: none;
}
.badge-custom4-light, a.badge-custom4-light {
    background-color: rgba(75, 192, 192,.15);
    color: color-yiq(rgba(75, 192, 192,.15));
    color: var(--custom4);
}
.bg-custom4 {
    --bs-bg-opacity: 1;
    background-color: rgba(75, 192, 192, var(--bs-bg-opacity)) !important;
}

.btn-outline-custom5 {
    --bs-btn-color: var(--custom5);
    --bs-btn-border-color: var(--custom5);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--custom5);
    --bs-btn-hover-border-color: var(--custom5);
    --bs-btn-focus-shadow-rgb: 59,125,221;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--custom5);
    --bs-btn-active-border-color: var(--custom5);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0,0,0,.125);
    --bs-btn-disabled-color: var(--custom5);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--custom5);
    --bs-gradient: none;
}
.badge-custom5-light, a.badge-custom5-light {
    background-color: rgba(153, 102, 255,.15);
    color: color-yiq(rgba(153, 102, 255,.15));
    color: var(--custom5);
}
.bg-custom5 {
    --bs-bg-opacity: 1;
    background-color: rgba(153, 102, 255, var(--bs-bg-opacity)) !important;
}

.btn-outline-custom6 {
    --bs-btn-color: var(--custom6);
    --bs-btn-border-color: var(--custom6);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--custom6);
    --bs-btn-hover-border-color: var(--custom6);
    --bs-btn-focus-shadow-rgb: 59,125,221;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--custom6);
    --bs-btn-active-border-color: var(--custom6);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0,0,0,.125);
    --bs-btn-disabled-color: var(--custom6);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--custom6);
    --bs-gradient: none;
}
.badge-custom6-light, a.badge-custom6-light {
    background-color: rgba(255, 205, 86,.15);
    color: color-yiq(rgba(255, 205, 86,.15));
    color: var(--custom6);
}
.bg-custom6 {
    --bs-bg-opacity: 1;
    background-color: rgba(255, 205, 86, var(--bs-bg-opacity)) !important;
}

.btn-outline-custom0 {
    --bs-btn-color: var(--custom0);
    --bs-btn-border-color: var(--custom0);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--custom0);
    --bs-btn-hover-border-color: var(--custom0);
    --bs-btn-focus-shadow-rgb: 59,125,221;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--custom0);
    --bs-btn-active-border-color: var(--custom0);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0,0,0,.125);
    --bs-btn-disabled-color: var(--custom0);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--custom0);
    --bs-gradient: none;
}
.badge-custom0-light, a.badge-custom0-light {
    background-color: rgba(132, 235, 99,.15);
    color: color-yiq(rgba(132, 235, 99,.15));
    color: var(--custom0);
}
.bg-custom0 {
    --bs-bg-opacity: 1;
    background-color: rgba(132, 235, 99, var(--bs-bg-opacity)) !important;
}

.w-10{
    width: 10%;
}
.w-25{
    width: 20%;
}
.w-35{
    width: 40%;
}

/* .row付けた時にできる謎の隙間を消す */
.bs-no-gutter-x{
    --bs-gutter-x: 0px;
}

/* ボタンの高さが勝手に縦に伸びた時用 */
.h-btn-size{
    height: 2rem;
}

/* レスポンシブ */
.pc_none{
    display: none;
}
.sp_none {
    display: block;
}

/* サイドメニュー */
.sidebar-logo{
    width:208px;
}

/* サイドメニュー階層を増やすと変になるため非活性クラスを付ける */
body[data-theme="default"] .sidebar-link.inactive{
    color: #adb5bd!important;
}
body[data-theme="light"] .sidebar-link.inactive{
    color: #6c757d!important;
}
.sidebar-link.inactive:hover{
    color: #518be1!important;
}

/* アウトラインのボタンに白背景を */
.btn-outline-success,
.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-danger,
.btn-outline-info,
.btn-outline-warning{
    background-color: #fff;
}

/* 現状readonlyよりdisabledの方が弱いので */
.form-control:disabled {
    background-color: #e9ecef;
    opacity: 1;
}

/* バリデーションエラーの時のスタイルをbootstrap風のやり方を使わずにやる用 */
.custom-invalid-feedback {
    color: #dc3545;
    font-size: 80%;
    margin-top: 0.25rem;
    width: 100%;
}

/* type=numberのスピンを消す */
.no-spin::-webkit-inner-spin-button,
.no-spin::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
    -moz-appearance:textfield;
}

/* 横並びのフォームで文字の高さがずれる時用 */
.form-pt-calc{
    padding-top: calc(0.3rem + 1px);
}

/* アウトラインのトグル、真っ白になる瞬間がある */
.btn-check:not(:checked)+.btn.btn-outline-warning:hover,
.btn-check:not(:checked)+.btn.btn-outline-success:hover{
    color:var(--bs-btn-active-color);
}

/* Choices.jsにバリデーションエラーの枠を付ける */
.choices__inner.is-invalid{
    border-color: #dc3545!important;
    box-shadow:0 0 0 .2rem rgba(220,53,69,.25)!important;
}

/* 調整 */
.choices{
    margin-bottom: 0;
}

.cursor_point {
    cursor: pointer
}

.div_btn {
    background-color: #DC3545;
    border-radius: 4px;
    color: #ffffff;
    max-width: 8rem;
    padding: 6px 5px;
    margin: 0 0 0 auto;
    text-align: center;
}

.fit_height{
    height: fit-content;
}

.calendar_cancel{
    margin: 0;
}

@media screen and (max-width:764px) {
    /* レスポンシブ */
    .pc_none{
        display: block;
    }
    .sp_none {
        display: none;
    }

    .btn_area{
        padding-top: 1rem;
    }

    /* 帳票＞見積書 */
    #detail_modal .border-start,
    #file_change_modal .border-start
    {
        border:none!important;
    }
}