.loading-spinner {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

#loadingModal .modal-content {
    min-height: 300px; /* Adjust this value to your desired height */
}


.page-group {
    margin-top: 40px;
    margin-bottom: 10px;
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.status-sealed {
    background-color: #73B97C;
    color: #fff;
}

.status-open {
    background-color: #F7DA5C;
    color: #fff;
}

.status-run-out {
    background-color: #ff4016;
    color: #fff;
}

.badge {
    font-size: 1em;
}

.labels-badge {
    display: block;
    margin: 2px 0; /* 控制标签之间的间距 */
    padding: 5px;
    border-radius: 5px;
    background-color: #73B97C;
    color: #fff;
    font-size: 0.8em;
}

.btn-back {
    border: 1px white solid;
    border-radius: 5px;
    padding: 6px 15px;
    background-color: #ff4016;
    cursor: pointer;
    display: flex; /* 设置 flex 布局 */
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
}

.btn-back:hover {
    background-color: #27363B;
}

.feedstock-row, .compoundForge-row, .samples-row, .consumables-row, .product-row, .purchase-row {
    cursor: pointer;
}

.td-field-title {
    font-size: 1.1em;
    font-weight: bold;
    color: black !important;
}

.btn-action {
    background: #4B8CA6;
    padding: 7px 15px;
    color: #fff;
    font-weight: 700;
    font-size: 14px;
}

.btn-action:hover {
    color: #fff;
    background: #27363B;
}

.btn-action-delete {
    background: #cc2e2e;
    padding: 7px 15px;
    color: #fff;
    font-weight: 700;
    font-size: 14px;
}

.btn-action-delete:hover {
    color: #fff;
    background: #27363B;
}

.status-preparing {
    background-color: #4B8CA6;
    color: #fff;
}

.status-synthesizing, .status-sample-waiting {
    background-color: #F7DA5C;
    color: #fff;
}

.status-purifying, .status-sample-done {
    background-color: #74A60A;
    color: #fff;
}

.status-suspended, .status-sample-ongoing {
    background-color: #FF7E38;
    color: #fff;
}

.status-sample-suspended {
    background-color: #666666;
    color: #fff;
}

.btn-close-custom {
    color: white !important;
    background: transparent !important;
    border: none;
}

/* Customize columns */
.btn-close-custom:hover {
    color: #c7c7c7 !important;
}

.btn-save {
    border: none;
    background: #4B8CA6;
    color: white;
    padding: 7px 15px;
    border-radius: 5px;
    box-shadow: 1px 1px 1px 1px rgba(164, 164, 164, 0.1);
}

.btn-save:hover {
    background: #27363B;
}

.custom-btn {
    background-color: #4B8CA6; /* 设置背景颜色 */
    color: white; /* 设置文字颜色 */
    border-radius: 15px; /* 设置圆角 */
    padding: 10px 20px; /* 设置内边距 */
    border: none; /* 去除默认边框 */
    transition: background-color 0.3s ease, transform 0.2s ease; /* 设置过渡效果 */
}

/* 拖动时的虚影样式 */
.sortable-ghost {
    transition: transform 0.5s ease-in-out;
    opacity: 0.5;
    background-color: #dcdcdc;
}

.sortable-chosen {
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}


/* hover 状态下的样式 */
.custom-btn:hover {
    background-color: #27363B; /* 设置 hover 时的背景颜色 */
}

/* 按钮的叉号样式 */
.custom-btn .close-icon {
    margin-left: 10px; /* 增加叉号与文字的间距 */
    cursor: pointer; /* 设置为可点击状态 */
}

/* 选中按钮后的状态 */
.custom-btn.selected {
    background-color: #2d5f6c; /* 选中按钮时的背景颜色 */
}


/* 自定义复选框外观 */
.form-check-input {
    width: 1rem;
    height: 1rem;
    border-radius: 0.5rem;
    border: 1px solid #4B8CA6; /* 默认边框颜色 */
    background-color: white; /* 默认背景色 */
    transition: all 0.1s ease;
    cursor: pointer;
}

/* 当复选框被勾选时改变背景色和边框颜色 */
.form-check-input:checked {
    background-color: #4B8CA6; /* 勾选后的背景颜色 */
    border-color: #407b98; /* 勾选后的边框颜色 */
}

/* 当复选框被勾选时的外阴影效果 */
.form-check-input:checked:focus {
    box-shadow: 0 0 0 0.25rem rgba(75, 140, 166, 0.5);
}

/* 自定义复选框的勾选符号颜色 */
.form-check-input:checked::after {
    background-color: #fff; /* 勾选符号的背景色 */
}

#select-all-checkbox:indeterminate {
    background-color: #4B8CA6; /* 黄色背景 */
    border-color: #407b98;
    opacity: 1;
}


@media (max-width: 991px) {
    .btn-c {
        padding: 3px 8px;
    }
}

.tt-menu {
    max-height: 250px;
    overflow-y: auto;
    border: 1px solid #4B8CA6;
    background: white;
    z-index: 9999;
    width: 100%;
}

.twitter-typeahead {
    width: 100% !important;
}

.tt-suggestion {
    padding: 8px;
    cursor: pointer;
    transition: all 0.1s ease-in-out;
}

.tt-suggestion:hover {
    background-color: #4B8CA6;
    color: white;
}

.tt-suggestion.tt-cursor {
    background-color: #4B8CA6;
    color: white;
}

.ui-menu {
    border: 1px solid #4B8CA6;
    border-radius: 0.25rem;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    background-color: white;
    color: black;
}

.ui-menu-item {
    padding: 8px;
    cursor: pointer;
    color: black;
    background-color: white;
    height: 100%;
}

.ui-menu-item-wrapper {
    background-color: white !important;
    color: black !important;
    border: none !important;
    height: 100% !important;
}

.ui-menu-item:hover {
    background-color: #4B8CA6 !important;
    color: white !important;
}

.ui-menu-item-wrapper:hover,
.ui-menu-item-wrapper:focus,
.ui-menu-item-wrapper:active {
    background-color: white !important;
    color: white !important;
    border: none !important;
}


.ui-menu-item:hover .ui-menu-item-wrapper {
    background-color: #4B8CA6 !important;
    border: none !important;
    color: white !important;
}

.ui-autocomplete .ui-menu-item-wrapper.ui-state-focus {
    background-color: #4B8CA6 !important;
    color: white !important;
}


/* feedstock file delete button */
.delete-file-btn {
    background: transparent;
    border: none;
    padding: 0 0 0 5px;
    cursor: pointer;
    vertical-align: middle;
}

.trash-icon {
    width: 16px;
    height: 16px;
    vertical-align: middle;
    filter: brightness(0) saturate(100%) invert(38%) sepia(83%) saturate(3661%) hue-rotate(355deg) brightness(96%) contrast(105%);
    transition: transform 0.2s ease;
}

.delete-file-btn:hover .trash-icon {
    transform: scale(1.1);
}

#summaryModal .modal-body table td {
    word-break: break-word !important;
    white-space: normal !important;
    min-width: 150px !important;
}