﻿/*金色中空按鈕*/
.btn-outline-gold {
    color: #8b6532;
    border-color: #8b6532;
}

    .btn-outline-gold:hover {
        color: #fff;
        background-color: #8b6532;
        border-color: #8b6532;
    }

    .btn-outline-gold:focus,
    .btn-outline-gold.focus {
        box-shadow: 0 0 0 0.2rem rgba(189, 148, 85, 0.5);
    }

    .btn-outline-gold.disabled,
    .btn-outline-gold:disabled {
        color: #8b6532;
        background-color: transparent;
    }

    .btn-outline-gold:not(:disabled):not(.disabled):active,
    .btn-outline-gold:not(:disabled):not(.disabled).active,
    .show > .btn-outline-gold.dropdown-toggle {
        color: #8b6532;
        background-color: #fff;
        border-color: #8b6532;
    }

        .btn-outline-gold:not(:disabled):not(.disabled):active:focus,
        .btn-outline-gold:not(:disabled):not(.disabled).active:focus,
        .show > .btn-outline-gold.dropdown-toggle:focus {
            box-shadow: 0 0 0 0.2rem rgba(189, 148, 85, 0.5);
        }

/*白色中空按鈕*/
.btn-outline-white {
    color: white;
    border-color: white;
    background-color: #222;
}

    .btn-outline-white .badge {
        color: #222;
        background-color: white;
    }

    .btn-outline-white:hover {
        color: #fff;
        background-color: #91682a;
        border-color: white;
    }

    .btn-outline-white:focus,
    .btn-outline-white.focus {
        box-shadow: 0 0 0 0.2rem rgba(189, 148, 85, 0.5);
    }

    .btn-outline-white.disabled,
    .btn-outline-white:disabled {
        color: white;
        background-color: transparent;
    }

    .btn-outline-white:not(:disabled):not(.disabled):active,
    .btn-outline-white:not(:disabled):not(.disabled).active,
    .show > .btn-outline-white.dropdown-toggle {
        color: #fff;
        /* background-color: #bd9455; */
        background-color: #91682a;
        border-color: white;
    }

        .btn-outline-white:not(:disabled):not(.disabled):active:focus,
        .btn-outline-white:not(:disabled):not(.disabled).active:focus,
        .show > .btn-outline-white.dropdown-toggle:focus {
            box-shadow: 0 0 0 0.2rem rgba(189, 148, 85, 0.5);
        }

/*綠色中空按鈕*/
.btn-outline-green {
    color: #446756;
    border-color: #446756;
}

    .btn-outline-green:hover {
        color: #fff;
        background-color: #446756;
        border-color: #446756;
    }

    .btn-outline-green:focus,
    .btn-outline-green.focus {
        box-shadow: 0 0 0 0.2rem rgba(68, 103, 86, 0.5);
    }

    .btn-outline-green.disabled,
    .btn-outline-green:disabled {
        color: #446756;
        background-color: transparent;
    }

    .btn-outline-green:not(:disabled):not(.disabled):active,
    .btn-outline-green:not(:disabled):not(.disabled).active,
    .show > .btn-outline-green.dropdown-toggle {
        color: #fff;
        background-color: #446756;
        border-color: #446756;
    }

        .btn-outline-green:not(:disabled):not(.disabled):active:focus,
        .btn-outline-green:not(:disabled):not(.disabled).active:focus,
        .show > .btn-outline-green.dropdown-toggle:focus {
            box-shadow: 0 0 0 0.2rem rgba(68, 103, 86, 0.5);
        }

/*深藍中空按鈕*/
.btn-outline-darkBlue {
    color: #213649;
    border-color: #213649;
}

    .btn-outline-darkBlue:hover {
        color: #fff;
        background-color: #213649;
        border-color: #213649;
    }

    .btn-outline-darkBlue:focus,
    .btn-outline-darkBlue.focus {
        box-shadow: 0 0 0 0.2rem rgba(33, 54, 73, 0.5);
    }

    .btn-outline-darkBlue.disabled,
    .btn-outline-darkBlue:disabled {
        color: #213649;
        background-color: transparent;
    }

    .btn-outline-darkBlue:not(:disabled):not(.disabled):active,
    .btn-outline-darkBlue:not(:disabled):not(.disabled).active,
    .show > .btn-outline-darkBlue.dropdown-toggle {
        color: #fff;
        background-color: #213649;
        border-color: #213649;
    }

        .btn-outline-darkBlue:not(:disabled):not(.disabled):active:focus,
        .btn-outline-darkBlue:not(:disabled):not(.disabled).active:focus,
        .show > .btn-outline-darkBlue.dropdown-toggle:focus {
            box-shadow: 0 0 0 0.2rem rgba(33, 54, 73, 0.5);
        }

/*紅色按鈕*/
.btn-red {
    color: #fff;
    background-color: #792120;
    border-color: #792120;
}

    .btn-red:hover {
        color: #fff;
        background-color: #934443;
        border-color: #934443;
    }

    .btn-red:focus,
    .btn-red.focus {
        box-shadow: 0 0 0 0.2rem rgba(121, 33, 32, 0.5);
    }

    .btn-red.disabled,
    .btn-red:disabled {
        color: #fff;
        background-color: #934443;
        border-color: #934443;
    }

    .btn-red:not(:disabled):not(.disabled):active,
    .btn-red:not(:disabled):not(.disabled).active,
    .show > .btn-red.dropdown-toggle {
        color: #fff;
        background-color: #934443;
        border-color: #934443;
    }

        .btn-red:not(:disabled):not(.disabled):active:focus,
        .btn-red:not(:disabled):not(.disabled).active:focus,
        .show > .btn-red.dropdown-toggle:focus {
            box-shadow: 0 0 0 0.2rem rgba(147, 68, 67, 0.5);
        }

/*深藍按鈕*/
.btn-blue {
    color: #fff;
    background-color: #213649;
    border-color: #213649;
}

    .btn-blue:hover {
        color: #fff;
        background-color: #3a5064;
        border-color: #3a5064;
    }

    .btn-blue:focus,
    .btn-blue.focus {
        box-shadow: 0 0 0 0.2rem rgba(33, 54, 73, 0.5);
    }

    .btn-blue.disabled,
    .btn-blue:disabled {
        color: #fff;
        background-color: #3f5568;
        border-color: #3f5568;
    }

    .btn-blue:not(:disabled):not(.disabled):active,
    .btn-blue:not(:disabled):not(.disabled).active,
    .show > .btn-blue.dropdown-toggle {
        color: #fff;
        background-color: #3f5568;
        border-color: #3f5568;
    }

        .btn-blue:not(:disabled):not(.disabled):active:focus,
        .btn-blue:not(:disabled):not(.disabled).active:focus,
        .show > .btn-blue.dropdown-toggle:focus {
            box-shadow: 0 0 0 0.2rem rgba(58, 80, 100, 0.5);
        }

/*綠色按鈕*/
.btn-green {
    color: #fff;
    /* background-color: #5d8b6b;
    border-color: #5d8b6b; */
    background-color: #446756;
    border-color: #446756;
}

    .btn-green:hover {
        color: #fff;
        background-color: #8aa994;
        border-color: #8aa994;
    }

    .btn-green:focus,
    .btn-green.focus {
        box-shadow: 0 0 0 0.2rem rgba(138, 169, 148, 0.5);
    }

    .btn-green.disabled,
    .btn-green:disabled {
        color: #fff;
        /* background-color: #839d8c;
        border-color: #839d8c; */
        background-color: #707070;
        border-color: #707070;
        opacity: 1;
    }

    .btn-green:not(:disabled):not(.disabled):active,
    .btn-green:not(:disabled):not(.disabled).active,
    .show > .btn-green.dropdown-toggle {
        color: #fff;
        background-color: #8aa994;
        border-color: #8aa994;
    }

        .btn-green:not(:disabled):not(.disabled):active:focus,
        .btn-green:not(:disabled):not(.disabled).active:focus,
        .show > .btn-green.dropdown-toggle:focus {
            box-shadow: 0 0 0 0.2rem rgba(138, 169, 148, 0.5);
        }

/*深綠色按鈕*/
.btn-darkGreen {
    color: #fff;
    background-color: #446756;
    border-color: #446756;
}

    .btn-darkGreen:hover {
        color: #fff;
        background-color: #6a7a72;
        border-color: #6a7a72;
    }

    .btn-darkGreen:focus,
    .btn-darkGreen.focus {
        box-shadow: 0 0 0 0.2rem rgba(68, 103, 86, 0.5);
    }

    .btn-darkGreen.disabled,
    .btn-darkGreen:disabled {
        color: #fff;
        background-color: #748f82;
        border-color: #748f82;
    }

    .btn-darkGreen:not(:disabled):not(.disabled):active,
    .btn-darkGreen:not(:disabled):not(.disabled).active,
    .show > .btn-darkGreen.dropdown-toggle {
        color: #fff;
        background-color: #748f82;
        border-color: #748f82;
    }

        .btn-darkGreen:not(:disabled):not(.disabled):active:focus,
        .btn-darkGreen:not(:disabled):not(.disabled).active:focus,
        .show > .btn-darkGreen.dropdown-toggle:focus {
            box-shadow: 0 0 0 0.2rem rgba(116, 143, 130, 0.5);
        }

/*金色按鈕*/
.btn-gold {
    color: #fff;
    /* background-color: #997545;
    border-color: #997545; */
    background-color: #8b6532;
    border-color: #8b6532;
}

    .btn-gold:hover {
        color: #fff;
        /* background-color: #9f8665;
        border-color: #9f8665; */
        background-color: #764f1b;
        border-color: #764f1b;
    }

    .btn-gold:focus,
    .btn-gold.focus {
        box-shadow: 0 0 0 0.2rem rgba(153, 117, 69, 0.5);
    }

    .btn-gold.disabled,
    .btn-gold:disabled {
        color: #fff;
        background-color: #876434;
        border-color: #876434;
    }

    .btn-gold:not(:disabled):not(.disabled):active,
    .btn-gold:not(:disabled):not(.disabled).active,
    .show > .btn-gold.dropdown-toggle {
        color: #fff;
        background-color: #876434;
        border-color: #876434;
    }

        .btn-gold:not(:disabled):not(.disabled):active:focus,
        .btn-gold:not(:disabled):not(.disabled).active:focus,
        .show > .btn-gold.dropdown-toggle:focus {
            box-shadow: 0 0 0 0.2rem rgba(153, 117, 69, 0.5);
        }

/*黃色按鈕*/
.btn-yellow {
    color: #344245;
    background-color: #ffd86d;
    border-color: #ffd86d;
}

    .btn-yellow:hover {
        color: #344245;
        background-color: #fae2a1;
        border-color: #fae2a1;
    }

    .btn-yellow:focus,
    .btn-yellow.focus {
        box-shadow: 0 0 0 0.2rem rgba(255, 216, 109, 0.5);
    }

    .btn-yellow.disabled,
    .btn-yellow:disabled {
        color: #fff;
        background-color: #f7e6b5;
        border-color: #f7e6b5;
    }

    .btn-yellow:not(:disabled):not(.disabled):active,
    .btn-yellow:not(:disabled):not(.disabled).active,
    .show > .btn-yellow.dropdown-toggle {
        color: #fff;
        background-color: #fae2a1;
        border-color: #fae2a1;
    }

        .btn-yellow:not(:disabled):not(.disabled):active:focus,
        .btn-yellow:not(:disabled):not(.disabled).active:focus,
        .show > .btn-yellow.dropdown-toggle:focus {
            box-shadow: 0 0 0 0.2rem rgba(250, 226, 161, 0.5);
        }

/* 藍色按鈕 */
.btn-info {
    color: #fff;
    background-color: #007aaf;
    border-color: #007aaf;
}

/*形狀：圓形按鈕*/
.btn-circle {
    width: 30px;
    height: 30px;
    padding: 6px 0px;
    border-radius: 15px;
    text-align: center;
    font-size: 0.75rem;
    line-height: 1.42857;
}

.btn-pill {
    border: none;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 25px;
}
