@font-face {
    font-family: 'Inter_VariableFont_slnt';
    src: url('../fonts/Inter_VariableFont_slnt.ttf') format("truetype");
}

@font-face {
    font-family: 'NotoSansTC';
    src: url('../fonts/NotoSansTC.ttf') format("truetype");
}

html {
    font-size: 14px;
    font-family: Microsoft JhengHei,"Inter", sans-serif;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

/* 手機樣式 */
@media (max-width: 599px) {
    .modal-body {
        max-height: 80vh;
    }
}

/* 平板樣式 */
@media (min-width: 600px) and (max-width: 899px) {
    .modal-body {
        max-height: 75vh;
    }
}

/* 小型桌面樣式 */
@media (min-width: 900px) and (max-width: 1199px) {
    .modal-body {
        max-height: 73vh;
    }
}

/* 大型桌面樣式 */
@media (min-width: 1200px) {
    .modal-body {
        max-height: 77vh;
    }
}
.modal-body {
    overflow-y: auto;
}
    .modal-body .garyblock {
        border: 2px solid #ccc;
        border-radius: 10px;
        padding: 10px;
        background: linear-gradient(to bottom, #FAFAFA, #FFFFFF);
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 增加陰影 */
        margin-top:10px;
    }

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none; /* 隱藏箭頭 */
    margin: 0; /* 去除外邊距 */
}

/*     table 用的    */
.table.utktable {
    border-collapse: collapse !important;
    border: 0;
    border-radius: 1px;
    position: relative;
}

    .table.utktable tr th,
    .table.utktable tr td {
        border: 1px solid #7E8299;
    }

    .table.utktable .tableOrderBy {
        cursor: pointer;
    }

.utktable-scroll-button {
    position: absolute;
    background: rgba(0,0,0,0.1);
    cursor: pointer;
    z-index: 100;
    display: flex; /* 使用flexbox來居中箭頭圖標 */
    align-items: center;
    justify-content: center;
}

    .utktable-scroll-button:hover {
        background: rgba(0,0,0,0.2);
    }

.utktable-left-button {
    left: 0;
    top: 36px;
    bottom: 0;
    width: 30px;
}

    .utktable-left-button::before {
        content: '\f053'; /* Font Awesome的向左箭頭圖標 */
    }

.utktable-right-button {
    right: 0;
    top: 36px;
    bottom: 0;
    width: 30px;
}

    .utktable-right-button::before {
        content: '\f054'; /* Font Awesome的向右箭頭圖標 */
    }

.utktable-top-button {
    left: 0;
    top: 36px;
    right: 0;
    height: 30px;
}

    .utktable-top-button::before {
        content: '\f062'; /* Font Awesome的向上箭頭圖標 */
    }

.utktable-bottom-button {
    right: 0;
    left: 0;
    bottom: 0;
    height: 30px;
}

    .utktable-bottom-button::before {
        content: '\f063'; /* Font Awesome的向下箭頭圖標 */
    }

    /* 使用Font Awesome圖標 */
    .utktable-left-button::before,
    .utktable-right-button::before,
    .utktable-top-button::before,
    .utktable-bottom-button::before {
        font-family: 'Font Awesome 5 Free';
        font-weight: 900;
        color: rgba(255, 255, 255, 0.9); /* 設置箭頭顏色 */
    }

.utk-color-picker {
    width: 41px; /* 設置寬度 */
    height: 41px; /* 設置高度 */
    border: none; /* 移除邊框 */
    padding: 0; /* 移除內邊距 */
    cursor: pointer; /* 設置鼠標樣式 */
}

.hover-scale {
    transition: transform 0.3s ease; /* 鼠標懸停時放大 */
}

    .hover-scale:hover {
        transform: scale(1.1); /* 鼠標懸停時放大 */
    }

/*設定*/
.badge-utkset {
    color: #F87718;
    background-color: #FFF0E5;
}
/*執行*/
.badge-utkrun {
    color: #2F8DFA;
    background-color: #E8F3FF;
}
/*失敗*/
.badge-utkfail {
    color: #F23653;
    background-color: #FFE8E8;
}
/*部分失敗*/
.badge-utkpartfail {
    color: #2DC974;
    background: linear-gradient(to right,#FFE8E8 50%,#EFFCF5 50%);
}
/*完成類*/
.badge-utkfinish {
    color: #2DC974;
    background-color: #EFFCF5;
}

/*啟用*/
.badge-utkactive {
    color: #2DC974;
    background-color: #EFFCF5;
}
/*停用*/
.badge-utkinactive {
    color: #7A7A7A;
    background-color: #F8F8F8;
}

.error-border_1px_red {
    border: 1px solid red;
}
/*建一個class 是加了前面要出現 紅色的這個圖案*/
.error-icon::before {
    content: "\f071"; /* Font Awesome 的警告圖示的 Unicode */
    font-family: "Font Awesome 5 Free"; /* 指定使用 Font Awesome 字型 */
    font-weight: 900; /* Font Awesome Free 的字型權重 */
    color: red;
    float: left;
    margin-right: 8px; /* 添加一些間距，使文字不會緊貼著圖標 */
}

.error-icon {
  display: inline-block;
}

.blockContent {
    pointer-events: none;
    opacity: 0.5;
}

.copyText{
    color: #007bff;
    cursor: pointer;
    font-weight: bolder;
}