@charset "UTF-8";
/* =================== 按鈕 =================== */
.btn {
    /* width: 100%; */
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;

    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    color: #fff;
    border: 0;
    outline: none;
    border-radius: 25px;
    transition: .3s;
    cursor: pointer;
    box-sizing: border-box;
} 

.action .btn {
    width: 100%;
    color: #fff;
    background-color: #048080;
    border: 0;
    outline: none;
    border-radius: 25px;
    /* box-shadow: 2px 4px 10px 0 rgba(53, 155, 155, 0.25); */
    transition: .3s;
    transform: scale(1);
    cursor: pointer;

    box-sizing: border-box;
}

.btn.btn-hover:hover {
    transition: .3s;
    transform: scale(1.06);
  }

  .btn.btn-hover:active {
    transform: scale(.95);
  }

  .btn.btn-success {
    background: #048080;
    color: #fff;
}

.btn.btn-success:hover {
    background: #359b9b;
    color: #fff;
}

.btn.btn-success:focus,
.btn.btn-success:active {
    background: #359b9b;
    color: #fff;
    transform: scale(.98);
}

.btn.btn-outline-success {
    color: #048080;
    background: #fff;
    border: 2px solid #048080;
    transition: .5s;
}

.btn.btn-outline-success:hover {
    background: #f3f3f3;
    color: #048080;
}

.btn.btn-outline-success:focus,
.btn.btn-outline-success:active {
    background: #dbdbdb !important;
    color: #048080;
    transform: scale(.98);
}

.btn.btn-warning {
    background: var(--attention-color);
    color: #fff;
    /* box-shadow: 0 6px 12px 0 rgba(228, 184, 73, 0.1); */

}

.btn.btn-warning:hover,
.btn.btn-warning:active {
    color: #fff;
    background-color: #D29701;
    transform: scale(.98);
}

.btn.btn-danger {
    background: #df0f0f;
    color: #fff;
}

.btn.btn-danger:hover {
    background: red;
    color: #fff;
}

.btn.btn.btn-danger:focus,
.btn.btn.btn-danger:active {
    background: red;
    color: #fff;
    transform: scale(.98);
}



/* =================== daterangepicker ===================*/
.daterangepicker:before {
    top: -8px;
    border-right: 7px solid transparent;
    border-left: 7px solid transparent;
    border-bottom: 7px solid #048080;
}

.daterangepicker:after {
    top: -5px;
}

 /*通知視窗設定*/
 .swal2-border-radius {
    -webkit-border-radius: 20px !important;
    -moz-border-radius: 20px !important;
    border-radius: 20px !important;
}

.swal2-actions button[type=button] {
    border-radius: 20px;
    width: 150px;
    height: 40px;
}

.swal2-styled.swal2-cancel {
    color: #048080 !important;
    border: 2px solid #048080 !important;
}


/* =================== table ===================*/
table.data-table{
  width: 100%;
}

table.data-table thead {
  background: #359b9b;
  color: #fff;
}

table.data-table tbody {
  background: #fff;
  color: #767676;
}

table.data-table tbody tr:nth-child(2n+1) {
  background: #f8f8f8;
}

table.data-table tr th,
table.data-table tr td {
  text-align: left;
  padding: 4px 0px 4px 16px;
  /* padding-left: 16px; */
  vertical-align: middle;
  box-sizing: border-box;
}

table.data-table tr th {
  height: 50px;
  font-size: 20px;
  font-weight: 300;
}

table.data-table tr td {
  height: 80px;
  font-size: 18px;
  font-weight: 300;
}


/* =================== 下拉式select設定 =================== */
.custom-select {
    position: relative;
    font-family: Arial;
  }
  
  .custom-select input {
    display: none;
    width: 100%;
    z-index: 2;
    position: absolute;
    width: 100%!important;
    border-radius: 0;
    outline: none;
    border: 0!important;
  }
  
  .custom-select.open_filter input {
    display: block;
    width: calc(100% - 4px)!important;
    top: 2px;
    left: 2px;
  }
  
  .custom-select select {
    display: none;
  }
  
  .select-selected {
    background-color: #fff;
    border-radius: 8px;
    color: #b4b4b4;
  }
  
  .select-selected.select-arrow-active {
    border-radius: 0;
    color: #3d3d3d;
  }
  
  .select_changed .select-selected {
    color: #3d3d3d;
  }
  
  .select-selected:after {
    position: absolute;
    content: "";
    top: 10px;
    right: 10px;
    width: 0;
    height: 0;
    background-image: url("/static/v2/images/slk_down.svg");
    width: 18px;
    height: 18px;
    background-repeat: no-repeat;
    background-position: center;
  }
  
  .select-selected.select-arrow-active:after {
    border-color: transparent transparent #fff transparent;
    top: 9px;
    transform: rotate(180deg);
    transition: .3s;
  }
  
  .select-items {
    max-height: 200px;
    overflow: auto;
  }
  
  .select-items div,.select-selected {
    font-size: 18px;
    text-align: left;
    padding: 8px 16px;
    border: 2px solid #c6c6c6;
    outline: none;
    cursor: pointer;
    z-index: 100;
  }
  
  .select-selected.select-arrow-active,.select-selected.select-arrow-active~.select-items>div {
    border-color: transparent transparent #048080 transparent;
  }
  
  .select-items {
    position: absolute;
    background-color: #fff;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 99;
  }
  
  .select-hide {
    display: none;
  }
  
  .select-items div:hover,.same-as-selected {
    background-color: rgba(0,0,0,.1);
  }
  
  .select-selected.select-arrow-active {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    border-top: 2px solid #359b9b;
    border-left: 2px solid #359b9b;
    border-right: 2px solid #359b9b;
  }
  
  .select-items {
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    border-left: 2px solid #359b9b;
    border-right: 2px solid #359b9b;
    border-bottom: 2px solid #359b9b;
  }
  
  .select-items div:last-child {
    border-bottom: 0;
  }
  

/* =================== 表單提升 =================== */
form .input_field {
    position: relative;
    margin-bottom: 28px;
}
form .input_field:nth-child(even) {
    margin-left: 16px;
}
form .input_field label {
    position: absolute;
    top: 8px;
    left: 12px;
    font-size: 16px;
    color: #636666;
    background-color: #fff;
    transition: all .2s ease;
    padding: 0 4px;
    cursor: text;
    will-change: transform;
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
    border-radius: 4px;
}
form .input_field label .valid {
    color: red;
    margin-left: 2px;
}
form .input_field input {
    width: 311px;
    height: 36px;
    padding: 0 12px;
    border: 2px solid #c6c6c6;
    outline: none;
    border-radius: 8px;
    font-size: 18px;
    color: #005a5a;
    box-sizing: border-box;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
form .input_field.active label {
    color: #80868b;
    transform: scale(0.85) translate3d(-8px, -24px, 0);
}
form .input_field.active input:focus +label{
    color: #048080;
}

form .input_field input:placeholder-shown + label {
    background-color: transparent;
}
form .input_field input:focus + label {
    background-color: #fff;
    color: #048080;
    font-weight: 600;
    transform: scale(0.85) translate3d(-8px, -24px, 0);
}
form .input_field input:hover, form .input_field input:focus {
    border-color: #048080;
    color: #048080;
}
form .input_field input::placeholder {
    color: #999;
}
form .input_field input:disabled {
    background-color: #dbdbdb;
    border-color: #dbdbdb;
}
form .input_field .valid_msg {
    position: absolute;
    bottom: -14px;
    right: 8px;
    font-size: 13px;
    color: red;
    display: none;
}
form .input_field.error input {
    border: 2px solid red;
}
form .input_field.error input :disabled {
    border-color: #dbdbdb;
}
form .input_field.error .valid_msg {
    display: block;
}
form .input_field.error input:placeholder-shown + label {
    color: #999;
    font-size: 16px;
}
form .input_field.error label, form .input_field.error input:focus + label {
    color: red;
    font-weight: 600;
}
form .input_field .delete-button {
    position: absolute;
    top: 10px;
    right: 8px;
    display: none;
}

form .password_field .delete-button {
    right: 40px;
}

form .password_field .group input {
    padding-right: 60px;
}

form .password_field .visible {
    position: absolute;
    top: 0px;
    right: 6px;
    width: 36px;
    height: 36px;
    background-image: url("/static/v2/images/btn_visible.png");
    background-size: 100% 100%;
    cursor: pointer;
    user-select: none;
}

form .password_field .invisible {
    visibility: visible !important;
    background-image: url("/static/v2/images/btn_invisible.png");
}

form .action input[type="submit"] {
    width: 100%;
    height: 32px;
    border-radius: 16px;
    border: none;
    outline: none;
    color: #000;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    background-color: #ffaf00;
    color: #fff;
    font-family: TaipeiSansTCBeta;
    cursor: pointer;
    transition: .3s;
    transform: scale(1);
}

form .action input[type="submit"]:disabled {
    background-color: #ccc;
    color: #999;
    cursor: not-allowed;
}

/* input_group */



/* ---------- radio 單選 --------- */
.tb_container {
    display: block;
    position: relative;
    padding-left: 0px !important;
    padding-top: 0px !important;
    width: 50px !important;
    margin-bottom: 0;
    margin-right: 0 !important;
    text-align: center;
    cursor: pointer;
    font-size: 16px !important;
    text-align-last: center !important;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.tb_container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.tb_container .checkmark {
    position: absolute;
    top: 8px;
    left: 8px;
    height: 20px;
    width: 20px;
    border: 2px solid #048080;
    border-radius: 50px;
}

.tb_container:hover input~.checkmark {
    background-color: #fff;
    border: 2px solid #048080;
}

.tb_container input:checked~.checkmark {
    background: #fff;
    border: 2px solid #048080;
}

/* 點擊時的狀態 */
.tb_container .outter {
    top: 2px;
    position: relative;
    display: block;
    left: 24px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    transition: .3s;
    margin-right: 0;
    margin-bottom: 5px;
}

.tb_container .outter:hover {
    background: #d2e0e4;
}

.tb_container .outter:active {
    background: #a7cdd0;
}

.tb_container input:checked~.outter .checkmark:after {
    display: block;
}

/* 選取圓點 */
.tb_container .checkmark:after {
    content: "";
    position: absolute;
    display: none;
    top: 4px;
    left: 4px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #048080;
}

/* --------- .i_info --------- */
.i_info {
    position: relative;
    vertical-align: middle;
    cursor: pointer;
    margin-right: 8px;
    margin-top: 4px;
}

.i_info::before {
    content: url("/static/v2/images/components/info/info_qm2.svg");
    margin-right: 4px;
    cursor: pointer;
    position: relative;
    top: 3px;
}

.i_info:last-child {
    margin-right: 0px;
}



     /* ========== pagination ========== */
     .pagination {
        max-width: 100%;
        position: relative;
        height: 80px;
        padding: 16px;
        box-sizing: border-box;
    }

    .pagination .action {
        display: flex;
        top: 36px;
        left: 50%;
        transform: translate(-50%, 0%);
        position: absolute;
        align-items: center;
    }

    .pagination .action .prev {
        width: 0;
        height: 0;
        border-top: 10px solid transparent;
        border-bottom: 10px solid transparent;
        border-right: 15px solid #b8b8b8;
        margin-right: 15px;
    }

    .pagination .action .next {
        width: 0;
        height: 0;
        border-top: 10px solid transparent;
        border-bottom: 10px solid transparent;
        border-left: 15px solid #b8b8b8;
        margin-left: 15px;
    }

    .pagination .action ul {
        border-radius: 7px;
        overflow: hidden;
        display: flex;
    }

    .pagination .action ul li {
        background: #fff;
    }

    .pagination .action ul li a {
        display: flex;
        text-align: center;
        height: 28px;
        width: 40px;
        align-items: center;
        justify-content: center;
        font-size: 17px;
        color: #646464;
    }

    .pagination .action ul li a.active {
        background: #048080;
        color: #fff;
    }

    .pagination .info {
        display: flex;
        font-size: 15px;
        color: #767676;
        letter-spacing: 1px;
        /* position: absolute;
        right: 30px; */
        justify-content: end;
    }

    .pagination .info .total_page {
        text-align: right;
        margin-right: 20px;
    }

    .pagination .info .records {
        text-align: right;
    }

    /* showDiv */
    .showDiv {
        position: absolute;
        /* z-index: 59; */
        z-index: 1002;
        font-size: 18px;
        padding: 5px 16px 8px 16px;
        text-align: center;
        border-radius: 24px;
        color: #359B9B;
        background-color: white;
        border: 3px solid #359B9B;
        box-shadow: 2px 4px 10px rgb(4 128 128 / 25%);
        transition-duration: 0.6s;
        display: none;
        max-width: 240px;
        word-break: break-word;
    }

    .showDiv.hidden {
        display: none;
    }


    /* ========= modal_blur =========*/
      #app.modal_blur .main-container {
        filter: blur(8px)
    }

    .blocker {
        min-width: 343px;
    }
    
    #app.modal_blur~.blocker {
        background: 0 0 ;
    }
    
    .modal .inner {
        text-align: center;
    }
    
    .modal h4 {
        font-size: 35px;
        font-weight: 600;
        color: #048080;
        margin-bottom: 24px;
    }
    
    .modal .message {
        font-size: 20px;
        font-weight: 400;
        color: #048080;
        line-height: 1.5;
        /* margin-bottom: 24px; */
    }

    .modal .message:not(:last-child) {
        margin-bottom: 24px;
    }
    
    .modal a.close-modal {
        display: none;
    }
    
    .modal .action {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .modal .action .btn {
        width: 150px;
        height: 35px;
        background: #048080;
        color: #fff;
        /* line-height: 30px; */
        border-radius: 20px;
        border: 2px solid #048080;
        box-sizing: border-box;
        text-align: center;
        font-size: 16px;
        line-height: 1;
    }
    
    .modal .action .btn:hover {
        background: #359b9b;
        border: 2px solid #359b9b;
    }
    
    .modal .action .btn+.btn {
        margin-left: 16px;
    }
    
    .modal .action .btn.reset_btn {
        background: #fff;
        color: #048080;
    }
    
    .modal .action .btn.reset_btn:hover {
        background: #f3f3f3;
        color: #048080;
    }
    
    .notice_modal {
        padding: 24px;
        width: 100%;
        min-width: 311px;
    }
    
     /* --------- 辨識中 ---------- */
     #ex_loading.modal {
        max-width: 180px;
        height: 180px;
        border-radius: 28px;
        padding: 16px;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: #fff;
        box-sizing: border-box;
        display: none;
    }
    
    #ex_loading .inner {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    
    #ex_loading img {
        width: 50%;
        object-fit: contain;
    }
    
    #ex_loading .close-modal {
        display: none;
    }
    
    #ex_loading h3 {
        width: 100%;
        bottom: 10px;
        left: 0;
        font-size: 14px;
        text-align: center;
        color: #048080;
        margin-top: 16px;
    }
    
    #ex_loading a.uploadBtn {
        text-decoration: none;
        color: #000;
        margin-bottom: 16px;
    }

    /* qrcode_modal  */
    .qrcode_modal {
        width: 100%;
        max-width: 700px;
        min-width: 311px;
        padding: 56px 24px;
    }

    .qrcode_modal .message {
        color: #000;
    }

    .qrcode_modal .message>img {
        width: 180px;
        height: 180px;
        margin-top: 16px;
        margin-bottom: 24px;
    }

    .qrcode_modal .message .title {
        font-size: 20px;
        font-weight: bold;
    }


    .qrcode_modal .message .title>img {
        width: 21px;
        height: 24px;
        position: relative;
        top: 4px;
        right: -4px;
        cursor: pointer;
    }

    .qrcode_modal .message .text {
        font-size: 16px;
    }

    @media screen and (max-width:450px) {
        .qrcode_modal {
            padding: 24px 16px;
        }
    }

    .qrcode_modal.modal a.close-modal {
        position: absolute;
        top: 4px;
        right: 4px;
        display: block;
        width: 44px;
        height: 44px;
        text-indent: -9999px;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center center;
        background-image: url("/static/v2/front/pages/official/images/close_x.svg");
    }