/******申請流程圖******/
.flow {
    border-bottom: solid 1px #e0e0e0;
    padding: 10px 0;
}

.flow>.flow-step {
    padding: 0;
    position: relative;
}

.flow>.flow-step .flow-stepnum {
    color: #595959;
    font-size: 16px;
    margin-bottom: 5px;
}

.flow>.flow-step .flow-info {
    color: #999;
    font-size: 14px;
}

/*********************駁回顏色**************/
.flow>.flow-step .deny {
    color: red !important;
    font-weight: bold;
}

/*********************通過顏色**************/
.flow>.flow-step .pass {
    color: green !important;
}

/*******************點點**************/
.flow>.flow-step>.flow-dot {
    position: absolute;
    width: 30px;
    height: 30px;
    display: block;
    background: #00a29a;
    top: 23px;
    left: 50%;
    margin-top: -15px;
    margin-left: -15px;
    border-radius: 50%;
    outline: 3px solid #00a29a;
    border: 3px solid #fff;
}

.flow>.flow-step>.progress {
    position: relative;
    border-radius: 0px;
    height: 2px;
    box-shadow: none;
    margin: 19px 0;
}

.flow>.flow-step>.progress>.progress-bar {
    width: 0px;
    box-shadow: none;
    background: #00a29a;
}

.flow>.flow-step.complete>.progress>.progress-bar {
    width: 100%;
}

.flow>.flow-step.active>.progress>.progress-bar {
    width: 50%;
}

.flow>.flow-step:first-child.active>.progress>.progress-bar {
    width: 0%;
}

.flow>.flow-step:last-child.active>.progress>.progress-bar {
    width: 100%;
}

/*字色on*/
.flow>.flow-step.active>.flow-info {
    color: #00a29a;
    font-weight: bold;
}

.flow>.flow-step.disabled>.flow-dot {
    background-color: #dadada;
    outline: 3px solid #dadada;
    width: 24px;
    height: 24px;
}

.flow>.flow-step.disabled>.flow-dot:after {
    opacity: 0;
}

.flow>.flow-step.complete>.flow-info {
    color: #0f978e;
}

.flow>.flow-step.complete>.flow-dot {
    background-color: #89c9c5;
    outline: 3px solid #89c9c5;
    width: 24px;
    height: 24px;
}

/*線長度*/
.flow>.flow-step:first-child>.progress {
    left: 50%;
    width: 50%;
}

.flow>.flow-step:last-child>.progress {
    width: 50%;
}

.flow>.flow-step.disabled a.flow-dot {
    pointer-events: none;
}

/***********************************/

.form-panel {
    min-height: 490px;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    background-color: #ffffff;
    position: relative;
    margin-bottom: 50px;
    /*margin-top:55px !important;*/
    background-size: 15px 15px;
    background-image: linear-gradient(to right, #fafafa 1px, transparent 1px), linear-gradient(to bottom, #fafafa 1px, transparent 1px);
    border-radius: 15px;

}

.form-panel::before {
    z-index: -1;
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    background-size: 90px 90px;
    background-image: linear-gradient(to right, #f6f6f6 1px, transparent 1px), linear-gradient(to bottom, #f6f6f6 1px, transparent 1px);
}

.form-icon {
    margin-bottom: 20px;

    & img {
        max-width: 230px;
        width: 100%;
        height: auto;
    }
}


.col-form-label {
    &.required::before {
        content: '*';
        color: red;
        font-size: 1.6rem;
        font-weight: bold;
    }

    padding-top: 0;
    padding-bottom: calc(.750rem + 1px);
    text-align: left;
    min-width: 100px;
}

.col-form-control {
    max-width: 440px;
}

.upload-panel {
    width: 650px;
    margin-left: auto;
    margin-right: auto;
    border-radius: 10px;
}

@media screen and (max-width: 768px) {
    .upload-panel {
        width: 100%;
    }
}

.upload-block {
    display: block;
    text-align: center;
    cursor: pointer;

    & .card {
        display: flex;
        justify-content: center;
        align-items: center;
        color: #adb5bd;
        min-height: 200px;
    }

    & .preview {
        /* display: none; */
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        /* width: -moz-available;
        width: -webkit-fill-available;
        width: fill-available; */
        object-fit: contain;
        & img {
            max-width: 100%;
            max-height: 100%;
            width: auto;
            height: 100%;
        }
    }
}