*, body, input, select, label > span, p {
    font-family: 'cwTeXYen', 'Noto Sans TC', 'cwTeXKai', 'Noto Serif TC', 'cwTeXFangSong', 'cwTeXMing', 'Microsoft JhengHei', '微軟正黑體';
    font-weight: 400;
    border: none;
}

body {
    /* Old browsers */
    background: #343a40;
    /* W3C */
    background: radial-gradient(ellipse at center, #909399 1%, #343a40 100%);
    /* Chrome10+,Safari5.1+ */
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(1%, #909399), color-stop(100%, #343a40));
    /* Opera 12+ */
    /*background: -o-radial-gradient(center, ellipse cover, #909399 1%, #343a40 100%);*/
    height: calc(100vh);
    width: 100%;
}

img.logo {
    height: 50px;
    width: 50px;
    opacity: 0.9;
    animation: fadeIn .8s;
}

div.title {
    animation: fadeIn .8s;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.rounded-corner {
    border-radius: 20px;
    border: 1px solid;
    border-color: #F1F1F1;
    padding: 20px 10px 20px 10px;
    background-color: #fff;
    box-shadow: 3px 3px 12px #686868;
}

div.rounded-corner {
    width: 480px;
    min-height: 450px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -275px 0 0 -240px;
}

@media only screen and (max-width: 768px) {
    /* For mobile phones: */
    div.rounded-corner {
        width: 380px;
        margin: -250px 0 0 -190px;
    }
}

.alert-danger ul {
    margin-bottom: 0px;
    font-size: 0.9em;
}

.fa-solid.field-icon {
    float: right;
    margin-left: -25px;
    margin-top: -24px;
    margin-right: 10px;
    position: relative;
    z-index: 2;
}

.bi.field-icon {
    float: right;
    margin-left: -25px;
    margin-top: -30px;
    margin-right: 10px;
    position: relative;
    z-index: 2;
}

/* enable absolute positioning */
.inner-addon {
    position: relative;
}

/* style icon */
.inner-addon .glyphicon {
    position: absolute;
    pointer-events: none;
    top: 50%;
    transform: translateY(-50%);
}

/* align icon */
.left-addon .glyphicon {
    left: 25px;
}

.right-addon .glyphicon {
    right: 25px;
}

.glyphicon {
    color: #C0C4CC;
}

/* add padding  */
.left-addon input {
    padding-left: 35px;
}

.right-addon input {
    padding-right: 35px;
}

input::placeholder { /* CSS 3 標準 */
    color: #606266 !important;
}

::-webkit-input-placeholder { /* Chrome, Safari */
    color: #606266 !important;
}

:-ms-input-placeholder { /* IE 10+ */
    color: #606266 !important;
}

::-moz-placeholder { /* Firefox 19+ */
    color: #606266 !important;
    opacity: 1;
}

.btn-outline-default {
    color: #303133;
    background-color: #fff;
    border-color: #DCDFE6;
}

.btn-outline-default:hover,
.btn-outline-default:active:hover, .btn-outline-default.active:hover {
    color: #fff;
    background-color: #909399;
    border-color: #DCDFE6;
}

.btn-outline-default.active,
.btn-outline-default.active.focus {
    border-color: #DCDFE6;
    color: #303133;
    background-color: #909399;
}

/*footer p {
    color: #c8c9cc !important;
}*/

.rotate-45 {
    transform: rotate(45deg) !important;
    transform-origin: 125% 25% !important;
}

.agency-name {
    padding-left: 4px;
    letter-spacing: 4px; /* 調整字母之間的間距 */
    font-family: "標楷體", DFKai-SB, BiauKai, 'Noto Sans TC', sans-serif;
}

@media (max-width: 768px) {
    .rounded-sm-5 {
        border-top-left-radius: 20px !important;
        border-bottom-left-radius: 20px !important;
    }
}

.wrapper {
    max-width: 900px !important;
    min-height: calc(100vh - 160px) !important;
}

img.captcha {
    max-height:3rem;
}

/*Gradient Buttons*/
.btn-gradient {
    background-image: linear-gradient(to right, var(--bs-btn-bg) 0%, var(--bs-btn-bg-gradient) 100%);
    background-size: 200% auto;
    transition: background-position 0.5s ease-out;
}

.btn-gradient:hover {
    background-position: right center;
}

.btn-primary.btn-gradient {
    --bs-btn-bg: #0d6efd;
    --bs-btn-bg-gradient: #6c9eff;
}

/* https://www.w3schools.com/colors/colors_picker.asp */
.btn-info.btn-gradient {
    --bs-btn-bg: #0dcaf0;
    --bs-btn-bg-gradient: #86e5f9;
}

.btn-success.btn-gradient {
    --bs-btn-bg: #198754;
    --bs-btn-bg-gradient: #5cd47f;
}

.btn-danger.btn-gradient {
    --bs-btn-bg: #dc3545;
    --bs-btn-bg-gradient: #ff7d87;
}

.custom-fixed-width-col {
    max-width: 800px !important; 
    flex: 0 0 auto; /* To prevent it from stretching */
}

.alert-wrapper {
    height: 300px;
}

.content-wrapper {
    min-height: 400px;
}

.bg-image-col {
    background-image: url('/img/bg-save-earth-concept.png'); /* Replace with your image path */
    background-position: center bottom 10px; /* Positions 20px from the bottom */
    background-repeat: no-repeat; /* Prevent image repetition */
    background-size: 100% auto;
    background-color: var(--bs-success-bg-subtle);
}