/*一列項目*/
.Form {
    display: flex;
    padding: 5px 0;
    background: #fff;
    align-items: center;
}

.Form:hover {
    background: #ebeff5;
}

/*內容欄位*/
.Form-Content {
    padding: 10px;
    margin-bottom: 3px;
    margin: 0 2px;
}

/*標題欄位*/
.Form-Title {
    padding: 10px;
    background: transparent;
    margin-bottom: 3px;
    margin: 0 2px;
}

/*表格內，與資料並列的小icon圖示*/
.Form-Icon {
    width: 16px;
    display: inline-block;
}

/*Form內藍色小按鈕*/
.Form-BlueButton {
    border: 1px solid #06bff3;
    padding: 5px 10px;
    border-radius: 5px;
    color: #06bff3 !important;
    display: inline-block;
}

/*Form內灰小按鈕*/
.Form-GrayButton {
    border: 1px solid #797979;
    padding: 5px 10px;
    border-radius: 5px;
    color: #797979 !important;
    display: inline-block;
}

/*Form內紅小按鈕*/
.Form-RedButton {
    border: 1px solid #ff9183;
    padding: 5px 10px;
    border-radius: 5px;
    color: #ff9183 !important;
    display: inline-block;
}

/*表格內邊框小按鈕之中的小icon圖*/
.From-Small-Icon {
    display: inline-block;
    width: 15px;
    margin-right: 3px;
}

.Form-BlueButton:hover,
.Form-GrayButton:hover {
    text-decoration: none;
    background: #e4e4e4;
}

/*表格內QRCode大小*/
.Img-QRCode {
    width: 30%;
    height: 30%;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

/*表格實心黃按鈕*/
.yellow-Button,
.yellow-Button:hover {
    background: #fec852;
    color: #fff;
    padding: 3px 8px;
    border-radius: 100px;
    font-weight: 300;
    display: inline-block;
}

/*表格實心綠按鈕*/
.green-Button,
.green-Button:hover {
    background: #65bf02;
    color: #fff;
    padding: 3px 8px;
    border-radius: 100px;
    font-weight: 300;
    display: inline-block;
}

/*表格實心紅按鈕*/
.red-Button,
.red-Button:hover {
    background: #ff9183;
    color: #fff;
    padding: 3px 8px;
    border-radius: 100px;
    font-weight: 300;
    display: inline-block;
}

/*表格實心大紅按鈕*/
.Bigred-Button,
.Bigred-Button:hover {
    background: #ea7465;
    color: #fff;
    padding: 3px 8px;
    border-radius: 100px;
    font-weight: 300;
    display: inline-block;
}

/*表格實心灰按鈕*/
.gray-Button,
.gray-Button:hover {
    background: #cccccc;
    color: #fff;
    padding: 3px 8px;
    border-radius: 100px;
    font-weight: 300;
    display: inline-block;
}

/*表格實心藍按鈕*/
.blue-Button,
.blue-Button:hover {
    background: #14a2df;
    color: #fff;
    padding: 3px 8px;
    border-radius: 100px;
    font-weight: 300;
    display: inline-block;
}

/*表格籃框線按鈕*/
.BlueLine-Button,
.BlueLine-Button:hover {
    background: transparent;
    color: #06bff3;
    padding: 3px 8px;
    border-radius: 100px;
    border: 2px solid #06bff3;
    display: inline-block;
}

/* Transaction List button */
.status-time {
    display: inline-block;
    width: 160px;
    padding: 3px 8px;
    border-radius: 4px;
    text-align: center;
    font-weight: 500;
    position: relative;
}
/* status pending */
.status-time.status-pending {
    background: #eee;
    color: #999;
}
.status-time.status-pending:hover {
    background: #eee;
    color: #999;
    font-weight: 500;
}
/* status approved */
.status-time.status-approved {
    background: rgba(181, 235, 251, 0.5);
    color: #06bff3;
}
.status-time.status-approved:hover {
    background: rgba(181, 235, 251, 0.5);
    color: #06bff3;
}
/* status rejected */
.status-time.status-rejected {
    background-color: rgba(255, 145, 131, 0.15);
    color: #ea7465;
}
/* status expired */
.status-time.status-expired {
    background-color: rgba(252, 219, 145, 0.5);
    color: #f2b42c;
}
/* status arrow style and color */
.status-time-arrow {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px 5px 0 5px;
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
}
.status-time-arrow-approved {
    border-color: #06bff3 transparent transparent transparent;
}
.status-time-arrow-rejected {
    border-color: #ea7465 transparent transparent transparent;
}
.status-time-arrow-expired {
    border-color: #f2b42c transparent transparent transparent;
}
/* status dropdown */
.status-dropdown {
    width: 170px;
    background-color: #fff;
    border: 1px solid #eee;
    text-align: center;
    position: absolute;
    z-index: 50;
}
.status-dropdown a {
    display: block;
    padding: 5px;
}
/* dropdown font color */
.status-approved-color {
    color: #06bff3;
}
.status-rejected-color {
    color: #ea7465;
}
.status-expired-color {
    color: #f2b42c;
}

.Setting-Input {
    border-radius: 4px;
    border: solid 1px #dddddd;
    background-color: #fefefe;
    padding: 4px 10px;
    color: #333333;
    outline: none;
    padding-left: 10px;
    min-width: 44px;
}